/* ============================================================
   Hoa Mặt Trời — Management Hub v2
   Bolder editorial direction. Fast static CSS, no framework.
   Tokens + refreshed component layer in one file.
   ============================================================ */

/* Brand fonts: local SemiBold + Google for body weights (fast <link> in head) */
@font-face {
  font-family: "Playfair Local";
  src: url("fonts/PlayfairDisplay-SemiBold.ttf") format("truetype");
  font-weight: 600; font-display: swap;
}
@font-face {
  font-family: "Roboto Cond Local";
  src: url("fonts/RobotoCondensed-SemiBold.ttf") format("truetype");
  font-weight: 600; font-display: swap;
}

:root {
  /* Brand palette */
  --sunflower:#FED138; --sunflower-deep:#F2B705; --sunflower-soft:#FFE9A3; --sunflower-glow:#FFF4CE;
  --navy:#2A2A72; --navy-700:#222058; --navy-300:#6f6fae;
  --teal:#0D9098; --teal-deep:#0a7378; --teal-soft:#e0f3f3;
  --cream:#FAF8D1; --cream-deep:#F1ECB4;

  /* Neutrals — warm */
  --ink:#1c2430; --muted:#697587; --faint:#98a1b0;
  --hairline:#e6e3d6; --hairline-2:#eeebdf;
  --app-bg:#f4f1e6; --paper:#fbf9f0; --surface:#ffffff; --surface-2:#faf8ef;

  /* 6-state workflow ramp */
  --st-wait-bg:#eceef1; --st-wait-fg:#3a4458; --st-wait-bd:#d3d8e0;
  --st-proc-bg:#d8e9ff; --st-proc-fg:#175cd3; --st-proc-bd:#b6dbff;
  --st-rev-bg:#fdeec3;  --st-rev-fg:#9a5a06;  --st-rev-bd:#f6da8e;
  --st-appr-bg:#d2f4dd; --st-appr-fg:#04713f; --st-appr-bd:#a7eec1;
  --st-pub-bg:#cdeee0;  --st-pub-fg:#066a46;  --st-pub-bd:#9fe0c4;
  --st-rej-bg:#fde3e0;  --st-rej-fg:#b42318;  --st-rej-bd:#f8b4ad;

  --info-bg:#d8e9ff; --info-fg:#175cd3; --info-bd:#b6dbff;
  --warn-bg:#fdeec3; --warn-fg:#9a5a06; --warn-bd:#f6da8e;
  --ok-bg:#d2f4dd;   --ok-fg:#04713f;   --ok-bd:#a7eec1;
  --danger-bg:#fde3e0; --danger-fg:#b42318; --danger-bd:#f8b4ad;

  /* Type families */
  --font-display:"Playfair Display","Playfair Local",Georgia,serif;
  --font-ui:"Roboto Condensed","Roboto Cond Local","Arial Narrow",system-ui,sans-serif;
  --font-mono:"SF Mono","Consolas","Roboto Mono",ui-monospace,monospace;

  /* Type scale */
  --t-hero:3.5rem; --t-display:2.75rem; --t-h1:2.125rem; --t-h2:1.5rem;
  --t-h3:1.1875rem; --t-lg:1.0625rem; --t-base:0.9375rem; --t-sm:0.8125rem; --t-xs:0.6875rem;
  --lh-tight:1.12; --lh-snug:1.3; --lh-base:1.5;

  /* Spacing */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s7:32px; --s8:40px; --s9:56px; --s10:72px;

  /* Radii */
  --r-xs:6px; --r-sm:8px; --r-md:10px; --r-lg:14px; --r-xl:18px; --r-pill:999px;

  /* Elevation — soft navy-cast */
  --sh-1:0 1px 2px rgba(20,24,60,.05);
  --sh-2:0 1px 2px rgba(20,24,60,.04), 0 6px 16px rgba(20,24,60,.06);
  --sh-3:0 10px 34px rgba(20,24,60,.11), 0 2px 8px rgba(20,24,60,.06);
  --sh-pop:0 22px 56px rgba(20,24,60,.20);
  --focus-ring:0 0 0 3px var(--sunflower-soft);
  --focus-ring-teal:0 0 0 3px rgba(13,144,152,.26);

  --sidebar-w:248px; --topbar-h:64px; --content-max:1200px;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; font-family:var(--font-ui); font-weight:400; font-size:var(--t-base);
  line-height:var(--lh-base); color:var(--ink); background:var(--app-bg);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{font-family:var(--font-display); font-weight:600; color:var(--navy); line-height:var(--lh-tight); margin:0; text-wrap:balance;}
h1{font-size:var(--t-h1);} h2{font-size:var(--t-h2);} h3{font-size:var(--t-h3);}
p{margin:0 0 .75em; text-wrap:pretty;}
b,strong{font-weight:600;}
a{color:var(--teal); text-decoration:none;}
a:hover{color:var(--teal-deep); text-decoration:underline; text-underline-offset:2px;}
img{display:block;}
button{font-family:inherit;}
.mono,code{font-family:var(--font-mono); font-size:.9em; color:var(--navy); background:var(--surface-2); border:1px solid var(--hairline); border-radius:var(--r-xs); padding:1px 6px;}
.eyebrow{font-family:var(--font-ui); font-weight:700; font-size:var(--t-xs); letter-spacing:.12em; text-transform:uppercase; color:var(--muted);}
:focus-visible{outline:none; box-shadow:var(--focus-ring); border-radius:var(--r-xs);}
::selection{background:var(--sunflower-soft); color:var(--ink);}

/* SVG icon sprite sizing */
.ico{display:inline-flex; width:18px; height:18px; flex:none; vertical-align:middle;}
.ico svg{width:100%; height:100%; display:block; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;}

/* ============================================================ SHELL */
.app{display:grid; grid-template-columns:var(--sidebar-w) 1fr; min-height:100vh;}
.scrim{display:none;}

.sidebar{
  position:sticky; top:0; align-self:start; height:100vh;
  background:linear-gradient(176deg,var(--navy) 0%,var(--navy-700) 100%);
  color:#cfd0ee; display:flex; flex-direction:column;
  padding:var(--s6) var(--s4) var(--s5); overflow-y:auto;
}
.sidebar::-webkit-scrollbar{width:0;}
.sidebar__brand{display:flex; align-items:center; gap:var(--s3); padding:0 var(--s2) var(--s6);}
.sidebar__brand img{width:42px; height:42px; flex:none;}
.sidebar__brand-text{display:flex; flex-direction:column; line-height:1;}
.sidebar__brand-name{font-family:var(--font-display); font-weight:600; font-size:1.15rem; color:var(--cream); letter-spacing:.01em;}
.sidebar__brand-sub{font-family:var(--font-ui); font-weight:600; font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--navy-300); margin-top:4px;}

