/* ============================================================
   KDG Patient Tracker - design system v2 ("revamp")
   Modern healthcare SaaS: Inter type, soft slate canvas, white
   cards with layered shadows, deep teal + navy brand palette.
   Built on the white-label CSS variables injected by base.html
   (--brand-primary / --brand-sidebar and shades) with KDG
   defaults as fallbacks. Server-rendered, no build step.
   Loaded AFTER Bootstrap 5.
   ============================================================ */
:root{
  --ink:#0e2233;            /* navy ink */
  --ink-2:#33566e;
  /* White-label brand palette (KDG defaults). base.html injects the
     tenant's chosen colours over these variables at runtime. */
  --brand-primary:#0e7c7b;
  --brand-primary-dark:#0a5f5e;
  --brand-primary-soft:#e6f4f3;
  --brand-sidebar:#10293e;
  --brand-sidebar-dark:#0b1e2f;
  --teal:var(--brand-primary);           /* primary accent */
  --teal-dark:var(--brand-primary-dark);
  --teal-soft:var(--brand-primary-soft);
  --navy:var(--brand-sidebar);           /* sidebar */
  --navy-2:var(--brand-sidebar-dark);
  --slate-bg:#f5f7fa;
  --slate-line:#dde5ec;
  --slate-line-soft:#e8eef3;
  --muted:#63798c;
  --ok:#178a4c;    --ok-bg:#e4f5ec;
  --warn:#b97d0e;  --warn-bg:#fdf3e0;  --warn-solid:#e9a614;
  --bad:#c23333;   --bad-bg:#fbeaea;
  --miss:#71808d;  --miss-bg:#edf1f4;
  --radius:14px;
  --radius-lg:16px;
  --radius-sm:10px;
  --shadow-sm:0 1px 2px rgba(14,34,51,.05),0 1px 6px -2px rgba(14,34,51,.06);
  --shadow:0 1px 3px rgba(14,34,51,.06),0 10px 24px -12px rgba(14,34,51,.16);
  --shadow-lg:0 24px 48px -16px rgba(11,30,47,.28);
  --ring:0 0 0 3px color-mix(in srgb,var(--brand-primary) 32%,transparent);
  --sidebar-w:264px;
  --font:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
*{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
html{scroll-behavior:smooth}
body{
  background:var(--slate-bg); color:var(--ink);
  font-family:var(--font);
  font-size:.945rem; line-height:1.55;
  font-feature-settings:"cv11","ss01";
}
::selection{background:var(--teal);color:#fff}
a{color:var(--teal-dark);text-decoration-thickness:1px;text-underline-offset:2px}
a:hover{color:var(--teal)}
:focus-visible{outline:none;box-shadow:var(--ring);border-radius:8px}
.tnum,.kpi-value,td.date,.table .num{font-variant-numeric:tabular-nums}

/* ---------- Layout: sidebar + main ---------- */
.app-shell{display:flex;min-height:100vh}
.sidebar{
  width:var(--sidebar-w);flex:0 0 var(--sidebar-w);position:fixed;inset:0 auto 0 0;z-index:1040;
  background:
    radial-gradient(420px 240px at 85% -40px,color-mix(in srgb,var(--brand-primary) 34%,transparent),transparent 70%),
    linear-gradient(178deg,var(--navy) 0%,var(--navy-2) 88%);
  color:#cfe0ec;
  display:flex;flex-direction:column;padding:1.15rem .95rem 1rem;overflow-y:auto;
  transition:transform .25s ease;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.25) transparent;
}
.sidebar::-webkit-scrollbar{width:5px}
.sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.22);border-radius:99px}
.sidebar .brand{display:flex;align-items:center;gap:.65rem;color:#fff;text-decoration:none;
  font-weight:700;font-size:1.13rem;letter-spacing:-.01em;padding:.15rem .45rem 1.05rem;line-height:1.2}
