/* ═══════════════════════════════════════════
   DevExtreme Override-Theme fuer HandwerksFlux Web

   Bringt den DevExtreme-JS-Scheduler (Plantafel — Field-Surface
   per DESIGN.md §14.7) und andere dx-Komponenten in HF-Brand-Compliance.

   Strategie:
   - Brand-Farben kommen aus dem Tenant-Branding (--bs-primary, etc.)
     und werden auf --dx-* Variablen projiziert
   - Status-Farben sind FIX nach DESIGN.md §14.1 (outdoor-tauglich)
   - Field-Sizing greift nur bei <... class="hf-field"> (siehe app.css)

   WICHTIG: Wird NACH dx.css geladen (siehe App.razor).
   ═══════════════════════════════════════════ */

/* ─── 1. dx-Variablen auf Bootstrap/HF-Tokens umbiegen ─── */
:root {
    /* Brand — folgt dem Tenant-Branding via Bootstrap */
    --dx-color-primary:   var(--bs-primary, #e87722);
    --dx-color-text:      var(--bs-body-color, #1a1a1a);
    --dx-color-main-bg:   var(--bs-tertiary-bg, #ffffff);
    --dx-color-border:    var(--bs-border-color, #d1d9e0);
    --dx-color-separator: var(--bs-border-color, #d1d9e0);
    --dx-color-icon:      #1a2e4a;
    --dx-color-link:      var(--bs-link-color, #1a2e4a);
    --dx-color-shadow:    rgba(26, 46, 74, 0.10);

    /* Status — FIX nach DESIGN.md §14.1 (kein Branding-Override) */
    --dx-color-success:   #2d7d46;
    --dx-color-warning:   #b45309;
    --dx-color-danger:    #dc2626;

    --dx-component-color-bg: var(--bs-tertiary-bg, #ffffff);

    /* Typografie — Default 16px (Buero), Field bumped auf 17px via .hf-field */
    --dx-font-size-md: 16px;
    --dx-font-size-sm: 14px;
    --dx-font-size-xs: 12px;
    --dx-font-size-lg: 18px;
    --dx-font-size-xl: 22px;

    /* Sizing — Default Buero, Field-Mode (.hf-field) ueberschreibt */
    --dx-toolbar-height: 56px;
    --dx-component-height: 44px;
    --dx-list-item-padding-block: 10px;
    --dx-list-item-padding-inline: 14px;

    /* Radien & Borders */
    --dx-border-radius: 8px;
    --dx-border-width: 1.5px;
}

/* ─── 2. Globale Font-Family — System-Sans erzwingen (DESIGN.md §3.1) ─── */
.dx-widget,
.dx-widget input,
.dx-widget textarea,
.dx-widget select,
.dx-widget button,
.dx-viewport {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
                 "Helvetica Neue", Arial, sans-serif !important;
    font-weight: 500;
}

.dx-widget h1, .dx-widget h2, .dx-widget h3 {
    font-weight: 700;
    letter-spacing: -0.01em;
    color: #1a2e4a;
}

/* ─── 3. Scheduler — Plantafel-Hauptscreen (klassifiziert als Field §14.7) ─── */

.dx-scheduler .dx-toolbar {
    background: var(--bs-tertiary-bg, #ffffff);
    border-bottom: 1.5px solid var(--bs-border-color, #d1d9e0);
    min-height: 56px;
    padding: 0 12px;
}
.dx-scheduler .dx-toolbar-label,
.dx-scheduler .dx-toolbar-label * {
    font-weight: 700;
    color: #1a2e4a;
    font-size: 18px;
}

.dx-scheduler-header,
.dx-scheduler-header-panel,
.dx-scheduler-header-panel-cell {
    background: var(--bs-body-bg, #f8f9fa) !important;
    color: #1a2e4a !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    border-color: var(--bs-border-color, #d1d9e0) !important;
}

.dx-scheduler-time-panel-cell,
.dx-scheduler-time-panel-row {
    background: var(--bs-body-bg, #f8f9fa) !important;
    color: #1a2e4a !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    border-color: var(--bs-border-color, #d1d9e0) !important;
}

.dx-scheduler-date-table-cell,
.dx-scheduler-date-table-row {
    background: var(--bs-tertiary-bg, #ffffff) !important;
    border-color: var(--bs-border-color, #d1d9e0) !important;
}
.dx-scheduler-date-table-cell:hover {
    background: var(--bs-body-bg, #f3f4f6) !important;
}
/* Heute / Aktueller Tag — orange-ton + 2px Bottom-Border */
.dx-scheduler-date-table-current-date {
    background: rgba(232, 119, 34, 0.08) !important;
    border-bottom: 2px solid var(--bs-primary, #e87722) !important;
}

/* Group-Header (Team-Spalten) — Navy-Bar mit weisser Schrift */
.dx-scheduler-group-header {
    background: #1a2e4a !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    padding: 10px 12px !important;
    border-color: #1a2e4a !important;
    min-height: 44px;
}

/* Appointment-Karten — 8px Radius, 1.5px Border, kein Shadow (§14.4) */
.dx-scheduler-appointment {
    border-radius: 8px !important;
    border: 1.5px solid rgba(0,0,0,0.15) !important;
    box-shadow: none !important;
    font-size: 13px;
    font-weight: 600;
    color: #ffffff;
    padding: 0 !important;
}
.dx-scheduler-appointment-content {
    padding: 4px 6px !important;
    color: #ffffff !important;
}
.dx-scheduler-appointment-content-date {
    color: rgba(255,255,255,0.85) !important;
    font-weight: 600 !important;
    font-size: 12px !important;
}
.dx-scheduler-appointment.dx-state-hover {
    border-color: #1a2e4a !important;
    box-shadow: none !important;
}

/* ─── 4. dx-Buttons (Toolbar, Navigation) ─── */
.dx-button {
    min-height: 44px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 14px;
    border-width: 1.5px;
}
.dx-button-mode-contained.dx-button-default,
.dx-button-mode-contained.dx-button-success {
    background: var(--bs-primary, #e87722);
    color: #ffffff;
    border-color: var(--bs-primary, #e87722);
}
.dx-button-mode-contained.dx-button-default.dx-state-hover,
.dx-button-mode-contained.dx-button-success.dx-state-hover {
    background: var(--bs-link-hover-color, #c96010);
    border-color: var(--bs-link-hover-color, #c96010);
}
.dx-button-mode-outlined.dx-button-normal {
    color: #1a2e4a;
    border-color: var(--bs-border-color, #d1d9e0);
}
.dx-button-mode-outlined.dx-button-normal.dx-state-hover {
    border-color: #1a2e4a;
    background: var(--bs-body-bg, #f8f9fa);
}
.dx-button.dx-state-active {
    transform: none !important;
}

/* ─── 5. dx-Inputs (TextBox/SelectBox/DateBox) ─── */
.dx-texteditor.dx-editor-outlined {
    border-radius: 8px;
    border-width: 1.5px;
    border-color: var(--bs-border-color, #d1d9e0);
    background: var(--bs-tertiary-bg, #ffffff);
    min-height: 44px;
}
.dx-texteditor.dx-editor-outlined.dx-state-focused,
.dx-texteditor.dx-editor-outlined.dx-state-active {
    border-color: #1a2e4a;
    box-shadow: none !important;
}
.dx-texteditor-input {
    color: var(--bs-body-color, #1a1a1a);
    font-size: 16px;
    font-weight: 500;
    padding: 10px 12px;
}
.dx-placeholder { color: #555e6b; }

/* ─── 6. dx-Popups & Dialogs ─── */
.dx-popup-wrapper > .dx-overlay-content {
    border-radius: 16px;
    border: 1.5px solid var(--bs-border-color, #d1d9e0);
    box-shadow: 0 8px 32px rgba(26, 46, 74, 0.20);
}
.dx-popup-title {
    background: #1a2e4a;
    color: #ffffff;
    font-weight: 700;
    font-size: 18px;
    border-radius: 16px 16px 0 0;
    padding: 14px 18px;
    border-bottom: none;
}
.dx-popup-title .dx-closebutton { color: #ffffff; }

/* ─── 7. dx-Toolbar (auch ausserhalb Scheduler) ─── */
.dx-toolbar {
    background: var(--bs-tertiary-bg, #ffffff);
    border-bottom: 1.5px solid var(--bs-border-color, #d1d9e0);
}

/* ─── 8. Selection-Highlights ─── */
.dx-state-selected,
.dx-list-item.dx-state-selected,
.dx-tab.dx-tab-selected {
    background: rgba(232, 119, 34, 0.10) !important;
    color: #1a2e4a !important;
    border-color: var(--bs-primary, #e87722) !important;
}

/* ─── 9. Tooltip ─── */
.dx-tooltip-wrapper > .dx-overlay-content {
    background: #1a2e4a !important;
    color: #ffffff !important;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    padding: 8px 12px;
    border: none;
}

/* ─── 10. DevExtreme Trial-Banner ausblenden (Lizenz spaeter) ─── */
.dx-license, .dx-trial-panel { display: none !important; }

/* ═══════════════════════════════════════════
   Field-Mode-Overrides — wirken nur in <... class="hf-field">

   Klassifikation pro Page siehe DESIGN.md §14.7.
   Alle Field-Spezifika werden in PR #3 in app.css fuer Bootstrap-
   Komponenten gesetzt; hier ergaenzen wir die DevExtreme-Pendants.
   ═══════════════════════════════════════════ */

/* dx-Buttons in Field-Pages: 52px statt 44px (Handschuhe §14.3) */
.hf-field .dx-button {
    min-height: 52px;
    font-size: 15px;
    padding: 0 1.5rem;
}

/* dx-Inputs in Field-Pages: 56px statt 44px (§14.3) */
.hf-field .dx-texteditor.dx-editor-outlined {
    min-height: 56px;
    border-width: 2px;
}
.hf-field .dx-texteditor-input {
    font-size: 17px;
    padding: 14px 12px;
}

/* dx-Toolbar in Field-Pages: 64px (§14.3) */
.hf-field .dx-toolbar,
.hf-field .dx-scheduler .dx-toolbar {
    min-height: 64px;
}

/* dx-Scheduler-Header / Time-Panel in Field-Pages: groesser */
.hf-field .dx-scheduler-header-panel-cell,
.hf-field .dx-scheduler-header-panel,
.hf-field .dx-scheduler-header { font-size: 15px !important; }
.hf-field .dx-scheduler-time-panel-cell { font-size: 14px !important; }

/* dx-Scheduler-Appointments in Field-Pages: groessere Schrift */
.hf-field .dx-scheduler-appointment { font-size: 14px; }
.hf-field .dx-scheduler-appointment-content-date { font-size: 13px !important; }