/* ============================================
   ConsignRev UI - Theme CSS
   Site-wide Visual Overhaul
   Radzen Component Restyling
   Mobile-First Responsive Design
   ============================================ */

/* ============================================
   DARK THEME (Default)
   ============================================ */
:root, [data-theme="dark"] {
  color-scheme: dark;

  /* Brand Colors */
  --bg: #0a0a0c;
  --bg2: #0f1012;
  --panel: #141618;
  --panel2: #1a1d21;
  --paper: #f4f0ea;
  --text: #eef0f2;
  --muted: #a0a8b4;
  --dim: #636b78;
  --red: #cf111c;
  --red2: #ff2834;
  --danger: var(--red);
  --accent: var(--gold);
  --gold: #c79b4a;
  --line: rgba(255,255,255,.08);
  --line2: rgba(255,255,255,.16);
  --green: #34d399;
  --green-soft: rgba(52, 211, 153, 0.12);
  --green-bg: rgba(52, 211, 153, 0.1);
  --green-text: rgba(52, 211, 153, 0.9);
  --blue: #60a5fa;
  --gold-bg: rgba(199, 155, 74, 0.1);
  --gold-text: rgba(199, 155, 74, 0.9);
  --red-bg: rgba(207, 17, 28, 0.1);
  --red-text: rgba(207, 17, 28, 0.9);
  --warn: #fbbf24;
  --warn-soft: rgba(251, 191, 36, 0.12);
  --shadow: 0 4px 24px rgba(0,0,0,.5);
  --border-radius: 6px;
  --header-bg: rgba(10, 10, 12, 0.92);
  --modal-overlay: rgba(0,0,0,0.8);
  --toast-border: var(--green);

  /* Dashboard-specific tokens */
  /* Previous hero: linear-gradient(135deg, #7f1d1d 0%, #991b1b 50%, #b91c1c 100%), text #fff, accent #ef4444 */
  --hero-bg: linear-gradient(135deg, #2d3748 0%, #1a202c 50%, #2d3748 100%);
  --hero-text: #ffffff;
  --hero-muted: rgba(255,255,255,0.75);
  --hero-accent: #ef4444;
  --metric-bg: var(--panel);
  --metric-border: var(--line);
  --metric-title: var(--dim);
  --metric-value: var(--text);
  --metric-sub: var(--muted);
  --summary-bg: var(--panel);
  --summary-border: var(--line);
  --section-title: var(--text);
  --running-bg: var(--panel2);
  --running-text: var(--muted);
  --card-link-color: var(--blue);

  /* Gradient icon tokens */
  --grad-blue: linear-gradient(135deg, #4a6cf7, #6a8cff);
  --grad-orange: linear-gradient(135deg, #e67e22, #f39c12);
  --grad-purple: linear-gradient(135deg, #8e44ad, #af64d6);
  --grad-teal: linear-gradient(135deg, #16a085, #1abc9c);
  --grad-orange-red: linear-gradient(135deg, #d35400, #e67e22);
  --grad-dark-blue: linear-gradient(135deg, #2c3e50, #546e8a);
  --grad-crimson: linear-gradient(135deg, #c0392b, #e74c3c);
  --grad-gray: linear-gradient(135deg, #7f8c8d, #95a5a6);
  --grad-red: linear-gradient(135deg, var(--red), #e03a3a);
  --grad-green: linear-gradient(135deg, var(--green), #6ddb9e);

  /* Purple accent token */
  --purple: #8b5cf6;
  --teal: #17a2b8;

  /* Icon accent tokens (soft bg + dark fg) */
  --icon-orange-bg: #fff7ed;
  --icon-orange-fg: #ea580c;
  --icon-green-bg: #f0fdf4;
  --icon-green-fg: #16a34a;
  --icon-blue-bg: #eff6ff;
  --icon-blue-fg: #2563eb;
  --icon-red-bg: #fef2f2;
  --icon-red-fg: #dc2626;
  --icon-purple-bg: #faf5ff;
  --icon-purple-fg: #9333ea;
  --icon-amber-bg: #fefce8;
  --icon-amber-fg: #ca8a04;

  /* Status pill tokens */
  --pill-amber-bg: #fefce8;
  --pill-amber-fg: #a16207;
  --pill-blue-bg: #eff6ff;
  --pill-blue-fg: #1d4ed8;
  --pill-purple-bg: #faf5ff;
  --pill-purple-fg: #7c3aed;

  /* Warning banner tokens */
  --warn-bg: #fff3cd;
  --warn-border: #ffc107;
  --warn-icon: #856404;

  /* Radzen CSS Variable Overrides - Dark Theme */
  --rz-body-background: var(--bg);
  --rz-body-color: var(--text);
  --rz-text-color: var(--text);
  --rz-text-tertiary-color: var(--dim);
  --rz-link-color: var(--blue);
  --rz-link-hover-color: var(--gold);
  --rz-selection-background: rgba(207, 17, 28, 0.3);
  --rz-selection-color: var(--text);

  /* Panel / Card */
  --rz-panel-background: var(--panel);
  --rz-panel-color: var(--text);
  --rz-panel-border-color: var(--line);
  --rz-card-background: var(--panel);
  --rz-card-color: var(--text);
  --rz-card-border-color: var(--line);

  /* Buttons */
  --rz-button-primary-background: var(--red);
  --rz-button-primary-color: #ffffff;
  --rz-button-primary-hover-background: var(--red2);
  --rz-button-primary-hover-color: #ffffff;
  --rz-button-primary-active-background: #a00d16;
  --rz-button-primary-border-color: var(--red);
  --rz-button-secondary-background: var(--panel2);
  --rz-button-secondary-color: var(--muted);
  --rz-button-secondary-hover-background: #1e2228;
  --rz-button-secondary-hover-color: var(--text);
  --rz-button-secondary-border-color: var(--line);
  --rz-button-info-background: var(--blue);
  --rz-button-info-color: #000;
  --rz-button-success-background: var(--green);
  --rz-button-success-color: #000;
  --rz-button-warning-background: var(--warn);
  --rz-button-warning-color: #000;
  --rz-button-danger-background: var(--red);
  --rz-button-danger-color: #fff;
  --rz-button-light-background: var(--panel2);
  --rz-button-light-color: var(--muted);
  --rz-button-flat-background: transparent;
  --rz-button-flat-color: var(--muted);
  --rz-button-border-radius: var(--border-radius);

  /* Button Shade.Lighter text colors — dark text on lighter bg for readability */
  --rz-on-primary-lighter: #1a1a2e;
  --rz-on-secondary-lighter: #1a1a2e;
  --rz-on-info-lighter: #1a1a2e;
  --rz-on-success-lighter: #1a1a2e;
  --rz-on-warning-lighter: #1a1a2e;
  --rz-on-danger-lighter: #1a1a2e;
  --rz-on-error-lighter: #1a1a2e;

  /* Inputs */
  --rz-input-background: var(--panel2);
  --rz-input-color: var(--text);
  --rz-input-border-color: var(--line);
  --rz-input-focus-border-color: var(--gold);
  --rz-input-hover-border-color: var(--line2);
  --rz-input-placeholder-color: var(--dim);
  --rz-textarea-background: var(--panel2);
  --rz-textarea-color: var(--text);
  --rz-textarea-border-color: var(--line);

  /* Dropdown */
  --rz-dropdown-background: var(--panel);
  --rz-dropdown-color: var(--text);
  --rz-dropdown-border-color: var(--line);
  --rz-dropdown-hover-background: var(--panel2);
  --rz-dropdown-hover-color: var(--text);
  --rz-dropdown-focus-border-color: var(--gold);
  --rz-dropdown-panel-background: var(--panel);
  --rz-dropdown-panel-color: var(--text);

  /* DataGrid / Grid */
  --rz-grid-background: transparent;
  --rz-grid-header-background: var(--panel2);
  --rz-grid-header-color: var(--dim);
  --rz-grid-header-font-weight: 700;
  --rz-grid-cell-border-color: var(--line);
  --rz-grid-cell-color: var(--muted);
  --rz-grid-row-hover-background: rgba(255,255,255,0.02);
  --rz-grid-selected-row-background: rgba(207, 17, 28, 0.1);
  --rz-grid-selected-row-color: var(--text);
  --rz-pager-background: var(--panel);
  --rz-pager-color: var(--muted);
  --rz-pager-hover-color: var(--text);

  /* Dialog / Modal */
  --rz-dialog-background: var(--panel);
  --rz-dialog-color: var(--text);
  --rz-dialog-border-color: var(--line);
  --rz-overlay-background: var(--modal-overlay);

  /* Notification / Toast */
  --rz-notification-background: var(--panel);
  --rz-notification-color: #000000;
  --rz-notification-border-color: var(--line);
  --rz-notification-info-background: rgba(120, 169, 255, 0.1);
  --rz-notification-success-background: var(--green-soft);
  --rz-notification-warning-background: var(--warn-soft);
  --rz-notification-danger-background: rgba(207, 17, 28, 0.1);

  /* Tabs */
  --rz-tabs-header-background: transparent;
  --rz-tabs-header-color: var(--muted);
  --rz-tabs-active-header-background: transparent;
  --rz-tabs-active-header-color: var(--red);
  --rz-tabs-content-background: transparent;
  --rz-tabs-content-color: var(--text);

  /* Alert */
  --rz-alert-info-background: rgba(120, 169, 255, 0.1);
  --rz-alert-info-color: var(--blue);
  --rz-alert-info-border-color: rgba(120, 169, 255, 0.3);
  --rz-alert-success-background: var(--green-soft);
  --rz-alert-success-color: var(--green);
  --rz-alert-success-border-color: rgba(81, 197, 125, 0.3);
  --rz-alert-warning-background: var(--warn-soft);
  --rz-alert-warning-color: var(--warn);
  --rz-alert-warning-border-color: rgba(240, 193, 91, 0.3);
  --rz-alert-danger-background: rgba(207, 17, 28, 0.1);
  --rz-alert-danger-color: var(--red2);
  --rz-alert-danger-border-color: rgba(207, 17, 28, 0.3);

  /* Tooltip */
  --rz-tooltip-background: var(--panel2);
  --rz-tooltip-color: var(--text);
  --rz-tooltip-border-color: var(--line);

  /* Context Menu */
  --rz-contextmenu-background: var(--panel);
  --rz-contextmenu-color: var(--text);
  --rz-contextmenu-border-color: var(--line);
  --rz-contextmenu-hover-background: var(--panel2);

  /* Switch */
  --rz-switch-background: var(--panel2);
  --rz-switch-border-color: var(--line);
  --rz-switch-checked-background: var(--green);
  --rz-switch-checked-border-color: var(--green);
  --rz-switch-knob-background: #fff;

  /* Sidebar */
  --rz-sidebar-background: var(--panel);
  --rz-sidebar-color: var(--text);
  --rz-sidebar-border-color: var(--line);

  /* Form Field */
  --rz-form-field-label-color: var(--muted);

  /* Badge */
  --rz-badge-background: var(--red);
  --rz-badge-color: #fff;
  --rz-badge-primary-background: var(--red);
  --rz-badge-secondary-background: var(--panel2);
  --rz-badge-info-background: var(--blue);
  --rz-badge-success-background: var(--green);
  --rz-badge-warning-background: var(--warn);
  --rz-badge-danger-background: var(--red);

  /* Calendar / Date Picker */
  --rz-calendar-background: var(--panel);
  --rz-calendar-color: var(--text);
  --rz-calendar-today-background: var(--panel2);
  --rz-calendar-selected-background: var(--red);
  --rz-calendar-selected-color: #fff;
  --rz-calendar-hover-background: var(--panel2);

  /* Slider */
  --rz-slider-background: var(--panel2);
  --rz-slider-bar-background: var(--red);
  --rz-slider-knob-background: #fff;

  /* ProgressBar */
  --rz-progressbar-background: var(--panel2);
  --rz-progressbar-value-background: var(--green);

  /* Breadcrumb */
  --rz-breadcrumb-background: transparent;
  --rz-breadcrumb-color: var(--muted);
  --rz-breadcrumb-item-separator-color: var(--dim);

  /* Accordion */
  --rz-accordion-background: var(--panel);
  --rz-accordion-color: var(--text);
  --rz-accordion-header-background: var(--panel);
  --rz-accordion-header-color: var(--text);
  --rz-accordion-header-hover-background: var(--panel2);
  --rz-accordion-item-background-color: var(--panel);
  --rz-accordion-item-color: var(--text);
  --rz-accordion-content-padding-block: 12px;
  --rz-accordion-content-padding-inline: 14px;
  --rz-accordion-border-radius: 10px;
  --rz-accordion-shadow: none;

  /* Accordion Class Overrides — correct Radzen selectors */
  .rz-accordion {
    background: var(--panel) !important;
    border: 1px solid var(--line) !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    box-shadow: none !important;
  }

  .rz-accordion-header {
    background: var(--panel) !important;
    border-bottom: 1px solid var(--line) !important;
  }

  .rz-accordion-header > a {
    background: var(--panel) !important;
    color: var(--text) !important;
    padding: 12px 14px !important;
    font-weight: 600 !important;
    font-size: 12.5px !important;
    transition: background0.15s ease !important;
  }

  .rz-accordion-header > a:hover {
    background: var(--panel2) !important;
    color: var(--text) !important;
  }

  .rz-accordion-header > a > .rzi {
    color: var(--muted) !important;
  }

  .rz-accordion-content {
    background: var(--panel2) !important;
    color: var(--muted) !important;
    padding: 12px 14px !important;
    position: relative !important;
    overflow: visible !important;
  }

  .rz-accordion-toggle-icon {
    color: var(--muted) !important;
  }

  /* RadzenDropdown inside accordion - fix rendering */
  .rz-accordion-content .rz-dropdown {
    display: flex !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    min-height: 34px !important;
  }

  .rz-accordion-content .rz-dropdown .rz-dropdown-label {
    display: flex !important;
    align-items: center !important;
    flex: 1 !important;
    width: 100% !important;
    padding: 6px 10px !important;
    min-height: 34px !important;
    box-sizing: border-box !important;
  }

  .rz-accordion-content .rz-dropdown input.rz-inputtext {
    width: 100% !important;
    min-height: 34px !important;
    padding: 6px 10px !important;
    box-sizing: border-box !important;
  }

  .rz-accordion-content .rz-dropdown .rz-dropdown-trigger {
    position: relative !important;
    flex-shrink: 0 !important;
    padding: 6px 8px !important;
  }

  /* RadzenDatePicker inside accordion */
  .rz-accordion-content .rz-datepicker {
    display: flex !important;
    width: 100% !important;
    min-height: 34px !important;
  }

  .rz-accordion-content .rz-datepicker input {
    width: 100% !important;
    min-height: 34px !important;
    padding: 6px 10px !important;
    box-sizing: border-box !important;
  }

  /* RadzenNumeric inside accordion */
  .rz-accordion-content .rz-numeric {
    display: flex !important;
    width: 100% !important;
    min-height: 34px !important;
  }

  .rz-accordion-content .rz-numeric input {
    width: 100% !important;
    min-height: 34px !important;
    padding: 6px 10px !important;
    box-sizing: border-box !important;
  }

  /* Dropdown panel positioning */
  .rz-dropdown-panel,
  .rz-datepicker-panel {
    position: fixed !important;
    z-index: 9999 !important;
  }

  /* Compact dropdown/numeric overrides */
  .rz-dropdown,
  .rz-multiselect,
  .rz-numeric {
    background: var(--panel2) !important;
    color: var(--text) !important;
    border: 1px solid var(--line) !important;
    border-radius: var(--border-radius) !important;
    min-height: 34px !important;
    padding: 0 !important;
  }

  .rz-dropdown-label,
  .rz-multiselect-label,
  .rz-placeholder,
  .rz-dropdown-trigger,
  .rz-inputtext {
    color: var(--text) !important;
    padding: 6px 10px !important;
    line-height: 1.2 !important;
    font-size: 12.5px !important;
  }

  .rz-dropdown:hover,
  .rz-multiselect:hover {
    border-color: var(--line2) !important;
  }

  .rz-dropdown-panel,
  .rz-multiselect-panel {
    background: var(--panel) !important;
    border: 1px solid var(--line) !important;
    border-radius: var(--border-radius) !important;
    box-shadow: 0 8px 30px rgba(0,0,0,0.4) !important;
  }

  .rz-dropdown-item,
  .rz-multiselect-item {
    color: var(--muted) !important;
    padding: 7px 10px !important;
    font-size: 12.5px !important;
  }

  .rz-dropdown-item:hover,
  .rz-dropdown-item.rz-state-highlight,
  .rz-multiselect-item:hover,
  .rz-multiselect-item.rz-state-highlight {
    background: var(--panel2) !important;
    color: var(--text) !important;
  }

  /* PickList / Transfer */
  --rz-picklist-background: transparent;
  --rz-picklist-color: var(--text);

  /* TreeView */
  --rz-treeview-background: transparent;
  --rz-treeview-color: var(--text);
  --rz-treeview-hover-background: var(--panel2);

  /* Editor */
  --rz-editor-background: var(--panel2);
  --rz-editor-color: var(--text);

  /* DataList */
  --rz-datalist-background: transparent;

  /* Rating */
  --rz-rating-background: transparent;
  --rz-rating-color: var(--dim);
  --rz-rating-active-color: var(--gold);

  /* Steps */
  --rz-steps-background: transparent;
  --rz-steps-color: var(--dim);
  --rz-steps-active-color: var(--red);
  --rz-steps-complete-color: var(--green);

  /* Carousel */
  --rz-carousel-background: var(--panel);
  --rz-carousel-color: var(--text);

  /* File Input */
  --rz-file-input-background: var(--panel2);
  --rz-file-input-color: var(--text);

  /* DropZone */
  --rz-dropzone-background: var(--panel2);
  --rz-dropzone-color: var(--muted);
  --rz-dropzone-border-color: var(--line);
}

/* ============================================
   LIGHT THEME
   ============================================ */
[data-theme="light"] {
  color-scheme: light;

  /* Brand Colors - Light */
  --bg: #eaecf0;
  --bg2: #dde0e5;
  --panel: #ffffff;
  --panel2: #f2f4f7;
  --paper: #f4f0ea;
  --text: #111827;
  --muted: #4b5563;
  --dim: #9ca3af;
  --red: #dc2626;
  --red2: #ef4444;
  --danger: var(--red);
  --accent: var(--gold);
  --gold: #b45309;
  --line: rgba(0,0,0,.08);
  --line2: rgba(0,0,0,.14);
  --green: #059669;
  --green-soft: rgba(5, 150, 105, 0.08);
  --blue: #2563eb;
  --warn: #d97706;
  --warn-soft: rgba(217, 119, 6, 0.08);
  --shadow: 0 1px 8px rgba(0,0,0,.08);
  --header-bg: #ffffff;
  --modal-overlay: rgba(0,0,0,0.4);

  /* Dashboard-specific tokens - Light */
  /* Previous hero: linear-gradient(135deg, #7f1d1d 0%, #991b1b 50%, #dc2626 100%), text #fff, accent #dc2626 */
  --hero-bg: linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 50%, #e2e8f0 100%);
  --hero-text: #111827;
  --hero-muted: rgba(0,0,0,0.6);
  --hero-accent: #dc2626;
  --metric-bg: #ffffff;
  --metric-border: rgba(0,0,0,.06);
  --metric-title: #6b7280;
  --metric-value: #111827;
  --metric-sub: #6b7280;
  --summary-bg: #ffffff;
  --summary-border: rgba(0,0,0,.06);
  --section-title: #111827;
  --running-bg: #0f172a;
  --running-text: #ffffff;
  --card-link-color: var(--blue);

  /* Gradient icon tokens - Light */
  --grad-blue: linear-gradient(135deg, #4a6cf7, #6a8cff);
  --grad-orange: linear-gradient(135deg, #e67e22, #f39c12);
  --grad-purple: linear-gradient(135deg, #8e44ad, #af64d6);
  --grad-teal: linear-gradient(135deg, #16a085, #1abc9c);
  --grad-orange-red: linear-gradient(135deg, #d35400, #e67e22);
  --grad-dark-blue: linear-gradient(135deg, #2c3e50, #546e8a);
  --grad-crimson: linear-gradient(135deg, #c0392b, #e74c3c);
  --grad-gray: linear-gradient(135deg, #7f8c8d, #95a5a6);
  --grad-red: linear-gradient(135deg, var(--red), #e03a3a);
  --grad-green: linear-gradient(135deg, var(--green), #6ddb9e);

  /* Purple accent token - Light */
  --purple: #8b5cf6;
  --teal: #17a2b8;

  /* Icon accent tokens (soft bg + dark fg) - Light */
  --icon-orange-bg: #fff7ed;
  --icon-orange-fg: #ea580c;
  --icon-green-bg: #f0fdf4;
  --icon-green-fg: #16a34a;
  --icon-blue-bg: #eff6ff;
  --icon-blue-fg: #2563eb;
  --icon-red-bg: #fef2f2;
  --icon-red-fg: #dc2626;
  --icon-purple-bg: #faf5ff;
  --icon-purple-fg: #9333ea;
  --icon-amber-bg: #fefce8;
  --icon-amber-fg: #ca8a04;

  /* Status pill tokens - Light */
  --pill-amber-bg: #fefce8;
  --pill-amber-fg: #a16207;
  --pill-blue-bg: #eff6ff;
  --pill-blue-fg: #1d4ed8;
  --pill-purple-bg: #faf5ff;
  --pill-purple-fg: #7c3aed;

  /* Warning banner tokens - Light */
  --warn-bg: #fff3cd;
  --warn-border: #ffc107;
  --warn-icon: #856404;

  /* Radzen CSS Variable Overrides - Light Theme */
  --rz-body-background: var(--bg);
  --rz-body-color: var(--text);
  --rz-text-color: var(--text);
  --rz-text-tertiary-color: var(--dim);
  --rz-link-color: var(--blue);
  --rz-link-hover-color: var(--red);

  --rz-panel-background: var(--panel);
  --rz-panel-color: var(--text);
  --rz-panel-border-color: var(--line);
  --rz-card-background: var(--panel);
  --rz-card-color: var(--text);
  --rz-card-border-color: var(--line);

  --rz-button-primary-background: var(--red);
  --rz-button-primary-color: #ffffff;
  --rz-button-primary-hover-background: var(--red2);
  --rz-button-secondary-background: var(--panel2);
  --rz-button-secondary-color: var(--text);
  --rz-button-secondary-border-color: var(--line);
  --rz-button-info-background: var(--blue);
  --rz-button-info-color: #ffffff;
  --rz-button-success-background: var(--green);
  --rz-button-success-color: #ffffff;
  --rz-button-warning-background: var(--warn);
  --rz-button-warning-color: #ffffff;
  --rz-button-danger-background: var(--red);
  --rz-button-danger-color: #ffffff;
  --rz-button-light-background: #f3f4f6;
  --rz-button-light-color: #111827;
  --rz-button-light-hover-background: #e5e7eb;
  --rz-button-light-hover-color: #111827;
  --rz-button-flat-background: transparent;
  --rz-button-flat-color: var(--text);
  --rz-button-border-radius: var(--border-radius);

  /* Button Shade.Lighter text colors — dark text on lighter bg for readability */
  --rz-on-primary-lighter: #1a1a2e;
  --rz-on-secondary-lighter: #1a1a2e;
  --rz-on-info-lighter: #1a1a2e;
  --rz-on-success-lighter: #1a1a2e;
  --rz-on-warning-lighter: #1a1a2e;
  --rz-on-danger-lighter: #1a1a2e;
  --rz-on-error-lighter: #1a1a2e;

  --rz-input-background: #ffffff;
  --rz-input-color: var(--text);
  --rz-input-border-color: var(--line);
  --rz-input-focus-border-color: var(--red);

  --rz-dropdown-background: var(--panel);
  --rz-dropdown-color: var(--text);
  --rz-dropdown-border-color: var(--line);
  --rz-dropdown-panel-background: var(--panel);

  --rz-grid-background: transparent;
  --rz-grid-header-background: var(--panel2);
  --rz-grid-header-color: var(--dim);
  --rz-grid-cell-border-color: var(--line);
  --rz-grid-cell-color: var(--muted);
  --rz-grid-row-hover-background: rgba(0,0,0,0.02);

  --rz-dialog-background: var(--panel);
  --rz-dialog-color: var(--text);
  --rz-dialog-border-color: var(--line);

  --rz-notification-background: var(--panel);
  --rz-notification-color: var(--text);

  --rz-tabs-header-background: transparent;
  --rz-tabs-header-color: var(--muted);
  --rz-tabs-active-header-color: var(--red);

  --rz-alert-info-background: rgba(74, 128, 212, 0.08);
  --rz-alert-info-color: var(--blue);
  --rz-alert-success-background: var(--green-soft);
  --rz-alert-success-color: var(--green);
  --rz-alert-warning-background: var(--warn-soft);
  --rz-alert-warning-color: var(--warn);
  --rz-alert-danger-background: rgba(207, 17, 28, 0.08);
  --rz-alert-danger-color: var(--red);

  --rz-tooltip-background: var(--panel);
  --rz-tooltip-color: var(--text);

  --rz-contextmenu-background: var(--panel);
  --rz-contextmenu-color: var(--text);

  --rz-switch-checked-background: var(--green);

  --rz-badge-background: var(--red);
  --rz-badge-color: #fff;

  --rz-calendar-background: var(--panel);
  --rz-calendar-color: var(--text);
  --rz-calendar-selected-background: var(--red);
  --rz-calendar-selected-color: #fff;

  --rz-progressbar-value-background: var(--green);
}

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

body {
  background: var(--bg) !important;
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: 13px;
  line-height: 1.45;
  letter-spacing: -0.01em;
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html {
  background: var(--bg) !important;
}

[data-theme="dark"] body {
  background:
    radial-gradient(ellipse at 20% 0%, rgba(99, 102, 241, 0.04), transparent 50%),
    var(--bg) !important;
}

[data-theme="light"] body {
  background:
    radial-gradient(ellipse at 20% 0%, rgba(99, 102, 241, 0.03), transparent 50%),
    var(--bg) !important;
}

h1, h2, h3, h4, h5, h6 {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, sans-serif;
  color: var(--text);
  letter-spacing: -0.02em;
  font-weight: 600;
}

h1 { font-size: 1.5rem; line-height: 1.2; }
h2 { font-size: 1.25rem; line-height: 1.25; }
h3 { font-size: 1.1rem; line-height: 1.3; }
h4 { font-size: 1rem; line-height: 1.35; }
h5 { font-size: 0.875rem; line-height: 1.4; }
h6 { font-size: 0.8125rem; line-height: 1.4; }

a {
  color: var(--card-link-color);
  text-decoration: none;
  transition: color 0.15s ease;
}

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

::selection {
  background-color: rgba(99, 102, 241, 0.2);
  color: var(--text);
}

/* ============================================
   HEADER
   ============================================ */
header.main-header, .cr-main-header {
  background: var(--header-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line);
  padding: 8px 12px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  position: sticky;
  top: 0;
  z-index: 100;
  gap: 10px;
  min-height: 48px;
}

@media (min-width: 768px) {
  header.main-header, .cr-main-header {
    padding: 10px 20px;
    min-height: 52px;
  }
}

.brand {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

.brand-logo {
  height: 24px;
  width: auto;
  object-fit: contain;
  flex-shrink: 0;
}

@media (min-width: 768px) {
  .brand-logo {
    height: 28px;
  }
}

.brand-mark {
  width: 28px;
  height: 28px;
  border: 1.5px solid var(--red);
  position: relative;
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 800;
  font-size: 11px;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--red);
  flex-shrink: 0;
  border-radius: 6px;
}

@media (min-width: 768px) {
  .brand-mark {
    width: 30px;
    height: 30px;
    font-size: 12px;
  }
}

.brand-title h1 {
  font-size: 14px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
  margin: 0;
}

@media (min-width: 768px) {
  .brand-title h1 {
    font-size: 15px;
  }
}

.brand-title span {
  display: block;
  color: var(--dim);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 1px;
  font-weight: 500;
}

/* ============================================
   CR MAIN LAYOUT (header / brand / actions)
   Used by CrMainLayout.razor
   ============================================ */
.cr-layout {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
}

.cr-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--header-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line);
}

.cr-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  max-width: 1400px;
  margin: 0 auto;
  padding: 8px 12px;
  min-height: 48px;
}

@media (min-width: 768px) {
  .cr-header-inner {
    padding: 10px 20px;
  }
}

.cr-header-brand {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
  text-decoration: none;
  color: inherit;
}

.cr-header-logo {
  height: 26px;
  width: auto;
  max-width: 160px;
  object-fit: contain;
  flex-shrink: 0;
  display: block;
}

@media (min-width: 768px) {
  .cr-header-logo {
    height: 30px;
    max-width: 200px;
  }
}

.cr-header-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

/* ============================================
   THEME TOGGLE BUTTON
   ============================================ */
.theme-toggle {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  transition: all 0.15s ease;
  flex-shrink: 0;
  padding: 0;
}

.theme-toggle:hover {
  color: var(--text);
  border-color: var(--line2);
  background: var(--panel2);
}

.theme-toggle .icon-sun,
.theme-toggle .icon-moon {
  transition: transform 0.2s ease;
}

[data-theme="dark"] .theme-toggle .icon-sun { display: none; }
[data-theme="dark"] .theme-toggle .icon-moon { display: block; }
[data-theme="light"] .theme-toggle .icon-sun { display: block; }
[data-theme="light"] .theme-toggle .icon-moon { display: none; }
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }

/* ============================================
   HAMBURGER BUTTON
   ============================================ */
.hamburger-btn {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 7px;
  flex-shrink: 0;
  transition: all 0.15s ease;
}

.hamburger-btn span {
  display: block;
  width: 14px;
  height: 1.5px;
  background: currentColor;
  border-radius: 1px;
  transition: all 0.2s ease;
}

.hamburger-btn:hover {
  color: var(--text);
  border-color: var(--line2);
}

.hamburger-btn.active span:nth-child(1) {
  transform: translateY(4.5px) rotate(45deg);
}
.hamburger-btn.active span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.hamburger-btn.active span:nth-child(3) {
  transform: translateY(-4.5px) rotate(-45deg);
}

/* ============================================
   NAVIGATION DRAWER
   ============================================ */
.nav-overlay {
  position: fixed;
  inset: 0;
  background: var(--modal-overlay);
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

.nav-overlay.active {
  opacity: 1;
  visibility: visible;
}

.nav-drawer {
  position: fixed;
  top: 0;
  left: 0;
  width: 260px;
  max-width: 85vw;
  height: 100vh;
  height: 100dvh;
  background: var(--panel);
  border-right: 1px solid var(--line);
  z-index: 1001;
  transform: translateX(-100%);
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.nav-drawer.active {
  transform: translateX(0);
}

.nav-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
}

.nav-drawer-logo {
  height: 28px;
  width: auto;
  max-width: 180px;
  object-fit: contain;
  display: block;
  flex-shrink: 0;
}

.nav-close {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  transition: all 0.15s ease;
  flex-shrink: 0;
}

.nav-close:hover {
  color: var(--text);
  border-color: var(--line2);
}

.nav-section-label {
  padding: 14px 14px 4px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--dim);
}

.nav-links {
  display: flex;
  flex-direction: column;
  padding: 2px 0;
}

.nav-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  color: var(--muted);
  text-decoration: none;
  font-size: 12.5px;
  font-weight: 500;
  transition: all 0.15s ease;
  border-left: 2px solid transparent;
}

.nav-link i {
  width: 16px;
  text-align: center;
  font-size: 13px;
  flex-shrink: 0;
}

.nav-link:hover {
  color: var(--text);
  background: var(--panel2);
}

.nav-link.active {
  color: var(--red2);
  background: rgba(207, 17, 28, 0.06);
  border-left-color: var(--red);
  font-weight: 600;
}

.nav-link.active i {
  color: var(--red2);
}

.nav-drawer-footer {
  padding: 10px 14px;
  border-top: 1px solid var(--line);
  flex-shrink: 0;
  margin-top: auto;
}

.nav-footer-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--dim);
}

.nav-footer-action-row {
  margin-top: 8px;
}

.nav-logout-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  min-height: 38px;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid rgba(207, 17, 28, .3);
  background: var(--red);
  color: #fff !important;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.15s ease;
}

.nav-logout-button:hover,
.nav-logout-button:focus-visible {
  background: var(--red2);
  color: #fff !important;
  text-decoration: none;
  outline: none;
}

.nav-logout-button i {
  color: #fff !important;
  font-size: 12px;
}

@media (max-width: 991px) {
  .nav-drawer-footer {
    padding-bottom: max(14px, env(safe-area-inset-bottom));
  }

  .nav-logout-button {
    min-height: 44px;
  }
}

/* ============================================
   PAGE TITLE (Content Area)
   ============================================ */
.page-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  padding-bottom: 0;
  border-bottom: none;
}

.page-title-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--panel2);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--red);
  font-size: 16px;
  flex-shrink: 0;
}

@media (min-width: 768px) {
  .page-title-icon {
    width: 40px;
    height: 40px;
    font-size: 18px;
  }
}

.page-title-text {
  min-width: 0;
}

.page-title-text h2 {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--text);
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
}

@media (min-width: 768px) {
  .page-title-text h2 {
    font-size: 16px;
  }
}

.page-title-text span {
  display: block;
  font-size: 11px;
  color: var(--dim);
  font-weight: 500;
  margin-top: 1px;
}

/* ============================================
   MAIN CONTENT
   ============================================ */
.main-content, .cr-main-content {
  flex: 1;
  padding: 12px;
  overflow-y: auto;
  position: relative;
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
}

@media (min-width: 768px) {
  .main-content, .cr-main-content {
    padding: 16px 20px;
  }
}

@media (min-width: 992px) {
  .main-content, .cr-main-content {
    padding: 20px 28px;
  }
}

/* ============================================
   RADZEN COMPONENT OVERRIDES - Cards & Panels
   ============================================ */
.rz-card, .rz-panel {
  background: var(--panel) !important;
  color: var(--text) !important;
  border: 1px solid var(--line) !important;
  border-radius: 10px !important;
  box-shadow: var(--shadow) !important;
}

.rz-card h3, .rz-card h4, .rz-card h5 {
  color: var(--text) !important;
  font-weight: 600 !important;
}

/* All RadzenText headings - ensure visible in dark theme */
.rz-card .rz-text,
.rz-panel .rz-text,
.rz-text-h1, .rz-text-h2, .rz-text-h3, .rz-text-h4, .rz-text-h5, .rz-text-h6,
h1, h2, h3, h4, h5, h6 {
  color: var(--text) !important;
}

/* RadzenText subtitle / body text */
.rz-text-subtitle1, .rz-text-subtitle2, .rz-text-body1, .rz-text-body2,
.rz-text-overline, .rz-text-caption {
  color: var(--muted) !important;
}

/* ============================================
   RADZEN COMPONENT OVERRIDES - Buttons
   ============================================ */
.rz-button {
  border-radius: var(--border-radius) !important;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', sans-serif !important;
  font-weight: 500 !important;
  font-size: 12.5px !important;
  transition: all 0.15s ease !important;
  min-height: 32px !important;
  padding: 0 12px !important;
  letter-spacing: -0.01em !important;
}

@media (max-width: 767px) {
  .rz-button {
    min-height: 40px !important;
    width: 100%;
  }
  .rz-button.rz-button-icon {
    width: 40px !important;
  }
}

.rz-button.rz-button-md {
  min-height: 32px !important;
}

.rz-button-primary, .rz-button.rz-primary {
  background: var(--red) !important;
  border-color: var(--red) !important;
  color: #fff !important;
}

.rz-button-primary:hover, .rz-button.rz-primary:hover {
  background: var(--red2) !important;
  border-color: var(--red2) !important;
}

.rz-button-secondary, .rz-button.rz-secondary {
  background: var(--panel2) !important;
  border-color: var(--line) !important;
  color: var(--muted) !important;
}

.rz-button-secondary:hover {
  color: var(--text) !important;
  border-color: var(--line2) !important;
}

.rz-button-success, .rz-button.rz-success {
  background: var(--green) !important;
  border-color: var(--green) !important;
  color: #000 !important;
}

.rz-button-danger, .rz-button.rz-danger {
  background: var(--red) !important;
  border-color: var(--red) !important;
  color: #fff !important;
}

.rz-button-info, .rz-button.rz-info {
  background: var(--blue) !important;
  border-color: var(--blue) !important;
  color: #000 !important;
}

.rz-button-warning, .rz-button.rz-warning {
  background: var(--warn) !important;
  border-color: var(--warn) !important;
  color: #000 !important;
}

/* ============================================
   RADZEN COMPONENT OVERRIDES - Inputs & Forms
   ============================================ */
.rz-textbox,
.rz-password,
.rz-numeric-input,
.rz-textarea,
.rz-inputtext,
.rz-inputwrapper,
.rz-form-control,
input.rz-inputtext,
textarea.rz-inputtextarea,
input.form-control,
textarea.form-control,
select.form-control,
.input-text {
  background: var(--panel2) !important;
  color: var(--text) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--border-radius) !important;
  padding: 7px 10px !important;
  font-size: 13px !important;
  transition: border-color 0.15s ease !important;
}

.rz-textbox:focus,
.rz-password:focus-within,
.rz-numeric-input:focus,
.rz-textarea:focus,
input.rz-inputtext:focus, textarea.rz-inputtextarea:focus,
input.form-control:focus,
textarea.form-control:focus,
.input-text:focus,
.rz-state-focus {
  border-color: var(--blue) !important;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1) !important;
  outline: none !important;
}

.rz-textbox::placeholder,
.rz-password input::placeholder,
.rz-textarea::placeholder,
input.form-control::placeholder,
textarea.form-control::placeholder,
.input-text::placeholder {
  color: var(--dim) !important;
}

.rz-form-field,
.rz-form-field-content,
.rz-inputwrapper,
.rz-dropdown,
.rz-password {
  background: var(--panel2) !important;
  color: var(--text) !important;
  border-color: var(--line) !important;
}

.rz-form-field-label,
.rz-label,
.form-list label,
.account-login label {
  color: var(--muted) !important;
  font-weight: 500 !important;
  font-size: 12px !important;
  margin-bottom: 4px !important;
  background: transparent !important;
}

/* Radzen FormField floating label - remove opaque bg */
.rz-form-field .rz-label,
.rz-form-field-label,
label.rz-label {
  background: transparent !important;
  border: none !important;
}

/* Radzen TextBox/Dropdown/Password wrapper in Outlined variant */
.rz-textbox,
.rz-password,
.rz-numeric-input,
.rz-textarea,
.rz-inputtext,
.rz-form-field .rz-inputtext,
.rz-form-field input,
.rz-form-field textarea {
  background: var(--panel2) !important;
  color: var(--text) !important;
  border: 1px solid var(--line) !important;
}

/* Radzen FormField outlined variant - fix label and wrapper backgrounds */
.rz-form-field-outlined .rz-label,
.rz-form-field-outlined .rz-form-field-label,
.rz-form-field-outlined .rz-inputwrapper {
  background: var(--panel2) !important;
}

.rz-form-field-outlined .rz-label {
  background: var(--panel2) !important;
  padding: 0 4px !important;
}

/* Standard textbox for all pages */
input[type="text"],
input[type="number"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="url"],
textarea,
select,
.form-control {
  background: var(--panel2) !important;
  color: var(--text) !important;
  border: 1px solid var(--line) !important;
}

.rz-dropdown, .rz-dropDown, .rz-multiselect {
  background: var(--panel2) !important;
  color: var(--text) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--border-radius) !important;
  min-height: 34px !important;
  padding: 0 !important;
}

.rz-dropdown-label,
.rz-multiselect-label,
.rz-placeholder,
.rz-dropdown-trigger,
.rz-inputtext {
  color: var(--text) !important;
  padding: 10px 12px !important;
  line-height: 1 !important;
}

.rz-dropdown:hover, .rz-dropDown:hover {
  border-color: var(--line2) !important;
}

.rz-dropdown-panel, .rz-dropDown-panel, .rz-multiselect-panel {
  background: var(--panel) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--border-radius) !important;
  box-shadow: 0 8px 30px rgba(0,0,0,0.4) !important;
}

.rz-dropdown-item, .rz-dropDown-item, .rz-multiselect-item {
  color: var(--muted) !important;
  padding: 7px 10px !important;
  font-size: 13px !important;
}

.rz-dropdown-item:hover, .rz-dropDown-item:hover,
.rz-dropdown-item.rz-state-highlight, .rz-dropDown-item.rz-state-highlight,
.rz-multiselect-item:hover, .rz-multiselect-item.rz-state-highlight {
  background: var(--panel2) !important;
  color: var(--text) !important;
}

.account-login,
.account-login .content,
.account-login .rz-templateform,
.account-login .form-list,
.account-login p,
.account-login strong {
  color: var(--text) !important;
}

.account-login .registered-users,
.account-login .new-users {
  background: var(--panel) !important;
  color: var(--text) !important;
}

/* ============================================
   RADZEN COMPONENT OVERRIDES - DataGrid
   ============================================ */
.rz-data-grid,
.rz-datagrid,
.rz-grid,
.rz-datatable,
.rz-datatable-data,
.rz-datatable-scrollable-view,
.rz-datatable-scrollable-body,
.rz-datatable-tablewrapper,
.rz-grid-table {
  background: var(--panel) !important;
  color: var(--text) !important;
  border-color: var(--line) !important;
}

.rz-data-grid,
.rz-datagrid,
.rz-grid,
.rz-datatable {
  border: 1px solid var(--line) !important;
  border-radius: 10px !important;
  overflow: hidden !important;
}

.rz-datatable table,
.rz-data-grid table,
.rz-datagrid table,
.rz-grid-table {
  background: var(--panel) !important;
  color: var(--text) !important;
}

.rz-datatable-header,
.rz-grid-table-header,
.rz-grid-table thead,
.rz-datatable thead {
  background: var(--panel2) !important;
}

.rz-grid-table thead tr,
.rz-datatable thead tr {
  border-bottom: none !important;
}

.rz-datatable-header th,
.rz-grid-table-header th,
.rz-grid-table thead th,
.rz-datatable thead th {
  background: var(--panel2) !important;
  color: var(--dim) !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  font-size: 10px !important;
  letter-spacing: 0.06em !important;
  padding: 8px 12px !important;
  border-bottom: none !important;
  border-color: transparent !important;
  white-space: nowrap;
  line-height: 1.2;
}

/* DataGrid header text - ensure it's visible in dark mode */
.rz-datatable-header th .rz-column-title,
.rz-datatable-header th .rz-column-title-content,
.rz-grid-table-header th .rz-column-title,
.rz-grid-table-header th .rz-column-title-content {
  color: var(--muted) !important;
  font-weight: 600 !important;
  background: transparent !important;
}

/* DataGrid header wrapper - force theme background */
.rz-datatable-thead,
.rz-datatable-thead > tr,
.rz-datatable-thead > tr > th,
.rz-grid-thead,
.rz-grid-thead > tr,
.rz-grid-thead > tr > th {
  background: var(--panel2) !important;
  color: var(--muted) !important;
  border-color: var(--line) !important;
}

/* Grouped header row */
.rz-datatable-thead > tr.rz-group-header,
.rz-datatable-thead > tr.rz-group-header > td {
  background: var(--panel) !important;
  color: var(--muted) !important;
  border-color: var(--line) !important;
}

.rz-datatable-data tr,
.rz-grid-table tbody tr,
.rz-data-row {
  background: var(--panel) !important;
  color: var(--muted) !important;
}

.rz-datatable-data tr:nth-child(even),
.rz-grid-table tbody tr:nth-child(even),
.rz-data-row:nth-child(even) {
  background: color-mix(in srgb, var(--panel2) 40%, transparent) !important;
}

.rz-datatable-data td,
.rz-grid-table-cell,
.rz-grid-table tbody td,
.rz-datatable tbody td,
.rz-cell-data {
  background: transparent !important;
  color: var(--muted) !important;
  border-bottom: none !important;
  border-color: transparent !important;
  padding: 10px 12px !important;
  font-size: 12.5px !important;
}

.rz-datatable-data tr:hover,
.rz-grid-table-row:hover,
.rz-grid-table tbody tr:hover {
  background: var(--panel2) !important;
}

.rz-datatable-data tr:hover td,
.rz-grid-table-row:hover td,
.rz-grid-table tbody tr:hover td {
  color: var(--text) !important;
}

.rz-datatable-data tr.rz-state-selected td,
.rz-grid-table-row.rz-state-selected td {
  background: rgba(37, 99, 235, 0.08) !important;
  color: var(--text) !important;
}

.rz-sortable-column,
.rz-sortable-column .rzi,
.rz-column-resizer,
.rz-column-title .rzi,
.rz-grid-filter,
.rz-grid-filter .rzi,
.rz-datatable-loading-content {
  color: var(--dim) !important;
}

.rz-sortable-column:hover,
.rz-sortable-column:hover .rzi,
.rz-grid-filter:hover,
.rz-grid-filter:hover .rzi {
  color: var(--text) !important;
}

.rz-pager {
  background: var(--panel) !important;
  border-top: 1px solid var(--line) !important;
  color: var(--muted) !important;
}

.rz-paginator,
.rz-datatable-paginator,
.rz-pager-summary,
.rz-pager-page,
.rz-pager-pagesize,
.rz-pager .rz-dropdown,
.rz-pager .rz-dropdown-label {
  background: var(--panel) !important;
  color: var(--muted) !important;
  border-color: var(--line) !important;
}

.rz-pager-button {
  background: transparent !important;
  color: var(--muted) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--border-radius) !important;
}

.rz-pager-button:hover {
  color: var(--text) !important;
  border-color: var(--line2) !important;
}

.rz-pager-element {
  color: var(--dim) !important;
}

.rz-filter-menu,
.rz-column-menu,
.rz-context-menu,
.rz-menu,
.rz-popup,
.rz-overlaypanel {
  background: var(--panel) !important;
  color: var(--text) !important;
  border: 1px solid var(--line) !important;
  box-shadow: var(--shadow) !important;
}

.rz-filter-menu .rz-inputtext,
.rz-filter-menu .rz-dropdown,
.rz-column-menu .rz-inputtext,
.rz-column-menu .rz-dropdown,
.rz-popup .rz-inputtext,
.rz-popup .rz-dropdown {
  background: var(--panel2) !important;
  color: var(--text) !important;
  border-color: var(--line) !important;
}

/* ============================================
   RADZEN COMPONENT OVERRIDES - Dialogs/Modals
   ============================================ */
.rz-dialog {
  background: var(--panel) !important;
  color: var(--text) !important;
  border: 1px solid var(--line) !important;
  border-radius: 12px !important;
  box-shadow: 0 16px 48px rgba(0,0,0,0.4) !important;
  overflow: hidden !important;
}

.rz-dialog-titlebar {
  background: var(--panel2) !important;
  color: var(--text) !important;
  border-bottom: 1px solid var(--line) !important;
  padding: 12px 16px !important;
}

.rz-dialog-titlebar .rz-dialog-title {
  color: var(--text) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
}

.rz-dialog-titlebar-close {
  color: var(--muted) !important;
}

.rz-dialog-titlebar-close:hover {
  color: var(--text) !important;
}

.rz-dialog-content {
  padding: 16px !important;
}

/* Mobile: bottom-sheet modal */
@media (max-width: 767px) {
  .rz-dialog-wrapper {
    align-items: flex-end !important;
  }
  .rz-dialog {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 12px 12px 0 0 !important;
    max-height: 85vh !important;
    animation: slideUp 0.25s ease !important;
  }
}

@keyframes slideUp {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

/* ============================================
   RADZEN COMPONENT OVERRIDES - Tabs
   ============================================ */
.rz-tabview {
  background: transparent !important;
}

.rz-tabview-nav {
  background: transparent !important;
  border-bottom: 1px solid var(--line) !important;
}

.rz-tabview-nav li {
  background: transparent !important;
}

.rz-tabview-nav li a {
  color: var(--muted) !important;
  font-weight: 500 !important;
  font-size: 12.5px !important;
  padding: 10px 14px !important;
}

.rz-tabview-nav li.rz-state-active a {
  color: var(--blue) !important;
  border-bottom: 2px solid var(--blue) !important;
}

.rz-tabview-panels {
  background: transparent !important;
  padding: 12px 0 !important;
}

/* ============================================
   RADZEN COMPONENT OVERRIDES - Alerts
   ============================================ */
.rz-alert {
  border-radius: var(--border-radius) !important;
  border: 1px solid !important;
  font-size: 12.5px !important;
  padding: 10px 12px !important;
}

.rz-alert-icon,
.rz-alert-message,
.rz-alert-content {
  color: inherit !important;
}

.rz-alert-info {
  background: rgba(37, 99, 235, 0.06) !important;
  color: var(--blue) !important;
  border-color: rgba(37, 99, 235, 0.2) !important;
}

.rz-alert-success {
  background: var(--green-soft) !important;
  color: var(--green) !important;
  border-color: rgba(5, 150, 105, 0.2) !important;
}

.rz-alert-warning {
  background: var(--warn-soft) !important;
  color: var(--warn) !important;
  border-color: rgba(217, 119, 6, 0.2) !important;
}

.rz-alert-danger {
  background: rgba(220, 38, 38, 0.06) !important;
  color: var(--red) !important;
  border-color: rgba(220, 38, 38, 0.2) !important;
}

/* Dark mode alert overrides - ensure readable text */
[data-theme="dark"] .rz-alert-info,
[data-theme="dark"] .rz-alert-info.rz-shade-lighter,
[data-theme="dark"] .rz-alert.alert-info {
  background: rgba(96, 165, 250, 0.15) !important;
  color: #93c5fd !important;
  border-color: rgba(96, 165, 250, 0.3) !important;
}

[data-theme="dark"] .rz-alert-success,
[data-theme="dark"] .rz-alert-success.rz-shade-lighter,
[data-theme="dark"] .rz-alert.alert-success {
  background: rgba(52, 211, 153, 0.15) !important;
  color: #6ee7b7 !important;
  border-color: rgba(52, 211, 153, 0.3) !important;
}

[data-theme="dark"] .rz-alert-warning,
[data-theme="dark"] .rz-alert-warning.rz-shade-lighter,
[data-theme="dark"] .rz-alert.alert-warning {
  background: rgba(251, 191, 36, 0.15) !important;
  color: #fcd34d !important;
  border-color: rgba(251, 191, 36, 0.3) !important;
}

[data-theme="dark"] .rz-alert-danger,
[data-theme="dark"] .rz-alert-danger.rz-shade-lighter,
[data-theme="dark"] .rz-alert.alert-danger {
  background: rgba(248, 113, 113, 0.15) !important;
  color: #fca5a5 !important;
  border-color: rgba(248, 113, 113, 0.3) !important;
}

/* Force all alert children to inherit color */
[data-theme="dark"] .rz-alert,
[data-theme="dark"] .rz-alert *,
[data-theme="dark"] .rz-alert::before,
[data-theme="dark"] .rz-alert::after {
  color: inherit !important;
}

/* Override any inline styles from Shade parameter */
[data-theme="dark"] .rz-alert[style] {
  color: inherit !important;
}

[data-theme="dark"] .rz-alert[style] * {
  color: inherit !important;
}

/* ============================================
   RADZEN COMPONENT OVERRIDES - Badge
   ============================================ */
.rz-badge {
  font-size: 10px !important;
  font-weight: 600 !important;
  padding: 2px 6px !important;
  border-radius: 4px !important;
  letter-spacing: 0.02em !important;
}

/* ============================================
   RADZEN COMPONENT OVERRIDES - Switch
   ============================================ */
.rz-switch {
  cursor: pointer !important;
}

.rz-switch-slider {
  background: var(--panel2) !important;
  border: 1px solid var(--line) !important;
  border-radius: 20px !important;
}

.rz-switch-checked .rz-switch-slider {
  background: var(--green) !important;
  border-color: var(--green) !important;
}

/* ============================================
   RADZEN COMPONENT OVERRIDES - Tooltip
   ============================================ */
.rz-tooltip {
  background: var(--panel2) !important;
  color: var(--text) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--border-radius) !important;
  font-size: 11px !important;
  padding: 5px 8px !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3) !important;
}

/* ============================================
   RADZEN COMPONENT OVERRIDES - Context Menu
   ============================================ */
.rz-contextmenu {
  background: var(--panel) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--border-radius) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.3) !important;
  padding: 4px !important;
}

.rz-contextmenu-item {
  color: var(--muted) !important;
  border-radius: 4px !important;
  padding: 7px 10px !important;
  font-size: 12.5px !important;
}

.rz-contextmenu-item:hover {
  background: var(--panel2) !important;
  color: var(--text) !important;
}

/* ============================================
   RADZEN COMPONENT OVERRIDES - Calendar
   ============================================ */
.rz-calendar {
  background: var(--panel) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--border-radius) !important;
}

