/* ============================================================
   Go Dental – Clinical UI (light, airy medical dashboard)
   ------------------------------------------------------------
   Single source of truth for application styling. Layered on
   top of AdminLTE 3 + Bootstrap 4; overrides use !important
   only where AdminLTE/Bootstrap would otherwise win.

   Palette philosophy: a light, near-white workspace with white
   surfaces and soft shadows. FDC navy is a brand ACCENT (sidebar,
   active states, key actions) — not painted over every surface.
   ============================================================ */

/* ── Design tokens ─────────────────────────────────────────── */
:root {
    /* Brand */
    --go-primary:      #1a4e7a;   /* deep navy (brand)          */
    --go-primary-lt:   #2471a3;   /* interactive blue           */
    --go-primary-050:  #eef4fa;   /* faint navy wash            */
    --go-primary-100:  #dbe8f4;   /* light navy tint            */
    --go-accent:       #0f9488;   /* teal accent                */

    /* Neutrals / surfaces */
    --go-bg:           #f3f6fa;   /* app workspace background    */
    --go-card:         #ffffff;   /* content surfaces            */
    --go-border:       #e3e9f0;   /* hairline borders            */
    --go-border-strong:#cfd8e3;
    --go-text:         #1f2d3d;   /* primary text                */
    --go-muted:        #64748b;   /* secondary text              */
    --go-muted-lt:     #94a3b8;

    /* Status */
    --go-success:      #1e9e5a;
    --go-danger:       #d0473a;
    --go-warning:      #d4860b;
    --go-info:         #1595a3;

    /* Elevation */
    --go-shadow-xs:    0 1px 2px rgba(16,42,73,.06);
    --go-shadow-sm:    0 1px 3px rgba(16,42,73,.08), 0 1px 2px rgba(16,42,73,.04);
    --go-shadow:       0 4px 16px rgba(16,42,73,.10);
    --go-shadow-lg:    0 12px 40px rgba(16,42,73,.16);

    /* Shape / rhythm */
    --go-radius:       12px;
    --go-radius-sm:    8px;
    --go-radius-xs:    6px;
    --go-space:        16px;
}

/* ── Base / body ────────────────────────────────────────────── */
body {
    font-family: 'Segoe UI', system-ui, -apple-system, "Helvetica Neue", sans-serif;
    background-color: var(--go-bg);
    color: var(--go-text);
    font-size: 14px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--go-primary-lt); }
a:hover { color: var(--go-primary); }

/* ── Page titles ────────────────────────────────────────────── */
/* Light, flat page heading (was a heavy navy gradient bar). */
h1, .h1 {
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    color: var(--go-primary) !important;
    background: none !important;
    padding: 0 0 10px 0 !important;
    margin: 0 0 18px 0 !important;
    border-bottom: 2px solid var(--go-border) !important;
    box-shadow: none !important;
    letter-spacing: .2px;
}

h2, .h2 { font-size: 1.3rem;  font-weight: 700; color: var(--go-primary); }
h3, .h3 { font-size: 1.12rem; font-weight: 600; color: var(--go-text); }
h4, .h4 { font-size: 1rem;    font-weight: 600; color: var(--go-text); }

/* Soften the ad-hoc dotted <hr> some views place under the title */
.content hr { border: 0; border-top: 1px solid var(--go-border); margin: 14px 0 18px; opacity: 1; }

/* Reusable page header: title on the left, actions on the right, one rhythm.
   Views can wrap their <h1>/buttons in <div class="go-page-header"> to get a
   consistent header without bespoke markup. */
.go-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px 16px;
    margin-bottom: 18px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--go-border);
}
.go-page-header h1,
.go-page-header .h1,
.go-page-header h2,
.go-page-header .h2 {
    margin: 0 !important;
    padding: 0 !important;
    border-bottom: 0 !important;
}
.go-page-header .go-page-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ── Card / content surfaces ────────────────────────────────── */
.layout-container,
.card {
    background: var(--go-card) !important;
    border: 1px solid var(--go-border) !important;
    border-radius: var(--go-radius) !important;
    box-shadow: var(--go-shadow-sm) !important;
}

.card-header {
    background: var(--go-card);
    border-bottom: 1px solid var(--go-border);
    font-weight: 600;
    color: var(--go-primary);
}

/* The white "page" card that wraps all content */
.layout-container {
    opacity: 1 !important;
    padding: 0 !important;
}

/* ── Page layout / shell ────────────────────────────────────── */
/* Light workspace background (was a dark navy gradient). !important
   beats the inline background-image + padding from _Layout.cshtml. */
.maincontent {
    background: var(--go-bg) !important;
    background-image: none !important;
    /* Sidebar-aware offset. Full sidebar = 250px. */
    margin-left: 250px !important;
    /* Single outer gutter between the sidebar/top and the content card. The
       card's own inner padding lives on .go-content — kept modest so the two
       together read as one comfortable margin rather than a double inset. */
    padding: 18px !important;
    min-height: calc(100vh - 57px);
}

/* Mini/collapsed sidebar → narrower offset */
.sidebar-mini.sidebar-collapse .maincontent {
    margin-left: 4.6rem !important;
}

/* AdminLTE also margins .content-wrapper (250px open, 4.6rem collapsed with
   !important). Zero both so .maincontent is the only sidebar offset — otherwise
   a collapsed rail leaves a second empty strip and the grid has to scroll. */
.maincontent .content-wrapper,
.sidebar-mini .maincontent .content-wrapper,
.sidebar-mini.sidebar-collapse .maincontent .content-wrapper {
    margin-left: 0 !important;
    background: transparent;
}

.go-content {
    padding: 20px 22px;
    min-height: 480px;
}

/* ── Outer report/list wrappers → full width ────────────────── */
/* Only the single top-level column that some views use to wrap the
   ENTIRE body (direct child of .content). Must stay a direct-child (>)
   selector so real nested Bootstrap grid columns keep their gutters. */
