/* mdtkd — neutral, professional theme built around the Moo Do Taekwondo
   Association mark (navy / red / gold on white). */

:root {
    --navy-900: #0f1a3d;
    --navy-700: #16255c;
    --navy-500: #2d3f7a;
    --navy-100: #e8ebf4;

    --gold-500: #e0a800;
    --gold-100: #fdf3d0;

    --red-600: #c8102e;
    --red-100: #fbe4e8;

    --gray-50: #f7f8fa;
    --gray-100: #eef0f4;
    --gray-200: #e2e5ea;
    --gray-400: #9aa1af;
    --gray-600: #5b6472;
    --gray-900: #1c2230;

    --radius: 8px;
    --shadow: 0 1px 3px rgba(15, 26, 61, 0.08), 0 1px 2px rgba(15, 26, 61, 0.06);
    --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* {
    box-sizing: border-box;
}

/* Recurring footgun in this app: any author rule that sets `display`
on a class (e.g. `.plan-form-row { display: grid }`) silently wins over
the `hidden` attribute's implicit `display: none` from the browser's
UA stylesheet, since author styles beat UA styles regardless of
selector specificity — the element stays visible even though `hidden`
is set. This single global rule makes `hidden` actually win everywhere,
so individual `.foo[hidden] { display: none }` patches (still present
below from before this existed) are no longer required for new markup. */
[hidden] {
    display: none !important;
}

html, body {
    margin: 0;
    padding: 0;
    max-width: 100%;
    overflow-x: hidden;
}

body {
    font-family: var(--font);
    background: var(--gray-50);
    color: var(--gray-900);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

h1 {
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0 0 1.25rem;
    color: var(--navy-900);
}

h2 {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--navy-900);
}

a {
    color: var(--navy-500);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* ---------- Pagination ----------
   Laravel's default paginator ships with utility-class-sized SVG
   chevrons. This app's deployed stylesheet is mostly custom CSS, so
   keep those controls explicitly sized instead of relying on utilities
   that may not be present on every page. */
nav[role="navigation"][aria-label="Pagination Navigation"] {
    margin-top: 0.75rem;
    font-size: 0.9rem;
    color: var(--gray-600);
}

nav[role="navigation"][aria-label="Pagination Navigation"] svg {
    width: 1rem;
    height: 1rem;
    max-width: 1rem;
    max-height: 1rem;
    display: inline-block;
    flex-shrink: 0;
}

nav[role="navigation"][aria-label="Pagination Navigation"] a,
nav[role="navigation"][aria-label="Pagination Navigation"] span {
    align-items: center;
    gap: 0.25rem;
}

.list-pagination-bar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 1rem;
    margin-top: 0.9rem;
    padding: 0.8rem 0.9rem;
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.list-pagination-summary {
    color: var(--gray-600);
    font-size: 0.88rem;
}

.list-pagination-pages {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
}

.list-pagination-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    height: 2rem;
    padding: 0 0.65rem;
    border: 1px solid var(--gray-200);
    border-radius: 6px;
    background: #fff;
    color: var(--navy-700);
    font-size: 0.86rem;
    font-weight: 600;
    line-height: 1;
}

.list-pagination-link:hover {
    background: var(--navy-100);
    text-decoration: none;
}

.list-pagination-link.active {
    background: var(--navy-700);
    border-color: var(--navy-700);
    color: #fff;
}

.list-pagination-link.disabled {
    background: var(--gray-50);
    color: var(--gray-400);
}

.list-pagination-ellipsis {
    color: var(--gray-400);
    font-size: 0.86rem;
    font-weight: 600;
    padding: 0 0.25rem;
}

.list-page-size-form {
    justify-self: end;
    margin: 0;
}

.list-page-size-form label {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0;
    color: var(--gray-600);
    font-size: 0.88rem;
}

.list-page-size-form select {
    width: auto;
    min-width: 4.5rem;
    padding: 0.35rem 1.8rem 0.35rem 0.55rem;
    font-size: 0.88rem;
}

@media (max-width: 720px) {
    .list-pagination-bar {
        grid-template-columns: 1fr;
        justify-items: start;
    }

    .list-pagination-pages {
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .list-page-size-form {
        justify-self: start;
    }
}

/* ---------- Top nav ---------- */

nav.topnav {
    background: var(--navy-900);
    padding: 0.6rem 1.5rem;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    row-gap: 0.4rem;
    column-gap: 1.25rem;
    min-height: 60px;
    box-shadow: var(--shadow);
}

nav.topnav .brand {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-right: 0.5rem;
    flex-shrink: 0;
}

nav.topnav .brand img {
    height: 36px;
    width: 36px;
}

nav.topnav .brand span {
    color: #fff;
    font-weight: 600;
    font-size: 0.95rem;
    letter-spacing: 0.01em;
}

nav.topnav a {
    color: #cfd6e8;
    font-size: 0.92rem;
    font-weight: 500;
    padding: 0.4rem 0;
    border-bottom: 2px solid transparent;
}

nav.topnav a:hover {
    color: #fff;
    text-decoration: none;
    border-bottom-color: var(--gold-500);
}

nav.topnav .spacer {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 1rem;
}

nav.topnav .user {
    color: #9aa4c0;
    font-size: 0.85rem;
}

nav.topnav form {
    margin: 0;
}

nav.topnav button {
    background: none;
    border: 1px solid #3a4a80;
    color: #cfd6e8;
    font: inherit;
    font-size: 0.85rem;
    padding: 0.35rem 0.75rem;
    border-radius: var(--radius);
    cursor: pointer;
}

nav.topnav button:hover {
    background: var(--navy-700);
    color: #fff;
}

/* ---------- Side nav (staff) ---------- */

:root {
    --sidenav-rail: 64px;
    --sidenav-expanded: 260px;
    --topbar-height: 56px;
}

.sidenav {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: var(--sidenav-rail);
    background: var(--navy-900);
    box-shadow: var(--shadow);
    z-index: 300;
    overflow-x: hidden;
    overflow-y: auto;
    transition: width 0.15s ease;
}

.sidenav.flyout-open,
.sidenav.locked {
    width: var(--sidenav-expanded);
}

.sidenav-inner {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    width: var(--sidenav-expanded);
}

.sidenav-brand {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 1rem 1rem;
    flex-shrink: 0;
}

.sidenav-brand img {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    object-fit: contain;
    border-radius: 4px;
}

.sidenav-brand-text {
    color: #fff;
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: 0.01em;
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.2;
    min-width: 0;
}

.sidenav-nav {
    flex: 1 1 auto;
    padding: 0.4rem 0;
}

.sidenav-item {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 0.65rem 1rem;
    color: #cfd6e8;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    list-style: none;
}

.sidenav-item::-webkit-details-marker {
    display: none;
}

.sidenav-item:hover {
    background: var(--navy-700);
    color: #fff;
    text-decoration: none;
}

.sidenav-flyout-toggle {
    width: 100%;
    background: transparent;
    border: 0;
}

.sidenav-icon-svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.sidenav-label {
    opacity: 0;
    transition: opacity 0.1s ease;
    overflow: hidden;
}

.sidenav.flyout-open .sidenav-label,
.sidenav.locked .sidenav-label {
    opacity: 1;
}

.sidenav-chevron {
    width: 16px;
    height: 16px;
    margin-left: auto;
    flex-shrink: 0;
    opacity: 0;
    transition: opacity 0.1s ease, transform 0.15s ease;
}

.sidenav.flyout-open .sidenav-chevron,
.sidenav.locked .sidenav-chevron {
    opacity: 1;
}

.sidenav-group[open] > summary .sidenav-chevron {
    transform: rotate(90deg);
}

.sidenav-submenu {
    display: flex;
    flex-direction: column;
    padding: 0.2rem 0 0.4rem;
}

.sidenav-subitem {
    padding: 0.5rem 1rem 0.5rem 3.3rem;
    color: #b6bfda;
    font-size: 0.86rem;
    white-space: nowrap;
    opacity: 0;
    overflow: hidden;
    transition: opacity 0.1s ease;
}

.sidenav.flyout-open .sidenav-subitem,
.sidenav.locked .sidenav-subitem {
    opacity: 1;
}

.sidenav-subitem:hover {
    background: var(--navy-700);
    color: #fff;
    text-decoration: none;
}

.sidenav-footer {
    flex-shrink: 0;
    border-top: 1px solid #263063;
    padding: 0.6rem 0;
}

.sidenav-user {
    display: block;
    padding: 0.5rem 1rem;
    text-decoration: none;
}

.sidenav-user:hover .sidenav-label {
    color: #fff;
}

.sidenav-user .sidenav-label {
    color: #9aa4c0;
    font-size: 0.8rem;
    display: block;
}

.sidenav-logout-form {
    margin: 0;
}

.sidenav-logout {
    width: 100%;
    background: none;
    border: none;
    font: inherit;
    text-align: left;
}

/* ---------- Layout ---------- */

body.has-sidenav main {
    margin-left: var(--sidenav-rail);
    margin-top: var(--topbar-height);
}

body.has-sidenav.menu-locked main {
    margin-left: var(--sidenav-expanded);
}

.topbar {
    /* Same navy as .sidenav — one continuous dark chrome bar across the
    top and left, instead of a white strip butting up against it. Every
    rule below this one flips its own text/icon/border colors to work
    against that dark background, mirroring the sidenav's own
    light-on-navy palette (#cfd6e8 muted text, navy-700 hover) rather
    than inventing a second dark-mode color set. */
    position: fixed;
    top: 0;
    left: var(--sidenav-rail);
    right: 0;
    height: var(--topbar-height);
    background: var(--navy-900);
    border-bottom: 1px solid var(--navy-700);
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0 1.25rem;
    z-index: 250;
    transition: left 0.15s ease;
}

.topbar-quicklinks {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-left: auto;
}

.topbar-quicklink {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: none;
    background: none;
    border-radius: 50%;
    color: #cfd6e8;
    cursor: pointer;
}

.topbar-quicklink:hover {
    background: var(--navy-700);
    color: #fff;
}

.topbar-quicklink-disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.topbar-quicklink-disabled:hover {
    background: none;
    color: #cfd6e8;
}

body.menu-locked .topbar {
    left: var(--sidenav-expanded);
}

.topbar-search {
    position: relative;
    width: 100%;
    max-width: 220px;
}

.topbar-search-icon {
    position: absolute;
    top: 50%;
    left: 0.6rem;
    transform: translateY(-50%);
    width: 15px;
    height: 15px;
    color: var(--gray-500);
    pointer-events: none;
}

.topbar-search input {
    width: 100%;
    margin: 0;
    padding: 0.45rem 0.75rem 0.45rem 2rem;
    background: #fff;
    border: 1px solid var(--navy-500);
    border-radius: var(--radius);
    font-size: 0.88rem;
}

.topbar-search-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 4px;
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    box-shadow: 0 4px 16px rgba(15, 26, 61, 0.15);
    z-index: 260;
    max-height: 320px;
    overflow-y: auto;
    overflow-x: hidden;
}

.topbar-search-result {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem 0.5rem;
    padding: 0.5rem 0.75rem;
    text-decoration: none;
    color: var(--gray-900);
    border-bottom: 1px solid var(--gray-100);
    overflow: hidden;
}

.topbar-search-result:last-child {
    border-bottom: none;
}

.topbar-search-result:hover {
    background: var(--gray-50);
}

.topbar-search-name {
    font-weight: 600;
}

.topbar-search-badge {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--gray-500);
    background: var(--gray-100);
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
}

.topbar-search-sub {
    font-size: 0.8rem;
    color: var(--gray-600);
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.topbar-search-empty {
    padding: 0.6rem 0.75rem;
    color: var(--gray-500);
    font-size: 0.85rem;
}

.topbar-user-trigger {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3rem 0.6rem;
    border-radius: var(--radius);
    color: #fff;
    white-space: nowrap;
}

.topbar-user-trigger:hover {
    background: var(--navy-700);
}

.topbar-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.topbar-avatar-initial {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--navy-500);
    color: #fff;
    font-weight: 600;
    font-size: 0.85rem;
}

.topbar-user-name {
    font-size: 0.88rem;
    font-weight: 500;
}

.topbar-user.row-actions-menu-wrap .row-actions-menu {
    top: calc(100% + 4px);
}

main {
    /* No explicit width here on purpose — a block element's default
    width:auto already fills whatever space is left after its
    margin-left (set by body.has-sidenav(.menu-locked) main above),
    which is what actually makes room for the sidenav. An explicit
    width:100% here was measured against the *containing block*
    (body), not the space left after that margin, so locking the menu
    open (margin-left: 260px) pushed main's right edge 260px past the
    viewport — invisibly, since html/body also has overflow-x:hidden,
    so it just silently clipped content instead of scrolling.

    The right padding used to scale with viewport width (5%) to avoid
    content stretching edge-to-edge on a wide monitor — on a genuinely
    wide screen that grew into a very noticeable unused strip once the
    overflow bug above stopped clipping it away, so it's a small fixed
    amount now instead, matching the left side. */
    padding: 2rem 2rem 4rem 1.5rem;
    box-sizing: border-box;
    transition: margin-left 0.15s ease;
}

/* ---------- Alerts ---------- */

.alert {
    padding: 0.75rem 1rem;
    border-radius: var(--radius);
    margin-bottom: 1.25rem;
    font-size: 0.92rem;
}

.alert-success {
    background: var(--gold-100);
    border: 1px solid #f0dda0;
    color: #6b5300;
}

.alert-error {
    background: var(--red-100);
    border: 1px solid #efc0c9;
    color: var(--red-600);
}

.alert-error ul {
    margin: 0;
    padding-left: 1.1rem;
}

/* ---------- Tables ---------- */

table {
    border-collapse: collapse;
    width: 100%;
    margin: 1rem 0 1.5rem;
    background: #fff;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
}

