/* Ensure body fills viewport height so footer sticks at bottom */
html, body {
    min-height: 100vh;
}

body {
    display: flex;
    flex-direction: column;
}

body > main {
    flex: 1;
}

/* Navbar */
.navbar-brand {
    letter-spacing: 0.04em;
    text-transform: none;
}

/* Dark theme: make navbar-brand and nav-links readable (Lux sets dark colors that don't adapt) */
[data-bs-theme="dark"] .navbar-brand {
    color: #fff;
}
[data-bs-theme="dark"] .navbar-brand:hover {
    color: rgba(255, 255, 255, 0.8);
}

[data-bs-theme="dark"] .navbar .nav-link {
    color: rgba(255, 255, 255, 0.8);
}
[data-bs-theme="dark"] .navbar .nav-link:hover {
    color: #fff;
}

/* Active nav link — bold + primary color in light, white in dark */
.navbar .nav-link.active {
    font-weight: 700;
}
[data-bs-theme="light"] .navbar .nav-link.active {
    color: var(--bs-primary) !important;
}
[data-bs-theme="dark"] .navbar .nav-link.active {
    color: #fff !important;
}

/* Dark theme: form inputs — explicit colors so they contrast with page bg */
[data-bs-theme="dark"] .form-select,
[data-bs-theme="dark"] .form-control {
    background-color: #2c3034 !important;
    color: #dee2e6 !important;
    border-color: #495057 !important;
}
[data-bs-theme="dark"] .form-select:disabled,
[data-bs-theme="dark"] .form-control:disabled {
    background-color: #212529 !important;
    color: #6c757d !important;
}

/* Dark theme: outline buttons — direct color overrides beat Lux's hardcoded values */
[data-bs-theme="dark"] .btn-outline-primary {
    color: #6ea8fe !important;
    border-color: #6ea8fe !important;
    background-color: transparent !important;
}
[data-bs-theme="dark"] .btn-outline-primary:hover,
[data-bs-theme="dark"] .btn-outline-primary:focus,
[data-bs-theme="dark"] .btn-outline-primary:active {
    color: #000 !important;
    background-color: #6ea8fe !important;
    border-color: #6ea8fe !important;
}
[data-bs-theme="dark"] .btn-outline-secondary {
    color: #adb5bd !important;
    border-color: #adb5bd !important;
    background-color: transparent !important;
}
[data-bs-theme="dark"] .btn-outline-secondary:hover,
[data-bs-theme="dark"] .btn-outline-secondary:active {
    color: #000 !important;
    background-color: #adb5bd !important;
    border-color: #adb5bd !important;
}
[data-bs-theme="dark"] .btn-outline-danger {
    color: #ea868f !important;
    border-color: #ea868f !important;
    background-color: transparent !important;
}
[data-bs-theme="dark"] .btn-outline-danger:hover,
[data-bs-theme="dark"] .btn-outline-danger:active {
    color: #000 !important;
    background-color: #ea868f !important;
    border-color: #ea868f !important;
}

/* Dark theme: radio and checkbox inputs */
[data-bs-theme="dark"] .form-check-input {
    background-color: #2c3034 !important;
    border-color: #495057 !important;
}
[data-bs-theme="dark"] .form-check-input:checked {
    background-color: #6ea8fe !important;
    border-color: #6ea8fe !important;
}

/* Dark theme: dropdown menus in navbar */
[data-bs-theme="dark"] .navbar .dropdown-menu {
    background-color: #2c3034;
    border-color: #495057;
}
[data-bs-theme="dark"] .navbar .dropdown-menu .dropdown-item {
    color: #dee2e6;
}
[data-bs-theme="dark"] .navbar .dropdown-menu .dropdown-item:hover {
    background-color: #343a40;
    color: #fff;
}

/* Dark theme: input-group-text (labels inside input groups) */
[data-bs-theme="dark"] .input-group-text {
    background-color: var(--bs-secondary-bg);
    color: var(--bs-body-color);
    border-color: var(--bs-border-color);
}

/* Dark theme: cards (Lux hardcodes white background) */
[data-bs-theme="dark"] .card {
    background-color: var(--bs-body-bg);
    border-color: var(--bs-border-color);
}
[data-bs-theme="dark"] .card-header,
[data-bs-theme="dark"] .card-footer {
    background-color: var(--bs-secondary-bg);
    border-color: var(--bs-border-color);
}

/* Offset scrollIntoView and anchor jumps by the sticky navbar height so elements
   never land hidden underneath it. Applied to the scroll container (viewport). */
html {
    scroll-padding-top: 70px;
}

/* Theme toggle button */
#theme-toggle {
    min-width: 2.2rem;
}

/* Richtext content */
.richtext img {
    max-width: 100%;
    height: auto;
}

/* Hero image */
.hero-image {
    width: 100%;
    max-height: 400px;
    object-fit: cover;
}

/* Map placeholder (for Phase 6) */
.map-container {
    min-height: 300px;
}

/* Competition list table: a fixed layout makes the (many) columns share the available
   width and wrap their content, so the table always fits without a horizontal scroll
   regardless of how long the titles / location names are. */