.rz-calendar-header {
  background: var(--panel2) !important;
}

.rz-calendar-title {
  color: var(--text) !important;
}

.rz-calendar table th {
  color: var(--dim) !important;
  background: transparent !important;
}

.rz-calendar table td {
  color: var(--muted) !important;
}

.rz-calendar table td a {
  color: var(--muted) !important;
}

.rz-calendar table td a:hover {
  color: var(--text) !important;
  background: var(--panel2) !important;
}

.rz-calendar table td.rz-calendar-today a {
  background: var(--panel2) !important;
  color: var(--text) !important;
}

.rz-calendar table td.rz-state-active a,
.rz-calendar table td.rz-calendar-selected a {
  background: var(--blue) !important;
  color: #fff !important;
}

/* ============================================
   RADZEN COMPONENT OVERRIDES - ProgressBar
   ============================================ */
.rz-progressbar {
  background: var(--panel2) !important;
  border-radius: 4px !important;
  height: 6px !important;
}

.rz-progressbar-value {
  background: var(--blue) !important;
  border-radius: 4px !important;
}

/* ============================================
   RADZEN COMPONENT OVERRIDES - Breadcrumb
   ============================================ */
.rz-breadcrumb {
  background: transparent !important;
}

.rz-breadcrumb a {
  color: var(--muted) !important;
}

