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

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

#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;
    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;
    max-width: 9rem;
}
.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: var(--surgerly-white);
    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(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(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 {
    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);
}
.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;
}
.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(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(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(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);
}

/* ── 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: #b02a37; box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.18); }
.navbar-tasks-priority--high   { background: #dc3545; }
.navbar-tasks-priority--medium { background: #f0ad4e; }
.navbar-tasks-priority--low    { background: #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: #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;
    background: #dc3545;
    color: #fff;
    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; }

/* 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(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;
}

/* 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: #648fb2;
  --bs-btn-border-color: #648fb2;

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

  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #4c7090;        /* ~17% darker */
  --bs-btn-active-border-color: #4c7090;

  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #cfdbe6;      /* softened primary */
  --bs-btn-disabled-border-color: #cfdbe6;

  --bs-btn-focus-shadow-rgb: 100,143,178; /* #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: #587fa0 !important;
  border-color: #587fa0 !important;
}
.btn.btn-surgerly:active,
.btn.btn-surgerly.active,
.show > .btn.btn-surgerly.dropdown-toggle {
  color: #fff !important;
  background-color: #4c7090 !important;
  border-color: #4c7090 !important;
}

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

  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #648fb2;
  --bs-btn-hover-border-color: #648fb2;

  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #4c7090;
  --bs-btn-active-border-color: #4c7090;

  --bs-btn-disabled-color: #9eb8cf;
  --bs-btn-disabled-border-color: #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: #648fb2 !important;
  border-color: #648fb2 !important;
}
.btn.btn-outline-surgerly:active,
.btn.btn-outline-surgerly.active,
.show > .btn.btn-outline-surgerly.dropdown-toggle {
  color: #fff !important;
  background-color: #4c7090 !important;
  border-color: #4c7090 !important;
}

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

  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #91b1cc;   /* darker */
  --bs-btn-hover-border-color: #91b1cc;

  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #7fa2c1;  /* more dark */
  --bs-btn-active-border-color: #7fa2c1;

  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #d9e4ed;
  --bs-btn-disabled-border-color: #d9e4ed;

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

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

  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #6c97ba;
  --bs-btn-hover-border-color: #6c97ba;

  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #5f88a9;
  --bs-btn-active-border-color: #5f88a9;

  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #cfe0ed;
  --bs-btn-disabled-border-color: #cfe0ed;

  --bs-btn-focus-shadow-rgb: 121,166,203;
}
.btn.btn-surgerly-accent:hover,
.btn.btn-surgerly-accent:focus:hover {
  color:#fff !important; background:#6c97ba !important; border-color:#6c97ba !important;
}
.btn.btn-surgerly-accent:active,
.btn.btn-surgerly-accent.active,
.show > .btn.btn-surgerly-accent.dropdown-toggle {
  color:#fff !important; background:#5f88a9 !important; border-color:#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(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: #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 30%;
    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;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.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: #4164a5;
    background-color: #4164a5;
}

.slide-btn--dark .slide-btn__icon {
    background-color: #4164a5;
}

.slide-btn--dark:hover {
    background: #4164a5;
}

.slide-btn--dark:active {
    border-color: #4164a5;
}

.slide-btn--dark:active .slide-btn__icon {
    background-color: #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: #4164a5;
}

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

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

.slide-btn--adv-run:hover {
    background: #e1e4e6;
    border-color: #e1e4e6;
}

.slide-btn--adv-run:hover .slide-btn__icon {
    background-color: #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.5rem;
    overflow: auto;
    padding-right: 0.25rem;
}

.saved-report-card {
    border: 1px solid var(--surgerly-border);
    border-radius: 0.5rem;
    background: var(--surgerly-white);
    text-align: left;
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    width: 100%;
    display: block;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.saved-report-card:hover {
    border-color: var(--surgerly-primary);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}

.saved-report-card.active {
    border-color: var(--surgerly-primary);
    background: rgba(43, 124, 255, 0.08);
    box-shadow: 0 0 0 1px rgba(43, 124, 255, 0.25);
}

.saved-report-title {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--surgerly-text);
}

