/*
   ═══════════════════════════════════════════════════════════════════════════════
   MODERN FORM CONTROLS - Layout & Visual Enhancements
   ═══════════════════════════════════════════════════════════════════════════════

   ARCHITECTURE:
   This file works TOGETHER with dx-theme-overrides.css:

   1. dx-theme-overrides.css (loads first):
      - Overrides DevExpress CSS VARIABLES (--dxbl-text-edit-bg, etc.)
      - Controls: backgrounds, borders, text colors, validation colors
      - DevExpress uses these variables for hover/focus/invalid states

   2. modern-forms.css (this file, loads second):
      - Layout properties DevExpress doesn't control via variables
      - Visual enhancements (dropdowns, calendars, animations)
      - Component-specific polish (spin buttons, clear buttons)

   WHY THIS SPLIT:
   - DevExpress manages state changes via CSS variable cascade
   - Setting properties (even without !important) blocks this cascade
   - By only overriding VARIABLES, validation/hover/focus work natively

   WHAT'S IN THIS FILE:
   - Height, border-radius, font-family for form controls
   - Spin button and dropdown button layouts
   - Calendar and date picker visuals
   - Loading panel styling
   - Action buttons (success, danger, etc.)
   - Alert and empty state components

   WHAT'S NOT IN THIS FILE (moved to dx-theme-overrides.css):
   - background, border-color, color for base components
   - hover/focus state colors
   - validation colors

   ═══════════════════════════════════════════════════════════════════════════════
   !IMPORTANT USAGE STRATEGY
   ═══════════════════════════════════════════════════════════════════════════════

   This file uses !important extensively (~600 occurrences). This is INTENTIONAL
   because DevExpress Blazor components:

   1. Use high-specificity selectors (e.g., .dxbl-btn.dxbl-btn-outline-secondary)
   2. Apply inline styles for some properties
   3. Have internal CSS that loads with high priority

   WHEN !important IS NECESSARY:
   ✓ Overriding DevExpress .dxbl-* component classes
   ✓ Resetting .dxbl-btn defaults (min-width, min-height, line-height)
   ✓ Ensuring consistent height/sizing across component variants

   WHEN !important CAN BE AVOIDED:
   ✓ Custom utility classes (e.g., .modern-alert, .modern-detail-grid)
   ✓ Styling that doesn't conflict with DevExpress selectors
   ✓ :root variable definitions

   BEST PRACTICE REFERENCE:
   - DevExpress recommends using --dxds-* and --dxbl-* variables when possible
   - For properties not exposed as variables, !important is often required
   - See: https://docs.devexpress.com/Blazor/401523/themes

   Last Updated: 2026-01-27
   ═══════════════════════════════════════════════════════════════════════════════
*/

/* Modern Form Controls - Matching Search Bar Style */
/* Simple, clean dark theme aligned with grid search box */
/* Note: Montserrat font is loaded globally via App.razor */

:root {
    --form-font: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
    --form-bg: rgba(51, 65, 85, 0.4);
    --form-bg-hover: rgba(51, 65, 85, 0.5);
    --form-border: rgba(100, 116, 139, 0.2);
    --form-border-hover: rgba(100, 116, 139, 0.35);
    --form-border-focus: rgba(59, 130, 246, 0.4);
    --form-text: #ffffff;
    --form-text-muted: rgba(148, 163, 184, 0.85);  /* WCAG AA compliant */
    --form-placeholder: rgba(148, 163, 184, 0.5);
    --form-accent: #3b82f6;
    --form-radius: 6px;
    --form-height: 38px;
}

/* ============================================
   BASE INPUT WRAPPERS - Layout Only
   ============================================

   DevExpress Best Practice:
   - Background, border, text colors are handled via CSS variables
     in dx-theme-overrides.css (--dxbl-text-edit-bg, etc.)
   - This file only handles LAYOUT properties that DevExpress
     doesn't control via variables (height, border-radius, etc.)
   - This allows DevExpress to manage hover/focus/invalid states natively
   ============================================ */

/* ============================================
   BASE FORM CONTROL STYLING
   ============================================

   IMPORTANT: We use DevExpress's CSS variables for border/background
   so that DevExpress's validation state changes work automatically.

   DevExpress changes --dxbl-text-edit-border-color when .invalid is added.
   By using that variable here, validation "just works".

   We only override layout properties that DevExpress doesn't control.
   ============================================ */
.dxbl-text-edit,
.dxbl-spin-edit,
.dxbl-combo-box,
.dxbl-date-edit,
.dxbl-tag-box,
.dxbl-time-edit,
.dxbl-memo-edit {
    /* Use DevExpress variables - validation states change these automatically */
    border: var(--dxbl-text-edit-border-width, 1px) solid var(--dxbl-text-edit-border-color) !important;
    background: var(--dxbl-text-edit-bg) !important;
    /* Layout properties we control */
    border-radius: var(--form-radius) !important;
    font-family: var(--form-font) !important;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

/* Optional: Add glow effect for invalid state (enhances DevExpress styling) */
.dxbl-text-edit.invalid,
.dxbl-spin-edit.invalid,
.dxbl-combo-box.invalid,
.dxbl-date-edit.invalid,
.dxbl-tag-box.invalid,
.dxbl-time-edit.invalid,
.dxbl-memo-edit.invalid {
    box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.15);
}

/* Fixed height for single-line inputs (excludes DxMemo) */
.dxbl-text-edit:not(.dxbl-memo-edit),
.dxbl-spin-edit,
.dxbl-combo-box,
.dxbl-date-edit,
.dxbl-tag-box,
.dxbl-time-edit {
    height: var(--form-height) !important;
    min-height: var(--form-height) !important;
}

/* NOTE: Hover and focus states are now handled by DevExpress variables
   in dx-theme-overrides.css via --dxbl-text-edit-border-hovered-color etc. */

/* ============================================
   INNER INPUT FIELDS
   ============================================ */