th, td {
    padding: 0.6rem 0.9rem;
    text-align: left;
    border-bottom: 1px solid var(--gray-200);
    font-size: 0.92rem;
}

th {
    background: var(--navy-100);
    color: var(--navy-900);
    font-weight: 600;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* ---------- Resizable table columns ---------- */
/* Opt-in via class="resizable-table" — table-layout: fixed makes
   column widths obey the <th> widths a drag sets (JS in the page that
   uses this, e.g. admin/tournaments/divisions/show.blade.php). */
.resizable-table {
    table-layout: fixed;
}
.resizable-table th {
    position: relative;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Cells deliberately keep wrapping instead of truncating — narrowing
   a column should never silently hide someone's actual data, just
   make their row taller. Only the (short, fixed-label) header text
   truncates. white-space/overflow-wrap set explicitly since
   table-layout: fixed alone doesn't force a cell to respect its own
   column width if content has nowhere natural to break. */
.resizable-table td {
    white-space: normal;
    overflow-wrap: break-word;
}
.resizable-table .col-resize-handle {
    position: absolute;
    top: 0;
    right: -5px;
    width: 10px;
    height: 100%;
    cursor: col-resize;
    z-index: 1;
    touch-action: none;
}
.resizable-table .col-resize-handle:hover,
.resizable-table .col-resize-handle.resizing {
    background: var(--navy-900, #16255c);
    opacity: 0.5;
}

/* ---------- Row actions (shared across every list/table) ---------- */

.row-actions {
    display: inline-flex;
    align-items: center;
}

.row-actions-inline {
    gap: 0.3rem;
}

.row-action-form {
    margin: 0;
    display: inline-flex;
}

/* Scoped under .row-actions (specificity 0,2,0) rather than
`.row-action-btn` alone (0,1,0) — needed to reliably beat the base
`button[type="submit"]` rule (0,1,1) elsewhere in this file, which
otherwise wins regardless of source order and leaves these looking
like full navy submit buttons instead of plain icon buttons. */
.row-actions .row-action-btn {
    display: inline-flex;
    align-items: center;
    border: none;
    background: none;
    cursor: pointer;
    color: var(--gray-600);
    text-decoration: none;
    padding: 0;
    font: inherit;
}

.row-actions .row-action-btn:hover {
    text-decoration: none;
}

.row-actions .row-action-btn-inline {
    width: 30px;
    height: 30px;
    justify-content: center;
    border-radius: 6px;
}

.row-actions .row-action-btn-inline:hover {
    background: var(--gray-100);
    color: var(--navy-900);
}

.row-action-icon-svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.row-actions .row-action-danger {
    color: var(--red-600);
}

.row-actions .row-action-danger.row-action-btn-inline:hover {
    background: var(--red-100);
    color: var(--red-600);
}

.row-actions-menu-wrap {
    position: relative;
}

.row-actions-trigger {
    border: none;
    background: none;
    cursor: pointer;
    padding: 0.3rem;
    border-radius: 6px;
    color: var(--gray-600);
    display: inline-flex;
}

.row-actions-trigger:hover {
    background: var(--gray-100);
    color: var(--navy-900);
}

.row-actions-menu {
    position: absolute;
    right: 0;
    top: 100%;
    margin-top: 4px;
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    box-shadow: 0 4px 16px rgba(15, 26, 61, 0.15);
    z-index: 50;
    min-width: 170px;
    display: flex;
    flex-direction: column;
    padding: 0.3rem;
}

.row-actions-menu .row-action-form {
    display: block;
    width: 100%;
}

.row-actions-menu .row-action-btn-menu {
    width: 100%;
    justify-content: flex-start;
    gap: 0.6rem;
    padding: 0.5rem 0.6rem;
    border-radius: 6px;
    font-size: 0.88rem;
    color: var(--gray-900);
}

.row-actions-menu .row-action-btn-menu:hover {
    background: var(--gray-100);
}

.row-actions-menu .row-action-danger:hover {
    background: var(--red-100);
}

tbody tr:hover {
    background: var(--gray-50);
}

tbody tr:last-child td {
    border-bottom: none;
}

/* ---------- Forms ---------- */

form {
    max-width: 480px;
}

/* Opt-out for a form with too much going on for the 480px default —
   multiple side-by-side fields, embedded tables, etc. Wide enough to
   make real use of a modern desktop without reading like a spreadsheet
   at the very large end. Same convention as .pos-wide below, just not
   POS-specific. */
form.wide-form {
    max-width: 1100px;
}

/* Multi-column field grouping for a .wide-form, same shape as
   .plan-form-row above but generic and auto-fitting instead of a fixed
   two columns — a row keeps adding columns as space allows, then folds
   back down to one per row on a narrow/phone screen instead of ever
   scrolling horizontally. */
.form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0 1.5rem;
}

/* A row of self-contained cards (e.g. one pricing tier per card) rather
   than plain fields — same collapse behavior as .form-row. */
.card-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.5rem;
}

.card-row > div {
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    padding: 1rem;
}

.card-row h3 {
    margin-top: 0;
}

@media (max-width: 700px) {
    .form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .card-row {
        grid-template-columns: 1fr;
    }
}

/* Minimal rich-text editor (bold/italic/underline/highlight/lists/link)
   for fields shown formatted on a public page, e.g. a tournament's
   description — see TournamentController::sanitizeDescription() for
   what's actually allowed through server-side regardless of what the
   toolbar produces. */
.rte-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin: 0.3rem 0 0.4rem;
}

.rte-toolbar button {
    padding: 0.3rem 0.6rem;
    font-size: 0.85rem;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    background: #fff;
    color: var(--gray-900);
    cursor: pointer;
}

.rte-toolbar button:hover {
    background: var(--gray-50);
}

.rte-editor {
    max-width: none;
    min-height: 8rem;
    padding: 0.5rem 0.65rem;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    background: #fff;
}

.rte-editor:focus {
    outline: 2px solid var(--navy-500);
    outline-offset: -1px;
}

.rte-editor ul,
.rte-editor ol {
    margin: 0 0 0.5rem;
    padding-left: 1.4rem;
}

.rte-editor mark {
    background: #fef08a;
    padding: 0 0.15em;
    border-radius: 2px;
}

form.search-form {
    display: flex;
    gap: 0.5rem;
    max-width: 400px;
    margin-bottom: 1rem;
}

form.search-form input {
    flex: 1;
}

label {
    display: block;
    margin-bottom: 1rem;
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--gray-600);
}

fieldset label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 400;
    color: var(--gray-900);
    margin-bottom: 0.4rem;
}

input, select, textarea {
    display: block;
    width: 100%;
    margin-top: 0.3rem;
    padding: 0.5rem 0.65rem;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    font: inherit;
    font-size: 0.92rem;
    color: var(--gray-900);
    background: #fff;
}

input[type="checkbox"],
input[type="radio"] {
    /* Without this, the global `input { display: block; width: 100% }`
    rule stretches a checkbox/radio to the full row width — harmless for
    a checkbox (the glyph itself stays a fixed size, just left-aligned),
    but several browsers center a stretched radio's dot within that
    full-width box, making it float away from its own label text.
    `display: block` also forces any text after it inside the same
    <label> onto its own line below the box — inline-block keeps
    "[ ] Active" on one line the way a checkbox label should read. */
    display: inline-block;
    width: auto;
    margin-top: 0;
    vertical-align: middle;
}

label.check {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--navy-500);
    box-shadow: 0 0 0 3px var(--navy-100);
}

fieldset {
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    padding: 0.9rem 1rem;
    margin-bottom: 1.25rem;
    max-width: 480px;
}

legend {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--navy-700);
    padding: 0 0.3rem;
}

/* ---------- Belt taxonomy — drag-to-reorder list ---------- */

.belt-row {
    display: grid;
    grid-template-columns: 24px minmax(12rem, 1fr) auto auto 2.5rem;
    gap: 0.9rem;
    align-items: center;
    background: #fff;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 0.55rem 0.75rem;
    margin-bottom: 0.5rem;
}

.belt-row.dragging {
    opacity: 0.4;
}

.belt-drag-handle {
    cursor: grab;
    color: var(--gray-400);
    text-align: center;
    user-select: none;
}

.belt-row input[type="text"] {
    margin-top: 0;
}

.belt-row .check {
    margin-bottom: 0;
    white-space: nowrap;
    font-size: 0.88rem;
}

/* A checkbox list of belt names in a division rank band — wraps into
   columns instead of one tall column, since a full belt taxonomy runs
   two dozen entries. */
fieldset.belt-check-list {
    max-width: 640px;
}

fieldset.belt-check-list .belt-check-list-cols {
    columns: 220px 2;
    column-gap: 1.25rem;
}

fieldset.belt-check-list .belt-check-list-cols label {
    break-inside: avoid;
}

/* ---------- Buttons ---------- */

button[type="submit"] {
    background: var(--navy-700);
    color: #fff;
    border: none;
    padding: 0.6rem 1.3rem;
    border-radius: var(--radius);
    font: inherit;
    font-size: 0.92rem;
    font-weight: 600;
    cursor: pointer;
}

button[type="submit"]:hover {
    background: var(--navy-900);
}

form.search-form button[type="submit"] {
    background: var(--navy-100);
    color: var(--navy-700);
    border: 1px solid #d3d9ec;
    font-weight: 500;
}

form.search-form button[type="submit"]:hover {
    background: #dbe1f2;
}

/* ---------- Login page ---------- */

.login-card {
    max-width: 360px;
    margin: 4rem auto 0;
    background: #fff;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 2.5rem 2rem;
    text-align: center;
}

.login-logo {
    width: 64px;
    height: 64px;
    margin-bottom: 1rem;
}

.login-card h1 {
    font-size: 1.2rem;
    margin-bottom: 1.5rem;
}

.login-card form {
    max-width: none;
    text-align: left;
}

.login-card button[type="submit"] {
    width: 100%;
    margin-top: 0.5rem;
}

/* ---------- Public content forms (registration/checkout/intake pages) ----------
   Same card language as .login-card, but that one is hard-capped at
   360px for actual login screens — far too narrow for a form with a
   dozen fields on a wide desktop monitor. This variant stays a
   readable single column but isn't squeezed into a login-sized box. */
.public-brand-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    max-width: 640px;
    margin: 2.5rem auto 0;
    text-align: center;
}

.public-brand-header img {
    max-height: 64px;
    max-width: 200px;
    object-fit: contain;
}

.public-brand-header span {
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--navy-900);
}

.public-brand-header + .public-form-card {
    margin-top: 1.5rem;
}

.public-form-card {
    max-width: 640px;
    margin: 3rem auto;
    background: #fff;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 2.5rem 2rem;
}

/* ---------- Public SMS legal pages ---------- */
.sms-legal-body {
    background: #f5f7fb;
    color: var(--navy-900);
}

.sms-legal-page {
    max-width: 860px;
    margin: 0 auto;
    padding: 2.5rem 1rem;
}

.sms-legal-header {
    padding: 2rem;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    background: #fff;
    box-shadow: var(--shadow);
}

.sms-legal-kicker {
    margin: 0 0 0.5rem;
    color: var(--navy-500);
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
}

.sms-legal-header h1 {
    margin-top: 0;
    font-size: 2rem;
    line-height: 1.15;
}

.sms-legal-page section,
.sms-legal-footer {
    margin-top: 1rem;
    padding: 1.35rem 1.5rem;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    background: #fff;
}

.sms-legal-page h2 {
    margin-top: 0;
    font-size: 1.15rem;
}

.sms-legal-page p {
    line-height: 1.65;
}

.sms-legal-page address {
    font-style: normal;
    line-height: 1.7;
}

.sms-legal-disclosure {
    border-color: var(--navy-500);
    background: var(--navy-100);
}

.sms-legal-footer {
    color: var(--gray-700);
    font-size: 0.92rem;
}

.public-form-card form {
    max-width: none;
}

@media (max-width: 700px) {
    .public-form-card {
        margin: 1rem;
        padding: 1.5rem 1.25rem;
    }

    .sms-legal-page {
        padding: 1rem;
    }

    .sms-legal-header,
    .sms-legal-page section,
    .sms-legal-footer {
        padding: 1rem;
    }

    .sms-legal-header h1 {
        font-size: 1.55rem;
    }
}

/* Tournament registration: wider two-column layout — the form on the
   left, a sticky image/description/running-cost summary on the right.
   .order:-1 on the summary is what makes it jump above the form once
   the columns collapse to one on a phone (source order otherwise puts
   the form, filled in first, ahead of it). */
.public-form-card.tournament-card {
    max-width: 1080px;
}

.tournament-layout {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 2.5rem;
    align-items: start;
}

.tournament-summary {
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    padding: 1.25rem;
    position: sticky;
    top: 1.5rem;
}

.tournament-banner {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: var(--radius);
    margin-bottom: 1.25rem;
}

.tournament-description {
    margin-bottom: 1rem;
}

.tournament-description :first-child {
    margin-top: 0;
}

.tournament-description :last-child {
    margin-bottom: 0;
}

.tournament-description ul,
.tournament-description ol {
    margin: 0 0 0.75rem;
    padding-left: 1.4rem;
}

.tournament-description mark {
    background: #fef08a;
    padding: 0 0.15em;
    border-radius: 2px;
}

.tournament-cart {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--gray-200);
}

.tournament-cart h3 {
    margin: 0 0 0.5rem;
    font-size: 0.95rem;
}

.cart-line {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin: 0 0 0.35rem;
    font-size: 0.9rem;
}

.cart-total {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 0.6rem;
    padding-top: 0.6rem;
    border-top: 1px solid var(--gray-200);
    font-weight: 600;
    font-size: 1.05rem;
}

.cart-line-header {
    margin-top: 0.6rem;
}

