/* =====================================================================
   SWAPS PAGE - Professional Dark Theme Styling
   Version: 2024-11-25 v2 - Aggressive Override Edition
   ===================================================================== */

/* =========================== */
/* CSS CUSTOM PROPERTIES       */
/* =========================== */
:root {
    --swaps-bg-dark: #0f0f1a;
    --swaps-bg-card: #1a1a2e;
    --swaps-bg-surface: #252542;
    --swaps-bg-input: #1e1e36;
    --swaps-bg-hover: #2d2d4a;
    --swaps-text-primary: #ffffff;
    --swaps-text-secondary: #a0aec0;
    --swaps-text-muted: #718096;
    --swaps-border: rgba(255, 255, 255, 0.08);
    --swaps-border-focus: rgba(99, 102, 241, 0.5);
    --swaps-accent: #6366f1;
    --swaps-accent-hover: #818cf8;
    --swaps-success: #10b981;
    --swaps-warning: #f59e0b;
    --swaps-danger: #ef4444;
}

/* =========================== */
/* MODAL DIALOG STYLING        */
/* =========================== */
#new-calc-modal .modal-content {
    background-color: var(--swaps-bg-card) !important;
    border: 1px solid var(--swaps-border) !important;
    border-radius: 16px !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5) !important;
}

#new-calc-modal .modal-header {
    background-color: var(--swaps-bg-surface) !important;
    border-bottom: 1px solid var(--swaps-border) !important;
    padding: 20px 24px !important;
}

#new-calc-modal .modal-title {
    color: var(--swaps-text-primary) !important;
    font-weight: 600 !important;
    font-size: 18px !important;
}

#new-calc-modal .modal-body {
    background-color: var(--swaps-bg-card) !important;
    padding: 24px !important;
    overflow: visible !important;
}

/* Ensure modal containers don't clip dropdown menus */
#new-calc-modal .modal-content,
#new-calc-modal .modal-dialog {
    overflow: visible !important;
}

#new-calc-modal .modal-footer {
    background-color: var(--swaps-bg-surface) !important;
    border-top: 1px solid var(--swaps-border) !important;
    padding: 16px 24px !important;
}

/* Close button */
#new-calc-modal .btn-close {
    filter: invert(1) !important;
    opacity: 0.6 !important;
}

#new-calc-modal .btn-close:hover {
    opacity: 1 !important;
}

/* =========================== */
/* FORM INPUT STYLING          */
/* =========================== */
#new-calc-modal input.form-control,
#new-calc-modal .form-control {
    background-color: var(--swaps-bg-input) !important;
    border: 1px solid var(--swaps-border) !important;
    border-radius: 8px !important;
    color: var(--swaps-text-primary) !important;
    padding: 10px 14px !important;
    font-size: 14px !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

#new-calc-modal input.form-control:focus,
#new-calc-modal .form-control:focus {
    background-color: var(--swaps-bg-input) !important;
    border-color: var(--swaps-accent) !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15) !important;
    outline: none !important;
}

#new-calc-modal input.form-control::placeholder {
    color: var(--swaps-text-muted) !important;
}

/* ================================================================== */
/* DATE PICKER - COMPLETE DARK THEME                                  */
/* ================================================================== */

/* Date picker input wrapper */
#new-calc-modal .SingleDatePickerInput,
#modal-valuation-date .SingleDatePickerInput,
.SingleDatePickerInput {
    background-color: var(--swaps-bg-input) !important;
    border: 1px solid var(--swaps-border) !important;
    border-radius: 8px !important;
}

#new-calc-modal .SingleDatePickerInput__withBorder,
#modal-valuation-date .SingleDatePickerInput__withBorder,
.SingleDatePickerInput__withBorder {
    border: 1px solid var(--swaps-border) !important;
    border-radius: 8px !important;
}

/* Date input field */
#new-calc-modal .DateInput,
#modal-valuation-date .DateInput,
.DateInput {
    background-color: transparent !important;
    width: 100% !important;
}

#new-calc-modal .DateInput_input,
#modal-valuation-date .DateInput_input,
.DateInput_input {
    background-color: transparent !important;
    color: var(--swaps-text-primary) !important;
    border: none !important;
    padding: 10px 14px !important;
    font-size: 14px !important;
    font-weight: 400 !important;
}

