/* Additional overrides loaded after component styles to ensure header styling applies */

/* Form / group header / accordion styling -- make titles thinner and more visible */

/* ============ DOCUMENT DETAIL CUSTOM PANELS ============ */
.payments-expander-header {
    font-weight: 400 !important;
    color: #ffffff !important;
    background: linear-gradient(180deg, #3b4f86 0%, #2f4276 100%) !important;
    border-color: #2f4276 !important;
    border-bottom: 1px solid #5a73b0 !important;
    padding: 2px 8px !important;
}

.payments-expander-header .fw-bold {
    font-weight: 500 !important;
    color: #ffffff !important;
}

.payments-expander-header .text-muted {
    color: #d8e3ff !important;
    font-size: 0.875rem !important;
    font-weight: 400 !important;
}

/* Make toggle button more visible */
.panel-toggle-button {
    background: #ffffff !important;
    border: 1px solid #d0dce9 !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;
}

.panel-toggle-button .oi {
    color: #1a3a5f !important;
    font-weight: 600 !important;
}

/* Validation badge styling */
.section-validation-indicator {
    background: #dc3545 !important;
    color: #fff !important;
    font-weight: 600 !important;
    border-radius: 4px !important;
}

/* ============ DOCUMENT SECTION BOXES ============ */
.section-box {
    border: 1px solid #d9e2f0 !important;
    border-radius: 0.5rem !important;
    padding: 1rem !important;
    background: #ffffff !important;
}

.summary-box {
    border: 1px solid #d9e2f0 !important;
    border-radius: 0.5rem !important;
    padding: 1rem !important;
    background: #f8fafc !important;
}

.payments-expander {
    border: 1px solid #d9e2f0 !important;
    border-radius: 0.5rem !important;
    background: #ffffff !important;
    overflow: hidden !important;
    margin-bottom: 14px !important;
}

.payments-expander-body {
    padding: 1rem !important;
    background: #ffffff !important;
}

/* ============ FORMLAYOUT GROUPS (for DxFormLayoutGroup inside sections) ============ */
.dx-formlayout-group-caption,
.dx-formlayout-caption,
.dx-accordion-item-header,
.dx-card-header {
    font-weight: 400 !important;
    color: #ffffff !important;
    background: linear-gradient(180deg, #3b4f86 0%, #2f4276 100%) !important;
    border-color: #2f4276 !important;
    padding: 8px 14px !important;
    border-radius: 6px !important;
}

/* ============ ENSURE DEVEXPRESS THEME IS OVERRIDDEN (HIGH SPECIFICITY) ============ */
html .dx-formlayout-group-caption,
html .dx-accordion-item-header,
html .dx-card-header,
html .dxbl-fl-group-header {
    font-weight: 400 !important;
    color: #ffffff !important;
    background: linear-gradient(180deg, #3b4f86 0%, #2f4276 100%) !important;
}

/* ============ FORCE INVERSE HEADER THEME (DEVEXPRESS BLAZOR) ============ */
html .payments-expander-header,
html .dx-accordion-item-header,
html .dxbl-accordion-item-header,
html .dxbl-acrd-item-header,
html .dxbl-fl-group-header,
html .dx-card-header {
    background: linear-gradient(180deg, #3b4f86 0%, #2f4276 100%) !important;
    background-color: #2f4276 !important;
    background-image: linear-gradient(180deg, #3b4f86 0%, #2f4276 100%) !important;
    color: #ffffff !important;
    border-color: #2f4276 !important;
}

html .payments-expander-header *,
html .dx-accordion-item-header *,
html .dxbl-accordion-item-header *,
html .dxbl-acrd-item-header *,
html .dxbl-fl-group-header *,
html .dx-card-header * {
    color: #ffffff !important;
}

html .payments-expander-header .text-muted,
html .dx-accordion-item-header .text-muted,
html .dxbl-accordion-item-header .text-muted,
html .dxbl-acrd-item-header .text-muted,
html .dxbl-fl-group-header .text-muted,
html .dx-card-header .text-muted {
    color: #d8e3ff !important;
}

html .payments-expander-header .dx-icon,
html .dx-accordion-item-header .dx-icon,
html .dxbl-accordion-item-header .dx-icon,
html .dxbl-acrd-item-header .dx-icon,
html .dxbl-fl-group-header .dx-icon,
html .dx-card-header .dx-icon,
html .panel-toggle-button,
html .panel-toggle-button .oi {
    background: transparent !important;
    color: #ffffff !important;
    border-color: rgba(255,255,255,0.45) !important;
    box-shadow: none !important;
}

/* Force DxToolbar inside headers to be transparent so parent dark background shows through */
.payments-expander-header .dxbl-toolbar,
.payments-expander-header .dxbl-btn-group,
.payments-expander-header .dxbl-toolbar-item,
.payments-expander-header .dxbl-toolbar-group,
.payments-expander-header .dxbl-toolbar-title,
.payments-expander-header [class*="dxbl-toolbar"],
.payments-expander-header [class*="dx-toolbar"] {
    background: transparent !important;
    background-color: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}