/* Sim-Fusion app shell + reusable component layer.
   Loads after Bootstrap and tokens.css; layers on top of Bootstrap utilities. */

html, body {
    background: var(--sf-bg);
    color: var(--sf-text);
    font-family: var(--sf-font-sans);
    font-size: var(--sf-fs-14);
    line-height: var(--sf-lh-normal);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

html, body { margin: 0; padding: 0; width: 100%; }
html { box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }
body { min-height: 100vh; min-width: 0; }

/* Tabular numerals everywhere a number is shown — keeps tables aligned. */
.sf-num, .sf-table td, .sf-table th, .sf-stat-value { font-variant-numeric: tabular-nums; }

/* ── Shell layout ──────────────────────────────────────────── */
.sf-app {
    display: grid;
    grid-template-columns: var(--sf-sidebar-w) minmax(0, 1fr);
    grid-template-rows: var(--sf-topbar-h) 1fr;
    grid-template-areas:
        "sidebar topbar"
        "sidebar main";
    min-height: 100vh;
    width: 100%;
    max-width: 100%;
    min-width: 0;
}
.sf-app > * { min-width: 0; }
.sf-app.is-collapsed { grid-template-columns: var(--sf-sidebar-w-collapsed) minmax(0, 1fr); }

/* ── Sidebar ──────────────────────────────────────────────── */
.sf-sidebar {
    grid-area: sidebar;
    background: var(--sf-surface);
    border-right: 1px solid var(--sf-border);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: sticky;
    top: 0;
    height: 100vh;
}

@media (max-width: 991.98px) {
    .sf-app, .sf-app.is-collapsed {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "topbar" "main";
    }
    .sf-sidebar { display: none; }
    .sf-sidebar.is-open { display: flex; position: fixed; inset: 0 auto 0 0; width: var(--sf-sidebar-w); z-index: 1050; }
    .sf-scrim { position: fixed; inset: 0; background: rgba(15,23,42,.45); z-index: 1049; }
}
.sf-sidebar__brand {
    display: flex;
    align-items: center;
    gap: var(--sf-space-3);
    height: var(--sf-topbar-h);
    padding: 0 var(--sf-space-5);
    border-bottom: 1px solid var(--sf-border);
    flex-shrink: 0;
}
.sf-sidebar__logo {
    width: 2rem; height: 2rem;
    border-radius: var(--sf-radius-md);
    background: linear-gradient(135deg, #2563eb, #7c3aed);
    display: grid; place-items: center;
    color: #fff; font-weight: var(--sf-fw-bold);
    flex-shrink: 0;
    box-shadow: var(--sf-shadow-sm);
}
.sf-sidebar__title {
    font-size: var(--sf-fs-16);
    font-weight: var(--sf-fw-semibold);
    letter-spacing: -0.01em;
    white-space: nowrap;
    overflow: hidden;
}
.sf-sidebar__nav {
    flex: 1;
    overflow-y: auto;
    padding: var(--sf-space-4) var(--sf-space-3);
    display: flex;
    flex-direction: column;
    gap: var(--sf-space-5);
}
.sf-nav-group { display: flex; flex-direction: column; gap: var(--sf-space-1); }
.sf-nav-group__label {
    font-size: var(--sf-fs-12);
    font-weight: var(--sf-fw-semibold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--sf-text-subtle);
    padding: 0 var(--sf-space-3);
    margin-bottom: var(--sf-space-1);
    white-space: nowrap;
    overflow: hidden;
}
.sf-nav-link {
    display: flex;
    align-items: center;
    gap: var(--sf-space-3);
    padding: var(--sf-space-2) var(--sf-space-3);
    min-height: var(--sf-hit-target);
    border-radius: var(--sf-radius-md);
    color: var(--sf-text-muted);
    text-decoration: none;
    font-size: var(--sf-fs-14);
    font-weight: var(--sf-fw-medium);
    transition: background var(--sf-dur-fast) var(--sf-ease), color var(--sf-dur-fast) var(--sf-ease);
    white-space: nowrap;
}
.sf-nav-link i { font-size: 1.05rem; flex-shrink: 0; width: 1.25rem; text-align: center; }
.sf-nav-link:hover { background: var(--sf-surface-2); color: var(--sf-text); }
.sf-nav-link:focus-visible { outline: none; box-shadow: var(--sf-shadow-focus); }
.sf-nav-link.is-active {
    background: var(--sf-accent-soft);
    color: var(--sf-accent);
    font-weight: var(--sf-fw-semibold);
}
[data-bs-theme="dark"] .sf-nav-link.is-active { color: #fff; }
.sf-nav-link__badge {
    margin-left: auto;
    font-size: var(--sf-fs-12);
    background: var(--sf-surface-3);
    color: var(--sf-text-muted);
    padding: 2px var(--sf-space-2);
    border-radius: var(--sf-radius-pill);
}

.sf-sidebar__footer {
    border-top: 1px solid var(--sf-border);
    padding: var(--sf-space-3) var(--sf-space-3);
    flex-shrink: 0;
}

/* Collapsed mode — icons only */
.sf-app.is-collapsed .sf-sidebar__title,
.sf-app.is-collapsed .sf-nav-group__label,
.sf-app.is-collapsed .sf-nav-link span,
.sf-app.is-collapsed .sf-nav-link__badge { display: none; }
.sf-app.is-collapsed .sf-nav-link { justify-content: center; padding: var(--sf-space-2); }
.sf-app.is-collapsed .sf-sidebar__brand { justify-content: center; padding: 0; }

/* ── Topbar ───────────────────────────────────────────────── */
.sf-topbar {
    grid-area: topbar;
    height: var(--sf-topbar-h);
    background: var(--sf-surface);
    border-bottom: 1px solid var(--sf-border);
    display: flex;
    align-items: center;
    gap: var(--sf-space-3);
    padding: 0 var(--sf-space-5);
    position: sticky;
    top: 0;
    z-index: 100;
    min-width: 0;
}
@media (max-width: 1199.98px) { .sf-topbar { padding: 0 var(--sf-space-4); } }
.sf-topbar__toggle {
    background: transparent;
    border: 1px solid transparent;
    width: var(--sf-hit-target);
    height: var(--sf-hit-target);
    border-radius: var(--sf-radius-md);
    color: var(--sf-text-muted);
    display: grid; place-items: center;
    cursor: pointer;
    font-size: 1.1rem;
}
.sf-topbar__toggle:hover { background: var(--sf-surface-2); color: var(--sf-text); }
.sf-topbar__toggle:focus-visible { outline: none; box-shadow: var(--sf-shadow-focus); }

.sf-breadcrumbs {
    display: flex;
    align-items: center;
    gap: var(--sf-space-2);
    font-size: var(--sf-fs-13);
    color: var(--sf-text-subtle);
    flex: 1 1 0;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sf-breadcrumbs a { color: var(--sf-text-muted); text-decoration: none; }
.sf-breadcrumbs a:hover { color: var(--sf-accent); }
.sf-breadcrumbs__sep { opacity: .5; flex-shrink: 0; }
.sf-breadcrumbs__current { color: var(--sf-text); font-weight: var(--sf-fw-medium); overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 575.98px) {
    .sf-breadcrumbs > *:not(.sf-breadcrumbs__current) { display: none; }
}

.sf-topbar__search {
    position: relative;
    width: 22rem;
    max-width: 28vw;
    flex-shrink: 1;
}
@media (max-width: 1199.98px) { .sf-topbar__search { width: 16rem; } }
.sf-topbar__search input {
    width: 100%;
    height: 2.25rem;
    padding: 0 var(--sf-space-3) 0 2.25rem;
    background: var(--sf-surface-2);
    border: 1px solid transparent;
    border-radius: var(--sf-radius-md);
    color: var(--sf-text);
    font-size: var(--sf-fs-13);
    transition: border-color var(--sf-dur-fast), background var(--sf-dur-fast);
}
.sf-topbar__search input:focus { outline: none; border-color: var(--sf-accent); background: var(--sf-surface); box-shadow: var(--sf-shadow-focus); }
.sf-topbar__search i {
    position: absolute; left: var(--sf-space-3); top: 50%; transform: translateY(-50%);
    color: var(--sf-text-subtle); pointer-events: none;
}
.sf-topbar__search kbd {
    position: absolute; right: var(--sf-space-2); top: 50%; transform: translateY(-50%);
    font-size: var(--sf-fs-12); background: var(--sf-surface-3); color: var(--sf-text-subtle);
    padding: 1px 6px; border-radius: 4px; font-family: var(--sf-font-mono);
}
@media (max-width: 767.98px) { .sf-topbar__search { display: none; } }

.sf-topbar__actions { display: flex; align-items: center; gap: var(--sf-space-2); margin-left: auto; }
.sf-icon-btn {
    width: var(--sf-hit-target);
    height: var(--sf-hit-target);
    border-radius: var(--sf-radius-md);
    border: 1px solid transparent;
    background: transparent;
    color: var(--sf-text-muted);
    display: grid; place-items: center;
    cursor: pointer;
    font-size: 1.05rem;
    position: relative;
}
.sf-icon-btn:hover { background: var(--sf-surface-2); color: var(--sf-text); }
.sf-icon-btn:focus-visible { outline: none; box-shadow: var(--sf-shadow-focus); }

.sf-user-chip {
    display: flex; align-items: center; gap: var(--sf-space-2);
    padding: var(--sf-space-1) var(--sf-space-2) var(--sf-space-1) var(--sf-space-1);
    background: var(--sf-surface-2);
    border: 1px solid var(--sf-border);
    border-radius: var(--sf-radius-pill);
    cursor: pointer;
    font-size: var(--sf-fs-13);
    color: var(--sf-text);
    line-height: 1;
}
.sf-user-chip:hover { background: var(--sf-surface-3); }
.sf-avatar {
    width: 1.75rem; height: 1.75rem; border-radius: 50%;
    background: linear-gradient(135deg, #2563eb, #7c3aed);
    color: #fff; font-weight: var(--sf-fw-semibold); font-size: var(--sf-fs-12);
    display: grid; place-items: center;
    flex-shrink: 0;
}
.sf-user-chip__meta { display: flex; flex-direction: column; gap: 2px; }
.sf-user-chip__name { font-weight: var(--sf-fw-semibold); }
.sf-user-chip__role { font-size: var(--sf-fs-12); color: var(--sf-text-subtle); }
@media (max-width: 575.98px) { .sf-user-chip__meta { display: none; } }

/* ── Main + page layout ───────────────────────────────────── */
.sf-main {
    grid-area: main;
    display: block;
    /* Horizontal padding matches the topbar so content aligns with the
       hamburger / breadcrumb / actions row above. */
    padding: var(--sf-space-6) var(--sf-space-5);
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow-x: clip;
    box-sizing: border-box;
    justify-self: stretch;
}
/* Direct children of sf-main must fill its content box */
.sf-main > * { width: 100%; max-width: 100%; box-sizing: border-box; }
.sf-stat-grid, .sf-quick-grid { display: grid; width: 100%; }
@media (max-width: 1199.98px) { .sf-main { padding: var(--sf-space-5) var(--sf-space-4); } }
@media (max-width: 767.98px) { .sf-main { padding: var(--sf-space-4); } }

.sf-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sf-space-4);
    margin-bottom: var(--sf-space-6);
    flex-wrap: wrap;
}
.sf-page-header > div:first-child { min-width: 0; }
.sf-page-header__title { word-break: break-word; }
.sf-page-header__title {
    font-size: var(--sf-fs-24);
    font-weight: var(--sf-fw-semibold);
    letter-spacing: -0.015em;
    margin: 0 0 var(--sf-space-1);
    color: var(--sf-text);
}
.sf-page-header__subtitle {
    font-size: var(--sf-fs-14);
    color: var(--sf-text-muted);
    margin: 0;
}
.sf-page-header__actions { display: flex; gap: var(--sf-space-2); flex-wrap: wrap; }

/* ── Buttons (overlays Bootstrap, doesn't replace) ────────── */
.btn { font-weight: var(--sf-fw-medium); border-radius: var(--sf-radius-md); }
.btn-primary {
    background: var(--sf-accent); border-color: var(--sf-accent);
}
.btn-primary:hover, .btn-primary:focus { background: var(--sf-accent-hover); border-color: var(--sf-accent-hover); }
.btn:focus-visible { box-shadow: var(--sf-shadow-focus); }

/* ── Cards ────────────────────────────────────────────────── */
.sf-card {
    display: block;
    width: 100%;
    background: var(--sf-surface);
    border: 1px solid var(--sf-border);
    border-radius: var(--sf-radius-lg);
    box-shadow: var(--sf-shadow-xs);
    overflow: hidden;
    box-sizing: border-box;
}
.sf-card__body { width: 100%; box-sizing: border-box; }
.sf-card .table-responsive { width: 100%; }
.sf-card .sf-table { width: 100% !important; }
.sf-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sf-space-3);
    padding: var(--sf-space-4) var(--sf-space-5);
    border-bottom: 1px solid var(--sf-border);
    flex-wrap: wrap;
    min-width: 0;
}
.sf-card__header > .sf-card__title { min-width: 0; flex-shrink: 1; }

/* Split header: title cluster on the left, actions cluster on the right;
   both wrap cleanly on narrow widths without squashing the button. */
.sf-card__header--split { flex-wrap: wrap; row-gap: var(--sf-space-2); }
.sf-card__header-main {
    display: flex;
    align-items: center;
    gap: var(--sf-space-2);
    min-width: 0;
}
.sf-card__header-actions {
    display: flex;
    align-items: center;
    gap: var(--sf-space-2);
    flex-wrap: wrap;
    margin-left: auto;
}

/* Inline search with leading icon. Used in card headers where a full
   sf-filters row would be overkill. */
.sf-search { position: relative; display: inline-flex; }
.sf-search__icon {
    position: absolute;
    left: .625rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 13px;
    color: var(--sf-text-subtle);
    pointer-events: none;
}
.sf-search__input {
    padding-left: 1.875rem;
    min-width: 16rem;
    max-width: 22rem;
    background: var(--sf-surface);
    border-color: var(--sf-border);
    color: var(--sf-text);
}
.sf-search__input:focus {
    border-color: var(--sf-accent);
    box-shadow: var(--sf-shadow-focus);
}
@media (max-width: 575.98px) {
    .sf-card__header-actions { width: 100%; }
    .sf-search { flex: 1 1 auto; }
    .sf-search__input { min-width: 0; width: 100%; max-width: none; }
}

/* Deactivated user rows read as subdued but still legible. */
.sf-table tbody tr.sf-row--muted > td { opacity: .65; }
.sf-table tbody tr.sf-row--muted:hover > td { opacity: 1; }

/* Compact active-status switch: toggle + pill label side-by-side. */
.sf-active-switch {
    display: inline-flex;
    align-items: center;
    gap: var(--sf-space-2);
    padding-left: 2.25rem; /* room for bootstrap's absolute-positioned switch */
}
.sf-active-switch .active-label {
    cursor: inherit;
    font-size: 11px;
    padding: 2px 8px;
}

/* Users-table column polish: email reads as the primary identifier. */
.sf-table--users .sf-cell-primary { font-weight: 500; color: var(--sf-text); }
.sf-card__title {
    font-size: var(--sf-fs-16);
    font-weight: var(--sf-fw-semibold);
    margin: 0;
    color: var(--sf-text);
}
.sf-card__body { padding: var(--sf-space-5); }
.sf-card__body--flush { padding: 0; }

/* Stat / KPI cards on Home */
.sf-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: var(--sf-space-4);
    margin-bottom: var(--sf-space-6);
}
.sf-stat {
    background: var(--sf-surface);
    border: 1px solid var(--sf-border);
    border-radius: var(--sf-radius-lg);
    padding: var(--sf-space-5);
    display: flex;
    align-items: center;
    gap: var(--sf-space-4);
    box-shadow: var(--sf-shadow-xs);
    transition: box-shadow var(--sf-dur) var(--sf-ease), transform var(--sf-dur) var(--sf-ease);
    min-width: 0;
}
.sf-stat > div:last-child { min-width: 0; flex: 1; }
.sf-stat:hover { box-shadow: var(--sf-shadow-md); transform: translateY(-1px); }
.sf-stat__icon {
    width: 2.75rem; height: 2.75rem;
    border-radius: var(--sf-radius-md);
    display: grid; place-items: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}
