/*
 * Liturgical vestment color themes.
 *
 * Each theme mirrors a traditional Russian Orthodox brocade (парча):
 * rich fabric color as background/accents, gold ornament as highlights.
 *
 * Colors:
 *   gold    — Золотой: Sundays, apostles, prophets, hierarchs
 *   white   — Белый: Christmas, Epiphany, Ascension, Transfiguration, angels
 *   red     — Красный: Pascha, martyrs
 *   blue    — Голубой: Theotokos feasts
 *   green   — Зелёный: Pentecost, monastic saints, Palm Sunday
 *   purple  — Фиолетовый: Cross feasts, Great Lent Sundays
 *   black   — Чёрный: Great Lent weekdays, funerals
 */

/* ── Base: CSS variables for theming ─────────────────────────────── */

:root,
[data-theme="gold"] {
    --th-player-bg: #2c2416;
    --th-player-surface: #3a3020;
    --th-player-border: #4a4030;
    --th-player-text: #e8d5a3;
    --th-player-text-dim: #9a8a6a;
    --th-nav-bg: #2c2416;
    --th-nav-text: #e8d5a3;
    --th-nav-brand: #f0c75e;
    --th-body-bg: #faf6ee;
    --th-card-bg: #ffffff;
    --th-card-border: #e8d5a3;
    --th-text: #3a3226;
    --th-text-secondary: #8a7d6b;
    --th-accent: #c5960c;
    --th-accent-hover: #d9a82e;
    --th-accent-text: #fff;
    --th-btn-primary-bg: #c5960c;
    --th-btn-primary-hover: #d9a82e;
    --th-link: #a07808;
    --th-badge-bg: #f0e0b0;
    --th-badge-text: #6b5a2e;
    --th-footer-bg: #2c2416;
    --th-footer-text: #b0a080;
    --th-mark-bg: #fef0c0;
    --th-upload-border: #d5c8a0;
    --th-upload-hover-border: #c5960c;
    --th-upload-hover-bg: #fdf5e0;
    --th-category-shadow: rgba(197, 150, 12, 0.12);
}

[data-theme="white"] {
    --th-player-bg: #2b2b30;
    --th-player-surface: #38383e;
    --th-player-border: #48484f;
    --th-player-text: #d0d0d5;
    --th-player-text-dim: #88888f;
    --th-nav-bg: #2b2b30;
    --th-nav-text: #d0d0d5;
    --th-nav-brand: #ffffff;
    --th-body-bg: #f5f5f7;
    --th-card-bg: #ffffff;
    --th-card-border: #dcdce0;
    --th-text: #2a2a2f;
    --th-text-secondary: #7a7a85;
    --th-accent: #6b6b75;
    --th-accent-hover: #55555f;
    --th-accent-text: #fff;
    --th-btn-primary-bg: #505058;
    --th-btn-primary-hover: #3f3f47;
    --th-link: #4a4a55;
    --th-badge-bg: #e8e8ec;
    --th-badge-text: #4a4a55;
    --th-footer-bg: #2b2b30;
    --th-footer-text: #9a9aa0;
    --th-mark-bg: #e8e8ec;
    --th-upload-border: #c8c8d0;
    --th-upload-hover-border: #6b6b75;
    --th-upload-hover-bg: #eeeef2;
    --th-category-shadow: rgba(0, 0, 0, 0.06);
}

[data-theme="red"] {
    --th-player-bg: #3a1218;
    --th-player-surface: #4a2028;
    --th-player-border: #5a3038;
    --th-player-text: #e8b0b8;
    --th-player-text-dim: #8a5a62;
    --th-nav-bg: #3a1218;
    --th-nav-text: #e8b0b8;
    --th-nav-brand: #f0c0c5;
    --th-body-bg: #fdf5f5;
    --th-card-bg: #ffffff;
    --th-card-border: #e8c0c5;
    --th-text: #3a1a1e;
    --th-text-secondary: #8a6068;
    --th-accent: #b82030;
    --th-accent-hover: #d03040;
    --th-accent-text: #fff;
    --th-btn-primary-bg: #b82030;
    --th-btn-primary-hover: #d03040;
    --th-link: #992028;
    --th-badge-bg: #f0d0d5;
    --th-badge-text: #6b2030;
    --th-footer-bg: #3a1218;
    --th-footer-text: #b08088;
    --th-mark-bg: #fde0e0;
    --th-upload-border: #d5b0b5;
    --th-upload-hover-border: #b82030;
    --th-upload-hover-bg: #fdf0f0;
    --th-category-shadow: rgba(184, 32, 48, 0.1);
}

