/* Enable flex */
html, body {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

:root { --nav-h: 56px; }

/* ── Bootstrap → Surgerly palette mapping ─────────────────────────────────────
   Bootstrap compiles its component colours in (primary = #0d6efd blue, links,
   tabs, pagination), so retarget them to the org palette here. One place themes
   every standard Bootstrap component app-wide; the --bs-primary/--bs-link root
   vars live in palette.css. Page-specific styles can still override locally. */
.btn-primary {
    --bs-btn-bg: var(--surgerly-primary);
    --bs-btn-border-color: var(--surgerly-primary);
    --bs-btn-hover-bg: var(--surgerly-cta);
    --bs-btn-hover-border-color: var(--surgerly-cta);
    --bs-btn-active-bg: var(--surgerly-cta);
    --bs-btn-active-border-color: var(--surgerly-cta);
    --bs-btn-disabled-bg: var(--surgerly-primary);
    --bs-btn-disabled-border-color: var(--surgerly-primary);
}
.btn-outline-primary {
    --bs-btn-color: var(--surgerly-primary);
    --bs-btn-border-color: var(--surgerly-primary);
    --bs-btn-hover-bg: var(--surgerly-primary);
    --bs-btn-hover-border-color: var(--surgerly-primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--surgerly-primary);
    --bs-btn-active-border-color: var(--surgerly-primary);
    --bs-btn-active-color: #fff;
}
.btn-link {
    --bs-btn-color: var(--surgerly-primary);
    --bs-btn-hover-color: var(--surgerly-cta);
}
/* Tabs: active = brand, inactive = muted (were Bootstrap link-blue). */
.nav-tabs .nav-link { color: var(--surgerly-dark-gray); }
.nav-tabs .nav-link:hover:not(.disabled) { color: var(--surgerly-primary); }
.nav-tabs .nav-link.active { color: var(--surgerly-primary); }
.nav-pills { --bs-nav-pills-link-active-bg: var(--surgerly-primary); }
.page-link {
    --bs-pagination-color: var(--surgerly-primary);
    --bs-pagination-hover-color: var(--surgerly-cta);
    --bs-pagination-active-bg: var(--surgerly-primary);
    --bs-pagination-active-border-color: var(--surgerly-primary);
}
/* Checkboxes / radios / switches: checked + focus follow the brand. */
.form-check-input:checked {
    background-color: var(--surgerly-primary);
    border-color: var(--surgerly-primary);
}
.form-check-input:focus {
    border-color: var(--surgerly-primary);
    box-shadow: 0 0 0 0.25rem rgba(var(--surgerly-primary-rgb), 0.25);
}
/* Input focus ring (was Bootstrap blue). Scoped per-surface rules still
   override where they exist (modals, billing panel, etc.). */
.form-control:focus,
.form-select:focus {
    border-color: var(--surgerly-primary);
    box-shadow: 0 0 0 0.25rem rgba(var(--surgerly-primary-rgb), 0.25);
}

/* ── Shared page-level tab bar ────────────────────────────────────────────────
   Canonical version of the .cc-page-tabs / .ml-page-tabs style (Channels,
   Mailing Lists). Muted tabs that flex equally with a primary underline + bold
   weight when active — instead of Bootstrap's boxed tabs. Add `page-tabs`
   alongside `nav nav-tabs` on any page-level tab bar for a consistent look. */
.page-tabs.nav-tabs {
    flex-shrink: 0;
    padding: 0;
    margin: 0;
    border-bottom: 1px solid var(--surgerly-border);
    display: flex;
    background: var(--surgerly-white);
}
.page-tabs.nav-tabs .nav-link {
    flex: 1 1 0;
    text-align: center;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    background: transparent;
    color: var(--surgerly-muted);
    padding: 12px 16px;
    font-weight: 500;
    transition: color 120ms ease, border-color 120ms ease, background 120ms ease;
}
.page-tabs.nav-tabs .nav-link:hover,
.page-tabs.nav-tabs .nav-link:focus {
    color: var(--surgerly-text);
    background: var(--surgerly-light-gray);
    isolation: isolate;
}
.page-tabs.nav-tabs .nav-link.active {
    color: var(--surgerly-primary);
    background: transparent;
    border-bottom-color: var(--surgerly-primary);
    font-weight: 600;
}

#frameContainer {
    height: calc(100vh - var(--nav-h));
    max-height: calc(100vh - var(--nav-h));
    overflow: hidden;
}

#sidebarContainer {
    flex: 0 0 auto;
    overflow: auto;
    min-height: 0;
}

#pageContainer {
    flex: 1 1 auto;
    overflow: auto;
    min-width: 0;
    min-height: 0;
}

#pageContainer > * {
  min-width: 0;
}

.navbar {
    --bs-navbar-padding-y: 0.375rem;
    background-color: var(--surgerly-primary);
    border-bottom: none;
    /* Fixed height — the logo scales to fit it (see .navbar-brand > img),
       so a tall/oddly-proportioned org logo can never resize the bar. */
    height: 3rem;
    min-height: 3rem;
    max-height: 3rem;
    position: relative;
    z-index: 10010;
    flex-wrap: nowrap; /* never let items wrap to a second row — tier system handles overflow */
}
#navbar > .container-fluid {
    flex-wrap: nowrap;
    min-width: 0;
}
.navbar-brand {
    cursor: pointer;
    flex-shrink: 0; /* brand stays solid at its natural width — org truncates before anything else */
}
.navbar-brand > img {
    opacity: 0.75;
    transition: 0.3s;
    /* Scale any logo to fit the fixed bar height, preserving aspect ratio and
       capping very wide logos. object-fit:contain letterboxes rather than
       squashing when both the height and max-width constraints bind. */
    height: 100%;
    width: auto;
    max-width: 9rem;
    object-fit: contain;
}
.navbar-brand:hover > img {
    opacity: 1.0;
}
.navbar-brand > span {
    color: var(--surgerly-text);
}

/* --- Navbar right-hand cluster --- */
.navbar-right {
    align-self: stretch;
    gap: 0;
    color: #ffffff;
    min-width: 0;
    margin-top: calc(var(--bs-navbar-padding-y) * -1);
    margin-bottom: calc(var(--bs-navbar-padding-y) * -1);
    margin-right: calc(var(--bs-gutter-x, 1.5rem) * -0.5);
}

.navbar-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 100%;
    padding: 0;
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.9);
    border-radius: 0;
    cursor: pointer;
    line-height: 0;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.navbar-icon-btn:hover,
.navbar-icon-btn:focus-visible,
.navbar-icon-btn[aria-expanded="true"] {
    background-color: rgba(255, 255, 255, 0.15);
    color: #ffffff;
    outline: none;
}
.navbar-icon-btn .material-symbols-outlined {
    display: block;
    font-size: 1.35rem;
    line-height: 1;
}
#toastContainer {
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    z-index: 10080;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    pointer-events: none;
}
#toastContainer > .toast {
    pointer-events: auto;
}
.navbar-messages-btn {
    position: relative;
}
.navbar-messages-btn-badge {
    position: absolute;
    top: 0.35rem;
    right: 0.3rem;
    min-width: 1.05rem;
    height: 1.05rem;
    padding: 0 0.3rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.95);
    color: var(--surgerly-primary);
    font-size: 0.65rem;
    font-weight: 700;
    line-height: 1.05rem;
    text-align: center;
    pointer-events: none;
}

/* Navbar action collapse tiers — controlled by JS setting data-nav-tier on #navbar.
 * Tier 1: all buttons visible, org at natural width.
 * Tier 2: messages hidden.
 * Tier 3: add + tasks + messages all hidden.
 * Tier 4: tier 3 + org name truncated with ellipsis. */
#navbarActions { align-self: stretch; }
#navbar:is([data-nav-tier="2"],[data-nav-tier="3"],[data-nav-tier="4"]) #navbarMessagesToggle { display: none !important; }
#navbar:is([data-nav-tier="3"],[data-nav-tier="4"]) #navbarAdd,
#navbar:is([data-nav-tier="3"],[data-nav-tier="4"]) #navbarTasks { display: none !important; }

/* Expandable Quick Search */
.navbar-search {
    display: flex;
    align-items: center;
    position: relative;
    height: 100%;
    flex-shrink: 0;
}
.navbar-search .navbar-search-toggle {
    transition: opacity 0.15s ease, width 0.2s ease;
}
.navbar-search.is-open .navbar-search-toggle {
    display: none;
}
.navbar-search-field {
    display: none;
    align-items: center;
    gap: 0.5rem;
    width: 520px;
    max-width: 60vw;
    height: 2.25rem;
    padding: 0 0.9rem;
    background: #ffffff;
    color: var(--surgerly-text);
    border-radius: 999px;
    box-shadow: 0 1px 2px rgba(var(--surgerly-shadow-rgb, 0,0,0), 0.08);
}
.navbar-search.is-open .navbar-search-field {
    display: flex;
}
.navbar-search-field-icon {
    font-size: 1.15rem !important;
    color: color-mix(in srgb, var(--surgerly-text) 55%, transparent);
    flex: 0 0 auto;
}
.navbar-search-input {
    flex: 1 1 auto;
    min-width: 0;
    border: none;
    background: transparent;
    color: var(--surgerly-text);
    font-size: 0.9rem;
    height: 100%;
    padding: 0;
    outline: none;
}
.navbar-search-input::placeholder {
    color: color-mix(in srgb, var(--surgerly-text) 50%, transparent);
}

.navbar-search-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 0.25rem);
    left: 0;
    min-width: 100%;
    width: 520px;
    max-width: 90vw;
    background: var(--surgerly-white);
    color: var(--surgerly-text);
    border: 1px solid var(--surgerly-border);
    border-radius: 0.75rem;
    box-shadow: 0 12px 32px rgba(var(--surgerly-shadow-rgb, 0,0,0), 0.12);
    max-height: 70vh;
    overflow: hidden;
    z-index: 1;
}
.navbar-search.is-open .navbar-search-dropdown {
    display: flex;
    flex-direction: column;
}

.navbar-search-tabs {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--surgerly-border);
}
.navbar-search-tabs.d-none { display: none; }
.navbar-search-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--surgerly-border);
    background: transparent;
    color: var(--surgerly-text);
    border-radius: 999px;
    padding: 0.3rem 0.8rem;
    font-size: 0.8rem;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.navbar-search-tab:hover {
    background: color-mix(in srgb, var(--surgerly-text) 6%, transparent);
}
.navbar-search-tab.is-active {
    background: var(--surgerly-primary);
    border-color: var(--surgerly-primary);
    color: var(--surgerly-white);
}

.navbar-search-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 0.25rem 0;
}
.navbar-search-state { width: 100%; }
.navbar-search-section-label {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--surgerly-dark-gray);
    padding: 0.5rem 0.9rem 0.25rem;
}
.navbar-search-placeholder {
    padding: 0.75rem 0.9rem;
    color: var(--surgerly-dark-gray);
    font-size: 0.875rem;
}

