/*===========================================
  WOOF DESIGN SYSTEM v2.0
  Core admin styles — lightweight, modern, reusable
  
  EXTRACTED FILES (load separately where needed):
    css/welcome.css       — signup/onboarding pages only
    css/trial-badge.css   — trial period UI (loaded by header)
    css/timeclock.css     — PIN pads, shift modals (loaded by header)
  
  REMOVED:
    Store Switcher        — replaced by sidebar user-dropdown
  
  CURRENT THEME: Blue (#18a0fb)
===========================================*/

/* ===== CSS CUSTOM PROPERTIES ===== */
:root {
  /* PRIMARY BRAND COLOR - Change these 3 values to retheme */
  --primary: #18a0fb;           /* Current: PawsAdmin Blue | Future: #1D8A13 Woof Green */
  --primary-dark: #0d8ae6;      /* Current: Dark Blue | Future: #166b0f */
  --primary-light: #e0f2fe;     /* Current: Light Blue | Future: #d4f4d0 */
  --primary-glow: rgba(24, 160, 251, 0.15);
  --primary-rgb: 24, 160, 251;        /* For rgba() usage */
  
  /* Secondary Colors */
  --secondary: #6366f1;         /* Indigo */
  --secondary-dark: #4f46e5;
  --secondary-light: #e0e7ff;
  
  /* Accent Colors */
  --accent: #f59e0b;            /* Amber */
  
  /* Semantic Colors */
  --danger: #ef4444;
  --success: #10b981;
  --info: #3b82f6;
  --warning: #f59e0b;

  /* Positive notice Colors */
  --notice: #a78bfa;
  --notice-light: #ede9fe;
  --notice-dark: #7c3aed;
  --notice-text: #5b21b6;

  /* Semantic Light Backgrounds */
  --success-light: #d1fae5;
  --danger-light: #fee2e2;
  --warning-light: #fef3c7;
  --info-light: #dbeafe;

  /* Semantic Text-on-Light */
  --success-text: #065f46;
  --danger-text: #991b1b;
  --warning-text: #92400e;
  --info-text: #1e40af;

  /* Semantic Dark/Hover */
  --success-dark: #059669;
  --danger-dark: #dc2626;
  --warning-dark: #d97706;
  --info-dark: #2563eb;

  /* Accent Purple */
  --accent-purple: #7c3aed;
  --accent-purple-light: #ede9fe;
  --accent-purple-text: #5b21b6;
  
  /* Neutrals - Gray Scale */
  --gray-50: #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;
  --gray-400: #9ca3af;
  --gray-500: #6b7280;
  --gray-600: #4b5563;
  --gray-700: #374151;
  --gray-800: #1f2937;
  --gray-900: #111827;
  
  /* Application Colors */
  --bg-page: #f5f7fa;
  --bg-surface: #ffffff;
  --bg-elevated: #ffffff;
  --text-primary: #111827;
  --text-secondary: #4b5563;
  --text-tertiary: #9ca3af;
  --border-color: #e5e7eb;
  --border-strong: #d1d5db;
  
  /* Typography */
  --font-primary: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'Monaco', 'Courier New', monospace;
  
  /* Spacing Scale (8px base) */
  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.5rem;    /* 24px */
  --space-6: 2rem;      /* 32px */
  --space-8: 3rem;      /* 48px */
  --space-10: 4rem;     /* 64px */
  --space-12: 6rem;     /* 96px */
  
  /* Layout Spacing — use these for page sections, not raw --space-N.
     Keeps every admin page consistent without per-page overrides.
     
     --layout-gap:     gap between sibling sections (stat-grid → attention → card)
     --layout-padding: internal padding for cards/panels
     --layout-inner:   gap within a section (header-to-content, label-to-value)
  */
  --layout-gap: 1.25rem;    /* 20px — between page sections */
  --layout-padding: 1rem;   /* 16px — card/panel internal padding */
  --layout-inner: 0.75rem;  /* 12px — within a component (header→body) */

  /* Height of the mobile bottom nav, including iOS home-indicator safe area.
     Use on mobile to reserve space under scrollable content and to offset any
     sticky page-level action bar: `bottom: var(--bottom-nav-offset)`. */
  --bottom-nav-offset: calc(72px + env(safe-area-inset-bottom, 0px));
  
  /* Border Radius */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 18px;
  --radius-full: 9999px;
  
  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-xs: 0 1px 3px rgba(0, 0, 0, 0.04);
  --shadow-card: 0 1px 3px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.03);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15);
  --shadow-modal: 0 24px 48px rgba(0, 0, 0, 0.16), 0 8px 16px rgba(0, 0, 0, 0.08);
  
  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 200ms ease;
  --transition-slow: 300ms ease;
}

/* ===== DARK MODE ===== */
[data-theme="dark"] {
  --bg-page: #111318;
  --bg-surface: #1a1d24;
  --bg-elevated: #22262e;
  --text-primary: #e8eaed;
  --text-secondary: #9aa0a9;
  --text-tertiary: #6b7280;
  --border-color: #2e3239;
  --border-strong: #3d424a;

  --gray-50: #1a1d24;
  --gray-100: #22262e;
  --gray-200: #2e3239;
  --gray-300: #3d424a;
  --gray-400: #6b7280;
  --gray-500: #9aa0a9;
  --gray-600: #b0b5bd;
  --gray-700: #d1d5db;
  --gray-800: #e5e7eb;
  --gray-900: #f3f4f6;

  --primary-light: rgba(24, 160, 251, 0.12);
  --primary-glow: rgba(24, 160, 251, 0.2);
  --secondary-light: rgba(99, 102, 241, 0.15);

  --success-light: rgba(16, 185, 129, 0.12);
  --danger-light: rgba(239, 68, 68, 0.12);
  --warning-light: rgba(245, 158, 11, 0.12);
  --info-light: rgba(59, 130, 246, 0.12);
  --notice-light: rgba(167, 139, 250, 0.12);
  --accent-purple-light: rgba(124, 58, 237, 0.12);

  --success-text: #6ee7b7;
  --danger-text: #fca5a5;
  --warning-text: #fcd34d;
  --info-text: #93c5fd;
  --notice-text: #c4b5fd;
  --accent-purple-text: #c4b5fd;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-xs: 0 1px 3px rgba(0, 0, 0, 0.25);
  --shadow-card: 0 1px 3px rgba(0,0,0,0.2), 0 4px 12px rgba(0,0,0,0.15);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.4);
  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.5);
  --shadow-modal: 0 24px 48px rgba(0, 0, 0, 0.5), 0 8px 16px rgba(0, 0, 0, 0.3);
}

/* ===== BASE RESETS ===== */
*, *::before, *::after {
  box-sizing: border-box;
}

/* Reset only if not already set by legacy code */
html:not([data-legacy]) {
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-primary);
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ===== TYPOGRAPHY ===== */
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--font-primary);
  font-weight: 700;
  line-height: 1.2;
  color: var(--text-primary);
  margin-bottom: var(--space-4);
}

.h1 { font-size: 2.5rem; }      /* 40px */
.h2 { font-size: 2rem; }        /* 32px */
.h3 { font-size: 1.5rem; }      /* 24px */
.h4 { font-size: 1.25rem; }     /* 20px */
.h5 { font-size: 1.125rem; }    /* 18px */
.h6 { font-size: 1rem; }        /* 16px */

.text-body {
  margin-bottom: var(--space-4);
  color: var(--text-secondary);
}

.link {
  color: var(--primary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.link:hover {
  color: var(--primary-dark);
  text-decoration: underline;
}

/* ===== CLICKABLE CARD LINKS ===== */

/* Make cards work as proper links */
a.card {
    text-decoration: none;
    color: inherit;
    display: block;
}

a.card:hover {
    text-decoration: none;
    color: inherit;
}

/* Ensure nested text inherits colors properly */
a.card .text-secondary {
    color: var(--text-secondary);
}

a.card:hover .text-secondary {
    color: var(--text-secondary);
}

/* Ensure headings maintain their color */
a.card h4,
a.card h5,
a.card .h5 {
    color: var(--text-primary);
}

a.card:hover h4,
a.card:hover h5,
a.card:hover .h5 {
    color: var(--text-primary);
}

/* Ensure badges maintain their styling */
a.card .badge {
    /* Badges already have their own colors, this just ensures they're preserved */
}

/* ===== BUTTONS ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  font-family: var(--font-primary);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1;
  border: 2px solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-base);
  text-decoration: none;
  white-space: nowrap;
  background: transparent;
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Button Variants */
.btn-primary {
  background: var(--primary);
  color: white;
  border-color: var(--primary);
}

.btn-primary:hover:not(:disabled) {
  background: var(--primary-dark);
  border-color: var(--primary-dark);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.btn-secondary {
  background: white;
  color: var(--primary);
  border-color: var(--primary);
}

.btn-secondary:hover:not(:disabled) {
  background: var(--primary-light);
}

.btn-outline {
  background: transparent;
  color: var(--text-primary);
  border-color: var(--border-strong);
}

.btn-outline:hover:not(:disabled) {
  background: var(--gray-50);
  border-color: var(--gray-400);
}

.btn-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--text-secondary);
  padding: var(--space-2) var(--space-3);
}

.btn-ghost:hover:not(:disabled) {
  background: var(--gray-100);
  color: var(--text-primary);
}

.btn-danger {
  background: var(--danger);
  color: white;
  border-color: var(--danger);
}

.btn-danger:hover:not(:disabled) {
  background: var(--danger-dark);
  transform: translateY(-2px);
}

.btn-success {
  background: var(--success);
  color: white;
  border-color: var(--success);
}

.btn-success:hover:not(:disabled) {
  background: var(--success-dark);
  transform: translateY(-2px);
}

/* Button Sizes */
.btn-xs {
  padding: var(--space-1) var(--space-2);
  font-size: 0.8125rem;
}

.btn-sm {
  padding: var(--space-2) var(--space-4);
  font-size: 0.875rem;
}

.btn-lg {
  padding: var(--space-4) var(--space-6);
  font-size: 1rem;
}

.btn-icon {
  padding: var(--space-3);
  aspect-ratio: 1;
}

.btn-block {
  width: 100%;
}

/* ===== CARDS ===== */
.card {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-card);
  transition: all var(--transition-base);
}

.card-hover:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: 2px solid var(--border-color);
}

.card-title {
  font-family: var(--font-primary);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.card-subtitle {
  font-size: 0.875rem;
  color: var(--text-secondary);
  margin-top: var(--space-1);
}

.card-body {
  /* Content area */
}

.card-footer {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-color);
}

/* Card Variants */
.card-elevated {
  box-shadow: var(--shadow-lg);
  border: none;
}

.card-bordered {
  border: 2px solid var(--border-strong);
  box-shadow: none;
}

.card-compact {
  padding: var(--space-4);
}

/* ===== ALERTS ===== */
.alert {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  border-left: 4px solid;
  font-size: 0.9375rem;
  margin-bottom: var(--space-4);
  position: relative;
}

.alert-icon {
  flex-shrink: 0;
  font-size: 1.25rem;
}

.alert-content {
  flex: 1;
}

.alert-title {
  font-weight: 600;
  margin-bottom: var(--space-1);
}

.alert-message {
  color: inherit;
  opacity: 0.9;
}

.alert-dismiss {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0 var(--space-2);
  font-size: 1.2rem;
  opacity: 0.6;
  transition: opacity var(--transition-fast);
}

.alert-dismiss:hover {
  opacity: 1;
}

/* Alert Variants */
.alert-success {
  background: var(--success-light);
  border-color: var(--success);
  color: var(--success-text);
}

.alert-info {
  background: var(--info-light);
  border-color: var(--info);
  color: var(--info-text);
}

