/* App-specific utilities layered on top of Metronic's compiled styles.css.
   (Replaces the few Bootstrap helpers that were lost when site.css/Bootstrap were retired.) */

/* Spinner — self-contained so it does not depend on purged Tailwind border utilities. */
.kt-spin {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border: 2px solid var(--color-primary, #14b8a6);
    border-top-color: transparent;
    border-radius: 9999px;
    animation: kt-spin-rotate .7s linear infinite;
    vertical-align: middle;
}
.kt-spin-lg { width: 2rem; height: 2rem; border-width: 3px; }
.kt-spin-current { border-color: currentColor; border-top-color: transparent; }
@keyframes kt-spin-rotate { to { transform: rotate(360deg); } }

/* Tailwind tabs (replaces Bootstrap nav-tabs/tab-pane). Markup:
   <div data-tab-group> <div class="app-tabs"><button class="app-tab[ active]" data-tab-target="x">..</button>..</div>
     <div class="app-tab-pane[ active]" data-tab-pane="x">..</div>.. </div>
   Toggling is wired globally in _LayoutMetronic. */
.app-tabs { display: flex; flex-wrap: wrap; gap: .25rem; border-bottom: 1px solid var(--color-input); margin-bottom: 1rem; overflow-x: auto; }
.app-tab { display: inline-flex; align-items: center; gap: .4rem; padding: .55rem .9rem; font-size: .875rem; font-weight: 500; color: var(--color-secondary-foreground); background: none; border: none; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; cursor: pointer; }
.app-tab:hover { color: var(--color-mono); }
.app-tab.active { color: var(--color-primary); border-bottom-color: var(--color-primary); }
.app-tab-pane { display: none; }
.app-tab-pane.active { display: block; }

/* Arbitrary-value utilities that Metronic's precompiled (no-JIT) styles.css purged.
   Defined here so the existing class names keep working across all views. */
.max-w-\[160px\]{max-width:160px}
.max-w-\[220px\]{max-width:220px}
.max-w-\[250px\]{max-width:250px}
.max-w-\[280px\]{max-width:280px}
.max-w-\[420px\]{max-width:420px}
.max-w-\[520px\]{max-width:520px}
.max-w-\[560px\]{max-width:560px}
.max-w-\[640px\]{max-width:640px}
.max-w-\[680px\]{max-width:680px}
.max-w-\[700px\]{max-width:700px}
.max-w-\[720px\]{max-width:720px}
.max-w-\[760px\]{max-width:760px}
.max-w-\[800px\]{max-width:800px}
.max-w-\[900px\]{max-width:900px}
.max-w-\[920px\]{max-width:920px}
.max-w-\[960px\]{max-width:960px}
.min-h-\[120px\]{min-height:120px}
.top-\[5\%\]{top:5%}
.tracking-\[0\.4em\]{letter-spacing:0.4em}
.border-s-\[3px\]{border-inline-start-width:3px}
.grid-cols-\[1fr_2fr\]{grid-template-columns:1fr 2fr}
.grid-cols-\[1fr_3fr\]{grid-template-columns:1fr 3fr}
.grid-cols-\[2fr_3fr\]{grid-template-columns:2fr 3fr}
.grid-cols-\[30px_1fr_60px_60px_70px_64px\]{grid-template-columns:30px 1fr 60px 60px 70px 64px}
/* Tailwind v4 renamed shadow-sm -> shadow-xs; keep the old name working */
.shadow-sm{box-shadow:0 1px 2px 0 rgb(0 0 0 / 0.05)}
/* Icon-in-input positioning utilities (purged from the prebuilt CSS) */
.left-3{left:.75rem}.left-4{left:1rem}.right-3{right:.75rem}.top-3{top:.75rem}
.inset-y-0{top:0;bottom:0}.pl-9{padding-left:2.25rem}.pl-10{padding-left:2.5rem}.pr-9{padding-right:2.25rem}
/* Common utilities purged from the prebuilt CSS but used across converted views */
.rounded-2xl{border-radius:1rem}
.shadow-lg{box-shadow:0 10px 15px -3px rgb(0 0 0 / 0.1),0 4px 6px -4px rgb(0 0 0 / 0.1)}
.shadow-2xl{box-shadow:0 25px 50px -12px rgb(0 0 0 / 0.25)}
.hover\:shadow-lg:hover{box-shadow:0 10px 15px -3px rgb(0 0 0 / 0.1),0 4px 6px -4px rgb(0 0 0 / 0.1)}
.py-8{padding-top:2rem;padding-bottom:2rem}
.py-7{padding-top:1.75rem;padding-bottom:1.75rem}
.select-none{user-select:none}
.mt-1\.5{margin-top:.375rem}
.mb-1\.5{margin-bottom:.375rem}

/* ------------------------------------------------------------------
   Prospect pipeline status stepper (Views/Prospect/Details.cshtml).
   These .pipeline-* classes had no CSS after the Bootstrap retirement,
   so the stepper collapsed into a bare vertical list of check glyphs.
   Horizontal, theme-aware (light + dark), scrolls on narrow screens. */
.pipeline-container {
    display: flex;
    align-items: flex-start;
    overflow-x: auto;
    padding: .25rem 0 .5rem;
}
.pipeline-step {
    position: relative;
    flex: 1 0 auto;
    min-width: 96px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
/* connector line from this circle to the next */
.pipeline-step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 17px;            /* vertical centre of the 34px circle */
    left: 50%;
    width: 100%;
    height: 2px;
    background: var(--color-input);
    z-index: 0;
}
.pipeline-step.completed:not(:last-child)::after { background: var(--color-primary); }
.pipeline-circle {
    position: relative;
    z-index: 1;
    width: 34px;
    height: 34px;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .9rem;
    background: var(--color-background, #fff);
    border: 2px solid var(--color-input);
    color: var(--color-secondary-foreground);
}
.pipeline-step.completed .pipeline-circle {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}
.pipeline-step.active .pipeline-circle {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-primary) 22%, transparent);
}
.pipeline-step small {
    display: block;
    margin-top: .5rem;
    font-size: .7rem;
    line-height: 1.2;
    max-width: 88px;
    color: var(--color-secondary-foreground);
}
.pipeline-step.active small,
.pipeline-step.completed small { color: var(--color-mono); font-weight: 500; }

