/* ═══════════════════════════════════════════════════
   cwdpro — Admin CSS (DRS-style structure, cwdpro brand)
   Font: Roboto from Google Fonts
   Icons: Font Awesome 6.5 from cdnjs
   Brand: orange #D56935 primary, navy #35405B + teal #21BFE1 accents
═══════════════════════════════════════════════════ */

/* ── DESIGN TOKENS ─────────────────────────────── */
:root {
  /* Primary scale — cwdpro brand is navy #35405B + teal #21BFE1.
     Deep tones (p900..p600) = navy family for text/buttons.
     Light tones (p400..p50) = teal-tinted for hovers/active backgrounds. */
  --p900:#35405B; --p800:#35405B; --p700:#35405B; --p600:#425072;
  --p500:#425072; --p400:#21BFE1; --p300:#4DCEE8; --p200:#BCE7F4;
  --p100:#E6F5FB; --p50:#E6F5FB;

  /* Direct-access brand tokens */
  --navy:#35405B; --navy-2:#425072; --teal:#21BFE1; --teal-2:#4DCEE8;
  --mint:#A8916E; --yellow:#D56935;

  /* Slate / neutral */
  --s900:#0d0e1f; --s800:#1a1c36; --s700:#2e3050; --s600:#484a6a;
  --s500:#6a6c8a; --s400:#9294b0; --s300:#bbbdd0; --s200:#d8daea;
  --s100:#ecedf4; --s50:#f6f7fb; --bg:#f4f5f9; --white:#fff;

  /* Status */
  --green:#16a34a; --gl:#f0fdf4; --gr:#86efac;
  --red:#dc2626;   --rl:#fff1f2; --rr:#fca5a5;
  --amber:#d97706; --al:#fffbeb; --ar:#fcd34d;
  --blue:#2563eb;  --bl:#eff6ff; --br:#93c5fd;
  --tealc:#0d9488; --tlc:#f0fdfa; --tr2:#A8916E;

  --sidebar-w: 260px;
  --sidebar-mini: 64px;
  --topbar-h: 60px;

  --r4:4px; --r6:6px; --r8:8px; --r12:12px; --r16:16px;
  --sh1:0 1px 3px rgba(53,64,91,.06);
  --sh2:0 4px 16px rgba(53,64,91,.09);
  --sh3:0 8px 32px rgba(53,64,91,.12);
  --ease:.2s cubic-bezier(.4,0,.2,1);
}

/* ── RESET ──────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
.cwd-admin html{font-size:14px;scroll-behavior:smooth}
.cwd-admin section[id]{scroll-margin-top:80px}
body.cwd-admin{font-family:'Roboto',sans-serif;background:var(--bg);color:var(--s800);display:flex;min-height:100vh;-webkit-font-smoothing:antialiased;overflow-x:hidden;letter-spacing:0}
body.cwd-admin *{letter-spacing:0 !important}
.cwd-admin a{text-decoration:none;color:inherit}
.cwd-admin button,.cwd-admin input,.cwd-admin select,.cwd-admin textarea{font-family:'Roboto',sans-serif}
.cwd-admin img{max-width:100%;display:block}
.cwd-admin ::-webkit-scrollbar{width:4px;height:4px}
.cwd-admin ::-webkit-scrollbar-track{background:transparent}
.cwd-admin ::-webkit-scrollbar-thumb{background:var(--s200);border-radius:4px}

/* ── SIDEBAR ────────────────────────────────────── */
.sidebar{
  width:var(--sidebar-w);min-width:var(--sidebar-w);
  background:var(--white);border-right:1px solid var(--s100);
  position:sticky;top:0;height:100vh;flex-shrink:0;
  display:flex;flex-direction:column;
  box-shadow:2px 0 8px rgba(53,64,91,.04);
  z-index:200;transition:width var(--ease),min-width var(--ease);
  overflow:hidden;
}
.sidebar.mini{width:var(--sidebar-mini);min-width:var(--sidebar-mini)}
.sidebar.mini .sb-label,.sidebar.mini .sb-group,
.sidebar.mini .sb-user-info,.sidebar.mini .sb-version,
.sidebar.mini .nav-acc-arrow{display:none!important}
.sidebar.mini .nav-item{justify-content:center;padding:10px;gap:0}
.sidebar.mini .nav-item i{width:auto}
.sidebar.mini .sb-logo{justify-content:center;padding:0}
.sidebar.mini .sb-user{justify-content:center}
.sidebar.mini .acc-body{display:none!important}

.sb-logo{height:var(--topbar-h);display:flex;align-items:center;gap:10px;
  padding:0 18px;border-bottom:1px solid var(--s100);flex-shrink:0}
.logo-mark{width:32px;height:32px;background:linear-gradient(135deg,var(--navy),var(--teal));
  border-radius:var(--r8);display:grid;place-items:center;flex-shrink:0;
  box-shadow:0 4px 12px rgba(33,191,225,.35)}
.logo-mark svg{width:15px;height:15px;fill:#fff}
.logo-text{font-size:16px;font-weight:700;color:var(--navy);white-space:nowrap}
.logo-text span{color:var(--p600)}

.sb-body{flex:1;overflow-y:auto;overflow-x:hidden;padding:10px 10px 8px;scrollbar-width:none}
.sb-body::-webkit-scrollbar{display:none}
.sb-group{font-size:9.5px;font-weight:700;text-transform:uppercase;
  color:var(--s400);padding:14px 10px 5px;white-space:nowrap}

/* Accordion sections */
.nav-acc{}
.nav-acc-header{display:flex;align-items:center;gap:9px;padding:9px 12px;
  border-radius:var(--r8);font-size:13px;font-weight:600;color:var(--s600);
  cursor:pointer;transition:var(--ease);user-select:none}
.nav-acc-header:hover{background:var(--p50);color:var(--p700)}
.nav-acc-header i.acc-ico{width:16px;font-size:13px;text-align:center;flex-shrink:0}
.nav-acc-header .acc-label{flex:1}
.nav-acc-arrow{font-size:10px;color:var(--s400);transition:transform .2s}
.nav-acc.open .nav-acc-arrow{transform:rotate(180deg)}
.acc-body{padding-left:10px;overflow:hidden;display:none}
.nav-acc.open .acc-body{display:block}

.nav-item{display:flex;align-items:center;gap:9px;padding:8px 12px;
  margin:1px 0;border-radius:var(--r8);font-size:13px;font-weight:400;
  color:var(--s500);cursor:pointer;transition:var(--ease);
  user-select:none;position:relative;overflow:hidden;white-space:nowrap}
.nav-item i{width:16px;font-size:15px;text-align:center;flex-shrink:0;line-height:1}
.nav-item:hover{background:var(--p50);color:var(--p700)}
.nav-item.active{background:var(--p100);color:var(--p700);font-weight:600;padding-left:15px}
.nav-item.active::before{content:'';position:absolute;left:0;top:50%;
  transform:translateY(-50%);width:3px;height:20px;
  background:var(--p600);border-radius:0 3px 3px 0}
.sb-label{flex:1;overflow:hidden;text-overflow:ellipsis}

.sb-footer{padding:10px;border-top:1px solid var(--s100);flex-shrink:0;position:relative}
.sb-user{display:flex;align-items:center;gap:9px;padding:9px 10px;
  border-radius:var(--r8);cursor:pointer;transition:var(--ease)}
.sb-user:hover{background:var(--p50)}
.sb-avatar{width:32px;height:32px;background:linear-gradient(135deg,var(--navy),var(--teal));
  border-radius:50%;display:grid;place-items:center;
  font-size:13px;font-weight:700;color:#fff;flex-shrink:0}
.sb-user-info{flex:1;overflow:hidden;min-width:0}
.sb-uname{font-size:12.5px;font-weight:600;color:var(--s700);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sb-urole{font-size:10.5px;color:var(--s400)}
.sb-user>i.sb-user-arrow{color:var(--s300);font-size:11px;margin-left:auto;flex-shrink:0}
.sb-version{padding:4px 20px 8px;font-size:10px;color:var(--s400)}

/* ── MAIN ───────────────────────────────────────── */
.main{flex:1;display:flex;flex-direction:column;min-height:100vh;min-width:0;overflow:hidden}

/* ── TOPBAR ─────────────────────────────────────── */
.topbar{height:var(--topbar-h);background:var(--white);border-bottom:1px solid var(--s100);
  display:flex;align-items:center;padding:0 22px;gap:12px;
  position:sticky;top:0;z-index:150;box-shadow:var(--sh1);flex-shrink:0}
.tb-toggle{width:32px;height:32px;border:1.5px solid var(--s100);background:var(--white);
  border-radius:var(--r8);display:grid;place-items:center;cursor:pointer;
  color:var(--s400);font-size:14px;transition:var(--ease);flex-shrink:0;text-decoration:none}
.tb-toggle:hover{border-color:var(--p300);color:var(--p600);background:var(--p50)}
.tb-title-wrap{flex:1}
.tb-title{font-size:14px;font-weight:700;color:var(--navy);}
.tb-sub{font-size:11px;color:var(--s400);margin-top:1px}
.tb-actions{display:flex;gap:6px;align-items:center}
.ico-btn{width:32px;height:32px;border:1.5px solid var(--s100);background:var(--white);
  border-radius:var(--r8);color:var(--s400);display:grid;place-items:center;
  font-size:13px;cursor:pointer;transition:var(--ease);position:relative;text-decoration:none}
.ico-btn:hover{border-color:var(--p300);color:var(--p600);background:var(--p50)}
.notif-dot{position:absolute;top:6px;right:6px;width:7px;height:7px;
  background:var(--red);border-radius:50%;border:2px solid var(--white)}

/* ── PAGE CONTENT ───────────────────────────────── */
.page-content{padding:22px 24px;flex:1}

.page-hdr{display:flex;align-items:flex-start;justify-content:space-between;
  margin-bottom:20px;gap:16px;flex-wrap:wrap}
.ph-l h2{font-size:19px;font-weight:700;color:var(--navy);}
.ph-l p{font-size:14px;color:var(--s500);margin-top:4px;line-height:1.5}
.ph-r{display:flex;gap:8px;align-items:center;flex-wrap:wrap}

/* Breadcrumb */
.breadcrumb{display:flex;align-items:center;gap:6px;font-size:15px;
  color:var(--s400);margin-bottom:16px;flex-wrap:wrap}
.breadcrumb a{color:var(--p600);font-weight:500}
.breadcrumb a:hover{text-decoration:underline}
.breadcrumb .sep{color:var(--s300)}

/* ── STAT CARDS ─────────────────────────────────── */
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:20px}
.stat-card{background:var(--white);border:1.5px solid var(--s100);
  border-radius:var(--r16);padding:16px;position:relative;
  overflow:hidden;transition:var(--ease);cursor:default}
.stat-card:hover{box-shadow:var(--sh3);border-color:var(--p300);transform:translateY(-2px)}
.stat-card::after{content:'';position:absolute;inset:0 0 auto 0;
  height:3px;border-radius:var(--r16) var(--r16) 0 0}
.sc-p::after{background:linear-gradient(90deg,var(--p600),var(--p400))}
.sc-g::after{background:var(--green)} .sc-b::after{background:var(--blue)}
.sc-r::after{background:var(--red)}   .sc-a::after{background:var(--amber)}
.sc-t::after{background:var(--teal)}
.sc-n::after{background:var(--navy)}
.sc-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:12px}
.sc-ico{width:38px;height:38px;border-radius:var(--r8);display:grid;place-items:center;font-size:15px}
.sc-p .sc-ico{background:var(--p100);color:var(--p600)}
.sc-g .sc-ico{background:var(--gl);color:var(--green)}
.sc-b .sc-ico{background:var(--bl);color:var(--blue)}
.sc-r .sc-ico{background:var(--rl);color:var(--red)}
.sc-a .sc-ico{background:var(--al);color:var(--amber)}
.sc-t .sc-ico{background:rgba(33,191,225,.15);color:var(--teal)}
.sc-n .sc-ico{background:rgba(53,64,91,.08);color:var(--navy)}
.sc-badge{font-size:11px;font-weight:600;padding:2px 8px;
  border-radius:20px;display:flex;align-items:center;gap:3px}
.sc-badge.up{background:var(--gl);color:var(--green)}
.sc-badge.dn{background:var(--rl);color:var(--red)}
.sc-val{font-size:24px;font-weight:900;color:var(--navy);
  line-height:1;margin-bottom:4px}
.sc-lbl{font-size:15px;color:var(--s400);font-weight:400}

/* ── CARD ───────────────────────────────────────── */
.card{background:var(--white);border:1.5px solid var(--s100);
  border-radius:var(--r16);overflow:hidden;box-shadow:var(--sh1);margin-bottom:18px}
.card-header{padding:14px 18px 12px;border-bottom:1px solid var(--s100);
  display:flex;align-items:center;gap:9px}
.c-ico{width:28px;height:28px;border-radius:var(--r6);display:grid;place-items:center;
  font-size:15px;background:var(--p100);color:var(--p600);flex-shrink:0}
.card-title{font-size:13.5px;font-weight:700;color:var(--navy);flex:1;}
.card-body{padding:16px 18px}

/* ── GRIDS ──────────────────────────────────────── */
.g2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.g3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px}
.g21{display:grid;grid-template-columns:2fr 1fr;gap:16px}
.g31{display:grid;grid-template-columns:3fr 1fr;gap:16px}
.col-s{display:flex;flex-direction:column;gap:16px}
.mb18{margin-bottom:18px}