.dxbl-text-edit-input,
input.dxbl-text-edit-input {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    color: var(--form-text) !important;
    font-weight: 400 !important;
    font-size: 0.85rem !important;
    font-family: var(--form-font) !important;
    padding: 0 0.75rem !important;
    height: 100% !important;
}

.dxbl-text-edit-input::placeholder,
input.dxbl-text-edit-input::placeholder {
    color: var(--form-placeholder) !important;
    font-weight: 400 !important;
}

/* ============================================
   SPIN EDIT - Compact buttons
   ============================================ */

/* Spin buttons container - match input border-radius */
.dxbl-spin-btns,
.dxbl-spin-btns.dxbl-btn-group-vertical {
    width: 28px !important;
    min-width: 28px !important;
    max-width: 28px !important;
    border-left: 1px solid var(--form-border) !important;
    border-radius: 0 6px 6px 0 !important;
    background: transparent !important;
    overflow: hidden !important;
}

/* ============================================
   SPIN EDIT BUTTONS - DevExpress Safe Override

   Strategy: Override ALL .dxbl-btn defaults that
   affect sizing, since we can't use all:unset.
   Must explicitly reset: min-width, min-height,
   line-height, and any padding from .dxbl-btn
   ============================================ */
.dxbl-spin-btn-inc,
.dxbl-spin-btn-dec,
button.dxbl-spin-btn-inc,
button.dxbl-spin-btn-dec,
.dxbl-btn.dxbl-spin-btn-inc,
.dxbl-btn.dxbl-spin-btn-dec,
.dxbl-btn.dxbl-btn-outline-secondary.dxbl-spin-btn-inc,
.dxbl-btn.dxbl-btn-outline-secondary.dxbl-spin-btn-dec {
    /* Reset .dxbl-btn defaults that cause oversizing */
    appearance: none !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: 28px !important;
    line-height: 1 !important;

    /* Visual - subtle background for visibility */
    background: rgba(100, 116, 139, 0.15) !important;
    border: none !important;
    box-shadow: none !important;

    /* Layout - explicit sizing */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 28px !important;
    height: 50% !important;
    padding: 0 !important;
    margin: 0 !important;

    /* Typography - more visible */
    color: rgba(148, 163, 184, 0.9) !important;
    font-size: 0.75rem !important;

    /* Interaction */
    cursor: pointer !important;
    transition: background 0.15s ease, color 0.15s ease !important;
}

/* Top button - rounded top-right corner only */
.dxbl-spin-btn-inc,
button.dxbl-spin-btn-inc,
.dxbl-btn.dxbl-spin-btn-inc {
    border-radius: 0 6px 0 0 !important;
    border-bottom: 1px solid rgba(100, 116, 139, 0.25) !important;
}

/* Bottom button - rounded bottom-right corner only */
.dxbl-spin-btn-dec,
button.dxbl-spin-btn-dec,
.dxbl-btn.dxbl-spin-btn-dec {
    border-radius: 0 0 6px 0 !important;
}

/* Focus state for accessibility */
.dxbl-spin-btn-inc:focus-visible,
.dxbl-spin-btn-dec:focus-visible {
    outline: 2px solid var(--form-accent) !important;
    outline-offset: -2px !important;
}

/* Hover - more prominent */
.dxbl-spin-btn-inc:hover,
.dxbl-spin-btn-dec:hover,
.dxbl-btn.dxbl-spin-btn-inc:hover,
.dxbl-btn.dxbl-spin-btn-dec:hover {
    background: rgba(59, 130, 246, 0.15) !important;
    color: var(--form-accent) !important;
}

/* Icons - larger and more visible */
.dxbl-spin-btn-inc .dxbl-image,
.dxbl-spin-btn-dec .dxbl-image {
    width: 12px !important;
    height: 12px !important;
    opacity: 0.85 !important;
}

.dxbl-spin-btn-inc:hover .dxbl-image,
.dxbl-spin-btn-dec:hover .dxbl-image {
    opacity: 1 !important;
}

/* ============================================
   DROPDOWN BUTTON - Compact
   ============================================ */

/* Button group container */
.dxbl-btn-group-right {
    background: transparent !important;
}

/* ============================================
   DROPDOWN BUTTON - DevExpress Safe Override
   ============================================ */
.dxbl-edit-btn-dropdown,
button.dxbl-edit-btn-dropdown,
.dxbl-btn.dxbl-edit-btn-dropdown,
.dxbl-btn.dxbl-btn-outline-secondary.dxbl-edit-btn-dropdown {
    /* Reset .dxbl-btn defaults */
    appearance: none !important;
    min-height: 0 !important;
    line-height: 1 !important;

    /* Visual - subtle background for visibility */
    background: rgba(100, 116, 139, 0.12) !important;
    border: none !important;
    border-left: 1px solid var(--form-border) !important;
    border-radius: 0 6px 6px 0 !important;
    box-shadow: none !important;

    /* Layout - explicit sizing (28px to match spin edit) */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 28px !important;
    min-width: 28px !important;
    max-width: 28px !important;
    height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;

    /* Typography - more visible */
    color: rgba(148, 163, 184, 0.9) !important;
    font-size: 0.75rem !important;

    /* Interaction */
    cursor: pointer !important;
    transition: background 0.15s ease, color 0.15s ease !important;
}

/* Focus state for accessibility */
.dxbl-edit-btn-dropdown:focus-visible {
    outline: 2px solid var(--form-accent) !important;
    outline-offset: -2px !important;
}

/* Hover - more prominent */
.dxbl-edit-btn-dropdown:hover,
.dxbl-btn.dxbl-edit-btn-dropdown:hover {
    background: rgba(59, 130, 246, 0.2) !important;
    color: var(--form-accent) !important;
}

/* Icon */
.dxbl-edit-btn-dropdown .dxbl-image {
    width: 10px !important;
    height: 10px !important;
    opacity: 0.85 !important;
}

