/* ------------------------------------------------------------------
   Chandramauli Trust MIS — design tokens ported from the prototype's
   Tailwind classes to plain CSS, so the server needs no build step.
   ------------------------------------------------------------------ */

:root{
  --bg:#f7efe0;
  --ink:#2c1a0e;
  --muted:#6b5134;
  --faint:#7d6244;
  --line:#e6d8ba;
  --card-line:#efe2c9;
  --divider:#f6efdd;
  --border-soft:#f0e2c4;

  --gold:#e2a63c;
  --gold-dk:#d0951f;
  --gold-soft:#f6e6c3;
  --gold-text:#7a5313;
  --gold-mid:#a1651a;
  --brown:#8a4a24;
  --avatar:#7a4a26;

  --cream:#faf3e6;
  --cream-text:#f3e6cc;
  --warm:#e6d3ae;
  --dim:#c9ab7e;

  --dark-1:#3a2114;
  --dark-2:#1c1008;
  --dark-3:#4a2814;

  --ok:#276a35;
  --ok-bg:#dcefdd;
  --bad:#a13a2f;
  --bad-bg:#fbe8e4;
  --bad-line:#e6c9c0;

  --serif:Georgia,"Times New Roman",serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;

  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:20px;
  --shadow:0 1px 2px rgba(60,30,10,.06);
}

*,*::before,*::after{box-sizing:border-box}
/* Must beat the display rules below, or [hidden] modals render open. */
[hidden]{display:none!important}

/* Keyboard focus.
   Only :focus-visible, so a mouse click does not leave a ring behind but
   tabbing always shows where you are. Gold reads against both the cream
   pages and the dark sidebar, so one rule covers the whole interface —
   previously buttons and links fell back to the browser's own ring, which
   on the dark panel is close to invisible. */
:where(a, button, select, summary, [tabindex]):focus-visible,
input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  border-radius: 4px;
}
.sidebar :where(a, button):focus-visible { outline-offset: -2px; }
html,body{height:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  /* No -webkit-font-smoothing here on purpose. `antialiased` switches off
     subpixel rendering, which on Windows makes every character noticeably
     lighter — it thins the whole interface for no gain. */
  font:15px/1.55 var(--sans);
}
h1,h2,h3,h4{font-family:var(--serif);font-weight:600;margin:0}

/* Figures.
   Georgia sets old-style numerals: the digits vary in height and 3, 4, 5, 7
   and 9 drop below the baseline, so a row of money bounces. Amounts are set
   in the sans face with lining, tabular figures instead — uniform height,
   uniform width, so columns line up and totals can be compared down a
   table. Headings stay serif; only the numbers change. */
.num, .stat .value, table.data td.right, table.data th.right {
  font-family:var(--sans);
  font-variant-numeric:tabular-nums lining-nums;
  font-feature-settings:"tnum" 1,"lnum" 1;
}
a{color:var(--gold-text)}
table{border-collapse:collapse;width:100%}

.serif{font-family:var(--serif)}
.muted{color:var(--muted)}
.faint{color:var(--faint)}
.small{font-size:13px}
.tiny{font-size:12px}
.right{text-align:right}
.center{text-align:center}
.nowrap{white-space:nowrap}
.mt-0{margin-top:0}.mt-1{margin-top:8px}.mt-2{margin-top:16px}.mt-3{margin-top:24px}
.mb-0{margin-bottom:0}.mb-1{margin-bottom:8px}.mb-2{margin-bottom:16px}.mb-3{margin-bottom:24px}
.hide{display:none}

/* --------------------------- app shell --------------------------- */

.app{display:flex;min-height:100vh}

.sidebar{
  width:256px;flex-shrink:0;display:flex;flex-direction:column;
  background:linear-gradient(to bottom,var(--dark-1),var(--dark-2));
  color:var(--warm);position:sticky;top:0;height:100vh;
}
.sidebar-head{
  padding:24px;display:flex;align-items:center;gap:12px;
  border-bottom:1px solid rgba(90,58,34,.5);
}
.sidebar-nav{flex:1;padding:16px 12px;overflow-y:auto}
.sidebar-foot{padding:16px;border-top:1px solid rgba(90,58,34,.5)}

