/* ==========================================================================
   AGENCY DASHBOARD — DESIGN SYSTEM
   Concept: "Ops Console" — a calm command-center for a small, fast-moving
   agency. Dark ink sidebar (control panel), quiet paper-white workspace,
   a single signal-green accent for "go/active" states, and a monospace
   utility face for anything numeric — attendance times, lead counts,
   payroll figures — so data reads like data.
   ========================================================================== */

:root {
  /* ---- Color tokens ---- */
  --ink-900: #12161c;      /* sidebar background */
  --ink-800: #1b212a;      /* sidebar hover */
  --ink-700: #2a323d;      /* sidebar borders */
  --paper-100: #f6f6f4;    /* main workspace background */
  --paper-000: #ffffff;    /* card background */
  --line-200: #e4e3de;     /* hairline borders on paper */
  --text-900: #191d22;     /* primary text */
  --text-600: #5b6470;     /* secondary text */
  --text-400: #98a1ab;     /* muted / placeholder */
  --signal-green: #2f6f4e; /* primary accent — active, success, "go" */
  --signal-green-soft: #e6efe9;
  --signal-rust: #c1502e;  /* alerts, overdue, destructive */
  --signal-rust-soft: #f6e7e1;
  --signal-amber: #b4801f; /* warnings, pending */
  --signal-amber-soft: #f5eddb;

  /* ---- Type ---- */
  --font-display: 'Space Grotesk', 'Segoe UI', sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', 'Courier New', monospace;

  /* ---- Layout ---- */
  --sidebar-width: 240px;
  --topbar-height: 64px;
  --radius: 8px;
  --shadow-card: 0 1px 2px rgba(18, 22, 28, 0.06), 0 1px 1px rgba(18, 22, 28, 0.04);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--font-body);
  background: var(--paper-100);
  color: var(--text-900);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  /* Safety net: no matter what overflows inside a card (a wide table, a stat row) on a narrow
     screen, the page itself must never gain a horizontal scrollbar — only the offending element's
     own overflow-x:auto container (e.g. .table-wrap) should scroll. */
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font-family: inherit; cursor: pointer; }

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.01em; }

/* ==========================================================================
   APP SHELL
   ========================================================================== */

.app-shell {
  display: flex;
  min-height: 100vh;
}

/* ---- Sidebar ---- */
.sidebar {
  width: var(--sidebar-width);
  background: var(--ink-900);
  color: #dfe3e8;
  flex-shrink: 0;
  position: fixed;
  top: 0; left: 0; bottom: 0;
  display: flex;
  flex-direction: column;
  z-index: 100;
  transition: transform 0.25s ease;
}

.sidebar-brand {
  height: var(--topbar-height);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 20px;
  border-bottom: 1px solid var(--ink-700);
}

.sidebar-brand .logo-chip {
  background: #fff;
  border-radius: 6px;
  padding: 4px 7px;
  display: flex; align-items: center;
}
.sidebar-brand .logo-chip img {
  height: 18px; width: auto; display: block;
}

.sidebar-brand .name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  color: #fff;
}

.sidebar-section-label {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-400);
  padding: 18px 20px 6px;
}

.sidebar-nav a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 20px;
  font-size: 13.5px;
  color: #c3c9d1;
  border-left: 2px solid transparent;
  transition: background 0.15s ease, color 0.15s ease;
}

.sidebar-nav a:hover {
  background: var(--ink-800);
  color: #fff;
}

.sidebar-nav a.active {
  background: var(--ink-800);
  color: #fff;
  border-left-color: var(--signal-green);
}

.sidebar-nav .icon {
  width: 16px; text-align: center; font-family: var(--font-mono); opacity: 0.8;
}

.sidebar-footer {
  margin-top: auto;
  padding: 16px 20px;
  border-top: 1px solid var(--ink-700);
  font-size: 12px;
  color: var(--text-400);
  font-family: var(--font-mono);
}

/* ---- Topbar ---- */
.topbar {
  height: var(--topbar-height);
  background: var(--paper-000);
  border-bottom: 1px solid var(--line-200);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  position: sticky;
  top: 0;
  z-index: 50;
}

