/* ============================================================================
   Skalski Dance School — panel kursanta
   Theme layer sitting on top of Bootstrap 5.3.

   Design rules this file enforces:
     1. One palette.  Skalski Gold = action, Skalski Dark Royal = structure,
        Skalski Pale = page ground.  Everything else is a muted, brand-adjacent
        derivative so that colour only ever means *status*, never decoration.
     2. Two typefaces.  Lora (serif) for H1–H4 and lead text, Lato for body,
        captions, buttons and CTAs.
     3. One card.  Every section header looks the same — royal bar with a gold
        rule underneath — instead of the old primary/success/dark/orange rainbow.
     4. Quiet tables.  Row highlights are tints, not saturated blocks; status
        lives in the badge, which is the only strongly coloured element.
   ========================================================================== */

/* ── Tokens ──────────────────────────────────────────────────────────────── */
:root {
    /* Brand */
    --sds-gold:         #e1a83e;   /* Skalski Gold — main            */
    --sds-gold-strong:  #c8912f;   /* hover / pressed                */
    --sds-gold-deep:    #a9701a;   /* text & fills that carry white  */
    --sds-gold-tint:    #fdf4e3;
    --sds-gold-line:    #edd6a4;

    --sds-royal:        #15284b;   /* Skalski Dark Royal — secondary */
    --sds-royal-soft:   #24406f;
    --sds-royal-tint:   #eef1f6;

    --sds-anthracite:   #272727;   /* top bar, header ink            */

    /* Gold scale for buttons: pale -> mid -> full, left to right in the
       dashboard action row. --sds-gold-mid is the midpoint of the other two. */
    --sds-gold-mid:     #efce90;
    --sds-gold-mid-hi:  #e9c274;

    /* Card / modal headers wear the pale gold of the quiet button, so header
       and button read as one family. */
    --sds-header-bg:    var(--sds-gold-tint);
    --sds-header-hover: #f9ebd0;

    --sds-pale:         #fefdf8;   /* Skalski Pale — background      */
    --sds-surface:      #ffffff;
    --sds-surface-alt:  #faf8f0;

    --sds-ink:          #1b2434;
    --sds-ink-soft:     #5d6577;
    --sds-line:         #ece7d9;
    --sds-line-strong:  #ddd5c0;

    /* Status — desaturated so they sit next to the gold without shouting */
    --sds-green:        #2f7a5b;  --sds-green-tint:  #eef5f1;
    --sds-red:          #b3392f;  --sds-red-tint:    #fbecea;
    --sds-blue:         #35638f;  --sds-blue-tint:   #eaf1f8;
    --sds-slate:        #5c6478;  --sds-slate-tint:  #f1f1ee;

    /* Shape */
    --sds-radius:       14px;
    --sds-radius-sm:    10px;
    --sds-shadow:       0 1px 2px rgb(21 40 75 / 0.04), 0 8px 24px -14px rgb(21 40 75 / 0.20);
    --sds-shadow-lg:    0 2px 6px rgb(21 40 75 / 0.06), 0 20px 44px -20px rgb(21 40 75 / 0.30);
    --sds-nav-height:   68px;

    /* Type */
    --sds-font-display: "Lora", Georgia, "Times New Roman", serif;
    --sds-font-body:    "Lato", "Segoe UI", Arial, sans-serif;

    /* ── Bootstrap remap ─────────────────────────────────────────────────── */
    --bs-body-font-family: var(--sds-font-body);
    --bs-body-font-size: 1rem;
    --bs-body-line-height: 1.6;
    --bs-body-bg: var(--sds-pale);
    --bs-body-color: var(--sds-ink);
    --bs-secondary-color: var(--sds-ink-soft);
    --bs-emphasis-color: var(--sds-royal);
    --bs-border-color: var(--sds-line);
    --bs-border-color-translucent: var(--sds-line);
    --bs-border-radius: var(--sds-radius-sm);
    --bs-border-radius-sm: 8px;
    --bs-border-radius-lg: var(--sds-radius);

    --bs-link-color: var(--sds-royal);
    --bs-link-color-rgb: 21, 40, 75;
    --bs-link-hover-color: var(--sds-gold-strong);
    --bs-link-hover-color-rgb: 200, 145, 47;
    --bs-link-decoration: none;

    --bs-focus-ring-width: 3px;
    --bs-focus-ring-opacity: 1;
    --bs-focus-ring-color: rgb(225 168 62 / 0.35);

    /* Utility colours (.bg-*, .text-*, .border-*, .badge) */
    --bs-primary:   var(--sds-royal);      --bs-primary-rgb:   21, 40, 75;
    --bs-secondary: var(--sds-slate);      --bs-secondary-rgb: 92, 100, 120;
    --bs-success:   var(--sds-green);      --bs-success-rgb:   47, 122, 91;
    --bs-danger:    var(--sds-red);        --bs-danger-rgb:    179, 57, 47;
    --bs-warning:   var(--sds-gold-deep);  --bs-warning-rgb:   169, 112, 26;
    --bs-info:      var(--sds-blue);       --bs-info-rgb:      53, 99, 143;
    --bs-light:     var(--sds-surface-alt);--bs-light-rgb:     250, 248, 240;
    --bs-dark:      var(--sds-royal);      --bs-dark-rgb:      21, 40, 75;
}

