/* ============================================================
   WinnerPath Conta
   Fără CDN-uri, fără fonturi externe, fără stiluri inline:
   politica CSP din .htaccess le blochează pe toate.
   ============================================================ */

:root {
    color-scheme: dark;

    --bg:         #0a0c11;
    --surface:    #12151d;
    --surface-2:  #191d27;
    --surface-3:  #212734;
    --border:     #232937;
    --border-soft:#1b202b;

    --text:       #e8eaf0;
    --text-dim:   #9aa3b8;
    --text-faint: #6b7488;

    --accent:     #7c6cf5;
    --accent-dim: #5f4fe0;
    --ok:         #3ddc97;
    --warn:       #f5a524;
    --fail:       #fb6b6b;

    --r-sm: 7px;
    --r:    11px;
    --r-lg: 16px;

    --shadow: 0 1px 2px rgba(0,0,0,.28), 0 8px 24px -12px rgba(0,0,0,.5);
    --sidebar-w: 248px;
}

@media (prefers-color-scheme: light) {
    :root {
        color-scheme: light;

        --bg:         #f5f6f9;
        --surface:    #ffffff;
        --surface-2:  #f4f5f8;
        --surface-3:  #eaecf1;
        --border:     #e3e6ed;
        --border-soft:#eef0f4;

        --text:       #161a23;
        --text-dim:   #5c6478;
        --text-faint: #8a92a6;

        --accent:     #5b4bd6;
        --accent-dim: #4a3cc0;
        --ok:         #129a6a;
        --warn:       #b8730a;
        --fail:       #d64545;

        --shadow: 0 1px 2px rgba(16,24,40,.05), 0 8px 24px -14px rgba(16,24,40,.16);
    }
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font: 15px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a { color: var(--accent); }

.icon { flex: 0 0 auto; vertical-align: -0.18em; }

/* ---------- Structura paginii ---------- */

.app {
    display: grid;
    grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
    min-height: 100vh;
}

.content { min-width: 0; }

.content__inner {
    max-width: 940px;
    margin: 0 auto;
    padding: 40px 32px 96px;
}

/* ---------- Sidebar ---------- */

.sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 20px 14px 14px;
    background: var(--surface);
    border-right: 1px solid var(--border);
}

.logo {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 8px 20px;
    text-decoration: none;
    color: var(--text);
}

.logo__mark {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: linear-gradient(150deg, var(--accent), var(--accent-dim));
    color: #fff;
    flex: 0 0 auto;
}

.logo__text { font-size: 14.5px; font-weight: 650; letter-spacing: -0.012em; }
.logo__text em { font-style: normal; font-weight: 450; color: var(--text-faint); }

.sidenav { display: flex; flex-direction: column; gap: 1px; flex: 1; }

.sidenav__label {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--text-faint);
    padding: 18px 10px 6px;
}

.sidenav__item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: var(--r-sm);
    color: var(--text-dim);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: background .12s, color .12s;
}

.sidenav__item:hover { background: var(--surface-2); color: var(--text); }

.sidenav__item.is-active {
    background: var(--surface-3);
    color: var(--text);
    font-weight: 600;
}

.sidenav__item.is-active .icon { color: var(--accent); }

/* Setările sunt ultimul lucru din meniu, dar nu al cincilea rând după
   Parteneri: se folosesc rar, deci stau jos, deasupra liniei care le
   desparte de cont. Spațiul dintre ele îl face „auto". */
.sidenav__item--last { margin-top: auto; }

.sidebar__foot {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-top: 12px;
    border-top: 1px solid var(--border-soft);
}

/* Contul și ieșirea, un singur bloc. Butonul de ieșire nu mai stă alături de
   „Setări" ca și cum ar fi două opțiuni de același fel — apare pe cardul de
   utilizator, unde te aștepți să fie. */
.userbar {
    display: flex;
    align-items: center;
    gap: 2px;
    border-radius: var(--r-sm);
}

.userbar:hover { background: var(--surface-2); }
.userbar:hover .userchip { background: none; }
.userbar__out { display: flex; flex: 0 0 auto; }

.userbar__out .iconbtn {
    opacity: 0;
    transition: opacity .12s ease, color .12s ease;
}

.userbar:hover .userbar__out .iconbtn,
.userbar__out .iconbtn:focus-visible { opacity: 1; }
.userbar__out .iconbtn:hover { color: var(--fail); }

.userchip {
    display: flex;
    align-items: center;
    gap: 9px;
    flex: 1;
    min-width: 0;
    padding: 7px 8px;
    border-radius: var(--r-sm);
    text-decoration: none;
    color: inherit;
}

.userchip:hover, .userchip.is-active { background: var(--surface-2); }

.avatar {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--surface-3);
    color: var(--text-dim);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.userchip__text { min-width: 0; line-height: 1.25; }
.userchip__text strong { display: block; font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.userchip__text small { display: block; font-size: 11px; color: var(--text-faint); }

.iconbtn {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    flex: 0 0 auto;
    border: 0;
    border-radius: var(--r-sm);
    background: transparent;
    color: var(--text-faint);
    cursor: pointer;
}

.iconbtn:hover { background: var(--surface-2); color: var(--text); }

/* ---------- Titluri ---------- */

.page-head { margin-bottom: 26px; }

.page-head h1 {
    margin: 0 0 5px;
    font-size: 25px;
    font-weight: 680;
    letter-spacing: -0.022em;
}

.page-head--row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
}

