/* ============================================================
   STAFF SCHEDULER PRO — PREMIUM DESIGN SYSTEM
   Emil Kowalski × Taste × Impeccable
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300..800;1,300..800&display=swap');

/* Self-hosted icon font — avoids a render-blocking Google Fonts request on every page navigation */
@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url('/fonts/material-symbols-outlined.woff2') format('woff2');
}

/* ── Tokens ─────────────────────────────────────────────── */
:root {
  --ink:       #0f172a;
  --ink-2:     #475569;
  --ink-3:     #94a3b8;
  --surface:   #ffffff;
  --bg:        #f8fafc;
  --bg-2:      #f1f5f9;
  --border:    #e2e8f0;
  --border-2:  #cbd5e1;

  --accent:        #1a5c42;
  --accent-hover:  #144d37;
  --accent-light:  #e8f5ee;
  --accent-text:   #1a5c42;

  --success:       #059669;
  --success-bg:    #d1fae5;
  --warning:       #d97706;
  --warning-bg:    #fef3c7;
  --danger:        #dc2626;
  --danger-bg:     #fee2e2;

  /* Motion curves (Emil Kowalski) */
  --ease-out:     cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out:  cubic-bezier(0.77, 0, 0.175, 1);
  --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);

  --dur-fast:    140ms;
  --dur-normal:  220ms;
  --dur-slow:    320ms;
}

/* ── Base ───────────────────────────────────────────────── */
*, *::before, *::after {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}
/* Preserve icon font */
.ico, [class*="material"] {
  font-family: 'Material Symbols Outlined' !important;
}
/* Re-open selector for remaining base rules */
*, *::before, *::after {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  box-sizing: border-box;
}

html, body {
  background: var(--bg) !important;
  color: var(--ink) !important;
}

/* Scroll-lock only applies to pages with the manager shell (sidebar + #mgr-data
   internal scroll). Employee pages have no such container and rely on normal
   body scrolling, so they must NOT be locked. */
html:has(main.mgr-main), body:has(main.mgr-main) {
  height: 100% !important;
  height: 100dvh !important;
  overflow: hidden !important;
}

/* Manager layout: sidebar fixed, main = flex column, only data area scrolls */
main.mgr-main {
  display: flex !important;
  flex-direction: column !important;
  height: 100vh !important;
  height: 100dvh !important;
  overflow: hidden !important;
  min-height: unset !important;
}

#mgr-data {
  flex: 1 !important;
  overflow-y: auto !important;
  min-height: 0 !important;
}


/* ── Buttons — tactile press feedback ──────────────────── */
.btn {
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  border-radius: 10px !important;
  transition:
    transform var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out),
    background var(--dur-fast) ease,
    border-color var(--dur-fast) ease !important;
  will-change: transform;
}
.btn:active {
  transform: scale(0.96) !important;
}

/* Primary */
.bp {
  background: var(--accent) !important;
  box-shadow: 0 1px 2px rgba(26,92,66,.18), inset 0 1px 0 rgba(255,255,255,.08) !important;
}
.bp:hover {
  background: var(--accent-hover) !important;
  box-shadow: 0 3px 10px rgba(26,92,66,.28), inset 0 1px 0 rgba(255,255,255,.08) !important;
}

/* Danger */
.bd {
  background: var(--danger) !important;
  box-shadow: 0 1px 2px rgba(220,38,38,.15) !important;
}
.bd:hover {
  background: #b91c1c !important;
}

/* Success */
.bs {
  background: var(--success) !important;
}
.bs:hover {
  background: #047857 !important;
}

/* Ghost/Blue tint */
.bg {
  background: var(--accent-light) !important;
  color: var(--accent-text) !important;
}
.bg:hover {
  background: #dbeafe !important;
}

/* Outline */
.bo {
  background: white !important;
  color: var(--ink-2) !important;
  border: 1.5px solid var(--border) !important;
  box-shadow: 0 1px 2px rgba(15,23,42,.04) !important;
}
.bo:hover {
  background: var(--bg) !important;
  border-color: var(--border-2) !important;
  color: var(--ink) !important;
}

