/* COPY of Clib.Core.MyClubPlanner/wwwroot/assets/css/neo.css @ f5710653 - do not edit here, run Support.ClubPlanner.App/tools/sync-neo.py */
/* ============================================================================
   neo.css — shared "neo" design system (Activity redesign house style)
   Moved out of plannerUI.css so any screen can reuse it. Loaded globally in
   _Layout. Opt in on a container with .cp-neo (or use inside the planner modal
   families). Contains: design tokens (light+dark), neo dialog shell + layout
   helpers, neo buttons, neo form controls. Planner-specific component styles
   (meta bar, tables, waitlist cards, dtseg, select2 skin, switches) stay in
   plannerUI.css and rely on the tokens defined here.
   ============================================================================ */

/* ── Mockup design tokens (Activity Inner Pages Redesign) ──────────────────
   The artifact's palette, scoped to the planner modal family so its component
   styles can be copied verbatim. --accent deliberately maps to the club's
   primary colour instead of the mockup's fixed indigo. */
.planner_main_modal,
.plnr_cmn_mdl,
.addmember_newmodal,
.plrem-modal,
.plnr_repeat_modal,
.cp-neo,
.cp-level, /* class level badge: renders on planner cards and lists outside .cp-neo, see the block at the end */
.neo-dialog-auto,
.cp-mail-editor, /* mail composers live outside the planner modal family, see the block at the end */
#retRiskCard, /* retention score (retention.css): dashboard card, side panel and settings live outside .cp-neo */
.ret-panel,
#retSettings,
#modalPLRSendNotification,
#reserservationActionPopupContainer {
    --surface: #fff;
    --surface2: #fbfbfc;
    --mock-body: #f6f7f9;
    --hover: #f5f6f9;
    --fill: #f2f3f6;
    --fill2: #f4f5f7;
    --fill3: #eef0f2;
    --fill4: #e7e9ed;
    --fill6: #eceef3;
    --line: #f0f1f4;
    --line2: #e9ebef;
    --line3: #e2e4e8;
    --line5: #e4e7ec;
    --text: #17191c;
    --text2: #22262b;
    --text4: #3a3f47;
    --muted: #5c636e;
    --muted2: #8b929c;
    --muted3: #9096a0;
    --muted4: #b6bcc6;
    --accent: var(--_primary_color, #5b5bd6);
    /* The fill of a primary button: the club colour, darkened only when white text on it misses WCAG AA
       (HomeController.BuildClubAccentCss writes --_primary_color_button) */
    --accentBtn: var(--_primary_color_button, var(--accent));
    /* Derived from --accent, never a fixed indigo: every accent tint (icon squares, active
       chips, accent badges) has to follow the club's global colour, exactly like --accent
       itself. The percentages reproduce the mockup's #eceefc/#dcdff0 for the default accent. */
    --accentBg: color-mix(in srgb, var(--accent) 10%, var(--surface));
    --accentLine: color-mix(in srgb, var(--accent) 20%, var(--surface));
    --goodBg: #e7f6ec; --okBg: #e6f4ec; --ok: #0d6b38; --okLine: #bfe3cd; --ok2: #12a150; --line10: #d7dade;
    --good: #1e7c40;
    --goodLine: #bfe5cb;
    --badBg: #fdeceb;
    --badLine: #f6cfcb;
    --bad: #c0392b;
    --warnBg: #fdf0e0;
    --warn: #a3671a;
    --lead: #a35a12;
    --leadBg: #fbeedd;
    --leadLine: #f0d6b6;
    /* Tasks-page additions (design-handoff token set) */
    --fill5: #eaecf0;
    --line4: #e0e3e8;
    --line6: #dcdfe4;
    --line7: #d9dce1;
    --line8: #cfd3d9;
    --line9: #c9cdd4;
    --line11: #b9bec6;
    --accentBg2: color-mix(in srgb, var(--accent) 5%, var(--surface));
    --accentLine2: color-mix(in srgb, var(--accent) 50%, var(--surface));
    --accentBg3: color-mix(in srgb, var(--accent) 9%, var(--surface));
    --ring: color-mix(in srgb, var(--accent) 45%, var(--surface));
    --warn3: #b45309;
    --warnBg2: #fdf5e7;
    --warnLine: #f2dcb0;
    --inverse: #212429;
    --onInverse: #ffffff;
    --inverseOk: #5bd48f;
    /* Employee Profile / Staff Schedule additions. --body is what the handoffs call the page
       background; it is the same value as --mock-body, kept under both names so design specs
       can be followed literally. --presence is the "clocked in" dot. */
    --body: #f6f7f9;
    --presence: #12a150;
    --accentBg4: color-mix(in srgb, var(--accent) 16%, var(--surface));
    --accentBg5: color-mix(in srgb, var(--accent) 22%, var(--surface));
    --accentBg6: color-mix(in srgb, var(--accent) 30%, var(--surface));
    --accentDark: color-mix(in srgb, var(--accent) 82%, #000);
    --okBg2: color-mix(in srgb, var(--ok2) 22%, var(--surface));
    --elev-modal: 0 24px 60px rgba(15,18,22,.20), 0 2px 8px rgba(15,18,22,.08);
    --elev-menu: 0 12px 32px rgba(15,18,22,.16), 0 1px 3px rgba(15,18,22,.08);
    --elev-toast: 0 10px 28px rgba(15,18,22,.22);
    --elev-accent: 0 8px 20px color-mix(in srgb, var(--accent) 32%, transparent);
}

[data-theme="dark"] .planner_main_modal,
[data-theme="dark"] .plnr_cmn_mdl,
[data-theme="dark"] .addmember_newmodal,
[data-theme="dark"] .plrem-modal,
[data-theme="dark"] .plnr_repeat_modal,
[data-theme="dark"] .cp-neo,
[data-theme="dark"] .cp-level,
[data-theme="dark"] .neo-dialog-auto,
[data-theme="dark"] #modalPLRSendNotification,
[data-theme="dark"] #reserservationActionPopupContainer,
.dark .planner_main_modal,
.dark .plnr_cmn_mdl,
.dark .addmember_newmodal,
.dark .plrem-modal,
.dark .plnr_repeat_modal,
.dark .cp-neo,
.dark .cp-level,
.dark .neo-dialog-auto,
.dark .cp-mail-editor,
.dark #retRiskCard,
.dark .ret-panel,
.dark #retSettings,
.dark #modalPLRSendNotification,
.dark #reserservationActionPopupContainer {
    --surface: #1c1d20;
    --surface2: #191a1c;
    --mock-body: #121315;
    --hover: #232427;
    --fill: #26282c;
    --fill2: #232427;
    --fill3: #2a2c30;
    --fill4: #26282c;
    --fill6: #2f3136;
    --line: #2a2c31;
    --line2: #2c2e33;
    --line3: #33363c;
    --line5: #33363c;
    --text: #f2f3f5;
    --text2: #e8eaee;
    --text4: #d3d6dc;
    --muted: #a2a7b2;
    --muted2: #8c919c;
    --muted3: #8c919c;
    --muted4: #6b7078;
    /* Same rule in dark: a tint of the club colour, not a fixed indigo. Mixed over --fill3
       rather than --surface so a near-black club colour still lifts off the card. */
    --accentBg: color-mix(in srgb, var(--accent) 20%, var(--fill3));
    --accentLine: color-mix(in srgb, var(--accent) 50%, var(--fill3));
    --goodBg: #1c3a26; --okBg: #14301f; --ok: #6fdc9a; --okLine: #2a5c3c; --ok2: #2ec46f; --line10: #43464e;
    --good: #6fd695;
    --goodLine: #2e5e3d;
    --badBg: #3a1c1a;
    --badLine: #5e2f2a;
    --bad: #f4796d;
    --warnBg: #3a2c17;
    --warn: #e5b269;
    --lead: #e0a25e;
    --leadBg: #3a2f22;
    --leadLine: #54432e;
    /* Tasks-page additions (design-handoff token set) */
    --fill5: #2c2e33;
    --line4: #30333a;
    --line6: #383b42;
    --line7: #3d4048;
    --line8: #45484f;
    --line9: #4c4f57;
    --line11: #5b5e66;
    --accentBg2: color-mix(in srgb, var(--accent) 10%, var(--surface));
    --accentLine2: color-mix(in srgb, var(--accent) 55%, var(--surface));
    --accentBg3: color-mix(in srgb, var(--accent) 16%, var(--surface));
    --ring: color-mix(in srgb, var(--accent) 55%, var(--surface));
    --warn3: #e5a55d;
    --warnBg2: #33280f;
    --warnLine: #4d3f20;
    --inverse: #f0f1f3;
    --onInverse: #17191c;
    --inverseOk: #0d6b38;
    /* Employee Profile / Staff Schedule additions */
    --body: #121315;
    --presence: #2ec46f;
    --accentBg4: color-mix(in srgb, var(--accent) 22%, var(--surface));
    --accentBg5: color-mix(in srgb, var(--accent) 30%, var(--surface));
    --accentBg6: color-mix(in srgb, var(--accent) 40%, var(--surface));
    --accentDark: color-mix(in srgb, var(--accent) 70%, #fff);
    --okBg2: color-mix(in srgb, var(--ok2) 26%, var(--surface));
    --elev-modal: 0 24px 60px rgba(0,0,0,.55), 0 2px 8px rgba(0,0,0,.4);
    --elev-menu: 0 12px 32px rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.35);
    --elev-toast: 0 10px 28px rgba(0,0,0,.55);
    --elev-accent: 0 8px 20px color-mix(in srgb, var(--accent) 45%, transparent);
}