h2 {
    margin: 0 0 15px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--text-faint);
}

.muted { color: var(--text-dim); margin: 0; }
.small { font-size: 13.5px; }

code {
    background: var(--surface-2);
    border: 1px solid var(--border-soft);
    border-radius: 5px;
    padding: 1.5px 6px;
    font-size: 0.87em;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ---------- Carduri ---------- */

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 24px;
    margin-bottom: 16px;
    box-shadow: var(--shadow);
}

.card--center { text-align: center; padding: 52px 24px; }
.card--center h1 { font-size: 34px; margin: 0 0 8px; letter-spacing: -0.03em; }

/* ---------- Bannere ---------- */

.banner {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    border-radius: var(--r);
    padding: 13px 16px;
    margin-bottom: 18px;
    border: 1px solid;
    font-size: 14px;
    line-height: 1.5;
}

.banner .icon { margin-top: 1px; }
.banner strong { font-weight: 650; }
.banner a { color: inherit; text-underline-offset: 2px; }

.banner--ok   { background: color-mix(in srgb, var(--ok) 10%, var(--surface));   border-color: color-mix(in srgb, var(--ok) 32%, transparent);   color: var(--text); }
.banner--warn { background: color-mix(in srgb, var(--warn) 10%, var(--surface)); border-color: color-mix(in srgb, var(--warn) 32%, transparent); color: var(--text); }
.banner--info { background: color-mix(in srgb, var(--accent) 10%, var(--surface)); border-color: color-mix(in srgb, var(--accent) 30%, transparent); color: var(--text); }

.banner--ok   > .icon { color: var(--ok); }
.banner--warn > .icon { color: var(--warn); }
.banner--info > .icon { color: var(--accent); }

/* ---------- Butoane ---------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    background: var(--accent);
    color: #fff;
    border: 1px solid transparent;
    border-radius: 9px;
    padding: 9px 17px;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background .12s, border-color .12s;
}

.btn:hover { background: var(--accent-dim); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn--block { width: 100%; }
.btn--sm { padding: 7px 13px; font-size: 13px; }

.btn--ghost {
    background: var(--surface-2);
    border-color: var(--border);
    color: var(--text);
}

.btn--ghost:hover { background: var(--surface-3); }

.linklike {
    background: none;
    border: 0;
    color: var(--text-dim);
    font: inherit;
    font-size: 13px;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.card .btn--block { margin-top: 20px; }
.card form > .btn:not(.btn--block) { margin-top: 18px; }

.backlink { margin-bottom: 18px; }
.head-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

.actions { display: flex; gap: 10px; align-items: center; margin: 20px 0 16px; flex-wrap: wrap; }

/* ---------- Formulare ---------- */

.field { margin-bottom: 16px; }
.field:last-child { margin-bottom: 0; }
.field--narrow { max-width: 190px; }

.field label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
}

.field textarea {
    width: 100%;
    min-height: 90px;
    padding: 10px 12px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 9px;
    color: var(--text);
    font: inherit;
    font-size: 14px;
    line-height: 1.55;
    resize: vertical;
}

.field textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);
}

.field textarea::placeholder { color: var(--text-faint); }

/* `.input` e același câmp, dar de sine stătător: în bare de acțiuni, unde nu
   există o etichetă deasupra și nici lățime întreagă de umplut. */
.input {
    padding: 9.5px 12px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 9px;
    color: var(--text);
    font: inherit;
    font-size: 14px;
    max-width: 100%;
    min-width: 0;
    transition: border-color .12s, box-shadow .12s;
}

.input--sm { padding: 7px 10px; font-size: 13px; }

.input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}

/* Iconița de calendar a browserului e neagră pe fond întunecat. */
.input::-webkit-calendar-picker-indicator { filter: invert(0.7); cursor: pointer; }

@media (prefers-color-scheme: light) {
    .input::-webkit-calendar-picker-indicator { filter: none; }
}

.field input,
.field select {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding: 9.5px 12px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 9px;
    color: var(--text);
    font: inherit;
    font-size: 14px;
    transition: border-color .12s, box-shadow .12s;
}

.field input::placeholder { color: var(--text-faint); }

.field input:focus,
.field select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);
}

.field input[type="color"] { padding: 4px; height: 39px; cursor: pointer; }

.field small {
    display: block;
    margin-top: 6px;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--text-dim);
}

/* Accesul pe firme, ascuns până e cerut: rândul de utilizator ar deveni
   ilizibil cu opt bife mereu deschise. */
.access { position: relative; }

.access__summary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    font-size: 12.5px;
    border: 1px solid var(--line);
    border-radius: 8px;
    cursor: pointer;
    color: var(--text-dim);
    white-space: nowrap;
}

.access__summary::-webkit-details-marker { display: none; }
.access[open] .access__summary { border-color: var(--accent); color: var(--text); }

.access__list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 8px;
    padding: 10px 12px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 10px;
}

