@import './components/back-button.css';
@import './components/phone-input.css';
@import './components/qr-lightbox.css';
@import './components/table-scroll.css';

@theme {
    --font-sans: 'Thmanyah Sans', 'The Year of Handicrafts', 'Instrument Sans',
        ui-sans-serif, system-ui, sans-serif;
}

/* Thmanyah Sans trial typeface (Arabic + Latin), primary while evaluated. */
@font-face {
    font-family: 'Thmanyah Sans';
    src: url('../fonts/thmanyah/thmanyahsans-Light.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Thmanyah Sans';
    src: url('../fonts/thmanyah/thmanyahsans-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Thmanyah Sans';
    src: url('../fonts/thmanyah/thmanyahsans-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Thmanyah Sans';
    src: url('../fonts/thmanyah/thmanyahsans-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Thmanyah Sans';
    src: url('../fonts/thmanyah/thmanyahsans-Black.woff2') format('woff2');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

/* The Year of Handicrafts the panel's single typeface (Arabic + Latin). */
@font-face {
    font-family: 'The Year of Handicrafts';
    src: url('../fonts/the-year-of-handicrafts/TheYearofHandicrafts-Regular.otf')
        format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'The Year of Handicrafts';
    src: url('../fonts/the-year-of-handicrafts/TheYearofHandicrafts-Medium.otf')
        format('opentype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'The Year of Handicrafts';
    src: url('../fonts/the-year-of-handicrafts/TheYearofHandicrafts-SemiBold.otf')
        format('opentype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'The Year of Handicrafts';
    src: url('../fonts/the-year-of-handicrafts/TheYearofHandicrafts-Bold.otf')
        format('opentype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'The Year of Handicrafts';
    src: url('../fonts/the-year-of-handicrafts/TheYearofHandicrafts-Black.otf')
        format('opentype');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

/* SmartHealth bento -------------------------------------------------------
   Two brand hues only logo navy and logo sky carried by flat fills and
   hairlines. Functional tones (success/warning/danger) match the panel
   palette registered in AdminPanelProvider. */
:root {
    --sh-navy: #0d5384;
    --sh-navy-deep: #0a3e63;
    --sh-ink: #12344e;
    --sh-sky: #5fc0f0;
    --sh-sky-strong: #2c7dac;
    --sh-sky-soft: #e6f3fb;
    --sh-canvas: #f5f6f8;
    --sh-paper: #ffffff;
    --sh-subtle: #f0f2f5;
    --sh-line: rgb(13 83 132 / 0.13);
    --sh-line-strong: rgb(13 83 132 / 0.24);
    --sh-muted: #5b7690;
    --sh-success: #2e7d70;
    --sh-warning: #ad7a2e;
    --sh-danger: #b65a5a;
    --sh-radius-panel: 1.15rem;
    --sh-radius-card: 0.9rem;
    --sh-radius-control: 0.6rem;
    --sh-pad: 1.5rem;
    --sh-shadow: 0 1px 2px rgb(18 52 78 / 0.06);
    /* Floating chrome: the gutter that detaches the topbar/sidebar from the
       viewport edges. The float look is carried by the gap + hairline border
       only (no drop shadow). --sh-float-gap drives the vertical rhythm (above
       the topbar, between it and the sidebar, the bottom); --sh-float-gap-x is
       the slightly wider side gap for the left/right page edges. */
    --sh-float-gap: 0.7rem;
    --sh-float-gap-x: 1.25rem;
}

.dark {
    --sh-navy: #1a659c;
    --sh-navy-deep: #0e3a5c;
    --sh-ink: #e8f2fa;
    --sh-sky: #6cc6f4;
    --sh-sky-strong: #6cc6f4;
    --sh-sky-soft: #14384f;
    --sh-canvas: #10151b;
    --sh-paper: #171f29;
    --sh-subtle: #1c2733;
    --sh-line: rgb(139 196 234 / 0.14);
    --sh-line-strong: rgb(139 196 234 / 0.26);
    --sh-muted: #97b2c7;
    --sh-success: #4fae9d;
    --sh-warning: #cfa050;
    --sh-danger: #d08383;
    --sh-shadow: 0 1px 2px rgb(0 0 0 / 0.3);
}

/* Frame ------------------------------------------------------------------ */
/* Reserve the viewport scrollbar gutter so the page never shifts sideways when
   a vertical scrollbar toggles. Opening any tall teleported overlay (the table
   column manager, action menus, select panels, notifications) can push the
   document past the fold and summon the document scrollbar; on platforms with
   classic space-consuming scrollbars (Windows) that stole ~15px of width and
   jolted the whole layout horizontally. `stable` is writing-direction aware, so
   the gutter sits on the correct edge in both RTL and LTR. */
:root {
    scrollbar-gutter: stable;
}

.fi-body {
    background: var(--sh-canvas);
    color: var(--sh-ink);
}

.fi-sidebar-header {
    border-color: var(--sh-line);
    background: var(--sh-paper);
    box-shadow: none;
}

/* Floating chrome ---------------------------------------------------------
   The topbar and sidebar detach from the viewport edges and read as
   rounded, shadowed cards sitting on the canvas.

   Topbar: its sticky wrapper (.fi-topbar-ctn) becomes an opaque canvas
   gutter so page content slides cleanly underneath, while the bar itself
   (.fi-topbar) floats as a card with a gap above and to both sides. */
.fi-topbar-ctn {
    padding: var(--sh-float-gap) var(--sh-float-gap-x) 0;
    background: var(--sh-canvas);
}

.fi-topbar {
    border: 1px solid var(--sh-line);
    border-radius: var(--sh-radius-card);
    background: var(--sh-paper);
    box-shadow: none;
}

/* The layout row (sidebar + main content) sits directly under the sticky
   topbar; a top gap here separates both columns from the floating bar by the
   same amount as every other edge, so the whole chrome breathes uniformly. */
.fi-layout {
    padding-block-start: var(--sh-float-gap);
}

/* Sidebar keeps a plain surface on mobile (it is a fixed drawer there); the
   card treatment + edge gaps are applied on desktop only, where it is a
   sticky flex item and margins reflow the main content instead of clipping. */
.fi-sidebar {
    background: var(--sh-paper);
    box-shadow: none;
}

@media (min-width: 64rem) {
    .fi-sidebar {
        margin-inline-start: var(--sh-float-gap-x);
        margin-block-end: var(--sh-float-gap);
        border: 1px solid var(--sh-line);
        border-radius: var(--sh-radius-card);
        box-shadow: none;
    }

    /* Pin the floated sidebar while scrolling: below the topbar (4rem bar +
       gap above it) plus the layout gap, with a matching gap at the bottom. */
    .fi-body-has-topbar .fi-sidebar {
        top: calc(4rem + var(--sh-float-gap) * 2);
        height: calc(100dvh - 4rem - var(--sh-float-gap) * 3);
    }

    /* Symmetric page frame: the content's open (far) edge sits at the same
       float gap as the sidebar's outer edge, so the page has an equal left/
       right margin that also lines up with the full-width topbar. The side
       facing the sidebar keeps a roomier gutter so cards don't crowd it. */
    .fi-main {
        padding-inline-start: 2rem;
        padding-inline-end: var(--sh-float-gap-x);
    }
}

.fi-sidebar-nav {
    padding: 1rem 0.8rem 1.5rem;
    scrollbar-width: thin;
    scrollbar-color: var(--sh-line-strong) transparent;
}

.fi-sidebar-nav-groups {
    gap: 1rem;
}

.fi-sidebar-group-btn {
    min-height: 1.9rem;
    padding-inline: 0.6rem;
    border-radius: var(--sh-radius-control);
}

.fi-sidebar-group-label {
    color: var(--sh-muted);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

[dir='rtl'] .fi-sidebar-group-label {
    letter-spacing: 0;
}

.fi-sidebar-group-items {
    gap: 0.125rem;
    margin-top: 0.3rem;
}

.fi-sidebar-item-btn {
    min-height: 2.85rem;
    padding-inline: 0.55rem;
    border-radius: 0.8rem;
    transition: background-color 120ms ease, color 120ms ease;
}

.fi-sidebar-item-btn:hover {
    background: var(--sh-sky-soft);
}

/* Bento icon tiles: every navigation icon sits in its own rounded cell. */
.fi-sidebar-item-icon {
    box-sizing: content-box;
    width: 1rem;
    height: 1rem;
    padding: 0.42rem;
    border: 1px solid var(--sh-line);
    border-radius: 0.6rem;
    background: var(--sh-subtle);
    color: var(--sh-sky-strong);
    transition: color 120ms ease, background-color 120ms ease, border-color 120ms ease;
}

.fi-sidebar-item-btn:hover .fi-sidebar-item-icon {
    border-color: color-mix(in srgb, var(--sh-sky-strong) 35%, transparent);
    background: var(--sh-paper);
}

.fi-sidebar-item.fi-active > .fi-sidebar-item-btn {
    background: var(--sh-navy);
    box-shadow: none;
}

.fi-sidebar-item.fi-active > .fi-sidebar-item-btn .fi-sidebar-item-label {
    color: #f2f9ff;
}

.fi-sidebar-item.fi-active > .fi-sidebar-item-btn .fi-sidebar-item-icon {
    border-color: rgb(255 255 255 / 0.22);
    background: rgb(255 255 255 / 0.14);
    color: #f2f9ff;
}

.fi-sidebar-item-label {
    line-height: 1.4;
}

/* Topbar action buttons follow the same bento cell grammar. */
.fi-topbar .fi-icon-btn:not(.fi-sidebar-nav-toggle-btn) {
    border: 1px solid var(--sh-line);
    border-radius: 0.6rem;
    background: var(--sh-subtle);
    color: var(--sh-sky-strong);
    transition: background-color 120ms ease, border-color 120ms ease;
}

.fi-topbar .fi-icon-btn:not(.fi-sidebar-nav-toggle-btn):hover {
    border-color: color-mix(in srgb, var(--sh-sky-strong) 35%, transparent);
    background: var(--sh-sky-soft);
}

.fi-dropdown-list-item-icon {
    color: var(--sh-sky-strong);
}

.fi-main {
    /* The floating-chrome gap on .fi-layout already separates content from the
       topbar, so the page's own top padding is trimmed to keep the heading
       level with the sidebar's first item. */
    padding-block: var(--sh-float-gap) 3rem;
}

/* Type ------------------------------------------------------------------- */
.fi-header-heading {
    color: var(--sh-ink);
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.35;
}

.fi-breadcrumbs-item-label {
    color: var(--sh-muted);
}

.fi-section-header-heading,
.fi-ta-header-heading {
    color: var(--sh-ink);
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1.4;
}

.fi-section-header-description,
.fi-ta-header-description {
    color: var(--sh-muted);
}

/* Cards ------------------------------------------------------------------ */
.fi-section:not(.fi-section-not-contained),
.fi-ta-ctn,
.fi-wi-stats-overview-stat,
.fi-account-widget,
.fi-simple-main {
    border: 1px solid var(--sh-line);
    border-radius: var(--sh-radius-card);
    background: var(--sh-paper);
    box-shadow: var(--sh-shadow);
}

.fi-simple-main {
    border-radius: var(--sh-radius-panel);
}

.fi-section:not(.fi-section-not-contained) > .fi-section-header,
.fi-ta-header {
    border-bottom: 1px solid var(--sh-line);
}

/* Controls ----------------------------------------------------------------- */
.fi-input-wrp {
    border-radius: var(--sh-radius-control);
    background: var(--sh-paper);
    box-shadow: inset 0 0 0 1px var(--sh-line-strong);
    transition: box-shadow 120ms ease;
}

.fi-input-wrp:focus-within {
    box-shadow: inset 0 0 0 1px var(--sh-navy), 0 0 0 3px rgb(13 83 132 / 0.12);
}

.dark .fi-input-wrp:focus-within {
    box-shadow: inset 0 0 0 1px var(--sh-sky), 0 0 0 3px rgb(108 198 244 / 0.14);
}

.fi-btn {
    border-radius: var(--sh-radius-control);
    transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}

.fi-badge {
    border-radius: 999px;
    font-weight: 500;
}

.fi-tabs {
    padding: 0.3rem;
    border: 1px solid var(--sh-line);
    border-radius: var(--sh-radius-control);
    background: var(--sh-subtle);
    box-shadow: none;
}

.fi-tabs-item.fi-active {
    border-radius: 0.45rem;
    background: var(--sh-paper);
    box-shadow: var(--sh-shadow);
}

.fi-modal-window,
.fi-dropdown-panel {
    border: 1px solid var(--sh-line);
    border-radius: var(--sh-radius-panel);
    background: var(--sh-paper);
}

/* Tables ------------------------------------------------------------------- */
.fi-ta-header-cell {
    border-bottom: 1px solid var(--sh-line-strong);
    background: var(--sh-subtle);
}

.fi-ta-header-cell-label {
    color: var(--sh-muted);
    font-size: 0.72rem;
    font-weight: 600;
}

.fi-ta-row {
    border-bottom-color: var(--sh-line);
    transition: background-color 100ms ease;
}

.fi-ta-row:hover {
    background: rgb(13 83 132 / 0.04);
}

.dark .fi-ta-row:hover {
    background: rgb(108 198 244 / 0.05);
}

.fi-ta-empty-state {
    color: var(--sh-muted);
}

/* Dashboard ---------------------------------------------------------------- */
.fi-dashboard-page .fi-wi {
    min-width: 0;
}

.fi-dashboard-page .fi-sc-has-gap {
    gap: 1rem;
}

.fi-dashboard-page .fi-header {
    align-items: flex-end;
    padding: 0.75rem 0.25rem 0.5rem;
}

.fi-dashboard-page .fi-header-heading {
    color: var(--sh-ink);
    font-size: clamp(1.55rem, 2.6vw, 2.1rem);
    font-weight: 700;
}

.fi-dashboard-page .fi-header-subheading {
    max-width: 46rem;
    color: var(--sh-muted);
}

/* Bento panels -------------------------------------------------------------
   One navy statement tile (pulse), two paper tiles, one sky tint (journey). */
.neo-panel {
    position: relative;
    height: 100%;
    min-height: 22rem;
    overflow: hidden;
    border: 1px solid var(--sh-line);
    border-radius: var(--sh-radius-panel);
    background: var(--sh-paper);
    box-shadow: var(--sh-shadow);
}

.neo-panel__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: var(--sh-pad) var(--sh-pad) 0;
}

.neo-eyebrow {
    margin: 0 0 0.3rem;
    color: var(--sh-sky-strong);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

[dir='rtl'] .neo-eyebrow {
    letter-spacing: 0;
}

.neo-panel__title {
    margin: 0;
    color: var(--sh-ink);
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.4;
}

.neo-live-chip,
.neo-count-badge {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 0.45rem;
    min-height: 1.85rem;
    padding-inline: 0.7rem;
    border: 1px solid var(--sh-line);
    border-radius: 999px;
    background: var(--sh-subtle);
    color: var(--sh-muted);
    font-size: 0.7rem;
    font-weight: 600;
}

.neo-count-badge {
    min-width: 1.85rem;
    justify-content: center;
    border-color: var(--sh-line-strong);
    border-radius: 0.45rem;
    background: transparent;
    color: var(--sh-danger);
    font-variant-numeric: tabular-nums;
}

.neo-live-chip__dot {
    width: 0.42rem;
    height: 0.42rem;
    border-radius: 50%;
    background: var(--sh-sky);
}

/* Pulse the navy brand tile. */
.neo-panel--pulse {
    border-color: var(--sh-navy-deep);
    background: linear-gradient(170deg, var(--sh-navy) 0%, var(--sh-navy-deep) 100%);
}

.neo-panel--pulse .neo-panel__title,
.neo-panel--pulse .neo-pulse__summary strong {
    color: #f4faff;
}

.neo-panel--pulse .neo-eyebrow {
    color: var(--sh-sky);
}

.neo-panel--pulse .neo-live-chip {
    border-color: rgb(255 255 255 / 0.2);
    background: rgb(255 255 255 / 0.1);
    color: #d8edfb;
}

.neo-pulse__summary {
    display: flex;
    align-items: baseline;
    gap: 0.65rem;
    padding: 1.15rem var(--sh-pad) 0;
}

.neo-pulse__summary strong {
    font-size: clamp(2.1rem, 4vw, 3.4rem);
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    line-height: 1.1;
}

.neo-pulse__summary span {
    color: rgb(216 237 251 / 0.75);
    font-size: 0.78rem;
}

/* Month-over-month enrolment movement, rendered on the navy tile. */
.neo-delta {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-inline-start: auto;
    padding: 0.3rem 0.65rem;
    border-radius: 999px;
    background: rgb(255 255 255 / 0.12);
    color: #d8edfb;
    font-size: 0.68rem;
    font-weight: 600;
}

.neo-delta svg {
    width: 0.85rem;
    height: 0.85rem;
}

.neo-delta--up,
.neo-delta--new {
    color: #9fe3c9;
}

.neo-delta--down {
    color: #f3b8b8;
}

.neo-pulse__chart {
    height: 10rem;
    margin: 0.35rem var(--sh-pad) 0;
}

.neo-pulse__chart svg {
    display: block;
    width: 100%;
    height: 8rem;
    overflow: visible;
}

.neo-pulse__grid {
    fill: none;
    stroke: rgb(255 255 255 / 0.18);
    stroke-dasharray: 1 2;
    stroke-width: 0.5;
}

.neo-pulse__line {
    fill: none;
    stroke: var(--sh-sky);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2.4;
    vector-effect: non-scaling-stroke;
}

.neo-pulse__axis {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    color: rgb(216 237 251 / 0.6);
    font-size: 0.6rem;
    text-align: center;
}

.neo-stage-strip {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.5rem;
    margin-top: auto;
    padding: 0.9rem var(--sh-pad) var(--sh-pad);
}

.neo-stage-strip__item {
    min-width: 0;
    padding: 0.7rem 0.7rem 0.8rem;
    border-radius: 0.7rem;
    background: rgb(255 255 255 / 0.1);
}

.neo-stage-strip__item::before {
    display: block;
    width: 1.35rem;
    height: 0.18rem;
    margin-bottom: 0.5rem;
    border-radius: 999px;
    background: currentColor;
    content: '';
}

/* Brighter tone set for legibility on the navy tile. */
.neo-panel--pulse .neo-tone-info {
    color: #8fd4f8;
}

.neo-panel--pulse .neo-tone-success {
    color: #7fd6c4;
}

.neo-panel--pulse .neo-tone-warning {
    color: #f0c37e;
}

.neo-panel--pulse .neo-tone-danger {
    color: #f0a1a1;
}

.neo-panel--pulse .neo-tone-gray {
    color: #a9c3d6;
}

.neo-stage-strip__value {
    display: flex;
    align-items: baseline;
    gap: 0.3rem;
    color: #f4faff;
    font-size: 1rem;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}

.neo-stage-strip__value small {
    color: rgb(216 237 251 / 0.6);
    font-size: 0.6rem;
    font-weight: 600;
}

.neo-stage-strip__label {
    display: block;
    overflow: hidden;
    margin-top: 0.12rem;
    color: rgb(216 237 251 / 0.68);
    font-size: 0.64rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Queue paper tile; editorial hairline rows, urgency carried by the
   tone-colored glyph and the timestamp, not by tinted boxes. */
.neo-case-list {
    display: grid;
    padding: 0.4rem var(--sh-pad) 1.1rem;
}

.neo-case {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    column-gap: 0.75rem;
    padding-block: 0.95rem;
    border-bottom: 1px solid var(--sh-line);
}

.neo-case:last-child {
    border-bottom: 0;
    padding-block-end: 0.35rem;
}

.neo-case__icon {
    display: grid;
    width: 1.5rem;
    height: 1.5rem;
    margin-top: 0.05rem;
    place-items: center;
}

.neo-case__icon svg,
.neo-icon-link svg,
.neo-empty-state > svg {
    width: 1.15rem;
    height: 1.15rem;
}

.neo-case__heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.6rem;
}

.neo-case__heading strong,
.neo-case__body p {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.neo-case__heading strong {
    color: var(--sh-ink);
    font-size: 0.78rem;
    font-weight: 600;
}

.neo-case__heading time,
.neo-case__body > span {
    color: var(--sh-muted);
    font-size: 0.64rem;
    font-variant-numeric: tabular-nums;
}

.neo-case__heading time {
    flex: none;
}

.neo-case__body p {
    margin: 0.2rem 0 0;
    color: var(--sh-ink);
    font-size: 0.74rem;
    font-weight: 500;
}

.neo-case__body > span {
    display: block;
    overflow: hidden;
    margin-top: 0.1rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.neo-icon-link {
    display: grid;
    width: 2rem;
    height: 2rem;
    flex: none;
    place-items: center;
    border: 1px solid var(--sh-line);
    border-radius: 50%;
    background: var(--sh-paper);
    color: var(--sh-muted);
    transition: border-color 140ms ease, color 140ms ease, background-color 140ms ease;
}

.neo-icon-link:hover {
    border-color: var(--sh-navy);
    background: var(--sh-sky-soft);
    color: var(--sh-navy);
}

/* Quick actions quiet utilitarian controls aligned under the case text. */
.neo-case__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    grid-column: 2;
    margin-top: 0.6rem;
}

.neo-case-action {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 1.75rem;
    padding-inline: 0.6rem;
    border: 1px solid var(--sh-line-strong);
    border-radius: 0.45rem;
    color: var(--sh-ink);
    font-size: 0.68rem;
    font-weight: 600;
    transition: border-color 120ms ease, color 120ms ease;
}

.neo-case-action svg {
    width: 0.85rem;
    height: 0.85rem;
    color: var(--sh-muted);
    transition: color 120ms ease;
}

.neo-case-action:hover {
    border-color: var(--sh-navy);
    color: var(--sh-navy);
}

.neo-case-action:hover svg {
    color: var(--sh-navy);
}

.neo-case-action--primary {
    border-color: var(--sh-navy);
    color: var(--sh-navy);
}

.neo-case-action--primary svg {
    color: var(--sh-navy);
}

.neo-case-action--primary:hover {
    border-color: var(--sh-navy-deep);
    background: var(--sh-navy);
    color: #f2f9ff;
}

.neo-case-action--primary:hover svg {
    color: #f2f9ff;
}

/* Timeline paper tile with a sky thread. */
.neo-timeline {
    position: relative;
    display: grid;
    padding: 1rem var(--sh-pad) 1.35rem;
}

.neo-timeline::before {
    position: absolute;
    inset-block: 1.8rem 2rem;
    inset-inline-start: 5.38rem;
    width: 1px;
    background: var(--sh-line-strong);
    content: '';
}

.neo-timeline__item {
    position: relative;
    display: grid;
    grid-template-columns: 3rem 0.8rem minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.8rem;
    min-height: 3.65rem;
    border-bottom: 1px solid var(--sh-line);
}

.neo-timeline__item:last-child {
    border-bottom: 0;
}

.neo-timeline__time {
    color: var(--sh-muted);
    font-size: 0.72rem;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.neo-timeline__marker {
    z-index: 1;
    width: 0.62rem;
    height: 0.62rem;
    border: 2px solid var(--sh-paper);
    border-radius: 50%;
    background: var(--sh-line-strong);
    box-shadow: 0 0 0 1px var(--sh-line-strong);
}

.neo-timeline__item.is-current {
    margin-inline: -0.6rem;
    padding-inline: 0.6rem;
    border-radius: 0.7rem;
    background: var(--sh-sky-soft);
}

.neo-timeline__item.is-current .neo-timeline__marker {
    border-color: var(--sh-sky-soft);
    background: var(--sh-sky-strong);
    box-shadow: 0 0 0 1px var(--sh-sky-strong), 0 0 0 5px rgb(44 125 172 / 0.12);
}

.neo-timeline__time {
    display: grid;
    justify-items: start;
    gap: 0.2rem;
}

.neo-now-chip {
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    background: var(--sh-sky-strong);
    color: #f2f9ff;
    font-size: 0.58rem;
    font-weight: 700;
}

.dark .neo-now-chip {
    color: #0b1723;
}

.neo-timeline__content {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
}

.neo-timeline__content > div {
    min-width: 0;
}

.neo-timeline__content strong,
.neo-timeline__content div > span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.neo-timeline__content strong {
    color: var(--sh-ink);
    font-size: 0.78rem;
    font-weight: 600;
}

.neo-timeline__content div > span {
    margin-top: 0.12rem;
    color: var(--sh-muted);
    font-size: 0.67rem;
}

.neo-status {
    flex: none;
    padding: 0.3rem 0.55rem;
    border-radius: 999px;
    background: color-mix(in srgb, currentColor 10%, transparent);
    font-size: 0.62rem;
    font-weight: 600;
}

/* Journey the sky tint tile. */
.neo-panel--journey {
    border-color: color-mix(in srgb, var(--sh-sky-strong) 22%, transparent);
    background: var(--sh-sky-soft);
}

.neo-panel--journey .neo-live-chip {
    border-color: rgb(13 83 132 / 0.14);
    background: rgb(255 255 255 / 0.6);
    color: var(--sh-sky-strong);
}

.dark .neo-panel--journey .neo-live-chip {
    background: rgb(255 255 255 / 0.08);
}

.neo-journey {
    display: grid;
    grid-template-columns: minmax(12rem, 0.95fr) minmax(10rem, 1.05fr);
    align-items: center;
    gap: 1rem;
    min-height: 18rem;
    padding: 0.65rem var(--sh-pad) var(--sh-pad);
}

.neo-journey__visual {
    position: relative;
    aspect-ratio: 1;
    max-width: 15rem;
    margin-inline: auto;
}

.neo-journey__visual svg {
    width: 100%;
    height: 100%;
    overflow: visible;
    transform: rotate(-90deg);
}

.neo-journey__track,
.neo-journey__ring {
    fill: none;
    stroke-width: 7;
}

.neo-journey__track {
    stroke: rgb(255 255 255 / 0.75);
}

.dark .neo-journey__track {
    stroke: rgb(255 255 255 / 0.09);
}

.neo-journey__ring {
    stroke: currentColor;
    stroke-linecap: round;
}

.neo-journey__total {
    position: absolute;
    inset: 50% auto auto 50%;
    display: grid;
    place-items: center;
    transform: translate(-50%, -50%);
    text-align: center;
}

.neo-journey__total strong {
    color: var(--sh-ink);
    font-size: 1.75rem;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}

.neo-journey__total span {
    color: var(--sh-muted);
    font-size: 0.64rem;
}

.neo-journey__legend {
    display: grid;
    gap: 0.25rem;
}

.neo-journey__legend-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 0.55rem;
    min-height: 2.35rem;
    padding-inline: 0.5rem;
    border-bottom: 1px solid rgb(13 83 132 / 0.12);
}

.dark .neo-journey__legend-item {
    border-bottom-color: rgb(139 196 234 / 0.14);
}

.neo-journey__legend-item:last-child {
    border-bottom: 0;
}

.neo-journey__dot {
    width: 0.48rem;
    height: 0.48rem;
    border-radius: 50%;
    background: currentColor;
}

.neo-journey__legend-item > span:nth-child(2) {
    overflow: hidden;
    color: color-mix(in srgb, var(--sh-muted) 75%, var(--sh-ink));
    font-size: 0.7rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.neo-journey__legend-item strong {
    color: var(--sh-ink);
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
}

.neo-journey__legend-item small {
    width: 2.3rem;
    color: currentColor;
    font-size: 0.62rem;
    font-variant-numeric: tabular-nums;
    text-align: end;
}

.neo-empty-state {
    display: grid;
    min-height: 13rem;
    place-items: center;
    align-content: center;
    gap: 0.45rem;
    padding: var(--sh-pad);
    color: var(--sh-muted);
    text-align: center;
}

.neo-empty-state > svg {
    width: 2rem;
    height: 2rem;
    color: var(--sh-success);
}

.neo-empty-state strong {
    color: var(--sh-ink);
    font-size: 0.8rem;
}

.neo-empty-state p {
    max-width: 18rem;
    margin: 0;
    font-size: 0.7rem;
}

/* Functional tones (paper tiles). */
.neo-tone-info {
    color: var(--sh-sky-strong);
}

.neo-tone-success {
    color: var(--sh-success);
}

.neo-tone-warning {
    color: var(--sh-warning);
}

.neo-tone-danger {
    color: var(--sh-danger);
}

.neo-tone-gray {
    color: var(--sh-muted);
}

/* Analytics widgets ---------------------------------------------------------
   Same tile grammar as the bento panels, standard Filament behaviour. */
.fi-dashboard-page .fi-wi-chart > .fi-section,
.fi-dashboard-page .fi-wi-table > .fi-ta-ctn {
    overflow: clip;
    border: 1px solid var(--sh-line);
    border-radius: var(--sh-radius-panel);
    background: var(--sh-paper);
    box-shadow: var(--sh-shadow);
}

.fi-dashboard-page .fi-wi-chart .fi-section-header,
.fi-dashboard-page .fi-wi-table .fi-ta-header {
    padding: 1.25rem var(--sh-pad) 1rem;
    border-bottom: 1px solid var(--sh-line);
    background: transparent;
}

.fi-dashboard-page .fi-wi-chart .fi-section-header-heading,
.fi-dashboard-page .fi-wi-table .fi-ta-header-heading {
    font-size: 0.96rem;
}

.fi-dashboard-page .fi-wi-chart .fi-section-header-description,
.fi-dashboard-page .fi-wi-table .fi-ta-header-description {
    max-width: 46rem;
    font-size: 0.72rem;
    line-height: 1.6;
}

.fi-dashboard-page .fi-wi-chart .fi-section-content {
    padding: 1.15rem var(--sh-pad) var(--sh-pad);
}

.fi-dashboard-page .fi-wi-chart-canvas-ctn {
    min-height: 17rem;
}

.fi-dashboard-page .fi-wi-table .fi-ta-header-cell {
    background: var(--sh-subtle);
}

.fi-dashboard-page .fi-wi-table .fi-ta-row:last-child {
    border-bottom: 0;
}

.fi-dashboard-page .fi-wi-table .fi-pagination {
    border-top-color: var(--sh-line);
    background: var(--sh-subtle);
}

/* Stat cards uniform paper, the number is the hierarchy. */
.fi-dashboard-page .fi-wi-stats-overview {
    gap: 1rem;
}

.fi-dashboard-page .fi-wi-stats-overview-stat {
    min-height: 8.25rem;
    transition: border-color 140ms ease;
}

.fi-dashboard-page .fi-wi-stats-overview-stat:hover {
    border-color: var(--sh-line-strong);
}

.fi-dashboard-page .fi-wi-stats-overview-stat-content {
    padding: 1.2rem 1.25rem;
}

.fi-dashboard-page .fi-wi-stats-overview-stat-label {
    color: var(--sh-muted);
    font-size: 0.72rem;
    font-weight: 600;
}

.fi-wi-stats-overview-stat-value {
    color: var(--sh-navy);
    font-weight: 700;
    letter-spacing: 0;
}

.dark .fi-wi-stats-overview-stat-value {
    color: var(--sh-sky);
}

.fi-dashboard-page .fi-wi-stats-overview-stat-value {
    margin-top: 0.4rem;
    font-size: clamp(1.45rem, 2vw, 1.9rem);
    font-variant-numeric: tabular-nums;
}

/* Responsive ----------------------------------------------------------------- */
@media (max-width: 80rem) {
    .neo-stage-strip__item {
        padding-inline: 0.55rem;
    }

    .neo-stage-strip__label {
        font-size: 0.58rem;
    }

    .neo-journey {
        grid-template-columns: 1fr;
    }

    .neo-journey__visual {
        max-width: 11.5rem;
    }
}

@media (max-width: 40rem) {
    :root {
        --sh-pad: 1.1rem;
    }

    .fi-main {
        padding-block-start: 0.9rem;
    }

    .neo-panel {
        min-height: auto;
    }

    .neo-stage-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .neo-stage-strip__item:last-child {
        grid-column: span 2;
    }

    .neo-timeline::before {
        inset-inline-start: 4.98rem;
    }

    .neo-timeline__content {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.3rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .fi-sidebar-item-btn,
    .fi-sidebar-item-icon,
    .fi-input-wrp,
    .fi-ta-row,
    .fi-btn,
    .fi-icon-link,
    .neo-icon-link,
    .fi-dashboard-page .fi-wi-stats-overview-stat {
        transition: none;
    }
}

/* Care calendar (FullCalendar) -------------------------------------------
   The plugin ships FullCalendar's default look; everything below re-reads it
   from the --sh-* identity tokens so both themes stay on brand. Event colors
   come from .sh-cal-event--{tone} classes set by CareCalendarWidget. */

.fc.filament-fullcalendar {
    --fc-border-color: var(--sh-line);
    --fc-page-bg-color: transparent;
    --fc-neutral-bg-color: var(--sh-subtle);
    --fc-today-bg-color: var(--sh-sky-soft);
    --fc-highlight-color: rgb(95 192 240 / 0.16);
    --fc-list-event-hover-bg-color: var(--sh-subtle);
    --fc-small-font-size: 0.76rem;
    --fc-now-indicator-color: var(--sh-danger);
    font-family: var(--font-sans);
    color: var(--sh-ink);
}

.fc.filament-fullcalendar .fc-toolbar.fc-header-toolbar {
    margin-block-end: 1.1rem;
    row-gap: 0.6rem;
    flex-wrap: wrap;
}

.fc.filament-fullcalendar .fc-toolbar-title {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--sh-ink);
}

.fc.filament-fullcalendar .fc-button {
    background: var(--sh-paper);
    border: 1px solid var(--sh-line-strong);
    color: var(--sh-ink);
    border-radius: var(--sh-radius-control);
    padding: 0.35rem 0.8rem;
    font-size: 0.8rem;
    font-weight: 500;
    text-transform: none;
    box-shadow: var(--sh-shadow);
    transition: background-color 0.15s ease, color 0.15s ease;
}

.fc.filament-fullcalendar .fc-button:hover {
    background: var(--sh-subtle);
    border-color: var(--sh-line-strong);
    color: var(--sh-ink);
}

.fc.filament-fullcalendar .fc-button:focus,
.fc.filament-fullcalendar .fc-button:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--sh-sky-soft);
}

.fc.filament-fullcalendar .fc-button-primary:not(:disabled).fc-button-active,
.fc.filament-fullcalendar .fc-button-primary:not(:disabled):active {
    background: var(--sh-navy);
    border-color: var(--sh-navy);
    color: #fff;
}

.fc.filament-fullcalendar .fc-button-primary:disabled {
    background: var(--sh-subtle);
    border-color: var(--sh-line);
    color: var(--sh-muted);
    box-shadow: none;
}

.fc.filament-fullcalendar .fc-col-header-cell-cushion {
    padding-block: 0.55rem;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--sh-muted);
}

.fc.filament-fullcalendar .fc-daygrid-day-number {
    padding: 0.3rem 0.45rem;
    font-size: 0.78rem;
    color: var(--sh-ink);
}

.fc.filament-fullcalendar .fc-day-today .fc-daygrid-day-number {
    margin: 0.2rem;
    min-width: 1.55rem;
    border-radius: 999px;
    background: var(--sh-navy);
    color: #fff;
    text-align: center;
    font-weight: 600;
}

.fc.filament-fullcalendar .fc-day-other .fc-daygrid-day-number {
    color: var(--sh-muted);
    opacity: 0.6;
}

.fc.filament-fullcalendar .fc-timegrid-slot-label-cushion,
.fc.filament-fullcalendar .fc-timegrid-axis-cushion {
    font-size: 0.72rem;
    color: var(--sh-muted);
}

/* Event pills: tinted surface + accent bar, resolved per tone. */
.fc.filament-fullcalendar .sh-cal-event {
    --sh-tone: var(--sh-navy);
    border: 0;
    border-radius: 0.45rem;
    background: color-mix(in srgb, var(--sh-tone) 14%, var(--sh-paper));
    color: var(--sh-ink);
    padding: 2px 7px;
    font-size: 0.76rem;
    line-height: 1.35;
}

.fc.filament-fullcalendar .sh-cal-event:hover {
    background: color-mix(in srgb, var(--sh-tone) 24%, var(--sh-paper));
}

.fc.filament-fullcalendar .sh-cal-event .fc-event-main,
.fc.filament-fullcalendar .sh-cal-event .fc-event-title,
.fc.filament-fullcalendar .sh-cal-event .fc-event-time {
    color: inherit;
}

.fc.filament-fullcalendar .sh-cal-event .fc-event-time {
    font-weight: 600;
}

.fc.filament-fullcalendar .sh-cal-event--primary { --sh-tone: var(--sh-navy); }
.fc.filament-fullcalendar .sh-cal-event--info { --sh-tone: var(--sh-sky-strong); }
.fc.filament-fullcalendar .sh-cal-event--success { --sh-tone: var(--sh-success); }
.fc.filament-fullcalendar .sh-cal-event--warning { --sh-tone: var(--sh-warning); }
.fc.filament-fullcalendar .sh-cal-event--danger { --sh-tone: var(--sh-danger); }
.fc.filament-fullcalendar .sh-cal-event--gray { --sh-tone: var(--sh-muted); }

.fc.filament-fullcalendar .fc-more-link {
    color: var(--sh-sky-strong);
    font-size: 0.72rem;
    font-weight: 600;
}

.fc.filament-fullcalendar .fc-popover {
    border: 1px solid var(--sh-line-strong);
    border-radius: var(--sh-radius-card);
    background: var(--sh-paper);
    box-shadow: 0 8px 24px rgb(18 52 78 / 0.14);
    overflow: hidden;
}

.fc.filament-fullcalendar .fc-popover-header {
    background: var(--sh-subtle);
    color: var(--sh-ink);
    padding: 0.4rem 0.6rem;
}

/* List view */
.fc.filament-fullcalendar .fc-list {
    border-radius: var(--sh-radius-card);
    overflow: hidden;
}

.fc.filament-fullcalendar .fc-list-day-cushion {
    background: var(--sh-subtle);
}

.fc.filament-fullcalendar .fc-list-day-text,
.fc.filament-fullcalendar .fc-list-day-side-text {
    color: var(--sh-ink);
    font-size: 0.8rem;
    font-weight: 600;
}

.fc.filament-fullcalendar .fc-list-event-title a {
    color: var(--sh-ink);
}

.fc.filament-fullcalendar .fc-list-event-dot {
    border-color: var(--sh-tone, var(--sh-navy));
}

/* QR / barcode hover magnifier -------------------------------------------
   Every QR image (built via the package QrCode helper) enlarges on
   mouse-over so it can be captured with a phone camera, without opening a
   separate page or a modal. The pointer shows a magnifier; the image scales
   in place above its neighbours on a white, padded backing. */
.qr-hover-zoom {
    cursor: zoom-in;
    transform-origin: center center;
    transition: transform 0.15s ease-out, box-shadow 0.15s ease-out;
    will-change: transform;
}

.qr-hover-zoom:hover {
    position: relative;
    z-index: 50;
    transform: scale(3);
    padding: 4px;
    border-radius: 6px;
    background: #ffffff;
    box-shadow: 0 8px 28px rgb(18 52 78 / 0.32);
}

@media (prefers-reduced-motion: reduce) {
    .qr-hover-zoom {
        transition: none;
    }
}

/* Conversation chat -------------------------------------------------------
   MySQL-backed chat feed embedded on the Conversation view page. Everything
   below reads the same --sh-* identity tokens as the rest of the panel, so the
   bubbles, hairline borders, radii and the (deliberately flat) shadow match the
   platform and flip correctly between light/dark. No Tailwind grays/shadows. */
.sh-chat {
    display: flex;
    flex-direction: column;
    height: 68vh;
    overflow: hidden;
    border: 1px solid var(--sh-line);
    border-radius: var(--sh-radius-card);
    background: var(--sh-paper);
    box-shadow: var(--sh-shadow);
}

.sh-chat__header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.8rem 1.1rem;
    border-bottom: 1px solid var(--sh-line);
    background: var(--sh-paper);
}

.sh-chat__avatar {
    display: grid;
    flex: none;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border: 1px solid var(--sh-line);
    border-radius: 50%;
    background: var(--sh-subtle);
    color: var(--sh-sky-strong);
    font-size: 0.85rem;
    font-weight: 600;
}

.sh-chat__peer {
    min-width: 0;
    flex: 1;
}

.sh-chat__peer-name {
    overflow: hidden;
    color: var(--sh-ink);
    font-size: 0.85rem;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sh-chat__peer-meta {
    overflow: hidden;
    color: var(--sh-muted);
    font-size: 0.72rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sh-chat__owner {
    flex: none;
    text-align: end;
}

.sh-chat__owner-label {
    color: var(--sh-muted);
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

[dir='rtl'] .sh-chat__owner-label {
    letter-spacing: 0;
}

.sh-chat__owner-name {
    color: var(--sh-ink);
    font-size: 0.75rem;
    font-weight: 500;
}

.sh-chat__feed {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1.1rem;
    overflow-y: auto;
    background: var(--sh-paper);
    scrollbar-width: thin;
    scrollbar-color: var(--sh-line-strong) transparent;
}

.sh-chat__row {
    display: flex;
}

.sh-chat__row--out {
    justify-content: flex-end;
}

.sh-chat__row--in {
    justify-content: flex-start;
}

.sh-chat__bubble {
    max-width: 75%;
    padding: 0.5rem 0.75rem;
    border-radius: 1rem;
    font-size: 0.82rem;
    line-height: 1.5;
    box-shadow: var(--sh-shadow);
}

.sh-chat__bubble p {
    margin: 0;
    white-space: pre-wrap;
    word-break: break-word;
}

.sh-chat__bubble--in {
    border: 1px solid var(--sh-line);
    border-start-start-radius: 0.35rem;
    background: var(--sh-subtle);
    color: var(--sh-ink);
}

.sh-chat__bubble--out {
    border-end-end-radius: 0.35rem;
    background: var(--sh-navy);
    color: #f2f9ff;
}

.sh-chat__time {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.62rem;
    font-variant-numeric: tabular-nums;
}

.sh-chat__bubble--in .sh-chat__time {
    color: var(--sh-muted);
}

.sh-chat__bubble--out .sh-chat__time {
    color: rgb(242 249 255 / 0.7);
}

.sh-chat__empty {
    display: grid;
    flex: 1;
    place-items: center;
    color: var(--sh-muted);
    font-size: 0.8rem;
}

/* Explains why a thread opens with only its last message. */
.sh-chat__notice {
    margin-bottom: 0.35rem;
    padding: 0.5rem 0.7rem;
    border: 1px dashed var(--sh-line-strong);
    border-radius: 0.6rem;
    color: var(--sh-muted);
    font-size: 0.72rem;
    line-height: 1.6;
    text-align: center;
}

/* The pre-migration snapshot reads as a quote, not as a live message. */
.sh-chat__bubble--archived {
    border-style: dashed;
    background: transparent;
}

.sh-chat__bubble-label {
    margin-bottom: 0.2rem;
    color: var(--sh-muted);
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

[dir='rtl'] .sh-chat__bubble-label {
    letter-spacing: 0;
}

.sh-chat__composer {
    padding: 0.7rem;
    border-top: 1px solid var(--sh-line);
    background: var(--sh-subtle);
}

.sh-chat__inputwrap {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem;
    border-radius: 999px;
    background: var(--sh-paper);
    box-shadow: inset 0 0 0 1px var(--sh-line-strong);
    transition: box-shadow 120ms ease;
}

.sh-chat__inputwrap:focus-within {
    box-shadow: inset 0 0 0 1px var(--sh-navy), 0 0 0 3px rgb(13 83 132 / 0.12);
}

.dark .sh-chat__inputwrap:focus-within {
    box-shadow: inset 0 0 0 1px var(--sh-sky), 0 0 0 3px rgb(108 198 244 / 0.14);
}

.sh-chat__input {
    flex: 1;
    min-width: 0;
    padding: 0.45rem 0.75rem;
    border: 0;
    background: transparent;
    color: var(--sh-ink);
    font-size: 0.85rem;
}

.sh-chat__input:focus {
    outline: none;
}

.sh-chat__input::placeholder {
    color: var(--sh-muted);
}

.sh-chat__send {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    border-radius: 999px;
    background: var(--sh-navy);
    color: #f2f9ff;
    font-size: 0.8rem;
    font-weight: 600;
    transition: background-color 120ms ease;
}

.sh-chat__send:hover {
    background: var(--sh-navy-deep);
}

.sh-chat__send:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

.sh-chat__send svg {
    width: 0.95rem;
    height: 0.95rem;
}

[dir='rtl'] .sh-chat__send svg {
    transform: scaleX(-1);
}

.sh-chat__error {
    margin-top: 0.4rem;
    padding-inline: 0.6rem;
    color: var(--sh-danger);
    font-size: 0.72rem;
}

@media (prefers-reduced-motion: reduce) {
    .sh-chat__inputwrap,
    .sh-chat__send {
        transition: none;
    }
}
.smarthealth-project-switcher-trigger {
    display: inline-flex;
    height: 2.25rem;
    min-width: 0;
    max-width: 14rem;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    padding-inline: 0.625rem;
    border: 1px solid var(--sh-line);
    border-radius: 0.65rem;
    background: var(--sh-subtle);
    color: var(--sh-ink);
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1;
    transition: background-color 120ms ease, border-color 120ms ease;
}

.smarthealth-project-switcher-trigger:hover,
.smarthealth-project-switcher-trigger:focus-visible {
    border-color: color-mix(in srgb, var(--sh-sky-strong) 35%, transparent);
    background: var(--sh-sky-soft);
}

.smarthealth-project-switcher-trigger > .fi-icon {
    width: 1.25rem;
    height: 1.25rem;
    flex: none;
}

.smarthealth-project-switcher-label {
    display: block;
    min-width: 0;
    max-width: 11rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.smarthealth-project-switcher-list {
    max-height: min(30rem, calc(100vh - 8rem));
    overflow-y: auto;
}

.fi-ls {
    display: inline-flex;
    align-items: center;
}

button.fi-ls-trigger:not(.fi-dropdown-list-item) {
    display: inline-flex;
    width: 2.25rem;
    height: 2.25rem;
    flex: none;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--sh-line);
    border-radius: 0.65rem;
    background: var(--sh-subtle);
    color: var(--sh-sky-strong);
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
    transition: background-color 120ms ease, border-color 120ms ease;
}

button.fi-ls-trigger:not(.fi-dropdown-list-item):hover,
button.fi-ls-trigger:not(.fi-dropdown-list-item):focus-visible {
    border-color: color-mix(in srgb, var(--sh-sky-strong) 35%, transparent);
    background: var(--sh-sky-soft);
}

.fi-ls.fi-circular button.fi-ls-trigger:not(.fi-dropdown-list-item) {
    border-radius: 9999px;
}

button.fi-ls-trigger:not(.fi-dropdown-list-item) > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 639px) {
    .smarthealth-project-switcher-trigger {
        height: 2.5rem;
        min-width: 2.5rem;
        justify-content: center;
        padding-inline: 0.5rem;
    }

    .smarthealth-project-switcher-label {
        display: none;
    }

    .smarthealth-project-switcher-chevron {
        display: none;
    }
}