/* Layout: a filing cabinet — summary tabs on top act like folder tabs, each opens one working list; employee file slides in from the side */
:root{
  --paper:#F3F5F7; --sheet:#FFFFFF; --ink:#1B2740; --muted:#5C6880; --line:#DCE1E8;
  --folder:#C8902A; --folder-soft:#F6EAD3; --ink-soft:#E6EBF3;
  --ok:#1F7A4D; --ok-soft:#DFF2E7; --warn:#A86200; --warn-soft:#FBEBD2; --bad:#B42318; --bad-soft:#FBE3E0;
  --f-display:"Readex Pro","IBM Plex Sans Arabic",Tahoma,sans-serif;
  --f-body:"IBM Plex Sans Arabic",Tahoma,"Segoe UI",sans-serif;
  --r:10px;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --paper:#11161F; --sheet:#1A2130; --ink:#E7ECF4; --muted:#9AA5BA; --line:#2C3547;
  --folder:#E0A947; --folder-soft:#3A2F1C; --ink-soft:#243049;
  --ok:#5CCB8F; --ok-soft:#1C3529; --warn:#F0AE52; --warn-soft:#3A2C17; --bad:#F2877C; --bad-soft:#3D1F1D; color-scheme:dark}}
:root[data-theme="dark"]{
  --paper:#11161F; --sheet:#1A2130; --ink:#E7ECF4; --muted:#9AA5BA; --line:#2C3547;
  --folder:#E0A947; --folder-soft:#3A2F1C; --ink-soft:#243049;
  --ok:#5CCB8F; --ok-soft:#1C3529; --warn:#F0AE52; --warn-soft:#3A2C17; --bad:#F2877C; --bad-soft:#3D1F1D; color-scheme:dark}
body{background:var(--paper);color:var(--ink);font-family:var(--f-body);font-size:15px;line-height:1.6}
*{box-sizing:border-box}
.app{max-width:1120px;margin:0 auto;padding-block:20px 60px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
h1,h2,h3{font-family:var(--f-display);text-wrap:balance;margin:0}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--folder);outline-offset:2px}
.num{font-variant-numeric:tabular-nums}
.ltr{direction:ltr;unicode-bidi:isolate;display:inline-block}

header.top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}
.brand{display:flex;align-items:center;gap:12px}
.brand-mark{width:40px;height:32px;position:relative}
.brand-mark::before{content:"";position:absolute;inset:6px 0 0 0;background:var(--folder);border-radius:4px}
.brand-mark::after{content:"";position:absolute;top:0;right:0;width:18px;height:10px;background:var(--folder);border-radius:4px 4px 0 0}
.brand h1{font-size:22px}
.brand p{margin:0;color:var(--muted);font-size:13px}
.demo-pill{font-size:12px;background:var(--folder-soft);color:var(--ink);padding:3px 10px;border-radius:99px}
.top-actions{display:flex;gap:8px;flex-wrap:wrap}
.btn{border:1px solid var(--line);background:var(--sheet);padding:8px 14px;border-radius:8px;font-weight:500}
.btn:hover{border-color:var(--muted)}
.btn.primary{background:var(--ink);color:var(--sheet);border-color:var(--ink)}
.btn.small{padding:4px 10px;font-size:13px}
.btn.ok{background:var(--ok-soft);color:var(--ok);border-color:transparent}

/* folder tabs */
.tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;align-items:end}
.tab{position:relative;text-align:right;border:1px solid var(--line);border-bottom:none;background:var(--ink-soft);border-radius:12px 12px 0 0;padding:12px 14px 14px;display:flex;flex-direction:column;gap:2px;min-width:0}
.tab .t-label{font-size:13px;color:var(--muted);font-weight:500}
.tab .t-num{font-family:var(--f-display);font-size:26px;font-weight:700;line-height:1.2}
.tab .t-sub{font-size:12px;color:var(--muted)}
.tab[aria-selected="true"]{background:var(--sheet);padding-top:16px;box-shadow:0 -3px 0 var(--folder) inset}
.tab[aria-selected="true"]{box-shadow:none;border-top:3px solid var(--folder)}
.t-num.bad{color:var(--bad)} .t-num.warn{color:var(--warn)}
.panel{background:var(--sheet);border:1px solid var(--line);border-radius:0 0 var(--r) var(--r);padding:20px;min-height:420px}
.panel-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.panel-head h2{font-size:19px}
.panel-head p{margin:2px 0 0;color:var(--muted);font-size:13px}
.tools{display:flex;gap:8px;flex-wrap:wrap}
.input{border:1px solid var(--line);background:var(--paper);border-radius:8px;padding:8px 12px;min-width:0}
.input.search{width:240px;max-width:100%}