.sf-stat__icon--accent { background: var(--sf-accent-soft); color: var(--sf-accent); }
.sf-stat__icon--success { background: var(--sf-success-soft); color: var(--sf-success); }
.sf-stat__icon--warn { background: var(--sf-warn-soft); color: var(--sf-warn); }
.sf-stat__icon--info { background: var(--sf-info-soft); color: var(--sf-info); }
.sf-stat__label { font-size: var(--sf-fs-13); color: var(--sf-text-muted); margin: 0 0 2px; }
.sf-stat__value { font-size: var(--sf-fs-24); font-weight: var(--sf-fw-semibold); color: var(--sf-text); line-height: 1; }

/* ── Quick action tiles ───────────────────────────────────── */
.sf-quick-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: var(--sf-space-4);
}
.sf-quick {
    display: flex;
    align-items: flex-start;
    gap: var(--sf-space-4);
    padding: var(--sf-space-5);
    background: var(--sf-surface);
    border: 1px solid var(--sf-border);
    border-radius: var(--sf-radius-lg);
    text-decoration: none;
    color: var(--sf-text);
    transition: border-color var(--sf-dur) var(--sf-ease), box-shadow var(--sf-dur) var(--sf-ease), transform var(--sf-dur) var(--sf-ease);
    box-shadow: var(--sf-shadow-xs);
    min-width: 0;
}
.sf-quick > div:last-child { min-width: 0; flex: 1; }
.sf-quick:hover {
    border-color: var(--sf-accent);
    box-shadow: var(--sf-shadow-md);
    transform: translateY(-2px);
    color: var(--sf-text);
}
.sf-quick__icon {
    width: 2.75rem; height: 2.75rem;
    border-radius: var(--sf-radius-md);
    background: var(--sf-accent-soft);
    color: var(--sf-accent);
    display: grid; place-items: center;
    font-size: 1.35rem;
    flex-shrink: 0;
}
.sf-quick__title { font-size: var(--sf-fs-16); font-weight: var(--sf-fw-semibold); margin: 0 0 var(--sf-space-1); }
.sf-quick__desc { font-size: var(--sf-fs-13); color: var(--sf-text-muted); margin: 0; line-height: var(--sf-lh-snug); }

