: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.7fr) minmax(17rem, 0.95fr);
    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;
    gap: 0.45rem;
    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.72rem;
    min-width: 0;
    min-height: 2.65rem;
    padding: 0.44rem 0.72rem;
    border-radius: 0.86rem;
    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.8rem;
    color: #1f2d44;
    line-height: 1.15;
}

.topbar-live-card__summary {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.72rem;
    color: #657995;
    line-height: 1.25;
}

.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.55rem;
    height: 1.55rem;
    padding: 0 0.35rem;
    border-radius: 999px;
    background: #e8f0ff;
    color: #295bb9;
    font-size: 0.72rem;
    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-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__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;
}

.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 #f1c2c2;
    border-left: 3px solid #a82828;
    border-radius: 0.4rem;
    background: #fdecec;
    color: #7a1c1c;
    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;
}

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

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

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

.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 {
    align-items: start;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

: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'] .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;
}

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

.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__chart { position: relative; width: 100%; height: 220px; }

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

.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__delta { font-size: 0.85rem; padding: 2px 8px; border-radius: 999px; align-self: flex-start; margin-top: 2px; }
.ts-widget__delta.is-up { background: rgba(34, 197, 94, 0.12); color: #15803d; font-weight: 500; }
.ts-widget__delta.is-down { background: rgba(239, 68, 68, 0.12); color: #b91c1c; font-weight: 500; }
.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__interval { display: inline-flex; align-items: center; gap: 6px; border: 1px solid #e5e7eb; border-radius: 6px; padding: 2px 10px 6px; margin: 0; }
.ts-widget__interval legend { font-size: 0.7rem; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.04em; padding: 0 4px; }
.ts-widget__interval select { padding: 3px 6px; border-radius: 4px; border: 1px solid #e5e7eb; background: #fff; font-size: 0.8rem; }
.ts-widget__body { display: grid; grid-template-columns: minmax(220px, 280px) 1fr; gap: 20px; align-items: center; }
.ts-widget__chart { position: relative; height: 240px; }
.ts-widget__legend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ts-widget__legend-row { display: grid; grid-template-columns: 14px 1fr auto 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__legend-delta { font-size: 0.75rem; padding: 2px 6px; border-radius: 999px; }
.ts-widget__legend-delta.is-up { background: rgba(34, 197, 94, 0.12); color: #15803d; }
.ts-widget__legend-delta.is-down { background: rgba(239, 68, 68, 0.12); color: #b91c1c; }
.ts-widget__legend-delta.is-new { background: rgba(59, 130, 246, 0.12); color: #1d4ed8; }
.ts-widget__legend-delta.is-flat { color: #94a3b8; }
.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; }
}

/* 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__days { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 4px; font-size: 0.85rem; color: #64748b; }
.ch-widget__days select { padding: 4px 10px; border-radius: 6px; border: 1px solid #e5e7eb; background: #fff; font-size: 0.85rem; }
.ch-widget__days-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__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.55rem 0.9rem 0.6rem;
    font-size: 0.86rem;
    font-weight: 500;
    color: #6B7A8D;
    text-decoration: none;
    border-bottom: 2px 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;
}

/* 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: #9CAABB; }
: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'] .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);
}

.pv-hero--pet {
    grid-template-columns: auto minmax(0, 1fr) auto;
}

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

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

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

/* Responsive */
@media (max-width: 900px) {
    .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 { grid-template-columns: minmax(0, 1fr); }
    .pv-hero__actions { justify-content: flex-start; }
    .pv-tile-grid { 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); }
    .pv-fact-grid { grid-template-columns: minmax(0, 1fr); }
    .pv-fact--wide { grid-column: span 1; }
}

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


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