/* ==========================================================================
   WranglerDesk — design system
   --------------------------------------------------------------------------
   Layered on top of vendored Bootstrap 5. Defines brand tokens (BRAND.md
   §4.3), typography rhythm (BRAND.md §4.4 / LOGO_BRIEF.md §3), saddle-stitch
   and brand-iron motifs (BRAND.md §4.8), and the touch-friendly UI rules for
   tablet + phone use ("phones in the arena, tablets in the barn").
   ========================================================================== */

/* ---- 1. Tokens --------------------------------------------------------- */

:root {
    /* Palette — never pure white, never pure black. */
    --wd-bone:   #F5F1EA;   /* page canvas */
    --wd-bone-2: #ECE5D8;   /* slightly deeper canvas, for sunken/secondary fills */
    --wd-bone-3: #F9F7F2;   /* lightest tint — raised surfaces (cards) that pop off the canvas */
    --wd-paper:  #FDFCFA;   /* near-white writing surface — inputs + calendar grid; sits
                               a clear step above bone-3 cards so data fields stand out
                               (kept just off pure white per the brand no-pure-white rule) */
    --wd-ink:    #1F1A14;
    --wd-ink-2:  #4A3E30;   /* muted ink */
    --wd-ink-3:  #7A6A55;   /* tertiary text / metadata */
    --wd-saddle: #A87C4F;
    --wd-saddle-deep: #8B5E32;
    --wd-barn:   #9C3B2E;
    --wd-sage:   #7C8466;
    --wd-wood:   #5A3F2A;
    --wd-dust:   #D9CFC1;
    --wd-gold:   #C99846;

    /* Type */
    --font-display: "Fraunces", ui-serif, Georgia, serif;
    --font-body:    "Inter", ui-sans-serif, system-ui, sans-serif;

    /* Spacing rhythm — slightly larger than Bootstrap defaults, for tablet
       touch targets. */
    --tap-target: 48px;
    --tap-target-lg: 56px;
    --gutter: 1.5rem;

    /* Shadows — soft, never harsh */
    --shadow-sm: 0 1px 2px rgba(31, 26, 20, 0.06);
    --shadow-md: 0 6px 24px rgba(31, 26, 20, 0.08);
    --shadow-lg: 0 18px 48px rgba(31, 26, 20, 0.10);

    /* Radius — slightly soft, no aggressive curvature */
    --radius-sm: 4px;
    --radius:    8px;
    --radius-lg: 14px;
}

/* Bootstrap overrides — color the framework to our palette without rewiring. */
:root {
    --bs-body-bg: var(--wd-bone);
    --bs-body-color: var(--wd-ink);
    --bs-body-font-family: var(--font-body);
    --bs-primary: var(--wd-saddle);
    --bs-link-color: var(--wd-saddle-deep);
    --bs-link-hover-color: var(--wd-wood);
    --bs-border-color: var(--wd-dust);
    --bs-border-color-translucent: rgba(90, 63, 42, 0.18);
}

/* ---- 2. Typography ----------------------------------------------------- */

body {
    font-family: var(--font-body);
    background: var(--wd-bone);
    color: var(--wd-ink);
    font-feature-settings: "ss01" 1, "cv11" 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.wd-display {
    font-family: var(--font-display);
    color: var(--wd-ink);
    font-weight: 500;
    letter-spacing: -0.01em;
    line-height: 1.08;
    font-variation-settings: "opsz" 60, "SOFT" 30;
}

h1, .h1 { font-size: clamp(2.4rem, 4.2vw, 3.6rem); }
h2, .h2 { font-size: clamp(1.9rem, 3vw, 2.5rem); letter-spacing: -0.015em; }
h3, .h3 { font-size: clamp(1.5rem, 2.3vw, 1.85rem); }
h4, .h4 { font-size: 1.25rem; }
h5, .h5 { font-size: 1.05rem; }
h6, .h6 { font-size: 0.95rem; font-weight: 600; font-family: var(--font-body); letter-spacing: 0.02em; text-transform: none; }

/* Editorial-scale hero headlines for the marketing surface. */
.wd-hero-title {
    font-family: var(--font-display);
    font-size: clamp(2.8rem, 6.5vw, 5.2rem);
    font-variation-settings: "opsz" 144, "SOFT" 50, "WONK" 1;
    line-height: 0.98;
    letter-spacing: -0.025em;
    color: var(--wd-ink);
}

.wd-eyebrow {
    font-family: var(--font-body);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--wd-saddle-deep);
}

/* Data-grid figures: tabular + small caps for status labels. */
.wd-tabular { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1, "lnum" 1; }
.wd-allcaps { letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.72rem; font-weight: 600; }