.nav-group__label{font-size:10px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:#7676b6; padding:0 var(--s3) var(--s2); margin-top:var(--s2);}
.nav-item{
  display:flex; align-items:center; gap:var(--s3); padding:11px var(--s3);
  border-radius:var(--r-sm); color:#c5c6e8; font-weight:500; font-size:var(--t-base);
  cursor:pointer; border:none; background:none; width:100%; text-align:left;
  margin-bottom:3px; text-decoration:none; position:relative;
  transition:background .14s ease,color .14s ease;
}
.nav-item:hover{background:rgba(255,255,255,.07); color:#fff; text-decoration:none;}
.nav-item .ico{width:18px; height:18px; opacity:.78;}
.nav-item.is-active{background:rgba(13,144,152,.20); color:#fff; box-shadow:inset 3px 0 0 var(--teal);}
.nav-item.is-active .ico{color:var(--sunflower); opacity:1;}
.nav-item__badge{
  margin-left:auto; background:var(--sunflower); color:var(--navy); font-size:11px; font-weight:700;
  min-width:20px; height:20px; border-radius:var(--r-pill); display:inline-flex; align-items:center; justify-content:center; padding:0 6px;
}
.sidebar__foot{margin-top:auto; padding-top:var(--s4); border-top:1px solid rgba(255,255,255,.08);}

.main{display:flex; flex-direction:column; min-width:0;}

/* Topbar */
.topbar{
  position:sticky; top:0; z-index:30; height:var(--topbar-h);
  background:rgba(251,249,240,.85); backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--hairline); display:flex; align-items:center; gap:var(--s4); padding:0 var(--s7);
}
.topbar__title{display:flex; flex-direction:column; line-height:1.05; min-width:0;}
.topbar__area{font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--teal); font-weight:700;}
.topbar__page{font-family:var(--font-display); font-weight:600; font-size:1.3rem; color:var(--navy); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.topbar__spacer{flex:1;}
.topbar__search{display:flex; align-items:center; gap:var(--s2); background:var(--surface); border:1px solid var(--hairline); border-radius:var(--r-pill); padding:8px 16px; width:280px; max-width:30vw; color:var(--muted); transition:border-color .14s,box-shadow .14s;}
.topbar__search:focus-within{border-color:var(--teal); box-shadow:var(--focus-ring-teal);}
.topbar__search input{border:none; background:none; outline:none; font:inherit; color:var(--ink); width:100%;}
.topbar__user{display:flex; align-items:center; gap:var(--s3);}
.avatar{width:36px; height:36px; border-radius:var(--r-pill); background:var(--navy); color:var(--cream); display:inline-flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:600; font-size:15px; flex:none;}
.hamburger{display:none;}

/* Content frame */
.content{padding:var(--s8) var(--s8) var(--s10); max-width:var(--content-max); width:100%; margin:0 auto;}
.area{display:none;}
.area.is-active{display:block;}
@keyframes fadeup{from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:none;}}

/* Breadcrumb */
.breadcrumb{display:flex; align-items:center; gap:var(--s2); font-size:var(--t-sm); color:var(--muted); margin-bottom:var(--s3); flex-wrap:wrap;}
.breadcrumb a{color:var(--muted); font-weight:500; cursor:pointer;}
.breadcrumb a:hover{color:var(--teal);}
.breadcrumb__sep{color:var(--faint);}
.breadcrumb__current{color:var(--ink); font-weight:600;}

/* Page header */
.page-head{display:flex; align-items:flex-end; justify-content:space-between; gap:var(--s5); margin-bottom:var(--s7); flex-wrap:wrap;}
.page-head h1{font-size:var(--t-h1);}
.page-head__sub{color:var(--muted); font-size:var(--t-lg); margin-top:8px; max-width:62ch;}
.section-head{display:flex; align-items:baseline; justify-content:space-between; gap:var(--s4); margin:var(--s8) 0 var(--s5);}
.section-head:first-child{margin-top:0;}
.section-head h2{font-size:var(--t-h2);}
.section-head__note{color:var(--muted); font-size:var(--t-sm);}

/* ============================================================ HERO (editorial) */
.hero{
  position:relative; overflow:hidden; border-radius:var(--r-xl);
  background:linear-gradient(180deg,var(--paper),var(--surface));
  border:1px solid var(--hairline); box-shadow:var(--sh-1);
  padding:var(--s8) var(--s8) var(--s7); margin-bottom:var(--s6);
}
.hero::after{content:""; position:absolute; right:-80px; top:-120px; width:420px; height:420px; border-radius:50%; background:radial-gradient(circle at 40% 40%,var(--sunflower-glow),transparent 68%); opacity:.9; pointer-events:none;}
.hero__mark{position:absolute; right:var(--s7); bottom:-30px; width:200px; opacity:.13; pointer-events:none;}
.hero__eyebrow{margin-bottom:var(--s3);}
.hero h1{font-size:var(--t-hero); line-height:1.04; letter-spacing:-.01em; max-width:18ch;}
.hero__sub{color:var(--muted); font-size:var(--t-lg); margin-top:var(--s4); max-width:54ch; position:relative;}
.hero__row{display:flex; align-items:center; gap:var(--s4); margin-top:var(--s6); flex-wrap:wrap; position:relative;}

/* ============================================================ CARDS */
.card{background:var(--surface); border:1px solid var(--hairline); border-radius:var(--r-lg); box-shadow:var(--sh-1);}
.card--cream{background:var(--cream); border-color:var(--cream-deep);}
.card--paper{background:var(--paper);}
.card__head{display:flex; align-items:center; justify-content:space-between; gap:var(--s4); padding:var(--s5) var(--s6); border-bottom:1px solid var(--hairline-2);}
.card__head h3{font-size:var(--t-h3);}
.card__title-meta{color:var(--muted); font-size:var(--t-sm); margin-top:2px;}
.card__body{padding:var(--s6);}
.card__foot{padding:var(--s4) var(--s6); border-top:1px solid var(--hairline-2); display:flex; align-items:center; gap:var(--s3);}

/* ============================================================ KPI tiles */
.kpi-row{display:grid; grid-template-columns:repeat(auto-fit,minmax(232px,1fr)); gap:var(--s5);}
.kpi{
  position:relative; background:var(--surface); border:1px solid var(--hairline);
  border-radius:var(--r-lg); box-shadow:var(--sh-1); padding:var(--s6);
  text-align:left; cursor:pointer; display:flex; flex-direction:column; width:100%;
  text-decoration:none; color:inherit; overflow:hidden; min-height:148px;
  transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease;
}
.kpi::after{content:""; position:absolute; right:-30px; top:-30px; width:108px; height:108px; border-radius:50%; background:radial-gradient(circle at 32% 32%,var(--sunflower-soft),transparent 70%); opacity:.7; pointer-events:none; transition:opacity .15s;}
.kpi:hover{transform:translateY(-3px); box-shadow:var(--sh-2); border-color:var(--cream-deep);}
.kpi:hover::after{opacity:1;}
.kpi:hover .kpi__cta{opacity:1; transform:translateX(0);}
.kpi__label{font-size:var(--t-sm); color:var(--muted); font-weight:600; display:flex; align-items:center; gap:var(--s2); position:relative;}
.kpi__label .ico{width:16px; height:16px; color:var(--teal);}
.kpi__value{font-family:var(--font-display); font-weight:600; font-size:var(--t-display); color:var(--navy); line-height:1; margin:var(--s4) 0 0; display:flex; align-items:baseline; gap:6px; position:relative;}
.kpi__value small{font-size:1.0625rem; color:var(--muted); font-family:var(--font-ui); font-weight:600;}
.kpi__delta{font-size:var(--t-sm); font-weight:600; color:var(--muted); margin-top:8px; display:inline-flex; align-items:center; gap:5px; position:relative;}
.kpi__delta.up{color:var(--ok-fg);} .kpi__delta.down{color:var(--danger-fg);}
.kpi__delta .ico{width:14px; height:14px;}
.kpi__cta{margin-top:auto; padding-top:var(--s4); color:var(--teal); font-weight:600; font-size:var(--t-sm); opacity:.55; transform:translateX(-3px); transition:.15s ease; display:flex; align-items:center; gap:5px; position:relative;}

/* KPI with mini-preview list */
.kpi--preview{cursor:default; min-height:auto;}
.kpi--preview:hover{transform:none; box-shadow:var(--sh-1); border-color:var(--hairline);}
.kpi__top{display:flex; align-items:flex-start; justify-content:space-between; gap:var(--s3);}
.kpi__num{font-family:var(--font-display); font-weight:600; font-size:2.25rem; color:var(--navy); line-height:1; display:flex; align-items:baseline; gap:5px;}
.kpi__num small{font-size:1rem; color:var(--muted); font-family:var(--font-ui); font-weight:600;}
.kpi__preview{margin-top:var(--s4); padding-top:var(--s4); border-top:1px solid var(--hairline-2); display:flex; flex-direction:column; gap:8px;}
.kpi__preview-item{display:flex; align-items:center; gap:var(--s2); font-size:var(--t-sm); color:var(--ink);}
.kpi__preview-item .dot{width:6px; height:6px; border-radius:50%; background:var(--sunflower-deep); flex:none;}
.kpi__preview-item span{white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.kpi__preview-link{margin-top:6px; font-size:var(--t-sm); font-weight:600; color:var(--teal); display:inline-flex; align-items:center; gap:5px; cursor:pointer;}

/* ============================================================ BUTTONS */
.btn{font-family:var(--font-ui); font-weight:600; font-size:var(--t-base); display:inline-flex; align-items:center; justify-content:center; gap:var(--s2); padding:9px 16px; border-radius:var(--r-sm); border:1px solid transparent; cursor:pointer; transition:background .14s,border-color .14s,transform .06s,box-shadow .14s; text-decoration:none; line-height:1.1; white-space:nowrap;}
.btn:active{transform:translateY(1px);}
.btn .ico{width:16px; height:16px;}
.btn--primary{background:var(--sunflower); color:var(--navy); box-shadow:var(--sh-1);}
.btn--primary:hover{background:var(--sunflower-deep); color:var(--navy); text-decoration:none;}
.btn--primary:focus-visible{box-shadow:var(--focus-ring);}
.btn--secondary{background:var(--surface); color:var(--navy); border-color:var(--hairline);}
.btn--secondary:hover{background:var(--surface-2); border-color:#d8d3c2; text-decoration:none;}
.btn--ghost{background:transparent; color:var(--navy);}
.btn--ghost:hover{background:rgba(42,42,114,.06); text-decoration:none;}
.btn--danger{background:var(--surface); color:var(--danger-fg); border-color:var(--danger-bd);}
.btn--danger:hover{background:var(--danger-bg); text-decoration:none;}
.btn--teal{background:var(--teal); color:#fff;}
.btn--teal:hover{background:var(--teal-deep); color:#fff; text-decoration:none;}
.btn--sm{padding:6px 11px; font-size:var(--t-sm);}
.btn--lg{padding:13px 24px; font-size:var(--t-lg);}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.5; cursor:not-allowed; pointer-events:none;}
.btn-row{display:flex; gap:var(--s3); align-items:center; flex-wrap:wrap;}
.icon-btn{width:38px; height:38px; border-radius:var(--r-sm); border:1px solid var(--hairline); background:var(--surface); color:var(--muted); display:inline-flex; align-items:center; justify-content:center; cursor:pointer; transition:.14s;}
.icon-btn:hover{color:var(--navy); border-color:#d8d3c2; background:var(--surface-2);}
.icon-btn .ico{width:18px; height:18px;}

/* ============================================================ PILLS / CHIPS */
.pill{display:inline-flex; align-items:center; gap:6px; font-family:var(--font-ui); font-weight:600; font-size:var(--t-xs); letter-spacing:.02em; padding:4px 11px; border-radius:var(--r-pill); border:1px solid transparent; white-space:nowrap; line-height:1.4;}
.pill::before{content:""; width:6px; height:6px; border-radius:50%; background:currentColor; flex:none;}
.pill--wait{background:var(--st-wait-bg); color:var(--st-wait-fg); border-color:var(--st-wait-bd);}
.pill--proc{background:var(--st-proc-bg); color:var(--st-proc-fg); border-color:var(--st-proc-bd);}
.pill--rev{background:var(--st-rev-bg); color:var(--st-rev-fg); border-color:var(--st-rev-bd);}
.pill--appr{background:var(--st-appr-bg); color:var(--st-appr-fg); border-color:var(--st-appr-bd);}
.pill--pub{background:var(--st-pub-bg); color:var(--st-pub-fg); border-color:var(--st-pub-bd);}
.pill--rej{background:var(--st-rej-bg); color:var(--st-rej-fg); border-color:var(--st-rej-bd);}

.chips{display:flex; flex-wrap:wrap; gap:6px;}
.chip{display:inline-flex; align-items:center; gap:5px; font-size:var(--t-xs); font-weight:600; padding:4px 9px; border-radius:var(--r-pill); border:1px solid var(--hairline); background:var(--surface-2); color:var(--muted); white-space:nowrap;}
.chip .ico{width:12px; height:12px;}
.chip--ok{background:var(--ok-bg); color:var(--ok-fg); border-color:var(--ok-bd);}
.chip--wait{background:var(--st-wait-bg); color:var(--st-wait-fg); border-color:var(--st-wait-bd);}
.chip--fail{background:var(--danger-bg); color:var(--danger-fg); border-color:var(--danger-bd);}
.note-chip{display:inline-flex; align-items:flex-start; gap:6px; font-size:var(--t-sm); font-weight:500; padding:5px 10px; border-radius:var(--r-sm); border:1px solid var(--st-rev-bd); background:var(--st-rev-bg); color:var(--st-rev-fg); line-height:1.35;}
.note-chip .ico{width:13px; height:13px; margin-top:1px;}
.note-chip b{font-weight:600;}

/* ============================================================ TABLES (flow with page, real toolbar) */
.table-card{background:var(--surface); border:1px solid var(--hairline); border-radius:var(--r-lg); box-shadow:var(--sh-1); overflow:hidden;}
.table-toolbar{display:flex; align-items:center; gap:var(--s3); padding:var(--s4) var(--s5); border-bottom:1px solid var(--hairline-2); flex-wrap:wrap;}
.table-toolbar__search{display:flex; align-items:center; gap:8px; background:var(--surface-2); border:1px solid var(--hairline); border-radius:var(--r-pill); padding:7px 14px; color:var(--muted); min-width:200px; flex:1; max-width:320px;}
.table-toolbar__search input{border:none; background:none; outline:none; font:inherit; color:var(--ink); width:100%;}
.table-toolbar__count{color:var(--muted); font-size:var(--t-sm); font-weight:600; margin-left:auto;}
.filter-chip{display:inline-flex; align-items:center; gap:6px; font-size:var(--t-sm); font-weight:600; padding:7px 13px; border-radius:var(--r-pill); border:1px solid var(--hairline); background:var(--surface); color:var(--muted); cursor:pointer; transition:.14s;}
.filter-chip:hover{border-color:#d8d3c2; color:var(--navy);}
.filter-chip.is-active{background:var(--navy); color:#fff; border-color:var(--navy);}
.filter-chip .ico{width:13px; height:13px;}

.table-scroll{overflow-x:auto;}
table.data{width:100%; border-collapse:collapse; font-size:var(--t-base);}
table.data thead th{background:var(--surface-2); color:var(--muted); font-weight:600; font-size:var(--t-sm); text-align:left; letter-spacing:.02em; padding:13px var(--s5); border-bottom:1px solid var(--hairline); white-space:nowrap;}
table.data tbody td{padding:16px var(--s5); border-bottom:1px solid var(--hairline-2); vertical-align:middle; color:var(--ink);}
table.data tbody tr:last-child td{border-bottom:none;}
table.data tbody tr{transition:background .12s;}
table.data tbody tr:hover{background:var(--surface-2);}
table.data tbody tr.is-watch{box-shadow:inset 3px 0 0 var(--st-rev-bd);}
.td-strong{font-weight:600; color:var(--navy);}
.td-meta{color:var(--muted); font-size:var(--t-sm);}
.td-actions{text-align:right; white-space:nowrap;}
.td-actions .btn-row{justify-content:flex-end; flex-wrap:nowrap; gap:8px;}
.row-link{color:var(--navy); font-weight:600; cursor:pointer;}
.row-link:hover{color:var(--teal);}
.col-caption{max-width:280px;}
.col-caption .clamp{display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}

/* ============================================================ SUBNAV (vertical, finance) */
.subnav-layout{display:grid; grid-template-columns:216px 1fr; gap:var(--s6); align-items:start;}
.subnav{position:sticky; top:calc(var(--topbar-h) + var(--s5)); display:flex; flex-direction:column;}
.subnav__label{font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); font-weight:700; padding:0 var(--s3) var(--s2);}
.subnav__item{display:flex; align-items:center; gap:10px; padding:11px var(--s3); border-radius:var(--r-sm); color:var(--muted); font-weight:600; font-size:var(--t-base); border:1px solid transparent; background:none; cursor:pointer; text-align:left; width:100%; text-decoration:none; margin-bottom:3px; transition:.14s;}
.subnav__item .ico{width:17px; height:17px; opacity:.8;}
.subnav__item:hover{background:rgba(42,42,114,.05); color:var(--navy); text-decoration:none;}
.subnav__item.is-active{background:var(--surface); color:var(--navy); border-color:var(--hairline); box-shadow:inset 3px 0 0 var(--teal), var(--sh-1);}
.subnav__item.is-active .ico{color:var(--teal); opacity:1;}
.subnav__count{margin-left:auto; font-size:11px; font-weight:700; line-height:1; min-width:20px; height:20px; padding:0 6px; border-radius:var(--r-pill); background:var(--hairline-2); color:var(--muted); display:inline-flex; align-items:center; justify-content:center;}
.subnav__item.is-active .subnav__count{background:var(--sunflower); color:var(--navy);}
.subtab{display:none;}
.subtab.is-active{display:block;}

/* ============================================================ ACTION BAR + DIGNITY GATE */
.action-bar{position:sticky; bottom:var(--s5); z-index:20; background:rgba(251,249,240,.94); backdrop-filter:saturate(150%) blur(12px); border:1px solid var(--hairline); border-radius:var(--r-lg); box-shadow:var(--sh-3); padding:var(--s4) var(--s5); display:flex; align-items:center; gap:var(--s5); flex-wrap:wrap; margin-top:var(--s6);}
.action-bar__gate{flex:1; min-width:260px;}
.decide-context{display:flex; align-items:center; gap:10px; color:var(--muted); font-size:var(--t-sm); line-height:1.35;}
.decide-context .ico{color:var(--teal); flex:none;}
.action-bar__actions{display:flex; gap:var(--s3); margin-left:auto;}
.dignity{display:flex; align-items:flex-start; gap:var(--s3); background:var(--cream); border:1px solid var(--cream-deep); border-radius:var(--r-md); padding:var(--s3) var(--s4);}
.dignity input[type="checkbox"]{width:22px; height:22px; margin:1px 0 0; accent-color:var(--teal); flex:none; cursor:pointer;}
.dignity label{font-weight:600; color:var(--navy); cursor:pointer; line-height:1.3;}
.dignity small{display:block; color:var(--muted); font-weight:500; margin-top:2px;}
.gate-hint{display:flex; align-items:center; gap:6px; justify-content:flex-end; color:var(--muted); font-size:var(--t-sm); padding:10px 4px 0;}
.gate-hint .ico{width:13px; height:13px;}

/* ============================================================ FORMS */
.field{margin-bottom:var(--s4);}
.field>label{display:block; font-weight:600; font-size:var(--t-sm); color:var(--navy); margin-bottom:6px;}
.field__hint{color:var(--muted); font-size:var(--t-sm); margin-top:5px;}
.input,.textarea,.select{width:100%; font:inherit; font-size:var(--t-base); color:var(--ink); background:var(--surface); border:1px solid var(--hairline); border-radius:var(--r-sm); padding:10px 12px; transition:border-color .14s,box-shadow .14s;}
.input::placeholder,.textarea::placeholder{color:var(--faint);}
.input:focus,.textarea:focus,.select:focus{outline:none; border-color:var(--teal); box-shadow:var(--focus-ring-teal);}
.textarea{resize:vertical; min-height:88px; line-height:1.45;}
.select{appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7686' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 11px center; padding-right:34px;}
.inline-edit__btn{border:none; background:none; color:var(--teal); font:inherit; font-weight:600; font-size:var(--t-sm); cursor:pointer; display:inline-flex; align-items:center; gap:4px; padding:3px 6px; border-radius:var(--r-xs);}
.inline-edit__btn:hover{background:var(--teal-soft);}
.inline-edit__btn .ico{width:13px; height:13px;}

/* ============================================================ BANNERS + MOCK BADGE */
.banner{display:flex; align-items:flex-start; gap:var(--s3); border-radius:var(--r-md); padding:var(--s4) var(--s5); border:1px solid; font-size:var(--t-base); margin-bottom:var(--s5);}
.banner .ico{width:18px; height:18px; margin-top:1px;}
.banner__body{flex:1;}
.banner__body b{font-weight:600;}
.banner--info{background:var(--info-bg); color:var(--info-fg); border-color:var(--info-bd);}
.banner--warn{background:var(--warn-bg); color:var(--warn-fg); border-color:var(--warn-bd);}
.banner--ok{background:var(--ok-bg); color:var(--ok-fg); border-color:var(--ok-bd);}
.banner--cream{background:var(--cream); color:var(--ink); border-color:var(--cream-deep);}
.badge-mock{display:inline-flex; align-items:center; gap:4px; font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:3px 8px; border-radius:var(--r-pill); background:repeating-linear-gradient(45deg,var(--st-wait-bg),var(--st-wait-bg) 5px,#e2e4e9 5px,#e2e4e9 10px); color:var(--st-wait-fg); border:1px dashed #c2c8d2; white-space:nowrap;}

/* ============================================================ MODAL / DRAWER */
.overlay{position:fixed; inset:0; z-index:100; background:rgba(28,30,52,.46); backdrop-filter:blur(3px); display:flex; align-items:center; justify-content:center; padding:var(--s5); opacity:0; pointer-events:none; transition:opacity .18s ease;}
.overlay.is-open{opacity:1; pointer-events:auto;}
.modal{background:var(--surface); border-radius:var(--r-xl); box-shadow:var(--sh-pop); width:100%; max-width:540px; max-height:88vh; overflow:auto; transform:translateY(10px) scale(.99); transition:transform .18s ease;}
.overlay.is-open .modal{transform:none;}
.modal__head{display:flex; align-items:flex-start; justify-content:space-between; gap:var(--s4); padding:var(--s5) var(--s5) var(--s4); border-bottom:1px solid var(--hairline-2);}
.modal__head h3{font-size:var(--t-h3);}
.modal__body{padding:var(--s5);}
.modal__foot{padding:var(--s4) var(--s5); border-top:1px solid var(--hairline-2); display:flex; gap:var(--s3); justify-content:flex-end;}
.drawer{position:fixed; top:0; right:0; bottom:0; width:460px; max-width:92vw; z-index:101; background:var(--surface); box-shadow:var(--sh-pop); transform:translateX(100%); transition:transform .24s ease; display:flex; flex-direction:column;}
.drawer.is-open{transform:none;}
.drawer-overlay{position:fixed; inset:0; z-index:100; background:rgba(28,30,52,.42); opacity:0; pointer-events:none; transition:opacity .18s;}
.drawer-overlay.is-open{opacity:1; pointer-events:auto;}
.drawer__head{display:flex; align-items:center; justify-content:space-between; gap:var(--s4); padding:var(--s5); border-bottom:1px solid var(--hairline-2);}
.drawer__head h3{font-size:var(--t-h2);}
.drawer__body{padding:var(--s5); overflow:auto; flex:1;}
.drawer__foot{padding:var(--s4) var(--s5); border-top:1px solid var(--hairline-2); display:flex; gap:var(--s3);}

/* ============================================================ EMPTY / TOAST */
.empty{text-align:center; padding:var(--s9) var(--s5); color:var(--muted);}
.empty__art{width:72px; height:72px; margin:0 auto var(--s4); opacity:.9;}
.empty h3{color:var(--navy); margin-bottom:6px;}
.empty p{max-width:40ch; margin:0 auto var(--s4);}
.toast-stack{position:fixed; bottom:var(--s6); right:var(--s6); z-index:200; display:flex; flex-direction:column; gap:var(--s3);}
.toast{display:flex; align-items:center; gap:var(--s3); background:var(--navy); color:#fff; border-radius:var(--r-md); padding:var(--s3) var(--s4); box-shadow:var(--sh-pop); font-weight:500; min-width:270px; max-width:380px; animation:toastin .22s ease both;}
@keyframes toastin{from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:none;}}
.toast .ico{width:18px; height:18px;}
.toast--ok{background:var(--ok-fg);} .toast--warn{background:var(--warn-fg);}
.toast__close{margin-left:auto; color:inherit; opacity:.8; background:none; border:none; cursor:pointer;}

/* ============================================================ UTILITY */
.stack{display:flex; flex-direction:column;}
.row{display:flex; align-items:center;}
.gap1{gap:var(--s1);} .gap2{gap:var(--s2);} .gap3{gap:var(--s3);} .gap4{gap:var(--s4);} .gap5{gap:var(--s5);}
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:var(--s5);}
.muted{color:var(--muted);} .faint{color:var(--faint);} .serif{font-family:var(--font-display);}
.right{margin-left:auto;}
.divider{height:1px; background:var(--hairline-2); border:none; margin:var(--s5) 0;}

/* Segmented toggle (layout A/B option switcher) */
.segmented{display:inline-flex; background:var(--surface-2); border:1px solid var(--hairline); border-radius:var(--r-pill); padding:3px; gap:2px;}
.segmented button{border:none; background:none; font:inherit; font-weight:600; font-size:var(--t-sm); color:var(--muted); padding:7px 16px; border-radius:var(--r-pill); cursor:pointer; transition:.14s; display:inline-flex; align-items:center; gap:6px;}
.segmented button .ico{width:14px; height:14px;}
.segmented button.is-active{background:var(--navy); color:#fff;}
.opt{display:none;} .opt.is-active{display:block;}

/* ============================================================ RESPONSIVE */
@media (max-width:980px){
  .app{grid-template-columns:1fr;}
  .sidebar{position:fixed; left:0; top:0; bottom:0; width:272px; z-index:110; transform:translateX(-100%); transition:transform .24s ease; box-shadow:var(--sh-pop);}
  .sidebar.is-open{transform:none;}
  .scrim{position:fixed; inset:0; background:rgba(28,30,52,.42); z-index:105; opacity:0; pointer-events:none; transition:opacity .18s;}
  .scrim.is-open{display:block; opacity:1; pointer-events:auto;}
  .hamburger{display:inline-flex;}
  .content{padding:var(--s5);}
  .topbar{padding:0 var(--s5);}
  .topbar__search{display:none;}
  .subnav-layout{grid-template-columns:1fr; gap:var(--s4);}
  .subnav{position:static; flex-direction:row; overflow-x:auto; gap:6px; padding-bottom:4px;}
  .subnav__label{display:none;}
  .subnav__item{width:auto; white-space:nowrap; margin-bottom:0;}
  .hero{padding:var(--s6);}
  .hero h1{font-size:2.5rem;}
  .hero__mark{display:none;}
}
@media (max-width:560px){
  .page-head{flex-direction:column; align-items:flex-start;}
  .bundle-grid{grid-template-columns:1fr !important;}
}

/* ============================================================ OVERVIEW: action list */
.action-list{overflow:hidden;}
.action-row{display:flex; align-items:center; gap:var(--s4); padding:18px var(--s6); border-bottom:1px solid var(--hairline-2); text-decoration:none; transition:background .12s;}
.action-row:last-child{border-bottom:none;}
.action-row:hover{background:var(--surface-2); text-decoration:none;}
.action-row:hover .action-row__go{opacity:1; transform:translateX(0); color:var(--teal-deep);}
.action-row__ic{width:44px; height:44px; border-radius:var(--r-md); display:inline-flex; align-items:center; justify-content:center; flex:none;}
.action-row__ic .ico{width:20px; height:20px;}
.action-row__ic--rev{background:var(--st-rev-bg); color:var(--st-rev-fg);}
.action-row__ic--thanks{background:var(--teal-soft); color:var(--teal-deep);}
.action-row__ic--watch{background:var(--st-rej-bg); color:var(--st-rej-fg);}
.action-row__body{flex:1; display:flex; flex-direction:column; min-width:0; gap:3px;}
.action-row__head{display:flex; align-items:center; gap:var(--s3); flex-wrap:wrap;}
.action-row__text{font-weight:600; color:var(--navy); font-size:var(--t-lg);}
.action-row__meta{color:var(--muted); font-size:var(--t-sm);}
.action-row__go{color:var(--teal); font-weight:600; font-size:var(--t-sm); display:inline-flex; align-items:center; gap:5px; opacity:.5; transform:translateX(-4px); transition:.14s; white-space:nowrap;}

.tag{font-size:10px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; padding:3px 8px; border-radius:var(--r-pill); white-space:nowrap;}
.tag--rev{background:var(--st-rev-bg); color:var(--st-rev-fg);}
.tag--thanks{background:var(--teal-soft); color:var(--teal-deep);}
.tag--watch{background:var(--st-rej-bg); color:var(--st-rej-fg);}

/* ============================================================ OVERVIEW: triage (option B) */
.triage{display:grid; grid-template-columns:1fr 340px; gap:var(--s6); align-items:start;}
.feature-card{display:block; text-decoration:none; position:relative; overflow:hidden; background:linear-gradient(150deg,#2c2c78,var(--navy-700)); color:#fff; border-radius:var(--r-lg); padding:var(--s6); box-shadow:var(--sh-2); transition:transform .15s,box-shadow .15s;}
.feature-card::after{content:""; position:absolute; right:-50px; bottom:-70px; width:240px; height:240px; border-radius:50%; background:radial-gradient(circle at 40% 40%,rgba(254,209,56,.28),transparent 65%); pointer-events:none;}
.feature-card:hover{transform:translateY(-3px); box-shadow:var(--sh-3); text-decoration:none;}
.feature-card__top{display:flex; align-items:center; gap:var(--s3); margin-bottom:var(--s4); position:relative;}
.feature-card h3{color:#fff; font-size:1.5rem; line-height:1.2; position:relative; max-width:24ch;}
.feature-card__meta{color:#c7c8ec; font-size:var(--t-sm); margin-top:var(--s3); display:flex; align-items:center; gap:6px; position:relative;}
.feature-card__meta .ico{width:14px; height:14px;}
.feature-card__cta{display:inline-flex; align-items:center; gap:8px; margin-top:var(--s5); background:var(--sunflower); color:var(--navy); font-weight:700; font-size:var(--t-sm); padding:9px 16px; border-radius:var(--r-sm); position:relative;}

.triage__rail{display:flex; flex-direction:column; gap:var(--s5);}
.stat-stack{overflow:hidden;}
.stat-row{display:flex; align-items:center; gap:var(--s3); padding:14px var(--s5); border-bottom:1px solid var(--hairline-2); text-decoration:none; color:var(--ink); transition:background .12s;}
.stat-row:last-child{border-bottom:none;}
.stat-row:hover{background:var(--surface-2); text-decoration:none;}
.stat-row__ic{width:34px; height:34px; border-radius:var(--r-sm); background:var(--teal-soft); color:var(--teal-deep); display:inline-flex; align-items:center; justify-content:center; flex:none;}
.stat-row__body{flex:1; display:flex; flex-direction:column; min-width:0;}
.stat-row__label{font-weight:600; color:var(--navy); font-size:var(--t-sm);}
.stat-row__meta{color:var(--muted); font-size:var(--t-xs);}
.stat-row__val{font-size:1.5rem; color:var(--navy); line-height:1;}
.stat-row__val small{font-size:.8rem; color:var(--muted); font-family:var(--font-ui); font-weight:600;}
.stat-row .ico:last-child{color:var(--faint);}
.quote-card{background:var(--cream); border:1px solid var(--cream-deep); border-radius:var(--r-lg); padding:var(--s5);}
.quote-card__values{font-size:var(--t-xs); font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--sunflower-deep); margin-bottom:var(--s3);}
.quote-card p{font-family:var(--font-display); font-size:1.25rem; color:var(--navy); line-height:1.3; margin:0;}

@media (max-width:880px){ .triage{grid-template-columns:1fr;} }

/* ============================================================ APPROVAL: bundle detail */
.bundle-grid{display:grid; grid-template-columns:1fr 340px; gap:var(--s6); align-items:start;}
.kv{display:flex; justify-content:space-between; gap:var(--s4); font-size:var(--t-sm); color:var(--muted);}
.kv>span{white-space:nowrap; flex:none;}
.kv b{color:var(--ink); font-weight:600; text-align:right;}
.finding{display:flex; align-items:center; gap:8px; font-size:var(--t-sm); font-weight:600;}
.finding--warn{color:var(--st-rev-fg);}
.finding--ok{color:var(--ok-fg);}
.fb-card{background:#fff; border:1px solid var(--hairline); border-radius:var(--r-lg); box-shadow:var(--sh-1); overflow:hidden;}
.fb-head{display:flex; align-items:center; gap:10px; padding:14px var(--s4);}
.fb-avatar{width:42px; height:42px; border-radius:50%; background:var(--navy); padding:5px; object-fit:contain; flex:none;}
.fb-name{font-weight:700; color:var(--ink); font-size:15px;}
.fb-meta{color:var(--muted); font-size:12px; display:flex; align-items:center; gap:4px;}
.fb-meta .ico{width:11px; height:11px;}
.fb-caption{padding:0 var(--s4) 14px;}
.fb-caption-row{display:flex; align-items:flex-start; gap:10px;}
.fb-caption-row p{font-size:15px; color:var(--ink); line-height:1.55; margin:0; flex:1;}
.fb-edit{padding:0 var(--s4) 14px;}
.fb-gallery{display:grid; grid-template-columns:1fr 1fr; gap:3px; background:var(--hairline);}
.fb-photo{position:relative; aspect-ratio:1/1; background:var(--surface-2); display:flex; align-items:center; justify-content:center; overflow:hidden; color:var(--faint);}
.fb-photo .ico{width:26px; height:26px;}
.fb-photo--main{grid-column:1/-1; aspect-ratio:16/10;}
.fb-photo img{width:100%; height:100%; object-fit:cover;}
.fb-alt{position:absolute; left:8px; bottom:8px; display:inline-flex; align-items:center; gap:4px; font-size:10px; font-weight:700; background:var(--ok-bg); color:var(--ok-fg); padding:3px 8px; border-radius:var(--r-pill);}
.fb-alt .ico{width:11px; height:11px;}
.fb-alt--miss{background:var(--st-rev-bg); color:var(--st-rev-fg);}
.fb-more{position:absolute; inset:0; background:rgba(28,36,48,.55); color:#fff; display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-size:24px; font-weight:600;}
.fb-foot{display:flex; justify-content:space-around; padding:10px; border-top:1px solid var(--hairline-2); color:var(--muted); font-weight:600; font-size:13px;}
.fb-foot span{display:inline-flex; align-items:center; gap:6px;}
.fb-foot .ico{width:14px; height:14px;}

/* ============================================================ STUDENTS / FINANCE extras */
.kv2{display:flex; justify-content:space-between; font-size:var(--t-sm); color:var(--muted); padding:2px 0;}
.kv2 b{color:var(--ink);}
.tl{display:flex; gap:10px; align-items:flex-start; padding-left:4px;}
.tl-dot{width:10px; height:10px; border-radius:50%; background:var(--sunflower-deep); margin-top:5px; flex:none; box-shadow:0 0 0 3px var(--sunflower-soft);}
.tl b{color:var(--navy);}
.thanks-row{display:flex; align-items:center; justify-content:space-between; gap:var(--s3); padding:12px 0; border-bottom:1px solid var(--hairline-2);}
.thanks-row:last-child{border-bottom:none;}