.dxbl-edit-btn-dropdown:hover .dxbl-image {
    opacity: 1 !important;
}

/* ============================================
   CLEAR BUTTON (X) - DevExpress Safe Override
   ============================================ */
.dxbl-edit-btn-clear,
.dxbl-btn.dxbl-edit-btn-clear {
    /* Reset .dxbl-btn defaults */
    appearance: none !important;
    min-width: 0 !important;
    min-height: 0 !important;
    line-height: 1 !important;

    /* Visual */
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 4px !important;

    /* Layout - explicit sizing */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 24px !important;
    max-width: 24px !important;
    height: 24px !important;
    max-height: 24px !important;
    padding: 0 !important;
    margin: 0 4px !important;

    /* Typography */
    color: var(--form-text-muted) !important;
    font-size: 0.75rem !important;

    /* Interaction */
    cursor: pointer !important;
    transition: background 0.15s ease, color 0.15s ease !important;
}

.dxbl-edit-btn-clear:hover {
    background: rgba(239, 68, 68, 0.15) !important;
    color: rgba(239, 68, 68, 0.9) !important;
}

.dxbl-edit-btn-clear .dxbl-image {
    width: 10px !important;
    height: 10px !important;
}

/* ============================================
   DROPDOWN POPUP / LIST
   ============================================ */

.dxbl-dropdown,
.dxbl-popup {
    background: rgba(30, 41, 59, 0.98) !important;
    border: 1px solid var(--form-border) !important;
    border-radius: var(--form-radius) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4) !important;
    backdrop-filter: blur(12px) !important;
}

.dxbl-listbox {
    background: transparent !important;
    padding: 4px !important;
}

.dxbl-listbox-item {
    background: transparent !important;
    color: var(--form-text) !important;
    font-family: var(--form-font) !important;
    font-size: 0.85rem !important;
    padding: 0.5rem 0.75rem !important;
    border-radius: 4px !important;
    margin: 1px 0 !important;
}

.dxbl-listbox-item:hover {
    background: rgba(59, 130, 246, 0.15) !important;
}

.dxbl-listbox-item.dxbl-selected,
.dxbl-listbox-item.dxbl-active {
    background: rgba(59, 130, 246, 0.25) !important;
}

/* ============================================
   DROPDOWN DIALOG (Date/Time Picker Container)
   ============================================ */

.dxbl-dropdown-dialog,
.dxbl-edit-dropdown {
    background: rgba(30, 41, 59, 0.98) !important;
    border: 1px solid var(--form-border) !important;
    border-radius: 8px !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5) !important;
    backdrop-filter: blur(16px) !important;
    overflow: hidden !important;
}

.dxbl-dropdown-body,
.dxbl-edit-dropdown-body {
    background: transparent !important;
    padding: 0 !important;
}

/* ============================================
   DATE/TIME TABS
   ============================================ */

.dxbl-tabs.dxbl-date-time-edit-tabs {
    background: transparent !important;
}

.dxbl-tabs-tablist {
    background: rgba(51, 65, 85, 0.3) !important;
    border-bottom: 1px solid var(--form-border) !important;
    padding: 4px !important;
    gap: 4px !important;
}

.dxbl-tabs-tablist ul {
    gap: 4px !important;
}

.dxbl-tabs-item {
    background: transparent !important;
    border: none !important;
    border-radius: 4px !important;
    color: var(--form-text-muted) !important;
    font-family: var(--form-font) !important;
    font-size: 0.8rem !important;
    font-weight: 500 !important;
    padding: 6px 16px !important;
    transition: all 0.15s ease !important;
}

.dxbl-tabs-item:hover {
    background: rgba(59, 130, 246, 0.1) !important;
    color: var(--form-text) !important;
}

.dxbl-tabs-item.dxbl-active {
    background: rgba(59, 130, 246, 0.2) !important;
    color: var(--form-text) !important;
}

.dxbl-tabs-content-panel {
    background: transparent !important;
}

/* ============================================
   CALENDAR
   ============================================ */

.dxbl-calendar {
    background: transparent !important;
    font-family: var(--form-font) !important;
    padding: 12px !important;
}

/* Calendar Header */
.dxbl-calendar-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 0 12px 0 !important;
    border-bottom: 1px solid var(--form-border) !important;
    margin-bottom: 8px !important;
}

/* ============================================
   CALENDAR NAVIGATION BUTTONS - DevExpress Safe Override
   ============================================ */
.dxbl-calendar-header button,
.dxbl-calendar-header .dxbl-btn,
.dxbl-btn.dxbl-btn-tool,
.dxbl-btn.dxbl-btn-text-secondary.dxbl-btn-tool {
    /* Reset .dxbl-btn defaults */
    appearance: none !important;
    min-width: 0 !important;
    min-height: 0 !important;
    line-height: 1 !important;

    /* Visual */
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;

    /* Layout - explicit sizing */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 28px !important;
    max-width: 28px !important;
    height: 28px !important;
    max-height: 28px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 4px !important;
    /* Typography */
    color: var(--form-text-muted) !important;
    font: inherit !important;
    /* Interaction */
    cursor: pointer !important;
    transition: all 0.15s ease !important;
}

/* Focus state for accessibility */
.dxbl-calendar-header button:focus-visible,
.dxbl-calendar-header .dxbl-btn:focus-visible,
.dxbl-btn.dxbl-btn-tool:focus-visible {
    outline: 2px solid var(--form-accent) !important;
    outline-offset: -2px !important;
}

.dxbl-calendar-header button:hover,
.dxbl-calendar-header .dxbl-btn:hover {
    background: rgba(59, 130, 246, 0.15) !important;
    color: var(--form-accent) !important;
}

.dxbl-calendar-header button .dxbl-image,
.dxbl-calendar-header .dxbl-btn .dxbl-image {
    width: 14px !important;
    height: 14px !important;
}

