/* ============================================================
   pcc-base.css — Shared Design System for Admin & Clinical Apps
   All Bootstrap overrides, layout, components, dark mode.
   App-specific rules live in admin-overrides.css / clinical-overrides.css.
   ============================================================ */

.prod-warning-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    background: var(--yl-env-prod);
    color: #fff;
    text-align: center;
    font-weight: 700;
    font-size: 0.8rem;
    padding: 4px 0;
    letter-spacing: 0.05em;
}
/* STAGE variant — amber strip with dark text (matches the STAGE env pill;
   white-on-amber fails contrast). Same full-width layout as PROD. */
.prod-warning-banner--stage {
    background: var(--yl-env-stage);
    color: var(--yl-env-stage-text);
}
.prod-warning-spacer {
    height: 25px;
}

/* ── CSS Variables ────────────────────────────────────────── */
/* Yisro Link light workspace (docs/VISUAL_STYLE_GUIDE.md). Token names predate the palette:
   "navy" is the strong accent and "slate" the muted text. */
:root {
    --yl-navy:            #1D4ED8;  /* strong accent: text on primary-soft, active nav item */
    --yl-navy-dark:       #1D4ED8;
    --yl-navy-active:     #DCE6FD;
    --yl-navy-tint:       #EFF4FF;  /* primary-soft: selected rows, active filters */
    --yl-on-primary:      #FFFFFF;
    --yl-fill:            #2563EB;  /* primary */
    --yl-fill-rgb:        37, 99, 235;
    --yl-fill-hover:      #1D4ED8;
    --yl-link:            #2563EB;
    --yl-ink:             #111827;
    --yl-ink-rgb:         17, 24, 39;
    --yl-slate-700:       #374151;  /* resting nav item, secondary button text */
    --yl-slate:           #4B5563;  /* muted text */
    --yl-label:           #6B7280;  /* labels, table headers, section titles */
    --yl-line-strong:     #D5D9E0;  /* control border */
    --yl-line:            #E6E8EC;  /* card and page borders */
    --yl-line-soft:       #F0F1F4;  /* row dividers */
    --yl-surface-alt:     #F9FAFB;  /* table header row, search field */
    --yl-segment-bg:      #F3F4F6;  /* segmented-chip track, row hover */
    --yl-canvas:          #F6F7F9;
    --yl-surface:         #FFFFFF;
    --yl-avatar-bg:       #E0E7FF;
    --yl-sidebar-bg:      #FFFFFF;
    --yl-sidebar-active:  #EFF4FF;
    --yl-sidebar-text:    #374151;
    --yl-sidebar-label:   #6B7280;

    /* Solid fills (white text); hovers are the same hue, darker */
    --yl-success:         #15803D;
    --yl-warning:         #B45309;
    --yl-danger:          #B91C1C;
    --yl-info:            #2563EB;
    --yl-success-hover:   #166534;
    --yl-warning-hover:   #92400E;
    --yl-danger-hover:    #991B1B;
    --yl-info-hover:      #1D4ED8;

    /* Status pills: dark text on light tint */
    --yl-success-fg:      #15803D;  --yl-success-bg: #ECFDF3;
    --yl-warning-fg:      #B45309;  --yl-warning-bg: #FFF7E8;
    --yl-danger-fg:       #B91C1C;  --yl-danger-bg:  #FEF2F2;
    --yl-info-fg:         #1D4ED8;  --yl-info-bg:    #EFF4FF;
    --yl-neutral-fg:      #374151;  --yl-neutral-bg: #F1F3F6;

    /* Chart palette (series, then semantic); read by js/yl-chart-colors.js */
    --yl-chart-1:         #2563EB;
    --yl-chart-2:         #6366F1;
    --yl-chart-3:         #4B5563;
    --yl-chart-4:         #9CA3AF;
    --yl-chart-5:         #C7D2FE;
    --yl-chart-success:   #15803D;
    --yl-chart-warning:   #B45309;
    --yl-chart-danger:    #B91C1C;
    --yl-chart-neutral:   #9CA3AF;
    --yl-chart-info:      #2563EB;
    --yl-chart-text:      #6B7280;
    --yl-chart-grid:      #E6E8EC;

    /* Environment strip and pill: loud on purpose */
    --yl-env-prod:        #C0392B;
    --yl-env-stage:       #F59E0B;
    --yl-env-stage-text:  #78350F;

    --yl-font-sans:  'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --yl-font-mono:  ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --yl-radius:      8px;   /* controls */
    --yl-radius-card: 12px;
    --yl-radius-pill: 999px;
    --yl-focus-ring:  0 0 0 3px rgba(var(--yl-fill-rgb), 0.25);
    --yl-shadow-pop:  0 8px 24px rgba(var(--yl-ink-rgb), 0.08);  /* popovers, drawers, chat */

    --sidebar-expanded:   248px;
    --sidebar-collapsed:  64px;
}

[data-bs-theme="dark"] {
    --yl-navy:            #93B4F8;
    --yl-navy-dark:       #93B4F8;
    --yl-navy-active:     #24324F;
    --yl-navy-tint:       #1C2740;
    --yl-on-primary:      #FFFFFF;
    --yl-fill:            #2563EB;  /* white on it is 5.2:1 */
    --yl-fill-rgb:        37, 99, 235;
    --yl-fill-hover:      #1D4ED8;
    --yl-link:            #93B4F8;
    --yl-ink:             #E6E9EE;
    --yl-ink-rgb:         17, 24, 39;   /* shadows and backdrops stay dark */
    --yl-slate-700:       #C3CAD4;
    --yl-slate:           #A3ACB9;
    --yl-label:           #8E98A6;
    --yl-line-strong:     #3A4250;
    --yl-line:            #2A303A;
    --yl-line-soft:       #232933;
    --yl-surface-alt:     #1F252E;
    --yl-segment-bg:      #232933;
    --yl-canvas:          #12161C;
    --yl-surface:         #1A1F27;
    --yl-avatar-bg:       #24324F;
    --yl-sidebar-bg:      #1A1F27;
    --yl-sidebar-active:  #1C2740;
    --yl-sidebar-text:    #C3CAD4;
    --yl-sidebar-label:   #8E98A6;

    --yl-success:         #3E7D55;
    --yl-warning:         #9A6700;
    --yl-danger:          #C0392B;
    --yl-info:            #2563EB;
    --yl-success-hover:   #4A8F63;
    --yl-warning-hover:   #AD7505;
    --yl-danger-hover:    #D0473A;
    --yl-info-hover:      #1D4ED8;

    --yl-success-fg:      #86D3A3;  --yl-success-bg: #17301F;
    --yl-warning-fg:      #F0BD6A;  --yl-warning-bg: #352812;
    --yl-danger-fg:       #F4A3A3;  --yl-danger-bg:  #3A1C1C;
    --yl-info-fg:         #93B4F8;  --yl-info-bg:    #1C2740;
    --yl-neutral-fg:      #C3CAD4;  --yl-neutral-bg: #262C36;

    --yl-chart-1:         #6F9BF5;
    --yl-chart-2:         #9A9CF7;
    --yl-chart-3:         #A3ACB9;
    --yl-chart-4:         #6B7480;
    --yl-chart-5:         #4C5F8F;
    --yl-chart-success:   #5FA87A;
    --yl-chart-warning:   #D49A3A;
    --yl-chart-danger:    #E0675B;
    --yl-chart-neutral:   #6B7480;
    --yl-chart-info:      #93B4F8;
    --yl-chart-text:      #A3ACB9;
    --yl-chart-grid:      #2A303A;
    --yl-focus-ring:      0 0 0 3px rgba(147, 180, 248, 0.35);
    --yl-shadow-pop:      0 8px 24px rgba(0, 0, 0, 0.5);
}

