/* App-shell: only .main-content scrolls; prevent document-level scrollbar */
html {
    overflow: hidden;
}

/* Style overrides (not color-scheme dependent) */
:root {
    --pico-border-radius: 4px;
    --pico-form-element-spacing-vertical: 0.5rem;
    --pico-form-element-spacing-horizontal: 0.75rem;
    --sidebar-width: 300px;
}
@media (max-width: 1279px) {
    :root {
        --sidebar-width: 240px;
    }
}


/* Light and system color scheme overrides */
[data-theme="light"],
:root:not([data-theme="dark"]) {
    --pico-primary: #2563eb;
    --pico-primary-background: #2563eb;
    --pico-primary-border: var(--pico-primary-background);
    --pico-primary-underline: rgba(37, 99, 235, 0.5);
    --pico-primary-hover: #1d4ed8;
    --pico-primary-hover-background: #1d4ed8;
    --pico-primary-hover-border: var(--pico-primary-hover-background);
    --pico-primary-focus: rgba(37, 99, 235, 0.25);
    --pico-form-element-placeholder-color: #a0a8b4;
    --table-scroll-shadow: rgba(0, 0, 0, 0.2);
    --hub-nav-scroll-shadow: rgba(0, 0, 0, 0.28);
    --pico-background-color: #f6f7fa;
    --pico-card-background-color: #fff;
    --segmented-control-track: #e9ecf1;
    --segmented-control-hover: rgba(0, 0, 0, 0.06);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --pico-background-color: #f6f7fa;
    --pico-card-background-color: #fff;
  }
}

/* Dark color scheme overrides */
@media only screen and (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
        --pico-primary: #60a5fa;
        --pico-primary-background: #2563eb;
        --pico-primary-border: var(--pico-primary-background);
        --pico-primary-underline: rgba(96, 165, 250, 0.5);
        --pico-primary-hover: #93c5fd;
        --pico-primary-hover-background: #1d4ed8;
        --pico-primary-hover-border: var(--pico-primary-hover-background);
        --pico-primary-focus: rgba(96, 165, 250, 0.25);
        --table-scroll-shadow: rgba(0, 0, 0, 0.5);
        --hub-nav-scroll-shadow: rgba(255, 255, 255, 0.32);
        --pico-background-color: rgb(19, 22.5, 30.5);
        --pico-card-background-color: #181c25;
        --pico-card-sectioning-background-color: #191c26;
        --segmented-control-track: #232834;
        --segmented-control-hover: rgba(255, 255, 255, 0.07);
    }
}

[data-theme="dark"] {
    --pico-primary: #60a5fa;
    --pico-primary-background: #2563eb;
    --pico-primary-border: var(--pico-primary-background);
    --pico-primary-underline: rgba(96, 165, 250, 0.5);
    --pico-primary-hover: #93c5fd;
    --pico-primary-hover-background: #1d4ed8;
    --pico-primary-hover-border: var(--pico-primary-hover-background);
    --pico-primary-focus: rgba(96, 165, 250, 0.25);
    --pico-form-element-placeholder-color: #5c6370;
    --table-scroll-shadow: rgba(0, 0, 0, 0.5);
    --hub-nav-scroll-shadow: rgba(255, 255, 255, 0.32);
    --pico-background-color: rgb(19, 22.5, 30.5);
    --pico-card-background-color: #181c25;
    --pico-card-sectioning-background-color: #191c26;
    --segmented-control-track: #232834;
    --segmented-control-hover: rgba(255, 255, 255, 0.07);
}

/* Visually hidden but accessible to screen readers */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Alpine.js x-cloak — required for x-cloak to hide elements before init */
[x-cloak] {
    display: none !important;
}

.form-inline {
    display: inline;
    margin: 0;
}
.muted-text {
    color: var(--pico-muted-color);
}

/* Phone number widget layout */
.phone-number-widget {
    display: flex;
    gap: 8px;
    align-items: center;
}

.phone-number-widget > :first-child {
    flex: 0 0 40%;
}

.phone-number-widget > :last-child {
    flex: 1 1 auto;
}

/* Theme toggle styling */
.theme-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    min-height: 44px;
    padding: 0.375rem 0.75rem;
    margin: 0;
    border: var(--pico-border-width) solid var(--pico-muted-border-color);
    border-radius: var(--pico-border-radius);
    background: none;
    color: var(--pico-contrast);
    font: inherit;
    font-size: 0.875rem;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color var(--pico-transition),
                color var(--pico-transition),
                border-color var(--pico-transition);
}

.theme-toggle:hover {
    border-color: var(--pico-primary);
    color: var(--pico-primary);
}

.theme-toggle:focus-visible {
    outline: var(--pico-outline-width) solid var(--pico-primary-focus);
    outline-offset: 2px;
}

.theme-toggle svg {
    flex-shrink: 0;
}

/* ── Sidebar layout ─────────────────────────────────────────── */
.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: var(--sidebar-width);
    display: flex;
    flex-direction: column;
    background-color: var(--pico-background-color);
    color: var(--pico-color);
    border-right: 2px solid var(--pico-muted-border-color);
    overflow-y: auto;
    z-index: 100;
    transform: translateX(-100%);
    transition: transform 0.2s ease;
}

html.sidebar-open .sidebar {
    transform: translateX(0);
}

.sidebar-brand {
    padding: var(--pico-nav-element-spacing-vertical) var(--pico-nav-element-spacing-horizontal);
    padding-top: calc(44px + 0.75rem);
    border-bottom: 1px solid var(--pico-muted-border-color);
    min-height: 10.5rem;
    flex-shrink: 0;
}

.sidebar-brand img {
    max-width: 150px;
    width: auto;
    height: auto;
    display: block;
    margin: 0.25rem auto 0.75rem auto;
}

@media (max-height: 900px) {
    .sidebar-brand {
        min-height: auto;
        padding-top: calc(44px + 0.25rem);
        padding-bottom: 0.5rem;
    }

    .sidebar-brand img {
        max-width: 100px;
        margin-bottom: 0.25rem;
    }
}

@media (max-height: 700px) {
    .sidebar-brand {
        padding-top: calc(44px + 0.125rem);
        padding-bottom: 0.25rem;
    }

    .sidebar-brand img {
        max-width: 90px;
        margin-top: 0;
        margin-bottom: 0.125rem;
    }
}

/* Pico's aside rules handle vertical stacking (display: block on li/a).
   Ensure touch targets meet WCAG 2.5.8 (AA, 24px min) / 2.5.5 (AAA, 44px min).
   Project standard: 44px. */
.sidebar nav {
    margin-top: 1rem;
}

.sidebar nav ul {
    margin: 0;
    padding: 0;
    background: none;
}

.sidebar nav details {
    padding: 0.5rem 0.75rem 0.5rem 0.75rem;
}

.sidebar nav details {
    border-bottom: 2px solid var(--pico-muted-border-color);
}

.sidebar nav details summary {
    min-height: 44px;
}

.sidebar nav details ul {
    margin-left: 0.25rem;
}

.sidebar nav li a {
    min-height: 44px;
    display: flex;
    align-items: center;
    text-decoration: none;
    transition: background 0.2s, color 0.2s;
    padding: 0.75rem var(--pico-nav-element-spacing-horizontal);
}

.sidebar nav li a:focus,
.sidebar nav li a:hover,
.sidebar nav li a[aria-current="page"] {
    color: var(--pico-primary-hover);
    background: var(--pico-muted-border-color);
}

/* ── Top header bar ──────────────────────────────────────────── */

.top-bar {
    position: sticky;
    top: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-shrink: 0;
    gap: 0.75rem;
    padding: 0.75rem 1.5rem;
    padding-left: calc(0.75rem + 44px + 0.75rem);
    background-color: var(--pico-card-background-color);
    border-bottom: 1px solid var(--pico-muted-border-color);
    min-height: calc(0.75rem + 44px + 0.75rem);
    transition: padding-left 0.2s ease;
}

.top-bar a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    white-space: nowrap;
}

/* Main content offset — shifts when sidebar is open */
.main-content {
    margin-left: 0;
    height: 100vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    transition: margin-left 0.2s ease;
    container-type: inline-size;
    container-name: main;
}

html.sidebar-open .main-content {
    margin-left: var(--sidebar-width);
}

.main-content > main {
    flex: 1;
    padding: 1.5rem;
}

/* Pico .container uses viewport-based max-widths that don't account for
   the sidebar.  Override so content always fills the available area,
   but cap at a comfortable reading width on very wide screens. */
.main-content .container {
    max-width: 1200px;
}

.main-content > footer {
    border-top: 1px solid var(--pico-muted-border-color);
    padding: 1rem 1.5rem 1.5rem;
    margin-top: 0;
    background-color: var(--pico-background-color);
    width: 100%;
}

/* ── Top Bar Links ─────────────────────────────────── */

/* User nav links and logout button alignment */
.user-links {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    height: 44px;
}
.user-links a.profile-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    white-space: nowrap;
    margin-right: 0;
}
.user-links form.logout-form {
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    height: 100%;
}
.user-links .logout-button {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 1rem;
    margin: 0;
    background: none;
    border: none;
    color: var(--pico-primary);
    font: inherit;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s;
}
.user-links .logout-button:focus,
.user-links .logout-button:hover {
    background: var(--pico-primary-focus, #e0e7ff);
    outline: none;
}

/* ── Hamburger toggle button ─────────────────────────────────── */

.sidebar-toggle {
    display: flex;
    position: fixed;
    top: 0.75rem;
    left: 0.75rem;
    z-index: 102; /* ensure above sidebar */
    background: none;
    border: none;
    padding: 0.5rem;
    min-width: 44px;
    min-height: 44px;
    width: auto;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}


.hamburger,
.hamburger::before,
.hamburger::after {
        display: block;
        width: 24px;
        height: 3px;
        background-color: var(--pico-contrast);
        border-radius: 2px;
        transition: transform 0.2s ease, background-color 0.2s;
}

/* Make sure hamburger is light when in light mode with dark sidebar */
html.sidebar-open .sidebar-toggle .hamburger,
html.sidebar-open .sidebar-toggle .hamburger::before,
html.sidebar-open .sidebar-toggle .hamburger::after {
        background-color: #fff !important; /* light for dark sidebar overlay */
        box-shadow: 0 0 2px #000, 0 0 6px #0002;
}

.hamburger {
    position: relative;
}

.hamburger::before,
.hamburger::after {
    content: "";
    position: absolute;
    left: 0;
}

.hamburger::before {
    top: -8px;
}

.hamburger::after {
    top: 8px;
}

/* ── Backdrop overlay ────────────────────────────────────────── */

.sidebar-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 99;
}