/* Calendar Title Button */
.dxbl-calendar-header-title-btn,
.dxbl-btn.dxbl-calendar-header-title-btn {
    width: auto !important;
    padding: 4px 12px !important;
    font-weight: 600 !important;
    font-size: 0.9rem !important;
    color: var(--form-text) !important;
}

.dxbl-calendar-header-title-btn .dxbl-btn-caption {
    color: var(--form-text) !important;
    font-weight: 600 !important;
}

/* Weekday Headers */
.dxbl-calendar-days-of-week th {
    color: var(--form-text-muted) !important;
    font-family: var(--form-font) !important;
    font-size: 0.7rem !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    padding: 8px 4px !important;
}

/* Week Numbers */
.dxbl-calendar-week-number {
    color: var(--form-text-muted) !important;
    font-size: 0.7rem !important;
    opacity: 0.6 !important;
}

/* Day Cells */
.dxbl-calendar-day,
.dxbl-calendar-cell {
    color: var(--form-text) !important;
    font-family: var(--form-font) !important;
    font-size: 0.85rem !important;
    padding: 0 !important;
}

.dxbl-calendar-day a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 6px !important;
    color: inherit !important;
    text-decoration: none !important;
    transition: all 0.15s ease !important;
}

.dxbl-calendar-day:hover a {
    background: rgba(59, 130, 246, 0.15) !important;
}

/* Today */
.dxbl-calendar-today a {
    border: 1px solid var(--form-accent) !important;
}

/* Selected Day */
.dxbl-calendar-selected-item a,
.dxbl-calendar-day[data-selected] a {
    background: var(--form-accent) !important;
    color: #ffffff !important;
}

/* Weekend Days */
.dxbl-calendar-weekend {
    color: rgba(239, 68, 68, 0.7) !important;
}

/* Days from Other Months */
.dxbl-calendar-not-current-view {
    opacity: 0.35 !important;
}

/* ============================================
   DATE RANGE PICKER DUAL CALENDAR FIX
   ============================================ */

/* Date Range Picker dropdown body - nice glassmorphic styling */
.daterange-calendar-body {
    background: linear-gradient(135deg,
        rgba(30, 41, 59, 0.98) 0%,
        rgba(15, 23, 42, 0.98) 100%) !important;
    border: 1px solid rgba(100, 116, 139, 0.3) !important;
    border-radius: 12px !important;
    backdrop-filter: blur(16px) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
    padding: 8px !important;
}

/* Fix the calendar header - this is the KEY fix for overlapping */
.daterange-calendar-body .dxbl-calendar-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 8px 4px !important;
    border-bottom: 1px solid rgba(100, 116, 139, 0.2) !important;
    margin-bottom: 8px !important;
    gap: 8px !important;
    position: relative !important;
}

/* The wrapper div that contains BOTH month title buttons - THIS IS THE FIX */
.daterange-calendar-body div.dxbl-calendar-header-title-btn {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 32px !important;
    flex: 1 1 auto !important;
    background: transparent !important;
    padding: 0 8px !important;
    min-width: 0 !important;
    position: static !important;
}

/* Individual month title buttons inside the wrapper */
.daterange-calendar-body div.dxbl-calendar-header-title-btn > button.dxbl-calendar-header-title-btn {
    flex: 0 0 auto !important;
    padding: 6px 16px !important;
    font-weight: 600 !important;
    font-size: 0.85rem !important;
    color: #e2e8f0 !important;
    background: rgba(51, 65, 85, 0.5) !important;
    border-radius: 6px !important;
    white-space: nowrap !important;
    width: auto !important;
    min-width: 140px !important;
    height: auto !important;
    position: static !important;
    text-align: center !important;
}

/* Ensure button caption text is properly contained */
.daterange-calendar-body div.dxbl-calendar-header-title-btn > button.dxbl-calendar-header-title-btn .dxbl-btn-caption {
    position: static !important;
    display: inline !important;
    white-space: nowrap !important;
}

.daterange-calendar-body div.dxbl-calendar-header-title-btn > button.dxbl-calendar-header-title-btn:hover {
    background: rgba(59, 130, 246, 0.3) !important;
    color: #93c5fd !important;
}

/* Navigation buttons - year and month arrows */
.daterange-calendar-body .dxbl-calendar-header > button.dxbl-btn {
    flex: 0 0 auto !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(51, 65, 85, 0.4) !important;
    border-radius: 6px !important;
    color: #94a3b8 !important;
    transition: all 0.15s ease !important;
}

.daterange-calendar-body .dxbl-calendar-header > button.dxbl-btn:hover {
    background: rgba(59, 130, 246, 0.3) !important;
    color: #60a5fa !important;
}

/* Calendar tables container - side by side */
.daterange-calendar-body .dxbl-calendar-data-table-container-wrapper {
    display: flex !important;
    flex-direction: row !important;
    gap: 24px !important;
}

/* Each calendar table - has its own month header */
.daterange-calendar-body .dxbl-calendar-content {
    flex: 1 !important;
}

/* Individual calendar content headers (each month's title) */
.daterange-calendar-body .dxbl-calendar-content .dxbl-calendar-header {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 4px !important;
    margin-bottom: 8px !important;
    gap: 8px !important;
}

/* Hide duplicate outer header when inner headers exist */
.daterange-calendar-body > .dxbl-calendar-header {
    display: none !important;
}

/* Each calendar's title button */
.daterange-calendar-body .dxbl-calendar-content .dxbl-calendar-header-title-btn {
    flex: 0 0 auto !important;
    padding: 6px 16px !important;
    font-weight: 600 !important;
    font-size: 0.85rem !important;
    color: #e2e8f0 !important;
    background: rgba(51, 65, 85, 0.5) !important;
    border-radius: 6px !important;
    white-space: nowrap !important;
    min-width: 120px !important;
    text-align: center !important;
}

/* Navigation arrows in each calendar header */
.daterange-calendar-body .dxbl-calendar-content .dxbl-calendar-header > button.dxbl-btn {
    flex: 0 0 auto !important;
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(51, 65, 85, 0.4) !important;
    border-radius: 5px !important;
    color: #94a3b8 !important;
}