/* ── Inputs ─────────────────────────────────────────────── */
.inp {
  border: 1.5px solid var(--border) !important;
  border-radius: 10px !important;
  color: var(--ink) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  background: white !important;
  transition:
    border-color var(--dur-normal) ease,
    box-shadow var(--dur-normal) ease !important;
}
.inp:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(26,92,66,.12) !important;
  outline: none !important;
}
.inp::placeholder {
  color: var(--ink-3) !important;
  font-weight: 400 !important;
}
select.inp {
  cursor: pointer !important;
}

/* ── Labels ─────────────────────────────────────────────── */
.lbl {
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  color: var(--ink-2) !important;
}

/* ── Cards ──────────────────────────────────────────────── */
.card {
  background: white !important;
  border-radius: 14px !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 1px 3px rgba(15,23,42,.06) !important;
}

/* ── Badges ─────────────────────────────────────────────── */
.badge {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  padding: 3px 9px !important;
  border-radius: 99px !important;
}
.bg-g { background: var(--success-bg) !important; color: #065f46 !important; }
.bg-y { background: var(--warning-bg) !important; color: #92400e !important; }
.bg-b { background: var(--accent-light) !important; color: var(--accent-text) !important; }
.bg-r { background: var(--danger-bg) !important; color: #991b1b !important; }

/* ── Tables ─────────────────────────────────────────────── */
table { border-collapse: collapse !important; }
thead th {
  background: var(--bg) !important;
  color: var(--ink-3) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  padding: 10px 16px !important;
  border-bottom: 1.5px solid var(--border) !important;
}
tbody td {
  border-bottom: 1px solid var(--bg-2) !important;
  padding: 12px 16px !important;
  font-size: 14px !important;
  color: var(--ink) !important;
  vertical-align: middle !important;
  transition: background var(--dur-fast) ease !important;
}
tbody tr:last-child td { border-bottom: none !important; }
tbody tr:hover td { background: var(--bg) !important; }

/* ── Modals — smooth entrance ───────────────────────────── */
.modal-bg.open {
  animation: modal-scrim-in var(--dur-normal) ease forwards;
}
@keyframes modal-scrim-in {
  from { background: rgba(0,0,0,0); }
  to   { background: rgba(15,23,42,.5); }
}
.modal-bg.open .modal-box {
  animation: modal-box-in var(--dur-slow) var(--ease-out) forwards;
}
@keyframes modal-box-in {
  from { opacity: 0; transform: scale(0.96) translateY(10px); }
  to   { opacity: 1; transform: scale(1)    translateY(0);    }
}
.modal-box {
  border-radius: 20px !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  box-shadow:
    0 24px 64px rgba(15,23,42,.22),
    0 1px 0 rgba(255,255,255,.04) !important;
}

/* Modal header */
.mh { border-bottom: 1px solid var(--bg-2); padding-bottom: 16px !important; margin-bottom: 20px !important; }
.mt { font-size: 17px !important; font-weight: 700 !important; letter-spacing: -0.02em !important; color: var(--ink) !important; }
.xb { color: var(--ink-3) !important; transition: color var(--dur-fast) ease !important; }
.xb:hover { color: var(--ink-2) !important; }

/* ── Sidebar refinements ────────────────────────────────── */
aside.mgr-sidebar {
  background: white !important;
  border-right: 1px solid var(--border) !important;
}
aside.mgr-sidebar nav a {
  font-weight: 500 !important;
  letter-spacing: -0.01em !important;
  border-radius: 10px !important;
  transition: background var(--dur-fast) ease, color var(--dur-fast) ease !important;
}
aside.mgr-sidebar nav a:hover {
  background: var(--bg) !important;
  color: var(--ink) !important;
}
aside.mgr-sidebar nav a[style*="background:#dee0ff"],
aside.mgr-sidebar nav a[style*="background: #dee0ff"],
aside.mgr-sidebar nav a[style*="background:#e8f5ee"],
aside.mgr-sidebar nav a[style*="background: #e8f5ee"] {
  background: var(--accent-light) !important;
  color: var(--accent) !important;
  font-weight: 700 !important;
}

/* ── Mobile top bar ─────────────────────────────────────── */
.mob-top-bar {
  background: white !important;
  border-bottom: 1px solid var(--border) !important;
  box-shadow: 0 1px 4px rgba(15,23,42,.05) !important;
}
.mob-top-bar .mob-title {
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  color: var(--ink) !important;
}

/* ── Bottom nav (employee) ──────────────────────────────── */
nav[style*="position:fixed;bottom:0"] {
  background: white !important;
  border-top: 1px solid var(--border) !important;
  box-shadow: 0 -1px 0 var(--border), 0 -8px 24px rgba(15,23,42,.05) !important;
}
nav[style*="position:fixed;bottom:0"] a {
  transition: transform var(--dur-fast) var(--ease-out), color var(--dur-fast) ease !important;
}
nav[style*="position:fixed;bottom:0"] a:active {
  transform: scale(0.88) !important;
}

/* ── Spin ───────────────────────────────────────────────── */
.spin {
  border-top-color: var(--accent) !important;
  border-color: var(--bg-2) !important;
  border-top-color: var(--accent) !important;
}

/* ── Toast — slide up with fade ─────────────────────────── */
#_toast {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  letter-spacing: -0.01em !important;
  border-radius: 24px !important;
  padding: 12px 20px !important;
  box-shadow: 0 4px 24px rgba(15,23,42,.18) !important;
  animation: toast-up 220ms var(--ease-out) forwards !important;
}
@keyframes toast-up {
  from { opacity: 0; transform: translateX(-50%) translateY(12px) scale(0.96); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0)    scale(1);    }
}

/* ── Stagger for table rows ─────────────────────────────── */
tbody tr {
  animation: row-fade-in 280ms var(--ease-out) both;
}
tbody tr:nth-child(1)  { animation-delay:   0ms; }
tbody tr:nth-child(2)  { animation-delay:  30ms; }
tbody tr:nth-child(3)  { animation-delay:  60ms; }
tbody tr:nth-child(4)  { animation-delay:  90ms; }
tbody tr:nth-child(5)  { animation-delay: 120ms; }
tbody tr:nth-child(6)  { animation-delay: 150ms; }
tbody tr:nth-child(7)  { animation-delay: 180ms; }
tbody tr:nth-child(8)  { animation-delay: 210ms; }
tbody tr:nth-child(9)  { animation-delay: 240ms; }
tbody tr:nth-child(10) { animation-delay: 270ms; }
@keyframes row-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0);   }
}

