/* ============================================================
   StomaPlan - foaia de stil a aplicației
   Registru: instrument profesional, alb curat, accent "sage"
   ============================================================ */

:root {
    /* Culori de bază */
    --primary:       #2b5fc7;
    --primary-hover: #234fae;
    --primary-deep:  #1a3a80;
    --primary-soft:  #e9effc;
    --focus:         #4f7fe0;

    --ink:       #191c24;
    --muted:     #5c6270;
    --bg:        #ffffff;
    --surface2:  #f5f6f9;
    --line:      #e2e4ea;
    --line-soft: #edeff4;

    --danger:      #b3362a;
    --danger-deep: #8f2f24;
    --danger-soft: #fbeeec;
    --danger-line: #ecc9c3;

    /* Mișcare */
    --ease-out:   cubic-bezier(0.23, 1, 0.32, 1);
    --ease-inout: cubic-bezier(0.77, 0, 0.175, 1);

    /* Straturi */
    --z-bar:   40;
    --z-rail:  60;
    --z-pop:   80;
    --z-toast: 90;
}

/* ============================================================
   Bază
   ============================================================ */
* { box-sizing: border-box; }

html { height: 100%; }

body {
    margin: 0;
    min-height: 100%;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 "Helvetica Neue", Arial, sans-serif;
    font-size: 14px;
    line-height: 1.45;
    color: var(--ink);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3 { line-height: 1.2; color: var(--ink); }
p  { margin: 0 0 10px; }
a  { color: var(--primary-deep); }

.ic { display: inline-block; vertical-align: middle; flex: none; }

.skip-link {
    position: absolute;
    left: -9999px;
    top: 8px;
    background: var(--ink);
    color: #fff;
    padding: 8px 14px;
    border-radius: 8px;
    z-index: 100;
}
.skip-link:focus { left: 8px; }

:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
    border-radius: 4px;
}

.spacer { flex: 1; }
.muted  { color: var(--muted); }

/* ============================================================
   Schela paginii: rail fix + conținut
   ============================================================ */