.topbar-status {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-600);
  display: flex;
  align-items: center;
  gap: 8px;
}

.topbar-status .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--signal-green);
  box-shadow: 0 0 0 3px var(--signal-green-soft);
}

.topbar-user {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
}

.topbar-user .avatar {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--ink-900);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
}

.topbar-user .role-badge {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  color: var(--signal-green);
  background: var(--signal-green-soft);
  padding: 2px 6px;
  border-radius: 4px;
  letter-spacing: 0.05em;
}

/* ---- Notification bell ---- */
.notif-bell {
  position: relative;
}
.notif-bell-btn {
  position: relative;
  background: none;
  border: none;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 4px;
  color: var(--text-900);
}
.notif-badge {
  position: absolute;
  top: -2px; right: -2px;
  min-width: 15px; height: 15px;
  padding: 0 3px;
  border-radius: 999px;
  background: var(--signal-rust);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.notif-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 340px;
  max-width: 90vw;
  background: var(--paper-000);
  border-radius: 8px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.2);
  border: 1px solid var(--line-200);
  z-index: 100;
  overflow: hidden;
}
.notif-dropdown-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line-200);
  font-size: 13.5px;
}
.notif-mark-all {
  background: none; border: none;
  color: var(--signal-green);
  font-size: 12px; cursor: pointer;
  font-weight: 600;
}
.notif-dropdown-list {
  max-height: 340px;
  overflow-y: auto;
}
.notif-item {
  display: block;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line-200);
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
.notif-item:hover { background: var(--paper-100); }
.notif-item.unread { background: var(--signal-green-soft); }
.notif-item .notif-title { font-size: 13px; font-weight: 600; }
.notif-item .notif-message { font-size: 12px; color: var(--text-600); margin-top: 2px; }
.notif-item .notif-meta { font-size: 10.5px; color: var(--text-600); margin-top: 4px; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .04em; }
.notif-empty { padding: 24px 14px; text-align: center; color: var(--text-600); font-size: 13px; }
.notif-dropdown-footer {
  display: block;
  text-align: center;
  padding: 10px;
  font-size: 12.5px;
  color: var(--signal-green);
  text-decoration: none;
  border-top: 1px solid var(--line-200);
  font-weight: 600;
}

/* ---- Menu toggle (mobile) ---- */
.menu-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 20px;
  color: var(--text-900);
}

/* ---- Main content ---- */
.main-content {
  margin-left: var(--sidebar-width);
  flex: 1;
  min-width: 0;
}

.content-inner {
  padding: 24px;
  max-width: 1280px;
}

.page-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 20px;
}

.page-header h1 {
  font-size: 22px;
}

.page-header .subtitle {
  font-size: 13px;
  color: var(--text-600);
  margin-top: 2px;
}

/* ==========================================================================
   COMPONENTS
   ========================================================================== */

/* ---- Cards ---- */
.card {
  background: var(--paper-000);
  border: 1px solid var(--line-200);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}

.card-header {
  padding: 16px 18px;
  border-bottom: 1px solid var(--line-200);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.card-header h3 { font-size: 14px; font-weight: 600; }
.card-body { padding: 18px; }

/* ---- Stat cards ---- */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
  margin-bottom: 24px;
}

.stat-card {
  background: var(--paper-000);
  border: 1px solid var(--line-200);
  border-radius: var(--radius);
  padding: 16px 18px;
  box-shadow: var(--shadow-card);
}

.stat-card .label {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-600);
}

.stat-card .value {
  font-family: var(--font-mono);
  font-size: 26px;
  font-weight: 600;
  margin-top: 6px;
  color: var(--text-900);
  overflow-wrap: anywhere;
}

.stat-card .delta { font-size: 12px; margin-top: 4px; }
.stat-card .delta.up { color: var(--signal-green); }
.stat-card .delta.down { color: var(--signal-rust); }

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  border: 1px solid transparent;
  transition: all 0.15s ease;
}

