/* MASAR 360 — Premium layer (Employee Files + two-level sidebar).
   Built ON the existing tokens (ds/tokens.css): navy ink for text, the soft sky brand blue as the single accent, hairline borders instead of
   stacked shadows, status colour only as a small dot + a labelled badge (never colour alone). Light / dark both come from the same tokens. */
:root{
  --pm-ink:#0f2340; --pm-ink-2:#3f5168; --pm-ink-3:#6b7c90;
  --pm-page:#f5f8fb; --pm-card:#ffffff; --pm-line:#e3e9f0; --pm-line-strong:#cfd9e4; --pm-hover:#f1f6fb;
  --pm-accent:var(--brand-primary,#0a84c9); --pm-accent-soft:#e8f2fb; --pm-accent-ink:#0b5c8f;
  --pm-ok:#1f9d55; --pm-ok-soft:#e6f6ed; --pm-warn:#c97a10; --pm-warn-soft:#fdf2df; --pm-bad:#c2413b; --pm-bad-soft:#fbe9e8;
  --pm-off:#8a97a6; --pm-off-soft:#eef1f4; --pm-proc:#2f6fd6; --pm-proc-soft:#e7effc;
  --pm-radius:14px; --pm-radius-sm:10px; --pm-gap:16px;
  --pm-shadow-hover:0 6px 20px rgba(15,35,64,.08);
  /* sub-system hues (sidebar chips) -- quiet, readable on white and on navy */
  --hue-org:#5b6ee1; --hue-emp:#0a84c9; --hue-contract:#7c5cd6; --hue-pay:#1f9d55; --hue-att:#0e9f8e; --hue-bio:#0891b2; --hue-leave:#d4880f;
  --hue-req:#e0702b; --hue-ess:#2f8fd8; --hue-adv:#2a9d6f; --hue-eos:#64748b; --hue-ins:#d0477a; --hue-doc:#a77b14; --hue-msg:#3b6fd8; --hue-conduct:#c2413b; --hue-rep:#b0408f;
}
:root[data-theme="dark"]{
  --pm-ink:#eaf1f8; --pm-ink-2:#b4c3d3; --pm-ink-3:#8496a9;
  --pm-page:#0b1420; --pm-card:#111d2c; --pm-line:#1f2f42; --pm-line-strong:#2a3d53; --pm-hover:#15243a;
  --pm-accent:#4aaeea; --pm-accent-soft:#12304a; --pm-accent-ink:#8fd0f6;
  --pm-ok:#3ccb7f; --pm-ok-soft:#0f2b1d; --pm-warn:#f0b24a; --pm-warn-soft:#33250a; --pm-bad:#f07b74; --pm-bad-soft:#3a1514;
  --pm-off:#94a3b4; --pm-off-soft:#1b2736; --pm-proc:#6aa0ff; --pm-proc-soft:#152846;
  --pm-shadow-hover:0 8px 24px rgba(0,0,0,.35);
}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){
  --pm-ink:#eaf1f8; --pm-ink-2:#b4c3d3; --pm-ink-3:#8496a9;
  --pm-page:#0b1420; --pm-card:#111d2c; --pm-line:#1f2f42; --pm-line-strong:#2a3d53; --pm-hover:#15243a;
  --pm-accent:#4aaeea; --pm-accent-soft:#12304a; --pm-accent-ink:#8fd0f6;
  --pm-ok:#3ccb7f; --pm-ok-soft:#0f2b1d; --pm-warn:#f0b24a; --pm-warn-soft:#33250a; --pm-bad:#f07b74; --pm-bad-soft:#3a1514;
  --pm-off:#94a3b4; --pm-off-soft:#1b2736; --pm-proc:#6aa0ff; --pm-proc-soft:#152846;
} }