[data-theme="blue"] {
    --th-player-bg: #12203a;
    --th-player-surface: #1e2e4a;
    --th-player-border: #2e3e5a;
    --th-player-text: #a0c0e8;
    --th-player-text-dim: #5a7898;
    --th-nav-bg: #12203a;
    --th-nav-text: #a0c0e8;
    --th-nav-brand: #c0d8f0;
    --th-body-bg: #f2f6fc;
    --th-card-bg: #ffffff;
    --th-card-border: #c0d0e8;
    --th-text: #1a2a3a;
    --th-text-secondary: #607088;
    --th-accent: #2060b0;
    --th-accent-hover: #3070c8;
    --th-accent-text: #fff;
    --th-btn-primary-bg: #2060b0;
    --th-btn-primary-hover: #3070c8;
    --th-link: #1a5098;
    --th-badge-bg: #d0e0f0;
    --th-badge-text: #20406b;
    --th-footer-bg: #12203a;
    --th-footer-text: #8098b0;
    --th-mark-bg: #dde8f8;
    --th-upload-border: #b0c0d8;
    --th-upload-hover-border: #2060b0;
    --th-upload-hover-bg: #e8f0fc;
    --th-category-shadow: rgba(32, 96, 176, 0.1);
}

[data-theme="green"] {
    --th-player-bg: #142618;
    --th-player-surface: #203428;
    --th-player-border: #304438;
    --th-player-text: #a0c8a8;
    --th-player-text-dim: #5a7a62;
    --th-nav-bg: #142618;
    --th-nav-text: #a0c8a8;
    --th-nav-brand: #c0e0c5;
    --th-body-bg: #f3f9f4;
    --th-card-bg: #ffffff;
    --th-card-border: #b8d8be;
    --th-text: #1a3020;
    --th-text-secondary: #607868;
    --th-accent: #2a7a38;
    --th-accent-hover: #389048;
    --th-accent-text: #fff;
    --th-btn-primary-bg: #2a7a38;
    --th-btn-primary-hover: #389048;
    --th-link: #207030;
    --th-badge-bg: #d0e8d5;
    --th-badge-text: #2a5030;
    --th-footer-bg: #142618;
    --th-footer-text: #80a088;
    --th-mark-bg: #ddf0e0;
    --th-upload-border: #a8c8b0;
    --th-upload-hover-border: #2a7a38;
    --th-upload-hover-bg: #e8f5ea;
    --th-category-shadow: rgba(42, 122, 56, 0.1);
}

[data-theme="purple"] {
    --th-player-bg: #221430;
    --th-player-surface: #302040;
    --th-player-border: #403050;
    --th-player-text: #c0a8d8;
    --th-player-text-dim: #6a5880;
    --th-nav-bg: #221430;
    --th-nav-text: #c0a8d8;
    --th-nav-brand: #d8c0f0;
    --th-body-bg: #f8f4fc;
    --th-card-bg: #ffffff;
    --th-card-border: #d0c0e0;
    --th-text: #2a1a38;
    --th-text-secondary: #706080;
    --th-accent: #6a30a0;
    --th-accent-hover: #7e40b8;
    --th-accent-text: #fff;
    --th-btn-primary-bg: #6a30a0;
    --th-btn-primary-hover: #7e40b8;
    --th-link: #5a2888;
    --th-badge-bg: #e0d0f0;
    --th-badge-text: #4a2070;
    --th-footer-bg: #221430;
    --th-footer-text: #9880b0;
    --th-mark-bg: #ecddf8;
    --th-upload-border: #c0b0d5;
    --th-upload-hover-border: #6a30a0;
    --th-upload-hover-bg: #f0e8f8;
    --th-category-shadow: rgba(106, 48, 160, 0.1);
}

[data-theme="black"] {
    --th-player-bg: #111111;
    --th-player-surface: #1e1e22;
    --th-player-border: #3a3a40;
    --th-player-text: #a0a0a5;
    --th-player-text-dim: #606065;
    --th-nav-bg: #111111;
    --th-nav-text: #a0a0a0;
    --th-nav-brand: #d0d0d0;
    --th-body-bg: #1a1a1e;
    --th-card-bg: #242428;
    --th-card-border: #3a3a40;
    --th-text: #d0d0d5;
    --th-text-secondary: #888890;
    --th-accent: #808088;
    --th-accent-hover: #9898a0;
    --th-accent-text: #fff;
    --th-btn-primary-bg: #505058;
    --th-btn-primary-hover: #68686e;
    --th-link: #a0a0a8;
    --th-badge-bg: #3a3a40;
    --th-badge-text: #b0b0b5;
    --th-footer-bg: #111111;
    --th-footer-text: #707075;
    --th-mark-bg: #3a3a40;
    --th-upload-border: #3a3a40;
    --th-upload-hover-border: #606068;
    --th-upload-hover-bg: #28282e;
    --th-category-shadow: rgba(255, 255, 255, 0.03);
}

/* ── Apply variables to site elements ────────────────────────────── */

body {
    background-color: var(--th-body-bg);
    color: var(--th-text);
    transition: background-color 0.3s, color 0.3s;
}

/* Navbar */
.navbar {
    background-color: var(--th-nav-bg) !important;
    transition: background-color 0.3s;
}

.navbar .navbar-brand,
.navbar .navbar-brand:hover {
    color: var(--th-nav-brand) !important;
}

.navbar .nav-link {
    color: var(--th-nav-text) !important;
}