/* Day cells styling */
.daterange-calendar-body .dxbl-calendar-day a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 6px !important;
    color: #e2e8f0 !important;
    transition: all 0.15s ease !important;
}

.daterange-calendar-body .dxbl-calendar-day:hover a {
    background: rgba(59, 130, 246, 0.2) !important;
}

/* Today marker */
.daterange-calendar-body .dxbl-calendar-today a {
    border: 2px solid #3b82f6 !important;
    font-weight: 600 !important;
}

/* Selected range styling */
.daterange-calendar-body .dxbl-calendar-selected-item a {
    background: rgba(59, 130, 246, 0.25) !important;
    border-radius: 0 !important;
}

/* Range start */
.daterange-calendar-body .dxbl-calendar-selected-range-first a {
    background: #3b82f6 !important;
    color: #ffffff !important;
    border-radius: 6px 0 0 6px !important;
}

/* Range end */
.daterange-calendar-body .dxbl-calendar-selected-range-last a {
    background: #3b82f6 !important;
    color: #ffffff !important;
    border-radius: 0 6px 6px 0 !important;
}

/* When start and end are the same day */
.daterange-calendar-body .dxbl-calendar-selected-range-first.dxbl-calendar-selected-range-last a {
    border-radius: 6px !important;
}

/* Weekend days */
.daterange-calendar-body .dxbl-calendar-weekend {
    color: rgba(248, 113, 113, 0.8) !important;
}

/* Days from other months */
.daterange-calendar-body .dxbl-calendar-not-current-view {
    opacity: 0.4 !important;
}

/* Week numbers */
.daterange-calendar-body .dxbl-calendar-week-number {
    color: #64748b !important;
    font-size: 0.7rem !important;
}

/* Day of week headers */
.daterange-calendar-body .dxbl-calendar-days-of-week th {
    color: #94a3b8 !important;
    font-size: 0.75rem !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    padding: 8px 4px !important;
}

/* ============================================
   TIME PICKER ROLLERS
   ============================================ */

.dxbl-rollers-container {
    background: transparent !important;
    padding: 16px !important;
}

.dxbl-roller-container {
    background: transparent !important;
}

.dxbl-roller-title {
    color: var(--form-text-muted) !important;
    font-family: var(--form-font) !important;
    font-size: 0.75rem !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
}

.dxbl-roller {
    background: rgba(51, 65, 85, 0.3) !important;
    border-radius: 6px !important;
}

.dxbl-roller-item {
    color: var(--form-text-muted) !important;
    font-family: var(--form-font) !important;
}

.dxbl-roller-after .dxbl-roller-item {
    color: var(--form-text) !important;
}

/* ============================================
   DROPDOWN FOOTER (Today, OK, Cancel buttons)
   ============================================ */

.dxbl-edit-dropdown-footer {
    display: flex !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    padding: 12px !important;
    background: rgba(51, 65, 85, 0.2) !important;
    border-top: 1px solid var(--form-border) !important;
}

/* ============================================
   PRIMARY BUTTON (OK) - DevExpress Safe Override
   ============================================ */
.dxbl-edit-dropdown-footer .dxbl-btn-primary,
.dxbl-btn.dxbl-btn-primary {
    /* Reset .dxbl-btn defaults */
    appearance: none !important;
    min-width: 0 !important;
    min-height: 0 !important;
    line-height: 1.2 !important;
    box-shadow: none !important;

    /* Layout */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 8px 16px !important;
    margin: 0 !important;

    /* Visual */
    background: rgba(59, 130, 246, 0.8) !important;
    border: 1px solid rgba(147, 197, 253, 0.3) !important;
    border-radius: 6px !important;

    /* Typography */
    color: #ffffff !important;
    font-family: var(--form-font) !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    text-decoration: none !important;

    /* Interaction */
    cursor: pointer !important;
    transition: all 0.15s ease !important;
}

/* Focus state for accessibility */
.dxbl-edit-dropdown-footer .dxbl-btn-primary:focus-visible,
.dxbl-btn.dxbl-btn-primary:focus-visible {
    outline: 2px solid var(--form-accent) !important;
    outline-offset: 2px !important;
}

.dxbl-edit-dropdown-footer .dxbl-btn-primary:hover,
.dxbl-btn.dxbl-btn-primary:hover {
    background: rgba(59, 130, 246, 0.95) !important;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3) !important;
}

/* ============================================
   SECONDARY BUTTON (Today, Cancel) - DevExpress Safe Override
   ============================================ */
.dxbl-edit-dropdown-footer .dxbl-btn-secondary,
.dxbl-btn.dxbl-btn-secondary {
    /* Reset .dxbl-btn defaults */
    appearance: none !important;
    min-width: 0 !important;
    min-height: 0 !important;
    line-height: 1.2 !important;
    box-shadow: none !important;

    /* Layout */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 8px 16px !important;
    margin: 0 !important;

    /* Visual */
    background: rgba(100, 116, 139, 0.2) !important;
    border: 1px solid rgba(148, 163, 184, 0.25) !important;
    border-radius: 6px !important;

    /* Typography */
    color: var(--form-text-muted) !important;
    font-family: var(--form-font) !important;
    font-size: 0.8rem !important;
    font-weight: 500 !important;
    text-decoration: none !important;

    /* Interaction */
    cursor: pointer !important;
    transition: all 0.15s ease !important;
}

/* Focus state for accessibility */
.dxbl-edit-dropdown-footer .dxbl-btn-secondary:focus-visible,
.dxbl-btn.dxbl-btn-secondary:focus-visible {
    outline: 2px solid var(--form-accent) !important;
    outline-offset: 2px !important;
}

.dxbl-edit-dropdown-footer .dxbl-btn-secondary:hover,
.dxbl-btn.dxbl-btn-secondary:hover {
    background: rgba(100, 116, 139, 0.35) !important;
    color: var(--form-text) !important;
}