/* ── shared: the eye action (one visual shortcut for "open details" across MASAR) ── */
.m360-eye{ display:inline-flex; align-items:center; gap:6px; height:34px; padding:0 12px; border-radius:999px; border:1px solid var(--pm-line-strong);
  background:var(--pm-card); color:var(--pm-accent-ink); font:600 13px/1 var(--font-ui); cursor:pointer; white-space:nowrap;
  transition:background .15s, border-color .15s, color .15s; }
.m360-eye svg{ width:17px; height:17px; }
.m360-eye:hover{ background:var(--pm-accent-soft); border-color:var(--pm-accent); }
.m360-eye.is-icon{ width:34px; padding:0; justify-content:center; }
.m360-eye:focus-visible, .m360-ia:focus-visible, .m360-chip:focus-visible, .m360-combo-btn:focus-visible, .m360-seg button:focus-visible, .m360-pager button:focus-visible{ outline:none; box-shadow:0 0 0 3px color-mix(in srgb,var(--pm-accent) 35%,transparent); }

/* icon action buttons with a real tooltip (CSS, also on keyboard focus) */
.m360-ia{ position:relative; width:34px; height:34px; display:inline-grid; place-items:center; border-radius:10px; border:1px solid transparent; background:transparent;
  color:var(--pm-ink-3); cursor:pointer; transition:background .15s, color .15s, border-color .15s; }
