/* ===== HBH APP - MODERN DESIGN SYSTEM ===== */

/* CSS Custom Properties */
:root {
  /* Brand Colors */
  --hbh-primary: #0b3d91;
  --hbh-primary-dark: #001f3f;
  --hbh-accent: #e87722;
  --hbh-accent-light: #ff8c42;
  
  /* RGB variants for rgba() functions */
  --hbh-primary-rgb: 11, 61, 145;
  --hbh-accent-rgb: 232, 119, 34;
  
  /* Neutral Colors */
  --white: #ffffff;
  --gray-25: #fafbfc;
  --gray-50: #f8fafc;
  --gray-100: #f1f5f9;
  --gray-200: #e2e8f0;
  --gray-300: #cbd5e1;
  --gray-400: #94a3b8;
  --gray-500: #64748b;
  --gray-600: #475569;
  --gray-700: #334155;
  --gray-800: #1e293b;
  --gray-900: #0f172a;

  /* Semantic Surface/Text Tokens */
  --color-bg: var(--gray-50);
  --color-bg-rgb: 248, 250, 252;
  --color-surface: var(--white);
  --color-surface-alt: var(--gray-100);
  --color-surface-muted: var(--gray-50);
  --color-text: var(--gray-800);
  --color-text-muted: var(--gray-600);
  --color-text-subtle: var(--gray-500);
  --color-border: var(--gray-200);
  --color-border-strong: var(--gray-300);
  --color-link: var(--hbh-primary);
  --color-link-hover: var(--hbh-accent);
  --color-focus-ring: rgba(var(--hbh-primary-rgb), 0.25);
  --color-focus-outline: var(--hbh-primary);
  --color-focus-outline-on-brand: rgba(255, 255, 255, 0.9);
  --color-code-bg: rgba(var(--hbh-primary-rgb), 0.08);
  --color-overlay: rgba(0, 0, 0, 0.45);
  --color-overlay-strong: rgba(0, 0, 0, 0.7);

  /* Bootstrap theme alignment */
  --bs-body-bg: var(--color-bg);
  --bs-body-color: var(--color-text);
  --bs-body-bg-rgb: var(--color-bg-rgb);
  --bs-body-color-rgb: 30, 41, 59;
  --bs-emphasis-color: var(--color-text);
  --bs-secondary-color: var(--color-text-muted);
  --bs-tertiary-color: var(--color-text-subtle);
  --bs-border-color: var(--color-border);
  --bs-border-color-translucent: rgba(0, 0, 0, 0.12);
  --bs-link-color: var(--color-link);
  --bs-link-hover-color: var(--color-link-hover);
  --bs-card-bg: var(--color-surface);
  --bs-card-border-color: var(--color-border);
  --bs-dropdown-bg: var(--color-surface);
  --bs-dropdown-link-color: var(--color-text);
  --bs-dropdown-link-hover-bg: var(--color-surface-alt);
  --bs-input-bg: var(--color-surface);
  --bs-input-color: var(--color-text);
  --bs-input-border-color: var(--color-border);
  
  /* Status Colors */
  --success: #10b981;
  --success-light: #34d399;
  --warning: #f59e0b;
  --warning-light: #fbbf24;
  --error: #ef4444;
  --error-light: #f87171;
  --info: #3b82f6;
  --info-light: #60a5fa;

  /* Status Badge Tokens (semantic — auto-adapt in dark mode) */
  --badge-success-bg: #198754;
  --badge-success-text: #fff;
  --badge-info-bg: #0dcaf0;
  --badge-info-text: #000;
  --badge-warning-bg: #ffc107;
  --badge-warning-text: #000;
  --badge-secondary-bg: #6c757d;
  --badge-secondary-text: #fff;
  --badge-danger-bg: #dc3545;
  --badge-danger-text: #fff;
  --badge-primary-bg: var(--hbh-primary);
  --badge-primary-text: #fff;

  /* Status Row Tint Tokens */
  --row-success-bg: rgba(25, 135, 84, 0.08);
  --row-warning-bg: rgba(255, 193, 7, 0.08);
  --row-info-bg: rgba(13, 202, 240, 0.08);

  /* Footer Tokens */
  --footer-bg: var(--gray-100);
  --footer-text: var(--gray-600);
  --footer-border: var(--gray-200);
  --footer-link: var(--gray-500);
  --footer-link-hover: var(--hbh-primary);

  /* Alert Tokens */
  --alert-success-bg: #d1fae5;
  --alert-success-text: #065f46;
  --alert-success-border: #a7f3d0;
  --alert-danger-bg: #fee2e2;
  --alert-danger-text: #991b1b;
  --alert-danger-border: #fecaca;
  --alert-warning-bg: #fef3c7;
  --alert-warning-text: #92400e;
  --alert-warning-border: #fde68a;
  --alert-info-bg: #dbeafe;
  --alert-info-text: #1e40af;
  --alert-info-border: #bfdbfe;

  /* Contrast Text (for text on vivid brand / status backgrounds) */
  --color-text-on-primary: #ffffff;
  --color-text-on-accent: #ffffff;

  /* Interactive State Tokens */
  --color-hover-bg: var(--gray-100);
  --color-active-bg: var(--gray-200);
  --color-selected-bg: rgba(var(--hbh-primary-rgb), 0.08);
  --color-selected-border: var(--hbh-primary);
  --color-drag-border: var(--hbh-primary);

  /* Validation Feedback Tokens */
  --validation-valid-bg: #e8f5e8;
  --validation-valid-border: #4caf50;
  --validation-valid-text: #2e7d32;
  --validation-invalid-bg: #fdecea;
  --validation-invalid-border: #ef4444;
  --validation-invalid-text: #c62828;

  /* Secondary Color (Bootstrap gray) */
  --color-secondary: #6c757d;
  --color-secondary-hover: #5a6268;
  
  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  
  /* Border Radius */
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-2xl: 1.5rem;
  
  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  
  /* Typography */
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 1.875rem;
  --font-size-4xl: 2.25rem;
  --font-size-5xl: 3rem;
  --font-size-6xl: 3.75rem;
  
  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-normal: 250ms ease;
  --transition-slow: 350ms ease;
  
  /* Mobile-specific Design Tokens */
  --mobile-breakpoint-sm: 576px;
  --mobile-breakpoint-md: 768px;
  --mobile-breakpoint-lg: 992px;
  --mobile-breakpoint-xl: 1200px;
  
  /* Mobile Spacing (smaller for mobile devices) */
  --mobile-space-1: 0.125rem;  /* 2px */
  --mobile-space-2: 0.25rem;   /* 4px */
  --mobile-space-3: 0.5rem;    /* 8px */
  --mobile-space-4: 0.75rem;   /* 12px */
  --mobile-space-5: 1rem;      /* 16px */
  --mobile-space-6: 1.25rem;   /* 20px */
  --mobile-space-8: 1.5rem;    /* 24px */
  --mobile-space-10: 2rem;     /* 32px */
  
  /* Mobile Typography */
  --mobile-font-size-xs: 0.625rem;  /* 10px */
  --mobile-font-size-sm: 0.75rem;   /* 12px */
  --mobile-font-size-base: 0.875rem; /* 14px */
  --mobile-font-size-lg: 1rem;      /* 16px */
  --mobile-font-size-xl: 1.125rem;  /* 18px */
  --mobile-font-size-2xl: 1.25rem;  /* 20px */
  --mobile-font-size-3xl: 1.5rem;   /* 24px */
  --mobile-font-size-4xl: 1.875rem; /* 30px */
  
  /* Mobile Component Sizing */
  --mobile-card-padding: var(--mobile-space-4);
  --mobile-button-padding: var(--mobile-space-3) var(--mobile-space-5);
  --mobile-nav-height: 60px;
  --navbar-height: 64px; /* keep in sync with .navbar min-height */
  --mobile-touch-target: 44px; /* Minimum touch target size */
  
  /* Mobile Navigation */
  --mobile-nav-bg: var(--hbh-primary);
  --mobile-nav-border: var(--hbh-primary-dark);
  --mobile-sidebar-width: 280px;
  --mobile-sidebar-bg: var(--white);
  --mobile-sidebar-overlay: rgba(0, 0, 0, 0.5);
  
  /* Table Design Tokens */
  --table-bg: var(--white);
  --table-text: var(--gray-800);
  --table-border: var(--gray-200);
  --table-header-bg: var(--gray-50);
  --table-header-text: var(--gray-700);
  --table-hover-bg: rgba(var(--hbh-accent-rgb), 0.05);
  --table-stripe-bg: var(--gray-25);
  --table-active-bg: var(--hbh-primary);
  --table-active-text: var(--white);
  --table-shadow: var(--shadow-sm);
  --table-radius: var(--radius-md);
  --table-responsive-border: var(--gray-200);
  --table-responsive-shadow: var(--shadow-sm);

  /* Action Bars */
  --action-bar-bg: var(--gray-50);
  --action-bar-border: var(--gray-200);
  --action-bar-gap: var(--space-2);
  
  /* Form Tokens */
  --form-required-asterisk-color: var(--error);
  --form-invalid-border: var(--error);
  --form-valid-border: var(--success);
  --form-focus-ring: rgba(var(--hbh-primary-rgb), 0.15);
  --form-error-bg: rgba(239, 68, 68, 0.06);
  --form-error-text: var(--error);
  
  /* Calendar Tokens */
  --calendar-topbar-bg: var(--white);
  --calendar-topbar-border: var(--gray-200);
  --calendar-chip-bg: var(--gray-100);
  --calendar-chip-text: var(--gray-800);
  --calendar-chip-border: var(--gray-200);
  --calendar-chip-selected-bg: rgba(var(--hbh-primary-rgb), 0.10);
  --calendar-chip-selected-border: var(--hbh-primary);
  --calendar-drawer-bg: var(--white);
  --calendar-drawer-border: var(--gray-200);
  --calendar-drawer-shadow: var(--shadow-xl);
  --calendar-legend-bg: var(--white);
  --calendar-legend-border: var(--gray-200);
  --calendar-sticky-legend-offset: 72px;
  
  /* Calendar button tokens */
  /* Calendar button tokens aligned to app buttons */
  --calendar-button-primary-bg: var(--hbh-accent);
  --calendar-button-primary-bg-hover: var(--hbh-accent-light);
  --calendar-button-primary-text: var(--white);
  --calendar-button-primary-border: var(--hbh-accent);

  --calendar-button-secondary-bg: var(--color-secondary);
  --calendar-button-secondary-bg-hover: var(--color-secondary-hover);
  --calendar-button-secondary-text: var(--color-text-on-primary);
  --calendar-button-secondary-border: var(--color-secondary);

  --calendar-button-outline-secondary-bg: transparent;
  --calendar-button-outline-secondary-text: var(--color-secondary);
  --calendar-button-outline-secondary-border: var(--color-secondary);
  --calendar-button-outline-secondary-bg-hover: rgba(108,117,125,0.06);
  /* Phone Input */
  --phone-cc-width: 180px; /* width of country code select */
  --phone-help-color: var(--gray-600);
  --phone-default-country: "+420"; /* default CC used by UI init */
  /* Org Chart */
  --org-node-bg: var(--white);
  --org-node-border: var(--gray-200);
  --org-edge: var(--gray-300);
  --org-avatar-bg-start: var(--gray-200);
  --org-avatar-bg-end: var(--gray-300);
  --org-avatar-text: var(--gray-600);
  --org-legend-border: var(--color-border);
}

/* HR Requests */
.request-type-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-4);
}
.request-type-card {
  display: block;
  cursor: pointer;
}
.request-type-card input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.request-card-body {
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  background: var(--gray-50);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
  min-height: 120px;
}
.request-card-body:hover {
  border-color: var(--gray-300);
  box-shadow: var(--shadow-sm);
  transform: translateY(-2px);
}
.request-type-card input:checked + .request-card-body {
  border-color: var(--hbh-primary);
  box-shadow: 0 0 0 2px rgba(var(--hbh-primary-rgb), 0.15);
  background: var(--color-selected-bg);
}
.request-type-icon {
  font-size: 1.4rem;
}
.request-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.request-chip input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.request-chip .request-chip-body {
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-xl);
  padding: 6px 14px;
  background: var(--gray-50);
  font-size: var(--font-size-sm);
  transition: border-color var(--transition-fast), background var(--transition-fast);
}
.request-chip input:checked + .request-chip-body {
  border-color: var(--hbh-primary);
  background: rgba(var(--hbh-primary-rgb), 0.08);
  color: var(--hbh-primary);
}
.request-section {
  display: none;
}
.request-section.active {
  display: block;
}

/* Employee documents */
.doc-tag-filter.active {
  background: var(--hbh-primary);
  border-color: var(--hbh-primary);
  color: var(--color-text-on-primary);
}

/* ===== DARK THEME VARIABLES ===== */
[data-theme="dark"] {
  /* Brand Colors (adjusted for dark) */
  --hbh-primary: #4a90e2;
  --hbh-primary-dark: #2c5aa0;
  --hbh-accent: #ff8c42;
  --hbh-accent-light: #ffa366;

  /* RGB variants (must match adjusted brand colors above) */
  --hbh-primary-rgb: 74, 144, 226;
  --hbh-accent-rgb: 255, 140, 66;
  
  /* Neutral Colors (inverted) */
  --white: #0f172a;
  --gray-50: #1e293b;
  --gray-100: #334155;
  --gray-200: #475569;
  --gray-300: #64748b;
  --gray-400: #94a3b8;
  --gray-500: #cbd5e1;
  --gray-600: #e2e8f0;
  --gray-700: #f1f5f9;
  --gray-800: #f8fafc;
  --gray-900: #ffffff;
  
  /* Semantic Surface/Text Tokens */
  --color-bg: var(--gray-50);
  --color-bg-rgb: 30, 41, 59;
  --color-surface: var(--white);
  --color-surface-alt: var(--gray-100);
  --color-surface-muted: var(--gray-50);
  --color-text: var(--gray-800);
  --color-text-muted: var(--gray-600);
  --color-text-subtle: var(--gray-500);
  --color-border: var(--gray-200);
  --color-border-strong: var(--gray-300);
  --color-link: var(--hbh-primary);
  --color-link-hover: var(--hbh-accent);
  --color-focus-ring: rgba(var(--hbh-primary-rgb), 0.35);
  /* Light outline so keyboard focus stays visible on dark surfaces (8:1 vs --color-bg) */
  --color-focus-outline: #93c5fd;
  --color-focus-outline-on-brand: rgba(255, 255, 255, 0.9);
  --color-code-bg: rgba(var(--hbh-primary-rgb), 0.14);
  --color-overlay: rgba(0, 0, 0, 0.65);
  --color-overlay-strong: rgba(0, 0, 0, 0.75);

  /* Bootstrap theme alignment */
  --bs-body-bg: var(--color-bg);
  --bs-body-color: var(--color-text);
  --bs-body-bg-rgb: var(--color-bg-rgb);
  --bs-body-color-rgb: 248, 250, 252;
  --bs-emphasis-color: var(--color-text);
  --bs-secondary-color: var(--color-text-muted);
  --bs-tertiary-color: var(--color-text-subtle);
  --bs-border-color: var(--color-border);
  --bs-border-color-translucent: rgba(255, 255, 255, 0.12);
  --bs-link-color: var(--color-link);
  --bs-link-hover-color: var(--color-link-hover);
  --bs-card-bg: var(--color-surface);
  --bs-card-border-color: var(--color-border);
  --bs-dropdown-bg: var(--color-surface);
  --bs-dropdown-link-color: var(--color-text);
  --bs-dropdown-link-hover-bg: var(--color-surface-alt);
  --bs-input-bg: var(--color-surface);
  --bs-input-color: var(--color-text);
  --bs-input-border-color: var(--color-border);

  /* Status Badge Tokens (dark — translucent bg + tinted text, easy on eyes) */
  --badge-success-bg: rgba(52, 211, 153, 0.15);
  --badge-success-text: #6ee7b7;
  --badge-info-bg: rgba(56, 189, 248, 0.15);
  --badge-info-text: #7dd3fc;
  --badge-warning-bg: rgba(251, 191, 36, 0.15);
  --badge-warning-text: #fde68a;
  /* Secondary needs the brightest text: translucent bg composites above 4.5:1 threshold on hover/elevated surfaces */
  --badge-secondary-bg: rgba(148, 163, 184, 0.18);
  --badge-secondary-text: #e2e8f0;
  --badge-danger-bg: rgba(248, 113, 113, 0.15);
  --badge-danger-text: #fca5a5;
  --badge-primary-bg: rgba(74, 144, 226, 0.15);
  --badge-primary-text: #93c5fd;

  /* Status Row Tint Tokens (dark — visible but not overpowering) */
  --row-success-bg: rgba(34, 197, 94, 0.15);
  --row-warning-bg: rgba(234, 179, 8, 0.13);
  --row-info-bg: rgba(56, 189, 248, 0.13);
  --row-primary-bg: rgba(74, 144, 226, 0.13);

  /* Footer Tokens (dark — proper dark surface, NOT inverted gray-900) */
  --footer-bg: #111827;
  --footer-text: #9ca3af;
  --footer-border: #1f2937;
  --footer-link: #6b7280;
  --footer-link-hover: var(--hbh-primary);

  /* Alert Tokens (dark — translucent bg + tinted text) */
  --alert-success-bg: rgba(52, 211, 153, 0.12);
  --alert-success-text: #6ee7b7;
  --alert-success-border: rgba(52, 211, 153, 0.3);
  --alert-danger-bg: rgba(248, 113, 113, 0.12);
  --alert-danger-text: #fca5a5;
  --alert-danger-border: rgba(248, 113, 113, 0.3);
  --alert-warning-bg: rgba(251, 191, 36, 0.12);
  --alert-warning-text: #fde68a;
  --alert-warning-border: rgba(251, 191, 36, 0.3);
  --alert-info-bg: rgba(56, 189, 248, 0.12);
  --alert-info-text: #7dd3fc;
  --alert-info-border: rgba(56, 189, 248, 0.3);

  /* Contrast Text (stays white — brand colors are adjusted for dark already) */
  --color-text-on-primary: #ffffff;
  --color-text-on-accent: #ffffff;

  /* Interactive State Tokens (dark) */
  --color-hover-bg: var(--gray-100);
  --color-active-bg: var(--gray-200);
  --color-selected-bg: rgba(var(--hbh-primary-rgb), 0.15);
  --color-selected-border: var(--hbh-primary);
  --color-drag-border: var(--hbh-primary);

  /* Validation Feedback Tokens (dark) */
  --validation-valid-bg: rgba(52, 211, 153, 0.12);
  --validation-valid-border: #34d399;
  --validation-valid-text: #6ee7b7;
  --validation-invalid-bg: rgba(248, 113, 113, 0.12);
  --validation-invalid-border: #f87171;
  --validation-invalid-text: #fca5a5;

  /* Secondary Color (dark) */
  --color-secondary: #94a3b8;
  --color-secondary-hover: #cbd5e1;

  /* Org Chart dark overrides */
  --org-node-bg: var(--gray-100);
  --org-node-border: var(--gray-200);
  --org-edge: var(--gray-400);
  --org-avatar-bg-start: var(--gray-200);
  --org-avatar-bg-end: var(--gray-300);
  --org-avatar-text: var(--gray-600);
  --org-legend-border: var(--color-border);
  
  /* Calendar Tokens (dark) */
  --calendar-topbar-bg: var(--gray-100);
  --calendar-topbar-border: var(--gray-200);
  --calendar-chip-bg: var(--gray-100);
  --calendar-chip-text: var(--gray-800);
  --calendar-chip-border: var(--gray-200);
  --calendar-chip-selected-bg: rgba(74,144,226,0.15);
  --calendar-chip-selected-border: var(--hbh-primary);
  --calendar-drawer-bg: var(--gray-100);
  --calendar-drawer-border: var(--gray-200);
  --calendar-legend-bg: var(--gray-100);
  --calendar-legend-border: var(--gray-200);
  
  --calendar-button-ghost-bg: transparent;
  --calendar-button-ghost-border: var(--gray-200);
  --calendar-button-ghost-text: var(--gray-800);
  --calendar-button-ghost-bg-hover: var(--gray-50);
  --calendar-button-ghost-text-hover: var(--gray-900);
  
  --calendar-button-neutral-bg: var(--gray-100);
  --calendar-button-neutral-border: var(--gray-200);
  --calendar-button-neutral-text: var(--gray-800);
  --calendar-button-neutral-bg-hover: var(--gray-200);
  --calendar-button-neutral-text-hover: var(--gray-900);
  
  --calendar-button-outline-neutral-bg: transparent;
  --calendar-button-outline-neutral-border: var(--gray-300);
  --calendar-button-outline-neutral-text: var(--gray-800);
  --calendar-button-outline-neutral-bg-hover: var(--gray-50);
  
  /* Background adjustments */
  color-scheme: dark;
  
  /* Mobile Navigation Dark Theme */
  --mobile-nav-bg: var(--gray-100);
  --mobile-nav-border: var(--gray-200);
  --mobile-sidebar-bg: var(--gray-100);
  --mobile-sidebar-overlay: rgba(0, 0, 0, 0.7);
  
  /* Body and text colors for dark mode */
  background-color: var(--color-bg);
  color: var(--color-text);
  
  /* Table Design Tokens (dark) */
  --table-bg: var(--gray-50);
  --table-text: var(--gray-800);
  --table-border: var(--gray-200);
  --table-header-bg: var(--gray-100);
  --table-header-text: var(--gray-700);
  --table-hover-bg: rgba(var(--hbh-accent-rgb), 0.1);
  --table-stripe-bg: var(--gray-75);
  --table-active-bg: var(--hbh-primary);
  --table-active-text: var(--white);
  --table-responsive-border: var(--gray-200);
  --gray-75: #252d3a;
}