/* ------------------------------------------------------------------
   Backfill for classes that lost their CSS in the Bootstrap→Metronic
   migration (found via a full-views audit). The precompiled styles.css
   carries no JIT, so these rendered as silent no-ops. Theme-aware. */

/* Purged fixed-width column utilities (table headers in list views) */
.w-\[140px\]{width:140px}
.w-\[160px\]{width:160px}
.w-\[260px\]{width:260px}

/* Bootstrap form-check shim (checkbox/radio rows in Create/Edit forms) */
.form-check{display:flex;align-items:center;gap:.5rem}
.form-check-inline{display:inline-flex;align-items:center;gap:.4rem;margin-right:1rem}
.form-check-input{width:1rem;height:1rem;accent-color:var(--color-primary);cursor:pointer;flex-shrink:0}
.form-check-label{font-size:.875rem;color:var(--color-mono);cursor:pointer}
.form-check-card{border:1px solid var(--color-input);border-radius:.5rem;padding:.6rem .75rem;transition:border-color .15s,background-color .15s}
.form-check-card:hover{border-color:var(--color-primary);background:color-mix(in srgb,var(--color-primary) 6%,transparent)}
.form-text{display:block;margin-top:.25rem;font-size:.8125rem;color:var(--color-secondary-foreground)}

/* Bootstrap aspect-ratio shim (workout video iframe embeds) + col-12 */
.ratio{position:relative;width:100%}
.ratio::before{content:'';display:block;padding-top:var(--aa-ratio,56.25%)}
.ratio>*{position:absolute;inset:0;width:100%;height:100%}
.ratio-16x9{--aa-ratio:56.25%}
.col-12{width:100%}

