/* mytoern.net — Step 2 redesign (Bootstrap 5 + custom nautical branding) */

:root {
    --mt-navy: #0b3d5c;
    --mt-navy-dark: #082c43;

    /* Site-wide: only two fonts — Area Inktrap (body) + Runtime (headings).
       Override Bootstrap's default system stacks everywhere. */
    --bs-font-sans-serif: 'area-inktrap', sans-serif;
    --bs-body-font-family: 'area-inktrap', sans-serif;
    --bs-font-monospace: 'area-inktrap', sans-serif;
}

/* Apply globally (all pages, themed or not). */
body {
    font-family: 'area-inktrap', sans-serif;
}
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6,
.navbar-brand {
    font-family: 'Runtime', 'area-inktrap', sans-serif;
}

/* Site-wide navbar background — same dark, blurred panel on every page so the
   hamburger menu drops down over a consistent backdrop (matches the mt-2026
   pages like Törnberichte). The mt-2026 / mt-home rules below only refine it. */
.mt-navbar {
    background: rgba(13, 27, 42, .85);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(200, 223, 240, .12);
}

/* Reviere page (mt-reviere): lighter navbar backdrop, generally (both the
   closed navbar and the open hamburger menu). */
body.mt-reviere .mt-navbar {
    background: rgb(13 27 42 / 50%);
}

.navbar-brand .bi { color: #3651ad; }

/* mytoern-2026 brand logo (white wordmark, sits on the dark navbar).
   The SVG stacks a ship above the "mytoern.net" wordmark, so the wordmark's
   optical centre sits ~9% below the SVG's geometric centre. Since the navbar
   centres the logo box, the wordmark would render below the nav-link text — we
   nudge the logo up by ~9% of its height (transform only, no layout shift) so
   the wordmark lines up with the menu items (godzella/mytoernnet#13). */
.navbar-brand .mt-logo { height: 34px; width: auto; display: block; transform: translateY(-3px); }
@media (max-width: 575.98px) { .navbar-brand .mt-logo { height: 28px; transform: translateY(-2px); } }

/* Hamburger: three waves instead of three straight lines (nautical theme),
   with a matching cream border. */
.navbar-toggler { border-color: rgba(245, 239, 224, 0.9); }
.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(245, 239, 224, 0.9)' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' fill='none' d='M2 8q3.25 -3.5 6.5 0t6.5 0t6.5 0t6.5 0M2 15q3.25 -3.5 6.5 0t6.5 0t6.5 0t6.5 0M2 22q3.25 -3.5 6.5 0t6.5 0t6.5 0t6.5 0'/%3e%3c/svg%3e");
}
/* Toggler matches the cream outline buttons on hover/click: light fill + dark icon. */
.navbar-toggler:hover,
.navbar-toggler:active,
.navbar-toggler[aria-expanded="true"] {
    background-color: #f8f9fa;
    border-color: #f8f9fa;
}
.navbar-toggler:hover .navbar-toggler-icon,
.navbar-toggler:active .navbar-toggler-icon,
.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%230d1b2a' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' fill='none' d='M2 8q3.25 -3.5 6.5 0t6.5 0t6.5 0t6.5 0M2 15q3.25 -3.5 6.5 0t6.5 0t6.5 0t6.5 0M2 22q3.25 -3.5 6.5 0t6.5 0t6.5 0t6.5 0'/%3e%3c/svg%3e");
}