/* ---- 3. Saddle-stitch divider ----------------------------------------- */
/*
   Horizontal line with paired short ticks above and below — evokes leather
   stitching. Pure CSS, scales with em. Used between page sections.
*/

.wd-stitch {
    position: relative;
    border: none;
    height: 1px;
    background: var(--wd-saddle);
    opacity: 0.35;
    margin: 3rem 0;
}
.wd-stitch::before,
.wd-stitch::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 0;
    border-top: 1px dashed var(--wd-saddle);
    opacity: 0.55;
}
.wd-stitch::before { top: -6px; }
.wd-stitch::after  { top: 6px; }

/* Compact variant — inline within cards. */
.wd-stitch-sm {
    border: none;
    height: 0;
    border-top: 1px dashed var(--wd-saddle);
    opacity: 0.5;
    margin: 1.25rem 0;
}

/* ---- 4. Brand-iron stamp ---------------------------------------------- */
/*
   Tiny stamped corner ornament for cards, callouts, and section corners.
   Drawn with a single span using radial overlap — looks branded into the
   surface. Use sparingly per BRAND.md §4.10 ("no more than 2 brand-touched
   icons visible at once").
*/

.wd-stamp {
    position: relative;
    display: inline-block;
    width: 14px;
    height: 14px;
}
.wd-stamp::before,
.wd-stamp::after {
    content: "";
    position: absolute;
    inset: 0;
    border: 1px solid currentColor;
    opacity: 0.6;
}
.wd-stamp::before { border-radius: 50%; }
.wd-stamp::after  { transform: rotate(45deg) scale(0.7); border-radius: 1px; }

/* ---- 5. App shell + navigation ---------------------------------------- */

.wd-topbar {
    background: var(--wd-bone);
    border-bottom: 1px solid var(--bs-border-color-translucent);
    padding: 0.65rem 0;
}
.wd-topbar .navbar-brand { font-family: var(--font-display); font-weight: 500; letter-spacing: -0.015em; color: var(--wd-ink); }
.wd-topbar .navbar-brand .wd-mark { height: 28px; width: auto; margin-right: 0.55rem; }
.wd-topbar .nav-link { color: var(--wd-ink-2); font-weight: 500; padding: 0.55rem 0.9rem; }
.wd-topbar .nav-link:hover { color: var(--wd-saddle-deep); }
.wd-topbar .nav-link.active { color: var(--wd-ink); position: relative; }
.wd-topbar .nav-link.active::after {
    content: ""; position: absolute; left: 0.9rem; right: 0.9rem;
    bottom: 0.2rem; height: 2px; background: var(--wd-saddle); border-radius: 1px;
}

/* PlatformAdmin "View As" support session strip. Intentionally the loudest
   surface in the app: the operator is acting inside a real customer's account
   and every write is attributed to that customer, so this must never blend into
   the ranch's own chrome the way the cross-tenant banner does. */
.wd-impersonation-banner {
    background: #7a1f1f;
    border-bottom-color: #5c1717 !important;
    color: #fdf5f0;
}
.wd-impersonation-banner strong { color: #fff; }
.wd-impersonation-banner .btn-dark {
    background: #fdf5f0; border-color: #fdf5f0; color: #7a1f1f; font-weight: 600;
}
.wd-impersonation-banner .btn-dark:hover,
.wd-impersonation-banner .btn-dark:focus {
    background: #fff; border-color: #fff; color: #5c1717;
}

/* ---- 5a. App shell (sidebar + main column) ---------------------------- */
/*
   Authenticated admin/trainer surface (_AdminLayout). A fixed left sidebar
   carries the brand + vertical accordion nav; the main column carries a
   per-page top bar and the routed content. Three states:
     - default (desktop ≥992px): sidebar expanded, ~248px.
     - rail-collapsed (html.wd-nav-collapsed): sidebar shrinks to a 68px icon
       rail; labels/caret/footer text hide. Persisted in localStorage.
     - drawer (mobile <992px): sidebar is off-canvas, slid in over a backdrop
       via the top-bar hamburger.
*/
:root {
    --wd-sidebar-w: 248px;
    --wd-sidebar-rail: 68px;
    --wd-appbar-h: 60px;
}

.wd-shell {
    display: flex;
    align-items: stretch;
    min-height: 100vh;
}

/* ---- Sidebar ---- */
.wd-sidebar {
    flex: 0 0 var(--wd-sidebar-w);
    width: var(--wd-sidebar-w);
    position: sticky;
    top: 0;
    align-self: flex-start;
    height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--wd-bone-2);
    border-right: 1px solid var(--bs-border-color-translucent);
    z-index: 40;
    transition: width 200ms ease-out, transform 240ms ease-out;
}

