/* Hallmark · shape: app screen · genre: editorial · theme: Hedgerow (sloe, pe alb) · scope: app · redesign: restyle
 * screen: adminul, locul de lucru (sarcini, agenții de sunat, reveniri, ghidul de apel, conturi) · states: gol, eroare, plin
 * #117: fonturile și culorile paginilor publice, dar pe fond alb. Galbenul-pai e accentul: butonul principal, pagina în care ești, ce ai ales.
 * contrast: pass (textul gri 6.1:1, linkurile 9.7:1, marginile câmpurilor 3.7:1) · v2.0.0 */

/* Stilurile adminului. Paginile publice folosesc assets/styles/site/. */

/* Fonturile sunt aceleași cu ale paginilor publice și stau tot pe serverul nostru. */
@import url("site/fonts-F7EdOPu.css");

:root {
    color-scheme: light;
    /* Alb, abia nuanțat spre pai, ca să nu fie albul rece al ecranului. */
    --bg: oklch(99.6% 0.003 85);
    --surface: oklch(99.6% 0.003 85);
    /* Al doilea fond, pentru capetele de tabel și casetele mai puțin importante. */
    --surface-2: oklch(97.5% 0.008 80);
    --ink: oklch(25% 0.06 320);
    --muted: oklch(50% 0.035 330);
    --line: oklch(90% 0.015 320);
    /* Marginea câmpurilor: destul de închisă cât să se vadă (3:1). */
    --line-strong: oklch(62% 0.03 320);
    /* Pruna paginilor publice, pentru linkuri și butoanele obișnuite. */
    --brand: oklch(40% 0.1 320);
    /* Galbenul-pai: butonul principal, pagina în care ești, ce ai ales și textul de spus la telefon. */
    --accent: oklch(88% 0.15 95);
    --accent-hover: oklch(93% 0.1 95);
    --accent-strong: oklch(78% 0.15 85);
    --focus: oklch(40% 0.1 320);
    --danger: oklch(50% 0.17 27);
    --good: oklch(48% 0.11 150);
    --info: oklch(48% 0.12 250);
    --warning: oklch(52% 0.12 60);
    --radius: 0;
    --radius-pill: 999px;
    /* Casetele nu au umbră, doar o linie subțire. */
    --shadow: 0 0 0 1px var(--line);
    --font-display: "DM Serif Display", Georgia, serif;
    --font-body: "Manrope", ui-sans-serif, system-ui, sans-serif;
    --dur-short: 160ms;
}

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

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 1rem;
    /* Pe alb, Manrope la 400 pare subțire. La 500 se citește mai ușor în tabele și formulare. */
    font-weight: 500;
    line-height: 1.5;
}

img {
    display: block;
    max-width: 100%;
    height: auto;
}

a {
    color: var(--brand);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.16em;
}

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

::selection {
    background: color-mix(in oklab, var(--accent) 55%, transparent);
    color: var(--ink);
}

/* Titlurile au litera paginilor publice, pe o scară fixă (1.2). Etichetele, butoanele și cifrele rămân în Manrope. */
h1,
h2 {
    font-family: var(--font-display);
    font-weight: 400;
    font-synthesis: none;
    letter-spacing: -0.005em;
    line-height: 1.15;
    text-wrap: balance;
}

h1 {
    font-size: 2.074rem;
}

h2 {
    font-size: 1.44rem;
}

h3 {
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.25;
}

button,
input,
select,
textarea {
    font: inherit;
}

.container {
    width: min(1180px, 100% - 2rem);
    margin-inline: auto;
}

.hint {
    color: var(--muted);
    font-size: 0.875rem;
}

.lead {
    max-width: 62ch;
    margin: 0 0 1.25rem;
    color: var(--muted);
    font-size: 1.05rem;
}

/* Text doar pentru cititoarele de ecran. */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Antetul: alb, cu o linie dedesubt. */

.site-header {
    background: var(--surface);
    border-bottom: 1px solid var(--line);
}

