/* Theme chrome: Bootstrap + native controls under data-theme.
   Toggle / FOUC script — Stage 5. Preview: <html data-theme="dark"> */

/* --- Bootstrap dropdown --- */
.dropdown-menu {
    background-color: var(--color-surface);
    border-color: var(--color-border);
    color: var(--color-text);
    box-shadow: var(--shadow-md);
}

.dropdown-menu .dropdown-item,
.dropdown-menu li a {
    color: var(--color-text);
}

.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus,
.dropdown-menu .dropdown-item:active,
.dropdown-menu .dropdown-item.active,
.dropdown-menu li a:hover,
.dropdown-menu li a:focus,
.dropdown-menu li a:active {
    background-color: var(--color-surface-2);
    color: var(--color-text);
}

.dropdown-divider {
    border-top-color: var(--color-border);
}

/* --- Bootstrap modal --- */
.modal-content {
    background-color: var(--color-surface);
    color: var(--color-text);
    border-color: var(--color-border);
}

.modal-header,
.modal-footer {
    border-color: var(--color-border);
}

.modal-title {
    color: var(--color-text);
}

.modal-backdrop.show {
    opacity: 1;
    background-color: var(--color-overlay);
}

/* Close button: Bootstrap SVG is dark by default */
[data-theme="dark"] .btn-close {
    filter: invert(1) grayscale(100%);
    opacity: 0.7;
}

[data-theme="dark"] .btn-close:hover {
    opacity: 1;
}

/* --- Forms (Bootstrap + generic) --- */
.form-control,
.form-select,
.form-control:focus,
.form-select:focus {
    background-color: var(--color-surface);
    color: var(--color-text);
    border-color: var(--color-border);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--color-brand);
    box-shadow: 0 0 0 0.2rem var(--color-brand-alpha);
    background-color: var(--color-surface);
    color: var(--color-text);
}

.form-control::placeholder {
    color: var(--color-text-muted);
    opacity: 1;
}

.form-text,
.text-muted {
    color: var(--color-text-muted) !important;
}

.input-group-text {
    background-color: var(--color-surface-2);
    color: var(--color-text-secondary);
    border-color: var(--color-border);
}

/* --- Tables / list groups often used with Bootstrap --- */
.list-group-item {
    background-color: var(--color-surface);
    color: var(--color-text);
    border-color: var(--color-border);
}

.card {
    background-color: var(--color-surface);
    color: var(--color-text);
    border-color: var(--color-border);
}

.table {
    color: var(--color-text);
    --bs-table-bg: var(--color-surface);
    --bs-table-color: var(--color-text);
    --bs-table-border-color: var(--color-border);
    --bs-table-striped-bg: var(--color-surface-2);
    --bs-table-hover-bg: var(--color-surface-2);
}

/* --- Misc chrome --- */
hr {
    border-color: var(--color-border);
    opacity: 1;
}

/* Content images / avatars / video: do not invert (no global filter on media).
   Logo: logo.png (light theme) + logo-light.png (dark) via SiteHeader + layout.css. */

/* --- Dark: dialogs with hardcoded black SVG close icons --- */
[data-theme="dark"] .drafts-dialog__close,
[data-theme="dark"] .editor-trash__modal .modal-content > button {
    filter: invert(1) grayscale(100%);
    opacity: 0.75;
}

[data-theme="dark"] .drafts-dialog__close:hover,
[data-theme="dark"] .editor-trash__modal .modal-content > button:hover {
    opacity: 1;
}

/* --- Dark: rating podium (light gold/silver gradients) --- */
[data-theme="dark"] .rating-page__podium-item--1 {
    background: linear-gradient(180deg, #3d3420 0%, var(--color-surface-2) 100%);
    box-shadow: 0 0 0 1px rgba(212, 175, 55, .35);
}

[data-theme="dark"] .rating-page__podium-item--2 {
    background: linear-gradient(180deg, #2c3038 0%, var(--color-surface-2) 100%);
    box-shadow: 0 0 0 1px rgba(148, 163, 184, .28);
}

[data-theme="dark"] .rating-page__podium-item--3 {
    background: linear-gradient(180deg, #3a2e24 0%, var(--color-surface-2) 100%);
    box-shadow: 0 0 0 1px rgba(180, 120, 70, .28);
}

/* --- Dark: video play affordance on posters --- */
[data-theme="dark"] .story-media__video-attachment-button {
    background: rgb(255 255 255 / 28%);
}

[data-theme="dark"] .story-media__video-attachment-poster:hover .story-media__video-attachment-button {
    background: rgb(255 255 255 / 42%);
}

/* --- Dark: sticky editor publish bars --- */
[data-theme="dark"] .story-editor__aside,
[data-theme="dark"] .question-add__page .row > .col-md-4 {
    box-shadow: 0 -10px 32px rgb(0 0 0 / 45%);
    border-top-color: var(--color-border);
}