.navbar .form-control {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.15);
    color: #fff;
}

.navbar .form-control::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.navbar .btn-outline-light {
    color: var(--th-nav-text);
    border-color: rgba(255, 255, 255, 0.2);
}

/* Footer */
footer {
    background-color: var(--th-footer-bg) !important;
    transition: background-color 0.3s;
}

footer small {
    color: var(--th-footer-text) !important;
}

/* Cards */
.card {
    background-color: var(--th-card-bg);
    border-color: var(--th-card-border);
    transition: background-color 0.3s, border-color 0.3s;
}

/* Category cards */
.category-card:hover {
    box-shadow: 0 4px 16px var(--th-category-shadow);
}

/* Buttons */
.btn-primary {
    background-color: var(--th-btn-primary-bg);
    border-color: var(--th-btn-primary-bg);
    color: var(--th-accent-text);
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--th-btn-primary-hover);
    border-color: var(--th-btn-primary-hover);
}

.btn-outline-info {
    color: var(--th-accent);
    border-color: var(--th-accent);
}

.btn-outline-info:hover {
    background-color: var(--th-accent);
    border-color: var(--th-accent);
    color: var(--th-accent-text);
}

/* Links */
a {
    color: var(--th-link);
}

a:hover {
    color: var(--th-accent-hover);
}

/* Badges */
.badge.bg-secondary {
    background-color: var(--th-badge-bg) !important;
    color: var(--th-badge-text) !important;
}

/* Search highlights */
mark {
    background-color: var(--th-mark-bg);
}

/* Text utilities */
.text-secondary {
    color: var(--th-text-secondary) !important;
}

/* Upload zone */
.upload-zone {
    border-color: var(--th-upload-border);
}

.upload-zone:hover,
.upload-zone.drag-over {
    border-color: var(--th-upload-hover-border);
    background-color: var(--th-upload-hover-bg);
}

/* Tables */
.table {
    color: var(--th-text);
}

/* Dark theme adjustments */
[data-theme="black"] .form-control,
[data-theme="black"] .form-select {
    background-color: #2a2a2e;
    border-color: #3a3a40;
    color: #d0d0d5;
}

[data-theme="black"] .list-group-item {
    background-color: #242428;
    border-color: #3a3a40;
    color: #d0d0d5;
}

[data-theme="black"] .pdf-viewer-container {
    background: #2a2a2e;
}

[data-theme="black"] .progress {
    background-color: #2a2a2e;
}

[data-theme="black"] .card-title,
[data-theme="black"] .card-body,
[data-theme="black"] h1, [data-theme="black"] h2,
[data-theme="black"] h3, [data-theme="black"] h4,
[data-theme="black"] h5 {
    color: #d0d0d5;
}

[data-theme="black"] .category-card .card-body {
    color: #d0d0d5;
}

[data-theme="black"] .btn-outline-warning {
    color: #d9a24a;
    border-color: #d9a24a;
}

[data-theme="black"] .table {
    --bs-table-bg: transparent;
    --bs-table-color: #d0d0d5;
}

/* ── Theme switcher widget ───────────────────────────────────────── */

.theme-switcher {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.theme-dot {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.3);
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
    position: relative;
}

.theme-dot:hover {
    transform: scale(1.2);
}

.theme-dot.active {
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.8);
    transform: scale(1.15);
}

.theme-dot[data-theme="gold"] { background: linear-gradient(135deg, #c5960c, #f0d060); }
.theme-dot[data-theme="white"] { background: linear-gradient(135deg, #d0d0d5, #ffffff); }
.theme-dot[data-theme="red"] { background: linear-gradient(135deg, #8b1520, #d03040); }
.theme-dot[data-theme="blue"] { background: linear-gradient(135deg, #1a4080, #4090d0); }
.theme-dot[data-theme="green"] { background: linear-gradient(135deg, #1a5028, #40a050); }
.theme-dot[data-theme="purple"] { background: linear-gradient(135deg, #4a1878, #8040c0); }
.theme-dot[data-theme="black"] { background: linear-gradient(135deg, #222, #444); }

/* ── Language switcher widget ──────────────────────────────────── */

.lang-switcher {
    display: flex;
    align-items: center;
    gap: 0.15rem;
}

.lang-btn {
    font-size: 0.65rem;
    font-weight: 600;
    padding: 0.1rem 0.35rem;
    border-radius: 3px;
    color: rgba(255, 255, 255, 0.5);
    text-decoration: none;
    transition: color 0.15s, background 0.15s;
}

.lang-btn:hover {
    color: rgba(255, 255, 255, 0.85);
    background: rgba(255, 255, 255, 0.1);
}

.lang-btn.active {
    color: #fff;
    background: rgba(255, 255, 255, 0.2);
}

/* Footer lang switcher inherits the same styles */
footer .lang-btn {
    color: var(--th-footer-text);
}

footer .lang-btn:hover {
    color: var(--th-nav-text);
}

footer .lang-btn.active {
    color: var(--th-nav-brand);
}