/* Legacy names, repointed so existing references follow the palette. Declared on
   the dark selector too so a nested dark scope re-resolves them. */
:root, [data-bs-theme="dark"] {
    --pcc-gray-light:     var(--yl-line-soft);
    --pcc-gray:           var(--yl-line);
    --pcc-gray-dark:      var(--yl-slate-700);
    --pcc-bg:             var(--yl-canvas);
    --pcc-white:          var(--yl-surface);
    --pcc-text:           var(--yl-ink);
    --pcc-link:           var(--yl-link);
    --pcc-warning:        var(--yl-warning);
    --pcc-warning-dark:   var(--yl-warning-hover);

    --gradient-success:   var(--yl-success);
    --gradient-danger:    var(--yl-danger);
    --gradient-info:      var(--yl-info);
    --gradient-warning:   var(--yl-warning);
    --gradient-secondary: var(--yl-slate-700);
    --gradient-muted:     var(--yl-slate);
}

/* ── Base (body 14px) ─────────────────────────────────────── */
body {
    background-color: var(--pcc-bg);
    color: var(--pcc-text);
    font-family: var(--yl-font-sans);
    font-size: 0.875rem;
}

a { color: var(--pcc-link); }
a:hover { color: var(--yl-navy); }

/* ── App Layout: white sidebar, top bar, content on the page colour ── */
.app-layout {
    display: flex;
    min-height: 100vh;
    align-items: flex-start;
}

.main-content-wrapper {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.main-content {
    flex: 1;
    min-width: 0;
    position: relative;
    z-index: 1;
}
.main-content.px-4 { padding: 28px 32px 40px !important; }
@media (max-width: 767.98px) { .main-content.px-4 { padding: 20px 16px 32px !important; } }

.pcc-app-footer {
    flex-shrink: 0;
    opacity: 0.6;
}

/* ── Top bar: search left, bell + user right ── */
.yl-topbar {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
    padding: 14px 32px;
    background: var(--yl-surface); border-bottom: 1px solid var(--yl-line);
}
.yl-topbar__search {
    display: flex; align-items: center; gap: 8px; flex: 0 1 360px; min-width: 0;
    height: 40px; margin: 0; padding: 0 12px;
    border: 1px solid var(--yl-line); border-radius: var(--yl-radius);
    background: var(--yl-surface-alt); color: var(--yl-label);
}
.yl-topbar__search:focus-within { border-color: var(--yl-link); box-shadow: var(--yl-focus-ring); }
.yl-topbar__search input {
    flex: 1; min-width: 0; border: 0; outline: none; background: transparent;
    font-size: 14px; color: var(--yl-ink);
}
.yl-topbar__search input::placeholder { color: var(--yl-label); }
.yl-topbar__end { display: flex; align-items: center; gap: 12px; margin-left: auto; padding-right: 48px; } /* clears the fixed env pill */
.yl-icon-btn {
    position: relative; display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; padding: 0; flex-shrink: 0;
    border: 1px solid var(--yl-line); border-radius: var(--yl-radius);
    background: var(--yl-surface); color: var(--yl-slate); cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.yl-icon-btn:hover { background: var(--yl-surface-alt); color: var(--yl-ink); }
.yl-icon-btn:focus-visible { outline: 0; box-shadow: var(--yl-focus-ring); }
.yl-topbar__user {
    display: flex; align-items: center; gap: 10px; min-width: 0;
    padding: 2px 6px; margin: -2px -6px; border-radius: var(--yl-radius);
    color: var(--yl-ink); text-decoration: none;
}
a.yl-topbar__user:hover { background: var(--yl-surface-alt); color: var(--yl-ink); }
.yl-topbar__who { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.yl-topbar__name, .yl-topbar__role { max-width: 220px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.yl-topbar__name { font-size: 13px; font-weight: 600; }
.yl-topbar__role { font-size: 12px; color: var(--yl-slate); }
.yl-avatar {
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 36px; height: 36px; border-radius: 50%;
    background: var(--yl-avatar-bg); color: var(--yl-navy);
    font-size: 13px; font-weight: 700;
}
@media (max-width: 767.98px) {
    .yl-topbar { padding: 12px 16px; }
    .yl-topbar__search { flex: 1 1 100%; order: 2; }
    .yl-topbar__who { display: none; }
}

/* ── Sidebar ──────────────────────────────────────────────── */
.sidebar {
    width: var(--sidebar-expanded);
    height: 100vh;
    position: sticky;
    top: 0;
    flex-shrink: 0;
    overflow: hidden;
    transition: width 0.3s ease;
    background: var(--yl-sidebar-bg);
    border-right: 1px solid var(--yl-line);
    padding: 20px 16px 12px;
    z-index: 1;
}
.prod-warning-spacer ~ .app-layout .sidebar,
.preview-role-spacer ~ .app-layout .sidebar { height: calc(100vh - 25px); top: 25px; }

/* ── Per-customer brand mark in the sidebar header (ABI-97) ──────────────── */
/* Small identity chip in its own row under the header: tells the user which
   customer they're logged in as (MacWounds / Curitec / super-admin). */
.sidebar-brand-mini {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    object-fit: contain;
    background: #fff;            /* logos are light-background jpg/png */
    border-radius: var(--yl-radius);
    padding: 2px;
}

/* Superadmin role preview (ABI-483): sidebar row, plus a full-width banner that is indigo on
   purpose, distinct from the red/amber PROD/STAGE safety banners. */
.preview-role-row {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0 0 4px;
    padding: 8px 12px;
    border-radius: var(--yl-radius);
    border: 1px solid var(--yl-line);
    background: var(--yl-surface-alt);
    transition: background-color .15s ease, border-color .15s ease;
}
.preview-role-row:focus-within,
.preview-role-row:hover {
    border-color: var(--yl-line-strong);
    background: var(--yl-segment-bg);
}
.preview-role-row-icon,
.preview-role-chevron { color: var(--yl-label); flex-shrink: 0; }
.preview-role-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    background: #4338ca;
    color: var(--yl-on-primary);
    text-align: center;
    font-weight: 700;
    font-size: .8rem;
    padding: 4px 0;
    letter-spacing: .03em;
}
.preview-role-exit {
    background: color-mix(in srgb, var(--yl-on-primary) 18%, transparent);
    border: 1px solid color-mix(in srgb, var(--yl-on-primary) 50%, transparent);
    color: var(--yl-on-primary);
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    border-radius: 999px;
    padding: 1px 10px;
    margin-left: .6rem;
    cursor: pointer;
}
.preview-role-exit:hover { background: color-mix(in srgb, var(--yl-on-primary) 30%, transparent); }
.preview-role-spacer { height: 25px; }

.sidebar.collapsed {
    width: var(--sidebar-collapsed);
    padding-left: 8px;
    padding-right: 8px;
}

/* Flash prevention: collapsed width applied before JS */
[data-sidebar-collapsed="true"] .sidebar {
    width: var(--sidebar-collapsed);
}

.sidebar .sidebar-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 8px 16px;
    color: var(--yl-ink);
    white-space: nowrap;
    overflow: hidden;
}

.sidebar.collapsed .sidebar-header {
    justify-content: center;
    padding: 4px 0 16px;
}

/* Brand: blue rounded tile + name, app name underneath in muted text */
.yl-mark { display: block; width: 32px; height: 32px; flex-shrink: 0; }
.yl-brand { display: flex; flex-direction: column; line-height: 1.3; font-size: 15px; font-weight: 700; color: var(--yl-ink); }
.yl-brand-divider { display: none; }
.yl-brand-app { font-size: 12px; font-weight: 400; color: var(--yl-slate); }

.sidebar-customer {
    padding: 0 8px 12px;
}

.sidebar-toggle-wrap {
    padding: 0 0 4px;
}

.sidebar-nav {
    flex: 1 1 0;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    /* Auto-hide scrollbar: transparent until actually scrolling (the base
       templates toggle .is-scrolling from a capture-phase scroll listener) */
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
}
.sidebar-nav .nav { gap: 2px; }
.sidebar-nav.is-scrolling { scrollbar-color: var(--yl-line-strong) transparent; }
.sidebar-nav::-webkit-scrollbar { width: 4px; }
.sidebar-nav::-webkit-scrollbar-track { background: transparent; }
.sidebar-nav::-webkit-scrollbar-thumb { background: transparent; border-radius: 2px; }
.sidebar-nav.is-scrolling::-webkit-scrollbar-thumb { background: var(--yl-line-strong); }

.sidebar.collapsed #sidebarToggleIcon {
    transform: scaleX(-1);
}

.sidebar .nav-section-title {
    color: var(--yl-sidebar-label);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 16px 12px 4px;
    white-space: nowrap;
    overflow: hidden;
}

button.sidebar-link { outline: none; font-family: inherit; }

.sidebar-chevron { width: 14px; height: 14px; opacity: 0.6; transition: transform 0.15s ease; }
.sidebar-link[aria-expanded="true"] .sidebar-chevron { transform: rotate(90deg); }
.sidebar-submenu { margin-top: 2px; }
.sidebar-submenu .sidebar-link { padding-left: 24px; font-weight: 400; }
.sidebar-link:focus-visible { box-shadow: var(--yl-focus-ring); }

.sidebar-link {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 40px;
    padding: 10px 12px;
    margin: 0;
    border: 0;
    border-radius: var(--yl-radius);
    color: var(--yl-sidebar-text);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: background 0.15s ease, color 0.15s ease;
    background: transparent;
    cursor: pointer;
    width: 100%;
    white-space: nowrap;
    box-sizing: border-box;
    box-shadow: none;
}
.sidebar-link .sidebar-text.ms-2 { margin-left: 0 !important; }

.sidebar-link:hover {
    color: var(--yl-ink);
    background: var(--yl-segment-bg);
}

.sidebar-link.active,
.sidebar-link[aria-current="page"] {
    color: var(--yl-navy);
    font-weight: 600;
    background: var(--yl-sidebar-active);
}

.sidebar-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.sidebar.collapsed .sidebar-text     { display: none; }
.sidebar.collapsed .nav-section-title { display: none; }
.sidebar.collapsed .user-info-full    { display: none; }

.sidebar.collapsed .sidebar-link {
    justify-content: center;
    padding: 10px 0;
    margin: 0;
    width: 100%;
    position: relative;
}

/* CSS tooltip on collapsed links */
.sidebar.collapsed .sidebar-link[data-label]::after {
    content: attr(data-label);
    position: absolute;
    left: calc(100% + 12px);
    top: 50%;
    transform: translateY(-50%);
    background: var(--yl-ink);
    color: var(--yl-surface);
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.75rem;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease;
    z-index: 1050;
}

.sidebar.collapsed .sidebar-link[data-label]:hover::after {
    opacity: 1;
}

.sidebar .user-info {
    padding: 12px 0 0;
    border-top: 1px solid var(--yl-line);
}

.sidebar .user-info-full {
    padding: 0 0 8px;
    white-space: nowrap;
    overflow: hidden;
}

/* Switch-app icon link (no btn chrome → no oval ring) */
.sidebar-switch-app {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: var(--yl-radius);
    color: var(--yl-slate);
    text-decoration: none;
    background: transparent;
    border: 0;
}
.sidebar-switch-app:hover,
.sidebar-switch-app:focus {
    color: var(--yl-ink);
    background: var(--yl-segment-bg);
    text-decoration: none;
}
.sidebar.collapsed .user-action-row > .sidebar-switch-app { display: none; }

/* ── Sign out, switch app and theme toggle on one row ─────── */
.user-action-row {
    display: flex;
    align-items: center;
    gap: 4px;
}
.user-action-row > .sidebar-link {
    flex: 1 1 auto;
    width: auto !important;
}
.user-action-row > .theme-toggle {
    flex: 0 0 auto;
    width: auto !important;
    margin: 0 0 0 auto;
    padding: 7px 4px;
}
.sidebar.collapsed .user-action-row > .theme-toggle {
    display: none;
}

/* ── iOS-style theme toggle switch ──────────────────────── */
.theme-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    user-select: none;
}
.theme-toggle:hover .theme-toggle-track { border-color: var(--yl-line-strong); }
.theme-toggle-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}
.theme-toggle-track {
    position: relative;
    width: 46px;
    height: 26px;
    background: var(--yl-segment-bg);
    border-radius: 13px;
    border: 1px solid var(--yl-line);
    transition: background 0.3s ease;
    flex-shrink: 0;
}
.theme-toggle-input:checked + .theme-toggle-track {
    background: var(--yl-navy-tint);
}
.theme-toggle-thumb {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    background: var(--yl-surface);
    border-radius: 50%;
    box-shadow: 0 1px 2px rgba(var(--yl-ink-rgb), 0.2);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6rem;
}
.theme-toggle-thumb i { display: block; line-height: 1; }
.theme-toggle-thumb .bi-sun-fill  { color: var(--yl-warning); }
.theme-toggle-thumb .bi-moon-fill { color: var(--yl-navy); }
.theme-toggle-input:checked + .theme-toggle-track .theme-toggle-thumb {
    transform: translateX(20px);
}

