/* ==========================================================================
   Al Boom HR — v3.8 "Warah" skin
   Re-skinned to the measured Warah design language (see warah-spec.md):
   white surfaces, quiet 1px borders, ONE soft blue accent, no shadows
   anywhere, airy tables and Nunito Sans at 12.8px for all UI text.
   Every class name from earlier versions is kept, so every page inherits
   the new look without being rewritten.
   ========================================================================== */

/* ---------- Tokens ------------------------------------------------------- */
:root{
  /* neutrals */
  --canvas:#F5F7FA;
  --canvas-2:#EDF1F5;
  --surface:#FFFFFF;
  --surface-2:#F5F7FA;
  --surface-3:#EDF1F5;
  --line:rgba(203,208,221,.54);
  --line-2:rgba(203,208,221,.54);
  --line-3:#CBD0DD;

  /* text */
  --text:#31374A;
  --text-2:#525B75;
  --text-3:#525B75;
  --text-inv:#FFFFFF;

  /* brand — Warah soft blue */
  --primary:#5FA8D3;
  --primary-h:#4A93BE;
  --primary-p:#4A93BE;
  --primary-d:#4A93BE;
  --primary-soft:#E8F2F8;
  --primary-soft-2:#D6E8F3;
  --brand-blue:#5FA8D3;
  --brand-yellow:#C98A2B;

  /* status */
  --ok:#3E9B57;      --ok-soft:#E9F4EC;
  --warn:#C98A2B;    --warn-soft:#FAF2E4;
  --danger:#D0564F;  --danger-soft:#FBECEB;
  --info:#5FA8D3;    --info-soft:#E8F2F8;
  --slate:#525B75;

  /* shape + depth — Warah uses borders, never shadows */
  --r-sm:4px; --r:6px; --r-md:8px; --r-lg:8px; --r-xl:8px;
  --sh-xs:none;
  --sh-sm:none;
  --sh:none;
  --sh-lg:none;
  --sh-xl:none;
  --ring:0 0 0 3px rgba(95,168,211,.18);

  /* layout */
  --rail:68px;
  --side:264px;
  --topbar:78px;

  --font:'Nunito Sans',-apple-system,system-ui,'Segoe UI',Roboto,Helvetica,Arial,'Noto Sans Arabic',sans-serif;
  --mono:'Nunito Sans',-apple-system,system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}

/* ---------- Reset -------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;font-size:16px}
body{
  margin:0;background:var(--canvas);color:var(--text);
  font-family:var(--font);font-size:.8rem;line-height:1.55;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
h1,h2,h3,h4,h5{margin:0;font-weight:800;letter-spacing:0;color:var(--text)}
h1{font-size:39px;line-height:1.18}
h2{font-size:24px}
h3{font-size:20px}
h4,h5{font-size:.8rem}
p{margin:0 0 10px}
a{color:var(--primary);text-decoration:none}
a:hover{color:var(--primary-h);text-decoration:underline}
img{max-width:100%}
:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:var(--r-sm)}
::selection{background:var(--primary-soft-2)}

/* ==========================================================================
   APP SHELL — white icon rail + sidebar + white top bar
   ========================================================================== */
.app-rail{
  position:fixed;left:0;top:0;bottom:0;width:var(--rail);z-index:70;
  background:var(--surface);border-right:1px solid var(--line);
  display:flex;flex-direction:column;align-items:center;
  padding:0 0 14px;gap:4px;
}
.rail-logo{
  width:var(--rail);height:var(--topbar);border-radius:0;display:grid;place-items:center;
  margin:0 0 10px;background:var(--surface);flex:0 0 auto;
  border-bottom:1px solid var(--line);box-shadow:none;
}
.rail-logo img{width:40px;height:40px;display:block;object-fit:contain}
.rail-btn{
  position:relative;width:40px;height:40px;border:none;background:none;cursor:pointer;
  color:var(--text-2);border-radius:8px;display:grid;place-items:center;flex:0 0 auto;
  transition:background .12s,color .12s;
}
.rail-btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.rail-btn:hover{background:var(--canvas);color:var(--text)}
.rail-btn.on{color:var(--text);background:var(--canvas-2)}
.rail-btn.on::before{content:none}
.rail-btn .rail-tip{
  position:absolute;left:calc(100% + 10px);top:50%;transform:translateY(-50%) scale(.96);
  background:var(--text);color:#fff;font-size:.8rem;font-weight:600;padding:5px 9px;border-radius:var(--r);
  white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .12s,transform .12s;box-shadow:none;z-index:5;
}
.rail-btn:hover .rail-tip{opacity:1;transform:translateY(-50%) scale(1)}
/* a thin divider separates the icon groups from the account icons */
.rail-sp{flex:1;width:34px;border-bottom:1px solid var(--line);margin-bottom:10px}
.rail-dot{position:absolute;top:5px;right:6px;width:7px;height:7px;border-radius:50%;background:var(--danger);border:2px solid #fff}

/* sidebar */
.app-side{
  position:fixed;left:var(--rail);top:0;bottom:0;width:var(--side);z-index:60;
  background:var(--surface);border-right:1px solid var(--line);
  display:flex;flex-direction:column;transition:transform .16s ease,width .16s ease;
}
.side-head{
  height:var(--topbar);display:flex;align-items:center;gap:10px;padding:0 18px;
  border-bottom:1px solid var(--line);flex:0 0 auto;
}
.side-head b{font-size:.8rem;font-weight:800;letter-spacing:0}
.side-head small{display:block;font-size:.7rem;color:var(--text-2);letter-spacing:.06em;text-transform:uppercase;font-weight:700}
.side-scroll{flex:1;overflow-y:auto;padding:14px 12px 20px}
.side-group{margin-bottom:16px}
.side-group-t{
  font-size:.7rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  color:var(--text-2);padding:0 10px 8px;
}
.side-link{
  display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:var(--r);
  color:var(--text-2);font-size:.8rem;font-weight:600;text-decoration:none;margin-bottom:2px;
  transition:background .1s,color .1s;
}
.side-link:hover{background:var(--canvas);color:var(--text);text-decoration:none}
.side-link.on{background:var(--primary-soft);color:var(--primary-h);font-weight:700}
.side-link .ic{width:18px;height:18px;flex:0 0 auto;opacity:.9}
.side-link .ic svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.side-link.on .ic{opacity:1}
.side-link .lbl{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.side-link .tag{margin-left:auto;font-size:.7rem;font-weight:800;background:var(--primary-soft);color:var(--primary-h);border-radius:99px;padding:1px 8px}
.side-foot{border-top:1px solid var(--line);padding:10px 12px;flex:0 0 auto}

/* collapse control in the sidebar header */
.side-collapse{
  width:28px;height:28px;border:1px solid var(--line-3);background:var(--surface);border-radius:var(--r);
  cursor:pointer;color:var(--text-2);font-size:13px;line-height:1;flex:0 0 auto;
}
.side-collapse:hover{background:var(--canvas);color:var(--text)}

/* --- sidebar sub-menus (drop-down under an item) --- */
.side-item{margin-bottom:1px}
.side-caret{
  margin-left:auto;width:20px;height:20px;border:none;background:none;cursor:pointer;
  color:var(--text-2);font-size:10px;line-height:1;border-radius:4px;flex:0 0 auto;
  transition:transform .12s,background .12s;
}
.side-caret:hover{background:var(--canvas-2);color:var(--text)}
.side-item.open > .side-link .side-caret{transform:rotate(180deg)}
.side-sub{display:none;margin:2px 0 8px 28px;padding-left:10px;border-left:1px solid var(--line)}
.side-item.open .side-sub{display:block}
.side-sub-link{
  display:block;padding:7px 10px;border-radius:var(--r);font-size:.8rem;color:var(--text-2);
  text-decoration:none;margin-bottom:1px;
}
.side-sub-link:hover{background:var(--canvas);color:var(--text);text-decoration:none}
.side-sub-link.on{background:var(--primary-soft);color:var(--primary-h);font-weight:700}

/* body */
.app-main{margin-left:calc(var(--rail) + var(--side));min-height:100vh;display:flex;flex-direction:column;transition:margin-left .16s ease}
body.side-collapsed .app-side{transform:translateX(-100%)}
body.side-collapsed .app-main{margin-left:var(--rail)}

.app-top{
  position:sticky;top:0;z-index:50;height:var(--topbar);background:var(--surface);
  backdrop-filter:none;border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:12px;padding:0 24px;
}
.top-toggle{
  width:38px;height:38px;border:none;background:none;border-radius:8px;cursor:pointer;
  color:var(--text-2);display:grid;place-items:center;flex:0 0 auto;
}
.top-toggle:hover{background:var(--canvas);color:var(--text)}
.top-toggle svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}

/* breadcrumb — sits above the page title, not in the top bar */
.crumbs{display:flex;align-items:center;gap:7px;font-size:.8rem;font-weight:700;color:var(--text);min-width:0;flex-wrap:wrap}
.crumbs a{color:var(--primary);font-weight:700}
.crumbs a:hover{color:var(--primary-h)}
.crumbs b{color:var(--text);font-weight:700}
.crumbs span.sep{color:var(--text-2);font-weight:400;opacity:.8}
.top-sp{flex:1}

/* the search is a CENTRED pill in the top bar */
.top-search{
  position:absolute;left:50%;transform:translateX(-50%);
  display:flex;align-items:center;gap:10px;height:38px;padding:0 18px;
  width:calc(100% - 420px);max-width:435px;min-width:220px;
  background:var(--surface);border:1px solid var(--line-3);border-radius:999px;color:var(--text-2);
}
.top-search input{border:none;background:none;outline:none;font:inherit;font-size:.8rem;color:var(--text);width:100%}
.top-search input::placeholder{color:var(--text-2);opacity:.85}
.top-search svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;flex:0 0 auto}
.top-icon{
  position:relative;width:38px;height:38px;border:none;background:none;border-radius:999px;
  cursor:pointer;color:var(--text-2);display:grid;place-items:center;text-decoration:none;flex:0 0 auto;
}
.top-icon:hover{background:var(--canvas);color:var(--text)}
.top-icon svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.top-icon .dot{position:absolute;top:2px;right:2px;min-width:16px;height:16px;padding:0 3px;border-radius:99px;background:var(--danger);color:#fff;font-size:.6rem;font-weight:800;display:grid;place-items:center}
.top-user{display:flex;align-items:center;gap:10px;padding:0;border-radius:999px;text-decoration:none;color:var(--text);flex:0 0 auto}
.top-user:hover{background:none;text-decoration:none}
.top-user .av{width:40px;height:40px;border:2px solid var(--line-3);font-size:.8rem}
.top-user .nm{display:none}

.content{flex:1;padding:34px 46px 60px}
.page{max-width:none;margin:0}

/* avatar */
.av{
  display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;
  background:var(--primary-soft);color:var(--primary-h);font-size:.75rem;font-weight:800;
  flex:0 0 auto;letter-spacing:.02em;overflow:hidden;
}

/* ---------- Page head ---------------------------------------------------- */
.page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:0}
.page-head h1{font-size:39px;font-weight:800;color:var(--text);margin:10px 0 22px;line-height:1.18}
.page-head h1 small{font-size:.8rem;font-weight:600;color:var(--text-2);margin-left:14px;vertical-align:middle;white-space:nowrap}
.page-head .desc{color:var(--text-2);font-size:.8rem;margin:-14px 0 22px;max-width:74ch}
.head-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding-top:16px}

