/* Custom CSS for Dojo Zé - Bootstrap 5 Overrides and Extensions */
/* Brand Identity: https://docs.dojoze.com/brand-identity */

/* ==========================================================================
   CSS Custom Properties (Brand Colors)
   ========================================================================== */

:root {
  /* Brand Identity Colors */
  --color-brand: #dc2626;           /* Warm Crimson - logo, wordmark, marketing */
  --color-brand-light: #ef4444;     /* Crimson Light - brand hover states */

  /* UI Accent Colors (Interactive Elements) */
  --color-ui: #f97316;              /* UI Orange - buttons, links, CTAs */
  --color-ui-hover: #ea580c;        /* Orange Hover - pressed states */
  --color-ui-light: #fdba74;        /* Orange Light - highlights, badges */

  /* Dark Theme Neutrals */
  --color-dark-page: #0f172a;       /* Slate 900 - page background */
  --color-dark-card: #1e293b;       /* Slate 800 - cards, surfaces */
  --color-dark-hover: #334155;      /* Slate 700 - borders, hover */
  --color-dark-text: #f1f5f9;       /* Slate 50 - primary text */
  --color-dark-muted: #94a3b8;      /* Slate 400 - muted text */

  /* Light Theme Neutrals */
  --color-light-page: #ffffff;      /* White - page background */
  --color-light-section: #f8fafc;   /* Slate 50 - section backgrounds */
  --color-light-card: #f1f5f9;      /* Slate 100 - cards, inputs */
  --color-light-hover: #e2e8f0;     /* Slate 200 - borders, hover */
  --color-light-text: #0f172a;      /* Slate 900 - primary text */
  --color-light-muted: #64748b;     /* Slate 500 - muted text */

  /* Semantic Colors */
  --color-error: #ef4444;
  --color-success: #10b981;
  --color-warning: #f59e0b;
  --color-info: #3b82f6;

  /* Legacy Aliases (for backward compatibility during transition) */
  --dojo-primary: var(--color-ui);
  --dojo-secondary: var(--color-dark-card);
  --dojo-success: var(--color-success);
  --dojo-danger: var(--color-error);
  --dojo-warning: var(--color-warning);
  --dojo-info: var(--color-info);
}

/* ==========================================================================
   Typography
   ========================================================================== */

/* Logo/Wordmark font */
:root {
  --font-logo: 'Ubuntu', system-ui, sans-serif;
}

body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Wordmark Typography */
.wordmark {
  font-family: var(--font-logo);
  font-weight: 700;
  letter-spacing: -0.025em;
}

.wordmark-ze {
  color: var(--color-brand);
}

/* Responsive typography utilities */
@media (min-width: 768px) {
  .h4-md {
    font-size: 1.5rem !important;
  }
}

/* ==========================================================================
   Brand Color Utilities
   ========================================================================== */

/* Brand Crimson (for logo, headers, marketing) */
.text-brand {
  color: var(--color-brand) !important;
}

.bg-brand {
  background-color: var(--color-brand) !important;
}

.border-brand {
  border-color: var(--color-brand) !important;
}

/* UI Orange (for interactive elements) */
.text-ui {
  color: var(--color-ui) !important;
}

.bg-ui {
  background-color: var(--color-ui) !important;
}

.border-ui {
  border-color: var(--color-ui) !important;
}

/* UI Orange Light */
.text-ui-light {
  color: var(--color-ui-light) !important;
}

.bg-ui-light {
  background-color: var(--color-ui-light) !important;
}

/* ==========================================================================
   Chart Palette (for data visualization / KPI cards)
   Per brand guidelines section 8.7 - avoids brand red/orange
   ========================================================================== */

.bg-chart-teal {
  background-color: #14b8a6 !important;
}

.bg-chart-blue {
  background-color: #3b82f6 !important;
}

.bg-chart-violet {
  background-color: #8b5cf6 !important;
}

.bg-chart-pink {
  background-color: #ec4899 !important;
}

.bg-chart-amber {
  background-color: #f59e0b !important;
}

.bg-chart-lime {
  background-color: #84cc16 !important;
}