.rz-breadcrumb a:hover {
  color: var(--text) !important;
}

.rz-breadcrumb-separator {
  color: var(--dim) !important;
}

/* ============================================
   RADZEN COMPONENT OVERRIDES - Steps
   ============================================ */
.rz-steps {
  background: transparent !important;
}

.rz-steps-item {
  color: var(--dim) !important;
}

.rz-steps-item.active {
  color: var(--blue) !important;
}

.rz-steps-item.completed {
  color: var(--green) !important;
}

/* ============================================
   RADZEN COMPONENT OVERRIDES - Notification
   ============================================ */
.rz-notification {
  background: var(--panel) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--border-radius) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.3) !important;
}

.rz-notification-message {
  color: #000000 !important;
  font-size: 12.5px !important;
}

/* ============================================
   CR-* UTILITY CLASSES
   ============================================ */
.cr-app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}

.cr-app-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.cr-app-header-back {
  background: none;
  border: none;
  cursor: pointer;
  padding: 5px;
  border-radius: 6px;
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}

.cr-app-header-back:hover {
  background: var(--panel2);
  color: var(--text);
}

.cr-app-header-title {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

.cr-page-container {
  padding: 12px;
  max-width: 1200px;
  margin: 0 auto;
}

@media (max-width: 767px) {
  .cr-page-container {
    padding: 10px;
  }
}

.cr-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow);
  padding: 14px;
}

