/* ============================================================================
   Payroll theme — design system (2026-09-21, after Dribbble "Time Tracking
   SaaS Dashboard UI" reference). Replaces the prior dark-navy + Bootstrap-blue
   look with a soft gradient canvas + single white rounded container +
   gradient stat tiles + light sidebar with lavender active states.

   Usage: <link href="{{ url_for('static', filename='css/payroll-theme.css') }}">
   in templates/base.html. All other styles are additive over Bootstrap 5.
   ============================================================================ */

:root {
  /* Brand */
  --color-primary:        #6366F1;   /* indigo */
  --color-primary-hover:  #4F46E5;
  --color-primary-soft:   #EEF2FF;
  --color-primary-ink:    #4338CA;

  /* Project / stat-tile gradients */
  --grad-purple:   linear-gradient(135deg, #A78BFA 0%, #6366F1 100%);
  --grad-blue:     linear-gradient(135deg, #60A5FA 0%, #2563EB 100%);
  --grad-amber:    linear-gradient(135deg, #FBBF24 0%, #F59E0B 100%);
  --grad-pink:     linear-gradient(135deg, #F472B6 0%, #EC4899 100%);
  --grad-emerald:  linear-gradient(135deg, #34D399 0%, #059669 100%);
  --grad-rose:     linear-gradient(135deg, #FB7185 0%, #E11D48 100%);
  --grad-slate:    linear-gradient(135deg, #94A3B8 0%, #475569 100%);

  /* Neutrals */
  --color-canvas-top:    #DBEAFE;    /* sky-100 */
  --color-canvas-mid:    #E0E7FF;    /* indigo-100 */
  --color-canvas-bot:    #EDE9FE;    /* violet-100 */
  --bg-canvas:           linear-gradient(135deg, var(--color-canvas-top) 0%, var(--color-canvas-mid) 50%, var(--color-canvas-bot) 100%);

  --color-surface:       #FFFFFF;
  --color-surface-alt:   #F8FAFC;    /* slate-50 */
  --color-surface-2:     #F1F5F9;    /* slate-100 */
  --color-text:          #0F172A;    /* slate-900 */
  --color-text-soft:     #334155;    /* slate-700 */
  --color-text-muted:    #64748B;    /* slate-500 */
  --color-text-faint:    #94A3B8;    /* slate-400 */
  --color-border:        #E2E8F0;    /* slate-200 */
  --color-border-soft:   #F1F5F9;    /* slate-100 */

  /* Semantic */
  --color-success:       #10B981;
  --color-success-soft:  #D1FAE5;
  --color-warning:       #F59E0B;
  --color-warning-soft:  #FEF3C7;
  --color-danger:        #EF4444;
  --color-danger-soft:   #FEE2E2;
  --color-info:          #3B82F6;
  --color-info-soft:     #DBEAFE;

  /* Spacing scale (4px) */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;

  /* Radii */
  --radius-sm:   6px;
  --radius-md:  10px;
  --radius-lg:  16px;
  --radius-xl:  24px;
  --radius-2xl: 32px;
  --radius-pill: 9999px;

  /* Shadow */
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, .04);
  --shadow-sm: 0 1px 3px rgba(15, 23, 42, .06), 0 1px 2px rgba(15, 23, 42, .04);
  --shadow-md: 0 4px 6px -1px rgba(15, 23, 42, .08), 0 2px 4px -2px rgba(15, 23, 42, .04);
  --shadow-lg: 0 12px 24px -6px rgba(15, 23, 42, .10), 0 4px 8px -4px rgba(15, 23, 42, .04);
  --shadow-xl: 0 24px 48px -12px rgba(99, 102, 241, .18);
}

/* =============== BASE / TYPOGRAPHY =============== */
html, body { height: 100%; }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--bg-canvas);
  background-attachment: fixed;
  color: var(--color-text);
  font-size: 16px;          /* 2026-09-21 — bumped from 15px (user feedback: "slightly bigger") */
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: -0.01em;
  margin-top: 0;
}
h1 { font-size: 1.85rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.2rem; }
small, .small { font-size: .9rem; }
a { color: var(--color-primary); text-decoration: none; }
a:hover { color: var(--color-primary-hover); }
hr { border-color: var(--color-border-soft); }
code { font-family: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace; font-size: .88em; color: var(--color-text-soft); background: var(--color-surface-2); padding: 1px 6px; border-radius: var(--radius-sm); }
/* 2026-10-05 (corrections #53 + #36) — code tags on the EA form and
   Notifications pages must read as plain grey text, not red/pink chips.
   Bootstrap's default code colour is pinkish-red; these page-scoped
   classes drop both the colour and the chip background where the user
   asked for it. */
code.code-plain,
.employer-ea-page code,
.employer-notif-page code {
  color: var(--color-text-muted);
  background: transparent;
  padding: 0;
  border-radius: 0;
}
/* 2026-10-05 (correction #11) — dark-blue wording on info chips. The
   default text-info on bg-info-subtle reads washed-out; darken it so
   "Trial"/"Probation" chips are easy to read. */
.badge.bg-info-subtle.text-info,
.badge.bg-info-subtle.text-info i { color: #1D4ED8 !important; }

/* 2026-10-05 (corrections #27 + #47) — Bootstrap's text-warning is
   #ffc107 (yellow) which reads poorly on light backgrounds. Darken any
   warning-toned TEXT to a deep orange (readable, still clearly
   "attention"). Keeps .bg-warning fills untouched. */
.text-warning { color: #B45309 !important; }
.text-warning-emphasis { color: #92400E !important; }
.alert-warning { color: #7C2D12; }

/* Override Bootstrap surface defaults to match the new look */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
}
.card-header {
  background: transparent;
  border-bottom: 1px solid var(--color-border-soft);
  font-weight: 600;
}
.btn { border-radius: var(--radius-md); font-weight: 500; }
.btn-sm { border-radius: var(--radius-md); }
.btn-primary {
  background: var(--color-primary);
  border-color: var(--color-primary);
}
.btn-primary:hover {
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
}
.btn-outline-primary {
  color: var(--color-primary);
  border-color: var(--color-primary);
}
.btn-outline-primary:hover {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}
.form-control, .form-select {
  border-radius: var(--radius-md);
  border-color: var(--color-border);
  padding: .5rem .75rem;
}
.form-control:focus, .form-select:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-soft);
}
.badge {
  border-radius: var(--radius-pill);
  font-weight: 500;
  padding: .3em .65em;
}
.table {
  --bs-table-bg: transparent;
}
.table > :not(caption) > * > * {
  padding: var(--space-3);
}

/* =============== APP SHELL (floating card on gradient) =============== */
.app-shell {
  background: var(--color-surface);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  overflow: hidden;
  min-height: calc(100vh - 32px);
  margin: 16px;
  display: flex;
  flex-wrap: nowrap;
  /* 2026-09-21 (user, 2nd bump) — 14.5 -> 15.5px; small text .82 -> .875rem.
     Small/sub-menu text was reading too small, especially on highlighted
     submenu items. Staff portal stays at 15px (separate scope). */
  font-size: 15.5px;
}
.app-shell .app-content h1 { font-size: 1.75rem; }
.app-shell .app-content h2 { font-size: 1.35rem; }
.app-shell .app-content h3 { font-size: 1.1rem; }
.app-shell small,
.app-shell .small { font-size: .875rem; }
.app-shell > .app-sidebar { border-top-left-radius: var(--radius-xl); border-bottom-left-radius: var(--radius-xl); }
.app-shell > .app-main    { border-top-right-radius: var(--radius-xl); border-bottom-right-radius: var(--radius-xl); }

@media (max-width: 768px) {
  .app-shell { margin: 8px; border-radius: var(--radius-lg); min-height: calc(100vh - 16px); flex-direction: column; }
}

/* =============== SIDEBAR =============== */
.app-sidebar {
  width: 248px;
  flex-shrink: 0;
  background: var(--color-surface);
  border-right: 1px solid var(--color-border-soft);
  padding: var(--space-6) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.app-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: var(--space-6);
  padding: 0 var(--space-2);
}
.app-brand-icon {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--grad-purple);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700;
  font-size: 1.05rem;
  flex-shrink: 0;
}
.app-brand-name { font-size: 1.15rem; font-weight: 700; color: var(--color-text); }
.app-brand-tag  { font-size: .68rem; color: var(--color-text-muted); font-weight: 500; display: block; margin-top: -2px; }

.nav-section-title {
  font-size: .72rem;
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: none;
  margin: var(--space-5) var(--space-2) var(--space-2);
  letter-spacing: .02em;
}
.nav-section-title:first-of-type { margin-top: var(--space-2); }

.nav-item, .nav-link-app {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  border-radius: var(--radius-md);
  color: var(--color-text-soft);
  text-decoration: none;
  font-size: .92rem;
  font-weight: 500;
  transition: background .15s, color .15s;
  position: relative;
  background: transparent;
  border: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
}
.nav-item i, .nav-link-app i {
  font-size: 1.05rem;
  color: var(--color-text-muted);
  width: 18px;
  text-align: center;
  flex-shrink: 0;
}
.nav-item:hover, .nav-link-app:hover {
  background: var(--color-primary-soft);
  color: var(--color-primary-ink);
}
.nav-item:hover i, .nav-link-app:hover i { color: var(--color-primary); }

.nav-item.active, .nav-link-app.active {
  background: var(--color-primary-soft);
  color: var(--color-primary-ink);
  font-weight: 600;
}
.nav-item.active i, .nav-link-app.active i { color: var(--color-primary); }

/* Dropdown submenu (replaces the Bootstrap dropdown menus in the old sidebar) */
.nav-dropdown {
  position: relative;
}
.nav-dropdown-toggle::after {
  content: "\F282";   /* bi-chevron-down */
  font-family: "bootstrap-icons";
  margin-left: auto;
  font-size: .85rem;
  color: var(--color-text-faint);
  transition: transform .15s;
}
.nav-dropdown.open .nav-dropdown-toggle::after { transform: rotate(180deg); }
.nav-dropdown.open > .nav-item,
.nav-dropdown.open > .nav-link-app { background: var(--color-primary-soft); color: var(--color-primary-ink); font-weight: 600; }

.nav-submenu {
  list-style: none;
  margin: 4px 0 4px 0;
  padding: 4px 0 4px 14px;
  border-left: 2px solid var(--color-border-soft);
  display: none;
}
.nav-dropdown.open > .nav-submenu { display: block; }
.nav-submenu a {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 12px; border-radius: var(--radius-md);
  color: var(--color-text-soft); text-decoration: none;
  font-size: .88rem;
}
.nav-submenu a:hover { background: var(--color-surface-2); color: var(--color-text); }
.nav-submenu a.active { background: var(--color-primary-soft); color: var(--color-primary-ink); font-weight: 600; }
.nav-submenu a i { font-size: .95rem; color: var(--color-text-muted); }
.nav-submenu .nav-badge {
  margin-left: auto;
  background: var(--color-primary);
  color: #fff;
  border-radius: var(--radius-pill);
  padding: 0 6px;
  font-size: .65rem; font-weight: 600;
  min-width: 18px; height: 18px;
  display: inline-flex; align-items: center; justify-content: center;
}

.nav-badge {
  margin-left: auto;
  background: var(--color-primary);
  color: #fff;
  border-radius: var(--radius-pill);
  padding: 0 7px;
  font-size: .68rem; font-weight: 600;
  min-width: 20px; height: 20px;
  display: inline-flex; align-items: center; justify-content: center;
}
.nav-badge.warn  { background: var(--color-warning); color: #fff; }
.nav-badge.ok    { background: var(--color-success); color: #fff; }
.nav-badge.danger{ background: var(--color-danger);  color: #fff; }

/* sidebar footer (user profile) */
.app-sidebar-foot {
  margin-top: auto;
  padding: var(--space-3) var(--space-2);
  display: flex; align-items: center; gap: 10px;
  border-top: 1px solid var(--color-border-soft);
  padding-top: var(--space-4);
}
.app-sidebar-foot .avatar-circle { width: 36px; height: 36px; }
.app-sidebar-foot .name { font-weight: 600; font-size: .9rem; line-height: 1.1; }
.app-sidebar-foot .name small { display: block; font-size: .72rem; color: var(--color-text-muted); font-weight: 500; }

/* =============== MAIN + TOPBAR =============== */
.app-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
}
.app-topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--color-border-soft);
  gap: var(--space-4);
}
.app-topbar h1 { margin: 0; font-size: 1.45rem; font-weight: 700; }
.app-topbar .topbar-sub { font-size: .85rem; color: var(--color-text-muted); margin-top: 2px; }
.app-topbar-actions { display: flex; align-items: center; gap: var(--space-2); }

.icon-btn {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--color-surface-2);
  border: none;
  color: var(--color-text-soft);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.05rem;
  cursor: pointer;
  position: relative;
  transition: background .15s, color .15s;
}
.icon-btn:hover { background: var(--color-primary-soft); color: var(--color-primary); }
.icon-btn .notif-dot {
  position: absolute; top: 2px; right: 0px;
  min-width: 16px; height: 16px;
  padding: 0 4px;
  border-radius: 10px;
  background: var(--color-danger);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--color-surface);
  box-sizing: border-box;
}

.app-content {
  padding: var(--space-6);
  flex: 1 1 auto;
  background: var(--color-surface);
  overflow-y: auto;
}
@media (max-width: 768px) {
  .app-sidebar { width: 100%; border-right: none; border-bottom: 1px solid var(--color-border-soft); }
  .app-topbar { padding: var(--space-4); }
  .app-content { padding: var(--space-4); }
}

/* =============== STAT TILES (gradient) =============== */
.stat-tile {
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  color: #fff;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-md);
  min-height: 130px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.stat-tile .stat-head { display: flex; align-items: flex-start; justify-content: space-between; }
.stat-tile .stat-label {
  font-size: .82rem;
  opacity: .92;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
}
.stat-tile .stat-value {
  font-size: 2rem;
  font-weight: 700;
  margin-top: var(--space-2);
  line-height: 1;
  letter-spacing: -0.02em;
}
.stat-tile .stat-foot { margin-top: var(--space-3); }
.stat-tile .stat-progress {
  height: 4px;
  background: rgba(255, 255, 255, .22);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.stat-tile .stat-progress-bar { height: 100%; background: rgba(255, 255, 255, .85); border-radius: var(--radius-pill); }
.stat-tile .stat-sub { font-size: .75rem; opacity: .85; margin-top: 6px; }

.stat-tile-grad-purple  { background: var(--grad-purple); }
.stat-tile-grad-blue    { background: var(--grad-blue); }
.stat-tile-grad-amber   { background: var(--grad-amber); }
.stat-tile-grad-pink    { background: var(--grad-pink); }
.stat-tile-grad-emerald { background: var(--grad-emerald); }
.stat-tile-grad-rose    { background: var(--grad-rose); }
.stat-tile-grad-slate   { background: var(--grad-slate); }

.stat-tile .tile-menu {
  background: rgba(255, 255, 255, .25);
  border: none;
  color: #fff;
  width: 24px; height: 24px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.stat-tile .tile-menu:hover { background: rgba(255, 255, 255, .4); }

/* avatar stack on tiles */
.avatar-stack { display: flex; align-items: center; }
.avatar-stack .av {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .25);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .65rem; font-weight: 700;
  border: 2px solid currentColor;
  margin-left: -8px;
}
.avatar-stack .av:first-child { margin-left: 0; }
.avatar-stack .av-more { background: rgba(255, 255, 255, .95); color: var(--color-text); font-weight: 700; }

/* =============== CONTENT CARD =============== */
.app-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
}
.app-card + .app-card { margin-top: var(--space-4); }
.app-card-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--space-4);
  gap: var(--space-3);
}
.app-card-title {
  font-size: 1rem;
  font-weight: 600;
  margin: 0;
  color: var(--color-text);
  display: flex; align-items: center; gap: 8px;
}
.app-card-title i { color: var(--color-primary); font-size: 1.1rem; }
.menu-btn {
  background: transparent;
  border: none;
  color: var(--color-text-faint);
  width: 28px; height: 28px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.menu-btn:hover { background: var(--color-surface-2); color: var(--color-text); }

/* =============== ACTION ROW (Needs your action) =============== */
.action-row {
  display: flex; align-items: center;
  padding: var(--space-3) 0;
  gap: var(--space-3);
  border-bottom: 1px solid var(--color-border-soft);
}
.action-row:last-child { border-bottom: none; padding-bottom: 0; }
.action-row-icon {
  width: 40px; height: 40px;
  border-radius: var(--radius-md);
  background: var(--color-primary-soft);
  color: var(--color-primary);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
}
.action-row-icon.warn  { background: var(--color-warning-soft); color: var(--color-warning); }
.action-row-icon.ok    { background: var(--color-success-soft); color: var(--color-success); }
.action-row-icon.danger{ background: var(--color-danger-soft);  color: var(--color-danger); }
.action-row-icon.info  { background: var(--color-info-soft);    color: var(--color-info); }
.action-row-icon.muted { background: var(--color-surface-2);    color: var(--color-text-muted); }
.action-row-body { flex: 1 1 auto; min-width: 0; }
.action-row-body .title { font-weight: 600; font-size: .9rem; color: var(--color-text); }
.action-row-body .sub   { font-size: .8rem; color: var(--color-text-muted); }
.action-row .action-cta { flex-shrink: 0; }

/* =============== PILLS / TOGGLE TABS =============== */
.toggle-pills {
  display: inline-flex;
  background: var(--color-surface-2);
  padding: 4px;
  border-radius: var(--radius-pill);
  gap: 2px;
}
.toggle-pill {
  padding: 6px 16px;
  border-radius: var(--radius-pill);
  font-size: .82rem;
  font-weight: 500;
  color: var(--color-text-muted);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.toggle-pill:hover { color: var(--color-text); }
.toggle-pill.active {
  background: var(--color-primary);
  color: #fff;
  box-shadow: var(--shadow-sm);
}

/* =============== AVATAR / INITIALS =============== */
.avatar-circle {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--grad-purple);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .78rem;
  font-weight: 700;
  flex-shrink: 0;
  letter-spacing: .02em;
}
.avatar-circle.av-grad-blue   { background: var(--grad-blue); }
.avatar-circle.av-grad-amber  { background: var(--grad-amber); }
.avatar-circle.av-grad-pink   { background: var(--grad-pink); }
.avatar-circle.av-grad-emerald{ background: var(--grad-emerald); }
.avatar-circle.av-grad-rose   { background: var(--grad-rose); }
.avatar-circle.av-grad-slate  { background: var(--grad-slate); }
.avatar-circle.av-sm { width: 24px; height: 24px; font-size: .68rem; }
.avatar-circle.av-lg { width: 44px; height: 44px; font-size: .95rem; }

/* =============== BANNERS / ALERTS =============== */
.app-banner {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  border-left: 4px solid var(--color-primary);
  background: var(--color-primary-soft);
  display: flex; align-items: flex-start; gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.app-banner i.banner-icon { font-size: 1.25rem; color: var(--color-primary); flex-shrink: 0; line-height: 1.4; }
.app-banner-body { flex: 1; min-width: 0; }
.app-banner-body strong { font-weight: 600; color: var(--color-text); }
.app-banner-body small { display: block; color: var(--color-text-soft); font-size: .82rem; margin-top: 2px; }
.app-banner.warning  { background: var(--color-warning-soft); border-left-color: var(--color-warning); }
.app-banner.warning  i.banner-icon { color: var(--color-warning); }
.app-banner.danger   { background: var(--color-danger-soft);  border-left-color: var(--color-danger); }
.app-banner.danger   i.banner-icon { color: var(--color-danger); }
.app-banner.info     { background: var(--color-info-soft);    border-left-color: var(--color-info); }
.app-banner.info     i.banner-icon { color: var(--color-info); }
.app-banner.success  { background: var(--color-success-soft); border-left-color: var(--color-success); }
.app-banner.success  i.banner-icon { color: var(--color-success); }

/* =============== FLASH CHAT BUBBLES (2026-10-01) =============== */
/* Off-day OT note — user correction on Phase A: the default amber warn
   flash clashed with home's missing-docs banner. Rendered as a distinct
   chat-bubble card instead (category=info + inline .chatbubble markup). */
.chatbubble {
  background: var(--color-surface);
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 14px 14px 14px 4px;   /* asymmetric — bubble feel */
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
  padding: 10px 14px;
  margin-bottom: 6px;
  font-size: .82rem;
  color: var(--color-text);
  max-width: 320px;
  line-height: 1.45;
  position: relative;
}
.chatbubble::before {                 /* bubble tail */
  content: "";
  position: absolute;
  left: -6px; top: 12px;
  width: 12px; height: 12px;
  background: inherit;
  border-left: 1px solid var(--color-border, #e5e7eb);
  border-bottom: 1px solid var(--color-border, #e5e7eb);
  transform: rotate(45deg);
}
.chatbubble-head {
  font-weight: 700;
  font-size: .78rem;
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 4px;
}
.chatbubble-offday { background: #eef4ff; border-color: #c7d7f7; }
.chatbubble-offday::before { border-color: #c7d7f7; }
.chatbubble-offday .chatbubble-head { color: #3b5bdb; }
.chatbubble-offday .bi-calendar-x { font-size: .95rem; }

/* 2026-10-05 (correction #12) — EMPLOYER portal pop-out messages now
   render as chat-bubble cards too (same visual language as the staff
   portal's 2026-10-01 skin). The staff layout scopes its rule to
   .staff-mobile; the employer shell gets its own scope so the
   full-width Bootstrap alert look is replaced on every flash toast.
   Category colour lives on the bubble tail + left accent, not a loud
   background. */
.app-shell ~ .position-fixed .alert,
.employer-chat-flash .alert {
  display: inline-flex; align-items: flex-start; gap: 8px;
  width: auto; max-width: 360px;
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-border-soft, #e5e7eb);
  border-left: 4px solid var(--color-primary, #6366f1);
  border-radius: 14px 14px 14px 4px;
  box-shadow: 0 2px 10px rgba(0,0,0,.08);
  padding: 10px 30px 10px 14px;
  font-size: .84rem; line-height: 1.45;
  color: var(--color-text, #1e293b);
  margin-bottom: 8px;
}
.app-shell ~ .position-fixed .alert-success { border-left-color: #2f9e44; }
.app-shell ~ .position-fixed .alert-danger  { border-left-color: #c0392b; }
.app-shell ~ .position-fixed .alert-warning { border-left-color: #e8a13c; }
.app-shell ~ .position-fixed .alert-info    { border-left-color: #3b5bdb; }
.app-shell ~ .position-fixed .btn-close { position: static; padding: 6px 6px 2px 2px; font-size: .7rem; }

/* =============== STAT CARDS (simple white, employer-dashboard style) =============== */
.stat-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  text-align: center;
  box-shadow: var(--shadow-xs);
}
.stat-card .label { font-size: .78rem; color: var(--color-text-muted); }
.stat-card .value { font-size: 1.6rem; font-weight: 700; color: var(--color-text); margin-top: 4px; }

/* =============== TABLE (modernized) =============== */
.app-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--color-surface);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.app-table th {
  text-align: left;
  font-size: .72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--color-text-muted);
  padding: var(--space-3);
  background: var(--color-surface-2);
  border-bottom: 1px solid var(--color-border-soft);
}
.app-table td {
  padding: var(--space-3);
  border-bottom: 1px solid var(--color-border-soft);
  font-size: .9rem;
  color: var(--color-text-soft);
}
.app-table tbody tr:last-child td { border-bottom: none; }
.app-table tbody tr:hover td { background: var(--color-surface-2); }

/* =============== BUTTON ENHANCEMENTS =============== */
.btn-app {
  border-radius: var(--radius-md);
  padding: 8px 16px;
  font-weight: 600;
  font-size: .9rem;
  border: none;
  cursor: pointer;
  transition: all .15s;
  display: inline-flex; align-items: center; gap: 6px;
  text-decoration: none;
}
.btn-app-primary { background: var(--color-primary); color: #fff; }
.btn-app-primary:hover { background: var(--color-primary-hover); color: #fff; }
.btn-app-outline { background: transparent; border: 1px solid var(--color-border); color: var(--color-text); }
.btn-app-outline:hover { background: var(--color-surface-2); color: var(--color-text); }
.btn-app-ghost { background: transparent; color: var(--color-text-muted); }
.btn-app-ghost:hover { background: var(--color-surface-2); color: var(--color-text); }
.btn-app-danger { background: var(--color-danger); color: #fff; }
.btn-app-danger:hover { background: #DC2626; color: #fff; }
.btn-app-success { background: var(--color-success); color: #fff; }

/* =============== STAFF PORTAL (mobile-first, matching aesthetic) =============== */
.staff-shell {
  max-width: 480px;
  margin: 16px auto;
  background: var(--color-surface);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  overflow: hidden;
  min-height: calc(100vh - 32px);
  display: flex; flex-direction: column;
}
@media (max-width: 520px) {
  .staff-shell { margin: 0; border-radius: 0; min-height: 100vh; box-shadow: none; }
}
.staff-topbar {
  background: var(--color-surface);
  padding: var(--space-4);
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid var(--color-border-soft);
  gap: var(--space-2);
}
.staff-brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.staff-brand-icon {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--grad-purple);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.staff-brand-text { font-weight: 700; font-size: .98rem; line-height: 1.1; min-width: 0; }
.staff-brand-text small {
  display: block;
  font-size: .68rem;
  color: var(--color-text-muted);
  font-weight: 500;
  margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.staff-content {
  flex: 1 1 auto;
  padding: var(--space-4);
  background: var(--color-surface-alt);
  overflow-y: auto;
  /* 2026-09-21 (grill Q1=C) — bumped to 16px base to match universal
     mobile-app standard (WCAG minimum + Material Design 3 + iOS HIG
     converge at 16-17px). Headings scaled up proportionally for
     hierarchy. Small/.small nudged to .875rem (~14px) for readable
     but still-secondary labels. */
  font-size: 16px;
}
.staff-content h1 { font-size: 1.6rem; }
.staff-content h2 { font-size: 1.35rem; }
.staff-content h3 { font-size: 1.15rem; }
.staff-content small,
.staff-content .small { font-size: .875rem; }

.staff-bottomnav {
  background: var(--color-surface);
  border-top: 1px solid var(--color-border-soft);
  display: flex; justify-content: space-around;
  padding: 6px 4px;
  position: sticky; bottom: 0;
}
.staff-bottomnav-item {
  display: flex; flex-direction: column; align-items: center;
  padding: 4px 4px 6px;
  color: var(--color-text-muted);
  text-decoration: none;
  font-size: .65rem;
  font-weight: 500;
  min-width: 50px;
  border-radius: var(--radius-md);
}
.staff-bottomnav-item i { font-size: 1.15rem; margin-bottom: 2px; }
.staff-bottomnav-item:hover { color: var(--color-text); }
.staff-bottomnav-item.active { color: var(--color-primary); }
.staff-bottomnav-item.active i { color: var(--color-primary); }

/* Mobile readability overrides (preserve 2026-09-05 staff-mobile tweaks) */
.staff-shell main, .staff-mobile main { font-size: 1rem; }
.staff-mobile main .form-control,
.staff-mobile main .form-select { font-size: 1rem; min-height: 44px; }
.staff-mobile main .btn { min-height: 42px; font-size: .95rem; }

/* =============== MISC =============== */
.bg-purple-ph { background: #F3E5F5 !important; }   /* keep PH tint */
.bg-purple-ph-text { color: #4A148C !important; }
.bg-teal-break { background: #E0F2F1 !important; }
.bg-teal-break-text { color: #00695C !important; }
.bg-ot-card { background: #FFF8E1 !important; }
.bg-ot-card-text { color: #E65100 !important; }

/* 2026-09-25 — sup arrange Tag/✕/Remove now use inline badge-style
   classes in the template (Bootstrap .badge + per-button styles), so
   the standalone .sup-row-btn block was removed. */

.text-muted { color: var(--color-text-muted) !important; }
.text-soft  { color: var(--color-text-soft) !important; }
.text-faint { color: var(--color-text-faint) !important; }

.late-highlight { color: var(--color-danger); font-weight: 600; }

/* Empty state */
.empty-state {
  text-align: center;
  padding: var(--space-8) var(--space-4);
  color: var(--color-text-muted);
}
.empty-state i { font-size: 2.5rem; opacity: .4; display: block; margin-bottom: var(--space-3); }
.empty-state .title { color: var(--color-text); font-weight: 600; margin-bottom: 4px; }

/* Page header (for templates without the topbar slot) */
.page-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--space-5); gap: var(--space-3); flex-wrap: wrap;
}
.page-head h1 { margin: 0; font-size: 1.5rem; }
.page-head .actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }

/* Soft cards for legacy .card elements — preserve while we migrate */
.card-header { border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important; }

/* =============== APP DRAWER (mobile side drawer, Q3=B overflow) ===============
   2026-09-21 (grill) — top-left brand icon opens this slide-in drawer
   holding the overflow tabs (the ones that don't fit in the 6-tab
   bottom nav). Closes on overlay click or Escape key. */
.app-drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, .5);
  z-index: 1040;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}
.app-drawer-overlay.open {
  opacity: 1;
  pointer-events: auto;
}
.app-drawer {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 280px;
  max-width: 85%;
  background: var(--color-surface);
  z-index: 1050;
  transform: translateX(-100%);
  transition: transform .25s ease;
  box-shadow: var(--shadow-xl);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.app-drawer.open { transform: translateX(0); }

.app-drawer-header {
  padding: var(--space-5) var(--space-4);
  border-bottom: 1px solid var(--color-border-soft);
  display: flex;
  align-items: center;
  gap: 12px;
}
.app-drawer-header .brand-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--grad-purple);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.app-drawer-header .brand-info { min-width: 0; }
.app-drawer-header .brand-name {
  font-weight: 700;
  font-size: 1rem;
  color: var(--color-text);
  line-height: 1.2;
}
.app-drawer-header .brand-tag {
  font-size: .78rem;
  color: var(--color-text-muted);
  display: block;
  margin-top: 2px;
}

.app-drawer-body { padding: var(--space-3) 0; flex: 1 1 auto; }

.app-drawer-section-label {
  padding: var(--space-4) var(--space-4) var(--space-1);
  font-size: .72rem;
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: .05em;
}

.app-drawer-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 18px;
  color: var(--color-text-soft);
  text-decoration: none;
  font-size: .95rem;
  font-weight: 500;
  border-left: 3px solid transparent;
}
.app-drawer-item:hover {
  background: var(--color-surface-2);
  color: var(--color-text);
}
.app-drawer-item.active {
  background: var(--color-primary-soft);
  color: var(--color-primary-ink);
  font-weight: 600;
  border-left-color: var(--color-primary);
}
.app-drawer-item i {
  font-size: 1.15rem;
  color: var(--color-text-muted);
  width: 22px;
  text-align: center;
  flex-shrink: 0;
}
.app-drawer-item.active i { color: var(--color-primary); }
.app-drawer-item .nav-badge {
  margin-left: auto;
  background: var(--color-primary);
  color: #fff;
  border-radius: var(--radius-pill);
  padding: 0 7px;
  font-size: .68rem;
  font-weight: 600;
  min-width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.app-drawer-item .nav-badge.warn { background: var(--color-warning); }

.app-drawer-foot {
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--color-border-soft);
  font-size: .82rem;
  color: var(--color-text-muted);
}

/* Make the top-bar brand button clickable on mobile (the hamburger trigger) */
.staff-topbar .staff-brand-toggle {
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.staff-topbar .staff-brand-toggle:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 4px;
  border-radius: var(--radius-md);
}