/* Empty-state placeholder (Family / Notification / Feedback lists) */
.empty-state{text-align:center;padding:3rem 1.5rem;color:var(--color-secondary-foreground)}
.empty-state-icon{font-size:2.75rem;line-height:1;margin-bottom:.75rem;opacity:.45}

/* Subtitle beside a page title */
.page-subtitle{display:block;font-size:.85rem;color:var(--color-secondary-foreground)}

/* PAR-Q question list spacing */
.parq-questions{display:flex;flex-direction:column;gap:.25rem}

/* Sticky action bar wrapping the Save/Cancel card on long forms */
.action-bar{position:sticky;bottom:0;z-index:20;margin-top:1.25rem;padding-bottom:.25rem}

/* Count badge overlaid on the corner of an icon button (e.g. note counts in list
   action columns) — keeps the square icon button aligned with its siblings instead
   of widening it with an inline badge. */
.has-count-badge{position:relative;overflow:visible}
.count-badge{
    position:absolute;
    top:-.35rem;
    inset-inline-end:-.35rem;
    min-width:1.05rem;
    height:1.05rem;
    padding:0 .2rem;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-size:.625rem;
    font-weight:600;
    line-height:1;
    border-radius:9999px;
    background:var(--color-primary);
    color:#fff;
    border:1.5px solid var(--color-background, #fff);
    pointer-events:none;
}

/* ------------------------------------------------------------------
   Tailwind grid system purged from the precompiled (no-JIT) Metronic CSS.
   Without these, grid-cols-12 / col-span-* / md:* layouts collapse to a
   single stacked column on desktop (filters, forms, dashboards). Backfilled
   for all breakpoints so multi-column layouts render as intended. */
.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}
.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}
.grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}
.grid-cols-7{grid-template-columns:repeat(7,minmax(0,1fr))}
.grid-cols-8{grid-template-columns:repeat(8,minmax(0,1fr))}
.grid-cols-9{grid-template-columns:repeat(9,minmax(0,1fr))}
.grid-cols-10{grid-template-columns:repeat(10,minmax(0,1fr))}
.grid-cols-11{grid-template-columns:repeat(11,minmax(0,1fr))}
.grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}
.col-span-1{grid-column:span 1/span 1}
.col-span-2{grid-column:span 2/span 2}
.col-span-3{grid-column:span 3/span 3}
.col-span-4{grid-column:span 4/span 4}
.col-span-5{grid-column:span 5/span 5}
.col-span-6{grid-column:span 6/span 6}
.col-span-7{grid-column:span 7/span 7}
.col-span-8{grid-column:span 8/span 8}
.col-span-9{grid-column:span 9/span 9}
.col-span-10{grid-column:span 10/span 10}
.col-span-11{grid-column:span 11/span 11}
.col-span-12{grid-column:span 12/span 12}
.col-span-full{grid-column:1/-1}
@media (min-width:640px){
.sm\:grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}
.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.sm\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.sm\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.sm\:grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}
.sm\:grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}
.sm\:grid-cols-7{grid-template-columns:repeat(7,minmax(0,1fr))}
.sm\:grid-cols-8{grid-template-columns:repeat(8,minmax(0,1fr))}
.sm\:grid-cols-9{grid-template-columns:repeat(9,minmax(0,1fr))}
.sm\:grid-cols-10{grid-template-columns:repeat(10,minmax(0,1fr))}
.sm\:grid-cols-11{grid-template-columns:repeat(11,minmax(0,1fr))}
.sm\:grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}
.sm\:col-span-1{grid-column:span 1/span 1}
.sm\:col-span-2{grid-column:span 2/span 2}
.sm\:col-span-3{grid-column:span 3/span 3}
.sm\:col-span-4{grid-column:span 4/span 4}
.sm\:col-span-5{grid-column:span 5/span 5}
.sm\:col-span-6{grid-column:span 6/span 6}
.sm\:col-span-7{grid-column:span 7/span 7}
.sm\:col-span-8{grid-column:span 8/span 8}
.sm\:col-span-9{grid-column:span 9/span 9}
.sm\:col-span-10{grid-column:span 10/span 10}
.sm\:col-span-11{grid-column:span 11/span 11}
.sm\:col-span-12{grid-column:span 12/span 12}
.sm\:col-span-full{grid-column:1/-1}
}
@media (min-width:768px){
.md\:grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}
.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.md\:grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}
.md\:grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}
.md\:grid-cols-7{grid-template-columns:repeat(7,minmax(0,1fr))}
.md\:grid-cols-8{grid-template-columns:repeat(8,minmax(0,1fr))}
.md\:grid-cols-9{grid-template-columns:repeat(9,minmax(0,1fr))}
.md\:grid-cols-10{grid-template-columns:repeat(10,minmax(0,1fr))}
.md\:grid-cols-11{grid-template-columns:repeat(11,minmax(0,1fr))}
.md\:grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}
.md\:col-span-1{grid-column:span 1/span 1}
.md\:col-span-2{grid-column:span 2/span 2}
.md\:col-span-3{grid-column:span 3/span 3}
.md\:col-span-4{grid-column:span 4/span 4}
.md\:col-span-5{grid-column:span 5/span 5}
.md\:col-span-6{grid-column:span 6/span 6}
.md\:col-span-7{grid-column:span 7/span 7}
.md\:col-span-8{grid-column:span 8/span 8}
.md\:col-span-9{grid-column:span 9/span 9}
.md\:col-span-10{grid-column:span 10/span 10}
.md\:col-span-11{grid-column:span 11/span 11}
.md\:col-span-12{grid-column:span 12/span 12}
.md\:col-span-full{grid-column:1/-1}
}
@media (min-width:1024px){
.lg\:grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}
.lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.lg\:grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}
.lg\:grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}
.lg\:grid-cols-7{grid-template-columns:repeat(7,minmax(0,1fr))}
.lg\:grid-cols-8{grid-template-columns:repeat(8,minmax(0,1fr))}
.lg\:grid-cols-9{grid-template-columns:repeat(9,minmax(0,1fr))}
.lg\:grid-cols-10{grid-template-columns:repeat(10,minmax(0,1fr))}
.lg\:grid-cols-11{grid-template-columns:repeat(11,minmax(0,1fr))}
.lg\:grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}
.lg\:col-span-1{grid-column:span 1/span 1}
.lg\:col-span-2{grid-column:span 2/span 2}
.lg\:col-span-3{grid-column:span 3/span 3}
.lg\:col-span-4{grid-column:span 4/span 4}
.lg\:col-span-5{grid-column:span 5/span 5}
.lg\:col-span-6{grid-column:span 6/span 6}
.lg\:col-span-7{grid-column:span 7/span 7}
.lg\:col-span-8{grid-column:span 8/span 8}
.lg\:col-span-9{grid-column:span 9/span 9}
.lg\:col-span-10{grid-column:span 10/span 10}
.lg\:col-span-11{grid-column:span 11/span 11}
.lg\:col-span-12{grid-column:span 12/span 12}
.lg\:col-span-full{grid-column:1/-1}
}
@media (min-width:1280px){
.xl\:grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}
.xl\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.xl\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.xl\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.xl\:grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}
.xl\:grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}
.xl\:grid-cols-7{grid-template-columns:repeat(7,minmax(0,1fr))}
.xl\:grid-cols-8{grid-template-columns:repeat(8,minmax(0,1fr))}
.xl\:grid-cols-9{grid-template-columns:repeat(9,minmax(0,1fr))}
.xl\:grid-cols-10{grid-template-columns:repeat(10,minmax(0,1fr))}
.xl\:grid-cols-11{grid-template-columns:repeat(11,minmax(0,1fr))}
.xl\:grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}
.xl\:col-span-1{grid-column:span 1/span 1}
.xl\:col-span-2{grid-column:span 2/span 2}
.xl\:col-span-3{grid-column:span 3/span 3}
.xl\:col-span-4{grid-column:span 4/span 4}
.xl\:col-span-5{grid-column:span 5/span 5}
.xl\:col-span-6{grid-column:span 6/span 6}
.xl\:col-span-7{grid-column:span 7/span 7}
.xl\:col-span-8{grid-column:span 8/span 8}
.xl\:col-span-9{grid-column:span 9/span 9}
.xl\:col-span-10{grid-column:span 10/span 10}
.xl\:col-span-11{grid-column:span 11/span 11}
.xl\:col-span-12{grid-column:span 12/span 12}
.xl\:col-span-full{grid-column:1/-1}
}