.navlink{
  width:100%;display:flex;align-items:center;gap:12px;
  padding:10px 14px;border-radius:var(--r-md);font-size:14px;
  color:var(--warm);background:none;border:0;cursor:pointer;
  text-align:left;text-decoration:none;margin-bottom:4px;
  transition:background .15s,color .15s;
}
.navlink:hover{background:#4a2f1c;color:#fff}
.navlink.active{background:var(--gold);color:var(--ink);font-weight:600}
.nav-heading{
  /* Lighter than the body muted tone: this sits on the dark sidebar, where
     #8a6a44 measured 3.0:1 and was unreadable. */
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:#b08d5f;
  font-weight:600;padding:14px 14px 5px;
}
.navlink.disabled{opacity:.42;cursor:default}
.navlink.disabled:hover{background:none;color:var(--warm)}
.soon{
  margin-left:auto;font-size:9px;letter-spacing:.1em;text-transform:uppercase;
  border:1px solid rgba(226,166,60,.35);color:var(--gold);border-radius:999px;padding:1px 6px;
}

.mark{
  border-radius:999px;background:var(--gold);color:var(--ink);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);flex-shrink:0;
}
.mark-lg{width:44px;height:44px;font-size:18px}
.mark-md{width:40px;height:40px;font-size:16px}
.mark-sm{width:36px;height:36px;font-size:14px}

/* The full name reads down the three lines: International / Chandramauli /
   Charitable Trust. It is stacked rather than set on one line because the
   sidebar is 256px wide and the whole name on one line would either wrap
   badly or shrink past reading size. */
.brand-pre{font-size:9px;letter-spacing:.2em;color:var(--gold);line-height:1.3}
.brand-name{font-family:var(--serif);font-size:18px;line-height:1.15;color:var(--cream-text)}
.brand-sub{font-size:9px;letter-spacing:.2em;color:var(--gold);line-height:1.3}

.main{flex:1;min-width:0;padding:24px;overflow-x:hidden}
@media(min-width:768px){.main{padding:32px}}

/* ------------------------ the shell on a phone ---------------------- */
/* Below this width the sidebar stops being a column and becomes a header:
   the mark and sign-out on one row, the navigation scrolling horizontally
   beneath it. Without this the sidebar kept its fixed 256px and left the
   content 119px wide on a 375px screen — unusable, and staff marking
   attendance or taking a cash donation are exactly the people on a phone. */
@media(max-width:899px){
  .app{flex-direction:column}

  .sidebar{
    position:sticky;top:0;z-index:30;
    width:100%;height:auto;
  }
  .sidebar-head{
    padding:10px 16px;border-bottom:1px solid rgba(90,58,34,.5);
  }
  .sidebar-nav{
    flex:none;display:flex;flex-direction:row;gap:6px;
    padding:8px 12px;overflow-x:auto;overflow-y:hidden;
    -webkit-overflow-scrolling:touch;scrollbar-width:thin;
  }
  .navlink{
    width:auto;flex-shrink:0;white-space:nowrap;margin:0;padding:8px 14px;
  }
  .nav-heading{
    display:flex;align-items:center;flex-shrink:0;
    padding:0 4px 0 10px;margin:0;border-left:1px solid rgba(90,58,34,.6);
  }
  /* Sign-out sits top right, beside the mark, rather than below the nav. */
  .sidebar-foot{
    position:absolute;top:10px;right:14px;
    padding:0;border-top:0;display:flex;align-items:center;gap:10px;
  }
  .sidebar-foot > div{display:none}
  .sidebar-foot .navlink{padding:8px 12px;background:rgba(226,166,60,.14)}

  .main{padding:16px}
  .page-head{margin-bottom:16px}
  .page-head h1{font-size:21px}

  /* Side columns stack rather than squeeze. */
  .grid.g-side,.grid.g-side-wide,.grid.g2,.grid.g3,.grid.g4{
    grid-template-columns:minmax(0,1fr);
  }
  .modal{max-height:92vh}
  .alloc-row{grid-template-columns:1fr 92px 100px;gap:8px}
  .acct-grid{grid-template-columns:minmax(0,1fr)}
}

/* ----------------------------- header ---------------------------- */