.content > [class*="col-md-"],
.content > [class*="col-lg-"],
.content > [class*="col-xl-"],
.content > .col-12,
.content > .container,
.content > .container-sm,
.content > .container-md,
.content > .container-lg,
.content > .container-xl {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

@media (max-width: 991.98px) {
    /* AdminLTE slides the sidebar off-canvas below lg. Beat both desktop
       offsets (.maincontent 250px and .sidebar-mini.sidebar-collapse
       .maincontent 4.6rem) — the collapsed rule is more specific, so a
       one-class mobile reset never won and phones kept an empty left rail. */
    .maincontent,
    .sidebar-mini.sidebar-collapse .maincontent {
        margin-left: 0 !important;
    }
    .maincontent { padding: 12px !important; min-height: auto; }
    .go-content  { padding: 14px 14px; min-height: auto; }
}

@media (max-width: 575.98px) {
    .maincontent { padding: 8px !important; }
    .go-content  { padding: 12px 12px; }
    h1, .h1      { font-size: 1.25rem !important; }
}

/* ── Row spacing (neutralise inline margin-top:15px) ────────── */
.row { margin-top: 0 !important; }
.form-row + .form-row,
.row + .row { margin-top: 14px !important; }

/* ── Sidebar ─────────────────────────────────────────────────── */
.main-sidebar {
    background: linear-gradient(185deg, #12324f 0%, var(--go-primary) 100%) !important;
    box-shadow: 2px 0 12px rgba(16,42,73,.14);
}

/* Compact brand bar: one row, same height as the top navbar (was a full-width
   stacked logo image that alone ran ~180px tall before a single menu item
   appeared). */
.brand-link {
    background: rgba(0,0,0,.18) !important;
    border-bottom: 1px solid rgba(255,255,255,.08) !important;
    display: flex !important;
    align-items: center;
    justify-content: flex-start;
    height: 56px !important;
    padding: 0 18px !important;
    overflow: hidden;
    transition: padding .2s ease-in-out;
}
.brand-link .brand-image-full {
    height: 32px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    object-position: left center;
    display: block;
}
/* Resting collapsed rail: crop down to just the tooth mark, centered. */
.sidebar-collapse .brand-link { justify-content: center; padding: 0 8px !important; }
.sidebar-collapse .brand-link .brand-image-full {
    height: 30px;
    width: 30px;
    object-fit: cover;
    object-position: left center;
}
/* AdminLTE expands .main-sidebar to 250px on hover even while "collapsed" —
   restore the full lock-up for that temporary state. */
.sidebar-mini.sidebar-collapse .main-sidebar:hover .brand-link,
.sidebar-mini.sidebar-collapse .main-sidebar.sidebar-focused .brand-link {
    justify-content: flex-start;
    padding: 0 18px !important;
}
.sidebar-mini.sidebar-collapse .main-sidebar:hover .brand-link .brand-image-full,
.sidebar-mini.sidebar-collapse .main-sidebar.sidebar-focused .brand-link .brand-image-full {
    height: 32px;
    width: auto;
    object-fit: contain;
}

.nav-sidebar .nav-link {
    display: flex;
    align-items: center;
    border-radius: var(--go-radius-xs);
    margin: 1px 10px;
    padding: 8px 10px;
    transition: background .15s, color .15s;
    font-size: 13.5px;
    color: rgba(255,255,255,.80) !important;
    position: relative;
}

.nav-sidebar > .nav-item > .nav-link:hover,
.nav-sidebar .nav-link.active {
    background: rgba(255,255,255,.12) !important;
    color: #fff !important;
}

.nav-sidebar .nav-link.active {
    background: rgba(255,255,255,.14) !important;
    box-shadow: none;
}

/* Slim accent bar on the active row instead of a heavy solid block — reads
   as "you are here" without repainting the whole pill navy-on-navy. */
.nav-sidebar > .nav-item > .nav-link.active::before {
    content: "";
    position: absolute;
    left: -10px;
    top: 6px;
    bottom: 6px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--go-accent);
}

.nav-sidebar .nav-link .nav-icon {
    color: rgba(255,255,255,.62) !important;
    width: 18px;
    flex: 0 0 18px;
    text-align: center;
    margin-right: .7rem;
    font-size: .95rem;
    transition: color .15s;
}

.nav-sidebar .nav-link:hover .nav-icon,
.nav-sidebar .nav-link.active .nav-icon { color: #fff !important; }

.nav-sidebar .nav-link p { margin: 0; display: flex; align-items: center; flex: 1 1 auto; min-width: 0; }

/* Treeview submenu: inset, dimmer, with a thin guide line tying children to
   their parent (a common "modern app sidebar" affordance AdminLTE lacks). */
.nav-treeview {
    margin-left: 24px;
    padding-left: 8px;
    border-left: 1px solid rgba(255,255,255,.10);
}
.nav-treeview .nav-link { font-size: 12.8px; padding: 7px 10px; }
.nav-treeview .nav-link .nav-icon { font-size: .85rem; }

/* Section headers between menu groups */
.nav-sidebar .go-nav-header {
    display: flex;
    align-items: center;
    color: rgba(255,255,255,.4) !important;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 1.1px;
    text-transform: uppercase;
    padding: 12px 16px 4px;
    margin-top: 0;
}
.nav-sidebar .go-nav-header:first-child { padding-top: 10px; }

/* Reorder the collapsible groups without moving markup (flex column). Daily
   items keep the default order 0 and therefore stay on top. */
.nav-sidebar > .go-order-5  { order: 5; }
.nav-sidebar > .go-order-10 { order: 10; }
.nav-sidebar > .go-order-20 { order: 20; }
.nav-sidebar > .go-order-30 { order: 30; }
.nav-sidebar > .go-order-40 { order: 40; }
.nav-sidebar > .go-order-50 { order: 50; }
.nav-sidebar > .go-order-60 { order: 60; }

/* Sidebar quick-filter box */
.go-menu-filter {
    position: relative;
    padding: 10px 12px 4px;
}
.go-menu-filter i {
    position: absolute;
    left: 22px;
    top: 50%;
    transform: translateY(-40%);
    color: rgba(255,255,255,.45);
    font-size: 12px;
    pointer-events: none;
}
.go-menu-filter input {
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.12);
    color: #fff;
    border-radius: var(--go-radius-xs);
    padding-left: 30px;
    min-height: 34px;
}
.go-menu-filter input::placeholder { color: rgba(255,255,255,.5); }
.go-menu-filter input:focus {
    background: rgba(255,255,255,.14);
    border-color: var(--go-primary-lt);
    color: #fff;
    box-shadow: none;
}
/* The filter box is meaningless when the sidebar is collapsed to icons */
.sidebar-collapse .go-menu-filter { display: none; }

/* ── Collapsed rail (icon-only) ──────────────────────────────── */
/* Center every icon in the narrow rail instead of the default left-aligned
   AdminLTE spacing, and drop the row down to an icon-sized square so the
   whole rail reads as a tidy icon dock rather than clipped text rows. */
.sidebar-collapse .nav-sidebar > .nav-item > .nav-link {
    justify-content: center;
    padding: 10px 0;
    margin: 2px 6px;
}
.sidebar-collapse .nav-sidebar > .nav-item > .nav-link .nav-icon {
    margin-right: 0;
    font-size: 1.05rem;
}
.sidebar-collapse .nav-sidebar > .nav-item > .nav-link.active::before { display: none; }
.sidebar-collapse .nav-sidebar > .nav-item > .nav-link.active {
    background: var(--go-primary-lt) !important;
    border-radius: var(--go-radius-sm);
}

/* AdminLTE's hover-expand overlays the full label list back on top — restore
   the normal left-aligned row for that transient state. */
.sidebar-mini.sidebar-collapse .main-sidebar:hover .nav-sidebar > .nav-item > .nav-link,
.sidebar-mini.sidebar-collapse .main-sidebar.sidebar-focused .nav-sidebar > .nav-item > .nav-link {
    justify-content: flex-start;
    padding: 8px 10px;
}
.sidebar-mini.sidebar-collapse .main-sidebar:hover .nav-sidebar > .nav-item > .nav-link .nav-icon,
.sidebar-mini.sidebar-collapse .main-sidebar.sidebar-focused .nav-sidebar > .nav-item > .nav-link .nav-icon {
    margin-right: .7rem;
    font-size: .95rem;
}

/* Thin, theme-tinted scrollbar for the menu list — the default OS scrollbar
   (with its up/down arrow buttons) inside a ~74px icon rail is what makes
   the collapsed sidebar look dated and cramped. */
.sidebar {
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.25) transparent;
}
.sidebar::-webkit-scrollbar { width: 6px; }
.sidebar::-webkit-scrollbar-track { background: transparent; }
.sidebar::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,.22);
    border-radius: 3px;
}
.sidebar::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.38); }
.sidebar::-webkit-scrollbar-button { display: none; height: 0; width: 0; }