.cr-grid-wrap {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
}

.cr-grid-wrap .rz-datagrid,
.cr-grid-wrap .rz-data-grid {
  min-width: 920px;
}

.cr-grid-wrap.cr-grid-compact .rz-datagrid,
.cr-grid-wrap.cr-grid-compact .rz-data-grid {
  min-width: 720px;
}

.cr-grid-wrap.cr-grid-wide .rz-datagrid,
.cr-grid-wrap.cr-grid-wide .rz-data-grid {
  min-width: 1080px;
}

@media (max-width: 991px) {
  .cr-grid-wrap .rz-datagrid,
  .cr-grid-wrap .rz-data-grid {
    min-width: 860px;
  }
}

@media (max-width: 767px) {
  .cr-grid-wrap .rz-datagrid,
  .cr-grid-wrap .rz-data-grid {
    min-width: 760px;
  }
}

.cr-page-shell {
  padding: 0.75rem;
}

@media (max-width: 767px) {
  .cr-page-shell {
    padding: 0.5rem;
  }
}

.cr-status-bullets {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}

.cr-live-map-panel {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  padding: 0.6rem;
}

.cr-live-map {
  width: 100%;
  height: 280px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--line);
}

@media (max-width: 991px) {
  .cr-live-map {
    height: 240px;
  }
}