.wd-sidebar-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    height: var(--wd-appbar-h);
    padding: 0 0.75rem 0 1rem;
    border-bottom: 1px solid var(--bs-border-color-translucent);
    flex: 0 0 auto;
}
.wd-sidebar-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-family: var(--font-display);
    font-weight: 500;
    letter-spacing: -0.015em;
    font-size: 1.05rem;
    color: var(--wd-ink);
    text-decoration: none;
    overflow: hidden;
    white-space: nowrap;
}
.wd-sidebar-mark { flex: 0 0 auto; }

.wd-rail-toggle {
    margin-left: auto;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--wd-ink-3);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background 160ms ease-out, color 160ms ease-out, transform 200ms ease-out;
}
.wd-rail-toggle:hover { background: var(--wd-dust); color: var(--wd-ink); }
.wd-rail-toggle svg { width: 20px; height: 20px; }

.wd-sidenav {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0.75rem 0.6rem;
    -webkit-overflow-scrolling: touch;
}

.wd-sidebar-foot {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.85rem 1rem;
    border-top: 1px solid var(--bs-border-color-translucent);
    color: var(--wd-ink-3);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
}
.wd-sidebar-foot-mark { color: var(--wd-saddle); font-size: 1rem; }

/* ---- Nav items ---- */
.wd-nav { list-style: none; margin: 0; padding: 0; }
.wd-nav > li { margin-bottom: 0.15rem; }

.wd-nav-link,
.wd-nav-parent {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.6rem 0.7rem;
    border: none;
    background: transparent;
    color: var(--wd-ink-2);
    font-family: var(--font-body);
    font-size: 0.92rem;
    font-weight: 500;
    text-align: left;
    text-decoration: none;
    border-radius: var(--radius);
    cursor: pointer;
    transition: background 160ms ease-out, color 160ms ease-out;
}
.wd-nav-link:hover,
.wd-nav-parent:hover {
    background: var(--wd-dust);
    color: var(--wd-ink);
}
.wd-nav-link.active,
.wd-nav-parent.active {
    background: var(--wd-ink);
    color: var(--wd-bone);
}

.wd-nav-ico {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    color: inherit;
}
.wd-nav-svg { width: 20px; height: 20px; }
.wd-nav-label {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.wd-nav-caret {
    flex: 0 0 auto;
    display: inline-flex;
    color: inherit;
    opacity: 0.6;
    transition: transform 200ms ease-out;
}
.wd-nav-caret svg { width: 18px; height: 18px; }
.wd-nav-group.is-open > .wd-nav-parent .wd-nav-caret { transform: rotate(180deg); }

/* ---- Accordion submenu ---- */
.wd-nav-sub {
    list-style: none;
    margin: 0.1rem 0 0.2rem;
    padding: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 240ms ease-out;
}
.wd-nav-group.is-open > .wd-nav-sub { max-height: 22rem; }

.wd-nav-child {
    display: block;
    padding: 0.5rem 0.7rem 0.5rem 3.15rem;
    position: relative;
    color: var(--wd-ink-2);
    font-size: 0.88rem;
    text-decoration: none;
    border-radius: var(--radius);
    transition: background 160ms ease-out, color 160ms ease-out;
}
.wd-nav-child::before {
    content: "";
    position: absolute;
    left: 1.55rem;
    top: 50%;
    width: 5px;
    height: 5px;
    margin-top: -2.5px;
    border-radius: 50%;
    background: var(--wd-saddle);
    opacity: 0.5;
}
.wd-nav-child:hover { background: var(--wd-dust); color: var(--wd-ink); }
.wd-nav-child.active { color: var(--wd-saddle-deep); font-weight: 600; }
.wd-nav-child.active::before { opacity: 1; background: var(--wd-saddle-deep); }

/* ---- Rail (collapsed) state — desktop only ---- */
@media (min-width: 992px) {
    .wd-nav-collapsed .wd-sidebar { width: var(--wd-sidebar-rail); flex-basis: var(--wd-sidebar-rail); }
    .wd-nav-collapsed .wd-nav-label,
    .wd-nav-collapsed .wd-nav-caret,
    .wd-nav-collapsed .wd-sidebar-foot .wd-nav-label { display: none; }
    .wd-nav-collapsed .wd-sidebar-head { padding-inline: 0; justify-content: center; }
    .wd-nav-collapsed .wd-rail-toggle { margin-left: 0; }
    .wd-nav-collapsed .wd-rail-toggle svg { transform: rotate(180deg); }
    .wd-nav-collapsed .wd-sidebar-brand { gap: 0; }
    .wd-nav-collapsed .wd-nav-link,
    .wd-nav-collapsed .wd-nav-parent { justify-content: center; padding-inline: 0; gap: 0; }
    .wd-nav-collapsed .wd-nav-sub { display: none; }   /* rail expands on click via JS */
    .wd-nav-collapsed .wd-sidebar-foot { justify-content: center; padding-inline: 0; }
}

/* ---- Main column ---- */
.wd-main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.wd-appbar {
    position: sticky;
    top: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: var(--wd-appbar-h);
    padding: 0.5rem 1.25rem;
    background: rgba(245, 241, 234, 0.9);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--bs-border-color-translucent);
}
.wd-hamburger {
    display: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    padding: 0;
    border: 1px solid var(--bs-border-color);
    background: var(--wd-bone-3);
    border-radius: var(--radius);
    color: var(--wd-ink);
    cursor: pointer;
}
.wd-hamburger svg { width: 22px; height: 22px; }