.page-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px;gap:16px;flex-wrap:wrap}
.page-head h1{font-size:24px;line-height:1.2}
.page-head .sub{font-size:13px;color:var(--muted)}
.head-left{display:flex;align-items:center;gap:12px}
.head-right{display:flex;align-items:center;gap:12px}

.avatar{
  width:36px;height:36px;border-radius:999px;background:var(--avatar);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;flex-shrink:0;
}
.avatar-lg{width:40px;height:40px}

/* ----------------------------- cards ----------------------------- */

.card{
  background:#fff;border:1px solid var(--card-line);border-radius:var(--r-lg);
  box-shadow:var(--shadow);
}
.card-p{padding:20px}
.card-p-lg{padding:24px}
.card.clickable{cursor:pointer;transition:border-color .15s}
.card.clickable:hover{border-color:var(--gold)}

.eyebrow{font-size:11px;letter-spacing:.14em;font-weight:600;color:var(--faint);margin-bottom:4px;text-transform:uppercase}
.card-title{font-family:var(--serif);font-size:18px;color:var(--ink);margin-bottom:16px}

.hero{
  border-radius:var(--r-lg);padding:32px;margin-bottom:24px;position:relative;overflow:hidden;
  background:linear-gradient(to bottom right,var(--dark-1),var(--dark-2));color:var(--cream-text);
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.hero h2{font-size:26px;margin-bottom:8px}
.hero p{font-size:14px;color:var(--dim);margin:0 0 20px}
.hero .tag{font-size:10px;letter-spacing:.2em;color:var(--gold);margin-bottom:8px}
.hero-ring{
  width:128px;height:128px;border-radius:999px;border:2px solid rgba(226,166,60,.5);
  display:none;align-items:center;justify-content:center;font-size:40px;flex-shrink:0;
}
@media(min-width:768px){.hero-ring{display:flex}}

/* ----------------------------- grids ----------------------------- */

.grid{display:grid;gap:16px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g-side{grid-template-columns:minmax(0,1fr) 320px}
.g-side-wide{grid-template-columns:minmax(0,1fr) 360px}
@media(max-width:1023px){.g-side,.g-side-wide{grid-template-columns:minmax(0,1fr)}}
/* The Data Entry form: six tracks, so an ordinary field takes half the row
   and a field in a three-field section (Bank details) takes a third. */
.form-grid{grid-template-columns:repeat(6,minmax(0,1fr))}
.form-grid > *{grid-column:span 3}
.form-grid > .span-third{grid-column:span 2}
@media(max-width:767px){.form-grid > .span-third{grid-column:span 3}}
@media(max-width:560px){.form-grid > *,.form-grid > .span-third{grid-column:1/-1}}
@media(max-width:767px){.g3,.g4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.g2,.g3,.g4{grid-template-columns:minmax(0,1fr)}}

.stat .label{font-size:13px;color:var(--muted);font-weight:500}
.stat .value{font-size:26px;font-weight:600;letter-spacing:-.015em;color:var(--ink);line-height:1.2}
.stat .sub{font-size:13px;color:var(--faint);margin-top:4px}
.stat-icon{
  width:32px;height:32px;border-radius:var(--r-sm);background:var(--cream);
  display:flex;align-items:center;justify-content:center;color:var(--muted);flex-shrink:0;
}
.row-between{display:flex;align-items:center;justify-content:space-between;gap:12px}

/* ---------------------------- controls --------------------------- */

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:10px 16px;border-radius:var(--r-md);border:0;cursor:pointer;
  background:var(--gold);color:var(--ink);font:600 14px var(--sans);
  text-decoration:none;transition:background .15s;
}
.btn:hover{background:var(--gold-dk)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn-ghost{
  background:#fff;border:1px solid var(--line);color:var(--ink);
}
.btn-ghost:hover{background:var(--cream)}
.btn-onDark{background:transparent;border:1px solid rgba(226,166,60,.4);color:var(--cream-text)}
.btn-onDark:hover{background:rgba(226,166,60,.12)}
.btn-danger{background:#fff;border:1px solid var(--bad-line);color:var(--bad)}
.btn-danger:hover{background:var(--bad-bg)}
.btn-sm{padding:6px 12px;font-size:12px;border-radius:var(--r-sm)}
.btn-block{width:100%}

.field{display:block;margin-bottom:16px}
.field > span{display:block;font-size:13px;color:var(--muted);font-weight:500;margin-bottom:6px}
.input,select.input,textarea.input{
  width:100%;padding:10px 14px;border:1px solid var(--line);border-radius:var(--r-md);
  font:14px var(--sans);color:var(--ink);background:#fff;
}
textarea.input{resize:vertical;min-height:80px}
.input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 2px rgba(226,166,60,.4)}
.check{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--ink);margin-bottom:8px;cursor:pointer}
.check input{width:auto;margin:0;accent-color:var(--gold)}

.icon-btn{
  width:32px;height:32px;border-radius:var(--r-sm);border:1px solid var(--line);
  background:#fff;color:var(--muted);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
}
.icon-btn:hover{background:var(--cream)}
.link-btn{background:none;border:0;padding:0;color:var(--gold-text);cursor:pointer;font-size:14px;
  display:inline-flex;align-items:center;gap:4px}
.link-btn:hover{text-decoration:underline}

/* ---------------------------- badges ----------------------------- */

.badge{display:inline-block;font-size:12px;padding:4px 10px;border-radius:999px;font-weight:500}
.badge-gold{background:var(--gold-soft);color:var(--gold-text)}
.badge-green{background:var(--ok-bg);color:var(--ok)}
.badge-grey{background:#f0e9db;color:var(--muted)}
.badge-red{background:var(--bad-bg);color:var(--bad)}

.dot{width:6px;height:6px;border-radius:999px;display:inline-block}
.status-on{color:var(--ok);display:inline-flex;align-items:center;gap:6px;font-size:12px}
.status-off{color:var(--bad);display:inline-flex;align-items:center;gap:6px;font-size:12px}

/* ---------------------------- tables ----------------------------- */

.table-wrap{overflow-x:auto}
table.data{font-size:14px}
table.data td{color:var(--ink)}
/* A key/value row header labels its row; it should not take the uppercase
   treatment that column headers get. */
table.data th[scope="row"],table.data th[scope="row"].small{
  text-transform:none;letter-spacing:0;font-weight:400;font-size:13px;
  border-bottom:1px solid var(--divider);padding:10px 12px 10px 0;
}
table.data th{
  text-align:left;font-size:12px;color:var(--muted);font-weight:600;
  letter-spacing:.03em;text-transform:uppercase;
  padding:0 12px 8px 0;border-bottom:1px solid var(--border-soft);white-space:nowrap;
}
/* A money column's heading has to sit over its figures. The rule above is
   `table.data th`, which outweighs a bare `.right`, so the heading stayed
   left while the cells went right and every numeric column read crooked.
   This needs the same weight as the rule it is correcting. */
table.data th.right,
table.data td.right{text-align:right}
table.data td{padding:10px 12px 10px 0;border-bottom:1px solid var(--divider);vertical-align:top}
table.data tr:last-child td{border-bottom:0}
table.data th:last-child,table.data td:last-child{padding-right:0}
.empty{padding:32px 0;text-align:center;color:var(--faint)}

/* ---------------------------- messages --------------------------- */

.alert{border-radius:var(--r-md);padding:10px 14px;font-size:14px;margin-bottom:16px}
.alert-error{background:var(--bad-bg);color:var(--bad)}
.alert-ok{background:var(--ok-bg);color:var(--ok)}
.alert-info{background:var(--cream);color:var(--muted)}

/* ----------------------------- modal ----------------------------- */

.modal-bg{
  position:fixed;inset:0;z-index:50;background:rgba(28,16,8,.5);
  display:flex;align-items:center;justify-content:center;padding:16px;
}
.modal{
  background:#fff;border-radius:var(--r-lg);box-shadow:0 20px 40px rgba(28,16,8,.25);
  width:100%;max-width:440px;max-height:88vh;overflow-y:auto;
}
.modal.wide{max-width:672px}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:24px 24px 16px}
.modal-head h2,.modal-head .modal-title{font-size:20px;font-family:var(--serif);font-weight:600;margin:0}
.modal-body{padding:0 24px 24px}
.modal-close{background:none;border:0;color:var(--muted);cursor:pointer;padding:4px;line-height:0}
.modal-close:hover{color:var(--ink)}

/* ---------------------------- login ------------------------------ */

.login{min-height:100vh;display:flex;flex-direction:column;background:#fff}
@media(min-width:900px){.login{flex-direction:row}}

.login-art{
  position:relative;overflow:hidden;min-height:260px;padding:40px;
  background:linear-gradient(150deg,var(--dark-3) 0%,var(--dark-2) 70%);color:var(--cream-text);
  display:flex;flex-direction:column;justify-content:space-between;gap:32px;
}
@media(min-width:900px){.login-art{width:50%;padding:56px}}
.login-art-top,.login-art-mid,.login-art-foot{position:relative;z-index:1}
.login-art h1{font-size:30px;line-height:1.22;margin-bottom:18px;color:#fff}
@media(min-width:900px){.login-art h1{font-size:40px}}
.login-art p{font-size:15px;color:var(--warm);line-height:1.75;margin:0;max-width:30rem}
.login-eyebrow{font-size:10px;letter-spacing:.22em;color:var(--gold);margin-bottom:14px}
.login-eyebrow.dark{color:var(--faint);margin-bottom:10px}
.login-art-foot{
  display:flex;align-items:center;gap:16px;font-size:11px;color:#9b7c57;letter-spacing:.04em;
}
.login-rule{flex:1;height:1px;background:rgba(226,166,60,.22)}
.ring{position:absolute;border-radius:999px;border:1px solid rgba(226,166,60,.18)}
.ring-1{right:-110px;bottom:-110px;width:400px;height:400px}
.ring-2{right:-30px;bottom:-30px;width:250px;height:250px;border-color:rgba(226,166,60,.09)}

.login-form-wrap{display:flex;align-items:center;justify-content:center;padding:40px 24px;background:#fff}
@media(min-width:900px){.login-form-wrap{width:50%;padding:56px}}
.login-form{width:100%;max-width:23rem}
.login-form h2{font-size:28px;margin-bottom:4px}
.login-hint{font-size:12px;color:var(--muted);background:var(--cream);border-radius:var(--r-md);
  padding:12px;line-height:1.6;margin-top:16px;text-align:center}

/* Role tabs — radio inputs styled as a segmented control, no JS needed. */
.role-grid{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;background:var(--cream);
}
.role-opt{display:block;margin:0;cursor:pointer}
/* Visually hidden but still focusable and exposed to screen readers —
   zero-size inputs get dropped from the accessibility tree. */
.role-opt input{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;
  overflow:hidden;white-space:nowrap;clip:rect(0 0 0 0);clip-path:inset(50%);
}
.role-tile{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  padding:12px 4px;font-size:11px;color:var(--muted);text-align:center;
  border-right:1px solid var(--line);transition:background .15s,color .15s;height:100%;
}
.role-opt:last-child .role-tile{border-right:0}
.role-opt:hover .role-tile{color:var(--ink)}
.role-opt input:checked + .role-tile{
  background:#fff;color:var(--ink);font-weight:600;
  box-shadow:inset 0 -2px 0 var(--gold);
}
.role-opt input:focus-visible + .role-tile{outline:2px solid var(--gold);outline-offset:-2px}

/* Dark CTA, matching the reference's solid primary button. */
.btn-dark{background:var(--dark-1);color:var(--cream-text)}
.btn-dark:hover{background:var(--dark-2)}

/* --------------------------- attendance --------------------------- */

.mark-grid{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;max-width:340px;
}
.mark-opt{display:block;margin:0;cursor:pointer}
.mark-opt input{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;
  overflow:hidden;white-space:nowrap;clip:rect(0 0 0 0);clip-path:inset(50%);
}
.mark-tile{
  display:block;text-align:center;padding:7px 4px;font-size:12px;border-radius:var(--r-sm);
  border:1px solid var(--line);background:#fff;color:var(--muted);
  transition:background .12s,color .12s,border-color .12s;
}
.mark-opt:hover .mark-tile{border-color:var(--faint)}
.mark-opt input:checked + .m-present{background:var(--ok-bg);border-color:var(--ok);color:var(--ok);font-weight:600}
.mark-opt input:checked + .m-absent {background:var(--bad-bg);border-color:var(--bad);color:var(--bad);font-weight:600}
.mark-opt input:checked + .m-late   {background:var(--gold-soft);border-color:var(--gold);color:var(--gold-text);font-weight:600}
.mark-opt input:checked + .m-excused{background:#f0e9db;border-color:var(--faint);color:var(--muted);font-weight:600}
.mark-opt input:focus-visible + .mark-tile{outline:2px solid var(--gold);outline-offset:1px}

/* ---------------------------- finance ---------------------------- */

/* National / International */
.seg{display:inline-flex;border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden}
.seg-item{
  padding:8px 20px;font-size:13px;font-weight:600;color:var(--muted);
  background:var(--cream);text-decoration:none;border-right:1px solid var(--line);
}
.seg-item:last-child{border-right:0}
.seg-item:hover{color:var(--ink)}
.seg-item.on{background:#fff;color:var(--ink);box-shadow:inset 0 -2px 0 var(--gold)}
.seg-item.seg-empty{opacity:.4;pointer-events:none}

/* Bank / Payment Gateway / Cash */
.chan-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
.chan-head{
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);
  margin-bottom:6px;padding-bottom:4px;border-bottom:1px solid var(--divider);
}

.acct-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:8px}
.acct{
  display:block;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-md);
  background:#fff;text-decoration:none;transition:border-color .12s,background .12s;
}
.acct:hover{border-color:var(--gold)}
.acct.on{border-color:var(--gold);background:var(--cream);box-shadow:inset 0 -2px 0 var(--gold)}
.acct-name{display:block;font-size:13px;font-weight:600;color:var(--ink)}
.acct-meta{display:block;font-size:11px;color:var(--faint);margin-top:2px}
.tag-foreign{
  display:inline-block;font-size:9px;letter-spacing:.08em;text-transform:uppercase;
  background:var(--gold-soft);color:var(--gold-text);border-radius:999px;padding:1px 6px;
}

/* type-ahead suggestions */
.suggest{
  position:absolute;top:100%;left:0;right:0;z-index:20;margin-top:2px;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-md);
  box-shadow:0 8px 20px rgba(60,30,10,.12);max-height:260px;overflow-y:auto;
}
.sg-item{padding:8px 12px;cursor:pointer;font-size:13px;border-bottom:1px solid var(--divider)}
.sg-item:last-child{border-bottom:0}
.sg-item:hover,.sg-item.on{background:var(--cream)}
.sg-meta{display:block;font-size:11px;color:var(--faint);margin-top:1px}

/* allocation panel */
.alloc-row{display:grid;grid-template-columns:1fr 110px 130px;gap:10px;align-items:center;
  padding:7px 0;border-bottom:1px solid var(--divider)}
.alloc-row:last-of-type{border-bottom:0}
.alloc-total{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px 14px;border-radius:var(--r-md);font-size:13px;font-weight:600;margin-top:10px;
}
.alloc-total.ok{background:var(--ok-bg);color:var(--ok)}
.alloc-total.off{background:var(--bad-bg);color:var(--bad)}

.att-pill{
  display:inline-block;font-size:12px;padding:3px 9px;border-radius:999px;font-weight:500;
}
.att-good{background:var(--ok-bg);color:var(--ok)}
.att-mid{background:var(--gold-soft);color:var(--gold-text)}
.att-low{background:var(--bad-bg);color:var(--bad)}

/* --------------------------- breadcrumb -------------------------- */

.crumbs{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:14px;margin-bottom:24px}
.crumb{padding:6px 12px;border-radius:999px;color:var(--faint);background:none;border:0;
  text-decoration:none;cursor:pointer}
.crumb.done{background:var(--gold-soft);color:var(--gold-text);font-weight:500}
.crumb:disabled{cursor:default}
.crumb-sep{color:#c9b58c;line-height:0}

/* ---------------------------- calendar --------------------------- */

.cal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.cal-head{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));font-size:12px;color:var(--faint);margin-bottom:8px}
.cal-head div{padding:4px 0;text-align:center}
.cal-cell{min-height:80px;border-radius:var(--r-sm);border:1px solid var(--border-soft);padding:6px}
.cal-cell.blank{border-color:transparent}
.cal-cell.today{background:#fbf0da}
.cal-date{font-size:12px;color:var(--muted);margin-bottom:4px}
.cal-cell.today .cal-date{color:var(--gold-mid);font-weight:600}
.cal-chip{font-size:10px;padding:2px 6px;border-radius:4px;margin-bottom:3px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cal-chip.approved{background:var(--ok-bg);color:var(--ok)}
.cal-chip.pending{background:var(--gold-soft);color:var(--gold-text)}
.cal-chip.rejected{background:var(--bad-bg);color:var(--bad)}

/* Tasks share the grid with appointments, so they need their own tones —
   a meeting and a bill falling on the same day must be told apart at a
   glance, not by reading. */
.cal-chip.task{background:var(--cream);color:var(--muted);border:1px solid var(--line)}
.cal-chip.urgent{background:#f7e3d6;color:#8a3b12;font-weight:600}
.cal-chip.done{background:transparent;color:var(--faint);text-decoration:line-through}

.cal-key{width:10px;height:10px;border-radius:3px;display:inline-block;flex-shrink:0}
.cal-key.approved{background:var(--ok-bg);border:1px solid var(--ok)}
.cal-key.pending{background:var(--gold-soft);border:1px solid var(--gold)}
.cal-key.urgent{background:#f7e3d6;border:1px solid #c96a35}
.cal-key.task{background:var(--cream);border:1px solid var(--line)}
.cal-key.done{background:transparent;border:1px dashed var(--faint)}

/* ----------------------------- charts ---------------------------- */

.chart{width:100%;display:block}
.chart-empty{height:220px;display:flex;align-items:center;justify-content:center;
  font-size:14px;color:var(--faint)}
.donut-wrap{position:relative}
.donut-center{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;pointer-events:none;
}
.donut-center .n{font-size:24px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums lining-nums}
.donut-center .l{font-size:12px;color:var(--faint)}

.meter{height:8px;border-radius:999px;background:#f0e2c4;overflow:hidden;margin-bottom:8px}
.meter > div{height:100%;background:var(--ok)}

/* ----------------------------- misc ------------------------------ */

.stack{display:flex;flex-direction:column;gap:16px}
.inline{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.divide > * + *{border-top:1px solid var(--divider);padding-top:10px;margin-top:10px}
.scroll-y{overflow-y:auto}
.max-72{max-height:288px}
.max-130{max-height:520px}

.file-label{
  display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:var(--r-md);
  border:1px solid var(--line);background:#fff;font:600 14px var(--sans);color:var(--ink);cursor:pointer;
}
.file-label:hover{background:var(--cream)}
.file-label input{display:none}

/* ------------------- table tools: Excel and Print -------------------
   Added to every list table by app.js. The printed copy lives in
   #print-sheet only while the print dialog is open. */
.tbl-tools{display:flex;justify-content:flex-end;gap:6px;margin:0 0 8px}
.tbl-tools .btn{gap:5px;padding:5px 10px;font-size:12px}
#print-sheet,.print-head{display:none}

@media print{
  .sidebar,.btn,.icon-btn{display:none!important}
  .noprint,.tbl-tools{display:none!important}
  .main{padding:0}
  .card{break-inside:avoid;box-shadow:none}

  /* Printing one table: everything else goes, its copy stays. */
  body.printing > *:not(#print-sheet){display:none!important}
  body.printing #print-sheet{display:block}
  body.printing .print-head{display:block;margin:0 0 14px;padding-bottom:10px;border-bottom:2px solid #c8a24a}
  .print-trust{font:600 16px var(--serif);color:#1c1008}
  .print-meta{font-size:11px;color:#555;margin-top:2px}
  #print-sheet .card,#print-sheet details{border:0;box-shadow:none;padding:0;break-inside:auto}
  #print-sheet .table-wrap{overflow:visible}
  #print-sheet table.data{font-size:11px}
  /* A long list runs over pages: repeat the heading row, keep rows whole. */
  #print-sheet table.data thead{display:table-header-group}
  #print-sheet table.data tr{break-inside:avoid}
  @page{margin:14mm}
}