/* ── Tables ───────────────────────────────────────────────── */
.sf-card .table-responsive { border-radius: 0 0 var(--sf-radius-lg) var(--sf-radius-lg); }
.sf-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--sf-fs-14); }
.sf-table thead th {
    text-align: left;
    font-size: var(--sf-fs-12);
    font-weight: var(--sf-fw-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--sf-text-subtle);
    padding: var(--sf-space-3) var(--sf-space-4);
    background: var(--sf-surface-2);
    border-bottom: 1px solid var(--sf-border);
    white-space: nowrap;
}
.sf-table tbody td {
    padding: var(--sf-space-3) var(--sf-space-4);
    border-bottom: 1px solid var(--sf-border);
    color: var(--sf-text);
    vertical-align: middle;
}
.sf-table tbody tr:last-child td { border-bottom: none; }
.sf-table tbody tr { transition: background var(--sf-dur-fast); }
.sf-table tbody tr:hover { background: var(--sf-surface-2); }
.sf-table .text-end { text-align: right; }

/* Filter bar */
.sf-filters {
    display: flex;
    gap: var(--sf-space-3);
    flex-wrap: wrap;
    margin-bottom: var(--sf-space-4);
    align-items: center;
}
.sf-filters .form-control, .sf-filters .form-select {
    background: var(--sf-surface);
    border-color: var(--sf-border);
    color: var(--sf-text);
    border-radius: var(--sf-radius-md);
    font-size: var(--sf-fs-13);
    height: 2.5rem;
    min-width: 11rem;
    flex: 1 1 11rem;
    max-width: 18rem;
}
.sf-filters .form-control[type="search"] { max-width: none; }
.sf-filters .form-control:focus, .sf-filters .form-select:focus {
    border-color: var(--sf-accent);
    box-shadow: var(--sf-shadow-focus);
}

