@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap');
:root {
    --mud-drawer-width-left: 230px !important;
    font-size: 16px;
}

/* Preserve MudBlazor input styles when autofilled */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    background-color: var(--mud-palette-background) !important;
    color: var(--mud-palette-text-primary) !important;
    font-family: var(--mud-typography-default-family) !important;
    transition: background-color 5000s ease-in-out 0s;
}

.min-width-250 {
    min-width: 250px;
}

/* ── Error surfaces ───────────────────────────────────────────────
   Two different things, both previously wearing the stock template red.

   .blazor-error-boundary is a single component that failed — the rest of the page
   is alive. #blazor-error-ui is the whole circuit going down, which is why it sits
   across the bottom and offers a reload. */
.blazor-error-boundary {
    background: color-mix(in srgb, var(--mud-palette-error) 10%, var(--mud-palette-surface));
    border: 1px solid color-mix(in srgb, var(--mud-palette-error) 35%, var(--mud-palette-surface));
    border-left: 3px solid var(--mud-palette-error);
    border-radius: 0 8px 8px 0;
    padding: 0.9rem 1.1rem;
    color: var(--mud-palette-text-primary);
    font-size: 0.9rem;
}

.blazor-error-boundary::after {
    content: "This part of the page could not be shown. Try reloading — the details are in the server log."
}

#blazor-error-ui {
    display: none;            /* Blazor sets display:block when the circuit fails */
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2000;
    align-items: center;
    gap: 14px;
    padding: 14px 20px;
    background: var(--mud-palette-surface);
    border-top: 3px solid var(--mud-palette-error);
    box-shadow: 0 -4px 24px rgba(0, 0, 0, .18);
    color: var(--mud-palette-text-primary);
    font-size: 0.9rem;
}

/* Blazor sets display:block, so the layout has to come from the children. */
#blazor-error-ui .clinica-errorbar__text {
    display: inline-block;
    max-width: 70ch;
    vertical-align: middle;
    line-height: 1.45;
}

#blazor-error-ui .clinica-errorbar__btn,
#blazor-error-ui .clinica-errorbar__x {
    vertical-align: middle;
    margin-left: 14px;
    font: inherit;
    cursor: pointer;
    border-radius: 6px;
    border: 1px solid var(--mud-palette-lines-default);
    background: transparent;
    color: var(--mud-palette-text-primary);
    padding: 6px 14px;
}

#blazor-error-ui .clinica-errorbar__btn {
    font-weight: 600;
    border-color: var(--mud-palette-error);
    color: var(--mud-palette-error);
}

#blazor-error-ui .clinica-errorbar__btn:hover {
    background: color-mix(in srgb, var(--mud-palette-error) 10%, transparent);
}

#blazor-error-ui .clinica-errorbar__x {
    padding: 6px 10px;
    color: var(--mud-palette-text-secondary);
}

/* ── Nav active highlight ─────────────────────────────────────── */
.clinica-nav .mud-nav-link.active {
    background-color: rgba(255,255,255,0.12) !important;
    border-left: 3px solid var(--mud-palette-drawer-text) !important;
    border-radius: 0 6px 6px 0 !important;
}

.clinica-nav .mud-nav-link.active .mud-icon-root,
.clinica-nav .mud-nav-link.active .mud-nav-link-text {
    color: var(--mud-palette-drawer-text) !important;
    font-weight: 600;
}

/* ── Nav item wrapping ────────────────────────────────────────────
   The drawer is a fixed 230px, so a long label wraps to two lines and breaks the
   even rhythm of the menu. Keep every item on one line and ellipsis anything that
   genuinely will not fit, rather than letting it reflow the whole list.
   Labels should still be kept short — this is a backstop, not a licence. */
.clinica-nav .mud-nav-link-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Do NOT override nav-link padding or icon spacing here.
   MudBlazor already aligns first-level items: `.mud-nav-link { padding: 8px 16px }`
   applies to plain links AND to a MudNavGroup's header button (the header is a
   direct child of .mud-nav-group), and nested items are indented separately by
   `.mud-nav-group * .mud-navmenu .mud-nav-item .mud-nav-link { padding-left:36px }`.

   A `.clinica-nav .mud-nav-group .mud-nav-link` rule is a descendant selector, so
   it hits the group HEADER too — it out-specifies the 16px base but not the 36px
   nested rule, which shifts every group title right and breaks alignment with
   Dashboard / Reports / User Guide. That is exactly what happened here. */