.wd-appbar-title {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    min-width: 0;
    overflow: hidden;
}
.wd-appbar-crumb {
    color: var(--wd-ink-3);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
}
.wd-appbar-sep { color: var(--wd-dust); }
.wd-appbar-page {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--wd-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.wd-appbar-right {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.wd-appbar-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.wd-appbar-user {
    display: flex;
    align-items: center;
}
/* Divider only when the page contributed its own actions. */
.wd-appbar-actions + .wd-appbar-user {
    padding-left: 0.75rem;
    border-left: 1px solid var(--bs-border-color-translucent);
}

.wd-main > main { flex: 1 1 auto; }
.wd-content {
    max-width: 1180px;
    margin-inline: auto;
    padding: 1.75rem 1.25rem;
}
/* Dense list and board pages that earn the horizontal room. 1180px is tuned
   for reading prose and forms; a customer roster with six data columns just
   wraps inside it. Opt in from a view with ViewData["WideContent"] = true. */
.wd-content-wide { max-width: 1560px; }
@media (min-width: 768px) {
    .wd-content { padding-inline: 2rem; }
}
.wd-main .wd-footer { margin-top: 2rem; }

/* ---- Backdrop (mobile drawer) ---- */
.wd-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(31, 26, 20, 0.45);
    z-index: 39;
    opacity: 0;
    transition: opacity 240ms ease-out;
}
.wd-backdrop[hidden] { display: none; }

/* ---- Mobile: off-canvas drawer ---- */
@media (max-width: 991.98px) {
    .wd-hamburger { display: inline-flex; }
    .wd-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        width: min(84vw, var(--wd-sidebar-w));
        flex-basis: auto;
        transform: translateX(-100%);
        box-shadow: var(--shadow-lg);
    }
    .wd-shell.is-drawer-open .wd-sidebar { transform: translateX(0); }
    .wd-shell.is-drawer-open .wd-backdrop { opacity: 1; }
}

/* ---- 6. Buttons -------------------------------------------------------- */

.btn {
    font-family: var(--font-body);
    font-weight: 500;
    border-radius: var(--radius);
    padding: 0.65rem 1.1rem;
    transition: background 200ms ease-out, color 200ms ease-out, transform 200ms ease-out, box-shadow 200ms ease-out;
}
.btn-lg { padding: 0.85rem 1.4rem; font-size: 1.05rem; }

.btn-primary,
.btn-primary:focus {
    background: var(--wd-saddle);
    border-color: var(--wd-saddle);
    color: var(--wd-bone);
    box-shadow: inset 0 0 0 1px rgba(245, 241, 234, 0.4);
}
.btn-primary:hover { background: var(--wd-wood); border-color: var(--wd-wood); color: var(--wd-bone); }

.btn-outline-secondary {
    color: var(--wd-ink); border-color: var(--wd-ink-3); background: transparent;
}
.btn-outline-secondary:hover { background: var(--wd-ink); border-color: var(--wd-ink); color: var(--wd-bone); }

.btn-outline-primary {
    color: var(--wd-saddle-deep); border-color: var(--wd-saddle); background: transparent;
}
.btn-outline-primary:hover { background: var(--wd-saddle); border-color: var(--wd-saddle); color: var(--wd-bone); }

.btn-link {
    color: var(--wd-saddle-deep);
    text-decoration: none;
    padding-left: 0; padding-right: 0;
    border-bottom: 1px dashed transparent;
}
.btn-link:hover { color: var(--wd-wood); border-bottom-color: var(--wd-saddle); }

