/* =====================================================================
   TJI Platform theme: design tokens, base typography, application shell
   and shared controls. Loaded after tji.css, which holds the per-screen
   layouts. Serif (Fraunces) is reserved for page titles and the wordmark.
   ===================================================================== */

:root{
  /* Brand */
  --ink:#152131; --ink-2:#1E2C3E; --ink-3:#28384D;
  --ribbon:#B4485A; --ribbon-deep:#8A3344; --ribbon-soft:#F8ECEE;

  /* Surfaces and lines */
  --paper:#F4F6F8; --card:#FFFFFF; --surface-2:#F8F9FB;
  --line:#E2E6EB; --line-2:#CDD4DD;

  /* Text */
  --t1:#18212D; --t2:#4A5566; --t3:#5E6A7B;

  /* Status */
  --ledger:#2B6A56; --ledger-soft:#E6F2ED;
  --amber:#8F6210; --amber-soft:#FBF1DE;
  --red:#A83232; --red-soft:#FBEAEA;
  --blue:#2D5E8E; --blue-soft:#E8F0F8;

  /* Type. --serif is kept for legacy rules and now resolves to the UI face;
     use --display for page titles and the wordmark only. */
  --sans:'Inter',-apple-system,'Segoe UI',sans-serif;
  --display:'Fraunces',Georgia,serif;
  --serif:var(--sans);
  --mono:'IBM Plex Mono',ui-monospace,monospace;

  /* Geometry */
  --radius-sm:6px; --radius:8px; --radius-lg:12px;
  --shadow-sm:0 1px 2px rgba(16,24,40,.05);
  --shadow:0 1px 3px rgba(16,24,40,.06),0 1px 2px rgba(16,24,40,.04);
  --shadow-pop:0 12px 32px rgba(16,24,40,.18);
  --focus:0 0 0 3px rgba(180,72,90,.22);

  --rail-width:248px;
  --tji-ui-scale:1;
}