@media (max-width: 767px) {
  .cr-live-map {
    height: 200px;
  }
}

/* Mobile action row - stack buttons vertically on mobile */
.cr-mobile-action-row {
  width: 100%;
}

@media (max-width: 767px) {
  .cr-mobile-action-row .rz-button {
    width: 100%;
  }
}

/* ============================================
   TEMPLATE FORM OVERRIDES (legacy)
   ============================================ */
.rz-templateform {
  background: var(--panel) !important;
  border: 1px solid var(--line) !important;
  border-radius: 10px !important;
  box-shadow: var(--shadow) !important;
  padding: 14px !important;
  margin: 6px 0 16px 0;
}

.rz-templateform .rz-form-field {
  background: var(--panel2) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--border-radius) !important;
  padding: 7px 9px 2px 9px !important;
  margin-bottom: 8px;
}

.rz-templateform .rz-form-field-label {
  font-size: 12px !important;
  color: var(--muted) !important;
  font-weight: 500 !important;
}

@media (max-width: 767px) {
  .rz-templateform {
    padding: 10px !important;
    margin: 4px 0 12px 0;
  }
  .rz-templateform .rz-stack[style*="justify-content: end"] {
    justify-content: stretch !important;
  }
  .rz-templateform .rz-button {
    width: 100%;
  }
}

