/* ===================================================================
   HRM Dashboard — styles built on top of the shared style.css tokens
   (--bg, --panel, --border, --text, --muted, --brand, --grad, etc.)
   This file is additive only; it does not alter style.css.
=================================================================== */

body.dash-body{
  background:var(--bg-alt);
  overflow-x:hidden;
}
body.dash-body .bg-fx{opacity:.5;}

.dash-shell{
  min-height:100vh;
  position:relative;
  z-index:2;
}

/* ---------- Sidebar ----------
   Fixed (not sticky) and pulled out of normal flow on purpose: with the
   shell as a CSS grid, `position:sticky` only stays pinned for the height
   of its own grid track, and since the main column is much taller than
   one viewport, the sidebar unstuck itself and scrolled away with the
   page. Fixed positioning keeps it pinned regardless of the main
   column's height; `.dash-main` reserves the matching space below. */
.dash-sidebar{
  background:#14151f;
  border-right:1px solid rgba(255,255,255,.06);
  /* Right padding removed here on purpose and pushed onto each direct
     child (.dash-logo/.dash-logo-row, .dash-nav-scroll, .dash-sidebar-foot)
     instead — otherwise .dash-nav-scroll's own scrollbar renders inset by
     this padding, leaving an empty gap between the scrollbar and the
     sidebar's true right edge. With the padding moved to the children,
     .dash-nav-scroll spans the full sidebar width and its scrollbar sits
     flush against the edge, while the nav links keep the same visual
     inset via the child's own padding-right. */
  padding:26px 0 26px 20px;
  display:flex;
  flex-direction:column;
  gap:6px;
  position:fixed;
  top:0;
  left:0;
  width:264px;
  height:100vh;
  overflow:hidden;
  z-index:60;
}
/* Logo header and .dash-sidebar-foot are plain flex children of
   .dash-sidebar (margin-top:auto on the foot pins it to the bottom), so
   they never move. Only the nav list in between scrolls, in its own
   flex:1 child — that's what keeps the header/logo and the footer fixed
   in place whenever a submenu like Settings/Masters is expanded and the
   nav list grows taller than the sidebar. It gets its own thin, subtle
   scrollbar (not the browser's bulky default) so it's clear there's more
   to scroll — this sits inside the dark sidebar itself, well away from
   the page's own scrollbar at the far right edge, so the two are never
   confused for "two scrollbars" the way the sidebar's old full-height
   scrollbar was. */
.dash-nav-scroll{
  flex:1;
  min-height:0;
  overflow-y:auto;
  display:flex;
  flex-direction:column;
  gap:6px;
  padding-right:20px;
  scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,.28) transparent;
}
.dash-nav-scroll::-webkit-scrollbar{width:6px;}
.dash-nav-scroll::-webkit-scrollbar-track{background:transparent;}
.dash-nav-scroll::-webkit-scrollbar-thumb{background:rgba(255,255,255,.28);border-radius:10px;}
.dash-nav-scroll::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.45);}
.dash-logo{
  display:flex;align-items:center;gap:10px;font-family:'Space Grotesk',sans-serif;
  font-weight:700;font-size:1.15rem;color:#fff;padding:6px 20px 22px 10px;
}
.dash-logo .logo-mark{width:36px;height:36px;border-radius:10px;}
.dash-logo span.sub{display:block;font-size:.68rem;font-weight:600;color:rgba(255,255,255,.5);letter-spacing:.4px;text-transform:uppercase;}

/* ---------- Collapsible sidebar (icon-only rail) ----------
   layouts/dashboard.blade.php (Company Admin/HR) and layouts/manager.blade.php
   both toggle the .collapsed class via their own collapse button (see each
   file's inline script) — Employee and Master Admin sidebars have no
   collapse button, so this never applies there. */
