/* Accessibility: font-size and contrast, driven by classes on <html> that are
   set server-side from the font-size / contrast cookies (see
   resources/views/layouts/app.blade.php) and kept in sync client-side by
   public/js/accessibility.js. */

html.s-100 { font-size: 100%; }
html.s-125 { font-size: 125%; }
html.s-200 { font-size: 200%; }

/* c2: white text on black. c3: yellow text on black. c4: black text on
   yellow. Each re-points the app's existing design tokens (used throughout
   the other stylesheets) and Bootstrap's own theme variables, the same way
   [data-theme] already does for dark mode — so the whole page repaints, not
   just this widget. Map tiles and category icon colors are left alone: forcing every
   category swatch to two colors would make pins indistinguishable. */
/* :root.cN (not html.cN) so these match the specificity of the existing
   `:root:not([data-theme=light])` dark-mode fallback in tokens.css — otherwise
   that rule would win over a plain html.cN under prefers-color-scheme:dark
   regardless of source order, and contrast mode would silently lose to it.
   This file is loaded after tokens.css, so the equal-specificity tie is broken
   in our favor by source order. */
:root.c2,
:root.c3,
:root.c4 {
    --teal: var(--ink);
    --teal-ink: var(--ink);
    --orange: var(--ink);
    --orange-ink: var(--ink);
    --bs-emphasis-color: var(--ink);
    --bs-link-color: var(--ink);
    --bs-link-hover-color: var(--ink);
    --bs-body-color: var(--ink);
    --bs-body-bg: var(--bg);
    --bs-border-color: var(--border);
    --bs-secondary-bg: var(--bg);
    --bs-tertiary-bg: var(--bg);
}