.cart-line-header:first-child {
    margin-top: 0;
}

/* One card per child on the "register multiple kids" form — a visual
   break between registrants so it's obvious where one ends and the next
   begins, not just another long run of fields. */
.registrant-block {
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    padding: 1.25rem;
    margin-bottom: 1.5rem;
}

.registrant-block-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.registrant-block-header h2 {
    margin: 0;
}

.matched-banner {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: -0.6rem 0 1rem;
    padding: 0.5rem 0.75rem;
    background: var(--navy-100);
    border-radius: var(--radius);
    font-size: 0.85rem;
    color: var(--navy-700);
}

.team-name-helper {
    margin: -0.35rem 0 0.85rem;
    padding: 0.75rem 0.85rem;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    background: var(--gray-50);
    color: var(--gray-700);
    font-size: 0.9rem;
}

.team-name-helper label {
    margin-bottom: 0.45rem;
}

.team-name-helper p {
    margin: 0;
}

.team-name-helper-locked {
    border-color: var(--gold-500);
    background: var(--gold-100);
    color: #725300;
}

.credit-offer {
    margin: -0.6rem 0 1rem;
    padding: 0.75rem;
    background: var(--gold-100);
    border-radius: var(--radius);
}

.credit-offer label {
    margin-bottom: 0;
}

.membership-needed-notice {
    margin: -0.6rem 0 1rem;
    padding: 0.75rem;
    background: var(--red-100);
    border-radius: var(--radius);
    color: var(--red-600);
    font-size: 0.9rem;
}

@media (max-width: 860px) {
    .tournament-layout {
        grid-template-columns: 1fr;
    }

    .tournament-summary {
        position: static;
        order: -1;
    }
}

/* ---------- Dashboard stat rows ---------- */

.stats-line {
    color: var(--gray-600);
    font-size: 0.95rem;
    margin-bottom: 1.25rem;
}

.quick-links {
    list-style: none;
    padding: 0;
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin: 0 0 1.5rem;
}

.quick-links li a {
    display: inline-block;
    background: var(--navy-100);
    border: 1px solid #d3d9ec;
    border-radius: var(--radius);
    padding: 0.5rem 1rem;
    font-weight: 500;
    color: var(--navy-700);
    box-shadow: var(--shadow);
}

.quick-links li a:hover {
    border-color: var(--navy-500);
    text-decoration: none;
}

/* ---------- Members index ---------- */

.members-index {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 1.5rem;
    align-items: start;
}

.members-filter-col {
    min-width: 0;
}

@media (max-width: 860px) {
    .members-index {
        grid-template-columns: 1fr;
    }
}

.list-result-count {
    margin: 0 0 0.75rem;
    font-weight: 600;
    color: var(--navy-900);
}

.members-toolbar {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
}

.members-toolbar .search-form {
    margin-bottom: 0;
}

.button-link {
    display: inline-block;
    /* A plain white fill on a white page background reads as almost
    invisible — a light navy tint gives it enough presence to read as
    a button without being a loud, attention-grabbing color. */
    background: var(--navy-100);
    border: 1px solid #d3d9ec;
    border-radius: var(--radius);
    padding: 0.5rem 1rem;
    font-weight: 500;
    color: var(--navy-700);
    box-shadow: var(--shadow);
    white-space: nowrap;
}

.button-link:hover {
    background: #dbe1f2;
    border-color: var(--navy-500);
    text-decoration: none;
}

/* ---------- Membership template form (side-by-side panels) ---------- */

.plan-form {
    max-width: 900px;
}

.plan-form-panel {
    background: #fff;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1.5rem;
    margin-bottom: 1.25rem;
}

.plan-form-panel h2 {
    margin-top: 0;
}

.plan-form-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}

.plan-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
}

.plan-form-indent {
    margin: -0.5rem 0 0.75rem 1.6rem;
}

.plan-form-subhead {
    margin: 0 0 0.75rem;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--navy-900);
}

.plan-form-inline {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.plan-form-billing-type {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin-bottom: 1rem;
}

.plan-form-rate {
    width: 4.5rem;
}

@media (max-width: 720px) {
    .plan-form-columns,
    .plan-form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .plan-form-indent {
        margin-left: 1.6rem;
    }
}

/* ---------- Calendar ---------- */

.cal-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.cal-view-tabs {
    display: flex;
    background: var(--gray-100);
    border-radius: var(--radius);
    padding: 0.2rem;
}

.cal-view-tab {
    padding: 0.4rem 0.9rem;
    border-radius: 6px;
    font-weight: 500;
    font-size: 0.88rem;
    color: var(--gray-600);
}

.cal-view-tab:hover {
    text-decoration: none;
}

.cal-view-tab.active {
    background: #fff;
    color: var(--navy-900);
    box-shadow: var(--shadow);
}

.cal-nav {
    display: flex;
    gap: 0.5rem;
}

.cal-range-label {
    margin: 0;
    flex-basis: 100%;
    order: 3;
}

.cal-weekday-row {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
    margin-bottom: 6px;
}

.cal-weekday {
    text-align: center;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--gray-600);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
}

.cal-cell {
    display: flex;
    flex-direction: column;
    gap: 3px;
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    padding: 0.5rem;
    min-height: 90px;
    color: inherit;
    overflow: hidden;
}

.cal-grid.cal-week .cal-cell {
    min-height: 220px;
}

.cal-cell:hover {
    border-color: var(--navy-500);
    text-decoration: none;
    box-shadow: var(--shadow);
}

.cal-cell.is-outside {
    background: var(--gray-50);
    color: var(--gray-400);
}

.cal-cell.is-today .cal-daynum {
    background: var(--navy-900);
    color: #fff;
    border-radius: 50%;
}

.cal-daynum {
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.82rem;
    font-weight: 600;
    color: inherit;
    text-decoration: none;
}

.cal-cell.cal-quick-add-trigger {
    cursor: pointer;
}

.cal-item {
    display: block;
    font-size: 0.75rem;
    padding: 1px 5px;
    border-radius: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cal-item-appt {
    background: var(--navy-100);
    color: var(--navy-700);
}

.cal-item-task {
    background: var(--gold-100);
    color: #7a5c00;
}

.cal-item-class {
    background: #e6f4ea;
    color: #1e6b3a;
}

.cal-item-event {
    background: #f3e8fd;
    color: #6b21a8;
}

.cal-item-closed {
    background: #fde8e8;
    color: #9b1c1c;
}


.cal-closed-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    background: #fde8e8;
    color: #9b1c1c;
    border: 1px solid #f4b6b6;
    border-radius: var(--radius);
    padding: 0.6rem 0.9rem;
    margin-bottom: 1rem;
    font-weight: 600;
}

.cal-more {
    font-size: 0.72rem;
    color: var(--gray-600);
}

.cal-day-list h3 {
    margin: 1.25rem 0 0.5rem;
}

.cal-day-list h3:first-child {
    margin-top: 0;
}

.cal-item-appt.cal-item,
.cal-item-task.cal-item,
.cal-item-class.cal-item,
.cal-item-event.cal-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    white-space: normal;
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    padding: 0.6rem 0.75rem;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
}

.cal-day-list .cal-item-time {
    font-weight: 600;
    color: var(--navy-700);
    flex-shrink: 0;
}

.cal-day-list .cal-item-title {
    font-weight: 500;
}

.cal-day-list .cal-item-sub {
    color: var(--gray-600);
    font-size: 0.85rem;
}

.cal-day-list form {
    margin-left: auto;
}

.member-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 0.75rem;
}

.member-card {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: #fff;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 0.75rem;
    color: inherit;
}

.member-card:hover {
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(15, 26, 61, 0.15);
}

.member-card-avatar {
    position: relative;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
}

.member-card-avatar img {
    /* border-radius on the image itself (not overflow:hidden on the
    parent) so the status dot — deliberately positioned just outside
    the circle's edge — doesn't get clipped along with it. */
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.member-card-status-dot {
    position: absolute;
    bottom: -1px;
    right: -1px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    border: 2px solid #fff;
    background: var(--gray-400);
}

.member-card-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.member-card-name {
    font-weight: 600;
    color: var(--navy-900);
}

.member-card-meta {
    font-size: 0.8rem;
    color: var(--gray-600);
}

.members-filter-col form {
    background: #fff;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1rem;
    max-width: none;
    margin-bottom: 1rem;
}

/* ---------- Accordion filter panel (Members/Leads/Contacts, Memberships) ---------- */

.filter-panel {
    background: #fff;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
}

.filter-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem 1rem;
    background: var(--navy-100);
    font-weight: 600;
    color: var(--navy-900);
    font-size: 0.9rem;
}

.filter-panel-header a {
    font-size: 0.82rem;
    font-weight: 500;
}

.filter-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--gold-500);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    margin-left: 0.3rem;
}

.filter-panel form {
    padding: 0.25rem 0;
    margin-bottom: 0;
}

.filter-section {
    border-bottom: 1px solid var(--gray-200);
}

.filter-section:last-of-type {
    border-bottom: none;
}

.filter-section summary {
    padding: 0.7rem 1rem;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--navy-900);
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.filter-section summary::-webkit-details-marker {
    display: none;
}

.filter-section summary::after {
    content: '';
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--gray-400);
    border-bottom: 2px solid var(--gray-400);
    transform: rotate(45deg);
    transition: transform 0.15s ease;
    flex-shrink: 0;
}

.filter-section[open] summary::after {
    transform: rotate(-135deg);
}

.filter-section summary:hover {
    background: var(--gray-50);
}

.filter-section-body {
    padding: 0.2rem 1rem 0.8rem;
    display: flex;
    flex-direction: column;
}

.filter-check {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 400;
    color: var(--gray-900);
    font-size: 0.86rem;
    padding: 0.3rem 0;
    margin-bottom: 0;
    cursor: pointer;
}

/* A checkmark that appears when checked, no visible box otherwise —
matches every other filter list in the app, not a native square. */
.filter-check input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    margin: 0;
    flex-shrink: 0;
    position: relative;
    cursor: pointer;
}

.filter-check input[type="checkbox"]::after {
    content: '\2713';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    color: var(--gold-500);
    opacity: 0;
}

.filter-check input[type="checkbox"]:checked::after {
    opacity: 1;
}

.filter-program-block {
    margin-bottom: 0.4rem;
}

.filter-indent {
    margin-left: 1.5rem;
    display: flex;
    flex-direction: column;
    border-left: 2px solid var(--gray-100);
    padding-left: 0.6rem;
}

.filter-check-all {
    font-weight: 600;
    color: var(--navy-900);
    padding-bottom: 0.5rem;
    margin-bottom: 0.3rem;
    border-bottom: 1px solid var(--gray-200);
}

/* ---------- Member profile ---------- */

.member-profile {
    display: grid;
    grid-template-columns: minmax(340px, 400px) 1fr;
    gap: 1.5rem;
    align-items: start;
}

@media (max-width: 700px) {
    .member-profile {
        grid-template-columns: 1fr;
    }
}

.member-hero {
    grid-column: 1 / -1;
    background: linear-gradient(135deg, var(--navy-900), var(--navy-700));
    color: #fff;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1.5rem;
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
}

.member-hero-avatar {
    /* Sized to roughly match the hero card's own base height (its
    padding-box height before any content wraps to extra lines) rather
    than a small icon-sized circle floating in a much taller card. */
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    border: 3px solid rgba(255, 255, 255, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.6rem;
    font-weight: 600;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    margin: 0;
}

.member-hero-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.member-hero-avatar input[type="file"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    margin: 0;
}

.member-hero-info {
    /* Without an explicit flex-basis, this ends up sized from its
    content's min-content — and once a descendant (the hero name's h1)
    sets min-width:0 to allow wrapping, there's no width signal left
    propagating back up, so the whole info column can collapse to a
    sliver even though the hero card itself has plenty of room. */
    flex: 1 1 auto;
    min-width: 0;
}

.member-hero-info h1 {
    color: #fff;
    margin: 0 0 0.5rem;
    font-size: 1.15rem;
}

.member-hero-badges {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    margin-bottom: 0.6rem;
}

.member-hero-badges .badge {
    font-size: 0.62rem;
    padding: 0.15rem 0.5rem;
}

.badge {
    display: inline-block;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #fff;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.badge-green { background: rgba(26, 122, 94, 0.5); }
.badge-gold { background: rgba(224, 168, 0, 0.4); }
.badge-purple { background: rgba(122, 45, 107, 0.5); }

.member-hero-contact {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-top: 0.4rem;
}

.member-hero-contact a {
    display: inline-flex;
    align-items: center;
    color: #cfd6e8;
    line-height: 1;
    text-decoration: none;
}

.member-hero-contact a:hover {
    color: #fff;
}

/* ---------- Hero-hosted editable fields (dark background) ---------- */

.member-hero-info .editable-field,
.member-hero-info .ef-row,
.status-pill-row {
    grid-template-columns: 60px 1fr;
    border-bottom: none;
    padding: 0.1rem 0;
    font-size: 0.85rem;
}

.status-pill-row {
    display: grid;
    align-items: center;
    margin-bottom: 0.6rem;
}

.member-hero-info .ef-label {
    color: rgba(255, 255, 255, 0.6);
}

.member-hero-info .ef-display {
    color: #fff;
}

.member-hero-info .editable-field[data-empty="1"] .ef-display {
    color: rgba(255, 255, 255, 0.4);
}

.member-hero-info .ef-edit-trigger {
    color: rgba(255, 255, 255, 0.75);
}

.member-hero-info .ef-value:hover .ef-display {
    border-bottom-color: rgba(255, 255, 255, 0.3);
}

.member-hero-info .ef-edit-wrap .ef-input {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.35);
    color: #fff;
}

.member-hero-info .ef-edit-wrap .ef-input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.member-hero-info .ef-save { color: #fff; }
.member-hero-info .ef-cancel { color: rgba(255, 255, 255, 0.7); }

/* Custom dropdown, not a native <select> — a native select can't show
a colored dot per option, can't have generous per-row padding without
looking broken on some platforms, and can't flip its own arrow when
open. This trades that native behavior for full control matching the
Spark reference. */

.status-pill {
    position: relative;
    display: inline-block;
}

.status-pill-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 999px;
    padding: 0.2rem 0.7rem;
    line-height: 1;
    color: #fff;
    font-size: 0.78rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
}

.status-pill-trigger:focus {
    outline: none;
}

.status-pill-trigger:focus-visible {
    border-color: rgba(255, 255, 255, 0.6);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.15);
}

