/*
 * Take-Two Document Archive themes
 * Palette sampled from the Take-Two webmail logo:
 * navy #1C447A, blue #6195F4, turquoise #55D6D7, pink #EAAED4.
 */

:root,
html[data-theme="light"] {
    color-scheme: light;
    --theme-page: #f5f7fa;
    --theme-surface: #ffffff;
    --theme-surface-alt: #f8fafc;
    --theme-surface-hover: #f1f5f9;
    --theme-border: #dbe3ec;
    --theme-border-strong: #cbd5e1;
    --theme-text: #172033;
    --theme-muted: #66758a;
    --theme-primary: #2c5e86;
    --theme-primary-hover: #234d70;
    --theme-primary-text: #ffffff;
    --theme-focus: #6195f4;
    --theme-shadow: rgba(15, 23, 42, .08);
    --theme-topbar: #ffffff;
    --theme-topbar-text: #172033;
}

html[data-theme="dark"] {
    color-scheme: dark;
    --theme-page: #0f1720;
    --theme-surface: #18222d;
    --theme-surface-alt: #202c38;
    --theme-surface-hover: #273646;
    --theme-border: #344556;
    --theme-border-strong: #465c70;
    --theme-text: #eef4fa;
    --theme-muted: #a8b6c5;
    --theme-primary: #75a7d1;
    --theme-primary-hover: #96bee0;
    --theme-primary-text: #0d1720;
    --theme-focus: #8fc4ef;
    --theme-shadow: rgba(0, 0, 0, .32);
    --theme-topbar: #111a23;
    --theme-topbar-text: #f4f8fb;
}

html[data-theme="take-two"] {
    color-scheme: light;
    --theme-page: #edf5ff;
    --theme-surface: #ffffff;
    --theme-surface-alt: #f4f9ff;
    --theme-surface-hover: #e6f2ff;
    --theme-border: #b9d2f2;
    --theme-border-strong: #8db4e8;
    --theme-text: #1c447a;
    --theme-muted: #58708f;
    --theme-primary: #6195f4;
    --theme-primary-hover: #1c447a;
    --theme-primary-text: #ffffff;
    --theme-focus: #55d6d7;
    --theme-shadow: rgba(28, 68, 122, .14);
    --theme-topbar: #1c447a;
    --theme-topbar-text: #ffffff;
}

html,
body {
    min-height: 100%;
}

body {
    background: var(--theme-page) !important;
    color: var(--theme-text) !important;
    transition: background-color .18s ease, color .18s ease;
}

.topbar {
    background: var(--theme-topbar) !important;
    border-color: var(--theme-border) !important;
    box-shadow: 0 2px 12px var(--theme-shadow) !important;
}

html[data-theme="take-two"] .topbar {
    background: linear-gradient(100deg, #1c447a 0%, #355f9d 58%, #6195f4 100%) !important;
    border-bottom: 3px solid #55d6d7 !important;
}

.topbar-inner,
.brand,
.account,
.link-button {
    color: var(--theme-topbar-text) !important;
}

.topbar-actions {
    display: flex;
    align-items: center;
    gap: .8rem;
    min-width: 0;
}

.theme-control {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    color: var(--theme-topbar-text);
    font-size: .75rem;
    font-weight: 700;
    white-space: nowrap;
}

.theme-control select {
    min-height: 2rem;
    padding: .2rem 1.8rem .2rem .55rem;
    color: var(--theme-text);
    background: var(--theme-surface);
    border: 1px solid var(--theme-border-strong);
    border-radius: .4rem;
    font: inherit;
    cursor: pointer;
}

.theme-control select:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
button:focus-visible,
a:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--theme-focus) 65%, transparent) !important;
    outline-offset: 2px;
}

.container,
.page-heading,
.review-heading,
.review-page,
.archive-shell {
    color: var(--theme-text) !important;
}

.panel,
.archive-card,
.archive-intro,
.review-panel {
    color: var(--theme-text) !important;
    background: var(--theme-surface) !important;
    border-color: var(--theme-border) !important;
    box-shadow: 0 4px 18px var(--theme-shadow) !important;
}

.muted,
.hint,
.eyebrow,
.review-eyebrow,
.date-kind,
.archive-filename,
.archive-empty,
.archive-footer,
.history-meta,
.related-score,
.metadata-grid dt {
    color: var(--theme-muted) !important;
}

h1,
h2,
h3,
h4,
.archive-title,
.metadata-grid dd,
.related-item a,
.history-item strong {
    color: var(--theme-text) !important;
}

input,
select,
textarea {
    color: var(--theme-text) !important;
    background: var(--theme-surface) !important;
    border-color: var(--theme-border-strong) !important;
}

input::placeholder,
textarea::placeholder {
    color: var(--theme-muted) !important;
    opacity: .8;
}

.button,
.review-button,
.archive-button,
.archive-search button {
    color: var(--theme-primary-text) !important;
    background: var(--theme-primary) !important;
    border-color: var(--theme-primary) !important;
}

.button:hover,
.review-button:hover,
.archive-button:hover,
.archive-search button:hover {
    background: var(--theme-primary-hover) !important;
    border-color: var(--theme-primary-hover) !important;
}

.button:not(.primary),
.review-button:not(.primary):not(.danger):not(.warning),
.archive-button.secondary {
    color: var(--theme-text) !important;
    background: var(--theme-surface-alt) !important;
    border-color: var(--theme-border-strong) !important;
}