/* ── Base & typography ───────────────────────────────────────────────────── */
body {
    font-family: var(--sds-font-body);
    background-color: var(--sds-pale);
    color: var(--sds-ink);
    padding-top: var(--sds-nav-height);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
}

main { flex: 1 0 auto; }

h1, h2, h3, h4,
.h1, .h2, .h3, .h4,
.lead,
.card-header h1, .card-header h2, .card-header h3, .card-header h4,
.card-header h5, .card-header h6,
.card-title, .alert-heading, .modal-title {
    font-family: var(--sds-font-display);
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--sds-royal);
}

h5, h6, .h5, .h6 { font-family: var(--sds-font-body); font-weight: 700; color: var(--sds-royal); }

/* One calm heading scale — Bootstrap's default h1 is far too loud for a
   dashboard that is mostly dense tables. */
h1, .h1 { font-size: clamp(1.75rem, 1.45rem + 1vw, 2.25rem); line-height: 1.2; }
h2, .h2 { font-size: clamp(1.5rem, 1.3rem + .7vw, 1.9rem); line-height: 1.25; }
h3, .h3 { font-size: 1.35rem; }
h4, .h4 { font-size: 1.15rem; }
h5, .h5 { font-size: 1.0625rem; }
h6, .h6 { font-size: .9375rem; }

.lead { font-weight: 400; color: var(--sds-ink-soft); font-size: 1.125rem; }

/* Page heading + the <hr> that follows it read as one masthead */
main h1:first-of-type + hr,
main .h1 + hr { margin-top: .85rem; }

hr {
    border: 0;
    border-top: 1px solid var(--sds-line);
    opacity: 1;
}
hr.my-4 { border-top-color: var(--sds-gold-line); }

small, .small { font-size: .8125rem; }

strong, .fw-semibold, .fw-bold { font-weight: 700; }

a { text-decoration: none; transition: color .15s ease; }
a:hover { color: var(--sds-gold-strong); }

::selection { background: var(--sds-gold); color: var(--sds-royal); }

:focus-visible {
    outline: 3px solid rgb(225 168 62 / 0.45);
    outline-offset: 2px;
}

/* Amounts, counters and dates line up in columns */
td, th, .fs-4, .fs-5, .stat-value { font-variant-numeric: tabular-nums; }

/* ── Navbar ──────────────────────────────────────────────────────────────── */
.navbar {
    background: var(--sds-anthracite);
    min-height: var(--sds-nav-height);
    padding-block: .5rem;
    border-bottom: 2px solid var(--sds-gold);
    box-shadow: 0 6px 24px -16px rgb(0 0 0 / 0.7);
}