.status-pill-chevron {
    flex-shrink: 0;
    transition: transform 0.15s ease;
}

.status-pill.open .status-pill-chevron {
    transform: rotate(180deg);
}

.status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--gray-400);
    flex-shrink: 0;
}

.status-pill-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 20;
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    box-shadow: 0 8px 24px rgba(15, 26, 61, 0.18);
    padding: 0.35rem;
    min-width: 130px;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.status-pill-menu[hidden] {
    display: none;
}

.status-pill-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: none;
    border: none;
    border-radius: 6px;
    padding: 0.45rem 0.6rem;
    font: inherit;
    font-size: 0.85rem;
    color: var(--navy-900);
    text-align: left;
    cursor: pointer;
}

.status-pill-option:hover {
    background: var(--gray-50);
}

.status-pill-option:focus-visible {
    outline: 2px solid var(--navy-500);
    outline-offset: -2px;
}

.status-pill-option .status-dot-active { background: #1a7a5e; }
.status-pill-option .status-dot-inactive { background: var(--red-600); }
.status-pill-option .status-dot-prospect { background: var(--gold-500); }

/* Specificity note: this element also carries .editable-field, whose
own `display: grid` rule sits later in this file and would otherwise
win on file order alone (same 0,1,0 specificity) — .editable-field
here targets both classes together (0,2,0) so it reliably wins
regardless of where either rule is declared. */
.editable-field.ef-hero-name {
    display: block;
    margin-bottom: 0.35rem;
}

.ef-hero-name .ef-value {
    align-items: baseline;
    /* The block-level .ef-hero-name parent (unlike the grid rows
    elsewhere) doesn't shrink a flex child to its content on its own —
    without this the hover/click-to-edit zone would cover the full hero
    width instead of just the name text. */
    display: inline-flex;
    width: auto;
}

.ef-hero-name h1.ef-display {
    margin: 0;
    border-bottom-color: transparent;
    /* The general .ef-display rule uses overflow-wrap: anywhere so a
    single unbroken long string (an email address) still wraps instead
    of overflowing — but for a heading made of normal words ("Lee
    Family"), that same rule breaks mid-word the moment the column is
    even slightly narrow. Headings should wrap at word boundaries first
    and only fall back to a mid-word break if a single word truly can't
    fit at all. */
    overflow-wrap: break-word;
    word-break: normal;
}

.ef-hero-name .ef-value:hover h1.ef-display {
    border-bottom-color: rgba(255, 255, 255, 0.3);
}

.ef-input-wide {
    min-width: 220px;
}

.member-hero-actions {
    margin-left: auto;
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.member-hero-actions a, .member-hero-actions button {
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #fff;
    padding: 0.5rem 0.9rem;
    border-radius: var(--radius);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
}

.member-hero-actions a:hover, .member-hero-actions button:hover {
    background: rgba(255, 255, 255, 0.22);
    text-decoration: none;
}

.member-sidebar {
    background: #fff;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1.25rem;
}

.member-sidebar form {
    max-width: none;
}

.member-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--navy-500);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.member-sidebar details {
    border-top: 1px solid var(--gray-200);
    padding: 0.75rem 0;
}

.member-sidebar summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--navy-900);
    font-size: 0.92rem;
}

.appt-task-header-row {
    display: flex;
    justify-content: flex-end;
    margin: 0.5rem 0 0.75rem;
}

.appt-task-subsection {
    border-top: 1px solid var(--gray-100, #eef0f4);
    padding: 0.5rem 0;
}

.appt-task-subsection summary {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--gray-600);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    cursor: pointer;
}

.appt-task-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1.25rem 0;
    color: var(--gray-400, #b7bcc6);
    text-align: center;
}

.appt-task-empty p {
    margin: 0;
    font-size: 0.85rem;
}

.member-fields {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.editable-field, .ef-row {
    display: grid;
    grid-template-columns: 100px 1fr;
    align-items: start;
    gap: 0.75rem;
    font-size: 0.88rem;
    padding: 0.55rem 0;
    border-bottom: 1px solid var(--gray-100, #eef0f3);
}

.member-fields > .editable-field:last-child, .member-fields > .ef-row:last-child {
    border-bottom: none;
}

.ef-label {
    color: var(--gray-600);
    font-weight: 600;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding-top: 0.15rem;
}

.ef-value {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem;
    min-width: 0;
    /* Sized to its own content (text + pencil), not stretched to fill the
    grid column — otherwise the hover/click-to-edit affordance below
    covers the whole row width instead of just the text itself. */
    justify-self: start;
    max-width: 100%;
}

.ef-display {
    color: var(--navy-900);
    cursor: pointer;
    border-bottom: 1px dashed transparent;
    line-height: 1.4;
    overflow-wrap: anywhere;
    /* Not flex: 1 1 auto — that stretched this to fill the row, pushing
    the edit pencil far past the actual text instead of right after it. */
    flex: 0 1 auto;
    min-width: 0;
}

.editable-field[data-empty="1"] .ef-display {
    color: var(--gray-400, #b7bcc6);
}

.ef-address-display {
    display: flex;
    flex-direction: column;
}

.ef-address-line {
    display: block;
}

.tags-value-stack {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
}

.tags-pill-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.tag-pill {
    display: inline-block;
    background: var(--navy-100);
    color: var(--navy-900);
    border-radius: 999px;
    padding: 0.2rem 0.65rem;
    font-size: 0.76rem;
    font-weight: 600;
}

.tags-actions {
    display: flex;
    gap: 0.75rem;
}

/* Tags modal — chips for the currently-selected tags, a search box, and
   a scrollable click-to-toggle list below (selected ones highlighted). */
.tags-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    min-height: 1.5rem;
    margin-bottom: 0.75rem;
}

.tags-chip {
    display: inline-flex;
    align-items: center;
    background: var(--navy-100);
    color: var(--navy-900);
    border-radius: 999px;
    padding: 0.2rem 0.3rem 0.2rem 0.7rem;
    font-size: 0.8rem;
    font-weight: 600;
}

.tags-chip-remove {
    border: none;
    background: none;
    color: var(--navy-900);
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    padding: 0 0.35rem;
}

.tags-picker-list {
    max-height: 260px;
    overflow-y: auto;
    border: 1px solid var(--gray-200, #e2e5ea);
    border-radius: var(--radius);
}

.tags-picker-item {
    padding: 0.5rem 0.85rem;
    cursor: pointer;
    font-size: 0.88rem;
}

.tags-picker-item:hover {
    background: var(--gray-50, #f7f8fa);
}

.tags-picker-item.selected {
    background: var(--navy-100);
    font-weight: 600;
}

/* Hover feedback (underline + pencil) is scoped to .ef-value, not the
whole .editable-field row, so it only activates when the cursor is on or
near the text itself — matching what's actually clickable. */
.ef-value:hover .ef-display {
    border-bottom-color: var(--gray-200);
}

.ef-edit-trigger {
    display: none;
    cursor: pointer;
    color: var(--gray-600);
    font-size: 0.8rem;
    margin-left: 0.35rem;
}

/* :not([hidden]) matters here, not just cosmetic — without it, this
hover rule's higher specificity (two classes) beats the plain
`.ef-edit-trigger[hidden] { display: none }` rule below, so the pencil
would flash back into view on hover even while its field is open for
editing. */
.ef-value:hover .ef-edit-trigger:not([hidden]) {
    display: inline;
}

.ef-edit-wrap {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
}

.ef-edit-wrap[hidden], .ef-display[hidden], .ef-edit-trigger[hidden] {
    display: none;
}

.ef-edit-wrap-stacked {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
}

.ef-edit-wrap-stacked .ef-input {
    width: 100%;
}

.ef-edit-wrap .ef-input {
    font: inherit;
    padding: 0.3rem 0.5rem;
    border: 1px solid var(--navy-500);
    border-radius: var(--radius);
}

.ef-save, .ef-cancel {
    border: none;
    background: none;
    cursor: pointer;
    font-size: 0.95rem;
    padding: 0.15rem 0.3rem;
    line-height: 1;
}

.ef-save { color: var(--navy-700); }
.ef-cancel { color: var(--gray-600); }

.ef-row .ef-label {
    padding-top: 0;
}

.ef-toggle {
    border: none;
    background: var(--gray-200);
    border-radius: 999px;
    width: 42px;
    height: 24px;
    padding: 3px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
}

.ef-toggle-track {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 2px rgba(15, 26, 61, 0.25);
    transition: transform 0.15s ease;
}

.ef-toggle.on {
    background: var(--navy-700);
}

.ef-toggle.on .ef-toggle-track {
    transform: translateX(18px);
}

/* Smaller than .ef-toggle on purpose — this one sits directly beside
the 0.88rem status text (ef-row's own font-size) rather than a bare
label, so matching .ef-toggle's larger size made it look oversized next
to that text. .sms-toggle is also a real <button type="submit"> (it has
to actually submit its form, unlike .ef-toggle's type="button"/AJAX
pattern) — that collides with the base button[type="submit"] rule
elsewhere in this file (specificity 0,1,1), which otherwise wins
regardless of the .on/.pending modifier below and leaves it looking
like a plain navy submit button. Scoped under .ef-row (0,2,0) to
reliably beat it, same fix already established for .row-action-btn
above for the identical reason. */
.ef-row .sms-toggle {
    border: none;
    background: var(--gray-200);
    border-radius: 999px;
    width: 32px;
    height: 18px;
    padding: 3px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

.sms-toggle-track {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 2px rgba(15, 26, 61, 0.25);
    transition: transform 0.15s ease;
}

.ef-row .sms-toggle.on {
    background: var(--navy-700);
}

.sms-toggle.on .sms-toggle-track {
    transform: translateX(14px);
}

/* A verbal consent still mid-flight (staff asked, waiting on a YES
reply) isn't "on" yet — a distinct amber rather than the full navy
"on" or plain gray "off", so it doesn't read as either. */
.ef-row .sms-toggle.pending {
    background: var(--gold-500, #d4a017);
}

.member-main {
    min-width: 0;
}

.member-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 1.25rem;
}

.member-tabs button {
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    padding: 0.45rem 0.85rem;
    font: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--gray-600);
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.member-tabs button.active {
    background: var(--navy-700);
    color: #fff;
    border-color: var(--navy-700);
}

.member-panel {
    background: #fff;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1.25rem;
    margin-bottom: 1.5rem;
}

.member-panel form {
    max-width: none;
}

.member-panel .inline-form {
    display: flex;
    gap: 0.5rem;
    align-items: flex-end;
    flex-wrap: wrap;
    max-width: none;
}

.member-panel .inline-form label {
    margin-bottom: 0;
    flex: 1;
    min-width: 140px;
}

/* ---------- Family tabs ---------- */

.family-tabs {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.family-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: 999px;
    padding: 0.35rem 0.9rem 0.35rem 0.35rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--navy-700);
    box-shadow: var(--shadow);
}

.family-tab:hover {
    border-color: var(--navy-500);
    text-decoration: none;
}

.family-tab.active {
    background: var(--navy-900);
    color: #fff;
    border-color: var(--navy-900);
}

.family-tab-avatar {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--navy-500);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 700;
    flex-shrink: 0;
}

.family-tab.active .family-tab-avatar {
    background: rgba(255, 255, 255, 0.25);
}

.family-tab-household {
    background: var(--gold-100);
    border-color: var(--gold-500);
    color: #8a6400;
    padding: 0.35rem 0.9rem;
}

.family-tab-add {
    padding: 0.35rem 0.7rem;
    color: var(--gray-600);
    font-size: 1rem;
    line-height: 1;
}

/* ---------- Family Members panel (household profile page) ---------- */

.family-member-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--gray-100, #eef0f4);
}

.family-member-row:last-of-type {
    border-bottom: none;
}

.family-member-name {
    font-weight: 600;
    color: var(--navy-900);
    flex: 1;
}

.family-head-star {
    border: none;
    background: none;
    cursor: pointer;
    font-size: 1rem;
    color: var(--gray-200);
    line-height: 1;
}

.family-head-star.is-head {
    color: var(--gold-500);
}

.status-pill-light .status-pill-trigger {
    background: var(--gray-50);
    border-color: var(--gray-200);
    color: var(--navy-900);
}

.status-pill-light .status-pill-trigger:focus-visible {
    border-color: var(--navy-500);
    box-shadow: 0 0 0 2px rgba(45, 63, 122, 0.15);
}

/* ---------- Add to Family modal ---------- */

.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 26, 61, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
}

.modal-backdrop[hidden] {
    display: none;
}

.modal {
    background: #fff;
    border-radius: var(--radius);
    box-shadow: 0 8px 30px rgba(15, 26, 61, 0.3);
    width: 100%;
    max-width: 480px;
    max-height: 90vh;
    overflow-y: auto;
    padding: 1.25rem;
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.modal-header h3 {
    margin: 0;
}

.modal-close {
    border: none;
    background: none;
    cursor: pointer;
    font-size: 1rem;
    color: var(--gray-600);
}

.modal-tabs {
    display: flex;
    gap: 0.4rem;
    margin-bottom: 1rem;
}

.modal-tab {
    flex: 1;
    border: 1px solid var(--gray-200);
    background: var(--gray-50);
    border-radius: var(--radius);
    padding: 0.5rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--gray-600);
    cursor: pointer;
}

.modal-tab.active {
    background: var(--navy-900);
    color: #fff;
    border-color: var(--navy-900);
}

.modal-tab-panel[hidden] {
    display: none;
}

.modal-tab-panel label,
.modal-tab-panel select,
.modal-tab-panel input:not([type="checkbox"]):not([type="radio"]) {
    width: 100%;
}

.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 1rem;
}