/* Secondary (advanced) filter row — slightly recessed so it reads as "extra". */
.sf-filters--secondary {
    padding: var(--sf-space-3);
    margin-top: calc(var(--sf-space-3) * -1);
    margin-bottom: var(--sf-space-4);
    background: var(--sf-surface-2);
    border: 1px solid var(--sf-border);
    border-radius: var(--sf-radius-md);
}
.sf-filters--secondary .form-control,
.sf-filters--secondary .form-select { background: var(--sf-surface); }

/* "More filters" toggle button + count pill. */
.sf-filters__more-btn {
    height: 2.5rem;
    display: inline-flex;
    align-items: center;
    gap: var(--sf-space-1);
    font-size: var(--sf-fs-13);
    white-space: nowrap;
}
.sf-filters__more-btn.is-active {
    background: var(--sf-surface-2);
    border-color: var(--sf-border-strong);
    color: var(--sf-text);
}
.sf-filters__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 .375rem;
    margin-left: .25rem;
    border-radius: 999px;
    background: var(--sf-accent);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
}
.sf-filters__sort {
    flex: 0 1 11rem !important;
    max-width: 12rem !important;
    min-width: 9rem !important;
}

/* Active filter chips — show what's applied, remove with a click. */
.sf-filters__chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sf-space-2);
    margin: calc(var(--sf-space-3) * -1) 0 var(--sf-space-4);
    align-items: center;
}
.sf-chip {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .25rem .625rem;
    background: var(--sf-surface-2);
    border: 1px solid var(--sf-border);
    border-radius: 999px;
    font-size: var(--sf-fs-13);
    color: var(--sf-text);
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
}
.sf-chip:hover {
    background: var(--sf-surface);
    border-color: var(--sf-border-strong);
}
.sf-chip .bi-x-lg { font-size: 11px; opacity: .65; }
.sf-chip:hover .bi-x-lg { opacity: 1; }
.sf-chip--clear {
    background: transparent;
    border-color: transparent;
    color: var(--sf-accent);
    font-weight: 500;
    padding-left: .375rem;
    padding-right: .375rem;
}
.sf-chip--clear:hover {
    background: transparent;
    border-color: transparent;
    text-decoration: underline;
}

