/* ══════════════════════════════════════════════════════════════════
   HRPulse — "Timecard"  v3.0
   Instrument-panel workspace: slate paper, indigo ink, mono numerals.
   Shell: 72px icon rail + contextual panel.

   Every class name from v2.1 is preserved, so all 38 module pages
   keep rendering. Token VALUES are retuned — that propagates to the
   736 inline styles that use var(--…).
   ══════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ── Ink & accent ── */
  --primary: #1f3f8f;
  --primary-dark: #172f6d;
  --primary-light: #e9edf7;

  --success: #12684a;
  --success-light: #e2f7ee;
  --warning: #935008;
  --warning-light: #fdf1d8;
  --danger: #ad2e26;
  --danger-light: #fdeae8;
  --info: #0d6b78;
  --info-light: #e0f5f7;

  /* ── Cool slate scale (was neutral gray) ── */
  --gray-50:  #f7f9fc;
  --gray-100: #eff2f7;
  --gray-200: #e2e7ef;
  --gray-300: #c8d0de;
  --gray-400: #8d99ae;
  --gray-500: #66738c;
  --gray-600: #4b5670;
  --gray-700: #364057;
  --gray-800: #232c40;
  --gray-900: #131c2b;

  /* ── Shell surfaces ── */
  --rail-bg: #131c2b;
  --rail-bg-deep: #0e1622;
  --panel-bg: #18222f;
  --panel-line: rgba(255,255,255,.07);
  --panel-text: #97a3b8;
  --app-bg: #f4f6f9;

  --rail-width: 74px;
  --panel-width: 216px;   /* legacy */
  --sidebar-width: 262px;
  --topbar-height: 64px;

  --font: 'Inter', system-ui, sans-serif;
  --display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  --mono: 'JetBrains Mono', monospace;

  --radius: 8px;
  --radius-lg: 12px;
  --shadow: 0 1px 2px rgba(19,28,43,.04);
  --shadow-md: 0 4px 14px rgba(19,28,43,.07);
  --shadow-lg: 0 20px 46px rgba(16,24,37,.18);
  --ring: 0 0 0 3px rgba(31,63,143,.16);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 14px; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font);
  color: var(--gray-800);
  display: flex;
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;

  background: var(--app-bg);
}

h1, h2, h3, .page-title, .card-title, .modal-title { font-family: var(--display); letter-spacing: -.015em; }

a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* ══════════ SHELL: floating light sidebar ══════════ */
.sidebar {
  position: fixed; left: 14px; top: 14px; bottom: 14px;
  z-index: 100;
  width: var(--sidebar-width);
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: 16px;
  box-shadow: 0 6px 24px rgba(19,28,43,.07);
  display: flex; flex-direction: column;
  overflow: hidden;
  transition: width .22s cubic-bezier(.4,0,.2,1), transform .22s ease;
}
.sidebar.collapsed { width: var(--rail-width); }

/* ── Brand ── */
.panel-head,
.sidebar-brand {
  padding: 18px 18px 16px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  display: flex; align-items: center; gap: 11px;
  min-height: 72px;
  /* Same navy as the dashboard banner and attendance clock */
  background: linear-gradient(158deg, #1b2740 0%, var(--rail-bg) 52%, #0e1622 100%);
  position: relative; overflow: hidden;
}
.panel-head::before,
.sidebar-brand::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 90% at 12% 0%, rgba(90,130,255,.2) 0%, transparent 60%);
}
.panel-head > *, .sidebar-brand > * { position: relative; z-index: 1; }
.brand-mark {
  width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0;
  background: rgba(255,255,255,.12); color: #fff;
  border: 1px solid rgba(255,255,255,.14);
  display: flex; align-items: center; justify-content: center; font-size: 15px;
}
.brand-text { min-width: 0; }
.brand-logo {
  display: block;
  font-family: var(--display);
  font-size: 15px; font-weight: 700; color: #fff;
  letter-spacing: -.02em; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.brand-logo i { display: none; }
.brand-role {
  font-family: var(--mono);
  font-size: 9px; color: rgba(255,255,255,.55);
  margin-top: 3px; text-transform: uppercase;
  letter-spacing: .13em; white-space: nowrap;
}
.logo-wrapper {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; flex-shrink: 0;
  border-radius: 9px; background: #fff;
  border: 1px solid rgba(255,255,255,.16); padding: 4px;
}
.company-logo { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; }

/* ── Nav ── */
.sidebar-nav {
  flex: 1; overflow-y: auto; overflow-x: hidden;
  padding: 10px; scrollbar-width: thin;
  scrollbar-color: var(--gray-300) transparent;
}
.sidebar-nav::-webkit-scrollbar { width: 5px; }
.sidebar-nav::-webkit-scrollbar-thumb { background: var(--gray-300); border-radius: 3px; }
.nav-section { display: none; }   /* legacy hook */

/* Accordion group */
.nav-group + .nav-group { margin-top: 2px; }
.nav-group.active {
  background: #f5f8fd;
  border-radius: 10px;
  padding-bottom: 4px;
}
.nav-group-toggle {
  width: 100%; display: flex; align-items: center; gap: 11px;
  padding: 9px 11px; border: none; background: none; cursor: pointer;
  font-family: var(--font); font-size: 12.5px; font-weight: 600;
  color: var(--gray-600); border-radius: 9px; text-align: left;
  transition: background .14s, color .14s;
}
.nav-group-toggle:hover { background: var(--gray-50); color: var(--gray-900); }
.nav-group-toggle > i:first-child {
  width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0;
  background: var(--gray-100); color: var(--gray-500);
  display: flex; align-items: center; justify-content: center; font-size: 13px;
  transition: background .14s, color .14s;
}
.nav-group.active .nav-group-toggle { color: var(--gray-900); }
.nav-group.active .nav-group-toggle > i:first-child { background: var(--primary-light); color: var(--primary); }
.nav-group-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-caret { font-size: 10px; color: var(--gray-400); transition: transform .2s; flex-shrink: 0; }
.nav-group.active .nav-caret { transform: rotate(90deg); }

/* Items — hung off a hairline spine aligned with the group icon */
.nav-group-items {
  display: none;
  margin: 2px 0 6px 26px;
  padding-left: 14px;
  border-left: 1px solid var(--gray-200);
}
.nav-group.active .nav-group-items { display: block; }

.nav-link {
  position: relative;
  display: flex; align-items: center; gap: 9px;
  padding: 7px 10px; margin-bottom: 1px;
  color: var(--gray-600); text-decoration: none;
  font-size: 13px; border-radius: 7px; white-space: nowrap;
  transition: background .14s, color .14s;
}
.nav-link i { width: 15px; text-align: center; flex-shrink: 0; font-size: 12.5px; color: var(--gray-400); }
.nav-link .nav-text { overflow: hidden; text-overflow: ellipsis; }
.nav-link:hover { background: var(--gray-50); color: var(--gray-900); }
.nav-link:hover i { color: var(--gray-600); }
.nav-link.active { background: var(--primary-light); color: var(--primary); font-weight: 500; }
.nav-link.active i { color: var(--primary); }
/* Marker on the spine for the current page */
.nav-link.active::before {
  content: ''; position: absolute; left: -15px; top: 50%;
  transform: translateY(-50%);
  width: 2px; height: 16px; border-radius: 2px; background: var(--primary);
}
.nav-link-danger { color: var(--danger); }
.nav-link-danger i { color: var(--danger); }
.nav-link-danger:hover { background: var(--danger-light); color: var(--danger); }

/* ── Foot ── */
.panel-foot {
  border-top: 1px solid var(--gray-100);
  padding: 13px 18px 14px;
  background: var(--gray-50);
  flex-shrink: 0;
}
.copyright {
  font-size: 11px; color: var(--gray-500);
  line-height: 1.5;
}
.copyright-line { display: block; color: var(--gray-400); }
.copyright-ver {
  font-family: var(--mono); font-size: 9.5px;
  color: var(--gray-400); letter-spacing: .1em;
  text-transform: uppercase; margin-top: 6px;
}

/* Collapsed rail: just the symbol, with the full text on hover */
.sidebar.collapsed .panel-foot {
  padding: 13px 0 14px; text-align: center; position: relative;
}
.sidebar.collapsed .copyright-line,
.sidebar.collapsed .copyright-ver { display: none; }
.sidebar.collapsed .copyright { font-size: 10px; }
.panel-clock {
  font-family: var(--mono); font-size: 15px; font-weight: 500;
  color: var(--gray-900); font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.panel-clock-date { font-size: 11px; color: var(--gray-400); white-space: nowrap; }

/* ── Collapsed: icon-only ── */
.sidebar.collapsed .brand-text,
.sidebar.collapsed .brand-role,
.sidebar.collapsed .nav-group-label,
.sidebar.collapsed .nav-caret,
.sidebar.collapsed .panel-clock-date { display: none; }
.sidebar.collapsed .panel-head,
.sidebar.collapsed .sidebar-brand { justify-content: center; padding: 18px 0 16px; }
.sidebar.collapsed .nav-group-items { display: none !important; }
.sidebar.collapsed .nav-group-toggle { justify-content: center; padding: 9px 0; gap: 0; }
.sidebar.collapsed .panel-foot { justify-content: center; padding: 13px 0; }
.sidebar.collapsed .panel-clock { font-size: 12px; }

.sidebar.collapsed .nav-group-toggle::after {
  content: attr(data-label);
  position: absolute; left: calc(100% + 12px); top: 50%;
  transform: translateY(-50%);
  background: var(--gray-900); color: #fff;
  padding: 6px 10px; border-radius: 6px;
  font-size: 12px; white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity .14s;
  z-index: 300; box-shadow: var(--shadow-md);
}
.sidebar.collapsed .nav-group { position: relative; }
.sidebar.collapsed .nav-group-toggle:hover::after { opacity: 1; }

/* ══════════ Main wrapper ══════════ */
.main-wrapper {
  margin-left: calc(var(--sidebar-width) + 28px);
  flex: 1; min-width: 0; overflow-x: hidden;
  display: flex; flex-direction: column; min-height: 100vh;
  transition: margin .22s ease;
}
.main-wrapper.expanded { margin-left: calc(var(--rail-width) + 28px); }

/* ══════════ Topbar ══════════ */
.topbar {
  height: var(--topbar-height);
  background: rgba(250,251,254,.88);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--gray-200);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 24px; position: sticky; top: 0; z-index: 50;
}
.topbar-left { display: flex; align-items: center; gap: 14px; }
.sidebar-toggle {
  background: none; border: none; cursor: pointer;
  color: var(--gray-500); font-size: 15px;
  width: 34px; height: 34px; border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s;
}
.sidebar-toggle:hover { background: var(--gray-100); color: var(--gray-900); }
.page-title { font-size: 17px; font-weight: 600; color: var(--gray-900); }
.topbar-right { display: flex; align-items: center; gap: 12px; }
.topbar-clock {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 12px; border-radius: 30px;
  background: var(--gray-50); border: 1px solid var(--gray-200);
  font-size: 13px; color: var(--gray-700);
}
.topbar-clock i { color: var(--gray-400); font-size: 12px; }
.topbar-clock #topbar-clock-time {
  font-family: var(--mono); font-weight: 500;
  font-variant-numeric: tabular-nums; color: var(--gray-900);
}
.topbar-clock-date { color: var(--gray-400); font-size: 12px; padding-left: 8px; border-left: 1px solid var(--gray-200); }
.topbar-user {
  display: flex; align-items: center; gap: 10px;
  padding: 5px 10px 5px 5px; border-radius: 30px; transition: background .15s;
}
.topbar-user:hover { background: var(--gray-100); }
.avatar-sm {
  width: 34px; height: 34px; border-radius: 10px;
  background: var(--gray-900); color: #fff;
  font-family: var(--mono); font-size: 11.5px; font-weight: 500;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.user-name { font-size: 13px; font-weight: 500; color: var(--gray-900); }
.user-role { font-size: 11px; color: var(--gray-500); }

/* ══════════ Content ══════════ */
.content { padding: 26px; flex: 1; min-width: 0; overflow-x: hidden; }

/* ══════════ Flash ══════════ */
.flash {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 26px; font-size: 13.5px;
  border-bottom: 1px solid transparent; transition: opacity .4s;
}
.flash-success { background: var(--success-light); color: var(--success); border-color: #a9e5cd; }
.flash-error   { background: var(--danger-light);  color: var(--danger);  border-color: #f3b6b0; }
.flash-warning { background: var(--warning-light); color: var(--warning); border-color: #f0d49a; }
.flash-close { margin-left: auto; background: none; border: none; font-size: 18px; cursor: pointer; color: inherit; line-height: 1; }

/* ══════════ Cards ══════════ */
.card {
  background: #fff; border: 1px solid var(--gray-200);
  position: relative;
  border-radius: var(--radius-lg); padding: 20px 24px;
  box-shadow: var(--shadow);
}
.card-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 18px; padding-bottom: 14px;
  border-bottom: 1px solid var(--gray-100);
}
.card-title { font-size: 15px; font-weight: 600; color: var(--gray-900); }
.card-subtitle { font-size: 12px; color: var(--gray-500); margin-top: 2px; font-family: var(--font); letter-spacing: 0; }

/* ══════════ Stats ══════════ */
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; }
.stat-card {
  position: relative;
  background: #fff; border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg); padding: 18px 20px 18px 22px;
  box-shadow: var(--shadow); transition: border-color .18s;
  overflow: hidden;
}
/* Soft wash rising from the accent edge — colour without losing legibility */
.stat-card::after {
  content: ''; position: absolute; inset: 0; z-index: 0;
  pointer-events: none; opacity: .5;
  background: linear-gradient(105deg, currentColor 0%, transparent 46%);
  color: transparent;
}
.stat-card > * { position: relative; z-index: 1; }
.stat-card:has(.stat-icon.blue)::after  { color: rgba(31,63,143,.09); }
.stat-card:has(.stat-icon.green)::after { color: rgba(18,104,74,.09); }
.stat-card:has(.stat-icon.amber)::after { color: rgba(147,80,8,.09); }
.stat-card:has(.stat-icon.red)::after   { color: rgba(173,46,38,.09); }
.stat-card:has(.stat-icon.teal)::after  { color: rgba(13,107,120,.09); }
/* Colour comes into the grid here: a 3px accent rail tinted to match
   whichever .stat-icon modifier the card carries. */
.stat-card::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--gray-300);
}
.stat-card:has(.stat-icon.blue)::before  { background: var(--primary); }
.stat-card:has(.stat-icon.green)::before { background: var(--success); }
.stat-card:has(.stat-icon.amber)::before { background: var(--warning); }
.stat-card:has(.stat-icon.red)::before   { background: var(--danger); }
.stat-card:has(.stat-icon.teal)::before  { background: var(--info); }
.stat-card:hover { border-color: var(--gray-300); }
.stat-icon {
  width: 36px; height: 36px; border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; margin-bottom: 12px;
}
.stat-icon.blue  { background: var(--primary-light); color: var(--primary); }
.stat-icon.green { background: var(--success-light); color: var(--success); }
.stat-icon.amber { background: var(--warning-light); color: var(--warning); }
.stat-icon.red   { background: var(--danger-light);  color: var(--danger); }
.stat-icon.teal  { background: var(--info-light);    color: var(--info); }
.stat-label { font-size: 11.5px; color: var(--gray-500); font-weight: 500; text-transform: uppercase; letter-spacing: .06em; }
/* Figures are the point of this product — mono, tabular */
.stat-value {
  font-family: var(--mono); font-size: 27px; font-weight: 600;
  color: var(--gray-900); margin-top: 6px; line-height: 1;
  letter-spacing: -.03em; font-variant-numeric: tabular-nums;
}
.stat-sub { font-size: 11px; color: var(--gray-400); margin-top: 5px; }