/* Dark mode specific overrides */
[data-theme="dark"] body {
  background-color: var(--color-bg);
  color: var(--color-text);
}

[data-theme="dark"] .card {
  background-color: var(--color-surface-alt);
  border-color: var(--color-border);
  color: var(--color-text);
}

[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select {
  background-color: var(--color-surface-alt);
  border-color: var(--color-border);
  color: var(--color-text);
}

[data-theme="dark"] .table {
  color: var(--color-text);
}

[data-theme="dark"] .table th {
  background-color: var(--color-surface-alt);
  color: var(--color-text);
}

[data-theme="dark"] .dropdown-menu {
  background-color: var(--color-surface-alt);
  border-color: var(--color-border);
}

[data-theme="dark"] .dropdown-header {
  color: var(--color-text-muted);
  background-color: var(--color-surface-alt);
}

[data-theme="dark"] .dropdown-divider {
  border-color: var(--color-border);
}

/* Theme toggle button styling */
.theme-toggle-nav {
  transition: all 0.2s ease;
  border-radius: 6px;
  padding: 0.375rem 0.75rem;
}

.theme-toggle-nav:hover {
  transform: scale(1.05);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

[data-theme="dark"] .theme-toggle-nav:hover {
  box-shadow: 0 2px 8px rgba(255, 255, 255, 0.1);
}

/* Ensure proper spacing in navbar */
.navbar-nav .nav-item.ms-2 {
  margin-left: 0.5rem !important;
}

/* Dark mode improvements for better contrast */
[data-theme="dark"] .text-muted {
  color: var(--color-text-subtle) !important;
}

/* Additional dropdown fixes for Bootstrap compatibility */
.dropdown-toggle::after {
  display: inline-block;
  margin-left: 0.255em;
  vertical-align: 0.255em;
  content: "";
  border-top: 0.3em solid;
  border-right: 0.3em solid transparent;
  border-bottom: 0;
  border-left: 0.3em solid transparent;
}

.dropdown-menu-end {
  right: 0;
  left: auto;
}

/* Ensure dropdowns are properly positioned */
.nav-item.dropdown {
  position: relative;
}

.nav-item.dropdown .dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1001;
}

/* Fix for dropdown menu positioning in navbar */
.navbar-nav .dropdown-menu {
  position: absolute;
}

.navbar-nav .nav-item.dropdown {
  position: relative;
}

.navbar-nav .nav-item.dropdown .dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: auto;
}

/* Ensure dropdown items are clickable */
.dropdown-item {
  cursor: pointer;
  user-select: none;
}

/* Bootstrap 5 dropdown positioning is handled by the main dropdown-menu rule above */

/* Ensure dropdown menus are properly styled in dark mode */
[data-theme="dark"] .dropdown-menu {
  background-color: var(--gray-100);
  border-color: var(--gray-200);
}

[data-theme="dark"] .dropdown-item {
  color: var(--gray-800);
}

[data-theme="dark"] .dropdown-item:hover {
  background-color: var(--gray-200);
  color: var(--gray-900);
}

[data-theme="dark"] .alert {
  background-color: var(--gray-100);
  border-color: var(--gray-200);
  color: var(--gray-800);
}

[data-theme="dark"] .alert-success {
  background-color: var(--alert-success-bg);
  border-color: var(--alert-success-border);
  color: var(--alert-success-text);
}

[data-theme="dark"] .alert-danger {
  background-color: var(--alert-danger-bg);
  border-color: var(--alert-danger-border);
  color: var(--alert-danger-text);
}

[data-theme="dark"] .alert-warning {
  background-color: var(--alert-warning-bg);
  border-color: var(--alert-warning-border);
  color: var(--alert-warning-text);
}

[data-theme="dark"] .alert-info {
  background-color: var(--alert-info-bg);
  border-color: var(--alert-info-border);
  color: var(--alert-info-text);
}

/* ===== BASE STYLES ===== */
* {
  box-sizing: border-box;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  /* Prevent horizontal overflow at document level */
  overflow-x: hidden;
}

body {
  font-family: var(--font-family);
  line-height: 1.6;
  color: var(--color-text);
  background-color: var(--color-bg);
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Prevent horizontal overflow. Must be `clip`, not `hidden` (and no explicit overflow-y):
     `hidden` turns body into a scroll container that never scrolls, which silently disables
     position: sticky for everything on the page — the viewport does the scrolling instead. */
  overflow-x: clip;
  /* Ensure body fills viewport */
  min-height: 100vh;
  /* Create proper stacking context for fixed/sticky elements */
  position: relative;
}

/* ===== MAIN CONTENT AREA ===== */
/* The main element wraps page content - ensure proper containment */
main[role="main"] {
  flex: 1 0 auto;
  width: 100%;
  max-width: 100%;
  /* Prevent content from overflowing horizontally — `clip` instead of `hidden` so main
     doesn't become a scroll container and break position: sticky in page content. */
  overflow-x: clip;
  /* Proper padding for content breathing room on smaller viewports */
  padding-bottom: var(--space-6);
}

/* Ensure page content containers align with navbar/footer */
main[role="main"] > .container,
main[role="main"] > .container-fluid,
main[role="main"] > .container-xxl,
main[role="main"] > .container-xl,
main[role="main"] > .container-lg,
main[role="main"] > .container-md,
main[role="main"] > .container-sm {
  /* Default padding for views that use standard containers */
  padding-top: var(--space-4);
}

/* For views that need full-width but bounded content */
.hbh-page-content {
  width: 100%;
  max-width: 100%;
  padding-left: var(--space-4);
  padding-right: var(--space-4);
}

@media (min-width: 576px) {
  .hbh-page-content {
    padding-left: var(--space-6);
    padding-right: var(--space-6);
  }

  /* Responsive width helper: full-width buttons/elements on phones, auto from the
     `sm` breakpoint up. Bootstrap ships no responsive variant of `.w-auto`, so this
     fills the gap and keeps the "touch-friendly on mobile, compact on desktop"
     pattern (e.g. `class="btn w-100 w-sm-auto"`) consistent across the system. */
  .w-sm-auto {
    width: auto !important;
  }
}

@media (min-width: 992px) {
  .hbh-page-content {
    padding-left: var(--space-8);
    padding-right: var(--space-8);
  }
}

/* ===== APP LAYOUT STRUCTURE ===== */
/* Flexbox layout for header-main-footer structure */
.hbh-app-layout {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  width: 100%;
  max-width: 100vw;
}

.hbh-header {
  flex: 0 0 auto;
  width: 100%;
}

.hbh-footer {
  flex: 0 0 auto;
  width: 100%;
  margin-top: auto;
}

/* ===== TYPOGRAPHY ===== */
h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-weight: 600;
  line-height: 1.2;
}

h1 { font-size: var(--font-size-4xl); }
h2 { font-size: var(--font-size-3xl); }
h3 { font-size: var(--font-size-2xl); }
h4 { font-size: var(--font-size-xl); }
h5 { font-size: var(--font-size-lg); }
h6 { font-size: var(--font-size-base); }

p {
  margin: 0 0 var(--space-4) 0;
}

/* ===== LAYOUT COMPONENTS ===== */
/* Important: do not override Bootstrap's `.container` sizing/gutters globally.
   If you need a custom container in the future, introduce a dedicated class (e.g. `.hbh-container`). */

/* ===== NAVBAR ===== */
.navbar {
  background: linear-gradient(135deg, var(--hbh-primary) 0%, var(--hbh-primary-dark) 100%);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding: 0.75rem 0;
  position: sticky;
  top: 0;
  z-index: 1000;
  box-shadow: var(--shadow-lg);
  min-height: var(--navbar-height);
  /* Ensure navbar doesn't overflow viewport */
  width: 100%;
  max-width: 100vw;
}

/* Enhanced navbar container */
.navbar > .container,
.navbar > .container-fluid {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap; /* keep brand + toggler on one row always */
  gap: var(--space-2);
  /* Ensure container respects viewport bounds */
  max-width: 100%;
  width: 100%;
}

/* Navbar toggler button - ensure proper size and position */
.navbar-toggler {
  flex: 0 0 auto;
  padding: var(--space-2);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: var(--radius-sm);
  background: transparent;
  cursor: pointer;
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
}

.navbar-toggler:hover,
.navbar-toggler:focus {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.4);
  outline: none;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.2);
}

.navbar-toggler-icon {
  width: 24px;
  height: 24px;
}

/* Collapsed navbar menu - takes full width when open */
.navbar-collapse {
  flex: 1 1 100%;
}

/* On desktop (expanded navbar) */
@media (min-width: 992px) {
  .navbar > .container,
  .navbar > .container-fluid {
    gap: var(--space-4);
  }
  
  .navbar-collapse {
    flex: 1 1 auto;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
  }
  
  .navbar-nav.me-auto {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    /* Allow nav items to shrink if needed */
    flex: 1 1 auto;
    min-width: 0;
    overflow: visible;
  }
  
  .navbar-nav .nav-item {
    flex: 0 0 auto;
    white-space: nowrap;
  }
  
  .navbar-nav .nav-link {
    padding: var(--space-2) var(--space-3);
    font-size: var(--font-size-sm);
  }
}

/* On smaller screens (collapsed navbar) */
@media (max-width: 991.98px) {
  .navbar > .container,
  .navbar > .container-fluid {
    flex-wrap: wrap;
    padding-left: var(--space-3);
    padding-right: var(--space-3);
  }
  
  .navbar-collapse {
    width: 100%;
    flex-basis: 100%;
    flex-grow: 1;
  }
  
  .navbar-collapse.collapsing,
  .navbar-collapse.show {
    background: var(--mobile-nav-bg);
    border-radius: var(--radius-md);
    margin-top: var(--mobile-space-3);
    padding: var(--mobile-space-4);
    box-shadow: var(--shadow-lg);
    /* Cap below the sticky navbar so every item stays reachable; dvh tracks mobile address-bar */
    max-height: calc(100vh - var(--navbar-height) - var(--space-4));
    max-height: calc(100dvh - var(--navbar-height) - var(--space-4));
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  
  .navbar-nav {
    flex-direction: column;
    width: 100%;
  }
  
  .navbar-nav .nav-item {
    width: 100%;
  }
  
  .navbar-nav .nav-link {
    padding: var(--mobile-space-3) var(--mobile-space-4);
    min-height: var(--mobile-touch-target);
    display: flex;
    align-items: center;
    border-radius: var(--radius-sm);
    width: 100%;
  }
  
  .navbar-nav .nav-link:hover {
    background: rgba(255, 255, 255, 0.1);
  }
}

.navbar-brand {
  flex: 0 0 auto;
  /* Ensure brand doesn't overflow */
  max-width: calc(100% - 60px);
  overflow: hidden;
}

.navbar-actions {
  flex: 0 0 auto;
  min-width: 0;
  /* Ensure actions don't push content off screen */
  max-width: 100%;
}

/* Dropdown menu fixes */
.dropdown-menu {
  z-index: 1001 !important;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 200px;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: var(--space-2) 0;
  margin: 0;
  list-style: none;
  display: none;
}

.dropdown-menu.show {
  display: block !important;
}

.dropdown-item {
  display: block;
  width: 100%;
  padding: var(--space-3) var(--space-4);
  clear: both;
  font-weight: 400;
  color: var(--gray-700);
  text-align: inherit;
  text-decoration: none;
  white-space: nowrap;
  background-color: transparent;
  border: 0;
  transition: all var(--transition-fast);
}

.dropdown-item:hover,
.dropdown-item:focus {
  color: var(--gray-900);
  background-color: var(--gray-100);
  text-decoration: none;
}

.dropdown-item:active {
  color: var(--white);
  background-color: var(--hbh-primary);
}

.dropdown-header {
  display: block;
  padding: var(--space-2) var(--space-4);
  margin-bottom: 0;
  font-size: var(--font-size-sm);
  color: var(--gray-600);
  white-space: nowrap;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.dropdown-divider {
  height: 0;
  margin: var(--space-2) 0;
  overflow: hidden;
  border-top: 1px solid var(--gray-200);
}

.navbar-brand {
  display: flex;
  align-items: center;
  color: var(--white);
  text-decoration: none;
  padding: 0.5rem 0;
  margin-right: 2rem;
}

.navbar-brand:hover {
  color: var(--white);
  text-decoration: none;
}

/* Main navbar logo styling */
.navbar-logo-main {
  transition: all var(--transition-normal);
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15));
  object-fit: contain;
}

.navbar-logo-main:hover {
  transform: scale(1.05) translateY(-1px);
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
}

/* Enhanced navbar brand styling - merged above */

/* Legacy navbar-logo class (for compatibility) */
.navbar-logo {
  transition: all var(--transition-fast);
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
  object-fit: contain;
}

.navbar-logo:hover {
  transform: scale(1.03);
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15));
}

.footer-logo {
  opacity: 0.8;
  transition: opacity var(--transition-fast);
  object-fit: contain;
}

.footer-logo:hover {
  opacity: 1;
}

/* Dark theme logo adjustments */
[data-theme="dark"] .footer-logo {
  filter: brightness(0) invert(1);
  opacity: 0.7;
}

[data-theme="dark"] .footer-logo:hover {
  opacity: 0.9;
}

/* Welcome section logo */
.welcome-brand-logo {
  transition: all var(--transition-normal);
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1));
  object-fit: contain;
}

.welcome-brand-logo:hover {
  transform: scale(1.02);
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.15));
}

/* Dark theme adjustments for welcome logo */
[data-theme="dark"] .welcome-brand-logo {
  filter: drop-shadow(0 4px 8px rgba(255, 255, 255, 0.1));
}

[data-theme="dark"] .welcome-brand-logo:hover {
  filter: drop-shadow(0 6px 12px rgba(255, 255, 255, 0.15));
}

/* Responsive logo sizing */
@media (max-width: 768px) {
  .navbar-logo-main {
    height: 36px !important;
    max-width: 140px !important;
  }
  
  .navbar-logo {
    height: 30px !important;
    max-width: 100px !important;
  }
  
  .welcome-brand-logo {
    height: 45px !important;
    max-width: 200px !important;
  }
  
  .footer-logo {
    height: 14px !important;
    max-width: 60px !important;
  }
  
  .navbar-brand {
    margin-right: 1rem;
  }
}

@media (max-width: 480px) {
  .navbar-logo-main {
    height: 32px !important;
    max-width: 120px !important;
  }
  
  .navbar-logo {
    height: 26px !important;
    max-width: 85px !important;
  }
  
  .welcome-brand-logo {
    height: 35px !important;
    max-width: 150px !important;
  }
  
  .navbar-brand {
    margin-right: 0.5rem;
    padding: 0.25rem 0;
  }
}

.navbar-nav {
  list-style: none;
  margin: 0;
  padding: 0;
  gap: var(--space-2);
}

@media (min-width: 992px) {
  .navbar-nav {
    gap: var(--space-6);
  }
}

.nav-link {
  color: var(--color-link);
  text-decoration: none;
  font-weight: 500;
  transition: color var(--transition-fast);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.nav-link:hover {
  color: var(--hbh-primary);
  text-decoration: none;
}

.navbar .nav-link {
  color: rgba(255, 255, 255, 0.9);
}

.navbar .nav-link:hover {
  color: var(--white);
}
/* Improve contrast when nav pills not selected on light backgrounds inside cards */
.card .nav.nav-pills .nav-link {
  color: var(--gray-700);
  background-color: var(--gray-100);
}
.card .nav.nav-pills .nav-link:hover {
  color: var(--gray-900);
  background-color: var(--gray-200);
}
.card .nav.nav-pills .nav-link.active {
  color: var(--color-text-on-primary);
  background-color: var(--hbh-primary);
}

/* Inactive nav-tabs: readable contrast in both themes via tokens (no per-view inline overrides). */
.nav-tabs .nav-link:not(.active) {
  color: var(--gray-700);
  background-color: var(--color-surface-alt);
  border-color: var(--color-border) var(--color-border) transparent;
}
.nav-tabs .nav-link:not(.active):hover {
  color: var(--gray-900);
  background-color: var(--gray-200);
  border-color: var(--color-border) var(--color-border) transparent;
}

/* ===== HERO SECTION ===== */
.hero-section {
  position: relative;
  min-height: 80vh;
  display: flex;
  align-items: center;
  background: linear-gradient(135deg, var(--hbh-primary) 0%, var(--hbh-primary-dark) 100%);
  color: var(--white);
  overflow: hidden;
}

.hero-background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
}

.hero-pattern {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: 
    radial-gradient(circle at 25% 25%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 75% 75%, rgba(255, 255, 255, 0.05) 0%, transparent 50%);
  opacity: 0.6;
}

.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, rgba(0, 0, 0, 0.3) 0%, transparent 100%);
}

.hero-section .container {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-12);
  align-items: center;
}

.hero-content {
  max-width: 600px;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-xl);
  padding: var(--space-2) var(--space-4);
  font-size: var(--font-size-sm);
  font-weight: 500;
  margin-bottom: var(--space-6);
  color: var(--hbh-accent-light);
}

.hero-title {
  font-size: var(--font-size-5xl);
  font-weight: 700;
  line-height: 1.1;
  margin-bottom: var(--space-4);
}

.hero-title .text-accent {
  color: var(--hbh-accent);
}

.hero-version {
  font-size: var(--font-size-sm);
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: var(--space-4);
}

.hero-description {
  font-size: var(--font-size-lg);
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: var(--space-8);
  line-height: 1.6;
}

.hero-actions {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.hero-visual {
  position: relative;
  height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.floating-card {
  position: absolute;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-2xl);
  color: var(--hbh-accent);
  animation: float 6s ease-in-out infinite;
}

.floating-card.card-1 {
  top: 20%;
  left: 10%;
  animation-delay: 0s;
}

.floating-card.card-2 {
  top: 60%;
  right: 20%;
  animation-delay: 2s;
}

.floating-card.card-3 {
  bottom: 20%;
  left: 30%;
  animation-delay: 4s;
}

@keyframes float {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-20px) rotate(5deg); }
}