/* În rândul de utilizator plutește peste conținut; în modal stă în pagină. */
.access[open] .access__list {
    position: absolute;
    right: 0;
    z-index: 20;
    min-width: 200px;
    box-shadow: 0 12px 32px rgb(0 0 0 / 28%);
}

.access__list--open { position: static; box-shadow: none; }

.text-warn { color: var(--warn); }

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

.card__head h2 { margin: 0; }


.picker__item--add { display: flex; align-items: center; gap: 8px; color: var(--text-dim); }
.picker__item--add:hover { color: var(--text); }

/* Un câmp cu buton lipit de el — deocamdată doar căutarea după cod fiscal.
   Butonul nu se strânge; input-ul ia tot restul, inclusiv sub 360px. */
.input-group { display: flex; gap: 8px; align-items: stretch; }
.input-group > input { flex: 1 1 auto; min-width: 0; }
.input-group > .btn { flex: 0 0 auto; white-space: nowrap; }

.anaf-status {
    margin: 8px 0 0;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--text-dim);
    min-height: 0;
}

.anaf-status:empty { display: none; }
.anaf-status--ok   { color: var(--ok); }
.anaf-status--warn { color: var(--warn); }

/* min-width: 0 e obligatoriu: un <select> nu se strânge sub lățimea celei mai
   lungi opțiuni, iar fără el rândul depășește ecranul pe mobil. */
.field-row { display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap; }
.field-row .field { flex: 1 1 190px; min-width: 0; margin-bottom: 16px; }
.field-row .field--narrow { flex: 0 0 120px; }

.field-intro { margin: -8px 0 18px; }

.input--code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 21px;
    letter-spacing: 0.24em;
    text-align: center;
    padding-left: 0.24em;
}

.check {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 14px;
    margin-top: 10px;
    cursor: pointer;
}

.check input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; }
.check--inline { margin: 0; font-size: 13px; color: var(--text-dim); }

.select--sm {
    padding: 6.5px 10px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    color: var(--text);
    font: inherit;
    font-size: 13px;
}

.errors { margin: 8px 0 0; padding-left: 18px; }
.errors li { margin-bottom: 3px; }

/* ---------- Autentificare ---------- */

.shell {
    max-width: 860px;
    margin: 0 auto;
    padding: 44px 22px 80px;
}

.auth {
    max-width: 396px;
    margin: 0 auto;
    padding: 4vh 0 20px;
}

.auth__brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 26px;
}

.auth__brand .logo__mark { width: 34px; height: 34px; border-radius: 10px; }
.auth__title { font-size: 17px; font-weight: 650; letter-spacing: -0.012em; margin: 0; }
.auth__title em { font-style: normal; font-weight: 450; color: var(--text-faint); }
.auth__sub { text-align: center; margin: -14px 0 22px; font-size: 13.5px; color: var(--text-dim); }
.auth__alt { text-align: center; margin-top: 18px; }

/* ---------- Liste ---------- */

.list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }

.row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 15px 18px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r);
    text-decoration: none;
    color: inherit;
    flex-wrap: wrap;
    transition: border-color .12s, background .12s;
}

a.row:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); background: var(--surface-2); }

.row__main { flex: 1 1 200px; min-width: 0; }
.row__title { display: flex; align-items: center; gap: 8px; font-weight: 620; font-size: 14.5px; flex-wrap: wrap; }
.row__sub { display: block; font-size: 13px; color: var(--text-dim); margin-top: 3px; }
.row__meta { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.row__actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; width: 100%; padding-top: 12px; border-top: 1px solid var(--border-soft); }

.inline-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

.swatch { flex: 0 0 auto; display: block; }

/* ---------- Badge ---------- */

.badge {
    display: inline-block;
    padding: 2.5px 9px;
    border-radius: 20px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--text-dim);
    white-space: nowrap;
}

.badge--ok   { color: var(--ok);   background: color-mix(in srgb, var(--ok) 11%, transparent);   border-color: color-mix(in srgb, var(--ok) 30%, transparent); }
.badge--warn { color: var(--warn); background: color-mix(in srgb, var(--warn) 11%, transparent); border-color: color-mix(in srgb, var(--warn) 30%, transparent); }

/* ---------- Tiles ---------- */

.tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(152px, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}

.tile {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r);
    padding: 17px 18px;
    box-shadow: var(--shadow);
}

.tile__top { display: flex; align-items: center; gap: 7px; color: var(--text-faint); margin-bottom: 9px; }
.tile__label { font-size: 12.5px; font-weight: 600; color: var(--text-dim); }
.tile__value { display: block; font-size: 27px; font-weight: 680; letter-spacing: -0.028em; line-height: 1.1; }
.tile--attention { border-color: color-mix(in srgb, var(--warn) 42%, transparent); }
.tile--attention .tile__top { color: var(--warn); }

.tile__value small { font-size: 12px; font-weight: 600; color: var(--text-faint); margin-left: 5px; letter-spacing: 0; }
.tile__note { display: block; margin-top: 7px; font-size: 11.5px; color: var(--text-faint); }

.is-negative { color: var(--fail); }
.is-positive { color: var(--ok); }