.navbar-brand { display: flex; align-items: center; padding-block: 0; }
.navbar-brand img { height: 40px; width: auto; }

.navbar .nav-link,
.navbar .btn-link.nav-link {
    position: relative;
    font-family: var(--sds-font-body);
    font-weight: 600;
    font-size: .9375rem;
    letter-spacing: .01em;
    color: rgb(255 255 255 / 0.82);
    padding: .5rem .9rem;
    transition: color .15s ease;
}

.navbar .nav-link:hover,
.navbar .nav-link:focus,
.navbar .btn-link.nav-link:hover,
.navbar .nav-link.show { color: #fff; }

/* Gold underline grows from the centre on hover — the one flourish in the bar.
   It MUST live on ::before: Bootstrap already owns ::after on .dropdown-toggle
   for the caret, and claiming it there eats the caret and leaves a stub. */
.navbar .nav-link::before {
    content: "";
    position: absolute;
    left: .5rem;
    right: .5rem;
    bottom: .25rem;
    height: 2px;
    background: var(--sds-gold);
    transform: scaleX(0);
    transition: transform .18s ease;
    pointer-events: none;
}
.navbar .nav-link:hover::before,
.navbar .nav-link:focus::before,
.navbar .nav-link.show::before { transform: scaleX(1); }

/* Keep Bootstrap's caret, just tint it and let it rotate when the menu is open */
.navbar .dropdown-toggle::after {
    color: var(--sds-gold);
    transition: transform .18s ease;
}
.navbar .dropdown-toggle.show::after { transform: rotate(180deg); }

.navbar .navbar-nav > .nav-item > form > .nav-link {
    color: rgb(255 255 255 / 0.6) !important;
    font-weight: 400;
}
.navbar .navbar-nav > .nav-item > form > .nav-link:hover { color: #fff !important; }

.navbar-toggler {
    border-color: rgb(255 255 255 / 0.25);
    padding: .35rem .6rem;
}
.navbar-toggler:focus { box-shadow: 0 0 0 3px rgb(225 168 62 / 0.35); }

.navbar .dropdown-menu {
    --bs-dropdown-bg: var(--sds-surface);
    --bs-dropdown-border-color: var(--sds-line);
    --bs-dropdown-border-radius: var(--sds-radius-sm);
    --bs-dropdown-link-color: var(--sds-royal);
    --bs-dropdown-link-hover-bg: var(--sds-gold-tint);
    --bs-dropdown-link-hover-color: var(--sds-royal);
    --bs-dropdown-link-active-bg: var(--sds-gold);
    --bs-dropdown-link-active-color: var(--sds-royal);
    --bs-dropdown-font-size: .9375rem;
    box-shadow: var(--sds-shadow-lg);
    padding: .4rem;
    margin-top: .5rem;
}
.navbar .dropdown-item { border-radius: 7px; font-weight: 600; }

@media (min-width: 992px) {
    .navbar .dropdown-menu::before {
        content: "";
        position: absolute;
        top: -.6rem;
        left: 0;
        right: 0;
        height: .6rem;
    }
}

/* ── Cards ───────────────────────────────────────────────────────────────── */
.card {
    --bs-card-bg: var(--sds-surface);
    --bs-card-border-color: var(--sds-line);
    --bs-card-border-radius: var(--sds-radius);
    --bs-card-inner-border-radius: calc(var(--sds-radius) - 1px);
    --bs-card-spacer-y: 1.25rem;
    --bs-card-spacer-x: 1.25rem;
    box-shadow: var(--sds-shadow);
    overflow: hidden;
}

.card.shadow, .card.shadow-sm { box-shadow: var(--sds-shadow) !important; }

/* One header treatment for every section — this is what kills the rainbow.
   The !important beats Bootstrap's .bg-* utilities and legacy inline colours. */
.card > .card-header {
    background: var(--sds-header-bg) !important;
    color: var(--sds-anthracite) !important;
    border-bottom: 2px solid var(--sds-gold);
    padding: .95rem 1.25rem;
}
.card > .card-header h1, .card > .card-header h2, .card > .card-header h3,
.card > .card-header h4, .card > .card-header h5, .card > .card-header h6 {
    color: var(--sds-anthracite);
    font-family: var(--sds-font-display);
    font-weight: 600;
    letter-spacing: .005em;
}
/* Templates mark these headers up as dark (`text-white`, `text-white-50`);
   on the light ground that would be invisible, so remap rather than hunt
   through every template for the utility class. */
.card > .card-header .text-white,
.card > .card-header.text-white { color: var(--sds-anthracite) !important; }
.card > .card-header .text-white-50 { color: var(--sds-ink-soft) !important; }
.card > .card-header[data-bs-toggle="collapse"] { cursor: pointer; }
.card > .card-header[data-bs-toggle="collapse"]:hover { background: var(--sds-header-hover) !important; }

/* Nested cards (the mobile fallbacks) stay flat so they don't fight the parent */
.card .card {
    box-shadow: none;
    background: var(--sds-surface-alt);
    border-color: var(--sds-line);
}
.card .card.border-success { border-left: 3px solid var(--sds-green); }
.card .card.border-secondary { border-left: 3px solid var(--sds-slate); }

/* Stat tiles (attendance summary) — solid colour, white type, no border */
.card.bg-primary, .card.bg-success, .card.bg-warning,
.card.bg-info, .card.bg-danger, .card.bg-dark {
    border: 0;
    color: #fff;
}
.card.bg-primary h3, .card.bg-success h3, .card.bg-warning h3,
.card.bg-info h3, .card.bg-danger h3, .card.bg-dark h3 {
    color: #fff;
    font-family: var(--sds-font-display);
    font-weight: 700;
}
.card.bg-primary p, .card.bg-success p, .card.bg-warning p,
.card.bg-info p, .card.bg-danger p, .card.bg-dark p {
    color: rgb(255 255 255 / 0.85);
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 700;
    font-size: .7rem;
}

/* Course tiles — a real cover, or a branded monogram instead of a grey slab */
.course-cover,
.course-cover-placeholder {
    height: 200px;
    width: 100%;
}
.course-cover { object-fit: cover; }
.course-cover-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background:
    radial-gradient(120% 120% at 20% 0%, var(--sds-gold-tint) 0%, var(--sds-surface-alt) 60%),
    var(--sds-surface-alt);
    border-bottom: 2px solid var(--sds-gold-line);
}
.course-cover-placeholder span {
    font-family: var(--sds-font-display);
    font-size: 3.5rem;
    font-weight: 600;
    line-height: 1;
    color: var(--sds-gold);
    text-transform: uppercase;
}

/* ── Tables ──────────────────────────────────────────────────────────────── */
.table {
    --bs-table-color: var(--sds-ink);
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--sds-line);
    --bs-table-hover-bg: var(--sds-gold-tint);
    --bs-table-hover-color: var(--sds-ink);
    margin-bottom: 0;
}