.saved-report-meta {
    font-size: 0.75rem;
    color: var(--surgerly-dark-gray);
    margin-top: 0.25rem;
}

#advancedModeIcon {
    color: var(--surgerly-primary);
    margin-left: 0.2rem;
}

.saved-report-delete {
    line-height: 1;
    border-radius: 0.375rem;
    transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.saved-report-delete:hover,
.saved-report-delete:focus-visible {
    background: rgba(220, 53, 69, 0.12);
    color: #dc3545;
    box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.2);
}

.saved-report-delete:active {
    background: rgba(220, 53, 69, 0.2);
    color: #b02a37;
}

.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;
}

#alertModal {
    position: absolute;
}

#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(0,0,0,0.04);
  border-right: 1px solid rgba(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: #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: #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: #b02a37;
  border-color: rgba(220, 53, 69, 0.4);
}

.ghost-btn--danger:hover {
  background: rgba(220, 53, 69, 0.08);
  color: #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(0, 0, 0, .12);
  background: transparent;
  color: rgba(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(0, 0, 0, .03);
  border-color: rgba(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(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(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: #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): #e1e4e6 (silver) · #4164a5 (steel) · #18242e (navy) · #000000 (void) */
.adv-reporting-root {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  background: #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 #4164a5;
  background: #101820;
}

.adv-reporting-toolbar .fw-semibold {
  color: #e1e4e6 !important;
}

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

.adv-reporting-toolbar #advRunBtn {
  background: #000000;
  border-color: #000000;
  color: #4164a5;
}

.adv-reporting-toolbar #advRunBtn:hover {
  background: #e1e4e6;
  border-color: #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: #e1e4e6;
  color: #000000;
}
.cm-s-surgerly .CodeMirror-gutters {
  background: #d0d3d5;
  color: #72726b;
  border-right: 1px solid #4164a5;
}
.cm-s-surgerly .CodeMirror-linenumber {
  color: #72726b;
}
.cm-s-surgerly .CodeMirror-cursor {
  border-left-color: #000000;
}
.cm-s-surgerly .CodeMirror-selected {
  background: #4164a5 !important;
}
.cm-s-surgerly .CodeMirror-focused .CodeMirror-selected {
  background: #4164a5 !important;
}
.cm-s-surgerly .CodeMirror-activeline-background {
  background: #eef0f2;
}
.cm-s-surgerly .CodeMirror-matchingbracket {
  background: #4164a5;
  color: #000000 !important;
  font-weight: bold;
}
/* SQL syntax colors */
.cm-s-surgerly .cm-keyword {
  color: #18242e;
  font-weight: bold;
}
.cm-s-surgerly .cm-string {
  color: #8b4513;
}
.cm-s-surgerly .cm-number {
  color: #6b3fa0;
}
.cm-s-surgerly .cm-comment {
  color: #72726b;
  font-style: italic;
}
.cm-s-surgerly .cm-operator {
  color: #000000;
}
.cm-s-surgerly .cm-builtin {
  color: #4164a5;
  font-weight: bold;
}
.cm-s-surgerly .cm-variable-2 {
  color: #4164a5;
}
.cm-s-surgerly .cm-def {
  color: #000000;
}
.cm-s-surgerly .cm-atom {
  color: #6b3fa0;
}
/* CodeMirror autocomplete hint dropdown */
.CodeMirror-hints {
  background: #101820 !important;
  border: 1px solid #4164a5 !important;
  border-radius: 0.35rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.CodeMirror-hint {
  color: #e1e4e6 !important;
  padding: 0.25rem 0.5rem;
  font-size: 0.8rem;
}
.CodeMirror-hint-active {
  background: #4164a5 !important;
  color: #000000 !important;
}
/* CodeMirror placeholder */
.cm-s-surgerly .CodeMirror-placeholder {
  color: #72726b;
}

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

.adv-drag-handle:hover,
.adv-drag-handle:active {
  background: #4164a5;
}

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

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

.adv-results-tabs {
  flex: 0 0 auto;
  display: flex;
  gap: 0;
  border-bottom: 1px solid #4164a5;
  background: #101820;
  padding: 0 0.5rem;
}

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

.adv-tab:hover {
  color: #e1e4e6;
}

.adv-tab.active {
  color: #e1e4e6;
  border-bottom-color: #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: #4164a5 !important;
}

.adv-results-empty p {
  color: #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: #72726b;
  border-top: 1px solid #4164a5;
  background: #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: #18242e;
}

.adv-message {
  padding: 0.25rem 0;
  border-bottom: 1px solid #121a22;
}

.adv-message-time {
  color: #72726b;
}

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

.adv-message-prefix.error {
  color: #ffb3a7;
}

.adv-message-prefix.success {
  color: #e1e4e6;
}

.adv-message-text {
  color: #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: #e1e4e6;
}

.adv-query-status.success {
  color: #e1e4e6;
}

.adv-query-status.error {
  color: #ffb3a7;
}

/* AG Grid overrides for advanced reporting */
.adv-results-pane .ag-theme-alpine {
  --ag-background-color: #18242e;
  --ag-foreground-color: #e1e4e6;
  --ag-header-background-color: #101820;
  --ag-header-foreground-color: #e1e4e6;
  --ag-odd-row-background-color: #121a22;
  --ag-row-hover-color: #4164a5;
  --ag-row-hover-text-color: #000000;
  --ag-border-color: #121a22;
  --ag-secondary-border-color: #121a22;
  --ag-row-border-color: #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: #e1e4e6;
  --ag-input-focus-border-color: #e1e4e6;
  --ag-checkbox-checked-color: #e1e4e6;
  --ag-alpine-active-color: #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, #dee2e6);
  background: #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, #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: #eef0f2; }
.dm-diary-item.active { background: #e8e7fd; border-left-color: var(--bs-primary, #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, #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, #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, #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: #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 */
.billing-shell {
  height: 100%;
  display: flex;
  overflow: hidden;
}

.billing-sidebar {
  flex: 0 0 30%;
  width: 30%;
  max-width: 30%;
  min-width: 200px;
  display: flex;
  flex-direction: column;
  min-height: 0;
  position: relative;
  overflow: hidden;
  border-right: 1px solid var(--surgerly-border);
  background: var(--surgerly-light-gray);
  transition: width 160ms ease, min-width 160ms ease, flex-basis 160ms ease;
}

.billing-sidebar.collapsed {
  width: 18px !important;
  min-width: 18px !important;
  flex: 0 0 18px !important;
  padding: 0;
  overflow: visible;
}

.billing-main {
  flex: 1;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: var(--surgerly-light-gray);
}

.billing-tabs {
  display: flex;
  flex-shrink: 0;
  border-bottom: 1px solid var(--surgerly-border);
}

.billing-tab {
  flex: 1;
  padding: 0.4rem 0.25rem;
  font-size: 0.75rem;
  font-weight: 500;
  border: none;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--surgerly-text);
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.billing-tab:hover {
  color: var(--surgerly-primary);
}

.billing-tab.active {
  color: var(--surgerly-primary);
  border-bottom-color: var(--surgerly-primary);
  font-weight: 600;
}

.billing-panel {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.billing-panel-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scroll-behavior: smooth;
  padding: 0.75rem;
}

.billing-panel-body .form-label {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--surgerly-dark-gray);
  margin-bottom: 0.3rem;
}

.billing-panel-body::-webkit-scrollbar {
  width: 4px;
}

.billing-panel-body::-webkit-scrollbar-track {
  background: transparent;
}

.billing-panel-body::-webkit-scrollbar-thumb {
  background: var(--surgerly-border);
  border-radius: 4px;
}

.billing-panel-body::-webkit-scrollbar-thumb:hover {
  background: var(--surgerly-dark-gray);
}

#billingBuilder .sidebar-header {
  padding: 0.6rem 0.75rem;
  border: none;
  background: var(--surgerly-primary);
  margin: 0.5rem 0.5rem 0 0.5rem;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

#billingBuilder .sidebar-header .sidebar-title {
  color: #ffffff;
}

#billingBuilder .sidebar-header .icon-btn {
  color: rgba(255, 255, 255, 0.85);
  border-color: transparent;
}

#billingBuilder .sidebar-header .icon-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: transparent;
  color: #ffffff;
}

/* ---- Invoice right panel ---- */
.inv-topbar {
  padding: 0.65rem 1rem;
  border-bottom: 1px solid var(--surgerly-border);
  background: var(--surgerly-white);
  flex-shrink: 0;
}

.inv-number {
  font-size: 1rem;
  font-weight: 600;
}

.inv-body {
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
  min-height: 0;
  position: relative;
}

/* Skeleton overlay — covers inv-body while API is in flight */
.inv-body-skeleton {
  position: absolute;
  inset: 0;
  z-index: 5;
  background: var(--surgerly-white);
  overflow-y: auto;
  padding: 1rem;
}

.inv-skel-bar {
  display: block;
  background: #d5d9de;
  border-radius: 4px;
  animation: fadeInOut 1.6s ease-in-out infinite;
}

.inv-skel-meta-row {
  display: flex;
  align-items: center;
  padding: 0.35rem 0;
  border-bottom: 1px solid var(--surgerly-border);
  gap: 0.75rem;
}

.inv-skel-hidden {
  display: none !important;
}

.inv-meta-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 2rem;
  margin-bottom: 1.5rem;
}

.inv-meta-row {
  display: flex;
  align-items: baseline;
  padding: 0.35rem 0;
  border-bottom: 1px solid var(--surgerly-border);
  gap: 0.75rem;
}

.inv-meta-label {
  flex: 0 0 110px;
  font-size: 0.8rem;
  color: var(--surgerly-dark-gray);
}

.inv-meta-value {
  flex: 1;
  font-size: 0.85rem;
}

.inv-meta-placeholder {
  color: var(--surgerly-dark-gray);
}

.inv-patient-link {
  color: var(--surgerly-primary);
  text-decoration: none;
  font-weight: 500;
}
.inv-patient-link:hover {
  color: var(--surgerly-primary);
  text-decoration: underline;
}

.inv-meta-select {
  flex: 1;
}

.inv-section-title {
  font-weight: 600;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--surgerly-dark-gray);
  margin-bottom: 0.5rem;
  padding-left: 0.5rem;
  border-left: 3px solid var(--surgerly-primary);
}