/* ── Neo dialog + layout (the new house style) ─────────────────────────────
   Reusable dialog shell and spacing helpers, sized per the artifact. Build a
   dialog as:
     .modal-content.neo-dialog
       .neo-dialog-header  ( .neo-dialog-icon? + .neo-dialog-title + .neo-dialog-close )
       .neo-dialog-body    ( content, use .neo-stack to space panels )
       .neo-dialog-footer  ( .neo-btn ... )
   Layout helpers (work in any neo container):
     .neo-stack / .neo-stack-sm / .neo-stack-lg   vertical rhythm between panels
     .neo-panel                                    white card (radius 14, line2)
     .neo-panel-pad                                + inner padding
     .neo-section-label                            uppercase muted group heading
     .neo-row                                      space-between row, centered
   These rely on the neo tokens, so keep them inside .planner_main_modal / a
   .cp-neo container (or any dialog in the scoped families). */
.neo-dialog {
    border: none !important;
    border-radius: 16px !important;
    overflow: hidden;
    background: var(--surface) !important;
    box-shadow: 0 20px 60px rgba(20,22,26,.28);
}

.neo-dialog-header {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 15px 18px !important;
    border-bottom: 1px solid var(--line) !important;
    background: var(--surface);
}

.neo-dialog-icon {
    width: 34px;
    height: 34px;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: var(--fill);
    color: var(--accent);
}

.neo-dialog-title {
    flex: 1;
    min-width: 0;
    margin: 0;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: var(--text2);
}

    .neo-dialog-title small,
    .neo-dialog-subtitle {
        display: block;
        font-size: 12.5px;
        font-weight: 500;
        color: var(--muted2);
        margin-top: 2px;
    }

.neo-dialog-close {
    width: 32px;
    height: 32px;
    flex: none;
    border: none;
    border-radius: 9px;
    background: var(--fill);
    color: var(--muted2);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    opacity: 1;
}

    .neo-dialog-close:hover {
        background: var(--fill4);
        color: var(--text2);
    }

.neo-dialog-body {
    padding: 16px 18px !important;
    background: var(--surface);
}

.neo-dialog-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 12px 18px !important;
    border-top: 1px solid var(--line) !important;
    background: var(--surface2) !important;
}

/* vertical rhythm between stacked panels/sections */
.neo-stack {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.neo-stack-sm {
    gap: 10px;
}

.neo-stack-lg {
    gap: 22px;
}

/* white card panel */
.neo-panel {
    background: var(--surface);
    border: 1px solid var(--line2);
    border-radius: 14px;
}

.neo-panel-pad {
    padding: 14px 16px;
}

/* uppercase group heading above a panel */
.neo-section-label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted3);
    margin-bottom: 8px;
}

/* space-between row (label left / control right), vertically centered */
.neo-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

    .neo-row + .neo-row {
        border-top: 1px solid var(--fill2);
    }

/* ── Neo dialog AUTO (opt-in on a modal root) ──────────────────────────────
   Put .neo-dialog-auto on a Bootstrap modal's root (.modal) and its standard
   parts (.modal-content / .modal-header / .modal-body / .modal-footer) get the
   neo look without touching the inner markup. For the planner child dialogs. */
.neo-dialog-auto .modal-content {
    border: none !important;
    border-radius: 16px !important;
    overflow: hidden;
    background: var(--surface) !important;
    box-shadow: 0 20px 60px rgba(20,22,26,.28);
}

.neo-dialog-auto .modal-header {
    padding: 15px 18px !important;
    border-bottom: 1px solid var(--line) !important;
    background: var(--surface);
    align-items: center;
}

    .neo-dialog-auto .modal-header .modal-title,
    .neo-dialog-auto .modal-header h1,
    .neo-dialog-auto .modal-header h5 {
        font-size: 15px !important;
        font-weight: 600 !important;
        color: var(--text2);
        margin: 0;
    }

    .neo-dialog-auto .modal-header .modal_close_btn {
        width: 32px;
        height: 32px;
        flex: none;
        border: none;
        border-radius: 9px;
        background: var(--fill);
        color: var(--muted2);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 1;
    }

    /* .btn-close is Bootstrap's image-based X - only recolour the CONTAINER
       (background-color, not the background shorthand) so the X stays visible */
    .neo-dialog-auto .modal-header .btn-close {
        width: 32px;
        height: 32px;
        flex: none;
        border-radius: 9px;
        background-color: var(--fill);
        background-size: 12px;
        padding: 0;
        margin: 0;
        opacity: 1;
    }

        .neo-dialog-auto .modal-header .modal_close_btn:hover,
        .neo-dialog-auto .modal-header .btn-close:hover {
            background-color: var(--fill4);
            color: var(--text2);
        }

.neo-dialog-auto .modal-body {
    padding: 16px 18px !important;
    background: var(--surface);
}

.neo-dialog-auto .modal-footer {
    padding: 12px 18px !important;
    border-top: 1px solid var(--line) !important;
    background: var(--surface2) !important;
    gap: 10px;
}

/* offcanvas variant (repeat-or-delete, add-to-waitlist, column pickers) */
.neo-dialog-auto.offcanvas,
.neo-dialog-auto .offcanvas {
    background: var(--surface) !important;
}

.neo-dialog-auto .offcanvas-header,
.neo-dialog-auto.offcanvas .offcanvas-header {
    padding: 15px 18px !important;
    border-bottom: 1px solid var(--line) !important;
}

.neo-dialog-auto .filter_cav_bottom,
.neo-dialog-auto.offcanvas .filter_cav_bottom {
    border-top: 1px solid var(--line) !important;
    background: var(--surface2) !important;
    gap: 10px;
}

/* ── Neo buttons (the new house style) ─────────────────────────────────────
   Reusable button family, sized per the artifact. Combine:
     .neo-btn                base (36px, radius 9, 12.5/600)
     + .neo-btn-primary      accent bg, white text, soft accent shadow
     + .neo-btn-outline      white with line3 hairline
     + .neo-btn-ghost        transparent, hover fill
     + .neo-btn-danger       red (destructive)
     + .neo-btn-ok           green (confirm/payment)
     + .neo-btn-icon         36x36 icon-only square
     + .neo-btn-lg           40px / radius 10 / 13.5px (dialog footers)
   Segmented toggle: .neo-seg wrapper + .neo-seg-btn (.active).
   !important where legacy .btn rules would otherwise re-size them. */
.neo-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center;
    gap: 6px;
    height: 36px !important;
    padding: 0 14px !important;
    border: none !important;
    border-radius: 9px !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    cursor: pointer;
    white-space: nowrap;
    background: var(--surface);
    color: var(--text4);
}

.neo-btn-lg {
    height: 40px !important;
    padding: 0 16px !important;
    border-radius: 10px !important;
    font-size: 13.5px !important;
}

