/* ============================================================
   Syncfusion Component Overrides
   Theme: bootstrap5.css (v32.2.3)

   Zentrale Datei fuer ALLE Syncfusion-Overrides.
   Alle Farben MUESSEN CSS Custom Properties aus app.css
   referenzieren (--primary, --secondary, etc.).

   Load order: nach bootstrap5.css, vor app.css
   ============================================================ */


/* ============================================================
   SfButton / SfButtonGroup
   ============================================================ */

/* Primary button */
.e-btn.e-primary, .e-btn.e-primary.e-control.e-btn {
    background-color: var(--primary);
    color: var(--primary-text);
    border: 1px solid var(--primary-hover);
    padding: 8px 16px;
    height: 40px;
}

.e-btn.e-primary .e-btn-icon, .e-btn.e-primary.e-control.e-btn .e-btn-icon {
    color: var(--primary-text);
}

.e-btn.e-primary:hover, .e-btn.e-primary.e-control.e-btn:hover {
    background-color: var(--primary-hover);
    color: var(--primary-text);
    border-color: var(--primary-active);
}

.e-btn.e-primary:active,
.e-btn.e-primary:focus,
.e-btn.e-primary.e-control.e-btn:active,
.e-btn.e-primary.e-control.e-btn:focus {
    background-color: var(--primary-active);
    color: var(--primary-text);
}

/* Secondary / Archive button */
.e-btn.e-secondary, .e-btn.e-secondary.e-control.e-btn {
    background-color: var(--secondary);
    color: var(--secondary-text);
    border: 1px solid var(--secondary);
    padding: 8px 16px;
    height: 40px;
}

.e-btn.e-secondary .e-btn-icon, .e-btn.e-secondary.e-control.e-btn .e-btn-icon {
    color: var(--secondary-text);
}

.e-btn.e-secondary:hover, .e-btn.e-secondary.e-control.e-btn:hover {
    background-color: var(--secondary-hover);
    color: var(--secondary-text);
    border-color: var(--secondary-hover);
}

.e-btn.e-secondary:active, .e-btn.e-secondary.e-control.e-btn:active {
    background-color: var(--secondary-active);
    color: var(--secondary-text);
    border-color: var(--secondary-active);
}

/* Danger / Cancel button */
.e-btn.e-danger, .e-btn.e-danger.e-control.e-btn {
    padding: 8px 16px;
    height: 40px;
    border: 1px solid #ff0000;
}

/* Outline / Delete button */
.e-btn.e-outline, .e-btn.e-outline.e-control.e-btn {
    background-color: var(--surface);
    color: var(--secondary);
    border: 1px solid var(--secondary);
    padding: 8px 16px;
    height: 40px;
}

.e-btn.e-outline .e-btn-icon, .e-btn.e-outline.e-control.e-btn .e-btn-icon {
    color: var(--secondary);
}

.e-btn.e-outline:hover, .e-btn.e-outline.e-control.e-btn:hover {
    background-color: var(--hover-bg) !important;
    color: var(--secondary) !important;
    border-color: var(--secondary) !important;
}

.e-btn.e-outline:active,
.e-btn.e-outline:focus,
.e-btn.e-outline.e-control.e-btn:active,
.e-btn.e-outline.e-control.e-btn:focus {
    color: var(--secondary) !important;
    background-color: var(--hover-bg) !important;
    box-shadow: 0 0 0 4px rgba(133, 149, 164, 0.2) !important; /* steel-300 */
}


/* Filter / Toggle buttons (e.g. in OfferListView) */
.e-btn.e-filter, .e-btn.e-filter.e-control.e-btn {
    background-color: var(--surface); /* #FEFEFE */
    color: var(--text-secondary); /* #334E68 */
    border: 1px solid var(--border-default); /* #ADB8C3 */
}

.e-btn.e-filter .e-btn-icon,
.e-btn.e-filter .info-mark,
.e-btn.e-filter.e-control.e-btn .e-btn-icon {
    color: var(--text-secondary); /* #334E68 */
}

