/* Site-wide baseline shared by every feature page (Планировщик, Зачистки, Срез дворов, Входящие
   атаки, Войска, Здания, ...). Page-specific CSS files (planner.css, plans.css, map.css, auth.css)
   stay page-scoped for things unique to that page; put a rule here only once it's needed by 2+ pages
   or is part of the common dark-theme "shell" every feature page should share. */

:root {
    --tw-surface-1: #212529;   /* dark surface, matches bootstrap's bg-dark — used for the page background */
    --tw-surface-2: #2b3035;   /* slightly lighter surface, e.g. hovered/edit inputs */
    --tw-panel-bg: #6c757d;    /* card/panel surface, matches bootstrap's bg-secondary — NOT --bs-secondary-bg,
                                   which is a "subtle" theming token that defaults to a near-white color when
                                   the page doesn't opt into data-bs-theme="dark", and made card text unreadable */
    --tw-row-past-opacity: 0.5;
}

/* ---------- Page shell ---------- */
/* The standard feature-page wrapper: <div class="tw-page"> instead of repeating
   "container-fluid py-4 bg-dark min-vh-100" by hand on every page. */
.tw-page {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    background-color: var(--bs-dark, #212529);
    min-height: 100vh;
}

.tw-page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

/* ---------- Cards & tables ---------- */
/* Standard panel: <div class="card tw-card"> — same look as the ad-hoc
   "card bg-secondary text-light border-secondary" combo already used everywhere. */
.tw-card {
    background-color: var(--tw-panel-bg);
    color: #fff;
    border-color: var(--tw-panel-bg);
}

.tw-table-wrapper {
    overflow-y: auto;
    max-height: 70vh;
}

.tw-sticky-thead th {
    position: sticky;
    top: var(--sticky-offset, 0);
    z-index: 2;
    background-color: var(--tw-surface-1);
}

/* ---------- Tool-page tabs ---------- */
/* The "folder tab" look originally built for the Attack Planner (#planner-tabs), now shared by any
   tool page's <ul class="nav nav-tabs tw-nav-tabs">. Kept as an opt-in class (not a blanket .nav-tabs
   override) so it doesn't silently reshape nav-tabs on pages that intentionally style them differently
   (e.g. Plans' solid-blue active tab in plans.css). */
.tw-nav-tabs .nav-link {
    color: #adb5bd;
    border: none;
    border-top: 3px solid transparent;
    padding: 0.75rem 1.5rem;
    font-weight: 500;
    transition: all 0.2s;
}

    .tw-nav-tabs .nav-link:hover {
        color: #fff;
        background-color: rgba(255, 255, 255, 0.05);
    }

    .tw-nav-tabs .nav-link.active {
        color: #212529 !important;
        background-color: #fff;
        border-top-color: #0d6efd;
        border-radius: 4px 4px 0 0;
    }

    .tw-nav-tabs .nav-link.disabled {
        color: rgba(255, 255, 255, 0.2);
    }

/* ---------- Compact settings accordion ---------- */
/* For long stacks of optional settings blocks (Planner's "Параметры" tab is the original case) —
   collapses everything but the first section by default instead of letting the page grow forever
   as more settings get added. <div class="accordion tw-accordion"> */
.tw-accordion .accordion-item {
    background-color: var(--tw-panel-bg);
    border-color: rgba(255, 255, 255, 0.15);
}

.tw-accordion .accordion-button {
    background-color: var(--tw-panel-bg);
    color: #fff;
    font-weight: 600;
}

    .tw-accordion .accordion-button:not(.collapsed) {
        background-color: var(--tw-surface-2);
        color: #fff;
        box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.15);
    }

    .tw-accordion .accordion-button::after {
        filter: invert(1) grayscale(100%) brightness(2);
    }

    .tw-accordion .accordion-button:focus {
        box-shadow: none;
        border-color: rgba(255, 255, 255, 0.25);
    }

.tw-accordion .accordion-body {
    background-color: var(--tw-surface-1);
    color: #fff;
}

/* ---------- Sortable table headers ---------- */
/* Standard sortable <th>: <th class="sortable-th" data-sort-col="...">Name <i class="bi bi-caret sort-icon"></i></th> */
.sortable-th {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

    .sortable-th:hover {
        color: #fff;
        background-color: rgba(255, 255, 255, 0.1);
    }

    .sortable-th .sort-icon {
        opacity: 0.5;
        font-size: 0.8em;
    }

    .sortable-th.sort-active .sort-icon {
        opacity: 1;
    }

/* ---------- Filter dropdowns ---------- */
.filter-dropdown-menu {
    max-height: 300px;
    overflow-y: auto;
    background-color: var(--tw-surface-1);
    color: #fff;
}

    .filter-dropdown-menu .form-check-label {
        color: #fff;
    }

/* ---------- Row states ---------- */
/* A row whose time/relevance has already passed (arrived attack, spent troops, sent command, ...). */
tr.tw-row-past {
    opacity: var(--tw-row-past-opacity);
}

/* ---------- Scrollbars (dark theme) ---------- */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--tw-surface-1);
}

::-webkit-scrollbar-thumb {
    background: #495057;
    border-radius: 4px;
}

    ::-webkit-scrollbar-thumb:hover {
        background: #6c757d;
    }

/* ---------- Small utilities ---------- */
.cursor-pointer {
    cursor: pointer;
}

.user-select-none {
    user-select: none;
}