/* ===== BUTTON COMPONENTS ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  font-size: var(--font-size-base);
  font-weight: 500;
  text-decoration: none;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-fast);
  position: relative;
  overflow: hidden;
}

.btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left var(--transition-slow);
}

.btn:hover::before {
  left: 100%;
}

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

.btn:active {
  transform: translateY(0);
}

/* Flex/grid child min-width reset: lets long text truncate/wrap instead of
   overflowing its row (e.g. card titles next to a fixed-width status badge).
   Bootstrap 5 ships no such utility; several views already reference it. */
.min-w-0 {
  min-width: 0;
}

/* ===== ACTION BARS (Page/Form Actions) ===== */
.hbh-action-bar {
  background: var(--action-bar-bg);
  border: 1px solid var(--action-bar-border);
  border-radius: var(--radius-md);
  padding: var(--space-3);
}

.hbh-action-bar .btn {
  min-width: 140px;
}

@media (max-width: 768px) {
  .hbh-action-bar {
    padding: var(--space-2);
  }
  .hbh-action-bar .btn { min-width: 0; width: 100%; }
}

.btn-primary {
  background: linear-gradient(135deg, var(--hbh-accent) 0%, var(--hbh-accent-light) 100%);
  color: var(--white);
}

.btn-primary:hover {
  background: linear-gradient(135deg, var(--hbh-accent-light) 0%, var(--hbh-accent) 100%);
  color: var(--white);
}

.btn-outline-light {
  background: transparent;
  color: var(--white);
  border: 2px solid rgba(255, 255, 255, 0.3);
}

.btn-outline-light:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.5);
  color: var(--white);
}

.btn-hero {
  padding: var(--space-4) var(--space-8);
  font-size: var(--font-size-lg);
  border-radius: var(--radius-lg);
}

.btn-module {
  background: linear-gradient(135deg, var(--hbh-primary) 0%, var(--hbh-primary-dark) 100%);
  color: var(--white);
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
}

.btn-module:hover {
  background: linear-gradient(135deg, var(--hbh-primary-dark) 0%, var(--hbh-primary) 100%);
  color: var(--white);
}

.btn-module.disabled {
  background: var(--gray-300);
  color: var(--gray-500);
  cursor: not-allowed;
  transform: none;
}

.btn-module.disabled:hover {
  background: var(--gray-300);
  color: var(--gray-500);
  transform: none;
  box-shadow: none;
}

/* ===== SECTION COMPONENTS ===== */
.section-header {
  text-align: center;
  margin-bottom: var(--space-12);
}

.section-title {
  font-size: var(--font-size-4xl);
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: var(--space-4);
}

.section-subtitle {
  font-size: var(--font-size-lg);
  color: var(--gray-600);
  max-width: 600px;
  margin: 0 auto;
}

/* ===== FEATURES SECTION ===== */
.features-section {
  padding: var(--space-20) 0;
  background: var(--white);
}

.modules-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-6);
}

.module-card {
  background: var(--white);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  transition: all var(--transition-normal);
  border: 1px solid var(--gray-200);
}

.module-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-xl);
  border-color: var(--hbh-accent);
}

.module-card.coming-soon {
  opacity: 0.7;
}

.module-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-6);
  background: linear-gradient(135deg, var(--gray-50) 0%, var(--gray-100) 100%);
}

.module-icon {
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, var(--hbh-primary) 0%, var(--hbh-accent) 100%);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-size: var(--font-size-xl);
}

.status-badge {
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-xl);
  font-size: var(--font-size-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.status-badge.active {
  background: var(--alert-success-bg);
  color: var(--alert-success-text);
}

.status-badge.coming {
  background: var(--alert-warning-bg);
  color: var(--alert-warning-text);
}

.module-content {
  padding: var(--space-6);
}

.module-title {
  font-size: var(--font-size-xl);
  font-weight: 600;
  color: var(--gray-900);
  margin-bottom: var(--space-3);
}

.module-description {
  color: var(--gray-600);
  margin-bottom: var(--space-4);
  line-height: 1.6;
}

.module-features {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.feature-tag {
  background: var(--gray-100);
  color: var(--gray-700);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-xl);
  font-size: var(--font-size-xs);
  font-weight: 500;
}

.module-footer {
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--gray-200);
}

/* ===== QUICK ACTIONS SECTION ===== */
.quick-actions-section {
  padding: var(--space-16) 0;
  background: var(--gray-50);
}

.quick-actions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--space-6);
}

.quick-action-card {
  background: var(--white);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  text-align: center;
  text-decoration: none;
  color: inherit;
  box-shadow: var(--shadow-md);
  transition: all var(--transition-normal);
  border: 1px solid var(--gray-200);
}

.quick-action-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--hbh-accent);
  color: inherit;
  text-decoration: none;
}

.quick-action-icon {
  width: 64px;
  height: 64px;
  background: linear-gradient(135deg, var(--hbh-primary) 0%, var(--hbh-accent) 100%);
  border-radius: var(--radius-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-4);
  color: var(--white);
  font-size: var(--font-size-2xl);
}

.quick-action-card h3 {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--gray-900);
  margin-bottom: var(--space-2);
}

.quick-action-card p {
  color: var(--gray-600);
  font-size: var(--font-size-sm);
}

/* ===== STATS SECTION ===== */
.stats-section {
  padding: var(--space-16) 0;
  background: linear-gradient(135deg, var(--hbh-primary) 0%, var(--hbh-primary-dark) 100%);
  color: var(--white);
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-8);
}

.stat-card {
  text-align: center;
  padding: var(--space-6);
}

.stat-icon {
  width: 64px;
  height: 64px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-4);
  color: var(--hbh-accent);
  font-size: var(--font-size-2xl);
}

.stat-number {
  font-size: var(--font-size-4xl);
  font-weight: 700;
  color: var(--white);
  margin-bottom: var(--space-2);
}

.stat-label {
  color: rgba(255, 255, 255, 0.8);
  font-size: var(--font-size-sm);
  font-weight: 500;
}

/* ===== MY BOOKINGS (reservation) CARDS ===== */
.reservation-section + .reservation-section { margin-top: var(--space-8); }

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

/* Caret flips when the "past bookings" section is expanded. */
.reservation-collapse-caret { transition: transform var(--transition-fast); }
[aria-expanded="true"] .reservation-collapse-caret { transform: rotate(180deg); }

@media (prefers-reduced-motion: reduce) {
  .reservation-card, .reservation-collapse-caret { transition: none; }
  .reservation-card:hover { transform: none; }
}

/* ===== HUB CARDS STYLES ===== */

.hub-card {
  transition: all 0.3s ease;
  border: 1px solid var(--gray-200) !important;
}

.hub-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-xl) !important;
  border-color: var(--hbh-accent) !important;
}

.hub-card .hub-icon {
  transition: all 0.3s ease;
}

.hub-card:hover .hub-icon i {
  transform: scale(1.1);
}

.coming-soon-hub {
  opacity: 0.7;
  background: var(--gray-50);
}

.coming-soon-hub:hover {
  transform: none;
  box-shadow: var(--shadow-md) !important;
  border-color: var(--gray-300) !important;
}

.hub-card .card-title {
  color: var(--gray-800);
  font-weight: 600;
}

.hub-card .btn {
  font-weight: 500;
  border-radius: var(--radius-lg);
  transition: all 0.2s ease;
}

.hub-card .btn:hover {
  transform: translateY(-1px);
}

.text-accountant {
  color: #7c3aed !important;
}

.btn-accountant {
  background-color: #7c3aed;
  border-color: #7c3aed;
  color: #fff;
}

.btn-accountant:hover,
.btn-accountant:focus {
  background-color: #6d28d9;
  border-color: #6d28d9;
  color: #fff;
}

/* Landing page responsive spacing and max width */
.dashboard-container { padding-inline: clamp(8px, 2vw, 24px); }
.dashboard-content .container-fluid { max-width: 1600px; }
.welcome-title { font-size: clamp(1.5rem, 2.5vw + .5rem, 3rem); }
.hub-card .card-body { padding: clamp(1rem, 1.5vw, 1.5rem) !important; }
.hub-card .hub-icon i { font-size: clamp(2rem, 4vw, 3rem) !important; }
.coming-soon-hub .hub-icon i { font-size: clamp(1.5rem, 3.5vw, 2.5rem) !important; }

/* Compact landing tiles on phones — 2-up grid (col-6 in markup), icon + title only.
   !important overrides are required to beat the clamp() !important rules above. */
@media (max-width: 575.98px) {
  .hub-card .card-body { padding: var(--mobile-space-3) var(--mobile-space-2) !important; text-align: center; }
  .hub-card .hub-icon { margin-bottom: var(--mobile-space-2) !important; }
  .hub-card .hub-icon i { font-size: 1.75rem !important; }
  .hub-card .card-title { font-size: var(--mobile-font-size-base); line-height: 1.25; margin-bottom: var(--mobile-space-2); }
  .hub-card .card-text { display: none; }                       /* hide description on phones */
  .hub-card .card-body > small.text-muted { display: none; }    /* hide quick-link on phones */
  .hub-card .btn:not(.dashboard-tile-toggle) {
    padding: var(--mobile-space-2) var(--mobile-space-3);
    min-height: var(--mobile-touch-target);                     /* keep a 44px tap target */
    display: flex; align-items: center; justify-content: center;
    font-size: var(--mobile-font-size-sm);
  }
  .hub-card:hover { transform: none; }                          /* avoid jump on touch */

  /* Compact, non-wasteful welcome header on phones: the navbar already carries the logo. */
  .welcome-logo { display: none !important; }
  .welcome-section { margin-bottom: var(--space-4) !important; }
  .welcome-header .welcome-subtitle { display: none !important; }
  .welcome-title { font-size: 1.4rem !important; line-height: 1.2 !important; margin-bottom: 0 !important; }
  .welcome-title span { display: inline !important; }           /* one tight phrase, not stacked lines */
}

/* Dashboard tile customization editor (Settings page) */
.dashboard-tiles-selected .dashboard-tile-item .drag-handle {
  cursor: grab;
  color: var(--gray-400);
  display: inline-flex; align-items: center; justify-content: center;
  min-width: var(--mobile-touch-target); min-height: var(--mobile-touch-target);
}
.dashboard-tiles-selected .dashboard-tile-item .drag-handle:active { cursor: grabbing; }
.dashboard-tiles-available .dashboard-tile-item,
.dashboard-tiles-selected .dashboard-tile-item { gap: .25rem; }
.tile-ghost { opacity: .5; background: var(--gray-100); }
@media (prefers-reduced-motion: reduce) {
  .hub-card, .hub-card .hub-icon, .hub-card .btn { transition: none; }
}

/* Inline dashboard "Customize" mode */
.dashboard-tile-hidden { display: none; }                                  /* hidden tiles: invisible in normal view */
.dashboard-customizing .dashboard-tile-hidden { display: block; }          /* …revealed (dimmed) while customizing */
.dashboard-customizing .dashboard-tile-hidden .hub-card { opacity: .55; }
.dashboard-customizing .hub-card { position: relative; cursor: grab; }
.dashboard-customizing .hub-card:active { cursor: grabbing; }
.dashboard-customizing .dashboard-tile a { pointer-events: none; }         /* Enter/quick links inert while editing */
.dashboard-tile-ghost { opacity: .4; }

.dashboard-tile-toggle {
  position: absolute; top: .5rem; right: .5rem; z-index: 3;
  display: none !important; align-items: center; justify-content: center;   /* hidden unless customizing — beats .hub-card .btn */
  width: 2.25rem; height: 2.25rem; padding: 0; border-radius: 50%;
}
.dashboard-customizing .dashboard-tile-toggle { display: inline-flex !important; }

.dashboard-customize-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1040;
  background: var(--gray-50); border-top: 1px solid var(--gray-200);
  box-shadow: var(--shadow-lg);
  padding: .5rem clamp(8px, 2vw, 24px);
}
.dashboard-customize-bar-inner {
  max-width: 1600px; margin: 0 auto;
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
}
body.has-customize-bar { padding-bottom: 4.5rem; }                         /* keep content clear of the fixed bar */
#dashboard-customize-toggle.active { background: var(--hbh-accent); color: #fff; }

/* Breadcrumb Styles */
.breadcrumb {
  background: var(--gray-50);
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-6);
  border: 1px solid var(--gray-200);
}

.breadcrumb-item a {
  color: var(--hbh-primary);
  text-decoration: none;
  font-weight: 500;
}

.breadcrumb-item a:hover {
  color: var(--hbh-accent);
}

.breadcrumb-item.active {
  color: var(--gray-600);
  font-weight: 600;
}

.breadcrumb-item + .breadcrumb-item::before {
  content: "›";
  color: var(--gray-400);
  font-weight: 600;
}

/* Phones: collapse the whole trail to a single one-row "‹ Parent" back link. The current
   page name already lives in the page header, and a 2–3 row trail was eating a third of
   small viewports. Every view renders through Views/Shared/_Breadcrumbs.cshtml, so this is
   the system-wide mobile behavior. */
@media (max-width: 767.98px) {
  nav[aria-label="breadcrumb"] { margin-bottom: var(--space-3) !important; }
  .breadcrumb {
    flex-wrap: nowrap;
    overflow: hidden;
    padding: var(--space-2) var(--space-3);
    margin-bottom: 0;
  }
  .breadcrumb .breadcrumb-item { display: none; }
  .breadcrumb .breadcrumb-item:nth-last-child(2) {
    display: flex;
    align-items: center;
    min-width: 0;
    max-width: 100%;
    padding-left: 0;
  }
  .breadcrumb .breadcrumb-item:nth-last-child(2)::before {
    content: "‹";
    padding-right: var(--space-2);
    color: var(--hbh-primary);
    font-weight: 600;
    float: none;
  }
  .breadcrumb .breadcrumb-item:nth-last-child(2) a {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  /* Graceful degradation for browsers without :has(): show the lone active crumb rather
     than an empty pill. On :has()-capable browsers the nav-level rule below wins anyway. */
  .breadcrumb .breadcrumb-item:only-child {
    display: block;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  /* Single-crumb trails have nothing to go back to — drop the bar entirely. */
  nav[aria-label="breadcrumb"]:has(.breadcrumb-item:only-child) { display: none; }
}

/* ===== Map-picker screen (Resources → Reservation checkout) ===== */
/* Desktop: a fixed-height map in normal document flow. */
.hbh-map-fill {
  height: 45vh;
  min-height: 280px;
}

/* Sticky primary-action bar: above Leaflet panes/controls (z-index up to 1000) and padded
   for the iOS home indicator. */
.hbh-save-bar {
  z-index: 1020;
  padding-top: var(--space-2);
  padding-bottom: max(var(--space-2), env(safe-area-inset-bottom));
}

/* In-map "tap to place the pin" overlay; pointer-events off so taps land on the map. */
.hbh-map-tap-hint {
  position: absolute;
  top: .75rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1001;
  pointer-events: none;
  background: rgba(33, 37, 41, .85);
  color: #fff;
  padding: .3rem .8rem;
  border-radius: 999px;
  font-size: .85rem;
  white-space: nowrap;
  max-width: 92%;
  overflow: hidden;
  text-overflow: ellipsis;
}
[data-theme="dark"] .hbh-map-tap-hint { background: rgba(0, 0, 0, .75); }

/* Context alerts that collapse to one tappable line on phones (full text on md+). */
.alert.hbh-alert-compact { display: block; } /* the global .alert (later in this file) is a flex row — head/details must stack */
/* The head is a real <button> (keyboard-operable collapse toggle) — strip the chrome. */
button.hbh-alert-head {
  background: none;
  border: 0;
  padding: 0;
  color: inherit;
  font: inherit;
  text-align: left;
}
.hbh-alert-compact .hbh-alert-head { min-width: 0; }
.hbh-alert-compact .hbh-alert-head strong { min-width: 0; }
.hbh-alert-compact .hbh-alert-details { margin-top: var(--space-2); }
.hbh-alert-compact .hbh-alert-caret { transition: transform .2s ease; }
.hbh-alert-compact .hbh-alert-head[aria-expanded="true"] .hbh-alert-caret { transform: rotate(180deg); }

@media (min-width: 768px) {
  /* Desktop: details are forced open (d-md-block) — the head must not act as a button. */
  .hbh-alert-compact .hbh-alert-head { pointer-events: none; }
  .hbh-alert-compact .hbh-alert-details { margin-top: var(--space-1); }
}

@media (max-width: 767.98px) {
  /* Phone: the page becomes a flex column sized to the viewport (a small inline script in
     the view sets min-height); the map flex-fills whatever the chrome doesn't use, so the
     map and the save button are both on screen with zero scrolling. */
  .hbh-map-screen {
    display: flex;
    flex-direction: column;
    padding-top: var(--space-2) !important;
    padding-bottom: 0 !important;
  }
  /* Compact the shared _ResourceMapHeader so the chrome above the map stays thin. */
  .hbh-map-screen .hbh-map-header .d-flex { margin-bottom: var(--space-2) !important; }
  .hbh-map-screen .hbh-map-header .fs-2 { font-size: 1.4rem !important; }
  .hbh-map-screen .hbh-map-header .h4 { font-size: 1.05rem; }
  .hbh-map-screen .hbh-map-col {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
  }
  .hbh-map-screen .hbh-map-fill-wrap {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 200px;
  }
  .hbh-map-screen .hbh-map-fill {
    flex: 1 1 auto;
    height: auto;
    min-height: 200px;
  }
  .hbh-map-screen .hbh-save-bar {
    /* Full-bleed over the container's 1rem side padding + a lift off the map. */
    margin-left: -1rem;
    margin-right: -1rem;
    padding-left: 1rem;
    padding-right: 1rem;
    box-shadow: 0 -4px 12px rgba(0, 0, 0, .08);
  }
  .hbh-alert-compact {
    padding: var(--space-2) var(--space-3);
    margin-bottom: var(--space-2);
  }
}

/* Responsive stats footer grid */
.stats-footer {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(2, 1fr);
  max-width: 1600px;
  margin: 40px auto 0;
  padding: 0 clamp(8px, 2vw, 24px);
}

@media (min-width: 576px) and (max-width: 991.98px) {
  .stats-footer { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1400px) {
  .stats-footer { grid-template-columns: repeat(4, 1fr); }
}

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

/* Mobile Navigation - Dropdown handling in collapsed navbar */
@media (max-width: 991.98px) {
  /* Dropdown menus in mobile collapsed navbar */
  .navbar-collapse .dropdown-menu {
    position: static !important;
    transform: none !important;
    box-shadow: none;
    border: none;
    background: rgba(255, 255, 255, 0.1);
    margin-top: var(--mobile-space-2);
    padding-left: var(--space-4);
  }
  
  .navbar-collapse .dropdown-item {
    padding: var(--mobile-space-3) var(--mobile-space-4);
    border-radius: var(--radius-sm);
    margin-bottom: var(--mobile-space-1);
    color: rgba(255, 255, 255, 0.9);
  }
  
  .navbar-collapse .dropdown-item:hover {
    background: rgba(255, 255, 255, 0.15);
    color: white;
  }
}

/* ===== NAVBAR CONTROLS (Language/Currency) ===== */
.navbar .form-select.form-select-sm {
  background-color: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: rgba(255, 255, 255, 0.95);
  border-radius: 999px;
  padding-left: 0.75rem;
  padding-right: 2rem; /* room for arrow */
  line-height: 1.25;
}

.navbar .form-select.form-select-sm:focus {
  border-color: rgba(255, 255, 255, 0.45);
  box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.12);
}

.navbar .form-select.form-select-sm option {
  color: var(--gray-900);
}

@media (max-width: 768px) {
  .hero-section .container {
    grid-template-columns: 1fr;
    text-align: center;
  }
  
  .hero-title {
    font-size: var(--mobile-font-size-4xl);
  }
  
  .hero-actions {
    justify-content: center;
    flex-direction: column;
    gap: var(--mobile-space-3);
  }
  
  .hero-visual {
    display: none;
  }
  
  .section-title {
    font-size: var(--mobile-font-size-3xl);
  }
  
  .modules-grid {
    grid-template-columns: 1fr;
  }
  
  .quick-actions-grid {
    grid-template-columns: 1fr;
  }
  
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  /* Mobile-first container improvements */
  .container-fluid {
    padding-left: var(--mobile-space-4);
    padding-right: var(--mobile-space-4);
  }
  
  /* Improved card spacing on mobile */
  .card {
    margin-bottom: var(--mobile-space-4);
  }
  
  .card-body {
    padding: var(--mobile-card-padding);
  }
  
  /* Better button sizing for mobile */
  .btn {
    padding: var(--mobile-button-padding);
    min-height: var(--mobile-touch-target);
    font-size: var(--mobile-font-size-base);
  }
  
  /* Hub cards mobile optimization */
  .hub-card .card-body {
    padding: var(--mobile-space-5);
  }
  
  .hub-icon {
    margin-bottom: var(--mobile-space-4) !important;
  }
  
  .hub-icon i {
    font-size: 2.5rem !important;
  }
}

@media (max-width: 480px) {
  /* Ultra-small mobile optimizations */
  .hero-title {
    font-size: var(--mobile-font-size-3xl);
  }
  
  .hero-actions {
    flex-direction: column;
    align-items: center;
    gap: var(--mobile-space-3);
  }
  
  /* Even smaller spacing for very small screens */
  .container-fluid {
    padding-left: var(--mobile-space-3);
    padding-right: var(--mobile-space-3);
  }
  
  /* Single column layout for hub cards */
  .row.g-4 {
    row-gap: var(--mobile-space-4) !important;
  }
  
  /* Compact card design for small screens */
  .hub-card .card-body {
    padding: var(--mobile-space-4);
    text-align: center;
  }
  
  .hub-card .card-title {
    font-size: var(--mobile-font-size-lg);
    margin-bottom: var(--mobile-space-2);
  }
  
  .hub-card .card-text {
    font-size: var(--mobile-font-size-sm);
    margin-bottom: var(--mobile-space-3);
  }
  
  /* Welcome section mobile optimization */
  .welcome-title {
    font-size: var(--mobile-font-size-2xl);
    line-height: 1.3;
  }
  
  /* Stats footer mobile layout */
  .stats-footer {
    flex-direction: column;
    gap: var(--mobile-space-3);
    padding: var(--mobile-space-4);
  }
  
  .stat-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: var(--mobile-space-3);
    background: rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-md);
  }
  
  .stat-number {
    font-size: var(--mobile-font-size-xl);
    margin-bottom: 0;
  }
  
  .stat-label {
    font-size: var(--mobile-font-size-sm);
  }
  
  /* Enhanced mobile navbar */
  .navbar {
    padding: var(--mobile-space-2) 0;
  }
  
  .navbar-toggler {
    border: none;
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-sm);
  }
  
  .navbar-toggler:focus {
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.2);
  }
  
  .navbar-toggler:hover {
    background-color: rgba(255, 255, 255, 0.1);
  }
  
  /* Better touch targets for mobile */
  .btn {
    min-height: 48px; /* Larger touch target for small screens */
    padding: var(--mobile-space-4) var(--mobile-space-6);
  }
  
  /* Optimize "Coming Soon" section */
  .coming-soon-hub {
    opacity: 0.8;
  }
  
  .coming-soon-hub .card-body {
    padding: var(--mobile-space-3);
  }
  
  .coming-soon-hub .hub-icon i {
    font-size: 2rem !important;
  }
  
  .coming-soon-hub .card-title {
    font-size: var(--mobile-font-size-base);
  }
  
  .coming-soon-hub .card-text {
    font-size: var(--mobile-font-size-xs);
  }
  
  .quick-actions-grid {
    grid-template-columns: 1fr;
  }
  
  .stats-grid {
    grid-template-columns: 1fr;
  }
}