.inv-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--surgerly-border);
  font-size: 0.82rem;
}

.inv-table-header-band td {
  background: color-mix(in srgb, var(--surgerly-primary) 8%, transparent);
  text-align: center;
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--surgerly-primary);
  letter-spacing: 0.08em;
  padding: 0.2rem 0.5rem;
  border-bottom: 1px solid color-mix(in srgb, var(--surgerly-primary) 18%, transparent);
}

.inv-table-col-headers th {
  background: var(--surgerly-white);
  padding: 0.35rem 0.5rem;
  border-bottom: 1px solid var(--surgerly-border);
  font-weight: 600;
  font-size: 0.78rem;
  white-space: nowrap;
}

.inv-table tbody td {
  padding: 0.35rem 0.5rem;
  border-bottom: 1px solid var(--surgerly-border);
  vertical-align: middle;
}

.inv-table tbody tr:hover td {
  background: color-mix(in srgb, var(--surgerly-primary) 5%, transparent);
}

.inv-total-row td {
  padding: 0.35rem 0.5rem;
  font-weight: 600;
  font-size: 0.82rem;
  background: var(--surgerly-light-gray);
}

.inv-col-item    { width: 14%; }
.inv-col-qty     { width: 6%; text-align: right; }
.inv-col-code    { width: 8%; }

