/*
 * Custom Bootstrap 5.3 color modes — generated from the club palette.
 *   light = "Clear Pool"   ·   dark = "Deep Ocean"
 *
 * Bootstrap is loaded (precompiled) from the CDN before this file, so we
 * retheme by overriding its CSS variables. Component colors that Bootstrap
 * bakes in at Sass-compile time (buttons, form controls, active pills) are
 * re-pointed at the theme variables further down.
 *
 * See https://getbootstrap.com/docs/5.3/customize/color-modes/#custom-color-modes
 */

/* ---- "Clear Pool" (light) -------------------------------------------- */
[data-bs-theme="light"] {
    --theme-name: "Clear Pool";
    color-scheme: light;

    --bs-body-bg: #FFFFFF;              /* surface */
    --bs-body-bg-rgb: 255, 255, 255;
    --bs-surface: #FFFFFF;
    --bs-surface-rgb: 255, 255, 255;

    --bs-tertiary-bg: #F4F7F9;          /* body-bg (page background) */
    --bs-tertiary-bg-rgb: 244, 247, 249;
    --bs-secondary-bg: #F4F7F9;
    --bs-secondary-bg-rgb: 244, 247, 249;

    --bs-body-color: #1A2B36;
    --bs-body-color-rgb: 26, 43, 54;
    --bs-emphasis-color: #1A2B36;
    --bs-emphasis-color-rgb: 26, 43, 54;

    --bs-secondary-color: #627D93;      /* text-secondary (.text-muted) */
    --bs-secondary-color-rgb: 98, 125, 147;
    --bs-tertiary-color: rgba(98, 125, 147, 0.65);

    --bs-primary: #00A3E0;
    --bs-primary-rgb: 0, 163, 224;
    --bs-primary-text-emphasis: #006386;
    --bs-primary-bg-subtle: #cceefa;
    --bs-primary-border-subtle: #99ddf6;

    --bs-success: #2EC4B6;
    --bs-success-rgb: 46, 196, 182;

    --bs-accent: #FF6B35;               /* custom role */
    --bs-accent-rgb: 255, 107, 53;

    --bs-link-color: #00A3E0;
    --bs-link-color-rgb: 0, 163, 224;
    --bs-link-hover-color: #0082b3;
    --bs-link-hover-color-rgb: 0, 130, 179;

    --bs-border-color: rgba(98, 125, 147, 0.22);
    --bs-border-color-translucent: rgba(26, 43, 54, 0.1);
}

/* ---- "Deep Ocean" (dark) --------------------------------------------- */
[data-bs-theme="dark"] {
    --theme-name: "Deep Ocean";
    color-scheme: dark;

    --bs-body-bg: #16222F;              /* surface */
    --bs-body-bg-rgb: 22, 34, 47;
    --bs-surface: #16222F;
    --bs-surface-rgb: 22, 34, 47;

    --bs-tertiary-bg: #0B131A;          /* body-bg (page background) */
    --bs-tertiary-bg-rgb: 11, 19, 26;
    --bs-secondary-bg: #0B131A;
    --bs-secondary-bg-rgb: 11, 19, 26;

    --bs-body-color: #E6F1F8;
    --bs-body-color-rgb: 230, 241, 248;
    --bs-emphasis-color: #FFFFFF;
    --bs-emphasis-color-rgb: 255, 255, 255;

    --bs-secondary-color: #94A9BA;      /* text-secondary (.text-muted) */
    --bs-secondary-color-rgb: 148, 169, 186;
    --bs-tertiary-color: rgba(148, 169, 186, 0.65);

    --bs-primary: #00D2FF;
    --bs-primary-rgb: 0, 210, 255;
    --bs-primary-text-emphasis: #80e9ff;
    --bs-primary-bg-subtle: #002a33;
    --bs-primary-border-subtle: #007e99;

    --bs-success: #00F5D4;
    --bs-success-rgb: 0, 245, 212;

    --bs-accent: #39FF14;               /* custom role */
    --bs-accent-rgb: 57, 255, 20;

    --bs-link-color: #00D2FF;
    --bs-link-color-rgb: 0, 210, 255;
    --bs-link-hover-color: #66e3ff;
    --bs-link-hover-color-rgb: 102, 227, 255;

    --bs-border-color: rgba(148, 169, 186, 0.2);
    --bs-border-color-translucent: rgba(230, 241, 248, 0.12);
}

/* ---- Re-point baked-in component colors at the theme variables ------- */