/* ── Cards stagger on employee pages ────────────────────── */
.card {
  animation: card-fade-in 300ms var(--ease-out) both;
}
@keyframes card-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0);   }
}

/* ── Scrollbar ──────────────────────────────────────────── */
::-webkit-scrollbar       { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--ink-3); }

/* ── Shift pills (schedule) ─────────────────────────────── */
.shift-pill {
  transition: opacity var(--dur-fast) ease, transform var(--dur-fast) var(--ease-out) !important;
}
.shift-pill:hover {
  opacity: .88 !important;
  transform: translateY(-1px) !important;
}
.shift-pill:active {
  transform: scale(0.97) translateY(0) !important;
  opacity: 1 !important;
}

/* ── Search inputs ─────────────────────────────────────── */
input[type="search"],
input[placeholder*="Search"],
input[placeholder*="search"],
input[placeholder*="Filter"],
#search-inp {
  transition:
    border-color var(--dur-normal) ease,
    box-shadow var(--dur-normal) ease,
    width var(--dur-slow) var(--ease-out) !important;
}

/* ── Headings ───────────────────────────────────────────── */
h1 {
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
}
h2, h3 {
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
}

/* ── Sidebar brand icon — override old hardcoded blue ──── */
aside.mgr-sidebar [style*="background:#0030c4"] {
  background: var(--accent) !important;
  box-shadow: 0 2px 10px rgba(26,92,66,.35) !important;
}

/* ── Role badge — override JS-injected inline colors ────── */
#co-role {
  background: var(--accent-light) !important;
  color: var(--accent) !important;
  border-radius: 5px !important;
  padding: 2px 8px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  display: inline-block !important;
}

/* ── Sign Out — muted until hover ───────────────────────── */
aside.mgr-sidebar a[style*="color:#dc2626"],
aside.mgr-sidebar a[href*="login"][style*="color"] {
  color: var(--ink-3) !important;
  transition: color var(--dur-fast) ease !important;
}
aside.mgr-sidebar a[style*="color:#dc2626"]:hover {
  color: var(--danger) !important;
}

/* ── Sidebar — richer feel ───────────────────────────────── */
aside.mgr-sidebar {
  background: #fafcfb !important;
  border-right: 1px solid var(--border) !important;
}
aside.mgr-sidebar > div:first-child {
  border-bottom: 1px solid var(--border) !important;
}