/* Empty state */
.sf-empty {
    padding: var(--sf-space-12) var(--sf-space-6);
    text-align: center;
    color: var(--sf-text-subtle);
}
.sf-empty i { font-size: 2.5rem; opacity: .6; display: block; margin-bottom: var(--sf-space-3); }
.sf-empty h3 { font-size: var(--sf-fs-16); color: var(--sf-text); margin: 0 0 var(--sf-space-1); }
.sf-empty p { margin: 0 0 var(--sf-space-4); font-size: var(--sf-fs-13); }

/* Skeleton loader */
@keyframes sf-shimmer { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } }
.sf-skel {
    display: inline-block;
    background: linear-gradient(90deg, var(--sf-surface-2) 0%, var(--sf-surface-3) 50%, var(--sf-surface-2) 100%);
    background-size: 800px 100%;
    animation: sf-shimmer 1.4s infinite linear;
    border-radius: var(--sf-radius-sm);
    height: 1em;
    width: 100%;
}

/* Badges (semantic, layered over Bootstrap) */
.sf-badge {
    display: inline-flex; align-items: center; gap: var(--sf-space-1);
    padding: 2px var(--sf-space-2);
    border-radius: var(--sf-radius-pill);
    font-size: var(--sf-fs-12);
    font-weight: var(--sf-fw-medium);
    line-height: 1.4;
}
.sf-badge--accent { background: var(--sf-accent-soft); color: var(--sf-accent); }
.sf-badge--success { background: var(--sf-success-soft); color: var(--sf-success); }
.sf-badge--warn { background: var(--sf-warn-soft); color: var(--sf-warn); }
.sf-badge--danger { background: var(--sf-danger-soft); color: var(--sf-danger); }
.sf-badge--info { background: var(--sf-info-soft); color: var(--sf-info); }
.sf-badge--neutral { background: var(--sf-surface-3); color: var(--sf-text-muted); }

/* Form controls — align with token surfaces */
.form-control, .form-select {
    background-color: var(--sf-surface);
    border-color: var(--sf-border);
    color: var(--sf-text);
    border-radius: var(--sf-radius-md);
}
.form-control:focus, .form-select:focus {
    background-color: var(--sf-surface);
    border-color: var(--sf-accent);
    color: var(--sf-text);
    box-shadow: var(--sf-shadow-focus);
}
.form-label { color: var(--sf-text-muted); font-size: var(--sf-fs-13); font-weight: var(--sf-fw-medium); margin-bottom: var(--sf-space-1); }
.form-control::placeholder { color: var(--sf-text-subtle); }

/* Modals — soften with tokens */
.modal-content {
    background: var(--sf-surface);
    border: 1px solid var(--sf-border);
    border-radius: var(--sf-radius-lg);
    box-shadow: var(--sf-shadow-lg);
}
.modal-header { border-bottom-color: var(--sf-border); }
.modal-footer { border-top-color: var(--sf-border); background: var(--sf-surface-2); }
.modal-title { font-size: var(--sf-fs-16); font-weight: var(--sf-fw-semibold); }

/* Bootstrap card override (some pages still use plain .card) */
.card { background: var(--sf-surface); border: 1px solid var(--sf-border); border-radius: var(--sf-radius-lg); box-shadow: var(--sf-shadow-xs); }
.card-header { background: var(--sf-surface-2); border-bottom: 1px solid var(--sf-border); }
.card-footer { background: var(--sf-surface-2); border-top: 1px solid var(--sf-border); }

/* Dropdowns */
.dropdown-menu { background: var(--sf-surface); border-color: var(--sf-border); border-radius: var(--sf-radius-md); box-shadow: var(--sf-shadow-md); }
.dropdown-item { color: var(--sf-text); padding: var(--sf-space-2) var(--sf-space-3); font-size: var(--sf-fs-13); }
.dropdown-item:hover, .dropdown-item:focus { background: var(--sf-surface-2); color: var(--sf-text); }

/* Toast container default position */
.toast-container { z-index: 1080; }

/* Focus rings — only for elements that don't already define one via Bootstrap */
.sf-nav-link:focus-visible,
.sf-icon-btn:focus-visible,
.sf-topbar__toggle:focus-visible,
.sf-quick:focus-visible,
.sf-rail__item:focus-visible {
    outline: none;
    box-shadow: var(--sf-shadow-focus);
}

/* Hide scrollbar chrome but keep functional */
.sf-sidebar__nav::-webkit-scrollbar { width: 6px; }
.sf-sidebar__nav::-webkit-scrollbar-thumb { background: var(--sf-border-strong); border-radius: 3px; }
.sf-sidebar__nav::-webkit-scrollbar-track { background: transparent; }

/* ─────────────────────────────────────────────────────────────────────
   Responsive polish — applied globally to keep every page usable
   between 320px and 4K, including 100% / 125% Windows DPI scaling.
   ────────────────────────────────────────────────────────────────── */

/* Page header: stack title above actions on small viewports */
@media (max-width: 575.98px) {
    .sf-page-header { gap: var(--sf-space-3); }
    .sf-page-header__title { font-size: var(--sf-fs-20); }
    .sf-page-header__actions { width: 100%; }
    .sf-page-header__actions .btn { flex: 1; }
}

