/*
  App-wide theme overrides.
  - Uses Bootstrap 5 CSS variables so light/dark stay consistent.
  - Keep selectors generic; page-specific tweaks belong in templates.
  - Designed for a softer dark theme.
*/

/* ===== Layout base ===== */
body {
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.content-wrapper {
    flex: 1;
}

.navbar-brand {
    font-weight: bold;
}

.site-badge {
    font-size: 0.85rem;
    padding: 0.25rem 0.5rem;
}

.card {
    border-color: var(--bs-border-color);
}

/* Tables: consistent header + hover in both themes */
.table thead th {
    font-weight: 600;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--bs-secondary-color);
    white-space: nowrap;
}

.table tbody tr {
    transition: background-color 0.2s ease;
}

.table tbody tr:hover {
    background-color: var(--bs-tertiary-bg);
}

[data-bs-theme="light"] .table tbody tr:hover {
    background-color: var(--bs-gray-100);
}

[data-bs-theme="dark"] .table tbody tr:hover {
    background-color: var(--bs-secondary-bg);
}

.table .btn-group {
    white-space: nowrap;
}

.table .btn-group .btn {
    padding: 0.25rem 0.5rem;
}

.table td:last-child {
    white-space: nowrap;
}

/* Bootstrap 4 compatibility helpers used by a few templates.
   Keep minimal; prefer updating templates to Bootstrap 5 utilities. */

/* Inputs used by task completion modals */
.torrent-id-input {
    font-size: 0.875rem;
}

.torrent-id-input:focus {
    border-color: color-mix(in srgb, var(--bs-primary), white 10%);
    box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.15);
}

/* Blacklist page: blur/reveal helper */
.blur-text {
    position: relative;
    cursor: pointer;
    display: inline-block;
    user-select: none;
}

.blur-text .blur-content {
    filter: blur(5px);
    transition: filter 0.3s ease;
}

.blur-text .blur-placeholder {
    display: none;
    color: var(--bs-secondary-color);
    font-style: italic;
}

.blur-text:hover .blur-content {
    filter: blur(3px);
}

.blur-text.revealed .blur-content {
    filter: none;
}

.blur-text.revealed .blur-placeholder {
    display: none;
}

.blur-text::after {
    content: '🔀';
    position: absolute;
    right: -20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
    opacity: 0.5;
}

.blur-text.revealed::after {
    content: '🔁';
    opacity: 0.3;
}

/* Announcement cards: subtle hover lift */
.hover-shadow {
    transition: all 0.3s ease;
}

.hover-shadow:hover {
    transform: translateY(-2px);
    box-shadow: var(--app-shadow-md) !important;
}

/* ===== Generic utilities ===== */
.app-pill {
    border-radius: 999px;
}

pre,
code {
    border-radius: 0.375rem;
}

.form-control::placeholder,
.form-select::placeholder {
    color: color-mix(in srgb, var(--bs-body-color), transparent 45%);
}

/* App filter bar (used by workgroup pages) */
.app-filterbar {
    border: 1px solid var(--bs-border-color);
    border-radius: var(--app-radius-md);
    padding: 0.75rem;
    background-color: var(--bs-body-bg);
}

[data-bs-theme="dark"] .app-filterbar {
    background-color: var(--bs-tertiary-bg);
}

.app-filterbar .app-filtergroup {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.app-filterbar .app-filterpill {
    border-radius: 999px;
    padding: 0.3rem 0.85rem;
    font-weight: 600;
    letter-spacing: 0.2px;
}

.app-filterbar .app-search {
    min-width: 260px;
}

@media (min-width: 992px) {
    .app-filterbar .app-search {
        min-width: 320px;
    }
}

/* Release tasks page: keep filter/search in one row on desktop */
@media (min-width: 992px) {
    .release_bp .app-filterbar,
    .release-filterbar {
        flex-wrap: nowrap;
    }
}

[data-bs-theme="dark"] .form-control::placeholder,
[data-bs-theme="dark"] .form-select::placeholder {
    color: color-mix(in srgb, var(--bs-body-color), transparent 55%);
}

/* ===== Cross-page dark/light polish ===== */

/* Unified shadow tokens (softer dark mode) */
:root {
    --app-shadow-sm: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.08);
    --app-shadow-md: 0 0.5rem 1rem rgba(0, 0, 0, 0.12);
    --app-shadow-lg: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.15);

    --app-radius-md: 0.75rem;
}

[data-bs-theme="dark"] {
    --app-shadow-sm: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.35);
    --app-shadow-md: 0 0.5rem 1rem rgba(0, 0, 0, 0.45);
    --app-shadow-lg: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.55);
}