.site-header__inner {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    align-items: center;
    justify-content: space-between;
    padding-block: 0.75rem;
}

/* Sigla paginilor publice: geamul de bloc aprins și numele, cu punctul ca un pătrat galben. */
.brand {
    display: inline-flex;
    gap: 0.35em;
    align-items: center;
    color: var(--ink);
    font-family: var(--font-display);
    font-size: 1.5rem;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
}

.brand__mark {
    flex: none;
    width: 1.15em;
    height: 1.15em;
}

.brand__lit {
    fill: var(--accent);
}

/* Punctul rămâne în text, pentru copiere și cititoarele de ecran. Pe ecran e un pătrat galben. */
.brand__dot {
    display: inline-block;
    width: 0.19em;
    height: 0.19em;
    margin-inline: 0.05em;
    overflow: hidden;
    background: var(--accent-strong);
    color: transparent;
}

.site-header__tagline {
    margin: 0;
    color: var(--muted);
    font-size: 0.875rem;
    font-weight: 600;
}

.site-nav {
    margin-left: auto;
}

.site-nav a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 0 0.9rem;
    border: 1.5px solid transparent;
    border-radius: var(--radius-pill);
    color: var(--ink);
    font-size: 0.9375rem;
    font-weight: 600;
    text-decoration: none;
    transition: background-color var(--dur-short) ease-out;
}

.site-nav a:hover {
    background: var(--surface-2);
}

/* Pagina în care ești: o pastilă galbenă, cu margine prună. Pe alb, galbenul singur se vede prea slab. */
.site-nav a[aria-current] {
    border-color: var(--ink);
    background: var(--accent);
    font-weight: 700;
}

main.container {
    padding-block: 2rem 3rem;
}

.tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: auto 0 0;
    padding: 0.5rem 0 0;
    list-style: none;
}

.tag {
    padding: 0.15rem 0.55rem;
    border: 1px solid var(--line);
    background: var(--surface-2);
    font-size: 0.78rem;
    font-weight: 600;
}

.tag--danger {
    border-color: color-mix(in oklab, var(--danger) 30%, transparent);
    background: color-mix(in oklab, var(--danger) 8%, transparent);
    color: var(--danger);
}

.tag--warning {
    border-color: color-mix(in oklab, var(--warning) 30%, transparent);
    background: color-mix(in oklab, var(--warning) 8%, transparent);
    color: var(--warning);
}

.tag--good {
    border-color: color-mix(in oklab, var(--good) 30%, transparent);
    background: color-mix(in oklab, var(--good) 8%, transparent);
    color: var(--good);
}

.tag--info {
    border-color: color-mix(in oklab, var(--info) 30%, transparent);
    background: color-mix(in oklab, var(--info) 8%, transparent);
    color: var(--info);
}

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

/* Bucăți folosite pe mai multe pagini ale adminului */

.breadcrumb {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
    color: var(--muted);
    font-size: 0.9rem;
}

.notice {
    margin: 0 0 1.5rem;
    padding: 0.8rem 1rem;
    border-radius: var(--radius);
}

.notice--error {
    border: 1px solid color-mix(in oklab, var(--danger) 30%, transparent);
    background: color-mix(in oklab, var(--danger) 8%, transparent);
}

.panel {
    padding: 1.1rem 1.2rem;
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow);
}

.panel h2 {
    margin: 0 0 0.75rem;
    font-size: 1.1rem;
}

/* Butoanele sunt pastile, ca pe paginile publice. Cel principal e galben, celelalte sunt conturate cu prună. */
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0.4rem 1.1rem;
    border: 1.5px solid var(--brand);
    border-radius: var(--radius-pill);
    background: var(--surface);
    color: var(--brand);
    font: inherit;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--dur-short) ease-out;
}

.button:hover {
    background: color-mix(in oklab, var(--brand) 7%, var(--surface));
}

.button:active {
    transform: translateY(1px);
}