.alert-warning {
  background: var(--warning-light);
  border-color: var(--warning);
  color: var(--warning-text);
}

.alert-danger {
  background: var(--danger-light);
  border-color: var(--danger);
  color: var(--danger-text);
}

/* ===== BADGES ===== */
.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-1) var(--space-3);
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: var(--radius-full);
  line-height: 1;
}

.badge-primary {
  background: var(--primary-light);
  color: var(--primary-dark);
}

.badge-secondary {
  background: var(--secondary-light);
  color: var(--secondary-dark);
}

.badge-success {
  background: var(--success-light);
  color: var(--success-text);
}

.badge-danger {
  background: var(--danger-light);
  color: var(--danger-text);
}

.badge-warning {
  background: var(--warning-light);
  color: var(--warning-text);
}

.badge-info {
  background: var(--info-light);
  color: var(--info-text);
}

.badge-gray {
  background: var(--gray-100);
  color: var(--gray-700);
}

.badge-outline {
  background: transparent;
  border: 1px solid currentColor;
}

/* ===== FORMS ===== */
.form-group {
  margin-bottom: var(--space-5);
}

.form-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--space-2);
}

.form-label-optional {
  color: var(--text-tertiary);
  font-weight: 400;
  margin-left: var(--space-1);
}

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-primary);
  font-size: 0.9375rem;
  color: var(--text-primary);
  background: white;
  border: 2px solid var(--border-color);
  border-radius: var(--radius-md);
  transition: all var(--transition-base);
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-glow);
}

.form-input:disabled,
.form-select:disabled,
.form-textarea:disabled {
  background: var(--gray-50);
  cursor: not-allowed;
  opacity: 0.6;
}

.form-input.error,
.form-select.error,
.form-textarea.error {
  border-color: var(--danger);
}

.form-input.error:focus,
.form-select.error:focus,
.form-textarea.error:focus {
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

.form-help {
  display: block;
  font-size: 0.8125rem;
  color: var(--text-tertiary);
  margin-top: var(--space-2);
}

.form-error {
  display: block;
  font-size: 0.8125rem;
  color: var(--danger);
  margin-top: var(--space-2);
  font-weight: 500;
}

/* Form Actions (Button Group) */
.form-actions {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

@media (max-width: 640px) {
  .form-actions {
    flex-direction: column;
  }
  
  .form-actions .btn {
    width: 100%;
  }
}

/* Button & Badge Groups (for examples/demos) */
.button-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}

.badge-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}

.form-textarea {
  min-height: 100px;
  resize: vertical;
}

/* Checkbox & Radio */
.form-check {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.form-check-input {
  width: 20px;
  height: 20px;
  border: 2px solid var(--border-strong);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.form-check-input:checked {
  background: var(--primary);
  border-color: var(--primary);
}

.form-check-label {
  font-size: 0.9375rem;
  color: var(--text-primary);
  cursor: pointer;
}

/* Input with icon */
.form-input-group {
  position: relative;
}

.form-input-icon {
  position: absolute;
  left: var(--space-4);
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-tertiary);
  font-size: 1.1rem;
}

.form-input-group .form-input {
  padding-left: var(--space-10);
}

/* ===== TABLES ===== */
.table-container {
  background: white;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-color);
  overflow: hidden;
}

.table {
  width: 100%;
  border-collapse: collapse;
}

.table thead {
  background: var(--gray-50);
  border-bottom: 2px solid var(--border-color);
}

.table th {
  padding: var(--space-4);
  text-align: left;
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-secondary);
}

.table td {
  padding: var(--space-4);
  border-bottom: 1px solid var(--border-color);
  color: var(--text-primary);
}

.table tr:last-child td {
  border-bottom: none;
}

.table tbody tr:hover {
  background: var(--gray-50);
}

.table-sm th,
.table-sm td {
  padding: var(--space-3);
}

.table-striped tbody tr:nth-child(odd) {
  background: var(--gray-50);
}

/* ===== NAVIGATION ===== */
/* 240px, not 220 (2026-09-20, sidebar-subitem-width-spec): at 220 the submenu
   rows had a 156px budget and six labels wrapped to two lines ("Groomer
   Schedules", "Invoices & Payments", any row carrying a queue badge). Also set
   on .top-bar / .main-content margins and the overlay rail below. */
.sidebar {
  width: 240px;
  background: white;
  color: var(--text-primary);
  display: flex;
  flex-direction: column;
  box-shadow: 4px 0 12px rgba(0, 0, 0, 0.05);
  position: relative;
  z-index: 100;
  height: 100vh;
  position: fixed;
  left: 0;
  top: 0;
}

.sidebar-header {
  padding: 16px;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sidebar-header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.sidebar-close {
  display: none; /* Hidden on desktop */
  background: none;
  border: none;
  font-size: 2rem;
  line-height: 1;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  transition: all var(--transition-base);
}

.sidebar-close:hover {
  background: var(--gray-100);
  color: var(--text-primary);
}

.sidebar-close:active {
  transform: scale(0.95);
}

/* Show close button on mobile */
@media (max-width: 968px) {
  .sidebar-close {
    display: block;
  }
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.5rem;
  font-weight: 800;
  text-decoration: none;
  color: var(--text-primary);
}

.logo-store-name {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 140px;
}

.logo-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}

.logo-icon svg {
  width: 28px !important;
  height: 28px !important;
}

.nav-section {
  flex: 1;
  overflow-y: auto;
  padding: 12px 0;
}

.nav-section::-webkit-scrollbar {
  width: 6px;
}

.nav-section::-webkit-scrollbar-track {
  background: var(--gray-100);
}

.nav-section::-webkit-scrollbar-thumb {
  background: var(--gray-300);
  border-radius: 3px;
}

.nav-group {
  margin-bottom: 16px;
}

.nav-group-label {
  padding: 8px 16px;
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-tertiary);
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  color: var(--text-secondary);
  text-decoration: none;
  transition: all var(--transition-base);
  cursor: pointer;
  position: relative;
  border-left: 3px solid transparent;
}

.nav-item:hover {
  background: var(--primary-light);
  color: var(--primary);
  border-left-color: var(--primary);
}

.nav-item.active {
  background: var(--primary-light);
  color: var(--primary);
  border-left-color: var(--primary);
  font-weight: 600;
}

.nav-icon {
  font-size: 1.25rem;
  width: 18px;
  text-align: center;
  flex-shrink: 0;
}

.nav-text {
  flex: 1;
  font-size: 0.8125rem;
  font-weight: 500;
}

.nav-badge {
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  background: var(--danger);
  border-radius: 50%;
  font-size: 0.625rem;
  font-weight: 700;
  color: white;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  flex-shrink: 0;
}

.nav-badge.primary {
  background: var(--primary);
}

/* A badge with no content is not a badge. `.nav-badge` is unconditionally
   `inline-flex`, so a writer that empties the text without also setting
   `display:none` leaves a bare coloured pill behind — and in the collapsed rail
   (where the badge degrades to a content-independent 8px dot) a permanent
   "something is waiting" signal. Every writer sets `display` itself; this is the
   backstop for the one that forgets. ref: docs/nav-badge-counters-spec.md §4. */
.nav-badge:empty,
.bnav-badge:empty,
.more-badge:empty {
  display: none !important;
}

.nav-arrow {
  font-size: 0.875rem;
  transition: transform var(--transition-base);
  color: var(--text-tertiary);
  display: flex;
  align-items: center;
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
}

.nav-item.expanded .nav-arrow {
  transform: translateY(-50%) rotate(90deg);
}

/* Submenu */
.submenu {
  display: none;
  background: var(--gray-50);
  margin: 4px 0;
}

.submenu.show {
  display: block;
}

.submenu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px 8px 48px;
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 0.8125rem;
  transition: all var(--transition-base);
}

.submenu-item:hover {
  background: var(--gray-100);
  color: var(--text-primary);
}

.submenu-item.active {
  color: var(--primary);
  font-weight: 600;
}

/* Submenu Icons */
.submenu-icon {
  display: inline-flex;
  align-items: center;
  opacity: 0.6;
  flex-shrink: 0;
}

/* Queue badge on a submenu row (New Client Queue, Online Booking, Products &
   Inventory, Time Clock): the pillar's 20px badge shrunk to the row's 13px type.
   Pinned right by the markup's margin-left:auto; never shrinks into the label. */
.submenu-item .nav-badge {
  min-width: 16px;
  height: 16px;
  font-size: 0.5625rem;
  flex-shrink: 0;
}

.submenu-item:hover .submenu-icon {
  opacity: 1;
}

.submenu-item.active .submenu-icon {
  opacity: 1;
}

.submenu-icon svg {
  width: 14px !important;
  height: 14px !important;
  stroke-width: 2;
}

/* Sidebar Footer */
.sidebar-footer {
  position: relative;
  padding: 10px 12px;
  border-top: 1px solid var(--border-color);
}

/* ===========================================================================
   TOP-BAR CLOCK CONTROL  (docs/topbar-clock-spec.md)

   Clocking in is session state, not a create action, so it sits with the other
   session state in the top bar rather than in Quick Add or two clicks down the
   Team submenu. Desktop only: mobile staff already have a bottom-nav item.

   Three states, and the middle one is the reason it's gated on hasPin rather
   than on clockedInCount:
     - store has no clock-in accounts        -> never rendered
     - store uses it, nobody punched in yet  -> quiet, holds its position
     - someone in                            -> green
   clockedInCount counts only currently-open punches, so gating on it would
   make the control appear and disappear as people punch through the day.
   =========================================================================== */

/* Author `display` beats the UA [hidden] rule — these must stay together.
   (The trial badge shipped without this and rendered as an empty pill.) */
.clock-badge[hidden] { display: none !important; }

.clock-badge {
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 0 13px;
  border-radius: var(--radius-full);
  border: 1px solid var(--border-color);
  background: var(--bg-surface);
  color: var(--text-secondary);
  font-family: var(--font-primary);
  font-size: 0.78125rem;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast),
              box-shadow var(--transition-fast);
}
.clock-badge:hover {
  background: var(--gray-50);
  border-color: var(--border-strong);
  text-decoration: none;
}
/* The button has a single wrapper child, so its own gap never reaches the icon
   and label — the flex context has to be on the wrapper. */
.clock-badge > span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.clock-badge svg { width: 14px; height: 14px; flex-shrink: 0; }

.clock-badge.on {
  background: var(--success-light);
  border-color: var(--success);
  color: var(--success-text);
}
.clock-badge.on:hover { box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15); }

.clock-pip {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--success);
  flex-shrink: 0;
  position: relative;
}
.clock-pip::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background: var(--success);
  opacity: 0.35;
  animation: clockPip 2s ease-in-out infinite;
}
.clock-badge.roster .clock-pip,
.clock-badge.roster .clock-pip::after { background: var(--primary); }
@keyframes clockPip {
  0%, 100% { transform: scale(1); opacity: 0.35; }
  50%      { transform: scale(1.6); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .clock-pip::after { animation: none; }
}

/* Mobile owns this through the bottom nav; never show both. */
@media (max-width: 968px) {
  .clock-badge { display: none !important; }
}

/* ===========================================================================
   SIDEBAR IDENTITY + LOCATION SWITCHER  (docs/sidebar-identity-spec.md)

   One control, replacing a header block and a switcher block that both
   rendered store.name. Line 1 is the account/business, line 2 the current
   location — shown only when there IS one to switch between.

   The mark stays the Woof mark on every surface. It used to be swapped for
   the store's uploaded companyLogo here (and only here — mobile never
   swapped), so the same store showed a different mark per device. Uploaded
   logos are also arbitrary: a wordmark in a 28px contain-box renders as an
   illegible smear, and in the rail there's no adjacent text to rescue it.
   Store branding belongs on customer-facing surfaces (portal, booking
   widget), which already use companyLogo.
   =========================================================================== */
.sidebar-identity {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-color);
  position: relative;
}

