/* 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;
}