.dash-note { display: flex; align-items: flex-start; gap: 7px; margin: -6px 0 18px; }

/* ---------- Panou: cifre pereche ---------- */

.kv-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 14px;
}

.kv-item {
    padding: 12px 14px;
    background: var(--surface-2);
    border-radius: var(--r-sm);
}

.kv-item__label { display: block; font-size: 12px; color: var(--text-dim); margin-bottom: 5px; }
.kv-item__value { display: block; font-size: 20px; font-weight: 660; letter-spacing: -0.02em; }
.kv-item__value small { font-size: 11px; font-weight: 600; color: var(--text-faint); margin-left: 4px; }

/* ---------- Panou: șase luni ---------- */

.spark { display: flex; gap: 10px; align-items: flex-end; margin-bottom: 14px; }
.spark__col { flex: 1 1 0; min-width: 0; text-align: center; }

.spark__bars {
    display: flex;
    gap: 3px;
    align-items: flex-end;
    justify-content: center;
    height: 96px;
    margin-bottom: 8px;
}

/* Bara pornește de la 2px chiar și la zero: o coloană complet goală arată a
   date lipsă, nu a lună fără mișcări. */
.spark__bar { width: 12px; min-height: 2px; border-radius: 3px 3px 0 0; height: 0; }
.spark__bar--in  { background: var(--ok); }
.spark__bar--out { background: color-mix(in srgb, var(--fail) 78%, transparent); }

.spark__label { display: block; font-size: 11px; color: var(--text-faint); }
.spark__value { display: block; font-size: 12px; font-weight: 650; color: var(--ok); }
.spark__value.is-negative { color: var(--fail); }

.legend {
    display: inline-block;
    width: 9px; height: 9px;
    border-radius: 2px;
    margin: 0 3px 0 10px;
    vertical-align: -1px;
}

.legend--in  { background: var(--ok); }
.legend--out { background: color-mix(in srgb, var(--fail) 78%, transparent); }

/* ---------- Panou: bare orizontale ---------- */

.bars { display: flex; flex-direction: column; gap: 10px; }

.bars__row {
    display: grid;
    grid-template-columns: minmax(90px, 1.1fr) minmax(0, 2fr) auto;
    gap: 12px;
    align-items: center;
}

.bars__label { font-size: 13px; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bars__track { height: 8px; background: var(--surface-2); border-radius: 4px; overflow: hidden; }
.bars__fill  { display: block; height: 100%; width: 0; background: var(--accent); border-radius: 4px; }
.bars__value { font-size: 13px; font-weight: 650; font-variant-numeric: tabular-nums; }

/* ---------- Progres spre un plafon ---------- */

.progress {
    height: 9px;
    background: var(--surface-2);
    border-radius: 5px;
    overflow: hidden;
    margin: 12px 0 8px;
}

.progress__fill { display: block; height: 100%; width: 0; background: var(--accent); border-radius: 5px; }
.progress__fill.is-warn { background: var(--warn); }

/* ---------- Verificări / chei-valori ---------- */

.checks { list-style: none; margin: 0; padding: 0; }

.check-item {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr) minmax(0, 1.25fr);
    gap: 12px;
    align-items: baseline;
    padding: 9px 0;
    border-bottom: 1px solid var(--border-soft);
    font-size: 14px;
}

.check-item:last-child { border-bottom: 0; }
.check-item__mark { font-weight: 700; }
.check-item--ok   .check-item__mark { color: var(--ok); }
.check-item--fail .check-item__mark { color: var(--fail); }
.check-item--fail .check-item__label { font-weight: 620; }

.check-item__detail {
    color: var(--text-dim);
    font-size: 12.5px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    overflow-wrap: anywhere;
}

.check-item--fail .check-item__detail { color: var(--fail); }

.kv {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
    gap: 9px 14px;
    margin: 0;
    font-size: 14px;
}

.kv dt { color: var(--text-dim); }
.kv dd { margin: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; overflow-wrap: anywhere; }

/* ---------- Diverse ---------- */

.status { font-size: 14px; font-weight: 620; margin: 0 0 8px; display: flex; align-items: center; gap: 7px; }
.status--ok { color: var(--ok); }
.status--warn { color: var(--warn); }

.qr { text-align: center; margin: 20px 0; }
.qr img { border-radius: 12px; background: #fff; padding: 12px; max-width: 100%; height: auto; }

.secret { text-align: center; margin: 12px 0; }
.secret code { font-size: 15px; letter-spacing: 0.07em; padding: 9px 15px; display: inline-block; }

.codes {
    list-style: none;
    margin: 0 0 12px;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(136px, 1fr));
    gap: 8px;
}

.codes code { display: block; text-align: center; padding: 10px 0; font-size: 14px; letter-spacing: 0.06em; }

.log {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 9px;
    padding: 15px;
    margin: 0;
    font-size: 12.5px;
    line-height: 1.65;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    overflow-x: auto;
    white-space: pre;
}

.empty { text-align: center; padding: 44px 24px; }
.empty__icon { display: grid; place-items: center; width: 46px; height: 46px; margin: 0 auto 14px; border-radius: 13px; background: var(--surface-2); color: var(--text-faint); }
.empty p { margin: 0 0 18px; }