.bg-chart-cyan {
  background-color: #06b6d4 !important;
}

.bg-chart-rose {
  background-color: #f43f5e !important;
}

/* ==========================================================================
   Button Overrides
   ========================================================================== */

/* Primary Button - UI Orange */
.btn-primary {
  --bs-btn-bg: var(--color-ui);
  --bs-btn-border-color: var(--color-ui);
  --bs-btn-hover-bg: var(--color-ui-hover);
  --bs-btn-hover-border-color: var(--color-ui-hover);
  --bs-btn-active-bg: var(--color-ui-hover);
  --bs-btn-active-border-color: var(--color-ui-hover);
  --bs-btn-disabled-bg: var(--color-ui);
  --bs-btn-disabled-border-color: var(--color-ui);
}

.btn-outline-primary {
  --bs-btn-color: var(--color-ui);
  --bs-btn-border-color: var(--color-ui);
  --bs-btn-hover-bg: var(--color-ui);
  --bs-btn-hover-border-color: var(--color-ui);
  --bs-btn-active-bg: var(--color-ui-hover);
  --bs-btn-active-border-color: var(--color-ui-hover);
}

/* Brand Button - Warm Crimson (for marketing/brand moments) */
.btn-brand {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--color-brand);
  --bs-btn-border-color: var(--color-brand);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--color-brand-light);
  --bs-btn-hover-border-color: var(--color-brand-light);
  --bs-btn-active-bg: var(--color-brand);
  --bs-btn-active-border-color: var(--color-brand);
}

.btn-outline-brand {
  --bs-btn-color: var(--color-brand);
  --bs-btn-border-color: var(--color-brand);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--color-brand);
  --bs-btn-hover-border-color: var(--color-brand);
}

/* ==========================================================================
   Link Styles
   ========================================================================== */

a {
  color: var(--color-ui);
}

a:hover {
  color: var(--color-ui-hover);
}

/* Reset link color in nav and buttons */
.nav-link,
.btn,
.dropdown-item {
  color: inherit;
}

/* ==========================================================================
   Form Control Focus States
   ========================================================================== */

.form-control:focus,
.form-select:focus {
  border-color: var(--color-ui);
  box-shadow: 0 0 0 0.25rem rgba(249, 115, 22, 0.25);
}

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

.form-check-input:focus {
  border-color: var(--color-ui);
  box-shadow: 0 0 0 0.25rem rgba(249, 115, 22, 0.25);
}

/* ==========================================================================
   Slate Color Utilities
   ========================================================================== */

/* Text colors */
.text-slate-900 {
  color: #0f172a !important;
}

.text-slate-800 {
  color: #1e293b !important;
}

.text-slate-700 {
  color: #334155 !important;
}

.text-slate-600 {
  color: #475569 !important;
}

.text-slate-500 {
  color: #64748b !important;
}

.text-slate-400 {
  color: #94a3b8 !important;
}

/* Background colors */
.bg-slate-900 {
  background-color: #0f172a !important;
}

.bg-slate-800 {
  background-color: #1e293b !important;
}

.bg-slate-100 {
  background-color: #f1f5f9 !important;
}

.bg-slate-50 {
  background-color: #f8fafc !important;
}

/* Border colors */
.border-slate-200 {
  border-color: #e2e8f0 !important;
}

.border-slate-300 {
  border-color: #cbd5e1 !important;
}

/* ==========================================================================
   UI Orange Tints (for active/selected states)
   ========================================================================== */

.bg-orange-50 {
  background-color: #fff7ed !important;
}

.bg-orange-100 {
  background-color: #ffedd5 !important;
}

.text-orange-600 {
  color: var(--color-ui-hover) !important;
}

.text-orange-500 {
  color: var(--color-ui) !important;
}

.border-orange-200 {
  border-color: #fed7aa !important;
}

/* ==========================================================================
   Layout Utilities
   ========================================================================== */

.rounded-2xl {
  border-radius: 1rem !important;
}

.rounded-xl {
  border-radius: 0.75rem !important;
}

/* Shadow utilities */
.shadow-sm {
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05) !important;
}

