:root{
    --bg:#F5F4EE; --bg-alt:#ECE9DD; --surface:#FFFFFF; --surface-2:#FBFAF5;
    --border:#DFDACA; --ink:#1C231E; --ink-dim:#5A6459; --ink-faint:#8B9186;
    --accent:#0F6E5C; --accent-strong:#0B5346; --accent-ink:#FFFFFF; --accent-soft:#E1F1EC;
    --good:#2E7D46; --good-soft:#E3F3E6; --warn:#B8720A; --warn-soft:#FBEED9;
    --critical:#B23A2E; --critical-soft:#FBE6E3; --info:#3E6E96; --info-soft:#E6EEF4;
    --violet:#7A4FB0; --violet-soft:#F0E9F8;
    --shadow:0 1px 2px rgba(28,35,30,.06),0 6px 18px rgba(28,35,30,.06);
    --font-display:'IBM Plex Sans',ui-sans-serif,system-ui,sans-serif;
    --font-body:'IBM Plex Sans',ui-sans-serif,system-ui,sans-serif;
    --font-mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
    color-scheme: light;
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --bg:#10140F; --bg-alt:#161C13; --surface:#1A2118; --surface-2:#1E251B;
      --border:#2C362A; --ink:#EAEFE6; --ink-dim:#A9B3A3; --ink-faint:#78826F;
      --accent:#49C7A8; --accent-strong:#7EDBC3; --accent-ink:#08251E; --accent-soft:#173029;
      --good:#5FBF74; --good-soft:#17331F; --warn:#E0A83D; --warn-soft:#3A2C10;
      --critical:#E1665A; --critical-soft:#3A1A16; --info:#7BAAD1; --info-soft:#16232C;
      --violet:#B98AE3; --violet-soft:#2C2038;
      --shadow:0 1px 2px rgba(0,0,0,.4),0 10px 26px rgba(0,0,0,.4);
      color-scheme: dark;
    }
  }
  :root[data-theme="dark"]{
    --bg:#10140F; --bg-alt:#161C13; --surface:#1A2118; --surface-2:#1E251B;
    --border:#2C362A; --ink:#EAEFE6; --ink-dim:#A9B3A3; --ink-faint:#78826F;
    --accent:#49C7A8; --accent-strong:#7EDBC3; --accent-ink:#08251E; --accent-soft:#173029;
    --good:#5FBF74; --good-soft:#17331F; --warn:#E0A83D; --warn-soft:#3A2C10;
    --critical:#E1665A; --critical-soft:#3A1A16; --info:#7BAAD1; --info-soft:#16232C;
    --violet:#B98AE3; --violet-soft:#2C2038;
    --shadow:0 1px 2px rgba(0,0,0,.4),0 10px 26px rgba(0,0,0,.4);
    color-scheme: dark;
  }
  *{box-sizing:border-box;}
  body{background:var(--bg); color:var(--ink); font-family:var(--font-body); font-size:15px; line-height:1.5; padding-inline:16px;}
  h1,h2,h3{font-family:var(--font-display); font-weight:700; text-wrap:balance; margin:0;}
  .mono{font-family:var(--font-mono); font-variant-numeric: tabular-nums;}
  button{font-family:inherit; font-size:inherit;}
  a{color:var(--accent);}
  ::selection{background:var(--accent-soft);}
  .hidden{display:none!important;}
  .eyebrow{font-size:.72rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint);}

  /* ---------- Gate screen ---------- */
  #gate{min-height:100vh; display:flex; align-items:center; justify-content:center; padding-block:32px;}
  .gate-card{width:100%; max-width:420px; background:var(--surface); border:1px solid var(--border); border-radius:16px; box-shadow:var(--shadow); padding:32px 28px;}
  .gate-brand{display:flex; align-items:center; gap:10px; margin-bottom:22px;}
  .gate-mark{width:38px; height:38px; border-radius:10px; background:var(--accent); color:var(--accent-ink); display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:700; font-size:1.1rem; flex:none;}
  /* Official Sanjeevani Drug Agencies logo mark — the image itself is never
     recolored or cropped; the white card behind it just keeps it legible on
     the dark theme (the PNG has a white background baked in). Height-only
     sizing (width:auto) keeps the original aspect ratio at any screen size. */
  .brand-mark{background:#fff; border-radius:10px; padding:3px; display:inline-flex; align-items:center; justify-content:center; flex:none; box-shadow:var(--shadow);}
  .brand-logo{display:block; height:38px; width:auto; object-fit:contain; border-radius:6px;}
  .gate-brand .brand-mark{border-radius:14px; padding:6px;}
  .gate-brand .brand-logo{height:52px;}
  .gate-brand-text .name{font-family:var(--font-display); font-weight:700; font-size:1.05rem;}
  .gate-brand-text .sub{font-size:.78rem; color:var(--ink-dim);}
  .field{display:flex; flex-direction:column; gap:6px; margin-bottom:14px;}
  .field label{font-size:.78rem; font-weight:600; color:var(--ink-dim);}
  .field input,.field select,.field textarea{
    background:var(--surface-2); border:1px solid var(--border); border-radius:9px; padding:10px 12px;
    color:var(--ink); font-family:inherit; font-size:.92rem; width:100%;
  }
  .field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent);}
  .btn{display:inline-flex; align-items:center; justify-content:center; gap:6px; border-radius:9px; border:1px solid transparent; padding:10px 16px; font-weight:600; font-size:.88rem; cursor:pointer; transition:filter .1s ease;}
  .btn:hover{filter:brightness(0.95);}
  .btn:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}
  .btn-primary{background:var(--accent); color:var(--accent-ink);}
  .btn-secondary{background:var(--surface-2); color:var(--ink); border-color:var(--border);}
  .btn-ghost{background:transparent; color:var(--ink-dim); border-color:transparent;}
  .btn-danger{background:var(--critical-soft); color:var(--critical);}
  .btn-sm{padding:6px 10px; font-size:.78rem; border-radius:7px;}
  .btn-block{width:100%;}
  .role-toggle{display:flex; gap:8px; margin-bottom:18px; background:var(--surface-2); padding:4px; border-radius:10px; border:1px solid var(--border);}
  .role-toggle button{flex:1; padding:8px; border-radius:7px; background:transparent; border:none; font-weight:600; color:var(--ink-dim); cursor:pointer;}
  .role-toggle button.active{background:var(--accent); color:var(--accent-ink);}
  .gate-error{color:var(--critical); font-size:.82rem; margin-top:-6px; margin-bottom:10px; min-height:1em;}
  .gate-foot{margin-top:16px; font-size:.75rem; color:var(--ink-faint); text-align:center;}

  /* ---------- App shell ---------- */
  #app{max-width:1280px; margin-inline:auto; padding-block:16px 40px;}
  .topbar{display:flex; align-items:center; gap:14px; padding:10px 16px; background:var(--surface); border:1px solid var(--border); border-radius:14px; box-shadow:var(--shadow); margin-bottom:16px; position:sticky; top:12px; z-index:20;}
  .topbar .gate-mark{width:32px;height:32px;font-size:.95rem;}
  .topbar .brand-mark{border-radius:8px; padding:2px;}
  .topbar .brand-logo{height:32px;}
  .topbar .co-name{font-family:var(--font-display); font-weight:700; font-size:.98rem;}
  .topbar .co-sub{font-size:.72rem; color:var(--ink-dim);}
  .topbar-spacer{flex:1;}
  .pill{display:inline-flex; align-items:center; gap:5px; padding:4px 10px; border-radius:999px; font-size:.72rem; font-weight:600; background:var(--accent-soft); color:var(--accent-strong);}
  .bell-wrap{position:relative;}
  .bell-btn{position:relative; width:38px; height:38px; border-radius:10px; border:1px solid var(--border); background:var(--surface-2); color:var(--ink); cursor:pointer; display:flex; align-items:center; justify-content:center;}
  .bell-dot{position:absolute; top:5px; right:5px; width:9px; height:9px; border-radius:50%; background:var(--critical); border:2px solid var(--surface-2);}
  .bell-panel{position:absolute; right:0; top:46px; width:320px; max-height:400px; overflow:auto; background:var(--surface); border:1px solid var(--border); border-radius:12px; box-shadow:var(--shadow); padding:8px; z-index:40;}
  .notif-item{padding:10px; border-radius:9px; font-size:.82rem; border-bottom:1px solid var(--border);}
  .notif-item:last-child{border-bottom:none;}
  .notif-item .t{color:var(--ink-faint); font-size:.7rem; margin-top:3px;}
  .notif-empty{padding:20px; text-align:center; color:var(--ink-faint); font-size:.85rem;}

  .layout{display:grid; grid-template-columns:200px 1fr; gap:16px; align-items:start;}
  .sidenav{background:var(--surface); border:1px solid var(--border); border-radius:14px; box-shadow:var(--shadow); padding:10px; display:flex; flex-direction:column; gap:2px; position:sticky; top:78px;}
  .sidenav button{display:flex; align-items:center; gap:10px; text-align:left; padding:10px 12px; border-radius:9px; border:none; background:transparent; color:var(--ink-dim); font-weight:600; font-size:.86rem; cursor:pointer;}
  .sidenav button:hover{background:var(--bg-alt);}
  .sidenav button.active{background:var(--accent-soft); color:var(--accent-strong);}
  .sidenav .ic{width:18px; text-align:center; flex:none;}

  main{min-width:0;}
  .card{background:var(--surface); border:1px solid var(--border); border-radius:14px; box-shadow:var(--shadow); padding:18px; margin-bottom:16px;}
  .card-head{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:14px; flex-wrap:wrap;}
  .card-head h2{font-size:1rem;}
  .stat-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin-bottom:16px;}
  .stat-tile{background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:16px; box-shadow:var(--shadow);}
  .stat-tile .v{font-family:var(--font-mono); font-size:1.55rem; font-weight:700; font-variant-numeric:tabular-nums;}
  .stat-tile .l{font-size:.76rem; color:var(--ink-dim); margin-top:2px;}
  .row{display:flex; gap:10px; align-items:center; flex-wrap:wrap;}
  .grow{flex:1;}

  table{width:100%; border-collapse:collapse; font-size:.86rem;}
  th{text-align:left; font-size:.7rem; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-faint); font-weight:600; padding:8px 10px; border-bottom:1px solid var(--border);}
  td{padding:9px 10px; border-bottom:1px solid var(--border); vertical-align:middle;}
  tr:last-child td{border-bottom:none;}
  .tbl-wrap{overflow-x:auto; border-radius:10px;}
  .num{font-family:var(--font-mono); font-variant-numeric:tabular-nums; text-align:right;}
  .badge{display:inline-flex; padding:3px 9px; border-radius:999px; font-size:.72rem; font-weight:600;}
  .badge-good{background:var(--good-soft); color:var(--good);}
  .badge-warn{background:var(--warn-soft); color:var(--warn);}
  .badge-crit{background:var(--critical-soft); color:var(--critical);}
  .badge-info{background:var(--info-soft); color:var(--info);}
  .badge-neutral{background:var(--bg-alt); color:var(--ink-dim);}

  .att-cell{width:34px; height:30px; border-radius:6px; border:1px solid var(--border); background:var(--surface-2); font-family:var(--font-mono); font-size:.68rem; font-weight:700; cursor:pointer; text-align:center;}
  .att-P{background:var(--good-soft); color:var(--good); border-color:transparent;}
  .att-A{background:var(--critical-soft); color:var(--critical); border-color:transparent;}
  .att-HD{background:var(--warn-soft); color:var(--warn); border-color:transparent;}
  .att-WO{background:var(--bg-alt); color:var(--ink-faint); border-color:transparent;}
  .att-H,.att-NH{background:var(--info-soft); color:var(--info); border-color:transparent;}
  .att-SH{background:var(--violet-soft); color:var(--violet); border-color:transparent;}
  .att-CL,.att-SL,.att-EL{background:var(--accent-soft); color:var(--accent-strong); border-color:transparent;}
  .att-LWP{background:var(--critical-soft); color:var(--critical); border-color:transparent; opacity:.7;}
  /* System-generated (auto-computed Sunday/holiday, nothing explicitly
     stored yet) gets a dashed ring so it reads as different from a status
     someone actually entered. */
  .att-cell.auto{box-shadow:inset 0 0 0 1px currentColor; outline:1px dashed currentColor; outline-offset:-3px;}
  .att-cell.att-future,button.att-cell:disabled{opacity:.35; cursor:not-allowed;}
  th.att-future{opacity:.5;}
  .legend{display:flex; gap:12px; flex-wrap:wrap; font-size:.74rem; color:var(--ink-dim); margin-top:10px;}
  .legend span{display:inline-flex; align-items:center; gap:5px;}
  .legend i{width:12px; height:12px; border-radius:3px; display:inline-block;}
  .legend i.auto-swatch{background:var(--surface-2); outline:1px dashed var(--ink-faint); outline-offset:-2px;}

  /* Quick-action panel above the attendance grid — wraps naturally at phone
     width since it's just a flex row with gap, same as .row elsewhere. */
  .qa-panel{display:flex; gap:16px; flex-wrap:wrap; align-items:flex-end; background:var(--bg-alt); border-radius:12px; padding:14px; margin-bottom:14px;}
  .qa-btns{display:flex; gap:8px; flex-wrap:wrap;}

  .modal-back{position:fixed; inset:0; background:rgba(10,14,10,.5); display:flex; align-items:flex-start; justify-content:center; padding:5vh 16px; overflow:auto; z-index:100;}
  .modal{background:var(--surface); border:1px solid var(--border); border-radius:16px; box-shadow:var(--shadow); width:100%; max-width:640px; padding:22px;}
  .modal h3{margin-bottom:16px; font-size:1.05rem;}
  .form-grid{display:grid; grid-template-columns:1fr 1fr; gap:0 14px;}
  .form-grid .span2{grid-column:1/-1;}
  .modal-actions{display:flex; justify-content:flex-end; gap:8px; margin-top:6px;}
  .section-label{grid-column:1/-1; font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--accent); margin:14px 0 4px; padding-top:10px; border-top:1px solid var(--border);}
  .form-grid .section-label:first-child{border-top:none; margin-top:0; padding-top:0;}

  .toast-wrap{position:fixed; bottom:18px; left:50%; transform:translateX(-50%); z-index:200; display:flex; flex-direction:column; gap:8px; align-items:center;}
  .toast{background:var(--ink); color:var(--bg); padding:10px 16px; border-radius:9px; font-size:.85rem; box-shadow:var(--shadow); opacity:0; transform:translateY(6px); transition:.2s ease;}
  .toast.show{opacity:1; transform:translateY(0);}
  .toast.err{background:var(--critical);}
  .toast.ok{background:var(--good);}

  .empty-note{padding:26px; text-align:center; color:var(--ink-faint); font-size:.88rem;}
  .help-text{font-size:.78rem; color:var(--ink-faint); margin-top:4px;}
  .divider{height:1px; background:var(--border); margin:14px 0;}
  .input{background:var(--surface-2); border:1px solid var(--border); border-radius:9px; padding:8px 11px; color:var(--ink); font-family:inherit; font-size:.86rem;}
  .input:focus{outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent);}
  .tabs-sm{display:flex; gap:6px; flex-wrap:wrap;}
  .tabs-sm button{padding:6px 12px; border-radius:999px; border:1px solid var(--border); background:var(--surface-2); color:var(--ink-dim); font-weight:600; font-size:.78rem; cursor:pointer;}
  .tabs-sm button.active{background:var(--accent); color:var(--accent-ink); border-color:transparent;}
  .kv{display:grid; grid-template-columns:auto 1fr; gap:6px 14px; font-size:.86rem;}
  .kv dt{color:var(--ink-faint);}
  .kv dd{margin:0; font-weight:600;}
  .att-grid-wrap{overflow:auto; max-width:100%;}
  .att-name-col{position:sticky; left:0; background:var(--surface); z-index:2; min-width:150px;}
  .disclaimer{font-size:.78rem; color:var(--ink-faint); background:var(--bg-alt); border-radius:10px; padding:12px 14px; line-height:1.5;}
  input[type=checkbox]{width:16px; height:16px; accent-color:var(--accent);}
  .switch-row{display:flex; align-items:center; gap:8px; font-size:.85rem;}

  @media (max-width:820px){
    .layout{grid-template-columns:1fr;}
    .sidenav{position:static; flex-direction:row; overflow-x:auto; top:auto;}
    .sidenav button{white-space:nowrap;}
    .form-grid{grid-template-columns:1fr;}
    #app{padding-inline:0;}
  }

.theme-toggle{width:38px; height:38px; border-radius:10px; border:1px solid var(--border); background:var(--surface-2); color:var(--ink); cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:1rem;}
.setup-note{font-size:.8rem; color:var(--ink-faint); text-align:center; margin-top:14px; line-height:1.5;}