/* ── Form alignment ───────────────────────────────────────────────
   MudGrid stretches its items to the row height, but a MudToggleGroup has no
   label row, so it keeps its natural ~36px height and floats at the TOP of the
   row while the outlined inputs beside it are ~56px. That is the single most
   repeated alignment fault across the entry forms (New Booking, Walk-in, New
   Admission, Add Staff, back-office entry...).

   Making the grid cell a centring flex container keeps the toggle at its natural
   height and centres it against the input beside it. Filling the cell (height:100%)
   was tried first and overshot — the cell is taller than the input it contains.

   :only-child is load-bearing, do not drop it. Several cells hold a divider or a
   heading ABOVE the toggle (QuickProcedure, StaffCreate, StaffEdit). Without it
   those cells also became flex ROWS, so the divider and the toggle laid out side
   by side and the toggle — at width:100% — was squeezed until its options were
   clipped. Cells with siblings must stay in normal block flow; they stack their
   own content and have no single control to centre against anyway. */
.mud-grid-item:has(> .mud-toggle-group:only-child) {
    display: flex;
    align-items: center;
}

.mud-grid-item > .mud-toggle-group:only-child {
    width: 100%;
}

/* Helper/counter text under one field of a two-column row makes that column
   taller than its neighbour. Reserving the space on every field in a grid keeps
   the row bottoms level. */
.mud-grid-item .mud-input-helper-text {
    margin-bottom: 0;
}

/* ...and it also makes the whole ROW taller, so the next row starts a line lower
   than every other gap on the form. That reads as uneven spacing between rows
   that are otherwise identical, and the workaround until now was to delete the
   helper text (see PatientEdit's Blood Group note).

   This drops the text into the grid's own gutter instead, leaving the field the
   same height as its neighbours. Opt-in per field, not global: plenty of forms
   have helper text long enough to wrap, and a wrapped line here would sit on top
   of the row below. Keep the text to one short line wherever this is used.

   Only from sm up. Below that the grid is a single column, where helper text
   costs height but cannot misalign anything. */
@media (min-width: 600px) {
    .clinica-hint-in-gutter {
        position: relative;
    }

    .clinica-hint-in-gutter .mud-input-helper-text {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        margin-top: 3px;
    }
}

/* ── Date / time pickers ──────────────────────────────────────────
   NEVER put a width on a MudDatePicker/MudTimePicker itself — the calendar or
   clock panel is sized from the picker and gets truncated with it. Constrain a
   wrapper element instead (see .picker-w-* below), which leaves the popover free
   to take its natural width. Same pattern as Empresa.

   Mechanism (MudBlazor 9.4.0 MudBlazor.min.css):
     .mud-picker-content      { min-width:310px; max-width:100%; overflow:hidden }
     .mud-picker-popover-paper{ min-width:16px; overflow-x:hidden; position:absolute }
   The panel wants 310px, but the paper it sits in only floors at 16px and clips
   with overflow-x:hidden — so a narrow anchor shrinks the paper and chops the
   calendar/clock. Giving the paper a content-sized floor stops that, whatever
   the field width. max-content rather than a hard 310px so it also covers time
   pickers and the wider date-RANGE picker without guessing a number per type.

   This is the safety net for pickers whose constraint is NOT an inline style —
   e.g. the doctor slot dialog, where the time pickers sit in a MudItem xs="6". */
.mud-picker-popover-paper,
.mud-popover.mud-picker-popover {
    min-width: max-content;
}

/* Fixed-footprint wrappers for pickers sitting in flex toolbars. The width lives
   here, not on the picker. */
.picker-w-sm, .picker-w-md, .picker-w-lg {
    flex: 0 0 auto;
}
.picker-w-sm { width: 150px; }
.picker-w-md { width: 180px; }
.picker-w-lg { width: 205px; }

/* Data-grid filter toolbars: a uniform gap between filter controls, and vertical
   centring so a date picker does not sit proud of the selects beside it. The
   filters previously relied on incidental flex slack, which gave ~85px gaps in
   some places and none in others. */
.mud-table-toolbar {
    gap: 12px;
    flex-wrap: wrap;
    row-gap: 8px;
    align-items: center;
}

/* ── Utility classes ──────────────────────────────────────────── */
.stat-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    color: var(--mud-palette-text-secondary);
}

.text-muted {
    color: var(--mud-palette-text-secondary) !important;
}

.rounded-xl {
    border-radius: 16px !important;
}

.nav-section-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 8px 16px 4px;
    color: var(--mud-palette-drawer-icon);
}