/* ── Responsive: mobile overlay below 768px ──────────────────── */

@media (max-width: 767px) {
    /* On mobile the sidebar overlays content instead of pushing it */
    html.sidebar-open .main-content {
        margin-left: 0;
    }

    /* Reset to full-width overlay */
    :root {
        --sidebar-width: 300px;
    }

    .sidebar-brand {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: calc(0.75rem + 44px + 0.75rem);
        padding-left: 1.5rem;
    }
}

/* ── Scrollable table wrapper ────────────────────────────────── */

.table-wrap {
    overflow-x: auto;
    max-width: 100%;
    /* Horizontal scroll shadows via background-attachment trick.
       Two opaque covers (local) slide with content to mask
       two fixed semi-transparent shadows (scroll).
       The cover gradients use --pico-background-color, which matches the
       page background. Inside a Pico card (<article>) the background
       differs — see the article .table-wrap override below. */
    background:
        /* left cover  */ linear-gradient(to right, var(--pico-background-color) 30%, transparent) center left,
        /* right cover */ linear-gradient(to left,  var(--pico-background-color) 30%, transparent) center right,
        /* left shadow  */ linear-gradient(to right, var(--table-scroll-shadow), transparent) center left,
        /* right shadow */ linear-gradient(to left,  var(--table-scroll-shadow), transparent) center right;
    background-size:
        40px 100%,
        40px 100%,
        20px 100%,
        20px 100%;
    background-attachment: local, local, scroll, scroll;
    background-repeat: no-repeat;
}

/* Inside an <article> (Pico card) the background differs from the page.
   Override so cover gradients match the card, not the page. */
article .table-wrap {
    --pico-background-color: var(--pico-card-background-color);
}

/* Transparent cell backgrounds let the scroll shadows show through.
   Pico sets opaque background-color on every td/th which would hide them.
   This also relies on table.striped's --pico-table-row-stripped-background-color
   staying semi-transparent (currently rgba(111,120,135,0.0375) in Pico v2).
   If a Pico update makes it opaque, odd-row backgrounds will hide the shadows. */
.table-wrap td,
.table-wrap th {
    background-color: transparent;
}

/* Ensure the table inside the wrapper doesn't collapse */
.table-wrap table {
    margin-bottom: 0;
}

article.detail-card > .table-wrap + p {
    margin-top: var(--pico-spacing);
}

/* ── Dashboard ───────────────────────────────────────────────── */

/* Report hero filter form is wider — wrap earlier */
@container main (max-width: 1024px) {
    .report-page article.detail-hero {
        flex-wrap: wrap;
    }
    .report-page .detail-hero-actions {
        margin-left: 0;
        width: 100%;
    }
}

/* Stat cards — colored top-border accent */
.dashboard-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1rem;
    margin-bottom: var(--pico-spacing);
}

.dashboard-stat {
    text-align: center;
    margin-bottom: 0;
    border-top: 3px solid var(--pico-primary);
}

.dashboard-stat-blue  { border-top-color: var(--badge-blue-fg); }
.dashboard-stat-green { border-top-color: var(--badge-green-fg); }
.dashboard-stat-amber { border-top-color: var(--badge-amber-fg); }
.dashboard-stat-red   { border-top-color: var(--badge-red-fg); }

.stat-value {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 0;
}

.stat-label {
    margin-bottom: 0;
}

/* List style used in Recent Clients / Recent Cases cards */
.dashboard-list {
    margin: 0;
    padding: 0 var(--pico-block-spacing-horizontal);
    list-style: none;
}
.dashboard-list li {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    border-bottom: var(--pico-border-width) solid var(--pico-card-border-color);
    padding: 0.6rem 0;
    font-size: 0.875rem;
    list-style: none;
}
.dashboard-list li:last-child {
    border-bottom: none;
}
.dashboard-list li small {
    color: var(--pico-muted-color);
    flex-shrink: 0;
}

/* Attention card — red left border accent */
article.dashboard-attention {
    border-left: 4px solid var(--badge-red-fg);
}

/* ── Detail page shared components ───────────────────────────── */

/* Shared badge / pill styles */
.badge,
.pill {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 500;
    padding: 2px 10px;
    border-radius: 999px;
    line-height: 1.6;
}

/* Detail page shared cards */
.detail-grid {
    margin-bottom: var(--pico-spacing);
}

/* Override Pico .grid breakpoint — with the sidebar and inline edit forms,
   narrow content areas need single-column layout earlier. Container query
   adapts to actual content width. */
@container main (max-width: 960px) {
    .grid {
        grid-template-columns: 1fr !important;
    }
    .dashboard-stats {
        grid-template-columns: 1fr;
    }

}

article.detail-card {
    margin-bottom: var(--pico-spacing);
}
article.detail-card > header,
article.detail-card > form > header {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--pico-muted-color);
    padding: 0.6rem var(--pico-block-spacing-horizontal);
}

/* Replicate Pico's article > header styles for form-wrapped headers */
article.detail-card > form > header {
    margin-right: calc(var(--pico-block-spacing-horizontal) * -1);
    margin-left: calc(var(--pico-block-spacing-horizontal) * -1);
    margin-top: calc(var(--pico-block-spacing-vertical) * -1);
    margin-bottom: var(--pico-block-spacing-vertical);
    background-color: var(--pico-card-sectioning-background-color);
    border-bottom: var(--pico-border-width) solid var(--pico-card-border-color);
    border-top-right-radius: var(--pico-border-radius);
    border-top-left-radius: var(--pico-border-radius);
}

article.detail-card > header :is(h1, h2, h3, h4, h5, h6),
article.detail-card > form > header :is(h1, h2, h3, h4, h5, h6) {
    margin: 0;
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
}

article.detail-card dl {
    margin: 0;
    padding: 0 var(--pico-block-spacing-horizontal);
}

article.detail-card ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
article.detail-card ul li {
    border-bottom: var(--pico-border-width) solid var(--pico-card-border-color);
    padding: 0.6rem var(--pico-block-spacing-horizontal);
    font-size: 0.875rem;
    list-style: none;
}
article.detail-card ul li:last-child {
    border-bottom: none;
}
article.detail-card p.empty {
    color: var(--pico-muted-color);
    font-size: 0.875rem;
    text-align: center;
    padding: 1.5rem var(--pico-block-spacing-horizontal);
    margin: 0;
}
article.detail-card .add-link {
    --pico-form-element-spacing-vertical: 0.4rem;
    --pico-form-element-spacing-horizontal: 0.75rem;
    display: inline-flex;
    align-items: center;
    width: auto;
    min-height: 44px;
    margin-top: 0.75rem;
    margin-left: var(--pico-block-spacing-horizontal);
    margin-bottom: 0.75rem;
    font-size: 0.82rem;
}

/* Add-existing/create-new mini-form on related-record cards */
.related-add-form {
    margin: 0;
    padding: 0.75rem var(--pico-block-spacing-horizontal) 1rem;
    border-bottom: var(--pico-border-width) solid var(--pico-card-border-color);
}
.related-add-form > label {
    margin-bottom: 0.35rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--pico-muted-color);
}
.related-add-row {
    display: flex;
    gap: 0.5rem;
    align-items: end;
}
.related-add-row > select {
    flex: 1 1 auto;
    margin-bottom: 0;
}
.related-add-row > button {
    flex: 0 0 auto;
    width: auto;
    margin-bottom: 0;
}
/* Compact action button in related-record table rows (matches .assignment-actions) */
.related-remove-cell {
    width: 1%;
    white-space: nowrap;
    text-align: right;
}
.related-remove-cell form {
    margin: 0;
}
.related-remove-cell button {
    --pico-form-element-spacing-vertical: 0.2rem;
    --pico-form-element-spacing-horizontal: 0.6rem;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    width: auto;
    margin: 0;
    font-size: 0.78rem;
}
.related-remove-cell button svg {
    flex: 0 0 auto;
}

/* Shared field-row used in cards and emergency grid */
.detail-page .field-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding: 0.45rem 0;
    border-bottom: var(--pico-border-width) solid var(--pico-card-border-color);
    font-size: 0.875rem;
}
.detail-page dl > .field-row:last-child {
    border-bottom: none;
    padding-bottom: 0.6rem;
}
.detail-page .field-row dt {
    color: var(--pico-muted-color);
    font-weight: 400;
    flex-shrink: 0;
    margin: 0;
    padding: 0;
}
.detail-page .field-row dd {
    text-align: right;
    margin: 0;
    padding: 0;
    min-width: 0;
    overflow-wrap: anywhere;
}

/* Add-form sections reuse the shared .field-row include (justice/_field_row.html)
   but stack the label above a full-width control (Layout A), rather than the
   two-column right-aligned layout used inside detail-page cards. */
.case-form-section dl {
    margin: 0;
}
.case-form-section .field-row {
    display: block;
    padding: 0.5rem 0;
    border-bottom: var(--pico-border-width) solid var(--pico-card-border-color);
}
.case-form-section dl > .field-row:last-child {
    border-bottom: none;
}
.case-form-section .field-row dt {
    margin: 0 0 0.25rem;
    padding: 0;
}
.case-form-section .field-row dd {
    margin: 0;
    padding: 0;
    text-align: left;
}
.case-form-section .field-row dd > input,
.case-form-section .field-row dd > select,
.case-form-section .field-row dd > textarea {
    margin-bottom: 0;
}