/* Very small phones (320-360px): keep modals and form controls inside the viewport */
@media (max-width: 360px) {
  .modal {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .modal-dialog {
    max-width: 100%;
    width: auto;
    margin: var(--mobile-space-3);
  }

  .modal-dialog-centered {
    min-height: calc(100% - (var(--mobile-space-3) * 2));
  }

  .modal-content {
    border-radius: var(--radius-md);
  }

  .modal-header,
  .modal-body,
  .modal-footer {
    padding: var(--mobile-space-4);
  }

  .modal-body {
    overflow-x: hidden;
  }

  /* Stack footer buttons instead of overflowing horizontally */
  .modal-footer {
    flex-wrap: wrap;
    gap: var(--mobile-space-2);
  }

  .modal-footer .btn {
    flex: 1 1 auto;
    margin: 0; /* Bootstrap's default inter-button margins overflow when wrapped */
  }

  /* Inputs and groups must never force horizontal overflow */
  .form-control,
  .form-select,
  .input-group,
  textarea {
    max-width: 100%;
    min-width: 0;
  }

  .input-group > .form-control,
  .input-group > .form-select {
    min-width: 0;
  }

  /* Country-code select (_PhoneInput.cshtml reads this token inline) — 180px is too wide for 320px layouts */
  :root {
    --phone-cc-width: 40%;
  }
}

/* ===== UTILITY CLASSES ===== */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.text-accent { color: var(--hbh-accent) !important; }
.text-primary { color: var(--hbh-primary) !important; }
.text-white { color: var(--white) !important; }
.text-gray-600 { color: var(--gray-600) !important; }
.text-muted { color: var(--color-text-subtle) !important; }

.hbh-soft-surface {
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  color: var(--color-text);
}

.hbh-progress-track {
  position: relative;
  height: 10px;
  border-radius: 999px;
  background: var(--color-surface-muted);
}

.hbh-progress-fill {
  height: 10px;
  border-radius: 999px;
  background: var(--success);
}

.hbh-icon-muted {
  color: var(--color-text-subtle);
}

.hbh-status-dot {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  border: 2px solid var(--color-surface);
}

.hbh-status-dot-lg {
  width: 14px;
  height: 14px;
  border-radius: 999px;
  border: 2px solid var(--color-surface);
}

.hbh-tooltip-title {
  font-weight: 700;
  margin-bottom: 4px;
}

.hbh-tooltip-title-error {
  color: var(--error);
}

.hbh-tooltip-title-warning {
  color: var(--warning);
}

.hbh-empty-state {
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.hbh-empty-state-icon {
  font-size: 4rem;
  margin-bottom: 1rem;
  color: var(--color-text-subtle);
}

/* ===== COMPENSATION / SALARY-ACCESS HIGHLIGHTING =====
   Single source for the Admin → Permissions surface (Permissions, PermissionDetail,
   UserPermissionDetail, WhoCan, PermissionMatrix) and the RoleTemplates editor.
   Marks permissions/users/rows that can see other employees' salary or remuneration.
   Do NOT redefine these inline in views — reuse the class names. */
.alert-compensation {
  background-color: rgba(124, 58, 237, 0.08);
  border-color: rgba(124, 58, 237, 0.4);
  color: #7c3aed;
}

.compensation-badge {
  background-color: #7c3aed !important;
  color: #ffffff !important;
}

.compensation-row {
  border-left: 4px solid #7c3aed;
  background-color: rgba(124, 58, 237, 0.08) !important;
}

.compensation-pill {
  border: 1px solid #7c3aed;
  color: #7c3aed;
  background-color: rgba(124, 58, 237, 0.12);
}

.compensation-user-flag {
  border: 1px solid #7c3aed;
  color: #7c3aed;
  background-color: rgba(124, 58, 237, 0.15);
}

.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-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-1 { padding: var(--space-1); }
.p-2 { padding: var(--space-2); }
.p-3 { padding: var(--space-3); }
.p-4 { padding: var(--space-4); }
.p-5 { padding: var(--space-5); }
.p-6 { padding: var(--space-6); }

/* ===== FORM REQUIRED UTILITIES (Design-token based) ===== */
.form-label.required::after {
  content: " *";
  color: var(--form-required-asterisk-color);
}

/* Generic required marker for non-label headings (e.g., rating group titles) */
.hbh-required::after {
  content: " *";
  color: var(--form-required-asterisk-color);
}

input[required], select[required], textarea[required] {
  border-color: var(--gray-300);
}

input.is-invalid, select.is-invalid, textarea.is-invalid,
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] {
  border-color: var(--form-invalid-border) !important;
}

input.is-valid, select.is-valid, textarea.is-valid {
  border-color: var(--form-valid-border) !important;
}

input:focus, select:focus, textarea:focus {
  box-shadow: 0 0 0 0.25rem var(--form-focus-ring);
}

/* ===== KEYBOARD FOCUS VISIBILITY ===== */
/* Token-driven outline: dark theme swaps in a light --color-focus-outline so the
   ring stays visible against dark surfaces */
:focus-visible {
  outline: 2px solid var(--color-focus-outline);
  outline-offset: 2px;
}

/* Form controls already show a high-visibility box-shadow focus ring */
.form-control:focus-visible,
.form-select:focus-visible {
  outline: none;
}

/* Elements sitting on the brand-gradient navbar need a light outline in both themes */
.navbar :focus-visible {
  outline-color: var(--color-focus-outline-on-brand);
}

/* Validation summary unified styling */
.hbh-validation-summary {
  background: var(--form-error-bg);
  color: var(--form-error-text);
  border: 1px solid var(--form-invalid-border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
}

/* Rating group invalid highlighting (token-based building block) */
.hbh-rating-group.is-invalid {
  border: 1px solid var(--form-invalid-border);
  background: var(--form-error-bg);
  border-radius: var(--radius-md);
  padding: var(--space-2);
}

/* Shared N-point rating scale — the layout half of the rating building block.
   Consumed by the _RatingScale partial (Views/Shared/Forms/_RatingScale.cshtml).
   `--hbh-rating-count` (set inline by the partial, default 5) drives the column count,
   so the same classes serve a 4-point HR scale and a 5-point conference scale identically. */
.hbh-rating-grid {
  display: grid;
  grid-template-columns: repeat(var(--hbh-rating-count, 5), minmax(0, 1fr));
  gap: 0.5rem;
}

.hbh-rating-hint {
  margin-bottom: 0.5rem;
  color: var(--bs-secondary-color);
  font-size: 0.875rem;
}

.hbh-rating-scale {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 0.5rem;
  color: var(--bs-secondary-color);
  font-size: 0.8125rem;
  font-weight: 600;
}

/* Touch-friendly targets: each option is at least a 3rem (48px) tap height on every screen. */
.hbh-rating-option .btn {
  min-height: 3rem;
  font-weight: 600;
}

.hbh-rating-caption {
  font-size: 0.6rem;
  line-height: 1.1;
}

/* Per-button scale caption under a rating value (hidden on small screens; the
   rating-scale legend at the top of the form carries the labels there) */
.hbh-rating-label {
  font-size: 0.6rem;
}
/* Conditional-required warning state (e.g., comment required for extreme rating) */
.hbh-field-warning {
  border-color: var(--warning) !important;
  background: rgba(245, 158, 11, 0.06);
}

/* ===== ANIMATIONS ===== */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in-up {
  animation: fadeInUp 0.6s ease-out;
}

/* ===== FOOTER ===== */
.footer {
  background: var(--footer-bg);
  color: var(--footer-text);
  padding: var(--space-8) 0;
  border-top: 1px solid var(--footer-border);
}

.footer .container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  align-items: center;
}

.footer .d-flex {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.footer .text-end {
  text-align: right;
}

@media (max-width: 768px) {
  .footer .container {
    grid-template-columns: 1fr;
    text-align: center;
  }
  
  .footer .text-end {
    text-align: center;
  }
}

/* Footer uses --footer-* tokens defined in :root and [data-theme="dark"].
   No additional overrides needed — tokens handle light/dark automatically. */
.footer a {
  color: var(--footer-link);
  transition: color var(--transition-fast);
}

.footer a:hover {
  color: var(--footer-link-hover);
}

/* Ensure navbar/footer obey theme */
[data-theme="dark"] .navbar .nav-link { color: rgba(255,255,255,0.85); }
[data-theme="dark"] .navbar .nav-link:hover { color: #fff; }
[data-theme="dark"] .breadcrumb { background: var(--gray-100); border-color: var(--gray-200); }

/* ===== ALERTS ===== */
.alert {
  padding: var(--space-4);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-4);
  border: 1px solid transparent;
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.alert-success {
  background: var(--success);
  color: #fff;
  border-color: var(--success);
}

.alert-danger {
  background: var(--error);
  color: #fff;
  border-color: var(--error);
}

.alert-dismissible {
  position: relative;
}

.btn-close {
  background: transparent;
  border: none;
  font-size: var(--font-size-lg);
  cursor: pointer;
  padding: var(--space-1);
  margin-left: auto;
}

/* ===== DASHBOARD LAYOUT ===== */
.dashboard-container {
  min-height: calc(100vh - 140px); /* Account for navbar and footer */
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--gray-50) 0%, var(--white) 100%);
  padding: var(--space-6) 0;
}

.dashboard-content {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-4);
}

/* Welcome Section */
.welcome-section {
  text-align: center;
  margin-bottom: var(--space-12);
}

.welcome-title {
  font-size: var(--font-size-4xl);
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: var(--space-3);
  line-height: 1.1;
}

.welcome-version {
  color: var(--gray-500);
  font-size: var(--font-size-sm);
  margin-bottom: var(--space-4);
}

.welcome-description {
  font-size: var(--font-size-lg);
  color: var(--gray-600);
  max-width: 600px;
  margin: 0 auto;
}

/* Quick Actions Grid */
.quick-actions-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-6);
  margin-bottom: var(--space-12);
}

.action-card {
  background: var(--white);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--gray-100);
  transition: all var(--transition-normal);
  position: relative;
  overflow: hidden;
}

.action-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--hbh-primary), var(--hbh-accent));
  transform: scaleX(0);
  transition: transform var(--transition-normal);
}

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

.action-card:hover::before {
  transform: scaleX(1);
}

.action-card.primary-action {
  background: linear-gradient(135deg, var(--hbh-primary) 0%, var(--hbh-primary-dark) 100%);
  color: var(--white);
}

.action-card.primary-action::before {
  background: var(--hbh-accent);
}

.action-card.large-card {
  grid-column: span 2;
}

.action-card.info-card {
  background: linear-gradient(135deg, var(--gray-100) 0%, var(--gray-50) 100%);
}

.action-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.15);
  margin-bottom: var(--space-6);
  transition: transform var(--transition-normal);
}

.action-card:not(.primary-action) .action-icon {
  background: var(--gray-100);
  color: var(--hbh-primary);
}

.action-icon i {
  font-size: var(--font-size-2xl);
}

.action-card:hover .action-icon {
  transform: scale(1.1) rotate(5deg);
}

.action-content h3 {
  font-size: var(--font-size-xl);
  font-weight: 600;
  margin-bottom: var(--space-2);
}

.action-content p {
  color: inherit;
  opacity: 0.8;
  margin-bottom: var(--space-6);
  font-size: var(--font-size-base);
}

.btn-action {
  background: rgba(255, 255, 255, 0.2);
  color: inherit;
  border: 1px solid rgba(255, 255, 255, 0.3);
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-md);
  font-weight: 500;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  transition: all var(--transition-fast);
}

.action-card:not(.primary-action) .btn-action {
  background: var(--hbh-primary);
  color: var(--white);
  border-color: var(--hbh-primary);
}

.btn-action:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: translateY(-1px);
  text-decoration: none;
  color: inherit;
}

.action-card:not(.primary-action) .btn-action:hover {
  background: var(--hbh-primary-dark);
  color: var(--white);
}

/* Stats Footer */
.stats-footer {
  display: flex;
  justify-content: center;
  gap: var(--space-8);
  padding-top: var(--space-8);
  border-top: 1px solid var(--gray-200);
}

.stat-item {
  text-align: center;
}

.stat-number {
  display: block;
  font-size: var(--font-size-2xl);
  font-weight: 700;
  color: var(--hbh-primary);
  margin-bottom: var(--space-1);
}

.stat-label {
  font-size: var(--font-size-sm);
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Responsive Design */
@media (max-width: 1024px) {
  .quick-actions-container {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--space-4);
  }
  
  .action-card.large-card {
    grid-column: span 1;
  }
}

@media (max-width: 768px) {
  .dashboard-container {
    min-height: calc(100vh - 120px);
    padding: var(--space-4) 0;
  }
  
  .dashboard-content {
    padding: 0 var(--space-3);
  }
  
  .welcome-title {
    font-size: var(--font-size-3xl);
  }
  
  .welcome-section {
    margin-bottom: var(--space-8);
  }
  
  .quick-actions-container {
    grid-template-columns: 1fr;
    gap: var(--space-4);
    margin-bottom: var(--space-8);
  }
  
  .action-card {
    padding: var(--space-6);
  }
  
  .stats-footer {
    flex-direction: column;
    gap: var(--space-4);
    align-items: center;
  }
  
  .stat-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
  }
  
  .stat-number {
    margin-bottom: 0;
  }
}

@media (max-width: 480px) {
  .welcome-title {
    font-size: var(--font-size-2xl);
  }
  
  .welcome-description {
    font-size: var(--font-size-base);
  }
  
  .stats-footer {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
  }
  
  .stat-item {
    flex-direction: column;
    gap: var(--space-1);
  }
  
  .stat-number {
    font-size: var(--font-size-lg);
  }
}

/* ===== LEGACY SUPPORT ===== */
/* Removed: global overrides of Bootstrap grid (`.row`, `.col-*`) caused clipping/overflow
   and broke responsive gutters at several breakpoints. Rely on Bootstrap's grid system. */

/* ===== PRINT STYLES ===== */
@media print {
  .hero-section,
  .quick-actions-section,
  .stats-section,
  .navbar,
  .footer {
    display: none;
  }
  
  .features-section {
    padding: 0;
  }
  
  .module-card {
    break-inside: avoid;
    box-shadow: none;
    border: 1px solid var(--gray-300);
  }
}

/* Coming Soon Button Styles - Only for specific coming-soon buttons */
.btn-secondary.coming-soon,
.btn-module.disabled {
    background-color: var(--color-secondary) !important;
    border-color: var(--color-secondary) !important;
    color: var(--color-text-on-primary) !important;
    opacity: 0.7;
    cursor: not-allowed;
}

.btn-secondary.coming-soon:hover,
.btn-module.disabled:hover {
    background-color: var(--color-secondary) !important;
    border-color: var(--color-secondary) !important;
    opacity: 0.8;
}

/* Normal secondary button styles */
.btn-secondary {
    background-color: var(--color-secondary);
    border-color: var(--color-secondary);
    color: var(--color-text-on-primary);
    transition: all var(--transition-fast);
}

.btn-secondary:hover {
    background-color: var(--color-secondary-hover);
    border-color: var(--color-secondary-hover);
    color: var(--color-text-on-primary);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.btn-secondary:focus {
    box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.5);
}

/* Ensure table action buttons are properly clickable */
.table .btn-group .btn {
    position: relative;
    z-index: 1;
    pointer-events: auto;
}

.table .btn-group .btn:hover {
    z-index: 2;
}

/* Admin panel styles */
.admin-quick-action {
    transition: transform 0.2s;
}

.admin-quick-action:hover {
    transform: translateY(-2px);
}

/* ===== CHECK-IN/OUT SYSTEM STYLES ===== */

/* Status Bar Warning */
.checkin-status-bar-warning {
    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
    color: var(--color-text-on-primary);
    font-weight: 500;
    box-shadow: 0 2px 8px rgba(220, 53, 69, 0.3);
    border-bottom: 3px solid #bd2130;
    animation: pulseWarning 2s infinite;
}

@keyframes pulseWarning {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.9; }
}

.checkin-status-bar-warning .btn-light {
    border: 2px solid white;
    font-weight: 600;
}