.btn-primary { background: var(--signal-green); color: #fff; }
.btn-primary:hover { background: #275c40; }

.btn-secondary { background: var(--paper-000); border-color: var(--line-200); color: var(--text-900); }
.btn-secondary:hover { border-color: var(--text-400); }

.btn-danger { background: var(--signal-rust); color: #fff; }
.btn-danger:hover { background: #a5432570; }

.btn-sm { padding: 5px 10px; font-size: 12px; }

/* ---- Forms ---- */
.form-group { margin-bottom: 16px; }

.form-group label {
  display: block;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-600);
  margin-bottom: 6px;
}

.form-control {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--line-200);
  border-radius: 6px;
  font-size: 13.5px;
  font-family: var(--font-body);
  background: var(--paper-000);
  color: var(--text-900);
}

.form-control:focus {
  outline: none;
  border-color: var(--signal-green);
  box-shadow: 0 0 0 3px var(--signal-green-soft);
}

/* Finance PIN entry — 6 individual digit boxes, auto-advance/auto-submit, no submit button
   (see modules/finance/pin.php, pin_settings.php, assets/js/pin-input.js). */
.pin-boxes { display: flex; gap: 10px; justify-content: center; margin-bottom: 4px; }
.pin-box {
  width: 44px;
  height: 52px;
  text-align: center;
  font-size: 22px;
  font-family: var(--font-mono);
  border: 1px solid var(--line-200);
  border-radius: 8px;
  background: #fff;
}
.pin-box:focus {
  outline: none;
  border-color: var(--signal-green);
  box-shadow: 0 0 0 3px var(--signal-green-soft);
}

.password-input-wrap { position: relative; }
.password-input-wrap .form-control { padding-right: 40px; }
.password-toggle-btn {
  position: absolute;
  top: 50%;
  right: 4px;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  background: none;
  color: var(--text-600);
  cursor: pointer;
  border-radius: 4px;
}
.password-toggle-btn:hover { color: var(--text-900); }
.password-toggle-btn:focus-visible { outline: 2px solid var(--signal-green); outline-offset: 1px; }

.form-row { display: flex; gap: 14px; flex-wrap: wrap; }
.form-row .form-group { flex: 1; min-width: 200px; }

/* ---- Advanced Search toggle (Leads list) ---- */
.filter-toggle-btn {
  position: relative;
  width: 40px;
  height: 38px;
  padding: 0;
  flex: 0 0 auto;
  justify-content: center;
}
.filter-toggle-btn.active { border-color: var(--signal-green); color: var(--signal-green); }
.filter-toggle-btn .dot {
  position: absolute;
  top: -3px;
  right: -3px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--signal-green);
  border: 2px solid var(--paper-000);
}
.advanced-filters {
  display: none;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed var(--line-200);
}
.advanced-filters.open { display: flex; }

/* ---- Checkbox dropdown (Tags filter) ---- */
.dropdown-check { position: relative; }
.dropdown-check-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dropdown-check-toggle svg { flex: 0 0 auto; transition: transform 0.15s ease; color: var(--text-600); }
.dropdown-check.open .dropdown-check-toggle svg { transform: rotate(180deg); }
.dropdown-check-menu {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 20;
  min-width: 100%;
  max-height: 220px;
  overflow-y: auto;
  background: var(--paper-000);
  border: 1px solid var(--line-200);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  padding: 6px;
}
.dropdown-check.open .dropdown-check-menu { display: block; }
.dropdown-check-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  border-radius: 6px;
  font-size: 13.5px;
  cursor: pointer;
  white-space: nowrap;
}
.dropdown-check-item:hover { background: var(--paper-100); }
.dropdown-check-item input[type="checkbox"] { margin: 0; }
.dropdown-check-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }

/* ---- Tables ---- */
.table-wrap { overflow-x: auto; }

table.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}

.data-table th {
  text-align: left;
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-600);
  padding: 10px 14px;
  border-bottom: 1px solid var(--line-200);
  white-space: nowrap;
}

.data-table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--line-200);
  vertical-align: middle;
}