/* Muted help text shown beneath a control in the shared field row. */
.field-help {
    display: block;
    margin-top: 0.2rem;
    margin-bottom: 0.5rem;
    font-size: 0.82rem;
    color: var(--pico-muted-color);
    text-align: left;
}

/* Muted explanatory text shown beneath a role checkbox (create form) or beside
   the pill/checkbox in the Roles card. */
.role-description {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.8rem;
    line-height: 1.45;
    color: var(--pico-muted-color);
}
/* Spacing between role options on the create/edit user form. */
.role-option {
    margin-bottom: 0.85rem;
}
.role-option:last-child {
    margin-bottom: 0;
}
.role-option label {
    margin-bottom: 0;
}
/* In the detail-page Roles card the description shares a flex row with the
   label and pill/checkbox, so it must claim its own full-width second line.
   Keep the row-gap tight (the row's 1rem gap also applies between wrapped
   lines) and the text a touch smaller so it reads as secondary to the role. */
.detail-page .field-row.role-row {
    flex-wrap: wrap;
    align-items: baseline;
    row-gap: 0.15rem;
}
.detail-page .field-row.role-row > .role-description {
    flex: 1 0 100%;
    margin-top: 0;
    font-size: 0.75rem;
    text-align: left;
}

/* Detail page tabs */
article.detail-tabs-card {
    padding: 0;
}

.detail-tabs {
    display: flex;
    border-bottom: var(--pico-border-width) solid var(--pico-card-border-color);
    margin: 0;
    padding: 0 var(--pico-block-spacing-horizontal);
    list-style: none;
}
.detail-tabs li {
    padding: 0;
    margin: 0;
    list-style: none;
}
.detail-tabs a {
    display: block;
    font-size: 0.85rem;
    padding: 0.75rem 1rem;
    text-decoration: none;
    color: var(--pico-muted-color);
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    white-space: nowrap;
    min-height: 44px;
}
.detail-tabs a:hover {
    color: var(--pico-color);
}
.detail-tabs a.tab-active {
    color: var(--pico-primary);
    border-bottom-color: var(--pico-primary);
    font-weight: 500;
}

.detail-tab-panel {
    padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal);
}
.detail-tab-panel ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
.detail-tab-panel ul li {
    border-bottom: var(--pico-border-width) solid var(--pico-card-border-color);
    padding: 0.6rem 0;
    font-size: 0.875rem;
    list-style: none;
}
.detail-tab-panel ul li:last-child {
    border-bottom: none;
}
.detail-tab-panel p.empty {
    color: var(--pico-muted-color);
    font-size: 0.875rem;
    text-align: center;
    padding: 1.5rem 0;
    margin: 0;
}
.detail-tab-panel .add-link {
    --pico-form-element-spacing-vertical: 0.4rem;
    --pico-form-element-spacing-horizontal: 0.75rem;
    display: inline-flex;
    align-items: center;
    width: auto;
    min-height: 44px;
    margin-top: 0.75rem;
    font-size: 0.82rem;
}

/* ── Shared detail hero ──────────────────────────────────────── */

article.detail-hero {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    margin-bottom: var(--pico-spacing);
}

.detail-hero-info h1 {
    margin: 0 0 0.2rem;
    font-size: 1.3rem;
}

.detail-hero-meta {
    font-size: 0.82rem;
    color: var(--pico-muted-color);
    margin: 0;
    overflow-wrap: anywhere;
}

.detail-hero-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin-left: auto;
    flex-shrink: 0;
    flex-wrap: wrap;
}
.detail-hero-actions [role="button"],
.detail-hero-actions button,
.detail-hero-actions [type="submit"] {
    --pico-form-element-spacing-vertical: 0.35rem;
    --pico-form-element-spacing-horizontal: 0.85rem;
    font-size: 0.82rem;
    width: auto;
    margin: 0;
}
.detail-hero-actions form {
    margin: 0;
}

@container main (max-width: 780px) {
    article.detail-hero {
        flex-wrap: wrap;
    }
    .detail-hero-actions {
        margin-left: 0;
        width: 100%;
    }
}

/* ── Client detail (page-specific) ───────────────────────────── */

.client-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background-color: var(--pico-primary-background);
    color: var(--pico-primary-inverse);
    font-weight: 600;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Hero badges row (used by case, referral, client heroes) */
.detail-hero-badges {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
}

/*
 * Status-badge info tooltips sit at the left edge of the content area, so
 * Pico's default centred, single-line bubble overflows off-screen / over the
 * dark sidebar (appearing cut off and dark-on-dark). Wrap the text to a
 * constrained width and anchor it to the left of the trigger so it always
 * grows rightward, staying inside the content area.
 */
.detail-hero-badges [data-tooltip]::before {
    left: 0;
    right: auto;
    width: max-content;
    max-width: min(16rem, calc(100vw - 2rem));
    white-space: normal;
    text-overflow: clip;
    transform: translateY(0.25rem);
}

@media (hover: hover) and (pointer: fine) {
    /* Cancel Pico's centred slide animation, which re-applies translateX(-50%). */
    .detail-hero-badges [data-tooltip]:hover::before,
    .detail-hero-badges [data-tooltip]:focus::before {
        transform: translateY(0.25rem);
        animation: none;
        opacity: 1;
    }
}

/* Allow hero meta with badges to add bottom margin */
.detail-hero-meta-badges {
    font-size: 0.82rem;
    color: var(--pico-muted-color);
    margin: 0 0 0.5rem;
    overflow-wrap: anywhere;
}