/* ---------- base ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html{zoom:var(--tji-ui-scale);scroll-behavior:smooth}
body{background:var(--paper);color:var(--t1);font-family:var(--sans);font-size:14px;line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:var(--ribbon-deep);text-underline-offset:2px}
h1,h2,h3,h4{color:var(--t1);font-family:var(--sans);font-weight:600;line-height:1.3}
h1{font-family:var(--display);font-weight:500;letter-spacing:-.01em}
code{font-family:var(--mono);font-size:.92em}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--ribbon)!important;outline-offset:2px!important}
/* FocusOnNavigate moves focus to the page title for screen readers; it is not a keyboard target. */
h1[tabindex="-1"]:focus,h1[tabindex="-1"]:focus-visible{outline:none!important}
::selection{background:#EACFD5}

.skip-link{position:fixed;top:10px;left:12px;z-index:1200;padding:10px 16px;border-radius:var(--radius);background:#FFF;color:var(--ink);box-shadow:var(--shadow-pop);transform:translateY(-160%)}
.skip-link:focus{transform:translateY(0)}

/* ---------- application shell ---------- */
html,body{width:100%;min-width:0;overflow-x:clip}
.shell{display:grid;grid-template-columns:var(--rail-width) minmax(0,1fr);width:100%;min-height:100vh}

.rail{position:sticky;top:0;z-index:100;display:flex;flex-direction:column;align-self:start;height:calc(100vh / var(--tji-ui-scale));height:calc(100dvh / var(--tji-ui-scale));min-width:0;background:var(--ink);color:#C7CFD9}

.nav-brand{display:flex;align-items:center;gap:11px;padding:16px 18px 12px}
.nav-brand-mark{display:grid;flex:0 0 auto;width:34px;height:34px;place-items:center;border-radius:var(--radius);background:var(--ribbon);color:#FFF;font-family:var(--display);font-size:14px;font-weight:600;letter-spacing:.02em}
.nav-brand-copy{display:flex;min-width:0;flex:1;flex-direction:column;line-height:1.2}
.nav-brand-copy strong{overflow:hidden;color:#F4F1EA;font-family:var(--display);font-size:16px;font-weight:500;text-overflow:ellipsis;white-space:nowrap}
.nav-brand-copy small{margin-top:2px;color:#8B97A6;font-size:12px}
.nav-mobile-toggle{display:none}
.nav-mobile-context{display:none}

.nav-scroll{flex:1;min-height:0;padding:4px 10px 16px;overflow-y:auto;overscroll-behavior:contain;scrollbar-color:#3A4A5E transparent;scrollbar-width:thin}
.nav-group{padding-top:12px}
.nav-group:first-child{padding-top:4px}
.nav-section-label{margin:0 10px 4px;color:#7F8B9B;font-family:var(--sans);font-size:11.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.rail .navbtn{position:relative;display:flex;align-items:center;gap:10px;min-height:33px;margin:1px 0;padding:6px 10px;border-radius:var(--radius);color:#C7CFD9;font-size:13.5px;font-weight:500;line-height:1.25;text-decoration:none;transition:background .12s ease,color .12s ease}
.rail .navbtn .icon{flex:0 0 auto;color:#8B97A6;transition:color .12s ease}
.rail .navbtn>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rail .navbtn:hover{background:var(--ink-2);color:#FFF}
.rail .navbtn:hover .icon{color:#C7CFD9}
.rail .navbtn.active{background:var(--ink-3);color:#FFF}
.rail .navbtn.active .icon{color:#F0B3BE}
.rail .navbtn.active::before{position:absolute;top:7px;bottom:7px;left:-10px;width:3px;border-radius:0 3px 3px 0;background:var(--ribbon);content:""}
.rail .navbtn:focus-visible,.rail summary:focus-visible,.nav-mobile-toggle:focus-visible{outline-color:#F0B3BE!important}
.rail [hidden]{display:none!important}

/* Account menu */
.nav-footer{position:relative;flex:0 0 auto;padding:10px;border-top:1px solid rgba(255,255,255,.07)}
.nav-account>summary{display:grid;grid-template-columns:32px minmax(0,1fr) 16px;align-items:center;gap:10px;padding:7px 8px;border-radius:var(--radius);cursor:pointer;list-style:none;transition:background .12s ease}
.nav-account>summary::-webkit-details-marker{display:none}
.nav-account>summary:hover,.nav-account[open]>summary{background:var(--ink-2)}
.nav-account-avatar{display:grid;width:32px;height:32px;place-items:center;border-radius:50%;background:#34465C;color:#F4F1EA;font-size:12px;font-weight:600}
.nav-account-copy{display:flex;min-width:0;flex-direction:column;line-height:1.3}
.nav-account-copy strong{overflow:hidden;color:#F4F1EA;font-size:13px;font-weight:600;text-overflow:ellipsis;white-space:nowrap}
.nav-account-copy small{overflow:hidden;color:#8B97A6;font-size:12px;text-overflow:ellipsis;white-space:nowrap}
.nav-account-caret{color:#8B97A6}
.nav-account-menu{position:absolute;right:10px;bottom:calc(100% - 2px);left:10px;z-index:20;padding:6px;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--card);color:var(--t1);box-shadow:var(--shadow-pop)}
.nav-account-scale{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 8px 8px;border-bottom:1px solid var(--line)}
.nav-account-scale>span{display:flex;align-items:center;gap:8px;color:var(--t2);font-size:13px;white-space:nowrap}
.nav-account-scale>span .icon{color:var(--t3)}
.nav-account-scale>div{display:grid;flex:0 0 auto;grid-template-columns:28px 48px 28px;overflow:hidden;border:1px solid var(--line-2);border-radius:var(--radius-sm)}
.nav-account-scale button{display:grid;height:28px;place-items:center;border:0;background:#FFF;color:var(--t2);font:inherit;font-size:12px;font-weight:600;font-variant-numeric:tabular-nums;cursor:pointer}
.nav-account-scale button:hover:not(:disabled){background:var(--surface-2);color:var(--t1)}
.nav-account-scale button:disabled{color:#B5BDC8;cursor:not-allowed}
.nav-account-scale .ui-scale-value{border-inline:1px solid var(--line)}
.nav-account-menu form{display:block;margin-top:6px}
.nav-account-signout{display:flex;align-items:center;gap:8px;width:100%;padding:8px;border:0;border-radius:var(--radius-sm);background:transparent;color:var(--t1);font:inherit;font-size:13px;text-align:left;cursor:pointer}
.nav-account-signout .icon{color:var(--t3)}
.nav-account-signout:hover{background:var(--red-soft);color:var(--red)}
.nav-account-signout:hover .icon{color:var(--red)}

/* ---------- content canvas and page header ---------- */
.main{position:relative;width:100%;min-width:0;max-width:none;padding:32px clamp(20px,3vw,48px) 64px}
.main>.screen{width:100%;min-width:0;max-width:none;margin-inline:0}

.page-header{display:flex;align-items:flex-end;justify-content:space-between;gap:16px 24px;flex-wrap:wrap;margin-bottom:24px}
.page-header-text{min-width:0;flex:1 1 420px}
.page-header h1,.screen>h1{margin:0;font-size:clamp(26px,2vw,30px);line-height:1.2}
.page-header .lede{max-width:72ch;margin:6px 0 0;color:var(--t2);font-size:14px;line-height:1.55}
.page-header-actions{display:flex;flex:0 0 auto;flex-wrap:wrap;align-items:center;gap:8px}
.lede{color:var(--t2);max-width:72ch}

/* ---------- shared controls ---------- */
.mbtn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:36px;padding:7px 14px;border:1px solid var(--line-2);border-radius:var(--radius);background:var(--card);color:var(--t1);font-family:var(--sans);font-size:13.5px;font-weight:500;line-height:1.3;white-space:nowrap;text-decoration:none;box-shadow:var(--shadow-sm);cursor:pointer;transition:background .12s ease,border-color .12s ease,color .12s ease}
.mbtn:hover:not(:disabled){border-color:#B9C2CD;background:var(--surface-2)}
.mbtn.primary{border-color:var(--ink);background:var(--ink);color:#FFF}
.mbtn.primary:hover:not(:disabled){border-color:var(--ink-3);background:var(--ink-3)}
.mbtn.danger{border-color:#E6C3C3;background:var(--card);color:var(--red)}
.mbtn.danger:hover:not(:disabled){border-color:var(--red);background:var(--red-soft)}
.mbtn:disabled{border-color:var(--line);background:#EEF1F4;color:#7A8594;box-shadow:none;cursor:not-allowed;opacity:1}
.mbtn .icon{flex:0 0 auto}
.mbtn.sm{min-height:30px;padding:4px 10px;font-size:13px;box-shadow:none}

.main input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]),.main select,.main textarea{min-height:36px;border-color:var(--line-2);border-radius:var(--radius);background-color:#FFF;color:var(--t1);font-family:var(--sans);font-size:13.5px}
.main textarea{line-height:1.55}
.main input::placeholder,.main textarea::placeholder{color:#7A8594;opacity:1}
.main input:not([type=checkbox]):not([type=radio]):focus,.main select:focus,.main textarea:focus{border-color:var(--ribbon);box-shadow:var(--focus);outline:none}
.main input[type=checkbox],.main input[type=radio]{accent-color:var(--ribbon)}
.main table{font-variant-numeric:tabular-nums}

.pill{font-size:12px;font-weight:500;padding:2px 9px;border-radius:999px}
.p-mut{background:#EEF1F4;color:var(--t2)}

/* Card kickers: a quiet sentence-case label above panel headings. */
.settings-section-kicker{color:var(--t3)!important;font-size:12.5px!important;font-weight:500}

/* ---------- shared components ---------- */

/* Tones used by stat cards, icon tiles and badges */
.tone-neutral{--tone:#4A5566;--tone-soft:#EEF1F4}
.tone-blue{--tone:var(--blue);--tone-soft:var(--blue-soft)}
.tone-amber{--tone:var(--amber);--tone-soft:var(--amber-soft)}
.tone-red{--tone:var(--ribbon-deep);--tone-soft:var(--ribbon-soft)}
.tone-green{--tone:var(--ledger);--tone-soft:var(--ledger-soft)}
.tone-violet{--tone:#5B4B8A;--tone-soft:#EFECF7}

/* Key figures */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin-bottom:20px}
.stat-card{display:flex;min-width:0;flex-direction:column;gap:6px;padding:14px 16px;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--card);color:var(--t1);text-decoration:none;box-shadow:var(--shadow-sm)}
.stat-card.is-link{transition:border-color .12s ease,box-shadow .12s ease}
.stat-card.is-link:hover{border-color:var(--line-2);box-shadow:var(--shadow)}
.stat-card-head{display:flex;min-width:0;align-items:flex-start;gap:8px}
.stat-card-icon{display:grid;flex:0 0 auto;width:28px;height:28px;place-items:center;border-radius:var(--radius);background:var(--tone-soft);color:var(--tone)}
/* Labels and hints wrap (at most two lines) rather than truncate, so narrow tiles stay readable. */
.stat-card-label{display:-webkit-box;overflow:hidden;align-self:center;color:var(--t2);font-size:13px;font-weight:500;line-height:1.3;-webkit-box-orient:vertical;-webkit-line-clamp:2}
.stat-card-value{color:var(--t1);font-size:24px;font-weight:600;font-variant-numeric:tabular-nums;line-height:1.15;letter-spacing:-.01em}
/* Many narrow tiles in one row: reserve two label lines so the figures line up. */
.stat-grid-dense .stat-card-label{min-height:2.6em}
.stat-card-hint{display:-webkit-box;overflow:hidden;color:var(--t3);font-size:12.5px;line-height:1.35;-webkit-box-orient:vertical;-webkit-line-clamp:2}

/* Cards with a titled header */
.panel{min-width:0;overflow:hidden;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--card);box-shadow:var(--shadow-sm)}
.panel-header{display:flex;align-items:center;justify-content:space-between;gap:12px 16px;min-height:56px;padding:14px 18px;border-bottom:1px solid var(--line)}
.panel-header>div{min-width:0}
.panel-header h2,.panel-header h3{margin:0;color:var(--t1);font-family:var(--sans);font-size:15px;font-weight:600;line-height:1.35}
.panel-header p{margin:2px 0 0;color:var(--t3);font-size:12.5px;line-height:1.45}
.panel-link{flex:0 0 auto;color:var(--ribbon-deep);font-size:13px;font-weight:500;text-decoration:none}
.panel-link:hover{text-decoration:underline}
.panel-body{padding:16px 18px}

/* Clickable rows inside panels */
.row-list{display:flex;flex-direction:column}
.row-item{display:flex;align-items:center;gap:12px;min-height:60px;padding:10px 18px;border-bottom:1px solid var(--line);color:var(--t1);text-decoration:none}
.row-item:last-child{border-bottom:0}
a.row-item:hover{background:var(--surface-2)}
.row-item-copy{display:flex;min-width:0;flex:1;flex-direction:column;gap:1px}
.row-item-copy strong{overflow:hidden;font-size:13.5px;font-weight:500;text-overflow:ellipsis;white-space:nowrap}
.row-item-copy small{overflow:hidden;color:var(--t3);font-size:12.5px;text-overflow:ellipsis;white-space:nowrap}
.row-item-meta{color:var(--t3);font-family:var(--mono);font-size:12px}
.row-item>.icon:last-child{flex:0 0 auto;color:#98A2B0}
.row-item-mark{display:grid;flex:0 0 auto;width:36px;height:36px;place-items:center;border-radius:var(--radius);background:var(--tone-soft,#EEF1F4);color:var(--tone,var(--t2));font-size:12px;font-weight:600}

/* Status badges */
.badge{display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border-radius:999px;background:var(--tone-soft,#EEF1F4);color:var(--tone,var(--t2));font-size:12px;font-weight:500;line-height:1.6;white-space:nowrap}

/* Empty, loading and error states */
.empty-state{display:flex;min-height:220px;align-items:center;justify-content:center;flex-direction:column;gap:4px;padding:28px 24px;text-align:center}
.empty-state.compact{min-height:150px;padding:20px}
.empty-state-icon{display:grid;width:40px;height:40px;place-items:center;margin-bottom:6px;border-radius:50%;background:#EEF1F4;color:var(--t3)}
.empty-state strong{color:var(--t1);font-size:14px;font-weight:600}
.empty-state p{max-width:42ch;margin:0;color:var(--t3);font-size:13px;line-height:1.5}
.empty-state .mbtn{margin-top:10px}
.loading-state{display:flex;min-height:320px;align-items:center;justify-content:center;flex-direction:column;gap:10px;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--card);color:var(--t3);font-size:13px}
.loading-state::before{width:24px;height:24px;border:2px solid var(--line);border-top-color:var(--ribbon);border-radius:50%;animation:tji-spin .8s linear infinite;content:""}
@keyframes tji-spin{to{transform:rotate(360deg)}}
.error-state{display:flex;align-items:center;gap:14px;padding:14px 16px;border:1px solid #EBC7C7;border-radius:var(--radius-lg);background:var(--red-soft);color:var(--red)}
.error-state>div{flex:1;min-width:0}
.error-state strong{display:block;font-size:13.5px}
.error-state p{margin:2px 0 0;color:#7B4A4A;font-size:13px}

/* Inline notices */
.notice{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface-2);color:var(--t2);font-size:13px}
.notice>.icon{flex:0 0 auto;margin-top:1px}
.notice strong{color:var(--t1)}
.notice.warn{border-color:#EBD7AE;background:var(--amber-soft);color:#6B4A0E}
.notice.warn>.icon{color:var(--amber)}
.notice.bad{border-color:#EBC7C7;background:var(--red-soft);color:#7B3030}
.notice.ok{border-color:#C6E0D5;background:var(--ledger-soft);color:#24594A}

/* ---------- Blazor framework chrome ---------- */
#blazor-error-ui{display:none;position:fixed;right:0;bottom:0;left:0;z-index:1000;padding:12px 18px;border-top:1px solid #E6C3C3;background:var(--red-soft);color:var(--red);font-size:13.5px}
#blazor-error-ui.show{display:flex;align-items:center;gap:12px}
#blazor-error-ui .reload{color:var(--ribbon-deep);font-weight:500}
#blazor-error-ui .dismiss{margin-left:auto;cursor:pointer}

/* ---------- responsive shell ---------- */
@media(max-width:920px){
  .shell{grid-template-columns:minmax(0,1fr)}
  .rail{height:auto;max-height:calc(100dvh / var(--tji-ui-scale))}
  .nav-brand{padding:10px 14px}
  .nav-mobile-toggle{display:flex;width:40px;height:40px;flex:0 0 auto;align-items:center;justify-content:center;flex-direction:column;gap:4px;border:1px solid #34465C;border-radius:var(--radius);background:var(--ink-2);cursor:pointer}
  .nav-mobile-toggle span{width:16px;height:1.5px;border-radius:1px;background:#E8E6DF;transition:transform .15s ease,opacity .15s ease}
  .nav-mobile-context{display:flex;padding:6px 16px 8px;border-top:1px solid rgba(255,255,255,.07);color:#E0E4E8;font-size:13px;font-weight:500}
  .nav-scroll,.nav-footer{display:none}
  .rail.mobile-open{height:calc(100dvh / var(--tji-ui-scale))}
  .rail.mobile-open .nav-scroll,.rail.mobile-open .nav-footer{display:block}
  .rail.mobile-open .nav-mobile-context{display:none}
  .rail.mobile-open .nav-mobile-toggle span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
  .rail.mobile-open .nav-mobile-toggle span:nth-child(2){opacity:0}
  .rail.mobile-open .nav-mobile-toggle span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}
  .main{padding:22px 16px 56px}
}
@media(max-width:480px){
  .main input:not([type=checkbox]):not([type=radio]),.main select,.main textarea{font-size:16px}
  .page-header-actions{width:100%}
}

@media print{
  .rail,.skip-link{display:none!important}
  .shell{display:block}
  .main{max-width:none;padding:20px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .mbtn,.rail .navbtn{transition:none}
}