: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;
    --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);
    --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 #cbd8ec;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    color: #253a5b;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
}

.theme-toggle:hover {
    background: #eef4ff;
}

.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: #edf4ff;
    color: #1f58d2;
}

.nir-entry-badge--promo {
    background: #fff3df;
    color: #a56400;
}

.nir-entry-badge--bonus {
    background: #eaf9f2;
    color: #187a58;
}

.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: #eaf9f2;
    color: #187a58;
}

.nir-review-badge--pending {
    background: #fff3df;
    color: #a56400;
}

.nir-row--reviewed td {
    background: #e8f8f0;
}

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

.nir-invoice-row--service td {
    background: #fff5e6;
}

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

.nir-invoice-row--discount td {
    background: #fdecec;
}

.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: #e8f8f0;
    color: #1f7a52;
}

.nir-class-badge--service {
    background: #fff1df;
    color: #a85b0c;
}

.nir-class-badge--discount {
    background: #fde2e2;
    color: #a42525;
}

.nir-class-override {
    display: inline-block;
    margin-left: 0.3rem;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    background: #e2e8f0;
    color: #334155;
    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: #a85b0c;
}

.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: #fff;
    border: 1px solid #f4d8a8;
    border-radius: 0.5rem;
}

.nir-service-pill {
    display: inline-block;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    background: #fff1df;
    color: #a85b0c;
    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: #6b7280;
    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;
}

.nir-editor-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    background: #eef3fa;
    color: #1f3654;
    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: #1f3654;
}

/* 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: #eef7ff;
    border: 1px solid #bfdcff;
    color: #1f3654;
}

.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 #f4d8a8;
    background: #fff8ec;
}

.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: #fff;
    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: #fff;
}

.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: #fbfcfe;
    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 #d5def0;
    background: #ffffff;
    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 #cfd9eb;
    border-radius: 0.7rem;
    background: #eef3fb;
    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: #ffffff;
    color: #223251;
    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: #21324a;
    white-space: normal;
    line-height: 1.2;
}

.sidebar-session__meta span {
    font-size: 0.7rem;
    color: #596d89;
    white-space: normal;
    line-height: 1.2;
}

.sidebar-session__impersonation {
    color: #8a2e2e !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: #8d97a9;
    font-size: 0.72rem;
    font-weight: 700;
}

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

.menu__item:hover {
    background: #f1f5fc;
}

.menu__item.is-active {
    background: #eaf1ff;
    color: var(--primary);
    border-color: #d7e5ff;
    font-weight: 700;
}

.menu__group {
    margin-top: 0.5rem;
}

.menu > .menu__group {
    margin-top: 0.55rem;
    padding-top: 0.55rem;
    border-top: 1px solid #e2e9f5;
}

.menu__submenu > .menu__group {
    margin-top: 0.4rem;
    padding-top: 0.4rem;
    border-top: 1px dashed #dbe4f2;
}

.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: #f1f5fc;
}

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

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

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

.menu__item--favorite {
    background: #fff8f8;
    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: #1f2d44;
    opacity: 0.92;
    cursor: pointer;
    user-select: none;
}

.menu-fav-toggle.is-active {
    color: #cf2f2f;
}

.sidebar-toggle {
    border: 1px solid #d1dced;
    background: #ffffff;
    color: #2e3f5c;
    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: #ffffff;
    border: 1px solid #cfd9eb;
    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: #ffffff;
    border: 1px solid #cfd9eb;
    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: #ffffff;
    border: 1px solid #cfd9eb;
    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: #8190a7;
    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 {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0.4rem;
    min-width: 0;
}

.topbar-live {
    position: relative;
    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 #d7e2f2;
    background: linear-gradient(180deg, #ffffff 0%, #f6f9ff 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: #1f2d44;
    line-height: 1.12;
}

.topbar-live-card__summary {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.66rem;
    color: #657995;
    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: #a8c0ec;
    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: #e8f0ff;
    color: #295bb9;
    font-size: 0.68rem;
    font-weight: 700;
}

.topbar-live-card__badge.is-empty {
    background: #eef2f8;
    color: #73839d;
}

.topbar-live-card--neutral {
    border-color: #d7e2f2;
    background: linear-gradient(180deg, #ffffff 0%, #f6f9ff 100%);
}

.topbar-live-card--info {
    border-color: #b7ccf1;
    background: linear-gradient(180deg, #ffffff 0%, #edf4ff 100%);
}

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

.topbar-live-card--warning {
    border-color: #ead7a0;
    background: linear-gradient(180deg, #fffdf6 0%, #fff7de 100%);
}

.topbar-live-card--danger {
    border-color: #ecb8b8;
    background: linear-gradient(180deg, #fffafa 0%, #fff0f0 100%);
}

.topbar-live-card__badge--neutral,
.topbar-live-card__badge.is-empty {
    background: #eef2f8;
    color: #73839d;
}

.topbar-live-card__badge--info {
    background: #e8f0ff;
    color: #295bb9;
}

.topbar-live-card__badge--success {
    background: #e7f7eb;
    color: #217448;
}

.topbar-live-card__badge--warning {
    background: #fff0bf;
    color: #8a6400;
}

.topbar-live-card__badge--danger {
    background: #ffe2e2;
    color: #b33c3c;
}

/* --- 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: #bfe9cd;
    background: linear-gradient(180deg, #ffffff 0%, #f0fbf4 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: #1f9d55;
    flex: 0 0 auto;
}
.topbar-live-card--whatsapp .topbar-live-card__badge:not(.is-empty) {
    background: #25d366;
    color: #fff;
}
.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: #f0fbf4; }
.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: #1f9d55;
    text-decoration: none;
    text-align: center;
}
.wa-topbar-footer:hover { background: #f0fbf4; }

/* --- 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: #fff;
    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: #1f9d55;
    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: #e7f7ec;
    color: #1f8a4c;
    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, #ffffff 0%, #f7faff 100%);
}

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

.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: #20314a;
}

.topbar-live-dropdown__head span {
    font-size: 0.72rem;
    color: #6e809b;
}

.topbar-live-dropdown__section + .topbar-live-dropdown__section {
    margin-top: 0.72rem;
    padding-top: 0.72rem;
    border-top: 1px solid #ebf0f8;
}

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

.topbar-live-dropdown__section-head strong {
    font-size: 0.77rem;
    color: #4e6180;
    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: #edf3ff;
    color: #2f60bc;
    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: #20314a;
}

.topbar-live-dropdown__state span {
    font-size: 0.74rem;
    color: #6e809b;
}

.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 #dbe5f4;
    background: linear-gradient(180deg, #ffffff 0%, #f9fbff 100%);
    border-left-width: 4px;
    border-left-color: #3a73e5;
}

.topbar-live-item--appointment {
    border-left-color: #3a73e5;
}

.topbar-live-item--reminder {
    border-left-color: #d38a16;
}

.topbar-live-item--expiring-product {
    border-left-color: #c17a15;
}

.topbar-live-item--expired-product {
    border-left-color: #c83a3a;
}

.topbar-live-item--plan-limit {
    border-left-color: #7a5bd6;
}

.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: #20314a;
    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: #e8f1ff;
    color: #2e5eb8;
    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: #ffe7e7;
    color: #b33232;
}

.topbar-live-item--expiring-product .topbar-live-item__title-row em {
    background: #fff1d8;
    color: #9a5f00;
}

.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: #e7f0ff;
    color: #245ac6;
}

.topbar-live-item__kind--reminder {
    background: #fff1d8;
    color: #a36300;
}

.topbar-live-item__kind--expiring-product {
    background: #fff1d8;
    color: #9a5f00;
}

.topbar-live-item__kind--expired-product {
    background: #ffe7e7;
    color: #b33232;
}

.topbar-live-item__body small {
    font-size: 0.73rem;
    color: #4f6484;
    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: #9ca3af;
    font-size: 1rem;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    flex: 0 0 auto;
}

.topbar-live-item__dismiss:hover {
    background: #fee2e2;
    color: #dc2626;
}

.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 #d5e1f4;
    background: #f8fbff;
    cursor: pointer;
}

.app-notification-option:hover {
    border-color: #aec6ef;
    background: #f2f7ff;
}

.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: #1f2f49;
}

.app-notification-option__body small {
    color: #5f7392;
    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: #3f5578;
}

.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: #5f7392;
    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: #a82828;
    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 #d3dceb;
    background: #e7ebf2;
    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: #21324a;
}

.session-corner__meta span {
    font-size: 0.66rem;
    color: #596d89;
}

.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 #c8d6ef;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
    font-size: 0.95rem;
}

.dashboard-search__box input:focus {
    border-color: #6a97ef;
    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 #d5e0f3;
    background: #f7faff;
    color: #5f7290;
    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: #a9c2f0;
    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 #cfdcf1;
    border-radius: 1rem;
    background: #fff;
    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: #1f2d44;
}

.dashboard-search__results-head span {
    font-size: 0.78rem;
    color: #687d9d;
}

.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 #edf2fb;
    background: #fbfdff;
}

.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: #4f6282;
    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: #eef4ff;
    color: #2f60bc;
    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 #d9e4f8;
    border-radius: 0.78rem;
    padding: 0.52rem 0.62rem;
    padding-right: 0.62rem;
    padding-bottom: 0.72rem;
    background: #fbfdff;
    color: #213250;
    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: #adc4ef;
    background: #f2f7ff;
    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: #eaf2ff;
    color: #2f60bc;
    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: #647998;
    font-size: 0.73rem;
    line-height: 1.3;
}

.dashboard-search__meta {
    color: #425a80;
    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: #475569;
}
.dashboard-search__item .dashboard-search__status--planned { background: rgba(44, 109, 245, 0.14); color: #1d4ed8; }
.dashboard-search__item .dashboard-search__status--confirmed { background: rgba(14, 165, 233, 0.14); color: #0369a1; }
.dashboard-search__item .dashboard-search__status--done { background: rgba(34, 197, 94, 0.14); color: #15803d; }
.dashboard-search__item .dashboard-search__status--cancelled { background: rgba(148, 163, 184, 0.18); color: #475569; }
.dashboard-search__item .dashboard-search__status--no_show { background: rgba(239, 68, 68, 0.14); color: #b91c1c; }
.dashboard-search__item .dashboard-search__status--rescheduled { background: rgba(124, 58, 237, 0.14); color: #6d28d9; }

.dashboard-search__item span {
    color: #2e5eb8;
    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: #eaf2ff;
    color: #2f60bc;
    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: #2f6cf6;
    color: #fff;
    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: #2458cb;
    transform: translateY(-1px);
    box-shadow: 0 10px 18px rgba(47, 108, 246, 0.2);
}

.dashboard-search__action-btn--secondary {
    background: #eff4ff;
    color: #2958ad;
}

.dashboard-search__action-btn--secondary:hover {
    background: #dde9ff;
    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: #1f2d44;
}

.dashboard-search__state span {
    font-size: 0.79rem;
    color: #687d9d;
}

.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 #dae4f6;
    background: #f7faff;
    color: #436188;
    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, #ffffff 0%, #f7f9ff 100%);
}

.panel--soft {
    background: #f8fbff;
}

.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: #e9f9f2;
}

.kpi-card__trend.down {
    color: var(--danger);
    background: #fdeeea;
}

.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 #d9e2f0;
    border-radius: 0.9rem;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 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: #e8eef8;
    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, #fff 48%, transparent 50%),
        conic-gradient(#3e7dff 0 56%, #6ad1f2 56% 74%, #f1b264 74% 89%, #2d3e63 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 #c8d6ef;
    background: #f4f8ff;
    border-radius: var(--radius-md);
    padding: 0.8rem;
    font-weight: 600;
    color: #335086;
}

/* 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, #ffffff 0%, #f7f9ff 100%);
}

.consult-form {
    background: linear-gradient(180deg, #fdfefe 0%, #f3f7ff 100%);
    border-color: #d5deee;
}

.consult-form > section {
    border: 1px solid #dbe4f3;
    border-radius: 0.9rem;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    padding: 0.95rem;
}

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

.consult-form > section .form-intro {
    color: #5c6f8e;
    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: #2f6cf6;
}

.consult-intake__badge {
    border: 1px solid #cddbf8;
    background: linear-gradient(180deg, #f6f9ff 0%, #edf4ff 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 #d7e2f3;
    border-radius: 1rem;
    background: linear-gradient(180deg, #ffffff 0%, #f7faff 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, #ffffff 0%, #f3f8ff 100%);
    border-color: #cfdcf5;
}

.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: #1f2f49;
}

.consult-intake-card__head p {
    margin: 0.18rem 0 0;
    color: #60728f;
    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: #ffffff;
    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 #d8e2f4;
    border-radius: 0.95rem;
    background: #fbfdff;
    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: #223a5f;
}

.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 #e1e8f6;
    background: linear-gradient(180deg, #f7fbff 0%, #f1f6ff 100%);
}

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

.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: #d97706;
    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);
    color: #fff;
}

.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: #2f67d8;
    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 #d5deee;
}

.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: #6f82a6;
    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, #fbfdff 0%, #f4f8ff 100%);
}

.consult-placeholder-card strong {
    color: #1f2f49;
}

.consult-placeholder-card p {
    margin: 0;
    color: #60728f;
}

.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 #d7e2f3;
    border-radius: 0.95rem;
    background: linear-gradient(180deg, #ffffff 0%, #f7fbff 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: #1f2f49;
    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: #edf4ff;
    color: #45608a;
    font-size: 0.74rem;
    font-weight: 700;
}

.consent-template-item__meta p {
    margin: 0;
    color: #60728f;
    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: #b62828;
    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 #d7deeb;
    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: #fff;
    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 #9fb1cf;
    background: #fff;
    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, #ffffff 0%, #f3f7ff 100%);
    color: #243754;
    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: #9fb7e4;
    background: linear-gradient(180deg, #f9fbff 0%, #eaf1ff 100%);
    transform: translateY(-1px);
}

.binary-choice > input[type='radio']:checked + label,
.binary-choice > div > input[type='radio']:checked + label {
    border-color: #356ee3;
    background: linear-gradient(130deg, #4b88ff 0%, #2c6df5 100%);
    color: #ffffff;
    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: #6ea2ff;
    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: #5f6f86 transparent transparent;
}

.ts-wrapper.single.dropdown-active .ts-control:after {
    border-width: 0 6px 6px;
    border-color: transparent transparent #5f6f86;
    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 #cfd7e6;
    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: #e9f0fb;
    color: #1f2f46;
}

/* 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: #99b7ff;
}

.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 #d1dae9;
    border-radius: 0.65rem;
    background: linear-gradient(180deg, #ffffff 0%, #f3f7ff 100%);
    color: #20324d;
    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, #f8fbff 0%, #eaf1ff 100%);
    border-color: #b7c7e6;
    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: #356de1;
    color: #fff;
}

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

.btn--consultation-add {
    background: linear-gradient(130deg, #2f5fcc 0%, #1f4db6 100%);
    border-color: #204aa4;
    color: #fff;
}

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

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

.btn--warning:hover {
    background: linear-gradient(130deg, #f8cf57 0%, #e1ad20 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: #1e56cc;
    text-decoration: none;
    font-weight: 600;
}

.panel a:not(.btn):not(.table-sort):hover,
.table a:not(.btn):not(.table-sort):hover {
    color: #1646a7;
}

.btn--add {
    border-color: #9fd7bb;
    background: #ecfbf2;
    color: #166644;
}

.btn--add:hover {
    background: #dff6e9;
}

.btn--danger {
    border-color: #f1b8b8;
    background: #fff2f2;
    color: #a03838;
}

.btn--danger:hover {
    background: #ffe7e7;
}

/* 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: #d6deeb;
    background: transparent;
    color: #54637c;
    box-shadow: none;
}

.btn--ghost:hover {
    background: #f3f6fc;
    border-color: #c2cee2;
    color: #38445a;
}

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

.btn--print {
    border-color: #b9d7ef;
    background: linear-gradient(180deg, #f7fbff 0%, #edf6ff 100%);
    color: #1f4e78;
}

.btn--print:hover {
    background: linear-gradient(180deg, #edf6ff 0%, #e4f1ff 100%);
}

.btn--pdf {
    border-color: #efb4b4;
    background: linear-gradient(180deg, #fff8f8 0%, #fff0f0 100%);
    color: #8a2e2e;
}

.btn--pdf:hover {
    background: linear-gradient(180deg, #fff0f0 0%, #ffe9e9 100%);
}

.btn--email {
    border-color: #a8d8d0;
    background: linear-gradient(180deg, #f4fbfa 0%, #e7f6f2 100%);
    color: #0f6b60;
}

.btn--email:hover {
    background: linear-gradient(180deg, #e7f6f2 0%, #dcf1ec 100%);
    color: #0b574e;
}

.btn--preview {
    border-color: #c9c4ef;
    background: linear-gradient(180deg, #faf9ff 0%, #f0edff 100%);
    color: #4a3fb0;
}

.btn--preview:hover {
    background: linear-gradient(180deg, #f0edff 0%, #e7e2ff 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 #d9e3f6;
    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: #17253d;
}

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

/* 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 #d9e3f6;
    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: #17253d;
}
.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: #2a3a55;
    display: grid;
    gap: 0.2rem;
    margin-bottom: 0.7rem;
    padding: 0.55rem 0.7rem;
    background: #f4f7fc;
    border-radius: 0.55rem;
    border: 1px solid #e3e9f4;
}
.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: #0f1a2c;
    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: #fff6e0;
    border: 1px solid #f1d77a;
    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 #eef2fa;
}

.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 #cfdbf2;
    border-radius: var(--radius-md);
    background: linear-gradient(180deg, #ffffff 0%, #f4f8ff 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: #5d6f8b;
    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: #edf3ff;
    color: #324d7a;
    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: #f4f8ff;
    color: #324d7a;
    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 #efb1b1;
    background: #fff4f4;
    color: #a33c3c;
    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: #ffecec;
    border-color: #e89c9c;
}

.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, #2E6DA4);
    color: #fff;
    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 #dbe5f5;
    border-radius: 0.85rem;
    padding: 0.9rem;
    background: #f9fbff;
}

.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: #eef3ff;
    color: #385072;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.consult-lab-table td {
    background: #fff;
}


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: #f6f9ff;
}

.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: #fdecec;
    color: #9e2f2f;
    border-color: #f4bcbc;
}

/* Positive (for neg/pos tests like FIV/FeLV): keep distinct alert */
.lab-flag--positive {
    background: #fdecec;
    color: #9e2f2f;
    border-color: #f4bcbc;
}