.rail {
    position: fixed;
    inset: 0 auto 0 0;
    width: 232px;
    background: var(--rail);
    color: var(--rail-text, #c3c9d8);
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 14px 12px;
    z-index: var(--z-rail);
}

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    color: inherit;
    text-decoration: none;
    padding: 6px 8px;
}
.brand-mark {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 11px;
    background: var(--rail-hi);
    color: var(--rail-accent, #a9c4f5);
    flex: none;
}
.brand-text strong {
    display: block;
    font-size: 15.5px;
    letter-spacing: 0.2px;
    color: var(--rail-strong, #f4f6fa);
}
.brand-text small {
    display: block;
    font-size: 11px;
    color: var(--rail-muted, #9aa3b8);
    max-width: 148px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rail-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
}
.rail-link {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 11px;
    border-radius: 9px;
    color: var(--rail-text, #c3c9d8);
    text-decoration: none;
    font-size: 13.5px;
    font-weight: 500;
    transition: background 0.15s ease, color 0.15s ease;
}
.rail-link.is-active {
    background: var(--rail-hi);
    color: var(--rail-strong, #fff);
    font-weight: 600;
}
.rail-link.is-active .ic { color: var(--rail-accent, #a9c4f5); }

.rail-foot {
    display: flex;
    align-items: center;
    gap: 6px;
    border-top: 1px solid var(--rail-accent, #2e3750);
    padding-top: 12px;
}
.rail-user {
    display: flex;
    align-items: center;
    gap: 9px;
    flex: 1;
    min-width: 0;
    color: inherit;
    text-decoration: none;
    padding: 6px;
    border-radius: 9px;
    transition: background 0.15s ease;
}
.rail-user-text { min-width: 0; }
.rail-user-text strong {
    display: block;
    font-size: 12.5px;
    color: var(--rail-text, #eceff5);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.rail-user-text small { font-size: 11px; color: var(--rail-muted, #9aa3b8); }

.avatar {
    width: 32px;
    height: 32px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    background: var(--c, #5c6270);
    flex: none;
}

.rail-out {
    color: var(--rail-muted, #9aa3b8);
    padding: 8px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    transition: background 0.15s ease, color 0.15s ease;
}

.rail-scrim {
    position: fixed;
    inset: 0;
    background: rgba(23, 28, 42, 0.4);
    z-index: calc(var(--z-rail) - 1);
}

.shell {
    margin-left: 232px;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.topbar {
    display: none;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--line);
    background: #fff;
    position: sticky;
    top: 0;
    z-index: var(--z-bar);
}
.topbar-title { font-weight: 700; font-size: 15px; }

.main {
    flex: 1;
    min-width: 0;
    padding: 22px clamp(16px, 3vw, 32px) 34px;
}

/* ============================================================
   Butoane
   ============================================================ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 8px 14px;
    border-radius: 9px;
    border: 1px solid transparent;
    background: none;
    font: inherit;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ink);
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s ease, border-color 0.15s ease,
                color 0.15s ease, transform 0.12s var(--ease-out);
}
.btn:active { transform: scale(0.97); }
.btn:disabled { opacity: 0.55; pointer-events: none; }

.btn-primary { background: var(--primary); color: #fff; }
.btn-ghost   { border-color: var(--line); background: #fff; }
.btn-icon    { padding: 7px; }
.btn-sm      { padding: 5px 10px; font-size: 12.5px; border-radius: 8px; }
.btn-block   { width: 100%; }

.btn-danger        { color: var(--danger-deep); }
.btn-danger-solid  { background: var(--danger); color: #fff; }

/* ============================================================
   Câmpuri de formular
   ============================================================ */
.input {
    width: 100%;
    padding: 8px 11px;
    border-radius: 9px;
    border: 1px solid var(--line);
    background: #fff;
    font: inherit;
    font-size: 14px;
    color: var(--ink);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.input:focus {
    outline: none;
    border-color: var(--focus);
    box-shadow: 0 0 0 3px #dde7f9;
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--focus) 20%, white);
}
.input::placeholder { color: #98a0b2; }

.input-sm { width: auto; padding: 6px 10px; font-size: 13px; }

select.input {
    appearance: none;
    padding-right: 30px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235c6270' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9.5 12 15.5 18 9.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 9px center;
    background-size: 14px;
}

textarea.input { resize: vertical; min-height: 58px; }

.input-wrap { position: relative; }
.input-ic {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--muted);
    pointer-events: none;
}
.input.has-ic { padding-left: 31px; }

.field {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}
.field > label,
.field-label {
    font-size: 12.5px;
    font-weight: 600;
    color: #3e4452;
}
.lbl-opt { font-weight: 400; color: var(--muted); }

.check {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    font-weight: 500;
    color: #3e4452;
    cursor: pointer;
    user-select: none;
}
.check input[type="checkbox"],
input[type="checkbox"],
input[type="radio"] { accent-color: var(--primary); }
.check input[type="checkbox"] { width: 15px; height: 15px; }

/* ============================================================
   Control segmentat, cipuri, insigne
   ============================================================ */
.seg {
    display: inline-flex;
    gap: 2px;
    background: var(--surface2);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 3px;
}
.seg-btn {
    border: none;
    background: none;
    padding: 6px 12px;
    border-radius: 7px;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--muted);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.seg-btn.is-active {
    background: #fff;
    color: var(--ink);
    box-shadow: 0 1px 2px rgba(23, 28, 42, 0.09);
}
.seg-sm .seg-btn { padding: 4px 10px; font-size: 12.5px; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 11px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: #fff;
    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
    color: #3e4452;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.chip.is-active {
    border-color: var(--primary);
    background: var(--primary-soft);
    color: var(--primary-deep);
}
.chip-dot {
    width: 9px;
    height: 9px;
    border-radius: 999px;
    background: var(--c, #94a0b8);
    flex: none;
    display: inline-block;
}
.chip-dot-all {
    background: conic-gradient(#2F6FE4, #2E9E5B, #DE7C0D, #D6336C, #2F6FE4);
}

.badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 9px;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
}
.badge.st-programata  { background: #edeff4; color: #3f4552; border-color: #dfe3ec; }
.badge.st-confirmata  { background: var(--primary-soft); color: #1e3f8f; border-color: #c9d9f5; }
.badge.st-finalizata  { background: #e8f3ea; color: #316b41; border-color: #d3ebdb; }
.badge.st-anulata     { background: #f9e9e7; color: #a13a2e; border-color: #efd2cd; }
.badge.st-neprezentat { background: #f7efdd; color: #8a6116; border-color: #ecdfc0; }
.badge-off            { background: #eff1f5; color: #767c8c; border-color: #dfe2ea; }

/* ============================================================
   Alerte, toast-uri
   ============================================================ */
.alert {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 13.5px;
    margin-bottom: 14px;
}
.alert .ic { margin-top: 1px; }
.alert-error {
    background: var(--danger-soft);
    border: 1px solid var(--danger-line);
    color: var(--danger-deep);
}
.alert-info {
    background: var(--primary-soft);
    border: 1px solid #c9d9f5;
    color: #1e3f8f;
}

.toast-host {
    position: fixed;
    right: 18px;
    bottom: 18px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: var(--z-toast);
}
.toast {
    display: flex;
    align-items: flex-start;
    background: #1d222e;
    color: #f2f3ea;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 13px;
    line-height: 1.4;
    max-width: 340px;
    box-shadow: 0 10px 28px rgba(15, 20, 35, 0.28);
    opacity: 0;
    transform: translateY(8px);
    transition: transform 0.2s var(--ease-out), opacity 0.2s ease;
}
.toast::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 99px;
    background: #94a0b8;
    flex: none;
    margin: 5px 9px 0 0;
}
.toast-success::before { background: #a3c255; }
.toast-error::before   { background: #e2695c; }
.toast.is-in { opacity: 1; transform: none; }

/* ============================================================
   Dialoguri
   ============================================================ */
.dlg {
    border: none;
    border-radius: 14px;
    padding: 0;
    width: min(560px, calc(100vw - 32px));
    color: var(--ink);
    box-shadow: 0 24px 64px rgba(15, 20, 35, 0.3);
}
.dlg::backdrop { background: rgba(23, 28, 42, 0.45); }
.dlg[open] { animation: dlgIn 0.18s var(--ease-out); }
.dlg[open]::backdrop { animation: fadeIn 0.18s ease; }

@keyframes dlgIn {
    from { opacity: 0; transform: scale(0.97) translateY(4px); }
}
@keyframes fadeIn {
    from { opacity: 0; }
}

.dlg-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 16px 18px 0;
}
.dlg-head h2 { margin: 0; font-size: 16.5px; }
.dlg-x { margin-right: -6px; color: var(--muted); }

.dlg-body { padding: 14px 18px 4px; }
.dlg-foot {
    display: flex;
    justify-content: flex-end;
    gap: 9px;
    padding: 14px 18px 16px;
}
.dlg-foot-split {
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}
.dlg-foot-left  { display: flex; gap: 6px; flex-wrap: wrap; }
.dlg-foot-right { display: flex; gap: 9px; }

.dlg-view    { width: min(480px, calc(100vw - 32px)); }
.dlg-confirm { width: min(420px, calc(100vw - 32px)); }
.dlg-confirm .dlg-body { padding-top: 18px; font-size: 14px; }

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 14px;
}
.field-wide { grid-column: 1 / -1; }

.form-error {
    margin-top: 12px;
    background: var(--danger-soft);
    border: 1px solid var(--danger-line);
    color: var(--danger-deep);
    padding: 10px 12px;
    border-radius: 9px;
    font-size: 13px;
}
.conf-row  { margin-top: 5px; font-weight: 600; }
.conf-hint { margin-top: 4px; color: #a2564c; font-size: 12.5px; }

/* Combobox pacient */
.combo { position: relative; }
.combo-list {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(15, 20, 35, 0.14);
    z-index: 20;
    max-height: 220px;
    overflow-y: auto;
}
.combo-item {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    padding: 9px 12px;
    border: none;
    background: none;
    font: inherit;
    font-size: 13.5px;
    text-align: left;
    cursor: pointer;
}
.combo-item span { color: var(--muted); font-size: 12.5px; }
.combo-item.is-active { background: var(--primary-soft); }

.combo-linked {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--primary-deep);
    background: var(--primary-soft);
    border: 1px solid #c9d9f5;
    padding: 3px 5px 3px 9px;
    border-radius: 999px;
}
.combo-unlink {
    border: none;
    background: none;
    cursor: pointer;
    color: inherit;
    display: grid;
    place-items: center;
    padding: 2px;
    border-radius: 99px;
}

/* Detalii programare */
.v-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
}
.v-patient { font-size: 17px; font-weight: 700; }
.v-phone {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 3px;
    color: var(--primary-deep);
    font-weight: 600;
    font-size: 13.5px;
    text-decoration: none;
}
.v-grid {
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin-top: 14px;
}
.v-row {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13.5px;
}
.v-row .ic { color: #8791a5; }
.v-row .chip-dot { margin-right: 6px; }
.v-notes {
    margin-top: 12px;
    background: var(--surface2);
    border: 1px solid var(--line);
    border-radius: 9px;
    padding: 9px 11px;
    font-size: 13px;
    white-space: pre-wrap;
}
.v-meta { margin-top: 12px; font-size: 11.5px; color: var(--muted); }

/* ============================================================
   Bara calendarului
   ============================================================ */
.cal-toolbar {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 14px;
}
.cal-toolbar-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    position: relative;
}
.cal-filters { gap: 8px; }
.cal-nav { display: inline-flex; gap: 2px; }

.cal-date:focus,
.cal-date:focus-visible { color: var(--ink); }
.cal-date {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: none;
    background: none;
    font: inherit;
    font-size: 16.5px;
    font-weight: 700;
    color: var(--ink);
    cursor: pointer;
    padding: 6px 8px;
    border-radius: 9px;
    transition: background 0.15s ease;
}
.cal-date .ic { color: var(--muted); }
.cal-datepick {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
    border: 0;
    padding: 0;
}

/* ============================================================
   Grila Zi / Săptămână
   ============================================================ */
.dg-wrap {
    overflow: auto;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
    max-height: calc(100vh - 205px);
    min-height: 320px;
    overscroll-behavior: contain;
}
.daygrid {
    display: grid;
    position: relative;
}

.dg-head {
    position: sticky;
    top: 0;
    z-index: 5;
    background: #fff;
    border-bottom: 1px solid var(--line);
}
.dg-corner { display: none; }
.dg-head {
    padding: 9px 12px;
    border-left: 1px solid var(--line-soft);
    min-width: 0;
}
.dg-head-name {
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dg-head-meta { font-size: 11px; color: var(--muted); margin-top: 1px; }

.dg-head-day { cursor: pointer; }
.dg-head-day.is-today .dg-head-name { color: var(--primary-deep); }
.dg-head-day.is-today .dg-head-meta { color: var(--primary); font-weight: 600; }

/* Banda orelor stă în AFARA containerului derulant (.dg-outer nu derulează
   niciodată) - de aceea nu se poate mișca orizontal, indiferent de swipe. */
.dg-outer {
    position: relative;
}
.dg-gutter {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: 30;
    background: #fff;
    border-right: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.dg-ghead {
    flex: 0 0 auto;
    background: #fff;
    border-bottom: 1px solid var(--line);
}
.dg-ghclip {
    flex: 1 1 auto;
    position: relative;
    overflow: hidden;
}
.dg-ghours { position: relative; will-change: transform; }
.daygrid { min-height: 100%; padding-bottom: 14px; }
.dg-hour.is-first { transform: translateY(1px); }
.dg-hour {
    position: absolute;
    right: 7px;
    transform: translateY(-7px);
    font-size: 11px;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
    background: #fff;
    padding: 0 2px;
}

.dg-col {
    position: relative;
    border-left: 1px solid var(--line-soft);
    min-width: 0;
}
.dg-col.is-today { background-color: #f8faff; }

.nowline {
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background: #d64533;
    z-index: 3;
    pointer-events: none;
}
.nowline span {
    position: absolute;
    left: -1px;
    top: -3px;
    width: 8px;
    height: 8px;
    border-radius: 99px;
    background: #d64533;
}

.sel-ghost {
    position: absolute;
    left: 2px;
    right: 3px;
    border: 1px dashed var(--focus);
    border-radius: 8px;
    background: #e7eefb;
    background: color-mix(in oklab, var(--primary) 12%, white);
    z-index: 2;
    pointer-events: none;
}

.drag-badge {
    position: fixed;
    z-index: var(--z-pop);
    background: var(--ink);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    padding: 4px 9px;
    border-radius: 7px;
    pointer-events: none;
    box-shadow: 0 6px 18px rgba(15, 20, 35, 0.3);
    white-space: nowrap;
}

/* ---------- Blocurile de programare ---------- */
.evt,
.mo-pill {
    --c: #4F5BD5;
    background-color: #eceef8;
    border: 1px solid #ced3ee;
    color: #303a6e;
    background-color: color-mix(in oklab, var(--c) 13%, white);
    border-color: color-mix(in oklab, var(--c) 34%, white);
    color: color-mix(in oklab, var(--c) 58%, #20241a);
}

.evt {
    position: absolute;
    border-radius: 8px;
    padding: 4px 8px 6px;
    overflow: hidden;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    box-shadow: 0 1px 2px rgba(23, 28, 42, 0.06);
    transition: box-shadow 0.15s ease;
}
.evt:focus-visible { outline-offset: 0; }

.evt-time {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    opacity: 0.85;
}
.evt-flag { display: inline-flex; }
.evt-pat {
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.25;
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.evt-meta {
    font-size: 11px;
    opacity: 0.75;
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.evt.is-compact {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 2px 7px;
}
.evt.is-compact .evt-time { font-size: 10.5px; }
.evt.is-compact .evt-pat  { font-size: 11.5px; margin: 0; }
.evt.is-compact .evt-meta { display: none; }

.evt-resize {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 8px;
    cursor: ns-resize;
    touch-action: none;
}
.evt-resize::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 2px;
    width: 26px;
    height: 3px;
    border-radius: 3px;
    transform: translateX(-50%);
    background: currentColor;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.evt.is-drag {
    box-shadow: 0 14px 34px rgba(15, 20, 35, 0.28);
    cursor: grabbing;
    z-index: 30;
    opacity: 0.95;
}

.evt.st-confirmata {
    background-color: #e6ecf6;
    background-color: color-mix(in oklab, var(--c) 19%, white);
}
.evt.st-finalizata { opacity: 0.58; }
.evt.st-anulata {
    background-color: #fff;
    border-style: dashed;
    border-color: #ccd1dc;
    color: #828a9c;
}
.evt.st-anulata .evt-time,
.evt.st-anulata .evt-pat,
.evt.st-anulata .evt-h,
.evt.st-anulata .evt-nm { text-decoration: line-through; } /* .evt-h/.evt-nm: markup-ul compact din Săptămână */
.evt.st-neprezentat {
    background-image: repeating-linear-gradient(
        45deg, rgba(23, 28, 42, 0.05) 0 5px, transparent 5px 10px
    );
}

/* ============================================================
   Vederea Lună
   ============================================================ */
.mo-wrap {
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
    overflow: hidden;
}
.mo-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
}
.mo-dow {
    padding: 8px 10px;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--muted);
    border-bottom: 1px solid var(--line);
    background: var(--surface2);
}
.mo-cell {
    min-height: 112px;
    border-top: 1px solid var(--line-soft);
    border-left: 1px solid var(--line-soft);
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    cursor: pointer;
    background: #fff;
    min-width: 0;
}
.mo-cell:nth-child(7n + 8) { border-left: none; }
.mo-cell.is-out { background: #f9fafc; }
.mo-cell.is-out .mo-num { color: #adb3c2; }

.mo-num {
    font-size: 12px;
    font-weight: 600;
    color: #4b5162;
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    flex: none;
}
.mo-cell.is-today .mo-num { background: var(--primary); color: #fff; }

.mo-pill {
    display: flex;
    align-items: center;
    gap: 5px;
    width: 100%;
    padding: 2px 7px;
    border-radius: 6px;
    font: inherit;
    font-size: 11.5px;
    text-align: left;
    cursor: pointer;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.mo-pill-t { font-weight: 700; font-variant-numeric: tabular-nums; flex: none; }
.mo-pill.st-finalizata { opacity: 0.6; }
.mo-pill.st-anulata {
    background-color: #fff;
    border-style: dashed;
    border-color: #ccd1dc;
    color: #828a9c;
    text-decoration: line-through;
}
.mo-more {
    border: none;
    background: none;
    font: inherit;
    font-size: 11px;
    font-weight: 600;
    color: var(--muted);
    text-align: left;
    padding: 1px 7px;
    cursor: pointer;
    border-radius: 6px;
}

/* ============================================================
   Vederea Listă + tabele generale
   ============================================================ */
.list-wrap { display: flex; flex-direction: column; gap: 10px; }
.list-head { display: flex; align-items: center; gap: 12px; }
.list-count { color: var(--muted); font-size: 13px; }

.tbl-wrap {
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
    overflow: auto;
}
.tbl {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
}
.tbl th {
    text-align: left;
    font-size: 12px;
    font-weight: 600;
    color: var(--muted);
    padding: 10px 12px;
    background: var(--surface2);
    border-bottom: 1px solid var(--line);
    position: sticky;
    top: 0;
    z-index: 2;
    white-space: nowrap;
}
.tbl td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--line-soft);
    vertical-align: middle;
}
.tbl tbody tr:last-child td { border-bottom: none; }

.list-row { cursor: pointer; }
.list-sub td {
    background: var(--surface2);
    font-weight: 700;
    font-size: 12.5px;
    color: #434a5a;
    padding: 7px 12px;
}
.td-time {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    white-space: nowrap;
}
.td-pat { font-weight: 600; }
.td-act { text-align: right; white-space: nowrap; }
.list-row.st-anulata .td-pat,
.list-row.st-anulata .td-time {
    text-decoration: line-through;
    color: var(--muted);
}
.list-row.st-finalizata td { color: #6a7080; }

.tel {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px dotted #b6bdcd;
    white-space: nowrap;
}
.doc { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }

.row-actions { display: flex; gap: 5px; justify-content: flex-end; }
.tbl form { display: inline; margin: 0; }

.swatch-mini {
    width: 14px;
    height: 14px;
    border-radius: 99px;
    display: inline-block;
    background: var(--c, #94a0b8);
    vertical-align: -2px;
    margin-right: 7px;
}

/* ============================================================
   Stare goală, schelete de încărcare
   ============================================================ */
.empty {
    border: 1px dashed #d3d7e2;
    border-radius: 14px;
    background: #fff;
    padding: 44px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
}
.empty-ic {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: var(--primary-soft);
    color: var(--primary-deep);
    display: grid;
    place-items: center;
}
.empty-ic .ic { width: 22px; height: 22px; }
.empty h3 { margin: 4px 0 0; font-size: 16px; }
.empty p {
    margin: 0;
    color: var(--muted);
    font-size: 13.5px;
    max-width: 430px;
    line-height: 1.5;
}
.empty .btn { margin-top: 10px; }

.skel {
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
    padding: 14px;
    overflow: hidden;
}
.skel-grid { display: flex; gap: 12px; height: min(520px, 58vh); }
.skel-col {
    flex: 1;
    position: relative;
    background: var(--surface2);
    border-radius: 9px;
}
.skel-blk {
    position: absolute;
    left: 8px;
    right: 8px;
    border-radius: 7px;
    background: #e7e8e0;
    animation: pulse 1.3s ease-in-out infinite;
}
.skel-month {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
}
.skel-cell {
    height: 88px;
    border-radius: 8px;
    background: var(--surface2);
    animation: pulse 1.3s ease-in-out infinite;
}
.skel-list .skel-bar {
    height: 16px;
    border-radius: 6px;
    background: var(--surface2);
    margin: 14px 0;
    animation: pulse 1.3s ease-in-out infinite;
}
.w30 { width: 30%; }
.w60 { width: 60%; }

@keyframes pulse { 50% { opacity: 0.5; } }

/* ============================================================
   Pagini clasice (Pacienți, Echipă, Scaune, …)
   ============================================================ */
.page-head {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.page-head h1 { font-size: 20px; margin: 0; }
.page-sub { color: var(--muted); font-size: 13px; margin: 2px 0 0; width: 100%; }

.card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 16px 18px;
    margin-bottom: 16px;
}
.card > h2 { font-size: 15px; margin: 0 0 12px; }

.frow {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 12px 14px;
    align-items: end;
}
.frow .field-wide { grid-column: 1 / -1; }
.form-actions {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: 14px;
    flex-wrap: wrap;
}

.swatches { display: flex; gap: 7px; flex-wrap: wrap; }
.swatch { position: relative; display: inline-block; cursor: pointer; }
.swatch input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}
.swatch span {
    display: block;
    width: 26px;
    height: 26px;
    border-radius: 999px;
    background: var(--c);
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px var(--line);
    transition: box-shadow 0.12s ease, transform 0.12s var(--ease-out);
}
.swatch input:checked + span {
    box-shadow: 0 0 0 2px var(--ink);
    transform: scale(1.06);
}
.swatch input:focus-visible + span { box-shadow: 0 0 0 3px var(--focus); }

.hint { font-size: 12.5px; color: var(--muted); }

/* ============================================================
   Pagina de autentificare
   ============================================================ */
.page-login { background: #fff; }
.login-wrap {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    min-height: 100vh;
}
.login-brand {
    background: var(--rail);
    color: #e9eadf;
    display: flex;
    align-items: center;
    padding: clamp(28px, 6vw, 72px);
}
.login-brand-inner {
    max-width: 470px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.brand-lg .brand-mark { width: 52px; height: 52px; border-radius: 14px; }
.brand-lg .brand-text strong { font-size: 20px; }
.login-brand h1 {
    margin: 8px 0 0;
    font-size: clamp(26px, 3.4vw, 38px);
    line-height: 1.12;
    letter-spacing: -0.5px;
    color: #f4f6fa;
}
.login-brand p {
    margin: 0;
    color: #aab2c5;
    font-size: 15px;
    line-height: 1.55;
}
.login-points {
    list-style: none;
    margin: 10px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 11px;
}
.login-points li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14px;
    color: #d3d9e6;
}
.login-points .ic { color: var(--rail-accent, #a9c4f5); margin-top: 1px; }

.login-form-side {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 28px;
}
.login-card {
    width: min(380px, 100%);
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.login-card h2 { margin: 0; font-size: 22px; }
.login-sub { margin: -8px 0 2px; color: var(--muted); font-size: 13.5px; }
.login-hint {
    margin: 4px 0 0;
    font-size: 12.5px;
    color: var(--muted);
    line-height: 1.55;
}
code {
    background: var(--surface2);
    border: 1px solid var(--line);
    padding: 1px 5px;
    border-radius: 5px;
    font-size: 12px;
}

/* ============================================================
   Financiar & Statistici
   ============================================================ */
.dlg-pay { width: min(460px, calc(100vw - 32px)); }
.pay-sub {
    margin: 0 0 12px;
    font-size: 13.5px;
    color: var(--muted);
}
.pay-sub strong { color: var(--ink); }
.pay-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 14px;
}
.pay-grid .field-wide { grid-column: 1 / -1; }

.pay-box {
    background: var(--surface2);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 12px;
}
.pay-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    font-size: 13px;
}
.pay-head .ic { color: var(--primary-deep); }
.pay-head .hint { margin-left: auto; text-align: right; }

.pay-delta {
    margin-top: 10px;
    font-size: 13px;
    font-weight: 700;
    min-height: 18px;
}
.pay-delta.is-neg { color: var(--danger-deep); }
.pay-delta.is-pos { color: var(--primary-deep); }
.pay-delta.is-ok  { color: #3f8552; }
.pay-balance {
    margin-top: 6px;
    font-size: 12.5px;
    color: var(--muted);
    min-height: 16px;
}

.pay-tag {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 700;
}
.pay-tag.is-neg { background: var(--danger-soft); color: var(--danger-deep); }
.pay-tag.is-pos { background: var(--primary-soft); color: var(--primary-deep); }
.pay-tag.is-ok  { background: #e8f3ea; color: #316b41; }

.m-neg { color: var(--danger-deep); font-weight: 600; }
.m-pos { color: var(--primary-deep); font-weight: 600; }
.td-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.tbl th.td-num { text-align: right; }
.tbl tfoot td {
    background: var(--surface2);
    font-weight: 700;
    border-top: 1px solid var(--line);
}

/* Carduri KPI */
.kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}
.kpi {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 13px 15px;
}
.kpi-label { font-size: 12px; font-weight: 600; color: var(--muted); }
.kpi-value {
    font-size: 21px;
    font-weight: 700;
    margin-top: 3px;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.3px;
}
.kpi-sub { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.kpi-value.is-neg { color: var(--danger-deep); }
.kpi-value.is-pos { color: var(--primary-deep); }

/* Grafic simplu cu bare */
.bars {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 150px;
    padding: 8px 2px 0;
}
.bar {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
    min-width: 0;
    height: 100%;
}
.bar i {
    display: block;
    width: 100%;
    max-width: 46px;
    /* graficele își păstrează albastrul, indiferent de culoarea principală aleasă */
    background: #2b5fc7;
    background: color-mix(in oklab, #2b5fc7 82%, white);
    border-radius: 5px 5px 2px 2px;
    min-height: 2px;
}
.bar.is-zero i { background: var(--line); }
.bar b {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--muted);
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}
.bar .bar-v {
    font-size: 10px;
    color: #6a7080;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
/* Alinierea coloanelor: etichetele (valoare + nume) nu se comprimă niciodată -
   doar bara cedează spațiu. Altfel, la coloana maximă (height:100%) flexbox
   comprima proporțional și textele, iar bara + numele ei coborau cu câțiva
   pixeli față de celelalte coloane. */
.bar .bar-v, .bar .bar-v2, .bar b { flex-shrink: 0; }

/* Bară de progres (grad de ocupare, ponderi) */
.prog {
    height: 8px;
    border-radius: 99px;
    background: var(--surface2);
    border: 1px solid var(--line-soft);
    overflow: hidden;
    min-width: 90px;
}
.prog i {
    display: block;
    height: 100%;
    background: #2b5fc7;
    border-radius: 99px;
}
.prog.is-doc i { background: var(--c, var(--primary)); }
.prog-wrap { display: flex; align-items: center; gap: 9px; }
.prog-pct {
    font-size: 12px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    min-width: 38px;
    text-align: right;
}

.period-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

/* Bare pereche pentru comparația cu anul precedent */
.bar-cols {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 2px;
    width: 100%;
    height: 100%;
}
.bar-cols i {
    flex: 1;
    max-width: 30px;
}
.bars .bar i.prev {
    background: #cdd2de;
}
.bars.is-doc .bar i:not(.prev) { background: var(--c, #2b5fc7); }

.chart-legend {
    display: flex;
    gap: 16px;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 10px;
    font-size: 12px;
    color: var(--muted);
}
.chart-legend .lg {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.chart-legend .lg::before {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 3px;
    background: var(--primary);
}
.chart-legend .lg.lg-prev::before { background: #cdd2de; }

/* Filtre în capetele tabelurilor */
.tbl-filters td {
    background: #fbfbfd;
    padding: 5px 8px;
    border-bottom: 1px solid var(--line);
}
.tbl-filters .input {
    padding: 4px 8px;
    font-size: 12px;
    border-radius: 7px;
    width: 100%;
    min-width: 70px;
}
.tbl-filter-count {
    font-size: 12px;
    color: var(--muted);
    margin: 6px 2px 0;
}
tr.is-filtered-out { display: none; }

.badge-method {
    background: #edeff4;
    color: #3f4552;
    border-color: #dfe3ec;
}

/* ============================================================
   Interacțiuni la hover (doar dispozitive cu cursor)
   ============================================================ */
@media (hover: hover) and (pointer: fine) {
    .btn-primary:hover      { background: var(--primary-hover); }
    .btn-ghost:hover        { background: var(--surface2); border-color: #cfd4e0; }
    .btn-ghost.btn-danger:hover {
        background: var(--danger-soft);
        border-color: var(--danger-line);
    }
    .btn-danger-solid:hover { background: #9c2c21; }

    .rail-link:hover:not(.is-active) { background: var(--rail-hi); color: var(--rail-strong, #fff); }
    .rail-user:hover { background: var(--rail-hi); }
    .rail-out:hover  { background: var(--rail-hi); color: var(--rail-strong, #fff); }

    .seg-btn:hover:not(.is-active) { color: var(--ink); }
    .chip:hover:not(.is-active) { border-color: #c6cbd8; background: var(--surface2); }
    .cal-date:hover { background: var(--surface2); }

    .evt:hover { box-shadow: 0 4px 12px rgba(23, 28, 42, 0.16); z-index: 6; }
    .evt:hover .evt-resize::after { opacity: 0.5; }
    .mo-pill:hover { filter: brightness(0.97); }
    .mo-more:hover { background: var(--surface2); color: var(--ink); }
    .mo-cell:hover { background: #fafbfe; }
    .dg-head-day:hover { background: var(--surface2); }

    .list-row:hover td { background: #f8f9fc; }
    .combo-item:hover { background: var(--primary-soft); }
    .combo-unlink:hover { background: #d4e1f8; }
    .tel:hover { border-bottom-color: var(--ink); }
    .v-phone:hover { text-decoration: underline; }
    .toast { cursor: default; }
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 900px) {
    .rail {
        transform: translateX(-105%);
        transition: transform 0.22s var(--ease-out);
        box-shadow: 0 0 40px rgba(15, 20, 35, 0.35);
        width: 250px;
    }
    body.rail-open .rail { transform: none; }
    .shell { margin-left: 0; }
    .topbar { display: flex; }
    .main { padding: 14px 14px 26px; }

    .dg-wrap { max-height: calc(100vh - 250px); }
    .mo-cell { min-height: 86px; padding: 4px; }
    .cal-date { font-size: 15px; }
}

@media (max-width: 560px) {
    .form-grid { grid-template-columns: 1fr; }
    .dlg {
        width: 100vw;
        max-width: none;
        height: 100dvh;
        max-height: none;
        border-radius: 0;
        margin: 0;
    }
    #dlg-appt form {
        display: flex;
        flex-direction: column;
        height: 100%;
    }
    #dlg-appt .dlg-body { flex: 1; overflow-y: auto; }
    .dlg-confirm { height: auto; width: calc(100vw - 24px); border-radius: 14px; margin: auto; }

    .login-wrap { grid-template-columns: 1fr; }
    .login-brand { padding: 24px 20px; }
    .login-brand h1 { font-size: 24px; }
    .login-points { display: none; }
    .login-form-side { padding: 22px 16px 34px; }
}

/* ============================================================
   Tipărire (lista de programări)
   ============================================================ */
@media print {
    .rail, .rail-scrim, .topbar, .cal-toolbar, .list-head,
    dialog, .toast-host, .td-act, .skip-link {
        display: none !important;
    }
    .shell { margin: 0; }
    .main { padding: 0; }
    body { background: #fff; }
    .tbl-wrap { border: none; border-radius: 0; overflow: visible; }
    .tbl { font-size: 12px; }
    .tbl th { position: static; }
    .tel { border-bottom: none; }
}

/* ============================================================
   Mișcare redusă
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ============================================================
   v1.3 - Meniu restrâns (doar iconițe), buton de restrângere
   ============================================================ */
.rail-collapse {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 11px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--rail-text, #9aa3b8);
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    text-align: left;
    transition: background 0.15s ease, color 0.15s ease;
}
.rail-collapse:hover { background: var(--rail-hi); color: var(--rail-strong, #fff); }
.rail-collapse .ic { transition: transform 0.2s ease; flex: none; }
html.rail-min .rail-collapse .ic { transform: rotate(180deg); }

@media (min-width: 901px) {
    html.rail-min .rail  { width: 74px; padding: 14px 9px; }
    html.rail-min .shell { margin-left: 74px; }
    html.rail-min .brand { justify-content: center; padding: 6px 0; }
    html.rail-min .brand-text,
    html.rail-min .rail-link > span,
    html.rail-min .rail-collapse > span,
    html.rail-min .rail-user-text { display: none; }
    html.rail-min .rail-link,
    html.rail-min .rail-collapse { justify-content: center; padding: 11px 0; }
    html.rail-min .rail-foot { flex-direction: column-reverse; gap: 4px; padding-top: 10px; }
    html.rail-min .rail-user { justify-content: center; padding: 6px 0; width: 100%; flex: none; }
}
@media (max-width: 900px) {
    .rail-collapse { display: none; }
    html.rail-min .shell { margin-left: 0; }
}

/* ============================================================
   v1.3 - Chip calendar: telefonul în dreapta numelui
   ============================================================ */
.evt-pat {
    display: flex;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
}
.evt-pat-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.evt-phone {
    margin-left: auto;
    flex: none;
    font-weight: 500;
    font-size: 10.5px;
    opacity: 0.85;
    letter-spacing: 0.2px;
    font-variant-numeric: tabular-nums;
}
.evt.is-compact .evt-pat { flex: 1; min-width: 0; }
.evt.is-compact .evt-phone { font-size: 10px; }

/* ============================================================
   v1.3 - Sold pacient la încasare: sugestii datorie / avans
   ============================================================ */
.pay-suggest {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 9px;
    padding: 8px 11px;
    border: 1px dashed var(--line);
    border-radius: 9px;
    background: var(--surface2, #f5f6f9);
    font-size: 13px;
}
.pay-suggest .btn { margin-left: auto; }
.pay-sg strong { font-variant-numeric: tabular-nums; }
.pay-after { color: var(--muted); font-weight: 500; }
.combo-label {
    padding: 7px 11px 4px;
    font-size: 10.5px;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--muted);
}

/* ============================================================
   v1.3 - Documente (poze) în fișa pacientului
   ============================================================ */
.docs-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.docs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
}
.doc-card {
    border: 1px solid var(--line);
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    display: flex;
    flex-direction: column;
}
.doc-thumb {
    display: block;
    aspect-ratio: 4 / 3;
    background: var(--surface2, #f5f6f9);
}
.doc-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.doc-meta {
    padding: 7px 9px 8px;
    font-size: 11.5px;
    color: var(--muted);
    display: flex;
    align-items: center;
    gap: 8px;
}
.doc-meta .doc-date { flex: 1; }
.doc-meta form { display: contents; }
.sold-line { display: inline-flex; align-items: center; gap: 8px; }

/* ============================================================
   v1.3.1 - Sloturi ocupate de alți medici (rolul „medic”)
   ============================================================ */
.evt.is-restricted {
    cursor: default;
    background-image: repeating-linear-gradient(
        135deg,
        transparent 0 7px,
        rgba(255, 255, 255, 0.30) 7px 10px
    );
}
.evt.is-restricted .evt-pat-name { font-weight: 500; opacity: 0.9; }
.mo-pill.is-restricted { cursor: default; opacity: 0.8; }
.list-row.is-restricted { cursor: default; }
.list-row.is-restricted td { opacity: 0.85; }

/* ============================================================
   v1.4 - Filtre cu pastile în capetele tabelurilor
   ============================================================ */
.tbl-filters td { position: relative; padding: 6px 8px 8px; vertical-align: top; }
.tf-box {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    min-height: 34px;
    padding: 3px 6px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    cursor: text;
}
.tf-box:focus-within { border-color: var(--focus); box-shadow: 0 0 0 3px rgba(79, 127, 224, 0.14); }
.tf-chips { display: contents; }
.tf-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    max-width: 100%;
    padding: 2px 4px 2px 8px;
    border-radius: 999px;
    background: var(--primary-soft, #e9effc);
    color: var(--primary-deep, #1a3a80);
    font-size: 11.5px;
    font-weight: 600;
}
.tf-chip > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tf-chip.is-loose { background: #f3ecfb; color: #5a3d8a; }
.tf-x {
    border: 0;
    background: transparent;
    color: inherit;
    font-size: 14px;
    line-height: 1;
    padding: 0 4px;
    cursor: pointer;
    border-radius: 999px;
}
.tf-x:hover { background: rgba(0, 0, 0, 0.08); }
.tf-in {
    flex: 1;
    min-width: 36px;
    width: 40px;
    border: 0;
    outline: 0;
    background: transparent;
    font: inherit;
    font-size: 12.5px;
    padding: 2px;
}
.tf-menu[hidden] { display: none; }
.tf-menu {
    position: absolute;
    left: 8px;
    right: 8px;
    top: 100%;
    margin-top: -4px;
    max-height: 230px;
    overflow: auto;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 9px;
    box-shadow: 0 12px 30px rgba(23, 28, 42, 0.14);
    z-index: 30;
    display: flex;
    flex-direction: column;
    padding: 4px;
}
.tf-opt {
    border: 0;
    background: transparent;
    text-align: left;
    font: inherit;
    font-size: 12.5px;
    padding: 7px 9px;
    border-radius: 7px;
    cursor: pointer;
}
.tf-opt:hover { background: var(--surface2, #f5f6f9); }

/* ============================================================
   v1.4 - Etichete deasupra ambelor coloane la comparație
   ============================================================ */
.bar-v2 {
    display: flex;
    gap: 6px;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
    margin-bottom: 3px;
    white-space: nowrap;
}
.bar-v2 { overflow: visible; }
.bar-v2 b { flex: none; text-align: center; overflow: visible; padding: 0 1px; }
.bar-v2 .prev { color: var(--muted); font-weight: 600; }
.bar.is-hidden { display: none; }

/* ============================================================
   v1.4 - Grafice tip plăcintă
   ============================================================ */
.pies {
    display: flex;
    gap: 26px;
    flex-wrap: wrap;
    align-items: flex-start;
}
.pie-fig { margin: 0; text-align: center; }
.pie {
    width: 190px;
    height: 190px;
    border-radius: 50%;
    background: var(--line-soft, #edeff4);
    box-shadow: inset 0 0 0 1px rgba(23, 28, 42, 0.06);
}
.pie-fig figcaption { margin-top: 8px; font-size: 12px; color: var(--muted); }
.pie-legend {
    list-style: none;
    margin: 14px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 6px 18px;
    font-size: 12.5px;
}
.pie-legend { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.pie-legend li { display: flex; align-items: flex-start; gap: 8px; min-width: 0; }
.pl-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pl-vals { display: flex; flex-wrap: wrap; gap: 2px 9px; align-items: baseline; }
.pl-vals b { white-space: nowrap; }
.pl-vals .hint { white-space: nowrap; }
.pie-legend li.is-hidden { display: none; }
.pie-legend i {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    background: var(--c, #94a0b8);
    flex: none;
    margin-top: 4px;
}
.pie-legend .pl-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pie-legend b { font-variant-numeric: tabular-nums; }
.pie-legend .pl-pct { color: var(--muted); }

/* ============================================================
   v1.4 - Paginare (lista de pacienți)
   ============================================================ */
.pager {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 14px;
}
.pager .spacer { flex: 1; }
.pg-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 9px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    color: var(--ink);
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
}
.pg-btn:hover { border-color: var(--focus); }
.pg-btn.is-active { background: var(--primary); border-color: var(--primary); color: #fff; }
.pg-btn.is-off { opacity: 0.45; pointer-events: none; }
.pg-info { font-size: 12.5px; color: var(--muted); }

/* Cât timp o listă de filtrare e deschisă, containerul tabelului nu o taie. */
.tbl-wrap:has(.tf-menu:not([hidden])) { overflow: visible; }

/* v1.5 - iconița de status înaintea intervalului */
.evt-st { display: inline-flex; align-items: center; margin-right: 4px; opacity: 0.9; }
.evt-st .ic { width: 11px; height: 11px; }
.evt-st.st-anulata, .evt-st.st-neprezentat { opacity: 1; }
.mo-pill .evt-st { margin-right: 3px; }
.mo-pill .evt-st .ic { width: 10px; height: 10px; }

/* v1.5 - tabel detaliat Financiar: ~8 rânduri vizibile, antet lipicios */
.tbl-scroll8 { max-height: 560px; overflow: auto; }
.tbl-scroll8 thead th {
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 3;
    box-shadow: 0 1px 0 var(--line);
}
.tbl-scroll8 .tbl-filters td {
    position: sticky;
    top: 42px;
    background: #fff;
    z-index: 2;
    box-shadow: 0 1px 0 var(--line-soft);
}

/* v1.5 - tabele compacte la Statistici: încap fără scroll orizontal
   pe ecrane obișnuite; scrollul apare doar când chiar nu e loc */
.tbl-compact th, .tbl-compact td { padding: 8px 9px; }
.tbl-compact { font-size: 13px; }
.tbl-compact .td-pat { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tbl-compact .tbl-filters td { padding: 5px 6px 7px; }

.fin-hist { white-space: nowrap; align-self: center; }
.fin-hist b { font-variant-numeric: tabular-nums; }

/* v1.5 - feliile plăcintei: SVG cu tooltip nativ */
.pie svg { width: 100%; height: 100%; display: block; border-radius: 50%; }
.pie-slice { cursor: default; transition: opacity 0.12s ease; }
.pie-slice:hover { opacity: 0.82; }

/* v1.5 - selecția anilor comparați */
.cmp-form { display: flex; align-items: center; gap: 7px; }
.input-sm { height: 34px; padding: 4px 8px; width: auto; font-size: 13px; }

/* v1.5 - zile nelucrătoare în calendar */
.dg-col.is-off {
    background:
        repeating-linear-gradient(135deg, transparent 0 9px, rgba(120, 128, 148, 0.07) 9px 13px),
        #fafbfd;
}
.mo-cell.is-off { background: #f6f7fa; }

/* v1.5 - bifele zilelor lucrătoare + mini-calendarul de excepții */
.wd-row { display: flex; gap: 8px; flex-wrap: wrap; }
.wd-chk {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 11px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: #fff;
    font-size: 13px;
    cursor: pointer;
    user-select: none;
}
.wd-chk:has(input:checked) { border-color: var(--primary); background: var(--primary-soft); font-weight: 600; }
.wd-chk input { accent-color: var(--primary); }

.cd-grid {
    display: grid;
    grid-template-columns: repeat(7, 44px);
    gap: 5px;
    max-width: 100%;
}
.cd-grid form { display: contents; }
.cd-head { font-size: 11px; font-weight: 700; color: var(--muted); text-align: center; padding-bottom: 2px; }
.cd {
    display: grid;
    place-items: center;
    width: 44px;
    height: 38px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: #fff;
    font: inherit;
    font-size: 13px;
    cursor: pointer;
    color: var(--ink);
}
.cd:hover { border-color: var(--focus); }
.cd.is-out { border-color: transparent; background: transparent; color: #c3c7d2; cursor: default; }
.cd.is-weekoff { background: var(--surface2); color: #a3a9b8; cursor: not-allowed; border-style: dashed; }
.cd.is-closed { background: var(--danger-soft); border-color: var(--danger-line); color: var(--danger-deep); font-weight: 700; }
.cd.is-today { box-shadow: inset 0 0 0 2px var(--primary); }
.cd-list { display: flex; gap: 8px; flex-wrap: wrap; }
.cd-list .tf-chip { border: 0; cursor: pointer; font: inherit; font-size: 12px; }

/* v1.5.3 - eticheta zilelor nelucrătoare în grilă */
.dg-off-tag {
    position: sticky;
    top: 6px;
    display: block;
    width: max-content;
    margin: 6px auto 0;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(120, 128, 148, 0.14);
    color: #6a7080;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    pointer-events: none;
    z-index: 1;
}

/* v1.6 - nota din istoricul pacientului + saltul la dată din Statistici */
.td-note { max-width: 280px; white-space: normal; font-size: 12.5px; color: var(--muted); }
.cal-jump { display: flex; align-items: center; position: relative; }
.cal-pickwrap { position: relative; display: inline-flex; }
/* inputul ascuns stă chiar sub titlu → calendarul nativ se deschide acolo */
.cal-jump .cal-datepick,
.cal-pickwrap .cal-datepick { top: 100%; bottom: auto; left: 14px; }

/* v1.6.1 - datele afișate românește (ZZ/LL/AAAA) peste inputul nativ */
.ro-date { position: relative; display: inline-flex; width: 100%; }
.ro-date:has(.input-sm) { width: auto; }
.ro-date .ro-date-face {
    pointer-events: none;
    display: flex;
    align-items: center;
    font-variant-numeric: tabular-nums;
}
.ro-date .ro-date-face.is-empty { color: var(--muted); }
.ro-date input[type="date"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}
.cal-jump .cal-date { display: inline-flex; align-items: center; gap: 7px; }

/* v1.7 - titlul-perioadă ca buton + linkul către fișă din detalii */
button.cal-date {
    background: none;
    border: 0;
    font: inherit;
    padding: 0;
    cursor: pointer;
    color: inherit;
}
button.cal-date:hover { color: var(--primary); }
button.cal-date .ic { color: var(--muted); }
.v-patient-link { color: inherit; text-decoration: none; border-bottom: 1px dashed var(--line-strong, #c9cedb); }
.v-patient-link:hover { color: var(--primary); border-bottom-color: var(--primary); }

/* v1.7.2 - liniile fine ale grilei, la pasul ales în Setări */
.dg-lines { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.dg-line {
    position: absolute;
    left: 0;
    right: 0;
    height: 0;
    border-top: 1px dashed var(--line-soft, #eef0f4);
}
.dg-line.is-hour { border-top-style: solid; border-top-color: var(--line, #e4e7ee); }
.dg-col > .evt, .dg-col > .nowline, .dg-col > .dg-off-tag { position: absolute; z-index: 2; }

/* v1.8 - bifele de tip rând (SMS) */
.chk-line {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    font-size: 13px;
    color: var(--ink);
    cursor: pointer;
    user-select: none;
}
.chk-line input { accent-color: var(--primary); }

/* v1.8 - separator subtil în carduri */
.sep { border: 0; border-top: 1px solid var(--line-soft); margin: 16px 0; }

/* v1.9 - separator discret în carduri */
hr.soft { border: 0; border-top: 1px solid var(--line-soft); margin: 18px 0 14px; }

/* v1.10 - filtrul de scaune cu selecție multiplă */
.mselect { position: relative; display: inline-flex; }
.mselect[hidden], .chips[hidden] { display: none !important; }
/* butoanele de filtrare arată ca chips-urile din Calendar */
.mselect-btn { cursor: pointer; text-align: left; }
.mselect-btn .ms-ic { margin-right: 0; color: inherit; }
.mselect-btn .chip-dot { margin-right: 0; }
.mselect-menu {
    position: absolute;
    top: calc(100% + 5px);
    right: 0;
    left: auto;
    max-height: min(60vh, 420px);
    overflow-y: auto;
    z-index: 40;
    min-width: 210px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 11px;
    box-shadow: 0 12px 28px rgba(20, 26, 40, 0.13);
    padding: 7px;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.mselect-menu[hidden] { display: none; }
.mselect-opt {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 9px;
    border-radius: 8px;
    font-size: 13.5px;
    cursor: pointer;
    user-select: none;
}
.mselect-opt:hover { background: var(--surface2, #f4f6fa); }
.mselect-opt input { accent-color: var(--primary); }
.mselect-opt .chip-dot { margin-right: 7px; vertical-align: middle; }

/* v1.13 - acțiunile din fereastra de detalii: egale, pe un singur rând */
.dlg-foot-split {
    display: flex;
    align-items: stretch;
    gap: 8px;
    flex-wrap: wrap;
}
.dlg-foot-split .dlg-foot-left,
.dlg-foot-split .dlg-foot-right {
    display: flex;
    gap: 8px;
    flex: 1 1 auto;
}
.dlg-foot-split .btn {
    flex: 1 1 0;
    justify-content: center;
    white-space: nowrap;
    padding-left: 10px;
    padding-right: 10px;
}
@media (max-width: 560px) {
    .dlg-foot-split .dlg-foot-left,
    .dlg-foot-split .dlg-foot-right { flex: 1 1 100%; }
}

/* v1.11 - casete de cod în pagini de configurare */
.codebox {
    background: var(--surface2, #f4f6fa);
    border: 1px solid var(--line-soft);
    border-radius: 9px;
    padding: 10px 13px;
    font-size: 12.5px;
    overflow-x: auto;
    margin: 0;
    white-space: pre;
}

/* v1.12 - tabelele financiare încap pe laptop: celulele grele pot rupe rândul */
.tbl-compact .doc { white-space: normal; }
.tbl-compact .doc .chip-dot { flex: none; }
.tbl-compact .badge { font-size: 11px; padding: 3px 8px; }
.tbl-compact th { padding: 8px 9px; }

/* v1.13 - bifele și radio-urile urmează culoarea principală aleasă */
input[type="checkbox"], input[type="radio"] { accent-color: var(--primary); }

/* v1.14 - „Azi” marcat discret când ziua curentă e cea afișată */
#navToday.is-on-today,
.btn.is-on-today {
    border: 1px solid #b6bcc9;
    box-shadow: inset 0 0 0 1px #e4e7ee;
}
.btn, .btn:hover { text-decoration: none; }
.seg-btn,
.seg-btn:hover { text-decoration: none; }
.seg-btn.is-active {
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1.5px;
}

/* v1.14 - cardurile financiare, grupate: încasările vs. valoarea lucrărilor */
.kpis-grouped {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    align-items: stretch;
}
.kpi-group {
    display: flex;
    gap: 10px;
    flex: 1 1 420px;
    padding: 10px;
    border-radius: 14px;
}
/* încasările: tentă verde foarte pală; valoarea lucrărilor: tentă chihlimbar pală */
.kpi-group:first-child {
    background: #eaf7ee;
    border: 1px solid #d3ebdb;
}
.kpi-group:last-child {
    background: #f9f6ef;
    border: 1px solid #ece4d2;
}
.kpi-group .kpi { background: #fff; border-radius: 11px; padding: 12px 14px; box-shadow: 0 1px 2px rgba(20,26,40,0.05); }
.kpi-group .kpi { flex: 1 1 0; margin: 0; }
@media (max-width: 900px) {
    .kpi-group { flex-wrap: wrap; }
    .kpi-group .kpi { flex: 1 1 45%; }
}

/* v1.15 - antetele de secțiune cu comutatorul propriu de grafic */
.sec-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.sec-head h2 { margin: 0; }

/* v1.16 - chip compact în Săptămână: iconiță + ora de început + nume;
   numele se strânge primul, apoi ora e tăiată de margine - iconița rămâne */
.evt-line {
    display: flex;
    flex-wrap: wrap;            /* numele poate continua pe rândurile următoare */
    align-items: center;
    gap: 2px 4px;
    min-width: 0;
    overflow: hidden;
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1.3;
}
.evt-line svg { flex: 0 0 auto; }
.evt-h { flex: 0 0 auto; font-variant-numeric: tabular-nums; }
.evt-nm {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    white-space: normal;        /* multi-line unde chip-ul are înălțime */
    overflow-wrap: break-word;
    font-weight: 600;
}
/* chip-urile scunde rămân pe un singur rând, cu nume scurtat elegant */
.evt.is-compact .evt-line { flex-wrap: nowrap; }
.evt.is-compact .evt-nm { white-space: nowrap; text-overflow: ellipsis; }

/* v1.16 - capul tabelelor rămâne întreg la derulare: etichetele sus,
   rândul de căutare imediat sub ele, cu fundal opac */
.tbl thead tr.tbl-filters td {
    position: sticky;
    top: 37px;
    z-index: 2;
    background: var(--surface2);
    box-shadow: 0 1px 0 var(--line);
}
.tbl-compact thead tr.tbl-filters td { top: 33px; }

/* v1.16 - aer între tabelul de datorii și cel de avansuri */
.fin-cols > div + div { margin-top: 26px; }

/* v1.16 - capete de tabel sortabile */
.tbl th.th-sortable { cursor: pointer; user-select: none; }
.tbl th.th-sortable:hover { color: var(--text, #1c2130); }
/* spațiul săgeții e rezervat permanent → coloanele nu se mișcă la sortare;
   pe coloanele numerice (aliniate dreapta) săgeata stă ÎNAINTEA textului,
   ca textul antetului să se termine exact la marginea datelor */
.tbl th.th-sortable::after { content: " ▲"; font-size: 9px; visibility: hidden; }
.tbl th.th-asc::after  { content: " ▲"; font-size: 9px; visibility: visible; }
.tbl th.th-desc::after { content: " ▼"; font-size: 9px; visibility: visible; }
.tbl th.td-num.th-sortable::after { content: none; }
.tbl th.td-num.th-sortable::before { content: "▲ "; font-size: 9px; visibility: hidden; }
.tbl th.td-num.th-asc::before  { content: "▲ "; visibility: visible; }
.tbl th.td-num.th-desc::before { content: "▼ "; visibility: visible; }

/* v1.18 - Săptămâna: coloanele zilelor alternează alb / gri foarte pal */
.daygrid.is-week .dg-col.is-alt:not(.is-today) { background-color: #f5f6fa; }

/* meniul filtrului de medici se deschide spre dreapta (aliniat cu butonul) */
#docSel .mselect-menu { left: 0; right: auto; }
/* v1.46.6 - pe desktop, meniul medicilor se lărgește după cel mai lung nume,
   ca fiecare medic să încapă pe un singur rând. Lățimea „max-content" scapă
   meniul absolut-poziționat de limita containerului (butonul), care altfel
   îl strângea la min-width și frângea numele lungi. Pe telefon rămâne ca acum. */
@media (min-width: 761px) {
    .mselect-menu { width: max-content; max-width: min(92vw, 380px); }
    .mselect-opt { white-space: nowrap; }
}

/* iconițele din butoanele/opțiunile de filtre */
.ms-ic { display: inline-flex; vertical-align: middle; margin-right: 7px; color: var(--muted); }
.ms-ic svg { display: block; }
.mselect-btn .chip-dot { margin-right: 7px; }

/* v1.19 - Încasări pe zile (Lună): geometrie fixă, ca linia de referință
   să cadă exact pe vârful barei celei mai înalte.
   Anatomie: .bars-vert 220px, padding 0; eticheta zilei jos = 15px + gap 3px
   → zona barelor = 100% − 18px; bara maximă = 80% din zonă. */
.bars-vert { position: relative; height: 220px; padding: 0 2px; }
.bars-vert .bar { gap: 3px; }
.bars-vert .bar b { flex: 0 0 15px; height: 15px; line-height: 15px; }
.bars-vert .bar-stack {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    position: relative;
    z-index: 1;
}
.bars-vert .bar-stack .bar-v {
    font-size: 9.5px;
    font-weight: 600;
    color: #444b5c;
    line-height: 1;
    flex: 0 0 auto;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;   /* numărul nu depășește niciodată lățimea barei */
}
.bars-maxline {
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(18px + (100% - 18px) * 0.8);  /* exact vârful barei de 80% */
    border-top: 1px dashed #a9b0c0;
    pointer-events: none;
    z-index: 0;
}
/* Verticalizarea o decide un script care MĂSOARĂ fiecare număr față de
   lățimea barei lui: orizontal cât timp încape, vertical doar când nu. */
.bars-vert.bars-vv .bar-stack .bar-v {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    max-width: none;
    max-height: 100%;
}
.bars-maxline em {
    position: absolute;
    right: 2px;
    bottom: 3px;
    font-style: normal;
    font-size: 10px;
    font-weight: 600;
    color: #7c8294;
    background: #fff;
    border-radius: 4px;
    padding: 1px 5px;
    font-variant-numeric: tabular-nums;
}

/* v1.19.5 - rândul de filtre are aceeași înălțime în toate vederile
   (Listă nu mai împinge nimic în jos la comutare) */
.cal-filters { min-height: 40px; }
.list-only .input-sm { height: 33px; }
#btnPrint { padding-top: 5px; padding-bottom: 5px; }

/* v1.21 - eticheta „sold achitat la zi” */
.pay-tag.is-ok { background: #e7f5ec; color: #2e7d4f; }

/* v1.21 - lightbox pentru documentele pacientului */
.lb-overlay {
    position: fixed;
    inset: 0;
    z-index: 200;
    background: rgba(12, 16, 28, 0.88);
    display: flex;
    align-items: center;
    justify-content: center;
}
.lb-overlay[hidden] { display: none; }
.lb-img {
    max-width: min(94vw, 1600px);
    max-height: 92vh;
    border-radius: 10px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    background: #fff;
}
.lb-btn {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 0;
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
}
.lb-btn:hover { background: rgba(255, 255, 255, 0.28); }
.lb-prev { left: 22px; }
.lb-next { right: 22px; }
.lb-close {
    position: fixed;
    top: 18px;
    right: 22px;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 0;
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    font-size: 22px;
    cursor: pointer;
}
.lb-close:hover { background: rgba(255, 255, 255, 0.28); }
.lb-count {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    color: #dfe4ee;
    font-size: 13px;
    background: rgba(255, 255, 255, 0.1);
    padding: 5px 13px;
    border-radius: 99px;
}

/* v1.23 - butoanele de zoom din vizualizatorul de documente */
.lb-zoom {
    position: fixed;
    top: 18px;
    left: 22px;
    display: flex;
    gap: 8px;
}
.lb-zbtn {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 0;
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
}
.lb-zbtn:hover { background: rgba(255, 255, 255, 0.28); }
.lb-img { transition: transform 0.12s ease-out; will-change: transform; touch-action: none; }
.lb-overlay { touch-action: none; }

/* v1.24 - numele fișierului ales nu mai împinge butonul de adăugare */
.doc-fname {
    flex: 0 0 auto;
    width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* v1.25 - butoanele de status din detaliile programării: culori pline, înălțimi egale */
.dlg-foot .btn { min-height: 42px; }
/* v1.26.1 - în dialogul de finalizare, Renunță și Finalizează au aceeași lățime */
#dlg-pay .dlg-foot { display: flex; gap: 10px; }
#dlg-pay .dlg-foot .btn { flex: 1 1 0; justify-content: center; }
.btn-q-ok  { background: #2e9e63; border-color: #2e9e63; color: #fff; }
.btn-q-ok:hover  { background: #268554; border-color: #268554; color: #fff; }
.btn-q-mut { background: #e8ebf1; border-color: #dde2ea; color: #2a3040; }
.btn-q-mut:hover { background: #dde2ea; color: #1c2130; }
.btn-q-can { background: #fadfe4; border-color: #f4cbd3; color: #96222f; }
.btn-q-can:hover { background: #f4cbd3; color: #7d1c27; }
.btn-q-ok svg, .btn-q-mut svg, .btn-q-can svg { flex: 0 0 auto; }

/* v1.25 - totalurile din registru, ca mici carduri */
.tot-card {
    display: inline-flex;
    flex-direction: column;
    gap: 1px;
    padding: 7px 14px;
    border-radius: 11px;
    line-height: 1.2;
}
.tot-card small { font-size: 11px; color: inherit; opacity: 0.75; }
.tot-card strong { font-size: 15px; }
.tot-cost { background: #f9f6ef; border: 1px solid #ece4d2; color: #6b5b2e; }
.tot-paid { background: #eaf7ee; border: 1px solid #d3ebdb; color: #24693f; }
.tot-card + .tot-card { margin-left: 8px; }

/* v1.25.1 - cardul soldului (datorie / avans) în aceeași familie cu totalurile */
.tot-neg { background: #fbe9ec; border: 1px solid #f4d2d8; color: #96222f; }
.tot-adv { background: #e8f0fd; border: 1px solid #d4e2f8; color: #2456a8; }

/* ============================================================
   v1.29 - OPTIMIZĂRI PENTRU TELEFON
   ============================================================ */

/* etichete lung/scurt: pe desktop lung, pe telefon scurt */
.lbl-sm { display: none; }
@media (max-width: 760px) {
    .lbl-lg { display: none; }
    .lbl-sm { display: inline; }

    /* toolbarul calendarului: rândul 1 cu vederi + navigare + „Programare nouă” în dreapta;
       rândul 2: Medici · Unit · Anulate pe același rând */
    .cal-toolbar-row { flex-wrap: wrap; gap: 8px; }
    #btnNew { margin-left: auto; order: 99; padding: 8px 12px; }
    #btnNew span { display: inline; }
    .cal-filters { min-height: 0; }
    .cal-filters .chips { display: none !important; }         /* pe telefon: mereu dropdown */
    .cal-filters .mselect { display: inline-flex !important; }
    .cal-filters > * { flex: 0 0 auto; }

    /* meniurile de filtre ocupă lățimea ecranului, nu ies în afară */
    .mselect-menu {
        position: fixed !important;
        left: 12px !important;
        right: 12px !important;
        width: auto !important;
        max-height: 60vh;
        overflow: auto;
        z-index: 120;
    }

    /* meniul lateral: fără module financiare/administrative pe telefon */
    .nav-finance, .nav-stats, .nav-sms, .nav-settings { display: none !important; }

    /* autentificarea: sigla și numele centrate sus, formularul centrat
       pe orizontală și pe verticală în spațiul rămas */
    .login-wrap {
        display: flex;
        flex-direction: column;
        min-height: 100dvh;
    }
    .login-brand {
        flex: 0 0 auto;
        padding: 20px 16px 14px;
        min-height: 0;
        display: flex;
        justify-content: center;      /* sigla + StomaPlan, centrate în viewport */
    }
    .login-brand .brand { justify-content: center; margin: 0; }
    .login-brand-inner {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 10px;
    }
    .login-brand h1, .login-brand p, .login-points { display: none; }
    .login-form-side {
        flex: 1 1 auto;
        display: flex;
        align-items: flex-start;      /* sus - tastatura nu acoperă câmpurile */
        justify-content: center;      /* centrat pe orizontală */
        padding: 6px 18px 28px;
    }
    .login-card {
        margin: 0;
        width: 100%;
        max-width: 400px;
    }
    .login-card h2,
    .login-card .login-sub,
    .login-card .login-hint { text-align: center; }
    .login-card h2 { margin-top: 0.5em; } /* o jumătate de rând deasupra „Autentificare” */

    /* tabelele se derulează lateral fără să rupă pagina */
    .tbl-wrap { overflow-x: auto; }

    /* Bara de sus preia identitatea meniului: fundal închis, text și iconuri deschise */
    .topbar {
        display: flex;
        align-items: center;
        gap: 8px;
        background: var(--rail);
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }
    .topbar .topbar-title { color: #fff; }
    .topbar #railToggle { color: var(--rail-text, #c3c9d8); }
    .topbar #railToggle:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }

    /* butonul principal al paginii, în dreapta titlului */
    .topbar .btn-top-new {
        margin-left: auto;
        order: 99;
        padding: 7px 12px;
        font-size: 13.5px;
    }

    /* pagina nu derulează lateral - grila derulează în interiorul ei,
       iar banda orelor rămâne fixă (sticky) indiferent de swipe */
    html, body { overflow-x: hidden; overscroll-behavior-x: none; }

    /* fără printare pe telefon */
    #btnPrint { display: none !important; }

    /* căutarea pacienților: singură pe primul rând, lată cât ecranul */
    .cal-toolbar-row .input-wrap {
        flex: 1 1 100% !important;
        max-width: 100% !important;
    }

    /* „Pe pagină:” + numerele - pe rând propriu */
    .cal-toolbar-row .pg-info { flex-basis: 100%; margin-top: 4px; }
    .cal-toolbar-row .pg-info + .seg { margin-top: -2px; }

    /* dialogurile umplu aproape tot ecranul */
    .dlg { width: calc(100vw - 20px); max-width: none; }

    /* grila calendarului: derulare laterală naturală cu degetul */
    .dg-wrap { overflow-x: auto; }

    /* calendarul rămâne în ecran (înălțimea exactă o setează scriptul, măsurat) */
    .dg-wrap { min-height: 240px; }
    .main { padding-bottom: 8px; }

    /* luna se comprimă în ecran: rânduri egale, celule elastice, fără derulare */
    .mo-grid { grid-auto-rows: minmax(0, 1fr); overflow: hidden; }
    .mo-cell { min-height: 0 !important; overflow: hidden; padding: 3px 4px; }
    .mo-wrap { overflow: visible; }

    /* fără meniul de apăsare lungă al sistemului pe programări */
    .evt { -webkit-touch-callout: none; }

    /* programarea „ridicată” la ținerea apăsată - semnal clar că intră în mutare */
    .evt.is-lifted {
        transform: scale(1.045);
        box-shadow: 0 10px 26px rgba(20, 30, 60, 0.3);
        z-index: 40;
        transition: transform 0.12s ease-out, box-shadow 0.12s ease-out;
    }

    /* mânerul de redimensionare: mereu vizibil și ușor de prins cu degetul;
       glisarea ORIZONTALĂ pe bară derulează calendarul, doar cea verticală redimensionează */
    .evt-resize { height: 16px; touch-action: pan-x; }
    .evt.is-compact .evt-resize { height: 9px; }
    .evt-resize::after {
        opacity: 0.55;
        width: 38px;
        height: 4px;
        bottom: 0;
        border-radius: 3px 3px 0 0;
    }
}

/* fără selecții și highlight-uri accidentale la atingerea grilei */
.daygrid, .daygrid *, .evt {
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}
/* scroll-ul nativ (vertical și lateral) rămâne complet liber pe grile */

/* v1.31 - calendarul propriu de alegere a datei (telefon) */
#spDatePop {
    position: fixed;
    inset: 0;
    background: rgba(15, 20, 35, 0.45);
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
}
.sp-dp-card {
    background: #fff;
    border-radius: 16px;
    padding: 14px;
    width: min(360px, 100%);
    box-shadow: 0 18px 50px rgba(10, 16, 34, 0.3);
}
.sp-dp-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}
.sp-dp-head .btn { padding: 6px 14px; font-size: 18px; line-height: 1; }
.sp-dp-dow,
.sp-dp-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}
.sp-dp-dow span {
    text-align: center;
    font-size: 11.5px;
    color: var(--muted);
    padding: 4px 0;
}
.sp-dp-day {
    border: none;
    background: none;
    font: inherit;
    font-size: 14.5px;
    padding: 9px 0;
    border-radius: 9px;
    cursor: pointer;
    color: var(--ink);
}
.sp-dp-day.is-today { font-weight: 700; color: var(--primary); }
.sp-dp-day.is-sel { background: var(--primary); color: #fff; font-weight: 700; }
.sp-dp-foot {
    display: flex;
    gap: 10px;
    margin-top: 12px;
}
.sp-dp-foot .btn { flex: 1; justify-content: center; }

/* v1.33 - selectarea rapidă a anului în calendarul aplicației */
.sp-dp-title {
    border: none;
    background: none;
    font: inherit;
    font-weight: 700;
    font-size: 15px;
    color: var(--ink);
    cursor: pointer;
    padding: 6px 10px;
    border-radius: 9px;
}
.sp-dp-title:hover { background: var(--soft, #f2f4f9); }
.sp-dp-years {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    padding: 6px 0 2px;
}
.sp-dp-year {
    border: none;
    background: none;
    font: inherit;
    font-size: 14.5px;
    padding: 12px 0;
    border-radius: 9px;
    cursor: pointer;
    color: var(--ink);
}
.sp-dp-year.is-today { font-weight: 700; color: var(--primary); }
.sp-dp-year.is-sel { background: var(--primary); color: #fff; font-weight: 700; }

/* v1.35 - importul de pacienți: agenda pe telefon, VCF pe desktop */
.imp-mob { display: none; }
@media (max-width: 760px) {
    .imp-mob { display: inline-flex; }
    .imp-desk { display: none !important; }
}

/* v1.35 - „Ține-mă minte” la autentificare */
.login-remember {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    color: var(--muted);
    margin: 4px 0 12px;
    cursor: pointer;
}
.login-remember input { width: 16px; height: 16px; accent-color: var(--primary); }
@media (max-width: 760px) {
    .login-remember { justify-content: center; }
}

/* v1.36 - vizibilitatea pacientului (multi-select pe fișă, doar medic-șef) */
.vis-dd {
    position: relative;
    display: inline-block;
}
.vis-dd summary {
    cursor: pointer;
    list-style: none;
    user-select: none;
}
.vis-dd summary::-webkit-details-marker { display: none; }
.vis-list {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 60;
    min-width: 240px;
    max-width: 320px;
    border: 1px solid var(--line);
    border-radius: 12px;
    max-height: 260px;
    overflow-y: auto;
    padding: 4px;
    background: #fff;
    box-shadow: 0 12px 32px rgba(15, 22, 40, 0.16);
}
.vis-row {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 9px;
    border-radius: 8px;
    cursor: pointer;
    white-space: nowrap;
}
.vis-row span {
    overflow: hidden;
    text-overflow: ellipsis;
}
.vis-row:hover { background: var(--soft, #f2f4f9); }
.vis-row input { width: 15px; height: 15px; flex: 0 0 auto; accent-color: var(--primary); }
.vis-row input:disabled + span { color: var(--muted); }

/* v1.39 - ghid de instalare pe iPhone (Safari) */
#iosHint {
    position: fixed;
    left: 10px;
    right: 10px;
    bottom: 12px;
    z-index: 300;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: var(--rail, #0f1523);
    color: #fff;
    border-radius: 14px;
    padding: 12px 12px 12px 14px;
    box-shadow: 0 12px 34px rgba(10, 16, 34, 0.35);
    font-size: 13.5px;
    line-height: 1.45;
}
#iosHint b, #iosHint strong { color: #fff; }
.ios-hint-x {
    border: none;
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    flex: 0 0 auto;
}

/* v1.40 - popup de informare + suma încasată blocată pentru alte roluri */
#spAlertPop {
    position: fixed;
    inset: 0;
    z-index: 400;
    background: rgba(15, 20, 35, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.sp-al-card {
    background: #fff;
    border-radius: 14px;
    padding: 20px 18px 16px;
    width: min(380px, 100%);
    box-shadow: 0 18px 50px rgba(10, 16, 34, 0.3);
    text-align: center;
}
.sp-al-card p { margin: 0 0 14px; line-height: 1.5; }
.input.is-locked { background: #f3f4f8; color: var(--muted); cursor: not-allowed; }

/* v1.41 - programările din zilele precedente: doar vizualizare pentru non-admin */
.evt.is-past-lock .evt-resize { display: none; }
.evt.is-past-lock { cursor: default; }

/* ===== Jurnal de audit - disponibil doar pe desktop ===== */
@media (max-width: 900px) {
    .rail-link.nav-audit { display: none; }
    .audit-desktop { display: none; }
    .audit-mobile-note { display: block; }
}
@media (min-width: 901px) {
    .audit-mobile-note { display: none; }
}

/* v1.44.3 - atributul hidden câștigă în fața display-urilor din clase
   (altfel .pay-suggest/.pay-grid rămân vizibile ca zone goale) */
.pay-suggest[hidden], .pay-grid[hidden], .pay-balance[hidden], .pay-delta[hidden] { display: none; }

/* v1.45.3 - Pe medici (Bare): linia discretă de referință + ponderea față de
   cel mai bun, deasupra liniei, în dreptul fiecărei coloane. Eticheta stă sus
   (margin-bottom:auto), restul coloanei rămâne ancorat jos. */
/* v1.45.5 - Pe medici (Bare): ponderea din totalul încasărilor, ca etichetă
   imediat deasupra sumei fiecărei coloane (fără linie de referință). Puțin mai
   înalt decât graficele obișnuite, ca eticheta în plus să nu strângă bara maximă. */
.bars.bars-share { height: 168px; }
.bar .bar-share {
    flex-shrink: 0;
    font-size: 10.5px;
    font-weight: 400; /* procentul nebolduit, suma bolduită (doar în graficul Pe medici) */
    color: var(--muted);
    font-variant-numeric: tabular-nums;
    line-height: 14px;
    margin-top: -3px; /* lipit de suma de deasupra - se citesc împreună: „6.700 / 55,3%" */
}
.bars.bars-share .bar-v { font-weight: 700; }

/* v1.46.3 - secțiunea Încasări: graficul umple spațiul rămas din viewport,
   FĂRĂ constante de pixeli - pur prin flex, deci scalează pe orice desktop:
   .shell e deja coloană pe min-height:100vh cu .main pe flex:1; aici .main
   devine coloană, cardul absoarbe restul (flex:1), iar în card graficul
   absoarbe restul dintre titlu și indicație. Barele au înălțimi procentuale,
   deci urmează automat. Totul e limitat la prezența .chart-fill (doar
   secțiunea Încasări); browserele fără :has rămân pe înălțimea fixă. */
/* Lanțul de înălțimi DEFINITE, de la rădăcină: procentele barelor se rezolvă
   doar dacă fiecare container are dimensiune definită (regula flexbox care
   funcționa și la înălțimea fixă). .shell primește height (nu doar min-height)
   cât fereastra; dacă conținutul e mai înalt, pagina derulează normal. */
body:has(.card.chart-fill) .shell { height: 100vh; min-height: 100vh; }
.main:has(> .card.chart-fill) { display: flex; flex-direction: column; }
.main:has(> .card.chart-fill) > .card.chart-fill {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.main:has(> .card.chart-fill) .chart-fill .bars {
    /* AMBELE variante de grafic (.bars simplu - Zi/Săptămână/An/comparații -
       și .bars-vert - Luna): flex-basis 0 (nu auto), ca dimensiunea rezultată
       din flex să fie DEFINITĂ și înălțimile procentuale ale barelor să se
       rezolve corect (cu basis auto, procentele colapsează). */
    flex: 1 1 0;
    height: auto;
    min-height: 180px; /* plasa de siguranță pe ferestre foarte scunde */
}
@media (max-width: 760px) {
    /* pe telefon, cardurile KPI stivuite ocupă oricum ecranul - grafice fixe,
       la înălțimile lor originale */
    .main:has(> .card.chart-fill) .chart-fill .bars { flex: 0 0 auto; height: 150px; }
    .main:has(> .card.chart-fill) .chart-fill .bars-vert { height: 220px; }
}

/* v1.51.0 - Financiar: datoriile/avansurile istorice, în chenar roz vizibil */
.fin-hist {
    border: 1px solid var(--danger-line);
    background: var(--danger-soft);
    padding: 7px 12px;
    border-radius: 10px;
}

/* v1.51.0 - Statistici: butoanele secțiunilor centrate pe PAGINA VIZIBILĂ
   (lățimea zonei de conținut, adică fereastra minus meniul lateral vizibil),
   nu între titlu și marginea dreaptă. Sub 1100px revine în flux, altfel
   segmentul lat ar călca titlul. */
@media (min-width: 1100px) {
    .page-head:has(> .seg[aria-label="Secțiunea de statistici"]) { position: relative; }
    .page-head > .seg[aria-label="Secțiunea de statistici"] {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }
}

/* v1.51.1 - Listă: câmpul de căutare suficient de lat pentru placeholder */
#fltQ { min-width: 250px; }

/* v1.51.5 - EXPERIMENT (reversibil): culorile iconițelor de status.
   Bifa (finalizată): verde puternic + îngroșată, vizibilă peste orice fundal;
   x-ul (anulată + neprezentată): negru. Ceasul (programată): neatins.
   Pentru revenire: șterge acest bloc. */
.evt-st.st-finalizata { color: #15803d; }
.evt-st.st-finalizata .ic { stroke-width: 3.6; }
.evt-st.st-anulata, .evt-st.st-neprezentat { color: #111111; }

/* v1.51.6 - Financiar: golul dintre cele două toggle-uri aliniat cu golul
   dintre grupul verde și cel chihlimbar de deasupra. Aceeași geometrie ca
   .kpis-grouped: două jumătăți egale (flex 1 1 0) cu gap 20px - mijlocul
   golului cade identic; segmentul de grupare se lipește de gol din stânga,
   metodele din dreapta. */
.fin-tabs { gap: 20px; }
.fin-tabs > div { flex: 1 1 0; display: flex; min-width: 0; }
.fin-tabs > div:first-child { justify-content: flex-end; }
@media (max-width: 900px) {
    .fin-tabs { flex-wrap: wrap; }
    .fin-tabs > div, .fin-tabs > div:first-child { flex: 1 1 100%; justify-content: flex-start; }
}

/* v1.51.7 - badge-ul de status din dialogul de detalii: iconița statusului
   în fața textului, în culoarea textului badge-ului (currentColor) */
.badge.has-ic { display: inline-flex; align-items: center; gap: 5px; }
.badge.has-ic .ic { width: 12px; height: 12px; flex-shrink: 0; }

/* v1.51.9 - Setări: cardul clinicii pe două coloane pe desktop - formularul
   (nume, program, zile, ore) pe jumătatea stângă, calendarul de excepții pe
   dreapta; pe ecrane înguste se stivuiesc natural. h3-ul din dreapta nu mai
   are nevoie de separatorul de sus. */
.clinic-cols { display: flex; gap: 34px; flex-wrap: wrap; align-items: flex-start; }
.clinic-cols > div:first-child { flex: 1 1 460px; min-width: 0; } /* formularul ocupă tot ce rămâne */
.clinic-cols > div:last-child {
    /* calendarul: blocul stă la dreapta, dar îngustat exact pe lățimea grilei
       (7 x 44px + 6 x 5px gap = 338px), ca titlul, textul și navigarea pe luni
       să se poată CENTRA pe calendarul de sub ele */
    flex: 0 0 auto;
    margin-left: auto;
    max-width: 338px;
}
.clinic-cols > div:last-child .cal-toolbar-row { justify-content: center; }
.clinic-cols > div:last-child h3 { text-align: center; }
.clinic-cols > div:last-child > p.hint { text-align: center; }
@media (min-width: 980px) {
    .clinic-cols > div > h3#zile { margin-top: 0; padding-top: 0; border-top: none; }
}

/* ============================================================
   v1.53 - Status dentar (odontogramă) pe fișa pacientului + catalog
   ============================================================ */
.dental-head { flex-wrap: wrap; row-gap: 8px; }
.dental-dent { display: inline-flex; align-items: center; margin: 0; }
.field-inline { display: inline-flex; align-items: center; gap: 8px; }
.dental-hint { margin: 0 0 10px; }
.dental-selbar {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    background: var(--primary-soft); border: 1px solid #c9d9f5; border-radius: 10px;
    padding: 8px 12px; margin: 0 0 12px; font-size: 13.5px; color: #1e3f8f;
}
.dental-selbar span { flex: 1 1 auto; }
.dental-wrap { display: flex; gap: 22px; align-items: flex-start; flex-wrap: wrap; }
.dental-map-col { flex: 0 1 660px; min-width: 280px; }
.dental-list-col { flex: 1 1 340px; min-width: 0; }
.dental-map { width: 100%; }
.dental-svg { display: block; width: 100%; height: auto; max-width: 660px; user-select: none; -webkit-user-select: none; }
.dental-svg .dz { fill: #f3f4f7; stroke: #b8bfcc; stroke-width: 1; transition: stroke .12s; }
.dental-svg .dz-soft { fill-opacity: 0.38; }
.dental-svg .dz-full { fill-opacity: 1; }
.dental-svg .dt { cursor: pointer; }
.dental-svg .dt:hover .dz { stroke: var(--primary); }
.dental-svg .dt.is-sel .dz { stroke: var(--primary); stroke-width: 2.2; }
.dental-svg.is-selmode .dt:not(.is-sel) .dz { fill-opacity: 0.28; }
.dental-svg .dt-num { font-size: 11px; font-weight: 600; fill: #4b5563; font-family: inherit; }
.dental-svg .dt.is-sel .dt-num { fill: var(--primary); }
.dental-svg .dt-missing .dz { fill: #fafbfc; stroke-dasharray: 2 2; }
.dental-svg .dt-x { stroke-width: 2.4; stroke-linecap: round; }
.dental-svg .dt-mid { stroke: #cbd0da; stroke-dasharray: 3 3; }
.dental-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; font-size: 12.5px; color: var(--muted); }
.dental-lg { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.dental-empty { margin: 4px 0 0; }
.dental-tbl tr.is-hl td { background: #fff7d6; }
.dental-tbl .dental-tooth-no { font-weight: 700; }
.dental-tbl .td-note { font-weight: 400; }
.dental-hist { margin-top: 12px; }
.dental-hist summary { cursor: pointer; font-weight: 600; font-size: 13.5px; color: var(--muted); margin-bottom: 8px; }
.dental-appt { font-size: 11.5px; margin-top: 2px; }
.dental-surf-row { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.dental-surf-row .chk-line { margin: 0; }
.dental-color { width: 64px; height: 38px; padding: 3px; }
.dlg-dental { width: min(600px, calc(100vw - 32px)); }
@media (max-width: 760px) {
    .dental-wrap { flex-direction: column; }
    .dental-map-col { flex: 1 1 auto; width: 100%; }
}
@media print {
    body.print-dental .card:not(#dental), body.print-dental .page-head, body.print-dental .flash,
    body.print-dental #dental .btn, body.print-dental .dental-selbar, body.print-dental .dental-hint,
    body.print-dental .dental-dent select { display: none !important; }
    body.print-dental #dental { border: none; box-shadow: none; }
    body.print-dental .dental-wrap { flex-direction: column; }
    body.print-dental .dental-map-col { flex: 1 1 auto; }
    body.print-dental .dental-hist { display: block; }
    body.print-dental .dental-hist[open] summary { display: block; }
}
/* Dinți tratați în dialogul de finalizare */
.pay-teeth { border: 1px solid var(--line-soft); border-radius: 10px; padding: 10px 12px; margin: 2px 0 12px; }
.pay-teeth-head { margin-bottom: 8px; }
.pay-teeth .pay-grid { margin-bottom: 0; }
.pay-teeth-resolve { align-self: end; margin: 0 0 6px; }
.pay-teeth-grid { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; }
.pay-teeth-row { display: flex; gap: 3px; }
.pay-teeth-row .pay-tooth:nth-child(8) { margin-right: 6px; }
.pay-tooth {
    flex: 1 1 0; min-width: 0; height: 28px; padding: 0; font: inherit; font-size: 11.5px; font-weight: 600;
    border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: #4b5563; cursor: pointer;
}
.pay-tooth:hover { border-color: var(--primary); color: var(--primary); }
.pay-tooth.is-on { background: var(--primary); border-color: var(--primary); color: #fff; }
.pay-teeth-surf { margin-top: 10px; }