#new-calc-modal .DateInput_input__focused,
#modal-valuation-date .DateInput_input__focused,
.DateInput_input__focused {
    background-color: transparent !important;
    border: none !important;
}

/* Calendar popup - COMPLETE OVERRIDE */
.SingleDatePicker_picker,
.SingleDatePicker_picker__directionLeft,
.SingleDatePicker_picker__directionRight,
#new-calc-modal .SingleDatePicker_picker,
#modal-valuation-date .SingleDatePicker_picker {
    background-color: var(--swaps-bg-surface) !important;
    border: 1px solid var(--swaps-border) !important;
    border-radius: 12px !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5) !important;
    z-index: 10000 !important;
}

/* Day picker wrapper */
.DayPicker,
.DayPicker__horizontal,
#new-calc-modal .DayPicker,
#modal-valuation-date .DayPicker {
    background-color: var(--swaps-bg-surface) !important;
    border-radius: 12px !important;
}

.DayPicker_wrapper__horizontal {
    background-color: var(--swaps-bg-surface) !important;
}

/* Calendar month */
.CalendarMonth,
.CalendarMonth_table,
#new-calc-modal .CalendarMonth,
#modal-valuation-date .CalendarMonth {
    background-color: var(--swaps-bg-surface) !important;
}

/* Month caption */
.CalendarMonth_caption,
#new-calc-modal .CalendarMonth_caption,
#modal-valuation-date .CalendarMonth_caption {
    color: var(--swaps-text-primary) !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    padding-bottom: 40px !important;
}

/* Weekday headers */
.DayPicker_weekHeader,
.DayPicker_weekHeader_ul,
.DayPicker_weekHeader_li,
#new-calc-modal .DayPicker_weekHeader,
#modal-valuation-date .DayPicker_weekHeader {
    color: var(--swaps-text-muted) !important;
}

.DayPicker_weekHeader_li small {
    color: var(--swaps-text-muted) !important;
    font-weight: 500 !important;
}

/* Calendar days - default state */
.CalendarDay,
.CalendarDay__default,
#new-calc-modal .CalendarDay,
#modal-valuation-date .CalendarDay {
    background-color: transparent !important;
    color: var(--swaps-text-primary) !important;
    border: 1px solid transparent !important;
    border-radius: 8px !important;
}

/* Calendar days - hover */
.CalendarDay__default:hover,
.CalendarDay:hover,
#new-calc-modal .CalendarDay__default:hover,
#modal-valuation-date .CalendarDay__default:hover {
    background-color: var(--swaps-bg-hover) !important;
    color: var(--swaps-text-primary) !important;
    border: 1px solid var(--swaps-border) !important;
}

/* Calendar days - selected */
.CalendarDay__selected,
.CalendarDay__selected:hover,
.CalendarDay__selected:active,
#new-calc-modal .CalendarDay__selected,
#modal-valuation-date .CalendarDay__selected {
    background-color: var(--swaps-accent) !important;
    color: white !important;
    border: 1px solid var(--swaps-accent) !important;
}

/* Calendar days - today */
.CalendarDay__today,
#new-calc-modal .CalendarDay__today,
#modal-valuation-date .CalendarDay__today {
    border: 1px solid var(--swaps-accent) !important;
}

/* Calendar days - outside month */
.CalendarDay__outside,
#new-calc-modal .CalendarDay__outside,
#modal-valuation-date .CalendarDay__outside {
    color: var(--swaps-text-muted) !important;
    background-color: transparent !important;
}

/* Calendar days - blocked */
.CalendarDay__blocked_out_of_range,
.CalendarDay__blocked_calendar,
#new-calc-modal .CalendarDay__blocked_out_of_range,
#modal-valuation-date .CalendarDay__blocked_out_of_range {
    color: var(--swaps-text-muted) !important;
    background-color: transparent !important;
    opacity: 0.5 !important;
}

/* Navigation buttons */
.DayPickerNavigation_button,
.DayPickerNavigation_button__default,
#new-calc-modal .DayPickerNavigation_button,
#modal-valuation-date .DayPickerNavigation_button {
    background-color: var(--swaps-bg-input) !important;
    border: 1px solid var(--swaps-border) !important;
    border-radius: 8px !important;
}