/* ── TABLE ──────────────────────────────────────── */
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tbl{width:100%;border-collapse:collapse;font-size:13.5px;min-width:500px}
.tbl thead th{text-align:left;padding:10px 14px;font-size:11px;font-weight:700;
  text-transform:uppercase;color:var(--p700);
  background:var(--p50);border-bottom:1.5px solid var(--p200);
  white-space:nowrap;cursor:pointer;user-select:none;transition:var(--ease)}
.tbl thead th:hover{color:var(--p800);background:var(--p100)}
.tbl thead th.no-sort{cursor:default}
.tbl thead th.no-sort:hover{color:var(--p700);background:var(--p50)}
.tbl tbody td{padding:11px 14px;border-bottom:1px solid var(--s100);
  color:var(--s500);vertical-align:middle}
.tbl tbody tr:last-child td{border-bottom:none}
.tbl tbody tr:hover td{background:var(--p50)}
.td-bold{font-weight:600;color:var(--navy)!important}
.td-mono{font-family:'Roboto Mono',monospace;font-size:15px}
.td-right{text-align:right!important}
.td-center{text-align:center!important}

/* ── BADGES ─────────────────────────────────────── */
.cwd-admin .badge{display:inline-flex;align-items:center;gap:4px;
  padding:3px 9px;border-radius:20px;font-size:11px;font-weight:600}
.bdg-p{background:var(--p100);color:var(--p700);border:1px solid var(--p200)}
.bdg-g{background:var(--gl);color:var(--green);border:1px solid var(--gr)}
.bdg-r{background:var(--rl);color:var(--red);border:1px solid var(--rr)}
.bdg-a{background:var(--al);color:var(--amber);border:1px solid var(--ar)}
.bdg-b{background:var(--bl);color:var(--blue);border:1px solid var(--br)}
.bdg-t{background:var(--tlc);color:var(--tealc);border:1px solid var(--tr2)}
.bdg-s{background:var(--s50);color:var(--s500);border:1px solid var(--s200)}

/* ── PROGRESS BARS ──────────────────────────────── */
.prog-wrap{margin-top:6px}
.prog-row{display:flex;justify-content:space-between;align-items:center;
  margin-bottom:5px;font-size:15px}
.prog-name{font-weight:600;color:var(--s700)}
.prog-meta{color:var(--s400)}
.prog-track{height:6px;background:var(--s100);border-radius:10px;overflow:hidden;margin-bottom:14px}
.prog-fill{height:100%;border-radius:10px;background:linear-gradient(90deg,var(--p600),var(--p400));transition:width 1s cubic-bezier(.34,1.56,.64,1)}

/* ── BUTTONS ─────────────────────────────────────── */
.cwd-admin .btn{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;
  border-radius:var(--r8);font-size:12.5px;font-weight:600;border:none;
  cursor:pointer;transition:var(--ease);line-height:1;white-space:nowrap;
  font-family:'Roboto',sans-serif;text-decoration:none}