/* ============================================
   GRID INLINE EDIT BUTTONS (Save/Cancel)
   ============================================ */

.grid-edit-actions {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 0.5rem !important;
    margin-top: 0.75rem !important;
    padding-top: 0.75rem !important;
    border-top: 1px solid var(--form-border) !important;
}

/* ============================================
   GRID EDIT BUTTONS - DevExpress Safe Override
   ============================================ */
.grid-edit-btn,
button.grid-edit-btn,
.dxbl-btn.grid-edit-btn,
.dxbl-btn.dxbl-btn-primary.grid-edit-btn,
.dxbl-btn.dxbl-btn-secondary.grid-edit-btn {
    /* Reset .dxbl-btn defaults */
    appearance: none !important;
    line-height: 1.2 !important;
    box-shadow: none !important;

    /* Layout - explicit sizing */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    min-width: 100px !important;
    padding: 0 1rem !important;
    margin: 0 !important;
    border-radius: 6px !important;
    box-sizing: border-box !important;

    /* Typography */
    font-family: var(--form-font) !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    text-decoration: none !important;

    /* Interaction */
    cursor: pointer !important;
    transition: all 0.15s ease !important;
}

/* Focus state for accessibility */
.grid-edit-btn:focus-visible,
.dxbl-btn.grid-edit-btn:focus-visible {
    outline: 2px solid var(--form-accent) !important;
    outline-offset: 2px !important;
}

/* Save button */
.grid-edit-btn--save,
.dxbl-btn.grid-edit-btn--save,
.dxbl-btn.dxbl-btn-primary.grid-edit-btn--save {
    background: rgba(59, 130, 246, 0.85) !important;
    border: 1px solid rgba(147, 197, 253, 0.4) !important;
    color: #ffffff !important;
}

.grid-edit-btn--save:hover,
.dxbl-btn.grid-edit-btn--save:hover {
    background: rgba(59, 130, 246, 0.95) !important;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3) !important;
}

/* Cancel button */
.grid-edit-btn--cancel,
.dxbl-btn.grid-edit-btn--cancel,
.dxbl-btn.dxbl-btn-secondary.grid-edit-btn--cancel {
    background: rgba(100, 116, 139, 0.25) !important;
    border: 1px solid rgba(148, 163, 184, 0.3) !important;
    color: rgba(203, 213, 225, 0.9) !important;
}

.grid-edit-btn--cancel:hover,
.dxbl-btn.grid-edit-btn--cancel:hover {
    background: rgba(100, 116, 139, 0.4) !important;
    color: #e2e8f0 !important;
}

/* Button icons */
.grid-edit-btn .oi,
.grid-edit-btn .dxbl-btn-icon {
    margin-right: 0.4rem !important;
    font-size: 0.75rem !important;
}

/* Disabled state */
.grid-edit-btn:disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
}

/* ============================================
   TAG BOX
   ============================================ */

.dxbl-tag-box {
    height: auto !important;
    min-height: var(--form-height) !important;
    padding: 4px !important;
}

.dxbl-tag {
    background: rgba(59, 130, 246, 0.2) !important;
    border: 1px solid rgba(59, 130, 246, 0.3) !important;
    color: var(--form-text) !important;
    font-size: 0.8rem !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
}

/* ============================================
   CHECKBOX
   ============================================ */

.dxbl-checkbox-check-element {
    background: var(--form-bg) !important;
    border: 1px solid var(--form-border-hover) !important;
    border-radius: 4px !important;
}

.dxbl-checkbox-checked .dxbl-checkbox-check-element {
    background: var(--form-accent) !important;
    border-color: var(--form-accent) !important;
}

.dxbl-checkbox-text {
    color: var(--form-text) !important;
    font-family: var(--form-font) !important;
}

/* ============================================
   MEMO / TEXTAREA - Layout Only
   ============================================
   NOTE: Background, border, colors handled by dx-theme-overrides.css
   via --dxbl-text-edit-* variables on .dxbl-memo-edit

   DevExpress uses custom element <dxbl-memo-editor> with class .dxbl-memo-edit
   Textarea inside has class .dxbl-v-resize for vertical resize mode
*/

.dxbl-memo,
.dxbl-memo-edit,
dxbl-memo-editor {
    border-radius: var(--form-radius) !important;
    height: auto !important;
    min-height: 80px !important;
    /* CRITICAL: No max-height constraint - allow resize to grow freely */
    max-height: none !important;
    /* CRITICAL: Allow resize handle to be visible */
    overflow: visible !important;
    /* Ensure flexbox doesn't constrain this element */
    flex-shrink: 0 !important;
}

.dxbl-memo textarea,
.dxbl-memo-edit textarea,
dxbl-memo-editor textarea,
textarea.dxbl-v-resize {
    font-family: var(--form-font) !important;
    background: transparent !important;
    /* CRITICAL: CSS resize only works when overflow is NOT visible */
    /* The textarea needs overflow:auto for resize to function */
    overflow: auto !important;
    /* Enable vertical resize */
    resize: vertical !important;
}

/* HIGH SPECIFICITY: Force resize on DevExpress memo textareas */
dxbl-memo-editor.dxbl-memo-edit textarea.dxbl-v-resize,
.dxbl-memo-edit textarea.dxbl-v-resize,
.dxbl-text-edit.dxbl-memo-edit textarea.dxbl-v-resize {
    /* CRITICAL: overflow must be auto/hidden/scroll for resize to work (not visible) */
    overflow: auto !important;
    resize: vertical !important;
    -webkit-resize: vertical !important;
    -moz-resize: vertical !important;
}

/* FORM CONTEXT: Ensure resize works when memo is inside a form (EditForm) */
/* This specifically targets the form rendered by Blazor's EditForm */
form dxbl-memo-editor textarea,
form .dxbl-memo-edit textarea,
form .dxbl-memo textarea {
    overflow: auto !important;
    resize: vertical !important;
    -webkit-resize: vertical !important;
    max-height: none !important;
}