/* 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: #fdf3e2;
    color: #8a5d12;
    border-color: #eccf9a;
}

/* 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: #1A8A5E; }
.lab-band-live--borderline { color: #B8860B; }
.lab-band-live--low,
.lab-band-live--high { color: #C4463A; }

.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 #dce6f7;
    border-radius: 0.6rem;
    overflow: hidden;
    background: #fff;
    font-size: 0.82rem;
}

.schedule-table thead th {
    background: #eef4ff;
    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 #dce6f7;
}

.schedule-table tbody td {
    padding: 0.25rem 0.4rem;
    border-bottom: 1px solid #eef2fa;
    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 #d7deeb;
    border-radius: 0.4rem;
    background: #ffffff;
    color: #5b6b86;
    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: #7aa1e6;
    color: #1f3d78;
    background: #eef4ff;
}

.schedule-table__copy:focus-visible {
    outline: 2px solid #7aa1e6;
    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: #e8f5ee; border-color: #1a8a5e; color: #1a8a5e; }
    100% { background: #ffffff; border-color: #d7deeb; color: #5b6b86; }
}

.schedule-table input[type="time"] {
    width: 7rem;
    padding: 0.22rem 0.35rem;
    font-size: 0.82rem;
    border: 1px solid #d7deeb;
    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: #fafcff;
}

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

.flash--success {
    background: #e6f9f0;
    border: 1px solid #9ad3b6;
    color: #176c44;
}

.flash--error {
    background: #fdeeee;
    border: 1px solid #efb7b7;
    color: #8e2929;
}

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

.flash--info {
    background: #e8f0fa;
    border: 1px solid #b6cde8;
    color: #24567f;
}

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

.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: #6d7890;
    padding-top: 0.7rem;
    padding-bottom: 0.7rem;
    position: sticky;
    top: 0;
    z-index: 2;
    background: #fff;
}

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

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

.table tbody tr:hover {
    background: #edf2fc;
}

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

.table-sort:hover {
    color: #223658;
}

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

.table-sort__icon {
    display: grid;
    place-items: center;
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 999px;
    background: #f3f6fc;
    border: 1px solid #d9e2f2;
    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: #e4edff;
    color: #2f5fc5;
    border-color: #c2d3f7;
}

.table-sort.is-active .table-sort__icon {
    background: #2c6df5;
    color: #fff;
    border-color: #2c6df5;
    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 #d5deee;
    background: #f6f9ff;
    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: #5f7190;
    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 #c8d6ef;
    background: #f4f8ff;
}

.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: #5f7190;
    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 #cfdbef;
    background: #ffffff;
}

.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: #354a6d;
    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: #263a5a;
    background: #fff;
}

.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: #e8f0ff;
}

.table tbody tr.is-selected:hover {
    background: #dce8fc;
}

.sort-direction {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 2.15rem;
}

.sort-direction > span {
    font-size: 0.78rem;
    color: #5f7190;
    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: #2c6df5;
    background: #eaf1ff;
    color: #1f54c0;
}

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

.table--consultations td {
    vertical-align: top;
}

.consultation-list-cell {
    display: grid;
    gap: 0.34rem;
}

.consultation-list-cell--status {
    min-width: 10rem;
}

.consultation-list-cell__title {
    display: block;
    color: #1f2f49;
    font-weight: 800;
    line-height: 1.35;
}

.consultation-list-cell__title--link {
    color: #1e56cc;
}

.consultation-list-cell__title-link {
    color: #1e56cc;
    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: #1646a7;
    text-decoration: none;
}

.consultation-list-cell__meta {
    margin: 0;
    color: #607493;
    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: #8694a7;
}

.consultation-list-dx__value {
    font-size: 0.84rem;
    line-height: 1.35;
    color: #54657f;
    word-break: break-word;
}

.consultation-list-dx__value--confirmed {
    font-weight: 800;
    color: #1f3558;
}

.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 #d8e5f7;
    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: #223a5f;
    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: #5f7393;
    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 #d7e3f6;
    border-radius: 999px;
    background: #fff;
    color: #36517a;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
}

.consultation-list-hover-card__close:hover,
.consultation-list-hover-card__close:focus-visible {
    border-color: #b9cdeb;
    background: #f5f9ff;
    outline: none;
}

.consultation-list-hover-card__section + .consultation-list-hover-card__section {
    margin-top: 0.9rem;
    padding-top: 0.9rem;
    border-top: 1px solid #e6eefb;
}

.consultation-list-hover-card__label {
    margin: 0 0 0.45rem;
    color: #0f2a4a;
    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: #0f2a4a;
}

.consultation-list-hover-panel .consultation-list-hover-card__identity {
    color: #5f7393;
}

.consultation-list-hover-card__content {
    color: #1f3558;
    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: #607493;
    font-size: 0.78rem;
    line-height: 1.35;
}

.consultation-list-hover-card__sale-total {
    color: #1f3558;
    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: #f7faff;
    color: #1f3558;
    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: #5b6f90;
    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: #eaf1ff;
    color: #1b4ca5;
    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: #eef3fb;
    color: #1d324d;
    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: #f7fafe;
    border: 1px solid #e3ebf6;
}

.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: #627692;
}

.consultation-list-hover-card__facts strong {
    font-size: 0.86rem;
    font-weight: 700;
    color: #0f2a4a;
    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: #ffffff;
    border: 1px solid #e3ebf6;
    text-align: center;
}

.consultation-list-hover-card__vitals span {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #627692;
}

.consultation-list-hover-card__vitals strong {
    font-size: 0.85rem;
    font-weight: 700;
    color: #0f2a4a;
}

.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: #627692;
}

.consultation-list-hover-card__lab-template {
    margin: 0.55rem 0 0.3rem;
    font-size: 0.78rem;
    font-weight: 700;
    color: #1d324d;
}

.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: #1f3558;
}

.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 #eef3fb;
    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: #627692;
    background: #f7fafe;
}

.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: #f2ebff;
    border-color: #ddcdfb;
}

.consultation-list-chip--sale {
    color: #0d6b4e;
    background: #eaf9f1;
    border-color: #bfe9d2;
}

.consultation-list-chip--consent {
    color: #1c4ca9;
    background: #eaf1ff;
    border-color: #cadbff;
}

.consultation-list-chip--document {
    color: #5b6473;
    background: #f4f6fa;
    border-color: #dce1ea;
}

.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 #d8e3f7;
    background: #f4f8ff;
    color: #305287;
    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: #e3edff;
    border-color: #b8caf0;
}

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: #f5f8ff;
}

.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: #166534; }
.notif-status--danger { background: #fee2e2; color: #991b1b; }
.notif-status--info { background: #dbeafe; color: #1e40af; }
.notif-status--muted { background: #f1f5f9; color: #64748b; }

.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: #fef2f2;
    border-left: 3px solid #dc2626;
    border-radius: 0 0.3rem 0.3rem 0;
    font-size: 0.75rem;
    color: #991b1b;
}

.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 #d7e2f3;
    border-radius: 14px;
    background: #f8fbff;
}

.consult-note-card p {
    margin: 0.45rem 0 0;
    color: #4d627f;
}

.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: #5b6f90;
    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: #3a5a8c;
}

.grid-loader__spinner[hidden] {
    display: none !important;
}

.grid-loader__spinner-dot {
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 50%;
    border: 2px solid #bcd3ff;
    border-top-color: #2c6df5;
    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: #5b6f90;
    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: #8a9bb5;
}

.pagination__item:not(.is-active):not(.pagination__item--ellipsis):hover {
    background: #edf2fc;
    border-color: #b0c4f0;
}

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: #5b6f90;
    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 #ccd8ed;
    background: #ffffff;
    color: #2c3a53;
    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: #96b4ef;
}

.pagination__item {
    display: inline-flex;
    min-width: 2rem;
    justify-content: center;
    padding: 0.35rem 0.5rem;
    border: 1px solid #d3dced;
    border-radius: 0.55rem;
    text-decoration: none;
    color: #2c3a53;
    background: #fff;
    font-weight: 600;
}

.pagination__item.is-active {
    border-color: #8fb1ff;
    background: #eaf1ff;
    color: #1e56cc;
}

/* 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 #d3def2;
    border-radius: 1rem;
    background: linear-gradient(135deg, #ffffff 0%, #f5f9ff 100%);
}

.consult-hero__eyebrow {
    margin: 0;
    color: #607493;
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.consult-hero__main h2 {
    margin: 0;
    color: #1a2d49;
    font-size: 1.7rem;
    line-height: 1.08;
}

.consult-hero__subtitle,
.consult-hero__meta {
    margin: 0;
    color: #50647f;
    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 #d4e0f5;
    border-radius: 1rem;
    background: linear-gradient(180deg, #ffffff 0%, #f7faff 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: #1d3251;
    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 #d0dbef;
    border-radius: 0.95rem;
    padding: 0.95rem;
    background: linear-gradient(180deg, #ffffff 0%, #f7faff 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: #1f2f49;
    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 #cfd9ed;
    background: #f2f6ff;
    color: #2a4268;
    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: #e8effd;
    border-color: #b8c9e8;
}

.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 #d5e0f2;
    border-radius: 0.82rem;
    background: #ffffff;
    padding: 0.65rem 0.72rem;
    min-height: 4.05rem;
}

.consult-summary__item--wide {
    grid-column: span 3;
}

.consult-summary__label {
    color: #5a6d8d;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.035em;
    margin-bottom: 0.26rem;
}

.consult-summary__value {
    color: #162640;
    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 #cfdbf2;
    background: #edf3ff;
    color: #274268;
    font-size: 0.82rem;
    font-weight: 600;
}

.consult-tag--muted {
    background: #f5f7fb;
    border-color: #d8e1ee;
    color: #607493;
}

.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 #d9e3f4;
    border-radius: 0.8rem;
    background: #ffffff;
    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: #1f304b;
    font-size: 0.98rem;
}

.consult-rich__item > div {
    color: #2b3f5f;
    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 #d6e0f0;
}

.consult-objective-list p {
    margin: 0 0 0.2rem;
    color: #223451;
    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 #e3eaf6;
}

.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: #1d3251;
    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 #d8e2f3;
    border-radius: 0.85rem;
    background: #fff;
}

.consult-vital-pill span {
    color: #677b99;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.consult-vital-pill strong {
    color: #1a2f4b;
    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 #dce6f6;
    border-radius: 0.75rem;
    background: #f8fbff;
}

.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 #d9e2f2;
    background: #fff;
    object-fit: cover;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #6f7f9d;
    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: #f3f7ff;
    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: #f3f7ff;
}

.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, #ffffff 0%, #f7fbff 100%);
    border-color: #d2def3;
}

.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: #1a2b47;
    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 #d5e2f7;
    border-radius: 0.9rem;
    background: #ffffff;
    padding: 0.7rem 0.8rem;
}

.client-profile-item--wide {
    grid-column: span 2;
}

.client-profile-item__label {
    margin: 0 0 0.22rem;
    color: #5f7190;
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.client-profile-item__value {
    margin: 0;
    color: #1b2d49;
    font-size: 1.01rem;
    font-weight: 600;
    line-height: 1.35;
    word-break: break-word;
}

.client-profile-notes {
    border: 1px solid #d4e0f5;
    border-radius: 0.95rem;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    padding: 0.9rem 1rem;
}

.client-profile-notes__head h3 {
    margin: 0 0 0.45rem;
    color: #1b2d49;
}

.client-profile-notes p {
    margin: 0;
    color: #3f5576;
    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, #fbfcff 0%, #f3f7ff 100%);
    border: 1px solid #d6e0f1;
}

.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 #cfdbef;
    border-radius: 1.15rem;
    background: linear-gradient(155deg, #ffffff 0%, #eef5ff 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 #ffffff;
    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%, #f7fbff 0%, #ebf4ff 55%, #e2eeff 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 #d3def2;
    border-radius: 1rem;
    background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
    align-content: start;
}

.pet-view__eyebrow {
    margin: 0;
    color: #607493;
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.pet-view__hero-main h2 {
    margin: 0;
    color: #1a2d49;
    font-size: 1.75rem;
    line-height: 1.08;
}

.pet-view__subtitle,
.pet-view__meta {
    margin: 0;
    color: #50647f;
    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 #d6e0f2;
    border-radius: 0.75rem;
    background: #f8fbff;
}

.pet-hero-metric span {
    color: #5f7597;
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.pet-hero-metric strong {
    color: #1f3453;
    font-size: 0.9rem;
    line-height: 1.25;
}

.pet-hero-metric--age {
    border-color: #bcd4f6;
    background: #eef5ff;
}

.pet-hero-metric--weight {
    border-color: #b9e0d4;
    background: #ecf9f3;
}

.pet-hero-metric--ok {
    border-color: #97d1b2;
    background: #e7f7ee;
}

.pet-hero-metric--off {
    border-color: #d5dfef;
    background: #f4f7fc;
}

.pet-hero-metric--danger {
    border-color: #e8b7b7;
    background: #fdeeee;
}

.pet-hero-metric--calm {
    border-color: #b8dee8;
    background: #ebf8fc;
}

.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 #d4e0f5;
    border-radius: 0.85rem;
    background: linear-gradient(180deg, #ffffff 0%, #f7faff 100%);
}

.pet-kpi-card span {
    color: #677b99;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.pet-kpi-card strong {
    color: #1d3251;
    font-size: 1.04rem;
    line-height: 1.3;
}

.pet-kpi-card small {
    color: #607493;
    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: #fff;
}

.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 #d8e2f3;
    border-radius: 0.85rem;
    background: #fff;
}

.pet-consult-timeline__main {
    display: grid;
    gap: 0.14rem;
    min-width: 0;
}

.pet-consult-timeline__main strong {
    color: #1d3251;
    line-height: 1.3;
}

.pet-consult-timeline__main span,
.pet-consult-timeline__main small {
    color: #607493;
    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: #2c4264;
    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: #1f304b;
    line-height: 1.35;
}

.pet-history-cell span {
    color: #607493;
    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 #d8e2f3;
    border-radius: 0.85rem;
    background: #fff;
}

.pet-weight-card__stats span,
.pet-weight-card__delta span {
    color: #677b99;
    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: #1a2f4b;
    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 #d8e2f3;
    border-radius: 0.85rem;
    background: #fff;
}

.pet-weight-history-list__item strong {
    color: #1d3251;
}

.pet-weight-history-list__item span {
    color: #607493;
    font-size: 0.82rem;
    text-align: right;
}

.link-share-card {
    display: grid;
    gap: 0.75rem;
    padding: 0.95rem 1rem;
    border: 1px solid #d9e2f2;
    border-radius: 0.95rem;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 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;
}

.consult-doc-thumb {
    display: block;
    border: 1px solid #d8e2f2;
    border-radius: 0.85rem;
    overflow: hidden;
    background: #fff;
    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: #a9c0ea;
    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: #f8fbff;
}

.consult-doc-thumb__file {
    display: grid;
    place-items: center;
    background: linear-gradient(180deg, #f9fbff 0%, #eef4ff 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: #0b1220;
}

.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: #fff;
    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 #d9e2f2;
    border-radius: 0.9rem;
    background: #fff;
    color: #20344f;
    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 #efb0b0;
    border-radius: 999px;
    background: rgba(255, 244, 244, 0.96);
    color: #b33636;
    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: #ffe6e6;
    border-color: #e18b8b;
}

.consultation-photo-card img,
.upload-preview-card img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 0.7rem;
    border: 1px solid #dce4f2;
    background: #f8fbff;
}

.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 #c8d7ef;
    background: linear-gradient(180deg, #f9fbff 0%, #eef4ff 100%);
    color: #2b4a86;
    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: #20344f;
    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 #d9e2f2;
    border-radius: 0.9rem;
    background: #fff;
}

.consent-document-item__meta {
    display: grid;
    gap: 0.16rem;
}

.consent-document-item__meta strong {
    color: #1f2f49;
}

.consent-document-item__meta span {
    color: #60728f;
    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 #d8e1f2;
    border-radius: 0.9rem;
    background: linear-gradient(180deg, #fff 0%, #f8fbff 100%);
}

.consent-summary-chip strong {
    color: #60728f;
    font-size: 0.73rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.consent-summary-chip span {
    color: #1f2f49;
    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 #cddaf4;
    background: #f4f8ff;
    color: #28406a;
}

.consent-document-template-pill span {
    color: #60728f;
}

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

.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: #20314d;
    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 #d9e2f2;
    border-radius: 0.95rem;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 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 #cbd9f2;
    border-radius: 999px;
    background: #fff;
    color: #2a4b87;
    font-weight: 700;
    cursor: pointer;
}

.consent-placeholder-chip:hover {
    background: #edf4ff;
    border-color: #2c6df5;
}

.consent-preview-card {
    display: grid;
    gap: 0.65rem;
    padding: 0.9rem;
    border-radius: 0.9rem;
    border: 1px solid #dde6f5;
    background: #fff;
    min-height: 18rem;
}

.consent-preview-card h4 {
    margin: 0;
    color: #1f2f49;
}

.consent-preview-card__body {
    color: #31445f;
    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: #fff;
    border: 1px solid #d9e2f2;
}

/* 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: #fff;
    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 #d9e2f2;
    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 #d9e2f2;
    border-radius: 1rem;
    background: #fff;
}

.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: #20344f;
    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: #e5f8ef;
    color: #157148;
    border: 1px solid #b7e6cf;
}

.status-badge--pending {
    background: #fff5e8;
    color: #9d5c0d;
    border: 1px solid #f1d19f;
}

.status-badge--info {
    background: #e9f4ff;
    color: #1c4ca9;
    border: 1px solid #c4dbff;
}

.status-badge--warning {
    background: #fff0e2;
    color: #9b4a10;
    border: 1px solid #f0c79e;
}

.status-badge--muted {
    background: #eef2f7;
    color: #4f6077;
    border: 1px solid #d3dbe7;
}

.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: #146746;
    background: #e8f8f0;
    border-color: #bfe8d1;
}

.status-pill--blue {
    color: #1c4ca9;
    background: #e9f1ff;
    border-color: #c4d8ff;
}

.tox.tox-tinymce {
    border-radius: 0.65rem;
    border-color: #d5deee;
}

.tox .tox-toolbar,
.tox .tox-toolbar__primary,
.tox .tox-menubar {
    background: #f9fbff;
}

.status-badge--rejected {
    background: #fdecec;
    color: #a03737;
    border: 1px solid #eeb9b9;
}

.status-badge--deschisa {
    background: #fff5e8;
    color: #9d5c0d;
    border: 1px solid #f1d19f;
}

.status-badge--finalizata {
    background: #e5f8ef;
    color: #157148;
    border: 1px solid #b7e6cf;
}

.logo-thumb {
    width: 3.2rem;
    height: 3.2rem;
    border-radius: 0.5rem;
    object-fit: cover;
    border: 1px solid #d9e2f2;
    background: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.68rem;
    text-align: center;
    color: #6f7f9d;
    padding: 0.2rem;
}

.logo-thumb--empty {
    background: #f3f7ff;
}

.logo-box {
    width: 8rem;
    height: 8rem;
    border-radius: 0.8rem;
    object-fit: cover;
    border: 1px solid #d9e2f2;
    background: #fff;
    margin: 0.6rem 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.logo-box--empty {
    color: #6f7f9d;
    font-size: 0.85rem;
    background: #f3f7ff;
}

.avatar-crop {
    margin-top: 0.85rem;
    padding: 0.85rem;
    border: 1px solid #d9e2f2;
    border-radius: 0.8rem;
    background: #f8fbff;
    display: grid;
    gap: 0.65rem;
    max-width: 22rem;
}

.avatar-crop__canvas-wrap {
    width: 100%;
    max-width: 18rem;
    border: 1px solid #d6e0f1;
    border-radius: 0.75rem;
    overflow: hidden;
    background: #f3f7ff;
}

.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: #4e5d78;
}

.signature-crop {
    margin-top: 0.85rem;
    padding: 0.85rem;
    border: 1px solid #d9e2f2;
    border-radius: 0.8rem;
    background: #f8fbff;
    display: grid;
    gap: 0.65rem;
    max-width: 32rem;
}

.signature-crop__hint {
    margin: 0;
    font-size: 0.8rem;
    color: #6b7280;
    line-height: 1.4;
}

.signature-crop__canvas-wrap {
    width: 100%;
    border: 1px dashed #b8c6e3;
    border-radius: 0.6rem;
    overflow: hidden;
    background: #f3f7ff;
}

.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: #4e5d78;
}

.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 #d9e2f2;
    border-radius: 0.8rem;
    background: #ffffff;
    max-width: 32rem;
}

.signature-current__label {
    margin: 0 0 0.4rem;
    font-size: 0.8rem;
    color: #6b7280;
    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 #e5edf9;
    border-radius: 0.5rem;
    background: linear-gradient(45deg, #f5f8fc 25%, transparent 25%, transparent 75%, #f5f8fc 75%),
                linear-gradient(45deg, #f5f8fc 25%, transparent 25%, transparent 75%, #f5f8fc 75%);
    background-size: 16px 16px;
    background-position: 0 0, 8px 8px;
    background-color: #ffffff;
}

.calendar-legend {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    color: #5a6883;
    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: #2c6df5;
}

.calendar-legend__dot--done {
    background: #1f9f6f;
}

.calendar-legend__dot--cancelled {
    background: #d45d5d;
}

.calendar-legend__dot--confirmed {
    background: #1c8c9a;
}

.calendar-legend__dot--no-show {
    background: #d27a1b;
}

.calendar-legend__dot--rescheduled {
    background: #7b8798;
}

.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);
    color: #fff;
    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: #223250;
    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: #6f86aa;
    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: #fff;
    border: 1px solid #d6e2f4;
    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 #d3dceb;
    border-radius: 0.5rem;
    padding: 0.42rem 0.55rem;
    font: inherit;
    color: #1f3056;
    background: #fff;
}

.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 #d6e2f4;
    border-radius: 0.55rem;
    padding: 0 0.7rem 0 2rem !important;
    font: inherit;
    font-size: 0.83rem;
    background: #fff;
    color: #1f3056;
    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: #8497b3;
}

.appointments-calendar__search input:focus-visible {
    outline: 0;
    border-color: #9eb8e7;
    background: #f7faff;
    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 #d6e2f4;
    background: #fff;
    color: #6f86aa;
    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: #9eb8e7;
    background: #f7faff;
    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: #324868;
    font-size: 0.85rem;
    line-height: 1.45;
}

.appointments-calendar__help-popover[hidden] {
    display: none !important;
}

.appointments-calendar__help-popover strong {
    color: #1c2a45;
    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: #4d5e7c;
    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: #6f86aa;
    transition: transform 0.16s ease;
}

.appointments-doctor-picker__trigger--compact svg:last-child {
    color: #6f86aa;
}

.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: #1c2a45;
    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: #c8d6ef;
    background: #f6f9ff;
    color: #1e56cc;
    font-weight: 700;
}

.appointment-inline-picker__toggle:hover,
.appointment-inline-picker__toggle:focus-visible {
    background: #ebf2ff;
    border-color: #9eb8e7;
    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 #cfdbef;
    background: #f7faff;
    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: #1c2a45;
    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: #eef3fc;
    border-radius: 999px;
}

.appointments-scrollbar::-webkit-scrollbar-thumb {
    background: #90a8d1;
    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);
    color: #fff;
}

.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 #e0e8f8;
    background: #fff;
    color: #2a3b59;
    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: #f3f7ff;
}

.appointments-month-day.is-drop-target {
    border-color: #2c6df5;
    background: #eaf1ff;
    box-shadow: inset 0 0 0 1px rgba(44, 109, 245, 0.25);
}

.appointments-month-day.is-outside {
    color: #a2afc6;
    background: #fbfcff;
}

.appointments-month-day.is-active {
    border-color: #2c6df5;
    background: #ebf2ff;
    color: #204ca5;
}

.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 #d4e0f5;
    background: #fff;
    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 #2c6df5;
    border-radius: 0.38rem;
    background: #f7faff;
    padding: 0.16rem 0.22rem;
    color: #2a3b59;
}

.appointments-month-day__item small {
    font-size: 0.66rem;
    color: #637594;
}

.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: #fff;
    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: #eef4ff;
    border: 1px solid #cfdcf6;
    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 #dce6f6;
    border-radius: 0.8rem;
    background: #fff;
    overflow: hidden;
    display: grid;
    grid-template-rows: auto 1fr;
}

.appointments-week-cards__day.is-active {
    border-color: #2c6df5;
    box-shadow: 0 0 0 1px rgba(44, 109, 245, 0.15);
}

.appointments-week-cards__day.is-drop-target {
    border-color: #2c6df5;
    box-shadow: 0 0 0 1px rgba(44, 109, 245, 0.25);
    background: #eef4ff;
}

.appointments-week-cards__head {
    border: 0;
    border-bottom: 1px solid #e2eaf7;
    background: #f8fbff;
    padding: 0.5rem;
    text-align: left;
    display: grid;
    gap: 0.08rem;
    cursor: pointer;
}

.appointments-week-cards__head small {
    text-transform: capitalize;
    color: #667996;
}

.appointments-week-cards__head strong {
    font-size: 0.88rem;
    color: #21324f;
}

.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: #243450;
    line-height: 1.1;
}

.appointments-week-agenda-entry__time span {
    font-size: 0.67rem;
    color: #5e7191;
    line-height: 1.1;
}

.appointments-week-agenda-entry__time small {
    font-size: 0.63rem;
    color: #8a98b1;
    line-height: 1.1;
}

.appointments-week-slot {
    display: grid;
    grid-template-columns: 2.8rem 1fr;
    gap: 0.3rem;
    align-items: stretch;
    border: 1px dashed #dbe5f7;
    border-radius: 0.55rem;
    padding: 0.3rem 0.34rem;
    background: #fbfdff;
    min-height: 3rem;
}

.appointments-week-slot.is-drop-target {
    border-color: #2c6df5;
    background: #eaf1ff;
    box-shadow: inset 0 0 0 1px rgba(44, 109, 245, 0.2);
}

.appointments-week-slot__time {
    font-size: 0.64rem;
    color: #5f7190;
    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: #1f2d44;
    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: #324563;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.appointments-week-slot__more {
    font-size: 0.66rem;
    color: #607496;
    font-weight: 700;
}

.appointments-week-cards__empty {
    color: #6f819e;
    font-size: 0.78rem;
    margin: 0;
}

.appointments-week-cards__empty--agenda {
    border: 1px dashed #d6e1f4;
    border-radius: 0.7rem;
    background: linear-gradient(180deg, #fbfdff 0%, #f5f9ff 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: #42536f;
}

.appointments-week-cards__empty--agenda span {
    font-size: 0.7rem;
    color: #7283a0;
}

.appointments-agenda-card {
    border-left: 3px solid #2c6df5;
    border-radius: 0.58rem;
    text-decoration: none;
    background: #f7faff;
    color: #243450;
    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: #eef4ff;
}

.appointments-agenda-card--block {
    background: #fff7ef;
}

.appointments-agenda-card--block:hover {
    background: #ffefd9;
}

.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: #607292;
}

.appointments-agenda-card__meta span {
    display: block;
    font-size: 0.74rem;
}

.appointments-agenda-card__meta small {
    display: block;
    font-size: 0.67rem;
    color: #607292;
}

.appointments-agenda-card__pet {
    display: inline-flex !important;
    align-items: center;
    gap: 0.18rem;
    font-size: 0.69rem;
    color: #324563 !important;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.appointments-month-day__item--block {
    background: #fff6ec;
}

.appointments-month-day__item--block strong,
.appointments-month-day__item--block small {
    color: #7b4d26;
}

.appointments-week {
    --doctor-cols: 7;
    --doctor-col-width: 15rem;
    min-width: 52rem;
    width: max-content;
    max-width: none;
    border: 1px solid #d8e3f7;
    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 #dce6f7;
    background: #f8fbff;
    position: sticky;
    top: 0;
    z-index: 6;
}

.appointments-week__time-header {
    position: sticky;
    left: 0;
    z-index: 7;
    border-right: 1px solid #dce6f7;
    padding: 0.55rem 0.4rem;
    font-size: 0.76rem;
    color: #586a8a;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: #f8fbff;
}

.appointments-week__day-header {
    padding: 0.5rem 0.55rem;
    border-right: 1px solid #dce6f7;
    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: #63728d;
}

.doctor-header__name {
    display: grid;
    gap: 0;
    min-width: 0;
}

.doctor-header__name strong {
    font-size: 0.87rem;
    color: #1c2a45;
    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: #fff;
    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 #d7e1f2;
    background: #fff;
}

.doctor-lock-btn {
    border: 1px solid #d5deef;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 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: #6f86aa;
    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: #9fb8e8;
    color: #2c6df5;
    background: linear-gradient(180deg, #ffffff 0%, #edf4ff 100%);
    transform: translateY(-1px);
    outline: 0;
}

.doctor-lock-btn.is-blocked {
    border-color: #efb1b1;
    color: #c73a3a;
    background: linear-gradient(180deg, #fff9f9 0%, #ffecec 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: #df8a8a;
    color: #b32020;
    background: linear-gradient(180deg, #fff6f6 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 #dce6f7;
    background: #fbfdff;
}

.appointments-week__time-tick {
    position: absolute;
    right: 0.35rem;
    transform: translateY(-50%);
    font-size: 0.63rem;
    color: #7e8ca5;
    font-weight: 600;
}

.appointments-week__time-tick.is-hour {
    font-size: 0.72rem;
    color: #607292;
    font-weight: 700;
}

.appointments-week__time-tick.is-half-hour {
    font-size: 0.6rem;
    color: #8a97ae;
}

.appointments-week__time-col .appointments-week__time-tick:first-child {
    transform: translateY(0);
}

.appointments-week__day-col {
    position: relative;
    border-right: 1px solid #e2e9f8;
    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,
            #ffffff 0,
            #ffffff calc(var(--slot-row-height, 30px) - 1px),
            #edf3ff calc(var(--slot-row-height, 30px) - 1px),
            #edf3ff 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: #3b5071;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.appointment-card span {
    font-size: 0.68rem;
    line-height: 1.1;
    color: #364560;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.appointment-card__meta {
    color: #44546f;
}

.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: #8a5f35;
}

/* 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: #1f2937;
    color: #fff;
    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: #59708f;
    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: #9eb7e8;
}

.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: #fff;
    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: #f8fbff;
    border-right: 1px solid #dce6f7;
    font-size: 0.76rem;
    font-weight: 700;
    color: #586a8a;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.appointments-week--horizontal .appointments-week__time-track {
    position: relative;
    flex: 0 0 auto;
    height: 2.3rem;
    background: #f8fbff;
}

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

.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: #fbfdff;
    border-right: 1px solid #dce6f7;
}

.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,
            #ffffff 0,
            #ffffff calc(var(--slot-row-height, 30px) - 1px),
            #edf3ff calc(var(--slot-row-height, 30px) - 1px),
            #edf3ff 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 #d9e3f6;
    border-radius: 1rem;
    background: linear-gradient(180deg, #ffffff 0%, #f7faff 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: #20314d;
}

.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 #d6e0f2;
    border-radius: 999px;
    background: #f6f9ff;
    color: #48617f;
    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 #dbe5f5;
    background: #f6f9ff;
}

.appointment-quick-actions__status--primary {
    color: #1f58d2;
}

.appointment-quick-actions__status--info {
    color: #1a7782;
    background: #ebfbfd;
    border-color: #bfe9ee;
}

.appointment-quick-actions__status--success {
    color: #15724b;
    background: #ecfbf2;
    border-color: #bce3ca;
}

.appointment-quick-actions__status--warning {
    color: #925819;
    background: #fff7e8;
    border-color: #f1d39b;
}

.appointment-quick-actions__status--danger {
    color: #ad3e3e;
    background: #fff1f1;
    border-color: #efc2c2;
}

.appointment-quick-actions__status--muted {
    color: #5d6d81;
    background: #f4f6fa;
    border-color: #d9dee8;
}

.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 #dae4f3;
    border-radius: 0.9rem;
    background: #ffffff;
    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: #bbe1e7;
    background: linear-gradient(180deg, #ffffff 0%, #f1fdff 100%);
}

.appointment-quick-actions__option--success {
    border-color: #b9dec8;
    background: linear-gradient(180deg, #ffffff 0%, #f0fbf4 100%);
}

.appointment-quick-actions__option--warning {
    border-color: #efd29f;
    background: linear-gradient(180deg, #ffffff 0%, #fffaf0 100%);
}

.appointment-quick-actions__option--danger {
    border-color: #efc4c4;
    background: linear-gradient(180deg, #ffffff 0%, #fff3f3 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 #cfe0f5;
    background: #ffffff;
    color: #20314d;
    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: #ecfbf2;
    border-color: #b9dec8;
    color: #166746;
}

.appointment-toast--error {
    background: #fff1f1;
    border-color: #efc4c4;
    color: #9a3535;
}

.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 #d9e3f6;
    background: #fff;
    box-shadow: 0 24px 44px rgba(22, 39, 72, 0.28);
}

.modal-head {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #fff;
    border-bottom: 1px solid #e2eaf7;
    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: #ffffff;
    border-top: 1px solid #dce5f5;
    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 #dce5f5;
    border-radius: 0.75rem;
    background: #f8fbff;
    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: #4b5f83;
    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 #e3e9f4;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #ffffff 35%);
}

.auth-page {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 1rem;
    background: linear-gradient(180deg, #e9eef5 0%, var(--bg-page) 100%);
}

.auth-card {
    width: min(100%, 30rem);
    background: #fff;
    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, #e9eef5 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: #8290a7;
    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 #d4deef;
    background: #f6f9ff;
    color: #2d3e5d;
    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 #d6e2f3;
    border-radius: 0.95rem;
    background: linear-gradient(180deg, #ffffff 0%, #f4f8ff 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: #173255;
}

.sale-list-summary__head span {
    font-size: 0.82rem;
    color: #5d6f88;
}

.sale-list-summary__meta {
    font-size: 0.86rem;
    color: #3f5472;
}

.sale-list-summary__meta strong {
    color: #173255;
}

.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: #d2dff1;
    background: #fbfdff;
    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: #4f6280;
}

.sale-list-kpi-card h4 {
    margin: 0;
    font-size: 1.5rem;
    line-height: 1.08;
    color: #143156;
}

.sale-list-kpi-card--main {
    background: linear-gradient(145deg, #ffffff 0%, #e6f0ff 100%);
    border-color: #aac6ee;
}

.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: #314762;
    line-height: 1.28;
    font-size: 0.88rem;
}

.sale-list-lines__item strong {
    display: block;
    color: #213650;
}

.sale-list-lines__item span {
    font-size: 0.8rem;
    color: #667a95;
}

.sale-list-lines__more {
    margin: 0.2rem 0 0;
    font-size: 0.8rem;
    color: #5f738f;
}

.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: #eef2f9;
    border: 1px solid #dbe3f1;
    font-size: 0.78rem;
    line-height: 1.2;
    color: #25344d;
    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: #9aa8c1;
    font-weight: 700;
}

.sale-line-chip__qty {
    color: #49617f;
    font-weight: 500;
}

.sale-line-chip--auto {
    background: #f7f3ea;
    border-color: #ead9b8;
    border-style: dashed;
    color: #6a5422;
}

.sale-line-chip--auto .sale-line-chip__qty {
    color: #7a6027;
}

.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 #f4d8a8;
    background: #fff8ec;
}

.kpi-card--warn h4 {
    color: #a85b0c;
}

.kpi-card--accent {
    border: 1px solid #bfdcff;
    background: #eef7ff;
}

.kpi-card--accent h4 {
    color: #1d4bb0;
}

/* 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 #d1d5db;
    background: #fff;
    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 #e5e7eb;
}

.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: #6b7280;
    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,
        #e5e7eb 0px, #e5e7eb 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: #9ca3af;
    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, #ffffff 0%, #f4f8ff 100%);
    border: 1px solid #dbe5f3;
    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: #b42318;
    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: #2c6df5;
    color: #fff;
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 700;
}

.sale-drafts-panel__editing {
    font-size: 0.78rem;
    font-weight: 600;
    color: #1d4bb0;
    background: #eaf1fc;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    border: 1px solid #c4d6ef;
}

.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 #dbe5f3;
    background: #ffffff;
    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: #f4f8ff;
    border-color: #aac4e9;
}
.sale-drafts-panel__item.is-active {
    background: #eaf1fc;
    border-color: #7ca5e8;
    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: #1d324d;
    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: #5a6c87;
    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: #0f2a4a;
    white-space: nowrap;
}
.sale-drafts-panel__item-body:hover {
    color: #1d4bb0;
}
.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: #ffffff;
    color: #1d324d;
    border: 1px solid #d8e0ec;
    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 #eef1f7;
}
.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: #1d324d;
    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: #0f2a4a;
    white-space: nowrap;
}
.sale-drafts-panel__item-popover-total {
    display: flex;
    justify-content: space-between;
    padding-top: 0.4rem;
    border-top: 1px solid #eef1f7;
    color: #0f2a4a;
    font-weight: 600;
}

.sale-drafts-panel__item-number {
    font-weight: 700;
    color: #0f2a4a;
    white-space: nowrap;
    font-size: 0.8rem;
}
.sale-drafts-panel__item-client {
    color: #40567a;
    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: #8798b3;
}

.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 #dbe5f3;
    border-radius: 0;
    background: transparent;
    color: #9aa8c1;
    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: #fdebea;
    color: #9c2a20;
}
.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: #627692;
    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 #dbe5f3;
    border-radius: 0.55rem;
    background: #ffffff;
    font-size: 0.9rem;
    color: #1d324d;
    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: #7ca5e8;
    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 #dbe5f3;
    background: #ffffff;
    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: #7ca5e8;
    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: #1d324d;
    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 #dbe5f3;
    border-radius: 0.55rem;
    background: #f7fafe;
    color: #1d324d;
    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: #f4f8ff;
    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 #dbe5f3;
    border-radius: 0.85rem;
    background: #ffffff;
    display: grid;
    gap: 0.6rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.sale-line-row.is-active {
    border-color: #7ca5e8;
    box-shadow: 0 0 0 3px rgba(83, 132, 215, 0.12);
    background: #fbfdff;
}

.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: #9aa8c1;
    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: #fdebea; color: #9c2a20; }

/* 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: #b06900;
    letter-spacing: -0.05em;
}
.sale-line-row__remove--cascade:hover { background: #fdf0d8; 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: #eef2f9;
    color: #1d324d;
    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: #ffffff !important;
    color: #40567a !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 #dbe5f3;
    border-radius: 0.85rem;
    background: #ffffff;
    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: #1d324d;
    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: #2254a6;
    text-decoration: underline;
}

.sale-lines-summary__remove-btn {
    appearance: none;
    border: 1px solid #f0b9b3;
    background: #fdebea;
    color: #9c2a20;
    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: #eef2f9;
    border: 1px solid #dbe5f3;
    font-size: 0.76rem;
    line-height: 1.3;
    color: #40567a;
    font-weight: 600;
    white-space: nowrap;
}

.sale-pill--total {
    background: #eaf1fc;
    border-color: #c4d6ef;
    color: #0f2a4a;
    font-weight: 700;
}

.sale-pill--ok {
    background: #e6f7ec;
    border-color: #b9e3c7;
    color: #1f6a3d;
}
.sale-pill--warn {
    background: #fff6e2;
    border-color: #ead9a8;
    color: #7a5705;
}
.sale-pill--danger {
    background: #fdebea;
    border-color: #f0b9b3;
    color: #9c2a20;
}

.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: #627692;
    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 #dbe5f3;
    border-radius: 0.55rem;
    background: #ffffff;
    font-size: 0.95rem;
    font-weight: 600;
    color: #1d324d;
    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: #7ca5e8;
    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 #dbe5f3;
    border-radius: 0.55rem;
    background: #f7fafe;
    font-size: 1.05rem;
    font-weight: 800;
    color: #0f2a4a;
    white-space: nowrap;
}

/* --- Qty stepper --- */
.qty-stepper {
    display: flex;
    align-items: stretch;
    border: 1px solid #dbe5f3;
    border-radius: 0.55rem;
    background: #ffffff;
    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: #1d324d;
    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: #f4f7fb;
    color: #1d324d;
    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 #dbe5f3; }
.qty-stepper__btn:last-child { border-left: 1px solid #dbe5f3; }
.qty-stepper__btn:hover { background: #e6edf7; }
.qty-stepper__btn:active { background: #d6e1f3; }

.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: #eef2f9;
    border: 1px solid #dbe5f3;
    color: #40567a;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.6;
}

.chip--unit {
    background: #eaf1fc;
    border-color: #c4d6ef;
    color: #2254a6;
}

.chip--ok {
    background: #e6f7ec;
    border-color: #b9e3c7;
    color: #1f6a3d;
}

.chip--warn {
    background: #fff6e2;
    border-color: #ead9a8;
    color: #7a5705;
}

.chip--danger {
    background: #fdebea;
    border-color: #f0b9b3;
    color: #9c2a20;
}

.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: #eef2f9;
    border: 1px solid #dbe5f3;
    font-size: 0.76rem;
    line-height: 1.3;
    color: #40567a;
    font-weight: 600;
}

.sale-line-chip--lot {
    background: #f7f3ea;
    border-color: #ead9b8;
    color: #6a5422;
}

.sale-line-chip--consumable {
    background: #eef4fc;
    border-color: #c7daf2;
    color: #2c4570;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.72rem;
}

.sale-line-chip--ok {
    background: #e6f7ec;
    border-color: #b9e3c7;
    color: #1f6a3d;
}
.sale-line-chip--warn {
    background: #fff6e2;
    border-color: #ead9a8;
    color: #7a5705;
}
.sale-line-chip--danger {
    background: #fdebea;
    border-color: #f0b9b3;
    color: #9c2a20;
}

/* --- 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 #dbe5f3;
    border-radius: 0.75rem;
    background: #fbfdff;
    font-size: 0.85rem;
    color: #627692;
}

.sale-line-card {
    border: 1px solid #dbe5f3;
    border-radius: 0.85rem;
    padding: 0.7rem 0.85rem 0.75rem;
    background: #ffffff;
    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: #c4d6ef;
    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: #eef2f9;
    color: #1d324d;
    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: #0f2a4a;
    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: #9aa8c1;
    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: #fdebea; color: #9c2a20; }

.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: #627692;
    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 #dbe5f3;
    border-radius: 0.45rem;
    font-size: 0.88rem;
    font-weight: 700;
    color: #1d324d;
    background: #ffffff;
    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: #7ca5e8;
    box-shadow: 0 0 0 3px rgba(83, 132, 215, 0.14);
}

.sale-line-card__hint {
    color: #9aa8c1;
    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 #dbe5f3;
    border-radius: 0.45rem;
    background: #f7fafe;
    font-size: 0.95rem;
    font-weight: 800;
    color: #0f2a4a;
    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: #ffffff;
}
.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: #f7fafe;
    border: 1px solid #e6ecf6;
}
.sale-summary-grid span {
    font-size: 0.78rem;
    color: #627692;
    font-weight: 600;
}
.sale-summary-grid strong {
    font-size: 0.95rem;
    color: #0f2a4a;
    font-weight: 700;
}

/* --- Payment presets (segmented control) --- */
.sale-payment-presets {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px;
    border: 1px solid #dbe5f3;
    border-radius: 0.55rem;
    background: #f4f7fb;
    width: 100%;
}
.sale-payment-presets .btn {
    flex: 1;
    background: transparent;
    border: 0;
    color: #49617f;
    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: #1d4bb0; }
.sale-payment-presets .btn.is-active {
    background: #ffffff;
    color: #1d4bb0;
    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: #627692;
    font-weight: 600;
}
.sale-payment-fields input {
    padding: 0.45rem 0.55rem;
    border: 1px solid #dbe5f3;
    border-radius: 0.5rem;
    font-size: 0.92rem;
    font-weight: 700;
    color: #0f2a4a;
    background: #ffffff;
}
.sale-payment-fields input:focus {
    outline: none;
    border-color: #7ca5e8;
    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: #f7fafe;
    border: 1px solid #e6ecf6;
}
.sale-payment-totals > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
}
.sale-payment-totals span {
    font-size: 0.78rem;
    color: #627692;
    font-weight: 600;
}
.sale-payment-totals strong {
    font-size: 0.95rem;
    color: #0f2a4a;
    font-weight: 700;
}
.sale-payment-totals strong.is-negative {
    color: #b42318;
}

/* --- 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 #dbe5f3;
    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: #627692;
    letter-spacing: 0.04em;
}
.sale-mobile-bar__total strong {
    font-size: 1.15rem;
    font-weight: 800;
    color: #0f2a4a;
    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 #dbe5f3;
    min-height: 2.6rem;
    padding: 0.5rem 2rem 0.5rem 0.75rem;
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(24, 43, 77, 0.05);
}
.sale-form .ts-wrapper.sale-product-select .ts-control:hover {
    border-color: #aac4e9;
}
.sale-form .ts-wrapper.sale-product-select.focus .ts-control {
    border-color: #7ca5e8;
    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 #c7d8ec;
    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 #d8e1f1;
    border-radius: 0.7rem;
    padding: 0.6rem 0.7rem;
    background: #f8fbff;
    display: grid;
    gap: 0.2rem;
}

.sale-totals strong {
    font-size: 1.02rem;
    color: #173253;
}

.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: #60708a;
    font-weight: 600;
    font-size: 0.88rem;
}

.report-bars__track {
    height: 0.85rem;
    background: #e7edf8;
    border: 1px solid #cddaf0;
    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: #f3b4b4;
    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: #fff;
    color: #294b86;
    box-shadow: 0 10px 24px rgba(26, 50, 93, 0.05);
}


.consult-template-pill strong {
    color: #1f3150;
}

.consult-template-pill span {
    font-size: 0.9rem;
    color: #667792;
}

.consult-template-pill.is-active {
    border-color: #8fb4ff;
    background: #eef4ff;
}

.consult-template-pill.is-invalid {
    border-color: #f2b1b1;
    background: #fff6f6;
}

.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: #223553;
}

.consult-reminder-item__note {
    margin: 0;
    color: #5e6f91;
    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 #dbe5f5;
    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: #223553;
}

.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 #dce6f7;
    background: #fff;
}

.consult-reminder-history__item strong {
    color: #223553;
    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: #5e6f91;
    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 #d8e4f5;
    border-radius: 0.9rem;
    background: linear-gradient(180deg, #fbfdff 0%, #f3f8ff 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: #5e7597;
}

.appointments-overview-card strong {
    min-width: 0;
    font-size: 1rem;
    line-height: 1.25;
    color: #203250;
}

.appointments-overview-card small {
    color: #637594;
    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 #d6e2f4;
    border-radius: 1rem;
    background: #fff;
    color: #213552;
    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: #9eb8e7;
    background: #f7faff;
    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: #61789a;
}

.appointments-doctor-picker__trigger-copy strong {
    min-width: 0;
    font-size: 0.9rem;
    color: #20324f;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.appointments-doctor-picker__trigger-copy span {
    min-width: 0;
    font-size: 0.76rem;
    color: #647899;
    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: #ebf2ff;
    color: #1d4ead;
    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 #d6e2f4;
    border-radius: 1rem;
    background: #fff;
    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: #20324f;
}

.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 #dde7f7;
    border-radius: 0.9rem;
    background: #fbfdff;
    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: #f5f9ff;
    border-color: #c6d7f3;
}

.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: #fff;
    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 #d6e0f2;
    background: #fff;
}

.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: #213552;
}

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

.appointments-week__body-track {
    position: relative;
    border-left: 1px solid #dce6f7;
}

.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 #d5deee;
    border-radius: 10px;
    background: #ffffff;
    /* 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: #f0c36d;
    background: #fffaf0;
}

.consult-lab-card__head {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    background: #f4f7fc;
    border: 0;
    border-bottom: 1px solid #e3eaf5;
    padding: 0.65rem 0.9rem;
    cursor: pointer;
    font: inherit;
    text-align: left;
}

.consult-lab-card--orphan .consult-lab-card__head {
    background: #fdf3dd;
    border-bottom-color: #f0c36d;
}

.consult-lab-card__head[aria-expanded="false"] {
    border-bottom-color: transparent;
}

.consult-lab-card__head:hover {
    background: #eaf0fa;
}

.consult-lab-card--orphan .consult-lab-card__head:hover {
    background: #fbecc2;
}

.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: #6f82a6;
}

.consult-lab-card__head[aria-expanded="false"] .consult-lab-card__chev {
    transform: rotate(-90deg);
}

.consult-lab-card__name {
    font-weight: 700;
    color: #20304d;
}

.consult-lab-card__badge {
    font-size: 0.72rem;
    color: #6f82a6;
    background: #ffffff;
    border: 1px solid #d5deee;
    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: #6f82a6;
    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: #f8fafd;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #6f82a6;
    padding: 0.45rem 0.6rem;
    border-bottom: 1px solid #e3eaf5;
    text-align: left;
}

.consult-lab-card__table td {
    padding: 0.45rem 0.6rem;
    border-bottom: 1px solid #eef2f9;
    vertical-align: middle;
}

.consult-lab-card__table td:last-child {
    white-space: nowrap;
    color: #6f82a6;
}

.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: #dc2626 !important;
    background: #fef2f2 !important;
    color: #991b1b;
}

.consult-lab-card__empty {
    margin: 0.9rem 0 0;
    font-size: 0.85rem;
    color: #6f82a6;
    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__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: #f7faff;
    border: 1px solid #d4dff1;
    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: #40557a;
}

.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: #ffffff;
    color: #20304d;
}

.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: #4f6487;
    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: #ffffff;
}

.reminders-editor__recurrence-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.86rem;
    font-weight: 600;
    color: #20304d;
    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: #52627d;
    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: #ffffff;
    color: #20304d;
}

.reminders-editor__preset {
    border: 1px solid #c7d4ec;
    border-radius: 999px;
    padding: 0.2rem 0.6rem;
    background: #ffffff;
    color: #2d4870;
    font-size: 0.75rem;
    cursor: pointer;
}

.reminders-editor__preset:hover {
    background: #e8f0ff;
}

.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: #f0f6ff;
    color: #1f3461;
}

.reminders-editor__feedback.is-hidden {
    display: none;
}

.reminders-editor__feedback[data-tone="error"] {
    border-color: #f1b8b8;
    background: #fff1f1;
    color: #8c2d2d;
}

.reminders-editor__feedback[data-tone="success"] {
    border-color: #b7e4c7;
    background: #eefaf2;
    color: #1c5c39;
}

.reminders-editor__section {
    background: #ffffff;
    border: 1px solid #dbe3f3;
    border-radius: 0.8rem;
    padding: 0.85rem 1rem 0.9rem;
}

.reminders-editor__section--history {
    background: #fbfcff;
}

.reminders-editor__section-head {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 0.85rem;
    text-transform: uppercase;
    color: #52627d;
    letter-spacing: 0.02em;
    margin-bottom: 0.55rem;
    cursor: pointer;
}

.reminders-editor__section-head h4 {
    margin: 0;
    font-size: 0.92rem;
    color: #20304d;
    letter-spacing: 0;
    text-transform: none;
}

.reminders-editor__count {
    background: #edf2fb;
    color: #3d527a;
    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 #e2e9f5;
    border-radius: 0.7rem;
    padding: 0.6rem 0.75rem;
    background: #ffffff;
    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: #20304d;
    font-size: 0.93rem;
}

.reminders-editor__due {
    font-size: 0.82rem;
    color: #4f6487;
    background: #eef3fc;
    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: #5a6a8c;
}

.reminders-editor__actions {
    display: flex;
    gap: 0.35rem;
    flex-wrap: wrap;
}

.reminders-editor__empty {
    margin: 0.25rem 0 0;
    font-size: 0.82rem;
    color: #8692aa;
    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: #dbeafe;
    color: #1d4ed8;
    border-color: #bfdbfe;
}

.reminders-editor__chip--completed {
    background: #dcfce7;
    color: #166534;
    border-color: #bbf7d0;
}

.reminders-editor__chip--expired {
    background: #e5e7eb;
    color: #4b5563;
    border-color: #d1d5db;
}

.reminders-editor__chip--cancelled {
    background: #f3f4f6;
    color: #6b7280;
    border-color: #e5e7eb;
}

.reminders-editor__chip--overdue {
    background: #fee2e2;
    color: #b91c1c;
    border-color: #fecaca;
}

.reminders-editor__chip--recurrence {
    background: #e0f2fe;
    color: #0c4a6e;
    border-color: #bae6fd;
    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: #f5ecd9;
    color: #8a6418;
    border-color: #e7d4a6;
    font-weight: 600;
}

.reminders-editor__chip--cloudvet {
    background: rgba(41, 104, 224, 0.08);
    color: #2358c4;
    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: #f5ecd9;
    color: #8a6418;
    border-color: #e7d4a6;
}

.notif-source-tag--cloudvet {
    background: rgba(41, 104, 224, 0.08);
    color: #2358c4;
    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: #f1f5f9;
    color: #475569;
    border-color: #e2e8f0;
}

.reminders-editor__dispatch--sent {
    background: #dbeafe;
    color: #1d4ed8;
    border-color: #bfdbfe;
}

.reminders-editor__dispatch--delivered {
    background: #dcfce7;
    color: #166534;
    border-color: #bbf7d0;
}

.reminders-editor__dispatch--read {
    background: #ccfbf1;
    color: #115e59;
    border-color: #99f6e4;
}

.reminders-editor__dispatch--fallback-queued {
    background: #fef3c7;
    color: #92400e;
    border-color: #fde68a;
}

.reminders-editor__dispatch--suppressed {
    background: #e5e7eb;
    color: #6b7280;
    border-color: #d1d5db;
}

.reminders-editor__dispatch--failed {
    background: #fee2e2;
    color: #b91c1c;
    border-color: #fecaca;
}

.btn--mini {
    padding: 0.3rem 0.65rem;
    font-size: 0.76rem;
    border-radius: 0.45rem;
}

.btn--success {
    background: #16a34a;
    color: #ffffff;
    border-color: #15803d;
}

.btn--success:hover {
    background: #15803d;
}


/* ---------------- Reporting dashboard + hub ---------------- */

.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: #2c6df5;
    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: #94a3b8;
    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 #e5e7eb; }

.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: #e5e7eb; border-radius: 2px; overflow: hidden; }
.compact-list--bars .mini-bar > span { display: block; height: 100%; background: #2c6df5; }

.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: #e5e7eb; border-radius: 4px; overflow: hidden; }
.revenue-by-wp-list__bar-fill { display: block; height: 100%; background: #2c6df5; 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: #15803d; }
.pl-widget__amount.is-negative { color: #b91c1c; }
.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: #94a3b8; text-transform: uppercase; letter-spacing: 0.04em; }
.pl-widget__interval { display: inline-flex; align-items: center; gap: 6px; border: 1px solid #e5e7eb; border-radius: 6px; padding: 2px 10px 6px; margin: 0; }
.pl-widget__interval legend { font-size: 0.7rem; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.04em; padding: 0 4px; }
.pl-widget__interval select { padding: 3px 6px; border-radius: 4px; border: 1px solid #e5e7eb; background: #fff; font-size: 0.8rem; }
.pl-widget__delta { font-size: 0.85rem; }
.pl-widget__delta.is-up { color: #15803d; }
.pl-widget__delta.is-down { color: #b91c1c; }
.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: #15803d; font-weight: 500; }
.rbc-widget__delta.is-down { background: rgba(239, 68, 68, 0.12); color: #b91c1c; 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: #94a3b8; text-transform: uppercase; letter-spacing: 0.04em; }
.rbc-widget__interval { display: inline-flex; align-items: center; gap: 6px; border: 1px solid #e5e7eb; border-radius: 6px; padding: 2px 10px 6px; margin: 0; }
.rbc-widget__interval legend { font-size: 0.7rem; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.04em; padding: 0 4px; }
.rbc-widget__interval select { padding: 3px 6px; border-radius: 4px; border: 1px solid #e5e7eb; background: #fff; font-size: 0.8rem; }
.rbc-widget__month { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 4px; font-size: 0.85rem; color: #64748b; }
.rbc-widget__month select { padding: 4px 10px; border-radius: 6px; border: 1px solid #e5e7eb; background: #fff; 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: #94a3b8; border-bottom: 1px solid #e5e7eb; }
.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 #f1f5f9; }
.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: #15803d; }
.rbc-widget__legend-delta.is-down { background: rgba(239, 68, 68, 0.12); color: #b91c1c; }
.rbc-widget__legend-delta.is-new { background: rgba(59, 130, 246, 0.12); color: #1d4ed8; }
.rbc-widget__legend-delta.is-flat { color: #94a3b8; }
@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: #15803d; }
.pm-widget__amount.is-negative { color: #b91c1c; }
.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: #64748b; }
.pm-widget__month select { padding: 4px 10px; border-radius: 6px; border: 1px solid #e5e7eb; background: #fff; font-size: 0.85rem; }
.pm-widget__month-label { font-size: 0.7rem; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.04em; }
.pm-widget__interval { display: inline-flex; align-items: center; gap: 6px; border: 1px solid #e5e7eb; border-radius: 6px; padding: 2px 10px 6px; margin: 0; }
.pm-widget__interval legend { font-size: 0.7rem; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.04em; padding: 0 4px; }
.pm-widget__interval select { padding: 3px 6px; border-radius: 4px; border: 1px solid #e5e7eb; background: #fff; 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: #94a3b8; border-bottom: 1px solid #e5e7eb; }
.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 #f1f5f9; }
.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: #15803d; font-weight: 600; }
.pm-widget__legend-amount.is-negative { color: #b91c1c; 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: #b91c1c; }
.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: #15803d; }
.pm-widget__legend-delta.is-down { background: rgba(239, 68, 68, 0.12); color: #b91c1c; }
.pm-widget__legend-delta.is-new { background: rgba(59, 130, 246, 0.12); color: #1d4ed8; }
.pm-widget__legend-delta.is-flat { color: #94a3b8; }
.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: #15803d; }
.cf-widget__amount.is-negative { color: #b91c1c; }
.cf-widget__delta { font-size: 0.85rem; }
.cf-widget__delta.is-up { color: #15803d; }
.cf-widget__delta.is-down { color: #b91c1c; }
.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: #94a3b8; 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: #64748b; }
.cf-widget__month select { padding: 4px 10px; border-radius: 6px; border: 1px solid #e5e7eb; background: #fff; font-size: 0.85rem; }
.cf-widget__month-label { font-size: 0.7rem; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.04em; }
.cf-widget__interval { display: inline-flex; align-items: center; gap: 6px; border: 1px solid #e5e7eb; border-radius: 6px; padding: 2px 10px 6px; margin: 0; }
.cf-widget__interval legend { font-size: 0.7rem; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.04em; padding: 0 4px; }
.cf-widget__interval select { padding: 3px 6px; border-radius: 4px; border: 1px solid #e5e7eb; background: #fff; 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: #15803d; font-weight: 500; }
.vat-widget__delta.is-down { background: rgba(239, 68, 68, 0.12); color: #b91c1c; 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: #64748b; }
.vat-widget__month select { padding: 4px 10px; border-radius: 6px; border: 1px solid #e5e7eb; background: #fff; font-size: 0.85rem; }
.vat-widget__month-label { font-size: 0.7rem; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.04em; }
.vat-widget__interval { display: inline-flex; align-items: center; gap: 6px; border: 1px solid #e5e7eb; border-radius: 6px; padding: 2px 10px 6px; margin: 0; }
.vat-widget__interval legend { font-size: 0.7rem; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.04em; padding: 0 4px; }
.vat-widget__interval select { padding: 3px 6px; border-radius: 4px; border: 1px solid #e5e7eb; background: #fff; 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: #94a3b8; border-bottom: 1px solid #e5e7eb; }
.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 #f1f5f9; }
.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: #15803d; }
.vat-widget__legend-delta.is-down { background: rgba(239, 68, 68, 0.12); color: #b91c1c; }
.vat-widget__legend-delta.is-new { background: rgba(59, 130, 246, 0.12); color: #1d4ed8; }
.vat-widget__legend-delta.is-flat { color: #94a3b8; }

.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: #15803d; }
.vt-widget__amount.is-warning { color: #b45309; }
.vt-widget__amount.is-negative { color: #b91c1c; }
.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: #15803d; }
.vt-widget__progress-fill.is-warning { background: #f59e0b; }
.vt-widget__progress-fill.is-negative { background: #b91c1c; }
.vt-widget__status { margin: 0; font-size: 0.9rem; line-height: 1.5; }
.vt-widget__alert { color: #b91c1c; }
.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: #15803d; font-weight: 500; }
.dr-widget__delta.is-down { background: rgba(239, 68, 68, 0.12); color: #b91c1c; 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: #64748b; }
.dr-widget__month select { padding: 4px 10px; border-radius: 6px; border: 1px solid #e5e7eb; background: #fff; font-size: 0.85rem; }
.dr-widget__month-label { font-size: 0.7rem; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.04em; }
.dr-widget__interval { display: inline-flex; align-items: center; gap: 6px; border: 1px solid #e5e7eb; border-radius: 6px; padding: 2px 10px 6px; margin: 0; }
.dr-widget__interval legend { font-size: 0.7rem; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.04em; padding: 0 4px; }
.dr-widget__interval select { padding: 3px 6px; border-radius: 4px; border: 1px solid #e5e7eb; background: #fff; 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: #94a3b8; border-bottom: 1px solid #e5e7eb; }
.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 #f1f5f9; }
.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: #15803d; }
.dr-widget__legend-delta.is-down { background: rgba(239, 68, 68, 0.12); color: #b91c1c; }
.dr-widget__legend-delta.is-new { background: rgba(59, 130, 246, 0.12); color: #1d4ed8; }
.dr-widget__legend-delta.is-flat { color: #94a3b8; }

.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: #b91c1c; }
.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: #94a3b8; border-bottom: 1px solid #e5e7eb; padding-bottom: 4px; }
.ovr-list__row { font-size: 0.9rem; border-bottom: 1px solid #f1f5f9; }
.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: #b91c1c; 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: #64748b; }
.hm-widget__month select { padding: 4px 10px; border-radius: 6px; border: 1px solid #e5e7eb; background: #fff; font-size: 0.85rem; }
.hm-widget__month-label { font-size: 0.7rem; color: #94a3b8; 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: #64748b; 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: #94a3b8; 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, #2c6df5 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: #15803d; font-weight: 500; }
.da-widget__delta.is-down { background: rgba(239, 68, 68, 0.12); color: #b91c1c; 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: #64748b; }
.da-widget__month select { padding: 4px 10px; border-radius: 6px; border: 1px solid #e5e7eb; background: #fff; font-size: 0.85rem; }
.da-widget__month-label { font-size: 0.7rem; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.04em; }
.da-widget__interval { display: inline-flex; align-items: center; gap: 6px; border: 1px solid #e5e7eb; border-radius: 6px; padding: 2px 10px 6px; margin: 0; }
.da-widget__interval legend { font-size: 0.7rem; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.04em; padding: 0 4px; }
.da-widget__interval select { padding: 3px 6px; border-radius: 4px; border: 1px solid #e5e7eb; background: #fff; 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: #94a3b8; border-bottom: 1px solid #e5e7eb; }
.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 #f1f5f9; }
.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: #15803d; }
.da-widget__legend-delta.is-down { background: rgba(239, 68, 68, 0.12); color: #b91c1c; }
.da-widget__legend-delta.is-new { background: rgba(59, 130, 246, 0.12); color: #1d4ed8; }
.da-widget__legend-delta.is-flat { color: #94a3b8; }
@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: #64748b; }
.ts-widget__month select { padding: 4px 10px; border-radius: 6px; border: 1px solid #e5e7eb; background: #fff; font-size: 0.85rem; }
.ts-widget__month-label { font-size: 0.7rem; color: #94a3b8; 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 #f1f5f9; }
.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: #475569; 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: #15803d; font-weight: 500; }
.np-widget__delta.is-down { background: rgba(239, 68, 68, 0.12); color: #b91c1c; 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: #64748b; }
.np-widget__month select { padding: 4px 10px; border-radius: 6px; border: 1px solid #e5e7eb; background: #fff; font-size: 0.85rem; }
.np-widget__month-label { font-size: 0.7rem; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.04em; }
.np-widget__interval { display: inline-flex; align-items: center; gap: 6px; border: 1px solid #e5e7eb; border-radius: 6px; padding: 2px 10px 6px; margin: 0; }
.np-widget__interval legend { font-size: 0.7rem; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.04em; padding: 0 4px; }
.np-widget__interval select { padding: 3px 6px; border-radius: 4px; border: 1px solid #e5e7eb; background: #fff; 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: #7c3aed; }
.rc-widget__split strong { font-size: 1.3rem; font-weight: 600; }
.rc-widget__split--paying strong { color: #7c3aed; }
.rc-widget__split--recontrol strong { color: #6b7280; }
.rc-widget__split-note { font-size: 0.75rem; }
.rc-widget__retention strong { font-size: 1.4rem; font-weight: 600; color: #15803d; }
.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: #15803d; font-weight: 500; }
.rc-widget__delta.is-down { background: rgba(239, 68, 68, 0.12); color: #b91c1c; 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: #64748b; }
.rc-widget__month select { padding: 4px 10px; border-radius: 6px; border: 1px solid #e5e7eb; background: #fff; font-size: 0.85rem; }
.rc-widget__month-label { font-size: 0.7rem; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.04em; }
.rc-widget__interval { display: inline-flex; align-items: center; gap: 6px; border: 1px solid #e5e7eb; border-radius: 6px; padding: 2px 10px 6px; margin: 0; }
.rc-widget__interval legend { font-size: 0.7rem; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.04em; padding: 0 4px; }
.rc-widget__interval select { padding: 3px 6px; border-radius: 4px; border: 1px solid #e5e7eb; background: #fff; 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: #94a3b8; 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: #7c3aed; }
.rc-list__table thead th.is-sort-desc::after { content: '↓'; opacity: 1; color: #7c3aed; }
.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: #7c3aed; font-weight: 500; }
.rc-list__recontrol { color: #6b7280; }

.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: #f59e0b; }
.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: #15803d; font-weight: 500; }
.ce-widget__delta.is-down { background: rgba(239, 68, 68, 0.12); color: #b91c1c; 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: #64748b; }
.ce-widget__month select { padding: 4px 10px; border-radius: 6px; border: 1px solid #e5e7eb; background: #fff; font-size: 0.85rem; }
.ce-widget__month-label { font-size: 0.7rem; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.04em; }
.ce-widget__interval { display: inline-flex; align-items: center; gap: 6px; border: 1px solid #e5e7eb; border-radius: 6px; padding: 2px 10px 6px; margin: 0; }
.ce-widget__interval legend { font-size: 0.7rem; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.04em; padding: 0 4px; }
.ce-widget__interval select { padding: 3px 6px; border-radius: 4px; border: 1px solid #e5e7eb; background: #fff; 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: #64748b; }
.ah-widget__days select { padding: 4px 10px; border-radius: 6px; border: 1px solid #e5e7eb; background: #fff; font-size: 0.85rem; }
.ah-widget__days-label { font-size: 0.7rem; color: #94a3b8; 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 #94a3b8; }
.ah-widget__kpi strong { font-size: 1.2rem; font-weight: 600; line-height: 1.1; }
.ah-widget__kpi--done { border-left-color: #15803d; }
.ah-widget__kpi--confirmed { border-left-color: #0ea5e9; }
.ah-widget__kpi--planned { border-left-color: #2c6df5; }
.ah-widget__kpi--rescheduled { border-left-color: #7c3aed; }
.ah-widget__kpi--cancelled { border-left-color: #94a3b8; }
.ah-widget__kpi--no_show { border-left-color: #b91c1c; }
.ah-widget__kpi--no_show strong { color: #b91c1c; }

.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: #2c6df5; }
.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: #1d4ed8; 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: #94a3b8; border-bottom: 1px solid #e5e7eb; padding-bottom: 4px; }
.ah-list__row { font-size: 0.9rem; border-bottom: 1px solid #f1f5f9; }
.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: #475569; }
.ah-list__status--done { background: rgba(34, 197, 94, 0.14); color: #15803d; }
.ah-list__status--confirmed { background: rgba(14, 165, 233, 0.14); color: #0369a1; }
.ah-list__status--planned { background: rgba(44, 109, 245, 0.14); color: #1d4ed8; }
.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: #475569; }
.ah-list__status--no_show { background: rgba(239, 68, 68, 0.14); color: #b91c1c; }
@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: #0ea5e9; }
.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: #0ea5e9; }
.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: #64748b; }
.ch-widget__period select { padding: 4px 10px; border-radius: 6px; border: 1px solid #e5e7eb; background: #fff; font-size: 0.85rem; max-width: 15rem; }
.ch-widget__period-label { font-size: 0.7rem; color: #94a3b8; 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 #94a3b8; }
.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: #64748b; }
.ch-widget__kpi--count { border-left-color: #0ea5e9; }
.ch-widget__kpi--income { border-left-color: #15803d; }
.ch-widget__kpi--avg { border-left-color: #f59e0b; }
.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: #15803d; }
.ch-widget__delta--down { color: #c4463a; }
.ch-widget__delta--flat { color: #64748b; }
.ch-widget__delta--none { color: #94a3b8; }
.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: #2c6df5; }
.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: #94a3b8; border-bottom: 1px solid #e5e7eb; 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 #f1f5f9; }
.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: #1d4ed8; border-bottom: none; }
.ch-list__row--sale .ch-list__doctor { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: #15803d; }
@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: #fff; 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 #e5e7eb;
}
.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: #475569; }
.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 #e5e7eb; 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 #e5e7eb; 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: #e0e7ff; color: #3730a3; }
.badge--confirmed { background: #dbeafe; color: #1e40af; }
.badge--done { background: #d1fae5; color: #047857; }
.badge--cancelled { background: #fee2e2; color: #b91c1c; }
.badge--no_show { background: #fef3c7; color: #a16207; }
.badge--rescheduled { background: #ede9fe; 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: #64748b; 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: #047857; }
.revenue-widget__delta.is-down { background: rgba(239, 68, 68, 0.12); color: #b91c1c; }
.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: #94a3b8; text-transform: uppercase; letter-spacing: 0.04em; }
.revenue-widget__interval { display: inline-flex; align-items: center; gap: 6px; border: 1px solid #e5e7eb; border-radius: 6px; padding: 2px 10px 6px; margin: 0; }
.revenue-widget__interval legend { font-size: 0.7rem; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.04em; padding: 0 4px; }
.revenue-widget__interval select { padding: 3px 6px; border-radius: 4px; border: 1px solid #e5e7eb; background: #fff; 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: #64748b; }
.revenue-widget__compare-label select {
    padding: 4px 10px; border-radius: 6px; border: 1px solid #e5e7eb; background: #fff; 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 #eef2f7;
    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: #64748b; 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 #eef2f7;
}
.revenue-widget__top h4 {
    margin: 0 0 8px; font-size: 0.85rem; color: #475569; 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 #f1f5f9; font-size: 0.85rem;
}
.revenue-widget__top-row::before {
    content: counter(top-row); color: #94a3b8; 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: #047857; }
.revenue-widget__top-delta.is-down { background: rgba(239, 68, 68, 0.12); color: #b91c1c; }
.revenue-widget__top-delta.is-new { background: rgba(44, 109, 245, 0.12); color: #2c6df5; }
.revenue-widget__top-delta.is-flat { background: transparent; color: #94a3b8; 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); color: #fff;
    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); color: #fff; 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); color: #fff; 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: #4A5568;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.notif-overview__footer-meta {
    margin: 0.75rem 0 0;
    font-size: 0.72rem;
    color: #6B7A8D;
}
.notif-overview__footer-meta a { color: #2968E0; 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: #EDF0F4;
    border-radius: 6px;
}
.seg-ctrl__item {
    padding: 0.35rem 0.8rem;
    font-size: 0.82rem;
    font-weight: 500;
    color: #4A5568;
    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: #1C2433;
}
.seg-ctrl__item--active {
    background: #FFFFFF;
    color: #2968E0;
    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: #FFFFFF;
    border: 1px solid #E2E7EE;
    border-radius: 8px;
    border-left-width: 2.5px;
    color: #1C2433;
    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: #6B7A8D;
    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: #2968E0; }
.stat-card--success { border-left-color: #1A8A5E; }
.stat-card--danger  { border-left-color: #C4463A; }
.stat-card--accent  { border-left-color: #D98B3A; }

/* 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: #EDF0F4;
    border-radius: 3px;
    overflow: hidden;
}
.notif-channel-bar__slice { display: block; height: 100%; }
.notif-channel-bar__slice--whatsapp { background: #1A8A5E; }
.notif-channel-bar__slice--sms      { background: #2968E0; }
.notif-channel-bar__slice--email    { background: #D98B3A; }
.notif-channel-bar__legend {
    display: flex;
    gap: 1rem;
    font-size: 0.72rem;
    color: #6B7A8D;
}
.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: #1A8A5E; }
.notif-channel-bar__dot--sms      { background: #2968E0; }
.notif-channel-bar__dot--email    { background: #D98B3A; }

/* Tab bar */
.tab-bar {
    display: flex;
    gap: 0.25rem;
    border-bottom: 1px solid #E2E7EE;
    margin-top: 0.25rem;
}
.tab-bar__item {
    position: relative;
    padding: 0.65rem 1rem 0.7rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: #4A5568;
    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: #1C2433; }
.tab-bar__item--active {
    color: #2968E0;
    border-bottom-color: #2968E0;
}
.tab-bar__count {
    font-weight: 500;
    color: #8694A7;
    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: #6B7A8D;
    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: #F7F8FA;
    color: #4A5568;
}
.notif-status-badge--accent {
    border-left-color: #D98B3A;
    background: rgba(217, 139, 58, 0.08);
    color: #8a5a1f;
}
.notif-status-badge--muted {
    border-left-color: #8694A7;
    background: #F7F8FA;
    color: #6B7A8D;
}
.notif-status-badge--danger {
    border-left-color: #C4463A;
    background: #FDEDEB;
    color: #9d2f26;
}
.notif-status-badge--info {
    border-left-color: #2E6DA4;
    background: #E8F0FA;
    color: #255d8a;
}
.notif-status-badge--success {
    border-left-color: #1A8A5E;
    background: #E8F5EE;
    color: #14704c;
}

/* 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 #D98B3A;
    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: #6B7A8D;
    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: #C4463A;
    border: 1px solid #C4463A;
    font-weight: 600;
    transition: background 100ms ease, color 100ms ease;
}
.btn--danger-ghost:hover {
    background: #FDEDEB;
}
.btn--danger-ghost.is-confirming {
    background: #C4463A;
    color: #FFFFFF;
    border-color: #C4463A;
}
.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 #2968E0;
    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 #CBD3DE;
    background: #F7F8FA;
    color: #6B7A8D;
    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: #2968E0;
    color: #2968E0;
    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 #E2E7EE;
    border-radius: 8px;
    background: #FFFFFF;
    color: #1C2433;
    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: #1C2433;
}
.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: #8694A7;
    font-size: 1.15rem;
    line-height: 1;
    cursor: pointer;
}
.status-legend-popover__close:hover {
    background: #F0F2F5;
    color: #1C2433;
}
.status-legend__intro {
    margin: 0 0 0.6rem;
    font-size: 0.8rem;
    color: #6B7A8D;
}
.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 #EDF0F4;
}
.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: #4A5568;
}
.status-legend__row dd {
    margin: 0;
    font-size: 0.82rem;
    color: #4A5568;
    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;
}

.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(--surface);
}

/* 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: #fff;
    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 #e5e7eb;
}

.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: #6b7280;
    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 #e5e7eb;
    background: #f9fafb;
    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 #d1d5db;
    background: #fff;
    color: #1f2937;
    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: #f3f4f6; }
.image-annotator__tool.is-active {
    background: #2C6DF5;
    color: #fff;
    border-color: #2C6DF5;
}
.image-annotator__tool svg { display: block; }

.image-annotator__divider {
    width: 1px;
    height: 24px;
    background: #d1d5db;
    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 #d1d5db;
    background: #fff;
    border-radius: 8px;
    cursor: pointer;
}
.image-annotator__width.is-active {
    border-color: #2C6DF5;
    background: #eff6ff;
}
.image-annotator__width-dot {
    display: block;
    width: var(--dot-size, 4px);
    height: var(--dot-size, 4px);
    background: #111827;
    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, #f3f4f6 25%, transparent 25%),
        linear-gradient(-45deg, #f3f4f6 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #f3f4f6 75%),
        linear-gradient(-45deg, transparent 75%, #f3f4f6 75%);
    background-size: 16px 16px;
    background-position: 0 0, 0 8px, 8px -8px, -8px 0;
    background-color: #fff;
    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: #fff;
    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 #e5e7eb;
    background: #fff;
    flex-wrap: wrap;
}

.image-annotator__filename {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    color: #4b5563;
}
.image-annotator__filename input {
    padding: 6px 8px;
    border: 1px solid #d1d5db;
    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: #fff; }

@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: #ffffff;
    display: block;
}
.email-preview__text {
    margin: 0;
    padding: 14px;
    background: #ffffff;
    color: #1f2937;
    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); color: #fff;
    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: #fff; 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);
    color: #fff;
}
.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: #ffffff;
    border-bottom-left-radius: 2px;
}
.wa-thread__msg--out {
    background: #DCF8C6;
    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, #C4463A);
    color: #fff;
    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);
    color: #fff;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s ease;
}
.wa-reply__send:hover:not(:disabled) { background: #157A52; }
.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: #fff; }

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

.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); color: #fff;
    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;
}

/* ============================================================
   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: #b91c1c; }
.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; }
}