.DayPickerNavigation_button:hover,
.DayPickerNavigation_button__default:hover {
    background-color: var(--swaps-bg-hover) !important;
    border-color: var(--swaps-border-focus) !important;
}

.DayPickerNavigation_svg__horizontal {
    fill: var(--swaps-text-secondary) !important;
}

/* Hide the little triangle/fang */
.DateInput_fang,
#new-calc-modal .DateInput_fang,
#modal-valuation-date .DateInput_fang {
    display: none !important;
}

/* Calendar month grid */
.CalendarMonthGrid,
.CalendarMonthGrid__horizontal,
#new-calc-modal .CalendarMonthGrid,
#modal-valuation-date .CalendarMonthGrid {
    background-color: var(--swaps-bg-surface) !important;
}

/* ================================================================== */
/* NUCLEAR DATE PICKER OVERRIDES                                       */
/* Cover ALL possible date picker elements                            */
/* ================================================================== */

/* Ensure ALL date picker containers are dark */
.SingleDatePicker,
.SingleDatePicker > div,
.SingleDatePicker_picker > div,
.DayPicker > div,
.DayPicker_transitionContainer,
.DayPicker_focusRegion,
.CalendarMonth_table tbody,
.CalendarMonth_table tbody tr,
.CalendarMonth_table tbody td {
    background-color: var(--swaps-bg-surface) !important;
}

/* Override any white backgrounds from react-dates */
[class*="SingleDatePicker"],
[class*="DayPicker"],
[class*="CalendarMonth"],
[class*="CalendarDay"] {
    background: var(--swaps-bg-surface) !important;
}

/* Specific fix for calendar day cells that might get white backgrounds */
td.CalendarDay,
td[class*="CalendarDay"] {
    background-color: transparent !important;
}

td.CalendarDay:hover,
td[class*="CalendarDay"]:hover {
    background-color: var(--swaps-bg-hover) !important;
}

td.CalendarDay__selected,
td[class*="CalendarDay__selected"] {
    background-color: var(--swaps-accent) !important;
}

/* Fix any inner spans or divs in calendar days */
.CalendarDay span,
.CalendarDay div,
td[class*="CalendarDay"] span,
td[class*="CalendarDay"] div {
    background-color: transparent !important;
}

/* =========================== */
/* CDS RATING SECTION          */
/* =========================== */
.cds-rating-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 14px 16px !important;
    background-color: var(--swaps-bg-input) !important;
    border-radius: 10px !important;
    margin-bottom: 10px !important;
    border: 1px solid var(--swaps-border) !important;
    transition: border-color 0.2s ease !important;
}

.cds-rating-row:hover {
    border-color: rgba(99, 102, 241, 0.3) !important;
}

.cds-rating-row-company {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.08) 0%, rgba(99, 102, 241, 0.03) 100%) !important;
    border-color: rgba(99, 102, 241, 0.2) !important;
}

/* =========================== */
/* RATING BADGES               */
/* =========================== */
.rating-badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
    border-radius: 6px !important;
    text-transform: uppercase !important;
}

/* =========================== */
/* BUTTONS                     */
/* =========================== */
#new-calc-modal .btn-primary {
    background: linear-gradient(135deg, var(--swaps-accent) 0%, #4f46e5 100%) !important;
    border: none !important;
    color: white !important;
    font-weight: 600 !important;
    padding: 10px 20px !important;
    border-radius: 8px !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

#new-calc-modal .btn-primary:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4) !important;
}

#new-calc-modal .btn-secondary,
#new-calc-modal .btn-outline-secondary {
    background-color: transparent !important;
    border: 1px solid var(--swaps-border) !important;
    color: var(--swaps-text-secondary) !important;
    font-weight: 500 !important;
    padding: 10px 20px !important;
    border-radius: 8px !important;
}

#new-calc-modal .btn-secondary:hover,
#new-calc-modal .btn-outline-secondary:hover {
    background-color: var(--swaps-bg-hover) !important;
    border-color: var(--swaps-text-muted) !important;
    color: var(--swaps-text-primary) !important;
}

/* =========================== */
/* ACCORDION STYLING           */
/* =========================== */
#results-accordion .accordion-item {
    background-color: var(--swaps-bg-card) !important;
    border: 1px solid var(--swaps-border) !important;
    border-radius: 12px !important;
    margin-bottom: 12px !important;
    overflow: hidden !important;
}

