/* ============================================================================
   MGC Reporting Portal — Modernist design system
   Implements the Claude Design handoff ("Dashboard UI mockups", Aug 2026).

   Loaded LAST on every page so it restyles the existing markup in place: the
   pages keep their class names, element ids and JavaScript exactly as they are,
   and only their appearance changes. Nothing here touches behaviour.

   Design language: editorial / modernist — square corners, 2px rules, heavy
   Archivo display weights, MGC red accent, gold employee codes, hairline KPI
   grid, tabular figures throughout. Light and dark are both first-class.
   ========================================================================= */

:root{
  /* ramps from the handoff design system */
  --mgc-bg:#f3f2f2; --mgc-surface:#eae9e9; --mgc-text:#201e1d;
  --mgc-accent:#ec3013; --mgc-accent-2:#e15b47;
  --mgc-divider:color-mix(in srgb,#201e1d 40%,transparent);
  --mgc-n100:#f8f4f4; --mgc-n200:#eae7e7; --mgc-n300:#d7d3d3; --mgc-n400:#bab6b6;
  --mgc-n500:#9b9797; --mgc-n600:#7d7979; --mgc-n700:#605d5d; --mgc-n800:#444141;
  --mgc-n900:#2d2b2b;
  --mgc-a100:#fff2ef; --mgc-a600:#dd2b0f; --mgc-a700:#ae1800; --mgc-a800:#7c1405;
  --mgc-gold:#c9a25a;
  --mgc-good:#16a34a; --mgc-warn:#d97706; --mgc-bad:#dc2626;
  --mgc-s1:4px; --mgc-s2:8px; --mgc-s3:12px; --mgc-s4:16px; --mgc-s6:24px;
  --mgc-shadow-sm:0 1px 2px color-mix(in srgb,#2d2b2b 14%,transparent);
  --mgc-shadow-md:0 3px 10px color-mix(in srgb,#2d2b2b 16%,transparent);
  --mgc-shadow-lg:0 12px 32px color-mix(in srgb,#2d2b2b 22%,transparent);

  /* map the pages' own variables onto the system so untouched rules inherit it.
     --card stays SURFACE so cards/login panels still lift off the page; the
     .panel rule below deliberately paints table panels on the page colour with
     a 2px rule instead, which is the system's table treatment. */
  --bg:var(--mgc-bg); --bg2:var(--mgc-bg); --card:var(--mgc-surface);
  --field:var(--mgc-surface); --panel:var(--mgc-surface); --line:var(--mgc-divider);
  --txt:var(--mgc-text); --txt2:var(--mgc-n800); --mut:var(--mgc-n700);
  --faint:var(--mgc-n500); --brand:var(--mgc-accent); --brand2:var(--mgc-accent-2);
  --gold:var(--mgc-gold); --good:var(--mgc-good); --bad:var(--mgc-bad);
  --shadow2:var(--mgc-shadow-md); --rad:0px;
}
:root[data-theme=dark]{
  --mgc-bg:#1a1918; --mgc-surface:#252322; --mgc-text:#f3f2f2;
  --mgc-accent:#ff563c; --mgc-divider:color-mix(in srgb,#f3f2f2 30%,transparent);
  --mgc-n500:#9b9797; --mgc-n600:#a8a4a4; --mgc-n700:#cfcbca; --mgc-n800:#e4e0e0;
  --mgc-n100:#2d2b2b; --mgc-n200:#332f2e; --mgc-n300:#3a3736;
  --mgc-a100:color-mix(in srgb,#ff563c 18%,transparent); --mgc-a800:#ffc4b8;
  --mgc-good:#4ade80; --mgc-bad:#f87171; --mgc-warn:#fbbf24;
  --mgc-shadow-md:0 6px 22px rgba(0,0,0,.5);
  --mgc-shadow-lg:0 18px 44px rgba(0,0,0,.6);
}

/* ── base ───────────────────────────────────────────────────────────────── */
body{
  background:var(--mgc-bg)!important; color:var(--mgc-text)!important;
  font-family:'Archivo',system-ui,sans-serif!important;
  font-size:15px; line-height:1.55;
}
h1,h2,h3,h4,h5,h6{font-family:'Archivo',system-ui,sans-serif;font-weight:800;
  line-height:1.12;letter-spacing:-.015em}
:focus-visible{outline:2px solid var(--mgc-accent);outline-offset:2px}
::selection{background:color-mix(in srgb,var(--mgc-accent) 30%,transparent)}
/* square everything — the system has no radii */
.nav,.nav a,.kpi,.panel,.btn,.userchip,.rk,.actv,.rtag,.tag,select,input,
.seg,.segbtn,.card,.modal,.amodal,.pill,.deptchip,.crmf,.pbtn,.rbtn,.salinp,
.ib-item,.ib-track,.mlist,.psum,.pos,.dcard,.kpi .ic,.section .ic,#search,
.ddmenu,.chip,.stat,.crmb,.logo-chip,.submit,.tbtn,.camwrap,.earned,.msg,
.field input,.togglepw,.dialog,.modal-x{border-radius:0!important}
/* login / employee-portal primary action follows the accent, flat not gradient */
.submit,.btn.ok{
  background:var(--mgc-accent)!important; background-image:none!important;
  color:#fff!important; box-shadow:none!important; font-weight:800!important;
}
.submit:hover{background:var(--mgc-a600)!important}

/* ── header ─────────────────────────────────────────────────────────────── */
.top{
  background:var(--mgc-bg)!important; backdrop-filter:none!important;
  border-bottom:2px solid var(--mgc-divider)!important;
}
.top::after{display:none!important}
.top-in{padding:0!important;gap:0!important;max-width:none!important}
.brand{
  justify-content:flex-start!important; gap:12px!important;
  padding:12px 24px 10px!important;
}
.logo-chip{
  background:#141210!important; border:0!important; height:auto!important;
  min-width:0!important; padding:6px 12px!important; box-shadow:none!important;
}
.logo-chip img{height:34px!important}
.brand h1{font-size:16px!important;font-weight:800!important;line-height:1.1!important}
.brand p{font-size:11px!important;color:var(--mgc-n600)!important}
.menurow{
  padding:0 24px!important; gap:0!important; align-items:stretch!important;
  border-top:0!important;
}
/* Project Sales' view switch (Availability / Ratelist) sits under the filters.
   It has to be indented like .menurow — this file zeroes .top-in's padding, so
   a row that sets none of its own lands flush against the window edge while
   everything above it is inset 24px (Saad 2026-08-12). It scrolls rather than
   wraps, so a narrow window never stacks the two buttons. */
.viewrow{
  padding:0 24px 10px!important; gap:6px!important;
  overflow-x:auto; scrollbar-width:none; flex-wrap:nowrap!important;
}
.viewrow::-webkit-scrollbar{display:none}
.viewrow .vbtn{flex:0 0 auto}
/* nav becomes underline tabs, not pills */
.nav{
  background:transparent!important; border:0!important; padding:0!important;
  gap:2px!important; border-bottom:2px solid var(--mgc-divider)!important;
  flex:1 1 auto; margin:0!important;
}
.nav a,.ddbtn{
  padding:10px 14px!important; font-size:13px!important; font-weight:600!important;
  color:var(--mgc-n700)!important; background:transparent!important;
  border:0!important; border-bottom:3px solid transparent!important;
  margin-bottom:-2px!important; white-space:nowrap;
}
.nav a:hover,.ddbtn:hover{color:var(--mgc-accent)!important}
.nav a.active,.ddbtn.active{
  color:var(--mgc-accent)!important; background:transparent!important;
  border-bottom-color:var(--mgc-accent)!important;
}
.ddmenu{
  background:var(--mgc-bg)!important; border:2px solid var(--mgc-divider)!important;
  box-shadow:var(--mgc-shadow-lg)!important; padding:0!important;
}
.ddmenu a{
  padding:11px 14px!important; font-size:13px!important; font-weight:600!important;
  color:var(--mgc-n700)!important; border:0!important;
}
.ddmenu a:hover{background:var(--mgc-surface)!important;color:var(--mgc-accent)!important}
.ddmenu a.active{background:var(--mgc-accent)!important;color:#fff!important}
.ctrls{padding:0 0 0 12px!important;align-items:center!important}
.userchip{
  background:transparent!important; border:0!important; padding:0 0 0 4px!important;
  font-size:13px!important; color:var(--mgc-n600)!important;
}
.userchip b{color:var(--mgc-text)!important;font-weight:700!important}
#logout,.userchip .btn{
  background:transparent!important; border:0!important; padding:0 0 0 8px!important;
  color:var(--mgc-accent)!important; font-weight:600!important; font-size:13px!important;
}
#theme,.btn.icon{
  width:34px!important; height:34px!important; padding:0!important;
  background:transparent!important; border:1px solid var(--mgc-divider)!important;
  color:var(--mgc-text)!important; display:grid; place-items:center;
}
#theme:hover{background:color-mix(in srgb,var(--mgc-text) 7%,transparent)!important}

/* ── page shell ─────────────────────────────────────────────────────────── */
.wrap{padding:24px!important;max-width:1500px!important}
.section{margin:0 0 var(--mgc-s3)!important;text-align:left!important}
.section .st{gap:12px!important}
.section .ic{
  background:transparent!important; border:2px solid var(--mgc-divider)!important;
  color:var(--mgc-accent)!important; width:34px!important; height:34px!important;
}
.section h2{font-size:20px!important}
.section .sub{font-size:11.5px!important;color:var(--mgc-n600)!important}

/* ── KPI grid: hairline lattice, the system's signature ─────────────────── */
.kpis{
  gap:2px!important; background:var(--mgc-divider)!important;
  border:2px solid var(--mgc-divider)!important; margin-bottom:var(--mgc-s6)!important;
}
.kpi{
  background:var(--mgc-bg)!important; border:0!important; box-shadow:none!important;
  padding:14px 16px!important;
}
.kpi::before{display:none!important}
.kpi .lab,.kpi .l,.kpi .lbl{
  font-size:10px!important; letter-spacing:.1em!important; text-transform:uppercase;
  color:var(--mgc-accent)!important; font-weight:600!important;
}
.kpi .val,.kpi .v{
  font-size:26px!important; font-weight:800!important; letter-spacing:-.02em!important;
  margin-top:6px!important; font-variant-numeric:tabular-nums; color:var(--mgc-text)!important;
}
.kpi.accent .val,.kpi.accent .v{color:var(--mgc-accent)!important}
.kpi .sub,.kpi .s{font-size:11.5px!important;color:var(--mgc-n600)!important;margin-top:4px!important}
.kpi .ic{opacity:.45!important;border:0!important;background:transparent!important}

/* ── segmented controls / tabs ──────────────────────────────────────────── */
.seg,.filters .seg{
  background:transparent!important; border:1px solid var(--mgc-divider)!important;
  padding:0!important; box-shadow:none!important; gap:0!important;
  display:inline-flex!important; width:auto!important; overflow:hidden;
}
.segbtn{
  padding:7px 14px!important; font-size:13px!important; font-weight:600!important;
  color:var(--mgc-text)!important; background:transparent!important; flex:0 0 auto!important;
  border:0!important; border-left:1px solid var(--mgc-divider)!important;
}
.segbtn:first-child{border-left:0!important}
.segbtn:hover{background:color-mix(in srgb,var(--mgc-text) 7%,transparent)!important}
.segbtn.active{background:var(--mgc-accent)!important;color:#fff!important}

/* ── chips ──────────────────────────────────────────────────────────────── */
.deptchip,.crmf,.lbbtn{
  background:transparent!important; border:1px solid var(--mgc-divider)!important;
  color:var(--mgc-text)!important; padding:5px 12px!important; font-size:12px!important;
  font-weight:600!important;
}
.deptchip:hover,.crmf:hover,.lbbtn:hover{background:color-mix(in srgb,var(--mgc-text) 7%,transparent)!important}
.deptchip.active,.crmf.on,.lbbtn.active{
  background:var(--mgc-accent)!important; color:#fff!important; border-color:var(--mgc-accent)!important;
}
.deptchip .n{opacity:.75!important}

/* ── buttons & inputs ───────────────────────────────────────────────────── */
.btn,.rbtn,.pbtn,.backbtn{
  font-family:'Archivo',system-ui,sans-serif!important; font-weight:800!important;
  font-size:14px!important; padding:8px 14px!important;
  background:transparent!important; color:var(--mgc-text)!important;
  border:1px solid var(--mgc-divider)!important;
}
.btn:hover,.rbtn:hover,.backbtn:hover{background:color-mix(in srgb,var(--mgc-text) 7%,transparent)!important}
.pbtn,.pbtn:not(.ghost){background:var(--mgc-accent)!important;color:#fff!important;border-color:var(--mgc-accent)!important}
.pbtn:hover:not(.ghost){background:var(--mgc-a600)!important}
.pbtn.ghost{background:transparent!important;color:var(--mgc-text)!important;border-color:var(--mgc-divider)!important}
input,select,#search,.salinp,.input,.filt input,.filt select{
  background:var(--mgc-surface)!important; color:var(--mgc-text)!important;
  border:1px solid var(--mgc-divider)!important; font-size:14px!important;
  padding:7px 10px!important; min-height:36px;
}
input:focus,select:focus,#search:focus,.salinp:focus{border-color:var(--mgc-accent)!important}
input::placeholder{color:var(--mgc-n500)!important}

/* ── panels & tables ────────────────────────────────────────────────────── */
.panel{
  background:var(--mgc-bg)!important; border:2px solid var(--mgc-divider)!important;
  box-shadow:none!important;
}
table{font-size:13px!important;font-variant-numeric:tabular-nums}
thead th{
  background:var(--mgc-bg)!important; color:var(--mgc-n600)!important;
  font-size:11px!important; letter-spacing:.08em!important; text-transform:uppercase;
  font-weight:600!important; padding:10px!important;
  border-bottom:2px solid var(--mgc-divider)!important;
}
tbody td{
  padding:10px!important; border-bottom:1px solid var(--mgc-divider)!important;
  color:var(--mgc-text)!important;
}
tbody tr:nth-child(even),tbody tr:nth-child(odd){background:transparent!important}
tbody tr:hover{background:color-mix(in srgb,var(--mgc-text) 4%,transparent)!important}
tfoot td,tfoot tr{
  background:var(--mgc-surface)!important; font-weight:700!important;
  border-top:2px solid var(--mgc-divider)!important; color:var(--mgc-text)!important;
}
/* identity cell: name + gold code, as in every mockup */
.nm,.emp{font-weight:600!important;color:var(--mgc-text)!important}
.dg,.sub2{color:var(--mgc-gold)!important;font-weight:600!important;font-size:10.5px!important}
.pos,.rk{
  background:transparent!important; color:var(--mgc-n600)!important;
  font-weight:600!important; width:auto!important; min-width:0!important;
}
.pos.g,.rk.g{background:transparent!important;color:var(--mgc-accent)!important}
.mono{font-family:ui-monospace,Menlo,Consolas,monospace!important;color:var(--mgc-n600)!important}

/* ── tags & pills ───────────────────────────────────────────────────────── */
.tag,.pill,.crmb,.rtag,.ztag,.chip{
  font-size:11px!important; letter-spacing:.02em!important; padding:3px 10px!important;
  font-weight:600!important;
}
.tag.on,.pill.ontime{background:color-mix(in srgb,var(--mgc-good) 16%,transparent)!important;color:var(--mgc-good)!important}
.tag.off{background:color-mix(in srgb,var(--mgc-bad) 15%,transparent)!important;color:var(--mgc-bad)!important}
.tag.r,.crmb.acc{background:var(--mgc-a100)!important;color:var(--mgc-a800)!important}
.tag.w,.pill.late,.crmb.rel{background:color-mix(in srgb,var(--mgc-warn) 18%,transparent)!important;color:var(--mgc-warn)!important}

/* ── notes / footers ────────────────────────────────────────────────────── */
.note{
  background:transparent!important; border:0!important;
  border-left:3px solid var(--mgc-accent)!important; padding:2px 0 2px 14px!important;
  font-size:12px!important; color:var(--mgc-n600)!important;
}
.note b{color:var(--mgc-n800)!important}
.foot{font-size:11.5px!important;color:var(--mgc-n600)!important;margin-top:var(--mgc-s4)!important}

/* ── modals: accent header bar, square, 2px frame ──────────────────────── */
.modal-bg,.amodal-bg,.dm-bg{background:color-mix(in srgb,var(--mgc-n900) 45%,transparent)!important;backdrop-filter:none!important}
.modal,.amodal,.dmodal{
  background:var(--mgc-bg)!important; border:2px solid var(--mgc-divider)!important;
  box-shadow:var(--mgc-shadow-lg)!important;
}
.modal-hd,.amodal-hd,.dm-hd{background:var(--mgc-accent)!important;color:#fff!important;padding:12px 18px!important}
.modal-hd h3,.amodal-hd h3{font-size:16px!important;font-weight:800!important}
.modal-x,.amodal-x,.dm-x{background:transparent!important;font-size:20px!important;color:#fff!important}
.pf{background:transparent!important;border-bottom:1px solid var(--mgc-divider)!important;padding:10px 12px!important}
.pf .k{font-size:10px!important;letter-spacing:.08em!important;color:var(--mgc-n600)!important}
.pf .v{font-size:14px!important;color:var(--mgc-text)!important}

/* ── dashboard zone explorer ────────────────────────────────────────────── */
.ib-item{border:0!important;border-bottom:1px solid var(--mgc-divider)!important;background:transparent!important}
.ib-item:last-child{border-bottom:0!important}
.ib-row:hover{background:color-mix(in srgb,var(--mgc-text) 4%,transparent)!important}
.ib-name{font-size:13.5px!important;font-weight:600!important}
.ib-name .sq{border-radius:0!important;width:9px!important;height:9px!important}
.ztag{background:transparent!important;border:1px solid var(--mgc-divider)!important;color:var(--mgc-n600)!important}
.ib-track{background:var(--mgc-surface)!important;height:14px!important}
.ib-fill{border-radius:0!important}
.ib-val{font-size:15px!important;font-weight:800!important;font-variant-numeric:tabular-nums}
.ib-val span{font-size:10.5px!important;color:var(--mgc-n600)!important}
.ib-fin b{font-size:13px!important;font-weight:800!important}
.ib-fin span{font-size:9px!important;letter-spacing:.08em!important;color:var(--mgc-n600)!important}
/* accordion tree */
.mlist{border:0!important}
.mhead{
  font-size:10.5px!important; letter-spacing:.08em!important; text-transform:uppercase;
  color:var(--mgc-n600)!important; border-bottom:2px solid var(--mgc-divider)!important;
}
.mrow{border-bottom:1px solid var(--mgc-divider)!important;font-size:13px!important}
.mrow:hover{background:color-mix(in srgb,var(--mgc-text) 4%,transparent)!important}
.mnode.open>.mrow{background:color-mix(in srgb,var(--mgc-accent) 8%,transparent)!important}
.mnode.open>.msub{border-left:2px solid var(--mgc-accent)!important}
.psum{background:var(--mgc-surface)!important;border:0!important}

/* ── salary sheet: keep the editable cells obvious ─────────────────────── */
table.sal input.ed{
  background:color-mix(in srgb,var(--mgc-accent) 8%,transparent)!important;
  border:1px solid color-mix(in srgb,var(--mgc-accent) 35%,transparent)!important;
  color:var(--mgc-text)!important; min-height:0!important; padding:4px 6px!important;
}
table.sal input.ed:focus{border-color:var(--mgc-accent)!important}
table.sal td.ded{color:var(--mgc-bad)!important}
table.sal td.cl{color:var(--mgc-good)!important}
table.sal td.warn{color:var(--mgc-warn)!important}
.net,td.net{color:var(--mgc-good)!important;font-weight:800!important}

/* ── attendance admin cards ─────────────────────────────────────────────── */
/* admin config cards sit on the page colour inside a 2px rule; the login /
   attendance self-service cards keep the raised surface so they read as a
   distinct panel against the page */
.attcard{background:var(--mgc-bg)!important;border:2px solid var(--mgc-divider)!important;box-shadow:none!important}
.card{background:var(--mgc-surface)!important;border:2px solid var(--mgc-divider)!important;box-shadow:none!important}
.atttitle,.card h3{font-size:14px!important;font-weight:800!important}
.appr{border-bottom:1px solid var(--mgc-divider)!important}
.appr .yes{background:var(--mgc-accent)!important;color:#fff!important;border:0!important}
.appr .no{background:transparent!important;border:1px solid var(--mgc-divider)!important;color:var(--mgc-n700)!important}
label{font-size:12px!important;color:var(--mgc-n700)!important;text-transform:none!important;letter-spacing:0!important;font-weight:600!important}

/* ── mobile ─────────────────────────────────────────────────────────────── */
@media (max-width:768px){
  .wrap{padding:16px 14px!important}
  .brand{padding:10px 14px 8px!important}
  .menurow{padding:0 14px!important}
  .viewrow{padding:0 14px 8px!important}
  .kpis{grid-template-columns:repeat(2,1fr)!important}
  .kpi .val,.kpi .v{font-size:21px!important}
  .section h2{font-size:17px!important}
  .seg{display:flex!important;width:100%!important}
  .segbtn{flex:1 1 auto!important;padding:9px 8px!important;font-size:12px!important}
  thead th,tbody td{padding:8px!important}
}
@media (max-width:420px){
  .kpis{grid-template-columns:1fr!important}
}

/* ================= mobile hamburger drawer (mgc-nav.js) ================= */
.mnav-burger{display:none}
.mnav-ov{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:400;
  opacity:0;pointer-events:none;transition:opacity .2s}
.mnav-drawer{position:fixed;top:0;left:0;bottom:0;width:min(80vw,320px);
  background:var(--card,#fff);color:var(--txt,#111);z-index:401;
  transform:translateX(-103%);transition:transform .22s ease;
  overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:16px 14px calc(20px + env(safe-area-inset-bottom));
  border-right:2px solid var(--line,#ccc)}
body.mnav-open .mnav-ov{opacity:1;pointer-events:auto}
body.mnav-open .mnav-drawer{transform:none}
body.mnav-open{overflow:hidden}
.mnav-head{font-weight:800;font-size:15px;letter-spacing:-.01em;
  padding:6px 8px 14px;border-bottom:2px solid var(--line,#ccc);margin-bottom:6px}
.mnav-link{display:block;padding:13px 10px;font-size:14px;font-weight:700;
  color:var(--mut,#666);text-decoration:none;
  border-bottom:1px solid color-mix(in srgb,var(--line,#ccc) 55%,transparent)}
.mnav-link:active{background:color-mix(in srgb,var(--brand,#ec3013) 10%,transparent)}
.mnav-link.active{background:var(--brand,#ec3013);color:#fff}
.mnav-grp{margin-top:2px}
.mnav-ttl{font-size:10.5px;text-transform:uppercase;letter-spacing:.12em;
  color:var(--brand,#ec3013);font-weight:800;margin:16px 0 2px;padding:0 8px}
.mnav-link.sub{padding-left:18px}
@media(max-width:768px){
  .top .nav{display:none!important}
  .mnav-burger{display:inline-flex;flex-direction:column;justify-content:center;
    gap:4px;width:44px;height:40px;padding:0 11px;flex:none;cursor:pointer;
    background:var(--panel,#eee);border:1px solid var(--line,#ccc);border-radius:0}
  .mnav-burger span{display:block;height:2px;background:var(--txt,#111);transition:.2s}
  body.mnav-open .mnav-burger span:nth-child(1){transform:translateY(6px) rotate(45deg)}
  body.mnav-open .mnav-burger span:nth-child(2){opacity:0}
  body.mnav-open .mnav-burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
  .top .menurow{flex-wrap:nowrap}
}
@media(min-width:769px){.mnav-drawer,.mnav-ov{display:none}}

/* ============ phone header: ☰ + logo + title on ONE row ============ */
@media(max-width:768px){
  .top-in{padding:9px 10px!important;gap:8px!important}
  .top .brand{justify-content:flex-start!important;text-align:left!important;
    flex-wrap:nowrap!important;gap:9px!important;min-width:0}
  /* the title container — was >div:last-child until the user chip moved into
     the brand row (Saad 2026-08-13), which made the chip the last child and
     silently un-ellipsized the title */
  .top .brand>div:not(.logo-chip){justify-content:flex-start!important;min-width:0;
    flex-wrap:nowrap!important;overflow:hidden}
  /* the chip stays top-right ON the brand row on phones: compact, never
     wrapping mid-phrase, title ellipsizes to make room (Saad 2026-08-13) */
  .top .brand .userchip{flex:0 0 auto;margin-left:auto!important;overflow:visible;
    padding:3px 9px!important;font-size:11px!important;gap:5px!important;white-space:nowrap}
  .top .brand h1{font-size:14.5px!important;overflow:hidden;text-overflow:ellipsis;
    white-space:nowrap!important;min-width:0}
  .top .brand p{display:none!important}     /* subtitle: not worth a row on phones */
  .logo-chip{height:36px!important;min-width:36px!important;padding:4px 8px!important}
  .logo-chip img{max-width:150px!important}
  .top .menurow{gap:8px!important}
  .top .ctrls{width:100%;justify-content:flex-start!important;gap:7px!important;
    flex-wrap:wrap!important}
  .top .ctrls select{flex:1 1 150px;min-width:0;max-width:220px}
  .userchip{margin-left:auto}
  /* content uses the full phone width */
  .wrap{padding:12px 8px!important}
  .kpi{padding:13px 12px!important}
  .panel{border-left-width:1px!important;border-right-width:1px!important}
  .attcard,.card{padding:14px 12px!important}
  .detbox{padding:12px 10px!important}
}

/* cross-portal link in the nav (hrm.mgcdevelopments.tech phase-1 split) */
.nav a.ext{margin-left:auto;color:var(--mgc-accent,#ec3013)!important;font-weight:800}
.nav a.ext:hover{background:color-mix(in srgb,var(--mgc-accent,#ec3013) 12%,transparent)}
.mnav-link.ext{color:var(--brand,#ec3013)}


/* ── the menu's right-hand administration dropdown (Saad 2026-08-14) ───────
   Users & Roles and Setup were two top-level items; they are now one caret at
   the right edge of the menu, and it is the container every future admin page
   goes into rather than growing the menu again. The .navdd/.ddbtn/.ddmenu
   classes already existed on the HRM pages — these rules simply make them
   available on every page, and mgc-nav.js now does the opening. */
.nav .navdd{position:relative;flex:none}
.nav .navdd.admdd{margin-left:auto}
.nav .ddbtn{display:inline-flex;align-items:center;gap:5px;padding:7px 12px;
  border-radius:4px!important;font-size:13px;font-weight:800;color:var(--mgc-n700)!important;
  background:transparent;border:none;cursor:pointer;white-space:nowrap;font-family:inherit;
  line-height:1.2}
.nav .ddbtn:hover{background:var(--mgc-surface)!important;color:var(--mgc-text)!important}
.nav .navdd.open .ddbtn{background:var(--mgc-accent)!important;color:#fff!important}
.ddmenu{position:fixed;background:var(--mgc-surface);border:1px solid var(--mgc-divider);
  border-radius:0!important;box-shadow:var(--mgc-shadow-md);min-width:200px;padding:4px;
  display:none;z-index:9200}
.navdd.open>.ddmenu,body>.ddmenu.open{display:block}
.ddmenu a{display:block;padding:10px 13px;font-size:13px;font-weight:700;
  color:var(--mgc-n800)!important;text-decoration:none;white-space:nowrap}
.ddmenu a:hover{background:var(--mgc-bg);color:var(--mgc-text)!important}
@media(max-width:900px){.nav .navdd.admdd{margin-left:0}}