.neo-btn-primary {
    background: var(--accentBtn, var(--accent)) !important;
    color: var(--_primary_contrast_color, #fff) !important;
    box-shadow: 0 1px 2px color-mix(in srgb, var(--accent) 40%, transparent);
}

    .neo-btn-primary:hover {
        background: color-mix(in srgb, var(--accent) 88%, #000) !important;
        color: var(--_primary_contrast_color, #fff) !important;
    }

.neo-btn-outline {
    background: var(--surface) !important;
    border: 1px solid var(--line3) !important;
    color: var(--text4) !important;
}

    .neo-btn-outline:hover {
        background: var(--fill) !important;
    }

.neo-btn-ghost {
    background: transparent !important;
    color: var(--muted) !important;
}

    .neo-btn-ghost:hover {
        background: var(--fill) !important;
        color: var(--text2) !important;
    }

.neo-btn-danger {
    background: var(--bad) !important;
    color: #fff !important;
}

    .neo-btn-danger:hover {
        background: color-mix(in srgb, var(--bad) 85%, #000) !important;
        color: #fff !important;
    }

.neo-btn-ok {
    background: var(--ok2) !important;
    color: #fff !important;
}

.neo-btn-icon {
    width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    border: 1px solid var(--line3) !important;
    background: var(--surface) !important;
    color: var(--muted) !important;
}

    .neo-btn-icon:hover {
        background: var(--fill6) !important;
        color: var(--text2) !important;
    }

.neo-btn:disabled,
.neo-btn.disabled {
    opacity: .55;
    cursor: default;
    pointer-events: none;
}

/* Keyboard focus: the same accent ring as .neo-input, instead of the browser's own outline
   (mouse clicks show nothing, :focus-visible only fires for the keyboard). */
.neo-btn:focus {
    outline: none;
}

.neo-btn:focus-visible {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent) !important;
}

/* segmented toggle (Reserved / Cancelled) */
.neo-seg {
    display: inline-flex;
    padding: 3px;
    background: var(--fill4);
    border-radius: 10px;
    gap: 2px;
    flex: none;
}

    .neo-seg .neo-seg-btn {
        height: 30px;
        padding: 0 13px;
        border: none;
        border-radius: 8px;
        background: transparent;
        color: var(--muted);
        font-size: 12.5px;
        font-weight: 600;
        cursor: pointer;
        white-space: nowrap;
    }

        .neo-seg .neo-seg-btn.active {
            background: var(--accent);
            color: var(--_primary_contrast_color, #fff);
        }

/* ── Neo form controls (the new house style) ───────────────────────────────
   ONE reusable block: every input family inside the redesigned containers is
   white-on-grey per the artifact. New screens opt in by adding .cp-neo to any
   container - no more per-field patching. Covers text inputs, selects,
   textareas, stepper (.qty-container), input-groups and checkboxes. The
   !importants counter the global ".modal ..." grey rules. */
.planner_main_modal .form-control,
.planner_main_modal .form-select,
.planner_main_modal textarea,
.plnr_repeat_modal .form-control,
.plnr_repeat_modal .form-select,
.plnr_repeat_modal textarea,
.plnr_cmn_mdl .form-control,
.plnr_cmn_mdl .form-select,
.plnr_cmn_mdl textarea,
.addmember_newmodal .form-control,
.addmember_newmodal .form-select,
.cp-neo .form-control,
.cp-neo .form-select,
.cp-neo textarea {
    background-color: var(--surface) !important;
    border: 1px solid var(--line3) !important;
    border-radius: 9px;
    color: var(--text2);
    font-size: 13.5px;
}

    .planner_main_modal .form-control:focus,
    .planner_main_modal .form-select:focus,
    .planner_main_modal textarea:focus,
    .plnr_repeat_modal .form-control:focus,
    .plnr_repeat_modal .form-select:focus,
    .plnr_cmn_mdl .form-control:focus,
    .addmember_newmodal .form-control:focus,
    .cp-neo .form-control:focus,
    .cp-neo .form-select:focus {
        border-color: var(--accent) !important;
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
    }

/* add-member dialog search: icon-in-field, per the artifact (42px, radius 10) */
.addmember_newmodal .nm-search {
    position: relative;
}

    .addmember_newmodal .nm-search svg {
        position: absolute;
        left: 12px;
        top: 50%;
        transform: translateY(-50%);
        color: var(--muted3);
        pointer-events: none;
    }

    .addmember_newmodal .nm-search input {
        width: 100%;
        height: 42px !important;
        border: 1px solid var(--line3) !important;
        border-radius: 10px !important;
        background: var(--surface) !important;
        padding: 0 12px 0 38px !important;
        font-size: 14px;
        color: var(--text2);
    }

        .addmember_newmodal .nm-search input:focus {
            border-color: var(--accent) !important;
            box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
            outline: none;
        }

/* booking step ("Book for ...") - horizontal space comes from the dialog body
   (.neo-dialog-auto .modal-body), adding it here again doubled the margins */
.addmember_newmodal .addmember_step_booking,
.active_subscription_modal .active_subscription_modal_body {
    padding: 4px 0 14px;
}

/* "Adjust number of places" dialog: big centered stepper + facts, per the artifact */
#modalPLRPlaces .places-stepper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 8px 0 4px;
}

#modalPLRPlaces .places-btn {
    width: 46px;
    height: 46px;
    border: 1px solid var(--line3);
    border-radius: 12px;
    background: var(--surface);
    color: var(--muted);
    font-size: 22px;
    cursor: pointer;
    line-height: 1;
}

    #modalPLRPlaces .places-btn:hover {
        background: var(--fill);
        color: var(--text2);
    }

#modalPLRPlaces .places-value {
    width: 78px;
    text-align: center;
    font-size: 34px;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--text2);
}

#modalPLRPlaces .places-facts {
    margin-top: 14px;
    border: 1px solid var(--fill3);
    border-radius: 12px;
    overflow: hidden;
}

#modalPLRPlaces .places-fact {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 13px;
    border-top: 1px solid var(--fill2);
    background: var(--surface2);
}

    #modalPLRPlaces .places-fact:first-child {
        border-top: none;
    }

    #modalPLRPlaces .places-fact span {
        flex: 1;
        font-size: 13px;
        color: var(--muted);
    }

    #modalPLRPlaces .places-fact b {
        font-size: 13px;
        font-weight: 600;
        color: var(--text2);
    }

/* "Planned activities" (move reservation): wide enough + table fits, no inner scroll.
   !important beats the generic ".plnr_repeat_modal .modal-dialog{max-width:560px!important}" */
#movetootheractivitymodal .modal-dialog {
    max-width: 760px !important;
}

#movetootheractivitymodal .div_move_reservation_to_other,
#movetootheractivitymodal .dataTables_wrapper,
#movetootheractivitymodal .dataTables_scroll,
#movetootheractivitymodal .dataTables_scrollBody {
    overflow: visible !important;
    width: 100% !important;
}

#movetootheractivitymodal table#tblMoveReservationToOther {
    width: 100% !important;
    table-layout: auto;
}

    #movetootheractivitymodal table#tblMoveReservationToOther th,
    #movetootheractivitymodal table#tblMoveReservationToOther td {
        white-space: normal;
    }

/* the in-dialog subvalue step swaps the footer buttons out (Back/Skip/Confirm),
   so the original footer contents are hidden while the step is showing */
.popup-step-hidden {
    display: none !important;
}

/* Popup-value choice (e.g. "which horse"): same card look as subscription choice,
   with an optional photo per value. Radio is hidden; the card shows selection. */
.popupval_cards {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.popupval_card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--line3);
    border-radius: 12px;
    background: var(--surface);
    cursor: pointer;
    margin: 0;
    transition: border-color .12s ease, background-color .12s ease;
}

    .popupval_card:hover {
        background: var(--hover);
    }

    /* the real radio is replaced by .popupval_radio - collapse it to nothing so no native
       ring can show through (opacity alone lost against the disabled-state rules) */
    .popupval_card input {
        position: absolute;
        opacity: 0 !important;
        width: 0;
        height: 0;
        margin: 0;
        padding: 0;
        border: 0;
        pointer-events: none;
    }

    .popupval_card:has(input:checked) {
        border-color: var(--accent);
        background: color-mix(in srgb, var(--accent) 6%, transparent);
    }

    .popupval_card.is-disabled {
        opacity: .5;
        cursor: not-allowed;
    }

.popupval_radio {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid var(--muted4);
    flex: none;
    position: relative;
}

.popupval_card:has(input:checked) .popupval_radio {
    border-color: var(--accent);
}

    .popupval_card:has(input:checked) .popupval_radio::after {
        content: "";
        position: absolute;
        inset: 3px;
        border-radius: 50%;
        background: var(--accent);
    }

.popupval_img {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    overflow: hidden;
    flex: none;
    background: var(--fill);
}

    .popupval_img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.popupval_txt {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.popupval_name {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text2);
}

.popupval_meta {
    font-size: 12px;
    color: var(--muted2);
}

/* Payment dialog (artifact): method radio-cards + amount */
.pay-res-modal .pay-res-ico {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: var(--accentBg);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

.pay-res-modal .pay-res-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--muted3);
    margin-bottom: 8px;
}

.pay-res-modal .pay-res-methods {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pay-res-modal .pay-res-method {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 15px;
    border: 1px solid var(--line3);
    border-radius: 12px;
    background: var(--surface);
    cursor: pointer;
    margin: 0;
    transition: border-color .12s ease, background-color .12s ease;
}

    .pay-res-modal .pay-res-method:hover {
        background: var(--hover);
    }

    .pay-res-modal .pay-res-method.is-selected {
        border-color: var(--accent);
        background: color-mix(in srgb, var(--accent) 6%, transparent);
    }

    .pay-res-modal .pay-res-method input {
        position: absolute;
        opacity: 0;
        pointer-events: none;
    }

.pay-res-modal .pay-res-radio {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid var(--muted4);
    flex: none;
    position: relative;
    transition: border-color .12s ease;
}

.pay-res-modal .pay-res-method.is-selected .pay-res-radio {
    border-color: var(--accent);
}

    .pay-res-modal .pay-res-method.is-selected .pay-res-radio::after {
        content: "";
        position: absolute;
        inset: 3px;
        border-radius: 50%;
        background: var(--accent);
    }

.pay-res-modal .pay-res-method-name {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text2);
}

.pay-res-modal .pay-res-amount {
    max-width: 100%;
}

    .pay-res-modal .pay-res-amount .form-control {
        font-size: 15px;
        font-weight: 600;
    }

/* disabled state: grey it out (e.g. Until once "enddate subscription" takes over) */
.planner_main_modal .form-control:disabled,
.planner_main_modal .form-select:disabled,
.plnr_repeat_modal .form-control:disabled,
.plnr_repeat_modal .form-select:disabled,
.plnr_cmn_mdl .form-control:disabled,
.addmember_newmodal .form-control:disabled,
.cp-neo .form-control:disabled,
.cp-neo .form-select:disabled {
    background-color: var(--fill2) !important;
    color: var(--muted3) !important;
    border-color: var(--line2) !important;
    cursor: not-allowed;
}

/* the repeat dialogs open their flatpickrs inline (static mode inside modals) -
   let them overflow the card instead of being clipped */
.plnr_repeat_modal .modal-content,
.plnr_repeat_modal .modal-body,
.plnr_repeat_modal .plnr_rpt_mdl_body,
.plnr_repeat_modal .pra_col {
    overflow: visible !important;
}