/* ── Page header ─────────────────────────────────────────── */
main h1[style*="font-size:24px"] {
  font-size: 22px !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
  color: var(--ink) !important;
}

/* ── Stat card number ────────────────────────────────────── */
[style*="font-size:28px;font-weight:800"] {
  font-size: 32px !important;
  letter-spacing: -0.04em !important;
  color: var(--ink) !important;
  line-height: 1 !important;
}

/* ── Dashboard action links — harmonise colors ───────────── */
[style*="background:#fef3c7"] {
  background: #fdf6e3 !important;
  border: 1px solid #e8d99a !important;
  color: #6b4c0c !important;
}
[style*="background:#ede9fe"] {
  background: #eef2f7 !important;
  border: 1px solid #c5d0e0 !important;
  color: #1e3a5f !important;
}
[style*="background:#fef3c7"] .ico,
[style*="background:#fef3c7"] span {
  color: #78500a !important;
}
[style*="background:#ede9fe"] .ico,
[style*="background:#ede9fe"] span {
  color: #1e3a5f !important;
}

/* ── Sidebar nav active state (green-tinted) ─────────────── */
aside.mgr-sidebar nav a[style*="background:#dee0ff"],
aside.mgr-sidebar nav a[style*="background: #dee0ff"] {
  background: var(--accent-light) !important;
  color: var(--accent) !important;
  font-weight: 700 !important;
}

/* ── Bottom nav employee active links ────────────────────── */
nav[style*="position:fixed;bottom:0"] a[style*="color:#0030c4"] {
  color: var(--accent) !important;
}

/* ── Primary button old-blue override ───────────────────── */
[style*="background:#0030c4"]:not(aside *) {
  background: var(--accent) !important;
}
[style*="background:#0026a0"] {
  background: var(--accent-hover) !important;
}

/* ═══════════════════════════════════════════════════════════
   DARK FOREST SIDEBAR — The signature design statement
   ═══════════════════════════════════════════════════════════ */

aside.mgr-sidebar {
  background: #0d1f17 !important;
  border-right: none !important;
  box-shadow: 1px 0 0 rgba(255,255,255,.04), 4px 0 28px rgba(0,0,0,.2) !important;
}
aside.mgr-sidebar > div:first-child {
  border-bottom: 1px solid rgba(255,255,255,.07) !important;
  background: transparent !important;
}
#co-name {
  color: #fff !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
}
#co-role {
  background: rgba(26,92,66,.6) !important;
  color: rgba(134,210,172,.95) !important;
  border: 1px solid rgba(134,210,172,.18) !important;
  border-radius: 5px !important;
  padding: 2px 7px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  display: inline-block !important;
}
aside.mgr-sidebar [style*="background:#0030c4"],
aside.mgr-sidebar [style*="background: #0030c4"] {
  background: rgba(26,92,66,.85) !important;
  box-shadow: 0 2px 10px rgba(26,92,66,.4) !important;
}
aside.mgr-sidebar nav a {
  color: rgba(255,255,255,.42) !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em !important;
  border-radius: 10px !important;
  transition:
    background 110ms ease,
    color 110ms ease,
    transform 110ms cubic-bezier(.23,1,.32,1) !important;
}
aside.mgr-sidebar nav a .ico {
  color: inherit !important;
  opacity: .65 !important;
  transition: opacity 110ms ease !important;
}
aside.mgr-sidebar nav a:hover {
  background: rgba(255,255,255,.07) !important;
  color: rgba(255,255,255,.88) !important;
  transform: translateX(2px) !important;
}
aside.mgr-sidebar nav a:hover .ico { opacity: 1 !important; }

aside.mgr-sidebar nav a[style*="background:#dee0ff"],
aside.mgr-sidebar nav a[style*="background: #dee0ff"],
aside.mgr-sidebar nav a[style*="background:#e8f5ee"],
aside.mgr-sidebar nav a[style*="background: #e8f5ee"] {
  background: rgba(26,92,66,.72) !important;
  color: #fff !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 12px rgba(26,92,66,.45) !important;
  transform: none !important;
}
aside.mgr-sidebar nav a[style*="background:#dee0ff"] .ico,
aside.mgr-sidebar nav a[style*="background:#e8f5ee"] .ico {
  opacity: 1 !important;
  color: rgba(134,210,172,.9) !important;
}