/* ==========================================================================
   Sidebar Styles
   ========================================================================== */

.sidebar {
  position: sticky;
  top: 0;
  height: calc(100vh - 56px);
  padding-top: 0.5rem;
  overflow-x: hidden;
  overflow-y: auto;
}

/* Mobile sidebar behavior - slide down from top */
@media (max-width: 767.98px) {
  #sidebarMenu {
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    transform: none !important;
    height: auto !important;
    border-bottom: 1px solid #dee2e6;
  }

  #sidebarMenu .position-sticky {
    position: static !important;
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
  }

  /* Use Bootstrap collapse for slide down effect */
  #sidebarMenu:not(.show) {
    display: none;
  }

  #sidebarMenu.collapsing {
    transition: height 0.2s ease;
  }

  /* Full width main content on mobile */
  main.col-md-9 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

.sidebar .nav-link {
  font-weight: 500;
  color: #333;
  padding: 0.5rem 1rem;
  margin: 0.125rem 0.5rem;
  border-radius: 0.375rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.sidebar .nav-link:hover {
  color: var(--color-ui);
  background-color: #f8f9fa;
}

.sidebar .nav-link.active {
  color: var(--color-ui);
  background-color: #fff7ed; /* orange-50 */
}

.sidebar-heading {
  font-size: 0.75rem;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.05em;
}

/* ==========================================================================
   Alpine.js Support
   ========================================================================== */

[x-cloak] {
  display: none !important;
}

/* ==========================================================================
   Hover Utilities
   ========================================================================== */

.hover-text-dark:hover {
  color: #212529 !important;
}

.hover-bg-light:hover {
  background-color: #f8f9fa !important;
}

.hover-shadow {
  transition: all 0.2s ease-in-out;
}

.hover-shadow:hover {
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
  border-color: var(--color-ui) !important;
}

/* ==========================================================================
   Cursor Utilities
   ========================================================================== */

.cursor-pointer {
  cursor: pointer;
}

/* ==========================================================================
   Dashboard Card Gradients (Brand-Compliant)
   ========================================================================== */

/* Primary gradient - UI Orange */
.gradient-primary {
  background: linear-gradient(135deg, #f97316 0%, #ea580c 100%) !important;
}

/* Brand gradient - Warm Crimson */
.gradient-brand {
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%) !important;
}

/* Success gradient */
.gradient-success {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
}

/* Info gradient */
.gradient-info {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
}

/* Warning gradient */
.gradient-warning {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
}

/* Neutral/Slate gradient */
.gradient-slate {
  background: linear-gradient(135deg, #334155 0%, #1e293b 100%) !important;
}

/* ==========================================================================
   Dark Theme App Styles
   Per brand guidelines: Dark theme for app dashboard, admin interfaces
   ========================================================================== */

/* App wrapper - applies dark theme to entire app */
.app-dark {
  background-color: var(--color-dark-page);
  color: var(--color-dark-text);
  min-height: 100vh;
}

/* Dark theme header */
.app-dark .navbar {
  background-color: var(--color-dark-card) !important;
  border-bottom: 1px solid var(--color-dark-hover);
}

.app-dark .navbar-brand {
  color: var(--color-dark-text) !important;
}

/* Dark theme sidebar */
.app-dark .sidebar {
  background-color: var(--color-dark-card);
  border-right: 1px solid var(--color-dark-hover);
}

.app-dark .sidebar .nav-link {
  color: var(--color-dark-muted);
}

.app-dark .sidebar .nav-link:hover {
  color: var(--color-dark-text);
  background-color: var(--color-dark-hover);
}

.app-dark .sidebar .nav-link.active {
  color: var(--color-ui);
  background-color: rgba(249, 115, 22, 0.15);
}

.app-dark .sidebar-heading {
  color: var(--color-dark-muted);
}

/* Dark theme cards */
.app-dark .card {
  background-color: var(--color-dark-card);
  border-color: var(--color-dark-hover);
  color: var(--color-dark-text);
}

.app-dark .card-header {
  background-color: var(--color-dark-card);
  border-bottom-color: var(--color-dark-hover);
}

.app-dark .card-footer {
  background-color: var(--color-dark-card);
  border-top-color: var(--color-dark-hover);
}

/* Dark theme text utilities */
.app-dark .text-muted {
  color: var(--color-dark-muted) !important;
}

.app-dark .text-dark {
  color: var(--color-dark-text) !important;
}

/* Dark theme backgrounds */
.app-dark .bg-light {
  background-color: var(--color-dark-hover) !important;
}

/* Only override bg-white when NOT used with opacity modifiers (for overlay icons on colored cards) */
.app-dark .bg-white:not(.bg-opacity-10):not(.bg-opacity-25):not(.bg-opacity-50):not(.bg-opacity-75) {
  background-color: var(--color-dark-card) !important;
}

/* Dark theme tables */
.app-dark .table {
  color: var(--color-dark-text);
  --bs-table-bg: var(--color-dark-card);
  --bs-table-striped-bg: var(--color-dark-hover);
  --bs-table-hover-bg: var(--color-dark-hover);
}

.app-dark .table-light {
  --bs-table-bg: var(--color-dark-hover);
  --bs-table-color: var(--color-dark-text);
}

.app-dark .table > :not(caption) > * > * {
  border-bottom-color: var(--color-dark-hover);
}

/* Dark theme form controls */
.app-dark .form-control,
.app-dark .form-select {
  background-color: var(--color-dark-page);
  border-color: var(--color-dark-hover);
  color: var(--color-dark-text);
}

.app-dark .form-control::placeholder {
  color: var(--color-dark-muted);
}

.app-dark .form-control:focus,
.app-dark .form-select:focus {
  background-color: var(--color-dark-page);
  border-color: var(--color-ui);
  color: var(--color-dark-text);
}

.app-dark .form-label {
  color: var(--color-dark-text);
}

.app-dark .input-group-text {
  background-color: var(--color-dark-hover);
  border-color: var(--color-dark-hover);
  color: var(--color-dark-muted);
}

/* Dark theme buttons - outline variants */
.app-dark .btn-outline-secondary {
  --bs-btn-color: var(--color-dark-muted);
  --bs-btn-border-color: var(--color-dark-hover);
  --bs-btn-hover-bg: var(--color-dark-hover);
  --bs-btn-hover-border-color: var(--color-dark-hover);
  --bs-btn-hover-color: var(--color-dark-text);
}

.app-dark .btn-outline-primary {
  --bs-btn-color: var(--color-ui);
  --bs-btn-hover-color: #fff;
}

/* Dark theme dropdowns */
.app-dark .dropdown-menu {
  background-color: var(--color-dark-card);
  border-color: var(--color-dark-hover);
}

.app-dark .dropdown-item {
  color: var(--color-dark-text);
}

.app-dark .dropdown-item:hover,
.app-dark .dropdown-item:focus {
  background-color: var(--color-dark-hover);
  color: var(--color-dark-text);
}

.app-dark .dropdown-divider {
  border-color: var(--color-dark-hover);
}

/* Dark theme alerts */
.app-dark .alert-secondary {
  background-color: var(--color-dark-hover);
  border-color: var(--color-dark-hover);
  color: var(--color-dark-text);
}

/* Dark theme badges */
.app-dark .badge.bg-secondary {
  background-color: var(--color-dark-hover) !important;
  color: var(--color-dark-muted);
}

/* Dark theme borders */
.app-dark .border {
  border-color: var(--color-dark-hover) !important;
}

.app-dark .border-bottom {
  border-bottom-color: var(--color-dark-hover) !important;
}

.app-dark .border-top {
  border-top-color: var(--color-dark-hover) !important;
}

/* Dark theme list groups */
.app-dark .list-group-item {
  background-color: var(--color-dark-card);
  border-color: var(--color-dark-hover);
  color: var(--color-dark-text);
}

/* Dark theme modals */
.app-dark .modal-content {
  background-color: var(--color-dark-card);
  border-color: var(--color-dark-hover);
  color: var(--color-dark-text);
}

.app-dark .modal-header {
  border-bottom-color: var(--color-dark-hover);
}

.app-dark .modal-footer {
  border-top-color: var(--color-dark-hover);
}

.app-dark .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
}

/* Dark theme nav tabs */
.app-dark .nav-tabs {
  border-bottom-color: var(--color-dark-hover);
}

.app-dark .nav-tabs .nav-link {
  color: var(--color-dark-muted);
}

.app-dark .nav-tabs .nav-link:hover {
  border-color: var(--color-dark-hover);
  color: var(--color-dark-text);
}

.app-dark .nav-tabs .nav-link.active {
  background-color: var(--color-dark-card);
  border-color: var(--color-dark-hover) var(--color-dark-hover) var(--color-dark-card);
  color: var(--color-dark-text);
}

/* Dark theme mobile sidebar */
@media (max-width: 767.98px) {
  .app-dark #sidebarMenu {
    border-bottom-color: var(--color-dark-hover);
  }
}