/* Error log colours */
.text-error-orange { color: #B8600C !important; }
.bg-error-orange { background-color: #B8600C !important; }

/* Decorative background blobs retired: flat canvas, no colored page background */
.bg-canvas { display: none; }

/* ── Sidebar Reveal Animation (post-login) ────────────────── */
[data-sidebar-revealing] .sidebar-header,
[data-sidebar-revealing] .sidebar-text,
[data-sidebar-revealing] .nav-section-title,
[data-sidebar-revealing] .user-info-full {
    opacity: 0;
}

.sidebar-reveal .sidebar-header,
.sidebar-reveal .sidebar-text,
.sidebar-reveal .nav-section-title,
.sidebar-reveal .user-info-full {
    opacity: 0;
    animation: sidebarFadeIn 0.5s ease forwards;
}
.sidebar-reveal .sidebar-header    { animation-delay: 0.05s; }
.sidebar-reveal .sidebar-text      { animation-delay: 0.15s; }
.sidebar-reveal .nav-section-title { animation-delay: 0.10s; }
.sidebar-reveal .user-info-full    { animation-delay: 0.20s; }

@keyframes sidebarFadeIn {
    from { opacity: 0; transform: translateX(-6px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* ── Skip Link ────────────────────────────────────────────── */
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--yl-fill);
    color: #fff;
    padding: 8px 16px;
    z-index: 9999;
    text-decoration: none;
    border-radius: 0 0 4px 0;
    font-size: 0.875rem;
}
.skip-link:focus { top: 0; }

/* ── Page header: eyebrow, title, actions right ── */
.page-header {
    display: block;
    min-height: 0;
    margin: 0 0 24px !important;
    padding: 0;
}
.page-header > .row { align-items: flex-end !important; row-gap: 12px; }
.page-header .btn-list, .page-header .col-auto.ms-auto { display: flex; flex-wrap: wrap; gap: 10px; }
.page-pretitle, .yl-eyebrow {
    margin-bottom: 4px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--yl-link);
}

/* ── Cards ── */
.card {
    background-color: var(--yl-surface);
    border: 1px solid var(--yl-line);
    border-radius: var(--yl-radius-card);
    box-shadow: none;
}

.card-header {
    background-color: transparent;
    color: var(--yl-ink);
    border-bottom: 1px solid var(--yl-line-soft);
    padding: 18px 20px;
    font-size: 18px;
    font-weight: 600;
    border-radius: var(--yl-radius-card) var(--yl-radius-card) 0 0;
}
.card-header small, .card-header .small, .card-header .text-muted { font-size: 13px; font-weight: 400; }
.card-header h5, .card-header h6 { margin-bottom: 0; font-size: 18px; }
.card-header.bg-primary { background-color: var(--yl-fill) !important; }
.card-header.bg-warning { background-color: var(--yl-warning) !important; color: var(--yl-on-primary) !important; border-bottom: none !important; }
.card-header.bg-danger { background-color: var(--yl-danger) !important; }
.card-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--yl-ink);
}
.card-body { padding: 20px; }
.card-footer {
    background: transparent; border-top: 1px solid var(--yl-line-soft);
    border-radius: 0 0 var(--yl-radius-card) var(--yl-radius-card);
}