/* Hero CTA gets the signature "stamped" double border. */
.wd-cta {
    background: var(--wd-saddle);
    color: var(--wd-bone);
    border: 1px solid var(--wd-saddle);
    box-shadow: inset 0 0 0 1px rgba(245, 241, 234, 0.45), var(--shadow-md);
    padding: 0.95rem 1.6rem;
    font-weight: 600;
    border-radius: var(--radius);
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    text-decoration: none;
    transition: transform 250ms ease-out, background 250ms ease-out;
}
.wd-cta:hover { background: var(--wd-wood); color: var(--wd-bone); transform: translateY(-1px); }
.wd-cta .wd-cta-mark {
    width: 14px; height: 14px;
    transition: transform 250ms ease-out;
}
.wd-cta:hover .wd-cta-mark { transform: rotate(15deg); }

/* ---- 7. Cards + surfaces ---------------------------------------------- */

.card {
    background: var(--wd-bone-3);
    border: 1px solid var(--bs-border-color-translucent);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}
.card .card-body { color: var(--wd-ink); }
.card .text-muted { color: var(--wd-ink-3) !important; }

/* Editorial surface — for hero callouts and "feature" sections. */
.wd-surface {
    background: var(--wd-bone-3);
    border-radius: var(--radius-lg);
    padding: 2rem;
    position: relative;
    border: 1px solid var(--bs-border-color-translucent);
}
.wd-surface-wood {
    background: var(--wd-wood);
    color: var(--wd-bone);
    border-color: transparent;
}
.wd-surface-wood h1, .wd-surface-wood h2, .wd-surface-wood h3 { color: var(--wd-bone); }
.wd-surface-wood .text-muted { color: rgba(245, 241, 234, 0.6) !important; }

/* Brand-iron corner stamps on hero surfaces. Two diagonals only. */
.wd-surface-stamped::before,
.wd-surface-stamped::after {
    content: "";
    position: absolute;
    width: 22px; height: 22px;
    border: 1px solid var(--wd-saddle);
    opacity: 0.45;
}
.wd-surface-stamped::before { top: 14px; left: 14px; border-right: none; border-bottom: none; }
.wd-surface-stamped::after  { bottom: 14px; right: 14px; border-left: none; border-top: none; }

/* ---- 8. Forms --------------------------------------------------------- */

.form-control,
.form-select {
    background: var(--wd-paper);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--radius);
    color: var(--wd-ink);
    padding: 0.65rem 0.85rem;
    min-height: var(--tap-target);
    transition: border-color 200ms ease-out, background 200ms ease-out, box-shadow 200ms ease-out;
}
.form-control:focus,
.form-select:focus {
    background: var(--wd-paper);
    border-color: var(--wd-saddle);
    color: var(--wd-ink);
    box-shadow: 0 0 0 4px rgba(168, 124, 79, 0.12);
}
.form-control-lg, .form-select-lg { min-height: var(--tap-target-lg); font-size: 1.05rem; }
.form-label { font-weight: 500; color: var(--wd-ink); font-size: 0.92rem; margin-bottom: 0.4rem; }
.form-text { color: var(--wd-ink-3); }
.form-check-input:checked { background-color: var(--wd-saddle); border-color: var(--wd-saddle); }

/* Validation summaries are styled `alert alert-danger` but MVC still emits the
   element (marked `validation-summary-valid`) when there is nothing to report —
   jQuery unobtrusive needs it in the DOM to fill in later. Without this it
   paints as an empty red box on every clean form load. */
.validation-summary-valid { display: none; }

/* ---- 9. Badges -------------------------------------------------------- */

.badge { padding: 0.35em 0.65em; font-weight: 600; font-size: 0.72rem; letter-spacing: 0.04em; border-radius: 999px; }
.badge.bg-primary   { background: var(--wd-saddle) !important; color: var(--wd-bone); }
.badge.bg-success   { background: var(--wd-sage) !important; color: var(--wd-ink); }
.badge.bg-info      { background: var(--wd-dust) !important; color: var(--wd-wood); }
.badge.bg-warning   { background: var(--wd-gold) !important; color: var(--wd-ink); }
.badge.bg-danger    { background: var(--wd-barn) !important; color: var(--wd-bone); }
.badge.bg-secondary { background: var(--wd-dust) !important; color: var(--wd-wood); }
.badge.bg-light     { background: var(--wd-bone-2) !important; color: var(--wd-ink-2); border: 1px solid var(--bs-border-color); }
.badge.bg-dark      { background: var(--wd-ink) !important; color: var(--wd-bone); }

/* Bootstrap's .text-warning is #ffc107 — pale amber, and on our bone canvas it
   is close to invisible at the small sizes it gets used at ("Not captured",
   "Profile inactive", unsaved-change hints). Same message, at a contrast an
   admin can actually scan in a barn with the door open. */
