:root {
    color-scheme: light;
    --bg-page-top: #F0F2F5;
    --bg-page: #F0F2F5;
    --bg-shell: #F7F8FA;
    --panel: #ffffff;
    --panel-soft: #F5F7FB;
    --panel-hover: #FAFBFC;
    --surface-elevated: #ffffff;
    --surface-soft: #F7F8FA;
    --text: #1C2433;
    --text-secondary: #4A5568;
    --muted: #8694A7;
    --line: #E2E7EE;
    --line-soft: #EDF0F4;
    --link: #1D5BBF;
    --link-hover: #2358C4;
    --primary: #2968E0;
    --primary-strong: #2358C4;
    --primary-ghost: rgba(41, 104, 224, 0.08);
    --accent: #D98B3A;
    --accent-strong: #C47B2E;
    --accent-ghost: rgba(217, 139, 58, 0.08);
    --success: #1A8A5E;
    --success-bg: #E8F5EE;
    --danger: #C4463A;
    --danger-bg: #FDEDEB;
    --warning: #B8860B;
    --warning-bg: #FEF6E0;
    --info: #2E6DA4;
    --info-bg: #E8F0FA;
    /* Status text — a dark shade that stays legible on its light tint.
       The dark theme flips these to light shades over the dark tint. */
    --danger-text: #9C2A20;
    --success-text: #166534;
    --warning-text: #7A5705;
    --info-text: #1D4B7A;
    --primary-text: #1D4BB0;
    /* Tinted hairlines for status surfaces (badges, alert rails, chips). */
    --danger-line: #F0B9B3;
    --success-line: #B9E3C7;
    --warning-line: #F4D8A8;
    --info-line: #BFDCFF;
    --primary-line: #7CA5E8;
    /* Text sitting on a solid colour fill — stays light in BOTH themes,
       otherwise a primary button's label inverts to near-black in dark. */
    --text-on-solid: #FFFFFF;
    /* Appointment statuses that carry meaning but sit outside the core palette. */
    --status-confirmed: #0EA5E9;
    --status-rescheduled: #7C3AED;
    /* Solid brand fills that carry a white label. These deliberately do NOT change
       with the theme: the themed --primary/--success/... lighten for use as text on
       a dark background, and white-on-#5B93E8 is only 3.1:1. A blue button stays
       blue in both themes, which is both legible and on-brand. */
    --primary-solid: #2968E0;
    --success-solid: #1A8A5E;
    --danger-solid: #C4463A;
    --accent-solid: #D98B3A;
    --info-solid: #2E6DA4;
    --overlay-solid: #1C2433;
    /* Legacy aliases. Twig <style> blocks and older rules reference these names
       with a hardcoded light fallback — var(--text-2, #4A5568). While the name
       was undefined the fallback always won, so those widgets stayed light in
       dark mode. Pointing each alias at its canonical token themes all of them
       at once; the light values are unchanged. Templates rendered WITHOUT this
       stylesheet (Dompdf exports) still fall back to the literal, so PDFs stay light. */
    --text-2: var(--text-secondary);
    --text-muted: var(--muted);
    --color-text: var(--text);
    --color-text-muted: var(--text-secondary);
    --shell: var(--bg-shell);
    --surface: var(--panel);
    --surface-1: var(--panel);
    --surface-2: var(--panel-hover);
    --surface-subtle: var(--panel-hover);
    --surface-hover: var(--panel-soft);
    --bg-alt: var(--panel-soft);
    --border: var(--line);
    --border-color: var(--line);
    --accent-hover: var(--accent-strong);
    --success-strong: var(--success-text);
    --focus: var(--primary);
    --radius-lg: 0.5rem;
    --radius-md: 0.5rem;
    --shadow: 0 1px 3px rgba(28, 36, 51, 0.06), 0 2px 8px rgba(28, 36, 51, 0.04);
    --control-radius: 0.4rem;
    --control-font-size: 0.95rem;
    --control-line-height: 1.35;
    --control-min-height: 2.35rem;
    --control-padding-y: 0.42rem;
    --control-padding-x: 0.85rem;
}

:root[data-theme='dark'] {
    color-scheme: dark;
    --bg-page-top: #0D1117;
    --bg-page: #0D1117;
    --bg-shell: #111820;
    --panel: #161D27;
    --panel-soft: #1B2332;
    --panel-hover: #1B2332;
    --surface-elevated: #1A2A40;
    --surface-soft: #1E2630;
    --text: #D6DEE8;
    --text-secondary: #9CAABB;
    --muted: #6B7A8D;
    --line: #252E3B;
    --line-soft: #1E2630;
    --link: #7EB0F5;
    --link-hover: #94C0FF;
    --primary: #5B93E8;
    --primary-strong: #4A82D6;
    --primary-ghost: rgba(91, 147, 232, 0.12);
    --accent: #E8A455;
    --accent-strong: #D69444;
    --accent-ghost: rgba(232, 164, 85, 0.12);
    --success: #4DB88A;
    --success-bg: rgba(77, 184, 138, 0.1);
    --danger: #E86B60;
    --danger-bg: rgba(232, 107, 96, 0.1);
    --warning: #DBA94A;
    --warning-bg: rgba(219, 169, 74, 0.1);
    --info: #6BA3D6;
    --info-bg: rgba(107, 163, 214, 0.1);
    --danger-text: #F0908A;
    --success-text: #5FCB9B;
    --warning-text: #E3B862;
    --info-text: #7DB4E3;
    --primary-text: #8AB6F8;
    --danger-line: rgba(232, 107, 96, 0.32);
    --success-line: rgba(77, 184, 138, 0.32);
    --warning-line: rgba(219, 169, 74, 0.32);
    --info-line: rgba(107, 163, 214, 0.32);
    --primary-line: rgba(91, 147, 232, 0.38);
    --text-on-solid: #FFFFFF;
    --status-confirmed: #56C2F0;
    --status-rescheduled: #B18CF5;
    --shadow: 0 1px 3px rgba(0, 0, 0, 0.2), 0 2px 8px rgba(0, 0, 0, 0.25);
}

html {
    font-size: 95%;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: "DM Sans", -apple-system, "Segoe UI", sans-serif;
    color: var(--text);
    background: linear-gradient(180deg, var(--bg-page-top) 0%, var(--bg-page) 100%);
    overflow-x: hidden;
}

a {
    color: var(--link);
    text-decoration: none;
}

a:hover,
a:focus-visible {
    color: var(--link-hover);
    text-decoration: none;
}

h1,
h2,
h3,
h4,
p {
    margin: 0;
}

.u-muted {
    color: var(--muted);
}

/* Signals "hover me for a tooltip" — used on truncated cell content
   (e.g. the Produse column on /facturare) so the cursor itself is
   the affordance for "there is more here on hover". */
.u-help-cursor {
    cursor: help;
}

/* Theme toggle — sits alongside Profil/Logout in the sidebar session actions. */
.theme-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.42rem;
    min-height: 2rem;
    padding: 0.3rem 0.55rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    color: var(--text);
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
}

.theme-toggle:hover {
    background: var(--bg-page);
}

.theme-toggle--session {
    flex: 0 0 auto;
    min-width: 0;
    min-height: 0;
    justify-content: center;
    gap: 0;
    padding: 0.26rem 0.42rem;
    border-radius: 0.52rem;
    line-height: 1;
}

.theme-toggle--session .theme-toggle__swatch {
    width: 0.6rem;
    height: 0.6rem;
}

.theme-toggle__icon {
    flex-shrink: 0;
}

.theme-toggle__icon--moon {
    display: none;
}

:root[data-theme='dark'] .theme-toggle__icon--sun {
    display: none;
}

:root[data-theme='dark'] .theme-toggle__icon--moon {
    display: inline-block;
}

.theme-toggle__swatch {
    width: 0.72rem;
    height: 0.72rem;
    border-radius: 50%;
    border: 1px solid rgba(23, 39, 63, 0.25);
    background: #f7c75a;
}

.theme-toggle[data-theme-toggle-mode='dark'] .theme-toggle__swatch {
    background: #6fa4ff;
}

.nir-entry-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.12rem 0.5rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.2;
    margin-top: 0.22rem;
}

.nir-entry-badge--purchase {
    background: var(--bg-page);
    color: var(--primary-strong);
}

.nir-entry-badge--promo {
    background: var(--warning-bg);
    color: var(--warning-text);
}

.nir-entry-badge--bonus {
    background: var(--panel-soft);
    color: var(--success-text);
}

/* Marks a NIR line that carries no sale price. Drawn to DESIGN.md's badge
   rule - a rectangle with a 2.5px left-border accent, not a pill - and kept
   neutral rather than amber: a consumable is the normal case on a lab invoice,
   not a warning. (The .nir-entry-badge / .nir-review-badge rules above still
   use border-radius 999px and predate that rule.) */
.nir-consumable-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.12rem 0.45rem;
    border-radius: 4px;
    border-left: 2.5px solid var(--muted);
    background: var(--panel-soft);
    color: var(--text-secondary);
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.35;
    white-space: nowrap;
}

.nir-consumable-badge svg {
    flex: none;
}

.nir-review-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.12rem 0.5rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.2;
    margin: 0.28rem 0 0.12rem;
}

.nir-review-badge--done {
    background: var(--panel-soft);
    color: var(--success-text);
}

.nir-review-badge--pending {
    background: var(--warning-bg);
    color: var(--warning-text);
}

.nir-row--reviewed td {
    background: var(--bg-page);
}

.nir-row--reviewed td:first-child {
    box-shadow: inset 3px 0 0 #1f9f6f;
}

.nir-invoice-row--service td {
    background: var(--panel-soft);
}

.nir-invoice-row--service td:first-child {
    box-shadow: inset 3px 0 0 #d9822b;
}

.nir-invoice-row--discount td {
    background: var(--surface-soft);
}

.nir-invoice-row--discount td:first-child {
    box-shadow: inset 3px 0 0 #c24545;
}

.nir-class-cell {
    min-width: 190px;
}

.nir-class-badge {
    display: inline-block;
    padding: 0.18rem 0.55rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.nir-class-badge--product {
    background: var(--bg-page);
    color: var(--success-text);
}

.nir-class-badge--service {
    background: var(--warning-bg);
    color: var(--warning-text);
}

.nir-class-badge--discount {
    background: var(--surface-soft);
    color: var(--danger-text);
}

.nir-class-override {
    display: inline-block;
    margin-left: 0.3rem;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    background: var(--line);
    color: var(--text);
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.nir-class-actions {
    margin-top: 0.4rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

/* Inline label+input row used by the contabil export panel on /nir-uri.
   Overrides the global `label { display: grid }` rule that otherwise
   stacks the label text on top of its select / date input. */
.nir-export-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.nir-export-row > label {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 600;
    white-space: nowrap;
}

.nir-export-row > label > select,
.nir-export-row > label > input {
    width: auto;
    min-width: 11rem;
}

.nir-overridden-services {
    margin-bottom: 0.5rem;
}

.nir-overridden-services > summary {
    cursor: pointer;
    font-weight: 600;
    padding: 0.45rem 0;
    list-style: none;
    color: var(--warning-text);
}

.nir-overridden-services > summary::-webkit-details-marker {
    display: none;
}

.nir-overridden-services > summary::before {
    content: '+ ';
    font-weight: 700;
    margin-right: 0.25rem;
}

.nir-overridden-services[open] > summary::before {
    content: '− ';
}

.nir-overridden-services__list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.nir-overridden-services__line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.5rem 0.75rem;
    background: var(--panel);
    border: 1px solid var(--warning-line);
    border-radius: 0.5rem;
}

.nir-service-pill {
    display: inline-block;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    background: var(--warning-bg);
    color: var(--warning-text);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    text-align: center;
}

/* PRODUSE column on the received-invoices grid: one product per line
   instead of a comma-joined blob, so long item names stay readable. */
.nir-product-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.nir-product-line {
    line-height: 1.3;
}

.nir-product-line--more {
    color: var(--text-secondary);
    font-size: 0.8rem;
    font-style: italic;
}

.nir-automatch {
    margin-top: 0.4rem;
}

.nir-row-actions {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
}

.nir-row-actions > .btn {
    white-space: nowrap;
}

.nir-editor-head {
    flex: 1;
    min-width: 0;
}

.nir-editor-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.35rem;
}

/* Warning under "Cod de bare produs" when the invoice carried no usable code.
   Sits inside the field's own label, so it needs the tighter type of a note
   rather than the page-level flash proportions. */
.nir-barcode-note {
    margin-top: 0.35rem;
    font-size: 0.8rem;
    line-height: 1.35;
    font-weight: 500;
}

/* "Cod de bare pentru eticheta" on the service form. A heading plus content,
   no inner panel — the form already is the surface. */
.svc-code {
    padding-top: 0.75rem;
    border-top: 1px solid var(--line-soft);
}

.svc-code h4 {
    margin: 0 0 0.6rem;
}

.svc-code__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
}

.svc-code__symbol {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: 0.4rem 0.6rem;
}

.svc-code__meta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
    min-width: 0;
}

.svc-code__meta code {
    font-size: 1rem;
    letter-spacing: 0.06em;
}

.svc-code__meta p {
    margin: 0;
    font-size: 0.8rem;
    max-width: 34rem;
}

/* Service barcode sheet (/operare/servicii/coduri-bare). Flat surfaces only —
   the cards are grid tiles for separable entities, which is what cards are
   for; nothing here nests another panel. */
.sb-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    justify-content: space-between;
}

.sb-toolbar__search {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex: 1 1 22rem;
}

.sb-toolbar__search .input {
    flex: 1 1 auto;
    min-width: 0;
}

.sb-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
    padding-top: 0.5rem;
    border-top: 1px solid var(--line-soft);
}

.sb-actions__check,
.sb-actions__copies {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
}

.sb-actions__copies .input {
    width: 4.5rem;
}

.sb-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: 0.75rem;
}

.sb-card {
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: 0.7rem;
    background: var(--panel);
    transition: opacity 100ms ease-out;
}

.sb-card.is-excluded {
    opacity: 0.4;
}

.sb-card__pick {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    cursor: pointer;
}

.sb-card__symbol {
    background: #fff;
    border-radius: 0.25rem;
    padding: 0.3rem;
}

.sb-card__symbol svg {
    width: 100%;
    height: auto;
    display: block;
}

.sb-card__meta {
    margin: 0.45rem 0 0;
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* Scan confirmation on the sale page. Shares the lineMessage slot with the
   autosave errors, so it has to undo the danger colour .form-error sets —
   a line going up by one is not a failure. The class is repeated to outrank
   .form-error, which is declared later in this file. */
.sale-line-message--info.sale-line-message--info {
    color: var(--success);
}

/* Confirms a scan landed — without it the operator cannot tell the field was
   filled and scans again. Transition stays within the 100ms ceiling. */
.is-barcode-filled {
    border-color: var(--success) !important;
    background: var(--success-bg) !important;
    transition: background 100ms ease-out, border-color 100ms ease-out;
}

.nir-editor-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    background: var(--bg-page);
    color: var(--text);
    font-size: 0.72rem;
    line-height: 1.2;
    white-space: nowrap;
}

.nir-editor-chip__label {
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    opacity: 0.7;
}

.nir-editor-chip__value {
    font-weight: 700;
}

.nir-editor-section {
    padding: 0;
}

/* Tighter controls inside the NIR line editor so the whole form fits on
 * screen without forcing the user to scroll. The global input baseline
 * (see `input:not([type='checkbox'])...` ruleset) sizes every control via
 * CSS custom properties, so we shrink those properties locally on the
 * editor grid and the cascade takes care of the rest — no specificity
 * fight with the global rule, no !important needed. */
.nir-editor-basic {
    --control-min-height: 1.95rem;
    --control-padding-y: 0.28rem;
    --control-padding-x: 0.6rem;
    --control-font-size: 0.85rem;
    --control-line-height: 1.2;
    --control-radius: 0.55rem;
    row-gap: 0.45rem;
    column-gap: 0.65rem;
    margin-top: 0.25rem;
}

.nir-editor-basic label {
    display: flex;
    flex-direction: column;
    gap: 0.18rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text);
}

/* NIR line editor: group headings + per-field explanation. Plain heading
 * and spacing — the modal is already the surface, no inner panels. */
.nir-editor-group-title {
    margin: 1.4rem 0 0.15rem !important;
    padding-bottom: 0.25rem;
    border-bottom: 1px solid var(--line-soft);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.nir-editor-section > .nir-editor-group-title:first-child {
    margin-top: 0.25rem !important;
}

.nir-editor-span {
    grid-column: 1 / -1;
}

.nir-field-label {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.nir-field-help {
    font-size: 0.72rem;
    font-weight: 400;
    line-height: 1.35;
    color: var(--muted);
}

.nir-field-help:empty {
    display: none;
}

/* "i" / "!" bubble next to a label; the explanation shows on hover or
 * keyboard focus. Anchored to the label (not the bubble) and spanning its
 * width, so it can never overflow the modal sideways. */
.nir-editor-basic label {
    position: relative;
}

.field-tip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    border: 1px solid var(--info-line);
    background: var(--info-bg);
    color: var(--info-text);
    font-size: 0.65rem;
    font-weight: 700;
    line-height: 1;
    cursor: help;
    transition: background 100ms ease;
}

.field-tip--warning {
    border-color: var(--warning-line);
    background: var(--warning-bg);
    color: var(--warning-text);
}

.field-tip:focus-visible {
    outline: 2px solid var(--primary-line);
    outline-offset: 1px;
}

.field-tip__bubble {
    position: absolute;
    z-index: 30;
    top: 1.35rem;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: 0.5rem 0.65rem;
    border-radius: 6px;
    border: 1px solid var(--info-line);
    border-left: 3px solid var(--info);
    background: var(--surface-elevated);
    color: var(--text);
    box-shadow: 0 6px 18px rgba(28, 36, 51, 0.14);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.4;
    text-transform: none;
    letter-spacing: normal;
    white-space: normal;
    cursor: default;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 100ms ease;
}

.field-tip--warning .field-tip__bubble {
    border-color: var(--warning-line);
    border-left-color: var(--warning);
}

/* The runtime line (invoice quantity, cost + adaos, barcode status...). */
.field-tip__live {
    padding-top: 0.3rem;
    border-top: 1px solid var(--line-soft);
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.field-tip__live:empty {
    display: none;
}

.field-tip:hover .field-tip__bubble,
.field-tip:focus .field-tip__bubble,
.field-tip:focus-within .field-tip__bubble {
    opacity: 1;
    visibility: visible;
}

/* TomSelect wraps certain <select>s in a .ts-wrapper which reads the same
 * custom property for its control height — the overrides above already
 * flow into those wrappers too, nothing extra needed here. */

.nir-editor-suggestion {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 0.9rem;
    border-radius: 0.6rem;
    background: var(--panel-soft);
    border: 1px solid #bfdcff;
    color: var(--text);
}

.nir-editor-suggestion[hidden] {
    display: none !important;
}

.nir-editor-suggestion__icon {
    font-size: 1.25rem;
    line-height: 1;
    flex: 0 0 auto;
}

.nir-editor-suggestion__body {
    flex: 1 1 auto;
    min-width: 0;
}

.nir-editor-suggestion__body strong {
    display: block;
    font-size: 0.88rem;
    line-height: 1.25;
}

.nir-editor-suggestion__body .u-muted {
    font-size: 0.78rem;
    line-height: 1.25;
    word-break: break-word;
}

.nir-discount-chooser {
    border: 1px solid var(--warning-line);
    background: var(--panel-soft);
}

.nir-discount-chooser__lines {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.82rem;
}

.nir-discount-chooser__line {
    padding: 0.25rem 0.5rem;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 0.4rem;
}

.nir-discount-chooser__options {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 0.5rem;
}

.nir-discount-chooser__option {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
    flex: 1 1 220px;
    padding: 0.6rem 0.75rem;
    background: var(--panel);
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 0.5rem;
    cursor: pointer;
}

.nir-discount-chooser__option input[type="radio"] {
    margin-top: 0.2rem;
}

.form-note {
    min-height: 2.75rem;
    display: flex;
    align-items: center;
    padding: 0.35rem 0.15rem 0;
}

.is-hidden {
    display: none !important;
}

[hidden] {
    display: none !important;
}

.stack-sm {
    display: grid;
    gap: 0.5rem;
}

.stack-xs {
    display: grid;
    gap: 0.3rem;
}

.input {
    width: 100%;
    min-width: 9rem;
    border: 1px solid var(--line);
    border-radius: 0.55rem;
    padding: 0.42rem 0.55rem;
    font: inherit;
    color: var(--text);
    background: var(--panel);
}

.stack-md {
    display: grid;
    gap: 0.9rem;
}

/* App-shell pages (dashboard, lists, details, settings…) must have exactly one
   scroll container: .workspace. Using :has() to scope the pin to body/html so
   the landing page, login, and other non-app-shell layouts keep their normal
   document flow. Belt-and-braces: pin both html/body AND .app-shell-wrap. */
html:has(.app-shell-wrap),
body:has(.app-shell-wrap) {
    height: 100vh;
    max-height: 100vh;
    overflow: hidden;
}

.app-shell-wrap {
    padding: 0.18rem;
    position: relative;
    height: 100vh;
    max-height: 100vh;
    overflow: hidden;
}

.app-shell {
    min-height: 0;
    height: 100%;
    min-width: 0;
    background: var(--bg-shell);
    border: 0;
    border-radius: 0.9rem;
    box-shadow: none;
    display: grid;
    grid-template-columns: 16.5rem 1fr;
    overflow: hidden;
}

.sidebar {
    background: var(--panel);
    border-right: 1px solid var(--line);
    padding: 1.4rem 1rem;
    min-width: 0;
    max-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -ms-overflow-style: none;
    scrollbar-width: none;
    transition: width 0.22s ease, padding 0.22s ease, transform 0.22s ease;
}

.sidebar::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}

.brand {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.7rem 0.2rem 0.8rem;
    margin-bottom: 1rem;
    min-width: 0;
}

.brand__link {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    min-width: 0;
    flex: 1 1 auto;
    color: inherit;
    text-decoration: none;
}

.brand__logo {
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 0.65rem;
    display: grid;
    place-content: center;
    font-size: 0.72rem;
    font-weight: 700;
    color: #2c6df5;
    border: 1px solid var(--line);
    background: var(--panel);
    overflow: hidden;
}

.brand__logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.brand h1 {
    font-size: 1.15rem;
    line-height: 1.08;
    word-break: break-word;
}

.brand p {
    margin-top: 0.2rem;
    color: var(--muted);
    font-size: 0.68rem;
}

.sidebar-session {
    margin: 0.2rem 0 0.95rem;
    padding: 0.62rem 0.65rem;
    border: 1px solid var(--line);
    border-radius: 0.7rem;
    background: var(--bg-page);
    display: grid;
    gap: 0.55rem;
}

.sidebar-session__header {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.55rem;
}

.sidebar-session__avatar {
    width: 3.1rem;
    height: 3.1rem;
    padding: 0;
    border-radius: 999px;
    border: 1px solid #c9d5ea;
    background: var(--panel);
    color: var(--text);
    font: inherit;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex: 0 0 3.1rem;
    cursor: pointer;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}

.sidebar-session__avatar:hover,
.sidebar-session__avatar:focus-visible {
    border-color: var(--accent, #3b6dd6);
    box-shadow: 0 0 0 2px rgba(59, 109, 214, 0.18);
    outline: none;
}

.sidebar-session__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.sidebar-session__meta {
    display: grid;
    gap: 0.14rem;
    min-width: 0;
    flex: 1 1 auto;
    text-align: left;
    justify-items: start;
}

.sidebar-session__meta strong,
.sidebar-session__meta span {
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.sidebar-session__meta strong {
    font-size: 0.78rem;
    color: var(--text);
    white-space: normal;
    line-height: 1.2;
}

.sidebar-session__meta span {
    font-size: 0.7rem;
    color: var(--text-secondary);
    white-space: normal;
    line-height: 1.2;
}

.sidebar-session__impersonation {
    color: var(--danger-text) !important;
    font-weight: 700;
}

.sidebar-session__actions {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-end;
    gap: 0.28rem;
}

.sidebar-session__actions .btn {
    white-space: nowrap;
    flex: 1 1 0;
    min-width: 0;
    padding-inline: 0.45rem;
}

@media (max-width: 1024px) {
    .brand {
        gap: 0.6rem;
        padding-inline: 0.05rem;
    }

    .brand__logo {
        width: 4rem;
        height: 4rem;
    }

    .brand h1 {
        font-size: 1.05rem;
    }

    .brand p {
        font-size: 0.66rem;
    }

    .sidebar-session {
        padding: 0.58rem 0.6rem;
    }

    .sidebar-session__avatar {
        width: 2.7rem;
        height: 2.7rem;
        flex-basis: 2.7rem;
    }
}

@media (max-width: 560px) {
    .brand__logo {
        width: 3.45rem;
        height: 3.45rem;
    }

    .brand h1 {
        font-size: 0.98rem;
    }

    .brand p {
        font-size: 0.62rem;
    }

    .sidebar-session {
        padding: 0.5rem 0.5rem;
        gap: 0.42rem;
    }

    .sidebar-session__header {
        gap: 0.42rem;
    }

    .sidebar-session__avatar {
        width: 2.3rem;
        height: 2.3rem;
        flex-basis: 2.3rem;
    }

    .sidebar-session__meta strong {
        font-size: 0.74rem;
    }

    .sidebar-session__meta span {
        font-size: 0.67rem;
    }

    .sidebar-session__actions {
        gap: 0.2rem;
    }

    .sidebar-session__actions .btn.btn--tiny {
        font-size: 0.82rem;
        padding-inline: 0.3rem;
    }
}

@media (max-width: 420px) {
    .brand__logo {
        width: 3.1rem;
        height: 3.1rem;
    }

    .brand h1 {
        font-size: 0.92rem;
    }

    .sidebar-session__actions .btn.btn--tiny {
        font-size: 0.76rem;
        padding-inline: 0.22rem;
    }
}

.menu {
    display: grid;
    gap: 0.22rem;
}

.menu__label {
    margin-top: 0.9rem;
    margin-bottom: 0.2rem;
    padding: 0 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 700;
}

.menu__item {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    text-decoration: none;
    color: var(--text);
    font-weight: 500;
    padding: 0.62rem 0.75rem;
    border-radius: 0.7rem;
    border: 1px solid transparent;
    position: relative;
    overflow: hidden;
}

.menu__item:hover {
    background: var(--bg-page);
}

.menu__item.is-active {
    background: var(--bg-page);
    color: var(--primary);
    border-color: var(--line);
    font-weight: 700;
}

.menu__group {
    margin-top: 0.5rem;
}

.menu > .menu__group {
    margin-top: 0.55rem;
    padding-top: 0.55rem;
    border-top: 1px solid var(--line);
}

.menu__submenu > .menu__group {
    margin-top: 0.4rem;
    padding-top: 0.4rem;
    border-top: 1px dashed var(--line);
}

.menu__group summary {
    list-style: none;
    cursor: pointer;
    padding: 0.62rem 0.75rem;
    font-weight: 600;
    border-radius: 0.7rem;
    display: flex;
    align-items: center;
    gap: 0.55rem;
}

.menu__group summary:hover {
    background: var(--bg-page);
}

.menu__group summary::-webkit-details-marker {
    display: none;
}

.menu__submenu {
    margin-top: 0.3rem;
    margin-left: 0.35rem;
    padding-left: 0.55rem;
    border-left: 1px solid var(--line);
    display: grid;
    gap: 0.2rem;
}

.menu__icon {
    width: 1.2rem;
    min-width: 1.2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.92rem;
    line-height: 1;
}

.menu__text {
    flex: 1 1 auto;
    min-width: 0;
    white-space: normal;
    overflow-wrap: normal;
    line-height: 1.2;
}

.menu-favorites {
    margin-bottom: 0.35rem;
}

.menu-favorites:not([hidden]) {
    padding-bottom: 0.5rem;
    margin-bottom: 0.55rem;
    border-bottom: 1px solid var(--line);
}

.menu-favorites__list {
    display: grid;
    gap: 0.18rem;
}

.menu__label--favorites {
    margin-top: 0.2rem;
}

.menu__item--favorite {
    background: var(--panel-soft);
    border-color: #f4d4d4;
}

.menu-fav-toggle {
    margin-left: 0.35rem;
    flex: 0 0 1rem;
    width: 1rem;
    min-width: 1rem;
    text-align: center;
    font-size: 0.82rem;
    line-height: 1;
    color: var(--text);
    opacity: 0.92;
    cursor: pointer;
    user-select: none;
}

.menu-fav-toggle.is-active {
    color: var(--danger);
}

.sidebar-toggle {
    border: 1px solid var(--line);
    background: var(--panel);
    color: var(--text);
    border-radius: 0.62rem;
    width: 2.1rem;
    height: 2.1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
}

.sidebar-toggle--side {
    margin-left: auto;
}

.sidebar-toggle--topbar {
    display: none;
}

.sidebar-backdrop {
    display: none;
}

.app-shell-wrap.is-sidebar-collapsed .app-shell {
    grid-template-columns: 5.2rem 1fr;
}

.app-shell-wrap.is-sidebar-collapsed .sidebar {
    padding-inline: 0.45rem;
}

.app-shell-wrap.is-sidebar-collapsed .brand__text,
.app-shell-wrap.is-sidebar-collapsed .sidebar-session__meta,
.app-shell-wrap.is-sidebar-collapsed .menu__label,
.app-shell-wrap.is-sidebar-collapsed .menu__text,
.app-shell-wrap.is-sidebar-collapsed .menu-favorites {
    display: none;
}

.app-shell-wrap.is-sidebar-collapsed .sidebar-session {
    padding: 0.42rem;
    background: transparent;
    border-color: transparent;
    position: relative;
    justify-items: center;
    gap: 0;
}

.app-shell-wrap.is-sidebar-collapsed .sidebar-session__header {
    justify-content: center;
    gap: 0;
}

.app-shell-wrap.is-sidebar-collapsed .sidebar-session__avatar {
    width: 2.5rem;
    height: 2.5rem;
    flex: 0 0 2.5rem;
    font-size: 0.9rem;
}

.app-shell-wrap.is-sidebar-collapsed .sidebar-session__actions {
    position: fixed;
    z-index: 40;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0.3rem;
    min-width: 8.5rem;
    padding: 0.5rem;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 0.6rem;
    box-shadow: 0 12px 28px rgba(16, 28, 48, 0.16);
}

.app-shell-wrap.is-sidebar-collapsed .sidebar-session.is-open .sidebar-session__actions {
    display: flex;
}

.app-shell-wrap.is-sidebar-collapsed .sidebar-session__actions .btn.btn--tiny {
    flex: 0 0 auto;
    text-align: left;
    justify-content: flex-start;
    font-size: 0.78rem;
    padding: 0.36rem 0.6rem;
}

.app-shell-wrap.is-sidebar-collapsed .sidebar-session__actions .theme-toggle--session {
    flex: 0 0 auto;
    justify-content: flex-start;
    width: 100%;
    gap: 0.4rem;
    padding: 0.32rem 0.6rem;
}

.app-shell-wrap.is-sidebar-collapsed .sidebar-session__actions .theme-toggle--session::after {
    content: 'Tema';
    font-size: 0.78rem;
    font-weight: 600;
}

.app-shell-wrap.is-sidebar-collapsed .brand {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.4rem;
    padding-inline: 0.2rem;
}

.app-shell-wrap.is-sidebar-collapsed .brand__link {
    flex: 0 0 auto;
}

.app-shell-wrap.is-sidebar-collapsed .brand__logo {
    width: 2.6rem;
    height: 2.6rem;
    font-size: 0.82rem;
    border-radius: 0.5rem;
}

.brand__tooltip {
    display: none;
}

.app-shell-wrap.is-sidebar-collapsed .brand__link {
    position: relative;
}

.app-shell-wrap.is-sidebar-collapsed .brand__link .brand__tooltip {
    display: none;
    position: fixed;
    left: calc(5.2rem + 0.5rem);
    top: 0.7rem;
    z-index: 40;
    flex-direction: column;
    gap: 0.12rem;
    min-width: 11rem;
    padding: 0.5rem 0.7rem;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 0.6rem;
    box-shadow: 0 12px 28px rgba(16, 28, 48, 0.16);
    color: var(--text);
    font-size: 0.8rem;
    line-height: 1.25;
    pointer-events: none;
    white-space: nowrap;
}

.app-shell-wrap.is-sidebar-collapsed .brand__link .brand__tooltip strong {
    font-size: 0.85rem;
    font-weight: 600;
}

.app-shell-wrap.is-sidebar-collapsed .brand__link .brand__tooltip span {
    color: var(--text-muted, #7a8aa3);
    font-size: 0.75rem;
}

.app-shell-wrap.is-sidebar-collapsed .brand__link:hover .brand__tooltip,
.app-shell-wrap.is-sidebar-collapsed .brand__link:focus-visible .brand__tooltip {
    display: flex;
}

.app-shell-wrap.is-sidebar-collapsed .menu__item,
.app-shell-wrap.is-sidebar-collapsed .menu__group summary {
    justify-content: center;
    padding-inline: 0.45rem;
}

.app-shell-wrap.is-sidebar-collapsed .menu-fav-toggle {
    display: none;
}

.app-shell-wrap.is-sidebar-collapsed .menu__submenu {
    display: none;
}

.app-shell-wrap.is-sidebar-collapsed .menu__group.is-open > .menu__submenu {
    display: flex;
    flex-direction: column;
    position: fixed;
    z-index: 40;
    min-width: 12rem;
    padding: 0.45rem;
    gap: 0.14rem;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 0.6rem;
    box-shadow: 0 12px 28px rgba(16, 28, 48, 0.16);
}

.app-shell-wrap.is-sidebar-collapsed .menu__group.is-open > .menu__submenu .menu__item {
    justify-content: flex-start;
    padding: 0.38rem 0.55rem;
}

.app-shell-wrap.is-sidebar-collapsed .menu__group.is-open > .menu__submenu .menu__text {
    display: inline;
}

.app-shell-wrap.is-sidebar-collapsed .sidebar-toggle--side {
    margin-left: 0;
}

.workspace {
    display: grid;
    align-content: start;
    gap: 1rem;
    padding: 1rem 1.25rem 1.25rem;
    min-height: 0;
    min-width: 0;
    overflow-x: visible;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.workspace--single {
    max-width: 70rem;
    margin: 1.5rem auto;
    padding: 0 1rem;
}

.topbar,
.workspace__header {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 0.62rem 0.82rem;
    display: grid;
    gap: 0.52rem;
    min-width: 0;
}

.topbar h2,
.workspace__header h2 {
    font-size: 1.32rem;
    letter-spacing: -0.02em;
    min-width: 0;
    line-height: 1.08;
}

.topbar--dashboard-search {
    gap: 0.46rem;
}

.topbar--dashboard-search h2 {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
}

.topbar--compact-sale {
    padding: 0.65rem 1rem;
    gap: 0.45rem;
    flex-wrap: nowrap;
    align-items: center;
}

.topbar--compact-sale h2 {
    flex: 1 1 auto;
}

.topbar--compact-sale .topbar__tools {
    flex: 0 0 auto;
    margin-left: auto;
}

.workspace__kicker {
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.74rem;
    font-weight: 700;
}

.topbar__utility-row,
.topbar__page-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.55rem;
    min-width: 0;
}

.topbar__utility-row {
    width: 100%;
}

.topbar__page-row {
    min-height: 2rem;
}

.topbar__page-title {
    display: flex;
    align-items: center;
    gap: 0.48rem;
    min-width: 0;
    flex: 1 1 auto;
}

.topbar__tools,
.workspace__actions {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    flex-wrap: wrap;
    min-width: 0;
    justify-content: flex-end;
    flex: 0 0 auto;
    margin-left: auto;
}

body.dashboard-search-open {
    overflow: hidden;
}

.topbar__smartbar {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(21rem, 1.1fr);
    align-items: stretch;
    gap: 0.62rem;
    width: 100%;
}

.topbar__actions-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.55rem;
    width: auto;
    min-width: 0;
}

.topbar__actions-row > form,
.consultation-saved-actions > form {
    display: inline-flex;
    margin: 0;
}

.topbar__actions-row .btn {
    padding: 0.52rem 0.82rem;
    font-size: 0.92rem;
    border-radius: 0.82rem;
}

.topbar__livebar {
    /* Positioning context for both pills' dropdowns (see .topbar-live). */
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0.4rem;
    min-width: 0;
}

.topbar-live {
    /* Static on purpose: each pill is only half the livebar wide, so a panel
       anchored to its own pill (right: 0) ran ~180px off the left edge of the
       screen on phones and tablets. Dropdowns anchor to .topbar__livebar
       instead — Notificari opens from its left edge, WhatsApp from its right —
       and are capped at its width, so they always stay on screen. */
    position: static;
    min-width: 0;
}

.topbar-live-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
    min-height: 2.4rem;
    padding: 0.32rem 0.55rem;
    border-radius: 0.72rem;
    border: 1px solid var(--line);
    background: linear-gradient(180deg, var(--panel) 0%, var(--panel-soft) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.topbar-live-card__body {
    display: grid;
    gap: 0.08rem;
    min-width: 0;
}

.topbar-live-card__title {
    font-size: 0.76rem;
    color: var(--text);
    line-height: 1.12;
}

.topbar-live-card__summary {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.66rem;
    color: var(--text-secondary);
    line-height: 1.2;
}

.topbar-live-card--interactive {
    width: 100%;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.topbar-live-card--interactive:hover,
.topbar-live-card--interactive.is-open {
    border-color: var(--info-line);
    box-shadow: 0 10px 24px rgba(42, 77, 135, 0.08);
    transform: translateY(-1px);
}

.topbar-live-card__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.35rem;
    height: 1.35rem;
    padding: 0 0.3rem;
    border-radius: 999px;
    background: var(--surface-soft);
    color: var(--link);
    font-size: 0.68rem;
    font-weight: 700;
}

.topbar-live-card__badge.is-empty {
    background: var(--bg-page);
    color: var(--text-secondary);
}

.topbar-live-card--neutral {
    border-color: var(--line);
    background: linear-gradient(180deg, var(--panel) 0%, var(--panel-soft) 100%);
}

.topbar-live-card--info {
    border-color: var(--info-line);
    background: linear-gradient(180deg, var(--panel) 0%, var(--bg-page) 100%);
}

.topbar-live-card--success {
    border-color: #b9e0c7;
    background: linear-gradient(180deg, var(--panel) 0%, var(--panel-soft) 100%);
}

.topbar-live-card--warning {
    border-color: var(--warning-line);
    background: linear-gradient(180deg, var(--panel) 0%, var(--warning-bg) 100%);
}

.topbar-live-card--danger {
    border-color: var(--danger-line);
    background: linear-gradient(180deg, var(--panel) 0%, var(--bg-page) 100%);
}

.topbar-live-card__badge--neutral,
.topbar-live-card__badge.is-empty {
    background: var(--bg-page);
    color: var(--text-secondary);
}

.topbar-live-card__badge--info {
    background: var(--surface-soft);
    color: var(--link);
}

.topbar-live-card__badge--success {
    background: var(--bg-page);
    color: var(--success-text);
}

.topbar-live-card__badge--warning {
    background: var(--warning-bg);
    color: var(--warning-text);
}

.topbar-live-card__badge--danger {
    background: var(--danger-bg);
    color: var(--danger-text);
}

/* --- Topbar WhatsApp indicator --- */
.topbar-live--whatsapp .topbar-live-card {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0.4rem;
}
.topbar-live-card__glyph svg { width: 16px; height: 16px; }
.topbar-live-card--whatsapp {
    border-color: var(--success-line);
    background: linear-gradient(180deg, var(--panel) 0%, var(--panel-soft) 100%);
}
.topbar-live-card--whatsapp.topbar-live-card--has-unread { border-color: #25d366; }
.topbar-live-card__glyph {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--success);
    flex: 0 0 auto;
}
.topbar-live-card--whatsapp .topbar-live-card__badge:not(.is-empty) {
    background: #25d366;
    color: var(--text-on-solid);
}
.wa-topbar-list { display: flex; flex-direction: column; }
.wa-topbar-item {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: "name time" "preview preview";
    gap: 0.1rem 0.5rem;
    padding: 0.5rem 0.65rem;
    border-radius: 0.5rem;
    text-decoration: none;
}
.wa-topbar-item:hover { background: var(--panel-soft); }
.wa-topbar-item__name { grid-area: name; font-weight: 600; font-size: 0.82rem; color: var(--text); }
.wa-topbar-item__time { grid-area: time; font-size: 0.72rem; color: var(--muted); }
.wa-topbar-item__preview {
    grid-area: preview;
    font-size: 0.78rem;
    color: var(--muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.wa-topbar-empty { margin: 0; padding: 0.75rem 0.65rem; font-size: 0.82rem; color: var(--muted); }
.wa-topbar-footer {
    display: block;
    padding: 0.55rem 0.65rem;
    margin-top: 0.25rem;
    border-top: 1px solid var(--line);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--success);
    text-decoration: none;
    text-align: center;
}
.wa-topbar-footer:hover { background: var(--panel-soft); }

/* --- Unread WhatsApp badge on appointment calendar cards --- */
.appointment-card__wa {
    position: absolute;
    top: 3px;
    right: 3px;
    width: 16px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #25d366;
    color: var(--text-on-solid);
    font-size: 9px;
    line-height: 1;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85);
    pointer-events: none;
}

/* Inline WhatsApp glyph for week-agenda + month event renderers. */
.appointments-agenda-card__wa,
.appointments-month-day__wa {
    display: inline-flex;
    align-items: center;
    margin-left: 0.25rem;
    color: var(--success);
    vertical-align: middle;
    flex: 0 0 auto;
}

/* --- Unread WhatsApp badge on appointment list rows --- */
.wa-row-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.05rem 0.4rem;
    border-radius: 999px;
    background: var(--bg-page);
    color: var(--success);
    font-size: 0.68rem;
    font-weight: 700;
    vertical-align: middle;
}

.topbar-live-card--placeholder {
    border-style: dashed;
    background:
        radial-gradient(circle at top right, rgba(44, 109, 245, 0.08), transparent 44%),
        linear-gradient(180deg, var(--panel) 0%, var(--panel-soft) 100%);
}

.topbar-live-dropdown {
    position: absolute;
    top: calc(100% + 0.38rem);
    left: 0;
    right: auto;
    width: min(30rem, 100%);
    max-height: min(70vh, 30rem);
    overflow-y: auto;
    padding: 0.72rem;
    border-radius: 1rem;
    border: 1px solid var(--line);
    background: var(--panel);
    box-shadow: 0 20px 48px rgba(18, 35, 61, 0.18);
    z-index: 52;
}

.topbar-live--whatsapp .topbar-live-dropdown {
    left: auto;
    right: 0;
}

.topbar-live-dropdown__head,
.topbar-live-dropdown__section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.55rem;
}

.topbar-live-dropdown__head {
    margin-bottom: 0.65rem;
}

.topbar-live-dropdown__head strong {
    font-size: 0.9rem;
    color: var(--text);
}

.topbar-live-dropdown__head span {
    font-size: 0.72rem;
    color: var(--text-secondary);
}

.topbar-live-dropdown__section + .topbar-live-dropdown__section {
    margin-top: 0.72rem;
    padding-top: 0.72rem;
    border-top: 1px solid var(--line-soft);
}

.topbar-live-dropdown__section-head {
    margin-bottom: 0.45rem;
}

.topbar-live-dropdown__section-head strong {
    font-size: 0.77rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.topbar-live-dropdown__section-head span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.45rem;
    height: 1.45rem;
    padding: 0 0.32rem;
    border-radius: 999px;
    background: var(--bg-page);
    color: var(--link);
    font-size: 0.68rem;
    font-weight: 700;
}

.topbar-live-dropdown__list {
    display: grid;
    gap: 0.45rem;
}

.topbar-live-dropdown__state {
    display: grid;
    gap: 0.28rem;
}

.topbar-live-dropdown__state strong {
    font-size: 0.88rem;
    color: var(--text);
}

.topbar-live-dropdown__state span {
    font-size: 0.74rem;
    color: var(--text-secondary);
}

.topbar-live-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.55rem;
    align-items: center;
    padding: 0.58rem 0.62rem;
    border-radius: 0.86rem;
    border: 1px solid var(--line);
    background: linear-gradient(180deg, var(--panel) 0%, var(--panel-soft) 100%);
    border-left-width: 4px;
    border-left-color: var(--primary);
}

.topbar-live-item--appointment {
    border-left-color: var(--primary);
}

.topbar-live-item--reminder {
    border-left-color: var(--accent);
}

.topbar-live-item--expiring-product {
    border-left-color: var(--accent-strong);
}

.topbar-live-item--expired-product {
    border-left-color: var(--danger);
}

.topbar-live-item--plan-limit {
    border-left-color: var(--status-rescheduled);
}

.topbar-live-item--supplier-invoice-overdue {
    border-left-color: var(--danger);
}

.topbar-live-item--supplier-invoice-overdue .topbar-live-item__title-row em {
    background: var(--surface-soft);
    color: var(--danger-text);
}

.topbar-live-item__body {
    display: grid;
    gap: 0.14rem;
    min-width: 0;
}

.topbar-live-item__title-row {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 0.45rem;
}

.topbar-live-item__title-row strong {
    font-size: 0.82rem;
    color: var(--text);
    line-height: 1.2;
}

.topbar-live-item__title-row em {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.14rem 0.38rem;
    border-radius: 999px;
    background: var(--surface-soft);
    color: var(--link);
    font-size: 0.64rem;
    font-style: normal;
    font-weight: 700;
    white-space: nowrap;
}

.topbar-live-item--expired-product .topbar-live-item__title-row em {
    background: var(--surface-soft);
    color: var(--danger-text);
}

.topbar-live-item--expiring-product .topbar-live-item__title-row em {
    background: var(--warning-bg);
    color: var(--warning-text);
}

.topbar-live-item__kind {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    width: fit-content;
    padding: 0.14rem 0.42rem;
    border-radius: 999px;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.topbar-live-item__kind--appointment {
    background: var(--surface-soft);
    color: var(--primary-strong);
}

.topbar-live-item__kind--reminder {
    background: var(--warning-bg);
    color: var(--warning-text);
}

.topbar-live-item__kind--expiring-product {
    background: var(--warning-bg);
    color: var(--warning-text);
}

.topbar-live-item__kind--expired-product {
    background: var(--surface-soft);
    color: var(--danger-text);
}

.topbar-live-item__body small {
    font-size: 0.73rem;
    color: var(--text-secondary);
    line-height: 1.28;
}

.topbar-live-item__body span {
    font-size: 0.7rem;
    color: #73839b;
    line-height: 1.25;
}

.topbar-live-item__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.38rem;
}

.topbar-live-item__actions .btn {
    padding: 0.4rem 0.62rem;
    font-size: 0.76rem;
}

.topbar-live-item__dismiss {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--muted);
    font-size: 1rem;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    flex: 0 0 auto;
}

.topbar-live-item__dismiss:hover {
    background: var(--danger-bg);
    color: var(--danger);
}

.topbar__tools > .btn,
.workspace__actions > .btn {
    min-width: 0;
    max-width: 100%;
    white-space: nowrap;
}

.form-actions {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    flex-wrap: wrap;
    min-width: 0;
    justify-content: flex-end;
}

.app-notifications-settings .app-notification-options {
    display: grid;
    gap: 0.62rem;
}

.app-notification-option {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 0.65rem;
    padding: 0.72rem 0.82rem;
    border-radius: 0.86rem;
    border: 1px solid var(--line);
    background: var(--panel-soft);
    cursor: pointer;
}

.app-notification-option:hover {
    border-color: var(--info-line);
    background: var(--panel-soft);
}

.app-notification-option__checkbox {
    margin-top: 0.12rem;
}

.app-notification-option__body {
    display: grid;
    gap: 0.22rem;
}

.app-notification-option__body strong {
    font-size: 0.9rem;
    color: var(--text);
}

.app-notification-option__body small {
    color: var(--text-secondary);
    font-size: 0.8rem;
    line-height: 1.35;
}

.app-notification-option--stacked {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.7rem;
}

.app-notification-option__toggle {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 0.65rem;
    cursor: pointer;
}

.app-notification-option__subfield {
    display: grid;
    grid-template-columns: minmax(10rem, auto) minmax(0, 1fr);
    align-items: center;
    gap: 0.65rem;
    padding-left: 1.55rem;
}

.app-notification-option__subfield-label {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-secondary);
}

.app-notification-option__subfield-control {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.app-notification-option__days {
    width: 6.4rem;
}

.app-notification-option__subfield-control small {
    color: var(--text-secondary);
    font-size: 0.76rem;
}

@media (max-width: 700px) {
    .app-notification-option__subfield {
        grid-template-columns: minmax(0, 1fr);
        padding-left: 0;
    }
}

.form-actions > form {
    margin: 0;
    display: inline-flex;
}

.consultation-saved-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    align-items: center;
}

.consult-form-feedback {
    margin-bottom: 0.85rem;
    position: sticky;
    top: 0.5rem;
    z-index: 5;
    box-shadow: 0 4px 14px rgba(20, 32, 60, 0.08);
}

.consult-form-feedback[hidden] {
    display: none;
}

.consult-form-feedback ul {
    margin: 0.45rem 0 0;
    padding-left: 1.1rem;
}

/* --- Failed-save banner -------------------------------------------------
   A failed consultation save used to render one flat line ("Formularul are
   erori."). It now lists every field that needs work, grouped by the wizard
   step it lives on, each row a button that jumps straight to that field. */

.consult-error-headline {
    margin: 0;
    font-weight: 600;
}

.consult-form-feedback ul.consult-error-groups {
    list-style: none;
    margin: 0.55rem 0 0;
    padding: 0;
    display: grid;
    gap: 0.55rem;
}

.consult-error-group__step {
    margin: 0 0 0.25rem;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    opacity: 0.75;
}

.consult-form-feedback ul.consult-error-group__items {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.3rem;
}

.consult-error-item {
    font-size: 0.85rem;
    line-height: 1.35;
}

.consult-error-item strong {
    font-weight: 600;
}

.consult-error-item strong::after {
    content: ' — ';
    font-weight: 400;
    opacity: 0.6;
}

.consult-error-item__jump {
    display: block;
    width: 100%;
    text-align: left;
    padding: 0.3rem 0.45rem;
    border: 1px solid transparent;
    border-left: 2.5px solid currentColor;
    border-radius: 4px;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 0.85rem;
    line-height: 1.35;
    cursor: pointer;
    transition: background 100ms ease-out, border-color 100ms ease-out;
}

.consult-error-item__jump:hover,
.consult-error-item__jump:focus-visible {
    background: rgba(196, 70, 58, 0.09);
    border-color: rgba(196, 70, 58, 0.35);
    border-left-color: currentColor;
}

/* --- Inline field errors ------------------------------------------------
   Painted onto the offending input by consultation_form_controller.js so the
   message sits where the mistake is, not only in the banner up top. */

/* The base input rule is highly specific (`input:not(...):not(...)`), so the
   error state has to shout to win. Radios/checkboxes get an outline instead —
   a border on a 16px dot just looks broken. */
input.field-invalid:not([type='checkbox']):not([type='radio']),
select.field-invalid,
textarea.field-invalid,
.field-invalid + .ts-wrapper .ts-control,
input.field-invalid + input.flatpickr-alt-input {
    border-color: var(--danger) !important;
    box-shadow: 0 0 0 3px rgba(196, 70, 58, 0.12);
}

input.field-invalid[type='checkbox'],
input.field-invalid[type='radio'] {
    outline: 2px solid var(--danger);
    outline-offset: 2px;
}

.field-invalid__message {
    margin: 0.25rem 0 0;
    font-size: 0.71875rem;
    font-weight: 500;
    line-height: 1.35;
    color: var(--danger);
}

.checkbox-inline {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    font-size: 0.92rem;
    color: var(--text);
}

.checkbox-inline input[type="checkbox"] {
    margin-top: 0.2rem;
}

.form-error {
    color: var(--danger-text);
    font-weight: 600;
}

.form-errors {
    list-style: none;
    margin: 0.4rem 0 0;
    padding: 0.5rem 0.7rem;
    border: 1px solid var(--line);
    border-left: 3px solid var(--danger);
    border-radius: 0.4rem;
    background: var(--danger-bg);
    color: var(--danger);
    font-size: 0.875rem;
    font-weight: 500;
}

.form-errors li + li {
    margin-top: 0.2rem;
}

.session-corner {
    position: absolute;
    top: 0.22rem;
    right: 0.22rem;
    z-index: 30;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    max-width: min(48vw, 28rem);
    padding: 0.26rem 0.34rem;
    border: 1px solid var(--line);
    background: var(--surface-soft);
    border-radius: 0.52rem;
}

.session-corner__meta {
    display: grid;
    min-width: 0;
}

.session-corner__meta strong,
.session-corner__meta span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.session-corner__meta strong {
    font-size: 0.72rem;
    color: var(--text);
}

.session-corner__meta span {
    font-size: 0.66rem;
    color: var(--text-secondary);
}

.btn--tiny {
    padding: 0.22rem 0.42rem;
    font-size: 0.7rem;
    border-radius: 0.52rem;
    line-height: 1.05;
}

.searchbox {
    position: relative;
}

.searchbox span {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.searchbox input {
    min-width: 16rem;
    border-radius: 0.65rem;
    width: 100%;
}

.topbar__tools .searchbox {
    flex: 1 1 16rem;
    min-width: 11rem;
}

.dashboard-search {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
}

.dashboard-search .searchbox {
    width: 100%;
}

.dashboard-search__panel {
    position: relative;
    width: 100%;
    min-width: 0;
}

.dashboard-search__box {
    display: block;
}

.dashboard-search__box input {
    min-height: 2.65rem;
    padding: 0.72rem 5.1rem 0.72rem 0.88rem;
    border-radius: 0.86rem;
    border: 1px solid var(--line);
    background: linear-gradient(180deg, var(--panel) 0%, var(--panel-soft) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
    font-size: 0.95rem;
}

.dashboard-search__box input:focus {
    border-color: var(--primary-line);
    box-shadow: 0 0 0 4px rgba(44, 109, 245, 0.14);
    outline: 0;
}

.dashboard-search__shortcut {
    position: absolute;
    right: 0.72rem;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 3rem;
    height: 1.7rem;
    padding: 0 0.48rem;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--panel-soft);
    color: var(--text-secondary);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    pointer-events: none;
}

.dashboard-search__backdrop {
    position: fixed;
    inset: 0;
    background: rgba(12, 22, 39, 0.26);
    backdrop-filter: blur(4px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease;
    z-index: 70;
}

.dashboard-search.is-open .dashboard-search__backdrop {
    opacity: 1;
    pointer-events: auto;
}

.dashboard-search.is-open .dashboard-search__panel {
    position: fixed;
    top: 0.95rem;
    left: 50%;
    transform: translateX(-50%);
    width: min(72rem, calc(100vw - 1.5rem));
    z-index: 71;
}

.dashboard-search.is-open .dashboard-search__box input {
    min-height: 3.2rem;
    padding-left: 1rem;
    padding-right: 5.4rem;
    font-size: 1rem;
    border-color: var(--info-line);
    box-shadow: 0 18px 50px rgba(18, 35, 61, 0.22);
}

.dashboard-search__results {
    position: absolute;
    top: calc(100% + 0.45rem);
    left: 0;
    right: 0;
    z-index: 45;
    max-height: min(72vh, 38rem);
    overflow-y: auto;
    border: 1px solid var(--line);
    border-radius: 1rem;
    background: var(--panel);
    box-shadow: 0 18px 42px rgba(20, 37, 65, 0.18);
    padding: 0.75rem;
}

.dashboard-search__results-head {
    display: grid;
    gap: 0.2rem;
    margin-bottom: 0.75rem;
}

.dashboard-search__results-head strong {
    font-size: 0.96rem;
    color: var(--text);
}

.dashboard-search__results-head span {
    font-size: 0.78rem;
    color: var(--text-secondary);
}

.dashboard-search__results-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.dashboard-search__section {
    min-width: 0;
    padding: 0.2rem;
    border-radius: 0.9rem;
    border: 1px solid var(--line-soft);
    background: var(--panel);
}

.dashboard-search__section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.42rem;
    padding: 0 0.2rem;
}

.dashboard-search__section h4 {
    margin: 0 0 0.32rem;
    font-size: 0.78rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.dashboard-search__section-head span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.65rem;
    height: 1.65rem;
    padding: 0 0.35rem;
    border-radius: 999px;
    background: var(--bg-page);
    color: var(--link);
    font-size: 0.7rem;
    font-weight: 700;
}

.dashboard-search__list {
    display: grid;
    gap: 0.3rem;
}

.dashboard-search__entry {
    position: relative;
}

.dashboard-search__item {
    display: grid;
    gap: 0.1rem;
    text-decoration: none;
    border: 1px solid var(--line);
    border-radius: 0.78rem;
    padding: 0.52rem 0.62rem;
    padding-right: 0.62rem;
    padding-bottom: 0.72rem;
    background: var(--panel);
    color: var(--text);
    transition: border-color 0.16s ease, background 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
}

.dashboard-search__item--with-actions {
    padding-right: 5.05rem;
    padding-bottom: 2.25rem;
}

.dashboard-search__item:hover,
.dashboard-search__item.is-active {
    border-color: var(--info-line);
    background: var(--panel-soft);
    transform: translateY(-1px);
    box-shadow: 0 12px 24px rgba(44, 109, 245, 0.1);
}

.dashboard-search__item-head {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 0.45rem;
}

.dashboard-search__item em {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.15rem 0.42rem;
    border-radius: 999px;
    background: var(--bg-page);
    color: var(--link);
    font-size: 0.66rem;
    font-style: normal;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.dashboard-search__item strong {
    font-size: 0.84rem;
    line-height: 1.2;
}

.dashboard-search__item small {
    color: var(--text-secondary);
    font-size: 0.73rem;
    line-height: 1.3;
}

.dashboard-search__meta {
    color: var(--text-secondary);
    font-size: 0.72rem;
    font-weight: 600;
}

.dashboard-search__meta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
}

.dashboard-search__item .dashboard-search__status {
    display: inline-flex;
    align-items: center;
    padding: 0.12rem 0.5rem;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1.3;
    background: rgba(148, 163, 184, 0.18);
    color: var(--text-secondary);
}
.dashboard-search__item .dashboard-search__status--planned { background: rgba(44, 109, 245, 0.14); color: var(--primary-strong); }
.dashboard-search__item .dashboard-search__status--confirmed { background: rgba(14, 165, 233, 0.14); color: var(--info); }
.dashboard-search__item .dashboard-search__status--done { background: rgba(34, 197, 94, 0.14); color: var(--success-text); }
.dashboard-search__item .dashboard-search__status--cancelled { background: rgba(148, 163, 184, 0.18); color: var(--text-secondary); }
.dashboard-search__item .dashboard-search__status--no_show { background: rgba(239, 68, 68, 0.14); color: var(--danger-text); }
.dashboard-search__item .dashboard-search__status--rescheduled { background: rgba(124, 58, 237, 0.14); color: #6d28d9; }

.dashboard-search__item span {
    color: var(--link);
    font-size: 0.67rem;
    font-weight: 700;
}

.dashboard-search__floating-actions {
    position: absolute;
    right: 0.78rem;
    bottom: 0.54rem;
    z-index: 3;
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    gap: 0;
}

.dashboard-search__action-row {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.28rem;
    flex-wrap: wrap;
}

.dashboard-search__corner-badge {
    position: absolute;
    top: 0.52rem;
    right: 0.78rem;
    z-index: 3;
    pointer-events: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.15rem 0.42rem;
    border-radius: 999px;
    background: var(--bg-page);
    color: var(--link);
    font-size: 0.66rem;
    font-style: normal;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.dashboard-search__action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 1.4rem;
    width: auto;
    max-width: 7.5rem;
    padding: 0.1rem 0.48rem;
    border-radius: 999px;
    background: var(--primary-solid);
    color: var(--text-on-solid);
    font-size: 0.6rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    text-align: center;
    text-decoration: none;
    transition: background 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
}

.dashboard-search__action-btn:hover {
    background: var(--primary-strong);
    transform: translateY(-1px);
    box-shadow: 0 10px 18px rgba(47, 108, 246, 0.2);
}

.dashboard-search__action-btn--secondary {
    background: var(--bg-page);
    color: var(--link);
}

.dashboard-search__action-btn--secondary:hover {
    background: var(--line);
    box-shadow: 0 10px 18px rgba(41, 88, 173, 0.18);
}

@media (max-width: 860px) {
    .dashboard-search__item {
        padding-right: 0.68rem;
        padding-bottom: 0.72rem;
    }

    .dashboard-search__item--with-actions {
        padding-right: 0.68rem;
        padding-bottom: 4.45rem;
    }

    .dashboard-search__floating-actions {
        right: 0.68rem;
        bottom: 0.62rem;
    }
}

.dashboard-search__state {
    display: grid;
    gap: 0.35rem;
    padding: 0.35rem;
}

.dashboard-search__state strong {
    font-size: 0.94rem;
    color: var(--text);
}

.dashboard-search__state span {
    font-size: 0.79rem;
    color: var(--text-secondary);
}

.dashboard-search__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.2rem;
}

.dashboard-search__chips span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 1.9rem;
    padding: 0 0.72rem;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--panel-soft);
    color: var(--text-secondary);
    font-size: 0.74rem;
    font-weight: 700;
}

.panel,
.card,
.data-entry {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 1rem;
    min-width: 0;
}

.panel--focus {
    background: linear-gradient(180deg, var(--panel) 0%, var(--panel-soft) 100%);
}

.panel--soft {
    background: var(--panel-soft);
}

.muted,
.panel p,
.card p,
.card li,
.hint {
    color: var(--muted);
}

.welcome-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
}

.welcome-row h3 {
    font-size: 1.35rem;
}

.kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
}

.kpi-card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: 0.9rem;
}

.kpi-card p {
    color: var(--muted);
    font-size: 0.88rem;
}

.kpi-card h4,
.kpi-card .kpi-card__value {
    display: block;
    margin-top: 0.45rem;
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.15;
    /* `text-wrap: balance` keeps short values like '0.00 RON' on one line
       at narrow widths; falls back gracefully on older browsers. */
    text-wrap: balance;
}

/* One-line explanation under a KPI value — spells out what the number
   actually means (which quantities it includes, what it is NOT) so the
   cards are self-documenting. Used on the per-product stock fisa. */
.kpi-card__note {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.76rem;
    line-height: 1.35;
}

.kpi-card__trend {
    margin-top: 0.4rem;
    display: inline-block;
    padding: 0.2rem 0.45rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
}

.kpi-card__trend.up {
    color: var(--success);
    background: var(--panel-soft);
}

.kpi-card__trend.down {
    color: var(--danger);
    background: var(--bg-page);
}

.board-grid {
    display: grid;
    grid-template-columns: 2.1fr 1fr;
    gap: 0.75rem;
}

.panel__head {
    margin-bottom: 0.7rem;
}

.facturare-spv-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.facturare-spv-card__meta {
    display: grid;
    gap: 0.35rem;
    flex: 1 1 22rem;
    min-width: 0;
}

.facturare-spv-card__meta h4,
.facturare-spv-card__meta p {
    margin: 0;
}

.facturare-spv-card__actions {
    flex: 0 1 auto;
    align-items: flex-end;
}

.facturare-spv-card__actions label {
    display: grid;
    gap: 0.35rem;
}

/* Bulk-download bar above the received-invoices grid: selection counter on
   the left, the PDF / XML action buttons on the right. */
.facturare-bulk-actions__count {
    margin-right: auto;
}

.table-wrap {
    overflow-x: auto;
}

/* Stupefiante/psihotrope register — CMVRO Anexa nr. 9. Dense 10-column legal
   ledger, so slightly tighter cells and right-aligned tabular quantity columns. */
.ledger-ident {
    font-size: 0.82rem;
    padding: 0.15rem 0 0.35rem;
}
.ledger-table th,
.ledger-table td {
    font-size: 0.8rem;
    vertical-align: top;
}
.ledger-table th.num,
.ledger-table td.num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Consultation register — three official CMVRO variants selected via tabs. */
.reg-variant-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    border-bottom: 1px solid var(--line);
}
.reg-variant-tab {
    padding: 0.4rem 0.8rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--muted);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}
.reg-variant-tab:hover {
    color: var(--text);
}
.reg-variant-tab.is-active {
    color: var(--primary);
    border-bottom-color: var(--primary);
}
.reg-consult-table th,
.reg-consult-table td {
    font-size: 0.78rem;
    vertical-align: top;
}

.report-bar-card {
    display: grid;
    gap: 0.5rem;
    padding: 0.85rem 1rem;
    border: 1px solid var(--line);
    border-radius: 0.9rem;
    background: linear-gradient(180deg, var(--panel) 0%, var(--panel-soft) 100%);
}

.report-bar-card__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.report-bar {
    height: 0.8rem;
    border-radius: 999px;
    background: var(--surface-soft);
    overflow: hidden;
}

.report-bar__fill {
    display: block;
    height: 100%;
    min-width: 0.4rem;
    border-radius: inherit;
    background: linear-gradient(90deg, #4b88ff 0%, #2459c6 100%);
}

.chart-placeholder {
    width: 100%;
    height: 14rem;
    border-radius: 0.8rem;
    border: 1px dashed #d7dfec;
    background:
        linear-gradient(to bottom, transparent 24%, #eef3fb 25%, transparent 26%) 0 0 / 100% 2.6rem,
        linear-gradient(120deg, rgba(44, 109, 245, 0.15), rgba(44, 109, 245, 0.02));
    position: relative;
}

.chart-placeholder::after {
    content: "";
    position: absolute;
    inset: 28% 8% 20% 8%;
    border-radius: 999px;
    border: 3px solid transparent;
    border-top-color: #4a86ff;
    border-left-color: #4a86ff;
    transform: skewX(-28deg) rotate(-7deg);
}

.donut-placeholder {
    width: 9rem;
    height: 9rem;
    margin: 0.7rem auto;
    border-radius: 50%;
    background:
        radial-gradient(circle at center, var(--panel) 48%, transparent 50%),
        conic-gradient(var(--primary) 0 56%, #6ad1f2 56% 74%, var(--accent) 74% 89%, var(--text) 89% 100%);
}

.dashboard-tools {
    margin-top: 0.75rem;
}

.widget-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    margin-top: 0.7rem;
}

.quick-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
    margin-top: 0.75rem;
}

.card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.55rem;
    flex-wrap: wrap;
}

.calendar-legend {
    margin-left: auto;
}

.compact-list {
    margin-top: 0.65rem;
    padding-left: 1rem;
}

.empty-state {
    grid-column: 1 / -1;
    border: 1px dashed var(--line);
    background: var(--panel-soft);
    border-radius: var(--radius-md);
    padding: 0.8rem;
    font-weight: 600;
    color: var(--info-text);
}

/* Table empty state (lives inside <td colspan>). Replaces the cold
   one-line "Nu exista..." pattern with a centered block: cash-register
   icon, warm message, hint, and a primary CTA. Matches DESIGN.md's "vet
   treatment room" mood — utilitarian but not cold. */
.table-empty-row td {
    padding: 2.5rem 1rem;
    text-align: center;
}

.table-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    max-width: 32rem;
    margin: 0 auto;
}

.table-empty-state__icon {
    color: var(--muted);
    margin-bottom: 0.25rem;
}

.table-empty-state__title {
    margin: 0;
    font-weight: 600;
    color: var(--text);
    font-size: 1rem;
}

.table-empty-state__hint {
    margin: 0;
    color: var(--muted);
    font-size: 0.85rem;
    line-height: 1.5;
}

.table-empty-state .btn {
    margin-top: 0.4rem;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    margin-top: 0.9rem;
}

.form-grid__span-2 {
    grid-column: span 2;
}

.form-grid--soap {
    grid-template-columns: 1fr;
}

.consult-step-card--clinical > .form-grid > label,
.consult-step-card--clinical .consult-objective-block > label {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text);
}

.form-grid--objective {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 0;
}

.consult-objective-block {
    display: grid;
    gap: 0.55rem;
}

.consult-objective-card {
    display: grid;
    gap: 0.75rem;
    padding: 0.75rem;
    border: 1px solid var(--line-soft, #EDF0F4);
    border-radius: 6px;
    background: var(--bg-shell, #F7F8FA);
}

.consult-objective-vitals {
    margin-top: 0.15rem;
}

.form-panel section + section {
    margin-top: 1rem;
}

.form-panel {
    background: linear-gradient(180deg, var(--panel) 0%, var(--panel-soft) 100%);
}

.consult-form {
    background: linear-gradient(180deg, var(--panel) 0%, var(--panel-soft) 100%);
    border-color: var(--line);
}

.consult-form > section {
    border: 1px solid var(--line);
    border-radius: 0.9rem;
    background: linear-gradient(180deg, var(--panel) 0%, var(--panel-soft) 100%);
    padding: 0.95rem;
}

.consult-form > section h3 {
    font-size: 1.18rem;
    color: var(--text);
    margin-bottom: 0.18rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
}

.consult-form > section .form-intro {
    color: var(--text-secondary);
    font-size: 0.93rem;
    margin-top: 0;
}

.consult-intake {
    display: grid;
    gap: 1rem;
}

.consult-intake__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
}

.consult-intake__eyebrow {
    margin: 0 0 0.2rem;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--primary);
}

.consult-intake__badge {
    border: 1px solid var(--line);
    background: linear-gradient(180deg, var(--panel-soft) 0%, var(--bg-page) 100%);
    color: #23426f;
    border-radius: 999px;
    padding: 0.5rem 0.8rem;
    font-size: 0.82rem;
    font-weight: 700;
    white-space: nowrap;
}

.consult-intake__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(20rem, 0.95fr);
    gap: 1rem;
    align-items: start;
}

.consult-intake__main {
    display: grid;
    gap: 1rem;
}

.consult-intake__side {
    display: grid;
    gap: 1rem;
}

.consult-intake-card {
    border: 1px solid var(--line);
    border-radius: 1rem;
    background: linear-gradient(180deg, var(--panel) 0%, var(--panel-soft) 100%);
    box-shadow: 0 14px 28px rgba(25, 47, 82, 0.05);
    padding: 1rem;
    display: grid;
    gap: 0.85rem;
}

.consult-intake-card--accent {
    background: linear-gradient(180deg, var(--panel) 0%, var(--panel-soft) 100%);
    border-color: var(--line);
}

.consult-intake-card__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.75rem;
}

.consult-intake-card__head h4 {
    margin: 0;
    color: var(--text);
}

.consult-intake-card__head p {
    margin: 0.18rem 0 0;
    color: var(--text-secondary);
    font-size: 0.92rem;
}

.consult-intake-card__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
}

.consult-intake-card__grid--narrow {
    grid-template-columns: minmax(0, 12rem);
}

.consult-mode-toggle {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.consult-mode-toggle--boolean {
    margin-top: 0.15rem;
}

.consult-mode-toggle__option {
    position: relative;
    cursor: pointer;
}

.consult-mode-toggle__option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.consult-mode-toggle__option span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    padding: 0.3rem 0.65rem;
    border-radius: 5px;
    border: 1px solid var(--line);
    background: var(--panel);
    color: var(--text-secondary, #4A5568);
    font-size: 0.88rem;
    font-weight: 600;
    line-height: 1.3;
    transition: border-color 0.1s ease, background-color 0.1s ease, color 0.1s ease;
}

.consult-mode-toggle__option input:checked + span {
    border-color: var(--primary);
    border-left: 2.5px solid var(--primary);
    background: var(--primary-ghost, rgba(41, 104, 224, 0.08));
    color: var(--primary);
    box-shadow: none;
}

.consult-mode-toggle--boolean .consult-mode-toggle__option span {
    min-width: 4.25rem;
    padding-inline: 1rem;
}

.consult-mode-toggle--multi {
    gap: 0.45rem;
    margin-top: 0.2rem;
}

.consult-mode-toggle--multi .consult-mode-toggle__option span {
    min-height: 0;
    padding: 0.25rem 0.6rem;
    font-size: 0.84rem;
    font-weight: 600;
    line-height: 1.3;
}

.consult-mode-toggle--score {
    gap: 0.35rem;
    margin-top: 0.2rem;
}

.consult-mode-toggle--score .consult-mode-toggle__option span {
    min-width: 1.85rem;
    min-height: 0;
    padding: 0.25rem 0.35rem;
    font-size: 0.82rem;
    font-variant-numeric: tabular-nums;
    border-color: var(--score-border, var(--line));
    background: var(--score-bg, var(--panel));
    color: var(--score-color, var(--text-secondary, #4A5568));
}

.consult-mode-toggle--score .consult-mode-toggle__option input:checked + span {
    border-color: var(--score-active-border, var(--score-border, var(--primary)));
    border-left: 2.5px solid var(--score-active-border, var(--score-border, var(--primary)));
    background: var(--score-active-bg, var(--score-bg, var(--primary-ghost)));
    color: var(--score-active-color, var(--primary));
    box-shadow: none;
}

.consult-mode-toggle--score .consult-mode-toggle__option span[data-score-kind="pain"][data-score-value="0"] { --score-bg: #eef9f1; --score-border: #b7e3c2; --score-color: #1e6a3c; --score-active-bg: linear-gradient(180deg, #dbf3e3 0%, #c5e9d2 100%); --score-active-border: #4aa266; --score-active-color: #0f4f27; --score-shadow: rgba(74, 162, 102, 0.24); }
.consult-mode-toggle--score .consult-mode-toggle__option span[data-score-kind="pain"][data-score-value="1"] { --score-bg: #f3faec; --score-border: #c7e7b0; --score-color: #486925; --score-active-bg: linear-gradient(180deg, #e3f5d5 0%, #d5edc0 100%); --score-active-border: #7bb247; --score-active-color: #365315; --score-shadow: rgba(123, 178, 71, 0.24); }
.consult-mode-toggle--score .consult-mode-toggle__option span[data-score-kind="pain"][data-score-value="2"] { --score-bg: #fafbe8; --score-border: #dce59f; --score-color: #6d6a1a; --score-active-bg: linear-gradient(180deg, #f1f5cb 0%, #e7ecb1 100%); --score-active-border: #b0b53e; --score-active-color: #54510f; --score-shadow: rgba(176, 181, 62, 0.24); }
.consult-mode-toggle--score .consult-mode-toggle__option span[data-score-kind="pain"][data-score-value="3"] { --score-bg: #fff8e5; --score-border: #ead69d; --score-color: #805b12; --score-active-bg: linear-gradient(180deg, #ffefc8 0%, #f9e2aa 100%); --score-active-border: #d39b31; --score-active-color: #6a4300; --score-shadow: rgba(211, 155, 49, 0.24); }
.consult-mode-toggle--score .consult-mode-toggle__option span[data-score-kind="pain"][data-score-value="4"] { --score-bg: #fff2df; --score-border: #efc99a; --score-color: #8e4e16; --score-active-bg: linear-gradient(180deg, #ffe3bf 0%, #ffd39f 100%); --score-active-border: #dc7d2c; --score-active-color: #723709; --score-shadow: rgba(220, 125, 44, 0.24); }
.consult-mode-toggle--score .consult-mode-toggle__option span[data-score-kind="pain"][data-score-value="5"] { --score-bg: #fee9df; --score-border: #efb89d; --score-color: #934126; --score-active-bg: linear-gradient(180deg, #ffd4c0 0%, #ffc0a5 100%); --score-active-border: #d5643a; --score-active-color: #702a15; --score-shadow: rgba(213, 100, 58, 0.24); }
.consult-mode-toggle--score .consult-mode-toggle__option span[data-score-kind="pain"][data-score-value="6"] { --score-bg: #fee2df; --score-border: #ecaeaa; --score-color: #973235; --score-active-bg: linear-gradient(180deg, #ffc7c5 0%, #ffb1ae 100%); --score-active-border: #d5484d; --score-active-color: #741d21; --score-shadow: rgba(213, 72, 77, 0.24); }
.consult-mode-toggle--score .consult-mode-toggle__option span[data-score-kind="pain"][data-score-value="7"] { --score-bg: #fedbdd; --score-border: #eca3ad; --score-color: #97283b; --score-active-bg: linear-gradient(180deg, #ffc0c8 0%, #ffa8b1 100%); --score-active-border: #cf375d; --score-active-color: #75142e; --score-shadow: rgba(207, 55, 93, 0.24); }
.consult-mode-toggle--score .consult-mode-toggle__option span[data-score-kind="pain"][data-score-value="8"] { --score-bg: #fbd7e1; --score-border: #e79ab2; --score-color: #8f2448; --score-active-bg: linear-gradient(180deg, #f8bfd0 0%, #f2a8c0 100%); --score-active-border: #c43a73; --score-active-color: #6f153d; --score-shadow: rgba(196, 58, 115, 0.24); }
.consult-mode-toggle--score .consult-mode-toggle__option span[data-score-kind="pain"][data-score-value="9"] { --score-bg: #f7d4e7; --score-border: #de97ba; --score-color: #87275a; --score-active-bg: linear-gradient(180deg, #f1bdd8 0%, #e7a5ca 100%); --score-active-border: #b53f86; --score-active-color: #621847; --score-shadow: rgba(181, 63, 134, 0.24); }
.consult-mode-toggle--score .consult-mode-toggle__option span[data-score-kind="pain"][data-score-value="10"] { --score-bg: #f3d0e8; --score-border: #d78fb9; --score-color: #7b1f5f; --score-active-bg: linear-gradient(180deg, #eab7dc 0%, #df9ece 100%); --score-active-border: #a43586; --score-active-color: #591145; --score-shadow: rgba(164, 53, 134, 0.24); }

.consult-mode-toggle--score .consult-mode-toggle__option span[data-score-kind="bcs"][data-score-value="1"] { --score-bg: #fee4e2; --score-border: #f3b0ad; --score-color: #9a2c2a; --score-active-bg: linear-gradient(180deg, #ffcfc9 0%, #ffb9b0 100%); --score-active-border: #d64d46; --score-active-color: #761a17; --score-shadow: rgba(214, 77, 70, 0.24); }
.consult-mode-toggle--score .consult-mode-toggle__option span[data-score-kind="bcs"][data-score-value="2"] { --score-bg: #feeade; --score-border: #efc0a1; --score-color: #995227; --score-active-bg: linear-gradient(180deg, #ffd8bc 0%, #ffc69d 100%); --score-active-border: #d57939; --score-active-color: #733611; --score-shadow: rgba(213, 121, 57, 0.24); }
.consult-mode-toggle--score .consult-mode-toggle__option span[data-score-kind="bcs"][data-score-value="3"] { --score-bg: #fff2df; --score-border: #ecd09a; --score-color: #8d6712; --score-active-bg: linear-gradient(180deg, #ffe5bd 0%, #ffd79a 100%); --score-active-border: #c89a2f; --score-active-color: #674b00; --score-shadow: rgba(200, 154, 47, 0.24); }
.consult-mode-toggle--score .consult-mode-toggle__option span[data-score-kind="bcs"][data-score-value="4"] { --score-bg: #f6f7df; --score-border: #d8dc99; --score-color: #687314; --score-active-bg: linear-gradient(180deg, #eaefc1 0%, #dfe7a6 100%); --score-active-border: #9bad39; --score-active-color: #43530c; --score-shadow: rgba(155, 173, 57, 0.24); }
.consult-mode-toggle--score .consult-mode-toggle__option span[data-score-kind="bcs"][data-score-value="5"] { --score-bg: #e8f7e5; --score-border: #b8dfb2; --score-color: #237142; --score-active-bg: linear-gradient(180deg, #d5f0d0 0%, #bee7b7 100%); --score-active-border: #3a9b60; --score-active-color: #124e29; --score-shadow: rgba(58, 155, 96, 0.24); }
.consult-mode-toggle--score .consult-mode-toggle__option span[data-score-kind="bcs"][data-score-value="6"] { --score-bg: #f0f8e2; --score-border: #c9df9f; --score-color: #5c7418; --score-active-bg: linear-gradient(180deg, #e2f0c5 0%, #d2e7a9 100%); --score-active-border: #88a93a; --score-active-color: #3a4f0d; --score-shadow: rgba(136, 169, 58, 0.24); }
.consult-mode-toggle--score .consult-mode-toggle__option span[data-score-kind="bcs"][data-score-value="7"] { --score-bg: #fff2df; --score-border: #ecd19d; --score-color: #8a6418; --score-active-bg: linear-gradient(180deg, #ffe4bf 0%, #ffd59e 100%); --score-active-border: #c88d35; --score-active-color: #694500; --score-shadow: rgba(200, 141, 53, 0.24); }
.consult-mode-toggle--score .consult-mode-toggle__option span[data-score-kind="bcs"][data-score-value="8"] { --score-bg: #fee6df; --score-border: #efbba1; --score-color: #934728; --score-active-bg: linear-gradient(180deg, #ffd1be 0%, #ffc0a4 100%); --score-active-border: #d26e3b; --score-active-color: #702f13; --score-shadow: rgba(210, 110, 59, 0.24); }
.consult-mode-toggle--score .consult-mode-toggle__option span[data-score-kind="bcs"][data-score-value="9"] { --score-bg: #fee0df; --score-border: #eeadae; --score-color: #933133; --score-active-bg: linear-gradient(180deg, #ffc7c5 0%, #ffafac 100%); --score-active-border: #d24c4a; --score-active-color: #72191a; --score-shadow: rgba(210, 76, 74, 0.24); }

.consult-wizard-shell {
    display: grid;
    grid-template-columns: minmax(14rem, clamp(14rem, 22vw, 21rem)) minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
    position: relative;
}

.consult-wizard-shell--sidebar-collapsed {
    grid-template-columns: minmax(0, 1fr);
}

.consult-wizard-shell--sidebar-collapsed .consult-wizard-sidebar {
    display: none;
}

.consult-wizard-sidebar-toggle {
    position: sticky;
    top: 0.5rem;
    align-self: start;
    justify-self: start;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.7rem 0.4rem 0.55rem;
    margin: 0 0 0.6rem 0;
    border: 0;
    border-radius: 0 999px 999px 0;
    background: linear-gradient(135deg, #2c6df5 0%, #1d4bb0 100%);
    color: var(--text-on-solid);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(44, 109, 245, 0.28);
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.consult-wizard-sidebar-toggle:hover {
    transform: translateX(2px);
    box-shadow: 0 8px 20px rgba(44, 109, 245, 0.34);
}

.consult-wizard-sidebar-toggle__icon {
    width: 0.85rem;
    height: 0.85rem;
    flex-shrink: 0;
    background:
        linear-gradient(currentColor, currentColor) top/100% 2px no-repeat,
        linear-gradient(currentColor, currentColor) center/100% 2px no-repeat,
        linear-gradient(currentColor, currentColor) bottom/100% 2px no-repeat;
}

.consult-wizard-shell:not(.consult-wizard-shell--sidebar-collapsed) .consult-wizard-sidebar-toggle {
    /* Hide the floating toggle when the sidebar is open — collapsing happens
       from inside the sidebar header instead (less ambiguous). */
    display: none;
}

.consult-wizard-sidebar {
    position: sticky;
    top: 1rem;
    display: grid;
    gap: 0.7rem;
}

.consult-wizard-sidebar__collapse {
    justify-self: end;
    padding: 0.1rem 0.5rem;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--panel);
    color: var(--text);
    font-size: 0.85rem;
    line-height: 1;
    cursor: pointer;
    transition: background 0.12s ease;
}

.consult-wizard-sidebar__collapse:hover {
    background: var(--surface-hover, #f1f5fb);
}

.consult-wizard-sidebar__head,
.consult-wizard-summary__card,
.consult-step-card {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--panel);
    box-shadow: var(--shadow);
    padding: 0.82rem;
}

.consult-step-card--accent {
    background: var(--panel);
    border-color: var(--line);
    border-left: 3px solid var(--accent);
}

.consult-wizard-sidebar__head h3,
.consult-step-card h3,
.consult-wizard-summary__card h4 {
    margin: 0;
    color: var(--text);
}

.consult-wizard-sidebar__head .muted,
.consult-step-card .muted {
    margin-top: 0.25rem;
}

.consult-inline-subtitle {
    margin: 0 0 0.7rem;
    color: var(--text);
    font-size: 0.98rem;
}

.consult-advanced-panel {
    margin-top: 0.95rem;
    border: 1px solid var(--line);
    border-radius: 0.95rem;
    background: var(--panel);
    overflow: hidden;
}

.consult-advanced-panel summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.85rem 0.95rem;
    font-weight: 800;
    color: var(--text);
}

.consult-advanced-panel summary::-webkit-details-marker {
    display: none;
}

.consult-advanced-panel summary::after {
    content: '▾';
    color: #5a77aa;
    font-size: 0.95rem;
}

.consult-advanced-panel:not([open]) summary {
    border-bottom: none;
}

.consult-advanced-panel[open] summary {
    border-bottom: 1px solid var(--line);
    background: linear-gradient(180deg, #f7fbff 0%, #f1f6ff 100%);
}

.consult-advanced-panel:not([open]) summary:hover,
.consult-advanced-panel[open] summary:hover {
    background: var(--panel-soft);
}

.consult-advanced-panel__body {
    display: grid;
    gap: 0.85rem;
    padding: 0.95rem;
}

.consult-objective-card--advanced {
    background: var(--panel);
}

.consult-wizard-steps,
.consult-wizard-summary,
.consult-wizard-content {
    display: grid;
    gap: 0.7rem;
}

/* Unsaved changes indicator — shows between the step buttons and the
 * summary cards in the wizard sidebar when the form is dirty. */
.consult-unsaved-badge {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.65rem;
    border-radius: 5px;
    background: var(--accent-ghost, rgba(217, 139, 58, 0.08));
    border: 1px solid var(--accent);
    border-left: 2.5px solid var(--accent);
    color: var(--accent-strong, #C47B2E);
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.2;
}

.consult-unsaved-badge__dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--accent-strong);
    flex: 0 0 auto;
    animation: unsaved-pulse 2s ease-in-out infinite;
}

@keyframes unsaved-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

.consult-unsaved-badge[data-state="saving"] {
    background: var(--success-ghost, rgba(34, 139, 88, 0.08));
    border-color: var(--success, #228B58);
    border-left-color: var(--success, #228B58);
    color: var(--success-strong, #1a6b44);
}

.consult-unsaved-badge[data-state="saving"] .consult-unsaved-badge__dot {
    width: 0.7rem;
    height: 0.7rem;
    background: transparent;
    border: 2px solid currentColor;
    border-top-color: transparent;
    animation: unsaved-spin 0.8s linear infinite;
}

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

.consult-wizard-step {
    width: 100%;
    display: grid;
    grid-template-columns: 2.35rem 1fr;
    gap: 0.68rem;
    align-items: center;
    text-align: left;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    padding: 0.55rem 0.65rem;
    cursor: pointer;
    transition: background-color 0.1s ease;
}

.consult-wizard-step:hover {
    background: var(--panel-hover, #FAFBFC);
}

.consult-wizard-step.is-active {
    border-color: transparent;
    background: var(--primary-ghost, rgba(41, 104, 224, 0.08));
}

.consult-wizard-step.is-complete {
    border-color: transparent;
    background: var(--success-bg, #E8F5EE);
}

.consult-wizard-step__index {
    width: 2.05rem;
    height: 2.05rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    background: var(--line-soft, #EDF0F4);
    color: var(--muted);
    font-weight: 700;
}

.consult-wizard-step.is-active .consult-wizard-step__index {
    background: var(--primary-solid);
    color: var(--text-on-solid);
}

.consult-wizard-step.is-complete .consult-wizard-step__index {
    background: var(--success-bg, #E8F5EE);
    color: var(--success);
}

.consult-wizard-step__content {
    display: grid;
    gap: 0.1rem;
}

.consult-wizard-step__content strong {
    color: var(--text);
    font-size: 0.93rem;
}

.consult-wizard-step__content small {
    color: var(--muted);
    font-size: 0.76rem;
}

.consult-wizard-summary__card dl {
    margin: 0.55rem 0 0;
    display: grid;
    gap: 0.48rem;
}

.consult-wizard-summary__card--two-cols dl {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.56rem 0.9rem;
}

.consult-wizard-summary__card dl div {
    display: grid;
    gap: 0.08rem;
}

.consult-wizard-summary__card dt {
    color: var(--muted);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.consult-wizard-summary__card dd {
    margin: 0;
    color: var(--text);
    font-weight: 700;
    font-size: 0.92rem;
    line-height: 1.2;
    word-break: break-word;
}

.consult-wizard-summary__link {
    color: #1f3f75;
    text-decoration: underline;
    text-underline-offset: 0.12em;
    text-decoration-thickness: 0.08em;
}

.consult-wizard-summary__link:hover,
.consult-wizard-summary__link:focus-visible {
    color: var(--primary);
    text-decoration-thickness: 0.1em;
}

.consult-wizard-summary__analyses {
    margin-top: 0.55rem;
    padding-top: 0.55rem;
    border-top: 1px dashed var(--line-soft);
    display: grid;
    gap: 0.35rem;
}

.consult-wizard-summary__analyses h5 {
    margin: 0;
    color: var(--muted);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.consult-wizard-summary__analyses ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 0.2rem;
    max-height: 12rem;
    overflow-y: auto;
}

.consult-wizard-summary__analyses li a {
    display: flex;
    gap: 0.4rem;
    align-items: baseline;
    padding: 0.18rem 0.3rem;
    border-radius: 0.3rem;
    color: var(--text);
    text-decoration: none;
    font-size: 0.82rem;
    line-height: 1.25;
}

.consult-wizard-summary__analyses li a:hover {
    background: var(--surface-soft, #f5f6f8);
}

.consult-wizard-summary__analysis-date {
    color: var(--muted);
    font-size: 0.72rem;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

.consult-wizard-summary__analysis-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 1100px) {
    .consult-wizard-summary__card--two-cols dl {
        grid-template-columns: 1fr;
    }
}

.consult-wizard-pane {
    display: grid;
    gap: 0.9rem;
}

.consult-step-card__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.85rem;
    margin-bottom: 0.2rem;
}

.consult-step-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.9rem;
}

.consult-step-grid--narrow {
    grid-template-columns: minmax(0, 12rem);
}

/* Hide in-content nav buttons — the sticky footer already has them */
.consult-step-actions {
    display: none;
}

/* Animalut step - sectioned layout */
.consult-animal-section {
    margin-top: 1.05rem;
    padding-top: 0.9rem;
    border-top: 1px dashed var(--line);
}

.consult-animal-section:first-of-type {
    margin-top: 0.35rem;
    padding-top: 0;
    border-top: 0;
}

.consult-animal-section__title {
    font-size: 0.72rem;
    font-weight: 800;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0 0 0.55rem;
}

.consult-animal-section__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem 1rem;
    align-items: start;
}

.consult-animal-section__grid--stack > div {
    grid-column: 1 / -1;
}

.consult-animal-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.65rem;
    margin-top: 0.4rem;
}

.consult-animal-chips > * {
    flex: 0 0 auto;
}

@media (max-width: 720px) {
    .consult-animal-section__grid {
        grid-template-columns: 1fr;
    }
}

/* Consultatie step footer - two-group layout */
.consult-footer-nav {
    justify-content: space-between;
    align-items: center;
    gap: 0.6rem;
}

/* Sticky footer — lives inside .consult-wizard-content (right column)
 * so it aligns with the consultation cards, not across the sidebar.
 * Uses position:sticky to stay visible while scrolling. */
.consult-footer-nav--fixed {
    position: sticky;
    bottom: 0;
    z-index: 100;
    display: flex;
    background: var(--panel);
    border-top: 1px solid var(--line);
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem 0.5rem 0 0;
    box-shadow: 0 -2px 8px rgba(28, 36, 51, 0.06);
}

.consult-footer-nav__group {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: wrap;
}

.consult-footer-nav__group--left {
    flex: 0 0 auto;
    justify-content: flex-start;
}

.consult-footer-nav__group--right {
    flex: 1 1 auto;
    justify-content: flex-end;
}

.consult-footer-nav .consultation-saved-actions {
    gap: 0.35rem;
}

@media (max-width: 900px) {
    .consult-footer-nav {
        flex-direction: column;
        align-items: stretch;
    }

    .consult-footer-nav__group {
        justify-content: flex-start;
    }
}

.consult-placeholder-card {
    display: grid;
    gap: 0.35rem;
    padding: 0.9rem 1rem;
    border: 1px dashed #bfd0ea;
    border-radius: 0.9rem;
    background: linear-gradient(180deg, var(--panel) 0%, var(--panel-soft) 100%);
}

.consult-placeholder-card strong {
    color: var(--text);
}

.consult-placeholder-card p {
    margin: 0;
    color: var(--text-secondary);
}

.consult-template-grid {
    display: grid;
    gap: 0.75rem;
}

.consent-template-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.85rem;
    padding: 0.85rem 0.95rem;
    border: 1px solid var(--line);
    border-radius: 0.95rem;
    background: linear-gradient(180deg, var(--panel) 0%, var(--panel-soft) 100%);
}

.consent-template-item__meta {
    display: grid;
    gap: 0.28rem;
    min-width: 0;
}

.consent-template-item__head {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    align-items: center;
}

.consent-template-item__head strong {
    color: var(--text);
    font-size: 0.98rem;
}

.consent-template-item__head span {
    display: inline-flex;
    align-items: center;
    min-height: 1.55rem;
    padding: 0.16rem 0.58rem;
    border-radius: 999px;
    background: var(--bg-page);
    color: var(--link);
    font-size: 0.74rem;
    font-weight: 700;
}

.consent-template-item__meta p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.88rem;
    line-height: 1.4;
}

.consent-template-item__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.45rem;
    flex-shrink: 0;
}

.btn--disabled,
.btn[aria-disabled="true"] {
    pointer-events: none;
    opacity: 0.65;
    cursor: not-allowed;
    box-shadow: none;
}

.form-section-sep {
    padding-top: 1rem;
    border-top: 1px solid var(--line);
}

/* Section heading with a right-aligned action link (e.g. "Istoric stoc" +
   "Deschide fisa de stoc"). Keeps the h3 and the link on one baseline row,
   wrapping the link below on narrow screens. */
.section-head-inline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 0.6rem;
}
.section-head-inline h3 {
    margin: 0;
}

.form-intro {
    margin-top: 0.3rem;
}

/* Symfony's form help text (the `help:` option on form fields).
 * Rendered as <div class="help-text"> under each input. Keep it
 * small and muted so it doesn't compete with the input value. */
.help-text,
.form-help {
    font-size: 0.7rem;
    color: var(--muted, #6b7280);
    margin-top: 0.15rem;
    line-height: 1.3;
}

.date-range-field {
    display: grid;
    gap: 0.35rem;
}

.date-range-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.date-range-actions .btn {
    min-height: 2.15rem;
}

label {
    display: grid;
    gap: 0.35rem;
    font-size: 0.88rem;
    font-weight: 600;
}

label.required {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
}

label.required::after {
    content: '*';
    color: var(--danger-text);
    font-weight: 700;
    line-height: 1;
}

input:not([type='checkbox']):not([type='radio']):not(.flatpickr-input):not(.numInput),
label textarea,
label select,
textarea,
select:not(.flatpickr-monthDropdown-months) {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: var(--control-radius);
    padding: var(--control-padding-y) var(--control-padding-x);
    font-family: inherit;
    font-size: var(--control-font-size);
    line-height: var(--control-line-height);
    min-height: var(--control-min-height);
    background: var(--panel);
    color: var(--text);
}

input[type='checkbox'],
input[type='radio'] {
    width: 1.05rem;
    height: 1.05rem;
    min-height: 1.05rem;
    margin: 0;
    padding: 0;
    accent-color: var(--primary);
    border: 1px solid var(--muted);
    background: var(--panel);
    box-shadow: none;
    vertical-align: middle;
}

input[type='checkbox'] {
    border-radius: 0.24rem;
}

input[type='radio'] {
    border-radius: 50%;
}

.binary-choice {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-top: 0.2rem;
}

.binary-choice > div {
    position: relative;
}

.binary-choice > input[type='radio'],
.binary-choice > div > input[type='radio'] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.binary-choice > label,
.binary-choice > div > label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 3.1rem;
    padding: 0.38rem 0.78rem;
    border: 1px solid #c8d5ec;
    border-radius: 999px;
    background: linear-gradient(180deg, var(--panel) 0%, var(--panel-soft) 100%);
    color: var(--text);
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.14s ease;
}

.binary-choice > label:hover,
.binary-choice > div > label:hover {
    border-color: var(--muted);
    background: linear-gradient(180deg, var(--panel-soft) 0%, var(--bg-page) 100%);
    transform: translateY(-1px);
}

.binary-choice > input[type='radio']:checked + label,
.binary-choice > div > input[type='radio']:checked + label {
    border-color: var(--primary);
    background: linear-gradient(130deg, #4b88ff 0%, #2c6df5 100%);
    color: var(--text-on-solid);
    box-shadow: 0 6px 14px rgba(34, 87, 189, 0.28);
}

.binary-choice > input[type='radio']:focus-visible + label,
.binary-choice > div > input[type='radio']:focus-visible + label {
    outline: 2px solid rgba(53, 110, 227, 0.3);
    outline-offset: 2px;
}

.binary-choice > label.required::after,
.binary-choice > div > label.required::after {
    content: none;
}

/* Flatpickr: enforce native header layout (month dropdown + full year) */
.flatpickr-calendar .flatpickr-current-month {
    font-size: 135% !important;
    line-height: 1 !important;
    font-weight: 300 !important;
    position: absolute !important;
    width: 75% !important;
    left: 12.5% !important;
    height: 34px !important;
    padding: 7.48px 0 0 0 !important;
    text-align: center !important;
}

.flatpickr-calendar .flatpickr-current-month .flatpickr-monthDropdown-months {
    appearance: menulist !important;
    -webkit-appearance: menulist !important;
    -moz-appearance: menulist !important;
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 0 0 .5ch !important;
    margin: -1px 0 0 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    line-height: inherit !important;
    font-size: inherit !important;
    font-family: inherit !important;
    font-weight: 300 !important;
    box-shadow: none !important;
}

.flatpickr-calendar .flatpickr-current-month .numInputWrapper {
    width: 6ch !important;
    display: inline-block !important;
}

.flatpickr-calendar .flatpickr-current-month input.cur-year {
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 0 0 .5ch !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    line-height: inherit !important;
    font-size: inherit !important;
    font-family: inherit !important;
    font-weight: 300 !important;
    box-shadow: none !important;
}

.flatpickr-alt-input {
    width: 100%;
}

.form-grid > div > input[type='checkbox'],
.form-grid > div > input[type='radio'] {
    justify-self: start;
    margin-top: 0.2rem;
}

.ts-wrapper {
    width: 100%;
}

.ts-control,
.ts-control input,
.ts-dropdown {
    font-family: inherit;
    font-size: var(--control-font-size);
    line-height: var(--control-line-height);
}

.ts-wrapper .ts-control {
    border: 1px solid #bfcadd;
    border-radius: var(--control-radius);
    box-shadow: none;
    min-height: var(--control-min-height);
    padding: var(--control-padding-y) var(--control-padding-x);
    font-size: var(--control-font-size);
    line-height: var(--control-line-height);
}

.ts-wrapper.single .ts-control {
    padding-right: 2.2rem;
}

.ts-wrapper.focus .ts-control {
    border-color: var(--primary-line);
    box-shadow: 0 0 0 4px rgba(110, 162, 255, 0.24);
}

.ts-control > input {
    width: auto !important;
}

.ts-wrapper.single .ts-control:after {
    right: 0.85rem;
    border-width: 6px 6px 0;
    border-color: var(--text-secondary) transparent transparent;
}

.ts-wrapper.single.dropdown-active .ts-control:after {
    border-width: 0 6px 6px;
    border-color: transparent transparent var(--text-secondary);
    margin-top: -5px;
}

.ts-dropdown {
    /* Must sit above .modal-overlay (z-index 1200): when a TomSelect lives
       inside the calendar modal we set dropdownParent:'body', so the dropdown
       is appended directly under <body> and stacks against the overlay rather
       than nesting inside it. At 1000 it rendered behind the backdrop and the
       options list was invisible. */
    z-index: 1300;
    margin-top: 0.35rem;
    border: 1px solid var(--line);
    border-radius: 0.8rem;
    box-shadow: 0 12px 24px rgba(30, 42, 58, 0.14);
    overflow: hidden;
    font-size: var(--control-font-size);
    line-height: var(--control-line-height);
}

.ts-dropdown .option {
    padding: 0.62rem 0.85rem;
}

.ts-dropdown .active {
    background: var(--surface-soft);
    color: var(--text);
}

/* Rank-ordered multi-select (data-sortable="true" + the enhanced-select
   controller): the picked values are an ordered list, not a set — the
   consultation's differential diagnoses are ranked from most to least likely.
   The rank is rendered from a CSS counter so it re-numbers itself the moment a
   chip is dragged elsewhere, with no JS bookkeeping. */
.ts-wrapper--sortable .ts-control {
    counter-reset: ts-rank;
}

/* `.multi` is carried purely for specificity: tom-select's own
   `.ts-wrapper.multi .ts-control > div { cursor: pointer }` loads after
   app.css and would otherwise win the tie. */
.ts-wrapper--sortable.multi .ts-control > .item {
    cursor: grab;
    /* Without this a touch-drag starting on a chip scrolls the page instead. */
    touch-action: none;
}

.ts-wrapper--sortable .ts-control > .item::before {
    counter-increment: ts-rank;
    content: counter(ts-rank) ".";
    margin-right: 0.35rem;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--muted);
}

.ts-wrapper--sortable.is-reordering,
.ts-wrapper--sortable.multi.is-reordering .ts-control > .item {
    cursor: grabbing;
    user-select: none;
}

.ts-wrapper--sortable.multi .ts-control > .item.is-dragging {
    opacity: 0.55;
}

.ts-empty {
    color: var(--muted);
    padding: 0.5rem;
    font-size: 0.85rem;
}

input:focus:not(.flatpickr-input):not(.numInput),
button:focus,
textarea:focus,
select:focus:not(.flatpickr-monthDropdown-months) {
    outline: 3px solid rgba(44, 109, 245, 0.22);
    border-color: var(--primary-line);
}

.flatpickr-calendar input:focus,
.flatpickr-calendar select:focus {
    outline: none;
    border-color: transparent;
}

input[type='checkbox']:focus,
input[type='radio']:focus {
    outline: 2px solid rgba(44, 109, 245, 0.28);
    outline-offset: 2px;
}

/* Global focus-visible ring. Keyboard users need a visible focus indicator
   on every interactive element — WCAG 2.4.7. Pre-fix, both .btn and
   .menu__item.is-active computed `outline: ... none 0px` so Tab navigation
   was invisible across the entire app. Use the primary token so the ring
   matches the brand. */
.btn:focus-visible,
.menu__item:focus-visible,
a:not([class*='__']):focus-visible,
button:not([class]):focus-visible,
[role='button']:focus-visible,
select:focus-visible,
input[type='text']:focus-visible,
input[type='number']:focus-visible,
input[type='email']:focus-visible,
input[type='password']:focus-visible,
input[type='search']:focus-visible,
input[type='tel']:focus-visible,
input[type='url']:focus-visible,
input[type='date']:focus-visible,
input[type='time']:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--primary, #2968e0);
    outline-offset: 2px;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    border: 1px solid var(--line);
    border-radius: 0.65rem;
    background: linear-gradient(180deg, var(--panel) 0%, var(--panel-soft) 100%);
    color: var(--text);
    padding: 0.54rem 0.82rem;
    text-decoration: none;
    font-weight: 700;
    box-shadow: 0 2px 6px rgba(20, 35, 58, 0.08);
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease, transform 0.12s ease, box-shadow 0.18s ease;
}

.btn:hover {
    background: linear-gradient(180deg, var(--panel-soft) 0%, var(--bg-page) 100%);
    border-color: var(--info-line);
    box-shadow: 0 5px 12px rgba(20, 35, 58, 0.12);
    transform: translateY(-1px);
}

.btn--primary {
    background: linear-gradient(130deg, #4b88ff 0%, #2c6df5 100%);
    border-color: var(--primary);
    color: var(--text-on-solid);
}

.btn--primary:hover {
    background: linear-gradient(130deg, #3f7bf0 0%, #2459c6 100%);
}

.btn--consultation-add {
    background: linear-gradient(130deg, #2f5fcc 0%, #1f4db6 100%);
    border-color: var(--primary-strong);
    color: var(--text-on-solid);
}

.btn--consultation-add:hover {
    background: linear-gradient(130deg, #284fad 0%, #183f95 100%);
    border-color: #173b8d;
    color: var(--text-on-solid);
}

.btn--warning {
    background: linear-gradient(130deg, #ffd86b 0%, #f4bf2f 100%);
    border-color: #d8a51d;
    color: #503700;
}

.btn--warning:hover {
    background: linear-gradient(130deg, #f8cf57 0%, var(--warning) 100%);
    border-color: #c69210;
    color: #412d00;
}

.btn--small {
    padding: 0.32rem 0.52rem;
    font-size: 0.78rem;
}

.btn--icon-only {
    padding: 0.52rem;
    min-width: 2.5rem;
    min-height: 2.5rem;
    gap: 0;
}

.btn__icon {
    display: inline-flex;
    width: 1rem;
    height: 1rem;
}

.btn__icon svg {
    width: 100%;
    height: 100%;
    display: block;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.85;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.panel a:not(.btn):not(.table-sort),
.table a:not(.btn):not(.table-sort) {
    color: var(--primary-strong);
    text-decoration: none;
    font-weight: 600;
}

.panel a:not(.btn):not(.table-sort):hover,
.table a:not(.btn):not(.table-sort):hover {
    color: var(--primary-text);
}

.btn--add {
    border-color: var(--success-line);
    background: var(--panel-soft);
    color: var(--success-text);
}

.btn--add:hover {
    background: var(--success-bg);
}

.btn--danger {
    border-color: var(--danger-line);
    background: var(--bg-page);
    color: var(--danger-text);
}

.btn--danger:hover {
    background: var(--surface-soft);
}

/* Subtle, low-emphasis action (e.g. "Marcheaza serviciu") — transparent
   fill + muted text so it sits behind the primary/warning CTAs in a row. */
.btn--ghost {
    border-color: var(--line);
    background: transparent;
    color: var(--text-secondary);
    box-shadow: none;
}

.btn--ghost:hover {
    background: var(--panel-soft);
    border-color: #c2cee2;
    color: var(--text);
}

.btn--print,
.btn--pdf {
    display: inline-flex;
    align-items: center;
}

.btn--print {
    border-color: #b9d7ef;
    background: linear-gradient(180deg, var(--panel-soft) 0%, var(--bg-page) 100%);
    color: var(--info-text);
}

.btn--print:hover {
    background: linear-gradient(180deg, var(--bg-page) 0%, var(--surface-soft) 100%);
}

.btn--pdf {
    border-color: var(--danger-line);
    background: linear-gradient(180deg, var(--panel-soft) 0%, var(--bg-page) 100%);
    color: var(--danger-text);
}

.btn--pdf:hover {
    background: linear-gradient(180deg, var(--bg-page) 0%, var(--surface-soft) 100%);
}

.btn--email {
    border-color: var(--success-line);
    background: linear-gradient(180deg, var(--panel-soft) 0%, var(--bg-page) 100%);
    color: var(--success-text);
}

.btn--email:hover {
    background: linear-gradient(180deg, var(--bg-page) 0%, var(--surface-soft) 100%);
    color: #0b574e;
}

.btn--preview {
    border-color: #c9c4ef;
    background: linear-gradient(180deg, var(--panel-soft) 0%, var(--surface-soft) 100%);
    color: var(--primary-text);
}

.btn--preview:hover {
    background: linear-gradient(180deg, var(--surface-soft) 0%, var(--line) 100%);
    color: #3d3399;
}

/* Icon-only button modifier — hides the text label, keeps the SVG
 * icon visible, and relies on the native `title` attribute for the
 * hover tooltip. Used on the consultation export buttons to save
 * horizontal space in the sticky footer. */
.btn--icon-only {
    padding: 0.45rem;
    min-width: 2.2rem;
    min-height: 2.2rem;
    justify-content: center;
}

.btn--icon-only > span:not(.btn__icon) {
    position: absolute;
    clip: rect(0, 0, 0, 0);
    width: 1px;
    height: 1px;
    overflow: hidden;
    white-space: nowrap;
}

/* Export section-picker dialog (native <dialog> element).
 * Shown before Print / PDF / Email so the user can toggle which
 * sections of the consultation to include in the export. */
.export-dialog {
    border: 1px solid var(--line);
    border-radius: 1rem;
    padding: 1.2rem 1.4rem;
    max-width: 22rem;
    font-family: inherit;
    color: var(--text, #111827);
}

.export-dialog::backdrop {
    background: rgba(25, 37, 58, 0.42);
}

.export-dialog h3 {
    margin: 0 0 0.2rem;
    font-size: 1rem;
    color: var(--text);
}

.export-dialog__hint {
    font-size: 0.72rem;
    color: var(--muted, #6b7280);
    margin: 0 0 0.6rem;
}

.export-dialog__sections {
    display: grid;
    gap: 0.35rem;
}

.export-dialog__check {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.85rem;
    cursor: pointer;
    padding: 0.2rem 0;
}

.export-dialog__check input[type="checkbox"] {
    accent-color: var(--primary, #1e56cc);
    width: 1rem;
    height: 1rem;
    margin: 0;
}

.export-dialog__actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--line-soft);
}

/* Print / PDF / Email export buttons on the consultation details page.
   Groups the three icon buttons as one topbar item; the inner gap matches
   the .topbar__actions-row gap so the row reads identically to before the
   export section-picker dialog was added. */
.consult-export {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
}

.consult-export > form {
    display: inline-flex;
    margin: 0;
}

.fiscal-preview-dialog {
    border: 1px solid var(--line);
    border-radius: 1rem;
    padding: 1.2rem 1.4rem;
    max-width: 44rem;
    width: 90vw;
    font-family: inherit;
    color: var(--text, #111827);
}
.fiscal-preview-dialog::backdrop {
    background: rgba(25, 37, 58, 0.42);
}
.fiscal-preview-dialog h3 {
    margin: 0 0 0.3rem;
    font-size: 1.05rem;
    color: var(--text);
}
.fiscal-preview-dialog__hint {
    font-size: 0.78rem;
    color: var(--muted, #6b7280);
    margin: 0 0 0.8rem;
}
.fiscal-preview-dialog__meta {
    font-size: 0.8rem;
    color: var(--text);
    display: grid;
    gap: 0.2rem;
    margin-bottom: 0.7rem;
    padding: 0.55rem 0.7rem;
    background: var(--panel-soft);
    border-radius: 0.55rem;
    border: 1px solid var(--line);
}
.fiscal-preview-dialog__payload {
    margin: 0;
    padding: 0.75rem 0.9rem;
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.78rem;
    line-height: 1.45;
    background: var(--text);
    color: #d8e6ff;
    border-radius: 0.6rem;
    max-height: 24rem;
    overflow: auto;
    white-space: pre-wrap;
    word-break: break-word;
}
.fiscal-preview-dialog__warning {
    margin: 0.8rem 0 0;
    padding: 0.55rem 0.75rem;
    background: var(--warning-bg);
    border: 1px solid var(--warning-line);
    border-radius: 0.55rem;
    color: #6b4f10;
    font-size: 0.78rem;
}
.fiscal-preview-dialog__actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--line-soft);
}

.staff-list {
    display: grid;
    gap: 0.7rem;
    margin-top: 0.75rem;
}

.collection-stack {
    display: grid;
    gap: 0.8rem;
    margin-top: 0.75rem;
}

.collection-item {
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: linear-gradient(180deg, var(--panel) 0%, var(--panel-soft) 100%);
    padding: 0.8rem;
    display: grid;
    gap: 0.7rem;
}

.service-consumable-row,
.subscription-item-row {
    align-items: start;
}

.service-consumable-field,
.subscription-item-field {
    display: grid;
    gap: 0.35rem;
    align-content: start;
}

.service-consumable-label,
.subscription-item-label {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    min-height: 1.35rem;
}

/* Per-row explainer under an abonament line — spans the whole grid so it
   reads as a note about the row, not as a fourth column. */
.subscription-item-hint {
    grid-column: 1 / -1;
}

.subscription-item-hint:empty {
    display: none;
}

.collection-item--draggable {
    cursor: grab;
}

.collection-item--draggable.is-dragging {
    opacity: 0.45;
    border-style: dashed;
}

.collection-row-head {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.78rem;
    color: var(--text-secondary);
    font-weight: 700;
    letter-spacing: 0.01em;
}

.collection-row-head__actions {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
}

.lab-template-row-head {
    justify-content: flex-end;
    margin-bottom: -0.5rem;
}

.row-drag-handle {
    border: 1px solid #c4d2ea;
    background: var(--bg-page);
    color: var(--info-text);
    border-radius: 0.5rem;
    width: 1.85rem;
    height: 1.55rem;
    min-height: 1.55rem;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    cursor: grab;
}

.row-drag-handle:active {
    cursor: grabbing;
}

.row-order-btn {
    border: 1px solid #c4d2ea;
    background: var(--panel-soft);
    color: var(--info-text);
    border-radius: 0.5rem;
    width: 1.62rem;
    height: 1.42rem;
    min-height: 1.42rem;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
}

.row-order-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.row-delete-btn {
    border: 1px solid var(--danger-line);
    background: var(--panel-soft);
    color: var(--danger-text);
    border-radius: 0.5rem;
    width: 1.62rem;
    height: 1.42rem;
    min-height: 1.42rem;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
}

.row-delete-btn:hover {
    background: var(--surface-soft);
    border-color: var(--danger-line);
}

.lab-template-rows {
    gap: 1rem;
}

.lab-template-rows [data-collection-manager-target="list"] {
    display: grid;
    gap: 0.65rem;
}

.lab-template-rows .collection-item {
    padding: 0.62rem 0.72rem 0.68rem;
    gap: 0.28rem;
    border-radius: 0.72rem;
}

.lab-template-row-grid {
    --control-min-height: 2.35rem;
    --control-padding-y: 0.42rem;
    --control-padding-x: 0.72rem;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 0.9fr) minmax(0, 0.9fr);
    gap: 0.62rem;
    margin-top: 0.08rem;
    align-items: end;
}

.lab-template-row-grid .form-row {
    margin-bottom: 0;
}

/* Interpretation is free text that spans the full row width, under the
 * name/type/unit/reference columns. */
.lab-template-row-grid__wide {
    grid-column: 1 / -1;
}

.lab-template-row-grid__wide textarea {
    min-height: 3.6rem;
    resize: vertical;
}

/* Band editor inside a lab template row. */
.lab-bands-field {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

/* Live explanation of the selected "Tip" in the lab-template row editor.
   Deliberately flat — a bordered strip inside the row grid, not a nested
   panel (see DESIGN.md "No excessive cards / panels"). */
.lab-type-help {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.5rem 0.65rem;
    border-left: 2.5px solid var(--info, #2E6DA4);
    border-radius: 4px;
    background: var(--info-bg, rgba(46, 109, 164, 0.08));
}

.lab-type-help__icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.05rem;
    height: 1.05rem;
    margin-top: 0.05rem;
    border-radius: 9999px;
    background: var(--info-solid);
    color: var(--text-on-solid);
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1;
}

.lab-type-help__body {
    margin: 0;
    font-size: 0.74rem;
    line-height: 1.45;
    color: var(--text-secondary, #4A5568);
}

.lab-type-help__example {
    display: block;
    margin-top: 0.2rem;
    font-weight: 500;
    color: var(--text, #1C2433);
}

.lab-bands-field__label {
    font-size: 0.82rem;
    font-weight: 500;
}

.lab-bands-field__hint {
    margin: 0 0 0.15rem;
    font-size: 0.72rem;
    line-height: 1.4;
}

.lab-bands {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: 0.5rem 0.6rem 0.6rem;
    border: 1px dashed var(--line);
    border-radius: 0.55rem;
}

.lab-band-row {
    display: grid;
    grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.6fr) minmax(0, 0.9fr) 1.9rem;
    gap: 0.4rem;
    align-items: center;
}

.lab-band-row--head span {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--muted);
}

.lab-bands .collection-item {
    padding: 0;
    border: 0;
    background: none;
    border-radius: 0;
}

/* The last band is the open-ended catch-all, so its bound is dropped on save. */
.lab-bands .collection-item:last-child .lab-band-row__upto {
    opacity: 0.5;
}

@media (max-width: 900px) {
    .lab-band-row {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .lab-band-row--head {
        display: none;
    }
}


.lab-template-row-grid label {
    font-size: 0.82rem;
}

@media (max-width: 1200px) {
    .lab-template-row-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .lab-template-row-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .lab-template-row-grid {
        grid-template-columns: 1fr;
    }
}

.consult-lab-block {
    border: 1px solid var(--line);
    border-radius: 0.85rem;
    padding: 0.9rem;
    background: var(--panel-soft);
}

.consult-template-card {
    margin-top: 0.7rem;
    padding-top: 1rem;
}

.consult-lab-table-wrap {
    margin-top: 0.6rem;
    overflow-x: auto;
}

.consult-lab-table input.lab-result-input {
    min-height: 2.2rem;
    padding: 0.4rem 0.6rem;
}

.consult-lab-table th {
    background: var(--bg-page);
    color: var(--text-secondary);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.consult-lab-table td {
    background: var(--panel);
}


textarea[data-consultation-lab-results-target="diagnosticTests"].is-triggered {
    border-color: #6f94e8;
    box-shadow: 0 0 0 1px rgba(54, 97, 190, 0.24);
    background: var(--panel-soft);
}

.lab-flag {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 0.16rem 0.45rem;
    border: 1px solid transparent;
    font-size: 0.78rem;
    font-weight: 700;
}

/* Normal + unknown results: no colored pill — plain text so only
 * out-of-range values draw attention. */
.lab-flag--normal,
.lab-flag--unknown {
    background: none;
    color: inherit;
    border-color: transparent;
    padding: 0;
    font-weight: 600;
}

/* Out-of-range: red pill with ↑ or ↓ arrow prepended in the template */
.lab-flag--low,
.lab-flag--high {
    background: var(--surface-soft);
    color: var(--danger-text);
    border-color: var(--danger-line);
}

/* Positive (for neg/pos tests like FIV/FeLV): keep distinct alert */
.lab-flag--positive {
    background: var(--surface-soft);
    color: var(--danger-text);
    border-color: var(--danger-line);
}

/* Borderline: a banded row's middle grades (e.g. "diabet subclinic"). Amber,
 * not red — it is not out of range, it is on the way there. */
.lab-flag--borderline {
    background: var(--bg-page);
    color: var(--warning-text);
    border-color: var(--warning-line);
}

/* A banded row prints its band's NAME instead of an arrow: an arrow is one bit
 * and a graded scale needs the word. */
.lab-band-label {
    display: inline-block;
    margin-left: 0.4rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-secondary);
    white-space: nowrap;
}

/* Live band readout under the consultation input: the doctor sees which grade
 * the number lands in while typing it. */
.lab-result-banded {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.lab-band-live:empty {
    display: none;
}

.lab-band-live {
    font-size: 0.74rem;
    font-weight: 600;
    line-height: 1.25;
    color: var(--text-secondary);
}

.lab-band-live--normal { color: var(--success); }
.lab-band-live--borderline { color: var(--warning); }
.lab-band-live--low,
.lab-band-live--high { color: var(--danger); }

.working-point-card {
    display: grid;
    gap: 0.85rem;
}

/* Compact schedule table — replaces the old schedule-grid with a tight
 * table that uses native <input type="time"> for start/end. Day labels
 * are abbreviated (Lu/Ma/Mi/Jo/Vi/Sa/Du) so the whole weekly schedule
 * fits in a small vertical footprint. */
.schedule-table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid var(--line);
    border-radius: 0.6rem;
    overflow: hidden;
    background: var(--panel);
    font-size: 0.82rem;
}

.schedule-table thead th {
    background: var(--bg-page);
    padding: 0.3rem 0.5rem;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #6d7f9e;
    text-align: left;
    border-bottom: 1px solid var(--line);
}

.schedule-table tbody td {
    padding: 0.25rem 0.4rem;
    border-bottom: 1px solid var(--line-soft);
    vertical-align: middle;
}

.schedule-table tbody tr:last-child td {
    border-bottom: none;
}

.schedule-table__day {
    font-weight: 700;
    color: #2e4a7a;
    width: 2.5rem;
    white-space: nowrap;
}

.schedule-table__closed {
    text-align: center;
    width: 3rem;
}

.schedule-table__closed input[type="checkbox"] {
    width: auto;
    margin: 0;
}

.schedule-table__copy-cell {
    width: 2.4rem;
    text-align: center;
    padding: 0.2rem 0.3rem;
}

.schedule-table__copy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 0.4rem;
    background: var(--panel);
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1;
    cursor: pointer;
    transition: border-color 80ms ease, color 80ms ease, background 80ms ease;
}

.schedule-table__copy:hover {
    border-color: var(--primary-line);
    color: #1f3d78;
    background: var(--bg-page);
}

.schedule-table__copy:focus-visible {
    outline: 2px solid var(--primary-line);
    outline-offset: 1px;
}

/* Brief green confirmation flash after a successful copy-down. */
.schedule-table__copy--flash {
    animation: schedule-copy-flash 0.55s ease-out;
}

@keyframes schedule-copy-flash {
    0%   { background: var(--bg-page); border-color: var(--success); color: var(--success); }
    100% { background: var(--panel); border-color: var(--line); color: var(--text-secondary); }
}

.schedule-table input[type="time"] {
    width: 7rem;
    padding: 0.22rem 0.35rem;
    font-size: 0.82rem;
    border: 1px solid var(--line);
    border-radius: var(--control-radius, 6px);
    min-height: 0;
    line-height: 1.3;
}

.staff-row {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr auto;
    gap: 0.7rem;
    align-items: end;
    padding: 0.7rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--panel);
}

.flash {
    border-radius: var(--radius-md);
    padding: 0.75rem 0.9rem;
}

.flash--success {
    background: var(--bg-page);
    border: 1px solid var(--success-line);
    color: var(--success-text);
}

.flash--error {
    background: var(--bg-page);
    border: 1px solid var(--danger-line);
    color: var(--danger-text);
}

.flash--warning {
    background: var(--warning-bg, #fef6e0);
    border: 1px solid var(--warning-line);
    color: var(--warning, #8a6100);
}

.flash--info {
    background: var(--surface-soft);
    border: 1px solid var(--info-line);
    color: var(--info-text);
}

/* Public demo sandbox — slim persistent strip at the top of the workspace. */
.demo-banner {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin: 0 0 var(--space-md, 1rem);
    padding: 0.55rem 0.8rem;
    background: var(--accent-ghost, rgba(217, 139, 58, 0.1));
    border-left: 3px solid var(--accent, #d98b3a);
    border-radius: var(--radius-md, 6px);
    font-size: 0.85rem;
    line-height: 1.4;
    color: var(--text-secondary, #4a5568);
}

/* Admin writing inside the demo: green, not amber — the state is "live", not
   "sandboxed", and it must not read like the read-only notice next to it. */
.demo-banner--admin {
    background: var(--success-bg);
    border-left-color: var(--success);
    color: var(--success-text);
}

.demo-banner--admin .demo-banner__tag,
.demo-banner--admin .demo-banner__cta {
    color: var(--success-text);
}

.demo-banner__tag {
    font-weight: 700;
    font-size: 0.7rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--accent-hover, #c47b2e);
}

.demo-banner__text {
    flex: 1 1 auto;
    min-width: 12rem;
}

.demo-banner__cta {
    font-weight: 600;
    color: var(--accent-hover, #c47b2e);
    text-decoration: underline;
    white-space: nowrap;
}

/* Secondary banner action (guide) — muted so "Creeaza cont real" stays primary. */
.demo-banner__cta--ghost {
    color: var(--text-secondary, #4a5568);
    text-decoration: none;
}

.demo-banner__cta--ghost:hover {
    text-decoration: underline;
}

/* Login page: one-click entry into the demo sandbox. */
.auth-demo {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.4rem;
    margin-top: 0.9rem;
    padding-top: 0.9rem;
    border-top: 1px solid var(--line, #e2e7ee);
    text-align: center;
}

.auth-demo__hint {
    font-size: 0.8rem;
    color: var(--muted, #8694a7);
}

.auth-demo__btn {
    width: 100%;
}

.quick-form .flash {
    padding: 0.45rem 0.65rem;
    border-radius: 0.55rem;
    font-size: 0.93rem;
    line-height: 1.3;
    margin: 0;
}

.quick-form .flash ul {
    margin: 0;
    padding-left: 1rem;
}

.quick-form .flash li {
    margin: 0;
}

.table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 0.35rem;
}

.table th,
.table td {
    text-align: left;
    border-bottom: 1px solid var(--line);
    padding: 0.62rem 0.5rem;
    vertical-align: middle;
}

.table th {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
    padding-top: 0.7rem;
    padding-bottom: 0.7rem;
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--panel);
}

.table tbody tr {
    transition: background-color 0.15s ease;
}

.table tbody tr:nth-child(even) {
    background: #f8fafe;
}

.table tbody tr:hover {
    background: var(--bg-page);
}

.table-sort {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0;
    color: var(--text-secondary);
    text-decoration: none !important;
    white-space: nowrap;
    font-weight: 700;
    transition: color 160ms ease;
}

.table-sort:hover {
    color: var(--text);
}

.table-sort.is-active {
    color: #163f88;
}

.table-sort__icon {
    display: grid;
    place-items: center;
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 999px;
    background: var(--panel-soft);
    border: 1px solid var(--line);
    color: #7285ab;
    font-size: 0.76rem;
    line-height: 1;
    flex-shrink: 0;
    transition: background 160ms ease, color 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
    transform: translateY(-0.02rem);
}

.table-sort__icon::before {
    display: block;
    line-height: 1;
}

.table-sort:hover .table-sort__icon {
    background: var(--surface-soft);
    color: var(--link);
    border-color: #c2d3f7;
}

.table-sort.is-active .table-sort__icon {
    background: var(--primary-solid);
    color: var(--text-on-solid);
    border-color: var(--primary);
    box-shadow: 0 8px 18px rgba(44, 109, 245, 0.16);
}

.table-sort:not(.is-active) .table-sort__icon {
    font-size: 0;
}

.table-sort:not(.is-active) .table-sort__icon::before {
    content: '\2195';
    font-size: 0.8rem;
    line-height: 1;
}

.filters-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
    align-items: end;
}

.filters-grid > label {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    flex: 0 1 auto;
    min-width: 7rem;
}

.filters-grid > label > input,
.filters-grid > label > select {
    width: 100%;
}

.filters-grid > label > input[type="search"],
.filters-grid > label > input[type="text"] {
    min-width: 16rem;
}

.filters-grid > label > input[type="date"] {
    min-width: 9rem;
}

.filters-grid > label > select {
    min-width: 9rem;
}

/* Checkbox filter dropdown ("Furnizor" on Facturi primite). A closed control
   that reads like the selects next to it, opening a panel of checkboxes — one
   click per supplier, and a "Toti furnizorii" row that clears the filter in one
   go instead of unticking them one at a time. */
.filter-checks {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.filter-checks__label {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.filter-checks__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    min-width: 12rem;
    min-height: var(--control-min-height);
    padding: var(--control-padding-y) var(--control-padding-x);
    border: 1px solid var(--line);
    border-radius: var(--control-radius);
    background: var(--panel);
    color: var(--text);
    font: inherit;
    font-size: var(--control-font-size);
    line-height: var(--control-line-height);
    text-align: left;
    cursor: pointer;
}

/* The caret, so the control reads as "opens something" like a select does. */
.filter-checks__toggle::after {
    content: '';
    border: 5px solid transparent;
    border-top-color: var(--muted);
    margin-top: 3px;
    flex: none;
}

.filter-checks__toggle.is-open::after {
    border-top-color: transparent;
    border-bottom-color: var(--muted);
    margin-top: -3px;
}

.filter-checks__toggle:hover {
    border-color: var(--primary);
}

.filter-checks__toggle .is-filtered {
    color: var(--primary);
    font-weight: 600;
}

.filter-checks__panel {
    position: absolute;
    top: calc(100% + 0.35rem);
    left: 0;
    z-index: 1300;
    min-width: 100%;
    max-width: 22rem;
    max-height: 17rem;
    overflow-y: auto;
    padding: 0.3rem;
    border: 1px solid var(--line);
    border-radius: 0.8rem;
    background: var(--panel);
    box-shadow: var(--shadow), 0 12px 24px rgba(30, 42, 58, 0.14);
}

.filter-checks__row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.55rem;
    border-radius: var(--control-radius);
    font-size: var(--control-font-size);
    line-height: var(--control-line-height);
    white-space: nowrap;
    cursor: pointer;
}

.filter-checks__row:hover {
    background: var(--panel-soft);
}

.filter-checks__row input {
    flex: none;
    margin: 0;
}

.filter-checks__row > span {
    overflow: hidden;
    text-overflow: ellipsis;
}

.filter-checks__row--all {
    font-weight: 600;
    border-bottom: 1px solid var(--line-soft);
    border-radius: var(--control-radius) var(--control-radius) 0 0;
    margin-bottom: 0.2rem;
}

.filter-checks__count {
    margin-left: auto;
    padding-left: 0.6rem;
    color: var(--muted);
    font-size: 0.82rem;
}

.filter-checks__empty {
    margin: 0;
    padding: 0.5rem 0.55rem;
    font-size: 0.85rem;
}

.filters-actions {
    display: flex;
    gap: 0.45rem;
    align-items: center;
}

.bulk-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    align-items: center;
    padding: 0.55rem 0.7rem;
    border-radius: 0.7rem;
    border: 1px solid var(--line);
    background: var(--panel-soft);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.bulk-actions[hidden] {
    display: none !important;
}

.bulk-actions select {
    min-width: 13rem;
}

.bulk-actions__count {
    font-size: 0.8rem;
    color: var(--text-secondary);
    font-weight: 700;
}

.bulk-selection-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    padding: 0.65rem 0.8rem;
    border-radius: 0.8rem;
    border: 1px solid var(--line);
    background: var(--panel-soft);
}

.bulk-selection-bar[hidden] {
    display: none !important;
}

.bulk-selection-bar__info {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.bulk-selection-bar__count {
    font-size: 0.9rem;
    color: #1f3f77;
    font-weight: 800;
}

.bulk-selection-bar__hint {
    font-size: 0.78rem;
    color: var(--text-secondary);
    font-weight: 600;
}

.bulk-selection-bar__actions {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}

/* Bulk buttons start disabled (nothing selected yet) and some stay disabled
   for the whole page (an action whose prerequisite isn't configured). Without
   a disabled state they read as clickable and simply do nothing — scoped to
   these bars so no other button styling shifts. */
.bulk-selection-bar button:disabled,
.bulk-actions button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.bulk-editor {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.35rem 0.45rem;
    border-radius: 0.68rem;
    border: 1px solid var(--line);
    background: var(--panel);
}

.bulk-editor__row {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: wrap;
}

.bulk-editor__label {
    display: inline-flex;
    align-items: center;
    font-size: 0.8rem;
    color: var(--text);
    font-weight: 700;
    white-space: nowrap;
}

.bulk-editor__input {
    min-width: 8rem;
    min-height: 2.1rem;
    border-radius: 0.58rem;
    border: 1px solid #c6d4ec;
    padding: 0.3rem 0.55rem;
    font: inherit;
    color: var(--text);
    background: var(--panel);
}

.table-check-col {
    width: 2.8rem;
    text-align: center;
    white-space: nowrap;
}

.table-check-col input[type='checkbox'] {
    margin: 0;
    width: 1.05rem;
    height: 1.05rem;
    accent-color: #2c6df5;
    cursor: pointer;
}

.table tbody tr.is-selected {
    background: var(--surface-soft);
}

.table tbody tr.is-selected:hover {
    background: var(--line);
}

.sort-direction {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 2.15rem;
}

.sort-direction > span {
    font-size: 0.78rem;
    color: var(--text-secondary);
    font-weight: 700;
    white-space: nowrap;
}

.sort-direction__buttons {
    display: inline-flex;
    gap: 0.35rem;
}

.sort-direction__buttons .btn {
    min-width: 2.1rem;
    padding-inline: 0.5rem;
}

.sort-direction__buttons .btn.is-active {
    border-color: var(--primary);
    background: var(--bg-page);
    color: var(--primary-strong);
}

div.table-actions {
    display: inline-flex;
    gap: 0.35rem;
    align-items: center;
    flex-wrap: wrap;
}

.table td.table-actions {
    white-space: nowrap;
    width: 1%;
}

.table td.table-actions > .btn {
    margin-right: 0.35rem;
}

.table td.table-actions > form {
    display: inline-block;
    margin: 0;
}

/* Compact grid: DESIGN.md table-cell size (13.5px), tighter rows. */
.table--consultations td {
    vertical-align: top;
    padding-top: 0.45rem;
    padding-bottom: 0.45rem;
    font-size: 0.9rem;
}

.table--consultations .consultation-list-cell__title {
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.3;
}

.table--consultations .consultation-list-cell__meta {
    font-size: 0.8rem;
    line-height: 1.35;
}

/* Date + time on one line, digits aligned down the column. */
.consultation-list-cell__title--date {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.table--consultations .consultation-list-status {
    margin-top: 0.2rem;
}

.consultation-list-cell {
    display: grid;
    gap: 0.22rem;
}

.consultation-list-cell--status {
    min-width: 10rem;
}

.consultation-list-cell__title {
    display: block;
    color: var(--text);
    font-weight: 800;
    line-height: 1.35;
}

.consultation-list-cell__title--link {
    color: var(--primary-strong);
}

.consultation-list-cell__title-link {
    color: var(--primary-strong);
    text-decoration: none;
}

.consultation-list-cell__title-link .consultation-list-cell__title {
    color: inherit;
}

.consultation-list-cell__title-link:hover .consultation-list-cell__title,
.consultation-list-cell__title-link:focus-visible .consultation-list-cell__title {
    color: var(--primary-text);
    text-decoration: none;
}

.consultation-list-cell__meta {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.82rem;
    line-height: 1.4;
}

.consultation-list-dx {
    display: grid;
    gap: 0.5rem;
}

.consultation-list-dx__item {
    display: grid;
    gap: 0.08rem;
}

.consultation-list-dx__label {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--muted);
}

.consultation-list-dx__value {
    font-size: 0.84rem;
    line-height: 1.35;
    color: var(--text-secondary);
    word-break: break-word;
}

.consultation-list-dx__value--confirmed {
    font-weight: 800;
    color: var(--text);
}

.consultation-list-hover-panel {
    position: fixed;
    z-index: 1200;
    width: clamp(22rem, 70vw, 64rem);
    max-width: calc(100vw - 2rem);
    max-height: calc(100vh - 2.5rem);
    overflow: auto;
    padding: 1rem 1.1rem;
    border: 1px solid var(--line);
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 1.25rem 2.5rem rgba(21, 41, 76, 0.18);
    backdrop-filter: blur(8px);
}

.consultation-list-hover-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.85rem;
    color: var(--text);
    font-size: 0.76rem;
}

.consultation-list-hover-card__header strong {
    font-size: 0.9rem;
}

.consultation-list-hover-card__header-main {
    display: grid;
    gap: 0.18rem;
}

.consultation-list-hover-card__identity {
    color: var(--text-secondary);
    font-size: 0.82rem;
    line-height: 1.35;
}

.consultation-list-hover-card__header-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
}

.consultation-list-hover-card__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--panel);
    color: var(--info-text);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
}

.consultation-list-hover-card__close:hover,
.consultation-list-hover-card__close:focus-visible {
    border-color: var(--info-line);
    background: var(--panel-soft);
    outline: none;
}

.consultation-list-hover-card__section + .consultation-list-hover-card__section {
    margin-top: 0.9rem;
    padding-top: 0.9rem;
    border-top: 1px solid var(--line-soft);
}

.consultation-list-hover-card__label {
    margin: 0 0 0.45rem;
    color: var(--text);
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.02em;
}

/* On /consultatii/lista the panel is a direct child of <body>, but a grid that
   mounts it inside its own .panel (the "Recenzii de trimis" tab) drags in the
   global `.panel p { color: var(--muted) }` rule — more specific than the class
   above, so section labels would grey out and the card's hierarchy would flatten.
   Re-assert them through the panel so the card looks the same wherever it hangs. */
.consultation-list-hover-panel .consultation-list-hover-card__label {
    color: var(--text);
}

.consultation-list-hover-panel .consultation-list-hover-card__identity {
    color: var(--text-secondary);
}

.consultation-list-hover-card__content {
    color: var(--text);
    font-size: 0.83rem;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.consultation-list-hover-card__content > :first-child {
    margin-top: 0;
}

.consultation-list-hover-card__content > :last-child {
    margin-bottom: 0;
}

.consultation-list-hover-card__content p,
.consultation-list-hover-card__content ul,
.consultation-list-hover-card__content ol,
.consultation-list-hover-card__content blockquote,
.consultation-list-hover-card__content h3,
.consultation-list-hover-card__content h4 {
    margin-top: 0;
    margin-bottom: 0.45rem;
}

.consultation-list-hover-card__content ul,
.consultation-list-hover-card__content ol {
    padding-left: 1.1rem;
}

.consultation-list-hover-card__empty {
    margin: 0;
    color: #6f809b;
    font-size: 0.82rem;
    line-height: 1.4;
}

.consultation-list-hover-card__sale-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.55rem;
}

.consultation-list-hover-card__sale-meta {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.78rem;
    line-height: 1.35;
}

.consultation-list-hover-card__sale-total {
    color: var(--text);
    font-size: 0.86rem;
    white-space: nowrap;
}

.consultation-list-hover-card__sale-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.45rem;
}

.consultation-list-hover-card__sale-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.85rem;
    padding: 0.55rem 0.6rem;
    border-radius: 0.85rem;
    background: var(--panel-soft);
    color: var(--text);
    font-size: 0.79rem;
    line-height: 1.35;
}

.consultation-list-hover-card__sale-item strong {
    display: block;
    margin-top: 0.12rem;
}

.consultation-list-hover-card__sale-item > span:last-child {
    color: var(--text-secondary);
    text-align: right;
    white-space: nowrap;
}

.consultation-list-hover-card__sale-type {
    display: inline-flex;
    align-items: center;
    padding: 0.14rem 0.42rem;
    border-radius: 999px;
    background: var(--bg-page);
    color: var(--primary-text);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.consultation-list-hover-card__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.32rem;
    margin-top: 0.5rem;
}

.consultation-list-hover-card__chip {
    display: inline-flex;
    align-items: center;
    padding: 0.18rem 0.55rem;
    border-radius: 999px;
    background: var(--bg-page);
    color: var(--text);
    font-size: 0.72rem;
    font-weight: 600;
    white-space: nowrap;
}

.consultation-list-hover-card__facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
    gap: 0.4rem 0.8rem;
    margin-top: 0.55rem;
    padding: 0.55rem 0.7rem;
    border-radius: 0.55rem;
    background: var(--panel-soft);
    border: 1px solid var(--line);
}

.consultation-list-hover-card__facts > div {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.consultation-list-hover-card__facts span {
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.consultation-list-hover-card__facts strong {
    font-size: 0.86rem;
    font-weight: 700;
    color: var(--text);
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
}

.consultation-list-hover-card__vitals {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(5rem, 1fr));
    gap: 0.35rem;
    margin-top: 0.55rem;
}

.consultation-list-hover-card__vitals > div {
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
    padding: 0.35rem 0.5rem;
    border-radius: 0.45rem;
    background: var(--panel);
    border: 1px solid var(--line);
    text-align: center;
}

.consultation-list-hover-card__vitals span {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.consultation-list-hover-card__vitals strong {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text);
}

.consultation-list-hover-card__split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.7rem 1rem;
    margin-top: 0.55rem;
}

.consultation-list-hover-card__split > .consultation-list-hover-card__section {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

.consultation-list-hover-card__footer-meta {
    margin: 0.6rem 0 0;
    font-size: 0.72rem;
    color: var(--text-secondary);
}

.consultation-list-hover-card__lab-template {
    margin: 0.55rem 0 0.3rem;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text);
}

.consultation-list-hover-card__lab-template:first-of-type {
    margin-top: 0.25rem;
}

.consultation-list-hover-card__lab-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.78rem;
    color: var(--text);
}

.consultation-list-hover-card__lab-table th,
.consultation-list-hover-card__lab-table td {
    padding: 0.3rem 0.45rem;
    text-align: left;
    border-bottom: 1px solid var(--line-soft);
    vertical-align: middle;
}

.consultation-list-hover-card__lab-table th {
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-secondary);
    background: var(--panel-soft);
}

.consultation-list-hover-card__lab-table tr:last-child td {
    border-bottom: 0;
}

.consultation-list-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.32rem;
}

.consultation-list-chip {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 0.16rem 0.52rem;
    border: 1px solid transparent;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.3;
    white-space: nowrap;
}

.consultation-list-chip--source {
    color: #6742b0;
    background: var(--bg-page);
    border-color: #ddcdfb;
}

.consultation-list-chip--sale {
    color: var(--success-text);
    background: var(--panel-soft);
    border-color: #bfe9d2;
}

.consultation-list-chip--consent {
    color: var(--primary-text);
    background: var(--bg-page);
    border-color: var(--line);
}

.consultation-list-chip--document {
    color: var(--text-secondary);
    background: var(--panel-soft);
    border-color: var(--line);
}

.consultation-list-chip--source {
    width: fit-content;
}

.tag {
    display: inline-flex;
    align-items: center;
    padding: 0.18rem 0.5rem;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--panel-soft);
    color: var(--info-text);
    font-size: 0.74rem;
    font-weight: 600;
    margin: 0.1rem 0.15rem 0.1rem 0;
}

/* Tag rendered as a button (e.g. click-to-insert variable list).
   Reset native button chrome, then add a subtle interactive hint:
   the cursor turns into a pointer and the chip lifts on hover/focus. */
button.tag--clickable {
    font-family: inherit;
    cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease, transform 0.08s ease;
}

button.tag--clickable:hover {
    background: var(--surface-soft);
    border-color: var(--info-line);
}

button.tag--clickable:active {
    transform: translateY(1px);
}

button.tag--clickable:focus-visible {
    outline: 2px solid var(--focus, #2563eb);
    outline-offset: 2px;
}

.tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}

/* Days-to-expiry badge on the /expirare grid. Left-border rectangle per the
   design system (no pills) — red = already past BBD / expires today, amber =
   upcoming within the selected interval. Tinted with the shared status tokens
   so both themes track automatically. */
.expiry-badge {
    display: inline-block;
    padding: 0.12rem 0.4rem;
    border-left: 2.5px solid transparent;
    border-radius: 4px;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
}

.expiry-badge--danger {
    border-left-color: var(--danger);
    background: var(--danger-bg);
    color: var(--danger);
}

.expiry-badge--warn {
    border-left-color: var(--warning);
    background: var(--warning-bg);
    color: var(--warning);
}

.details-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.75rem 1rem;
}

/* Notification journal — compact table with expandable detail rows */
.notif-log-table {
    font-size: 0.82rem;
}

.notif-log-row:hover {
    background: var(--panel-soft);
}

.notif-log-row__toggle {
    font-size: 0.7rem;
    color: var(--muted, #9ca3af);
    text-align: center;
}

.notif-status {
    display: inline-block;
    padding: 0.1rem 0.4rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.notif-status--success { background: #dcfce7; color: var(--success-text); }
.notif-status--danger { background: var(--danger-bg); color: var(--danger-text); }
.notif-status--info { background: var(--line); color: var(--primary-text); }
.notif-status--muted { background: var(--bg-page); color: var(--text-secondary); }

.notif-log-detail__body {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    padding: 0.5rem 0;
    font-size: 0.78rem;
}

.notif-log-detail__grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem 1.2rem;
}

.notif-log-detail__error {
    padding: 0.3rem 0.5rem;
    background: var(--bg-page);
    border-left: 3px solid var(--danger);
    border-radius: 0 0.3rem 0.3rem 0;
    font-size: 0.75rem;
    color: var(--danger-text);
}

.notif-log-detail__attempts {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.notif-log-attempt {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
}

.panel--muted {
    background: rgba(237, 243, 252, 0.8);
    border: 1px solid rgba(197, 213, 235, 0.95);
    border-radius: 14px;
    padding: 0.85rem 1rem;
}

.consult-note-card {
    margin-top: 0.9rem;
    padding: 0.9rem 1rem;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--panel-soft);
}

.consult-note-card p {
    margin: 0.45rem 0 0;
    color: var(--text-secondary);
}

.import-provider-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(0, 2fr) minmax(18rem, 1fr);
}

.import-provider-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}

.import-provider-list {
    display: grid;
    gap: 0.75rem;
}

.import-provider-list__item {
    display: grid;
    gap: 0.2rem;
    padding: 0.9rem 1rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.75);
}

@media (max-width: 960px) {
    .import-provider-grid {
        grid-template-columns: 1fr;
    }

    .import-provider-card__header {
        flex-direction: column;
    }
}

.color-chip {
    --chip-color: #2c6df5;
    width: 0.95rem;
    height: 0.95rem;
    border-radius: 50%;
    display: inline-block;
    vertical-align: middle;
    margin-right: 0.35rem;
    border: 1px solid rgba(12, 22, 38, 0.16);
    background: var(--chip-color);
}

.pagination {
    display: flex;
    gap: 0.35rem;
    flex-wrap: wrap;
    align-items: center;
}

/* Header strip at the top of every grid panel: total count on the left,
 * per-page selector on the right. */
.grid-header-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    padding-bottom: 0.25rem;
}

.grid-header-meta__count {
    font-size: 0.95rem;
    color: var(--color-text-muted, #4b5563);
}

.grid-header-meta__count strong {
    color: var(--color-text, #111827);
    font-size: 1.05rem;
}

/* Infinite-scroll loader that replaces the prev/next pagination bar on every
 * grid. Sits at the bottom of the grid panel and contains a status line, a
 * transient spinner row, and an invisible sentinel that drives the
 * IntersectionObserver in infinite_scroll_grid_controller.js. */
.grid-loader {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    padding: 0.85rem 0.25rem 0.2rem;
    color: var(--text-secondary);
    font-size: 0.85rem;
    text-align: center;
}

.grid-loader__status {
    min-height: 1.25rem;
    font-weight: 600;
}

.grid-loader__spinner {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.8rem;
    color: var(--info-text);
}

.grid-loader__spinner[hidden] {
    display: none !important;
}

.grid-loader__spinner-dot {
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 50%;
    border: 2px solid var(--info-line);
    border-top-color: var(--primary);
    animation: grid-loader-spin 0.75s linear infinite;
}

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

.grid-loader__sentinel {
    width: 100%;
    height: 1px;
    pointer-events: none;
}

.pagination__info {
    font-size: 0.8rem;
    color: var(--text-secondary);
    font-weight: 600;
    margin-right: 0.5rem;
}

.pagination__item--prev,
.pagination__item--next {
    font-weight: 700;
}

.pagination__item--ellipsis {
    border-color: transparent;
    background: transparent;
    cursor: default;
    pointer-events: none;
    color: var(--muted);
}

.pagination__item:not(.is-active):not(.pagination__item--ellipsis):hover {
    background: var(--bg-page);
    border-color: var(--info-line);
}

form.pagination-page-size {
    display: inline-flex !important;
    align-items: center;
    gap: 0.3rem;
    width: fit-content !important;
    max-width: 100%;
    margin: 0 0 0.36rem;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.pagination-page-size__label {
    display: inline-flex;
    align-items: center;
    margin: 0;
    font-size: 0.69rem;
    color: var(--text-secondary);
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
}

form.pagination-page-size select.pagination-page-size__select {
    width: 4.15rem !important;
    min-width: 4.15rem !important;
    max-width: 4.15rem !important;
    min-height: 1.65rem !important;
    height: 1.65rem;
    flex: 0 0 auto;
    border-radius: 0.45rem;
    border: 1px solid var(--line);
    background: var(--panel);
    color: var(--text);
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1;
    padding: 0.12rem 0.35rem;
}

form.pagination-page-size select.pagination-page-size__select:focus {
    outline: 3px solid rgba(44, 109, 245, 0.16);
    border-color: var(--primary-line);
}

.pagination__item {
    display: inline-flex;
    min-width: 2rem;
    justify-content: center;
    padding: 0.35rem 0.5rem;
    border: 1px solid var(--line);
    border-radius: 0.55rem;
    text-decoration: none;
    color: var(--text);
    background: var(--panel);
    font-weight: 600;
}

.pagination__item.is-active {
    border-color: var(--primary-line);
    background: var(--bg-page);
    color: var(--primary-strong);
}

/* Client-side pager under the small history grids on the client / pet
 * detail pages (local_paginate_controller.js). Reuses the grid pagination
 * look, rendered as buttons instead of links. */
.pagination--local {
    justify-content: center;
    padding-top: 0.15rem;
}

button.pagination__item {
    cursor: pointer;
    font: inherit;
    font-size: 0.85rem;
    font-weight: 600;
}

button.pagination__item:disabled {
    opacity: 0.45;
    cursor: default;
    pointer-events: none;
}

/* Rows off the current page. The !important beats item styles that re-set
 * display (e.g. .pv-timeline__item { display: grid }), which would otherwise
 * override the UA [hidden] rule. */
[data-local-paginate-target='list'] > [hidden] {
    display: none !important;
}

.detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.consult-view {
    display: grid;
    gap: 1.15rem;
}

.consult-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(18rem, 1fr);
    gap: 0.9rem;
    align-items: stretch;
}

.consult-hero__main {
    display: grid;
    gap: 0.55rem;
    padding: 1rem 1.05rem;
    border: 1px solid var(--line);
    border-radius: 1rem;
    background: linear-gradient(135deg, var(--panel) 0%, var(--panel-soft) 100%);
}

.consult-hero__eyebrow {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.consult-hero__main h2 {
    margin: 0;
    color: var(--text);
    font-size: 1.7rem;
    line-height: 1.08;
}

.consult-hero__subtitle,
.consult-hero__meta {
    margin: 0;
    color: var(--text-secondary);
    line-height: 1.45;
}

.consult-hero__subtitle {
    font-size: 0.98rem;
}

.consult-hero__meta {
    font-size: 0.9rem;
}

.consult-hero__stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
}

.consult-kpi-card {
    display: grid;
    align-content: start;
    gap: 0.38rem;
    padding: 0.95rem 1rem;
    border: 1px solid var(--line);
    border-radius: 1rem;
    background: linear-gradient(180deg, var(--panel) 0%, var(--panel-soft) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

.consult-kpi-card span {
    color: #667a98;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.consult-kpi-card strong {
    color: var(--text);
    font-size: 1rem;
    line-height: 1.35;
}

.consult-overview-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.75fr) minmax(19rem, 0.95fr);
    gap: 1rem;
    align-items: start;
}

.consult-overview-layout__main,
.consult-overview-layout__side {
    display: grid;
    gap: 1rem;
}

.consult-overview-layout__side {
    position: sticky;
    top: 1rem;
}

.consult-block {
    border: 1px solid var(--line);
    border-radius: 0.95rem;
    padding: 0.95rem;
    background: linear-gradient(180deg, var(--panel) 0%, var(--panel-soft) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.consult-block--compact {
    padding: 0.85rem 0.9rem;
}

.consult-block__title {
    font-size: 1.14rem;
    color: var(--text);
    margin-bottom: 0.68rem;
    letter-spacing: 0.01em;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
}

.section-collapse__toggle {
    border: 1px solid var(--line);
    background: var(--panel-soft);
    color: var(--text);
    border-radius: 999px;
    padding: 0.18rem 0.56rem;
    font-size: 0.76rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    cursor: pointer;
}

.section-collapse__toggle:hover {
    background: var(--surface-soft);
    border-color: var(--info-line);
}

.is-collapsed {
    padding-bottom: 0.65rem !important;
}

.consult-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.7rem;
}

.consult-summary--compact {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.consult-summary__item {
    border: 1px solid var(--line);
    border-radius: 0.82rem;
    background: var(--panel);
    padding: 0.65rem 0.72rem;
    min-height: 4.05rem;
}

.consult-summary__item--wide {
    grid-column: span 3;
}

.consult-summary__label {
    color: var(--text-secondary);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.035em;
    margin-bottom: 0.26rem;
}

.consult-summary__value {
    color: var(--text);
    font-size: 1.06rem;
    font-weight: 600;
    line-height: 1.42;
}

.consult-summary__label--subtle {
    margin-top: 0.4rem;
}

.consult-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.consult-tag {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.5rem;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--bg-page);
    color: var(--text);
    font-size: 0.82rem;
    font-weight: 600;
}

.consult-tag--muted {
    background: var(--panel-soft);
    border-color: var(--line);
    color: var(--text-secondary);
}

.consult-rich {
    display: grid;
    gap: 0.72rem;
    grid-template-columns: 1fr;
}

.consult-overview-layout__main .consult-rich {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.consult-rich__item {
    border: 1px solid var(--line);
    border-radius: 0.8rem;
    background: var(--panel);
    padding: 0.74rem 0.82rem;
    min-height: 5.3rem;
}

.consult-rich__item--full {
    grid-column: 1 / -1;
}

.consult-rich__item h4 {
    margin: 0 0 0.42rem;
    color: var(--text);
    font-size: 0.98rem;
}

.consult-rich__item > div {
    color: var(--text);
    line-height: 1.62;
    font-size: 0.98rem;
}

.consult-rich__item > div p {
    margin: 0 0 0.55rem;
}

.consult-rich__item > div p:last-child {
    margin-bottom: 0;
}

.consult-objective-list {
    margin-top: 0.5rem;
    padding-top: 0.45rem;
    border-top: 1px dashed var(--line);
}

.consult-objective-list p {
    margin: 0 0 0.2rem;
    color: var(--text);
    font-size: 0.9rem;
}

.consult-info-list {
    display: grid;
    gap: 0.7rem;
}

.consult-info-list div {
    display: grid;
    gap: 0.18rem;
    padding-bottom: 0.68rem;
    border-bottom: 1px solid var(--line);
}

.consult-info-list div:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.consult-info-list span {
    color: #697d9c;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.consult-info-list strong {
    color: var(--text);
    font-size: 0.95rem;
    line-height: 1.4;
}

.consult-vitals-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem;
}

.consult-vital-pill {
    display: grid;
    gap: 0.15rem;
    padding: 0.65rem 0.72rem;
    border: 1px solid var(--line);
    border-radius: 0.85rem;
    background: var(--panel);
}

.consult-vital-pill span {
    color: var(--text-secondary);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.consult-vital-pill strong {
    color: var(--text);
    font-size: 0.95rem;
    line-height: 1.35;
}

.resource-toolbar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    padding-bottom: 0.2rem;
}

.resource-toolbar h3 {
    margin: 0;
    font-size: 1.04rem;
}

.resource-toolbar p {
    margin-top: 0.22rem;
    font-size: 0.9rem;
}

.filters-grid--compact {
    grid-template-columns: 2fr 1fr 1fr auto;
}

.pet-card {
    display: grid;
    gap: 0.8rem;
}

.pet-card__hero {
    display: grid;
    grid-template-columns: minmax(0, 10rem) minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

.pet-card__photo {
    display: grid;
    gap: 0.7rem;
    align-content: start;
}

.form-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.form-grid--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.form-grid--5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.date-range-filter__custom {
    grid-column: span 2;
    display: grid;
    align-content: start;
}

.date-range-filter__custom.is-hidden {
    display: none;
}

.date-range-filter__range {
    margin-top: 0;
    padding: 0.75rem;
    border: 1px solid var(--line);
    border-radius: 0.75rem;
    background: var(--panel-soft);
}

.date-range-filter__help {
    margin-top: -0.1rem;
}

.product-form {
    --control-font-size: 0.95rem;
    --control-min-height: 2.45rem;
    --control-padding-y: 0.48rem;
    --control-padding-x: 0.72rem;
}

.product-form label {
    font-size: 0.82rem;
    gap: 0.26rem;
}

.product-form .form-grid {
    margin-top: 0.55rem;
    gap: 0.55rem 0.68rem;
}

.product-form h3 {
    font-size: 1.05rem;
}

.product-price-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.product-price-grid > div:first-child {
    grid-column: 1 / -1;
    max-width: 12rem;
}

.product-settings-grid {
    align-items: start;
}

.pet-card .radio-group {
    display: flex;
    gap: 0.6rem;
}

.pet-photo-box,
.pet-photo-inline {
    border: 1px solid var(--line);
    background: var(--panel);
    object-fit: cover;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    font-weight: 700;
}

.pet-photo-box {
    width: 100%;
    max-width: 10rem;
    aspect-ratio: 1;
    border-radius: 1rem;
    overflow: hidden;
}

.pet-photo-box--large {
    max-width: 12rem;
}

.pet-photo-box--empty {
    background: var(--panel-soft);
    font-size: 1.5rem;
    letter-spacing: 0.08em;
}

.pet-photo-inline {
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 0.8rem;
    overflow: hidden;
    flex: 0 0 auto;
}

.pet-photo-inline--tiny {
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 999px;
    font-size: 0.72rem;
}

.pet-photo-inline--empty {
    background: var(--panel-soft);
}

/* An animal's standing state rides on its profile icon as a corner badge:
   😇 when it has died, 😈 when it is flagged aggressive. Deceased wins — a
   dead animal cannot bite, and both want the same corner.

   Emoji rather than drawn marks, and specifically these two: the project is
   pinned to Unicode 6.0 / Emoji 1.0 glyphs because anything newer renders as
   tofu on the clinic-issued Android phones (see OwnerAppPayloadBuilder's
   SPECIES_EMOJI note). 🪽 would have suited the wing better but it is a 2022
   addition and would show as a box.

   Badges sit on top of the icon rather than beside it, so unlike the drawn
   marks they need no horizontal room reserved and can never collide with the
   animal's name. */
.pet-photo-frame {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
}

.pet-badge {
    position: absolute;
    top: -12%;
    right: -12%;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    /* A disc behind the glyph: the icon underneath may be a photo of any
       colour, and the emoji alone can land on something the same hue. */
    background: var(--panel);
    border-radius: 999px;
    padding: 0.08em;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.16);
    font-size: 1rem;
    line-height: 1;
    cursor: default;
}

/* Sized per icon variant. The badge follows the icon in the DOM, so the
   sibling combinator picks up the size the macro asked for. */
.pet-photo-inline--tiny ~ .pet-badge { font-size: 0.72rem; }

/* Held back from scaling with the 6.5rem icon: at full proportion the badge
   crosses into the hero's text column and sits on the eyebrow. */
.pv-hero--pet .pet-badge { font-size: 1.5rem; top: -8%; right: -8%; }

.pet-inline,
.pet-list-link {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
}

.pet-list-link {
    font-weight: 600;
}

.client-pet-list {
    list-style: none;
    padding-left: 0;
    margin-top: 0;
    margin-bottom: 0;
}

.client-pet-list__item + .client-pet-list__item {
    margin-top: 0.45rem;
}

.client-pet-list .pet-list-link {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
}

.client-consent-badges {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.35rem;
    flex-wrap: wrap;
}

.client-profile-panel {
    background: linear-gradient(180deg, var(--panel) 0%, var(--panel-soft) 100%);
    border-color: var(--line);
}

.client-show-split {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

.notif-dispatch-scroll {
    max-height: 420px;
    overflow-y: auto;
    border: 1px solid var(--line);
    border-radius: 10px;
}

.notif-dispatch-scroll .table thead th {
    position: sticky;
    top: 0;
    background: var(--surface, #fff);
    z-index: 1;
}

:root[data-theme='dark'] .notif-dispatch-scroll .table thead th {
    background: var(--surface, #0f151e);
}

.client-show-split > .panel {
    margin: 0;
}

.client-show-split__chat {
    position: sticky;
    top: 1rem;
    max-height: calc(100vh - 2rem);
    display: flex;
    flex-direction: column;
}

/* The included thread panel wraps everything in .wa-chat. Without this the
   column's max-height never reaches .wa-thread (intermediate flex item keeps
   its default min-height:auto and grows to fit all messages), so the thread
   overflows the sticky column and bleeds over the page instead of scrolling
   internally. min-height:0 lets it shrink; the inner .wa-thread then scrolls. */
.client-show-split__chat .wa-chat {
    flex: 1 1 auto;
    min-height: 0;
}

.client-show-split__chat .wa-thread {
    flex: 1 1 auto;
    max-height: none;
    min-height: 0;
}

@media (max-width: 1100px) {
    .client-show-split {
        grid-template-columns: minmax(0, 1fr);
    }
    .client-show-split__chat {
        position: static;
        max-height: none;
    }
    .client-show-split__chat .wa-thread {
        max-height: 560px;
    }
}

.client-profile-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
}

.client-profile-eyebrow {
    margin: 0;
    font-size: 0.73rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: #6d7f9d;
    font-weight: 800;
}

.client-profile-title {
    margin: 0.2rem 0 0.42rem;
    color: var(--text);
    font-size: clamp(1.35rem, 2vw, 1.8rem);
    line-height: 1.15;
}

.client-profile-badges {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.client-profile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 0.68rem;
}

.client-profile-item {
    border: 1px solid var(--line);
    border-radius: 0.9rem;
    background: var(--panel);
    padding: 0.7rem 0.8rem;
}

.client-profile-item--wide {
    grid-column: span 2;
}

.client-profile-item__label {
    margin: 0 0 0.22rem;
    color: var(--text-secondary);
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.client-profile-item__value {
    margin: 0;
    color: var(--text);
    font-size: 1.01rem;
    font-weight: 600;
    line-height: 1.35;
    word-break: break-word;
}

.client-profile-notes {
    border: 1px solid var(--line);
    border-radius: 0.95rem;
    background: linear-gradient(180deg, var(--panel) 0%, var(--panel-soft) 100%);
    padding: 0.9rem 1rem;
}

.client-profile-notes__head h3 {
    margin: 0 0 0.45rem;
    color: var(--text);
}

.client-profile-notes p {
    margin: 0;
    color: var(--text-secondary);
    line-height: 1.55;
}

@media (max-width: 900px) {
    .client-profile-head {
        flex-direction: column;
        align-items: stretch;
    }

    .client-profile-item--wide {
        grid-column: span 1;
    }
}

.pet-profile {
    display: grid;
    grid-template-columns: minmax(0, 12rem) minmax(0, 1fr);
    gap: 1.2rem;
    align-items: start;
}

.pet-profile__media {
    display: flex;
    justify-content: center;
}

.pet-view {
    display: grid;
    gap: 1rem;
    background: linear-gradient(180deg, var(--panel) 0%, var(--panel-soft) 100%);
    border: 1px solid var(--line);
}

.pet-view__hero {
    display: grid;
    grid-template-columns: minmax(0, 11rem) minmax(0, 1.45fr) minmax(16rem, 0.95fr);
    gap: 1rem;
    align-items: start;
}

.pet-view__hero--no-stats {
    grid-template-columns: minmax(0, 11rem) minmax(0, 1fr);
}

.pet-view__media {
    display: flex;
    justify-content: center;
    align-items: center;
    width: fit-content;
    justify-self: center;
    padding: 0.45rem;
    border: 1px solid var(--line);
    border-radius: 1.15rem;
    background: linear-gradient(155deg, var(--panel) 0%, var(--bg-page) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
}

.pet-view__media .pet-photo-box--large {
    width: clamp(8.6rem, 16vw, 10rem);
    height: clamp(8.6rem, 16vw, 10rem);
    max-width: none;
    border-radius: 1rem;
    border: 2px solid var(--line-soft);
    object-fit: cover;
    object-position: center;
    box-shadow: 0 12px 24px rgba(31, 58, 104, 0.2);
}

.pet-view__media .pet-photo-box--large.pet-photo-box--empty {
    background: radial-gradient(circle at 28% 20%, var(--panel-soft) 0%, var(--bg-page) 55%, var(--surface-soft) 100%);
    color: #2f4a75;
    font-size: 2rem;
    letter-spacing: 0.05em;
}

img.pet-photo-box {
    display: block;
}

.pet-photo-link {
    display: inline-block;
    cursor: zoom-in;
    border-radius: 1rem;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.pet-photo-link:hover,
.pet-photo-link:focus-visible {
    transform: scale(1.02);
    outline: none;
}

.pet-view__hero-main {
    display: grid;
    gap: 0.5rem;
    padding: 0.95rem 1rem;
    border: 1px solid var(--line);
    border-radius: 1rem;
    background: linear-gradient(180deg, var(--panel) 0%, var(--panel-soft) 100%);
    align-content: start;
}

.pet-view__eyebrow {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.pet-view__hero-main h2 {
    margin: 0;
    color: var(--text);
    font-size: 1.75rem;
    line-height: 1.08;
}

.pet-view__subtitle,
.pet-view__meta {
    margin: 0;
    color: var(--text-secondary);
    line-height: 1.45;
}

.pet-view__subtitle {
    font-size: 1rem;
}

.pet-view__meta {
    font-size: 0.92rem;
}

.pet-hero-metrics {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.45rem;
}

.pet-hero-metric {
    display: grid;
    gap: 0.08rem;
    padding: 0.45rem 0.55rem;
    border: 1px solid var(--line);
    border-radius: 0.75rem;
    background: var(--panel-soft);
}

.pet-hero-metric span {
    color: var(--text-secondary);
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.pet-hero-metric strong {
    color: var(--text);
    font-size: 0.9rem;
    line-height: 1.25;
}

.pet-hero-metric--age {
    border-color: var(--info-line);
    background: var(--bg-page);
}

.pet-hero-metric--weight {
    border-color: #b9e0d4;
    background: var(--panel-soft);
}

.pet-hero-metric--ok {
    border-color: var(--success-line);
    background: var(--bg-page);
}

.pet-hero-metric--off {
    border-color: var(--line);
    background: var(--panel-soft);
}

.pet-hero-metric--danger {
    border-color: var(--danger-line);
    background: var(--bg-page);
}

.pet-hero-metric--calm {
    border-color: var(--success-line);
    background: var(--panel-soft);
}

.pet-view__hero-stats {
    display: grid;
    gap: 0.55rem;
    align-content: start;
}

.pet-kpi-card {
    display: grid;
    gap: 0.28rem;
    padding: 0.72rem 0.8rem;
    border: 1px solid var(--line);
    border-radius: 0.85rem;
    background: linear-gradient(180deg, var(--panel) 0%, var(--panel-soft) 100%);
}

.pet-kpi-card span {
    color: var(--text-secondary);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.pet-kpi-card strong {
    color: var(--text);
    font-size: 1.04rem;
    line-height: 1.3;
}

.pet-kpi-card small {
    color: var(--text-secondary);
    font-size: 0.8rem;
    line-height: 1.35;
}

.pet-view__layout {
    display: grid;
    grid-template-columns: minmax(0, 1.75fr) minmax(18rem, 0.95fr);
    gap: 1rem;
    align-items: start;
}

.pet-view__main,
.pet-view__side {
    display: grid;
    gap: 1rem;
}

.pet-view__side {
    position: sticky;
    top: 1rem;
}

.pet-view__nested-card {
    padding: 0.85rem 0.9rem;
    background: var(--panel);
}

.pet-consult-timeline {
    display: grid;
    gap: 0.5rem;
}

.pet-consult-timeline__item {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) auto auto;
    align-items: center;
    gap: 0.65rem;
    padding: 0.55rem 0.65rem;
    border: 1px solid var(--line);
    border-radius: 0.85rem;
    background: var(--panel);
}

.pet-consult-timeline__main {
    display: grid;
    gap: 0.14rem;
    min-width: 0;
}

.pet-consult-timeline__main strong {
    color: var(--text);
    line-height: 1.3;
}

.pet-consult-timeline__main span,
.pet-consult-timeline__main small {
    color: var(--text-secondary);
    font-size: 0.83rem;
    line-height: 1.35;
}

.pet-consult-timeline__meta {
    display: grid;
    justify-items: end;
    gap: 0.32rem;
}

.pet-consult-timeline__meta > span {
    color: var(--text);
    font-size: 0.78rem;
    font-weight: 700;
}

.pet-consult-timeline__actions {
    display: flex;
    gap: 0.36rem;
}

.table--pet-history td {
    vertical-align: top;
}

.pet-history-cell {
    display: grid;
    gap: 0.22rem;
}

.pet-history-cell strong {
    color: var(--text);
    line-height: 1.35;
}

.pet-history-cell span {
    color: var(--text-secondary);
    font-size: 0.84rem;
    line-height: 1.4;
}

.pet-weight-card {
    display: grid;
    gap: 0.85rem;
}

.pet-weight-card__stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.55rem;
}

.pet-weight-card__stats article,
.pet-weight-card__delta {
    display: grid;
    gap: 0.15rem;
    padding: 0.65rem 0.72rem;
    border: 1px solid var(--line);
    border-radius: 0.85rem;
    background: var(--panel);
}

.pet-weight-card__stats span,
.pet-weight-card__delta span {
    color: var(--text-secondary);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.pet-weight-card__stats strong,
.pet-weight-card__delta strong {
    color: var(--text);
    font-size: 0.95rem;
    line-height: 1.35;
}

.pet-weight-chart {
    padding: 0.8rem 0.9rem 0.55rem;
    border: 1px solid #d8e2f3;
    border-radius: 0.95rem;
    background: linear-gradient(180deg, #ffffff 0%, #f7faff 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.88);
}

.pet-weight-chart__canvas {
    height: 13rem;
}

.pet-weight-chart canvas {
    width: 100%;
    height: 100%;
    display: block;
}

.pet-weight-history-list {
    display: grid;
    gap: 0.45rem;
    max-height: 14rem;
    overflow: auto;
    padding-right: 0.1rem;
}

.pet-weight-history-list__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.62rem 0.72rem;
    border: 1px solid var(--line);
    border-radius: 0.85rem;
    background: var(--panel);
}

.pet-weight-history-list__item strong {
    color: var(--text);
}

.pet-weight-history-list__item span {
    color: var(--text-secondary);
    font-size: 0.82rem;
    text-align: right;
}

.link-share-card {
    display: grid;
    gap: 0.75rem;
    padding: 0.95rem 1rem;
    border: 1px solid var(--line);
    border-radius: 0.95rem;
    background: linear-gradient(180deg, var(--panel) 0%, var(--panel-soft) 100%);
    align-content: start;
    align-self: start;
    grid-auto-rows: max-content;
}

.link-share-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.link-share-card > .btn,
.link-share-card > button {
    justify-self: start;
    align-self: start;
}

.consultation-photo-grid,
.upload-preview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: 0.75rem;
}

.consult-doc-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(6.3rem, 1fr));
    gap: 0.6rem;
}

/* Photo + its body-area tag, one grid cell. */
.consult-doc-item {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 0;
}

.consult-doc-item__area select {
    width: 100%;
    font-size: 0.75rem;
    padding: 0.15rem 0.3rem;
}

.consult-doc-thumb {
    display: block;
    border: 1px solid var(--line);
    border-radius: 0.85rem;
    overflow: hidden;
    background: var(--panel);
    box-shadow: 0 8px 18px rgba(24, 43, 77, 0.08);
    transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}

.consult-doc-thumb:hover,
.consult-doc-thumb:focus-visible {
    transform: translateY(-1px);
    border-color: var(--info-line);
    box-shadow: 0 10px 22px rgba(24, 43, 77, 0.12);
    outline: none;
}

.consult-doc-thumb img,
.consult-doc-thumb__file {
    width: 100%;
    aspect-ratio: 1;
}

.consult-doc-thumb img {
    display: block;
    object-fit: cover;
    background: var(--panel-soft);
}

.consult-doc-thumb__file {
    display: grid;
    place-items: center;
    background: linear-gradient(180deg, var(--panel-soft) 0%, var(--bg-page) 100%);
    color: #244684;
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: 0.06em;
}

/* ── Shared consultation-history grid ──────────────────────────────────────
   components/_consultation_history.html.twig, rendered on both the owner
   (client/show) and the animal (client/pet_show) page. */

/* Two-line cell: bold primary line, muted detail underneath (DESIGN.md —
   "Client/animal cells use two-line layout"). */
.cell-stack {
    display: grid;
    gap: 0.15rem;
    min-width: 0;
}

.cell-stack > strong {
    font-weight: 600;
    line-height: 1.35;
}

.cell-stack > small {
    color: var(--muted);
    font-size: 0.76rem;
    line-height: 1.4;
}

.cell-stack > .status-badge {
    justify-self: start;
    margin-top: 0.2rem;
}

.table--consult-history td {
    vertical-align: top;
}

.table--consult-history td:first-child {
    white-space: nowrap;
}

/* Thumbnail strip inside a history row — a peek at the visit's images.
   Capped in the template at 4 tiles plus a "+N" chip. */
.consult-history-thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    min-width: 6.5rem;
}

.consult-history-thumb {
    display: block;
    width: 2.6rem;
    height: 2.6rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--bg-shell);
    transition: border-color 100ms ease, transform 100ms ease;
}

.consult-history-thumb:hover,
.consult-history-thumb:focus-visible {
    border-color: var(--primary);
    transform: translateY(-1px);
    outline: none;
}

.consult-history-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.consult-history-thumb--more {
    display: grid;
    place-items: center;
    font-size: 0.78rem;
}

/* Repeated class — the documented trick for beating
   .panel a / .table a :not(.btn):not(.table-sort) (0,3,1), which hardcodes a
   light-mode blue with no dark override. */
a.consult-history-thumb--more.consult-history-thumb--more.consult-history-thumb--more,
a.consult-history-thumb--more.consult-history-thumb--more.consult-history-thumb--more:visited {
    color: var(--muted);
    font-weight: 600;
    text-decoration: none;
}

a.consult-history-thumb--more.consult-history-thumb--more.consult-history-thumb--more:hover {
    color: var(--text);
}

/* ── Per-animal photo gallery (client/_pet_photo_gallery.html.twig) ────────
   Every image attached to any of the pet's consultations, newest first. */
.pet-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr));
    gap: 0.6rem;
}

.pet-gallery__item {
    display: grid;
    gap: 0.25rem;
    margin: 0;
    min-width: 0;
}

.pet-gallery__thumb {
    display: block;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--bg-shell);
    transition: border-color 100ms ease, transform 100ms ease;
}

.pet-gallery__thumb:hover,
.pet-gallery__thumb:focus-visible {
    border-color: var(--primary);
    transform: translateY(-1px);
    outline: none;
}

.pet-gallery__thumb img {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
}

.pet-gallery__caption {
    font-size: 0.74rem;
    color: var(--muted);
    text-align: center;
}

/* Same repeated-class trick — keep the date muted, not hardcoded link-blue. */
a.pet-gallery__date.pet-gallery__date.pet-gallery__date,
a.pet-gallery__date.pet-gallery__date.pet-gallery__date:visited {
    color: var(--muted);
    font-weight: 500;
    text-decoration: none;
}

a.pet-gallery__date.pet-gallery__date.pet-gallery__date:hover {
    color: var(--text);
    text-decoration: underline;
}

.consult-doc-lightbox {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 2rem;
    background: rgba(8, 16, 32, 0.88);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    animation: consult-doc-lightbox-fade 0.16s ease;
}

@keyframes consult-doc-lightbox-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.consult-doc-lightbox__stage {
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    max-width: min(1200px, 92vw);
    max-height: 100%;
    flex: 1 1 auto;
    min-width: 0;
}

.consult-doc-lightbox__image {
    max-width: 100%;
    max-height: calc(100vh - 6rem);
    object-fit: contain;
    border-radius: 0.6rem;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45);
    background: var(--text);
}

.consult-doc-lightbox__caption-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    width: 100%;
    color: #e8eef9;
    font-size: 0.92rem;
}

.consult-doc-lightbox__caption {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1 1 auto;
    min-width: 0;
}

.consult-doc-lightbox__counter {
    flex: 0 0 auto;
    font-variant-numeric: tabular-nums;
    color: #b9c6dd;
}

.consult-doc-lightbox__nav,
.consult-doc-lightbox__close {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-on-solid);
    cursor: pointer;
    transition: background 0.16s ease, border-color 0.16s ease, transform 0.16s ease;
}

.consult-doc-lightbox__nav:hover,
.consult-doc-lightbox__nav:focus-visible,
.consult-doc-lightbox__close:hover,
.consult-doc-lightbox__close:focus-visible {
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.32);
    outline: none;
}

.consult-doc-lightbox__nav:active {
    transform: scale(0.95);
}

.consult-doc-lightbox__nav svg,
.consult-doc-lightbox__close svg {
    width: 1.4rem;
    height: 1.4rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.consult-doc-lightbox__close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 2.6rem;
    height: 2.6rem;
}

@media (max-width: 640px) {
    .consult-doc-lightbox {
        padding: 1rem 0.5rem;
        gap: 0.4rem;
    }
    .consult-doc-lightbox__nav {
        width: 2.4rem;
        height: 2.4rem;
    }
    .consult-doc-lightbox__nav svg {
        width: 1.1rem;
        height: 1.1rem;
    }
}

.consultation-photo-card,
.upload-preview-card {
    display: grid;
    gap: 0.45rem;
    padding: 0.55rem;
    border: 1px solid var(--line);
    border-radius: 0.9rem;
    background: var(--panel);
    color: var(--text);
    text-decoration: none;
    min-width: 0;
}

.upload-preview-card--editable {
    position: relative;
}

.upload-preview-card__remove-btn {
    position: absolute;
    top: 0.4rem;
    right: 0.4rem;
    z-index: 2;
}

.consultation-photo-card__link {
    display: grid;
    gap: 0.45rem;
    color: inherit;
    text-decoration: none;
}

.consultation-photo-card--editable {
    position: relative;
}

.consultation-photo-card__remove-form {
    position: absolute;
    top: 0.4rem;
    right: 0.4rem;
}

.consultation-photo-card__remove-btn {
    width: 1.85rem;
    height: 1.85rem;
    border: 1px solid var(--danger-line);
    border-radius: 999px;
    background: rgba(255, 244, 244, 0.96);
    color: var(--danger-text);
    font-size: 1.05rem;
    font-weight: 800;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(40, 55, 90, 0.12);
}

.consultation-photo-card__remove-btn:hover {
    background: var(--surface-soft);
    border-color: var(--danger-line);
}

.consultation-photo-card img,
.upload-preview-card img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 0.7rem;
    border: 1px solid var(--line);
    background: var(--panel-soft);
}

.consultation-photo-card span,
.upload-preview-card figcaption {
    font-size: 0.8rem;
    line-height: 1.3;
    word-break: break-word;
}

.consultation-photo-card__file,
.upload-preview-card__file {
    width: 100%;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border-radius: 0.7rem;
    border: 1px dashed var(--line);
    background: linear-gradient(180deg, var(--panel-soft) 0%, var(--bg-page) 100%);
    color: var(--info-text);
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.consultation-documents-share {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
    align-items: start;
}

.consult-documents-panel {
    display: grid;
    gap: 1rem;
    margin-top: 1rem;
}

.consult-documents-step {
    display: grid;
    gap: 1rem;
}

.consult-documents-upload-meta {
    display: grid;
    gap: 0.2rem;
}

.consult-documents-upload-meta .muted {
    margin: 0;
}

.consult-documents-upload-title {
    margin: 0;
    color: var(--text);
    font-size: 0.82rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.consult-documents-step .link-share-card > .btn,
.consult-documents-step .link-share-card > button {
    width: auto;
    max-width: 100%;
    min-width: 0;
    justify-self: start;
    align-self: start;
    flex: 0 0 auto;
}

.consent-documents-card {
    gap: 0.85rem;
}

.consent-documents-card__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.9rem;
    flex-wrap: wrap;
}

.consent-documents-list {
    display: grid;
    gap: 0.7rem;
}

.consent-document-item {
    display: flex;
    justify-content: space-between;
    gap: 0.85rem;
    align-items: center;
    padding: 0.8rem 0.9rem;
    border: 1px solid var(--line);
    border-radius: 0.9rem;
    background: var(--panel);
}

.consent-document-item__meta {
    display: grid;
    gap: 0.16rem;
}

.consent-document-item__meta strong {
    color: var(--text);
}

.consent-document-item__meta span {
    color: var(--text-secondary);
    font-size: 0.84rem;
}

.consent-document-item__actions {
    display: flex;
    gap: 0.45rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.consent-document-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
}

.consent-summary-chip {
    display: grid;
    gap: 0.18rem;
    padding: 0.8rem 0.9rem;
    border: 1px solid var(--line);
    border-radius: 0.9rem;
    background: linear-gradient(180deg, var(--panel) 0%, var(--panel-soft) 100%);
}

.consent-summary-chip strong {
    color: var(--text-secondary);
    font-size: 0.73rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.consent-summary-chip span {
    color: var(--text);
    font-weight: 700;
}

.consent-document-template-pill {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    align-items: center;
    padding: 0.65rem 0.8rem;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--panel-soft);
    color: #28406a;
}

.consent-document-template-pill span {
    color: var(--text-secondary);
}

.consent-document-preview {
    display: grid;
    gap: 1.15rem;
}

.consent-document-preview__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--line);
}

.consent-document-preview__header h2 {
    margin: 0.2rem 0 0;
}

.consent-document-preview__header img {
    max-height: 4rem;
    max-width: 9rem;
}

.consent-document-preview__body {
    color: var(--text);
    line-height: 1.6;
}

.consent-document-preview__body > :first-child {
    margin-top: 0;
}

.consent-document-preview__body > :last-child {
    margin-bottom: 0;
}

.consent-template-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.65fr) minmax(18rem, 0.95fr);
    gap: 1rem;
    align-items: start;
}

.consent-template-sidebar {
    position: sticky;
    top: 1rem;
}

.consent-template-panel {
    display: grid;
    gap: 0.75rem;
    padding: 0.95rem 1rem;
    border: 1px solid var(--line);
    border-radius: 0.95rem;
    background: linear-gradient(180deg, var(--panel) 0%, var(--panel-soft) 100%);
}

.consent-template-panel__head h3 {
    margin: 0;
}

.consent-template-panel__head .muted {
    margin: 0.25rem 0 0;
}

.consent-placeholder-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.consent-placeholder-chip {
    min-height: 2.1rem;
    padding: 0.42rem 0.72rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--panel);
    color: var(--info-text);
    font-weight: 700;
    cursor: pointer;
}

.consent-placeholder-chip:hover {
    background: var(--bg-page);
    border-color: var(--primary);
}

.consent-preview-card {
    display: grid;
    gap: 0.65rem;
    padding: 0.9rem;
    border-radius: 0.9rem;
    border: 1px solid var(--line);
    background: var(--panel);
    min-height: 18rem;
}

.consent-preview-card h4 {
    margin: 0;
    color: var(--text);
}

.consent-preview-card__body {
    color: var(--text);
    line-height: 1.55;
}

.consent-preview-card__body > :first-child {
    margin-top: 0;
}

.consent-preview-card__body > :last-child {
    margin-bottom: 0;
}

.inline-form {
    margin-top: 0.75rem;
}

.consultation-qr-card {
    display: grid;
    gap: 0.6rem;
    justify-items: start;
}

.consultation-qr-card img {
    width: 7rem;
    max-width: 7rem;
    padding: 0.4rem;
    border-radius: 0.6rem;
    background: var(--panel);
    border: 1px solid var(--line);
}

/* Flat share-link row for pet edit "Upload poza de pe telefon". No card chrome —
   sits inline inside its parent section. */
.pet-upload-link {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.6rem;
}

.pet-upload-link__field {
    display: grid;
    gap: 0.3rem;
    flex: 1 1 20rem;
    min-width: 0;
}

.pet-upload-link__field input {
    width: 100%;
}

.pet-upload-link__qr {
    padding: 0.3rem;
    border-radius: 0.5rem;
    background: var(--panel);
    border: 1px solid var(--line, #E2E7EE);
}

.consult-step-card--nested {
    margin-top: 1rem;
    border-style: dashed;
    background: var(--bg-shell, #F7F8FA);
}

.consult-sale-summary-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
    padding: 0.95rem 1rem;
    border: 1px solid var(--line);
    border-radius: 1rem;
    background: linear-gradient(180deg, #f9fbff 0%, #f2f7ff 100%);
}

.consult-sale-summary-card strong {
    display: block;
    font-size: 1.05rem;
}

.consult-sale-summary-card .muted {
    margin: 0.2rem 0 0;
}

.consult-sale-rows {
    display: grid;
    gap: 0.85rem;
}

.consult-sale-row {
    display: grid;
    gap: 0.85rem;
    padding: 0.95rem;
    border: 1px solid var(--line);
    border-radius: 1rem;
    background: var(--panel);
}

.consult-sale-row__main,
.consult-sale-row__meta {
    display: grid;
    gap: 0.85rem;
}

.consult-sale-row__meta {
    grid-template-columns: minmax(9rem, 10rem) minmax(11rem, 13rem) minmax(7rem, 9rem) minmax(8rem, 10rem) auto;
    align-items: end;
}

.consult-sale-mode-toggle {
    margin-top: 0.35rem;
}

.consult-step-actions--inline {
    align-items: center;
}

.consult-sale-batch-total {
    margin-left: auto;
    color: var(--text);
    font-weight: 700;
}

.consult-sale-batch-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.75rem;
}

@media (max-width: 900px) {
    .pet-card__hero,
    .pet-profile,
    .pet-view__hero,
    .pet-view__layout {
        grid-template-columns: 1fr;
    }

    .pet-card__photo,
    .pet-profile__media,
    .pet-view__media {
        justify-items: start;
    }

    .pet-profile__media,
    .pet-view__media {
        justify-content: flex-start;
    }

    .pet-view__media {
        justify-content: center;
        justify-items: center;
        margin-inline: auto;
    }

    .pet-view__side {
        position: static;
    }

    .pet-consult-timeline__item {
        grid-template-columns: 1fr;
        justify-items: start;
    }

    .pet-consult-timeline__meta {
        justify-items: start;
    }

    .pet-hero-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pet-weight-card__stats {
        grid-template-columns: 1fr;
    }

    .consultation-documents-share {
        grid-template-columns: 1fr;
    }

    .consult-sale-summary-card {
        align-items: stretch;
        flex-direction: column;
    }

    .consult-sale-row__meta {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .consult-sale-batch-total {
        margin-left: 0;
    }
}

.status-badge {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 0.22rem 0.55rem;
    font-size: 0.76rem;
    font-weight: 700;
}

.status-badge--approved {
    background: var(--bg-page);
    color: var(--success-text);
    border: 1px solid var(--success-line);
}

.status-badge--pending {
    background: var(--panel-soft);
    color: var(--warning-text);
    border: 1px solid var(--warning-line);
}

.status-badge--info {
    background: var(--bg-page);
    color: var(--primary-text);
    border: 1px solid #c4dbff;
}

.status-badge--warning {
    background: var(--bg-page);
    color: var(--warning-text);
    border: 1px solid var(--warning-line);
}

.status-badge--muted {
    background: var(--bg-page);
    color: var(--text-secondary);
    border: 1px solid var(--line);
}

.status-pill {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 0.16rem 0.46rem;
    font-size: 0.74rem;
    font-weight: 700;
    border: 1px solid transparent;
}

.status-pill--green {
    color: var(--success-text);
    background: var(--bg-page);
    border-color: #bfe8d1;
}

.status-pill--blue {
    color: var(--primary-text);
    background: var(--surface-soft);
    border-color: #c4d8ff;
}

.tox.tox-tinymce {
    border-radius: 0.65rem;
    border-color: var(--line);
}

.tox .tox-toolbar,
.tox .tox-toolbar__primary,
.tox .tox-menubar {
    background: var(--panel-soft);
}

.status-badge--rejected {
    background: var(--surface-soft);
    color: var(--danger-text);
    border: 1px solid var(--danger-line);
}

.status-badge--deschisa {
    background: var(--panel-soft);
    color: var(--warning-text);
    border: 1px solid var(--warning-line);
}

.status-badge--finalizata {
    background: var(--bg-page);
    color: var(--success-text);
    border: 1px solid var(--success-line);
}

/* Consultation grid: status badge + envelope showing the client email's
   delivery state (sent / delivered / read / issue). Hover text = details. */
.consultation-list-status {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.consultation-email-status {
    position: relative;
    display: inline-flex;
    width: 1.05rem;
    height: 1.05rem;
    cursor: help;
}

/* Instant tooltip (the native title one is slow and easy to miss); also
   opens on keyboard focus and on tap. Sits to the right of the icon so the
   grid's horizontal-scroll wrapper doesn't clip it. */
.consultation-email-status__tip {
    position: absolute;
    left: calc(100% + 0.45rem);
    top: 50%;
    transform: translateY(-50%);
    z-index: 20;
    width: max-content;
    max-width: 18rem;
    padding: 0.4rem 0.55rem;
    border-radius: 6px;
    background: var(--text);
    color: var(--bg-page);
    font-size: 0.78rem;
    font-weight: 500;
    line-height: 1.35;
    white-space: normal;
    text-align: left;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.12s ease;
}

.consultation-email-status:hover .consultation-email-status__tip,
.consultation-email-status:focus-visible .consultation-email-status__tip,
.consultation-email-status:focus .consultation-email-status__tip {
    opacity: 1;
    visibility: visible;
}

.consultation-email-status svg {
    width: 100%;
    height: 100%;
}

.consultation-email-status--sent {
    color: var(--muted);
}

.consultation-email-status--delivered {
    color: color-mix(in srgb, var(--success) 55%, var(--bg-page));
}

.consultation-email-status--read {
    color: var(--success-text);
}

.consultation-email-status--issue {
    color: var(--danger);
}

/* Red state is a resend button (posts to consultations_send_email). */
.consultation-email-status__form {
    display: inline-flex;
    margin: 0;
}

.consultation-email-status--action {
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    border-radius: 3px;
}

.consultation-email-status--action:hover,
.consultation-email-status--action:focus-visible {
    color: var(--danger-text);
    outline: 2px solid var(--danger-line);
    outline-offset: 1px;
}

.logo-thumb {
    width: 3.2rem;
    height: 3.2rem;
    border-radius: 0.5rem;
    object-fit: cover;
    border: 1px solid var(--line);
    background: var(--panel);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.68rem;
    text-align: center;
    color: var(--text-secondary);
    padding: 0.2rem;
}

.logo-thumb--empty {
    background: var(--panel-soft);
}

.logo-box {
    width: 8rem;
    height: 8rem;
    border-radius: 0.8rem;
    object-fit: cover;
    border: 1px solid var(--line);
    background: var(--panel);
    margin: 0.6rem 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.logo-box--empty {
    color: var(--text-secondary);
    font-size: 0.85rem;
    background: var(--panel-soft);
}

.avatar-crop {
    margin-top: 0.85rem;
    padding: 0.85rem;
    border: 1px solid var(--line);
    border-radius: 0.8rem;
    background: var(--panel-soft);
    display: grid;
    gap: 0.65rem;
    max-width: 22rem;
}

.avatar-crop__canvas-wrap {
    width: 100%;
    max-width: 18rem;
    border: 1px solid var(--line);
    border-radius: 0.75rem;
    overflow: hidden;
    background: var(--panel-soft);
}

.avatar-crop__canvas {
    width: 100%;
    aspect-ratio: 1 / 1;
    display: block;
    cursor: grab;
}

.avatar-crop__canvas:active {
    cursor: grabbing;
}

.avatar-crop__zoom {
    display: grid;
    gap: 0.35rem;
    font-size: 0.88rem;
    color: var(--text-secondary);
}

.signature-crop {
    margin-top: 0.85rem;
    padding: 0.85rem;
    border: 1px solid var(--line);
    border-radius: 0.8rem;
    background: var(--panel-soft);
    display: grid;
    gap: 0.65rem;
    max-width: 32rem;
}

.signature-crop__hint {
    margin: 0;
    font-size: 0.8rem;
    color: var(--text-secondary);
    line-height: 1.4;
}

.signature-crop__canvas-wrap {
    width: 100%;
    border: 1px dashed var(--info-line);
    border-radius: 0.6rem;
    overflow: hidden;
    background: var(--panel-soft);
}

.signature-crop__canvas {
    width: 100%;
    height: auto;
    display: block;
    cursor: grab;
    touch-action: none;
}

.signature-crop__canvas:active {
    cursor: grabbing;
}

.signature-crop__zoom {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.5rem;
    align-items: center;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.signature-crop__zoom input[type="range"] {
    width: 100%;
}

.signature-crop__actions {
    display: flex;
    gap: 0.45rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.signature-current {
    margin-top: 0.85rem;
    padding: 0.75rem 0.9rem;
    border: 1px solid var(--line);
    border-radius: 0.8rem;
    background: var(--panel);
    max-width: 32rem;
}

.signature-current__label {
    margin: 0 0 0.4rem;
    font-size: 0.8rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    font-weight: 600;
}

.signature-current__image {
    max-width: 100%;
    max-height: 9rem;
    display: block;
    padding: 0.4rem;
    border: 1px solid var(--line);
    border-radius: 0.5rem;
    background: linear-gradient(45deg, var(--panel-soft) 25%, transparent 25%, transparent 75%, var(--panel-soft) 75%),
                linear-gradient(45deg, var(--panel-soft) 25%, transparent 25%, transparent 75%, var(--panel-soft) 75%);
    background-size: 16px 16px;
    background-position: 0 0, 8px 8px;
    background-color: var(--panel);
}

.calendar-legend {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    color: var(--text-secondary);
    font-size: 0.82rem;
    font-weight: 600;
}

.calendar-legend span {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.calendar-legend__dot {
    width: 0.65rem;
    height: 0.65rem;
    border-radius: 50%;
    display: inline-block;
}

.calendar-legend__dot--planned {
    background: var(--primary);
}

.calendar-legend__dot--done {
    background: var(--success);
}

.calendar-legend__dot--cancelled {
    background: var(--danger);
}

.calendar-legend__dot--confirmed {
    background: #1c8c9a;
}

.calendar-legend__dot--no-show {
    background: var(--accent-strong);
}

.calendar-legend__dot--rescheduled {
    background: var(--muted);
}

.calendar-legend__dot--blocked {
    background: #8a5b2b;
}

.appointments-calendar {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--panel);
    padding: 0.7rem;
    max-width: 100%;
    min-width: 0;
}

.appointments-calendar__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.7rem;
    flex-wrap: wrap;
    margin-bottom: 0.55rem;
}

.appointments-calendar__toolbar {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr);
    align-items: center;
    gap: 0.7rem;
    margin-bottom: 0.7rem;
    min-width: 0;
}

.appointments-calendar__toolbar--compact {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0;
    --calendar-control-height: 2.15rem;
    --control-min-height: 2.15rem;
    --control-padding-y: 0.28rem;
    --control-radius: 5px;
    overflow: visible;
}

/* Force all direct calendar toolbar controls to the same height.
 * Exclude inner view toggle buttons (they're children of the views wrapper). */
.appointments-calendar__toolbar--compact > input,
.appointments-calendar__toolbar--compact > select,
.appointments-calendar__toolbar--compact > button,
.appointments-calendar__toolbar--compact > .btn,
.appointments-calendar__toolbar--compact > .appointments-calendar__nav > .btn,
.appointments-calendar__toolbar--compact > .appointments-calendar__views,
.appointments-calendar__toolbar--compact > .appointments-calendar__date-trigger > .appointments-calendar__date-button,
.appointments-calendar__toolbar--compact .appointments-calendar__search input[type='search'],
.appointments-calendar__toolbar--compact .appointments-doctor-picker__trigger--compact,
.appointments-calendar__toolbar--compact .appointments-calendar__help-button,
.appointments-calendar__toolbar--compact .ts-wrapper .ts-control {
    height: var(--calendar-control-height) !important;
    min-height: var(--calendar-control-height) !important;
    box-sizing: border-box;
    margin: 0 !important;
}

/* The view toggle container sets its own height; inner buttons fit inside */
.appointments-calendar__toolbar--compact .appointments-calendar__views .btn {
    height: calc(var(--calendar-control-height) - 0.4rem) !important;
    min-height: 0 !important;
}

.appointments-calendar__toolbar--compact > * {
    min-width: 0;
}

.appointments-calendar__toolbar--compact .appointments-calendar__nav .btn {
    height: var(--calendar-control-height);
    min-height: var(--calendar-control-height);
    padding: 0 0.55rem;
    font-size: 0.82rem;
    line-height: 1;
    border-radius: 5px;
}

.appointments-calendar__toolbar--compact .appointments-calendar__views {
    padding: 0.14rem;
    gap: 0.15rem;
    height: var(--calendar-control-height);
    min-height: var(--calendar-control-height);
    box-sizing: border-box;
    border-radius: 5px;
    flex-shrink: 0;
}

.appointments-calendar__toolbar--compact .appointments-calendar__views .btn {
    height: calc(var(--calendar-control-height) - 0.35rem);
    min-height: 0;
    padding: 0 0.5rem;
    font-size: 0.8rem;
    line-height: 1;
    border-radius: 4px;
}

.appointments-calendar__nav,
.appointments-calendar__meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: flex-end;
    min-width: 0;
}

.appointments-calendar__toolbar--compact .appointments-calendar__nav {
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 0.3rem;
}

.appointments-calendar__views {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--bg-shell);
}

.appointments-calendar__views .btn.is-active {
    background: var(--primary-solid);
    color: var(--text-on-solid);
    border-color: var(--primary);
}

.appointments-calendar__orientation-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.34rem;
    white-space: nowrap;
}

.appointments-calendar__orientation-btn .orientation-icon {
    display: none;
    flex-shrink: 0;
}

.appointments-calendar__orientation-btn .orientation-icon--horizontal {
    display: inline-block;
}

.appointments-calendar__orientation-btn.is-horizontal .orientation-icon--horizontal {
    display: none;
}

.appointments-calendar__orientation-btn.is-horizontal .orientation-icon--vertical {
    display: inline-block;
}

.appointments-calendar__orientation-btn[hidden] {
    display: none;
}

.appointments-calendar__meta strong {
    font-size: 1rem;
    color: var(--text);
    flex: 0 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
}

.appointments-calendar__meta input {
    flex: 0 1 12rem;
    min-width: 10rem;
    width: 100%;
}

.appointments-calendar__date-trigger {
    position: relative;
    display: inline-flex;
    min-width: 0;
}

.appointments-calendar__date-button {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border: 1px solid var(--line);
    background: var(--panel);
    color: var(--text);
    border-radius: 6px;
    padding: 0 0.6rem;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    height: var(--calendar-control-height, 2rem);
    min-height: var(--calendar-control-height, 2rem);
    line-height: 1;
    max-width: 100%;
    transition: border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
}

.appointments-calendar__date-button strong {
    font-size: 0.83rem;
    color: var(--text);
    text-transform: capitalize;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    line-height: 1;
}

.appointments-calendar__date-button svg {
    flex: 0 0 auto;
    color: var(--text-secondary);
    transition: transform 0.16s ease;
}

.appointments-calendar__date-button:hover,
.appointments-calendar__date-button:focus-visible,
.appointments-calendar__date-button.is-open {
    border-color: var(--primary);
    background: var(--primary-ghost);
    box-shadow: var(--shadow);
    outline: 0;
}

.appointments-calendar__date-button.is-open svg {
    transform: rotate(180deg);
}

.appointments-calendar__date-popover {
    position: absolute;
    top: calc(100% + 0.4rem);
    left: 0;
    z-index: 1200;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 0.85rem;
    box-shadow: 0 18px 36px rgba(26, 48, 85, 0.14);
    padding: 0.7rem;
    min-width: 13rem;
}

.appointments-calendar__date-popover[hidden] {
    display: none !important;
}

.appointments-calendar__date-popover input[type='date'] {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 0.5rem;
    padding: 0.42rem 0.55rem;
    font: inherit;
    color: var(--text);
    background: var(--panel);
}

.appointments-calendar__search {
    position: relative;
    display: inline-flex;
    align-items: center;
    flex: 1 1 11rem;
    min-width: 9rem;
    max-width: 22rem;
}

.appointments-calendar__search svg {
    position: absolute;
    left: 0.65rem;
    top: 50%;
    transform: translateY(-50%);
    color: #7185a8;
    pointer-events: none;
}

.appointments-calendar__search input[type='search'] {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 0.55rem;
    padding: 0 0.7rem 0 2rem !important;
    font: inherit;
    font-size: 0.83rem;
    background: var(--panel);
    color: var(--text);
    height: var(--calendar-control-height, 2rem) !important;
    min-height: var(--calendar-control-height, 2rem) !important;
    line-height: 1;
    box-sizing: border-box;
    transition: border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
}

.appointments-calendar__search input::placeholder {
    color: var(--muted);
}

.appointments-calendar__search input:focus-visible {
    outline: 0;
    border-color: var(--primary-line);
    background: var(--panel-soft);
    box-shadow: 0 8px 18px rgba(37, 72, 124, 0.08);
}

.appointments-calendar__help {
    position: relative;
    margin-left: auto;
    display: inline-flex;
}

.appointments-calendar__help-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--calendar-control-height, 2rem);
    height: var(--calendar-control-height, 2rem);
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--panel);
    color: var(--text-secondary);
    cursor: pointer;
    transition: border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease, color 0.16s ease;
}

.appointments-calendar__help-button:hover,
.appointments-calendar__help-button:focus-visible,
.appointments-calendar__help-button.is-open {
    color: #2c6df5;
    border-color: var(--primary-line);
    background: var(--panel-soft);
    box-shadow: 0 8px 18px rgba(37, 72, 124, 0.08);
    outline: 0;
}

.appointments-calendar__help-popover {
    position: absolute;
    top: calc(100% + 0.45rem);
    right: 0;
    z-index: 1200;
    width: min(20rem, calc(100vw - 2rem));
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: var(--shadow);
    padding: 0.85rem 0.95rem;
    display: grid;
    gap: 0.5rem;
    color: var(--text);
    font-size: 0.85rem;
    line-height: 1.45;
}

.appointments-calendar__help-popover[hidden] {
    display: none !important;
}

.appointments-calendar__help-popover strong {
    color: var(--text);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 800;
}

.appointments-calendar__help-popover p {
    margin: 0;
    font-size: 0.82rem;
}

.calendar-legend--stack {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.35rem 0.7rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.calendar-legend--stack li {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.78rem;
    color: var(--text-secondary);
    font-weight: 600;
}

.appointments-doctor-picker--compact {
    max-width: none;
}

.appointments-doctor-picker.appointments-doctor-picker--compact .appointments-doctor-picker__trigger--compact {
    height: var(--calendar-control-height, 2.15rem);
    min-height: var(--calendar-control-height, 2.15rem);
    padding: 0 0.6rem;
    border-radius: 5px;
    gap: 0.35rem;
    justify-content: flex-start;
    width: auto;
    line-height: 1;
}

.appointments-doctor-picker.appointments-doctor-picker--compact .appointments-doctor-picker__trigger-label {
    font-size: 0.83rem;
}

.appointments-doctor-picker__trigger--compact svg {
    flex: 0 0 auto;
    color: var(--text-secondary);
    transition: transform 0.16s ease;
}

.appointments-doctor-picker__trigger--compact svg:last-child {
    color: var(--text-secondary);
}

.appointments-doctor-picker.is-open .appointments-doctor-picker__trigger--compact svg:last-child {
    transform: rotate(180deg);
}

.appointments-doctor-picker__trigger-label {
    font-weight: 700;
    color: var(--text);
    font-size: 0.88rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.appointments-doctor-picker--compact .appointments-doctor-picker__panel {
    left: auto;
    right: 0;
}

.appointment-card.is-search-dimmed {
    opacity: 0.22;
    pointer-events: none;
    filter: saturate(0.65);
}

/* Unified two-column grid for the appointment add/edit form (standalone + modal) */
.appointment-form__grid--two {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem 1.1rem;
    align-items: start;
    margin-top: 0.9rem;
}

.appointment-form__grid--two .appointment-form__field {
    min-width: 0;
}

.appointment-form__grid--two .appointment-form__field--motiv  { order: 1; }
.appointment-form__grid--two .appointment-form__field--doctor { order: 2; }
.appointment-form__grid--two .appointment-form__field--client { order: 3; }
.appointment-form__grid--two .appointment-form__field--pet    { order: 4; }
.appointment-form__grid--two .appointment-form__field--start  { order: 5; }
.appointment-form__grid--two .appointment-form__field--end    { order: 6; }
.appointment-form__grid--two .appointment-form__field--status { order: 99; }

@media (max-width: 720px) {
    .appointment-form__grid--two {
        grid-template-columns: 1fr;
    }
}

/* Create-modal mode switch (full form <-> phone+note quick appointment).
   The button is adopted into .modal-head__actions next to "Inchide"; the
   in-form wrapper only shows as a no-JS / pre-adoption fallback. */
.appointment-form__mode-switch {
    display: flex;
    justify-content: flex-end;
}

.modal-head__actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 0 0 auto;
}

.modal-head__actions [data-appointments-calendar-target="modalSwitch"]:empty {
    display: none;
}

.appointment-form__quick-intro {
    margin: 0;
    font-size: 0.85rem;
}

/* Inline picker (existing entity select + "+ new" button) */
.appointment-inline-picker__row {
    display: flex;
    align-items: stretch;
    gap: 0.4rem;
    min-width: 0;
}

.appointment-inline-picker__select {
    flex: 1 1 auto;
    min-width: 0;
}

.appointment-inline-picker__select > * {
    width: 100%;
}

.appointment-inline-picker__toggle {
    flex: 0 0 auto;
    white-space: nowrap;
    border-color: var(--line);
    background: var(--panel-soft);
    color: var(--primary-strong);
    font-weight: 700;
}

.appointment-inline-picker__toggle:hover,
.appointment-inline-picker__toggle:focus-visible {
    background: var(--bg-page);
    border-color: var(--primary-line);
    color: #163f88;
    outline: 0;
}

/* Difficult-owner warning under the owner picker */
.appointment-difficult-warning {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin: 0.4rem 0 0;
    padding: 0.35rem 0.6rem;
    border: 1px solid var(--warning);
    border-radius: var(--control-radius);
    background: var(--warning-bg);
    color: var(--warning);
    font-size: 0.82rem;
    font-weight: 600;
}

.appointment-difficult-warning[hidden] {
    display: none !important;
}

/* Inline create block (new client / new pet fields) */
.appointment-inline-create {
    margin-top: 0.55rem;
    border: 1px solid var(--line);
    background: var(--panel-soft);
    border-radius: 0.75rem;
    padding: 0.7rem 0.85rem 0.85rem;
    display: grid;
    gap: 0.55rem;
}

.appointment-inline-create[hidden] {
    display: none !important;
}

.appointment-inline-create__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.55rem;
}

.appointment-inline-create__head strong {
    color: var(--text);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.appointment-inline-create__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem 0.7rem;
}

.appointment-inline-create__grid > div {
    min-width: 0;
}

@media (max-width: 720px) {
    .appointment-inline-picker__row {
        flex-direction: column;
        align-items: stretch;
    }

    .appointment-inline-picker__toggle {
        align-self: flex-start;
    }

    .appointment-inline-create__grid {
        grid-template-columns: 1fr;
    }
}

.appointments-grid-wrap {
    width: 100%;
    max-width: 100%;
    overflow-x: scroll;
    overflow-y: hidden;
    padding-bottom: 0;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.appointments-grid-wrap {
    cursor: grab;
}

.appointments-grid-wrap:active {
    cursor: grabbing;
}

.appointments-grid-wrap::-webkit-scrollbar {
    height: 0;
    display: none;
}

.appointments-grid-wrap.is-hidden,
.appointments-day-strip.is-hidden {
    display: none;
}

.appointments-scrollbar {
    display: none;
    position: sticky;
    bottom: 0.45rem;
    z-index: 12;
    margin-top: 0.45rem;
    overflow-x: auto;
    overflow-y: hidden;
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
    scrollbar-width: thin;
    scrollbar-color: #90a8d1 #eef3fc;
}

.appointments-scrollbar.is-visible {
    display: block;
}

.appointments-scrollbar::-webkit-scrollbar {
    height: 10px;
}

.appointments-scrollbar::-webkit-scrollbar-track {
    background: var(--bg-page);
    border-radius: 999px;
}

.appointments-scrollbar::-webkit-scrollbar-thumb {
    background: var(--muted);
    border-radius: 999px;
}

.appointments-scrollbar__track {
    height: 1px;
    border-radius: 0;
}

.appointments-day-strip {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(5.5rem, 1fr);
    gap: 0.4rem;
    overflow-x: auto;
    padding: 0.15rem 0.1rem 0.5rem;
}

.appointments-day-pill {
    border: 1px solid var(--line);
    background: var(--panel);
    color: var(--text);
    border-radius: 6px;
    padding: 0.32rem 0.55rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    text-align: center;
    cursor: pointer;
    min-height: 2.25rem;
    font-size: 0.84rem;
    transition: background 0.1s ease, border-color 0.1s ease;
}

.appointments-day-pill__weekday {
    color: var(--muted);
    text-transform: capitalize;
    font-size: 0.78rem;
    font-weight: 600;
}

.appointments-day-pill__date {
    font-size: 0.86rem;
    font-weight: 700;
    color: var(--text);
}

.appointments-day-pill__count {
    font-size: 0.7rem;
    color: var(--accent-strong, #C47B2E);
    background: var(--accent-ghost);
    border-radius: 4px;
    padding: 0 0.42rem;
    min-width: 1.25rem;
    height: 1.2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
}

.appointments-day-pill:hover {
    background: var(--panel-hover);
}

.appointments-day-pill.is-active {
    border-color: var(--accent);
    border-left: 2.5px solid var(--accent);
    background: var(--accent-ghost);
    color: var(--text);
}

.appointments-day-pill.is-active .appointments-day-pill__date,
.appointments-day-pill.is-active .appointments-day-pill__weekday {
    color: var(--text);
}

.appointments-day-pill.is-active .appointments-day-pill__count {
    background: var(--accent-solid);
    color: var(--text-on-solid);
}

.appointments-day-pill.is-today {
    box-shadow: inset 0 0 0 1px rgba(39, 176, 133, 0.5);
}

.appointments-month-grid {
    display: none;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--panel);
    padding: 0.65rem;
    margin-bottom: 0.65rem;
}

.appointments-month-grid.is-active {
    display: block;
}

.appointments-month-grid__head,
.appointments-month-grid__body {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0.35rem;
}

.appointments-month-grid__head span {
    text-align: center;
    color: #6d7f9f;
    font-size: 0.75rem;
    font-weight: 700;
}

.appointments-month-day {
    border: 1px solid var(--line);
    background: var(--panel);
    color: var(--text);
    border-radius: 0.6rem;
    min-height: 8.6rem;
    font-size: 0.84rem;
    padding: 0.35rem;
    display: grid;
    align-content: start;
    gap: 0.22rem;
}

.appointments-month-day:hover {
    background: var(--panel-soft);
}

.appointments-month-day.is-drop-target {
    border-color: var(--primary);
    background: var(--bg-page);
    box-shadow: inset 0 0 0 1px rgba(44, 109, 245, 0.25);
}

.appointments-month-day.is-outside {
    color: var(--muted);
    background: var(--panel);
}

.appointments-month-day.is-active {
    border-color: var(--primary);
    background: var(--bg-page);
    color: var(--primary-text);
}

.appointments-month-day.is-today {
    box-shadow: inset 0 0 0 1px rgba(39, 176, 133, 0.5);
}

.appointments-month-day__number {
    width: 2rem;
    height: 2rem;
    border-radius: 0.5rem;
    border: 1px solid var(--line);
    background: var(--panel);
    font-weight: 700;
    cursor: pointer;
}

.appointments-month-day__list {
    display: grid;
    gap: 0.2rem;
    min-height: 0;
}

.appointments-month-day__item {
    display: grid;
    grid-template-columns: 1.4rem 2.9rem 1fr;
    align-items: center;
    gap: 0.2rem;
    text-decoration: none;
    border-left: 3px solid var(--primary);
    border-radius: 0.38rem;
    background: var(--panel-soft);
    padding: 0.16rem 0.22rem;
    color: var(--text);
}

.appointments-month-day__item small {
    font-size: 0.66rem;
    color: var(--text-secondary);
}

.appointments-month-day__item strong {
    font-size: 0.72rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.appointments-month-day__more,
.appointments-month-day__empty {
    font-size: 0.69rem;
    color: #6b7d9d;
    padding-left: 0.1rem;
}

.appointments-doctor-chip {
    width: 1.2rem;
    height: 1.2rem;
    border-radius: 50%;
    background: linear-gradient(135deg, #4f86ff 0%, #2c6df5 100%);
    color: var(--text-on-solid);
    font-size: 0.6rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.appointments-pet-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1rem;
    margin: 0 0.08rem 0 0.02rem;
    border-radius: 50%;
    background: var(--bg-page);
    border: 1px solid var(--line);
    font-size: 0.72rem;
    line-height: 1;
    vertical-align: text-bottom;
}

.appointments-week-cards {
    min-width: 56rem;
    display: grid;
    grid-template-columns: repeat(7, minmax(11rem, 1fr));
    gap: 0.55rem;
    align-items: start;
}

.appointments-week-cards__day {
    border: 1px solid var(--line);
    border-radius: 0.8rem;
    background: var(--panel);
    overflow: hidden;
    display: grid;
    grid-template-rows: auto 1fr;
}

.appointments-week-cards__day.is-active {
    border-color: var(--primary);
    box-shadow: 0 0 0 1px rgba(44, 109, 245, 0.15);
}

.appointments-week-cards__day.is-drop-target {
    border-color: var(--primary);
    box-shadow: 0 0 0 1px rgba(44, 109, 245, 0.25);
    background: var(--bg-page);
}

.appointments-week-cards__head {
    border: 0;
    border-bottom: 1px solid var(--line);
    background: var(--panel-soft);
    padding: 0.5rem;
    text-align: left;
    display: grid;
    gap: 0.08rem;
    cursor: pointer;
}

.appointments-week-cards__head small {
    text-transform: capitalize;
    color: var(--text-secondary);
}

.appointments-week-cards__head strong {
    font-size: 0.88rem;
    color: var(--text);
}

.appointments-week-cards__head span {
    font-size: 0.72rem;
    color: #6a7b98;
}

.appointments-week-cards__list {
    padding: 0.45rem;
    display: grid;
    gap: 0.4rem;
    max-height: calc(100vh - 22rem);
    overflow-y: auto;
}

.appointments-week-cards__list--agenda {
    gap: 0.55rem;
    align-content: start;
}

.appointments-week-agenda-entry {
    display: grid;
    grid-template-columns: 3.5rem minmax(0, 1fr);
    gap: 0.45rem;
    align-items: start;
}

.appointments-week-agenda-entry__time {
    display: grid;
    gap: 0.08rem;
    padding-top: 0.18rem;
    text-align: right;
}

.appointments-week-agenda-entry__time strong {
    font-size: 0.78rem;
    color: var(--text);
    line-height: 1.1;
}

.appointments-week-agenda-entry__time span {
    font-size: 0.67rem;
    color: var(--text-secondary);
    line-height: 1.1;
}

.appointments-week-agenda-entry__time small {
    font-size: 0.63rem;
    color: var(--muted);
    line-height: 1.1;
}

.appointments-week-slot {
    display: grid;
    grid-template-columns: 2.8rem 1fr;
    gap: 0.3rem;
    align-items: stretch;
    border: 1px dashed var(--line);
    border-radius: 0.55rem;
    padding: 0.3rem 0.34rem;
    background: var(--panel);
    min-height: 3rem;
}

.appointments-week-slot.is-drop-target {
    border-color: var(--primary);
    background: var(--bg-page);
    box-shadow: inset 0 0 0 1px rgba(44, 109, 245, 0.2);
}

.appointments-week-slot__time {
    font-size: 0.64rem;
    color: var(--text-secondary);
    font-weight: 700;
    line-height: 1.45;
}

.appointments-week-slot__events {
    display: grid;
    gap: 0.3rem;
    min-height: 2.3rem;
    align-content: start;
    overflow: visible;
}

.appointments-week-slot .appointments-agenda-card {
    width: 100%;
    height: auto;
    min-height: 2.3rem;
    padding: 0.3rem 0.36rem;
    align-content: start;
    overflow: visible;
}

.appointments-week-slot .appointments-agenda-card__head {
    grid-template-columns: 1.2rem 1fr;
    gap: 0.24rem;
}

.appointments-week-slot .appointments-agenda-card__head small,
.appointments-week-slot .appointments-agenda-card__meta small {
    display: block;
}

.appointments-week-slot .appointments-agenda-card__meta {
    display: grid;
    gap: 0.12rem;
}

.appointments-week-slot .appointments-agenda-card__meta span {
    display: block;
    margin: 0;
    font-size: 0.7rem;
    color: var(--text);
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.appointments-week-slot .appointments-agenda-card__meta small {
    display: block;
    margin: 0;
    font-size: 0.69rem;
    color: var(--text);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.appointments-week-slot__more {
    font-size: 0.66rem;
    color: var(--text-secondary);
    font-weight: 700;
}

.appointments-week-cards__empty {
    color: #6f819e;
    font-size: 0.78rem;
    margin: 0;
}

.appointments-week-cards__empty--agenda {
    border: 1px dashed var(--line);
    border-radius: 0.7rem;
    background: linear-gradient(180deg, var(--panel) 0%, var(--panel-soft) 100%);
    padding: 0.8rem 0.75rem;
    display: grid;
    gap: 0.18rem;
    text-align: center;
}

.appointments-week-cards__empty--agenda strong {
    font-size: 0.78rem;
    color: var(--text-secondary);
}

.appointments-week-cards__empty--agenda span {
    font-size: 0.7rem;
    color: #7283a0;
}

.appointments-agenda-card {
    border-left: 3px solid var(--primary);
    border-radius: 0.58rem;
    text-decoration: none;
    background: var(--panel-soft);
    color: var(--text);
    padding: 0.4rem 0.45rem;
    display: grid;
    gap: 0.2rem;
}

.appointments-agenda-card.has-quick-status {
    padding-right: 2rem;
}

.appointments-agenda-card--week {
    min-width: 0;
    padding: 0.48rem 0.52rem;
    gap: 0.16rem;
    box-shadow: 0 8px 16px rgba(35, 58, 104, 0.06);
}

.appointments-agenda-card--week:hover {
    background: var(--bg-page);
}

.appointments-agenda-card--block {
    background: var(--panel-soft);
}

.appointments-agenda-card--block:hover {
    background: var(--warning-bg);
}

.appointments-agenda-card--block .appointments-agenda-card__head strong {
    color: #6f431d;
}

.appointments-agenda-card--week .appointments-agenda-card__head {
    grid-template-columns: 1.25rem minmax(0, 1fr);
    gap: 0.3rem;
}

.appointments-agenda-card--week .appointments-agenda-card__head strong {
    min-width: 0;
    font-size: 0.76rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.appointments-agenda-card--week .appointments-agenda-card__meta {
    display: grid;
    gap: 0.08rem;
}

.appointments-agenda-card--week .appointments-agenda-card__meta span,
.appointments-agenda-card--week .appointments-agenda-card__meta small {
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.appointments-agenda-card__head {
    display: grid;
    grid-template-columns: 1.4rem 1fr;
    align-items: center;
    gap: 0.3rem;
}

.appointments-agenda-card__head strong {
    font-size: 0.78rem;
}

.appointments-agenda-card__head small {
    grid-column: 2;
    font-size: 0.68rem;
    color: var(--text-secondary);
}

.appointments-agenda-card__meta span {
    display: block;
    font-size: 0.74rem;
}

.appointments-agenda-card__meta small {
    display: block;
    font-size: 0.67rem;
    color: var(--text-secondary);
}

.appointments-agenda-card__pet {
    display: inline-flex !important;
    align-items: center;
    gap: 0.18rem;
    font-size: 0.69rem;
    color: var(--text) !important;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.appointments-month-day__item--block {
    background: var(--panel-soft);
}

.appointments-month-day__item--block strong,
.appointments-month-day__item--block small {
    color: var(--warning-text);
}

.appointments-week {
    --doctor-cols: 7;
    --doctor-col-width: 15rem;
    min-width: 52rem;
    width: max-content;
    max-width: none;
    border: 1px solid var(--line);
    border-radius: 0.8rem;
    overflow: hidden;
    display: inline-grid;
    grid-template-rows: auto minmax(0, 1fr);
}

.appointments-week__header {
    display: grid;
    grid-template-columns: 4.8rem repeat(var(--doctor-cols), var(--doctor-col-width));
    border-bottom: 1px solid var(--line);
    background: var(--panel-soft);
    position: sticky;
    top: 0;
    z-index: 6;
}

.appointments-week__time-header {
    position: sticky;
    left: 0;
    z-index: 7;
    border-right: 1px solid var(--line);
    padding: 0.55rem 0.4rem;
    font-size: 0.76rem;
    color: var(--text-secondary);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: var(--panel-soft);
}

.appointments-week__day-header {
    padding: 0.5rem 0.55rem;
    border-right: 1px solid var(--line);
    display: grid;
    gap: 0.1rem;
    text-transform: capitalize;
    min-width: 7.5rem;
}

.appointments-week__day-header:last-child {
    border-right: 0;
}

.appointments-week__day-header strong {
    font-size: 0.87rem;
}

.appointments-week__day-header span {
    font-size: 0.78rem;
    color: var(--text-secondary);
}

.doctor-header__name {
    display: grid;
    gap: 0;
    min-width: 0;
}

.doctor-header__name strong {
    font-size: 0.87rem;
    color: var(--text);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.doctor-header__last-name {
    font-size: 0.74rem;
    color: #6c7e9f;
    line-height: 1.2;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.appointments-week__body {
    display: grid;
    grid-template-columns: 4.8rem repeat(var(--doctor-cols), var(--doctor-col-width));
    align-items: start;
    position: relative;
    max-height: calc(100vh - 19rem);
    overflow-y: auto;
    overscroll-behavior-y: contain;
}

.appointments-week__header--doctors {
    grid-template-columns: 4.8rem repeat(var(--doctor-cols), var(--doctor-col-width));
}

.appointments-week__body--doctors {
    grid-template-columns: 4.8rem repeat(var(--doctor-cols), var(--doctor-col-width));
}

.appointments-week__day-header--doctor {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    justify-content: space-between;
}

.doctor-logo {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: linear-gradient(135deg, #4f86ff 0%, #2c6df5 100%);
    color: var(--text-on-solid);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    flex-shrink: 0;
}

.doctor-logo--image {
    object-fit: cover;
    border: 1px solid var(--line);
    background: var(--panel);
}

.doctor-lock-btn {
    border: 1px solid var(--line);
    background: linear-gradient(180deg, var(--panel) 0%, var(--panel-soft) 100%);
    border-radius: 999px;
    width: 1.75rem;
    height: 1.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    touch-action: manipulation;
    color: var(--text-secondary);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82);
    transition: border-color 0.16s ease, color 0.16s ease, background 0.16s ease, transform 0.16s ease;
}

.doctor-lock-btn svg {
    width: 0.9rem;
    height: 0.9rem;
    stroke: currentColor;
    stroke-width: 1.75;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.doctor-lock-btn:hover,
.doctor-lock-btn:focus-visible {
    border-color: var(--primary-line);
    color: #2c6df5;
    background: linear-gradient(180deg, var(--panel) 0%, var(--bg-page) 100%);
    transform: translateY(-1px);
    outline: 0;
}

.doctor-lock-btn.is-blocked {
    border-color: var(--danger-line);
    color: var(--danger);
    background: linear-gradient(180deg, var(--panel-soft) 0%, var(--surface-soft) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.doctor-lock-btn.is-blocked:hover,
.doctor-lock-btn.is-blocked:focus-visible {
    border-color: var(--danger-line);
    color: var(--danger-text);
    background: linear-gradient(180deg, var(--panel-soft) 0%, #ffe1e1 100%);
}

.doctor-header-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    flex-shrink: 0;
}

.appointments-week__time-col {
    position: sticky;
    left: 0;
    z-index: 4;
    border-right: 1px solid var(--line);
    background: var(--panel);
}

.appointments-week__time-tick {
    position: absolute;
    right: 0.35rem;
    transform: translateY(-50%);
    font-size: 0.63rem;
    color: var(--muted);
    font-weight: 600;
}

.appointments-week__time-tick.is-hour {
    font-size: 0.72rem;
    color: var(--text-secondary);
    font-weight: 700;
}

.appointments-week__time-tick.is-half-hour {
    font-size: 0.6rem;
    color: var(--muted);
}

.appointments-week__time-col .appointments-week__time-tick:first-child {
    transform: translateY(0);
}

.appointments-week__day-col {
    position: relative;
    border-right: 1px solid var(--line);
    cursor: pointer;
    touch-action: manipulation;
}

.appointments-week__day-col:last-child {
    border-right: 0;
}

/* Target doctor column/row highlight while dragging an appointment between
   doctors on the same day. */
.appointments-week__day-col.is-drop-target,
.appointments-week__row-track.is-drop-target {
    background: rgba(44, 109, 245, 0.08);
    box-shadow: inset 0 0 0 2px rgba(44, 109, 245, 0.55);
}

.appointments-week__grid {
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(
            to bottom,
            rgba(89, 116, 162, 0.16) 0,
            rgba(89, 116, 162, 0.16) 1px,
            transparent 1px,
            transparent var(--hour-row-height, 168px)
        ),
        repeating-linear-gradient(
            to bottom,
            transparent 0,
            transparent calc(var(--half-hour-row-height, 84px) - 1px),
            rgba(156, 175, 208, 0.26) calc(var(--half-hour-row-height, 84px) - 1px),
            rgba(156, 175, 208, 0.26) var(--half-hour-row-height, 84px)
        ),
        repeating-linear-gradient(
            to bottom,
            var(--panel) 0,
            var(--panel) calc(var(--slot-row-height, 30px) - 1px),
            var(--bg-page) calc(var(--slot-row-height, 30px) - 1px),
            var(--bg-page) var(--slot-row-height, 30px)
        );
}

.appointments-week__events {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.appointment-card {
    position: absolute;
    border: 1px solid var(--line);
    border-left: 3px solid var(--primary);
    border-radius: 5px;
    padding: 0.18rem 0.28rem 0.16rem;
    display: grid;
    gap: 0.06rem;
    text-decoration: none;
    color: var(--text);
    overflow: hidden;
    pointer-events: auto;
    align-content: start;
}

.appointment-card.has-quick-status {
    padding-right: 1.15rem;
}

.appointment-card strong {
    font-size: 0.73rem;
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.appointment-card__owner {
    font-weight: 700;
    color: var(--text);
    letter-spacing: -0.01em;
}

.appointment-card__pet-row {
    display: inline-flex;
    align-items: center;
    gap: 0.18rem;
    min-width: 0;
    font-size: 0.67rem;
    line-height: 1.08;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.appointment-card span {
    font-size: 0.68rem;
    line-height: 1.1;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.appointment-card__meta {
    color: var(--text-secondary);
}

.appointment-card small {
    display: none;
}

.appointment-card--compact {
    padding: 0.12rem 0.24rem;
    gap: 0.02rem;
}

.appointment-card--compact strong {
    font-size: 0.67rem;
    line-height: 1.05;
}

.appointment-card--compact .appointment-card__pet-row {
    font-size: 0.62rem;
    line-height: 1;
}

.appointment-card--compact span {
    font-size: 0.61rem;
    line-height: 1;
}

.appointment-card--tight {
    padding: 0.08rem 0.22rem;
    gap: 0;
}

.appointment-card--tight strong {
    font-size: 0.66rem;
    line-height: 1.02;
}

.appointment-card--tight .appointment-card__pet-row {
    display: none;
}

.appointment-card--tight span {
    font-size: 0.58rem;
    line-height: 0.98;
}

.appointment-card--split strong,
.appointment-card--split span {
    white-space: nowrap;
}

.appointment-card--block {
    box-shadow: inset 0 0 0 1px rgba(138, 91, 43, 0.18);
}

.appointment-card--block strong {
    color: #6f431d;
}

.appointment-card--block span {
    color: var(--warning-text);
}

/* Drag-to-resize grips on the time edges of a day-grid appointment card.
   Vertical layout: start = top edge, end = bottom edge.
   Horizontal layout: start = left edge, end = right edge.
   Grips sit inside the card's overflow:hidden box so they never escape the
   rounded corners. */
.appointment-card__resize-handle {
    position: absolute;
    z-index: 3;
    pointer-events: auto;
    touch-action: none;
}

.appointment-card__resize-handle::after {
    content: '';
    position: absolute;
    border-radius: 2px;
    background: currentColor;
    opacity: 0.28;
    transition: opacity 0.12s ease;
}

.appointment-card:hover .appointment-card__resize-handle::after,
.appointment-card.is-resizing .appointment-card__resize-handle::after {
    opacity: 0.7;
}

/* Vertical layout (default): full-width grips on the top/bottom edges. */
.appointment-card__resize-handle--start,
.appointment-card__resize-handle--end {
    left: 0;
    right: 0;
    height: 9px;
    cursor: ns-resize;
}

.appointment-card__resize-handle--start {
    top: 0;
}

.appointment-card__resize-handle--end {
    bottom: 0;
}

.appointment-card__resize-handle--start::after,
.appointment-card__resize-handle--end::after {
    left: 50%;
    width: 22px;
    height: 3px;
    transform: translateX(-50%);
}

.appointment-card__resize-handle--start::after {
    top: 2px;
}

.appointment-card__resize-handle--end::after {
    bottom: 2px;
}

/* Horizontal layout: full-height grips on the left/right edges. */
.appointments-week--horizontal .appointment-card__resize-handle--start,
.appointments-week--horizontal .appointment-card__resize-handle--end {
    left: auto;
    right: auto;
    top: 0;
    bottom: 0;
    width: 9px;
    height: auto;
    cursor: ew-resize;
}

.appointments-week--horizontal .appointment-card__resize-handle--start {
    left: 0;
}

.appointments-week--horizontal .appointment-card__resize-handle--end {
    right: 0;
}

.appointments-week--horizontal .appointment-card__resize-handle--start::after,
.appointments-week--horizontal .appointment-card__resize-handle--end::after {
    left: auto;
    top: 50%;
    width: 3px;
    height: 22px;
    transform: translateY(-50%);
}

.appointments-week--horizontal .appointment-card__resize-handle--start::after {
    left: 2px;
}

.appointments-week--horizontal .appointment-card__resize-handle--end::after {
    right: 2px;
}

.appointment-card.is-resizing {
    z-index: 6;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.18);
}

.appointment-resize-bubble {
    position: fixed;
    z-index: 60;
    padding: 0.2rem 0.45rem;
    border-radius: 6px;
    background: var(--overlay-solid);
    color: var(--text-on-solid);
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    pointer-events: none;
    transform: translate(-50%, calc(-100% - 12px));
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.25);
}

.has-quick-status::after {
    content: '⋯';
    position: absolute;
    top: 0.28rem;
    right: 0.28rem;
    width: 1rem;
    height: 1rem;
    border-radius: 999px;
    border: 1px solid rgba(199, 211, 232, 0.95);
    background: rgba(255, 255, 255, 0.92);
    color: var(--text-secondary);
    font-size: 0.76rem;
    font-weight: 800;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(29, 46, 76, 0.08);
    opacity: 0.72;
    transition: opacity 0.16s ease, transform 0.16s ease, border-color 0.16s ease;
}

.has-quick-status:hover::after,
.has-quick-status:focus-visible::after {
    opacity: 1;
    transform: translateY(-1px);
    border-color: var(--primary-line);
}

.appointment-card--tight.has-quick-status::after,
.appointment-card--compact.has-quick-status::after {
    top: 0.18rem;
    right: 0.18rem;
    width: 0.82rem;
    height: 0.82rem;
    font-size: 0.62rem;
}

.appointments-now-line {
    position: absolute;
    left: 4.8rem;
    right: 0;
    height: 2px;
    background: #15a9b8;
    z-index: 5;
    pointer-events: none;
}

.appointments-now-line__label {
    position: absolute;
    left: -4.6rem;
    top: -0.75rem;
    background: #15a9b8;
    color: var(--text-on-solid);
    border-radius: 0.35rem;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 0.12rem 0.28rem;
    line-height: 1;
}

/* Day view — horizontal orientation: doctors become stacked rows and
 * time runs left→right. Transposes the vertical .appointments-week grid. */
.appointments-week--horizontal {
    --row-label-width: 13rem;
    display: flex;
    flex-direction: column;
    width: max-content;
    min-width: 100%;
}

.appointments-week--horizontal .appointments-week__header {
    display: flex;
    flex: 0 0 auto;
    align-items: stretch;
    grid-template-columns: none;
}

.appointments-week--horizontal .appointments-week__corner {
    position: sticky;
    left: 0;
    z-index: 8;
    flex: 0 0 var(--row-label-width);
    width: var(--row-label-width);
    display: flex;
    align-items: center;
    padding: 0.55rem 0.6rem;
    background: var(--panel-soft);
    border-right: 1px solid var(--line);
    font-size: 0.76rem;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.appointments-week--horizontal .appointments-week__time-track {
    position: relative;
    flex: 0 0 auto;
    height: 2.3rem;
    background: var(--panel-soft);
}

.appointments-week--horizontal .appointments-week__time-tick {
    top: 50%;
    right: auto;
    transform: translate(-50%, -50%);
}

.appointments-week--horizontal .appointments-week__time-tick:first-child {
    transform: translate(0, -50%);
}

.appointments-week--horizontal .appointments-week__body {
    display: block;
    grid-template-columns: none;
    position: relative;
    max-height: calc(100vh - 19rem);
    overflow-y: auto;
    overscroll-behavior-y: contain;
}

.appointments-week__doctor-row {
    display: flex;
    align-items: stretch;
    border-bottom: 1px solid var(--line);
}

.appointments-week__doctor-row:last-child {
    border-bottom: 0;
}

.appointments-week__row-label {
    position: sticky;
    left: 0;
    z-index: 6;
    flex: 0 0 var(--row-label-width);
    width: var(--row-label-width);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    justify-content: space-between;
    padding: 0.4rem 0.6rem;
    background: var(--panel);
    border-right: 1px solid var(--line);
}

.appointments-week__row-track {
    position: relative;
    flex: 0 0 auto;
    min-height: 3.25rem;
    cursor: pointer;
    touch-action: manipulation;
}

.appointments-week--horizontal .appointments-week__grid {
    background:
        repeating-linear-gradient(
            to right,
            rgba(89, 116, 162, 0.16) 0,
            rgba(89, 116, 162, 0.16) 1px,
            transparent 1px,
            transparent var(--hour-row-height, 168px)
        ),
        repeating-linear-gradient(
            to right,
            transparent 0,
            transparent calc(var(--half-hour-row-height, 84px) - 1px),
            rgba(156, 175, 208, 0.26) calc(var(--half-hour-row-height, 84px) - 1px),
            rgba(156, 175, 208, 0.26) var(--half-hour-row-height, 84px)
        ),
        repeating-linear-gradient(
            to right,
            var(--panel) 0,
            var(--panel) calc(var(--slot-row-height, 30px) - 1px),
            var(--bg-page) calc(var(--slot-row-height, 30px) - 1px),
            var(--bg-page) var(--slot-row-height, 30px)
        );
}

.appointments-week--horizontal .appointments-week__doctor-off {
    left: auto;
    right: auto;
    top: 0;
    bottom: 0;
    height: auto;
}

.appointments-week--horizontal .appointments-now-line {
    left: 0;
    right: auto;
    top: 0;
    bottom: 0;
    width: 2px;
    height: auto;
    margin-left: var(--row-label-width);
}

.appointments-week--horizontal .appointments-now-line__label {
    left: 50%;
    top: 0;
    transform: translate(-50%, -100%);
}

body.modal-open {
    overflow: hidden;
}

.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(25, 37, 58, 0.48);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    z-index: 1200;
}

.modal-overlay.is-open {
    display: flex;
}

.appointment-quick-actions {
    position: fixed;
    z-index: 1235;
    width: min(22rem, calc(100vw - 1.5rem));
    border: 1px solid var(--line);
    border-radius: 1rem;
    background: linear-gradient(180deg, var(--panel) 0%, var(--panel-soft) 100%);
    box-shadow: 0 22px 44px rgba(18, 34, 59, 0.2);
    padding: 0.85rem;
    display: grid;
    gap: 0.75rem;
}

.appointment-quick-actions[hidden] {
    display: none !important;
}

.appointment-quick-actions__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.8rem;
}

.appointment-quick-actions__head strong,
.appointment-quick-actions__status-row,
.appointment-quick-actions__option strong {
    color: var(--text);
}

.appointment-quick-actions__head strong {
    display: block;
    font-size: 0.98rem;
    line-height: 1.2;
}

.appointment-quick-actions__head span {
    display: block;
    margin-top: 0.16rem;
    color: #677a97;
    font-size: 0.84rem;
    line-height: 1.35;
}

.appointment-quick-actions__close {
    width: 2rem;
    height: 2rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--panel-soft);
    color: var(--text-secondary);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.appointment-quick-actions__status-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.7rem;
    flex-wrap: wrap;
}

.appointment-quick-actions__status,
.appointment-quick-actions__hint {
    font-size: 0.8rem;
}

.appointment-quick-actions__status {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.32rem 0.55rem;
    border-radius: 999px;
    font-weight: 700;
    border: 1px solid var(--line);
    background: var(--panel-soft);
}

.appointment-quick-actions__status--primary {
    color: var(--primary-strong);
}

.appointment-quick-actions__status--info {
    color: #1a7782;
    background: var(--panel-soft);
    border-color: var(--success-line);
}

.appointment-quick-actions__status--success {
    color: var(--success-text);
    background: var(--panel-soft);
    border-color: #bce3ca;
}

.appointment-quick-actions__status--warning {
    color: var(--warning-text);
    background: var(--panel-soft);
    border-color: var(--warning-line);
}

.appointment-quick-actions__status--danger {
    color: var(--danger-text);
    background: var(--bg-page);
    border-color: var(--danger-line);
}

.appointment-quick-actions__status--muted {
    color: var(--text-secondary);
    background: var(--panel-soft);
    border-color: var(--line);
}

.appointment-quick-actions__hint {
    color: #74839a;
    font-weight: 600;
}

.appointment-quick-actions__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
}

.appointment-quick-actions__option {
    text-align: left;
    border: 1px solid var(--line);
    border-radius: 0.9rem;
    background: var(--panel);
    padding: 0.72rem;
    display: grid;
    gap: 0.22rem;
    cursor: pointer;
    transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease, background 0.16s ease;
}

.appointment-quick-actions__option:hover:not(:disabled),
.appointment-quick-actions__option:focus-visible:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 10px 20px rgba(31, 51, 83, 0.1);
}

.appointment-quick-actions__option strong {
    font-size: 0.9rem;
    line-height: 1.2;
}

.appointment-quick-actions__option span {
    font-size: 0.79rem;
    line-height: 1.35;
    color: #6c7d95;
}

.appointment-quick-actions__option:disabled {
    cursor: default;
    opacity: 1;
}

.appointment-quick-actions__option.is-active {
    box-shadow: inset 0 0 0 1px rgba(29, 50, 82, 0.06);
}

.appointment-quick-actions__option--info {
    border-color: var(--success-line);
    background: linear-gradient(180deg, var(--panel) 0%, var(--panel-soft) 100%);
}

.appointment-quick-actions__option--success {
    border-color: #b9dec8;
    background: linear-gradient(180deg, var(--panel) 0%, var(--panel-soft) 100%);
}

.appointment-quick-actions__option--warning {
    border-color: var(--warning-line);
    background: linear-gradient(180deg, var(--panel) 0%, var(--panel-soft) 100%);
}

.appointment-quick-actions__option--danger {
    border-color: var(--danger-line);
    background: linear-gradient(180deg, var(--panel) 0%, var(--panel-soft) 100%);
}

.appointment-quick-actions__option.is-loading {
    opacity: 0.72;
}

.appointment-quick-actions__footer {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.45rem;
    flex-wrap: wrap;
    width: 100%;
}

.appointment-quick-actions__footer [data-appointment-quick-delete] {
    margin-left: auto !important;
}

.appointment-toast-stack {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 1240;
    display: grid;
    gap: 0.55rem;
    pointer-events: none;
}

.appointment-toast {
    min-width: 14rem;
    max-width: min(24rem, calc(100vw - 2rem));
    border-radius: 0.85rem;
    border: 1px solid var(--line);
    background: var(--panel);
    color: var(--text);
    padding: 0.72rem 0.88rem;
    box-shadow: 0 16px 28px rgba(19, 35, 61, 0.16);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.appointment-toast.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.appointment-toast--success {
    background: var(--panel-soft);
    border-color: #b9dec8;
    color: var(--success-text);
}

.appointment-toast--error {
    background: var(--bg-page);
    border-color: var(--danger-line);
    color: var(--danger-text);
}

.modal-window {
    width: min(100%, 64rem);
    max-height: calc(100vh - 2rem);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    isolation: isolate;
    border-radius: 1rem;
    border: 1px solid var(--line);
    background: var(--panel);
    box-shadow: 0 24px 44px rgba(22, 39, 72, 0.28);
}

.modal-head {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--panel);
    border-bottom: 1px solid var(--line);
    padding: 0.8rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
}

.modal-body {
    padding: 0.9rem 1rem 1rem;
    overflow-y: auto;
    overflow-x: hidden;
    flex: 1 1 auto;
    min-height: 0;
}

.nir-editor-section {
    padding: 0.75rem;
    border-radius: 0.85rem;
}

.nir-editor-section > h4 {
    margin: 0 0 0.45rem;
    font-size: 0.98rem;
}

.modal-foot {
    position: sticky;
    bottom: 0;
    z-index: 20;
    background: var(--panel);
    border-top: 1px solid var(--line);
    padding: 0.75rem 1rem;
}

.modal-foot .form-actions {
    margin: 0;
    justify-content: flex-end;
    flex-wrap: nowrap;
}

.modal-window .ts-wrapper {
    position: relative;
    z-index: 1;
}

.modal-window .ts-wrapper.dropdown-active {
    z-index: 12;
}

.modal-window .ts-dropdown {
    z-index: 12;
}

.quick-form .form-grid {
    margin-top: 0;
}

.appointment-form--modal {
    --control-min-height: 2.55rem;
    --control-padding-y: 0.5rem;
    --control-padding-x: 0.72rem;
    --control-font-size: 0.92rem;
    gap: 0.7rem;
}

.appointment-form--modal .form-grid {
    margin-top: 0.55rem;
    gap: 0.6rem;
}

.appointment-form--modal .form-section-sep {
    margin-top: 0.2rem;
    padding-top: 0.75rem;
}

.appointment-form--modal .appointment-form__section h3,
.appointment-form--modal > section > h3 {
    margin: 0;
    font-size: 1.02rem;
    line-height: 1.2;
}

.appointment-form--modal .form-intro {
    display: none;
}

.appointment-form--modal label {
    gap: 0.28rem;
    font-size: 0.8rem;
}

.appointment-form--modal .appointment-form__grid--compact {
    align-items: start;
}

.appointment-form--modal .appointment-form__field--span-2 {
    grid-column: span 2;
}

.appointment-form--modal textarea {
    line-height: 1.32;
}

.appointment-form--modal .hint,
.appointment-form--modal .form-help,
.appointment-form--modal small {
    font-size: 0.8rem;
    color: #7f8aa0;
}

.appointment-form--modal .appointment-form__actions {
    margin-top: 0.4rem;
    padding-top: 0.2rem;
    gap: 0.55rem;
}

.appointment-form--modal .appointment-form__actions .btn {
    min-height: 2.45rem;
    padding: 0.52rem 0.8rem;
}

.quick-form__row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.8rem;
}

.quick-form__row[hidden] {
    display: none !important;
}

.quick-form__empty {
    min-height: 1px;
}

.quick-form label.required {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
}

@media (max-width: 900px) {
    .quick-form__row {
        grid-template-columns: 1fr;
    }

    .appointment-quick-actions__grid {
        grid-template-columns: 1fr;
    }

    .consent-template-layout,
    .consent-document-summary {
        grid-template-columns: 1fr;
    }

    .consent-template-sidebar {
        position: static;
    }

    .consent-document-item,
    .consent-documents-card__head,
    .consent-document-preview__header {
        grid-template-columns: 1fr;
        display: grid;
    }

    .consent-document-item__actions {
        justify-content: flex-start;
    }
}

.point-list {
    display: grid;
    gap: 0.65rem;
}

.point-card {
    border: 1px solid var(--line);
    border-radius: 0.75rem;
    background: var(--panel-soft);
    padding: 0.7rem;
}

.point-card h4 {
    margin: 0;
}

.schedule-compact {
    margin-top: 0.45rem;
    display: grid;
    gap: 0.2rem;
}

.schedule-compact__row {
    display: grid;
    grid-template-columns: 6.5rem 1fr;
    gap: 0.4rem;
    font-size: 0.84rem;
}

.schedule-compact__day {
    color: var(--text-secondary);
    font-weight: 700;
}

.form-actions--sticky {
    position: sticky;
    bottom: max(0.2rem, env(safe-area-inset-bottom));
    padding: 0.7rem 0;
    margin-top: 0.9rem;
    z-index: 8;
    border-top: 1px solid var(--line);
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--panel) 35%);
}

.auth-page {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 1rem;
    background: linear-gradient(180deg, var(--surface-soft) 0%, var(--bg-page) 100%);
}

.auth-card {
    width: min(100%, 30rem);
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 1rem;
    box-shadow: var(--shadow);
    padding: 1.2rem;
    display: grid;
    gap: 1rem;
}

.auth-card--wide {
    width: min(100%, 50rem);
}

.auth-card__brand {
    display: flex;
    justify-content: center;
    margin-bottom: 0.25rem;
}

.auth-card__brand img {
    width: 180px;
    height: auto;
    max-width: 100%;
}

:root[data-theme='dark'] img[src*="cloudvet_wordmark"] {
    filter: brightness(0) invert(1);
}

/* ── Standalone error pages (403 / 404 / 500) ─────────────────────────── */
.error-state {
    --error-accent: var(--primary);
    --error-accent-ghost: var(--primary-ghost);
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 1.5rem;
    background: linear-gradient(180deg, var(--surface-soft) 0%, var(--bg-page) 100%);
}

.error-state--danger {
    --error-accent: var(--danger);
    --error-accent-ghost: var(--danger-bg);
}

.error-state--warning {
    --error-accent: var(--warning);
    --error-accent-ghost: var(--warning-bg);
}

.error-state--info {
    --error-accent: var(--primary);
    --error-accent-ghost: var(--primary-ghost);
}

.error-card {
    width: min(100%, 32rem);
    background: var(--panel);
    border: 1px solid var(--line);
    border-left: 3px solid var(--error-accent);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    padding: 2rem 1.75rem;
    display: grid;
    justify-items: start;
    gap: 0.75rem;
    text-align: left;
}

.error-card__brand {
    display: inline-flex;
    margin-bottom: 0.5rem;
}

.error-card__brand img {
    width: 150px;
    height: auto;
    max-width: 100%;
}

.error-code {
    font-size: 4.5rem;
    line-height: 0.95;
    font-weight: 700;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    color: var(--error-accent);
    margin: 0.25rem 0 0;
}

.error-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.25rem 0.6rem 0.25rem 0.4rem;
    border-left: 2.5px solid var(--error-accent);
    background: var(--error-accent-ghost);
    color: var(--error-accent);
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: 0 var(--radius-sm, 4px) var(--radius-sm, 4px) 0;
}

.error-badge__icon {
    display: inline-flex;
}

.error-badge__icon svg {
    width: 15px;
    height: 15px;
}

.error-title {
    margin: 0.25rem 0 0;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text);
    line-height: 1.2;
}

.error-text {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.55;
    max-width: 42ch;
}

.error-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 0.75rem;
}

:root[data-theme='dark'] .error-state {
    background: linear-gradient(180deg, #0a1424 0%, var(--bg-page) 100%);
}

:root[data-theme='dark'] .error-card {
    background: var(--panel);
}

@media (max-width: 480px) {
    .error-code {
        font-size: 3.5rem;
    }

    .error-actions .btn {
        width: 100%;
    }
}

.auth-card__head p {
    margin-top: 0.35rem;
    color: var(--muted);
}

.auth-divider {
    text-align: center;
    color: var(--muted);
    font-size: 0.84rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.auth-social {
    display: grid;
    gap: 0.5rem;
}

.auth-social__btn {
    text-align: center;
}

.auth-footnote {
    color: var(--muted);
    font-size: 0.9rem;
}

.remember-check {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--muted);
    font-size: 0.9rem;
}

.remember-check input {
    width: auto;
}

.password-input-wrap {
    position: relative;
}

.password-input-wrap input {
    padding-right: 6.1rem;
}

.password-toggle-btn {
    position: absolute;
    top: 50%;
    right: 0.55rem;
    transform: translateY(-50%);
    border: 1px solid var(--line);
    background: var(--panel-soft);
    color: var(--text);
    border-radius: 0.55rem;
    padding: 0.28rem 0.45rem;
    font-size: 0.78rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
    cursor: pointer;
}

.password-toggle-btn svg {
    width: 0.9rem;
    height: 0.9rem;
    fill: currentColor;
}

@media (max-width: 1200px) {
    .app-shell {
        grid-template-columns: 14rem 1fr;
    }

    .topbar__tools {
        width: 100%;
        justify-content: flex-start;
    }

    .kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .quick-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .appointments-week-cards {
        min-width: 48rem;
        grid-template-columns: repeat(7, minmax(8.5rem, 1fr));
    }

    .appointments-month-day {
        min-height: 7.4rem;
    }

    .appointments-week {
        --doctor-col-width: 13.5rem;
    }

    .consult-summary,
    .consult-summary--compact {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .consult-intake__grid {
        grid-template-columns: 1fr;
    }

    .consult-wizard-shell {
        grid-template-columns: 1fr;
    }

    .consult-wizard-sidebar {
        position: static;
    }

    .consult-summary__item--wide {
        grid-column: span 2;
    }
}

@media (max-width: 1280px) {
    .app-shell-wrap {
        padding: 0.14rem;
    }

    .app-shell {
        height: auto;
        min-height: auto;
        grid-template-columns: 1fr;
        overflow: visible;
    }

    .sidebar {
        max-height: none;
        border-right: 0;
        border-bottom: 1px solid var(--line);
        overflow-y: visible;
        padding-bottom: 0.9rem;
    }

    .consult-hero {
        grid-template-columns: 1fr;
    }

    .consult-overview-layout {
        grid-template-columns: minmax(0, 1.45fr) minmax(17rem, 0.9fr);
    }
}

@media (max-width: 960px) {
    .app-shell-wrap {
        padding: 0.12rem;
    }

    .app-shell {
        height: auto;
        min-height: auto;
        grid-template-columns: 1fr;
        overflow: visible;
    }

    .session-corner {
        max-width: calc(100% - 0.8rem);
    }

    .sidebar {
        max-height: none;
        border-right: 0;
        border-bottom: 1px solid var(--line);
        overflow-y: visible;
    }

    .board-grid,
    .quick-grid,
    .form-grid,
    .form-grid--3,
    .form-grid--4,
    .form-grid--5,
    .form-grid--objective,
    .consult-summary,
    .consult-summary--compact,
    .consult-rich,
    .staff-row {
        grid-template-columns: 1fr;
    }

    .consult-summary__item--wide,
    .consult-rich__item--full {
        grid-column: auto;
    }

    .consult-overview-layout,
    .consult-hero__stats,
    .consult-vitals-grid {
        grid-template-columns: 1fr;
    }

    .consult-overview-layout__side {
        position: static;
    }

    .consult-doc-gallery {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .consult-intake__head,
    .consult-intake-card__grid {
        grid-template-columns: 1fr;
    }

    .consult-step-grid {
        grid-template-columns: 1fr;
    }

    .consult-intake__head {
        display: grid;
    }

    .consult-wizard-step {
        grid-template-columns: 2rem 1fr;
    }

    .consult-intake__badge {
        white-space: normal;
    }

    .filters-grid,
    .detail-grid {
        grid-template-columns: 1fr;
    }

    .resource-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .resource-toolbar .btn {
        align-self: flex-start;
    }

    .consultation-list-cell--status {
        min-width: 0;
    }

    .consultation-list-chip {
        white-space: normal;
    }

    .consultation-list-hover-panel {
        display: none;
    }

    .workspace__header,
    .welcome-row {
        align-items: start;
        flex-direction: column;
    }

    .searchbox input {
        min-width: 100%;
    }

    .appointments-week {
        --doctor-col-width: 11.5rem;
        min-width: 36rem;
    }

    .appointments-calendar__toolbar:not(.appointments-calendar__toolbar--compact) {
        display: grid;
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .appointments-calendar__head {
        align-items: stretch;
    }

    .appointments-calendar__toolbar:not(.appointments-calendar__toolbar--compact) .appointments-calendar__nav,
    .appointments-calendar__toolbar:not(.appointments-calendar__toolbar--compact) .appointments-calendar__views,
    .appointments-calendar__toolbar:not(.appointments-calendar__toolbar--compact) .appointments-calendar__meta {
        width: 100%;
    }

    .appointments-calendar__toolbar:not(.appointments-calendar__toolbar--compact) .appointments-calendar__views {
        justify-content: space-between;
    }

    .appointments-calendar__toolbar:not(.appointments-calendar__toolbar--compact) .appointments-calendar__views .btn {
        flex: 1;
    }

    .appointments-calendar__toolbar:not(.appointments-calendar__toolbar--compact) .appointments-calendar__meta input {
        min-width: 0;
        width: 100%;
    }

    .appointments-calendar__meta strong {
        text-align: left;
        flex-basis: 100%;
    }

    .consult-mode-toggle__option {
        flex: 1 1 100%;
    }

    .consult-mode-toggle__option span {
        width: 100%;
    }

    .consult-step-actions {
        justify-content: stretch;
    }

    .consult-step-actions .btn {
        flex: 1 1 100%;
    }

    .appointments-day-strip {
        grid-auto-columns: minmax(4.6rem, 1fr);
    }

    .appointments-week-cards {
        min-width: 46rem;
    }

    .appointments-month-grid {
        padding: 0.45rem;
    }

    .appointments-month-grid__head,
    .appointments-month-grid__body {
        gap: 0.25rem;
    }

    .appointments-month-day {
        min-height: 6.8rem;
        padding: 0.25rem;
    }

.appointments-month-day__item {
        grid-template-columns: 1.2rem 2.5rem 1fr;
        gap: 0.12rem;
    }

    .appointments-month-day__item strong {
        font-size: 0.68rem;
    }
}

.appointments-month-day__item.has-quick-status {
    padding-right: 1.85rem;
}

@media (max-width: 1800px) {
    .appointments-calendar__toolbar {
        grid-template-columns: 1fr 1fr;
        align-items: start;
    }

    .appointments-calendar__meta {
        grid-column: 1 / -1;
        justify-content: flex-start;
    }

    .appointments-calendar__meta input {
        flex: 1 1 16rem;
        min-width: 14rem;
    }

    .appointments-calendar__meta strong {
        flex-basis: 100%;
        text-align: left;
    }
}

@media (max-width: 1600px) {
    .app-shell-wrap {
        padding: 0.14rem;
    }

    .app-shell {
        grid-template-columns: 13rem 1fr;
    }

    .sidebar {
        padding: 1rem 0.75rem;
    }

    .menu__item,
    .menu__group summary {
        padding-left: 0.6rem;
        padding-right: 0.6rem;
    }

    .topbar {
        padding: 0.75rem 0.85rem;
    }

    .topbar h2 {
        font-size: 1.45rem;
    }

    .topbar__smartbar {
        grid-template-columns: minmax(0, 1fr);
    }

    .appointments-calendar__head {
        gap: 0.5rem;
    }

    .calendar-legend {
        width: 100%;
        margin-left: 0;
    }

    .appointments-calendar__toolbar:not(.appointments-calendar__toolbar--compact) {
        grid-template-columns: 1fr;
        gap: 0.55rem;
    }

    .appointments-calendar__toolbar:not(.appointments-calendar__toolbar--compact) .appointments-calendar__nav,
    .appointments-calendar__toolbar:not(.appointments-calendar__toolbar--compact) .appointments-calendar__views,
    .appointments-calendar__toolbar:not(.appointments-calendar__toolbar--compact) .appointments-calendar__meta {
        width: 100%;
        justify-content: flex-start;
    }
}

@media (max-width: 960px) {
    .dashboard-search.is-open .dashboard-search__panel {
        top: 0.7rem;
        width: calc(100vw - 1rem);
    }

    .dashboard-search__results-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .app-shell-wrap {
        padding: 0.1rem;
    }

    .topbar,
    .workspace__header {
        padding: 0.7rem 0.75rem;
    }

    .session-corner {
        top: 0.15rem;
        right: 0.15rem;
        gap: 0.25rem;
        padding: 0.2rem 0.25rem;
    }

    .session-corner__meta span {
        display: none;
    }

    .topbar h2,
    .workspace__header h2 {
        font-size: 1.28rem;
    }

    .topbar__tools {
        gap: 0.45rem;
    }

    .topbar__tools .searchbox {
        flex: 1 1 100%;
        min-width: 0;
    }

    .topbar__actions-row > .btn,
    .topbar__tools > .btn {
        flex: 1 1 auto;
    }

    .dashboard-search__box input {
        min-height: 3rem;
        padding-left: 0.82rem;
        padding-right: 4.85rem;
    }

    .dashboard-search__shortcut {
        right: 0.65rem;
        min-width: 2.95rem;
        height: 1.72rem;
        padding: 0 0.42rem;
        font-size: 0.68rem;
    }

    .topbar-live-card {
        min-height: 0;
        padding: 0.56rem 0.7rem;
    }

    .appointments-calendar {
        padding: 0.55rem;
    }

    .appointments-calendar__head {
        gap: 0.45rem;
        margin-bottom: 0.45rem;
    }

    .appointments-calendar__head h3 {
        font-size: 1.05rem;
    }

    .appointments-calendar__head .muted {
        font-size: 0.92rem;
    }

    .appointments-calendar__views .btn {
        min-width: 0;
    }

    .appointments-day-strip {
        gap: 0.35rem;
        padding-bottom: 0.45rem;
    }

    .appointments-day-pill {
        border-radius: 0.62rem;
        padding: 0.35rem 0.25rem;
    }

    .appointments-day-pill strong {
        font-size: 0.8rem;
    }

    .appointments-grid-wrap {
        margin-left: -0.2rem;
        margin-right: -0.2rem;
        padding: 0 0.2rem;
    }

    .appointments-week {
        --doctor-col-width: 10.2rem;
        min-width: 32rem;
    }

    .appointments-week__header,
    .appointments-week__body,
    .appointments-week__header--doctors,
    .appointments-week__body--doctors {
        grid-template-columns: 3.9rem repeat(var(--doctor-cols), var(--doctor-col-width));
    }

    .appointments-week__time-header {
        padding: 0.45rem 0.25rem;
        font-size: 0.7rem;
    }

    .appointments-week__time-tick {
        right: 0.22rem;
        font-size: 0.66rem;
    }

    .appointments-week__day-header {
        padding: 0.42rem 0.34rem;
    }

    .doctor-logo {
        width: 1.7rem;
        height: 1.7rem;
        font-size: 0.67rem;
    }

    .doctor-lock-btn {
        width: 1.45rem;
        height: 1.45rem;
    }

    .doctor-lock-btn svg {
        width: 0.76rem;
        height: 0.76rem;
    }

    .appointments-now-line {
        left: 3.9rem;
    }

    .appointments-now-line__label {
        left: -3.72rem;
    }

    .appointments-week-cards {
        min-width: 34rem;
    }

    .appointments-month-grid {
        overflow-x: auto;
    }

    .appointments-month-grid__head,
    .appointments-month-grid__body {
        min-width: 30rem;
    }

    .appointments-month-day {
        min-height: 6.2rem;
    }

    .appointments-month-day__item small {
        font-size: 0.62rem;
    }
}

@media (max-width: 420px) {
    .appointments-week {
        --doctor-col-width: 9.4rem;
        min-width: 28rem;
    }

    .appointments-day-pill small {
        font-size: 0.62rem;
    }

    .appointments-day-pill strong {
        font-size: 0.75rem;
    }
}

/* Responsive hardening: keep this block last so smaller breakpoints always win. */
@media (max-width: 1400px) {
    .app-shell {
        grid-template-columns: 12rem 1fr;
    }

    .workspace {
        padding: 0.85rem 0.9rem 0.95rem;
    }
}

@media (max-width: 1280px) {
    html:has(.app-shell-wrap),
    body:has(.app-shell-wrap) {
        height: auto;
        max-height: none;
        overflow: visible;
    }

    .app-shell-wrap {
        height: auto;
        max-height: none;
        overflow: visible;
    }

    .app-shell {
        grid-template-columns: 1fr;
        height: auto;
        overflow: visible;
    }

    .sidebar {
        border-right: 0;
        border-bottom: 1px solid var(--line);
        max-height: none;
        overflow-y: visible;
        padding: 0.8rem;
    }

    .workspace {
        padding: 0.8rem;
        /* `clip` (not `hidden`) on x keeps overflow-y as `visible`. With
           `hidden` the spec forces the other axis to `auto`, turning .workspace
           into an unintended scroll container with no constrained height, which
           swallows wheel events (overscroll-behavior: contain) and breaks
           document-level scrolling on short laptop viewports. */
        overflow-y: visible;
        overflow-x: clip;
    }

    .topbar__page-row {
        flex-wrap: wrap;
        align-items: flex-start;
    }

    .topbar__actions-row {
        justify-content: flex-start;
        width: 100%;
    }

    .topbar__actions-row > .btn {
        flex: 0 1 auto;
    }
}

@media (max-width: 1024px) {
    .topbar h2,
    .workspace__header h2 {
        font-size: 1.34rem;
    }

    .filters-grid,
    .filters-grid--compact,
    .detail-grid,
    .form-grid,
    .form-grid--3,
    .form-grid--4,
    .form-grid--5,
    .form-grid--objective,
    .consult-summary,
    .consult-summary--compact,
    .consult-rich,
    .staff-row,
    .schedule-row,
    .board-grid,
    .quick-grid {
        grid-template-columns: 1fr;
    }

    .date-range-filter__custom {
        grid-column: auto;
    }

    .appointment-form--modal .appointment-form__field--span-2 {
        grid-column: auto;
    }

    .resource-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .resource-toolbar .btn {
        align-self: flex-start;
    }

    .consult-hero__main h2 {
        font-size: 1.46rem;
    }

    .table {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .table .table-check-col,
    .table .table-actions {
        white-space: nowrap;
    }

    .table-col--hide-tablet {
        display: none !important;
    }

    .appointments-week-cards {
        min-width: 40rem;
    }
}

@media (max-width: 768px) {
    .table th,
    .table td {
        padding: 0.45rem 0.35rem;
        font-size: 0.88rem;
    }

    .table th {
        font-size: 0.72rem;
    }

    .table-col--hide-mobile {
        display: none !important;
    }

    .bulk-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .bulk-actions select {
        min-width: unset;
        width: 100%;
    }

    .bulk-selection-bar {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
    }

    .pagination {
        justify-content: center;
    }

    .pagination__info {
        width: 100%;
        text-align: center;
        margin-bottom: 0.3rem;
    }

    .table .table-actions .btn--small {
        font-size: 0.76rem;
        padding: 0.28rem 0.5rem;
    }

    .filters-grid label,
    .filters-grid--compact label {
        font-size: 0.85rem;
    }
}

@media (max-width: 1440px) {
    .topbar h2,
    .workspace__header h2 {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
    }
}

@media (max-width: 1200px) {
    .sale-cashier__layout {
        grid-template-columns: 1fr;
    }

    .sale-cashier__summary {
        position: static;
    }

    .sale-line-editor__row--meta {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sale-product-select {
        min-width: 0;
    }
}

@media (max-width: 900px) {
    .sale-line-editor__row--meta {
        grid-template-columns: 1fr;
    }

    .sale-open-drafts-copy,
    .sale-open-drafts-head > .btn {
        flex-basis: 100%;
        margin-left: 0;
    }
}

@media (max-width: 768px) {
    .app-shell-wrap {
        padding: 0.08rem;
    }

    .topbar,
    .workspace__header,
    .panel,
    .card {
        padding: 0.72rem;
    }

    .pet-view__hero-main,
    .pet-kpi-card {
        padding-left: 0.82rem;
        padding-right: 0.82rem;
    }

    .pet-weight-chart__canvas {
        height: 11.5rem;
    }

    .pet-weight-history-list__item {
        align-items: flex-start;
        flex-direction: column;
    }

    .consult-hero__main,
    .consult-kpi-card,
    .consult-block,
    .consult-block--compact {
        padding-left: 0.82rem;
        padding-right: 0.82rem;
    }

    .consult-doc-gallery {
        grid-template-columns: 1fr;
    }

    .dashboard-search {
        flex: 1 1 100%;
        min-width: 0;
    }

    .topbar__utility-row,
    .topbar__page-row {
        gap: 0.42rem;
    }

    .topbar__page-title {
        gap: 0.38rem;
    }

    .searchbox input {
        min-width: 0;
    }

    .topbar__actions-row > .btn {
        flex: 1 1 calc(50% - 0.25rem);
    }

    .menu__label {
        margin-top: 0.55rem;
    }

    .appointments-week {
        --doctor-col-width: 9.8rem;
        min-width: 30rem;
    }

    .appointments-week-cards {
        min-width: 31rem;
    }

    .appointments-month-grid__head,
    .appointments-month-grid__body {
        min-width: 26rem;
    }
}

@media (max-width: 560px) {
    .sidebar-session {
        grid-template-columns: 1fr;
    }

    .topbar h2,
    .workspace__header h2 {
        font-size: 1.16rem;
    }

    .topbar__tools > .btn {
        flex: 1 1 100%;
    }

    .appointments-week {
        --doctor-col-width: 8.9rem;
        min-width: 26rem;
    }

    .appointments-week-cards {
        min-width: 26rem;
    }
}

/* Calendar responsive fix: keep this last to override older conflicting rules. */
@media (max-width: 1600px) {
    .topbar__tools {
        overflow-x: auto;
        padding-bottom: 0.15rem;
    }

    .appointments-calendar__head {
        gap: 0.55rem;
    }

    .appointments-calendar__head > div:first-child {
        min-width: 0;
    }

    .calendar-legend {
        width: 100%;
        margin-left: 0;
        justify-content: flex-start;
    }

    .appointments-calendar__toolbar {
        grid-template-columns: 1fr;
        align-items: stretch;
        gap: 0.5rem;
    }

    .appointments-calendar__toolbar:not(.appointments-calendar__toolbar--compact) .appointments-calendar__nav,
    .appointments-calendar__toolbar:not(.appointments-calendar__toolbar--compact) .appointments-calendar__views,
    .appointments-calendar__toolbar:not(.appointments-calendar__toolbar--compact) .appointments-calendar__meta {
        width: 100%;
        justify-content: flex-start;
        min-width: 0;
    }

    .appointments-calendar__toolbar:not(.appointments-calendar__toolbar--compact) .appointments-calendar__meta {
        flex-wrap: wrap;
    }

    .appointments-calendar__toolbar:not(.appointments-calendar__toolbar--compact) .appointments-calendar__meta input {
        flex: 1 1 12rem;
        min-width: 10rem;
    }

    .appointments-calendar__toolbar:not(.appointments-calendar__toolbar--compact) .appointments-calendar__meta strong {
        flex: 1 1 100%;
    }
}

@media (max-width: 1200px) {
    .appointments-day-strip {
        grid-auto-columns: minmax(5rem, 1fr);
    }

    .appointments-week {
        --doctor-col-width: 12rem;
        min-width: 42rem;
    }

    .appointments-week-cards {
        min-width: 38rem;
        grid-template-columns: repeat(7, minmax(7.8rem, 1fr));
    }
}

@media (max-width: 992px) {
    .appointments-calendar__toolbar:not(.appointments-calendar__toolbar--compact) .appointments-calendar__views {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        width: 100%;
    }

    .appointments-calendar__toolbar:not(.appointments-calendar__toolbar--compact) .appointments-calendar__views .btn {
        min-width: 0;
        width: 100%;
    }

    .appointments-day-strip {
        grid-auto-columns: minmax(4.6rem, 1fr);
    }

    .appointments-week {
        --doctor-col-width: 10.8rem;
        min-width: 34rem;
    }

    .appointments-week-cards {
        min-width: 31rem;
        grid-template-columns: repeat(7, minmax(6.9rem, 1fr));
    }

    .appointments-month-grid__head,
    .appointments-month-grid__body {
        min-width: 27rem;
    }
}

@media (max-width: 768px) {
    .appointments-calendar {
        padding: 0.55rem;
    }

    .appointments-calendar__head h3 {
        font-size: 1rem;
    }

    .appointments-calendar__head .muted {
        font-size: 0.84rem;
    }

    .appointments-calendar__toolbar:not(.appointments-calendar__toolbar--compact) .appointments-calendar__nav .btn,
    .appointments-calendar__toolbar:not(.appointments-calendar__toolbar--compact) .appointments-calendar__meta input {
        width: 100%;
    }

    .appointments-week {
        --doctor-col-width: 9.5rem;
        min-width: 29rem;
    }

    .appointments-week-cards {
        min-width: 27rem;
    }
}

@media (max-width: 1280px) {
    .sidebar-toggle--topbar {
        display: inline-flex;
    }

    .sidebar-toggle--side {
        display: none;
    }

    .app-shell-wrap .app-shell {
        grid-template-columns: 1fr;
    }

    .app-shell-wrap .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: min(84vw, 20rem);
        z-index: 1200;
        overflow-y: auto;
        transform: translateX(-102%);
        box-shadow: 0 14px 35px rgba(23, 40, 69, 0.22);
        border-right: 1px solid var(--line);
        border-bottom: 0;
        padding: 1rem 0.8rem;
    }

    .app-shell-wrap.is-sidebar-open .sidebar {
        transform: translateX(0);
    }

    .sidebar-backdrop {
        position: fixed;
        inset: 0;
        z-index: 1100;
        border: 0;
        background: rgba(15, 26, 45, 0.42);
    }

    .app-shell-wrap.is-sidebar-open .sidebar-backdrop {
        display: block;
    }
}

.sale-form .table-wrap {
    overflow-x: auto;
    overflow-y: hidden;
}

.sale-list-summary {
    border: 1px solid var(--line);
    border-radius: 0.95rem;
    background: linear-gradient(180deg, var(--panel) 0%, var(--panel-soft) 100%);
    padding: 0.75rem 0.85rem;
    display: grid;
    gap: 0.58rem;
}

.sale-list-summary__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.sale-list-summary__head strong {
    font-size: 1.02rem;
    color: var(--text);
}

.sale-list-summary__head span {
    font-size: 0.82rem;
    color: var(--text-secondary);
}

.sale-list-summary__meta {
    font-size: 0.86rem;
    color: var(--text-secondary);
}

.sale-list-summary__meta strong {
    color: var(--text);
}

.sale-report-export {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.sale-report__title {
    font-size: 0.98rem;
    font-weight: 600;
    color: var(--text);
}

.sale-report__note {
    font-weight: 400;
    font-size: 0.82rem;
}

.sale-report__actions {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.sale-list-kpi-grid {
    display: grid;
    grid-template-columns: minmax(17rem, 1.5fr) repeat(3, minmax(11rem, 1fr));
    gap: 0.65rem;
}

.sale-list-kpi-card {
    border-color: var(--line);
    background: var(--panel);
    border-radius: 0.8rem;
    padding: 0.68rem 0.75rem;
    display: grid;
    gap: 0.3rem;
}

.sale-list-kpi-card p {
    margin: 0;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: var(--text-secondary);
}

.sale-list-kpi-card h4 {
    margin: 0;
    font-size: 1.5rem;
    line-height: 1.08;
    color: var(--text);
}

.sale-list-kpi-card--main {
    background: linear-gradient(145deg, var(--panel) 0%, var(--surface-soft) 100%);
    border-color: var(--info-line);
}

.sale-list-kpi-card--main h4 {
    font-size: 1.8rem;
    color: #0f2d52;
}

.sale-list-lines {
    margin: 0;
    padding-left: 1rem;
    display: grid;
    gap: 0.2rem;
}

.sale-list-lines__item {
    color: var(--text);
    line-height: 1.28;
    font-size: 0.88rem;
}

.sale-list-lines__item strong {
    display: block;
    color: var(--text);
}

.sale-list-lines__item span {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.sale-list-lines__more {
    margin: 0.2rem 0 0;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.sale-list-col-lines {
    min-width: 220px;
    max-width: 360px;
}

.sale-line-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    align-items: center;
}

.sale-line-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    background: var(--bg-page);
    border: 1px solid var(--line);
    font-size: 0.78rem;
    line-height: 1.2;
    color: var(--text);
    white-space: nowrap;
    max-width: 100%;
}

.sale-line-chip__name {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 14rem;
}

.sale-line-chip__sep {
    color: var(--muted);
    font-weight: 700;
}

.sale-line-chip__qty {
    color: var(--text-secondary);
    font-weight: 500;
}

.sale-line-chip--auto {
    background: var(--bg-page);
    border-color: #ead9b8;
    border-style: dashed;
    color: var(--warning-text);
}

.sale-line-chip--auto .sale-line-chip__qty {
    color: var(--warning-text);
}

.sale-chart-panel {
    padding: 1.1rem 1.2rem 1rem;
    margin-bottom: 1.1rem;
}

.sale-chart-panel__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.9rem;
    margin-bottom: 0.85rem;
}

.sale-chart-panel__head h3 {
    margin: 0 0 0.15rem;
}

.sale-chart-panel__head p {
    margin: 0;
    font-size: 0.82rem;
}

.sale-chart-panel__controls {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.sale-chart-panel__btn-group {
    display: inline-flex;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #dbe3f1;
    background: #f5f7fb;
    padding: 2px;
    gap: 2px;
}

.sale-chart-panel__btn-group .btn {
    background: transparent;
    border: none;
    color: #49617f;
    padding: 0.3rem 0.65rem;
    font-weight: 600;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.sale-chart-panel__btn-group .btn:hover {
    color: #1d4bb0;
}

.sale-chart-panel__btn-group .btn.is-active {
    background: #ffffff;
    color: #1d4bb0;
    box-shadow: 0 1px 2px rgba(24, 43, 77, 0.08);
}

.sale-chart-panel__body {
    position: relative;
    height: 280px;
    width: 100%;
}

.sale-chart-panel__body canvas {
    width: 100% !important;
    height: 100% !important;
}

.sale-chart-panel__footer {
    display: flex;
    flex-wrap: wrap;
    gap: 1.1rem;
    margin-top: 0.75rem;
    padding-top: 0.65rem;
    border-top: 1px solid #e6ecf6;
    font-size: 0.8rem;
    color: #5f738f;
}

.sale-chart-panel__footer strong {
    color: #213650;
    font-weight: 700;
}

@media (max-width: 760px) {
    .sale-chart-panel__body {
        height: 220px;
    }

    .sale-chart-panel__head {
        flex-direction: column;
        align-items: stretch;
    }
}

/* Money-lost chart on the /expirare page — same layout shape as the sales
 * chart but with its own namespace so the two can coexist. */
.expired-chart-body {
    position: relative;
    height: 260px;
    width: 100%;
}

.expired-chart-body canvas {
    width: 100% !important;
    height: 100% !important;
}

@media (max-width: 760px) {
    .expired-chart-body {
        height: 200px;
    }
}

.kpi-card--warn {
    border: 1px solid var(--warning-line);
    background: var(--panel-soft);
}

.kpi-card--warn h4 {
    color: var(--warning-text);
}

.kpi-card--accent {
    border: 1px solid #bfdcff;
    background: var(--panel-soft);
}

.kpi-card--accent h4 {
    color: var(--primary-text);
}

/* Compact KPI grid modifier — used anywhere we want the KPI tiles at
 * the top of a page to stay out of the way. Shrinks the cards without
 * touching the global .kpi-card used on Dashboard / Vanzari. */
.kpi-grid--compact {
    gap: 0.5rem;
}

/* The stoc KPI strip carries 3 current-stock metrics (the month-scoped
 * invested-value card now lives with the chart at the bottom of the page),
 * so on wide screens it should be a clean 3-up grid instead of 3 cards in a
 * 4-column track with an empty trailing cell. Scoped to min-width so the
 * shared <=1200px 2-column rule still governs narrow viewports. */
@media (min-width: 1201px) {
    .kpi-grid--3up {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.kpi-grid--compact .kpi-card {
    padding: 0.5rem 0.7rem;
}

.kpi-grid--compact .kpi-card p {
    font-size: 0.72rem;
    line-height: 1.2;
    margin: 0;
}

.kpi-grid--compact .kpi-card h4 {
    margin-top: 0.15rem;
    font-size: 1.15rem;
    letter-spacing: -0.01em;
}

.kpi-grid--compact .kpi-card .u-muted {
    font-size: 0.7rem;
}

/* Generic page-level compact wrapper — apply to any grid/filter-heavy
 * page (e.g. /expirare, /stoc) to tighten panel padding, heading sizes,
 * helper text, and form field heights. Opt-in via `.section-compact`
 * on a wrapper div so pages that don't use it are unaffected. */
.section-compact {
    gap: 0.6rem;
}

.section-compact .panel {
    padding: 0.75rem 0.9rem;
}

.section-compact .panel__head {
    margin-bottom: 0.35rem;
}

.section-compact .panel__head h3 {
    font-size: 0.95rem;
}

.section-compact .panel > .u-muted,
.section-compact .panel__head .u-muted {
    font-size: 0.75rem;
    margin: 0.1rem 0 0.35rem;
}

/* Field height + label size — the rules below are the source of truth
 * for "compact input height" across the app. Any filter panel wrapped
 * in .section-compact gets them automatically as long as the panel is
 * also marked .panel--tight (the signal that the host opted in —
 * prevents nested selects inside tables/modals from shrinking).
 *
 * IMPORTANT: we target BOTH native <input>/<select> AND Tom Select's
 * synthetic `.ts-wrapper > .ts-control` because the `enhanced-select`
 * controller (mounted on <body>) auto-wraps every <select> on every
 * page. Without the ts-* overrides the native select is hidden, the
 * Tom Select visual keeps the default 43px height, and the compact
 * rules silently no-op. */
.section-compact .panel--tight label {
    font-size: 0.75rem;
    margin: 0;
}

/* Must mirror the `:not()` chain from the global input/select reset at
 * line ~3059 so specificity exceeds it — without the `:not()` guards our
 * rule loses the cascade and the inputs keep the default 43px height.
 * The second set of selectors (without the `label` ancestor) covers
 * bare controls like the chart month picker that live directly in a
 * panel head without a label wrapper. */
.section-compact .panel--tight label input:not([type='checkbox']):not([type='radio']):not(.flatpickr-input):not(.numInput),
.section-compact .panel--tight label select:not(.flatpickr-monthDropdown-months),
.section-compact .panel--tight label textarea,
.section-compact .panel--tight input:not([type='checkbox']):not([type='radio']):not(.flatpickr-input):not(.numInput),
.section-compact .panel--tight select:not(.flatpickr-monthDropdown-months),
.section-compact .panel--tight textarea {
    padding: 0.35rem 0.5rem;
    font-size: 0.82rem;
    min-height: 0;
    line-height: 1.25;
}

/* Tom Select visual control — override its default tall padding /
 * min-height so the ts-control matches the native input height. The
 * `.ts-wrapper` selector intentionally has high specificity so it
 * beats the base tom-select.css rules without needing !important. */
.section-compact .panel--tight .ts-wrapper .ts-control,
.section-compact .panel--tight .ts-wrapper.single .ts-control,
.section-compact .panel--tight .ts-wrapper.multi .ts-control {
    min-height: 0;
    padding: 0.35rem 1.6rem 0.35rem 0.5rem;
    font-size: 0.82rem;
    line-height: 1.25;
}

.section-compact .panel--tight .ts-wrapper .ts-control > input,
.section-compact .panel--tight .ts-wrapper .ts-control .item {
    font-size: 0.82rem;
    line-height: 1.25;
    padding: 0;
    margin: 0;
}

/* Nudge the Tom Select clear button up so it stays centered in the
 * shorter control. */
.section-compact .panel--tight .ts-wrapper .clear-button {
    top: 50%;
    transform: translateY(-50%);
    right: 0.45rem;
    font-size: 0.9rem;
}

.section-compact .panel--tight .form-grid {
    gap: 0.45rem 0.55rem;
}

/* Single-row filter: field labels flex-share the row and action
 * buttons (Reseteaza, Export, ...) sit at the end, vertically aligned
 * to the bottom of the fields. Gap is tight so the row feels dense. */
.section-compact .filter-row-inline {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.section-compact .filter-row-inline > label {
    flex: 1 1 0;
    min-width: 160px;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    margin: 0;
}

.section-compact .filter-row-inline > label.checkbox-inline {
    flex: 0 0 auto;
    flex-direction: row;
    align-items: center;
    gap: 0.35rem;
    padding-bottom: 0.35rem;
}

.section-compact .filter-row-inline__actions,
.section-compact .filter-row-inline > .form-actions {
    flex: 0 0 auto;
    display: flex;
    gap: 0.35rem;
    align-items: center;
    margin: 0;
}

/* Tighter chart panel — the 260px chart becomes the focal element
 * instead of competing with oversized padding around it. */
.section-compact .expired-chart-body {
    height: 200px;
}

.section-compact .table .u-muted {
    font-size: 0.72rem;
}

/* Chart panel head: title on the left, then a control cluster on the
 * right combining the month snapshot picker + the metric button group.
 * Flex-wraps on narrow viewports so the buttons don't escape the panel. */
.section-compact .chart-panel__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.section-compact .chart-panel__head-controls {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-left: auto;
}

/* Inline month form — bare select docks next to the metric button
 * group. No label wrapper: the chronological month value is
 * self-explanatory in context. The select inherits the compact field
 * height from `.section-compact .panel--tight label ...`, so we only
 * need to give it a sensible minimum width here. */
.section-compact .chart-month-form {
    margin: 0;
    display: flex;
    align-items: center;
}

.section-compact .chart-month-form__select {
    min-width: 140px;
}

/* Logo upload row on /companii/{id}/editeaza. Keeps the current logo
 * thumbnail small (32px) docked to the left of the file input so the
 * row occupies the same vertical space as the other Identificare
 * fields instead of spawning a separate section. */
/* /setari page — compact card tiles so the settings menu feels dense
 * and scannable, not a sprawling dashboard with oversized panels. */
.setari-groups .panel--soft {
    padding: 0.6rem 0.8rem;
}

.setari-groups header h3 {
    font-size: 0.9rem;
    margin: 0 0 0.1rem;
}

.setari-groups header .muted {
    font-size: 0.72rem;
    margin: 0 0 0.5rem;
}

.setari-groups .board-grid {
    gap: 0.5rem;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.setari-groups .setari-card {
    padding: 0.55rem 0.7rem;
}

.setari-groups .setari-card h3 {
    font-size: 0.85rem;
    margin: 0 0 0.1rem;
}

.setari-groups .setari-card .muted {
    font-size: 0.7rem;
    margin: 0 0 0.35rem;
}

.setari-groups .setari-card .form-actions {
    margin-top: 0.25rem;
}

/* Logo section on /companii/{id}/editeaza — A4 mockup preview that
 * shows how the logo will look inside a real PDF page header, plus
 * range sliders for width/height with live px feedback. The Stimulus
 * controller logo_preview_controller.js handles all interactions. */

/* --- Logo editor: A4 left + controls right ------------------------- */
.logo-editor {
    display: flex;
    gap: 1.2rem;
    align-items: flex-start;
}

.logo-editor__preview {
    flex: 0 0 auto;
}

.logo-editor__controls {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

@media (max-width: 760px) {
    .logo-editor {
        flex-direction: column;
    }
}

/* --- A4 page mockup ------------------------------------------------ */
.logo-mockup__page {
    position: relative;
    width: 298px;      /* A4 portrait 595pt × 0.5 */
    height: 421px;     /* A4 portrait 842pt × 0.5 */
    border: 1px solid var(--line);
    background: var(--panel);
    border-radius: 4px;
    padding: 20px;     /* ~40pt margin at 0.5× */
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
    overflow: hidden;
}

.logo-mockup__header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--line);
}

.logo-mockup__header img {
    display: block;
    object-fit: contain;
    flex: 0 0 auto;
}

.logo-mockup__header-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    overflow: hidden;
    min-width: 0;
}

.logo-mockup__title {
    font-weight: 700;
    font-size: 7px;
    color: #111827;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.logo-mockup__subtitle {
    font-size: 5.5px;
    color: var(--text-secondary);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Fake body text lines simulating the consultation body */
.logo-mockup__body-lines {
    background: repeating-linear-gradient(
        to bottom,
        var(--line) 0px, var(--line) 3px,
        transparent 3px, transparent 9px
    );
    flex: 1;
    height: 65%;
    border-radius: 2px;
    opacity: 0.5;
}

.logo-mockup__label {
    position: absolute;
    bottom: 4px;
    right: 6px;
    font-size: 7px;
    color: var(--muted);
    font-weight: 600;
    letter-spacing: 0.05em;
}

/* --- Range sliders + value display --------------------------------- */
.section-compact .logo-range-row__control {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.section-compact .logo-range {
    flex: 1;
    min-width: 0;
    height: 6px;
    cursor: pointer;
    accent-color: var(--primary);
}

.section-compact .logo-range-row__value {
    font-weight: 700;
    font-size: 0.82rem;
    min-width: 2.2em;
    text-align: right;
    color: var(--text);
}

.section-compact .logo-range-row__unit {
    font-size: 0.72rem;
    color: var(--muted);
}

.section-compact input[type='file'] {
    font-size: 0.75rem;
    padding: 0;
}

/* Stock invested chart on /stoc — same layout shape as the sales /
 * expired charts but in its own namespace so the three can coexist. */
.stock-chart-body {
    position: relative;
    height: 260px;
    width: 100%;
}

.stock-chart-body canvas {
    width: 100% !important;
    height: 100% !important;
}

@media (max-width: 760px) {
    .stock-chart-body {
        height: 200px;
    }
}

.stock-chart-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    margin-top: 4px;
    font-size: 0.82rem;
    color: var(--muted, #6b7280);
}

.stock-chart-legend__hint {
    font-style: italic;
}

.stock-chart-legend__excluded {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.stock-chart-legend__chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 8px;
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 999px;
    background: var(--surface-soft, #f8fafc);
    color: var(--text, #0f172a);
    font-size: 0.8rem;
    line-height: 1.5;
    cursor: pointer;
}

.stock-chart-legend__chip:hover {
    border-color: var(--danger, #c24545);
    color: var(--danger, #c24545);
}

.stock-chart-legend__chip span {
    font-size: 1rem;
    line-height: 1;
}

.stock-chart-legend__reset {
    border: none;
    background: none;
    padding: 0;
    color: var(--accent, #2c6df5);
    font-size: 0.8rem;
    cursor: pointer;
    text-decoration: underline;
}

@media (max-width: 1200px) {
    .sale-list-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .sale-list-summary {
        padding: 0.65rem 0.7rem;
    }

    .sale-list-kpi-grid {
        grid-template-columns: 1fr;
    }
}

.sale-cashier {
    background: transparent;
    gap: 1rem;
    font-size: 0.94rem;
    border: 0;
    box-shadow: none;
    padding: 0;
}

.sale-cashier__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(17rem, 20rem);
    gap: 1rem;
    align-items: start;
}

.sale-cashier__main {
    min-width: 0;
    gap: 0.9rem;
}

.sale-cashier__summary {
    position: sticky;
    top: 1rem;
    gap: 0.85rem;
    padding: 1.1rem 1.1rem 1rem;
    border-radius: 1rem;
    background: linear-gradient(180deg, var(--panel) 0%, var(--panel-soft) 100%);
    border: 1px solid var(--line);
    box-shadow: 0 10px 28px -22px rgba(20, 54, 92, 0.35);
}

.sale-cashier__actions {
    display: grid;
    gap: 0.5rem;
}

.sale-cashier__collect-btn {
    width: 100%;
    min-height: 3rem;
    font-size: 1.2rem;
    font-weight: 800;
    letter-spacing: 0.01em;
}

.sale-cashier__delete-btn {
    background: transparent;
    border: 0;
    color: var(--danger-text);
    font-weight: 600;
    padding: 0.35rem 0;
    cursor: pointer;
    font-size: 0.85rem;
}
.sale-cashier__delete-btn:hover { text-decoration: underline; }

/* --- Drafts panel (always visible list) --- */
.sale-drafts-panel {
    padding: 0.85rem 1rem 0.9rem;
    border-radius: 0.95rem;
    display: grid;
    gap: 0.6rem;
}

.sale-drafts-panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.sale-drafts-panel__title {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    flex-wrap: wrap;
}
.sale-drafts-panel__title h3 { margin: 0; }

.sale-drafts-panel__count {
    display: inline-flex;
    min-width: 1.55rem;
    height: 1.55rem;
    padding: 0 0.45rem;
    align-items: center;
    justify-content: center;
    background: var(--primary-solid);
    color: var(--text-on-solid);
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 700;
}

.sale-drafts-panel__editing {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--primary-text);
    background: var(--surface-soft);
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    border: 1px solid var(--line);
}

.sale-drafts-panel__list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.sale-drafts-panel__item {
    display: inline-flex;
    align-items: stretch;
    flex: 0 0 auto;
    border-radius: 0.5rem;
    border: 1px solid var(--line);
    background: var(--panel);
    font-size: 0.82rem;
    transition: background 0.12s ease, border-color 0.12s ease;
    max-width: 100%;
    position: relative;
}
.sale-drafts-panel__item:hover {
    background: var(--panel-soft);
    border-color: var(--info-line);
}
.sale-drafts-panel__item.is-active {
    background: var(--surface-soft);
    border-color: var(--primary-line);
    box-shadow: 0 0 0 3px rgba(83, 132, 215, 0.14);
}

.sale-drafts-panel__item-body {
    display: inline-flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.2rem;
    padding: 0.35rem 0.5rem 0.35rem 0.6rem;
    color: var(--text);
    text-decoration: none;
    min-width: 0;
    flex: 0 1 auto;
    max-width: 22rem;
    position: relative;
}
.sale-drafts-panel__item-head {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
}
.sale-drafts-panel__item-lines {
    display: block;
    font-size: 0.7rem;
    line-height: 1.25;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.sale-drafts-panel__item-total {
    margin-left: auto;
    font-size: 0.74rem;
    font-weight: 700;
    color: var(--text);
    white-space: nowrap;
}
.sale-drafts-panel__item-body:hover {
    color: var(--primary-text);
}
.sale-drafts-panel__item:hover,
.sale-drafts-panel__item:focus-within {
    z-index: 40;
}

.sale-drafts-panel__item-popover {
    position: absolute;
    top: calc(100% + 0.4rem);
    left: 0;
    z-index: 30;
    min-width: 18rem;
    max-width: 26rem;
    padding: 0.65rem 0.8rem;
    background: var(--panel);
    color: var(--text);
    border: 1px solid var(--line);
    border-radius: 0.5rem;
    box-shadow: 0 12px 28px rgba(15, 42, 74, 0.18);
    display: none;
    flex-direction: column;
    gap: 0.4rem;
    font-size: 0.78rem;
    line-height: 1.35;
    pointer-events: none;
    white-space: normal;
}
.sale-drafts-panel__item-body:hover .sale-drafts-panel__item-popover,
.sale-drafts-panel__item-body:focus-visible .sale-drafts-panel__item-popover {
    display: flex;
}
.sale-drafts-panel__item-popover-head {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid var(--line-soft);
}
.sale-drafts-panel__item-popover-lines {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.sale-drafts-panel__item-popover-line {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 0.5rem;
    align-items: baseline;
}
.sale-drafts-panel__item-popover-name {
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sale-drafts-panel__item-popover-qty {
    font-variant-numeric: tabular-nums;
    font-size: 0.72rem;
}
.sale-drafts-panel__item-popover-price {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
}
.sale-drafts-panel__item-popover-total {
    display: flex;
    justify-content: space-between;
    padding-top: 0.4rem;
    border-top: 1px solid var(--line-soft);
    color: var(--text);
    font-weight: 600;
}

.sale-drafts-panel__item-number {
    font-weight: 700;
    color: var(--text);
    white-space: nowrap;
    font-size: 0.8rem;
}
.sale-drafts-panel__item-client {
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 6.5rem;
    font-size: 0.74rem;
}
.sale-drafts-panel__item-date {
    font-size: 0.7rem;
    white-space: nowrap;
    color: var(--muted);
}

.sale-form .sale-drafts-panel__item button.sale-drafts-panel__item-delete {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 1.75rem;
    min-width: 1.75rem;
    min-height: 0;
    padding: 0;
    border: 0;
    border-left: 1px solid var(--line);
    border-radius: 0;
    background: transparent;
    color: var(--muted);
    font-size: 1.05rem;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
    box-shadow: none;
}
.sale-form .sale-drafts-panel__item button.sale-drafts-panel__item-delete:hover {
    background: var(--surface-soft);
    color: var(--danger-text);
}
.sale-form .sale-drafts-panel__item button.sale-drafts-panel__item-delete:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.sale-drafts-panel__empty {
    margin: 0;
    font-size: 0.85rem;
    padding: 0.25rem 0;
}

/* --- Document bar (working point + client + notes) --- */
.sale-doc-bar {
    padding: 0.85rem 1rem;
    border-radius: 0.95rem;
}

.sale-doc-bar__row {
    display: grid;
    grid-template-columns: minmax(14rem, 1fr) minmax(16rem, 2fr);
    gap: 0.85rem;
    align-items: end;
}

.sale-doc-bar__field-label {
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin-bottom: 0.3rem;
}

.sale-doc-bar__wp,
.sale-doc-bar__client,
.sale-doc-bar__notes {
    display: block;
    min-width: 0;
}

.sale-form .sale-doc-bar .sale-doc-bar__client select,
.sale-form .sale-doc-bar .sale-doc-bar__notes input[type="text"] {
    width: 100%;
    height: 2.4rem;
    min-height: 2.4rem;
    padding: 0 0.7rem;
    border: 1px solid var(--line);
    border-radius: 0.55rem;
    background: var(--panel);
    font-size: 0.9rem;
    color: var(--text);
    box-sizing: border-box;
    line-height: 1;
}
.sale-form .sale-doc-bar .sale-doc-bar__client select:focus,
.sale-form .sale-doc-bar .sale-doc-bar__notes input[type="text"]:focus {
    outline: none;
    border-color: var(--primary-line);
    box-shadow: 0 0 0 3px rgba(83, 132, 215, 0.14);
}

/* TomSelect-enhanced selects in the doc bar — clamp to 2.4rem and ellipsis long values */
.sale-form .sale-doc-bar .ts-wrapper {
    width: 100%;
    min-width: 0;
}
.sale-form .sale-doc-bar .ts-wrapper.single .ts-control {
    height: 2.4rem;
    min-height: 2.4rem;
    padding: 0 2.1rem 0 0.7rem;
    border-radius: 0.55rem;
    border: 1px solid var(--line);
    background: var(--panel);
    box-shadow: none;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    line-height: 1;
    overflow: hidden;
}
.sale-form .sale-doc-bar .ts-wrapper.single.focus .ts-control {
    border-color: var(--primary-line);
    box-shadow: 0 0 0 3px rgba(83, 132, 215, 0.14);
}
.sale-form .sale-doc-bar .ts-wrapper.single .ts-control > .item {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.9rem;
    color: var(--text);
    line-height: 1.2;
}
.sale-form .sale-doc-bar .ts-wrapper.single .ts-control > input {
    height: 100%;
    line-height: 1;
    font-size: 0.9rem;
}
.sale-form .sale-doc-bar .ts-wrapper.single .ts-control:after {
    right: 0.85rem;
}

.sale-doc-bar__wp--readonly strong {
    display: flex;
    align-items: center;
    height: 2.4rem;
    padding: 0 0.7rem;
    border: 1px solid var(--line);
    border-radius: 0.55rem;
    background: var(--panel-soft);
    color: var(--text);
    font-weight: 600;
    font-size: 0.9rem;
}

/* --- Lines panel --- */
.sale-lines-panel {
    padding: 1rem 1.1rem 1.1rem;
    border-radius: 0.95rem;
}

.sale-lines-panel__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.85rem;
    margin-bottom: 0.65rem;
}

.sale-lines-panel__head h3 { margin: 0 0 0.15rem; }
.sale-lines-panel__head p { margin: 0; font-size: 0.82rem; }

.sale-lines-panel__add {
    white-space: nowrap;
}

/* --- Active line row (editor) --- */
.sale-line-active {
    display: grid;
    gap: 0.7rem;
}

/* --- Search bar (single entry point for new sales lines) ---
   Sits above .sale-line-active; selecting a product spawns a fresh row
   prepended to the list. The wrapper is a thin band so the search reads
   as a tool, not a half-empty line. */
.sale-search-bar {
    padding: 0.6rem 0.7rem;
    border: 1px solid #c8d4ea;
    border-radius: 0.85rem;
    background: var(--panel-soft);
    margin-bottom: 0.4rem;
}

.sale-search-bar__select {
    width: 100%;
}

.sale-line-row {
    position: relative;
    padding: 0.85rem 0.95rem 0.85rem 0.95rem;
    border: 1px solid var(--line);
    border-radius: 0.85rem;
    background: var(--panel);
    display: grid;
    gap: 0.6rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.sale-line-row.is-active {
    border-color: var(--primary-line);
    box-shadow: 0 0 0 3px rgba(83, 132, 215, 0.12);
    background: var(--panel);
}

.sale-line-row.is-row-hidden-editor {
    display: none;
}

.sale-line-row__head {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    min-width: 0;
}
.sale-line-row__head > .sale-product-select,
.sale-line-row__head > .ts-wrapper.sale-product-select {
    flex: 1 1 auto;
    min-width: 0;
}

.sale-line-row__remove {
    border: 0;
    background: transparent;
    color: var(--muted);
    font-size: 1.35rem;
    line-height: 1;
    padding: 0.15rem 0.45rem;
    border-radius: 0.4rem;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
}
.sale-line-row__remove:hover { background: var(--surface-soft); color: var(--danger-text); }

/* Cascade-remove button (× plus everything below). Only shown when the
   row has spawned consumable children — JS toggles `hidden` via
   syncCollapseUI. Amber accent distinguishes it from the plain `×`
   (which keeps the children as standalone consumable lines). */
.sale-line-row__remove--cascade {
    font-size: 1.05rem;
    padding: 0.15rem 0.35rem;
    color: var(--warning-text);
    letter-spacing: -0.05em;
}
.sale-line-row__remove--cascade:hover { background: var(--warning-bg); color: #6f4200; }
.sale-line-row__remove--cascade[hidden] { display: none; }

.sale-line-row__index {
    display: inline-flex;
    min-width: 1.7rem;
    height: 1.7rem;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--bg-page);
    color: var(--text);
    font-weight: 700;
    font-size: 0.82rem;
}

.sale-line-row__controls {
    display: grid;
    grid-template-columns: minmax(10rem, 12rem) minmax(8rem, 10rem) minmax(6rem, 8rem) minmax(8rem, 1fr);
    gap: 0.75rem;
    align-items: start;
}

.sale-line-row__controls--consult {
    grid-template-columns: minmax(10rem, 12rem) minmax(8rem, 10rem) minmax(8rem, 1fr);
}

.sale-line-field__total-box--muted {
    background: var(--panel) !important;
    color: var(--text-secondary) !important;
    font-weight: 600 !important;
}

.sale-line-row__price-meta {
    font-size: 0.72rem;
    letter-spacing: 0.02em;
}

/* --- Consultation Vanzare: committed-line summary cards --- */
.sale-lines-summary__line {
    display: grid;
    gap: 0.5rem;
    padding: 0.7rem 0.85rem 0.75rem;
    border: 1px solid var(--line);
    border-radius: 0.85rem;
    background: var(--panel);
    box-shadow: 0 1px 2px rgba(24, 43, 77, 0.04);
}

.sale-lines-summary__top {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    justify-content: space-between;
}

.sale-lines-summary__edit {
    appearance: none;
    background: transparent;
    border: 0;
    padding: 0;
    text-align: left;
    cursor: pointer;
    color: var(--text);
    font-size: 0.95rem;
    line-height: 1.25;
    flex: 1 1 auto;
    min-width: 0;
}
.sale-lines-summary__edit strong {
    font-weight: 700;
}
.sale-lines-summary__edit:hover strong {
    color: var(--primary-text);
    text-decoration: underline;
}

.sale-lines-summary__remove-btn {
    appearance: none;
    border: 1px solid var(--danger-line);
    background: var(--surface-soft);
    color: var(--danger-text);
    border-radius: 999px;
    padding: 0.2rem 0.7rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.12s ease;
    flex: 0 0 auto;
}
.sale-lines-summary__remove-btn:hover {
    background: #f8d7d3;
}

.sale-lines-summary__meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
}

.sale-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    background: var(--bg-page);
    border: 1px solid var(--line);
    font-size: 0.76rem;
    line-height: 1.3;
    color: var(--text-secondary);
    font-weight: 600;
    white-space: nowrap;
}

.sale-pill--total {
    background: var(--surface-soft);
    border-color: var(--line);
    color: var(--text);
    font-weight: 700;
}

.sale-pill--ok {
    background: var(--bg-page);
    border-color: var(--success-line);
    color: var(--success-text);
}
.sale-pill--warn {
    background: var(--warning-bg);
    border-color: var(--warning-line);
    color: var(--warning-text);
}
.sale-pill--danger {
    background: var(--surface-soft);
    border-color: var(--danger-line);
    color: var(--danger-text);
}

.sale-line-field {
    display: grid;
    grid-template-rows: auto 2.4rem;
    gap: 0.3rem;
    min-width: 0;
    margin: 0;
}

.sale-line-field__label {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 1.2rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-secondary);
    line-height: 1.1;
    white-space: nowrap;
    overflow: visible;
}

.sale-form .sale-line-row .sale-line-field--price input[type="number"],
.sale-form .sale-line-row .sale-line-field--discount input[type="number"] {
    width: 100%;
    height: 2.4rem;
    min-height: 2.4rem;
    padding: 0 0.7rem;
    border: 1px solid var(--line);
    border-radius: 0.55rem;
    background: var(--panel);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text);
    box-sizing: border-box;
    -moz-appearance: textfield;
    line-height: 1;
}
.sale-form .sale-line-field--price input[type="number"]::-webkit-outer-spin-button,
.sale-form .sale-line-field--price input[type="number"]::-webkit-inner-spin-button,
.sale-form .sale-line-field--discount input[type="number"]::-webkit-outer-spin-button,
.sale-form .sale-line-field--discount input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.sale-form .sale-line-field--price input[type="number"]:focus,
.sale-form .sale-line-field--discount input[type="number"]:focus {
    outline: none;
    border-color: var(--primary-line);
    box-shadow: 0 0 0 3px rgba(83, 132, 215, 0.14);
}

.sale-line-field--qty .qty-stepper {
    height: 2.4rem;
    width: 100%;
}

.sale-line-field--total .sale-line-field__total-box {
    height: 2.4rem;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 0.8rem;
    border: 1px solid var(--line);
    border-radius: 0.55rem;
    background: var(--panel-soft);
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--text);
    white-space: nowrap;
}

/* --- Qty stepper --- */
.qty-stepper {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--line);
    border-radius: 0.55rem;
    background: var(--panel);
    overflow: hidden;
    height: 2.4rem;
    min-width: 0;
}

.sale-form .sale-line-row .qty-stepper input[type="number"],
.sale-form .qty-stepper input[type="number"] {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
    text-align: center;
    border: 0;
    background: transparent;
    padding: 0 0.3rem;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text);
    outline: none;
    -moz-appearance: textfield;
    height: 100%;
    min-height: 0;
    line-height: 1;
}
.qty-stepper input[type="number"]::-webkit-outer-spin-button,
.qty-stepper input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.qty-stepper__btn {
    flex: 0 0 2.2rem;
    width: 2.2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: var(--panel-soft);
    color: var(--text);
    font-size: 1.15rem;
    font-weight: 800;
    cursor: pointer;
    transition: background 0.12s ease;
    padding: 0;
    height: 100%;
}
.qty-stepper__btn:first-child { border-right: 1px solid var(--line); }
.qty-stepper__btn:last-child { border-left: 1px solid var(--line); }
.qty-stepper__btn:hover { background: var(--surface-soft); }
.qty-stepper__btn:active { background: var(--line); }

.qty-stepper--compact {
    height: 2rem;
}
.qty-stepper--compact input[type="number"] {
    font-size: 0.9rem;
    padding: 0 0.2rem;
}
.qty-stepper--compact .qty-stepper__btn {
    flex: 0 0 1.85rem;
    width: 1.85rem;
    font-size: 1rem;
}

/* --- Chip (unit badge + stock/lot pills) --- */
.chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    background: var(--bg-page);
    border: 1px solid var(--line);
    color: var(--text-secondary);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.6;
}

.chip--unit {
    background: var(--surface-soft);
    border-color: var(--line);
    color: var(--primary-text);
}

.chip--ok {
    background: var(--bg-page);
    border-color: var(--success-line);
    color: var(--success-text);
}

.chip--warn {
    background: var(--warning-bg);
    border-color: var(--warning-line);
    color: var(--warning-text);
}

.chip--danger {
    background: var(--surface-soft);
    border-color: var(--danger-line);
    color: var(--danger-text);
}

.chip--inline {
    padding: 0.05rem 0.4rem;
    font-size: 0.66rem;
    line-height: 1.4;
    text-transform: uppercase;
}

/* --- Line row foot (stock/lot pills + add button) --- */
.sale-line-row__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.55rem;
    min-height: 2rem;
}
.sale-line-row__foot-info {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
}
.sale-form .sale-line-row__add-btn {
    flex: 0 0 auto;
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
    font-weight: 700;
    white-space: nowrap;
}

.sale-line-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    background: var(--bg-page);
    border: 1px solid var(--line);
    font-size: 0.76rem;
    line-height: 1.3;
    color: var(--text-secondary);
    font-weight: 600;
}

.sale-line-chip--lot {
    background: var(--bg-page);
    border-color: #ead9b8;
    color: var(--warning-text);
}

.sale-line-chip--consumable {
    background: var(--bg-page);
    border-color: var(--line);
    color: #2c4570;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.72rem;
}

.sale-line-chip--ok {
    background: var(--bg-page);
    border-color: var(--success-line);
    color: var(--success-text);
}
.sale-line-chip--warn {
    background: var(--warning-bg);
    border-color: var(--warning-line);
    color: var(--warning-text);
}
.sale-line-chip--danger {
    background: var(--surface-soft);
    border-color: var(--danger-line);
    color: var(--danger-text);
}

/* Stock pill on a sale line opens the product page (istoric stoc). */
a.sale-line-chip--link {
    text-decoration: none;
    cursor: pointer;
}
a.sale-line-chip--link:hover,
a.sale-line-chip--link:focus-visible {
    text-decoration: underline;
    filter: brightness(0.96);
}

/* --- Summary list (committed lines) --- */
.sale-lines-summary {
    display: grid;
    gap: 0.65rem;
    margin-top: 0.15rem;
}

.sale-lines-summary__empty {
    margin: 0;
    padding: 0.85rem 0.95rem;
    border: 1px dashed var(--line);
    border-radius: 0.75rem;
    background: var(--panel);
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.sale-line-card {
    border: 1px solid var(--line);
    border-radius: 0.85rem;
    padding: 0.7rem 0.85rem 0.75rem;
    background: var(--panel);
    display: grid;
    gap: 0.55rem;
    box-shadow: 0 1px 2px rgba(24, 43, 77, 0.04);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.sale-line-card:hover {
    border-color: var(--line);
    box-shadow: 0 4px 14px rgba(24, 43, 77, 0.08);
}

.sale-line-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.sale-line-card__title {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    min-width: 0;
    flex: 1;
}

.sale-line-card__index {
    display: inline-flex;
    min-width: 1.55rem;
    height: 1.55rem;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--bg-page);
    color: var(--text);
    font-weight: 700;
    font-size: 0.78rem;
    flex-shrink: 0;
}

.sale-line-card__name-btn {
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0;
    font-size: 0.94rem;
    font-weight: 700;
    color: var(--text);
    cursor: pointer;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    flex: 1;
}
.sale-line-card__name-btn:hover { color: #2c6df5; }

.sale-line-card__remove {
    border: 0;
    background: transparent;
    color: var(--muted);
    font-size: 1.35rem;
    line-height: 1;
    padding: 0.15rem 0.45rem;
    border-radius: 0.4rem;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
    flex-shrink: 0;
}
.sale-line-card__remove:hover { background: var(--surface-soft); color: var(--danger-text); }

.sale-line-card__meta {
    display: grid;
    grid-template-columns: minmax(10rem, 12rem) minmax(7rem, 9rem) minmax(6rem, 8rem) minmax(8rem, 1fr);
    gap: 0.6rem 0.85rem;
    align-items: start;
}

.sale-line-card__field {
    display: grid;
    grid-template-rows: auto 2.1rem;
    gap: 0.25rem;
    min-width: 0;
}

.sale-line-card__field-label {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 1.1rem;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-secondary);
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sale-line-card__field .qty-stepper,
.sale-line-card__field .chip--unit {
    flex-shrink: 0;
}

.sale-line-card__field > :not(.sale-line-card__field-label):not(:last-child) {
    margin-bottom: 0;
}

.sale-line-card__field {
    align-items: flex-start;
}

.sale-line-card__field > .qty-stepper + .chip--unit {
    margin-top: 0.2rem;
}

.sale-form .sale-line-card input.sale-line-card__input[type="number"] {
    width: 100%;
    height: 2.1rem;
    min-height: 2.1rem;
    padding: 0 0.55rem;
    border: 1px solid var(--line);
    border-radius: 0.45rem;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--text);
    background: var(--panel);
    box-sizing: border-box;
    line-height: 1;
    -moz-appearance: textfield;
}
.sale-form .sale-line-card input.sale-line-card__input[type="number"]::-webkit-outer-spin-button,
.sale-form .sale-line-card input.sale-line-card__input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.sale-form .sale-line-card input.sale-line-card__input[type="number"]:focus {
    outline: none;
    border-color: var(--primary-line);
    box-shadow: 0 0 0 3px rgba(83, 132, 215, 0.14);
}

.sale-line-card__hint {
    color: var(--muted);
    font-weight: 700;
    margin-left: 0.3rem;
    text-transform: uppercase;
    font-size: 0.62rem;
}

.sale-line-card__total-box {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    height: 2.1rem;
    padding: 0 0.65rem;
    border: 1px solid var(--line);
    border-radius: 0.45rem;
    background: var(--panel-soft);
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--text);
    white-space: nowrap;
}

.sale-line-card__field .qty-stepper {
    width: 100%;
    height: 2.1rem;
}

.sale-line-card__foot {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: -0.2rem;
    margin-bottom: -0.2rem;
}

/* --- Summary sidebar --- */
.sale-summary-total {
    display: grid;
    gap: 0.15rem;
    padding: 0.7rem 0.85rem;
    border-radius: 0.75rem;
    background: linear-gradient(135deg, #2c6df5 0%, #1d4bb0 100%);
    color: var(--text-on-solid);
}
.sale-summary-total__label {
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    opacity: 0.85;
}
.sale-summary-total__value {
    font-size: 1.75rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1.1;
}

.sale-summary-grid {
    display: grid;
    gap: 0.3rem;
}
.sale-summary-grid > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.7rem;
    padding: 0.45rem 0.65rem;
    border-radius: 0.5rem;
    background: var(--panel-soft);
    border: 1px solid var(--line);
}
.sale-summary-grid span {
    font-size: 0.78rem;
    color: var(--text-secondary);
    font-weight: 600;
}
.sale-summary-grid strong {
    font-size: 0.95rem;
    color: var(--text);
    font-weight: 700;
}

/* --- Payment presets (segmented control) --- */
.sale-payment-presets {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px;
    border: 1px solid var(--line);
    border-radius: 0.55rem;
    background: var(--panel-soft);
    width: 100%;
}
.sale-payment-presets .btn {
    flex: 1;
    background: transparent;
    border: 0;
    color: var(--text-secondary);
    padding: 0.45rem 0.5rem;
    font-size: 0.82rem;
    font-weight: 700;
    border-radius: 0.4rem;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
}
.sale-payment-presets .btn:hover { color: var(--primary-text); }
.sale-payment-presets .btn.is-active {
    background: var(--panel);
    color: var(--primary-text);
    box-shadow: 0 1px 2px rgba(24, 43, 77, 0.1);
}

.sale-payment-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
}
.sale-payment-fields label {
    display: grid;
    gap: 0.25rem;
    font-size: 0.76rem;
    color: var(--text-secondary);
    font-weight: 600;
}
.sale-payment-fields input {
    padding: 0.45rem 0.55rem;
    border: 1px solid var(--line);
    border-radius: 0.5rem;
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--text);
    background: var(--panel);
}
.sale-payment-fields input:focus {
    outline: none;
    border-color: var(--primary-line);
    box-shadow: 0 0 0 3px rgba(83, 132, 215, 0.14);
}

.sale-payment-totals {
    display: grid;
    gap: 0.3rem;
    padding: 0.55rem 0.7rem;
    border-radius: 0.55rem;
    background: var(--panel-soft);
    border: 1px solid var(--line);
}
.sale-payment-totals > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
}
.sale-payment-totals span {
    font-size: 0.78rem;
    color: var(--text-secondary);
    font-weight: 600;
}
.sale-payment-totals strong {
    font-size: 0.95rem;
    color: var(--text);
    font-weight: 700;
}
.sale-payment-totals strong.is-negative {
    color: var(--danger-text);
}

/* --- Mobile sticky bar --- */
.sale-mobile-bar {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 90;
    padding: 0.65rem 0.85rem env(safe-area-inset-bottom, 0.65rem);
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: saturate(180%) blur(8px);
    border-top: 1px solid var(--line);
    box-shadow: 0 -10px 24px rgba(20, 54, 92, 0.12);
    align-items: center;
    gap: 0.75rem;
}
.sale-mobile-bar__total {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0;
}
.sale-mobile-bar__total span {
    font-size: 0.72rem;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--text-secondary);
    letter-spacing: 0.04em;
}
.sale-mobile-bar__total strong {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--text);
    line-height: 1;
}
.sale-mobile-bar .btn {
    flex: 0 0 auto;
    padding: 0.65rem 1.1rem;
    font-size: 0.95rem;
    font-weight: 800;
}

/* --- TomSelect integration for sale-product-select --- */
.sale-form .sale-product-select {
    min-height: 2.6rem;
}
.sale-form .ts-wrapper.sale-product-select {
    width: 100%;
}
.sale-form .ts-wrapper.sale-product-select .ts-control {
    border-radius: 0.6rem;
    border: 1px solid var(--line);
    min-height: 2.6rem;
    padding: 0.5rem 2rem 0.5rem 0.75rem;
    background: var(--panel);
    box-shadow: 0 1px 2px rgba(24, 43, 77, 0.05);
}
.sale-form .ts-wrapper.sale-product-select .ts-control:hover {
    border-color: var(--info-line);
}
.sale-form .ts-wrapper.sale-product-select.focus .ts-control {
    border-color: var(--primary-line);
    box-shadow: 0 0 0 3px rgba(83, 132, 215, 0.14);
}
.sale-form .ts-wrapper.sale-product-select .ts-control input,
.sale-form .ts-wrapper.sale-product-select.single .ts-control > .item {
    font-size: 0.93rem;
    font-weight: 600;
    color: var(--text, #20364f);
}
.sale-form .ts-wrapper.sale-product-select.single .ts-control:after {
    right: 0.85rem;
    border-color: #6b7f99 transparent transparent;
}
.sale-form .ts-wrapper.sale-product-select.single.dropdown-active .ts-control:after {
    border-color: transparent transparent #6b7f99;
}
.sale-form .ts-wrapper.sale-product-select .ts-dropdown {
    border-radius: 0.75rem;
    border: 1px solid var(--line);
    box-shadow: 0 12px 28px rgba(20, 54, 92, 0.16);
    margin-top: 0.4rem;
}
.sale-form .ts-wrapper.sale-product-select .ts-dropdown .option {
    padding: 0.6rem 0.8rem;
    line-height: 1.3;
}
.ts-dropdown.sale-product-select {
    z-index: 1400;
}

/* --- Form topbar --- */
.sale-form-topbar-actions {
    display: inline-flex;
    gap: 0.5rem;
}

/* --- Responsive --- */
@media (max-width: 1100px) {
    .sale-cashier__layout {
        grid-template-columns: 1fr;
    }
    .sale-cashier__summary {
        position: static;
    }
    .sale-doc-bar__row {
        grid-template-columns: 1fr 1fr;
    }
    .sale-doc-bar__drafts {
        grid-column: 1 / -1;
        justify-self: start;
    }
    .sale-line-row__controls {
        grid-template-columns: auto 1fr 1fr auto;
    }
}

@media (max-width: 900px) {
    .sale-mobile-bar {
        display: flex;
    }
    .sale-cashier__main,
    .sale-cashier__summary {
        padding-bottom: 0.3rem;
    }
    /* Reserve space so the fixed bar doesn't cover the last card on desktop->mobile flip. */
    .sale-cashier {
        padding-bottom: 4.5rem;
    }
}

@media (max-width: 720px) {
    .sale-doc-bar__row {
        grid-template-columns: 1fr;
    }
    .sale-line-row__controls {
        grid-template-columns: 1fr 1fr;
    }
    .sale-line-field--total {
        grid-column: 1 / -1;
        text-align: left;
    }
    .sale-line-card__meta {
        grid-template-columns: 1fr 1fr;
    }
    .sale-line-card__total {
        grid-column: 1 / -1;
        text-align: left;
    }
}


.sale-totals {
    margin-top: 0.75rem;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
}

.sale-totals > div {
    border: 1px solid var(--line);
    border-radius: 0.7rem;
    padding: 0.6rem 0.7rem;
    background: var(--panel-soft);
    display: grid;
    gap: 0.2rem;
}

.sale-totals strong {
    font-size: 1.02rem;
    color: var(--text);
}

.report-bars {
    display: grid;
    gap: 0.65rem;
}

.report-bars__row {
    display: grid;
    grid-template-columns: 72px 1fr auto;
    align-items: center;
    gap: 0.65rem;
}

.report-bars__label {
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 0.88rem;
}

.report-bars__track {
    height: 0.85rem;
    background: var(--surface-soft);
    border: 1px solid var(--line);
    border-radius: 999px;
    overflow: hidden;
}

.report-bars__bar {
    height: 100%;
    border-radius: 999px;
}

.report-bars__bar--revenue {
    background: linear-gradient(90deg, #3b82f6, #2563eb);
}

.report-bars__bar--profit {
    background: linear-gradient(90deg, #16a34a, #15803d);
}

.report-bars__bar--loss {
    background: linear-gradient(90deg, #ef4444, #dc2626);
}

.monthly-supplier-chart {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
    gap: 0.9rem;
    align-items: end;
    min-height: 22rem;
    padding: 1.1rem 1rem 0.9rem;
    border: 1px solid #d9e2f0;
    border-radius: 1rem;
    background:
        linear-gradient(to top, rgba(221, 231, 247, 0.9) 1px, transparent 1px) 0 100% / 100% 25%,
        linear-gradient(180deg, #f7fbff 0%, #eef5ff 100%);
}

.monthly-supplier-chart__item {
    display: grid;
    gap: 0.55rem;
    justify-items: center;
    align-self: end;
}

.monthly-supplier-chart__value {
    font-size: 0.82rem;
    line-height: 1.1;
    color: #23324d;
    text-align: center;
}

.monthly-supplier-chart__bar-wrap {
    width: 100%;
    max-width: 4.8rem;
    height: 14rem;
    border-radius: 1rem 1rem 0.5rem 0.5rem;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid #d6e1f4;
    padding: 0.3rem;
    display: flex;
    align-items: end;
    justify-content: center;
}

.monthly-supplier-chart__bar {
    width: 100%;
    min-height: 0.45rem;
    border-radius: 0.8rem 0.8rem 0.35rem 0.35rem;
    background: linear-gradient(180deg, #7da8ff 0%, #2c6df5 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

.monthly-supplier-chart__item:nth-child(6n + 1) .monthly-supplier-chart__bar {
    background: linear-gradient(180deg, #89b6ff 0%, #3f7cff 100%);
}

.monthly-supplier-chart__item:nth-child(6n + 2) .monthly-supplier-chart__bar {
    background: linear-gradient(180deg, #8ed9d1 0%, #28a799 100%);
}

.monthly-supplier-chart__item:nth-child(6n + 3) .monthly-supplier-chart__bar {
    background: linear-gradient(180deg, #ffd88c 0%, #f0a531 100%);
}

.monthly-supplier-chart__item:nth-child(6n + 4) .monthly-supplier-chart__bar {
    background: linear-gradient(180deg, #f9b2bc 0%, #e16b80 100%);
}

.monthly-supplier-chart__item:nth-child(6n + 5) .monthly-supplier-chart__bar {
    background: linear-gradient(180deg, #baa9ff 0%, #7c63f2 100%);
}

.monthly-supplier-chart__item:nth-child(6n) .monthly-supplier-chart__bar {
    background: linear-gradient(180deg, #a5df9b 0%, #4ea652 100%);
}

.monthly-supplier-chart__label {
    font-size: 0.82rem;
    font-weight: 700;
    color: #53627d;
    text-align: center;
}

@media (max-width: 768px) {
    .sale-cashier__layout {
        grid-template-columns: 1fr;
    }

    .sale-cashier__summary {
        position: static;
    }

    .sale-payment-presets {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sale-totals {
        grid-template-columns: 1fr;
    }

    .sale-product-select {
        min-width: 18rem;
    }

    .sale-line-editor__row--meta {
        grid-template-columns: 1fr 1fr;
    }

    .monthly-supplier-chart {
        grid-template-columns: repeat(auto-fit, minmax(64px, 1fr));
        min-height: 18rem;
        padding-inline: 0.7rem;
    }

    .monthly-supplier-chart__bar-wrap {
        height: 11rem;
    }
}

/* ── Permissions matrix ── */
.text-center {
    text-align: center;
}

.permissions-table {
    max-width: 52rem;
}

.permissions-table thead th {
    text-align: center;
    vertical-align: bottom;
}

.permissions-table thead th:first-child {
    text-align: left;
}

.permissions-table td.text-center {
    text-align: center;
}

.permissions-table input[type="checkbox"] {
    width: 1.1rem;
    height: 1.1rem;
    cursor: pointer;
}

.permissions-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
    font-size: 0.85rem;
    white-space: nowrap;
    user-select: none;
}

.permissions-toggle--group {
    font-size: 0.9rem;
}

.permissions-group-row {
    background: var(--bg-alt, #f5f7fa);
}

.permissions-group-row td {
    padding-top: 0.7rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--line, #e2e6ed);
}

.permissions-module-name {
    padding-left: 1.4rem !important;
}

/* Calendar responsive hardening: keep this at the very end. */
.appointments-calendar-page,
.appointments-calendar-shell,
.appointments-calendar {
    min-width: 0;
    max-width: 100%;
}

.appointments-calendar-page,
.appointments-calendar-shell {
    overflow: visible;
}

.appointments-calendar__head > div:first-child,
.appointments-calendar__toolbar,
.appointments-calendar__toolbar > div,
.appointments-grid,
.appointments-grid-wrap {
    min-width: 0;
}

.appointments-calendar__head {
    align-items: start;
}

.appointments-calendar__toolbar {
    grid-template-columns: auto auto minmax(0, 1fr);
}

.appointments-calendar__nav {
    flex-wrap: wrap;
}

.appointments-calendar__views .btn,
.appointments-calendar__nav .btn {
    min-width: 0;
}

.appointments-grid {
    display: block;
    width: 100%;
    min-width: 100%;
}

.appointments-grid-wrap {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    contain: inline-size;
}

.appointments-week {
    width: max-content;
    max-width: none;
}

.appointments-week-cards {
    width: max-content;
    max-width: none;
}

@media (max-width: 1400px) {
    .appointments-calendar__head {
        flex-direction: column;
    }

    .calendar-legend {
        width: 100%;
    }

    .appointments-calendar__toolbar:not(.appointments-calendar__toolbar--compact) {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .appointments-calendar__toolbar:not(.appointments-calendar__toolbar--compact) .appointments-calendar__nav,
    .appointments-calendar__toolbar:not(.appointments-calendar__toolbar--compact) .appointments-calendar__views,
    .appointments-calendar__toolbar:not(.appointments-calendar__toolbar--compact) .appointments-calendar__meta {
        width: 100%;
        justify-content: flex-start;
    }

    .appointments-calendar__toolbar:not(.appointments-calendar__toolbar--compact) .appointments-calendar__meta {
        display: grid;
        grid-template-columns: minmax(0, 14rem) minmax(0, 1fr);
        align-items: center;
        gap: 0.55rem;
    }

    .appointments-calendar__toolbar:not(.appointments-calendar__toolbar--compact) .appointments-calendar__meta strong {
        min-width: 0;
    }
}

@media (max-width: 1024px) {
    .appointments-calendar__toolbar:not(.appointments-calendar__toolbar--compact) .appointments-calendar__nav,
    .appointments-calendar__toolbar:not(.appointments-calendar__toolbar--compact) .appointments-calendar__views {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.45rem;
    }

    .appointments-calendar__toolbar:not(.appointments-calendar__toolbar--compact) .appointments-calendar__meta {
        grid-template-columns: 1fr;
    }

    .appointments-calendar__toolbar:not(.appointments-calendar__toolbar--compact) .appointments-calendar__meta input,
    .appointments-calendar__toolbar:not(.appointments-calendar__toolbar--compact) .appointments-calendar__meta strong {
        width: 100%;
        min-width: 0;
    }

    .appointments-week {
        --doctor-col-width: 10.5rem;
        min-width: 34rem;
    }

    .appointments-week-cards {
        min-width: 34rem;
        grid-template-columns: repeat(7, minmax(6.8rem, 1fr));
    }
}

@media (max-width: 768px) {
    .appointments-calendar {
        padding: 0.55rem;
    }

    .appointments-calendar__head h3 {
        font-size: 1rem;
    }

    .appointments-calendar__head .muted {
        font-size: 0.84rem;
    }

    .appointments-day-strip {
        grid-auto-columns: minmax(4.8rem, 1fr);
    }

    .appointments-week {
        --doctor-col-width: 9.3rem;
        min-width: 29rem;
    }

    .appointments-week__header,
    .appointments-week__body,
    .appointments-week__header--doctors,
    .appointments-week__body--doctors {
        grid-template-columns: 3.85rem repeat(var(--doctor-cols), var(--doctor-col-width));
    }

    .appointments-week__time-header {
        padding: 0.42rem 0.26rem;
        font-size: 0.69rem;
    }

    .appointments-week__time-tick {
        right: 0.22rem;
        font-size: 0.64rem;
    }

    .appointments-now-line {
        left: 3.85rem;
    }

    .appointments-now-line__label {
        left: -3.66rem;
    }

    .appointments-week-cards {
        min-width: 29rem;
    }

    .appointments-month-grid {
        overflow-x: auto;
    }

    .appointments-month-grid__head,
    .appointments-month-grid__body {
        min-width: 27rem;
    }
}

@media (max-width: 560px) {
    .appointments-calendar__nav,
    .appointments-calendar__views {
        gap: 0.35rem;
    }

    .appointments-calendar__meta strong {
        font-size: 0.92rem;
    }

    .appointments-week {
        --doctor-col-width: 8.5rem;
        min-width: 25.5rem;
    }

    .appointments-week-cards {
        min-width: 25.5rem;
        grid-template-columns: repeat(7, minmax(5.8rem, 1fr));
    }
}

@media (max-width: 420px) {
    .appointments-calendar {
        padding: 0.48rem;
    }

    .appointments-week {
        --doctor-col-width: 7.8rem;
        min-width: 23.5rem;
    }

    .appointments-week-cards {
        min-width: 23.5rem;
    }
}
.consult-template-card.is-invalid {
    border-color: var(--danger-line);
    box-shadow: 0 0 0 1px rgba(189, 67, 67, 0.12);
}

.consult-template-warning {
    margin-bottom: 0.85rem;
}

.consult-template-selector {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
}

.consult-template-empty {
    margin: 0;
}

.consult-template-pill {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.15rem;
    padding: 0.8rem 1rem;
    border: 1px solid var(--border-color, #d9e3f3);
    border-radius: 16px;
    background: var(--panel);
    color: var(--info-text);
    box-shadow: 0 10px 24px rgba(26, 50, 93, 0.05);
}


.consult-template-pill strong {
    color: var(--text);
}

.consult-template-pill span {
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.consult-template-pill.is-active {
    border-color: var(--primary-line);
    background: var(--bg-page);
}

.consult-template-pill.is-invalid {
    border-color: var(--danger-line);
    background: var(--panel-soft);
}

.consult-template-custom-card {
    margin-bottom: 1rem;
}

.consult-template-custom-grid {
    align-items: start;
}

.consult-template-custom-field--textarea {
    grid-column: 1 / -1;
}

.consult-template-custom-field textarea,
.consult-template-custom-field input,
.consult-template-custom-field select {
    width: 100%;
}

.consult-template-custom-textarea {
    min-height: 14rem;
    resize: vertical;
}

.consult-template-default-field--textarea {
    grid-column: span 2;
}

.consult-template-default-textarea {
    min-height: 11rem;
    resize: vertical;
}

.consult-info-list--template {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.consult-reminders-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    max-height: 23rem;
    overflow: auto;
    padding-right: 4px;
}

.consult-reminder-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    border: 1px solid rgba(83, 125, 199, 0.2);
    border-radius: 12px;
    padding: 8px 10px;
    background: rgba(255, 255, 255, 0.94);
}

.consult-reminder-item--upcoming {
    background: linear-gradient(180deg, rgba(243, 248, 255, 0.95), rgba(255, 255, 255, 0.95));
}

.consult-reminder-item__main {
    min-width: 0;
    display: grid;
    gap: 4px;
    flex: 1 1 auto;
}

.consult-reminder-item__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.consult-reminder-item__date {
    white-space: nowrap;
    color: var(--text);
}

.consult-reminder-item__note {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.82rem;
    line-height: 1.3;
}

.consult-reminder-item__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.consult-reminder-item__actions form {
    margin: 0;
}

.consult-reminder-entry-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(18rem, 0.9fr);
    gap: 16px;
    align-items: start;
    padding-top: 20px;
    margin-bottom: 16px;
}

.consult-reminder-inline-form {
    margin-bottom: 0;
    display: grid;
    gap: 18px;
}

.consult-reminder-history {
    display: grid;
    gap: 12px;
}

.consult-reminder-history__card {
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 18px;
    background: linear-gradient(180deg, rgba(247, 250, 255, 0.95), rgba(255, 255, 255, 0.95));
}

.consult-reminder-history__card h4 {
    font-size: 1rem;
    color: var(--text);
}

.consult-reminder-history__list {
    display: grid;
    gap: 10px;
}

.consult-reminder-history__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 16px;
    border: 1px solid var(--line);
    background: var(--panel);
}

.consult-reminder-history__item strong {
    color: var(--text);
    white-space: nowrap;
}

.consult-reminder-history__empty {
    margin: 0;
}

.consult-reminder-row {
    border: 1px solid rgba(83, 125, 199, 0.22);
    border-radius: 20px;
    padding: 18px 18px 16px;
    background: linear-gradient(180deg, rgba(245, 249, 255, 0.96), rgba(255, 255, 255, 0.96));
}

.consult-reminder-row__head,
.pet-reminder-card__head,
.pet-reminder-card__actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.consult-reminder-row__presets {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin: 12px 0;
}

.consult-reminder-row__notes {
    min-height: 96px;
    resize: vertical;
}

.pet-reminder-list {
    display: grid;
    gap: 14px;
}

.pet-reminder-inline-form {
    margin-bottom: 18px;
    padding: 18px;
    border: 1px solid rgba(83, 125, 199, 0.16);
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(246, 249, 255, 0.95), rgba(255, 255, 255, 0.95));
}

.pet-reminder-inline-form form {
    display: grid;
    gap: 14px;
}

.pet-reminder-inline-form__presets {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.pet-reminder-inline-form__actions {
    display: flex;
    justify-content: flex-start;
    gap: 12px;
    margin-top: 10px;
}

.pet-reminder-card {
    display: grid;
    gap: 8px;
    border: 1px solid rgba(83, 125, 199, 0.18);
    border-radius: 14px;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 8px 18px rgba(32, 52, 92, 0.04);
}

.pet-reminder-card__main {
    display: grid;
    gap: 6px;
}

.pet-reminder-card__head h4 {
    margin: 4px 0 0;
    font-size: 1rem;
}

.pet-reminder-card__main p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.88rem;
    line-height: 1.35;
}

.pet-reminder-card__actions {
    justify-content: flex-start;
}

.pet-reminder-card__actions form {
    margin: 0;
}

.pet-reminder-card--readonly {
    background: linear-gradient(180deg, rgba(243, 248, 255, 0.95), rgba(255, 255, 255, 0.95));
}

@media (max-width: 900px) {
    .consult-reminder-entry-layout {
        grid-template-columns: 1fr;
    }

    .consult-reminders-list {
        grid-template-columns: 1fr;
    }

    .consult-reminder-row__head,
    .pet-reminder-card__head,
    .pet-reminder-card__actions {
        align-items: flex-start;
    }
}

/* Calendar focus refresh: keep this at the actual end so it wins over older patches. */
.appointments-calendar__overview {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.65rem;
    margin-bottom: 0.75rem;
}

.appointments-overview-card {
    border: 1px solid var(--line);
    border-radius: 0.9rem;
    background: linear-gradient(180deg, var(--panel) 0%, var(--panel-soft) 100%);
    padding: 0.7rem 0.78rem;
    display: grid;
    gap: 0.18rem;
    min-width: 0;
}

.appointments-overview-card__eyebrow {
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.appointments-overview-card strong {
    min-width: 0;
    font-size: 1rem;
    line-height: 1.25;
    color: var(--text);
}

.appointments-overview-card small {
    color: var(--text-secondary);
    font-size: 0.76rem;
}

.appointments-doctor-filters {
    position: relative;
    margin-bottom: 0.75rem;
    z-index: 40;
}

.appointments-doctor-picker {
    position: relative;
    max-width: 26rem;
}

.appointments-doctor-picker__trigger {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 1rem;
    background: var(--panel);
    color: var(--text);
    padding: 0.55rem 0.65rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    min-height: 3.15rem;
    cursor: pointer;
    transition: border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
}

.appointments-doctor-picker__trigger:hover,
.appointments-doctor-picker__trigger:focus-visible,
.appointments-doctor-picker.is-open .appointments-doctor-picker__trigger {
    border-color: var(--primary-line);
    background: var(--panel-soft);
    box-shadow: 0 10px 22px rgba(37, 72, 124, 0.08);
    outline: 0;
}

.appointments-doctor-picker__trigger-copy {
    display: grid;
    gap: 0.08rem;
    min-width: 0;
    text-align: left;
}

.appointments-doctor-picker__trigger-copy small {
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.appointments-doctor-picker__trigger-copy strong {
    min-width: 0;
    font-size: 0.9rem;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.appointments-doctor-picker__trigger-copy span {
    min-width: 0;
    font-size: 0.76rem;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.appointments-doctor-picker__count {
    flex: 0 0 auto;
    min-width: 2rem;
    height: 2rem;
    border-radius: 999px;
    background: var(--bg-page);
    color: var(--primary-text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
}

.appointments-doctor-picker__panel {
    position: absolute;
    top: calc(100% + 0.4rem);
    left: 0;
    width: min(28rem, calc(100vw - 3rem));
    border: 1px solid var(--line);
    border-radius: 1rem;
    background: var(--panel);
    box-shadow: 0 20px 40px rgba(26, 48, 85, 0.14);
    padding: 0.7rem;
    display: none;
    z-index: 1200;
}

.appointments-doctor-picker__panel.is-open {
    display: grid;
    gap: 0.65rem;
}

.appointments-doctor-picker__panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.appointments-doctor-picker__panel-head strong {
    color: var(--text);
}

.appointments-doctor-picker__list {
    display: grid;
    gap: 0.45rem;
    max-height: 18rem;
    overflow-y: auto;
    padding-right: 0.15rem;
}

.appointments-doctor-picker__option {
    border: 1px solid var(--line);
    border-radius: 0.9rem;
    background: var(--panel);
    padding: 0.48rem 0.58rem;
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr);
    align-items: center;
    gap: 0.55rem;
    cursor: pointer;
}

.appointments-doctor-picker__option:hover {
    background: var(--panel-soft);
    border-color: var(--line);
}

.appointments-doctor-picker__option input {
    width: 1rem;
    height: 1rem;
    accent-color: #2c6df5;
}

.appointments-doctor-picker__avatar {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-on-solid);
    font-size: 0.72rem;
    font-weight: 800;
    flex: 0 0 auto;
    background: linear-gradient(135deg, #4f86ff 0%, #2c6df5 100%);
}

.appointments-doctor-picker__avatar--image {
    object-fit: cover;
    border: 1px solid var(--line);
    background: var(--panel);
}

.appointments-doctor-picker__option-body {
    display: grid;
    gap: 0.05rem;
    min-width: 0;
}

.appointments-doctor-picker__option-label {
    font-size: 0.82rem;
    font-weight: 800;
    color: var(--text);
}

.appointments-doctor-picker__option-meta {
    font-size: 0.68rem;
    color: #6a7f9e;
}

.appointments-day-strip {
    grid-template-columns: repeat(auto-fit, minmax(6.1rem, 1fr));
    grid-auto-flow: row;
    grid-auto-columns: unset;
    overflow: visible;
}

.appointments-day-pill {
    min-width: 0;
}

.appointments-grid-wrap {
    overflow-y: visible;
}

.appointments-week {
    --time-col-width: 4.8rem;
    --doctor-col-width: 13.5rem;
    min-width: 0;
    overflow: visible;
}

.appointments-week__body {
    max-height: none;
    overflow: visible;
    overscroll-behavior-y: auto;
}

.appointments-week__header,
.appointments-week__body {
    display: grid;
    grid-template-columns: var(--time-col-width) max-content;
}

.appointments-week__header {
    align-items: stretch;
}

.appointments-week__body {
    align-items: start;
}

.appointments-week__header-track,
.appointments-week__body-track {
    display: grid;
    grid-template-columns: repeat(var(--doctor-cols), var(--doctor-col-width));
    min-width: max-content;
}

.appointments-week__time-header,
.appointments-week__time-col {
    width: var(--time-col-width);
    min-width: var(--time-col-width);
    box-shadow: 6px 0 10px rgba(34, 54, 86, 0.06);
}

.appointments-week__time-header {
    display: flex;
    align-items: center;
    align-self: stretch;
}

.appointments-week__header-track {
    border-left: 1px solid var(--line);
}

.appointments-week__body-track {
    position: relative;
    border-left: 1px solid var(--line);
}

.appointments-week-cards {
    min-width: 0;
    width: 100%;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

.appointments-week-cards__list {
    max-height: none;
    overflow: visible;
}

@media (max-width: 1200px) {
    .appointments-calendar__overview {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .appointments-week {
        --time-col-width: 3.85rem;
    }

    .appointments-doctor-picker {
        max-width: 100%;
    }

    .appointments-doctor-picker__panel {
        width: min(100%, calc(100vw - 2rem));
    }

    .appointments-doctor-picker__panel-head {
        align-items: stretch;
    }

    .appointments-doctor-picker__panel-head .btn {
        width: 100%;
    }

    .appointments-day-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .appointments-week-cards {
        grid-template-columns: 1fr;
    }
}

.appointments-now-line {
    left: var(--time-col-width, 4.8rem);
    right: 0;
}

.appointments-now-line__label {
    left: calc((var(--time-col-width, 4.8rem) * -1) + 0.2rem);
}

/* ==========================================================================
   Consultation wizard — per-reason lab template cards
   ========================================================================== */

.visually-hidden-field {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
    padding: 0;
    margin: -1px;
}

.consult-lab-cards {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 0.9rem;
}

.consult-lab-card {
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--panel);
    /* No overflow: hidden — it was clipping TomSelect dropdowns inside
       the card (the dropdown is absolutely positioned and needs to
       escape the card boundary). The border-radius is preserved via
       the head's own border-radius. Collapse uses display:none on
       .consult-lab-card__body.is-collapsed, not overflow. */
}

.consult-lab-card--orphan {
    border-color: var(--warning-line);
    background: var(--panel-soft);
}

.consult-lab-card__head {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    background: var(--panel-soft);
    border: 0;
    border-bottom: 1px solid var(--line);
    padding: 0.65rem 0.9rem;
    cursor: pointer;
    font: inherit;
    text-align: left;
}

.consult-lab-card--orphan .consult-lab-card__head {
    background: var(--warning-bg);
    border-bottom-color: var(--warning-line);
}

.consult-lab-card__head[aria-expanded="false"] {
    border-bottom-color: transparent;
}

.consult-lab-card__head:hover {
    background: var(--surface-soft);
}

.consult-lab-card--orphan .consult-lab-card__head:hover {
    background: var(--warning-bg);
}

.consult-lab-card__title {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
    min-width: 0;
}

.consult-lab-card__chev {
    display: inline-block;
    transition: transform 120ms ease;
    color: var(--text-secondary);
}

.consult-lab-card__head[aria-expanded="false"] .consult-lab-card__chev {
    transform: rotate(-90deg);
}

.consult-lab-card__name {
    font-weight: 700;
    color: var(--text);
}

.consult-lab-card__badge {
    font-size: 0.72rem;
    color: var(--text-secondary);
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 0.1rem 0.55rem;
}

.consult-lab-card__body {
    padding: 0.9rem;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.consult-lab-card__body.is-collapsed {
    display: none;
}

.consult-lab-card__select-wrap .ts-wrapper {
    margin-bottom: 0;
}

.consult-lab-card__select-wrap.is-empty select {
    display: none;
}

.consult-lab-card__hint {
    margin: 0;
    font-size: 0.82rem;
    color: var(--text-secondary);
    font-style: italic;
}

.consult-lab-card__hint.is-hidden {
    display: none;
}

.consult-lab-card__table-wrap {
    overflow-x: auto;
}

.consult-lab-card__table-wrap.is-hidden {
    display: none;
}

.consult-lab-card__table {
    width: 100%;
    border-collapse: collapse;
}

.consult-lab-card__table th {
    background: var(--panel-soft);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
    padding: 0.45rem 0.6rem;
    border-bottom: 1px solid var(--line);
    text-align: left;
}

.consult-lab-card__table td {
    padding: 0.45rem 0.6rem;
    border-bottom: 1px solid var(--line-soft);
    vertical-align: middle;
}

.consult-lab-card__table td:last-child {
    white-space: nowrap;
    color: var(--text-secondary);
}

.consult-lab-card__table .lab-result-input {
    width: 100%;
    min-width: 6rem;
}

/* Interpretation is template-owned reference text, not an input — it reads as
 * a footnote under its analysis row, never as a second surface. Declared after
 * the two lab tables it applies to (.consult-lab-card__table on the
 * consultation form, .consult-lab-table on the consultation view) so it wins
 * their equally specific td rules. */
.consult-lab-card__table td.consult-lab-interpretation,
.consult-lab-table td.consult-lab-interpretation {
    background: var(--panel-soft);
    padding: 0.3rem 0.6rem 0.45rem;
    font-size: 0.8rem;
    line-height: 1.45;
    color: var(--text-secondary);
    white-space: normal;
}

.consult-lab-interpretation__label {
    display: block;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--muted);
    margin-bottom: 0.12rem;
}

.consult-lab-interpretation__text {
    display: block;
    white-space: pre-line;
}

/* Out-of-range indicators on the consultation form inputs — red border
 * so the vet immediately sees which values need attention. Applied
 * live by consultation_lab_results_controller.js via _flagInputRange. */
.lab-result-input--high,
.lab-result-input--low {
    border-color: var(--danger) !important;
    background: var(--bg-page) !important;
    color: var(--danger-text);
}

.consult-lab-card__empty {
    margin: 0.9rem 0 0;
    font-size: 0.85rem;
    color: var(--text-secondary);
    font-style: italic;
}

.consult-lab-card__empty.is-hidden {
    display: none;
}

/* ==========================================================================
   Dark theme
   ========================================================================== */

:root[data-theme='dark'] body {
    color: var(--text);
    background: linear-gradient(180deg, var(--bg-page-top) 0%, var(--bg-page) 100%);
}

:root[data-theme='dark'] .theme-toggle {
    border-color: #3a5275;
    background: rgba(12, 22, 36, 0.86);
    color: #dce8ff;
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.42);
}

:root[data-theme='dark'] .theme-toggle__swatch {
    border-color: rgba(180, 203, 245, 0.45);
}

:root[data-theme='dark'] .auth-page {
    background: linear-gradient(180deg, #0a1424 0%, var(--bg-page) 100%);
}

:root[data-theme='dark'] .app-shell {
    background: var(--bg-shell);
}

:root[data-theme='dark'] .sidebar {
    background: #132236;
    border-right-color: var(--line);
}

:root[data-theme='dark'] .brand__logo,
:root[data-theme='dark'] .sidebar-session,
:root[data-theme='dark'] .sidebar-toggle,
:root[data-theme='dark'] .session-corner,
:root[data-theme='dark'] .auth-card,
:root[data-theme='dark'] .topbar,
:root[data-theme='dark'] .workspace__header,
:root[data-theme='dark'] .panel,
:root[data-theme='dark'] .card,
:root[data-theme='dark'] .data-entry,
:root[data-theme='dark'] .kpi-card,
:root[data-theme='dark'] .collection-item,
:root[data-theme='dark'] .consult-lab-block,
:root[data-theme='dark'] .schedule-grid,
:root[data-theme='dark'] .schedule-row,
:root[data-theme='dark'] .consent-template-item,
:root[data-theme='dark'] .bulk-actions,
:root[data-theme='dark'] .bulk-selection-bar,
:root[data-theme='dark'] .bulk-editor,
:root[data-theme='dark'] .consult-block,
:root[data-theme='dark'] .consult-summary__item,
:root[data-theme='dark'] .consult-rich__item,
:root[data-theme='dark'] .consult-note-card,
:root[data-theme='dark'] .consultation-list-hover-panel,
:root[data-theme='dark'] .topbar-live-card,
:root[data-theme='dark'] .topbar-live-dropdown,
:root[data-theme='dark'] .topbar-live-item,
:root[data-theme='dark'] .dashboard-search__results,
:root[data-theme='dark'] .dashboard-search__section,
:root[data-theme='dark'] .dashboard-search__item,
:root[data-theme='dark'] .pagination__item,
:root[data-theme='dark'] form.pagination-page-size select.pagination-page-size__select,
:root[data-theme='dark'] .panel--focus,
:root[data-theme='dark'] .panel--soft,
:root[data-theme='dark'] .panel--muted,
:root[data-theme='dark'] .import-provider-list__item,
:root[data-theme='dark'] .pet-photo-box,
:root[data-theme='dark'] .pet-photo-inline,
:root[data-theme='dark'] .date-range-filter__range,
:root[data-theme='dark'] .consult-lab-card,
:root[data-theme='dark'] .consult-lab-card__head,
:root[data-theme='dark'] .consult-lab-card__badge,
:root[data-theme='dark'] .consult-lab-card__table th {
    border-color: var(--line);
    background: var(--surface-elevated);
    color: var(--text);
}

:root[data-theme='dark'] .menu__item,
:root[data-theme='dark'] .menu__group summary,
:root[data-theme='dark'] .table-sort,
:root[data-theme='dark'] .pagination__item--ellipsis {
    color: var(--text);
}

/*
 * Dark-mode override for hardcoded near-black heading/strong colors.
 * These selectors set color: #1f2f49 / #1f304b / #1a2d49 which was
 * designed for white panel backgrounds and becomes 1.1:1 contrast
 * (unreadable) on dark panels. Reset them to var(--text) so they
 * inherit the theme's legible light foreground.
 */
:root[data-theme='dark'] .app-notification-option__body strong,
:root[data-theme='dark'] .consult-form > section h3,
:root[data-theme='dark'] .consult-intake-card__head h4,
:root[data-theme='dark'] .consult-placeholder-card strong,
:root[data-theme='dark'] .consent-template-item__head strong,
:root[data-theme='dark'] .consultation-list-cell__title,
:root[data-theme='dark'] .consult-hero__main h2,
:root[data-theme='dark'] .consult-block__title,
:root[data-theme='dark'] .consult-rich__item h4,
:root[data-theme='dark'] .pet-view__hero-main h2,
:root[data-theme='dark'] .pet-history-cell strong,
:root[data-theme='dark'] .consent-document-item__meta strong,
:root[data-theme='dark'] .consent-summary-chip span,
:root[data-theme='dark'] .consent-preview-card h4,
/* Strong/value colors inside dark panels */
:root[data-theme='dark'] .consult-kpi-card strong,
:root[data-theme='dark'] .consult-info-list strong,
:root[data-theme='dark'] .pet-kpi-card strong,
:root[data-theme='dark'] .pet-consult-timeline__main strong,
:root[data-theme='dark'] .pet-weight-history-list__item strong {
    color: var(--text);
}

/*
 * Body paragraph text inside clinical-rich sections uses #2b3f5f (mid-blue,
 * designed for white panel). Shift to the muted text token for dark mode
 * so headings stand out but body text is still legible at 7:1+ contrast.
 */
:root[data-theme='dark'] .consult-rich__item > div {
    color: var(--text-secondary, var(--text));
}

:root[data-theme='dark'] .menu__item:hover,
:root[data-theme='dark'] .menu__group summary:hover,
:root[data-theme='dark'] .topbar-live-card--interactive:hover,
:root[data-theme='dark'] .topbar-live-card--interactive.is-open,
:root[data-theme='dark'] .dashboard-search__item:hover,
:root[data-theme='dark'] .dashboard-search__item.is-active,
:root[data-theme='dark'] .pagination__item:not(.is-active):not(.pagination__item--ellipsis):hover {
    background: var(--surface-soft);
}

:root[data-theme='dark'] .menu__item.is-active {
    border-color: rgba(111, 164, 255, 0.38);
    background: rgba(111, 164, 255, 0.18);
    color: #d6e7ff;
}

:root[data-theme='dark'] .menu__submenu,
:root[data-theme='dark'] .menu > .menu__group,
:root[data-theme='dark'] .menu__submenu > .menu__group,
:root[data-theme='dark'] .menu-favorites:not([hidden]) {
    border-color: var(--line);
}

:root[data-theme='dark'] .menu__label,
:root[data-theme='dark'] .brand p,
:root[data-theme='dark'] .sidebar-session__meta span,
:root[data-theme='dark'] .workspace__kicker,
:root[data-theme='dark'] .auth-divider,
:root[data-theme='dark'] .remember-check,
:root[data-theme='dark'] .auth-footnote,
:root[data-theme='dark'] .muted,
:root[data-theme='dark'] .panel p,
:root[data-theme='dark'] .card p,
:root[data-theme='dark'] .card li,
:root[data-theme='dark'] .hint,
:root[data-theme='dark'] .table th,
:root[data-theme='dark'] .pagination__info,
:root[data-theme='dark'] .pagination-page-size__label,
:root[data-theme='dark'] .topbar-live-card__summary,
:root[data-theme='dark'] .topbar-live-dropdown__head span,
:root[data-theme='dark'] .topbar-live-dropdown__state span,
:root[data-theme='dark'] .dashboard-search__results-head span,
:root[data-theme='dark'] .dashboard-search__state span,
:root[data-theme='dark'] .consultation-list-cell__meta,
:root[data-theme='dark'] .consult-lab-card__hint,
:root[data-theme='dark'] .consult-lab-card__table td:last-child,
:root[data-theme='dark'] .consult-lab-card__empty {
    color: var(--muted);
}

/* The rule above dims the UM column via td:last-child; the interpretation td
 * is also a last child (it spans the row) but carries a paragraph of clinical
 * text, so it keeps the brighter secondary foreground. */
:root[data-theme='dark'] .consult-lab-card__table td.consult-lab-interpretation,
:root[data-theme='dark'] .consult-lab-table td.consult-lab-interpretation {
    color: var(--text-secondary);
}

:root[data-theme='dark'] .topbar-live-card,
:root[data-theme='dark'] .topbar-live-card--neutral,
:root[data-theme='dark'] .topbar-live-card--info,
:root[data-theme='dark'] .topbar-live-card--success,
:root[data-theme='dark'] .topbar-live-card--warning,
:root[data-theme='dark'] .topbar-live-card--danger {
    background: linear-gradient(180deg, #1a2b43 0%, #162439 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

:root[data-theme='dark'] .topbar-live-card__badge--neutral,
:root[data-theme='dark'] .topbar-live-card__badge.is-empty,
:root[data-theme='dark'] .dashboard-search__section-head span,
:root[data-theme='dark'] .dashboard-search__item em,
:root[data-theme='dark'] .dashboard-search__corner-badge,
:root[data-theme='dark'] .topbar-live-item__title-row em {
    background: rgba(111, 164, 255, 0.22);
    color: #d8e8ff;
}

:root[data-theme='dark'] .topbar-live-item--expired-product .topbar-live-item__title-row em {
    background: rgba(240, 136, 136, 0.24);
    color: #ffd5d5;
}

:root[data-theme='dark'] .topbar-live-item--expiring-product .topbar-live-item__title-row em {
    background: rgba(224, 171, 88, 0.24);
    color: #ffe7bf;
}

:root[data-theme='dark'] .topbar-live-item--expiring-product {
    border-left-color: #d8a04e;
}

:root[data-theme='dark'] .topbar-live-item__kind--expiring-product {
    background: rgba(224, 171, 88, 0.24);
    color: #ffe7bf;
}

:root[data-theme='dark'] .topbar-live-item--expired-product {
    border-left-color: #e08787;
}

:root[data-theme='dark'] .topbar-live-item--plan-limit {
    border-left-color: #a68ce8;
}

:root[data-theme='dark'] .topbar-live-item--supplier-invoice-overdue {
    border-left-color: #e08787;
}

:root[data-theme='dark'] .topbar-live-item--supplier-invoice-overdue .topbar-live-item__title-row em {
    background: rgba(240, 136, 136, 0.24);
    color: #ffd5d5;
}

:root[data-theme='dark'] .topbar-live-item__kind--expired-product {
    background: rgba(240, 136, 136, 0.24);
    color: #ffd5d5;
}

:root[data-theme='dark'] .dashboard-search__backdrop {
    background: rgba(4, 9, 18, 0.62);
}

:root[data-theme='dark'] .dashboard-search__box input,
:root[data-theme='dark'] .dashboard-search.is-open .dashboard-search__box input {
    border-color: #3a5479;
    background: linear-gradient(180deg, #1a2a42 0%, #152338 100%);
    color: var(--text);
    box-shadow: none;
}

:root[data-theme='dark'] .dashboard-search__shortcut {
    border-color: #3a5479;
    background: #1a2a40;
    color: var(--muted);
}

:root[data-theme='dark'] .dashboard-search__action-btn--secondary {
    background: #223754;
    color: #dce9ff;
}

:root[data-theme='dark'] .dashboard-search__state strong,
:root[data-theme='dark'] .dashboard-search__results-head strong,
:root[data-theme='dark'] .topbar-live-dropdown__head strong,
:root[data-theme='dark'] .topbar-live-dropdown__state strong,
:root[data-theme='dark'] .topbar-live-item__title-row strong {
    color: var(--text);
}

:root[data-theme='dark'] .table th,
:root[data-theme='dark'] .table td,
:root[data-theme='dark'] .consult-lab-card__table th,
:root[data-theme='dark'] .consult-lab-card__table td {
    border-bottom-color: var(--line);
}

:root[data-theme='dark'] .table th {
    background: #17263b;
}

:root[data-theme='dark'] .table tbody tr:nth-child(even) {
    background: #15253b;
}

:root[data-theme='dark'] .table tbody tr:hover {
    background: #1c2d47;
}

/* Consultation preview card (the floating panel on /consultatii/lista and on
   the "Recenzii de trimis" grid). Only the PANEL got a dark background in the
   group above — every colour inside the card was still light-mode navy, e.g.
   body text #1f3558 on the #1a2a40 panel (~1.2:1), which made the whole preview
   unreadable in dark mode. Map each one onto the theme tokens. */
/* Selectors go through .consultation-list-hover-panel so they also outrank the
   global `.panel p` colour when the card is mounted inside a page panel — see
   the light-mode note next to .consultation-list-hover-card__label. */
:root[data-theme='dark'] .consultation-list-hover-panel .consultation-list-hover-card__label,
:root[data-theme='dark'] .consultation-list-hover-panel .consultation-list-hover-card__facts strong,
:root[data-theme='dark'] .consultation-list-hover-panel .consultation-list-hover-card__vitals strong,
:root[data-theme='dark'] .consultation-list-hover-panel .consultation-list-hover-card__content {
    color: var(--text);
}

/* The header sets its own colour, which strong + the date/doctor span inherit. */
:root[data-theme='dark'] .consultation-list-hover-panel .consultation-list-hover-card__header {
    color: var(--text);
}

:root[data-theme='dark'] .consultation-list-hover-panel .consultation-list-hover-card__identity,
:root[data-theme='dark'] .consultation-list-hover-panel .consultation-list-hover-card__empty,
:root[data-theme='dark'] .consultation-list-hover-panel .consultation-list-hover-card__facts span,
:root[data-theme='dark'] .consultation-list-hover-panel .consultation-list-hover-card__vitals span {
    color: var(--muted);
}

:root[data-theme='dark'] .consultation-list-hover-card__section + .consultation-list-hover-card__section {
    border-top-color: var(--line);
}

:root[data-theme='dark'] .consultation-list-hover-card__facts,
:root[data-theme='dark'] .consultation-list-hover-card__vitals > div {
    background: var(--panel-soft);
    border-color: var(--line);
}

:root[data-theme='dark'] .consultation-list-hover-card__chip {
    background: var(--primary-ghost);
    color: var(--text);
}

:root[data-theme='dark'] .consultation-list-hover-card__close {
    background: var(--panel-soft);
    border-color: var(--line);
    color: var(--text);
}

:root[data-theme='dark'] .consultation-list-hover-card__close:hover,
:root[data-theme='dark'] .consultation-list-hover-card__close:focus-visible {
    background: var(--panel-hover);
    border-color: var(--primary);
}

/* The bulk bar's own dark background is set with the panel group above, but its
   text kept the light-mode navy (#1f3f77 on #1a2a40 ≈ 1.3:1 — the selection
   count was effectively invisible). The count is the only confirmation of how
   many rows an action is about to hit, so it has to be readable in both themes. */
:root[data-theme='dark'] .bulk-selection-bar__count,
:root[data-theme='dark'] .bulk-actions__count {
    color: var(--text);
}

:root[data-theme='dark'] .bulk-selection-bar__hint {
    color: var(--muted);
}

:root[data-theme='dark'] .table tbody tr.is-selected {
    background: rgba(111, 164, 255, 0.26);
}

:root[data-theme='dark'] .table tbody tr.is-selected:hover {
    background: rgba(111, 164, 255, 0.32);
}

:root[data-theme='dark'] .table-sort {
    color: var(--muted);
}

:root[data-theme='dark'] .table-sort:hover,
:root[data-theme='dark'] .table-sort.is-active {
    color: #d5e6ff;
}

:root[data-theme='dark'] .table-sort__icon {
    border-color: #3b5476;
    background: #213550;
    color: #b6c7e3;
}

:root[data-theme='dark'] .table-sort.is-active .table-sort__icon {
    border-color: var(--primary);
    background: var(--primary);
    color: #f8fbff;
}

:root[data-theme='dark'] .table-sort:hover .table-sort__icon {
    border-color: #4f6f9f;
    background: #284061;
}

:root[data-theme='dark'] .pagination__item {
    border-color: #40597d;
}

:root[data-theme='dark'] .pagination__item.is-active {
    border-color: rgba(111, 164, 255, 0.45);
    background: rgba(111, 164, 255, 0.22);
    color: #dce9ff;
}

:root[data-theme='dark'] .btn {
    border-color: #375072;
    background: linear-gradient(180deg, #1e304a 0%, #18273c 100%);
    color: #dce8ff;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.25);
}

:root[data-theme='dark'] .btn:hover {
    border-color: #4a6b96;
    background: linear-gradient(180deg, #243a59 0%, #1d2f49 100%);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}

:root[data-theme='dark'] .btn--primary {
    border-color: #5e94ec;
    background: linear-gradient(130deg, #6fa4ff 0%, #4f86e0 100%);
    color: #f9fbff;
}

:root[data-theme='dark'] .btn--primary:hover {
    background: linear-gradient(130deg, #6498ef 0%, #4678ca 100%);
}

:root[data-theme='dark'] .btn--warning {
    border-color: #a98023;
    background: linear-gradient(130deg, #f0bf4d 0%, #be8d1e 100%);
    color: #221402;
}

:root[data-theme='dark'] .btn--danger {
    border-color: #986069;
    background: #4c2831;
    color: #ffd0d0;
}

:root[data-theme='dark'] .btn--danger:hover {
    background: #5b313a;
}

:root[data-theme='dark'] .btn--add {
    border-color: #3f8463;
    background: #1f4734;
    color: #b9f1d4;
}

:root[data-theme='dark'] .btn--print,
:root[data-theme='dark'] .btn--email,
:root[data-theme='dark'] .btn--preview,
:root[data-theme='dark'] .btn--pdf {
    border-color: #3b5476;
    background: #1e304b;
    color: #d6e6ff;
}

:root[data-theme='dark'] .flash--success {
    border-color: #3f8665;
    background: #1d4433;
    color: #b8f0d2;
}

:root[data-theme='dark'] .flash--error {
    border-color: #955c64;
    background: #4a252e;
    color: #ffd1d1;
}

:root[data-theme='dark'] .flash--info {
    border-color: #3b5f85;
    background: #1c3348;
    color: #cfe3f7;
}

:root[data-theme='dark'] .tag,
:root[data-theme='dark'] .consult-tag,
:root[data-theme='dark'] .consultation-list-chip,
:root[data-theme='dark'] .dashboard-search__chips span {
    border-color: #3b5476;
    background: #223550;
    color: #d7e7ff;
}

:root[data-theme='dark'] .consult-tag--muted,
:root[data-theme='dark'] .consultation-list-chip--document {
    background: #2a3445;
    border-color: #445369;
    color: #c8d2e4;
}

:root[data-theme='dark'] input:not([type='checkbox']):not([type='radio']):not(.flatpickr-input):not(.numInput),
:root[data-theme='dark'] label textarea,
:root[data-theme='dark'] label select,
:root[data-theme='dark'] textarea,
:root[data-theme='dark'] select:not(.flatpickr-monthDropdown-months),
:root[data-theme='dark'] .input,
:root[data-theme='dark'] .ts-wrapper .ts-control,
:root[data-theme='dark'] .ts-dropdown,
:root[data-theme='dark'] .password-toggle-btn,
:root[data-theme='dark'] .bulk-editor__input {
    border-color: var(--line);
    background: var(--surface-elevated);
    color: var(--text);
}

:root[data-theme='dark'] .ts-dropdown .active {
    background: rgba(111, 164, 255, 0.24);
    color: #d8e8ff;
}

:root[data-theme='dark'] .ts-wrapper.single .ts-control:after {
    border-color: var(--muted) transparent transparent;
}

:root[data-theme='dark'] .ts-wrapper.single.dropdown-active .ts-control:after {
    border-color: transparent transparent var(--muted);
}

:root[data-theme='dark'] input[type='checkbox'],
:root[data-theme='dark'] input[type='radio'] {
    border-color: #4a6288;
    background: #1a2a40;
}

:root[data-theme='dark'] input:focus:not(.flatpickr-input):not(.numInput),
:root[data-theme='dark'] button:focus,
:root[data-theme='dark'] textarea:focus,
:root[data-theme='dark'] select:focus:not(.flatpickr-monthDropdown-months) {
    outline: 3px solid rgba(111, 164, 255, 0.28);
    border-color: #7daeff;
}

:root[data-theme='dark'] .flatpickr-calendar {
    border-color: #3a5274;
    background: #16263d;
    color: var(--text);
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.45);
}

:root[data-theme='dark'] .flatpickr-months .flatpickr-prev-month,
:root[data-theme='dark'] .flatpickr-months .flatpickr-next-month,
:root[data-theme='dark'] .flatpickr-current-month,
:root[data-theme='dark'] .flatpickr-weekday {
    color: var(--muted);
}

:root[data-theme='dark'] .flatpickr-day {
    color: var(--text);
}

:root[data-theme='dark'] .flatpickr-day:hover,
:root[data-theme='dark'] .flatpickr-day:focus,
:root[data-theme='dark'] .flatpickr-day.inRange {
    border-color: #2a3f5e;
    background: #263c5b;
}

:root[data-theme='dark'] .flatpickr-day.selected,
:root[data-theme='dark'] .flatpickr-day.startRange,
:root[data-theme='dark'] .flatpickr-day.endRange,
:root[data-theme='dark'] .flatpickr-day.selected.inRange {
    border-color: var(--primary);
    background: var(--primary);
    color: #f9fbff;
}

:root[data-theme='dark'] .flatpickr-day.today {
    border-color: #7caeff;
}

:root[data-theme='dark'] .app-notification-option {
    border-color: #3a5274;
    background: #1a2b43;
}

:root[data-theme='dark'] .app-notification-option:hover {
    border-color: #4f6f9e;
    background: #213650;
}

:root[data-theme='dark'] .app-notification-option__body strong {
    color: var(--text);
}

:root[data-theme='dark'] .app-notification-option__body small {
    color: var(--muted);
}

:root[data-theme='dark'] .app-notification-option__subfield-label {
    color: #c8daf7;
}

:root[data-theme='dark'] .app-notification-option__subfield-control small {
    color: var(--muted);
}

/* Dark mode contrast fixes for key navigation and consultation views */
:root[data-theme='dark'] .menu__item--favorite {
    border-color: #4d6488;
    background: #2a3f60;
    color: #e2edff;
}

:root[data-theme='dark'] .menu__item--favorite:hover {
    border-color: #6887b7;
    background: #334d74;
}

:root[data-theme='dark'] .menu-fav-toggle {
    color: #a5b9d9;
}

:root[data-theme='dark'] .menu-fav-toggle.is-active {
    color: #ff7676;
}

:root[data-theme='dark'] .sidebar-session__meta strong {
    color: var(--text);
}

:root[data-theme='dark'] .app-shell-wrap.is-sidebar-collapsed .sidebar-session__actions,
:root[data-theme='dark'] .app-shell-wrap.is-sidebar-collapsed .menu__group.is-open > .menu__submenu,
:root[data-theme='dark'] .app-shell-wrap.is-sidebar-collapsed .brand__link .brand__tooltip {
    background: #1a2c45;
    border-color: #2e456a;
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.5);
}

:root[data-theme='dark'] .topbar-live-card__title {
    color: var(--text);
}

:root[data-theme='dark'] .topbar-live-dropdown__section-head strong {
    color: #c9d9f3;
}

:root[data-theme='dark'] .table td {
    color: var(--text);
}

:root[data-theme='dark'] .consultation-list-cell__title {
    color: var(--text);
}

:root[data-theme='dark'] .consultation-list-cell__title-link {
    color: #9fc0ff !important;
}

:root[data-theme='dark'] .consultation-list-cell__title-link:hover,
:root[data-theme='dark'] .consultation-list-cell__title-link:focus-visible,
:root[data-theme='dark'] .consultation-list-cell__title-link:hover .consultation-list-cell__title,
:root[data-theme='dark'] .consultation-list-cell__title-link:focus-visible .consultation-list-cell__title {
    color: #c8dcff !important;
}

:root[data-theme='dark'] .consultation-list-dx__label {
    color: #8ea3c4;
}

:root[data-theme='dark'] .consultation-list-dx__value {
    color: #aec3e2;
}

:root[data-theme='dark'] .consultation-list-dx__value--confirmed {
    color: #e4eeff;
}

/* =========================================================================
   Shared pet care reminder editor
   Used in: consultation wizard step 3 + pet profile reminders section.
   ========================================================================= */

.reminders-editor {
    display: grid;
    gap: 1rem;
}

.reminders-editor__form {
    background: var(--panel-soft);
    border: 1px solid var(--line);
    border-radius: 0.8rem;
    padding: 0.9rem 1rem;
    display: grid;
    gap: 0.65rem;
}

.reminders-editor__form-grid {
    display: grid;
    gap: 0.65rem;
    grid-template-columns: 2fr 1fr;
}

@media (max-width: 780px) {
    .reminders-editor__form-grid {
        grid-template-columns: 1fr;
    }
}

.reminders-editor__field {
    display: grid;
    gap: 0.3rem;
    font-size: 0.82rem;
    color: var(--text-secondary);
}

.reminders-editor__field select,
.reminders-editor__field input[type="date"],
.reminders-editor__field input[type="number"],
.reminders-editor__field textarea {
    width: 100%;
    border: 1px solid #c7d4ec;
    border-radius: 0.55rem;
    padding: 0.5rem 0.65rem;
    font-size: 0.88rem;
    background: var(--panel);
    color: var(--text);
}

.reminders-editor__field textarea {
    min-height: 3rem;
    resize: vertical;
}

.reminders-editor__quick-presets {
    display: flex;
    gap: 0.35rem;
    flex-wrap: wrap;
    font-size: 0.78rem;
    color: var(--text-secondary);
    align-items: center;
}

.reminders-editor__quick-presets-label {
    margin-right: 0.25rem;
    font-weight: 600;
}

.reminders-editor__recurrence-block {
    display: grid;
    gap: 0.4rem;
    padding: 0.55rem 0.7rem;
    border: 1px dashed #c7d4ec;
    border-radius: 0.55rem;
    background: var(--panel);
}

.reminders-editor__recurrence-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--text);
    cursor: pointer;
    user-select: none;
}

.reminders-editor__recurrence-toggle input[type="checkbox"] {
    width: 1rem;
    height: 1rem;
    margin: 0;
    accent-color: #2563eb;
    cursor: pointer;
}

.reminders-editor__recurrence-detail {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.82rem;
    color: var(--text-secondary);
    padding-left: 1.4rem;
}

.reminders-editor__recurrence-detail.is-hidden {
    display: none;
}

.reminders-editor__recurrence-detail input[type="number"] {
    width: 4.5rem;
    border: 1px solid #c7d4ec;
    border-radius: 0.4rem;
    padding: 0.3rem 0.45rem;
    font-size: 0.85rem;
    background: var(--panel);
    color: var(--text);
}

.reminders-editor__preset {
    border: 1px solid #c7d4ec;
    border-radius: 999px;
    padding: 0.2rem 0.6rem;
    background: var(--panel);
    color: #2d4870;
    font-size: 0.75rem;
    cursor: pointer;
}

.reminders-editor__preset:hover {
    background: var(--surface-soft);
}

.reminders-editor__form-actions {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
}

.reminders-editor__cancel.is-hidden {
    display: none;
}

.reminders-editor__feedback {
    border-radius: 0.55rem;
    padding: 0.55rem 0.75rem;
    font-size: 0.85rem;
    border: 1px solid #c7d4ec;
    background: var(--panel-soft);
    color: #1f3461;
}

.reminders-editor__feedback.is-hidden {
    display: none;
}

.reminders-editor__feedback[data-tone="error"] {
    border-color: var(--danger-line);
    background: var(--bg-page);
    color: var(--danger-text);
}

.reminders-editor__feedback[data-tone="success"] {
    border-color: var(--success-line);
    background: var(--panel-soft);
    color: var(--success-text);
}

.reminders-editor__section {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 0.8rem;
    padding: 0.85rem 1rem 0.9rem;
}

.reminders-editor__section--history {
    background: var(--panel);
}

.reminders-editor__section-head {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 0.85rem;
    text-transform: uppercase;
    color: var(--text-secondary);
    letter-spacing: 0.02em;
    margin-bottom: 0.55rem;
    cursor: pointer;
}

.reminders-editor__section-head h4 {
    margin: 0;
    font-size: 0.92rem;
    color: var(--text);
    letter-spacing: 0;
    text-transform: none;
}

.reminders-editor__count {
    background: var(--bg-page);
    color: var(--text-secondary);
    border-radius: 999px;
    padding: 0.1rem 0.55rem;
    font-size: 0.72rem;
    font-weight: 700;
}

.reminders-editor__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 0.5rem;
}

.reminders-editor__row {
    border: 1px solid var(--line);
    border-radius: 0.7rem;
    padding: 0.6rem 0.75rem;
    background: var(--panel);
    display: grid;
    gap: 0.35rem;
}

.reminders-editor__row-main {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.reminders-editor__type {
    font-weight: 700;
    color: var(--text);
    font-size: 0.93rem;
}

.reminders-editor__due {
    font-size: 0.82rem;
    color: var(--text-secondary);
    background: var(--bg-page);
    border-radius: 0.35rem;
    padding: 0.15rem 0.5rem;
}

.reminders-editor__row-meta {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.reminders-editor__notes {
    margin: 0;
    font-size: 0.82rem;
    color: var(--text-secondary);
}

.reminders-editor__actions {
    display: flex;
    gap: 0.35rem;
    flex-wrap: wrap;
}

.reminders-editor__empty {
    margin: 0.25rem 0 0;
    font-size: 0.82rem;
    color: var(--muted);
    font-style: italic;
}

.reminders-editor__empty.is-hidden {
    display: none;
}

/* Status chips */
.reminders-editor__chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    border-radius: 999px;
    padding: 0.15rem 0.6rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    border: 1px solid transparent;
}

.reminders-editor__chip--scheduled {
    background: var(--line);
    color: var(--primary-strong);
    border-color: #bfdbfe;
}

.reminders-editor__chip--completed {
    background: #dcfce7;
    color: var(--success-text);
    border-color: var(--success-line);
}

.reminders-editor__chip--expired {
    background: var(--line);
    color: var(--text-secondary);
    border-color: var(--line);
}

.reminders-editor__chip--cancelled {
    background: var(--bg-page);
    color: var(--text-secondary);
    border-color: var(--line);
}

.reminders-editor__chip--overdue {
    background: var(--danger-bg);
    color: var(--danger-text);
    border-color: #fecaca;
}

.reminders-editor__chip--recurrence {
    background: var(--surface-soft);
    color: #0c4a6e;
    border-color: var(--line);
    font-weight: 500;
}

/* Provenance chips — where the scadenta came from. Sepia = legacy SoftVet
   import, brand blue = created inside CloudVet. Kept calm (weight 600) so they
   read as metadata, not status. */
.reminders-editor__chip--imported {
    background: var(--warning-bg);
    color: var(--warning-text);
    border-color: var(--warning-line);
    font-weight: 600;
}

.reminders-editor__chip--cloudvet {
    background: rgba(41, 104, 224, 0.08);
    color: var(--primary-strong);
    border-color: rgba(41, 104, 224, 0.18);
    font-weight: 600;
}

/* Compact provenance tag for the notification "scadente" queue table. Same
   sepia/blue semantics as the editor chips, sized down for a table cell. */
.notif-source-tag {
    display: inline-flex;
    align-items: center;
    border: 1px solid transparent;
    border-radius: 999px;
    padding: 0.05rem 0.45rem;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.notif-source-tag--imported {
    background: var(--warning-bg);
    color: var(--warning-text);
    border-color: var(--warning-line);
}

.notif-source-tag--cloudvet {
    background: rgba(41, 104, 224, 0.08);
    color: var(--primary-strong);
    border-color: rgba(41, 104, 224, 0.18);
}

/* Dispatch chips */
.reminders-editor__dispatch {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    border-radius: 999px;
    padding: 0.15rem 0.55rem;
    font-size: 0.7rem;
    font-weight: 600;
    border: 1px solid transparent;
}

.reminders-editor__dispatch--pending,
.reminders-editor__dispatch--queued,
.reminders-editor__dispatch--processing {
    background: var(--bg-page);
    color: var(--text-secondary);
    border-color: var(--line);
}

.reminders-editor__dispatch--sent {
    background: var(--line);
    color: var(--primary-strong);
    border-color: #bfdbfe;
}

.reminders-editor__dispatch--delivered {
    background: #dcfce7;
    color: var(--success-text);
    border-color: var(--success-line);
}

.reminders-editor__dispatch--read {
    background: #ccfbf1;
    color: #115e59;
    border-color: var(--success-line);
}

.reminders-editor__dispatch--fallback-queued {
    background: var(--warning-bg);
    color: var(--danger-text);
    border-color: var(--warning-line);
}

.reminders-editor__dispatch--suppressed {
    background: var(--line);
    color: var(--text-secondary);
    border-color: var(--line);
}

.reminders-editor__dispatch--failed {
    background: var(--danger-bg);
    color: var(--danger-text);
    border-color: #fecaca;
}

.btn--mini {
    padding: 0.3rem 0.65rem;
    font-size: 0.76rem;
    border-radius: 0.45rem;
}

.btn--success {
    background: var(--success-solid);
    color: var(--text-on-solid);
    border-color: var(--success);
}

.btn--success:hover {
    background: var(--success);
}


/* ---------------- Reporting dashboard + hub ---------------- */

/* The shared .board-grid sits its cells 0.75rem apart, which is tight enough
   on the dashboard that two adjacent report cards read as one continuous
   surface. 1rem (the design system's `md` step, scaled by the 95% root) lets
   each card read as its own report. Scoped to the dashboard grid so the
   spacing .board-grid gives every other page is untouched. */
.board-grid[data-dashboard-layout-target="grid"] {
    gap: 1rem;
}

.dashboard-widget {
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: transform 120ms ease, box-shadow 120ms ease, opacity 120ms ease;
    position: relative;
}
.dashboard-widget.is-dragging {
    opacity: 0.55;
    transform: scale(0.98);
    cursor: grabbing;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.18);
}
/* Insertion indicator: thick blue left border on the widget the user
   would drop before. The widget stays in place — only the border + a
   slight pulse signal where the dragged item will land. */
.dashboard-widget.is-drop-target {
    position: relative;
}
.dashboard-widget.is-drop-target::before {
    content: '';
    position: absolute;
    left: -8px;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--primary);
    border-radius: 2px;
    box-shadow: 0 0 0 4px rgba(44, 109, 245, 0.18);
}
/* When the source is being dragged over the empty grid area at the
   bottom (no specific drop target), pulse the grid border instead. */
.board-grid.is-drop-tail {
    box-shadow: inset 0 -4px 0 0 #2c6df5;
    border-radius: 6px;
}
.dashboard-widget__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}
.dashboard-widget__handle {
    cursor: grab;
    user-select: none;
    color: var(--muted);
    font-size: 1rem;
    line-height: 1;
    padding: 4px 4px 4px 0;
    letter-spacing: -2px;
    transition: color 120ms ease;
    flex-shrink: 0;
}
.dashboard-widget__handle:hover { color: #2c6df5; }
.dashboard-widget.is-dragging .dashboard-widget__handle { cursor: grabbing; }
.dashboard-widget__heading { flex: 1; min-width: 0; }
.dashboard-widget__title { margin: 0; font-size: 1.05rem; }
.dashboard-widget__subtitle { margin: 2px 0 0; font-size: 0.85rem; }
.dashboard-widget__controls { display: flex; gap: 4px; flex-shrink: 0; }
.dashboard-widget__body { flex: 1; }
.dashboard-widget__foot { margin-top: auto; padding-top: 8px; border-top: 1px solid var(--line); }

.widget-kpi p { margin: 0 0 4px; font-size: 0.85rem; }
.widget-kpi h4 { margin: 0; font-size: 1.6rem; }
.widget-kpi-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.widget-status-breakdown { display: flex; flex-wrap: wrap; gap: 4px; }

.compact-list--bars li { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: baseline; }
.compact-list--bars .mini-bar { grid-column: 1 / -1; height: 4px; background: var(--line); border-radius: 2px; overflow: hidden; }
.compact-list--bars .mini-bar > span { display: block; height: 100%; background: var(--primary); }

.reorder-widget-list > li { margin-bottom: 10px; }
.reorder-widget-list > li:last-child { margin-bottom: 0; }
.reorder-widget-list__supplier { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.reorder-widget-products { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.reorder-widget-products li { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; font-size: 0.85rem; }
.reorder-widget-products__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reorder-widget-products__qty { flex-shrink: 0; font-variant-numeric: tabular-nums; }
.reorder-widget-unresolved { margin-top: 10px; }
.reorder-widget-unresolved > p { margin: 0 0 4px; }

.revenue-by-wp-list { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.revenue-by-wp-list__row { display: grid; grid-template-columns: minmax(140px, 1fr) minmax(80px, 2fr) minmax(120px, auto); align-items: center; gap: 12px; }
.revenue-by-wp-list__label { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.revenue-by-wp-list__label strong { font-size: 0.95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.revenue-by-wp-list__bar { height: 8px; background: var(--line); border-radius: 4px; overflow: hidden; }
.revenue-by-wp-list__bar-fill { display: block; height: 100%; background: var(--primary); border-radius: 4px; }
.revenue-by-wp-list__amount { text-align: right; display: flex; flex-direction: column; gap: 2px; }
.revenue-by-wp-list__amount strong { font-size: 0.95rem; }

.pl-widget { display: flex; flex-direction: column; gap: 12px; }
.pl-widget__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.pl-widget__net { display: flex; flex-direction: column; gap: 2px; }
.pl-widget__amount { font-size: 1.6rem; font-weight: 600; }
.pl-widget__amount.is-positive { color: var(--success-text); }
.pl-widget__amount.is-negative { color: var(--danger-text); }
.pl-widget__controls { display: flex; flex-direction: row; gap: 12px; flex-wrap: wrap; align-items: flex-end; justify-content: flex-end; }
.pl-widget__pickers { display: contents; }
.pl-widget__month { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 4px; font-size: 0.85rem; }
.pl-widget__month select { padding: 4px 8px; border-radius: 4px; }
.pl-widget__month-label { font-size: 0.7rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.pl-widget__interval { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 6px; padding: 2px 10px 6px; margin: 0; }
.pl-widget__interval legend { font-size: 0.7rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; padding: 0 4px; }
.pl-widget__interval select { padding: 3px 6px; border-radius: 4px; border: 1px solid var(--line); background: var(--panel); font-size: 0.8rem; }
.pl-widget__delta { font-size: 0.85rem; }
.pl-widget__delta.is-up { color: var(--success-text); }
.pl-widget__delta.is-down { color: var(--danger-text); }
.pl-widget__chart { position: relative; height: 240px; }
.pl-widget__note { margin: 0; font-size: 0.85rem; }
.pl-warning { padding: 8px 12px; background: rgba(245, 158, 11, 0.08); border-radius: 6px; }
.pl-warning summary { cursor: pointer; font-size: 0.9rem; }
.pl-warning ul { margin: 8px 0 0; }

.rbc-widget { display: flex; flex-direction: column; gap: 12px; }
.rbc-widget__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.rbc-widget__total { display: flex; flex-direction: column; gap: 2px; }
.rbc-widget__amount { font-size: 1.4rem; font-weight: 600; }
.rbc-widget__delta { font-size: 0.85rem; padding: 2px 8px; border-radius: 999px; align-self: flex-start; }
.rbc-widget__delta.is-up { background: rgba(34, 197, 94, 0.12); color: var(--success-text); font-weight: 500; }
.rbc-widget__delta.is-down { background: rgba(239, 68, 68, 0.12); color: var(--danger-text); font-weight: 500; }
.rbc-widget__controls { display: flex; flex-direction: row; flex-wrap: wrap; gap: 12px; align-items: flex-end; justify-content: flex-end; }
.rbc-widget__pickers { display: contents; }
.rbc-widget__month-label { font-size: 0.75rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.rbc-widget__interval { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 6px; padding: 2px 10px 6px; margin: 0; }
.rbc-widget__interval legend { font-size: 0.7rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; padding: 0 4px; }
.rbc-widget__interval select { padding: 3px 6px; border-radius: 4px; border: 1px solid var(--line); background: var(--panel); font-size: 0.8rem; }
.rbc-widget__month { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 4px; font-size: 0.85rem; color: var(--text-secondary); }
.rbc-widget__month select { padding: 4px 10px; border-radius: 6px; border: 1px solid var(--line); background: var(--panel); font-size: 0.85rem; }
.rbc-widget__chart { position: relative; width: 100%; min-height: 180px; }
.rbc-widget__legend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.rbc-legend__head { display: grid; grid-template-columns: minmax(120px, 1.6fr) minmax(70px, 1fr) minmax(70px, 1fr) 56px; gap: 10px; align-items: center; padding: 4px 0; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); border-bottom: 1px solid var(--line); }
.rbc-legend__head-amt, .rbc-legend__head-delta { text-align: right; }
.rbc-legend__head-selected { color: #2c6df5; }
.rbc-legend__head-compare { opacity: 0.7; }
.rbc-widget__legend-row { display: grid; grid-template-columns: minmax(120px, 1.6fr) minmax(70px, 1fr) minmax(70px, 1fr) 56px; gap: 10px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--line-soft); }
.rbc-widget__legend-row:last-child { border-bottom: none; }
.rbc-widget__legend-meta { display: flex; flex-direction: column; min-width: 0; }
.rbc-widget__legend-meta strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.95rem; }
.rbc-widget__legend-amount { text-align: right; font-variant-numeric: tabular-nums; font-size: 0.95rem; }
.rbc-widget__legend-amount--selected { font-weight: 600; }
.rbc-widget__legend-amount--compare { opacity: 0.6; }
.rbc-widget__legend-delta { font-size: 0.75rem; padding: 2px 6px; border-radius: 999px; text-align: center; justify-self: end; }
.rbc-widget__legend-delta.is-up { background: rgba(34, 197, 94, 0.12); color: var(--success-text); }
.rbc-widget__legend-delta.is-down { background: rgba(239, 68, 68, 0.12); color: var(--danger-text); }
.rbc-widget__legend-delta.is-new { background: rgba(59, 130, 246, 0.12); color: var(--primary-strong); }
.rbc-widget__legend-delta.is-flat { color: var(--muted); }
@media (max-width: 360px) {
    .rbc-legend__head, .rbc-widget__legend-row { grid-template-columns: 1fr auto 56px; gap: 6px; }
    .rbc-legend__head-compare, .rbc-widget__legend-amount--compare { display: none; }
}

.pm-widget { display: flex; flex-direction: column; gap: 12px; }
.pm-widget__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.pm-widget__total { display: flex; flex-direction: column; gap: 2px; }
.pm-widget__amount { font-size: 1.4rem; font-weight: 600; }
.pm-widget__amount.is-positive { color: var(--success-text); }
.pm-widget__amount.is-negative { color: var(--danger-text); }
.pm-widget__controls { display: flex; flex-direction: row; gap: 12px; flex-wrap: wrap; align-items: flex-end; justify-content: flex-end; }
.pm-widget__pickers { display: contents; }
.pm-widget__month { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 4px; font-size: 0.85rem; color: var(--text-secondary); }
.pm-widget__month select { padding: 4px 10px; border-radius: 6px; border: 1px solid var(--line); background: var(--panel); font-size: 0.85rem; }
.pm-widget__month-label { font-size: 0.7rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.pm-widget__interval { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 6px; padding: 2px 10px 6px; margin: 0; }
.pm-widget__interval legend { font-size: 0.7rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; padding: 0 4px; }
.pm-widget__interval select { padding: 3px 6px; border-radius: 4px; border: 1px solid var(--line); background: var(--panel); font-size: 0.8rem; }
.pm-widget__chart { position: relative; width: 100%; min-height: 200px; }
.pm-widget__legend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.pm-legend__head { display: grid; grid-template-columns: minmax(140px, 2fr) minmax(80px, 1fr) minmax(80px, 1fr) minmax(60px, auto) 64px; gap: 10px; align-items: center; padding: 4px 0; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); border-bottom: 1px solid var(--line); }
.pm-legend__head-amt, .pm-legend__head-pct, .pm-legend__head-delta { text-align: right; }
.pm-widget__legend-row { display: grid; grid-template-columns: minmax(140px, 2fr) minmax(80px, 1fr) minmax(80px, 1fr) minmax(60px, auto) 64px; gap: 10px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--line-soft); }
.pm-widget__legend-row:last-child { border-bottom: none; }
.pm-widget__legend-meta { display: flex; flex-direction: column; min-width: 0; }
.pm-widget__legend-meta strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.95rem; }
.pm-widget__legend-amount { text-align: right; font-variant-numeric: tabular-nums; font-size: 0.95rem; }
.pm-widget__legend-amount.is-positive { color: var(--success-text); font-weight: 600; }
.pm-widget__legend-amount.is-negative { color: var(--danger-text); font-weight: 600; }
.pm-widget__legend-pct { text-align: right; font-variant-numeric: tabular-nums; font-size: 0.95rem; font-weight: 600; }
.pm-widget__legend-pct.is-negative { color: var(--danger-text); }
.pm-widget__legend-delta { font-size: 0.75rem; padding: 2px 6px; border-radius: 999px; text-align: center; justify-self: end; }
.pm-widget__legend-delta.is-up { background: rgba(34, 197, 94, 0.12); color: var(--success-text); }
.pm-widget__legend-delta.is-down { background: rgba(239, 68, 68, 0.12); color: var(--danger-text); }
.pm-widget__legend-delta.is-new { background: rgba(59, 130, 246, 0.12); color: var(--primary-strong); }
.pm-widget__legend-delta.is-flat { color: var(--muted); }
.pm-warning { padding: 8px 12px; background: rgba(245, 158, 11, 0.08); border-radius: 6px; }
.pm-warning summary { cursor: pointer; font-size: 0.9rem; }
.pm-warning ul { margin: 8px 0 0; }

.cf-widget { display: flex; flex-direction: column; gap: 12px; }
.cf-widget__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.cf-widget__totals { display: flex; flex-direction: column; gap: 12px; }
.cf-widget__net { display: flex; flex-direction: column; gap: 2px; }
.cf-widget__amount { font-size: 1.6rem; font-weight: 600; }
.cf-widget__amount.is-positive { color: var(--success-text); }
.cf-widget__amount.is-negative { color: var(--danger-text); }
.cf-widget__delta { font-size: 0.85rem; }
.cf-widget__delta.is-up { color: var(--success-text); }
.cf-widget__delta.is-down { color: var(--danger-text); }
.cf-widget__breakdown { display: flex; flex-wrap: wrap; gap: 16px; margin: 0; padding: 0; font-size: 0.85rem; }
.cf-widget__breakdown div { display: flex; flex-direction: column; }
.cf-widget__breakdown dt { color: var(--muted); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em; margin: 0; }
.cf-widget__breakdown dd { margin: 0; font-variant-numeric: tabular-nums; font-weight: 600; }
.cf-widget__controls { display: flex; flex-direction: row; gap: 12px; flex-wrap: wrap; align-items: flex-end; justify-content: flex-end; }
.cf-widget__pickers { display: contents; }
.cf-widget__month { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 4px; font-size: 0.85rem; color: var(--text-secondary); }
.cf-widget__month select { padding: 4px 10px; border-radius: 6px; border: 1px solid var(--line); background: var(--panel); font-size: 0.85rem; }
.cf-widget__month-label { font-size: 0.7rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.cf-widget__interval { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 6px; padding: 2px 10px 6px; margin: 0; }
.cf-widget__interval legend { font-size: 0.7rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; padding: 0 4px; }
.cf-widget__interval select { padding: 3px 6px; border-radius: 4px; border: 1px solid var(--line); background: var(--panel); font-size: 0.8rem; }
.cf-widget__chart { position: relative; width: 100%; height: 320px; }
.cf-widget__note { margin: 0; font-size: 0.85rem; }

.vat-widget { display: flex; flex-direction: column; gap: 12px; }
.vat-widget__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.vat-widget__total { display: flex; flex-direction: column; gap: 2px; }
.vat-widget__amount { font-size: 1.4rem; font-weight: 600; }
.vat-widget__delta { font-size: 0.85rem; padding: 2px 8px; border-radius: 999px; align-self: flex-start; margin-top: 2px; }
.vat-widget__delta.is-up { background: rgba(34, 197, 94, 0.12); color: var(--success-text); font-weight: 500; }
.vat-widget__delta.is-down { background: rgba(239, 68, 68, 0.12); color: var(--danger-text); font-weight: 500; }
.vat-widget__controls { display: flex; flex-direction: row; gap: 12px; flex-wrap: wrap; align-items: flex-end; justify-content: flex-end; }
.vat-widget__pickers { display: contents; }
.vat-widget__month { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 4px; font-size: 0.85rem; color: var(--text-secondary); }
.vat-widget__month select { padding: 4px 10px; border-radius: 6px; border: 1px solid var(--line); background: var(--panel); font-size: 0.85rem; }
.vat-widget__month-label { font-size: 0.7rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.vat-widget__interval { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 6px; padding: 2px 10px 6px; margin: 0; }
.vat-widget__interval legend { font-size: 0.7rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; padding: 0 4px; }
.vat-widget__interval select { padding: 3px 6px; border-radius: 4px; border: 1px solid var(--line); background: var(--panel); font-size: 0.8rem; }
.vat-widget__chart { position: relative; width: 100%; height: 260px; }
.vat-widget__legend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.vat-legend__head { display: grid; grid-template-columns: minmax(120px, 1.4fr) minmax(80px, 1fr) minmax(80px, 1fr) 56px; gap: 10px; align-items: center; padding: 4px 0; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); border-bottom: 1px solid var(--line); }
.vat-legend__head-amt, .vat-legend__head-delta { text-align: right; }
.vat-widget__legend-row { display: grid; grid-template-columns: minmax(120px, 1.4fr) minmax(80px, 1fr) minmax(80px, 1fr) 56px; gap: 10px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--line-soft); }
.vat-widget__legend-row:last-child { border-bottom: none; }
.vat-widget__legend-meta strong { font-size: 0.95rem; }
.vat-widget__legend-amount { text-align: right; font-variant-numeric: tabular-nums; font-size: 0.95rem; }
.vat-widget__legend-amount--vat { font-weight: 600; }
.vat-widget__legend-delta { font-size: 0.75rem; padding: 2px 6px; border-radius: 999px; text-align: center; justify-self: end; }
.vat-widget__legend-delta.is-up { background: rgba(34, 197, 94, 0.12); color: var(--success-text); }
.vat-widget__legend-delta.is-down { background: rgba(239, 68, 68, 0.12); color: var(--danger-text); }
.vat-widget__legend-delta.is-new { background: rgba(59, 130, 246, 0.12); color: var(--primary-strong); }
.vat-widget__legend-delta.is-flat { color: var(--muted); }

.vt-widget { display: flex; flex-direction: column; gap: 14px; }
.vt-widget__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.vt-widget__total { display: flex; flex-direction: column; gap: 2px; }
.vt-widget__amount { font-size: 1.6rem; font-weight: 600; }
.vt-widget__amount.is-positive { color: var(--success-text); }
.vt-widget__amount.is-warning { color: #b45309; }
.vt-widget__amount.is-negative { color: var(--danger-text); }
.vt-widget__progress { width: 100%; height: 12px; background: rgba(148, 163, 184, 0.18); border-radius: 999px; overflow: hidden; }
.vt-widget__progress-fill { height: 100%; border-radius: 999px; transition: width 0.3s ease; }
.vt-widget__progress-fill.is-positive { background: var(--success); }
.vt-widget__progress-fill.is-warning { background: var(--accent); }
.vt-widget__progress-fill.is-negative { background: var(--danger); }
.vt-widget__status { margin: 0; font-size: 0.9rem; line-height: 1.5; }
.vt-widget__alert { color: var(--danger-text); }
.vt-widget__warning { color: #b45309; }
.vt-widget__note { margin: 0; font-size: 0.8rem; line-height: 1.45; }
.vt-widget__chart { position: relative; width: 100%; height: 220px; }

/* Plafon TVA banner on the dashboard. Left-border accent per DESIGN.md
   badge rule, sized up to page width — deliberately louder than a badge
   because missing the crossing has a retroactive tax cost. */
.vat-alert {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 0.9rem 1.1rem;
    border: 1px solid var(--line);
    border-left: 3px solid var(--warning);
    border-radius: var(--radius-md);
    background: var(--warning-bg);
}
.vat-alert--crossed { border-left-color: var(--danger); background: var(--danger-bg); }
.vat-alert__body { display: flex; flex-direction: column; gap: 3px; min-width: 16rem; flex: 1 1 24rem; }
.vat-alert__title { margin: 0; font-size: 1rem; font-weight: 600; color: var(--warning); }
.vat-alert--crossed .vat-alert__title { color: var(--danger); }
.vat-alert__text { margin: 0; font-size: 0.88rem; line-height: 1.5; color: var(--text); }
.vat-alert__action { flex: 0 0 auto; white-space: nowrap; }

.dr-widget { display: flex; flex-direction: column; gap: 12px; }
.dr-widget__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.dr-widget__total { display: flex; flex-direction: column; gap: 2px; }
.dr-widget__amount { font-size: 1.4rem; font-weight: 600; }
.dr-widget__delta { font-size: 0.85rem; padding: 2px 8px; border-radius: 999px; align-self: flex-start; }
.dr-widget__delta.is-up { background: rgba(34, 197, 94, 0.12); color: var(--success-text); font-weight: 500; }
.dr-widget__delta.is-down { background: rgba(239, 68, 68, 0.12); color: var(--danger-text); font-weight: 500; }
.dr-widget__controls { display: flex; flex-direction: row; gap: 12px; flex-wrap: wrap; align-items: flex-end; justify-content: flex-end; }
.dr-widget__pickers { display: contents; }
.dr-widget__month { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 4px; font-size: 0.85rem; color: var(--text-secondary); }
.dr-widget__month select { padding: 4px 10px; border-radius: 6px; border: 1px solid var(--line); background: var(--panel); font-size: 0.85rem; }
.dr-widget__month-label { font-size: 0.7rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.dr-widget__interval { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 6px; padding: 2px 10px 6px; margin: 0; }
.dr-widget__interval legend { font-size: 0.7rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; padding: 0 4px; }
.dr-widget__interval select { padding: 3px 6px; border-radius: 4px; border: 1px solid var(--line); background: var(--panel); font-size: 0.8rem; }
.dr-widget__chart { position: relative; width: 100%; min-height: 200px; }
.dr-widget__legend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.dr-legend__head { display: grid; grid-template-columns: minmax(140px, 2fr) minmax(80px, 1fr) minmax(80px, 1fr) 56px; gap: 10px; align-items: center; padding: 4px 0; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); border-bottom: 1px solid var(--line); }
.dr-legend__head-amt, .dr-legend__head-delta { text-align: right; }
.dr-legend__head-selected { color: #2c6df5; }
.dr-legend__head-compare { opacity: 0.7; }
.dr-widget__legend-row { display: grid; grid-template-columns: minmax(140px, 2fr) minmax(80px, 1fr) minmax(80px, 1fr) 56px; gap: 10px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--line-soft); }
.dr-widget__legend-row:last-child { border-bottom: none; }
.dr-widget__legend-row.is-walkin { font-style: italic; opacity: 0.85; }
.dr-widget__legend-meta { display: flex; flex-direction: column; min-width: 0; }
.dr-widget__legend-meta strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.95rem; }
.dr-widget__legend-amount { text-align: right; font-variant-numeric: tabular-nums; font-size: 0.95rem; }
.dr-widget__legend-amount--selected { font-weight: 600; }
.dr-widget__legend-amount--compare { opacity: 0.6; }
.dr-widget__legend-delta { font-size: 0.75rem; padding: 2px 6px; border-radius: 999px; text-align: center; justify-self: end; }
.dr-widget__legend-delta.is-up { background: rgba(34, 197, 94, 0.12); color: var(--success-text); }
.dr-widget__legend-delta.is-down { background: rgba(239, 68, 68, 0.12); color: var(--danger-text); }
.dr-widget__legend-delta.is-new { background: rgba(59, 130, 246, 0.12); color: var(--primary-strong); }
.dr-widget__legend-delta.is-flat { color: var(--muted); }

.ovr-widget { display: flex; flex-direction: column; gap: 14px; }
.ovr-widget__head { display: flex; gap: 16px; flex-wrap: wrap; }
.ovr-widget__kpi { flex: 1; min-width: 110px; display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border-radius: 8px; background: rgba(148, 163, 184, 0.08); border: 1px solid transparent; }
.ovr-widget__kpi strong { font-size: 1.6rem; font-weight: 600; line-height: 1.1; }
.ovr-widget__kpi.is-alert { background: rgba(239, 68, 68, 0.1); border-color: rgba(239, 68, 68, 0.35); }
.ovr-widget__kpi.is-alert strong { color: var(--danger-text); }
.ovr-widget__kpi.is-warning { background: rgba(245, 158, 11, 0.1); border-color: rgba(245, 158, 11, 0.35); }
.ovr-widget__kpi.is-warning strong { color: #b45309; }
.ovr-widget__chart { position: relative; width: 100%; height: 220px; }
.ovr-widget__list h4 { margin: 0 0 8px; font-size: 0.95rem; }
.ovr-widget__more { margin: 8px 0 0; font-size: 0.85rem; }
.ovr-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.ovr-list__head, .ovr-list__row { display: grid; grid-template-columns: minmax(110px, 1.2fr) minmax(120px, 1.5fr) minmax(110px, 1fr) minmax(140px, 1.2fr) minmax(110px, 1fr); gap: 10px; align-items: center; padding: 6px 0; }
.ovr-list__head { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); border-bottom: 1px solid var(--line); padding-bottom: 4px; }
.ovr-list__row { font-size: 0.9rem; border-bottom: 1px solid var(--line-soft); }
.ovr-list__row:last-child { border-bottom: none; }
.ovr-list__row.is-overdue { background: rgba(239, 68, 68, 0.04); }
.ovr-list__pet a, .ovr-list__client a, .ovr-list__phone a { color: inherit; text-decoration: none; }
.ovr-list__pet a:hover, .ovr-list__client a:hover, .ovr-list__phone a:hover { text-decoration: underline; }
.ovr-list__due { font-variant-numeric: tabular-nums; }
.ovr-list__due.is-overdue-text { color: var(--danger-text); font-weight: 600; }
@media (max-width: 760px) {
    .ovr-list__head, .ovr-list__row { grid-template-columns: 1fr 1fr; gap: 4px; }
    .ovr-list__type, .ovr-list__phone { display: none; }
}

/* Plati facturi primite — supplier-invoice payment widget + payment badges.
   The badge is shared by the "Facturi primite" grid column, this report and the
   invoice page, so one state always reads the same wherever it appears. Colours
   come from the DESIGN.md status tokens (which carry their own dark-mode
   values) and badges follow the house shape: left-border rectangles, not pills. */
.sip-widget { display: flex; flex-direction: column; gap: 14px; }
.sip-widget__head { display: flex; gap: 16px; flex-wrap: wrap; }
.sip-widget__kpi {
    flex: 1;
    min-width: 150px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 14px;
    border-radius: var(--radius-md);
    background: var(--surface-soft);
    border: 1px solid var(--line);
}
.sip-widget__kpi strong { font-size: 26px; font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; }
.sip-widget__kpi.is-warning { background: var(--warning-bg); border-color: var(--warning); }
.sip-widget__kpi.is-warning strong { color: var(--warning); }
.sip-widget__kpi.is-alert { background: var(--danger-bg); border-color: var(--danger); }
.sip-widget__kpi.is-alert strong { color: var(--danger); }
.sip-widget__fx { margin: 0; font-size: 12px; }
.sip-widget__chart { position: relative; width: 100%; height: 220px; }
.sip-widget__list h4 { margin: 0 0 8px; font-size: 15px; }
.sip-widget__more { margin: 8px 0 0; font-size: 12px; }
.sip-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.sip-list__head, .sip-list__row {
    display: grid;
    grid-template-columns: minmax(130px, 1.6fr) minmax(110px, 1.1fr) minmax(140px, 1.3fr) minmax(120px, 1fr);
    gap: 10px;
    align-items: center;
    padding: 6px 0;
}
.sip-list__head { font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); border-bottom: 1px solid var(--line); }
.sip-list__row { font-size: 13.5px; border-bottom: 1px solid var(--line-soft); }
.sip-list__row.is-overdue { background: var(--danger-bg); }
.sip-list__supplier a, .sip-list__number a { color: inherit; text-decoration: none; }
.sip-list__supplier a:hover, .sip-list__number a:hover { text-decoration: underline; }
.sip-list__due, .sip-list__amount { font-variant-numeric: tabular-nums; }
.sip-list__due.is-overdue-text, .sip-list__due.is-overdue-text .muted { color: var(--danger); font-weight: 600; }
.sip-list__amount { text-align: right; font-weight: 600; }
.sip-methods { list-style: none; margin: 0; padding: 0; display: flex; gap: 18px; flex-wrap: wrap; }
.sip-methods strong { font-variant-numeric: tabular-nums; }

.sip-badge {
    display: inline-block;
    padding: 0.12rem 0.4rem;
    border-left: 2.5px solid transparent;
    border-radius: 4px;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
    background: var(--surface-soft);
    color: var(--text-secondary);
}
.sip-badge--paid { border-left-color: var(--success); background: var(--success-bg); color: var(--success); }
.sip-badge--partial { border-left-color: var(--accent); background: var(--accent-ghost); color: var(--accent-strong); }
.sip-badge--overdue { border-left-color: var(--danger); background: var(--danger-bg); color: var(--danger); }
.sip-badge--unpaid { border-left-color: var(--line); }
.table tr.is-overdue > td { background: var(--danger-bg); }

@media (max-width: 760px) {
    .sip-list__head, .sip-list__row { grid-template-columns: 1fr 1fr; gap: 4px; }
    .sip-list__number { display: none; }
}

.hm-widget { display: flex; flex-direction: column; gap: 14px; }
.hm-widget__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.hm-widget__summary { display: flex; gap: 24px; flex-wrap: wrap; }
.hm-widget__total, .hm-widget__busiest { display: flex; flex-direction: column; gap: 2px; }
.hm-widget__total strong { font-size: 1.6rem; font-weight: 600; }
.hm-widget__busiest strong { font-size: 1rem; font-weight: 600; color: #2c6df5; }
.hm-widget__controls { display: flex; flex-direction: row; gap: 12px; flex-wrap: wrap; align-items: flex-end; justify-content: flex-end; }
.hm-widget__month { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 4px; font-size: 0.85rem; color: var(--text-secondary); }
.hm-widget__month select { padding: 4px 10px; border-radius: 6px; border: 1px solid var(--line); background: var(--panel); font-size: 0.85rem; }
.hm-widget__month-label { font-size: 0.7rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }

.hm-grid { display: grid; grid-template-columns: 60px repeat(var(--hm-cols, 7), minmax(40px, 1fr)); gap: 4px; }
.hm-grid__corner { background: transparent; }
.hm-grid__col-head { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; text-align: center; padding: 4px 2px; color: var(--text-secondary); display: flex; flex-direction: column; gap: 2px; }
.hm-grid__col-head .muted { font-size: 0.7rem; font-weight: 400; }
.hm-grid__row-head { font-size: 0.75rem; color: var(--muted); text-align: right; padding: 6px 6px; align-self: center; font-variant-numeric: tabular-nums; }
.hm-cell {
    aspect-ratio: 1;
    min-height: 32px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.92);
    background: rgba(148, 163, 184, 0.08);
    transition: transform 100ms ease, box-shadow 100ms ease;
}
.hm-cell.is-filled {
    /* Intensity drives both the alpha + a slight darkening so even low-
       intensity cells are visible on dark backgrounds. */
    background: color-mix(in srgb, var(--primary) calc(var(--hm-intensity, 0) * 100%), rgba(148, 163, 184, 0.12));
}
.hm-cell.is-filled:hover {
    transform: scale(1.06);
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.25);
    cursor: default;
}

.da-widget { display: flex; flex-direction: column; gap: 14px; }
.da-widget__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.da-widget__summary { display: flex; gap: 24px; flex-wrap: wrap; }
.da-widget__total, .da-widget__noshow { display: flex; flex-direction: column; gap: 2px; }
.da-widget__total strong { font-size: 1.6rem; font-weight: 600; }
.da-widget__noshow strong { font-size: 1.4rem; font-weight: 600; }
.da-widget__noshow.is-warning strong { color: #b45309; }
.da-widget__delta { font-size: 0.85rem; padding: 2px 8px; border-radius: 999px; align-self: flex-start; margin-top: 2px; }
.da-widget__delta.is-up { background: rgba(34, 197, 94, 0.12); color: var(--success-text); font-weight: 500; }
.da-widget__delta.is-down { background: rgba(239, 68, 68, 0.12); color: var(--danger-text); font-weight: 500; }
.da-widget__controls { display: flex; flex-direction: row; gap: 12px; flex-wrap: wrap; align-items: flex-end; justify-content: flex-end; }
.da-widget__pickers { display: contents; }
.da-widget__month { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 4px; font-size: 0.85rem; color: var(--text-secondary); }
.da-widget__month select { padding: 4px 10px; border-radius: 6px; border: 1px solid var(--line); background: var(--panel); font-size: 0.85rem; }
.da-widget__month-label { font-size: 0.7rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.da-widget__interval { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 6px; padding: 2px 10px 6px; margin: 0; }
.da-widget__interval legend { font-size: 0.7rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; padding: 0 4px; }
.da-widget__interval select { padding: 3px 6px; border-radius: 4px; border: 1px solid var(--line); background: var(--panel); font-size: 0.8rem; }
.da-widget__chart { position: relative; width: 100%; min-height: 200px; }
.da-widget__legend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.da-legend__head { display: grid; grid-template-columns: minmax(140px, 1.6fr) 60px 80px 90px 90px 90px 64px; gap: 10px; align-items: center; padding: 4px 0; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); border-bottom: 1px solid var(--line); }
.da-legend__head-amt, .da-legend__head-pct, .da-legend__head-delta { text-align: right; }
.da-widget__legend-row { display: grid; grid-template-columns: minmax(140px, 1.6fr) 60px 80px 90px 90px 90px 64px; gap: 10px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--line-soft); }
.da-widget__legend-row:last-child { border-bottom: none; }
.da-widget__legend-row.is-anonymous { font-style: italic; opacity: 0.85; }
.da-widget__legend-meta { display: flex; flex-direction: column; min-width: 0; }
.da-widget__legend-meta strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.95rem; }
.da-widget__legend-amount { text-align: right; font-variant-numeric: tabular-nums; font-size: 0.95rem; }
.da-widget__legend-amount.is-warning { color: #b45309; font-weight: 600; }
.da-widget__legend-pct { text-align: right; font-variant-numeric: tabular-nums; font-size: 0.95rem; font-weight: 600; }
.da-widget__legend-pct.is-warning { color: #b45309; }
.da-widget__legend-delta { font-size: 0.75rem; padding: 2px 6px; border-radius: 999px; text-align: center; justify-self: end; }
.da-widget__legend-delta.is-up { background: rgba(34, 197, 94, 0.12); color: var(--success-text); }
.da-widget__legend-delta.is-down { background: rgba(239, 68, 68, 0.12); color: var(--danger-text); }
.da-widget__legend-delta.is-new { background: rgba(59, 130, 246, 0.12); color: var(--primary-strong); }
.da-widget__legend-delta.is-flat { color: var(--muted); }
@media (max-width: 720px) {
    .da-legend__head, .da-widget__legend-row { grid-template-columns: 1fr 60px 80px 64px; gap: 6px; }
    .da-legend__head-amt:nth-of-type(2), .da-widget__legend-row > .da-widget__legend-amount:nth-of-type(2),
    .da-legend__head-pct:nth-of-type(1), .da-legend__head-pct:nth-of-type(2),
    .da-widget__legend-row > .da-widget__legend-pct { display: none; }
}

.ts-widget { display: flex; flex-direction: column; gap: 14px; }
.ts-widget__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.ts-widget__total { display: flex; flex-direction: column; gap: 2px; }
.ts-widget__total strong { font-size: 1.6rem; font-weight: 600; }
.ts-widget__controls { display: flex; flex-direction: row; gap: 12px; flex-wrap: wrap; align-items: flex-end; justify-content: flex-end; }
.ts-widget__pickers { display: contents; }
.ts-widget__month { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 4px; font-size: 0.85rem; color: var(--text-secondary); }
.ts-widget__month select { padding: 4px 10px; border-radius: 6px; border: 1px solid var(--line); background: var(--panel); font-size: 0.85rem; }
.ts-widget__month-label { font-size: 0.7rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.ts-widget__body { display: grid; grid-template-columns: 1.4fr 1fr; gap: 20px; align-items: center; }
.ts-widget__chart { position: relative; height: 240px; min-width: 0; }
.ts-widget__chart canvas { max-width: 100%; }
.ts-widget__legend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ts-widget__legend-row { display: grid; grid-template-columns: 14px 1fr auto; gap: 10px; align-items: center; }
.ts-widget__legend-swatch { width: 14px; height: 14px; border-radius: 3px; display: inline-block; }
.ts-widget__legend-meta { display: flex; flex-direction: column; min-width: 0; }
.ts-widget__legend-meta strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ts-widget__legend-amount { font-variant-numeric: tabular-nums; font-weight: 600; text-align: right; }
.ts-widget__pies { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding-top: 8px; border-top: 1px solid var(--line-soft); }
.ts-widget__pie { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ts-widget__pie-title { margin: 0; font-size: 0.85rem; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.04em; }
.ts-widget__pie-chart { position: relative; height: 220px; }
@media (max-width: 720px) {
    .ts-widget__body { grid-template-columns: 1fr; }
    .ts-widget__pies { grid-template-columns: 1fr; }
}

.np-widget { display: flex; flex-direction: column; gap: 14px; }
.np-widget__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.np-widget__summary { display: flex; gap: 24px; flex-wrap: wrap; }
.np-widget__total, .np-widget__company { display: flex; flex-direction: column; gap: 2px; }
.np-widget__total strong { font-size: 1.6rem; font-weight: 600; color: #2c6df5; }
.np-widget__company strong { font-size: 1.4rem; font-weight: 600; }
.np-widget__delta { font-size: 0.85rem; padding: 2px 8px; border-radius: 999px; align-self: flex-start; margin-top: 2px; }
.np-widget__delta.is-up { background: rgba(34, 197, 94, 0.12); color: var(--success-text); font-weight: 500; }
.np-widget__delta.is-down { background: rgba(239, 68, 68, 0.12); color: var(--danger-text); font-weight: 500; }
.np-widget__controls { display: flex; flex-direction: row; gap: 12px; flex-wrap: wrap; align-items: flex-end; justify-content: flex-end; }
.np-widget__pickers { display: contents; }
.np-widget__month { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 4px; font-size: 0.85rem; color: var(--text-secondary); }
.np-widget__month select { padding: 4px 10px; border-radius: 6px; border: 1px solid var(--line); background: var(--panel); font-size: 0.85rem; }
.np-widget__month-label { font-size: 0.7rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.np-widget__interval { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 6px; padding: 2px 10px 6px; margin: 0; }
.np-widget__interval legend { font-size: 0.7rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; padding: 0 4px; }
.np-widget__interval select { padding: 3px 6px; border-radius: 4px; border: 1px solid var(--line); background: var(--panel); font-size: 0.8rem; }
.np-widget__chart { position: relative; width: 100%; height: 260px; }

.rc-widget { display: flex; flex-direction: column; gap: 14px; }
.rc-widget__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.rc-widget__summary { display: flex; gap: 24px; flex-wrap: wrap; }
.rc-widget__total, .rc-widget__split, .rc-widget__retention, .rc-widget__company { display: flex; flex-direction: column; gap: 2px; }
.rc-widget__total strong { font-size: 1.6rem; font-weight: 600; color: var(--status-rescheduled); }
.rc-widget__split strong { font-size: 1.3rem; font-weight: 600; }
.rc-widget__split--paying strong { color: var(--status-rescheduled); }
.rc-widget__split--recontrol strong { color: var(--text-secondary); }
.rc-widget__split-note { font-size: 0.75rem; }
.rc-widget__retention strong { font-size: 1.4rem; font-weight: 600; color: var(--success-text); }
.rc-widget__retention-note { font-size: 0.75rem; }
.rc-widget__company strong { font-size: 1.4rem; font-weight: 600; }
.rc-widget__delta { font-size: 0.85rem; padding: 2px 8px; border-radius: 999px; align-self: flex-start; margin-top: 2px; }
.rc-widget__delta.is-up { background: rgba(34, 197, 94, 0.12); color: var(--success-text); font-weight: 500; }
.rc-widget__delta.is-down { background: rgba(239, 68, 68, 0.12); color: var(--danger-text); font-weight: 500; }
.rc-widget__controls { display: flex; flex-direction: row; gap: 12px; flex-wrap: wrap; align-items: flex-end; justify-content: flex-end; }
.rc-widget__pickers { display: contents; }
.rc-widget__month { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 4px; font-size: 0.85rem; color: var(--text-secondary); }
.rc-widget__month select { padding: 4px 10px; border-radius: 6px; border: 1px solid var(--line); background: var(--panel); font-size: 0.85rem; }
.rc-widget__month-label { font-size: 0.7rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.rc-widget__interval { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 6px; padding: 2px 10px 6px; margin: 0; }
.rc-widget__interval legend { font-size: 0.7rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; padding: 0 4px; }
.rc-widget__interval select { padding: 3px 6px; border-radius: 4px; border: 1px solid var(--line); background: var(--panel); font-size: 0.8rem; }
.rc-widget__chart { position: relative; width: 100%; height: 260px; }

.rc-list__head { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.rc-list__head h4 { margin: 0; font-size: 1rem; font-weight: 600; }
.rc-list__head p { margin: 0; font-size: 0.85rem; }
.rc-list__scroll { overflow-x: auto; }
.rc-list__table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.rc-list__table thead th { text-align: left; font-weight: 500; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.7rem; padding: 8px 10px; border-bottom: 1px solid rgba(148, 163, 184, 0.25); white-space: nowrap; user-select: none; }
.rc-list__table thead th.num { text-align: right; }
.rc-list__table thead th.is-sortable { cursor: pointer; }
.rc-list__table thead th.is-sortable:hover { color: #c4b5fd; }
.rc-list__table thead th.is-sortable::after { content: ''; display: inline-block; width: 0.7em; margin-left: 4px; opacity: 0.4; }
.rc-list__table thead th.is-sort-asc::after { content: '↑'; opacity: 1; color: var(--status-rescheduled); }
.rc-list__table thead th.is-sort-desc::after { content: '↓'; opacity: 1; color: var(--status-rescheduled); }
.rc-list__table thead th.is-sort-active { color: #c4b5fd; }
.rc-list__table tbody td { padding: 8px 10px; border-bottom: 1px solid rgba(148, 163, 184, 0.12); white-space: nowrap; }
.rc-list__table tbody td.num { text-align: right; font-variant-numeric: tabular-nums; }
.rc-list__table tbody tr:hover { background: rgba(124, 58, 237, 0.05); }
.rc-list__table tbody tr:last-child td { border-bottom: none; }
.rc-list__paying { color: var(--status-rescheduled); font-weight: 500; }
.rc-list__recontrol { color: var(--text-secondary); }

.ce-widget { display: flex; flex-direction: column; gap: 14px; }
.ce-widget__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.ce-widget__summary { display: flex; gap: 24px; flex-wrap: wrap; }
.ce-widget__total, .ce-widget__mix { display: flex; flex-direction: column; gap: 2px; }
.ce-widget__total strong { font-size: 1.6rem; font-weight: 600; color: #0f172a; }
.ce-widget__mix strong { font-size: 1.2rem; font-weight: 600; }
.ce-widget__mix--services strong { color: #2c6df5; }
.ce-widget__mix--products strong { color: var(--accent); }
.ce-widget__share { font-size: 0.75rem; }
.ce-widget__delta { font-size: 0.85rem; padding: 2px 8px; border-radius: 999px; align-self: flex-start; margin-top: 2px; }
.ce-widget__delta.is-up { background: rgba(34, 197, 94, 0.12); color: var(--success-text); font-weight: 500; }
.ce-widget__delta.is-down { background: rgba(239, 68, 68, 0.12); color: var(--danger-text); font-weight: 500; }
.ce-widget__controls { display: flex; flex-direction: row; gap: 12px; flex-wrap: wrap; align-items: flex-end; justify-content: flex-end; }
.ce-widget__pickers { display: contents; }
.ce-widget__month { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 4px; font-size: 0.85rem; color: var(--text-secondary); }
.ce-widget__month select { padding: 4px 10px; border-radius: 6px; border: 1px solid var(--line); background: var(--panel); font-size: 0.85rem; }
.ce-widget__month-label { font-size: 0.7rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.ce-widget__interval { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 6px; padding: 2px 10px 6px; margin: 0; }
.ce-widget__interval legend { font-size: 0.7rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; padding: 0 4px; }
.ce-widget__interval select { padding: 3px 6px; border-radius: 4px; border: 1px solid var(--line); background: var(--panel); font-size: 0.8rem; }
.ce-widget__chart { position: relative; width: 100%; height: 280px; }

.ce-widget__grid-wrap { width: 100%; overflow-x: auto; margin-top: 8px; }
.ce-widget__grid { width: 100%; border-collapse: collapse; font-size: 0.85rem; color: inherit; }
.ce-widget__grid thead th { background: rgba(148, 163, 184, 0.12); font-weight: 600; padding: 6px 10px; text-align: right; border-bottom: 1px solid rgba(148, 163, 184, 0.3); color: inherit; }
.ce-widget__grid thead th.ce-widget__grid-month { text-align: left; }
.ce-widget__grid thead th.ce-widget__grid-year { text-align: center; border-left: 1px solid rgba(148, 163, 184, 0.3); }
.ce-widget__grid thead tr:nth-child(2) th { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; opacity: 0.7; font-weight: 500; }
.ce-widget__grid tbody th { font-weight: 500; padding: 6px 10px; text-align: left; border-bottom: 1px solid rgba(148, 163, 184, 0.15); color: inherit; }
.ce-widget__grid tbody td { padding: 6px 10px; text-align: right; border-bottom: 1px solid rgba(148, 163, 184, 0.15); font-variant-numeric: tabular-nums; color: inherit; }
.ce-widget__grid tbody td.ce-widget__grid-svc { color: #60a5fa; }
.ce-widget__grid tbody td.ce-widget__grid-prd { color: #fbbf24; }
.ce-widget__grid tbody td.ce-widget__grid-tot { font-weight: 600; }
.ce-widget__grid tbody td:nth-child(3n+2) { border-left: 1px solid rgba(148, 163, 184, 0.15); }
.ce-widget__grid tr.ce-widget__grid-total th, .ce-widget__grid tr.ce-widget__grid-total td { background: rgba(148, 163, 184, 0.12); font-weight: 600; border-top: 1px solid rgba(148, 163, 184, 0.4); }

.ah-widget { display: flex; flex-direction: column; gap: 14px; }
.ah-widget__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.ah-widget__total { display: flex; flex-direction: column; gap: 2px; }
.ah-widget__total strong { font-size: 1.6rem; font-weight: 600; color: #2c6df5; }
.ah-widget__controls { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.ah-widget__days { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 4px; font-size: 0.85rem; color: var(--text-secondary); }
.ah-widget__days select { padding: 4px 10px; border-radius: 6px; border: 1px solid var(--line); background: var(--panel); font-size: 0.85rem; }
.ah-widget__days-label { font-size: 0.7rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }

.ah-widget__kpis { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; }
.ah-widget__kpi { display: flex; flex-direction: column; gap: 2px; padding: 8px 12px; border-radius: 6px; background: rgba(148, 163, 184, 0.08); border-left: 3px solid var(--muted); }
.ah-widget__kpi strong { font-size: 1.2rem; font-weight: 600; line-height: 1.1; }
.ah-widget__kpi--done { border-left-color: var(--success); }
.ah-widget__kpi--confirmed { border-left-color: var(--status-confirmed); }
.ah-widget__kpi--planned { border-left-color: var(--primary); }
.ah-widget__kpi--rescheduled { border-left-color: var(--status-rescheduled); }
.ah-widget__kpi--cancelled { border-left-color: var(--muted); }
.ah-widget__kpi--no_show { border-left-color: var(--danger); }
.ah-widget__kpi--no_show strong { color: var(--danger-text); }

.ah-widget__chart { position: relative; width: 100%; height: 260px; }
.ah-widget__list h4 { margin: 0 0 8px; font-size: 0.95rem; }
.ah-widget__list-scroll { max-height: 22rem; overflow-y: auto; padding-right: 4px; }
.ah-widget__more { margin: 8px 0 0; font-size: 0.85rem; }
.ah-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.ah-list a { color: inherit; text-decoration: none; border-bottom: 1px dotted rgba(44, 109, 245, 0.45); }
.ah-list a:hover { color: #2c6df5; border-bottom-color: var(--primary); }
.ah-list__head { position: sticky; top: 0; z-index: 1; background: var(--surface-elevated, #fff); }
.ah-list__action { justify-self: end; }
.ah-list__view-btn { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 6px; background: rgba(44, 109, 245, 0.12); color: #2c6df5; font-size: 0.78rem; font-weight: 500; border-bottom: none; line-height: 1.4; }
.ah-list__view-btn:hover { background: rgba(44, 109, 245, 0.2); color: var(--primary-strong); border-bottom: none; }
.ah-list__head, .ah-list__row { display: grid; grid-template-columns: minmax(120px, 1fr) minmax(110px, 1fr) minmax(120px, 1.2fr) minmax(110px, 1fr) minmax(110px, auto); gap: 10px; align-items: center; padding: 6px 0; }
.ah-list__head { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); border-bottom: 1px solid var(--line); padding-bottom: 4px; }
.ah-list__row { font-size: 0.9rem; border-bottom: 1px solid var(--line-soft); }
.ah-list__row:last-child { border-bottom: none; }
.ah-list__date { font-variant-numeric: tabular-nums; }
.ah-list__status { font-size: 0.75rem; padding: 2px 8px; border-radius: 999px; text-align: center; justify-self: start; background: rgba(148, 163, 184, 0.18); color: var(--text-secondary); }
.ah-list__status--done { background: rgba(34, 197, 94, 0.14); color: var(--success-text); }
.ah-list__status--confirmed { background: rgba(14, 165, 233, 0.14); color: var(--info); }
.ah-list__status--planned { background: rgba(44, 109, 245, 0.14); color: var(--primary-strong); }
.ah-list__status--rescheduled { background: rgba(124, 58, 237, 0.14); color: #6d28d9; }
.ah-list__status--cancelled { background: rgba(148, 163, 184, 0.18); color: var(--text-secondary); }
.ah-list__status--no_show { background: rgba(239, 68, 68, 0.14); color: var(--danger-text); }
@media (max-width: 720px) {
    .ah-list__head, .ah-list__row { grid-template-columns: 1fr 1fr auto; gap: 6px; }
    .ah-list__client, .ah-list__doctor { display: none; }
}

/* Programul zilei widget (appointments today, day-navigable) */
.at-widget { display: flex; flex-direction: column; gap: 14px; }
.at-widget.is-loading { opacity: 0.6; pointer-events: none; }

.at-widget__nav { display: flex; align-items: center; gap: 8px; }
.at-widget__day { flex: 1; min-width: 0; }
.at-widget__day-label {
    font-weight: 600; font-size: 0.95rem; color: var(--text, #1C2433);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block;
}
.at-widget__arrow {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; flex: 0 0 auto;
    border: 1px solid var(--line, #E2E7EE); border-radius: 6px;
    background: var(--panel, #fff); color: var(--text, #1C2433);
    font-size: 1.1rem; line-height: 1; cursor: pointer;
    transition: background 100ms ease, border-color 100ms ease;
}
.at-widget__arrow:hover { background: var(--panel-hover, #FAFBFC); border-color: var(--primary, #2968E0); }
.at-widget__today {
    flex: 0 0 auto; padding: 5px 12px; border-radius: 6px;
    border: 1px solid var(--line, #E2E7EE); background: var(--panel, #fff);
    color: var(--muted, #8694A7); font-size: 0.8rem; font-weight: 600; cursor: pointer;
    transition: background 100ms ease, color 100ms ease, border-color 100ms ease;
}
.at-widget__today:hover { border-color: var(--primary, #2968E0); color: var(--primary, #2968E0); }
.at-widget__today.is-active {
    background: var(--primary-ghost, rgba(41, 104, 224, 0.08));
    color: var(--primary, #2968E0); border-color: transparent;
}

.at-widget__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.at-stat {
    display: flex; flex-direction: column; gap: 2px; padding: 8px 12px;
    border-radius: 6px; background: rgba(148, 163, 184, 0.08);
    border-left: 3px solid var(--primary, #2968E0);
}
.at-stat--confirmed { border-left-color: var(--status-confirmed); }
.at-stat--done { border-left-color: var(--success, #1A8A5E); }
.at-stat__label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted, #8694A7); }
.at-stat__value { font-size: 1.5rem; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }

.at-widget__section-label {
    margin: 2px 0 0; font-size: 0.7rem; text-transform: uppercase;
    letter-spacing: 0.06em; color: var(--muted, #8694A7); font-weight: 600;
}

.at-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.at-row { border-radius: 8px; }
.at-row__link {
    display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px;
    padding: 10px 12px; border-radius: 8px; text-decoration: none; color: inherit;
    background: rgba(148, 163, 184, 0.06); transition: background 100ms ease;
}
.at-row__link:hover { background: rgba(148, 163, 184, 0.14); }
.at-row__time { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--primary, #2968E0); font-size: 0.9rem; }
.at-row__main { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.at-row__title { font-weight: 600; font-size: 0.9rem; color: var(--text, #1C2433); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.at-row__breed { font-weight: 400; color: var(--muted, #8694A7); }
.at-row__sub { font-size: 0.8rem; color: var(--muted, #8694A7); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.at-row__doctor { font-size: 0.8rem; color: var(--text-secondary, #4A5568); white-space: nowrap; justify-self: end; }
.at-row__live { color: var(--primary, #2968E0); font-weight: 600; }

.at-row--active > .at-row__link {
    background: var(--primary-ghost, rgba(41, 104, 224, 0.08));
    box-shadow: inset 3px 0 0 var(--primary, #2968E0);
}
.at-row--active > .at-row__link:hover { background: var(--primary-ghost, rgba(41, 104, 224, 0.12)); }
.at-row--done .at-row__time { color: var(--success, #1A8A5E); }
.at-row--cancelled .at-row__link, .at-row--no_show .at-row__link { opacity: 0.72; }
.at-row--cancelled .at-row__title { text-decoration: line-through; text-decoration-color: var(--muted, #8694A7); }

.at-widget__empty { margin: 4px 0 0; font-size: 0.9rem; }

@media (max-width: 720px) {
    .at-widget__stats { grid-template-columns: 1fr 1fr 1fr; }
    .at-row__doctor { display: none; }
}

/* Istoric consultatii widget */
.ch-widget { display: flex; flex-direction: column; gap: 14px; }
.ch-widget__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.ch-widget__total { display: flex; flex-direction: column; gap: 2px; }
.ch-widget__total strong { font-size: 1.6rem; font-weight: 600; color: var(--status-confirmed); }
.ch-widget__controls { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.ch-widget__period { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 4px; font-size: 0.85rem; color: var(--text-secondary); }
.ch-widget__period select { padding: 4px 10px; border-radius: 6px; border: 1px solid var(--line); background: var(--panel); font-size: 0.85rem; max-width: 15rem; }
.ch-widget__period-label { font-size: 0.7rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.ch-widget__kpis { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; }
.ch-widget__kpi { display: flex; flex-direction: column; gap: 2px; padding: 8px 12px; border-radius: 6px; background: rgba(148, 163, 184, 0.08); border-left: 3px solid var(--muted); }
.ch-widget__kpi strong { font-size: 1.2rem; font-weight: 600; line-height: 1.1; display: inline-flex; align-items: baseline; gap: 4px; }
.ch-widget__kpi-unit { font-size: 0.75rem; font-weight: 500; color: var(--text-secondary); }
.ch-widget__kpi--count { border-left-color: var(--status-confirmed); }
.ch-widget__kpi--income { border-left-color: var(--success); }
.ch-widget__kpi--avg { border-left-color: var(--accent); }
.ch-widget__delta { font-size: 0.72rem; font-weight: 600; line-height: 1.2; font-variant-numeric: tabular-nums; margin-top: 1px; }
.ch-widget__delta--up { color: var(--success-text); }
.ch-widget__delta--down { color: var(--danger); }
.ch-widget__delta--flat { color: var(--text-secondary); }
.ch-widget__delta--none { color: var(--muted); }
.ch-widget__compare { margin: -2px 0 0; font-size: 0.78rem; }
.ch-widget__compare:empty { display: none; }
:root[data-theme='dark'] .ch-widget__period select { background: #161d27; border-color: #252e3b; color: #d6dee8; }
:root[data-theme='dark'] .ch-widget__delta--up { color: #4db88a; }
:root[data-theme='dark'] .ch-widget__delta--down { color: #e86b60; }
:root[data-theme='dark'] .ch-widget__delta--flat,
:root[data-theme='dark'] .ch-widget__delta--none { color: #6b7a8d; }
.ch-widget__chart { position: relative; width: 100%; height: 260px; }
.ch-widget__list h4 { margin: 0 0 8px; font-size: 0.95rem; }
.ch-widget__list-scroll { max-height: 22rem; overflow-y: auto; padding-right: 4px; }
.ch-widget__more { margin: 8px 0 0; font-size: 0.85rem; }
.ch-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.ch-list a { color: inherit; text-decoration: none; border-bottom: 1px dotted rgba(44, 109, 245, 0.45); }
.ch-list a:hover { color: #2c6df5; border-bottom-color: var(--primary); }
.ch-list__head, .ch-list__row { display: grid; grid-template-columns: minmax(120px, 1fr) minmax(100px, 1fr) minmax(120px, 1.2fr) minmax(100px, 1fr) minmax(90px, auto) minmax(60px, auto); gap: 10px; align-items: center; padding: 6px 0; }
.ch-list__head { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); border-bottom: 1px solid var(--line); padding-bottom: 4px; position: sticky; top: 0; z-index: 1; background: var(--surface-elevated, #fff); }
.ch-list__row { font-size: 0.9rem; border-bottom: 1px solid var(--line-soft); }
.ch-list__row:last-child { border-bottom: none; }
.ch-list__date { font-variant-numeric: tabular-nums; }
.ch-list__income { font-variant-numeric: tabular-nums; text-align: right; }
.ch-list__income-head { text-align: right; }
.ch-list__action { justify-self: end; }
.ch-list__view-btn { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 6px; background: rgba(44, 109, 245, 0.12); color: #2c6df5; font-size: 0.78rem; font-weight: 500; border-bottom: none; line-height: 1.4; }
.ch-list__view-btn:hover { background: rgba(44, 109, 245, 0.2); color: var(--primary-strong); border-bottom: none; }
.ch-list__row--sale .ch-list__doctor { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--success-text); }
@media (max-width: 720px) {
    .ch-list__head, .ch-list__row { grid-template-columns: 1fr 1fr auto auto; gap: 6px; }
    .ch-list__client, .ch-list__doctor { display: none; }
}

@media (max-width: 540px) {
    .pm-legend__head, .pm-widget__legend-row { grid-template-columns: 1fr auto 56px; gap: 6px; }
    .pm-legend__head-amt:nth-of-type(1), .pm-legend__head-pct, .pm-widget__legend-amount:not(.is-positive):not(.is-negative), .pm-widget__legend-pct { display: none; }
}

/* Pin modal */
.dashboard-pin-modal {
    position: fixed; inset: 0; z-index: 60;
    display: flex; align-items: center; justify-content: center;
}
.dashboard-pin-modal[hidden] { display: none; }
.dashboard-pin-modal__scrim { position: absolute; inset: 0; background: rgba(15, 23, 42, 0.55); }
.dashboard-pin-modal__dialog {
    position: relative; background: var(--panel); border-radius: 12px;
    width: min(640px, 92vw); max-height: 82vh; display: flex; flex-direction: column;
    box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25);
}
.dashboard-pin-modal__head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 20px; border-bottom: 1px solid var(--line);
}
.dashboard-pin-modal__head h3 { margin: 0; font-size: 1.1rem; }
.dashboard-pin-modal__body { padding: 16px 20px; overflow: auto; }
.dashboard-pin-theme + .dashboard-pin-theme { margin-top: 20px; }
.dashboard-pin-theme h4 { margin: 0 0 8px; font-size: 0.95rem; color: var(--text-secondary); }
.dashboard-pin-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.dashboard-pin-list li {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px;
}
.dashboard-pin-list li p { margin: 2px 0 0; font-size: 0.85rem; }

/* Reports hub */
.reports-hub-theme + .reports-hub-theme { margin-top: 16px; }
.reports-hub-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.reports-hub-card {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
    padding: 12px; border: 1px solid var(--line); border-radius: 8px;
}
.reports-hub-card__meta h4 { margin: 0; font-size: 1rem; }
.reports-hub-card__meta p { margin: 4px 0 0; font-size: 0.85rem; }
.reports-hub-card__actions { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }

/* Status badges used by appointments widget */
.badge--planned { background: var(--line); color: #3730a3; }
.badge--confirmed { background: var(--line); color: var(--primary-text); }
.badge--done { background: #d1fae5; color: var(--success-text); }
.badge--cancelled { background: var(--danger-bg); color: var(--danger-text); }
.badge--no_show { background: var(--warning-bg); color: var(--warning-text); }
.badge--rescheduled { background: var(--bg-page); color: #6d28d9; }

/* Revenue MTD widget */
.revenue-widget { display: flex; flex-direction: column; gap: 14px; }
.revenue-widget__head {
    display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.revenue-widget__total { display: flex; align-items: baseline; gap: 6px; }
.revenue-widget__amount { font-size: 2rem; font-weight: 600; letter-spacing: -0.02em; }
.revenue-widget__currency { font-size: 0.95rem; color: var(--text-secondary); font-weight: 500; }
.revenue-widget__meta { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; text-align: right; }
.revenue-widget__delta {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 2px 8px; border-radius: 999px; font-size: 0.85rem; font-weight: 600;
}
.revenue-widget__delta.is-up { background: rgba(16, 185, 129, 0.12); color: var(--success-text); }
.revenue-widget__delta.is-down { background: rgba(239, 68, 68, 0.12); color: var(--danger-text); }
.revenue-widget__delta .muted { font-weight: 400; color: inherit; opacity: 0.75; }
.revenue-widget__controls { display: flex; justify-content: flex-end; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.revenue-widget__pickers { display: contents; }
.revenue-widget__month-label { font-size: 0.7rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.revenue-widget__interval { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 6px; padding: 2px 10px 6px; margin: 0; }
.revenue-widget__interval legend { font-size: 0.7rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; padding: 0 4px; }
.revenue-widget__interval select { padding: 3px 6px; border-radius: 4px; border: 1px solid var(--line); background: var(--panel); font-size: 0.8rem; }
.revenue-widget__compare-label { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 4px; font-size: 0.85rem; color: var(--text-secondary); }
.revenue-widget__compare-label select {
    padding: 4px 10px; border-radius: 6px; border: 1px solid var(--line); background: var(--panel); font-size: 0.85rem;
}
.revenue-widget__chart { position: relative; height: 200px; }
.revenue-widget__payments {
    list-style: none; margin: 0; padding: 10px 0 0; border-top: 1px solid var(--line-soft);
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px;
}
.revenue-widget__payments li { display: flex; flex-direction: column; gap: 2px; }
.revenue-widget__pay-label { font-size: 0.75rem; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.05em; }
.revenue-widget__payments strong { font-size: 0.95rem; }

.revenue-widget__tops {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px;
    padding-top: 12px; border-top: 1px solid var(--line-soft);
}
.revenue-widget__top h4 {
    margin: 0 0 8px; font-size: 0.85rem; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.04em;
}
.revenue-widget__top-list {
    list-style: none; counter-reset: top-row; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px;
}
.revenue-widget__top-row {
    counter-increment: top-row;
    display: grid; grid-template-columns: 18px 1fr auto auto; gap: 8px; align-items: baseline;
    padding: 4px 0; border-bottom: 1px dashed var(--line-soft); font-size: 0.85rem;
}
.revenue-widget__top-row::before {
    content: counter(top-row); color: var(--muted); font-size: 0.75rem; text-align: right; font-variant-numeric: tabular-nums;
}
.revenue-widget__top-row:last-child { border-bottom: 0; }
.revenue-widget__top-label {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.revenue-widget__top-amount { font-weight: 600; font-variant-numeric: tabular-nums; }
.revenue-widget__top-delta {
    font-size: 0.72rem; font-weight: 600; padding: 2px 6px; border-radius: 6px; min-width: 44px; text-align: center;
}
.revenue-widget__top-delta.is-up { background: rgba(16, 185, 129, 0.12); color: var(--success-text); }
.revenue-widget__top-delta.is-down { background: rgba(239, 68, 68, 0.12); color: var(--danger-text); }
.revenue-widget__top-delta.is-new { background: rgba(44, 109, 245, 0.12); color: #2c6df5; }
.revenue-widget__top-delta.is-flat { background: transparent; color: var(--muted); font-weight: 400; }
.revenue-widget__top-empty { padding: 8px 0; }

/* ── AI chat (veterinary assistant) ─────────────────────────── */
.ai-chat { position: fixed; right: 20px; bottom: 20px; z-index: 1200; font-size: 13.5px; }
.ai-chat__launcher {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 16px; border: 1px solid var(--accent-strong);
    background: var(--accent-solid); color: var(--text-on-solid);
    border-radius: var(--radius-lg); font-family: inherit; font-weight: 600;
    cursor: pointer; box-shadow: var(--shadow);
    transition: background 100ms ease, transform 100ms ease;
}
.ai-chat__launcher:hover { background: var(--accent-strong); }
.ai-chat__launcher.is-open { transform: translateY(4px); }
.ai-chat__launcher-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; border-radius: 4px;
    background: rgba(255, 255, 255, 0.2); font-size: 16px; line-height: 1;
}
.ai-chat__launcher-label { letter-spacing: 0.01em; }

.ai-chat__panel {
    position: absolute; right: 0; bottom: calc(100% + 12px);
    width: min(380px, calc(100vw - 40px)); height: min(560px, calc(100vh - 120px));
    display: flex; flex-direction: column;
    background: var(--panel); color: var(--text);
    border: 1px solid var(--line); border-radius: var(--radius-lg);
    box-shadow: 0 16px 40px rgba(28, 36, 51, 0.18);
    overflow: hidden;
}
.ai-chat__head {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
    padding: 12px 14px; border-bottom: 1px solid var(--line); background: var(--bg-shell);
}
.ai-chat__head-body { display: flex; flex-direction: column; gap: 2px; }
.ai-chat__head-body strong { font-size: 14px; font-weight: 600; }
.ai-chat__head-body span { font-size: 11.5px; color: var(--muted); }
.ai-chat__head-actions { display: inline-flex; gap: 6px; }
.ai-chat__head-btn {
    border: 1px solid var(--line); background: var(--panel); color: var(--text-secondary);
    border-radius: 4px; font-family: inherit; font-size: 11.5px;
    padding: 4px 8px; cursor: pointer;
}
.ai-chat__head-btn:hover { background: var(--panel-hover); color: var(--text); }

.ai-chat__log {
    flex: 1 1 auto; overflow-y: auto; padding: 14px;
    display: flex; flex-direction: column; gap: 10px;
    background: var(--bg-page);
}
.ai-chat__empty {
    display: flex; flex-direction: column; gap: 4px;
    padding: 14px; border-left: 2.5px solid var(--accent); background: var(--accent-ghost);
    border-radius: 4px; color: var(--text-secondary);
}
.ai-chat__empty strong { color: var(--text); font-weight: 600; }
.ai-chat__empty span { font-size: 12px; }

.ai-chat__msg { max-width: 85%; display: flex; }
.ai-chat__msg-body {
    padding: 8px 12px; border-radius: 6px; line-height: 1.45;
    white-space: normal; word-wrap: break-word;
}
.ai-chat__msg-body p { margin: 0; }
.ai-chat__msg-body p + p { margin-top: 6px; }
.ai-chat__msg--user { align-self: flex-end; }
.ai-chat__msg--user .ai-chat__msg-body {
    background: var(--primary-solid); color: var(--text-on-solid); border-bottom-right-radius: 2px;
}
.ai-chat__msg--assistant { align-self: flex-start; }
.ai-chat__msg--assistant .ai-chat__msg-body {
    background: var(--panel); color: var(--text);
    border: 1px solid var(--line); border-bottom-left-radius: 2px;
}
.ai-chat__msg--error .ai-chat__msg-body {
    background: var(--danger-bg); color: var(--danger);
    border: 1px solid var(--danger); border-left-width: 3px;
}

.ai-chat__dots { display: inline-flex; gap: 4px; }
.ai-chat__dots span {
    width: 6px; height: 6px; border-radius: 50%; background: var(--muted);
    animation: ai-chat-dot 1s ease-in-out infinite;
}
.ai-chat__dots span:nth-child(2) { animation-delay: 120ms; }
.ai-chat__dots span:nth-child(3) { animation-delay: 240ms; }
@keyframes ai-chat-dot {
    0%, 100% { opacity: 0.3; transform: translateY(0); }
    50% { opacity: 1; transform: translateY(-2px); }
}

.ai-chat__form {
    display: flex; align-items: flex-end; gap: 8px;
    padding: 10px 10px 6px; border-top: 1px solid var(--line); background: var(--panel);
}
.ai-chat__input {
    flex: 1 1 auto; resize: none; min-height: 44px; max-height: 140px;
    font: inherit; color: var(--text); background: var(--panel);
    border: 1px solid var(--line); border-radius: var(--control-radius);
    padding: 8px 10px;
}
.ai-chat__input:focus {
    outline: none; border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-ghost);
}
.ai-chat__send {
    padding: 10px 14px; border: 0; border-radius: var(--control-radius);
    background: var(--primary-solid); color: var(--text-on-solid); font-weight: 600; font-family: inherit;
    cursor: pointer;
}
.ai-chat__send:hover:not(:disabled) { background: var(--primary-strong); }
.ai-chat__send:disabled { opacity: 0.6; cursor: default; }
.ai-chat__disclaimer {
    margin: 0; padding: 0 12px 10px;
    font-size: 10.5px; color: var(--muted); background: var(--panel);
}

@media (max-width: 600px) {
    .ai-chat { right: 12px; bottom: 12px; }
    .ai-chat__panel { width: calc(100vw - 24px); height: calc(100vh - 120px); }
}

/* Full-screen loading overlay driven by the form-submit-loader Stimulus controller. */
.form-submit-loader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(2px);
    animation: form-submit-loader-fade 160ms ease-out;
}
.form-submit-loader__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 28px 36px;
    border-radius: 12px;
    background: var(--panel, #fff);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    min-width: 220px;
    text-align: center;
}
.form-submit-loader__spinner {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 4px solid rgba(59, 130, 246, 0.18);
    border-top-color: var(--primary, #3b82f6);
    animation: form-submit-loader-spin 700ms linear infinite;
}
.form-submit-loader__message {
    margin: 0;
    font-size: 14px;
    color: var(--text, #0f172a);
}
body.is-form-submitting {
    overflow: hidden;
}
.btn.is-loading {
    opacity: 0.7;
    cursor: progress;
    pointer-events: none;
}
.btn__spinner {
    display: inline-block;
    width: 0.85em;
    height: 0.85em;
    margin-right: 0.4em;
    vertical-align: -0.12em;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: form-submit-loader-spin 700ms linear infinite;
}
@keyframes form-submit-loader-spin {
    to { transform: rotate(360deg); }
}
@keyframes form-submit-loader-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ============================================================
   Notificari overview — tiles + tabs + cancel ergonomics.
   Built on DESIGN.md tokens (DM Sans, #2968E0 primary, #D98B3A
   accent amber, left-border badges, 6-8px radius, 100ms motion).
   ============================================================ */

.notif-overview__header-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.notif-overview__window-label {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.notif-overview__footer-meta {
    margin: 0.75rem 0 0;
    font-size: 0.72rem;
    color: var(--text-secondary);
}
.notif-overview__footer-meta a { color: var(--primary); text-decoration: none; }
.notif-overview__footer-meta a:hover { text-decoration: underline; }

/* Segmented control (window picker) */
.seg-ctrl {
    display: inline-flex;
    gap: 2px;
    padding: 2px;
    background: var(--surface-soft);
    border-radius: 6px;
}
.seg-ctrl__item {
    padding: 0.35rem 0.8rem;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--text-secondary);
    text-decoration: none;
    border-radius: 4px;
    border: 1px solid transparent;
    transition: background 100ms ease, color 100ms ease, border-color 100ms ease;
}
.seg-ctrl__item:hover {
    background: rgba(41, 104, 224, 0.04);
    color: var(--text);
}
.seg-ctrl__item--active {
    background: var(--panel);
    color: var(--primary);
    border-color: rgba(41, 104, 224, 0.24);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

/* Tile grid */
.notif-tiles {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
}
.notif-tile {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0.9rem 1rem;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 8px;
    border-left-width: 2.5px;
    color: var(--text);
    text-decoration: none;
    transition: border-color 100ms ease, box-shadow 100ms ease;
}
a.notif-tile:hover {
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.06);
}
.notif-tile__label {
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.notif-tile__value {
    font-size: 1.625rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}

.stat-card--info    { border-left-color: var(--primary); }
.stat-card--success { border-left-color: var(--success); }
.stat-card--danger  { border-left-color: var(--danger); }
.stat-card--accent  { border-left-color: var(--accent); }

/* Channel bar */
.notif-channel-bar {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-top: 0.2rem;
}
.notif-channel-bar__track {
    display: flex;
    height: 6px;
    background: var(--surface-soft);
    border-radius: 3px;
    overflow: hidden;
}
.notif-channel-bar__slice { display: block; height: 100%; }
.notif-channel-bar__slice--whatsapp { background: var(--success); }
.notif-channel-bar__slice--sms      { background: var(--primary); }
.notif-channel-bar__slice--email    { background: var(--accent); }
.notif-channel-bar__legend {
    display: flex;
    gap: 1rem;
    font-size: 0.72rem;
    color: var(--text-secondary);
}
.notif-channel-bar__key { display: inline-flex; align-items: center; gap: 0.35rem; }
.notif-channel-bar__dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 2px;
}
.notif-channel-bar__dot--whatsapp { background: var(--success); }
.notif-channel-bar__dot--sms      { background: var(--primary); }
.notif-channel-bar__dot--email    { background: var(--accent); }

/* Tab bar */
.tab-bar {
    display: flex;
    gap: 0.25rem;
    border-bottom: 1px solid var(--line);
    margin-top: 0.25rem;
}
.tab-bar__item {
    position: relative;
    padding: 0.65rem 1rem 0.7rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-decoration: none;
    border-bottom: 2.5px solid transparent;
    margin-bottom: -1px;
    transition: color 100ms ease, border-color 100ms ease;
}
.tab-bar__item:hover { color: var(--text); }
.tab-bar__item--active {
    color: var(--primary);
    border-bottom-color: var(--primary);
}
.tab-bar__count {
    font-weight: 500;
    color: var(--muted);
    margin-left: 0.2rem;
}

/* Channel column rendering (no emoji per DESIGN.md) */
.notif-channel {
    font-size: 0.8rem;
    font-weight: 500;
}
.notif-channel__fallback {
    color: var(--text-secondary);
    font-weight: 400;
}

/* Status badge — left-border rectangle per DESIGN.md (not pill) */
.notif-status-badge {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    font-size: 0.72rem;
    font-weight: 500;
    border-radius: 3px;
    border-left-width: 2.5px;
    border-left-style: solid;
    background: var(--panel-soft);
    color: var(--text-secondary);
}
.notif-status-badge--accent {
    border-left-color: var(--accent);
    background: rgba(217, 139, 58, 0.08);
    color: var(--warning-text);
}
.notif-status-badge--muted {
    border-left-color: var(--muted);
    background: var(--panel-soft);
    color: var(--text-secondary);
}
.notif-status-badge--danger {
    border-left-color: var(--danger);
    background: var(--surface-soft);
    color: var(--danger-text);
}
.notif-status-badge--info {
    border-left-color: var(--info);
    background: var(--surface-soft);
    color: var(--info-text);
}
.notif-status-badge--success {
    border-left-color: var(--success);
    background: var(--bg-page);
    color: var(--success-text);
}

/* Row-urgency cue on Programate tab: row firing in < 2 min gets an accent
   left edge so operators see "cancel window closing" at a glance. */
.notif-urgent td:first-child {
    border-left: 2px solid var(--accent);
    padding-left: calc(0.75rem - 2px);
}
.notif-urgent .help-text {
    color: #b07a2e;
    font-weight: 500;
}

/* Empty state cells */
.notif-empty-state {
    text-align: center;
    padding: 2rem 1rem;
    color: var(--text-secondary);
    font-size: 0.88rem;
}

/* Cancel button — danger-ghost variant. Morphs to filled on confirm-pending
   via inline-confirm Stimulus controller. */
.btn--danger-ghost {
    background: transparent;
    color: var(--danger);
    border: 1px solid var(--danger);
    font-weight: 600;
    transition: background 100ms ease, color 100ms ease;
}
.btn--danger-ghost:hover {
    background: var(--surface-soft);
}
.btn--danger-ghost.is-confirming {
    background: var(--danger-solid);
    color: var(--text-on-solid);
    border-color: var(--danger);
}
.notif-cancel-form { display: inline-block; margin: 0; }

/* Focus ring — consistent across overview interactives */
.seg-ctrl__item:focus-visible,
.tab-bar__item:focus-visible,
.notif-tile:focus-visible,
.btn--danger-ghost:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* Responsive */
@media (max-width: 1199px) {
    .notif-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }
}
@media (max-width: 899px) {
    .notif-tiles { gap: 0.4rem; }
    .notif-overview__header-row { flex-wrap: wrap; }
}
@media (max-width: 599px) {
    .notif-tiles { grid-template-columns: 1fr; }
}

/* Dark mode — gated on the app's :root[data-theme='dark'] toggle so the
   tiles track the theme-toggle controller, not OS preference. */
:root[data-theme='dark'] .notif-tile {
    background: #161D27;
    border-color: #252E3B;
    color: #D6DEE8;
}
:root[data-theme='dark'] .notif-tile__label { color: #9CAABB; }
:root[data-theme='dark'] a.notif-tile:hover { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4); }

:root[data-theme='dark'] .stat-card--info    { border-left-color: #5B93E8; }
:root[data-theme='dark'] .stat-card--success { border-left-color: #4DB88A; }
:root[data-theme='dark'] .stat-card--danger  { border-left-color: #E86B60; }
:root[data-theme='dark'] .stat-card--accent  { border-left-color: #E8A455; }

:root[data-theme='dark'] .seg-ctrl { background: #1B2332; }
:root[data-theme='dark'] .seg-ctrl__item { color: #9CAABB; }
:root[data-theme='dark'] .seg-ctrl__item:hover { background: rgba(91, 147, 232, 0.08); color: #D6DEE8; }
:root[data-theme='dark'] .seg-ctrl__item--active {
    background: #161D27;
    color: #7EB0F5;
    border-color: rgba(91, 147, 232, 0.3);
}

:root[data-theme='dark'] .tab-bar { border-bottom-color: #252E3B; }
:root[data-theme='dark'] .tab-bar__item { color: #B4C0CE; }
:root[data-theme='dark'] .tab-bar__item:hover { color: #D6DEE8; }
:root[data-theme='dark'] .tab-bar__item--active { color: #7EB0F5; border-bottom-color: #5B93E8; }
:root[data-theme='dark'] .tab-bar__count { color: #6B7A8D; }

:root[data-theme='dark'] .notif-channel-bar__track { background: #1B2332; }
:root[data-theme='dark'] .notif-channel-bar__legend { color: #9CAABB; }

:root[data-theme='dark'] .notif-status-badge { background: #1B2332; color: #9CAABB; }
:root[data-theme='dark'] .notif-status-badge--accent { background: rgba(232, 164, 85, 0.1); color: #E8A455; }
:root[data-theme='dark'] .notif-status-badge--muted { background: #1B2332; color: #6B7A8D; }
:root[data-theme='dark'] .notif-status-badge--danger { background: rgba(232, 107, 96, 0.1); color: #E86B60; }
:root[data-theme='dark'] .notif-status-badge--info { background: rgba(107, 163, 214, 0.12); color: #6BA3D6; }
:root[data-theme='dark'] .notif-status-badge--success { background: rgba(77, 184, 138, 0.12); color: #4DB88A; }

/* Status legend — bare "?" that opens a pop-up decoding reminder / message statuses. */
.notif-table-legend-bar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 0.5rem;
}
.consult-block__title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    flex-wrap: wrap;
}
/* The "?" trigger — a small round help icon. */
.status-legend__q {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.35rem;
    height: 1.35rem;
    padding: 0;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--panel-soft);
    color: var(--text-secondary);
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: color 100ms ease, background 100ms ease, border-color 100ms ease;
}
.status-legend__q:hover,
.status-legend__q:focus-visible {
    border-color: var(--primary);
    color: var(--primary);
    background: rgba(41, 104, 224, 0.08);
    outline: none;
}

/* The pop-up card (native Popover API — centered in the top layer by default). */
.status-legend-popover {
    width: min(34rem, calc(100vw - 2rem));
    max-height: min(80vh, 40rem);
    overflow: auto;
    padding: 1rem 1.15rem 1.15rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--panel);
    color: var(--text);
    box-shadow: 0 18px 48px rgba(28, 36, 51, 0.22);
}
.status-legend-popover::backdrop {
    background: rgba(28, 36, 51, 0.32);
}
.status-legend-popover__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}
.status-legend-popover__title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text);
}
.status-legend-popover__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    padding: 0;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--muted);
    font-size: 1.15rem;
    line-height: 1;
    cursor: pointer;
}
.status-legend-popover__close:hover {
    background: var(--bg-page);
    color: var(--text);
}
.status-legend__intro {
    margin: 0 0 0.6rem;
    font-size: 0.8rem;
    color: var(--text-secondary);
}
.status-legend__list { margin: 0; }
.status-legend__row {
    display: grid;
    grid-template-columns: minmax(7rem, 9rem) 1fr;
    gap: 0.4rem 0.85rem;
    align-items: baseline;
    padding: 0.45rem 0;
    border-top: 1px solid var(--line-soft);
}
.status-legend__row:first-child { border-top: none; }
.status-legend__row dt {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
    margin: 0;
}
.status-legend__name {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
}
.status-legend__row dd {
    margin: 0;
    font-size: 0.82rem;
    color: var(--text-secondary);
    line-height: 1.4;
}
@media (max-width: 640px) {
    .status-legend__row { grid-template-columns: 1fr; gap: 0.2rem; }
}
:root[data-theme='dark'] .status-legend__q {
    border-color: #252E3B;
    background: #161D27;
    color: #9CAABB;
}
:root[data-theme='dark'] .status-legend__q:hover,
:root[data-theme='dark'] .status-legend__q:focus-visible {
    border-color: #5B93E8;
    color: #5B93E8;
    background: rgba(91, 147, 232, 0.12);
}
:root[data-theme='dark'] .status-legend-popover {
    border-color: #252E3B;
    background: #161D27;
    color: #D6DEE8;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.5);
}
:root[data-theme='dark'] .status-legend-popover__title { color: #D6DEE8; }
:root[data-theme='dark'] .status-legend-popover__close { color: #6B7A8D; }
:root[data-theme='dark'] .status-legend-popover__close:hover { background: #1B2332; color: #D6DEE8; }
:root[data-theme='dark'] .status-legend__intro { color: #9CAABB; }
:root[data-theme='dark'] .status-legend__row { border-top-color: #252E3B; }
:root[data-theme='dark'] .status-legend__name,
:root[data-theme='dark'] .status-legend__row dd { color: #9CAABB; }

:root[data-theme='dark'] .btn--danger-ghost { color: #E86B60; border-color: #E86B60; }
:root[data-theme='dark'] .btn--danger-ghost:hover { background: rgba(232, 107, 96, 0.1); }
:root[data-theme='dark'] .btn--danger-ghost.is-confirming { background: #E86B60; color: #0D1117; border-color: #E86B60; }

:root[data-theme='dark'] .notif-empty-state { color: #9CAABB; }
:root[data-theme='dark'] .notif-overview__footer-meta { color: #9CAABB; }
:root[data-theme='dark'] .notif-overview__footer-meta a { color: #7EB0F5; }

/* ================================================================
   App busy overlay — shown during long operations (form save +
   document upload). Fixed, dim backdrop, centered spinner + label.
================================================================ */

.app-busy-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.9rem;
    background: rgba(28, 36, 51, 0.55);
    backdrop-filter: blur(2px);
    color: white;
    font: 500 0.95rem 'DM Sans', system-ui, sans-serif;
    opacity: 0;
    pointer-events: none;
    transition: opacity 150ms ease-out;
}

.app-busy-overlay[data-visible='true'] {
    opacity: 1;
    pointer-events: auto;
}

.app-busy-overlay__spinner {
    width: 42px;
    height: 42px;
    border: 3px solid rgba(255, 255, 255, 0.25);
    border-top-color: white;
    border-radius: 50%;
    animation: app-busy-spin 0.9s linear infinite;
}

.app-busy-overlay__label {
    max-width: 22rem;
    text-align: center;
    line-height: 1.4;
}

.app-busy-overlay__label strong {
    display: block;
    font-size: 1.05rem;
    font-weight: 600;
    margin-bottom: 0.15rem;
}

.app-busy-overlay__hint {
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.8);
    font-weight: 400;
}

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

@media (prefers-reduced-motion: reduce) {
    .app-busy-overlay__spinner { animation-duration: 2.4s; }
    .app-busy-overlay { transition: none; }
}

/* ================================================================
   View surface primitives — one-surface rule
   Used by consultation/show, client/show, client/pet_show
   Rule: only .panel has a border. Everything inside is flat.
   Hierarchy comes from type + whitespace + soft dividers, not chrome.
================================================================ */

.pv-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(20rem, 0.95fr);
    gap: 1.4rem;
    align-items: start;
    padding-bottom: 1rem;
    margin-bottom: 1.1rem;
    border-bottom: 1px solid var(--line-soft);
}

/* Pet hero: photo | identity on row 1, the clinical tiles spanning row 2.
   Explicit placement (rather than source order) is what lets the phone layout
   keep the photo beside the name while the tiles go full width underneath. */
.pv-hero--pet {
    grid-template-columns: auto minmax(0, 1fr);
    row-gap: 0.9rem;
}

.pv-hero--pet .pv-hero__media { grid-column: 1; grid-row: 1; align-items: flex-start; }
.pv-hero--pet .pv-hero__main { grid-column: 2; grid-row: 1; }
.pv-hero--pet .pv-hero__stats { grid-column: 2; grid-row: 2; }

.pv-hero__stats {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.55rem;
    min-width: 0;
}

/* Deliberately modest: it is an identity thumbnail next to the name, not a
   feature image — the full photo is one click away in the lightbox.
   Explicit width/height, not the base rule's `width:100%; max-width:` — a
   percentage width is indeterminate inside an `auto` grid track and collapses
   the empty-state <span> to the width of its single letter. */
.pv-hero--pet .pet-photo-box--large {
    width: 6.5rem;
    height: 6.5rem;
    max-width: none;
}

.pv-hero__media { display: flex; align-items: center; }

.pv-hero__main { min-width: 0; }

.pv-hero__actions {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: wrap;
}

.pv-eyebrow {
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 0 0 0.3rem;
}

.pv-hero__main h2,
.pv-hero__title {
    margin: 0 0 0.2rem;
    font-size: 1.45rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--text);
    line-height: 1.25;
}

.pv-hero__subtitle {
    margin: 0 0 0.1rem;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.pv-hero__subtitle a { color: var(--link); text-decoration: none; }
.pv-hero__subtitle a:hover { text-decoration: underline; }

.pv-hero__meta {
    margin: 0.25rem 0 0.6rem;
    font-size: 0.82rem;
    color: var(--muted);
}

/* Owner phone sits in the consultation hero title, after animal · proprietar,
   as a tap-to-call link. Repeated-class selector to beat
   `.panel a:not(.btn):not(.table-sort)` (0,3,1), which hardcodes a light-mode
   blue with no dark-mode override — same trick as `.entity-link`. */
a.pv-hero__phone-link.pv-hero__phone-link.pv-hero__phone-link {
    color: var(--link);
    text-decoration: none;
    white-space: nowrap;
}

a.pv-hero__phone-link.pv-hero__phone-link.pv-hero__phone-link:hover {
    color: var(--link-hover);
    text-decoration: underline;
}

.pv-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-top: 0.35rem;
}

.pv-tag {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    font-size: 0.73rem;
    font-weight: 600;
    color: var(--primary);
    background: var(--primary-ghost);
    border-left: 2.5px solid var(--primary);
    border-radius: 0 4px 4px 0;
}

.pv-tag--muted {
    color: var(--muted);
    background: var(--bg-shell);
    border-left-color: var(--line);
}

.pv-tag--accent {
    color: var(--accent);
    background: var(--accent-ghost);
    border-left-color: var(--accent);
}

/* Tiles — left-border accent block on shell, NO outline */
.pv-tile-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
}

.pv-tile-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pv-tile-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pv-tile-grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

.pv-tile {
    display: grid;
    align-content: start;
    gap: 0.2rem;
    padding: 0.6rem 0.75rem;
    background: var(--bg-shell);
    border: 0;
    border-left: 2.5px solid var(--line);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    min-width: 0;
}

.pv-tile--primary { border-left-color: var(--primary); }
.pv-tile--accent { border-left-color: var(--accent); }
.pv-tile--success { border-left-color: var(--success); }
.pv-tile--warning { border-left-color: var(--warning); }
.pv-tile--danger { border-left-color: var(--danger); }
.pv-tile--info { border-left-color: var(--info); }
.pv-tile--muted { border-left-color: var(--line); }

.pv-tile > span {
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
}

.pv-tile > strong {
    font-size: 0.94rem;
    font-weight: 600;
    color: var(--text);
    line-height: 1.3;
    font-variant-numeric: tabular-nums;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.pv-hero .pv-tile > strong {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.pv-tile > small {
    margin-top: 0.15rem;
    font-size: 0.72rem;
    color: var(--muted);
    line-height: 1.3;
}

/* Section — grouping inside a panel, no chrome */
.pv-section { margin-bottom: 1.35rem; }
.pv-section:last-child { margin-bottom: 0; }

.pv-section__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.1rem 0 0.5rem 0.7rem;
    margin-bottom: 0.9rem;
    border-left: 3px solid var(--primary);
    border-bottom: 1px solid var(--line-soft);
}

.pv-section__head h3,
.pv-section__title {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -0.005em;
    color: var(--text);
}

.pv-section__head .muted,
.pv-section__sub {
    font-size: 0.78rem;
    color: var(--muted);
    margin: 0;
}

.pv-section__head-main { min-width: 0; }

.pv-section__toggle {
    border: 1px solid var(--line);
    background: var(--bg-shell);
    color: var(--muted);
    border-radius: 999px;
    padding: 0.12rem 0.55rem;
    font-size: 0.7rem;
    font-weight: 600;
    cursor: pointer;
}

.pv-section__toggle:hover {
    color: var(--text);
    border-color: var(--primary);
}

/* Rich content — h4 label + paragraph, flat */
.pv-rich {
    display: grid;
    gap: 1rem 1.4rem;
    grid-template-columns: 1fr;
}

.pv-rich--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.pv-rich__item { min-width: 0; }
.pv-rich__item--full { grid-column: 1 / -1; }

.pv-rich__item h4 {
    margin: 0 0 0.4rem;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.pv-rich__item > div,
.pv-rich__item > p {
    font-size: 0.94rem;
    color: var(--text);
    line-height: 1.65;
    margin: 0;
    /* Imported SoftVet text comes in as a single string with \n between
       sentences/observations. `pre-line` preserves those newlines so each
       observation gets its own visible line, while still collapsing
       multiple spaces and letting normal HTML (e.g. <p>) flow naturally. */
    white-space: pre-line;
    /* Cap line length around the typography sweet spot so wide monitors
       don't produce 200-character lines (the "wall of text" effect). */
    max-width: 70ch;
}

.pv-rich__item > div p { margin: 0 0 0.6rem; }
.pv-rich__item > div p:last-child { margin-bottom: 0; }
.pv-rich__item > div ul,
.pv-rich__item > div ol { margin: 0 0 0.5rem; padding-left: 1.2rem; }

.pv-rich__extra {
    margin-top: 0.45rem;
    padding-top: 0.4rem;
    border-top: 1px dashed var(--line-soft);
}

.pv-rich__extra p {
    margin: 0 0 0.2rem;
    font-size: 0.82rem;
    color: var(--text-secondary);
}

/* Key/value list with row dividers — no wrapper cards */
.pv-info { display: grid; gap: 0.5rem; }

.pv-info > div {
    display: grid;
    gap: 0.15rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--line-soft);
}

.pv-info > div:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.pv-info > div > span {
    color: var(--muted);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.pv-info > div > strong {
    color: var(--text);
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1.4;
    word-break: break-word;
}

/* Fact grid — flat label/value cells in a wrap grid (for client profile) */
.pv-fact-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem 1.25rem;
}

.pv-fact { min-width: 0; }
.pv-fact--wide { grid-column: span 3; }

.pv-fact__label {
    margin: 0 0 0.15rem;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--muted);
}

.pv-fact__value {
    margin: 0;
    font-size: 0.92rem;
    font-weight: 500;
    color: var(--text);
    word-break: break-word;
}

/* Timeline — flat list with row dividers (pet consult history) */
.pv-timeline { display: grid; gap: 0; }

.pv-timeline__item {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) auto;
    gap: 0.6rem 1rem;
    align-items: center;
    padding: 0.7rem 0;
    border-bottom: 1px solid var(--line-soft);
}

.pv-timeline__item:last-child { border-bottom: 0; }

.pv-timeline__main { display: grid; gap: 0.15rem; min-width: 0; }
.pv-timeline__main > strong {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}
.pv-timeline__main > span {
    font-size: 0.86rem;
    color: var(--text-secondary);
}
.pv-timeline__main > small {
    font-size: 0.78rem;
    color: var(--muted);
    line-height: 1.45;
}

.pv-timeline__meta {
    display: grid;
    gap: 0.1rem;
    font-size: 0.76rem;
    color: var(--muted);
    min-width: 0;
}

.pv-timeline__actions {
    display: flex;
    gap: 0.35rem;
    flex-shrink: 0;
}

/* "Deviz" column in "Istoric consultatii": one small, muted row per billed
   product/service (name left, quantity + total right-aligned in tabular
   figures), then a bold total. Rows past the visible cap are hidden behind a
   "+ N mai mult" row; a visually hidden checkbox (before the list, so `~` can
   reach it) unfolds them in place without JS. */
.consult-history-deviz {
    position: relative;
    display: grid;
    gap: 0.2rem;
    min-width: 16rem;
    max-width: 24rem;
}

.consult-history-deviz__lines {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.05rem;
}

/* Kept in flow inside the cell (no sr-only position:absolute escaping the
   table's overflow wrapper): a 1px invisible box the label toggles. */
.consult-history-deviz__toggle {
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
    pointer-events: none;
}

/* Scoped under the list so it outranks the later `.consult-history-deviz__line`
   display:grid rule. */
.consult-history-deviz__lines .consult-history-deviz__line--extra {
    display: none;
}

.consult-history-deviz__toggle:checked ~ .consult-history-deviz__lines .consult-history-deviz__line--extra {
    display: grid;
}

.consult-history-deviz__more {
    justify-self: start;
    color: var(--link);
    font-size: 0.74rem;
    font-weight: 600;
    line-height: 1.4;
    cursor: pointer;
    user-select: none;
}

.consult-history-deviz__more:hover {
    color: var(--link-hover);
    text-decoration: underline;
}

.consult-history-deviz__toggle:focus-visible ~ .consult-history-deviz__more {
    outline: 2px solid var(--link);
    outline-offset: 2px;
    border-radius: 2px;
}

.consult-history-deviz__more-close,
.consult-history-deviz__toggle:checked ~ .consult-history-deviz__more .consult-history-deviz__more-open {
    display: none;
}

.consult-history-deviz__toggle:checked ~ .consult-history-deviz__more .consult-history-deviz__more-close {
    display: inline;
}

.consult-history-deviz__line {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    column-gap: 0.75rem;
    align-items: baseline;
    color: var(--muted);
    font-size: 0.74rem;
    line-height: 1.4;
}

.consult-history-deviz__name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.consult-history-deviz__qty,
.consult-history-deviz__total {
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
}

.consult-history-deviz__total {
    grid-column: 3;
    min-width: 5.5rem;
}

.consult-history-deviz__sum {
    padding-top: 0.2rem;
    border-top: 1px solid var(--line-soft);
    color: var(--text);
    font-weight: 600;
}

.pv-timeline__analyses {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-top: 0.35rem;
}

.pv-timeline__analysis-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.18rem 0.55rem;
    border: 1px solid var(--line-soft);
    border-radius: 999px;
    background: var(--surface-soft, #f5f6f8);
    color: var(--text);
    font-size: 0.78rem;
    line-height: 1.2;
    text-decoration: none;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pv-timeline__analysis-chip:hover {
    border-color: var(--accent, currentColor);
    background: var(--panel-hover);
}

/* Overview layout — main + sticky aside */
.pv-overview {
    display: grid;
    grid-template-columns: minmax(0, 1.75fr) minmax(19rem, 0.95fr);
    gap: 1.1rem 1.6rem;
    align-items: start;
}

.pv-overview__main,
.pv-overview__side {
    display: grid;
    gap: 1.85rem;
    min-width: 0;
}

.pv-overview__side { position: sticky; top: 1rem; }

/* ── Summary band ──────────────────────────────────────────────────────────
   Side-by-side flat sections between the hero and the tabs on the pet page:
   timeline, weight chart, medical context. Columns collapse one at a time as
   the viewport narrows, so nothing gets squeezed below a readable width. */
.pv-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
    gap: 1.1rem 1.6rem;
    align-items: start;
}

/* Collapsible detail (weight measurement list) — a flat disclosure, not a card */
.pv-details {
    margin-top: 0.7rem;
}

.pv-details > summary {
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--muted);
    list-style: none;
    padding: 0.3rem 0;
}

.pv-details > summary::-webkit-details-marker { display: none; }

.pv-details > summary::before {
    content: '▸';
    display: inline-block;
    margin-right: 0.35rem;
    transition: transform 100ms ease;
}

.pv-details[open] > summary::before { transform: rotate(90deg); }
.pv-details > summary:hover { color: var(--text); }

/* Sub-heading inside a flat section (no extra surface) */
.pv-subhead {
    margin: 0.9rem 0 0.35rem;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--muted);
}

/* Active reminders — type + due date, so a doctor reads what is due, not just
   when. Always future-dated: the pet page expires lapsed reminders on load. */
.pv-due-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
}

.pv-due-list__item {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.6rem;
    padding: 0.4rem 0;
    border-bottom: 1px solid var(--line-soft);
}

.pv-due-list__item:last-child { border-bottom: 0; }

.pv-due-list__type {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text);
    min-width: 0;
}

.pv-due-list__date {
    font-size: 0.82rem;
    color: var(--text-secondary, var(--muted));
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* ── Tabbed record ────────────────────────────────────────────────────────
   Panels are all in the DOM; the controller toggles [hidden]. */
.pv-tabs {
    display: grid;
    gap: 1.1rem;
    min-width: 0;
}

.pv-tabs__panel { min-width: 0; }
.pv-tabs__panel[hidden] { display: none; }

/* Scroll affordance for .tab-bar--scroll. The chevrons are the whole point:
   a tab clipped by the viewport edge is too subtle a hint on a phone, so each
   side gets a fade + arrow that appears ONLY while tabs remain off-screen that
   way (tabs_controller#syncOverflow toggles the classes). Tapping one scrolls. */
.tab-scroller {
    position: relative;
    min-width: 0;
}

.tab-scroller__nudge {
    position: absolute;
    top: 0;
    bottom: 1px;
    z-index: 2;
    width: 2.6rem;
    display: none;
    place-items: center;
    padding: 0;
    border: 0;
    font-family: inherit;
    font-size: 1.45rem;
    font-weight: 700;
    line-height: 1;
    color: var(--text-secondary);
    cursor: pointer;
}

/* The opaque stop runs most of the width so the arrow never competes with the
   tab label it sits over. */
.tab-scroller__nudge--prev {
    left: 0;
    justify-content: start;
    padding-left: 0.15rem;
    background: linear-gradient(90deg, var(--panel) 68%, transparent);
}

.tab-scroller__nudge--next {
    right: 0;
    justify-content: end;
    padding-right: 0.15rem;
    background: linear-gradient(270deg, var(--panel) 68%, transparent);
}

.tab-scroller.is-overflow-start .tab-scroller__nudge--prev,
.tab-scroller.is-overflow-end .tab-scroller__nudge--next { display: grid; }

.tab-scroller__nudge:hover { color: var(--text); }

/* Phone-first tab strip: one scrollable row instead of wrapping to three, so
   the panel below never jumps down as tabs reflow. */
.tab-bar--scroll {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    scroll-padding-inline: 1rem;
}

.tab-bar--scroll::-webkit-scrollbar { display: none; }

.tab-bar--scroll .tab-bar__item {
    flex: 0 0 auto;
    white-space: nowrap;
}

/* .tab-bar__item was written for <a>; these tabs are <button> so they can be
   switched client-side without a round-trip. */
button.tab-bar__item {
    background: none;
    border: 0;
    border-bottom: 2px solid transparent;
    font-family: inherit;
    cursor: pointer;
}

/* Links inside a .pv-info row (last consultation, weight measurements).
   Repeated class beats .panel a:not(.btn):not(.table-sort) (0,3,1), which
   hardcodes a light-mode blue; --link is theme-aware. */
a.pv-info__link.pv-info__link.pv-info__link,
a.pv-info__link.pv-info__link.pv-info__link:visited {
    color: var(--link);
    text-decoration: none;
}

a.pv-info__link.pv-info__link.pv-info__link:hover { text-decoration: underline; }

/* Share-link block — input + button row, flat */
.pv-share {
    display: grid;
    gap: 0.5rem;
}

.pv-share label {
    display: grid;
    gap: 0.25rem;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--muted);
}

.pv-share input[type="text"] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.82rem;
    padding: 0.5rem 0.6rem;
    background: var(--bg-shell);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    color: var(--text);
    min-height: 2.3rem;
}

.pv-share__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.pv-share__hint {
    margin: 0;
    font-size: 0.76rem;
    color: var(--muted);
}

/* Table wrapper — reset for use inside a flat section */
.pv-table-wrap {
    overflow-x: auto;
    margin: 0 -0.25rem;
    padding: 0 0.25rem;
}

/* Small / note block */
.pv-note {
    margin-top: 0.6rem;
    padding: 0.55rem 0.75rem;
    background: var(--warning-bg);
    border-left: 2.5px solid var(--warning);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    color: var(--text);
}

.pv-note strong {
    display: block;
    margin-bottom: 0.15rem;
    font-size: 0.82rem;
    font-weight: 600;
}

.pv-note p {
    margin: 0;
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

/* Dark-mode tweaks */
:root[data-theme='dark'] .pv-hero { border-bottom-color: var(--line); }
:root[data-theme='dark'] .pv-section__head { border-bottom-color: var(--line); }
:root[data-theme='dark'] .pv-info > div { border-bottom-color: var(--line); }
:root[data-theme='dark'] .pv-timeline__item { border-bottom-color: var(--line); }
:root[data-theme='dark'] .pv-tile { background: var(--bg-shell); }
:root[data-theme='dark'] .pv-tile--muted { border-left-color: var(--line); }
:root[data-theme='dark'] .pv-tag { background: rgba(91,147,232,0.12); color: #7EB0F5; border-left-color: #5B93E8; }
:root[data-theme='dark'] .pv-tag--accent { background: rgba(232,164,85,0.12); color: #E8A455; border-left-color: #E8A455; }
:root[data-theme='dark'] .pv-tag--muted { background: var(--bg-shell); color: var(--muted); border-left-color: var(--line); }
:root[data-theme='dark'] .pv-section__toggle { background: var(--bg-shell); border-color: var(--line); color: var(--muted); }
:root[data-theme='dark'] .pv-share input[type="text"] { background: var(--bg-shell); border-color: var(--line); color: var(--text); }
:root[data-theme='dark'] .pv-due-list__item { border-bottom-color: var(--line); }

/* Responsive */
@media (max-width: 900px) {
    .pv-summary { grid-template-columns: minmax(0, 1fr); }
    .pv-overview { grid-template-columns: minmax(0, 1fr); }
    .pv-overview__side { position: static; }
    .pv-rich--2 { grid-template-columns: minmax(0, 1fr); }
    .pv-hero { grid-template-columns: minmax(0, 1fr); }
    /* .pv-hero--pet deliberately does NOT collapse to one column: the photo
       stays beside the name. Only the tiles drop to their own full-width row. */
    .pv-hero--pet { grid-template-columns: auto minmax(0, 1fr); }
    .pv-hero--pet .pv-hero__stats { grid-column: 1 / -1; }
    .pv-hero__actions { justify-content: flex-start; }
    .pv-tile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pv-hero__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pv-fact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pv-fact--wide { grid-column: span 2; }
    .pv-timeline__item { grid-template-columns: minmax(0, 1fr); align-items: start; }
    .pv-timeline__actions { justify-content: flex-start; }
}

@media (max-width: 600px) {
    .pv-tile-grid,
    .pv-tile-grid--4,
    .pv-tile-grid--5 { grid-template-columns: minmax(0, 1fr); }
    /* Two columns, not one: with the photo taking the left of row 1, a
       single-column tile stack would make the hero absurdly tall. */
    .pv-hero__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pv-hero--pet .pet-photo-box--large { width: 4.25rem; height: 4.25rem; }
    .pv-fact-grid { grid-template-columns: minmax(0, 1fr); }
    .pv-fact--wide { grid-column: span 1; }

    /* Tabs on a phone: the strip bleeds to the panel edges so a partially
       visible tab reads as "there is more this way", reinforced by the
       .tab-scroller chevrons. Labels stay legible — only the counts drop. */
    .tab-scroller { margin-inline: -0.75rem; }

    .tab-bar--scroll {
        padding-inline: 0.75rem;
        scroll-padding-inline: 2.5rem;
    }

    /* Only the horizontal padding tightens — the label keeps its full size.
       These tabs are the page's primary navigation; shrinking the type is what
       made them easy to miss. */
    .tab-bar--scroll .tab-bar__item {
        padding: 0.65rem 0.8rem 0.7rem;
    }

    .tab-bar__count { display: none; }
}

/* ==========================================================================
   Image annotator modal
   Canvas editor for drawing on consultation photos before/after upload.
   Opened via window event 'image-annotator:open'.
   ========================================================================== */

.image-annotator {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.image-annotator[hidden] { display: none; }

.image-annotator__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.65);
    backdrop-filter: blur(2px);
}

.image-annotator__panel {
    position: relative;
    z-index: 1;
    width: min(1100px, 100%);
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    background: var(--panel);
    border-radius: 12px;
    box-shadow: 0 24px 64px rgba(15, 23, 42, 0.35);
    overflow: hidden;
}

.image-annotator__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid var(--line);
}

.image-annotator__head h3 {
    margin: 0;
    font-size: 1.05rem;
}

.image-annotator__close {
    background: transparent;
    border: 0;
    font-size: 1.8rem;
    line-height: 1;
    cursor: pointer;
    color: var(--text-secondary);
    padding: 0 4px;
}
.image-annotator__close:hover { color: #111827; }

.image-annotator__toolbox {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--line);
    background: var(--panel-soft);
    flex-wrap: wrap;
}

.image-annotator__tools,
.image-annotator__colors,
.image-annotator__widths {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.image-annotator__tool {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line);
    background: var(--panel);
    color: var(--text);
    border-radius: 8px;
    cursor: pointer;
    font-size: 1.05rem;
    line-height: 1;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.image-annotator__tool:hover { background: var(--bg-page); }
.image-annotator__tool.is-active {
    background: var(--primary-solid);
    color: var(--text-on-solid);
    border-color: var(--primary);
}
.image-annotator__tool svg { display: block; }

.image-annotator__divider {
    width: 1px;
    height: 24px;
    background: var(--line);
    margin: 0 4px;
}

.image-annotator__swatch {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 2px solid transparent;
    background: var(--swatch-color, #000);
    cursor: pointer;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
    transition: transform 0.15s, border-color 0.15s;
}
.image-annotator__swatch:hover { transform: scale(1.08); }
.image-annotator__swatch.is-active {
    border-color: #111827;
    transform: scale(1.1);
}

.image-annotator__width {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line);
    background: var(--panel);
    border-radius: 8px;
    cursor: pointer;
}
.image-annotator__width.is-active {
    border-color: var(--primary);
    background: var(--panel-soft);
}
.image-annotator__width-dot {
    display: block;
    width: var(--dot-size, 4px);
    height: var(--dot-size, 4px);
    background: var(--text);
    border-radius: 50%;
}

.image-annotator__spacer { flex: 1 1 auto; }

.image-annotator__canvas-wrap {
    position: relative;
    flex: 1 1 auto;
    overflow: auto;
    background:
        linear-gradient(45deg, var(--bg-page) 25%, transparent 25%),
        linear-gradient(-45deg, var(--bg-page) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, var(--bg-page) 75%),
        linear-gradient(-45deg, transparent 75%, var(--bg-page) 75%);
    background-size: 16px 16px;
    background-position: 0 0, 0 8px, 8px -8px, -8px 0;
    background-color: var(--panel);
    padding: 20px;
}

.image-annotator__stage {
    position: relative;
    display: inline-block;
    margin: 0 auto;
    max-width: 100%;
}

.image-annotator__layer {
    display: block;
    max-width: 100%;
    height: auto;
}

.image-annotator__layer--overlay {
    position: absolute;
    inset: 0;
    cursor: crosshair;
    touch-action: none;
}

.image-annotator__busy {
    position: absolute;
    top: 12px;
    right: 12px;
    background: rgba(17, 24, 39, 0.85);
    color: var(--text-on-solid);
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 0.85rem;
    z-index: 2;
}

.image-annotator__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 20px;
    border-top: 1px solid var(--line);
    background: var(--panel);
    flex-wrap: wrap;
}

.image-annotator__filename {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    color: var(--text-secondary);
}
.image-annotator__filename input {
    padding: 6px 8px;
    border: 1px solid var(--line);
    border-radius: 6px;
    min-width: 220px;
}

.image-annotator__foot-actions { display: inline-flex; gap: 8px; }

body.is-image-annotator-open { overflow: hidden; }

/* "Editeaza" button overlaid on photo cards */
.consultation-photo-card__edit-btn,
.upload-preview-card__edit-btn {
    position: absolute;
    top: 6px;
    left: 6px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 0;
    background: rgba(255, 255, 255, 0.95);
    color: #111827;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    z-index: 1;
}
.consultation-photo-card__edit-btn:hover,
.upload-preview-card__edit-btn:hover { background: var(--panel); }

@media (max-width: 720px) {
    .image-annotator__panel { max-height: 100vh; border-radius: 0; }
    .image-annotator__toolbox { gap: 6px; }
    .image-annotator__filename input { min-width: 0; flex: 1 1 auto; }
}

/* ---------------------------------------------------------------------- */
/* Weekly schedule editor (Personal staff form) — multi-shift per weekday */
/* ---------------------------------------------------------------------- */
.weekly-schedule { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-top: 8px; }
.weekly-schedule__day { padding: 12px 14px; background: var(--panel, #fff); border: 1px solid var(--line, #E2E7EE); border-left: 3px solid var(--primary, #2968E0); border-radius: 8px; display: flex; flex-direction: column; gap: 8px; }
.weekly-schedule__day--closed { border-left-color: var(--muted, #8694A7); opacity: 0.85; }
.weekly-schedule__day-head { display: flex; align-items: center; justify-content: space-between; }
.weekly-schedule__day-name { font-size: 13px; color: var(--text, #1C2433); }
.weekly-schedule__closed-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted, #8694A7); cursor: pointer; }
.weekly-schedule__shifts { display: flex; flex-direction: column; gap: 6px; }
.weekly-schedule__off-hint { margin: 0; font-size: 12px; color: var(--muted, #8694A7); font-style: italic; }
.weekly-schedule__shift { display: flex; align-items: center; gap: 6px; }
.weekly-schedule__time { padding: 4px 6px; font-size: 12.5px; border: 1px solid var(--line, #E2E7EE); border-radius: 5px; background: var(--shell, #F7F8FA); flex: 1 1 auto; min-width: 0; font-variant-numeric: tabular-nums; }
.weekly-schedule__sep { color: var(--muted, #8694A7); }
.weekly-schedule__remove { width: 24px; height: 24px; border: 1px solid var(--line, #E2E7EE); background: var(--shell, #F7F8FA); color: var(--danger, #C4463A); border-radius: 4px; cursor: pointer; font-size: 14px; line-height: 1; }
.weekly-schedule__remove:hover { background: var(--danger-bg, #FDEDEB); }
.weekly-schedule__day-actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 2px; }
.weekly-schedule__add { align-self: flex-start; }
.weekly-schedule__copy-btn { padding: 4px 10px; font-size: 12px; font-weight: 500; color: var(--primary, #2968E0); background: transparent; border: 1px solid var(--primary, #2968E0); border-radius: 5px; cursor: pointer; }
.weekly-schedule__copy-btn:hover { background: var(--primary-ghost, rgba(41,104,224,0.08)); }
.weekly-schedule__day { position: relative; }
.weekly-schedule__copy-popover { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 10; padding: 12px; background: var(--panel, #fff); border: 1px solid var(--line, #E2E7EE); border-radius: 8px; box-shadow: 0 6px 24px rgba(0,0,0,0.12); display: flex; flex-direction: column; gap: 10px; }
.weekly-schedule__copy-popover-head { font-size: 12.5px; color: var(--text, #1C2433); }
.weekly-schedule__copy-targets { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px 12px; }
.weekly-schedule__copy-target { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-2, #4A5568); cursor: pointer; }
.weekly-schedule__copy-quick { display: flex; flex-wrap: wrap; gap: 4px; padding-top: 6px; border-top: 1px solid var(--line-soft, #EDF0F4); }
.weekly-schedule__copy-quick .btn--small { font-size: 11.5px; padding: 3px 8px; }
.weekly-schedule__copy-actions { display: flex; gap: 6px; justify-content: flex-end; padding-top: 6px; border-top: 1px solid var(--line-soft, #EDF0F4); }

/* Consumable rows in the sales editor — distinct teal accent so the user
   can tell at a glance which lines won't appear on the fiscal bon. The
   accent must beat both the default white surface AND the .is-active blue
   highlight, otherwise an active consumable looks identical to an active
   product. */
.sale-line-row--consumable {
    border-color: rgba(14, 142, 142, 0.45);
    border-left: 4px solid var(--info, #0E8E8E);
    background: rgba(14, 142, 142, 0.07);
}
.sale-line-row--consumable.is-active {
    border-color: var(--info, #0E8E8E);
    background: rgba(14, 142, 142, 0.11);
    box-shadow: 0 0 0 3px rgba(14, 142, 142, 0.18);
}
.sale-line-card--consumable { border-left: 3px solid var(--info, #0E8E8E); background: rgba(14, 142, 142, 0.04); }

/* Child consumable rows — auto-spawned under a service line so the doctor
   sees what was used as part of the procedure. Indented and tinted so
   the parent-child grouping is obvious. The lighter background
   distinguishes them from manually-picked consumable lines. */
.sale-line-row--child {
    margin-left: 1.4rem;
    border-left: 3px solid rgba(14, 142, 142, 0.55);
    background: rgba(14, 142, 142, 0.04);
    position: relative;
}
.sale-line-row--child::before {
    content: "↳";
    position: absolute;
    left: -1.05rem;
    top: 0.55rem;
    color: var(--muted, #8694A7);
    font-size: 0.95rem;
    line-height: 1;
}
/* Collapse chevron on a service row that has spawned consumable children.
   Sits at the start of `.sale-line-row__head`, before the row index. A
   tiny ▾ that flips to ▸ when collapsed — no text, the tooltip explains.
   Hidden until the row actually has children (JS toggles `hidden`). */
.sale-line-row__collapse {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.1rem;
    height: 1.1rem;
    padding: 0;
    font-size: 0.75rem;
    line-height: 1;
    color: var(--muted, #8694A7);
    background: transparent;
    border: 0;
    border-radius: 0.25rem;
    cursor: pointer;
    transition: transform 120ms ease, color 120ms ease;
}
.sale-line-row__collapse::before {
    content: "\25BE"; /* ▾ */
}
.sale-line-row__collapse:hover {
    color: var(--info, #0E8E8E);
}
.sale-line-row__collapse[aria-expanded="false"] {
    transform: rotate(-90deg);
}
.sale-line-row__collapse[hidden] { display: none; }
.sale-line-row--collapsed { background: rgba(14, 142, 142, 0.04); }
.sale-line-card__badge { display: inline-flex; align-items: center; padding: 2px 8px; margin-left: 8px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; border-radius: 4px; }
.sale-line-card__badge--consumable { background: rgba(14, 142, 142, 0.10); color: var(--info, #0E8E8E); border: 1px solid rgba(14, 142, 142, 0.35); }
.sale-line-card__total-box--free { color: var(--muted, #8694A7); font-style: italic; font-weight: 500; }

/* Compact two-line sales rows — 20 products need to stay scannable
   without scrolling. Row 1 = index + product picker (full width).
   Row 2 = qty + price + discount + total in the left column, chips
   (CONSUMABIL, stock) in the right column. Labels are visually hidden
   (still read by screen readers) because the column order, placeholders,
   and the prominent total cell make the fields self-evident. Each row
   drops from ~150px to ~70px. */
.sale-line-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "head head"
        "controls foot";
    padding: 0.4rem 0.65rem;
    gap: 0.3rem 0.45rem;
    border-radius: 0.55rem;
}
.sale-line-row__head {
    grid-area: head;
    gap: 0.45rem;
    min-width: 0;
}
.sale-line-row__controls { grid-area: controls; }
.sale-line-row__foot {
    grid-area: foot;
    align-self: center;
    justify-self: end;
}
.sale-line-row__index {
    min-width: 1.35rem;
    height: 1.35rem;
    font-size: 0.72rem;
}
.sale-line-row__controls {
    grid-template-columns: minmax(5.5rem, 8rem) minmax(5rem, 7rem) minmax(4.5rem, 5.5rem) minmax(6rem, 1fr);
    gap: 0.4rem;
    align-items: center;
}
.sale-line-row__controls--consult {
    grid-template-columns: minmax(5.5rem, 8rem) minmax(5rem, 7rem) minmax(6rem, 1fr);
}
.sale-line-row .sale-line-field__label {
    font-size: 0.62rem;
    min-height: 0.9rem;
    line-height: 1;
}
.sale-line-row .sale-line-field {
    grid-template-rows: auto 1.85rem;
    gap: 0.15rem;
}
.sale-form .sale-line-row .sale-line-field--price input[type="number"],
.sale-form .sale-line-row .sale-line-field--discount input[type="number"] {
    height: 1.85rem;
    min-height: 1.85rem;
    padding: 0 0.5rem;
    font-size: 0.85rem;
    border-radius: 0.4rem;
}
.sale-line-field--qty .qty-stepper { height: 1.85rem; }
/* Per-line total: subdued, inline-style display — the BIG total is at
   the bottom of the cart ("Total: X RON"). Per-line totals just need
   to be readable, not dominant. No box, lighter weight, smaller font. */
.sale-line-row .sale-line-field--total .sale-line-field__total-box {
    height: 1.85rem;
    padding: 0 0.4rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text, #40567a);
    background: transparent;
    border: 0;
    border-radius: 0;
    justify-content: flex-end;
}

/* Tighten the in-row product picker (TomSelect) — the previous 2.6rem
   min-height made every line ~40px tall just for the title bar, which
   stacked into a wall of whitespace once 10+ lines were on the cart. */
.sale-line-row .ts-wrapper.sale-product-select {
    padding: 0;
    min-height: 0;
}
.sale-line-row .ts-wrapper.sale-product-select .ts-control,
.sale-line-row .sale-product-select {
    min-height: 1.95rem;
    padding: 0.2rem 1.7rem 0.2rem 0.6rem;
    border-radius: 0.45rem;
}
.sale-line-row .ts-wrapper.sale-product-select .ts-control input,
.sale-line-row .ts-wrapper.sale-product-select.single .ts-control > .item {
    font-size: 0.85rem;
}
/* Single-line product title with ellipsis — long names like
   "💉 [Consumabil] Amoxicilina susp (lot vechi) · 35.00 RON" otherwise
   wrap to 3 lines and balloon the row to 100+ px when the head column
   gets squeezed by the controls + chips on the right. */
.sale-line-row .ts-wrapper.sale-product-select.single .ts-control > .item {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    display: block;
}
.sale-line-row .sale-line-row__foot {
    margin-top: 0.05rem;
    min-height: 0;
    gap: 0.35rem;
}
.sale-line-row .sale-line-row__foot:empty,
.sale-line-row .sale-line-row__foot-info:empty { display: none; }
.sale-line-row .sale-line-row__foot-info { gap: 0.3rem; row-gap: 0.2rem; }
/* Long lot strings ("Lot 250521B, Exp 31/10/2027 | …") used to sit BESIDE the
   stock pill in the right-hand column, widening it and squeezing/overflowing
   the controls. Stack the foot chips vertically so the lot drops UNDER the
   stock pill, and bound + wrap the lot so it can never push the controls. */
.sale-line-row .sale-line-row__foot-info {
    flex-direction: column;
    align-items: flex-end;
    flex-wrap: nowrap;
}
.sale-line-row .sale-line-chip--lot {
    max-width: 14rem;
    white-space: normal;
    text-align: right;
}
.sale-line-row .sale-line-chip {
    font-size: 0.68rem;
    padding: 0.1rem 0.45rem;
    line-height: 1.2;
}

/* The default .sale-line-field hardcodes a 2.4rem input track via
   grid-template-rows. Override it for in-row fields so the compact
   1.85rem inputs line up tight with their labels. */
.sale-line-row .sale-line-field {
    grid-template-rows: auto 1.85rem;
    gap: 0.15rem;
}

/* Per-service "Adauga consumabil" picker — its own full-width line at the
   bottom of the service row (grid-column 1/-1), shown only on service rows
   (toggled by syncAddConsumableControl in _sale_line_consumables.js). Amber
   "add" affordance so it reads as an action, distinct from the blue product
   picker. The picker lists consumables only, so what it adds is always a
   free, non-billable child line. Uses --accent* vars so it adapts to dark
   mode. */
.sale-line-add-consumable {
    grid-column: 1 / -1;
    justify-self: start;
    min-width: 11rem;
    max-width: 17rem;
    margin-top: 0.15rem;
}
.sale-line-add-consumable[hidden] { display: none; }
.sale-line-row .sale-line-add-consumable .ts-wrapper.sale-product-select { min-width: 11rem; }
.sale-line-row .sale-line-add-consumable .ts-wrapper.sale-product-select .ts-control {
    background: var(--accent-ghost, rgba(217, 139, 58, 0.08));
    border-color: var(--accent, #d98b3a);
}
.sale-line-add-consumable .ts-control input::placeholder,
.sale-line-add-consumable .ts-wrapper.single .ts-control > .item {
    color: var(--accent-strong, #c47b2e);
    font-weight: 600;
}

/* Calendar off-hours overlay (per-doctor schedule) — diagonal hatch + not-allowed cursor */
.appointments-week__doctor-off { position: absolute; left: 0; right: 0; pointer-events: auto; cursor: not-allowed;
    background-image: repeating-linear-gradient(135deg, rgba(141, 152, 168, 0.10) 0, rgba(141, 152, 168, 0.10) 6px, rgba(141, 152, 168, 0.18) 6px, rgba(141, 152, 168, 0.18) 12px);
    border-top: 1px solid rgba(141, 152, 168, 0.35);
    border-bottom: 1px solid rgba(141, 152, 168, 0.35);
    z-index: 2;
}
.appointments-week__doctor-off--start { border-top: none; }
.appointments-week__doctor-off--end { border-bottom: none; }


/* Side-by-side template editor: editable text on the left, live email preview
   on the right (sticky). Collapses to a single column under 1100px. */
.editor-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1.5rem;
    align-items: start;
    margin-top: 0.9rem;
}
.editor-split__preview {
    position: sticky;
    top: 1rem;
}
.editor-split .email-preview__frame {
    height: 70vh;
    min-height: 460px;
}
@media (max-width: 1100px) {
    .editor-split {
        grid-template-columns: minmax(0, 1fr);
    }
    .editor-split__preview {
        position: static;
    }
    .editor-split .email-preview__frame {
        height: 60vh;
    }
}

/* Notification template preview pane (sabloane-notificari form). */
.email-preview {
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 8px;
    background: var(--surface-2, #f9fafb);
    overflow: hidden;
}
.email-preview__subject {
    padding: 10px 14px;
    border-bottom: 1px solid var(--border-color, #e5e7eb);
    background: var(--surface-1, #ffffff);
    display: flex;
    gap: 8px;
    align-items: baseline;
    flex-wrap: wrap;
}
.email-preview__subject-label {
    font-size: 0.85rem;
    color: var(--text-muted, #6b7280);
}
.email-preview__frame {
    width: 100%;
    min-height: 240px;
    border: 0;
    background: var(--panel);
    display: block;
}
.email-preview__text {
    margin: 0;
    padding: 14px;
    background: var(--panel);
    color: var(--text);
    white-space: pre-wrap;
    word-break: break-word;
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 0.95rem;
    line-height: 1.5;
    min-height: 120px;
}

/* ── Onboarding panel (global "Get started" launcher + checklist) ─────── */
.onboarding-panel {
    position: fixed;
    left: 20px;
    bottom: 20px;
    z-index: 1190; /* below ai-chat (1200) so they don't fight if both pop */
    font-size: 13.5px;
    color: var(--text);
}

.onboarding-panel__launcher {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 14px; border: 1px solid var(--primary-strong);
    background: var(--primary-solid); color: var(--text-on-solid);
    border-radius: var(--radius-lg); font-family: inherit; font-weight: 600;
    cursor: pointer; box-shadow: var(--shadow);
    transition: background 100ms ease;
}
.onboarding-panel__launcher:hover { background: var(--primary-strong); }
.onboarding-panel__launcher[hidden] { display: none; }
.onboarding-panel__launcher-label { letter-spacing: 0.01em; }
.onboarding-panel__launcher-count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 22px; height: 22px; padding: 0 6px;
    border-radius: 11px;
    background: rgba(255, 255, 255, 0.22);
    font-size: 12px; font-weight: 600;
}

.onboarding-panel__card {
    width: min(360px, calc(100vw - 40px));
    max-height: calc(100vh - 120px);
    display: flex; flex-direction: column;
    background: var(--panel); color: var(--text);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: 0 16px 40px rgba(28, 36, 51, 0.18);
    overflow: hidden;
}
.onboarding-panel__card[hidden] { display: none; }

.onboarding-panel__head {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
    padding: 14px 14px 10px; background: var(--bg-shell);
    border-bottom: 1px solid var(--line);
}
.onboarding-panel__heading strong { font-size: 14px; font-weight: 600; display: block; margin-bottom: 4px; }
.onboarding-panel__heading p { margin: 0; font-size: 12px; line-height: 1.45; color: var(--muted); }

.onboarding-panel__icon-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 24px; height: 24px; padding: 0;
    background: transparent; color: var(--muted);
    border: 1px solid transparent; border-radius: 4px;
    font-size: 16px; line-height: 1; cursor: pointer;
    transition: background 100ms ease, color 100ms ease;
}
.onboarding-panel__icon-btn:hover { background: var(--panel-hover); color: var(--text); border-color: var(--line); }

.onboarding-panel__progress {
    height: 3px; background: var(--line-soft); margin: 0;
}
.onboarding-panel__progress-bar {
    height: 100%; background: var(--primary); transition: width 150ms ease;
}
.onboarding-panel__progress-label {
    margin: 6px 14px 0; font-size: 11.5px; color: var(--muted);
}

.onboarding-panel__list {
    list-style: none; margin: 0; padding: 8px 0; overflow-y: auto;
    display: flex; flex-direction: column;
}
.onboarding-panel__item {
    display: flex; gap: 10px; align-items: flex-start;
    padding: 10px 14px;
    border-top: 1px solid var(--line-soft);
}
.onboarding-panel__item:first-child { border-top: 0; }
.onboarding-panel__item-body { flex: 1; min-width: 0; }
.onboarding-panel__item-body strong {
    display: block; font-size: 13px; font-weight: 600; margin-bottom: 2px;
}
.onboarding-panel__item-body p { margin: 0; font-size: 12px; line-height: 1.4; color: var(--muted); }
.onboarding-panel__item-actions {
    display: flex; flex-direction: column; gap: 4px; align-items: flex-end;
    flex-shrink: 0;
}

.onboarding-panel__foot {
    display: flex; justify-content: flex-end;
    padding: 10px 14px; border-top: 1px solid var(--line); background: var(--bg-shell);
}

@media (max-width: 600px) {
    .onboarding-panel { left: 12px; right: 12px; bottom: 12px; }
    .onboarding-panel__card { width: auto; max-width: none; }
}

/* WhatsApp-style chat thread
   Used on the standalone inbox (templates/notification/whatsapp_inbox/thread.html.twig)
   and embedded on the client detail page (templates/client/show.html.twig)
   via templates/notification/whatsapp_inbox/_thread_panel.html.twig.
   "Sent" check icon = message persisted with a provider message ID. Delivered/read
   ticks are not wired up — they would require Meta status webhook ingestion that
   does not exist yet.
*/
.wa-chat { display: flex; flex-direction: column; gap: 12px; }

.wa-chat__contact {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 12px;
    background: var(--panel-soft);
    border: 1px solid var(--line);
    border-radius: 10px;
}
.wa-chat__contact-meta { display: flex; flex-direction: column; min-width: 0; }
.wa-chat__contact-name { font-weight: 600; font-size: 14px; color: var(--text); }
.wa-chat__contact-phone { font-size: 12px; color: var(--muted); font-family: 'JetBrains Mono', monospace; }

.wa-avatar {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px;
    border-radius: 50%;
    color: var(--text-on-solid); font-weight: 600; font-size: 13px;
    flex-shrink: 0;
    user-select: none;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.wa-avatar--clinic {
    background: var(--success-solid);
    color: var(--text-on-solid);
}
.wa-avatar--sm { width: 28px; height: 28px; font-size: 11px; }

.wa-thread {
    display: flex; flex-direction: column;
    gap: 4px;
    padding: 16px 12px;
    max-height: 560px;
    overflow-y: auto;
    background:
        linear-gradient(rgba(241, 244, 247, 0.85), rgba(241, 244, 247, 0.85)),
        repeating-linear-gradient(45deg, transparent 0 12px, rgba(0,0,0,0.015) 12px 13px);
    border: 1px solid var(--line);
    border-radius: 10px;
    scroll-behavior: smooth;
}
:root[data-theme='dark'] .wa-thread {
    background:
        linear-gradient(rgba(15, 21, 30, 0.9), rgba(15, 21, 30, 0.9)),
        repeating-linear-gradient(45deg, transparent 0 12px, rgba(255,255,255,0.02) 12px 13px);
}

.wa-thread__date-sep {
    align-self: center;
    margin: 12px 0 8px;
    padding: 4px 10px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.85);
    color: var(--muted);
    font-size: 11px;
    font-weight: 500;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
    text-transform: capitalize;
}
:root[data-theme='dark'] .wa-thread__date-sep {
    background: rgba(40, 50, 65, 0.85);
    color: var(--text-secondary);
}

.wa-thread__row {
    display: flex; align-items: flex-end; gap: 6px;
    max-width: 100%;
}
.wa-thread__row--in  { justify-content: flex-start; }
.wa-thread__row--out { justify-content: flex-end; }
.wa-thread__row + .wa-thread__row { margin-top: 2px; }
.wa-thread__row--first-of-group { margin-top: 8px; }

.wa-thread__avatar-slot {
    width: 28px; height: 28px;
    flex-shrink: 0;
}

.wa-thread__msg {
    position: relative;
    max-width: 72%;
    padding: 7px 10px 5px;
    border-radius: 8px;
    font-size: 14px;
    line-height: 1.35;
    color: var(--text);
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
    word-wrap: break-word;
    overflow-wrap: anywhere;
}
.wa-thread__msg--in {
    background: var(--panel);
    border-bottom-left-radius: 2px;
}
.wa-thread__msg--out {
    background: var(--success-bg);
    border-bottom-right-radius: 2px;
}
:root[data-theme='dark'] .wa-thread__msg--in  { background: #1F2A38; color: var(--text); }
:root[data-theme='dark'] .wa-thread__msg--out { background: #1F4537; color: #E6F2EA; }

.wa-thread__msg-body {
    white-space: pre-wrap;
    padding-right: 56px;
    min-height: 18px;
}
.wa-thread__msg--out .wa-thread__msg-body { padding-right: 64px; }

/* Linked-appointment chip: rendered inside outbound bubbles for messages
   that originated from a NotificationDispatch tied to an Appointment.
   Borrowed visually from WhatsApp's reply-quote treatment. */
.wa-thread__appt-chip {
    display: flex; align-items: center; gap: 6px;
    margin: -2px -4px 6px;
    padding: 4px 8px;
    border-left: 3px solid var(--success);
    border-radius: 4px;
    background: rgba(26, 138, 94, 0.10);
    color: inherit;
    font-size: 12px;
    line-height: 1.3;
    text-decoration: none;
    transition: background 0.12s ease;
}
/* Triple-class selector to beat .panel a:not(.btn):not(.table-sort) (0,3,1). */
.wa-thread .wa-thread__msg a.wa-thread__appt-chip,
.wa-thread .wa-thread__msg a.wa-thread__appt-chip:visited,
.wa-thread .wa-thread__msg a.wa-thread__appt-chip:hover { color: inherit; text-decoration: none; }
.wa-thread__appt-chip:hover { background: rgba(26, 138, 94, 0.16); }
.wa-thread__msg--in .wa-thread__appt-chip {
    border-left-color: var(--primary);
    background: rgba(41, 104, 224, 0.08);
}
.wa-thread__appt-icon {
    width: 13px; height: 13px;
    fill: var(--success);
    flex-shrink: 0;
}
.wa-thread__msg--in .wa-thread__appt-icon { fill: var(--primary); }
.wa-thread__appt-meta {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
}
:root[data-theme='dark'] .wa-thread__appt-chip { background: rgba(77, 184, 138, 0.12); }
:root[data-theme='dark'] .wa-thread__appt-chip:hover { background: rgba(77, 184, 138, 0.20); }

.wa-thread__msg-meta {
    position: absolute;
    right: 8px; bottom: 4px;
    display: inline-flex; align-items: center; gap: 3px;
    font-size: 10.5px;
    color: rgba(0, 0, 0, 0.45);
    line-height: 1;
}
:root[data-theme='dark'] .wa-thread__msg-meta { color: rgba(255, 255, 255, 0.45); }

.wa-thread__msg--out .wa-thread__msg-meta { color: rgba(0, 80, 40, 0.55); }
:root[data-theme='dark'] .wa-thread__msg--out .wa-thread__msg-meta { color: rgba(180, 220, 195, 0.65); }

.wa-thread__check {
    width: 14px; height: 14px;
    fill: currentColor;
}
.wa-thread__check--double { width: 16px; }
.wa-thread__check--read {
    color: #34B7F1;
    fill: currentColor;
}
.wa-thread__status--failed {
    display: inline-flex; align-items: center; justify-content: center;
    width: 13px; height: 13px;
    border-radius: 50%;
    background: var(--danger-solid);
    color: var(--text-on-solid);
    font-size: 9px;
    font-weight: 700;
    line-height: 1;
}

.wa-thread__msg-type-badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 6px;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.06);
    font-size: 11.5px;
    font-weight: 500;
    color: var(--text-secondary);
}
:root[data-theme='dark'] .wa-thread__msg-type-badge { background: rgba(255, 255, 255, 0.08); }

.wa-thread__empty {
    padding: 32px 16px;
    text-align: center;
    color: var(--muted);
    font-size: 13px;
}

/* Reply form */
.wa-reply {
    display: flex; flex-direction: column;
    gap: 8px;
    padding: 10px 12px;
    background: var(--panel-soft);
    border: 1px solid var(--line);
    border-radius: 10px;
}
.wa-reply__window-hint {
    font-size: 11.5px;
    color: var(--muted);
    margin: 0;
}
.wa-reply__row {
    display: flex; gap: 8px; align-items: flex-end;
}
.wa-reply__textarea {
    flex: 1;
    min-height: 40px;
    max-height: 140px;
    padding: 8px 12px;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: var(--panel);
    color: var(--text);
    font-family: inherit;
    font-size: 14px;
    line-height: 1.35;
    resize: none;
}
.wa-reply__textarea:focus {
    outline: none;
    border-color: var(--success);
    box-shadow: 0 0 0 2px rgba(26, 138, 94, 0.12);
}
.wa-reply__send {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px;
    border-radius: 50%;
    border: 0;
    background: var(--success-solid);
    color: var(--text-on-solid);
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s ease;
}
.wa-reply__send:hover:not(:disabled) { background: var(--success); }
.wa-reply__send:disabled { opacity: 0.55; cursor: not-allowed; }
.wa-reply__send svg { width: 18px; height: 18px; fill: currentColor; }
.wa-reply__status {
    font-size: 11.5px;
    color: var(--muted);
    min-height: 14px;
}
.wa-reply__status--error { color: var(--danger, #C4463A); }
.wa-reply__closed {
    padding: 12px;
    background: var(--panel-soft);
    border: 1px dashed var(--line);
    border-radius: 10px;
    font-size: 12.5px;
    color: var(--muted);
    margin: 0;
}

@media (max-width: 600px) {
    .wa-thread__msg { max-width: 85%; }
    .wa-thread { max-height: 480px; }
}

/* ── WhatsApp inbox: conversation list ────────────────────────────────────
   Landing view for /notificari/whatsapp. A vertical list of contacts (not a
   data table) reusing the chat module's circular hue avatars for continuity
   with the thread view. Unread conversations sort to the top (see
   WhatsAppMessageRepository::findConversationsForCompany) and get a green
   left-accent + tint so the eye lands on them first. Each whole row is an
   <a>, so it reads as clickable: pointer cursor, hover lift, and a chevron
   that nudges right on hover. */
.wa-inbox-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 12px; flex-wrap: wrap;
}
.wa-inbox-head h3 { margin: 0; }
.wa-inbox-head > div > .u-muted { margin: 2px 0 0; }
.wa-inbox-head__unread {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 4px 11px;
    border-radius: 999px;
    background: var(--success-bg);
    color: var(--success);
    font-size: 12px; font-weight: 600; white-space: nowrap;
}
.wa-inbox-head__dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--success); flex-shrink: 0;
}
.wa-inbox-head__clear { font-size: 12px; color: var(--muted); white-space: nowrap; }

.wa-inbox { display: flex; flex-direction: column; }

.wa-inbox__item {
    display: flex; align-items: center; gap: 12px;
    padding: 11px 12px;
    border-radius: 8px;
    border-left: 3px solid transparent;
    text-decoration: none;
    color: var(--text);
    cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease;
}
.wa-inbox__item + .wa-inbox__item { border-top: 1px solid var(--line-soft); }
.wa-inbox__item:hover { background: var(--panel-hover); }
.wa-inbox__item:focus-visible {
    outline: none;
    background: var(--panel-hover);
    box-shadow: inset 0 0 0 2px var(--primary-ghost);
}
/* Consecutive unread rows drop their divider so the tinted block reads as one
   surface; the divider returns where the unread group meets the read rows. */
.wa-inbox__item--unread + .wa-inbox__item--unread { border-top-color: transparent; }
.wa-inbox__item--unread {
    border-left-color: var(--success);
    background: var(--success-bg);
}
.wa-inbox__item--unread:hover { background: var(--success-bg); filter: brightness(0.97); }

.wa-inbox__avatar--unknown { background: var(--muted); }
.wa-inbox__avatar--unknown svg { width: 19px; height: 19px; fill: var(--text-on-solid); }

.wa-inbox__main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.wa-inbox__row { display: flex; align-items: center; gap: 8px; min-width: 0; }

.wa-inbox__name {
    flex: 0 1 auto; min-width: 0;
    font-size: 14px; font-weight: 600; color: var(--text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wa-inbox__item--unread .wa-inbox__name { font-weight: 700; }
.wa-inbox__name--unknown { color: var(--muted); font-weight: 500; }

.wa-inbox__phone {
    flex-shrink: 0;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px; color: var(--muted); font-weight: 400;
}
.wa-inbox__time {
    flex: 1 0 auto; text-align: right;
    font-size: 11.5px; color: var(--muted);
    font-variant-numeric: tabular-nums; white-space: nowrap;
}
.wa-inbox__item--unread .wa-inbox__time { color: var(--success); font-weight: 600; }

.wa-inbox__preview {
    flex: 1 1 auto; min-width: 0;
    font-size: 13px; color: var(--muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wa-inbox__item--unread .wa-inbox__preview { color: var(--text-secondary); }
.wa-inbox__sent { color: var(--muted); font-weight: 500; }
/* "Marcat necitit de …" — set by the WhatsApp inbox mark-unread action. */
.wa-inbox__marked-unread {
    font-size: 12px; font-weight: 500; color: var(--primary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.wa-inbox__count {
    flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 20px; height: 20px; padding: 0 6px;
    border-radius: 999px;
    background: var(--success-solid); color: var(--text-on-solid);
    font-size: 11.5px; font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.wa-inbox__chevron {
    flex-shrink: 0; width: 16px; height: 16px;
    color: var(--muted); opacity: 0.45;
    transition: transform 0.12s ease, opacity 0.12s ease;
}
.wa-inbox__chevron svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.wa-inbox__item:hover .wa-inbox__chevron { opacity: 1; transform: translateX(2px); }

@media (max-width: 600px) {
    .wa-inbox__phone { display: none; }
    .wa-inbox__item { gap: 10px; padding: 10px 8px; }
}

/* ── Necesar de comandă pe furnizor (reorder-by-supplier report) ──────────
   One card per supplier (a separable order sheet). The cards sit as siblings
   of the page panels — no panel-in-panel nesting. Left amber accent reads
   "needs attention / action" per the design system. */
.reorder-board__intro {
    margin: 0;
    font-size: 0.9rem;
}
.reorder-card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius-lg);
    padding: 0.9rem 1rem;
}
.reorder-card--muted {
    border-left-color: var(--muted);
}
.reorder-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.75rem;
}
.reorder-card__name {
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.2;
}
.reorder-card__sub {
    margin-top: 0.2rem;
    font-size: 0.82rem;
}
.reorder-card__sub .mono {
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.9em;
}
.reorder-card__total {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    text-align: right;
    white-space: nowrap;
}
.reorder-card__total-value {
    font-size: 1.15rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}
.reorder-card__total-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted);
}
.reorder-table {
    margin: 0;
}
.reorder-table th.num,
.reorder-table td.num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.reorder-table td.reorder-table__order {
    font-weight: 700;
    color: var(--accent-strong);
}
/* Secondary subunit equivalent under the primary purchasing-unit figure
   (e.g. "18,17 lei/pipetă" beneath "54,50 lei/BUC"). Muted + smaller so the
   box figure stays the one the eye lands on. */
.reorder-table .reorder-subunit {
    display: block;
    font-weight: 400;
    font-size: 0.78rem;
    line-height: 1.25;
    color: var(--muted);
}
.reorder-table td.reorder-table__value {
    font-weight: 600;
}
.reorder-table tfoot td {
    font-weight: 600;
    border-top: 2px solid var(--line);
}
.reorder-board__grand {
    display: flex;
    align-items: baseline;
    justify-content: flex-end;
    gap: 0.5rem;
    margin: 0;
    padding-top: 0.4rem;
    font-size: 0.95rem;
}
.reorder-board__grand strong {
    font-size: 1.15rem;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 640px) {
    .reorder-card__head {
        flex-direction: column;
        gap: 0.4rem;
    }
    .reorder-card__total {
        text-align: left;
        align-items: flex-start;
    }
    .reorder-board__grand {
        justify-content: flex-start;
        flex-wrap: wrap;
    }
}

/* ── In-app guide (/ghid) ────────────────────────────────────────────────
   Module-by-module tutorial. Cards are navigation entry points (one surface
   each — no nested panels), themed via the shared tokens so light/dark follow
   automatically. */
.guide__lead {
    max-width: 60ch;
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.55;
}

.guide__toc {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.guide__toc-link {
    display: inline-flex;
    align-items: center;
    padding: 0.3rem 0.7rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--panel);
    color: var(--text-secondary);
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.guide__toc-link:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--primary-ghost);
}

.guide__group {
    display: grid;
    gap: 0.9rem;
    scroll-margin-top: 1rem;
}

.guide__group-head h3 {
    margin: 0 0 0.15rem;
    font-size: 1.05rem;
}

.guide__group-head p {
    margin: 0;
    max-width: 70ch;
    font-size: 0.875rem;
}

.guide__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 0.9rem;
}

.guide-card {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 1rem 1.05rem 1.1rem;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow);
}

.guide-card__head {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.guide-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: var(--radius-md);
    background: var(--panel-soft);
    font-size: 1.15rem;
    line-height: 1;
    flex: none;
}

.guide-card__title {
    margin: 0;
    font-size: 0.98rem;
    font-weight: 600;
}

.guide-card__summary {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.875rem;
    line-height: 1.5;
}

.guide-card__steps {
    margin: 0;
    padding-left: 1.15rem;
    display: grid;
    gap: 0.3rem;
    color: var(--text);
    font-size: 0.85rem;
    line-height: 1.45;
}

.guide-card__steps li::marker {
    color: var(--muted);
    font-weight: 600;
}

.guide-card__cta {
    margin-top: auto;
    align-self: flex-start;
}

/* ── Guided feature tour (guided_tour_controller.js) ─────────────────────────
   Popup-by-popup walkthrough that runs when a module is opened from /ghid.
   A transparent backdrop blocks interaction; the spotlight box dims the rest of
   the page via a huge box-shadow, leaving the target element highlighted with a
   primary ring; the popover carries the copy. Sits above modals/dropdowns. */
.guided-tour {
    position: fixed;
    inset: 0;
    z-index: 12000;
    pointer-events: none; /* children opt back in */
}

.guided-tour__backdrop {
    position: absolute;
    inset: 0;
    background: transparent; /* dimming comes from the spotlight cutout */
    pointer-events: auto;    /* block clicks on the page during the tour */
}

.guided-tour__spotlight {
    position: fixed;
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    border-radius: var(--radius-md);
    pointer-events: none;
    box-shadow:
        0 0 0 3px var(--primary),
        0 0 0 9999px rgba(15, 23, 42, 0.55);
    transition: left 0.25s ease, top 0.25s ease, width 0.25s ease, height 0.25s ease;
}

/* Centered intro/outro cards have no target: hide the spotlight and let the
   backdrop provide the dim instead. */
.guided-tour--centered .guided-tour__spotlight {
    display: none;
}

.guided-tour--centered .guided-tour__backdrop {
    background: rgba(15, 23, 42, 0.55);
}

.guided-tour__popover {
    position: fixed;
    left: 0;
    top: 0;
    width: 360px;
    max-width: calc(100vw - 24px);
    padding: 1.1rem 1.15rem 1rem;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: 0 12px 36px rgba(15, 23, 42, 0.28);
    pointer-events: auto;
    transition: left 0.2s ease, top 0.2s ease;
}

.guided-tour__close {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    border: none;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--muted);
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.guided-tour__close:hover {
    background: var(--panel-soft);
    color: var(--text);
}

.guided-tour__counter {
    margin: 0 0 0.25rem;
    color: var(--primary);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.guided-tour__title {
    margin: 0 0 0.35rem;
    padding-right: 1.5rem; /* clear the close button */
    font-size: 1.02rem;
    font-weight: 600;
}

.guided-tour__body {
    margin: 0 0 0.9rem;
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.55;
}

.guided-tour__actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
}

.guided-tour__nav {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-left: auto;
}

@media (max-width: 600px) {
    .guided-tour__popover {
        width: calc(100vw - 24px);
    }
}

/* Company registration — ANAF CUI lookup (company_cui_lookup_controller.js) */
.anaf-lookup {
    margin-bottom: 1.1rem;
}

.anaf-lookup__row {
    display: flex;
    gap: 0.5rem;
    align-items: stretch;
}

.anaf-lookup__row input {
    flex: 1 1 auto;
    min-width: 0;
}

.anaf-lookup__row .btn {
    flex: 0 0 auto;
    white-space: nowrap;
}

.anaf-lookup__status {
    display: block;
    margin-top: 0.35rem;
    min-height: 1em;
    font-size: 0.72rem;
}

/* ---------------------------------------------------------------------------
   Audit trail (Istoric modificari) — per-field diff disclosure
   --------------------------------------------------------------------------- */

.audit-changes summary {
    cursor: pointer;
    color: var(--primary);
    font-size: 0.84rem;
    font-weight: 600;
    user-select: none;
}

.audit-changes[open] summary {
    margin-bottom: 0.35rem;
}

.audit-changes__list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.3rem;
    font-size: 0.84rem;
    max-width: 34rem;
}

.audit-changes__list li {
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.audit-changes__from {
    color: var(--muted);
    text-decoration: line-through;
}

.audit-changes__arrow {
    color: var(--muted);
    margin: 0 0.15rem;
}

.audit-changes__to {
    color: var(--text);
    font-weight: 600;
}

.audit-changes__added {
    color: var(--success);
    margin-right: 0.5rem;
}

.audit-changes__removed {
    color: var(--danger);
}

.audit-revisions {
    display: inline-block;
    margin-left: 0.4rem;
    font-size: 0.72rem;
    color: var(--muted);
    white-space: nowrap;
}

/* ---------------------------------------------------------------------------
   Activitate utilizatori (admin) — sign-in roll-up + per-session timeline
   --------------------------------------------------------------------------- */

.user-activity__sub {
    margin: 0.15rem 0 0;
    font-size: 0.8rem;
    line-height: 1.35;
}

.user-activity__mono {
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.78rem;
    overflow-wrap: anywhere;
}

.user-activity__time {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    color: var(--text-secondary);
}

.user-activity__heading-note {
    font-weight: 400;
    font-size: 0.85rem;
}

.table--user-activity-timeline td {
    vertical-align: top;
}

.table--user-activity-timeline .audit-changes {
    margin-top: 0.25rem;
}

/* A request that ended in 4xx/5xx: the row itself carries the signal, the
   HTTP badge in the details column says which. */
.table tbody tr.user-activity__row--error td {
    background: var(--danger-bg);
}

/* ============================================================
   Preturi analize — lab price-list library + in-app PDF search
   ============================================================ */
.lab-search {
    display: flex;
    gap: 0.75rem;
    align-items: flex-end;
    flex-wrap: wrap;
}
.lab-search__field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    flex: 1 1 320px;
}
.lab-search__label {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-secondary);
}
.lab-search input[type="search"] { width: 100%; }
.lab-search__actions { display: flex; gap: 0.5rem; }

.lab-library__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}
.lab-library__head h3 { margin: 0; }
.lab-library__filter label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.lab-table-wrap { overflow-x: auto; }
.lab-file { font-size: 0.72rem; word-break: break-all; }

.lab-results { display: flex; flex-direction: column; }
.lab-results__count { margin: 0 0 0.25rem; }
.lab-result {
    padding: 0.85rem 0 0.85rem 0.9rem;
    border-left: 2.5px solid var(--accent);
    border-top: 1px solid var(--line-soft);
}
.lab-result:first-child { border-top: none; }
.lab-result__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
}
.lab-result__title { margin: 0; font-size: 0.95rem; }
.lab-price-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.86rem;
    margin-top: 0.35rem;
}
.lab-price-table thead th {
    text-align: left;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
    color: var(--muted);
    padding: 0.2rem 0.6rem;
    border-bottom: 1px solid var(--line);
}
.lab-price-table td {
    padding: 0.32rem 0.6rem;
    border-bottom: 1px solid var(--line-soft);
    vertical-align: top;
}
.lab-price-table tbody tr:last-child td { border-bottom: none; }
.lab-price-table tbody tr:hover td { background: var(--panel-soft, var(--bg-shell)); }
.lab-price-table__name { word-break: break-word; }
.lab-price-table__price {
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}
.lab-price-table__pag { text-align: right; white-space: nowrap; }
.lab-price-table__pag a { color: var(--link); font-size: 0.78rem; }
.lab-result mark {
    background: var(--primary-ghost);
    color: var(--text);
    padding: 0 2px;
    border-radius: 3px;
    font-weight: 600;
}
.lab-hint { font-size: 0.72rem; }
.lab-empty { padding: 0.5rem 0; }

/* ---------------------------------------------------------------------------
   Dose calculator module (components/_dose_calculator.html.twig)
   --------------------------------------------------------------------------- */
.dose-calc {
    display: grid;
    gap: 0.75rem;
}
.dose-calc__title {
    margin: 0;
}
.dose-calc__grid {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.dose-calc__grid--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 900px) {
    .dose-calc__grid,
    .dose-calc__grid--4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 600px) {
    .dose-calc__grid,
    .dose-calc__grid--4 {
        grid-template-columns: 1fr;
    }
}
.dose-calc__field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.dose-calc__label {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-secondary);
}
.dose-calc__hint {
    font-size: 0.78rem;
    color: var(--muted, #8694A7);
}
.dose-calc__results {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    align-items: baseline;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--line-soft, #EDF0F4);
    border-radius: 6px;
    background: var(--bg-shell, #F7F8FA);
    font-variant-numeric: tabular-nums;
}
.dose-calc__results strong {
    font-size: 1.05rem;
}
.dose-calc__interval {
    color: var(--text-secondary);
    font-size: 0.85rem;
}
.dose-calc__warning {
    margin: 0;
    padding: 0.45rem 0.7rem;
    border-left: 3px solid var(--danger, #C4463A);
    background: var(--danger-bg, #FDEDEB);
    color: var(--danger, #C4463A);
    font-size: 0.85rem;
    border-radius: 0 6px 6px 0;
}
.dose-calc__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}
.dose-calc__status {
    font-size: 0.82rem;
}
.dose-calc__ai-text {
    padding: 0.6rem 0.75rem;
    border-left: 3px solid var(--accent, #D98B3A);
    background: var(--accent-ghost, rgba(217, 139, 58, 0.08));
    border-radius: 0 6px 6px 0;
    font-size: 0.88rem;
    white-space: pre-wrap;
}
.dose-calc__disclaimer {
    font-size: 0.72rem;
    margin: 0;
}

/* Topbar quick link + popup for the dose calculator
   (components/_dose_calculator_topbar.html.twig). Rendered in the
   page-title row, inline with the heading — a link, not a button. */
.dose-calc-topbar {
    display: inline-flex;
    align-items: center;
}
.dose-calc-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border: 0;
    background: none;
    padding: 0.35rem 0.5rem;
    font: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-secondary, #4A5568);
    cursor: pointer;
    border-radius: 6px;
}
.dose-calc-link:hover {
    color: var(--primary, #2968E0);
    background: var(--primary-ghost, rgba(41, 104, 224, 0.08));
}
.dose-calc-modal {
    border: 1px solid var(--line, #E2E7EE);
    border-radius: 8px;
    padding: 0;
    width: min(92vw, 54rem);
    font-family: inherit;
    color: var(--text, #1C2433);
    background: var(--panel, #FFFFFF);
}
.dose-calc-modal::backdrop {
    background: rgba(25, 37, 58, 0.42);
}
.dose-calc-modal__inner {
    display: grid;
    gap: 0.75rem;
    padding: 1rem 1.2rem 1.2rem;
}
.dose-calc-modal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
}
.dose-calc-modal__head h3 {
    margin: 0;
    font-size: 1.05rem;
}
.dose-calc-modal__close {
    border: 0;
    background: none;
    color: var(--muted, #8694A7);
    font-size: 1.4rem;
    line-height: 1;
    padding: 0.15rem 0.35rem;
    cursor: pointer;
    border-radius: 6px;
}
.dose-calc-modal__close:hover {
    color: var(--text, #1C2433);
    background: var(--bg-shell, #F7F8FA);
}

/* Dose input + unit select side by side */
.dose-calc__pair {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.35rem;
}

/* Guide info strip for the selected formulary substance */
.dose-calc__guide {
    display: grid;
    gap: 0.2rem;
    padding: 0.5rem 0.75rem;
    border-left: 3px solid var(--info, #2E6DA4);
    background: var(--info-bg, #E8F0FA);
    border-radius: 0 6px 6px 0;
}
.dose-calc__guide-main {
    margin: 0;
    font-size: 0.88rem;
    font-weight: 600;
}
.dose-calc__guide-note {
    margin: 0;
    font-size: 0.8rem;
}

/* Manual / edit panel separated from the guided flow */
.dose-calc__manual {
    display: grid;
    gap: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--line-soft, #EDF0F4);
}

/* Pet / client name links — markup lives in templates/components/_entity_links.html.twig.
   Uses the global --link tokens so they stay legible in both themes; the repeated class
   is the documented trick for beating .panel a:not(.btn):not(.table-sort) (0,3,1), which
   hardcodes a light-mode blue. No font-weight here: the surrounding .panel a / .table a
   rules and call-site <strong> wrappers keep deciding that. */
a.entity-link.entity-link.entity-link,
a.entity-link.entity-link.entity-link:visited {
    color: var(--link);
    text-decoration: none;
}

a.entity-link.entity-link.entity-link:hover,
a.entity-link.entity-link.entity-link:focus-visible {
    color: var(--link-hover);
    text-decoration: none;
}

/* ==========================================================================
   Internare — ward board
   ==========================================================================
   The board is the module: squares first, chrome as close to zero as it can
   get. Analytics live in a single strip that doubles as the legend AND the
   filter, so the first cage sits directly under the topbar.

   Tile colour is carried by a 3px left border (the same badge language used
   everywhere else in the app — see DESIGN.md, "left-border badges over pills").
   Nothing here sets colour by hand: every state class is emitted from
   App\Hospitalization\CageTile::$state. */

.cage-board {
    position: relative;
}

/* --- strip: counters + legend + filter, one row ------------------------- */
.cage-strip {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.cage-stat {
    display: inline-flex;
    align-items: baseline;
    gap: 0.375rem;
    font: 500 0.8rem/1.35 inherit;
    color: var(--text-secondary);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 0.4rem;
    padding: 0.3rem 0.55rem;
    cursor: pointer;
    white-space: nowrap;
    transition: background 100ms ease, border-color 100ms ease;
}

.cage-stat:hover {
    background: var(--panel-hover);
    border-color: var(--line);
}

.cage-stat.is-active {
    background: var(--panel);
    border-color: var(--line);
    color: var(--text);
}

.cage-stat b {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--text);
    letter-spacing: -0.01em;
}

/* The dot IS the legend entry for that state — that is why the strip has no
   separate legend row. */
.cage-stat i {
    width: 8px;
    height: 8px;
    border-radius: 2px;
    flex: none;
    align-self: center;
}

.cage-stat--occupied i { background: var(--primary); }
.cage-stat--free i { background: transparent; border: 1px dashed var(--muted); }
.cage-stat--due i { background: var(--warning); }
.cage-stat--critical i { background: var(--danger); }
.cage-stat--discharge i { background: var(--accent); }

.cage-strip__sep {
    width: 1px;
    height: 18px;
    background: var(--line);
    margin: 0 0.25rem;
}

.cage-strip__spacer {
    flex: 1;
}

.cage-strip__occupancy {
    font-size: 0.8rem;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.cage-strip__occupancy b {
    color: var(--text);
    font-weight: 700;
}

/* --- zones -------------------------------------------------------------- */
.cage-zone {
    margin-bottom: 1.625rem;
}

.cage-zone[hidden] {
    display: none;
}

.cage-zone__head {
    display: flex;
    align-items: baseline;
    gap: 0.625rem;
    margin: 0 0 0.625rem;
}

.cage-zone__head h4 {
    margin: 0;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.cage-zone__meta {
    font-size: 0.72rem;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

.cage-zone__rule {
    flex: 1;
    height: 1px;
    background: var(--line);
}

/* --- tiles -------------------------------------------------------------- */
.cage-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(192px, 1fr));
    gap: 0.875rem;
}

.cage {
    position: relative;
    aspect-ratio: 1 / 1;
    background: var(--panel);
    border: 1px solid var(--line);
    border-left: 3px solid var(--muted);
    border-radius: var(--radius-lg);
    padding: 0.625rem 0.7rem;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: var(--text);
    transition: background 100ms ease;
}

.cage[hidden] {
    display: none;
}

.cage:hover {
    background: var(--panel-hover);
}

/* Beat `.panel a:not(.btn):not(.table-sort)`, which hardcodes a light-mode
   link blue — the tile is a link but must read as a surface, not as text. */
.cage.cage.cage,
.cage.cage.cage:visited,
.cage.cage.cage:hover {
    color: var(--text);
    text-decoration: none;
}

.cage__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.375rem;
    margin-bottom: auto;
}

.cage__code {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--text-secondary);
    letter-spacing: 0.02em;
}

.cage__size {
    font-size: 0.625rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
    font-weight: 600;
    border: 1px solid var(--line);
    border-radius: 3px;
    padding: 1px 5px;
}

.cage__body {
    display: block;
    margin: 0.375rem 0 auto;
    min-width: 0;
}

.cage__pet {
    display: block;
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.015em;
}

.cage__sub {
    display: block;
    font-size: 0.72rem;
    color: var(--muted);
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cage__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.375rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--line-soft);
    margin-top: 0.5rem;
}

.cage__day {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}

.cage__who {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--primary-ghost);
    color: var(--primary);
    font-size: 0.625rem;
    font-weight: 700;
    display: grid;
    place-items: center;
    flex: none;
}

/* Corner badges: what has to be readable from across the room. */
.cage__flags {
    display: flex;
    gap: 4px;
    position: absolute;
    top: 0.55rem;
    right: 0.625rem;
}

.cage__flag {
    font-size: 0.66rem;
    font-weight: 600;
    line-height: 1;
    padding: 3px 5px;
    border-radius: 3px;
    border-left: 2.5px solid;
}

.cage__flag--now {
    background: var(--warning-bg);
    color: var(--warning);
    border-color: var(--warning);
}

/* The next scheduled dose. Deliberately quieter than --now: it is information,
   not a call to act, and must not read as an alarm from across the room. */
.cage__flag--time {
    background: var(--panel-soft);
    color: var(--text-secondary);
    border-color: var(--line);
}

.cage__flag--o2 {
    background: var(--info-bg);
    color: var(--info);
    border-color: var(--info);
}

.cage__flag--alert {
    background: var(--danger-bg);
    color: var(--danger);
    border-color: var(--danger);
}

/* Today's treatment sheet in one line: filled = administered. */
.cage__bar {
    display: block;
    height: 3px;
    border-radius: 2px;
    background: var(--line-soft);
    overflow: hidden;
    margin-top: 0.5rem;
}

.cage__bar i {
    display: block;
    height: 100%;
    background: var(--success);
}

.cage__bar.is-late i {
    background: var(--warning);
}

.cage--stable { border-left-color: var(--primary); }
.cage--due { border-left-color: var(--warning); }
.cage--critical { border-left-color: var(--danger); }
.cage--discharge-today { border-left-color: var(--accent); }

/* Empty squares are an action, not decoration. */
.cage--free,
.cage--blocked {
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--muted);
    border: 1px dashed var(--line);
    background: transparent;
}

.cage--free:hover {
    border-color: var(--primary);
    background: var(--primary-ghost);
}

.cage--free:hover .cage__free-label,
.cage--free:hover .cage__plus {
    color: var(--primary);
}

.cage--free .cage__plus {
    font-size: 1.375rem;
    line-height: 1;
    color: var(--muted);
}

.cage--free .cage__free-label,
.cage--blocked .cage__free-label {
    font-size: 0.75rem;
    font-weight: 600;
    margin-top: 0.25rem;
}

.cage--free .cage__code,
.cage--blocked .cage__code {
    position: absolute;
    top: 0.625rem;
    left: 0.7rem;
}

.cage--blocked {
    background: repeating-linear-gradient(
        135deg,
        transparent,
        transparent 7px,
        var(--line-soft) 7px,
        var(--line-soft) 14px
    );
    cursor: default;
}

/* --- drawer ------------------------------------------------------------- */
.cage-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(30rem, 100vw);
    background: var(--panel);
    border-left: 1px solid var(--line);
    box-shadow: var(--shadow);
    z-index: 60;
    overflow-y: auto;
}

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

.cage-drawer__scrim {
    position: fixed;
    inset: 0;
    background: rgba(28, 36, 51, 0.35);
    z-index: 59;
}

.cage-drawer__scrim[hidden] {
    display: none;
}

.cage-drawer__loading {
    padding: 1.5rem;
    color: var(--muted);
}

/* --- stay panel (shared by the drawer and the full stay page) ----------- */
.stay-panel__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    border-bottom: 1px solid var(--line);
}

.stay-panel__head h3 {
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.stay-panel__sub {
    margin: 0.1875rem 0 0;
    font-size: 0.75rem;
    color: var(--muted);
}

.stay-panel__body {
    padding: 0.875rem 1rem;
}

.stay-badge {
    font-size: 0.72rem;
    font-weight: 600;
    padding: 4px 7px;
    border-radius: 3px;
    border-left: 2.5px solid;
    white-space: nowrap;
}

.stay-badge--open {
    background: var(--primary-ghost);
    color: var(--primary);
    border-color: var(--primary);
}

.stay-badge--critical {
    background: var(--danger-bg);
    color: var(--danger);
    border-color: var(--danger);
}

.stay-badge--closed {
    background: var(--success-bg);
    color: var(--success);
    border-color: var(--success);
}

.stay-dl {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.375rem 0.875rem;
    font-size: 0.85rem;
    margin: 0 0 0.875rem;
}

.stay-dl dt {
    color: var(--muted);
    font-size: 0.75rem;
    font-weight: 500;
    align-self: center;
}

.stay-dl dd {
    margin: 0;
    font-weight: 500;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.stay-section {
    font-size: 0.625rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--muted);
    font-weight: 600;
    margin: 1rem 0 0.5rem;
}

.stay-muted {
    color: var(--muted);
    font-size: 0.85rem;
    margin: 0 0 0.5rem;
}

.stay-note {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin: 0 0 0.875rem;
}

.stay-tasks {
    list-style: none;
    margin: 0 0 0.75rem;
    padding: 0;
}

.stay-task {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.4375rem 0;
    border-bottom: 1px solid var(--line-soft);
    font-size: 0.85rem;
}

.stay-task:last-child {
    border-bottom: 0;
}

.stay-task.is-done .stay-task__name {
    color: var(--muted);
}

.stay-task__time {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--text-secondary);
    min-width: 2.5rem;
}

.stay-task__name {
    flex: 1;
    min-width: 0;
}

/* Rendered as a <button> when the user may toggle it and a <span> otherwise —
   both must look identical, so the styling is on the class, not the element. */
.stay-task__state {
    font-size: 0.66rem;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 3px;
    border: 0;
    border-left: 2.5px solid;
    cursor: pointer;
    white-space: nowrap;
}

.stay-task__state--done {
    background: var(--success-bg);
    color: var(--success);
    border-color: var(--success);
}

.stay-task__state--due {
    background: var(--warning-bg);
    color: var(--warning);
    border-color: var(--warning);
}

.stay-task__state--next {
    background: var(--panel-soft);
    color: var(--muted);
    border-color: var(--line);
}

.stay-flag {
    font-size: 0.66rem;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 3px;
    border-left: 2.5px solid;
    margin-left: 0.25rem;
}

.stay-flag--o2 {
    background: var(--info-bg);
    color: var(--info);
    border-color: var(--info);
}

.stay-flag--alert {
    background: var(--danger-bg);
    color: var(--danger);
    border-color: var(--danger);
}

.stay-log {
    list-style: none;
    margin: 0 0 0.875rem;
    padding: 0;
    font-size: 0.8rem;
}

.stay-log li {
    display: flex;
    gap: 0.625rem;
    padding: 0.25rem 0;
    border-bottom: 1px solid var(--line-soft);
}

.stay-log__time {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 0.72rem;
    color: var(--muted);
    min-width: 4.5rem;
    flex: none;
}

.stay-log__text {
    color: var(--text-secondary);
}

/* Inline add-forms. No inner panel: per DESIGN.md a surface inside a surface is
   the pattern to avoid — a heading plus fields is enough. */
.stay-inline-form {
    border-top: 1px solid var(--line-soft);
    padding-top: 0.75rem;
    margin-bottom: 0.875rem;
    display: grid;
    gap: 0.5rem;
}

.stay-inline-form__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: 0.5rem;
}

.stay-panel__foot {
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--line);
    background: var(--bg-shell);
    display: grid;
    gap: 0.5rem;
}

.stay-action {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

/* enhanced-select swaps every <select> for a TomSelect .ts-wrapper, so sizing
   has to target the wrapper too — styling the bare <select> alone leaves the
   sibling input squeezed to a sliver. The notes field gets twice the growth of
   the outcome picker: the picker has a fixed vocabulary, the notes do not. */
.stay-action > select,
.stay-action > .ts-wrapper {
    flex: 1 1 8rem;
    min-width: 0;
}

.stay-action input[type='text'] {
    flex: 2 1 10rem;
    min-width: 0;
}

@media (max-width: 720px) {
    .cage-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    }

    .cage-strip__occupancy {
        display: none;
    }

    .cage-drawer {
        width: 100vw;
    }
}

/* --- Recenzii (primite + de trimis) ------------------------------------- */
/* Flat stat strip for the review summary. Deliberately surface-less: these
   numbers sit INSIDE the page's .panel, so giving each one a .kpi-card
   background would stack a surface on a surface (see CLAUDE.md). The markup
   carried these class names all along with no rules behind them, which is why
   the three figures used to render as a bare stacked list. */
.kpi-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1.1rem 2rem;
}

.kpi__label {
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
}

.kpi__value {
    margin-top: 0.2rem;
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    color: var(--text);
}

/* Footer of the fetched consultation preview card: the escape hatches out of
   the preview into the full record. Separated by a rule so it doesn't read as
   another content section. */
.consultation-preview-card__footer {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.9rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--line);
}

.consultation-preview-card__loading {
    margin: 0;
    color: var(--muted);
    font-size: 0.85rem;
}

/* Star ratings and the secondary meta line inside review grids. Uses the
   warning token for the filled stars so both themes stay legible instead of
   the hardcoded amber these cells used to carry inline. */
.review-stars {
    color: var(--warning, #b8860b);
    letter-spacing: 2px;
}

.review-stars--empty {
    color: var(--line, #e2e7ee);
}

.review-cell__meta {
    font-size: 0.72rem;
}

.review-cell__comment {
    max-width: 360px;
}

.review-cell__comment-text {
    white-space: pre-wrap;
}

/* ── Abonamente (pet page) ─────────────────────────────────────────────
   A sold subscription is a separable entity, so it gets its own bordered
   surface — but it lives inside the pet-view panel, so it stays a flat
   outlined block rather than a second card with its own elevation. */
.pet-subscription-add {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.6rem;
    margin-bottom: 1.1rem;
}

.pet-subscription-add__field {
    display: grid;
    gap: 0.25rem;
    min-width: 10rem;
    flex: 1 1 10rem;
}

.pet-subscription-add__field--wide {
    flex: 2 1 16rem;
}

.pet-subscription-add__field > span {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--muted);
    letter-spacing: 0.02em;
}

.pet-subscription {
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: 0.9rem 1rem;
    display: grid;
    gap: 0.65rem;
}

.pet-subscription--inactive {
    opacity: 0.72;
}

.pet-subscription__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
}

.pet-subscription__title {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: wrap;
}

.pet-subscription__meta,
.pet-subscription__line-stamp {
    font-size: 0.78rem;
    color: var(--muted);
}

.pet-subscription__meta {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.pet-subscription__price {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.6rem;
    font-variant-numeric: tabular-nums;
}

.pet-subscription__price-paid {
    font-weight: 700;
    font-size: 1.05rem;
}

.pet-subscription__price-ref {
    font-size: 0.8rem;
    color: var(--muted);
    text-decoration: line-through;
}

.pet-subscription__savings {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--success);
}

.pet-subscription__note {
    margin: 0;
    font-size: 0.85rem;
    color: var(--text-secondary, var(--muted));
}

.pet-subscription__group {
    margin: 0.2rem 0 0;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
}

.pet-subscription__lines {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.15rem;
}

.pet-subscription__line {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.4rem 0;
    border-bottom: 1px solid var(--line-soft, var(--line));
}

.pet-subscription__line:last-child {
    border-bottom: 0;
}

.pet-subscription__line-mark {
    flex: 0 0 auto;
    width: 1.15rem;
    text-align: center;
    color: var(--muted);
}

.pet-subscription__line.is-resolved .pet-subscription__line-mark {
    color: var(--success);
    font-weight: 700;
}

.pet-subscription__line-text {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem;
}

.pet-subscription__line.is-resolved .pet-subscription__line-text {
    color: var(--muted);
}

.pet-subscription__admin > summary {
    cursor: pointer;
    font-size: 0.8rem;
    color: var(--muted);
}

.pet-subscription__admin-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* ── Abonament benefits on the bon ─────────────────────────────────────
   Sits between the owner picker and the lines: what this client is
   entitled to, one click away from being applied. */
.sale-benefits__title {
    margin: 0 0 0.5rem;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
}

.sale-benefits__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.35rem;
}

.sale-benefits__item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.sale-benefits__percent {
    flex: 0 0 auto;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--success);
}

.sale-benefits__text {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.4rem;
}

.sale-benefits__manual {
    font-size: 0.78rem;
}

/* Conversie notificari preventie. Mirrors the .ovr-* overdue-reminders widget
   in the same Preventie group — same KPI row, chart, actionable list.
   Prefix pcv- because rc- is already the returning-clients widget. */
.pcv-widget { display: flex; flex-direction: column; gap: 14px; }
.pcv-widget__head { display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-start; }
.pcv-widget__kpi { flex: 1; min-width: 110px; display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border-radius: 8px; background: rgba(148, 163, 184, 0.08); border: 1px solid transparent; }
.pcv-widget__kpi strong { font-size: 1.6rem; font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; }
.pcv-widget__kpi.is-rate strong { color: var(--primary); }
.pcv-widget__kpi.is-alert { background: rgba(239, 68, 68, 0.1); border-color: rgba(239, 68, 68, 0.35); }
.pcv-widget__kpi.is-alert strong { color: var(--danger-text); }
.pcv-widget__controls { display: flex; flex-direction: row; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.pcv-widget__pickers { display: contents; }
.pcv-widget__field { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 4px; font-size: 0.85rem; color: var(--text-secondary); }
.pcv-widget__field select { padding: 4px 10px; border-radius: var(--control-radius); border: 1px solid var(--line); background: var(--panel); color: var(--text); font-size: 0.85rem; }
.pcv-widget__field-label { font-size: 0.7rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.pcv-widget__chart { position: relative; width: 100%; height: 220px; }
.pcv-widget__list h4 { margin: 0 0 8px; font-size: 0.95rem; }
.pcv-widget__note { margin: 8px 0 0; font-size: 0.85rem; }
.pcv-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.pcv-list__head, .pcv-list__row { display: grid; grid-template-columns: minmax(110px, 1.2fr) minmax(120px, 1.5fr) minmax(110px, 1fr) minmax(100px, 0.9fr) minmax(110px, 1fr); gap: 10px; align-items: center; padding: 6px 0; }
.pcv-list__head { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); border-bottom: 1px solid var(--line); padding-bottom: 4px; }
.pcv-list__row { font-size: 0.9rem; border-bottom: 1px solid var(--line-soft); }
.pcv-list__row:last-child { border-bottom: none; }
.pcv-list__row a { color: inherit; text-decoration: none; }
.pcv-list__row a:hover { text-decoration: underline; }
@media (max-width: 900px) {
    .pcv-list__head { display: none; }
    .pcv-list__row { grid-template-columns: 1fr 1fr; }
}

/* Filtru "servicii prestate" + defalcarea pe serviciu din raportul Venituri pe medic.
   Rows overlap when a consultation carries several selected services, so the
   total row is visually separated from them. */
.dr-widget__services { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 220px; max-width: 340px; flex: 1 1 220px; }
.dr-widget__services select { width: 100%; }
.dr-services { display: flex; flex-direction: column; gap: 8px; }
.dr-services[hidden] { display: none; }
.dr-services h4 { margin: 0; font-size: 0.95rem; }
.dr-services__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.dr-services__detail summary::-webkit-details-marker { display: none; }
.dr-services__detail summary { list-style: none; cursor: pointer; position: relative; }
.dr-services__detail summary:hover strong { text-decoration: underline; }
/* Absolute, not a grid item: as a child of the grid `summary` the marker would
   occupy a fourth cell and shift every column across by one. */
.dr-services__detail summary::before { content: '\25B8'; position: absolute; left: 0; top: 0.55em; color: var(--muted); font-size: 0.7rem; line-height: 1; transition: transform 100ms ease; }
.dr-services__detail[open] summary::before { transform: rotate(90deg); }
.dr-bons { list-style: none; margin: 4px 0 10px 16px; padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; background: var(--bg-shell); border-radius: 6px; }
.dr-bons__row { display: grid; grid-template-columns: minmax(90px, 0.9fr) minmax(74px, auto) minmax(140px, 1.6fr) minmax(110px, 1fr) minmax(80px, auto); gap: 10px; align-items: baseline; font-size: 0.82rem; padding: 3px 0; }
.dr-bons__amount { text-align: right; font-variant-numeric: tabular-nums; }
.dr-bons__more { font-size: 0.78rem; padding-top: 4px; }
.dr-services__row { display: grid; grid-template-columns: minmax(140px, 2fr) minmax(80px, 1fr) minmax(110px, auto); gap: 10px; align-items: baseline; padding: 6px 0 6px 16px; border-bottom: 1px solid var(--line-soft); font-size: 0.9rem; }
.dr-services__row--total { border-bottom: none; border-top: 2px solid var(--line); margin-top: 4px; padding-top: 8px; }
.dr-services__amount { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.dr-services__note { margin: 0; font-size: 0.8rem; }
@media (max-width: 720px) {
    .dr-services__row { grid-template-columns: 1fr auto; }
    .dr-services__row .muted { grid-column: 1 / -1; }
    .dr-bons__row { grid-template-columns: 1fr auto; }
    .dr-bons__row .muted { grid-column: 1 / -1; }
}
/* ── Acte contabilitate: monthly bookkeeping package ─────────────────── */
/* Two controls only (month + build), so the button sits on the select's
   baseline instead of floating against the label above it. */
.acte-form {
    align-items: end;
}

/* Progress is real (one request per part), so the bar is determinate and
   the step list reports per-part outcome rather than a generic spinner. */
.acte-progress {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.acte-progress__bar {
    height: 6px;
    border-radius: 999px;
    background: var(--line-soft);
    overflow: hidden;
}

.acte-progress__fill {
    display: block;
    height: 100%;
    width: 0;
    border-radius: 999px;
    background: var(--primary);
    transition: width 200ms ease;
}

.acte-progress__label {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--muted);
}

.acte-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.acte-steps__item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.45rem 0;
    border-top: 1px solid var(--line-soft);
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.acte-steps__item:first-child {
    border-top: 0;
}

.acte-steps__marker {
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: transparent;
}

.acte-steps__item.is-running .acte-steps__marker {
    border-color: var(--primary);
    background: var(--primary-ghost);
}

.acte-steps__item.is-running .acte-steps__label {
    color: var(--text);
    font-weight: 500;
}

.acte-steps__item.is-done .acte-steps__marker {
    border-color: var(--success);
    background: var(--success);
}

.acte-steps__item.is-failed .acte-steps__marker {
    border-color: var(--danger);
    background: var(--danger);
}

.acte-notes {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

.acte-notes li {
    padding: 0.25rem 0;
    border-top: 1px solid var(--line-soft);
}

.acte-notes li:first-child {
    border-top: 0;
}

/* ─────────────────────────────────────────────────────────────────────────
   Propuneri functionalitati (/functionalitati) — the shared feature board.

   Everything here is built from the theme tokens, so light/dark follow the
   app automatically. Proposals render as flat rows inside the page panel
   rather than as nested cards (DESIGN.md: one surface per screen area); the
   only raised surfaces are the roadmap columns, which ARE the surface of
   that screen.
   ───────────────────────────────────────────────────────────────────────── */

.fr-intro {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.9rem;
    max-width: 78ch;
}

.fr-list {
    display: flex;
    flex-direction: column;
}

.fr-row {
    display: flex;
    gap: 0.9rem;
    align-items: flex-start;
    padding: 0.9rem 0;
    border-top: 1px solid var(--line-soft);
}

.fr-row:first-child {
    border-top: 0;
}

.fr-list--inline .fr-row {
    padding: 0.6rem 0;
}

.fr-row__body {
    flex: 1;
    min-width: 0;
}

.fr-row__title {
    margin: 0 0 0.2rem;
    font-size: 1rem;
    line-height: 1.3;
}

.fr-row__excerpt {
    margin: 0 0 0.45rem;
    color: var(--text-secondary);
    font-size: 0.875rem;
    line-height: 1.5;
}

.fr-row__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.7rem;
    font-size: 0.8rem;
}

/* Vote button — the one control that must read as pressable at a glance. */
.fr-vote {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.fr-vote__btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.05rem;
    min-width: 3.1rem;
    padding: 0.35rem 0.4rem;
    border: 1px solid var(--line);
    border-radius: var(--control-radius);
    background: var(--panel);
    color: var(--text-secondary);
    cursor: pointer;
    line-height: 1.1;
    transition: border-color 0.12s ease, color 0.12s ease, background 0.12s ease;
}

.fr-vote__btn:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.fr-vote__btn.is-active {
    border-color: var(--primary);
    background: var(--primary-ghost);
    color: var(--primary);
}

.fr-vote__btn[disabled] {
    opacity: 0.55;
    cursor: progress;
}

.fr-vote__arrow {
    font-size: 0.7rem;
}

.fr-vote__count {
    font-weight: 700;
    font-size: 0.95rem;
    font-variant-numeric: tabular-nums;
}

.fr-vote--lg .fr-vote__btn {
    min-width: 3.8rem;
    padding: 0.55rem 0.5rem;
}

.fr-vote--lg .fr-vote__count {
    font-size: 1.25rem;
}

.fr-vote__hint {
    font-size: 0.8rem;
}

/* Detail page */
.fr-detail__head {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.fr-detail__head .fr-vote {
    flex-direction: column;
    gap: 0.25rem;
}

.fr-detail__title {
    flex: 1;
    min-width: 0;
}

.fr-detail__title h2 {
    margin: 0 0 0.4rem;
}

.fr-detail__description {
    margin: 0;
    line-height: 1.6;
}

.fr-detail__official {
    margin: 0;
    padding: 0.7rem 0.85rem;
    border-left: 3px solid var(--primary);
    background: var(--primary-ghost);
    border-radius: 0 var(--control-radius) var(--control-radius) 0;
    line-height: 1.6;
}

/* Admin "who asked for it" fact list */
.fr-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 0.75rem 1.5rem;
    margin: 0;
}

.fr-facts dt {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted);
    margin-bottom: 0.15rem;
}

.fr-facts dd {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.9rem;
}

/* Comment thread */
.fr-thread {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.fr-thread__item {
    padding: 0.65rem 0.8rem;
    border: 1px solid var(--line-soft);
    border-radius: var(--control-radius);
}

.fr-thread__item.is-official {
    border-color: var(--primary);
    background: var(--primary-ghost);
}

.fr-thread__item header {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem;
    margin-bottom: 0.3rem;
    font-size: 0.82rem;
}

.fr-thread__item p {
    margin: 0;
    line-height: 1.55;
}

.fr-comment-form label {
    display: block;
}

/* Roadmap flow: one column per stage, left to right. */
.fr-flow {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.75rem;
    align-items: start;
}

.fr-flow__col {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.75rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface-soft);
    min-width: 0;
}

.fr-flow__head h3 {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin: 0 0 0.2rem;
    font-size: 0.9rem;
}

.fr-flow__count {
    margin-left: auto;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

.fr-flow__head p {
    margin: 0;
    font-size: 0.76rem;
    line-height: 1.4;
}

.fr-flow__items {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.fr-flow__item {
    display: block;
    padding: 0.5rem 0.6rem;
    border: 1px solid var(--line);
    border-radius: var(--control-radius);
    background: var(--panel);
    text-decoration: none;
}

.fr-flow__item:hover {
    border-color: var(--primary);
}

.fr-flow__item strong {
    display: block;
    font-size: 0.83rem;
    line-height: 1.35;
    margin-bottom: 0.25rem;
}

.fr-flow__item-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    font-size: 0.74rem;
    color: var(--muted);
}

.fr-flow__votes {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.fr-flow__votes.is-voted {
    color: var(--primary);
}

.fr-flow__empty,
.fr-flow__more {
    font-size: 0.78rem;
}

@media (max-width: 1200px) {
    .fr-flow {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .fr-flow {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .fr-flow {
        grid-template-columns: minmax(0, 1fr);
    }

    .fr-row,
    .fr-detail__head {
        gap: 0.6rem;
    }
}

/* ──────────────────────────────────────────────────────────────────────────
   Registre — regimul legal al fiecarui registru

   Every register page states which form the law admits for it (CMVB informare,
   Septembrie 2026, §2). Left-border rectangles per DESIGN.md, not pills: the
   status is carried by the border colour and the block sits inline above the
   grid rather than floating as a decorative tag.
   ────────────────────────────────────────────────────────────────────────── */
.registry-regime {
    border-left: 3px solid var(--info);
    background: var(--info-bg);
    padding: 0.7rem 0.9rem;
    border-radius: 0 var(--radius-sm, 4px) var(--radius-sm, 4px) 0;
    display: grid;
    gap: 0.3rem;
}

.registry-regime--ok { border-left-color: var(--success); background: var(--success-bg); }
.registry-regime--danger { border-left-color: var(--danger); background: var(--danger-bg); }
.registry-regime--muted { border-left-color: var(--muted); background: var(--surface-soft); }

.registry-regime__label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text);
}

.registry-regime__note { font-size: 0.82rem; color: var(--text-secondary); line-height: 1.5; }
.registry-regime__basis { font-size: 0.72rem; color: var(--muted); }

/* A voided register row: struck through, dimmed, with its reason underneath.
   Never removed — the register is append-only. */
.registry-row--voided td { color: var(--muted); text-decoration: line-through; }
.registry-row--voided .registry-void-note { text-decoration: none; }

.registry-void-note {
    display: block;
    margin-top: 0.2rem;
    font-size: 0.72rem;
    color: var(--danger);
    text-decoration: none;
}

/* Missed twice-daily readings. */
.registry-gaps { display: grid; gap: 0.45rem; }

.registry-gap {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.4rem;
    border-left: 2.5px solid var(--warning);
    background: var(--warning-bg);
    padding: 0.35rem 0.6rem;
    font-size: 0.82rem;
}

.registry-gap__date { font-weight: 700; color: var(--text); }
.registry-gap__missing { color: var(--warning); font-weight: 600; }

/* Out-of-range temperature / humidity reading. */
.registry-reading--out { color: var(--danger); font-weight: 700; }

/* Control dossier register picker. */
.dossier-registers { display: grid; gap: 0.5rem; }

.dossier-register {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.5rem 0.6rem;
    align-items: start;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--border, #DCE1E8);
    border-left-width: 2.5px;
    border-radius: 0 var(--radius-sm, 4px) var(--radius-sm, 4px) 0;
}

.dossier-register--danger { border-left-color: var(--danger); }
.dossier-register--ok { border-left-color: var(--success); }
.dossier-register--info { border-left-color: var(--info); }
.dossier-register--muted { border-left-color: var(--muted); }

.dossier-register__body { display: grid; gap: 0.15rem; }
.dossier-register__name { font-weight: 600; color: var(--text); }
.dossier-register__note { font-size: 0.78rem; color: var(--text-secondary); line-height: 1.45; }

/* "Motivul corecturii" on an audit row — the author's own words for why a
   register entry was corrected or retracted (CMVB informare, §10). */
.audit-reason {
    margin: 0.35rem 0 0;
    padding-left: 0.5rem;
    border-left: 2.5px solid var(--accent);
    font-size: 0.8rem;
    color: var(--text-secondary);
    line-height: 1.45;
}

/* ------------------------------------------------------------------------
   Harti anatomice (dentograma & co.) — consultation wizard cards, the
   static render on the show page and the client-facing narrative.
   Region colours are literal (shared with the PDF/owner app) and painted on
   the SVG itself; everything around the drawing uses the theme tokens.
   ------------------------------------------------------------------------ */
.anatomy-add {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.anatomy-add .form-control {
    min-width: 12rem;
}

.anatomy-charts {
    display: grid;
    gap: 0.85rem;
    margin-top: 0.6rem;
}

.anatomy-charts__empty {
    margin: 0.5rem 0 0;
    font-size: 0.86rem;
}

.anatomy-chart-card {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--panel);
    padding: 0.85rem;
}

.anatomy-chart-card__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.85rem;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
}

.anatomy-chart-card__title {
    margin: 0;
    font-size: 0.98rem;
    font-weight: 600;
    color: var(--text);
}

.anatomy-chart-card__species {
    margin-left: 0.35rem;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--muted);
}

.anatomy-chart-card__hint {
    margin: 0.2rem 0 0;
    font-size: 0.82rem;
}

.anatomy-chart-card__actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.anatomy-chart-card__variant .form-control {
    min-height: 2.2rem;
    padding-block: 0.25rem;
    font-size: 0.86rem;
}

.anatomy-chart-card__body {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(220px, 1fr);
    gap: 1rem;
    align-items: start;
}

.anatomy-chart-card__stage {
    position: relative;
    color: var(--text);
}

/* Landscape charts (body map): drawing across the full card, side panel below. */
.anatomy-chart-card--wide .anatomy-chart-card__body {
    grid-template-columns: minmax(0, 1fr);
}

.anatomy-chart-card--wide .anatomy-chart__svg {
    max-width: 820px;
}

.anatomy-chart-card--wide .anatomy-chart-card__side {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
}

.anatomy-chart-card--wide .anatomy-legend {
    grid-column: 1 / -1;
}

.anatomy-export.anatomy-export--wide {
    grid-template-columns: minmax(0, 1fr);
}

.anatomy-export.anatomy-export--wide .anatomy-export__stage .anatomy-chart__svg {
    max-width: 640px;
    margin: 0;
}

.anatomy-chart__svg {
    display: block;
    width: 100%;
    max-width: 540px;
    height: auto;
    margin: 0 auto;
    font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.anatomy-chart__svg--interactive .anatomy-region {
    cursor: pointer;
    outline: none;
}

.anatomy-chart__svg--interactive .anatomy-region:hover path:first-of-type,
.anatomy-chart__svg--interactive .anatomy-region:focus-visible path:first-of-type {
    stroke: var(--primary);
    stroke-width: 2;
}

.anatomy-chart-card__side {
    display: grid;
    gap: 0.85rem;
    min-width: 0;
}

.anatomy-legend {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem 0.75rem;
    font-size: 0.78rem;
    color: var(--text-secondary);
}

.anatomy-legend__item {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.anatomy-legend__swatch {
    display: inline-block;
    width: 0.8rem;
    height: 0.8rem;
    border-radius: 3px;
    border: 1.5px solid;
    flex: none;
}

.anatomy-marks__title {
    margin: 0 0 0.35rem;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
}

.anatomy-marks__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.25rem;
}

.anatomy-marks__button {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    width: 100%;
    padding: 0.3rem 0.45rem;
    border: 1px solid var(--line-soft);
    border-radius: 6px;
    background: var(--panel-soft);
    color: var(--text);
    font: inherit;
    font-size: 0.83rem;
    line-height: 1.35;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.1s ease, background-color 0.1s ease;
}

.anatomy-marks__button:hover {
    border-color: var(--primary);
    background: var(--primary-ghost);
}

/* Print-safe status sign (• •• ••• * × - -) next to the colour swatch. */
.anatomy-legend__sign {
    display: inline-block;
    min-width: 1.1rem;
    margin-right: 0.15rem;
    color: var(--text);
    font-weight: 700;
    letter-spacing: -0.04em;
}

.anatomy-marks__button .anatomy-legend__swatch {
    margin-top: 0.2rem;
}

/* Several regions with the same marks: one row, one chip per region. */
.anatomy-marks__group {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    padding: 0.3rem 0.45rem;
    border: 1px solid var(--line-soft);
    border-radius: 6px;
    background: var(--panel-soft);
    color: var(--text);
    font-size: 0.83rem;
    line-height: 1.35;
}

.anatomy-marks__group .anatomy-legend__swatch {
    margin-top: 0.2rem;
}

.anatomy-marks__group-body {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.anatomy-marks__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.2rem;
}

.anatomy-marks__chip {
    padding: 0 0.35rem;
    border: 1px solid var(--line);
    border-radius: 4px;
    background: var(--panel);
    color: var(--text);
    font: inherit;
    font-size: 0.76rem;
    font-variant-numeric: tabular-nums;
    line-height: 1.5;
    cursor: pointer;
}

.anatomy-marks__chip:hover {
    border-color: var(--primary);
    background: var(--primary-ghost);
}

.anatomy-marks__empty {
    margin: 0;
    font-size: 0.83rem;
}

.anatomy-previous__stage {
    max-width: 240px;
    color: var(--text);
}

.anatomy-previous__stage .anatomy-chart__svg {
    max-width: 240px;
}

.anatomy-previous__summary {
    margin: 0.35rem 0 0.5rem;
    font-size: 0.8rem;
}

/* Whole-chart fields (proceduri, scoruri, observatii) */
.anatomy-globals {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem 1.25rem;
    align-items: flex-end;
    margin-top: 0.85rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--line-soft);
}

.anatomy-globals__check {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.88rem;
    color: var(--text);
    cursor: pointer;
}

.anatomy-globals__label {
    display: block;
    margin-bottom: 0.25rem;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--text-secondary);
}

.anatomy-globals__grade .consult-mode-toggle {
    display: inline-flex;
    gap: 0.25rem;
}

.anatomy-globals__choice .form-control,
.anatomy-globals__text .form-control {
    min-height: 2.3rem;
}

.anatomy-globals__text {
    flex: 1 1 100%;
}

.anatomy-globals__text .form-control {
    width: 100%;
    resize: vertical;
}

/* Popover opened on a region */
.anatomy-popover {
    position: absolute;
    z-index: 30;
    width: min(320px, calc(100% - 16px));
    padding: 0.7rem 0.75rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--panel);
    box-shadow: 0 8px 24px rgba(28, 36, 51, 0.16);
    color: var(--text);
}

.anatomy-popover--sheet {
    position: sticky;
    bottom: 0.5rem;
    width: 100%;
    margin-top: 0.5rem;
}

.anatomy-popover__head {
    display: flex;
    align-items: baseline;
    gap: 0.45rem;
    margin: -0.7rem -0.75rem 0.5rem;
    padding: 0.7rem 0.75rem 0;
    font-size: 0.86rem;
    /* The header is the drag handle (see anatomy_chart_controller#popoverPointerDown). */
    cursor: grab;
    touch-action: none;
    user-select: none;
}

.anatomy-popover.is-dragging,
.anatomy-popover.is-dragging .anatomy-popover__head {
    cursor: grabbing;
}

.anatomy-popover.is-dragging {
    box-shadow: 0 14px 32px rgba(28, 36, 51, 0.24);
}

.anatomy-popover--sheet .anatomy-popover__head {
    cursor: default;
    touch-action: auto;
}

.anatomy-popover__grip {
    align-self: center;
    color: var(--muted);
    font-size: 0.9rem;
    line-height: 1;
}

.anatomy-popover--sheet .anatomy-popover__grip {
    display: none;
}

.anatomy-popover__head strong {
    font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.95rem;
}

.anatomy-popover__head span {
    color: var(--text-secondary);
}

.anatomy-popover__close {
    margin-left: auto;
    border: 0;
    background: transparent;
    color: var(--muted);
    font-size: 1.15rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 0.15rem;
}

.anatomy-popover__close:hover {
    color: var(--text);
}

.anatomy-popover__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-bottom: 0.5rem;
}

.anatomy-chip {
    display: inline-flex;
    align-items: center;
    min-height: 1.9rem;
    padding: 0.2rem 0.55rem;
    border: 1px solid var(--line);
    border-radius: 5px;
    background: var(--panel);
    color: var(--text-secondary);
    font: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    transition: border-color 0.1s ease, background-color 0.1s ease, color 0.1s ease;
}

.anatomy-chip:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.anatomy-chip.is-active {
    border-color: var(--primary);
    border-left: 2.5px solid var(--primary);
    background: var(--primary-ghost);
    color: var(--primary);
}

.anatomy-chip--extracted.is-active {
    border-color: var(--danger);
    border-left-color: var(--danger);
    background: var(--danger-bg);
    color: var(--danger-text);
}

.anatomy-chip--missing.is-active {
    border-color: var(--muted);
    border-left-color: var(--muted);
    background: var(--panel-soft);
    color: var(--text-secondary);
}

.anatomy-chip--grade {
    min-width: 1.9rem;
    justify-content: center;
    padding-inline: 0.35rem;
}

.anatomy-popover__rows {
    display: grid;
    gap: 0.35rem;
}

.anatomy-popover__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.2rem 0.35rem;
    border-radius: 5px;
    font-size: 0.82rem;
}

.anatomy-popover__row.is-active {
    background: var(--primary-ghost);
}

.anatomy-popover__label {
    color: var(--text-secondary);
    font-size: 0.8rem;
    font-weight: 500;
}

.anatomy-popover__hint {
    display: block;
    font-size: 0.7rem;
    font-weight: 400;
    color: var(--muted);
}

.anatomy-popover__grades {
    display: inline-flex;
    gap: 0.2rem;
}

.anatomy-popover__measure {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.8rem;
    color: var(--muted);
}

.anatomy-popover__measure .form-control {
    width: 4.6rem;
    min-height: 1.9rem;
    padding: 0.15rem 0.4rem;
    font-size: 0.82rem;
}

.anatomy-popover__note {
    display: block;
    margin-top: 0.55rem;
}

.anatomy-popover__note .form-control {
    min-height: 2.1rem;
    padding-block: 0.25rem;
    font-size: 0.84rem;
}

.anatomy-popover__actions {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.6rem;
}

.anatomy-popover__copy {
    margin-right: auto;
}

/* Copy-marks mode: strip above the drawing + copy cursor on the regions */
.anatomy-apply {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
    margin-bottom: 0.75rem;
    padding: 0.5rem 0.75rem;
    border-left: 3px solid var(--info-text);
    border-radius: 0 6px 6px 0;
    background: var(--info-bg);
    color: var(--info-text);
    font-size: 0.86rem;
}

.anatomy-apply__text strong {
    font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

.anatomy-apply__actions {
    display: inline-flex;
    gap: 0.4rem;
    margin-left: auto;
}

.anatomy-chart-card__stage.is-applying .anatomy-chart__svg--interactive .anatomy-region {
    cursor: copy;
}

/* Static render: show page / previews */
.anatomy-export {
    display: grid;
    grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

.anatomy-export__stage {
    color: var(--text);
}

.anatomy-export__summary {
    margin: 0 0 0.5rem;
    font-weight: 600;
    color: var(--text);
}

.anatomy-export__list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.3rem;
    font-size: 0.86rem;
}

.anatomy-export__list li {
    display: flex;
    gap: 0.45rem;
    align-items: flex-start;
}

.anatomy-export__list .anatomy-legend__swatch {
    margin-top: 0.25rem;
}

.anatomy-export__id {
    font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    font-weight: 600;
}

.anatomy-export__block {
    margin-top: 0.7rem;
    font-size: 0.86rem;
}

.anatomy-export__block h5 {
    margin: 0 0 0.25rem;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
}

.anatomy-export__changes {
    margin-top: 0.7rem;
    padding: 0.5rem 0.7rem;
    border-left: 3px solid var(--info);
    background: var(--info-bg);
    border-radius: 4px;
    font-size: 0.84rem;
    color: var(--info-text);
}

.anatomy-export__changes p {
    margin: 0;
}

.anatomy-export__changes p + p {
    margin-top: 0.25rem;
}

.anatomy-export + .anatomy-export {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--line-soft);
}

@media (max-width: 900px) {
    .anatomy-chart-card__body,
    .anatomy-export {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ==========================================================================
   Lab comparison — the "Compara analize" tab on the animal's page.

   A matrix of analytes x visit dates. Two things drive the layout: the table
   can be wider than the viewport (a hospitalised animal accumulates a column a
   day), and the analyte name is useless once it scrolls out of view — so the
   name column sticks while the dates scroll under it.

   Colours come from tokens only, so dark mode follows without a second block.
   ========================================================================== */

.lab-cmp {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

/* Panel switch: one button per set of analize (biochimie, hemoleucograma...). */
.lab-cmp__panels {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.lab-cmp__panel-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.42rem 0.7rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--panel);
    color: var(--text-secondary);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 100ms ease, border-color 100ms ease, color 100ms ease;
}

.lab-cmp__panel-btn:hover {
    background: var(--panel-hover);
}

.lab-cmp__panel-btn--active {
    border-color: var(--primary);
    background: var(--primary-ghost);
    color: var(--primary);
}

.lab-cmp__panel-count {
    font-variant-numeric: tabular-nums;
    font-size: 0.74rem;
    color: var(--muted);
}

.lab-cmp__panel-btn--active .lab-cmp__panel-count {
    color: inherit;
}

/* Visit picker. Flat inside the section — no inner card. */
.lab-cmp__picker {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding-bottom: 0.7rem;
    border-bottom: 1px solid var(--line-soft);
}

.lab-cmp__picker-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.lab-cmp__picker-label {
    font-size: 0.74rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted);
}

.lab-cmp__picker-count {
    font-size: 0.78rem;
    font-variant-numeric: tabular-nums;
    color: var(--text-secondary);
}

.lab-cmp__picker-actions {
    display: inline-flex;
    gap: 0.35rem;
    margin-left: auto;
}

.lab-cmp__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.lab-cmp__chip {
    display: inline-flex;
    align-items: baseline;
    gap: 0.35rem;
    padding: 0.32rem 0.55rem;
    border: 1px solid var(--line);
    border-left-width: 2.5px;
    border-radius: var(--radius-sm, 4px);
    background: var(--panel);
    cursor: pointer;
    user-select: none;
    transition: background 100ms ease, border-color 100ms ease;
}

.lab-cmp__chip:hover {
    background: var(--panel-hover);
}

.lab-cmp__chip--on {
    border-color: var(--line);
    border-left-color: var(--primary);
    background: var(--primary-ghost);
}

.lab-cmp__chip input {
    /* The whole chip is the hit target; the box just carries the state. */
    margin: 0;
    accent-color: var(--primary);
}

.lab-cmp__chip-date {
    font-size: 0.8rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--text);
}

.lab-cmp__chip-time {
    font-size: 0.72rem;
    font-variant-numeric: tabular-nums;
    color: var(--muted);
}

/* .pv-table-wrap pads itself 0.25rem and pulls the same back as a negative
   margin. A sticky cell honours `left: 0` at the PADDING edge, so the columns
   scrolling away stay visible in that 4px gutter, to the left of the pinned
   analyte name. Zero both so the pinned column is flush with the scrollport. */
.lab-cmp__scroll {
    margin-left: 0;
    padding-left: 0;
}

/* The table itself. */
.lab-cmp__table {
    /* Stay a real table and let .lab-cmp__scroll do the scrolling. The narrow
       breakpoint turns every .table into `display:block; overflow-x:auto`,
       which makes the TABLE the scrollport — and a cell can only stick inside
       its own scrollport, so the analyte column would scroll away exactly when
       the screen is too narrow to do without it. */
    display: table;
    overflow-x: visible;
    /* max-content, not 100%: the cells are nowrap, so a table pinned to the
       container's width overflows its own box instead of growing — and then
       .lab-cmp__scroll has nothing to scroll and the right-hand dates are
       simply cut off. Letting the table grow is what makes the wrap scroll. */
    width: max-content;
    min-width: 100%;
    /* separate, not the .table default of collapse: Chrome ignores
       position:sticky on cells of a collapsed table, which is exactly what the
       analyte column needs. border-spacing:0 keeps the collapsed look. */
    border-collapse: separate;
    border-spacing: 0;
    font-variant-numeric: tabular-nums;
}

.lab-cmp__table th,
.lab-cmp__table td {
    white-space: nowrap;
    vertical-align: top;
}

.lab-cmp__table th {
    background: var(--bg-shell);
    color: var(--text-secondary);
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* The analyte name stays put while the dates scroll under it — the whole point
   of the table is reading one analyte across time. */
.lab-cmp__table th:first-child,
.lab-cmp__table td:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
}

/* .table th is already sticky top:0 z-index:2 app-wide, so the analyte header
   ties with the date headers and, on a tie, the later sibling paints on top —
   the name would vanish under a scrolling date. It has to outrank them. */
.lab-cmp__table th:first-child {
    z-index: 3;
}

.lab-cmp__table td:first-child {
    background: var(--panel);
    box-shadow: 1px 0 0 var(--line-soft);
}

.lab-cmp__table th:first-child {
    box-shadow: 1px 0 0 var(--line-soft);
}

/* A sticky cell must paint its own opaque background, so it cannot inherit the
   row's. Mirror the three states the base .table paints on its rows, or the
   analyte column reads as a white stripe running through a striped table and
   stays behind when the row is hovered. The literal colours are the ones
   .table already hardcodes at lines ~5402 and ~16563. */
.lab-cmp__table tbody tr:nth-child(even) td:first-child {
    background: #f8fafe;
}

.lab-cmp__table tbody tr:hover td:first-child {
    background: var(--bg-page);
}

:root[data-theme='dark'] .lab-cmp__table tbody tr:nth-child(even) td:first-child {
    background: #15253b;
}

:root[data-theme='dark'] .lab-cmp__table tbody tr:hover td:first-child {
    background: #1c2d47;
}

.lab-cmp__name {
    font-weight: 600;
    color: var(--text);
}

.lab-cmp__ref,
.lab-cmp__um {
    font-size: 0.8rem;
    color: var(--muted);
}

/* A reference or unit that moved between the compared visits. Not an error —
   a note that the columns were not all measured against the same yardstick. */
.lab-cmp__ref-warn {
    margin-left: 0.15rem;
    border: 0;
    text-decoration: none;
    color: var(--warning);
    font-weight: 700;
    cursor: help;
}

.lab-cmp__th-date {
    text-transform: none;
    letter-spacing: 0;
}

.lab-cmp__date-link {
    display: block;
    font-size: 0.82rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.lab-cmp__date-meta {
    display: block;
    margin-top: 0.1rem;
    font-size: 0.7rem;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    color: var(--muted);
}

.lab-cmp__cell {
    font-size: 0.84rem;
}

/* Not measured at that visit. A dash, never a zero. */
.lab-cmp__absent {
    color: var(--muted);
    cursor: help;
}

.lab-cmp__hint {
    margin: 0;
}

@media (max-width: 600px) {
    .lab-cmp__picker-actions {
        margin-left: 0;
    }
}

/* Appointment form: "Vezi fisa" link beside the Proprietar / Animal label
   (edit mode only) — opens the owner / pet record in a new tab. */
.appointment-inline-picker__label-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
}

.appointment-inline-picker__open-link {
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--primary);
    text-decoration: none;
    white-space: nowrap;
}

.appointment-inline-picker__open-link:hover {
    text-decoration: underline;
}

/* Pet page > Galerie foto: same body area across visits, oldest first. */
.pet-gallery-compare {
    margin-bottom: 1rem;
}

.pet-gallery-compare__row {
    display: flex;
    gap: 0.6rem;
    overflow-x: auto;
    padding: 0.5rem 0 0.25rem;
}

.pet-gallery-compare__row .pet-gallery__item {
    flex: 0 0 9rem;
    margin: 0;
}

/* CADESI-04 total under the body map (show page). */
.anatomy-cadesi {
    margin: 0.5rem 0 0;
    font-size: 0.85rem;
    color: var(--text);
}

/* ── Staff notes (post-it reminders) ─────────────────────────────────────────
   Fixed palette mapped to DESIGN.md tokens — the tokens already swap under
   [data-theme='dark'], so every note colour is dark-mode safe for free.
   Shared by the topbar dropdown item and the /notite page. */
.staff-note-color--yellow,
.topbar-live-item--note-yellow { --note-color: var(--warning); --note-bg: var(--warning-bg); }
.staff-note-color--blue,
.topbar-live-item--note-blue { --note-color: var(--primary); --note-bg: var(--primary-ghost); }
.staff-note-color--green,
.topbar-live-item--note-green { --note-color: var(--success); --note-bg: var(--success-bg); }
.staff-note-color--red,
.topbar-live-item--note-red { --note-color: var(--danger); --note-bg: var(--danger-bg); }
.staff-note-color--orange,
.topbar-live-item--note-orange { --note-color: var(--accent); --note-bg: var(--accent-ghost); }
.staff-note-color--purple,
.topbar-live-item--note-purple {
    --note-color: var(--status-rescheduled);
    --note-bg: color-mix(in srgb, var(--status-rescheduled) 10%, transparent);
}

.topbar-live-item--staff-note {
    border-left-color: var(--note-color, var(--warning));
    background: var(--note-bg, var(--warning-bg));
}

/* Dropdown header tools: sticky-note (quick add) + bell (enable browser notifications). */
.topbar-live-dropdown__tools {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    flex-shrink: 0;
}

.topbar-live-dropdown__tool {
    display: inline-grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 6px;
    background: none;
    color: var(--text-secondary);
    cursor: pointer;
    transition: background-color 100ms ease, color 100ms ease;
}

.topbar-live-dropdown__tool:hover,
.topbar-live-dropdown__tool:focus-visible {
    background: var(--primary-ghost);
    color: var(--primary-text);
}

.topbar-live-dropdown__tool--note {
    color: var(--warning);
}

.topbar-live-dropdown__tool--note .sticky-note-icon__paper {
    fill: var(--warning-bg);
}

.topbar-live-dropdown__tool--note:hover,
.topbar-live-dropdown__tool--note:focus-visible {
    background: var(--warning-bg);
    color: var(--warning-text);
}

.topbar-live-dropdown__state .topbar-live-dropdown__tools {
    justify-self: center;
    margin-top: 0.25rem;
}

/* List page: one row per note, left-border accent + tinted bg (DESIGN.md alert pattern). */
.staff-note-list {
    display: grid;
    gap: 0.5rem;
}

.staff-note-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.75rem;
    align-items: center;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--line);
    border-left: 3px solid var(--note-color, var(--warning));
    border-radius: 6px;
    background: var(--note-bg, var(--warning-bg));
}

.staff-note-row.is-completed {
    opacity: 0.65;
}

.staff-note-row__body {
    display: grid;
    gap: 0.15rem;
    min-width: 0;
}

.staff-note-row__body p {
    margin: 0;
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.staff-note-row__meta {
    font-size: 0.78rem;
    color: var(--text-secondary);
}

.staff-note-row__meta .is-due {
    color: var(--danger-text);
    font-weight: 600;
}

.staff-note-row__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    justify-content: flex-end;
}

.staff-note-row__actions form {
    margin: 0;
}

@media (max-width: 600px) {
    .staff-note-row {
        grid-template-columns: 1fr;
    }

    .staff-note-row__actions {
        justify-content: flex-start;
    }
}

/* Colour picker: the radios become swatches. */
.staff-note-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.staff-note-swatch {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 2.85rem;
    padding: 0.4rem 0.7rem;
    border: 1px solid var(--line);
    border-left: 3px solid var(--note-color);
    border-radius: 6px;
    background: var(--note-bg);
    cursor: pointer;
    transition: border-color 100ms ease;
}

.staff-note-swatch:has(input:checked) {
    border-color: var(--note-color);
    box-shadow: 0 0 0 2px var(--note-color);
}

.staff-note-swatch input {
    accent-color: var(--note-color);
    margin: 0;
}

/* Beats the generic dark .topbar-live-item surface (same specificity, later). */
:root[data-theme='dark'] .topbar-live-item--staff-note {
    border-left-color: var(--note-color, var(--warning));
    background: var(--note-bg, var(--warning-bg));
}

/* Notite page: "Notificari in browser" row — flat, inline (no inner card). */
.staff-push-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--line);
}

.staff-push-bar__text {
    display: grid;
    gap: 0.1rem;
    min-width: 0;
}

.staff-push-bar__text span {
    font-size: 0.82rem;
}

.staff-push-bar__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

/* App shell: "browser notifications not allowed" reminder, until dismissed. */
.staff-push-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    border-left-width: 3px;
}

.staff-push-banner[hidden] {
    display: none;
}

.staff-push-banner__text {
    min-width: 0;
    flex: 1 1 20rem;
}

.staff-push-banner__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
}

.staff-push-banner__dismiss {
    border: 0;
    background: transparent;
    color: inherit;
    font-size: 1.25rem;
    line-height: 1;
    min-width: 2.25rem;
    min-height: 2.25rem;
    cursor: pointer;
    border-radius: var(--radius-md);
}

.staff-push-banner__dismiss:hover {
    background: var(--warning-bg, #fef6e0);
}

/* ── Produse antimicrobiene report (reporting/widgets/antimicrobial_usage) ──
 * Lives inside the detail page's single .panel, so no surfaces here — just a
 * toolbar row, right-aligned numeric columns and a compact month matrix.
 * Delta colours read "use went up" as the bad direction: the regulatory goal
 * is reducing antimicrobial use. */
.amr-report__toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.75rem;
}

.amr-report__toolbar form {
    flex: 1 1 320px;
}

.amr-report__exports {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.amr-table th.num,
.amr-table td.num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.amr-table--months td,
.amr-table--months th {
    font-size: 12px;
    padding-left: 0.4rem;
    padding-right: 0.4rem;
}

.amr-table--months td:first-child {
    min-width: 160px;
}

.amr-table tbody th[scope="rowgroup"] {
    text-align: left;
    vertical-align: top;
    font-weight: 500;
}

.amr-table__group-start > * {
    border-top: 1px solid var(--line);
}

.amr-delta--up {
    color: var(--danger);
}

.amr-delta--down {
    color: var(--success);
}

/* Sticky-note quick-add popup (operations/staff_note/_quick_dialog.html.twig). */
.staff-note-quick {
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 0;
    width: min(92vw, 26rem);
    font-family: inherit;
    color: var(--text);
    background: var(--panel);
}

.staff-note-quick::backdrop {
    background: rgba(25, 37, 58, 0.42);
}

.staff-note-quick__inner {
    display: grid;
    gap: 0.75rem;
    padding: 1rem 1.1rem 1.1rem;
}

.staff-note-quick__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
}

.staff-note-quick__head h3 {
    margin: 0;
    font-size: 1rem;
}

.staff-note-quick__close {
    border: 0;
    background: none;
    color: var(--text-secondary);
    font-size: 1.4rem;
    line-height: 1;
    padding: 0.15rem 0.35rem;
    border-radius: 6px;
    cursor: pointer;
}

.staff-note-quick__close:hover {
    color: var(--text);
    background: var(--surface-soft);
}

.staff-note-quick__form {
    display: grid;
    gap: 0.6rem;
}

.staff-note-quick__row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem;
}

@media (max-width: 600px) {
    .staff-note-quick__row {
        grid-template-columns: 1fr;
    }
}

.staff-note-quick__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.4rem;
}

.staff-note-quick__all {
    margin-right: auto;
    font-size: 0.8rem;
    color: var(--primary-text);
}

/* Colour-only swatches: a solid square, no text. Name stays for screen readers. */
.staff-note-swatches--compact {
    gap: 0.4rem;
}

.staff-note-swatch--compact {
    position: relative;
    width: 2.25rem;
    height: 2.25rem;
    min-height: 0;
    padding: 0;
    justify-content: center;
    border: 0;
    border-radius: 6px;
    background: var(--note-color);
}

.staff-note-swatch--compact input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.staff-note-swatch--compact:has(input:checked) {
    box-shadow: 0 0 0 2px var(--panel), 0 0 0 4px var(--note-color);
}

.staff-note-swatch--compact:has(input:checked)::after {
    content: '✓';
    color: #FFFFFF;
    font-weight: 700;
    font-size: 0.95rem;
}

.staff-note-swatch--compact:has(input:focus-visible) {
    outline: 2px solid var(--primary);
    outline-offset: 3px;
}

.staff-note-swatch__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* Date picker inside the popup: flatpickr's static mode renders the calendar
   in place (a modal dialog's top layer hides anything appended to <body>).
   Let it overflow the dialog instead of adding a scrollbar, and keep the
   wrapper full width like the other fields. */
.staff-note-quick {
    overflow: visible;
}

.staff-note-quick .flatpickr-wrapper {
    display: block;
    width: 100%;
}

.staff-note-quick .flatpickr-calendar.static {
    z-index: 5;
}

/* ── Chat cu CloudVet (support_chat/*, admin/support_chat/*) ───────────────
   One private thread per clinic staff member with the platform team. Tokens
   only, so both themes follow. "Mine" = the viewer's side; the CloudVet team's
   bubbles carry the amber left accent wherever they are shown. */
.support-chat {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 0;
}
.support-chat__thread {
    display: flex;
    flex-direction: column;
    gap: 6px;
    height: min(60vh, 560px);
    overflow-y: auto;
    padding: 16px;
    background: var(--bg-shell);
    border: 1px solid var(--line);
    border-radius: 8px;
}
.support-chat__empty {
    margin: auto;
    color: var(--muted);
    text-align: center;
}
.support-chat__row { display: flex; }
.support-chat__row--mine { justify-content: flex-end; }
.support-chat__row--theirs { justify-content: flex-start; }
.support-chat__bubble {
    max-width: min(72%, 560px);
    padding: 8px 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--panel);
    color: var(--text);
    overflow-wrap: anywhere;
}
.support-chat__row--mine .support-chat__bubble {
    background: var(--primary-ghost);
    border-color: var(--primary-line);
}
.support-chat__bubble--team { border-left: 3px solid var(--accent); }
.support-chat__author {
    display: block;
    margin-bottom: 2px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
}
.support-chat__body { font-size: 15px; line-height: 1.45; }
.support-chat__meta {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 2px;
}
.support-chat__time {
    font-size: 11.5px;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}
/* Read receipt on the team's own messages (admin side only). */
.support-chat__receipt { font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.support-chat__receipt.is-read { color: var(--primary); font-weight: 600; }
.support-chat__composer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: end;
}
.support-chat__composer textarea { resize: vertical; min-height: 2.85rem; max-height: 40vh; }
.support-chat__hint {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin: 0;
    font-size: 11.5px;
    color: var(--muted);
}
.support-chat__error { color: var(--danger); font-weight: 600; }

.support-inbox {
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}
.support-inbox__start { display: grid; gap: 8px; }
.support-inbox__threads {
    display: flex;
    flex-direction: column;
    max-height: 62vh;
    overflow-y: auto;
    border-top: 1px solid var(--line-soft);
}
.support-inbox__thread {
    position: relative;
    display: grid;
    gap: 2px;
    padding: 10px 36px 10px 10px;
    border-bottom: 1px solid var(--line-soft);
    border-left: 3px solid transparent;
    color: var(--text);
    text-decoration: none;
    transition: background 100ms ease;
}
.support-inbox__thread:hover { background: var(--panel-soft); }
/* Doubled class beats the generic `.panel a` link colour. */
.support-inbox__thread.support-inbox__thread { color: var(--text); }
.support-inbox__thread.is-active { background: var(--primary-ghost); border-left-color: var(--primary); }
.support-inbox__thread-head { display: flex; justify-content: space-between; gap: 8px; }
.support-inbox__thread-head time { font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.support-inbox__thread-company { font-size: 12px; color: var(--text-secondary); }
.support-inbox__thread-preview {
    font-size: 13.5px;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.support-inbox__thread.has-unread .support-inbox__thread-preview { color: var(--text); font-weight: 500; }
.support-inbox__unread {
    position: absolute;
    right: 10px;
    bottom: 10px;
    min-width: 20px;
    padding: 1px 6px;
    border-radius: 4px;
    background: var(--accent-solid);
    color: var(--text-on-solid);
    font-size: 11.5px;
    font-weight: 700;
    text-align: center;
}
.support-inbox__header { display: grid; gap: 2px; margin-bottom: 12px; }
.support-inbox__header-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.support-inbox__resolved {
    position: absolute;
    right: 12px;
    bottom: 10px;
    color: var(--success);
    font-weight: 700;
}
.support-chat__resolve { margin: 0; flex-shrink: 0; }
.support-chat__resolved {
    flex-shrink: 0;
    padding: 2px 8px;
    border-left: 2.5px solid var(--success);
    border-radius: 4px;
    background: var(--success-bg);
    color: var(--success);
    font-size: 12px;
    font-weight: 600;
}
.support-inbox__placeholder { padding: 48px 0; text-align: center; }

@media (max-width: 900px) {
    .support-inbox { grid-template-columns: minmax(0, 1fr); }
    .support-inbox__threads { max-height: 40vh; }
    .support-chat__bubble { max-width: 88%; }
}

/* ── CloudVet Suport PWA (support_chat/app/index.html.twig) ────────────────
   Phone-first, full-height, no app shell. The thread screen lets the message
   list take every pixel between the bar and the composer. */
.support-app {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--bg-page);
    color: var(--text);
}
.support-app__bar {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: calc(10px + env(safe-area-inset-top)) 16px 10px;
    background: var(--panel);
    border-bottom: 1px solid var(--line);
}
.support-app__title { display: grid; flex: 1; min-width: 0; }
.support-app__title strong { font-size: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.support-app__title span { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.support-app__back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.85rem;
    height: 2.85rem;
    margin-left: -8px;
    font-size: 32px;
    line-height: 1;
    color: var(--primary);
    text-decoration: none;
}
.support-app__link { font-size: 13.5px; color: var(--link); }
.support-app__main {
    flex: 1;
    width: 100%;
    max-width: 760px;
    margin: 0 auto;
    padding: 16px 16px calc(16px + env(safe-area-inset-bottom));
    /* stack-sm is a grid; without this the rows share the full height. */
    align-content: start;
}
.support-app__main--thread {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding-bottom: calc(8px + env(safe-area-inset-bottom));
}
.support-app--thread { height: 100vh; height: 100dvh; min-height: 0; }
.support-app__main--thread .support-chat { flex: 1; }
.support-app__main--thread .support-chat__thread { flex: 1; height: auto; min-height: 0; }
.support-app__push {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 12px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-left: 3px solid var(--primary);
    border-radius: 8px;
    font-size: 13.5px;
}
.support-app__push-actions { display: flex; gap: 8px; }
.support-app__threads {
    max-height: none;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 8px;
}
.support-app__threads .support-inbox__thread { padding-top: 12px; padding-bottom: 12px; }
.support-app__new summary { cursor: pointer; font-weight: 600; padding: 8px 0; }
.support-app__new .support-inbox__start { margin-top: 8px; }
@media (max-width: 600px) {
    .support-app .support-chat__bubble { max-width: 88%; }
    .support-app .support-chat__hint span:last-child { display: none; }
}

/* ── Floating "Ajutor CloudVet" bubble (support_chat/_bubble.html.twig) ────
   Bottom-right on every app-shell page for clinic staff. The panel hosts the
   same live thread as /ajutor/chat; the thread grows to the panel height. */
.support-bubble {
    position: fixed;
    right: 20px;
    bottom: calc(20px + env(safe-area-inset-bottom));
    z-index: 1200;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
}
.support-bubble__launcher {
    /* Round FAB: full radius approved by the user for this launcher (DESIGN.md
       otherwise reserves 9999px for avatars). Icon-only — the label lives in
       aria-label so it costs no screen space. */
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    padding: 0;
    border: 0;
    border-radius: 9999px;
    background: var(--primary-solid);
    color: var(--text-on-solid);
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(41, 104, 224, 0.32), 0 2px 4px rgba(28, 36, 51, 0.12);
    transition: background 100ms ease, transform 100ms ease, box-shadow 100ms ease;
}
.support-bubble__launcher:hover {
    background: var(--primary-strong);
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(41, 104, 224, 0.38), 0 2px 4px rgba(28, 36, 51, 0.12);
}
.support-bubble__launcher:focus-visible { outline: 3px solid var(--primary-ghost); outline-offset: 3px; }
.support-bubble__icon { flex-shrink: 0; transition: transform 100ms ease, opacity 100ms ease; }
.support-bubble__icon--close { position: absolute; opacity: 0; transform: rotate(-45deg); }
.support-bubble__launcher.is-open .support-bubble__icon--chat { opacity: 0; transform: scale(0.6); }
.support-bubble__launcher.is-open .support-bubble__icon--close { opacity: 1; transform: rotate(0); }
.support-bubble__badge {
    position: absolute;
    top: -3px;
    right: -3px;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border: 2px solid var(--panel);
    border-radius: 9999px;
    background: var(--accent-solid);
    color: var(--text-on-solid);
    font-size: 11.5px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}
.support-bubble__launcher.is-open .support-bubble__badge { display: none; }
.support-bubble__panel {
    display: flex;
    flex-direction: column;
    width: min(400px, calc(100vw - 40px));
    height: min(600px, calc(100vh - 120px));
    height: min(600px, calc(100dvh - 120px));
    overflow: hidden;
    background: var(--panel);
    color: var(--text);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: 0 16px 40px rgba(28, 36, 51, 0.18);
}
.support-bubble__panel[hidden] { display: none; }
.support-bubble__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 14px;
    background: var(--bg-shell);
    border-bottom: 1px solid var(--line);
}
.support-bubble__head-body { display: grid; gap: 2px; }
.support-bubble__head-body strong { font-size: 14px; }
.support-bubble__head-body span { font-size: 11.5px; color: var(--muted); }
.support-bubble__head-actions { display: inline-flex; gap: 6px; }
.support-bubble__head-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    padding: 0 6px;
    border: 1px solid var(--line);
    border-radius: 4px;
    background: var(--panel);
    color: var(--text-secondary);
    font-family: inherit;
    font-size: 14px;
    text-decoration: none;
    cursor: pointer;
}
.support-bubble__head-btn:hover { background: var(--panel-hover); color: var(--text); }
.support-bubble__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    padding: 10px;
}
.support-bubble__body .support-chat { flex: 1; }
.support-bubble__body .support-chat__thread { flex: 1; height: auto; min-height: 0; padding: 10px; }
.support-bubble__body .support-chat__bubble { max-width: 86%; }
.support-bubble__body .support-chat__hint span:last-child { display: none; }
.support-bubble__loading { margin: auto; color: var(--muted); }

@media (max-width: 600px) {
    .support-bubble { right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); }
    .support-bubble__launcher { width: 52px; height: 52px; }
    .support-bubble__panel {
        width: calc(100vw - 32px);
        height: calc(100vh - 100px);
        height: calc(100dvh - 100px);
    }
}

/* Bubble: new-message pop-up card above the launcher. */
.support-bubble__toast {
    display: flex;
    align-items: flex-start;
    gap: 4px;
    width: min(320px, calc(100vw - 40px));
    padding: 10px 8px 10px 12px;
    background: var(--panel);
    color: var(--text);
    border: 1px solid var(--line);
    border-left: 3px solid var(--accent);
    border-radius: 8px;
    box-shadow: 0 10px 28px rgba(28, 36, 51, 0.18);
}
.support-bubble__toast[hidden] { display: none; }
.support-bubble__toast-body {
    display: grid;
    flex: 1;
    gap: 2px;
    min-width: 0;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}
.support-bubble__toast-body strong { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.support-bubble__toast-body span {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 13px;
    color: var(--text-secondary);
}
.support-bubble__toast-close {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border: 0;
    border-radius: 4px;
    background: none;
    color: var(--muted);
    font-size: 16px;
    cursor: pointer;
}
.support-bubble__toast-close:hover { background: var(--panel-soft); color: var(--text); }

/* Bubble panel views (admin: list ↔ thread). */
.support-bubble__view { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.support-bubble__view.stack-sm { display: flex; }
.support-bubble__start {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
}
.support-bubble__threads { flex: 1; max-height: none; min-height: 0; overflow-y: auto; }
.support-bubble__threads .support-inbox__thread { padding-right: 40px; }
.support-bubble__thread-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}
.support-bubble__back {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--panel);
    color: var(--primary);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}
.support-bubble__back:hover { background: var(--panel-soft); }
.support-bubble__thread-title { display: grid; flex: 1; min-width: 0; }
.support-bubble__thread-title strong { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.support-bubble__thread-title span { font-size: 11.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.support-inbox__thread .support-chat__receipt { font-size: 11px; }

/* ── Admin performance toolbar (PerfToolbarListener + perf_toolbar_controller.js) ── */
.perf-toolbar {
    position: fixed;
    left: 12px;
    bottom: 12px;
    z-index: 1190;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    color: var(--text);
}
.perf-toolbar__pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 10px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--panel);
    color: var(--text-secondary);
    font: inherit;
    cursor: pointer;
    opacity: 0.55;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: opacity 0.15s ease;
}
.perf-toolbar__pill:hover,
.perf-toolbar.is-open .perf-toolbar__pill { opacity: 1; }
.perf-toolbar__pill strong { color: var(--text); font-weight: 700; }
.perf-toolbar__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--success); }
.perf-toolbar__pill--warn .perf-toolbar__dot { background: var(--warning); }
.perf-toolbar__pill--bad .perf-toolbar__dot { background: var(--danger); }
.perf-toolbar__flag { color: var(--warning-text); font-weight: 600; }
.perf-toolbar__panel {
    position: absolute;
    left: 0;
    bottom: calc(100% + 8px);
    width: min(860px, calc(100vw - 24px));
    max-height: min(72vh, 720px);
    display: flex;
    flex-direction: column;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--panel);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
}
.perf-toolbar__head {
    flex-shrink: 0;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--line);
}
.perf-toolbar__title { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.perf-toolbar__title strong { font-size: 13.5px; overflow-wrap: anywhere; }
.perf-toolbar__close {
    border: 0;
    background: none;
    color: var(--muted);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}
.perf-toolbar__tabs { flex-shrink: 0; display: flex; gap: 2px; padding: 0 8px; border-bottom: 1px solid var(--line); overflow-x: auto; }
.perf-toolbar__tabs button,
.perf-toolbar__segmented button {
    border: 0;
    background: none;
    color: var(--text-secondary);
    font: inherit;
    font-weight: 500;
    padding: 8px 10px;
    cursor: pointer;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
}
.perf-toolbar__tabs button.is-active { color: var(--primary); border-bottom-color: var(--primary); }
.perf-toolbar__body { min-height: 0; padding: 10px 12px 14px; overflow: auto; }
.perf-toolbar__body h5 {
    margin: 12px 0 6px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
}
.perf-toolbar__body h5:first-child { margin-top: 2px; }
.perf-toolbar__muted { color: var(--muted); }
.perf-toolbar__bar { display: flex; height: 10px; border-radius: 4px; overflow: hidden; background: var(--line-soft); }
.perf-toolbar__seg { display: block; height: 100%; }
.perf-toolbar__seg--net, .perf-toolbar__seg--boot { background: var(--muted); }
.perf-toolbar__seg--click { background: var(--warning); }
.perf-toolbar__seg--srv, .perf-toolbar__seg--pre, .perf-toolbar__seg--db { background: var(--primary); }
.perf-toolbar__seg--dl, .perf-toolbar__seg--http { background: var(--info); }
.perf-toolbar__seg--dom, .perf-toolbar__seg--ctrl, .perf-toolbar__seg--php { background: var(--accent); }
.perf-toolbar__seg--load { background: var(--success); }
.perf-toolbar__legend { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 2px 16px; margin: 6px 0 0; }
.perf-toolbar__legend div { display: flex; justify-content: space-between; gap: 8px; }
.perf-toolbar__legend dt { display: flex; align-items: center; gap: 6px; color: var(--text-secondary); }
.perf-toolbar__legend dd { margin: 0; font-weight: 600; }
.perf-toolbar__swatch { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }
.perf-toolbar__hints { margin: 12px 0 0; padding-left: 18px; color: var(--warning-text); }
.perf-toolbar__ms { font-weight: 700; }
.perf-toolbar__ms--ok { color: var(--success-text); }
.perf-toolbar__ms--warn { color: var(--warning-text); }
.perf-toolbar__ms--bad { color: var(--danger-text); }
.perf-toolbar__link {
    border: 0;
    background: none;
    padding: 0;
    color: var(--link);
    font: inherit;
    cursor: pointer;
}
.perf-toolbar__row-button {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 6px 8px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: none;
    color: var(--text);
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.perf-toolbar__row-button span:first-child { flex: 1; overflow-wrap: anywhere; }
.perf-toolbar__toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; }
.perf-toolbar__segmented { display: inline-flex; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.perf-toolbar__segmented button { border-bottom: 0; padding: 5px 10px; }
.perf-toolbar__segmented button.is-active { background: var(--primary-ghost); color: var(--primary); }
.perf-toolbar__filter {
    flex: 1;
    min-width: 160px;
    padding: 5px 8px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--panel);
    color: var(--text);
    font: inherit;
}
.perf-toolbar__query { padding: 8px 0; border-bottom: 1px solid var(--line-soft); }
.perf-toolbar__query.is-flagged .perf-toolbar__query-head .perf-toolbar__muted { color: var(--warning-text); font-weight: 600; }
.perf-toolbar__query-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; margin-bottom: 4px; }
.perf-toolbar__query code {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11.5px;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    color: var(--text);
}
.perf-toolbar__query.is-expanded code { display: block; -webkit-line-clamp: unset; }
.perf-toolbar__params,
.perf-toolbar__caller {
    margin-top: 3px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11px;
    color: var(--muted);
    overflow-wrap: anywhere;
}
.perf-toolbar__caller { color: var(--text-secondary); }
.perf-toolbar__table { width: 100%; border-collapse: collapse; }
.perf-toolbar__table th {
    text-align: left;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
    padding: 4px 6px;
    border-bottom: 1px solid var(--line);
}
.perf-toolbar__table td { padding: 5px 6px; border-bottom: 1px solid var(--line-soft); vertical-align: top; white-space: nowrap; }
.perf-toolbar__table td.perf-toolbar__url { white-space: normal; overflow-wrap: anywhere; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; }
.perf-toolbar__error { color: var(--danger-text); }
@media print { .perf-toolbar { display: none; } }