.cwd-admin .btn-primary{background:linear-gradient(135deg,var(--navy),var(--navy-2));
  color:#fff;box-shadow:0 4px 12px rgba(53,64,91,.28)}
.cwd-admin .btn-primary:hover{background:linear-gradient(135deg,#35405B,var(--navy));
  box-shadow:0 6px 18px rgba(53,64,91,.38);transform:translateY(-1px)}
.cwd-admin .btn-outline{background:var(--white);color:var(--s600);border:1.5px solid var(--s200)}
.cwd-admin .btn-outline:hover{border-color:var(--p400);color:var(--p700);background:var(--p50)}
.cwd-admin .btn-soft{background:var(--p100);color:var(--p700);border:none}
.cwd-admin .btn-soft:hover{background:var(--p200)}
.cwd-admin .btn-navy{background:var(--navy);color:#fff;border:none}
.cwd-admin .btn-navy:hover{background:var(--navy-2)}
.cwd-admin .btn-danger{background:var(--rl);color:var(--red);border:1.5px solid var(--rr)}
.cwd-admin .btn-danger:hover{background:var(--rr)}
.cwd-admin .btn-success{background:var(--gl);color:var(--green);border:1.5px solid var(--gr)}
.cwd-admin .btn-success:hover{background:var(--gr)}
.cwd-admin .btn-secondary{background:var(--white);color:var(--navy);border:1.5px solid var(--p300)}
.cwd-admin .btn-secondary:hover{border-color:var(--teal);color:var(--teal);background:var(--p50)}
.cwd-admin .btn-tertiary{background:transparent;color:var(--navy);border:none;padding-left:8px;padding-right:8px}
.cwd-admin .btn-tertiary:hover{color:var(--teal);background:var(--p50)}
.cwd-admin .btn-error{background:var(--rl);color:var(--red);border:1.5px solid var(--rr)}
.cwd-admin .btn-error:hover{background:var(--rr)}
.cwd-admin .btn-sm{padding:5px 12px;font-size:11.5px;gap:5px}
.cwd-admin .btn-xs{padding:3px 9px;font-size:10.5px;gap:4px}

/* ── FORMS ───────────────────────────────────────── */
.form-section{margin-bottom:24px}
.fsec-title{display:flex;align-items:center;gap:8px;font-size:13px;
  font-weight:700;color:var(--s700);margin-bottom:14px;
  padding-bottom:10px;border-bottom:1.5px solid var(--s100)}
.fsec-ico{width:26px;height:26px;border-radius:var(--r4);
  background:var(--p100);color:var(--p600);display:grid;place-items:center;font-size:11px;flex-shrink:0}
.fg{display:grid;gap:12px}
.fg2{grid-template-columns:1fr 1fr}
.fg3{grid-template-columns:1fr 1fr 1fr}
.fg4{grid-template-columns:1fr 1fr 1fr 1fr}
.sp2{grid-column:span 2} .sp3{grid-column:span 3} .sp4{grid-column:span 4}
.field{display:flex;flex-direction:column;gap:5px}
.field label{font-size:11.5px;font-weight:600;color:var(--s600)}
.field .hint{font-size:10.5px;color:var(--s400);margin-top:2px}
.field .err{font-size:10.5px;color:var(--red);margin-top:2px;display:none}
.field.has-error .inp{border-color:var(--red)!important;box-shadow:0 0 0 3px var(--rl)!important}
.field.has-error .err{display:block}

.inp{width:100%;background:var(--white);border:1.5px solid var(--s200);
  border-radius:var(--r8);padding:8px 11px;font-size:13px;
  color:var(--s800);outline:none;transition:var(--ease)}
.inp:hover{border-color:var(--p300)}
.inp:focus{border-color:var(--p400);box-shadow:0 0 0 3px var(--p100)}
.inp::placeholder{color:var(--s300)}
.inp[readonly]{background:var(--s50);color:var(--s500);cursor:default}
select.inp{appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%239294b0' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;
  padding-right:30px;cursor:pointer}
textarea.inp{resize:vertical;line-height:1.5}
.form-actions{display:flex;gap:10px;margin-top:20px;
  padding-top:16px;border-top:1px solid var(--s100);flex-wrap:wrap}

/* Filter card */
.filter-card{background:var(--white);border:1.5px solid var(--s100);
  border-radius:var(--r12);padding:14px 16px;margin-bottom:16px;
  box-shadow:var(--sh1)}
.filter-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.filter-label{font-size:11.5px;font-weight:600;color:var(--s400);white-space:nowrap}

/* ── CALLOUTS ────────────────────────────────────── */
.callout{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;
  border-radius:var(--r12);margin-bottom:16px;font-size:12.5px}
.callout-p{background:var(--p50);border:1.5px solid var(--p200)}
.callout-p i{color:var(--p500);margin-top:1px}
.callout-p .c-title{color:var(--p700);font-weight:700}
.callout-p .c-sub{color:var(--p500);margin-top:2px}
.callout-r{background:var(--rl);border:1.5px solid var(--rr)}
.callout-r i{color:var(--red);margin-top:1px}
.callout-r .c-title{color:var(--red);font-weight:700}
.callout-r .c-sub{color:var(--red);opacity:.7;margin-top:2px}
.callout-g{background:var(--gl);border:1.5px solid var(--gr)}
.callout-g i{color:var(--green);margin-top:1px}
.callout-g .c-title{color:var(--green);font-weight:700}
.callout-g .c-sub{color:var(--green);opacity:.7;margin-top:2px}
.callout-a{background:var(--al);border:1.5px solid var(--ar)}
.callout-a i{color:var(--amber);margin-top:1px}
.callout-a .c-title{color:var(--amber);font-weight:700}

/* ── TABS ────────────────────────────────────────── */
.tab-row{display:flex;gap:2px;background:var(--s100);border-radius:var(--r8);
  padding:3px;width:fit-content;margin-bottom:18px;flex-wrap:wrap}
.tab-btn{padding:6px 16px;border-radius:6px;font-size:12.5px;font-weight:500;
  color:var(--s400);background:none;border:none;cursor:pointer;
  transition:var(--ease);font-family:'Roboto',sans-serif}
.tab-btn.active{background:var(--white);color:var(--p700);font-weight:700;
  box-shadow:var(--sh1)}
.tab-btn:hover:not(.active){color:var(--p700);background:var(--p50)}

/* ── PAGINATION ─────────────────────────────────── */
.pagination{display:flex;align-items:center;gap:4px;
  padding:10px 16px;border-top:1px solid var(--s100)}
.pg-btn{min-width:28px;height:28px;border:1.5px solid var(--s100);
  background:var(--white);border-radius:var(--r6);font-size:15px;
  font-weight:500;color:var(--s500);display:grid;place-items:center;
  cursor:pointer;transition:var(--ease);font-family:'Roboto',sans-serif}
.pg-btn:hover{border-color:var(--p400);color:var(--p600);background:var(--p50)}
.pg-btn.active{background:var(--p600);border-color:var(--p600);color:#fff}
.pg-btn:disabled{opacity:.4;cursor:not-allowed}
.pg-info{margin-left:auto;font-size:11.5px;color:var(--s400)}

/* ── EMPTY STATE ─────────────────────────────────── */
.empty-state{text-align:center;padding:48px 20px}
.empty-state i{font-size:38px;color:var(--s200);margin-bottom:12px;display:block}
.empty-state h4{font-size:14px;font-weight:600;color:var(--s600);margin-bottom:5px}
.empty-state p{font-size:12.5px;color:var(--s400)}

/* ── ALERT BANNER ────────────────────────────────── */
.alert-banner{display:flex;align-items:center;gap:10px;padding:9px 22px;
  font-size:12.5px;font-weight:500;flex-shrink:0;border-bottom:1px solid}
.alert-r{background:var(--rl);color:var(--red);border-color:var(--rr)}
.alert-g{background:var(--gl);color:var(--green);border-color:var(--gr)}
.alert-p{background:var(--p50);color:var(--p700);border-color:var(--p200)}
.alert-dismiss{margin-left:auto;cursor:pointer;font-size:14px}

/* ── SUMMARY STRIP ───────────────────────────────── */
.sum-strip{display:grid;border:1.5px solid var(--s100);border-radius:var(--r12);
  overflow:hidden;margin-bottom:16px;background:var(--s100);gap:1px}
.sum-strip-5{grid-template-columns:repeat(5,1fr)}
.sum-strip-4{grid-template-columns:repeat(4,1fr)}
.sum-strip-6{grid-template-columns:repeat(6,1fr)}
.sum-cell{background:var(--white);padding:12px 16px;text-align:center}
.sum-num{font-size:19px;font-weight:900;font-family:'Roboto',sans-serif;color:var(--navy)}
.sum-key{font-size:10.5px;color:var(--s400);margin-top:3px;font-weight:500}

/* ── THEMEFOREST-LEVEL DASHBOARD COMPONENTS ─────── */

/* Hero KPI strip — glassy cards with embedded sparkline */
.kpi-deck{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:20px}
@media(max-width:1100px){.kpi-deck{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.kpi-deck{grid-template-columns:1fr}}
.kpi{position:relative;background:var(--white);border:1px solid var(--s100);
  border-radius:16px;padding:18px 20px;overflow:hidden;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s var(--ease)}
.kpi:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(53,64,91,.10);border-color:var(--p400)}
.kpi-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.kpi-icon{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;font-size:14px;flex-shrink:0}
.kpi-icon-navy{background:linear-gradient(135deg,var(--navy),var(--navy-2));color:#fff}
.kpi-icon-teal{background:linear-gradient(135deg,var(--teal),var(--teal-2));color:#fff}
.kpi-icon-green{background:linear-gradient(135deg,#16a34a,#22c55e);color:#fff}
.kpi-icon-amber{background:linear-gradient(135deg,#d97706,#f59e0b);color:#fff}
.kpi-icon-red{background:linear-gradient(135deg,#dc2626,#ef4444);color:#fff}
.kpi-trend{font-size:11px;font-weight:700;padding:3px 9px;border-radius:99px;display:inline-flex;align-items:center;gap:3px}
.kpi-trend.up{background:#dcfce7;color:#15803d}
.kpi-trend.dn{background:#fee2e2;color:#b91c1c}
.kpi-trend.flat{background:var(--s100);color:var(--s500)}
.kpi-val{font-size:28px;font-weight:800;color:var(--navy);line-height:1.1;}
.kpi-lbl{font-size:13px;color:var(--s500);margin-top:3px;font-weight:500}
.kpi-spark{margin-top:12px;height:36px}
.kpi-foot{margin-top:10px;padding-top:10px;border-top:1px dashed var(--s100);
  display:flex;justify-content:space-between;font-size:15px;color:var(--s500)}
.kpi-foot strong{color:var(--navy);font-weight:700}

/* Themed cards */
.tf-card{background:var(--white);border:1px solid var(--s100);border-radius:16px;
  overflow:hidden;box-shadow:0 1px 3px rgba(53,64,91,.04);margin-bottom:20px}
.tf-card-head{padding:18px 22px 14px;display:flex;align-items:center;gap:12px;
  border-bottom:1px solid var(--s100)}
.tf-card-head .tf-c-ico{width:32px;height:32px;border-radius:8px;
  background:linear-gradient(135deg,var(--p100),var(--p200));color:var(--navy);
  display:grid;place-items:center;font-size:13px;flex-shrink:0}
.tf-card-head h3{font-size:15px;font-weight:700;color:var(--navy);flex:1;}
.tf-card-head .tf-card-meta{font-size:11.5px;color:var(--s400)}
.tf-card-body{padding:20px 22px}
.tf-card-body.flush{padding:0}

/* Pipeline funnel — horizontal stages with counts */
.pipeline{display:flex;align-items:stretch;gap:0;border-radius:12px;overflow:hidden;position:relative}
.pipe-step{flex:1;padding:16px 14px;background:var(--p50);position:relative;text-align:center;
  border-right:1px solid var(--white);transition:background .2s var(--ease)}
.pipe-step:last-child{border-right:none}
.pipe-step:nth-child(odd){background:#f3f9fb}
.pipe-step:nth-child(even){background:#e7f3f7}
.pipe-step::after{content:'';position:absolute;top:0;right:-14px;width:0;height:0;
  border-top:44px solid transparent;border-bottom:44px solid transparent;
  border-left:14px solid #e7f3f7;z-index:1;transition:border-left-color .2s var(--ease)}
.pipe-step:nth-child(odd)::after{border-left-color:#f3f9fb}
.pipe-step:last-child::after{display:none}
.pipe-num{font-size:24px;font-weight:800;color:var(--navy);line-height:1}
.pipe-lbl{font-size:11px;color:var(--s500);margin-top:6px;font-weight:600;text-transform:uppercase}

/* Highlighted "current stage" when filtering to one need */
.pipe-step.is-current{background:linear-gradient(135deg,var(--navy),var(--navy-2))}
.pipe-step.is-current::after{border-left-color:var(--navy-2)}
.pipe-step.is-current .pipe-num{color:#fff}
.pipe-step.is-current .pipe-lbl{color:rgba(255,255,255,.85)}
.pipe-current-mark{position:absolute;top:-10px;left:50%;transform:translateX(-50%);
  background:var(--teal);color:var(--navy);font-size:9.5px;font-weight:800;
  padding:3px 9px;border-radius:99px;text-transform:uppercase;
  box-shadow:0 4px 10px rgba(33,191,225,.4);z-index:2;white-space:nowrap;display:inline-flex;align-items:center;gap:4px}
.pipe-current-mark i{font-size:8px}

/* Pipeline filter (school + kit selects) */
.pipe-filter{display:flex;gap:10px;align-items:flex-end;margin-bottom:14px;flex-wrap:wrap}
.pipe-filter-field{display:flex;flex-direction:column;gap:5px;flex:1;min-width:180px}
.pipe-filter-field > span{font-size:10.5px;font-weight:700;color:var(--s500);text-transform:uppercase;display:flex;align-items:center;gap:5px}
.pipe-filter-field > span i{color:var(--teal);font-size:11px}
.pipe-filter-field select{
  width:100%;background:var(--white);border:1.5px solid var(--s200);border-radius:9px;
  padding:8px 32px 8px 12px;font-size:12.5px;font-weight:500;color:var(--navy);
  cursor:pointer;outline:none;font-family:inherit;transition:all .15s var(--ease);
  appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%230f2340' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center}
.pipe-filter-field select:hover:not(:disabled){border-color:var(--p400);background-color:var(--p50)}
.pipe-filter-field select:focus{border-color:var(--teal);box-shadow:0 0 0 3px rgba(33,191,225,.2)}
.pipe-filter-field select:disabled{background-color:var(--s50);color:var(--s400);cursor:not-allowed}
.pipe-filter-clear{display:inline-flex;align-items:center;gap:5px;padding:8px 12px;
  font-size:11.5px;font-weight:600;color:var(--s500);background:var(--s50);
  border:1.5px solid var(--s200);border-radius:9px;text-decoration:none;transition:all .15s var(--ease);height:36px}
.pipe-filter-clear:hover{color:#dc2626;background:#fee2e2;border-color:#fecaca}

.pipe-need-callout{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px 14px;background:linear-gradient(135deg,var(--p50),var(--p100));
  border:1px solid var(--p200);border-radius:10px;margin-bottom:14px;font-size:12.5px;color:var(--s700)}
.pipe-need-callout strong{color:var(--navy);display:block;margin-bottom:2px}

/* Activity timeline — vertical with avatars */
.timeline{position:relative;padding:0;margin:0;list-style:none}
.timeline::before{content:'';position:absolute;left:18px;top:8px;bottom:8px;width:2px;background:var(--s100)}
.timeline li{position:relative;padding:0 0 18px 50px;font-size:12.5px;color:var(--s600)}
.timeline li:last-child{padding-bottom:0}
.tl-dot{position:absolute;left:9px;top:0;width:20px;height:20px;border-radius:50%;
  background:var(--white);border:2px solid var(--p400);display:grid;place-items:center;
  font-size:9px;color:var(--navy);z-index:1}
.tl-dot.green{border-color:#16a34a;color:#16a34a}
.tl-dot.amber{border-color:#d97706;color:#d97706}
.tl-dot.blue{border-color:#2563eb;color:#2563eb}
.tl-when{font-size:10.5px;color:var(--s400);font-weight:500}
.tl-text strong{color:var(--navy);font-weight:600}

/* Top-N list with horizontal progress bars */
.toplist{display:flex;flex-direction:column;gap:12px}
.top-row{display:grid;grid-template-columns:32px 1fr auto;gap:10px;align-items:center}
.top-rank{width:28px;height:28px;border-radius:8px;background:var(--p50);color:var(--navy);
  font-weight:800;font-size:12.5px;display:grid;place-items:center}
.top-rank.gold{background:linear-gradient(135deg,#fef3c7,#fde68a);color:#92400e}
.top-rank.silver{background:linear-gradient(135deg,#e5e7eb,#cbd5e1);color:#475569}
.top-rank.bronze{background:linear-gradient(135deg,#fed7aa,#fdba74);color:#9a3412}
.top-info{min-width:0}
.top-name{font-size:13px;font-weight:600;color:var(--navy);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top-bar{height:5px;background:var(--s100);border-radius:99px;margin-top:5px;overflow:hidden}
.top-bar-fill{height:100%;background:linear-gradient(90deg,var(--navy),var(--teal));border-radius:99px}
.top-amt{font-size:12.5px;font-weight:700;color:var(--navy);white-space:nowrap}

/* Quick action mosaic — bigger, with hover gradient */
.qa-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
@media(max-width:900px){.qa-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:500px){.qa-grid{grid-template-columns:repeat(2,1fr)}}
.qa-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;padding:20px 10px;background:var(--white);border:1px solid var(--s100);
  border-radius:14px;text-decoration:none;color:var(--navy);transition:all .25s var(--ease);text-align:center}
.qa-tile:hover{border-color:var(--p400);background:linear-gradient(135deg,#fff,var(--p50));
  transform:translateY(-2px);box-shadow:0 6px 18px rgba(53,64,91,.08);color:var(--navy)}
.qa-ico{width:42px;height:42px;border-radius:11px;background:linear-gradient(135deg,var(--p100),var(--p200));
  color:var(--navy);display:grid;place-items:center;font-size:16px}
.qa-lbl{font-size:15px;font-weight:600}

/* Layout grid for dashboard */
.dash-grid{display:grid;grid-template-columns:2fr 1fr;gap:20px;margin-bottom:20px}
@media(max-width:1100px){.dash-grid{grid-template-columns:1fr}}
.dash-grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:20px;margin-bottom:20px}
@media(max-width:1100px){.dash-grid-3{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.dash-grid-3{grid-template-columns:1fr}}

/* Mini-donut legend */
.donut-legend{display:flex;flex-direction:column;gap:10px;margin-top:16px}
.donut-row{display:flex;align-items:center;gap:10px;font-size:12.5px}
.donut-swatch{width:11px;height:11px;border-radius:3px;flex-shrink:0}
.donut-name{flex:1;color:var(--s700);font-weight:500}
.donut-val{font-weight:700;color:var(--navy)}

/* Date-range chip */
.range-chip{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;
  background:var(--p50);color:var(--navy);border-radius:99px;font-size:15px;font-weight:600;
  border:1px solid var(--p200)}
.range-chip i{color:var(--teal)}

/* ── Date-range picker (preset dropdown + custom) ─────────── */
.dt-picker{position:relative;display:inline-block}
.dt-trigger{display:inline-flex;align-items:center;gap:10px;padding:9px 14px;
  background:var(--white);border:1.5px solid var(--s200);border-radius:10px;
  font-family:inherit;font-size:12.5px;font-weight:600;color:var(--navy);cursor:pointer;
  transition:all .2s var(--ease);min-width:180px}
.dt-trigger:hover{border-color:var(--p400);background:var(--p50)}
.dt-picker.open .dt-trigger{border-color:var(--teal);box-shadow:0 0 0 3px rgba(33,191,225,.15)}
.dt-trigger > i:first-child{color:var(--teal);font-size:13px}
.dt-trigger-label{flex:1;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dt-trigger-arrow{font-size:10px;color:var(--s400);transition:transform .2s var(--ease)}
.dt-picker.open .dt-trigger-arrow{transform:rotate(180deg);color:var(--teal)}

.dt-menu{position:absolute;top:calc(100% + 8px);right:0;min-width:280px;
  background:var(--white);border:1px solid var(--s100);border-radius:14px;
  box-shadow:0 16px 40px rgba(53,64,91,.14);overflow:hidden;z-index:300;
  opacity:0;visibility:hidden;transform:translateY(-6px);transition:all .2s var(--ease);
  display:flex}
.dt-picker.open .dt-menu{opacity:1;visibility:visible;transform:translateY(0)}

.dt-presets{display:flex;flex-direction:column;padding:8px;gap:2px;
  border-right:1px solid var(--s100);min-width:150px}
.dt-preset{display:block;padding:8px 12px;font-size:12.5px;color:var(--s600);
  border-radius:8px;text-decoration:none;transition:all .15s var(--ease);font-weight:500;white-space:nowrap}
.dt-preset:hover{background:var(--p50);color:var(--navy)}
.dt-preset.active{background:linear-gradient(135deg,var(--navy),var(--navy-2));color:#fff;font-weight:600}
.dt-preset.active::after{content:'\f00c';font-family:'Font Awesome 6 Free';font-weight:900;
  margin-left:8px;font-size:10px}

.dt-custom{padding:14px 16px;flex:1;min-width:200px}
.dt-custom-label{font-size:10.5px;font-weight:700;color:var(--s400);text-transform:uppercase;
  margin-bottom:10px}
.dt-custom-form{display:flex;flex-direction:column;gap:10px}
.dt-custom-field{display:flex;flex-direction:column;gap:4px}
.dt-custom-field span{font-size:11px;font-weight:600;color:var(--s500)}
.dt-custom-field input[type=date]{
  width:100%;background:var(--s50);border:1.5px solid var(--s200);border-radius:8px;
  padding:7px 10px;font-size:12.5px;color:var(--navy);outline:none;font-family:inherit;
  transition:all .15s var(--ease)}
.dt-custom-field input[type=date]:hover{border-color:var(--p300)}
.dt-custom-field input[type=date]:focus{border-color:var(--teal);background:var(--white);
  box-shadow:0 0 0 3px rgba(33,191,225,.15)}
.dt-custom-field input[type=date]::-webkit-calendar-picker-indicator{
  cursor:pointer;filter:invert(20%) sepia(30%) saturate(1500%) hue-rotate(190deg)}

@media(max-width:600px){
  .dt-menu{flex-direction:column;right:0;left:0;min-width:auto}
  .dt-presets{flex-direction:row;flex-wrap:wrap;border-right:none;border-bottom:1px solid var(--s100);min-width:0}
  .dt-preset{padding:6px 12px;font-size:11.5px}
}

/* ── FORM-PAGE POLISH (legacy markup → themeforest look) ─────────────────
   Targets the Tailwind class patterns that existed BEFORE the redesign on
   form pages (school-edit, donation-add, page-edit, etc.) and re-skins them
   to match the new design system. Apply scoped to .cwd-admin so this never
   leaks onto public pages that share styles.css. */

/* Inputs / selects / textareas with the legacy Tailwind look */
.cwd-admin input[type="text"]:not(.inp):not(.dt-trigger):not(.tgw-dz-caption):not(.tgw-dz-stage),
.cwd-admin input[type="email"]:not(.inp),
.cwd-admin input[type="tel"]:not(.inp),
.cwd-admin input[type="url"]:not(.inp),
.cwd-admin input[type="password"]:not(.inp),
.cwd-admin input[type="number"]:not(.inp),
.cwd-admin input[type="search"]:not(.inp),
.cwd-admin input[type="date"]:not(.inp),
.cwd-admin input[type="datetime-local"]:not(.inp),
.cwd-admin textarea:not(.inp),
.cwd-admin select:not(.inp):not(.tgw-dz-stage){
  background: var(--white);
  border: 1.5px solid var(--s200);
  border-radius: var(--r8);
  padding: 9px 12px;
  font-size: 13px;
  color: var(--navy);
  font-family: 'Roboto', system-ui, sans-serif;
  outline: none;
  transition: all .15s var(--ease);
  line-height: 1.4;
}
.cwd-admin textarea:not(.inp){ line-height: 1.55; resize: vertical; }
.cwd-admin input:not(.inp):hover,
.cwd-admin textarea:not(.inp):hover,
.cwd-admin select:not(.inp):hover { border-color: var(--p300); }
.cwd-admin input:not(.inp):focus,
.cwd-admin textarea:not(.inp):focus,
.cwd-admin select:not(.inp):focus { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(33,191,225,.18); }
.cwd-admin input::placeholder,
.cwd-admin textarea::placeholder { color: var(--s300); }
.cwd-admin input[disabled], .cwd-admin select[disabled], .cwd-admin textarea[disabled],
.cwd-admin input[readonly], .cwd-admin select[readonly], .cwd-admin textarea[readonly]{
  background: var(--s50); color: var(--s500); cursor: not-allowed;
}

/* Native select chevron — match the .inp style */
.cwd-admin select:not(.inp){
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%230f2340' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px;
  cursor: pointer;
}

/* Form labels (legacy `font-label-md`) — tighten for small UI */
.cwd-admin label.font-label-md,
.cwd-admin .field > label,
.cwd-admin .flex.flex-col > label.font-label-md{
  font-size: 11.5px; font-weight: 600; color: var(--s600);
  text-transform: none; 
}

/* Section "card" wrappers (legacy `bg-white rounded-xl shadow-sm border …`)
   → align with .tf-card — soft border, subtle shadow, navy headings inside */
.cwd-admin .bg-white.rounded-xl.shadow-sm,
.cwd-admin .bg-surface-container-lowest.rounded-xl.shadow-sm{
  background: var(--white) !important;
  border: 1px solid var(--s100) !important;
  border-radius: 16px !important;
  box-shadow: 0 1px 3px rgba(53,64,91,.04) !important;
}

/* Section headings with .font-h2/.text-h2/.text-primary inside form sections */
.cwd-admin section h2.font-h2,
.cwd-admin section h2.text-h2{
  color: var(--navy) !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  
  line-height: 1.3 !important;
  border-bottom-color: var(--s100) !important;
}
.cwd-admin section h3.font-h3,
.cwd-admin section h3.text-h3{
  color: var(--navy) !important;
  font-size: 14.5px !important;
  font-weight: 700 !important;
  
}

/* Sub-cards inside forms (cascading picker, kits row, etc.) — give them a
   subtle teal tint instead of plain grey */
.cwd-admin .bg-surface-container-low.rounded-xl,
.cwd-admin .bg-surface-container-low.rounded-lg{
  background: linear-gradient(135deg, var(--p50), #f9fdfe) !important;
  border-color: var(--p200) !important;
}

/* Navy submit / "save" buttons that pages use as `.btn .btn-navy` already
   work via app.css. Re-style any leftover old `.btn btn-secondary` so they
   pop on form pages too: */
.cwd-admin .btn.btn-secondary{
  background: var(--white); color: var(--navy);
  border: 1.5px solid var(--p300); font-weight: 600;
}
.cwd-admin .btn.btn-secondary:hover{
  border-color: var(--teal); color: var(--teal); background: var(--p50);
}

/* "Save / Update" primary submit buttons — make them visibly the primary
   action by using the navy gradient even when only `.btn .btn-primary` */
.cwd-admin form button.btn.btn-primary{
  background: linear-gradient(135deg, var(--navy), var(--navy-2));
  color: #fff; border: none;
  box-shadow: 0 4px 12px rgba(53,64,91,.22);
}
.cwd-admin form button.btn.btn-primary:hover{
  background: linear-gradient(135deg, #35405B, var(--navy));
  box-shadow: 0 6px 18px rgba(53,64,91,.30);
  transform: translateY(-1px);
}

/* Right-rail "documents" / "danger zone" / status cards on form pages —
   tighten typography and align borders */
.cwd-admin section.bg-white > h2,
.cwd-admin section.bg-surface-container-lowest > h2,
.cwd-admin section.bg-white > header h2,
.cwd-admin section.bg-surface-container-lowest > header h2{
  display: flex; align-items: center; gap: 10px;
}
.cwd-admin section.bg-white > h2::before{
  /* tiny teal bar before section titles for the polished look */
  content: ""; display: inline-block; width: 4px; height: 18px;
  background: linear-gradient(180deg, var(--navy), var(--teal));
  border-radius: 2px; flex-shrink: 0;
}

/* "Add school", "Save Profile" footer area — sticky-ish styling */
.cwd-admin form > .flex.justify-end.gap-md,
.cwd-admin form > .flex.justify-end.gap-sm{
  padding-top: 18px;
  margin-top: 18px;
  border-top: 1px dashed var(--s100);
}

/* Checkbox + radio — give them brand colors */
.cwd-admin input[type="checkbox"], .cwd-admin input[type="radio"]{
  accent-color: var(--teal);
  width: 16px; height: 16px;
}

/* ── GLOBAL LEGACY-MARKUP COMPATIBILITY ─────────────────────────────────
   Targets every Tailwind pattern that pre-existed the redesign and re-skins
   it to match the styleguide. Scoped to .cwd-admin so it never leaks to
   public pages. This is what makes unconverted form pages match the new look
   without touching their code. */

/* Hero / page titles still using Tailwind h1 / h2 with text-primary */
.cwd-admin h1.font-h1, .cwd-admin h1.text-h1,
.cwd-admin h1.font-display, .cwd-admin h1.text-display{
  font-size: 24px !important; font-weight: 700 !important;
  color: var(--navy) !important; 
  line-height: 1.2 !important;
}
.cwd-admin h2.font-h2.text-primary, .cwd-admin h2.text-h2.text-primary{
  color: var(--navy) !important; font-size: 17px !important;
  font-weight: 700 !important; 
}
.cwd-admin h3.font-h3.text-primary, .cwd-admin h3.text-h3.text-primary{
  color: var(--navy) !important; font-size: 14.5px !important;
  font-weight: 700 !important;
}
.cwd-admin h4.font-h4, .cwd-admin h4.text-h4{
  color: var(--navy) !important; font-weight: 700 !important; font-size: 13.5px !important;
}

/* Body text helpers — line up `text-on-surface-variant` with our slate-500 */
.cwd-admin .text-on-surface-variant{ color: var(--s500) !important; }
.cwd-admin .text-on-surface{ color: var(--s700) !important; }
.cwd-admin .text-primary{ color: var(--navy) !important; }
.cwd-admin .text-secondary{ color: var(--teal) !important; }
.cwd-admin .text-error{ color: var(--red) !important; }

/* Body-size utility classes (bumped 1px+ for readability) */
.cwd-admin .font-body-lg, .cwd-admin .text-body-lg{ font-size: 16px !important; line-height: 1.55 !important; color: var(--s600); }
.cwd-admin .font-body-md, .cwd-admin .text-body-md{ font-size: 14px !important; line-height: 1.55 !important; color: var(--s700); }
.cwd-admin .font-body-sm, .cwd-admin .text-body-sm{ font-size: 13px !important; line-height: 1.5 !important; color: var(--s600); }
.cwd-admin .font-label-md, .cwd-admin .text-label-md{ font-size: 13px !important; font-weight: 600 !important; }
.cwd-admin .font-label-sm, .cwd-admin .text-label-sm{ font-size: 15px !important; }
.cwd-admin .font-label-xs, .cwd-admin .text-label-xs{ font-size: 11px !important; }

/* Default paragraph in admin pages — make it readable */
.cwd-admin .page-content p{ font-size: 14px; line-height: 1.55; }
.cwd-admin .tf-card-body{ font-size: 14px; }
.cwd-admin .tf-card-body p{ font-size: 14px; line-height: 1.55; color: var(--s700); }
.cwd-admin .timeline li{ font-size: 13.5px !important; }
.cwd-admin .donut-row{ font-size: 13.5px !important; }
.cwd-admin .top-name{ font-size: 14px !important; }
.cwd-admin .top-amt{ font-size: 13.5px !important; }
.cwd-admin .pipe-num{ font-size: 26px !important; }
.cwd-admin .pipe-lbl{ font-size: 15px !important; }
.cwd-admin .qa-lbl{ font-size: 13px !important; }

/* ─── Status pills — every legacy color token combination ─── */
/* Generic shape: any `*rounded-full*` element with these bg classes
   becomes a styleguide .badge */
.cwd-admin .rounded-full.uppercase,
.cwd-admin span.rounded-full.font-bold,
.cwd-admin span.rounded-full.text-label-sm,
.cwd-admin span.rounded-full.text-label-xs,
.cwd-admin span.rounded-full.text-xs{
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 3px 9px !important;
  border-radius: 99px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  
  text-transform: none !important;
  border: 1px solid transparent;
  vertical-align: middle;
}

/* Specific tone mappings */
.cwd-admin .bg-secondary-container.text-on-secondary-container,
.cwd-admin .bg-secondary-container\/30.text-on-secondary-container,
.cwd-admin .bg-secondary-container\/40.text-on-secondary-container{
  background: var(--gl) !important; color: var(--green) !important;
  border-color: var(--gr) !important;
}
.cwd-admin .bg-error-container.text-on-error-container,
.cwd-admin .bg-error-container\/30.text-on-error-container,
.cwd-admin .bg-error-container\/40.text-on-error-container{
  background: var(--rl) !important; color: var(--red) !important;
  border-color: var(--rr) !important;
}
.cwd-admin .bg-tertiary-fixed.text-on-tertiary-fixed-variant{
  background: var(--bl) !important; color: var(--blue) !important;
  border-color: var(--br) !important;
}
.cwd-admin .bg-brand-yellow\/20.text-primary,
.cwd-admin .bg-brand-yellow\/30.text-primary{
  background: var(--al) !important; color: var(--amber) !important;
  border-color: var(--ar) !important;
}
.cwd-admin .bg-surface-container-high.text-on-surface-variant,
.cwd-admin .bg-surface-container-low.text-on-surface-variant,
.cwd-admin .bg-surface-container.text-on-surface-variant{
  background: var(--s50) !important; color: var(--s500) !important;
  border-color: var(--s200) !important;
}

/* Section flash banners (mb-md p-md bg-…-container/30 …rounded-xl) — convert
   to .callout style */
.cwd-admin .rounded-xl.bg-secondary-container\/30,
.cwd-admin .rounded-xl.bg-secondary-container,
.cwd-admin .rounded-xl.border.border-secondary-container{
  background: var(--gl) !important; border-color: var(--gr) !important;
  color: var(--green) !important; padding: 12px 14px !important;
  font-size: 12.5px !important;
}
.cwd-admin .rounded-xl.bg-error-container,
.cwd-admin .rounded-xl.bg-error-container\/30,
.cwd-admin .rounded-xl.border.border-error-container{
  background: var(--rl) !important; border-color: var(--rr) !important;
  color: var(--red) !important; padding: 12px 14px !important;
  font-size: 12.5px !important;
}

/* Cards using the Tailwind card pattern get themeforest treatment */
.cwd-admin section.bg-white,
.cwd-admin section.bg-surface-container-lowest{
  background: var(--white) !important;
  border: 1px solid var(--s100) !important;
  border-radius: 16px !important;
  box-shadow: 0 1px 3px rgba(53,64,91,.04) !important;
  overflow: hidden;
}
.cwd-admin section.bg-white > .p-md,
.cwd-admin section.bg-white > .p-lg,
.cwd-admin section.bg-surface-container-lowest > .p-md,
.cwd-admin section.bg-surface-container-lowest > .p-lg{
  /* keep their own padding, just align typography */
}

/* "Action panel" cards with left-border indicator */
.cwd-admin section.border-l-4.border-error-container,
.cwd-admin section.border-l-4.border-error{ border-left-color: var(--red) !important; }
.cwd-admin section.border-l-4.border-secondary-container,
.cwd-admin section.border-l-4.border-secondary{ border-left-color: var(--teal) !important; }
.cwd-admin section.border-l-4.border-brand-yellow{ border-left-color: var(--amber) !important; }

/* Tables with the Tailwind `<table class="w-full text-left">` pattern get
   the styleguide table styling — header in p50 + navy text + hover row */
.cwd-admin table.w-full.text-left thead.bg-surface-container-low,
.cwd-admin table.w-full.text-left thead.bg-surface-container{
  background: var(--p50) !important;
}
.cwd-admin table.w-full.text-left thead th{
  font-size: 10px !important; font-weight: 700 !important;
   text-transform: uppercase !important;
  color: var(--p700) !important; padding: 10px 14px !important;
  border-bottom: 1.5px solid var(--p200) !important;
}
.cwd-admin table.w-full.text-left tbody tr{ border-bottom: 1px solid var(--s100); }
.cwd-admin table.w-full.text-left tbody tr:hover{ background: var(--p50); }
.cwd-admin table.w-full.text-left tbody td{ padding: 11px 14px !important; }
.cwd-admin table.w-full.text-left .font-semibold.text-primary,
.cwd-admin table.w-full.text-left .font-bold.text-primary{
  color: var(--navy) !important; font-weight: 600 !important;
}

/* `.btn.btn-navy` already exists — make sure it's solid navy + hover */
.cwd-admin .btn.btn-navy{ background: var(--navy); color: #fff; border: none; }
.cwd-admin .btn.btn-navy:hover{ background: var(--navy-2); }

/* Material-symbols rendering size tweak for tighter UI */
.cwd-admin .material-symbols-outlined{ vertical-align: middle; }

/* Anchor links inside body content — use teal for accent, navy for primary */
.cwd-admin .text-secondary.font-bold,
.cwd-admin .text-secondary.font-label-sm,
.cwd-admin .text-secondary.font-label-md{
  color: var(--teal) !important; font-weight: 600 !important;
}
.cwd-admin a.text-secondary:hover{ text-decoration: underline; }

/* Bullet "Action Required" callout boxes (border-l-4 border-error etc) */
.cwd-admin .border-l-4.border-error{ border-left: 4px solid var(--red) !important; }
.cwd-admin .border-l-4.border-secondary{ border-left: 4px solid var(--teal) !important; }
.cwd-admin .border-l-4.border-brand-yellow{ border-left: 4px solid var(--amber) !important; }

/* "Tabs" / chip-style pages (px-sm py-xs rounded-full bg-* hover:bg-*) */
.cwd-admin .rounded-full.bg-brand-navy.text-white{
  background: var(--navy) !important; color: #fff !important;
  font-weight: 600 !important; padding: 5px 14px !important;
}
.cwd-admin .rounded-full.bg-surface-container-low{
  background: var(--p50) !important; color: var(--navy) !important;
  font-weight: 500 !important; padding: 5px 14px !important;
}
.cwd-admin .rounded-full.bg-surface-container-low:hover{
  background: var(--p100) !important;
}

/* Avatar circles (w-12 h-12 rounded-full bg-brand-navy text-white) */
.cwd-admin .rounded-full.bg-brand-navy{
  background: linear-gradient(135deg, var(--navy), var(--teal)) !important;
}

/* tgw chips (filter pills used on school/donor/PC dashboards) — body
   color rule was clobbering the active state's white text. Re-state with
   .cwd-admin prefix to win specificity. */
.cwd-admin .tgw-chip{
  color: var(--s500) !important;
  background: var(--white) !important;
  border-color: var(--s200) !important;
}
.cwd-admin .tgw-chip:hover{
  color: var(--navy) !important;
  background: var(--p50) !important;
  border-color: var(--p300) !important;
}
.cwd-admin .tgw-chip--active,
.cwd-admin .tgw-chip--active:hover{
  background: linear-gradient(135deg, var(--navy), var(--navy-2)) !important;
  color: #fff !important;
  border-color: var(--navy) !important;
  box-shadow: 0 4px 12px rgba(53,64,91,.18);
}

/* Same problem class — anything `.text-white` inside a colored bg */
.cwd-admin .text-white{ color: #fff !important; }
.cwd-admin .text-on-primary{ color: #fff !important; }
.cwd-admin .text-on-secondary{ color: #fff !important; }

/* ── ANIMATIONS ──────────────────────────────────── */
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
.live-dot{width:7px;height:7px;background:var(--green);border-radius:50%;
  display:inline-block;animation:pulse 1.5s ease infinite}

/* ── MOBILE OFF-CANVAS ───────────────────────────── */
.mobile-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);
  z-index:240;display:none}
.mobile-overlay.show{display:block}

/* ── RESPONSIVE ──────────────────────────────────── */
@media(max-width:1200px){
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  .g21,.g31{grid-template-columns:1fr}
}
@media(max-width:900px){
  .sidebar{position:fixed;top:0;left:0;bottom:0;
    transform:translateX(-100%);width:var(--sidebar-w)!important;
    min-width:var(--sidebar-w)!important;z-index:250}
  .sidebar.mobile-open{transform:translateX(0)}
  .main{width:100%}
  .fg4{grid-template-columns:1fr 1fr}
  .g2{grid-template-columns:1fr}
}
@media(max-width:600px){
  .stats-grid{grid-template-columns:1fr}
  .sum-strip-5,.sum-strip-6{grid-template-columns:repeat(2,1fr)}
  .fg3,.fg2{grid-template-columns:1fr}
  .page-content{padding:16px}
  .topbar{padding:0 14px}
}

/* ═══════════════════════════════════════════════════════════════
   TYPOGRAPHY HARMONIZATION — aligns admin shell with master styles.css
   - Base 16px (was 14px), matches master `body { font-size: 16px }`
   - System Inter stack (was Roboto-only), matches master
   - line-height 1.5 across (master parity)
   - Imports --text / --text-muted / --text-faint tokens from master
   - Defines proper h1–h6 scale (admin shell had no semantic headings)
   - Quantizes fractional sizes (12.5, 13.5, 10.5 …) to whole numbers
   ═══════════════════════════════════════════════════════════════ */

:root {
  --text:       #1a1a1a;
  --text-muted: #5c6370;
  --text-faint: #9aa0a6;
}

.cwd-admin html { font-size: 16px; }

body.cwd-admin {
  font-family: -apple-system, "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 1rem;          /* 16px */
  line-height: 1.5;
  color: var(--text);
}
body.cwd-admin button,
body.cwd-admin input,
body.cwd-admin select,
body.cwd-admin textarea {
  font-family: inherit;
  font-size: inherit;
  line-height: 1.5;
}

/* Semantic headings (master scale) */
body.cwd-admin h1, body.cwd-admin .h1 { font-size: 2rem;     line-height: 1.2;  font-weight: 700; color: var(--text); }
body.cwd-admin h2, body.cwd-admin .h2 { font-size: 1.5rem;   line-height: 1.25; font-weight: 700; color: var(--text); }
body.cwd-admin h3, body.cwd-admin .h3 { font-size: 1.25rem;  line-height: 1.3;  font-weight: 700; color: var(--text); }
body.cwd-admin h4, body.cwd-admin .h4 { font-size: 1.125rem; line-height: 1.35; font-weight: 600; color: var(--text); }
body.cwd-admin h5, body.cwd-admin .h5 { font-size: 1rem;     line-height: 1.4;  font-weight: 600; color: var(--text); }
body.cwd-admin h6, body.cwd-admin .h6 { font-size: 0.875rem; line-height: 1.4;  font-weight: 600; color: var(--text); }

body.cwd-admin p           { line-height: 1.5; color: var(--text); }
body.cwd-admin small,
body.cwd-admin .text-sm    { font-size: 0.875rem; }
body.cwd-admin .text-xs    { font-size: 0.75rem; }
body.cwd-admin .text-muted { color: var(--text-muted); }
body.cwd-admin .text-faint { color: var(--text-faint); }

/* Page header */
.cwd-admin .ph-l h2     { font-size: 1.5rem;  font-weight: 700; color: var(--text); }
.cwd-admin .ph-l p      { font-size: 1rem;    color: var(--text-muted); line-height: 1.5; }
.cwd-admin .breadcrumb  { font-size: 0.875rem; color: var(--text-muted); }
.cwd-admin .breadcrumb a{ color: var(--p600); font-weight: 600; }

/* KPI cards */
.cwd-admin .kpi-val   { font-size: 1.75rem;  line-height: 1.1; color: var(--text); font-weight: 800; }
.cwd-admin .kpi-lbl   { font-size: 0.9375rem; color: var(--text-muted); font-weight: 500; }
.cwd-admin .kpi-foot  { font-size: 0.875rem;  color: var(--text-muted); }
.cwd-admin .kpi-foot strong { color: var(--text); font-weight: 700; }
.cwd-admin .kpi-trend { font-size: 0.75rem; }

/* Summary cards */
.cwd-admin .sc-val    { font-size: 1.5rem;   color: var(--text); font-weight: 800; }
.cwd-admin .sc-lbl    { font-size: 0.9375rem; color: var(--text-muted); }
.cwd-admin .sc-badge  { font-size: 0.6875rem; }

/* Section / card titles */
.cwd-admin .card-title { font-size: 0.9375rem; color: var(--text); font-weight: 700; }
.cwd-admin .tf-card-head h3 { font-size: 1rem; color: var(--text); font-weight: 700; }

/* Tables */
.cwd-admin .tbl              { font-size: 0.9375rem; }
.cwd-admin .tbl thead th     { font-size: 0.75rem; color: var(--text-muted); font-weight: 700; text-transform: uppercase; }
.cwd-admin .td-mono          { font-size: 0.9375rem; font-family: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, monospace; }
.cwd-admin .td-bold          { color: var(--text); font-weight: 600; }

/* Buttons */
.cwd-admin .btn,
.cwd-admin .btn-md  { font-size: 0.9375rem; font-weight: 600; }
.cwd-admin .btn-sm  { font-size: 0.875rem;  font-weight: 600; }
.cwd-admin .btn-xs  { font-size: 0.8125rem; font-weight: 600; }

/* Forms */
.cwd-admin .inp,
.cwd-admin .sel,
.cwd-admin .ta          { font-size: 0.9375rem; line-height: 1.5; }
.cwd-admin .field label { font-size: 0.8125rem; color: var(--text-muted); font-weight: 600; }
.cwd-admin .field .hint { font-size: 0.75rem;   color: var(--text-faint); }
.cwd-admin .field .err  { font-size: 0.75rem; }
.cwd-admin .filter-label { font-size: 0.8125rem; color: var(--text-muted); }

/* Empty state */
.cwd-admin .empty-state h4 { font-size: 1.0625rem; color: var(--text); }
.cwd-admin .empty-state p  { font-size: 0.9375rem; color: var(--text-muted); }
.cwd-admin .empty-state i  { font-size: 2.25rem; }

/* Tabs / pagination */
.cwd-admin .tab-btn { font-size: 0.9375rem; }
.cwd-admin .pg-btn  { font-size: 0.9375rem; }
.cwd-admin .pg-info { font-size: 0.8125rem; color: var(--text-muted); }

/* Sidebar */
.cwd-admin .logo-text { font-size: 1rem; }
.cwd-admin .sb-uname  { font-size: 0.9375rem; color: var(--text); }
.cwd-admin .sb-urole  { font-size: 0.75rem;   color: var(--text-faint); }
.cwd-admin .sb-group  { font-size: 0.6875rem; color: var(--text-faint); letter-spacing: 0.04em; }
.cwd-admin .sb-version { font-size: 0.6875rem; color: var(--text-faint); }
.cwd-admin .nav-item  { font-size: 0.9375rem; }
.cwd-admin .nav-acc-header { font-size: 0.9375rem; }

/* Topbar */
.cwd-admin .tb-title { font-size: 0.9375rem; color: var(--text); font-weight: 700; }
.cwd-admin .tb-sub   { font-size: 0.75rem;   color: var(--text-muted); }
.cwd-admin .tb-btn   { font-size: 0.9375rem; }

/* Callouts / alerts */
.cwd-admin .callout       { font-size: 0.875rem; line-height: 1.5; }
.cwd-admin .alert         { font-size: 0.875rem; }

/* Progress / summary numbers */
.cwd-admin .sum-num  { font-size: 1.25rem; color: var(--text); font-weight: 800; }
.cwd-admin .sum-key  { font-size: 0.75rem; color: var(--text-muted); font-weight: 500; }
.cwd-admin .prog-name { font-weight: 600; color: var(--text); }

/* Form section title */
.cwd-admin .fsec-title { font-size: 0.875rem; color: var(--text); font-weight: 700; }

/* Pills */
.cwd-admin .pill { font-size: 0.75rem; font-weight: 600; }

/* ═══════════════════════════════════════════════════════════════
   POLISH OVERLAY — Azia-inspired refinements (cwdpro brand preserved)
   1. Page title 28px / medium
   2. Nav icons 20px, items 38px tall, breathing room
   3. Cards: soft ambient shadow + hover lift
   4. Sidebar active: 3px teal left-strip
   5. Cool slate muted text + cooler divider tone
   ═══════════════════════════════════════════════════════════════ */

/* ── Cooler muted slate (Azia tone) ───────────────── */
:root {
  --text-muted: #7987a1;   /* was #5c6370 — cooler slate */
  --text-faint: #97a3b9;
  --border-cool: #cdd4e0;

  --sh-soft:       0 0 30px rgba(53,64,91,.06);
  --sh-soft-hover: 0 0 40px rgba(53,64,91,.10);
}

/* ── 1. Page title — bigger, lighter weight ──────── */
.cwd-admin .ph-l h2 {
  font-size: 1.75rem;   /* 28px (was 1.5rem) */
  font-weight: 600;     /* was 700 */
  line-height: 1.2;
  color: var(--text);
  margin-bottom: 6px;
}
.cwd-admin .ph-l p {
  font-size: 0.9375rem;
  color: var(--text-muted);
  line-height: 1.5;
}
.cwd-admin .page-hdr {
  margin-bottom: 28px;
}

/* ── 2. Sidebar — bigger icons, fixed 38px items ─── */
.cwd-admin .nav-item {
  height: 38px;
  padding: 0 16px;
  gap: 14px;
  font-size: 0.9375rem;
  font-weight: 500;
  position: relative;
}
.cwd-admin .nav-item i {
  width: 22px;
  font-size: 1.25rem;     /* 20px (was 15px) */
  color: var(--text-muted);
  text-align: center;
  flex-shrink: 0;
  line-height: 1;
  transition: color .2s;
}
.cwd-admin .nav-item:hover {
  background: var(--s50);
  color: var(--navy);
}
.cwd-admin .nav-item:hover i { color: var(--navy); }
.cwd-admin .nav-item.active {
  background: var(--p50);
  color: var(--navy);
  font-weight: 600;
  padding-left: 16px;        /* keep flush; strip lives in ::before */
}
.cwd-admin .nav-item.active i { color: var(--teal); }

/* 3px teal left-strip — Azia signature active state */
.cwd-admin .nav-item.active::before {
  content: "";
  position: absolute;
  top: 6px;
  bottom: 6px;
  left: -8px;
  width: 3px;
  background: var(--teal);
  border-radius: 3px;
}

.cwd-admin .nav-acc-header {
  height: 38px;
  font-size: 0.9375rem;
}
.cwd-admin .nav-acc-header i.acc-ico {
  font-size: 1.25rem;
  width: 22px;
}

/* ── 3. Card / KPI / section — ambient soft shadow ── */
.cwd-admin .kpi,
.cwd-admin .tf-card,
.cwd-admin .summary-card,
.cwd-admin .sc-card,
.cwd-admin .panel-card {
  box-shadow: var(--sh-soft);
  transition: box-shadow .25s ease, transform .25s ease;
}
.cwd-admin .kpi:hover,
.cwd-admin .tf-card:hover {
  box-shadow: var(--sh-soft-hover);
  transform: translateY(-2px);
}

/* Topbar — softer ambient under it */
.cwd-admin .topbar {
  box-shadow: 0 0 30px rgba(53,64,91,.04);
  border-bottom: 1px solid rgba(28,39,60,.12);
}

/* Generic .bg-white containers used in donor/school dashboards */
body.cwd-admin section.bg-white,
body.cwd-admin .card-shell {
  box-shadow: var(--sh-soft);
}

/* ── 4. Sidebar group + version tone alignment ─── */
.cwd-admin .sb-group {
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 14px 22px 6px;
}
.cwd-admin .sb-uname {
  font-size: 0.9375rem;
  color: var(--text);
  font-weight: 600;
}
.cwd-admin .sb-urole {
  font-size: 0.75rem;
  color: var(--text-faint);
}

/* ── 5. KPI numbers — tighter weight pairing ──── */
.cwd-admin .kpi-val { font-size: 1.625rem; font-weight: 800; }   /* 26px */
.cwd-admin .kpi-lbl { font-size: 0.875rem; color: var(--text-muted); font-weight: 500; }
.cwd-admin .kpi-icon { width: 38px; height: 38px; border-radius: 10px; }

/* ── Table header tone with cool slate ─────────── */
.cwd-admin .tbl thead th { color: var(--text-muted); }
.cwd-admin .tbl tbody tr:hover td { background: var(--s50); }

/* ── Buttons — settle on 14px / weight 600 like Azia ── */
.cwd-admin .btn,
.cwd-admin .btn-md { font-size: 0.875rem; font-weight: 600; padding: 9px 16px; }
.cwd-admin .btn-sm { font-size: 0.8125rem; padding: 7px 13px; }
.cwd-admin .btn-xs { font-size: 0.75rem; padding: 5px 10px; }

/* ── Divider tone — cool slate everywhere ────── */
.cwd-admin .sb-logo,
.cwd-admin .sb-user {
  border-color: rgba(28,39,60,.10);
}

/* ═══════════════════════════════════════════════════════════════
   AZIA V2 OVERLAY — adopts BootstrapDash Azia visual idiom
   while preserving cwdpro sidebar + navy/teal brand.
   Retargets existing class names so no markup rewrite required.
   ═══════════════════════════════════════════════════════════════ */

/* ── Azia tokens ─────────────────────────────────── */
:root {
  --az-headline:      #35405B;
  --az-text:          #425072;
  --az-muted:         #7987a1;
  --az-faint:         #97a3b9;
  --az-border:        #dee2ef;
  --az-border-strong: #cdd4e0;
  --az-bg:            #f4f5f9;
  --az-card-radius:   4px;
}

/* ── Body tone — slightly cooler bg, Azia text color ─ */
body.cwd-admin {
  background: var(--az-bg);
  color: var(--az-text);
  font-size: 14px;
}

/* ── Cards — kill ambient shadow, use 1px border, sharper radius ── */
body.cwd-admin .kpi,
body.cwd-admin .tf-card,
body.cwd-admin .summary-card,
body.cwd-admin .sc-card,
body.cwd-admin .panel-card,
body.cwd-admin section.bg-white,
body.cwd-admin .card-shell,
body.cwd-admin .tgw-tl,
body.cwd-admin .tgw-tl-row {
  background: #fff;
  border: 1px solid var(--az-border);
  border-radius: var(--az-card-radius);
  box-shadow: none !important;
  transform: none !important;
  transition: border-color .2s ease;
}
body.cwd-admin .kpi:hover,
body.cwd-admin .tf-card:hover,
body.cwd-admin .tgw-tl-row:hover {
  border-color: var(--az-border-strong);
  transform: none !important;
  box-shadow: none !important;
}

/* ── Top header — Azia thin divider, no heavy shadow ─ */
body.cwd-admin .topbar {
  height: 64px;
  background: #fff;
  border-bottom: 1px solid var(--az-border);
  box-shadow: none;
}
body.cwd-admin .tb-title { font-size: 14px; font-weight: 600; color: var(--az-headline); }
body.cwd-admin .tb-sub   { font-size: 12px; color: var(--az-muted); }
body.cwd-admin .ico-btn,
body.cwd-admin .tb-btn {
  width: 36px; height: 36px;
  border-radius: 4px;
  border: 0;
  background: transparent;
  color: var(--az-muted);
}
body.cwd-admin .ico-btn:hover,
body.cwd-admin .tb-btn:hover {
  background: var(--az-bg);
  color: var(--navy);
}

/* ── Page header — Azia title scale & tracking ──── */
body.cwd-admin .ph-l h2 {
  font-size: 1.5rem;           /* 24px */
  font-weight: 700;
  color: var(--az-headline);
  letter-spacing: -.5px;
  line-height: 1.2;
  margin-bottom: 4px;
}
body.cwd-admin .ph-l p {
  font-size: 13px;
  color: var(--az-text);
  line-height: 1.5;
  margin-bottom: 0;
}
body.cwd-admin .page-hdr {
  margin-bottom: 24px;
  align-items: flex-start;
}

/* ── KPI tiles — Azia number-forward ───────────── */
body.cwd-admin .kpi {
  padding: 20px;
  min-height: 140px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 4px;
}
body.cwd-admin .kpi-head {
  margin-bottom: 6px;
  align-items: center;
}
body.cwd-admin .kpi-icon {
  width: 38px; height: 38px;
  border-radius: 4px;
  display: grid; place-items: center;
  font-size: 16px;
  flex-shrink: 0;
}
body.cwd-admin .kpi-trend {
  font-size: 12px; font-weight: 600;
  padding: 3px 8px;
  border-radius: 999px;
  display: inline-flex; align-items: center; gap: 4px;
  letter-spacing: 0;
}
body.cwd-admin .kpi-val {
  font-size: 28px;
  font-weight: 700;
  color: var(--az-headline);
  letter-spacing: -.5px;
  line-height: 1;
  margin-top: 4px;
}
body.cwd-admin .kpi-lbl {
  font-size: 11px;
  font-weight: 700;
  color: var(--az-muted);
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-top: 6px;
}
body.cwd-admin .kpi-foot {
  font-size: 12px;
  color: var(--az-faint);
  margin-top: 8px;
}
body.cwd-admin .kpi-foot strong { color: var(--az-headline); font-weight: 600; }

/* ── Summary cards — same treatment ───────────── */
body.cwd-admin .sc-val {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--az-headline);
  letter-spacing: -.5px;
}
body.cwd-admin .sc-lbl {
  font-size: 11px;
  font-weight: 700;
  color: var(--az-muted);
  text-transform: uppercase;
  letter-spacing: .5px;
}
body.cwd-admin .sc-badge {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .3px;
  text-transform: uppercase;
}

/* ── Card titles & section headers ───────────── */
body.cwd-admin .card-title,
body.cwd-admin .tf-card-head h3,
body.cwd-admin .sec-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--az-headline);
  letter-spacing: -.2px;
}
body.cwd-admin .tf-card-head {
  padding-bottom: 14px;
  border-bottom: 1px solid var(--az-border);
  margin-bottom: 14px;
}

/* ── Tables — Azia bordered with uppercase tracked headers ── */
body.cwd-admin .tbl {
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
}
body.cwd-admin .tbl thead th {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--az-muted);
  padding: 12px 16px;
  background: #fcfcfd;
  border-top: 1px solid var(--az-border);
  border-bottom: 1px solid var(--az-border);
}
body.cwd-admin .tbl thead th:first-child { border-left: 1px solid var(--az-border); }
body.cwd-admin .tbl thead th:last-child  { border-right: 1px solid var(--az-border); }
body.cwd-admin .tbl tbody td {
  padding: 14px 16px;
  font-size: 13px;
  color: var(--az-text);
  border-bottom: 1px solid var(--az-border);
}
body.cwd-admin .tbl tbody td:first-child { border-left: 1px solid var(--az-border); }
body.cwd-admin .tbl tbody td:last-child  { border-right: 1px solid var(--az-border); }
body.cwd-admin .tbl tbody tr:hover td { background: #fcfcfd; }
body.cwd-admin .td-bold { color: var(--az-headline); font-weight: 600; }

/* ── Status pills — uppercase tracked ────────── */
body.cwd-admin .pill,
body.cwd-admin .status-pill,
body.cwd-admin .badge-status {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .4px;
  text-transform: uppercase;
}

/* ── Buttons — Azia 4px radius, 13px text ───── */
body.cwd-admin .btn,
body.cwd-admin .btn-md {
  border-radius: 4px;
  font-size: 13px;
  font-weight: 600;
  padding: 9px 16px;
  letter-spacing: 0;
}
body.cwd-admin .btn-sm {
  font-size: 12px;
  padding: 7px 13px;
}
body.cwd-admin .btn-xs {
  font-size: 11px;
  padding: 5px 10px;
}
body.cwd-admin .btn-primary {
  background: var(--navy);
  color: #fff;
  border: 1px solid var(--navy);
}
body.cwd-admin .btn-primary:hover {
  background: var(--navy-2);
  border-color: var(--navy-2);
}
body.cwd-admin .btn-secondary {
  background: #fff;
  color: var(--navy);
  border: 1px solid var(--az-border-strong);
}
body.cwd-admin .btn-secondary:hover {
  background: var(--az-bg);
  border-color: var(--navy);
}

/* ── Tab nav (Azia underline pattern) ──────── */
body.cwd-admin .tabs,
body.cwd-admin .nav-tabs {
  display: flex;
  border-bottom: 1px solid var(--az-border);
  margin-bottom: 18px;
  gap: 0;
  background: transparent;
  padding: 0;
}
body.cwd-admin .tab-btn,
body.cwd-admin .nav-tabs .nav-link {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .5px;
  padding: 10px 16px;
  color: var(--az-muted);
  background: transparent !important;
  border: 0;
  position: relative;
  border-radius: 0;
}
body.cwd-admin .tab-btn:hover,
body.cwd-admin .nav-tabs .nav-link:hover { color: var(--navy); }
body.cwd-admin .tab-btn.active,
body.cwd-admin .nav-tabs .nav-link.active {
  color: var(--navy) !important;
  font-weight: 700;
  background: transparent !important;
}
body.cwd-admin .tab-btn.active::after,
body.cwd-admin .nav-tabs .nav-link.active::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: var(--teal);
}

/* ── Form fields — Azia chrome ──────────────── */
body.cwd-admin .inp,
body.cwd-admin .sel,
body.cwd-admin .ta,
body.cwd-admin input[type="text"],
body.cwd-admin input[type="email"],
body.cwd-admin input[type="password"],
body.cwd-admin input[type="number"],
body.cwd-admin input[type="date"],
body.cwd-admin select,
body.cwd-admin textarea {
  height: 38px;
  border: 1px solid var(--az-border-strong);
  border-radius: 4px;
  padding: 8px 12px;
  font-size: 13px;
  line-height: 1.5;
  background: #fff;
  color: var(--az-headline);
  transition: border-color .15s, box-shadow .15s;
}
body.cwd-admin textarea,
body.cwd-admin .ta { height: auto; min-height: 80px; resize: vertical; }
body.cwd-admin .inp:focus,
body.cwd-admin .sel:focus,
body.cwd-admin .ta:focus,
body.cwd-admin input:focus,
body.cwd-admin select:focus,
body.cwd-admin textarea:focus {
  outline: 0;
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(53,64,91,.12);
}
body.cwd-admin .field label,
body.cwd-admin label {
  font-size: 12px;
  font-weight: 600;
  color: var(--az-muted);
  text-transform: none;
  letter-spacing: 0;
  margin-bottom: 6px;
  display: inline-block;
}
body.cwd-admin .field .hint { font-size: 11.5px; color: var(--az-faint); }

/* ── Empty state ──────────────────────────── */
body.cwd-admin .empty-state h4 {
  font-size: 16px;
  font-weight: 700;
  color: var(--az-headline);
  letter-spacing: -.2px;
}
body.cwd-admin .empty-state p { font-size: 13px; color: var(--az-text); }
body.cwd-admin .empty-state .ico,
body.cwd-admin .empty-state i {
  color: var(--az-border-strong);
}

/* ── Callouts / alerts ────────────────────── */
body.cwd-admin .callout {
  border-radius: 4px;
  font-size: 13px;
  padding: 12px 14px;
}

/* ── Sidebar tweaks (preserve cwdpro shape, lighten tone) ─ */
body.cwd-admin .sidebar { border-right: 1px solid var(--az-border); }
body.cwd-admin .sb-logo { border-bottom: 1px solid var(--az-border); }
body.cwd-admin .sb-user { border-top: 1px solid var(--az-border); }
body.cwd-admin .sb-group {
  font-size: 11px;
  font-weight: 700;
  color: var(--az-faint);
  letter-spacing: .04em;
}
body.cwd-admin .sb-uname { color: var(--az-headline); }
body.cwd-admin .sb-urole { color: var(--az-faint); }

/* ── Page content padding — Azia rhythm ─── */
body.cwd-admin .page-content { padding: 24px 32px; }

/* ── Section spacing ───────────────────── */
body.cwd-admin .mb-lg { margin-bottom: 20px; }
body.cwd-admin .mb-md { margin-bottom: 14px; }

/* ── Timeline panel re-skin to Azia card chrome ─ */
body.cwd-admin .tgw-tl {
  padding: 20px;
}
body.cwd-admin .tgw-tl-head { margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--az-border); }
body.cwd-admin .tgw-tl-head h2 {
  font-size: 14px;
  font-weight: 700;
  color: var(--az-headline);
  letter-spacing: -.2px;
}
body.cwd-admin .tgw-tl-head p { font-size: 12px; color: var(--az-text); }
body.cwd-admin .tgw-tl-count {
  background: linear-gradient(135deg, var(--navy), var(--teal));
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .3px;
  padding: 4px 10px;
}
body.cwd-admin .tgw-tl-row {
  background: linear-gradient(180deg, #fafbfc 0%, #fff 100%);
}
body.cwd-admin .tgw-tl-title {
  font-size: 15px;
  color: var(--az-headline);
  letter-spacing: -.2px;
}
body.cwd-admin .tgw-tl-sub { font-size: 12px; color: var(--az-muted); }
body.cwd-admin .tgw-tl-label {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .3px;
  color: var(--az-muted);
}
body.cwd-admin .tgw-tl-stage.done .tgw-tl-label { color: var(--green); }
body.cwd-admin .tgw-tl-stage.is-done .tgw-tl-label { color: var(--green); }
body.cwd-admin .tgw-tl-stage.active .tgw-tl-label,
body.cwd-admin .tgw-tl-stage.is-active .tgw-tl-label { color: var(--navy); }
body.cwd-admin .tgw-tl-stamp { font-size: 11px; color: var(--az-faint); }
body.cwd-admin .tgw-tl-pct {
  font-size: 12px; font-weight: 700;
  border: 1.5px solid var(--navy);
  padding: 4px 10px;
}
body.cwd-admin .tgw-tl-elapsed {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .3px;
  color: var(--az-faint);
}

/* ── Filter chips — Azia tone ─────────────── */
body.cwd-admin .chip,
body.cwd-admin .filter-chip {
  font-size: 12px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 4px;
  border: 1px solid var(--az-border-strong);
  background: #fff;
  color: var(--az-muted);
}
body.cwd-admin .chip.active,
body.cwd-admin .filter-chip.active,
body.cwd-admin .chip[aria-selected="true"] {
  background: var(--navy);
  color: #fff;
  border-color: var(--navy);
}

/* ── Profile dropdown / sidebar version ───── */
body.cwd-admin .sb-version { font-size: 10.5px; color: var(--az-faint); }

/* ═══════════════════════════════════════════════════════════════
   AZIA TYPOGRAPHY ADOPTION — full scale, weight, tracking, color
   - Keeps Inter system stack (better legibility at small sizes)
   - Adopts Azia's letter-spacing, weight, and color conventions
   - Defines a clean heading scale + utility text classes
   ═══════════════════════════════════════════════════════════════ */

/* ── Tokens ──────────────────────────────────────── */
:root {
  --az-headline:      #35405B;
  --az-headline-2:    #1c273c;
  --az-text:          #425072;
  --az-muted:         #7987a1;
  --az-faint:         #97a3b9;
}

/* ── Base body — Azia rhythm ───────────────────── */
body.cwd-admin {
  font-family: -apple-system, "Inter", "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  line-height: 1.6;
  color: var(--az-text);
  font-feature-settings: "ss01" on, "cv11" on;   /* Inter humanist forms */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Heading scale — Azia convention ───────────── */
body.cwd-admin h1, body.cwd-admin .h1 {
  font-size: 32px;
  font-weight: 500;
  letter-spacing: -1px;
  line-height: 1.1;
  color: var(--az-headline-2);
  margin-bottom: 8px;
}
body.cwd-admin h2, body.cwd-admin .h2 {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -.5px;
  line-height: 1.2;
  color: var(--az-headline);
  margin-bottom: 6px;
}
body.cwd-admin h3, body.cwd-admin .h3 {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -.3px;
  line-height: 1.3;
  color: var(--az-headline);
  margin-bottom: 4px;
}
body.cwd-admin h4, body.cwd-admin .h4 {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -.2px;
  line-height: 1.35;
  color: var(--az-headline);
  margin-bottom: 4px;
}
body.cwd-admin h5, body.cwd-admin .h5 {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.4;
  color: var(--az-headline);
}
body.cwd-admin h6, body.cwd-admin .h6 {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .3px;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--az-headline);
}

/* ── Paragraph & lead ─────────────────────────── */
body.cwd-admin p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--az-text);
}
body.cwd-admin .lead {
  font-size: 16px;
  line-height: 1.5;
  color: var(--az-text);
  font-weight: 400;
}

/* ── Small / muted / faint utility ─────────── */
body.cwd-admin small,
body.cwd-admin .small,
body.cwd-admin .text-sm    { font-size: 12.5px; }
body.cwd-admin .text-xs    { font-size: 11px; }
body.cwd-admin .text-muted { color: var(--az-muted); }
body.cwd-admin .text-faint { color: var(--az-faint); }
body.cwd-admin .text-strong { color: var(--az-headline); }
body.cwd-admin .text-up {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--az-muted);
}

/* ── Page title — already in Azia v2, keep tightened ─ */
body.cwd-admin .ph-l h2 {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -.7px;
  line-height: 1.2;
  color: var(--az-headline);
  margin-bottom: 4px;
}
body.cwd-admin .ph-l p {
  font-size: 13px;
  line-height: 1.5;
  color: var(--az-text);
  margin-bottom: 0;
}

/* ── KPI numbers — Azia treatment ─────────────── */
body.cwd-admin .kpi-val,
body.cwd-admin .sc-val,
body.cwd-admin .sum-num {
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -1px;
  line-height: 1;
  color: var(--az-headline);
  font-feature-settings: "tnum" on, "lnum" on;     /* tabular numbers */
}
body.cwd-admin .kpi-lbl,
body.cwd-admin .sc-lbl,
body.cwd-admin .sum-key {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--az-muted);
  line-height: 1.2;
  margin-top: 4px;
}
body.cwd-admin .kpi-foot {
  font-size: 12px;
  color: var(--az-faint);
}
body.cwd-admin .kpi-trend {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
}

/* ── Card / section titles ─────────────────── */
body.cwd-admin .card-title,
body.cwd-admin .tf-card-head h3,
body.cwd-admin .sec-title,
body.cwd-admin .tgw-tl-head h2 {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -.2px;
  color: var(--az-headline);
}
body.cwd-admin .tf-card-head p,
body.cwd-admin .tgw-tl-head p {
  font-size: 12px;
  color: var(--az-text);
  line-height: 1.5;
  margin-top: 2px;
}

/* ── Tables — already styled, keep typography honest ─ */
body.cwd-admin .tbl              { font-size: 13px; }
body.cwd-admin .tbl thead th     { font-size: 11px; letter-spacing: .5px; text-transform: uppercase; color: var(--az-muted); }
body.cwd-admin .tbl tbody td     { font-size: 13px; color: var(--az-text); }
body.cwd-admin .td-bold,
body.cwd-admin .td-mono          { color: var(--az-headline); font-weight: 600; }
body.cwd-admin .td-mono          {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Roboto Mono", monospace;
  font-size: 12.5px;
}

/* ── Pills / badges — uppercase tracked ────── */
body.cwd-admin .pill,
body.cwd-admin .status-pill,
body.cwd-admin .badge-status,
body.cwd-admin .sc-badge {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .4px;
  text-transform: uppercase;
}

/* ── Buttons — Azia rhythm ────────────────── */
body.cwd-admin .btn,
body.cwd-admin .btn-md { font-size: 13px; font-weight: 600; letter-spacing: 0; }
body.cwd-admin .btn-sm { font-size: 12px; }
body.cwd-admin .btn-xs { font-size: 11px; }

/* ── Tabs — Azia uppercase tracked ───────── */
body.cwd-admin .tab-btn,
body.cwd-admin .nav-tabs .nav-link,
body.cwd-admin .tabs a {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .5px;
}

/* ── Forms ──────────────────────────────── */
body.cwd-admin .inp,
body.cwd-admin .sel,
body.cwd-admin .ta,
body.cwd-admin input,
body.cwd-admin select,
body.cwd-admin textarea {
  font-size: 13px;
  font-weight: 400;
  color: var(--az-headline);
}
body.cwd-admin .field label,
body.cwd-admin label {
  font-size: 12px;
  font-weight: 600;
  color: var(--az-muted);
  letter-spacing: 0;
  text-transform: none;
}
body.cwd-admin .field .hint   { font-size: 11.5px; color: var(--az-faint); }
body.cwd-admin .filter-label  { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--az-muted); }

/* ── Sidebar ──────────────────────────────── */
body.cwd-admin .nav-item       { font-size: 14px; font-weight: 500; letter-spacing: 0; }
body.cwd-admin .nav-item.active { font-weight: 600; }
body.cwd-admin .sb-group       { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--az-faint); }
body.cwd-admin .sb-uname       { font-size: 14px; font-weight: 600; color: var(--az-headline); }
body.cwd-admin .sb-urole       { font-size: 11.5px; color: var(--az-faint); }
body.cwd-admin .logo-text      { font-size: 16px; font-weight: 700; letter-spacing: -.5px; color: var(--az-headline); }
body.cwd-admin .sb-version     { font-size: 10.5px; color: var(--az-faint); }

/* ── Topbar ───────────────────────────────── */
body.cwd-admin .tb-title  { font-size: 14px; font-weight: 600; color: var(--az-headline); }
body.cwd-admin .tb-sub    { font-size: 12px; color: var(--az-muted); }

/* ── Timeline panel typography ───────────── */
body.cwd-admin .tgw-tl-title {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.2px;
  color: var(--az-headline);
}
body.cwd-admin .tgw-tl-sub      { font-size: 12px; color: var(--az-muted); }
body.cwd-admin .tgw-tl-label    { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; color: var(--az-muted); }
body.cwd-admin .tgw-tl-stamp    { font-size: 11px; color: var(--az-faint); }
body.cwd-admin .tgw-tl-pct      { font-size: 12px; font-weight: 700; }
body.cwd-admin .tgw-tl-elapsed  { font-size: 11px; text-transform: uppercase; letter-spacing: .3px; color: var(--az-faint); }

/* ── Anchor link tone ───────────────────── */
body.cwd-admin a              { color: var(--navy); }
body.cwd-admin a:hover        { color: var(--teal); }
body.cwd-admin .breadcrumb    { font-size: 12px; color: var(--az-muted); }
body.cwd-admin .breadcrumb a  { color: var(--navy); font-weight: 600; }

/* ── Empty state ────────────────────────── */
body.cwd-admin .empty-state h4 {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.2px;
  color: var(--az-headline);
}
body.cwd-admin .empty-state p {
  font-size: 13px;
  color: var(--az-text);
}

/* ── Force inheritance for buttons / inputs ─ */
body.cwd-admin button,
body.cwd-admin input,
body.cwd-admin select,
body.cwd-admin textarea {
  font-family: inherit;
}

/* ═══════════════════════════════════════════════════════════════
   AZIA CARD + PILL — final pieces for donor donations restyle
   ═══════════════════════════════════════════════════════════════ */

/* ── Card chrome ─────────────────────────────────── */
body.cwd-admin .az-card {
  background: #fff;
  border: 1px solid var(--az-border);
  border-radius: 4px;
  margin-bottom: 16px;
  overflow: hidden;
}
body.cwd-admin .az-card-hd {
  padding: 18px 20px 16px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  border-bottom: 1px solid var(--az-border);
}
body.cwd-admin .az-card-hd h3 {
  font-size: 14px;
  font-weight: 700;
  color: var(--az-headline);
  letter-spacing: -.2px;
  margin: 0 0 2px;
}
body.cwd-admin .az-card-hd p {
  font-size: 12px;
  color: var(--az-text);
  margin: 0;
}
body.cwd-admin .az-card-body { padding: 0; }   /* table fills edge-to-edge */
body.cwd-admin .az-card-body.has-padding { padding: 20px; }

/* ── Filter toggle (Day/Week/Month / All/Paid/Pending) ── */
body.cwd-admin .az-toggle {
  display: inline-flex;
  border: 1px solid var(--az-border);
  border-radius: 4px;
  overflow: hidden;
  flex-shrink: 0;
}
body.cwd-admin .az-toggle a,
body.cwd-admin .az-toggle button {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .3px;
  text-transform: uppercase;
  padding: 6px 14px;
  background: #fff;
  color: var(--az-muted);
  border: none;
  border-right: 1px solid var(--az-border);
  cursor: pointer;
  text-decoration: none;
  transition: all .15s;
}
body.cwd-admin .az-toggle a:last-child,
body.cwd-admin .az-toggle button:last-child { border-right: 0; }
body.cwd-admin .az-toggle a:hover,
body.cwd-admin .az-toggle button:hover { color: var(--navy); background: var(--az-bg); }
body.cwd-admin .az-toggle a.active,
body.cwd-admin .az-toggle button.active,
body.cwd-admin .az-toggle a[aria-selected="true"] {
  background: var(--navy);
  color: #fff;
}

/* ── Pills (Azia uppercase tracked) ─────────────── */
body.cwd-admin .az-pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .4px;
  text-transform: uppercase;
  white-space: nowrap;
}
body.cwd-admin .az-pill.green { background: #d8efcc; color: #2d7a05; }
body.cwd-admin .az-pill.amber { background: #fff3cd; color: #92591a; }
body.cwd-admin .az-pill.red   { background: #f8d7da; color: #a01828; }
body.cwd-admin .az-pill.navy  { background: var(--p100); color: var(--navy); }
body.cwd-admin .az-pill.grey  { background: var(--az-bg); color: var(--az-muted); }

/* ── Outline button (for share) ─────────────────── */
body.cwd-admin .btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .3px;
  text-transform: uppercase;
  background: #fff;
  color: var(--navy);
  border: 1px solid var(--az-border-strong);
  border-radius: 4px;
  cursor: pointer;
  transition: all .15s;
  text-decoration: none;
}
body.cwd-admin .btn-outline:hover {
  background: var(--p50);
  border-color: var(--navy);
  color: var(--navy);
}
body.cwd-admin .btn-outline .material-symbols-outlined { font-size: 14px; }

/* ── Hyperlink in table cell ─────────────────── */
body.cwd-admin .tbl a.link-view,
body.cwd-admin a.link-view {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .3px;
  text-transform: uppercase;
  color: var(--navy);
}
body.cwd-admin .tbl a.link-view:hover,
body.cwd-admin a.link-view:hover { color: var(--teal); text-decoration: none; }

/* ── Make table fill az-card edge-to-edge cleanly ── */
body.cwd-admin .az-card .tbl {
  margin: 0;
  border-collapse: collapse;
}
body.cwd-admin .az-card .tbl thead th {
  border-top: 0;       /* card border replaces top */
  border-left: 0;
  border-right: 0;
}
body.cwd-admin .az-card .tbl tbody td {
  border-left: 0;
  border-right: 0;
}
body.cwd-admin .az-card .tbl tbody tr:last-child td {
  border-bottom: 0;
}

/* ═══════════════════════════════════════════════════════════════
   AZIA LISTS / PROGRESS / CALLOUT — for cwdpro dashboard sections
   ═══════════════════════════════════════════════════════════════ */

/* ── Card header right-side link ("Browse all →") ── */
body.cwd-admin .az-card-link {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: var(--navy);
  text-decoration: none;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
body.cwd-admin .az-card-link:hover { color: var(--teal); text-decoration: none; }
body.cwd-admin .az-card-link .material-symbols-outlined { font-size: 14px; }

/* ── Callout (Action Required style) ─────────── */
body.cwd-admin .az-callout {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-radius: 4px;
  border-left: 3px solid var(--navy);
  background: #fff;
  border-top: 1px solid var(--az-border);
  border-right: 1px solid var(--az-border);
  border-bottom: 1px solid var(--az-border);
  margin-bottom: 16px;
}
body.cwd-admin .az-callout.amber { border-left-color: #d97706; background: #fffbeb; }
body.cwd-admin .az-callout.red   { border-left-color: var(--red);     background: var(--red-bg); }
body.cwd-admin .az-callout.green { border-left-color: var(--green);   background: #f0fdf4; }
body.cwd-admin .az-callout .ico {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: rgba(0,0,0,.04);
  display: grid; place-items: center;
  flex-shrink: 0;
}
body.cwd-admin .az-callout.amber .ico { background: rgba(217,119,6,.12); color: #92591a; }
body.cwd-admin .az-callout.red   .ico { background: rgba(220,53,69,.12); color: #a01828; }
body.cwd-admin .az-callout.green .ico { background: rgba(59,176,1,.12);  color: #2d7a05; }
body.cwd-admin .az-callout .ico .material-symbols-outlined { font-size: 18px; }
body.cwd-admin .az-callout .body { flex: 1; }
body.cwd-admin .az-callout .title {
  font-size: 13px;
  font-weight: 700;
  color: var(--az-headline);
  letter-spacing: -.1px;
  margin-bottom: 2px;
}
body.cwd-admin .az-callout .msg { font-size: 12.5px; color: var(--az-text); line-height: 1.5; }

/* ── Clean list ──────────────────────────────── */
body.cwd-admin .az-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
body.cwd-admin .az-list li {
  padding: 14px 0;
  border-bottom: 1px solid var(--az-border);
}
body.cwd-admin .az-list li:first-child { padding-top: 0; }
body.cwd-admin .az-list li:last-child { border-bottom: 0; padding-bottom: 0; }
body.cwd-admin .az-list-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  text-decoration: none;
  color: inherit;
}
body.cwd-admin .az-list-item .body { flex: 1; min-width: 0; }
body.cwd-admin .az-list-item .title {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--az-headline);
  letter-spacing: -.1px;
  line-height: 1.35;
  margin-bottom: 2px;
  display: block;
}
body.cwd-admin .az-list-item .sub {
  font-size: 12px;
  color: var(--az-muted);
  line-height: 1.4;
}
body.cwd-admin .az-list-item .meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 6px;
  font-size: 11.5px;
}
body.cwd-admin .az-list-item .meta-row .left  { color: var(--az-text); }
body.cwd-admin .az-list-item .meta-row .right { color: var(--az-headline); font-weight: 700; }
body.cwd-admin .az-list-item .stamp {
  font-size: 11px;
  color: var(--az-faint);
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: .3px;
}
body.cwd-admin .az-list a.az-list-item:hover .title { color: var(--teal); }

/* Notification-style icon bubble (left of item) */
body.cwd-admin .az-list-item .ico {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--p50);
  color: var(--navy);
  display: grid; place-items: center;
  flex-shrink: 0;
  margin-top: 2px;
}
body.cwd-admin .az-list-item .ico .material-symbols-outlined { font-size: 16px; }
body.cwd-admin .az-list-item .unread-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--red);
  margin-top: 8px;
  flex-shrink: 0;
}

/* ── Progress bar ───────────────────────────── */
body.cwd-admin .az-progress {
  width: 100%;
  height: 6px;
  background: var(--az-bg);
  border-radius: 99px;
  overflow: hidden;
  margin-top: 6px;
}
body.cwd-admin .az-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--navy), var(--teal));
  border-radius: 99px;
  transition: width .4s ease;
}

/* ── Inline empty state inside az-card ──────── */
body.cwd-admin .az-empty {
  text-align: center;
  padding: 24px 16px;
}
body.cwd-admin .az-empty .ico {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--az-bg);
  color: var(--az-muted);
  margin: 0 auto 12px;
  display: grid; place-items: center;
}
body.cwd-admin .az-empty .ico .material-symbols-outlined { font-size: 26px; }
body.cwd-admin .az-empty h4 { font-size: 14px; color: var(--az-headline); font-weight: 700; margin-bottom: 4px; }
body.cwd-admin .az-empty p  { font-size: 12.5px; color: var(--az-text); }

/* ── 2-column grid utility ──────────────── */
body.cwd-admin .az-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 900px) {
  body.cwd-admin .az-grid-2 { grid-template-columns: 1fr; }
}

/* ── KPI card markup (helper output) — Azia retarget ── */
body.cwd-admin .kpi {
  background: #fff;
  border: 1px solid var(--az-border);
  border-radius: 4px;
  padding: 20px;
  display: flex !important;
  flex-direction: column;
  min-height: 130px;
  gap: 4px;
}
body.cwd-admin .kpi-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
body.cwd-admin .kpi-icon {
  width: 36px; height: 36px;
  border-radius: 4px;
  display: grid; place-items: center;
  font-size: 16px;
  flex-shrink: 0;
}
body.cwd-admin .kpi-icon-green { background: #d8efcc; color: #2d7a05; }
body.cwd-admin .kpi-icon-navy  { background: var(--p100); color: var(--navy); }
body.cwd-admin .kpi-icon-teal  { background: var(--p50); color: var(--teal); }
body.cwd-admin .kpi-icon-amber { background: #fff3cd; color: #92591a; }

/* ═══════════════════════════════════════════════════════════════
   SIDEBAR — hairline divider after each nav item (edge-to-edge)
   ═══════════════════════════════════════════════════════════════ */

/* Drop horizontal margin so divider can span full sidebar width */
body.cwd-admin .sb-body .nav-item,
body.cwd-admin .sb-body .nav-acc-header {
  margin-left: 0;
  margin-right: 0;
  border-radius: 0;
  padding-left: 22px;
  padding-right: 22px;
  border-bottom: 1px solid var(--az-border);
}

/* Group heading also gets a tighter divider treatment — no border-bottom */
body.cwd-admin .sb-body .sb-group {
  border-bottom: 1px solid var(--az-border);
  background: #fcfcfd;
}

/* Last nav-item before user footer keeps its divider */
body.cwd-admin .sb-body > .nav-item:last-of-type {
  border-bottom: 1px solid var(--az-border);
}

/* Active state: keep left-strip but make sure divider remains visible */
body.cwd-admin .sb-body .nav-item.active {
  background: var(--p50);
  border-bottom-color: var(--az-border);
}

/* Restore the 3px teal active strip at the very left edge of the item */
body.cwd-admin .sb-body .nav-item.active::before {
  left: 0;                  /* flush against sidebar edge */
  top: 0;
  bottom: 0;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--teal);
}

/* Hover state — full-width tint */
body.cwd-admin .sb-body .nav-item:hover {
  background: var(--p50);
}

/* If sidebar is in mini (collapsed) mode, hide dividers (cleaner) */
body.cwd-admin .sidebar.mini .nav-item { border-bottom: 0; }

/* ── Quick shortcut tiles (school dashboard) ─────── */
body.cwd-admin .az-shortcut-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
}
body.cwd-admin .az-shortcut {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 8px;
  padding: 18px 12px;
  min-height: 100px;
  border: 1px solid var(--az-border);
  border-radius: 4px;
  background: #fff;
  text-decoration: none;
  color: var(--az-headline);
  transition: all .2s ease;
}
body.cwd-admin .az-shortcut:hover {
  border-color: var(--teal);
  background: var(--p50);
  transform: translateY(-1px);
}
body.cwd-admin .az-shortcut .ico {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--p50);
  color: var(--navy);
  display: grid; place-items: center;
  transition: all .2s;
}
body.cwd-admin .az-shortcut:hover .ico {
  background: linear-gradient(135deg, var(--navy), var(--teal));
  color: #fff;
}
body.cwd-admin .az-shortcut .ico .material-symbols-outlined { font-size: 22px; }
body.cwd-admin .az-shortcut .lbl {
  font-size: 12px;
  font-weight: 600;
  color: var(--az-text);
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: .3px;
}
body.cwd-admin .az-shortcut:hover .lbl { color: var(--az-headline); }

/* GLOBAL: no hover-underlines anywhere (matches styles.css). */
*:hover, a:hover, a:focus, button:hover, button:focus,
.hover\:underline:hover { text-decoration: none !important; }