.calendar-list-table {
    table-layout: fixed;
    width: 100%;
}
.calendar-list-table th,
.calendar-list-table td {
    overflow-wrap: anywhere;
    word-break: break-word;
}
.calendar-list-table .btn {
    white-space: normal;
}
/* On phones the 10-column table cannot stay readable even with a fixed layout (columns
   collapse to one character per line). Below the md breakpoint each row becomes a stacked
   "card" with the column name shown as a label, keeping the page free of horizontal scroll. */
@media (max-width: 767.98px) {
    .calendar-list-table,
    .calendar-list-table tbody,
    .calendar-list-table tr {
        display: block;
        width: 100%;
    }
    .calendar-list-table thead {
        display: none;
    }
    .calendar-list-table tr {
        margin-bottom: 1rem;
        padding: 0.5rem 0.75rem;
        border: 1px solid var(--bs-border-color);
        border-radius: 0.375rem;
    }
    .calendar-list-table td {
        display: flex;
        gap: 0.75rem;
        justify-content: space-between;
        align-items: baseline;
        border: 0;
        padding: 0.2rem 0;
        text-align: right;
    }
    .calendar-list-table td::before {
        content: attr(data-label);
        flex: 0 0 8rem;
        font-weight: 600;
        text-align: left;
        color: var(--bs-secondary-color);
    }
}

/* Participant list: many (conditional) columns. Let long names / team / city values wrap
   instead of widening the table past its container and forcing a horizontal scrollbar. Only
   data cells break inside words; headers wrap between words so a heading word is never split. */
.participant-list-table td {
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Content images stay within their column so large uploads (e.g. the home-page logo) never
   force a horizontal scrollbar. Leaflet sizes its own map tiles, so exclude the map. */
main img {
    max-width: 100%;
    height: auto;
}
.leaflet-container img {
    max-width: none;
    height: auto;
}

/* Rich article bodies (news / knowledge) can hold author-pasted tables, wide media and long
   URLs; keep them inside the page instead of overflowing it on narrow screens. */
.article-body {
    overflow-wrap: anywhere;
    max-width: 760px;
}
.article-body table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
}
.article-body pre {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* Keep each top-level nav item on one line (avoid a "База / знаний" mid-item wrap). */
.navbar .nav-link {
    white-space: nowrap;
}

/* Dark theme: prevent Bootstrap from darkening Leaflet tile images */
[data-bs-theme="dark"] .leaflet-container {
    background: #374151;
}
[data-bs-theme="dark"] .leaflet-tile {
    filter: none !important;
}

/* Protocol iframe wrapper (for Phase 9) */
.protocol-iframe-wrapper {
    width: 100%;
    overflow-x: auto;
}

/* Dark theme: Quill rich-text editor (used in frontend editing forms) */
[data-bs-theme="dark"] .ql-toolbar,
[data-bs-theme="dark"] .ql-container {
    background-color: #2c3034;
    color: #dee2e6;
    border-color: #495057 !important;
}
[data-bs-theme="dark"] .ql-editor {
    color: #dee2e6;
    background-color: #2c3034;
    caret-color: #dee2e6;
}
[data-bs-theme="dark"] .ql-editor.ql-blank::before {
    color: #6c757d;
}
[data-bs-theme="dark"] .ql-toolbar .ql-stroke {
    stroke: #adb5bd;
}
[data-bs-theme="dark"] .ql-toolbar .ql-fill {
    fill: #adb5bd;
}
[data-bs-theme="dark"] .ql-toolbar .ql-picker-label,
[data-bs-theme="dark"] .ql-toolbar .ql-picker-item {
    color: #dee2e6;
}
[data-bs-theme="dark"] .ql-toolbar button:hover .ql-stroke,
[data-bs-theme="dark"] .ql-toolbar .ql-active .ql-stroke {
    stroke: #6ea8fe;
}
[data-bs-theme="dark"] .ql-toolbar button:hover .ql-fill,
[data-bs-theme="dark"] .ql-toolbar .ql-active .ql-fill {
    fill: #6ea8fe;
}
[data-bs-theme="dark"] .ql-toolbar .ql-active .ql-picker-label,
[data-bs-theme="dark"] .ql-toolbar .ql-picker-label:hover {
    color: #6ea8fe;
}
[data-bs-theme="dark"] .ql-toolbar .ql-picker-options {
    background-color: #2c3034;
    border-color: #495057;
}

/* Pager jump-to-page field: hide the number spinner arrows -- clicking them would fire the
   change handler and reload the page one step at a time, which looks jarring. */
input.page-jump::-webkit-outer-spin-button,
input.page-jump::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input.page-jump {
    -moz-appearance: textfield;
    appearance: textfield;
}

/* Map pages: the filter dropdowns sit above a Leaflet map whose zoom (+/-) and layer controls
   have z-index ~1000. Lift the open filter dropdowns above them so the controls don't show
   through the menu - on the calendar map filter panel and the standalone locations map filter. */
#filter-panel .dropdown-menu,
#loc-filter-form .dropdown-menu {
    z-index: 1100;
}