/* Sign Out — muted, danger on hover */
aside.mgr-sidebar a[style*="color:#dc2626"],
aside.mgr-sidebar a[href*="login"] {
  color: rgba(255,255,255,.2) !important;
  transition: color 130ms ease !important;
}
aside.mgr-sidebar a[style*="color:#dc2626"]:hover,
aside.mgr-sidebar a[href*="login"]:hover {
  color: rgba(248,113,113,.75) !important;
}

/* Mobile top bar — matches dark sidebar */
.mob-top-bar {
  background: #0d1f17 !important;
  border-bottom: none !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.06), 0 4px 20px rgba(0,0,0,.22) !important;
}
.mob-top-bar .mob-title { color: #fff !important; }
.mob-ham span { background: rgba(255,255,255,.6) !important; }

/* ═══════════════════════════════════════════════════════════
   MANAGER MAIN — Premium content area
   ═══════════════════════════════════════════════════════════ */

body { background: #f4f8f5 !important; }
main.mgr-main { background: #f4f8f5 !important; }

.card {
  background: #fff !important;
  border: 1px solid #e2ece6 !important;
  box-shadow: 0 1px 2px rgba(13,31,23,.04), 0 4px 20px rgba(13,31,23,.05) !important;
  border-radius: 12px !important;
}

/* Primary button — depth + lift */
.bp {
  background: #1a5c42 !important;
  box-shadow:
    0 1px 3px rgba(13,31,23,.25),
    inset 0 1px 0 rgba(255,255,255,.15) !important;
  letter-spacing: -0.01em !important;
}
.bp:hover {
  background: #144d37 !important;
  box-shadow:
    0 4px 18px rgba(26,92,66,.42),
    inset 0 1px 0 rgba(255,255,255,.15) !important;
  transform: translateY(-1px) !important;
}
.bp:active {
  transform: scale(0.96) !important;
  box-shadow: 0 1px 4px rgba(13,31,23,.2) !important;
}

/* Tables */
thead th {
  background: #f4f8f5 !important;
  color: #6b8a76 !important;
  border-bottom: 1.5px solid #e2ece6 !important;
}
tbody tr:hover td { background: #f0f8f4 !important; }

/* Outline button */
.bo {
  background: #fff !important;
  border: 1.5px solid #d4e4da !important;
  color: #2d4a3e !important;
  box-shadow: 0 1px 2px rgba(13,31,23,.04) !important;
}
.bo:hover {
  background: #f4f8f5 !important;
  border-color: #b8d4c4 !important;
  color: #0d1f17 !important;
}

/* ═══════════════════════════════════════════════════════════
   STAT CARDS — Large numbers, subtle tinted backgrounds
   ═══════════════════════════════════════════════════════════ */

.stat-card-num {
  font-size: 44px !important;
  font-weight: 800 !important;
  letter-spacing: -0.05em !important;
  line-height: 1 !important;
  color: #0d1f17 !important;
}
.stat-card-label {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
}

/* ═══════════════════════════════════════════════════════════
   EMPLOYEE APP — Clean, emotional, tactile
   ═══════════════════════════════════════════════════════════ */

/* Punch clock — dramatic */
#live-clock {
  font-size: 72px !important;
  font-weight: 800 !important;
  letter-spacing: -0.05em !important;
  color: #0d1f17 !important;
  line-height: 1 !important;
  font-variant-numeric: tabular-nums !important;
}
#p-sub {
  font-size: 15px !important;
  color: #6b8a76 !important;
  font-weight: 500 !important;
  margin-top: 8px !important;
}
#elapsed {
  color: var(--accent) !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  letter-spacing: -0.03em !important;
  margin-top: 6px !important;
}
#p-btn {
  border-radius: 14px !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  padding: 18px 40px !important;
  margin-top: 24px !important;
  transition:
    transform 140ms cubic-bezier(.23,1,.32,1),
    box-shadow 140ms ease !important;
  box-shadow: 0 4px 20px rgba(26,92,66,.35) !important;
  will-change: transform !important;
}
#p-btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 28px rgba(26,92,66,.45) !important;
}
#p-btn:active {
  transform: scale(0.96) translateY(0) !important;
  box-shadow: 0 2px 8px rgba(26,92,66,.3) !important;
}
/* Location banner */
#loc-banner {
  background: var(--accent) !important;
  box-shadow: none !important;
}
/* Punch page shift card header */
[style*="background:#0030c4"][style*="padding:10px 16px"] {
  background: #0d1f17 !important;
}
/* Quick action card hover */
.card[href] {
  transition:
    transform 140ms cubic-bezier(.23,1,.32,1),
    box-shadow 140ms ease !important;
  cursor: pointer !important;
}
.card[href]:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 24px rgba(13,31,23,.1) !important;
}
.card[href]:active {
  transform: scale(0.97) !important;
}
/* Employee quick action icons — all green */
.card[href] .ico {
  color: var(--accent) !important;
}