/* Ensure form element doesn't clip resize handles */
form {
    overflow: visible;
}

/* ============================================
   FORM LAYOUT LABELS
   ============================================ */

.dxbl-fl-cpt {
    font-size: 0.85rem !important;
    font-weight: 500 !important;
    font-family: var(--form-font) !important;
    color: var(--form-text-muted) !important;
}

/* ============================================
   VALIDATION STATES - Enhancements Only
   ============================================

   DevExpress handles validation borders natively via:
   - dx-theme-overrides.css sets --dxbl-text-edit-validation-invalid-color
   - DevExpress applies this to border-color when .dxbl-invalid is added
   - We only add visual enhancements (glow) here, not borders

   Reference: docs.devexpress.com/Blazor/402066/validate-input
   ============================================ */

/* Add subtle glow effect to ENHANCE the DevExpress red border */
/* DevExpress already applies --dxbl-text-edit-validation-invalid-color to border */
.dxbl-text-edit.dxbl-invalid,
.dxbl-spin-edit.dxbl-invalid,
.dxbl-combo-box.dxbl-invalid,
.dxbl-date-edit.dxbl-invalid,
.dxbl-time-edit.dxbl-invalid,
.dxbl-tag-box.dxbl-invalid,
.dxbl-memo-edit.dxbl-invalid {
    box-shadow: 0 0 0 2px var(--color-error-muted, rgba(239, 68, 68, 0.15));
}