.referral-link-copy-row {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.referral-link-copy-row input {
    flex: 1;
    min-width: 0;
}

.referral-link-copy-row button {
    flex-shrink: 0;
}

.match-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0.25rem;
    border-bottom: 1px solid var(--gray-200);
    cursor: pointer;
}

.match-row:last-child {
    border-bottom: none;
}

.btn-primary {
    background: var(--navy-900);
    color: #fff;
    border: 1px solid var(--navy-900);
    border-radius: var(--radius);
    padding: 0.5rem 1.1rem;
    font-weight: 600;
    cursor: pointer;
}

.btn-primary:hover {
    background: var(--navy-700);
}

/* ---------- Page title + corner action (e.g. Tournaments -> Tournament Settings) ---------- */

.page-title-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.page-title-row h1 {
    margin-bottom: 0;
}

/* ---------- Tournament sub-nav (Registrations / Divisions / Statistics) ---------- */

.tournament-subnav {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--gray-200);
}

.tournament-subnav-link {
    display: inline-block;
    padding: 0.6rem 0.1rem;
    margin-bottom: -1px;
    font-weight: 500;
    font-size: 0.92rem;
    text-decoration: none;
    white-space: nowrap;
    color: var(--gray-600);
    border-bottom: 2px solid transparent;
}

.tournament-subnav-link:hover {
    color: var(--navy-900);
    text-decoration: none;
}

.tournament-subnav-link.active {
    color: var(--navy-900);
    font-weight: 600;
    border-bottom-color: var(--navy-900);
}

/* The "Tournament Settings" dropdown trigger is a <button>, not an
   <a> — reset it back to plain text so it looks identical to the
   other tabs beside it. */
.tournament-subnav-settings {
    margin-bottom: -1px;
}

.tournament-subnav-settings-trigger {
    border: none;
    background: none;
    cursor: pointer;
    font: inherit;
}

.tournament-subnav-settings .row-actions-menu {
    top: calc(100% + 1px);
}

/* Two stacked bracket-type selects in one Event Settings cell. */
.bracket-pair {
    display: grid;
    gap: 0.35rem;
    min-width: 12rem;
}

.bracket-pair label {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--gray-600);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.bracket-pair select {
    margin-top: 0.15rem;
}

/* ---------- Division schedule — per-ring timeline ---------- */

.schedule-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    margin: 0 0 1.25rem;
    font-size: 0.9rem;
    color: var(--gray-600);
}

.schedule-summary strong {
    color: var(--navy-900);
}

.schedule-board {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    padding-bottom: 0.5rem;
    align-items: flex-start;
}

.schedule-ring {
    flex: 1 0 220px;
    max-width: 340px;
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    padding: 0.6rem;
}

.schedule-ring-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-weight: 600;
    color: var(--navy-900);
    margin-bottom: 0.5rem;
}

.schedule-ring-head span {
    font-weight: 400;
    font-size: 0.82rem;
    color: var(--gray-600);
}

.schedule-ring.drop-target {
    outline: 2px dashed var(--navy-500);
    outline-offset: 2px;
}

.schedule-ring-slots {
    min-height: 3rem;
}

.schedule-ring-empty {
    font-size: 0.82rem;
    color: var(--gray-400);
    text-align: center;
    padding: 0.75rem 0;
    border: 1px dashed var(--gray-200);
    border-radius: 6px;
}

.schedule-slot {
    background: #fff;
    border: 1px solid var(--gray-200);
    border-left: 3px solid var(--navy-500);
    border-radius: 6px;
    padding: 0.5rem 0.6rem;
    margin-bottom: 0.4rem;
    cursor: grab;
}

.schedule-slot.dragging {
    opacity: 0.4;
}

.schedule-slot:last-child {
    margin-bottom: 0;
}

.schedule-slot-pin {
    font-size: 0.74rem;
    color: var(--gray-600);
    margin-top: 0.2rem;
}

.schedule-unscheduled.drop-target {
    outline: 2px dashed var(--navy-500);
    outline-offset: 4px;
}

.schedule-unscheduled tr[draggable] {
    cursor: grab;
}

.schedule-slot.conflict {
    border-color: #f1c4cd;
    border-left-color: var(--red-600);
    background: var(--red-100);
}

.schedule-slot.understaffed {
    border-color: #e6cf8f;
    border-left-color: var(--gold-500);
    background: var(--gold-100);
}

.schedule-slot-understaffed {
    font-size: 0.78rem;
    color: #8a6d1a;
    margin-top: 0.2rem;
}

.schedule-slot.pinned {
    border-left-style: double;
    border-left-width: 4px;
}

.schedule-slot-time {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--gray-600);
    letter-spacing: 0.02em;
}

.schedule-slot-name {
    font-size: 0.9rem;
    color: var(--navy-900);
    margin: 0.1rem 0;
}

.schedule-slot-meta {
    font-size: 0.78rem;
    color: var(--gray-600);
}

.schedule-slot-conflict {
    font-size: 0.78rem;
    color: var(--red-600);
    margin-top: 0.2rem;
}

.schedule-conflicts {
    border: 1px solid #f1c4cd;
    background: var(--red-100);
    border-radius: var(--radius);
    padding: 0.9rem 1rem;
    margin: 0 0 1.5rem;
}

.schedule-conflicts h3 {
    margin: 0 0 0.5rem;
    font-size: 0.95rem;
    color: var(--red-600);
}

details.schedule-conflicts > summary {
    cursor: pointer;
    list-style: none;
}

details.schedule-conflicts > summary::-webkit-details-marker {
    display: none;
}

details.schedule-conflicts > summary h3 {
    display: inline;
    margin: 0;
}

details.schedule-conflicts > summary::before {
    content: '▸ ';
    color: var(--red-600);
}

details.schedule-conflicts[open] > summary::before {
    content: '▾ ';
}

details.schedule-conflicts[open] > summary h3 {
    display: inline-block;
    margin: 0 0 0.5rem;
}

.schedule-coverage {
    border: 1px solid #e6cf8f;
    background: var(--gold-100);
    border-radius: var(--radius);
    padding: 0.9rem 1rem;
    margin: 0 0 1.5rem;
}

.schedule-coverage h3 {
    margin: 0 0 0.5rem;
    font-size: 0.95rem;
    color: #8a6d1a;
}

.schedule-coverage .schedule-conflict-row {
    border-bottom-color: #e6cf8f;
}

.schedule-conflict-row {
    font-size: 0.86rem;
    padding: 0.35rem 0;
    border-bottom: 1px solid #f1c4cd;
}

.schedule-conflict-row:last-child {
    border-bottom: none;
}

.schedule-conflict-row strong {
    color: var(--navy-900);
}

.schedule-unscheduled {
    margin-top: 1.5rem;
}

.schedule-order {
    margin: 1rem 0 1.5rem;
    max-width: 620px;
}

.schedule-order summary {
    cursor: pointer;
}

.schedule-order-row {
    display: grid;
    grid-template-columns: 24px 1fr auto;
    gap: 0.75rem;
    align-items: center;
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: 6px;
    padding: 0.45rem 0.6rem;
    margin-bottom: 0.35rem;
}

.schedule-order-row.dragging {
    opacity: 0.4;
}

.schedule-order-name {
    font-size: 0.88rem;
    color: var(--navy-900);
}

.schedule-order-bits {
    display: block;
    font-size: 0.74rem;
    color: var(--gray-600);
}

.schedule-order-min {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--gray-600);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin: 0;
}

.schedule-order-min input {
    width: 4rem;
    margin-top: 0;
}

#event-order-rows {
    max-width: 480px;
    margin-bottom: 1rem;
}

.schedule-order-event {
    font-size: 0.78rem;
    color: var(--gray-600);
}

/* ---------- Division Bands — master/detail list + edit drawer ---------- */

/* A real list, not a wide multi-column table — one line per band, so
   even a 150+ row weight preset reads as something scannable instead
   of a spreadsheet dumped on the page. Editing happens in the drawer
   below, not inline in the row. */
.band-list {
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    background: #fff;
    overflow: hidden;
    box-shadow: var(--shadow);
}

.band-list-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.4rem 0.9rem;
    border-bottom: 1px solid var(--gray-200);
}

.band-list-row:last-child {
    border-bottom: none;
}

.band-list-row:hover {
    background: var(--gray-50);
}

.band-list-main {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1;
    min-width: 0;
    padding: 0.2rem 0;
    text-decoration: none;
    color: inherit;
}

/* Whole-row links (this, .brackets-list-item) wrap several distinct
   pieces of text (a name, a school, a badge...) inside ONE <a> — the
   global a:hover underline then underlines all of it at once, which
   reads as if every piece were its own separate link. These rows are
   never meant to show underline at all, hover or not. */
.band-list-main:hover {
    text-decoration: none;
}

.band-list-label {
    font-weight: 600;
    color: var(--navy-900);
    white-space: nowrap;
}

.band-list-detail {
    color: var(--gray-600);
    font-size: 0.85rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}

.band-list-source {
    color: var(--gray-400);
    font-size: 0.78rem;
    white-space: nowrap;
}

.band-list-actions {
    flex-shrink: 0;
}

.band-list-empty {
    padding: 1rem 0.9rem;
    color: var(--gray-600);
    font-size: 0.9rem;
}

/* The edit/add drawer — a real side panel, not another inline form
   wedged into the page. Pure CSS: each drawer is a normal block until
   its id matches the URL fragment (:target), then it slides over from
   the right. No JS needed to open/close one. */
.band-drawer {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(420px, 100vw);
    background: #fff;
    box-shadow: -4px 0 24px rgba(15, 26, 61, 0.18);
    padding: 1.5rem;
    overflow-y: auto;
    z-index: 200;
}

.band-drawer:target {
    display: block;
    animation: band-drawer-in 0.15s ease-out;
}

@keyframes band-drawer-in {
    from { transform: translateX(24px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

.band-drawer h3 {
    margin-top: 0;
}

.band-drawer label {
    display: block;
    margin-bottom: 0.9rem;
    font-size: 0.85rem;
    color: var(--gray-600);
}

.band-drawer label input[type="text"],
.band-drawer label input[type="number"],
.band-drawer label select {
    display: block;
    width: 100%;
    margin-top: 0.3rem;
    padding: 0.5rem 0.6rem;
    border: 1px solid var(--gray-200);
    border-radius: 6px;
    font: inherit;
}

.band-drawer-close {
    position: absolute;
    top: 1.2rem;
    right: 1.2rem;
    color: var(--gray-600);
    text-decoration: none;
    font-size: 1.3rem;
    line-height: 1;
}

.band-drawer-close:hover {
    color: var(--navy-900);
}

.band-list-search {
    width: 100%;
    max-width: 320px;
    padding: 0.5rem 0.8rem;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    font: inherit;
    margin-bottom: 0.75rem;
}

/* ---------- Division rosters — fixed columns so every division's
   table lines up with every other one on the page, instead of each
   auto-sizing to its own content independently. ---------- */
.roster-table {
    table-layout: fixed;
    width: 100%;
}

.roster-table col.col-name { width: 22%; }
.roster-table col.col-rank { width: 12%; }
.roster-table col.col-dob { width: 12%; }
.roster-table col.col-sex { width: 8%; }
.roster-table col.col-weight { width: 8%; }
.roster-table col.col-school { width: 20%; }
.roster-table col.col-move { width: 18%; }

.roster-table td {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.roster-move-form {
    display: flex;
    gap: 0.4rem;
    align-items: center;
}

.roster-move-form select {
    max-width: 100%;
    font-size: 0.82rem;
}

/* ---------- Competitors list (competitors/index.blade.php) — reuses
   the same .band-list row shell as Division Bands, with a taller
   stacked row (name/detail above, badges below) instead of a single
   line. ---------- */
.competitor-row {
    align-items: flex-start;
    padding: 0.6rem 0.9rem;
}

/* Same gold-stripe treatment as .brackets-list-item.needs-attention-row
   (All Brackets sidebar) — a competitor with no opponent (or genuinely
   unassigned) should be just as easy to spot from this screen. */
.band-list-row.needs-attention-row {
    background: rgba(253, 243, 208, 0.32);
    border-left: 3px solid var(--gold-500);
    padding-left: calc(0.9rem - 3px);
}

.competitor-main {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
}

.competitor-name-block {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.competitor-name-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
}

.competitor-card-status {
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

.competitor-card-status-printed {
    color: var(--gray-500);
}

.competitor-card-status-unprinted {
    color: #8a6400;
}

.competitor-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.competitor-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: var(--navy-100);
    color: var(--navy-700);
    border-radius: 999px;
    padding: 0.2rem 0.65rem;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

.competitor-badge em {
    font-style: normal;
    opacity: 0.65;
}

.competitor-badge-attention {
    background: var(--gold-100);
    color: #8a6400;
}

.competitor-badge-no-opponent {
    background: #e8bd35;
    color: #4a3500;
}

.competitor-badge-muted {
    background: var(--gray-100);
    color: var(--gray-600);
}

/* ---------- All Brackets (divisions/show.blade.php) — a sidebar of
   every division next to a viewer for the one selected. ---------- */
.brackets-layout {
    display: flex;
    gap: 1.25rem;
    align-items: flex-start;
}

.brackets-sidebar {
    /* 300px default, overridden by JS from a saved width (see the
       show.blade.php script) — the drag handle sets this same
       variable live while resizing. */
    width: var(--brackets-sidebar-width, 300px);
    flex-shrink: 0;
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
}

.brackets-resize-handle {
    flex-shrink: 0;
    /* .brackets-layout uses align-items: flex-start (so a short
       sidebar doesn't get stretched into a tall empty box) — that
       also left this handle, which has no content of its own to give
       it height, collapsed to 0px tall. align-self overrides that for
       just this one item so it actually spans the row's full height,
       instead of being an unhoverable 10px x 0px sliver. */
    align-self: stretch;
    width: 10px;
    margin: 0 -0.5rem;
    cursor: col-resize;
    position: relative;
    touch-action: none;
    z-index: 1;
}

.brackets-resize-handle::after {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: 2px;
    height: 100%;
    transform: translateX(-50%);
    background: var(--gray-200);
}

.brackets-resize-handle:hover::after,
.brackets-resize-handle.resizing::after {
    background: var(--navy-900);
}

.brackets-sidebar-header {
    padding: 0.9rem;
    border-bottom: 1px solid var(--gray-200);
}

.brackets-sidebar-header .stats-line { margin: 0.4rem 0 0; }

.brackets-search {
    width: 100%;
    padding: 0.5rem 0.7rem;
    border: none;
    border-bottom: 1px solid var(--gray-200);
    font: inherit;
    font-size: 0.85rem;
}

.brackets-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    padding: 0.6rem 0.9rem;
    border-bottom: 1px solid var(--gray-200);
}

.brackets-tab {
    border: 1px solid var(--gray-200);
    background: none;
    border-radius: 999px;
    padding: 0.2rem 0.65rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--gray-600);
    cursor: pointer;
}

.brackets-tab.active {
    background: var(--navy-900);
    border-color: var(--navy-900);
    color: #fff;
}

.brackets-list {
    max-height: 70vh;
    overflow-y: auto;
}

.brackets-list-item {
    display: block;
    padding: 0.6rem 0.9rem;
    border-bottom: 1px solid var(--gray-100);
    text-decoration: none;
    color: inherit;
}

.brackets-list-item:hover {
    background: var(--gray-50);
    text-decoration: none;
}

.brackets-list-item.active {
    background: var(--navy-100);
    border-left: 3px solid var(--navy-900);
    padding-left: calc(0.9rem - 3px);
}

.brackets-list-item-name {
    display: block;
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--navy-900);
}

.brackets-list-item-meta {
    display: block;
    font-size: 0.75rem;
    color: var(--gray-600);
    margin-top: 0.1rem;
}

.brackets-list-item-meta .needs-attention {
    color: #8a6400;
    font-weight: 600;
}

/* A 1-competitor division ("no opponent") is easy to miss buried in a
   long list of otherwise-normal rows — flag the whole row, not just
   its meta text, with a tinted background + left stripe (same as an
   active row's stripe, gold instead of navy) and a small dot next to
   the name. */
.brackets-list-item.needs-attention-row {
    background: var(--gold-100);
    border-left: 3px solid var(--gold-500);
    padding-left: calc(0.9rem - 3px);
}

.brackets-list-item.needs-attention-row.active {
    background: var(--navy-100);
    border-left-color: var(--navy-900);
}

.needs-attention-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--gold-500);
    margin-right: 0.3rem;
    vertical-align: middle;
}