.identity-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: none;
  font-family: var(--font-primary);
  text-align: left;
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}
.identity-btn:hover,
.identity-btn.open {
  background: var(--primary-light);
  border-color: var(--primary);
}

.identity-mark {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.identity-mark img { width: 100%; height: 100%; object-fit: contain; }

.identity-text { min-width: 0; flex: 1; }

.identity-text .logo-store-name {
  display: block;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.identity-location {
  display: none;                 /* revealed by [data-multi="yes"] below */
  font-size: 0.6875rem;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sidebar-identity[data-multi="yes"] .identity-location { display: block; }

.identity-chevron {
  margin-left: auto;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  color: var(--gray-400);
  transition: transform var(--transition-fast);
}
.identity-btn.open .identity-chevron { transform: rotate(180deg); }

/* Sidebar Quick Add Button
   Pill + elevation, NOT just a blue fill: every page ships its own
   .btn-primary in the page header, so colour alone can't establish
   hierarchy. The pill radius and drop shadow make this the only object
   of its kind in the admin — the desktop counterpart to the mobile FAB
   being the only circle in the bottom nav.
   The extra top padding buys separation from .nav-group-label, which
   otherwise made this read as nav row zero. */
.sidebar-quick-add {
  padding: 16px 12px 12px;
}

.sidebar-qa-btn {
  width: 100%;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 14px;
  background: var(--primary);
  color: white;
  border: none;
  border-radius: var(--radius-full);
  font-size: 0.875rem;
  font-weight: 600;
  font-family: var(--font-primary);
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(17, 24, 39, 0.12),
              0 4px 14px rgba(var(--primary-rgb), 0.34);
  transition: all var(--transition-base);
}

.sidebar-qa-btn:hover {
  background: var(--primary-dark);
  transform: translateY(-1px);
  box-shadow: 0 2px 5px rgba(17, 24, 39, 0.14),
              0 8px 20px rgba(var(--primary-rgb), 0.42);
}

.sidebar-qa-btn:active {
  transform: translateY(0);
  box-shadow: 0 1px 3px rgba(17, 24, 39, 0.12),
              0 2px 8px rgba(var(--primary-rgb), 0.3);
}

/* Shortcut hint. Only honest because initKeyboardShortcuts() actually
   binds "n" (js/components.js) — don't show this without that binding. */
.sidebar-qa-kbd {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  line-height: 1;
  padding: 3px 5px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.22);
  color: rgba(255, 255, 255, 0.95);
}

.sidebar-qa-dropdown {
  left: 0;
  right: auto;
  min-width: 100%;
}

/* ===========================================================================
   COLLAPSED SIDEBAR → ICON RAIL  (docs/sidebar-rail-spec.md)

   Collapse used to mean translateX(-100%) — you lost all eight destinations,
   every badge, and the create button, so the only way back was to re-expand.
   At 56px you keep one-click nav and still win back 164px of content width.

   Desktop only: below 969px the sidebar is display:none and the bottom nav
   owns navigation. Geometry (width + main-content offset) is set in the
   _admin-header inline block, which loads after this file.

   TWO CLASSES, DELIBERATELY:
     .sidebar-collapsed = the user's STORED preference (localStorage).
     .sidebar-rail      = what we're RENDERING right now.
   They differ between 969–1199px, where the rail is forced by width. Keeping
   them separate is what stops an auto-collapse from silently overwriting an
   explicit choice — expand at 1440, drop to 1100, come back, still expanded.
   Only .sidebar-rail appears below; nothing here reads the preference.
   =========================================================================== */
@media (min-width: 969px) {
  html.sidebar-rail .sidebar {
    width: 56px;
    overflow: visible;   /* flyouts escape the rail */
  }

  /* --- identity: mark + caret only ---
     Scoped to .sidebar-identity, NOT .sidebar-header: messages.html has its own
     .sidebar-header for the compose pane, and an unscoped rule restyled it
     whenever the rail was on. */
  html.sidebar-rail .identity-text,
  html.sidebar-rail .user-info {
    display: none;
  }
  html.sidebar-rail .sidebar-identity { padding: 8px 6px; }
  /* Mark over caret in a 44px target. The caret is the SAME element as the
     expanded chevron, just repositioned — a bare mark reads as branding, and an
     affordance that only appears on hover can't tell you it's there. */
  html.sidebar-rail .identity-btn {
    flex-direction: column;
    gap: 1px;
    padding: 4px 0;
    justify-content: center;
  }
  html.sidebar-rail .identity-chevron { margin-left: 0; }
  html.sidebar-rail .identity-chevron svg { width: 10px; height: 10px; }
  /* The panel is wider than the 56px rail — fly it out to the side. */
  html.sidebar-rail .store-switcher-panel {
    left: calc(100% + 8px);
    right: auto;
    top: 4px;
    width: min(320px, calc(100vw - 80px));
  }
  html.sidebar-rail .user-profile { justify-content: center; }
  html.sidebar-rail .sidebar-footer { padding: 10px 0; }

  /* --- create control: pill -> 44px circle --- */
  html.sidebar-rail .sidebar-quick-add {
    padding: 12px 6px;
    display: flex;
    justify-content: center;
  }
  html.sidebar-rail .sidebar-qa-btn {
    width: 44px;
    padding: 0;
  }
  html.sidebar-rail .sidebar-qa-btn > span {  /* label + kbd chip */
    display: none;
  }
  /* Dropdown would be clipped by the 56px rail — fly it out to the right. */
  html.sidebar-rail .sidebar-qa-dropdown {
    left: calc(100% + 8px);
    top: 0;
    min-width: 236px;
  }

  /* --- nav rows: centred icon buttons --- */
  html.sidebar-rail .nav-group-label {
    height: 1px;
    padding: 0;
    margin: 10px auto 6px;
    width: 32px;
    background: var(--border-color);
    font-size: 0;
    overflow: hidden;
  }
  html.sidebar-rail .nav-item {
    justify-content: center;
    padding: 8px 0;
    margin: 2px 8px;
    border-left-width: 0;
    border-radius: var(--radius-md);
  }
  html.sidebar-rail .nav-text,
  html.sidebar-rail .nav-arrow,
  html.sidebar-rail .submenu {
    display: none;   /* labels + inline submenus move into the flyout */
  }
  /* Counts can't sit beside a centred icon: degrade to a presence dot.
     The number comes back in the flyout header. */
  html.sidebar-rail .nav-badge {
    position: absolute;
    top: 4px;
    right: 8px;
    margin: 0;
    min-width: 8px;
    width: 8px;
    height: 8px;
    padding: 0;
    font-size: 0;
    color: transparent;
    background: var(--warning);
  }
}

/* --- overlay: the full sidebar on top of content, for the auto-rail range ---
   Between 969 and 1199 there isn't room to PUSH content aside for a 240px
   sidebar, so the toggle floats it over the page with the existing mobile
   backdrop instead. Never writes the stored preference. */
@media (min-width: 969px) {
  html.sidebar-overlay .sidebar {
    width: 240px;
    z-index: 1000;            /* above .sidebar-backdrop (999) */
    box-shadow: 0 0 0 1px rgba(17, 24, 39, 0.06), 12px 0 32px rgba(17, 24, 39, 0.18);
  }
  /* Content keeps the rail's 56px offset underneath — the sidebar is floating
     over it, so nothing should reflow while it's open. */
  html.sidebar-overlay .main-content,
  html.sidebar-overlay .top-bar {
    margin-left: 56px !important;
  }
}

/* --- rail flyout: label + submenu for a row that has no room for either --- */
.rail-flyout {
  position: fixed;
  z-index: 600;
  min-width: 190px;
  max-width: 260px;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: 0 14px 32px rgba(17, 24, 39, 0.18), 0 2px 6px rgba(17, 24, 39, 0.08);
  padding: 6px;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-4px);
  transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast);
}
.rail-flyout.show {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.rail-flyout-title {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px 6px;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--text-primary);
}
/* Must out-specify `html.sidebar-rail .nav-badge` (0,2,1) — the flyout is a
   body child, so that rule still matches it and would render the count as a dot.
   `.rail-flyout-title .nav-badge` alone (0,2,0) loses. */
html.sidebar-rail .rail-flyout-title .nav-badge {
  position: static;
  width: auto;
  height: 16px;
  min-width: 16px;
  padding: 0 5px;
  font-size: 0.5938rem;
  color: var(--warning-text);
  background: var(--warning-light);
}
.rail-flyout-sep {
  height: 1px;
  background: var(--gray-100);
  margin: 4px 6px;
}
.rail-flyout a {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border-radius: var(--radius-md);
  font-size: 0.8125rem;
  color: var(--text-secondary);
  text-decoration: none;
}
.rail-flyout a:hover,
.rail-flyout a:focus-visible {
  background: var(--gray-50);
  color: var(--text-primary);
}
.rail-flyout a svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  opacity: 0.8;
}
@media (prefers-reduced-motion: reduce) {
  .rail-flyout { transition: none; }
}

/* Sidebar Trial Banner */
/* User Store Arrow */

/* User Dropdown Section Label */
.user-dropdown-section-label {
  padding: 10px 16px 4px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-tertiary);
}

.user-dropdown-divider {
  height: 1px;
  background: var(--border-color);
  margin: 4px 12px;
}

.user-profile {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  /* Transparent at rest, like .identity-btn at the top of the sidebar — both
     ends of the nav share one idiom. A filled card here also made the footer
     visually heavier than the store you're in, which is backwards. */
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast);
  text-decoration: none;
  color: var(--text-primary);
}

.user-profile:hover,
.sidebar-footer.active .user-profile {
  background: var(--primary-light);
  border-color: var(--primary);
}

.user-profile:has(.user-account-combo) {
  flex-wrap: wrap;
}

.user-avatar {
  width: 30px;
  height: 30px;
  background: var(--info-light);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.75rem;
  color: var(--primary-dark);
}

.user-info {
  flex: 1;
}

.user-name {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-primary);
}

.user-account-combo {
  position: relative;
  flex-basis: 100%;
  margin-top: 8px;
}

.user-account-input {
  width: 100%;
  padding: 6px 28px 6px 10px;
  font-family: var(--font-primary, inherit);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-primary);
  background-color: white;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 10px 10px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  cursor: text;
  transition: all var(--transition-base);
}

.user-account-input::placeholder {
  color: var(--text-tertiary, #9ca3af);
  font-weight: 500;
}

.user-account-input:hover {
  border-color: var(--gray-300, #d1d5db);
  background-color: var(--gray-50);
}

.user-account-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-glow, rgba(24, 160, 251, 0.15));
}

.user-account-options {
  position: absolute;
  bottom: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 220px;
  overflow-y: auto;
  margin: 0;
  padding: 4px;
  list-style: none;
  background: white;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
  z-index: 1000;
}

.user-account-options[hidden] {
  display: none;
}

.user-account-option {
  padding: 6px 10px;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-primary);
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-account-option:hover,
.user-account-option.active {
  background: var(--gray-50);
}

.user-account-option.selected {
  color: var(--primary-dark, var(--primary));
  font-weight: 600;
}

.user-role {
  font-size: 0.6875rem;
  color: var(--text-tertiary);
}

/* Top Bar */
.top-bar {
  height: 60px;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  padding: 0 24px;
  gap: 16px;
  position: sticky;
  top: 0;
  z-index: 50;
}

/* Desktop Top Bar Left: Page Title + Breadcrumb */
.desktop-topbar-left {
  display: flex;
  align-items: center;
  gap: 0;
  flex: 1;
  min-width: 0;
}

.topbar-page-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--gray-900);
  letter-spacing: -0.02em;
}