/* stepper (- 1 +): white segmented control, everywhere */
.planner_main_modal .qty-container,
.plnr_repeat_modal .qty-container,
.plnr_cmn_mdl .qty-container,
.cp-neo .qty-container {
    display: inline-flex;
    align-items: stretch;
    background: var(--surface);
    border: 1px solid var(--line3);
    border-radius: 9px;
    overflow: hidden;
    padding: 0;
    gap: 0;
}

    .planner_main_modal .qty-container .inc_btn,
    .planner_main_modal .qty-container .dec_btn,
    .plnr_repeat_modal .qty-container .inc_btn,
    .plnr_repeat_modal .qty-container .dec_btn,
    .plnr_cmn_mdl .qty-container .inc_btn,
    .plnr_cmn_mdl .qty-container .dec_btn,
    .cp-neo .qty-container .inc_btn,
    .cp-neo .qty-container .dec_btn {
        width: 34px;
        height: 36px;
        border: none;
        background: var(--surface);
        color: var(--muted);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
    }

        .planner_main_modal .qty-container .inc_btn:hover,
        .planner_main_modal .qty-container .dec_btn:hover,
        .plnr_repeat_modal .qty-container .inc_btn:hover,
        .plnr_repeat_modal .qty-container .dec_btn:hover,
        .plnr_cmn_mdl .qty-container .inc_btn:hover,
        .plnr_cmn_mdl .qty-container .dec_btn:hover,
        .cp-neo .qty-container .inc_btn:hover,
        .cp-neo .qty-container .dec_btn:hover {
            background: var(--fill);
            color: var(--text2);
        }

    .planner_main_modal .qty-container input.input-qty,
    .plnr_repeat_modal .qty-container input.input-qty,
    .plnr_cmn_mdl .qty-container input.input-qty,
    .cp-neo .qty-container input.input-qty {
        width: 46px;
        height: 36px;
        border: none !important;
        border-left: 1px solid var(--line2) !important;
        border-right: 1px solid var(--line2) !important;
        border-radius: 0;
        background: var(--surface) !important;
        color: var(--text2);
        text-align: center;
        font-size: 13.5px;
        font-weight: 600;
        outline: none;
    }

/* input-group (value + suffix chip like EUR), everywhere */
.planner_main_modal .input-group,
.plnr_repeat_modal .input-group,
.plnr_cmn_mdl .input-group,
.cp-neo .input-group {
    flex-wrap: nowrap;
    background: var(--surface);
    border: 1px solid var(--line3);
    border-radius: 9px;
    overflow: hidden;
}

/* A value-with-unit field ("14 Days", "0 Minutes", "1 Times") only needs the width of its own
   control. .sm_fc pins the input at 75px and .md_fc sizes it to fit-content, but the group is a
   Bootstrap flex of 100% and the
   border above is drawn around the GROUP, so the remainder stayed behind as an empty outlined
   box beside the value (Quinten 14/09/2026, "slechte UI-velden" - planner calendar settings,
   and the same pattern on ~29 other views; .md_fc added 22/09/2026 for "1440 Min." on
   Settings > Planner > Beleid). The border belongs around the control, not around
   the emptiness next to it. Scoped with :has() so groups that legitimately stretch (search
   boxes, full-width fields) keep their width. settingsNeo.css holds the mobile-only variant
   of this rule for groups without a fixed-width control. */
.planner_main_modal .input-group:has(> .sm_fc),
.planner_main_modal .input-group:has(> .md_fc),
.plnr_repeat_modal .input-group:has(> .sm_fc),
.plnr_repeat_modal .input-group:has(> .md_fc),
.plnr_cmn_mdl .input-group:has(> .sm_fc),
.plnr_cmn_mdl .input-group:has(> .md_fc),
.cp-neo .input-group:has(> .sm_fc),
.cp-neo .input-group:has(> .md_fc) {
    width: max-content;
    max-width: 100%;
}

    .planner_main_modal .input-group .form-control,
    .plnr_repeat_modal .input-group .form-control,
    .plnr_cmn_mdl .input-group .form-control,
    .cp-neo .input-group .form-control {
        border: none !important;
        border-radius: 0;
        box-shadow: none;
    }

    .planner_main_modal .input-group .input-group-text,
    .plnr_repeat_modal .input-group .input-group-text,
    .plnr_cmn_mdl .input-group .input-group-text,
    .cp-neo .input-group .input-group-text {
        border: none;
        border-left: 1px solid var(--line2);
        background: var(--fill2);
        color: var(--muted);
        font-size: 12.5px;
        font-weight: 600;
    }

/* plain checkboxes (17px, radius 5, accent when checked) - settings-tab booleans
   render as switches via their own, more specific rule */
.planner_main_modal .form-check-input[type="checkbox"],
.plnr_repeat_modal .form-check-input[type="checkbox"],
.plnr_cmn_mdl .form-check-input[type="checkbox"],
.cp-neo .form-check-input[type="checkbox"] {
    width: 17px;
    height: 17px;
    border-radius: 5px;
    border: 1.5px solid var(--muted4);
    background-color: var(--surface);
    box-shadow: none;
    cursor: pointer;
}

    .planner_main_modal .form-check-input[type="checkbox"]:checked,
    .plnr_repeat_modal .form-check-input[type="checkbox"]:checked,
    .plnr_cmn_mdl .form-check-input[type="checkbox"]:checked,
    .cp-neo .form-check-input[type="checkbox"]:checked {
        background-color: var(--accent);
        border-color: var(--accent);
    }


/* ── Release note popup (_Layout #releaseNotePopup) ────────────────────────
   The body is the published changelog HTML from support.clubplanner.app, so it
   arrives with its own headings, lists and screenshots. Keep those inside the
   dialog instead of letting a wide screenshot stretch it. */
.rn-popup-content {
    color: var(--text2);
    font-size: 13.5px;
    line-height: 1.55;
}

    .rn-popup-content img {
        max-width: 100%;
        height: auto;
        border-radius: 10px;
        margin: 6px 0;
    }

    .rn-popup-content p:last-child,
    .rn-popup-content ul:last-child {
        margin-bottom: 0;
    }

    .rn-popup-content h1,
    .rn-popup-content h2,
    .rn-popup-content h3 {
        font-size: 15px;
        font-weight: 600;
        margin: 14px 0 6px;
    }

    .rn-popup-content a {
        color: var(--accent);
    }

/* Core caps every .modal-dialog at 554px, which is tight for a release note with a
   screenshot in it - give this one the 720px of the announcement design. */
#releaseNotePopup .modal-dialog {
    max-width: min(720px, calc(100vw - 2rem));
}

/* Blurred backdrop of the release note popup, put in place by release-note-popup.js. It is NOT a
   .modal-backdrop on purpose: Core clears those on every page body load, which is exactly when this
   dialog opens. Sits just under the dialog (Bootstrap modal = 1055). */
.rn-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1054;
    background-color: rgba(15, 18, 22, .42);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    animation: rn-backdrop-in .16s ease-out;
}

@keyframes rn-backdrop-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* ============================================================================
   Neo filter panel — the shared slide-over that replaces every per-module
   list-filter offcanvas (see D:\Claude\plan_neo_filters.md). Rendered by
   wwwroot/js/global/neoFilter.js ($NEOFLT). The panel root carries .cp-neo so
   the neo tokens above apply (light + dark). Deliberately NOT a Bootstrap
   offcanvas: the panel renders in place with a fade only — no transform-based
   entrance that can strand it off-screen.
   Overlays (datepicker, typeahead) live at document.body level with
   position:fixed, never inside an accordion section (.neo-acc-body animates
   max-height with overflow:hidden and would clip them).
   ============================================================================ */

/* ── shell ── */
.neo-filter-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1070;
    background: rgba(15, 18, 22, .42);
    animation: rn-backdrop-in .16s ease-out;
}

.neo-filter-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 440px;
    max-width: 100vw;
    z-index: 1071;
    display: flex;
    flex-direction: column;
    background: var(--mock-body);
    box-shadow: -18px 0 50px rgba(20, 22, 26, .18);
    animation: rn-backdrop-in .16s ease-out;
}

@media (max-width: 560px) {
    .neo-filter-panel {
        width: 100%;
    }
}

.neo-filter-head {
    flex: none;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 15px 18px;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
}

.neo-filter-title {
    flex: 1;
    min-width: 0;
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--text2);
}

/* ── tab bar (Filters | Saved presets) ── */
.neo-tabbar {
    flex: none;
    display: flex;
    gap: 18px;
    padding: 0 18px;
    background: var(--surface);
    border-bottom: 1px solid var(--line2);
}

.neo-tab {
    padding: 11px 2px;
    background: none;
    border: none;
    /* full shorthand incl. the colour: a bare `border-bottom: 2px solid`
       resolves to currentColor and draws a stray line under inactive tabs */
    border-bottom: 2px solid transparent;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--muted);
    cursor: pointer;
    white-space: nowrap;
}

.neo-tab--active {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

/* ── active-filter chip bar ── */
.neo-chipbar {
    flex: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 10px 18px;
    background: var(--surface);
    border-bottom: 1px solid var(--line2);
    /* P1-4: reserved even with zero chips (26px chip height + 10px top/bottom padding) so the
       first filter pick doesn't insert this row and shove the option list below it down under
       the cursor mid-click. --empty (no chips yet) keeps the box's height but hides its paint. */
    min-height: 47px;
    box-sizing: border-box;
}

.neo-chipbar--empty {
    visibility: hidden;
}

.neo-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 26px;
    padding: 0 6px 0 10px;
    border-radius: 999px;
    background: var(--accentBg);
    color: var(--accent);
    font-size: 12px;
    font-weight: 600;
    max-width: 100%;
}

    .neo-chip > span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.neo-chip-x {
    width: 16px;
    height: 16px;
    flex: none;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    font-size: 11px;
    line-height: 1;
}

    .neo-chip-x:hover {
        background: color-mix(in srgb, var(--accent) 18%, transparent);
    }

.neo-chip-clear {
    margin-left: auto;
    background: none;
    border: none;
    font-size: 12px;
    font-weight: 600;
    color: var(--muted2);
    cursor: pointer;
    white-space: nowrap;
}

    .neo-chip-clear:hover {
        color: var(--bad);
    }