/* Home hero */
.mt-hero {
    background: linear-gradient(135deg, var(--mt-navy), #114e72);
    color: #fff;
    border-radius: 1rem;
}

/* Cards / toern tiles */
.toern-card { transition: transform .12s ease, box-shadow .12s ease; }
.toern-card:hover { transform: translateY(-3px); box-shadow: 0 .5rem 1rem rgba(0,0,0,.12); }
.toern-card .card-img-top { aspect-ratio: 16 / 10; object-fit: cover; }
/* Owner "Bearbeiten" action must sit above the card's stretched-link overlay (z-index:1) to stay clickable. */
.toern-card .mt-card-edit { position: relative; z-index: 2; }

/* Share strip: when Instagram sharing isn't available (desktop — no Web Share
   file support) the button is disabled and greyed rather than hidden
   (godzella/mytoernnet#12). pointer-events stay on so the explanatory title
   tooltip still shows on hover (the disabled attribute still blocks clicks). */
.mt-share .mt-share-disabled,
.mt-share .mt-share-disabled:hover {
    opacity: .4;
    cursor: not-allowed;
    pointer-events: auto;
    box-shadow: none;
}

/* 404 compass — the needle spins frantically, a lost compass in "unerforschtes Revier".
   Only the needle <g> rotates (about its own centre); honours reduced-motion. */
.mt-compass { width: 6rem; height: 6rem; }
.mt-anchor { width: 1em; height: 1em; vertical-align: -.125em; }
.mt-compass-needle { transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: no-preference) {
    .mt-compass-needle { animation: mt-compass-spin 1.3s infinite; }
}
@keyframes mt-compass-spin {
    0%   { transform: rotate(0deg); }
    10%  { transform: rotate(175deg); }
    22%  { transform: rotate(45deg); }
    33%  { transform: rotate(295deg); }
    45%  { transform: rotate(150deg); }
    55%  { transform: rotate(340deg); }
    66%  { transform: rotate(75deg); }
    78%  { transform: rotate(255deg); }
    88%  { transform: rotate(120deg); }
    100% { transform: rotate(360deg); }
}

.tag-cloud a { display: inline-block; margin: .15rem; text-decoration: none; }

#toern-map { height: 380px; border-radius: .5rem; overflow: hidden; }

/* Compatibility shims so legacy Bootstrap-3 markup (e.g. the verbatim
   Datenschutz page) still renders cleanly under Bootstrap 5. */
.panel { background:#fff; border:1px solid #dee2e6; border-radius:.5rem; margin-bottom:1rem; }
.panel-body { padding:1rem 1.25rem; }
.panel-heading { padding:.6rem 1.25rem; border-bottom:1px solid #dee2e6; font-weight:600; background:#f8f9fa; border-radius:.5rem .5rem 0 0; }
.panel-primary { border-color:var(--mt-navy); }
.panel-primary > .panel-heading { background:var(--mt-navy); color:#fff; }
.page-header { padding-bottom:.4rem; margin-bottom:1rem; border-bottom:1px solid #dee2e6; }

/* Leaflet map container: default height (admin views override inline). */
.mt-map { height: 420px; border-radius: .5rem; }

/* ── Accessibility (WCAG 2.1 AA) ───────────────────────────── */
/* Skip-to-content link: visually hidden until focused (Bootstrap .visually-hidden-focusable). */
.mt-skip-link:focus {
    position: fixed; top: .5rem; left: .5rem; z-index: 2000;
    padding: .5rem .9rem; background: #fff; color: #0d1b2a;
    border-radius: .375rem; box-shadow: 0 .25rem .75rem rgba(0,0,0,.3);
}
/* Always-visible focus ring for keyboard users (2.4.7). */
:focus-visible { outline: 3px solid #6fbaea; outline-offset: 2px; }
/* Pause/play control for the hero video (2.2.2). */
/* Align the pause/play button to the same .container edge as the navbar, so its
   right margin matches the hamburger (narrow) / "Anmelden" (wide) at every width. */
.mt-hero-pause-bar {
    position: absolute; left: 0; right: 0; bottom: 1rem; z-index: 3;
    pointer-events: none;
}
.mt-hero-pause-bar .container { display: flex; justify-content: flex-end; }
.mt-hero-pause {
    pointer-events: auto;
    --bs-btn-padding-y: .15rem; --bs-btn-padding-x: .45rem;
    opacity: .85;
}
.mt-hero-pause:hover, .mt-hero-pause:focus { opacity: 1; }
/* Honor reduced-motion: stop the looping background video. */
@media (prefers-reduced-motion: reduce) {
    .mt-hero-video { display: none; }
    *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ============================================================
   mytoern-2026 features: 3D hero, ratings, season
   ============================================================ */

/* Headline display font ported from the 2026 prototype. */
@font-face {
    font-family: 'Runtime';
    src: url('/fonts/Runtime.otf') format('opentype');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

/* ── 3D hero ─────────────────────────────────────────────── */
.mt-hero-3d {
    position: relative;
    overflow: hidden;
    min-height: 100vh;                  /* fullscreen, like the 2026 prototype */
    display: flex;
    align-items: center;
    color: #f0e8d5;
    background: #0b3d5c url('/img/hero-hintergrund.jpg') center / cover no-repeat;
    /* full-bleed: break out of the centered .container, edge to edge */
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    margin-top: -1.5rem;                /* cancel <main class="container py-4"> top padding */
    border-radius: 0;
}
.mt-hero-3d::after {
    content: "";
    position: absolute; inset: 0;
    z-index: 1;
    background: linear-gradient(135deg, rgba(7,21,32,.6) 0%, rgba(7,21,32,.3) 50%, rgba(7,21,32,.7) 100%);
    pointer-events: none;
}
/* Looping hero video (replaces the static photo + Three.js ship). */
.mt-hero-3d .mt-hero-video {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    z-index: 0;
    pointer-events: none;
}
.mt-hero-3d .mt-hero-body { position: relative; z-index: 2; }
.mt-hero-3d .mt-claim {
    font-family: 'Runtime', 'area-inktrap', sans-serif;
    font-weight: 900;
    font-size: clamp(2.5rem, 6vw, 5rem);
    line-height: 1.05;
    letter-spacing: -.02em;
    color: #f5efe0;
    text-shadow: 0 2px 18px rgba(0,0,0,.45);
}
.mt-hero-3d .mt-claim em { font-style: italic; color: #f5efe0; }
.mt-hero-3d .mt-hero-sub { color: #f5efe0; max-width: 32rem; }
.mt-hero-stats .mt-stat-num {
    font-family: 'Runtime', 'area-inktrap', sans-serif;
    font-weight: 700; font-size: 1.9rem; line-height: 1; color: #f5efe0;
}
/* outline-light buttons with white text (hero CTAs, "Zum Törnbericht", navbar
   search, comment submit). `.btn.mt-btn-cream` is specific enough to beat the
   themed `body.mt-2026 a` link colour at rest; hover stays dark on the light
   fill for contrast. */
.btn.mt-btn-cream { color: #f5efe0; }
.btn.mt-btn-cream:hover,
.btn.mt-btn-cream:focus,
.btn.mt-btn-cream:active { color: #0d1b2a; }
/* Active state in a toggle group (e.g. skipper "Alle / Profi" filter): solid cream
   fill with dark text — matches the cream-on-dark theme instead of a stark white button. */
.btn.mt-btn-cream.active,
.btn.mt-btn-cream.active:hover,
.btn.mt-btn-cream.active:focus {
    background-color: #f5efe0;
    border-color: #f5efe0;
    color: #0d1b2a;
}
.mt-hero-stats .mt-stat-label {
    font-size: .62rem; letter-spacing: .15em; text-transform: uppercase; color: #f5efe0;
}

/* ── Star ratings ────────────────────────────────────────── */
.mt-stars {
    --pct: 0%;
    position: relative; display: inline-block;
    font-size: 1rem; line-height: 1; letter-spacing: .06em;
    color: rgba(11,61,92,.18);
    vertical-align: middle;
}
.mt-stars::before { content: "\2605\2605\2605\2605\2605"; }
.mt-stars::after {
    content: "\2605\2605\2605\2605\2605";
    position: absolute; top: 0; left: 0; width: var(--pct);
    overflow: hidden; white-space: nowrap; color: #fdc63a;
}
.mt-rate-stars { display: inline-flex; direction: rtl; }
.mt-rate-stars button {
    background: none; border: 0; padding: 0 1px; cursor: pointer;
    font-size: 1.25rem; line-height: 1; color: rgba(11,61,92,.25);
    transition: color .15s, transform .15s;
}
.mt-rate-stars button:hover,
.mt-rate-stars button:hover ~ button,
.mt-rate-stars button.is-set,
.mt-rate-stars button.is-set ~ button {
    color: #fdc63a; transform: scale(1.12);
}
/* Interactive variant: stack the "Bewerten" action above the current-rating
   display so the two groups are clearly separate and sit close together. */
.mt-rating-interactive {
    display: flex; flex-direction: column; align-items: flex-start; gap: .4rem;
}

/* ── Season / sort filter strip ──────────────────────────── */
.mt-filter-pill {
    font-size: .72rem; letter-spacing: .04em;
    padding: .25rem .7rem; border: 1px solid #cfd8e0; background: #fff;
    border-radius: 2rem; color: #36506a; cursor: pointer; transition: all .15s;
}
.mt-filter-pill:hover { border-color: var(--mt-navy); color: var(--mt-navy); }
.mt-filter-pill.active { background: var(--mt-navy); border-color: var(--mt-navy); color: #fff; }
.mt-card-hidden { display: none !important; }

/* ============================================================
   mytoern-2026 FULL visual theme — scoped to the core pages via
   body.mt-2026. Everything outside .mt-2026 keeps the plain Bootstrap look.
   ============================================================ */
body.mt-2026 {
    --c-bg: #0d1b2a;
    --c-bg-alt: #0d1f33;
    --c-card: rgba(255, 255, 255, .04);
    --c-card-bd: rgba(200, 223, 240, .12);
    --c-text: #f0e8d5;
    --c-muted: #6fbaea;
    --c-gold: #fdc63a;
    --c-sand: #fdf36b;
    --c-ocean: #6fbaea;
    --c-parchment: #f5efe0;
    background: var(--c-bg) !important;
    color: var(--c-text);
    font-family: 'area-inktrap', sans-serif;
    overflow-x: hidden;                 /* guards against the full-bleed hero's 100vw */
}

body.mt-2026 h1, body.mt-2026 h2, body.mt-2026 h3, body.mt-2026 h4,
body.mt-2026 .h1, body.mt-2026 .h2, body.mt-2026 .h3, body.mt-2026 .h4, body.mt-2026 .h5 {
    font-family: 'Runtime', 'area-inktrap', sans-serif;
    color: var(--c-parchment);
    letter-spacing: -.01em;
}
body.mt-2026 a { color: var(--c-ocean); text-decoration: none; }
body.mt-2026 a:hover { color: var(--c-sand); }
body.mt-2026 .text-muted { color: #f5efe0 !important; }

/* Section eyebrow label (Area Inktrap, gold, uppercase) — ported from the prototype. */
.mt-section-label {
    font-family: 'area-inktrap', sans-serif;
    font-size: .65rem; letter-spacing: .2em; text-transform: uppercase;
    color: var(--c-gold); margin-bottom: .35rem;
}

/* ── Navigation ─────────────────────────────────────────── */
body.mt-2026 .mt-navbar {
    background: rgba(13, 27, 42, .85) !important;
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--c-card-bd);
}
body.mt-2026 .navbar-brand,
body.mt-reviere .navbar-brand { font-family: 'Runtime', sans-serif; color: var(--c-sand); }
body.mt-2026 .navbar-brand .bi,
body.mt-reviere .navbar-brand .bi { color: var(--c-ocean); }
body.mt-2026 .navbar-brand .text-info,
body.mt-reviere .navbar-brand .text-info { color: var(--c-gold) !important; }
/* Prototype logo: a bold ~82px brand only on wide (xxl ≥1400px) screens; scaled
   down below so the header isn't oversized on laptops/tablets.
   (Order: base → <1400 → <576, so the most specific min width wins.)
   Applies to every themed page (mt-2026 + the Reviere variant) so the navbar
   keeps identical proportions sitewide. */
/* translateY ≈ -9% of the logo height keeps the wordmark on the nav-link line. */
body.mt-2026 .navbar-brand .mt-logo,
body.mt-reviere .navbar-brand .mt-logo { height: calc(1.4rem + 60px); transform: translateY(-8px); }
@media (max-width: 1399.98px) {
    body.mt-2026 .navbar-brand .mt-logo,
    body.mt-reviere .navbar-brand .mt-logo { height: 50px; transform: translateY(-5px); }
}
/* Hamburger view (<1200px, navbar-expand-xl): logo 20% larger — the collapsed navbar has the space. */
@media (max-width: 1199.98px) {
    body.mt-2026 .navbar-brand .mt-logo,
    body.mt-reviere .navbar-brand .mt-logo { height: 60px; transform: translateY(-6px); }
}
@media (max-width: 575.98px) {
    body.mt-2026 .navbar-brand .mt-logo,
    body.mt-reviere .navbar-brand .mt-logo { height: 48px; transform: translateY(-4px); }
}
/* Prototype nav-link typography: Area Inktrap 1rem */
body.mt-2026 .navbar .nav-link,
body.mt-reviere .navbar .nav-link {
    font-family: 'area-inktrap', sans-serif;
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: .02em;
    color: var(--c-text);
    opacity: .8;
}
body.mt-2026 .navbar .nav-link:hover,
body.mt-reviere .navbar .nav-link:hover { opacity: 1; color: #fff; }
/* Active main-nav item: full-opacity parchment so you can see which page you're on. */
body.mt-2026 .navbar .nav-link.active,
body.mt-reviere .navbar .nav-link.active { opacity: 1; color: #f5efe0; }
body.mt-2026 .navbar .dropdown-menu,
body.mt-reviere .navbar .dropdown-menu { background: #0d1f33; border: 1px solid var(--c-card-bd); }
body.mt-2026 .navbar .dropdown-item,
body.mt-reviere .navbar .dropdown-item { color: var(--c-text); }
body.mt-2026 .navbar .dropdown-item:hover,
body.mt-reviere .navbar .dropdown-item:hover { background: rgba(255, 255, 255, .06); color: #fff; }

/* ── Cards / toern tiles ────────────────────────────────── */
body.mt-2026 .card,
body.mt-2026 .toern-card {
    background: var(--c-card);
    border: 1px solid var(--c-card-bd);
    color: var(--c-text);
}
body.mt-2026 .toern-card:hover { border-color: rgba(250, 147, 8, .45); }
/* skipper directory cards (the whole card is a link → keep text cream, not blue) */
body.mt-2026 .mt-skipper-card { color: var(--c-text); }
body.mt-2026 .mt-skipper-card:hover { color: #fff; border-color: rgba(250, 147, 8, .45); }
/* Profile avatars: the stored variants keep aspect ratio (not square), so crop
   them into the circular frame instead of distorting (godzella/mytoernnet#17). */
.mt-avatar, .mt-avatar-preview { object-fit: cover; }
body.mt-2026 .card-title, body.mt-2026 .card-title a { color: var(--c-parchment); }
/* revier line becomes a gold uppercase eyebrow above the title */
body.mt-2026 .toern-card .card-text {
    order: -1;
    color: var(--c-gold) !important;
    text-transform: uppercase; letter-spacing: .15em; font-size: .62rem;
}
body.mt-2026 .toern-card .card-text .bi { display: none; }

/* ── List group (active skippers) ───────────────────────── */
body.mt-2026 .list-group-item {
    background: var(--c-card);
    border-color: var(--c-card-bd);
    color: var(--c-text);
}
body.mt-2026 .list-group-item-action:hover { background: rgba(255, 255, 255, .07); color: #fff; }
body.mt-2026 .badge.text-bg-primary { background: var(--c-ocean) !important; color: #042033 !important; }
body.mt-2026 .badge.text-bg-secondary { background: rgba(255, 255, 255, .12) !important; color: var(--c-text) !important; }

/* ── Forms (search / detail) ────────────────────────────── */
body.mt-2026 .form-control, body.mt-2026 .form-select {
    background: rgba(255, 255, 255, .06);
    border-color: var(--c-card-bd);
    color: var(--c-text);
}
body.mt-2026 .form-control:focus, body.mt-2026 .form-select:focus {
    background: rgba(255, 255, 255, .1); border-color: var(--c-gold);
    box-shadow: 0 0 0 .2rem rgba(250, 147, 8, .15); color: var(--c-text);
}
body.mt-2026 .form-control::placeholder { color: rgba(200, 223, 240, .5); }
/* Search "clear" (×): recolour the native WebKit button. Cream reads well on the
   dark search field; the navbar's field is near-white, so its × stays dark. */
body.mt-2026 input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
    height: .9em;
    width: .9em;
    margin-left: .35em;
    cursor: pointer;
    background-color: #f5efe0;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 4L12 12M12 4L4 12' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 4L12 12M12 4L4 12' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* Autofill: Chrome paints a pale yellow/blue box that overrides `background`.
   Re-skin it with the box-shadow-inset trick so autofilled fields keep the theme.
   The inset fill MUST be opaque — a translucent fill lets Chrome's pale autofill
   background bleed through, which turned the field light with low-contrast text
   (godzella/mytoernnet#15). #1c2937 is the dark themed field bg (--c-bg #0d1b2a
   lifted by the field's 6% white tint), so autofilled fields stay dark with the
   cream text and caret readable. Covers .form-select too. */
body.mt-2026 .form-control:-webkit-autofill,
body.mt-2026 .form-control:-webkit-autofill:hover,
body.mt-2026 .form-control:-webkit-autofill:focus,
body.mt-2026 .form-control:-webkit-autofill:active,
body.mt-2026 .form-select:-webkit-autofill,
body.mt-2026 .form-select:-webkit-autofill:hover,
body.mt-2026 .form-select:-webkit-autofill:focus,
body.mt-2026 .form-select:-webkit-autofill:active {
    -webkit-text-fill-color: #f0e8d5;
    box-shadow: inset 0 0 0 100px #1c2937;
    caret-color: #f0e8d5;
}
/* Validation errors + help text must stay legible on the dark theme: Bootstrap's
   default red (#dc3545) and muted grey (#6c757d) read poorly here (godzella/mytoernnet#11). */
body.mt-2026 .invalid-feedback { color: #ff8a80; }
body.mt-2026 .form-text { color: rgba(200, 223, 240, .65); }
body.mt-2026 .form-control.is-invalid,
body.mt-2026 .form-select.is-invalid { border-color: #ff8a80; }
body.mt-2026 .form-control.is-invalid:focus,
body.mt-2026 .form-select.is-invalid:focus { box-shadow: 0 0 0 .2rem rgba(255, 138, 128, .25); }

/* ── Misc Bootstrap bits on dark ────────────────────────── */
body.mt-2026 .breadcrumb-item.active { color: #f5efe0; }
body.mt-2026 .breadcrumb-item + .breadcrumb-item::before { color: #f5efe0; }
body.mt-2026 .btn-outline-secondary { color: var(--c-text); border-color: var(--c-card-bd); }
body.mt-2026 .btn-outline-secondary:hover { background: rgba(255, 255, 255, .08); color: #fff; }
body.mt-2026 .alert-info { background: rgba(0, 186, 234, .12); border-color: rgba(0, 186, 234, .3); color: var(--c-text); }
body.mt-2026 .alert-light { background: rgba(255, 255, 255, .05); border-color: var(--c-card-bd); color: var(--c-text); }
body.mt-2026 .alert-success { background: rgba(40, 167, 69, .14); border-color: rgba(40, 167, 69, .35); color: var(--c-text); }
body.mt-2026 .alert-danger { background: rgba(220, 53, 69, .14); border-color: rgba(220, 53, 69, .35); color: var(--c-text); }
body.mt-2026 .alert-warning { background: rgba(255, 193, 7, .14); border-color: rgba(255, 193, 7, .35); color: var(--c-text); }
body.mt-2026 hr { border-color: var(--c-card-bd); }

/* Tables on dark (admin lists): re-skin Bootstrap's table CSS vars so rows,
   borders and the `.table-light` thead read on the dark theme. */
body.mt-2026 .table {
    --bs-table-color: var(--c-text);
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--c-card-bd);
    --bs-table-hover-color: #fff;
    --bs-table-hover-bg: rgba(255, 255, 255, .06);
    color: var(--c-text);
    border-color: var(--c-card-bd);
}
body.mt-2026 .table > :not(caption) > * > * { border-bottom-color: var(--c-card-bd); }
body.mt-2026 .table-light {
    --bs-table-color: var(--c-parchment);
    --bs-table-bg: rgba(255, 255, 255, .06);
    --bs-table-border-color: var(--c-card-bd);
    color: var(--c-parchment);
}

/* nav-pills (admin section nav): active pill uses the ocean accent on dark. */
body.mt-2026 .nav-pills .nav-link { color: var(--c-text); }
body.mt-2026 .nav-pills .nav-link:hover { color: #fff; }
body.mt-2026 .nav-pills .nav-link.active {
    background: var(--c-ocean);
    color: #042033;
}
/* nav-tabs (submit page login/register) on dark */
body.mt-2026 .nav-tabs { border-bottom-color: var(--c-card-bd); }
body.mt-2026 .nav-tabs .nav-link { color: var(--c-text); }
body.mt-2026 .nav-tabs .nav-link:hover { border-color: var(--c-card-bd); color: #fff; }
body.mt-2026 .nav-tabs .nav-link.active {
    background: var(--c-card); color: #fff;
    border-color: var(--c-card-bd) var(--c-card-bd) transparent;
}

/* ── Filter pills + stars on dark ───────────────────────── */
body.mt-2026 .mt-filter-pill { background: transparent; border-color: rgba(200, 223, 240, .2); color: var(--c-text); }
body.mt-2026 .mt-filter-pill:hover { border-color: var(--c-gold); color: var(--c-gold); }
body.mt-2026 .mt-filter-pill.active { background: var(--c-gold); border-color: var(--c-gold); color: var(--c-bg); }
body.mt-2026 .mt-stars { color: rgba(200, 223, 240, .2); }
body.mt-2026 .mt-rate-stars button {
    color: transparent;               /* hollow at rest — only the sand contour shows */
    -webkit-text-stroke: 1px #fdc63a; /* sand contour = "these stars rate" */
    paint-order: stroke fill;         /* on hover/set: orange fill stays crisp inside the rim */
}
/* Highlight the hovered star + the ones for lower values (rtl sibling order),
   plus the already-set vote. Needs this specificity to beat the rule above. */
body.mt-2026 .mt-rate-stars button:hover,
body.mt-2026 .mt-rate-stars button:hover ~ button,
body.mt-2026 .mt-rate-stars button.is-set,
body.mt-2026 .mt-rate-stars button.is-set ~ button {
    color: #fa9308; transform: scale(1.12);
}

/* ── Footer on dark ─────────────────────────────────────── */
body.mt-2026 footer.bg-white { background: #060e18 !important; border-color: var(--c-card-bd) !important; }
body.mt-2026 footer .text-muted { color: #f5efe0 !important; }
body.mt-2026 footer .nav-link { color: var(--c-muted) !important; }
body.mt-2026 footer .nav-link:hover { color: var(--c-sand) !important; }

/* ── Detail article ─────────────────────────────────────── */
body.mt-2026 article .lead { color: var(--c-text); }

/* ── Image preview with a remove (×) overlay (toern edit) ── */
.mt-image-remove-wrap { position: relative; display: inline-block; margin-top: .5rem; }
.mt-image-remove-wrap img { display: block; max-width: 100%; }
.mt-image-remove {
    position: absolute; top: -.55rem; right: -.55rem;
    width: 1.7rem; height: 1.7rem; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%; line-height: 1; font-size: .8rem; cursor: pointer;
    background: #0d1b2a; color: #f5efe0; border: 1px solid var(--c-card-bd);
}
.mt-image-remove:hover,
.mt-image-remove:focus { background: #f5efe0; color: #0d1b2a; }

/* ============================================================
   Reviere page: low-poly world map as a darkened page background,
   with white text on top for contrast.
   ============================================================ */
body.mt-reviere {
    /* The shared navbar rules above reference these theme tokens; mt-reviere isn't
       mt-2026, so re-declare them here (background/text stay the world-map design). */
    --c-text: #f0e8d5;
    --c-sand: #fdf36b;
    --c-ocean: #6fbaea;
    --c-gold: #fdc63a;
    --c-card-bd: rgba(200, 223, 240, .12);
    background:
        linear-gradient(rgba(7, 21, 32, .62), rgba(7, 21, 32, .62)),
        #0b3d5c url('/img/world_map.jpg') center center / cover no-repeat fixed !important;
}
body.mt-reviere,
body.mt-reviere h1,
body.mt-reviere .text-muted { color: #f5efe0 !important; }
body.mt-reviere .tag-cloud a { color: #f5efe0; }
body.mt-reviere .tag-cloud a:hover { color: #fdc63a; }
/* transparent footer so the world map shows through it too */
body.mt-reviere footer.bg-white {
    background: transparent !important;
    border-top-color: rgba(255, 255, 255, .18) !important;
}
body.mt-reviere footer .text-muted,
body.mt-reviere footer .nav-link { color: rgba(245, 239, 224, .85) !important; }
body.mt-reviere footer .nav-link:hover { color: #fdc63a !important; }

/* ============================================================
   Ranking page: podium cards (#1 large, #2/#3, rest carousel).
   ============================================================ */
.mt-rank-card { position: relative; overflow: hidden; }
/* The whole ranking card is clickable via the title's stretched-link overlay
   (z-index:1). Keep the interactive rating widget above it so voting stays
   usable; the display-only stars stay under the overlay so they navigate too. */
.mt-rank-card .mt-rate-widget { position: relative; z-index: 2; }
.mt-rank-img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; }
.mt-rank-card .mt-hits {
    font-weight: 600; font-size: .8rem; letter-spacing: .03em; color: #fa9308;
}

/* rank badge */
.mt-rank-badge {
    position: absolute; top: .75rem; left: .75rem; z-index: 3;
    min-width: 2.4rem; height: 2.4rem; padding: 0 .5rem;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50rem;
    font-family: 'Runtime', sans-serif; font-weight: 700; font-size: 1.05rem;
    color: #0d1b2a; background: #fff;
    border: 2px solid #fff; box-shadow: 0 .25rem .75rem rgba(7, 21, 32, .25);
}
.mt-rank-featured .mt-rank-badge { top: 1rem; left: 1rem; min-width: 3.2rem; height: 3.2rem; font-size: 1.5rem; }

/* medals (!important so the colored border survives the themed card border) */
.mt-rank-gold   { border: 2px solid #fdc63a !important; }
.mt-rank-silver { border: 2px solid #c0c7d0 !important; }
.mt-rank-bronze { border: 2px solid #cd7f32 !important; }
.mt-rank-gold   .mt-rank-badge { background: linear-gradient(135deg, #fdc63a, #fa9308); color: #3a2400; border-color: #ffe08a; }
.mt-rank-silver .mt-rank-badge { background: linear-gradient(135deg, #eef1f5, #c0c7d0); color: #2a3340; border-color: #fff; }
.mt-rank-bronze .mt-rank-badge { background: linear-gradient(135deg, #e0a878, #cd7f32); color: #3a2200; border-color: #f0c9a0; }

.mt-rank-card .card-body { padding: .8rem 1rem; }
.mt-rank-card:not(.mt-rank-compact) .mt-rank-img { aspect-ratio: 16 / 8; }

/* compact podium (#1–#3): short horizontal cards so the carousel stays
   visible without scrolling. Small thumbnail left, tight body right. */
.mt-rank-compact .mt-rank-thumb { flex: 0 0 auto; width: 6.5rem; display: block; }
.mt-rank-compact .mt-rank-thumb img { width: 100%; height: 100%; object-fit: cover; }
.mt-rank-compact .card-body { padding: .6rem .85rem; }
.mt-rank-compact .card-title { font-size: .95rem; }
.mt-rank-compact .mt-rank-badge {
    top: .4rem; left: .4rem; min-width: 1.9rem; height: 1.9rem; font-size: .85rem;
}

/* horizontal card carousel (#4+) */
.mt-carousel {
    display: flex; gap: 1rem;
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
    padding-bottom: .75rem;
    scrollbar-width: thin;
}
.mt-carousel-item { flex: 0 0 clamp(220px, 46%, 300px); scroll-snap-align: start; }
.mt-carousel::-webkit-scrollbar { height: 8px; }
.mt-carousel::-webkit-scrollbar-thumb { background: rgba(11, 61, 92, .35); border-radius: 4px; }
.mt-carousel-nav { display: flex; gap: .4rem; }

/* ============================================================
   Home only: fully transparent navbar overlaying the fullscreen
   hero, so the looping video shows through it.
   ============================================================ */
body.mt-home .mt-navbar {
    background: transparent !important;
    backdrop-filter: none;
    border-bottom: 0 !important;
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 1030;
}
/* keep the light nav text legible over the bright moving video */
body.mt-home .navbar .nav-link,
body.mt-home .navbar-brand,
body.mt-home .navbar .navbar-toggler {
    text-shadow: 0 1px 8px rgba(0, 0, 0, .55);
}
/* once scrolled, restore the navbar's previous dark blurred background */
body.mt-home.mt-scrolled .mt-navbar {
    background: rgba(13, 27, 42, .85) !important;
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--c-card-bd) !important;
    transition: background .25s ease;
}
body.mt-home.mt-scrolled .navbar .nav-link,
body.mt-home.mt-scrolled .navbar-brand,
body.mt-home.mt-scrolled .navbar .navbar-toggler {
    text-shadow: none;
}
/* On the home hero the navbar is transparent, but the *open* hamburger menu
   still needs the same dark backdrop as every other page so the links stay
   readable over the video. Only applies while the collapse is shown (mobile),
   so the closed navbar over the hero stays transparent. */
body.mt-home .navbar-collapse.show,
body.mt-home .navbar-collapse.collapsing {
    background: rgb(13 27 42 / 30%);
    backdrop-filter: blur(12px);
    border-radius: 0 0 .5rem .5rem;
    padding: .25rem .75rem .75rem;
    margin-top: .25rem;
}