/* ui_kit.css — small shared building blocks (chips, avatar, kebab, table shell,
   empty state, section head, choice cards). Partials: utils/common/ui/*.html.
   Colours come from the palette variables in color/custom_color.css. */

/* card elevation: one light shadow for every card shell (tables, list cards, media / plan / settings cards, KPI band),
   kept soft so the kit sits close to the original flat MDB cards. Tune it here. */
:root {
    --ui-card-shadow: 0 1px 4px rgba(12, 27, 61, 0.04);
    --ui-card-shadow-hover: 0 8px 18px -10px rgba(12, 27, 61, 0.18);
}

/* ---------- chip ---------- */
.ui-chip {
    display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px;
    font-size: 10.5px; font-weight: 700; letter-spacing: .35px; text-transform: uppercase; line-height: 1.2;
    white-space: nowrap; background: var(--custom_color_zircon); color: var(--custom_color_outer_space);
}
.ui-chip i { font-size: 9px; }
.ui-chip--success { background: #E6F1EE; color: var(--custom_color_v2_green); }
.ui-chip--warning { background: #FBF0DA; color: #8A5A00; }
.ui-chip--danger { background: #FBE3E3; color: #A32D2D; }
.ui-chip--info { background: #EAF0FF; color: #1E3A8A; }
.ui-chip--muted { background: var(--custom_color_zircon); color: var(--custom_color_rolling_stone); }
.ui-chip--dark { background: rgba(17, 23, 27, 0.85); color: #fff; }
.ui-chip--premium { background: linear-gradient(135deg, #F0E8D5 0%, #E2CFA3 100%); color: #4C3837; }
/* over a photo: frosted white */
.ui-chip--frost { background: rgba(255, 255, 255, 0.9); color: var(--custom_color_v2_dark_navi_blue); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
/* a club-chosen hex (class category): solid fill, white text — legible over photos too */
.ui-chip--tint { background: var(--chip, var(--custom_color_zircon)); color: #fff; }
.ui-chip--lg { font-size: 11px; padding: 5px 11px; letter-spacing: .4px; }
.ui-chips { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }

/* ---------- avatar + name ---------- */
.ui-person { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; min-width: 0; }
.ui-person__avatar {
    width: 26px; height: 26px; border-radius: 50%; flex: 0 0 26px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--custom_color_v2_dark_navi_blue); color: #fff; font-size: 11px; font-weight: 700;
}
.ui-person__avatar--empty { background: var(--custom_color_zircon); color: var(--custom_color_bombay); }
.ui-person--empty { color: var(--custom_color_bombay); }
/* a person on a detail card (utils/common/ui/person_row.html): round photo, role over name, chevron when it opens them.
   Bigger and boxed, unlike the inline .ui-person, so the member / coach of a membership or PT session stand out. */
.ui-person-row {
    display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; min-width: 0;
    background: #F7F9FC; border: 1px solid var(--custom_color_mercury); color: inherit; text-decoration: none;
    transition: border-color .15s, background .15s;
}
a.ui-person-row:hover { border-color: var(--custom_color_regent_st_blue); background: #fff; color: inherit; }
.ui-person-row + .ui-person-row { margin-top: 8px; }
.ui-person-row__avatar {
    flex: 0 0 48px; width: 48px; height: 48px; border-radius: 50%; overflow: hidden; display: inline-flex; align-items: center; justify-content: center;
    background: var(--custom_color_v2_dark_navi_blue); color: #fff; font-family: 'Custom-Font-Bold', sans-serif; font-size: 17px;
    box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--custom_color_mercury);
}
.ui-person-row__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }   /* the template passes a 144px thumbnail (|thumbnail), not the full photo */
.ui-person-row.is-empty .ui-person-row__avatar { background: var(--custom_color_zircon); color: var(--custom_color_bombay); font-size: 14px; }
.ui-person-row__text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.ui-person-row__role { font-size: 10.5px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--custom_color_rolling_stone); }
.ui-person-row__name { font-family: 'Custom-Font-Semibold', sans-serif; font-size: 14.5px; color: var(--custom_color_bunker); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-person-row.is-empty .ui-person-row__name { color: var(--custom_color_bombay); }
.ui-person-row__go { font-size: 11px; color: var(--custom_color_bombay); }
a.ui-person-row:hover .ui-person-row__go { color: var(--custom_color_v2_dark_navi_blue); }

/* ---------- kebab (row / card actions) ---------- */
.ui-kebab {
    width: 30px; height: 30px; border-radius: 50%; border: 0; padding: 0; background: transparent;
    color: var(--custom_color_rolling_stone); display: inline-flex; align-items: center; justify-content: center;
    transition: background .15s, color .15s;
}
.ui-kebab:hover { background: var(--custom_color_zircon); color: var(--custom_color_v2_dark_navi_blue); }
.ui-kebab--frost {
    width: 34px; height: 34px; background: rgba(255, 255, 255, 0.9); color: var(--custom_color_v2_dark_navi_blue);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.ui-kebab--frost:hover { background: var(--custom_color_matisse); color: #fff; }

/* ---------- row typography (title + sub-line in table cells and list cards) ---------- */
.ui-row-title { font-family: 'Custom-Font-Semibold', sans-serif; font-size: 13.5px; color: var(--custom_color_bunker); white-space: nowrap; }
.ui-row-sub { font-size: 11.5px; color: var(--custom_color_rolling_stone); white-space: nowrap; }
.ui-row-sub i { font-size: 10px; margin-right: 4px; }
/* a row's note (check-ins, sharing access, PT sessions…): the whole text, wrapped, never cut – a soft box with the
   icon hanging beside it, kept to a readable line length so a long note grows downwards, not across the table */
.ui-row-note {
    display: flex; align-items: flex-start; gap: 6px; margin-top: 6px; min-width: 190px; max-width: 360px; padding: 6px 9px; border-radius: 8px;
    background: #F7F9FC; font-size: 12px; line-height: 1.45; color: var(--custom_color_outer_space);
    white-space: normal; overflow-wrap: anywhere;
}
@media (max-width: 767px) { .ui-row-note { min-width: 0; } }
.ui-row-note i { flex-shrink: 0; margin-top: 3px; font-size: 10px; color: var(--custom_color_bombay); }
a.ui-row-title, a.ui-row-sub { text-decoration: none; }
a.ui-row-title:hover { text-decoration: underline; color: var(--custom_color_bunker); }

/* ---------- media row (thumb + title + sub/chips), utils/common/ui/media_row.html ---------- */
.ui-media-row { display: flex; align-items: center; gap: 12px; min-width: 0; }
.ui-media-row__body { min-width: 0; }
.ui-media-row__body .ui-row-title { display: block; overflow: hidden; text-overflow: ellipsis; max-width: 220px; }

/* ---------- colour swatch ---------- */
.ui-dot { width: 14px; height: 14px; border-radius: 50%; display: inline-block; vertical-align: middle; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--custom_color_mercury); }

/* ---------- section head (title + subtitle + text action) ---------- */
.ui-section-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.ui-section-head__title { font-family: 'Custom-Font-Bold', sans-serif; font-size: 18px; color: var(--custom_color_bunker); margin: 0; }
.ui-section-head__sub { font-size: 12px; color: var(--custom_color_rolling_stone); margin: 2px 0 0; }
.ui-section-head__action { white-space: nowrap; align-self: center; }

/* ---------- table shell ---------- */
/* No overflow clipping on the wrapper: row dropdown menus must be able to hang
   outside it. Rounded corners are drawn on the corner cells instead. */
.ui-table-wrap { border: 1px solid var(--custom_color_mercury); border-radius: 16px; background: #fff; box-shadow: var(--ui-card-shadow); }
.ui-table { width: 100%; border-collapse: separate; border-spacing: 0; margin: 0; }
.ui-table thead th:first-child { border-top-left-radius: 15px; }
.ui-table thead th:last-child { border-top-right-radius: 15px; }
.ui-table tbody tr:last-child td:first-child { border-bottom-left-radius: 15px; }
.ui-table tbody tr:last-child td:last-child { border-bottom-right-radius: 15px; }
.ui-table .dropdown-menu { z-index: 1050; }
.ui-table thead th {
    font-size: 10.5px; letter-spacing: .7px; text-transform: uppercase; font-weight: 700;
    color: var(--custom_color_rolling_stone); background: var(--custom_color_alice_blue);
    padding: 11px 12px; border-bottom: 1px solid var(--custom_color_mercury); white-space: nowrap;
}
.ui-table tbody td { padding: 12px 12px; border-bottom: 1px solid var(--custom_color_zircon); vertical-align: middle; font-size: 13px; color: var(--custom_color_outer_space); }
.ui-table tbody tr:last-child td { border-bottom: 0; }
.ui-table tbody tr.is-link { cursor: pointer; transition: background .12s; }
.ui-table tbody tr.is-link:hover { background: var(--custom_color_alice_blue); }
.ui-table tbody tr.is-archived td { opacity: .6; }
.ui-table tbody tr.is-failed td { background: #FFF7F6; }
.ui-list-card.is-failed { border-color: #F3D2CF; background: #FFFBFA; }
.ui-table .col-actions { width: 40px; text-align: center; padding-left: 4px; padding-right: 8px; }
/* the narrow arrow between two people columns (from -> to) */
.ui-table .col-arrow { width: 16px; padding-left: 0; padding-right: 0; text-align: center; }
.ui-table .col-arrow i { font-size: 10px; }
/* --fit: a wide table that must still fit a narrow desktop column (report lists): names may wrap instead of widening their column */
.ui-table--fit .ui-person { white-space: normal; }
.ui-muted { color: var(--custom_color_bombay); }

/* ---------- empty state ---------- */
.ui-empty { padding: 36px 20px; text-align: center; color: var(--custom_color_rolling_stone); font-size: 13px; }
.ui-empty i { display: block; font-size: 26px; margin-bottom: 8px; color: var(--custom_color_bombay); }

/* ---------- mobile list card ---------- */
.ui-list-card { border: 1px solid var(--custom_color_mercury); border-radius: 14px; background: #fff; padding: 12px 14px; margin-bottom: 10px; box-shadow: var(--ui-card-shadow); }
.ui-list-card.is-archived { opacity: .65; }
.ui-list-card__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ui-list-card__meta { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 10px; font-size: 12px; color: var(--custom_color_outer_space); }
.ui-list-card__meta i { font-size: 10px; color: var(--custom_color_rolling_stone); margin-right: 4px; }
.ui-list-card__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; align-items: center; }
/* ---------- history card (phone, Other > History lists: sharing access, transfer, freeze, note) ----------
   Three calm bands, each saying what it is: the head (a soft tile with the record's icon, the plan or request as the title,
   when / which plan under it, the menu); the people, one row each with avatar, name and role (From / To, Owner / Shared
   with, Member), two joined by a short line; then small tags (fee, frozen dates, status). The card opens the membership /
   PT session; a member name inside it opens the member (utils/common/ui/hcard_head.html, hcard_person.html). */
.ui-list-card.ui-hcard { padding: 14px 14px 12px; border-radius: 16px; cursor: pointer; transition: border-color .15s; }
.ui-list-card.ui-hcard:active { border-color: var(--custom_color_regent_st_blue); }
.ui-hcard__head { display: flex; align-items: center; gap: 12px; }
.ui-hcard__tile {
    flex: 0 0 38px; width: 38px; height: 38px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center;
    background: var(--custom_color_solitude); color: var(--custom_color_v2_dark_navi_blue); font-size: 15px;
}
.ui-hcard__titles { flex: 1 1 auto; min-width: 0; }
.ui-hcard__title { margin: 0; font-family: 'Custom-Font-Semibold', sans-serif; font-size: 14.5px; line-height: 1.3; color: var(--custom_color_bunker); overflow-wrap: break-word; }
.ui-hcard__sub { margin: 2px 0 0; font-size: 11.5px; line-height: 1.35; color: var(--custom_color_rolling_stone); }
.ui-hcard__sub i { font-size: 10px; margin-right: 5px; }
.ui-hcard__head > .dropdown { align-self: flex-start; margin: -2px -6px 0 0; }
.ui-hcard__people { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; }
.ui-hcard__person { position: relative; display: flex; align-items: flex-start; gap: 10px; min-width: 0; }
.ui-hcard__person .ui-person__avatar { flex-basis: 28px; width: 28px; height: 28px; font-size: 11.5px; }
/* two people (from -> to, owner -> shared with): a dashed line from under one avatar (28 / 2 = 14px in) down to the next
   one, through the row gap, however many lines the name above wraps to (avatars sit at the top of their row) */
.ui-hcard__person:not(:last-child)::after { content: ""; position: absolute; left: 13.5px; top: 32px; bottom: -8px; border-left: 1px dashed var(--custom_color_regent_st_blue); }
.ui-hcard__who { display: flex; flex-direction: column; min-width: 0; }
.ui-hcard__who .table-body-text-button { font-size: 14px; line-height: 1.3; overflow-wrap: break-word; }
.ui-hcard__who .ui-muted { font-size: 13px; }
.ui-hcard__role { font-size: 11px; line-height: 1.3; color: var(--custom_color_rolling_stone); }
.ui-hcard__note {
    margin-top: 12px; padding: 9px 11px; border-radius: 10px; background: var(--custom_color_zircon);
    font-size: 12.5px; line-height: 1.45; color: var(--custom_color_outer_space); white-space: pre-line; overflow-wrap: break-word;
}
.ui-hcard__tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--custom_color_zircon); }
.ui-hcard__tag {
    display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px;
    background: var(--custom_color_zircon); font-size: 11.5px; color: var(--custom_color_outer_space); white-space: nowrap;
}
.ui-hcard__tag i { font-size: 10px; color: var(--custom_color_rolling_stone); }

/* ---------- choice cards (radio rendered as selectable cards) ---------- */
.ui-choice { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ui-choice__opt { margin: 0; cursor: pointer; user-select: none; min-width: 0; }
.ui-choice__opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.ui-choice__card {
    display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px;
    border: 1.5px solid var(--custom_color_mercury); background: #fff; min-width: 0;
    transition: border-color .15s, background .15s, box-shadow .15s;
}
.ui-choice__icon {
    width: 34px; height: 34px; border-radius: 10px; flex: 0 0 34px;
    display: inline-flex; align-items: center; justify-content: center; font-size: 13px;
    background: var(--custom_color_zircon); color: var(--custom_color_v2_dark_navi_blue);
    transition: background .15s, color .15s;
}
.ui-choice__text { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.ui-choice__title { font-size: 13.5px; font-weight: 700; color: var(--custom_color_bunker); line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-choice__desc { font-size: 11px; color: var(--custom_color_rolling_stone); line-height: 1.3; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-choice__check {
    width: 20px; height: 20px; border-radius: 50%; flex: 0 0 20px; font-size: 9px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1.5px solid var(--custom_color_mercury); color: transparent; background: #fff;
    transition: background .15s, border-color .15s, color .15s;
}
.ui-choice__opt:hover .ui-choice__card { border-color: var(--custom_color_regent_st_blue); background: var(--custom_color_alice_blue); }
.ui-choice__opt input:checked + .ui-choice__card { border-color: var(--custom_color_matisse); background: var(--custom_color_alice_blue); box-shadow: 0 0 0 3px var(--custom_color_solitude); }
.ui-choice__opt input:checked + .ui-choice__card .ui-choice__check { background: var(--custom_color_matisse); border-color: var(--custom_color_matisse); color: #fff; }
.ui-choice__opt input:checked + .ui-choice__card .ui-choice__icon { background: var(--custom_color_matisse); color: #fff; }
.ui-choice__opt input:focus-visible + .ui-choice__card { box-shadow: 0 0 0 3px var(--custom_color_solitude); }
/* gold variant (e.g. "premium") */
.ui-choice__opt--gold .ui-choice__icon { background: #FBF3E0; color: #9A6B00; }
.ui-choice__opt--gold input:checked + .ui-choice__card { border-color: #C9962A; box-shadow: 0 0 0 3px #FBF3E0; background: #FFFCF5; }
.ui-choice__opt--gold input:checked + .ui-choice__card .ui-choice__check { background: #C9962A; border-color: #C9962A; }
.ui-choice__opt--gold input:checked + .ui-choice__card .ui-choice__icon { background: linear-gradient(135deg, #F0E8D5, #E2CFA3); color: #4C3837; }
@media (max-width: 420px) { .ui-choice { grid-template-columns: 1fr; } }

/* pill tabs (utils/common/ui/tabs.html): with three or fewer tabs on a phone, share the row instead of scrolling */
.ui-tabs--fit .btn-tab-rounded { flex: 1 1 0 !important; min-width: 0; padding: 8px 6px !important; font-size: 14px; overflow: hidden; text-overflow: ellipsis; text-align: center; }

/* ================= media card (photo hero + sections; utils/common/ui/media_hero.html, collapsible.html, fact.html) ================= */
    /* ---------- card shell ---------- */
    .media-card {
        --cc-navy: var(--custom_color_v2_dark_navi_blue);
        --cc-ink: var(--custom_color_bunker);
        --cc-muted: var(--custom_color_rolling_stone);
        --cc-line: var(--custom_color_mercury);
        --cc-tint: var(--custom_color_zircon);
        --cc-accent: var(--custom_color_v2_brown);
        position: relative;
        display: flex;
        flex-direction: column;
        background: #fff;
        border: 1px solid var(--cc-line);
        border-radius: 18px;
        overflow: hidden;
        box-shadow: var(--ui-card-shadow);
        text-align: left;
        color: var(--custom_color_outer_space);
    }
    .media-card--link {
        height: 100%;
        cursor: pointer;
        transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    }
    .media-card--link:hover {
        transform: translateY(-3px);
        border-color: var(--custom_color_regent_st_blue);
        box-shadow: var(--ui-card-shadow-hover);
    }
    .media-card:focus-within { border-color: var(--custom_color_regent_st_blue); box-shadow: 0 0 0 3px var(--custom_color_solitude), var(--ui-card-shadow); }
    .media-card.is-archived { opacity: .72; }
    .media-card.is-archived:hover { opacity: 1; }

    /* ---------- hero (photo / poster fallback) ---------- */
    .media-card__hero {
        position: relative;
        width: 100%;               /* explicit: max-height would otherwise transfer through the ratio */
        aspect-ratio: 4 / 5;
        max-height: 340px;
        overflow: hidden;
        background: linear-gradient(160deg, var(--media-accent, #3B507D) 0%, #0C1B3D 100%);
    }
    .media-card__hero--wide { aspect-ratio: 16 / 9; max-height: none; }
    .media-card__hero img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: transform .35s ease;
    }
    .media-card--link:hover .media-card__hero img { transform: scale(1.04); }
    .media-card__hero::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(12, 27, 61, 0.35) 0%, rgba(12, 27, 61, 0) 35%, rgba(12, 27, 61, 0) 55%, rgba(12, 27, 61, 0.75) 100%);
        pointer-events: none;
    }
    /* ---------- card menu (the kebab's dropdown) ----------
       The card and its hero clip their contents (rounded corners, photo zoom), which also clips
       the menu, and the title/facts overlay paints over it. While a menu is open: no clipping, so
       a long menu hangs below the card; the card rises above its neighbours so the menu paints
       over the next card or the list beside it; the top bar rises above the overlay. The corners
       stay round because the photo, the initial and the gradient carry the hero's radius. */
    .media-card__hero { border-radius: 17px 17px 0 0; }   /* card radius minus its 1px border */
    .media-card__hero img, .media-card__initial, .media-card__hero::after { border-radius: inherit; }
    .media-card:has(.dropdown-menu.show) { overflow: visible; z-index: 1050; }
    .media-card:has(.dropdown-menu.show) .media-card__hero { overflow: visible; }
    .media-card:has(.dropdown-menu.show) .media-card__hero img { transform: none; }
    .media-card__top:has(.dropdown-menu.show) { z-index: 3; }

    .media-card__initial {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: 'Custom-Font-Bold', sans-serif;
        font-size: 120px;
        color: rgba(255, 255, 255, 0.18);
        letter-spacing: -4px;
        user-select: none;
    }
    .media-card__hero--wide .media-card__initial { font-size: 72px; }

    .media-card__top {
        position: absolute;
        top: 12px;
        left: 12px;
        right: 12px;
        z-index: 2;
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 8px;
    }
    .media-card__overlay {
        position: absolute;
        left: 16px;
        right: 16px;
        bottom: 14px;
        z-index: 2;
        color: #fff;
    }
    .media-card__hero--wide .media-card__overlay { left: 12px; right: 12px; bottom: 12px; }
    .media-card__title {
        font-family: 'Custom-Font-Bold', sans-serif;
        font-size: 24px;
        line-height: 1.15;
        margin: 0;
        color: #fff;
        text-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
        text-decoration: none;
        display: block;
    }
    a.media-card__title:hover { color: #fff; text-decoration: underline; }
    .media-card__title:focus-visible, .media-card__row-value a:focus-visible {
        outline: 2px solid #fff;
        outline-offset: 3px;
        border-radius: 3px;
    }
    .media-card__desc {
        margin: 6px 0 0;
        font-size: 13px;
        line-height: 1.45;
        color: rgba(255, 255, 255, 0.85);
    }
    .media-card__meta-line {
        margin: 8px 0 0;
        display: flex;
        flex-wrap: wrap;
        gap: 6px 14px;
        font-size: 12.5px;
        color: rgba(255, 255, 255, 0.9);
    }
    .media-card__meta-line i { opacity: .8; margin-right: 5px; font-size: 11px; }

    /* calendar colour, as a bare dot beside the chips */
    .media-card__dot {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        flex: 0 0 20px;
        border: 2px solid rgba(255, 255, 255, 0.92);
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
    }

    /* frosted fact pills over the photo */
    .media-card__facts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
    .ui-fact {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 5px 11px 5px 9px;
        border-radius: 999px;
        font-size: 12.5px;
        line-height: 1.2;
        color: #fff;
        white-space: nowrap;
        background: rgba(2, 6, 23, 0.45);
        border: 1px solid rgba(255, 255, 255, 0.22);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        box-shadow: 0 2px 8px rgba(2, 6, 23, 0.18);
    }
    .ui-fact i { font-size: 10px; color: rgba(255, 255, 255, 0.8); }
    .ui-fact--person { padding-left: 4px; }
    .ui-fact__avatar {
        width: 22px; height: 22px; border-radius: 50%; flex: 0 0 22px;
        display: inline-flex; align-items: center; justify-content: center;
        background: rgba(255, 255, 255, 0.92); color: var(--custom_color_v2_dark_navi_blue);
        font-family: 'Custom-Font-Bold', sans-serif; font-size: 11px; font-weight: 700;
    }
    .ui-fact__avatar i { font-size: 9px; color: var(--custom_color_rolling_stone); }
    .ui-fact b { font-family: 'Custom-Font-Bold', sans-serif; font-weight: 700; }
    .ui-fact span { font-size: 10.5px; color: rgba(255, 255, 255, 0.78); text-transform: uppercase; letter-spacing: 0.3px; }

    /* ---------- body ---------- */
    .media-card__body { padding: 16px 20px; }
    .media-card__body--grid { display: flex; flex-direction: column; flex: 1 1 auto; padding: 14px 18px 14px; }
    .media-card__name {
        font-size: 17px;
        font-weight: 700;
        line-height: 1.25;
        color: var(--cc-ink);
        margin: 0 0 4px;
    }
    .media-card__blurb {
        font-size: 12.5px;
        line-height: 1.5;
        color: var(--cc-muted);
        margin: 0 0 12px;
        min-height: 2.9em;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .media-card__blurb.is-empty { color: var(--custom_color_bombay); font-style: italic; }
    .media-card__foot {
        margin-top: auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        padding-top: 12px;
        border-top: 1px dashed var(--cc-line);
    }
    .media-card__tag {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 4px 9px;
        border-radius: 999px;
        font-size: 11px;
        font-weight: 600;
        line-height: 1.2;
        color: var(--custom_color_outer_space);
        background: #fff;
        border: 1px solid var(--cc-line);
        white-space: nowrap;
    }
    .media-card__tag i { font-size: 10px; color: var(--cc-muted); }
    .media-card__link { font-size: 12px; font-weight: 700; color: var(--custom_color_matisse); white-space: nowrap; }
    .media-card__price { font-family: 'Custom-Font-Bold', sans-serif; font-size: 15px; font-weight: 700; color: var(--cc-navy, var(--custom_color_v2_dark_navi_blue)); white-space: nowrap; }
    .media-card__link i { font-size: 10px; margin-left: 4px; transition: transform .15s; }
    .media-card--link:hover .media-card__link i { transform: translateX(3px); }

    /* sections + label/value rows */
    .media-card__section { padding: 16px 20px; border-top: 1px solid var(--cc-tint); }
    .media-card__section--meta { padding-top: 12px; padding-bottom: 14px; font-size: 11px; color: var(--cc-muted); }
    .media-card__section-title {
        font-family: 'Custom-Font-Semibold', sans-serif;
        font-size: 11px;
        letter-spacing: 0.8px;
        text-transform: uppercase;
        color: var(--cc-muted);
        margin: 0 0 10px;
    }
    .media-card__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; }
    .media-card__row--block { display: block; }
    .media-card__row + .media-card__row { border-top: 1px dashed var(--cc-line); }
    .media-card__row-label {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 14px;
        color: var(--custom_color_outer_space);
        white-space: nowrap;
        flex-shrink: 0;
    }
    .media-card__row-label i { width: 18px; text-align: center; color: var(--cc-accent); font-size: 13px; }
    .media-card__row-value {
        font-family: 'Custom-Font-Semibold', sans-serif;
        font-size: 13.5px;
        color: var(--cc-ink);
        text-align: right;
        min-width: 0;
    }
    .media-card__row-value small { display: block; font-family: 'Custom-Font', sans-serif; font-size: 11px; color: var(--cc-muted); }
    .media-card__row-value a { color: var(--cc-navy); text-decoration: none; }
    .media-card__row-value a:hover { text-decoration: underline; }
    .media-card__row-value .is-empty { color: var(--custom_color_bombay); }
    .media-card__row-prefix { font-family: 'Custom-Font', sans-serif; font-size: 11px; color: var(--cc-muted); margin-right: 4px; }
    .media-card__pill {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 4px 12px;
        border-radius: 999px;
        font-family: 'Custom-Font-Semibold', sans-serif;
        font-size: 13px;
        background: var(--cc-tint);
        color: var(--cc-ink);
    }
    .media-card__pill--unlimited { background: #E6F1EE; color: var(--custom_color_v2_green); }
    .media-card__note {
        background: var(--custom_color_v2_light_cream);
        border-left: 3px solid var(--cc-accent);
        border-radius: 0 10px 10px 0;
        padding: 9px 12px;
        font-size: 13px;
        line-height: 1.45;
        color: var(--custom_color_outer_space);
        margin-top: 6px;
    }

    /* capacity meter (event) */
    .ui-meter { background: var(--cc-tint); border-radius: 14px; padding: 12px 14px 13px; }
    .ui-meter__head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
    .ui-meter__count { font-family: 'Custom-Font-Bold', sans-serif; font-size: 20px; line-height: 1; color: var(--cc-ink); }
    .ui-meter__count small { font-family: 'Custom-Font', sans-serif; font-size: 12px; color: var(--cc-muted); margin-left: 2px; }
    .ui-meter__pct { font-size: 12px; font-weight: 600; color: var(--cc-muted); }
    .ui-meter__bar { height: 8px; border-radius: 999px; background: #fff; overflow: hidden; box-shadow: inset 0 0 0 1px var(--cc-line); }
    .ui-meter__fill {
        height: 100%;
        border-radius: 999px;
        background: linear-gradient(90deg, var(--custom_color_v2_abstract_blue), var(--cc-navy));
        transition: width .4s ease;
    }
    .ui-meter__fill--full { background: linear-gradient(90deg, #C09438, #B07A3C); }
    .ui-meter__fill--cancelled { background: #C96A6A; }
    .ui-meter__hint { margin-top: 7px; font-size: 11px; color: var(--cc-muted); }

    /* collapsible section (toggle row + body) */
    .ui-collapsible { padding: 0; }
    .ui-collapsible__toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 13px 20px;
        text-decoration: none;
        color: var(--custom_color_outer_space);
        transition: background .15s;
    }
    .ui-collapsible__toggle:hover { background: var(--cc-tint); color: var(--custom_color_outer_space); }
    .ui-collapsible__toggle:focus-visible { outline: 2px solid var(--custom_color_matisse); outline-offset: -3px; }
    .ui-collapsible__label {
        display: flex;
        align-items: center;
        gap: 10px;
        font-family: 'Custom-Font-Semibold', sans-serif;
        font-size: 11px;
        letter-spacing: 0.8px;
        text-transform: uppercase;
        color: var(--cc-muted);
    }
    .ui-collapsible__label i { width: 18px; text-align: center; color: var(--cc-accent); font-size: 12px; }
    .ui-collapsible__chev { font-size: 10px; color: var(--cc-muted); transition: transform .2s; }
    .ui-collapsible__toggle[aria-expanded="true"] .ui-collapsible__chev { transform: rotate(180deg); }
    /* body indents past the toggle's icon (18px) + gap (10px) so child rows read as children of the title */
    .ui-collapsible__body { padding: 0 20px 12px 48px; }
    .ui-collapsible__body--flush { padding: 0; }
    .ui-collapsible + .ui-collapsible { border-top: 1px solid var(--cc-tint); }

    /* ---------- stacked cards + card header ---------- */
    .media-card--stack { margin-top: 14px; }
    .media-card__header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 14px 20px 12px;
    }
    .media-card__header-title {
        display: flex;
        align-items: center;
        gap: 10px;
        font-family: 'Custom-Font-Semibold', sans-serif;
        font-size: 14px;
        color: var(--cc-ink);
        margin: 0;
        white-space: nowrap;
    }
    .media-card__header-icon {
        width: 30px;
        height: 30px;
        border-radius: 9px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: var(--cc-tint);
        color: var(--cc-navy);
        font-size: 12px;
    }
    .media-card__header-meta { display: flex; gap: 6px; justify-content: flex-end; white-space: nowrap; }

/* ---------- meter, compact variant (table cells) ---------- */
/* detail-page card: fixed column on wide screens, full width on phones */
/* every detail card's hero is one height (member photo, membership, PT session, booking, class, product…), so the
   pages match side by side; the photo / initial / gradient fill it */
.media-card--detail .media-card__hero { aspect-ratio: auto; height: 340px; min-height: 0; max-height: none; }
/* a stronger shade from the middle down, so the white name and pills stay readable on any photo */
.media-card--detail .media-card__hero::after {
    background: linear-gradient(180deg, rgba(12, 27, 61, 0.35) 0%, rgba(12, 27, 61, 0) 28%, rgba(12, 27, 61, 0) 45%, rgba(12, 27, 61, 0.55) 68%, rgba(12, 27, 61, 0.92) 100%);
}
/* compact hero (media_hero.html compact=True): a card with no photo of its own (membership, PT session) – no big initial
   filling a 340px poster, just the accent gradient as tall as the chips, title and pills need */
.media-card--detail .media-card__hero--compact { height: auto; padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 22px; }
.media-card__hero--compact .media-card__top, .media-card__hero--compact .media-card__overlay { position: relative; inset: auto; top: auto; left: auto; right: auto; bottom: auto; }
/* compact hero (membership / PT detail): no photo to read over, so the facts drop the frosted pills for a quiet stats
   line — the date on its own row, then days left / gym / class spaced out beneath */
.media-card__hero--compact .media-card__facts { gap: 6px 18px; margin-top: 12px; }
.media-card__hero--compact .ui-fact {
    padding: 0; background: none; border: 0; border-radius: 0;
    box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; font-size: 13px; gap: 5px;
}
.media-card__hero--compact .ui-fact:first-child { flex-basis: 100%; color: rgba(255, 255, 255, 0.85); }
.media-card__hero--compact .ui-fact:first-child b { font-family: 'Custom-Font-Semibold', sans-serif; font-weight: 400; }
.media-card__hero--compact .ui-fact i { font-size: 11px; color: rgba(255, 255, 255, 0.55); margin-right: 2px; }
.media-card__hero--compact .ui-fact span { font-size: 12px; text-transform: none; letter-spacing: 0; color: rgba(255, 255, 255, 0.65); }
/* long names shrink instead of eating the photo */
.media-card__title.is-long { font-size: 20px; }
.media-card__title.is-xlong { font-size: 18px; }
/* a person's card (member profile): names are stored lower-case, show them as names */
.media-card--person .media-card__title { text-transform: capitalize; }
/* every detail card (member, membership, PT session, booking, class, product…) is one width on a desktop, so the pages match */
@media (min-width: 768px) { .media-card--detail { width: 328px; max-width: 328px; min-width: 328px; } }

/* ---------- detail-page shell ---------- */
.ui-detail-layout { display: flex; align-items: flex-start; gap: 20px; min-width: 0; }
.ui-detail-layout__aside { flex: 0 0 auto; min-width: 0; padding: 2px; }
.ui-detail-layout__content { flex: 1 1 auto; min-width: 0; padding: 12px 4px 0; }
@media (min-width: 992px) { .ui-detail-layout__aside { position: sticky; top: 18px; } }
/* desktop: the card starts as far below the main tabs as the member page's does (32px; the shell's 2px + 16px + tab gap) */
@media (min-width: 768px) { .ui-detail-layout__aside { padding-top: 16px; } }
/* the right column beside the card (member / membership / PT session detail pages): desktop drops it below the card's top */
@media (min-width: 768px) { .ui-detail-main { margin-top: 24px; padding-left: 40px !important; padding-right: 40px !important; } }   /* !important: beats the member pages' px-4 */
/* the card column on the left of those pages: desktop gives it room from the sidebar (!important: beats the member pages' p-2) */
@media (min-width: 768px) { .ui-detail-side { padding-left: 24px !important; } }
@media (max-width: 767.98px) {
    .ui-detail-layout--stacked { display: block; }
    .ui-detail-layout__aside { padding: 0; }
    .ui-detail-layout__content { padding: 18px 0 0; }
    .media-card--detail { width: 100%; }
}

/* ---------- meter, stat variant (detail cards): minimal — number, plain status word, thin bar, one line ---------- */
.ui-meter--stat { padding: 2px 0 0; background: transparent; border-radius: 0; }
.ui-meter--stat .ui-meter__head { align-items: baseline; margin-bottom: 8px; }
.ui-meter--stat .ui-meter__count { font-size: 22px; line-height: 1; letter-spacing: -0.3px; display: flex; align-items: baseline; gap: 6px; }
.ui-meter--stat .ui-meter__count small { font-family: 'Custom-Font-Semibold', sans-serif; font-size: 13px; color: var(--custom_color_rolling_stone); margin: 0; }
.ui-meter--stat .ui-meter__label { font-family: 'Custom-Font', sans-serif; font-size: 12.5px; color: var(--custom_color_rolling_stone); }
.ui-meter--stat .ui-meter__pct { font-family: 'Custom-Font-Semibold', sans-serif; font-size: 12px; color: var(--custom_color_v2_dark_navi_blue); }
.ui-meter--stat .ui-meter__bar { height: 6px; background: var(--custom_color_zircon); box-shadow: none; }
.ui-meter--stat .ui-meter__fill { background: var(--custom_color_v2_dark_navi_blue); }
.ui-meter--stat .ui-meter__hint { margin-top: 8px; font-size: 11.5px; color: var(--custom_color_rolling_stone); }
.ui-meter--stat.is-full .ui-meter__fill { background: #B07A3C; }
.ui-meter--stat.is-full .ui-meter__pct { color: #A87420; }
.ui-meter--stat.is-cancelled .ui-meter__fill { background: #C96A6A; }
.ui-meter--stat.is-cancelled .ui-meter__pct { color: #A32D2D; }

.ui-meter--compact { background: transparent; border-radius: 0; padding: 0; min-width: 84px; }
.ui-meter--compact .ui-meter__head { margin-bottom: 0; }
.ui-meter--compact .ui-meter__count { font-size: 12px; }
.ui-meter--compact .ui-meter__pct { font-size: 10.5px; }
.ui-meter--compact .ui-meter__bar { height: 5px; margin-top: 5px; background: var(--custom_color_zircon); box-shadow: none; }

/* ---------- page head (utils/common/header.html: title + subtitle) ---------- */
.ui-page-head { min-width: 0; }
.ui-page-head__title {
    font-family: 'Custom-Font-Bold', sans-serif; font-size: 30px; line-height: 1.15; letter-spacing: -0.022em;
    color: var(--custom_color_bunker); margin: 0;
}
/* short brand accent bar: navy → soft blue */
/* .ui-page-head__title::after {
    content: ""; display: block; width: 34px; height: 3px; border-radius: 999px; margin-top: 8px;
    background: linear-gradient(90deg, var(--custom_color_v2_dark_navi_blue) 0%, var(--custom_color_v2_soft_blue) 100%);
} */
.ui-page-head__sub {
    font-size: 14px; line-height: 1.5; letter-spacing: -0.004em; max-width: 60ch;
    color: var(--custom_color_rolling_stone); margin: 0px 0 0;
}
.ui-page-head__sub:empty { display: none; }
.ui-page-head__sub::first-letter { text-transform: uppercase; }
@media (max-width: 767.98px) {
    .ui-page-head__title { font-size: 24px; }
    .ui-page-head__sub { font-size: 13px; margin-top: 6px; }
}

/* ---------- card (form / settings sections), utils/common/ui/card_head.html ---------- */
.ui-card {
    background: #fff; border: 1px solid var(--custom_color_mercury); border-radius: 16px; padding: 20px 22px;
    box-shadow: var(--ui-card-shadow); min-width: 0;
}
.ui-card__head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 16px; }
.ui-card__icon {
    width: 36px; height: 36px; border-radius: 11px; flex: 0 0 36px; font-size: 14px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--custom_color_selago); color: var(--custom_color_matisse);
}
.ui-card__head-text { flex: 1 1 auto; min-width: 0; padding-top: 2px; }
.ui-card__head-aside { flex: 0 0 auto; align-self: center; }
.ui-card__title { font-family: 'Custom-Font-Bold', sans-serif; font-size: 15.5px; color: var(--custom_color_bunker); margin: 0; line-height: 1.3; }
.ui-card__sub { font-size: 12px; color: var(--custom_color_rolling_stone); margin: 3px 0 0; line-height: 1.45; }
.ui-card__sub a { font-weight: 600; }
/* folding card: the head is the toggle of a collapse (card_head.html `fold`); the body carries the head's gap so a
   collapsed card ends right under its subtitle */
.ui-card__head--fold { margin-bottom: 0; text-decoration: none; cursor: pointer; }
.ui-card__head--fold:hover .ui-card__title, .ui-card__head--fold:focus-visible .ui-card__title { color: var(--custom_color_matisse); }
.ui-card__head--fold:focus-visible { outline: 2px solid var(--custom_color_matisse); outline-offset: 6px; border-radius: 6px; }
.ui-card__chev {
    width: 28px; height: 28px; border-radius: 999px; flex: 0 0 28px; align-self: center; font-size: 11px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--custom_color_zircon); color: var(--custom_color_rolling_stone); transition: transform .2s, background .15s, color .15s;
}
.ui-card__head--fold:hover .ui-card__chev { background: var(--custom_color_selago); color: var(--custom_color_matisse); }
.ui-card__head--fold[aria-expanded="true"] .ui-card__chev { transform: rotate(180deg); }
.ui-card__body { padding-top: 16px; }

/* group inside a card: small caps label, dashed rule between groups */
.ui-group + .ui-group { border-top: 1px dashed var(--custom_color_mercury); margin-top: 16px; padding-top: 16px; }
.ui-group__label { font-size: 11px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--custom_color_rolling_stone); margin: 0 0 10px; }
.ui-group__hint { font-size: 11.5px; color: var(--custom_color_rolling_stone); margin: -6px 0 12px; line-height: 1.45; }

/* ---------- fields ---------- */
.ui-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; }
.ui-fields--1 { grid-template-columns: 1fr; }
.ui-fields--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ui-fields--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ui-fields + .ui-fields { margin-top: 14px; }
.ui-field { min-width: 0; }
.ui-field--full { grid-column: 1 / -1; }
.ui-label { display: block; font-size: 12.5px; font-weight: 600; color: var(--custom_color_outer_space); margin-bottom: 5px; line-height: 1.3; }
.ui-label--req::after { content: " *"; color: var(--custom_color_alizarin_crimson); }
.ui-help { font-size: 11.5px; color: var(--custom_color_rolling_stone); margin: 5px 0 0; line-height: 1.45; }
.ui-help b, .ui-help strong { color: var(--custom_color_outer_space); font-weight: 600; }
.ui-unit {
    background: var(--custom_color_solitude); color: var(--custom_color_rolling_stone); font-size: 12px; font-weight: 600;
    border-radius: 0 8px 8px 0 !important; justify-content: center; min-width: 64px; white-space: nowrap;
}
.ui-unit--lead { border-radius: 8px 0 0 8px !important; min-width: 48px; }
.ui-unit--mid { border-radius: 0 !important; }
.ui-field .form-control, .ui-field .form-select { border-radius: 8px; }
.ui-field .input-group > .form-control:first-child { border-top-left-radius: 8px; border-bottom-left-radius: 8px; }

/* colour swatch + file-with-preview fields (field_color.html / field_file.html) */
.ui-field--color input[type="color"] {
    width: 100%; height: 40px; padding: 3px; border-radius: 10px; border: 1px solid var(--custom_color_mercury); background: #fff; cursor: pointer;
}
.ui-file { display: flex; align-items: center; gap: 12px; }
.ui-file__preview { height: 56px; width: 56px; object-fit: contain; border-radius: 10px; background: var(--custom_color_zircon); border: 1px solid var(--custom_color_mercury); padding: 4px; flex: 0 0 56px; }
.ui-file__preview--wide { width: auto; max-width: 160px; flex-basis: auto; }

/* ---------- pick chips: checkboxes rendered as toggleable pills (utils/common/ui/pick.html) ---------- */
.ui-picks { display: flex; flex-wrap: wrap; gap: 8px; }
.ui-pick { margin: 0; cursor: pointer; user-select: none; }
.ui-pick input { position: absolute; opacity: 0; width: 0; height: 0; }
.ui-pick span {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px 6px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 500; line-height: 1.2;
    border: 1px solid var(--custom_color_mercury); background: #fff; color: var(--custom_color_outer_space);
    transition: background .15s, border-color .15s, color .15s, box-shadow .15s;
}
.ui-pick span::before {
    content: "\f067"; font-family: "Font Awesome 6 Free", "Font Awesome 5 Free"; font-weight: 900;
    font-size: 9px; width: 16px; height: 16px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--custom_color_zircon); color: var(--custom_color_bombay);
}
.ui-pick:hover span { border-color: var(--custom_color_regent_st_blue); background: var(--custom_color_alice_blue); }
.ui-pick input:checked + span { background: var(--custom_color_matisse); border-color: var(--custom_color_matisse); color: #fff; }
.ui-pick input:checked + span::before { content: "\f00c"; background: rgba(255,255,255,.22); color: #fff; }
.ui-pick input:focus-visible + span { box-shadow: 0 0 0 3px var(--custom_color_solitude); }

/* explanations of the options of one control */
.ui-defs { margin: 8px 0 0; padding: 0; list-style: none; display: grid; gap: 5px; }
.ui-defs li { font-size: 11.5px; color: var(--custom_color_rolling_stone); line-height: 1.45; padding-left: 12px; position: relative; }
.ui-defs li::before { content: ""; position: absolute; left: 0; top: 7px; width: 4px; height: 4px; border-radius: 50%; background: var(--custom_color_regent_st_blue); }
.ui-defs b { color: var(--custom_color_outer_space); font-weight: 600; }

/* ---------- note callout ---------- */
.ui-note {
    display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 10px;
    background: var(--custom_color_alice_blue); border: 1px solid var(--custom_color_regent_st_blue);
    font-size: 12px; color: var(--custom_color_outer_space); line-height: 1.45;
}
.ui-note > i { color: var(--custom_color_matisse); margin-top: 2px; flex: 0 0 auto; }
.ui-note a { font-weight: 600; }
.ui-note--warn { background: #FBF0DA; border-color: #E8CF98; }
.ui-note--warn > i { color: #8A5A00; }
.ui-note--muted { background: var(--custom_color_zircon); border-color: var(--custom_color_mercury); }
.ui-note--muted > i { color: var(--custom_color_rolling_stone); }

/* ---------- switch row (title + description left, MDB switch right), utils/common/ui/switch_row.html ---------- */
.ui-switch-list { display: flex; flex-direction: column; }
.ui-switch-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--custom_color_zircon); }
.ui-switch-list > .ui-switch-row:last-child { border-bottom: 0; }
.ui-switch-row__text { min-width: 0; flex: 1 1 auto; }
.ui-switch-row__title { font-size: 13px; font-weight: 600; color: var(--custom_color_bunker); line-height: 1.3; margin: 0; }
.ui-switch-row__desc { font-size: 11.5px; color: var(--custom_color_rolling_stone); line-height: 1.4; margin: 2px 0 0; }
.ui-switch-row .form-check { margin: 0; padding: 0; min-height: 0; flex: 0 0 auto; }
.ui-switch-row .form-check-input { margin: 0; float: none; }
.ui-switch-row--sub { padding-left: 16px; }
.ui-switch-row.is-disabled .ui-switch-row__title, .ui-switch-row.is-disabled .ui-switch-row__desc { opacity: .5; }

/* ---------- line tabs = a segmented control (sub tabs; scrolls sideways on phones) ----------
   A light grey rounded track as wide as its tabs; the current tab is a white pill with a soft shadow – a quiet
   level below the navy main tabs. */
.ui-linetabs {
    display: flex; gap: 2px; width: fit-content; max-width: 100%; padding: 4px; margin-bottom: 8px;
    background: #EEF1F6; border-radius: 12px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.ui-linetabs::-webkit-scrollbar { display: none; }
.ui-linetabs__tab {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 8px 16px; flex: 0 0 auto;
    font-size: 13px; font-weight: 600; color: var(--custom_color_rolling_stone); text-decoration: none; white-space: nowrap;
    border-radius: 9px; transition: color .15s, background .15s, box-shadow .15s;
}
.ui-linetabs__tab i { font-size: 12px; opacity: .8; }
.ui-linetabs__tab:hover { color: var(--custom_color_v2_dark_navi_blue); }
.ui-linetabs__tab.is-active {
    color: var(--custom_color_v2_dark_navi_blue); font-family: 'Custom-Font-Bold', sans-serif; background: #fff;
    box-shadow: 0 1px 2px rgba(12, 27, 61, 0.08), 0 2px 8px -2px rgba(12, 27, 61, 0.14);
}
/* desktop: tabs of one minimum width, so a short label ("List") is as wide as a long one */
@media (min-width: 768px) {
    .ui-linetabs__tab { min-width: 120px; }
}

/* ---------- sticky save bar ---------- */
.ui-savebar {
    position: sticky; bottom: 0; z-index: 5; margin-top: 22px; padding: 12px 0;
    display: flex; align-items: center; justify-content: flex-end; gap: 12px;
    background: #fff;   /* solid: a sticky backdrop-filter re-blurs on every scroll frame */
    border-top: 1px solid var(--custom_color_mercury);
}
.ui-savebar__hint { font-size: 12px; color: var(--custom_color_rolling_stone); margin: 0; flex: 1 1 auto; min-width: 0; }
.ui-savebar .btn { flex: 0 0 auto; white-space: nowrap; }

/* ---------- layout helpers ---------- */
.ui-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; }
.ui-cols > * { min-width: 0; }
.ui-stack > * + * { margin-top: 18px; }

@media (max-width: 1199px) {
    .ui-cols { grid-template-columns: 1fr; }   /* settings pages sit beside TWO side navs: below xl the content column is too narrow for two cards */
    .ui-savebar__hint { display: none; }
}
@media (max-width: 991px) {
    .ui-fields--3, .ui-fields--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575px) {
    .ui-card { padding: 16px; border-radius: 14px; }
    .ui-fields, .ui-fields--3, .ui-fields--4 { grid-template-columns: 1fr; }
    .ui-savebar { flex-direction: column; align-items: stretch; }
    .ui-savebar .btn { width: 100%; }
    .ui-savebar__hint { display: none; }
}
.ui-linetabs__tab .badge { font-size: 10px; padding: 3px 7px; border-radius: 999px; vertical-align: middle; }
/* ---------- stat tiles (headline numbers above a detail tab's lists) ----------
   Plain and airy, like the PT session summary: an icon circle, a label, a value.
   No card, no border: two per row with generous gaps. A state (ok / warn / danger)
   only tints the value and its icon, so the eye lands on what needs attention. */
.ui-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 48px; margin: 8px 0 44px; }
.ui-stat { display: flex; align-items: center; gap: 16px; min-width: 0; }
.ui-stat__icon {
    width: 44px; height: 44px; flex: 0 0 44px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--custom_color_zircon); color: var(--custom_color_bunker); font-size: 15px;
}
.ui-stat__text { min-width: 0; }
.ui-stat__label { font-family: 'Custom-Font-Semibold', sans-serif; font-size: 14px; color: var(--custom_color_bunker); }
.ui-stat__value {
    margin-top: 3px; font-size: 14px; color: var(--custom_color_outer_space); font-variant-numeric: tabular-nums;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ui-stat__value--chips { display: flex; flex-wrap: wrap; gap: 4px 6px; margin-top: 6px; white-space: normal; overflow: visible; }
.ui-stat__value small { font-size: 12px; color: var(--custom_color_rolling_stone); margin-left: 3px; }
.ui-stat__value--money small { margin: 0 3px 0 0; }
.ui-stat--ok .ui-stat__value { color: #2E7A50; font-weight: 600; }
.ui-stat--ok .ui-stat__icon { background: #E6F3EC; color: #2E7A50; }
.ui-stat--warn .ui-stat__value { color: #A87420; font-weight: 600; }
.ui-stat--warn .ui-stat__icon { background: #FBF1DD; color: #A87420; }
.ui-stat--danger .ui-stat__value { color: #A32D2D; font-weight: 600; }
.ui-stat--danger .ui-stat__icon { background: #FBE7E7; color: #A32D2D; }
/* a Summary grid that closes a section before the next one: extra room below */
.ui-stats--section { margin-bottom: 60px; }
@media (min-width: 768px) { .ui-stats--section { margin-bottom: 84px; } }   /* desktop: more air before the list that follows */
@media (max-width: 575px) { .ui-stats { grid-template-columns: 1fr; gap: 18px; margin-bottom: 32px; } .ui-stat__icon { width: 40px; height: 40px; flex-basis: 40px; } }

/* ---------- KPI band: one card of headline figures split by hairlines (report heads) ----------
   .ui-kpis > .ui-kpi (--lead = the wider first figure) > __label (+ __dot--danger/--warn), __value (+ small unit), __sub.
   Phones: the lead spans the card, the rest pair up below it. */
.ui-kpis {
    display: grid; grid-template-columns: 1.4fr repeat(2, minmax(0, 1fr)); margin: 4px 0 40px;
    border: 1px solid var(--custom_color_mercury); border-radius: 16px; background: #fff; box-shadow: var(--ui-card-shadow);
}
.ui-kpi { padding: 20px 24px; min-width: 0; }
.ui-kpi + .ui-kpi { border-left: 1px solid var(--custom_color_zircon); }
.ui-kpi__label { display: flex; align-items: center; gap: 8px; font-family: 'Custom-Font-Semibold', sans-serif; font-size: 13px; color: var(--custom_color_rolling_stone); }
.ui-kpi__dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 8px; background: var(--custom_color_bombay); }
.ui-kpi__dot--danger { background: #D46A6A; }
.ui-kpi__dot--warn { background: #DDA843; }
.ui-kpi__value {
    margin-top: 8px; font-family: 'Custom-Font-Bold', sans-serif; font-size: 20px; line-height: 1.15; color: var(--custom_color_bunker);
    font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ui-kpi__value small { font-family: 'Custom-Font-Semibold', sans-serif; font-size: 13px; color: var(--custom_color_rolling_stone); margin-right: 5px; }
.ui-kpi__value--danger { color: #A32D2D; }
.ui-kpi--lead .ui-kpi__value { font-size: 28px; letter-spacing: -0.02em; }
.ui-kpi__sub { margin-top: 4px; font-size: 12px; color: var(--custom_color_rolling_stone); }
.ui-kpi .ui-bar { margin-top: 14px; }
@media (max-width: 767px) {
    .ui-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 28px; }
    .ui-kpi { padding: 16px; }
    .ui-kpi + .ui-kpi { border-left: 0; }
    .ui-kpi--lead { grid-column: 1 / -1; border-bottom: 1px solid var(--custom_color_zircon); }
    .ui-kpi--lead + .ui-kpi + .ui-kpi { border-left: 1px solid var(--custom_color_zircon); }
    .ui-kpi--lead .ui-kpi__value { font-size: 24px; }
    .ui-kpi__value { font-size: 17px; }
}

/* ---------- thin bar: one fill (a share) or several segments side by side (a split) — <div class="ui-bar"><span style="width: N%"> ---------- */
.ui-bar { display: flex; gap: 2px; height: 6px; border-radius: 999px; background: var(--custom_color_zircon); overflow: hidden; }
.ui-bar > span { display: block; height: 100%; border-radius: 999px; background: var(--custom_color_v2_dark_navi_blue); }
.ui-bar > span.is-danger { background: #D46A6A; }
.ui-bar > span.is-warn { background: #DDA843; }

/* ---------- progress cell: "Rp X paid · 40%" over a thin bar (table rows, list cards) ---------- */
.ui-progress { min-width: 150px; max-width: 240px; }
.ui-progress__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 6px; font-size: 12.5px; color: var(--custom_color_outer_space); white-space: nowrap; }
.ui-progress__head > span:first-child { overflow: hidden; text-overflow: ellipsis; }
.ui-progress__pct { font-family: 'Custom-Font-Semibold', sans-serif; font-size: 11.5px; color: var(--custom_color_rolling_stone); }
.ui-progress--none .ui-progress__head { color: #A32D2D; }
.ui-list-card .ui-progress { max-width: none; margin-top: 12px; }

/* ---------- tab page (stat tiles, then line tabs, then one list): roomier rhythm ---------- */
.ui-tab-page .ui-linetabs { margin-bottom: 24px; }
@media (min-width: 768px) { .ui-tab-page .ui-linetabs { margin-left: auto; margin-right: auto; } }   /* desktop: the sub tabs sit centred over the page */
@media (max-width: 767px) { .ui-tab-page .ui-linetabs { width: 100%; } .ui-tab-page .ui-linetabs__tab { flex: 1 0 auto; } }   /* phone: the track spans the page, its tabs share it */
/* --fit: a short strip that must show every tab on a phone (report sub tabs): its tabs share the track and pad tighter instead of scrolling */
@media (max-width: 575px) { .ui-linetabs--fit { width: 100%; } .ui-linetabs--fit .ui-linetabs__tab { flex: 1 1 auto; padding: 8px 10px; } }
.ui-tab-page .ui-section-head { margin-bottom: 18px; align-items: center; }
.ui-tab-page .ui-section-head__sub { margin-top: 4px; }
.ui-tab-page .ui-table thead th { padding-left: 18px; padding-right: 18px; }
.ui-tab-page .ui-table tbody td { padding: 15px 18px; }
/* Complete rows carry four more columns: back to the kit's side padding so they fit */
.ui-tab-page .ui-viewmode.is-complete .ui-table thead th,
.ui-tab-page .ui-viewmode.is-complete .ui-table tbody td { padding-left: 12px; padding-right: 12px; }
.ui-tab-page .ui-list-card { margin-bottom: 12px; padding: 14px 16px; }

/* ---------- ranked list (position, name + figure, share bar) ---------- */
.ui-rank-list { border: 1px solid var(--custom_color_mercury); border-radius: 16px; background: #fff; overflow: hidden; }
.ui-rank-row {
    display: flex; align-items: center; gap: 16px; padding: 14px 18px; text-decoration: none; color: inherit;
    transition: background .15s;
}
.ui-rank-row + .ui-rank-row { border-top: 1px solid var(--custom_color_zircon); }
.ui-rank-row:hover { background: var(--custom_color_alice_blue); color: inherit; }
.ui-rank-row__rank {
    width: 26px; flex: 0 0 26px; text-align: center; font-family: 'Custom-Font-Bold', sans-serif; font-size: 14px;
    color: var(--custom_color_rolling_stone);
}
.ui-rank-row__rank.is-top { color: #A87420; }
.ui-rank-row__main { flex: 1 1 auto; min-width: 0; }
.ui-rank-row__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; min-width: 0; }
.ui-rank-row__figure { flex: 0 0 auto; font-size: 12.5px; color: var(--custom_color_rolling_stone); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ui-rank-row__figure b { color: var(--custom_color_bunker); font-weight: 700; }
.ui-rank-row__bar { height: 6px; border-radius: 999px; background: var(--custom_color_zircon); overflow: hidden; margin-top: 9px; }
.ui-rank-row__bar span { display: block; height: 100%; border-radius: 999px; background: var(--custom_color_v2_dark_navi_blue); }
@media (max-width: 575px) {
    .ui-rank-row { gap: 12px; padding: 12px 14px; }
}

/* ---------- plan card (a membership / PT session on the member page) ----------
   White body: name + dates on top with the menu; in Complete mode thin usage + time meters. The foot is a band in the
   status colour (--tone) holding the solid status chip and the price; the border stays neutral on every status:
   active blue, pending / upcoming yellow, terminated black, expired red. */
.ui-plan-card {
    --tone: 59, 113, 202;
    position: relative; height: 100%; display: flex; flex-direction: column; gap: 14px; min-height: 0;
    background: #fff; border: 1px solid var(--custom_color_mercury); border-radius: 16px; padding: 16px;
    box-shadow: var(--ui-card-shadow); cursor: pointer; overflow: hidden;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.ui-plan-card:hover { transform: translateY(-2px); border-color: var(--custom_color_regent_st_blue); box-shadow: var(--ui-card-shadow-hover); }
.ui-plan-card:has(.dropdown-menu.show) { overflow: visible; z-index: 1050; }
/* status colours, same as its chip: active blue (the base MDB primary #3B71CA, not indigo-leaning #2563EB), pending / upcoming yellow, terminated black, expired / completed red */
.ui-plan-card.is-active { --tone: 59, 113, 202; }
.ui-plan-card.is-pending, .ui-plan-card.is-upcoming { --tone: 234, 179, 8; }
.ui-plan-card.is-terminated { --tone: 17, 24, 39; }
.ui-plan-card.is-expired, .ui-plan-card.is-completed { --tone: 220, 38, 38; }
/* the status chip (gym_member/components/card/plan_status_chip.html): solid in the card's colour */
.ui-plan-card__status .ui-chip { background: rgb(var(--tone)); color: #fff; }
.ui-plan-card.is-pending .ui-plan-card__status .ui-chip, .ui-plan-card.is-upcoming .ui-plan-card__status .ui-chip { color: #422006; }   /* white on yellow is unreadable */
.ui-plan-card.is-archived { opacity: .7; }
.ui-plan-card__top { display: flex; align-items: flex-start; gap: 12px; }
/* membership type icon (member page lists): regular blue, shareable teal, shared with this member purple */
.ui-plan-card__icon {
    --kind: 47, 111, 219;
    flex-shrink: 0; width: 42px; height: 42px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center;
    background: rgba(var(--kind), .1); color: rgb(var(--kind)); font-size: 16px;
}
.ui-plan-card__icon.is-shareable { --kind: 12, 146, 110; }
.ui-plan-card__icon.is-shared { --kind: 112, 72, 232; }
/* PT card (gym_member/components/card/pt_session_card.html): compact – slim sessions bar in the status colour,
   one meta line under it (used / left, price) */
.ui-pt-card { gap: 12px; padding: 14px 16px; }
.ui-pt-card__usage { margin-top: auto; display: flex; flex-direction: column; gap: 8px; }
.ui-pt-card__bar { height: 6px; border-radius: 999px; background: rgba(var(--tone), .12); overflow: hidden; }
.ui-pt-card__bar span { display: block; height: 100%; border-radius: 999px; background: rgb(var(--tone)); }
.ui-pt-card__meta { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 12px; color: var(--custom_color_rolling_stone); white-space: nowrap; }
.ui-pt-card__used b { font-family: 'Custom-Font-Bold', sans-serif; font-weight: 400; font-size: 14px; color: rgb(var(--tone)); }
.ui-pt-card__used i { font-size: 10px; }
.ui-pt-card__used { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ui-pt-card__days { margin-left: 8px; padding-left: 8px; border-left: 1px solid var(--custom_color_mercury); color: var(--custom_color_bunker); }
.ui-plan-card__days { margin: 3px 0 0; font-size: 12px; color: var(--custom_color_rolling_stone); }
.ui-plan-card__heading { flex: 1; min-width: 0; padding-top: 1px; }
.ui-plan-card__title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.ui-plan-card__actions { display: flex; align-items: center; gap: 2px; flex-shrink: 0; margin-top: -2px; }
/* the chevron that opens / folds every card's details (plan_card.html expand): points up while open */
.ui-plan-card__expand i { font-size: 12px; transition: transform .2s; }
.ui-viewmode.is-complete .ui-plan-card__expand i { transform: rotate(180deg); }
.ui-viewmode.is-complete .ui-plan-card__expand { color: var(--custom_color_v2_dark_navi_blue); }
.ui-plan-card__name { margin: 0; font-family: 'Custom-Font-Bold', sans-serif; font-size: 15.5px; line-height: 1.3; color: var(--custom_color_bunker); overflow-wrap: anywhere; }
.ui-plan-card__period { margin: 4px 0 0; font-size: 12px; line-height: 1.4; color: var(--custom_color_rolling_stone); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-plan-card__owner { margin: 3px 0 0; font-size: 12px; color: var(--custom_color_rolling_stone); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-plan-card__owner b { font-family: 'Custom-Font-Semibold', sans-serif; font-weight: 400; color: rgb(112, 72, 232); }
/* Complete view: usage + time as tiles in one soft strip. */
.ui-plan-card__tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 1px; background: var(--custom_color_mercury); border-radius: 12px; overflow: hidden; }
.ui-plan-card__tile { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 10px 12px 12px; background: #F7F9FC; }
.ui-plan-card__tile-label { font-size: 11px; color: var(--custom_color_rolling_stone); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-plan-card__tile-label i { font-size: 10px; margin-right: 5px; opacity: .8; }
.ui-plan-card__tile-value { display: flex; align-items: baseline; gap: 4px; font-family: 'Custom-Font-Bold', sans-serif; font-size: 17px; line-height: 1.2; color: var(--custom_color_bunker); white-space: nowrap; }
.ui-plan-card__tile-value i { font-size: 13px; }
.ui-plan-card__tile-value small { font-family: 'Custom-Font', sans-serif; font-size: 11px; color: var(--custom_color_rolling_stone); }
.ui-plan-card__tile-value.is-muted { font-family: 'Custom-Font-Semibold', sans-serif; font-size: 13px; color: var(--custom_color_rolling_stone); }
.ui-plan-card__tile .ui-plan-card__bar { margin-top: auto; height: 4px; }
.ui-plan-card__bar { height: 6px; border-radius: 999px; background: var(--custom_color_zircon); overflow: hidden; }
.ui-plan-card__tile .ui-plan-card__bar { background: #E4E9F2; }
.ui-plan-card__bar span { display: block; height: 100%; border-radius: 999px; background: var(--custom_color_v2_dark_navi_blue); }
.ui-plan-card__bar--time span { background: var(--custom_color_regent_st_blue); }
.ui-plan-card__tile .ui-plan-card__bar span { background: rgb(var(--tone)); }
/* the foot: a full-width band in the status colour, status chip left, price right */
.ui-plan-card__foot {
    margin: auto -16px -16px; padding: 10px 16px; display: flex; align-items: center; justify-content: space-between; gap: 8px;
    background: rgba(var(--tone), .16); border-top: 1px solid var(--custom_color_mercury);
    font-size: 12px; color: var(--custom_color_rolling_stone);
}
.ui-plan-card__foot-left { display: flex; align-items: center; gap: 6px; min-width: 0; }
.ui-plan-card__foot b { color: var(--custom_color_bunker); font-family: 'Custom-Font-Bold', sans-serif; font-weight: 400; font-size: 14.5px; }
.ui-pt-card .ui-plan-card__foot { margin: 0 -16px -14px; }   /* the usage above already takes the slack */

/* ---------- member page tabs on a phone (gym_member/components/tab/detail.html): one dropdown ----------
   More room above (under the page title), little below, so the tab's own sub-tabs follow closely. */
.member-tab-menu { margin: 18px 0 4px; }
.member-tab-menu__button {
    width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 12px 16px; border: 1px solid var(--custom_color_mercury); border-radius: 12px; background: #fff;
    box-shadow: var(--ui-card-shadow);
    font-family: 'Custom-Font-Semibold', sans-serif; font-size: 15px; color: var(--custom_color_bunker);
}
.member-tab-menu__button i:first-child { width: 18px; margin-right: 10px; color: var(--custom_color_v2_dark_navi_blue); font-size: 14px; }
.member-tab-menu__chev { font-size: 12px; color: var(--custom_color_rolling_stone); transition: transform .15s; }
.member-tab-menu__button[aria-expanded="true"] .member-tab-menu__chev { transform: rotate(180deg); }
.member-tab-menu__list { width: 100%; padding: 6px; border: none; border-radius: 12px; box-shadow: 0 10px 28px rgba(12, 27, 61, 0.14); margin-top: 6px !important; }
.member-tab-menu__item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 8px; font-size: 14px; color: var(--custom_color_outer_space); }
.member-tab-menu__item > i:first-child { width: 18px; text-align: center; font-size: 13px; color: var(--custom_color_bombay, #94a3b8); }
.member-tab-menu__item.is-current { background: var(--custom_color_alice_blue); color: var(--custom_color_v2_dark_navi_blue); font-family: 'Custom-Font-Semibold', sans-serif; }
.member-tab-menu__item.is-current > i:first-child { color: var(--custom_color_v2_dark_navi_blue); }
.member-tab-menu__check { margin-left: auto; font-size: 11px; color: var(--custom_color_v2_dark_navi_blue); }
.member-tab-menu__lock { font-size: 9px; opacity: .6; }
@media (max-width: 767px) {
    .ui-tab-page.mt-4 { margin-top: 12px !important; }
    .ui-tab-page .ui-linetabs { margin-bottom: 16px; }   /* the first section sits closer to the tabs on a phone */
}

/* ---------- a section head that opens / closes its body (member Summary on a phone) ---------- */
.ui-section-head--toggle { text-decoration: none; color: inherit; cursor: pointer; flex-wrap: nowrap; align-items: center; }
.ui-section-head--toggle:hover { color: inherit; }
.ui-section-head__chev { font-size: 13px; color: var(--custom_color_rolling_stone); transition: transform .2s; flex-shrink: 0; }
.ui-section-head--toggle[aria-expanded="true"] .ui-section-head__chev { transform: rotate(180deg); }
/* collapsed: no grid gap under the head; open: the grid keeps its own spacing */
.ui-stats.collapse:not(.show), .ui-stats.collapsing { margin-bottom: 0; }
.ui-stats.collapsing { display: grid; overflow: hidden; }

/* sections stacked on a detail page's body with generous room between them */
.ui-stack-lg > * + * { margin-top: 44px; }

/* ---------- usage lines (allowances of a membership / package on its detail card) ---------- */
.ui-usage { display: flex; flex-direction: column; gap: 16px; }
.ui-usage__item { display: flex; align-items: flex-start; gap: 12px; }
.ui-usage__icon {
    width: 32px; height: 32px; flex: 0 0 32px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center;
    background: var(--custom_color_zircon); color: var(--custom_color_v2_dark_navi_blue); font-size: 13px;
}
.ui-usage__body { flex: 1 1 auto; min-width: 0; padding-top: 6px; }
.ui-usage__head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 7px; }
.ui-usage__label { font-size: 13.5px; color: var(--custom_color_outer_space); }
.ui-usage__value { font-size: 13px; color: var(--custom_color_rolling_stone); white-space: nowrap; }
.ui-usage__value b { font-family: 'Custom-Font-Bold', sans-serif; font-weight: 400; font-size: 15px; color: var(--custom_color_bunker); }
.ui-usage__value small { font-size: 12px; margin-left: 3px; }
.ui-usage__value i { font-size: 11px; margin-right: 5px; color: var(--custom_color_v2_dark_navi_blue); }
.ui-usage__value.is-muted { color: var(--custom_color_bombay, #9AA3B2); }
.ui-usage__hint { margin-top: 5px; font-size: 11px; color: var(--custom_color_rolling_stone); }
.ui-usage__item:not(:has(.ui-plan-card__bar)) .ui-usage__head { margin-bottom: 0; }
.ui-usage__item.is-off .ui-usage__icon { color: var(--custom_color_bombay, #9AA3B2); }

/* a value you can open (a member, a sales rep): brand blue, underlined on hover, with a small arrow */
.ui-link { color: var(--custom_color_blue_3, #2F6FDB) !important; text-decoration: none; }
.ui-link i { font-size: 10px; margin-left: 5px; opacity: .8; transition: transform .15s; }
.ui-link:hover { text-decoration: underline !important; }
.ui-link:hover i { transform: translateX(2px); }

/* thin progress bar right under a media card's hero (e.g. how much of a membership's period is gone) */
.media-card__progress { height: 4px; background: var(--custom_color_zircon); }
.media-card__progress span { display: block; height: 100%; background: var(--custom_color_regent_st_blue); border-radius: 0 999px 999px 0; }

/* small round icon button beside a value (copy, WhatsApp) */
.ui-icon-btn {
    width: 26px; height: 26px; flex: 0 0 26px; border-radius: 8px; border: 0; padding: 0;
    display: inline-flex; align-items: center; justify-content: center; font-size: 12px;
    background: var(--custom_color_zircon); color: var(--custom_color_v2_dark_navi_blue); text-decoration: none; cursor: pointer;
    transition: background .15s, color .15s;
}
.ui-icon-btn:hover { background: var(--custom_color_alice_blue); color: var(--custom_color_v2_dark_navi_blue); }
.ui-icon-btn.is-done { background: #E6F3EC; color: #2E7A50; }
.ui-icon-btn--whatsapp { color: #1FA855; }
.ui-icon-btn--whatsapp:hover { background: #E6F7ED; color: #128C3E; }
/* over a photo (e.g. copy beside a media card's hero title): frosted white, like the frosted kebab */
.ui-icon-btn--frost { background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); }
.ui-icon-btn--frost:hover { background: #fff; }
.ui-icon-btn--frost.is-done { background: #E6F3EC; color: #2E7A50; }
.media-card__title-row { display: flex; align-items: center; gap: 8px; }
.media-card__title-row .media-card__title { min-width: 0; overflow-wrap: anywhere; }

/* compact pill for a row's one quick action (e.g. Check in a booking): soft tint at rest, solid on hover.
   Sits beside .ui-kebab (same 30px height). Tones: default navy, --success green. */
.ui-action-pill {
    height: 30px; display: inline-flex; align-items: center; gap: 7px; padding: 0 12px 0 4px;
    border: 0; border-radius: 999px; cursor: pointer; white-space: nowrap; text-decoration: none;
    font-family: 'Custom-Font-Semibold', sans-serif; font-size: 12.5px; letter-spacing: .2px;
    background: var(--custom_color_zircon); color: var(--custom_color_v2_dark_navi_blue);
    box-shadow: inset 0 0 0 1px rgba(30, 58, 138, .08);
    transition: background .18s, color .18s, box-shadow .18s, transform .18s;
}
.ui-action-pill__icon {
    width: 22px; height: 22px; flex: 0 0 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
    font-size: 10px; background: #fff; color: inherit; box-shadow: 0 1px 2px rgba(17, 23, 27, .08); transition: transform .18s;
}
.ui-action-pill:hover { background: var(--custom_color_v2_dark_navi_blue); color: #fff; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(30, 58, 138, .22); }
.ui-action-pill:hover .ui-action-pill__icon { color: var(--custom_color_v2_dark_navi_blue); transform: scale(1.06); }
.ui-action-pill:active { transform: translateY(0); box-shadow: none; }
.ui-action-pill:focus-visible { outline: 2px solid var(--custom_color_regent_st_blue); outline-offset: 2px; }
.ui-action-pill--success { background: #E6F1EE; color: var(--custom_color_v2_green); box-shadow: inset 0 0 0 1px rgba(46, 122, 80, .14); }
.ui-action-pill--success:hover { background: var(--custom_color_v2_green); color: #fff; box-shadow: 0 4px 12px rgba(46, 122, 80, .28); }
.ui-action-pill--success:hover .ui-action-pill__icon { color: var(--custom_color_v2_green); }

/* ---------- list head actions (a view switch + an add link, e.g. Simple / Complete + Buy membership) ----------
   Desktop: side by side with room between. Phone: the row drops under the title and spreads edge to edge. */
.ui-list-actions { display: flex; align-items: center; gap: 28px; }
@media (max-width: 767px) { .ui-list-actions { width: 100%; justify-content: space-between; gap: 12px; } }
/* desktop: title left, the view switch centred, the add link right (member Membership / PT Session lists) */
@media (min-width: 768px) {
    .ui-section-head--3 { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
    .ui-section-head--3 .ui-list-actions { display: contents; }
    .ui-section-head--3 .ui-list-actions > :last-child { justify-self: end; }
}

/* ---------- segmented toggle (two or three view modes in a section head) ---------- */
.ui-seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 10px; background: var(--custom_color_zircon); flex: 0 0 auto; }
.ui-seg__opt {
    border: 0; background: transparent; cursor: pointer;
    display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 8px;
    font-size: 12px; font-weight: 600; color: var(--custom_color_rolling_stone); text-decoration: none; white-space: nowrap;
    transition: color .15s, background .15s, box-shadow .15s;
}
.ui-seg__opt i { font-size: 11px; opacity: .8; }
.ui-seg__opt:hover { color: var(--custom_color_v2_dark_navi_blue); }
/* a list whose extra detail the Simple / Complete toggle shows in place */
.ui-viewmode:not(.is-complete) .ui-complete-only { display: none !important; }
.ui-seg__opt.is-active { background: #fff; color: var(--custom_color_v2_dark_navi_blue); box-shadow: 0 1px 3px rgba(12, 27, 61, 0.12); }

/* ---------- compact key/value rows (commission tiers, small specs) ---------- */
.ui-kv { display: grid; grid-template-columns: max-content max-content; gap: 2px 14px; margin: 0; font-size: 12.5px; align-items: baseline; }
.ui-kv dt { font-weight: 500; color: var(--custom_color_rolling_stone); margin: 0; }
.ui-kv dd { margin: 0; color: var(--custom_color_bunker); font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.ui-choice--1 { grid-template-columns: 1fr; }
.ui-choice--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 575px) { .ui-choice--3 { grid-template-columns: 1fr; } }

/* ---------- mobile top bar (frontend_base/component/navbar.html) ----------
   Three slots: burger | title | page action. Equal-width side slots keep the title centred on the screen
   whatever sits on either side (plus button, camera scan/stop pair, or nothing); long titles wrap to two centred lines. */
.ui-topbar { display: grid; grid-template-columns: 76px minmax(0, 1fr) 76px; align-items: center; }
.ui-topbar > :first-child { justify-self: start; }
.ui-topbar__title {
    min-width: 0; text-align: center; font-size: 18px; line-height: 1.25; padding: 4px 0;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;   /* long titles: two centred lines, then clip */
}
.ui-topbar__end { display: flex; justify-content: flex-end; align-items: center; }
/* the icon-only page actions carry a trailing me-2 from the shared markup (camera scan / stop): that 8px would push
   the ~85px button past its 76px slot and over the centred title, so it is dropped inside the bar. */
.ui-topbar__end .btn { margin-right: 0 !important; }
.ui-topbar__end .btn > i { margin-right: 0 !important; }

/* ---------- time picker (utils/common/js/time_picker.html on input[data-timepicker]; field_time.html / time_input.html) ---------- */
.ui-timepick {
    position: fixed; z-index: 1100; min-width: 132px; max-height: 232px; overflow-y: auto; padding: 6px;
    background: #fff; border: 1px solid var(--custom_color_mercury); border-radius: 12px;
    box-shadow: 0 12px 32px rgba(12, 27, 61, 0.14), 0 2px 6px rgba(12, 27, 61, 0.06); scrollbar-width: thin;
}
.ui-timepick__item {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 10px; border-radius: 8px;
    font-size: 13px; color: var(--custom_color_bunker); cursor: pointer; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.ui-timepick__item:hover { background: var(--custom_color_zircon); }
.ui-timepick__item.is-active { background: var(--custom_color_matisse); color: #fff; }
.ui-timepick__item small { font-size: 10.5px; color: var(--custom_color_rolling_stone); }
.ui-timepick__item.is-active small { color: rgba(255, 255, 255, 0.75); }
.ui-field--time .ui-field__control { position: relative; }
.ui-field--time .form-control { padding-right: 32px; }
.ui-field--time .ui-field__icon {
    position: absolute; right: 11px; top: 50%; transform: translateY(-50%);
    font-size: 12px; color: var(--custom_color_bombay); pointer-events: none; transition: color .12s;
}
.ui-field--time .form-control:focus + .ui-field__icon { color: var(--custom_color_matisse); }