/* ── scrolling body + accordion ── */
.neo-filter-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.neo-acc {
    flex: none;
    background: var(--surface);
    border: 1px solid var(--line2);
    border-radius: 14px;
    overflow: hidden;
}

.neo-acc-row {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 12px 14px;
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
}

.neo-acc-icon {
    width: 32px;
    height: 32px;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: var(--fill);
    color: var(--muted);
    font-size: 13px;
}

.neo-acc-icon--active {
    background: var(--accentBg);
    color: var(--accent);
}

.neo-acc-main {
    flex: 1;
    min-width: 0;
}

.neo-acc-title {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--text2);
}

.neo-acc-summary {
    display: block;
    font-size: 12px;
    color: var(--muted2);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.neo-acc-summary--active {
    color: var(--accent);
    font-weight: 500;
}

.neo-badge {
    flex: none;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--accent);
    color: var(--_primary_contrast_color, #fff);
    font-size: 11px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.neo-caret {
    flex: none;
    color: var(--muted3);
    transition: transform .18s ease;
}

.neo-acc.is-open .neo-caret {
    transform: rotate(180deg);
}

.neo-acc-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height .22s ease;
}

.neo-acc-inner {
    padding: 4px 14px 14px;
    border-top: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

    .neo-acc-inner > .neo-field:first-child,
    .neo-acc-inner > .neo-togrow:first-child {
        margin-top: 8px;
    }

/* ── fields ── */
.neo-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.neo-label {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--muted);
}

.neo-sub {
    font-size: 11px;
    font-weight: 600;
    color: var(--muted2);
}

.neo-input,
.neo-select {
    width: 100%;
    height: 36px;
    padding: 0 12px;
    border: 1px solid var(--line3);
    border-radius: 9px;
    background: var(--surface);
    color: var(--text2);
    font-size: 13px;
}

    .neo-input:focus,
    .neo-select:focus {
        outline: none;
        border-color: var(--accent);
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
    }

    .neo-input::placeholder {
        color: var(--muted3);
    }

.neo-input-wrap {
    position: relative;
}

.neo-input-icon {
    position: absolute;
    left: 11px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--muted3);
    pointer-events: none;
    font-size: 12.5px;
}

.neo-input--icon {
    padding-left: 33px;
}

.neo-input-btn {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 7px;
    background: none;
    color: var(--muted3);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .neo-input-btn:hover {
        background: var(--fill);
        color: var(--text2);
    }

.neo-input--btn {
    padding-right: 36px;
}

.neo-field-row {
    display: flex;
    gap: 8px;
}

    .neo-field-row > * {
        flex: 1;
        min-width: 0;
    }

.neo-op-sel {
    flex: 0 0 112px;
}

/* ── chips-as-options (multi-select pill row, short fixed sets only) ── */
.neo-pillrow {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.neo-pill {
    height: 30px;
    padding: 0 12px;
    border: 1px solid var(--line3);
    border-radius: 999px;
    background: var(--surface);
    color: var(--text4);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.neo-pill--on {
    background: var(--accentBg);
    border-color: var(--accentLine);
    color: var(--accent);
}

/* ── switch (tog) ── */
.neo-togrow {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
}

/* Same 36x21 pill as every other switch in Core (style.css / .stn-switch). */
.neo-switch {
    flex: none;
    width: 36px;
    height: 21px;
    margin-top: 1px;
    border-radius: 999px;
    background: var(--fill4);
    position: relative;
    transition: background-color .15s ease;
}

    .neo-switch::after {
        content: "";
        position: absolute;
        top: 2px;
        left: 2px;
        width: 17px;
        height: 17px;
        border-radius: 50%;
        background: #fff;
        box-shadow: 0 1px 2px rgba(20, 22, 26, .25);
        transition: transform .15s ease;
    }

.neo-switch--on {
    background: var(--accent);
}

    .neo-switch--on::after {
        transform: translateX(15px);
        background: var(--_primary_contrast_color, #fff);
    }

.neo-tog-title {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--text2);
}

.neo-tog-desc {
    display: block;
    font-size: 12px;
    color: var(--muted2);
}

/* ── subs: searchable grouped multi-select list (scales to 100+) ── */
.neo-list-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    color: var(--muted);
}

.neo-list-clear {
    background: none;
    border: none;
    padding: 0;
    font-size: 12px;
    font-weight: 600;
    color: var(--accent);
    cursor: pointer;
}

/* P2-8 (Exercises filter drawer): a section with several of these 'subs' lists side by side
   (Group/Muscles/Material) each capped at ~5 rows tall, stacked inside a drawer body
   (.neo-filter-body) that ALSO scrolls, reads as three cramped nested scroll boxes inside one
   outer scroll box. Left genuinely unbounded (removing overflow entirely) risks a very tall
   drawer for any module whose list actually has "100+" items - the exact case this component's
   own comment above says it was built to scale to - so this only raises the cap enough to fit
   a couple more rows before its own scrollbar kicks in, rather than removing the inner scroll.
   Shared across every module that uses the filter drawer (Members/Planner/etc., not just
   Exercises), consistent with how neoFilter.js/neo.css were already the fix point for this
   module's other filter-drawer tickets this session - a taller list is a strict improvement
   for those other callers too, not a behavior change scoped narrowly to Exercises. */
.neo-list {
    max-height: 340px;
    overflow-y: auto;
    background: var(--surface);
    border: 1px solid var(--line3);
    border-radius: 10px;
}

/* search row lives inside the list box, sticky above the rows */
.neo-list-search {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 8px;
    background: var(--surface);
    border-bottom: 1px solid var(--line3);
}

    .neo-list-search .neo-input {
        background: var(--fill2);
        border-color: transparent;
    }

        .neo-list-search .neo-input:focus {
            background: var(--surface);
        }

/* group headers stick below the search row (8+36+8 padding/input + 1 border) */
.neo-list-search ~ .neo-list-items .neo-list-header {
    top: 53px;
}

.neo-list-header {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 6px 12px;
    background: var(--fill2);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--muted2);
}

.neo-list-header--dim {
    color: var(--muted3);
}

.neo-list-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-top: 1px solid var(--fill2);
    font-size: 13px;
    color: var(--text2);
    cursor: pointer;
}

    .neo-list-row:first-child {
        border-top: none;
    }

.neo-list-row--on {
    background: color-mix(in srgb, var(--accent) 6%, transparent);
    font-weight: 600;
}

.neo-list-row--dim {
    color: var(--muted2);
}

.neo-check {
    flex: none;
    width: 17px;
    height: 17px;
    border-radius: 5px;
    border: 1.5px solid var(--muted4);
    background: var(--surface);
    color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
}

.neo-check--on {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--_primary_contrast_color, #fff);
}

/* ── colour field ── */
.neo-colour {
    display: flex;
    align-items: center;
    gap: 10px;
}

.neo-colour-swatch {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    border: 1px solid var(--line3);
    background: var(--surface);
    cursor: pointer;
    padding: 0;
}

/* ── add / remove filter row (under the accordion, general controls) ── */
.neo-addrem {
    display: flex;
    gap: 8px;
}

    .neo-addrem .neo-btn {
        flex: 1;
    }

/* ── footer ── */
.neo-footer {
    flex: none;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: var(--surface);
    border-top: 1px solid var(--line);
}

.neo-footer-primary {
    flex: 1;
}

/* ── overlays: fixed popovers at body level (never inside a section) ── */
.neo-popover-catch {
    position: fixed;
    inset: 0;
    z-index: 1089;
    background: transparent;
}

.neo-popover {
    position: fixed;
    z-index: 1090;
    background: var(--surface);
    border: 1px solid var(--line2);
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(20, 22, 26, .18);
    overflow: hidden;
}

.neo-sugg {
    min-width: 260px;
    max-width: 340px;
    padding: 4px;
}

.neo-sugg-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    cursor: pointer;
}

    .neo-sugg-row:hover {
        background: var(--hover);
    }

.neo-sugg-av {
    flex: none;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--accentBg);
    color: var(--accent);
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.neo-sugg-main {
    min-width: 0;
}

.neo-sugg-name {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--text2);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.neo-sugg-meta {
    display: block;
    font-size: 11.5px;
    color: var(--muted2);
}

.neo-sugg-empty {
    padding: 10px 12px;
    font-size: 12.5px;
    color: var(--muted);
}

/* flatpickr skin for the panel's datepickers: the calendar is appended to
   document.body (so it can never be clipped by the accordion) and gets both
   .neo-cal and .cp-neo, the latter putting the neo tokens in scope */