/* ---- Topbar tools: notification bell popover + global search (Ctrl+K) ---- */
.am-kbd{
    font-size:.65rem; font-weight:600; line-height:1; padding:.2rem .35rem;
    border:1px solid var(--color-input); border-radius:.3rem;
    color:var(--color-secondary-foreground); background:var(--color-background);
}
.am-popover{
    position:absolute; top:calc(100% + .5rem); inset-inline-end:0; z-index:60;
    width:340px; max-width:90vw; border:1px solid var(--color-input); border-radius:.75rem;
    background:var(--color-background); box-shadow:0 12px 32px -12px rgba(0,0,0,.35);
}
.am-popover-head{display:flex; align-items:center; justify-content:space-between; gap:.5rem; padding:.6rem .9rem; border-bottom:1px solid var(--color-input)}
.am-popover-body{max-height:340px; overflow-y:auto}
.am-popover-foot{padding:.6rem .9rem; border-top:1px solid var(--color-input)}
.am-popover-empty{padding:1.5rem .9rem; text-align:center; font-size:.8rem; color:var(--color-secondary-foreground); display:flex; flex-direction:column; gap:.4rem; align-items:center}
.am-noti-row{display:flex; gap:.6rem; padding:.6rem .9rem; cursor:pointer; border-bottom:1px solid var(--color-input); align-items:flex-start}
.am-noti-row:last-child{border-bottom:0}
.am-noti-row:hover{background:color-mix(in srgb, var(--color-primary) 6%, transparent)}
.am-noti-row.unread{background:color-mix(in srgb, var(--color-primary) 8%, transparent)}
.am-noti-title{font-size:.8rem; font-weight:600; color:var(--color-mono); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.am-noti-msg{font-size:.75rem; color:var(--color-secondary-foreground); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.am-noti-date{font-size:.68rem; color:var(--color-secondary-foreground); margin-top:.15rem; opacity:.8}
.am-noti-dot{width:.5rem; height:.5rem; border-radius:9999px; background:var(--color-primary); margin-top:.35rem; flex-shrink:0}

.am-search-overlay{
    position:fixed; inset:0; z-index:70; background:rgba(0,0,0,.45);
    display:flex; align-items:flex-start; justify-content:center; padding:10vh 1rem 1rem;
}
.am-search-modal{
    width:100%; max-width:560px; border:1px solid var(--color-input); border-radius:.9rem;
    background:var(--color-background); box-shadow:0 24px 48px -12px rgba(0,0,0,.45); overflow:hidden;
}
.am-search-inputwrap{display:flex; align-items:center; gap:.6rem; padding:.8rem 1rem; border-bottom:1px solid var(--color-input)}
.am-search-input{flex:1; border:0; outline:0; background:transparent; font-size:.95rem; color:var(--color-mono)}
.am-search-input::placeholder{color:var(--color-secondary-foreground); opacity:.8}
.am-search-results{max-height:52vh; overflow-y:auto; padding:.4rem 0}
.am-search-hint{padding:1.2rem 1rem; text-align:center; font-size:.8rem; color:var(--color-secondary-foreground)}
.am-search-group{padding:.25rem 0}
.am-search-grouplabel{display:flex; align-items:center; gap:.4rem; padding:.35rem 1rem .25rem; font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--color-secondary-foreground)}
.am-search-item{display:flex; align-items:baseline; justify-content:space-between; gap:.75rem; padding:.5rem 1rem; cursor:pointer}
.am-search-item:hover,.am-search-item.active{background:color-mix(in srgb, var(--color-primary) 9%, transparent)}
.am-search-title{font-size:.85rem; font-weight:600; color:var(--color-mono); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.am-search-sub{font-size:.72rem; color:var(--color-secondary-foreground); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex-shrink:0; max-width:45%}

/* ---- Owner onboarding checklist (Dashboard) ---- */
.am-onboard-step{display:flex; align-items:center; gap:.7rem; padding:.55rem .25rem; border-bottom:1px dashed var(--color-input)}
.am-onboard-step:last-child{border-bottom:0}
.am-onboard-step .step-label{font-size:.85rem; color:var(--color-mono); font-weight:500}
.am-onboard-step.done .step-label{text-decoration:line-through; color:var(--color-secondary-foreground); font-weight:400}

/* ---- Password strength meter ---- */
.am-pw-meter{height:.35rem; border-radius:9999px; background:var(--color-input); overflow:hidden; max-width:220px}
.am-pw-meter-bar{height:100%; width:0; border-radius:9999px; transition:width .2s ease, background .2s ease}

/* ---- Data tools: merge picker + bulk-action bar ---- */
.am-merge-results{display:flex; flex-direction:column; border-radius:.5rem; overflow:hidden; margin-top:.25rem}
.am-merge-item{display:flex; flex-direction:column; padding:.45rem .7rem; cursor:pointer; border:1px solid var(--color-input); border-top:0}
.am-merge-item:first-child{border-top:1px solid var(--color-input); border-radius:.5rem .5rem 0 0}
.am-merge-item:last-child{border-radius:0 0 .5rem .5rem}
.am-merge-item:hover{background:color-mix(in srgb, var(--color-primary) 8%, transparent)}
.am-bulk-bar{
    display:none; align-items:center; gap:.5rem; flex-wrap:wrap;
    padding:.5rem .9rem; border:1px solid var(--color-primary); border-radius:.6rem;
    background:color-mix(in srgb, var(--color-primary) 7%, transparent); margin-bottom:.75rem;
}
.am-bulk-bar.active{display:flex}

/* ---------------------------------------------------------------------------
   Metronic radio fix.

   metronic/css/styles.css copies the checkbox ':indeterminate' treatment onto
   '.kt-radio'. On a checkbox that state is deliberate and only ever set from
   script. On a RADIO the browser applies :indeterminate automatically to every
   button in a group where nothing is selected yet — so every untouched radio
   group rendered with all of its options filled in. On the participant
   registration form that meant the PAR-Q health questions each looked answered
   "Yes" AND "No", and "I am filling out this form" looked like all three.

   No conflict with :checked — once any button in a group is checked, nothing in
   that group matches :indeterminate any more.
   --------------------------------------------------------------------------- */
.kt-radio:indeterminate,
.kt-radio-mono:indeterminate {
    background-color: var(--background);
    background-image: none;
    border-color: var(--input);
}

/* The same trap reached through the wrong class: a radio wearing .kt-checkbox picks up the
   checkbox :indeterminate fill and renders as a filled blue square. Markup is the real fix
   (a radio should wear .kt-radio), this is the backstop for any that get missed.

   The input[type="radio"] qualifier is required, not cosmetic — genuine tri-state checkboxes
   set .indeterminate from script in Billing/GenerateMonthly.cshtml and Invoice/Index.cshtml,
   and an unqualified override would blank their dash. */
input[type="radio"].kt-checkbox:indeterminate,
input[type="radio"].kt-checkbox-mono:indeterminate {
    background-color: var(--background);
    background-image: none;
    border-color: var(--input);
}