html[data-theme="take-two"] .button.primary,
html[data-theme="take-two"] .review-button.primary,
html[data-theme="take-two"] .archive-button:not(.secondary),
html[data-theme="take-two"] .archive-search button {
    background: linear-gradient(100deg, #6195f4, #55d6d7) !important;
    border-color: #6195f4 !important;
    color: #102d55 !important;
}

.archive-tabs {
    margin-top: 0 !important;
}

.archive-tab {
    color: var(--theme-text) !important;
    background: var(--theme-surface-alt) !important;
    border-color: var(--theme-border) !important;
}

.archive-tab.active {
    color: var(--theme-primary-text) !important;
    background: var(--theme-primary) !important;
    border-color: var(--theme-primary) !important;
}

html[data-theme="take-two"] .archive-tab.active {
    color: #102d55 !important;
    background: linear-gradient(100deg, #55d6d7, #eaaed4) !important;
    border-color: #55d6d7 !important;
}

.archive-toolbar,
.archive-footer {
    background: var(--theme-surface-alt) !important;
    border-color: var(--theme-border) !important;
}

.archive-table th {
    color: var(--theme-muted) !important;
    background: var(--theme-surface-alt) !important;
    border-color: var(--theme-border) !important;
}

.archive-table td {
    color: var(--theme-text) !important;
    background: var(--theme-surface) !important;
    border-color: var(--theme-border) !important;
}

.archive-table tbody tr:hover td,
.archive-sort:hover {
    color: var(--theme-text) !important;
    background: var(--theme-surface-hover) !important;
}

.archive-row-tag,
.document-tag {
    color: var(--theme-text) !important;
    background: var(--theme-surface-alt) !important;
    border: 1px solid var(--theme-border) !important;
}

html[data-theme="take-two"] .archive-row-tag,
html[data-theme="take-two"] .document-tag {
    color: #1c447a !important;
    background: color-mix(in srgb, #eaaed4 24%, white) !important;
    border-color: color-mix(in srgb, #eaaed4 65%, #6195f4) !important;
}

.ocr-text,
pre,
code {
    color: var(--theme-text) !important;
    background: var(--theme-surface-alt) !important;
    border-color: var(--theme-border) !important;
}

.related-item,
.history-item,
.metadata-grid,
.tag-form,
.edit-form {
    border-color: var(--theme-border) !important;
}

.alert.success {
    color: #0d5f3a !important;
    background: #dff5e9 !important;
    border-color: #8bd5ad !important;
}

.alert.warning {
    color: #805000 !important;
    background: #fff2cf !important;
    border-color: #efd28c !important;
}

.alert.error {
    color: #8b2437 !important;
    background: #fff0f3 !important;
    border-color: #efb7c1 !important;
}

html[data-theme="dark"] .alert.success {
    color: #a8e9c6 !important;
    background: #153a2a !important;
    border-color: #2e7251 !important;
}

html[data-theme="dark"] .alert.warning {
    color: #f2d18a !important;
    background: #3a2d14 !important;
    border-color: #745b28 !important;
}

html[data-theme="dark"] .alert.error {
    color: #f4b6c1 !important;
    background: #3c1e26 !important;
    border-color: #7b3b4a !important;
}

html[data-theme="dark"] .badge.unreviewed { color: #f2d18a !important; background: #3a2d14 !important; }
html[data-theme="dark"] .badge.reviewed { color: #a8e9c6 !important; background: #153a2a !important; }
html[data-theme="dark"] .badge.ignored { color: #c8d1da !important; background: #303b47 !important; }
html[data-theme="dark"] .badge.ai { color: #b9dafa !important; background: #1b354c !important; }
html[data-theme="dark"] .badge.manual { color: #dec2f5 !important; background: #39284a !important; }

html[data-theme="take-two"] .badge.ai {
    color: #1c447a !important;
    background: color-mix(in srgb, #6195f4 22%, white) !important;
}

html[data-theme="take-two"] .badge.manual {
    color: #70426a !important;
    background: color-mix(in srgb, #eaaed4 34%, white) !important;
}

@media (max-width: 760px) {
    .topbar-inner {
        align-items: flex-start;
        gap: .55rem;
    }

    .topbar-actions {
        align-items: flex-end;
        flex-direction: column;
        gap: .45rem;
    }

    .theme-control-label {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    .theme-control select {
        max-width: 8.5rem;
    }
}

/* BEGIN DARK FILTER BAR FIX */
html[data-theme="dark"] .archive-filter-bar {
    background: #111c28;
    border: 1px solid #263b50;
    box-shadow: 0 4px 18px rgba(0, 0, 0, .22);
}

html[data-theme="dark"] .archive-tab {
    color: #d9e5f0;
    background: #172738;
    border-color: #30475d;
}

html[data-theme="dark"] .archive-tab:hover {
    color: #ffffff;
    background: #20364a;
    border-color: #496984;
}

html[data-theme="dark"] .archive-tab.active {
    color: #ffffff;
    background: #3979a8;
    border-color: #5b9aca;
}

html[data-theme="dark"] .archive-tab span {
    color: inherit;
    opacity: .85;
}
/* END DARK FILTER BAR FIX */

/* BEGIN CATEGORY NAVIGATION */
.topbar-link {
    display: inline-flex;
    align-items: center;
    min-height: 2rem;
    padding: .25rem .65rem;
    color: var(--theme-topbar-text) !important;
    border: 1px solid color-mix(in srgb, var(--theme-topbar-text) 28%, transparent);
    border-radius: .4rem;
    font-size: .78rem;
    font-weight: 700;
    text-decoration: none;
}

.topbar-link:hover {
    background: color-mix(in srgb, var(--theme-topbar-text) 12%, transparent);
}
/* END CATEGORY NAVIGATION */