/* Softer borders and rounded surfaces */
.card,
.modal-content,
.dropdown-menu,
.alert {
    border-radius: var(--app-radius-md);
}

[data-bs-theme="light"] .card,
[data-bs-theme="light"] .modal-content,
[data-bs-theme="light"] .dropdown-menu,
[data-bs-theme="light"] .alert {
    border-color: color-mix(in srgb, var(--bs-border-color), #000 8%);
}

[data-bs-theme="dark"] .card,
[data-bs-theme="dark"] .modal-content,
[data-bs-theme="dark"] .dropdown-menu,
[data-bs-theme="dark"] .alert {
    border-color: color-mix(in srgb, var(--bs-border-color), #fff 8%);
}

/* Links: readable but not neon */
[data-bs-theme="dark"] a {
    color: color-mix(in srgb, var(--bs-primary), white 20%);
}

[data-bs-theme="dark"] a:hover {
    color: color-mix(in srgb, var(--bs-primary), white 35%);
}

/* Navbar: avoid "dim" text in dark mode, keep good contrast */
/* Navbar typography: keep consistent between light/dark */
.navbar {
    --app-navbar-font-weight: 500;
}

.navbar .navbar-brand,
.navbar .nav-link {
    font-weight: var(--app-navbar-font-weight);
    letter-spacing: 0.2px;
}

[data-bs-theme="light"] .navbar.bg-primary {
    --bs-navbar-color: rgba(255, 255, 255, 0.95);
    --bs-navbar-hover-color: rgba(255, 255, 255, 1);
    --bs-navbar-active-color: rgba(255, 255, 255, 1);
    --bs-navbar-disabled-color: rgba(255, 255, 255, 0.65);
}

[data-bs-theme="dark"] .navbar.bg-primary {
    /* Override Bootstrap defaults so dark mode navbar isn't dim. */
    --bs-navbar-color: rgba(255, 255, 255, 0.95);
    --bs-navbar-hover-color: rgba(255, 255, 255, 1);
    --bs-navbar-active-color: rgba(255, 255, 255, 1);
    --bs-navbar-disabled-color: rgba(255, 255, 255, 0.7);
}

[data-bs-theme="dark"] .navbar.bg-primary .navbar-brand,
[data-bs-theme="dark"] .navbar.bg-primary .nav-link,
[data-bs-theme="dark"] .navbar.bg-primary .navbar-text {
    color: var(--bs-body-color) !important;
}

[data-bs-theme="dark"] .navbar.bg-primary .nav-link:hover,
[data-bs-theme="dark"] .navbar.bg-primary .nav-link:focus {
    color: var(--bs-body-color) !important;
}

[data-bs-theme="dark"] .navbar.bg-primary .nav-link.active,
[data-bs-theme="dark"] .navbar.bg-primary .nav-link.show {
    color: var(--bs-body-color) !important;
}

[data-bs-theme="dark"] .navbar.bg-primary .dropdown-toggle::after {
    filter: none;
}

[data-bs-theme="dark"] .navbar.bg-primary .navbar-toggler {
    border-color: rgba(255, 255, 255, 0.35);
}

[data-bs-theme="dark"] .navbar.bg-primary .navbar-toggler-icon {
    filter: none;
}

[data-bs-theme="dark"] .navbar.bg-primary {
    /* In dark mode, prefer a unified neutral navbar (less distracting). */
    background-color: var(--bs-body-bg) !important;
    border-bottom: 1px solid var(--bs-border-color);
}

[data-bs-theme="dark"] .navbar.bg-primary .dropdown-menu {
    background-color: var(--bs-body-bg);
}

/* Home page / accent cards: avoid large bright primary blocks in dark mode */
[data-bs-theme="dark"] .card.bg-primary {
    background-color: var(--bs-tertiary-bg) !important;
    border-color: var(--bs-border-color) !important;
}

[data-bs-theme="dark"] .card.bg-primary.text-white,
[data-bs-theme="dark"] .card.bg-primary .text-white {
    color: var(--bs-body-color) !important;
}

/* Card headers using bg-light should look like a subtle header in dark */
[data-bs-theme="dark"] .card-header.bg-light {
    background-color: var(--bs-secondary-bg) !important;
    color: var(--bs-body-color) !important;
}

/* Outline primary buttons: increase readability in dark mode */
[data-bs-theme="dark"] .btn-outline-primary {
    color: rgba(255, 255, 255, 0.92);
    border-color: color-mix(in srgb, var(--bs-primary), #fff 10%);
}

[data-bs-theme="dark"] .btn-outline-primary:hover {
    color: rgba(255, 255, 255, 1);
    background-color: color-mix(in srgb, var(--bs-primary), #000 65%);
    border-color: color-mix(in srgb, var(--bs-primary), #fff 18%);
}

[data-bs-theme="dark"] .navbar.bg-primary .dropdown-item {
    color: var(--bs-body-color);
}

/* Dropdown headers/separators: avoid low contrast in dark */
[data-bs-theme="dark"] .navbar .dropdown-header {
    color: color-mix(in srgb, var(--bs-body-color), transparent 25%);
}

/* Links in dark: soften underline emphasis */
[data-bs-theme="dark"] a {
    text-decoration-color: color-mix(in srgb, var(--bs-primary), transparent 60%);
}

/* Buttons: smoother hover/active for filled buttons too */
.btn {
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

/* Avoid making small buttons feel "glowy" */
.btn:not(.btn-sm):not(.btn-link):hover {
    box-shadow: var(--app-shadow-sm);
}

/* Small primary buttons: soften appearance */
.btn-primary.btn-sm {
    border-color: color-mix(in srgb, var(--bs-primary), #000 12%);
}

/* Primary buttons: ensure readable label color in dark mode */
[data-bs-theme="dark"] .btn-primary,
[data-bs-theme="dark"] .btn-primary:hover,
[data-bs-theme="dark"] .btn-primary:focus {
    color: rgba(255, 255, 255, 0.95) !important;
}

[data-bs-theme="dark"] .btn-primary i {
    opacity: 0.95;
}

[data-bs-theme="dark"] .btn-primary.btn-sm {
    background-color: color-mix(in srgb, var(--bs-primary), #000 30%);
    border-color: color-mix(in srgb, var(--bs-primary), #000 40%);
}

[data-bs-theme="dark"] .btn-primary.btn-sm:hover {
    background-color: color-mix(in srgb, var(--bs-primary), #000 22%);
    border-color: color-mix(in srgb, var(--bs-primary), #000 35%);
}

/* Primary buttons in dark mode: avoid low-contrast text */
[data-bs-theme="dark"] .btn-primary {
    color: rgba(255, 255, 255, 0.95) !important;
}

[data-bs-theme="dark"] .btn-primary:hover,
[data-bs-theme="dark"] .btn-primary:focus {
    color: rgba(255, 255, 255, 1) !important;
}

/* Outline buttons in dark: unify contrast across colors */
[data-bs-theme="dark"] .btn[class*="btn-outline-"] {
    color: var(--bs-body-color);
}

[data-bs-theme="dark"] .btn[class*="btn-outline-"]:hover {
    color: var(--bs-body-color);
    background-color: var(--bs-tertiary-bg);
}

/* Rounded pills (used by some filter buttons) */
.btn.rounded-pill {
    padding-left: 0.85rem;
    padding-right: 0.85rem;
}

[data-bs-theme="dark"] .btn.rounded-pill.active {
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08) inset;
}

/* Borders / separators */
[data-bs-theme="dark"] hr {
    border-color: var(--bs-border-color);
    opacity: 1;
}

/* Softer surfaces (cards / modals) */
[data-bs-theme="dark"] .card,
[data-bs-theme="dark"] .modal-content {
    background-color: var(--bs-tertiary-bg);
}

[data-bs-theme="dark"] .card-header,
[data-bs-theme="dark"] .card-footer,
[data-bs-theme="dark"] .modal-header,
[data-bs-theme="dark"] .modal-footer {
    background-color: var(--bs-secondary-bg);
    border-color: var(--bs-border-color);
}

/* Inputs */
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select {
    background-color: var(--bs-tertiary-bg);
    border-color: var(--bs-border-color);
    color: var(--bs-body-color);
}

[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus {
    background-color: var(--bs-tertiary-bg);
    border-color: color-mix(in srgb, var(--bs-primary), white 10%);
    box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.15);
    color: var(--bs-body-color);
}

[data-bs-theme="dark"] .input-group-text {
    background-color: var(--bs-tertiary-bg);
    border-color: var(--bs-border-color);
    color: var(--bs-body-color);
}

/* Dropdowns */
[data-bs-theme="dark"] .dropdown-menu {
    background-color: var(--bs-body-bg);
    border-color: var(--bs-border-color);
}

[data-bs-theme="dark"] .dropdown-item {
    color: var(--bs-body-color);
}

[data-bs-theme="dark"] .dropdown-item:hover,
[data-bs-theme="dark"] .dropdown-item:focus {
    background-color: var(--bs-secondary-bg);
    color: var(--bs-body-color);
}

/* Dropdown items: consistent hover in light theme */
[data-bs-theme="light"] .dropdown-item:hover,
[data-bs-theme="light"] .dropdown-item:focus {
    background-color: var(--bs-gray-100);
}

/* Tables */
[data-bs-theme="dark"] .table {
    --bs-table-bg: var(--bs-tertiary-bg);
    --bs-table-striped-bg: color-mix(in srgb, var(--bs-tertiary-bg), var(--bs-secondary-bg) 35%);
    --bs-table-hover-bg: var(--bs-secondary-bg);
    --bs-table-border-color: var(--bs-border-color);
    --bs-table-color: var(--bs-body-color);
}

[data-bs-theme="dark"] .table > :not(caption) > * > * {
    border-color: var(--bs-border-color);
}

[data-bs-theme="dark"] .table thead th {
    background-color: var(--bs-secondary-bg);
    color: var(--bs-body-color);
}

[data-bs-theme="dark"] .table-hover > tbody > tr:hover > * {
    color: var(--bs-body-color);
    background-color: var(--bs-secondary-bg);
}

/* Table hover in light theme: consistent */
[data-bs-theme="light"] .table-hover > tbody > tr:hover > * {
    background-color: var(--bs-gray-100);
}

/* Member tables: retired/cleared rows should look subtle (not harsh) */
tr.table-secondary,
tr.table-warning {
    --bs-table-bg: transparent;
}

[data-bs-theme="light"] tr.table-secondary {
    background-color: color-mix(in srgb, var(--bs-secondary-bg), #fff 55%) !important;
}

[data-bs-theme="light"] tr.table-warning {
    background-color: color-mix(in srgb, var(--bs-warning-bg-subtle), #fff 20%) !important;
}

[data-bs-theme="dark"] tr.table-secondary {
    background-color: color-mix(in srgb, var(--bs-tertiary-bg), var(--bs-secondary-bg) 35%) !important;
}

[data-bs-theme="dark"] tr.table-warning {
    background-color: color-mix(in srgb, var(--bs-tertiary-bg), rgba(var(--bs-warning-rgb), 0.18) 60%) !important;
}

/* Pagination */
[data-bs-theme="dark"] .page-link {
    background-color: var(--bs-tertiary-bg);
    border-color: var(--bs-border-color);
    color: var(--bs-body-color);
}

[data-bs-theme="dark"] .page-link:hover {
    background-color: var(--bs-secondary-bg);
    border-color: var(--bs-border-color);
    color: var(--bs-body-color);
}

/* Nav tabs */
[data-bs-theme="dark"] .nav-tabs .nav-link {
    color: var(--bs-body-color);
}

[data-bs-theme="dark"] .nav-tabs .nav-link:hover {
    border-color: var(--bs-border-color);
}

[data-bs-theme="dark"] .nav-tabs .nav-link.active {
    background-color: var(--bs-tertiary-bg);
    border-color: var(--bs-border-color) var(--bs-border-color) var(--bs-tertiary-bg);
    color: var(--bs-body-color);
}

/* Badges / alerts */
[data-bs-theme="dark"] .badge.bg-light {
    background-color: var(--bs-secondary-bg) !important;
    color: var(--bs-body-color) !important;
}

/* bg-light helper: many templates use bg-light; make it dark-safe */
[data-bs-theme="dark"] .bg-light {
    background-color: var(--bs-tertiary-bg) !important;
    color: var(--bs-body-color) !important;
}

[data-bs-theme="dark"] .bg-white {
    background-color: var(--bs-body-bg) !important;
    color: var(--bs-body-color) !important;
}

[data-bs-theme="dark"] .text-muted {
    color: color-mix(in srgb, var(--bs-body-color), transparent 18%) !important;
}

/* Small button text: slightly stronger for readability */
.btn-sm {
    font-weight: 500;
}

[data-bs-theme="dark"] .alert {
    background-color: var(--bs-secondary-bg);
    border-color: var(--bs-border-color);
}

/* Code */
[data-bs-theme="dark"] pre,
[data-bs-theme="dark"] code {
    background-color: var(--bs-tertiary-bg);
    color: var(--bs-body-color);
}

/* Misc */
[data-bs-theme="dark"] .bg-info.bg-opacity-10 {
    background-color: rgba(var(--bs-info-rgb), 0.15) !important;
}

[data-bs-theme="dark"] .bg-warning,
[data-bs-theme="dark"] .bg-warning.text-dark {
    color: var(--bs-body-color) !important;
}

/* Release tasks: make priority/status badges readable in dark mode */
[data-bs-theme="dark"] .badge.bg-warning {
    color: rgba(0, 0, 0, 0.85) !important;
}

[data-bs-theme="dark"] .badge.bg-info,
[data-bs-theme="dark"] .badge.bg-success,
[data-bs-theme="dark"] .badge.bg-primary,
[data-bs-theme="dark"] .badge.bg-danger,
[data-bs-theme="dark"] .badge.bg-secondary,
[data-bs-theme="dark"] .badge.bg-dark {
    color: rgba(255, 255, 255, 0.95) !important;
}

[data-bs-theme="dark"] .badge {
    font-weight: 700;
    letter-spacing: 0.2px;
}

[data-bs-theme="dark"] footer.bg-light {
    background-color: var(--bs-tertiary-bg) !important;
}

/* Blacklist: right-side help panel */
.blacklist-help .card-header {
    border-bottom-color: var(--bs-border-color);
}

[data-bs-theme="dark"] .blacklist-help .card-header.bg-light {
    background-color: var(--bs-secondary-bg) !important;
    color: var(--bs-body-color) !important;
}

/* Section titles inside help panel: reduce "neon" primary in dark */
[data-bs-theme="dark"] .blacklist-help .text-primary {
    color: color-mix(in srgb, var(--bs-primary), var(--bs-body-color) 35%) !important;
}

/* Alerts inside help panel: softer surfaces */
[data-bs-theme="dark"] .blacklist-help .alert {
    background-color: var(--bs-tertiary-bg);
    border-color: var(--bs-border-color);
}

/* Category badges: make them less harsh in dark */
[data-bs-theme="dark"] .blacklist-help .badge {
    filter: saturate(0.9);
}

[data-bs-theme="dark"] .blacklist-help .badge.bg-warning {
    color: var(--bs-body-color) !important;
}

/* Category tags: unified pill style, keep color semantics */
.blacklist-tag {
    border-radius: 999px;
    padding: 0.35em 0.65em;
    font-weight: 600;
    letter-spacing: 0.2px;
}

[data-bs-theme="dark"] .blacklist-tag {
    /* slightly soften saturation/contrast */
    filter: saturate(0.9);
}

[data-bs-theme="dark"] .blacklist-tag.bg-warning {
    color: var(--bs-body-color) !important;
}

/* Make warning tag text readable (light theme too) */
[data-bs-theme="light"] .blacklist-tag.bg-warning {
    color: var(--bs-dark) !important;
}

/* Workgroup page */
.workgroup-card {
    transition: all 0.3s ease;
    border: 1px solid var(--bs-border-color);
}

/* Workgroup page: primary action button style */
.workgroup-card .btn-primary.btn-sm.flex-grow-1 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    font-weight: 600;
    letter-spacing: 0.2px;
}

.workgroup-card .btn-primary.btn-sm.flex-grow-1 i {
    opacity: 0.85;
}

[data-bs-theme="dark"] .workgroup-card .btn-primary.btn-sm.flex-grow-1 {
    background-color: color-mix(in srgb, var(--bs-primary), #000 22%);
    border-color: color-mix(in srgb, var(--bs-primary), #000 32%);
}

[data-bs-theme="dark"] .workgroup-card .btn-primary.btn-sm.flex-grow-1:hover {
    background-color: color-mix(in srgb, var(--bs-primary), #000 12%);
    border-color: color-mix(in srgb, var(--bs-primary), #000 22%);
}

.workgroup-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--app-shadow-lg) !important;
    border-color: var(--bs-primary);
}

.icon-box {
    flex-shrink: 0;
}

.stat-item h4 {
    font-size: 1.75rem;
    margin-bottom: 0.25rem;
}

.stat-item small {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.btn-hover {
    transition: all 0.2s ease;
}

.btn-hover:hover {
    transform: translateX(5px);
}

/* Bootstrap 5 already has .rounded-pill; keep .badge-pill for legacy templates */
.badge-pill {
    padding: 0.35em 0.65em;
    font-size: 0.75rem;
    border-radius: 999px;
}

.card-title {
    color: var(--bs-heading-color);
    font-size: 1.25rem;
}

@media (max-width: 768px) {
    .icon-box {
        width: 40px !important;
        height: 40px !important;
    }

    .stat-item h4 {
        font-size: 1.5rem;
    }
}

/* Admin: dashed border helper */
.border-dashed {
    border-style: dashed !important;
    border-color: var(--bs-border-color) !important;
}