/* ============================================================
   Khadamat OS — unified shell (header + sidebar + tasks dock)
   Loaded on all modules except /receipts/, /kpi/, /admin/.
   All rules are scoped to body.khd-shell / .khd-* classes and
   only activate after shell.js confirms a signed-in session,
   so login screens and signed-out pages are untouched.
   ============================================================ */

/* ---------- header ---------- */
body.khd-shell{padding-top:48px !important}
#khd-hd{position:fixed;top:0;left:0;right:0;height:48px;z-index:950;
  background:var(--surface,#fff);border-bottom:1px solid var(--line,rgba(120,100,50,.16));
  display:flex;align-items:center;gap:10px;padding:0 12px;
  font-family:var(--sans,'Inter',system-ui,sans-serif);color:var(--text,#211d16)}
#khd-hd .khd-burger{display:none;border:0;background:none;cursor:pointer;padding:6px;border-radius:8px;color:var(--muted,#7d7666)}
#khd-hd .khd-burger svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
#khd-hd .khd-seal{width:28px;height:28px;border-radius:50%;flex:0 0 28px;
  background:radial-gradient(circle at 35% 30%,var(--green-lt,#1AA552),var(--green-dk,#0a4a24));
  color:var(--gold,#C8A545);display:flex;align-items:center;justify-content:center;
  font:700 10px var(--serif,Georgia,serif);text-decoration:none}
#khd-hd .khd-brand{font-size:13px;font-weight:600;white-space:nowrap;text-decoration:none;color:inherit}
#khd-hd .khd-brand b{color:var(--green-dk,#0a4a24)}
#khd-hd .khd-modsw{position:relative}
#khd-hd .khd-modsw>button{display:flex;align-items:center;gap:6px;background:var(--surface-2,#faf7f0);
  border:1px solid var(--line,rgba(120,100,50,.16));border-radius:8px;padding:5px 10px;
  font:600 12.5px var(--sans,sans-serif);color:var(--green-dk,#0a4a24);cursor:pointer;white-space:nowrap}
#khd-hd .khd-modsw>button svg{width:12px;height:12px;stroke:var(--muted,#7d7666);fill:none;stroke-width:2}
.khd-modmenu{display:none;position:absolute;top:38px;left:0;min-width:210px;max-height:70vh;overflow-y:auto;
  background:var(--surface,#fff);border:1px solid var(--line,rgba(120,100,50,.16));border-radius:12px;
  box-shadow:0 14px 30px -8px rgba(80,60,20,.2);padding:6px;z-index:1300}
.khd-modmenu.open{display:block}
.khd-modmenu a{display:block;padding:8px 12px;border-radius:8px;font:500 12.5px var(--sans,sans-serif);
  color:var(--text,#211d16);text-decoration:none}
.khd-modmenu a:hover{background:var(--raise,#f6f2e8)}
.khd-modmenu a.cur{background:var(--green,#0E6130);color:#fff;font-weight:600}
#khd-hd .khd-sp{flex:1}
#khd-hd .khd-ico{width:32px;height:32px;border-radius:8px;border:0;background:none;display:flex;align-items:center;
  justify-content:center;cursor:pointer;position:relative;color:var(--muted,#7d7666);text-decoration:none;flex:0 0 32px}
#khd-hd .khd-ico:hover{background:var(--raise,#f6f2e8)}
#khd-hd .khd-ico svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#khd-hd .khd-cnt{position:absolute;top:1px;right:-1px;background:var(--red,#B5463A);color:#fff;
  font:700 9px var(--sans,sans-serif);border-radius:8px;min-width:14px;height:14px;line-height:14px;text-align:center;padding:0 3px}
#khd-hd .khd-user{display:flex;align-items:center;gap:7px;background:var(--surface-2,#faf7f0);
  border:1px solid var(--line,rgba(120,100,50,.16));border-radius:20px;padding:3px 10px 3px 4px;
  font:600 12px var(--sans,sans-serif);margin:0 2px;white-space:nowrap}
#khd-hd .khd-user .khd-av{width:22px;height:22px;border-radius:50%;background:var(--gold,#C8A545);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:10px}
/* overflow (⋯) menu holding legacy header buttons */
#khd-hd .khd-more{position:relative}
.khd-moremenu{display:none;position:absolute;top:38px;right:0;min-width:190px;background:var(--surface,#fff);
  border:1px solid var(--line,rgba(120,100,50,.16));border-radius:12px;box-shadow:0 14px 30px -8px rgba(80,60,20,.2);
  padding:8px;z-index:1300}
.khd-moremenu.open{display:block}
.khd-moremenu>*{display:block;width:100%;margin:2px 0;text-align:left;
  background:var(--surface-2,#faf7f0);border:1px solid var(--line-soft,rgba(120,100,50,.10));
  border-radius:8px;padding:8px 10px;font:500 12.5px var(--sans,sans-serif);color:var(--text,#211d16);cursor:pointer}
.khd-moremenu>span{background:none;border:0;color:var(--faint,#a59c89);font-size:11px;cursor:default}
/* appbar cluster adopted into header */
#khd-hd .khd-ab{display:flex;align-items:center;margin:0}

/* ---------- sidebar (full mode) ---------- */
body.khd-shell-full{padding-left:216px !important}
#khd-sb{position:fixed;top:48px;left:0;bottom:0;width:216px;z-index:940;
  background:var(--surface,#fff);border-right:1px solid var(--line,rgba(120,100,50,.16));
  padding:10px 8px;overflow-y:auto;font-family:var(--sans,'Inter',system-ui,sans-serif)}
#khd-sb .khd-grp{margin-bottom:4px}
#khd-sb .khd-grp-h{display:flex;align-items:center;justify-content:space-between;padding:6px 10px 4px;
  font:600 10px var(--sans,sans-serif);letter-spacing:.9px;text-transform:uppercase;color:var(--faint,#a59c89);cursor:pointer;user-select:none}
#khd-sb .khd-grp-h svg{width:11px;height:11px;stroke:var(--faint,#a59c89);fill:none;stroke-width:2.5;transition:.15s}
#khd-sb .khd-grp.closed .khd-grp-h svg{transform:rotate(-90deg)}
#khd-sb .khd-grp.closed .khd-it{display:none}
#khd-sb .khd-it{display:flex;align-items:center;gap:9px;padding:7px 10px;border-radius:8px;
  font:500 12.5px var(--sans,sans-serif);color:var(--text,#211d16);cursor:pointer;position:relative}
#khd-sb .khd-it:hover{background:var(--raise,#f6f2e8)}
#khd-sb .khd-it.on{background:var(--green,#0E6130);color:#fff;font-weight:600}
#khd-sb .khd-it .khd-alert{width:7px;height:7px;border-radius:50%;background:var(--gold,#C8A545);margin-left:auto}

/* ---------- per-module adjustments ---------- */
/* Manpower Division: hide legacy header + scrolling tab strip */
body[data-khd-mod="profitability"].khd-shell header.app,
body[data-khd-mod="profitability"].khd-shell nav#tabs,
body[data-khd-mod="profitability"].khd-shell nav.tabs{display:none !important}
/* Waste: hide legacy header + tab strip */
body[data-khd-mod="waste"].khd-shell header.bar,
body[data-khd-mod="waste"].khd-shell #tabs{display:none !important}
/* Tasks: hide legacy brand bar; keep its bell (moved into shell header) */
body[data-khd-mod="tasks"].khd-shell header.bar{display:none !important}
body[data-khd-mod="tasks"].khd-shell .notif-panel{position:fixed;top:52px;right:12px}
/* AutoDocs: its own bar becomes the content header below the shell header */
body[data-khd-mod="autodocs"].khd-shell header.bar{top:48px}
/* Sijil family: sticky side nav starts under the shell header;
   its footer Home/Logout hidden (shell header provides both) */
body[data-khd-mod="sijilfam"].khd-shell aside.side{top:48px !important;height:calc(100vh - 48px) !important}
body[data-khd-mod="sijilfam"].khd-shell .sfoot #homeLink,
body[data-khd-mod="sijilfam"].khd-shell .sfoot #logoutBtn{display:none !important}

/* ---------- attendance / almabar sidebar grouping ---------- */
.khd-sb-label{padding:9px 14px 3px;font:600 10px var(--sans,'Inter',sans-serif);letter-spacing:.9px;
  text-transform:uppercase;color:var(--faint,#a59c89);display:flex;align-items:center;justify-content:space-between}
.khd-sb-label svg{width:11px;height:11px;stroke:var(--faint,#a59c89);fill:none;stroke-width:2.5;transition:.15s}
.khd-sb-label.tgl{cursor:pointer;user-select:none}
.khd-admin-grp.closed .khd-sb-label svg{transform:rotate(-90deg)}
.khd-admin-grp.closed>*:not(.khd-sb-label){display:none !important}

/* ---------- tasks dock (old-messenger style) ---------- */
#khd-dock{position:fixed;bottom:0;right:18px;width:308px;z-index:2000;
  background:var(--surface,#fff);border:1px solid var(--line,rgba(120,100,50,.16));border-bottom:0;
  border-radius:12px 12px 0 0;box-shadow:0 -4px 24px rgba(80,60,20,.18);
  display:flex;flex-direction:column;max-height:400px;transition:max-height .18s ease;
  font-family:var(--sans,'Inter',system-ui,sans-serif)}
#khd-dock.min{max-height:38px;overflow:hidden}
#khd-dock.closed{display:none}
#khd-dock .kd-bar{flex:0 0 38px;background:var(--green,#0E6130);color:#fff;border-radius:11px 11px 0 0;
  display:flex;align-items:center;gap:8px;padding:0 10px;cursor:pointer;user-select:none}
#khd-dock .kd-bar svg{width:15px;height:15px;stroke:var(--gold,#C8A545);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
#khd-dock .kd-bar b{font:600 12.5px var(--sans,sans-serif)}
#khd-dock .kd-cnt{background:rgba(255,255,255,.18);border-radius:10px;font:600 10.5px var(--sans,sans-serif);padding:1px 7px}
#khd-dock .kd-sp{flex:1}
#khd-dock .kd-bar a{color:#cde8d4;font-size:11px;text-decoration:none}
#khd-dock .kd-bar button{border:0;background:none;color:#cde8d4;font:700 13px var(--sans,sans-serif);cursor:pointer;
  width:20px;height:20px;border-radius:5px;line-height:1}
#khd-dock .kd-bar button:hover{background:rgba(255,255,255,.15);color:#fff}
#khd-dock .kd-tabs{flex:0 0 auto;display:flex;border-bottom:1px solid var(--line-soft,rgba(120,100,50,.10));padding:0 8px}
#khd-dock .kd-tabs span{font:600 11.5px var(--sans,sans-serif);color:var(--muted,#7d7666);padding:8px 10px;cursor:pointer;
  border-bottom:2px solid transparent}
#khd-dock .kd-tabs span.on{color:var(--green-dk,#0a4a24);border-color:var(--gold,#C8A545)}
#khd-dock .kd-list{flex:1;overflow-y:auto;min-height:0;max-height:250px}
#khd-dock .kd-it{display:flex;gap:9px;padding:8px 12px;border-bottom:1px solid var(--line-soft,rgba(120,100,50,.10));
  align-items:flex-start;cursor:pointer}
#khd-dock .kd-it:hover{background:var(--surface-2,#faf7f0)}
#khd-dock .kd-chk{flex:0 0 16px;width:16px;height:16px;border:1.6px solid var(--faint,#a59c89);border-radius:50%;
  margin-top:1px;display:flex;align-items:center;justify-content:center;color:transparent;font-size:9px}
#khd-dock .kd-it.done .kd-chk{background:var(--green-lt,#1AA552);border-color:var(--green-lt,#1AA552);color:#fff}
#khd-dock .kd-tt{font:500 12px var(--sans,sans-serif);line-height:1.3;color:var(--text,#211d16)}
#khd-dock .kd-it.done .kd-tt{text-decoration:line-through;color:var(--faint,#a59c89)}
#khd-dock .kd-tm{font-size:10.5px;color:var(--faint,#a59c89);margin-top:2px}
#khd-dock .kd-tm .due{color:var(--red,#B5463A);font-weight:600}
#khd-dock .kd-empty{padding:18px 12px;font-size:12px;color:var(--faint,#a59c89);text-align:center}
#khd-dock .kd-add{flex:0 0 auto;display:flex;gap:6px;padding:8px 10px;border-top:1px solid var(--line-soft,rgba(120,100,50,.10));
  background:var(--surface-2,#faf7f0)}
#khd-dock .kd-add input{flex:1;border:1px solid var(--line,rgba(120,100,50,.16));border-radius:8px;padding:6px 10px;
  font:12px var(--sans,sans-serif);background:var(--surface,#fff);color:var(--text,#211d16);min-width:0}
#khd-dock .kd-add button{border:0;background:var(--green,#0E6130);color:#fff;border-radius:8px;padding:0 12px;
  font:600 12px var(--sans,sans-serif);cursor:pointer}

/* ---------- responsive ---------- */
@media(max-width:920px){
  body.khd-shell-full{padding-left:0 !important}
  #khd-hd .khd-burger{display:flex}
  #khd-hd .khd-brand{display:none}
  #khd-hd .khd-user span.nm{display:none}
  #khd-sb{transform:translateX(-105%);transition:transform .22s ease;box-shadow:0 0 40px rgba(0,0,0,.25)}
  #khd-sb.open{transform:none}
  #khd-dock{right:0;left:0;width:auto;border-radius:12px 12px 0 0}
}
/* ---------- print: shell must never appear on printed documents ---------- */
@media print{
  #khd-hd,#khd-sb,#khd-dock,.khd-modmenu,.khd-moremenu{display:none !important}
  body.khd-shell{padding-top:0 !important}
  body.khd-shell-full{padding-left:0 !important}
}