.text-warning { color: #8A5E14 !important; }

/* ---- 9a. Data flags ---------------------------------------------------- */
/*
   A missing or stale VALUE inside a dense table, as opposed to a status the
   record genuinely has. Deliberately quieter than a .badge — those name what
   something IS (Active, Minor, Lead), these say the data isn't there yet — but
   still an outlined pill so a column of them lines up and scans in one pass.
*/
.wd-flag {
    display: inline-block;
    padding: 0.2em 0.6em;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    white-space: nowrap;
    background: rgba(201, 152, 70, 0.16);
    color: #7A5514;
    border: 1px solid rgba(201, 152, 70, 0.6);
}
.wd-flag-danger {
    background: rgba(156, 59, 46, 0.10);
    color: var(--wd-barn);
    border-color: rgba(156, 59, 46, 0.5);
}

/* ---- 10. Tables ------------------------------------------------------- */

.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--wd-ink);
    --bs-table-border-color: var(--bs-border-color);
    --bs-table-hover-bg: var(--wd-bone-2);
    color: var(--wd-ink);
    font-variant-numeric: tabular-nums;
}
.table thead.table-light {
    --bs-table-bg: var(--wd-bone-2);
    --bs-table-color: var(--wd-ink-2);
}
.table thead th {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--wd-ink-3);
    border-bottom: 1px solid var(--bs-border-color);
    padding: 0.85rem 0.65rem;
}
.table td { padding: 0.85rem 0.65rem; vertical-align: middle; }

/* ---- 10a. Customers roster -------------------------------------------- */
/*
   A scan-down-the-column table. Two things make that work:

   1. Cells top-align, so the first line of every column shares a baseline.
      The rule has to be stated here rather than left to Bootstrap's .align-top
      utility on the <table> — `.table td { vertical-align: middle }` above
      outranks it, since that utility never targets the cell.
   2. The badge-bearing columns are sized, not content-sized. A column whose
      width changes row to row is a column the eye can't run down.
*/
.wd-table-customers td { vertical-align: top; }

/* Just wide enough for the flag badge and no wider, so every "Minor" lands on
   the same x whatever the name beside it does. */
.wd-table-customers .wd-col-flags {
    width: 1%;
    white-space: nowrap;
    padding-left: 0.25rem;
}

/* Sized to hold "Invite to portal" on one line — the button used to wrap out
   of the actions cell, which is why it lives here now. */
.wd-table-customers .wd-col-portal { width: 12.5rem; }
.wd-table-customers .wd-btn-invite { white-space: nowrap; }

/* Shrink-to-fit: Details + Book, one line, never wrapped. */
.wd-table-customers .wd-col-actions { width: 1%; white-space: nowrap; }

/*
   Phone: the roster collapses to Name + Actions. Seven columns inside 380px is
   not a table, it's a wall — and the phone job here is "find them and open
   them", not "compare them across five fields". Everything hidden is one tap
   away on the record, including the portal invite (also on the Details tab).

   768px, so tablets — the barn device — keep the full roster.
*/
@media (max-width: 767.98px) {
    .wd-table-customers .wd-col-collapse { display: none; }

    /* Name gets the room the five hidden columns gave back, and the actions
       stay pinned right at a thumb-sized target. */
    .wd-table-customers td:first-child { width: auto; }
    .wd-table-customers .wd-col-actions .btn { min-height: var(--tap-target); }
}

/* ---- 11. Alerts ------------------------------------------------------- */

.alert { border-radius: var(--radius); border: 1px solid transparent; padding: 0.85rem 1rem; }
.alert-info     { background: var(--wd-bone-2); border-color: var(--wd-dust); color: var(--wd-ink); }
.alert-warning  { background: rgba(201, 152, 70, 0.12); border-color: var(--wd-gold); color: var(--wd-wood); }
.alert-success  { background: rgba(124, 132, 102, 0.15); border-color: var(--wd-sage); color: var(--wd-ink); }
.alert-danger   { background: rgba(156, 59, 46, 0.10); border-color: var(--wd-barn); color: var(--wd-barn); }
.alert-secondary{ background: var(--wd-bone-2); border-color: var(--bs-border-color); color: var(--wd-ink-2); }

/* ---- 12. Layouts ------------------------------------------------------ */

.wd-container { max-width: 1180px; margin-inline: auto; padding-inline: 1.25rem; }
.wd-container-narrow { max-width: 760px; margin-inline: auto; padding-inline: 1.25rem; }

@media (min-width: 768px) {
    .wd-container { padding-inline: 2rem; }
}