/* ---------- Filtre ---------- */

.filters { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 18px; }

.chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 13px;
    border-radius: 20px;
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text-dim);
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
}

.chip:hover { background: var(--surface-2); color: var(--text); }
.chip.is-active { background: var(--surface-3); border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); color: var(--text); }
.chip span { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--text-faint); }
.chip.is-active span { color: var(--accent); }

.pager { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 18px; flex-wrap: wrap; }

/* ---------- Previzualizare document ---------- */

.preview {
    border: 1px solid var(--border);
    border-radius: var(--r);
    background: var(--surface-2);
    overflow: hidden;
}

.preview img { display: block; width: 100%; height: auto; }
.preview__pdf { display: block; width: 100%; height: 70vh; border: 0; }

.danger-zone { margin-top: 28px; text-align: right; }
.danger-zone .linklike { color: var(--fail); }

.doc-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: 28px;
    flex-wrap: wrap;
}

.linklike--danger { color: var(--fail); }

.amount {
    font-variant-numeric: tabular-nums;
    font-weight: 650;
    font-size: 15px;
    white-space: nowrap;
}

.amount small { font-size: 11px; font-weight: 500; color: var(--text-faint); margin-left: 2px; }
.amount--in { color: var(--ok); }

.field input:disabled {
    opacity: .6;
    cursor: not-allowed;
}

/* ---------- Modale ---------- */

dialog.modal {
    width: min(560px, calc(100vw - 32px));
    max-height: calc(100vh - 64px);
    padding: 0;
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    background: var(--surface);
    color: var(--text);
    box-shadow: 0 24px 64px -16px rgba(0, 0, 0, .55);
    overflow: visible;
}

/* Dialogul primește focus la deschidere; conturul implicit al browserului
   desenează un chenar în jurul întregii ferestre, care arată a bug. */
dialog.modal:focus,
dialog.modal:focus-visible { outline: none; }

dialog.modal::backdrop {
    background: rgba(4, 6, 11, .62);
    backdrop-filter: blur(2px);
}

.modal__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 22px 0;
}

.modal__head h2 { margin: 0; }
.modal__body { padding: 18px 22px 4px; max-height: calc(100vh - 220px); overflow-y: auto; }

.modal__foot {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 18px 22px 20px;
    margin-top: 6px;
    border-top: 1px solid var(--border-soft);
}

.modal__intro { margin: 0 0 18px; font-size: 13.5px; color: var(--text-dim); line-height: 1.5; }

/* ---------- Zona de încărcat fișiere ---------- */

.field label.dropzone,
.dropzone {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 26px 18px;
    text-align: center;
    border: 1.5px dashed var(--border);
    border-radius: var(--r-md);
    background: var(--surface-2);
    cursor: pointer;
    transition: border-color .15s, background .15s;
}

.field label.dropzone { margin-bottom: 0; font-weight: 400; }

.dropzone:hover,
.dropzone:focus-within { border-color: var(--accent); background: var(--surface-3); }
.dropzone > .icon { color: var(--text-faint); }
.dropzone__title { font-size: 15px; font-weight: 620; color: var(--text); }
.dropzone__hint { font-size: 12.5px; color: var(--text-dim); line-height: 1.45; }
.dropzone__hint.is-chosen { color: var(--ok); font-weight: 600; }

/* Câmpul rămâne acolo, doar că îl atingi pe tot, nu pe un buton cât unghia. */
.dropzone input[type="file"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

/* ---------- Bara de jos, pe telefon ---------- */

/* Ascunsă pe ecran mare: acolo meniul e în stânga, unde a fost mereu. */
.tabbar { display: none; }

/* ---------- Responsive ---------- */

@media (max-width: 860px) {
    /* minmax(0, 1fr), nu 1fr: altfel lățimea minimă a conținutului poate împinge
       coloana peste viewport, iar pagina capătă scroll orizontal.

       Rândurile se declară explicit: un grid cu min-height 100vh împarte spațiul
       rămas între rândurile automate, așa că pe o pagină scurtă bara de sus se
       umfla la jumătate de ecran, cu meniul plutind în mijlocul unui gol. */
    .app {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto minmax(0, 1fr);
    }

    .sidebar {
        position: static;
        height: auto;
        min-width: 0;
        flex-direction: row;
        align-items: center;
        gap: 14px;
        padding: 10px 16px;
        border-right: 0;
        border-bottom: 1px solid var(--border);
        overflow-x: auto;
    }

    .logo { padding: 0; flex: 0 0 auto; }
    .logo__text { display: none; }

    .sidenav { flex-direction: row; gap: 2px; flex: 1; }
    .sidenav__label { display: none; }
    .sidenav__item { white-space: nowrap; }
    .sidenav__item span { display: none; }
    .sidenav__item.is-active span { display: inline; }

    .sidebar__foot { padding-top: 0; border-top: 0; flex: 0 0 auto; flex-direction: row; }

    /* Pe orizontală nu există „jos": Setările se întorc în rând, la coadă. */
    .sidenav__item--last { margin-top: 0; margin-left: auto; }
    .userchip__text { display: none; }
    .userbar__out .iconbtn { opacity: 1; }

    .content__inner { padding: 26px 18px 70px; }
}

@media (max-width: 560px) {
    /* Sub lățimea asta, câmpurile alăturate nu mai încap niciodată. */
    .field-row .field,
    .field-row .field--narrow { flex: 1 1 100%; max-width: none; }

    .check-item, .kv { grid-template-columns: 18px minmax(0, 1fr); }

    /* Șase coloane nu încap; graficul se citește derulând, nu strivit. */
    .spark { overflow-x: auto; gap: 14px; }
    .spark__col { flex: 0 0 44px; }

    .bars__row { grid-template-columns: minmax(0, 1fr) auto; }
    .bars__track { grid-column: 1 / -1; }
    .check-item__detail { grid-column: 2; }
    .kv { grid-template-columns: minmax(0, 1fr); }
    .kv dd { margin-bottom: 8px; }
    .page-head h1 { font-size: 22px; }
}

/* ---------- Bară de context ---------- */

.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 32px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 20;
    flex-wrap: wrap;
}