.button--primary {
    border-color: var(--accent-strong);
    background: var(--accent);
    color: var(--ink);
}

.button--primary:hover {
    background: var(--accent-hover);
}

.button:disabled {
    transform: none;
    cursor: not-allowed;
    opacity: 0.55;
}

.answers {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0;
}

/* Pagini de eroare */

.error-page {
    max-width: 40rem;
    padding-block: 3rem;
}

.error-page h1 {
    margin: 0 0 0.5rem;
}

/* Admin */

/* „Admin” stă lângă logo, și pe pagina de intrare, unde nu e butonul „Ieși”. */
.site-header--admin .site-header__tagline {
    margin-right: auto;
}

/* Meniul adminului: o pastilă pentru fiecare pagină. */
.admin-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.admin-logout .button {
    padding: 0.35rem 0.9rem;
    border-radius: 999px;
    font-size: 0.9rem;
}

/* Pe ecrane înguste, „Ieși” stă lângă logo, iar meniul are rândul lui. Altfel, cu trei pastile, „Ieși” rămânea singur pe un rând. */
@media (max-width: 860px) {
    .admin-nav {
        flex-basis: 100%;
        order: 1;
        gap: 0.25rem;
        /* Textul primei pastile stă sub siglă. */
        margin-inline: -0.65rem;
    }

    .admin-nav a {
        padding-inline: 0.65rem;
        font-size: 0.875rem;
    }
}

.login {
    max-width: 24rem;
    margin: 1rem auto;
}

.login h1 {
    margin: 0 0 1rem;
    font-size: 1.4rem;
}

.login form,
.account-link {
    display: grid;
    gap: 0.5rem;
}

.login label,
.account-link label {
    font-size: 0.85rem;
    font-weight: 600;
}

.login input,
.account-link input {
    width: 100%;
    padding: 0.6rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    font: inherit;
}

.login .button {
    margin-top: 0.5rem;
}

/* Sarcinile, agențiile de sunat și conturile, în admin */

.tasks,
.prospects,
.accounts {
    display: grid;
    gap: 1rem;
    margin: 0 0 2rem;
    padding: 0;
    list-style: none;
}

.task__head,
.prospect__head,
.account__head {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
    align-items: center;
    margin-bottom: 0.75rem;
}

.task__head h2,
.prospect__head h2,
.account__head h2 {
    margin: 0;
}

.task .notice {
    margin-bottom: 0.75rem;
}

.task .notice p {
    margin: 0;
}

.task__facts,
.run-facts,
.prospect__facts,
.account__facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: 0.75rem;
    margin: 0 0 1rem;
}

.task__facts dt,
.run-facts dt,
.prospect__facts dt,
.account__facts dt {
    color: var(--muted);
    font-size: 0.8rem;
}

.task__facts dd,
.run-facts dd,
.prospect__facts dd,
.account__facts dd {
    margin: 0;
}

.run-facts {
    margin-bottom: 1.5rem;
}

/* O adresă de email lungă se rupe, ca să încapă pe telefon. */
.prospect__facts dd,
.account__facts dd {
    overflow-wrap: anywhere;
}

/* Linkul nou pentru parolă, cu butonul care îl copiază. */
.account-link {
    margin-bottom: 1rem;
}

.account-link .button {
    justify-self: start;
}

.account-link p {
    margin: 0;
}

.task__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.25rem;
    align-items: center;
}

/* Pe telefon, apeși pe număr și suni. */
.prospect__phones {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0 0 1rem;
}

.prospect__notes {
    max-width: 70ch;
    margin: 0 0 0.75rem;
}

.prospect__last-call {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.5rem;
    align-items: center;
    margin: 0 0 1rem;
    color: var(--muted);
}

.prospect__links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.25rem;
    align-items: center;
    margin: 0;
}

.prospect__head h1 {
    margin: 0;
}