/* Bottom nav — refined */
nav[style*="position:fixed;bottom:0"] {
  background: rgba(255,255,255,.95) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-top: 1px solid rgba(13,31,23,.08) !important;
  box-shadow: 0 -4px 24px rgba(13,31,23,.08) !important;
}
nav[style*="position:fixed;bottom:0"] a .ico {
  font-size: 24px !important;
}
nav[style*="position:fixed;bottom:0"] a[style*="color:#0030c4"] {
  color: var(--accent) !important;
}

/* Employee top header */
[style*="background:#1a5c42"],
[style*="background: #1a5c42"] {
  background: #0d1f17 !important;
}

/* Input focus ring — green */
.inp:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(26,92,66,.14) !important;
}

/* ── Pulse animation for "on time" status dot ────────────── */
@keyframes pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(26,92,66,.5); }
  50%      { box-shadow: 0 0 0 5px rgba(26,92,66,0); }
}

/* ═══════════════════════════════════════════════════════════
   MOBILE — App-like manager experience
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  aside.mgr-sidebar {
    height: 100vh !important;
    height: 100dvh !important;
  }

  /* Safe-area aware top bar (notches / dynamic island) */
  .mob-top-bar {
    height: calc(52px + env(safe-area-inset-top)) !important;
    padding-top: env(safe-area-inset-top) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    background: rgba(13,31,23,.96) !important;
  }
  body { padding-top: calc(52px + env(safe-area-inset-top)) !important; }

  /* Content area: room for bottom tab bar + safe area, breathing room under top bar */
  main.mgr-main {
    padding: 18px 14px calc(78px + env(safe-area-inset-bottom)) 14px !important;
  }
  #mgr-data { padding-bottom: 12px !important; }

  /* Stat / summary grids collapse to 2-up, tighter gaps */
  [style*="grid-template-columns:repeat(3,1fr)"],
  [style*="grid-template-columns:repeat(4,1fr)"],
  [style*="grid-template-columns: repeat(3,1fr)"],
  [style*="grid-template-columns: repeat(4,1fr)"],
  [style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }

  /* Cards: tighter padding, larger radius = native-app feel */
  .card { padding: 14px !important; border-radius: 16px !important; }

  /* Page titles smaller, tighter on phones */
  main h1 { font-size: 19px !important; }

  /* Buttons: minimum touch target 44px */
  .btn { min-height: 44px !important; padding: 10px 16px !important; font-size: 14px !important; }
  .inp { min-height: 44px !important; font-size: 16px !important; } /* 16px prevents iOS auto-zoom */

  /* Tables: allow momentum scroll, smaller text so more fits */
  .card[style*="overflow-x:auto"], div[style*="overflow-x:auto"] {
    -webkit-overflow-scrolling: touch !important;
  }
  table { font-size: 13px !important; }
  thead th { padding: 8px 10px !important; font-size: 10px !important; }
  tbody td { padding: 10px !important; }

  /* Modals become bottom sheets — the native-app pattern */
  .modal-bg.open { align-items: flex-end !important; }
  .modal-box {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 88vh !important;
    border-radius: 20px 20px 0 0 !important;
    padding: 20px 18px calc(20px + env(safe-area-inset-bottom)) 18px !important;
    margin: 0 !important;
  }
  .modal-bg.open .modal-box {
    animation: sheet-up var(--dur-normal) var(--ease-out) forwards !important;
  }
  @keyframes sheet-up {
    from { opacity: 0; transform: translateY(100%); }
    to   { opacity: 1; transform: translateY(0); }
  }

  /* Fixed page-header rows: stack actions below title, full-width buttons feel native */
  main.mgr-main > div:first-child[style*="justify-content:space-between"] {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  /* Bottom tab bar (added per-page) */
  .mgr-tabbar {
    display: flex !important;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    background: rgba(255,255,255,.97);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-top: 1px solid var(--border);
    box-shadow: 0 -4px 24px rgba(13,31,23,.08);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom)) 4px;
    z-index: 180;
  }
  .mgr-tabbar a {
    flex: 1;
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    padding: 6px 2px;
    text-decoration: none;
    color: var(--ink-3);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: -0.01em;
    border-radius: 12px;
    transition: color 110ms ease, transform 110ms var(--ease-out);
  }
  .mgr-tabbar a .ico { font-size: 22px; opacity: .75; transition: opacity 110ms ease; }
  .mgr-tabbar a.active { color: var(--accent) !important; }
  .mgr-tabbar a.active .ico { opacity: 1; }
  .mgr-tabbar a:active { transform: scale(0.9); }
}