/* KPI grid: tighter cards on tablets, single column on phones */
@media (max-width: 767.98px) {
    .sf-stat-grid { gap: var(--sf-space-3); margin-bottom: var(--sf-space-4); }
    .sf-stat { padding: var(--sf-space-4); gap: var(--sf-space-3); }
    .sf-stat__icon { width: 2.25rem; height: 2.25rem; font-size: 1.05rem; }
    .sf-stat__value { font-size: var(--sf-fs-20); }
}
@media (max-width: 575.98px) {
    .sf-stat-grid { grid-template-columns: 1fr 1fr; }
    .sf-stat { padding: var(--sf-space-3); }
}

/* Quick actions: 2-up on tablet, 1-up on phone */
@media (max-width: 767.98px) {
    .sf-quick-grid { grid-template-columns: 1fr 1fr; gap: var(--sf-space-3); }
    .sf-quick { padding: var(--sf-space-4); gap: var(--sf-space-3); }
    .sf-quick__icon { width: 2.25rem; height: 2.25rem; font-size: 1.1rem; }
    .sf-quick__title { font-size: var(--sf-fs-14); }
    .sf-quick__desc { display: none; }
}
@media (max-width: 479.98px) {
    .sf-quick-grid { grid-template-columns: 1fr; }
    .sf-quick__desc { display: block; }
}

/* Cards: tighter padding on small */
@media (max-width: 767.98px) {
    .sf-card__header { padding: var(--sf-space-3) var(--sf-space-4); }
    .sf-card__body { padding: var(--sf-space-4); }
}

/* Filter row: each control takes full width on phones */
@media (max-width: 575.98px) {
    .sf-filters { gap: var(--sf-space-2); }
    .sf-filters .form-control,
    .sf-filters .form-select {
        flex: 1 1 100%;
        max-width: none;
        min-width: 0;
    }
}

/* Tables: action and numeric cells stay single-line; text cells wrap normally */
.sf-table tbody td.sf-cell-nowrap,
.sf-table tbody td.text-end { white-space: nowrap; }

/* Bootstrap modals: full-screen on phones, comfortable on tablets */
@media (max-width: 575.98px) {
    .modal-dialog:not(.modal-fullscreen) {
        margin: 0;
        max-width: 100%;
        min-height: 100%;
    }
    .modal-dialog:not(.modal-fullscreen) .modal-content {
        min-height: 100vh;
        border-radius: 0;
        border: 0;
    }
    .modal-body { padding: var(--sf-space-4); }
    .modal-header, .modal-footer { padding: var(--sf-space-3) var(--sf-space-4); }
}

/* Bootstrap form rows: tighter gutters on small viewports */
@media (max-width: 575.98px) {
    .row.g-3 { --bs-gutter-x: var(--sf-space-3); --bs-gutter-y: var(--sf-space-3); }
}

/* Wizard footer (scenario-setup card-footer): stack buttons on small */
@media (max-width: 575.98px) {
    .step-panel .card-footer {
        flex-direction: column;
        align-items: stretch !important;
        gap: var(--sf-space-2);
    }
    .step-panel .card-footer > * { width: 100%; }
    .step-panel .card-footer .d-flex { flex-direction: column; gap: var(--sf-space-2) !important; width: 100%; }
    .step-panel .card-footer .btn { width: 100%; }
}

/* Drug edit modal — route tabs scroll horizontally on mobile */
@media (max-width: 767.98px) {
    .nav-tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .nav-tabs .nav-link { white-space: nowrap; }
}

/* Color grids (drugs/classes pickers): adapt columns to width */
@media (max-width: 575.98px) {
    .color-grid { grid-template-columns: repeat(5, 1fr) !important; }
}

/* Use overflow-x: clip (not hidden) so it doesn't break position: sticky on the topbar */
@supports (overflow-x: clip) {
    html, body { overflow-x: clip; }
}

