/* ═══════════════════════════════════════════════════════════════════════════
   WorkTrac Dashboard — Custom CSS (no framework)
   CSS custom properties drive the live branding system.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Brand ─────────────────────────────────────────────
     Three org colors — primary, secondary, accent — each produce
     four auto-derived variants via applyBranding() at runtime.
     HSL math keeps them readable in both light and dark mode.

       --{color}          mode-adjusted base
       --{color}-strong   pressed / hover state
       --{color}-weak     tinted background for subtle highlights
       --on-{color}       contrast text on solid fill (black or white)
       --primary-border   safeguard outline when brand is near-white/near-bg
  */
  --primary:         #1976D2;
  --primary-strong:  #155CAD;
  --primary-weak:    #E3F2FD;
  --on-primary:      #ffffff;
  --primary-border:  transparent;
  --secondary:       #424242;
  --secondary-strong:#333333;
  --secondary-weak:  #F5F5F5;
  --on-secondary:    #ffffff;
  --accent:          #FF4081;
  --on-accent:       #ffffff;

  /* ── Semantic Colors ───────────────────────────────── */
  --success:     #2e7d32;
  --success-bg:  #E8F5E9;
  --danger:      #c62828;
  --danger-bg:   #FFEBEE;
  --warning:     #e65100;
  --warning-bg:  #FFF3E0;
  --info:        #1565C0;
  --info-bg:     #E3F2FD;

  /* ── Severity (security events) ────────────────────── */
  --sev-critical-bg: #fff5f5;
  --sev-high-bg:     #fff8f0;
  --sev-medium-bg:   #fffef0;
  --sev-low-bg:      #f8f9fa;

  /* ── Neutral Palette ───────────────────────────────── */
  --text:        #1a1a2e;
  --text-secondary: #555;
  --muted:       #888;
  --faint:       #aaa;
  --border:      #e8eaed;
  --border-light:#f0f0f0;
  --surface:     #fff;
  --surface2:    #f5f7fa;
  --surface3:    #f0f2f5;
  --primary-bg:  #f8f9fa;

  /* ── Spacing Scale ─────────────────────────────────── */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-8: 48px;

  /* ── Typography ────────────────────────────────────── */
  --fs-xs:  12px;
  --fs-sm:  12px;
  --fs-body: 13px;
  --fs-md:  14px;
  --fs-lg:  15px;
  --fs-xl:  18px;
  --fs-2xl: 22px;
  --fs-3xl: 32px;

  /* ── Layout ────────────────────────────────────────── */
  --sidebar-w: 240px;
  --topbar-h:  60px;
  --radius:    10px;
  --radius-sm: 6px;
  --radius-lg: 16px;
  --shadow:    0 2px 16px rgba(0,0,0,.06);
  --shadow-md: 0 4px 24px rgba(0,0,0,.1);
  --shadow-lg: 0 8px 32px rgba(0,0,0,.15);
  --transition: .18s ease;

  /* ── Sidebar ───────────────────────────────────────── */
  --sidebar-bg: #0f1117;
  --sidebar-fg: rgba(255,255,255,.75);
  --sidebar-active-bg: rgba(255,255,255,.08);
  --sidebar-active-fg: #fff;
}

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

body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
       background: var(--surface3); color: var(--text); line-height: 1.5; }

/* ── Scrollbar ─────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(0,0,0,.15); border-radius: 3px; }

/* ═══════════════════════════════════════════════════════════════════════════
   LOGIN PAGE
   ═══════════════════════════════════════════════════════════════════════════ */

body.login-mode {
  background: linear-gradient(135deg, #0f1117 0%, #1a1a2e 50%, var(--primary) 100%);
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
}

.login-wrap { width: 100%; max-width: 420px; padding: 24px; }

.login-card {
  background: rgba(255,255,255,.97);
  border-radius: 20px;
  padding: 48px 40px;
  box-shadow: 0 24px 80px rgba(0,0,0,.3);
}

.login-logo {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 6px;
}
.logo-icon { font-size: 28px; color: var(--primary); }
.logo-text  { font-size: 24px; font-weight: 700; letter-spacing: -0.5px; }
.login-sub  { color: var(--muted); margin-bottom: 32px; font-size: 14px; }

.field { margin-bottom: 18px; }
.field label { display: block; font-size: 13px; font-weight: 600;
               color: var(--text-secondary); margin-bottom: 6px; }
.field input {
  width: 100%; padding: 12px 16px;
  border: 1.5px solid var(--border); border-radius: 8px;
  font-size: 15px; outline: none; transition: border-color var(--transition);
  background: var(--surface2);
}
.field input:focus { border-color: var(--primary); background: var(--surface); }

.btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--primary); color: var(--on-primary);
  border: none; border-radius: 8px; padding: 13px 24px;
  font-size: 15px; font-weight: 600; cursor: pointer;
  transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
}
.btn-primary:hover  { background: #1565C0; transform: translateY(-1px);
                      box-shadow: 0 6px 20px rgba(25,118,210,.35); }
.btn-primary:active { transform: translateY(0); }
.btn-full { width: 100%; }

.alert { padding: var(--sp-3) var(--sp-4); border-radius: var(--radius-sm); font-size: var(--fs-md); margin-bottom: var(--sp-4); }
.alert-error { background: var(--danger-bg); color: var(--danger); border: 1px solid #FFCDD2; }
.alert-success { background: var(--success-bg); color: var(--success); border: 1px solid #C8E6C9; }

/* ═══════════════════════════════════════════════════════════════════════════
   APP LAYOUT
   ═══════════════════════════════════════════════════════════════════════════ */

body.app-mode { background: var(--surface3); overflow: hidden; height: 100vh; }

.app { display: flex; height: 100vh; }

/* ── Sidebar ───────────────────────────────────────────────────────────── */
.sidebar {
  width: var(--sidebar-w);
  background: var(--sidebar-bg);
  display: flex; flex-direction: column;
  flex-shrink: 0;
  transition: background var(--transition);
  overflow: hidden;
  border-right: 1px solid rgba(255,255,255,.05);
}

.sidebar-header {
  display: flex; align-items: center; gap: 10px;
  padding: 20px 20px 16px;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.sidebar .logo-icon { color: var(--primary); font-size: 22px; }
.sidebar .logo-text { color: #fff; font-size: 18px; font-weight: 700; }

/* Org picker */
.org-picker { padding: 12px 12px 4px; position: relative; }

.org-current {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; border-radius: 8px;
  cursor: pointer; color: var(--sidebar-fg);
  transition: background var(--transition);
  font-size: 13px; font-weight: 500;
}
.org-current:hover { background: var(--sidebar-active-bg); }
.org-dot { width: 10px; height: 10px; border-radius: 50%;
           background: var(--primary); flex-shrink: 0; }
.org-current span:nth-child(2) { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chevron { font-size: 10px; opacity: .6; }

.org-list {
  background: #1a1b25; border-radius: 8px; margin-top: 4px;
  overflow: hidden; border: 1px solid rgba(255,255,255,.08);
}
.org-list-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; cursor: pointer;
  font-size: 13px; color: var(--sidebar-fg);
  transition: background var(--transition);
}
.org-list-item:hover { background: rgba(255,255,255,.08); }
.org-list-item.active { color: #fff; }

/* Nav */
.sidebar-nav { flex: 1; padding: 8px 12px; overflow-y: auto; }

.nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 8px; margin-bottom: 2px;
  color: var(--sidebar-fg); text-decoration: none;
  font-size: 14px; font-weight: 500;
  transition: background var(--transition), color var(--transition);
}
.nav-item:hover  { background: var(--sidebar-active-bg); color: #fff; }
.nav-item.active { background: var(--primary); color: var(--on-primary);
                   border: 2px solid var(--primary-border);
                   box-shadow: 0 4px 12px rgba(0,0,0,.25); }
.nav-icon { font-size: 16px; width: 20px; text-align: center; }

/* Sidebar footer */
.sidebar-footer {
  padding: 16px 20px;
  border-top: 1px solid rgba(255,255,255,.07);
  display: flex; flex-direction: column; gap: 8px;
}
.user-email { font-size: 12px; color: rgba(255,255,255,.4);
              overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.btn-logout {
  background: rgba(255,255,255,.07); border: none; color: rgba(255,255,255,.55);
  border-radius: 6px; padding: 7px 12px; font-size: 13px; cursor: pointer;
  transition: background var(--transition), color var(--transition);
  text-align: left;
}
.btn-logout:hover { background: rgba(255,80,80,.2); color: #ff6b6b; }

/* ── Main area ─────────────────────────────────────────────────────────── */
.main { flex: 1; display: flex; flex-direction: column; overflow: hidden; }

.topbar {
  height: var(--topbar-h);
  background: var(--surface); border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--sp-6); flex-shrink: 0;
  box-shadow: 0 1px 4px rgba(0,0,0,.04);
  position: relative;
}
/* Slim brand accent strip — always visible, reinforces org identity
   without fighting readability. Survives both light and dark modes. */
.topbar::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--primary);
}
.topbar-title { font-size: var(--fs-xl); font-weight: 700; color: var(--text); }
.topbar-actions { display: flex; gap: 10px; }

.content { flex: 1; overflow-y: auto; padding: var(--sp-6); }

/* ═══════════════════════════════════════════════════════════════════════════
   COMPONENTS
   ═══════════════════════════════════════════════════════════════════════════ */

/* Spinner */
.spinner-wrap { display: flex; justify-content: center; padding: 80px 0; }
.spinner {
  width: 36px; height: 36px; border-radius: 50%;
  border: 3px solid #e0e0e0; border-top-color: var(--primary);
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Stat cards */
.stat-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px; margin-bottom: 28px;
}
.stat-card {
  background: var(--surface); border-radius: var(--radius); padding: var(--sp-5);
  box-shadow: var(--shadow);
  transition: transform var(--transition), box-shadow var(--transition);
  position: relative; overflow: hidden;
}
.stat-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--primary);
}
.stat-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.1); }
.stat-card.clickable-stat { cursor: pointer; }
.stat-label { font-size: var(--fs-sm); font-weight: 600; color: var(--muted); text-transform: uppercase;
              letter-spacing: .06em; margin-bottom: var(--sp-2); }
.stat-value { font-size: var(--fs-3xl); font-weight: 800; color: var(--text); line-height: 1; }
.stat-sub   { font-size: var(--fs-sm); color: var(--faint); margin-top: var(--sp-1); }
.stat-card.green::before  { background: #4CAF50; }
.stat-card.blue::before   { background: #2196F3; }
.stat-card.red::before    { background: #f44336; }
.stat-card.purple::before { background: #9C27B0; }
.stat-card.teal::before   { background: #009688; }

/* Section cards */
.card {
  background: var(--surface); border-radius: var(--radius); padding: var(--sp-5);
  box-shadow: var(--shadow); margin-bottom: var(--sp-5);
}
.card-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--sp-5); padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--border-light);
}
.card-title { font-size: var(--fs-lg); font-weight: 700; color: var(--text); }
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.card-grid .card { margin-bottom: 0; padding: 16px; transition: box-shadow .15s; }
.card-grid .card:hover { box-shadow: 0 4px 12px rgba(0,0,0,.12); }
.chip { padding: 6px 14px; border: 1px solid var(--border); border-radius: 20px; background: var(--surface); cursor: pointer; font-size: 13px; }
.chip-active { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }

/* Tables */
table { width: 100%; border-collapse: collapse; font-size: var(--fs-md); }
th { text-align: left; padding: var(--sp-3) var(--sp-4); font-size: var(--fs-xs); font-weight: 700;
     text-transform: uppercase; letter-spacing: .06em; color: var(--muted);
     background: var(--primary-bg); border-bottom: 1px solid var(--border-light); }
td { padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border-light); vertical-align: middle; }
tr:last-child td { border-bottom: none; }
tr:hover td { background: var(--primary-bg); }
.avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--primary); color: var(--on-primary);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; margin-right: 10px; vertical-align: middle;
}