#results-accordion .accordion-header {
    background-color: transparent !important;
}

#results-accordion .accordion-button {
    background-color: var(--swaps-bg-surface) !important;
    color: var(--swaps-text-primary) !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    padding: 16px 20px !important;
    border: none !important;
    box-shadow: none !important;
}

#results-accordion .accordion-button:not(.collapsed) {
    background-color: var(--swaps-bg-surface) !important;
    color: var(--swaps-text-primary) !important;
}

#results-accordion .accordion-button::after {
    filter: invert(1) !important;
    opacity: 0.6 !important;
}

#results-accordion .accordion-button:focus {
    box-shadow: none !important;
    border-color: transparent !important;
}

#results-accordion .accordion-body {
    background-color: var(--swaps-bg-card) !important;
    padding: 20px !important;
    border-top: 1px solid var(--swaps-border) !important;
}

/* =========================== */
/* SEARCH INPUT                */
/* =========================== */
#search-calculations {
    background-color: var(--swaps-bg-surface) !important;
    border: 1px solid var(--swaps-border) !important;
    border-radius: 8px !important;
    color: var(--swaps-text-primary) !important;
    padding: 8px 12px !important;
    font-size: 13px !important;
}

#search-calculations:focus {
    border-color: var(--swaps-accent) !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15) !important;
    outline: none !important;
}

#search-calculations::placeholder {
    color: var(--swaps-text-muted) !important;
}

/* =========================== */
/* DATE PICKER PORTAL FIX      */
/* =========================== */

/* Fix the portal overlay that causes the black background */
.DateRangePicker_portal,
.SingleDatePicker_portal,
.DateRangePicker_portal__horizontal,
.SingleDatePicker_portal__horizontal {
    background-color: transparent !important;
}

/* The portal overlay div - make it transparent, not black */
.DateRangePicker_portal::before,
.SingleDatePicker_portal::before,
.DateRangePicker_portal > div:first-child,
.SingleDatePicker_portal > div:first-child {
    background-color: rgba(0, 0, 0, 0.3) !important;
}

/* Portal container should not have black background */
div[class*="_portal"] {
    background-color: transparent !important;
}

/* The backdrop/screen behind the calendar in portal mode */
.DateRangePicker_portal ~ .DateRangePicker_portal__overlay,
.SingleDatePicker_portal ~ .SingleDatePicker_portal__overlay,
.DayPickerPortal_overlay,
.DayPicker_portal__overlay {
    background-color: rgba(0, 0, 0, 0.3) !important;
}

/* Target the actual fullscreen container that might be black */
.DayPickerPortal,
.SingleDatePicker_picker__portal,
.DateRangePicker_picker__portal {
    background-color: transparent !important;
}

/* The portal's direct child div that acts as backdrop */
.SingleDatePicker_picker__portal > div:not(.DayPicker),
.DateRangePicker_picker__portal > div:not(.DayPicker) {
    background-color: rgba(0, 0, 0, 0.3) !important;
}

/* Ensure z-index is high enough to be above modal backdrop */
.SingleDatePicker_picker__portal,
.DateRangePicker_picker__portal,
.DayPickerPortal {
    z-index: 10100 !important;
}

/* Keep the actual calendar picker styled correctly */
.SingleDatePicker_picker__portal .DayPicker,
.DateRangePicker_picker__portal .DayPicker {
    background-color: var(--swaps-bg-surface) !important;
    border-radius: 12px !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5) !important;
}

/* =========================== */
/* LOADING SPINNER STYLING     */
/* =========================== */

/* Loading button state */
#submit-calculation.loading {
    pointer-events: none !important;
    opacity: 0.8 !important;
}

/* Spinner inside button */
.btn-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: btn-spin 0.8s linear infinite;
    margin-right: 8px;
    vertical-align: middle;
}

@keyframes btn-spin {
    to { transform: rotate(360deg); }
}

/* Loading overlay for the modal body */
.modal-loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(26, 26, 46, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    border-radius: 16px;
}

.modal-loading-spinner {
    width: 48px;
    height: 48px;
    border: 4px solid var(--swaps-border);
    border-top-color: var(--swaps-accent);
    border-radius: 50%;
    animation: btn-spin 1s linear infinite;
}