.checkin-status-bar-warning .btn-light:hover {
    background: white;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Check-in Section */
.checkin-section {
    padding: 2rem 0;
    background: linear-gradient(135deg, var(--gray-50) 0%, white 100%);
}

/* Check-in Card */
.checkin-card {
    background: white;
    border-radius: var(--radius-2xl);
    padding: 2.5rem;
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--gray-200);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.checkin-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 6px;
    background: linear-gradient(90deg, var(--hbh-primary) 0%, var(--hbh-accent) 100%);
}

.checkin-card.status-checked-in {
    border-color: var(--success);
    box-shadow: 0 0 0 1px var(--success), var(--shadow-lg);
}

.checkin-card.status-checked-in::before {
    background: linear-gradient(90deg, var(--success) 0%, var(--success-light) 100%);
}

.checkin-card.status-checked-out {
    border-color: var(--warning);
    box-shadow: 0 0 0 1px var(--warning), var(--shadow-lg);
}

.checkin-card.status-checked-out::before {
    background: linear-gradient(90deg, var(--warning) 0%, var(--warning-light) 100%);
}

/* Status Layout */
.checkin-status {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.status-indicator {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.status-indicator.status-in {
    background: linear-gradient(135deg, var(--success) 0%, var(--success-light) 100%);
    color: var(--color-text-on-primary);
    animation: pulseSuccess 2s infinite;
}

.status-indicator.status-out {
    background: linear-gradient(135deg, var(--warning) 0%, var(--warning-light) 100%);
    color: var(--color-text-on-primary);
    animation: pulseWarning 2s infinite;
}

@keyframes pulseSuccess {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.05); opacity: 0.9; }
}

.status-info h3 {
    margin: 0 0 0.5rem 0;
    color: var(--gray-800);
    font-weight: 600;
    font-size: 1.5rem;
}

.status-info p {
    margin: 0;
    color: var(--gray-600);
    font-size: 1.1rem;
}

/* Check-in Actions */
.checkin-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.btn-checkin, .btn-checkout {
    padding: 1rem 2rem;
    font-size: 1.1rem;
    font-weight: 600;
    border-radius: var(--radius-lg);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    min-width: 180px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.btn-checkin {
    background: linear-gradient(135deg, var(--success) 0%, var(--success-light) 100%);
    border: none;
    color: var(--color-text-on-primary);
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);
}

.btn-checkin:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(16, 185, 129, 0.4);
    background: linear-gradient(135deg, var(--success-light) 0%, var(--success) 100%);
}

.btn-checkout {
    background: linear-gradient(135deg, var(--error) 0%, var(--error-light) 100%);
    border: none;
    color: var(--color-text-on-primary);
    box-shadow: 0 4px 15px rgba(239, 68, 68, 0.3);
}

.btn-checkout:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(239, 68, 68, 0.4);
    background: linear-gradient(135deg, var(--error-light) 0%, var(--error) 100%);
}

.btn-checkin:disabled, .btn-checkout:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none !important;
}

/* Quick Notes */
.checkin-quick-notes {
    margin-top: 1rem;
    text-align: center;
}

.checkin-quick-notes .form-control {
    border-radius: var(--radius-md);
    border: 2px solid var(--gray-200);
    padding: 0.75rem 1rem;
    font-size: 0.95rem;
    transition: all 0.3s ease;
    background: var(--gray-50);
    text-align: center;
    resize: none;
    overflow: hidden;
    min-height: 40px;
}

.checkin-quick-notes .form-control:focus {
    border-color: var(--hbh-primary);
    box-shadow: 0 0 0 3px rgba(var(--hbh-primary-rgb), 0.1);
    background: var(--color-surface);
}

.checkin-quick-notes .form-control::placeholder {
    text-align: center;
    font-style: italic;
    color: var(--gray-400);
}

.checkin-quick-notes small {
    display: block;
    margin-top: 0.5rem;
    font-size: 0.8rem;
    color: var(--gray-500);
}

/* Highlight Animation */
@keyframes highlightPulse {
    0%, 100% { 
        box-shadow: var(--shadow-lg);
        transform: scale(1);
    }
    50% { 
        box-shadow: 0 0 30px rgba(var(--hbh-primary-rgb), 0.3), var(--shadow-xl);
        transform: scale(1.02);
    }
}

.highlight-pulse {
    animation: highlightPulse 1s ease-in-out 3;
}

/* Responsive Design */
@media (max-width: 768px) {
    .checkin-card {
        padding: 2rem 1.5rem;
        margin: 0 1rem;
    }
    
    .checkin-status {
        flex-direction: column;
        text-align: center;
        gap: 1rem;
    }
    
    .status-indicator {
        width: 70px;
        height: 70px;
        font-size: 1.8rem;
    }
    
    .status-info h3 {
        font-size: 1.3rem;
    }
    
    .checkin-actions {
        flex-direction: column;
        align-items: stretch;
    }
    
    .btn-checkin, .btn-checkout {
        min-width: auto;
        padding: 0.875rem 1.5rem;
    }
}

@media (max-width: 480px) {
    .checkin-section {
        padding: 1.5rem 0;
    }
    
    .checkin-card {
        padding: 1.5rem 1rem;
        border-radius: var(--radius-lg);
    }
    
    .status-indicator {
        width: 60px;
        height: 60px;
        font-size: 1.5rem;
    }
    
    .status-info h3 {
        font-size: 1.2rem;
    }
    
    .status-info p {
        font-size: 1rem;
    }
}

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

.hbh-notification {
    position: fixed;
    top: 20px;
    right: 20px;
    min-width: 300px;
    max-width: 500px;
    padding: 0;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    z-index: 10000;
    opacity: 0;
    transform: translateX(100%);
    transition: all 0.3s ease-in-out;
}

.hbh-notification.show {
    opacity: 1;
    transform: translateX(0);
}

.hbh-notification.success {
    background: linear-gradient(135deg, var(--success) 0%, var(--success-light) 100%);
    color: var(--color-text-on-primary);
    border-left: 4px solid var(--success-light);
}

.hbh-notification.error {
    background: linear-gradient(135deg, var(--error) 0%, var(--error-light) 100%);
    color: var(--color-text-on-primary);
    border-left: 4px solid var(--error-light);
}

.hbh-notification.warning {
    background: linear-gradient(135deg, var(--warning) 0%, var(--warning-light) 100%);
    color: var(--color-text-on-primary);
    border-left: 4px solid var(--warning-light);
}

.hbh-notification.info {
    background: linear-gradient(135deg, var(--info) 0%, var(--info-light) 100%);
    color: var(--color-text-on-primary);
    border-left: 4px solid var(--info-light);
}

.notification-content {
    display: flex;
    align-items: center;
    padding: 1rem 1.25rem;
    position: relative;
}

.notification-content i:first-child {
    font-size: 1.2rem;
    flex-shrink: 0;
}

.notification-content span {
    flex: 1;
    font-weight: 500;
    font-size: 0.95rem;
    line-height: 1.4;
}

.notification-close {
    background: none;
    border: none;
    color: var(--color-text-on-primary);
    padding: 0.25rem;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0.8;
    transition: all 0.2s ease;
    margin-left: 0.75rem;
    flex-shrink: 0;
}

.notification-close:hover {
    opacity: 1;
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.1);
}

.notification-close i {
    font-size: 0.9rem;
}

/* Mobile responsive notifications */
@media (max-width: 768px) {
    .hbh-notification {
        right: 10px;
        left: 10px;
        min-width: auto;
        max-width: none;
        top: 10px;
        transform: translateY(-100%);
    }
    
    .hbh-notification.show {
        transform: translateY(0);
    }
    
    .notification-content {
        padding: 0.875rem 1rem;
    }
    
    .notification-content span {
        font-size: 0.9rem;
    }
}

/* ===== FLOATING STATUS INDICATOR ===== */

.floating-status {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 1000;
    cursor: pointer;
}

.status-dot {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-lg);
    transition: all 0.3s ease;
    border: 3px solid white;
}

.status-dot.status-in {
    background: linear-gradient(135deg, var(--success) 0%, var(--success-light) 100%);
}

.status-dot.status-out {
    background: linear-gradient(135deg, var(--error) 0%, var(--error-light) 100%);
}

.status-dot.status-loading {
    background: linear-gradient(135deg, var(--gray-400) 0%, var(--gray-500) 100%);
}

.status-pulse {
    position: absolute;
    top: -3px;
    left: -3px;
    right: -3px;
    bottom: -3px;
    border-radius: 50%;
    border: 2px solid currentColor;
    opacity: 0;
    animation: pulse 2s infinite;
}

.status-dot.status-in .status-pulse {
    border-color: var(--success);
}

.status-dot.status-out .status-pulse {
    border-color: var(--error);
}

@keyframes pulse {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    70% {
        transform: scale(1.4);
        opacity: 0;
    }
    100% {
        transform: scale(1.4);
        opacity: 0;
    }
}