.flatpickr-calendar.neo-cal {
    background: var(--surface);
    border: 1px solid var(--line2);
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(20, 22, 26, .18);
}

    .flatpickr-calendar.neo-cal .flatpickr-months,
    .flatpickr-calendar.neo-cal .flatpickr-weekdays,
    .flatpickr-calendar.neo-cal span.flatpickr-weekday {
        background: var(--surface);
        color: var(--muted);
        fill: var(--muted);
    }

    .flatpickr-calendar.neo-cal .flatpickr-current-month,
    .flatpickr-calendar.neo-cal .flatpickr-monthDropdown-months,
    .flatpickr-calendar.neo-cal .numInput {
        color: var(--text2);
        background: var(--surface);
    }

    .flatpickr-calendar.neo-cal .flatpickr-day {
        color: var(--text2);
        border-radius: 8px;
    }

        .flatpickr-calendar.neo-cal .flatpickr-day.flatpickr-disabled,
        .flatpickr-calendar.neo-cal .flatpickr-day.prevMonthDay,
        .flatpickr-calendar.neo-cal .flatpickr-day.nextMonthDay {
            color: var(--muted4);
        }

        .flatpickr-calendar.neo-cal .flatpickr-day:hover {
            background: var(--fill);
            border-color: var(--fill);
        }

        .flatpickr-calendar.neo-cal .flatpickr-day.selected,
        .flatpickr-calendar.neo-cal .flatpickr-day.startRange,
        .flatpickr-calendar.neo-cal .flatpickr-day.endRange {
            background: var(--accent);
            border-color: var(--accent);
            color: var(--_primary_contrast_color, #fff);
        }

        .flatpickr-calendar.neo-cal .flatpickr-day.today:not(.selected) {
            border-color: var(--accentLine);
        }

/* day/month pickers (dayMonth fields, e.g. the birthday range): the year is
   meaningless there, so its spinner is hidden - the month arrows still work */
.flatpickr-calendar.neo-cal--dm .flatpickr-current-month .numInputWrapper {
    display: none;
}

/* ── saved presets tab ── */
.neo-preset-card {
    background: var(--surface);
    border: 1px solid var(--line2);
    border-radius: 14px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.neo-preset-summary {
    font-size: 12.5px;
    color: var(--muted);
    line-height: 1.45;
}

.neo-preset-row {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 12px 14px;
    background: var(--surface);
    border: 1px solid var(--line2);
    border-radius: 14px;
    text-align: left;
    cursor: pointer;
}

.neo-preset-row--on {
    border-color: var(--accent);
    box-shadow: 0 0 0 1px var(--accent);
}

.neo-preset-ico {
    flex: none;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: var(--fill);
    color: var(--muted);
}

.neo-preset-row--on .neo-preset-ico {
    background: var(--accentBg);
    color: var(--accent);
}

.neo-preset-main {
    flex: 1;
    min-width: 0;
}

.neo-preset-name {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--text2);
}

.neo-preset-desc {
    display: block;
    font-size: 12px;
    color: var(--muted2);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.neo-preset-del {
    flex: none;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 7px;
    background: none;
    color: var(--muted3);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .neo-preset-del:hover {
        background: var(--badBg);
        color: var(--bad);
    }

.neo-preset-empty {
    text-align: center;
    padding: 36px 18px;
    color: var(--muted2);
    font-size: 12.5px;
}

    .neo-preset-empty .neo-preset-empty-ico {
        width: 44px;
        height: 44px;
        margin: 0 auto 10px;
        border-radius: 12px;
        background: var(--fill);
        color: var(--muted3);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 17px;
    }

    .neo-preset-empty b {
        display: block;
        font-size: 13.5px;
        font-weight: 600;
        color: var(--text2);
        margin-bottom: 3px;
    }

/* ── Tasks module entry points (topbar, outside the .cp-neo token scope) ────
   Red open-today badge on the avatar and the count pill on the user-dropdown
   Tasks item. Fixed colours: the topbar has no neo tokens in scope. */
.profiledrop .pp_img { position: relative; }

.cp_tasks_avatar_badge {
    position: absolute;
    top: -5px;
    right: -6px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    box-sizing: border-box;
    border-radius: 999px;
    background: #c0392b;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #fff;
    font-variant-numeric: tabular-nums;
}

.dark .cp_tasks_avatar_badge { border-color: #1c1d20; }

.cp_tasks_menu_item { display: flex !important; align-items: center; gap: 8px; }

.cp_tasks_menu_count {
    min-width: 18px;
    height: 18px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--_primary_color, #5b5bd6);
    color: #fff;
    font-size: 11.5px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   Shared neo widgets (moved out of tasksUI.css, driven by $NEOW in
   wwwroot/js/global/neoWidgets.js).

   Every rule carries both prefixes: "tk-" is the markup the Tasks page has
   shipped since aug-2026, "neo-" is what new screens render. One rule, two
   selectors - so the Employee Profile and Staff Schedule pages do not need to
   pull tasksUI.css in, and there is still only one definition to maintain.
   When Tasks is eventually migrated to the neo- prefix, drop the tk- halves.
   ========================================================================== */

/* ── Avatars + avatar stack ─────────────────────────────────────────────── */
.tk-avstack,
.neo-avstack { display: flex; align-items: center; }

    .tk-avstack .tk-av,
    .neo-avstack .neo-av { margin-right: -8px; border: 2px solid var(--surface); }

    .tk-avstack .tk-av:last-child,
    .neo-avstack .neo-av:last-child { margin-right: 0; }

.tk-av,
.neo-av {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: var(--fill4);
    color: var(--text2);
    font-size: 10.5px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex: none;
}

    .tk-av img,
    .neo-av img { width: 100%; height: 100%; object-fit: cover; }

.tk-av-club,
.neo-av-club { background: var(--accent); color: var(--_primary_contrast_color, #fff); }

.tk-av-more,
.neo-av-more { background: var(--fill4); color: var(--muted); font-size: 10px; }

/* ── Popovers ───────────────────────────────────────────────────────────── */
/* No .neo-popover twin here on purpose: that class already exists above (the $NEOFLT filter
   panel, fixed + z-index 1090) and a second definition further down the file would silently
   override it. New screens use the existing .neo-popover; this is the Tasks-page variant. */
.tk-popover {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    background: var(--surface);
    border: 1px solid var(--line3);
    border-radius: 16px;
    box-shadow: var(--elev-menu, 0 12px 32px rgba(20,22,26,.16));
    z-index: 60;
    animation: tkPopIn .14s ease;
    overflow: hidden;
}

/* Only opacity is animated. A transform keyframe with fill-mode wins from the inline transform
   a positioner writes, which used to park menus on their container's origin. */
@keyframes tkPopIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.tk-menu-item,
.neo-menu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    border: none;
    background: transparent;
    border-radius: 9px;
    padding: 8px 10px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text2);
    cursor: pointer;
    text-align: left;
}

    .tk-menu-item:hover,
    .neo-menu-item:hover { background: var(--fill2); }

    .tk-menu-item.active,
    .neo-menu-item.active { background: var(--accentBg2); color: var(--accent); }

.tk-pop-label,
.neo-pop-label {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--muted3);
    padding: 8px 10px 4px 10px;
}

.tk-pop-row,
.neo-pop-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 9px;
    font-size: 13px;
    color: var(--text2);
    cursor: pointer;
}

    .tk-pop-row:hover,
    .neo-pop-row:hover { background: var(--fill2); }

    .tk-pop-row .fa-check,
    .neo-pop-row .fa-check { color: var(--accent); }

/* ── Switch (display-only; the click lives on the surrounding row) ───────── */
.tk-switch,
.neo-toggle {
    width: 36px;
    height: 21px;
    border-radius: 999px;
    background: var(--fill4);
    position: relative;
    flex: none;
    transition: background .15s;
}

    .tk-switch::after,
    .neo-toggle::after {
        content: "";
        position: absolute;
        top: 2px;
        left: 2px;
        width: 17px;
        height: 17px;
        border-radius: 999px;
        background: #fff;
        box-shadow: 0 1px 2px rgba(20, 22, 26, .25);
        transition: left .15s;
    }

    .tk-switch.on,
    .neo-toggle.on { background: var(--accent); }

        .tk-switch.on::after,
        .neo-toggle.on::after { left: 17px; background: var(--_primary_contrast_color, #fff); }

/* In dark --fill4 is the card colour itself, so an "off" track vanished (same fix as .stn-switch). */
.dark .tk-switch:not(.on),
.dark .neo-toggle:not(.on),
.dark .neo-switch:not(.neo-switch--on) { background: var(--line10); }

/* ── Date picker (mini month) ───────────────────────────────────────────── */
.tk-datepicker,
.neo-datepicker {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    width: 264px;
    background: var(--surface);
    border: 1px solid var(--line3);
    border-radius: 16px;
    box-shadow: var(--elev-menu, 0 12px 32px rgba(20,22,26,.16));
    padding: 12px;
    z-index: 60;
    animation: tkPopIn .14s ease;
}

    /* Floating variant on a modal date field: it hangs next to the overlay, so it has to clear
       the overlay (1100) or it renders behind the dimmed backdrop. */
    .tk-datepicker.tk-dp-float,
    .neo-datepicker.neo-dp-float { z-index: 1200; }

.tk-dp-head,
.neo-dp-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    font-size: 13.5px;
    font-weight: 700;
}

.tk-dp-nav,
.neo-dp-nav {
    width: 26px;
    height: 26px;
    border: none;
    border-radius: 7px;
    background: var(--fill2);
    color: var(--text2);
    cursor: pointer;
}

.tk-dp-grid,
.neo-dp-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.tk-dp-dow,
.neo-dp-dow {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--muted3);
    text-align: center;
    padding: 3px 0;
    text-transform: uppercase;
}

.tk-dp-day,
.neo-dp-day {
    height: 30px;
    border: none;
    background: transparent;
    border-radius: 8px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text2);
    cursor: pointer;
    font-variant-numeric: tabular-nums;
}

    .tk-dp-day:hover,
    .neo-dp-day:hover { background: var(--fill2); }

    .tk-dp-day.other,
    .neo-dp-day.other { color: var(--muted4); }

    .tk-dp-day.today,
    .neo-dp-day.today { box-shadow: inset 0 0 0 1px var(--accent); }

    .tk-dp-day.sel,
    .neo-dp-day.sel { background: var(--accent); color: #fff; font-weight: 700; }

/* Context hint + "Today" link under the grid (e.g. "Snaps to that week's Monday") */
.tk-dp-foot,
.neo-dp-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--line2);
    font-size: 11.5px;
    color: var(--muted);
}

    .tk-dp-foot a,
    .neo-dp-foot a { color: var(--accent); font-weight: 600; cursor: pointer; }

/* Date FIELD: read-only text input that opens the picker instead of the native one */
.tk-date-field,
.neo-date-field { cursor: pointer; background: var(--surface); }

/* ── Employee picker (escapes a scrolling modal via fixed positioning) ───── */
.tk-empdrop-btn,
.neo-empdrop-btn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 9px;
    height: 42px;
    border: 1px solid var(--line4, var(--line3));
    border-radius: 10px;
    background: var(--surface);
    padding: 0 11px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    color: var(--text2);
}

    .tk-empdrop-btn .tk-av,
    .neo-empdrop-btn .neo-av { width: 30px; height: 30px; font-size: 11px; }

    .tk-empdrop-btn small,
    .neo-empdrop-btn small { color: var(--muted2); font-weight: 500; }

    .tk-empdrop-btn .fa-chevron-down,
    .neo-empdrop-btn .fa-chevron-down { margin-left: auto; color: var(--muted3); font-size: 11px; }