.table > thead > tr > th {
    font-family: var(--sds-font-body);
    font-size: .7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--sds-ink-soft);
    background: transparent;
    border-bottom: 2px solid var(--sds-gold-line);
    padding: .55rem .75rem;
    white-space: nowrap;
}

.table > tbody > tr > td { padding: .7rem .75rem; vertical-align: middle; }
.table > :not(:first-child) { border-top: 0; }

/* Row highlights become tints with a coloured edge instead of solid blocks */
.table-success, .table-warning, .table-danger,
.table-info, .table-primary, .table-secondary {
    --bs-table-color: var(--sds-ink);
    --bs-table-hover-color: var(--sds-ink);
}
.table-success   { --bs-table-bg: var(--sds-green-tint); --bs-table-hover-bg: #e3efe9; }
.table-warning   { --bs-table-bg: var(--sds-gold-tint);  --bs-table-hover-bg: #f9ecd4; }
.table-danger    { --bs-table-bg: var(--sds-red-tint);   --bs-table-hover-bg: #f7e0dd; }
.table-info      { --bs-table-bg: var(--sds-blue-tint);  --bs-table-hover-bg: #dfeaf5; }
.table-primary   { --bs-table-bg: var(--sds-royal-tint); --bs-table-hover-bg: #e4e9f1; }
.table-secondary { --bs-table-bg: var(--sds-slate-tint); --bs-table-hover-bg: #eaeae5; }

.table > tbody > tr.table-success > :first-child { box-shadow: inset 3px 0 0 var(--sds-green); }
.table > tbody > tr.table-warning > :first-child { box-shadow: inset 3px 0 0 var(--sds-gold); }
.table > tbody > tr.table-danger  > :first-child { box-shadow: inset 3px 0 0 var(--sds-red); }
.table > tbody > tr.table-info    > :first-child { box-shadow: inset 3px 0 0 var(--sds-blue); }
.table > tbody > tr.table-primary > :first-child { box-shadow: inset 3px 0 0 var(--sds-royal); }

/* ── Badges ──────────────────────────────────────────────────────────────── */
.badge {
    --bs-badge-padding-x: .6em;
    --bs-badge-padding-y: .4em;
    --bs-badge-font-size: .72em;
    --bs-badge-font-weight: 700;
    --bs-badge-border-radius: 999px;
    font-family: var(--sds-font-body);
    letter-spacing: .03em;
    vertical-align: middle;
}
.badge.bg-light { color: var(--sds-royal) !important; border: 1px solid var(--sds-line-strong); }

/* Dance role is an attribute, not a status — it gets its own neutral pair so
   that red stays reserved for things that are actually wrong. */
.badge-role {
    background: transparent;
    border: 1.5px solid currentcolor;
    text-transform: uppercase;
    font-size: .66em;
}
.badge-role-leader   { color: var(--sds-royal); }
.badge-role-follower { color: var(--sds-gold-deep); }

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn {
    --bs-btn-font-family: var(--sds-font-body);
    --bs-btn-font-weight: 700;
    --bs-btn-border-radius: 999px;
    --bs-btn-padding-x: 1.15rem;
    --bs-btn-padding-y: .5rem;
    --bs-btn-focus-shadow-rgb: 225, 168, 62;
    letter-spacing: .015em;
    transition: background-color .15s ease, border-color .15s ease,
                color .15s ease, transform .12s ease, box-shadow .15s ease;
}
.btn:active { transform: translateY(1px); }

.btn-sm { --bs-btn-padding-x: .85rem; --bs-btn-padding-y: .35rem; --bs-btn-font-size: .8125rem; }
.btn-lg { --bs-btn-padding-x: 1.5rem; --bs-btn-padding-y: .7rem; --bs-btn-font-size: 1.0625rem; }

/* Gold is the call to action */
.btn-primary {
    --bs-btn-color: var(--sds-anthracite);
    --bs-btn-bg: var(--sds-gold);
    --bs-btn-border-color: var(--sds-gold);
    --bs-btn-hover-color: var(--sds-anthracite);
    --bs-btn-hover-bg: var(--sds-gold-strong);
    --bs-btn-hover-border-color: var(--sds-gold-strong);
    --bs-btn-active-color: var(--sds-anthracite);
    --bs-btn-active-bg: var(--sds-gold-strong);
    --bs-btn-active-border-color: var(--sds-gold-strong);
    --bs-btn-disabled-color: var(--sds-anthracite);
    --bs-btn-disabled-bg: var(--sds-gold-line);
    --bs-btn-disabled-border-color: var(--sds-gold-line);
    box-shadow: 0 6px 18px -10px rgb(225 168 62 / 0.9);
}

/* Middle of the gold scale — sits between the pale .btn-warning and the full
   .btn-primary, so the dashboard action row reads as one graded set. */
.btn-success {
    --bs-btn-color: var(--sds-anthracite);
    --bs-btn-bg: var(--sds-gold-mid);
    --bs-btn-border-color: var(--sds-gold-mid);
    --bs-btn-hover-color: var(--sds-anthracite);
    --bs-btn-hover-bg: var(--sds-gold-mid-hi);
    --bs-btn-hover-border-color: var(--sds-gold-mid-hi);
    --bs-btn-active-color: var(--sds-anthracite);
    --bs-btn-active-bg: var(--sds-gold-mid-hi);
    --bs-btn-active-border-color: var(--sds-gold-mid-hi);
}

.btn-outline-success {
    --bs-btn-color: var(--sds-anthracite);
    --bs-btn-border-color: var(--sds-gold-mid);
    --bs-btn-hover-color: var(--sds-anthracite);
    --bs-btn-hover-bg: var(--sds-gold-mid);
    --bs-btn-hover-border-color: var(--sds-gold-mid);
    --bs-btn-active-color: var(--sds-anthracite);
    --bs-btn-active-bg: var(--sds-gold-mid);
    --bs-btn-active-border-color: var(--sds-gold-mid);
}

/* Royal is the structural action */
.btn-dark {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--sds-royal);
    --bs-btn-border-color: var(--sds-royal);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--sds-royal-soft);
    --bs-btn-hover-border-color: var(--sds-royal-soft);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--sds-royal-soft);
    --bs-btn-active-border-color: var(--sds-royal-soft);
}

/* Quiet, secondary navigation ("Back to dashboard", "Clear filters") */
.btn-secondary {
    --bs-btn-color: var(--sds-royal);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: var(--sds-line-strong);
    --bs-btn-hover-color: var(--sds-royal);
    --bs-btn-hover-bg: var(--sds-gold-tint);
    --bs-btn-hover-border-color: var(--sds-gold);
    --bs-btn-active-color: var(--sds-royal);
    --bs-btn-active-bg: var(--sds-gold-tint);
    --bs-btn-active-border-color: var(--sds-gold);
}

.btn-warning {
    --bs-btn-color: var(--sds-anthracite);
    --bs-btn-bg: var(--sds-gold-tint);
    --bs-btn-border-color: var(--sds-gold);
    --bs-btn-hover-color: var(--sds-anthracite);
    --bs-btn-hover-bg: var(--sds-gold);
    --bs-btn-hover-border-color: var(--sds-gold);
    --bs-btn-active-color: var(--sds-anthracite);
    --bs-btn-active-bg: var(--sds-gold-strong);
    --bs-btn-active-border-color: var(--sds-gold-strong);
}

.btn-danger {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--sds-red);
    --bs-btn-border-color: var(--sds-red);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #9a3128;
    --bs-btn-hover-border-color: #9a3128;
    --bs-btn-active-bg: #9a3128;
    --bs-btn-active-border-color: #9a3128;
}

.btn-outline-primary {
    --bs-btn-color: var(--sds-royal);
    --bs-btn-border-color: var(--sds-gold);
    --bs-btn-hover-color: var(--sds-royal);
    --bs-btn-hover-bg: var(--sds-gold);
    --bs-btn-hover-border-color: var(--sds-gold);
    --bs-btn-active-color: var(--sds-royal);
    --bs-btn-active-bg: var(--sds-gold);
    --bs-btn-active-border-color: var(--sds-gold);
}

.btn-outline-secondary {
    --bs-btn-color: var(--sds-ink-soft);
    --bs-btn-border-color: var(--sds-line-strong);
    --bs-btn-hover-color: var(--sds-royal);
    --bs-btn-hover-bg: var(--sds-gold-tint);
    --bs-btn-hover-border-color: var(--sds-gold);
    --bs-btn-active-color: var(--sds-royal);
    --bs-btn-active-bg: var(--sds-gold-tint);
    --bs-btn-active-border-color: var(--sds-gold);
}

.btn-outline-danger {
    --bs-btn-color: var(--sds-red);
    --bs-btn-border-color: rgb(179 57 47 / 0.45);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--sds-red);
    --bs-btn-hover-border-color: var(--sds-red);
    --bs-btn-active-bg: #9a3128;
    --bs-btn-active-border-color: #9a3128;
}

/* The input-group password toggle must not inherit the pill radius */
.input-group > .btn { --bs-btn-border-radius: var(--sds-radius-sm); }

/* ── Forms ───────────────────────────────────────────────────────────────── */
.form-label {
    font-family: var(--sds-font-body);
    font-weight: 700;
    font-size: .8125rem;
    letter-spacing: .02em;
    color: var(--sds-royal);
    margin-bottom: .35rem;
}

.form-control, .form-select {
    --bs-border-radius: var(--sds-radius-sm);
    background-color: var(--sds-surface);
    border-color: var(--sds-line-strong);
    color: var(--sds-ink);
    padding: .55rem .85rem;
}
.form-control::placeholder { color: #9aa0ad; }

.form-control:focus, .form-select:focus {
    border-color: var(--sds-gold);
    box-shadow: 0 0 0 3px rgb(225 168 62 / 0.25);
}

.form-control.is-invalid, .form-select.is-invalid,
.was-validated .form-control:invalid { border-color: var(--sds-red); }

.invalid-feedback { color: var(--sds-red); font-weight: 600; font-size: .8125rem; }
.form-text { color: var(--sds-ink-soft); font-size: .8125rem; }

.form-check-input { border-color: var(--sds-line-strong); }
.form-check-input:checked {
    background-color: var(--sds-royal);
    border-color: var(--sds-royal);
}
.form-check-input:focus {
    border-color: var(--sds-gold);
    box-shadow: 0 0 0 3px rgb(225 168 62 / 0.25);
}
.form-check-label { color: var(--sds-ink); }

/* ── Fieldsets ───────────────────────────────────────────────────────────── *
   The guest registration form groups its inputs with plain <fieldset>/
   <legend> instead of .card - give that the same rounded, shadowed language
   as every card in the panel so the form doesn't read as a different,
   unstyled page bolted onto the rest of the site. */
fieldset.border {
    border: 1px solid var(--sds-line) !important;
    border-radius: var(--sds-radius);
    background: var(--sds-surface);
    box-shadow: var(--sds-shadow);
    padding: 1.25rem !important;
}
fieldset.border legend {
    float: none;
    width: auto;
    margin-bottom: 1rem;
    padding: 0 .1rem;
    font-family: var(--sds-font-display);
    font-weight: 600;
    font-size: 1.05rem;
    color: var(--sds-royal);
}

/* ── Alerts ──────────────────────────────────────────────────────────────── */
.alert {
    --bs-alert-border-radius: var(--sds-radius);
    border: 1px solid transparent;
    border-left-width: 4px;
    padding: 1rem 1.15rem;
}
.alert-heading { font-size: 1.0625rem; margin-bottom: .4rem; }

.alert-info      { --bs-alert-bg: var(--sds-blue-tint);  --bs-alert-color: #24476b; --bs-alert-border-color: var(--sds-blue); }
.alert-success   { --bs-alert-bg: var(--sds-green-tint); --bs-alert-color: #235c45; --bs-alert-border-color: var(--sds-green); }
.alert-warning   { --bs-alert-bg: var(--sds-gold-tint);  --bs-alert-color: #7d5310; --bs-alert-border-color: var(--sds-gold); }
.alert-danger    { --bs-alert-bg: var(--sds-red-tint);   --bs-alert-color: #8a2c24; --bs-alert-border-color: var(--sds-red); }
.alert-secondary { --bs-alert-bg: var(--sds-slate-tint); --bs-alert-color: var(--sds-royal); --bs-alert-border-color: var(--sds-slate); }
.alert .alert-heading { color: inherit; }

/* ── List groups ─────────────────────────────────────────────────────────── */
.list-group {
    --bs-list-group-border-color: var(--sds-line);
    --bs-list-group-color: var(--sds-ink);
    --bs-list-group-bg: var(--sds-surface);
    --bs-list-group-action-hover-bg: var(--sds-gold-tint);
    --bs-list-group-action-hover-color: var(--sds-royal);
}
.list-group-flush > .list-group-item { padding: 1rem 1.25rem; }

/* ── Modal ───────────────────────────────────────────────────────────────── */
.modal-content {
    --bs-modal-border-radius: var(--sds-radius);
    --bs-modal-border-color: transparent;
    box-shadow: var(--sds-shadow-lg);
    overflow: hidden;
}
.modal-header {
    background: var(--sds-header-bg);
    border-bottom: 2px solid var(--sds-gold);
    padding: 1rem 1.25rem;
}
.modal-header .modal-title { color: var(--sds-anthracite); }
.modal-header .btn-close { opacity: .7; }
.modal-backdrop { --bs-backdrop-bg: #0b1428; --bs-backdrop-opacity: .6; }

/* ── Breadcrumb ──────────────────────────────────────────────────────────── */
.breadcrumb {
    --bs-breadcrumb-divider: "›";
    --bs-breadcrumb-item-padding-x: .6rem;
    --bs-breadcrumb-divider-color: var(--sds-line-strong);
    --bs-breadcrumb-item-active-color: var(--sds-ink-soft);
    font-size: .875rem;
    font-weight: 600;
}
.breadcrumb-item a { color: var(--sds-royal); }
.breadcrumb-item a:hover { color: var(--sds-gold-strong); text-decoration: underline; }

/* ── Tooltips & misc chrome ──────────────────────────────────────────────── */
.tooltip { --bs-tooltip-bg: var(--sds-royal); --bs-tooltip-opacity: 1; }

.pagination {
    --bs-pagination-color: var(--sds-royal);
    --bs-pagination-border-color: var(--sds-line);
    --bs-pagination-hover-bg: var(--sds-gold-tint);
    --bs-pagination-hover-color: var(--sds-royal);
    --bs-pagination-active-bg: var(--sds-gold);
    --bs-pagination-active-border-color: var(--sds-gold);
    --bs-pagination-active-color: var(--sds-royal);
    --bs-pagination-focus-box-shadow: 0 0 0 3px rgb(225 168 62 / 0.25);
}

.progress { --bs-progress-bg: var(--sds-slate-tint); --bs-progress-bar-bg: var(--sds-gold); }

/* ── Footer ──────────────────────────────────────────────────────────────── */
.footer {
    flex-shrink: 0;
    background: var(--sds-surface-alt) !important;
    border-top: 1px solid var(--sds-gold-line) !important;
    padding-block: 1.5rem;
}
.footer p { color: var(--sds-ink-soft) !important; letter-spacing: .01em; }
.footer a { color: var(--sds-gold-deep); font-weight: 700; }
.footer a:hover { color: var(--sds-royal); text-decoration: underline; }

/* ── Responsive helpers the templates already reference ──────────────────── *
   .h1-md / .fs-md-* / .w-md-auto / .btn-md-normal are used throughout the
   panel but are not part of Bootstrap, so they were silently doing nothing.  */
@media (min-width: 768px) {
    .h1-md      { font-size: clamp(1.75rem, 1.45rem + 1vw, 2.25rem) !important; }
    .fs-md-3    { font-size: 1.75rem !important; }
    .fs-md-5    { font-size: 1.25rem !important; }
    .w-md-auto  { width: auto !important; }
    .btn-sm.btn-md-normal {
        --bs-btn-padding-x: 1.15rem;
        --bs-btn-padding-y: .5rem;
        --bs-btn-font-size: 1rem;
    }
}

@media (max-width: 991.98px) {
    .navbar .navbar-collapse {
        margin-top: .5rem;
        padding-top: .5rem;
        border-top: 1px solid rgb(255 255 255 / 0.12);
    }
    .navbar .nav-link::before { display: none; }
}

@media (max-width: 575.98px) {
    :root { --sds-radius: 12px; }
    .card > .card-header { padding: .8rem 1rem; }
    .card-body { --bs-card-spacer-x: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
    .btn, .navbar .nav-link, .navbar .nav-link::before,
    .navbar .dropdown-toggle::after, a { transition: none; }
    .btn:active { transform: none; }
}