/* ── Collapsible section header (consultation workspace) ──────────
   Clickable title row: chevron + title + summary of what's folded away.
   Negative margin/padding widens the hit area to the panel edges without
   moving the title, so the whole strip is tappable on a phone. */
.section-head {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
    margin: -8px -8px 0;
    padding: 8px;
    border-radius: 4px;
    min-height: 36px;
}

.section-head:hover {
    background: rgba(0,0,0,0.03);
}

/* Summary text takes the leftover room and truncates rather than wrapping,
   so a long investigation list can't push the header to two lines. */
.section-head > .mud-typography-caption {
    margin-left: auto;
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

/* ── Drawer branding header ───────────────────────────────────── */
.clinica-drawer-header {
    background: linear-gradient(160deg, rgba(255,255,255,0.07) 0%, transparent 100%);
    border-bottom: 1px solid rgba(255,255,255,0.10);
    padding: 18px 16px 16px;
    text-align: center;
}

.clinica-drawer-logo {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: 0.5px;
    color: var(--mud-palette-drawer-text);
    line-height: 1.2;
}

.clinica-drawer-tagline {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--mud-palette-drawer-icon);
    margin-top: 2px;
}

/* ── Reconnect overlay ────────────────────────────────────────────────────────
   Blazor toggles #components-reconnect-modal between the show / failed / rejected
   states by setting a class on it; each box below claims one of those states. The
   default template is a bare grey bar with no room to explain anything, and the
   explanation is the point: staff who reload during a blip are the ones who lose
   their work. */
#components-reconnect-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 20000;
    align-items: center;
    justify-content: center;
    background: rgba(19, 24, 34, .55);
    backdrop-filter: blur(2px);
}

#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected {
    display: flex;
}

.clinica-reconnect__box {
    display: none;
    align-items: center;
    gap: 16px;
    max-width: 460px;
    padding: 20px 24px;
    border-radius: 10px;
    background: var(--mud-palette-surface, #fff);
    color: var(--mud-palette-text-primary, #131822);
    box-shadow: 0 12px 40px rgba(0, 0, 0, .3);
    font-family: "Noto Sans", system-ui, sans-serif;
}

.components-reconnect-show   .clinica-reconnect__box:not([class*="--"]),
.components-reconnect-failed .clinica-reconnect__box--failed,
.components-reconnect-rejected .clinica-reconnect__box--rejected {
    display: flex;
}

.clinica-reconnect__title  { font-weight: 600; font-size: .95rem; margin-bottom: 4px; }
.clinica-reconnect__detail { font-size: .82rem; line-height: 1.5; opacity: .85; }

.clinica-reconnect__spinner {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    border: 3px solid color-mix(in srgb, var(--mud-palette-primary) 25%, transparent);
    border-top-color: var(--mud-palette-primary, #2F4B8F);
    border-radius: 50%;
    animation: clinica-reconnect-spin 1s linear infinite;
}

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

@media (prefers-reduced-motion: reduce) {
    .clinica-reconnect__spinner { animation-duration: 3s; }
}

.clinica-reconnect__btn {
    font: inherit;
    font-size: .82rem;
    font-weight: 600;
    cursor: pointer;
    padding: 7px 14px;
    border-radius: 6px;
    border: 1px solid var(--mud-palette-primary, #2F4B8F);
    background: transparent;
    color: var(--mud-palette-primary, #2F4B8F);
}

.clinica-reconnect__btn:hover { background: color-mix(in srgb, var(--mud-palette-primary) 8%, transparent); }

/* ── Theme picker (Settings → Appearance) ─────────────────────── */
.clinica-theme-card,
.clinica-theme-card-on {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 10px;
    transition: border-color .15s, box-shadow .15s;
}

.clinica-theme-card:hover {
    border-color: var(--mud-palette-primary);
}

.clinica-theme-card-on {
    border-color: var(--mud-palette-primary);
    box-shadow: 0 0 0 1px var(--mud-palette-primary);
}

.clinica-theme-swatch {
    display: flex;
    height: 34px;
    border-radius: 7px;
    overflow: hidden;
}

.clinica-theme-swatch span {
    flex: 1;
    display: block;
}

/* The drawer's own divider must not follow the page's Divider token. Teal's is a dark
   alpha — invisible against a dark drawer, which is why nobody noticed — while Indigo's
   is a solid light grey and lit up like a rule across the nav. A faint white matches the
   other borders already in there. */
.clinica-nav-divider {
    border-color: rgba(255, 255, 255, 0.08) !important;
}