/* ── Section Cards (collapsible panels) ──────────────────── */
.section-card { border: 1px solid var(--yl-line); border-radius: var(--yl-radius-card); background: var(--yl-surface); margin-bottom: 16px; }
.section-card-header {
    padding: 16px 20px; border-bottom: 1px solid var(--yl-line-soft);
    font-weight: 600; font-size: 16px;
    display: flex; align-items: center; gap: 6px; color: var(--yl-ink);
}
/* Collapsed card: with no body showing, the header divider reads as a stray empty bar */
.section-card-header:has(+ .collapse:not(.show):not(.collapsing)) { border-bottom: 0; }
.section-card-body { padding: 16px 20px; }

/* ── Flag Badges ─────────────────────────────────────────── */
.flag-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.flag-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 0.8125rem; padding: 4px 10px; border-radius: var(--yl-radius-pill); font-weight: 600; }

/* ── Tables: grey header row, thin row dividers ── */
.table { font-size: 0.875rem; font-variant-numeric: tabular-nums; }
.table thead { background-color: var(--yl-surface-alt); }
.table-light { background-color: var(--yl-surface-alt) !important; }
.table thead th {
    background-color: var(--yl-surface-alt);
    border-bottom: 1px solid var(--yl-line-soft);
    font-weight: 600;
    font-size: 12px;
    text-transform: none;
    letter-spacing: 0;
    color: var(--yl-label);
    padding: 12px 16px;
    line-height: 1rem;
}
.table tbody td {
    padding: 14px 16px;
    vertical-align: middle;
    border-bottom: 1px solid var(--yl-line-soft);
}
.table-sm thead th { padding: 8px 12px; }
.table-sm tbody td { padding: 8px 12px; }
.table-hover tbody tr:hover { background-color: var(--yl-surface-alt); }
.table tbody tr.is-selected, .table tbody tr.selected, .table tbody tr.table-active { background-color: var(--yl-navy-tint); }
/* Row actions stay secondary and compact: the page header holds the one primary */
.table .btn:not(.btn-link) { min-height: 32px; padding: 0.25rem 0.75rem; font-size: 0.8125rem; }
.table .btn-primary { background-color: var(--yl-navy-tint); border-color: transparent; color: var(--yl-navy); }
.table .btn-primary:hover { background-color: var(--yl-navy-active); border-color: transparent; color: var(--yl-navy); }