.topbar-breadcrumb {
  display: flex;
  align-items: center;
  gap: 0;
}

.topbar-breadcrumb-sep {
  color: var(--gray-400);
  margin: 0 8px;
  font-size: 1rem;
}

.topbar-breadcrumb-text {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--gray-500);
}

/* Desktop Top Bar Right: Search + Woof + Notifications */
.desktop-topbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  flex-shrink: 0;
}

/* Desktop Pill Search Bar */
.desktop-search {
  position: relative;
  width: 280px;
}

.desktop-search-input {
  width: 100%;
  padding: 8px 36px 8px 36px;
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius-full);
  background: var(--gray-50);
  font-size: 13px;
  font-family: var(--font-primary);
  color: var(--text-primary);
  transition: all var(--transition-base);
}

.desktop-search-input:focus {
  outline: none;
  border-color: var(--primary);
  background: white;
  box-shadow: 0 0 0 3px rgba(24, 160, 251, 0.08);
}

.desktop-search-input::placeholder {
  color: var(--text-tertiary);
}

.desktop-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--gray-400);
}

.desktop-search-icon svg {
  width: 16px !important;
  height: 16px !important;
}

.desktop-search-shortcut {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.65rem;
  color: var(--text-tertiary);
  background: white;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 600;
  pointer-events: none;
  border: 1px solid var(--gray-200);
}

/* Desktop Top Bar Icon Buttons */
.desktop-topbar-icon-btn {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  border: none;
  background: transparent;
  cursor: pointer;
  position: relative;
  transition: background 0.15s;
  color: var(--gray-600);
}

.desktop-topbar-icon-btn:hover {
  background: var(--gray-100);
}

.desktop-topbar-icon-btn svg {
  width: 20px !important;
  height: 20px !important;
}

.desktop-topbar-badge {
  position: absolute;
  top: 3px;
  right: 1px;
  min-width: 17px;
  height: 17px;
  background: var(--danger);
  color: white;
  font-size: 9px;
  font-weight: 700;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  border: 2px solid white;
  font-family: var(--font-primary);
}

/* Ensure desktop top bar elements show on desktop */
@media (min-width: 969px) {
  .desktop-topbar-left {
    display: flex !important;
  }
  
  .desktop-topbar-right {
    display: flex !important;
  }
  
  .mobile-topbar-left,
  .mobile-topbar-right {
    display: none !important;
  }
}

@media (min-width: 969px) {
  .top-bar {
    margin-left: 240px;
  }
}

/* Hide desktop elements on mobile */
@media (max-width: 968px) {
  .desktop-topbar-left,
  .desktop-topbar-right {
    display: none !important;
  }
}

/* ===== DROPDOWN ===== */
.dropdown {
  position: relative;
}

.dropdown-menu {
  position: absolute;
  top: 120%;
  right: 0;
  background: white;
  border: 2px solid var(--border-color);
  border-radius: var(--radius-lg);
  min-width: 280px;
  box-shadow: var(--shadow-lg);
  display: none;
  z-index: 1000;
}

.dropdown.active .dropdown-menu {
  display: block;
  animation: dropdownSlide 0.2s ease-out;
}

@keyframes dropdownSlide {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.dropdown-header {
  padding: 16px;
  border-bottom: 2px solid var(--border-color);
  font-weight: 700;
  font-size: 0.9rem;
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  cursor: pointer;
  transition: background var(--transition-fast);
  text-decoration: none;
  color: var(--text-primary);
}

.dropdown-item:hover {
  background: var(--gray-50);
}

.dropdown-footer {
  padding: 12px 16px;
  border-top: 2px solid var(--border-color);
  text-align: center;
}

.dropdown-footer a {
  color: var(--primary);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
  transition: color var(--transition-fast);
}

.dropdown-footer a:hover {
  color: var(--primary-dark);
  text-decoration: underline;
}

/* Calendar Dropdown Specific */
#calendarDropdown {
  min-width: 320px;
  max-width: 400px;
  max-height: 80vh;
  overflow-y: auto;
}

/* Smooth scrolling for dropdown */
#calendarDropdown::-webkit-scrollbar {
  width: 6px;
}

#calendarDropdown::-webkit-scrollbar-track {
  background: var(--gray-100);
  border-radius: 3px;
}

#calendarDropdown::-webkit-scrollbar-thumb {
  background: var(--gray-400);
  border-radius: 3px;
}

#calendarDropdown::-webkit-scrollbar-thumb:hover {
  background: var(--gray-500);
}

/* Calendar Date Jump Section */
.calendar-date-jump {
  padding: 16px;
  background: linear-gradient(to bottom, var(--gray-50), var(--bg-surface));
  border-bottom: 2px solid var(--border-color);
}

.calendar-date-input {
  width: 100%;
  padding: 10px 12px;
  border: 2px solid var(--border-color);
  border-radius: 8px;
  font-size: 0.9rem;
  font-family: var(--font-primary);
  transition: all var(--transition-base);
  cursor: pointer;
}

.calendar-date-input:hover {
  border-color: var(--primary);
}

.calendar-date-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-glow);
}

/* Calendar Sections */
.calendar-section {
  padding: 16px;
  border-bottom: 1px solid var(--border-color);
}

.calendar-section:last-child {
  border-bottom: none;
}

.calendar-section-label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-secondary);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Calendar Grid Layout */
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.calendar-grid-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  cursor: pointer;
  transition: all var(--transition-base);
  text-decoration: none;
  color: var(--text-primary);
}