.brackets-main {
    flex: 1;
    min-width: 0;
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1.25rem;
    overflow-x: auto;
}

.brackets-main-empty {
    color: var(--gray-600);
    padding: 2rem 0;
    text-align: center;
}

.brackets-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--gray-200);
}

.brackets-toolbar form {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.brackets-tree-section {
    margin-bottom: 1.5rem;
}

.brackets-tree-section h4 {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--gray-600);
    margin: 0 0 0.5rem;
}

.seed-order-panel {
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    background: var(--gray-50);
    padding: 0.8rem;
    margin-bottom: 1rem;
}

.seed-order-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.6rem;
}

.seed-order-heading h3 {
    font-size: 0.95rem;
    margin: 0;
}

.seed-order-status {
    min-width: 5.5rem;
    text-align: right;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--gray-600);
}

.seed-order-status[data-state="saved"] { color: var(--navy-700); }
.seed-order-status[data-state="error"] { color: var(--red-600); }

.seed-order-list {
    display: grid;
    gap: 0.35rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

.seed-order-row {
    display: grid;
    grid-template-columns: 1.2rem 2rem minmax(10rem, 1fr) minmax(8rem, 0.7fr);
    gap: 0.6rem;
    align-items: center;
    min-height: 2.4rem;
    padding: 0.45rem 0.65rem;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    background: #fff;
    box-shadow: 0 1px 2px rgba(15, 26, 61, 0.04);
    cursor: grab;
}

.seed-order-row.dragging {
    opacity: 0.55;
    cursor: grabbing;
}

.seed-order-grip {
    color: var(--gray-400);
    font-size: 0.85rem;
    letter-spacing: -0.08em;
    overflow: hidden;
}

.seed-order-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 999px;
    background: var(--navy-100);
    color: var(--navy-900);
    font-size: 0.75rem;
    font-weight: 700;
}

.seed-order-name {
    font-weight: 700;
    color: var(--navy-900);
    min-width: 0;
    overflow-wrap: anywhere;
}

.seed-order-school {
    color: var(--gray-600);
    font-size: 0.8rem;
    min-width: 0;
    overflow-wrap: anywhere;
}

@media (max-width: 760px) {
    .seed-order-row {
        grid-template-columns: 1.2rem 2rem minmax(0, 1fr);
    }

    .seed-order-school {
        grid-column: 3;
    }
}

/* ---------- Edit Competitor — a centered modal (same pure-CSS
   :target mechanism as .band-drawer, just centered with a backdrop
   instead of sliding in from the side). ---------- */
.competitor-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 300;
    background: rgba(15, 26, 61, 0.55);
    align-items: flex-start;
    justify-content: center;
    padding: 1.25rem 1rem;
    overflow-y: auto;
}

.competitor-modal:target {
    display: flex;
}

/* Deliberately tighter than the rest of the app's forms (0.88rem
   base font, ~0.35rem row spacing instead of the default 1rem) —
   this modal packs a lot of fields and needs to fit a normal laptop
   screen (~900px tall) without scrolling the whole page underneath
   its own internal scroll. */
.competitor-modal-box {
    background: #fff;
    border-radius: var(--radius);
    box-shadow: 0 8px 32px rgba(15, 26, 61, 0.35);
    max-width: 620px;
    width: 100%;
    max-height: calc(100vh - 2.5rem);
    overflow-y: auto;
    padding: 1.1rem 1.5rem;
    position: relative;
    font-size: 0.88rem;
}

.competitor-modal-box h3 {
    margin-top: 0;
    margin-bottom: 0.2rem;
}

.competitor-modal-box label {
    margin-bottom: 0.4rem;
    font-size: 0.82rem;
}

.competitor-modal-box label input,
.competitor-modal-box label select {
    margin-top: 0.15rem;
    padding: 0.35rem 0.5rem;
}

.competitor-modal-section {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--gray-600);
    font-weight: 700;
    margin: 0.6rem 0 0.4rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--gray-200);
}

.competitor-modal-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

.competitor-modal-events {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.15rem 1rem;
}

.competitor-modal-note {
    background: var(--navy-100);
    border: 1px solid #d3d9ec;
    border-radius: var(--radius);
    padding: 0.5rem 0.7rem;
    font-size: 0.78rem;
    color: var(--navy-900);
    margin: 0.4rem 0 0.6rem;
}

.competitor-modal-note label {
    font-size: inherit;
}

.competitor-modal-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.6rem;
    padding-top: 0.6rem;
    border-top: 1px solid var(--gray-200);
}

/* ---------- Status colors (configurable, not tied to a fixed name) ---------- */

.status-color-green { background: #3ecf8e; }
.status-color-red { background: #ff6b6b; }
.status-color-gold { background: var(--gold-500); }
.status-color-blue { background: #4a90d9; }
.status-color-purple { background: #9b6dd6; }
.status-color-gray { background: var(--gray-400); }

/* ---------- Settings ---------- */

.settings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1rem;
    margin-top: 1.5rem;
}

.settings-card {
    display: block;
    background: #fff;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1.25rem;
    color: inherit;
}

.settings-card:hover {
    box-shadow: 0 2px 8px rgba(15, 26, 61, 0.15);
    text-decoration: none;
}

.settings-card h3 {
    margin: 0 0 0.4rem;
    color: var(--navy-900);
}

.settings-card p {
    margin: 0;
    color: var(--gray-600);
    font-size: 0.85rem;
}

.standings-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
    align-items: start;
    margin-top: 1rem;
}

@media (max-width: 1000px) {
    .standings-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .standings-grid {
        grid-template-columns: 1fr;
    }
}

.standings-card {
    min-width: 0;
    background: #fff;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 0.9rem 1rem 1rem;
}

.standings-card h2 {
    margin: 0 0 0.5rem;
    font-size: 0.95rem;
    color: var(--navy-900);
}

.standings-card .table-scroll {
    overflow-x: auto;
}

.standings-card table {
    width: 100%;
    margin: 0;
    font-size: 0.8rem;
}

.standings-card th,
.standings-card td {
    padding: 0.3rem 0.45rem;
    white-space: nowrap;
}

.standings-card td:nth-child(2),
.standings-card td:nth-child(4) {
    max-width: 9rem;
    overflow: hidden;
    text-overflow: ellipsis;
}

.standings-card th:first-child,
.standings-card td:first-child,
.standings-card th:nth-child(3),
.standings-card td:nth-child(3),
.standings-card th:last-child,
.standings-card td:last-child {
    text-align: center;
    color: var(--gray-600);
}

.standings-card td:last-child {
    font-weight: 600;
    color: var(--navy-900);
}

.settings-options-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.settings-options-panel {
    background: #fff;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1.25rem;
}

.settings-options-panel h2 {
    margin: 0 0 0.25rem;
}

.settings-option-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--gray-100, #eef0f4);
}

.settings-option-name {
    flex: 1;
    color: var(--navy-900);
}

/* Standard: any destructive/delete icon button is red at rest (not
just on hover) — matches .row-action-danger, the pattern already used
by every list's row-actions menu. */
.settings-option-remove {
    border: none;
    background: none;
    color: var(--red-600);
    cursor: pointer;
    font-size: 0.85rem;
    border-radius: 6px;
    padding: 2px;
}

.settings-option-remove:hover {
    background: var(--red-100);
}

button.link-button-danger {
    border: none;
    background: none;
    padding: 0;
    font: inherit;
    font-size: 0.92rem;
    color: var(--red-600);
    cursor: pointer;
    text-decoration: underline;
}

button.link-button-danger:hover {
    background: none;
    color: #8f0c22;
}

.settings-option-form {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
    flex-wrap: wrap;
    max-width: none;
}

.settings-option-form input[type="text"],
.settings-option-form select {
    flex: 1;
    min-width: 120px;
}

/* ---------- Program detail + rank configuration ---------- */

.program-show-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.program-stats-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    margin: 1rem 0 1.5rem;
}

.program-stat-card {
    background: #fff;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1rem;
}

.program-stat-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--gray-600);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 0.4rem;
}

.program-stat-value {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--navy-900);
}

.program-stat-breakdown {
    display: flex;
    gap: 0.75rem;
    margin-top: 0.3rem;
    font-size: 0.8rem;
    color: var(--gray-600);
}

.program-stat-breakdown .stat-active { color: #2e7d32; }
.program-stat-breakdown .stat-frozen { color: #1565c0; }
.program-stat-breakdown .stat-inactive { color: var(--gray-400); }

.program-stat-list-row {
    padding: 0.3rem 0;
    border-bottom: 1px solid var(--gray-100);
    font-size: 0.9rem;
}

.program-stat-list-row:last-child { border-bottom: none; }

.program-ranks-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 1rem;
}

.rank-summary-table { width: 100%; }

.rank-graphic {
    display: inline-flex;
    align-items: center;
}

.rank-graphic-bar {
    position: relative;
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    gap: 1px;
    width: 72px;
    height: 20px;
    border-radius: 3px;
    border: 1px solid rgba(15, 26, 61, 0.15);
    overflow: hidden;
}

.rank-graphic-stripe {
    width: 6px;
    align-self: stretch;
    flex-shrink: 0;
}

/* The optional second color renders as a horizontal band splitting
   the belt top/bottom, not a vertical edge line — matches how a
   real two-tone belt reads. */
.rank-graphic-band {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 30%;
}

/* An optional third color rendered as a thin stripe centered
vertically — independent of .rank-graphic-band's bottom band, so a
belt can carry a base color, a bottom band, and a middle stripe all
at once without them overlapping. */
.rank-graphic-band-mid {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 20%;
}

.rank-graphic-insignia-group {
    position: relative;
    display: flex;
    align-items: stretch;
    gap: 1px;
    z-index: 1;
}

.rank-graphic-insignia-group-2 {
    margin-left: 3px;
}

.rank-graphic-mark {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.62rem;
    font-weight: 700;
    line-height: 1;
}

/* Configure Ranks page */

#ranks-configure-form {
    max-width: none;
}

.rank-config-toggle-bar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
    margin: 1rem 0 1.5rem;
}

.rank-config-toggle-block {
    background: #fff;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1rem;
}

.toggle-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    color: var(--navy-900);
}

.toggle-row-inline {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.85rem;
}

.rank-config-toggle-detail {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--gray-100);
}

.bulk-apply-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
    margin-top: 0.6rem;
    font-size: 0.85rem;
}

.bulk-apply-row input {
    width: 70px;
}

