/* ═══════════════════════════════════════════════════════════════════════
   LifeLink Clinical — common.css
   Shell styles + ALL shared components (loaded on every page via layout).

   Design tokens mirror the User-side app 1:1: same brand color, same
   cream header gradient, same radius/shadow scale. Only the hero
   treatment (orange gradient + stat cards) and bottom nav tabs differ
   for the Clinical product, per the brief.

   Discipline: if a class name could plausibly be reused on more than one
   clinical page, it lives here — never in a page-specific CSS file.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
    /* ── Brand ─────────────────────────────────────────────────────────── */
    --ll-primary:        rgba(185, 97, 1, 1);
    --ll-primary-dark:    #8a4801;
    --ll-primary-light:  #f7a94a;
    --ll-primary-tint:   #fdf1e2;

    /* Hero gradient (dashboard-specific treatment, but token lives globally
       since other clinical pages may reuse a hero header) */
    --ll-hero-gradient: linear-gradient(180deg, #e08a2e 0%, #f0b45a 60%, #f7d9a8 100%);

    /* Cream header used on non-hero pages (list pages, detail pages) */
    --ll-cream-gradient: linear-gradient(180deg, #fff6ea 0%, #fdf1e2 100%);

    /* ── Status tints ──────────────────────────────────────────────────── */
    --ll-success:      #1f9254;
    --ll-success-tint: #e3f6ea;
    --ll-danger:       #d5301f;
    --ll-danger-tint:  #fde6e3;
    --ll-info:         #2563eb;
    --ll-info-tint:    #e6edfd;
    --ll-warning:      #b9720a;
    --ll-warning-tint: #fdf0d6;

    /* ── Neutrals ──────────────────────────────────────────────────────── */
    --ll-ink:        #1c1a17;
    --ll-ink-soft:   #55504a;
    --ll-ink-faint:  #948d84;
    --ll-border:     #ece6dd;
    --ll-surface:    #ffffff;
    --ll-bg:         #faf8f5;

    /* ── Radius / shadow scale ─────────────────────────────────────────── */
    --ll-radius-sm:  10px;
    --ll-radius-md:  16px;
    --ll-radius-lg:  22px;
    --ll-radius-pill: 999px;

    --ll-shadow-sm: 0 1px 3px rgba(28, 26, 23, 0.06);
    --ll-shadow-md: 0 4px 16px rgba(28, 26, 23, 0.08);
    --ll-shadow-lg: 0 12px 32px rgba(28, 26, 23, 0.12);

    --ll-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    --ll-nav-height: 68px;
    --ll-sidebar-width: 248px;
}

/* ═══════════════════════════════════════════════════════════════════════
   Reset / base
   ═══════════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }

html, body,
.ll-body {
    margin: 0;
    padding: 0;
    font-family: var(--ll-font);
    color: var(--ll-ink);
    background: var(--ll-bg);
    -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
img { max-width: 100%; display: block; }

/* The [hidden] attribute must always win over a class's `display` value.
   Without this, any element that is both `hidden` and carries a class
   like `.manage-list { display: flex }` renders VISIBLE, because a class
   selector and the UA's `[hidden] { display: none }` have equal
   specificity and the class rule (defined later, in a page's own CSS)
   wins the cascade. This bit the Manage Clients pending/browse toggle —
   fix it once, globally, so it can't happen again on any future page. */
[hidden] {
    display: none !important;
}

/* Visible keyboard focus everywhere (quality floor) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 2px solid var(--ll-primary);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   Shell layout — mobile-first, sidebar upgrade at 768px
   ═══════════════════════════════════════════════════════════════════════ */

.ll-shell {
    display: flex;
    min-height: 100vh;
}

.ll-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.ll-page {
    flex: 1;
    padding-bottom: calc(var(--ll-nav-height) + 12px);
}

/* Mobile bottom nav */
.ll-bottom-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: var(--ll-nav-height);
    background: var(--ll-surface);
    border-top: 1px solid var(--ll-border);
    display: flex;
    align-items: stretch;
    justify-content: space-around;
    z-index: 40;
    padding-bottom: env(safe-area-inset-bottom, 0);
}

/* Desktop sidebar — hidden on mobile */
.ll-sidebar {
    display: none;
}