.navbar-search-results {
    display: flex;
    flex-direction: column;
}
.navbar-search-result {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.5rem 0.9rem;
    border: none;
    background: transparent;
    text-align: left;
    cursor: pointer;
    color: var(--surgerly-text);
    transition: background-color 0.1s ease;
}
.navbar-search-result:hover,
.navbar-search-result:focus-visible,
.navbar-search-result.is-active {
    background: color-mix(in srgb, var(--surgerly-text) 6%, transparent);
    outline: none;
}
.navbar-search-result-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: color-mix(in srgb, var(--surgerly-text) 8%, transparent);
    color: color-mix(in srgb, var(--surgerly-text) 70%, transparent);
    font-size: 1.1rem !important;
    flex: 0 0 auto;
}
.navbar-search-result-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1 1 auto;
}
.navbar-search-result-main {
    font-size: 0.9rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.navbar-search-result-meta {
    font-size: 0.78rem;
    color: var(--surgerly-dark-gray);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Identifier badges shown under the meta line on quick-search results.
   Same visual language as the Identifiers column on /staff/patients/. */
.navbar-search-id-badge-row {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
    margin-top: 4px;
}
.navbar-search-id-badge {
    --badge-accent: 156,163,175;            /* neutral slate; per-source below */
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px 2px 4px;
    border: 1px solid var(--surgerly-border, #e5e7eb);
    border-radius: 999px;
    background: var(--surgerly-surface-2, #fafafa);
    font-size: 0.72rem;
    line-height: 1;
    white-space: nowrap;
    color: var(--surgerly-text);
}
/* Fixed per source, matching the Identifiers column on /staff/patients/ — a
   Surgerly-issued ID reads as Surgerly gold regardless of the org's
   white-label, same as Pipedrive/Zanda keep their own brand. `--badge-accent`
   is an rgb TRIPLET so the "+N" chip derives via rgba with no color-mix. */
.navbar-search-id-badge--pipedrive { --badge-accent: 1,119,55; }     /* #017737 */
.navbar-search-id-badge--zanda     { --badge-accent: 104,98,249; }   /* #6862f9 */
.navbar-search-id-badge--surgerly  { --badge-accent: 190,155,90; }   /* #be9b5a */
.navbar-search-id-badge-icon {
    width: 14px;
    height: 14px;
    object-fit: contain;
    flex: 0 0 auto;
}
.navbar-search-id-badge-fallback {
    width: 14px;
    height: 14px;
    display: inline-grid;
    place-items: center;
    border-radius: 50%;
    background: var(--surgerly-border, #d1d5db);
    color: #fff;
    font-size: 0.6rem;
    font-weight: 600;
    flex: 0 0 auto;
}
.navbar-search-id-badge-value {
    font-variant-numeric: tabular-nums;
}
/* "+N" overflow count when one source holds more than one number — common for
   a shared-tenant patient, and routine for a test record booked repeatedly.
   Without it a patient's twenty Zanda numbers painted twenty chips and pushed
   the phone/email/DOB meta line out of the row. Hovering the pill lists them. */
.navbar-search-id-badge-more {
    margin-left: 1px;
    padding: 0 5px;
    border-radius: 999px;
    background: rgba(var(--badge-accent), 0.14);
    color: rgba(var(--badge-accent), 0.95);
    font-size: 0.62rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    line-height: 1.5;
}
/* ===== Shared identifier hover card =====
   Floating card for the identifier pills, rendered on <body> by
   SurgerlyIdentifiers.wireTooltip so it escapes the host's overflow (the
   quick-search dropdown is overflow:hidden). Positioned by JS; starts hidden
   and never intercepts the pointer. /staff/patients/ has its own
   `.patients-id-tip` copy of these rules scoped to that page — same card, its
   own z-index, because it sits over an ag-grid rather than the navbar. The
   z-index here has to clear the search-float dropdown (10009). */
.surgerly-id-tip {
    position: fixed;
    z-index: 10020;
    pointer-events: none;
    max-width: 260px;
    padding: 6px 10px;
    border-radius: 8px;
    background: var(--surgerly-text, #1f2937);
    color: #fff;
    font-size: 0.78rem;
    line-height: 1.35;
    box-shadow: 0 6px 20px rgba(0,0,0,.18);
    opacity: 0;
    transform: translateY(2px);
    transition: opacity .12s ease, transform .12s ease;
}
.surgerly-id-tip.is-visible { opacity: 1; transform: translateY(0); }
.surgerly-id-tip-title { font-weight: 600; }
.surgerly-id-tip-sub { opacity: .78; }
/* One line per number the source holds. The shown (searched/active) number is
   bolded and dot-marked, so the "+N" chip resolves to "here they all are, and
   this is the one on the pill". */
.surgerly-id-tip-list { margin-top: 5px; display: grid; gap: 3px; }
.surgerly-id-tip-line {
    display: flex;
    align-items: baseline;
    gap: 10px;
    justify-content: space-between;
}
.surgerly-id-tip-num { font-variant-numeric: tabular-nums; }
.surgerly-id-tip-line.is-active .surgerly-id-tip-num { font-weight: 700; }
.surgerly-id-tip-line.is-active .surgerly-id-tip-num::before {
    content: "● ";
    font-size: .6em;
    vertical-align: middle;
    opacity: .9;
}
.surgerly-id-tip-when { opacity: .7; font-size: .72rem; white-space: nowrap; }
.surgerly-id-tip-arrow {
    position: absolute;
    width: 8px;
    height: 8px;
    background: inherit;                     /* same dark as the card */
    transform: rotate(45deg);
}

/* Deal-outcome marks inside the Pipedrive pill on quick-search results — one
   per deal the patient holds, oldest first. Won and lost carry a letter; an
   open deal is a bare grey octagon, so the eye reads colour first and only
   decodes the deals that actually settled. Sized to sit inside the pill
   without growing its line box. */
.navbar-search-deal-marks {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin-left: 3px;
}
.navbar-search-deal-mark {
    width: 13px;
    height: 13px;
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 3px;
    font-size: 0.58rem;
    font-weight: 700;
    line-height: 1;
    color: #fff;
}
.navbar-search-deal-mark--won {
    background: #15803d;
}
.navbar-search-deal-mark--lost {
    background: #b91c1c;
}
/* Octagon = the "stop" read for a deal that is neither won nor lost. The
   corner cuts are deliberately shallower than a true regular octagon (25%
   rather than ~29%): at 14px a regular one antialiases into a plain circle,
   and the flatter edges are what make the shape legible at this size. */
.navbar-search-deal-mark--open {
    width: 14px;
    height: 14px;
    border-radius: 0;
    background: var(--surgerly-text-muted, #9ca3af);
    clip-path: polygon(25% 0, 75% 0, 100% 25%, 100% 75%, 75% 100%, 25% 100%, 0 75%, 0 25%);
}
.navbar-search-deal-more {
    margin-left: 1px;
    font-size: 0.6rem;
    font-weight: 600;
    color: var(--surgerly-text-muted, #6b7280);
}
/* Outcome pill on a Deals quick-search row. Solid fill so it reads down a
   list at a glance — the loud counterpart to the small marks above. It is a
   flex sibling of .navbar-search-result-text, which takes the slack, so
   `margin-left: auto` pins it to the right edge of the row. Uses the palette
   tokens rather than the older .pipelines-card-* rules: those resolve their
   LOST background through --surgerly-secondary, which renders beige, not red. */
.navbar-search-deal-pill {
    flex: 0 0 auto;
    margin-left: auto;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1.35;
    white-space: nowrap;
    color: #fff;
}
.navbar-search-deal-pill--won {
    background: var(--surgerly-success-strong, #15803d);
}
.navbar-search-deal-pill--lost {
    background: var(--surgerly-danger-strong, #b02a37);
}
/* Open is the default state, not an outcome — outlined, not filled, so a
   list of open deals stays calm and the settled ones carry the colour. */
.navbar-search-deal-pill--open {
    background: transparent;
    color: var(--surgerly-dark-gray, #6b7280);
    border: 1px solid var(--surgerly-border, #e5e7eb);
}
/* In dark the *-strong tokens are LIGHT — they serve as text colours there,
   not fills — so white ink on them collapses to about 1.9:1. Keep the loud
   solid fill and swap the ink to the theme's deep tone: the two tokens simply
   trade roles between themes, and both directions clear 7:1. */
html[data-surgerly-theme="dark"] .navbar-search-deal-pill--won {
    color: var(--surgerly-success-bg, #15301f);
}
html[data-surgerly-theme="dark"] .navbar-search-deal-pill--lost {
    color: var(--surgerly-danger-bg, #3a1d20);
}
/* Search-term highlight in Ctrl+K results — faded org primary, so staff can see
   which field matched (identifier vs phone vs name). Mirrors .patients-hl. */
.navbar-search-hl {
    background: rgba(var(--surgerly-primary-rgb, 190,155,90), 0.20);
    background: color-mix(in srgb, var(--surgerly-primary, #be9b5a) 24%, transparent);
    color: inherit;
    border-radius: 3px;
    padding: 0 1px;
}
.navbar-search-command .navbar-search-result-icon {
    background: color-mix(in srgb, var(--surgerly-primary) 18%, transparent);
    color: var(--surgerly-primary);
}
.navbar-search-command-trigger {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.82rem;
    color: var(--surgerly-primary);
    margin-right: 0.5rem;
}
.navbar-search-command-label {
    font-weight: 500;
}

/* Search backdrop */
#navbarSearchBackdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(var(--surgerly-shadow-rgb, 0,0,0), 0.35);
    z-index: 10008;
}
#navbarSearchBackdrop.is-active {
    display: block;
}

/* Float search mode — keep the toggle visible (aria-expanded="true" styles it as active) */
#navbar.search-float .navbar-search.is-open .navbar-search-toggle {
    display: inline-flex;
}

/* Float search mode: search expands as a fixed panel below the navbar */
#navbar.search-float .navbar-search.is-open .navbar-search-field {
    position: fixed;
    top: 3rem;
    left: 0;
    right: 0;
    width: auto;
    max-width: none;
    height: 3rem;
    border-radius: 0;
    box-shadow: none;
    border-bottom: 1px solid var(--surgerly-border);
    z-index: 10009;
}
#navbar.search-float .navbar-search.is-open .navbar-search-dropdown {
    position: fixed;
    top: 6rem;
    left: 0;
    right: 0;
    width: auto;
    max-width: none;
    max-height: calc(100dvh - 6rem);
    border-radius: 0;
    border-left: none;
    border-right: none;
    border-top: none;
    z-index: 10009;
}

/* Organisation dropdown trigger */
.navbar-org {
    height: 100%;
    display: flex;
    flex-shrink: 0; /* stay at natural width at tiers 1–3; tier 4 flips this to shrink+truncate */
}
.navbar-org-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    height: 100%;
    padding: 0 0.9rem;
    border: none;
    background: transparent;
    color: #ffffff;
    border-radius: 0;
    cursor: pointer;
    line-height: 0;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.navbar-org-btn:hover,
.navbar-org-btn:focus-visible,
.navbar-org-btn[aria-expanded="true"] {
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff;
    outline: none;
}
.navbar-org-name {
    font-size: 0.875rem;
    font-weight: 500;
    white-space: nowrap;
    min-width: 0;
    line-height: 1;
}

/* Tier 4: flip the org button into shrink-and-truncate mode.
 * min-width: 5rem keeps enough room for padding + chevron + "…" so the right padding
 * isn't consumed by overflowing content when the name truncates. */
#navbar[data-nav-tier="4"] .navbar-org   { flex: 1 1 auto; min-width: 5rem; overflow: hidden; }
#navbar[data-nav-tier="4"] .navbar-org-btn { width: 100%; min-width: 0; overflow: hidden; }
#navbar[data-nav-tier="4"] .navbar-org-name { overflow: hidden; text-overflow: ellipsis; }
.navbar-org-chevron {
    display: block;
    font-size: 1.25rem !important;
    line-height: 1;
    margin-left: -0.2rem;
    color: rgba(255, 255, 255, 0.85);
    flex: 0 0 auto;
}

/* Organisation dropdown menu */
.navbar-org-menu {
    min-width: 260px;
    padding: 0.5rem 0;
    border: 1px solid var(--surgerly-border);
    box-shadow: 0 8px 24px rgba(var(--surgerly-shadow-rgb, 0,0,0), 0.1);
    background: var(--surgerly-white);
    color: var(--surgerly-text);
}
.navbar-org-section-label {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--surgerly-dark-gray);
    padding: 0.1rem 0.9rem 0.3rem;
}
.navbar-org-list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 280px;
    overflow-y: auto;
}
.navbar-org-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.9rem;
    cursor: pointer;
    color: var(--surgerly-text);
    font-size: 0.9rem;
    transition: background-color 0.1s ease;
}
.navbar-org-item:hover,
.navbar-org-item:focus-visible {
    background: color-mix(in srgb, var(--surgerly-text) 6%, transparent);
    outline: none;
}
.navbar-org-item.is-active {
    color: var(--surgerly-primary);
    font-weight: 600;
}
.navbar-org-item.is-active::after {
    content: "check";
    font-family: "Material Symbols Outlined";
    margin-left: auto;
    font-size: 1.1rem;
    color: var(--surgerly-primary);
}
.navbar-org-item-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    flex: 1 1 auto;
}
.navbar-org-loading,
.navbar-org-empty {
    list-style: none;
    padding: 0.5rem 0.9rem;
    color: var(--surgerly-dark-gray);
    font-size: 0.875rem;
}

.navbar-org-divider {
    margin: 0.5rem 0;
    border: 0;
    border-top: 1px solid var(--surgerly-border);
}

.navbar-org-overflow:empty {
    display: none;
}

.navbar-org-section-label--sub {
    padding-top: 0.6rem;
}
.navbar-org-action {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.45rem 0.9rem;
    background: transparent;
    border: 0;
    color: var(--surgerly-text);
    font-size: 0.9rem;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.1s ease;
}
.navbar-org-action:hover,
.navbar-org-action:focus-visible {
    background: color-mix(in srgb, var(--surgerly-text) 6%, transparent);
    outline: none;
}
.navbar-org-action .material-symbols-outlined {
    font-size: 1.1rem;
    color: var(--surgerly-dark-gray);
}

/* Navbar action dropdowns (Add, Tasks) */
.navbar-action {
    display: flex;
    align-self: stretch;
}
.navbar-action-menu {
    min-width: 260px;
    padding: 0.5rem 0;
    border: 1px solid var(--surgerly-border);
    border-radius: 0.5rem;
    box-shadow: 0 8px 24px rgba(var(--surgerly-shadow-rgb, 0,0,0), 0.1);
    background: var(--surgerly-white);
    color: var(--surgerly-text);
}
.navbar-action-menu-header {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--surgerly-dark-gray);
    padding: 0.1rem 0.9rem 0.3rem;
}
.navbar-action-menu-empty {
    padding: 0.5rem 0.9rem;
    font-size: 0.85rem;
    color: var(--surgerly-dark-gray);
}

/* ── Mobile: keep navbar dropdowns inside the viewport + scrollable ──
   On a short/narrow phone screen the org menu (org list + shortcuts + overflow + the logout
   button at the bottom) overflows the viewport. The inner .navbar-org-list scrolled, but the
   MENU itself did not — so logout was unreachable in landscape, and in portrait the menu ran so
   far off-screen it looked like it wouldn't open. Constrain the whole menu to the viewport and
   let it scroll as a single panel (and stop the inner list capping+scrolling on its own). */
@media (max-width: 767.98px), (max-height: 600px) {
    .navbar-org-menu, .navbar-action-menu {
        max-width: calc(100vw - 1rem);
        max-height: calc(100vh - 60px);
        max-height: calc(100dvh - 60px);
        overflow-y: auto;
        overflow-x: hidden;
    }
    .navbar-org-list { max-height: none; overflow-y: visible; }
}

/* Portrait phones: the scroll rule above wasn't enough — the menu is absolutely positioned inside
   the fixed navbar and was still rendering clipped / off-screen (so it read as "won't open"). Pin
   it to the viewport (just below the 3rem navbar), overriding Popper's absolute transform, so it's
   reliably visible. Landscape already works, so this is scoped to portrait to leave it untouched. */
@media (max-width: 767.98px) and (orientation: portrait) {
    .navbar-org-menu, .navbar-action-menu {
        position: fixed !important;
        top: 3.25rem !important;
        right: 0.5rem !important;
        left: auto !important;
        bottom: auto !important;
        transform: none !important;
    }
}

/* ── Navbar tasks dropdown ──────────────────────────────────────
   Slick notification-style dropdown: header with open-count chip,
   scrollable row list with priority dot + title + due/status meta,
   chevron affordance on hover, footer link to the full Tasks page.
   Replaces the previous unstyled-text rendering. */
.navbar-action-menu:has(.navbar-tasks-header) {
    width: 320px;
    padding: 0;
    overflow: hidden;
}
.navbar-tasks-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-bottom: 1px solid var(--surgerly-border);
    background: var(--surgerly-white);
}
.navbar-tasks-header-title {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--surgerly-text);
}
.navbar-tasks-header-count {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(var(--surgerly-primary-rgb, 190, 155, 90), 0.14);
    color: var(--surgerly-primary, #be9b5a);
    font-variant-numeric: tabular-nums;
}

.navbar-tasks-list {
    max-height: 360px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.navbar-tasks-row {
    display: grid;
    grid-template-columns: 14px 1fr 18px;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border: 0;
    border-bottom: 1px solid var(--surgerly-border);
    background: transparent;
    text-align: left;
    cursor: pointer;
    transition: background 0.1s ease;
    width: 100%;
}
.navbar-tasks-row:last-child { border-bottom: 0; }
.navbar-tasks-row:hover { background: var(--surgerly-light-gray, rgba(0, 0, 0, 0.04)); }
.navbar-tasks-row:hover .navbar-tasks-row-chevron { opacity: 1; transform: translateX(2px); }

/* Priority dot — filled coloured circle, single visual cue per
   row. Title to the right pulls weight; meta (due / status) sits
   muted underneath. */
.navbar-tasks-priority {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--surgerly-border);
    flex-shrink: 0;
    margin-top: 6px;
    align-self: flex-start;
}
.navbar-tasks-priority--urgent { background: var(--surgerly-danger-strong, #b02a37); box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.18); }
.navbar-tasks-priority--high   { background: var(--surgerly-danger, #dc3545); }
.navbar-tasks-priority--medium { background: var(--surgerly-warning, #f0ad4e); }
.navbar-tasks-priority--low    { background: var(--surgerly-calendar-soft, #5bc0de); }
.navbar-tasks-priority--neutral{ background: var(--surgerly-border); }

.navbar-tasks-row-body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.navbar-tasks-row-title {
    font-size: 13px;
    font-weight: 500;
    color: var(--surgerly-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}
.navbar-tasks-row-meta {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 11px;
    color: var(--surgerly-muted, #6a6e7a);
}
.navbar-tasks-due {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-variant-numeric: tabular-nums;
}
.navbar-tasks-due .material-symbols-outlined { font-size: 13px; line-height: 1; }
.navbar-tasks-due.is-overdue {
    color: var(--surgerly-danger-strong, #b02a37);
    font-weight: 600;
}
.navbar-tasks-status {
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--surgerly-light-gray, rgba(0, 0, 0, 0.05));
    color: var(--surgerly-muted, #6a6e7a);
    font-size: 10.5px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.navbar-tasks-row-chevron {
    font-size: 18px;
    color: var(--surgerly-muted, #6a6e7a);
    opacity: 0;
    transition: opacity 0.1s ease, transform 0.1s ease;
}

/* Empty state — friendly icon + two-line copy, centered. */
.navbar-tasks-empty {
    padding: 28px 18px;
    text-align: center;
    color: var(--surgerly-muted, #6a6e7a);
}
.navbar-tasks-empty-icon {
    font-size: 32px;
    color: var(--surgerly-primary, #be9b5a);
    opacity: 0.7;
    margin-bottom: 6px;
}
.navbar-tasks-empty-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--surgerly-text);
    margin-bottom: 2px;
}
.navbar-tasks-empty-sub {
    font-size: 11.5px;
    color: var(--surgerly-muted, #6a6e7a);
}

/* Footer — single primary-tinted link aligned right. */
.navbar-tasks-footer {
    padding: 8px 14px;
    border-top: 1px solid var(--surgerly-border);
    background: var(--surgerly-white);
    text-align: right;
}
.navbar-tasks-footer a {
    font-size: 12px;
    font-weight: 600;
    color: var(--surgerly-primary, #be9b5a);
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.navbar-tasks-footer a:hover { text-decoration: underline; }

/* Toggle-button badge — small primary-tinted pill anchored INSIDE
   the button's top-right corner. Sat at top:-2px right:-2px before
   with a primary box-shadow ring; on most pages that read as a
   stray red dot floating above the navbar (the box-shadow halo
   was being clipped by the navbar's overflow). Now lives within
   the button bounds with no shadow — clean. */
#navbarTasksToggle { position: relative; }
.navbar-tasks-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    min-width: 14px;
    height: 14px;
    padding: 0 4px;
    border-radius: 999px;
    /* White pill matching the navbar's white icons, with the brand colour as
       the number (the navbar background is always the primary colour, so a
       fixed white reads correctly in both light and dark themes). */
    background: rgba(255, 255, 255, 0.95);
    color: var(--surgerly-primary);
    font-size: 9.5px;
    font-weight: 700;
    line-height: 14px;
    text-align: center;
    font-variant-numeric: tabular-nums;
    pointer-events: none;
}

/* Navbar stacks at z-index 10010 (above calendar elements); ensure modals sit above the navbar too */
.modal-backdrop { z-index: 10060; }
.modal { z-index: 10070; }

/* SurveyJS dropdown / tagbox popups (.sv-popup) default to a low z-index, so on a
   form they get clipped behind the fixed navbar (10010) — worst when the input is
   low on screen and the list opens upward. Lift above the navbar AND a modal
   (10070), since forms render in both (patient page + the deal Complete-Form modal). */
.sv-popup { z-index: 10080 !important; }

/* ----- Surgerly modal system ------------------------------------------
   Token-driven modal styling applied alongside Bootstrap's .modal classes.
   Add `.surgerly-modal` on the outermost `.modal` element and (optionally)
   a `.surgerly-modal__icon` wrapper inside the header for a context glyph.
------------------------------------------------------------------------ */
.surgerly-modal .modal-content {
    border: 1px solid var(--surgerly-border);
    border-radius: 0.75rem;
    box-shadow:
        0 10px 30px -10px rgba(9, 12, 14, 0.18),
        0 4px 12px -4px rgba(9, 12, 14, 0.08);
    overflow: hidden;
    background: var(--surgerly-white);
}

.surgerly-modal .modal-content::before {
    content: "";
    display: block;
    height: 3px;
    background: linear-gradient(
        90deg,
        var(--surgerly-primary),
        color-mix(in srgb, var(--surgerly-primary) 55%, var(--surgerly-secondary))
    );
}

.surgerly-modal .modal-header {
    border-bottom: 1px solid var(--surgerly-border);
    padding: 0.9rem 1.25rem;
    gap: 0.75rem;
    align-items: center;
    background: var(--surgerly-white);
}

.surgerly-modal__icon {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.5rem;
    background: color-mix(in srgb, var(--surgerly-primary) 14%, transparent);
    color: var(--surgerly-primary);
}

.surgerly-modal__icon .material-symbols-outlined {
    font-size: 1.15rem;
    line-height: 1;
}

.surgerly-modal .modal-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--surgerly-text);
    line-height: 1.3;
    margin: 0;
}

.surgerly-modal .modal-title small {
    font-weight: 400;
    color: color-mix(in srgb, var(--surgerly-text) 55%, transparent);
    font-size: 0.8rem;
}

.surgerly-modal .modal-header .btn-close {
    margin: 0 0 0 auto;
    opacity: 0.55;
    transition: opacity 0.15s ease;
}
.surgerly-modal .modal-header .btn-close:hover {
    opacity: 1;
}

.surgerly-modal .modal-body {
    padding: 1.25rem;
    color: var(--surgerly-text);
}

.surgerly-modal__hint {
    font-size: 0.8rem;
    color: color-mix(in srgb, var(--surgerly-text) 60%, transparent);
    margin: 0 0 0.85rem 0;
    line-height: 1.4;
}

.surgerly-modal .modal-body .form-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: color-mix(in srgb, var(--surgerly-text) 78%, transparent);
    margin-bottom: 0.35rem;
}

.surgerly-modal .modal-body .form-control,
.surgerly-modal .modal-body .form-select {
    border-radius: 0.5rem;
    border-color: var(--surgerly-border);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.surgerly-modal .modal-body .form-control:focus,
.surgerly-modal .modal-body .form-select:focus {
    border-color: var(--surgerly-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--surgerly-primary) 22%, transparent);
}

.surgerly-modal .modal-body .form-text {
    font-size: 0.75rem;
    color: color-mix(in srgb, var(--surgerly-text) 55%, transparent);
}

.surgerly-modal .modal-footer {
    border-top: 1px solid var(--surgerly-border);
    padding: 0.75rem 1.25rem;
    gap: 0.5rem;
    background: color-mix(in srgb, var(--surgerly-text) 2.5%, var(--surgerly-white));
}

/* Inline validation pill — visually distinct from generic .text-danger */
.surgerly-modal__error {
    background: color-mix(in srgb, var(--surgerly-danger, #dc3545) 11%, transparent);
    color: var(--surgerly-danger-strong, #a31f2b);
    border: 1px solid color-mix(in srgb, var(--surgerly-danger, #dc3545) 24%, transparent);
    border-radius: 0.5rem;
    padding: 0.45rem 0.65rem;
    font-size: 0.78rem;
    line-height: 1.35;
}

/* Compact body padding modifier (use on the outer .modal element) */
.surgerly-modal--compact .modal-body { padding: 1rem; }

/* Subtle scale-in on open layered over Bootstrap's fade */
.surgerly-modal.fade .modal-dialog {
    transition: transform 0.18s ease-out;
    transform: translateY(-6px) scale(0.985);
}
.surgerly-modal.show .modal-dialog {
    transform: translateY(0) scale(1);
}

/* ----- Calc formula editor (migrated from reporting.html inline <style>) -- */
#calc-formula-wrapper { position: relative; }

#calc-formula-wrapper .calc-formula-highlight {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    pointer-events: none;
    overflow: hidden;
    white-space: pre-wrap;
    word-wrap: break-word;
    background: transparent;
    border-color: transparent;
    color: transparent;
    z-index: 1;
}

#calc-formula-wrapper .calc-formula-input {
    position: relative;
    background: transparent;
    z-index: 2;
    caret-color: var(--surgerly-text);
}

.calc-hl-col { color: var(--surgerly-info, #0d6efd); font-weight: 600; }
.calc-hl-fn  { color: var(--surgerly-calendar, #6f42c1); font-weight: 600; }
.calc-hl-str { color: var(--surgerly-success, #198754); }
.calc-hl-num { color: var(--surgerly-danger, #d63384); }
.calc-hl-op  { color: var(--surgerly-grey-500, #6c757d); font-weight: 700; }
.calc-hl-err { text-decoration: wavy underline var(--surgerly-danger, #dc3545); }

#calc-columns-ul .list-group-item[draggable="true"] { cursor: grab; }
#calc-columns-ul .list-group-item.drag-over { border-top: 2px solid var(--surgerly-primary); }

#calc-autocomplete {
    position: absolute;
    z-index: 10;
    width: 100%;
}
#calc-autocomplete .dropdown-item { cursor: pointer; padding: 0.2rem 0.5rem; }
#calc-autocomplete .dropdown-item:hover,
#calc-autocomplete .dropdown-item.active {
    background-color: color-mix(in srgb, var(--surgerly-primary) 14%, transparent);
    color: var(--surgerly-text);
}

/* Messages push panel (mirrors .cal-panel push behavior inside #frameContainer) */
.navbar-messages-panel {
    width: 0;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    border-left: 0 solid var(--surgerly-border);
    background: var(--surgerly-white);
    transition: width 0.2s ease, border-left-width 0.2s;
}
.navbar-messages-panel.is-open {
    width: 420px;
    border-left-width: 1px;
}
.navbar-messages-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0.85rem;
    border-bottom: 1px solid var(--surgerly-border);
    flex-shrink: 0;
}
.navbar-messages-tabs {
    padding: 0 1rem;
    border-bottom: 1px solid var(--surgerly-border);
    flex: 0 0 auto;
}
.navbar-messages-tabs .nav-link {
    color: var(--surgerly-text);
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    padding: 0.6rem 0.9rem;
    font-weight: 500;
}
.navbar-messages-tabs .nav-link:hover {
    color: var(--surgerly-primary);
    background: transparent;
}
.navbar-messages-tabs .nav-link.active {
    color: var(--surgerly-primary);
    border-bottom-color: var(--surgerly-primary);
    background: transparent;
}
.navbar-messages-tab-content {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.navbar-messages-tab-content > .tab-pane {
    flex: 1 1 auto;
    min-height: 0;
}
.navbar-messages-tab-content > .tab-pane:not(.show) { display: none; }
.navbar-messages-tab-content > #navbarMessagesExternal {
    padding: 1rem;
}
.navbar-messages-placeholder {
    font-size: 0.85rem;
    color: var(--surgerly-dark-gray);
    padding: 0.5rem 0;
}

/* The tab pane needs to participate in the flex column so list/compose/thread can fill it */
#navbarMessagesInternal {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 0;
}
#navbarMessagesInternal.tab-pane:not(.show) { display: none; }
#navbarMessagesInternal > .navbar-messages-internal-list,
#navbarMessagesInternal > .navbar-messages-internal-compose,
#navbarMessagesInternal > .navbar-messages-internal-thread {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
#navbarMessagesInternal > .d-none { display: none !important; }

.navbar-messages-internal-actions {
    padding: 0.75rem 1rem 0.5rem;
    flex-shrink: 0;
}
.navbar-messages-internal-actions .btn .material-symbols-outlined {
    font-size: 1.1rem;
    vertical-align: middle;
    margin-right: 0.25rem;
}
.navbar-messages-internal-conversations {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 0 0.5rem 0.75rem;
}
.navbar-messages-conversation {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.6rem 0.6rem;
    background: transparent;
    border: 0;
    border-radius: 0.4rem;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.1s ease;
}
.navbar-messages-conversation:hover,
.navbar-messages-conversation:focus-visible {
    background: color-mix(in srgb, var(--surgerly-text) 6%, transparent);
    outline: none;
}
.navbar-messages-avatar {
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--surgerly-primary);
    color: var(--surgerly-white);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
}
.navbar-messages-conversation-body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.navbar-messages-conversation-row {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
}
.navbar-messages-conversation-name {
    font-weight: 600;
    font-size: 0.9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.navbar-messages-conversation-time {
    margin-left: auto;
    font-size: 0.7rem;
    color: var(--surgerly-dark-gray);
    flex-shrink: 0;
}
.navbar-messages-conversation-preview {
    font-size: 0.8rem;
    color: var(--surgerly-dark-gray);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.navbar-messages-conversation.is-unread .navbar-messages-conversation-preview {
    color: var(--surgerly-text);
    font-weight: 500;
}
.navbar-messages-unread-badge {
    margin-left: 0.4rem;
    background: var(--surgerly-primary);
    color: var(--surgerly-white);
    border-radius: 999px;
    padding: 0 0.4rem;
    font-size: 0.7rem;
    font-weight: 600;
    flex-shrink: 0;
}

.navbar-messages-internal-subheader {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--surgerly-border);
    flex-shrink: 0;
}
.navbar-messages-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.9rem;
    height: 1.9rem;
    border: 0;
    background: transparent;
    border-radius: 0.35rem;
    cursor: pointer;
    color: var(--surgerly-text);
}
.navbar-messages-back:hover {
    background: color-mix(in srgb, var(--surgerly-text) 6%, transparent);
}
.navbar-messages-back .material-symbols-outlined { font-size: 1.15rem; }

.navbar-messages-internal-compose-search {
    padding: 0.5rem 0.75rem;
    flex-shrink: 0;
}
.navbar-messages-internal-peers {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 0 0.5rem 0.75rem;
}

.navbar-messages-internal-thread-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 0.75rem 0.9rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.navbar-messages-bubble {
    width: fit-content;
    max-width: 80%;
    padding: 0.4rem 0.65rem;
    border-radius: 0.75rem;
    font-size: 0.85rem;
    line-height: 1.3;
    word-wrap: break-word;
}
.navbar-messages-bubble.is-me {
    align-self: flex-end;
    background: var(--surgerly-primary);
    color: var(--surgerly-white);
    border-bottom-right-radius: 0.2rem;
}
.navbar-messages-bubble.is-them {
    align-self: flex-start;
    background: color-mix(in srgb, var(--surgerly-text) 8%, transparent);
    color: var(--surgerly-text);
    border-bottom-left-radius: 0.2rem;
}
.navbar-messages-bubble-text {
    white-space: pre-wrap;
    word-break: break-word;
}
.navbar-messages-bubble-time {
    display: block;
    font-size: 0.65rem;
    opacity: 0.75;
    margin-top: 0.15rem;
}
.navbar-messages-bubble.is-me .navbar-messages-bubble-time {
    text-align: right;
}
.navbar-messages-bubble.is-them .navbar-messages-bubble-time {
    text-align: left;
}
.navbar-messages-day-divider {
    align-self: center;
    font-size: 0.7rem;
    color: var(--surgerly-dark-gray);
    margin: 0.35rem 0;
}

.navbar-messages-internal-composer {
    position: relative;
    display: flex;
    gap: 0.4rem;
    align-items: flex-end;
    padding: 0.5rem 0.75rem 0.75rem;
    border-top: 1px solid var(--surgerly-border);
    flex-shrink: 0;
}
.navbar-messages-mention-picker {
    position: absolute;
    left: 0.75rem;
    right: 0.75rem;
    bottom: calc(100% - 0.25rem);
    max-height: 14rem;
    overflow-y: auto;
    background: var(--surgerly-white);
    border: 1px solid var(--surgerly-border);
    border-radius: 0.5rem;
    box-shadow: 0 8px 24px rgba(var(--surgerly-shadow-rgb, 0,0,0), 0.12);
    z-index: 5;
    padding: 0.25rem;
}
.navbar-messages-mention-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.55rem;
    cursor: pointer;
    border: 0;
    background: transparent;
    width: 100%;
    text-align: left;
    font-size: 0.85rem;
    color: var(--surgerly-text);
    border-radius: 0.35rem;
}
.navbar-messages-mention-item:hover,
.navbar-messages-mention-item.is-active {
    background: color-mix(in srgb, var(--surgerly-text) 6%, transparent);
    outline: none;
}
.navbar-messages-mention-item-icon {
    color: var(--surgerly-primary);
    font-size: 1.1rem;
    flex-shrink: 0;
}
.navbar-messages-mention-item-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.navbar-messages-mention-item-name {
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.navbar-messages-mention-item-meta {
    font-size: 0.7rem;
    color: var(--surgerly-dark-gray);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.navbar-messages-mention-placeholder {
    padding: 0.5rem 0.65rem;
    font-size: 0.75rem;
    color: var(--surgerly-dark-gray);
}
.navbar-messages-mention-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.05rem 0.45rem 0.05rem 0.35rem;
    background: color-mix(in srgb, var(--surgerly-primary) 15%, transparent);
    color: var(--surgerly-primary);
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.8rem;
    line-height: 1.35;
    white-space: nowrap;
    text-decoration: none;
    vertical-align: baseline;
}
.navbar-messages-mention-chip .material-symbols-outlined {
    font-size: 0.95rem;
    line-height: 1;
}
a.navbar-messages-mention-chip {
    cursor: pointer;
}
a.navbar-messages-mention-chip:hover {
    background: color-mix(in srgb, var(--surgerly-primary) 28%, transparent);
    color: var(--surgerly-primary);
    text-decoration: none;
}
span.navbar-messages-mention-chip {
    user-select: none;
    cursor: default;
}
.navbar-messages-bubble.is-me .navbar-messages-mention-chip {
    background: color-mix(in srgb, var(--surgerly-white) 25%, transparent);
    color: var(--surgerly-white);
}
.navbar-messages-bubble.is-me a.navbar-messages-mention-chip:hover {
    background: color-mix(in srgb, var(--surgerly-white) 40%, transparent);
    color: var(--surgerly-white);
}
.navbar-messages-composer-editor {
    position: relative;
    flex: 1 1 auto;
    min-height: calc(1.5em + 0.9rem);
    max-height: 6rem;
    overflow-y: auto;
    white-space: pre-wrap;
    word-break: break-word;
    line-height: 1.5;
    cursor: text;
}
.navbar-messages-composer-editor:focus {
    border-color: var(--surgerly-primary);
    box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--surgerly-primary) 25%, transparent);
    outline: none;
}
.navbar-messages-composer-editor.is-empty::before {
    content: attr(data-placeholder);
    color: var(--surgerly-dark-gray);
    pointer-events: none;
    position: absolute;
    top: 0.375rem;
    left: 0.5rem;
}
.navbar-messages-internal-compose-search .form-control:focus {
    border-color: var(--surgerly-primary);
    box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--surgerly-primary) 25%, transparent);
}
.navbar-messages-internal-composer .btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.navbar-messages-internal-composer .btn .material-symbols-outlined {
    font-size: 1.1rem;
}

.navbar-messages-internal-actions .btn-primary,
.navbar-messages-internal-composer .btn-primary {
    background-color: var(--surgerly-primary);
    border-color: var(--surgerly-primary);
    color: var(--surgerly-white);
}
.navbar-messages-internal-actions .btn-primary:hover,
.navbar-messages-internal-actions .btn-primary:focus,
.navbar-messages-internal-composer .btn-primary:hover,
.navbar-messages-internal-composer .btn-primary:focus {
    background-color: color-mix(in srgb, var(--surgerly-primary) 85%, black);
    border-color: color-mix(in srgb, var(--surgerly-primary) 85%, black);
    color: var(--surgerly-white);
}
.navbar-messages-internal-actions .btn-primary:active,
.navbar-messages-internal-composer .btn-primary:active {
    background-color: color-mix(in srgb, var(--surgerly-primary) 75%, black) !important;
    border-color: color-mix(in srgb, var(--surgerly-primary) 75%, black) !important;
    color: var(--surgerly-white) !important;
}
.navbar-messages-internal-actions .btn-primary:focus-visible,
.navbar-messages-internal-composer .btn-primary:focus-visible {
    box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--surgerly-primary) 40%, transparent);
}
.navbar-messages-internal-actions .btn-primary:disabled,
.navbar-messages-internal-composer .btn-primary:disabled {
    background-color: var(--surgerly-primary);
    border-color: var(--surgerly-primary);
    color: var(--surgerly-white);
    opacity: 0.5;
}

.sidebar {
    width: 256px!important;
    background-color: var(--surgerly-background);
}
.sidebarList {
    padding: 0;
    margin: 0;
    list-style-type: none;
}
.sidebarItem {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.sidebarItem:has(> ul) .surgerly-dropdown {
    margin-left: 0.5rem;
    width: 1.25rem;
    line-height: 100%;
    transform: rotate(-90deg);
    transition: transform .35s ease;
    transform-origin: .5em 50%;
}
.sidebarItem:has(> ul) .surgerly-dropdown[aria-expanded=true] {
    transform: rotate(0deg);
}
.sidebarItem + .sidebarItem {
    padding-top: 0.5rem;
}
.sidebarDropdownList {
    padding: 0;
    margin: 0;
    margin-left: 3rem;
    padding-left: 0.5rem;
    border-left: 1px solid var(--surgerly-text);
    list-style-type: none;
}
.sidebarItem > .btn, .sidebarDropdownItem > .btn {
    color: var(--surgerly-text);
    border: 0!important;
    opacity: 0.7;
}
.sidebarItem > .btn:hover, .sidebarItem > .btn.active, .sidebarDropdownItem > .btn:hover, .sidebarDropdownItem > .btn.active, .sidebarItem:has(> ul > .sidebarItem > .btn.active) > .btn {
    color: var(--surgerly-primary);
    border: 0;
    opacity: 1;
}

/* Parent-of-active-sub-item: a muted variant of the active colour so it's
   clear which category the active link belongs to without competing with
   the active link itself. JS adds `.parent-active` via highlightLink(). */
.sidebarItem > .btn.parent-active {
    color: var(--surgerly-primary);
    opacity: 0.55;
}

/* ── Sidebar section labels (Work / Outreach / Admin / Power user) ──
   Renders as a small uppercase title with a faint top-border so each
   group reads as a chunk rather than a flat list of 11 items. The
   first label is unbordered (no extra line above the very first
   section). In collapsed mode we keep the border-top as a thin
   divider but hide the text so the icon-only sidebar still shows
   the grouping at a glance. */
.sidebar-section {
    padding: 0.75rem 0.5rem 0.25rem;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--surgerly-text);
    opacity: 0.5;
    border-top: 1px solid var(--surgerly-border);
    margin-top: 0.5rem;
    list-style: none;
    pointer-events: none;
    user-select: none;
}
#sidebarContainer.staff-sidebar-collapsed .sidebar-section {
    padding: 0.5rem 0.25rem 0;
    margin: 0.25rem 0.25rem 0;
    font-size: 0;        /* hide the label text */
    line-height: 0;
    height: 1px;
    /* border-top stays as the thin divider */
}

.surgerly-link {
    opacity: 0.5;
    cursor: pointer;
    transition: 0.2s;
}
.surgerly-link:hover {
    opacity: 1;
}

li .sidebarItem {
    margin-left: 1rem;
    padding-left: 0;
    border-left: 2px solid var(--surgerly-secondary);
}
li .sidebarItem button {
    padding-top: 0.125rem;
    padding-bottom: 0.125rem;
    min-width: 0;
    overflow: hidden;
}
li .sidebarItem span {
    font-size: 0.8rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
    text-align: left;
}

/* Split root fills available space */
#detailsSplit {
  height: 100%;
  min-height: 0;        /* enables children to scroll properly */
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Each pane can scroll internally */
#metadata,
#entityData {
  min-width: 0;
  min-height: 0;        /* critical for vertical flex scrolling */
  overflow: auto;
  display: flex;
  flex-direction: column;
}

/* Split.js gutter for vertical split */
.gutter {
    background-color: var(--surgerly-border);
    background-repeat: no-repeat;
    background-position: 50%;
}

.gutter.gutter-vertical {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAFAQMAAABo7865AAAABlBMVEVHcEzMzMzyAv2sAAAAAXRSTlMAQObYZgAAABBJREFUeF5jOAMEEAIEEFwAn3kMwcB6I2AAAAAASUVORK5CYII=');
    cursor: row-resize;
}

/* Optional: bigger touch target on mobile */
@media (pointer: coarse) {
  .gutter.gutter-vertical { height: 12px; }
}

.tab-content > .tab-pane:not(.active) { display: none !important; }

.toolbar-button {
    height:2rem;
    width:2rem;
    border: 0px;
    border-radius: 0px;
}

/* Toolbar-button variant that carries a text label next to its icon
   (e.g. the bulk "Copy N UUIDs" action) — same height/flat look as
   .toolbar-button, but auto width so the count label fits. Must come
   after .toolbar-button so its width wins. */
.toolbar-button--label {
    width: auto;
    padding: 0 .5rem;
    white-space: nowrap;
}

/* Helpful: disable gradient so colors stay solid like the palette */
.btn { --bs-gradient: none; }

/* ===== Primary (filled) ===================================== */
.btn-surgerly {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--surgerly-calendar-soft, #648fb2);
  --bs-btn-border-color: var(--surgerly-calendar-soft, #648fb2);

  /* explicit hover/active shades (precomputed hex) */
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--surgerly-calendar, #587fa0);         /* ~10% darker */
  --bs-btn-hover-border-color: var(--surgerly-calendar, #587fa0);

  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--surgerly-calendar, #4c7090);        /* ~17% darker */
  --bs-btn-active-border-color: var(--surgerly-calendar, #4c7090);

  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--surgerly-calendar-subtle, #cfdbe6);      /* softened primary */
  --bs-btn-disabled-border-color: var(--surgerly-calendar-subtle, #cfdbe6);

  --bs-btn-focus-shadow-rgb: 100,143,178; /* var(--surgerly-calendar-soft, #648fb2) */
}

/* Safety: hard overrides in case another CSS wins on :hover/:active */
.btn.btn-surgerly:hover,
.btn.btn-surgerly:focus:hover {
  color: #fff !important;
  background-color: var(--surgerly-calendar, #587fa0) !important;
  border-color: var(--surgerly-calendar, #587fa0) !important;
}
.btn.btn-surgerly:active,
.btn.btn-surgerly.active,
.show > .btn.btn-surgerly.dropdown-toggle {
  color: #fff !important;
  background-color: var(--surgerly-calendar, #4c7090) !important;
  border-color: var(--surgerly-calendar, #4c7090) !important;
}

/* ===== Primary (outline) ==================================== */
.btn-outline-surgerly {
  --bs-btn-color: var(--surgerly-calendar-soft, #648fb2);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: var(--surgerly-calendar-soft, #648fb2);

  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--surgerly-calendar-soft, #648fb2);
  --bs-btn-hover-border-color: var(--surgerly-calendar-soft, #648fb2);

  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--surgerly-calendar, #4c7090);
  --bs-btn-active-border-color: var(--surgerly-calendar, #4c7090);

  --bs-btn-disabled-color: var(--surgerly-grey-400, #9eb8cf);
  --bs-btn-disabled-border-color: var(--surgerly-grey-300, #b8cbe0);

  --bs-btn-focus-shadow-rgb: 100,143,178;
}
.btn.btn-outline-surgerly:hover,
.btn.btn-outline-surgerly:focus:hover {
  color: #fff !important;
  background-color: var(--surgerly-calendar-soft, #648fb2) !important;
  border-color: var(--surgerly-calendar-soft, #648fb2) !important;
}
.btn.btn-outline-surgerly:active,
.btn.btn-outline-surgerly.active,
.show > .btn.btn-outline-surgerly.dropdown-toggle {
  color: #fff !important;
  background-color: var(--surgerly-calendar, #4c7090) !important;
  border-color: var(--surgerly-calendar, #4c7090) !important;
}

/* ===== Secondary (filled) =================================== */
.btn-surgerly-secondary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--surgerly-success-border, #a4c0d7);
  --bs-btn-border-color: var(--surgerly-success-border, #a4c0d7);

  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--surgerly-calendar-soft, #91b1cc);   /* darker */
  --bs-btn-hover-border-color: var(--surgerly-calendar-soft, #91b1cc);

  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--surgerly-calendar-soft, #7fa2c1);  /* more dark */
  --bs-btn-active-border-color: var(--surgerly-calendar-soft, #7fa2c1);

  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--surgerly-grey-200, #d9e4ed);
  --bs-btn-disabled-border-color: var(--surgerly-grey-200, #d9e4ed);

  --bs-btn-focus-shadow-rgb: 164,192,215;
}
.btn.btn-surgerly-secondary:hover,
.btn.btn-surgerly-secondary:focus:hover {
  color:#fff !important; background:var(--surgerly-calendar-soft, #91b1cc) !important; border-color:var(--surgerly-calendar-soft, #91b1cc) !important;
}
.btn.btn-surgerly-secondary:active,
.btn.btn-surgerly-secondary.active,
.show > .btn.btn-surgerly-secondary.dropdown-toggle {
  color:#fff !important; background:var(--surgerly-calendar-soft, #7fa2c1) !important; border-color:var(--surgerly-calendar-soft, #7fa2c1) !important;
}

/* ===== Accent (filled) – optional =========================== */
.btn-surgerly-accent {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--surgerly-calendar-soft, #79a6cb);
  --bs-btn-border-color: var(--surgerly-calendar-soft, #79a6cb);

  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--surgerly-calendar-soft, #6c97ba);
  --bs-btn-hover-border-color: var(--surgerly-calendar-soft, #6c97ba);

  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--surgerly-calendar, #5f88a9);
  --bs-btn-active-border-color: var(--surgerly-calendar, #5f88a9);

  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--surgerly-calendar-subtle, #cfe0ed);
  --bs-btn-disabled-border-color: var(--surgerly-calendar-subtle, #cfe0ed);

  --bs-btn-focus-shadow-rgb: 121,166,203;
}
.btn.btn-surgerly-accent:hover,
.btn.btn-surgerly-accent:focus:hover {
  color:#fff !important; background:var(--surgerly-calendar-soft, #6c97ba) !important; border-color:var(--surgerly-calendar-soft, #6c97ba) !important;
}
.btn.btn-surgerly-accent:active,
.btn.btn-surgerly-accent.active,
.show > .btn.btn-surgerly-accent.dropdown-toggle {
  color:#fff !important; background:var(--surgerly-calendar, #5f88a9) !important; border-color:var(--surgerly-calendar, #5f88a9) !important;
}

.placeholder {
    opacity: 0.5;
    animation: fadeInOut 2s ease-in-out infinite;
}
.placeholder-button.text-bg-secondary {
    opacity: 0.5;
    animation: fadeInOut 2s ease-in-out infinite;
}
@keyframes fadeInOut {
    0%, 100% { opacity: 0.25; }
    50%      { opacity: 0.75; }
}

#pastAppointmentsList .appointment-date, #pastAppointmentsList .appointment-banner, #pastAppointmentsList .appointment-details {
    opacity: 0.4;
    filter: grayscale(0.5);
}

.datepicker-available:not(.-selected-) {
    background-color: rgba(199, 233, 186, 0.5);
}

.surgerly-fade-1500 {
    opacity: 0;
    transition: 1.5s;
}
.surgerly-fade-1000 {
    opacity: 0;
    transition: 1.0s;
}
[class^="surgerly-fade-"].surgerly-show {
    opacity: 1!important;
}

#surgerly-services-container {
    height: 100vh;
    transition: 1s;
}
 
#surgerly-services-container:has(> #booking-divider:not(.surgerly-show)) {
    height: 0px;
}

.offcanvas.offcanvas-bottom {
    height: auto!important;
}

.offcanvas-body {
    transition: 0.3s;
    min-height: 0px;
}

.change-slot {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    aspect-ratio: 1;
    border: 0;
    background-color: transparent;
}
.change-slot > img {
    transition: 0.3s;
}
.change-slot:hover > img {
    filter: invert(1)
}

.animation-ctn{
    text-align:center;
}

    @-webkit-keyframes checkmark {
    0% {
        stroke-dashoffset: 100px
    }

    100% {
        stroke-dashoffset: 200px
    }
}

@-ms-keyframes checkmark {
    0% {
        stroke-dashoffset: 100px
    }

    100% {
        stroke-dashoffset: 200px
    }
}

@keyframes checkmark {
    0% {
        stroke-dashoffset: 100px
    }

    100% {
        stroke-dashoffset: 0px
    }
}

@-webkit-keyframes checkmark-circle {
    0% {
        stroke-dashoffset: 480px

    }

    100% {
        stroke-dashoffset: 960px;
    
    }
}

@-ms-keyframes checkmark-circle {
    0% {
        stroke-dashoffset: 240px
    }

    100% {
        stroke-dashoffset: 480px
    }
}

@keyframes checkmark-circle {
    0% {
        stroke-dashoffset: 480px 
    }

    100% {
        stroke-dashoffset: 960px
    }
}

@keyframes colored-circle { 
    0% {
        opacity:0
    }

    100% {
        opacity:100
    }
}

/* other styles */
/* .svg svg {
    display: none
}
*/
.inlinesvg .svg svg {
    display: inline
}

/* .svg img {
    display: none
} */

.icon--order-success svg polyline {
    -webkit-animation: checkmark 0.25s ease-in-out 0.7s backwards;
    animation: checkmark 0.25s ease-in-out 0.7s backwards
}

.icon--order-success svg circle {
    -webkit-animation: checkmark-circle 0.6s ease-in-out backwards;
    animation: checkmark-circle 0.6s ease-in-out backwards;
}
.icon--order-success svg circle#colored {
    -webkit-animation: colored-circle 0.6s ease-in-out 0.7s backwards;
    animation: colored-circle 0.6s ease-in-out 0.7s backwards;
} 

#modalSuccessText1{
    -webkit-animation: 2s ease 0s normal forwards 1 fadein;
    animation: 2s ease 0s normal forwards 1 fadein;
}

@keyframes fadein{
    0% { opacity:0; }
    66% { opacity:0; }
    100% { opacity:1; }
}

@-webkit-keyframes fadein{
    0% { opacity:0; }
    66% { opacity:0; }
    100% { opacity:1; }
}

#modalSuccessText2{
    -webkit-animation: 3s ease 0s normal forwards 1 fadein;
    animation: 3s ease 0s normal forwards 1 fadein;
}

@keyframes fadein{
    0% { opacity:0; }
    66% { opacity:0; }
    100% { opacity:1; }
}

@-webkit-keyframes fadein{
    0% { opacity:0; }
    66% { opacity:0; }
    100% { opacity:1; }
}

#modalSuccessText3{
    -webkit-animation: 4s ease 0s normal forwards 1 fadein;
    animation: 4s ease 0s normal forwards 1 fadein;
}

@keyframes fadein{
    0% { opacity:0; }
    66% { opacity:0; }
    100% { opacity:1; }
}

@-webkit-keyframes fadein{
    0% { opacity:0; }
    66% { opacity:0; }
    100% { opacity:1; }
}

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}

.datepicker-available:not(.-selected-) {
    background-color: rgba(199, 233, 186, 0.5);
}

#profile-container {
    border-radius: 0.5rem; 
    position: relative;
    max-width: 600px;
}
#scheduler-container {
    max-width: 600px;
}

#pageContainer {
  flex-grow: 1;
  overflow-x: hidden;          /* Prevent scrollbars inside this container */
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 100%;           /* Ensure it never exceeds viewport width */
  height: 100%;
  white-space: normal;       /* Allow word wrapping */
  word-wrap: break-word;     /* Break long words if needed */
}

.block-remove,
.block-add-condition,
.block-add-linked {
    padding: 0;              /* or 2px if you need breathing room   */
    line-height: 1;          /* match icon line height              */
    display: inline-flex;    /* lets you center the icon perfectly */
    align-items: center;
    justify-content: center;
}

.report-loading-overlay {
    position: fixed;          /* cover whole viewport */
    inset: 0;
    background: rgba(var(--surgerly-dark-gray-rgb), 0.3);
    display: none;            /* hidden by default */
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.report-loading-overlay.show {
    display: flex;
}

.report-loading-inner {
    padding: 1.5rem 2rem;
    border-radius: 0.75rem;
    background: var(--surgerly-white);
    box-shadow: 0 10px 30px rgba(var(--surgerly-shadow-rgb, 0,0,0), 0.15);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    min-width: 220px;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.report-loading-spinner {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 3px solid var(--surgerly-border);
    border-top-color: var(--surgerly-info, #2b7cff);
    animation: report-spin 0.7s linear infinite;
}

.report-loading-text {
    font-size: 0.95rem;
    color: var(--surgerly-text);
}

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


.logo-fill-container {
    position: relative;
    width: 100px;
    height: 100px;
    margin: 0 auto 20px auto;
}

.logo-base {
    display: block;
    width: 100%;
    height: 100%;
    opacity: 0.2;
}

.logo-clipper {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0%;
    overflow: hidden;
    animation: fill-slide 2s ease-in-out infinite;
}

.logo-fill {
    width: 100px;
    height: 100px;
    transform: translateX(-100px);
    /* filter: invert(38%) sepia(54%) saturate(3082%) hue-rotate(193deg) brightness(102%) contrast(106%);*/
    filter: drop-shadow(100px 0 0 var(--surgerly-primary)); 
}

@keyframes fill-slide {
    0% { width: 0%; }
    50% { width: 100%; }
    100% { width: 100%; opacity: 0; }
}

.ag-floating-bottom {
    display: block !important;
    visibility: visible !important;
    z-index: 99 !important;
    overflow-y: hidden !important;
}

.ag-row-pinned {
    background-color: var(--surgerly-light-gray) !important;
    font-weight: bold;
    border-top: 2px solid var(--surgerly-border) !important;
}

.reporting-root {
    height: 100%;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.reporting-header {
    padding: 0.75rem 1rem 0.25rem 1rem;
}

.reporting-layout {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    gap: 0rem;
    padding: 0.0rem 0.0rem 0.0rem 0.0rem;
}

.ag-root-wrapper {
  border-radius: 0px !important;
}

.reporting-saved {
    flex: 0 0 auto;
    width: 240px;
    max-width: 20%;
    min-width: 240px;
    display: flex;
    flex-direction: column;
    min-height: 0;
    border-right: 1px solid var(--surgerly-border);
    padding-right: 0.5rem;
    padding-left: 0.5rem;
    padding-top: 0.5rem;
    transition: width 160ms ease, min-width 160ms ease, max-width 160ms ease, flex-basis 160ms ease;
    overflow: hidden;
}

/* --- Expand bar (hidden when sidebar is expanded) --- */
.saved-reports-expand-bar {
    display: none;
}

/* --- Collapsed saved-reports sidebar --- */
.reporting-saved.saved-reports-collapsed {
    flex: 0 0 18px;
    min-width: 18px;
    max-width: 18px;
    padding: 0;
    background: var(--surgerly-background);
    cursor: pointer;
    position: relative;
}

/* Hide everything except the expand bar when collapsed */
.reporting-saved.saved-reports-collapsed > .d-flex,
.reporting-saved.saved-reports-collapsed .saved-reports-list,
.reporting-saved.saved-reports-collapsed #saved-reports-empty {
    display: none !important;
}

/* Show the expand bar when collapsed */
.reporting-saved.saved-reports-collapsed .saved-reports-expand-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    inset: 0;
    cursor: pointer;
    z-index: 2;
    background-color: rgba(var(--surgerly-shadow-rgb, 0,0,0), 0.04);
    border-right: 1px solid rgba(var(--surgerly-shadow-rgb, 0,0,0), 0.08);
    transition: right 160ms ease, background-color 160ms ease;
}

.reporting-saved.saved-reports-collapsed .saved-reports-expand-bar:hover {
    right: -6px;
    background-color: var(--surgerly-secondary);
}

.expand-arrow {
    color: var(--surgerly-black);
    font-size: 1.25rem;
    line-height: 1;
    font-weight: 700;
    user-select: none;
}

#toggleSavedReportsSidebar {
    border: none;
    background: transparent;
    color: var(--surgerly-text);
    padding: 0;
    line-height: 1;
    margin: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    cursor: pointer;
}

#toggleSavedReportsSidebar .material-symbols-outlined {
    font-size: 1.25rem;
    line-height: 1;
}

.reporting-main {
    flex: 1 1 80%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
    /* padding-top: 0.5rem; */
}

/* Slide-reveal icon button */
.slide-btn {
    position: relative;
    height: 28px;
    cursor: pointer;
    display: flex;
    align-items: center;
    border: 1px solid var(--surgerly-primary);
    background-color: var(--surgerly-primary);
    overflow: hidden;
    border-radius: 4px;
    padding: 0;
    padding-right: 32px;
    filter: brightness(1.1);
}

.slide-btn,
.slide-btn__icon,
.slide-btn__text {
    transition: all 0.3s;
}

.slide-btn .slide-btn__text {
    padding: 0 10px;
    color: #fff;
    font-weight: 600;
    font-size: 0.75rem;
    white-space: nowrap;
}

.slide-btn .slide-btn__icon {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: 32px;
    background-color: var(--surgerly-primary);
    display: flex;
    align-items: center;
    justify-content: center;
}

.slide-btn .slide-btn__icon .material-symbols-outlined {
    font-size: 18px;
    color: #fff;
}

.slide-btn:hover {
    background: var(--surgerly-primary);
    filter: brightness(1);
}

.slide-btn:hover .slide-btn__text {
    color: transparent;
}

.slide-btn:hover .slide-btn__icon {
    width: 100%;
}

.slide-btn:active .slide-btn__icon {
    background-color: var(--surgerly-primary);
    filter: brightness(0.85);
}

.slide-btn:active {
    border: 1px solid var(--surgerly-primary);
}

.slide-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.slide-btn--md {
    height: 34px;
}

.slide-btn--md .slide-btn__text {
    font-size: 0.8rem;
}

.slide-btn--md .slide-btn__icon .material-symbols-outlined {
    font-size: 20px;
}

.slide-btn--run {
    border-color: var(--surgerly-hombre-start);
    background-color: var(--surgerly-hombre-start);
}

.slide-btn--run .slide-btn__icon {
    background-color: var(--surgerly-hombre-start);
}

.slide-btn--run:hover {
    background: var(--surgerly-hombre-start);
}

.slide-btn--run:active {
    border-color: var(--surgerly-hombre-start);
}

.slide-btn--run:active .slide-btn__icon {
    background-color: var(--surgerly-hombre-start);
}

/* Dark variant for advanced reporting toolbar */
.slide-btn--dark {
    border-color: var(--surgerly-calendar, #4164a5);
    background-color: var(--surgerly-calendar, #4164a5);
}

.slide-btn--dark .slide-btn__icon {
    background-color: var(--surgerly-calendar, #4164a5);
}

.slide-btn--dark:hover {
    background: var(--surgerly-calendar, #4164a5);
}

.slide-btn--dark:active {
    border-color: var(--surgerly-calendar, #4164a5);
}

.slide-btn--dark:active .slide-btn__icon {
    background-color: var(--surgerly-calendar, #4164a5);
}

.slide-btn--dark:disabled {
    opacity: 0.5;
}

/* Advanced reporting run button */
.slide-btn--adv-run {
    border-color: #000000;
    background-color: #000000;
    filter: brightness(1);
}

.slide-btn--adv-run .slide-btn__text {
    color: var(--surgerly-calendar, #4164a5);
}

.slide-btn--adv-run .slide-btn__icon {
    background-color: #000000;
}

.slide-btn--adv-run .slide-btn__icon .material-symbols-outlined {
    color: var(--surgerly-calendar, #4164a5);
}

.slide-btn--adv-run:hover {
    background: var(--surgerly-border, #e1e4e6);
    border-color: var(--surgerly-border, #e1e4e6);
}

.slide-btn--adv-run:hover .slide-btn__icon {
    background-color: var(--surgerly-border, #e1e4e6);
}

.slide-btn--adv-run:hover .slide-btn__icon .material-symbols-outlined {
    color: #000000;
}

.report-results {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    position: relative;
}

.report-grid-wrapper {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

#report-grid {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
}

#report-grid .ag-paging-panel {
    justify-content: space-between;
}

#report-grid .report-pagination-btns {
    margin-right: auto;
    padding-left: 8px;
}

#report-grid .report-pagination-btns .btn {
    font-size: 0.75rem;
    padding: 2px 8px;
    white-space: nowrap;
}

.report-chart {
    flex: 1 1 auto;
    min-height: 0;
}

.report-results-empty {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    pointer-events: none;
    padding: 1rem;
}

.saved-reports-list {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    overflow: auto;
    padding: 0.125rem 0.25rem 0.125rem 0;
}

/* --- Saved report card ----------------------------------------------------
   Refined "library card" treatment for the reporting sidebar. A thin gold
   left-rail surfaces on hover and pins solid on the active card; the delete
   action stays hidden until the card receives focus or hover, keeping the
   resting state quiet.
   ------------------------------------------------------------------------ */
.saved-report-card {
    position: relative;
    display: flex;
    align-items: stretch;
    gap: 0.625rem;
    width: 100%;
    padding: 0.55rem 0.65rem 0.55rem 0.45rem;
    border: 1px solid transparent;
    border-radius: 8px;
    background: var(--surgerly-white);
    text-align: left;
    cursor: pointer;
    overflow: hidden;
    transition:
        background-color 200ms ease,
        border-color 200ms ease,
        box-shadow 200ms ease,
        transform 220ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.saved-report-card__rail {
    flex: 0 0 3px;
    align-self: stretch;
    border-radius: 999px;
    background: linear-gradient(
        180deg,
        var(--surgerly-primary) 0%,
        color-mix(in srgb, var(--surgerly-primary) 65%, transparent) 100%
    );
    opacity: 0;
    transform: scaleY(0.35);
    transform-origin: center;
    transition: opacity 220ms ease, transform 260ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.saved-report-card__body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.18rem;
}

.saved-report-card__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.4rem;
    min-width: 0;
}

.saved-report-card__title-wrap {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.saved-report-card__title {
    flex: 0 1 auto;
    min-width: 0;
    font-weight: 600;
    font-size: 0.875rem;
    line-height: 1.3;
    letter-spacing: -0.005em;
    color: var(--surgerly-text);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal;
    word-break: break-word;
}

.saved-report-card__badge {
    flex: 0 0 auto;
    align-self: center;
    display: inline-flex;
    align-items: center;
    height: 16px;
    padding: 0 0.32rem;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--surgerly-primary);
    background: color-mix(in srgb, var(--surgerly-primary) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--surgerly-primary) 32%, transparent);
    border-radius: 4px;
    line-height: 1;
}

.saved-report-card__meta {
    display: flex;
    align-items: baseline;
    gap: 0.3rem;
    min-width: 0;
    font-size: 0.7rem;
    line-height: 1.25;
    color: var(--surgerly-dark-gray);
}

.saved-report-card__org {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.saved-report-card__dot {
    flex: 0 0 auto;
    opacity: 0.55;
}

.saved-report-card__date {
    flex: 0 0 auto;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    color: color-mix(in srgb, var(--surgerly-dark-gray) 85%, transparent);
}

/* Hover & focus */
.saved-report-card:hover,
.saved-report-card:focus-visible {
    background: color-mix(in srgb, var(--surgerly-primary) 5%, var(--surgerly-white));
    border-color: color-mix(in srgb, var(--surgerly-primary) 22%, transparent);
    transform: translateX(1px);
    box-shadow: 0 6px 18px -12px rgba(var(--surgerly-primary-rgb), 0.5);
    outline: none;
}

.saved-report-card:hover .saved-report-card__rail,
.saved-report-card:focus-visible .saved-report-card__rail {
    opacity: 0.6;
    transform: scaleY(0.8);
}

/* Active (selected) card — full rail, warm gold tint, gentle lift. */
.saved-report-card.active {
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--surgerly-primary) 11%, var(--surgerly-white)) 0%,
        color-mix(in srgb, var(--surgerly-primary) 4%, var(--surgerly-white)) 100%
    );
    border-color: color-mix(in srgb, var(--surgerly-primary) 40%, transparent);
    box-shadow: 0 8px 20px -14px rgba(var(--surgerly-primary-rgb), 0.6);
}

.saved-report-card.active .saved-report-card__rail {
    opacity: 1;
    transform: scaleY(1);
}

.saved-report-card.active .saved-report-card__title {
    color: var(--surgerly-text);
}

/* Dense row style for report group navigation in the sidebar */
#report-groups-list {
    gap: 0;
}

.report-group-row {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem 0.5rem;
    cursor: pointer;
    color: var(--surgerly-text);
    border-bottom: 1px solid var(--surgerly-border);
    transition: background-color 0.15s ease, color 0.15s ease;
    user-select: none;
}

.report-group-row:last-child {
    border-bottom: none;
}

.report-group-row:hover,
.report-group-row:focus-visible {
    background: color-mix(in srgb, var(--surgerly-primary) 8%, transparent);
    outline: none;
}

.report-group-row.active {
    background: color-mix(in srgb, var(--surgerly-primary) 14%, transparent);
}

.report-group-row__icon {
    color: var(--surgerly-primary);
    font-size: 1.1rem;
    line-height: 1;
    flex-shrink: 0;
}

.report-group-row__name {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--surgerly-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.report-group-row__count {
    flex-shrink: 0;
    min-width: 1.5rem;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    text-align: center;
    color: var(--surgerly-dark-gray);
    background: color-mix(in srgb, var(--surgerly-dark-gray) 14%, transparent);
    transition: color 0.15s ease, background-color 0.15s ease;
}

.report-group-row:hover .report-group-row__count {
    color: var(--surgerly-primary);
    background: color-mix(in srgb, var(--surgerly-primary) 16%, transparent);
}

.report-group-row__chev {
    flex-shrink: 0;
    font-size: 1.1rem;
    line-height: 1;
    color: var(--surgerly-dark-gray);
    transition: transform 0.15s ease, color 0.15s ease;
}

.report-group-row:hover .report-group-row__chev {
    color: var(--surgerly-primary);
    transform: translateX(2px);
}

/* Legacy hook kept for any pre-render templates referencing the old id. */
#advancedModeIcon {
    color: var(--surgerly-primary);
    margin-left: 0.2rem;
}

/* Delete control — stays out of the way until the card is hovered or focused. */
.saved-report-delete {
    flex: 0 0 auto;
    height: 22px;
    width: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: var(--surgerly-dark-gray);
    border-radius: 5px;
    opacity: 0;
    transform: translateX(4px);
    cursor: pointer;
    transition:
        opacity 180ms ease,
        transform 180ms ease,
        color 150ms ease,
        background-color 150ms ease,
        box-shadow 150ms ease;
}

.saved-report-delete .material-symbols-outlined {
    font-size: 16px;
    line-height: 1;
}

.saved-report-card:hover .saved-report-delete,
.saved-report-card:focus-within .saved-report-delete,
.saved-report-card.active .saved-report-delete {
    opacity: 1;
    transform: translateX(0);
}

.saved-report-card.active .saved-report-delete {
    color: color-mix(in srgb, var(--surgerly-dark-gray) 80%, var(--surgerly-text));
}

.saved-report-delete:hover,
.saved-report-delete:focus-visible {
    color: var(--surgerly-danger-strong, #c0392b);
    background: rgba(192, 57, 43, 0.10);
    box-shadow: 0 0 0 2px rgba(192, 57, 43, 0.15);
    outline: none;
}

.saved-report-delete:active {
    background: rgba(192, 57, 43, 0.18);
    color: var(--surgerly-danger-text, #8e2a20);
}

/* --- Manage Report Groups: inline rename / delete-confirm row -------------
   The row swaps between three modes (view / rename / delete-confirm) in
   place. A subtle fade-in keeps the swap from feeling jarring.
   ------------------------------------------------------------------------ */
.manage-group-row {
    transition: background-color 150ms ease;
}

.manage-group-row[data-mode="rename"],
.manage-group-row[data-mode="delete-confirm"] {
    background: color-mix(in srgb, var(--surgerly-primary) 6%, var(--surgerly-white));
}

.manage-group-row[data-mode="delete-confirm"] {
    background: color-mix(in srgb, #c0392b 7%, var(--surgerly-white));
}

.manage-group-input {
    height: 28px;
    font-size: 0.85rem;
    border-color: color-mix(in srgb, var(--surgerly-primary) 45%, var(--surgerly-border));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--surgerly-primary) 15%, transparent);
    animation: manage-group-fade 140ms ease both;
}

.manage-group-input:focus {
    border-color: var(--surgerly-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--surgerly-primary) 22%, transparent);
}

.manage-group-confirm-msg {
    font-size: 0.82rem;
    font-style: italic;
    color: color-mix(in srgb, var(--surgerly-text) 70%, transparent);
    animation: manage-group-fade 140ms ease both;
}

.manage-group-actions {
    align-items: center;
}

.manage-group-actions .btn-link {
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    color: var(--surgerly-dark-gray);
    transition: background-color 130ms ease, color 130ms ease, box-shadow 130ms ease;
}

.manage-group-actions .btn-link .material-symbols-outlined {
    font-size: 18px;
    line-height: 1;
}

.manage-group-actions .btn-link:hover,
.manage-group-actions .btn-link:focus-visible {
    background: color-mix(in srgb, var(--surgerly-primary) 14%, transparent);
    color: var(--surgerly-primary);
    outline: none;
}

.manage-group-rename-confirm {
    color: var(--surgerly-primary) !important;
}

.manage-group-rename-confirm:hover,
.manage-group-rename-confirm:focus-visible {
    background: color-mix(in srgb, var(--surgerly-primary) 22%, transparent) !important;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--surgerly-primary) 18%, transparent);
}

.manage-group-delete-confirm,
.manage-group-delete {
    color: var(--surgerly-danger-strong, #c0392b) !important;
}

.manage-group-delete-confirm:hover,
.manage-group-delete-confirm:focus-visible,
.manage-group-delete:hover,
.manage-group-delete:focus-visible {
    background: rgba(192, 57, 43, 0.12) !important;
    color: var(--surgerly-danger-strong, #a52d22) !important;
    box-shadow: 0 0 0 2px rgba(192, 57, 43, 0.18);
}

@keyframes manage-group-fade {
    from { opacity: 0; transform: translateY(-2px); }
    to   { opacity: 1; transform: translateY(0); }
}

.report-builder-toolpanel {
    padding: 0.75rem;
    height: 100%;
    overflow: auto;
}

.switch {
  /* switch */
  --switch-width: 56px;
  --switch-height: 30px;
  --switch-bg: rgb(131, 131, 131);
  --switch-checked-bg:var(--surgerly-primary);/*  rgb(0, 218, 80); */
  --switch-offset: calc((var(--switch-height) - var(--circle-diameter)) / 2);
  --switch-transition: all .2s cubic-bezier(0.27, 0.2, 0.25, 1.51);
  /* circle */
  --circle-diameter: 24px;
  --circle-bg: #fff;
  --circle-shadow: 1px 1px 2px rgba(146, 146, 146, 0.45);
  --circle-checked-shadow: -1px 1px 2px rgba(163, 163, 163, 0.45);
  --circle-transition: var(--switch-transition);
  /* icon */
  --icon-transition: all .2s cubic-bezier(0.27, 0.2, 0.25, 1.51);
  --icon-cross-color: var(--switch-bg);
  --icon-cross-size: 6px;
  --icon-checkmark-color: var(--switch-checked-bg);
  --icon-checkmark-size: 10px;
  /* effect line */
  --effect-width: calc(var(--circle-diameter) / 2);
  --effect-height: calc(var(--effect-width) / 2 - 1px);
  --effect-bg: var(--circle-bg);
  --effect-border-radius: 1px;
  --effect-transition: all .2s ease-in-out;
}

.switch input {
  display: none;
}

.switch {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.switch svg {
  -webkit-transition: var(--icon-transition);
  -o-transition: var(--icon-transition);
  transition: var(--icon-transition);
  position: absolute;
  height: auto;
}

.switch .checkmark {
  width: var(--icon-checkmark-size);
  color: var(--icon-checkmark-color);
  -webkit-transform: scale(0);
  -ms-transform: scale(0);
  transform: scale(0);
}

.switch .cross {
  width: var(--icon-cross-size);
  color: var(--icon-cross-color);
}

.slider {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: var(--switch-width);
  height: var(--switch-height);
  background: var(--switch-bg);
  border-radius: 999px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  position: relative;
  -webkit-transition: var(--switch-transition);
  -o-transition: var(--switch-transition);
  transition: var(--switch-transition);
  cursor: pointer;
}

.circle {
  width: var(--circle-diameter);
  height: var(--circle-diameter);
  background: var(--circle-bg);
  border-radius: inherit;
  -webkit-box-shadow: var(--circle-shadow);
  box-shadow: var(--circle-shadow);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-transition: var(--circle-transition);
  -o-transition: var(--circle-transition);
  transition: var(--circle-transition);
  z-index: 1;
  position: absolute;
  left: var(--switch-offset);
}

.slider::before {
  content: "";
  position: absolute;
  width: var(--effect-width);
  height: var(--effect-height);
  left: calc(var(--switch-offset) + (var(--effect-width) / 2));
  background: var(--effect-bg);
  border-radius: var(--effect-border-radius);
  -webkit-transition: var(--effect-transition);
  -o-transition: var(--effect-transition);
  transition: var(--effect-transition);
}

/* actions */

.switch input:checked+.slider {
  background: var(--switch-checked-bg);
}

.switch input:checked+.slider .checkmark {
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
}

.switch input:checked+.slider .cross {
  -webkit-transform: scale(0);
  -ms-transform: scale(0);
  transform: scale(0);
}

.switch input:checked+.slider::before {
  left: calc(100% - var(--effect-width) - (var(--effect-width) / 2) - var(--switch-offset));
}

.switch input:checked+.slider .circle {
  left: calc(100% - var(--circle-diameter) - var(--switch-offset));
  -webkit-box-shadow: var(--circle-checked-shadow);
  box-shadow: var(--circle-checked-shadow);
}

/* Invoice referrer Internal/External toggle */
.inv-referrer-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
    font-size: 0.78rem;
    color: var(--surgerly-dark-gray);
}
.inv-referrer-toggle-label {
    user-select: none;
    cursor: pointer;
}
.inv-referrer-toggle-label.is-active {
    color: var(--surgerly-text);
    font-weight: 600;
}
.inv-referrer-toggle .switch {
    --switch-width: 36px;
    --switch-height: 20px;
    --circle-diameter: 16px;
}

/* Report builder panel */
.rb-section {
  margin-bottom: 0.75rem;
}

.rb-section-label {
  display: block;
  font-size: 0.675rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--surgerly-dark-gray);
  margin-bottom: 0.35rem;
}

.rb-dropdown-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.45rem 0.75rem;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--surgerly-text);
  background: var(--surgerly-white);
  border: 1px solid var(--surgerly-border);
  border-radius: 6px;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.rb-dropdown-btn:hover {
  border-color: var(--surgerly-primary);
}

.rb-dropdown-btn:focus {
  border-color: var(--surgerly-primary);
  box-shadow: 0 0 0 2px rgba(var(--surgerly-primary-rgb), 0.15);
  outline: none;
}

.rb-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.showLinks {
  display: flex;
  align-items: center;
}

.showLinks .switch {
  transform: scale(0.9);
  transform-origin: left center;
}

.showLinks .slider-label {
  color: var(--surgerly-text);
  font-weight: 500;
  font-size: 0.7rem;
  white-space: nowrap;
}

/* Report builder query-chain blocks
   #query-chain establishes a stacking context (via isolation) so the rail
   pseudos can sit at z-index: -1 — behind the chain-block backgrounds, but
   not behind the page. Each opaque card masks the rail where it overlaps,
   so the rail only shows in the gaps between cards. overflow: hidden clips
   the rails (which extend far upward with top: -9999px) at the chain's top
   edge so they don't bleed into the toolbar above. */
#query-chain {
  isolation: isolate;
  overflow: hidden;
}

.chain-block {
  --depth: 0;
  --chain-indent: 22px;
  position: relative;
  margin-left: calc(var(--depth) * var(--chain-indent));
  margin-bottom: 8px;
  padding: 10px 12px;
  background: var(--surgerly-white);
  border: 1px solid var(--surgerly-border);
  border-radius: 8px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.chain-block:hover {
  border-color: color-mix(in srgb, var(--surgerly-primary) 35%, var(--surgerly-border));
}

.chain-block:focus-within {
  border-color: var(--surgerly-primary);
  box-shadow: 0 0 0 3px rgba(var(--surgerly-primary-rgb), 0.12);
}

.chain-block--root {
  border-left: 3px solid var(--surgerly-primary);
  padding-left: 14px;
}

/* L-bracket connector from the column above to the start of each child card.
   The vertical rail extends far upward (top: -9999px) so for a 2nd, 3rd, …
   sibling at the same depth it still visually reaches the shared parent —
   intermediate sibling cards mask the rail behind their opaque background
   via z-index: -1, so only the inter-card gaps show the line. */
.chain-block:not(.chain-block--root)::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--chain-indent) + 10px);
  top: -9999px;
  bottom: 50%;
  width: 1px;
  background: var(--surgerly-border);
  z-index: -1;
}

.chain-block:not(.chain-block--root)::after {
  content: "";
  position: absolute;
  left: calc(-1 * var(--chain-indent) + 10px);
  top: 50%;
  width: calc(var(--chain-indent) - 10px);
  height: 1px;
  background: var(--surgerly-border);
}

.chain-block__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 24px;
}

.chain-block__title-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  flex: 1;
}

.chain-block__title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--surgerly-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chain-block__field-count {
  flex-shrink: 0;
  font-size: 0.68rem;
  font-weight: 500;
  color: var(--surgerly-dark-gray);
  background: color-mix(in srgb, var(--surgerly-text) 6%, transparent);
  padding: 1px 7px;
  border-radius: 99px;
  line-height: 1.4;
}

.chain-block__actions {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.chain-block:hover .chain-block__actions,
.chain-block:focus-within .chain-block__actions {
  opacity: 1;
}

.chain-block__icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--surgerly-dark-gray);
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.chain-block__icon-btn:hover,
.chain-block__icon-btn:focus-visible {
  background: color-mix(in srgb, var(--surgerly-text) 8%, transparent);
  color: var(--surgerly-text);
  outline: none;
}

.chain-block__icon-btn--accent:hover,
.chain-block__icon-btn--accent:focus-visible {
  background: color-mix(in srgb, var(--surgerly-primary) 18%, transparent);
  color: var(--surgerly-primary);
}

.chain-block__icon-btn--danger:hover,
.chain-block__icon-btn--danger:focus-visible {
  background: rgba(220, 53, 69, 0.12);
  color: var(--surgerly-danger, #dc3545);
}

.chain-block__icon-btn .material-symbols-outlined {
  font-size: 16px;
  line-height: 1;
}

.chain-block__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 6px;
  min-height: 24px;
}

.chain-block__row-label {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--surgerly-dark-gray);
  min-width: 0;
}

.chain-block__row-count {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--surgerly-dark-gray);
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chain-block__row--active .chain-block__row-count {
  color: var(--surgerly-text);
  font-weight: 600;
}

.chain-block__row--active .chain-block__row-label {
  color: var(--surgerly-text);
}

/* Breadcrumb trail chip for cards whose true depth exceeds the visual indent cap */
.chain-block__trail {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 6px;
  padding: 2px 8px 2px 4px;
  background: color-mix(in srgb, var(--surgerly-text) 5%, transparent);
  border-radius: 99px;
  font-size: 0.7rem;
  color: var(--surgerly-dark-gray);
  max-width: 100%;
}

.chain-block__trail .material-symbols-outlined {
  font-size: 14px;
  line-height: 1;
}

.chain-block__trail-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#sidebarContainer {
    transition: width 0.16s ease;
    position: relative;
    /* Always-on overflow clip stops labels from spilling into the page
       area while the width is mid-transition. */
    overflow: hidden;
}

#sidebarContainer.staff-sidebar-collapsed {
    width: 56px !important;
    overflow-x: hidden;
}

#sidebarContainer.staff-sidebar-collapsed .sidebarItem {
    padding-left: 0.25rem;
    padding-right: 0.25rem;
}

/* Only the top list scrolls when the menu overflows — the footer (Hide
   sidebar / Settings+Logout in patient frame) stays pinned to the bottom
   thanks to the footer ul's `mt-auto`. min-height:0 is the standard flex
   incantation needed to let an `overflow:auto` child shrink past its
   content height. */
#sidebarContainer > #sidebarList {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    /* Padding-bottom matches the fade-mask height below: when scrolled to
       the very bottom, the last item sits at the top edge of the fade
       zone (i.e. fully opaque), and the padding occupies the empty
       fade region underneath. */
    padding-bottom: 1rem;
    scrollbar-width: thin;
    scrollbar-color: var(--surgerly-border) transparent;
    /* Soft fade at the bottom so partial rows clipped by the viewport
       boundary trail off into transparency instead of being chopped flat
       against the divider above the Hide-sidebar footer. */
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 1.25rem), transparent 100%);
            mask-image: linear-gradient(to bottom, #000 calc(100% - 1.25rem), transparent 100%);
}

#sidebarContainer > #sidebarList::-webkit-scrollbar {
    width: 6px;
}

#sidebarContainer > #sidebarList::-webkit-scrollbar-track {
    background: transparent;
}

#sidebarContainer > #sidebarList::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 3px;
    transition: background 0.15s ease;
}

#sidebarContainer:hover > #sidebarList::-webkit-scrollbar-thumb,
#sidebarContainer > #sidebarList:focus-within::-webkit-scrollbar-thumb {
    background: var(--surgerly-border);
}

#sidebarContainer > #sidebarList::-webkit-scrollbar-thumb:hover {
    background: var(--surgerly-secondary);
}

/* In icon-only mode the scrollbar would steal precious horizontal space
   (the sidebar is only 56px wide), so hide it — items rarely overflow
   vertically once labels are gone, and if they do the user can still
   scroll with wheel/touch. */
#sidebarContainer.staff-sidebar-collapsed > #sidebarList {
    scrollbar-width: none;
}
#sidebarContainer.staff-sidebar-collapsed > #sidebarList::-webkit-scrollbar {
    display: none;
}

#sidebarContainer .sidebarItem > .btn {
    white-space: nowrap;
    overflow: hidden;
    transition: padding 0.16s ease;
}

/* Labels/chevrons fade and collapse in sync with the sidebar width, so
   nothing pops in mid-transition or wraps to a second line while the
   sidebar is still narrow. `display: none` (the previous approach) is
   instant and ignored by transitions, which is what produced the jumpy
   intermediate frames during expand. */
#sidebarContainer .sidebarItem > .btn > span:not(.material-symbols-outlined),
#sidebarContainer .sidebarItem > .btn > .surgerly-dropdown {
    transition: opacity 0.12s ease, max-width 0.16s ease, margin 0.16s ease, padding 0.16s ease;
    max-width: 12rem;
    overflow: hidden;
}

/* Collapsed-mode padding: keep .sidebarItem unchanged (no padding snap on
   the row wrapper) and only nudge the .btn padding down enough so the
   24px icon fits inside the 56px sidebar. justify-content was previously
   set to `center` here, which is the main cause of the icon "drift" the
   user sees during collapse: it can't be transitioned, so it snaps the
   moment the class is added, and because each row's icon-plus-label
   group has a different total width, every icon drifts toward the
   centre at a different rate. With justify-content kept at flex-start
   throughout and only .btn padding transitioning (4px shift, uniform
   across all rows), the icons just slide together by the same amount
   instead of bumping individually. */

#sidebarContainer.staff-sidebar-collapsed .sidebarItem > .btn {
    justify-content: center;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

#sidebarContainer.staff-sidebar-collapsed .sidebarItem > .btn > span:not(.material-symbols-outlined),
#sidebarContainer.staff-sidebar-collapsed .sidebarItem > .btn > .surgerly-dropdown {
    opacity: 0;
    max-width: 0;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Sub-lists and hr separators snap shut on collapse via display:none.
   An earlier attempt animated their height for visual smoothness, but
   capping max-height also clipped the expanded entities list — anything
   past the cap was unreachable by scroll. With justify-content and
   padding snaps already removed elsewhere in this file, the visible
   "bumping" the user originally reported is gone, and the one-frame
   reflow from items-below-an-open-sub-list jumping up is not what was
   driving that complaint. */
#sidebarContainer.staff-sidebar-collapsed .sidebarItem > ul,
#sidebarContainer.staff-sidebar-collapsed hr {
    display: none !important;
}

/* Patient frame keeps the original boxed icon button — its sidebar layout
   doesn't have the new sidebarItem footer wrapper. */
#togglePatientFrameSidebar {
    border: 1px solid var(--surgerly-border);
    background: var(--surgerly-background);
    color: var(--surgerly-text);
    border-radius: 0.5rem;
    width: 2rem;
    height: 2rem;
    padding: 0;
    line-height: 1;
    margin: 0 0.5rem 0.5rem;
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

#togglePatientFrameSidebar .material-symbols-outlined {
    font-size: 1.25rem;
    line-height: 1;
}

#sidebarContainer.staff-sidebar-collapsed #togglePatientFrameSidebar {
    margin-left: auto;
    margin-right: auto;
}

/* Bottom-pinned sidebar footer that hosts the collapse toggle (and a
   future home for a version label / org tile). It's a `<ul.sidebarList>`
   so the toggle inherits the same .sidebarItem > .btn rules as the items
   above it — same padding, same hover states, same icon-only collapse
   behaviour — and naturally aligns. The .mt-auto pushes it to the bottom
   of the flex column; the border-top gives it a quiet visual anchor. */
.sidebar-footer {
    border-top: 1px solid var(--surgerly-border);
    padding-top: 0.5rem;
    margin-top: 0.5rem;
    /* Bootstrap's `<ul>` reset gives every ul `margin-bottom: 1rem`. The
       .sidebarList { margin: 0 } rule normally wins on specificity, but
       `mt-auto` is a Bootstrap utility with !important that can re-shuffle
       the cascade in some browsers. Pin margin-bottom explicitly so the
       Hide-sidebar footer never picks up that 16px gap below it. */
    margin-bottom: 0 !important;
}

/* The collapse toggle now lives inside .sidebar-footer at the bottom of
   the sidebar (was absolutely positioned to the top-right when this CSS
   was first written). The footer's flex layout handles placement so the
   toggle no longer needs absolute positioning. The .sidebar-header rules
   that used to live here are also gone — that wrapper was removed when
   the toggle moved.
   Kept the responsive breakpoint stub in case any future rules need it. */
@media (max-width: 768px){
  #sidebarContainer{}
}



/* Forms */
.forms-shell {
  display: flex;
  height: 100%;
  overflow: hidden;
}

.forms-sidebar {
  width: 320px;
  min-width: 240px;            /* ✅ allow shrinking despite content */
  flex: 0 0 auto;          /* ✅ don't let flexbox "helpfully" size it */
  border-right: 1px solid var(--surgerly-border);
  display: flex;
  flex-direction: column;
  transition: width 160ms ease, min-width 160ms ease;
  overflow: hidden;
}

.forms-sidebar.collapsed .sidebar-header {
  justify-content: center;
}

.forms-sidebar.collapsed {
  width: 52px;
  min-width: 52px;
}

.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* padding: 12px; */
  padding-bottom: 0.5rem;
}

/* ---- Generic collapsible sidebar ----
   Usage:
     1. Add class `collapsible-sidebar` to your <aside> (alongside your own width class)
     2. Put all content inside it normally
     3. Add <div class="sidebar-expand-bar"> as the last child
     4. JS: toggle button → addClass('collapsed'), expand bar → removeClass('collapsed')
*/
.collapsible-sidebar {
  flex: 0 0 auto;
  width: 240px;
  max-width: 20%;
  min-width: 240px;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding-right: 0.5rem;
  padding-left: 0.5rem;
  padding-top: 0.5rem;
  position: relative;
  overflow: visible;
  border-right: 1px solid var(--surgerly-border, #e6e6e6);
  transition: width 160ms ease, min-width 160ms ease, flex-basis 160ms ease;
}

.collapsible-sidebar.collapsed {
  border-right: 1px solid var(--surgerly-border, #e6e6e6);
}

.collapsible-sidebar.collapsed {
  width: 18px !important;
  min-width: 18px !important;
  flex: 0 0 18px !important;

  padding: 0;
}

.collapsible-sidebar.collapsed > *:not(.sidebar-expand-bar) {
  display: none !important;
}

/* Expand bar — hidden when open, full overlay when collapsed */
.sidebar-expand-bar {
  display: none;
}

.collapsible-sidebar.collapsed > .sidebar-expand-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  inset: 0;
  cursor: pointer;
  z-index: 2;

  background-color: rgba(var(--surgerly-shadow-rgb, 0,0,0), 0.04);
  border-right: 1px solid rgba(var(--surgerly-shadow-rgb, 0,0,0), 0.08);

  transition: right 160ms ease, background-color 160ms ease;
}

.collapsible-sidebar.collapsed > .sidebar-expand-bar:hover {
  right: -6px;
  background-color: var(--surgerly-secondary);
}
/* add the .expand-arrow class */
#advSavedExpandBar .expand-arrow {
  color: var(--surgerly-grey-400, #8899aa) !important;
}


.sidebar-actions,
.forms-list,
.sidebar-title {
  transition: opacity 160ms ease;
}

.forms-sidebar.collapsed .sidebar-actions,
.forms-sidebar.collapsed .forms-list,
.forms-sidebar.collapsed .sidebar-title {
  opacity: 0;
  pointer-events: none;
}

.sidebar-title {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
}

.forms-sidebar:not(.collapsed) .sidebar-title {
  padding-left: 10px;
}

.sidebar-actions {
  padding: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.primary-btn {
  padding: 0.5rem 0.75rem;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  background: var(--surgerly-primary, #be9b5a);
  color: var(--surgerly-white, #ffffff);
  font-weight: 600;
  transition: filter 0.1s ease;
}

.primary-btn:hover {
  filter: brightness(0.92);
}

.primary-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  filter: none;
}

.primary-btn--dark {
  background: var(--surgerly-text, #090c0e);
}

/* Compact variant — slimmer padding + smaller font for inline use
   (e.g. notes composer "Add note", inline confirm buttons). */
.primary-btn--sm {
  padding: 0.35rem 0.7rem;
  font-size: 12px;
}

/* Brief "Saved" success state — flashed onto a primary-btn after a
   successful save. Tints green so it reads as a confirmation
   without disrupting the underlying primary-btn shape. */
.primary-btn.is-saved {
  background: var(--surgerly-hombre-start, #1c6c2c);
  pointer-events: none;
}

/* ── Ghost button — neutral counterpart to .primary-btn ───────────
   Promoted to a global utility because it's used in modals across
   the app (suppressions cancel, mailing-list delete, automations
   run/cancel, etc.) — when it lived only in automations.css those
   modals rendered with a bare unstyled <button>. Padding +
   font-weight match .primary-btn so the two line up at the same
   height when placed side-by-side in a modal footer. */
.ghost-btn {
  background: transparent;
  color: var(--surgerly-text, inherit);
  border: 1px solid var(--surgerly-border, #e6e6e6);
  border-radius: 8px;
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: background 0.1s ease, border-color 0.1s ease, color 0.1s ease;
}

.ghost-btn:hover {
  background: var(--surgerly-light-gray, rgba(0, 0, 0, 0.04));
}

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

.ghost-btn--danger {
  color: var(--surgerly-danger-strong, #b02a37);
  border-color: rgba(220, 53, 69, 0.4);
}

.ghost-btn--danger:hover {
  background: rgba(220, 53, 69, 0.08);
  color: var(--surgerly-danger-text, #842029);
  border-color: rgba(220, 53, 69, 0.55);
}

.ghost-btn--sm {
  padding: 0.35rem 0.7rem;
  font-size: 12px;
}

.search {
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--surgerly-border);
  border-radius: 8px;
  background: var(--surgerly-white);
  color: var(--surgerly-text);
}

.forms-list {
  overflow: auto;
  padding: 0.5rem 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-item {
  padding: 0.5rem 0.75rem;
  border-radius: 10px;
  cursor: pointer;
  border: 1px solid transparent;
  user-select: none;
}

.form-item:hover {
  background: var(--surgerly-light-gray);
}

.form-item.active {
  border-color: var(--surgerly-border);
  background: var(--surgerly-light-gray);
}

.form-item.is-deleted .form-item-title,
.form-item.is-deleted > div:first-child {
  text-decoration: line-through;
  opacity: .65;
}

.deleted-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 44px;
  height: 44px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(var(--surgerly-shadow-rgb, 0,0,0), .12);
  background: transparent;
  color: rgba(var(--surgerly-shadow-rgb, 0,0,0), .65);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.deleted-chip .mi,
.deleted-chip .material-symbols-outlined { font-size: 18px; opacity: .85; }
.deleted-chip:hover {
  background: rgba(var(--surgerly-shadow-rgb, 0,0,0), .03);
  border-color: rgba(var(--surgerly-shadow-rgb, 0,0,0), .18);
}
.deleted-chip.is-on {
  background: rgba(220, 53, 69, .08);
  border-color: rgba(220, 53, 69, .35);
  color: rgba(220, 53, 69, .95);
}
.deleted-chip:focus {
  outline: none;
  box-shadow: 0 0 0 .2rem rgba(13, 110, 253, .15);
}

.icon-btn {
  border: 1px solid var(--surgerly-border);
  border-radius: 8px;
  padding: 6px 10px;
  cursor: pointer;
  color: var(--surgerly-text);
  background: transparent;
  font-size: 0.82rem;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}

.icon-btn:hover {
  background: var(--surgerly-light-gray);
  border-color: color-mix(in srgb, var(--surgerly-text) 25%, transparent);
  color: var(--surgerly-text);
}

.creator-wrap {
  flex: 1;
  min-width: 0;
}

/* Booking Forms */
.booking-forms-shell {
  display: flex;
  height: 100%;
  overflow: hidden;
}

.booking-forms-sidebar {
  width: 320px;
  border-right: 1px solid var(--surgerly-border);
  background: var(--surgerly-white);
}

.booking-forms-list {
  overflow: auto;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.booking-form-item {
  padding: 10px 10px;
  border-radius: 10px;
  cursor: pointer;
  border: 1px solid transparent;
  user-select: none;
}

.booking-form-item:hover {
  background: var(--surgerly-light-gray);
}

.booking-form-item.active {
  border-color: var(--surgerly-border);
  background: var(--surgerly-light-gray);
}


/* Let flex children shrink, otherwise overflow can't happen */
#bookingFormCreator,
#bookingFormViewer,
#bookingFormViewerTabs,
#bookingFormRightContent {
  min-height: 0;
}

/* Make each split pane independently scrollable */
#bookingFormData,
#bookingFormViewer {
  overflow: auto;
  min-height: 0;
}

/* Ensure the tab content area can actually scroll */
#bookingFormViewerTabs {
  overflow: hidden; /* tabs area handles layout; panes scroll */
}

/* Optional: each tab pane scrolls if content is tall */
#bookingFormViewerTabs .tab-pane {
  overflow: auto;
  min-height: 0;
}

/* Optional: make chart + grid visible by giving them real height */
#bfAnalyticsChart { height: 360px; width: 100%; }
#bfDataGrid { min-height: 320px; width: 100%; }

/*
entity table styles */

.entity-toolbar {
  display: flex;
  gap: .5rem;
  align-items: center;
  margin: 0;
  padding: 0.5rem;
  flex: 0 0 auto;
}

.entity-search{
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  padding: 0 8px;
  height: 100%;
  border-radius: 0;
}

.entity-grid {
  flex: 1 1 auto;
  min-height: 100;
  width: 100%;
}

/* ===== Entities master-detail layout =====
   The Entities page is now a top header + 2-col split: a vertical
   list of entity types on the left, the table (or an empty state)
   on the right. Replaces the older horizontal-tab paradigm — the
   schema list grew to 20+ and a horizontal scroll stopped scaling.
   The horizontal-tab classes above are kept only for any consumer
   we haven't migrated; new pages use these. */
.entities-page-body {
  display: grid;
  grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
  flex: 1 1 auto;
  min-height: 0;
}

.entity-list {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  border-right: 1px solid var(--surgerly-border, #e6e6e6);
  background: var(--surgerly-white, #fff);
  padding: 0 0;
  min-height: 0;
}

.entity-list-item {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 0;
  border-left: 3px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--surgerly-muted, #6a6e7a);
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: color 120ms ease, background 120ms ease, border-color 120ms ease;
}

.entity-list-item:hover {
  color: var(--surgerly-text, #1f2330);
  background: var(--surgerly-light-gray, rgba(0, 0, 0, 0.03));
}

.entity-list-item--active {
  color: var(--surgerly-primary, #be9b5a);
  border-left-color: var(--surgerly-primary, #be9b5a);
  background: rgba(var(--surgerly-primary-rgb, 190, 155, 90), 0.06);
  font-weight: 600;
}

.entity-list-item-label {
  flex: 1 1 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.entity-list-item-count {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--surgerly-light-gray, rgba(0, 0, 0, 0.06));
  color: var(--surgerly-muted, #6a6e7a);
  font-variant-numeric: tabular-nums;
  flex: 0 0 auto;
}

.entity-list-item--active .entity-list-item-count {
  background: rgba(var(--surgerly-primary-rgb, 190, 155, 90), 0.16);
  color: var(--surgerly-primary, #be9b5a);
}

/* Right pane — wraps the per-entity sub-header + toolbar + grid,
   or (on the overview/landing page) the empty-state prompt. */
.entity-detail-pane {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  background: var(--surgerly-white, #fff);
}

.entity-detail-pane-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2.5rem;
  text-align: center;
  color: var(--surgerly-muted, #666);
}

/* Loading veil — covers the right pane while selectEntity() fetches
   meta + grid layout. Absolutely positioned inside the pane so the
   surrounding chrome (header + sidebar) stays interactive. */
.entity-detail-pane { position: relative; }
.entity-detail-pane-loading {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(1px);
  z-index: 5;
  color: var(--surgerly-muted, #6a6e7a);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
}
.entity-detail-pane-loading[hidden] { display: none; }

/* Bootstrap's d-flex utility sets `display: flex !important`, which
   stomps the browser's default `[hidden] { display: none }`. Force
   it back so the grid pane and empty-state pane respect their
   hidden attribute — without this, both render simultaneously on
   the entities-overview page. */
.entity-detail-pane-grid[hidden],
.entity-detail-pane-empty[hidden] { display: none !important; }
.entity-detail-pane-spinner {
  width: 28px;
  height: 28px;
  border: 3px solid rgba(var(--surgerly-shadow-rgb, 0,0,0), 0.08);
  border-top-color: var(--surgerly-primary, #be9b5a);
  border-radius: 50%;
  animation: entityPaneSpin 0.8s linear infinite;
}
@keyframes entityPaneSpin { to { transform: rotate(360deg); } }
.entity-detail-pane-empty h5 {
  margin-bottom: 0.5rem;
  font-weight: 600;
  color: var(--surgerly-text, #1f2330);
}
.entity-detail-pane-empty .material-symbols-outlined {
  font-size: 36px;
  color: var(--surgerly-muted, #999);
  margin-bottom: 12px;
}

/* Per-entity sub-header inside the detail pane (entity name +
   description). Sits between the page header and the toolbar. */
.entity-detail-pane-header {
  padding: 14px 16px;
  border-bottom: 1px solid var(--surgerly-border, #e6e6e6);
  flex: 0 0 auto;
}
.entity-detail-pane-header h3 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
}
.entity-detail-pane-header .cc-sub {
  margin-top: 4px;
  font-size: 0.82rem;
  color: var(--surgerly-muted, #666);
}

/* ===== Entity-detail side drawer =====
   Slide-in panel that hosts the entity_editor block when a grid row is
   clicked. Uses position: fixed so it floats over the table without
   re-layouting; the ag-Grid behind stays usable. */
.entity-drawer {
  position: fixed;
  /* Start below the navbar — the navbar is z-index 10010 and we
     can't reasonably outrank it (it'd cover the org switcher /
     search). Pushing the drawer down by the navbar's max-height
     keeps the drawer header (close X) visible and lets the user
     keep using the navbar while a row is open. */
  top: 3rem;
  right: 0;
  bottom: 0;
  width: clamp(420px, 55vw, 960px);
  background: var(--surgerly-white, #fff);
  border-left: 1px solid var(--surgerly-border, #e6e6e6);
  box-shadow: -10px 0 30px rgba(var(--surgerly-shadow-rgb, 0,0,0), 0.12);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
  z-index: 1080; /* above Bootstrap modals' backdrop, below modals */
}

.entity-drawer.is-open { transform: translateX(0); }

.entity-drawer[hidden] { display: none; }

.entity-drawer-backdrop {
  position: fixed;
  /* Match the drawer — start below the navbar so the navbar stays
     fully usable (org switcher, search) while the drawer is open. */
  top: 3rem;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(15, 18, 26, 0);
  transition: background 240ms ease;
  z-index: 1070;
  pointer-events: none;
}
.entity-drawer-backdrop.is-open {
  background: rgba(15, 18, 26, 0.32);
  pointer-events: auto;
}
.entity-drawer-backdrop[hidden] { display: none; }

.entity-drawer-header {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--surgerly-border, #e6e6e6);
  background: linear-gradient(180deg, rgba(31, 35, 48, 0.04) 0%, var(--surgerly-white, #fff) 100%);
}

.entity-drawer-title {
  flex: 1 1 auto;
  font-size: 14px;
  font-weight: 600;
  color: var(--surgerly-text, #1f2330);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.entity-drawer-iconbtn {
  background: transparent;
  border: 0;
  border-radius: 6px;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--surgerly-muted, #6a6e7a);
  text-decoration: none;
  cursor: pointer;
  flex: 0 0 auto;
}
.entity-drawer-iconbtn:hover { background: var(--surgerly-light-gray, rgba(0, 0, 0, 0.05)); color: var(--surgerly-text, #1f2330); }
.entity-drawer-iconbtn .material-symbols-outlined { font-size: 20px; }

/* Close button — heavier styling so the "X" reads unmistakably as
   the way out. Bordered, slightly larger glyph, distinct hover that
   tints the icon red. Sits at the right edge of the drawer header
   where users instinctively look. */
.entity-drawer-iconbtn--close {
  border: 1px solid var(--surgerly-border, #d8d9de);
  background: var(--surgerly-white, #fff);
  color: var(--surgerly-text, #1f2330);
}
.entity-drawer-iconbtn--close .material-symbols-outlined {
  font-size: 22px;
  font-weight: 600;
}
.entity-drawer-iconbtn--close:hover {
  background: rgba(220, 53, 69, 0.08);
  border-color: rgba(220, 53, 69, 0.4);
  color: var(--surgerly-danger-strong, #b02a37);
}

.entity-drawer-body {
  flex: 1 1 auto;
  overflow: auto;
  position: relative;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* The entity_editor block uses #detailsSplit as its root container —
   force it to fill the drawer body so its inner Split.js + ag-Grid
   stretch correctly. */
.entity-drawer-body #detailsSplit { flex: 1 1 auto; min-height: 0; }
.entity-drawer-body .nav-tabs      { flex-wrap: wrap; }

/* Lock background scroll while the drawer is open. */
body.entity-drawer-locked { overflow: hidden; }

/* ===== Advanced Reporting ===== */
/* Palette (inverse Surgerly): var(--surgerly-border, #e1e4e6) (silver) · var(--surgerly-calendar, #4164a5) (steel) · var(--surgerly-grey-800, #18242e) (navy) · #000000 (void) */
.adv-reporting-root {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  background: var(--surgerly-grey-800, #18242e);
}

.adv-reporting-toolbar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--surgerly-calendar, #4164a5);
  background: var(--surgerly-grey-900, #101820);
}

.adv-reporting-toolbar .fw-semibold {
  color: var(--surgerly-border, #e1e4e6) !important;
}

.adv-reporting-toolbar .btn-outline-surgerly {
  --bs-btn-color: var(--surgerly-border, #e1e4e6);
  --bs-btn-border-color: var(--surgerly-calendar, #4164a5);
  --bs-btn-hover-color: #000000;
  --bs-btn-hover-bg: var(--surgerly-border, #e1e4e6);
  --bs-btn-hover-border-color: var(--surgerly-border, #e1e4e6);
}

.adv-reporting-toolbar #advRunBtn {
  background: #000000;
  border-color: #000000;
  color: var(--surgerly-calendar, #4164a5);
}

.adv-reporting-toolbar #advRunBtn:hover {
  background: var(--surgerly-border, #e1e4e6);
  border-color: var(--surgerly-border, #e1e4e6);
  color: #000000;
}

/* Editor pane */
.adv-editor-pane {
  flex: 0 0 35%;
  min-height: 80px;
  display: flex;
  overflow: hidden;
}

.adv-sql-editor {
  flex: 1;
  overflow: hidden;
}

.adv-sql-editor .CodeMirror {
  height: 100%;
  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
  font-size: 0.875rem;
  line-height: 1.5;
}

/* CodeMirror Surgerly Theme */
.cm-s-surgerly.CodeMirror {
  background: var(--surgerly-border, #e1e4e6);
  color: #000000;
}
.cm-s-surgerly .CodeMirror-gutters {
  background: var(--surgerly-grey-300, #d0d3d5);
  color: var(--surgerly-grey-500, #72726b);
  border-right: 1px solid var(--surgerly-calendar, #4164a5);
}
.cm-s-surgerly .CodeMirror-linenumber {
  color: var(--surgerly-grey-500, #72726b);
}
.cm-s-surgerly .CodeMirror-cursor {
  border-left-color: #000000;
}
.cm-s-surgerly .CodeMirror-selected {
  background: var(--surgerly-calendar, #4164a5) !important;
}
.cm-s-surgerly .CodeMirror-focused .CodeMirror-selected {
  background: var(--surgerly-calendar, #4164a5) !important;
}
.cm-s-surgerly .CodeMirror-activeline-background {
  background: var(--surgerly-light-gray, #eef0f2);
}
.cm-s-surgerly .CodeMirror-matchingbracket {
  background: var(--surgerly-calendar, #4164a5);
  color: #000000 !important;
  font-weight: bold;
}
/* SQL syntax colors */
.cm-s-surgerly .cm-keyword {
  color: var(--surgerly-grey-800, #18242e);
  font-weight: bold;
}
.cm-s-surgerly .cm-string {
  color: var(--surgerly-warning-text, #8b4513);
}
.cm-s-surgerly .cm-number {
  color: var(--surgerly-accent-text, #6b3fa0);
}
.cm-s-surgerly .cm-comment {
  color: var(--surgerly-grey-500, #72726b);
  font-style: italic;
}
.cm-s-surgerly .cm-operator {
  color: #000000;
}
.cm-s-surgerly .cm-builtin {
  color: var(--surgerly-calendar, #4164a5);
  font-weight: bold;
}
.cm-s-surgerly .cm-variable-2 {
  color: var(--surgerly-calendar, #4164a5);
}
.cm-s-surgerly .cm-def {
  color: #000000;
}
.cm-s-surgerly .cm-atom {
  color: var(--surgerly-accent-text, #6b3fa0);
}
/* CodeMirror autocomplete hint dropdown */
.CodeMirror-hints {
  background: var(--surgerly-grey-900, #101820) !important;
  border: 1px solid var(--surgerly-calendar, #4164a5) !important;
  border-radius: 0.35rem;
  box-shadow: 0 4px 12px rgba(var(--surgerly-shadow-rgb, 0,0,0), 0.3);
}
.CodeMirror-hint {
  color: var(--surgerly-border, #e1e4e6) !important;
  padding: 0.25rem 0.5rem;
  font-size: 0.8rem;
}
.CodeMirror-hint-active {
  background: var(--surgerly-calendar, #4164a5) !important;
  color: #000000 !important;
}
/* CodeMirror placeholder */
.cm-s-surgerly .CodeMirror-placeholder {
  color: var(--surgerly-grey-500, #72726b);
}

/* Drag handle */
.adv-drag-handle {
  flex: 0 0 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: row-resize;
  background: var(--surgerly-grey-900, #101820);
  border-top: 1px solid var(--surgerly-calendar, #4164a5);
  border-bottom: 1px solid var(--surgerly-calendar, #4164a5);
  transition: background 0.15s;
}

.adv-drag-handle:hover,
.adv-drag-handle:active {
  background: var(--surgerly-calendar, #4164a5);
}

.adv-drag-handle-line {
  width: 40px;
  height: 2px;
  background: var(--surgerly-border, #e1e4e6);
  border-radius: 1px;
}

/* Results pane */
.adv-results-pane {
  flex: 1 1 0;
  min-height: 80px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--surgerly-grey-800, #18242e);
}

.adv-results-tabs {
  flex: 0 0 auto;
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--surgerly-calendar, #4164a5);
  background: var(--surgerly-grey-900, #101820);
  padding: 0 0.5rem;
}

.adv-tab {
  padding: 0.4rem 0.75rem;
  border: none;
  background: none;
  font-size: 0.8rem;
  color: var(--surgerly-grey-500, #72726b);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color 0.15s, border-color 0.15s;
}

.adv-tab:hover {
  color: var(--surgerly-border, #e1e4e6);
}

.adv-tab.active {
  color: var(--surgerly-border, #e1e4e6);
  border-bottom-color: var(--surgerly-border, #e1e4e6);
  font-weight: 600;
}

.adv-tab-content {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

.adv-results-empty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  pointer-events: none;
}

.adv-results-empty .material-symbols-outlined {
  color: var(--surgerly-calendar, #4164a5) !important;
}

.adv-results-empty p {
  color: var(--surgerly-grey-500, #72726b) !important;
}

.adv-results-footer {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.25rem 0.75rem;
  font-size: 0.75rem;
  color: var(--surgerly-grey-500, #72726b);
  border-top: 1px solid var(--surgerly-calendar, #4164a5);
  background: var(--surgerly-grey-900, #101820);
}

/* Messages tab */
.adv-messages-output {
  flex: 1 1 auto;
  overflow: auto;
  padding: 0.5rem 0.75rem;
  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
  font-size: 0.8rem;
  background: var(--surgerly-grey-800, #18242e);
}

.adv-message {
  padding: 0.25rem 0;
  border-bottom: 1px solid var(--surgerly-grey-900, #121a22);
}

.adv-message-time {
  color: var(--surgerly-grey-500, #72726b);
}

.adv-message-prefix {
  font-weight: 600;
}

.adv-message-prefix.error {
  color: var(--surgerly-danger-border, #ffb3a7);
}

.adv-message-prefix.success {
  color: var(--surgerly-border, #e1e4e6);
}

.adv-message-text {
  color: var(--surgerly-border, #e1e4e6);
  white-space: pre-wrap;
  word-break: break-word;
}

/* Status indicator */
.adv-query-status {
  font-size: 0.75rem;
  font-weight: 600;
}

.adv-query-status.running {
  color: var(--surgerly-border, #e1e4e6);
}

.adv-query-status.success {
  color: var(--surgerly-border, #e1e4e6);
}

.adv-query-status.error {
  color: var(--surgerly-danger-border, #ffb3a7);
}

/* AG Grid overrides for advanced reporting */
.adv-results-pane .ag-theme-alpine {
  --ag-background-color: var(--surgerly-grey-800, #18242e);
  --ag-foreground-color: var(--surgerly-border, #e1e4e6);
  --ag-header-background-color: var(--surgerly-grey-900, #101820);
  --ag-header-foreground-color: var(--surgerly-border, #e1e4e6);
  --ag-odd-row-background-color: var(--surgerly-grey-900, #121a22);
  --ag-row-hover-color: var(--surgerly-calendar, #4164a5);
  --ag-row-hover-text-color: #000000;
  --ag-border-color: var(--surgerly-grey-900, #121a22);
  --ag-secondary-border-color: var(--surgerly-grey-900, #121a22);
  --ag-row-border-color: var(--surgerly-grey-900, #121a22);
  --ag-selected-row-background-color: rgba(225, 228, 230, 0.15);
  --ag-range-selection-background-color: rgba(225, 228, 230, 0.2);
  --ag-range-selection-border-color: var(--surgerly-border, #e1e4e6);
  --ag-input-focus-border-color: var(--surgerly-border, #e1e4e6);
  --ag-checkbox-checked-color: var(--surgerly-border, #e1e4e6);
  --ag-alpine-active-color: var(--surgerly-calendar, #4164a5);
}

.btn-surgerly-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--surgerly-primary);
  --bs-btn-border-color: var(--surgerly-primary);

  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: color-mix(in srgb, var(--surgerly-primary) 90%, black);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--surgerly-primary) 85%, black);

  --bs-btn-focus-shadow-rgb: var(--surgerly-primary-rgb);

  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: color-mix(in srgb, var(--surgerly-primary) 80%, black);
  --bs-btn-active-border-color: color-mix(in srgb, var(--surgerly-primary) 75%, black);

  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--surgerly-primary);
  --bs-btn-disabled-border-color: var(--surgerly-primary);
}

.btn-surgerly-outline-primary {
  --bs-btn-color: var(--surgerly-primary);
  --bs-btn-border-color: var(--surgerly-primary);

  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--surgerly-primary);
  --bs-btn-hover-border-color: var(--surgerly-primary);

  --bs-btn-focus-shadow-rgb: var(--surgerly-primary-rgb);

  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: color-mix(in srgb, var(--surgerly-primary) 90%, black);
  --bs-btn-active-border-color: color-mix(in srgb, var(--surgerly-primary) 90%, black);

  --bs-btn-disabled-color: var(--surgerly-primary);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--surgerly-primary);

  --bs-gradient: none;
}

/* ───── Diary Management page ───── */
.dm-root {
  display: flex;
  height: 100%;
  overflow: hidden;
}

.dm-sidebar {
  width: 240px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--bs-border-color, var(--surgerly-border, #dee2e6));
  background: var(--surgerly-grey-50, #fafafa);
  overflow: hidden;
}
.dm-sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.65rem 0.85rem;
  border-bottom: 1px solid var(--bs-border-color, var(--surgerly-border, #dee2e6));
  flex-shrink: 0;
}
#dmDiaryList { overflow-y: auto; flex: 1; }

.dm-diary-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.85rem;
  cursor: pointer;
  border-left: 3px solid transparent;
  transition: background 0.1s;
}
.dm-diary-item:hover  { background: var(--surgerly-light-gray, #eef0f2); }
.dm-diary-item.active { background: var(--surgerly-accent-bg, #e8e7fd); border-left-color: var(--bs-primary, var(--surgerly-accent, #6862F9)); }
.dm-diary-color {
  width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
}
.dm-diary-name { font-size: 0.82rem; font-weight: 500; }
.dm-diary-sub  { font-size: 0.72rem; color: var(--bs-secondary, var(--surgerly-grey-500, #6c757d)); }

.dm-loading { padding: 0.75rem 0.85rem; font-size: 0.8rem; color: var(--bs-secondary); }

.dm-detail {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.dm-empty {
  margin: auto;
  text-align: center;
  padding: 2rem;
}
.dm-detail-inner { padding: 1.25rem; }
.dm-detail-header {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1.25rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--bs-border-color, var(--surgerly-border, #dee2e6));
}
.dm-detail-swatch {
  width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0;
}
.dm-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}

.dm-member-card {
  border: 1px solid var(--bs-border-color, var(--surgerly-border, #dee2e6));
  border-radius: 0.375rem;
  padding: 0.65rem 0.85rem;
  margin-bottom: 0.65rem;
}
.dm-member-header {
  display: flex;
  align-items: center;
  margin-bottom: 0.4rem;
}
.dm-sched-list { display: flex; flex-direction: column; gap: 0.25rem; }
.dm-sched-row  { display: flex; align-items: center; font-size: 0.8rem; gap: 0.3rem; }

.dm-member-row {
  padding: 0.35rem 0.5rem;
  border-radius: 0.25rem;
  cursor: pointer;
  font-size: 0.82rem;
}
.dm-member-row:hover { background: var(--surgerly-light-gray, #eef0f2); }

.btn-xs { padding: 0.15rem 0.4rem; font-size: 0.72rem; }

.users-sidebar {
  width: 320px;
  min-width: 240px;
}

#usersSidebar .sidebar-header {
  padding: 0.5rem !important;
}

#formsSidebar .sidebar-header {
  padding: 0.5rem !important;
}

/* ===== Dark mode – only rules that can't use CSS variables ===== */
[data-bs-theme="dark"] .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
}

/* ═══════════ Billing (invoices / payments / refunds / dashboard) ═══════════
   The billing ledger system lives in billing.css, linked per-block by the
   billing templates (and patient_summary.html for the Billing tab). */

/* Correspondence template category pill — sits next to the medium pill,
   compact select. Marketing is the loud option (so a transactional
   template's pill is muted, signaling "no unsubscribe gating"). */
.ct-category-pill {
  border: 1px solid var(--surgerly-border, #d8d9de);
  background: var(--surgerly-grey-50, #fafafa);
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--surgerly-grey-600, #555);
  cursor: pointer;
  margin-right: 6px;
}
.ct-category-pill:focus {
  outline: 2px solid var(--surgerly-accent, #6862F9);
  outline-offset: 1px;
}

/* Patient engagement tier chip — small inline badge for surfaces that
   show a single-cell summary of someone's engagement. */
.engagement-chip {
  display: inline-block;
  font-size: 0.7rem;
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.engagement-chip--hot     { background: var(--surgerly-danger-bg, #fdecea); color: var(--surgerly-danger-strong, #c0392b); }
.engagement-chip--warm    { background: var(--surgerly-warning-bg, #fff3cd); color: var(--surgerly-warning-text, #8a6d00); }
.engagement-chip--cold    { background: var(--surgerly-accent-bg, #e8f0fe); color: var(--surgerly-calendar, #2c5fa3); }
.engagement-chip--dormant { background: var(--surgerly-light-gray, #eef0f4); color: var(--surgerly-grey-500, #6c757d); }

/* Conversations inbox — three-column shell (folders / list / message
   pane) with the same chrome as tasks/pipelines so navigation feels
   consistent. */
.conversations-shell {
  display: flex;
  flex-direction: row;
  height: 100%;
  width: 100%;
  overflow: hidden;
}
.conversations-folders {
  flex: 0 0 180px;
  border-right: 1px solid var(--surgerly-border, #e3e4e8);
  padding: 12px 8px;
  font-size: 0.85rem;
  background: var(--surgerly-grey-50, #fafafa);
  overflow-y: auto;
}
.conversations-folders .conv-folder {
  padding: 6px 10px;
  border-radius: 6px;
  cursor: pointer;
  margin-bottom: 2px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.conversations-folders .conv-folder:hover { background: var(--surgerly-light-gray, #ececf2); }
.conversations-folders .conv-folder--active { background: var(--surgerly-grey-200, #e3e4ed); font-weight: 600; }
/* Patient search — sits above the folders; same tokens as the sidebar so
   it reads as part of the chrome. */
.conversations-folders .conv-search {
  width: 100%;
  padding: 6px 10px;
  margin-bottom: 10px;
  border: 1px solid var(--surgerly-border, #e3e4e8);
  border-radius: 6px;
  font-size: 0.85rem;
  background: #fff;
}
.conversations-folders .conv-search:focus {
  outline: none;
  border-color: var(--surgerly-primary, #be9b5a);
}
/* "Channels" sub-heading separating the medium filters from the folders.
   The top border + breathing room mark where folders end and the
   channel filter group begins. */
.conversations-folders .conv-folders-subhead {
  margin: 18px 2px 6px;
  padding: 12px 8px 0;
  border-top: 1px solid var(--surgerly-border, #e3e4e8);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--surgerly-muted, #6a6e7a);
}
.conversations-list {
  flex: 0 0 320px;
  overflow-y: auto;
  border-right: 1px solid var(--surgerly-border, #e3e4e8);
}
.conversations-list .conv-item {
  padding: 10px 12px;
  cursor: pointer;
  border-bottom: 1px solid var(--surgerly-grey-100, #f1f1f4);
}
.conversations-list .conv-item--active { background: var(--surgerly-grey-200, #e3e4ed); }
.conversations-list .conv-item-name { font-weight: 600; font-size: 0.85rem; }
.conversations-list .conv-item-preview {
  font-size: 0.78rem;
  color: var(--surgerly-grey-500, #6c757d);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}
.conversations-list .conv-item-time {
  font-size: 0.7rem;
  color: var(--surgerly-dark-gray, #999);
  float: right;
}
.conversations-pane {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #fff;
}
.conversations-pane-header {
  padding: 10px 14px;
  border-bottom: 1px solid var(--surgerly-border, #e3e4e8);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.conversations-pane-messages {
  flex: 1;
  overflow-y: auto;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.conv-msg {
  max-width: 70%;
  padding: 8px 12px;
  border-radius: 14px;
  font-size: 0.85rem;
  line-height: 1.45;
  cursor: pointer;
}
.conv-msg:hover { filter: brightness(0.97); }
.conv-msg--inbound  { background: var(--surgerly-grey-100, #f1f3f5); align-self: flex-start; }
.conv-msg--outbound {
  background: var(--surgerly-primary, #be9b5a);
  color: #fff;
  align-self: flex-end;
}
/* Who the message came from — staff name / patient / "Automated · completed
   by …". Small + semi-bold above the content, legible on both bubble tints. */
.conv-msg-sender { font-size: 0.68rem; font-weight: 600; color: var(--surgerly-grey-500, #6c757d); margin-bottom: 2px; }
.conv-msg--outbound .conv-msg-sender { color: rgba(255,255,255,0.85); }
.conv-msg-subject { font-weight: 600; margin-bottom: 2px; }
.conv-msg-snippet { word-break: break-word; }
.conv-msg-time { font-size: 0.65rem; color: var(--surgerly-dark-gray, #999); margin-top: 3px; }
.conv-msg--outbound .conv-msg-time { color: rgba(255,255,255,0.75); }
.conv-empty { padding: 14px; color: var(--surgerly-dark-gray, #999); font-size: 0.85rem; }
/* Foot of the thread list while the next page is being scrolled in. */
.conv-more {
  padding: 12px 14px;
  text-align: center;
  color: var(--surgerly-dark-gray, #999);
  font-size: 0.78rem;
}

.conversations-pane-composer {
  border-top: 1px solid var(--surgerly-border, #e3e4e8);
  padding: 10px 14px;
  display: flex;
  align-items: flex-end;
  gap: 8px;
}
.conv-composer-box {
  flex: 1;
  border: 1px solid var(--surgerly-border, #d8d9de);
  border-radius: 8px;
  overflow: hidden;
}
.conv-composer-toolbar {
  display: flex;
  gap: 2px;
  padding: 4px 6px;
  background: var(--surgerly-grey-100, #f6f6f8);
  border-bottom: 1px solid var(--surgerly-border, #e3e4e8);
}
.conv-fmt {
  border: none;
  background: transparent;
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 0.8rem;
  cursor: pointer;
  color: var(--surgerly-grey-700, #444);
}
.conv-fmt:hover { background: var(--surgerly-grey-200, #e3e4ed); }
.conv-composer-input {
  min-height: 44px;
  max-height: 180px;
  overflow-y: auto;
  padding: 8px 10px;
  font-size: 0.85rem;
  line-height: 1.45;
  outline: none;
}
.conv-composer-input:empty:before {
  content: attr(data-placeholder);
  color: var(--surgerly-dark-gray, #999);
}
.conv-composer-error {
  color: var(--surgerly-danger-strong, #b00020);
  font-size: 0.75rem;
  padding: 0 10px 4px;
}
.conv-composer-error:empty { display: none; }
.conv-send-btn {
  background: var(--surgerly-primary, #be9b5a);
  color: #fff;
  border: none;
}
.conv-send-btn:hover  { filter: brightness(0.95); color: #fff; }
.conv-send-btn:disabled { opacity: 0.6; }

/* Message modal — the full content of one correspondence. */
.conv-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(var(--surgerly-shadow-rgb, 0,0,0), 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1050;
}
.conv-modal {
  background: #fff;
  border-radius: 10px;
  width: min(720px, 92vw);
  max-height: 86vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 10px 40px rgba(var(--surgerly-shadow-rgb, 0,0,0), 0.25);
}
.conv-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--surgerly-border, #e3e4e8);
}
.conv-modal-title { font-weight: 600; font-size: 0.95rem; }
.conv-modal-close {
  border: none;
  background: transparent;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  color: var(--surgerly-dark-gray, #888);
}
.conv-modal-close:hover { color: var(--surgerly-grey-800, #333); }
.conv-modal-meta {
  padding: 6px 16px;
  font-size: 0.75rem;
  color: var(--surgerly-dark-gray, #888);
  border-bottom: 1px solid var(--surgerly-border, #f0f0f2);
}
.conv-modal-body {
  flex: 1;
  width: 100%;
  min-height: 320px;
  border: none;
}

/* Signature button (composer toolbar) + signature config modal. */
.conv-sig-btn {
  margin-left: auto;
  border: none;
  background: transparent;
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 0.8rem;
  cursor: pointer;
  color: var(--surgerly-grey-700, #444);
}
.conv-sig-btn:hover { background: var(--surgerly-grey-200, #e3e4ed); }
.conv-sig-body { padding: 14px 16px; overflow-y: auto; }
.conv-sig-hint {
  margin: 0 0 12px;
  font-size: 0.78rem;
  color: var(--surgerly-grey-500, #6c757d);
  line-height: 1.45;
}
.conv-sig-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--surgerly-grey-700, #444);
  margin: 10px 0 4px;
}
.conv-sig-input {
  min-height: 70px;
  max-height: 200px;
  overflow-y: auto;
  border: 1px solid var(--surgerly-border, #d8d9de);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 0.85rem;
  line-height: 1.45;
  outline: none;
}
.conv-sig-input:empty:before {
  content: attr(data-placeholder);
  color: var(--surgerly-dark-gray, #999);
}
.conv-sig-sms {
  width: 100%;
  box-sizing: border-box;
  resize: vertical;
  border: 1px solid var(--surgerly-border, #d8d9de);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 0.85rem;
}
.conv-sig-actions {
  margin-top: 14px;
  display: flex;
  justify-content: flex-end;
}