/* Footer */
.wd-footer {
    border-top: 1px solid var(--bs-border-color-translucent);
    background: var(--wd-bone);
    color: var(--wd-ink-3);
    padding: 2.5rem 0 3rem;
    margin-top: 4rem;
    font-size: 0.88rem;
}
.wd-footer a { color: var(--wd-ink-2); text-decoration: none; border-bottom: 1px dashed transparent; }
.wd-footer a:hover { color: var(--wd-ink); border-bottom-color: var(--wd-saddle); }

/* Mobiscroll palette overrides — pull its iOS theme into the WD palette. */
/* Mobiscroll paints the schedule grid (wrappers, headers, time column) from
   the --mbsc-eventcalendar-bg-color custom property, NOT the container's own
   background — the container is transparent, so a plain `background` override
   colors nothing the user sees. We must set the variable. The `body` prefix
   raises specificity above the theme's own `.mbsc-ios.mbsc-eventcalendar`
   declaration, which would otherwise win since mobiscroll's stylesheet loads
   after ours in the calendar view. */
body .mbsc-ios.mbsc-eventcalendar,
body .mbsc-ios.mbsc-drag-clone {
    --mbsc-eventcalendar-bg-color: var(--wd-paper);
}
.mbsc-ios.mbsc-eventcalendar { font-family: var(--font-body); background: var(--wd-paper); color: var(--wd-ink); }
.mbsc-ios.mbsc-schedule-time, .mbsc-ios.mbsc-schedule-time-cont { color: var(--wd-ink-3); }
.mbsc-ios.mbsc-schedule-event-inner { border-radius: var(--radius-sm); }
.mbsc-schedule-event.booking-makeup .mbsc-schedule-event-inner { border-style: dashed !important; border-width: 2px !important; }

/* Mobiscroll Popup overrides.

   The iOS theme resolves every popup surface through
   `var(--mbsc-ios-popup-bg-color, var(--mbsc-ios-surface-1))`, and the shipped
   bundle defines NEITHER token — so `.mbsc-popup-body`'s background resolved to
   an invalid value and popups rendered fully transparent. Anything behind them
   (calendar grid lines, event blocks) read straight through the text.

   Defining the surface token is the theme's own intended hook. It's the
   fallback for the popup, alert, select-filter and event-calendar input
   surfaces alike, so one definition fixes all of them. `--mbsc-ios-text` is
   undefined for the same reason and drives `--mbsc-popup-text-color`.

   The rule that used to live here targeted `.mbsc-popup .mbsc-popup-wrapper`,
   which never matched anything: the wrapper is the popup's full-screen
   ANCESTOR, not a descendant. (Just as well — had it matched, it would have
   painted a bone sheet over the entire viewport.) */
:root {
    --mbsc-ios-surface-1: var(--wd-bone-3);
    --mbsc-ios-text: var(--wd-ink);
}
.mbsc-popup .mbsc-popup-body { border-radius: var(--radius-lg); }
.mbsc-popup .mbsc-popup-header { font-family: var(--font-display); font-size: 1.15rem; color: var(--wd-ink); }
.mbsc-popup button.mbsc-button { font-family: var(--font-body); font-weight: 500; }

/* ---- 12b. Trainer filter chips ----------------------------------------
   Shared by the admin Calendar and the Scheduler: on both, the legend has to
   earn its space, so it IS the filter. Each chip carries the trainer's colour
   on its left edge, a checkbox tinted to match, and the name. `--chip` is set
   per chip from that trainer's calendar colour.

   Lives here rather than in either view because the two must stay identical —
   an admin who learns the control on one page has learned it on both. */
