/* ==========================================================================
   Global fixes
   Layout overrides and dark mode fixes for Bootstrap components.

   Dark mode strategy:
     - :root[data-theme=dark]  → user explicitly chose dark
     - @media (prefers-color-scheme: dark) + :root:not([data-theme=light])
       → auto mode with browser dark preference
   ========================================================================== */

/* ---------- Layout: remove forced container padding ---------- */

.wt-main-container {
    --bs-gutter-x: 0;
}

/* ---------- Modals ---------- */

:root[data-theme=dark] .modal-content {
    background-color: var(--color-bg-primary, #2E3440);
    color: #ECEFF4;
    border-color: var(--color-border, rgba(255,255,255,0.1));
}

:root[data-theme=dark] .modal-header {
    border-bottom-color: var(--color-border, rgba(255,255,255,0.1));
}

:root[data-theme=dark] .modal-footer {
    border-top-color: var(--color-border, rgba(255,255,255,0.1));
}

:root[data-theme=dark] .modal-header .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* ---------- Form controls in dark mode ---------- */

:root[data-theme=dark] .form-control,
:root[data-theme=dark] .form-select {
    background-color: var(--color-surface, #1a1a1a);
    color: #ECEFF4;
    border-color: var(--color-border, rgba(255,255,255,0.15));
}

:root[data-theme=dark] .form-control::placeholder {
    color: #4C566A;
}

:root[data-theme=dark] .form-control:focus,
:root[data-theme=dark] .form-select:focus {
    background-color: var(--color-surface, #1a1a1a);
    color: #ECEFF4;
    border-color: var(--color-primary, #5E81AC);
    box-shadow: 0 0 0 0.2rem rgba(94, 129, 172, 0.25);
}

:root[data-theme=dark] .form-select option {
    background-color: var(--color-surface, #1a1a1a);
    color: #ECEFF4;
}

:root[data-theme=dark] .input-group-text {
    background-color: var(--color-bg-elevated, #3B4252);
    color: #D8DEE9;
    border-color: var(--color-border, rgba(255,255,255,0.15));
}

:root[data-theme=dark] .form-check-input {
    background-color: var(--color-surface, #1a1a1a);
    border-color: var(--color-border, rgba(255,255,255,0.2));
}

:root[data-theme=dark] .form-check-input:checked {
    background-color: var(--color-primary, #5E81AC);
    border-color: var(--color-primary, #5E81AC);
}

:root[data-theme=dark] .col-form-label,
:root[data-theme=dark] .form-check-label,
:root[data-theme=dark] .form-label {
    color: #D8DEE9;
}

:root[data-theme=dark] .form-text,
:root[data-theme=dark] .text-muted {
    color: #4C566A !important;
}

:root[data-theme=dark] textarea.form-control {
    background-color: var(--color-surface, #1a1a1a);
    color: #ECEFF4;
}

/* ---------- Dropdown menus (global) ---------- */

:root[data-theme=dark] .dropdown-menu {
    background-color: var(--color-surface, #1a1a1a);
    color: #ECEFF4;
    border-color: var(--color-border, rgba(255,255,255,0.1));
}

:root[data-theme=dark] .dropdown-menu .dropdown-item {
    color: #ECEFF4;
}

:root[data-theme=dark] .dropdown-menu .dropdown-item:hover,
:root[data-theme=dark] .dropdown-menu .dropdown-item:focus {
    background-color: var(--color-surface-hover, #222);
    color: #ECEFF4;
}

:root[data-theme=dark] .dropdown-menu .dropdown-item.disabled {
    color: #4C566A;
}

:root[data-theme=dark] .dropdown-menu .dropdown-divider {
    border-color: var(--color-border, rgba(255,255,255,0.1));
}

:root[data-theme=dark] .dropdown-menu .dropdown-header {
    color: #D8DEE9;
}

/* ==========================================================================
   Auto mode: @media (prefers-color-scheme: dark) — same rules
   ========================================================================== */

@media (prefers-color-scheme: dark) {
    /* Modals */
    :root:not([data-theme=light]) .modal-content {
        background-color: var(--color-bg-primary, #2E3440);
        color: #ECEFF4;
        border-color: var(--color-border, rgba(255,255,255,0.1));
    }

    :root:not([data-theme=light]) .modal-header {
        border-bottom-color: var(--color-border, rgba(255,255,255,0.1));
    }

    :root:not([data-theme=light]) .modal-footer {
        border-top-color: var(--color-border, rgba(255,255,255,0.1));
    }

    :root:not([data-theme=light]) .modal-header .btn-close {
        filter: invert(1) grayscale(100%) brightness(200%);
    }

    /* Form controls */
    :root:not([data-theme=light]) .form-control,
    :root:not([data-theme=light]) .form-select {
        background-color: var(--color-surface, #1a1a1a);
        color: #ECEFF4;
        border-color: var(--color-border, rgba(255,255,255,0.15));
    }

    :root:not([data-theme=light]) .form-control::placeholder {
        color: #4C566A;
    }

    :root:not([data-theme=light]) .form-control:focus,
    :root:not([data-theme=light]) .form-select:focus {
        background-color: var(--color-surface, #1a1a1a);
        color: #ECEFF4;
        border-color: var(--color-primary, #5E81AC);
        box-shadow: 0 0 0 0.2rem rgba(94, 129, 172, 0.25);
    }

    :root:not([data-theme=light]) .form-select option {
        background-color: var(--color-surface, #1a1a1a);
        color: #ECEFF4;
    }

    :root:not([data-theme=light]) .input-group-text {
        background-color: var(--color-bg-elevated, #3B4252);
        color: #D8DEE9;
        border-color: var(--color-border, rgba(255,255,255,0.15));
    }

    :root:not([data-theme=light]) .form-check-input {
        background-color: var(--color-surface, #1a1a1a);
        border-color: var(--color-border, rgba(255,255,255,0.2));
    }

    :root:not([data-theme=light]) .form-check-input:checked {
        background-color: var(--color-primary, #5E81AC);
        border-color: var(--color-primary, #5E81AC);
    }

    :root:not([data-theme=light]) .col-form-label,
    :root:not([data-theme=light]) .form-check-label,
    :root:not([data-theme=light]) .form-label {
        color: #D8DEE9;
    }

    :root:not([data-theme=light]) .form-text,
    :root:not([data-theme=light]) .text-muted {
        color: #4C566A !important;
    }

    :root:not([data-theme=light]) textarea.form-control {
        background-color: var(--color-surface, #1a1a1a);
        color: #ECEFF4;
    }

    /* Dropdown menus */
    :root:not([data-theme=light]) .dropdown-menu {
        background-color: var(--color-surface, #1a1a1a);
        color: #ECEFF4;
        border-color: var(--color-border, rgba(255,255,255,0.1));
    }

    :root:not([data-theme=light]) .dropdown-menu .dropdown-item {
        color: #ECEFF4;
    }

    :root:not([data-theme=light]) .dropdown-menu .dropdown-item:hover,
    :root:not([data-theme=light]) .dropdown-menu .dropdown-item:focus {
        background-color: var(--color-surface-hover, #222);
        color: #ECEFF4;
    }

    :root:not([data-theme=light]) .dropdown-menu .dropdown-item.disabled {
        color: #4C566A;
    }

    :root:not([data-theme=light]) .dropdown-menu .dropdown-divider {
        border-color: var(--color-border, rgba(255,255,255,0.1));
    }

    :root:not([data-theme=light]) .dropdown-menu .dropdown-header {
        color: #D8DEE9;
    }
}

/* ==========================================================================
   Colorbox / Gallery lightbox overrides
   Styled to match homepage dialog: blurred backdrop, centered image,
   close button top-right. Uses [dir] to override webtrees specificity.
   ========================================================================== */

/* Overlay: blurred backdrop (matching homepage dialog::backdrop blur(10px))
   colorbox sets opacity via inline style (.fadeTo), which prevents
   backdrop-filter from working. Force opacity:1 and use background alpha. */
[dir] #cboxOverlay {
    background: rgba(0, 0, 0, 0.3) !important;
    opacity: 1 !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
}

/* Strip webtrees border/padding/background from content area */
[dir] #cboxContent {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    overflow: visible !important;
}

/* Remove bottom margin that offsets the image */
[dir] #cboxLoadedContent {
    margin-bottom: 0 !important;
    overflow: visible !important;
    background: transparent !important;
}

/* Image: full opacity, centered */
[dir] .cboxPhoto {
    margin: auto !important;
    float: none !important;
}

.cboxPhoto {
    opacity: 1 !important;
    object-fit: contain;
    display: block !important;
}

/* Title: centered below image */
[dir] #cboxTitle {
    background: transparent !important;
    text-align: center !important;
    margin: 0 !important;
}

#cboxTitle {
    font-size: 0.85rem;
    color: #ECEFF4 !important;
    padding: 0.4rem 0 !important;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
}

/* Hide "Image X of Y" */
#cboxCurrent {
    display: none !important;
}

/* Hide loading overlay backgrounds */
[dir] #cboxLoadingOverlay,
[dir] #cboxLoadingGraphic {
    background: transparent !important;
}

/* --- Control buttons: semi-transparent circles with drop-shadow --- */
[dir] #cboxPrevious,
[dir] #cboxNext,
[dir] #cboxSlideshow,
[dir] #cboxClose {
    background: rgba(0, 0, 0, 0.4) !important;
    border: none !important;
    border-radius: 50% !important;
    padding: 0.45rem !important;
}

#cboxPrevious,
#cboxNext,
#cboxSlideshow,
#cboxClose {
    color: #ECEFF4 !important;
    opacity: 0.85;
    transition: opacity 0.2s, background 0.2s;
    filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.6));
    width: 2.25rem !important;
    height: 2.25rem !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
}

#cboxPrevious:hover,
#cboxNext:hover,
#cboxSlideshow:hover,
#cboxClose:hover {
    opacity: 1;
}

[dir] #cboxPrevious:hover,
[dir] #cboxNext:hover,
[dir] #cboxSlideshow:hover,
[dir] #cboxClose:hover {
    background: rgba(0, 0, 0, 0.6) !important;
}

#cboxPrevious svg,
#cboxNext svg,
#cboxSlideshow svg,
#cboxClose svg {
    width: 16px;
    height: 16px;
}

/* Close: top-right of image (like homepage dialog button) */
#cboxClose {
    top: -1rem !important;
    bottom: auto !important;
}
[dir=ltr] #cboxClose { right: -1rem !important; }
[dir=rtl] #cboxClose { left: -1rem !important; }

/* Prev/Next: vertically centered on sides of image */
#cboxPrevious,
#cboxNext {
    bottom: 50% !important;
    transform: translateY(50%);
}
[dir=ltr] #cboxPrevious { left: -2.5rem !important; }
[dir=rtl] #cboxPrevious { right: -2.5rem !important; }
[dir=ltr] #cboxNext { left: auto !important; right: -2.5rem !important; }
[dir=rtl] #cboxNext { right: auto !important; left: -2.5rem !important; }

/* Slideshow: bottom-right */
#cboxSlideshow {
    bottom: -2rem !important;
}
[dir=ltr] #cboxSlideshow { right: 0 !important; left: auto !important; }
[dir=rtl] #cboxSlideshow { left: 0 !important; right: auto !important; }

/* Hide decorative border/spacing divs */
#cboxTopLeft, #cboxTopCenter, #cboxTopRight,
#cboxBottomLeft, #cboxBottomCenter, #cboxBottomRight,
#cboxMiddleLeft, #cboxMiddleRight {
    display: none !important;
}

/* ---------- Typeahead hint input: fix background ---------- */

.tt-hint {
    background: var(--color-bg-primary, #f8f6f1) !important;
}

:root[data-theme=dark] .tt-hint {
    background: var(--color-surface, #1a1a1a) !important;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme=light]) .tt-hint {
        background: var(--color-surface, #1a1a1a) !important;
    }
}

/* ---------- Calendar date picker ---------- */

/* Calendar day cells: small radius instead of circle */
div[id^="caldiv"] table table tr:not(:first-child) td {
    border-radius: 4px !important;
}

/* Theme-aware calendar overrides */
div[id^="caldiv"] {
    background-color: var(--color-surface, #efecea) !important;
    border-color: var(--color-border, #ddd) !important;
}

div[id^="caldiv"] table {
    border-color: var(--color-border, #ddd) !important;
}

div[id^="caldiv"] td {
    background-color: var(--color-surface, #efecea) !important;
    border-color: var(--color-border, #ddd) !important;
    color: var(--color-text-primary, #2a2a2a);
}

div[id^="caldiv"] td[style*="background-color:#EAEAEA"] {
    background-color: var(--color-bg-tertiary, #e8e5e1) !important;
}

/* Header row day names */
div[id^="caldiv"] table table tr:first-child .descriptionbox {
    background-color: var(--color-bg-tertiary, #e8e5e1) !important;
    color: var(--color-text-primary, #2a2a2a) !important;
}

/* Highlighted/today day cell */
div[id^="caldiv"] table table tr:not(:first-child) td.descriptionbox {
    background-color: var(--color-primary, #5E81AC) !important;
    color: white !important;
}

div[id^="caldiv"] table table tr:not(:first-child) td.descriptionbox a {
    color: white !important;
}

div[id^="caldiv"] .optionbox {
    background-color: var(--color-surface, #efecea) !important;
    color: var(--color-text-primary, #2a2a2a) !important;
}

div[id^="caldiv"] a {
    color: var(--color-link, #5E81AC) !important;
}

div[id^="caldiv"] .form-select,
div[id^="caldiv"] .form-control {
    background-color: var(--color-bg-tertiary, #e8e5e1) !important;
    color: var(--color-text-primary, #2a2a2a) !important;
    border-color: var(--color-border, #ddd) !important;
}

/* ---------- Empty spacer label: match page background ---------- */

.wt-page-options-label:not(:has(*)) {
    background-color: var(--color-bg-primary, #f8f6f1) !important;
}