.scope { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.topbar__actions { display: flex; align-items: center; gap: 8px; }

.scope__note {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11.5px;
    color: var(--warn);
    padding: 3px 9px;
    border-radius: 20px;
    background: color-mix(in srgb, var(--warn) 12%, transparent);
    cursor: help;
}

/* Selectoarele folosesc <details>, deci funcționează fără JavaScript. */
.picker { position: relative; }

.picker__button {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 6px 12px;
    border-radius: 8px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
    white-space: nowrap;
}

.picker__button::-webkit-details-marker { display: none; }
.picker__button::after { content: '▾'; color: var(--text-faint); font-size: 11px; margin-left: 2px; }
.picker__button:hover { background: var(--surface-3); }
.picker[open] .picker__button { border-color: var(--accent); }

.picker__menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 30;
    min-width: 250px;
    max-height: 60vh;
    overflow-y: auto;
    padding: 6px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r);
    box-shadow: 0 16px 40px -12px rgba(0,0,0,.45);
}

.picker__item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 10px;
    border-radius: var(--r-sm);
    color: var(--text);
    text-decoration: none;
    font-size: 13.5px;
    flex-wrap: wrap;
}

.picker__item:hover { background: var(--surface-2); }
.picker__item.is-active { background: var(--surface-3); font-weight: 600; }
.picker__item small { width: 100%; font-size: 11.5px; color: var(--text-faint); }
.picker__sep { border: 0; border-top: 1px solid var(--border-soft); margin: 5px 0; }

.iconbtn--badge { position: relative; }

.badge-dot {
    position: absolute;
    top: 1px;
    right: 1px;
    min-width: 15px;
    height: 15px;
    padding: 0 3px;
    border-radius: 8px;
    background: var(--fail);
    color: #fff;
    font-size: 9.5px;
    font-weight: 700;
    line-height: 15px;
    text-align: center;
}

@media (max-width: 860px) {
    .topbar { padding: 10px 18px; }
    .picker__menu { min-width: 210px; }
}


/* ============================================================
   Panoul de conversație
   ============================================================ */

.chat {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 60;
    display: flex;
    flex-direction: column;
    width: min(420px, 100vw);
    height: 100dvh;
    background: var(--surface);
    border-left: 1px solid var(--border);
    box-shadow: -24px 0 60px -30px rgb(0 0 0 / 55%);
}

.chat[hidden] { display: none; }

/* Voalul închide panoul la clic în afara lui; pe ecran lat nu întunecă
   pagina, fiindcă rostul chatului e să te uiți la ea în timp ce întrebi. */
.chat__veil { position: fixed; inset: 0; z-index: 55; }
.chat__veil[hidden] { display: none; }

.chat__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border-soft);
}

.chat__head strong { display: block; font-size: 14px; }
.chat__scope { display: block; font-size: 11.5px; color: var(--text-faint); }

.chat__log {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.chat__hint { color: var(--text-dim); font-size: 13.5px; }
.chat__hint p { margin: 0 0 10px; }
.chat__hint ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }

.chat__seed {
    width: 100%;
    text-align: left;
    padding: 9px 12px;
    font: inherit;
    font-size: 13px;
    color: var(--text);
    background: var(--surface-2);
    border: 1px solid var(--border-soft);
    border-radius: var(--r-sm);
    cursor: pointer;
}

.chat__seed:hover { border-color: var(--accent); }