.inv-col-price   { width: 8%; text-align: right; }
.inv-col-discount{ width: 8%; text-align: right; }
.inv-col-tax     { width: 7%; text-align: right; }
.inv-col-total   { width: 8%; text-align: right; }
.inv-col-date    { width: 14%; }
.inv-col-method  { width: 18%; }

.inv-col-amount  { width: 10%; text-align: right; }

.inv-footer {
  padding: 0.5rem 0.75rem;
  border-top: 1px solid var(--surgerly-border);
  background: var(--surgerly-white);
  flex-shrink: 0;
}

.inv-activity-link {
  font-size: 0.82rem;
  margin-right: auto;
  color: var(--surgerly-primary);
  text-decoration: none;
}

.inv-autocomplete-wrap {
  position: relative;
}

.inv-autocomplete-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 100;
  background: var(--surgerly-white);
  border: 1px solid var(--surgerly-border);
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  margin-top: 2px;
  overflow: hidden;
}

.inv-autocomplete-item {
  padding: 0.4rem 0.65rem;
  font-size: 0.82rem;
  cursor: pointer;
  color: var(--surgerly-text);
  transition: background 100ms ease;
}

.inv-autocomplete-item:hover {
  background: var(--surgerly-light-gray);
  color: var(--surgerly-primary);
}