/* ── Top navbar ──────────────────────────────────────────────── */
.main-header.navbar {
    background: var(--go-card) !important;
    border-bottom: 1px solid var(--go-border);
    box-shadow: var(--go-shadow-xs);
    margin-bottom: 0;
    min-height: 56px;
}

.main-header [data-widget="pushmenu"] i {
    font-size: 1.15rem;
    color: var(--go-primary);
}

/* ── Footer ──────────────────────────────────────────────────── */
.main-footer {
    background: transparent;
    border-top: 1px solid var(--go-border);
    color: var(--go-muted);
    font-size: 12.5px;
    margin-left: 250px;
}
.sidebar-mini.sidebar-collapse .main-footer { margin-left: 4.6rem; }
@media (max-width: 991.98px) {
    .main-footer,
    .sidebar-mini.sidebar-collapse .main-footer { margin-left: 0; }
}

/* ── Filter bar (above grids/reports) ────────────────────────── */
.go-filterbar {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-end;
    margin-bottom: 16px;
    background: var(--go-card);
    border: 1px solid var(--go-border);
    border-radius: var(--go-radius-sm);
    padding: 14px 16px;
    box-shadow: var(--go-shadow-xs);
}

.go-filterbar > *   { flex: 0 1 auto; }
.go-filterbar label { font-weight: 600; font-size: 12px; color: var(--go-muted); margin-bottom: 4px; }

@media (max-width: 575.98px) { .go-filterbar > * { flex: 1 1 100%; } }

/* ── Form controls ───────────────────────────────────────────── */
.form-control,
.form-select {
    border: 1px solid var(--go-border-strong);
    border-radius: var(--go-radius-xs);
    color: var(--go-text);
    background: #fff;
    transition: border-color .15s, box-shadow .15s;
    font-size: 14px;
    min-height: 38px;
}

.form-control::placeholder { color: var(--go-muted-lt); }

.form-control:focus,
.form-select:focus {
    border-color: var(--go-primary-lt);
    box-shadow: 0 0 0 3px rgba(36,113,163,.15);
    outline: none;
}