.data-table tr:hover td { background: var(--paper-100); }

/* ---- Status pills ---- */
.pill {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 3px 9px;
  border-radius: 20px;
  text-transform: capitalize;
  white-space: nowrap;
}

/* Every pipeline stage below gets its own hue so the 8-stage board is scannable at a glance — a
   prior pass had attempting_contact/contacted/negotiation all sharing signal-amber, and
   qualified/won both on signal-green, which made adjacent stages indistinguishable. A second pass
   moved attempting_contact to orange, but orange/gold/rust are still only ~15-27deg apart on the
   wheel — too tight to tell apart at pill size — so attempting_contact and contacted are pulled
   further from lost's rust here (goldenrod ~43deg, olive ~80deg vs. rust's ~13deg). */
.pill-new { background: #e9edf5; color: #3c5b9c; }               /* blue */
.pill-attempting_contact { background: #fbf0d4; color: #b8860b; } /* goldenrod */
.pill-contacted { background: #eef2d9; color: #6b8e23; }         /* olive */
.pill-qualified { background: #e7e6fa; color: #5850c4; }         /* indigo */
.pill-sample_sent { background: #dceef2; color: #2b7a94; }       /* cyan */
.pill-proposal { background: #eee5f7; color: #6d3fa3; }          /* purple */
.pill-negotiation { background: #fbe3f0; color: #b23d82; }       /* magenta */
.pill-won { background: var(--signal-green-soft); color: var(--signal-green); } /* green */
.pill-lost { background: var(--signal-rust-soft); color: var(--signal-rust); }  /* rust */
.pill-disqualified { background: #eceef0; color: var(--text-600); } /* gray */

.pill-pending { background: var(--signal-amber-soft); color: var(--signal-amber); }
.pill-approved { background: var(--signal-green-soft); color: var(--signal-green); }
.pill-rejected { background: var(--signal-rust-soft); color: var(--signal-rust); }
.pill-cancelled { background: #eceef0; color: var(--text-600); }
.pill-confirmed { background: var(--signal-green-soft); color: var(--signal-green); }
.pill-rescheduled { background: var(--signal-amber-soft); color: var(--signal-amber); }

.pill-draft { background: #eceef0; color: var(--text-600); }
.pill-sent { background: #e9edf5; color: #3c5b9c; }
.pill-partially_paid { background: var(--signal-amber-soft); color: var(--signal-amber); }
.pill-paid { background: var(--signal-green-soft); color: var(--signal-green); }
.pill-overdue { background: var(--signal-rust-soft); color: var(--signal-rust); }
.pill-refunded { background: #eee5f7; color: #6d3fa3; }

.pill-income { background: var(--signal-green-soft); color: var(--signal-green); }
.pill-expense { background: var(--signal-rust-soft); color: var(--signal-rust); }
.pill-owner_contribution { background: var(--signal-green-soft); color: var(--signal-green); }
.pill-loan_received { background: var(--signal-green-soft); color: var(--signal-green); }
.pill-owner_withdrawal { background: var(--signal-rust-soft); color: var(--signal-rust); }
.pill-loan_repayment { background: var(--signal-rust-soft); color: var(--signal-rust); }
.pill-transfer { background: #e9edf5; color: #3c5b9c; }
.pill-opening_balance { background: #e9edf5; color: #3c5b9c; }

.pill-active { background: var(--signal-green-soft); color: var(--signal-green); }
.pill-inactive { background: #eceef0; color: var(--text-600); }
.pill-locked { background: var(--signal-rust-soft); color: var(--signal-rust); margin-left: 4px; }

.pill-present { background: var(--signal-green-soft); color: var(--signal-green); }
.pill-late { background: var(--signal-amber-soft); color: var(--signal-amber); }
.pill-half_day { background: #eee5f7; color: #6d3fa3; }
.pill-absent { background: var(--signal-rust-soft); color: var(--signal-rust); }
.pill-leave { background: #e9edf5; color: #3c5b9c; }
.pill-holiday { background: var(--signal-amber-soft); color: var(--signal-amber); }

.pill-todo { background: #e9edf5; color: #3c5b9c; }
.pill-in_progress { background: var(--signal-amber-soft); color: var(--signal-amber); }
.pill-done { background: var(--signal-green-soft); color: var(--signal-green); }

.pill-none { background: #eceef0; color: var(--text-600); }
.pill-low { background: #eceef0; color: var(--text-600); }
.pill-medium { background: var(--signal-amber-soft); color: var(--signal-amber); }
.pill-high { background: var(--signal-rust-soft); color: var(--signal-rust); }
.pill-urgent { background: var(--signal-rust); color: #fff; }

.pill-hot { background: var(--signal-rust-soft); color: var(--signal-rust); }
.pill-warm { background: var(--signal-amber-soft); color: var(--signal-amber); }
.pill-cold { background: #eceef0; color: var(--text-600); }

.pill-running { background: var(--signal-green-soft); color: var(--signal-green); }
.pill-paused { background: var(--signal-amber-soft); color: var(--signal-amber); }

.pill-on_track { background: var(--signal-green-soft); color: var(--signal-green); }
.pill-at_risk { background: var(--signal-amber-soft); color: var(--signal-amber); }
.pill-behind { background: var(--signal-rust-soft); color: var(--signal-rust); }
.pill-not_started { background: #eceef0; color: var(--text-600); }
.pill-completed { background: var(--signal-green-soft); color: var(--signal-green); }

.pill-company { background: #e9edf5; color: #3c5b9c; }
.pill-individual { background: #eee5f7; color: #6d3fa3; }
.pill-private { background: #eceef0; color: var(--text-600); }
/* Invoice type (Company/Personal Invoice) reuses .pill-company above as-is; .pill-personal is the
   one new rule needed — same purple as .pill-individual, since a Personal Invoice is the same
   "not company-wide" concept as Goals' individual scope. */
.pill-personal { background: #eee5f7; color: #6d3fa3; }

/* Reward pills — prefixed (pill-reward-*) deliberately, since .pill-locked already exists
   (used for a locked user account in modules/users/index.php) — a same-named rule here would
   silently restyle that unrelated pill too. */
.pill-reward-locked { background: var(--signal-amber-soft); color: var(--signal-amber); }
.pill-reward-unlocked { background: var(--signal-green-soft); color: var(--signal-green); }
.pill-reward-claimed { background: var(--signal-green); color: #fff; }
.pill-reward-skipped { background: #eceef0; color: var(--text-600); }

/* ---- Header timer widget (topbar) ---- */
.header-timer {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--signal-green-soft);
  border-radius: 999px;
  padding: 5px 6px 5px 12px;
  font-size: 12.5px;
}
.header-timer-task {
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--signal-green);
  font-weight: 600;
}
.header-timer-clock {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--text-900);
}
.header-timer-btn {
  width: 24px; height: 24px;
  border-radius: 50%;
  border: none;
  background: var(--paper-000);
  color: var(--signal-green);
  font-size: 10px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.header-timer-btn.header-timer-stop { color: var(--signal-rust); }

.timer-display {
  font-family: var(--font-mono);
  font-size: 32px;
  font-weight: 600;
  color: var(--text-900);
  letter-spacing: .02em;
}

.pill-tasks { background: #eee5f7; color: #6d3fa3; }
.pill-hr { background: #e9edf5; color: #3c5b9c; }
.pill-payroll { background: var(--signal-amber-soft); color: var(--signal-amber); }
.pill-general { background: #eceef0; color: var(--text-600); }
.pill-attendance { background: var(--signal-green-soft); color: var(--signal-green); }
.pill-leads { background: #e6efe9; color: #2f6f4e; }
.pill-goals { background: #dceef2; color: #2b7a94; }
.pill-badges { background: var(--signal-amber-soft); color: var(--signal-amber); }
.pill-finance { background: var(--signal-green-soft); color: var(--signal-green); }

/* ---- Alerts / flash messages ---- */
.alert {
  padding: 12px 16px;
  border-radius: 6px;
  font-size: 13.5px;
  margin-bottom: 16px;
  border: 1px solid transparent;
}

.alert-success { background: var(--signal-green-soft); color: var(--signal-green); border-color: #c7ddce; }
.alert-error   { background: var(--signal-rust-soft); color: var(--signal-rust); border-color: #e6c4b5; }

/* ---- Impersonation banner ---- */
.impersonation-banner {
  background: var(--signal-amber-soft);
  color: var(--signal-amber);
  padding: 10px 20px;
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border-bottom: 1px solid #e3c98a;
}
.impersonation-banner a { color: var(--signal-amber); text-decoration: underline; }

/* ---- Kanban (Leads pipeline) ---- */
.kanban-board {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  padding-bottom: 10px;
}

.kanban-column {
  background: #efefeb;
  border-radius: var(--radius);
  min-width: 240px;
  flex: 1 0 240px;
  padding: 12px;
  display: flex;
  flex-direction: column;
}

.kanban-column-title {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-600);
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
}

/* Fills the rest of the column regardless of how many cards it holds, so dropping anywhere in
   the column's empty space below the last card still registers — not just directly on a card. */
.kanban-dropzone {
  flex: 1 1 auto;
  min-height: 420px;
}

.kanban-card {
  background: var(--paper-000);
  border: 1px solid var(--line-200);
  border-radius: 6px;
  padding: 10px 12px;
  margin-bottom: 8px;
  box-shadow: var(--shadow-card);
  cursor: grab;
}

.kanban-card .name { font-weight: 600; font-size: 13px; }
.kanban-card .meta { font-size: 11px; color: var(--text-600); margin-top: 4px; font-family: var(--font-mono); }

/* ==========================================================================
   AUTH / LOGIN
   ========================================================================== */

.auth-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ink-900);
  padding: 20px;
}

.auth-card {
  background: var(--paper-000);
  border-radius: 10px;
  padding: 36px 32px;
  width: 100%;
  max-width: 380px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.35);
}

.auth-card .brand-logo {
  height: 22px; width: auto;
  display: block; margin: 0 auto 18px;
}

.auth-card h1 { font-size: 19px; margin-bottom: 4px; text-align: center; }
.auth-card p.subtitle { font-size: 13px; color: var(--text-600); margin-bottom: 22px; }

/* ---- Notice Board ---- */
.notice-ticker {
  overflow: hidden;
  white-space: nowrap;
  position: relative;
  padding: 14px 0;
  mask-image: linear-gradient(90deg, transparent, #000 32px, #000 calc(100% - 32px), transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 32px, #000 calc(100% - 32px), transparent);
}

.notice-ticker-track {
  display: inline-flex;
  width: max-content;
  animation: notice-ticker-scroll linear infinite;
  animation-duration: var(--notice-ticker-duration, 30s);
}

.notice-ticker:hover .notice-ticker-track {
  animation-play-state: paused;
}

.notice-ticker-content {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.notice-ticker-item {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 0 26px;
  font-size: 13.5px;
}

.notice-ticker-item a { color: var(--signal-green); font-weight: 600; white-space: nowrap; }
.notice-ticker-date { color: var(--text-400); font-family: var(--font-mono); font-size: 11px; }
.notice-ticker-sep { color: var(--text-400); opacity: .5; padding: 0 4px; }

@keyframes notice-ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .notice-ticker-track { animation: none; }
}

.badge-new {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 20px;
  color: #fff;
  background: linear-gradient(120deg, #ff5f6d, #ff9a44 35%, #f06595 65%, #845ef7);
  background-size: 260% 260%;
  animation: badge-new-shimmer 3.5s ease infinite;
  box-shadow: 0 0 0 2px rgba(255,255,255,.55) inset, 0 2px 8px rgba(240,101,149,.4);
}

@keyframes badge-new-shimmer {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .badge-new { animation: none; }
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 900px) {
  .sidebar {
    transform: translateX(-100%);
    box-shadow: 0 0 40px rgba(0,0,0,0.4);
  }
  .sidebar.open { transform: translateX(0); }
  .main-content { margin-left: 0; }
  .menu-toggle { display: block; }
  .content-inner { padding: 16px; }
  /* flex-wrap: nowrap — the base rule sets flex-wrap: wrap for the row layout, but left
     alone with flex-direction: column that becomes *column-wrap*: the browser can pack
     fields into multiple side-by-side columns and size the form to fit-content instead of
     the card's full width, leaving a blank gap and shoving the one populated column over
     to whichever edge align-items points at (e.g. the finance filter's align-items:flex-end). */
  .form-row { flex-direction: column; flex-wrap: nowrap; width: 100%; }
  /* !important: beats inline flex/width hints (e.g. style="flex:1.5", style="flex:2")
     used throughout the app to size fields within a horizontal row — those ratios are
     meaningless once the row stacks into a column and were causing fields to stretch
     unevenly and overflow. */
  .form-row .form-group { flex: none !important; min-width: 0 !important; width: 100% !important; }
}

@media (max-width: 600px) {
  /* minmax(0, 1fr), not bare 1fr — a bare 1fr track won't shrink below the mono-font
     value's intrinsic width (e.g. a large negative total), which pushed the second
     card past the viewport edge instead of letting the number wrap. */
  .stat-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .stat-card { min-width: 0; }
  .topbar-status { display: none; }
  .notif-dropdown {
    position: fixed;
    top: var(--topbar-height);
    left: 12px;
    right: 12px;
    width: auto;
    max-width: none;
  }
}

/* ==========================================================================
   DASHBOARD
   ========================================================================== */

.dash-grid { display: flex; flex-direction: column; gap: 20px; }
/* minmax(0, 1fr), not bare 1fr — a bare 1fr track still refuses to shrink below its content's
   intrinsic width (a wide table, a 5-item stat row), which stretches the whole row past the
   viewport on mobile instead of letting the card's own .table-wrap scroll internally.
   No margin-bottom here — spacing after this row comes from .dash-grid's own gap, same as every
   other direct child (a lone .card). A margin here on top of that gap would double the spacing. */
.dash-row-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.dash-col { margin-bottom: 0; }

/* ---- Fade-in on load (server-rendered content, no async skeleton swap — see dashboard.php) ---- */
.skeleton-fade { opacity: 0; transform: translateY(4px); }
body.dash-loaded .skeleton-fade { opacity: 1; transform: none; transition: opacity .35s ease, transform .35s ease; }

/* ---- Welcome header ---- */
.dash-welcome { margin-bottom: 20px; }
.dash-welcome-body { padding: 22px 24px; }
.dash-welcome h1 { font-size: 24px; margin-bottom: 6px; }
.dash-welcome-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-family: var(--font-mono); font-size: 12px; }
.dash-meta-sep { color: var(--text-400); opacity: .6; }

.status-dot {
  display: inline-block;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--signal-green);
  box-shadow: 0 0 0 3px var(--signal-green-soft);
}
.status-dot-rust { background: var(--signal-rust); box-shadow: 0 0 0 3px var(--signal-rust-soft); }

/* ---- Overview / pending-approval cards ---- */
.overview-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin-bottom: 20px; }
.overview-grid-compact { margin-bottom: 0; }
.overview-card {
  display: block;
  background: var(--paper-000);
  border: 1px solid var(--line-200);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow-card);
  transition: transform .15s ease, box-shadow .15s ease;
}
.overview-card:hover { transform: translateY(-2px); box-shadow: 0 4px 14px rgba(18,22,28,0.08); }
.overview-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 7px;
  font-size: 13px; margin-bottom: 10px;
  background: var(--paper-100); color: var(--text-600);
}
.overview-icon.accent-green { background: var(--signal-green-soft); color: var(--signal-green); }
.overview-icon.accent-amber { background: var(--signal-amber-soft); color: var(--signal-amber); }
.overview-icon.accent-rust { background: var(--signal-rust-soft); color: var(--signal-rust); }
.overview-icon.accent-blue { background: #e9edf5; color: #3c5b9c; }
.overview-value { font-family: var(--font-mono); font-size: 26px; font-weight: 600; color: var(--text-900); line-height: 1.1; }
.overview-label { font-size: 12.5px; color: var(--text-600); margin-top: 4px; }
.overview-sublabel { font-size: 10.5px; color: var(--text-400); text-transform: uppercase; letter-spacing: .04em; margin-top: 2px; }

.accent-green { color: var(--signal-green); }
.accent-amber { color: var(--signal-amber); }
.accent-rust { color: var(--signal-rust); }
.accent-blue { color: #3c5b9c; }

/* ---- Lead pipeline ---- */
.pipeline-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; }
.pipeline-card {
  display: block;
  border: 1px solid var(--line-200);
  border-radius: var(--radius);
  padding: 14px;
  text-align: center;
  transition: border-color .15s ease;
}
.pipeline-card:hover { border-color: var(--text-400); }
.pipeline-card .pill { max-width: 100%; white-space: normal; }
.pipeline-count { font-family: var(--font-mono); font-size: 22px; font-weight: 600; margin-top: 8px; }
.pipeline-pct { font-size: 11px; color: var(--text-600); margin-top: 2px; }

/* ---- Dashboard check-in/out widget ---- */
.dash-checkin { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.dash-checkin-text { font-size: 14px; }
.dash-checkin-text .pill { margin-left: 6px; }

/* ---- Mini stat rows (Tasks / Attendance / Team Summary / Payroll snapshot) ---- */
.mini-stat-row { display: flex; flex-wrap: wrap; gap: 18px; margin-bottom: 16px; }
.mini-stat { display: flex; flex-direction: column; gap: 2px; flex: 1 1 100px; }
.mini-stat-value { font-family: var(--font-mono); font-size: 19px; font-weight: 600; color: var(--text-900); }
.mini-stat-label { font-size: 11.5px; color: var(--text-600); }
/* Tighter variant for 5-item rows (e.g. Employee Attendance's Present/Late/Half Day/Absent/On
   Leave) where the default 100px basis + 18px gap wraps the last item onto its own line. */
.mini-stat-row-tight { gap: 10px; }
.mini-stat-row-tight .mini-stat { flex: 1 1 64px; }

/* ---- Progress bar ---- */
.dash-progress { margin-top: 4px; }
.dash-progress-label { font-size: 12.5px; color: var(--text-600); margin-bottom: 6px; }
.dash-progress-label strong { color: var(--text-900); font-family: var(--font-mono); }
.progress-bar { height: 8px; border-radius: 20px; background: var(--paper-100); overflow: hidden; }
.progress-bar-fill { height: 100%; background: var(--signal-green); border-radius: 20px; transition: width .4s ease; }

/* ---- Empty states ---- */
.empty-state { padding: 22px 4px; text-align: center; color: var(--text-600); font-size: 13px; }

/* ---- Timeline (Recent Activities / Notifications) ---- */
.timeline { display: flex; flex-direction: column; gap: 14px; }
.timeline-item { display: flex; gap: 10px; align-items: flex-start; }
.timeline-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; margin-top: 5px; }
.timeline-text { font-size: 13px; color: var(--text-900); line-height: 1.45; }
.timeline-time { font-size: 11px; color: var(--text-400); font-family: var(--font-mono); margin-top: 2px; }
.dash-unread-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--signal-rust); margin-left: 4px; }

/* ---- Team summary / snapshot ---- */
.dash-role-breakdown { display: flex; flex-wrap: wrap; gap: 6px; }
.dash-divider { height: 1px; background: var(--line-200); margin: 16px 0; }

/* ---- Charts ---- */
.chart-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; margin-bottom: 20px; }
.chart-card .card-body { padding: 16px 18px 8px; height: 260px; position: relative; }

/* ---- Quick actions ---- */
.quick-actions-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.quick-action-btn { flex: 1 1 160px; text-align: center; }

/* ---- System health ---- */
.health-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.health-item { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-600); font-family: var(--font-mono); }

@media (max-width: 900px) {
  .dash-row-2 { grid-template-columns: minmax(0, 1fr); }
}