:root.c2 {
    color-scheme: dark;
    --bg: #000000;
    --surface: #000000;
    --surface-2: #0d0d0d;
    --ink: #ffffff;
    --ink-dim: #ffffff;
    --border: #ffffff;
    --bs-body-bg-rgb: 0, 0, 0;
    --bs-secondary-bg-rgb: 0, 0, 0;
    --bs-tertiary-bg-rgb: 0, 0, 0;
    /* Bootstrap's plain `a` rule reads --bs-link-color-rgb (not the hex
       --bs-link-color set above with the rest of the tokens), so without
       this, links — like the footer's — silently keep their normal teal
       color in every contrast mode. */
    --bs-link-color-rgb: 255, 255, 255;
    --bs-link-hover-color-rgb: 255, 255, 255;
    --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

:root.c3 {
    color-scheme: dark;
    --bg: #000000;
    --surface: #000000;
    --surface-2: #0d0d0d;
    --ink: #ffff00;
    --ink-dim: #ffff00;
    --border: #ffff00;
    --bs-body-bg-rgb: 0, 0, 0;
    --bs-secondary-bg-rgb: 0, 0, 0;
    --bs-tertiary-bg-rgb: 0, 0, 0;
    --bs-link-color-rgb: 255, 255, 0;
    --bs-link-hover-color-rgb: 255, 255, 0;
    --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffff00' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

:root.c4 {
    color-scheme: light;
    --bg: #ffff00;
    --surface: #ffff00;
    --surface-2: #f5eb00;
    --ink: #000000;
    --ink-dim: #000000;
    --border: #000000;
    --bs-body-bg-rgb: 255, 255, 0;
    --bs-secondary-bg-rgb: 255, 255, 0;
    --bs-tertiary-bg-rgb: 245, 235, 0;
    --bs-link-color-rgb: 0, 0, 0;
    --bs-link-hover-color-rgb: 0, 0, 0;
}

/* Links only carry color in these modes, so keep them distinguishable. */
html.c2 a,
html.c3 a,
html.c4 a {
    text-decoration: underline;
}

/* .fab / .btn--primary / .btn-login:hover / .admin-tab.is-active / the
   status-picker pin glyph / the cluster pin count all pair a
   var(--orange)/var(--teal) background with a hardcoded white icon/text
   color. In contrast mode --orange and --teal are repointed to var(--ink)
   (see above), which in c2 IS white — so the hardcoded white text becomes
   invisible on its own now-white button or pin. Swap that hardcoded color
   for var(--bg) instead: the background is always var(--ink), and var(--bg)
   is by construction the opposite end of the two-tone contrast palette, so
   the two can never collide in c2, c3 or c4. (Other pin/category colors are
   deliberately left untouched — see the note above — so their glyphs, which
   stay hardcoded white, never hit this collision in the first place.) */
:root.c2 .fab,
:root.c3 .fab,
:root.c4 .fab,
:root.c2 .btn--primary,
:root.c3 .btn--primary,
:root.c4 .btn--primary,
:root.c2 .btn-login:hover,
:root.c3 .btn-login:hover,
:root.c4 .btn-login:hover,
:root.c2 .admin-tab.is-active,
:root.c3 .admin-tab.is-active,
:root.c4 .admin-tab.is-active,
:root.c2 .pin-marker.status-picker .pin-glyph,
:root.c3 .pin-marker.status-picker .pin-glyph,
:root.c4 .pin-marker.status-picker .pin-glyph,
:root.c2 .pin-marker--cluster .pin-cluster-count,
:root.c3 .pin-marker--cluster .pin-cluster-count,
:root.c4 .pin-marker--cluster .pin-cluster-count {
    color: var(--bg);
}

/* .theme-toggle:hover and .accessibility-toggle:hover/[aria-expanded] both
   pair background:var(--border) with color:var(--ink). Outside contrast mode --border and --ink are always two
   different colors, but c2/c3/c4 deliberately set --border equal to --ink
   (so every bordered element gets a maximally bright outline) — which makes
   these specific hover states invisible: same-color text on same-color
   background. Point their hover background at --surface-2 instead, which
   stays distinct from --ink in every contrast mode. */
:root.c2 .theme-toggle:hover,
:root.c3 .theme-toggle:hover,
:root.c4 .theme-toggle:hover,
:root.c2 .accessibility-toggle:hover,
:root.c3 .accessibility-toggle:hover,
:root.c4 .accessibility-toggle:hover,
:root.c2 .accessibility-toggle[aria-expanded="true"],
:root.c3 .accessibility-toggle[aria-expanded="true"],
:root.c4 .accessibility-toggle[aria-expanded="true"] {
    background: var(--surface-2);
}

/* Bootstrap's contextual buttons (.btn-primary/-success/-warning and their
   .btn-outline-* siblings — used for admin actions like accept/decline/
   reopen/hide/delete/save, and for the profile "save changes" / "view on
   map" buttons) each bake their own fixed hex colors into a per-class set of
   --bs-btn-* custom properties, completely independent of this app's --ink/
   --bg tokens. That's why they ignore contrast mode entirely. Bootstrap's
   own .btn/.btn:hover/.btn:disabled rules already read those custom
   properties (see bootstrap.min.css), so redefining them here — instead of
   overriding color/background-color directly — reuses Bootstrap's own cascade and
   correctly covers hover, active and disabled states too. */
:root.c2 .btn-primary, :root.c2 .btn-success, :root.c2 .btn-warning,
:root.c3 .btn-primary, :root.c3 .btn-success, :root.c3 .btn-warning,
:root.c4 .btn-primary, :root.c4 .btn-success, :root.c4 .btn-warning {
    --bs-btn-color: var(--bg);
    --bs-btn-bg: var(--ink);
    --bs-btn-border-color: var(--ink);
    --bs-btn-hover-color: var(--ink);
    --bs-btn-hover-bg: var(--bg);
    --bs-btn-hover-border-color: var(--ink);
    --bs-btn-active-color: var(--ink);
    --bs-btn-active-bg: var(--bg);
    --bs-btn-active-border-color: var(--ink);
    --bs-btn-disabled-color: var(--ink-dim);
    --bs-btn-disabled-bg: var(--surface-2);
    --bs-btn-disabled-border-color: var(--border);
}

:root.c2 .btn-outline-primary, :root.c2 .btn-outline-secondary, :root.c2 .btn-outline-danger,
:root.c3 .btn-outline-primary, :root.c3 .btn-outline-secondary, :root.c3 .btn-outline-danger,
:root.c4 .btn-outline-primary, :root.c4 .btn-outline-secondary, :root.c4 .btn-outline-danger {
    --bs-btn-color: var(--ink);
    --bs-btn-border-color: var(--ink);
    --bs-btn-hover-color: var(--bg);
    --bs-btn-hover-bg: var(--ink);
    --bs-btn-hover-border-color: var(--ink);
    --bs-btn-active-color: var(--bg);
    --bs-btn-active-bg: var(--ink);
    --bs-btn-active-border-color: var(--ink);
    --bs-btn-disabled-color: var(--ink-dim);
    --bs-btn-disabled-border-color: var(--border);
}

/* .status-badge (used for the pinpoint status pill in the admin list, "Mani
   punkti"/profile pin table, and the map's own pin-detail sheet) is colored
   per status via --status-* tokens that, like the category swatch colors,
   are deliberately left untouched by contrast mode elsewhere in this file —
   but unlike a map pin, the status is always paired with its own text label
   here, so color is never the only cue. Flatten it to the two-tone palette
   in contrast mode instead of leaving it in its original (here, always
   light-mode) pink/yellow/red/gray. */
:root.c2 .status-badge,
:root.c3 .status-badge,
:root.c4 .status-badge {
    background: var(--surface-2);
    color: var(--ink);
    box-shadow: inset 0 0 0 0.0625rem var(--border);
}

/* .alert-error (the inline "#formError" banner on the add-pin form, and any
   server validation message shown there) hardcodes a light-pink background
   with dark-red text, completely independent of the theme tokens — so in
   every contrast mode it stayed a pink box instead of following the chosen
   palette. */
:root.c2 .alert-error,
:root.c3 .alert-error,
:root.c4 .alert-error {
    background: var(--surface-2);
    color: var(--ink);
    border-color: var(--border);
}

/* ---------- Accessibility widget ---------- */

.accessibility-widget {
    position: relative;
}

.accessibility-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.125rem;
    height: 2.125rem;
    flex: none;
    border: 0.0625rem solid var(--border);
    background: var(--surface-2);
    border-radius: 999px;
    color: var(--ink-dim);
    cursor: pointer;
    transition: color .15s ease, background .15s ease;
}

.accessibility-toggle:hover,
.accessibility-toggle[aria-expanded="true"] {
    color: var(--ink);
    background: var(--border);
}

.accessibility-toggle svg {
    width: 1.125rem;
    height: 1.125rem;
}

.accessibility-panel {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    width: 18rem;
    max-width: calc(100vw - 2rem);
    background: var(--surface);
    border: 0.0625rem solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-2);
    padding: 1rem;
    z-index: 1050;
    opacity: 0;
    transform: translateY(-0.5rem);
    pointer-events: none;
    transition: opacity .15s ease, transform .15s ease;
}

.accessibility-panel.is-open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.accessibility-section + .accessibility-section {
    margin-top: 1rem;
}

.accessibility-heading {
    margin: 0 0 0.5rem;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--ink-dim);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.accessibility-btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.accessibility-btn {
    flex: 1 1 4.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 2.25rem;
    padding: 0 0.5rem;
    border: 0.0625rem solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    color: var(--ink);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.accessibility-btn:hover {
    border-color: var(--ink-dim);
}

.accessibility-btn.is-active {
    border-color: var(--ink);
    box-shadow: inset 0 0 0 0.0625rem var(--ink);
}

.accessibility-swatch {
    font-weight: 700;
    /* Fixed preview colors, deliberately independent of the current theme
       tokens — these show what each contrast mode actually looks like. */
    background: var(--surface);
    color: var(--ink);
}

.accessibility-swatch--c2 { background: #000000; color: #ffffff; }
.accessibility-swatch--c3 { background: #000000; color: #ffff00; }
.accessibility-swatch--c4 { background: #ffff00; color: #000000; }

.accessibility-footer {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 0.0625rem solid var(--border);
}