.e-btn.e-filter:hover, .e-btn.e-filter.e-control.e-btn:hover {
    background-color: var(--hover-bg); /* #EFF1F3 */
    color: var(--text-primary); /* #0F172A */
    border-color: var(--border-default);
}

.e-btn.e-filter:hover .e-btn-icon,
.e-btn.e-filter:hover .info-mark,
.e-btn.e-filter.e-control.e-btn:hover .e-btn-icon {
    color: var(--text-primary); /* #0F172A */
}

/* Active state for filter toggle buttons */
.e-btn.e-filter.e-active,
.e-btn.e-filter.e-control.e-btn.e-active {
    background-color: var(--active-bg); /* #ECF9F8 teal-50 */
    border-color: var(--primary); /* #14B8A6 teal-500 */
    color: var(--primary-active); /* #0F8C7E teal-700 */
}

.e-btn.e-filter.e-active .e-btn-icon,
.e-btn.e-filter.e-active .info-mark,
.e-btn.e-filter.e-control.e-btn.e-active .e-btn-icon {
    color: var(--primary-active);
}


/* ============================================================
   SfSwitch
   Overrides all #0d6efd (Bootstrap blue) rules from bootstrap5.css
   ============================================================ */

/* "On" label background (this is the rule you saw in the browser!) */
.e-switch-wrapper .e-switch-on,
.e-css.e-switch-wrapper .e-switch-on {
    background-color: var(--primary);
    color: #fff;
}

/* Active state: track background + border */
.e-switch-wrapper .e-switch-inner.e-switch-active,
.e-css.e-switch-wrapper .e-switch-inner.e-switch-active {
    background-color: var(--primary);
    border-color: var(--primary);
}

/* Hover: track */
.e-switch-wrapper:hover .e-switch-inner.e-switch-active,
.e-css.e-switch-wrapper:hover .e-switch-inner.e-switch-active {
    background-color: var(--primary-hover);
    border-color: var(--primary-hover);
}

/* Hover: inner "on" label */
.e-switch-wrapper:hover .e-switch-inner.e-switch-active .e-switch-on,
.e-css.e-switch-wrapper:hover .e-switch-inner.e-switch-active .e-switch-on {
    background-color: var(--primary-hover);
    color: #fff;
}

/* Focus: track border */
.e-switch-wrapper.e-focus .e-switch-inner.e-switch-active,
.e-switch-wrapper:focus .e-switch-inner.e-switch-active,
.e-css.e-switch-wrapper.e-focus .e-switch-inner.e-switch-active,
.e-css.e-switch-wrapper:focus .e-switch-inner.e-switch-active {
    background-color: #fff;
    border-color: var(--primary);
    outline: none;
}

/* Active (pressed): track border */
.e-switch-wrapper.e-active .e-switch-inner.e-switch-active,
.e-switch-wrapper:active .e-switch-inner.e-switch-active,
.e-css.e-switch-wrapper.e-active .e-switch-inner.e-switch-active,
.e-css.e-switch-wrapper:active .e-switch-inner.e-switch-active {
    background-color: #fff;
    border-color: var(--primary);
    outline: none;
}

/* Disabled active state */
.e-switch-wrapper.e-switch-disabled .e-switch-inner.e-switch-active,
.e-css.e-switch-wrapper.e-switch-disabled .e-switch-inner.e-switch-active {
    background-color: var(--primary);
    border-color: var(--primary);
    opacity: 0.65;
}


/* ============================================================
   SfDropDownList
   ============================================================ */

/* Hide dropdown arrow for single-option dropdowns */
.single-option .e-ddl-icon {
    display: none !important;
}


/* ============================================================
   SfCheckBox
   ============================================================ */
/* TODO: Override checked state to use --primary */


/* ============================================================
   SfDatePicker / SfDateRangePicker / SfTimePicker
   ============================================================ */