.form-control[readonly],
.form-control:disabled { background: #f1f5f9; color: var(--go-muted); }

/* Date/time pickers get a leading glyph so they read as "pick a date", not a
   plain text box. Wrapping element is injected by go-pickers.js / go-scheduler.js
   around whichever input is user-facing (the flatpickr altInput, when present). */
.go-date-wrap {
    position: relative;
    display: block;
    width: 100%;
}
.go-date-wrap > input { padding-left: 32px !important; width: 100%; }
.go-date-wrap > .go-date-icon {
    position: absolute;
    left: 11px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 13px;
    color: var(--go-muted-lt);
    pointer-events: none;
    transition: color .15s;
}
.go-date-wrap:focus-within > .go-date-icon { color: var(--go-primary-lt); }
.go-date-wrap > input:disabled ~ .go-date-icon,
.go-date-wrap > input[readonly] ~ .go-date-icon { color: var(--go-muted-lt); opacity: .7; }
/* Compact toolbar usage (scheduler date nav) keeps its own max-width instead
   of stretching to fill the flex row. */
.go-sched-nav .go-date-wrap { display: inline-block; width: auto; vertical-align: middle; }
.go-sched-nav .go-date-wrap > input { width: auto; }

label {
    font-weight: 600;
    font-size: 12.5px;
    color: var(--go-muted);
    margin-bottom: 5px;
    letter-spacing: .2px;
}

.form-group { margin-bottom: 16px; }

.text-danger { color: var(--go-danger) !important; }

/* ── Buttons ─────────────────────────────────────────────────── */
.btn {
    border-radius: var(--go-radius-xs);
    font-weight: 600;
    font-size: 13px;
    letter-spacing: .2px;
    padding: 7px 16px;
    transition: all .15s ease;
    box-shadow: var(--go-shadow-xs);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-sm { padding: 5px 11px; font-size: 12.5px; }

.btn-primary   { background: var(--go-primary-lt); border-color: var(--go-primary-lt); }
.btn-primary:hover { background: var(--go-primary); border-color: var(--go-primary); }
.btn-success   { background: var(--go-success);    border-color: var(--go-success); }
.btn-success:hover { filter: brightness(.94); }
.btn-danger    { background: var(--go-danger);     border-color: var(--go-danger); }
.btn-danger:hover { filter: brightness(.94); }
.btn-outline-secondary { border-color: var(--go-border-strong); color: var(--go-text); background: #fff; }
.btn-outline-secondary:hover { background: var(--go-bg); border-color: var(--go-muted-lt); color: var(--go-text); }
.btn-outline-dark { border-color: var(--go-border-strong); color: var(--go-text); background: #fff; }
.btn-outline-dark:hover { background: var(--go-bg); color: var(--go-text); }
.btn-outline-primary { color: var(--go-primary-lt); border-color: var(--go-primary-lt); background: #fff; }
.btn-outline-primary:hover,
.btn-outline-primary.active { background: var(--go-primary-lt); border-color: var(--go-primary-lt); color: #fff; }
.btn-link { box-shadow: none; }
.btn-link:hover { transform: none; }

/* ── Bootstrap nav-tabs (patient edit & elsewhere) ───────────── */
.nav-tabs {
    border-bottom: 1px solid var(--go-border);
    margin-bottom: 20px;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 2px;
}

.nav-tabs::-webkit-scrollbar { display: none; }

.nav-tabs .nav-link {
    color: var(--go-muted);
    font-weight: 600;
    font-size: 13px;
    padding: 10px 16px;
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    white-space: nowrap;
    transition: color .15s, border-color .15s, background .15s;
    background: transparent;
}

.nav-tabs .nav-link:hover {
    color: var(--go-primary-lt);
    border-bottom-color: var(--go-primary-100);
    background: var(--go-primary-050);
}

.nav-tabs .nav-link.active {
    color: var(--go-primary) !important;
    border-bottom: 2px solid var(--go-primary-lt) !important;
    background: transparent !important;
}

.nav-tabs .nav-link.disabled { color: var(--go-muted-lt); }

@media (max-width: 575.98px) {
    .nav-tabs .nav-link { padding: 8px 12px; font-size: 12px; }
}

/* Patient record tabs: keep all items on one line */
#patientTabs {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    overflow-y: hidden;
}
#patientTabs .nav-item { flex: 0 0 auto; }
#patientTabs .nav-link {
    padding: 8px 10px;
    font-size: 12.5px;
}

/* ── Bootstrap modals ─────────────────────────────────────────── */
.modal-content {
    border: none;
    border-radius: var(--go-radius);
    box-shadow: var(--go-shadow-lg);
    overflow: visible;   /* let dropdowns escape the modal */
}
.modal-dialog { overflow: visible; }

.modal-header {
    background: var(--go-primary);
    color: #fff;
    border-radius: var(--go-radius) var(--go-radius) 0 0;
    padding: 14px 20px;
    border-bottom: none;
}
.modal-header .modal-title { font-size: 15px; font-weight: 700; color: #fff; }
.modal-header .close       { color: rgba(255,255,255,.85); opacity: 1; text-shadow: none; font-size: 1.4rem; }
.modal-header .close:hover { color: #fff; }

.modal-body   { padding: 20px 22px; overflow: visible; }
.modal-footer {
    border-top: 1px solid var(--go-border);
    padding: 12px 20px;
    border-radius: 0 0 var(--go-radius) var(--go-radius);
    background: #f8fafc;
}

/* Compact visit-materials grid: 3 tiles per row, name + qty on one line */
.modal-dialog.go-mat-modal {
    max-width: min(1280px, 96vw);
    width: 96vw;
}
.go-mat-modal .modal-body { padding: 12px 14px; }
.go-mat-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    max-height: min(70vh, 640px);
    overflow: auto;
    font-size: 12px;
    margin-bottom: 10px;
}
@media (max-width: 1100px) {
    .go-mat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
    .go-mat-grid { grid-template-columns: 1fr; }
}
.go-mat-card {
    border: 1px solid var(--go-border);
    border-radius: var(--go-radius-xs);
    padding: 6px 8px;
    background: #fff;
    min-width: 0;
}
.go-mat-row {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}
.go-mat-name {
    flex: 1 1 auto;
    min-width: 0;
    font-weight: 600;
    font-size: 12px;
    line-height: 1.25;
    color: var(--go-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.go-mat-pick {
    flex: 1 1 auto;
    min-width: 0;
}
.go-mat-card .form-control,
.go-mat-card .form-control-sm {
    font-size: 12px;
    height: 28px;
    padding: 2px 6px;
}
.go-mat-stepper {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
}
.go-mat-step {
    width: 26px;
    height: 26px;
    padding: 0 !important;
    line-height: 1;
    font-weight: 700;
}
.go-mat-qty {
    width: 40px;
    flex: 0 0 40px;
    border-left: 0;
    border-right: 0;
    border-radius: 0;
    -moz-appearance: textfield;
}
.go-mat-qty::-webkit-outer-spin-button,
.go-mat-qty::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.go-mat-stepper .go-mat-step:first-child { border-radius: 4px 0 0 4px; }
.go-mat-stepper .go-mat-step:last-child { border-radius: 0 4px 4px 0; }
.go-mat-unit {
    flex: 0 1 52px;
    min-width: 0;
    font-size: 11px;
    color: var(--go-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.go-mat-note-btn,
.go-mat-del {
    width: 26px;
    height: 26px;
    padding: 0 !important;
    flex: 0 0 26px;
    line-height: 1;
}
.go-mat-note-btn.has-note {
    color: var(--go-primary);
    background: var(--go-primary-050);
    border-color: var(--go-primary-100);
}
.go-mat-card .go-mat-notes {
    display: none;
    margin-top: 5px;
    min-height: 48px;
    height: auto;
    font-size: 12px;
}
.go-mat-card.note-open .go-mat-notes { display: block; }

/* ── Tom Select ───────────────────────────────────────────────── */

/* The Tom Select stylesheet we ship is the Bootstrap 5 theme, but this app
   runs Bootstrap 4 (AdminLTE), which never defines the --bs-* custom
   properties. Unresolved vars collapse to nothing, so the dropdown rendered
   with no background (transparent, showing the form behind it). Map the ones
   the theme consumes onto the Go palette. */
:root {
    --bs-body-bg:                    #ffffff;
    --bs-body-color:                 var(--go-text);
    --bs-border-color:               var(--go-border);
    --bs-border-color-translucent:   var(--go-border);
    --bs-border-radius:              var(--go-radius-xs);
    --bs-border-radius-sm:           4px;
    --bs-border-radius-lg:           var(--go-radius-sm);
    --bs-border-width:               1px;
    --bs-box-shadow-inset:           inset 0 1px 2px rgba(16,42,73,.06);
    --bs-secondary-bg:               #eef2f7;
    --bs-tertiary-bg:                #f6f8fb;
    --bs-form-valid-color:           var(--go-success);
    --bs-form-invalid-color:         var(--go-danger);
}

.ts-wrapper { font-size: 14px; position: relative; }

.ts-control {
    border: 1px solid var(--go-border-strong) !important;
    border-radius: var(--go-radius-xs) !important;
    background: #fff !important;
    min-height: 38px;
    color: var(--go-text);
    padding: 5px 30px 5px 10px;
    transition: border-color .15s, box-shadow .15s;
    box-shadow: none !important;
}

/* A Tom Select control renders as a plain bordered box that is otherwise
   indistinguishable from a text <input> — add the same "this opens a list"
   chevron a native <select> gets, so it reads as a dropdown at a glance. */
.ts-wrapper::after {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f078";
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 11px;
    line-height: 1;
    color: var(--go-muted-lt);
    pointer-events: none;
    transition: color .15s, transform .15s;
}
.ts-wrapper.focus::after,
.ts-wrapper:focus-within::after,
.ts-wrapper.dropdown-active::after {
    color: var(--go-primary-lt);
    transform: translateY(-50%) rotate(180deg);
}
.ts-wrapper.disabled::after { color: var(--go-muted-lt); opacity: .6; }
/* Multi-select tag inputs can grow past one line — pin the chevron to the
   first line rather than vertically centering on the whole (taller) box. */
.ts-wrapper.multi::after { top: 20px; }

.ts-control:focus-within,
.ts-wrapper.focus .ts-control {
    border-color: var(--go-primary-lt) !important;
    box-shadow: 0 0 0 3px rgba(36,113,163,.15) !important;
}

/* Single-select: while the menu is open and the user is typing, hide the
   already-selected label so the query does not run on after it. As soon as
   the menu closes the chip must show again — do not wait for blur / a click
   outside, or choosing an option looks like it did nothing. */
.ts-wrapper.single.input-active.has-items.dropdown-active .ts-control > .item {
    display: none;
}

.ts-dropdown {
    z-index: 100050 !important;   /* above modals + scheduler */
    background: #fff !important;  /* never inherit a transparent bg */
    border: 1px solid var(--go-border-strong) !important;
    border-radius: var(--go-radius-xs) !important;
    box-shadow: var(--go-shadow-lg) !important;
    color: var(--go-text);
    font-size: 14px;
    margin-top: 4px;
    overflow: hidden;
}

.ts-dropdown .ts-dropdown-content {
    background: #fff;
    max-height: 260px;
    padding: 4px 0;
}

.ts-dropdown .option {
    padding: 9px 12px;
    line-height: 1.35;
    cursor: pointer;
    border-bottom: 1px solid #f2f5f9;
    transition: background .12s, color .12s;
}

.ts-dropdown .option:last-child { border-bottom: 0; }

/* The option already saved as the field's value. Kept subtle (light tint +
   checkmark) so it never outshines the hover/keyboard highlight below --
   showing two competing dark highlights at once read as broken/confusing. */
.ts-dropdown .option.selected {
    background: var(--go-primary-050) !important;
    color: var(--go-primary) !important;
    font-weight: 600;
}

.ts-dropdown .option.selected::after {
    content: "\2713";
    float: right;
    font-weight: 700;
}

/* The option under the mouse/keyboard -- what click or Enter will pick.
   Always the single strongest highlight in the list, even over .selected. */
.ts-dropdown .option:hover,
.ts-dropdown .option.active,
.ts-dropdown .option.selected:hover,
.ts-dropdown .option.selected.active {
    background: var(--go-primary-lt) !important;
    color: #fff !important;
    font-weight: 600;
}

/* Matched substring. Selector must match the vendor's
   `.ts-dropdown [data-selectable] .highlight`, which paints it
   highlighter-yellow and outranks a plain `.ts-dropdown .highlight`. */
.ts-dropdown [data-selectable] .highlight,
.ts-dropdown .option .highlight {
    background: transparent;
    color: inherit;
    font-weight: 700;
    border-radius: 0;
    padding: 0;
    box-shadow: inset 0 -2px 0 var(--go-primary-100);
}

.ts-dropdown [data-selectable].selected .highlight {
    box-shadow: inset 0 -2px 0 rgba(255,255,255,.55);
}

.ts-dropdown .no-results,
.ts-dropdown .optgroup-header {
    padding: 9px 12px;
    color: var(--go-muted);
    background: #fff;
}

.ts-dropdown .ts-dropdown-content::-webkit-scrollbar { width: 10px; }
.ts-dropdown .ts-dropdown-content::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border: 3px solid #fff;
    border-radius: 6px;
}

/* ── Flatpickr ────────────────────────────────────────────────── */
.flatpickr-calendar {
    z-index: 100050 !important;
    border-radius: var(--go-radius) !important;
    box-shadow: var(--go-shadow) !important;
    border: 1px solid var(--go-border) !important;
}

.flatpickr-day.selected,
.flatpickr-day.selected:hover {
    background: var(--go-primary-lt) !important;
    border-color: var(--go-primary-lt) !important;
}
.flatpickr-day:hover { background: var(--go-primary-050) !important; }

/* ── Toastify ─────────────────────────────────────────────────── */
.toastify {
    border-radius: var(--go-radius-sm);
    box-shadow: var(--go-shadow);
    font-size: 0.92rem;
    font-weight: 600;
    min-width: 260px;
    padding: 13px 18px;
}
.toastify.go-toast-success { background: linear-gradient(135deg, #1e9e5a, #24b268); }
.toastify.go-toast-error   { background: linear-gradient(135deg, #d0473a, #e05a4d); }
.toastify.go-toast-info    { background: linear-gradient(135deg, #1595a3, #19aebd); }

/* ── Grid toolbar (action buttons + search) ──────────────────── */
.go-grid-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-bottom: 0;
    padding: 12px 14px;
    background: var(--go-card);
    border: 1px solid var(--go-border);
    border-radius: var(--go-radius) var(--go-radius) 0 0;
    border-bottom: none;
    box-shadow: var(--go-shadow-xs);
}

.go-grid-toolbar .go-grid-search {
    max-width: 280px;
    margin-left: auto;
    border-radius: 20px !important;
    padding-left: 14px;
    background: var(--go-bg);
    border-color: var(--go-border-strong);
    font-size: 13px;
    min-height: 34px;
}
.go-grid-toolbar .go-grid-search:focus {
    background: #fff;
    border-color: var(--go-primary-lt);
    box-shadow: 0 0 0 3px rgba(36,113,163,.12);
}

@media (max-width: 575.98px) {
    .go-grid-toolbar .go-grid-search { max-width: 100%; flex: 1 1 100%; margin-left: 0; }
    .go-grid-toolbar { padding: 8px; }
    .go-grid-toolbar .btn { font-size: 12px; padding: 4px 10px; }
}

/* ── Tabulator grid ───────────────────────────────────────────── */
.go-content .tabulator,
.tabulator {
    width: 100%;
    max-width: 100%;
    border: 1px solid var(--go-border);
    border-radius: var(--go-radius);
    font-size: 13.5px;
    background: var(--go-card);
    box-shadow: var(--go-shadow-xs);
    overflow: hidden;
}

/* When a toolbar sits directly above, join them seamlessly */
.go-grid-toolbar + .tabulator { border-radius: 0 0 var(--go-radius) var(--go-radius); border-top: none; }

/* Light header (was solid navy). Navy is now just the text + accent line. */
.tabulator .tabulator-header {
    background: #f1f5f9;
    border-bottom: 2px solid var(--go-border-strong);
}

.tabulator .tabulator-header .tabulator-col {
    background: transparent;
    border-right: 1px solid var(--go-border);
}
.tabulator .tabulator-header .tabulator-col:last-child { border-right: none; }

.tabulator .tabulator-header .tabulator-col-title {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--go-primary);
    text-transform: none;
    white-space: nowrap;
    overflow: visible;
    text-overflow: clip;
    padding: 0 4px;
    letter-spacing: .2px;
}

.tabulator .tabulator-header .tabulator-col-content { padding: 10px 8px 6px; }

.tabulator .tabulator-header .tabulator-arrow {
    border-top-color: var(--go-muted) !important;
    border-bottom-color: var(--go-muted) !important;
}

/* Column header filter row — light theme */
.tabulator .tabulator-header-filter { margin-top: 5px; }

.tabulator .tabulator-header-filter input,
.tabulator .tabulator-header-filter select {
    width: 100%;
    font-size: 12px;
    padding: 4px 8px;
    border: 1px solid var(--go-border-strong);
    border-radius: 5px;
    background: #fff;
    color: var(--go-text);
    transition: border-color .15s, box-shadow .15s;
}
.tabulator .tabulator-header-filter input::placeholder { color: var(--go-muted-lt); }
.tabulator .tabulator-header-filter input:focus,
.tabulator .tabulator-header-filter select:focus {
    border-color: var(--go-primary-lt);
    box-shadow: 0 0 0 2px rgba(36,113,163,.14);
    outline: none;
}
.tabulator .tabulator-header-filter select option { background: #fff; color: var(--go-text); }

/* Data rows */
.tabulator .tabulator-row { border-bottom: 1px solid #eef2f6; transition: background .12s; }
.tabulator .tabulator-row.tabulator-row-even { background-color: #fbfcfe; }
.tabulator .tabulator-row:hover { background-color: var(--go-primary-050) !important; }
.tabulator .tabulator-row.tabulator-selected {
    background-color: var(--go-primary-100) !important;
    color: var(--go-primary);
}

.tabulator .tabulator-cell {
    font-size: 13.5px;
    line-height: 1.45;
    padding: 10px 12px;
    color: var(--go-text);
    border-right: 1px solid #f0f3f7;
}
.tabulator .tabulator-cell:last-child { border-right: none; }

.tabulator .tabulator-tableholder { overflow-x: auto; }

.tabulator .tabulator-footer {
    background: #f8fafc;
    border-top: 1px solid var(--go-border);
    padding: 8px 12px;
    font-size: 13px;
    color: var(--go-muted);
}

/* Pagination */
.tabulator .tabulator-paginator { color: var(--go-text); }
.tabulator .tabulator-page {
    border-radius: 6px;
    border: 1px solid var(--go-border-strong);
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 600;
    color: var(--go-text);
    margin: 0 2px;
    background: #fff;
}
.tabulator .tabulator-page.active {
    background: var(--go-primary-lt) !important;
    color: #fff !important;
    border-color: var(--go-primary-lt) !important;
}
.tabulator .tabulator-page:hover:not(.active) { background: var(--go-bg); }

/* ── Appointments page top controls ──────────────────────────── */
.go-sched-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    background: var(--go-card);
    border: 1px solid var(--go-border);
    border-radius: var(--go-radius);
    box-shadow: var(--go-shadow-xs);
    padding: 12px 16px;
    margin-bottom: 14px;
}
.go-sched-topbar-center { flex: 0 1 280px; min-width: 200px; }
.go-sched-topbar-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.go-sched-check {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-weight: 600;
    font-size: 13px;
    color: var(--go-muted);
    cursor: pointer;
}
.go-sched-check input { width: 15px; height: 15px; cursor: pointer; }

@media (max-width: 767.98px) {
    .go-sched-topbar { align-items: stretch; }
    .go-sched-topbar-center { flex: 1 1 100%; }
    .go-sched-topbar-actions { gap: 12px; }
}

/* ── go-scheduler ─────────────────────────────────────────────── */
.go-sched {
    display: flex;
    flex-direction: column;
    width: 100%;
    border: 1px solid var(--go-border);
    border-radius: var(--go-radius);
    background: var(--go-card);
    overflow: hidden;
    box-shadow: var(--go-shadow-xs);
}

.go-sched-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--go-border);
    background: #f8fafc;
}

.go-sched-nav { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.go-sched-title {
    font-weight: 700;
    font-size: 15px;
    margin-left: 8px;
    color: var(--go-primary);
}

.go-sched-scroll { overflow: auto; max-height: calc(100vh - 240px); position: relative; }

.go-sched-grid { display: grid; position: relative; min-width: 100%; }

/* Light day/room header (was navy gradient) */
.go-sched-head-cell {
    position: sticky;
    top: 0;
    z-index: 6;
    background: #f1f5f9;
    border-bottom: 2px solid var(--go-border-strong);
    border-right: 1px solid var(--go-border);
    padding: 9px 6px;
    text-align: center;
    font-weight: 700;
    font-size: 13px;
    color: var(--go-primary);
    min-height: 42px;
}

.go-sched-room-head { border-top: 3px solid var(--go-primary-lt); }

.go-sched-corner { left: 0; z-index: 8; width: 60px; }

.go-sched-gutter {
    position: sticky;
    left: 0;
    z-index: 5;
    width: 60px;
    background: #f8fafc;
    border-right: 1px solid var(--go-border);
}

.go-sched-timelabel {
    font-size: 11px;
    color: var(--go-muted);
    text-align: right;
    padding-right: 8px;
    box-sizing: border-box;
    transform: translateY(-7px);
    font-weight: 600;
}

.go-sched-col { position: relative; border-right: 1px solid #eef2f6; box-sizing: border-box; }

.go-sched-slot { box-sizing: border-box; border-bottom: 1px solid #f2f5f9; }
.go-sched-slot.hour-start { border-bottom: 1px solid var(--go-border-strong); }

.go-sched-event {
    position: absolute;
    box-sizing: border-box;
    border: 1px solid rgba(16,42,73,.10);
    border-left: 4px solid var(--go-primary-lt);
    border-radius: 6px;
    padding: 4px 7px;
    font-size: 12px;
    overflow: hidden;
    cursor: grab;
    box-shadow: var(--go-shadow-xs);
    color: var(--go-text);
    user-select: none;
    transition: box-shadow .12s;
}
.go-sched-event:hover { box-shadow: var(--go-shadow-sm); }

.go-sched-event.dragging { cursor: grabbing; opacity: .9; box-shadow: var(--go-shadow); }

.go-sched-event.is-note {
    cursor: default;
    background: #fffbe6 !important;
    border-left-color: var(--go-warning) !important;
}

.go-sched-event-subject { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.go-sched-event-time,
.go-sched-event-loc {
    display: none;
    font-size: 11px;
    color: var(--go-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.go-sched-grid.show-details .go-sched-event-time,
.go-sched-grid.show-details .go-sched-event-loc { display: block; }

.go-sched-resize { position: absolute; left: 0; right: 0; bottom: 0; height: 7px; cursor: ns-resize; }

.go-sched-ghost {
    position: absolute;
    left: 2px; right: 2px;
    background: rgba(36,113,163,.14);
    border: 2px dashed var(--go-primary-lt);
    border-radius: 6px;
    pointer-events: none;
    z-index: 40;
}

.go-sched-agenda { padding: 8px 14px 18px; max-height: calc(100vh - 240px); overflow: auto; }

.go-sched-agenda-day {
    font-weight: 700;
    color: var(--go-primary);
    background: var(--go-primary-050);
    padding: 8px 12px;
    border-radius: var(--go-radius-xs);
    margin: 16px 0 6px;
    border-left: 4px solid var(--go-primary-lt);
}

.go-sched-agenda-row {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 10px 12px;
    border-left: 4px solid var(--go-primary-lt);
    border-bottom: 1px solid #eef2f6;
    transition: background .12s;
}
.go-sched-agenda-row:hover { background: var(--go-primary-050); }

.go-sched-agenda-time { flex: 0 0 130px; font-weight: 600; color: var(--go-muted); font-size: 13px; }
.go-sched-agenda-subject { font-weight: 700; color: var(--go-text); }
.go-sched-agenda-meta { color: var(--go-muted); font-size: 12px; }

.go-sched-audit {
    border-top: 1px dashed var(--go-border-strong);
    padding-top: 8px;
    margin-top: 6px;
    line-height: 1.6;
    font-size: 12px;
}

/* Scheduler editor modal dropdowns above everything */
#goSchedModal .ts-dropdown { z-index: 100060 !important; }

@media (max-width: 575.98px) {
    .go-sched-toolbar { flex-direction: column; align-items: stretch; }
    .go-sched-views  { align-self: stretch; }
}

/* ── Dashboard metric cards ───────────────────────────────────── */
.go-metric {
    padding: 18px 20px;
    text-align: left;
    border-left: 4px solid var(--go-primary-lt);
}
.go-metric-label {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--go-muted);
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-bottom: 6px;
}
.go-metric-value { font-size: 2rem; font-weight: 700; color: var(--go-primary); line-height: 1.1; }

/* ── Patient edit header ──────────────────────────────────────── */
.go-patient-topbar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.go-patient-topbar > .btn { margin: 0; }
.go-patient-search { max-width: 480px; flex: 1 1 260px; }
/* Tom Select copies form-control onto the wrapper (38px). Match btn-sm. */
.go-patient-topbar .ts-wrapper,
.go-patient-topbar .ts-wrapper.form-control {
    max-width: 480px;
    flex: 1 1 260px;
    margin: 0;
    min-height: 0;
    height: auto;
    padding: 0 !important;
}
.go-patient-topbar .ts-control {
    min-height: 0;
    padding: 5px 28px 5px 11px;
    font-size: 12.5px;
    line-height: 1.5;
}

.go-patient-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    background: var(--go-card);
    border: 1px solid var(--go-border);
    border-left: 4px solid var(--go-primary-lt);
    border-radius: var(--go-radius);
    box-shadow: var(--go-shadow-xs);
    padding: 14px 18px;
    margin-bottom: 20px;
}

.go-patient-ident { display: flex; align-items: center; gap: 14px; min-width: 0; }

.go-patient-avatar {
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--go-primary-050);
    color: var(--go-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    overflow: hidden;
}
.go-patient-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.go-patient-grid-name {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    min-width: 0;
    vertical-align: middle;
}
.go-patient-grid-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 28px;
    background: var(--go-primary-050);
}

.go-patient-name { font-size: 1.2rem; font-weight: 700; color: var(--go-primary); line-height: 1.2; }
.go-patient-code { font-size: 12.5px; color: var(--go-muted); font-weight: 600; }

.go-patient-status { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.go-status-icon { width: 40px; height: 40px; object-fit: contain; }
i.go-status-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    line-height: 1;
}
.go-status-cash { color: #2e7d32; }
.go-patient-photo-placeholder {
    width: 250px;
    height: 250px;
    max-width: 100%;
    margin: 0 auto;
    border: 1px solid var(--go-border);
    border-radius: var(--go-radius);
    background: var(--go-primary-050);
    color: var(--go-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 72px;
}

.go-balance-box { display: flex; flex-direction: column; align-items: flex-end; }
.go-balance-label { font-size: 11px; font-weight: 700; color: var(--go-muted); text-transform: uppercase; letter-spacing: .4px; margin-bottom: 3px; }
.go-balance-input {
    max-width: 150px;
    text-align: right;
    font-weight: 700;
    font-size: 15px;
    border: 1px solid var(--go-border);
    min-height: 34px;
}

@media (max-width: 575.98px) {
    .go-patient-header { align-items: flex-start; }
    .go-patient-status { width: 100%; justify-content: flex-start; }
    .go-balance-box { align-items: flex-start; }
    .go-balance-input { text-align: left; }
}

/* ── Inline editable list (go-list: simple lookups & short tables) ── */
.go-list {
    border: 1px solid var(--go-border);
    border-radius: var(--go-radius);
    background: var(--go-card);
    box-shadow: var(--go-shadow-xs);
    overflow: hidden;
    max-width: 900px;
}
.go-list-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    border-bottom: 1px solid #eef2f6;
}
.go-list-row:last-child { border-bottom: 0; }
.go-list-head {
    background: #f1f5f9;
    border-bottom: 2px solid var(--go-border-strong);
    font-size: 12px;
    font-weight: 700;
    color: var(--go-primary);
    letter-spacing: .2px;
    padding-top: 10px;
    padding-bottom: 10px;
}
.go-list-cell { min-width: 0; }
.go-list-head .go-list-cell { padding: 0 2px; }
.go-list-data { transition: background .2s; }
.go-list-data:hover { background: var(--go-primary-050); }
.go-list-saved { background: #e6f6ec !important; }
.go-list-act {
    flex: 0 0 auto;
    width: 84px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
.go-list-add {
    background: #f8fafc;
    border-top: 1px solid var(--go-border);
}
.go-list-check { margin: 0; display: inline-flex; }
.go-list-check input { width: 16px; height: 16px; cursor: pointer; }
.go-list-empty {
    padding: 22px 14px;
    text-align: center;
    color: var(--go-muted);
    font-size: 13.5px;
}
.go-list .ts-wrapper { min-width: 120px; }

@media (max-width: 575.98px) {
    .go-list-row { flex-wrap: wrap; gap: 8px; }
    .go-list-head { display: none; }
    .go-list-cell { flex: 1 1 100% !important; }
    .go-list-act { width: 100%; justify-content: flex-start; }
}

/* ── Patient Document Timeline tiles ──────────────────────────── */
.go-doc-tiles {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.go-doc-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 96px;
    height: 96px;
    border: 1px solid var(--go-border);
    border-radius: var(--go-radius-sm);
    background: var(--go-bg);
    overflow: hidden;
    text-decoration: none;
    color: var(--go-muted);
    transition: border-color .15s, box-shadow .15s, transform .15s;
}
.go-doc-tile:hover {
    border-color: var(--go-primary-lt);
    box-shadow: var(--go-shadow-sm);
    transform: translateY(-1px);
}
.go-doc-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.go-doc-tile-file i { font-size: 34px; color: var(--go-primary-lt); }
.go-doc-tile-file .go-doc-tile-name {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--go-muted);
    margin-top: 6px;
    padding: 0 6px;
    max-width: 100%;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.go-doc-tile-missing { background: #f8fafc; }
.go-doc-tile-missing i { color: var(--go-muted-lt); }

/* ── User panel / login partial in sidebar ────────────────────── */
/* One compact row (avatar + email + logout) instead of two full-height
   nav-style rows — the old markup alone ran ~110px tall before any menu
   item appeared, and the same height again in the collapsed rail. */
.go-user-panel {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    border-bottom: 1px solid rgba(255,255,255,.08);
    min-height: 50px;
}

.go-user-avatar {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(255,255,255,.14);
    color: #fff !important;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .2px;
    text-decoration: none !important;
    transition: background .15s;
}
.go-user-avatar:hover { background: var(--go-primary-lt); }

.go-user-info { flex: 1 1 auto; min-width: 0; overflow: hidden; }
.go-user-email {
    display: block;
    color: rgba(255,255,255,.82) !important;
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-decoration: none !important;
}
.go-user-email:hover { color: #fff !important; }

.go-user-logout { flex: 0 0 auto; margin: 0; }
.go-user-logout-btn {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 0;
    background: transparent;
    color: rgba(255,255,255,.55);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    cursor: pointer;
    transition: background .15s, color .15s;
}
.go-user-logout-btn:hover { background: rgba(255,255,255,.14); color: #fff; }

.go-user-guest-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: var(--go-radius-xs);
    color: rgba(255,255,255,.8) !important;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none !important;
}
.go-user-guest-link:hover { background: rgba(255,255,255,.1); color: #fff !important; }
.go-user-panel-guest { gap: 4px; }

/* Resting collapsed rail: avatar only, everything else tucked away. */
.sidebar-collapse .go-user-panel { justify-content: center; padding: 9px 0; gap: 0; }
.sidebar-collapse .go-user-info,
.sidebar-collapse .go-user-logout,
.sidebar-collapse .go-user-guest-link span { display: none; }
.sidebar-collapse .go-user-panel-guest { flex-direction: column; gap: 6px; }
.sidebar-collapse .go-user-guest-link { padding: 6px; justify-content: center; }

/* Restore the full row while AdminLTE's hover-expand is active. */
.sidebar-mini.sidebar-collapse .main-sidebar:hover .go-user-panel,
.sidebar-mini.sidebar-collapse .main-sidebar.sidebar-focused .go-user-panel {
    justify-content: flex-start;
    padding: 9px 14px;
    gap: 10px;
}
.sidebar-mini.sidebar-collapse .main-sidebar:hover .go-user-info,
.sidebar-mini.sidebar-collapse .main-sidebar:hover .go-user-logout,
.sidebar-mini.sidebar-collapse .main-sidebar:hover .go-user-guest-link span,
.sidebar-mini.sidebar-collapse .main-sidebar.sidebar-focused .go-user-info,
.sidebar-mini.sidebar-collapse .main-sidebar.sidebar-focused .go-user-logout,
.sidebar-mini.sidebar-collapse .main-sidebar.sidebar-focused .go-user-guest-link span {
    display: block;
}
.sidebar-mini.sidebar-collapse .main-sidebar:hover .go-user-guest-link,
.sidebar-mini.sidebar-collapse .main-sidebar.sidebar-focused .go-user-guest-link {
    justify-content: flex-start;
}
.sidebar-mini.sidebar-collapse .main-sidebar:hover .go-user-panel-guest,
.sidebar-mini.sidebar-collapse .main-sidebar.sidebar-focused .go-user-panel-guest {
    flex-direction: row;
}

/* ── Utilities ────────────────────────────────────────────────── */
.go-scroll-x { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* .no-print must only hide things when the page is actually printing.
   Unscoped, this rule was hiding the top navbar (and its mobile hamburger
   toggle) and the footer on screen at every breakpoint, which is why the
   sidebar menu could never be opened on phones/tablets. */
@media print {
    .no-print { display: none !important; }
}

/* Filter/action rows above grids stay usable on small screens */
@media (max-width: 767.98px) {
    .form-row.align-items-end > [class*="col-"] {
        flex: 1 1 50% !important;
        max-width: 50% !important;
        width: auto !important;
    }
    .tabulator { min-width: 0; }
    .tabulator .tabulator-tableholder { overflow-x: auto; }
}

@media (max-width: 575.98px) {
    .row + .row { margin-top: 10px !important; }
    .form-row + .form-row { margin-top: 10px !important; }
    .form-row.align-items-end > [class*="col-"] {
        flex: 1 1 100% !important;
        max-width: 100% !important;
    }
}

/* ── Mobile / tablet menu UX ──────────────────────────────────── */
/* The off-canvas sidebar (and the tablet "expand" state, up to 991.98px)
   dims the page behind it with #sidebar-overlay. The stock tint is only
   10% black, which barely reads as a modal scrim — darken it so it's obvious
   the page behind is inactive, and lock background scrolling while open. */
@media (max-width: 991.98px) {
    #sidebar-overlay { background-color: rgba(15, 23, 42, .5) !important; }
    body.sidebar-open { overflow: hidden; }
}

/* Bigger, easier-to-tap touch targets for the sidebar menu and the hamburger
   toggle on phones/tablets. */
@media (max-width: 991.98px) {
    .nav-sidebar .nav-link {
        padding: 12px 14px;
        font-size: 14.5px;
    }
    .nav-sidebar .nav-link .nav-icon { font-size: 1.05rem; }
    .nav-treeview .nav-link { padding: 10px 14px 10px 30px; font-size: 13.5px; }

    .main-header [data-widget="pushmenu"] {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
    }
    .main-header [data-widget="pushmenu"] i { font-size: 1.3rem; }
}

/* Kill the 300ms tap delay / grey tap flash on the controls people tap most
   on touch devices. */
.btn,
.nav-link,
[data-widget="pushmenu"],
.nav-tabs .nav-link,
.tabulator-page {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}