/* ============================================
   RESPONSIVE UTILITIES
   ============================================ */
.hidden-sm { display: none !important; }
@media (min-width: 768px) { .hidden-sm { display: block !important; } }
.hidden-md { display: block !important; }
@media (min-width: 768px) { .hidden-md { display: none !important; } }
.hidden-lg { display: block !important; }
@media (min-width: 992px) { .hidden-lg { display: none !important; } }

/* Text utilities */
.text-red { color: var(--red) !important; }
.text-green { color: var(--green) !important; }
.text-blue { color: var(--blue) !important; }
.text-gold { color: var(--gold) !important; }
.text-dim { color: var(--dim) !important; }
.text-muted { color: var(--muted) !important; }
.bg-panel { background: var(--panel) !important; }
.bg-panel2 { background: var(--panel2) !important; }

/* Flex utilities */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-8 { gap: 8px; }
.gap-12 { gap: 12px; }
.gap-16 { gap: 16px; }
.mb-8 { margin-bottom: 8px; }
.mb-12 { margin-bottom: 12px; }
.mb-16 { margin-bottom: 16px; }
.mb-24 { margin-bottom: 24px; }
.mt-8 { margin-top: 8px; }
.mt-12 { margin-top: 12px; }
.mt-16 { margin-top: 16px; }