/* ---------- Buttons ------------------------------------------------------ */
.btn,.btn-primary{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:37px;padding:0 24px;border-radius:var(--r);border:1px solid var(--line-3);
  background:var(--surface);color:var(--text-2);font-family:inherit;font-size:.8rem;font-weight:700;
  cursor:pointer;text-decoration:none;white-space:nowrap;box-shadow:none;
  transition:background .1s,border-color .1s,color .1s;
}
.btn:hover{background:var(--canvas);border-color:var(--line-3);color:var(--text);text-decoration:none}
.btn:active{background:var(--canvas-2)}
.btn:disabled,.btn[disabled]{opacity:.5;cursor:not-allowed}
.btn.pri,.btn-primary{background:var(--primary);border-color:var(--primary);color:#fff}
.btn.pri:hover,.btn-primary:hover{background:var(--primary-h);border-color:var(--primary-h);color:#fff}
.btn.pri:active{background:var(--primary-p)}
.btn.ghost{background:var(--surface);border-color:var(--line-3);color:var(--text-2)}
.btn.ghost:hover{background:var(--canvas);border-color:var(--line-3);color:var(--text)}
.btn.subtle{background:transparent;border-color:transparent;color:var(--text-2);font-weight:700}
.btn.subtle:hover{background:var(--canvas);color:var(--text)}
.btn.danger{background:var(--danger);border-color:var(--danger);color:#fff}
.btn.danger:hover{background:#BE4B45;border-color:#BE4B45;color:#fff}
.btn.brass{background:var(--warn);border-color:var(--warn);color:#fff}
.btn.sm{height:30px;padding:0 14px;font-size:.8rem;border-radius:var(--r)}
.btn.full{width:100%}
.btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8}

/* command bar — the strip of actions above a table */
.cmdbar{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:18px 0 26px;background:transparent;border:none;border-bottom:1px solid var(--line);
  border-radius:0;box-shadow:none;margin-bottom:0;
}
.cmdbar .sp{flex:1}
.cmdbar .fld{display:flex;align-items:center;gap:0;border:1px solid var(--line-3);border-radius:var(--r);overflow:hidden;background:var(--surface)}
.cmdbar .fld > label{padding:0 14px;font-size:.8rem;font-weight:700;color:var(--text-2);background:var(--canvas);height:35px;display:flex;align-items:center;border-right:1px solid var(--line-3);white-space:nowrap}
.cmdbar .fld select,.cmdbar .fld input{border:none;outline:none;height:35px;padding:0 12px;font:inherit;font-size:.8rem;font-weight:600;background:none;color:var(--text);min-width:120px}

/* ---------- Cards -------------------------------------------------------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:none;overflow:hidden}
.card-h{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:20px 26px;border-bottom:1px solid var(--line)}
.card-h h3{font-size:20px;font-weight:800}
.card-h .cap{font-size:.8rem;color:var(--text-2);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.card-p{padding:22px 26px}
.mb{margin-bottom:22px}
.mt{margin-top:22px}
.flex{display:flex;align-items:center}
.grid{display:grid;gap:18px}
.grid-2{display:grid;gap:18px;grid-template-columns:1fr}
.grid-3{display:grid;gap:18px;grid-template-columns:1fr}
.grid-4{display:grid;gap:18px;grid-template-columns:1fr 1fr}
@media(min-width:760px){.grid-3{grid-template-columns:1fr 1fr}}
@media(min-width:960px){
  .grid-2{grid-template-columns:1fr 1fr}
  .grid-3{grid-template-columns:repeat(3,1fr)}
  .grid-4{grid-template-columns:repeat(4,1fr)}
}
/* charts stay a comfortable reading size instead of filling the card */
.card-p canvas{max-height:190px !important;width:100% !important}

/* KPI tiles — white cards in the new style */
.kpi-grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(185px,1fr));margin-bottom:22px}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:20px 22px;box-shadow:none;position:relative;overflow:hidden}
.kpi b{display:block;font-size:30px;font-weight:800;letter-spacing:0;line-height:1.2;color:var(--text)}
.kpi span{display:block;font-size:.8rem;color:var(--text-2);font-weight:700;text-transform:none;letter-spacing:0;margin-bottom:4px}
.kpi small{display:block;font-size:.8rem;color:var(--text-2);margin-top:4px}
.kpi .i-blue,.kpi .i-teal,.kpi .i-red,.kpi .i-violet,.kpi .i-brass{position:absolute;right:16px;top:16px;width:32px;height:32px;border-radius:8px;display:grid;place-items:center}
/* newer tile markup: <div class="kpi"><div class="top"><span class="ic i-x">…</span></div>
   <div class="val mono">42</div><div class="lbl">Label</div></div> */
.kpi .top{display:flex;align-items:center;justify-content:flex-start;margin-bottom:12px}
.kpi .top .ic{position:static;width:34px;height:34px;border-radius:8px;display:grid;place-items:center;flex:0 0 auto;font-size:15px;line-height:1}
.kpi .top .ic svg{width:18px;height:18px;stroke-width:1.8}
.kpi .val{font-size:30px;font-weight:800;letter-spacing:0;line-height:1.2;color:var(--text)}
.kpi .lbl{font-size:.8rem;color:var(--text-2);font-weight:700;margin-top:4px;line-height:1.4}
.kpi .sub{font-size:.8rem;color:var(--text-2);margin-top:4px;opacity:.9}
.ic{display:inline-grid;place-items:center}
.i-blue{background:var(--primary-soft);color:var(--primary-h)}
.i-teal{background:var(--ok-soft);color:var(--ok)}
.i-red{background:var(--danger-soft);color:var(--danger)}
.i-violet{background:#EFEDF8;color:#6A63A8}
.i-brass{background:var(--warn-soft);color:var(--warn)}
.i-green{background:var(--ok-soft);color:var(--ok)}
.i-amber{background:var(--warn-soft);color:var(--warn)}
.i-slate{background:var(--canvas-2);color:var(--text-2)}
.i-grid{background:var(--primary-soft);color:var(--primary-h)}
.stat-line{display:flex;align-items:center;justify-content:space-between;padding:11px 0;border-bottom:1px solid var(--line);font-size:.8rem}
.stat-line:last-child{border-bottom:none}

/* ---------- Tables -------------------------------------------------------
   Warah tables are airy and sit on plain white: no card wrapper, no shadow,
   no rounded corners, no grey header strip. Rows are TALL (~93px).        */
.tbl-wrap{width:100%;overflow-x:auto;background:var(--surface)}
/* a table's card wrapper stops being a card */
.card:has(> .tbl-wrap){background:var(--surface);border:none;border-radius:0;overflow:visible}
table.tbl{width:100%;border-collapse:separate;border-spacing:0;font-size:.8rem;background:var(--surface)}
table.tbl th{
  text-align:left;font-size:.8rem;font-weight:800;letter-spacing:0;text-transform:none;
  color:var(--text);padding:16px 16px 16px 0;background:var(--surface);
  border-bottom:1px solid var(--line);white-space:nowrap;position:sticky;top:0;z-index:1;
}
table.tbl td{padding:16px 16px 16px 0;border-bottom:1px solid var(--line);vertical-align:middle;color:var(--text);font-weight:400}
table.tbl tbody tr{height:93px}
table.tbl td b,table.tbl td strong{color:var(--text);font-weight:700}
table.tbl tbody tr:hover td{background:var(--canvas)}
table.tbl tbody tr:last-child td{border-bottom:1px solid var(--line)}
table.tbl td.num,table.tbl th.num{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums}
table.tbl td.center,table.tbl th.center{text-align:center}
table.tbl td.right,table.tbl th.right{text-align:right}
/* the first column's avatar is a 60px circle with a 3px white ring */
table.tbl td .av{
  width:60px !important;height:60px !important;font-size:1.05rem;
  border:3px solid #fff;outline:1px solid var(--line-3);
}
table.tbl td .emp-cell{gap:14px}
table.tbl td .emp-cell b{color:var(--primary);font-weight:700}
table.tbl td .emp-cell:hover b{color:var(--primary-h);text-decoration:underline}
/* row actions read as a small "…" pill */
table.tbl td .btn.sm,table.tbl td .btn.subtle{
  height:22px;min-width:30px;padding:0 10px;border-radius:999px;
  border:1px solid var(--line-3);background:var(--surface);color:var(--primary);font-size:.8rem;font-weight:700;
}
table.tbl td .btn.sm:hover,table.tbl td .btn.subtle:hover{background:var(--primary-soft);color:var(--primary-h)}
table.tbl td .btn.danger{border-color:var(--danger);background:var(--danger);color:#fff}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:.8rem}
.mut{color:var(--text-2)}
.sortable{cursor:pointer;user-select:none}
.sortable:hover{color:var(--primary)}
.sortable .arw{opacity:.45;font-size:9px;margin-left:4px;color:var(--text-2)}
.sortable.asc .arw,.sortable.desc .arw{opacity:1;color:var(--primary)}
/* a legend under the table */
.tbl-legend{font-size:.8rem;color:var(--text-2);padding:14px 0}

/* empty state */
.empty{padding:44px 20px;text-align:center;color:var(--text-2);font-size:.8rem}
.empty b{display:block;color:var(--text);font-size:20px;font-weight:800;margin-bottom:6px}

/* ---------- Badges & pills ---------------------------------------------- */
.badge{
  display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:999px;
  font-size:.8rem;font-weight:700;line-height:1.55;white-space:nowrap;text-decoration:none;
  background:var(--canvas-2);color:var(--text-2);border:1px solid transparent;
}
a.badge:hover{text-decoration:none;filter:brightness(.97)}
.badge.g{background:var(--ok-soft);color:var(--ok)}
.badge.a{background:var(--warn-soft);color:var(--warn)}
.badge.r{background:var(--danger-soft);color:var(--danger)}
.badge.b{background:var(--primary-soft);color:var(--primary-h)}
.badge.s{background:var(--canvas-2);color:var(--text-2)}
.pill{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:999px;background:var(--canvas-2);color:var(--text-2);font-size:.8rem;font-weight:700;text-decoration:none}
a.pill:hover{background:var(--primary-soft);color:var(--primary-h);text-decoration:none}

/* punch chip — the Warah-style clock-in stamp */
.punch{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;font-size:.8rem;font-weight:700;font-family:var(--mono)}
.punch.ok{background:var(--ok-soft);color:var(--ok)}
.punch.late{background:var(--danger-soft);color:var(--danger)}
.punch .mini{display:inline-flex;width:15px;height:15px;border-radius:4px;align-items:center;justify-content:center;background:rgba(255,255,255,.7);font-size:9px;text-decoration:none;color:inherit}
.punch .mini:hover{background:#fff;text-decoration:none}
.punch-cell{display:flex;align-items:center;gap:8px}
.punch-cell .shot{width:34px;height:34px;border-radius:50%;object-fit:cover;border:2px solid #fff;outline:1px solid var(--line-3)}
.none-dot{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--danger-soft);color:var(--danger);font-weight:800;font-size:12px;line-height:1}

/* ---------- Forms -------------------------------------------------------- */
.form-grid{display:grid;gap:18px;grid-template-columns:1fr}
@media(min-width:720px){.form-grid{grid-template-columns:1fr 1fr}}
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field.full{grid-column:1/-1}
.field label{font-size:.8rem;font-weight:700;color:var(--text);letter-spacing:0;margin-bottom:0}
.field input,.field select,.field textarea,.selectbox,textarea.inp,input[type=date],input[type=month],input[type=time],input[type=datetime-local]{
  width:100%;min-height:37px;padding:9px 14px;border:1px solid var(--line-3);border-radius:var(--r);
  background:var(--surface);font-family:inherit;font-size:.8rem;color:var(--text);outline:none;box-shadow:none;
  transition:border-color .1s,box-shadow .1s;
}
.field textarea,textarea.inp{min-height:80px;padding:10px 14px;resize:vertical}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--line-3)}
.field input:focus,.field select:focus,.field textarea:focus,textarea.inp:focus{border-color:var(--primary);box-shadow:var(--ring)}
.field input[type=checkbox],.field input[type=radio]{width:auto;min-height:0;accent-color:var(--primary)}
input[type=checkbox],input[type=radio]{accent-color:var(--primary)}
fieldset{border:1px solid var(--line);border-radius:var(--r-md);padding:20px;margin:0 0 18px}
legend{font-size:.8rem;font-weight:800;color:var(--text);text-transform:none;letter-spacing:0;padding:0 8px}
.note{background:var(--canvas);border:1px solid var(--line);border-left:3px solid var(--primary);border-radius:var(--r);padding:13px 16px;font-size:.8rem;color:var(--text-2);margin-top:14px}
.note b{color:var(--text)}

/* toolbar — the strip above a table: page background, 1px bottom border */
.toolbar{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:18px 0 26px;border-bottom:1px solid var(--line);background:transparent;
}
.toolbar + .toolbar{border-top:none;padding-top:0}
.toolbar .search{
  flex:0 1 380px;min-width:220px;height:37px;background:var(--surface);border:1px solid var(--line-3);
  border-radius:var(--r);display:flex;align-items:center;gap:0;padding:0;overflow:hidden;
}
.toolbar .search input{border:none;background:none;outline:none;width:100%;font:inherit;font-size:.8rem;padding:8px 16px;color:var(--text)}
/* the search joins a solid accent square holding the magnifier */
.toolbar .search::after{
  content:"";flex:0 0 auto;width:37px;align-self:stretch;background:var(--primary)
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.3-4.3'/%3E%3C/svg%3E")
    center/16px 16px no-repeat;
}
.toolbar .search:focus-within{border-color:var(--primary);box-shadow:var(--ring)}
/* selects and plain inputs living in a toolbar */
.toolbar select,.toolbar input[type=search],.toolbar input[type=text],.toolbar input[type=date],.toolbar input[type=month],.toolbar input[type=number]{
  height:37px;min-height:37px;border:1px solid var(--line-3);border-radius:var(--r);background:var(--surface);
  font-family:inherit;font-size:.8rem;font-weight:600;color:var(--text);padding:8px 16px;outline:none;
}
.toolbar select{
  padding:8px 40px 8px 16px;appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23525B75' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:14px 14px;
}
.toolbar select:focus,.toolbar input:focus{border-color:var(--primary);box-shadow:var(--ring)}
.toolbar label{font-size:.8rem;font-weight:700;color:var(--text-2)}

/* ---------- Alerts ------------------------------------------------------- */
.alert{padding:13px 16px;border-radius:var(--r-md);font-size:.8rem;font-weight:600;margin-bottom:18px;border:1px solid;display:flex;gap:10px;align-items:flex-start}
.alert.ok{background:var(--ok-soft);border-color:#BFDFC9;color:#2F7B45}
.alert.err{background:var(--danger-soft);border-color:#EEC5C2;color:#B0433D}
.alert.warn{background:var(--warn-soft);border-color:#EBD6AE;color:#A06E1F}

/* ---------- Tabs --------------------------------------------------------- */
.tabs{display:flex;gap:22px;border-bottom:1px solid var(--line);margin-bottom:22px;overflow-x:auto}
.tabs a{
  padding:10px 0;font-size:15px;font-weight:600;color:var(--text-2);text-decoration:none;
  border-bottom:3px solid transparent;white-space:nowrap;border-radius:0;margin-bottom:-1px;
}
.tabs a:hover{color:var(--text);background:none;text-decoration:none}
.tabs a.on{color:var(--primary);border-bottom-color:var(--primary);font-weight:700}

/* ---------- Modals ------------------------------------------------------- */
.modal-scrim{position:fixed;inset:0;background:rgba(49,55,74,.38);backdrop-filter:none;z-index:200;display:grid;place-items:center;padding:18px;overflow:auto}
.modal{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:none;width:100%;max-width:560px;max-height:94vh;display:flex;flex-direction:column;overflow:hidden;animation:mIn .14s ease}
.modal.wide{max-width:1060px}
@media(min-width:1200px){.modal.wide{width:88vw}}
@keyframes mIn{from{opacity:0;transform:translateY(6px) scale(.995)}to{opacity:1;transform:none}}
.modal-h{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:20px 26px;border-bottom:1px solid var(--line)}
.modal-h h3{font-size:20px;font-weight:800}
/* v3.6 FIX — most modals wrap their contents in a <form>, so the FORM is the
   flex child of .modal, not the body. A plain block form never shrinks, so the
   body could not scroll and the fields spilled out under the card (site edit,
   with its map, was the worst of it). Make the form a flex column too. */
.modal > form{display:flex;flex-direction:column;flex:1 1 auto;min-height:0}

/* v3.6 FIX — in a flex column a child will not shrink below its content unless
   min-height is 0, so the body grew past the card's max-height and the form
   spilled out below the modal (site edit, with its map, was the worst case). */
.modal-b{padding:22px 26px;overflow-y:auto;flex:1 1 auto;min-height:0}
.modal-f{padding:16px 26px;border-top:1px solid var(--line);display:flex;gap:10px;justify-content:flex-end;background:var(--canvas);border-radius:0 0 var(--r-md) var(--r-md)}

/* dropdown menu (row actions) */
.menu{position:relative;display:inline-block}
.menu-pop{
  position:absolute;right:0;top:calc(100% + 5px);min-width:180px;background:var(--surface);
  border:1px solid var(--line-3);border-radius:var(--r-md);box-shadow:none;padding:6px;z-index:120;display:none;
}
.menu.open .menu-pop{display:block}
.menu-pop a,.menu-pop button{
  display:flex;align-items:center;gap:9px;width:100%;padding:8px 11px;border-radius:var(--r);
  font-size:.8rem;font-weight:600;color:var(--text-2);text-decoration:none;background:none;border:none;cursor:pointer;
  font-family:inherit;text-align:left;
}
.menu-pop a:hover,.menu-pop button:hover{background:var(--canvas);color:var(--text);text-decoration:none}
.menu-pop .sep{height:1px;background:var(--line);margin:5px 0}
.menu-pop .danger{color:var(--danger)}
.menu-pop .danger:hover{background:var(--danger-soft)}

/* ---------- Employee cell ------------------------------------------------ */
.emp-cell{display:inline-flex;align-items:center;gap:12px;text-decoration:none;color:inherit}
.emp-cell:hover{text-decoration:none}
.emp-cell:hover b{color:var(--primary-h)}
.emp-cell b{font-weight:700;color:var(--primary)}
.emp-cell small{display:block;color:var(--text-2);font-size:.75rem;font-weight:400}

/* ---------- EmpPicker (searchable employee dropdown) --------------------- */
.epick{position:relative}
.epick-ctl{
  width:100%;min-height:37px;display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:0 14px;background:var(--surface);border:1px solid var(--line-3);border-radius:var(--r);
  font:inherit;font-size:.8rem;color:var(--text-2);cursor:pointer;text-align:left;
}
.epick-ctl:hover{border-color:var(--primary)}
.epick.has-sel .epick-lbl{color:var(--text);font-weight:600}
.epick-car{opacity:.5;font-size:11px}
.epick.open .epick-car{transform:rotate(180deg)}
.epick-chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px}
.epick-chips:empty{margin:0}
.epick-chip{display:inline-flex;align-items:center;gap:5px;padding:3px 5px 3px 10px;border-radius:999px;background:var(--primary-soft);color:var(--primary-h);font-size:.75rem;font-weight:700}
.epick-chip button{border:none;background:rgba(0,0,0,.07);color:inherit;width:16px;height:16px;line-height:1;border-radius:50%;cursor:pointer;font-size:10px;display:flex;align-items:center;justify-content:center}
.epick-chip button:hover{background:rgba(0,0,0,.16)}
.epick-panel{display:none;position:absolute;left:0;right:0;top:calc(100% + 5px);z-index:150;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--sh-lg);overflow:hidden}
.epick.open .epick-panel{display:block}
.epick-tools{display:flex;gap:7px;padding:9px;border-bottom:1px solid var(--line-2)}
.epick-q{flex:1;min-width:110px;height:37px;padding:0 14px;border:1px solid var(--line-3);border-radius:var(--r);font:inherit;font-size:.8rem;outline:none}
.epick-q:focus{border-color:var(--primary)}
.epick-t{height:37px;border:1px solid var(--line-3);border-radius:var(--r);padding:0 10px;font:inherit;font-size:.8rem;background:var(--surface)}
.epick-list{max-height:300px;overflow:auto;padding:5px}
/* Inside a modal the panel would be clipped by the scrolling body, so it
   expands inline instead of floating — the list stays fully visible. */
.modal-b .epick.open .epick-panel{
  position:static;box-shadow:none;border:1px solid var(--line);margin-top:7px;
}
.modal-b .epick .epick-list{max-height:46vh}
.modal-b .epick-row{padding:10px 12px;font-size:.8rem}
.epick-row{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:var(--r);cursor:pointer;font-size:.8rem;color:var(--text-2)}
.epick-row:hover{background:var(--surface-2)}
.epick-row .epick-nm{font-weight:700;color:var(--text)}
.epick-row .epick-meta{margin-left:auto;font-size:.75rem;color:var(--text-2);white-space:nowrap}
.epick-row .epick-tick{width:15px;text-align:center;color:transparent;font-weight:800}
.epick-row.on{background:var(--primary-soft)}
.epick-row.on .epick-tick{color:var(--primary)}
.epick-none{padding:16px;text-align:center;color:var(--text-2);font-size:.8rem}
.epick-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:9px 10px;border-top:1px solid var(--line);font-size:.8rem}

/* ---------- Check-in (mobile) ------------------------------------------- */
.checkin-wrap{display:grid;place-items:center;min-height:74vh;padding:16px}
.checkin-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:none;padding:30px;max-width:430px;width:100%;text-align:center}
.big-btn{
  width:172px;height:172px;border-radius:50%;border:none;margin:20px auto;display:grid;place-items:center;
  font-size:19px;font-weight:800;letter-spacing:.02em;color:#fff;cursor:pointer;
  background:var(--primary);box-shadow:none;
  transition:background .1s;
}
.big-btn:hover{transform:translateY(-1px)}
.big-btn:active{transform:translateY(1px)}
.big-btn.out{background:var(--danger);box-shadow:none}
.gps-line{font-size:.8rem;color:var(--text-2);min-height:19px}

/* ---------- Login -------------------------------------------------------- */
.login-page{min-height:100vh;display:grid;place-items:center;padding:20px;background:var(--canvas);position:relative}
.login-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:none;width:100%;max-width:400px;overflow:hidden}
.login-accent{height:4px;background:var(--primary)}
.login-body{padding:34px 32px}
.login-body h1{font-size:24px;font-weight:800;text-align:center}
.login-body .btn-primary{width:100%;margin-top:6px}
.login-body .field{margin-bottom:16px}
.login-logo{display:grid;place-items:center;margin-bottom:16px}
.login-logo img{height:46px}
.login-page .login-logo{display:block;margin:0 auto 18px;height:46px}
.login-sub{text-align:center;color:var(--text-2);font-size:.8rem;margin-bottom:24px}
.login-ar{text-align:center;color:var(--primary);font-size:.8rem;font-weight:700;margin-top:5px}
.login-foot{padding:16px 0 0;margin-top:22px;border-top:1px solid var(--line);background:none;font-size:.75rem;color:var(--text-2);text-align:center}

