/* ============================================================
   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;--khd-hd-gap:10px;
  background:var(--surface,#fff);border-bottom:1px solid var(--line,rgba(120,100,50,.16));
  display:flex;align-items:center;gap:var(--khd-hd-gap);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)}
/* A flex item will not shrink below the intrinsic width of its content unless it
   is given min-width:0 — so a nowrap label like "Maintenance Materials" holds the
   whole row open and overflows the right edge. min-width:0 + ellipsis lets the
   name be the thing that gives way. */
#khd-hd .khd-modsw{position:relative;flex:0 1 auto;min-width:0}
#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;
  max-width:100%;min-width:0;overflow:hidden}
#khd-hd .khd-modnm{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#khd-hd .khd-modsw>button svg{width:12px;height:12px;stroke:var(--muted,#7d7666);fill:none;stroke-width:2;flex:0 0 12px}
/* Adopted appbar cluster (search + bell). Held at its natural size: it is a small
   bounded set, and letting it shrink only clips its own icons while stealing the
   shrink budget from the module name, which can ellipsis harmlessly instead.
   Bulkier legacy controls go to the ⋯ menu, not here. */
#khd-hd #khd-slot{flex:0 0 auto}
/* the right cluster (Tasks · Home · user · ⋯ · Logout) never shrinks and never
   moves — it is the guarantee that Logout stays reachable at any width */
#khd-hd .khd-right{display:flex;align-items:center;gap:var(--khd-hd-gap);flex:0 0 auto}
.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}
  /* The minimised 38px dock bar used to sit permanently across the bottom of
     every phone screen, covering module bottom navs and action bars. On phones
     the header Tasks button — which already carries the open-task count badge —
     is the entry point instead, so "minimised" simply means hidden. Pages with
     no header button (homepage, masaar) don't get .khd-hastasksbtn and keep the
     bar, otherwise the dock would be unreachable there. */
  #khd-dock{right:0;left:0;width:auto;border-radius:14px 14px 0 0;
    max-height:min(72vh,470px);padding-bottom:env(safe-area-inset-bottom)}
  body.khd-hastasksbtn #khd-dock.min{display:none}
  #khd-dock .kd-list{max-height:none}
}
/* Phones only: buy back horizontal room so the module name still reads instead of
   collapsing to a bare ellipsis. The "KH" seal and the Home icon both link to /,
   so at this width one of them is enough. Tablets keep the roomier spacing. */
@media(max-width:560px){
  #khd-hd{--khd-hd-gap:5px;padding:0 8px}
  #khd-hd .khd-seal{display:none}
  #khd-hd .khd-modsw>button{padding:5px 8px}
  /* The name is already hidden at 920px, leaving a bare initial that costs ~45px
     and says little — the sidebar header carries the full name. Reclaiming it is
     what keeps the module name readable instead of "Mai…". */
  #khd-hd .khd-user{display:none}
}
/* ---------- 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}
}