/* Panels/cards/list-groups sit on the surface color. */
.card,
.list-group {
    --bs-card-bg: var(--bs-surface);
    --bs-list-group-bg: var(--bs-surface);
}

/* Solid primary buttons */
.btn-primary {
    --bs-btn-bg: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-bg: color-mix(in srgb, var(--bs-primary) 85%, #000);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--bs-primary) 80%, #000);
    --bs-btn-active-bg: color-mix(in srgb, var(--bs-primary) 75%, #000);
    --bs-btn-active-border-color: color-mix(in srgb, var(--bs-primary) 70%, #000);
    --bs-btn-disabled-bg: var(--bs-primary);
    --bs-btn-disabled-border-color: var(--bs-primary);
    --bs-btn-color: #fff;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-color: #fff;
    --bs-btn-disabled-color: #fff;
}
.btn-outline-primary {
    --bs-btn-color: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-bg: var(--bs-primary);
    --bs-btn-hover-border-color: var(--bs-primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--bs-primary);
    --bs-btn-active-border-color: var(--bs-primary);
    --bs-btn-active-color: #fff;
}

.btn-success,
.text-bg-success {
    --bs-btn-bg: var(--bs-success);
    --bs-btn-border-color: var(--bs-success);
    --bs-btn-hover-bg: color-mix(in srgb, var(--bs-success) 85%, #000);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--bs-success) 80%, #000);
    --bs-btn-active-bg: color-mix(in srgb, var(--bs-success) 75%, #000);
    --bs-btn-active-border-color: color-mix(in srgb, var(--bs-success) 70%, #000);
    --bs-btn-color: #00231f;
    --bs-btn-hover-color: #00231f;
    --bs-btn-active-color: #00231f;
}

.text-bg-success {
    color: #00231f !important;
}
.btn-outline-success {
    --bs-btn-color: var(--bs-success);
    --bs-btn-border-color: var(--bs-success);
    --bs-btn-hover-bg: var(--bs-success);
    --bs-btn-hover-border-color: var(--bs-success);
    --bs-btn-hover-color: #00231f;
    --bs-btn-active-bg: var(--bs-success);
    --bs-btn-active-border-color: var(--bs-success);
    --bs-btn-active-color: #00231f;
}

/* Form controls & switches follow the theme primary. */
.form-check-input:checked {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}
.form-check-input:focus,
.form-control:focus,
.form-select:focus {
    border-color: color-mix(in srgb, var(--bs-primary) 50%, transparent);
    box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);
}

/* Active admin sub-nav pills. */
.nav-pills {
    --bs-nav-pills-link-active-bg: var(--bs-primary);
}

/* Surface-colored navbar: theme-aware text instead of the old white-on-primary. */
.navbar {
    --bs-navbar-color: rgba(var(--bs-body-color-rgb), 0.7);
    --bs-navbar-hover-color: var(--bs-primary);
    --bs-navbar-active-color: var(--bs-primary);
    --bs-navbar-brand-color: var(--bs-body-color);
    --bs-navbar-brand-hover-color: var(--bs-body-color);
}

/* ---- Custom utilities ------------------------------------------------- */
/* Bootstrap ships no min-width:0 utility; flex children need it so that
   `text-truncate` actually shrinks instead of overflowing (e.g. long swimmer
   names beside the aan-/afmelden toggle on a narrow phone). */
.min-w-0 {
    min-width: 0;
}

.text-accent {
    color: var(--bs-accent) !important;
}
.bg-accent {
    background-color: var(--bs-accent) !important;
}
.btn-accent {
    --bs-btn-bg: var(--bs-accent);
    --bs-btn-border-color: var(--bs-accent);
    --bs-btn-hover-bg: color-mix(in srgb, var(--bs-accent) 85%, #000);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--bs-accent) 80%, #000);
    --bs-btn-active-bg: color-mix(in srgb, var(--bs-accent) 75%, #000);
    --bs-btn-active-border-color: color-mix(in srgb, var(--bs-accent) 70%, #000);
    --bs-btn-color: #10212c;
    --bs-btn-hover-color: #10212c;
    --bs-btn-active-color: #10212c;
}

/* The wordmark is black line art on transparent — invert it in dark mode so it
   stays visible on dark surfaces (the navbar and the landing hero). */
.navbar-logo {
    width: auto;
}
.hero-logo {
    width: 100%;
    max-width: 360px;
    height: auto;
}
[data-bs-theme="dark"] .navbar-logo,
[data-bs-theme="dark"] .hero-logo {
    filter: invert(1);
}