.calendar-grid-item:hover {
  background: var(--primary-light);
  border-color: var(--primary);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

.calendar-grid-icon {
  width: 28px;
  height: 28px;
  background: var(--primary-light);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  flex-shrink: 0;
}

.calendar-grid-text {
  flex: 1;
  min-width: 0;
}

.calendar-grid-title {
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.calendar-grid-subtitle {
  font-size: 0.7rem;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Mobile: Single column for calendar grid */
@media (max-width: 480px) {
  .calendar-grid {
    grid-template-columns: 1fr;
  }
}

/* Dropdown Divider */
.dropdown-divider {
  height: 1px;
  background: var(--border-color);
  margin: 8px 0;
}

/* Dropdown Item Icons and Content */
.dropdown-item-icon {
  width: 36px;
  height: 36px;
  background: var(--primary-light);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
}

.dropdown-item-content {
  flex: 1;
  min-width: 0;
}

.dropdown-item-title {
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: 2px;
  color: var(--text-primary);
}

.dropdown-item-subtitle {
  font-size: 0.8rem;
  color: var(--text-secondary);
}

/* ===== UNIFIED NOTIFICATION SYSTEM ===== */

/* Notification Badge - Urgent variant */
.notification-badge.urgent {
  background: var(--danger-dark);
  animation: urgentPulse 1.5s ease-in-out infinite;
}

@keyframes urgentPulse {
  0%, 100% { 
    transform: scale(1); 
    box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.4);
  }
  50% { 
    transform: scale(1.15); 
    box-shadow: 0 0 0 8px rgba(220, 38, 38, 0);
  }
}

/* Notification dropdown styles moved to notification-panel.css (side drawer) */


/* ===== UTILITY CLASSES ===== */

/* Spacing */
.m-0 { margin: 0; }
.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-5 { margin-top: var(--space-5); }
.mt-6 { margin-top: var(--space-6); }

.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: var(--space-1); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-5 { margin-bottom: var(--space-5); }
.mb-6 { margin-bottom: var(--space-6); }

.p-0 { padding: 0; }
.p-3 { padding: var(--space-3); }
.p-4 { padding: var(--space-4); }
.p-5 { padding: var(--space-5); }
.p-6 { padding: var(--space-6); }

.px-4 { padding-left: var(--space-4); padding-right: var(--space-4); }
.py-4 { padding-top: var(--space-4); padding-bottom: var(--space-4); }

/* Flexbox */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-start { align-items: flex-start; }
.items-center { align-items: center; }
.items-end { align-items: flex-end; }
.justify-start { justify-content: flex-start; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.justify-end { justify-content: flex-end; }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-5 { gap: var(--space-5); }
.flex-1 { flex: 1; }

/* Grid */
.grid { display: grid; }
.grid-cols-1 { grid-template-columns: repeat(1, 1fr); }
.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid-cols-4 { grid-template-columns: repeat(4, 1fr); }

/* Text */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-xs { font-size: 0.75rem; }
.text-sm { font-size: 0.875rem; }
.text-base { font-size: 1rem; }
.text-lg { font-size: 1.125rem; }
.text-xl { font-size: 1.25rem; }
.font-normal { font-weight: 400; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.font-extrabold { font-weight: 800; }

/* Colors */
.text-primary { color: var(--primary); }
.text-secondary { color: var(--text-secondary); }
.text-tertiary { color: var(--text-tertiary); }
.text-danger { color: var(--danger); }
.text-success { color: var(--success); }
.text-warning { color: var(--warning); }

/* Background */
.bg-white { background: white; }
.bg-gray-50 { background: var(--gray-50); }
.bg-gray-100 { background: var(--gray-100); }
.bg-primary { background: var(--primary); color: white; }
.bg-primary-light { background: var(--primary-light); }

/* Border */
.border { border: 1px solid var(--border-color); }
.border-2 { border: 2px solid var(--border-color); }
.border-t { border-top: 1px solid var(--border-color); }
.border-b { border-bottom: 1px solid var(--border-color); }
.rounded { border-radius: var(--radius-md); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-full { border-radius: var(--radius-full); }

/* Shadow */
.shadow-none { box-shadow: none; }
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }

/* Display */
.hidden { display: none; }
.block { display: block; }
.inline-block { display: inline-block; }

/* Position */
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }

/* Width */
.w-full { width: 100%; }
.w-auto { width: auto; }

/* Overflow */
.overflow-hidden { overflow: hidden; }
.overflow-auto { overflow: auto; }

/* Responsive */

/* Sidebar backdrop for mobile */
.sidebar-backdrop {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.sidebar-backdrop.active {
  display: block;
  opacity: 1;
}

/* Hide mobile menu toggle on desktop */
.mobile-menu-toggle {
  display: none;
}

@media (max-width: 968px) {
  /* Hide sidebar completely on mobile (replaced by bottom nav) */
  .sidebar {
    display: none !important;
  }

  .sidebar-backdrop {
    display: none !important;
  }

  /* Hide hamburger menu toggle (no longer needed) */
  .mobile-menu-toggle {
    display: none !important;
  }

  /* Show bottom navigation */
  .bottom-nav {
    display: flex !important;
  }

  /* Remove sidebar margin from main content on mobile */
  .main-content {
    margin-left: 0 !important;
    /* Reserve space for fixed .bottom-nav + iOS home-indicator safe area,
       plus a small buffer so the last row of actions isn't flush to the nav. */
    padding-bottom: calc(var(--bottom-nav-offset) + var(--space-3));
  }

  /* Mobile top bar: simplified */
  .top-bar {
    margin-left: 0;
    padding: 0 12px;
    height: 56px;
    gap: 8px;
  }

  /* Hide desktop-only top bar items on mobile */
  .top-bar .search-container,
  .top-bar .dropdown[data-show="trialMode"],
  .top-bar .ask-woof-btn,
  .top-bar-actions .dropdown:has(.action-btn-primary), /* Quick Add dropdown */
  .top-bar-actions .dropdown:has(.timeclock),          /* Time Clock */
  .top-bar-actions .dropdown:has([data-dropdown-trigger="calendarDropdown"]), /* Calendar */
  .top-bar-actions .dropdown:has([data-dropdown-trigger="chatDropdown"])      /* Messages */
  {
    display: none !important;
  }

  /* Show mobile top bar elements */
  .mobile-topbar-left {
    display: flex !important;
  }
  
  .mobile-topbar-right {
    display: flex !important;
  }

  /* Reduce content padding on mobile */
  .content-area {
    padding: var(--space-4);
  }

  /* Make all multi-column grids single column on mobile */
  .grid-cols-2,
  .grid-cols-3,
  .grid-cols-4 {
    grid-template-columns: 1fr !important;
  }

  /* Stack page header elements on mobile */
  .page-header {
    flex-direction: column;
    align-items: stretch;
  }
  
  .page-header .btn {
    width: 100%;
  }

  /* Adjust card headers for mobile */
  .card-header {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-3);
  }

  /* Make tables scrollable on mobile */
  .table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .table {
    min-width: 600px;
  }

  /* Adjust form layouts */
  .form-group {
    margin-bottom: var(--space-4);
  }

  /* Make alerts more compact */
  .alert {
    padding: var(--space-3);
  }

  /* Adjust dropdown positioning for mobile */
  .dropdown-menu {
    left: auto;
    right: 0;
    min-width: 200px;
  }

  /* Hide page header button on very small screens */
  h1.h2 + .btn {
    font-size: 0.875rem;
    padding: 8px 12px;
  }
}

/* Tablet-specific adjustments */
@media (min-width: 481px) and (max-width: 968px) {
  /* 2 columns on tablet for grid-cols-4 */
  .grid-cols-4 {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Keep 2 columns for grid-cols-3 on larger tablets */
  .grid-cols-3 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* Small mobile phones */
@media (max-width: 480px) {
  /* Smaller typography on very small screens */
  .h1 { font-size: 1.75rem; }
  .h2 { font-size: 1.5rem; }
  .h3 { font-size: 1.25rem; }
  
  /* More compact spacing */
  .content-area {
    padding: var(--space-3);
  }

  /* Smaller buttons on tiny screens */
  .btn {
    padding: 8px 14px;
    font-size: 0.875rem;
  }

  .btn-lg {
    padding: 10px 18px;
    font-size: 1rem;
  }

  /* Reduce card padding */
  .card-body {
    padding: var(--space-4);
  }
}

/* ===== MAIN CONTENT AREA ===== */
.main-content {
  margin-left: 240px; /* Sidebar width */
  min-height: 100vh;
  background: var(--bg-page);
}

.content-area {
  padding: var(--space-6);
  max-width: 1400px;
  margin: 0 auto;
  background: var(--bg-page);
  position: relative;
}

/* content-area::before radial gradients removed — using flat bg-page */

.content-area > * {
  position: relative;
  z-index: 1;
}

/* Page Header Component */
.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--layout-gap);
  gap: var(--space-4);
}

.page-header h1 {
  font-size: 1.375rem;
  font-weight: 800;
  margin-bottom: 2px;
  line-height: 1.2;
}

@media (max-width: 768px) {
  .page-header {
    flex-direction: column;
    align-items: stretch;
  }
  
  .page-header .btn {
    width: 100%;
  }
}

/* ===== LOADING SPINNER ===== */
.spinner {
  border: 3px solid var(--gray-200);
  border-top-color: var(--primary);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 0.8s linear infinite;
}

.spinner-sm {
  width: 20px;
  height: 20px;
  border-width: 2px;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ===== TOAST NOTIFICATIONS ===== */
.toast-container {
  position: fixed;
  top: 20px;
  right: 20px;
  /* Above all modals/drawers (woof-drawer 9999, stacked modals up to 10001) so
     toasts triggered from inside a modal (e.g. add-customer Save) stay visible. */
  z-index: 100000;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.toast {
  min-width: 300px;
  animation: toastSlide 0.3s ease-out;
}

@keyframes toastSlide {
  from {
    opacity: 0;
    transform: translateX(100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
/* ===== USER DROPDOWN (SIDEBAR FOOTER) ===== */

/* User Dropdown - positioned above footer */
.user-dropdown {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 12px;
  right: 12px;
  background: white;
  border: 2px solid var(--border-color);
  border-radius: 12px;
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.15);
  display: none;
  z-index: 1000;
}

.sidebar-footer.active .user-dropdown {
  display: block;
  animation: dropdownSlideUp 0.2s ease-out;
}

@keyframes dropdownSlideUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.user-dropdown-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  cursor: pointer;
  transition: all var(--transition-base);
  text-decoration: none;
  color: var(--text-primary);
  border-left: 3px solid transparent;
}

.user-dropdown-item:first-child {
  border-radius: 12px 12px 0 0;
}

.user-dropdown-item:last-child {
  border-radius: 0 0 12px 12px;
}

.user-dropdown-item:hover {
  background: var(--gray-50);
  border-left-color: var(--primary);
}

.user-dropdown-icon {
  width: 28px;
  height: 28px;
  background: var(--primary-light);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
}

.user-dropdown-text {
  font-size: 0.9rem;
  font-weight: 500;
}

/* ===== STORE SEARCH BAR ===== */
.store-search-container {
  position: relative;
  padding: 12px 16px;
  border-bottom: 2px solid var(--border-color);
}

.store-search-input {
  width: 100%;
  padding: 10px 40px 10px 36px;
  border: 2px solid var(--border-color);
  border-radius: 8px;
  font-size: 0.875rem;
  transition: all var(--transition-base);
  font-family: var(--font-primary);
}

.store-search-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-glow);
}

.store-search-icon {
  position: absolute;
  left: 28px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1rem;
  pointer-events: none;
  opacity: 0.5;
}

.store-search-clear {
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  transition: all var(--transition-fast);
}

.store-search-clear:hover {
  background: var(--gray-100);
  color: var(--text-primary);
}

.store-options-list {
  max-height: 240px;
  overflow-y: auto;
}

.store-options-list::-webkit-scrollbar {
  width: 6px;
}

.store-options-list::-webkit-scrollbar-track {
  background: var(--gray-100);
}

.store-options-list::-webkit-scrollbar-thumb {
  background: var(--gray-300);
  border-radius: 3px;
}

/* ===== TOP BAR - UPDATED DESIGN ===== */
.mobile-menu-toggle {
  width: 40px;
  height: 40px;
  display: none;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.5rem;
  color: var(--text-primary);
  transition: all var(--transition-base);
}

.mobile-menu-toggle:hover {
  background: var(--gray-100);
  border-radius: 8px;
}

/* Search Container */
.search-container {
  flex: 1;
  max-width: 500px;
  position: relative;
}

.search-input {
  width: 100%;
  padding: 12px 48px 12px 48px;
  border: 2px solid var(--border-color);
  border-radius: 12px;
  font-size: 15px;
  font-family: var(--font-primary);
  color: var(--text-primary);
  transition: all var(--transition-base);
}

.search-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(24, 160, 251, 0.1);
}

.search-input::placeholder {
  color: var(--text-tertiary);
}

.search-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.2rem;
  color: var(--text-secondary);
  pointer-events: none;
}

.search-shortcut {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.75rem;
  color: var(--text-tertiary);
  background: var(--gray-50);
  padding: 4px 8px;
  border-radius: 4px;
  font-weight: 600;
  pointer-events: none;
}

/* Top Bar Actions */
.top-bar-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}

.action-btn {
  width: 40px;
  height: 40px;
  border: 2px solid var(--border-color);
  background: white;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition-base);
  position: relative;
  font-size: 1.2rem;
  color: var(--text-primary);
}

.action-btn:hover {
  border-color: var(--primary);
  background: var(--primary-light);
}

.action-btn-primary {
  background: var(--primary);
  color: white;
  border-color: var(--primary);
  padding: 0 16px;
  width: auto;
  gap: 8px;
  font-weight: 600;
  font-size: 0.9rem;
}

.action-btn-primary:hover {
  background: var(--primary-dark);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.notification-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 20px;
  height: 20px;
  background: var(--danger);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 700;
  color: white;
  border: 2px solid white;
  padding: 0 4px;
}

/* Top Bar Dropdown Improvements */
.dropdown-item-icon {
  width: 36px;
  height: 36px;
  background: var(--primary-light);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
}

.dropdown-item-content {
  flex: 1;
  min-width: 0;
}

.dropdown-item-title {
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: 2px;
  color: var(--text-primary);
}

.dropdown-item-subtitle {
  font-size: 0.8rem;
  color: var(--text-secondary);
}

/* Responsive Top Bar */
@media (max-width: 968px) {
  /* Hide all desktop top bar content on mobile */
  .top-bar-actions,
  .desktop-topbar-left,
  .desktop-topbar-right {
    display: none !important;
  }

  /* Top bar becomes minimal on mobile */
  .top-bar {
    height: 56px;
    padding: 0 12px;
    gap: 0;
    border-bottom: 1px solid var(--gray-100);
  }
}

@media (max-width: 640px) {
  .desktop-search-shortcut {
    display: none;
  }
}

/* ===== MOBILE EXPANDABLE SEARCH ===== */

/* Search toggle button - hidden on desktop, shown on mobile */
.search-toggle-btn {
  display: none;
  width: 40px;
  height: 40px;
  border: 2px solid var(--border-color);
  background: white;
  border-radius: 10px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition-base);
  font-size: 1.2rem;
  color: var(--text-primary);
}

.search-toggle-btn:hover {
  border-color: var(--primary);
  background: var(--primary-light);
}

/* Search input wrapper */
.search-input-wrapper {
  position: relative;
  flex: 1;
  max-width: 500px;
  display: flex;
  align-items: center;
}

/* Search close button - hidden by default */
.search-close-btn {
  display: none;
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  border: none;
  background: var(--gray-200);
  border-radius: 50%;
  cursor: pointer;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--text-secondary);
  transition: all var(--transition-fast);
  align-items: center;
  justify-content: center;
}

.search-close-btn:hover {
  background: var(--gray-300);
  color: var(--text-primary);
}

/* Mobile search styles */
@media (max-width: 968px) {
  .search-container {
    position: relative;
    flex: 0;
    max-width: none;
  }
  
  .search-toggle-btn {
    display: flex;
  }
  
  .search-input-wrapper {
    position: fixed;
    top: 70px;
    left: 0;
    right: 0;
    max-width: none;
    padding: 12px 16px;
    background: white;
    border-bottom: 2px solid var(--border-color);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s ease;
    z-index: 100;
  }
  
  .search-container.active .search-input-wrapper {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }
  
  .search-container.active .search-input-wrapper .search-input {
    border-color: var(--primary);
  }
  
  .search-input-wrapper .search-input {
    padding-right: 48px;
  }
  
  .search-input-wrapper .search-shortcut {
    display: none;
  }
  
  .search-container.active .search-close-btn {
    display: flex;
  }
  
  /* Search results positioning on mobile */
  .search-results {
    position: fixed;
    top: calc(70px + 60px);
    left: 16px;
    right: 16px;
    max-height: calc(100vh - 150px);
  }
}

/* ===== SEARCH RESULTS DROPDOWN ===== */
.search-results {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  background: white;
  border: 2px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
  max-height: 500px;
  overflow-y: auto;
  z-index: 1000;
}

.search-results::-webkit-scrollbar {
  width: 6px;
}

.search-results::-webkit-scrollbar-track {
  background: var(--gray-100);
}

.search-results::-webkit-scrollbar-thumb {
  background: var(--gray-300);
  border-radius: 3px;
}

.search-results.show {
  display: block !important;
  animation: searchSlide 0.2s ease-out;
}

@keyframes searchSlide {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.search-group {
  border-bottom: 1px solid var(--border-color);
}

.search-group:last-child {
  border-bottom: none;
}

.search-group-header {
  padding: 12px 16px;
  background: var(--gray-50);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 8px;
}

.search-result-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  cursor: pointer;
  transition: background var(--transition-fast);
  text-decoration: none;
  color: var(--text-primary);
  border-left: 3px solid transparent;
}

.search-result-item:hover {
  background: var(--primary-light);
  border-left-color: var(--primary);
}