/* 
   Erzwingt den Rahmen auf dem Wrapper-Element. 
   Syncfusion Bootstrap-5 setzt den Rahmen oft auf 0 und nutzt Box-Shadow oder 
   setzt ihn nur auf das innere Input. Wir wollen konsistent 1px solid.
*/
.e-control-wrapper.e-input-group.e-datepicker,
.e-control-wrapper.e-input-group.e-datetimepicker,
.e-control-wrapper.e-input-group.e-daterangepicker,
.e-control-wrapper.e-input-group.e-timepicker,
.e-control-wrapper.e-input-group.e-datepicker:hover,
.e-control-wrapper.e-input-group.e-datetimepicker:hover,
.e-control-wrapper.e-input-group.e-daterangepicker:hover,
.e-control-wrapper.e-input-group.e-timepicker:hover,
/* Selektoren ohne .e-control-wrapper als Fallback */
.e-input-group.e-datepicker,
.e-input-group.e-datetimepicker,
.e-input-group.e-daterangepicker,
.e-input-group.e-timepicker {
    border: 1px solid var(--border-default, #ADB8C3) !important;
    border-width: 1px !important;
}

/* Fokus-Zustand: Rahmenfarbe zu Primary ändern */
.e-control-wrapper.e-input-group.e-datepicker.e-input-focus,
.e-control-wrapper.e-input-group.e-datetimepicker.e-input-focus,
.e-control-wrapper.e-input-group.e-daterangepicker.e-input-focus,
.e-control-wrapper.e-input-group.e-timepicker.e-input-focus,
.e-input-group.e-datepicker.e-input-focus,
.e-input-group.e-datetimepicker.e-input-focus,
.e-input-group.e-daterangepicker.e-input-focus,
.e-input-group.e-timepicker.e-input-focus {
    border-color: var(--primary, #14B8A6) !important;
    box-shadow: 0 0 0 1px var(--primary, #14B8A6) !important;
}

/* 
   Inneres Input-Feld: Rahmen entfernen.
   Syncfusion setzt hier oft border-width: 0, aber wir erzwingen es, 
   damit nur der Wrapper den Rahmen zeigt.
*/
.e-control-wrapper.e-input-group.e-datepicker input.e-input,
.e-control-wrapper.e-input-group.e-datetimepicker input.e-input,
.e-control-wrapper.e-input-group.e-daterangepicker input.e-input,
.e-control-wrapper.e-input-group.e-timepicker input.e-input,
.e-input-group.e-datepicker input.e-input,
.e-input-group.e-datetimepicker input.e-input,
.e-input-group.e-daterangepicker input.e-input,
.e-input-group.e-timepicker input.e-input {
    border: none !important;
    border-width: 0 !important;
    padding-left: 8px !important; /* Etwas Padding für die Optik */
}

/* Icon-Farbe anpassen */
.e-control-wrapper.e-input-group.e-datepicker .e-input-group-icon,
.e-control-wrapper.e-input-group.e-datetimepicker .e-input-group-icon,
.e-control-wrapper.e-input-group.e-daterangepicker .e-input-group-icon,
.e-control-wrapper.e-input-group.e-timepicker .e-input-group-icon {
    color: var(--text-secondary, #334E68) !important;
}

/* TODO: Override selected date highlight to use --primary */


/* ============================================================
   SfGrid
   ============================================================ */
/* TODO: Override row selection, header, pager active to use --primary */


/* ============================================================
   SfStepper
   ============================================================ */

/* Grundlinie */
.booking-stepper .e-stepper-progressbar {
    background-color: var(--border-light, #D6DCE1) !important;
    height: 2px !important;
    border-radius: 999px;
}

/* Gefüllter Progress-Anteil */
.booking-stepper .e-stepper-progressbar .e-progressbar-value {
    background-color: var(--border-default, #ADB8C3) !important;
    height: 2px !important;
    border-radius: 999px;
}

/* Active / selected */
.booking-stepper .e-step-container.e-step-selected .e-step,
.booking-stepper .e-step-container.e-step-selected .e-indicator {
    background-color: var(--active-bg, #ECF9F8) !important;
    border: 2px solid var(--primary, #14B8A6) !important;
    color: var(--primary-active, #0F8C7E) !important;
    border-radius: 999px !important;
    box-shadow: none !important;
    outline: none !important;
}

.booking-stepper .e-step-container.e-step-selected .e-label {
    color: var(--primary-active, #0F8C7E) !important;
    font-weight: 700 !important;
}


/* Completed */
.booking-stepper .e-step-container.e-step-completed .e-step,
.booking-stepper .e-step-container.e-step-completed .e-indicator {
    background-color: var(--surface, #FEFEFE) !important;
    border: 2px solid var(--border-default, #ADB8C3) !important;
    color: var(--text-secondary, #334E68) !important;
    border-radius: 999px !important;
}

.booking-stepper .e-step-container.e-step-completed .e-label {
    color: var(--text-primary, #0F172A) !important;
    font-weight: 600 !important;
}

/* Upcoming */
.booking-stepper .e-step-container:not(.e-step-selected):not(.e-step-completed) .e-step,
.booking-stepper .e-step-container:not(.e-step-selected):not(.e-step-completed) .e-indicator {
    background-color: var(--surface, #FEFEFE) !important;
    border: 2px solid var(--border-light, #D6DCE1) !important;
    color: var(--border-default, #ADB8C3) !important;
    border-radius: 999px !important;
}

.booking-stepper .e-step-container:not(.e-step-selected):not(.e-step-completed) .e-label {
    color: var(--text-muted, #6F747F) !important;
    font-weight: 500 !important;
}

/* Optional: Hover neutralisieren bei ReadOnly */
.booking-stepper .e-step-container .e-step:hover,
.booking-stepper .e-step-container .e-indicator:hover {
    box-shadow: none !important;
    cursor: default !important;
}


/* ============================================================
   SfAccordion
   ============================================================ */
/* Sidebar Background */
.e-sidebar.e-control.e-lib.e-push {
    background-color: var(--sidebar-bg) !important;
}

.e-accordion.app-nav-accordion,
.e-accordion.app-nav-accordion .e-acrdn-item {
    background-color: transparent !important;
    border-color: var(--sidebar-divider) !important;
}

/* Default state (collapsed) */
.e-accordion.app-nav-accordion .e-acrdn-item .e-acrdn-header .e-acrdn-header-content,
.e-accordion.app-nav-accordion .e-acrdn-item .e-acrdn-header .e-acrdn-header-content a,
.e-accordion.app-nav-accordion .e-acrdn-item .e-acrdn-header .e-icons {
    color: var(--menu-text) !important;
}

/* Expanded Parent Header Background & Hover */
.e-accordion.app-nav-accordion .e-acrdn-item.e-expand-state > .e-acrdn-header {
    background-color: var(--menu-parent-open-bg) !important;
}

.e-accordion.app-nav-accordion .e-acrdn-item.e-expand-state > .e-acrdn-header .e-acrdn-header-content,
.e-accordion.app-nav-accordion .e-acrdn-item.e-expand-state > .e-acrdn-header .e-acrdn-header-content a,
.e-accordion.app-nav-accordion .e-acrdn-item.e-expand-state > .e-acrdn-header .e-icons {
    color: var(--menu-parent-open-text) !important;
}

.e-accordion.app-nav-accordion .e-acrdn-item .e-acrdn-header:hover {
    background-color: var(--menu-hover-bg) !important;
}

.e-accordion.app-nav-accordion .e-acrdn-item .e-acrdn-header {
    padding: 0 !important;
}

.e-accordion.app-nav-accordion .e-acrdn-item .e-acrdn-header .e-acrdn-header-content {
    flex: 1;
    padding: 12px 16px; /* Standard Accordion Padding wiederherstellen */
    overflow: visible !important;
}

.e-accordion.app-nav-accordion .e-acrdn-item .e-acrdn-header .e-acrdn-header-content a {
    display: block;
    margin: -12px -16px;
    padding: 12px 16px;
    white-space: nowrap;
}

/* Icons properly positioned within header */
.e-accordion.app-nav-accordion .e-acrdn-item .e-acrdn-header .e-icons {
    padding: 12px;
}

/* Active NavLink state (specifically for items without children like Home/Offers) */
.e-accordion.app-nav-accordion .e-acrdn-item .e-acrdn-header .e-acrdn-header-content a.active {
    color: var(--menu-active-text) !important;
    background-color: var(--menu-active-bg) !important;
    font-weight: 600;
}

.e-accordion.app-nav-accordion .e-acrdn-item .e-acrdn-header .e-icons.active {
    color: var(--menu-active-text) !important;
}

.e-accordion.app-nav-accordion .e-acrdn-item:has(.e-icons.active) .e-acrdn-header {
    background-color: var(--menu-active-bg) !important;
}

/* Sub-item (Leaf) Styles */
.e-accordion.app-nav-accordion .e-acrdn-content .nav-link {
    color: var(--menu-text) !important;
    padding: 0.5rem 1rem !important;
    padding-left: 2.5rem !important; /* Einrueckung fuer Unterpunkte */
    display: block;
    text-decoration: none;
}

.e-accordion.app-nav-accordion .e-acrdn-content .nav-link:hover {
    background-color: var(--menu-hover-bg) !important;
    color: var(--menu-hover-text) !important;
}

.e-accordion.app-nav-accordion .e-acrdn-content .nav-link.active {
    background-color: var(--menu-active-bg) !important;
    color: var(--menu-active-text) !important;
    font-weight: 600;
}

/* Content-Akkordions (OfferOverview etc.) — brand-konforme Oberflächen */
.e-accordion:not(.app-nav-accordion) .e-acrdn-header {
    background-color: var(--surface, #FEFEFE) !important;
    border-bottom: 1px solid var(--border-light, #D6DCE1) !important;
}

.e-accordion:not(.app-nav-accordion) .e-acrdn-item .e-acrdn-header:focus,
.e-accordion:not(.app-nav-accordion) .e-acrdn-item .e-acrdn-header:focus-visible {
    box-shadow: none !important;
    border-bottom: 1px solid var(--border-light, #D6DCE1) !important;
    outline: none !important;
    background: inherit !important;
}

.e-accordion:not(.app-nav-accordion) .e-acrdn-header:hover {
    background-color: var(--hover-bg, #EFF1F3) !important;
}

.e-accordion:not(.app-nav-accordion) .e-acrdn-item.e-expand-state > .e-acrdn-header {
    background-color: var(--active-bg, #ECF9F8) !important;
    border-left: 3px solid var(--primary, #14B8A6) !important;
}

/* Falls der Header im expandierten Zustand einen Fokus bekommt */
.e-accordion:not(.app-nav-accordion) .e-acrdn-item.e-expand-state > .e-acrdn-header:focus {
    background-color: var(--active-bg, #ECF9F8) !important;
}

.e-accordion:not(.app-nav-accordion) .e-acrdn-item.e-expand-state > .e-acrdn-header .booking-title {
    color: var(--primary-active, #0F8C7E) !important;
}

.e-accordion:not(.app-nav-accordion) .e-acrdn-item.e-expand-state > .e-acrdn-header .booking-header .e-icons,
.e-accordion:not(.app-nav-accordion) .e-acrdn-item.e-expand-state > .e-acrdn-header .e-toggle-icon {
    color: var(--primary-active, #0F8C7E) !important;
}

.e-accordion:not(.app-nav-accordion) .e-acrdn-content {
    background-color: var(--surface, #FEFEFE) !important;
}


/* ============================================================
   SfNumericTextBox
   ============================================================ */
.e-numeric.e-control-wrapper.e-outline.text-white input {
    color: white !important;
}

.e-numeric.e-control-wrapper.e-outline.text-white {
    border-color: rgba(255, 255, 255, 0.5) !important;
}

.e-numeric.e-control-wrapper.e-outline.text-white.e-input-focus {
    border-color: white !important;
}

/* ============================================================
   SfTab
   ============================================================ */

/* Tab header bottom margin */
.e-tab .e-tab-header {
    margin-bottom: 20px;
}

/* 1. Standardzustand — Steel Blue, transparent */
.e-tab .e-tab-header .e-toolbar-item .e-tab-wrap .e-tab-text {
    font-weight: 400 !important;
    color: var(--text-secondary); /* #334E68 steel-500 */
}

.e-tab .e-tab-header .e-toolbar-item .e-tab-wrap {
    background: transparent;
    border: 1px solid transparent;
}

.e-tab .e-tab-header .e-toolbar-item .e-tab-icon {
    color: var(--text-secondary);
}

/* 2. Hover-Zustand — Steel-50 Hintergrund */
.e-tab .e-tab-header .e-toolbar-item .e-tab-wrap:hover .e-tab-text {
    font-weight: 400 !important;
    color: var(--text-primary);
}

.e-tab .e-tab-header .e-toolbar-item .e-tab-wrap:hover {
    background: var(--hover-bg); /* #EFF1F3 steel-50 */
    border: 1px solid var(--border-light);
    border-radius: 4px 4px 0 0;
}

.e-tab .e-tab-header .e-toolbar-item .e-tab-wrap:hover .e-tab-icon {
    color: var(--text-primary);
}

/* 3. Aktiver Zustand — Teal-700, Surface, border-light */
.e-tab .e-tab-header .e-toolbar-item.e-active .e-tab-wrap .e-tab-text {
    font-weight: 600 !important;
    color: var(--primary-active) !important; /* #0F8C7E teal-700 */
}

.e-tab .e-tab-header .e-toolbar-item.e-active {
    border: 1px solid var(--border-light); /* #D6DCE1 steel-100 */
    border-radius: 4px 4px 0 0;
}

.e-tab .e-tab-header:not(.e-vertical) .e-toolbar-item.e-active {
    border-bottom: 1px solid var(--surface); /* #FEFEFE — merges with content area */
}

.e-tab .e-tab-header .e-toolbar-item.e-active .e-tab-wrap {
    background: var(--surface); /* #FEFEFE */
}

.e-tab .e-tab-header .e-toolbar-item.e-active .e-tab-icon {
    color: var(--primary-active) !important;
}

/* Active + hover: Surface und Teal-700 halten */
.e-tab .e-tab-header .e-toolbar-item.e-active:hover {
    background: var(--surface);
}

.e-tab .e-tab-header .e-toolbar-item.e-active .e-tab-wrap:hover .e-tab-text,
.e-tab .e-tab-header .e-toolbar-item.e-active .e-tab-wrap:hover .e-tab-icon {
    color: var(--primary-active) !important;
}

/* ============================================================
   SfPager
   ============================================================ */

/* Non-selected page numbers — bootstrap5 theme default is a
   plain link blue (#0d6efd), unrelated to the app's brand palette. */
.e-pager .e-numericitem,
.e-pager .e-numericitem:hover {
    color: var(--text-secondary);
}

/* Selected page number — default theme also uses that same
   blue, unrelated to the app's brand teal. */
.e-pager .e-currentitem,
.e-pager .e-currentitem:hover,
.e-pager .e-currentitem.e-numericitem.e-focused {
    background: var(--primary);
    color: var(--primary-text);
}

/* Keyboard-focus ring */
.e-pager .e-focused {
    box-shadow: 0 0 0 1px var(--primary) inset;
}