/* Emergency contact card */
article.client-emergency {
    border-left: 4px solid light-dark(#f59e0b, #92400e);
    margin-bottom: var(--pico-spacing);
}
article.client-emergency > header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.emergency-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: light-dark(#d97706, #92400e);
}

/* ── Badge / pill color tokens ───────────────────────────────── */

/* Uses light-dark() — resolved by Pico's color-scheme settings on
   [data-theme="light"], [data-theme="dark"], and @media prefers-color-scheme. */
:root {
    --badge-blue-bg: light-dark(#dbeafe, #1e3a5f);
    --badge-blue-fg: light-dark(#1e40af, #93c5fd);
    --badge-gray-bg: light-dark(#f3f4f6, #374151);
    --badge-gray-fg: light-dark(#4b5563, #d1d5db);
    --badge-amber-bg: light-dark(#fef3c7, #451a03);
    --badge-amber-fg: light-dark(#92400e, #fcd34d);
    --badge-red-bg: light-dark(#fee2e2, #450a0a);
    --badge-red-fg: light-dark(#991b1b, #fca5a5);
    --badge-green-bg: light-dark(#dcfce7, #052e16);
    --badge-green-fg: light-dark(#166534, #86efac);
    --badge-pink-bg: light-dark(#fce7f3, #500724);
    --badge-pink-fg: light-dark(#9d174d, #f9a8d4);
    --badge-indigo-bg: light-dark(#eef2ff, #312e81);
    --badge-indigo-fg: light-dark(#3730a3, #c7d2fe);
    --badge-teal-bg: light-dark(#ecfdf5, #064e3b);
    --badge-teal-fg: light-dark(#065f46, #6ee7b7);
}

/* Badge / pill classes using tokens.
   Semantic pill names are grouped with their base badge color. */
.badge-blue,
.pill-male,
.pill-status-in-progress,
.pill-status-received,
.pill-outcome-ongoing        { background: var(--badge-blue-bg); color: var(--badge-blue-fg); }

.badge-gray,
.pill-no,
.pill-gender-other,
.pill-status-not-started,
.pill-status-withdrawn,
.pill-urgency-low,
.pill-outcome-withdrawn      { background: var(--badge-gray-bg); color: var(--badge-gray-fg); }

.badge-amber,
.pill-risk-medium,
.pill-status-under-review,
.pill-urgency-medium,
.pill-attention,
.pill-outcome-referred-back  { background: var(--badge-amber-bg); color: var(--badge-amber-fg); }

.badge-red,
.pill-risk-high,
.pill-status-cancelled,
.pill-status-declined,
.pill-urgency-high,
.pill-outcome-reoffended     { background: var(--badge-red-bg); color: var(--badge-red-fg); }

.badge-green,
.pill-yes,
.pill-risk-low,
.pill-status-completed,
.pill-status-accepted,
.pill-outcome-completed      { background: var(--badge-green-bg); color: var(--badge-green-fg); }

.pill-female                 { background: var(--badge-pink-bg); color: var(--badge-pink-fg); }

.pill-note-type-general      { background: var(--badge-indigo-bg); color: var(--badge-indigo-fg); }
.pill-note-type-interaction  { background: var(--badge-teal-bg); color: var(--badge-teal-fg); }

/* ── Hub sub-section lists (Notes, Assignments, …) ───────────── */

/* Shared list/card/meta/actions layout used by every Case-hub
   sub-section. List-specific tweaks live in the override blocks below. */
.notes-list,
.assignments-list {
    padding: 0;
    margin: 0;
    list-style: none;
}
.notes-list li,
.assignments-list li {
    list-style: none;
}
.notes-list .note-item,
.assignments-list .assignment-item {
    border-bottom: none;
    border-top: var(--pico-border-width) solid var(--pico-card-border-color);
    padding: 0.75rem 0;
}
.notes-list .note-item:first-child,
.assignments-list .assignment-item:first-child {
    border-top: none;
}
.note-header,
.assignment-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.note-interaction-fields,
.assignment-meta {
    margin: 0.4rem 0 0.25rem;
    padding: 0.2rem 0;
    font-size: 0.82rem;
    color: var(--pico-muted-color);
}
.note-interaction-fields > div,
.assignment-meta > div {
    display: flex;
    gap: 0.4rem;
    padding: 0.1rem 0;
}
.note-interaction-fields dd,
.assignment-meta dd {
    margin: 0;
}
.note-actions,
.assignment-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.4rem;
}
.note-actions [role="button"],
.note-actions button,
.assignment-actions [role="button"],
.assignment-actions button {
    --pico-form-element-spacing-vertical: 0.15rem;
    --pico-form-element-spacing-horizontal: 0.5rem;
    font-size: 0.78rem;
    width: auto;
    margin: 0;
}
.note-actions form,
.assignment-actions form {
    margin: 0;
    margin-left: auto;
}

/* Notes-specific */
.note-hidden {
    display: none;
    opacity: 0.6;
}
.show-hidden .note-hidden {
    display: list-item;
}
.note-body-clamp {
    margin: 0.4rem 0 0.25rem;
}
.note-interaction-fields dt {
    min-width: 7rem;
}

/* Assignments-specific */
.assignment-worker {
    font-weight: 600;
}
.assignment-meta dt {
    min-width: 10rem;
}
.assignment-notes {
    margin: 0.4rem 0 0.25rem;
    font-size: 0.88rem;
}
.tab-badge {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.1rem 0.4rem;
    border-radius: 9999px;
    background: var(--pico-card-border-color);
    color: var(--pico-muted-color);
    margin-left: 0.3rem;
    vertical-align: middle;
}
.tab-badge:empty {
    display: none;
}
.detail-tabs a.tab-active .tab-badge {
    background: var(--pico-primary);
    color: #fff;
}
.notes-add-row {
    display: flex;
    gap: 0.75rem;
    border-top: var(--pico-border-width) solid var(--pico-card-border-color);
    padding-top: 0.75rem;
    margin-top: 0.75rem;
}
.notes-add-btn {
    --pico-form-element-spacing-vertical: 0.4rem;
    --pico-form-element-spacing-horizontal: 0.75rem;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    width: auto;
    font-size: 0.82rem;
    cursor: pointer;
    min-height: 44px;
}
.notes-toggle-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.82rem;
    margin-bottom: 0.5rem;
}
.notes-toggle-row label {
    margin: 0;
    font-size: 0.82rem;
}

/* ── Attachments list ────────────────────────────────────────── */

.attachments-list {
    padding: 0;
    margin: 0;
    list-style: none;
}
.attachments-list li {
    list-style: none;
}
.attachments-list .attachment-item {
    border-top: var(--pico-border-width) solid var(--pico-card-border-color);
    padding: 0.75rem 0;
}
.attachments-list .attachment-item:first-child {
    border-top: none;
}
.attachment-hidden {
    display: none;
    opacity: 0.6;
}
.show-hidden .attachment-hidden {
    display: list-item;
}
.attachment-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.attachment-name {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 600;
    word-break: break-word;
}
.attachment-meta {
    margin: 0.4rem 0 0.25rem;
    padding: 0.2rem 0;
    font-size: 0.82rem;
    color: var(--pico-muted-color);
}
.attachment-meta > div {
    display: flex;
    gap: 0.4rem;
    padding: 0.1rem 0;
}
.attachment-meta dt {
    min-width: 7rem;
}
.attachment-meta dd {
    margin: 0;
    word-break: break-word;
}
.attachment-description {
    margin: 0.4rem 0 0.25rem;
}
.attachment-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.4rem;
}
.attachment-actions [role="button"],
.attachment-actions button {
    --pico-form-element-spacing-vertical: 0.15rem;
    --pico-form-element-spacing-horizontal: 0.5rem;
    font-size: 0.78rem;
    width: auto;
    margin: 0;
}
.attachment-actions form {
    margin: 0;
    margin-left: auto;
}

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

nav[aria-label="Pagination"] a[aria-disabled="true"] {
    opacity: 0.4;
    cursor: default;
    pointer-events: none;
}

nav[aria-label="Pagination"] li {
    position: relative;
}

nav[aria-label="Pagination"] [aria-busy="true"]::before {
    position: absolute !important;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0 !important;
    margin-inline-end: 0 !important;
}

/* ── Dialog open/close animations (all dialogs) ─────────────── */

dialog {
    opacity: 0;
    scale: 0.95;
    transition:
        opacity 0.1s ease-out,
        scale 0.1s ease-out,
        overlay 0.1s ease-out allow-discrete,
        display 0.1s ease-out allow-discrete;
}
dialog[open] {
    opacity: 1;
    scale: 1;
}
@starting-style {
    dialog[open] {
        opacity: 0;
        scale: 0.95;
    }
}
/* ── Delete confirmation dialog ──────────────────────────────── */

#confirm-action-dialog footer {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
}
#confirm-action-dialog footer button {
    width: auto;
    margin: 0;
}

/* ── Create-contact / create-org / create-service-type dialog ─── */

.create-contact-dialog footer,
.create-org-dialog footer,
.create-service-type-dialog footer {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
}
.create-contact-dialog footer button,
.create-org-dialog footer button,
.create-service-type-dialog footer button {
    width: auto;
    margin: 0;
}

/* ── Field confirmation (inline success text) ────────────────── */

.field-confirmation {
    color: var(--pico-ins-color);
    font-weight: 600;
    font-size: 0.875em;
    margin-inline-start: 0.5em;
}

.detail-page .field-row .field-confirmation {
    display: block;
    margin-inline-start: 0;
    margin-block-start: 0.15em;
}

/* ── Match results (possible existing records on create forms) ── */

.match-results {
    /* Override Pico's [role=group] rule, which otherwise makes this an
       inline-flex row (heading and card list sitting side by side). */
    display: block;
    margin-block: 0.75rem;
    padding: 0.75rem;
    border: 1px solid var(--pico-muted-border-color);
    border-radius: var(--pico-border-radius);
    background: var(--pico-card-sectioning-background-color);
    animation: match-results-in 0.18s ease-in-out;
}

@keyframes match-results-in {
    from {
        opacity: 0;
        transform: translateY(-0.25rem);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {

    .match-results {
        animation: none;
    }
}

/* The global busy bridge sets aria-busy on the match-search trigger wrapper
   during a request. Keep that semantic state for assistive tech, but suppress
   Pico's spinner glyph — this feature has no visible loading indicator. */
.match-search[aria-busy="true"]::before {
    content: none;
}

.match-search[aria-busy="true"] {
    white-space: normal;
}

.match-results-heading {
    margin: 0 0 0.5rem;
    font-size: 0.875em;
    font-weight: 600;
}

.match-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.match-card {
    margin: 0;
    list-style: none;
}

.match-card-link,
.match-card-btn,
.match-card-info {
    display: block;
    width: 100%;
    text-align: start;
    padding: 0.5rem 0.65rem;
    border: 1px solid var(--pico-muted-border-color);
    border-radius: var(--pico-border-radius);
    background: var(--pico-background-color);
    color: inherit;
}

.match-card-link,
.match-card-btn {
    cursor: pointer;
    text-decoration: none;
}

/* Pico styles <button> with a solid-primary background (via an overridden
   --pico-background-color), a content-fit width, and a bottom margin. Reset
   those so match-card buttons match the <a> cards beside them. */
.match-card .match-card-btn {
    width: 100%;
    margin: 0;
    font-weight: inherit;
    --pico-background-color: inherit;
}

.match-card-link:hover,
.match-card-btn:hover,
.match-card-link:focus-visible,
.match-card-btn:focus-visible {
    border-color: var(--pico-primary);
    background: var(--pico-primary-background);
    color: var(--pico-primary-inverse);
}

.match-card-label {
    display: block;
    font-weight: 600;
}

.match-card-secondary {
    display: block;
    font-size: 0.8125em;
    color: var(--pico-muted-color);
}

.match-card-btn:hover .match-card-secondary,
.match-card-btn:focus-visible .match-card-secondary,
.match-card-link:hover .match-card-secondary,
.match-card-link:focus-visible .match-card-secondary {
    color: inherit;
}

.match-card-action {
    display: block;
    font-size: 0.8125em;
    font-weight: 600;
    margin-block-start: 0.15em;
}

.match-card-note {
    display: block;
    font-size: 0.8125em;
    color: var(--pico-muted-color);
    margin-block-start: 0.15em;
}

.match-badge {
    display: inline-block;
    font-size: 0.6875em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 0.05em 0.4em;
    border-radius: var(--pico-border-radius);
    background: var(--pico-del-color);
    color: var(--pico-card-background-color);
    vertical-align: middle;
}

.match-card-info {
    cursor: default;
}

/* ── Error banner (delete confirmations) ─────────────────────── */

.error-banner {
    color: var(--pico-del-color);
    background: var(--pico-mark-background-color);
    border: 1px solid var(--pico-del-color);
    border-radius: var(--pico-border-radius);
    padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
}

/* ── Form styling ────────────────────────────────────────────── */

/* Section fieldsets — remove Pico's default fieldset border so the
   legend's bottom-border is the only visible line.
   Nested fieldsets (radio groups, multi-widgets) keep Pico defaults. */
form > fieldset {
    border: none;
    padding-inline: 0;
}

form > fieldset > legend {
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--pico-muted-color);
    border-bottom: var(--pico-border-width) solid var(--pico-muted-border-color);
    padding-bottom: 0.4rem;
    margin-bottom: 1rem;
    width: 100%;
}

/* When a small help text follows a legend directly, collapse the gap so the
   help text sits beneath the legend rather than floating above the fields. */
form > fieldset > legend:has(+ small) {
    margin-bottom: 0.25rem;
}
form > fieldset > legend + small {
    display: block;
    margin-bottom: 1rem;
}

/* Vertical breathing room between fieldset sections */
form > fieldset + fieldset {
    margin-top: 1.5rem;
    padding-top: 0.5rem;
    border-top: var(--pico-border-width) solid var(--pico-muted-border-color);
}

/* Save button area — visual separation from form content */
form > button[type="submit"] {
    margin-top: 1.5rem;
}

/* Save + Cancel button row for CRUD forms */
.form-actions {
    display: flex;
    gap: 1rem;
    align-items: center;
    margin-top: 1.5rem;
}

.form-actions button,
.form-actions [role="button"] {
    width: auto;
    margin-bottom: 0;
}

/* Notification preview — the third-party preview markup renders each section
   box with an inline `margin: 0`, leaving its <h4> label too close. Increase
   the gap below each heading (toward its box) and above it (to separate
   sections). The box's own inline margin can't be changed, so all the spacing
   comes from the heading. */
.notification-preview h4 {
    margin-top: 2rem;
    margin-bottom: 1.25rem;
}

.notification-preview h4:first-child {
    margin-top: 0;
}

/* Required field indicator — asterisk after label for required inputs.
   Uses :has() to detect the required attribute on the next sibling. */
form label:has(+ input[required]),
form label:has(+ select[required]),
form label:has(+ textarea[required]) {
    --required-color: var(--pico-del-color);
}
form label:has(+ input[required])::after,
form label:has(+ select[required])::after,
form label:has(+ textarea[required])::after {
    content: " *";
    color: var(--required-color);
}

/* Required indicator for fieldset legends (radio groups, multi-widgets) */
legend.required::after {
    content: " *";
    color: var(--pico-del-color);
}

/* Required field indicator — inline-edit cards.
   Labels sit in <dt> and inputs in <dd>, so the adjacent-sibling selectors
   above don't match. Use :has() on the .field-row to look across the dt/dd
   boundary instead. */
.detail-card-editing .field-row:has(dd input[required]) > dt > label::after,
.detail-card-editing .field-row:has(dd select[required]) > dt > label::after,
.detail-card-editing .field-row:has(dd textarea[required]) > dt > label::after,
.detail-card-editing .field-row:has(dd input[required]) > dt:not(:has(label))::after,
.detail-card-editing .field-row:has(dd select[required]) > dt:not(:has(label))::after,
/* Radio groups in inline-edit cards don't get [required] on inputs — use dt.required */
.detail-card-editing .field-row > dt.required::after {
    content: " *";
    color: var(--pico-del-color);
}

/* Error state for fieldset-wrapped fields — border + helper text colour
   mirrors Pico's [aria-invalid="true"] styling on regular inputs. */
fieldset[aria-invalid="true"] {
    border-color: var(--pico-del-color);
}
fieldset[aria-invalid="true"] + small {
    color: var(--pico-del-color);
}

/* HTMX loading indicators — inline beside their label, no layout shift.
   HTMX's injected styles use opacity/visibility which reserves space;
   we keep that approach (no pop-in/out) and just ensure inline display. */
.htmx-indicator {
    display: none;
    font-size: 0.82rem;
    color: var(--pico-muted-color);
    padding: 0;
    margin: 0;
}
.htmx-indicator.htmx-request {
    display: inline;
}

/* Required note at top of form */
.required-note {
    font-size: 0.82rem;
    color: var(--pico-muted-color);
    margin-bottom: 1rem;
}
.required-note span {
    color: var(--pico-del-color);
}

/* ── Sortable table headers ──────────────────────────────────── */

th .sort-link {
    color: inherit;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
    cursor: pointer;
    white-space: nowrap;
}

th .sort-link:hover {
    text-decoration: underline;
    color: var(--pico-primary-hover);
}

th[aria-sort] .sort-link {
    font-weight: 700;
}

/* ── Search form (list pages) ───────────────────────────────── */

.search-bar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.search-bar [role="group"] {
    --pico-border-radius: 5rem;
    width: auto;
    margin-bottom: 0;
}

/* ── List controls (search + column toggle) ─────────────────── */

.list-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

@media (max-width: 576px) {
    .list-controls {
        flex-wrap: wrap;
    }
    .column-toggle fieldset {
        right: auto;
        left: 0;
    }
}

.list-controls .search-bar {
    margin-bottom: 0;
}

/* ── Show deactivated toggle (list pages) ───────────────────── */

.list-controls-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: nowrap;
    gap: 0.75rem;
    margin-left: auto;
}

.show-inactive-toggle {
    margin-bottom: 0;
    margin-left: auto;
    flex-shrink: 0;
}

.list-controls-actions .show-inactive-toggle {
    margin-left: 0;
}

.show-inactive-toggle label {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    min-height: 44px;
    margin-bottom: 0;
    white-space: nowrap;
    font-size: 0.875rem;
}

.show-inactive-toggle input[role="switch"] {
    margin: 0;
}

/* ── Column toggle dropdown ─────────────────────────────────── */

.column-toggle {
    position: relative;
    flex-shrink: 0;
    margin-bottom: 0;
}

.column-toggle summary {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0.375rem 0.75rem;
    border: var(--pico-border-width) solid var(--pico-muted-border-color);
    border-radius: var(--pico-border-radius);
    background: none;
    color: var(--pico-contrast);
    font: inherit;
    font-size: 0.875rem;
    cursor: pointer;
    white-space: nowrap;
    list-style: none;
    user-select: none;
}

.column-toggle summary:hover {
    border-color: var(--pico-primary);
    color: var(--pico-primary);
}

.column-toggle summary:focus-visible {
    outline: var(--pico-outline-width) solid var(--pico-primary-focus);
    outline-offset: 2px;
}

.column-toggle fieldset {
    position: absolute;
    right: 0;
    top: 100%;
    z-index: 10;
    margin: 0.25rem 0 0;
    padding: 0.5rem 0.75rem;
    border: var(--pico-border-width) solid var(--pico-muted-border-color);
    border-radius: var(--pico-border-radius);
    background: var(--pico-card-background-color);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    min-width: max-content;
}

.column-toggle label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0;
    font-size: 0.85rem;
    white-space: nowrap;
    cursor: pointer;
    min-height: 36px;
}

.column-toggle label input[type="checkbox"] {
    margin: 0;
}

/* ── Small-screen stacking for detail pages ──────────────────── */

@media (max-width: 576px) {
    .detail-page .field-row {
        flex-direction: column;
        gap: 0.15rem;
    }
    .detail-page .field-row dd {
        text-align: left;
    }
    article.detail-hero {
        padding: 1rem;
    }
    .detail-hero-actions {
        flex-direction: column;
    }
    .detail-hero-actions [role="button"],
    .detail-hero-actions button {
        width: 100%;
        text-align: center;
    }
}

/* ── Report page ─────────────────────────────────────────────── */

/* The form sits inside .detail-hero-actions, which handles margin-left:auto.
   Overrides below are the minimum needed:
   - display:flex to lay out the form inline (Pico forms are block)
   - margin:0 on form, labels, inputs (Pico adds margin-bottom to each)
   - width:auto on inputs/button (Pico sets width:100% on all form elements)
   - Reduced padding via --pico-form-element-spacing-* to fit the hero bar */
.report-filter {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0;
    font-size: 0.82rem;
}

.report-filter label {
    margin: 0;
}

.report-filter input[type="date"],
.report-filter [type="submit"],
.report-filter [role="button"] {
    width: auto;
    margin: 0;
    --pico-form-element-spacing-vertical: 0.25rem;
    --pico-form-element-spacing-horizontal: 0.65rem;
    font-size: inherit;
}

@container main (max-width: 780px) {
    .report-filter {
        flex-wrap: wrap;
    }
}

/* Each report section is a Pico <article> card containing heading, stats, and tables */
.report-section {
    margin-bottom: var(--pico-spacing);
}

.report-section > header {
    padding-bottom: 0.75rem;
    margin-bottom: 0.75rem;
}

.report-section > header h2 {
    font-size: 1.25rem;
    margin-bottom: 0.25rem;
}

.report-section > header p {
    font-size: 0.85rem;
    color: var(--pico-muted-color);
    margin: 0;
}

/* Muted help text under each stat card value */
.stat-help {
    font-size: 0.72rem;
    color: var(--pico-muted-color);
    margin: 0;
    line-height: 1.3;
}

/* Small heading above tables within a section */
.report-table-heading {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--pico-muted-color);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 0.5rem;
}

/* Cap stat cards at 3 per row on the report page */
.report-page .dashboard-stats {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    margin-bottom: 1.5rem;
}

@container main (min-width: 781px) {
    .report-page .dashboard-stats {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Cap detail tables at 2 per row */
.report-grid {
    align-items: start;
}

@container main (min-width: 781px) {
    .report-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

.report-empty {
    font-size: 0.85rem;
    color: var(--pico-muted-color);
    font-style: italic;
}

/* File widget ------------------------------------------------------------ */
.file-widget .btn-sm {
    display: inline-block;
    width: auto;
    padding: 0.25rem 0.5rem;
    font-size: 0.8rem;
    margin: 0;
}

.file-widget-row {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.file-widget-actions {
    display: inline-flex;
    gap: 0.25rem;
}

.file-widget-muted {
    opacity: 0.45;
    text-decoration: line-through;
    pointer-events: none;
}

.file-widget-hint {
    color: var(--pico-muted-color);
    font-style: italic;
}

/* Impersonation banner */
.impersonation-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.5rem 1.5rem;
    background: var(--pico-mark-background-color);
    color: var(--pico-mark-color);
    font-size: 0.875rem;
    flex-shrink: 0;
    position: sticky;
    top: calc(0.75rem + 44px + 0.75rem);
    z-index: 49;
}

/* Demo site banner */
.demo-banner {
    background: #c35500;
    color: #fff;
    text-align: center;
    padding: 0.375rem 1rem;
    font-size: 0.875rem;
    line-height: 1.5;
    position: sticky;
    top: 0;
    z-index: 101;
}

body:has(.demo-banner) {
    --demo-banner-height: calc(0.375rem + 0.875rem * 1.5 + 0.375rem);
}

body:has(.demo-banner) .sidebar-toggle {
    top: calc(var(--demo-banner-height) + 0.75rem);
}

body:has(.demo-banner) .sidebar {
    padding-top: var(--demo-banner-height);
}

body:has(.demo-banner) .main-content {
    height: calc(100vh - var(--demo-banner-height));
}

.impersonation-banner p {
    margin: 0;
}

.impersonation-banner form {
    margin: 0;
}

.impersonation-banner button,
.impersonation-banner [type="submit"] {
    margin: 0;
    padding: 0;
    width: auto;
    white-space: nowrap;
    font-size: 0.875rem;
    background: none;
    border: none;
    box-shadow: none;
    color: var(--pico-primary);
    text-decoration: underline;
    cursor: pointer;
    font-weight: 600;
}

/* ── Inline edit cards ───────────────────────────────────────── */

/* Form wrapper inside card should not add its own spacing */
.detail-card > form {
    margin: 0;
}

/* Card header flex layout for Edit button alignment */
.detail-card > header,
.detail-card > form > header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.detail-card > header :is(h1, h2, h3, h4, h5, h6),
.detail-card > form > header :is(h1, h2, h3, h4, h5, h6) {
    flex: 1;
}

/* Edit button — small outline, visually low-weight */
.btn-card-edit,
.btn-card-link {
    --pico-form-element-spacing-vertical: 0.25rem;
    --pico-form-element-spacing-horizontal: 0.75rem;
    font-size: 0.75rem;
    width: auto;
    margin: 0;
    line-height: 1.2;
}

/* View + Edit button row in card header (read mode) */
.card-header-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

/* Cancel/Save button row in card header */
.card-edit-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}
.card-edit-actions button {
    --pico-form-element-spacing-vertical: 0.25rem;
    --pico-form-element-spacing-horizontal: 0.75rem;
    font-size: 0.75rem;
    width: auto;
    margin: 0;
    line-height: 1.2;
}

/* In edit mode, subgrid aligns labels across rows and form controls fill width */
.detail-card-editing dl {
    display: grid;
    grid-template-columns: auto 1fr;
}
.detail-card-editing dl .field-row {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: 1 / -1;
}
/* Wrapper divs (e.g. Alpine x-show) that group field-rows inside the grid */
.detail-card-editing dl > div:not(.field-row) {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: 1 / -1;
}

/* Form elements inside field-rows during edit mode */
.detail-card-editing .field-row dd input,
.detail-card-editing .field-row dd select,
.detail-card-editing .field-row dd textarea {
    margin: 0;
}

/* Labels in edit mode — inherit muted color from <dt> parent
   (Pico sets label { color: var(--pico-color) } which overrides inheritance) */
.detail-card-editing .field-row dt label {
    color: inherit;
}

/* Vertically centre <dt> labels against their paired <dd> in the subgrid */
.detail-card-editing .field-row dt {
    align-self: center;
}

/* Radio groups (Yes/No fields) — horizontal layout (edit mode only) */
.detail-card-editing .field-row dd fieldset {
    margin: 0;
    padding: 0;
    border: none;
}
.detail-card-editing .field-row dd fieldset > div {
    display: flex;
    gap: 1rem;
    margin: 0;
}
.detail-card-editing .field-row dd fieldset > div > div {
    margin: 0;
}

.detail-card-editing .field-row dd input[type="number"] {
    text-align: right;
}

.detail-card-editing .field-row dd textarea {
    min-height: 4.5rem;
    resize: vertical;
}

/* MultiWidget layout inside field-rows */
.detail-card-editing .field-row dd .choice-with-other-widget {
    display: flex;
    gap: 0.5rem;
}
.detail-card-editing .field-row dd .choice-with-other-widget select,
.detail-card-editing .field-row dd .choice-with-other-widget input {
    margin: 0;
}

.error {
    color: var(--pico-del-color);
}

/* Field-level errors */
.field-error {
    color: var(--pico-del-color);
    font-size: 0.82rem;
    display: block;
    margin-top: 0.2rem;
}

/* Form-level errors */
.form-error {
    color: var(--pico-del-color);
    display: block;
    border: 1px solid var(--pico-del-color);
    border-radius: var(--pico-border-radius);
    padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
}

/* Non-field errors banner inside a card */
.card-form-errors {
    padding: 0.5rem var(--pico-block-spacing-horizontal);
    margin-bottom: 0.5rem;
}


/* "Saved" indicator shown in card header after a successful inline edit */
@keyframes saved-fade-out {
    0%   { opacity: 1; }
    70%  { opacity: 1; }
    100% { opacity: 0; }
}
.card-saved-indicator {
    color: light-dark(#16a34a, #4ade80);
    font-size: 0.75rem;
    font-weight: 600;
    margin-left: auto;
    margin-right: 0.75rem;
    animation: saved-fade-out 3s ease-out forwards;
}

/* Toast container */
#toast-container {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 200;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    pointer-events: none;
}

/* Individual toast */
.toast {
    pointer-events: auto;
    padding: 0.75rem 1.25rem;
    border-radius: var(--pico-border-radius);
    font-size: 0.875rem;
    background: var(--toast-bg);
    color: var(--toast-fg);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    animation: toast-slide-in 200ms ease-out;
}

@keyframes toast-slide-in {
    from { opacity: 0; transform: translateY(1rem); }
    to   { opacity: 1; transform: translateY(0); }
}

.toast-dismiss {
    animation: toast-fade-out 1s ease-out forwards;
}

@keyframes toast-fade-out {
    to { opacity: 0; transform: translateY(-0.5rem); }
}

/* Color tokens for inline edit toasts / card flash */
:root {
    --card-flash-color: light-dark(#22c55e, #16a34a);
    --toast-bg: light-dark(#166534, #052e16);
    --toast-fg: light-dark(#fff, #86efac);
}

/* Reduced motion — disable animations */
@media (prefers-reduced-motion: reduce) {
    .toast {
        animation: none;
    }
    .toast-dismiss {
        animation: none;
        opacity: 0;
    }
    .card-saved-indicator {
        animation: none;
    }
}

/* Service management — inline toggle button and inactive badge */
.inline-btn {
    display: inline;
    padding: 0.25rem 0.5rem;
    font-size: 0.8125rem;
    width: auto;
    margin: 0;
}

mark.inactive {
    background: var(--pico-muted-border-color);
    color: var(--pico-muted-color);
}

/* ── Side panel ──────────────────────────────────────────────── */

/* Side panel backdrop */
.side-panel-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 150;
    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: none;
}
.side-panel-backdrop.visible {
    opacity: 1;
    pointer-events: auto;
}

/* Side panel */
.side-panel {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(520px, 100vw);
    height: 100dvh;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.25s ease;
    z-index: 151;
    background: var(--pico-card-background-color);
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15);
}
.side-panel.side-panel-open {
    transform: translateX(0);
}

/* Side panel header (sticky) */
.side-panel-header {
    position: sticky;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--pico-table-border-color);
    background: var(--pico-card-background-color);
    z-index: 1;
}
.side-panel-header h2 {
    margin: 0;
    font-size: 1.125rem;
}

/* Side panel scrollable body */
.side-panel-body {
    flex: 1;
    overflow-y: auto;
    padding: 1.25rem;
}

/* Loading state */
.side-panel-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem 1.25rem;
    color: var(--pico-muted-color);
}

/* Mobile: full width */
@media (max-width: 576px) {
    .side-panel {
        width: 100vw;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .side-panel,
    .side-panel-backdrop {
        transition: none;
    }
}

/* Role descriptions on user form */
small.role-description {
    display: block;
    margin: -0.25rem 0 0.5rem 2rem;
    color: var(--pico-muted-color);
}

/* ─── Client History Timeline ─── */

.history-timeline {
    list-style: none;
    padding: 0;
    margin: 0;
}

.history-entry {
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--pico-muted-border-color);
}

.history-entry:last-child {
    border-bottom: none;
}

.history-entry-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
    font-size: 0.85rem;
    color: var(--pico-muted-color);
}

.history-label-badge {
    display: inline-block;
    font-size: 0.8rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.history-field-changes {
    list-style: none;
    padding: 0;
    margin: 0.25rem 0 0;
}

.history-field-change {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem;
    padding: 0.15rem 0;
    font-size: 0.85rem;
    list-style: none;
}

.history-field-name {
    font-weight: 600;
    min-width: 100%;
}

.history-old-value {
    color: var(--pico-del-color, #c62828);
    text-decoration: line-through;
    word-break: break-word;
}

.history-arrow {
    color: var(--pico-muted-color);
}

.history-new-value {
    color: var(--pico-ins-color, #2e7d32);
    word-break: break-word;
}

.history-load-more-wrapper {
    padding: 0.75rem 0;
    text-align: center;
}

/* ---------------------------------------------------------------------------
   Intake progress — horizontal step indicator
   --------------------------------------------------------------------------- */

.intake-progress {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    list-style: none;
    margin: 0 0 1.5rem;
    padding: 0;
    gap: 0;
    border-bottom: 1px solid var(--pico-muted-border-color);
}

.intake-progress::-webkit-scrollbar {
    display: none;
}

.intake-progress li {
    flex-shrink: 0;
    padding: 0.5rem 0.875rem;
    font-size: 0.875rem;
    color: var(--pico-muted-color);
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}

.intake-progress li a {
    color: var(--pico-muted-color);
    text-decoration: none;
}

.intake-progress li a:hover {
    color: var(--pico-color);
}

.intake-progress li[aria-current="step"] {
    color: var(--pico-color);
    font-weight: 600;
    border-bottom-color: var(--pico-primary);
}

/* ---------------------------------------------------------------------------
   Case Hub — Sub-page navigation layout
   --------------------------------------------------------------------------- */

.case-hub-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

/* Allow grid items to shrink below their content width so the nav's
   horizontal overflow scrolls internally instead of widening the page. */
.case-hub-nav,
.case-hub-content {
    min-width: 0;
}

@container main (min-width: 960px) {
    .case-hub-layout {
        grid-template-columns: 110px 1fr;
    }
}

/* -- Sidebar nav (desktop) -- */

@container main (min-width: 960px) {
    .case-hub-nav {
        position: sticky;
        top: 1rem;
        align-self: start;
    }
}

.case-hub-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

@container main (min-width: 960px) {
    .case-hub-nav ul {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    .case-hub-nav a {
        display: block;
        padding: 6px 12px;
        border-radius: 6px;
        font-size: 0.8125rem;
        color: var(--pico-color);
        text-decoration: none;
        transition: background-color 0.15s;
    }

    .case-hub-nav a:hover {
        background: var(--pico-card-background-color);
    }

    .case-hub-nav a[aria-current="page"] {
        background: var(--pico-primary-background);
        color: var(--pico-primary-inverse);
        font-weight: 600;
    }
}

/* -- Horizontal tab strip (mobile / narrow) -- */

@container main (max-width: 959px) {
    .case-hub-nav {
        position: sticky;
        top: 0;
        z-index: 10;
        background: var(--pico-background-color);
        border-bottom: 1px solid var(--pico-muted-border-color);
        margin-inline: -1rem;
        padding-inline: 1rem;
    }

    .case-hub-nav ul {
        display: flex;
        gap: 0;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        /* Scrolling-shadows technique: cover gradients sit pinned to the
           edges (background-attachment: local) and hide the shadow gradients
           (background-attachment: scroll) when scrolled to that end. The
           shadows are only visible while there is content off-screen. */
        background:
            linear-gradient(to right, var(--pico-background-color) 30%, transparent) 0 0 / 2.5rem 100% no-repeat local,
            linear-gradient(to left, var(--pico-background-color) 30%, transparent) 100% 0 / 2.5rem 100% no-repeat local,
            linear-gradient(to right, var(--hub-nav-scroll-shadow), transparent) 0 0 / 1rem 100% no-repeat scroll,
            linear-gradient(to left, var(--hub-nav-scroll-shadow), transparent) 100% 0 / 1rem 100% no-repeat scroll;
    }

    .case-hub-nav ul::-webkit-scrollbar {
        display: none;
    }

    .case-hub-nav li {
        flex-shrink: 0;
    }

    .case-hub-nav a {
        display: block;
        padding: 0.5rem 0.75rem;
        font-size: 0.8125rem;
        color: var(--pico-muted-color);
        text-decoration: none;
        white-space: nowrap;
        border-bottom: 2px solid transparent;
        transition: color 0.15s, border-color 0.15s;
    }

    .case-hub-nav a:hover {
        color: var(--pico-color);
    }

    .case-hub-nav a[aria-current="page"] {
        color: var(--pico-primary);
        border-bottom-color: var(--pico-primary);
        font-weight: 600;
    }
}

/* -- Hub content area -- */

.case-hub-content {
    min-width: 0;
}

/* ── Client Search page ── */

.client-search-form {
    margin-block-end: var(--pico-spacing);
}

.client-search-input-group {
    width: 100%;
}

.client-search-input-group input[type="search"] {
    flex: 1;
}

#search-indicator {
    display: none;
    font-size: 0.875rem;
    color: var(--pico-muted-color);
}

#search-indicator.htmx-request {
    display: inline-block;
}

.client-search-empty-state {
    color: var(--pico-muted-color);
    margin-block-start: var(--pico-spacing);
}

.client-search-truncation-notice {
    font-size: 0.875rem;
    color: var(--pico-muted-color);
    margin-block-end: var(--pico-spacing);
}

.client-search-results {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.client-search-card {
    position: relative;
    cursor: pointer;
    border: 2px solid var(--pico-card-border-color, transparent);
    border-radius: var(--pico-border-radius);
    padding: var(--pico-spacing);
    margin: 0;
    transition: border-color 0.15s, background-color 0.15s;
    outline: none;
}

.client-search-card:hover {
    border-color: var(--pico-primary);
}

.client-search-card:focus-visible {
    border-color: var(--pico-primary);
    box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus);
}

.client-search-card--selected {
    border-color: var(--pico-primary);
    background-color: var(--pico-primary-focus);
}

.client-search-card__check {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    color: var(--pico-primary);
    display: flex;
    align-items: center;
}

.client-search-card__name {
    font-size: 1rem;
    margin-block-end: 0.25rem;
    padding-inline-end: 1.75rem; /* space for check icon */
}

.client-search-card__preferred-name {
    font-weight: 400;
    color: var(--pico-muted-color);
    font-size: 0.9em;
}

.client-search-card__meta,
.client-search-card__contact,
.client-search-card__address,
.client-search-card__id {
    font-size: 0.875rem;
    margin-block-end: 0.2rem;
    color: var(--pico-muted-color);
}

.client-search-card__contact a {
    color: inherit;
}

.client-search-card__id {
    font-size: 0.8rem;
    margin-block-start: 0.5rem;
    margin-block-end: 0;
}

/* ── Client Search action bar ── */

.client-search-create {
    margin-block-start: calc(var(--pico-spacing) * 2);
}

.client-search-action-bar {
    position: sticky;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding: 0.75rem var(--pico-spacing);
    background: var(--pico-card-background-color);
    border-top: 1px solid var(--pico-card-border-color, var(--pico-muted-border-color));
    margin-block-start: var(--pico-spacing);
    z-index: 10;
}

.client-search-action-bar__label {
    font-weight: 600;
}

.client-search-action-bar__actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: center;
}

.client-search-action-bar__actions button,
.client-search-action-bar__actions a {
    margin: 0;
}


/* Split date + time field with timezone label */
.split-datetime-tz {
    display: inline-flex;
    align-items: flex-start;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.split-datetime-tz__group {
    display: inline-flex;
    flex-direction: column;
    gap: 0.25rem;
}

.split-datetime-tz input {
    width: auto;
    margin-bottom: 0;
}

.split-datetime-tz-label {
    color: var(--pico-muted-color);
    white-space: nowrap;
    margin-top: 0.125rem;
    line-height: 1.2;
    text-align: right;
}

/* ── Segmented control ───────────────────────────────────────────
   Reusable joined toggle for paired/grouped view links (e.g. List /
   Calendar, Week / Month). Apply `.segmented-control` to a container
   holding sibling <a>/<span> segments; mark the active segment with
   aria-current="page". Works for both links and the current <span>. */
.segmented-control {
    display: inline-flex;
    align-items: stretch;
    align-self: start;
    width: fit-content;
    max-width: 100%;
    gap: 0.125rem;
    padding: 0.1875rem;
    background: var(--segmented-control-track);
    border-radius: calc(var(--pico-border-radius) + 0.25rem);
}

.segmented-control > a,
.segmented-control > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2rem;
    padding: 0.25rem 0.875rem;
    border-radius: var(--pico-border-radius);
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.2;
    color: var(--pico-muted-color);
    text-decoration: none;
    white-space: nowrap;
    margin-bottom: 0;
    transition:
        background-color 0.15s,
        color 0.15s;
}

.segmented-control > a:hover {
    background: var(--segmented-control-hover);
    color: var(--pico-color);
}

.segmented-control > a:focus-visible {
    outline: 2px solid var(--pico-primary);
    outline-offset: 2px;
}

.segmented-control > [aria-current="page"] {
    background: var(--pico-primary-background);
    color: var(--pico-primary-inverse);
    font-weight: 600;
}

.segmented-control > a[aria-current="page"]:hover {
    background: var(--pico-primary-hover-background);
    color: var(--pico-primary-inverse);
}

/* ── Service calendar ─────────────────────────────────────────── */

.page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.page-header h1 {
    margin-bottom: 0;
}

.calendar-view-links {
    margin-bottom: 0.75rem;
}

.calendar-controls {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1rem;
    padding: 1rem;
    border: var(--pico-border-width) solid var(--pico-muted-border-color);
    border-radius: var(--pico-border-radius);
    background: var(--pico-card-background-color);
}

.calendar-filters-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 0.75rem;
    margin-bottom: 0.25rem;
    padding-bottom: 0.5rem;
    border-bottom: var(--pico-border-width) solid var(--pico-muted-border-color);
}

.calendar-filters-header h2 {
    margin-bottom: 0;
    font-size: 1.05rem;
}

.calendar-reset-filters {
    font-size: 0.9rem;
}

.calendar-controls .htmx-indicator {
    align-self: flex-start;
}

.calendar-filter-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0;
    border: 0;
    padding: 0;
}

.calendar-filter-row legend,
.calendar-filter-row > label[for],
.calendar-filter-row > .calendar-filter-label {
    flex: 0 0 7rem;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 0;
    padding: 0;
}

.calendar-filter-row select {
    flex: 1 1 16rem;
    max-width: 24rem;
    margin-bottom: 0;
}

.calendar-filter-options {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.75rem;
}

.calendar-filter-options label {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-bottom: 0;
    font-size: 0.9rem;
}

.calendar-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

/* Right-hand control cluster: Prev/Today/Next buttons followed by the Week/Month
   toggle, sharing the navigation bar line with the title. */
.calendar-nav-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.25rem;
}

.calendar-nav-buttons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    /* Override Pico's [role=group] sizing (width:100% + children flex:1),
       which would otherwise stretch Prev/Today/Next edge-to-edge. The
       margin-bottom reset stops Pico's group margin from pushing the
       buttons' centre above the title under align-items:center. */
    width: auto;
    margin-bottom: 0;
}

.calendar-nav-buttons a {
    margin-bottom: 0;
    flex: 0 0 auto;
}

/* The shared .segmented-control rule sets align-self:start and a bottom
   margin; in the nav bar the toggle must sit centred with the title and
   Prev/Today/Next links instead. */
.calendar-nav-controls .segmented-control {
    align-self: center;
    margin-bottom: 0;
}

.calendar-title {
    margin: 0;
    font-size: 1.25rem;
    text-align: center;
}

/* Week view — agenda columns */
.calendar-week {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0.5rem;
}

.calendar-week-day {
    border: 1px solid var(--pico-muted-border-color);
    border-radius: var(--pico-border-radius);
    background: var(--pico-card-background-color);
    min-height: 8rem;
    display: flex;
    flex-direction: column;
}

.calendar-week-day--today {
    border-color: var(--pico-primary);
    box-shadow: 0 0 0 1px var(--pico-primary);
}

.calendar-week-day-header {
    padding: 0.4rem 0.5rem;
    border-bottom: 1px solid var(--pico-muted-border-color);
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem;
}

.calendar-week-day-name {
    font-weight: 600;
}

.calendar-week-day-date {
    color: var(--pico-muted-color);
    font-size: 0.85rem;
}

.calendar-week-day-items {
    padding: 0.4rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.calendar-empty-day {
    color: var(--pico-muted-color);
    font-size: 0.8rem;
    margin: 0;
}

/* Day view — full-width single-day agenda */
.calendar-day {
    display: flex;
    flex-direction: column;
}

.calendar-day-column {
    border: 1px solid var(--pico-muted-border-color);
    border-radius: var(--pico-border-radius);
    background: var(--pico-card-background-color);
    min-height: 12rem;
    display: flex;
    flex-direction: column;
}

.calendar-day-column--today {
    border-color: var(--pico-primary);
    box-shadow: 0 0 0 1px var(--pico-primary);
}

.calendar-day-header {
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--pico-muted-border-color);
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem;
}

.calendar-day-name {
    font-weight: 600;
}

.calendar-day-date {
    color: var(--pico-muted-color);
    font-size: 0.9rem;
}

.calendar-day-items {
    padding: 0.5rem 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

/* Month view — table grid */
.calendar-month {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
}

.calendar-month th {
    text-align: left;
    font-size: 0.85rem;
    padding: 0.35rem 0.5rem;
}

.calendar-month-cell {
    border: 1px solid var(--pico-muted-border-color);
    vertical-align: top;
    height: 7rem;
    padding: 0.3rem;
}

.calendar-month-cell--outside {
    background: var(--pico-background-color);
}

/* Dim only the date number on out-of-month days, not the service labels,
   so any events that spill into adjacent months stay legible (WCAG AA). */
.calendar-month-cell--outside .calendar-month-date {
    color: var(--pico-muted-color);
}

.calendar-month-cell--today {
    box-shadow: inset 0 0 0 2px var(--pico-primary);
}

.calendar-month-date {
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.calendar-month-items {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.calendar-today-badge {
    display: inline-block;
    background: var(--pico-primary);
    color: var(--pico-primary-inverse);
    border-radius: var(--pico-border-radius);
    padding: 0 0.4rem;
    font-size: 0.75rem;
}

/* Service item button */
.calendar-item {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    width: 100%;
    text-align: left;
    padding: 0.3rem 0.45rem;
    margin: 0;
    border: 1px solid var(--pico-muted-border-color);
    border-left-width: 4px;
    border-radius: var(--pico-border-radius);
    background: var(--pico-card-background-color);
    /* Pico remaps --pico-color to the button inverse (white) inside <button>;
       --pico-contrast stays readable on the card background in both themes. */
    color: var(--pico-contrast);
    font-size: 0.8rem;
    line-height: 1.2;
    cursor: pointer;
}

.calendar-item:hover,
.calendar-item:focus-visible {
    background: var(--pico-secondary-background);
    color: var(--pico-secondary-inverse);
}

.calendar-item-title {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.calendar-item-meta {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    font-size: 0.72rem;
    color: var(--pico-muted-color);
}

.calendar-item:hover .calendar-item-meta,
.calendar-item:focus-visible .calendar-item-meta {
    color: inherit;
}

.calendar-item-time {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.calendar-more {
    font-size: 0.78rem;
}

.side-panel-summary {
    margin: 0;
}

.side-panel-participants {
    margin-top: 1.25rem;
}

.side-panel-participants h3 {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--pico-muted-color);
    margin: 0 0 0.25rem;
}

.side-panel-summary-actions {
    margin-top: 1rem;
}

/* Narrow screens: stack week columns and shrink month cells */
@media (max-width: 768px) {
    .calendar-week {
        grid-template-columns: 1fr;
    }

    .calendar-week-day {
        min-height: auto;
    }

    .calendar-month-cell {
        height: auto;
        min-height: 4.5rem;
    }

    .calendar-title {
        order: -1;
        flex-basis: 100%;
    }

    /* Once the title sits on its own row, centre the Prev/Today/Next +
       Week/Month cluster beneath it instead of leaving it left-aligned. */
    .calendar-nav-controls {
        flex-basis: 100%;
        justify-content: center;
    }
}

/* ── Soft-delete (deactivate / reactivate) ───────────────────── */

/* Inline "Inactive" pill — self-contained (shape + gray token) so it can be
   used standalone in list rows and nested detail lists. */
.pill-inactive {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 500;
    padding: 2px 10px;
    border-radius: 999px;
    line-height: 1.6;
    background: var(--badge-gray-bg);
    color: var(--badge-gray-fg);
}

/* Deactivated rows in list/nested tables — muted text to recede visually.
   Uses Pico's muted colour token (not opacity, which flattens the whole
   subtree and would drag links and the status pill below WCAG AA). Links keep
   their own primary colour and .pill-inactive keeps its own tokens, so both
   stay above the 4.5:1 contrast threshold. */
.row-inactive > * {
    color: var(--pico-muted-color);
}

/* Full-width banner shown on a deactivated record's detail page. */
.detail-banner {
    margin: 0 0 var(--pico-spacing);
    padding: 0.75rem 1rem;
    border-radius: var(--pico-border-radius);
    font-size: 0.875rem;
}
.detail-banner--inactive {
    background: var(--badge-amber-bg);
    color: var(--badge-amber-fg);
    border-left: 4px solid var(--badge-amber-fg);
}

/* ── Location card ─────────────────────────────────────────────────────── */

/* The map is tall so baseline-alignment pins the label near the top.
   Center it vertically instead. */
.detail-page .field-row:has(.location-map) {
    align-items: center;
}

.location-map {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: var(--pico-border-radius);
    overflow: hidden;
}

/* The native PlaceAutocompleteElement uses a closed shadow root, so its
   interior can't be styled directly. Its input is painted over a transparent
   background, so setting the host's background-color repaints the search field.
   Use the project form-element surface so it matches the other inputs in both
   light and dark themes. color-scheme (set in JS) still governs the text,
   icons, and the suggestions dropdown. */
.location-map gmp-place-autocomplete {
    background-color: var(--pico-form-element-background-color);
    border-radius: var(--pico-border-radius);
}

@media (max-width: 576px) {
    .location-map {
        aspect-ratio: 1 / 1;
    }
}

.map-links {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    margin: 0.5rem 0 0;
}

/* ── Google Maps controls — dark theme ──────────────────────────────────
   Maps injects white backgrounds via inline styles; !important is required.
   .gm-style-mtc  = Map/Satellite toggle buttons
   .gmnoprint      = zoom (+/−) and other controls
   img inversion   = dark-on-white icons become light-on-dark               */

/* Active (pressed) map type button — italic + underline in both themes.
   Google doesn't use aria-pressed; we add .map-type-active via JS on
   maptypeid_changed (see mapPicker in location-picker.js). */
.location-map .gm-style-mtc button.map-type-active {
    font-style: italic !important;
    text-decoration: underline !important;
}

/* Larger tap targets for Map/Satellite buttons on touch screens.
   Google's default is ~26px height; WCAG 2.2 SC 2.5.8 requires 24 × 24 px
   minimum. Extra padding brings them closer to the recommended 44px. */
@media (max-width: 576px) {
    .location-map .gm-style-mtc button {
        padding: 8px 12px !important;
        font-size: 13px !important;
    }
}

[data-theme="dark"] .location-map .gm-style-mtc button {
    background-color: var(--pico-form-element-background-color, var(--pico-card-background-color)) !important;
    color: var(--pico-color) !important;
}

[data-theme="dark"] .location-map .gmnoprint button {
    background-color: var(--pico-form-element-background-color, var(--pico-card-background-color)) !important;
}

[data-theme="dark"] .location-map .gmnoprint button img {
    filter: invert(1);
}

/* .gm-style-cc = attribution bar (Keyboard shortcuts, Terms, etc.)
   Structure: .gm-style-cc > div[position:absolute] > div[background-color]
                                                     > div (spacer)
              .gm-style-cc > div[position:relative]  (text content)
   Google injects inline background-color on a nested grandchild div;
   targeting all descendant divs is required to reach it. */
[data-theme="dark"] .location-map .gm-style-cc div {
    background-color: var(--pico-card-background-color) !important;
    color: var(--pico-muted-color) !important;
}

[data-theme="dark"] .location-map .gm-style-cc button,
[data-theme="dark"] .location-map .gm-style-cc a {
    background-color: transparent !important;
    color: var(--pico-muted-color) !important;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) .location-map .gm-style-mtc button {
        background-color: var(--pico-form-element-background-color, var(--pico-card-background-color)) !important;
        color: var(--pico-color) !important;
    }

    :root:not([data-theme]) .location-map .gmnoprint button {
        background-color: var(--pico-form-element-background-color, var(--pico-card-background-color)) !important;
    }

    :root:not([data-theme]) .location-map .gmnoprint button img {
        filter: invert(1);
    }

    :root:not([data-theme]) .location-map .gm-style-cc div {
        background-color: var(--pico-card-background-color) !important;
        color: var(--pico-muted-color) !important;
    }

    :root:not([data-theme]) .location-map .gm-style-cc button,
    :root:not([data-theme]) .location-map .gm-style-cc a {
        background-color: transparent !important;
        color: var(--pico-muted-color) !important;
    }
}