.sidebar .brand .brand-mark{width:38px;height:38px;border-radius:11px;flex:0 0 38px;
  background:linear-gradient(135deg,var(--teal),color-mix(in srgb,var(--brand-primary) 55%,#39d0ba));
  display:grid;place-items:center;font-size:1.08rem;color:#fff;
  box-shadow:0 6px 14px -4px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.35)}
.sidebar .brand small{display:block;font-weight:600;font-size:.64rem;color:#93b1c7;letter-spacing:.16em;margin-top:.15rem}
.sidebar .brand-logo{height:38px;max-width:118px;object-fit:contain;background:#fff;border-radius:9px;
  padding:4px 7px;flex:0 0 auto;box-shadow:0 4px 10px rgba(0,0,0,.25)}
.login-brand-logo{max-height:64px;max-width:230px;object-fit:contain;background:#fff;border-radius:12px;
  padding:8px 12px;margin-bottom:1.1rem;align-self:flex-start;box-shadow:0 8px 22px rgba(0,0,0,.22)}
.nav-section{font-size:.66rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:#7e9db4;margin:1.05rem .6rem .4rem}
.nav-toggle{background:none;border:0;width:100%;font:inherit;display:flex;align-items:center;
  justify-content:space-between;cursor:pointer;text-align:left;padding:0 .1rem}
.nav-toggle:hover{color:#b8d2e4}
.nav-toggle .nav-chev{font-size:.68rem;opacity:.75;transition:transform .2s ease}
.nav-group.collapsed .nav-toggle .nav-chev{transform:rotate(-90deg)}
.nav-group.collapsed .nav-group-links{display:none}
.back-link{display:inline-flex;align-items:center;gap:.35rem;font-size:.82rem;font-weight:600;
  color:var(--teal);text-decoration:none;line-height:1.2}
.back-link:hover{color:var(--teal-dark);text-decoration:underline}
.back-link i{font-size:.85rem}
.sidebar .nav-link{color:#c3d6e4;border-radius:10px;padding:.5rem .65rem;margin-bottom:2px;
  display:flex;align-items:center;gap:.6rem;font-weight:500;font-size:.925rem;text-decoration:none;
  transition:background .15s ease,color .15s ease}
.sidebar .nav-link i{width:1.15rem;text-align:center;opacity:.85;font-size:1rem}
.sidebar .nav-link:hover{background:rgba(255,255,255,.09);color:#fff}
.sidebar .nav-link.active{background:linear-gradient(90deg,var(--teal),color-mix(in srgb,var(--brand-primary) 78%,#2bb3a3));
  color:#fff;font-weight:600;box-shadow:0 6px 14px -6px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.22)}
.sidebar .nav-link .badge{margin-left:auto}
.sidebar .side-foot{margin-top:auto;border-top:1px solid rgba(255,255,255,.13);padding-top:.85rem}
.user-chip{display:flex;align-items:center;gap:.6rem;padding:.35rem .4rem;color:#eaf3f9}
.user-chip .avatar{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,var(--teal),var(--teal-dark));color:#fff;
  display:grid;place-items:center;font-weight:700;font-size:.86rem;flex:0 0 36px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3)}
.user-chip .who{line-height:1.15;min-width:0}
.user-chip .who .name{font-weight:600;font-size:.88rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.user-chip .who .role{font-size:.72rem;color:#9db8cc}
.sidebar .side-actions{display:flex;gap:.4rem;margin-top:.55rem}
.sidebar .side-actions .btn{flex:1}
.btn-side{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);color:#eaf3f9}
.btn-side:hover{background:rgba(255,255,255,.16);color:#fff}
.main-wrap{flex:1;min-width:0;margin-left:var(--sidebar-w);display:flex;flex-direction:column}
.topbar{position:sticky;top:0;z-index:1030;background:rgba(255,255,255,.88);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--slate-line);padding:.65rem 1.6rem;display:flex;align-items:center;gap:.9rem}
.topbar .page-title{font-size:1.24rem;font-weight:700;margin:0;color:var(--ink);letter-spacing:-.015em}
.topbar .page-sub{color:var(--muted);font-size:.84rem;margin:0}
.topbar .spacer{flex:1}
.topbar .icon-btn{position:relative;width:38px;height:38px;border-radius:10px;display:inline-grid;place-items:center;
  border:1px solid var(--slate-line);background:#fff;color:var(--ink-2);font-size:1.02rem;text-decoration:none}
.topbar .icon-btn:hover{background:var(--teal-soft);color:var(--teal-dark)}
.topbar .icon-btn .nbadge{position:absolute;top:-6px;right:-6px;background:var(--bad);color:#fff;
  font-size:.66rem;font-weight:700;border-radius:999px;padding:.14rem .4rem;border:2px solid #fff;line-height:1}
.top-avatar{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,var(--teal),var(--teal-dark));
  color:#fff;display:grid;place-items:center;font-weight:700;font-size:.9rem;flex:0 0 38px}
.content{padding:1.7rem 1.6rem 2.2rem;max-width:1560px;width:100%;margin:0 auto}
#sidebarToggle{display:none}
.sidebar-backdrop{display:none}
@media (max-width:991.98px){
  .sidebar{transform:translateX(-105%);box-shadow:var(--shadow-lg)}
  body.side-open .sidebar{transform:none}
  body.side-open .sidebar-backdrop{display:block;position:fixed;inset:0;background:rgba(11,30,47,.5);z-index:1035}
  .main-wrap{margin-left:0}
  #sidebarToggle{display:inline-flex}
  .content{padding:1.05rem}
}

/* ---------- Type & headings ---------- */
h1,h2,h3,h4,h5{color:var(--ink);font-weight:700;letter-spacing:-.018em}
h1{font-size:1.68rem} h2{font-size:1.32rem} h3{font-size:1.13rem}
.page-head{margin-bottom:1.25rem}
.page-head h1,.page-head h2{margin-bottom:.2rem}
.page-head .sub,.subtitle{color:var(--muted);font-size:.93rem;margin:0}
/* Page actions toolbar: the "do it now" buttons at the top-right of a
   page head - one consistent pattern across Reports, Packs, Compliance,
   Duplicates, Escalations and Tebra Exceptions. */
.actions-toolbar{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center;justify-content:flex-end}
.actions-toolbar form{display:inline-flex;margin:0}
.actions-toolbar .btn{white-space:nowrap}
.text-muted,.small.text-muted{color:var(--muted)!important}
.text-teal{color:var(--teal)!important}
.back-link{font-size:.88rem;text-decoration:none;display:inline-flex;gap:.3rem;align-items:center;margin-bottom:.4rem}
.section-title{font-size:.8rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-2);margin:0 0 .8rem}

/* ---------- Cards ---------- */
.card{border:1px solid var(--slate-line);border-radius:var(--radius);box-shadow:var(--shadow-sm);background:#fff}
.card-header{background:#fff;border-bottom:1px solid var(--slate-line-soft);font-weight:700;
  border-radius:var(--radius) var(--radius) 0 0!important;padding:.85rem 1.15rem;
  display:flex;align-items:center;gap:.5rem}
.card-header .bi{color:var(--teal)}
.card-body{padding:1.15rem}
.card.hoverable{transition:transform .16s ease,box-shadow .16s ease}
.card.hoverable:hover{transform:translateY(-2px);box-shadow:var(--shadow)}

/* ---------- KPI stat cards ---------- */
.kpi-card{border-left:4px solid var(--teal)}
.kpi-card.warn{border-left-color:var(--warn-solid)} .kpi-card.bad{border-left-color:var(--bad)}
.kpi-num{font-size:1.9rem;font-weight:800;line-height:1.05;color:var(--ink);font-variant-numeric:tabular-nums}
.kpi-label{font-size:.76rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.kpi-sub{font-size:.82rem;color:var(--muted)}
.kpi{display:flex;flex-direction:column;gap:.15rem;padding:1.05rem 1.1rem;height:100%;
  border:1px solid var(--slate-line);border-radius:var(--radius);background:#fff;box-shadow:var(--shadow-sm);
  transition:transform .16s ease,box-shadow .16s ease}
.kpi:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.kpi-top{display:flex;align-items:flex-start;justify-content:space-between;gap:.5rem}
.kpi-icon{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;font-size:1.12rem;flex:0 0 42px}
.ki-teal{background:var(--teal-soft);color:var(--teal-dark)}
.ki-navy{background:#e4ecf3;color:var(--navy)}
.ki-green{background:var(--ok-bg);color:var(--ok)}
.ki-amber{background:var(--warn-bg);color:var(--warn)}
.ki-red{background:var(--bad-bg);color:var(--bad)}
.ki-slate{background:var(--miss-bg);color:var(--ink-2)}
.kpi-value{font-size:1.78rem;font-weight:800;line-height:1.02;color:var(--ink);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.kpi-label2{font-size:.83rem;font-weight:600;color:var(--ink-2)}
.kpi-cap{font-size:.78rem;color:var(--muted)}
a.kpi, a .kpi-value{color:var(--ink)}
a.kpi{text-decoration:none}
a.kpi:hover .kpi-label2{color:var(--teal-dark)}

/* ---------- Compliance donut ---------- */
.donut-wrap{display:flex;align-items:center;gap:1.3rem;flex-wrap:wrap}
.donut{--pct:0;--donut-color:var(--ok);width:138px;height:138px;border-radius:50%;flex:0 0 138px;
  background:conic-gradient(var(--donut-color) calc(var(--pct)*1%),#e7edf2 0);
  display:grid;place-items:center;box-shadow:inset 0 0 0 1px rgba(14,34,51,.04)}
.donut-hole{width:104px;height:104px;border-radius:50%;background:#fff;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;box-shadow:0 1px 4px rgba(14,34,51,.08)}
.donut-val{font-size:1.55rem;font-weight:800;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums}
.donut-cap{font-size:.66rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin-top:.28rem;padding:0 .6rem}
.donut-legend{display:flex;flex-direction:column;gap:.45rem;font-size:.88rem}
.donut-legend .li{display:flex;align-items:center;gap:.5rem}
.dotkey{width:10px;height:10px;border-radius:3px;flex:0 0 10px}

/* ---------- Avatars / people ---------- */
.avatar-initials{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;flex:0 0 38px;
  color:#fff;font-weight:700;font-size:.82rem;letter-spacing:.01em;box-shadow:inset 0 1px 0 rgba(255,255,255,.28)}
.avatar-initials.lg{width:62px;height:62px;flex-basis:62px;font-size:1.3rem;border-radius:18px}
.avatar-initials.sm{width:30px;height:30px;flex-basis:30px;font-size:.7rem}
.avc-0{background:linear-gradient(135deg,#0e7c7b,#0a5f5e)} .avc-1{background:linear-gradient(135deg,#3e63dd,#2f4bb0)}
.avc-2{background:linear-gradient(135deg,#7c5cd6,#5f43ad)} .avc-3{background:linear-gradient(135deg,#d64570,#b02a52)}
.avc-4{background:linear-gradient(135deg,#e08a00,#b96e00)} .avc-5{background:linear-gradient(135deg,#1d8ac0,#146a94)}
.avc-6{background:linear-gradient(135deg,#2f9e63,#1f7a4a)} .avc-7{background:linear-gradient(135deg,#5b7186,#40536a)}
.person-cell{display:flex;align-items:center;gap:.65rem;min-width:0}
.person-cell .pmeta{min-width:0;line-height:1.25}
.person-cell .pname{font-weight:600;color:var(--ink)}
.person-cell .psub{font-size:.78rem;color:var(--muted)}

/* ---------- Buttons ---------- */
.btn{border-radius:10px;font-weight:600;padding:.48rem .98rem;transition:background .15s ease,box-shadow .15s ease,transform .1s ease}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--teal);border-color:var(--teal);box-shadow:0 4px 10px -4px color-mix(in srgb,var(--brand-primary) 65%,transparent)}
.btn-primary:hover,.btn-primary:focus{background:var(--teal-dark);border-color:var(--teal-dark)}
.btn-success{background:var(--ok);border-color:var(--ok)}
.btn-success:hover{background:#126e3d;border-color:#126e3d}
.btn-outline-secondary{color:var(--ink-2);border-color:#c3d2dd;background:#fff}
.btn-outline-secondary:hover{background:var(--miss-bg);color:var(--ink)}
.btn-outline-primary{color:var(--teal-dark);border-color:color-mix(in srgb,var(--brand-primary) 55%,#fff)}
.btn-outline-primary:hover{background:var(--teal);border-color:var(--teal)}
.btn-ghost{background:transparent;border-color:transparent;color:var(--teal-dark)}
.btn-ghost:hover{background:var(--teal-soft);color:var(--teal-dark)}
.btn-sm{padding:.32rem .72rem;border-radius:8px}
.btn-lg{border-radius:12px}

/* ---------- Tables ---------- */
.table{--bs-table-bg:transparent;margin-bottom:0}
.table thead th{background:#eef3f7;color:var(--ink-2);font-size:.74rem;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;border-bottom:1px solid var(--slate-line);
  position:sticky;top:0;z-index:1;white-space:nowrap;padding:.65rem .8rem}
.table tbody td{vertical-align:middle;border-color:var(--slate-line-soft);padding:.62rem .8rem}
.table-hover tbody tr:hover{background:var(--teal-soft)}
.table-wrap{background:#fff;border:1px solid var(--slate-line);border-radius:var(--radius);
  box-shadow:var(--shadow-sm);overflow:auto}
.td-date,.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.empty-state{padding:3rem 1rem;text-align:center;color:var(--muted)}
.empty-state .es-icon{width:58px;height:58px;border-radius:18px;background:var(--teal-soft);color:var(--teal-dark);
  display:grid;place-items:center;font-size:1.5rem;margin:0 auto .8rem}
.empty-state .big{font-size:1.05rem;font-weight:600;color:var(--ink-2)}
.filter-bar{background:#fff;border:1px solid var(--slate-line);border-radius:var(--radius);
  box-shadow:var(--shadow-sm);padding:1rem 1.1rem;margin-bottom:1.1rem}
.filter-bar .form-label{font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:.3rem}

/* ---------- Status pills / badges ---------- */
.badge{border-radius:999px;font-weight:600;padding:.38em .7em;font-size:.74rem}
.pill{display:inline-flex;align-items:center;gap:.3rem;border-radius:999px;padding:.24rem .66rem;
  font-size:.76rem;font-weight:600;white-space:nowrap;line-height:1.35}
.pill-ok{background:var(--ok-bg);color:var(--ok)} .pill-warn{background:var(--warn-bg);color:var(--warn)}
.pill-bad{background:var(--bad-bg);color:var(--bad)} .pill-miss{background:var(--miss-bg);color:var(--miss)}
.pill-info{background:var(--teal-soft);color:var(--teal-dark)}
.pill-dark{background:#33475c;color:#fff}
.bg-success{background-color:var(--ok)!important}.bg-danger{background-color:var(--bad)!important}
.bg-warning{background-color:var(--warn-solid)!important;color:#3d2c02!important}
.bg-secondary{background-color:#8296a5!important}.bg-info{background-color:var(--teal)!important}
.score-badge{font-weight:800}
.score-good{color:var(--ok)} .score-mid{color:var(--warn)} .score-low{color:var(--bad)}
.meta-chip{display:inline-flex;align-items:center;gap:.38rem;background:#f2f6f9;border:1px solid var(--slate-line);
  border-radius:999px;padding:.3rem .7rem;font-size:.8rem;font-weight:600;color:var(--ink-2)}
.meta-chip i{color:var(--teal)}
.meta-chip b{color:var(--ink);font-weight:700}

/* ---------- Progress ---------- */
.progress{height:.5rem;border-radius:999px;background:var(--miss-bg);overflow:hidden}
.progress-bar{background:var(--teal);border-radius:999px}
.progress-bar.bar-ok{background:var(--ok)} .progress-bar.bar-warn{background:var(--warn-solid)}
.progress-bar.bar-bad{background:var(--bad)}
.progress.mini{height:.38rem}
.rank-row{display:flex;align-items:center;gap:.7rem;padding:.5rem 0;border-bottom:1px solid var(--slate-line-soft)}
.rank-row:last-child{border-bottom:0}
.rank-row .rbar{flex:1}
.rank-row .rval{font-weight:700;font-variant-numeric:tabular-nums;min-width:44px;text-align:right}

/* ---------- Forms ---------- */
.form-label{font-weight:600;font-size:.87rem;color:var(--ink-2);margin-bottom:.3rem}
.form-control,.form-select{border-radius:10px;border-color:#c3d2dd;padding:.52rem .78rem;background:#fff}
.form-control:focus,.form-select:focus{border-color:var(--teal);box-shadow:var(--ring)}
.form-text{color:var(--muted)}
fieldset{border:1px solid var(--slate-line);border-radius:var(--radius);padding:1.1rem 1.15rem;margin-bottom:1.1rem;background:#fff}
legend{font-size:.78rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-2);
  float:none;width:auto;padding:0 .4rem}
.invalid-feedback,.errorlist{color:var(--bad)}
.errorlist{list-style:none;padding-left:0;font-size:.86rem}
.form-card{max-width:860px}
.form-card form p{margin-bottom:1rem}
.form-card form p label{display:block;font-weight:600;font-size:.87rem;color:var(--ink-2);margin-bottom:.3rem}
.form-actions{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:1.2rem;padding-top:1.1rem;border-top:1px solid var(--slate-line-soft)}

/* ---------- Alerts / flash ---------- */
.alert{border-radius:var(--radius);border-width:1px;box-shadow:var(--shadow-sm)}
.alert-success{background:var(--ok-bg);border-color:#bfe6cf;color:#0d5c31}
.alert-danger{background:var(--bad-bg);border-color:#f0c6c6;color:#7c1d1d}
.alert-warning{background:var(--warn-bg);border-color:#eed9a8;color:#6d4c08}
.alert-info{background:var(--teal-soft);border-color:#bfe0de;color:var(--teal-dark)}
.flash{display:flex;gap:.65rem;align-items:flex-start}
.flash .bi{font-size:1.08rem;line-height:1.35;flex:0 0 auto}
.flash .fmsg{flex:1;min-width:0}

/* ---------- Workflow stepper (vertical, detail) ---------- */
.stepper{list-style:none;margin:0;padding:0;counter-reset:step}
.stepper li{display:flex;gap:.85rem;padding:.5rem 0;position:relative;align-items:flex-start}
.stepper li:not(:last-child)::before{content:"";position:absolute;left:16px;top:42px;bottom:-4px;width:2px;background:var(--slate-line);border-radius:2px}
.stepper li.done:not(:last-child)::before{background:#a9dcc0}
.stepper .dot{width:34px;height:34px;flex:0 0 34px;border-radius:50%;display:grid;place-items:center;
  font-size:.86rem;font-weight:700;background:#fff;color:var(--miss);border:2px solid var(--slate-line);z-index:1}
.stepper li.done .dot{background:var(--ok);border-color:var(--ok);color:#fff}
.stepper li.overdue .dot{background:var(--bad);border-color:var(--bad);color:#fff}
.stepper li.current .dot{background:var(--teal);border-color:var(--teal);color:#fff;box-shadow:0 0 0 4px color-mix(in srgb,var(--brand-primary) 22%,transparent)}
.stepper .step-main{flex:1;min-width:0;padding-top:.3rem}
.stepper .step-name{font-weight:600}
.stepper .step-meta{font-size:.83rem;color:var(--muted)}

/* ---------- Horizontal stepper (cycle summary) ---------- */
.hstepper{display:flex;margin:.4rem 0 .2rem;padding:0;list-style:none}
.hstep{flex:1;text-align:center;position:relative;min-width:0}
.hstep::before{content:"";position:absolute;top:16px;left:calc(-50% + 21px);right:calc(50% + 21px);height:3px;
  background:var(--slate-line);border-radius:3px}
.hstep:first-child::before{display:none}
.hstep.done::before{background:#a9dcc0}
.hnode{width:34px;height:34px;margin:0 auto;border-radius:50%;display:grid;place-items:center;position:relative;z-index:1;
  background:#fff;border:2px solid var(--slate-line);color:var(--miss);font-size:.82rem;font-weight:700}
.hstep.done .hnode{background:var(--ok);border-color:var(--ok);color:#fff}
.hstep.overdue .hnode{background:var(--bad);border-color:var(--bad);color:#fff}
.hstep.current .hnode{background:var(--teal);border-color:var(--teal);color:#fff;box-shadow:0 0 0 4px color-mix(in srgb,var(--brand-primary) 22%,transparent)}
.hlabel{display:block;margin-top:.42rem;font-size:.68rem;font-weight:600;color:var(--muted);line-height:1.25;padding:0 .15rem}
.hstep.done .hlabel{color:var(--ok)} .hstep.overdue .hlabel{color:var(--bad)} .hstep.current .hlabel{color:var(--teal-dark)}
@media (max-width:640px){.hlabel{display:none}.hstep.current .hlabel,.hstep.overdue .hlabel{display:block}}

/* ---------- Milestone cards ---------- */
.ms-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:.75rem}
.ms-card{border:1px solid var(--slate-line);border-left:4px solid var(--miss);border-radius:12px;background:#fff;
  padding:.75rem .9rem;box-shadow:var(--shadow-sm)}
.ms-card.ms-ok{border-left-color:var(--ok)} .ms-card.ms-warn{border-left-color:var(--warn-solid)}
.ms-card.ms-bad{border-left-color:var(--bad)} .ms-card.ms-miss{border-left-color:#c2cfd9}
.ms-card .ms-title{font-size:.74rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);
  display:flex;align-items:center;gap:.4rem;margin-bottom:.3rem}
.ms-card .ms-val{font-weight:600;color:var(--ink);font-size:.92rem}
.ms-card .ms-sub{font-size:.8rem;color:var(--muted)}
.kv-row{display:flex;justify-content:space-between;gap:1rem;padding:.42rem 0;border-bottom:1px dashed var(--slate-line-soft);font-size:.92rem}
.kv-row:last-child{border-bottom:0}
.kv-row .k{color:var(--muted);font-weight:500}
.kv-row .v{font-weight:600;text-align:right}

/* ---------- Kanban board ---------- */
.kanban{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(248px,1fr);gap:1rem;overflow-x:auto;padding-bottom:.6rem;align-items:start}
.kanban-col{background:#edf2f6;border:1px solid var(--slate-line);border-radius:var(--radius);padding:.8rem;min-height:140px}
.kanban-col-head{display:flex;align-items:center;gap:.5rem;font-weight:700;font-size:.79rem;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ink-2);margin-bottom:.7rem}
.kanban-col-head .count{margin-left:auto;background:#fff;border:1px solid var(--slate-line);color:var(--ink-2);
  border-radius:999px;font-size:.72rem;padding:.08rem .5rem;font-weight:700}
.kanban-card{background:#fff;border:1px solid var(--slate-line);border-radius:12px;box-shadow:var(--shadow-sm);
  padding:.7rem .8rem;margin-bottom:.6rem;font-size:.9rem}
.kanban-card:last-child{margin-bottom:0}
.kanban-card.overdue{border-left:4px solid var(--bad)}
.kanban-card .kc-name{font-weight:700;color:var(--ink);text-decoration:none}
.kanban-card .kc-name:hover{color:var(--teal-dark)}
.kanban-card .kc-meta{font-size:.79rem;color:var(--muted)}
.kanban-empty{font-size:.83rem;color:var(--muted);text-align:center;padding:.9rem .3rem;border:1px dashed #c9d6df;border-radius:10px}
/* legacy board classes (kept) */
.board-col{background:#eef3f7;border:1px solid var(--slate-line);border-radius:var(--radius);padding:.8rem;min-height:120px}
.board-col h6{font-weight:700;font-size:.8rem;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-2)}
.board-card{background:#fff;border:1px solid var(--slate-line);border-radius:10px;box-shadow:var(--shadow-sm);
  padding:.65rem .75rem;margin-bottom:.55rem;font-size:.9rem}
.board-card.overdue{border-left:4px solid var(--bad)}

/* ---------- Approval review cards ---------- */
.appr-head{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap}
.appr-head .who{min-width:0;line-height:1.3}
.appr-head .when{margin-left:auto;text-align:right}
.chg-list{display:flex;flex-direction:column;gap:.5rem;margin-top:.8rem}
.chg-row{display:grid;grid-template-columns:150px 1fr auto 1fr;gap:.6rem;align-items:stretch}
.chg-field{font-weight:600;font-size:.85rem;color:var(--ink-2);align-self:center;text-transform:capitalize}
.chg-old,.chg-new{border-radius:10px;padding:.45rem .7rem;font-size:.88rem;display:flex;align-items:center;gap:.4rem;word-break:break-word}
.chg-old{background:var(--bad-bg);color:#8a2323}
.chg-new{background:var(--ok-bg);color:#0d5c31;font-weight:600}
.chg-val{background:var(--miss-bg);color:var(--ink-2);border-radius:10px;padding:.45rem .7rem;font-size:.88rem}
.chg-arrow{color:var(--muted);align-self:center}
@media (max-width:700px){.chg-row{grid-template-columns:1fr}.chg-arrow{transform:rotate(90deg);justify-self:center}}
.change-table td .old{color:var(--bad);text-decoration:line-through}
.change-table td .new{color:var(--ok);font-weight:700}
.diff-arrow{color:var(--muted);padding:0 .35rem}

/* ---------- Auth queue two-step progress ---------- */
.steps2{display:inline-flex;align-items:center;gap:.35rem;flex-wrap:wrap}
.s2-node{display:inline-flex;align-items:center;gap:.35rem;padding:.24rem .6rem;border-radius:999px;
  font-size:.74rem;font-weight:700;white-space:nowrap}
.s2-node.done{background:var(--ok-bg);color:var(--ok)}
.s2-node.todo{background:var(--miss-bg);color:var(--miss)}
.s2-node.next{background:var(--warn-bg);color:var(--warn);box-shadow:inset 0 0 0 1px #eed9a8}
.s2-line{width:20px;height:2px;background:#c9d6df;border-radius:2px;flex:0 0 20px}
.s2-line.done{background:var(--ok)}
.elapsed-chip{display:inline-flex;align-items:center;gap:.3rem;background:#eef3f7;border:1px solid var(--slate-line);
  color:var(--ink-2);border-radius:999px;padding:.18rem .55rem;font-size:.72rem;font-weight:600;font-variant-numeric:tabular-nums}

/* ---------- Supervision window dots ---------- */
.win-dots{display:inline-flex;gap:.34rem;align-items:center}
.win-dot{width:13px;height:13px;border-radius:50%;background:#d7e0e8;box-shadow:inset 0 0 0 2px #fff,0 0 0 1px var(--slate-line)}
.win-dot.done{background:var(--ok)} .win-dot.scheduled{background:var(--teal)}
.win-dot.warn{background:var(--warn-solid)} .win-dot.bad{background:var(--bad)}

/* ---------- Login ---------- */
.login-wrap{min-height:100vh;display:grid;grid-template-columns:1.05fr 1fr;background:#fff}
.login-brand{position:relative;overflow:hidden;color:#eaf3f9;
  background:
    radial-gradient(560px 340px at 88% -60px,color-mix(in srgb,var(--brand-primary) 42%,transparent),transparent 70%),
    radial-gradient(480px 380px at -80px 108%,rgba(255,255,255,.09),transparent 65%),
    linear-gradient(158deg,var(--navy) 30%,var(--teal-dark) 130%);
  padding:3.4rem;display:flex;flex-direction:column;justify-content:center}
.login-brand h1{color:#fff;font-size:2.05rem;letter-spacing:-.02em}
.login-brand p{color:#bcd2e2;max-width:430px}
.login-brand .feat{display:flex;gap:.7rem;align-items:flex-start;margin-top:.95rem;color:#d7e6f0;font-size:.93rem;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:.7rem .85rem;max-width:460px}
.login-brand .feat i{width:32px;height:32px;flex:0 0 32px;border-radius:9px;background:rgba(255,255,255,.12);
  display:grid;place-items:center;font-size:.95rem;color:#fff}
.login-brand .feat span{padding-top:.28rem}
.login-mark{width:52px;height:52px;border-radius:15px;background:linear-gradient(135deg,var(--teal),#2bb3a3);
  display:grid;place-items:center;font-size:1.5rem;color:#fff;margin-bottom:1.2rem;
  box-shadow:0 10px 24px -8px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.35)}
.login-panel{display:flex;align-items:center;justify-content:center;padding:2rem;background:var(--slate-bg)}
.login-card{width:100%;max-width:410px}
.login-card .card{box-shadow:var(--shadow);border-radius:var(--radius-lg)}
@media (max-width:860px){.login-wrap{grid-template-columns:1fr}.login-brand{display:none}}

/* ---------- Misc ---------- */
.dropdown-menu{border-radius:12px;border-color:var(--slate-line);box-shadow:var(--shadow)}
.list-group-item{border-color:var(--slate-line-soft);padding:.7rem 1rem}
.chip-row{display:flex;flex-wrap:wrap;gap:.4rem}
hr{border-color:var(--slate-line);opacity:1}
.pagination .page-link{color:var(--teal-dark);border-radius:8px;margin:0 2px;border-color:var(--slate-line)}
.pagination .active .page-link{background:var(--teal);border-color:var(--teal)}
.modal-content{border-radius:16px;border:0;box-shadow:var(--shadow-lg)}
.offcanvas{--bs-offcanvas-width:280px}
.score-wrap{min-width:92px}
.score-wrap .progress{margin-top:.32rem}
.card-body>h2:first-child{font-size:1.85rem;font-weight:800;line-height:1.05;color:var(--ink);margin-bottom:.15rem}
.card.text-center .card-body{padding:1.15rem .6rem}
.table-wrap>table{margin-bottom:0}
table.table{background:#fff;border:1px solid var(--slate-line);border-radius:12px;
  border-collapse:separate;border-spacing:0;overflow:hidden;box-shadow:var(--shadow-sm)}
table.table>:last-child>:last-child>td{border-bottom:0}
@media print{.sidebar,.topbar{display:none!important}.main-wrap{margin:0}.content{padding:0}}