.search-result-icon {
  width: 40px;
  height: 40px;
  background: var(--primary-light);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  flex-shrink: 0;
}

.search-result-content {
  flex: 1;
  min-width: 0;
}

.search-result-title {
  font-weight: 600;
  font-size: 0.95rem;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.search-result-subtitle {
  font-size: 0.85rem;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.search-result-badge {
  padding: 4px 10px;
  background: var(--primary);
  color: white;
  border-radius: var(--radius-md);
  font-size: 0.75rem;
  font-weight: 600;
  flex-shrink: 0;
}

.search-result-badge.warning {
  background: var(--warning);
}

.search-result-badge.success {
  background: var(--success);
}

.search-result-badge.danger {
  background: var(--danger);
}

/* Search loading state */
.search-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 32px 20px;
  color: var(--text-secondary);
  font-size: 0.9375rem;
}

.search-loading .spinner {
  margin: 0;
}

.search-loading span {
  font-weight: 500;
}

@media (max-width: 640px) {
  .search-input-wrapper {
    top: 60px;
    padding: 10px 12px;
  }
}

/* ===== SVG ICON SUPPORT (LUCIDE ICONS) ===== */

/*
 * Lucide's createIcons() stamps width="24" height="24" as HTML attributes
 * on every generated <svg>. Inline attributes override normal CSS, so our
 * component-level sizing rules would be ignored. This global rule strips
 * Lucide's default size so our per-component rules take effect cleanly.
 * Any Lucide SVG without a component-scoped rule gets a sensible 18px default.
 */
svg[class*="lucide"] {
  width: 18px !important;
  height: 18px !important;
}

/* Nav icons */
.nav-icon svg {
  width: 16px !important;
  height: 16px !important;
  stroke-width: 2;
}

.nav-arrow svg {
  width: 12px !important;
  height: 12px !important;
  stroke-width: 2;
}

/* Store icons */
.store-icon svg,
.store-option-icon svg {
  width: 20px !important;
  height: 20px !important;
  stroke-width: 2;
}

.store-arrow svg {
  width: 14px !important;
  height: 14px !important;
  stroke-width: 2;
}

.store-option-check svg {
  width: 16px !important;
  height: 16px !important;
  stroke-width: 2.5;
}

.store-search-icon svg {
  width: 16px !important;
  height: 16px !important;
  stroke-width: 2;
}

.store-search-clear svg {
  width: 18px !important;
  height: 18px !important;
  stroke-width: 2;
}

/* User menu icons */
.user-menu-icon svg {
  width: 16px !important;
  height: 16px !important;
  stroke-width: 2;
}

.user-dropdown-icon svg {
  width: 18px !important;
  height: 18px !important;
  stroke-width: 2;
}

/* Top bar icons */
.mobile-menu-toggle svg {
  width: 24px !important;
  height: 24px !important;
  stroke-width: 2;
}

.search-icon svg,
.search-toggle-btn svg {
  width: 20px !important;
  height: 20px !important;
  stroke-width: 2;
}

.search-close-btn svg {
  width: 20px !important;
  height: 20px !important;
  stroke-width: 2;
}

.action-btn svg {
  width: 20px !important;
  height: 20px !important;
  stroke-width: 2;
}

.action-btn-primary svg {
  width: 16px !important;
  height: 16px !important;
  stroke-width: 2;
}

.sidebar-close svg {
  width: 24px !important;
  height: 24px !important;
  stroke-width: 2;
}

/* Dropdown item icons */
.dropdown-item-icon svg {
  width: 20px !important;
  height: 20px !important;
  stroke-width: 2;
}

/* Calendar icons in dropdown */
.calendar-grid-icon svg {
  width: 20px !important;
  height: 20px !important;
  stroke-width: 2;
}

.calendar-section-label svg {
  width: 14px !important;
  height: 14px !important;
  stroke-width: 2;
}

.shift-summary-avatar {
  width: 50px;
  height: 50px;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: white;
  font-size: 1.2rem;
}

.shift-summary-info {
  text-align: left;
}

.shift-summary-name {
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--text-primary);
}

.shift-summary-time {
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.shift-summary-duration {
  font-size: 2rem;
  font-weight: 700;
  color: var(--success);
}

.shift-summary-label {
  font-size: 0.85rem;
  color: var(--text-secondary);
}

/* Success Modal */
.success-icon {
  width: 80px;
  height: 80px;
  background: var(--primary-light);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  margin: 0 auto 24px;
  animation: successPop 0.5s ease-out;
}

.success-icon svg {
  width: 48px !important;
  height: 48px !important;
  stroke: var(--success);
  stroke-width: 3;
}

@keyframes successPop {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.success-message {
  text-align: center;
}

.success-message h3 {
  font-size: 1.5rem;
  margin-bottom: 8px;
  color: var(--text-primary);
}

.success-message p {
  color: var(--text-secondary);
  font-size: 1rem;
}

.time-display {
  margin-top: 16px;
  padding: 16px;
  background: var(--gray-50);
  border-radius: var(--radius-md);
  text-align: center;
}

.time-display-label {
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-bottom: 4px;
}

.time-display-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--primary);
}

/* Staff Select in Clock In Modal */
.staff-select-container {
  margin-bottom: 20px;
}

.staff-select {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid var(--border-color);
  border-radius: var(--radius-md);
  font-size: 1rem;
  font-family: var(--font-primary);
  background: white;
  cursor: pointer;
  transition: all var(--transition-base);
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 20px;
  padding-right: 44px;
}

.staff-select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-glow);
}

/* Responsive for Time Clock */
@media (max-width: 968px) {
  .action-btn.timeclock .timeclock-text {
    display: none;
  }
  
  .action-btn.timeclock {
    width: 40px;
    padding: 0;
  }
  
  .action-btn.timeclock .status-dot {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 10px;
    height: 10px;
    border: 2px solid white;
  }
  
  /* Fix timeclock dropdown positioning on mobile */
  #timeclockDropdown .dropdown-menu,
  #timeclockMenu {
    position: fixed;
    top: 70px;
    left: 16px;
    right: 16px;
    min-width: auto;
    max-width: none;
    max-height: calc(100vh - 90px);
    overflow-y: auto;
  }
  
  .modal {
    width: 95%;
    max-height: 95vh;
  }
  
  .pin-button {
    height: 56px;
    font-size: 1.3rem;
  }
}

@media (max-width: 480px) {
  .pin-pad {
    gap: 8px;
  }
  
  .pin-button {
    height: 52px;
    font-size: 1.2rem;
  }
  
  .modal-header,
  .modal-body,
  .modal-footer {
    padding: 16px;
  }
}

/* =============================================================
   MOBILE NAVIGATION SYSTEM (v3)
   Bottom nav, sub-tabs, sheets, Ask Woof top bar button
   ============================================================= */

/* --- Mobile Top Bar Elements --- */
.mobile-topbar-left {
  display: none; /* Hidden on desktop, shown on mobile via media query */
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}

.mobile-topbar-right {
  display: none; /* Hidden on desktop, shown on mobile via media query */
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}

.mobile-woof-logo {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
}

.mobile-woof-logo svg {
  width: 34px !important;
  height: 34px !important;
}

.mobile-store-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--gray-900);
  letter-spacing: -0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mobile-top-btn {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  border: none;
  background: transparent;
  cursor: pointer;
  position: relative;
  transition: background 0.15s;
}

.mobile-top-btn:hover {
  background: var(--gray-100);
}

.mobile-top-btn:active {
  background: var(--gray-200);
}

.mobile-top-btn svg {
  width: 20px !important;
  height: 20px !important;
  color: var(--gray-600);
}

.mobile-top-btn .badge-num {
  position: absolute;
  top: 3px;
  right: 1px;
  min-width: 17px;
  height: 17px;
  background: var(--danger);
  color: white;
  font-size: 9px;
  font-weight: 700;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  border: 2px solid white;
  font-family: var(--font-primary);
}

/* --- Ask Woof Top Button --- */
.woof-top-btn {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  border: none;
  background: var(--primary-light);
  cursor: pointer;
  position: relative;
  transition: all 0.2s;
}

.woof-top-btn:hover {
  background: var(--primary);
}

.woof-top-btn:hover .woof-paw {
  color: white;
}

.woof-top-btn:active {
  transform: scale(0.92);
}

.woof-paw {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
  line-height: 1;
}

/* --- Bottom Navigation --- */
.bottom-nav {
  display: none; /* Hidden by default (desktop), shown on mobile */
  align-items: flex-end;
  background: white;
  border-top: 1px solid var(--gray-200);
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding-bottom: env(safe-area-inset-bottom, 0);
}

.bnav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 10px 4px 10px;
  min-height: 52px;
  border: none;
  background: transparent;
  cursor: pointer;
  position: relative;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

.bnav-item svg {
  width: 22px !important;
  height: 22px !important;
  color: var(--gray-400);
  transition: color 0.15s;
}

.bnav-item span {
  font-size: 10px;
  font-weight: 600;
  color: var(--gray-400);
  font-family: var(--font-primary);
  transition: color 0.15s;
}

.bnav-item.active svg {
  color: var(--primary);
}

.bnav-item.active span:not(.bnav-badge) {
  color: var(--primary);
}

.bnav-item .bnav-badge {
  position: absolute;
  top: 4px;
  right: calc(50% - 18px);
  min-width: 16px;
  height: 16px;
  background: var(--danger);
  color: white;
  font-size: 9px;
  font-weight: 700;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  font-family: var(--font-primary);
}

.bnav-item .more-dot {
  position: absolute;
  top: 4px;
  right: calc(50% - 14px);
  width: 8px;
  height: 8px;
  background: var(--primary);
  border-radius: 50%;
}

/* --- FAB (Floating Action Button) --- */
.bnav-fab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 0 4px 10px;
  border: none;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.fab-circle {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-full);
  background: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: -28px;
  box-shadow: 0 4px 14px rgba(24,160,251,0.35);
  transition: transform 0.2s, box-shadow 0.2s;
}

.fab-circle:active {
  transform: scale(0.92);
  box-shadow: 0 2px 8px rgba(24,160,251,0.3);
}

.fab-circle svg {
  width: 26px !important;
  height: 26px !important;
  color: white;
}

/* --- Sub Tabs (Bookings / Payments pill navigation) --- */
.sub-tabs {
  display: none; /* Hidden by default, shown via JS when on bookings/payments pages */
  gap: 4px;
  padding: 8px 16px 14px;
  background: white;
  border-top: 1px solid var(--gray-200);
  overflow-x: auto;
  flex-shrink: 0;
  -webkit-overflow-scrolling: touch;
  position: fixed;
  bottom: calc(52px + env(safe-area-inset-bottom, 0px));
  left: 0;
  right: 0;
  z-index: 100;
}

.sub-tabs::-webkit-scrollbar {
  display: none;
}

.sub-tabs.show {
  display: flex;
}

.sub-tab {
  padding: 7px 16px;
  font-size: 12px;
  font-weight: 600;
  font-family: var(--font-primary);
  border-radius: var(--radius-full);
  border: 1.5px solid var(--gray-200);
  background: white;
  color: var(--gray-600);
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s;
  flex-shrink: 0;
}

.sub-tab:hover {
  border-color: var(--gray-300);
}

.sub-tab.active {
  background: var(--gray-900);
  color: white;
  border-color: var(--gray-900);
}

/* --- Bottom Sheet Overlay & Sheet --- */
.sheet-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.35);
  z-index: 200;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s;
}

.sheet-overlay.open {
  opacity: 1;
  visibility: visible;
}

.sheet {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: white;
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -8px 40px rgba(0,0,0,0.12);
  z-index: 210;
  transform: translateY(100%);
  transition: transform 0.35s cubic-bezier(0.4,0,0.2,1);
  max-height: 85vh;
  overflow-y: auto;
}