.status-dot::before {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    background: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.status-dot.status-in::before {
    content: '▶';
    color: var(--success);
    font-size: 10px;
    font-weight: bold;
}

.status-dot.status-out::before {
    content: '⏸';
    color: var(--error);
    font-size: 10px;
    font-weight: bold;
}

.status-dot.status-loading::before {
    content: '⏳';
    font-size: 12px;
}

.status-tooltip {
    position: absolute;
    bottom: 60px;
    right: 0;
    background: white;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    padding: 1rem;
    min-width: 250px;
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.3s ease;
    pointer-events: none;
    border: 1px solid var(--gray-200);
    max-width: calc(100vw - 24px);
}

/* Keep hover active while moving from the status dot to the tooltip. */
.status-tooltip::before {
    content: '';
    position: absolute;
    left: -20px;
    right: -20px;
    bottom: -24px;
    height: 24px;
    background: transparent;
}

.floating-status:hover .status-tooltip {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.status-tooltip::after {
    content: '';
    position: absolute;
    bottom: -8px;
    right: 20px;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid white;
}

.status-info {
    margin-bottom: 0.75rem;
}

.status-checkin-mode {
    margin-bottom: 0.75rem;
}

.status-checkin-mode .form-check-label {
    color: var(--gray-700);
}

.status-text {
    font-weight: 600;
    color: var(--gray-800);
    margin-bottom: 0.25rem;
}

.status-time {
    font-size: 0.85rem;
    color: var(--gray-600);
}

.status-actions {
    margin-bottom: 0.75rem;
}

.status-actions .btn {
    width: 100%;
    margin-bottom: 0.5rem;
    font-weight: 600;
}

.status-links {
    border-top: 1px solid var(--gray-200);
    padding-top: 0.75rem;
}

.status-links .btn-link {
    color: var(--gray-600);
    text-decoration: none;
    padding: 0;
    font-size: 0.85rem;
}

.status-links .btn-link:hover {
    color: var(--hbh-primary);
}

/* Mobile responsive floating status */
@media (max-width: 768px) {
    .floating-status {
        bottom: max(12px, env(safe-area-inset-bottom));
        right: max(12px, env(safe-area-inset-right));
    }
    
    .status-dot {
        width: 45px;
        height: 45px;
    }
    
    .status-tooltip {
        bottom: 55px;
        right: 0;
        width: min(320px, calc(100vw - 24px));
        min-width: 0;
    }
    
    .status-tooltip::after {
        right: 14px;
    }
}

/* ===== CHECK-IN/OUT DARK MODE ===== */

/* --- Floating Status Indicator --- */
[data-theme="dark"] .status-dot {
    border-color: var(--gray-200);
}

[data-theme="dark"] .status-dot::before {
    background: var(--gray-100);
}

[data-theme="dark"] .status-dot.status-in::before {
    color: var(--success);
}

[data-theme="dark"] .status-dot.status-out::before {
    color: var(--error);
}

[data-theme="dark"] .status-tooltip {
    background: var(--gray-100);
    border-color: var(--gray-200);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .status-tooltip::after {
    border-top-color: var(--gray-100);
}

[data-theme="dark"] .status-text {
    color: var(--gray-800);
}

[data-theme="dark"] .status-time {
    color: var(--gray-500);
}

[data-theme="dark"] .status-checkin-mode .form-check-label {
    color: var(--gray-700);
}

[data-theme="dark"] .status-links {
    border-top-color: var(--gray-200);
}

[data-theme="dark"] .status-links .btn-link {
    color: var(--gray-500);
}

[data-theme="dark"] .status-links .btn-link:hover {
    color: var(--hbh-primary);
}

/* --- Check-in Status Bar Warning --- */
[data-theme="dark"] .checkin-status-bar-warning {
    background: linear-gradient(135deg, #b91c1c 0%, #991b1b 100%);
    border-bottom-color: #7f1d1d;
    box-shadow: 0 2px 8px rgba(185, 28, 28, 0.4);
}

[data-theme="dark"] .checkin-status-bar-warning .btn-light {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.4);
    color: white;
}

[data-theme="dark"] .checkin-status-bar-warning .btn-light:hover {
    background: rgba(255, 255, 255, 0.25);
    color: white;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

/* --- Check-in Section & Card --- */
[data-theme="dark"] .checkin-section {
    background: linear-gradient(135deg, var(--gray-50) 0%, var(--gray-100) 100%);
}

[data-theme="dark"] .checkin-card {
    background: var(--gray-100);
    border-color: var(--gray-200);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .checkin-card.status-checked-in {
    border-color: var(--success);
    box-shadow: 0 0 0 1px var(--success), 0 4px 16px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .checkin-card.status-checked-out {
    border-color: var(--warning);
    box-shadow: 0 0 0 1px var(--warning), 0 4px 16px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .status-info h3 {
    color: var(--gray-800);
}

[data-theme="dark"] .status-info p {
    color: var(--gray-500);
}

/* --- Quick Notes --- */
[data-theme="dark"] .checkin-quick-notes .form-control {
    background: var(--gray-50);
    border-color: var(--gray-200);
    color: var(--gray-800);
}

[data-theme="dark"] .checkin-quick-notes .form-control:focus {
    background: var(--gray-100);
    border-color: var(--hbh-primary);
    box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.2);
}

[data-theme="dark"] .checkin-quick-notes .form-control::placeholder {
    color: var(--gray-400);
}

[data-theme="dark"] .checkin-quick-notes small {
    color: var(--gray-400);
}

/* --- Time Picker Dark Mode --- */
[data-theme="dark"] .tp-slider::-webkit-slider-thumb {
    border-color: var(--gray-200);
}

[data-theme="dark"] .tp-slider::-moz-range-thumb {
    border-color: var(--gray-200);
}

/* --- Bootstrap Utility Dark Mode Overrides (system-wide) --- */

/* bg-light: used in stat tiles, card headers/footers, filter panels */
[data-theme="dark"] .bg-light {
    background-color: var(--gray-100) !important;
    color: var(--gray-800) !important;
    border-color: var(--gray-200) !important;
}

[data-theme="dark"] .bg-light:hover {
    background-color: var(--gray-200) !important;
}

/* bg-white: used in cards, panels, table backgrounds (~90 views) */
[data-theme="dark"] .bg-white {
    background-color: var(--color-surface) !important;
}

/* text-dark / text-black: ensure readable on dark surfaces */
[data-theme="dark"] .text-dark {
    color: var(--color-text) !important;
}
[data-theme="dark"] .text-black {
    color: var(--color-text) !important;
}

/* border-light: visible on dark surfaces */
[data-theme="dark"] .border-light {
    border-color: var(--color-border) !important;
}

/* bg-body: match semantic background */
[data-theme="dark"] .bg-body {
    background-color: var(--color-bg) !important;
}

/* bg-body-secondary / bg-body-tertiary */
[data-theme="dark"] .bg-body-secondary {
    background-color: var(--color-surface-alt) !important;
}
[data-theme="dark"] .bg-body-tertiary {
    background-color: var(--color-surface-muted) !important;
}

/* Bootstrap contextual text colors - brighter variants for dark backgrounds */
[data-theme="dark"] .text-success { color: #34d399 !important; }
[data-theme="dark"] .text-info { color: #60a5fa !important; }
[data-theme="dark"] .text-warning { color: #fbbf24 !important; }
[data-theme="dark"] .text-danger { color: #f87171 !important; }
[data-theme="dark"] .text-secondary { color: #94a3b8 !important; }
[data-theme="dark"] .text-primary { color: #6baaee !important; }

/* Badge colors — dark mode uses translucent bg + tinted text (GitHub/Linear style) */
[data-theme="dark"] .badge.bg-success {
    background-color: var(--badge-success-bg) !important;
    color: var(--badge-success-text) !important;
}

[data-theme="dark"] .badge.bg-info {
    background-color: var(--badge-info-bg) !important;
    color: var(--badge-info-text) !important;
}

[data-theme="dark"] .badge.bg-warning {
    background-color: var(--badge-warning-bg) !important;
    color: var(--badge-warning-text) !important;
}

[data-theme="dark"] .badge.bg-secondary {
    background-color: var(--badge-secondary-bg) !important;
    color: var(--badge-secondary-text) !important;
}

[data-theme="dark"] .badge.bg-danger {
    background-color: var(--badge-danger-bg) !important;
    color: var(--badge-danger-text) !important;
}

[data-theme="dark"] .badge.bg-primary {
    background-color: var(--badge-primary-bg) !important;
    color: var(--badge-primary-text) !important;
}

/* Table contextual row colors — use design tokens */
[data-theme="dark"] .table-light,
[data-theme="dark"] thead.table-light th {
    background-color: var(--gray-100) !important;
    color: var(--gray-800) !important;
    border-color: var(--gray-200) !important;
}

[data-theme="dark"] .table-dark,
[data-theme="dark"] thead.table-dark th {
    background-color: var(--gray-100) !important;
    color: var(--gray-800) !important;
    border-color: var(--gray-200) !important;
}

[data-theme="dark"] .table-primary,
[data-bs-theme="dark"] .table-primary {
    --bs-table-bg: var(--row-primary-bg);
    --bs-table-color: var(--color-text);
    --bs-table-border-color: transparent;
    --bs-table-hover-bg: rgba(74, 144, 226, 0.20);
    --bs-table-hover-color: var(--color-text);
    background-color: var(--row-primary-bg) !important;
    color: var(--color-text) !important;
}

[data-theme="dark"] .table-primary > *,
[data-bs-theme="dark"] .table-primary > * {
    --bs-table-bg: var(--row-primary-bg);
    --bs-table-accent-bg: transparent;
    color: var(--color-text) !important;
}

[data-theme="dark"] .table-success,
[data-bs-theme="dark"] .table-success {
    --bs-table-bg: var(--row-success-bg);
    --bs-table-color: var(--color-text);
    --bs-table-border-color: transparent;
    --bs-table-hover-bg: rgba(34, 197, 94, 0.22);
    --bs-table-hover-color: var(--color-text);
    background-color: var(--row-success-bg) !important;
    color: var(--color-text) !important;
}

[data-theme="dark"] .table-success > *,
[data-bs-theme="dark"] .table-success > * {
    --bs-table-bg: var(--row-success-bg);
    --bs-table-accent-bg: transparent;
    color: var(--color-text) !important;
}

[data-theme="dark"] .table-warning,
[data-bs-theme="dark"] .table-warning {
    --bs-table-bg: var(--row-warning-bg);
    --bs-table-color: var(--color-text);
    --bs-table-border-color: transparent;
    --bs-table-hover-bg: rgba(234, 179, 8, 0.20);
    --bs-table-hover-color: var(--color-text);
    background-color: var(--row-warning-bg) !important;
    color: var(--color-text) !important;
}

[data-theme="dark"] .table-warning > *,
[data-bs-theme="dark"] .table-warning > * {
    --bs-table-bg: var(--row-warning-bg);
    --bs-table-accent-bg: transparent;
    color: var(--color-text) !important;
}

[data-theme="dark"] .table-info,
[data-bs-theme="dark"] .table-info {
    --bs-table-bg: var(--row-info-bg);
    --bs-table-color: var(--color-text);
    --bs-table-border-color: transparent;
    --bs-table-hover-bg: rgba(56, 189, 248, 0.20);
    --bs-table-hover-color: var(--color-text);
    background-color: var(--row-info-bg) !important;
    color: var(--color-text) !important;
}

[data-theme="dark"] .table-info > *,
[data-bs-theme="dark"] .table-info > * {
    --bs-table-bg: var(--row-info-bg);
    --bs-table-accent-bg: transparent;
    color: var(--color-text) !important;
}

[data-theme="dark"] .table-hover tbody tr:hover,
[data-bs-theme="dark"] .table-hover tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.04) !important;
}

/* Input group text (search icons, etc.) */
[data-theme="dark"] .input-group-text {
    background-color: var(--gray-100);
    border-color: var(--gray-200);
    color: var(--gray-600);
}

/* Pagination */
[data-theme="dark"] .page-link {
    background-color: var(--gray-100);
    border-color: var(--gray-200);
    color: var(--gray-800);
}

[data-theme="dark"] .page-link:hover {
    background-color: var(--gray-200);
    border-color: var(--gray-300);
    color: var(--gray-900);
}

[data-theme="dark"] .page-item.active .page-link {
    background-color: var(--hbh-primary);
    border-color: var(--hbh-primary);
    color: var(--color-text-on-primary);
}

[data-theme="dark"] .page-item.disabled .page-link {
    background-color: var(--gray-50);
    border-color: var(--gray-200);
    color: var(--gray-400);
}

/* --- Stat Cards (tinted accent pattern) --- */
.stat-card {
    border-radius: var(--radius-lg);
    border: 1px solid var(--gray-200);
    padding: 1.25rem;
    transition: all 0.2s ease;
    background: var(--color-surface, #fff);
    position: relative;
    overflow: hidden;
}

.stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 4px;
}

.stat-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.stat-card .stat-icon {
    /* Reset the legacy 64px white circle (.stat-icon, earlier in this file) so the modern
       tinted card shows a simple coloured glyph that inherits its variant colour. */
    width: auto;
    height: auto;
    margin: 0;
    background: none;
    border-radius: 0;
    font-size: 2rem;
    line-height: 1;
    opacity: 0.8;
    flex-shrink: 0;
}

.stat-card .stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0;
    line-height: 1.2;
}

.stat-card .stat-label {
    font-size: 0.8rem;
    margin-bottom: 0;
    opacity: 0.8;
}

/* Stat card accent variants */
.stat-card-primary {
    background: rgba(13, 110, 253, 0.06);
    border-color: rgba(13, 110, 253, 0.15);
}
.stat-card-primary::before { background: var(--bs-primary, #0d6efd); }
.stat-card-primary .stat-value { color: var(--bs-primary, #0d6efd); }
.stat-card-primary .stat-icon { color: var(--bs-primary, #0d6efd); }
.stat-card-primary .stat-label { color: var(--gray-600); }

.stat-card-success {
    background: rgba(16, 185, 129, 0.06);
    border-color: rgba(16, 185, 129, 0.15);
}
.stat-card-success::before { background: var(--success); }
.stat-card-success .stat-value { color: var(--success); }
.stat-card-success .stat-icon { color: var(--success); }
.stat-card-success .stat-label { color: var(--gray-600); }

.stat-card-info {
    background: rgba(59, 130, 246, 0.06);
    border-color: rgba(59, 130, 246, 0.15);
}
.stat-card-info::before { background: var(--info, #3b82f6); }
.stat-card-info .stat-value { color: var(--info, #3b82f6); }
.stat-card-info .stat-icon { color: var(--info, #3b82f6); }
.stat-card-info .stat-label { color: var(--gray-600); }

.stat-card-warning {
    background: rgba(245, 158, 11, 0.06);
    border-color: rgba(245, 158, 11, 0.15);
}
.stat-card-warning::before { background: var(--warning); }
.stat-card-warning .stat-value { color: var(--warning); }
.stat-card-warning .stat-icon { color: var(--warning); }
.stat-card-warning .stat-label { color: var(--gray-600); }

.stat-card-danger {
    background: rgba(239, 68, 68, 0.06);
    border-color: rgba(239, 68, 68, 0.15);
}
.stat-card-danger::before { background: var(--danger, #ef4444); }
.stat-card-danger .stat-value { color: var(--danger, #ef4444); }
.stat-card-danger .stat-icon { color: var(--danger, #ef4444); }
.stat-card-danger .stat-label { color: var(--gray-600); }

.stat-card-secondary {
    background: rgba(100, 116, 139, 0.06);
    border-color: rgba(100, 116, 139, 0.15);
}
.stat-card-secondary::before { background: var(--gray-500); }
.stat-card-secondary .stat-value { color: var(--gray-600); }
.stat-card-secondary .stat-icon { color: var(--gray-500); }
.stat-card-secondary .stat-label { color: var(--gray-600); }

/* Stat cards dark mode - slightly brighter tints for visibility */
[data-theme="dark"] .stat-card {
    background: var(--gray-100);
    border-color: var(--gray-200);
}

[data-theme="dark"] .stat-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

[data-theme="dark"] .stat-card-primary {
    background: rgba(74, 144, 226, 0.1);
    border-color: rgba(74, 144, 226, 0.25);
}
[data-theme="dark"] .stat-card-primary .stat-value { color: #6baaee; }
[data-theme="dark"] .stat-card-primary .stat-icon { color: #6baaee; }
[data-theme="dark"] .stat-card-primary .stat-label { color: var(--gray-500); }

[data-theme="dark"] .stat-card-success {
    background: rgba(16, 185, 129, 0.1);
    border-color: rgba(16, 185, 129, 0.25);
}
[data-theme="dark"] .stat-card-success .stat-value { color: #34d399; }
[data-theme="dark"] .stat-card-success .stat-icon { color: #34d399; }
[data-theme="dark"] .stat-card-success .stat-label { color: var(--gray-500); }

[data-theme="dark"] .stat-card-info {
    background: rgba(59, 130, 246, 0.1);
    border-color: rgba(59, 130, 246, 0.25);
}
[data-theme="dark"] .stat-card-info .stat-value { color: #60a5fa; }
[data-theme="dark"] .stat-card-info .stat-icon { color: #60a5fa; }
[data-theme="dark"] .stat-card-info .stat-label { color: var(--gray-500); }

[data-theme="dark"] .stat-card-warning {
    background: rgba(245, 158, 11, 0.1);
    border-color: rgba(245, 158, 11, 0.25);
}
[data-theme="dark"] .stat-card-warning .stat-value { color: #fbbf24; }
[data-theme="dark"] .stat-card-warning .stat-icon { color: #fbbf24; }
[data-theme="dark"] .stat-card-warning .stat-label { color: var(--gray-500); }

[data-theme="dark"] .stat-card-danger {
    background: rgba(248, 113, 113, 0.08);
    border-color: rgba(248, 113, 113, 0.2);
}
[data-theme="dark"] .stat-card-danger .stat-value { color: #f87171; }
[data-theme="dark"] .stat-card-danger .stat-icon { color: #f87171; }
[data-theme="dark"] .stat-card-danger .stat-label { color: var(--gray-500); }

[data-theme="dark"] .stat-card-secondary {
    background: rgba(148, 163, 184, 0.1);
    border-color: rgba(148, 163, 184, 0.25);
}
[data-theme="dark"] .stat-card-secondary .stat-value { color: #cbd5e1; }
[data-theme="dark"] .stat-card-secondary .stat-icon { color: #cbd5e1; }
[data-theme="dark"] .stat-card-secondary .stat-label { color: var(--gray-500); }

/* --- Notification Dark Mode --- */
[data-theme="dark"] .hbh-notification {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

/* ===== FOOTER MOBILE RESPONSIVENESS ===== */
@media (max-width: 768px) {
  .footer {
    padding: var(--mobile-space-4) 0;
  }
  
  .footer .row {
    text-align: center;
  }
  
  .footer .col-md-6 {
    margin-bottom: var(--mobile-space-3);
  }
  
  .footer .col-md-6:last-child {
    margin-bottom: 0;
  }
  
  .footer small {
    font-size: var(--mobile-font-size-xs);
    line-height: 1.4;
  }
  
  .footer .mx-2 {
    display: block;
    margin: var(--mobile-space-1) 0 !important;
  }
}

/* ===== COMPREHENSIVE TABLE SYSTEM USING DESIGN TOKENS ===== */

/* Base Table Styling */
.table {
    --bs-table-bg: var(--table-bg);
    --bs-table-color: var(--table-text);
    --bs-table-border-color: var(--table-border);
    --bs-table-hover-bg: var(--table-hover-bg);
    --bs-table-striped-bg: var(--table-stripe-bg);
    --bs-table-active-bg: var(--table-active-bg);
    --bs-table-active-color: var(--table-active-text);
    margin-bottom: 0;
    border-collapse: separate;
    border-spacing: 0;
}

/* Table Headers */
.table thead th {
    background-color: var(--table-header-bg);
    color: var(--table-header-text);
    border-color: var(--table-border);
    font-weight: 600;
    position: sticky;
    top: 0;
    z-index: 10;
    border-bottom: 2px solid var(--table-border);
}

.table-light {
    --bs-table-bg: var(--table-header-bg);
    --bs-table-color: var(--table-header-text);
}

/* Table Hover Effects */
.table-hover tbody tr:hover > td {
    background-color: var(--table-hover-bg);
    transition: background-color var(--transition-fast);
}

/* Table Responsive Wrapper */
.table-responsive {
    border: 1px solid var(--table-responsive-border);
    border-radius: var(--table-radius);
    box-shadow: var(--table-responsive-shadow);
    background: var(--table-bg);
    overflow-x: auto;
    overflow-y: auto;
    position: relative;
}

/* ===== STACKED-CARD TABLE (interactive grids on phones) =====================
   Opt-in utility: add `.table-stack-lg` to a <table>. Below the lg breakpoint
   the table reflows into one card per row instead of scrolling sideways.

   Use this INSTEAD of the twin desktop-table / phone-card-stack markup when the
   rows carry live form controls wired to plain-DOM JS (autosave grids, inline
   editors): duplicating those controls into a second block would put two inputs
   per record in the DOM and desync. Reflow keeps a single DOM, so the existing
   JS is untouched.

   Contract:
   - give each data <td> a `data-label` (usually its column header) — it shows as
     the field label in card mode;
   - mark the row's identity cell (name/title) with `.stack-title` to render it as
     the card header (no label, spans the card);
   - mark a cell whose control should sit inline beside its label with
     `.stack-inline` (e.g. a checkbox/switch);
   - mark a cell that is empty until JS fills it (a save-status badge) with
     `.stack-status` so it collapses instead of leaving a blank row;
   - mark a label+amount totals/summary <tr> (e.g. "Total (CZK)  1 234") with
     `.stack-summary` — it renders as a single key-value line, and consecutive
     summary rows fuse into one receipt-style card;
   - a <tfoot> totals row reflows into its own trailing card — use plain <td>
     cells (not <th>) with `data-label` + a `.stack-title` label cell so the
     totals stay readable in card mode. */
@media (max-width: 991.98px) {
    .table-responsive:has(> .table-stack-lg) {
        border: 0;
        box-shadow: none;
        overflow: visible;
        background: transparent;
        /* Live log grids cap their desktop height with an inline max-height for the
           sticky-header scroll area. In card mode that would clip the stacked cards
           and overlap following content — let them flow instead. */
        max-height: none !important;
    }

    .table-stack-lg thead {
        display: none;
    }

    .table-stack-lg,
    .table-stack-lg tbody,
    .table-stack-lg tfoot,
    .table-stack-lg td {
        display: block;
        width: auto;
    }

    /* Flex column + gap gives even spacing without per-cell border bookkeeping,
       and lets the identity cell float to the top of the card via `order`. */
    .table-stack-lg tr {
        display: flex;
        flex-direction: column;
        gap: var(--space-2);
        border: 1px solid var(--table-responsive-border);
        border-radius: var(--radius-md);
        box-shadow: var(--table-responsive-shadow);
        background: var(--table-bg);
        margin: 0 0 var(--space-3);
        padding: var(--space-3);
    }

    /* Inline Bootstrap collapse rows (e.g. per-row edit forms) must stay hidden
       until expanded. The blanket `tr { display: flex }` above outweighs
       Bootstrap's `.collapse { display: none }`, so restore the collapsed state
       here; `.show`/`.collapsing` rows fall back to the flex-card rule. */
    .table-stack-lg tr.collapse:not(.show) {
        display: none;
    }

    .table-stack-lg td {
        padding: 0;
        border: 0;
    }

    .table-stack-lg td[data-label]::before {
        content: attr(data-label);
        display: block;
        margin-bottom: var(--space-1);
        font-weight: 600;
        font-size: 0.8rem;
        color: var(--color-text-muted, var(--gray-500));
    }

    /* Identity cell → card header, pinned to the top of the card. */
    .table-stack-lg td.stack-title {
        order: -1;
        padding-bottom: var(--space-2);
        border-bottom: 1px solid var(--table-border);
        font-size: 1rem;
        font-weight: 600;
    }

    .table-stack-lg td.stack-title::before {
        display: none;
    }

    /* Inline label + control (checkbox / switch). */
    .table-stack-lg td.stack-inline {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-3);
    }

    .table-stack-lg td.stack-inline::before {
        margin-bottom: 0;
    }

    /* Checkboxes/switches in card mode grow to a thumb-sized hit area. */
    .table-stack-lg td.stack-inline .form-check-input {
        width: 1.5rem;
        height: 1.5rem;
        margin: 0;
        flex-shrink: 0;
    }

    /* Status cell that stays empty until JS drops a badge in — collapse it while
       empty so cards don't carry a blank row (`:has(*)` = has an element child). */
    .table-stack-lg td.stack-status:not(:has(*)) {
        display: none;
    }

    /* Summary/totals row: one key-value line (label left, amount right) instead
       of a labelled field stack. Consecutive summary rows fuse into a single
       receipt-style card so a totals block doesn't become five separate cards. */
    .table-stack-lg tr.stack-summary {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: baseline;
    }

    .table-stack-lg tr.stack-summary:has(+ tr.stack-summary) {
        margin-bottom: 0;
        border-bottom: 0;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }

    .table-stack-lg tr.stack-summary + tr.stack-summary {
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }

    /* Bootstrap contextual row classes (.table-light/.table-primary/…) paint each
       cell via an inset box-shadow; on auto-width flex cells that reads as random
       colored patches — neutralize it in card mode. */
    .table-stack-lg tr.stack-summary > td {
        box-shadow: none;
        background: transparent;
    }

    /* Bootstrap contextual ROW classes (.table-primary on a highlighted row, etc.)
       paint each cell via an inset box-shadow; on stacked block cells that reads as
       random colored patches. Tint the whole card instead — the row element itself
       carries Bootstrap's --bs-table-bg custom property. */
    .table-stack-lg tr[class*="table-"] {
        background: var(--bs-table-bg, var(--table-bg));
    }

    .table-stack-lg tr[class*="table-"] > td {
        box-shadow: none;
        background: transparent;
    }

    /* Controls fill the card and stay thumb-friendly. */
    .table-stack-lg td .form-select,
    .table-stack-lg td .form-control {
        width: 100%;
        min-height: var(--mobile-touch-target);
    }

    /* A <table> nested inside a stacked card (e.g. a sub-table in an expandable
       detail row) must keep native table layout — the card reflow is only for the
       OUTER grid's own rows. Without this, the blanket descendant selectors above
       also stack the inner table's rows into unreadable flex columns. The nested
       table keeps its own `.table-responsive` wrapper for horizontal scroll.
       Purely additive: these selectors only match a <table> living inside a
       stacked cell, so flat consumers (no nested table) are never affected. */
    .table-stack-lg td table:not(.table-stack-lg),
    .table-stack-lg td table:not(.table-stack-lg) thead,
    .table-stack-lg td table:not(.table-stack-lg) tbody,
    .table-stack-lg td table:not(.table-stack-lg) tr,
    .table-stack-lg td table:not(.table-stack-lg) th,
    .table-stack-lg td table:not(.table-stack-lg) td {
        display: revert;
        width: auto;
    }

    /* Undo the flex-card decoration the utility puts on `tr`, so nested rows read
       as plain table rows again (Bootstrap striping/borders on the sub-table still
       apply — this only neutralizes the utility's own additions). */
    .table-stack-lg td table:not(.table-stack-lg) tr {
        gap: 0;
        border-width: 0;
        border-radius: 0;
        box-shadow: none;
        background: transparent;
        margin: 0;
        padding: 0;
    }

    .table-stack-lg td table:not(.table-stack-lg) td,
    .table-stack-lg td table:not(.table-stack-lg) th {
        padding: var(--space-1) var(--space-2);
    }

    /* No data-label pseudo-labels inside nested tables. */
    .table-stack-lg td table:not(.table-stack-lg) td::before {
        content: none;
    }
}

/* DataTables Integration */
.data-table {
    width: 100%;
    display: table;
    visibility: visible;
    opacity: 1;
}

.dataTables_wrapper {
    color: var(--table-text);
    background: var(--table-bg);
    padding: var(--space-3);
}

.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate {
    color: var(--gray-600);
    font-size: var(--font-size-sm);
    margin: var(--space-2) 0;
}

.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
    background-color: var(--table-bg);
    color: var(--table-text);
    border: 1px solid var(--table-border);
    border-radius: var(--radius-sm);
    padding: var(--space-1) var(--space-2);
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    background: var(--table-bg);
    color: var(--table-text);
    border: 1px solid var(--table-border);
    border-radius: var(--radius-sm);
    padding: var(--space-1) var(--space-3);
    margin: 0 var(--space-1);
    transition: all var(--transition-fast);
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--table-hover-bg);
    color: var(--table-text);
    border-color: var(--hbh-accent);
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: var(--hbh-accent);
    color: var(--white);
    border-color: var(--hbh-accent);
}

/* Table Action Buttons */
.table .btn {
    position: relative;
    z-index: 5;
    font-size: var(--font-size-xs);
    padding: var(--space-1) var(--space-2);
    margin: 0 var(--space-1);
    transition: all var(--transition-fast);
    pointer-events: auto;
    cursor: pointer;
}

.table .btn-group .btn {
    position: relative;
    z-index: 5;
    pointer-events: auto;
}

.table a {
    pointer-events: auto;
    cursor: pointer;
    z-index: 5;
    position: relative;
}

/* Code elements in tables */
.table code {
    background-color: var(--gray-100);
    color: var(--gray-800);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    border: 1px solid var(--table-border);
    font-size: var(--font-size-xs);
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
}

/* Badge elements in tables */
.table .badge {
    font-size: var(--font-size-xs);
    font-weight: 500;
    padding: var(--space-1) var(--space-2);
}

/* Sticky column support */
.sticky-start {
    position: sticky;
    left: 0;
    background-color: var(--table-bg);
    z-index: 5;
}

/* Table Loading State */
.table-loading {
    opacity: 0.6;
    pointer-events: none;
}

.table-loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 2px solid var(--hbh-accent);
    border-radius: 50%;
    border-top-color: transparent;
    animation: spin 1s linear infinite;
}

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

/* Enhanced table interactions */
.table tbody tr {
    cursor: pointer;
}

.table tbody tr:hover {
    background-color: var(--table-hover-bg);
}

.table tbody td {
    vertical-align: middle;
    border-color: var(--table-border);
}

/* Ensure proper table structure */
.permissions-table-container {
    min-height: 300px;
    position: relative;
}

/* Basic DataTables support */
table.dataTable {
    width: 100%;
}

table.dataTable tbody tr {
    display: table-row;
}

table.dataTable tbody td {
    display: table-cell;
}

/* Fallback styling when DataTables is not available */
.table-fallback {
    width: 100%;
    max-width: 100%;
    margin-bottom: var(--space-4);
    background-color: var(--table-bg);
    border-collapse: separate;
    border-spacing: 0;
}

.table-fallback a,
.table-fallback button,
.table-fallback .btn {
    pointer-events: auto !important;
    cursor: pointer !important;
    z-index: 10 !important;
    position: relative;
}

.table-fallback tbody tr:hover {
    background-color: var(--table-hover-bg);
}

/* Responsive Table Adjustments */
@media (max-width: 768px) {
    .table-responsive {
        border: none;
        border-radius: 0;
    }
    
    .table th,
    .table td {
        padding: var(--space-2);
        font-size: var(--font-size-sm);
    }
    
    .table .btn {
        font-size: var(--font-size-xs);
        padding: var(--space-1);
    }
}

/* Print Styles */
@media print {
    .table {
        border-collapse: collapse !important;
    }
    
    .table td,
    .table th {
        background-color: white !important;
        color: black !important;
    }
    
    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_filter,
    .dataTables_wrapper .dataTables_info,
    .dataTables_wrapper .dataTables_paginate {
        display: none !important;
    }
}

/* Planning Tabs */
.plan-tabs {
    border-bottom: 1px solid var(--gray-200);
    gap: var(--space-2);
}

.plan-tabs .nav-link {
    color: var(--gray-600);
    font-weight: 600;
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    padding: var(--space-3) var(--space-4);
    transition: color var(--transition-fast), border-color var(--transition-fast), background-color var(--transition-fast);
}

.plan-tabs .nav-link:hover {
    color: var(--hbh-primary);
    background-color: rgba(var(--hbh-primary-rgb), 0.08);
    border-color: rgba(var(--hbh-primary-rgb), 0.4);
}

.plan-tabs .nav-link.active {
    color: var(--hbh-primary);
    background-color: rgba(var(--hbh-primary-rgb), 0.12);
    border-color: var(--hbh-primary);
    box-shadow: inset 0 -2px 0 var(--hbh-primary);
}

[data-theme="dark"] .plan-tabs {
    border-bottom-color: var(--gray-700);
}

[data-theme="dark"] .plan-tabs .nav-link {
    color: var(--gray-300);
}

[data-theme="dark"] .plan-tabs .nav-link:hover {
    color: var(--white);
    background-color: rgba(var(--hbh-primary-rgb), 0.2);
    border-color: rgba(var(--hbh-primary-rgb), 0.5);
}

[data-theme="dark"] .plan-tabs .nav-link.active {
    color: var(--white);
    background-color: rgba(var(--hbh-primary-rgb), 0.3);
}

/* ===== IMPERSONATION BANNER ===== */
.impersonation-banner {
    background: linear-gradient(135deg, var(--warning) 0%, var(--warning-light) 100%);
    color: var(--gray-900);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    position: sticky;
    top: 0;
    z-index: 1100;
    font-size: var(--font-size-sm);
    animation: impersonation-pulse 3s ease-in-out infinite;
}

@keyframes impersonation-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.95; }
}

.impersonation-banner .btn {
    font-weight: 600;
    transition: all var(--transition-fast);
}

.impersonation-banner .btn:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

[data-theme="dark"] .impersonation-banner {
    background: linear-gradient(135deg, #d97706 0%, #f59e0b 100%);
    color: var(--white);
}

[data-theme="dark"] .impersonation-banner .text-warning-emphasis {
    color: rgba(255, 255, 255, 0.8) !important;
}

[data-theme="dark"] .impersonation-banner .badge {
    background-color: rgba(0, 0, 0, 0.3) !important;
}

/* ===== HR TEST IMPERSONATION BANNER ===== */
.hr-test-impersonation-banner {
    background: linear-gradient(135deg, var(--info) 0%, #2f80ed 100%);
    color: var(--white);
    box-shadow: var(--shadow-md);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1200;
}

.has-hr-test-impersonation-banner {
    padding-top: var(--hr-test-impersonation-height, 96px);
}

.hr-test-impersonation-icon {
    width: 40px;
    height: 40px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}

[data-theme="dark"] .hr-test-impersonation-banner {
    background: linear-gradient(135deg, #1d4ed8 0%, #2563eb 100%);
}

/* ===== CROSS-EMPLOYEE CONTEXT BANNER ===== */
.employee-context-banner {
    position: sticky;
    /* top 0, not a navbar offset: the navbar never actually sticks (caged in header.hbh-header),
       so an offset here pins the banner mid-air with content scrolling through the gap above. */
    top: 0;
    z-index: 990;
}

.employee-context-banner__frame {
    position: fixed;
    inset: 0.55rem;
    border: 3px solid rgba(var(--bs-warning-rgb), 0.72);
    border-radius: calc(var(--radius-xl) + 2px);
    box-shadow:
        0 0 0 1px rgba(var(--bs-warning-rgb), 0.2),
        0 0 36px rgba(var(--bs-warning-rgb), 0.14),
        inset 0 0 24px rgba(var(--bs-warning-rgb), 0.08);
    pointer-events: none;
    z-index: 980;
    animation: employee-context-frame-pulse 2.8s ease-in-out infinite;
}

@keyframes employee-context-frame-pulse {
    0%, 100% {
        border-color: rgba(var(--bs-warning-rgb), 0.66);
        box-shadow:
            0 0 0 1px rgba(var(--bs-warning-rgb), 0.18),
            0 0 28px rgba(var(--bs-warning-rgb), 0.12),
            inset 0 0 18px rgba(var(--bs-warning-rgb), 0.06);
    }
    50% {
        border-color: rgba(var(--bs-warning-rgb), 0.86);
        box-shadow:
            0 0 0 1px rgba(var(--bs-warning-rgb), 0.26),
            0 0 48px rgba(var(--bs-warning-rgb), 0.18),
            inset 0 0 28px rgba(var(--bs-warning-rgb), 0.1);
    }
}

.employee-context-banner__inner {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(var(--bs-warning-rgb), 0.45);
    background: linear-gradient(135deg, rgba(var(--bs-warning-rgb), 0.16) 0%, rgba(var(--bs-warning-rgb), 0.08) 100%);
    box-shadow: var(--shadow-sm);
    backdrop-filter: blur(8px);
}

.employee-context-banner__icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 999px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--bs-warning-rgb), 0.18);
    color: var(--bs-warning-text-emphasis, var(--gray-900));
    font-size: 1.1rem;
}

.employee-context-banner__content {
    min-width: 0;
}

.employee-context-banner__scope {
    display: inline-flex;
    align-items: center;
    margin-bottom: 0.35rem;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    background: rgba(var(--bs-body-color-rgb), 0.08);
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.employee-context-banner__title {
    font-size: var(--font-size-base);
    font-weight: 700;
    color: var(--color-text);
}

.employee-context-banner__employee {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.25rem;
    color: var(--color-text);
}

.employee-context-banner__label,
.employee-context-banner__hint {
    color: var(--color-text-muted);
}

.employee-context-banner__hint {
    margin-top: 0.25rem;
    font-size: var(--font-size-sm);
}

[data-theme="dark"] .employee-context-banner__inner {
    border-color: rgba(245, 158, 11, 0.45);
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.18) 0%, rgba(245, 158, 11, 0.08) 100%);
}

[data-theme="dark"] .employee-context-banner__frame {
    border-color: rgba(245, 158, 11, 0.8);
    box-shadow:
        0 0 0 1px rgba(245, 158, 11, 0.24),
        0 0 42px rgba(245, 158, 11, 0.18),
        inset 0 0 24px rgba(245, 158, 11, 0.1);
}

[data-theme="dark"] .employee-context-banner__icon {
    background: rgba(245, 158, 11, 0.22);
    color: var(--white);
}

/* === Work Status: Availability mini calendar (Who's working quick view) === */
.availability-mini-cal {
    min-width: 260px;
    max-width: 320px;
}

.availability-mini-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
}

.availability-mini-cal-weekday {
    font-size: 0.75rem;
    text-align: center;
    padding: 2px 0;
}

.availability-mini-cal-cell {
    position: relative;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 8px;
    padding: 6px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    line-height: 1;
    background: rgba(255, 255, 255, 0.6);
}

[data-bs-theme="dark"] .availability-mini-cal-cell,
[data-theme="dark"] .availability-mini-cal-cell {
    border-color: rgba(255, 255, 255, 0.18);
    background: rgba(0, 0, 0, 0.25);
}

.availability-mini-cal-empty {
    border-color: transparent;
    background: transparent;
}

.availability-mini-cal-nonwork {
    background: rgba(108, 117, 125, 0.12);
}

[data-bs-theme="dark"] .availability-mini-cal-nonwork,
[data-theme="dark"] .availability-mini-cal-nonwork {
    background: rgba(108, 117, 125, 0.20);
}

/* Day status backgrounds (tints). Multiple statuses use inline linear-gradient background-image. */
.availability-status-work {
    background-color: rgba(25, 135, 84, 0.18);
}

.availability-status-leave {
    background-color: rgba(13, 202, 240, 0.22);
}

.availability-status-travel {
    background-color: rgba(13, 110, 253, 0.18);
}

.availability-legend-swatch {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 4px;
    border: 1px solid rgba(0,0,0,0.12);
}

[data-bs-theme="dark"] .availability-legend-swatch,
[data-theme="dark"] .availability-legend-swatch {
    border-color: rgba(255,255,255,0.18);
}

.availability-mini-cal-today {
    border-width: 2px;
    border-color: var(--hbh-primary, #0d6efd);
}

.availability-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    vertical-align: middle;
}

.availability-daynum {
    font-size: 0.8rem;
    font-weight: 600;
}

/* ===== NAVIGO3 LINK BUTTON ===== */
.tt-navigo3-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #3e3e3e;
    border-radius: 999px;
    padding: 2px 8px;
    vertical-align: middle;
    text-decoration: none;
    transition: opacity 0.2s, box-shadow 0.2s;
    line-height: 1;
}

.tt-navigo3-btn img {
    height: 12px;
    display: block;
}

.tt-navigo3-btn:hover {
    opacity: 0.85;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

/* ===== TIME PICKER (slider + quick-adjust) ===== */
.time-picker-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(3px);
    animation: tp-fadein 0.25s ease;
}

@keyframes tp-fadein {
    from { opacity: 0; }
    to { opacity: 1; }
}

.time-picker-container {
    background: var(--bs-body-bg, #fff);
    border-radius: 20px;
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.28);
    padding: 24px 28px 20px;
    min-width: 320px;
    max-width: 400px;
    width: 92vw;
    text-align: center;
    animation: tp-slidein 0.3s cubic-bezier(.22,.61,.36,1);
}

@keyframes tp-slidein {
    from { transform: translateY(24px) scale(0.97); opacity: 0; }
    to { transform: translateY(0) scale(1); opacity: 1; }
}

/* Header */
.time-picker-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.time-picker-title {
    font-weight: 600;
    font-size: 1rem;
    color: var(--bs-body-color, #333);
}

/* Countdown — large circular timer with ring animation */
.time-picker-countdown {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--bs-secondary-bg, #e9ecef);
    color: var(--bs-secondary-color, #6c757d);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: 700;
    position: relative;
    transition: background 0.3s, color 0.3s;
    /* ring animation: a shrinking border as countdown ticks */
    box-shadow: inset 0 0 0 3px var(--bs-border-color, #dee2e6);
}

.time-picker-countdown .tp-countdown-number {
    position: relative;
    z-index: 1;
}

.time-picker-countdown.active {
    background: var(--bs-primary, #0d6efd);
    color: var(--color-text-on-primary);
    box-shadow: inset 0 0 0 3px var(--bs-primary, #0d6efd);
    font-size: 0.85rem;
}

/* Big time display with +/- buttons */
.tp-time-display {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-bottom: 2px;
}

.tp-time-value {
    font-size: 3rem;
    font-weight: 700;
    color: var(--bs-primary, #0d6efd);
    letter-spacing: 2px;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
    min-width: 150px;
    transition: color 0.2s;
}

.tp-fine-btn {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 2px solid var(--bs-border-color, #dee2e6);
    background: var(--bs-tertiary-bg, #f8f9fa);
    color: var(--bs-body-color, #333);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s ease;
    font-size: 1.15rem;
    -webkit-tap-highlight-color: transparent;
}

.tp-fine-btn:hover:not(:disabled) {
    background: var(--bs-primary, #0d6efd);
    border-color: var(--bs-primary, #0d6efd);
    color: var(--color-text-on-primary);
    transform: scale(1.1);
}

.tp-fine-btn:active:not(:disabled) {
    transform: scale(0.93);
}

.tp-fine-btn:disabled {
    opacity: 0.2;
    cursor: not-allowed;
}

/* Offset label */
.tp-offset-label {
    font-size: 0.85rem;
    color: var(--bs-secondary-color, #6c757d);
    margin-bottom: 14px;
    font-weight: 500;
    min-height: 1.3em;
    transition: color 0.2s;
}

/* ---- Slider section (primary gesture) ---- */
.tp-slider-section {
    margin-bottom: 14px;
    padding: 0 4px;
}

.tp-slider-section.tp-slider-disabled {
    opacity: 0.3;
    pointer-events: none;
}

.tp-slider-labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--bs-secondary-color, #6c757d);
    margin-bottom: 6px;
    padding: 0 2px;
}

.tp-slider-hint {
    font-size: 0.72rem;
    color: var(--bs-secondary-color, #adb5bd);
    margin-top: 6px;
}

/* Range slider */
.tp-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 14px;
    border-radius: 7px;
    outline: none;
    cursor: pointer;
    margin: 0;
    background: linear-gradient(
        to right,
        var(--bs-primary, #0d6efd) 0%,
        var(--bs-primary, #0d6efd) var(--tp-fill, 100%),
        var(--bs-secondary-bg, #e9ecef) var(--tp-fill, 100%),
        var(--bs-secondary-bg, #e9ecef) 100%
    );
    transition: background 0.05s;
    touch-action: none;
}

.tp-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--bs-primary, #0d6efd);
    border: 3px solid #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
    cursor: grab;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.tp-slider::-webkit-slider-thumb:hover {
    transform: scale(1.15);
    box-shadow: 0 3px 14px rgba(13, 110, 253, 0.4);
}

.tp-slider::-webkit-slider-thumb:active {
    cursor: grabbing;
    transform: scale(1.25);
    box-shadow: 0 4px 18px rgba(13, 110, 253, 0.5);
}

.tp-slider::-moz-range-thumb {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--bs-primary, #0d6efd);
    border: 3px solid #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
    cursor: grab;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.tp-slider::-moz-range-thumb:hover {
    transform: scale(1.15);
    box-shadow: 0 3px 14px rgba(13, 110, 253, 0.4);
}

.tp-slider::-moz-range-thumb:active {
    cursor: grabbing;
    transform: scale(1.25);
}

.tp-slider::-moz-range-track {
    height: 14px;
    border-radius: 7px;
    background: transparent;
}

.tp-slider:disabled {
    cursor: not-allowed;
    opacity: 0.25;
}

/* ---- Quick-adjust pills ---- */
.tp-quick-row {
    display: flex;
    gap: 6px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.tp-quick-btn {
    padding: 7px 14px;
    border-radius: 20px;
    border: 1.5px solid var(--bs-border-color, #dee2e6);
    background: var(--bs-tertiary-bg, #f8f9fa);
    color: var(--bs-body-color, #333);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.tp-quick-btn:hover:not(:disabled) {
    background: var(--bs-primary-bg-subtle, rgba(13, 110, 253, 0.12));
    border-color: var(--bs-primary, #0d6efd);
    color: var(--bs-primary, #0d6efd);
}

.tp-quick-btn:active:not(:disabled) {
    background: var(--bs-primary, #0d6efd);
    color: var(--color-text-on-primary);
    border-color: var(--bs-primary, #0d6efd);
}

.tp-quick-btn:disabled {
    opacity: 0.18;
    cursor: not-allowed;
}

.tp-extra-toggle {
    margin-bottom: 12px;
    text-align: left;
}

.tp-extra-toggle .form-text {
    margin-left: 2.25rem;
}

/* ---- Info banner ---- */
.tp-info-banner {
    font-size: 0.72rem;
    color: var(--bs-secondary-color, #6c757d);
    background: var(--bs-info-bg-subtle, rgba(13, 202, 240, 0.08));
    border: 1px solid var(--bs-info-border-subtle, rgba(13, 202, 240, 0.2));
    border-radius: 10px;
    padding: 10px 14px;
    margin-bottom: 14px;
    line-height: 1.45;
    text-align: left;
    transition: all 0.3s ease;
    max-height: 120px;
    overflow: hidden;
}

.tp-info-banner.tp-info-warning {
    background: var(--bs-warning-bg-subtle, rgba(255, 193, 7, 0.1));
    border-color: var(--bs-warning-border-subtle, rgba(255, 193, 7, 0.3));
    color: var(--bs-warning-text-emphasis, #664d03);
}

.tp-info-banner.tp-info-collapsed {
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    margin-bottom: 6px;
    opacity: 0;
    border-color: transparent;
}

/* ---- Action buttons ---- */
.time-picker-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.time-picker-actions .btn {
    min-width: 110px;
    border-radius: 10px;
    font-weight: 500;
}

/* ============================================================
   Employee Profile Page (.emp-profile-*)
   All values use design tokens. Dark mode via [data-theme="dark"].
   ============================================================ */

/* --- Hero Header --- */
.emp-profile-header {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: var(--space-6);
    margin-bottom: var(--space-5);
}

.emp-profile-header .emp-profile-top {
    display: flex;
    align-items: flex-start;
    gap: var(--space-5);
    flex-wrap: wrap;
}

.emp-profile-avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    border: 2px solid var(--color-border);
    object-fit: cover;
    flex-shrink: 0;
    background: var(--color-surface-alt);
}

.emp-profile-avatar-wrap {
    position: relative;
    flex-shrink: 0;
}

.emp-profile-avatar-overlay {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--color-overlay-strong);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity var(--transition-fast);
    cursor: pointer;
    color: var(--color-text-on-primary);
    font-size: var(--font-size-lg);
}

.emp-profile-avatar-wrap:hover .emp-profile-avatar-overlay {
    opacity: 1;
}

.emp-profile-name {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: var(--color-text);
    margin: 0;
    line-height: 1.3;
}

.emp-profile-subtitle {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    margin-top: var(--space-1);
}

.emp-profile-meta {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
    margin-top: var(--space-2);
}

.emp-profile-actions {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
    margin-top: var(--space-4);
}

/* --- Completeness Chip --- */
.emp-profile-completeness {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    background: var(--color-surface-alt);
    border-radius: var(--radius-2xl);
    padding: var(--space-1) var(--space-3);
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--color-text);
}

.emp-profile-completeness .progress {
    width: 60px;
    height: 6px;
    margin: 0;
    background: var(--color-border);
    border-radius: var(--radius-sm);
}

.emp-profile-completeness .progress-bar {
    border-radius: var(--radius-sm);
}

.emp-profile-completeness-detail {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    margin-top: var(--space-1);
}

/* --- Tab Navigation --- */
.emp-profile-tabs {
    border-bottom: 2px solid var(--color-border);
    background: var(--color-bg);
    padding: 0;
    margin-bottom: var(--space-5);
    position: sticky;
    /* top 0, not a navbar offset: the navbar is caged inside header.hbh-header and never
       actually sticks, so any positive offset leaves a see-through strip above the tabs. */
    top: 0;
    z-index: 10;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.emp-profile-tabs::-webkit-scrollbar {
    display: none;
}

.emp-profile-tabs .nav {
    display: flex;
    flex-wrap: nowrap;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.emp-profile-tabs .nav-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    font-weight: 500;
    text-decoration: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    background: none;
    white-space: nowrap;
    transition: color var(--transition-fast), border-color var(--transition-fast);
}

.emp-profile-tabs .nav-link:hover {
    color: var(--color-text);
}

.emp-profile-tabs .nav-link.active {
    color: var(--hbh-primary);
    border-bottom-color: var(--hbh-primary);
}

.emp-profile-tabs .nav-link i {
    font-size: var(--font-size-base);
}

/* --- Stat Row --- */
.emp-profile-stat-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--space-3);
    margin-bottom: var(--space-5);
}

/* --- Info Grid --- */
.emp-profile-info-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3) var(--space-6);
}

.emp-profile-info-grid .info-item label {
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--color-text-muted);
    margin-bottom: var(--space-1);
}

.emp-profile-info-grid .info-item > div {
    font-size: var(--font-size-sm);
    color: var(--color-text);
}

/* --- Section Card (used in all tabs) --- */
.emp-profile-section {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-5);
    margin-bottom: var(--space-4);
}

.emp-profile-section-title {
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: var(--space-4);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.emp-profile-section-title i {
    color: var(--hbh-primary);
}

/* --- Contract Timeline improvements --- */
.emp-profile-timeline .timeline-bar {
    border-radius: var(--radius-sm);
    transition: opacity var(--transition-fast);
}

.emp-profile-timeline .timeline-bar:hover {
    opacity: 0.85;
}

/* --- Empty State (within profile) --- */
.emp-profile-empty {
    text-align: center;
    padding: var(--space-8) var(--space-4);
    color: var(--color-text-muted);
}

.emp-profile-empty i {
    font-size: var(--font-size-4xl);
    margin-bottom: var(--space-3);
    opacity: 0.4;
}

.emp-profile-empty p {
    font-size: var(--font-size-sm);
    margin: 0;
}

/* --- Upload Area --- */
.emp-profile-upload-area {
    border: 2px dashed var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-6);
    text-align: center;
    color: var(--color-text-muted);
    transition: border-color var(--transition-fast), background var(--transition-fast);
    cursor: pointer;
}

.emp-profile-upload-area:hover {
    border-color: var(--hbh-primary);
    background: var(--color-surface-alt);
}

/* --- Dark Mode Overrides --- */
[data-theme="dark"] .emp-profile-header {
    background: var(--color-surface);
    border-color: var(--color-border);
    box-shadow: var(--shadow-md);
}

[data-theme="dark"] .emp-profile-tabs {
    background: var(--color-bg);
    border-color: var(--color-border);
}

[data-theme="dark"] .emp-profile-tabs .nav-link.active {
    color: var(--hbh-accent);
    border-bottom-color: var(--hbh-accent);
}

[data-theme="dark"] .emp-profile-completeness {
    background: var(--color-surface-muted);
    color: var(--color-text);
}

[data-theme="dark"] .emp-profile-section {
    background: var(--color-surface);
    border-color: var(--color-border);
}

[data-theme="dark"] .emp-profile-upload-area {
    border-color: var(--color-border);
}

[data-theme="dark"] .emp-profile-upload-area:hover {
    border-color: var(--hbh-accent);
    background: var(--color-surface-alt);
}

/* --- Responsive --- */
@media (max-width: 768px) {
    .emp-profile-header .emp-profile-top {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .emp-profile-name {
        font-size: var(--font-size-xl);
    }

    .emp-profile-actions {
        justify-content: center;
    }

    .emp-profile-info-grid {
        grid-template-columns: 1fr;
    }

    .emp-profile-stat-row {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 480px) {
    .emp-profile-stat-row {
        grid-template-columns: 1fr;
    }

    .emp-profile-header {
        padding: var(--space-4);
    }
}

/* ================================================
   HR Form Styles — shared across Create/Edit forms
   ================================================ */

/* Required fields styling — red border, blue focus, green valid */
input[required],
select[required] {
    border-color: #dc3545 !important;
    border-width: 1px;
}

input[required]:focus,
select[required]:focus {
    border-color: #0d6efd !important;
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25) !important;
}

input[required]:valid,
select[required]:valid {
    border-color: #28a745 !important;
}

/* Section header accent underline */
.text-primary.border-bottom {
    position: relative;
    padding-bottom: 0.75rem;
}

.text-primary.border-bottom::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 3rem;
    height: 3px;
    background-color: var(--bs-primary);
    border-radius: 1.5px;
}

/* Multi-card form spacing */
.container > .row > .col-lg-8 > form > .card {
    transition: box-shadow 0.15s ease-in-out;
}

.container > .row > .col-lg-8 > form > .card:hover {
    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.08);
}

/* Form focus enhancements */
.form-control:focus,
.form-select:focus {
    border-color: #86b7fe;
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

/* Dark mode support for HR forms */
[data-bs-theme="dark"] input[required],
[data-theme="dark"] input[required],
[data-bs-theme="dark"] select[required],
[data-theme="dark"] select[required] {
    border-color: var(--validation-invalid-border) !important;
}

[data-bs-theme="dark"] input[required]:valid,
[data-theme="dark"] input[required]:valid,
[data-bs-theme="dark"] select[required]:valid,
[data-theme="dark"] select[required]:valid {
    border-color: var(--validation-valid-border) !important;
}

[data-bs-theme="dark"] .text-primary.border-bottom::after,
[data-theme="dark"] .text-primary.border-bottom::after {
    background-color: var(--hbh-primary);
}

/* =====================================================
   Document Preview — Markdown Rendering Styles
   ===================================================== */
.document-preview {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--color-text);
}

.document-preview h1 {
    font-size: 1.75rem;
    font-weight: 700;
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
    padding-bottom: 0.4rem;
    border-bottom: 2px solid var(--color-border);
}

.document-preview h2 {
    font-size: 1.4rem;
    font-weight: 600;
    margin-top: 1.25rem;
    margin-bottom: 0.5rem;
    padding-bottom: 0.3rem;
    border-bottom: 1px solid #e9ecef;
}

.document-preview h3 {
    font-size: 1.15rem;
    font-weight: 600;
    margin-top: 1rem;
    margin-bottom: 0.5rem;
}

.document-preview h4, .document-preview h5, .document-preview h6 {
    font-size: 1rem;
    font-weight: 600;
    margin-top: 0.75rem;
    margin-bottom: 0.4rem;
}

.document-preview p {
    margin-bottom: 0.75rem;
}

.document-preview ul, .document-preview ol {
    margin-bottom: 0.75rem;
    padding-left: 1.5rem;
}

.document-preview li {
    margin-bottom: 0.25rem;
}

.document-preview table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1rem;
}

.document-preview table th,
.document-preview table td {
    padding: 0.5rem 0.75rem;
    border: 1px solid #dee2e6;
    text-align: left;
}

.document-preview table th {
    background-color: #f8f9fa;
    font-weight: 600;
}

.document-preview table tr:nth-child(even) {
    background-color: #fafbfc;
}

.document-preview blockquote {
    margin: 0.75rem 0;
    padding: 0.5rem 1rem;
    border-left: 4px solid #0d6efd;
    background-color: #f0f6ff;
    color: #333;
}

.document-preview code {
    font-size: 0.875em;
    padding: 0.15rem 0.35rem;
    border-radius: 3px;
    background-color: #f1f3f5;
    color: #d63384;
}

.document-preview pre {
    padding: 1rem;
    border-radius: 6px;
    background-color: #f8f9fa;
    border: 1px solid #e9ecef;
    overflow-x: auto;
    margin-bottom: 1rem;
}

.document-preview pre code {
    padding: 0;
    background: none;
    color: inherit;
}

.document-preview hr {
    margin: 1.5rem 0;
    border: none;
    border-top: 1px solid #dee2e6;
}

.document-preview strong {
    font-weight: 700;
}

.document-preview a {
    color: #0d6efd;
    text-decoration: underline;
}

/* Dark mode — document preview */
[data-bs-theme="dark"] .document-preview,
[data-theme="dark"] .document-preview {
    color: var(--color-text);
}

[data-bs-theme="dark"] .document-preview h1,
[data-theme="dark"] .document-preview h1,
[data-bs-theme="dark"] .document-preview h2,
[data-theme="dark"] .document-preview h2 {
    border-bottom-color: var(--color-border);
}

[data-bs-theme="dark"] .document-preview table th,
[data-theme="dark"] .document-preview table th {
    background-color: var(--color-surface-alt);
}

[data-bs-theme="dark"] .document-preview table th,
[data-theme="dark"] .document-preview table th,
[data-bs-theme="dark"] .document-preview table td,
[data-theme="dark"] .document-preview table td {
    border-color: var(--color-border);
}

[data-bs-theme="dark"] .document-preview table tr:nth-child(even),
[data-theme="dark"] .document-preview table tr:nth-child(even) {
    background-color: var(--color-surface-muted);
}

[data-bs-theme="dark"] .document-preview blockquote,
[data-theme="dark"] .document-preview blockquote {
    background-color: var(--color-surface-alt);
    border-left-color: var(--hbh-primary);
    color: var(--color-text);
}

[data-bs-theme="dark"] .document-preview code,
[data-theme="dark"] .document-preview code {
    background-color: var(--color-surface-alt);
    color: #e685b5;
}

[data-bs-theme="dark"] .document-preview pre,
[data-theme="dark"] .document-preview pre {
    background-color: var(--color-surface-alt);
    border-color: var(--color-border);
}

/* =================================
   Color Swatch Utility
   ================================= */

/* Applied to badges/elements using dynamic user-defined background colors.
   Currently these use inline style="background-color: ...; color: white;"
   The class is a hook for future contrast-aware text color logic. */
.color-swatch {
    display: inline-block;
    font-weight: 500;
}

.text-pre-line {
    white-space: pre-line;
}

/* =================================
   Logbook dictation widget
   ================================= */

/* Live mic-level meter shown while recording. */
.logbook-dictation-level {
    display: inline-block;
    width: 80px;
    height: 8px;
    background-color: var(--color-border, #dee2e6);
    overflow: hidden;
}

.logbook-dictation-level-bar {
    display: block;
    width: 0%;
    height: 100%;
    background-color: var(--bs-danger, #dc3545);
    transition: width 90ms linear;
}

/* Gentle pulse on the record button while a take is in progress. */
.logbook-dictation-pulse {
    animation: logbook-dictation-pulse 1.4s ease-in-out infinite;
}

@keyframes logbook-dictation-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.55; }
}

@media (prefers-reduced-motion: reduce) {
    .logbook-dictation-pulse {
        animation: none;
    }
    .logbook-dictation-level-bar {
        transition: none;
    }
}

/* ── Category colour / icon picker ───────────────────────────────────────────
   Shared by the IssueCategory Create/Edit form partial. Kept here (not inline)
   so both forms style identically and the rules survive a strict CSP. */
.hbh-color-picker {
    width: 3rem;
    height: 2.5rem;
    padding: 0.15rem;
    border: 1px solid var(--color-border, #ced4da);
    border-radius: 0.375rem;
    cursor: pointer;
    flex: 0 0 auto;
}
.hbh-icon-preview {
    font-size: 2rem;
    min-height: 3.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px dashed var(--color-border, #ced4da);
    border-radius: 0.375rem;
}
.hbh-icon-suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
}
.hbh-icon-option {
    width: 2.75rem;
    height: 2.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid var(--color-border, #ced4da);
    border-radius: 0.375rem;
    cursor: pointer;
    background: var(--color-surface, #fff);
    font-size: 1.2rem;
    transition: border-color 0.15s, background-color 0.15s;
}
.hbh-icon-option:hover,
.hbh-icon-option.selected {
    border-color: var(--color-link, #0d6efd);
    background-color: var(--color-surface-alt, #f1f3f5);
}

/* ===========================================================================
   Leave-type filter chips
   Shared toggle chips used to filter calendars/reports by leave type.
   Each chip is coloured by an inline --leave-color custom property.
   Used by: AccountantReports calendar + entries tabs.
   =========================================================================== */
.leave-type-filter {
    display: inline-flex;
    align-items: center;
    padding: 0.35em 0.65em;
    font-size: 0.8rem;
    font-weight: 500;
    border-radius: 0.375rem;
    cursor: pointer;
    user-select: none;
    transition: all 0.15s ease-in-out;
    border: 2px solid var(--leave-color);
}
.leave-type-filter.selected {
    background-color: var(--leave-color);
    color: white;
}
.leave-type-filter.deselected {
    background-color: transparent;
    color: var(--leave-color);
    border-style: dashed;
}
.leave-type-filter:hover {
    transform: scale(1.05);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}
.leave-type-indicator {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 0.35em;
    background-color: currentColor;
}
.leave-type-filter.selected .leave-type-indicator {
    background-color: white;
}
[data-bs-theme="dark"] .leave-type-filter.deselected {
    border-color: var(--leave-color);
    color: var(--leave-color);
}

/* ===========================================================================
   Hourly-paid (FTE 0 / CZ DPP-DPČ) row marker
   Explains why an accountant view shows a person with no leaves. Deliberately
   quiet: it must not compete with the amber conflict cell or the grey empty
   cell for attention.
   Used by: AccountantReports calendar, Leave accountant queue.
   =========================================================================== */
.hourly-badge {
    display: inline-block;
    margin-left: 0.25em;
    padding: 0 0.25em;
    border-radius: 2px;
    font-size: 0.65em;
    line-height: 1.5;
    vertical-align: middle;
    background-color: var(--bs-secondary-bg);
    color: var(--bs-secondary-color);
    border: 1px solid var(--bs-border-color);
    cursor: help;
}
.row-leaves-suppressed > td:first-child,
.row-leaves-suppressed > .td-employee {
    border-left: 3px solid var(--bs-secondary) !important;
}

/* ===========================================================================
   Chat / message thread
   Reusable conversation UI: a scrollable list of chat bubbles. The height is
   viewport-relative (not a fixed pixel value) so the thread stays usable on
   short phone screens instead of pushing the composer off-screen.
   Used by: Mailroom TaskDetail conversation panel.
   =========================================================================== */
.hbh-chat-thread {
    min-height: min(420px, 48vh);
    max-height: min(680px, 68vh);
    overflow-y: auto;
    overscroll-behavior: contain;
    background: color-mix(in srgb, var(--bs-secondary-bg) 45%, transparent);
}
.hbh-chat-bubble {
    max-width: min(82%, 760px);
    overflow-wrap: anywhere;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .06);
}
.hbh-chat-composer {
    position: sticky;
    bottom: 0;
    background: var(--bs-body-bg);
}
.hbh-chat-composer textarea {
    min-height: 42px;
    max-height: 160px;
    resize: none;
}
@media (max-width: 575.98px) {
    .hbh-chat-thread {
        min-height: 46vh;
        max-height: 62vh;
    }
    .hbh-chat-bubble {
        max-width: 94%;
    }
}

/* ===========================================================================
   Shared multi-select ("pick several") — _MultiSelect.cshtml + multi-select.js
   Searchable, chip-based, touch-friendly multi-picker used system-wide for
   choosing several employees / offices / divisions.
   =========================================================================== */
.hbh-ms-row {
    cursor: pointer;
    min-height: 2rem; /* touch-friendly hit target */
}
.hbh-ms-row:hover {
    background-color: var(--bs-secondary-bg, rgba(0, 0, 0, 0.05));
}
.hbh-multiselect .hbh-ms-chips:empty {
    display: none !important;
}
/* Shared employee-by-day leave grid (Accountant-style calendar presentation). */
.leave-chip {
    background: var(--bs-tertiary-bg);
    border: 1px solid var(--bs-border-color);
    color: var(--bs-body-color);
    border-radius: var(--bs-border-radius-lg);
    padding: .375rem .625rem;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-weight: 500;
}

.leave-chip .remove {
    border: 0;
    padding: 0;
    background: transparent;
    color: var(--bs-secondary-color);
    line-height: 1;
}

.leave-grid-legend-item {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .15rem .4rem;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-sm);
    font-size: .75rem;
}

.leave-grid-legend-dot {
    width: .65rem;
    height: .65rem;
    border-radius: 50%;
    background: var(--leave-color);
}

.leave-grid-legend-item.is-home-office {
    background: rgba(var(--bs-success-rgb), .16);
}

.leave-grid-legend-item.is-home-office .leave-grid-legend-dot {
    --leave-color: var(--bs-success);
}

.leave-day-grid-scroll {
    width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
}

.leave-day-grid {
    --leave-day-width: 29px;
    font-size: .7rem;
    border-collapse: separate;
    border-spacing: 0;
}

.leave-day-grid.is-compact-range {
    width: 100%;
    table-layout: fixed;
}

.leave-day-grid.is-wide-range {
    width: max-content;
    min-width: 100%;
    table-layout: fixed;
}

.leave-day-grid th,
.leave-day-grid td {
    padding: 2px !important;
    vertical-align: middle;
}

.leave-day-grid thead th {
    position: sticky;
    top: 0;
    z-index: 4;
    background: var(--bs-dark);
    color: #fff;
    font-weight: 500;
}

.leave-day-grid thead .month-header-row th {
    top: 0;
}

.leave-day-grid thead tr:nth-child(2) th {
    top: 25px;
}

.leave-day-grid .employee-col {
    width: 170px;
    min-width: 170px;
    max-width: 170px;
}

.leave-day-grid .sticky-col {
    position: sticky;
    left: 0;
    z-index: 3;
    background: var(--bs-body-bg);
    border-right: 2px solid var(--bs-border-color) !important;
}

.leave-day-grid thead .sticky-col {
    z-index: 6;
    background: var(--bs-dark);
}

.leave-day-grid tfoot .sticky-col {
    z-index: 5;
    background: var(--bs-warning-bg-subtle);
}

.leave-day-grid .day-col {
    width: var(--leave-day-width);
    min-width: var(--leave-day-width);
    overflow: hidden;
}

.leave-day-grid .day-number,
.leave-day-grid .day-name {
    display: block;
    line-height: 1.1;
}

.leave-day-grid .day-name {
    font-size: .55rem;
    opacity: .8;
}

.leave-day-grid .summary-col {
    width: 72px;
    min-width: 72px;
    white-space: normal;
    background: rgba(var(--bs-info-rgb), .08);
}

.leave-day-grid .employee-name,
.leave-day-grid .employee-meta {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.leave-day-grid .employee-name {
    font-weight: 600;
}

.leave-day-grid .employee-meta {
    color: var(--bs-secondary-color);
    font-size: .58rem;
}

.leave-day-grid .is-weekend {
    background: var(--bs-tertiary-bg) !important;
}

.leave-day-grid .is-holiday {
    background: var(--bs-danger-bg-subtle) !important;
}

.leave-day-grid td.is-home-office {
    background: rgba(var(--bs-success-rgb), .16) !important;
}

.leave-day-grid thead .is-weekend {
    background: var(--bs-secondary) !important;
}

.leave-day-grid thead .is-holiday {
    background: var(--bs-danger) !important;
}

.leave-day-grid td.has-leave {
    cursor: pointer;
}

.leave-day-grid td.has-leave:hover {
    box-shadow: inset 0 0 0 2px var(--bs-primary);
}

.leave-grid-badge {
    --leave-color: #6c757d;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 1px;
    max-width: 100%;
    margin: 1px 0;
    padding: 0 2px;
    overflow: hidden;
    border: 1px solid var(--leave-color);
    border-radius: 2px;
    background: var(--leave-color);
    color: #fff;
    font-size: .5rem;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.leave-grid-badge.is-pending {
    border-style: dashed;
    background: color-mix(in srgb, var(--leave-color) 28%, var(--bs-body-bg));
    color: var(--bs-body-color);
}

.leave-grid-badge.is-draft {
    border-style: dotted;
    background: color-mix(in srgb, var(--leave-color) 12%, var(--bs-body-bg));
    color: var(--bs-body-color);
    opacity: .8;
}

[data-bs-theme="dark"] .leave-day-grid td.is-home-office,
[data-bs-theme="dark"] .leave-grid-legend-item.is-home-office {
    background: rgba(var(--bs-success-rgb), .28) !important;
}

.leave-grid-detail-item {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .5rem 0;
    border-bottom: 1px solid var(--bs-border-color-translucent);
}

.leave-grid-detail-item:last-child {
    border-bottom: 0;
}

.leave-grid-detail-item .leave-grid-badge {
    min-width: 3rem;
    padding: .15rem .35rem;
    font-size: .72rem;
}

.leave-day-grid tfoot td {
    background: var(--bs-warning-bg-subtle);
    border-top: 2px solid var(--bs-border-color);
}

@media (max-width: 1199.98px) {
    .leave-day-grid.is-compact-range {
        width: max-content;
        min-width: 100%;
    }
}