.rank-config-table-head,
.rank-config-row {
    display: grid;
    grid-template-columns: 24px 1.4fr 1fr 90px 1.6fr 1fr 70px;
    gap: 0.75rem;
    align-items: center;
}

.rank-config-table-head {
    padding: 0.5rem 0.75rem;
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--gray-600);
}

.rank-config-row {
    background: #fff;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 0.6rem 0.75rem;
    margin-bottom: 0.5rem;
}

.rank-config-row.dragging,
#program-rows tr.dragging {
    opacity: 0.4;
}

.rank-drag-handle {
    cursor: grab;
    color: var(--gray-400);
    text-align: center;
}

.rank-config-name-display,
.rank-config-abbr-display,
.rank-config-promo-display,
.rank-config-fee-display {
    font-size: 0.88rem;
    color: var(--navy-900);
}

.rank-config-name-display {
    font-weight: 600;
}

.rank-config-abbr-display,
.rank-config-promo-display,
.rank-config-fee-display {
    color: var(--gray-600);
    font-size: 0.82rem;
}

.rank-graphic-picker-wrap {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.rank-graphic-edit-btn {
    display: inline-flex;
    align-items: center;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--gray-600);
    padding: 0;
}

/* Edit Rank modal */

.modal-lg {
    max-width: 640px;
}

/* Cancels the modal's own left/right padding for this one child so
its border-box spans the modal's true edges, then restores the same
inset via padding so the visible content still lines up with the
header/footer — the net effect is the scrollbar (which sits at the
padding box's edge) lands flush against the modal's actual edge
instead of floating inset from it with a dead margin beyond it. */
.rank-edit-body {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-height: 65vh;
    overflow-y: auto;
    margin: 0 -1.25rem;
    padding: 0 1.25rem;
}

.rank-edit-row {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.rank-edit-row label {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--gray-600);
    flex: 1;
    min-width: 140px;
}

/* Fits Color/Color 2/Color 3 + the Camo toggle on one line — the
default 140px min-width per label (sized for two-item rows elsewhere)
doesn't leave room for four, and Camo shouldn't claim an equal-width
column anyway since it's just a checkbox. Two classes beats the plain
`.rank-edit-row label` rule regardless of source order. */
.rank-edit-colors-row label {
    min-width: 110px;
    /* Keeps "Color 3 (stripe)" on one line regardless of column width —
    a wrap there would make that label taller than Color/Color 2's,
    dropping its <select> out of alignment with the other two. */
    white-space: nowrap;
}

/* Not scoped to .rank-edit-colors-row specifically — any
.toggle-row-inline checkbox living inside a .rank-edit-row needs this
override, since plain `.rank-edit-row label` (0,1,1) otherwise beats
`.toggle-row-inline` (0,1,0) and stacks the checkbox above its text. */
.rank-edit-row .toggle-row-inline {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.35rem;
    flex: 0 0 auto;
    min-width: 0;
}

.rank-edit-row input,
.rank-edit-row select {
    max-width: none;
}

.rank-edit-fieldset {
    flex: 1;
    min-width: 200px;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    padding: 0.6rem 0.75rem;
}

.rank-edit-fieldset legend {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--gold-500);
    text-transform: uppercase;
    padding: 0 0.3rem;
}

.inline-num {
    flex-direction: row !important;
    align-items: center;
    gap: 0.4rem !important;
    font-weight: 400 !important;
}

.inline-num input {
    width: 60px;
}

.rank-edit-preview-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--gray-600);
}

.required-mark {
    color: #c62828;
}

.modal-required-note {
    font-size: 0.78rem;
    color: var(--gray-600);
    margin-right: auto;
}

.rank-config-promo-display,
.rank-config-fee-display {
    text-align: center;
}

.rank-config-row-actions {
    display: flex;
    gap: 0.4rem;
    justify-content: flex-end;
}

.rank-duplicate-btn {
    display: inline-flex;
    align-items: center;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--gray-600);
    padding: 0;
}

/* Red at rest, matching the .row-action-danger standard — not a
gray icon that only turns red on hover. */
.rank-delete-btn {
    display: inline-flex;
    align-items: center;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--red-600);
    padding: 0;
    border-radius: 6px;
}

.rank-delete-btn:hover {
    background: var(--red-100);
}

.rank-config-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 1rem;
}

/* Program list + Edit Program modal */

.program-index-plan-row {
    font-size: 0.82rem;
    padding: 2px 0;
}

/* Standard: a form's own generic max-width: 480px must never fight a
.modal/.modal-lg that already controls its own width — any <form>
living inside a modal is exempt, covering every current modal form
(#pe-form, #ce-form, #me-form, the add-to-family modal, both
appointment/task modals) and any future one without needing another
one-off ID rule each time a new modal is built. */
.modal form {
    max-width: none;
}

.pe-toggle-card {
    box-shadow: var(--shadow);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    background: #fff;
    padding: 1.25rem;
    margin-bottom: 1rem;
}

.pe-toggle-card > *:first-child {
    margin-top: 0;
}

.pe-toggle-card > *:last-child {
    margin-bottom: 0;
}

.phase-board {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 640px;
}

.phase-board-card {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 0;
}

.phase-board-card-body h3 {
    margin: 0 0 0.35rem;
    color: var(--navy-900);
    font-size: 1rem;
}

.phase-board-card-body p {
    margin: 0;
}

.phase-board-card .button-link {
    align-self: flex-start;
}

.pe-toggle-desc {
    margin: 0.3rem 0 0;
}

.pe-toggle-card .rank-config-toggle-detail .rank-edit-row {
    margin-top: 0;
}

#pe-form select[multiple] {
    height: auto;
}

.rank-edit-fieldset legend .toggle-row-inline {
    text-transform: none;
    font-weight: 600;
    color: var(--navy-900);
    font-size: 0.85rem;
}

/* Programs & Ranks sidebar row (member profile) */

.program-rank-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.program-rank-label {
    min-width: 0;
}

.rank-edit-hint {
    font-weight: 400;
    text-transform: none;
    color: var(--gray-400);
}

.rank-edit-label-heading {
    display: inline-block;
    white-space: nowrap;
}

/* Classes page + Edit Class modal */

/* Tighter row spacing than the default .rank-edit-body — this modal
has more fields than Program/Rank's, so the generic 1rem gap between
every row adds up to real wasted scroll space. */
.ce-body {
    gap: 0.6rem;
}

.ce-body .rank-edit-row {
    gap: 0.75rem;
}

/* .rank-edit-row label's own flex:1 (0,1,1) would otherwise beat a
single-class override (0,1,0) regardless of source order — same
specificity trap hit earlier with .toggle-row-inline. */
.rank-edit-row .ce-name-field {
    flex: 3;
}

.rank-edit-row .ce-active-field {
    flex: 0 0 auto;
    align-self: flex-end;
    padding-bottom: 0.55rem;
}

.ce-body select[multiple] {
    height: auto;
}

.ce-schedules-heading {
    margin: 0.25rem 0 0.25rem;
    font-size: 0.95rem;
}

.ce-schedule-row {
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    padding: 0.5rem 0.6rem;
    margin-bottom: 0.5rem;
}

.ce-schedule-main {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.ce-schedule-main select,
.ce-schedule-main input[type="time"],
.ce-schedule-main input[type="date"] {
    max-width: none;
    width: auto;
    margin: 0;
}

.ce-schedule-to {
    color: var(--gray-600);
    font-size: 0.85rem;
    white-space: nowrap;
}

.ce-schedule-ends-on {
    width: 150px;
}

.ce-remove-schedule {
    margin-left: auto;
}

.ce-exceptions {
    margin-top: 0.4rem;
    padding-top: 0.4rem;
    border-top: 1px solid var(--gray-100);
}

.ce-exception-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-bottom: 0.3rem;
}

.ce-exception-chips:empty {
    margin-bottom: 0;
}

.ce-exception-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: var(--red-100);
    color: var(--red-600);
    border-radius: 999px;
    padding: 0.15rem 0.3rem 0.15rem 0.6rem;
    font-size: 0.76rem;
}

.ce-exception-chip-remove {
    border: none;
    background: none;
    color: inherit;
    cursor: pointer;
    padding: 0 0.2rem;
    font-size: 0.7rem;
}

.ce-add-exception-toggle {
    border: none;
    background: none;
    color: var(--navy-500);
    cursor: pointer;
    font-size: 0.78rem;
    padding: 0;
    text-decoration: underline;
}

.ce-add-exception-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.4rem;
    flex-wrap: wrap;
}

.ce-add-exception-row input[type="date"] {
    max-width: none;
    width: 150px;
    margin: 0;
}

.ce-add-exception-row input[type="text"] {
    max-width: none;
    width: 180px;
    margin: 0;
}

.ce-exception-count {
    color: var(--red-600);
    font-size: 0.78rem;
}

/* ---------- Kiosk check-in (public, touch-oriented) ---------- */

.kiosk-wrap {
    display: flex;
    justify-content: center;
    padding-top: 2rem;
}

.kiosk-card {
    background: #fff;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 2.5rem;
    max-width: 480px;
    width: 100%;
    text-align: center;
}

.kiosk-heading {
    font-size: 1.6rem;
    margin-bottom: 0.4rem;
}

.kiosk-subheading {
    color: var(--gray-600);
    margin-bottom: 1.5rem;
}

.kiosk-pin-display {
    display: block;
    font-size: 2rem;
    text-align: center;
    letter-spacing: 0.6rem;
    margin: 0 auto 1.5rem;
    max-width: 240px;
    padding: 0.75rem;
    height: auto;
}

.kiosk-keypad {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.kiosk-key {
    font-size: 1.4rem;
    padding: 1.2rem 0;
    border-radius: var(--radius);
    border: 1px solid var(--gray-200);
    background: var(--gray-50);
    cursor: pointer;
    font-family: inherit;
}

.kiosk-key:hover {
    background: var(--navy-100);
}

.kiosk-key-clear,
.kiosk-key-back {
    font-size: 1rem;
}

.kiosk-submit {
    width: 100%;
    padding: 1rem;
    font-size: 1.1rem;
}

.kiosk-error {
    color: var(--red-600);
    margin-top: 1rem;
}

.kiosk-options {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1rem;
    text-align: left;
}

.kiosk-option-btn {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.2rem;
    padding: 1rem 1.25rem;
    border-radius: var(--radius);
    border: 1px solid var(--gray-200);
    background: #fff;
    cursor: pointer;
    text-align: left;
    font-size: 1rem;
    width: 100%;
    font-family: inherit;
}

.kiosk-option-btn:hover {
    border-color: var(--navy-500);
    background: var(--navy-100);
}

.kiosk-option-btn span {
    color: var(--gray-600);
    font-size: 0.85rem;
}

.kiosk-back {
    margin-top: 0.5rem;
}

.kiosk-confirm-check {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: #2e7d32;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.2rem;
    margin: 0 auto 1rem;
}

/* ---------- Configurable Dashboard ---------- */

.dashboard-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.dashboard-header-actions {
    display: flex;
    gap: 0.5rem;
}

.dashboard-manage-panel {
    background: #fff;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1.25rem;
    margin-bottom: 1.5rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.25rem;
}

.dashboard-manage-category h4 {
    margin: 0 0 0.5rem;
    color: var(--navy-900);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.dashboard-manage-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0;
    font-size: 0.88rem;
    color: var(--gray-600);
    cursor: pointer;
}

.dashboard-main {
    display: flex;
    align-items: flex-start;
    gap: 0;
}

.dashboard-col {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}

.dashboard-col-resizer {
    width: 10px;
    flex-shrink: 0;
    cursor: col-resize;
    position: relative;
}

.dashboard-col-resizer::after {
    content: '';
    position: absolute;
    left: 4px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--gray-200);
    border-radius: 2px;
}

.dashboard-col-resizer:hover::after {
    background: var(--navy-500);
}

.dashboard-card {
    background: #fff;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1rem 1.25rem;
    cursor: grab;
}

.dashboard-card.dragging {
    opacity: 0.4;
}

.dashboard-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.dashboard-card-header h3 {
    margin: 0;
    font-size: 0.95rem;
    color: var(--navy-900);
}

.dashboard-card-category {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--gray-400);
}

.dashboard-card-header-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.dashboard-card-count {
    background: var(--navy-100);
    color: var(--navy-700);
    border-radius: 999px;
    padding: 0.1rem 0.5rem;
    font-size: 0.78rem;
    font-weight: 600;
}

.dashboard-card-hide {
    border: none;
    background: none;
    color: var(--gray-400);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 0.15rem;
}

.dashboard-card-hide:hover {
    color: var(--red-600);
}

.dashboard-card-body {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.dashboard-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    font-size: 0.85rem;
    padding: 0.3rem 0;
    border-bottom: 1px solid var(--gray-100);
}

.dashboard-row:last-child {
    border-bottom: none;
}

.dashboard-row-activity {
    justify-content: flex-start;
}

.dashboard-row-activity span:first-child {
    flex: 1;
}

.dashboard-empty {
    color: var(--gray-400);
    font-size: 0.85rem;
    margin: 0.25rem 0;
}

/* A real table, not loose flex rows — guarantees every row's columns
line up under the same header regardless of content width, unlike
.dashboard-row (space-between sizes each row independently). */
.dashboard-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.dashboard-table th {
    text-align: left;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--gray-400);
    font-weight: 600;
    padding: 0.2rem 0.5rem 0.3rem 0;
    border-bottom: 1px solid var(--gray-100);
}

.dashboard-table td {
    padding: 0.3rem 0.5rem 0.3rem 0;
    border-bottom: 1px solid var(--gray-100);
    white-space: nowrap;
}

.dashboard-table tr:last-child td {
    border-bottom: none;
}

.dashboard-card-viewall {
    display: inline-block;
    margin-top: 0.6rem;
    font-size: 0.82rem;
}