/* Wordmark in dark theme - "Dojo" should be light */
.app-dark .wordmark .text-slate-900,
.app-dark .wordmark .text-slate-600 {
  color: var(--color-dark-text) !important;
}

/* Dark theme scrollbar (webkit browsers) */
.app-dark ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.app-dark ::-webkit-scrollbar-track {
  background: var(--color-dark-page);
}

.app-dark ::-webkit-scrollbar-thumb {
  background: var(--color-dark-hover);
  border-radius: 4px;
}

.app-dark ::-webkit-scrollbar-thumb:hover {
  background: var(--color-dark-muted);
}

/* Dark theme stat card fixes */
.app-dark .card.bg-primary,
.app-dark .card.bg-success,
.app-dark .card.bg-warning,
.app-dark .card.bg-info,
.app-dark .card.bg-secondary,
.app-dark .card.bg-danger {
  color: #fff;
}

/* Avatar/icon backgrounds in dark theme */
.app-dark .bg-primary.bg-opacity-10 {
  background-color: rgba(249, 115, 22, 0.15) !important;
}

.app-dark .text-primary {
  color: var(--color-ui) !important;
}

/* Dark theme nav pills/tabs */
.app-dark .nav-pills .nav-link {
  color: var(--color-dark-muted);
}

.app-dark .nav-pills .nav-link:hover {
  color: var(--color-dark-text);
}