.msg {
    max-width: 88%;
    padding: 10px 13px;
    border-radius: var(--r);
    font-size: 13.5px;
    line-height: 1.5;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.msg--user {
    align-self: flex-end;
    background: var(--accent);
    color: #fff;
    border-bottom-right-radius: 4px;
}

.msg--assistant {
    align-self: flex-start;
    background: var(--surface-2);
    border-bottom-left-radius: 4px;
}

.msg--assistant.is-thinking { color: var(--text-faint); font-style: italic; }
.msg--assistant.is-error { border: 1px solid color-mix(in srgb, var(--fail) 40%, transparent); }

/* Propunerea nu e un mesaj, e o decizie de luat: arată ca un card, nu ca o bulă. */
.msg--proposal {
    align-self: stretch;
    max-width: none;
    background: color-mix(in srgb, var(--accent) 8%, var(--surface));
    border: 1px solid color-mix(in srgb, var(--accent) 32%, transparent);
}

.msg__why { margin: 6px 0 0; font-size: 12.5px; color: var(--text-dim); }
.msg__done { margin: 8px 0 0; font-size: 12.5px; color: var(--ok); }
.msg__actions { display: flex; gap: 8px; margin-top: 11px; }

.chat__form {
    display: flex;
    gap: 8px;
    align-items: flex-end;
    padding: 12px 14px;
    border-top: 1px solid var(--border-soft);
}

.chat__form textarea {
    flex: 1;
    min-width: 0;
    resize: none;
    padding: 9px 11px;
    font: inherit;
    font-size: 13.5px;
    color: var(--text);
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
}

.chat__form textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);
}

@media (max-width: 860px) {
    .chat { width: 100vw; border-left: 0; }
    .chat__veil { background: rgb(0 0 0 / 45%); }
}


/* Perioadele fiscale: capul se citește dintr-o privire, restul se deschide. */
.period { padding: 0; }
.period--current { border-color: color-mix(in srgb, var(--ok) 40%, transparent); }

.period__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    padding: 16px 20px;
    cursor: pointer;
    list-style: none;
}

.period__head::-webkit-details-marker { display: none; }
.period[open] .period__head { border-bottom: 1px solid var(--border-soft); }
.period__when { font-size: 14px; }
.period__what { font-size: 12.5px; color: var(--text-dim); }
.period > form { padding: 18px 20px 4px; }
.period > form.inline-form { padding: 0 20px 16px; }

/* Bannerul cu acțiune: textul curge, butonul stă la dreapta. */
.banner .inline-form { margin-left: auto; flex: 0 0 auto; }

/* Împărțirea pe branduri: un rând per brand, procentul aliniat la dreapta. */
.shares { display: flex; flex-direction: column; gap: 8px; }

.share-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 12px;
    background: var(--surface-2);
    border-radius: var(--r-sm);
}