/* ============================================
   FOOTER
   ============================================ */
.main-footer {
  padding: 12px;
  text-align: center;
  font-size: 11px;
  color: var(--dim);
  border-top: 1px solid var(--line);
  background: var(--panel);
}

.main-footer .footer-inner {
  max-width: 1400px;
  margin: 0 auto;
}

/* ============================================
   RADZEN MATERIAL THEME COUNTER-OVERRIDES
   Must come after RadzenTheme's generated CSS
   ============================================ */
body,
html,
.rz-body,
.mat-body {
  background-color: var(--bg) !important;
  background-image: none !important;
  color: var(--text) !important;
}

/* Counter Radzen material theme panel/card defaults */
.mat-card,
.mat-mdc-card,
.rz-card,
.rz-panel {
  background-color: var(--panel) !important;
  color: var(--text) !important;
  border-color: var(--line) !important;
}

/* Counter Radzen material dialog overlay */
.rz-dialog-mask {
  background: var(--modal-overlay) !important;
}

.rz-dialog {
  background: var(--panel) !important;
  color: var(--text) !important;
}

/* Counter Radzen material notification */
.rz-notification {
  background: var(--panel) !important;
  color: #000000 !important;
}

/* ============================================
   PRINT STYLES
   ============================================ */
@media print {
  body { background: #fff !important; }
  .nav-overlay, .nav-drawer, .hamburger-btn, .theme-toggle { display: none !important; }
  .cr-main-header, header.main-header { background: #fff !important; border-bottom: 1px solid #ddd !important; }
  .brand-title h1, .page-title-text h2 { color: #000 !important; }
}