.sheet.open {
  transform: translateY(0);
}

.sheet-top {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 12px 4px;
}

.sheet-handle {
  width: 36px;
  height: 4px;
  background: var(--gray-300);
  border-radius: var(--radius-full);
}

.sheet-close {
  position: absolute;
  right: 8px;
  top: 6px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  color: var(--text-tertiary);
}

.sheet-close:hover {
  background: var(--gray-100);
  color: var(--text-primary);
}

/* --- Quick Add Sheet --- */
.qa-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px 8px;
}

.qa-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--gray-900);
}

.qa-close {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  border: none;
  background: var(--gray-100);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s;
}

.qa-close:hover {
  background: var(--gray-200);
}

.qa-close svg {
  width: 16px !important;
  height: 16px !important;
  color: var(--gray-500);
}

.qa-grid {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 10px;
  padding: 8px 16px 40px;
}

.qa-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border-radius: var(--radius-lg);
  border: 1.5px solid var(--gray-100);
  background: white;
  cursor: pointer;
  font-family: var(--font-primary);
  transition: all 0.15s;
  text-decoration: none;
  color: inherit;
}

.qa-item:hover {
  border-color: var(--primary);
  background: var(--primary-light);
}

.qa-item:active {
  transform: scale(0.97);
}

.qa-icon {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.qa-icon svg {
  width: 18px !important;
  height: 18px !important;
}

.qa-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--gray-800);
}

.qa-sublabel {
  font-size: 10px;
  color: var(--gray-500);
  margin-top: 1px;
}

/* --- More Sheet --- */
.more-section {
  padding: 4px 16px;
}

.more-section-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--gray-400);
  padding: 12px 4px 6px;
}

.more-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 4px;
  border: none;
  background: transparent;
  cursor: pointer;
  width: 100%;
  font-family: var(--font-primary);
  text-align: left;
  border-radius: var(--radius-md);
  transition: background 0.1s;
  text-decoration: none;
  color: inherit;
}

.more-item:hover {
  background: var(--gray-50);
}

.more-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.more-icon svg {
  width: 20px !important;
  height: 20px !important;
}

.more-text {
  flex: 1;
}

.more-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--gray-800);
}

.more-desc {
  font-size: 11px;
  color: var(--gray-500);
  margin-top: 1px;
}

.more-arrow {
  color: var(--gray-300);
  flex-shrink: 0;
}

.more-arrow svg {
  width: 16px !important;
  height: 16px !important;
}

.more-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  background: var(--danger);
  color: white;
  flex-shrink: 0;
}

.more-divider {
  height: 1px;
  background: var(--gray-100);
  margin: 4px 16px;
}

.more-user {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px 20px;
}

.more-user-avatar {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background: var(--info-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  color: var(--primary-dark);
}

.more-user-info {
  flex: 1;
}

.more-user-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--gray-800);
}

.more-user-store {
  font-size: 11px;
  color: var(--gray-500);
}

/* =============================================================
   NEW DESIGN SYSTEM COMPONENTS
   Section Icons, Stat Cards, Content Tabs, Filter Pills,
   Section Headers, Attention Panels, Promo Banner, Page Subtitle
   ============================================================= */

/* ===== SECTION ICONS (replace emoji) ===== */
.section-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-sm);
  vertical-align: middle;
  flex-shrink: 0;
}

.section-icon svg {
  width: 16px !important;
  height: 16px !important;
}

.section-icon--primary {
  background: var(--primary-light);
  color: var(--primary-dark);
}

.section-icon--danger {
  background: var(--danger-light);
  color: var(--danger-dark);
}

.section-icon--warning {
  background: var(--warning-light);
  color: var(--warning-dark);
}

.section-icon--success {
  background: var(--success-light);
  color: var(--success-dark);
}

.section-icon--info {
  background: var(--info-light);
  color: var(--info-dark);
}

.section-icon--muted {
  background: var(--gray-100);
  color: var(--gray-500);
}

/* ===== STAT CARDS ===== */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  margin-bottom: var(--layout-gap);
}

@media (max-width: 860px) {
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .stat-grid { gap: var(--space-2); }
  .stat-card { padding: var(--space-3); }
  .stat-card__value { font-size: 1.2rem; }
  .stat-card__label { font-size: 0.625rem; }
}

.stat-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: var(--layout-padding);
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.stat-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.stat-card__label {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: var(--space-1);
}

.stat-card__value {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1;
  margin-bottom: 6px;
}

.stat-card__meta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.6875rem;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: var(--radius-full);
}

.stat-card__meta--positive {
  background: var(--primary-light);
  color: var(--primary-dark);
}

.stat-card__meta--neutral {
  background: var(--gray-100);
  color: var(--gray-500);
}

.stat-card__meta--negative {
  background: var(--danger-light);
  color: var(--danger-dark);
}

/* ===== CONTENT TABS ===== */
.content-tabs {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--border-color);
  margin-bottom: var(--layout-inner);
}

.content-tab {
  padding: var(--space-3) var(--space-4);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-tertiary);
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
  transition: all var(--transition-fast);
  font-family: var(--font-primary);
  background: none;
  border-top: none;
  border-left: none;
  border-right: none;
}

.content-tab:hover {
  color: var(--text-primary);
}

.content-tab.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
}

/* ===== FILTER PILLS ===== */
.filter-pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.filter-pill {
  padding: var(--space-2) var(--space-4);
  font-size: 0.8125rem;
  font-weight: 600;
  border-radius: var(--radius-full);
  border: 1.5px solid var(--border-color);
  background: var(--bg-surface);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition-fast);
  font-family: var(--font-primary);
}

.filter-pill:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.filter-pill.active {
  background: var(--gray-900);
  color: white;
  border-color: var(--gray-900);
}

/* ===== SECTION HEADER ===== */
.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--layout-inner);
  gap: var(--space-4);
}

.section-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.section-count {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--text-tertiary);
}

/* ===== PAGE SUBTITLE ===== */
.page-subtitle {
  font-size: 0.875rem;
  color: var(--text-secondary);
  font-weight: 500;
  margin-top: 2px;
}

/* ===== ATTENTION PANELS ===== */
.attention-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  margin-bottom: var(--layout-gap);
}

@media (max-width: 768px) {
  .attention-grid { grid-template-columns: 1fr; }
}

.attention-panel {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: var(--layout-padding);
  box-shadow: var(--shadow-card);
}

.attention-panel--urgent {
  border-left: 3px solid var(--danger);
}

.attention-panel--upcoming {
  border-left: 3px solid var(--primary);
}

.attention-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--layout-inner);
  padding-bottom: var(--layout-inner);
  border-bottom: 1px solid var(--gray-100);
}

.attention-panel__title {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.attention-panel__count {
  font-size: 0.625rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  color: white;
}

.attention-panel--urgent .attention-panel__count {
  background: var(--danger);
}

.attention-panel--upcoming .attention-panel__count {
  background: var(--primary);
}

.attention-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2) 0;
}

.attention-item + .attention-item {
  border-top: 1px solid var(--gray-50);
}

.attention-item__name {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-primary);
}

.attention-item__sub {
  font-size: 0.75rem;
  color: var(--text-tertiary);
  margin-top: 2px;
}

.attention-item__badge {
  font-size: 0.6875rem;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  white-space: nowrap;
}

.attention-item__badge--urgent {
  background: var(--danger-light);
  color: var(--danger-text);
}

.attention-item__badge--upcoming {
  background: var(--primary-light);
  color: var(--primary-dark);
}

/* ===== PROMO BANNER ===== */
.promo-banner {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--layout-padding) var(--layout-gap);
  border-radius: var(--radius-lg);
  background: var(--primary-light);
  border: 1px solid var(--primary);
  margin-bottom: var(--layout-gap);
}

.promo-banner__icon {
  width: 36px;
  height: 36px;
  background: var(--bg-surface);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--primary);
}

.promo-banner__icon svg {
  width: 18px !important;
  height: 18px !important;
}

.promo-banner__content {
  flex: 1;
}

.promo-banner__title {
  font-weight: 700;
  font-size: 0.875rem;
  color: var(--text-primary);
  margin-bottom: 2px;
}

.promo-banner__text {
  font-size: 0.8125rem;
  color: var(--text-secondary);
}

.promo-banner__action {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--primary);
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
}

/* --- Desktop: Hide bottom nav & mobile elements --- */
@media (min-width: 969px) {
  .bottom-nav {
    display: none !important;
  }

  .sub-tabs {
    display: none !important;
  }

  .mobile-topbar-left,
  .mobile-topbar-right {
    display: none !important;
  }
  
  .sheet-overlay,
  .sheet {
    display: none !important;
  }
}

/* =============================================================
   WOOF MODAL SYSTEM v1.0
   Two types: Center Modal (.woof-modal) + Drawer (.woof-drawer)
   Both go full-screen on mobile (<640px)
   
   USAGE:
     Center: <div class="woof-modal woof-modal--md" id="myModal">
     Drawer: <div class="woof-drawer" id="myDrawer">
     Open:   element.classList.add('open') + overlay.classList.add('open')
     Close:  element.classList.remove('open') + overlay.classList.remove('open')
     
   SIZE MODIFIERS (center modal only):
     .woof-modal--sm   400px
     .woof-modal--md   540px  (default)
     .woof-modal--lg   680px
     
   INTERNAL STRUCTURE (same for both types):
     __header  → title-group (__title, __subtitle) + __close button
     __body    → scrollable content area
     __footer  → action buttons (use __footer-left for left-aligned secondary actions)
   ============================================================= */

/* ===== SHARED OVERLAY ===== */
.woof-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0);
  z-index: 1000;
  visibility: hidden;
  transition: background 250ms ease, visibility 0s 250ms;
}

.woof-overlay.open {
  background: rgba(0, 0, 0, 0.4);
  visibility: visible;
  transition: background 250ms ease, visibility 0s 0s;
}


/* ===== TYPE 1: CENTER MODAL ===== */
.woof-modal {
  position: fixed;
  z-index: 1001;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.95);
  width: 540px;
  max-width: calc(100vw - 48px);
  max-height: calc(100vh - 48px);
  background: var(--bg-surface);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-modal);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1),
              opacity 200ms ease,
              visibility 0s 250ms;
}

.woof-modal.open {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
  visibility: visible;
  transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1),
              opacity 200ms ease,
              visibility 0s 0s;
}

/* Size modifiers */
.woof-modal--sm { width: 400px; }
.woof-modal--md { width: 540px; }
.woof-modal--lg { width: 680px; }

/* ===== TYPE 2: DRAWER (SIDE PANEL) ===== */
.woof-drawer {
  position: fixed;
  z-index: 1001;
  top: 0;
  right: 0;
  bottom: 0;
  width: 480px;
  max-width: 100vw;
  background: var(--bg-surface);
  box-shadow: var(--shadow-modal);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translateX(100%);
  visibility: hidden;
  transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1),
              visibility 0s 300ms;
}

.woof-drawer.open {
  transform: translateX(0);
  visibility: visible;
  transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1),
              visibility 0s 0s;
}

/* ===== SHARED INTERNAL STRUCTURE ===== */
.woof-modal__header,
.woof-drawer__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 24px 24px 0;
  flex-shrink: 0;
}

.woof-modal__title-group,
.woof-drawer__title-group {
  flex: 1;
  min-width: 0;
}

.woof-modal__title,
.woof-drawer__title {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
  line-height: 1.3;
}

.woof-modal__subtitle,
.woof-drawer__subtitle {
  font-size: 0.8125rem;
  color: var(--text-secondary);
  margin: 4px 0 0;
  line-height: 1.4;
}