.share-row__brand { display: flex; align-items: center; gap: 8px; font-size: 13.5px; min-width: 0; }
.share-row__input { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.share-row__input input { width: 84px; text-align: right; }
.share-row__input span { color: var(--text-faint); font-size: 13px; }

.share { display: inline-flex; align-items: center; gap: 4px; margin-right: 10px; }
.period--off { opacity: .6; }

/* Selectorul de interval din panou: aceleași cipsuri, plus un calendar la cerere. */
.picker--inline { display: inline-block; }
.picker--inline > .chip { cursor: pointer; user-select: none; }
.picker--inline > .chip::-webkit-details-marker { display: none; }

.picker__menu--form { min-width: 240px; padding: 14px; }
.picker__menu--form .field { margin-bottom: 12px; }
.picker__menu--form .btn { width: 100%; justify-content: center; }


/* ============================================================
   Telefon
   ============================================================

   Sub lățimea asta nu mai e vorba de „mai strâmt", ci de altă unealtă. Meniul
   trece jos, la degetul mare, iconițele își recapătă numele, iar formularele se
   deschid pe tot ecranul. Contabila urcă bonuri din mașină, nu de la birou.
*/

@media (max-width: 700px) {
    /* Meniul din stânga nu mai are unde sta: locul lui e bara de jos. */
    .sidebar { display: none; }

    .app { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }

    .tabbar {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 50;
        display: flex;
        align-items: stretch;
        background: var(--surface);
        border-top: 1px solid var(--border);
        /* Bara de gesturi de pe iPhone stă peste ultimii pixeli ai ecranului. */
        padding-bottom: env(safe-area-inset-bottom);
    }

    .tabbar__item {
        flex: 1 1 0;
        min-width: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        /* 54px: sub atât, degetul nimerește vecinul. */
        min-height: 54px;
        padding: 7px 4px;
        color: var(--text-dim);
        text-decoration: none;
        font-size: 10.5px;
        font-weight: 600;
        line-height: 1.1;
        text-align: center;
        list-style: none;
        background: none;
        border: 0;
        cursor: pointer;
    }

    .tabbar__item span {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .tabbar__item::-webkit-details-marker { display: none; }
    .tabbar__item.is-active { color: var(--accent); }
    .tabbar__item.is-active .icon { color: var(--accent); }
    .tabbar__more { flex: 1 1 0; min-width: 0; display: flex; }
    .tabbar__more > .tabbar__item { width: 100%; }
    .tabbar__more[open] > .tabbar__item { color: var(--text); }

    /*
     * Sertarul: se deschide peste pagină, se închide atingând orice altceva.
     *
     * Închis, conținutul unui <details> rămâne așezat în pagină chiar dacă nu se
     * vede, iar aici era cu 16px mai lat decât ecranul — deci toată aplicația
     * căpăta derulare pe orizontală, pe orice pagină, fără ca ceva să se vadă
     * ieșit. Ascuns de tot, nu mai are cum.
     */
    .tabbar__more:not([open]) .drawer { display: none; }

    .drawer {
        position: fixed;
        inset: 0 0 calc(54px + env(safe-area-inset-bottom)) 0;
        background: rgb(0 0 0 / 45%);
        display: flex;
        align-items: flex-end;
    }

    .drawer__panel {
        width: 100%;
        background: var(--surface);
        border-top: 1px solid var(--border);
        padding: 8px 8px 12px;
        box-shadow: 0 -18px 40px -20px rgba(0, 0, 0, .6);
    }

    .drawer__item {
        display: flex;
        align-items: center;
        gap: 12px;
        width: 100%;
        min-height: 48px;
        padding: 0 14px;
        border: 0;
        border-radius: var(--r-sm);
        background: none;
        color: var(--text);
        font: inherit;
        font-size: 15px;
        text-align: left;
        text-decoration: none;
        cursor: pointer;
    }

    .drawer__item .icon { color: var(--text-faint); }
    .drawer__item.is-active { background: var(--surface-2); color: var(--accent); }
    .drawer__item.is-active .icon { color: var(--accent); }
    .drawer__item--out { color: var(--fail); }
    .drawer__item--out .icon { color: var(--fail); }
    .drawer__sep { border: 0; border-top: 1px solid var(--border-soft); margin: 6px 12px; }
    .avatar--sm { width: 22px; height: 22px; font-size: 10px; }

    /* Conținutul nu trebuie să se ascundă sub bara de jos. */
    .content__inner {
        padding: 20px 14px calc(54px + env(safe-area-inset-bottom) + 28px);
    }

    /* Bara de context: un singur rând, cu numele scurtate în loc de rupte. */
    .topbar { padding: 8px 14px; gap: 8px; flex-wrap: nowrap; }
    .scope { flex-wrap: nowrap; flex: 1 1 auto; overflow: hidden; }
    .picker { min-width: 0; }
    .picker__button span {
        max-width: 92px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .topbar__actions { flex: 0 0 auto; }

    /* „Întreabă" rămâne doar iconiță: numele lui se vede oricum în panou. */
    .topbar__actions .btn__label { display: none; }
    .topbar__actions .btn { padding: 8px 10px; }

    .page-head { margin-bottom: 20px; }
    .page-head h1 { font-size: 21px; }

    /* Butoanele mici de birou sunt prea mici pentru un deget. */
    .btn--sm { padding: 10px 15px; font-size: 14px; }
    .iconbtn { width: 38px; height: 38px; }

    /*
     * 16px pe câmpuri, nu din estetică: sub atât, Safari pe iPhone mărește
     * singur pagina la atingerea câmpului și nu o mai micșorează la loc.
     */
    .field input,
    .field select,
    .field textarea,
    .input { font-size: 16px; }

    /* Un formular pe jumătate de ecran, cu tastatura peste el, nu se poate completa. */
    dialog.modal {
        width: 100vw;
        max-width: 100vw;
        height: 100dvh;
        max-height: 100dvh;
        margin: 0;
        border: 0;
        border-radius: 0;
    }

    dialog.modal > form { display: flex; flex-direction: column; height: 100%; }
    .modal__body { flex: 1 1 auto; max-height: none; padding: 16px 16px 4px; }
    .modal__head { padding: 16px 16px 12px; }
    .modal__foot {
        padding: 14px 16px calc(14px + env(safe-area-inset-bottom));
        background: var(--surface);
    }
    .modal__foot .btn { flex: 1 1 auto; justify-content: center; }

    .dropzone { padding: 30px 16px; }
    .card { padding: 16px; }
    .tiles { gap: 10px; }
    .filters { gap: 6px; }
}


/* ---------- Firele salvate din panoul de conversație ---------- */

.chat__who { min-width: 0; }
.chat__who strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat__tools { display: flex; gap: 2px; flex: 0 0 auto; }

.chat__history {
    border-bottom: 1px solid var(--border);
    background: var(--surface-2);
    max-height: 48%;
    overflow-y: auto;
    padding: 8px;
}

.chat__history-empty { margin: 10px 12px; font-size: 13px; color: var(--text-dim); }
.chat__threads { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }

.chat__thread {
    display: flex;
    align-items: center;
    gap: 4px;
    border-radius: var(--r-sm);
}

.chat__thread:hover { background: var(--surface-3); }
.chat__thread.is-active { background: var(--surface-3); }

.chat__thread-open {
    flex: 1 1 auto;
    min-width: 0;
    display: block;
    padding: 9px 10px;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.chat__thread-title {
    display: block;
    font-size: 13.5px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat__thread-open small { display: block; margin-top: 2px; font-size: 11.5px; color: var(--text-faint); }
.chat__thread.is-active .chat__thread-title { color: var(--accent); }

.chat__thread-del {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    font-size: 17px;
    line-height: 1;
    opacity: 0;
}

.chat__thread:hover .chat__thread-del,
.chat__thread-del:focus-visible { opacity: 1; }
.chat__thread-del:hover { color: var(--fail); }

/* Pe telefon nu există „hover": butonul de șters trebuie să se vadă mereu. */
@media (max-width: 700px) {
    .chat__thread-del { opacity: 1; }
    .chat__history { max-height: 60%; }
}