.inv-add-product-btn {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  width: 100%;
  margin-top: 0.5rem;
  padding: 0.4rem 0.75rem;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--surgerly-primary);
  background: transparent;
  border: 1px dashed var(--surgerly-primary);
  border-radius: 6px;
  cursor: pointer;
  transition: background 140ms ease, border-style 140ms ease;
}

.inv-add-product-btn .material-symbols-outlined {
  font-size: 1rem;
}

.inv-add-product-btn:hover {
  background: rgba(var(--surgerly-primary-rgb, 99, 91, 255), 0.06);
  border-style: solid;
}

.inv-multiprovider-wrap {
  position: relative;
}

.inv-multiprovider-trigger {
  cursor: pointer;
  user-select: none;
}

.inv-multiprovider-menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid #dee2e6;
  border-radius: 0.375rem;
  max-height: 180px;
  overflow-y: auto;
  z-index: 200;
  padding: 0.25rem 0;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.inv-multiprovider-item {
  padding: 0.3rem 0.65rem;
  cursor: pointer;
  font-size: 0.85rem;
}

.inv-multiprovider-item:hover {
  background: #f8f9fa;
}

.inv-multiprovider-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.inv-multiprovider-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  background: rgba(var(--surgerly-primary-rgb, 99, 91, 255), 0.1);
  color: var(--surgerly-primary);
  font-size: 0.75rem;
  padding: 0.15rem 0.4rem;
  border-radius: 0.25rem;
}

.inv-multiprovider-tag button {
  background: none;
  border: none;
  padding: 0;
  line-height: 1;
  cursor: pointer;
  color: inherit;
  opacity: 0.7;
}

.inv-multiprovider-tag button:hover {
  opacity: 1;
}

.inv-product-detail {
  border-left: 2px solid rgba(var(--surgerly-primary-rgb, 99, 91, 255), 0.2);
  padding-left: 0.5rem;
}

.inv-detail-label {
  white-space: nowrap;
  min-width: 5rem;
  font-size: 0.75rem;
}

/* Invoice list (View Invoices panel) */
.inv-list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.inv-list-item {
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--surgerly-border);
  border-radius: 6px;
  background: var(--surgerly-white);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
  font-size: 0.82rem;
}

.inv-list-item:hover {
  border-color: var(--surgerly-primary);
  background: rgba(var(--surgerly-primary-rgb, 99, 91, 255), 0.04);
}

.inv-list-item.active {
  border-color: var(--surgerly-primary);
  background: rgba(var(--surgerly-primary-rgb, 99, 91, 255), 0.08);
}

.inv-list-item-name {
  font-weight: 600;
  color: var(--surgerly-text);
}

.inv-list-item-meta {
  color: var(--surgerly-dark-gray);
  font-size: 0.75rem;
  margin-top: 0.15rem;
}