/* ── Participant cards (scenario setup) ──────────────────────────── */
.sf-participant-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
    gap: var(--sf-space-4);
}
.sf-participant {
    background: var(--sf-surface);
    border: 1px solid var(--sf-border);
    border-radius: var(--sf-radius-lg);
    overflow: hidden;
    transition: border-color var(--sf-dur) var(--sf-ease), box-shadow var(--sf-dur) var(--sf-ease);
}
.sf-participant:hover { border-color: var(--sf-border-strong); box-shadow: var(--sf-shadow-sm); }
.sf-participant__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--sf-space-3) var(--sf-space-4);
    background: var(--sf-surface-2);
    border-bottom: 1px solid var(--sf-border);
}
.sf-participant__title {
    display: flex;
    align-items: center;
    gap: var(--sf-space-2);
    font-size: var(--sf-fs-13);
    font-weight: var(--sf-fw-semibold);
    color: var(--sf-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.sf-participant__num {
    width: 1.5rem; height: 1.5rem;
    border-radius: 50%;
    background: var(--sf-accent);
    color: #fff;
    display: grid; place-items: center;
    font-size: var(--sf-fs-12);
    font-weight: var(--sf-fw-bold);
}
.sf-participant__remove {
    width: 2rem; height: 2rem;
    color: var(--sf-text-subtle);
}
.sf-participant__remove:hover { background: var(--sf-danger-soft); color: var(--sf-danger); }
.sf-participant__body {
    padding: var(--sf-space-4);
    display: flex;
    flex-direction: column;
    gap: var(--sf-space-4);
}
.sf-participant__field { display: flex; flex-direction: column; gap: var(--sf-space-2); }
.sf-participant__field .form-label { margin-bottom: 0; }

/* ── Toggle group ─────────────────────────────────────────────────── */
.sf-toggle-group {
    display: flex;
    gap: var(--sf-space-2);
    flex-wrap: wrap;
}
.sf-toggle {
    flex: 1 1 auto;
    min-height: 2.5rem;
    padding: var(--sf-space-2) var(--sf-space-3);
    background: var(--sf-surface);
    border: 1.5px solid var(--sf-border);
    border-radius: var(--sf-radius-md);
    color: var(--sf-text-muted);
    font-size: var(--sf-fs-13);
    font-weight: var(--sf-fw-medium);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sf-space-2);
    transition: all var(--sf-dur-fast) var(--sf-ease);
    white-space: nowrap;
}
.sf-toggle:hover {
    border-color: var(--sf-border-strong);
    color: var(--sf-text);
    background: var(--sf-surface-2);
}
.sf-toggle.is-active {
    background: var(--sf-accent);
    border-color: var(--sf-accent);
    color: #fff;
    box-shadow: var(--sf-shadow-sm);
}
.sf-toggle.is-active:hover {
    background: var(--sf-accent-hover);
    border-color: var(--sf-accent-hover);
    color: #fff;
}
.sf-toggle:focus-visible {
    outline: none;
    box-shadow: var(--sf-shadow-focus);
}

/* Touch device tweaks */
@media (hover: none) and (pointer: coarse) {
    .sf-quick:hover, .sf-stat:hover { transform: none; }
}

/* ─────────────────────────────────────────────────────────────────────
   PWA / standalone mobile shell

   When the user launches the installed PWA on a phone, swap the sidebar
   + topbar for a native-feeling bottom nav and slim header. In a regular
   browser tab the shell is unchanged.

   Activation: body[data-pwa="true"] is set by pwa-register.js when the
   document is running in display-mode: standalone (or iOS's
   navigator.standalone legacy flag). Gating on the body attribute rather
   than the media query alone lets us cover every platform uniformly.
   ────────────────────────────────────────────────────────────────── */

/* Bottom nav + sheet stay hidden by default so the browser-tab shell
   never shows them. */
.sf-bottom-nav { display: none; }
.sf-sheet { display: none; }

@media (max-width: 768px) {
    body[data-pwa="true"] .sf-sidebar,
    body[data-pwa="true"] .sf-scrim { display: none !important; }

    body[data-pwa="true"] .sf-app,
    body[data-pwa="true"] .sf-app.is-collapsed {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: var(--sf-topbar-h-pwa, 3rem) 1fr;
        grid-template-areas: "topbar" "main";
    }

    /* Slim topbar: title + avatar. Hamburger, search, theme, language all
       move into the bottom sheet to reduce tap-target clutter. */
    body[data-pwa="true"] .sf-topbar {
        height: var(--sf-topbar-h-pwa, 3rem);
        padding: 0 var(--sf-space-4);
        padding-top: env(safe-area-inset-top, 0);
        height: calc(var(--sf-topbar-h-pwa, 3rem) + env(safe-area-inset-top, 0px));
    }
    body[data-pwa="true"] .sf-topbar__toggle,
    body[data-pwa="true"] .sf-topbar__search,
    body[data-pwa="true"] #sf-theme-toggle,
    body[data-pwa="true"] .sf-topbar__lang {
        display: none !important;
    }
    body[data-pwa="true"] .sf-breadcrumbs {
        font-size: var(--sf-fs-16);
        color: var(--sf-text);
        font-weight: var(--sf-fw-semibold);
    }
    body[data-pwa="true"] .sf-breadcrumbs > *:not(.sf-breadcrumbs__current) { display: none; }
    body[data-pwa="true"] .sf-breadcrumbs__current { color: var(--sf-text); }

    body[data-pwa="true"] .sf-main {
        padding: var(--sf-space-4);
        /* Room for the fixed bottom nav + the iPhone home-indicator inset. */
        padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px) + var(--sf-space-4));
    }

    /* Hide the page header when no title was set — the topbar now carries it. */
    body[data-pwa="true"] .sf-page-header { margin-bottom: var(--sf-space-4); }

    body[data-pwa="true"] .sf-bottom-nav { display: grid; }
    body[data-pwa="true"] .sf-sheet { display: block; }

    /* Prevent pull-to-refresh and elastic overscroll from revealing the
       URL bar / white background behind the installed app shell. */
    body[data-pwa="true"] { overscroll-behavior-y: contain; }
    /* Chrome on PWA bottom nav shouldn't be text-selectable. */
    body[data-pwa="true"] .sf-topbar,
    body[data-pwa="true"] .sf-bottom-nav { user-select: none; -webkit-user-select: none; }
}

/* ── Bottom nav ──────────────────────────────────────────────────── */
.sf-bottom-nav {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 1040;
    grid-template-columns: repeat(5, 1fr);
    align-items: center;
    background: var(--sf-surface);
    border-top: 1px solid var(--sf-border);
    padding-bottom: env(safe-area-inset-bottom, 0);
    backdrop-filter: blur(14px) saturate(1.2);
    -webkit-backdrop-filter: blur(14px) saturate(1.2);
    box-shadow: 0 -4px 16px -8px rgba(15, 23, 42, 0.12);
}
[data-bs-theme="dark"] .sf-bottom-nav {
    background: color-mix(in srgb, var(--sf-surface) 88%, transparent);
    box-shadow: 0 -4px 20px -8px rgba(0, 0, 0, 0.5);
}
.sf-bottom-nav__item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    height: 56px;
    padding: 6px 4px 6px;
    background: transparent;
    border: 0;
    color: var(--sf-text-subtle);
    text-decoration: none;
    font-size: var(--sf-fs-11, 11px);
    font-weight: var(--sf-fw-medium);
    transition: color var(--sf-dur-fast) var(--sf-ease);
    -webkit-tap-highlight-color: transparent;
}
.sf-bottom-nav__item i { font-size: 1.25rem; line-height: 1; }
.sf-bottom-nav__label { font-size: 11px; letter-spacing: 0.01em; }
.sf-bottom-nav__item.is-active { color: var(--sf-accent); }
.sf-bottom-nav__item.is-active::before {
    content: "";
    position: absolute;
    top: 0; left: 50%;
    transform: translateX(-50%);
    width: 28px; height: 3px;
    border-radius: 0 0 999px 999px;
    background: var(--sf-accent);
}
.sf-bottom-nav__item:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--sf-accent); border-radius: var(--sf-radius-md); }
.sf-bottom-nav__item:active { transform: scale(0.96); transition-duration: 60ms; }

