/* 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 {
    table-layout: fixed;
    width: 100%;
}
.participant-list-table th,
.participant-list-table td {
    overflow-wrap: anywhere;
    word-break: break-word;
}
/* Keep action-button labels on one line and give the actions column enough width so Edit/Delete
   sit side by side instead of collapsing into a vertical stack when other columns wrap. */
.participant-list-table .btn {
    white-space: nowrap;
}
.participant-list-table .reg-actions {
    width: 11rem;
}
.participant-list-table .reg-actions .btn {
    padding-left: 0.4rem;
    padding-right: 0.4rem;
}
/* On phones the participant table (up to ~12 columns) collapses to one character per line.
   Below the md breakpoint each row becomes a stacked "card" with the column name as a label,
   mirroring the calendar list above. The actions cell stays a full-width block so its button
   group and the inline reject form are not forced into the label/value flex row. */
@media (max-width: 767.98px) {
    .participant-list-table,
    .participant-list-table tbody,
    .participant-list-table tr {
        display: block;
        width: 100%;
    }
    .participant-list-table thead {
        display: none;
    }
    .participant-list-table tr {
        margin-bottom: 1rem;
        padding: 0.5rem 0.75rem;
        border: 1px solid var(--bs-border-color);
        border-radius: 0.375rem;
    }
    .participant-list-table td {
        display: flex;
        gap: 0.75rem;
        justify-content: space-between;
        align-items: baseline;
        border: 0;
        padding: 0.2rem 0;
        text-align: right;
    }
    .participant-list-table td::before {
        content: attr(data-label);
        flex: 0 0 7rem;
        font-weight: 600;
        text-align: left;
        color: var(--bs-secondary-color);
    }
    .participant-list-table td.reg-actions {
        display: block;
        width: auto;
        text-align: left;
        margin-top: 0.25rem;
    }
    .participant-list-table td.reg-actions::before {
        content: none;
    }
}

/* 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;
}

/* User comments are plain text: keep the author's line breaks and runs of spaces (HTML would
   otherwise collapse them), and wrap long unbroken strings so they don't overflow. */
.comment-body {
    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;
}

/* Rich-text block alignment and indentation from the editor toolbar. Quill emits these as
   ql-align-* / ql-indent-* classes and styles them only in its own (editor-only) CSS, so mirror
   the same rules here for the public article pages, where Quill is not loaded. Values match
   Quill: 3em of padding per indent level. Text direction is left-to-right for all our locales. */
main .ql-align-center { text-align: center; }
main .ql-align-right { text-align: right; }
main .ql-align-justify { text-align: justify; }
main .ql-indent-1 { padding-left: 3em; }
main .ql-indent-2 { padding-left: 6em; }
main .ql-indent-3 { padding-left: 9em; }
main .ql-indent-4 { padding-left: 12em; }
main .ql-indent-5 { padding-left: 15em; }
main .ql-indent-6 { padding-left: 18em; }
main .ql-indent-7 { padding-left: 21em; }
main .ql-indent-8 { padding-left: 24em; }

/* A floated image (left/right alignment from the image tool) needs breathing room so body text
   never touches it. blot-formatter writes an inline margin too, but keep a fallback here for
   images floated via the API or older content that lacks it. */
main .article-body img[style*="float"],
main .home-body img[style*="float"],
main .competition-description img[style*="float"] {
    margin: 0.25rem 1rem 0.5rem 0;
}
main .article-body img[style*="float: right"],
main .home-body img[style*="float: right"],
main .competition-description img[style*="float: right"] {
    margin: 0.25rem 0 0.5rem 1rem;
}

/* A left/right-floated image lets body text wrap beside it, but a list's number/bullet markers
   are drawn in the list's left padding, which sits at the column edge *under* a left float -- so
   they render on top of the image. Move the markers inside the content flow: they then sit with
   the text beside the float (no overlap) while the list stays in normal flow and reflows to full
   width once the image ends (no empty gap under it, which display:flow-root would leave). */
main .article-body ul, main .article-body ol,
main .home-body ul, main .home-body ol,
main .competition-description ul, main .competition-description ol {
    list-style-position: inside;
}

/* Social login buttons. Each provider keeps its own brand treatment so the "Connect with
   Strava" button matches Strava's API brand guidelines (orange #FC4C02, 48px tall, logo +
   fixed wording), and Google/GitHub carry their own marks. The buttons stack full-width in a
   column so differently-sized labels line up instead of wrapping unevenly. */
.social-btn-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.social-btn-list a {
    width: 100%;
}
.social-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    height: 48px;
    padding: 0 1.15rem;
    border-radius: 0.375rem;
    border: 1px solid transparent;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
}
.social-btn:hover {
    text-decoration: none;
}
.social-btn__icon {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
}
.social-btn--strava {
    background-color: #FC4C02;
    color: #fff;
}
.social-btn--strava:hover {
    background-color: #e34402;
    color: #fff;
}
.social-btn--google {
    background-color: #fff;
    color: #3c4043;
    border-color: #dadce0;
}
.social-btn--google:hover {
    background-color: #f7f8f8;
    color: #3c4043;
}
.social-btn--github {
    background-color: #24292f;
    color: #fff;
}
.social-btn--github:hover {
    background-color: #1b1f24;
    color: #fff;
}