@media (min-width: 769px) {
  .mgr-tabbar { display: none !important; }
}

/* ── Reduced motion (accessibility) ─────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   GLOBAL BLUE → GREEN SWEEP
   ═══════════════════════════════════════════════════════════ */

[style*="background:#0030c4"],
[style*="background: #0030c4"] {
  background: #1a5c42 !important;
}
[style*="background:#0026a0"],
[style*="background: #0026a0"] {
  background: #144d37 !important;
}
[style*="color:#0030c4"],
[style*="color: #0030c4"] {
  color: #1a5c42 !important;
}
[style*="color:#1e40af"],
[style*="color: #1e40af"] {
  color: #1a5c42 !important;
}
[style*="background:#dbeafe"],
[style*="background: #dbeafe"] {
  background: var(--accent-light) !important;
  color: var(--accent-text) !important;
}
.bg-b {
  background: var(--accent-light) !important;
  color: var(--accent-text) !important;
}
/* Blue → green on today-column date header */
[style*="background:#eff6ff"] {
  background: #edf7f2 !important;
}
[style*="color:#1d4ed8"] {
  color: var(--accent) !important;
}
/* Blue spin border */
.spin {
  border-top-color: var(--accent) !important;
}

/* ═══════════════════════════════════════════════════════════
   EMPLOYEE HEADER — Dark forest with depth
   ═══════════════════════════════════════════════════════════ */

[style*="background:#0d1f17"][style*="padding:20px 20px 32px"] {
  background: linear-gradient(150deg, #0d1f17 0%, #102215 100%) !important;
}

/* Shift cards in employee pages — always green left border */
.card[style*="border-left:4px solid"] {
  border-left-color: var(--accent) !important;
}

/* Quick action cards — lift */
a.card {
  transition: transform 140ms cubic-bezier(.23,1,.32,1), box-shadow 140ms ease !important;
  text-decoration: none !important;
}
a.card:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 24px rgba(13,31,23,.1) !important;
}

/* ═══════════════════════════════════════════════════════════
   SCHEDULE — Staff avatar & hours label
   ═══════════════════════════════════════════════════════════ */

/* Avatar circles */
[style*="border-radius:50%"][style*="background:#0030c4"] {
  background: var(--accent) !important;
}
/* Hours label */
[style*="font-size:10px"][style*="color:#0030c4"] {
  color: var(--accent) !important;
}

/* ═══════════════════════════════════════════════════════════
   PROFILE PAGE — Interactions
   ═══════════════════════════════════════════════════════════ */

.stat-box {
  transition: transform 140ms cubic-bezier(.23,1,.32,1) !important;
  cursor: default;
}
.stat-box:hover {
  transform: translateY(-1px) !important;
}

/* ═══════════════════════════════════════════════════════════
   BOTTOM NAV — Green active state
   ═══════════════════════════════════════════════════════════ */

nav[style*="position:fixed;bottom:0"] a[style*="color:#1a5c42"],
nav[style*="position:fixed;bottom:0"] a[style*="color: #1a5c42"] {
  color: var(--accent) !important;
}

/* ═══════════════════════════════════════════════════════════
   SIGN OUT — Employee pages
   ═══════════════════════════════════════════════════════════ */

a[href*="login"][style*="background:#fee2e2"] {
  border: 1.5px solid #fca5a5 !important;
  transition: transform 120ms ease !important;
}
a[href*="login"][style*="background:#fee2e2"]:hover {
  transform: translateY(-1px) !important;
}