/* Role badge */
.badge {
  display: inline-block; padding: 3px 10px; border-radius: 20px;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
}
.badge-owner    { background: #E8EAF6; color: #3F51B5; }
.badge-manager  { background: #E3F2FD; color: #1565C0; }
.badge-employee { background: #F3F4F6; color: var(--text-secondary); }

/* Buttons */
.btn-sm {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: 6px; font-size: 13px;
  font-weight: 600; cursor: pointer; border: none; transition: all var(--transition);
}
.btn-sm.primary  { background: var(--primary); color: var(--on-primary);
                    border: 2px solid var(--primary-border); }
.btn-sm.primary:hover { background: var(--primary-strong); filter: none; }
.btn-sm.outline  { background: transparent; border: 1.5px solid var(--primary); color: var(--primary); }
.btn-sm.outline:hover { background: var(--primary); color: var(--on-primary); }
.btn-sm.danger   { background: var(--danger-bg); color: var(--danger); }
.btn-sm.danger:hover { background: var(--danger); color: #fff; }
.btn-sm.ghost    { background: var(--surface2); color: var(--text-secondary); }
.btn-sm.ghost:hover { background: #e8e8e8; }
.btn-sm.cancel   { background: #fef2f2; color: #dc2626; border: 1.5px solid #fecaca; }
.btn-sm.cancel:hover { background: #dc2626; color: #fff; border-color: #dc2626; }

/* Date range */
.range-tabs { display: flex; gap: 4px; background: var(--surface3);
              border-radius: 8px; padding: 4px; }
.range-tab {
  padding: 6px 16px; border-radius: 6px; font-size: 13px; font-weight: 600;
  cursor: pointer; color: var(--text-secondary); border: none; background: transparent;
  transition: all var(--transition);
}
.range-tab.active { background: var(--surface); color: var(--primary);
                    box-shadow: 0 1px 4px rgba(0,0,0,.1); }

/* Charts */
.chart-wrap { position: relative; height: 220px; }

/* Org Profile */
.org-profile-grid { display: grid; grid-template-columns: 1fr 340px; gap: 24px; }
@media (max-width: 900px) { .org-profile-grid { grid-template-columns: 1fr; } }

.profile-field { margin-bottom: 16px; }
.profile-field label {
  display: block; font-size: 13px; font-weight: 600; color: var(--text-secondary); margin-bottom: 6px;
}
.profile-field input {
  padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; font-size: 14px;
  transition: border-color var(--transition);
}
.profile-field input:focus { border-color: var(--primary); outline: none; }
.profile-hint { display: block; font-size: 12px; color: var(--muted); margin-top: 4px; }

.profile-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.profile-row-3 { grid-template-columns: 2fr 1fr 1fr; }
@media (max-width: 600px) {
  .profile-row, .profile-row-3 { grid-template-columns: 1fr; }
}

/* Invoice preview card */
.invoice-preview {
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  padding: 20px; min-height: 200px;
}
.inv-prev-header { display: flex; align-items: flex-start; gap: 14px; }
.inv-prev-logo { width: 48px; height: 48px; object-fit: contain; border-radius: 6px; flex-shrink: 0; }
.inv-prev-name { font-size: 16px; font-weight: 700; color: var(--primary); }
.inv-prev-details { font-size: 12px; color: var(--text-secondary); margin-top: 4px; line-height: 1.5; }
.inv-prev-divider { border-top: 2px solid var(--primary); margin: 14px 0; }
.inv-prev-body { padding: 8px 0; }
.inv-prev-line {
  height: 10px; background: #eee; border-radius: 4px; margin-bottom: 8px;
}

/* Dark mode org profile */
body.dark .profile-field label { color: var(--muted); }
body.dark .profile-field input {
  background: #2a2a2a; border-color: var(--text); color: #e0e0e0;
}
body.dark .profile-field input:focus { border-color: var(--primary); }
body.dark .profile-hint { color: var(--muted); }
body.dark .invoice-preview { background: #1e1e1e; border-color: var(--text); }
body.dark .inv-prev-details { color: var(--muted); }
body.dark .inv-prev-line { background: #333; }

/* Branding */
.branding-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 900px) { .branding-grid { grid-template-columns: 1fr; } }

.color-row { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.color-swatch {
  width: 40px; height: 40px; border-radius: 8px; border: 2px solid rgba(0,0,0,.1);
  cursor: pointer; flex-shrink: 0; transition: transform var(--transition);
}
.color-swatch:hover { transform: scale(1.1); }
.color-input {
  flex: 1; padding: 9px 14px; border: 1.5px solid var(--border); border-radius: 8px;
  font-size: 14px; font-family: monospace; outline: none;
  transition: border-color var(--transition);
}
.color-input:focus { border-color: var(--primary); }
.color-label { font-size: 13px; font-weight: 600; color: var(--text-secondary); width: 100px; flex-shrink: 0; }

.preview-panel {
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  border-radius: var(--radius); padding: 24px; color: #fff;
  display: flex; flex-direction: column; gap: 12px;
  transition: background var(--transition);
}
.preview-bar {
  background: rgba(255,255,255,.15); border-radius: 6px; padding: 10px 14px;
  font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 8px;
}
.preview-accent {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--accent); flex-shrink: 0;
}

/* Modal */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.5);
  display: flex; align-items: center; justify-content: center;
  z-index: 1000; animation: fadeIn .15s ease;
}
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }
@keyframes fadeIn { from { opacity: 0; } }
.modal {
  background: var(--surface); border-radius: var(--radius-lg); padding: var(--sp-6);
  width: 100%; max-width: 440px;
  box-shadow: var(--shadow-lg);
  animation: slideUp .18s ease;
}
@keyframes slideUp { from { transform: translateY(20px); opacity: 0; } }
.modal-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 16px;
}
.modal-header h2 { margin: 0; font-size: 18px; font-weight: 700; }
.modal-close {
  background: var(--bg-secondary, #f5f5f5); border: 1px solid var(--border, #e0e0e0);
  color: var(--text-secondary, #666); width: 32px; height: 32px; border-radius: 8px;
  font-size: 18px; cursor: pointer; display: flex; align-items: center;
  justify-content: center; transition: background .15s, color .15s;
  line-height: 1; padding: 0; flex-shrink: 0;
}
.modal-close:hover { background: var(--danger, #f44336); color: #fff; border-color: transparent; }
body.dark .modal-close { background: #2a2a3e; border-color: #3a3a5e; color: var(--text-secondary); }
body.dark .modal-close:hover { background: #f44336; color: #fff; }
.modal-title { font-size: 18px; font-weight: 700; margin-bottom: 20px; }
.modal-field { margin-bottom: 16px; }
.modal-field label { display: block; font-size: 13px; font-weight: 600;
                     color: var(--text-secondary); margin-bottom: 6px; }
.modal-field input, .modal-field select, .modal-field textarea {
  width: 100%; padding: 10px 14px; box-sizing: border-box;
  border: 1.5px solid var(--border); border-radius: 8px; font-size: 14px; outline: none;
  font-family: inherit; transition: border-color .15s;
}
.modal-field input:focus, .modal-field select:focus, .modal-field textarea:focus {
  border-color: var(--primary); box-shadow: 0 0 0 3px rgba(25,118,210,.1);
}
.modal-footer { display: flex; gap: 10px; justify-content: flex-end; margin-top: 24px; }

/* ── Raw .modal-content ─────────────────────────────────────────────────
   Legacy class used by a few pre-brandedModal dialogs. Supplies the same
   base styling as .modal but without the default padding since those
   dialogs use inline-styled inner containers for layout. Kept as a safety
   net so any dialog that slips past brandedModal still renders correctly. */
.modal-content {
  width: 100%;
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  animation: slideUp .18s ease;
}
@media (max-width: 768px) {
  .modal-content {
    max-width: 100% !important;
    border-radius: 20px 20px 0 0 !important;
    margin: 0;
  }
}

/* ── Branded Modal ─────────────────────────────────────────────────── */
.branded-modal-header {
  background: var(--primary); color: var(--on-primary); padding: 18px 24px;
  display: flex; justify-content: space-between; align-items: center;
  font-size: 17px; font-weight: 700; flex-shrink: 0;
}
.branded-modal-close {
  background: rgba(255,255,255,.2); border: none; color: var(--on-primary);
  width: 32px; height: 32px; border-radius: 50%; font-size: 16px;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background .15s;
}
.branded-modal-close:hover { background: rgba(255,255,255,.35); }
.branded-modal-body { padding: 24px; flex: 1; min-height: 0; overflow-y: auto; }
.branded-modal-footer {
  padding: 14px 24px; border-top: 1px solid var(--border, #eee);
  display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap;
  background: var(--surface2, #fafafa); flex-shrink: 0;
}
body.dark .branded-modal-footer { background: #252535; border-color: #3a3a5e; }

/* Link box */
.link-box {
  background: var(--surface2); border-radius: 8px; padding: 12px 14px;
  font-family: monospace; font-size: 12px; word-break: break-all;
  color: var(--text); margin: 12px 0; border: 1px solid var(--border);
}

/* Toast */
.toast {
  position: fixed; bottom: var(--sp-5); right: var(--sp-5);
  background: var(--text); color: #fff;
  padding: var(--sp-3) var(--sp-5); border-radius: var(--radius);
  font-size: var(--fs-md); font-weight: 500;
  box-shadow: var(--shadow-lg);
  animation: slideIn .2s ease;
  z-index: 2000; max-width: 320px;
}
.toast.success { border-left: 4px solid var(--success); }
.toast.error   { border-left: 4px solid var(--danger); }
@keyframes slideIn { from { transform: translateX(120%); opacity: 0; } }

/* Analytics grid */
.analytics-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 900px) { .analytics-grid { grid-template-columns: 1fr; } }

/* Member stats bars */
.member-bar-row { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.member-bar-name { font-size: 13px; width: 120px; overflow: hidden;
                   text-overflow: ellipsis; white-space: nowrap; }
.member-bar-track { flex: 1; height: 8px; background: var(--border-light);
                    border-radius: 4px; overflow: hidden; }
.member-bar-fill  { height: 100%; border-radius: 4px;
                    background: var(--primary); transition: width .5s ease; }
.member-bar-val   { font-size: 12px; color: var(--muted); width: 64px; text-align: right; white-space: nowrap; }

/* Textarea */
textarea.full {
  width: 100%; border: 1.5px solid var(--border); border-radius: 8px;
  padding: 10px 14px; font-size: 13px; font-family: monospace;
  resize: vertical; outline: none; min-height: 80px;
}
textarea.full:focus { border-color: var(--primary); }

/* ── Admin ───────────────────────────────────────────────────────────────── */

/* Star nav item gets a gold accent on active */
.nav-admin { color: #f4c542 !important; }
.nav-admin.active { background: rgba(244,197,66,.12) !important; color: #f4c542 !important; }

/* Admin sub-tabs */
.admin-tabs { display: flex; gap: var(--sp-2); margin-bottom: var(--sp-5); flex-wrap: wrap; }
.admin-tab {
  padding: var(--sp-2) var(--sp-4); border-radius: var(--radius-sm); border: 1.5px solid var(--border);
  background: var(--surface); color: var(--text-secondary); font-size: var(--fs-body); font-weight: 600;
  cursor: pointer; transition: var(--transition); white-space: nowrap;
}
.admin-tab:hover { border-color: var(--primary); color: var(--primary); }
.admin-tab.active {
  background: var(--primary); color: var(--on-primary); border-color: var(--primary);
}

/* Danger button variant (consolidated) */

/* Admin manage modal member table */
#manageMemList table { width: 100%; font-size: 13px; border-collapse: collapse; }
#manageMemList th, #manageMemList td { padding: 6px 8px; border-bottom: 1px solid var(--border-light); }

/* ═══════════════════════════════════════════════════════════════════════════
   EMPLOYEE DASHBOARD — Task cards, progress, stats, messages
   ═══════════════════════════════════════════════════════════════════════════ */

/* Greeting */
.greeting-header {
  font-size: 22px; font-weight: 700; color: var(--text);
  margin-bottom: 16px; line-height: 1.3;
}

/* Insight line */
.insight-line {
  font-size: 14px; color: var(--text-secondary); margin-bottom: 8px;
}
.insight-line strong { color: var(--text); }

/* Progress bar */
.progress-wrap { margin-bottom: 24px; }
.progress-label { font-size: 13px; font-weight: 600; color: var(--text-secondary); margin-bottom: 8px; }
.progress-track {
  height: 10px; background: #e8eaed; border-radius: 99px; overflow: hidden;
}
.progress-fill {
  height: 100%; background: var(--primary); border-radius: 99px;
  transition: width .8s cubic-bezier(.4,0,.2,1);
}

/* Task cards */
.task-card {
  background: var(--surface); border-radius: var(--radius);
  box-shadow: var(--shadow); margin-bottom: 14px;
  border-left: 4px solid var(--primary);
  overflow: hidden;
}
.task-card-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px 10px;
  flex-wrap: wrap; gap: 8px;
}
.task-title { font-size: 15px; font-weight: 600; color: var(--text); flex: 1; min-width: 0; }
.task-chips { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.time-chip {
  background: var(--surface3); color: var(--text-secondary); border-radius: 20px;
  font-size: 12px; font-weight: 600; padding: 3px 10px;
}
.status-badge {
  display: inline-block; padding: 3px 10px; border-radius: 20px;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
}
.status-badge.active   { background: #E3F2FD; color: #1565C0; }
.status-badge.done     { background: #E8F5E9; color: #2e7d32; }
.status-badge.canceled { background: #ffeaea; color: #c62828; }

.notes-area {
  padding: 0 18px 14px; border-top: 1px solid #f5f5f5; margin-top: 6px;
}
.notes-textarea {
  width: 100%; min-height: 80px; padding: 10px 12px;
  border: 1.5px solid var(--border); border-radius: 8px;
  font-size: 13px; font-family: inherit; resize: vertical; outline: none;
  margin-top: 12px;
}
.notes-textarea:focus { border-color: var(--primary); }
.notes-footer { display: flex; align-items: center; margin-top: 8px; }
.task-card-footer {
  padding: 0 18px 12px;
}

/* Empty state */
.empty-state {
  text-align: center; padding: var(--sp-8) var(--sp-5); color: var(--muted);
  font-size: var(--fs-lg);
}

/* ── Messages ────────────────────────────────────────────────────────────── */

.message-post {
  display: flex; gap: 12px; padding: 14px 0;
  border-bottom: 1px solid #f5f5f5;
}
.message-post:last-child { border-bottom: none; }
.message-post.pinned {
  background: #fffdf0; border-left: 4px solid #f4c542;
  border-radius: 8px; padding: 14px 14px 14px 10px; margin-bottom: 8px;
}
.message-post.reply {
  margin-left: 8px; padding: 8px 0;
  border-bottom: none;
}

.msg-avatar {
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
  background: var(--primary); color: var(--on-primary);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700; overflow: hidden;
}
.msg-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Sortable column header — click cycles sort direction */
.th-sortable { cursor: pointer; user-select: none; }
.th-sortable:hover { background: var(--surface2); }
.th-sort-arrow { color: var(--primary); font-weight: 700; margin-left: 2px; }

/* Profile photo editor — pencil-edit overlay on avatar */
.pp-avatar-wrap:hover .pp-edit-pencil { opacity: 1; }
.pp-edit-pencil {
  position: absolute; right: -4px; bottom: -4px;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--primary); color: var(--on-primary);
  border: 2px solid var(--surface); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; padding: 0; line-height: 1;
  opacity: 0.85; transition: opacity .15s ease, transform .15s ease;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.pp-edit-pencil:hover { transform: scale(1.1); }
.msg-avatar.small { width: 28px; height: 28px; font-size: 11px; }

.msg-content { flex: 1; min-width: 0; }
.msg-meta {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 4px; flex-wrap: wrap;
}
.msg-meta strong { font-size: 14px; color: var(--text); }
.msg-time { font-size: 12px; color: #aaa; }

.msg-body {
  font-size: 14px; color: var(--text); line-height: 1.5;
  word-break: break-word;
}

.reply-thread {
  margin-top: 12px; padding-left: 16px;
  border-left: 2px solid #e8eaed;
}
.reply-compose textarea {
  width: 100%; min-height: 60px; padding: 8px 12px;
  border: 1.5px solid var(--border); border-radius: 8px;
  font-size: 13px; font-family: inherit; resize: vertical; outline: none;
  margin-top: 8px;
}
.reply-compose textarea:focus { border-color: var(--primary); }

.compose-box {
  position: fixed; bottom: 0; right: 0;
  left: var(--sidebar-w);
  background: var(--surface); border-top: 1px solid #e8eaed;
  padding: 14px 28px;
  display: flex; gap: 12px; align-items: flex-end;
  box-shadow: 0 -4px 16px rgba(0,0,0,.06);
  z-index: 100;
}
.compose-box textarea {
  flex: 1; min-height: 44px; max-height: 120px; padding: 10px 14px;
  border: 1.5px solid var(--border); border-radius: 8px;
  font-size: 14px; font-family: inherit; resize: vertical; outline: none;
}
.compose-box textarea:focus { border-color: var(--primary); }

/* ── Task Templates / QR codes ──────────────────────────────────────────── */

.template-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
}

.template-card {
  background: var(--surface); border-radius: var(--radius); padding: 20px;
  box-shadow: var(--shadow);
  display: flex; flex-direction: column;
}
.template-card-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 8px; margin-bottom: 8px;
}
.template-title { font-size: 15px; font-weight: 700; color: var(--text); flex: 1; }
.template-notes {
  font-size: 12px; color: var(--muted); margin-bottom: 12px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.template-meta { font-size: 11px; color: var(--muted); margin-top: 8px; }

.qr-wrap {
  display: flex; justify-content: center; align-items: center;
  padding: 16px 0;
  border-top: 1px solid #f5f5f5; border-bottom: 1px solid #f5f5f5;
  margin: 12px 0 4px;
}
.qr-canvas {
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
}

/* ── Premium Feature Flags (admin panel) ─────────────────────────────────── */
.feat-table { width:100%; border-collapse:collapse; margin-top:4px; }
.feat-table th, .feat-table td { padding:10px 14px; border-bottom:1px solid var(--border-light); text-align:left; }
.feat-table th { font-size:11px; text-transform:uppercase; letter-spacing:.5px; color:#aaa; font-weight:600; }
.feat-org-name { font-weight:600; color:#333; }
.feat-toggle {
  padding: 4px 14px; border-radius: 20px; border: none;
  font-size: 12px; font-weight: 700; cursor: pointer;
  transition: var(--transition);
}
.feat-on  { background: #e8f5e9; color: #2e7d32; }
.feat-on:hover  { background: #c8e6c9; }
.feat-off { background: var(--surface2); color: var(--muted); }
.feat-off:hover { background: #eeeeee; color: var(--text-secondary); }

/* ── v5 Features ──────────────────────────────────────────────────────────── */

/* Skills passport — toggle buttons in passport matrix */
.skill-toggle-btn { min-width: 36px; text-align: center; font-weight: 700; border-radius: 50%; padding: 4px 8px; }

/* Photo evidence grid */
.photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}
.photo-card {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition);
}
.photo-card:hover { transform: translateY(-2px); box-shadow: 0 6px 24px rgba(0,0,0,.12); }

/* Photo filter tabs */
.photo-tab { border-radius: 20px !important; padding: 6px 16px !important; font-size: 13px !important; }
.photo-tab.active { background: var(--primary) !important; color: var(--on-primary) !important; }

/* Shift board — status chips */
.shift-open    { color: #2e7d32; }
.shift-pending { color: #e65100; }
.shift-filled  { color: #1565c0; }

/* Grievance channel */
.grievance-row-open        { border-left: 3px solid #f44336; }
.grievance-row-investigating { border-left: 3px solid #FF9800; }
.grievance-row-resolved    { border-left: 3px solid #4CAF50; }

/* SOS alerts — pulse animation on active alert card */
@keyframes sos-pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(244,67,54,.4); }
  50%      { box-shadow: 0 0 0 12px rgba(244,67,54,0); }
}
.sos-active-card { animation: sos-pulse 1.8s infinite; }

/* Proof chain — monospace hash display */
code { font-family: 'Courier New', monospace; font-size: 11px; }

/* Climate safety — alert level bar */
.climate-extreme { color: #9C27B0; font-weight: 700; }
.climate-danger  { color: #f44336; font-weight: 700; }
.climate-warning { color: #FF5722; }
.climate-caution { color: #FF9800; }
.climate-none    { color: #4CAF50; }

/* File grievance modal textarea */
.full { width: 100%; resize: vertical; padding: 8px; border: 1px solid var(--border); border-radius: 6px; font-family: inherit; font-size: 13px; }

/* ── Task filter bar ─────────────────────────────────────────────────────── */
.filter-bar {
  display: flex; gap: 12px; align-items: center;
  margin-bottom: 20px; flex-wrap: wrap;
}
.filter-bar select {
  padding: 7px 12px; border: 1.5px solid var(--border); border-radius: 8px;
  font-size: 13px; font-weight: 500; outline: none; background: var(--surface);
  cursor: pointer; transition: border-color var(--transition);
}
.filter-bar select:focus { border-color: var(--primary); }

/* ── Member detail drilldown stats ──────────────────────────────────────── */
.member-detail-stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 12px; margin-bottom: 20px;
}
@media (max-width: 600px) { .member-detail-stats { grid-template-columns: repeat(2, 1fr); } }

/* ── Daily Activity drilldown ───────────────────────────────────────────── */
.da-section { margin-bottom: 12px; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.da-section-title {
  font-size: 13px; font-weight: 700; color: var(--muted); text-transform: uppercase;
  letter-spacing: .06em; padding: 10px 14px; cursor: pointer;
  background: var(--bg, #fafafa); user-select: none;
}
.da-section-title:hover { background: #f0f4f8; }
.da-section-title .da-count {
  display: inline-block; background: var(--primary, #1976D2); color: #fff;
  font-size: 11px; padding: 1px 7px; border-radius: 10px; margin-left: 6px;
  font-weight: 600; vertical-align: middle;
}
.da-section-body { padding: 8px 14px 12px; }

.daily-timeline { display: flex; flex-direction: column; gap: 0; position: relative; }
.daily-timeline::before {
  content: ''; position: absolute; left: 56px; top: 6px; bottom: 6px;
  width: 2px; background: var(--border, #e0e0e0);
}
.tl-event {
  display: flex; align-items: center; gap: 8px; padding: 5px 0;
  font-size: 13px; position: relative;
}
.tl-time { width: 46px; text-align: right; color: var(--muted); font-size: 12px; flex-shrink: 0; }
.tl-icon { width: 20px; text-align: center; flex-shrink: 0; position: relative; z-index: 1; }
.tl-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 600px) {
  .member-detail-stats[style*="repeat(5"] { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ── Clickable table rows ────────────────────────────────────────────────── */
.clickable-row { cursor: pointer; }
.clickable-row:hover td { background: #f0f7ff; }

/* ── REPORTS ─────────────────────────────────────────────────────────────── */
.reports-tabs { display:flex; gap:4px; background:#f0f2f5; border-radius:10px; padding:4px; }
.reports-tab { padding:7px 18px; border-radius:8px; font-size:13px; font-weight:600;
               cursor:pointer; color:#666; border:none; background:transparent;
               transition:all var(--transition); white-space:nowrap; }
.reports-tab.active { background:#fff; color:var(--primary); box-shadow:0 1px 4px rgba(0,0,0,.1); }

.chart-grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:20px; }
@media (max-width:900px) { .chart-grid-2 { grid-template-columns:1fr; } }

.skills-matrix { width:100%; border-collapse:collapse; font-size:13px; }
.skills-matrix th { background:#fafafa; border-bottom:2px solid #f0f0f0;
                    font-size:11px; font-weight:700; text-transform:uppercase;
                    letter-spacing:.05em; color:#888; }
.skills-matrix td { border-bottom:1px solid #f5f5f5; vertical-align:middle; }
.skills-matrix tr:last-child td { border-bottom:none; }
.skills-matrix tr:hover td { background:#fafbff; }

.shift-stat-cards { display:flex; flex-wrap:wrap; gap:14px; align-items:flex-start; flex:1; }
.shift-stat-cards .stat-card { flex:1; min-width:100px; }

/* ── SOS BADGE ─────────────────────────────────────────────────────────── */
.sos-nav-badge {
  display:inline-flex; align-items:center; justify-content:center;
  min-width:18px; height:18px; border-radius:9px; padding:0 5px;
  background:#f44336; color:#fff; font-size:11px; font-weight:700;
  margin-left:6px; vertical-align:middle;
  animation:sos-pulse 1.6s ease-in-out infinite;
}
@keyframes sos-pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(244,67,54,.5); }
  50%      { box-shadow: 0 0 0 6px rgba(244,67,54,0); }
}

/* ── SOS LIVE BANNER ───────────────────────────────────────────────────── */
.sos-live-banner {
  position:fixed; bottom:20px; left:50%; transform:translateX(-50%);
  z-index:9999; display:flex; align-items:center; gap:12px;
  background:#c62828; color:#fff; border-radius:12px; padding:14px 18px;
  box-shadow:0 6px 24px rgba(198,40,40,.5);
  min-width:300px; max-width:520px; width:calc(100vw - 40px);
  animation:sosBannerIn .35s cubic-bezier(.34,1.56,.64,1) forwards;
}
@keyframes sosBannerIn {
  from { opacity:0; transform:translateX(-50%) translateY(40px); }
  to   { opacity:1; transform:translateX(-50%) translateY(0);    }
}
@keyframes sosBannerOut {
  to { opacity:0; transform:translateX(-50%) translateY(40px); }
}
.sos-banner-icon { font-size:24px; flex-shrink:0; }
.sos-banner-body { flex:1; display:flex; flex-direction:column; gap:2px;
                   font-size:14px; line-height:1.4; }
.sos-banner-body strong { font-size:15px; font-weight:700; letter-spacing:.03em; }
.sos-banner-body em     { font-style:normal; opacity:.9; }
.sos-banner-dismiss {
  background:rgba(255,255,255,.2); border:none; color:#fff;
  width:28px; height:28px; border-radius:50%; cursor:pointer;
  font-size:14px; flex-shrink:0; display:flex; align-items:center; justify-content:center;
}
.sos-banner-dismiss:hover { background:rgba(255,255,255,.35); }

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE / RESPONSIVE  (≤ 768 px)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
   UTILITY CLASSES — Replace common inline styles
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Form inputs (unified) ─────────────────────────────────────────────── */
.form-input, .form-select, .form-textarea {
  width: 100%; padding: 9px 12px; box-sizing: border-box;
  border: 1.5px solid var(--border); border-radius: var(--radius-sm);
  font-size: var(--fs-md); font-family: inherit; outline: none;
  background: var(--surface); color: var(--text);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(25,118,210,.08);
}
.form-textarea { resize: vertical; min-height: 60px; }
.form-label { display: block; font-size: var(--fs-body); font-weight: 600; color: var(--text-secondary); margin-bottom: var(--sp-1); }
.form-hint { font-size: var(--fs-sm); color: var(--muted); margin-top: var(--sp-1); }
.form-group { margin-bottom: var(--fs-md); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
@media (max-width: 480px) { .form-row { grid-template-columns: 1fr; } }

/* ── Status pills (semantic) ─────────────────────────────────────────── */
.pill { display: inline-block; padding: 2px 10px; border-radius: 20px; font-size: var(--fs-xs); font-weight: 700; }
.pill-success { background: var(--success-bg); color: var(--success); }
.pill-danger  { background: var(--danger-bg); color: var(--danger); }
.pill-warning { background: var(--warning-bg); color: var(--warning); }
.pill-info    { background: var(--info-bg); color: var(--info); }
.pill-muted   { background: var(--surface3); color: var(--muted); }

/* ── Empty state ─────────────────────────────────────────────────────── */
.empty { text-align: center; padding: var(--sp-8) var(--sp-5); color: var(--muted); font-size: var(--fs-lg); }
.empty-sm { text-align: center; padding: var(--sp-5) var(--sp-4); color: var(--muted); font-size: var(--fs-body); }

/* ── Info box (key-value details) ─────────────────────────────────────── */
.info-box { background: var(--surface2); border-radius: var(--radius-sm); padding: var(--sp-4); margin: var(--sp-3) 0; }
.info-box p { margin: 0 0 var(--sp-1); font-size: var(--fs-body); }
.info-box strong { color: var(--text); }

/* ── Section header ───────────────────────────────────────────────────── */
.section-title { font-size: var(--fs-lg); font-weight: 700; color: var(--text); margin-bottom: var(--sp-4); }
.section-subtitle { font-size: var(--fs-body); color: var(--muted); margin-bottom: var(--sp-4); }

/* ── Flex/Grid helpers ────────────────────────────────────────────────── */
.flex { display: flex; }
.flex-between { display: flex; justify-content: space-between; align-items: center; }
.flex-center { display: flex; align-items: center; }
.flex-wrap { flex-wrap: wrap; }
.gap-1 { gap: var(--sp-1); }
.gap-2 { gap: var(--sp-2); }
.gap-3 { gap: var(--sp-3); }
.gap-4 { gap: var(--sp-4); }

/* ── Accordion pattern ────────────────────────────────────────────────── */
.accordion { border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.accordion + .accordion { margin-top: var(--sp-3); }
.accordion-group { border-bottom: 1px solid var(--border-light); }
.accordion-group:last-child { border-bottom: none; }
.accordion-header {
  padding: var(--sp-3) var(--sp-4); cursor: pointer; user-select: none;
  display: flex; justify-content: space-between; align-items: center;
  transition: background var(--transition);
}
.accordion-header:hover { background: var(--primary-bg); }
.accordion-chevron { font-size: var(--fs-sm); color: var(--muted); transition: transform .2s; }
.accordion-header.open .accordion-chevron { transform: rotate(90deg); }
.accordion-body { display: none; padding: var(--sp-4); border-top: 1px solid var(--border-light); background: var(--surface); }
.accordion-body.open { display: block; }

/* ── Grouped card (card with header bar) ──────────────────────────────── */
.grouped-card { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; margin-bottom: var(--sp-5); }
.grouped-card-header { padding: var(--sp-3) var(--sp-5); background: var(--primary-bg); border-bottom: 1px solid var(--border); font-weight: 600; font-size: var(--fs-md); }

/* ── Button refinements ──────────────────────────────────────────────── */
.btn-sm:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.btn-sm.success { background: var(--success-bg); color: var(--success); }
.btn-sm.success:hover { background: var(--success); color: #fff; }
.btn-sm.warning { background: var(--warning-bg); color: var(--warning); }
.btn-sm.warning:hover { background: var(--warning); color: #fff; }
.btn-sm.info { background: var(--info-bg); color: var(--info); }
.btn-sm.info:hover { background: var(--info); color: #fff; }

/* ── Table refinements ─────────────────────────────────────────────── */
.table-compact { font-size: var(--fs-body); }
.table-compact th { font-size: var(--fs-xs); padding: var(--sp-2) var(--sp-3); }
.table-compact td { padding: var(--sp-2) var(--sp-3); }

/* ── Text utilities ──────────────────────────────────────────────────────── */
.text-right { text-align: right; }
.text-center { text-align: center; }
.text-muted { color: var(--muted); }
.text-faint { color: var(--faint); }
.text-sec { color: var(--text-sec); }
.text-success { color: var(--success); }
.text-danger { color: var(--danger); }
.text-warning { color: var(--warning); }
.text-xs { font-size: var(--fs-xs); }
.text-sm { font-size: var(--fs-sm); }
.text-body { font-size: var(--fs-body); }
.text-md { font-size: var(--fs-md); }
.text-lg { font-size: var(--fs-lg); }
.text-xl { font-size: var(--fs-xl); }
.text-bold { font-weight: 600; }
.text-bolder { font-weight: 700; }
.nowrap { white-space: nowrap; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Spacing utilities ───────────────────────────────────────────────────── */
.m-0 { margin: 0; }
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: var(--sp-1); }
.mb-2 { margin-bottom: var(--sp-2); }
.mb-3 { margin-bottom: var(--sp-3); }
.mb-4 { margin-bottom: var(--sp-4); }
.mb-5 { margin-bottom: var(--sp-5); }
.mt-2 { margin-top: var(--sp-2); }
.mt-3 { margin-top: var(--sp-3); }
.mt-4 { margin-top: var(--sp-4); }
.mt-5 { margin-top: var(--sp-5); }
.p-0 { padding: 0; }
.p-3 { padding: var(--sp-3); }
.p-4 { padding: var(--sp-4); }
.p-5 { padding: var(--sp-5); }

/* ── Display utilities ───────────────────────────────────────────────────── */
.hidden { display: none; }
.block { display: block; }
.flex-1 { flex: 1; }
.w-full { width: 100%; }

/* ── Common component patterns ───────────────────────────────────────────── */
.meta-text { font-size: var(--fs-sm); color: var(--muted); }
.meta-text-xs { font-size: var(--fs-xs); color: var(--faint); }
.desc-text { font-size: var(--fs-body); color: var(--text-sec); }
.stat-big { font-size: var(--fs-3xl); font-weight: 800; }
.card-compact { padding: var(--sp-4); }
.card-compact .card-title { font-size: var(--fs-md); }
.border-left-primary { border-left: 4px solid var(--primary); }
.border-left-success { border-left: 4px solid var(--success); }
.border-left-warning { border-left: 4px solid #FF9800; }
.border-left-danger { border-left: 4px solid var(--danger); }

/* ── Table header cell common styles ─────────────────────────────────────── */
.th-right { text-align: right; padding: var(--sp-2) var(--sp-3); }
.th-center { text-align: center; padding: var(--sp-2) var(--sp-3); }
.td-right { text-align: right; }
.td-center { text-align: center; }
.td-bold { font-weight: 700; }
.td-mono { font-family: 'Courier New', monospace; font-size: var(--fs-xs); }

/* ── Grid layouts ────────────────────────────────────────────────────────── */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--sp-5); }
.grid-auto { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--sp-4); }
@media (max-width: 768px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } }

/* ── Dark mode toggle — pill slider ──────────────────────────────────────── */
.theme-toggle {
  display: flex; position: relative; width: 100%; height: 36px;
  background: var(--sidebar-active-bg, #2a2a3a); border-radius: 20px;
  margin-bottom: 8px; cursor: pointer; overflow: hidden;
  border: 2px solid var(--sidebar-active-bg, #2a2a3a);
}
.theme-toggle-option {
  flex: 1; display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 600; z-index: 1; transition: color 0.3s;
  color: var(--sidebar-fg, #aaa); user-select: none; gap: 4px;
}
.theme-toggle-option.active { color: var(--sidebar-bg, #1a1a2e); }
.theme-toggle-slider {
  position: absolute; top: 0; left: 0; width: 50%; height: 100%;
  background: var(--sidebar-fg, #ccc); border-radius: 18px;
  transition: transform 0.3s ease;
}
.theme-toggle-slider.right { transform: translateX(100%); }
body.dark .theme-toggle { background: #2a2a3a; border-color: #2a2a3a; }
body.dark .theme-toggle-slider { background: #e0e0e0; }
body.dark .theme-toggle-option.active { color: var(--text); }
body.dark .theme-toggle-option:not(.active) { color: var(--text-secondary); }
body:not(.dark) .theme-toggle { background: #e0e0e0; border-color: #e0e0e0; }
body:not(.dark) .theme-toggle-slider { background: var(--surface); }
body:not(.dark) .theme-toggle-option.active { color: var(--text); }
body:not(.dark) .theme-toggle-option:not(.active) { color: var(--muted); }

/* ── Dark mode ──────────────────────────────────────────────────────────────
   Dark mode overrides NEUTRAL tokens only. The five brand tokens
   (--primary, --primary-strong, --primary-weak, --on-primary,
   --primary-border) are recomputed by applyBranding() on theme toggle,
   NOT hardcoded here. An earlier version of this file hardcoded
   --primary: #90CAF9 in dark mode, which silently wiped out every
   org's brand color as soon as dark mode was active.
*/
body.dark {
  --text:              #ececec;
  --text-secondary:    #bbb;
  --muted:             #999;
  --faint:             #666;
  --border:            #2a2a3e;
  --border-light:      #333355;
  --surface:           #1e1e2e;
  --surface2:          #252535;
  --surface3:          #2a2a3e;
  --primary-bg:        #252535;
  --success:           #66bb6a;
  --success-bg:        #1a2e1a;
  --danger:            #ef5350;
  --danger-bg:         #2e1a1a;
  --warning:           #ffa726;
  --warning-bg:        #2e2a1a;
  --info:              #42a5f5;
  --info-bg:           #1a2a3e;
  --sev-critical-bg:   #2e1a1a;
  --sev-high-bg:       #2e2a1a;
  --sev-medium-bg:     #2e2e1a;
  --sev-low-bg:        #252535;
  --sidebar-bg:        #0a0a0f;
  --sidebar-fg:        rgba(255,255,255,.7);
  --sidebar-active-bg: rgba(255,255,255,.1);
  --shadow:            0 2px 16px rgba(0,0,0,.4);
  --shadow-md:         0 4px 24px rgba(0,0,0,.5);
  background: #121212;
  color: var(--text);
}
/* Global: unstyled buttons inherit text color in dark mode */
body.dark button:not(.btn-sm):not(.btn-primary):not(.btn-full):not([class*="tab"]) { color: inherit; }
body.dark .topbar              { background: #1e1e2e; border-color: #2a2a3e; }
body.dark .topbar-title        { color: #e0e0e0; }
body.dark .hamburger-btn       { color: #e0e0e0; }
body.dark .card, body.dark .stat-card, body.dark .task-card,
body.dark .template-card       { background: #1e1e2e; }
body.dark .card-title, body.dark .stat-value,
body.dark .task-title          { color: #e0e0e0; }
body.dark .stat-label, body.dark .stat-sub,
body.dark .card-header         { color: var(--muted); border-color: #2a2a3e; }
body.dark td, body.dark th     { color: #ccc; border-color: #2a2a3e; }
body.dark tr:hover td          { background: #252535; }
body.dark th                   { background: #252535; }
body.dark .field input, body.dark .modal-field input,
body.dark .modal-field select, body.dark .modal-field textarea  { background: #252535; border-color: #3a3a5e; color: #e0e0e0; }
body.dark .modal               { background: #1e1e2e; }
body.dark .modal-title         { color: #e0e0e0; }
body.dark .modal-field label   { color: var(--text-secondary); }
body.dark .link-box            { background: #252535; border-color: #3a3a5e; color: #ccc; }
body.dark .range-tabs, body.dark .reports-tabs { background: #252535; }
body.dark .range-tab.active, body.dark .reports-tab.active
                               { background: #333355; }
body.dark .range-tab, body.dark .reports-tab { color: var(--text-secondary); }
body.dark .btn-sm.ghost        { background: #252535; color: #ccc; }
body.dark .btn-sm.ghost:hover  { background: #333355; }
body.dark .btn-sm.outline      { border-color: var(--primary); color: var(--primary); }
body.dark .btn-sm.cancel       { background: #3b1111; color: #f87171; border-color: #7f1d1d; }
body.dark .btn-sm.cancel:hover { background: #dc2626; color: #fff; border-color: #dc2626; }
body.dark .filter-bar select   { background: #1e1e2e; border-color: #3a3a5e; color: #e0e0e0; }
/* SOS active row */
.sos-active-row { background: #fff3f3; }
/* Dark mode SOS */
body.dark .sos-active-card     { background: #2a1010; border-color: #5c1a1a; }
body.dark .sos-active-row      { background: #2a1010; }
body.dark .sos-live-banner     { background: #b71c1c; }
/* Notification bell */
.notif-bell { position:relative; background:none; border:none; cursor:pointer; font-size:20px; padding:6px; margin-right:4px; }
.notif-bell .notif-count { position:absolute; top:0; right:0; min-width:16px; height:16px; border-radius:8px; background:#f44336; color:#fff; font-size:10px; font-weight:700; display:flex; align-items:center; justify-content:center; padding:0 4px; }
.notif-dropdown { position:absolute; top:100%; right:0; width:340px; max-height:400px; overflow-y:auto; background:#fff; border:1px solid var(--border); border-radius:10px; box-shadow:0 10px 40px rgba(0,0,0,.15); z-index:10000; }
body.dark .notif-dropdown { background:#1e1e2e; border-color:#3a3a5e; }
.notif-dropdown-item { padding:12px 16px; border-bottom:1px solid #f3f4f6; cursor:pointer; transition:background .15s; }
.notif-dropdown-item:hover { background:#f9fafb; }
body.dark .notif-dropdown-item { border-color:#2a2a3e; }
body.dark .notif-dropdown-item:hover { background:#252535; }
.notif-dropdown-item .notif-title { font-weight:600; font-size:13px; color:#111; }
.notif-dropdown-item .notif-body { font-size:12px; color:#666; margin-top:2px; }
.notif-dropdown-item .notif-time { font-size:11px; color:#999; margin-top:4px; }
body.dark .notif-dropdown-item .notif-title { color:#e0e0e0; }
body.dark .notif-dropdown-item .notif-body { color:#999; }
body.dark .compose-box         { background: #1e1e2e; border-color: #2a2a3e; }
body.dark .compose-box textarea, body.dark .notes-textarea,
body.dark .reply-compose textarea,
body.dark textarea.full        { background: #252535; border-color: #3a3a5e; color: #e0e0e0; }
body.dark .msg-meta strong     { color: #e0e0e0; }
body.dark .msg-body            { color: #ccc; }
body.dark .reply-thread        { border-color: #3a3a5e; }
body.dark .toast               { background: #252535; }
body.dark .empty-state         { color: var(--text-secondary); }
body.dark .greeting-header     { color: #e0e0e0; }
body.dark .insight-line        { color: var(--text-secondary); }
body.dark .insight-line strong { color: #e0e0e0; }
body.dark .progress-track      { background: #2a2a3e; }
body.dark .member-bar-track    { background: #2a2a3e; }
body.dark .org-list            { background: #141420; border-color: rgba(255,255,255,.1); }
body.dark .status-badge.active { background: #1a2a3e; color: #90CAF9; }
body.dark ::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); }
/* Global dark mode — catch all inline-styled inputs, selects, textareas, code blocks */
body.dark input, body.dark select, body.dark textarea {
  background: #252535; border-color: #3a3a5e; color: #e0e0e0;
}
body.dark code { background: var(--surface2); color: var(--text); }
body.dark hr   { border-color: var(--border); }
body.dark .modal-overlay { background: rgba(0,0,0,.7); }
body.dark .invoice-row { background: var(--surface) !important; }
body.dark .sec-row:hover td { background: #2a2a3e; }

/* ── Dark mode readability patches ──────────────────────────────────────────
   Fixes white-on-white / dark-on-dark combos where hardcoded light hex
   backgrounds collided with text that flips via var(--text) in dark mode. */
body.dark .da-section-title       { background: #252535; }
body.dark .da-section-title:hover { background: #2a2a3e; }
body.dark .clickable-row:hover td { background: #252535; }
body.dark .skills-matrix th       { background: #252535; border-bottom-color: #3a3a5e; color: var(--muted); }
body.dark .skills-matrix td       { border-bottom-color: #2a2a3e; }
body.dark .skills-matrix tr:hover td { background: #252535; }
body.dark .message-post           { border-bottom-color: #2a2a3e; }
body.dark .message-post.pinned    { background: #2a2412; border-left-color: #d4a017; }
body.dark .ann-pinned.ann-unread  { background: #2a2010; }
body.dark .feat-org-name          { color: #e0e0e0; }
body.dark .feat-off               { background: var(--surface2); color: var(--muted); }
body.dark .feat-off:hover         { background: #333355; color: #e0e0e0; }
body.dark .feat-table th          { color: var(--muted); }
body.dark .badge-employee         { background: #2a2a3e; color: #ccc; }
body.dark .branch-card,
body.dark .branch-selector-dropdown,
body.dark .stat-badge             { background: #1e1e2e; border-color: #3a3a5e; }
body.dark .branch-option:hover    { background: #252535; }
body.dark .branch-option.active   { background: rgba(25,118,210,.15); }
body.dark .branch-selector-btn    { background: #252535; border-color: #3a3a5e; }

/* ── Linked Task Group child rows ──────────────────────────────────────
   Multi-assigned task group children (task_group_id): every cell gets a
   subtle accent tint + indent, with a 4px accent gutter on the first
   cell so a stack of siblings reads as one connected group. */
.task-group-child td {
  background: color-mix(in srgb, var(--primary) 7%, transparent);
  padding-left: 20px;
}
.task-group-child td:first-child {
  padding-left: 16px;
  box-shadow: inset 4px 0 0 var(--primary);
}
.task-group-child td:nth-child(2) {
  padding-left: 40px;
}
.task-group-child td:nth-child(3) .text-body {
  font-weight: 600;
}
.task-group-child:hover td {
  background: color-mix(in srgb, var(--primary) 12%, transparent);
}
body.dark .task-group-child td {
  background: color-mix(in srgb, var(--primary) 14%, transparent);
}
body.dark .task-group-child:hover td {
  background: color-mix(in srgb, var(--primary) 20%, transparent);
}

/* Tasks pagination — right-justified in the card header */
.tasks-pagination {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
.tasks-pagination .pg-btn {
  padding: 4px 10px;
  min-width: 32px;
  border: 1px solid var(--border-light, #e0e0e0);
  background: var(--surface);
  color: var(--text);
  border-radius: 4px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.tasks-pagination .pg-btn:hover {
  background: var(--primary-bg);
  border-color: var(--primary);
}
.tasks-pagination .pg-btn.active {
  background: var(--primary);
  color: var(--on-primary, #fff);
  border-color: var(--primary);
}
.tasks-pagination .pg-btn.pg-all {
  margin-left: 4px;
  font-weight: 600;
}
.tasks-pagination .pg-gap {
  padding: 0 2px;
  color: var(--muted);
  font-size: 13px;
  user-select: none;
}
body.dark .tasks-pagination .pg-btn {
  background: var(--surface);
  border-color: #3a3a5e;
}
body.dark .tasks-pagination .pg-btn:hover {
  background: #252535;
  border-color: var(--primary);
}

/* Hover fallbacks for rows/options that used to set bg via inline onmouseover */
.row-hoverable:hover     { background: var(--primary-bg); }
.hist-sub-option:hover   { background: var(--primary-bg, #f8f9fa); }

.task-group-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .5px;
  background: var(--primary);
  color: #fff;
  vertical-align: middle;
  text-transform: uppercase;
}

/* ══════════════════════════════════════════════════════════════════════════
   wtConfirm — branded yes/no dialog replacing native window.confirm()
   4 variants: danger / warning / info / success
   Zoom+fade entry (~200ms), brand-tinted backdrop, animated SVG draw-in icon
   ══════════════════════════════════════════════════════════════════════════ */
.wtc-overlay {
  position: fixed; inset: 0; z-index: 10001;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  background: color-mix(in srgb, var(--primary) 16%, rgba(0,0,0,.55));
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity .18s ease-out;
}
.wtc-overlay.wtc-open    { opacity: 1; }
.wtc-overlay.wtc-closing { opacity: 0; }

.wtc-modal {
  background: var(--surface);
  border-radius: 14px;
  padding: 28px 28px 20px;
  min-width: 300px; max-width: 440px;
  width: 100%;
  box-shadow: 0 24px 48px rgba(0,0,0,.25);
  text-align: center;
  transform: scale(.85);
  opacity: 0;
  transition: transform .2s ease-out, opacity .2s ease-out;
}
.wtc-open    .wtc-modal { transform: scale(1);  opacity: 1; }
.wtc-closing .wtc-modal { transform: scale(.92); opacity: 0; }

.wtc-icon {
  width: 64px; height: 64px; margin: 0 auto 14px;
  display: flex; align-items: center; justify-content: center;
}
.wtc-svg { width: 100%; height: 100%; display: block; }
.wtc-overlay.wtc-danger  .wtc-icon { color: var(--danger); }
.wtc-overlay.wtc-warning .wtc-icon { color: #FF9800; }
.wtc-overlay.wtc-info    .wtc-icon { color: var(--primary); }
.wtc-overlay.wtc-success .wtc-icon { color: var(--success); }

/* SVG draw-in animation — circle strokes in first, mark after */
.wtc-circle   { stroke-dasharray: 164; stroke-dashoffset: 164; }
.wtc-mark     { stroke-dasharray: 60;  stroke-dashoffset: 60;  }
.wtc-mark-dot { transform: scale(0); transform-origin: 30px 30px;
                transition: transform .16s ease-out .48s; }
.wtc-open .wtc-circle   { animation: wtc-draw .45s ease-out forwards; }
.wtc-open .wtc-mark     { animation: wtc-draw .35s ease-out .3s forwards; }
.wtc-open .wtc-mark-dot { transform: scale(1); }
@keyframes wtc-draw { to { stroke-dashoffset: 0; } }

.wtc-title {
  font-size: 20px; font-weight: 700;
  color: var(--text); margin-bottom: 8px;
  line-height: 1.25;
}
.wtc-message {
  font-size: 15px; line-height: 1.5;
  color: var(--text-secondary, var(--text));
  margin-bottom: 22px;
  white-space: pre-wrap;
  word-wrap: break-word;
}
.wtc-actions {
  display: flex; gap: 10px; justify-content: center;
  flex-wrap: wrap;
}
.wtc-btn {
  min-width: 104px; padding: 10px 20px;
  border: none; cursor: pointer;
  border-radius: 8px;
  font-size: 14px; font-weight: 600;
  font-family: inherit;
  transition: background .15s, transform .08s, filter .15s;
}
.wtc-btn:active         { transform: scale(.97); }
.wtc-btn:focus-visible  { outline: 2px solid var(--primary); outline-offset: 2px; }

.wtc-cancel {
  background: var(--surface2, #f5f7fa);
  color: var(--text-secondary, #555);
}
.wtc-cancel:hover { background: #e8eaed; }

.wtc-btn-danger  { background: var(--danger);  color: #fff; }
.wtc-btn-warning { background: #FF9800;        color: #fff; }
.wtc-btn-info    { background: var(--primary); color: var(--on-primary, #fff); }
.wtc-btn-success { background: var(--success); color: #fff; }
.wtc-btn-danger:hover,
.wtc-btn-warning:hover,
.wtc-btn-info:hover,
.wtc-btn-success:hover { filter: brightness(.92); }

/* Dark mode */
body.dark .wtc-overlay {
  background: color-mix(in srgb, var(--primary) 10%, rgba(0,0,0,.72));
}
body.dark .wtc-modal {
  background: #1e1e2e;
  box-shadow: 0 24px 48px rgba(0,0,0,.55);
}
body.dark .wtc-title   { color: #f0f0f0; }
body.dark .wtc-message { color: #ccc; }
body.dark .wtc-cancel  { background: #2a2a3e; color: #d0d0d0; }
body.dark .wtc-cancel:hover { background: #343456; }

@media (max-width: 480px) {
  .wtc-modal  { padding: 22px 18px 16px; border-radius: 12px; }
  .wtc-icon   { width: 52px; height: 52px; margin-bottom: 10px; }
  .wtc-title  { font-size: 18px; }
  .wtc-message{ font-size: 14px; margin-bottom: 18px; }
  .wtc-btn    { min-width: 0; flex: 1; padding: 10px 14px; }
}

/* ── Team Scorecard (Overview page) ───────────────────────────────────── */
.scorecard-card { padding: 20px; }
.scorecard-card .sc-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 16px;
}
.sc-header-left {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.sc-sparkline-wrap {
  display: inline-flex; align-items: center;
  background: var(--surface2, #f5f7fa);
  border-radius: 6px; padding: 2px 6px;
}
body.dark .sc-sparkline-wrap { background: #252535; }
.sc-sparkline { display: block; }
.sc-header-sub {
  font-size: 12px; color: var(--muted); font-weight: 500;
  text-transform: uppercase; letter-spacing: .06em;
}

.scorecard-card .sc-primary-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 12px; margin-bottom: 12px;
}
.scorecard-card .sc-primary-grid .stat-card {
  padding: 14px 16px; margin: 0;
}
.scorecard-card .sc-primary-grid .stat-card:hover {
  transform: none; box-shadow: var(--shadow);
}
.scorecard-card .sc-icon {
  font-size: 18px; line-height: 1; margin-bottom: 6px; opacity: .7;
}
.scorecard-card .sc-primary-grid .stat-label {
  margin-bottom: 4px;
}
.scorecard-card .sc-primary-grid .stat-value {
  font-size: 28px; line-height: 1;
}
.scorecard-card .sc-unit {
  font-size: 14px; font-weight: 500; color: var(--muted); margin-left: 2px;
}
.scorecard-card .sc-na { color: var(--muted); font-size: 20px; }
.scorecard-card .sc-na-sub {
  font-size: 10px; color: var(--faint); margin-top: 4px;
}
.sc-inline-bar { height: 4px; margin-top: 8px; }

.scorecard-card .sc-secondary-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 12px; margin-bottom: 4px;
}
.sc-mini-card {
  background: var(--surface2, #f5f7fa); border-radius: 8px;
  padding: 12px 14px;
  display: flex; align-items: flex-start; gap: 12px;
}
body.dark .sc-mini-card { background: #252535; }
.sc-icon-small { font-size: 20px; line-height: 1; opacity: .7; flex-shrink: 0; }
.sc-mini-body { flex: 1; min-width: 0; }
.sc-mini-label {
  font-size: 11px; font-weight: 600; color: var(--muted);
  text-transform: uppercase; letter-spacing: .06em; margin-bottom: 4px;
}
.sc-mini-value {
  font-size: 20px; font-weight: 700; color: var(--text);
  line-height: 1.1; display: flex; align-items: baseline;
  gap: 8px; flex-wrap: wrap;
}
.sc-mini-denom { font-size: 13px; font-weight: 500; color: var(--muted); }
.sc-mini-bar { height: 4px; margin-top: 8px; }
.sc-mini-sublabel {
  font-size: 10px; color: var(--faint); margin-top: 4px;
  text-transform: uppercase; letter-spacing: .05em;
}
.sc-trend-pill {
  font-size: 11px; font-weight: 700;
  padding: 2px 8px; border-radius: 10px;
  display: inline-flex; align-items: center; gap: 2px;
  letter-spacing: .02em;
}

.sc-divider {
  height: 1px; background: var(--border-light, #f0f0f0);
  margin: 16px 0 14px;
}
body.dark .sc-divider { background: #2a2a3e; }

.sc-leaderboard-title {
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--muted); margin-bottom: 10px;
}
.sc-leaderboard {
  display: flex; flex-direction: column; gap: 4px;
}
.sc-rank-row {
  display: grid;
  grid-template-columns: 32px 32px minmax(120px, 1fr) minmax(80px, 1.2fr) auto;
  align-items: center; gap: 12px;
  padding: 6px 8px; border-radius: 6px;
  transition: background .15s;
}
.sc-rank-row:hover { background: var(--surface2, #f5f7fa); }
body.dark .sc-rank-row:hover { background: #252535; }
.sc-rank-num {
  font-size: 16px; font-weight: 700;
  text-align: center; color: var(--muted);
}
.sc-rank-row:first-child .sc-rank-num { font-size: 18px; }
.sc-rank-avatar {
  width: 30px !important; height: 30px !important;
  font-size: 11px !important; margin: 0 !important;
}
.sc-rank-name {
  display: flex; align-items: center; gap: 6px;
  min-width: 0; overflow: hidden;
}
.sc-rank-name-text {
  font-size: 13px; font-weight: 600; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sc-rank-bar .progress-track { height: 6px; }
.sc-rank-stats {
  font-size: 12px; color: var(--muted); white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.sc-ot-pill {
  display: inline-flex; align-items: center;
  padding: 1px 6px; border-radius: 8px;
  background: rgba(198,40,40,.12); color: var(--danger);
  font-size: 10px; font-weight: 700; letter-spacing: .03em;
  flex-shrink: 0;
}
body.dark .sc-ot-pill { background: rgba(239,83,80,.18); }

@media (max-width: 720px) {
  .scorecard-card .sc-primary-grid,
  .scorecard-card .sc-secondary-grid { grid-template-columns: 1fr; }
  .sc-rank-row {
    grid-template-columns: 28px 28px 1fr auto;
    gap: 8px;
  }
  .sc-rank-bar { display: none; }
  .sc-header-sub { display: none; }
}

/* Hamburger — hidden on desktop */
.hamburger-btn { display: none; }

/* Sidebar overlay — never visible on desktop */
.sidebar-overlay { display: none; }

@media (max-width: 768px) {

  /* ── Sidebar becomes a slide-in drawer ─────────────────────────────────── */
  .sidebar {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 300;
    transform: translateX(-100%);
    transition: transform .25s cubic-bezier(.4,0,.2,1);
    box-shadow: none;
  }
  body.nav-open .sidebar {
    transform: translateX(0);
    box-shadow: 4px 0 32px rgba(0,0,0,.35);
  }

  /* ── Dim overlay behind drawer ─────────────────────────────────────────── */
  .sidebar-overlay {
    display: block;
    position: fixed; inset: 0; z-index: 299;
    background: rgba(0,0,0,.45);
    opacity: 0; pointer-events: none;
    transition: opacity .25s ease;
  }
  body.nav-open .sidebar-overlay {
    opacity: 1; pointer-events: auto;
  }

  /* ── Main takes full width ─────────────────────────────────────────────── */
  .main { width: 100%; min-width: 0; }

  /* ── Hamburger button ──────────────────────────────────────────────────── */
  .hamburger-btn {
    display: flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border: none; background: none;
    font-size: 22px; cursor: pointer; color: var(--text);
    border-radius: 8px; flex-shrink: 0;
    transition: background var(--transition);
  }
  .hamburger-btn:hover { background: var(--surface3); }

  /* ── Reduce spacing ────────────────────────────────────────────────────── */
  .topbar  { padding: 0 14px; gap: 6px; }
  .content { padding: 14px; }

  /* ── Stat grid: 2 columns on phone ────────────────────────────────────── */
  .stat-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 16px; }
  .stat-value { font-size: 26px; }

  /* ── Cards ─────────────────────────────────────────────────────────────── */
  .card { padding: 16px; }
  .card-header { margin-bottom: 14px; }

  /* ── Tables: horizontal scroll inside cards ────────────────────────────── */
  .card { overflow-x: auto; }
  .card:has(table) { position: relative; }
  .card:has(table)::after {
    content: '';
    position: sticky; right: 0; top: 0;
    width: 24px; min-height: 100%;
    background: linear-gradient(to left, rgba(15,17,23,.35), transparent);
    pointer-events: none; flex-shrink: 0;
    float: right; margin-left: -24px;
  }
  body:not(.dark) .card:has(table)::after {
    background: linear-gradient(to left, rgba(0,0,0,.06), transparent);
  }
  table { min-width: 480px; }
  .skills-matrix { min-width: 500px; }

  /* ── Responsive card tables ────────────────────────────────────────────── */
  table.resp-cards { min-width: 0; border-collapse: separate; border-spacing: 0 8px; }
  table.resp-cards thead { display: none; }
  table.resp-cards tr {
    display: flex; flex-direction: column;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-sm); padding: 12px; margin-bottom: 4px;
  }
  body.dark table.resp-cards tr { background: #1e1e2e; border-color: var(--text); }
  table.resp-cards td {
    display: flex; justify-content: space-between; align-items: center;
    padding: 3px 0; border: none; text-align: left !important;
    font-size: 13px;
  }
  table.resp-cards td::before {
    content: attr(data-label);
    font-weight: 600; color: var(--muted); font-size: 12px;
    margin-right: 12px; flex-shrink: 0; min-width: 70px;
  }
  table.resp-cards td[data-label=""]::before { display: none; }
  table.resp-cards td[data-label=""] { justify-content: flex-end; padding-top: 6px; }
  /* Remove the scroll fade on cards that use resp-cards */
  .card:has(table.resp-cards)::after { display: none; }
  .card:has(table.resp-cards) { overflow-x: visible; }

  /* ── Skills matrix → worker cards ──────────────────────────────────────── */
  .skills-matrix { min-width: 0 !important; border-collapse: separate; border-spacing: 0 8px; }
  .skills-matrix thead { display: none; }
  .skills-matrix tr {
    display: flex; flex-wrap: wrap; gap: 6px;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-sm); padding: 12px; margin-bottom: 4px;
    align-items: center;
  }
  body.dark .skills-matrix tr { background: #1e1e2e; border-color: var(--text); }
  .skills-matrix td:first-child {
    width: 100%; font-weight: 600; margin-bottom: 4px;
    border: none; padding: 0;
  }
  .skills-matrix td:not(:first-child) {
    border: none; padding: 2px;
  }
  .skills-matrix td:not(:first-child)::before {
    content: attr(data-label);
    font-size: 10px; color: var(--muted); display: block; text-align: center;
    margin-bottom: 2px;
  }
  .card:has(.skills-matrix)::after { display: none; }
  .card:has(.skills-matrix) { overflow-x: visible; }

  /* ── DM: stack on mobile ──────────────────────────────────────────────── */
  .dm-layout { flex-direction: column; height: auto; }
  .dm-thread-list { width: 100%; min-width: 0; max-height: 200px; border-right: none; border-bottom: 1px solid var(--border); }
  .dm-message-pane { min-height: 300px; }

  /* ── Modal: full-width sheet ───────────────────────────────────────────── */
  .modal-overlay { align-items: flex-end; }
  .modal {
    max-width: 100%; width: 100%;
    border-radius: 20px 20px 0 0;
    padding: 28px 20px 32px;
    margin: 0;
  }

  /* ── Compose box (messaging) ───────────────────────────────────────────── */
  .compose-box { left: 0; padding: 10px 14px; }

  /* ── Reports tabs: scrollable row ─────────────────────────────────────── */
  .reports-tabs {
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap; padding-bottom: 2px;
  }
  .reports-tab { white-space: nowrap; padding: 7px 14px; }

  /* ── Chart grid drops to 1 col earlier ─────────────────────────────────── */
  .chart-grid-2 { grid-template-columns: 1fr; }

  /* ── Analytics grid ────────────────────────────────────────────────────── */
  .analytics-grid { grid-template-columns: 1fr; }

  /* ── Filter bar wraps cleanly ──────────────────────────────────────────── */
  .filter-bar { gap: 8px; }
  .filter-bar select { flex: 1; min-width: 0; }

  /* ── Member detail 4-col → 2-col at any size ────────────────────────────── */
  .member-detail-stats { grid-template-columns: repeat(2, 1fr); }

  /* ── Topbar title truncation ───────────────────────────────────────────── */
  .topbar-title {
    flex: 1; white-space: nowrap; overflow: hidden;
    text-overflow: ellipsis; font-size: 16px;
  }

  /* ── Toast ─────────────────────────────────────────────────────────────── */
  .toast { bottom: 14px; right: 14px; left: 14px; max-width: none; }

  /* ── Touch targets ────────────────────────────────────────────────────── */
  .btn-sm, button, .nav-item { min-height: 44px; }
  .nav-item { min-height: 48px; display: flex; align-items: center; }

  /* ── Prevent iOS zoom on inputs ──────────────────────────────────────── */
  .dm-compose input, .modal input, .modal textarea, .modal select { font-size: 16px !important; }

  /* ── Topbar actions wrap ─────────────────────────────────────────────── */
  #topbarActions { display: flex; flex-wrap: wrap; gap: 6px; }

  /* ── Plan cards responsive ──────────────────────────────────────────── */
  .plan-cards-grid { grid-template-columns: 1fr; }

  /* ── Login card ────────────────────────────────────────────────────────── */
  .login-card { padding: 32px 24px; }
  .login-wrap  { padding: 16px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   480px — Small phones
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  .stat-grid { grid-template-columns: 1fr; gap: 8px; }
  .stat-value { font-size: 22px; }
  .plan-cards-grid { grid-template-columns: 1fr; }

  table { font-size: 12px; }
  th, td { padding: 6px 8px; }

  .topbar-title { font-size: 14px; }

  .kanban-wrapper { flex-direction: column; }
  .kanban-column { max-width: 100%; min-width: 0; }

  #topbarActions { flex-direction: column; width: 100%; }
  #topbarActions .btn-sm { width: 100%; text-align: center; }

  .filter-bar { flex-direction: column; }
  .filter-bar select, .filter-bar input { width: 100%; }

  .card { padding: 12px; }
  .content { padding: 10px; }

}

/* ═══════════════════════════════════════════════════════════════════════════
   1024px — Tablet breakpoint: icon-only sidebar
   ═══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 769px) and (max-width: 1024px) {
  :root { --sidebar-w: 60px; }

  .sidebar { width: 60px; overflow: visible; }
  .sidebar:hover { width: 240px; }
  .sidebar { transition: width .2s ease; }

  .nav-item { position: relative; padding: 12px 18px; white-space: nowrap; overflow: hidden; }
  .nav-item .nav-icon { flex-shrink: 0; }

  /* Hide labels; show on hover */
  .sidebar:not(:hover) .nav-item { justify-content: center; font-size: 0; }
  .sidebar:not(:hover) .nav-icon { font-size: 18px; margin: 0; }
  .sidebar:not(:hover) .org-switcher { padding: 8px; }
  .sidebar:not(:hover) #orgCurrentName,
  .sidebar:not(:hover) .sidebar-footer .dark-toggle,
  .sidebar:not(:hover) .sidebar-footer #changePwdBtn,
  .sidebar:not(:hover) .sidebar-footer #logoutBtn span { font-size: 0; overflow: hidden; width: 0; }
  .sidebar:not(:hover) .refresh-indicator { display: none; }
  .sidebar:not(:hover) .nav-group-header { display: none; }
  .sidebar:not(:hover) .nav-group-items .nav-item { padding-left: 18px; }

  .sidebar:hover .nav-item { font-size: 14px; }

  .main { width: calc(100% - 60px); }
  .sidebar:hover ~ .main { width: calc(100% - 240px); }

  .stat-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Global fixes (all sizes)
   ═══════════════════════════════════════════════════════════════════════════ */
/* Prevent iOS zoom on form inputs */
.modal input, .modal textarea, .modal select { font-size: 16px; }

/* Kanban scroll hint on mobile */
@media (max-width: 768px) {
  .kanban-wrapper {
    position: relative;
  }
  .kanban-wrapper::after {
    content: '';
    position: sticky;
    right: 0;
    top: 0;
    width: 32px;
    height: 100%;
    background: linear-gradient(to left, rgba(240,242,245,.9), transparent);
    pointer-events: none;
    flex-shrink: 0;
  }
  body.dark .kanban-wrapper::after {
    background: linear-gradient(to left, rgba(30,30,30,.9), transparent);
  }
}

/* Invoice table responsive */
@media (max-width: 768px) {
  .invoice-table { min-width: 500px; }
}

/* ── Time Tracking chips & buttons ─────────────────────────────────────────── */
.timer-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #e8f5e9;
  color: #2e7d32;
  border-radius: 12px;
  padding: 2px 8px;
  font-size: 12px;
  font-weight: 600;
}
.timer-chip.running {
  background: #fff3e0;
  color: #e65100;
  animation: timerPulse 2s infinite;
}
@keyframes timerPulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: .6; }
}
.btn-clock-in {
  background: #1976d2;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 12px;
  cursor: pointer;
}
.btn-clock-out {
  background: #e53935;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 12px;
  cursor: pointer;
}

/* ── DM Layout ──────────────────────────────────────────────────────────────── */
.dm-layout {
  display: flex;
  height: calc(100vh - var(--topbar-h) - 48px);
  gap: 0;
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.dm-thread-list {
  width: 280px;
  min-width: 220px;
  border-right: 1px solid var(--border);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.dm-thread-item {
  display: flex;
  flex-direction: column;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-light);
  cursor: pointer;
  transition: background var(--transition);
}
.dm-thread-item:hover { background: var(--surface2); }
.dm-thread-item.active { background: var(--info-bg); }
.dm-thread-item .dmt-name {
  font-weight: 600;
  font-size: 14px;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 6px;
}
.dm-thread-item .dmt-preview {
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dm-unread-badge {
  background: var(--accent);
  color: #fff;
  border-radius: 10px;
  padding: 1px 7px;
  font-size: 11px;
  font-weight: 700;
}
.dm-message-pane {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.dm-message-header {
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  font-weight: 700;
  font-size: 15px;
  color: var(--text);
}
.dm-messages-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.dm-message-item {
  display: flex;
  flex-direction: column;
  max-width: 70%;
}
.dm-message-item.sent { align-self: flex-end; align-items: flex-end; }
.dm-message-item.recv { align-self: flex-start; align-items: flex-start; }
.bubble {
  padding: 8px 14px;
  border-radius: 16px;
  font-size: 13px;
  line-height: 1.5;
  word-break: break-word;
}
.sent .bubble  { background: var(--primary); color: var(--on-primary); border-bottom-right-radius: 4px; }
.recv .bubble  { background: var(--surface3); color: var(--text); border-bottom-left-radius: 4px; }
.dm-message-item .dm-meta { font-size: 10px; color: var(--faint); margin-top: 2px; }
.dm-compose {
  display: flex;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--border);
}
.dm-compose input {
  flex: 1;
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 8px 16px;
  font-size: 13px;
  outline: none;
  font-family: inherit;
  background: var(--surface);
  color: var(--text);
}
.dm-compose input:focus { border-color: var(--primary); }
.dm-compose button {
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: 20px;
  padding: 8px 18px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
}
.dm-nav-badge {
  background: var(--accent);
  color: #fff;
  border-radius: 10px;
  padding: 1px 7px;
  font-size: 11px;
  font-weight: 700;
  margin-left: 6px;
}

/* ── Live Refresh indicator ──────────────────────────────────────────────────── */
.refresh-indicator {
  font-size: 11px;
  color: rgba(255,255,255,.5);
  margin-left: 12px;
}

/* ── Kanban Board ─────────────────────────────────────────────────────────────── */
.kanban-wrapper {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding-bottom: 16px;
  min-height: 400px;
}
.kanban-column {
  flex: 1;
  min-width: 260px;
  max-width: 360px;
  background: var(--surface2);
  border-radius: 10px;
  padding: 12px;
  display: flex;
  flex-direction: column;
}
.kanban-column-header {
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .5px;
  padding: 8px 12px;
  border-radius: 6px;
  margin-bottom: 10px;
  color: #fff;
}
.kanban-column-header.col-open        { background: #1976D2; }
.kanban-column-header.col-in_progress { background: #F57C00; }
.kanban-column-header.col-review      { background: #7B1FA2; }
.kanban-column-header.col-done        { background: #388E3C; }
.kanban-column-header .col-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 20px; padding: 0 6px;
  border-radius: 10px; background: rgba(255,255,255,.3);
  font-size: 11px; font-weight: 700; margin-left: 6px;
}

.kanban-cards {
  flex: 1;
  min-height: 60px;
  transition: background .15s;
}
.kanban-cards.drag-over {
  background: rgba(25,118,210,.08);
  border-radius: 8px;
}
.kanban-card {
  background: var(--surface);
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 8px;
  box-shadow: 0 1px 3px rgba(0,0,0,.1);
  cursor: grab;
  transition: opacity .15s, box-shadow .15s;
}
.kanban-card:active { cursor: grabbing; }
.kanban-card.dragging { opacity: .45; }
.kanban-card-title {
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.kanban-card-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #777;
}
.kanban-add-btn {
  margin-top: 8px;
  padding: 8px;
  text-align: center;
  border: 2px dashed #ccc;
  border-radius: 8px;
  color: var(--muted);
  cursor: pointer;
  font-size: 13px;
  transition: border-color .15s, color .15s;
}
.kanban-add-btn:hover { border-color: #1976D2; color: #1976D2; }

/* ── Priority dots ────────────────────────────────────────────────────────────── */
.priority-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.priority-dot.urgent { background: #D32F2F; }
.priority-dot.high   { background: #F57C00; }
.priority-dot.medium { background: #1976D2; }
.priority-dot.low    { background: #9E9E9E; }

/* ── Priority badges (pill labels) ────────────────────────────────────────────── */
.priority-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  color: #fff;
}
.priority-badge.urgent { background: #D32F2F; }
.priority-badge.high   { background: #F57C00; }
.priority-badge.medium { background: #1976D2; }
.priority-badge.low    { background: #9E9E9E; }

/* ── Status badge (new statuses) ──────────────────────────────────────────────── */
.status-badge.open        { background: #1976D2; color: #fff; }
.status-badge.in_progress { background: #F57C00; color: #fff; }
.status-badge.review      { background: #7B1FA2; color: #fff; }

/* ── Due date overdue ─────────────────────────────────────────────────────────── */
.due-overdue { color: #D32F2F !important; font-weight: 600; }

/* ── Projects table ───────────────────────────────────────────────────────────── */
.color-swatch {
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 4px;
  border: 1px solid rgba(0,0,0,.1);
  vertical-align: middle;
}

/* ── Inline status dropdown in tasks table ────────────────────────────────────── */
.status-select {
  font-size: 12px;
  padding: 2px 4px;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: var(--surface);
  cursor: pointer;
}

/* ── Board filter bar ─────────────────────────────────────────────────────────── */
.board-topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.board-topbar select {
  font-size: 14px;
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid var(--border);
}

/* ── Dark mode overrides for kanban ───────────────────────────────────────────── */
body.dark .kanban-column { background: #2a2a2a; }
body.dark .kanban-card { background: #333; color: #eee; box-shadow: 0 1px 3px rgba(0,0,0,.3); }
body.dark .kanban-card-meta { color: var(--text-secondary); }
body.dark .kanban-add-btn { border-color: var(--text-secondary); color: var(--muted); }
body.dark .kanban-add-btn:hover { border-color: #1976D2; color: #1976D2; }
body.dark .kanban-cards.drag-over { background: rgba(25,118,210,.15); }
body.dark .status-select { background: #333; color: #eee; border-color: var(--text-secondary); }
body.dark .color-swatch { border-color: rgba(255,255,255,.2); }
body.dark .kanban-column-header .col-count { background: rgba(0,0,0,.25); }
body.dark .board-topbar select { background: #333; color: #eee; border-color: var(--text-secondary); }

/* ── Priority inline select ──────────────────────────────────────────────── */
.priority-select {
  font-size: 12px;
  padding: 2px 4px;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: var(--surface);
  cursor: pointer;
}
body.dark .priority-select { background: #333; color: #eee; border-color: var(--text-secondary); }

/* ── User Management Styles ──────────────────────────────────────────────── */

.badge-suspended {
  background: #F44336;
  color: #fff;
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 600;
}
.badge-active {
  background: #4CAF50;
  color: #fff;
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 600;
}

.member-suspended {
  opacity: 0.6;
}
.member-suspended td { color: var(--muted) !important; }

.role-select {
  font-size: 12px;
  padding: 3px 6px;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: var(--surface);
  cursor: pointer;
}
body.dark .role-select { background: #333; color: #eee; border-color: var(--text-secondary); }

.audit-log-table td { font-size: 13px; }
.audit-log-table td:first-child { font-weight: 500; white-space: nowrap; }
@media (max-width: 768px) {
  .audit-log-table { min-width: 400px; }
  .card:has(.audit-log-table) .card-header { gap: 6px; }
  .card:has(.audit-log-table) .card-header select,
  .card:has(.audit-log-table) .card-header input { flex: 1 1 45%; min-width: 0; }
}

body.dark .badge-suspended { background: #c62828; }
body.dark .badge-active { background: #2E7D32; }

/* ── Security Section ────────────────────────────────────────────────────── */

.security-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 20px 24px;
  margin-bottom: 16px;
}
.security-section h3 {
  margin: 0 0 12px 0;
  font-size: 16px;
  color: var(--text);
}
body.dark .security-section {
  background: #1e1e1e;
  border-color: var(--text);
}
body.dark .security-section h3 { color: #eee; }
@media (max-width: 768px) {
  .security-section { padding: 16px; line-height: 1.7; }
  .security-section p, .security-section li { font-size: 14px; }
}

.session-row td { padding: 8px 12px; font-size: 13px; border-bottom: 1px solid var(--border-light); }
.session-current { background: #e8f5e9; }
body.dark .session-current { background: #1b3a1b; }
body.dark .session-row td { border-bottom-color: var(--text); }

.qr-container {
  background: var(--surface2);
  border-radius: 8px;
  padding: 16px;
  margin-top: 8px;
}
body.dark .qr-container { background: #2a2a2a; }

.btn-danger {
  background: #F44336;
  color: #fff;
  border: none;
  padding: 6px 16px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
}
.btn-danger:hover { background: #d32f2f; }

.ip-allowlist-table { border-collapse: collapse; }
.ip-allowlist-table th {
  text-align: left;
  padding: 8px 12px;
  font-size: 12px;
  color: var(--muted);
  border-bottom: 2px solid var(--border);
}
.ip-allowlist-table td {
  padding: 8px 12px;
  font-size: 13px;
  border-bottom: 1px solid var(--border-light);
}
body.dark .ip-allowlist-table th { border-bottom-color: var(--text); color: var(--text-secondary); }
body.dark .ip-allowlist-table td { border-bottom-color: var(--text); }

/* ═══════════════════════════════════════════════════════════════════════════
   BILLING & SUBSCRIPTIONS
   ═══════════════════════════════════════════════════════════════════════════ */

.trial-banner {
  background: linear-gradient(135deg, var(--primary), var(--primary-strong));
  color: var(--on-primary);
  padding: 14px 20px;
  border-radius: var(--radius);
  margin-bottom: 20px;
  font-size: 14px;
  font-weight: 500;
}
.trial-banner span { font-weight: 700; }

.billing-status-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  text-transform: capitalize;
}

.member-usage-bar {
  height: 8px;
  background: #e0e0e0;
  border-radius: 4px;
  overflow: hidden;
  max-width: 300px;
}
body.dark .member-usage-bar { background: #444; }

.member-usage-fill {
  height: 100%;
  border-radius: 4px;
  transition: width .3s ease;
}

.plan-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}

.plan-card {
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  position: relative;
  transition: border-color var(--transition), box-shadow var(--transition);
  display: flex;
  flex-direction: column;
}
.plan-card:hover { box-shadow: var(--shadow); border-color: var(--primary-weak); }
body.dark .plan-card { background: var(--surface); }

.plan-card.current {
  border-color: var(--primary);
  box-shadow: 0 0 0 1px var(--primary);
}

.plan-card.recommended {
  border-color: var(--primary);
  box-shadow: 0 0 0 1px var(--primary-weak);
}

.plan-badge {
  position: absolute;
  top: -10px;
  right: 16px;
  background: var(--primary);
  color: var(--on-primary);
  font-size: 11px;
  font-weight: 700;
  padding: 3px 12px;
  border-radius: 10px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.plan-badge.current-badge { background: var(--success); color: #fff; }

.plan-name {
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 4px;
}

.plan-price {
  font-size: 28px;
  font-weight: 800;
  color: var(--primary);
  margin-bottom: 4px;
}

.plan-members {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 16px;
}

.plan-features {
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
}
.plan-features li {
  font-size: 13px;
  padding: 4px 0;
  color: var(--text-secondary);
}
.plan-features li::before {
  content: '✓ ';
  color: var(--success);
  font-weight: 700;
}

.plan-action { margin-top: auto; }

.invoice-table {
  width: 100%;
  border-collapse: collapse;
}
.invoice-table th {
  text-align: left;
  padding: 8px 12px;
  font-size: 12px;
  color: var(--muted);
  border-bottom: 2px solid var(--border);
}
.invoice-table td {
  padding: 8px 12px;
  font-size: 13px;
  border-bottom: 1px solid var(--border-light);
}
.invoice-table a {
  color: var(--primary);
  text-decoration: none;
  font-weight: 500;
}
.invoice-table a:hover { text-decoration: underline; }
body.dark .invoice-table th { border-bottom-color: var(--text); color: var(--text-secondary); }
body.dark .invoice-table td { border-bottom-color: var(--text); }

/* ── Billing cycle toggle ──────────────────────────────────────────────── */
.billing-cycle-toggle {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
}
body.dark .billing-cycle-toggle { border-color: var(--text); }
.cycle-btn {
  padding: 6px 16px;
  border: none;
  background: var(--surface2);
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  transition: all .2s;
}
body.dark .cycle-btn { background: #2a2a3a; color: var(--text-secondary); }
.cycle-btn.active {
  background: var(--primary);
  color: var(--on-primary);
}
.cycle-btn:hover:not(.active) { background: var(--surface2); }
body.dark .cycle-btn:hover:not(.active) { background: var(--surface3); }

/* ── Add-on cards ──────────────────────────────────────────────────────── */
.addon-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}
.addon-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px;
  transition: box-shadow .2s;
}
.addon-card:hover { box-shadow: var(--shadow); }
.addon-card.active { border-color: var(--success); background: var(--success-bg); }
.addon-card.in-plan { opacity: .65; }
body.dark .addon-card { background: var(--surface); }
body.dark .addon-card.active { border-color: var(--success); background: var(--success-bg); }

.addon-label { font-size: 15px; font-weight: 600; color: var(--text); margin-bottom: 2px; }
.addon-desc { font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.addon-price { font-size: 15px; font-weight: 700; color: var(--primary); white-space: nowrap; }

.addon-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  color: #fff;
}
.addon-badge.included { background: #9E9E9E; }
.addon-badge.active { background: #4CAF50; }

/* ── Subscription checkout modal ───────────────────────────────────────── */
.sub-modal-cycle {
  display: flex;
  justify-content: center;
  gap: 0;
  margin-bottom: 16px;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
}
body.dark .sub-modal-cycle { border-color: var(--text); }
.sub-modal-cycle .cycle-btn { flex: 1; text-align: center; padding: 8px; }

.sub-modal-plan-summary {
  background: #f8f9fa;
  border-radius: 8px;
  padding: 14px;
}
body.dark .sub-modal-plan-summary { background: #2a2a3a; }

.sub-modal-features {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
  columns: 2;
}
.sub-modal-features li {
  font-size: 12px;
  color: var(--text-secondary);
  padding: 2px 0;
}
.sub-modal-features li::before { content: '\2713 '; color: #4CAF50; font-weight: 700; }
body.dark .sub-modal-features li { color: var(--text-secondary); }

.addon-checkout-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.addon-checkout-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  transition: background .15s;
}
.addon-checkout-row:hover { background: #f0f0f0; }
body.dark .addon-checkout-row:hover { background: #333; }
.addon-checkout-row input[type="checkbox"] { width: 16px; height: 16px; }
.addon-checkout-price { margin-left: auto; font-weight: 600; color: var(--text-secondary); font-size: 13px; }
body.dark .addon-checkout-price { color: var(--text-secondary); }

.sub-modal-totals { font-size: 14px; }
body.dark .sub-modal-totals { border-top-color: #444 !important; }

@media (max-width: 768px) {
  .addon-cards-grid { grid-template-columns: 1fr; }
  .sub-modal-features { columns: 1; }
}

/* ── Admin Plan Management ─────────────────────────────────────────────── */
.admin-plan-card {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px 20px;
  margin-bottom: 12px;
  background: var(--surface);
  transition: box-shadow .2s;
}
.admin-plan-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.admin-plan-card.inactive { opacity: .55; background: var(--surface2); }
body.dark .admin-plan-card { background: #1e1e2e; border-color: #3a3a5e; }
body.dark .admin-plan-card.inactive { background: #1a1a2a; }

.admin-plan-header { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.admin-plan-name { font-size: 18px; font-weight: 700; }
.admin-plan-slug { font-size: 12px; color: var(--muted); font-family: monospace; }
.admin-plan-meta { display: flex; gap: 20px; margin-top: 8px; font-size: 13px; color: var(--text-secondary); flex-wrap: wrap; }
body.dark .admin-plan-meta { color: var(--text-secondary); }
.admin-plan-actions { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }

.badge-active { background: #e8f5e9; color: #2e7d32; padding: 2px 10px; border-radius: 10px; font-size: 11px; font-weight: 600; }
.badge-inactive { background: #ffeaea; color: #c62828; padding: 2px 10px; border-radius: 10px; font-size: 11px; font-weight: 600; }
body.dark .badge-active { background: #1b3a1b; color: #66bb6a; }
body.dark .badge-inactive { background: #3a1a1a; color: #ef5350; }

.feat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px; max-height: 300px; overflow-y: auto; padding: 8px; border: 1px solid #eee; border-radius: 6px; background: var(--surface2); }
body.dark .feat-grid { background: #252535; border-color: #3a3a5e; }
.feat-grid label { display: flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; padding: 2px 0; }
.feat-grid .group-label { grid-column: 1 / -1; font-weight: 700; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; margin-top: 8px; padding-bottom: 2px; border-bottom: 1px solid var(--border-light); }
body.dark .feat-grid .group-label { color: var(--muted); border-bottom-color: #3a3a5e; }
.feat-grid label:hover { background: #f0f0f0; border-radius: 4px; }
body.dark .feat-grid label:hover { background: #2a2a3e; }

.addon-mgmt-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.addon-mgmt-table th { text-align: left; padding: 8px 10px; border-bottom: 2px solid var(--border); color: var(--text-secondary); font-weight: 600; font-size: 11px; text-transform: uppercase; }
.addon-mgmt-table td { padding: 8px 10px; border-bottom: 1px solid var(--border-light); vertical-align: middle; }
.addon-mgmt-table tr.inactive td { opacity: .5; }
body.dark .addon-mgmt-table th { border-bottom-color: var(--text); color: var(--text-secondary); }
body.dark .addon-mgmt-table td { border-bottom-color: var(--text); }

@media (max-width: 768px) {
  .feat-grid { grid-template-columns: 1fr; }
  .admin-plan-meta { flex-direction: column; gap: 4px; }
}

/* ── Webhooks ──────────────────────────────────────────────────────────────── */
.wh-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.wh-table th { text-align: left; padding: 8px 10px; border-bottom: 2px solid var(--border); color: var(--text-secondary); font-weight: 600; font-size: 12px; text-transform: uppercase; }
.wh-table td { padding: 8px 10px; border-bottom: 1px solid var(--border-light); vertical-align: middle; }
.wh-badge { display: inline-block; padding: 2px 10px; border-radius: 12px; font-size: 12px; font-weight: 600; color: #fff; }
.wh-active  { background: #4CAF50; }
.wh-inactive { background: #9E9E9E; }
.wh-pending  { background: #FF9800; }
.wh-failed   { background: #F44336; }
.btn-danger { background: #F44336; color: #fff; border: none; }
.btn-danger:hover { background: #D32F2F; }
body.dark .wh-table th { border-bottom-color: var(--text); color: var(--text-secondary); }
body.dark .wh-table td { border-bottom-color: var(--text); }
@media (max-width: 768px) {
  .wh-table td:first-child { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* ── Announcements ────────────────────────────────────────────────────────── */
.announcement-card { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 16px; margin-bottom: 12px; transition: box-shadow .2s; }
.announcement-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.ann-pinned { border-left: 4px solid var(--primary, #1976D2); background: #f0f6ff; }
.ann-unread { border-left: 4px solid var(--accent, #FF9800); }
.ann-pinned.ann-unread { border-left: 4px solid var(--accent, #FF9800); background: #fff8f0; }
.ann-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 8px; }
.ann-title { font-size: 16px; font-weight: 600; color: #222; }
.ann-actions { display: flex; gap: 4px; }
.ann-body { font-size: 14px; color: var(--text); line-height: 1.5; margin-bottom: 10px; white-space: pre-wrap; }
.ann-meta { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); }
.read-count { color: var(--text-secondary); font-weight: 500; }
body.dark .announcement-card { background: #1e1e1e; border-color: var(--text); }
body.dark .ann-pinned { background: #1a2332; }
body.dark .ann-unread { background: #2a2010; }
body.dark .ann-title { color: #eee; }
body.dark .ann-body { color: #bbb; }
body.dark .ann-meta { color: var(--muted); }

/* ── System Banner ──────────────────────────────────────────────────────── */
.system-banner {
  width: 100%;
  padding: 10px 40px 10px 20px;
  text-align: center;
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  background: #FF9800;
  z-index: 1100;
  position: relative;
}
.system-banner-close {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  opacity: 0.8;
  padding: 0 4px;
  line-height: 1;
}
.system-banner-close:hover { opacity: 1; }
.banner-admin-section .banner-preview {
  padding: 10px 20px;
  text-align: center;
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  border-radius: 6px;
  margin-bottom: 16px;
}
.banner-color-option {
  display: inline-block;
  min-width: 48px;
  min-height: 48px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  cursor: pointer;
  border: 3px solid #ddd;
  margin-right: 12px;
  vertical-align: middle;
  padding: 0;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.banner-color-option:hover { border-color: var(--muted); transform: scale(1.1); }
.banner-color-option.selected { border-color: var(--text); box-shadow: 0 0 0 3px rgba(0,0,0,.25); transform: scale(1.1); }
body.dark .banner-color-option { border-color: var(--text-secondary); }
body.dark .banner-color-option.selected { border-color: #fff; box-shadow: 0 0 0 3px rgba(255,255,255,.3); }
button.btn-sm.banner-style-btn { min-width: 36px; border: 2px solid var(--border) !important; background: var(--surface2) !important; color: var(--text) !important; cursor: pointer; border-radius: 4px; padding: 4px 10px; font-size: 14px; }
button.btn-sm.banner-style-btn.active { border-color: #1976D2 !important; background: #1976D2 !important; color: #fff !important; }
body.dark button.btn-sm.banner-style-btn { background: #333 !important; border-color: #555 !important; color: #ccc !important; }
body.dark button.btn-sm.banner-style-btn.active { background: #1976D2 !important; border-color: #1976D2 !important; color: #fff !important; }

/* ── Icon Picker Grid ───────────────────────────────────────────────────── */
.icon-picker-grid {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-top: 8px !important;
  max-height: 220px;
  overflow-y: auto;
}
button.icon-picker-btn {
  width: 52px !important;
  height: 52px !important;
  min-width: 52px !important;
  min-height: 52px !important;
  font-size: 26px !important;
  line-height: 1 !important;
  border: 3px solid var(--border) !important;
  border-radius: 10px !important;
  background: var(--surface2) !important;
  color: inherit !important;
  cursor: pointer !important;
  padding: 0 !important;
  transition: border-color .2s, transform .15s, background .2s !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}
button.icon-picker-btn:hover { border-color: var(--muted) !important; transform: scale(1.12) !important; }
button.icon-picker-btn.selected {
  border-color: #1976D2 !important;
  background: #e3f2fd !important;
  transform: scale(1.15) !important;
  box-shadow: 0 0 0 3px rgba(25,118,210,.35) !important;
}
body.dark button.icon-picker-btn { background: #2a2a2a !important; border-color: #555 !important; }
body.dark button.icon-picker-btn:hover { border-color: #999 !important; }
body.dark button.icon-picker-btn.selected { border-color: #1976D2 !important; background: #1a2a3a !important; }

/* ── Route Optimizer Map Markers ────────────────────────────────────────── */
.route-marker-icon { background: none !important; border: none !important; }

/* ── Invoice Status Badges ─────────────────────────────────────────────── */
.inv-status { display:inline-block; padding:4px 10px; border-radius:12px; font-size:11px; font-weight:600; white-space:nowrap; }
.inv-status-draft { background:#EEEEEE; color:#616161; }
.inv-status-sent { background:#E3F2FD; color:#1565C0; }
.inv-status-paid { background:#E8F5E9; color:#2E7D32; }
.inv-status-overdue { background:#FFEBEE; color:#C62828; }
.invoice-row:hover { box-shadow:0 4px 16px rgba(0,0,0,.12) !important; }

/* ── Voice Notes ───────────────────────────────────────────────────────── */
.voice-note-player { display:flex; align-items:center; gap:8px; padding:6px 0; border-bottom:1px solid var(--border-light); }
.voice-note-player:last-child { border-bottom:none; }
.voice-note-player audio { height:32px; flex-shrink:0; }
.voice-note-player .vn-label { font-size:12px; color:#888; }

/* ── Timesheet Status Badges ──────────────────────────────────────────── */
.ts-status { display:inline-block; padding:4px 10px; border-radius:12px; font-size:11px; font-weight:600; text-transform:capitalize; white-space:nowrap; }
.ts-status-submitted { background:#FFF3E0; color:#E65100; }
.ts-status-approved  { background:#E8F5E9; color:#2E7D32; }
.ts-status-rejected  { background:#FFEBEE; color:#C62828; }
.ts-row:hover { background:var(--surface2,#f9f9f9); }

/* ── Sidebar Nav Groups ───────────────────────────────────────────────── */
.nav-group { margin-bottom: 4px; }
.sidebar .nav-group-header {
  display: flex; align-items: center; gap: 6px;
  padding: 9px 16px; cursor: pointer;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: rgba(255,255,255,.75) !important; user-select: none;
  transition: all .15s ease;
  border-radius: 8px; margin: 0 8px;
  border: 1px solid transparent;
}
.sidebar .nav-group-header:hover {
  color: #fff !important;
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.12);
}
.sidebar .nav-group-header:active {
  background: rgba(255,255,255,.14);
}
.sidebar .nav-group-header.collapsed {
  color: rgba(255,255,255,.5) !important;
}
.sidebar .nav-group-header.collapsed:hover {
  color: rgba(255,255,255,.9) !important;
}
.sidebar .nav-group-header.has-active {
  color: #fff !important;
  border-color: rgba(255,255,255,.15);
  background: rgba(255,255,255,.05);
}
.nav-group-arrow {
  font-size: 10px; width: 14px; text-align: center; flex-shrink: 0;
  transition: transform .2s ease;
}
.nav-group-items { overflow: hidden; }
.nav-group-items .nav-item { padding-left: 34px; font-size: 13px; }

/* ── Advanced Insights ─────────────────────────────────────────────── */
.insights-page { max-width: 1200px; }
.insights-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; flex-wrap: wrap; gap: 10px; }
.insights-header h2 { margin: 0; font-size: 22px; }

/* KPI grid */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin-bottom: 28px; }
.kpi-card { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 20px; text-align: center; }
.kpi-card.accent { background: linear-gradient(135deg, var(--primary, #3b82f6), #6366f1); color: #fff; border: none; }
.kpi-value { font-size: 28px; font-weight: 700; line-height: 1.2; }
.kpi-label { font-size: 13px; color: var(--muted); margin-top: 4px; }
.kpi-card.accent .kpi-label { color: rgba(255,255,255,.8); }
.kpi-trend { font-size: 12px; margin-top: 6px; }
.trend { font-weight: 600; padding: 2px 6px; border-radius: 4px; }
.trend.up { color: #22c55e; background: rgba(34,197,94,.1); }
.trend.down { color: #ef4444; background: rgba(239,68,68,.1); }
.trend.neutral { color: var(--muted); }

/* Sections */
.insights-section { margin-bottom: 28px; }
.insights-section h3 { font-size: 16px; margin: 0 0 14px; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
.insights-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; margin-bottom: 16px; }
.insights-card { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 16px; }
.insights-card.wide { grid-column: span 2; }
.insights-card.full-width { grid-column: 1 / -1; }
.card-header { font-size: 13px; font-weight: 600; color: var(--muted); margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
.card-big-number { font-size: 32px; font-weight: 700; margin-bottom: 8px; }
.card-big-number small { font-size: 14px; font-weight: 400; color: var(--muted); }
.card-stat { font-size: 13px; color: var(--muted); margin-top: 6px; }
.card-stat strong { color: var(--text); }

/* Insights table */
.insights-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.insights-table th { text-align: left; padding: 6px 8px; color: var(--muted); font-weight: 500; border-bottom: 1px solid var(--border); }
.insights-table td { padding: 6px 8px; border-bottom: 1px solid var(--border); }
.insights-table tr.warning td { color: #f59e0b; }
.insights-table tr.danger td { color: #ef4444; }

/* Estimate breakdown */
.est-breakdown { margin-top: 10px; }
.est-row { display: flex; justify-content: space-between; padding: 4px 0; font-size: 13px; }
.est-row span { color: var(--muted); }

/* Utilization gauge */
.utilization-gauge { text-align: center; padding: 10px 0; }
.gauge-circle {
  width: 120px; height: 120px; border-radius: 50%; margin: 0 auto 10px;
  background: conic-gradient(var(--gauge-color, #3b82f6) calc(var(--pct, 0) * 3.6deg), var(--border) 0);
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.gauge-circle::before {
  content: ''; width: 90px; height: 90px; border-radius: 50%;
  background: var(--card); position: absolute;
}
.gauge-circle span { position: relative; z-index: 1; font-size: 22px; font-weight: 700; }
.gauge-label { font-size: 12px; color: var(--muted); }

/* Compliance metrics */
.compliance-metrics { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.metric-row { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.metric-row span { min-width: 130px; color: var(--muted); flex-shrink: 0; }
.metric-bar { flex: 1; height: 8px; background: var(--border); border-radius: 4px; overflow: hidden; }
.metric-fill { height: 100%; background: #22c55e; border-radius: 4px; transition: width .5s ease; }
.metric-row strong { min-width: 40px; text-align: right; }

/* Climate badges */
.climate-summary { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.climate-badge { font-size: 11px; padding: 3px 8px; border-radius: 10px; background: var(--border); }
.climate-badge.badge-caution { background: #fef3c7; color: #92400e; }
.climate-badge.badge-warning { background: #fed7aa; color: #9a3412; }
.climate-badge.badge-danger { background: #fecaca; color: #991b1b; }
.climate-badge.badge-extreme { background: #ef4444; color: #fff; }

/* Empty/error states */
.empty-state { text-align: center; padding: 20px; color: var(--muted); font-size: 13px; }
.error-state { text-align: center; padding: 40px; color: #ef4444; }

/* Dark mode overrides */
body.dark .kpi-card { background: var(--card); }
body.dark .climate-badge.badge-caution { background: #78350f; color: #fef3c7; }
body.dark .climate-badge.badge-warning { background: #7c2d12; color: #fed7aa; }
body.dark .climate-badge.badge-danger { background: #7f1d1d; color: #fecaca; }

/* Mobile */
@media (max-width: 768px) {
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .insights-row { grid-template-columns: 1fr; }
  .insights-card.wide { grid-column: span 1; }
  .metric-row { flex-wrap: wrap; }
  .metric-row span { min-width: 100%; }
}

/* ── Payment Lockout Page ──────────────────────────────────────────── */
.lockout-page {
  display: flex; align-items: center; justify-content: center;
  min-height: 70vh; padding: 40px 20px;
}
.lockout-card {
  text-align: center; max-width: 420px; padding: 40px;
  background: var(--card); border: 1px solid var(--border);
  border-radius: 16px; box-shadow: 0 4px 24px rgba(0,0,0,.1);
}
.lockout-icon {
  width: 64px; height: 64px; border-radius: 50%;
  background: #ef4444; color: #fff; font-size: 32px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 20px;
}
.lockout-card h2 { margin: 0 0 12px; font-size: 22px; }
.lockout-card p { color: var(--muted); font-size: 14px; margin: 8px 0; }
.lockout-amount { margin: 20px 0; }
.lockout-amount .amount { font-size: 36px; font-weight: 700; color: var(--text); }
.lockout-amount .cycle { font-size: 16px; color: var(--muted); }
.lockout-sub { font-size: 13px; }
.lockout-pay-btn {
  display: inline-block; padding: 12px 32px; font-size: 16px; font-weight: 600;
  background: var(--primary, #3b82f6); color: #fff; border: none; border-radius: 8px;
  cursor: pointer; margin: 16px 0;
}
.lockout-pay-btn:hover { opacity: .9; }
.lockout-pay-btn:disabled { opacity: .5; cursor: not-allowed; }
.lockout-contact { font-size: 12px; color: var(--muted); margin-top: 12px; }
.lockout-contact a { color: var(--primary, #3b82f6); }

/* ── Payment Warning Modal ─────────────────────────────────────────── */
.payment-warning-overlay {
  position: fixed; inset: 0; z-index: 10000;
  background: rgba(0,0,0,.55); display: flex;
  align-items: center; justify-content: center;
}
.payment-warning-modal {
  background: #ffffff; color: #1a1a1a; border-radius: 12px; width: 440px; max-width: 92vw;
  box-shadow: 0 8px 32px rgba(0,0,0,.3); overflow: hidden;
}
.pw-header {
  background: #ef4444; color: #fff; padding: 14px 20px;
  font-size: 16px; font-weight: 600;
}
.pw-body { padding: 20px; font-size: 14px; line-height: 1.6; color: var(--text); }
.pw-body p { margin: 8px 0; }
.pw-date { background: #fef2f2; color: #991b1b; padding: 8px 12px; border-radius: 6px; margin-top: 12px !important; }
.pw-footer { padding: 12px 20px; display: flex; justify-content: flex-end; gap: 10px; border-top: 1px solid var(--border); background: var(--surface2); }
.pw-footer .btn {
  padding: 8px 16px; border: 1px solid #d1d5db; border-radius: 6px;
  background: var(--surface); color: var(--text); cursor: pointer; font-size: 13px;
}
.pw-footer .btn-primary {
  padding: 8px 20px; border: none; border-radius: 6px;
  background: #3b82f6; color: #fff; cursor: pointer; font-size: 13px; font-weight: 600;
}
.pw-footer .btn-primary:disabled { opacity: .5; cursor: not-allowed; }

/* ── Persistent Payment Banner ──────────────────────────────────────── */
.payment-banner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 10px 20px;
  background: #fef2f2; border-bottom: 2px solid #ef4444;
  color: #991b1b; font-size: 13px; flex-wrap: wrap;
}
.pb-text { flex: 1; line-height: 1.5; }
.pb-pay-btn {
  padding: 6px 16px; border: none; border-radius: 6px;
  background: #ef4444; color: #fff; font-size: 13px; font-weight: 600;
  cursor: pointer; white-space: nowrap;
}
.pb-pay-btn:hover { background: #dc2626; }
.pb-pay-btn:disabled { opacity: .5; cursor: not-allowed; }

/* ── Expiry Warning Banner (pre-expiry, auto-renew OFF) ────────────── */
.expiry-banner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 10px 20px;
  background: #fffbeb; border-bottom: 2px solid #f59e0b;
  color: #92400e; font-size: 13px; flex-wrap: wrap;
}
.eb-text { flex: 1; line-height: 1.5; }
.eb-renew-btn {
  padding: 6px 16px; border: none; border-radius: 6px;
  background: #f59e0b; color: #fff; cursor: pointer; font-size: 13px; font-weight: 600;
  white-space: nowrap;
}
.eb-renew-btn:hover { background: #d97706; }

/* Dark mode */
body.dark .expiry-banner { background: #3b2a08; color: #fcd34d; border-color: #b45309; }
body.dark .eb-renew-btn { background: #d97706; }
body.dark .payment-banner { background: #3b1111; color: #fca5a5; border-color: #991b1b; }
body.dark .pb-pay-btn { background: #dc2626; }
body.dark .lockout-card { background: #1e1e1e; box-shadow: 0 4px 24px rgba(0,0,0,.5); }
body.dark .lockout-card h2, body.dark .lockout-amount .amount { color: #f0f0f0; }
body.dark .payment-warning-modal { background: #1e1e1e; color: #e0e0e0; }
body.dark .pw-body { color: #ccc; }
body.dark .pw-date { background: #3b1111; color: #fca5a5; }
body.dark .pw-footer { background: #252525; border-color: var(--text); }
body.dark .pw-footer .btn { background: #333; color: #e0e0e0; border-color: var(--text); }

/* ── Downgrade Preview Modal ─────────────────────────────────── */
.downgrade-overlay {
  position: fixed; inset: 0; z-index: 10000;
  background: rgba(0,0,0,.5); display: flex; align-items: center; justify-content: center;
  padding: 16px;
}
.downgrade-modal {
  background: #ffffff; border-radius: 12px; width: 100%; max-width: 560px;
  max-height: 85vh; display: flex; flex-direction: column;
  box-shadow: 0 8px 32px rgba(0,0,0,.25);
}
.dg-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 20px 24px 16px; border-bottom: 1px solid #e5e7eb;
}
.dg-header h3 { margin: 0; font-size: 18px; color: #111; }
.dg-close {
  background: none; border: none; font-size: 22px; cursor: pointer;
  color: var(--text-secondary); padding: 4px 8px; line-height: 1;
}
.dg-body { padding: 16px 24px; overflow-y: auto; flex: 1; }
.dg-summary { margin-bottom: 20px; }
.dg-plan-change {
  display: flex; align-items: center; justify-content: center; gap: 16px;
  padding: 16px; background: var(--surface2); border-radius: 8px;
}
.dg-from { font-weight: 600; font-size: 16px; color: #111; }
.dg-arrow { font-size: 20px; color: #9ca3af; }
.dg-to { font-weight: 600; font-size: 16px; color: #FF9800; }
.dg-section { margin-bottom: 20px; }
.dg-section-title { margin: 0 0 8px; font-size: 14px; font-weight: 600; }
.dg-feature-list { list-style: none; padding: 0; margin: 0; }
.dg-feature-list li {
  padding: 6px 0; font-size: 13px; color: #374151;
  border-bottom: 1px solid #f3f4f6;
}
.dg-feature-lost { color: #ef4444; font-weight: 700; margin-right: 8px; }
.dg-feature-kept { color: #4CAF50; font-weight: 700; margin-right: 8px; }
.dg-member-warning {
  font-size: 13px; color: #92400e; background: #fffbeb; border: 1px solid #fcd34d;
  border-radius: 8px; padding: 12px; margin-bottom: 12px; line-height: 1.5;
}
.dg-member-counter {
  font-size: 14px; font-weight: 600; color: #374151;
  margin-bottom: 12px; padding: 8px 12px; background: #f3f4f6; border-radius: 6px;
}
.dg-member-list { max-height: 260px; overflow-y: auto; }
.dg-member-row {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px;
  border: 1px solid #e5e7eb; border-radius: 8px; margin-bottom: 6px;
  cursor: pointer; transition: background .15s;
}
.dg-member-row:hover { background: var(--surface2); }
.dg-member-row.owner { background: #f0fdf4; border-color: #bbf7d0; cursor: default; }
.dg-member-row.at-limit { opacity: .45; cursor: not-allowed; }
.dg-member-check { width: 18px; height: 18px; accent-color: var(--primary, #1976D2); }
.dg-member-info { flex: 1; display: flex; flex-direction: column; }
.dg-member-name { font-size: 14px; font-weight: 500; color: #111; }
.dg-member-email { font-size: 12px; color: #6b7280; }
.dg-owner-badge {
  font-size: 11px; color: #15803d; background: #dcfce7;
  padding: 2px 8px; border-radius: 4px; margin-top: 2px; display: inline-block;
}
.dg-member-role { font-size: 12px; color: #9ca3af; text-transform: capitalize; }
.dg-footer {
  display: flex; justify-content: flex-end; gap: 12px;
  padding: 16px 24px; border-top: 1px solid var(--border); background: var(--surface2);
  border-radius: 0 0 12px 12px;
}
.dg-confirm-btn {
  background: #FF9800 !important; color: #fff !important; border: none !important;
  padding: 10px 20px; font-weight: 600; border-radius: 6px; cursor: pointer;
}
.dg-confirm-btn:hover { background: #F57C00 !important; }
.dg-confirm-btn:disabled { opacity: .5; cursor: not-allowed; }

/* Disabled member badge in members list */
.member-disabled-badge {
  display: inline-block; font-size: 11px; background: #fef2f2; color: #991b1b;
  padding: 2px 8px; border-radius: 4px; font-weight: 500;
}

/* Dark mode for downgrade modal */
body.dark .downgrade-modal { background: #1e1e1e; }
body.dark .dg-header { border-color: var(--text); }
body.dark .dg-header h3 { color: #f0f0f0; }
body.dark .dg-close { color: var(--muted); }
body.dark .dg-plan-change { background: #252525; }
body.dark .dg-from, body.dark .dg-member-name { color: #e0e0e0; }
body.dark .dg-feature-list li { color: #ccc; border-color: var(--text); }
body.dark .dg-member-warning { background: #3b2e10; color: #fbbf24; border-color: #92400e; }
body.dark .dg-member-counter { background: #252525; color: #ccc; }
body.dark .dg-member-row { border-color: var(--text); }
body.dark .dg-member-row:hover { background: #252525; }
body.dark .dg-member-row.owner { background: #1a2e1a; border-color: #2d5a2d; }
body.dark .dg-member-email, body.dark .dg-member-role { color: var(--muted); }
body.dark .dg-footer { background: #252525; border-color: var(--text); }
body.dark .dg-footer .btn { background: #333; color: #e0e0e0; border-color: var(--text); }

/* ── Auto-Renew Toggle ───────────────────────────────────────── */
.auto-renew-section {
  margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border);
}
.auto-renew-row {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.auto-renew-info { flex: 1; }
.auto-renew-label { font-weight: 600; font-size: 14px; color: var(--text); margin-bottom: 4px; }
.auto-renew-desc { font-size: 13px; color: var(--text-secondary); line-height: 1.4; }
.auto-renew-amount { font-size: 13px; color: var(--text-secondary); margin-top: 4px; }
.auto-renew-toggle {
  position: relative; display: inline-block; width: 48px; height: 26px; flex-shrink: 0;
}
.auto-renew-toggle input { opacity: 0; width: 0; height: 0; }
.auto-renew-slider {
  position: absolute; cursor: pointer; inset: 0;
  background: #ccc; border-radius: 26px; transition: .3s;
}
.auto-renew-slider::before {
  content: ''; position: absolute; height: 20px; width: 20px;
  left: 3px; bottom: 3px; background: var(--surface); border-radius: 50%; transition: .3s;
}
.auto-renew-toggle input:checked + .auto-renew-slider { background: #4CAF50; }
.auto-renew-toggle input:checked + .auto-renew-slider::before { transform: translateX(22px); }

/* ── Worker Picker (Assign Task) ────────────────────────────── */
.ct-user-item:not(.selected):hover { background: var(--surface2, #f5f7fa); }
.ct-user-item:last-child { border-bottom: none !important; }

/* Dark mode */
body.dark .auto-renew-section { border-color: var(--border); }
body.dark .auto-renew-slider { background: #555; }
body.dark .auto-renew-toggle input:checked + .auto-renew-slider { background: #4CAF50; }

/* ── Schedule Mobile Day View ─────────────────────────────── */
.sched-mobile-nav {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px;
}
.sched-day-dots {
  display: flex; justify-content: center; gap: 6px; margin-bottom: 12px;
}
.sched-day-dot {
  width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--border);
  background: var(--surface); color: var(--text); font-size: 13px; font-weight: 600;
  cursor: pointer; transition: all .15s; display: flex; align-items: center; justify-content: center;
}
.sched-day-dot.active {
  background: var(--primary); color: var(--on-primary); border-color: var(--primary);
}
.sched-day-dot.today:not(.active) {
  border-color: var(--primary); color: var(--primary);
}
.sched-day-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px; margin-bottom: 12px; border-radius: var(--radius-sm);
  background: var(--surface); border: 1px solid var(--border); font-weight: 600; font-size: 15px;
}
.sched-day-header.today {
  background: var(--primary); color: var(--on-primary); border-color: var(--primary);
}
.sched-day-header.today .btn-sm { color: #fff; border-color: rgba(255,255,255,.4); }
.sched-day-list { min-height: 200px; }
.sched-section-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
  color: var(--muted); margin: 12px 0 6px; padding-left: 4px;
}
.sched-empty-day {
  text-align: center; padding: 40px 16px; color: var(--faint); font-size: 14px;
}
.sched-empty-icon { font-size: 40px; margin-bottom: 8px; }

/* ── Touch Active States (Phase 4) ───────────────────────── */
@media (hover: none) and (pointer: coarse) {
  .btn-sm:active, .btn-primary:active, .btn-full:active,
  .dm-thread-item:active, .sched-day-dot:active,
  .sched-shift:active {
    transform: scale(0.97);
    opacity: 0.85;
    transition: transform 0.08s, opacity 0.08s;
  }
}

/* ── Badges & Leaderboard ───────────────────────────────────── */
@keyframes badgeEarn { 0% { transform: scale(0.5); opacity: 0; } 50% { transform: scale(1.15); } 100% { transform: scale(1); opacity: 1; } }
.badge-card-earned { animation: badgeEarn .5s ease-out; }
body.dark .card [style*="E8F5E9"] { background: rgba(76,175,80,.15) !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   Branded Sidebar (experimental, opt-in via <body class="branded-sidebar">)

   Paints the entire sidebar in the org's primary color instead of the
   default near-black. All rules live inside this scope so removing the
   class — or flipping BRANDED_SIDEBAR=false in app.js — instantly reverts
   to the dark sidebar with zero visual residue.

   Every chrome color uses color-mix() against --on-primary so dark
   brands, light brands, near-whites, and near-blacks all produce
   readable chrome automatically. No per-color tuning required.
   ═══════════════════════════════════════════════════════════════════════════ */

/* The sidebar uses --sidebar-brand (a dark, subdued cousin of --primary)
   instead of --primary directly. --primary is still used for active-row
   glow accents so the org color pops in the active state. All chrome
   colors derive from --on-sidebar-brand (almost always white since the
   sidebar brand is always dark) so they stay readable regardless of
   the org's chosen hue. */
body.branded-sidebar .sidebar {
  background: var(--sidebar-brand);
  border-right-color: color-mix(in srgb, var(--on-sidebar-brand) 12%, transparent);
}
body.branded-sidebar .sidebar-header {
  border-bottom-color: color-mix(in srgb, var(--on-sidebar-brand) 12%, transparent);
}
body.branded-sidebar .sidebar-footer {
  border-top-color: color-mix(in srgb, var(--on-sidebar-brand) 12%, transparent);
}

/* Logo wordmark + triangle — previously color:var(--primary) for the
   triangle, which would be invisible on a brand-colored background. */
body.branded-sidebar .sidebar .logo-icon {
  color: var(--primary);            /* triangle pops in the bright brand */
}
body.branded-sidebar .sidebar .logo-text {
  color: var(--on-sidebar-brand);
}

/* Org picker row and its dropdown list. The org-dot has an inline
   JS-set background that we override here with !important; surgical
   because it only applies to the branded-sidebar scope. */
body.branded-sidebar .org-current {
  color: color-mix(in srgb, var(--on-sidebar-brand) 85%, transparent);
}
body.branded-sidebar .org-current:hover {
  background: color-mix(in srgb, var(--on-sidebar-brand) 12%, transparent);
}
body.branded-sidebar .org-dot {
  background: color-mix(in srgb, var(--on-sidebar-brand) 35%, transparent) !important;
  border: 1.5px solid color-mix(in srgb, var(--on-sidebar-brand) 65%, transparent);
}
body.branded-sidebar .org-list {
  background: color-mix(in srgb, var(--on-sidebar-brand) 10%, transparent);
  border-color: color-mix(in srgb, var(--on-sidebar-brand) 18%, transparent);
}
body.branded-sidebar .org-list-item {
  color: color-mix(in srgb, var(--on-sidebar-brand) 80%, transparent);
}
body.branded-sidebar .org-list-item:hover {
  background: color-mix(in srgb, var(--on-sidebar-brand) 12%, transparent);
}
body.branded-sidebar .org-list-item.active {
  color: var(--on-sidebar-brand);
}

/* Nav items. Active row gets the bright --primary as a highlight
   (this is the ONE place where the full brand color shows, making
   the active section feel like the org's color is selected). The
   default .nav-item.active rule also uses --primary as background,
   so we just make sure --primary-border is honored (already is). */
body.branded-sidebar .nav-item {
  color: color-mix(in srgb, var(--on-sidebar-brand) 78%, transparent);
}
body.branded-sidebar .nav-item:hover {
  background: color-mix(in srgb, var(--on-sidebar-brand) 10%, transparent);
  color: var(--on-sidebar-brand);
}
body.branded-sidebar .nav-item.active {
  background: var(--primary);
  color: var(--on-primary);
  border: 2px solid var(--primary-border);
  box-shadow: 0 4px 12px color-mix(in srgb, #000 35%, transparent);
}

/* Footer chrome: user email, logout, theme toggle, language picker.
   The old rules assumed a dark sidebar (rgba(255,255,255,...)); here
   they derive from --on-sidebar-brand instead. */
body.branded-sidebar .user-email {
  color: color-mix(in srgb, var(--on-sidebar-brand) 55%, transparent);
}
body.branded-sidebar .btn-logout {
  background: color-mix(in srgb, var(--on-sidebar-brand) 10%, transparent);
  color: color-mix(in srgb, var(--on-sidebar-brand) 70%, transparent);
}
body.branded-sidebar .btn-logout:hover {
  background: rgba(244,67,54,.25);
  color: #ff8a80;
}

/* Theme toggle (light/dark pill in sidebar footer). The slider uses
   an on-sidebar-brand tint and the active option flips to the
   sidebar-brand itself for contrast against the slider. */
body.branded-sidebar .theme-toggle {
  background: color-mix(in srgb, var(--on-sidebar-brand) 12%, transparent);
  border-color: color-mix(in srgb, var(--on-sidebar-brand) 15%, transparent);
}
body.branded-sidebar .theme-toggle-slider {
  background: color-mix(in srgb, var(--on-sidebar-brand) 85%, transparent);
}
body.branded-sidebar .theme-toggle-option {
  color: color-mix(in srgb, var(--on-sidebar-brand) 60%, transparent);
}
body.branded-sidebar .theme-toggle-option.active {
  color: var(--sidebar-brand);
}
body.branded-sidebar .lang-picker {
  background: color-mix(in srgb, var(--on-sidebar-brand) 10%, transparent);
  border-color: color-mix(in srgb, var(--on-sidebar-brand) 20%, transparent);
  color: var(--on-sidebar-brand);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Tutorial Engine — Spotlight Overlay + Tooltip
   ═══════════════════════════════════════════════════════════════════════════ */
.tut-overlay {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  z-index: 99990; pointer-events: all;
}
.tut-overlay svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.tut-spotlight-ring {
  position: fixed; z-index: 99991; pointer-events: none;
  border: 2px solid var(--primary, #1976D2);
  border-radius: 10px; box-shadow: 0 0 0 4px rgba(25,118,210,.25);
  transition: all .4s cubic-bezier(.4,0,.2,1);
  animation: tut-pulse 2s ease-in-out infinite;
}
@keyframes tut-pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(25,118,210,.25); }
  50% { box-shadow: 0 0 0 8px rgba(25,118,210,.12); }
}
.tut-tooltip {
  position: fixed; z-index: 99992;
  background: var(--surface, #fff); color: var(--text, #1a1a2e);
  border-radius: 14px; padding: 20px 22px 16px;
  box-shadow: 0 8px 40px rgba(0,0,0,.18), 0 2px 8px rgba(0,0,0,.08);
  max-width: 340px; min-width: 260px;
  transition: all .4s cubic-bezier(.4,0,.2,1);
  opacity: 0; transform: translateY(8px);
}
.tut-tooltip.visible { opacity: 1; transform: translateY(0); }
.tut-tooltip-arrow {
  position: absolute; width: 14px; height: 14px;
  background: var(--surface, #fff); transform: rotate(45deg);
  box-shadow: -2px -2px 4px rgba(0,0,0,.06);
}
.tut-tooltip-arrow.top { bottom: -7px; left: 24px; }
.tut-tooltip-arrow.bottom { top: -7px; left: 24px; box-shadow: 2px 2px 4px rgba(0,0,0,.06); }
.tut-tooltip-arrow.left { right: -7px; top: 20px; }
.tut-tooltip-arrow.right { left: -7px; top: 20px; box-shadow: 2px -2px 4px rgba(0,0,0,.06); }
.tut-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.tut-step-pill {
  background: var(--primary, #1976D2); color: #fff;
  font-size: 10px; font-weight: 700; padding: 3px 10px;
  border-radius: 10px; letter-spacing: .3px; white-space: nowrap;
}
.tut-title { font-size: 16px; font-weight: 700; margin: 0; line-height: 1.3; }
.tut-body { font-size: 13px; color: var(--text-secondary, #555); line-height: 1.6; margin-bottom: 16px; }
.tut-actions { display: flex; align-items: center; gap: 8px; }
.tut-btn-next {
  background: var(--primary, #1976D2); color: #fff; border: none;
  border-radius: 8px; padding: 9px 20px; font-size: 13px; font-weight: 600;
  cursor: pointer; transition: background .2s; margin-left: auto;
}
.tut-btn-next:hover { filter: brightness(.9); }
.tut-btn-back {
  background: none; border: none; color: var(--muted, #888);
  font-size: 12px; cursor: pointer; padding: 6px 10px;
}
.tut-btn-back:hover { color: var(--text, #1a1a2e); }
.tut-btn-skip {
  position: fixed; bottom: 24px; right: 24px; z-index: 99993;
  background: rgba(0,0,0,.5); color: #fff; border: none;
  border-radius: 8px; padding: 8px 16px; font-size: 12px;
  cursor: pointer; backdrop-filter: blur(4px); transition: background .2s;
}
.tut-btn-skip:hover { background: rgba(0,0,0,.7); }
.tut-action-hint {
  font-size: 11px; color: var(--primary, #1976D2); font-weight: 600;
  margin-top: 8px; display: flex; align-items: center; gap: 4px;
  animation: tut-hint-pulse 1.5s ease-in-out infinite;
}
@keyframes tut-hint-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .5; }
}

/* Interactive Guides in Knowledge Base */
.guide-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; margin-bottom: 24px; }
.guide-card {
  background: var(--surface, #fff); border: 1px solid var(--border, #e8eaed);
  border-radius: 12px; padding: 18px; cursor: pointer;
  transition: border-color .2s, box-shadow .2s; position: relative;
}
.guide-card:hover { border-color: var(--primary, #1976D2); box-shadow: 0 4px 16px rgba(0,0,0,.08); }
.guide-card .guide-icon { font-size: 28px; margin-bottom: 8px; }
.guide-card .guide-title { font-size: 14px; font-weight: 700; margin-bottom: 4px; }
.guide-card .guide-desc { font-size: 12px; color: var(--muted, #888); line-height: 1.5; margin-bottom: 10px; }
.guide-card .guide-meta { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--faint, #aaa); }
.guide-card .guide-badge { font-size: 9px; font-weight: 600; padding: 2px 8px; border-radius: 8px; text-transform: uppercase; }
.guide-card .guide-badge.mobile { background: #E8F5E9; color: #2E7D32; }
.guide-card .guide-badge.dashboard { background: #E3F2FD; color: #1565C0; }
.guide-card .guide-done { position: absolute; top: 10px; right: 10px; color: var(--success, #2e7d32); font-size: 16px; }
.guide-card .guide-start { display: inline-block; font-size: 12px; font-weight: 600; color: var(--primary, #1976D2); }

/* ── Branch Selector ─────────────────────────────────────────────────────── */
.branch-selector-wrap { position: relative; margin-left: 12px; }
.branch-selector-btn {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 12px; border: 1px solid var(--border); border-radius: 6px;
  background: var(--bg); cursor: pointer; font-size: 13px; color: var(--text);
  transition: border-color .15s;
}
.branch-selector-btn:hover { border-color: var(--primary, #1976D2); }
.branch-selector-btn .chevron { font-size: 10px; color: var(--muted); }
.branch-selector-dropdown {
  position: absolute; top: calc(100% + 4px); left: 0; min-width: 220px;
  background: var(--card-bg, #fff); border: 1px solid var(--border); border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,.12); z-index: 1000; overflow: hidden;
}
.branch-option {
  display: flex; align-items: center; gap: 8px; padding: 10px 14px;
  cursor: pointer; font-size: 13px; color: var(--text); transition: background .1s;
}
.branch-option:hover { background: var(--hover-bg, #f5f5f5); }
.branch-option.active { background: var(--primary-bg, rgba(25,118,210,.06)); font-weight: 600; }
.branch-option-icon { font-size: 14px; width: 20px; text-align: center; }

/* ── Branch Management Page ──────────────────────────────────────────────── */
.branch-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px;
}
.branch-card {
  background: var(--card-bg, #fff); border: 1px solid var(--border); border-radius: 10px;
  overflow: hidden; transition: border-color .15s, box-shadow .15s;
}
.branch-card:hover { border-color: var(--primary, #1976D2); box-shadow: 0 4px 16px rgba(0,0,0,.06); }
.branch-card-header {
  display: flex; align-items: center; gap: 12px; padding: 16px;
  border-bottom: 1px solid var(--border-light, #f0f0f0);
}
.branch-card-dot {
  width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0;
}
.branch-card-name { font-weight: 600; font-size: 15px; color: var(--text); }
.branch-card-address { font-size: 12px; color: var(--muted); margin-top: 2px; }
.branch-card-actions { margin-left: auto; }
.branch-card-stats {
  display: flex; justify-content: space-around; padding: 14px 16px;
  border-bottom: 1px solid var(--border-light, #f0f0f0);
}
.branch-stat { text-align: center; }
.branch-stat-val { display: block; font-size: 18px; font-weight: 700; color: var(--text); }
.branch-stat-lbl { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; }
.branch-card-footer {
  display: flex; justify-content: space-between; align-items: center; padding: 12px 16px;
}

/* Stat badges row */
.stat-badge {
  display: flex; flex-direction: column; align-items: center;
  padding: 12px 20px; background: var(--card-bg, #fff);
  border: 1px solid var(--border); border-radius: 8px; min-width: 100px;
}
.stat-badge-value { font-size: 24px; font-weight: 700; color: var(--text); }
.stat-badge-label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; margin-top: 2px; }

/* Work Activity — employee cards + photo gallery */
.wa-emp-card:hover { border-color: var(--primary, #1976D2) !important; box-shadow: 0 4px 16px rgba(0,0,0,.08); }
.wa-photo:hover { box-shadow: 0 4px 16px rgba(0,0,0,.12); }
.wa-sort.active { background: var(--primary, #1976D2) !important; color: #fff !important; border-radius: 4px; }

/* Invoice dialog validation */
.inv-input-error { border: 1px solid #c62828 !important; background: #fff5f5 !important; }
.inv-row-error { outline: 2px solid #c62828; }

/* Hide number-input spinners on invoice line items (qty + rate) */
.ml-qty::-webkit-inner-spin-button,
.ml-qty::-webkit-outer-spin-button,
.ml-rate::-webkit-inner-spin-button,
.ml-rate::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.ml-qty, .ml-rate { -moz-appearance: textfield; appearance: textfield; }

/* Manual line remove button — square icon button, centered glyph */
.ml-remove {
  width: 36px; height: 36px;
  padding: 0; border: 0; margin: 0;
  background: transparent;
  color: var(--danger, #c62828);
  font-size: 20px; line-height: 1;
  border-radius: 6px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  align-self: end;
  transition: background .15s, color .15s;
}
.ml-remove:hover { background: var(--danger, #c62828); color: #fff; }
.ml-remove:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* Credit memo type badges */
.cm-type-badge { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 600; letter-spacing: .3px; }
.cm-type-invoice { background: #E3F2FD; color: #1565C0; }
.cm-type-credit_memo { background: #FFF4E5; color: #663C00; }

/* Invoicing tabs */
.inv-tabs { display: flex; gap: 2px; border-bottom: 2px solid var(--border, #e0e0e0); margin-bottom: 16px; }
.inv-tab { padding: 8px 16px; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--muted, #888); border-bottom: 2px solid transparent; margin-bottom: -2px; }
.inv-tab.active { color: var(--primary, #1976D2); border-bottom-color: var(--primary, #1976D2); }

/* ──────────────────────────────────────────────────────────────────────────
   Recurring Schedules — Operations list, schedule editor, detail page
   ────────────────────────────────────────────────────────────────────────── */

/* Operations list */
.rs-pool { font-size: 10px; margin-left: 6px; padding: 1px 8px; }
.rs-num { text-align: center; font-weight: 600; }
.rs-rate-cell { min-width: 160px; }
.rs-rate { display: flex; align-items: center; gap: 6px; }
.rs-rate-bar { flex: 1; height: 6px; background: var(--surface2); border-radius: 3px; overflow: hidden; }
.rs-rate-fill { height: 100%; background: #43A047; transition: width .25s ease; }
.rs-rate[data-tone="warn"] .rs-rate-fill { background: #FB8C00; }
.rs-rate[data-tone="bad"]  .rs-rate-fill { background: #E53935; }
.rs-rate-label { font-size: 11px; color: var(--muted); min-width: 60px; text-align: right; }
.rs-actions { white-space: nowrap; }
.rs-actions .btn-sm { margin-right: 2px; }
.rs-info { margin-top: 16px; padding: 14px 16px; background: var(--surface2); border-radius: 8px; font-size: 13px; color: var(--text-secondary); }
.sched-title-link { color: var(--primary); text-decoration: none; font-weight: 600; }
.sched-title-link:hover { text-decoration: underline; }

/* Schedule editor (new + edit) */
.se-subhead { margin: 18px 0 8px; font-size: 12px; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .5px; }
.se-req { color: var(--danger, #c00); }
.se-day-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.se-day-row .chip.se-day-btn { flex: 1; min-width: 44px; text-align: center; padding: 8px 10px; font-weight: 600; }
.se-wrap { gap: 6px; }
.se-hint { margin-bottom: 10px; }
.se-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
.se-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin-bottom: 10px; }
.se-grid-geo { display: grid; grid-template-columns: 1fr 1fr 100px; gap: 8px; margin-top: 10px; }
.se-mt-8 { margin-top: 8px; }
.se-checkbox-cell { display: flex; align-items: center; padding-top: 22px; }
.se-checkbox-label { display: flex; align-items: center; gap: 8px; font-weight: normal; cursor: pointer; }
.se-collapse { margin-top: 14px; padding: 10px 12px; background: var(--surface2); border-radius: 8px; }
.se-collapse summary { cursor: pointer; font-weight: 600; font-size: 13px; }
.se-cascade { margin-top: 14px; padding: 10px 12px; background: var(--info-bg); border-radius: 8px; }
.se-cascade .se-checkbox-label { font-size: 13px; }

/* Schedule detail */
.sd-back { display: inline-block; font-size: 13px; color: var(--primary); margin-bottom: 12px; text-decoration: none; }
.sd-back:hover { text-decoration: underline; }
.sd-header { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; }
.sd-title { margin: 0; }
.sd-pill-row { margin-top: 6px; display: flex; gap: 6px; flex-wrap: wrap; }
.sd-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.sd-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
@media (max-width: 760px) { .sd-grid-2 { grid-template-columns: 1fr; } }
.sd-summary { padding: 12px 16px 14px; display: grid; grid-template-columns: 140px 1fr; gap: 8px; font-size: 13px; }
.sd-stats { padding: 16px; }
.sd-stat-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; text-align: center; }
.sd-stat-num { font-size: 28px; font-weight: 700; }
.sd-stat-good .sd-stat-num { color: #43A047; }
.sd-stat-bad  .sd-stat-num { color: #E53935; }
.sd-stat-mute .sd-stat-num { color: #9E9E9E; }
.sd-stat-summary { margin-top: 14px; font-size: 13px; color: var(--text-secondary); text-align: center; }
.sd-card { margin-bottom: 16px; }
.sd-empty { padding: 16px 20px; color: var(--faint); }
.sd-row-dim { opacity: .65; }
.sd-rate { font-weight: 600; }
.sd-rate[data-tone="good"] { color: #43A047; }
.sd-rate[data-tone="warn"] { color: #FB8C00; }
.sd-rate[data-tone="bad"]  { color: #E53935; }
.sd-rate[data-tone="none"] { color: var(--muted); font-weight: normal; }
.sd-hist { font-weight: 600; }
.sd-hist-spawned { color: #43A047; }
.sd-hist-missed  { color: #E53935; }
.sd-hist-skipped { color: #9E9E9E; }
.sd-hist-paused  { color: #FF9800; }
.sd-hist-ended   { color: #7E57C2; }

/* Edit-instance prompt modal */
.ep-intro { margin: 0 0 14px; font-size: 14px; color: var(--text-secondary); }
.ep-choice { display: block; width: 100%; text-align: left; padding: 14px; margin-bottom: 8px; }
.ep-choice:last-of-type { margin-bottom: 0; }
.ep-sub { font-size: 12px; font-weight: 400; margin-top: 4px; opacity: .85; }
.ep-sub-muted { color: var(--muted); opacity: 1; }
/* Override .btn-sm.outline:hover's full-brand-fill, which swallows the
   heading text for borderline-luminance org brands. Tint with the pale
   --primary-weak instead so text stays in --primary with reliable
   contrast regardless of brand color. */
.btn-sm.outline.ep-choice:hover { background: var(--primary-weak); color: var(--primary); }