.inv-list-empty {
  text-align: center;
  font-size: 0.82rem;
  padding: 1.5rem 0;
}

.inv-status-badge {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 600;
  padding: 0.1rem 0.4rem;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.inv-status-paid {
  background: rgba(25, 135, 84, 0.12);
  color: #198754;
}

.inv-status-partial {
  background: rgba(255, 193, 7, 0.15);
  color: #856404;
}

.inv-status-unpaid {
  background: rgba(220, 53, 69, 0.1);
  color: #dc3545;
}

#inv_saved_x_btn,
#vPEditBtn,
#vPRemoveBtn {
  border: none !important;
  background: none !important;
}

@keyframes billing-slide-down {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.billing-animate-reveal {
  animation: billing-slide-down 0.22s ease-out forwards;
}

/* ===== Polished billing form refinements ===== */

.inv-input-icon-wrap {
  position: relative;
}
.inv-input-icon-wrap .inv-field-icon {
  position: absolute;
  left: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.9rem;
  color: var(--surgerly-dark-gray);
  pointer-events: none;
  user-select: none;
  opacity: 0.5;
  transition: opacity 0.15s ease, color 0.15s ease;
}
.inv-input-icon-wrap:focus-within .inv-field-icon {
  opacity: 0.9;
  color: var(--surgerly-primary);
}
.inv-input-icon-wrap .form-control {
  padding-left: 1.85rem;
}
.inv-input-icon-wrap.inv-icon-top .inv-field-icon {
  top: 0.55rem;
  transform: none;
}

.billing-panel-body .form-control:focus,
.billing-panel-body .form-select:focus {
  border-color: var(--surgerly-primary);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--surgerly-primary) 18%, transparent);
  background: var(--surgerly-white);
}
.billing-panel-body .form-control,
.billing-panel-body .form-select {
  border-color: var(--surgerly-border);
  background: var(--surgerly-white);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.billing-panel-body .form-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  margin-bottom: 0.25rem;
}
/* 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: #fafafa;
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 0.75rem;
  font-weight: 500;
  color: #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: #fdecea; color: #c0392b; }
.engagement-chip--warm    { background: #fff3cd; color: #8a6d00; }
.engagement-chip--cold    { background: #e8f0fe; color: #2c5fa3; }
.engagement-chip--dormant { background: #eef0f4; color: #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: #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: #ececf2; }
.conversations-folders .conv-folder--active { background: #e3e4ed; font-weight: 600; }
.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 #f1f1f4;
}
.conversations-list .conv-item--active { background: #e3e4ed; }
.conversations-list .conv-item-name { font-weight: 600; font-size: 0.85rem; }
.conversations-list .conv-item-preview {
  font-size: 0.78rem;
  color: #6c757d;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}
.conversations-list .conv-item-time {
  font-size: 0.7rem;
  color: #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: #f1f3f5; align-self: flex-start; }
.conv-msg--outbound {
  background: var(--surgerly-primary, #be9b5a);
  color: #fff;
  align-self: flex-end;
}
.conv-msg-subject { font-weight: 600; margin-bottom: 2px; }
.conv-msg-snippet { word-break: break-word; }
.conv-msg-time { font-size: 0.65rem; color: #999; margin-top: 3px; }
.conv-msg--outbound .conv-msg-time { color: rgba(255,255,255,0.75); }
.conv-empty { padding: 14px; color: #999; font-size: 0.85rem; }

.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: #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: #444;
}
.conv-fmt:hover { background: #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: #999;
}
.conv-composer-error {
  color: #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(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(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: #888;
}
.conv-modal-close:hover { color: #333; }
.conv-modal-meta {
  padding: 6px 16px;
  font-size: 0.75rem;
  color: #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: #444;
}
.conv-sig-btn:hover { background: #e3e4ed; }
.conv-sig-body { padding: 14px 16px; overflow-y: auto; }
.conv-sig-hint {
  margin: 0 0 12px;
  font-size: 0.78rem;
  color: #6c757d;
  line-height: 1.45;
}
.conv-sig-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: #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: #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;
}