.tk-empdrop-menu,
.neo-empdrop-menu {
    position: fixed;
    background: var(--surface);
    border: 1px solid var(--line3);
    border-radius: 12px;
    box-shadow: var(--elev-menu, 0 12px 32px rgba(20,22,26,.16));
    z-index: 1200;
    max-height: 260px;
    overflow-y: auto;
    min-width: 240px;
    animation: tkPopIn .14s ease;
    padding: 5px;
}

.tk-empdrop-item,
.neo-empdrop-item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 6px 8px;
    border-radius: 8px;
    cursor: pointer;
    min-width: 0;
}

    .tk-empdrop-item:hover,
    .neo-empdrop-item:hover { background: var(--fill2); }

    .tk-empdrop-item .tk-av,
    .neo-empdrop-item .neo-av { width: 30px; height: 30px; font-size: 11px; flex: none; }

    .tk-empdrop-item.blocked,
    .neo-empdrop-item.blocked { opacity: .6; cursor: not-allowed; }

.tk-empdrop-name,
.neo-empdrop-name { flex: 1; min-width: 0; }

    .tk-empdrop-name b,
    .neo-empdrop-name b {
        display: block;
        font-size: 13px;
        font-weight: 600;
        color: var(--text2);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .tk-empdrop-name small,
    .neo-empdrop-name small {
        display: block;
        font-size: 11.5px;
        color: var(--muted2);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

.tk-empdrop-item.blocked .tk-empdrop-name small,
.neo-empdrop-item.blocked .neo-empdrop-name small { color: var(--bad); font-weight: 600; }

.tk-empdrop-item.unassign .tk-empdrop-name b,
.neo-empdrop-item.unassign .neo-empdrop-name b { color: var(--warn3); }

/* ── Modal overlay + shell (custom layers, never a Bootstrap modal on a modal) */
.tk-overlay,
.neo-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15,18,22,.42);
    z-index: 1100;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 24px;
    overflow: auto;
}

.tk-modal,
.neo-modal {
    background: var(--surface);
    border-radius: 16px;
    box-shadow: var(--elev-modal, 0 24px 64px rgba(20,22,26,.26));
    margin: auto;
    width: 520px;
    max-width: 100%;
    animation: tkModalIn .16s ease;
    display: flex;
    flex-direction: column;
    color: var(--text);
}

.tk-modal-440, .neo-modal-440 { width: 440px; }
.tk-modal-560, .neo-modal-560 { width: 560px; }
.tk-modal-640, .neo-modal-640 { width: 640px; }
.tk-modal-660, .neo-modal-660 { width: 660px; }

@keyframes tkModalIn {
    from { opacity: 0; transform: translateY(8px) scale(.98); }
    to { opacity: 1; transform: none; }
}

.tk-modal-head,
.neo-modal-head {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 16px 18px 12px 18px;
}

.tk-modal-back,
.neo-modal-back {
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 8px;
    background: var(--fill2);
    color: var(--text2);
    cursor: pointer;
    flex: none;
}

.tk-modal-icon,
.neo-modal-icon {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    flex: none;
    background: var(--fill);
    color: var(--muted2);
}

    .tk-modal-icon.warn,
    .neo-modal-icon.warn { background: var(--warnBg2); color: var(--warn3); }

    .tk-modal-icon.muted,
    .neo-modal-icon.muted { background: var(--fill); color: var(--muted2); }

    .tk-modal-icon.accent,
    .neo-modal-icon.accent { background: var(--accentBg); color: var(--accent); }

.tk-modal-titles,
.neo-modal-titles { flex: 1; min-width: 0; }

.tk-modal-title,
.neo-modal-title { font-size: 17px; font-weight: 700; color: var(--text); margin: 0; }

.tk-modal-sub,
.neo-modal-sub { font-size: 12.5px; color: var(--muted); margin-top: 2px; }

.tk-modal-x,
.neo-modal-x {
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--muted2);
    cursor: pointer;
    flex: none;
    font-size: 15px;
}

    .tk-modal-x:hover,
    .neo-modal-x:hover { background: var(--fill2); color: var(--text2); }

.tk-modal-body,
.neo-modal-body { padding: 4px 18px 16px 18px; overflow-y: auto; }

.tk-modal-foot,
.neo-modal-foot {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 12px 18px;
    border-top: 1px solid var(--line2);
    background: var(--surface2);
    border-radius: 0 0 16px 16px;
    flex-wrap: wrap;
}

.tk-foot-note,
.neo-foot-note { font-size: 12px; color: var(--muted); flex: 1; min-width: 0; }

.tk-foot-spacer,
.neo-foot-spacer { flex: 1; }

/* ── Segmented control ──────────────────────────────────────────────────── */
.tk-seg,
.neo-segbar {
    display: flex;
    gap: 4px;
    padding: 3px;
    background: var(--fill);
    border-radius: 11px;
}

.tk-seg-btn,
.neo-segbar-btn {
    flex: 1 1 0;
    min-width: 0;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 1px solid transparent;
    border-radius: 9px;
    background: transparent;
    font-size: 13px;
    font-weight: 600;
    color: var(--muted2);
    cursor: pointer;
}

    .tk-seg-btn i,
    .neo-segbar-btn i { font-size: 15px; }

    .tk-seg-btn:hover,
    .neo-segbar-btn:hover { filter: brightness(.97); }

    .tk-seg-btn.on,
    .neo-segbar-btn.active {
        background: var(--surface);
        border-color: var(--line5);
        color: var(--text);
    }

    /* e.g. a half day only exists on a single-day absence */
    .tk-seg-btn.off,
    .neo-segbar-btn.off {
        opacity: .45;
        cursor: not-allowed;
    }

.tk-seg-3 .tk-seg-btn,
.neo-segbar-3 .neo-segbar-btn { height: 32px; }

.tk-seg-hint,
.neo-seg-hint {
    font-size: 12px;
    color: var(--muted);
    margin-top: 6px;
}

/* Phones: every modal width collapses to the viewport */
@media (max-width: 640px) {
    .neo-modal,
    .neo-modal-440,
    .neo-modal-560,
    .neo-modal-640,
    .neo-modal-660 { width: 100%; max-height: 90vh; }
}

/* ── Automation Engine tokens (CP-AUTO-001) ────────────────────────────────
   Step-category colours + the handful of design-system tokens the automations
   module uses that neo.css did not carry yet. Scoped to .cp-neo like the rest. */
.cp-neo {
    --desk: #f2f3f6;
    --muted5: #c3c8d1;
    --warnText: #8a5a00;
    --badBg2: #fdf1f0;
    --shadowSoft: rgba(23, 25, 28, .05);
    --r-control: 9px;
    --r-icon: 12px;
    --r-card: 14px;
    --r-pill: 999px;
    --st-trigger: oklch(0.52 0.17 297);
    --st-trigger-bg: oklch(0.96 0.03 297);
    --st-timing: var(--warn3);
    --st-timing-bg: var(--warnBg2);
    --st-message: var(--accent);
    --st-message-bg: var(--accentBg);
    --st-internal: var(--muted);
    --st-internal-bg: var(--fill3);
    --st-logic: oklch(0.5 0.09 210);
    --st-logic-bg: oklch(0.95 0.02 210);
    --st-action: oklch(0.55 0.13 350);
    --st-action-bg: oklch(0.96 0.025 350);
    --inverseBad: #ff9a8f; /* error-toast icon, same in both themes */
}

.dark .cp-neo,
.dark #retRiskCard,
.dark .ret-panel {
    --desk: #121315;
    --muted5: #4a4f58;
    --warnText: #e0a83e;
    --badBg2: #2a1d1c;
    --shadowSoft: rgba(0, 0, 0, .25);
    --st-trigger: oklch(0.72 0.14 297);
    --st-trigger-bg: oklch(0.3 0.06 297);
    --st-logic: oklch(0.72 0.08 210);
    --st-logic-bg: oklch(0.28 0.03 210);
    --st-action: oklch(0.74 0.11 350);
    --st-action-bg: oklch(0.3 0.05 350);
    --inverseBad: #ff9a8f;
}