@media (min-width: 768px) {
    .ll-page {
        padding-bottom: 24px;
    }

    .ll-bottom-nav {
        display: none;
    }

    .ll-sidebar {
        display: flex;
        flex-direction: column;
        width: var(--ll-sidebar-width);
        flex-shrink: 0;
        background: var(--ll-surface);
        border-right: 1px solid var(--ll-border);
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .ll-sidebar__brand {
        padding: 28px 24px 20px;
        display: flex;
        align-items: baseline;
        gap: 8px;
    }

    .ll-sidebar__logo {
        font-weight: 800;
        font-size: 20px;
        color: var(--ll-primary);
    }

    .ll-sidebar__tag {
        font-size: 12px;
        font-weight: 600;
        color: var(--ll-ink-faint);
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }

    .ll-sidebar__nav {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 4px;
        padding: 8px 12px;
    }

    .ll-sidebar__account {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 16px;
        border-top: 1px solid var(--ll-border);
    }

    .ll-sidebar__account-info {
        display: flex;
        flex-direction: column;
        min-width: 0;
    }

    .ll-sidebar__account-name {
        font-size: 13px;
        font-weight: 600;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .ll-sidebar__logout {
        background: none;
        border: none;
        padding: 0;
        font-size: 12px;
        color: var(--ll-ink-faint);
        text-align: left;
    }

    .ll-sidebar__logout:hover {
        color: var(--ll-danger);
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   Nav items — shared between bottom nav and sidebar variants
   ═══════════════════════════════════════════════════════════════════════ */

.ll-nav-item {
    display: flex;
    align-items: center;
    color: var(--ll-ink-faint);
    transition: color 0.15s ease;
}

.ll-nav-item--bottom {
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    flex: 1;
    font-size: 11px;
    font-weight: 500;
}

.ll-nav-item--sidebar {
    flex-direction: row;
    gap: 12px;
    padding: 10px 12px;
    border-radius: var(--ll-radius-sm);
    font-size: 14px;
    font-weight: 500;
}

.ll-nav-item--sidebar:hover {
    background: var(--ll-primary-tint);
}

.ll-nav-item.is-active {
    color: var(--ll-primary);
}

.ll-nav-item--sidebar.is-active {
    background: var(--ll-primary-tint);
    font-weight: 600;
}

.ll-nav-item__icon-wrap {
    position: relative;
    display: inline-flex;
}

.ll-nav-item__label {
    display: block;
}

/* ── Icon glyphs (inline, no external icon font dependency) ──────────── */
.ll-icon {
    display: inline-block;
    width: 22px;
    height: 22px;
    background-color: currentColor;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}
.ll-icon--home    { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M3 11l9-8 9 8'/%3E%3Cpath d='M5 10v10h14V10'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M3 11l9-8 9 8'/%3E%3Cpath d='M5 10v10h14V10'/%3E%3C/svg%3E"); }
.ll-icon--users   { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Ccircle cx='9' cy='8' r='3.2'/%3E%3Cpath d='M2.5 20c0-3.5 3-6 6.5-6s6.5 2.5 6.5 6'/%3E%3Ccircle cx='17.5' cy='9' r='2.5'/%3E%3Cpath d='M15 14.2c2.6.4 4.5 2.4 4.5 5.3'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Ccircle cx='9' cy='8' r='3.2'/%3E%3Cpath d='M2.5 20c0-3.5 3-6 6.5-6s6.5 2.5 6.5 6'/%3E%3Ccircle cx='17.5' cy='9' r='2.5'/%3E%3Cpath d='M15 14.2c2.6.4 4.5 2.4 4.5 5.3'/%3E%3C/svg%3E"); }
.ll-icon--message { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M4 5h16v11H8l-4 4V5z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M4 5h16v11H8l-4 4V5z'/%3E%3C/svg%3E"); }
.ll-icon--bell    { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M6 9a6 6 0 0 1 12 0c0 5 2 6 2 6H4s2-1 2-6z'/%3E%3Cpath d='M10 20a2 2 0 0 0 4 0'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M6 9a6 6 0 0 1 12 0c0 5 2 6 2 6H4s2-1 2-6z'/%3E%3Cpath d='M10 20a2 2 0 0 0 4 0'/%3E%3C/svg%3E"); }
.ll-icon--user    { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 20c0-4.4 3.6-7 8-7s8 2.6 8 7'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 20c0-4.4 3.6-7 8-7s8 2.6 8 7'/%3E%3C/svg%3E"); }
.ll-icon--plus    { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E"); }
.ll-icon--chevron { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E"); }
.ll-icon--close   { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E"); }
.ll-icon--search  { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.3-4.3'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.3-4.3'/%3E%3C/svg%3E"); }
.ll-icon--warning { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M12 3l10 18H2L12 3z'/%3E%3Cpath d='M12 10v4M12 17.5h.01'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M12 3l10 18H2L12 3z'/%3E%3Cpath d='M12 10v4M12 17.5h.01'/%3E%3C/svg%3E"); }
.ll-icon--calendar{ -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E"); }
.ll-icon--pulse   { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M2 12h5l2-7 4 14 2-7h7'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M2 12h5l2-7 4 14 2-7h7'/%3E%3C/svg%3E"); }
.ll-icon--edit    { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z'/%3E%3C/svg%3E"); }
.ll-icon--sort    { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M7 4v16M7 4l-3 3M7 4l3 3M17 20V4M17 20l-3-3M17 20l3-3'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M7 4v16M7 4l-3 3M7 4l3 3M17 20V4M17 20l-3-3M17 20l3-3'/%3E%3C/svg%3E"); }
.ll-icon--filter  { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M4 5h16l-6.5 8v6l-3 1.5v-7.5L4 5z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M4 5h16l-6.5 8v6l-3 1.5v-7.5L4 5z'/%3E%3C/svg%3E"); }
.ll-icon--card     { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Crect x='2' y='5' width='20' height='14' rx='2'/%3E%3Cpath d='M2 10h20'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Crect x='2' y='5' width='20' height='14' rx='2'/%3E%3Cpath d='M2 10h20'/%3E%3C/svg%3E"); }
.ll-icon--upload   { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 16V4M7 9l5-5 5 5'/%3E%3Cpath d='M4 16v3a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-3'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 16V4M7 9l5-5 5 5'/%3E%3Cpath d='M4 16v3a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-3'/%3E%3C/svg%3E"); }
.ll-icon--assessment { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='3' width='6' height='18' rx='1'/%3E%3Crect x='14' y='7' width='6' height='14' rx='1'/%3E%3Cpath d='M7 7h.01M7 11h.01M7 15h.01M17 11h.01M17 15h.01'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='3' width='6' height='18' rx='1'/%3E%3Crect x='14' y='7' width='6' height='14' rx='1'/%3E%3Cpath d='M7 7h.01M7 11h.01M7 15h.01M17 11h.01M17 15h.01'/%3E%3C/svg%3E"); }
.ll-icon--shield   { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 3v6c0 4.5-3 7.5-7 9-4-1.5-7-4.5-7-9V6l7-3z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 3v6c0 4.5-3 7.5-7 9-4-1.5-7-4.5-7-9V6l7-3z'/%3E%3C/svg%3E"); }
.ll-icon--handshake { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12l4-4 4 3 3-3 3 3 4-4 2 2-6 6-3-3-3 3-4-3z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12l4-4 4 3 3-3 3 3 4-4 2 2-6 6-3-3-3 3-4-3z'/%3E%3C/svg%3E"); }
.ll-icon--support  { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 14v-2a9 9 0 0 1 18 0v2'/%3E%3Cpath d='M21 15a2 2 0 0 1-2 2h-1v-6h1a2 2 0 0 1 2 2v2zM3 15a2 2 0 0 0 2 2h1v-6H5a2 2 0 0 0-2 2v2z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 14v-2a9 9 0 0 1 18 0v2'/%3E%3Cpath d='M21 15a2 2 0 0 1-2 2h-1v-6h1a2 2 0 0 1 2 2v2zM3 15a2 2 0 0 0 2 2h1v-6H5a2 2 0 0 0-2 2v2z'/%3E%3C/svg%3E"); }
.ll-icon--power    { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 2v10'/%3E%3Cpath d='M18.4 6.6a9 9 0 1 1-12.8 0'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 2v10'/%3E%3Cpath d='M18.4 6.6a9 9 0 1 1-12.8 0'/%3E%3C/svg%3E"); }

/* ═══════════════════════════════════════════════════════════════════════
   Badges
   ═══════════════════════════════════════════════════════════════════════ */

.ll-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    line-height: 1;
    border-radius: var(--ll-radius-pill);
}

.ll-badge--nav {
    position: absolute;
    top: -4px;
    right: -8px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    font-size: 10px;
    color: #fff;
    background: var(--ll-danger);
}

.ll-badge--pill {
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 600;
}

.ll-badge--success { background: var(--ll-success-tint); color: var(--ll-success); }
.ll-badge--danger  { background: var(--ll-danger-tint);  color: var(--ll-danger); }
.ll-badge--info    { background: var(--ll-info-tint);    color: var(--ll-info); }
.ll-badge--warning { background: var(--ll-warning-tint); color: var(--ll-warning); }

/* ═══════════════════════════════════════════════════════════════════════
   Headers
   ═══════════════════════════════════════════════════════════════════════ */

/* Hero header (dashboard-style: gradient + greeting) */
.ll-hero {
    background: var(--ll-hero-gradient);
    padding: 20px 20px 28px;
    color: var(--ll-ink);
}

.ll-hero__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.ll-hero__greeting {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.ll-hero__title {
    font-size: 22px;
    font-weight: 800;
    margin: 0 0 4px;
}

.ll-hero__subtitle {
    font-size: 14px;
    color: rgba(28, 26, 23, 0.72);
    margin: 0;
}

/* Simple cream header (list/detail pages: back arrow + title) */
.ll-header {
    background: var(--ll-cream-gradient);
    padding: 18px 20px 20px;
    display: flex;
    align-items: center;
    gap: 14px;
}

.ll-header__back {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--ll-surface);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--ll-shadow-sm);
    flex-shrink: 0;
    color: var(--ll-ink);
}

.ll-header__back .ll-icon {
    transform: rotate(180deg);
    width: 18px;
    height: 18px;
}

.ll-header__titles { min-width: 0; }

.ll-header__title {
    font-size: 19px;
    font-weight: 700;
    margin: 0;
}

.ll-header__subtitle {
    font-size: 13px;
    color: var(--ll-ink-soft);
    margin: 2px 0 0;
}

/* ═══════════════════════════════════════════════════════════════════════
   Avatar
   ═══════════════════════════════════════════════════════════════════════ */

.ll-avatar {
    border-radius: 50%;
    object-fit: cover;
    background: var(--ll-primary-tint);
    flex-shrink: 0;
}

.ll-avatar--sm { width: 32px; height: 32px; }
.ll-avatar--md { width: 48px; height: 48px; }
.ll-avatar--lg { width: 64px; height: 64px; }
.ll-avatar--xl { width: 88px; height: 88px; }

/* Notification bell w/ badge, used in hero header */
.ll-bell {
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ll-bell .ll-icon { width: 20px; height: 20px; }

.ll-bell__badge {
    position: absolute;
    top: -2px;
    right: -2px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: var(--ll-radius-pill);
    background: var(--ll-danger);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #f0b45a;
}

/* Variant for bells placed on a cream/light header instead of the hero
   gradient (e.g. Clients list, Profile) — needs a subtler background
   than the default's translucent-white-on-orange treatment. */
.ll-bell--light {
    background: var(--ll-primary-tint);
}
.ll-bell--light .ll-icon {
    background-color: var(--ll-primary);
}
.ll-bell--light .ll-bell__badge {
    border-color: var(--ll-primary-tint);
}

/* ═══════════════════════════════════════════════════════════════════════
   Cards
   ═══════════════════════════════════════════════════════════════════════ */

.ll-card {
    background: var(--ll-surface);
    border-radius: var(--ll-radius-md);
    border: 1px solid var(--ll-border);
    box-shadow: var(--ll-shadow-sm);
}

.ll-card--flat {
    border: none;
    box-shadow: none;
    background: transparent;
}

.ll-section {
    padding: 18px 20px;
}

.ll-section__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.ll-section__title {
    font-size: 17px;
    font-weight: 700;
    margin: 0;
}

.ll-section__action {
    font-size: 13px;
    font-weight: 600;
    color: var(--ll-primary);
}

/* Stat card (dashboard tiles) */
.ll-stat-card {
    border-radius: var(--ll-radius-md);
    padding: 18px 12px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.ll-stat-card__icon {
    width: 28px;
    height: 28px;
    margin-bottom: 2px;
}

.ll-stat-card__label {
    font-size: 13px;
    font-weight: 600;
    color: var(--ll-ink-soft);
}

.ll-stat-card__value {
    font-size: 28px;
    font-weight: 800;
    line-height: 1;
}

.ll-stat-card--success { background: var(--ll-success-tint); }
.ll-stat-card--success .ll-icon { background-color: var(--ll-success); }
.ll-stat-card--success .ll-stat-card__value { color: var(--ll-success); }

.ll-stat-card--danger { background: var(--ll-danger-tint); }
.ll-stat-card--danger .ll-icon { background-color: var(--ll-danger); }
.ll-stat-card--danger .ll-stat-card__value { color: var(--ll-danger); }

.ll-stat-card--info { background: var(--ll-info-tint); }
.ll-stat-card--info .ll-icon { background-color: var(--ll-info); }
.ll-stat-card--info .ll-stat-card__value { color: var(--ll-info); }

/* List row card (appointments, clients, alerts, generic list items) */
.ll-row-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px;
    background: var(--ll-surface);
    border: 1px solid var(--ll-border);
    border-radius: var(--ll-radius-md);
}

.ll-row-card__icon {
    width: 44px;
    height: 44px;
    border-radius: var(--ll-radius-sm);
    background: var(--ll-primary-tint);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ll-row-card__icon .ll-icon {
    width: 20px;
    height: 20px;
    background-color: var(--ll-primary);
}

.ll-row-card__icon--danger {
    background: var(--ll-danger-tint);
}
.ll-row-card__icon--danger .ll-icon {
    background-color: var(--ll-danger);
}

.ll-row-card__body {
    flex: 1;
    min-width: 0;
}

.ll-row-card__title {
    font-size: 15px;
    font-weight: 700;
    margin: 0 0 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ll-row-card__subtitle {
    font-size: 13px;
    color: var(--ll-ink-soft);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ll-row-card__meta {
    text-align: right;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}

.ll-row-card__time {
    font-size: 14px;
    font-weight: 700;
}

/* ═══════════════════════════════════════════════════════════════════════
   Detail card primitives (shared — "labeled section + key/value rows"
   pattern used by any detail sheet or detail page: Manage Clients'
   client-detail sheet, Assessment detail's meta card, and any future
   detail view that needs the same shape). Moved here from
   manage-clients.css once a second page needed the identical classes —
   see that file's note.
   ═══════════════════════════════════════════════════════════════════════ */

.detail-block {
    margin-bottom: 16px;
}

.detail-block__title {
    font-size: 14px;
    font-weight: 700;
    margin: 0 0 10px;
}

.detail-info-card {
    background: var(--ll-bg);
    border-radius: var(--ll-radius-md);
    padding: 14px 16px;
}

.detail-info-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
    font-size: 13px;
}

.detail-info-row + .detail-info-row {
    border-top: 1px solid var(--ll-border);
}

.detail-info-row__label {
    color: var(--ll-ink-soft);
    font-weight: 600;
}

.detail-info-row__value {
    color: var(--ll-ink);
    font-weight: 600;
    text-align: right;
}

/* ═══════════════════════════════════════════════════════════════════════
   Picker primitives (shared — "step label + tappable picker button that
   opens a sheet with a searchable list of rows" pattern. Used by Assign
   Assessment's template/client pickers and Create Treatment Plan's
   client/assessment pickers). Moved here from assign-assessment.css once
   a second page needed the identical classes.
   ═══════════════════════════════════════════════════════════════════════ */

.assign-step {
    margin-bottom: 20px;
}

.assign-step__label {
    font-size: 13px;
    font-weight: 700;
    color: var(--ll-ink-soft);
    margin: 0 0 8px;
}

.assign-picker {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 14px 16px;
    background: var(--ll-surface);
    border: 1px solid var(--ll-border);
    border-radius: var(--ll-radius-md);
    font-size: 14px;
    color: var(--ll-ink-faint);
    text-align: left;
}

.assign-picker.has-value {
    color: var(--ll-ink);
    font-weight: 600;
    border-color: var(--ll-primary);
}

.assign-picker:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.assign-picker .ll-icon--chevron {
    width: 16px;
    height: 16px;
    background-color: var(--ll-ink-faint);
    transform: rotate(90deg);
    flex-shrink: 0;
}

.assign-picker-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 50vh;
    overflow-y: auto;
}

.assign-picker-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 8px;
    border-radius: var(--ll-radius-sm);
}

.assign-picker-row:hover {
    background: var(--ll-bg);
}

.assign-picker-row__avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--ll-primary-tint);
    flex-shrink: 0;
}

.assign-picker-row__icon {
    width: 40px;
    height: 40px;
    border-radius: var(--ll-radius-sm);
    background: var(--ll-primary-tint);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.assign-picker-row__icon .ll-icon {
    width: 18px;
    height: 18px;
    background-color: var(--ll-primary);
}

.assign-picker-row__body {
    min-width: 0;
}

.assign-picker-row__name {
    font-size: 14px;
    font-weight: 700;
    margin: 0;
}

.assign-picker-row__meta {
    font-size: 12px;
    color: var(--ll-ink-soft);
    margin: 2px 0 0;
}

/* ═══════════════════════════════════════════════════════════════════════
   Buttons
   ═══════════════════════════════════════════════════════════════════════ */

.ll-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 700;
    padding: 14px 20px;
    border-radius: var(--ll-radius-md);
    border: 1px solid transparent;
    transition: opacity 0.15s ease, transform 0.05s ease;
    position: relative;
}

.ll-btn:active { transform: scale(0.98); }

.ll-btn--block { width: 100%; }

.ll-btn--primary {
    background: var(--ll-primary);
    color: #fff;
}
.ll-btn--primary:hover { opacity: 0.92; }

.ll-btn--outline {
    background: var(--ll-surface);
    border-color: var(--ll-primary);
    color: var(--ll-primary);
}

.ll-btn--danger-outline {
    background: var(--ll-surface);
    border-color: var(--ll-danger);
    color: var(--ll-danger);
}

.ll-btn--sm {
    padding: 9px 16px;
    font-size: 13px;
    border-radius: var(--ll-radius-sm);
}

.ll-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

/* Loading spinner state for buttons (LL.api() toggles this) */
.ll-btn.is-loading {
    color: transparent !important;
    pointer-events: none;
}
.ll-btn.is-loading::after {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-top-color: #fff;
    animation: ll-spin 0.7s linear infinite;
}
.ll-btn--outline.is-loading::after,
.ll-btn--danger-outline.is-loading::after {
    border: 2px solid rgba(185, 97, 1, 0.3);
    border-top-color: var(--ll-primary);
}

@keyframes ll-spin {
    to { transform: rotate(360deg); }
}

/* Full-width CTA banner button (e.g. "Add note for the client") */
.ll-cta-banner {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    background: var(--ll-primary);
    color: #fff;
    border: none;
    border-radius: var(--ll-radius-md);
    padding: 16px 18px;
    font-size: 16px;
    font-weight: 700;
    box-shadow: var(--ll-shadow-md);
}

.ll-cta-banner__icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.22);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.ll-cta-banner__icon .ll-icon {
    background-color: #fff;
    width: 18px;
    height: 18px;
}

/* ═══════════════════════════════════════════════════════════════════════
   Status pills (appointment status, request status, etc.)
   ═══════════════════════════════════════════════════════════════════════ */

.ll-pill {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border-radius: var(--ll-radius-pill);
    font-size: 12px;
    font-weight: 700;
    text-transform: capitalize;
}

.ll-pill--confirmed { background: var(--ll-success-tint); color: var(--ll-success); }
.ll-pill--pending   { background: var(--ll-warning-tint); color: var(--ll-warning); }
.ll-pill--cancelled { background: var(--ll-danger-tint);  color: var(--ll-danger); }
.ll-pill--completed { background: var(--ll-info-tint);    color: var(--ll-info); }

/* ═══════════════════════════════════════════════════════════════════════
   Form controls
   ═══════════════════════════════════════════════════════════════════════ */

.ll-field {
    margin-bottom: 16px;
}

.ll-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--ll-ink-soft);
    margin-bottom: 6px;
}

/* "(optional)" suffix inside a label, e.g. <label>Category <span class="ll-label-optional">(optional)</span></label> */
.ll-label-optional {
    font-weight: 400;
    color: var(--ll-ink-faint);
    text-transform: none;
}

.ll-input,
.ll-textarea,
.ll-select {
    width: 100%;
    padding: 13px 14px;
    border: 1px solid var(--ll-border);
    border-radius: var(--ll-radius-sm);
    font-size: 15px;
    font-family: inherit;
    color: var(--ll-ink);
    background: var(--ll-surface);
}

.ll-input:focus,
.ll-textarea:focus,
.ll-select:focus {
    border-color: var(--ll-primary);
}

.ll-textarea {
    resize: vertical;
    min-height: 110px;
}

/* Search bar (list pages) */
.ll-search-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--ll-surface);
    border: 1px solid var(--ll-border);
    border-radius: var(--ll-radius-sm);
    padding: 10px 14px;
}

.ll-search-bar .ll-icon {
    width: 18px;
    height: 18px;
    background-color: var(--ll-ink-faint);
    flex-shrink: 0;
}

.ll-search-bar input {
    border: none;
    outline: none;
    flex: 1;
    font-size: 14px;
    background: transparent;
    color: var(--ll-ink);
}

/* Toggle switch (shared component — used on multiple settings-style pages) */
.ll-toggle {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 26px;
    flex-shrink: 0;
}
.ll-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}
.ll-toggle__track {
    position: absolute;
    inset: 0;
    background: var(--ll-border);
    border-radius: var(--ll-radius-pill);
    transition: background 0.15s ease;
}
.ll-toggle__track::before {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    left: 3px;
    top: 3px;
    background: #fff;
    border-radius: 50%;
    box-shadow: var(--ll-shadow-sm);
    transition: transform 0.15s ease;
}
.ll-toggle input:checked + .ll-toggle__track {
    background: var(--ll-primary);
}
.ll-toggle input:checked + .ll-toggle__track::before {
    transform: translateX(18px);
}

/* Form error banner (shared) */
.ll-error-banner {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: var(--ll-danger-tint);
    color: var(--ll-danger);
    border-radius: var(--ll-radius-sm);
    padding: 12px 14px;
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 16px;
}

/* ═══════════════════════════════════════════════════════════════════════
   Filter / sort control row (list pages)
   ═══════════════════════════════════════════════════════════════════════ */

.ll-filter-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
}

.ll-filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 14px;
    background: var(--ll-surface);
    border: 1px solid var(--ll-border);
    border-radius: var(--ll-radius-sm);
    font-size: 13px;
    font-weight: 600;
    color: var(--ll-ink-soft);
    position: relative;
}

.ll-filter-btn .ll-icon {
    width: 14px;
    height: 14px;
    background-color: var(--ll-ink-faint);
    flex-shrink: 0;
}

.ll-filter-btn.is-open {
    border-color: var(--ll-primary);
    color: var(--ll-primary);
    background: var(--ll-primary-tint);
}
.ll-filter-btn.is-open .ll-icon {
    background-color: var(--ll-primary);
}

/* ═══════════════════════════════════════════════════════════════════════
   Empty state (shared — any list can be empty)
   ═══════════════════════════════════════════════════════════════════════ */

.ll-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 48px 24px;
    color: var(--ll-ink-faint);
}

.ll-empty-state__icon {
    font-size: 40px;
    margin-bottom: 12px;
}

.ll-empty-state__title {
    font-size: 15px;
    font-weight: 700;
    color: var(--ll-ink-soft);
    margin: 0 0 4px;
}

.ll-empty-state__message {
    font-size: 13px;
    margin: 0;
    max-width: 280px;
}

/* ═══════════════════════════════════════════════════════════════════════
   Anchored dropdown menu (shared — small popover attached to a trigger
   button, e.g. Sort / Filter). Absolutely positioned against its parent,
   so the parent button needs position:relative (set inline by JS or via
   a wrapper class already establishing it, like .ll-filter-btn).
   ═══════════════════════════════════════════════════════════════════════ */

.ff-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 190px;
    background: var(--ll-surface);
    border: 1px solid var(--ll-border);
    border-radius: var(--ll-radius-sm);
    box-shadow: var(--ll-shadow-md);
    padding: 6px;
    z-index: 30;
    text-align: left;
}

.ff-menu__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    padding: 9px 10px;
    border: none;
    background: none;
    border-radius: var(--ll-radius-sm);
    font-size: 13px;
    font-weight: 500;
    color: var(--ll-ink);
    text-align: left;
    white-space: nowrap;
}

.ff-menu__item:hover {
    background: var(--ll-bg);
}

.ff-menu__item.is-active {
    color: var(--ll-primary);
    font-weight: 700;
}

.ff-menu__check {
    color: var(--ll-primary);
    font-weight: 700;
}

/* ═══════════════════════════════════════════════════════════════════════
   Loading skeleton (shared)
   ═══════════════════════════════════════════════════════════════════════ */

.ll-skeleton {
    background: linear-gradient(90deg, #eee 25%, #f5f5f5 37%, #eee 63%);
    background-size: 400% 100%;
    animation: ll-skeleton-shimmer 1.4s ease infinite;
    border-radius: var(--ll-radius-sm);
}

@keyframes ll-skeleton-shimmer {
    0%   { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}

.ll-skeleton--row {
    height: 72px;
    margin-bottom: 12px;
}

/* ═══════════════════════════════════════════════════════════════════════
   Pagination (shared)
   ═══════════════════════════════════════════════════════════════════════ */

.ll-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 20px 0;
}

.ll-pagination__btn {
    min-width: 34px;
    height: 34px;
    padding: 0 8px;
    border-radius: var(--ll-radius-sm);
    border: 1px solid var(--ll-border);
    background: var(--ll-surface);
    font-size: 13px;
    font-weight: 600;
    color: var(--ll-ink-soft);
}

.ll-pagination__btn.is-active {
    background: var(--ll-primary);
    border-color: var(--ll-primary);
    color: #fff;
}

.ll-pagination__btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ═══════════════════════════════════════════════════════════════════════
   Bottom sheet shell (shared — any page can open a bottom sheet)
   ═══════════════════════════════════════════════════════════════════════ */

.ll-sheet-overlay {
    position: fixed;
    inset: 0;
    background: rgba(28, 26, 23, 0.45);
    z-index: 60;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.ll-sheet-overlay[hidden] { display: none; }

.ll-sheet {
    width: 100%;
    max-width: 560px;
    background: var(--ll-surface);
    border-radius: 22px 22px 0 0;
    padding: 20px 20px calc(20px + env(safe-area-inset-bottom, 0));
    max-height: 85vh;
    overflow-y: auto;
}

.ll-sheet__handle {
    width: 40px;
    height: 4px;
    background: var(--ll-border);
    border-radius: var(--ll-radius-pill);
    margin: 0 auto 16px;
}

.ll-sheet__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.ll-sheet__title {
    font-size: 17px;
    font-weight: 700;
    margin: 0;
}

.ll-sheet__close {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--ll-bg);
    display: flex;
    align-items: center;
    justify-content: center;
}
.ll-sheet__close .ll-icon { width: 14px; height: 14px; }

/* ═══════════════════════════════════════════════════════════════════════
   Toast (shared — global feedback)
   ═══════════════════════════════════════════════════════════════════════ */

.ll-toast {
    position: fixed;
    left: 50%;
    bottom: calc(var(--ll-nav-height) + 16px);
    transform: translateX(-50%) translateY(12px);
    background: var(--ll-ink);
    color: #fff;
    padding: 12px 20px;
    border-radius: var(--ll-radius-pill);
    font-size: 13px;
    font-weight: 600;
    box-shadow: var(--ll-shadow-lg);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 100;
    max-width: 90vw;
    text-align: center;
}

.ll-toast.is-visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.ll-toast--error { background: var(--ll-danger); }
.ll-toast--success { background: var(--ll-success); }

@media (min-width: 768px) {
    .ll-toast {
        bottom: 24px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   Confirm modal (shared — used by LL.confirm())
   ═══════════════════════════════════════════════════════════════════════ */

.ll-confirm-overlay {
    position: fixed;
    inset: 0;
    background: rgba(28, 26, 23, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 90;
    padding: 20px;
}

.ll-confirm-overlay[hidden] { display: none; }

.ll-confirm-modal {
    background: var(--ll-surface);
    border-radius: var(--ll-radius-lg);
    padding: 24px 20px 20px;
    max-width: 340px;
    width: 100%;
    box-shadow: var(--ll-shadow-lg);
}

.ll-confirm-modal__message {
    font-size: 15px;
    font-weight: 500;
    text-align: center;
    margin: 0 0 20px;
}

.ll-confirm-modal__actions {
    display: flex;
    gap: 10px;
}

.ll-confirm-modal__actions .ll-btn {
    flex: 1;
    padding: 12px;
}

/* ═══════════════════════════════════════════════════════════════════════
   Success modal (shared — checkmark icon + title + message + one action
   button, rendered inside .ll-confirm-overlay). Used by Manage Clients
   (request sent / connected), Assign Assessment (assessment sent), and
   Assessment Administer (assessment complete). Class name kept as
   "manage-success-modal" from its original page even though it's now
   shared across three unrelated pages — a pure relocation from
   manage-clients.css, not a rename, to avoid missing a reference.
   ═══════════════════════════════════════════════════════════════════════ */

.manage-success-modal {
    max-width: 320px;
    text-align: center;
    position: relative;
    padding-top: 36px;
}

.manage-success-modal__close {
    position: absolute;
    top: 12px;
    right: 12px;
    background: var(--ll-primary-tint);
}
.manage-success-modal__close .ll-icon {
    background-color: var(--ll-primary);
}

.manage-success-modal__icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--ll-primary);
    color: #fff;
    font-size: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
}

.manage-success-modal__title {
    font-size: 18px;
    font-weight: 800;
    margin: 0 0 8px;
}

.manage-success-modal__message {
    font-size: 13px;
    color: var(--ll-ink-soft);
    margin: 0 0 20px;
}

/* ═══════════════════════════════════════════════════════════════════════
   Expired-link screen (session-expired.blade.php)
   ═══════════════════════════════════════════════════════════════════════ */

.ll-expired-screen {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 32px;
}

.ll-expired-screen__icon {
    font-size: 48px;
    margin-bottom: 16px;
}

.ll-expired-screen__title {
    font-size: 20px;
    font-weight: 800;
    margin: 0 0 10px;
}

.ll-expired-screen__message {
    font-size: 14px;
    color: var(--ll-ink-soft);
    max-width: 320px;
    margin: 0;
}

/* ═══════════════════════════════════════════════════════════════════════
   Placeholder page (stub tabs: Messages / Alerts detail / Profile detail)
   ═══════════════════════════════════════════════════════════════════════ */

.ll-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 80px 24px;
    color: var(--ll-ink-faint);
}

.ll-placeholder__icon {
    font-size: 44px;
    margin-bottom: 14px;
}

.ll-placeholder__title {
    font-size: 16px;
    font-weight: 700;
    color: var(--ll-ink-soft);
    margin: 0 0 6px;
}
input:disabled {
  background-color: #f2f2f2;
  color: #888;
  /* border: 1px solid #ddd; */
  cursor: not-allowed;
  opacity: 0.7;
}
@media (max-width: 549px) {

    /* ── Header (18 pages) ──────────────────────────────────────────── */
.ll-search-bar {
    width: 50%;
}
    .ll-header {
        padding: 14px 14px 16px;
        gap: 10px;
    }

    .ll-header__back {
        width: 32px;
        height: 32px;
    }

    .ll-header__back .ll-icon {
        width: 14px;
        height: 14px;
    }
.ll-section {
    padding: 18px 8px;
}
    .ll-header__title {
        font-size: 16px;
        /* Long titles ("Assessments & Measures") truncate with an
           ellipsis instead of overflowing the viewport or wrapping
           awkwardly against the back button. */
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .ll-header__subtitle {
        font-size: 11px;
    }

    .ll-header__titles {
        min-width: 0; /* required for the title's ellipsis truncation above to take effect */
    }

    /* ── Section padding (page body, every page) ───────────────────── */

    .ll-section {
        padding: 14px 14px;
    }

    /* ── Filter row / filter buttons (Assessments, Manage Clients) ──── */

    .ll-filter-row {
        gap: 6px;
    }

    .ll-filter-btn {
        padding: 8px 10px;
        font-size: 12px;
        gap: 4px;
    }

    .ll-filter-btn .ll-icon {
        width: 12px;
        height: 12px;
    }

    /* ── Pagination ──────────────────────────────────────────────────── */

    .ll-pagination {
        gap: 4px;
        padding: 14px 0;
    }

    .ll-pagination__btn {
        min-width: 28px;
        height: 28px;
        padding: 0 5px;
        font-size: 12px;
    }
}