/* ── Buttons: primary blue, secondary white with a grey border, soft blue ── */
.btn {
    min-height: 40px;
    border-radius: var(--yl-radius);
    font-family: var(--yl-font-sans);
    font-size: 0.875rem;
    font-weight: 600;
    padding: 0.5625rem 1rem;
    box-shadow: none;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.btn .bi { margin-right: 0.3em; font-size: 16px; }
.btn-sm, .btn-group-sm > .btn {
    min-height: 32px;
    padding: 0.3125rem 0.75rem;
    font-size: 0.8125rem;
    border-radius: var(--yl-radius);
}
.btn-primary { background-color: var(--yl-fill); border-color: var(--yl-fill); color: #fff; }
.btn-primary:hover, .btn-primary:focus { background-color: var(--yl-fill-hover); border-color: var(--yl-fill-hover); color: #fff; }
.btn-primary:disabled, .btn-primary.disabled { background-color: var(--yl-fill); border-color: var(--yl-fill); color: #fff; opacity: 0.65; }
.btn-secondary, .btn-outline-secondary, .btn-light, .btn-white, .btn-outline-dark {
    background-color: var(--yl-surface); border-color: var(--yl-line-strong); color: var(--yl-ink);
}
.btn-secondary:hover, .btn-outline-secondary:hover, .btn-light:hover, .btn-white:hover, .btn-outline-dark:hover,
.btn-outline-secondary.active {
    background-color: var(--yl-surface-alt); border-color: var(--yl-line-strong); color: var(--yl-ink);
}
.btn-outline-primary { background-color: var(--yl-navy-tint); border-color: transparent; color: var(--yl-navy); }
.btn-outline-primary:hover, .btn-outline-primary.active { background-color: var(--yl-navy-active); border-color: transparent; color: var(--yl-navy); }
.btn-check:checked + .btn-outline-primary, .btn-check:checked + .btn-outline-secondary {
    background-color: var(--yl-fill); border-color: var(--yl-fill); color: #fff;
}
.btn-link { color: var(--yl-link); border-color: transparent; background: transparent; padding-left: 0.75rem; padding-right: 0.75rem; }
.btn-success { background-color: var(--yl-success); border-color: var(--yl-success); color: #fff; }
.btn-success:hover { background-color: var(--yl-success-hover); border-color: var(--yl-success-hover); color: #fff; }
.btn-warning { background-color: var(--yl-warning); border-color: var(--yl-warning); color: #fff; }
.btn-warning:hover { background-color: var(--yl-warning-hover); border-color: var(--yl-warning-hover); color: #fff; }
.btn-danger  { background-color: var(--yl-danger); border-color: var(--yl-danger); color: #fff; }
.btn-danger:hover  { background-color: var(--yl-danger-hover); border-color: var(--yl-danger-hover); color: #fff; }
.btn-info    { background-color: var(--yl-info); border-color: var(--yl-info); color: #fff; }
.btn-info:hover    { background-color: var(--yl-info-hover); border-color: var(--yl-info-hover); color: #fff; }
.btn-outline-danger { color: var(--yl-danger-fg); border-color: var(--yl-line-strong); background-color: var(--yl-surface); }
.btn-outline-danger:hover { color: var(--yl-danger-fg); border-color: var(--yl-danger-fg); background-color: var(--yl-danger-bg); }
.btn-outline-success { color: var(--yl-success-fg); border-color: var(--yl-line-strong); background-color: var(--yl-surface); }
.btn-outline-success:hover { color: var(--yl-success-fg); border-color: var(--yl-success-fg); background-color: var(--yl-success-bg); }
.btn-outline-warning { color: var(--yl-warning-fg); border-color: var(--yl-line-strong); background-color: var(--yl-surface); }
.btn-outline-warning:hover { color: var(--yl-warning-fg); border-color: var(--yl-warning-fg); background-color: var(--yl-warning-bg); }
.btn-outline-info        { color: var(--yl-info-fg); border-color: var(--yl-line-strong); background-color: var(--yl-surface); }
.btn-outline-info:hover  { color: var(--yl-info-fg); border-color: var(--yl-info-fg); background-color: var(--yl-info-bg); }
.btn:focus-visible { box-shadow: var(--yl-focus-ring); outline: 0; }

/* Button groups: small gap, each button keeps its own rounded corners */
.btn-group { gap: 4px; }
.btn-group .btn, .btn-group form .btn { border-radius: var(--yl-radius) !important; }
.btn-group form { display: inline-block; margin: 0; }

/* ── Badges / status pills: fully rounded tints ── */
.badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    padding: 4px 10px;
    font-family: var(--yl-font-sans);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0;
    text-transform: none;
    border-radius: var(--yl-radius-pill);
    white-space: nowrap;
    vertical-align: baseline;
    background-color: var(--yl-neutral-bg);
    color: var(--yl-neutral-fg) !important;
}
.badge-w-status   { min-width: 5.8rem; display: inline-block; text-align: center; }
.badge-w-mode     { min-width: 6.2rem; display: inline-block; text-align: center; }
.badge-w-role     { min-width: 6.5rem; }
.badge-w-active   { min-width: 5rem; }
.badge-w-count    { min-width: 3rem; }
.badge-w-event    { min-width: 9rem; }
.badge-w-facility { min-width: 5.8rem; display: inline-block; text-align: center; }

/* Site name badges (Sites list page) */
.badge-fac-name {
    font-weight: normal;
    color: var(--yl-ink) !important;
    background-color: var(--yl-neutral-bg);
    border: 1px solid var(--yl-line);
}
.badge-fac-name--onboarded {
    color: var(--yl-success-fg) !important;
    background-color: var(--yl-success-bg);
    border-color: transparent;
}

/* Fallback: badges in tables get minimum width for column alignment */
.table .badge:not([class*="badge-w-"]) { min-width: 4rem; display: inline-block; text-align: center; }

/* Status pill: same tint badge, a little taller */
.badge-status {
    height: 1.5rem;
    padding: 0.25rem 0.625rem;
    font-size: 12px;
    border-radius: var(--yl-radius-pill);
    line-height: 1.2;
}

/* Status dot — 8px colored circle */
.status-dot {
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 100rem;
}
.status-dot-success { background: var(--yl-success); }
.status-dot-danger  { background: var(--yl-danger); }
.status-dot-warning { background: var(--yl-warning); }
.status-dot-info    { background: var(--yl-info); }
.status-dot-muted   { background: var(--yl-slate); }
.status-dot-animated { animation: status-blink 1s ease-in-out infinite; }
@keyframes status-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.2; }
}

/* Action buttons matching badge height in tables */
.btn-h-badge {
    padding: 0.6em 0.75em;
    font-size: 0.92em;
    line-height: 1.1;
    min-width: 6.5rem;
    text-align: center;
    border-radius: var(--yl-radius);
}
.table .btn-h-badge { min-width: 0; }
/* Solid fills (progress bars, dots, headers, non-badge elements) */
.bg-success   { background-color: var(--yl-success) !important; }
.bg-danger    { background-color: var(--yl-danger) !important; }
.bg-warning   { background-color: var(--yl-warning) !important; }
.bg-info      { background-color: var(--yl-info) !important; }
.bg-primary   { background-color: var(--yl-fill) !important; }
.bg-secondary { background-color: var(--yl-slate-700) !important; }
.bg-important { background-color: var(--yl-warning); }
/* Badges map Bootstrap/Tabler color classes to the tint pairs. The (0,2,0)
   !important beats a leftover .text-white on the same badge. */
.badge.bg-success, .badge.bg-green, .badge.bg-success-lt, .badge.bg-success-subtle, .badge.bg-green-lt
    { background-color: var(--yl-success-bg) !important; color: var(--yl-success-fg) !important; }
.badge.bg-warning, .badge.bg-yellow, .badge.bg-orange, .badge.bg-important, .badge.bg-warning-lt, .badge.bg-warning-subtle, .badge.bg-yellow-lt, .badge.bg-orange-lt
    { background-color: var(--yl-warning-bg) !important; color: var(--yl-warning-fg) !important; }
.badge.bg-danger, .badge.bg-red, .badge.bg-danger-lt, .badge.bg-danger-subtle, .badge.bg-red-lt
    { background-color: var(--yl-danger-bg) !important; color: var(--yl-danger-fg) !important; }
.badge.bg-info, .badge.bg-blue, .badge.bg-azure, .badge.bg-cyan, .badge.bg-info-lt, .badge.bg-info-subtle, .badge.bg-blue-lt, .badge.bg-azure-lt, .badge.bg-cyan-lt
    { background-color: var(--yl-info-bg) !important; color: var(--yl-info-fg) !important; }
.badge.bg-primary, .badge.bg-primary-lt, .badge.bg-primary-subtle, .badge.bg-indigo, .badge.bg-purple, .badge.bg-indigo-lt, .badge.bg-purple-lt
    { background-color: var(--yl-navy-tint) !important; color: var(--yl-navy) !important; }
.badge.bg-secondary, .badge.bg-light, .badge.bg-muted, .badge.bg-gray, .badge.bg-secondary-lt, .badge.bg-secondary-subtle, .badge.bg-light-subtle, .badge.bg-gray-lt
    { background-color: var(--yl-neutral-bg) !important; color: var(--yl-neutral-fg) !important; }
.badge.bg-dark { background-color: var(--yl-ink) !important; color: var(--yl-surface) !important; }
/* Non-badge subtle surfaces use the same tint pairs */
.bg-success-subtle   { background-color: var(--yl-success-bg) !important; color: var(--yl-success-fg) !important; }
.bg-danger-subtle    { background-color: var(--yl-danger-bg) !important; color: var(--yl-danger-fg) !important; }
.bg-info-subtle      { background-color: var(--yl-info-bg) !important; color: var(--yl-info-fg) !important; }
.bg-secondary-subtle { background-color: var(--yl-neutral-bg) !important; color: var(--yl-neutral-fg) !important; }
.bg-warning-subtle   { background-color: var(--yl-warning-bg) !important; color: var(--yl-warning-fg) !important; }

/* ── Alerts ── */
.alert { border-radius: var(--yl-radius-card); border: 1px solid var(--yl-line); box-shadow: none; }
.alert-success { background-color: var(--yl-success-bg); color: var(--yl-success-fg); }
.alert-danger  { background-color: var(--yl-danger-bg);  color: var(--yl-danger-fg); }
.alert-warning { background-color: var(--yl-warning-bg); color: var(--yl-warning-fg); }
.alert-info    { background-color: var(--yl-info-bg);    color: var(--yl-info-fg); }
.alert-primary { background-color: var(--yl-navy-tint);  color: var(--yl-navy); }
.alert-secondary, .alert-light { background-color: var(--yl-neutral-bg); color: var(--yl-neutral-fg); }
.alert[class*="alert-"] { border-color: transparent; }
.alert-icon { font-size: 1.25rem; margin-right: 0.75rem; line-height: 1; }

/* ── Forms ── */
.form-control, .form-select {
    min-height: 40px;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    border-radius: var(--yl-radius);
    border-color: var(--yl-line-strong);
    background-color: var(--yl-surface);
    color: var(--yl-ink);
    font-size: 0.875rem;
    box-shadow: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.form-control-sm, .form-select-sm { min-height: 32px; padding-top: 0.25rem; padding-bottom: 0.25rem; }
textarea.form-control { min-height: auto; }
.input-group-text { border-color: var(--yl-line-strong); border-radius: var(--yl-radius); background: var(--yl-surface-alt); }
.form-control::placeholder { color: var(--yl-label); }
.form-control:focus, .form-select:focus, .form-check-input:focus { border-color: var(--yl-link); box-shadow: var(--yl-focus-ring); }
[data-bs-theme="dark"] .form-select            { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%238E98A6' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); }
.form-check-input { border-color: var(--yl-line-strong); }
.form-check-input:not([type="radio"]) { border-radius: 4px; }
.form-check-input:checked { background-color: var(--yl-fill); border-color: var(--yl-fill); }
.form-label { font-size: 12px; font-weight: 500; color: var(--yl-slate); margin-bottom: 6px; }

/* ── List toolbar, filter chips, pagination (shared_templates/shared/list_controls.html) ── */
.yl-toolbar {
    display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px;
    padding: 16px 20px; border-bottom: 1px solid var(--yl-line-soft); background: var(--yl-surface);
    border-radius: var(--yl-radius-card) var(--yl-radius-card) 0 0;
}
.yl-toolbar__form { display: contents; }
.yl-toolbar.is-standalone { border: 1px solid var(--yl-line); border-radius: var(--yl-radius-card); margin-bottom: 16px; }
.yl-field { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.yl-field__label { font-size: 12px; font-weight: 500; color: var(--yl-slate); white-space: nowrap; }
.yl-toolbar__search { position: relative; flex: 1 1 280px; min-width: 200px; max-width: 420px; }
.yl-toolbar__search .yl-field__control { position: relative; }
.yl-toolbar__search .yl-field__control > .bi {
    position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
    color: var(--yl-label); font-size: 14px; pointer-events: none;
}
.yl-toolbar__search .form-control { height: 40px; min-height: 40px; padding-left: 34px; background-color: var(--yl-surface-alt); border-color: var(--yl-line); }
.yl-filter { flex: 0 1 200px; min-width: 150px; max-width: 240px; }
.yl-filter .form-select, .yl-filter .form-control, .yl-filter .pcc-select__trigger {
    height: 40px; min-height: 40px; border-radius: var(--yl-radius);
}
.yl-toolbar__search.is-active .form-control,
.yl-filter.is-active .form-select, .yl-filter.is-active .form-control,
.yl-filter.is-active .pcc-select__trigger {
    background-color: var(--yl-navy-tint); border-color: var(--yl-link); color: var(--yl-navy);
}
.yl-toolbar__clear {
    display: inline-flex; align-items: center;
    background: none; border: 0; padding: 0 4px; height: 40px; font-size: 14px; font-weight: 600;
    color: var(--yl-link); text-decoration: none; cursor: pointer;
}
.yl-toolbar__clear:hover { text-decoration: underline; }
.yl-toolbar__end { margin-left: auto; display: flex; align-items: center; gap: 12px; min-height: 40px; }
.yl-toolbar__count { font-size: 13px; color: var(--yl-slate); white-space: nowrap; }

/* Filter chips: a segmented control, the selected segment lifted to white */
.yl-chips {
    display: inline-flex; flex-wrap: wrap; gap: 6px; padding: 4px;
    background: var(--yl-segment-bg); border-radius: var(--yl-radius);
}
.yl-toolbar__chips { flex: 1 1 100%; }
.yl-chip, .filter-chip {
    display: inline-flex; align-items: center; gap: 8px;
    height: 32px; padding: 0 12px; border-radius: 6px;
    border: 0; background: transparent; color: var(--yl-slate);
    font-size: 13px; font-weight: 500; text-decoration: none; cursor: pointer; white-space: nowrap;
}
.yl-chip:hover, .filter-chip:hover { color: var(--yl-ink); }
.yl-chip.is-active, .yl-chip[aria-pressed="true"], .yl-chip[aria-current="true"],
.filter-chip.active, .filter-chip.is-active {
    background: var(--yl-surface); color: var(--yl-ink); font-weight: 600;
}
.yl-chip__count {
    padding: 1px 7px; border-radius: var(--yl-radius-pill);
    background: var(--yl-line); color: var(--yl-slate-700);
    font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums;
}
.yl-chip.is-active .yl-chip__count { background: var(--yl-navy-tint); color: var(--yl-navy); }

.yl-pagination {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
    padding: 14px 20px; border-top: 1px solid var(--yl-line-soft); font-size: 13px; color: var(--yl-slate);
}
.yl-pagination__controls, .yl-pagination__pages, .yl-pagination__size { display: flex; align-items: center; gap: 6px; }
.yl-pagination__size { gap: 8px; margin: 0 12px 0 0; }
.yl-pagination__size label { margin: 0; white-space: nowrap; }
.yl-pagination__size .form-select, .yl-pagination__size .pcc-select-wrap { width: 76px; }
.yl-page-btn {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 34px; height: 34px; padding: 0 8px; border-radius: var(--yl-radius);
    border: 1px solid var(--yl-line); background: var(--yl-surface);
    color: var(--yl-slate-700); font-size: 13px; font-weight: 500; text-decoration: none;
    font-variant-numeric: tabular-nums;
}
a.yl-page-btn:hover { background: var(--yl-surface-alt); color: var(--yl-ink); }
.yl-page-btn.is-current { background: var(--yl-fill); border-color: var(--yl-fill); color: var(--yl-on-primary); font-weight: 600; }
.yl-page-btn[aria-disabled="true"] { color: var(--yl-label); opacity: .5; cursor: default; }
.yl-page-gap { min-width: 24px; text-align: center; color: var(--yl-label); }
@media (max-width: 575.98px) {
    .yl-toolbar { padding: 12px 16px; }
    .yl-toolbar__search, .yl-filter { flex: 1 1 100%; max-width: none; }
    .yl-toolbar__end { margin-left: 0; }
}

/* ── KPI cards: label + tinted icon square, figure, footnote ── */
.yl-kpis {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-bottom: 24px;
}
.yl-kpi {
    background: var(--yl-surface); border: 1px solid var(--yl-line); border-radius: var(--yl-radius-card);
    padding: 20px; display: flex; flex-direction: column; gap: 10px; min-width: 0;
}
.yl-kpi__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.yl-kpi__label { font-size: 14px; font-weight: 500; color: var(--yl-slate); }
.yl-kpi__icon {
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 36px; height: 36px; border-radius: 10px;
    background: var(--yl-navy-tint); color: var(--yl-navy);
}
.yl-kpi__icon--success { background: var(--yl-success-bg); color: var(--yl-success-fg); }
.yl-kpi__icon--warning { background: var(--yl-warning-bg); color: var(--yl-warning-fg); }
.yl-kpi__icon--danger  { background: var(--yl-danger-bg);  color: var(--yl-danger-fg); }
.yl-kpi__value, .yl-figure {
    font-size: 30px; font-weight: 700; line-height: 1.1;
    color: var(--yl-ink); font-variant-numeric: lining-nums tabular-nums;
}
.yl-kpi__sub { font-size: 13px; color: var(--yl-slate); }

/* ── Text Utilities ───────────────────────────────────────── */
.text-primary { color: var(--yl-link) !important; }
.text-success { color: var(--yl-success-fg) !important; }
.text-danger  { color: var(--yl-danger-fg) !important; }
.text-warning { color: var(--yl-warning-fg) !important; }
.text-info    { color: var(--yl-info-fg) !important; }
.text-muted, .text-secondary { color: var(--yl-slate) !important; }
/* Tabler named colors follow the status tints (text) and tint pairs (-lt surfaces) */
.text-green, .text-lime, .text-teal { color: var(--yl-success-fg) !important; }
.text-red, .text-pink                { color: var(--yl-danger-fg) !important; }
.text-orange, .text-yellow           { color: var(--yl-warning-fg) !important; }
.text-blue, .text-azure, .text-cyan  { color: var(--yl-info-fg) !important; }
.text-purple, .text-indigo           { color: var(--yl-navy) !important; }
.bg-green-lt, .bg-lime-lt, .bg-teal-lt, .bg-success-lt { background-color: var(--yl-success-bg) !important; color: var(--yl-success-fg) !important; }
.bg-red-lt, .bg-pink-lt, .bg-danger-lt                 { background-color: var(--yl-danger-bg) !important; color: var(--yl-danger-fg) !important; }
.bg-orange-lt, .bg-yellow-lt, .bg-warning-lt           { background-color: var(--yl-warning-bg) !important; color: var(--yl-warning-fg) !important; }
.bg-blue-lt, .bg-azure-lt, .bg-cyan-lt, .bg-info-lt    { background-color: var(--yl-info-bg) !important; color: var(--yl-info-fg) !important; }
.bg-purple-lt, .bg-indigo-lt, .bg-primary-lt           { background-color: var(--yl-navy-tint) !important; color: var(--yl-navy) !important; }
.bg-gray-lt, .bg-secondary-lt, .bg-dark-lt             { background-color: var(--yl-neutral-bg) !important; color: var(--yl-neutral-fg) !important; }

/* ── Breadcrumb ───────────────────────────────────────────── */
.breadcrumb { background-color: transparent; padding: 0; margin-bottom: 0; font-size: 0.85rem; }
.breadcrumb-item a { color: var(--pcc-link); }

/* ── Code ─────────────────────────────────────────────────── */
code { color: var(--yl-ink); background-color: var(--yl-segment-bg); padding: 2px 6px; border-radius: 6px; font-size: 0.85em; }

/* ── Typography: Inter only; page title 28/700, card title 18/600 ── */
h1, .page-title, h2, .h1, .h2 { font-family: var(--yl-font-sans); color: var(--yl-ink); }
h1, .page-title, .h1 { font-size: 28px; font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; }
.page-title { margin: 0; }
h1 { margin-bottom: 1rem; }
h2, .h2 { font-size: 18px; font-weight: 600; line-height: 1.3; margin-bottom: 0.75rem; }
h3, .h3 { font-size: 16px; font-weight: 600; margin-bottom: 0.75rem; }
h4, .h4 { font-size: 14px; font-weight: 600; margin-bottom: 0.5rem; }
:is(h1, .page-title) :is(.badge, .btn, small, .small) { letter-spacing: 0; }
.page-title > .bi:first-child { display: none; }

.section-header {
    border-left: 4px solid currentColor;
    padding-left: 1rem;
    margin-bottom: 1rem;
}

/* ── Status Indicators ────────────────────────────────────── */
.status-indicator {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border-radius: var(--yl-radius-pill);
    font-size: 0.875rem;
    font-weight: 500;
}
.status-success { background-color: var(--yl-success-bg); color: var(--yl-success-fg); }
.status-warning { background-color: var(--yl-warning-bg); color: var(--yl-warning-fg); }
.status-danger  { background-color: var(--yl-danger-bg); color: var(--yl-danger-fg); }

/* ── Card-Rounded ─────────────────────────────────────────── */
.card-rounded {
    border-radius: var(--yl-radius-card) !important;
    box-shadow: none;
    overflow: hidden;
}

/* ── Table Inset Lines ────────────────────────────────────── */
.table-inset-lines tbody td { border-bottom: none; }
.table-inset-lines tbody tr { position: relative; }
.table-inset-lines tbody tr::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 16px;
    right: 16px;
    height: 1px;
    background-color: var(--yl-line-soft);
    pointer-events: none;
}
.table-inset-lines tbody tr:last-child::after { display: none; }

/* ── Table Row Colors ─────────────────────────────────────── */
.table-danger  { background-color: var(--yl-danger-bg) !important; }
.table-warning { background-color: var(--yl-warning-bg) !important; }
.table-primary { background-color: var(--yl-navy-tint) !important; }

main { background-color: transparent; }

/* ── Progress Bars (Tabler-matched: 1.25rem inline bars) ── */
.progress { background-color: var(--yl-segment-bg); border-radius: var(--yl-radius-pill); }
.progress-inline { height: 1.25rem; width: 110px; }
.progress-inline .progress-bar { font-size: 0.75rem; font-weight: 500; color: #fff; }
.progress-bar.bg-success { background-color: var(--yl-success) !important; }
.progress-bar.bg-warning { background-color: var(--yl-warning) !important; }
.progress-bar.bg-danger  { background-color: var(--yl-danger) !important; }

/* ── Inline Text Density Classes ─────────────────────────── */
.text-sm  { font-size: 0.875rem !important; }  /* Tabler body size — default for tables */
.text-xs  { font-size: 0.75rem !important; }   /* Tabler thead size — labels, captions */
.text-section-label {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--yl-label);
}

/* Monospace for IDs, ICD/HCPCS codes, timestamps (13/400) */
.font-mono, .yl-mono { font-family: var(--yl-font-sans) !important; font-variant-numeric: tabular-nums; font-size: 13px; font-weight: 400; }

/* ── Spinner ──────────────────────────────────────────────── */
.spinner-border { color: var(--yl-navy); }

/* ── Custom Buttons ───────────────────────────────────────── */
.btn-custom, .btn-custom-pill {
    background-color: var(--yl-surface);
    color: var(--yl-ink);
    border-color: var(--yl-line-strong);
}
.btn-custom:hover, .btn-custom-pill:hover {
    background-color: var(--yl-surface-alt);
    color: var(--yl-ink);
    border-color: var(--yl-slate);
}

.btn-custom-green {
    background-color: var(--yl-success);
    color: #ffffff;
    border-color: var(--yl-success);
}
.btn-custom-green:hover {
    background-color: var(--yl-success-hover);
    color: #ffffff;
    border-color: var(--yl-success-hover);
}

.btn-custom-warning {
    background-color: var(--yl-warning);
    color: #ffffff;
    border-color: var(--yl-warning);
}
.btn-custom-warning:hover {
    background-color: var(--yl-warning-hover);
    color: #ffffff;
    border-color: var(--yl-warning-hover);
}

.btn-custom-danger {
    background-color: var(--yl-surface);
    color: var(--yl-danger);
    border-color: var(--yl-danger);
}
.btn-custom-danger:hover {
    background-color: var(--yl-danger-bg);
    color: var(--yl-danger-fg);
    border-color: var(--yl-danger);
}

/* ── Utility Classes ──────────────────────────────────────── */
.search-clear-btn {
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--yl-slate);
    text-decoration: none;
    font-size: 1.1rem;
    padding: 0 6px;
}

.sticky-top-20 {
    position: sticky;
    top: 20px;
}

.mw-110 { max-width: 110px; }
.mw-180 { max-width: 180px; }

.page-subtitle {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--yl-label);
}

.progress-score      { height: 20px; min-width: 80px; }
.search-input-wide   { min-width: 250px; }
.text-small          { font-size: 0.85rem; }
.text-tiny           { font-size: 0.75rem; }
.min-w-140           { min-width: 140px; }
.min-w-250           { min-width: 250px; }
.rounded-8           { border-radius: var(--yl-radius); }
.gap-2px             { gap: 2px; }
.btn-group-actions   { gap: 2px; display: flex; flex-wrap: wrap; }
.h-20                { height: 20px; }
.h-30                { height: 30px; }

/* Bootstrap pagination: same look as .yl-page-btn */
.pagination { gap: 6px; }
.pagination .page-link {
    min-width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--yl-line);
    border-radius: var(--yl-radius) !important;
    color: var(--yl-slate-700);
    background-color: var(--yl-surface);
    font-weight: 500;
}
.pagination .page-link:hover { color: var(--yl-ink); background-color: var(--yl-surface-alt); }
.pagination .page-link:focus { box-shadow: var(--yl-focus-ring); }
.pagination .page-item.active .page-link { background-color: var(--yl-fill); border-color: var(--yl-fill); color: var(--yl-on-primary); font-weight: 600; }
.pagination .page-item.disabled .page-link { color: var(--yl-label); background-color: var(--yl-surface); opacity: .5; }

/* ── Tabler Timeline ────────────────────────────────────────── */
.timeline { list-style: none; padding: 0; margin: 0; position: relative; }
.timeline::before { content: ''; position: absolute; top: 0; bottom: 0; left: 15px; width: 2px; background: var(--pcc-gray); }
.timeline-event { position: relative; padding-left: 44px; padding-bottom: 1.5rem; }
.timeline-event:last-child { padding-bottom: 0; }
.timeline-event-icon {
    position: absolute; left: 4px; top: 0;
    width: 24px; height: 24px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.75rem; color: #fff; z-index: 1;
}

/* ============================================================
   DARK MODE  [data-bs-theme="dark"] on <html>
   ============================================================ */

[data-bs-theme="dark"] body { background-color: var(--pcc-bg); color: var(--pcc-text); }
[data-bs-theme="dark"] main { background-color: transparent; color: var(--pcc-text); }

/* Cards */
[data-bs-theme="dark"] .card      { background-color: var(--pcc-white); border-color: var(--pcc-gray); color: var(--pcc-text); }
[data-bs-theme="dark"] .card-body { background-color: var(--pcc-white); }

/* Tables */
[data-bs-theme="dark"] .table {
    --bs-table-color: var(--pcc-text);
    --bs-table-bg:    var(--pcc-white);
    color: var(--pcc-text);
    border-color: var(--pcc-gray);
}
[data-bs-theme="dark"] .table thead,
[data-bs-theme="dark"] .table thead th       { background-color: var(--yl-surface-alt); color: var(--yl-label); border-bottom-color: var(--yl-line-soft); }
[data-bs-theme="dark"] .table tbody,
[data-bs-theme="dark"] .table tbody tr,
[data-bs-theme="dark"] .table tbody td       { background-color: var(--pcc-white) !important; color: var(--pcc-text) !important; border-bottom-color: var(--yl-line-soft); }
[data-bs-theme="dark"] .table-light,
[data-bs-theme="dark"] .table-light > td,
[data-bs-theme="dark"] .table-light > th,
[data-bs-theme="dark"] thead.table-light > tr > th {
    background-color: var(--yl-surface-alt) !important;
    color: var(--yl-slate-700) !important;
    border-color: var(--pcc-gray) !important;
}
[data-bs-theme="dark"] .table-hover tbody tr:hover > td { background-color: var(--yl-surface-alt) !important; }
[data-bs-theme="dark"] .table tbody tr.table-danger  > td { background-color: var(--yl-danger-bg) !important; }
[data-bs-theme="dark"] .table tbody tr.table-warning > td { background-color: var(--yl-warning-bg) !important; }
[data-bs-theme="dark"] .table tbody tr.table-primary > td { background-color: var(--yl-navy-tint) !important; }

/* Sidebar */
[data-bs-theme="dark"] .sidebar.collapsed .sidebar-link[data-label]::after {
    background: var(--yl-canvas);
    border: 1px solid var(--pcc-gray);
}

/* Forms */
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select           { background-color: var(--yl-surface); border-color: var(--yl-line-strong); color: var(--pcc-text); }
[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus     { background-color: var(--yl-surface); color: var(--pcc-text); border-color: var(--yl-link); }
[data-bs-theme="dark"] .form-control::placeholder { color: var(--yl-slate); }

/* Buttons */
[data-bs-theme="dark"] .btn-close             { filter: invert(1) grayscale(100%) brightness(200%); }

/* Text utilities */
[data-bs-theme="dark"] .text-muted   { color: var(--yl-slate) !important; }
[data-bs-theme="dark"] .text-dark    { color: var(--pcc-text) !important; }

/* Modal */
[data-bs-theme="dark"] .modal-content { background-color: var(--pcc-white); color: var(--pcc-text); border-color: var(--pcc-gray); }
[data-bs-theme="dark"] .modal-header  { border-bottom-color: var(--pcc-gray); }
[data-bs-theme="dark"] .modal-footer  { border-top-color: var(--pcc-gray); }

/* Accordion */
[data-bs-theme="dark"] .accordion-item         { background-color: var(--pcc-white); border-color: var(--pcc-gray); color: var(--pcc-text); }
[data-bs-theme="dark"] .accordion-button       { background-color: var(--pcc-gray-light); color: var(--pcc-text); box-shadow: none; }
[data-bs-theme="dark"] .accordion-button:not(.collapsed) { background-color: var(--pcc-gray); color: var(--pcc-text); }
[data-bs-theme="dark"] .accordion-button::after { filter: invert(1) brightness(1.5); }
[data-bs-theme="dark"] .accordion-body         { background-color: var(--pcc-white); color: var(--pcc-text); }

/* List groups */
[data-bs-theme="dark"] .list-group-item             { background-color: var(--pcc-white); border-color: var(--pcc-gray); color: var(--pcc-text); }
[data-bs-theme="dark"] .list-group-item-success     { background-color: var(--yl-success-bg) !important; color: var(--yl-success-fg) !important; border-color: var(--yl-success) !important; }
[data-bs-theme="dark"] .list-group-item-danger      { background-color: var(--yl-danger-bg) !important; color: var(--yl-danger-fg) !important; border-color: var(--yl-danger) !important; }

/* Dropdowns */
[data-bs-theme="dark"] .dropdown-menu   { background-color: var(--pcc-white); border-color: var(--pcc-gray); }
[data-bs-theme="dark"] .dropdown-item   { color: var(--pcc-text); }
[data-bs-theme="dark"] .dropdown-item:hover,
[data-bs-theme="dark"] .dropdown-item:focus { background-color: var(--pcc-gray-light); color: var(--pcc-text); }
[data-bs-theme="dark"] .dropdown-divider { border-color: var(--pcc-gray); }

/* Breadcrumb */
[data-bs-theme="dark"] .breadcrumb-item a             { color: var(--pcc-link); }
[data-bs-theme="dark"] .breadcrumb-item.active        { color: var(--pcc-text); }
[data-bs-theme="dark"] .breadcrumb-item + .breadcrumb-item::before { color: var(--pcc-text); }

/* Section cards */
[data-bs-theme="dark"] .section-card        { background-color: var(--pcc-white); border-color: var(--pcc-gray); }
[data-bs-theme="dark"] .section-card-header { border-color: var(--pcc-gray); color: var(--pcc-text); }

/* Page subtitle */
[data-bs-theme="dark"] .page-subtitle { color: var(--pcc-gray-dark); }

/* Progress bars */
[data-bs-theme="dark"] .progress       { background-color: var(--pcc-gray-light); }

/* Tabler card-status-start colored left bar */
.card-status-start { border-radius: var(--yl-radius-card); }

/* ── Overlay Scrollbar ────────────────────────────────────── */
html {
    overflow-y: overlay;
    scrollbar-width: thin;
    scrollbar-color: var(--pcc-gray) transparent;
}
html::-webkit-scrollbar       { width: 6px; }
html::-webkit-scrollbar-track { background: transparent; }
html::-webkit-scrollbar-thumb { background: var(--pcc-gray); border-radius: var(--yl-radius); }

/* Recent Sync History: narrow-sync target label (patient names) — truncate long lists */
.sync-target-label {
    display: inline-block;
    max-width: 16rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
}