/* La cine e agenția, cu „Iau agenția” și „Las agenția” (ADR 0019). Agențiile tale au o margine în culoarea site-ului. */
.prospect--mine {
    box-shadow: inset 4px 0 0 var(--brand), var(--shadow);
}

.prospect__claim {
    margin: 0 0 1rem;
}

.claim {
    margin: 0 0 1rem;
}

.claim .prospect__claim {
    margin-bottom: 0.75rem;
}

.claim__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.25rem;
    align-items: center;
}

.claim-button {
    margin: 0;
}

.assign-form {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.assign-form label {
    font-size: 0.85rem;
    font-weight: 600;
}

.assign-form select {
    padding: 0.5rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    background: var(--surface);
    font: inherit;
}

.notice--good {
    border: 1px solid color-mix(in oklab, var(--good) 30%, transparent);
    background: color-mix(in oklab, var(--good) 8%, transparent);
}

.notice--warning {
    border: 1px solid color-mix(in oklab, var(--warning) 30%, transparent);
    background: color-mix(in oklab, var(--warning) 8%, transparent);
}

/* Formularul de după apel, pe pagina agenției. */
.call-panel {
    margin-block: 1.5rem;
    scroll-margin-top: 1rem;
}

.call-form {
    display: grid;
    gap: 1rem;
    max-width: 40rem;
}

.call-form__field {
    display: grid;
    gap: 0.35rem;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.call-form label,
.call-form legend {
    padding: 0;
    font-size: 0.85rem;
    font-weight: 600;
}

.call-form input:not([type="radio"], [type="checkbox"]),
.call-form textarea {
    width: 100%;
    padding: 0.6rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    font: inherit;
}

.call-form textarea {
    min-height: 6rem;
    resize: vertical;
}

.call-form .help-text {
    color: var(--muted);
    font-size: 0.85rem;
}

/* Erorile unui câmp. */
.call-form ul {
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--danger);
    font-size: 0.9rem;
    font-weight: 600;
}

.call-form p {
    margin: 0;
}

/* Rezultatele, ca pastile ușor de apăsat pe telefon, fiecare cu rândul ei de explicație. Butonul rotund rămâne pentru tastatură și cititoarele de ecran. */
.outcomes {
    display: grid;
    gap: 0.6rem;
}

.outcome {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.75rem;
    align-items: center;
}

.outcome__hint {
    flex: 1 1 16rem;
    color: var(--muted);
    font-size: 0.85rem;
}

.outcomes input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.call-form .outcomes label {
    padding: 0.5rem 0.9rem;
    border: 1px solid var(--brand);
    border-radius: 999px;
    color: var(--brand);
    font-size: 0.95rem;
    cursor: pointer;
}

.call-form .outcomes input:checked + label {
    border-color: var(--ink);
    box-shadow: inset 0 0 0 1px var(--ink);
    background: var(--accent);
    color: var(--ink);
    font-weight: 700;
}

.outcomes input:focus-visible + label {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
}

.call-form__check {
    display: flex;
    gap: 0.6rem;
    align-items: center;
}

.call-form__check input {
    width: 1.25rem;
    height: 1.25rem;
    margin: 0;
}

.call-form .call-form__check label {
    font-size: 1rem;
    font-weight: 500;
}

/* Ziua apare doar la „sun din nou”, adresa doar după ce bifezi voia la email,
   iar numele CRM-ului doar la „Alt CRM”. */
.call-form:not(:has(.outcomes input[value="call_back"]:checked)) .call-form__call-back,
.call-form:not(:has(#call_emailConsent:checked)) .call-form__email,
.call-form:not(:has(#call_crm option[value="other"]:checked)) .call-form__other-crm {
    display: none;
}

/* „De sunat din nou”: revenirile pe grupe de zile, cu rezumatul pe oameni deasupra.
   Patru coloane scurte încap și pe telefon, deci tabelul rămâne tabel. */
.call-back-summary {
    overflow-x: auto;
    margin-bottom: 1.5rem;
    padding: 0;
}

.call-back-summary table {
    width: 100%;
    border-collapse: collapse;
}

.call-back-summary th,
.call-back-summary td {
    padding: 0.6rem 1rem;
    border-bottom: 1px solid var(--line);
    text-align: left;
}

.call-back-summary th {
    color: var(--muted);
    font-size: 0.8rem;
    font-weight: 600;
}

.call-back-summary tr:last-child > * {
    border-bottom: 0;
}

.call-back-summary th[scope="row"] {
    color: inherit;
    font-size: inherit;
}

@media (max-width: 600px) {
    .call-back-summary th,
    .call-back-summary td {
        padding: 0.5rem 0.6rem;
    }
}

.call-back-summary a[aria-current="page"] {
    font-weight: 700;
}

.call-back-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0 0 1.5rem;
}

.call-back-filter a[aria-current="page"] {
    border-color: var(--ink);
    box-shadow: inset 0 0 0 1px var(--ink);
    background: var(--accent);
    color: var(--ink);
}

.call-back-group h2 {
    margin: 0 0 0.75rem;
}

.call-back-group__count {
    color: var(--muted);
    font-weight: 500;
}

.call-back-group--overdue h2 {
    color: var(--danger);
}

.call-back h3 {
    margin: 0;
    font-size: 1.15rem;
}

.call-back__owner {
    margin: 0 0 0.5rem;
    font-weight: 600;
}

.call-back .call__facts {
    margin: 0 0 1rem;
}

/* Apelurile de până acum, întâi cel mai nou. */
.calls {
    display: grid;
    gap: 0.75rem;
    margin: 0 0 2rem;
    padding: 0;
    list-style: none;
}

.call__head {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.5rem;
    align-items: center;
    font-weight: 650;
}

.call__facts {
    display: grid;
    gap: 0.5rem;
    margin: 0.75rem 0 0;
}

.call__facts dt {
    color: var(--muted);
    font-size: 0.8rem;
}

/* Ce au spus păstrează rândurile scrise în formular. Un link lung se rupe, ca să încapă pe telefon. */
.call__facts dd {
    max-width: 70ch;
    margin: 0;
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.call__consent {
    margin: 0.75rem 0 0;
    color: var(--good);
    font-weight: 600;
}

/* „Pornește acum”, pe pagina unei sarcini. */
.task-start {
    margin: 0 0 1.5rem;
}

.runs {
    overflow-x: auto;
    margin-bottom: 2rem;
    padding: 0;
}

.runs table {
    width: 100%;
    border-collapse: collapse;
}

.runs th,
.runs td {
    padding: 0.6rem 1rem;
    border-bottom: 1px solid var(--line);
    text-align: left;
    white-space: nowrap;
}

.runs th {
    color: var(--muted);
    font-size: 0.8rem;
    font-weight: 600;
}

.runs tr:last-child td {
    border-bottom: 0;
}

/* Pe ecranele înguste nu încap patru coloane. Fiecare rulare devine un bloc: sus ora și starea,
   dedesubt cum a pornit și cât a durat. */
@media (max-width: 860px) {
    .runs table,
    .runs tbody {
        display: block;
    }

    .runs thead {
        display: none;
    }

    .runs tr {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 0.2rem 1rem;
        padding: 0.7rem 1rem;
        border-bottom: 1px solid var(--line);
    }

    .runs tr:last-child {
        border-bottom: 0;
    }

    .runs td {
        padding: 0;
        border-bottom: 0;
        white-space: normal;
    }

    .runs td:nth-child(2),
    .runs td:nth-child(3) {
        color: var(--muted);
        font-size: 0.9rem;
    }

    .runs td:nth-child(3) {
        justify-self: end;
    }

    /* Starea urcă lângă oră. */
    .runs td:last-child {
        grid-row: 1;
        grid-column: 2;
        justify-self: end;
    }
}

/* Tot ce a scris o rulare. Pe ecranele late rupem rândurile lungi, ca să nu fie nevoie de derulat în lateral. */
.run-output {
    margin: 0 0 2rem;
    padding: 1rem;
    border-radius: var(--radius);
    background: var(--ink);
    color: var(--bg);
    font-size: 0.85rem;
    line-height: 1.45;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* Pe ecranele înguste, tabelele scrise de comenzi nu încap. Acolo nu rupem rândurile, ca să rămână
   coloanele aliniate, iar textul se derulează în lateral. */
@media (max-width: 860px) {
    .run-output {
        white-space: pre;
        overflow-wrap: normal;
        overflow-x: auto;
    }
}

/* Ghidul de apel: casetele de sus, textul de spus la telefon și textul pentru AI. */
.guide-boxes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.guide-box {
    padding: 1rem 1.2rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
}

.guide-box--warning {
    border-color: color-mix(in oklab, var(--warning) 35%, transparent);
    background: color-mix(in oklab, var(--warning) 6%, transparent);
}

.guide-box h2 {
    margin: 0 0 0.5rem;
    font-size: 1.1rem;
}

.guide-box ul {
    display: grid;
    gap: 0.4rem;
    margin: 0;
    padding-left: 1.2rem;
}

.figures {
    display: grid;
    gap: 0.75rem;
    margin: 0;
}

.figures dt {
    color: var(--muted);
    font-size: 0.8rem;
}

.figures dd {
    margin: 0;
    font-weight: 600;
}

.guide {
    max-width: 48rem;
    margin-bottom: 2rem;
}

.guide section {
    margin-bottom: 1.75rem;
}

.guide li + li,
.steps > li + li {
    margin-top: 0.5rem;
}

/* Ce spune omul de vânzări, cuvânt cu cuvânt. */
.say {
    margin: 0.5rem 0;
    padding: 0.6rem 0.9rem;
    border: 1px solid var(--accent-strong);
    background: color-mix(in oklab, var(--accent) 18%, var(--surface));
}

.answers {
    display: grid;
    gap: 0.75rem;
    margin: 0;
}

.answers dt {
    font-weight: 650;
}

.answers dd {
    margin: 0.15rem 0 0;
}

.practice-text {
    width: 100%;
    min-height: 14rem;
    padding: 0.75rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    font: inherit;
    font-size: 0.9rem;
    resize: vertical;
}

/* Ghidul scurt de pe pagina agenției. Se strânge cu o apăsare pe titlu. */
.short-guide,
.import-checklist {
    margin-block: 1.5rem;
}

.short-guide summary,
.whatsapp-panel summary,
.email-panel summary {
    font-size: 1.1rem;
    font-weight: 650;
    cursor: pointer;
}

.short-guide h3 {
    margin: 1rem 0 0.4rem;
    font-size: 0.95rem;
}

.short-guide ul {
    margin: 0;
    padding-left: 1.2rem;
}

.short-guide__facts {
    display: grid;
    gap: 0.5rem;
    margin: 0.5rem 0 0;
}

.short-guide__facts dt {
    color: var(--muted);
    font-size: 0.8rem;
}

.short-guide__facts dd {
    margin: 0;
    white-space: pre-line;
    overflow-wrap: anywhere;
}

/* Ce mai trebuie pentru import. Doar voia la email se bifează singură. */
.checklist {
    display: grid;
    gap: 0.5rem;
    margin: 0 0 0.75rem;
    padding: 0;
    list-style: none;
}

.checklist li {
    position: relative;
    padding-left: 1.9rem;
}

.checklist li::before {
    content: "";
    position: absolute;
    top: 0.1rem;
    left: 0;
    width: 1.2rem;
    height: 1.2rem;
    border: 2px solid var(--muted);
    border-radius: 4px;
}

.checklist .checklist__done::before {
    content: "✓";
    border-color: var(--good);
    background: var(--good);
    color: var(--surface);
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1;
    text-align: center;
}

/* Căsuța „Trimite email” și emailurile trimise, pe pagina agenției (ADR 0020). */
.email-panel {
    margin-block: 1.5rem;
}

.email-drafts,
.whatsapp-drafts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.email-drafts .button[aria-current],
.whatsapp-drafts .button[aria-current] {
    background: rgb(31 111 92 / 10%);
    box-shadow: inset 0 0 0 1px var(--brand);
}

.email-form textarea {
    min-height: 18rem;
}

/* „De la” se vede, dar nu se schimbă. */
.email-form input[readonly] {
    background: var(--surface-2);
    color: var(--muted);
}

.email-stop {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
    align-items: center;
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--line);
}

.email__subject {
    margin: 0.75rem 0 0;
    font-weight: 650;
}

/* Textul emailului păstrează rândurile. Un link lung se rupe, ca să încapă pe telefon. */
.email__body {
    max-width: 70ch;
    margin: 0.5rem 0 0;
    white-space: pre-line;
    overflow-wrap: anywhere;
}

/* Mesajele gata scrise pentru WhatsApp, pe pagina agenției (ADR 0029). */
.whatsapp-panel {
    margin-block: 1.5rem;
}

.whatsapp-message + .whatsapp-message {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--line);
}

.whatsapp-message h3 {
    margin: 0;
    font-size: 1rem;
}

/* Mesajul se poate schimba înainte de trimitere, ca emailul. */
.whatsapp-message__text {
    display: block;
    width: 100%;
    max-width: 70ch;
    min-height: 14rem;
    margin-top: 0.5rem;
    padding: 0.6rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    resize: vertical;
}

/* Butonul e scurt. Pe un singur rând, numărul nu se rupe pe telefon. */
.whatsapp-message__actions .button {
    white-space: nowrap;
}

.whatsapp-message__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0.75rem 0 0;
}

.account__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

/*
 * #115: vederea omului de vânzări (ADR 0027). Fundalul paginii devine pai, iar cardurile rămân albe,
 * ca să se vadă de la prima privire că nu ești în contul tău.
 */
.view-as {
    --bg: oklch(92% 0.08 95);
}

.view-as-banner {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.5rem 1rem;
    margin: 0;
    padding: 0.6rem 1rem;
    background: var(--brand);
    color: oklch(99% 0.01 95);
    text-align: center;
}

/* Previzualizarea emailului către agenție, înainte de „Trimite acum” (ADR 0028). */
.email-preview {
    display: grid;
    gap: 0.25rem;
    margin: 0.75rem 0 0;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--line);
}

.email-preview div {
    display: flex;
    flex-wrap: wrap;
    gap: 0 0.5rem;
}

.email-preview dt {
    min-width: 6rem;
    color: var(--muted);
}

.email-preview dd {
    margin: 0;
    overflow-wrap: anywhere;
}

.email-preview .email__subject {
    margin: 0;
}

.email-preview__body {
    margin-block: 1rem;
}

.email-preview__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* „Vizite”: trei căsuțe cu cifre (azi, 7 zile, 30 de zile), apoi tabelul pe zile și cel cu pagini.
   Trei coloane scurte încap și pe telefon, deci tabelele rămân tabele. */
.visit-totals {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: 1rem;
    margin: 0 0 0.5rem;
    padding: 0;
    list-style: none;
}

.visit-totals h2 {
    margin: 0 0 0.75rem;
    font-size: 1.1rem;
}

.visit-totals dl {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    margin: 0;
}

.visit-totals dt {
    color: var(--muted);
    font-size: 0.8rem;
}

.visit-totals dd {
    margin: 0;
    font-size: 1.8rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.visit-note {
    margin: 0 0 2rem;
    color: var(--muted);
    font-size: 0.9rem;
}

.visit-table {
    overflow-x: auto;
    margin-bottom: 2rem;
    padding: 0;
}

.visit-table table {
    width: 100%;
    border-collapse: collapse;
}

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

.visit-table td {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.visit-table thead th {
    color: var(--muted);
    font-size: 0.8rem;
    font-weight: 600;
}

.visit-table thead th:not(:first-child) {
    text-align: right;
}

.visit-table tbody th {
    font-weight: 400;
}

.visit-table tr:last-child > * {
    border-bottom: 0;
}

.visit-table__path {
    overflow-wrap: anywhere;
}

/* Graficul pe zile: o coloană pe zi, cea mai veche în stânga. Bara deschisă e cu paginile văzute,
   bara închisă din ea e cu vizitatorii (sunt mereu cel mult cât paginile). Cifrele exacte sunt în tabel
   și în titlul fiecărei coloane, la hover. Mov din culoarea site-ului, verificat și pentru daltoniști. */
.visit-chart {
    --chart-views: oklch(75% 0.11 320);
    --chart-visitors: oklch(46% 0.13 320);
    margin: 0 0 1rem;
}

.visit-chart__legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.25rem;
    margin-bottom: 1rem;
    color: var(--muted);
    font-size: 0.85rem;
}

.visit-chart__key {
    display: inline-block;
    width: 0.75rem;
    height: 0.75rem;
    margin-right: 0.4rem;
    border-radius: 2px;
    vertical-align: -0.05rem;
}

.visit-chart__key--views {
    background: var(--chart-views);
}

.visit-chart__key--visitors {
    background: var(--chart-visitors);
}

.visit-chart__plot {
    position: relative;
    padding-left: 2.5rem;
}

.visit-chart__tick {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 2rem;
    color: var(--muted);
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    text-align: right;
    transform: translateY(50%);
}

.visit-chart__tick--top {
    top: 0;
    bottom: auto;
    transform: translateY(-50%);
}

.visit-chart__bars {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 12rem;
    margin: 0;
    padding: 0;
    border-bottom: 1px solid var(--line-strong);
    background: linear-gradient(var(--line), var(--line)) 0 0 / 100% 1px no-repeat,
        linear-gradient(var(--line), var(--line)) 0 50% / 100% 1px no-repeat;
    list-style: none;
}

.visit-chart__bars li {
    position: relative;
    flex: 1;
    height: 100%;
}

.visit-chart__bars li:hover {
    background: var(--surface-2);
}

.visit-chart__bar {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: 4px 4px 0 0;
}

.visit-chart__bar--views {
    height: var(--views);
    background: var(--chart-views);
}

.visit-chart__bar--visitors {
    height: var(--visitors);
    background: var(--chart-visitors);
}

.visit-chart__axis {
    display: flex;
    justify-content: space-between;
    margin: 0.4rem 0 0 2.5rem;
    color: var(--muted);
    font-size: 0.75rem;
}

@media (max-width: 600px) {
    .visit-table th,
    .visit-table td {
        padding: 0.45rem 0.6rem;
    }
}

/* Titlul listei, cu „Adaugă o agenție” lângă el (#49). Pe telefon, butonul trece sub titlu. */
.page-head {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.5rem;
    align-items: center;
    justify-content: space-between;
}

.page-head h1 {
    margin-bottom: 0;
}

/* Formularul agenției de sunat și ștergerea ei (#49). */
.prospect-form {
    max-width: 40rem;
}

/* Agențiile cu nume asemănător, sub „Numele” unei agenții noi (#49). */
[data-controller="similar-prospects"] {
    display: grid;
    gap: 0.5rem;
}

.prospect-similar {
    padding: 0.6rem 0.8rem;
    border: 1px solid color-mix(in oklab, var(--warning) 30%, transparent);
    border-radius: var(--radius);
    background: color-mix(in oklab, var(--warning) 8%, transparent);
    font-size: 0.9rem;
}

.call-form .prospect-similar ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
    margin-top: 0.25rem;
    color: inherit;
    font-weight: 400;
}

.prospect-delete {
    margin-block: 1.5rem;
}

.prospect-delete h2 {
    margin-top: 0;
}