/* Raised center FAB for the hero "New scenario" action. */
.sf-bottom-nav__fab {
    align-self: center;
    justify-self: center;
    width: 56px;
    height: 56px;
    margin-top: -20px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--sf-accent) 0%, #7c3aed 100%);
    color: #fff !important;
    box-shadow: 0 8px 20px -4px rgba(37, 99, 235, 0.45), 0 2px 6px rgba(37, 99, 235, 0.25);
    padding: 0;
    gap: 0;
}
.sf-bottom-nav__fab i { font-size: 1.5rem; }
.sf-bottom-nav__fab .sf-bottom-nav__label { display: none; }
.sf-bottom-nav__fab:active { transform: scale(0.92); }
[data-bs-theme="dark"] .sf-bottom-nav__fab {
    box-shadow: 0 8px 24px -6px rgba(96, 165, 250, 0.5), 0 2px 8px rgba(0, 0, 0, 0.4);
}

/* ── Bottom sheet ("More") ──────────────────────────────────────── */
.sf-sheet {
    position: fixed;
    inset: 0;
    z-index: 1100;
    pointer-events: none;
}
.sf-sheet[hidden] { display: none !important; }
.sf-sheet__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0);
    transition: background var(--sf-dur) var(--sf-ease);
    pointer-events: auto;
}
.sf-sheet.is-open .sf-sheet__backdrop { background: rgba(15, 23, 42, 0.4); }
.sf-sheet__panel {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    background: var(--sf-surface);
    border-radius: var(--sf-radius-xl) var(--sf-radius-xl) 0 0;
    padding: var(--sf-space-2) var(--sf-space-4) calc(var(--sf-space-4) + env(safe-area-inset-bottom, 0));
    max-height: 85vh;
    overflow-y: auto;
    transform: translateY(100%);
    transition: transform 240ms cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: auto;
    box-shadow: 0 -20px 40px -10px rgba(15, 23, 42, 0.25);
}
.sf-sheet.is-open .sf-sheet__panel { transform: translateY(0); }
.sf-sheet__handle {
    width: 40px; height: 4px;
    border-radius: 999px;
    background: var(--sf-border-strong);
    margin: var(--sf-space-2) auto var(--sf-space-3);
    opacity: 0.6;
}
.sf-sheet__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--sf-space-2);
}
.sf-sheet__title {
    font-size: var(--sf-fs-18, 1.125rem);
    font-weight: var(--sf-fw-semibold);
    margin: 0;
}
.sf-sheet__close {
    width: var(--sf-hit-target);
    height: var(--sf-hit-target);
    border: 0; background: transparent;
    color: var(--sf-text-muted);
    border-radius: 50%;
    display: grid; place-items: center;
    font-size: 1.1rem;
}
.sf-sheet__close:hover { background: var(--sf-surface-2); color: var(--sf-text); }
.sf-sheet__body { display: flex; flex-direction: column; gap: var(--sf-space-4); padding-bottom: var(--sf-space-2); }
.sf-sheet__section { display: flex; flex-direction: column; gap: 2px; }
.sf-sheet__section-label {
    font-size: var(--sf-fs-12);
    font-weight: var(--sf-fw-semibold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--sf-text-subtle);
    padding: 0 var(--sf-space-3);
    margin-bottom: var(--sf-space-1);
}
.sf-sheet__item {
    display: flex;
    align-items: center;
    gap: var(--sf-space-3);
    padding: var(--sf-space-3);
    min-height: var(--sf-hit-target);
    background: transparent;
    border: 0;
    width: 100%;
    text-align: left;
    color: var(--sf-text);
    text-decoration: none;
    font-size: var(--sf-fs-14);
    font-weight: var(--sf-fw-medium);
    border-radius: var(--sf-radius-md);
    cursor: pointer;
    transition: background var(--sf-dur-fast) var(--sf-ease);
}
.sf-sheet__item:hover,
.sf-sheet__item:focus-visible { background: var(--sf-surface-2); outline: none; }
.sf-sheet__item i { font-size: 1.1rem; width: 1.5rem; text-align: center; color: var(--sf-text-muted); flex-shrink: 0; }
.sf-sheet__item-value {
    margin-left: auto;
    font-size: var(--sf-fs-13);
    color: var(--sf-text-subtle);
    font-weight: var(--sf-fw-regular, 400);
}
.sf-sheet__item--danger { color: var(--sf-danger, #dc2626); }
.sf-sheet__item--danger i { color: var(--sf-danger, #dc2626); }
.sf-sheet__item.dropdown-toggle::after { margin-left: var(--sf-space-2); }
.sf-sheet__lang .dropdown-menu { width: 100%; }

/* Locks the page behind the open sheet without triggering iOS rubber-band. */
body.sf-no-scroll { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
    .sf-sheet__panel { transition-duration: 80ms; }
    .sf-bottom-nav__item { transition-duration: 0ms; }
}