.woof-modal__close,
.woof-drawer__close {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  border: none;
  background: var(--gray-100);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition-fast);
  flex-shrink: 0;
  margin-top: 2px;
}

.woof-modal__close:hover,
.woof-drawer__close:hover {
  background: var(--gray-200);
}

.woof-modal__close:active,
.woof-drawer__close:active {
  background: var(--gray-300);
  transform: scale(0.95);
}

.woof-modal__close svg,
.woof-drawer__close svg {
  width: 16px !important;
  height: 16px !important;
  color: var(--gray-500);
}

.woof-modal__body,
.woof-drawer__body {
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.woof-modal__body::-webkit-scrollbar,
.woof-drawer__body::-webkit-scrollbar {
  width: 6px;
}

.woof-modal__body::-webkit-scrollbar-track,
.woof-drawer__body::-webkit-scrollbar-track {
  background: var(--gray-100);
}

.woof-modal__body::-webkit-scrollbar-thumb,
.woof-drawer__body::-webkit-scrollbar-thumb {
  background: var(--gray-300);
  border-radius: 3px;
}

.woof-modal__footer,
.woof-drawer__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 24px;
  border-top: 1px solid var(--border-color);
  flex-shrink: 0;
  background: var(--bg-surface);
}

.woof-modal__footer-left,
.woof-drawer__footer-left {
  flex: 1;
}

/* ===== MODAL CONTENT HELPERS ===== */

/* Divider inside modal/drawer body */
.woof-modal__divider,
.woof-drawer__divider {
  height: 1px;
  background: var(--border-color);
  margin: 20px 0;
}

/* Section label inside body */
.woof-modal__section-label,
.woof-drawer__section-label {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-tertiary);
  margin-bottom: 14px;
}

/* Info rows (label → value pairs) */
.woof-modal__info-row,
.woof-drawer__info-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
}

.woof-modal__info-row + .woof-modal__info-row,
.woof-drawer__info-row + .woof-drawer__info-row {
  border-top: 1px solid var(--gray-100);
}

.woof-modal__info-label,
.woof-drawer__info-label {
  font-size: 0.8125rem;
  color: var(--text-secondary);
}

.woof-modal__info-value,
.woof-drawer__info-value {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-primary);
}

/* Tabs inside drawer/modal */
.woof-modal__tabs,
.woof-drawer__tabs {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: var(--gray-100);
  border-radius: var(--radius-md);
  margin-bottom: 20px;
}

.woof-modal__tab,
.woof-drawer__tab {
  flex: 1;
  padding: 8px 12px;
  font-size: 0.8125rem;
  font-weight: 600;
  font-family: var(--font-primary);
  text-align: center;
  border-radius: var(--radius-sm);
  border: none;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.woof-modal__tab:hover,
.woof-drawer__tab:hover {
  color: var(--text-primary);
}

.woof-modal__tab.active,
.woof-drawer__tab.active {
  background: white;
  color: var(--text-primary);
  box-shadow: var(--shadow-sm);
}

/* Selectable list items */
.woof-modal__list-item,
.woof-drawer__list-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--border-color);
  margin-bottom: 8px;
  transition: all var(--transition-fast);
  cursor: pointer;
}

.woof-modal__list-item:hover,
.woof-drawer__list-item:hover {
  border-color: var(--primary);
  background: var(--primary-light);
}

.woof-modal__list-item-icon,
.woof-drawer__list-item-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.woof-modal__list-item-info,
.woof-drawer__list-item-info {
  flex: 1;
  min-width: 0;
}

.woof-modal__list-item-name,
.woof-drawer__list-item-name {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-primary);
}

.woof-modal__list-item-sub,
.woof-drawer__list-item-sub {
  font-size: 0.75rem;
  color: var(--text-tertiary);
  margin-top: 1px;
}

/* Avatar inside drawer header */
.woof-drawer__avatar {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background: var(--primary-light);
  color: var(--primary-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8125rem;
  font-weight: 700;
  flex-shrink: 0;
}

/* ===== MOBILE: BOTH TYPES GO FULL-SCREEN (<640px) ===== */
@media (max-width: 640px) {
  /* Modal slides up from bottom */
  .woof-modal {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: 100%;
    max-height: 100%;
    border-radius: 0;
    transform: translate(0, 100%);
    opacity: 1;
  }

  .woof-modal.open {
    transform: translate(0, 0);
  }

  /* Drawer slides up from bottom */
  .woof-drawer {
    width: 100%;
    transform: translateY(100%);
  }

  .woof-drawer.open {
    transform: translateY(0);
  }

  /* Drag handle on mobile */
  .woof-modal__header::before,
  .woof-drawer__header::before {
    content: '';
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 36px;
    height: 4px;
    border-radius: var(--radius-full);
    background: var(--gray-300);
  }

  .woof-modal__header,
  .woof-drawer__header {
    position: relative;
    padding: 28px 20px 0;
  }

  .woof-modal__body,
  .woof-drawer__body {
    padding: 16px 20px;
  }

  .woof-modal__footer,
  .woof-drawer__footer {
    padding: 14px 20px;
    padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  }
}

/* ===== BODY LOCK WHEN MODAL IS OPEN ===== */
body.woof-modal-open {
  overflow: hidden;
}

/* ===== IMAGE UPLOAD (shared component) ===== */
/* Zone mode — dashed box with placeholder / preview */
.woof-upload-zone {
  border: 2px dashed var(--border-color);
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-5);
  text-align: center;
  cursor: pointer;
  background: var(--gray-50);
  transition: border-color 0.15s, background-color 0.15s;
  position: relative;
  overflow: hidden;
}

.woof-upload-zone:hover,
.woof-upload-zone--dragover {
  border-color: var(--primary);
  background: var(--primary-light);
}

.woof-upload-zone--circle {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.woof-upload-zone--circle .woof-upload-preview img {
  border-radius: 50%;
}

/* Placeholder state */
.woof-upload-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-lg);
  background: var(--border-color);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-2);
}

.woof-upload-icon svg {
  width: 22px !important;
  height: 22px !important;
  color: var(--text-tertiary);
}

.woof-upload-zone--circle .woof-upload-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  margin-bottom: var(--space-1);
}

.woof-upload-zone--circle .woof-upload-icon svg {
  width: 18px !important;
  height: 18px !important;
}

.woof-upload-title {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 2px;
}

.woof-upload-desc {
  font-size: 0.75rem;
  color: var(--text-tertiary);
  line-height: 1.5;
}

.woof-upload-zone--circle .woof-upload-title {
  font-size: 0.75rem;
}

.woof-upload-zone--circle .woof-upload-desc {
  display: none;
}

/* Preview state */
.woof-upload-preview {
  display: flex;
  align-items: center;
  justify-content: center;
}

.woof-upload-preview img {
  max-width: 100%;
  max-height: 200px;
  border-radius: var(--radius-md);
  object-fit: contain;
}

.woof-upload-zone--circle .woof-upload-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  inset: 0;
}

/* Remove button */
.woof-upload-remove {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.15s;
}

.woof-upload-remove svg {
  width: 14px !important;
  height: 14px !important;
}

.woof-upload-zone:hover .woof-upload-remove {
  opacity: 1;
}

/* File chip — non-image preview */
.woof-upload-file-chip {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--bg-secondary, #f5f5f5);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--text-primary);
}

.woof-upload-file-chip svg {
  width: 16px !important;
  height: 16px !important;
  color: var(--text-secondary);
  flex-shrink: 0;
}

.woof-upload-file-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Inline mode — row with avatar + label + button */
.woof-upload-inline {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--surface);
}
/* ===== EMPTY STATES — .woof-empty =====
   The standard empty/error/zero-state surface
   (docs/empty-state-standard-spec.md §1, js/empty-state.js).
   Tokens only — light and dark both come from the token overrides above. */

.woof-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--space-8) var(--space-5);
}

.woof-empty .we-icon {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-full);
  background: var(--gray-100);
  color: var(--text-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-4);
}

.woof-empty .we-icon svg,
.woof-empty .we-icon i {
  width: 24px;
  height: 24px;
}

.woof-empty .we-mood {
  margin-bottom: var(--space-4);
}

.woof-empty .we-mood .woof-mood {
  display: block;
}

.woof-empty .we-icon.we-error {
  background: var(--danger-light);
  color: var(--danger);
}

.woof-empty .we-icon.we-done {
  background: var(--success-light);
  color: var(--success);
}

.woof-empty .we-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
}

.woof-empty .we-body {
  font-size: 0.84375rem; /* 13.5px */
  color: var(--text-secondary);
  line-height: 1.5;
  max-width: 44ch;
  margin-top: var(--space-2);
}

.woof-empty .we-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.woof-empty .we-link {
  margin-top: var(--space-3);
}

/* Quiet by design — and --primary on a surface is only ~2.8:1, which fails
   WCAG AA for 13px text; underlined --text-secondary passes in both themes. */
.woof-empty .we-link-a {
  font-size: 0.8125rem;
  color: var(--text-secondary);
  text-decoration: underline;
  text-underline-offset: 2px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

.woof-empty .we-link-a:hover {
  color: var(--text-primary);
}

/* compact — drawers, pickers, modals: no icon, tighter padding */
.woof-empty--compact {
  padding: var(--space-4);
}

.woof-empty--compact .we-icon {
  display: none;
}

/* Loading branch — WoofEmptyState.skeletonRows(n). Never blank, never a
   message that can outlive a failed fetch. */
.we-skeleton-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
}

.we-skel {
  height: 12px;
  border-radius: var(--radius-full);
  background: linear-gradient(90deg, var(--gray-100) 25%, var(--gray-200) 37%, var(--gray-100) 63%);
  background-size: 400% 100%;
  animation: we-shimmer 1.4s ease infinite;
}

.we-skel-dot {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}

/* Inline shimmer for a stat-tile value: WoofEmptyState.skeletonPill(). */
.we-skel-pill {
  display: inline-block;
  width: 2.5em;
  height: 0.8em;
  vertical-align: middle;
}

/* Slow-load line: WoofEmptyState.pending() appends it after ~4 s. One muted
   sentence naming what is loading; never a spinner, never a mascot
   (loading-states-spec §5.3). */
.we-skeleton-slow {
  padding: var(--space-2) var(--space-4);
  font-size: 0.8rem;
  color: var(--text-tertiary);
}

/* Settings-form loading branch: WoofEmptyState.formPending(). Fields keep
   their box but hide their (default) text under the shimmer; toggles and
   buttons dim. Failed: dimmed, no shimmer, controls stay disabled. */
.we-form-loading { pointer-events: none; }
.we-form-loading input:not([type="checkbox"]):not([type="radio"]),
.we-form-loading select,
.we-form-loading textarea {
  color: transparent !important;
  -webkit-text-fill-color: transparent;
  background: linear-gradient(90deg, var(--gray-100) 25%, var(--gray-200) 37%, var(--gray-100) 63%) !important;
  background-size: 400% 100% !important;
  animation: we-shimmer 1.4s ease infinite;
  caret-color: transparent;
}
.we-form-loading input::placeholder,
.we-form-loading textarea::placeholder { color: transparent; }
.we-form-loading input[type="checkbox"],
.we-form-loading input[type="radio"],
.we-form-loading button,
.we-form-loading .toggle-switch,
.we-form-loading .chip { opacity: 0.4; }
.we-form-failed input, .we-form-failed select, .we-form-failed textarea,
.we-form-failed button, .we-form-failed .toggle-switch, .we-form-failed .chip { opacity: 0.5; }
.we-form-slow { padding-left: 0; padding-right: 0; }
.we-form-banner { margin-bottom: var(--space-4); }
@media (prefers-reduced-motion: reduce) {
  .we-form-loading input, .we-form-loading select, .we-form-loading textarea { animation: none; }
}

@keyframes we-shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: 0 0; }
}

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