.trainer-chip {
    display: inline-flex; align-items: center; gap: 0.45rem;
    padding: 0.25rem 0.7rem 0.25rem 0.55rem;
    min-height: 36px;               /* thumb-sized: this gets used on tablets */
    border: 1px solid var(--bs-border-color);
    border-left: 4px solid var(--chip);
    border-radius: 999px;
    background: var(--wd-paper, #fff);
    cursor: pointer; user-select: none;
    font-size: 0.85rem; line-height: 1.2;
    transition: background .12s, opacity .12s, box-shadow .12s;
}
.trainer-chip:hover { background: var(--wd-bone-3, #f9f7f2); }
.trainer-chip:focus-within { box-shadow: 0 0 0 0.2rem rgba(168, 124, 79, 0.25); }
.trainer-chip input {
    accent-color: var(--chip);
    width: 1rem; height: 1rem; margin: 0; cursor: pointer;
}
/* Off reads as "put away", not as "broken": drained, but the colour stripe
   stays so the admin can still tell which trainer they're turning back on. */
.trainer-chip.off { opacity: 0.55; background: var(--wd-bone-2, #ece5d8); }
.trainer-chip.off .trainer-chip-name { color: var(--bs-secondary-color); }
.trainer-chip-name { font-weight: 500; }
.trainer-chip .trainer-chip-tag {
    font-size: 0.62rem; text-transform: uppercase; letter-spacing: .03em;
    color: var(--bs-secondary-color);
}

/* ---- 13. Marketing-specific ------------------------------------------- */

.wd-marketing { background: var(--wd-bone); }
.wd-marketing .wd-nav-marketing {
    padding: 1rem 0;
    background: rgba(245, 241, 234, 0.88);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--bs-border-color-translucent);
    position: sticky; top: 0; z-index: 50;
}
.wd-marketing .wd-nav-marketing a.nav-link {
    color: var(--wd-ink-2);
    font-size: 0.93rem;
    font-weight: 500;
    padding: 0.5rem 0.85rem;
}
.wd-marketing .wd-nav-marketing a.nav-link:hover { color: var(--wd-ink); }

/* Tier card per BRAND.md §4.7 + MARKETING_SITE_PLAN.md §6.5. */
.wd-tier {
    background: var(--wd-bone);
    border: 1px solid var(--wd-saddle);
    border-radius: var(--radius-lg);
    padding: 2rem 1.75rem;
    position: relative;
    display: flex; flex-direction: column;
    transition: transform 250ms ease-out, box-shadow 250ms ease-out;
    height: 100%;
}
.wd-tier:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.wd-tier .wd-tier-name {
    font-family: var(--font-body);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--wd-saddle-deep);
    margin-bottom: 0.75rem;
}
.wd-tier .wd-tier-price {
    font-family: var(--font-display);
    font-size: 3rem;
    font-variation-settings: "opsz" 96;
    line-height: 1;
    color: var(--wd-ink);
}
.wd-tier .wd-tier-price small { font-family: var(--font-body); font-size: 1rem; color: var(--wd-ink-3); font-weight: 500; }
.wd-tier .wd-tier-badge {
    position: absolute; top: 1rem; right: 1rem;
    font-size: 0.65rem; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--wd-wood); background: var(--wd-bone-2);
    padding: 0.25rem 0.55rem; border-radius: 999px; font-weight: 600;
}
.wd-tier ul { list-style: none; padding: 0; margin: 1.25rem 0; }
.wd-tier ul li { padding: 0.35rem 0; color: var(--wd-ink-2); font-size: 0.95rem; }
.wd-tier ul li::before { content: "·"; color: var(--wd-saddle); margin-right: 0.5rem; font-weight: 700; }

.wd-tier-coming {
    background: var(--wd-dust);
    border: 1px dashed var(--wd-wood);
    opacity: 0.78;
}
.wd-tier-coming:hover { opacity: 0.95; }
.wd-tier-coming .wd-tier-price { color: var(--wd-wood); }
.wd-tier-coming .wd-tier-badge { background: var(--wd-bone); color: var(--wd-wood); }

.wd-tier-premium {
    background: var(--wd-wood);
    border-color: var(--wd-gold);
    color: var(--wd-bone);
}
.wd-tier-premium .wd-tier-name { color: var(--wd-gold); }
.wd-tier-premium .wd-tier-price,
.wd-tier-premium ul li { color: var(--wd-bone); }
.wd-tier-premium .wd-tier-price small { color: rgba(245, 241, 234, 0.6); }
.wd-tier-premium ul li::before { color: var(--wd-gold); }
.wd-tier-premium .wd-tier-badge { background: var(--wd-bone); color: var(--wd-wood); }

/* ---- 14. Status pills + onboarding wizard ----------------------------- */

.wd-step {
    display: inline-flex; align-items: center; gap: 0.5rem;
    font-size: 0.78rem; font-weight: 600;
    letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--wd-ink-3);
    background: var(--wd-bone-2);
    padding: 0.4rem 0.85rem;
    border-radius: 999px;
    border: 1px solid var(--bs-border-color);
}
.wd-step .wd-step-num {
    display: inline-flex; width: 18px; height: 18px;
    background: var(--wd-ink); color: var(--wd-bone);
    border-radius: 50%;
    align-items: center; justify-content: center;
    font-size: 0.65rem; font-weight: 700; letter-spacing: 0;
}

/* ---- 15. Accessibility + responsive ----------------------------------- */

@media (max-width: 575px) {
    h1, .h1 { font-size: 2.1rem; }
    .wd-hero-title { font-size: 2.6rem; }
    .wd-container, .wd-container-narrow { padding-inline: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Focus rings */
:focus-visible {
    outline: 2px solid var(--wd-saddle);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}