/* rows */
.list{display:flex;flex-direction:column}
.row{display:grid;grid-template-columns:minmax(0,2.2fr) minmax(0,1.2fr) minmax(0,1.2fr) minmax(0,1.6fr) auto;gap:12px;align-items:center;padding:12px 4px;border-top:1px solid var(--line)}
.row.head{font-size:12px;color:var(--muted);font-weight:600;border-top:none;padding-block:4px 8px}
.row.click{cursor:pointer;border-radius:6px}
.row.click:hover{background:var(--paper)}
.who{display:flex;align-items:center;gap:10px;min-width:0}
.avatar{flex:none;width:36px;height:36px;border-radius:50%;background:var(--ink-soft);display:grid;place-items:center;font-family:var(--f-display);font-weight:600;font-size:14px}
.who b{display:block;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.who small{color:var(--muted);font-size:12px}
.cell-label{display:none;font-size:11px;color:var(--muted)}
.pill{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;padding:3px 10px;border-radius:99px;white-space:nowrap}
.pill::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.pill.ok{background:var(--ok-soft);color:var(--ok)} .pill.warn{background:var(--warn-soft);color:var(--warn)} .pill.bad{background:var(--bad-soft);color:var(--bad)} .pill.neutral{background:var(--ink-soft);color:var(--muted)}
.meter{display:flex;align-items:center;gap:8px}
.meter-bar{flex:1;height:6px;background:var(--ink-soft);border-radius:99px;overflow:hidden;max-width:110px}
.meter-bar i{display:block;height:100%;background:var(--ok);border-radius:99px}
.meter-bar i.part{background:var(--warn)} .meter-bar i.low{background:var(--bad)}
.meter span{font-size:12px;color:var(--muted)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{font-size:12px;border:1px dashed var(--bad);color:var(--bad);padding:2px 9px;border-radius:6px;background:transparent}

/* medical + pay groups */
.groups{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px}
.group{border:1px solid var(--line);border-radius:var(--r);padding:14px;background:var(--paper);min-width:0}
.group h3{font-size:15px;display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:10px}
.group h3 .count{font-size:13px;background:var(--sheet);border:1px solid var(--line);border-radius:99px;padding:0 10px}
.group.bad{border-top:3px solid var(--bad)} .group.warn{border-top:3px solid var(--warn)} .group.ok{border-top:3px solid var(--ok)} .group.neutral{border-top:3px solid var(--muted)}
.mini{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:9px 10px;background:var(--sheet);border:1px solid var(--line);border-radius:8px;margin-top:8px;flex-wrap:wrap}
.mini .name{font-weight:600;cursor:pointer;min-width:0}
.mini .name:hover{text-decoration:underline}
.mini .meta{font-size:12px;color:var(--muted);display:block;font-weight:400}
.empty{color:var(--muted);font-size:13px;padding:10px 2px}
.banks{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.bank-tag{font-size:13px;background:var(--ink-soft);padding:4px 12px;border-radius:8px}
.bank-tag b{font-family:var(--f-display)}

/* drawer */
.scrim{position:fixed;inset:0;background:rgba(10,15,25,.45);z-index:20}
.drawer{position:fixed;top:0;bottom:0;left:0;width:min(460px,100%);background:var(--sheet);z-index:21;overflow-y:auto;box-shadow:8px 0 30px rgba(0,0,0,.2);
  padding-top:max(20px,env(safe-area-inset-top,0px));padding-bottom:max(20px,env(safe-area-inset-bottom,0px));padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:20px;animation:slide .22s ease-out}
@keyframes slide{from{transform:translateX(-30px);opacity:.4}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.drawer{animation:none}}
.d-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:16px}
.d-head h2{font-size:20px}
.d-head p{margin:0;color:var(--muted);font-size:13px}
.x{border:none;background:var(--ink-soft);width:34px;height:34px;border-radius:8px;font-size:18px;flex:none}
.sec{border-top:1px solid var(--line);padding-block:14px}
.sec h3{font-size:14px;margin-bottom:10px;color:var(--muted);letter-spacing:.2px}
.kv{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:14px}
.kv dt{color:var(--muted)} .kv dd{margin:0;font-weight:500;min-width:0;overflow-wrap:anywhere}
.docs{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.doc{display:flex;align-items:center;gap:8px;font-size:14px;padding:6px 8px;border-radius:6px;background:var(--paper);cursor:pointer}
.doc input{accent-color:var(--ok);width:16px;height:16px}
.doc.missing{background:var(--bad-soft)}
.field{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--muted)}
.field .input{color:var(--ink);font-size:14px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.form-grid .wide{grid-column:1/-1}
.toast{position:fixed;bottom:max(20px,env(safe-area-inset-bottom,0px));left:50%;transform:translateX(-50%);background:var(--ink);color:var(--sheet);padding:10px 18px;border-radius:8px;z-index:30;font-size:14px}
.copybox{width:100%;min-height:120px;margin-top:10px;border:1px solid var(--line);border-radius:8px;padding:10px;background:var(--paper);font:inherit;font-size:13px}

@media (max-width:820px){
  .tabs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tab{border-radius:10px;border-bottom:1px solid var(--line)}
  .tab[aria-selected="true"]{border-top:3px solid var(--folder)}
  .panel{border-radius:var(--r);margin-top:10px;padding:14px}
  .row{grid-template-columns:1fr 1fr;row-gap:8px}
  .row.head{display:none}
  .row .who{grid-column:1/-1}
  .row .wide-m{grid-column:1/-1}
  .cell-label{display:block}
  .input.search{width:100%}
  .tools{width:100%}
}
@media (max-width:420px){.docs,.form-grid{grid-template-columns:1fr}}

/* live app additions */
html,body{margin:0}
:root{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
[hidden]{display:none!important}
.login-wrap{min-height:80vh;display:grid;place-items:center;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.login{width:min(380px,100%);background:var(--sheet);border:1px solid var(--line);border-radius:14px;padding:28px;display:flex;flex-direction:column;gap:14px}
.login h1{font-size:22px}
.login p{margin:0;color:var(--muted);font-size:13px}
.err{color:var(--bad);font-size:13px;margin:0}
.user-chip{font-size:13px;color:var(--muted)}
.files{display:flex;flex-direction:column;gap:6px;margin-top:10px}
.file{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:13px;padding:6px 8px;background:var(--paper);border-radius:6px;flex-wrap:wrap}
.file span{min-width:0;overflow-wrap:anywhere}
.upload{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:10px}
.loading{padding:40px;text-align:center;color:var(--muted)}
.btn.danger{color:var(--bad);border-color:var(--bad-soft)}