.dash-logo-row{display:flex;align-items:center;justify-content:space-between;gap:6px;padding-bottom:22px;padding-right:20px;}
.dash-logo-row .dash-logo{padding-bottom:0;padding-right:0;}
.dash-sidebar-collapse{
  background:none;border:none;color:rgba(255,255,255,.55);cursor:pointer;font-size:.85rem;
  padding:8px;border-radius:8px;flex-shrink:0;transition:all .2s ease;
}
.dash-sidebar-collapse:hover{background:rgba(255,255,255,.08);color:#fff;}
.dash-sidebar.collapsed{width:78px;}
.dash-sidebar.collapsed .dash-logo-row{flex-direction:column;gap:10px;padding-bottom:18px;padding-right:0;}
.dash-sidebar.collapsed .dash-logo span:not(.logo-mark),
.dash-sidebar.collapsed .dash-nav-label,
.dash-sidebar.collapsed .dash-nav-caret,
.dash-sidebar.collapsed .nav-label{display:none;}
.dash-sidebar.collapsed .dash-sidebar-collapse i{transform:rotate(180deg);}
.dash-sidebar.collapsed .dash-nav a,
.dash-sidebar.collapsed .dash-nav-toggle,
.dash-sidebar.collapsed .dash-sidebar-foot a{justify-content:center;padding:11px;}
/* Submenus (Payroll/Masters/Settings' sub-items) have no room to show
   sensibly in a 78px icon rail, so collapsing always closes them (see the
   collapse button's script) and this is the visual guarantee either way. */
.dash-sidebar.collapsed .dash-nav-submenu{display:none !important;}
.dash-sidebar.collapsed .dash-sidebar-logout{justify-content:center;padding:10px;}
.dash-sidebar.collapsed ~ .dash-main{margin-left:78px;}

/* Hover flyout label — shows the item's name next to its icon whenever the
   sidebar is collapsed, since the text label itself is hidden then. A
   single shared element (dashboard.js appends #sidebarTooltip's
   .sidebar-flyout-tip to <body>, not inside the sidebar) so it can sit on
   top of .dash-nav-scroll's own scroll clipping instead of being cut off
   by it — position:fixed, positioned in real coordinates on hover. */
.sidebar-flyout-tip{
  position:fixed;
  top:0;
  left:0;
  transform:translateY(-50%);
  background:#1c1d29;
  color:#fff;
  font-size:.82rem;
  font-weight:600;
  padding:7px 12px;
  border-radius:8px;
  white-space:nowrap;
  box-shadow:0 8px 20px -6px rgba(0,0,0,.5);
  z-index:200;
  pointer-events:none;
  opacity:0;
  visibility:hidden;
  transition:opacity .12s ease;
}
.sidebar-flyout-tip::before{
  content:'';
  position:absolute;
  right:100%;
  top:50%;
  transform:translateY(-50%);
  border:6px solid transparent;
  border-right-color:#1c1d29;
}
.sidebar-flyout-tip.visible{opacity:1;visibility:visible;}

/* ---------- Manager Portal — Quick Actions ---------- */
.manager-quick-actions{display:flex;flex-direction:column;gap:10px;}
.manager-quick-action{
  display:flex;align-items:center;gap:12px;padding:13px 16px;border-radius:12px;
  background:var(--bg-alt);border:1px solid var(--border);color:var(--text);font-weight:600;font-size:.88rem;
  transition:all .2s ease;
}
.manager-quick-action i{width:18px;text-align:center;color:var(--brand);flex-shrink:0;}
.manager-quick-action:hover{background:var(--panel-2);border-color:var(--brand);}
.manager-quick-action-primary{background:var(--grad);color:#fff;border:none;box-shadow:var(--shadow);}
.manager-quick-action-primary i{color:#fff;}
.manager-quick-action-primary:hover{opacity:.92;}

.dash-nav-label{
  font-size:.7rem;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;
  color:rgba(255,255,255,.4);padding:16px 12px 8px;
}
.dash-nav-label:first-of-type{padding-top:4px;}
/* style.css defines a bare `nav{display:flex;...}` rule for the site header;
   .dash-nav reuses the <nav> tag for semantics, so it must explicitly win
   back a vertical stack here (class selector already outweighs the tag
   selector, this just states it clearly). */
.dash-nav{display:flex;flex-direction:column;gap:2px;align-items:stretch;justify-content:flex-start;padding:0;max-width:none;margin:0;}
.dash-nav a{
  display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:12px;
  color:rgba(255,255,255,.65);font-weight:600;font-size:.92rem;transition:all .2s ease;position:relative;
}
.dash-nav a i{width:18px;text-align:center;font-size:.95rem;flex-shrink:0;}
.dash-nav a .count{
  margin-left:auto;font-size:.72rem;font-weight:700;background:rgba(255,255,255,.08);color:rgba(255,255,255,.65);
  padding:2px 8px;border-radius:20px;border:1px solid rgba(255,255,255,.1);
}
.dash-nav a:hover{background:rgba(255,255,255,.08);color:#fff;}
.dash-nav a.active{background:var(--grad);color:#fff;box-shadow:var(--shadow);}
.dash-nav a.active .count{background:rgba(255,255,255,.22);color:#fff;border-color:transparent;}

/* ---------- Sidebar collapsible groups (Masters, Settings) ---------- */
.dash-nav-group{display:flex;flex-direction:column;}
.dash-nav-toggle{
  display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:12px;
  color:rgba(255,255,255,.65);font-weight:600;font-size:.92rem;transition:all .2s ease;
  background:none;border:none;width:100%;text-align:left;cursor:pointer;font-family:inherit;
}
.dash-nav-toggle i:first-child{width:18px;text-align:center;font-size:.95rem;flex-shrink:0;}
.dash-nav-toggle:hover{background:rgba(255,255,255,.08);color:#fff;}
.dash-nav-toggle.active{color:#a78bfa;}
.dash-nav-caret{margin-left:auto;font-size:.75rem;transition:transform .2s ease;}
.dash-nav-group.open .dash-nav-caret{transform:rotate(180deg);}
.dash-nav-submenu{max-height:0;overflow:hidden;transition:max-height .22s ease;}
.dash-nav-group.open .dash-nav-submenu{max-height:320px;}
.dash-nav-submenu a{
  display:block;padding:9px 14px 9px 44px;border-radius:12px;color:rgba(255,255,255,.6);
  font-weight:600;font-size:.86rem;transition:all .18s ease;
}
.dash-nav-submenu a:hover{background:rgba(255,255,255,.08);color:#fff;}
.dash-nav-submenu a.active{background:var(--grad);color:#fff;box-shadow:var(--shadow);}

.dash-sidebar-foot{
  margin-top:auto;padding-top:18px;padding-right:20px;border-top:1px solid rgba(255,255,255,.08);
}
.dash-sidebar-foot a{
  display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:12px;
  color:rgba(255,255,255,.6);font-weight:600;font-size:.88rem;transition:color .2s;
}
.dash-sidebar-foot a:hover{color:#a78bfa;}
.dash-sidebar-foot form{margin:0;}
.dash-sidebar-logout{
  display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:12px;width:100%;
  color:rgba(255,255,255,.6);font-weight:600;font-size:.88rem;transition:color .2s;
  background:none;border:none;text-align:left;cursor:pointer;font-family:inherit;
}
.dash-sidebar-logout:hover{color:#ff6b81;}

/* ---------- Main column ---------- */
.dash-main{min-width:0;display:flex;flex-direction:column;margin-left:264px;}

.dash-topbar{
  position:sticky;top:0;z-index:20;background:rgba(255,255,255,.85);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border);
  display:flex;align-items:center;gap:20px;padding:18px 32px;
}
.dash-burger{display:none;width:22px;height:16px;flex-direction:column;justify-content:space-between;cursor:pointer;flex-shrink:0;}
.dash-burger span{display:block;height:2px;background:var(--text);border-radius:2px;}
.dash-title h1{font-size:1.25rem;font-weight:700;font-family:'Space Grotesk',sans-serif;}
.dash-title p{font-size:.82rem;color:var(--muted);margin-top:2px;}
.dash-search{
  flex:1;max-width:360px;display:flex;align-items:center;gap:10px;background:#fff;
  border:1px solid #edeef4;border-radius:30px;padding:10px 18px;color:var(--muted);
  transition:border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.dash-search i{transition:color .2s ease;}
.dash-search:hover{border-color:#dcdfeb;}
.dash-search:focus-within{
  border-color:var(--brand);background:#fff;box-shadow:0 0 0 4px rgba(109,40,217,.1);
}
.dash-search:focus-within i{color:var(--brand);}
.dash-search input{border:0;background:none;outline:none;font-family:inherit;font-size:.88rem;color:var(--text);width:100%;}
.dash-search input::placeholder{color:var(--muted);}
.dash-topbar-right{display:flex;align-items:center;gap:18px;margin-left:auto;}
.dash-icon-btn{
  position:relative;width:42px;height:42px;border-radius:12px;border:1px solid var(--border);background:#fff;
  display:flex;align-items:center;justify-content:center;color:var(--muted);cursor:pointer;transition:all .2s;
}
.dash-icon-btn:hover{color:var(--brand);border-color:var(--brand);}
.dash-icon-btn .ping{
  position:absolute;top:-4px;right:-4px;background:var(--logo-magenta);color:#fff;font-size:.62rem;font-weight:700;
  border-radius:20px;padding:1px 5px;min-width:16px;text-align:center;border:2px solid #fff;
}
.dash-profile{display:flex;align-items:center;gap:10px;cursor:pointer;padding:6px 10px 6px 6px;border-radius:30px;border:1px solid var(--border);background:#fff;}
.dash-profile img, .dash-profile .avatar{width:34px;height:34px;border-radius:50%;object-fit:cover;flex-shrink:0;}
.dash-profile .avatar{
  background:var(--grad-2);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;
  font-family:'Space Grotesk',sans-serif;font-size:.85rem;
}
.dash-profile .who{line-height:1.25;}
.dash-profile .who strong{display:block;font-size:.85rem;}
.dash-profile .who span{font-size:.72rem;color:var(--muted);}
.dash-profile i.fa-chevron-down{font-size:.7rem;color:var(--muted);}

.dash-content{padding:28px 32px 60px;display:flex;flex-direction:column;gap:26px;}
/* style.css's bare `section{padding:110px 0}` rule (for the marketing pages'
   full-width sections) would otherwise leak into the dashboard's <section>
   wrappers used for semantic grouping — neutralize it here. */
.dash-content section{padding:0;position:static;z-index:auto;}

/* ---------- Stat cards ---------- */
.stat-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;}
.stat-grid.cols-4{grid-template-columns:repeat(4,1fr);}
.stat-card{
  background:var(--panel);border:1px solid var(--border);border-radius:18px;padding:22px 20px;
  box-shadow:0 4px 18px -10px rgba(20,20,50,.08);position:relative;overflow:hidden;
}
.stat-card .stat-icon{
  width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  font-size:1.05rem;color:#fff;margin-bottom:16px;
}
.stat-card:nth-child(1) .stat-icon{background:var(--grad);}
.stat-card:nth-child(2) .stat-icon{background:linear-gradient(135deg,#22d3ee,#0891b2);}
.stat-card:nth-child(3) .stat-icon{background:linear-gradient(135deg,#ffb020,#d97706);}
.stat-card:nth-child(4) .stat-icon{background:linear-gradient(135deg,#ec2f9c,#c2255c);}
.stat-card:nth-child(5) .stat-icon{background:linear-gradient(135deg,#8b2fd6,#6d28d9);}
/* Manager Portal dashboard's 4 cards use pink for card 3 (Absent/On Leave)
   and orange for card 4 (Payroll) — the opposite of the generic nth-child
   order above — without touching that shared order (Payroll's own 4-card
   summary and any other .cols-4 user still gets the original colors). */
.stat-grid.manager-stats .stat-card:nth-child(3) .stat-icon{background:linear-gradient(135deg,#ec2f9c,#c2255c);}
.stat-grid.manager-stats .stat-card:nth-child(4) .stat-icon{background:linear-gradient(135deg,#ffb020,#d97706);}
.stat-card .stat-value{font-size:1.7rem;font-weight:700;font-family:'Space Grotesk',sans-serif;line-height:1;}
.stat-card .stat-label{color:var(--muted);font-size:.82rem;margin-top:6px;}
.stat-card .stat-delta{
  position:absolute;top:22px;right:20px;font-size:.72rem;font-weight:700;padding:3px 9px;border-radius:20px;
}
.stat-delta.up{color:#0a9d5c;background:rgba(10,157,92,.1);}
.stat-delta.down{color:#d6304a;background:rgba(214,48,74,.1);}
.stat-delta.flat{color:var(--muted);background:var(--panel-2);}

/* ---------- Panels / charts ---------- */
.panel-row{display:grid;grid-template-columns:1.4fr 1fr;gap:20px;align-items:stretch;}
.panel{
  background:var(--panel);border:1px solid var(--border);border-radius:20px;padding:24px;
  box-shadow:0 4px 18px -10px rgba(20,20,50,.08);display:flex;flex-direction:column;
}
.panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;gap:12px;flex-wrap:wrap;}
.panel-head h3{font-size:1.02rem;font-weight:700;}
.panel-head p{font-size:.78rem;color:var(--muted);margin-top:2px;}
.panel-head-title{display:flex;align-items:center;gap:14px;}
.panel-head-icon{
  width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  font-size:1.05rem;color:#fff;flex-shrink:0;background:var(--grad);
}
.panel-head-icon.job{background:linear-gradient(135deg,#22d3ee,#0891b2);}
.panel-head-icon.bank{background:linear-gradient(135deg,#ffb020,#d97706);}

/* ---------- Multi-section forms (e.g. Add Employee) ---------- */
.employee-form{display:flex;flex-direction:column;gap:20px;}
.col-12{width:100%;}
.employee-form-actions{display:flex;gap:14px;justify-content:flex-end;}

/* ---------- Consistent button size across the whole dashboard ----------
   style.css's .btn-primary/.btn-ghost default to large hero-CTA sizing for
   the marketing pages; every dashboard screen (topbar, toolbars, forms)
   shares this one size instead of each button carrying its own inline
   padding/font-size. */
.dash-body .btn-primary, .dash-body .btn-ghost{
  padding:12px 24px;font-size:.88rem;
}
.dash-body .btn-ghost{background:#fff;border:1px solid var(--border);}
.dash-body .btn-ghost:disabled{opacity:.6;cursor:not-allowed;}

/* Small muted helper line under a control — e.g. geolocation status/result. */
.form-hint{
  display:flex;align-items:center;gap:6px;margin:8px 0 0;font-size:.82rem;color:var(--muted);
}
.form-hint i{width:14px;text-align:center;flex-shrink:0;}
a.form-hint{color:var(--brand);font-weight:600;width:fit-content;}
a.form-hint:hover{text-decoration:underline;}
.form-hint.error{color:#d6304a;}
.form-hint.success{color:#0a9d5c;}

/* ---------- Attendance Calculation Method radio cards (Settings >
   Attendance Rules) — a plain radio input with a title + description,
   styled as a selectable card. Only one is ever checked (same <name>). */
.method-options{display:flex;flex-wrap:wrap;gap:14px;margin-top:8px;}
.method-option{
  flex:1 1 260px;display:flex;gap:12px;align-items:flex-start;padding:14px 16px;
  border:1px solid var(--border);border-radius:14px;cursor:pointer;
  transition:border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.method-option:hover{border-color:#dcdfeb;}
.method-option input[type="radio"]{margin-top:3px;width:16px;height:16px;accent-color:var(--brand);cursor:pointer;flex-shrink:0;}
.method-option-body{display:flex;flex-direction:column;gap:4px;}
.method-option-body strong{font-size:.92rem;color:var(--text);}
.method-option-body span{font-size:.8rem;color:var(--muted);line-height:1.5;}
.method-option.is-selected{border-color:var(--brand);background:rgba(109,40,217,.05);box-shadow:0 0 0 3px rgba(109,40,217,.08);}
.panel-head select, .panel-head .seg{
  font-family:inherit;font-size:.8rem;border:1px solid #edeef4;border-radius:10px;
  padding:7px 30px 7px 12px;background-color:#fff;color:var(--text);
}
.panel-head select{
  -webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23666c80' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.panel-head select:hover{border-color:#dcdfeb;}
.panel-head select:focus{
  outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(109,40,217,.12);
  background-color:#fff;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236d28d9' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.legend-row{display:flex;gap:16px;flex-wrap:wrap;margin-top:14px;}
.legend-row span{display:flex;align-items:center;gap:7px;font-size:.78rem;color:var(--muted);}
.legend-row i{width:9px;height:9px;border-radius:3px;display:inline-block;}
.chart-wrap{position:relative;flex:1;min-height:230px;}

/* ---------- Dashboard: Today's Attendance, grouped by status ----------
   Chips instead of a table — every group only wraps to more rows, never
   needs horizontal scroll, so this is mobile-safe by construction rather
   than needing a card-stacking breakpoint like the wide tables elsewhere. */
.attendance-groups{display:flex;flex-direction:column;gap:20px;}
/* space-between + the count styled as its own small pill on the right —
   otherwise the bare number just floats in the middle of empty space
   next to the status badge, with nothing to visually anchor it. */
.attendance-group-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px;}
.attendance-group-count{
  font-size:.78rem;font-weight:700;color:var(--muted);background:var(--panel-2);
  padding:3px 11px;border-radius:20px;flex-shrink:0;
}
/* One chip per row, full width of the card — a chip that only shrink-wraps
   its own content (avatar + name) leaves a small pill stranded on the left
   with a lot of empty space next to it whenever a group has just one or two
   people in it (e.g. "Not Marked Yet"). Stretching every chip to the row's
   full width, always (not just on a phone), fixes that at every size. */
.attendance-chip-row{display:flex;flex-direction:column;gap:10px;}
.attendance-chip{
  display:flex;align-items:center;gap:9px;padding:8px 16px 8px 8px;border:1px solid var(--border);
  border-radius:30px;background:var(--panel-2);width:100%;min-width:0;
}
.attendance-chip .avatar{
  width:30px;height:30px;border-radius:50%;background:var(--grad-2);color:#fff;display:flex;align-items:center;
  justify-content:center;font-weight:700;font-family:'Space Grotesk',sans-serif;font-size:.68rem;flex-shrink:0;
}
.attendance-chip > div{flex:1;min-width:0;}
.chip-name{display:block;font-weight:600;font-size:.82rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.chip-meta{display:block;font-size:.7rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

/* ---------- Attendance table ---------- */
.dash-table{width:100%;min-width:640px;border-collapse:collapse;}
.dash-table th{
  text-align:left;font-size:.72rem;letter-spacing:.6px;text-transform:uppercase;color:var(--muted);
  padding:0 12px 12px;border-bottom:1px solid var(--border);font-weight:700;
}
.dash-table td{padding:14px 12px;border-bottom:1px solid var(--border);font-size:.88rem;vertical-align:middle;}
.dash-table tr:last-child td{border-bottom:0;}
.emp-cell{display:flex;align-items:center;gap:12px;}
.emp-cell .avatar{
  width:36px;height:36px;border-radius:50%;background:var(--grad-2);color:#fff;display:flex;align-items:center;
  justify-content:center;font-weight:700;font-family:'Space Grotesk',sans-serif;font-size:.78rem;flex-shrink:0;
}
.emp-cell .emp-name{font-weight:600;}
.emp-cell .emp-role{display:block;font-size:.76rem;color:var(--muted);}

/* ---------- Attendance table: Distance column (admin verification) ----------
   One line per punch that has a recorded distance from the office. */
.loc-cell{display:flex;align-items:center;gap:6px;font-size:.76rem;white-space:nowrap;}
.loc-cell + .loc-cell{margin-top:4px;}
.loc-tag{font-size:.64rem;font-weight:700;color:var(--muted);letter-spacing:.4px;width:20px;flex-shrink:0;}

/* ---------- Attendance table: Check-in/Check-out time as a button ----------
   Clicking it opens the punch detail modal (map for GPS Location, selfie
   for Camera + GPS) — only rendered as a button when that punch actually
   has a location or photo to show. */
.punch-time-btn{
  display:inline-flex;align-items:center;gap:6px;background:none;border:none;padding:0;font:inherit;font-weight:600;
  color:var(--text);cursor:pointer;text-decoration:underline;text-decoration-color:var(--border);text-underline-offset:3px;
  transition:color .15s ease, text-decoration-color .15s ease;
}
.punch-time-btn i{color:var(--brand);font-size:.8rem;}
.punch-time-btn:hover{color:var(--brand);text-decoration-color:var(--brand);}

/* ---------- Punch view modal (admin): map or selfie for one punch ---------- */
.punch-view-dialog{max-width:420px;}
.punch-view-media{border-radius:14px;overflow:hidden;background:#111;margin-bottom:14px;aspect-ratio:4/3;position:relative;}
.punch-view-media img{width:100%;height:100%;object-fit:cover;display:block;}
.punch-view-media.is-broken::after{
  content:'Photo could not be loaded';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:#aab;font-size:.8rem;font-weight:600;text-align:center;padding:0 20px;
}
.punch-view-media.is-broken img{display:none;}
.punch-view-distance{font-size:.85rem;font-weight:600;color:var(--muted);margin:0;}
.badge{
  display:inline-flex;align-items:center;gap:6px;font-size:.75rem;font-weight:700;padding:5px 12px;border-radius:20px;
}
.badge::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;}
.badge.present{color:#0a9d5c;background:rgba(10,157,92,.1);}
.badge.late{color:#d97706;background:rgba(217,119,6,.12);}
.badge.absent{color:#d6304a;background:rgba(214,48,74,.1);}
.badge.approved{color:#0a9d5c;background:rgba(10,157,92,.1);}
.badge.pending{color:#d97706;background:rgba(217,119,6,.12);}
.badge.rejected{color:#d6304a;background:rgba(214,48,74,.1);}
/* Request TYPE badges (Leave/Regularization/OD/Shift Change) — distinct
   from the .present/.pending/.rejected STATUS tones above. Used on the
   Approvals page so a mixed "All" list still reads each row's category
   at a glance. */
.badge.type-leave{color:#0a9d5c;background:rgba(10,157,92,.1);}
.badge.type-regularization{color:#7c3aed;background:rgba(124,58,237,.1);}
.badge.type-od{color:#c2410c;background:rgba(194,65,12,.1);}
.badge.type-shift-change{color:#d97706;background:rgba(217,119,6,.12);}
.table-scroll{overflow-x:auto;}

/* ---------- Leave requests list ---------- */
.leave-list{display:flex;flex-direction:column;gap:14px;}
.leave-item{
  display:flex;align-items:flex-start;gap:12px;padding:14px;border:1px solid var(--border);border-radius:14px;
  transition:border-color .2s, background .2s;
}
.leave-item.is-done{opacity:.55;}
.leave-item .avatar{
  width:38px;height:38px;border-radius:50%;background:var(--grad-2);color:#fff;display:flex;align-items:center;
  justify-content:center;font-weight:700;font-family:'Space Grotesk',sans-serif;font-size:.8rem;flex-shrink:0;
}
.leave-body{flex:1;min-width:0;}
.leave-body .top-row{display:flex;justify-content:space-between;gap:8px;align-items:flex-start;flex-wrap:wrap;}
.leave-body .top-row > div{min-width:0;}
.leave-body .name{font-weight:600;font-size:.9rem;}
.leave-body .meta{font-size:.78rem;color:var(--muted);margin-top:2px;}
.leave-body .reason{font-size:.8rem;color:var(--muted);margin-top:6px;}
.leave-actions{display:flex;gap:8px;margin-top:10px;}
.leave-actions button{
  border:1px solid var(--border);background:#fff;border-radius:9px;padding:6px 13px;font-size:.76rem;font-weight:700;
  cursor:pointer;transition:all .18s;font-family:inherit;
}
.leave-actions .approve{color:#0a9d5c;}
.leave-actions .approve:hover{background:rgba(10,157,92,.1);border-color:#0a9d5c;}
.leave-actions .reject{color:#d6304a;}
.leave-actions .reject:hover{background:rgba(214,48,74,.1);border-color:#d6304a;}

/* ---------- Attendance page: Today / This Month tabs ---------- */
.dash-tabs{display:flex;gap:8px;flex-wrap:wrap;}
.dash-tab{
  display:inline-flex;align-items:center;gap:8px;padding:10px 20px;border-radius:30px;
  font-size:.85rem;font-weight:600;color:var(--muted);background:var(--panel);border:1px solid var(--border);
  transition:all .18s ease;
}
.dash-tab:hover{color:var(--text);border-color:#dcdfeb;}
.dash-tab.active{color:#fff;background:var(--grad);border-color:transparent;box-shadow:0 8px 20px -8px rgba(109,40,217,.5);}

/* ---------- Attendance page: summary strip ---------- */
.attn-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.attn-summary-card{
  background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:18px 20px;
  display:flex;align-items:center;gap:14px;box-shadow:0 4px 18px -10px rgba(20,20,50,.08);
}
.attn-summary-icon{
  width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  font-size:1.05rem;color:#fff;flex-shrink:0;
}
.attn-summary-card.present .attn-summary-icon{background:linear-gradient(135deg,#22c55e,#0a9d5c);}
.attn-summary-card.late .attn-summary-icon{background:linear-gradient(135deg,#ffb020,#d97706);}
.attn-summary-card.absent .attn-summary-icon{background:linear-gradient(135deg,#f43f5e,#d6304a);}
.attn-summary-card.on_leave .attn-summary-icon{background:linear-gradient(135deg,#8b2fd6,#6d28d9);}
.attn-summary-card.pay-total .attn-summary-icon{background:linear-gradient(135deg,#ffb020,#d97706);}
.attn-summary-card.pay-earned .attn-summary-icon{background:linear-gradient(135deg,#22d3ee,#0891b2);}
.attn-summary-value{font-size:1.4rem;font-weight:700;font-family:'Space Grotesk',sans-serif;line-height:1;}
.attn-summary-label{font-size:.78rem;color:var(--muted);margin-top:4px;}

/* ---------- Employee dashboard: Check In / Check Out row ----------
   Desktop: the two buttons sit side by side, each in its own column
   so a "completed" button's stacked label doesn't crowd the other.
   Mobile: stacks to one column with both buttons stretched full
   width (see the 620px media query). */
.checkinout-row{display:flex;align-items:stretch;gap:14px;flex-wrap:wrap;}
.checkinout-col{flex:1 1 220px;min-width:200px;}
.checkinout-col form{width:100%;}
.checkinout-btn{width:100%;justify-content:center;gap:10px;min-height:48px;}
.checkinout-time{color:var(--muted);font-size:.85rem;}

/* Completed state: non-interactive, shows the punch time (and geofence
   distance in meters) compactly stacked under the status label rather
   than as a separate line — matches "Checked In / 09:15 AM / 11m from
   office". Distance is always whole meters, never decimal km. Centered,
   same as the plain active button, so a one-line and a two-line button
   sitting stacked on mobile still read as one aligned pair rather than
   one left-hugged and one centered. */
.checkinout-btn.is-done{
  cursor:not-allowed;
  opacity:.85;
  background:var(--panel-2);
  color:var(--text);
  border:1px solid var(--border);
  padding-top:11px;
  padding-bottom:11px;
}
.checkinout-btn.is-done i{color:#16a34a;font-size:1rem;flex-shrink:0;}
.checkinout-btn-text{display:flex;flex-direction:column;align-items:center;line-height:1.3;text-align:center;}
.checkinout-btn-text strong{font-size:.9rem;font-weight:700;}
.checkinout-btn-text small{font-size:.74rem;font-weight:500;color:var(--muted);}

/* ---------- Employee dashboard: Quick Links ----------
   Colored icon-badge pills instead of plain white/ghost buttons —
   reuses the same gradient language as the attendance summary cards. */
.quicklinks-row{display:flex;gap:14px;flex-wrap:wrap;}
.quick-link-btn{
  display:flex;align-items:center;gap:12px;flex:1;min-width:220px;padding:14px 18px;border-radius:14px;
  border:1px solid var(--border);background:#fff;font-weight:600;font-size:.88rem;color:var(--text);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.quick-link-btn:hover{transform:translateY(-2px);box-shadow:0 14px 30px -14px rgba(20,20,50,.22);border-color:transparent;}
.quick-link-icon{
  width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:.95rem;flex-shrink:0;
}
.quick-link-btn.attendance .quick-link-icon{background:linear-gradient(135deg,#22d3ee,#0891b2);}
.quick-link-btn.salary .quick-link-icon{background:linear-gradient(135deg,#ffb020,#d97706);}
.quick-link-btn.profile .quick-link-icon{background:linear-gradient(135deg,#8b2fd6,#6d28d9);}

/* ---------- Generic modal (currently just the Check In / Check Out punch modal) ---------- */
.modal-overlay{
  position:fixed;inset:0;background:rgba(15,15,30,.55);display:flex;align-items:center;justify-content:center;
  padding:20px;z-index:200;opacity:0;visibility:hidden;transition:opacity .2s ease, visibility .2s ease;
}
.modal-overlay.open{opacity:1;visibility:visible;}
.modal-dialog{
  background:#fff;border-radius:20px;padding:28px;max-width:480px;width:100%;position:relative;
  box-shadow:0 30px 70px -20px rgba(10,10,30,.4);max-height:90vh;overflow-y:auto;
}
.modal-close{
  position:absolute;top:16px;right:16px;width:32px;height:32px;border-radius:50%;border:1px solid var(--border);
  background:#fff;color:var(--muted);display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;
}
.modal-close:hover{color:var(--text);border-color:var(--brand);}
.modal-step h3{font-size:1.05rem;font-weight:700;margin-bottom:6px;padding-right:30px;}
.modal-subtext{font-size:.85rem;color:var(--muted);margin-bottom:20px;}

/* ---------- Punch modal: GPS-only vs. Camera + GPS choice ---------- */
.punch-choice-row{display:flex;flex-direction:column;gap:12px;}
.punch-choice-btn{
  display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:16px 18px;border-radius:14px;
  border:1px solid var(--border);background:#fff;font-weight:700;font-size:.92rem;color:var(--text);
  cursor:pointer;text-align:left;transition:border-color .2s ease, transform .2s ease, box-shadow .2s ease;font-family:inherit;
}
.punch-choice-btn:hover{border-color:var(--brand);transform:translateY(-2px);box-shadow:0 12px 26px -14px rgba(109,40,217,.35);}
.punch-choice-btn small{font-weight:500;color:var(--muted);font-size:.78rem;}
.punch-choice-icon{
  width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;color:#fff;
  font-size:.95rem;margin-bottom:4px;
}
.punch-choice-icon.gps{background:linear-gradient(135deg,#22d3ee,#0891b2);}
.punch-choice-icon.camera{background:linear-gradient(135deg,#8b2fd6,#6d28d9);}

/* ---------- Punch modal: camera capture ---------- */
.punch-camera-wrap{
  position:relative;width:100%;aspect-ratio:4/3;border-radius:14px;overflow:hidden;background:#111;margin-bottom:14px;
}
.punch-camera-wrap video{transform:scaleX(-1);} /* mirror the live preview only — the saved photo stays true-to-life */
.punch-camera-wrap video, .punch-camera-wrap img{width:100%;height:100%;object-fit:cover;display:block;}
.punch-camera-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}

.punch-working{text-align:center;padding:30px 10px;color:var(--muted);}
.punch-working i{font-size:1.6rem;color:var(--brand);margin-bottom:12px;display:block;}

@media(max-width:480px){
  .modal-dialog{padding:22px 18px;border-radius:16px;}
}

/* ---------- Attendance page: round mark-present / mark-absent buttons ---------- */
.attendance-actions{display:flex;gap:8px;}
.icon-btn-round{
  width:34px;height:34px;border-radius:50%;border:1px solid var(--border);background:#fff;
  display:inline-flex;align-items:center;justify-content:center;font-size:.82rem;cursor:pointer;
  transition:all .18s ease;flex-shrink:0;color:var(--muted);text-decoration:none;
}
.icon-btn-round:hover{border-color:var(--brand);color:var(--brand);}
.icon-btn-round.success{color:#0a9d5c;}
.icon-btn-round.success:hover{background:rgba(10,157,92,.1);border-color:#0a9d5c;}
.icon-btn-round.success.active{background:#0a9d5c;border-color:#0a9d5c;color:#fff;}
.icon-btn-round.danger{color:#d6304a;}
.icon-btn-round.danger:hover{background:rgba(214,48,74,.1);border-color:#d6304a;}
.icon-btn-round.danger.active{background:#d6304a;border-color:#d6304a;color:#fff;}
.icon-btn-round.leave{color:#d97706;}
.icon-btn-round.leave:hover{background:rgba(217,119,6,.1);border-color:#d97706;}
.icon-btn-round.leave.active{background:#d97706;border-color:#d97706;color:#fff;}
.icon-btn-round.offday{color:#0891b2;}
.icon-btn-round.offday:hover{background:rgba(8,145,178,.1);border-color:#0891b2;}
.icon-btn-round.offday.active{background:#0891b2;border-color:#0891b2;color:#fff;}
.icon-btn-round.halfday{color:#7c3aed;}
.icon-btn-round.halfday:hover{background:rgba(124,58,237,.1);border-color:#7c3aed;}
.icon-btn-round.halfday.active{background:#7c3aed;border-color:#7c3aed;color:#fff;}
.icon-btn-round.reset-trigger{color:#94a3b8;}
.icon-btn-round.reset-trigger:hover{background:rgba(148,163,184,.15);border-color:#64748b;color:#334155;}
.icon-btn-round:disabled{opacity:.4;cursor:not-allowed;}

/* ---------- Attendance Reset modal (Reset Check In / Check Out / Both) ---------- */
.reset-option-row{display:flex;flex-direction:column;gap:10px;}
.reset-option-btn{width:100%;justify-content:center;gap:8px;cursor:pointer;}
@media(max-width:480px){
  .reset-option-row{gap:8px;}
}

/* ---------- Manual attendance entry (per-row select + Action column) ----------
   .manual-actions is deliberately its own class, not .attendance-actions —
   the generic mark-present/absent handler below binds to every
   .attendance-actions group on the page, and Manual Entry's rows need their
   own Present/Absent/Paid Leave/Offday behavior instead. */
.manual-actions{display:flex;gap:6px;flex-wrap:wrap;}
.manual-select-all{display:flex;align-items:center;gap:8px;font-size:.82rem;font-weight:600;color:var(--muted);cursor:pointer;}
.manual-select-all input{width:16px;height:16px;accent-color:var(--brand);cursor:pointer;}
.employee-row-check{width:17px;height:17px;accent-color:var(--brand);cursor:pointer;}

/* ---------- Bottom row: activity + quick actions ---------- */
.bottom-row{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
.activity-list{display:flex;flex-direction:column;gap:16px;}
.activity-item{display:flex;gap:12px;align-items:flex-start;}
.activity-dot{width:32px;height:32px;border-radius:50%;background:var(--panel-2);border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;color:var(--brand);font-size:.82rem;flex-shrink:0;}
.activity-item p{font-size:.86rem;}
.activity-item p strong{font-weight:600;}
.activity-item time{font-size:.74rem;color:var(--muted);}
.quick-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.quick-btn{
  display:flex;flex-direction:column;gap:10px;align-items:flex-start;padding:18px;border-radius:14px;
  border:1px solid var(--border);background:var(--panel-2);transition:all .2s;cursor:pointer;font-family:inherit;text-align:left;
}
.quick-btn:hover{border-color:var(--brand);background:#fff;transform:translateY(-3px);}
.quick-btn i{font-size:1.1rem;color:var(--brand);}
.quick-btn span{font-size:.85rem;font-weight:600;}

/* toast */
.dash-toast{
  position:fixed;bottom:26px;right:26px;background:var(--text);color:#fff;padding:13px 20px;border-radius:12px;
  font-size:.85rem;font-weight:600;display:flex;align-items:center;gap:10px;box-shadow:0 15px 40px -10px rgba(0,0,0,.35);
  transform:translateY(20px);opacity:0;pointer-events:none;transition:all .3s ease;z-index:200;
}
.dash-toast.show{transform:translateY(0);opacity:1;}
.dash-toast i{color:#22d3ee;}

/* ---------- Alerts (flash messages / validation errors) ---------- */
.dash-alert{
  display:flex;align-items:flex-start;gap:12px;padding:16px 18px;border-radius:14px;font-size:.88rem;
  border:1px solid var(--border);margin-bottom:4px;
}
.dash-alert i{font-size:1rem;margin-top:2px;flex-shrink:0;}
.dash-alert.success{background:rgba(10,157,92,.08);border-color:rgba(10,157,92,.3);color:#0a7a47;}
.dash-alert.error{background:rgba(214,48,74,.08);border-color:rgba(214,48,74,.3);color:#a91f38;}
.dash-alert ul{color:inherit;}
.dash-alert li{list-style:disc;}

/* ---------- Toolbar (list header: search + filter + create) ---------- */
.dash-toolbar{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  background:var(--panel);border:1px solid var(--border);border-radius:18px;padding:16px 20px;
  box-shadow:0 4px 18px -10px rgba(20,20,50,.08);
}
.dash-toolbar-filters{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.dash-toolbar-filters select{
  font-family:inherit;font-size:.85rem;font-weight:600;border:1px solid #edeef4;border-radius:30px;
  padding:10px 34px 10px 18px;background-color:#fff;color:var(--text);cursor:pointer;
  -webkit-appearance:none;-moz-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23666c80' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center;
  transition:border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.dash-toolbar-filters select:hover{border-color:#dcdfeb;}
.dash-toolbar-filters select:focus{
  outline:none;border-color:var(--brand);box-shadow:0 0 0 4px rgba(109,40,217,.1);
  background-color:#fff;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236d28d9' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ---------- Employee cards ---------- */
.employee-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.employee-card{
  background:var(--panel);border:1px solid var(--border);border-radius:18px;padding:22px;
  box-shadow:0 4px 18px -10px rgba(20,20,50,.08);transition:transform .25s ease, box-shadow .25s ease;
}
.employee-card:hover{transform:translateY(-4px);box-shadow:0 20px 40px -18px rgba(124,92,255,.25);border-color:var(--brand);}
.employee-card-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;}
.employee-card-top-right{display:flex;align-items:center;gap:8px;}
.employee-card .avatar{
  width:46px;height:46px;border-radius:50%;background:var(--grad-2);color:#fff;display:flex;align-items:center;
  justify-content:center;font-weight:700;font-family:'Space Grotesk',sans-serif;font-size:.95rem;flex-shrink:0;
}
.employee-name{font-size:1.05rem;font-weight:700;margin-bottom:4px;}
.employee-name a{color:inherit;text-decoration:none;}
.employee-name a:hover{color:var(--brand);}

/* Generic dropdown menu — the employee card's "..." actions, and the
   header's notification bell / profile menu, all share this same
   open/close mechanic (see dashboard.js). */
.dropdown{position:relative;}
.dropdown-toggle{
  width:30px;height:30px;border-radius:9px;border:1px solid transparent;background:transparent;
  display:flex;align-items:center;justify-content:center;color:var(--muted);cursor:pointer;
  transition:all .2s ease;font-size:.9rem;font-family:inherit;
}
.dropdown-toggle:hover, .dropdown-toggle.active{background:var(--panel-2);color:var(--text);border-color:var(--border);}
/* The header bell keeps its original 42px bordered button look — it just
   also happens to be a .dropdown-toggle for the open/close JS. Without
   this it inherits .dropdown-toggle's smaller, borderless, transparent
   style instead (same class-specificity, .dropdown-toggle defined later
   wins), which is why it looked like it had disappeared from the header. */
.dash-icon-btn.dropdown-toggle{width:42px;height:42px;border-radius:12px;border:1px solid var(--border);background:#fff;font-size:1rem;}
.dash-icon-btn.dropdown-toggle:hover, .dash-icon-btn.dropdown-toggle.active{color:var(--brand);border-color:var(--brand);background:#fff;}
/* Same collision hits the header profile button — .dropdown-toggle's fixed
   30x30 box was squashing the name/role text and stripping the pill's
   border/background. Restore its original auto-width pill look. */
.dash-profile.dropdown-toggle{width:auto;height:auto;border-radius:30px;border:1px solid var(--border);background:#fff;font-size:inherit;}
.dash-profile.dropdown-toggle:hover, .dash-profile.dropdown-toggle.active{background:#fff;color:inherit;border-color:var(--border);}
.dropdown-panel{
  position:absolute;top:calc(100% + 6px);right:0;min-width:196px;background:#fff;border:1px solid var(--border);
  border-radius:14px;box-shadow:0 20px 45px -15px rgba(20,20,50,.3);padding:8px;z-index:40;
  opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .18s ease, transform .18s ease, visibility .18s ease;
}
.dropdown.open .dropdown-panel{opacity:1;visibility:visible;transform:translateY(0);}
.dropdown-panel a, .dropdown-panel button.dropdown-link{
  display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:9px;font-size:.85rem;font-weight:600;
  color:var(--text);transition:background .15s ease, color .15s ease;width:100%;text-align:left;
  background:none;border:none;cursor:pointer;font-family:inherit;
}
.dropdown-panel a:hover, .dropdown-panel button.dropdown-link:hover{background:rgba(109,40,217,.08);color:var(--brand);}
.dropdown-panel a i, .dropdown-panel button.dropdown-link i{width:16px;text-align:center;flex-shrink:0;}

/* Header notification panel */
.dropdown-panel.notification-panel{min-width:300px;padding:6px;}
.notification-panel-head{display:flex;align-items:center;justify-content:space-between;padding:8px 10px 6px;}
.notification-panel-head strong{font-size:.85rem;}
.notification-panel-head span{font-size:.72rem;color:var(--muted);}
.notification-item{display:flex;gap:10px;padding:10px;border-radius:10px;align-items:flex-start;}
.notification-item:hover{background:var(--panel-2);}
.notification-item-icon{
  width:32px;height:32px;border-radius:9px;background:var(--grad);color:#fff;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:.8rem;
}
.notification-item-body p{font-size:.82rem;font-weight:600;line-height:1.35;}
.notification-item-body span{font-size:.72rem;color:var(--muted);}
.notification-panel-empty{padding:26px 10px;text-align:center;font-size:.82rem;color:var(--muted);}

/* Header profile panel */
.dropdown-panel.profile-panel{min-width:200px;}
.profile-panel-head{padding:8px 12px 10px;border-bottom:1px solid var(--border);margin-bottom:6px;}
.profile-panel-head strong{display:block;font-size:.85rem;}
.profile-panel-head span{font-size:.72rem;color:var(--muted);}

/* Reusable dropdown-menu icon colors — apply these menu-icon-* classes to
   any future dropdown (not just the employee card actions menu) to match
   this same look. */
.menu-icon-profile{color:#2563eb;}
.menu-icon-edit{color:#7c3aed;}
.menu-icon-documents{color:#d97706;}
.menu-icon-offer{color:#9333ea;}
.menu-icon-salary{color:#16a34a;}

/* ---------- Custom-styled <select> dropdowns ----------
   dashboard.js progressively enhances every matching <select> with this
   markup at runtime: the real <select> stays in the DOM (hidden, still
   holds the value and still submits with the form) while a styled trigger
   + card-style menu — the same look as the employee card's "..." actions
   menu above — replaces it visually. */
.custom-select{position:relative;}
.custom-select-native{
  position:absolute;inset:0;width:100%;height:100%;opacity:0;pointer-events:none;
}
.custom-select-trigger{
  display:flex;align-items:center;justify-content:space-between;gap:10px;cursor:pointer;user-select:none;
  transition:border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.custom-select-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.custom-select-trigger i{font-size:.7rem;color:var(--muted);transition:transform .2s ease, color .2s ease;flex-shrink:0;}
.custom-select.open .custom-select-trigger i{transform:rotate(180deg);color:var(--brand);}
.custom-select.open .custom-select-trigger{border-color:var(--brand);box-shadow:0 0 0 4px rgba(109,40,217,.1);background-color:#fff;}
/* dashboard.js keeps this class synced with the real <select>'s disabled
   state for its whole lifetime — see enhanceSelects()'s syncDisabled(). */
.custom-select.is-disabled .custom-select-trigger{opacity:.55;cursor:not-allowed;}

.custom-select-menu{
  position:absolute;top:calc(100% + 6px);left:0;background:#fff;border:1px solid var(--border);
  border-radius:14px;box-shadow:0 20px 45px -15px rgba(20,20,50,.3);padding:8px;z-index:50;
  min-width:100%;width:max-content;max-width:320px;max-height:280px;overflow-y:auto;
  opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .18s ease, transform .18s ease, visibility .18s ease;
}
.custom-select.open .custom-select-menu{opacity:1;visibility:visible;transform:translateY(0);}
.custom-select-menu a{
  display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:9px;font-size:.85rem;font-weight:600;
  color:var(--text);transition:background .15s ease, color .15s ease;white-space:nowrap;
}
.custom-select-menu a:hover{background:rgba(109,40,217,.08);color:var(--brand);}
.custom-select-menu a.selected{background:rgba(109,40,217,.1);color:var(--brand);}
.custom-select-menu a.selected::after{
  content:'\f00c';font-family:'Font Awesome 6 Free';font-weight:900;margin-left:auto;padding-left:14px;font-size:.75rem;
}

/* Trigger sizing per context — matches what the plain <select> looked like
   in each place, so nothing shifts size when it's swapped in. */
.dash-toolbar-filters .custom-select-trigger{
  font-family:inherit;font-size:.85rem;font-weight:600;border:1px solid #edeef4;border-radius:30px;
  padding:10px 18px;background-color:#fff;color:var(--text);
}
.dash-toolbar-filters .custom-select-trigger:hover{border-color:#dcdfeb;}
.panel-head .custom-select-trigger{
  font-family:inherit;font-size:.8rem;border:1px solid #edeef4;border-radius:10px;
  padding:7px 12px;background-color:#fff;color:var(--text);
}
.panel-head .custom-select-trigger:hover{border-color:#dcdfeb;}
.form-group .custom-select-trigger{
  padding:13px 16px;border-radius:12px;border:1px solid #edeef4;background:#fff;
  font-family:inherit;font-size:.92rem;color:var(--text);width:100%;
}
.form-group .custom-select-trigger:hover{border-color:#dcdfeb;}
@media(max-width:480px){
  .custom-select-menu{max-width:240px;}
}

/* ---------- Date & time inputs: full width, touch-friendly in forms ----------
   Scoped to .form-group (Settings, Manual Entry, Advance, etc.) — loads
   after style.css, so this wins over its baseline .form-group input rule
   without needing !important. box-sizing keeps 100% width from overflowing
   once padding is applied; the 16px mobile font size stops iOS Safari from
   auto-zooming the page when the field is focused. Toolbar filter bars
   (Payment History, Audit Log) are a different context — a compact pill
   matching the filter select next to it, not a full-width form field — see
   .dash-toolbar-filters input[type="date"] below. */
.form-group input[type="date"],
.form-group input[type="time"]{
  width:100%;
  max-width:100%;
  min-height:44px;
  box-sizing:border-box;
}
@media(max-width:480px){
  .form-group input[type="date"],
  .form-group input[type="time"]{
    font-size:16px;
  }
}

/* ---------- Toolbar filter bar: date inputs ----------
   Matches .dash-toolbar-filters select right next to it — same pill shape,
   border and height — instead of falling back to the browser's bare,
   full-width default look. */
.dash-toolbar-filters input[type="date"]{
  font-family:inherit;font-size:.85rem;font-weight:600;border:1px solid #edeef4;border-radius:30px;
  padding:10px 18px;background-color:#fff;color:var(--text);cursor:pointer;
  width:auto;max-width:170px;box-sizing:border-box;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.dash-toolbar-filters input[type="date"]:hover{border-color:#dcdfeb;}
.dash-toolbar-filters input[type="date"]:focus{
  outline:none;border-color:var(--brand);box-shadow:0 0 0 4px rgba(109,40,217,.1);
}
@media(max-width:480px){
  .dash-toolbar-filters input[type="date"]{max-width:100%;width:100%;}
}

.employee-role{color:var(--muted);font-size:.85rem;margin-bottom:16px;}
.employee-meta{display:flex;flex-direction:column;gap:8px;padding-top:14px;border-top:1px solid var(--border);}
.employee-meta span{
  display:flex;align-items:center;gap:9px;font-size:.8rem;color:var(--muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.employee-meta i{width:14px;flex-shrink:0;color:var(--brand-2);}

/* ---------- Employee profile page ---------- */
.profile-top{display:flex;gap:20px;align-items:center;flex-wrap:wrap;margin-bottom:22px;}
.avatar-xl{
  width:74px;height:74px;border-radius:50%;background:var(--grad-2);color:#fff;display:flex;align-items:center;
  justify-content:center;font-weight:700;font-family:'Space Grotesk',sans-serif;font-size:1.4rem;flex-shrink:0;
}
.profile-top-info{flex:1;min-width:200px;}
.profile-top-info h2{font-size:1.3rem;font-weight:700;font-family:'Space Grotesk',sans-serif;margin-bottom:4px;}
.profile-top-info p{color:var(--muted);font-size:.9rem;margin-bottom:8px;}
.profile-meta-row{
  display:flex;flex-wrap:wrap;gap:18px;padding:16px 0;border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);margin-bottom:20px;
}
.profile-meta-row span{display:flex;align-items:center;gap:8px;font-size:.85rem;color:var(--muted);}
.profile-meta-row i{color:var(--brand-2);width:14px;text-align:center;}
.profile-quicklinks{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;}
.profile-quicklinks .quick-btn{text-decoration:none;}

.detail-section + .detail-section{margin-top:24px;padding-top:24px;border-top:1px solid var(--border);}
.detail-section h5{font-size:.74rem;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--muted);margin-bottom:14px;}
.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px 22px;}
.detail-item{display:flex;flex-direction:column;gap:4px;}
.detail-item span{font-size:.76rem;color:var(--muted);}
.detail-item strong{font-size:.9rem;font-weight:600;color:var(--text);word-break:break-word;}

/* ---------- Documents ---------- */
.doc-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.doc-card{
  display:flex;align-items:center;gap:14px;padding:16px;border:1px solid var(--border);border-radius:14px;
  background:var(--panel-2);transition:all .2s ease;
}
.doc-card:hover{border-color:var(--brand);background:#fff;}
.doc-card-icon{
  width:44px;height:44px;border-radius:12px;background:var(--grad);color:#fff;display:flex;align-items:center;
  justify-content:center;font-size:1.05rem;flex-shrink:0;
}
.doc-card-body{flex:1;min-width:0;}
.doc-card-body h4{font-size:.92rem;font-weight:700;margin-bottom:5px;}
.doc-card-body p{font-size:.76rem;color:var(--muted);}
.doc-card-action{
  width:36px;height:36px;border-radius:10px;border:1px solid var(--border);background:#fff;display:flex;
  align-items:center;justify-content:center;color:var(--muted);flex-shrink:0;transition:all .2s;
}
.doc-card-action:hover{border-color:var(--brand);color:var(--brand);}

/* ---------- Offer letter ---------- */
.letter-paper{
  background:#fff;border:1px solid var(--border);border-radius:16px;padding:50px 60px;max-width:780px;
  margin:0 auto;box-shadow:0 10px 40px -18px rgba(20,20,50,.12);font-size:.95rem;line-height:1.8;color:var(--text);
}
.letter-letterhead{
  display:flex;align-items:center;justify-content:space-between;padding-bottom:20px;
  border-bottom:2px solid var(--brand);margin-bottom:28px;gap:16px;flex-wrap:wrap;
}
.letter-letterhead-brand{display:flex;align-items:center;gap:12px;}
.letter-letterhead-brand img{width:44px;height:44px;border-radius:10px;}
.letter-letterhead-brand strong{display:block;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:1.1rem;}
.letter-letterhead-brand span{font-size:.72rem;color:var(--muted);}
.letter-meta{text-align:right;font-size:.82rem;color:var(--muted);}
.letter-paper h3{font-family:'Space Grotesk',sans-serif;font-size:1.05rem;margin:26px 0 12px;}
.letter-paper p{margin-bottom:14px;}
.letter-table{width:100%;border-collapse:collapse;margin:16px 0;}
.letter-table td{padding:8px 0;border-bottom:1px solid var(--border);font-size:.9rem;}
.letter-table td:last-child{text-align:right;font-weight:600;}
.letter-signature{margin-top:44px;}
.letter-signature .sig-line{width:180px;border-top:1px solid var(--text);margin-bottom:8px;margin-top:40px;}
@media print{
  .dash-sidebar, .dash-topbar, .dash-toast, .dash-toolbar{display:none !important;}
  .dash-main{margin-left:0 !important;}
  .dash-content{padding:0 !important;}
  .letter-paper{box-shadow:none;border:none;}
}

/* ---------- Salary ---------- */
.salary-summary{display:grid;grid-template-columns:1fr 1fr;gap:28px;}
.salary-col h5{font-size:.74rem;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--muted);margin-bottom:14px;}
.salary-row{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--border);font-size:.88rem;}
.salary-row:last-child{border-bottom:0;}
.salary-total{
  display:flex;justify-content:space-between;padding-top:16px;margin-top:8px;border-top:2px solid var(--border);
  font-weight:700;font-size:.98rem;
}
.salary-net-card{
  background:var(--grad);color:#fff;border-radius:16px;padding:22px 26px;margin-top:24px;display:flex;
  justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;
}
.salary-net-card span{font-size:.82rem;opacity:.85;display:block;margin-bottom:4px;}
.salary-net-card strong{font-size:1.6rem;font-family:'Space Grotesk',sans-serif;}

/* ---------- Payroll letterhead summary ----------
   Same layout/numbers as the Download PDF / Export Excel files (see
   PayrollController::resolveExportRows() and payroll/pdf.blade.php) —
   shown live on the Payroll page too, below the Salary List table. */
.payroll-letterhead{padding:26px 28px;}
.payroll-letterhead-top{
  display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:16px;
  padding-bottom:16px;border-bottom:2px solid var(--brand);margin-bottom:20px;
}
.payroll-letterhead-company{display:flex;align-items:flex-start;gap:10px;}
.payroll-letterhead-company img{width:34px;height:34px;border-radius:8px;flex-shrink:0;}
.payroll-letterhead-company h4{font-size:1rem;font-weight:700;color:var(--text);margin:0;}
.payroll-letterhead-company p{font-size:.78rem;color:var(--muted);margin:4px 0 0;line-height:1.5;}
.payroll-letterhead-title{text-align:right;}
.payroll-letterhead-title h3{margin:0;font-size:1.05rem;color:var(--brand);font-family:'Space Grotesk',sans-serif;}
.payroll-letterhead-title p{margin:3px 0 0;font-size:.78rem;color:var(--muted);}
.payroll-letterhead-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:22px;}
.payroll-letterhead-stat{border:1px solid var(--border);border-radius:12px;padding:16px;text-align:center;background:var(--bg-alt);}
.payroll-letterhead-stat .val{font-size:1.15rem;font-weight:700;color:var(--text);}
.payroll-letterhead-stat .lbl{font-size:.68rem;color:var(--muted);margin-top:5px;letter-spacing:.4px;text-transform:uppercase;}
.payroll-letterhead-totals{max-width:420px;margin-left:auto;}
.payroll-letterhead-totals .row{display:flex;justify-content:space-between;padding:8px 0;font-size:.86rem;color:var(--muted);border-bottom:1px solid var(--border);}
.payroll-letterhead-totals .row span:last-child{font-weight:600;color:var(--text);}
.payroll-letterhead-totals .row.grand{border-top:2px solid var(--brand);border-bottom:none;margin-top:4px;padding-top:14px;font-size:.95rem;}
.payroll-letterhead-totals .row.grand span:last-child{color:var(--brand);font-weight:700;}
@media (max-width:768px){
  .payroll-letterhead-stats{grid-template-columns:repeat(2,1fr);}
  .payroll-letterhead-title{text-align:left;}
}

/* ---------- Pagination ---------- */
.dash-pagination{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;margin-top:8px;}
.dash-pagination a, .dash-pagination span{
  min-width:38px;height:38px;padding:0 6px;display:inline-flex;align-items:center;justify-content:center;
  border-radius:10px;border:1px solid var(--border);color:var(--text);font-weight:600;font-size:.85rem;
  background:var(--panel);transition:all .2s;
}
.dash-pagination a:hover{border-color:var(--brand);color:var(--brand);}
.dash-pagination .active{background:var(--grad);color:#fff;border-color:transparent;}
.dash-pagination .disabled{opacity:.4;}

/* ---------- Responsive ---------- */
@media(max-width:1180px){
  .stat-grid{grid-template-columns:repeat(3,1fr);}
  .panel-row{grid-template-columns:1fr;}
  .bottom-row{grid-template-columns:1fr;}
  .employee-grid{grid-template-columns:1fr 1fr;}
  .profile-quicklinks{grid-template-columns:1fr 1fr;}
  .attn-summary{grid-template-columns:1fr 1fr;}
}
@media(max-width:900px){
  .dash-main{margin-left:0;}
  .dash-sidebar{
    bottom:0;z-index:150;transform:translateX(-100%);
    transition:transform .3s ease;box-shadow:0 0 60px rgba(0,0,0,.15);
  }
  .dash-sidebar.open{transform:translateX(0);}
  .dash-burger{display:flex;}
  .dash-search{display:none;}
  .stat-grid{grid-template-columns:1fr 1fr;}
  .dash-toolbar{flex-direction:column;align-items:stretch;}
  .dash-toolbar-filters{width:100%;}
  .dash-toolbar-filters .dash-search{display:flex;max-width:none !important;flex:1;}
  .dash-toolbar > a{align-self:flex-start;}
  .doc-grid{grid-template-columns:1fr;}
  .salary-summary{grid-template-columns:1fr;}
  .letter-paper{padding:36px 26px;}
}
@media(max-width:620px){
  .dash-content{padding:20px 16px 50px;}
  .dash-topbar{padding:14px 16px;}
  .stat-grid{grid-template-columns:1fr;}
  .dash-profile .who{display:none;}
  .employee-grid{grid-template-columns:1fr;}
  .profile-quicklinks{grid-template-columns:1fr;}
  .detail-grid{grid-template-columns:1fr;}
  .attn-summary{grid-template-columns:1fr;}
  .letter-letterhead{flex-direction:column;align-items:flex-start;}
  .letter-meta{text-align:left;}
  .checkinout-row{flex-direction:column;align-items:stretch;}
  /* .checkinout-col's flex-basis:220px is sized for the desktop side-by-
     side row; once the row above switches to a column, that same 220px
     basis applies to height instead of width, forcing each button's own
     column to be 220px tall and leaving a big empty gap under it. Reset
     it to auto here so each column is just as tall as its button. */
  .checkinout-col{flex:0 0 auto;min-width:0;}
  .checkinout-row form{width:100%;}
  .checkinout-time{order:3;}
}

/* ---------- Extra badge tones used by the Employee attendance calendar ---------- */
.badge.leave{color:#2563eb;background:rgba(37,99,235,.1);}
.badge.weekend{color:var(--muted);background:var(--panel-2);}
.badge.half-day{color:#7c3aed;background:rgba(124,58,237,.1);}
.badge.upcoming{color:var(--muted);background:var(--panel-2);}

/* ---------- My Attendance — mobile card list ----------
   Hidden on desktop (the table above is used instead); swaps in below the
   768px breakpoint. One card per day: colored left border + status pill
   mirror the same present/absent/leave/half-day/weekend palette used
   elsewhere, with "weekend" rendered as blue ("HO") per the requested look. */
.attn-card-list{display:none;flex-direction:column;gap:12px;}
.attn-card{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  background:#fff;border:1px solid var(--border);border-left:5px solid var(--muted);
  border-radius:14px;padding:16px 18px;box-shadow:0 1px 2px rgba(20,20,50,.04);
}
.attn-card.present{border-left-color:#22c55e;}
.attn-card.late{border-left-color:#d97706;}
.attn-card.absent{border-left-color:#ef4444;}
.attn-card.leave{border-left-color:#2563eb;}
.attn-card.half-day{border-left-color:#7c3aed;}
.attn-card.weekend{border-left-color:#1d4ed8;}
.attn-card.upcoming{border-left-color:#94a3b8;}
.attn-card.pending{border-left-color:#94a3b8;}
/* Editable variant (admin's per-employee monthly edit) — stacks the
   date/status row above a full-width row of status action buttons,
   instead of the default side-by-side read-only layout. */
.attn-card.editable{flex-direction:column;align-items:stretch;gap:12px;}
.attn-card-top{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.attn-card-main{display:flex;flex-direction:column;gap:4px;min-width:0;}
.attn-card-date{font-weight:700;font-size:.95rem;color:var(--text);}
.attn-card-sub{font-size:.82rem;color:var(--muted);}
.attn-card-side{display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex-shrink:0;}
.attn-card-pill{
  display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:26px;padding:0 12px;
  border-radius:20px;color:#fff;font-weight:700;font-size:.76rem;letter-spacing:.3px;
}
.attn-card-pill.present{background:#22c55e;}
.attn-card-pill.late{background:#d97706;}
.attn-card-pill.absent{background:#ef4444;}
.attn-card-pill.leave{background:#2563eb;}
.attn-card-pill.half-day{background:#7c3aed;}
.attn-card-pill.weekend{background:#1d4ed8;}
.attn-card-pill.upcoming{background:#94a3b8;}
.attn-card-hours{font-size:.75rem;font-weight:700;color:var(--text);white-space:nowrap;}

@media(max-width:768px){
  .attn-table-wrap{display:none;}
  .attn-card-list{display:flex;}
}

/* ---------- Approvals page: mobile-only summary tiles ----------
   Approved/Rejected running totals for the selected category, shown only
   on narrow screens above the tabs — the desktop table already has room
   for the same numbers via the stat cards elsewhere, so these stay hidden
   there rather than duplicating them. */
.approvals-mobile-stats{display:none;}
@media(max-width:768px){
  .approvals-mobile-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px;}
}
.mini-stat{
  display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:14px;
  background:#fff;border:1px solid var(--border);
}
.mini-stat-icon{
  width:34px;height:34px;border-radius:10px;flex-shrink:0;color:#fff;font-size:.85rem;
  display:flex;align-items:center;justify-content:center;
}
.mini-stat.approved .mini-stat-icon{background:linear-gradient(135deg,#22c55e,#0a9d5c);}
.mini-stat.rejected .mini-stat-icon{background:linear-gradient(135deg,#f87171,#d6304a);}
.mini-stat-value{font-size:1.15rem;font-weight:700;font-family:'Space Grotesk',sans-serif;line-height:1;}
.mini-stat-label{font-size:.72rem;color:var(--muted);margin-top:2px;}

/* ---------- Admin data tables -> mobile card list ----------
   Today's Attendance, Monthly Attendance and Payroll each render their
   rows twice (table + these cards); .attn-table-wrap/.attn-card-list
   above already handle showing only one at the 768px breakpoint — these
   are just the card's own look, one per employee. */
.data-card{
  border:1px solid var(--border);border-radius:16px;padding:16px;background:#fff;
  box-shadow:0 1px 2px rgba(20,20,50,.04);
}
.data-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:14px;}
.data-card-head .emp-cell{min-width:0;}
.data-card-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px 14px;}
.data-card-grid.cols-3{grid-template-columns:repeat(3,1fr);}
.data-card-item{min-width:0;}
.data-card-label{display:block;font-size:.64rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;margin-bottom:4px;}
.data-card-value{font-size:.86rem;font-weight:600;color:var(--text);}
.data-card-foot{display:flex;align-items:center;justify-content:flex-end;gap:10px;margin-top:14px;padding-top:14px;border-top:1px solid var(--border);}

/* ---------- Tables with live row controls -> mobile card stacking ----------
   Used by Manual Entry and every Masters list (Departments, Designations,
   Roles, Shifts, Leave Types, Holidays, Document Types, Deduction Types) —
   all of them have real per-row form controls (checkboxes, Edit/Delete
   forms) that duplicating into separate card markup would risk
   double-submitting or losing sync with. Below 768px each row restacks
   into a plain card instead, same real <table>, no second copy of the
   markup. Manual Entry's columns are self-evident without labels (name,
   then muted code/department); Masters rows add a data-label attribute
   per <td> instead, shown via ::before, since a bare "ENG" or "12" reads
   fine in a table column header but not floating alone in a stacked card. */
@media(max-width:768px){
  /* .dash-table's own min-width:640px (for the desktop table's columns)
     is exactly what was forcing a horizontal scrollbar here even after
     restacking to cards — a 640px-wide "card" on a ~360px phone. */
  .dash-table.responsive-cards{width:100%;min-width:0;}
  .manual-entry-scroll, .responsive-scroll{overflow-x:visible;}
  .dash-table.responsive-cards thead{display:none;}
  .dash-table.responsive-cards, .dash-table.responsive-cards tbody,
  .dash-table.responsive-cards tr, .dash-table.responsive-cards td{display:block;width:100%;}
  .dash-table.responsive-cards tr{
    border:1px solid var(--border);border-radius:14px;padding:14px 16px;margin-bottom:12px;background:#fff;
  }
  .dash-table.responsive-cards td{border:none;padding:4px 0;font-size:.85rem;}
  .dash-table.responsive-cards td:first-child{padding-top:0;padding-bottom:8px;}
  .dash-table.responsive-cards .manual-code-cell,
  .dash-table.responsive-cards .manual-dept-cell{color:var(--muted);font-size:.8rem;}
  .dash-table.responsive-cards td:last-child{padding-top:10px;}
  .dash-table.responsive-cards .manual-actions{justify-content:flex-start;}
  .dash-table.responsive-cards td[data-label]::before{
    content:attr(data-label) ": ";font-weight:700;color:var(--muted);margin-right:5px;
  }
}

/* ---------- Month navigator (My Attendance / View All prev-next) ----------
   A compact, self-sized pill (not a full-width toolbar) so the arrows and
   label sit tightly centered together instead of floating in empty space.
   Arrows use the brand gradient for color; the disabled end (no earlier
   months than joining, no months past the current one) turns flat gray
   and un-clickable rather than just being hidden. */
.month-nav{
  display:flex;align-items:center;justify-content:center;gap:14px;background:var(--panel);border:1px solid var(--border);
  border-radius:40px;padding:8px 14px;box-shadow:0 4px 18px -10px rgba(20,20,50,.08);
  width:100%;
}
.month-nav-label{min-width:130px;text-align:center;font-size:.92rem;font-weight:700;color:var(--text);}
.month-nav-btn{
  width:36px;height:36px;border-radius:50%;flex-shrink:0;border:none;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;line-height:1;
  background:var(--grad);color:#fff;font-size:.85rem;
  transition:transform .2s ease, box-shadow .2s ease;
}
.month-nav-btn:hover{transform:translateY(-2px) scale(1.06);box-shadow:0 10px 22px -8px rgba(109,40,217,.5);}
.month-nav-btn.disabled{
  background:var(--panel-2);color:var(--muted);cursor:not-allowed;pointer-events:none;box-shadow:none;transform:none;
}

/* =====================================================================
   Auth pages (login / forgot / reset / change password) — both guards.
   Full-height split screen: a branded panel on the left, the form panel
   filling the rest of the viewport on the right. Collapses to a single
   full-width form panel on narrow screens.
   ===================================================================== */
.auth-shell{
  min-height:100vh;display:flex;
}
.auth-brand{
  position:relative;overflow:hidden;flex:0 0 42%;max-width:560px;
  background:linear-gradient(155deg,var(--brand) 0%,#3b1470 100%);
  color:#fff;padding:56px 48px;display:flex;flex-direction:column;
}
.auth-brand::before,.auth-brand::after{
  content:'';position:absolute;border-radius:50%;background:rgba(255,255,255,.08);
  pointer-events:none;
}
.auth-brand::before{width:420px;height:420px;top:-140px;right:-160px;}
.auth-brand::after{width:320px;height:320px;bottom:-120px;left:-100px;background:rgba(255,255,255,.06);}
.auth-brand-logo{position:relative;z-index:1;display:flex;align-items:center;gap:10px;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:1.15rem;color:#fff;}
.auth-brand-logo .logo-mark{width:38px;height:38px;border-radius:10px;background:#fff;padding:4px;}
.auth-brand-logo span.sub{display:block;font-size:.68rem;font-weight:600;color:rgba(255,255,255,.72);letter-spacing:.4px;text-transform:uppercase;}
.auth-brand-mid{position:relative;z-index:1;margin:auto 0;padding:48px 0;}
.auth-brand-mid h2{font-family:'Space Grotesk',sans-serif;font-size:1.9rem;font-weight:700;line-height:1.3;margin-bottom:14px;max-width:380px;}
.auth-brand-mid p{font-size:.95rem;color:rgba(255,255,255,.78);line-height:1.65;max-width:380px;}
.auth-brand-features{list-style:none;margin-top:30px;display:flex;flex-direction:column;gap:14px;}
.auth-brand-features li{display:flex;align-items:center;gap:12px;font-size:.85rem;color:rgba(255,255,255,.85);}
.auth-brand-features li i{width:32px;height:32px;flex:0 0 32px;border-radius:10px;background:rgba(255,255,255,.14);display:flex;align-items:center;justify-content:center;font-size:.85rem;}
.auth-brand-foot{position:relative;z-index:1;font-size:.75rem;color:rgba(255,255,255,.55);}

.auth-panel{
  flex:1;min-width:0;display:flex;align-items:center;justify-content:center;
  padding:40px 24px;overflow-y:auto;background:var(--bg-alt);
}
.auth-card{width:100%;max-width:100%;}
.auth-logo-mobile{display:none;}
.auth-logo{display:flex;align-items:center;gap:10px;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:1.15rem;color:var(--text);margin-bottom:22px;}
.auth-logo .logo-mark{width:38px;height:38px;border-radius:10px;}
.auth-logo span.sub{display:block;font-size:.68rem;font-weight:600;color:var(--muted);letter-spacing:.4px;text-transform:uppercase;}
.auth-heading{margin-bottom:22px;}
.auth-heading h1{font-size:1.3rem;font-weight:700;margin-bottom:4px;}
.auth-heading p{font-size:.88rem;color:var(--muted);}
.auth-form{display:flex;flex-direction:column;gap:16px;}
.auth-field-wrap{position:relative;display:block;width:100%;}
.auth-field-wrap input{width:100%;padding-right:44px;}
.auth-field-wrap.has-icon input{padding-left:44px;}
.auth-field-icon{
  position:absolute;left:4px;top:50%;transform:translateY(-50%);
  width:32px;height:32px;display:flex;align-items:center;justify-content:center;
  color:var(--muted);pointer-events:none;font-size:.9rem;
}
.auth-pw-toggle{
  position:absolute;right:4px;top:50%;transform:translateY(-50%);background:none;border:none;
  color:var(--muted);cursor:pointer;padding:8px;font-size:.9rem;
}
.auth-pw-toggle:hover{color:var(--brand);}
.auth-row-between{display:flex;align-items:center;justify-content:space-between;font-size:.85rem;}
.auth-remember{display:flex;align-items:center;gap:8px;color:var(--muted);}
.auth-remember input{width:auto;}
.auth-link{color:var(--brand);font-weight:600;}
.auth-link:hover{text-decoration:underline;}
.auth-footer-links{margin-top:20px;text-align:center;font-size:.85rem;color:var(--muted);}
.auth-note{
  margin-top:18px;padding:12px 14px;border-radius:12px;background:var(--panel-2);
  font-size:.8rem;color:var(--muted);line-height:1.5;
}

@media (max-width:960px){
  .auth-brand{display:none;}
  .auth-logo-mobile{display:flex;}
}

/* Desktop only: leave breathing room on both sides of the form instead of
   letting it stretch edge-to-edge of the panel. Mobile (<=960px) stays
   full width. */
@media (min-width:961px){
  .auth-card{max-width:480px;}
}

/* =====================================================================
   Master Admin layout — same shell system as the company dashboard
   (dash-shell/dash-sidebar/dash-nav), its own colour accent only via the
   existing --brand token, so it reads as one product, two personas.
   ===================================================================== */
.master-badge{
  display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:20px;
  background:rgba(109,40,217,.1);color:var(--brand);font-size:.72rem;font-weight:700;
  letter-spacing:.4px;text-transform:uppercase;
}