/* Validation message text */
.validation-message,
.dxbl-validation-message {
    font-size: var(--text-sm, 0.8rem) !important;
    color: var(--color-error, #ef4444) !important;
    font-family: var(--form-font) !important;
    margin-top: var(--space-1, 0.25rem) !important;
    display: flex !important;
    align-items: center !important;
    gap: var(--space-1, 0.25rem) !important;
}

/* Add warning icon before validation message */
.dxbl-validation-message::before {
    content: "⚠";
    font-size: 0.9em;
}

/* DataAnnotationsValidator / ValidationSummary styling */
.validation-errors,
.validation-summary-errors {
    background: var(--color-error-muted, rgba(239, 68, 68, 0.15)) !important;
    border: 1px solid rgba(239, 68, 68, 0.3) !important;
    border-radius: var(--radius-md, 6px) !important;
    padding: var(--space-3, 0.75rem) var(--space-4, 1rem) !important;
    margin-bottom: var(--space-4, 1rem) !important;
    color: var(--text-primary, #e2e8f0) !important;
    font-family: var(--form-font) !important;
}

.validation-errors ul,
.validation-summary-errors ul {
    margin: 0 !important;
    padding-left: var(--space-5, 1.25rem) !important;
    list-style: disc !important;
}

.validation-errors li,
.validation-summary-errors li {
    color: var(--color-error, #ef4444) !important;
    font-size: var(--text-sm, 0.8rem) !important;
    margin-bottom: var(--space-1, 0.25rem) !important;
}

/* ============================================
   DISABLED STATE
   ============================================ */

.dxbl-text-edit.dxbl-disabled,
.dxbl-spin-edit.dxbl-disabled,
.dxbl-combo-box.dxbl-disabled {
    opacity: 0.5 !important;
}

/* ============================================
   SCROLLBARS
   ============================================ */

.dxbl-listbox::-webkit-scrollbar {
    width: 6px;
}

.dxbl-listbox::-webkit-scrollbar-track {
    background: rgba(30, 41, 59, 0.5);
}

.dxbl-listbox::-webkit-scrollbar-thumb {
    background: rgba(100, 116, 139, 0.4);
    border-radius: 3px;
}

/* ============================================
   LOADING PANEL / WAIT INDICATOR
   ============================================ */

/* DxLoadingPanel Container */
.dxbl-loading-panel {
    background: rgba(15, 23, 42, 0.75) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
}

.dxbl-loading-panel-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 1.25rem !important;
    padding: 2rem 2.5rem !important;
    background: linear-gradient(135deg,
        rgba(30, 41, 59, 0.85) 0%,
        rgba(51, 65, 85, 0.75) 50%,
        rgba(30, 41, 59, 0.85) 100%) !important;
    border: 1px solid rgba(100, 116, 139, 0.25) !important;
    border-radius: 16px !important;
    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

/* Loading Panel Text */
.dxbl-loading-panel-text,
.dxbl-loading-panel .dxbl-text {
    color: rgba(226, 232, 240, 0.95) !important;
    font-family: var(--form-font) !important;
    font-size: 1rem !important;
    font-weight: 500 !important;
    letter-spacing: 0.01em !important;
}

/* DxWaitIndicator - Spinner Animation */
.dxbl-wait-indicator,
.dxbl-loading-panel-indicator {
    width: 64px !important;
    height: 64px !important;
}

/* Spinner circle */
.dxbl-wait-indicator svg circle,
.dxbl-loading-panel-indicator svg circle {
    stroke: var(--form-accent) !important;
    stroke-width: 3 !important;
}

/* Custom spinner overlay using CSS */
.dxbl-wait-indicator::after,
.dxbl-loading-panel-indicator::after {
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 60px !important;
    height: 60px !important;
    margin: -30px 0 0 -30px !important;
    border: 3px solid transparent !important;
    border-top-color: rgba(59, 130, 246, 0.8) !important;
    border-right-color: rgba(147, 197, 253, 0.6) !important;
    border-radius: 50% !important;
    box-shadow:
        0 0 20px rgba(59, 130, 246, 0.3),
        inset 0 0 15px rgba(59, 130, 246, 0.15) !important;
}

/* DxWaitIndicator in buttons - smaller size */
.dxbl-btn .dxbl-wait-indicator {
    width: 20px !important;
    height: 20px !important;
}

.dxbl-btn .dxbl-wait-indicator svg circle {
    stroke-width: 2 !important;
}

/* Loading Panel with shading */
.dxbl-loading-panel.dxbl-loading-panel-shading {
    background: rgba(15, 23, 42, 0.85) !important;
}

/* Standalone Loading Panel - Centered */
.dxbl-loading-panel-standalone {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 9999 !important;
}

/* Animation for loading panel appearance */
.dxbl-loading-panel-content {
    animation: loadingFadeIn 0.3s ease-out !important;
}

@keyframes loadingFadeIn {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(10px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* ============================================
   ACTION BUTTONS (Add, Success, Danger)
   ============================================ */

/* Success/Add Button - Clean and professional */
.dxbl-btn.dxbl-btn-success {
    background: #10b981 !important;
    border: 1px solid rgba(16, 185, 129, 0.3) !important;
    color: #ffffff !important;
    font-family: var(--form-font) !important;
    font-weight: 600 !important;
    font-size: 0.85rem !important;
    height: 38px !important;
    padding: 0 1.25rem !important;
    border-radius: 6px !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
    transition: all 0.15s ease !important;
}

.dxbl-btn.dxbl-btn-success:hover {
    background: #059669 !important;
}

.dxbl-btn.dxbl-btn-success:active {
    background: #047857 !important;
}

.dxbl-btn.dxbl-btn-success .dxbl-btn-icon,
.dxbl-btn.dxbl-btn-success .oi,
.dxbl-btn.dxbl-btn-success [class^="oi-"],
.dxbl-btn.dxbl-btn-success [class*=" oi-"] {
    margin-right: 0.5rem !important;
    font-size: 0.8rem !important;
    color: #ffffff !important;
}

/* Danger Button - Clean and professional */
.dxbl-btn.dxbl-btn-danger {
    background: #ef4444 !important;
    border: 1px solid rgba(239, 68, 68, 0.3) !important;
    color: #ffffff !important;
    font-family: var(--form-font) !important;
    font-weight: 600 !important;
    font-size: 0.85rem !important;
    height: 38px !important;
    padding: 0 1.25rem !important;
    border-radius: 6px !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
    transition: all 0.15s ease !important;
}

.dxbl-btn.dxbl-btn-danger:hover {
    background: #dc2626 !important;
}

.dxbl-btn.dxbl-btn-danger:active {
    background: #b91c1c !important;
}

.dxbl-btn.dxbl-btn-danger .dxbl-btn-icon,
.dxbl-btn.dxbl-btn-danger .oi,
.dxbl-btn.dxbl-btn-danger [class^="oi-"],
.dxbl-btn.dxbl-btn-danger [class*=" oi-"] {
    margin-right: 0.5rem !important;
    font-size: 0.8rem !important;
    color: #ffffff !important;
}

/* Ensure SVG icons in buttons also get correct color */
.dxbl-btn.dxbl-btn-success svg,
.dxbl-btn.dxbl-btn-danger svg {
    fill: currentColor !important;
}

/* Info Button */
.dxbl-btn.dxbl-btn-info {
    background: rgba(59, 130, 246, 0.15) !important;
    border: 1px solid rgba(59, 130, 246, 0.3) !important;
    color: #3b82f6 !important;
    font-family: var(--form-font) !important;
    font-weight: 500 !important;
    font-size: 0.85rem !important;
    height: 38px !important;
    padding: 0 1.25rem !important;
    border-radius: 6px !important;
    transition: all 0.15s ease !important;
}

.dxbl-btn.dxbl-btn-info:hover {
    background: rgba(59, 130, 246, 0.25) !important;
    border-color: rgba(59, 130, 246, 0.5) !important;
}

/* ============================================
   MODERN DETAIL GRID - Read-only display
   ============================================ */

.modern-detail-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem 2rem;
    padding: 0.5rem 0;
}

/* Responsive: 2 columns on medium screens */
@media (max-width: 992px) {
    .modern-detail-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Responsive: 1 column on small screens */
@media (max-width: 576px) {
    .modern-detail-grid {
        grid-template-columns: 1fr;
    }
}

.modern-detail-grid .detail-item {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.modern-detail-grid .detail-label {
    font-family: var(--form-font);
    font-size: 0.75rem;
    font-weight: 500;
    color: rgba(148, 163, 184, 0.7);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.modern-detail-grid .detail-value {
    font-family: var(--form-font);
    font-size: 0.9rem;
    font-weight: 500;
    color: #e2e8f0;
}

.modern-detail-grid .detail-value.text-success {
    color: #10b981;
}

/* ============================================
   MODERN EMPTY STATE - Empty grid message
   ============================================ */

.modern-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 2.5rem 1rem;
    text-align: center;
}

.modern-empty-state > i,
.modern-empty-state > .oi {
    font-size: 2rem;
    color: rgba(148, 163, 184, 0.4);
}

.modern-empty-state > span {
    font-family: var(--form-font);
    font-size: 0.9rem;
    font-weight: 500;
    color: rgba(148, 163, 184, 0.7);
}

/* ============================================
   MODERN ALERT - Error messages
   ============================================ */

.modern-alert {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    border-radius: 8px;
    font-family: var(--form-font);
    font-size: 0.85rem;
    font-weight: 500;
    margin-bottom: 1rem;
}

.modern-alert.alert-danger {
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #fca5a5;
}

.modern-alert.alert-success {
    background: rgba(16, 185, 129, 0.15);
    border: 1px solid rgba(16, 185, 129, 0.3);
    color: #6ee7b7;
}

.modern-alert.alert-warning {
    background: rgba(245, 158, 11, 0.15);
    border: 1px solid rgba(245, 158, 11, 0.3);
    color: #fcd34d;
}

.modern-alert > i,
.modern-alert > .oi {
    font-size: 1rem;
    flex-shrink: 0;
}

.modern-alert .btn-close {
    margin-left: auto;
    filter: invert(0.7);
    opacity: 0.6;
}

.modern-alert .btn-close:hover {
    opacity: 1;
}