/* ==========================================================================
   Mail composer - one look for every screen where an employee writes a mail
   ==========================================================================
   The send-email drawer, the planner send/cancel dialogs, the lead and invoice
   mails all build the same CKEditor. The toolbar itself is shared in JS
   ($CF.MailToolbarItems); these rules give it the same frame everywhere: a
   rounded box with a compact tinted toolbar on top, copied from the planner
   send-email dialog (.plrem-editor in plannerUI.css), which is the design
   Quinten asked to align the rest with. Add the class to the element that
   WRAPS the editor, not to the textarea (CKEditor replaces that).
   Not for the block-based template editor (Settings > E-mail templates). */
.cp-mail-editor .ck.ck-editor {
    --ck-border-radius: 8px;
}

/* dev.style.css sizes .ck-editor__main for full-page editors (height: calc(100vh - 200px));
   in a dialog that leaves a big empty gap under the text, so let it hug its content */
.cp-mail-editor .ck.ck-editor__main {
    height: auto !important;
}

/* tall enough to write in, capped so the Send row stays reachable in a drawer or dialog */
.cp-mail-editor .ck-editor__editable {
    min-height: clamp(230px, 40vh, 560px);
    max-height: 52vh;
    overflow-y: auto;
}

.cp-mail-editor .ck.ck-toolbar {
    background: var(--surface2);
    border-color: var(--line3);
    border-radius: 8px 8px 0 0;
    padding: 3px 8px;
    /* finer buttons: lower and tighter than CKEditor's defaults. The spacing is also what keeps
       the whole set on ONE row in the 670px send-email drawer - widen it and "Source" wraps. */
    --ck-ui-component-min-height: 28px;
    --ck-spacing-small: .35em;
}

    .cp-mail-editor .ck.ck-toolbar .ck-button {
        font-size: 12px;
    }

    .cp-mail-editor .ck.ck-toolbar .ck-icon {
        transform: scale(.82); /* keeps the hit area, slims the glyph */
    }

    .cp-mail-editor .ck.ck-toolbar .ck-toolbar__separator {
        background: var(--line3);
    }

.cp-mail-editor .ck.ck-editor__main > .ck-editor__editable {
    border-color: var(--line3);
    border-radius: 0 0 8px 8px !important;
}

/* ── Class level badge (CP-LEVEL-001) ───────────────────────────────────── */
/* One pill for the level of an activity or class, wherever a class is shown: planner cards, the class
   dialog, lists, settings. Always the label, never colour alone; the bars repeat the level for readers
   who cannot tell the tints apart. The badge carries the neo tokens itself (it is in the token scope
   at the top of this file), so it renders the same outside .cp-neo. */
.cp-level {
    --level-bg: var(--fill);
    --level-fg: var(--muted);
    --level-line: var(--line3);
    display: inline-flex;
    align-items: center;
    gap: 5px;
    max-width: 100%;
    height: 20px;
    padding: 0 8px;
    border: 1px solid var(--level-line);
    border-radius: 999px;
    background: var(--level-bg);
    color: var(--level-fg);
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    vertical-align: middle;
}

    .cp-level > span {
        overflow: hidden;
        text-overflow: ellipsis;
    }

.cp-level--beginner { --level-bg: var(--okBg); --level-fg: var(--ok); --level-line: var(--okLine); }
.cp-level--medium { --level-bg: var(--warnBg); --level-fg: var(--warn); --level-line: var(--warnLine); }
.cp-level--advanced { --level-bg: var(--badBg); --level-fg: var(--bad); --level-line: var(--badLine); }
.cp-level--all { --level-bg: var(--fill); --level-fg: var(--muted); --level-line: var(--line3); }
.cp-level--none { --level-bg: transparent; --level-fg: var(--muted2); --level-line: var(--line3); border-style: dashed; }

/* three bars, filled up to the level; "all levels" keeps three outlined bars */
.cp-level-bars {
    display: inline-flex;
    align-items: flex-end;
    gap: 1.5px;
    height: 9px;
    flex: none;
}

    .cp-level-bars i {
        width: 2.5px;
        border-radius: 1px;
        border: 1px solid var(--level-fg);
        background: transparent;
        box-sizing: border-box;
    }

        .cp-level-bars i:nth-child(1) { height: 4px; }
        .cp-level-bars i:nth-child(2) { height: 6.5px; }
        .cp-level-bars i:nth-child(3) { height: 9px; }

.cp-level--beginner .cp-level-bars i:nth-child(-n+1),
.cp-level--medium .cp-level-bars i:nth-child(-n+2),
.cp-level--advanced .cp-level-bars i:nth-child(-n+3) { background: var(--level-fg); }

/* very small planner blocks: only the coloured dot, the label stays for screen readers and as title */
.cp-level--dot {
    width: 9px;
    height: 9px;
    padding: 0;
    border-color: var(--level-fg);
    background: var(--level-fg);
}

    .cp-level--dot > * {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
    }

/* planner cards (plannerUI.js buildCardHTML): the pill sits top right of the card (a flex column, so no float);
   the time line keeps clear of it. The list view puts it behind the title; the class dialog next to its title. */
.ev-level {
    position: absolute;
    top: 3px;
    right: 4px;
    z-index: 1;
    max-width: 60%;
    line-height: 1;
    pointer-events: none;
}

.ev:has(> .ev-level) > .ev-time { padding-right: 64px; }

    .ev-level .cp-level {
        height: 16px;
        padding: 0 6px;
        font-size: 10px;
    }

.ev-compact-line .cp-level--dot {
    display: inline-block;
    margin-right: 5px;
    vertical-align: baseline;
}

.ev-level-list { margin-left: 8px; }

.edm-level-badge {
    display: inline-flex;
    flex: none;
}

    .edm-level-badge:empty { display: none; }

#dd-filter .dd-item .cp-level { margin-left: 2px; }

/* Settings > Planner > Levels: one row per level, one column per language. The table scrolls sideways on a
   phone (.stn-tablewrap), so the inputs keep a width that fits a label. */
.plr-level-table td { vertical-align: middle; }
.plr-level-table .form-control { min-width: 132px; }
.plr-level-table--wide .form-control { min-width: 170px; }
.plr-level-table .plr-level-preview { white-space: nowrap; }

/* level picker on the activity form: the segmented control, one option per level */
.cp-level-seg { flex-wrap: wrap; }

    .cp-level-seg .neo-segbar-btn {
        flex: 1 1 auto;
        padding: 0 12px;
        white-space: nowrap;
    }

        .cp-level-seg .neo-segbar-btn .cp-level {
            border-color: transparent;
            background: transparent;
            padding: 0;
            font-size: 13px;
            color: inherit;
        }

        .cp-level-seg .neo-segbar-btn.active .cp-level { color: var(--level-fg); }

/* ── Teaching languages (CP-LANG-001) ──────────────────────────────────────────────────────────────────
   Codes, not flags, are the display: "EN FR" in small capitals after the coach. Only rendered when the club
   switched languages on and the class has some, so nothing here shows on a club that does not use them. */
.cp-langs {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    vertical-align: middle;
    white-space: nowrap;
}

    .cp-langs .cp-lang {
        display: inline-flex;
        align-items: center;
        height: 18px;
        padding: 0 5px;
        border: 1px solid var(--line3, var(--line));
        border-radius: 4px;
        color: var(--muted);
        font-size: 10.5px;
        font-weight: 600;
        letter-spacing: .04em;
        line-height: 1;
    }

.ev-langs { margin-left: 6px; }

/* class dialog: "X does not teach in English" under the class language row, full width */
.cal-lang-warn {
    padding: 0 14px 10px 50px;
    color: var(--bad, #c0392b);
    font-size: 12px;
    line-height: 1.4;
}

    .ev-langs .cp-lang {
        height: 15px;
        padding: 0 4px;
        font-size: 9.5px;
    }

/* Settings > Planner > Languages: a wrapping grid of check boxes, one per language */
.plr-lang-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 8px 16px;
}

.plr-lang-option {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    cursor: pointer;
}

    .plr-lang-option .plr-lang-code-tag {
        flex: none;
        width: 30px;
        color: var(--muted);
        font-size: 11px;
        font-weight: 600;
    }

    .plr-lang-option .plr-lang-name {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.plr-lang-more { margin-top: 14px; max-width: 320px; }

/* the mail template picker in a settings row: as wide as a template name needs, never wider than the row */
.plr-lang-mail { width: 260px; max-width: 100%; }

/* Employee profile: the languages a coach teaches in, as chips that can be dragged into the order members see */
.ep-langs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.ep-lang-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    padding: 0 6px 0 10px;
    border: 1px solid var(--line3, var(--line));
    border-radius: 999px;
    background: var(--surface);
    font-size: 13px;
    user-select: none;
}

    .ep-lang-chip[draggable="true"] { cursor: grab; }
    .ep-lang-chip.is-dragging { opacity: .45; }
    .ep-lang-chip .ep-lang-code { color: var(--muted); font-size: 11px; font-weight: 600; }

    .ep-lang-chip .ep-lang-x {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 20px;
        height: 20px;
        padding: 0;
        border: 0;
        border-radius: 50%;
        background: transparent;
        color: var(--muted);
        cursor: pointer;
    }

        .ep-lang-chip .ep-lang-x:hover { background: var(--fill); color: var(--text); }

.ep-lang-add { max-width: 220px; }

.ep-lang-hint { margin-top: 6px; color: var(--muted); font-size: 12px; }

.ep-bio-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }

.ep-bio-read { margin-bottom: 8px; font-size: 13px; line-height: 1.45; white-space: pre-line; }

.ep-bio-count { margin-top: 4px; color: var(--muted); font-size: 11px; text-align: right; }