.m360-ia svg{ width:18px; height:18px; }
.m360-ia:hover{ background:var(--pm-hover); color:var(--pm-ink); border-color:var(--pm-line); }
.m360-ia.wa:hover{ color:#1a9e55; }
.m360-ia[data-tip]::after{ content:attr(data-tip); position:absolute; bottom:calc(100% + 8px); inset-inline-start:50%; transform:translateX(50%); white-space:nowrap;
  background:var(--pm-ink); color:var(--pm-card); font:500 12px/1 var(--font-ui); padding:7px 9px; border-radius:7px; opacity:0; pointer-events:none; transition:opacity .12s .25s; z-index:30; }
[dir="ltr"] .m360-ia[data-tip]::after{ transform:translateX(-50%); }
.m360-ia[data-tip]::after{ display:none; max-width:240px; white-space:normal; width:max-content; line-height:1.35; }
.m360-ia[data-tip]:hover::after, .m360-ia[data-tip]:focus-visible::after{ display:block; opacity:1; }
/* a hidden tooltip must not widen the page (it used to add horizontal scroll at the outer card edge) */

/* ── page ── */
.m360-dir{ display:flex; flex-direction:column; gap:var(--pm-gap); width:100%; max-width:none; }
.m360-dir-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.m360-dir-head h1{ margin:0; font:700 24px/1.25 var(--font-ui); color:var(--pm-ink); }
.m360-dir-head p{ margin:4px 0 0; color:var(--pm-ink-3); font:400 14px/1.6 var(--font-ui); }
.m360-dir-head .m360-head-actions{ display:flex; gap:8px; flex-wrap:wrap; }
.m360-btn{ height:38px; padding:0 14px; border-radius:10px; border:1px solid var(--pm-line-strong); background:var(--pm-card); color:var(--pm-ink); font:600 13px/1 var(--font-ui); cursor:pointer; display:inline-flex; align-items:center; gap:7px; }
.m360-btn:hover{ background:var(--pm-hover); }
.m360-btn.primary{ background:var(--pm-accent); border-color:var(--pm-accent); color:#fff; }
.m360-btn.primary:hover{ filter:brightness(1.05); }
.m360-btn svg{ width:16px; height:16px; }

/* ── toolbar ── */
.m360-toolbar{ background:var(--pm-card); border:1px solid var(--pm-line); border-radius:var(--pm-radius); padding:14px; display:flex; flex-direction:column; gap:12px; }
.m360-toolbar-row{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.m360-search{ flex:1 1 320px; min-width:220px; position:relative; }
.m360-search input{ width:100%; height:42px; border-radius:11px; border:1px solid var(--pm-line-strong); background:var(--pm-page); color:var(--pm-ink); padding-inline:40px 14px; font:400 14px var(--font-ui); }
.m360-search input:focus{ outline:none; border-color:var(--pm-accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--pm-accent) 20%,transparent); background:var(--pm-card); }
.m360-search svg{ position:absolute; inset-inline-start:13px; top:50%; transform:translateY(-50%); width:17px; height:17px; color:var(--pm-ink-3); }
.m360-seg{ display:inline-flex; border:1px solid var(--pm-line-strong); border-radius:11px; overflow:hidden; background:var(--pm-page); }
.m360-seg button{ height:40px; width:42px; border:0; background:transparent; color:var(--pm-ink-3); cursor:pointer; display:grid; place-items:center; }
.m360-seg button svg{ width:18px; height:18px; }
.m360-seg button.on{ background:var(--pm-card); color:var(--pm-accent-ink); box-shadow:inset 0 0 0 1px var(--pm-line-strong); }
.m360-chips{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.m360-chip{ height:32px; padding:0 12px; border-radius:999px; border:1px solid var(--pm-line); background:var(--pm-card); color:var(--pm-ink-2); font:500 13px/1 var(--font-ui);
  cursor:pointer; display:inline-flex; align-items:center; gap:7px; }
.m360-chip b{ font-weight:600; color:var(--pm-ink-3); font-variant-numeric:tabular-nums; }
.m360-chip:hover{ border-color:var(--pm-line-strong); }
.m360-chip.on{ background:var(--pm-accent-soft); border-color:color-mix(in srgb,var(--pm-accent) 45%,transparent); color:var(--pm-accent-ink); }
.m360-chip.on b{ color:var(--pm-accent-ink); }
.m360-chip .m360-dot{ position:static; width:8px; height:8px; border:0; }
.m360-sep{ width:1px; height:22px; background:var(--pm-line); margin-inline:4px; }
.m360-active{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; padding-top:10px; border-top:1px dashed var(--pm-line); }
.m360-active .tag{ display:inline-flex; align-items:center; gap:6px; height:28px; padding:0 6px 0 10px; border-radius:8px; background:var(--pm-page); border:1px solid var(--pm-line); color:var(--pm-ink-2); font:500 12.5px/1 var(--font-ui); }
[dir="rtl"] .m360-active .tag{ padding:0 10px 0 6px; }
.m360-active .tag button{ width:20px; height:20px; border:0; border-radius:6px; background:transparent; color:var(--pm-ink-3); cursor:pointer; }
.m360-active .tag button:hover{ background:var(--pm-hover); color:var(--pm-bad); }
.m360-linkbtn{ border:0; background:none; color:var(--pm-accent-ink); font:600 13px var(--font-ui); cursor:pointer; padding:4px 6px; border-radius:6px; }
.m360-linkbtn:hover{ background:var(--pm-accent-soft); }
.m360-count{ margin-inline-start:auto; color:var(--pm-ink-3); font:500 13px var(--font-ui); }
.m360-count b{ color:var(--pm-ink); font-variant-numeric:tabular-nums; }
.m360-sort{ height:34px; border-radius:9px; border:1px solid var(--pm-line); background:var(--pm-card); color:var(--pm-ink-2); font:500 13px var(--font-ui); padding:0 10px; }

/* advanced filter panel */
.m360-adv{ display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:12px; padding:14px; border-radius:12px; background:var(--pm-page); border:1px solid var(--pm-line); }
.m360-field{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.m360-field > span{ font:600 12.5px var(--font-ui); color:var(--pm-ink-2); }
.m360-field select, .m360-field input{ height:38px; border-radius:9px; border:1px solid var(--pm-line-strong); background:var(--pm-card); color:var(--pm-ink); padding:0 10px; font:400 13.5px var(--font-ui); min-width:0; }
.m360-adv-foot{ grid-column:1/-1; display:flex; gap:8px; justify-content:flex-end; flex-wrap:wrap; }

/* searchable combobox (long lists) */
.m360-combo{ position:relative; min-width:0; }
.m360-combo-btn{ width:100%; height:42px; border-radius:11px; border:1px solid var(--pm-line-strong); background:var(--pm-card); color:var(--pm-ink); padding:0 12px; font:500 13.5px var(--font-ui);
  display:flex; align-items:center; justify-content:space-between; gap:8px; cursor:pointer; text-align:start; }
.m360-combo-btn span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.m360-combo-btn.has{ border-color:color-mix(in srgb,var(--pm-accent) 55%,transparent); background:var(--pm-accent-soft); color:var(--pm-accent-ink); }
.m360-combo-btn svg{ width:16px; height:16px; flex:none; color:var(--pm-ink-3); }
.m360-tb-combo{ flex:0 1 190px; min-width:150px; }
.m360-pop{ position:absolute; top:calc(100% + 6px); inset-inline-start:0; z-index:60; width:max(100%,260px); max-width:min(360px,calc(100vw - 32px)); background:var(--pm-card); border:1px solid var(--pm-line-strong);
  border-radius:12px; box-shadow:0 18px 40px rgba(15,35,64,.16); padding:8px; }
.m360-pop input{ width:100%; height:36px; border-radius:8px; border:1px solid var(--pm-line); background:var(--pm-page); color:var(--pm-ink); padding:0 10px; font:400 13.5px var(--font-ui); margin-bottom:6px; }
.m360-pop ul{ list-style:none; margin:0; padding:0; max-height:260px; overflow:auto; }
.m360-pop li{ padding:9px 10px; border-radius:8px; cursor:pointer; color:var(--pm-ink); font:500 13.5px var(--font-ui); display:flex; justify-content:space-between; gap:8px; }
.m360-pop li small{ color:var(--pm-ink-3); font-variant-numeric:tabular-nums; }
.m360-pop li[aria-selected="true"], .m360-pop li:hover{ background:var(--pm-hover); }
.m360-pop li.cur{ color:var(--pm-accent-ink); font-weight:700; }
.m360-pop .empty{ padding:12px; color:var(--pm-ink-3); font:400 13px var(--font-ui); text-align:center; }

/* ── employee cards: the grid uses the WHOLE content width (root cause of the old half-empty page) ── */
.m360-dir-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:var(--pm-gap); width:100%; }
.m360-emp{ position:relative; background:var(--pm-card); border:1px solid var(--pm-line); border-radius:var(--pm-radius); display:flex; flex-direction:column; min-width:0;
  transition:border-color .15s, box-shadow .2s, transform .2s; }
.m360-emp:hover{ border-color:var(--pm-line-strong); box-shadow:var(--pm-shadow-hover); }
.m360-emp-top{ display:flex; gap:12px; align-items:flex-start; padding:16px 16px 12px; }
.m360-av{ position:relative; width:52px; height:52px; flex:none; border-radius:14px; background:linear-gradient(140deg,var(--pm-accent-soft),color-mix(in srgb,var(--pm-accent) 22%,var(--pm-card)));
  color:var(--pm-accent-ink); display:grid; place-items:center; font:700 17px var(--font-ui); }
.m360-av img{ width:100%; height:100%; object-fit:cover; border-radius:14px; display:block; }
.m360-dot{ position:absolute; inset-block-end:-2px; inset-inline-end:-2px; width:14px; height:14px; border-radius:50%; border:2.5px solid var(--pm-card); background:var(--pm-off); }
.s-active .m360-dot, .m360-dot.s-active{ background:var(--pm-ok); } .s-on_leave .m360-dot, .m360-dot.s-on_leave{ background:var(--pm-warn); }
.s-suspended .m360-dot, .m360-dot.s-suspended{ background:var(--pm-bad); } .s-ended .m360-dot, .m360-dot.s-ended{ background:var(--pm-off); }
.s-in_process .m360-dot, .m360-dot.s-in_process{ background:var(--pm-proc); }
.m360-who{ min-width:0; flex:1; }
.m360-who h3{ margin:0; font:700 15.5px/1.35 var(--font-ui); color:var(--pm-ink); overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.m360-who .job{ margin:3px 0 0; color:var(--pm-ink-2); font:500 13px/1.4 var(--font-ui); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.m360-who .line{ display:flex; gap:6px; align-items:center; margin-top:8px; flex-wrap:wrap; }
.m360-code{ font:600 12px/1 var(--font-ui); font-variant-numeric:tabular-nums; color:var(--pm-ink-3); background:var(--pm-page); border:1px solid var(--pm-line); padding:5px 7px; border-radius:7px; direction:ltr; }
.m360-badge{ display:inline-flex; align-items:center; gap:5px; height:23px; padding:0 9px; border-radius:999px; font:600 12px/1 var(--font-ui); }
.m360-badge.s-active{ background:var(--pm-ok-soft); color:var(--pm-ok); } .m360-badge.s-on_leave{ background:var(--pm-warn-soft); color:var(--pm-warn); }
.m360-badge.s-suspended{ background:var(--pm-bad-soft); color:var(--pm-bad); } .m360-badge.s-ended{ background:var(--pm-off-soft); color:var(--pm-off); }
.m360-badge.s-in_process{ background:var(--pm-proc-soft); color:var(--pm-proc); }
.m360-flag{ position:absolute; top:12px; inset-inline-end:12px; }
.m360-flag .m360-ia{ width:30px; height:30px; color:var(--pm-warn); background:var(--pm-warn-soft); border-radius:9px; }
.m360-flag .m360-ia svg{ width:16px; height:16px; }
.m360-facts{ display:grid; grid-template-columns:1fr 1fr; gap:10px 14px; margin:0; padding:12px 16px 14px; border-top:1px solid var(--pm-line); }
.m360-facts div{ min-width:0; }
.m360-facts dt{ font:500 11.5px/1 var(--font-ui); color:var(--pm-ink-3); margin-bottom:5px; }
.m360-facts dd{ margin:0; font:600 13px/1.35 var(--font-ui); color:var(--pm-ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.m360-facts dd.na{ color:var(--pm-ink-3); font-weight:500; }
.m360-actbar{ margin-top:auto; display:flex; align-items:center; gap:4px; padding:10px 12px; border-top:1px solid var(--pm-line); background:color-mix(in srgb,var(--pm-page) 55%,var(--pm-card)); border-radius:0 0 var(--pm-radius) var(--pm-radius); }
.m360-actbar .m360-eye{ margin-inline-end:auto; }
.m360-menu{ position:absolute; z-index:70; min-width:200px; background:var(--pm-card); border:1px solid var(--pm-line-strong); border-radius:12px; box-shadow:0 18px 40px rgba(15,35,64,.18); padding:6px; }
.m360-menu button{ width:100%; display:flex; align-items:center; gap:9px; padding:10px; border:0; border-radius:8px; background:none; color:var(--pm-ink); font:500 13.5px var(--font-ui); cursor:pointer; text-align:start; }
.m360-menu button svg{ width:16px; height:16px; color:var(--pm-ink-3); }
.m360-menu button:hover, .m360-menu button:focus-visible{ background:var(--pm-hover); outline:none; }
.m360-menu button.danger{ color:var(--pm-bad); }

/* ── table view ── */
.m360-table-wrap{ background:var(--pm-card); border:1px solid var(--pm-line); border-radius:var(--pm-radius); overflow:auto; }
.m360-table{ width:100%; border-collapse:separate; border-spacing:0; min-width:980px; }
.m360-table th{ position:sticky; top:0; background:var(--pm-page); color:var(--pm-ink-3); font:600 12.5px var(--font-ui); text-align:start; padding:11px 14px; border-bottom:1px solid var(--pm-line); white-space:nowrap; z-index:1; }
.m360-table td{ padding:10px 14px; border-bottom:1px solid var(--pm-line); color:var(--pm-ink); font:500 13.5px var(--font-ui); vertical-align:middle; white-space:nowrap; max-width:240px; overflow:hidden; text-overflow:ellipsis; }
.m360-table tr:last-child td{ border-bottom:0; }
.m360-table tbody tr:hover td{ background:var(--pm-hover); }
.m360-table .who{ display:flex; gap:10px; align-items:center; }
.m360-table .m360-av{ width:36px; height:36px; border-radius:10px; font-size:13px; }
.m360-table .m360-av img{ border-radius:10px; }
.m360-table .m360-dot{ width:11px; height:11px; border-width:2px; }
.m360-table .acts{ display:flex; gap:2px; justify-content:flex-end; }

/* ── pager / states ── */
.m360-pager{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.m360-pager .pages{ display:flex; gap:4px; flex-wrap:wrap; }
.m360-pager button{ min-width:36px; height:36px; padding:0 10px; border-radius:9px; border:1px solid var(--pm-line); background:var(--pm-card); color:var(--pm-ink-2); font:600 13px var(--font-ui); cursor:pointer; font-variant-numeric:tabular-nums; }
.m360-pager button.on{ background:var(--pm-accent); border-color:var(--pm-accent); color:#fff; }
.m360-pager button:disabled{ opacity:.45; cursor:default; }
.m360-pager .size{ display:flex; gap:8px; align-items:center; color:var(--pm-ink-3); font:500 13px var(--font-ui); }
.m360-skel{ background:var(--pm-card); border:1px solid var(--pm-line); border-radius:var(--pm-radius); height:244px; position:relative; overflow:hidden; }
.m360-skel::before{ content:""; position:absolute; inset:16px 16px auto; height:52px; border-radius:12px; background:linear-gradient(90deg,var(--pm-page),var(--pm-hover),var(--pm-page)); background-size:200% 100%; animation:m360sh 1.2s linear infinite; }
.m360-skel::after{ content:""; position:absolute; inset:96px 16px auto; height:70px; border-radius:10px; background:linear-gradient(90deg,var(--pm-page),var(--pm-hover),var(--pm-page)); background-size:200% 100%; animation:m360sh 1.2s linear infinite; }
@keyframes m360sh{ to{ background-position:-200% 0; } }
.m360-empty{ grid-column:1/-1; background:var(--pm-card); border:1px dashed var(--pm-line-strong); border-radius:var(--pm-radius); padding:44px 20px; text-align:center; color:var(--pm-ink-2); }
.m360-empty h3{ margin:10px 0 6px; font:700 16px var(--font-ui); color:var(--pm-ink); }
.m360-empty p{ margin:0 0 14px; font:400 14px/1.6 var(--font-ui); }
.m360-empty svg{ width:40px; height:40px; color:var(--pm-ink-3); }
.m360-empty.err svg{ color:var(--pm-bad); }

@media (max-width:640px){
  .m360-dir-head h1{ font-size:21px; }
  .m360-toolbar{ padding:12px; }
  .m360-tb-combo{ flex:1 1 calc(50% - 6px); }
  .m360-dir-grid{ grid-template-columns:1fr; gap:12px; }
  .m360-count{ margin-inline-start:0; width:100%; }
  .m360-ia{ width:40px; height:40px; }           /* touch targets */
  .m360-eye{ height:40px; }
  .m360-chips.scroll{ flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; margin-inline:-2px; padding-inline:2px; }
  .m360-chips.scroll .m360-chip{ flex:none; }
}
@media (prefers-reduced-motion:reduce){ .m360-emp, .m360-ia, .m360-eye{ transition:none; } .m360-skel::before, .m360-skel::after{ animation:none; } }

/* ── two-level sidebar refinements (the existing rail + contextual nav, uiux-commercial.js renderNav) ── */
.pm-nav-head{ display:flex; align-items:center; gap:10px; padding:4px 4px 12px; margin-bottom:6px; border-bottom:1px solid rgba(238,243,247,.1); }
.pm-nav-head .chip{ width:34px; height:34px; border-radius:10px; display:grid; place-items:center; color:#fff; flex:none; }
.pm-nav-head .chip svg{ width:19px; height:19px; }
.pm-nav-head b{ font:700 15px/1.2 var(--font-ui); color:#fff; }
.pm-nav-head small{ display:block; font:500 11.5px/1.3 var(--font-ui); color:rgba(238,243,247,.55); margin-top:2px; }
html[data-sidebar-tone="light"] .pm-nav-head{ border-bottom-color:var(--border-hairline); }
html[data-sidebar-tone="light"] .pm-nav-head b{ color:var(--text-primary); }
html[data-sidebar-tone="light"] .pm-nav-head small{ color:var(--text-muted); }
/* a sub-system (group) carries its own quiet colour chip */
.ds-sidebar #nav .nav-parent > .nav-item .nav-icon[data-hue]{ background:color-mix(in srgb,var(--h) 18%,transparent); color:var(--h); }
html[data-sidebar-tone="light"] .ds-sidebar #nav .nav-parent > .nav-item .nav-icon[data-hue]{ background:color-mix(in srgb,var(--h) 12%,#fff); }
.ds-sidebar #nav .nav-item{ min-height:42px; }
.ds-sidebar #nav .nav-children .nav-item, .ds-sidebar #nav .sub-nav-item{ min-height:38px; }
@media (min-width:1024px){
  .ds-sidebar:not(.is-collapsed){ width:var(--pm-panel-w,300px); }
}
/* labels wrap to a second line rather than being cut */
.ds-sidebar:not(.is-collapsed) #nav .nav-item > span:not(.nav-icon):not(.nav-badge){ white-space:normal; line-height:1.3; overflow:visible; text-overflow:clip;
}

/* visually hidden, still announced */
.sr-only{ position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* 1024–1599px: the module rail stays compact (icon + short label) even if the user saved it expanded, so content keeps its columns */
@media (min-width:1024px) and (max-width:1599px){
  .module-rail.is-expanded{ width:var(--rail-width); }
  .module-rail.is-expanded .module-rail-btn{ flex-direction:column; justify-content:center; gap:4px; padding:var(--space-2) 4px; margin:0 var(--space-2) var(--space-2); }
  .module-rail.is-expanded .module-rail-label{ display:none; }
}
@media (min-width:1024px) and (max-width:1279px){ .ds-sidebar:not(.is-collapsed){ width:272px; } }
/* phones: secondary header buttons become icon buttons (their text stays for screen readers) */
@media (max-width:640px){
  .m360-head-actions .m360-btn:not(.primary){ width:40px; padding:0; justify-content:center; }
  .m360-head-actions .m360-btn:not(.primary) span{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
  .m360-dir-head{ align-items:flex-start; }
  .m360-toolbar-row .m360-search{ flex:1 1 100%; }
  .m360-adv{ grid-template-columns:1fr 1fr; padding:12px; }
  .m360-adv .m360-field.wide{ grid-column:1/-1; }
}

/* compact rail (desktop): a short label under each icon, Ektifa-style -- never a clipped mid-word label */
@media (min-width:1024px){
  .module-rail{ --rail-width:88px; }
  .module-rail:not(.is-expanded) .module-rail-btn{ padding:8px 2px; }
  .module-rail .module-rail-btn .module-rail-label{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; white-space:normal; text-align:center; font:600 11px/1.3 var(--font-ui); max-width:80px; }
  .module-rail.is-expanded .module-rail-btn .module-rail-label{ display:block; text-align:start; font-size:13px; max-width:none; }
}
@media (min-width:1024px) and (max-width:1599px){ .module-rail.is-expanded .module-rail-btn .module-rail-label{ display:-webkit-box; text-align:center; font-size:11px; max-width:80px; } }
/* table: actions sit right after the employee name, so they never scroll out of view */
.m360-table .acts{ justify-content:flex-start; }
.m360-pop.flip{ inset-inline-start:auto; inset-inline-end:0; }

/* ── R7 attendance home ── */
.m360-h2{ margin:8px 0 0; font:700 17px/1.3 var(--font-ui); color:var(--pm-ink); }
.m360-qgrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:12px; }
.m360-q{ position:relative; text-align:start; background:var(--pm-card); border:1px solid var(--pm-line); border-radius:var(--pm-radius); padding:14px 16px; cursor:pointer; display:flex; flex-direction:column; gap:4px; min-height:118px; color:var(--pm-ink); transition:border-color .15s, box-shadow .2s; }
.m360-q:hover{ border-color:var(--pm-line-strong); box-shadow:var(--pm-shadow-hover); }
.m360-q:focus-visible{ outline:none; box-shadow:0 0 0 3px color-mix(in srgb,var(--pm-accent) 35%,transparent); }
.m360-q .ic{ position:absolute; top:12px; inset-inline-end:12px; width:30px; height:30px; border-radius:9px; display:grid; place-items:center; font-size:15px; background:var(--pm-page); }
.m360-q .n{ font:700 28px/1.1 var(--font-ui); font-variant-numeric:tabular-nums; }
.m360-q .t{ font:600 14px/1.35 var(--font-ui); color:var(--pm-ink-2); }
.m360-q small{ color:var(--pm-ink-3); font:500 12px/1.4 var(--font-ui); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.m360-q.t-ok .ic{ background:var(--pm-ok-soft); color:var(--pm-ok); } .m360-q.t-warn .ic{ background:var(--pm-warn-soft); color:var(--pm-warn); }
.m360-q.t-bad .ic{ background:var(--pm-bad-soft); color:var(--pm-bad); } .m360-q.t-proc .ic{ background:var(--pm-proc-soft); color:var(--pm-proc); }
.m360-insights{ display:flex; flex-direction:column; gap:10px; }
.m360-ins{ display:flex; gap:12px; align-items:flex-start; justify-content:space-between; background:var(--pm-card); border:1px solid var(--pm-line); border-inline-start:4px solid var(--pm-proc); border-radius:12px; padding:12px 14px; }
.m360-ins.sev-warning{ border-inline-start-color:var(--pm-warn); } .m360-ins.sev-critical{ border-inline-start-color:var(--pm-bad); }
.m360-ins p{ margin:4px 0 0; font:400 13.5px/1.6 var(--font-ui); color:var(--pm-ink-2); }
.m360-ins b{ font:700 14.5px var(--font-ui); color:var(--pm-ink); }
.m360-centers{ display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:10px; }
.m360-center{ text-align:start; background:var(--pm-card); border:1px solid var(--pm-line); border-radius:12px; padding:14px; cursor:pointer; display:flex; flex-direction:column; gap:4px; color:var(--pm-ink); font:600 14px var(--font-ui); }
.m360-center small{ color:var(--pm-ink-3); font-weight:500; }
.m360-center:hover{ border-color:var(--pm-accent); }
.muted{ color:var(--pm-ink-3); }
@media (max-width:640px){ .m360-qgrid{ grid-template-columns:1fr 1fr; gap:8px; } .m360-q{ min-height:104px; padding:12px; } .m360-q .n{ font-size:24px; } .m360-ins{ flex-direction:column; } }
/* tiles never widen the grid: long name lists truncate inside the tile (390px phones clipped the grid) */
.m360-qgrid > .m360-q{ min-width:0; overflow:hidden; }
.m360-q small, .m360-q .t{ max-width:100%; }