.dashboard-vitals {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
}

.dashboard-vital {
    text-align: center;
    background: var(--gray-50);
    border-radius: var(--radius);
    padding: 0.75rem 0.5rem;
}

.dashboard-vital-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--navy-900);
}

.dashboard-vital-label {
    font-size: 0.72rem;
    color: var(--gray-600);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

@media (max-width: 900px) {
    .dashboard-main {
        flex-direction: column;
    }

    .dashboard-col {
        flex: 1 1 100% !important;
    }

    .dashboard-col-resizer {
        display: none;
    }
}

/* ---------- POS: checkout, inventory ---------- */

/* Every plain <form> in the app defaults to max-width:480px (see
"Forms" above) — the right call for a login/settings form, wrong for a
form that wraps a whole search+cart workspace or a data table. Every
POS page below opts out explicitly rather than fighting that default
implicitly. */
.pos-checkout,
.pos-wide,
.pos-wide form,
form.pos-wide {
    max-width: none;
}

.pos-checkout {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(320px, 420px);
    gap: 1.5rem;
    align-items: start;
}

@media (max-width: 900px) {
    .pos-checkout {
        grid-template-columns: 1fr;
    }
}

.pos-panel {
    background: #fff;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1.25rem;
}

.pos-panel h2 {
    margin: 0 0 0.75rem;
    font-size: 1rem;
}

.pos-search-input {
    width: 100%;
    margin-bottom: 0.75rem;
}

.pos-category-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.75rem;
}

.pos-pill {
    border: 1px solid var(--gray-200);
    background: #fff;
    color: var(--gray-600);
    border-radius: 999px;
    padding: 0.3rem 0.8rem;
    font-size: 0.82rem;
    cursor: pointer;
}

.pos-pill.active {
    background: var(--navy-900);
    border-color: var(--navy-900);
    color: #fff;
}

.pos-results {
    max-height: 480px;
    overflow-y: auto;
    border: 1px solid var(--gray-100);
    border-radius: var(--radius);
}

.pos-result-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid var(--gray-100);
    cursor: pointer;
}

.pos-result-item:last-child {
    border-bottom: none;
}

.pos-result-item:hover {
    background: var(--gray-50);
}

.pos-result-name {
    font-weight: 600;
    color: var(--navy-900);
    font-size: 0.9rem;
}

.pos-result-meta {
    font-size: 0.78rem;
    color: var(--gray-400);
}

.pos-result-price {
    font-weight: 600;
    color: var(--navy-900);
    white-space: nowrap;
}

.pos-badge {
    display: inline-block;
    border-radius: 999px;
    padding: 0.05rem 0.5rem;
    font-size: 0.72rem;
    font-weight: 600;
}

.pos-badge-out {
    background: var(--red-100);
    color: var(--red-600);
}

.pos-badge-so {
    background: var(--gold-100);
    color: #8a6400;
}

.pos-cart-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.pos-cart-header h2 {
    margin: 0;
}

.pos-member-box {
    border-bottom: 1px solid var(--gray-100);
    padding-bottom: 0.75rem;
    margin-bottom: 0.75rem;
}

.pos-selected-chip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--navy-100);
    border-radius: var(--radius);
    padding: 0.5rem 0.75rem;
    font-weight: 600;
    color: var(--navy-900);
}

.pos-selected-chip button {
    border: none;
    background: none;
    font-size: 1.1rem;
    cursor: pointer;
    color: var(--gray-600);
}

.pos-cart-lines {
    max-height: 320px;
    overflow-y: auto;
    margin-bottom: 0.75rem;
}

.pos-cart-line {
    display: grid;
    grid-template-columns: 1fr auto auto auto;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--gray-100);
}

.pos-cart-line-name {
    font-weight: 600;
    font-size: 0.88rem;
    color: var(--navy-900);
}

.pos-cart-line-sku {
    font-size: 0.75rem;
    color: var(--gray-400);
}

.pos-qty-stepper {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.pos-qty-stepper button {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    border: 1px solid var(--gray-200);
    background: #fff;
    cursor: pointer;
    line-height: 1;
}

.pos-cart-line-amt {
    font-weight: 600;
    white-space: nowrap;
}

.pos-cart-line-remove {
    border: none;
    background: none;
    color: var(--gray-400);
    font-size: 1.1rem;
    cursor: pointer;
}

.pos-cart-line-remove:hover {
    color: var(--red-600);
}

.pos-totals {
    border-top: 1px solid var(--gray-100);
    padding-top: 0.5rem;
    margin-bottom: 0.75rem;
}

.pos-totals-row {
    display: flex;
    justify-content: space-between;
    padding: 0.2rem 0;
    font-size: 0.88rem;
}

.pos-totals-grand {
    font-weight: 700;
    font-size: 1.05rem;
    border-top: 1px solid var(--gray-100);
    margin-top: 0.3rem;
    padding-top: 0.5rem;
}

/* ---------- POS: browse grid (product tiles + variant chips) ---------- */

.prod-tile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 0.6rem;
}

.prod-tile {
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    padding: 0.6rem 0.7rem;
    cursor: pointer;
    background: #fff;
}

.prod-tile:hover {
    border-color: var(--navy-500);
    background: var(--navy-100);
}

.pt-name {
    font-weight: 600;
    font-size: 0.86rem;
    color: var(--navy-900);
    margin-bottom: 0.2rem;
}

.pt-meta {
    font-size: 0.75rem;
    color: var(--gray-400);
    margin-bottom: 0.2rem;
}

.pt-price {
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--navy-900);
}

.variant-chip-row {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    padding: 0.5rem;
    margin-top: -0.2rem;
    background: var(--gray-50);
    border-radius: var(--radius);
}

.variant-chip {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border: 1px solid var(--gray-200);
    background: #fff;
    border-radius: 999px;
    padding: 0.3rem 0.7rem;
    font-size: 0.8rem;
    cursor: pointer;
}

.variant-chip:hover {
    border-color: var(--navy-500);
}

.variant-chip .vc-stock {
    color: var(--gray-400);
    font-size: 0.72rem;
}

.variant-chip .vc-price {
    font-weight: 600;
    color: var(--navy-900);
}

/* ---------- Inventory ---------- */

.inventory-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.inventory-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.inventory-group {
    background: #fff;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    margin-bottom: 1rem;
    overflow: hidden;
}

.inventory-group-head {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.85rem 1.1rem;
    cursor: pointer;
    user-select: none;
}

.inventory-group-head h3 {
    margin: 0;
    font-size: 0.95rem;
}

.inventory-group-summary {
    margin-left: auto;
    font-size: 0.8rem;
    color: var(--gray-400);
}

.inventory-group-body {
    border-top: 1px solid var(--gray-100);
}

.inventory-chevron {
    transition: transform 0.1s ease;
}

.inventory-group.collapsed .inventory-chevron {
    transform: rotate(-90deg);
}

.inventory-group.collapsed .inventory-group-body {
    display: none;
}

/* ---------- Products: category groups, drag reorder, edit layout ---------- */

.product-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.prod-list {
    display: flex;
    flex-direction: column;
}

.prod-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 1.1rem;
    border-bottom: 1px solid var(--gray-100);
}

.prod-row:last-child {
    border-bottom: none;
}

.prod-row.dragging {
    opacity: 0.4;
}

.prod-drag-handle {
    cursor: grab;
    color: var(--gray-400);
    flex: none;
    font-size: 1.1rem;
    touch-action: none;
}

.prod-name {
    flex: 1;
    min-width: 0;
}

.prod-meta {
    font-size: 0.78rem;
    color: var(--gray-400);
}

.prod-col {
    flex: none;
    font-size: 0.85rem;
    color: var(--gray-600);
    width: 70px;
    text-align: right;
}

.prod-actions {
    flex: none;
    display: flex;
    gap: 0.6rem;
    align-items: center;
}

.prod-actions form {
    display: inline;
    max-width: none;
}

.product-edit-grid {
    display: grid;
    grid-template-columns: minmax(280px, 380px) minmax(420px, 1fr);
    gap: 1.5rem;
    align-items: start;
}

@media (max-width: 900px) {
    .product-edit-grid {
        grid-template-columns: 1fr;
    }
}

.bulk-generate {
    border: 1px dashed var(--gray-200);
    border-radius: var(--radius);
    padding: 0.6rem 0.9rem;
    margin-bottom: 1rem;
}

.bulk-generate summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--navy-900);
}

.variant-table-wrap {
    overflow-x: auto;
}

.variant-table-wrap table {
    border-collapse: collapse;
    width: 100%;
}

.variant-table-wrap th,
.variant-table-wrap td {
    padding: 0.35rem 0.4rem;
    white-space: nowrap;
}

.variant-table-wrap input,
.variant-table-wrap select {
    margin: 0;
}

.variant-drag-handle {
    cursor: grab;
    color: var(--gray-400);
}

.variant-row.dragging {
    opacity: 0.4;
}

.variant-stock-cell {
    text-align: right;
    line-height: 1.3;
}

.variant-stock-cell a {
    display: block;
    font-size: 0.72rem;
}

.variant-remove-btn {
    border: none;
    background: none;
    color: var(--red-600);
    cursor: pointer;
    font-size: 1.05rem;
}

.variant-table-wrap table {
    border: 1px solid var(--gray-100);
}

.variant-table-wrap thead th {
    background: var(--navy-050, #f4f6fa);
    border-bottom: 1px solid var(--gray-200);
    text-align: left;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--gray-600);
}

.variant-table-wrap tbody tr {
    border-bottom: 1px solid var(--gray-100);
}

.variant-table-wrap tbody td {
    border-right: 1px solid var(--gray-100);
}

.variant-table-wrap tbody td:last-child,
.variant-table-wrap thead th:last-child {
    border-right: none;
}

.variant-check-cell {
    text-align: center;
    vertical-align: middle;
}

.variant-remove-label {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--red-600);
    font-size: 0.85rem;
    cursor: pointer;
    margin-bottom: 0;
}

/* ---------- Floating AI assistant (components/assistant-panel.blade.php) ---------- */
.assistant-panel-launcher {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: none;
    background: var(--navy-700);
    color: #fff;
    font-size: 1.3rem;
    box-shadow: var(--shadow);
    cursor: pointer;
    z-index: 60;
}

.assistant-panel {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    width: 360px;
    max-width: calc(100vw - 2rem);
    height: 480px;
    max-height: calc(100vh - 2rem);
    background: #fff;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    z-index: 60;
    border: 1px solid var(--gray-200);
}

.assistant-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.6rem 0.9rem;
    background: var(--navy-700);
    color: #fff;
    border-radius: var(--radius) var(--radius) 0 0;
    font-weight: 600;
}

.assistant-panel-header-actions {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.assistant-panel-header button {
    background: none;
    border: none;
    color: #fff;
    font-size: 1.2rem;
    cursor: pointer;
    line-height: 1;
}

.assistant-panel-messages {
    flex: 1;
    overflow-y: auto;
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.assistant-bubble {
    max-width: 85%;
    padding: 0.5rem 0.75rem;
    border-radius: 10px;
    font-size: 0.88rem;
    white-space: pre-wrap;
    line-height: 1.4;
}

.assistant-bubble-user {
    align-self: flex-end;
    background: var(--navy-100);
    color: var(--navy-900);
}

.assistant-bubble-assistant {
    align-self: flex-start;
    background: var(--gray-100);
    color: var(--gray-900);
}

.assistant-action-card {
    align-self: stretch;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    padding: 0.6rem 0.75rem;
    font-size: 0.85rem;
    background: var(--gold-100);
}

.assistant-action-body {
    margin-top: 0.35rem;
    white-space: pre-wrap;
    color: var(--gray-600);
}

.assistant-action-buttons {
    margin-top: 0.5rem;
    display: flex;
    gap: 0.5rem;
}

.assistant-action-buttons button {
    font: inherit;
    padding: 0.3rem 0.75rem;
    border-radius: 6px;
    border: 1px solid var(--navy-700);
    background: var(--navy-700);
    color: #fff;
    cursor: pointer;
}

.assistant-action-buttons button.assistant-action-reject {
    background: #fff;
    color: var(--navy-700);
}

.assistant-panel-form {
    display: flex;
    gap: 0.5rem;
    padding: 0.6rem;
    border-top: 1px solid var(--gray-200);
}

.assistant-panel-form textarea {
    flex: 1;
    resize: none;
    font: inherit;
    padding: 0.4rem 0.5rem;
    border: 1px solid var(--gray-200);
    border-radius: 6px;
}

.assistant-panel-form button {
    font: inherit;
    padding: 0 0.9rem;
    border-radius: 6px;
    border: 1px solid var(--navy-700);
    background: var(--navy-700);
    color: #fff;
    cursor: pointer;
}

/* "Assistant is thinking" indicator — the self-hosted model can take
   10-25s on a cold/complex reply, so the chat needs a visible pulse the
   whole time the input is disabled, not just a static disabled state
   that looks identical to "frozen". The label shows real backend
   progress ("Looking up Eric Lee…"), polled from /assistant/status —
   not a fake generic message. */
.assistant-typing {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    padding: 0.65rem 0.85rem;
}

.assistant-typing-label {
    font-style: italic;
    color: var(--gray-600);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.assistant-typing-dots {
    display: flex;
    gap: 4px;
    align-items: center;
    flex-shrink: 0;
}

.assistant-typing-dots span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--gray-400);
    animation: assistant-typing-bounce 1.2s infinite ease-in-out;
}

.assistant-typing-dots span:nth-child(2) { animation-delay: 0.15s; }
.assistant-typing-dots span:nth-child(3) { animation-delay: 0.3s; }

@keyframes assistant-typing-bounce {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
    30% { transform: translateY(-4px); opacity: 1; }
}