.app-dark .nav-pills .nav-link.active {
  background-color: var(--color-ui);
  color: #fff;
}

/* Dark theme pagination */
.app-dark .page-link {
  background-color: var(--color-dark-card);
  border-color: var(--color-dark-hover);
  color: var(--color-dark-text);
}

.app-dark .page-link:hover {
  background-color: var(--color-dark-hover);
  border-color: var(--color-dark-hover);
  color: var(--color-dark-text);
}

.app-dark .page-item.active .page-link {
  background-color: var(--color-ui);
  border-color: var(--color-ui);
}

.app-dark .page-item.disabled .page-link {
  background-color: var(--color-dark-page);
  border-color: var(--color-dark-hover);
  color: var(--color-dark-muted);
}

/* Dark theme breadcrumbs */
.app-dark .breadcrumb {
  background-color: transparent;
}

.app-dark .breadcrumb-item a {
  color: var(--color-ui);
}

.app-dark .breadcrumb-item.active {
  color: var(--color-dark-muted);
}

.app-dark .breadcrumb-item + .breadcrumb-item::before {
  color: var(--color-dark-muted);
}

/* Dark theme progress bars */
.app-dark .progress {
  background-color: var(--color-dark-hover);
}

/* Dark theme accordions */
.app-dark .accordion-item {
  background-color: var(--color-dark-card);
  border-color: var(--color-dark-hover);
}

.app-dark .accordion-button {
  background-color: var(--color-dark-card);
  color: var(--color-dark-text);
}

.app-dark .accordion-button:not(.collapsed) {
  background-color: var(--color-dark-hover);
  color: var(--color-dark-text);
}

.app-dark .accordion-button::after {
  filter: invert(1);
}

/* Dark theme toasts */
.app-dark .toast {
  background-color: var(--color-dark-card);
  border-color: var(--color-dark-hover);
  color: var(--color-dark-text);
}