/* ---------- Self-service tiles ------------------------------------------ */
.ss-tiles{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(165px,1fr))}
.ss-tile{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:20px;text-align:center;text-decoration:none;color:var(--text);box-shadow:none;transition:border-color .12s,background .12s}
.ss-tile:hover{border-color:var(--primary);background:var(--primary-soft);text-decoration:none}
.ss-stat{font-size:24px;font-weight:800}

/* ---------- Scrollbars --------------------------------------------------- */
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#CBD0DD;border:3px solid transparent;background-clip:content-box;border-radius:99px}
::-webkit-scrollbar-thumb:hover{background:#A9B0C2;border:3px solid transparent;background-clip:content-box}

/* ---------- Responsive --------------------------------------------------- */
@media(max-width:1024px){
  .app-side{transform:translateX(-100%);box-shadow:none}
  .app-main{margin-left:var(--rail)}
  body.side-open .app-side{transform:none}
  body.side-open .app-main{margin-left:var(--rail)}
  body.side-collapsed .app-side{transform:translateX(-100%)}
}
@media(max-width:1200px){.top-search{width:calc(100% - 300px);min-width:180px}}
@media(max-width:640px){
  .content{padding:18px 16px 40px}
  .page-head h1{font-size:28px}
  .top-search{display:none}
  .kpi-grid{grid-template-columns:1fr 1fr}
}

/* ---------- Print -------------------------------------------------------- */
@media print{
  .app-rail,.app-side,.app-top,.head-actions,.cmdbar,.no-print,.btn{display:none !important}
  .app-main{margin-left:0}
  .content{padding:0}
  .card{border:none;box-shadow:none}
  table.tbl th{background:#fff !important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .badge,.punch{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  body{background:#fff}
}

/* ---------- TimePicker (12-hour AM/PM) ---------------------------------- */
.tpick{display:inline-flex;align-items:center;gap:4px}
.tpick select{
  min-height:37px;padding:8px 6px;border:1px solid var(--line-3);border-radius:var(--r);
  background:var(--surface);font-family:inherit;font-size:.8rem;color:var(--text);outline:none;
}
.tpick .tp-h,.tpick .tp-m{width:62px;text-align:center}
.tpick .tp-ap{width:70px}
.tpick select:focus{border-color:var(--primary);box-shadow:var(--ring)}
.tpick .tp-sep{color:var(--text-2);font-weight:800}
.tpick.is-empty select{color:var(--text-2)}
.tpick.invalid select{border-color:var(--danger)}

/* required marker + inline validation */
.req::after{content:" *";color:var(--danger);font-weight:700}
.field.invalid input,.field.invalid select,.field.invalid textarea{border-color:var(--danger)}
.field .hint{font-size:.75rem;color:var(--text-2)}
.field .hint.warn{color:var(--warn)}
.field .hint.bad{color:var(--danger);font-weight:600}
.calc-line{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:10px 14px;border-radius:var(--r);
  background:var(--primary-soft);color:var(--primary-h);font-size:.8rem;font-weight:700;
}
.calc-line.bad{background:var(--danger-soft);color:var(--danger)}
.calc-line.warn{background:var(--warn-soft);color:var(--warn)}

/* ---- Reports page ---------------------------------------------------------
   The report catalogue now lives in the sidebar drop-down, so the page runs
   full width. .rep-jump is a compact fallback picker that only appears when
   the sidebar is hidden (narrow screens / collapsed menu).                  */
.rep-wrap{display:block}
.rep-jump{display:none;margin:0 0 12px}
.rep-jump label{display:flex;align-items:center;gap:8px;font-size:.8rem;font-weight:700;color:var(--text-2)}
.rep-jump select{flex:1;min-width:0}
body.side-collapsed .rep-jump{display:block}
@media(max-width:1024px){.rep-jump{display:block}}

/* ---- Policies page --------------------------------------------------------
   Wide, readable rows: the statutory figure and the company value sit side by
   side so a departure from the law is obvious at a glance.                   */
.chk{display:inline-flex;align-items:center;gap:8px;font-size:.8rem;font-weight:600;color:var(--text-2);cursor:pointer}
.chk input{width:auto;min-height:0;accent-color:var(--primary);margin:0}
.pol-tbl td{vertical-align:top;padding-top:12px;padding-bottom:12px}
.pol-tbl td b.mono{font-size:.9rem}
.pol-tbl input[type=number],.pol-tbl select{max-width:170px}

/* ---- Info icon -------------------------------------------------------------
   Explanations no longer sit on the page taking up room. Every one becomes a
   small "i" you press and hold to read. Hold works on touch too.            */
.i-tip{
  display:inline-grid;place-items:center;width:15px;height:15px;flex:0 0 auto;
  border:1px solid var(--line-3);background:var(--surface);color:var(--text-3);
  border-radius:50%;font-size:10px;font-weight:800;line-height:1;cursor:help;
  padding:0;vertical-align:middle;margin-left:5px;font-family:var(--font);
  transition:background .12s,color .12s,border-color .12s;
}
.i-tip:hover,.i-tip.on{background:var(--primary);border-color:var(--primary);color:#fff}
.i-tip:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.i-pop{
  position:fixed;z-index:400;max-width:300px;background:var(--text);color:#fff;
  font-size:.8rem;font-weight:400;line-height:1.5;padding:10px 13px;border-radius:var(--r-md);
  box-shadow:none;pointer-events:none;opacity:0;transform:translateY(3px);
  transition:opacity .1s,transform .1s;text-align:left;
}
.i-pop.show{opacity:1;transform:translateY(0)}
.i-pop b{color:#fff}
@media print{.i-tip{display:none}}

/* v3.6 — search + job filter above an employee drop-down */
.emp-search{display:flex;gap:6px;align-items:center;margin-bottom:5px;flex-wrap:wrap}
.emp-search input[type=search]{flex:1 1 150px;min-width:120px}
.emp-search select{flex:0 1 150px}
.emp-search .emp-count{font-size:.75rem;color:var(--text-2);white-space:nowrap}

/* =========================================================================
   v3.7 — interface pass
   Density, focus, motion and touch. Reviewed against the Web Interface
   Guidelines; every rule below fixes a finding from that review.
   ========================================================================= */

/* ---- 1. Skip link ------------------------------------------------------- */
.skip-link{
  position:absolute;left:8px;top:-56px;z-index:200;
  padding:10px 16px;border-radius:var(--r);
  background:var(--primary);color:#fff;font-weight:700;text-decoration:none;
  transition:top .12s ease;
}
.skip-link:focus{top:8px}

/* ---- 2. Focus: never remove an outline without replacing it -------------- */
.top-search:focus-within,
.cmdbar .fld:focus-within{
  border-color:var(--primary);
  box-shadow:var(--ring);
}
.epick-q:focus{border-color:var(--primary);box-shadow:var(--ring)}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{
  border-color:var(--primary);box-shadow:var(--ring);
}

/* ---- 3. Table density ---------------------------------------------------
   Rows were 3 lines tall because every name, date and shift wrapped. Cells
   now stay on one line and truncate; the wrapper already scrolls sideways.
   Opt a cell back into wrapping with class="wrap".                        */
/* v3.8: the Warah table is AIRY, not dense — 16px vertical padding and tall
   rows. Only the one-line truncation from this pass is kept. */
table.tbl th{padding:16px 30px 16px 0}
table.tbl td{
  padding:16px 8px 16px 0;
  white-space:nowrap;
  max-width:300px;overflow:hidden;text-overflow:ellipsis;
}
table.tbl td.wrap{white-space:normal;max-width:none;overflow:visible}
table.tbl td .emp-cell span{min-width:0}
table.tbl td .emp-cell b,
table.tbl td .emp-cell small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:230px}

/* the sideways scroll is easy to miss — fade the right edge to hint at it */
.tbl-wrap{
  position:relative;
  overscroll-behavior-x:contain;
  background:
    linear-gradient(to right,var(--surface) 30%,transparent) left / 28px 100% no-repeat,
    linear-gradient(to left ,var(--surface) 30%,transparent) right/ 28px 100% no-repeat,
    radial-gradient(farthest-side at 0   50%,rgba(49,55,74,.08),transparent) left / 12px 100% no-repeat,
    radial-gradient(farthest-side at 100% 50%,rgba(49,55,74,.08),transparent) right/ 12px 100% no-repeat;
  background-attachment:local,local,scroll,scroll;
}

/* ---- 4. Tile rows that do not leave an orphan ---------------------------
   Six tiles in a five-wide grid left one stranded on its own line.        */
@media(min-width:1100px){
  .kpi-grid:has(> .kpi:nth-child(6)):not(:has(> .kpi:nth-child(7))){grid-template-columns:repeat(3,1fr)}
  .kpi-grid:has(> .kpi:nth-child(8)):not(:has(> .kpi:nth-child(9))){grid-template-columns:repeat(4,1fr)}
  .kpi-grid:has(> .kpi:nth-child(9)):not(:has(> .kpi:nth-child(10))){grid-template-columns:repeat(3,1fr)}
}
/* on a wide screen six tiles fit on one line, which reads faster than two rows */
@media(min-width:1400px){
  .kpi-grid:has(> .kpi:nth-child(6)):not(:has(> .kpi:nth-child(7))){grid-template-columns:repeat(6,1fr)}
  .kpi-grid:has(> .kpi:nth-child(5)):not(:has(> .kpi:nth-child(6))){grid-template-columns:repeat(5,1fr)}
}
/* tiles in a row keep the same height whether their label runs to one line or two */
.kpi{display:flex;flex-direction:column}
.kpi .lbl{margin-top:auto}

/* ---- 5. Headings read better broken evenly ------------------------------ */
h1,h2,h3,.page-head h1{text-wrap:balance}
p,.lead,.empty{text-wrap:pretty}

/* ---- 6. Touch ----------------------------------------------------------
   No tap delay, no grey flash, and finger-sized controls on a phone.     */
button,a,label,select,summary,[role=button],input[type=checkbox],input[type=radio]{
  touch-action:manipulation;
  -webkit-tap-highlight-color:rgba(95,168,211,.18);
}
@media(pointer:coarse){
  .btn{min-height:44px;padding:0 16px}
  .btn.sm{min-height:40px;padding:0 13px}
  .side-link,.rail-btn{min-height:44px}
  table.tbl td,table.tbl th{padding-top:16px;padding-bottom:16px}
}

/* ---- 7. Modals: contained scrolling ------------------------------------- */
.modal-scrim,.modal-b{overscroll-behavior:contain}

/* ---- 8. Respect "reduce motion" ----------------------------------------- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important;
  }
  .big-btn:hover,.big-btn:active,.ss-tile:hover{transform:none}
}

/* ---- 9. Alerts belong under the page title, not above it ---------------- */
.page-head + .alert{margin-top:0}

/* ---- 10. Numbers line up wherever they are counted ---------------------- */
.kpi .val,.badge,.chip,td .money,.stat-line b{font-variant-numeric:tabular-nums}

/* ---- 11. The punch button says what it is doing ------------------------- */
.big-btn.working{position:relative;letter-spacing:.02em}
.big-btn.working::after{
  content:"";position:absolute;left:50%;bottom:22%;translate:-50% 0;
  width:20px;height:20px;border-radius:50%;
  border:2.5px solid rgba(255,255,255,.35);border-top-color:#fff;
  animation:abspin .7s linear infinite;
}
@keyframes abspin{to{rotate:360deg}}
@media(prefers-reduced-motion:reduce){.big-btn.working::after{animation:none;border-top-color:rgba(255,255,255,.35)}}

/* =========================================================================
   v3.8 — the employee profile header
   The reference draws this block as ONE white card: a blue banner, a large
   avatar overlapping its bottom-left corner, the name below it and the tab
   row closing the card. The markup already has the pieces (a .page-head
   holding an .emp-cell, then a sibling .tabs), so it is done in CSS.
   ========================================================================= */
.page-head:has(> .emp-cell){
  position:relative;display:block;background:var(--surface);
  border:1px solid var(--line);border-bottom:none;border-radius:var(--r-md) var(--r-md) 0 0;
  padding:0 26px 20px;margin-bottom:0;overflow:hidden;
}
.page-head:has(> .emp-cell)::before{
  content:"";display:block;height:165px;margin:0 -26px 0;
  background:linear-gradient(120deg,#9CC6DE,#8FBFDA);
}
.page-head > .emp-cell{
  display:flex;align-items:flex-end;gap:24px;margin:-64px 0 0;max-width:100%;
}
.page-head > .emp-cell .av{
  width:170px !important;height:170px !important;font-size:52px;font-weight:800;
  border:8px solid #fff;outline:none;background:var(--primary-soft);
}
.page-head > .emp-cell h1{font-size:30px !important;font-weight:800;color:var(--text);margin:0 0 4px}
.page-head > .emp-cell .desc{margin:0;color:var(--text-2);font-size:.8rem}
.page-head:has(> .emp-cell) .head-actions{padding-top:18px;justify-content:flex-end}
/* the tab row closes the same card */
.page-head:has(> .emp-cell) ~ .tabs{
  background:var(--surface);border:1px solid var(--line);border-top:none;
  border-radius:0 0 var(--r-md) var(--r-md);padding:0 26px;margin-bottom:26px;
}

/* A toolbar nested inside another strip, a card or a modal is just a row of
   controls: the padding and the rule belong to the OUTER strip only, and two
   strips in a row share one rule between them. */
.cmdbar .toolbar,.toolbar .toolbar,.card .toolbar,.card .cmdbar,
.modal .toolbar,.modal .cmdbar,.card-p .toolbar{padding:0;border-bottom:none}
.cmdbar:has(+ .cmdbar),.toolbar:has(+ .toolbar),
.cmdbar:has(+ .toolbar),.toolbar:has(+ .cmdbar){border-bottom:none;padding-bottom:0}
/* the greeting on the home page is written in the accent colour */
.page-head h1.greet{color:var(--primary)}

/* ---- 12. Card titles inside a three-up row --------------------------------
   20px/800 is right for a full-width card and too big for a narrow one — it
   pushed every dashboard panel title onto two lines. */
.grid-3 .card-h h2,.grid-3 .card-h h3,.grid-3 .card-h b,
.grid-4 .card-h h2,.grid-4 .card-h h3,.grid-4 .card-h b{font-size:16px;text-wrap:balance}
.kpi .lbl{font-size:12.8px;line-height:1.3}


/* =========================================================================
   v3.7.1 — fit, reach and return
   ========================================================================= */

/* ---- A. Nothing may push the page wider than the window -----------------
   A block will not shrink below its content unless it is told to. Without
   this the table stretched the whole layout and the window clipped it, which
   is why columns looked chopped off instead of scrolling.                  */
.app-main,.content,.page,.card,.tbl-wrap{min-width:0}
.content,.page{max-width:100%}
.card{max-width:100%}
.tbl-wrap{max-width:100%;overflow-x:auto}

/* a scrollbar you can actually see, so it is obvious the table slides */
.tbl-wrap{scrollbar-width:thin;scrollbar-color:#C3CBD9 transparent}
.tbl-wrap::-webkit-scrollbar{height:10px}
.tbl-wrap::-webkit-scrollbar-thumb{background:#C3CBD9;border-radius:99px;border:2px solid var(--surface)}
.tbl-wrap::-webkit-scrollbar-thumb:hover{background:#A9B4C6}
.tbl-wrap::-webkit-scrollbar-track{background:transparent}

/* ---- B. The whole row is the link ---------------------------------------
   Clicking anywhere on a row opens that record, not just the name.        */
table.tbl tbody tr.row-link{cursor:pointer}
table.tbl tbody tr.row-link:hover td{background:var(--canvas)}
table.tbl tbody tr.row-link:focus-visible{outline:2px solid var(--primary);outline-offset:-2px}

/* ---- C. Back button ------------------------------------------------------ */
.back-bar{display:flex;align-items:center;gap:10px;margin:0 0 14px}
.btn-back{
  display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 14px;
  border:1px solid var(--line-3);border-radius:var(--r);background:var(--surface);
  color:var(--text-2);font:inherit;font-size:.8rem;font-weight:700;cursor:pointer;text-decoration:none;
}
.btn-back:hover{background:var(--canvas);color:var(--text);text-decoration:none}
.btn-back svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2}
@media print{.back-bar{display:none}}

/* ---- D. The logo is square — never squash or crop it -------------------- */
.rail-logo{overflow:visible;padding:0}
.rail-logo img{
  width:38px;height:38px;object-fit:contain;object-position:center;
  aspect-ratio:1/1;max-width:100%;max-height:100%;
}

/* ---- E. Stop wasting width ----------------------------------------------
   The rota and the wide tables were squeezed into the middle while 150px of
   page padding and an over-wide sidebar sat empty either side.            */
:root{--side:228px}
.content{padding:22px 22px 48px}
table.tbl th{padding:14px 12px 14px 0}
table.tbl td{padding:14px 12px 14px 0}
table.tbl th:first-child,table.tbl td:first-child{padding-left:14px}
table.tbl th:last-child,table.tbl td:last-child{padding-right:14px}

/* the rota / schedule grid gets the whole width and its own scroller */
.rota-wrap,.cal-wrap,.grid-wrap,.tbl-wrap{width:100%;max-width:100%;overflow-x:auto}
.rota-wrap table,.cal-wrap table{width:100%;min-width:100%}

/* a day cell in the rota does not need 93px of height */
table.tbl.compact tbody tr,
.rota-wrap table tbody tr,
.cal-wrap table tbody tr{height:auto}
.rota-wrap table td,.cal-wrap table td{padding:8px 8px}

/* on a big screen let the sidebar fold away so the schedule runs edge to edge */
@media(min-width:1500px){.content{padding:22px 28px 48px}}
/* the brand block must not wrap now the sidebar is narrower */
.side-head .nm,.side-brand b,.side-brand .nm{
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;font-size:.86rem;
}
.side-head,.side-brand{min-width:0}
:root{--side:236px}


/* ---- F. Row menus must never be clipped by the table ---------------------
   .tbl-wrap scrolls sideways, and a scrolling box clips anything sticking
   out of it in BOTH directions — which is why the "…" menu appeared cut in
   half. The menu is placed with position:fixed by menuPlace() in app.js, so
   it floats above the table instead of being trapped inside it.          */
.menu-pop{position:fixed;right:auto;top:auto;z-index:1000;box-shadow:0 8px 28px rgba(31,45,66,.16)}
.menu.open .menu-pop{display:block}

/* the Actions column keeps a little air on the right edge */
table.tbl th:last-child,table.tbl td:last-child{padding-right:16px}

/* ---- G. A row is only tall because of the avatar -------------------------
   Warah's rows are tall because they carry a 60px photo. A row without one
   (Attendance, Policies, Payroll) was being padded to the same height for
   no reason, which pushed half the table off the bottom of the screen.   */
table.tbl tbody tr:not(:has(.av)){height:auto}
table.tbl tbody tr:not(:has(.av)) td{padding-top:11px;padding-bottom:11px}

/* ---- H. Give the table the space, not the margins -----------------------
   Measured on Attendance at 1440px: 304px went to the menus, 44px to page
   padding, and the Name and Site columns alone took 442px for text that is
   rarely longer than half that.                                          */
.content{padding:16px 14px 40px}
.tbl-wrap{margin-left:-14px;margin-right:-14px;padding-left:14px;padding-right:14px;width:calc(100% + 28px)}

/* no column may hog the table; long values truncate and show in full on hover */
table.tbl td{max-width:172px}
table.tbl td.wide{max-width:260px}
table.tbl td .emp-cell b,table.tbl td .emp-cell small{max-width:158px}

/* the sort arrows were making narrow columns as wide as their heading */
table.tbl th{padding:12px 10px 12px 0;font-size:.78rem}
table.tbl td{padding:11px 10px 11px 0}
.sortable .arw{font-size:8px;margin-left:2px;opacity:.35}

/* when you collapse the menu, the table really does take the whole window */
body.side-collapsed .content{padding-left:12px;padding-right:12px}
/* site names are long but rarely need more than this to be recognised */
table.tbl td.mut{max-width:150px}

/* ---- I. The profile header uses its own width ---------------------------
   The name sat on the left and the buttons dropped onto a line of their own,
   leaving the whole right-hand half of the banner empty.                  */
.page-head{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
.page-head > :first-child{min-width:0;flex:1 1 auto}
.page-head .head-actions{flex:0 0 auto;display:flex;align-items:center;gap:9px;margin-left:auto}

/* nothing in the profile header may clip a menu opened inside it */
.page-head,.prof-hero,.prof-banner{overflow:visible}

/* ---- J. Small inputs that live inside a table row ----------------------- */
.in-sm{
  height:32px;padding:5px 10px;border:1px solid var(--line-3);border-radius:var(--r);
  background:var(--surface);color:var(--text);font:inherit;font-size:.8rem;width:100%;max-width:140px;
  font-variant-numeric:tabular-nums;text-align:right;
}
.in-sm[type=date]{text-align:left;max-width:150px}
.in-sm:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(95,168,211,.18)}
td .in-sm{margin-left:auto;display:block}
.card-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap}

/* ---- K. Allowances by type ---------------------------------------------- */
.allow-row{display:grid;grid-template-columns:1fr 1fr 120px 32px;gap:8px;align-items:center;margin-bottom:8px}
.allow-row input[hidden]{display:none}
.allow-row:has(input[name="allow_label[]"][hidden]){grid-template-columns:1fr 120px 32px}
.allow-row select,.allow-row input{
  height:37px;padding:8px 12px;border:1px solid var(--line-3);border-radius:var(--r);
  background:var(--surface);color:var(--text);font:inherit;font-size:.8rem;width:100%;
}
.allow-row input[name="allow_amount[]"]{text-align:right;font-variant-numeric:tabular-nums}
.allow-row select:focus,.allow-row input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(95,168,211,.18)}
.allow-x{
  width:32px;height:32px;border:1px solid var(--line-3);border-radius:var(--r);background:var(--surface);
  color:var(--text-3);cursor:pointer;font-size:12px;line-height:1;
}
.allow-x:hover{background:var(--danger-soft);border-color:var(--danger);color:var(--danger)}
.allow-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:2px;font-size:.8rem}
.allow-foot b{font-size:.86rem;color:var(--text)}

/* ---- L. Name suggestions ------------------------------------------------
   Fixed, like the row menus, so no scrolling box can clip the list.       */
.sug-box{
  position:fixed;z-index:1200;display:none;max-height:340px;overflow:auto;
  background:var(--surface);border:1px solid var(--line-3);border-radius:var(--r-md);
  box-shadow:0 10px 30px rgba(31,45,66,.16);padding:5px;overscroll-behavior:contain;
}
.sug{display:block;padding:8px 11px;border-radius:var(--r);text-decoration:none;color:var(--text)}
.sug:hover,.sug.on{background:var(--canvas);text-decoration:none}
.sug-n{display:block;font-weight:700;font-size:.82rem}
.sug-n em{font-style:normal;font-size:.7rem;color:var(--text-3);font-weight:600}
.sug-ar{display:block;font-size:.78rem;color:var(--text-2)}
.sug-m{display:block;font-size:.72rem;color:var(--text-3);margin-top:1px}

/* ---- M. Names get the room freed by dropping IBAN and Birth date -------- */
/* the FIRST cell is the tick box — the name cell is the one holding .emp-cell */
table.tbl td:has(.emp-cell),
table.tbl th:has(+ th),
table.tbl td.name-cell{max-width:none}
table.tbl td:has(.emp-cell){min-width:230px}
table.tbl td .emp-cell{max-width:none}
table.tbl td .emp-cell b{max-width:none;white-space:nowrap}
/* the Arabic line is the one that was being cut — let it have its own width */
table.tbl td .emp-cell small,
table.tbl td small[dir=rtl],
table.tbl td .name-ar{
  max-width:none;white-space:normal;overflow:visible;text-overflow:clip;
  line-height:1.35;unicode-bidi:isolate;
}

/* a menu holding a long list needs to scroll inside itself */
.menu-pop.scrolls{max-height:min(340px, 60vh);overflow-y:auto;overscroll-behavior:contain}

/* ---- N. No scrollbar where there is nothing to scroll -------------------
   .tabs had overflow-x:auto so a narrow phone could swipe through them. On a
   desktop that produced a permanent scrollbar track beside a row of four tabs
   with nothing to scroll. Scroll only when the tabs genuinely do not fit.  */
.tabs{overflow-x:visible;flex-wrap:wrap}
@media(max-width:700px){.tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .tabs::-webkit-scrollbar{display:none}}

/* the same everywhere else a track was showing over content that fits */
.tbl-wrap{scrollbar-gutter:auto}
.card,.page,.content{overflow:visible}

/* ---- O. Add to home screen (includes/install-prompt.php) ----------------
   A bottom sheet on a phone, where a thumb is, and a quiet card in the corner
   on a desktop. Borders only — the Warah skin has no shadows.            */
.pwa-card{
  position:fixed;z-index:80;display:flex;gap:12px;align-items:flex-start;
  background:var(--surface);border:1px solid var(--line-3);border-radius:var(--r-lg);
  padding:14px 16px;font-size:.8rem;color:var(--text);
  left:12px;right:12px;bottom:12px;
}
.pwa-card[hidden]{display:none}
/* .btn sets display, which would otherwise beat the browser's [hidden] rule */
.pwa-card [hidden]{display:none}
@media(min-width:760px){
  .pwa-card{left:auto;right:20px;bottom:20px;width:340px}
}
.pwa-ico img{border-radius:10px;display:block}
.pwa-body{min-width:0;flex:1}
.pwa-body b{display:block;font-size:.9rem;font-weight:800;margin-bottom:4px}
.pwa-sub{margin:0;color:var(--text-2);line-height:1.45}
.pwa-steps{margin:8px 0 0;padding-left:18px;color:var(--text-2);line-height:1.5}
.pwa-steps li{margin-bottom:4px}
.pwa-steps b{display:inline;font-size:inherit;font-weight:800;color:var(--text)}
.pwa-actions{display:flex;gap:8px;margin-top:12px}
.pwa-x{
  position:absolute;top:6px;right:8px;border:0;background:none;cursor:pointer;
  font-size:20px;line-height:1;color:var(--text-3);padding:4px 6px;border-radius:var(--r-sm);
}
.pwa-x:hover{background:var(--canvas);color:var(--text)}

/* ---- O. Portal tiles ----------------------------------------------------
   Two faults: the title and its description ran together on one line because
   neither was a block, and the tiles looked like plain white cards so nothing
   said "press me". They are the only way a guard moves around the system.  */
.ss-tile{
  display:flex;flex-direction:column;align-items:flex-start;gap:2px;
  padding:16px 18px;min-height:118px;
  background:var(--primary-soft,#E8F2F8);
  border:1px solid var(--primary-soft-2,#CFE3F0);
  border-radius:var(--r-md);text-decoration:none;color:var(--text);
  transition:background .12s,border-color .12s,transform .12s;
}
.ss-tile:hover{background:#DCEBF6;border-color:var(--primary);text-decoration:none}
.ss-tile:active{transform:translateY(1px)}
.ss-tile:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.ss-tile .ic{margin-bottom:8px}
.ss-tile b{display:block;width:100%;font-size:.92rem;font-weight:800;line-height:1.25;color:var(--text)}
.ss-tile small{display:block;width:100%;margin-top:3px;font-size:.76rem;font-weight:400;line-height:1.35;color:var(--text-2)}
@media(prefers-reduced-motion:reduce){.ss-tile:active{transform:none}}

/* ---------- v4.0 Access Levels ------------------------------------------- */
/* The row menu on the People list, matching Warah's "⋯" on each row.
   A <details> rather than JavaScript: it closes on Escape and on a second
   click for free, and it still works if a script fails to load. */
.rowmenu{position:relative;display:inline-block}
.rowmenu>summary{list-style:none;cursor:pointer;user-select:none}
.rowmenu>summary::-webkit-details-marker{display:none}
.rowmenu-p{
  position:absolute;right:0;top:calc(100% + 4px);z-index:30;min-width:200px;text-align:left;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:6px;
}
.rowmenu-p a{display:block;padding:8px 10px;border-radius:var(--r);font-size:.8rem;font-weight:600;color:var(--text-2);text-decoration:none;white-space:nowrap}
.rowmenu-p a:hover{background:var(--canvas-2);color:var(--text);text-decoration:none}

/* The permission grid: tick cells sit in the middle of a narrow column, and
   the four verb columns stay put while a long area name takes the slack. */
#permGrid td.center,#permGrid th.center{text-align:center}
#permGrid input[type=checkbox]{width:16px;height:16px}
#permGrid tr.al-sec td{padding-top:12px;padding-bottom:12px}

/* v4.2 — Access Levels: the All / None pair that sits on every column header,
   every group row and in front of every area row. Text, not a bare tick box,
   because a bare box next to a heading tells nobody what it will do. Warah
   rules apply: 12.8px, no shadow, accent only on hover. */
.al-quick{display:inline-flex;align-items:center;gap:5px;vertical-align:middle;margin-right:12px}
.al-quick button{border:none;background:none;padding:0;font:inherit;font-size:.7rem;font-weight:700;
  letter-spacing:.02em;text-transform:uppercase;color:var(--text-2);cursor:pointer;line-height:1.6}
.al-quick button:hover,.al-quick button:focus-visible{color:var(--primary);text-decoration:underline}
.al-quick i{font-style:normal;color:var(--line-2);font-size:.7rem}
.al-name{display:inline-block;vertical-align:middle}

/* v4.2 — Create Invoice. Three row kinds in the editor and one honest signal:
   a box you cannot type into is greyed, so nobody fills in Workers x Hours on a
   fixed-amount line and wonders why the total ignored it. */
#lineTbl tr.ln-section td{background:var(--canvas-2);border-top:1px solid var(--line-2)}
#lineTbl tr.ln-section input{font-size:.82rem}
#lineTbl tr.ln-subtotal td{background:var(--canvas-2)}
#lineTbl .is-off{background:var(--canvas-2);color:var(--text-3);border-color:var(--line-2);cursor:not-allowed}
#lineTbl .ln-mode{border:1px solid var(--line);border-radius:6px;background:#fff;font:inherit;font-size:.75rem;padding:0 6px}
.jt-pick{display:flex;flex-wrap:wrap;gap:6px 14px;max-height:110px;overflow:auto;
  border:1px solid var(--line);border-radius:6px;padding:8px 10px;background:#fff}
.jt-pick label{display:inline-flex;align-items:center;gap:6px;font-size:.8rem;font-weight:600;cursor:pointer;white-space:nowrap}

/* =========================================================================
   v4.4 — PHONES. "Web mobile adapted, dynamic, scaling on mobile phones."
   
   The desktop numbers above are the measured Warah spec and are NOT touched:
   everything here is inside a phone/touch query, so a desktop renders byte
   for byte as it did before. Measured before writing any of it, at 320, 360,
   375, 430 and landscape 667x375.

   What was actually wrong:
     1. every input was 12.8px. Safari on iOS auto-zooms any field under 16px
        the moment it is tapped, and does not zoom back out. That is the whole
        "it does not scale on my phone" complaint: the guard taps Username and
        the page jumps to ~130% and stays there, half the card off-screen.
     2. the type never changed size. 16px root, frozen, so a 430px phone
        showed the same 12.8px as a 320px one.
     3. .btn got a 44px finger target on touch; .btn-primary did not, and
        .btn-primary is exactly what the Sign In button is. It stayed 37px.
     4. 100vh / 74vh count the mobile URL bar, so the card sat partly under
        browser chrome and the page rocked when the bar hid.
     5. the icon rail held 68px — a fifth of a 360px screen — on every page,
        for a guard whose only job on that screen is one button.
   ========================================================================= */

/* ---- 1. The type scales with the phone ---------------------------------
   Never smaller than the desktop 16px root, and it grows on a bigger handset
   instead of staying frozen. Everything sized in rem follows it, which is all
   body copy, labels, table text and the UI. */
@media(max-width:640px){
  html{font-size:clamp(16px, 4.4vw, 18px)}
}

/* ---- 2. Fields never trigger the iOS zoom ------------------------------
   1rem is >= 16px by the rule above, on every phone size, so Safari leaves
   the viewport alone. This is the single fix that matters most on the
   login page. */
@media(pointer:coarse){
  .field input,.field select,.field textarea,.selectbox,textarea.inp,
  input[type=text],input[type=password],input[type=search],input[type=number],
  input[type=tel],input[type=email],input[type=date],input[type=month],
  input[type=time],input[type=datetime-local],.epick-q,.epick-t,.inp{
    font-size:1rem;
  }
  /* and a finger-sized target while we are here */
  .field input,.field select,.selectbox,.epick-q,.epick-t{min-height:44px}
  .field input[type=checkbox],.field input[type=radio]{min-height:0}
  /* .btn was already 44px here; .btn-primary — the Sign In button — was not */
  .btn-primary,.btn-back,.top-icon,.top-toggle,.side-sub-link{min-height:44px}
  .btn-primary{height:auto;padding:0 20px}
}

/* ---- 3. Real viewport height ------------------------------------------
   dvh follows the URL bar; the vh line stays first as the fallback for old
   browsers. */
.login-page{min-height:100vh;min-height:100dvh}
.checkin-wrap{min-height:74vh;min-height:74dvh}
.app-main{min-height:100vh;min-height:100dvh}

/* ---- 4. The login card fits a phone, error and all ---------------------
   Measured: with an error message showing it was 685px tall on a 667px
   screen, so the guard had to scroll to reach Sign In. Now it fits. */
@media(max-width:640px){
  .login-page{padding:16px 14px}
  .login-body{padding:22px 20px}
  .login-body h1{font-size:clamp(20px,5.6vw,26px)}
  .login-page .login-logo{height:40px;margin-bottom:14px}
  .login-sub{margin-bottom:16px}
  .login-body .field{margin-bottom:13px}
  .login-foot{margin-top:16px;padding-top:12px;font-size:.72rem}
  .login-body .btn-primary{margin-top:4px}
}
/* a phone held sideways is 375px tall: centring a 560px card there just
   hides the top of it, so start at the top and let it scroll honestly */
@media(max-height:540px){
  .login-page{align-content:start;padding-top:14px;padding-bottom:14px}
}

/* ---- 5. Give the page back the width the rail was holding --------------
   Below 640px the rail hides and the sidebar becomes an ordinary drawer off
   the left edge, opened by the burger that is already in the top bar. The
   rail's two account links (profile, sign out) are repeated in the drawer
   foot by header.php so nothing becomes unreachable — see .mob-only. */
/* hidden by default, shown only in the phone query below — this line must stay
   ABOVE that query: same specificity, so whichever comes last in the file wins */
.side-foot .mob-only{display:none}
/* v4.9 — same rule, same reason: base first, phone query below, or the query
   loses to it on equal specificity. */
.app-side .side-group-t.phone-head{display:none}
@media(max-width:640px){
  .app-rail{display:none}
  .app-side{left:0;width:min(84vw,300px)}

  /* v4.9 — AN EMPLOYEE COULD ONLY REACH CHECK IN / OUT ON A PHONE.
     The drawer shows one group at a time and the others carry an inline
     display:none; the thing that switches between them is the icon rail —
     which the line above hides on a phone. Office staff still have the
     "Everything" list at the foot of the drawer to switch with, but that list
     is deliberately not rendered for employees, because the rail was doing the
     job for them. Hide the rail and an employee is left with one group: his
     portal, his payslip, his documents, his messages and his profile all
     became unreachable from a phone, which is the only device he has.
     He has three groups and nine links in total, so on a phone he simply gets
     all of them at once, each under its own heading — no switching to
     discover. !important is needed to beat the inline display:none, and it is
     scoped to .side-employee so nothing about the office menu changes. */
  .app-side.side-employee .side-group[data-group]{display:block !important}
  .app-side.side-employee .side-group-t.phone-head{display:block}
  .app-side.side-employee .side-group[data-group] + .side-group[data-group]{
    margin-top:8px;padding-top:10px;border-top:1px solid var(--line-2);
  }
  .app-main{margin-left:0}
  body.side-open .app-main,
  body.side-collapsed .app-main{margin-left:0}
  /* tapping the page closes the drawer instead of trapping you behind it */
  body.side-open .app-main::before{
    content:"";position:fixed;inset:0;z-index:55;background:rgba(31,45,66,.34);
  }
  :root{--topbar:60px}
  .app-top{padding:0 14px;gap:8px}
  .content{padding:14px 14px 40px}
  .side-foot .mob-only{display:flex}
}

/* ---- 6. The clock button scales with the handset ----------------------
   It was a fixed 172px circle on a 320px screen and on a 430px one alike. */
@media(max-width:640px){
  .checkin-wrap{padding:8px}
  .checkin-card{padding:20px 16px}
  .big-btn{
    width:clamp(148px,46vw,200px);height:clamp(148px,46vw,200px);
    font-size:clamp(17px,4.6vw,21px);margin:16px auto;
  }
}

/* ---- 7. Small mercies on a narrow screen ------------------------------ */
@media(max-width:640px){
  .page-head{gap:10px}
  .head-actions{width:100%}
  .head-actions .btn{flex:1 1 auto;justify-content:center}
  .crumbs{font-size:.72rem;gap:5px}
  .modal{width:100%;max-width:100%;border-radius:var(--r-md) var(--r-md) 0 0}
  .form-grid{grid-template-columns:1fr}
  .kpi-grid{grid-template-columns:1fr 1fr}
  .ss-tiles{grid-template-columns:1fr 1fr;gap:10px}
  .ss-tile{padding:14px 10px}
}
@media(max-width:400px){
  .ss-tiles{grid-template-columns:1fr}
  .kpi-grid{grid-template-columns:1fr}
}

/* ==========================================================================
 * v5.0 — ARABIC, RIGHT TO LEFT
 *
 * He asked for it on 28 Aug: the ninety-nine guards use this from their phones
 * and most of them do not read English. Translating the words alone would have
 * left the menu on the left, the tables starting on the left and every arrow
 * pointing the wrong way — Arabic read through an English layout, which is
 * worse than English. So the shell mirrors.
 *
 * EVERY RULE HERE IS UNDER [dir="rtl"]. The English screen is untouched, and
 * that is deliberate: this must not become a redesign of a product he already
 * signed off on. Warah's numbers stay exactly as measured.
 * ======================================================================== */

/* Nunito Sans carries no Arabic, so the browser would fall back to whatever it
   liked, differently on every phone. Name the Arabic faces first and let the
   Latin face handle the numbers and the codes. */
[dir="rtl"] body, [dir="rtl"] input, [dir="rtl"] select, [dir="rtl"] textarea, [dir="rtl"] button{
  font-family:"Noto Kufi Arabic","Segoe UI","Geeza Pro",Tahoma,"Nunito Sans",system-ui,sans-serif;
}
/* codes, money, IBANs and times are Latin whichever way the page reads */
[dir="rtl"] .mono, [dir="rtl"] .num, [dir="rtl"] .money{direction:ltr;unicode-bidi:isolate}

/* ---- the shell flips sides ---------------------------------------------- */
[dir="rtl"] .app-rail{left:auto;right:0}
[dir="rtl"] .app-side{left:auto;right:var(--rail);border-right:0;border-left:1px solid var(--line)}
[dir="rtl"] .app-main{margin-left:0;margin-right:calc(var(--rail) + var(--side))}
[dir="rtl"] body.side-collapsed .app-side{transform:translateX(100%)}
[dir="rtl"] body.side-collapsed .app-main{margin-right:var(--rail);margin-left:0}
[dir="rtl"] .rail-tip{left:auto;right:calc(100% + 8px)}
[dir="rtl"] .side-collapse{transform:scaleX(-1)}
@media(max-width:1024px){
  /* the drawer slides in from the RIGHT, and hides off the right edge.
     Without this it hid off the LEFT and sat half across the screen. */
  [dir="rtl"] .app-side{transform:translateX(100%)}
  [dir="rtl"] body.side-open .app-side{transform:none}
  [dir="rtl"] body.side-collapsed .app-side{transform:translateX(100%)}
  [dir="rtl"] .app-main{margin-right:var(--rail);margin-left:0}
  [dir="rtl"] body.side-open .app-main{margin-right:var(--rail);margin-left:0}
}

/* ---- text and tables start on the right --------------------------------- */
[dir="rtl"] th, [dir="rtl"] td, [dir="rtl"] .field label, [dir="rtl"] .note,
[dir="rtl"] .empty, [dir="rtl"] .alert, [dir="rtl"] .stat-line{text-align:right}
[dir="rtl"] th.num, [dir="rtl"] td.num{text-align:left}
[dir="rtl"] .crumbs .sep{transform:scaleX(-1);display:inline-block}

/* ---- the language button in the top bar --------------------------------- */
.top-lang{font-weight:800;font-size:12.5px;letter-spacing:.02em;text-decoration:none}
/* and on the login screen, where there is no top bar and no session yet */
.login-lang{position:absolute;top:14px;inset-inline-end:16px;font-size:12.5px;font-weight:700;
  text-decoration:none;color:var(--primary-d);opacity:.85}
.login-lang:hover{opacity:1;text-decoration:underline}
.login-card{position:relative}

/* ---- the phone drawer comes in from the right --------------------------- */
@media(max-width:640px){
  [dir="rtl"] .app-side{right:0;left:auto}
  [dir="rtl"] .app-main{margin-right:0}
  [dir="rtl"] body.side-open .app-main,
  [dir="rtl"] body.side-collapsed .app-main{margin-right:0;margin-left:0}
}