/* ══════════ Tables ══════════ */
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.table th {
  text-align: left; padding: 10px 14px;
  font-family: var(--mono); font-size: 10.5px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .1em;
  color: var(--primary); background: #eef2fa;
  border-bottom: 1px solid #dde4f2; white-space: nowrap;
}
.table td {
  padding: 12px 14px; border-bottom: 1px solid var(--gray-100);
  color: var(--gray-700); vertical-align: middle;
  font-variant-numeric: tabular-nums;
}
.table tr:last-child td { border-bottom: none; }
.table tbody tr:nth-child(even) td { background: rgba(31,63,143,.018); }
.table tbody tr:hover td { background: var(--primary-light); }
.table td strong { color: var(--gray-900); font-weight: 600; }

/* User menu (topbar) */
.user-menu { position: relative; }
.user-menu-trigger {
  display: flex; align-items: center; gap: 10px;
  padding: 5px 10px 5px 5px; border-radius: 30px;
  background: none; border: 1px solid transparent; cursor: pointer;
  font-family: var(--font); text-align: left;
  transition: background .15s, border-color .15s;
}
.user-menu-trigger:hover { background: var(--gray-100); border-color: var(--gray-200); }
.user-menu-caret { color: var(--gray-400); font-size: 10px; margin-left: 2px; }
.user-dropdown {
  position: absolute; right: 0; top: calc(100% + 8px);
  min-width: 224px; background: #fff;
  border: 1px solid var(--gray-200); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); padding: 6px;
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity .15s, transform .15s, visibility .15s;
  z-index: 200;
}
.user-menu.open .user-dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.user-dropdown-head {
  padding: 10px 12px 12px; margin-bottom: 4px;
  border-bottom: 1px solid var(--gray-100);
}
.user-dropdown-name { font-size: 13.5px; font-weight: 600; color: var(--gray-900); }
.user-dropdown-mail { font-size: 11.5px; color: var(--gray-500); margin-top: 2px; word-break: break-all; }
.user-dropdown-role {
  display: inline-block; margin-top: 7px;
  font-family: var(--mono); font-size: 9.5px;
  text-transform: uppercase; letter-spacing: .12em;
  color: var(--primary); background: var(--primary-light);
  padding: 3px 7px; border-radius: 4px;
}
.user-dropdown a {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: var(--radius);
  font-size: 13px; color: var(--gray-700); text-decoration: none;
  transition: background .13s, color .13s;
}
.user-dropdown a i { width: 15px; text-align: center; color: var(--gray-400); font-size: 13px; }
.user-dropdown a:hover { background: var(--gray-50); color: var(--gray-900); }
.user-dropdown a:hover i { color: var(--gray-600); }
.user-dropdown-sep { height: 1px; background: var(--gray-100); margin: 5px 0; }
.user-dropdown a.danger { color: var(--danger); }
.user-dropdown a.danger i { color: var(--danger); }
.user-dropdown a.danger:hover { background: var(--danger-light); color: var(--danger); }

/* ══════════ Badges ══════════ */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px; border-radius: 5px;
  font-size: 11px; font-weight: 500; white-space: nowrap; letter-spacing: .01em;
}
.badge-green { background: var(--success-light); color: var(--success); }
.badge-amber { background: var(--warning-light); color: var(--warning); }
.badge-red   { background: var(--danger-light);  color: var(--danger); }
.badge-blue  { background: var(--primary-light); color: var(--primary); }
.badge-gray  { background: var(--gray-100);      color: var(--gray-600); }
.badge-teal  { background: var(--info-light);    color: var(--info); }