.app-dark .toast-header {
  background-color: var(--color-dark-hover);
  border-bottom-color: var(--color-dark-hover);
  color: var(--color-dark-text);
}

/* Header icon colors in dark mode */
.app-dark .navbar .nav-link {
  color: var(--color-dark-muted);
}

.app-dark .navbar .nav-link:hover {
  color: var(--color-dark-text);
}

/* Navbar toggler in dark mode */
.app-dark .navbar-toggler {
  color: var(--color-dark-text);
  border-color: var(--color-dark-hover);
}

.app-dark .navbar-toggler-icon {
  filter: invert(1);
}

/* Offcanvas in dark mode */
.app-dark .offcanvas {
  background-color: var(--color-dark-card);
  color: var(--color-dark-text);
}

.app-dark .offcanvas-header {
  border-bottom-color: var(--color-dark-hover);
}

/* Dark theme hr */
.app-dark hr {
  border-color: var(--color-dark-hover);
  opacity: 1;
}

/* Dark theme wordmark text - "Dojo" in header */
.app-dark .text-dark-text {
  color: var(--color-dark-text) !important;
}

/* Dark theme hamburger icon - ensure visibility */
.app-dark .navbar-toggler svg {
  color: var(--color-dark-text);
}

/* Dark theme table text - ensure all text is readable */
.app-dark .table td,
.app-dark .table th {
  color: var(--color-dark-text);
}

.app-dark .table .text-muted,
.app-dark .table .small.text-muted {
  color: var(--color-dark-muted) !important;
}

/* Dark theme btn-light - for buttons on gradient cards */
/* Use explicit color to override inherited text-white from parent cards */
.app-dark .btn-light {
  --bs-btn-bg: #fff;
  --bs-btn-border-color: #fff;
  --bs-btn-color: #0f172a;
  --bs-btn-hover-bg: #f1f5f9;
  --bs-btn-hover-border-color: #f1f5f9;
  --bs-btn-hover-color: #0f172a;
  color: #0f172a !important;
}

.app-dark .btn-light:hover {
  color: #0f172a !important;
}

/* Dark theme btn-outline-light - for buttons on gradient cards */
.app-dark .btn-outline-light {
  --bs-btn-color: #fff;
  --bs-btn-border-color: rgba(255, 255, 255, 0.5);
  --bs-btn-hover-bg: rgba(255, 255, 255, 0.1);
  --bs-btn-hover-border-color: #fff;
  --bs-btn-hover-color: #fff;
}

/* Ensure link colors in tables remain visible */
.app-dark .table a {
  color: var(--color-ui);
}

.app-dark .table a:hover {
  color: var(--color-ui-hover);
}

/* Schedule calendar - override inline styles for dark theme */
.app-dark .schedule-calendar .table {
  border-color: var(--color-dark-hover);
}

.app-dark .schedule-calendar .table td,
.app-dark .schedule-calendar .table th {
  border-color: var(--color-dark-hover) !important;
  color: var(--color-dark-text) !important;
}

/* Class cells in calendar - override hardcoded background */
.app-dark .schedule-calendar .table td[style*="background-color: #f8f9fa"],
.app-dark .schedule-calendar .table td[style*="background-color:#f8f9fa"] {
  background-color: var(--color-dark-card) !important;
}

/* Empty cells in calendar */
.app-dark .schedule-calendar .table td[style*="background-color: #ffffff"],
.app-dark .schedule-calendar .table td[style*="background-color:#ffffff"] {
  background-color: var(--color-dark-page) !important;
}

/* Class name text in calendar */
.app-dark .schedule-calendar .fw-semibold {
  color: var(--color-dark-text) !important;
}

/* Muted text in calendar should still be visible */
.app-dark .schedule-calendar .text-muted {
  color: var(--color-dark-muted) !important;
}

/* Calendar header border */
.app-dark .schedule-calendar tr[style*="border-bottom: 3px"] {
  border-bottom-color: var(--color-dark-hover) !important;
}

/* Compact boundary rows */
.app-dark .schedule-calendar tr[style*="border-bottom: 5px"] {
  border-bottom-color: var(--color-dark-hover) !important;
}