/* ══════════ Buttons ══════════ */
.btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 15px; border-radius: var(--radius);
  font-size: 13.5px; font-weight: 500; font-family: var(--font);
  border: 1px solid transparent; cursor: pointer;
  text-decoration: none; transition: all .15s; white-space: nowrap;
}
.btn:disabled { opacity: .5; cursor: not-allowed; }
/* Primary buttons take the clock-in box navy */
.btn-primary {
  background: linear-gradient(158deg, #1b2740 0%, var(--rail-bg) 52%, #0e1622 100%);
  color: #fff; border-color: #0e1622;
}
.btn-primary:hover {
  background: linear-gradient(158deg, #24334f 0%, #1a2537 52%, #141d2c 100%);
  border-color: #141d2c;
}
.btn-success { background: var(--success); color: #fff; border-color: var(--success); }
.btn-success:hover { background: #0b6641; }
.btn-danger  { background: var(--danger);  color: #fff; border-color: var(--danger); }
.btn-danger:hover { background: #a32922; }
.btn-warning { background: var(--warning); color: #fff; border-color: var(--warning); }
.btn-warning:hover { background: #8c4a06; }
.btn-outline { background: #fff; color: var(--gray-700); border-color: var(--gray-300); }
.btn-outline:hover { background: var(--gray-50); border-color: var(--gray-400); }
.btn-ghost { background: transparent; color: var(--gray-600); border-color: transparent; }
.btn-ghost:hover { background: var(--gray-100); }
.btn-sm { padding: 5px 10px; font-size: 12.5px; }
.btn-xs { padding: 3px 8px; font-size: 12px; }
.btn-block { width: 100%; justify-content: center; }


/* Primary buttons on navy modal headers */
.modal-header .btn-primary,
.modal-header-blue .btn-primary {
  background: rgba(255,255,255,.14) !important;
  border-color: rgba(255,255,255,.22) !important;
}

/* ══════════ Forms ══════════ */
.form-group { margin-bottom: 18px; }
.form-label { display: block; font-size: 12.5px; font-weight: 500; color: var(--gray-700); margin-bottom: 6px; }
.form-label .req { color: var(--danger); margin-left: 2px; }
.form-control, .form-select {
  width: 100%; padding: 9px 12px;
  border: 1px solid var(--gray-300); border-radius: var(--radius);
  font-size: 13.5px; font-family: var(--font);
  color: var(--gray-800); background: #fff;
  transition: border .15s, box-shadow .15s; appearance: none;
}
.form-control:focus, .form-select:focus { outline: none; border-color: var(--primary); box-shadow: var(--ring); }
input[type="date"].form-control,
input[type="time"].form-control,
input[type="number"].form-control { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.form-hint { font-size: 12px; color: var(--gray-400); margin-top: 4px; }
.form-error { font-size: 12px; color: var(--danger); margin-top: 4px; }
.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
textarea.form-control { min-height: 90px; resize: vertical; }

/* ══════════ Modals ══════════ */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(16,24,37,.55); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center;
  z-index: 999; padding: 20px;
  opacity: 0; pointer-events: none; transition: opacity .2s;
}
.modal-overlay.open { opacity: 1; pointer-events: all; }
.modal {
  background: #fff; border-radius: var(--radius-lg);
  width: 100%; max-width: 560px; max-height: 90vh; overflow-y: auto;
  box-shadow: var(--shadow-lg); transform: translateY(16px); transition: transform .2s;
}
.modal-overlay.open .modal { transform: translateY(0); }
.modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 24px; border-bottom: none;
  /* Same navy as the dashboard header */
  background: linear-gradient(158deg, #1b2740 0%, var(--rail-bg) 52%, #0e1622 100%);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  position: relative; overflow: hidden;
}
.modal-header::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 90% at 12% 0%, rgba(90,130,255,.2) 0%, transparent 60%);
}
.modal-header > * { position: relative; z-index: 1; }
.modal-title { font-size: 15px; font-weight: 600; color: #fff; }
.modal-close {
  background: rgba(255,255,255,.12); border: none; cursor: pointer;
  font-size: 18px; color: #fff; padding: 0;
  width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  line-height: 1; transition: background .15s;
}
.modal-close:hover { background: rgba(255,255,255,.24); color: #fff; }

/* attendance_calendar.php and attendance_admin.php define their own
   .modal-header-blue inside a page-level <style> block. Page styles load
   after this file, so !important is required to override them. */
.modal-header-blue {
  background: linear-gradient(158deg, #1b2740 0%, var(--rail-bg) 52%, #0e1622 100%) !important;
  color: #fff !important;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
}
/* The page's own inner div already handles the flex row — just make sure
   it can use the full width so the close button reaches the right edge. */
.modal-header-blue > div { width: 100%; }
.modal-header-blue .modal-title { color: #fff !important; }
.modal-header-blue .modal-close {
  background: rgba(255,255,255,.12) !important;
  color: #fff !important;
}
.modal-header-blue .modal-close:hover { background: rgba(255,255,255,.24) !important; }

/* Every modal header takes the navy, including the ones that set a
   colour inline (amber, red, green). Inline styles need !important. */
.modal-header[style] {
  background: linear-gradient(158deg, #1b2740 0%, var(--rail-bg) 52%, #0e1622 100%) !important;
  color: #fff !important;
}
/* Titles and close buttons inside those inline headers */
.modal-header[style] div,
.modal-header[style] span { color: #fff !important; }
.modal-header[style] button {
  background: rgba(255,255,255,.12) !important;
  color: #fff !important; border: none !important;
}
.modal-header[style] button:hover { background: rgba(255,255,255,.24) !important; }

.modal-body { padding: 20px 24px; }
.modal-footer {
  display: flex; justify-content: flex-end; gap: 10px;
  padding: 16px 24px; border-top: 1px solid var(--gray-100);
}

/* ══════════ Attendance clock ══════════ */
.clock-display {
  font-size: 58px; font-weight: 600; font-family: var(--mono);
  color: var(--gray-900); letter-spacing: -2px;
  text-align: center; margin: 24px 0 8px; font-variant-numeric: tabular-nums;
}
.clock-date { text-align: center; color: var(--gray-500); font-size: 14px; margin-bottom: 24px; }
.clock-status-bar {
  display: flex; align-items: center; justify-content: center;
  gap: 8px; margin-bottom: 20px; font-size: 13px; font-weight: 500;
}
.status-dot { width: 8px; height: 8px; border-radius: 50%; animation: pulse 1.5s infinite; }
.status-dot.green { background: var(--success); }
.status-dot.amber { background: var(--warning); }
.status-dot.gray  { background: var(--gray-400); animation: none; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .4; } }
.clock-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.break-list { margin-top: 20px; }
.break-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px; background: var(--gray-50);
  border-radius: var(--radius); margin-bottom: 6px; font-size: 13px;
}
.break-item .break-type { font-weight: 500; }
.break-item .break-time { color: var(--gray-500); font-family: var(--mono); }

/* ══════════ Timeline ══════════ */
.timeline { position: relative; padding-left: 20px; }
.timeline::before { content:''; position:absolute; left:7px; top:0; bottom:0; width:2px; background:var(--gray-200); }
.timeline-item { position: relative; padding-bottom: 18px; }
.timeline-dot {
  position: absolute; left: -20px; top: 4px;
  width: 14px; height: 14px; border-radius: 50%; border: 2px solid #fff;
}
.timeline-dot.blue  { background: var(--primary); box-shadow: 0 0 0 3px var(--primary-light); }
.timeline-dot.green { background: var(--success); box-shadow: 0 0 0 3px var(--success-light); }
.timeline-dot.amber { background: var(--warning); box-shadow: 0 0 0 3px var(--warning-light); }
.timeline-time { font-size: 11px; color: var(--gray-400); font-family: var(--mono); }
.timeline-label { font-size: 13px; font-weight: 500; margin-top: 1px; }
.timeline-sub { font-size: 12px; color: var(--gray-500); }

/* ══════════ Payslip ══════════ */
.payslip-wrap { max-width: 680px; margin: 0 auto; }
.payslip-header { text-align: center; padding-bottom: 20px; margin-bottom: 20px; border-bottom: 2px solid var(--gray-200); }
.payslip-company { font-family: var(--display); font-size: 22px; font-weight: 700; color: var(--gray-900); }
.payslip-title { font-family: var(--mono); font-size: 11px; color: var(--gray-500); margin-top: 6px; text-transform: uppercase; letter-spacing: .16em; }
.payslip-meta { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 20px; }
.payslip-meta-block label { display: block; font-size: 10px; color: var(--gray-400); text-transform: uppercase; letter-spacing: .1em; font-family: var(--mono); }
.payslip-meta-block span { font-weight: 500; color: var(--gray-800); }
.payslip-section { margin-bottom: 20px; }
.payslip-section-title {
  font-family: var(--mono); font-size: 10px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .14em; color: var(--gray-500);
  padding: 8px 0; border-bottom: 1px solid var(--gray-200); margin-bottom: 8px;
}
.payslip-row { display: flex; justify-content: space-between; padding: 6px 0; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.payslip-row.total {
  font-weight: 600; font-size: 15px;
  border-top: 2px solid var(--gray-900); padding-top: 12px; margin-top: 8px;
}
.payslip-row .deduct { color: var(--danger); }
.net-salary-box {
  background: var(--gray-900); color: #fff;
  border-radius: var(--radius-lg); padding: 20px 24px;
  display: flex; justify-content: space-between; align-items: center; margin-top: 24px;
}
.net-salary-box .label { font-size: 12px; opacity: .7; text-transform: uppercase; letter-spacing: .12em; font-family: var(--mono); }
.net-salary-box .amount { font-size: 28px; font-weight: 600; font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* ══════════ Utility ══════════ */
.flex { display: flex; }
.flex-between { display: flex; justify-content: space-between; align-items: center; }
.gap-2 { gap: 8px; }
.gap-3 { gap: 12px; }
.mt-1 { margin-top: 8px; }  .mt-2 { margin-top: 16px; }  .mt-3 { margin-top: 24px; }
.mb-1 { margin-bottom: 8px; } .mb-2 { margin-bottom: 16px; } .mb-3 { margin-bottom: 24px; }
.text-muted { color: var(--gray-500); }
.text-sm { font-size: 12px; }
.text-right { text-align: right; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.section-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 22px; flex-wrap: wrap; gap: 12px; }
.section-header h2 { font-family: var(--display); }

/* ══════════════════════════════════════════════════════════════════
   SIGN-IN
   ══════════════════════════════════════════════════════════════════ */
body.auth { display: block; background: #fff; }
.auth-shell { display: grid; grid-template-columns: 1.08fr .92fr; min-height: 100vh; }

.auth-hero {
  position: relative; overflow: hidden;
  background: var(--rail-bg-deep);
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 44px 48px; color: #fff;
}
.auth-hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.auth-hero::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(180deg, rgba(16,24,37,.55) 0%, rgba(16,24,37,.8) 55%, rgba(16,24,37,.95) 100%),
    radial-gradient(120% 80% at 12% 12%, rgba(37,71,208,.4) 0%, transparent 62%);
}
/* Timecard tear-line, echoing the rail */
.auth-hero::before {
  content: ''; position: absolute; top: 0; bottom: 0; right: 0; width: 4px; z-index: 3;
  background: repeating-linear-gradient(to bottom, rgba(255,255,255,.22) 0 6px, transparent 6px 14px);
}
.auth-hero > * { position: relative; z-index: 2; }

.auth-brand { display: flex; align-items: center; gap: 11px; font-family: var(--display); font-size: 17px; font-weight: 700; letter-spacing: -.02em; }
.auth-brand i {
  width: 34px; height: 34px; border-radius: 10px;
  background: rgba(255,255,255,.13);
  display: flex; align-items: center; justify-content: center; font-size: 15px;
}
.auth-clock { margin: auto 0; }
.auth-eyebrow {
  font-family: var(--mono); font-size: 10.5px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .26em;
  color: rgba(255,255,255,.5); margin-bottom: 16px;
}
.auth-time {
  font-family: var(--mono);
  font-size: clamp(54px, 6.6vw, 84px);
  font-weight: 600; line-height: 1; letter-spacing: -.045em;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 2px 34px rgba(0,0,0,.45);
}
.auth-time .sec { color: rgba(255,255,255,.42); font-size: .48em; }
.auth-date { font-size: 14px; color: rgba(255,255,255,.7); margin-top: 14px; }
.auth-hero-foot {
  font-size: 12.5px; color: rgba(255,255,255,.48);
  border-top: 1px solid rgba(255,255,255,.12); padding-top: 18px;
  display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap;
}
.auth-hero-foot span:last-child { font-family: var(--mono); letter-spacing: .04em; }

.auth-panel { display: flex; align-items: center; justify-content: center; padding: 48px 40px; background: #fff; }
.auth-form { width: 100%; max-width: 380px; }
.auth-form h2 { font-family: var(--display); font-size: 25px; font-weight: 600; color: var(--gray-900); }
.auth-form .sub { font-size: 13.5px; color: var(--gray-500); margin-top: 6px; margin-bottom: 28px; }
.auth-mobile-brand { display: none; align-items: center; gap: 10px; font-family: var(--display); font-size: 16px; font-weight: 700; color: var(--gray-900); margin-bottom: 26px; }
.auth-mobile-brand i {
  width: 32px; height: 32px; border-radius: 9px;
  background: var(--primary-light); color: var(--primary);
  display: flex; align-items: center; justify-content: center; font-size: 14px;
}
.error-msg, .warning-msg {
  border-radius: var(--radius); padding: 11px 14px; font-size: 13px;
  margin-bottom: 18px; display: flex; align-items: flex-start; gap: 9px; line-height: 1.45;
}
.error-msg   { background: var(--danger-light);  color: var(--danger);  border: 1px solid #f3b6b0; }
.warning-msg { background: var(--warning-light); color: var(--warning); border: 1px solid #f0d49a; }
.pwd-wrap { position: relative; }
/* input and button MUST stay siblings — togglePwd() falls back to previousElementSibling */
.pwd-toggle {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  background: none; border: none; cursor: pointer;
  color: var(--gray-400); padding: 6px; border-radius: 6px; line-height: 1;
  transition: color .15s, background .15s;
}
.pwd-toggle:hover { color: var(--primary); background: var(--gray-100); }
.auth-submit { margin-top: 6px; padding: 11px 16px; font-size: 14px; }
.auth-foot { margin-top: 22px; text-align: center; font-size: 12px; color: var(--gray-400); }


/* ══════════════════════════════════════════════════════════════════
   MY ATTENDANCE — the clock card as a hero panel.
   Targeted via :has(.clock-status-bar) — present in every clock state
   (not clocked in, working, on break, clocked out).
   ══════════════════════════════════════════════════════════════════ */
.card:has(.clock-status-bar) {
  background: linear-gradient(158deg, #1b2740 0%, var(--rail-bg) 52%, #0e1622 100%);
  border-color: transparent;
  box-shadow: 0 14px 38px rgba(19,28,43,.22);
  overflow: hidden; position: relative;
  padding-bottom: 26px;
}
/* Faint sweep of light across the top-left */
.card:has(.clock-status-bar)::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 90% at 12% 0%, rgba(90,130,255,.22) 0%, transparent 58%);
}
.card:has(.clock-status-bar) > * { position: relative; z-index: 1; }

/* Header: let it wrap instead of squeezing the date into four lines */
.card:has(.clock-status-bar) .card-header {
  background: none; border-bottom: 1px solid rgba(255,255,255,.1);
  flex-wrap: wrap; gap: 10px; justify-content: center;
  margin-bottom: 20px; padding-bottom: 14px;
}
.card:has(.clock-status-bar) .card-title {
  color: rgba(255,255,255,.72);
  font-family: var(--mono); font-size: 10.5px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .18em;
}
.card:has(.clock-status-bar) .badge-blue {
  background: rgba(255,255,255,.12); color: #cfe0ff;
  border: 1px solid rgba(255,255,255,.14);
}

/* The time itself */
.card:has(.clock-status-bar) .clock-display {
  color: #fff;
  font-size: clamp(46px, 6vw, 68px);
  letter-spacing: -.04em;
  margin: 14px 0 6px;
  text-shadow: 0 4px 34px rgba(90,130,255,.34);
}
.card:has(.clock-status-bar) .clock-date {
  color: rgba(255,255,255,.5); font-size: 12.5px;
  letter-spacing: .04em; margin-bottom: 26px;
}

/* Status pill — carries the top of the card now the clock is gone */
.card:has(.clock-status-bar) .clock-status-bar {
  display: inline-flex; margin: 4px auto 20px;
  padding: 7px 16px; border-radius: 30px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.9);
}
.card:has(.clock-status-bar) .clock-status-bar .text-muted,
.card:has(.clock-status-bar) .clock-status-bar span { color: rgba(255,255,255,.82) !important; }

/* Actions read as the primary thing on the page */
.card:has(.clock-status-bar) .clock-actions .btn {
  padding: 12px 30px; font-size: 14.5px; border-radius: 10px;
  box-shadow: 0 6px 18px rgba(0,0,0,.28);
}
.card:has(.clock-status-bar) .btn-outline {
  background: rgba(255,255,255,.1); color: #fff;
  border-color: rgba(255,255,255,.2);
}
/* Inside the navy card a navy button would vanish — lighten it there */
.card:has(.clock-status-bar) .btn-primary {
  background: rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.22);
}
.card:has(.clock-status-bar) .btn-primary:hover {
  background: rgba(255,255,255,.22);
}
.card:has(.clock-status-bar) .btn-outline:hover {
  background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.3);
}

/* Any loose text inside the dark card stays legible */
.card:has(.clock-status-bar) > div[style*="color:var(--gray-500)"],
.card:has(.clock-status-bar) > div[style*="color:var(--gray-400)"] { color: rgba(255,255,255,.6) !important; }

/* Elapsed / session figures */
.card:has(.clock-status-bar) #elapsed-timer { color: #fff !important; }

/* Break list on the dark surface */
.card:has(.clock-status-bar) .break-item {
  background: rgba(255,255,255,.07);
  color: rgba(255,255,255,.85);
  border: 1px solid rgba(255,255,255,.09);
}
.card:has(.clock-status-bar) .break-item .break-time { color: rgba(255,255,255,.55); }

/* Timeline, when it sits inside the hero */
.card:has(.clock-status-bar) .timeline::before { background: rgba(255,255,255,.16); }
.card:has(.clock-status-bar) .timeline-label { color: #fff; }
.card:has(.clock-status-bar) .timeline-sub,
.card:has(.clock-status-bar) .timeline-time { color: rgba(255,255,255,.55); }
.card:has(.clock-status-bar) .timeline-dot { border-color: #1b2740; }

/* Attendance log + stat grid breathing room */
.att-stats-grid { gap: 14px; }
.att-log-table-wrap { border-radius: var(--radius); }

@media print {
  .card:has(.clock-status-bar) { background: #fff !important; box-shadow: none !important; }
  .card:has(.clock-status-bar) .clock-display,
  .card:has(.clock-status-bar) .card-title { color: #000 !important; text-shadow: none !important; }
}


/* ── My Attendance: monthly summary tiles ──
   Reached by attribute selector because the markup is inline-styled;
   !important is required to beat the inline background. */
.my-att-layout div[style*="repeat(3,1fr)"] > div[style*="text-align:center"] {
  position: relative; overflow: hidden;
  background: #fff !important;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg) !important;
  padding: 16px 12px 14px !important;
  transition: border-color .18s, transform .18s;
}
.my-att-layout div[style*="repeat(3,1fr)"] > div[style*="text-align:center"]:hover {
  transform: translateY(-2px); border-color: var(--gray-300);
}
/* Accent bar sits on top, tinted per tile */
.my-att-layout div[style*="repeat(3,1fr)"] > div[style*="text-align:center"]::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px;
}
.my-att-layout div[style*="repeat(3,1fr)"] > div:nth-child(1)::before { background: var(--success); }
.my-att-layout div[style*="repeat(3,1fr)"] > div:nth-child(2)::before { background: var(--primary); }
.my-att-layout div[style*="repeat(3,1fr)"] > div:nth-child(3)::before { background: var(--warning); }
.my-att-layout div[style*="repeat(3,1fr)"] > div:nth-child(1) { background: linear-gradient(180deg,#f2fbf7 0%,#fff 62%) !important; }
.my-att-layout div[style*="repeat(3,1fr)"] > div:nth-child(2) { background: linear-gradient(180deg,#f2f5fd 0%,#fff 62%) !important; }
.my-att-layout div[style*="repeat(3,1fr)"] > div:nth-child(3) { background: linear-gradient(180deg,#fdf8ee 0%,#fff 62%) !important; }

/* Figures in mono, tabular, tighter */
.my-att-layout div[style*="repeat(3,1fr)"] > div > div:first-child {
  font-family: var(--mono) !important;
  font-size: 30px !important; font-weight: 600 !important;
  letter-spacing: -.035em; font-variant-numeric: tabular-nums;
  line-height: 1;
}
.my-att-layout div[style*="repeat(3,1fr)"] > div > .text-muted {
  font-size: 10.5px !important; text-transform: uppercase;
  letter-spacing: .1em; font-weight: 500; margin-top: 7px;
}

/* ── Attendance log table ── */
.att-log-table-wrap {
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  overflow: auto; max-height: 560px;
}
.att-log-table thead th {
  position: sticky; top: 0; z-index: 2;
  box-shadow: inset 0 -1px 0 var(--gray-200);
}
.att-log-table tbody td { border-bottom: 1px solid var(--gray-100); }
.att-log-table tbody tr:hover td { background: var(--primary-light); }
/* Dates and durations line up column-wise */
.att-log-table tbody td:nth-child(1),
.att-log-table tbody td:nth-child(2),
.att-log-table tbody td:nth-child(3),
.att-log-table tbody td:nth-child(5) {
  font-family: var(--mono); font-size: 12.5px; font-variant-numeric: tabular-nums;
}
.att-log-table tbody td:nth-child(1) { font-weight: 500; color: var(--gray-900); }

/* Log card header sits flush with the table */
.my-att-layout .card > .card-title { font-size: 15px; }


/* ── Break / today's log rows ──
   The markup carries inline `padding:8px 0` and `border-bottom`,
   so these need !important to take effect. */
.break-item {
  gap: 12px; align-items: center; flex-wrap: nowrap;
  padding: 10px 14px !important;
  border-bottom: none !important;
  margin-bottom: 6px;
  border-radius: var(--radius);
}
.break-item:last-child { margin-bottom: 0; }
/* Label + time share a row and never break apart */
.break-item > div:first-child {
  display: flex; align-items: center; gap: 7px;
  min-width: 0; flex: 1; flex-wrap: nowrap;
}
.break-item > div:first-child > span { white-space: nowrap; }
/* The label is what truncates if space runs out — times stay whole */
.break-item > div:first-child > span:first-child {
  overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.break-item > div:first-child > span:last-child { flex-shrink: 0; }
/* Duration badge holds its size */
.break-item > .badge { flex-shrink: 0; margin-left: auto; }

/* Times in mono so 13:02 → 14:38 aligns row to row */
.break-item .break-time,
.break-item > div:first-child > span:last-child {
  font-family: var(--mono); font-size: 12px;
  font-variant-numeric: tabular-nums; letter-spacing: -.01em;
}

/* Lift the dim text on the dark hero card to a readable level */
.card:has(.clock-status-bar) .break-item > div:first-child > span:last-child {
  color: rgba(255,255,255,.62) !important;
}
.card:has(.clock-status-bar) .break-item > div:first-child > span:first-child {
  color: rgba(255,255,255,.95);
}
.card:has(.clock-status-bar) .break-item em { color: rgba(255,255,255,.5); font-style: normal; }

@media (max-width: 480px) {
  .break-item > div:first-child > span:last-child { font-size: 11.5px; }
  .break-item { padding: 8px 10px; }
}


/* ── Dashboard welcome bar: match the My Attendance hero ──
   Targeted by its inline gradient; !important beats the inline style. */
div[style*="linear-gradient(135deg,#1a56db,#1e40af)"] {
  background: linear-gradient(158deg, #1b2740 0%, var(--rail-bg) 52%, #0e1622 100%) !important;
  box-shadow: 0 14px 38px rgba(19,28,43,.22);
  position: relative; overflow: hidden;
  padding: 26px 28px !important;
}
/* Same sweep of light across the top-left */
div[style*="linear-gradient(135deg,#1a56db,#1e40af)"]::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 90% at 12% 0%, rgba(90,130,255,.22) 0%, transparent 58%);
}
div[style*="linear-gradient(135deg,#1a56db,#1e40af)"] > div { position: relative; z-index: 1; }

/* "Welcome back" eyebrow in mono, like the sign-in screen */
div[style*="linear-gradient(135deg,#1a56db,#1e40af)"] > div:first-child > div:first-child {
  font-family: var(--mono); letter-spacing: .18em !important;
  opacity: .55 !important; font-weight: 500;
}
/* The clock gets the same halo as the attendance hero */
div[style*="linear-gradient(135deg,#1a56db,#1e40af)"] #live-clock {
  letter-spacing: -.03em; font-variant-numeric: tabular-nums;
  text-shadow: 0 4px 30px rgba(90,130,255,.4);
}
/* Status pill picks up a hairline so it reads on the darker surface */
div[style*="linear-gradient(135deg,#1a56db,#1e40af)"] span[style*="border-radius:20px"],
div[style*="linear-gradient(135deg,#1a56db,#1e40af)"] a[style*="border-radius:20px"] {
  background: rgba(255,255,255,.1) !important;
  border: 1px solid rgba(255,255,255,.14);
}

@media print {
  div[style*="linear-gradient(135deg,#1a56db,#1e40af)"] {
    background: #fff !important; color: #000 !important; box-shadow: none !important;
  }
}



/* With the wall clock removed, the elapsed timer is the headline figure */
.card:has(.clock-status-bar) #elapsed-timer {
  font-size: 40px !important;
  letter-spacing: -.035em;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 4px 30px rgba(90,130,255,.3);
  margin-bottom: 2px !important;
}
.card:has(.clock-status-bar) .clock-actions { margin-top: 20px; }


/* Clocked-out summary panel.
   The markup sets background:var(--gray-50) inline, which renders as a
   near-white slab on the navy card. Make it translucent and lift the
   text instead — the inline colours all need !important. */
.card:has(.clock-status-bar) div[style*="var(--gray-50)"][style*="border-radius"] {
  background: rgba(255,255,255,.07) !important;
  border: 1px solid rgba(255,255,255,.1);
}
/* Small uppercase labels (First In / Last Out) */
.card:has(.clock-status-bar) div[style*="var(--gray-50)"] div[style*="var(--gray-400)"] {
  color: rgba(255,255,255,.5) !important;
}
/* The times themselves */
.card:has(.clock-status-bar) div[style*="var(--gray-50)"] div[style*="font-weight:700"] {
  color: #fff !important;
}
/* Session count line */
.card:has(.clock-status-bar) div[style*="var(--gray-50)"] div[style*="var(--gray-500)"] {
  color: rgba(255,255,255,.6) !important;
}
/* Net worked figure — keep it the accent, but legible on navy */
.card:has(.clock-status-bar) div[style*="var(--gray-50)"] div[style*="var(--primary)"] {
  color: #8fb0ff !important;
}

/* ══════════ My Attendance — mini calendar ══════════ */
.cal-legend { display: flex; flex-wrap: wrap; gap: 12px; font-size: 11px; color: var(--gray-500); }
.cal-legend span { display: inline-flex; align-items: center; gap: 5px; }
.cal-legend .lg { width: 9px; height: 9px; border-radius: 3px; display: inline-block; }
.lg-present { background: var(--success); }
.lg-tardy   { background: var(--warning); }
.lg-le      { background: #b45cc9; }
.lg-absent  { background: var(--danger); }
.lg-leave   { background: var(--primary); }
.lg-off     { background: var(--gray-300); }

.mini-cal-head {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px;
  margin-bottom: 6px;
}
.mini-cal-head > div {
  font-family: var(--mono); font-size: 9.5px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .12em;
  color: var(--gray-400); text-align: center; padding-bottom: 2px;
}
.mini-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }

.mc-cell {
  min-height: 68px; border-radius: 9px;
  border: 1px solid var(--gray-200); background: #fff;
  padding: 7px 8px; display: flex; flex-direction: column; gap: 2px;
  text-decoration: none; position: relative;
  transition: transform .13s, box-shadow .13s, border-color .13s;
}
a.mc-cell:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--gray-400);
}
.mc-blank { border: none; background: none; min-height: 0; }
.mc-day {
  font-family: var(--mono); font-size: 12px; font-weight: 600;
  color: var(--gray-700); font-variant-numeric: tabular-nums;
}
.mc-label { font-size: 10px; font-weight: 500; line-height: 1.25; }
.mc-hrs {
  font-family: var(--mono); font-size: 10px; color: var(--gray-500);
  margin-top: auto; font-variant-numeric: tabular-nums;
}

/* Status colours — left edge carries the signal, fill stays light */
.mc-cell::before {
  content: ''; position: absolute; left: 0; top: 8px; bottom: 8px;
  width: 3px; border-radius: 0 3px 3px 0; background: transparent;
}
.mc-present { background: #f2fbf7; border-color: #cdeadd; }
.mc-present::before { background: var(--success); }
.mc-present .mc-label { color: var(--success); }

.mc-tardy { background: #fdf8ee; border-color: #f0dfbd; }
.mc-tardy::before { background: var(--warning); }
.mc-tardy .mc-label { color: var(--warning); }

.mc-le { background: #faf3fc; border-color: #e7d2ee; }
.mc-le::before { background: #b45cc9; }
.mc-le .mc-label { color: #8e3ba3; }

.mc-absent { background: #fdf1f0; border-color: #f2c9c5; }
.mc-absent::before { background: var(--danger); }
.mc-absent .mc-label { color: var(--danger); }

.mc-leave { background: var(--primary-light); border-color: #ccd7f3; }
.mc-leave::before { background: var(--primary); }
.mc-leave .mc-label { color: var(--primary); }

.mc-half { background: #fdf8ee; border-color: #f0dfbd; }
.mc-half::before { background: var(--warning); }
.mc-half .mc-label { color: var(--warning); }

.mc-off { background: var(--gray-50); border-color: var(--gray-200); }
.mc-off .mc-day, .mc-off .mc-label { color: var(--gray-400); }

.mc-norec .mc-label { color: var(--gray-300); }
.mc-prejoin { background: var(--gray-50); border-style: dashed; border-color: var(--gray-200); }
.mc-prejoin .mc-day { color: var(--gray-300); }
.mc-future { background: repeating-linear-gradient(45deg,#fbfcfe 0 6px,#f6f8fb 6px 12px); border-style: dashed; }
.mc-future .mc-day { color: var(--gray-300); }

.mc-today { box-shadow: 0 0 0 2px var(--primary); }
.mc-today .mc-day { color: var(--primary); }

.cal-foot { margin-top: 14px; text-align: center; }

/* Landed-on day, highlighted after a deep link */
.cal-cell-linked { box-shadow: 0 0 0 3px var(--primary); border-radius: 8px; }

@media (max-width: 900px) {
  .mc-cell { min-height: 56px; padding: 5px 6px; }
  .mc-label { font-size: 9px; }
  .mc-hrs { display: none; }
  .cal-legend { gap: 8px; font-size: 10px; }
}
@media (max-width: 560px) {
  .mini-cal-grid, .mini-cal-head { gap: 3px; }
  .mc-cell { min-height: 46px; }
  .mc-label { display: none; }
}


/* Tax certificate banner — page-local .cert-top, needs !important */
.cert-top {
  background: linear-gradient(158deg, #1b2740 0%, var(--rail-bg) 52%, #0e1622 100%) !important;
  color: #fff !important;
}


/* Payroll grid — month facts strip */
.month-facts {
  display: flex; flex-wrap: wrap; gap: 18px;
  padding: 10px 14px; margin-bottom: 12px;
  background: var(--gray-50); border: 1px solid var(--gray-200);
  border-radius: var(--radius); font-size: 12px; color: var(--gray-600);
}
.month-facts strong {
  font-family: var(--mono); color: var(--gray-900);
  font-variant-numeric: tabular-nums; margin-right: 3px;
}
.month-facts-list { color: var(--gray-400); margin-left: 6px; font-size: 11.5px; }


/* ══════════════════════════════════════════════════════════════════
   MOBILE
   The module pages set grid columns and widths as inline styles, which
   beat any stylesheet rule — hence !important throughout. Nothing here
   touches markup, so no PHP changes are involved.
   ══════════════════════════════════════════════════════════════════ */

/* Any table can scroll sideways rather than forcing the page wide */
.table-wrap, .att-log-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

@media (max-width: 900px) {
  /* Fixed two-column page layouts collapse to one */
  [style*="grid-template-columns:340px 1fr"],
  [style*="grid-template-columns:300px 1fr"],
  [style*="grid-template-columns:260px 1fr"],
  [style*="grid-template-columns:220px 1fr"],
  [style*="grid-template-columns:120px 1fr"],
  [style*="grid-template-columns: 340px 1fr"],
  [style*="grid-template-columns: 300px 1fr"],
  [style*="grid-template-columns: 260px 1fr"],
  [style*="grid-template-columns: 220px 1fr"] {
    grid-template-columns: 1fr !important;
  }
  /* Sticky side panels shouldn't stick once stacked */
  [style*="position:sticky"] { position: static !important; }

  /* Four- and six-across stat rows become two */
  [style*="grid-template-columns:repeat(4,1fr)"],
  [style*="grid-template-columns:repeat(6,1fr)"],
  [style*="grid-template-columns: repeat(4,1fr)"],
  .stats-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

@media (max-width: 680px) {
  /* Everything multi-column goes single */
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns:1fr 1fr 1fr"],
  [style*="grid-template-columns:repeat(3,1fr)"],
  [style*="grid-template-columns: repeat(3,1fr)"],
  [style*="grid-template-columns:repeat(4,1fr)"],
  [style*="grid-template-columns:repeat(6,1fr)"],
  .stats-grid, .grid-2, .form-grid-2, .form-grid-3 {
    grid-template-columns: 1fr !important;
  }
  /* auto-fill grids with a wide minimum would still overflow */
  [style*="minmax(340px"], [style*="minmax(300px"],
  [style*="minmax(280px"], [style*="minmax(260px"],
  [style*="minmax(220px"], [style*="minmax(200px"] {
    grid-template-columns: 1fr !important;
  }

  /* Wide fixed elements */
  [style*="min-width:900px"] { min-width: 0 !important; }
  [style*="max-width:900px"], [style*="max-width:680px"] { max-width: 100% !important; }

  /* Section headers stack instead of squeezing */
  .section-header { flex-direction: column; align-items: stretch; }
  .section-header > div:last-child,
  .section-header form { width: 100%; }

  /* Filter tab rows scroll rather than wrap into a block */
  .section-header > div[style*="display:flex"] {
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    padding-bottom: 4px; flex-wrap: nowrap !important;
  }

  /* Card and modal padding tightens */
  .card { padding: 16px !important; }
  .modal-body, .modal-header, .modal-footer { padding-left: 16px; padding-right: 16px; }
  .modal-footer { flex-direction: column-reverse; }
  .modal-footer .btn { width: 100%; justify-content: center; }

  /* Tables: let long text wrap instead of forcing width */
  .table th, .table td { padding: 9px 10px; }
  .table td[style*="max-width"] { max-width: none !important; }

  /* Inline selects sized in px */
  .form-select[style*="width:auto"] { width: 100% !important; }

  /* The clock card */
  .card:has(.clock-status-bar) .clock-actions { flex-direction: column; }
  .card:has(.clock-status-bar) .clock-actions .btn { width: 100%; justify-content: center; }

  /* Payslip meta and month box */
  .ps-meta { grid-template-columns: 1fr !important; gap: 12px; }
  .ps-month-box { grid-template-columns: 1fr !important; }
  .ps-month-item + .ps-month-item { border-left: none; border-top: 1px solid var(--gray-200); }

  /* Month facts strip on payroll */
  .month-facts { flex-direction: column; gap: 6px; }
  .month-facts-list { display: block; margin-left: 0; }
}

@media (max-width: 480px) {
  .content { padding: 12px; }
  .page-title { font-size: 15px; }
  .topbar-clock { padding: 5px 9px; font-size: 12px; }
  .btn { padding: 8px 12px; }
  .btn-sm, .btn-xs { padding: 5px 9px; }
  /* Action button clusters wrap */
  td > div[style*="display:flex"] { flex-wrap: wrap; gap: 4px; }
}

/* Tap targets stay reachable on touch devices */
@media (hover: none) {
  .btn, .nav-link, .nav-group-toggle { min-height: 38px; }
  .btn-xs { min-height: 30px; }
}


/* ── Mobile drawer backdrop ── */
.sidebar-backdrop {
  position: fixed; inset: 0; z-index: 99;
  background: rgba(14,22,34,.45);
  opacity: 0; visibility: hidden;
  transition: opacity .2s, visibility .2s;
}
.sidebar-backdrop.show { opacity: 1; visibility: visible; }
@media (min-width: 769px) { .sidebar-backdrop { display: none; } }

@media (max-width: 680px) {
  /* my_attendance sets min-width:480px on its table, which forces the
     whole calendar wider than the screen. */
  .att-log-table { min-width: 0 !important; }
  .att-log-table-wrap { overflow-x: visible !important; }

  /* Mini calendar: 7 columns still fit if the cells shrink */
  .mini-cal-grid, .mini-cal-head { gap: 2px !important; }
  .mc-cell { min-height: 40px !important; padding: 4px 2px !important; border-radius: 6px; }
  .mc-day { font-size: 10.5px !important; }
  .mc-cell::before { top: 4px; bottom: 4px; width: 2px; }
  .cal-legend { gap: 7px !important; font-size: 9.5px !important; }
  .cal-legend .lg { width: 7px; height: 7px; }

  /* Dashboard: the three-across row and the two-column card rows */
  .grid-2 { grid-template-columns: 1fr !important; gap: 14px !important; }

  /* Welcome banner stacks so the clock isn't squeezed off */
  [style*="linear-gradient(158deg,#1b2740"] > div {
    display: block !important; text-align: left !important;
  }
  [style*="linear-gradient(158deg,#1b2740"] > div > div:last-child {
    text-align: left !important; margin-top: 14px;
    padding-top: 12px; border-top: 1px solid rgba(255,255,255,.12);
  }

  /* Recent-activity lists inside dashboard cards */
  .card [style*="justify-content:space-between"][style*="display:flex"] {
    flex-wrap: wrap; gap: 4px;
  }
}

@media (max-width: 420px) {
  .mc-cell { min-height: 34px !important; }
  .mc-hrs, .mc-label { display: none !important; }
}


/* ── Dashboard tables become stacked rows on phones ──
   A 5-column table cannot fit 360px. Rather than scroll, each row
   becomes a small block with the column name as a label. Uses the
   existing markup — labels come from data-label where present, and
   from nth-child fallbacks where not. */
@media (max-width: 680px) {
  /* Only tables whose cells carry data-label are stacked. Calendars and
     any table without labels keep their normal layout and scroll. */
  .card .table:has(td[data-label]) { display: block; width: 100%; }
  .card .table:has(td[data-label]) thead { display: none; }
  .card .table:has(td[data-label]) tbody,
  .card .table:has(td[data-label]) tr,
  .card .table:has(td[data-label]) td { display: block; width: 100%; }
  .card .table:has(td[data-label]) tr {
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    padding: 10px 12px;
    margin-bottom: 8px;
    background: #fff;
  }
  .card .table:has(td[data-label]) tr:last-child { margin-bottom: 0; }
  .card .table:has(td[data-label]) td {
    border: none !important;
    padding: 3px 0 !important;
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; text-align: right;
  }
  .card .table:has(td[data-label]) td::before {
    content: attr(data-label);
    font-family: var(--mono); font-size: 9.5px;
    text-transform: uppercase; letter-spacing: .1em;
    color: var(--gray-400); text-align: left; flex-shrink: 0;
  }
  /* First cell reads as the row heading */
  .card .table:has(td[data-label]) td:first-child {
    font-weight: 600; color: var(--gray-900);
    font-size: 14px; justify-content: flex-start;
    padding-bottom: 6px !important; margin-bottom: 4px;
    border-bottom: 1px solid var(--gray-100) !important;
    text-align: left;
  }
  .card .table:has(td[data-label]) td:first-child::before { display: none; }
  .card .table:has(td[data-label]) tbody tr:hover td { background: transparent; }
  /* Empty-state rows stay centred */
  .card .table:has(td[data-label]) td[colspan] { display: block; text-align: center; }
  .card .table:has(td[data-label]) td[colspan]::before { display: none; }

  /* Calendar tables are never stacked */
  .card .table:not(:has(td[data-label])) { display: table; }
  .cal-grid, .cal-table, table.cal { display: table !important; }
  .cal-grid td, .cal-table td { display: table-cell !important; }
}


/* Nothing may exceed the viewport on small screens */
@media (max-width: 768px) {
  html, body { max-width: 100%; overflow-x: hidden; }
  .content { max-width: 100%; }
  .content > *, .card, .table-wrap { max-width: 100%; }
  .card table, .table-wrap table { max-width: none; }
  img, video, canvas, svg { max-width: 100%; height: auto; }
}

/* ══════════ Print ══════════ */
@media print {
  .sidebar, .topbar, .no-print { display: none !important; }
  .main-wrapper, .main-wrapper.expanded { margin-left: 0; }
  .content { padding: 0; }
  body { background: #fff !important; background-image: none !important; display: block; }
  .table th { background: #f3f3f3 !important; color: #333 !important; }
  * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
}
.payslip-header { background: #1e3a8a !important; color: #fff !important; }

/* ══════════ Responsive ══════════ */
@media (max-width: 1024px) {
  .auth-shell { grid-template-columns: 1fr; }
  .auth-hero { display: none; }
  .auth-mobile-brand { display: flex; }
  .auth-panel { padding: 40px 24px; min-height: 100vh; align-items: flex-start; padding-top: 12vh; }
}

@media (max-width: 768px) {
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .form-grid-2, .form-grid-3 { grid-template-columns: 1fr; }
  .grid-2 { grid-template-columns: 1fr; }
  .content { padding: 16px; }
  .topbar { padding: 0 16px; }
  .user-info, .topbar-clock-date { display: none; }

  /* Drawer. app.js only toggles .collapsed, so here .collapsed = open.

     body is display:flex, so even a position:fixed sidebar can still
     reserve width as a flex item and squeeze the page. Take it out of
     the flow explicitly and let the wrapper own the full viewport. */
  body { display: block; }
  .main-wrapper {
    margin-left: 0 !important;
    width: 100%; max-width: 100vw;
  }
  .sidebar {
    left: 0; top: 0; bottom: 0;
    border-radius: 0; border-left: none;
    width: min(var(--sidebar-width), 82vw);
    max-width: 320px;
    transform: translateX(-100%);
    box-shadow: var(--shadow-lg);
    flex: none;
  }
  .sidebar.collapsed {
    width: min(var(--sidebar-width), 82vw);
    transform: translateX(0);
  }
  .sidebar.collapsed .brand-text, .sidebar.collapsed .brand-role,
  .sidebar.collapsed .nav-group-label, .sidebar.collapsed .nav-caret,
  .sidebar.collapsed .panel-clock-date { display: block; }
  .sidebar.collapsed .panel-head, .sidebar.collapsed .sidebar-brand { justify-content: flex-start; padding: 18px 18px 16px; }
  .sidebar.collapsed .nav-group.active .nav-group-items { display: block !important; }
  .sidebar.collapsed .nav-group-toggle { justify-content: flex-start; padding: 9px 11px; gap: 11px; }
  .sidebar.collapsed .nav-group-toggle::after { display: none; }
  .sidebar.collapsed .panel-foot { justify-content: flex-start; padding: 13px 18px; }
  .main-wrapper, .main-wrapper.expanded { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* ══════════════════════════════════════════════════════════════════
   MOBILE DRAWER — mirrored off html.is-mobile
   app.js sets this class from matchMedia. Duplicating the rules here
   means the drawer works even if the media query is evaluated against
   an unexpected viewport width.
   ══════════════════════════════════════════════════════════════════ */

/* Close button lives in the drawer header; hidden on desktop. */
.drawer-close { display: none; }

html.is-mobile body { display: block; }

html.is-mobile .main-wrapper,
html.is-mobile .main-wrapper.expanded {
  margin-left: 0 !important;
  width: 100%;
  max-width: 100vw;
}

html.is-mobile .sidebar {
  position: fixed;
  left: 0; top: 0; bottom: 0;
  border-radius: 0; border-left: none;
  width: min(300px, 84vw);
  transform: translateX(-100%);
  box-shadow: var(--shadow-lg);
  flex: none;
  z-index: 200;
}
html.is-mobile .sidebar.collapsed { transform: translateX(0); }

/* Expanded content must show inside the drawer, not the icon rail */
html.is-mobile .sidebar .brand-text,
html.is-mobile .sidebar .brand-role,
html.is-mobile .sidebar .nav-group-label,
html.is-mobile .sidebar .nav-caret { display: block; }
html.is-mobile .sidebar .panel-head { justify-content: flex-start; padding: 16px 16px 14px; }
html.is-mobile .sidebar .nav-group-toggle { justify-content: flex-start; padding: 10px 11px; gap: 11px; }
html.is-mobile .sidebar .nav-group-toggle::after { display: none; }
html.is-mobile .sidebar .nav-group.active .nav-group-items { display: block; }
html.is-mobile .sidebar .panel-foot { justify-content: flex-start; padding: 13px 16px; }

/* The close button — pinned to the very top-right of the drawer, clear of
   the company name. Declared under both the class and a media query so it
   lands regardless of which one the browser honours. */
html.is-mobile .panel-head { position: relative; padding-right: 56px; }
html.is-mobile .drawer-close,
html.is-mobile #drawer-close {
  display: flex !important;
  align-items: center; justify-content: center;
  position: absolute !important; top: 8px; right: 8px;
  width: 36px; height: 36px; border-radius: 10px;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.14);
  color: #fff; font-size: 17px; line-height: 1;
  cursor: pointer; padding: 0; margin: 0; z-index: 10;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
html.is-mobile .drawer-close:active { background: rgba(255,255,255,.28); }
html.is-mobile .drawer-close i { pointer-events: none; }

@media (max-width: 768px) {
  .panel-head { position: relative; padding-right: 56px; }
  #drawer-close {
    display: flex !important;
    align-items: center; justify-content: center;
    position: absolute !important; top: 8px; right: 8px;
    width: 36px; height: 36px; border-radius: 10px;
    border: 1px solid rgba(255,255,255,.22);
    background: rgba(255,255,255,.14);
    color: #fff; font-size: 17px; padding: 0; margin: 0; z-index: 10;
    touch-action: manipulation;
  }
}

/* Backdrop */
.sidebar-backdrop {
  position: fixed; inset: 0; z-index: 150;
  background: rgba(14,22,34,.5);
  opacity: 0; visibility: hidden;
  transition: opacity .2s, visibility .2s;
}
.sidebar-backdrop.show { opacity: 1; visibility: visible; }
html:not(.is-mobile) .sidebar-backdrop { display: none; }

/* Nothing may exceed the viewport */
html.is-mobile, html.is-mobile body { max-width: 100%; overflow-x: clip; }
html.is-mobile .content { padding: 14px; max-width: 100%; }
html.is-mobile .topbar { padding: 0 14px; }
html.is-mobile .user-info,
html.is-mobile .topbar-clock-date { display: none; }


/* ══════════════════════════════════════════════════════════════════
   MOBILE — page content
   Keyed to html.is-mobile (set by JS) rather than a media query, since
   the media queries have proven unreliable on this deployment.
   ══════════════════════════════════════════════════════════════════ */

/* ── Tables ──────────────────────────────────────────────────────
   Many pages render a .table with no .table-wrap around it, so the
   table itself becomes the scroll container. Tables that were turned
   into stacked cards (they carry data-label cells) are excluded. */
html.is-mobile .table-wrap,
html.is-mobile .att-log-table-wrap,
html.is-mobile .card[style*="overflow-x:auto"] {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

/* The table stays a single table so its columns stay aligned; the
   surrounding box does the scrolling. Making the table display:block
   and thead/tbody display:table splits them into two tables that size
   their columns independently — which is what pulled headers out of
   line with their rows. */
html.is-mobile table.table:not(:has(td[data-label])) {
  white-space: nowrap;
  width: auto;
  min-width: 100%;
}
/* Long free-text cells may wrap; everything else stays on one line */
html.is-mobile .table td[style*="max-width"],
html.is-mobile .table td.wrap { white-space: normal; }

/* A scrollable region should look scrollable */
html.is-mobile .table-wrap::-webkit-scrollbar,
html.is-mobile table.table::-webkit-scrollbar { height: 5px; }
html.is-mobile .table-wrap::-webkit-scrollbar-thumb,
html.is-mobile table.table::-webkit-scrollbar-thumb {
  background: var(--gray-300); border-radius: 3px;
}

/* ── Cards that clip their own content ── */
html.is-mobile .card[style*="overflow:hidden"] { overflow: hidden auto !important; }
html.is-mobile .card { max-width: 100%; }

/* ── Button clusters ──────────────────────────────────────────────
   Action buttons inside table cells and card headers are laid out with
   inline flex and no wrapping, so they push the row wide. */
html.is-mobile td > div[style*="display:flex"],
html.is-mobile td > form,
html.is-mobile .card-header > div[style*="display:flex"] {
  flex-wrap: wrap !important;
  gap: 5px !important;
}
html.is-mobile td .btn-xs,
html.is-mobile td .btn-sm { white-space: nowrap; }

/* Card headers stack when the title and its controls won't fit */
html.is-mobile .card-header {
  flex-wrap: wrap; gap: 10px;
  align-items: flex-start;
}
html.is-mobile .card-header > div:last-child:not(.card-title) { width: 100%; }

/* ── Toolbars and filter rows ── */
html.is-mobile .section-header {
  flex-direction: column; align-items: stretch; gap: 10px;
}
html.is-mobile .section-header > div,
html.is-mobile .section-header > form { width: 100%; }
/* Filter pills scroll rather than stacking into a tall block.
   Scoped with :has() to rows of SMALL buttons only — full-size action
   toolbars (Export CSV / Mark All Paid / Generate Payroll) must wrap
   instead, or their long labels overlap. */
html.is-mobile .section-header > div[style*="display:flex"]:has(> .btn-sm),
html.is-mobile div[style*="display:flex"]:has(> a.btn-sm),
html.is-mobile div[style*="display:flex"]:has(> .btn-sm) {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  flex-wrap: nowrap !important; padding-bottom: 4px;
}
html.is-mobile div[style*="display:flex"]:has(> .btn-sm) > .btn { flex-shrink: 0; }

/* Month / period selector forms */
html.is-mobile form[style*="display:flex"] { flex-wrap: wrap !important; gap: 8px !important; }
html.is-mobile form[style*="display:flex"] .form-select,
html.is-mobile form[style*="display:flex"] .form-control {
  width: auto !important; flex: 1 1 120px; min-width: 0;
}
html.is-mobile .form-select[style*="width:auto"] { width: 100% !important; }

/* ── Grids ──
   Targeted patterns only. A blanket rule on [style*="grid-template-columns"]
   caught the calendars and stacked them into a single column, so each
   layout pattern is now named explicitly. */
html.is-mobile [style*="grid-template-columns:1fr 1fr"],
html.is-mobile [style*="grid-template-columns: 1fr 1fr"],
html.is-mobile [style*="grid-template-columns:repeat(2"],
html.is-mobile [style*="grid-template-columns:repeat(3"],
html.is-mobile [style*="grid-template-columns: repeat(3"],
html.is-mobile [style*="grid-template-columns:340px"],
html.is-mobile [style*="grid-template-columns:300px"],
html.is-mobile [style*="grid-template-columns:260px"],
html.is-mobile [style*="grid-template-columns:220px"],
html.is-mobile [style*="grid-template-columns:120px"],
html.is-mobile [style*="minmax(340px"],
html.is-mobile [style*="minmax(300px"],
html.is-mobile [style*="minmax(280px"],
html.is-mobile [style*="minmax(260px"],
html.is-mobile [style*="minmax(220px"],
html.is-mobile .grid-2,
html.is-mobile .form-grid-2,
html.is-mobile .form-grid-3 {
  grid-template-columns: 1fr !important;
}
/* Stat rows stay two-across so figures remain scannable */
html.is-mobile .stats-grid,
html.is-mobile [style*="repeat(4,1fr)"],
html.is-mobile [style*="repeat(4, 1fr)"],
html.is-mobile [style*="repeat(6,1fr)"] {
  grid-template-columns: repeat(2, 1fr) !important;
}

/* Calendars keep seven columns, always. */
html.is-mobile .cal-grid,
html.is-mobile .mini-cal-grid,
html.is-mobile .mini-cal-head {
  display: grid !important;
  grid-template-columns: repeat(7, 1fr) !important;
  gap: 2px !important;
}
html.is-mobile .cal-cell {
  min-height: 46px !important; padding: 3px !important;
  font-size: 11px; overflow: hidden;
}
html.is-mobile .cal-cell .cal-badge { font-size: 8px; padding: 1px 2px; }
/* Action buttons stay — hiding them removed working function.
   They shrink instead. */
html.is-mobile .cal-actions {
  display: flex !important; flex-wrap: wrap; gap: 2px;
  justify-content: center; margin-top: 2px;
}
html.is-mobile .cal-actions button,
html.is-mobile .cal-actions .btn {
  padding: 2px 4px !important; font-size: 9px !important;
  min-height: 0 !important; line-height: 1.3; border-radius: 4px;
}
html.is-mobile .cal-actions button span,
html.is-mobile .cal-actions .btn span { display: none; }
html.is-mobile .cal-cell { min-height: 62px !important; }

/* Sticky side panels shouldn't stick once stacked */
html.is-mobile [style*="position:sticky"] { position: static !important; }

/* ── Wide fixed widths ── */
html.is-mobile [style*="min-width:900px"],
html.is-mobile [style*="min-width:800px"],
html.is-mobile [style*="min-width:700px"],
html.is-mobile [style*="min-width:600px"] { min-width: 0 !important; }
html.is-mobile [style*="width:340px"],
html.is-mobile [style*="width:300px"],
html.is-mobile [style*="width:260px"] { width: 100% !important; }

/* ── Modals ── */
html.is-mobile .modal-overlay { padding: 10px; align-items: flex-start; padding-top: 6vh; }
html.is-mobile .modal { max-width: 100% !important; max-height: 88vh; }
html.is-mobile .modal-footer { flex-direction: column-reverse; gap: 8px; }
html.is-mobile .modal-footer .btn { width: 100%; justify-content: center; }

/* ── Payslip ── */
html.is-mobile .payslip-wrap { max-width: 100%; }
html.is-mobile .ps-meta { grid-template-columns: 1fr !important; }
html.is-mobile .ps-month-box { grid-template-columns: 1fr !important; }
html.is-mobile .ps-month-item + .ps-month-item {
  border-left: none; border-top: 1px solid var(--gray-200);
}

/* ── Nothing exceeds the viewport ── */
html.is-mobile, html.is-mobile body { max-width: 100%; overflow-x: clip; }
html.is-mobile img, html.is-mobile canvas, html.is-mobile svg { max-width: 100%; height: auto; }
html.is-mobile pre { overflow-x: auto; }


/* ══════════════════════════════════════════════════════════════════
   MOBILE — overflow containment
   Screenshots showed cards extending past the right edge on Companies,
   Payroll, Tax Certificate and Company Policy. Nothing in the content
   column may be wider than the column itself; wide things scroll
   inside their own box instead.
   ══════════════════════════════════════════════════════════════════ */
html.is-mobile .content,
html.is-mobile .content > *,
html.is-mobile .card,
html.is-mobile .card > *:not(table):not(.table-wrap):not(.cert-wrap) {
  max-width: 100%;
  box-sizing: border-box;
  min-width: 0;
}
/* Tables must be allowed to exceed their card — that overflow is what
   the card scrolls. Capping them at 100% left nothing to scroll and the
   content simply appeared cut off. */
html.is-mobile .card > table,
html.is-mobile .card table,
html.is-mobile .cert-wrap table,
html.is-mobile .table-wrap table {
  max-width: none !important;
}

/* Tab strips (Users / Departments / Quick Actions) scroll sideways */
html.is-mobile .tabs,
html.is-mobile .tab-bar,
html.is-mobile [class*="tab"][style*="display:flex"],
html.is-mobile .card > div[style*="border-bottom"][style*="display:flex"] {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  flex-wrap: nowrap !important; scrollbar-width: thin;
}
html.is-mobile .tabs > *, html.is-mobile .tab-bar > * { flex-shrink: 0; }

/* Action button rows wrap onto multiple lines rather than being clipped.
   This is the Payroll toolbar: Export CSV / Mark All Paid / Add Incentive. */
html.is-mobile .section-header > div[style*="display:flex"],
html.is-mobile div[style*="display:flex"][style*="gap:8px"] {
  flex-wrap: wrap !important;
  overflow-x: visible !important;
}
html.is-mobile .section-header > div[style*="display:flex"] > .btn,
html.is-mobile div[style*="display:flex"][style*="gap:8px"] > .btn,
html.is-mobile div[style*="display:flex"][style*="flex-wrap:wrap"] > .btn,
html.is-mobile div[style*="display:flex"][style*="flex-wrap:wrap"] > a.btn {
  flex: 1 1 100%;            /* one per row — labels are too long to share */
  justify-content: center;
  min-width: 0; white-space: nowrap;
}

/* Period pickers: label, two selects and the button share the width */
html.is-mobile form[style*="display:flex"] {
  flex-wrap: wrap !important; width: 100%;
}
html.is-mobile form[style*="display:flex"] > .form-select {
  flex: 1 1 100px !important; width: auto !important; min-width: 0;
}
html.is-mobile form[style*="display:flex"] > .btn { flex: 0 0 auto; }

/* Company cards on the Companies page */
html.is-mobile .card [style*="display:flex"][style*="align-items:center"] { min-width: 0; }
html.is-mobile .card [style*="display:flex"] > div { min-width: 0; }

/* Any remaining wide box scrolls rather than pushing the page */
/* (table max-width deliberately unset above) */


/* ── Tax certificate: page-local .cert-table has no scroll wrapper ── */
html.is-mobile .cert-wrap { max-width: 100%; }
html.is-mobile .cert-table {
  white-space: nowrap; width: auto; min-width: 100%;
}

/* ── Companies: the stat tiles grid overflowed its card ── */
html.is-mobile .card [style*="repeat(4,1fr)"] {
  grid-template-columns: repeat(2, 1fr) !important;
  width: 100%; margin-left: 0; margin-right: 0;
}
html.is-mobile .card [style*="repeat(4,1fr)"] > * { min-width: 0; overflow: hidden; }

/* Detail panel tables (users, departments) scroll inside the card */
html.is-mobile .card > .table-wrap,
/* (table max-width deliberately unset above) */
html.is-mobile .card > div[style*="overflow"] { max-width: 100%; overflow-x: auto; }


/* ── Companies: page-local .two-col is 300px + 1fr, so the detail panel
   started 320px in and ran off the screen. ── */
html.is-mobile .two-col {
  display: block !important;
  grid-template-columns: 1fr !important;
}
html.is-mobile .two-col > * { width: 100%; max-width: 100%; margin-bottom: 14px; }
html.is-mobile .two-col > *:last-child { margin-bottom: 0; }

/* Any other page-local two-column layout collapses the same way */
html.is-mobile .split-col,
html.is-mobile .side-col,
html.is-mobile .my-att-layout {
  display: block !important;
}
html.is-mobile .my-att-layout > * { width: 100%; margin-bottom: 16px; }

/* auto-fill grids inside the detail panel */
html.is-mobile [style*="minmax(170px"] {
  grid-template-columns: repeat(2, 1fr) !important;
}

/* ── Payroll toolbar: "Mark All Paid" is wrapped in its own <form>, so a
   direct-child selector missed it. Treat forms as buttons here. ── */
html.is-mobile div[style*="display:flex"][style*="flex-wrap:wrap"] > form,
html.is-mobile div[style*="display:flex"][style*="gap:8px"] > form {
  flex: 1 1 100%; width: 100%; margin: 0;
}
html.is-mobile div[style*="display:flex"][style*="flex-wrap:wrap"] > form > .btn,
html.is-mobile div[style*="display:flex"][style*="gap:8px"] > form > .btn,
html.is-mobile div[style*="display:flex"][style*="flex-wrap:wrap"] > form > button,
html.is-mobile div[style*="display:flex"][style*="gap:8px"] > form > button {
  width: 100%; justify-content: center;
}
/* Belt and braces: any .btn inside a wrapping flex toolbar goes full width */
html.is-mobile .content div[style*="flex-wrap:wrap"] > .btn,
html.is-mobile .content div[style*="flex-wrap:wrap"] > a.btn,
html.is-mobile .content div[style*="flex-wrap:wrap"] > button.btn {
  flex: 1 1 100% !important; width: 100%; justify-content: center;
}


/* ── Payroll toolbar (last word) ──────────────────────────────────
   Rows of full-size buttons stack one per row. Declared last so it
   beats the filter-pill nowrap rule above. */
html.is-mobile .content div[style*="display:flex"]:not(:has(> .btn-sm)):not(:has(> .btn-xs)):not(:has(> form > .btn-xs)) {
  flex-wrap: wrap !important;
  overflow-x: visible !important;
}
html.is-mobile .content div[style*="display:flex"]:not(:has(> .btn-sm)):not(:has(> .btn-xs)):not(:has(> form > .btn-xs)) > .btn,
html.is-mobile .content div[style*="display:flex"]:not(:has(> .btn-sm)):not(:has(> .btn-xs)):not(:has(> form > .btn-xs)) > a.btn,
html.is-mobile .content div[style*="display:flex"]:not(:has(> .btn-sm)):not(:has(> .btn-xs)):not(:has(> form > .btn-xs)) > button.btn,
html.is-mobile .content div[style*="display:flex"]:not(:has(> .btn-sm)):not(:has(> .btn-xs)):not(:has(> form > .btn-xs)) > form {
  flex: 1 1 100% !important;
  width: 100% !important;
  max-width: 100% !important;
  justify-content: center;
  margin: 0;
}
html.is-mobile .content div[style*="display:flex"]:not(:has(> .btn-sm)):not(:has(> .btn-xs)) > form > .btn,
html.is-mobile .content div[style*="display:flex"]:not(:has(> .btn-sm)):not(:has(> .btn-xs)) > form > button {
  width: 100% !important; justify-content: center;
}


/* ── Row action buttons (Edit / Delete) stay side by side ──
   They are icon-only btn-xs controls; stacking them full width made
   them dominate each row. */
html.is-mobile div[style*="display:flex"]:has(> .btn-xs),
html.is-mobile div[style*="display:flex"]:has(> form > .btn-xs) {
  flex-wrap: nowrap !important;
  flex-shrink: 0; gap: 4px !important;
  overflow: visible !important;
}
html.is-mobile div[style*="display:flex"]:has(> .btn-xs) > .btn,
html.is-mobile div[style*="display:flex"]:has(> .btn-xs) > form,
html.is-mobile div[style*="display:flex"]:has(> form > .btn-xs) > form {
  flex: 0 0 auto !important; width: auto !important;
}
html.is-mobile .btn-xs { padding: 5px 8px !important; min-height: 30px; }

/* ── Holidays: month header takes the same navy as the buttons ── */
[style*="background:var(--primary)"][style*="color:#fff"][style*="font-weight:600"] {
  background: linear-gradient(158deg, #1b2740 0%, var(--rail-bg) 52%, #0e1622 100%) !important;
}

/* ── Grid / header alignment ──
   Card headers were rendering wider than the rows beneath them because
   the header had its own padding while rows were inset. Match them. */
html.is-mobile .card > div[style*="padding:10px 16px"],
html.is-mobile .card > div[style*="padding:10px 14px"] {
  padding-left: 14px !important; padding-right: 14px !important;
  box-sizing: border-box; width: 100%;
}
/* .card overflow is set in the scroll-containers block below */


/* ── Scroll containers ────────────────────────────────────────────
   Every box that can hold a wide table scrolls horizontally, so the
   table inside stays one piece and its columns stay aligned. ── */
html.is-mobile .card,
html.is-mobile .cert-wrap,
html.is-mobile .table-wrap,
html.is-mobile .att-log-table-wrap {
  overflow-x: auto !important;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
}
/* Cards that only hold forms or text should not gain a scrollbar */
html.is-mobile .card:not(:has(table)) { overflow-x: hidden !important; }

html.is-mobile .card::-webkit-scrollbar,
html.is-mobile .cert-wrap::-webkit-scrollbar { height: 5px; }
html.is-mobile .card::-webkit-scrollbar-thumb,
html.is-mobile .cert-wrap::-webkit-scrollbar-thumb {
  background: var(--gray-300); border-radius: 3px;
}

/* ── Company Policy: page-local .policy-grid-2 / -3 ──
   Two fields side by side leaves labels wrapping onto different numbers
   of lines, so the inputs never line up. One field per row on mobile. */
html.is-mobile .policy-grid,
html.is-mobile .policy-grid-2,
html.is-mobile .policy-grid-3,
html.is-mobile .rule-row,
html.is-mobile [class*="grid-2"],
html.is-mobile [class*="grid-3"] {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 14px !important;
}
html.is-mobile .policy-grid-2 .form-group,
html.is-mobile .policy-grid-3 .form-group { margin-bottom: 0; }
html.is-mobile .policy-grid-2 .form-control,
html.is-mobile .policy-grid-2 .form-select,
html.is-mobile .policy-grid-3 .form-control,
html.is-mobile .policy-grid-3 .form-select { width: 100% !important; }

/* Escalation rows: 120px 1fr 1fr 36px will not fit a phone */
html.is-mobile [style*="120px 1fr 1fr 36px"] {
  grid-template-columns: 1fr 1fr !important;
  gap: 8px !important;
}

/* Labels wrap without pushing their input out of line */
html.is-mobile .form-label { min-height: 0; line-height: 1.35; }


/* ── Scrollable table affordance ──────────────────────────────────
   Touch browsers hide scrollbars until a drag begins, so a wide table
   looks merely cut off rather than scrollable. A persistent bar plus a
   soft fade on the right edge shows there is more to see. ── */
html.is-mobile .card:has(table),
html.is-mobile .cert-wrap,
html.is-mobile .table-wrap,
html.is-mobile .att-log-table-wrap {
  position: relative;
  overflow-x: auto;                /* auto, not scroll — a reserved track
                                      left an empty strip under tables that
                                      do not overflow */
  scrollbar-width: thin;
  scrollbar-color: var(--gray-400) var(--gray-100);
}

/* WebKit: an always-visible slim bar */
html.is-mobile .js-tscroll.is-scrollable::-webkit-scrollbar,
html.is-mobile .cert-wrap::-webkit-scrollbar,
html.is-mobile .table-wrap::-webkit-scrollbar {
  height: 6px;
  -webkit-appearance: none;
  background: var(--gray-100);
}
html.is-mobile .card:has(table)::-webkit-scrollbar-thumb,
html.is-mobile .cert-wrap::-webkit-scrollbar-thumb,
html.is-mobile .table-wrap::-webkit-scrollbar-thumb,
html.is-mobile .att-log-table-wrap::-webkit-scrollbar-thumb {
  background: var(--gray-400);
  border-radius: 3px;
}

/* A hint that the table continues past the right edge */
html.is-mobile .card:has(table) > table,
html.is-mobile .cert-wrap > table {
  position: relative;
}
html.is-mobile .scroll-hint,
html.is-mobile .card:has(table)::after {
  content: '';
  position: sticky; right: 0; top: 0;
  float: right; width: 22px; height: 100%;
  pointer-events: none;
  background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,.92));
}

/* Wide tables keep their minimum width so there is something to scroll */
html.is-mobile .ov-table { min-width: 760px !important; }
html.is-mobile .cert-table { min-width: 620px !important; }

/* Sticky first column so the row stays identifiable while scrolling */
html.is-mobile .ov-table thead th:first-child,
html.is-mobile .ov-table tbody td:first-child {
  position: sticky; left: 0; z-index: 2;
  background: #fff;
  box-shadow: 1px 0 0 var(--gray-200);
}
html.is-mobile .ov-table thead th:first-child { background: #eef2fa; z-index: 3; }


/* ── Runtime table scroller (created by app.js) ────────────────────
   The wrapper owns the scrolling, so no ancestor rule can cap the
   table's width and leave nothing to scroll. */
.js-tscroll { max-width: 100%; }

html.is-mobile .js-tscroll {
  overflow-x: visible;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
  position: relative;
  scrollbar-width: thin;
  scrollbar-color: var(--gray-400) var(--gray-100);
}
html.is-mobile .js-tscroll > table {
  max-width: none !important;
  width: auto;
  min-width: 100%;
  white-space: nowrap;
}
html.is-mobile .js-tscroll::-webkit-scrollbar {
  height: 6px; -webkit-appearance: none; background: var(--gray-100);
}
html.is-mobile .js-tscroll::-webkit-scrollbar-thumb {
  background: var(--gray-400); border-radius: 3px;
}
/* Only tables that actually overflow get the hint */
html.is-mobile .js-tscroll.is-scrollable {
  border-right: 2px solid var(--primary-light);
}

/* The card must not clip the wrapper */
html.is-mobile .card:has(.js-tscroll),
html.is-mobile .cert-wrap:has(.js-tscroll) {
  overflow: visible !important;
}

/* Policy rule rows: 120px 1fr 1fr 36px will not fit */
html.is-mobile .rule-row {
  grid-template-columns: 1fr 1fr !important;
  gap: 8px !important; align-items: start;
}
html.is-mobile .rule-row > * { min-width: 0; }

/* Labels and their inputs line up even when a label wraps */
html.is-mobile .policy-grid .form-group,
html.is-mobile .policy-grid-2 .form-group {
  display: flex; flex-direction: column; margin-bottom: 0;
}
html.is-mobile .policy-grid .form-label,
html.is-mobile .policy-grid-2 .form-label {
  margin-bottom: 6px; line-height: 1.35;
}
html.is-mobile .policy-grid .form-control,
html.is-mobile .policy-grid .form-select,
html.is-mobile .policy-grid-2 .form-control,
html.is-mobile .policy-grid-2 .form-select {
  width: 100% !important; margin-top: auto;
}


/* ── Company Policy: force every field block to one per row ───────
   .policy-grid is three columns and .policy-grid-2 is two. One of the
   three fields is hidden by inline display:none, so the visible pair
   ended up in unequal columns with labels wrapping to different
   heights. Everything goes full width on mobile. */
html.is-mobile .policy-grid,
html.is-mobile .policy-grid-2 {
  display: block !important;
}
html.is-mobile .policy-grid > .form-group,
html.is-mobile .policy-grid-2 > .form-group {
  display: block !important;
  width: 100% !important;
  margin: 0 0 14px 0 !important;
}
html.is-mobile .policy-grid > .form-group:last-child,
html.is-mobile .policy-grid-2 > .form-group:last-child { margin-bottom: 0 !important; }
html.is-mobile .policy-grid .form-label,
html.is-mobile .policy-grid-2 .form-label {
  display: block; width: 100%; margin-bottom: 6px;
  white-space: normal; line-height: 1.35;
}
html.is-mobile .policy-grid .form-control,
html.is-mobile .policy-grid .form-select,
html.is-mobile .policy-grid-2 .form-control,
html.is-mobile .policy-grid-2 .form-select,
html.is-mobile .policy-section-body .form-control,
html.is-mobile .policy-section-body .form-select {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
}
html.is-mobile .policy-section-body .form-hint { margin-top: 4px; }

/* Escalation rule rows */
html.is-mobile .rule-row {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 8px !important;
}
html.is-mobile .rule-row > * { width: 100%; min-width: 0; }

/* ── Dashboard: stacked tables must not also get a scroll wrapper,
   which was adding an empty band under the rows. ── */
html.is-mobile .js-tscroll:has(td[data-label]) {
  overflow: visible !important;
  border-right: none !important;
}
html.is-mobile .card .table:has(td[data-label]) { margin-bottom: 0; }
html.is-mobile .card .table:has(td[data-label]) tr:last-child { margin-bottom: 0; }
html.is-mobile .card:has(.table:has(td[data-label])) { padding-bottom: 14px !important; }


/* Only a wrapper whose table genuinely overflows scrolls. Without this,
   every wrapped table reserved space for a scrollbar it never used. */
html.is-mobile .js-tscroll.is-scrollable {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
}
html.is-mobile .js-tscroll:not(.is-scrollable) {
  overflow: visible !important;
  border-right: none !important;
}
html.is-mobile .js-tscroll:not(.is-scrollable) > table {
  white-space: normal;
  min-width: 0;
}
/* Cards holding a stacked (card-style) table need no scroll at all */
html.is-mobile .card:has(td[data-label]) { overflow-x: hidden !important; }


/* ── Dashboard: .grid-2 was stretching its cards ──────────────────
   Two cards share a grid row, so both take the height of the taller
   one. Recent Attendance has a single record while Leave Requests has
   four, leaving a tall empty area under the shorter card. As blocks
   each card takes only the height of its own content. */
html.is-mobile .grid-2,
html.is-mobile .stats-grid,
html.is-mobile [class*="grid-2"] {
  display: block !important;
}
html.is-mobile .grid-2 > *,
html.is-mobile [class*="grid-2"] > * {
  width: 100% !important;
  margin-bottom: 16px;
}
html.is-mobile .grid-2 > *:last-child,
html.is-mobile [class*="grid-2"] > *:last-child { margin-bottom: 0; }

/* Stat tiles stay in a grid, but aligned to the top rather than stretched */
html.is-mobile .stats-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  align-items: start;
}
html.is-mobile .stats-grid > * { margin-bottom: 0; }

/* Nothing may stretch to fill a taller sibling */
html.is-mobile .card { height: auto !important; align-self: start; }
html.is-mobile .content > div[style*="display:grid"] { align-items: start; }