/* ===================================================
   Atelier Auto — stil general
   Design simplu, curat, optimizat pentru desktop.
   =================================================== */

:root {
    --culoare-fundal: #d3e1f0;
    --culoare-panou: rgba(252, 253, 255, 0.9);
    --culoare-panou-adanc: rgba(238, 244, 251, 0.92);
    --culoare-text: #16202e;
    --culoare-text-secundar: #4c5a6d;
    --culoare-bordura: #c4d2e2;
    --culoare-bordura-fina: rgba(150, 173, 200, 0.35);

    --umbra-panou: 0 10px 30px rgba(28, 45, 70, 0.09), 0 1px 2px rgba(28, 45, 70, 0.06);
    --umbra-panou-ridicat: 0 18px 44px rgba(28, 45, 70, 0.15), 0 2px 4px rgba(28, 45, 70, 0.07);
    --tranzitie: 220ms cubic-bezier(.4, 0, .2, 1);

    --culoare-primara: #2f6fed;
    --culoare-primara-hover: #2558c4;

    --culoare-meniu-fundal: #1c2333;
    --culoare-meniu-text: #c7cbd6;
    --culoare-meniu-text-activ: #ffffff;
    --culoare-meniu-activ-fundal: #2f6fed;

    --raza-colt: 8px;
    --spatiere: 20px;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: "Segoe UI", Arial, sans-serif;
    background: #dce8f3;
    background-attachment: fixed;
    color: var(--culoare-text);
    font-size: 15px;
}

a {
    text-decoration: none;
    color: inherit;
}

.mesaj { padding: 12px 16px; border-radius: 8px; margin-bottom: 16px; }
.mesaj-succes { background: #dcfce7; color: #166534; }
.mesaj-eroare { background: #fee2e2; color: #991b1b; }
.actiuni-antet, .formular-inline { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.grila-formular { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; max-width: 900px; }
.camp-formular textarea { min-height: 80px; resize: vertical; }
.buton-link { border: 0; background: transparent; cursor: pointer; }
.pericol { color: #b91c1c; }
.buton-pericol { border: 0; border-radius: 6px; padding: 10px 14px; color: white; background: #b91c1c; cursor: pointer; }
.zona-pericol { border: 1px solid #fecaca; }
.lista-fisiere { margin: 16px 0 0; padding-left: 20px; }
.antet-pagina { display: flex; justify-content: space-between; align-items: center; }
.pagina-login { display: grid; min-height: 100vh; place-items: center; padding: 20px; }
.card-login { width: min(420px, 100%); background: rgba(248, 251, 255, .84); border: 1px solid var(--culoare-bordura); border-radius: 12px; padding: 28px; box-shadow: 0 12px 35px rgba(0,0,0,.08); backdrop-filter: blur(10px); }
.actiuni-deviz { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.badge-status { display: inline-block; padding: 4px 8px; border-radius: 999px; background: #eef2ff; color: #3730a3; font-size: 12px; text-transform: capitalize; }

/* ---------- Layout general ---------- */

.layout {
    display: flex;
    min-height: 100vh;
}

/* ---------- Meniu lateral ---------- */

.meniu-lateral {
    width: 230px;
    height: 100vh;
    position: sticky;
    top: 0;
    overflow: hidden;
    flex-shrink: 0;
    background:
        linear-gradient(180deg, #1d2634 0%, #202a39 48%, #18202c 100%);
    color: var(--culoare-meniu-text);
    display: flex;
    flex-direction: column;
    padding: var(--spatiere) 0;
}

.logo-atelier {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 var(--spatiere) var(--spatiere) var(--spatiere);
    font-weight: 600;
    font-size: 16px;
    color: var(--culoare-meniu-text-activ);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    margin-bottom: 10px;
}

.logo-icon {
    font-size: 20px;
}

.meniu-nav {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(148, 163, 184, .35) transparent;
}

.meniu-nav a {
    padding: 12px var(--spatiere);
    font-size: 14px;
    color: var(--culoare-meniu-text);
    border-left: 3px solid transparent;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.meniu-nav a:hover {
    background-color: rgba(255, 255, 255, 0.05);
    color: var(--culoare-meniu-text-activ);
}

.meniu-nav a.activ {
    background-color: var(--culoare-meniu-activ-fundal);
    color: var(--culoare-meniu-text-activ);
    border-left-color: #ffffff;
}
.meniu-sectiune { padding: 18px 20px 6px; color: #778196; font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.bara-context { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 16px; }
.taburi-context { display: flex; gap: 6px; flex-wrap: wrap; }
.tab-context { padding: 9px 13px; border: 1px solid var(--culoare-bordura); border-radius: 7px; background: rgba(248, 251, 255, .78); color: var(--culoare-text-secundar); backdrop-filter: blur(8px); }
.tab-context.activ { background: #eef2ff; border-color: #a5b4fc; color: #3730a3; font-weight: 600; }
.rand-clickabil:hover { background: #f8fafc; }
.fir-navigare { display: flex; align-items: center; gap: 8px; color: var(--culoare-text-secundar); flex-wrap: wrap; }
.fir-navigare a:hover { color: var(--culoare-primara); }
.buton-status { border: 0; border-radius: 6px; padding: 7px 10px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.buton-status.gata { color: #166534; background: #dcfce7; }
.buton-status.gata:hover { background: #bbf7d0; }
.buton-status.neutru { color: #374151; background: #e5e7eb; }
.actiuni-deviz form { margin: 0; }
.inchide-portabil { margin-top: auto; padding: 18px 20px 0; }
.inchide-portabil button { width: 100%; border: 1px solid rgba(255,255,255,.15); color: #c7cbd6; background: transparent; border-radius: 6px; padding: 9px; cursor: pointer; }
.inchide-portabil button:hover { color: white; background: rgba(255,255,255,.08); }

.utilizator-curent {
    margin-top: auto;
    flex-shrink: 0;
    padding: 16px 16px 4px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 10px;
    border-top: 1px solid rgba(255, 255, 255, .08);
}

.utilizator-curent-avatar {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    color: #dbeafe;
    background: rgba(59, 130, 246, .24);
    font-weight: 800;
}

.utilizator-curent-date {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.utilizator-curent strong {
    overflow: hidden;
    color: #f8fafc;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.utilizator-curent small {
    margin-top: 2px;
    color: #8792a7;
    font-size: 10px;
}

.utilizator-curent form {
    margin: 0;
}

.utilizator-curent button {
    padding: 5px 7px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 6px;
    color: #cbd5e1;
    background: rgba(255, 255, 255, .04);
    font-family: inherit;
    font-size: 10px;
    cursor: pointer;
}

.utilizator-curent button:hover {
    color: white;
}

.cont-panou {
    max-width: 620px;
}

.cont-identitate {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 26px;
    padding-bottom: 22px;
    border-bottom: 1px solid var(--culoare-bordura);
}

.cont-avatar {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 15px;
    color: #1d5fc4;
    background: rgba(96, 165, 250, .2);
    font-size: 20px;
    font-weight: 800;
}

.cont-identitate h2,
.cont-identitate p {
    margin: 0;
}

.cont-identitate p {
    margin-top: 4px;
}

/* ---------- Zona principală ---------- */

.continut-principal {
    flex: 1;
    padding: var(--spatiere) 32px;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: linear-gradient(135deg, #d9eafa 0%, #cbdff2 46%, #e4dcf1 100%);
    min-height: 100vh;
}

.continut-principal::before,
.continut-principal::after {
    content: "";
    position: fixed;
    pointer-events: none;
    border-radius: 50%;
    filter: blur(18px);
    z-index: -1;
    will-change: transform;
}

.continut-principal::before {
    width: 58vw;
    height: 58vw;
    min-width: 620px;
    min-height: 620px;
    top: -28vw;
    right: -12vw;
    background: radial-gradient(circle, rgba(42, 135, 233, 0.62) 0%, rgba(72, 167, 230, 0.31) 42%, transparent 70%);
    animation: fundalPlutesteUnu 24s ease-in-out infinite alternate;
}

.continut-principal::after {
    width: 52vw;
    height: 52vw;
    min-width: 560px;
    min-height: 560px;
    bottom: -28vw;
    left: 8vw;
    background: radial-gradient(circle, rgba(139, 92, 202, 0.34) 0%, rgba(48, 143, 218, 0.25) 45%, transparent 72%);
    animation: fundalPlutesteDoi 30s ease-in-out infinite alternate;
}

.continut-principal > * {
    position: relative;
    z-index: 1;
}

@keyframes fundalPlutesteUnu {
    0% { transform: translate3d(0, 0, 0) scale(1); }
    50% { transform: translate3d(-7vw, 12vh, 0) scale(1.08); }
    100% { transform: translate3d(-2vw, 24vh, 0) scale(.96); }
}

@keyframes fundalPlutesteDoi {
    0% { transform: translate3d(0, 0, 0) scale(.96); }
    50% { transform: translate3d(10vw, -10vh, 0) scale(1.08); }
    100% { transform: translate3d(3vw, -22vh, 0) scale(1); }
}

.antet-pagina {
    margin-bottom: var(--spatiere);
}

.antet-pagina h1 {
    font-size: 22px;
    font-weight: 600;
    margin: 0;
}

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

.carduri-info {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.card-info {
    background-color: var(--culoare-panou);
    border: 1px solid var(--culoare-bordura);
    border-radius: var(--raza-colt);
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    box-shadow: 0 8px 24px rgba(42, 52, 64, 0.045);
    backdrop-filter: blur(8px);
}

.card-valoare {
    font-size: 28px;
    font-weight: 700;
    color: var(--culoare-primara);
}

.card-eticheta {
    font-size: 13px;
    color: var(--culoare-text-secundar);
}

/* ---------- Panouri și grupuri de secțiuni ---------- */

.grup-sectiuni {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}

.panou {
    background-color: var(--culoare-panou);
    border: 1px solid var(--culoare-bordura);
    border-radius: var(--raza-colt);
    padding: 18px;
    box-shadow: 0 9px 28px rgba(42, 52, 64, 0.05);
    backdrop-filter: blur(8px);
}

.panou h2 {
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 12px 0;
}

.panou-placeholder {
    color: var(--culoare-text-secundar);
    text-align: center;
    padding: 60px 20px;
}

/* ---------- Tabele ---------- */

.tabel-simplu {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.tabel-simplu th {
    text-align: left;
    color: var(--culoare-text-secundar);
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    padding: 8px 6px;
    border-bottom: 1px solid var(--culoare-bordura);
}

.tabel-simplu td {
    padding: 10px 6px;
    border-bottom: 1px solid var(--culoare-bordura);
}

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

.buton-principal,
.buton-secundar {
    font-size: 14px;
    padding: 10px 16px;
    border-radius: var(--raza-colt);
    border: 1px solid var(--culoare-bordura);
    cursor: pointer;
    font-family: inherit;
}

.buton-principal {
    background-color: var(--culoare-primara);
    color: #fff;
    border-color: var(--culoare-primara);
}

.buton-principal:hover {
    background-color: var(--culoare-primara-hover);
}

.buton-principal:disabled {
    background-color: #a9bce8;
    border-color: #a9bce8;
    cursor: not-allowed;
}

.buton-secundar {
    background-color: var(--culoare-panou);
    color: var(--culoare-text);
}

.buton-secundar:hover {
    background-color: var(--culoare-fundal);
}

.actiuni-rapide {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.dashboard-remindere {
    margin-bottom: 24px;
}

.sectiune-actiuni-rapide h2 {
    margin: 0 0 12px;
    font-size: 16px;
}

.actiune-rapida-card {
    min-height: 168px;
    padding: 24px 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: center;
    background: rgba(248, 251, 255, .78);
    border: 1px solid rgba(137, 166, 197, .48);
    border-radius: 12px;
    box-shadow: 0 12px 30px rgba(37, 88, 140, .08);
    backdrop-filter: blur(10px);
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.actiune-rapida-card:hover {
    transform: translateY(-4px);
    border-color: rgba(47, 111, 237, .62);
    background: rgba(252, 254, 255, .9);
    box-shadow: 0 18px 36px rgba(37, 88, 140, .15);
}

.actiune-rapida-icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    margin-bottom: 3px;
    border-radius: 12px;
    color: #1d5fc4;
    background: rgba(96, 165, 250, .18);
    font-size: 24px;
}

.actiune-rapida-titlu {
    font-size: 15px;
    font-weight: 700;
}

.actiune-rapida-descriere {
    max-width: 220px;
    color: var(--culoare-text-secundar);
    font-size: 12px;
    line-height: 1.45;
}

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

.formular-simplu {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 420px;
    margin-top: 14px;
}

.camp-formular {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.camp-formular label {
    font-size: 13px;
    color: var(--culoare-text-secundar);
}

.camp-formular input {
    padding: 9px 10px;
    border: 1px solid var(--culoare-bordura);
    border-radius: var(--raza-colt);
    font-size: 14px;
    font-family: inherit;
}

.text-secundar {
    color: var(--culoare-text-secundar);
    font-size: 13px;
    margin: 0 0 6px 0;
}

.optiune-extinsa,
.optiune-pret-achizitie {
    display: grid;
    gap: 12px;
    padding: 14px;
    border: 1px solid rgba(137, 166, 197, .48);
    border-radius: 10px;
    background: rgba(248, 251, 255, .62);
}

.optiune-pret-achizitie {
    grid-template-columns: minmax(260px, 1fr) minmax(180px, .55fr);
    align-items: end;
}

.rand-optiune {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    cursor: pointer;
}

.rand-optiune input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 2px 0 0;
    accent-color: var(--culoare-primara);
}

.rand-optiune span {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.rand-optiune strong {
    font-size: 13px;
}

.rand-optiune small {
    color: var(--culoare-text-secundar);
    font-size: 12px;
    line-height: 1.4;
}

.zona-conditionata[hidden] {
    display: none;
}

.camp-pret-achizitie {
    min-width: 0;
}

.selector-client-cautabil {
    position: relative;
}

.selector-client-cautabil > input[type="search"] {
    width: 100%;
}

.rezultate-client {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 30;
    max-height: 310px;
    overflow-y: auto;
    padding: 6px;
    border: 1px solid rgba(111, 145, 181, .55);
    border-radius: 10px;
    background: rgba(249, 252, 255, .98);
    box-shadow: 0 18px 40px rgba(25, 61, 98, .18);
    backdrop-filter: blur(12px);
}

.rezultat-client {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 11px;
    border: 0;
    border-radius: 7px;
    color: var(--culoare-text);
    background: transparent;
    text-align: left;
    font-family: inherit;
    cursor: pointer;
}

.rezultat-client:hover,
.rezultat-client:focus-visible {
    outline: none;
    background: rgba(96, 165, 250, .16);
}

.rezultat-client strong {
    font-size: 13px;
}

.rezultat-client span {
    color: var(--culoare-text-secundar);
    font-size: 11px;
}

.client-fara-rezultate {
    margin: 0;
    padding: 12px;
    color: var(--culoare-text-secundar);
    font-size: 12px;
}

.client-selectat {
    margin: 7px 0 0;
    color: #166534;
    font-size: 12px;
    font-weight: 600;
}

/* ---------- Alegere client nou / existent ---------- */

.alegere-clienti {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    max-width: 720px;
    margin: 20px auto 0 auto;
}

.card-alegere {
    background-color: var(--culoare-panou);
    border: 1px solid var(--culoare-bordura);
    border-radius: var(--raza-colt);
    padding: 36px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    transition: border-color 0.15s ease, transform 0.1s ease;
}

.card-alegere:hover {
    border-color: var(--culoare-primara);
    transform: translateY(-2px);
}

.card-alegere-icon {
    font-size: 36px;
}

.card-alegere-titlu {
    font-size: 17px;
    font-weight: 600;
}

.card-alegere-descriere {
    font-size: 13px;
    color: var(--culoare-text-secundar);
}

/* ---------- Comutator tip client (fizică / juridică) ---------- */

.comutator-tip-client {
    display: flex;
    gap: 8px;
    margin: 14px 0 18px 0;
}

.buton-tip-client {
    font-family: inherit;
    font-size: 14px;
    padding: 9px 16px;
    border-radius: var(--raza-colt);
    border: 1px solid var(--culoare-bordura);
    background-color: var(--culoare-panou);
    color: var(--culoare-text);
    cursor: pointer;
}

.buton-tip-client.activ {
    background-color: var(--culoare-primara);
    border-color: var(--culoare-primara);
    color: #fff;
}

.separator-formular {
    margin: 6px 0 4px 0;
    padding-top: 10px;
    border-top: 1px solid var(--culoare-bordura);
    font-size: 13px;
    font-weight: 600;
    color: var(--culoare-text-secundar);
}

/* ---------- Câmp de căutare ---------- */

.camp-cautare {
    display: flex;
    gap: 10px;
    max-width: 560px;
    margin-top: 14px;
}

.camp-cautare input {
    flex: 1;
    padding: 9px 10px;
    border: 1px solid var(--culoare-bordura);
    border-radius: var(--raza-colt);
    font-size: 14px;
    font-family: inherit;
}

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

@media (max-width: 900px) {
    .login-shell {
        grid-template-columns: 1fr;
    }

    .login-intro {
        min-height: 280px;
        padding: 34px;
    }

    .login-logo {
        margin-bottom: 54px;
    }

    .carduri-info {
        grid-template-columns: repeat(2, 1fr);
    }

    .grup-sectiuni {
        grid-template-columns: 1fr;
    }

    .actiuni-rapide {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.vpf-logo {
    display: inline-grid;
    place-items: center;
    width: 58px;
    height: 58px;
    border-radius: 18px;
    color: #fff;
    background: linear-gradient(135deg, #0f172a, #2563eb 65%, #38bdf8);
    box-shadow: 0 12px 30px rgba(37, 99, 235, .28);
    font-size: 16px;
    font-weight: 900;
    letter-spacing: .08em;
}
.vpf-logo-mic { width: 38px; height: 38px; border-radius: 12px; font-size: 11px; flex: 0 0 auto; }
.logo-text { display: flex; flex-direction: column; gap: 2px; }
.logo-text small { color: rgba(255,255,255,.58); font-size: 8px; font-weight: 600; letter-spacing: .04em; }
.login-vpf-logo { margin-bottom: 18px; }
.created-by { margin-top: 24px; color: #5d7188; font-size: 12px; letter-spacing: .03em; }
.created-by strong { color: #2563eb; }
.login-licenta { display: inline-block; margin-top: 6px; color: #2563eb; font-weight: 700; }
.login-licenta.activa { color: #15803d; }
.login-licenta.expirata { color: #b91c1c; }
.trial-banner {
    display: block;
    margin-bottom: 14px;
    padding: 10px 14px;
    border: 1px solid #bfdbfe;
    border-radius: 12px;
    color: #1d4ed8;
    background: rgba(239, 246, 255, .92);
    font-size: 12px;
    font-weight: 750;
    text-decoration: none;
}
.trial-banner.expirat { border-color: #fecaca; color: #b91c1c; background: #fff1f2; }
.card-licenta { max-width: 720px; padding: 26px; }
.licenta-brand { display: flex; align-items: center; gap: 14px; margin-bottom: 24px; }
.licenta-brand div { display: flex; flex-direction: column; }
.licenta-brand strong { font-size: 22px; }
.licenta-brand small { color: var(--culoare-text-secundar); }
.licenta-stare { display: flex; flex-direction: column; gap: 5px; margin-bottom: 22px; padding: 16px; border-radius: 12px; }
.licenta-stare strong { font-size: 17px; }
.licenta-activa { color: #166534; background: #f0fdf4; border: 1px solid #bbf7d0; }
.licenta-trial { color: #1d4ed8; background: #eff6ff; border: 1px solid #bfdbfe; }
.licenta-expirata { color: #991b1b; background: #fff1f2; border: 1px solid #fecaca; }
.cod-dispozitiv { display: flex; flex-direction: column; gap: 7px; margin-bottom: 22px; }
.cod-dispozitiv label, .formular-licenta label { font-weight: 750; }
.cod-dispozitiv code { width: fit-content; padding: 10px 13px; border-radius: 9px; background: #eef2f7; font-size: 16px; letter-spacing: .08em; }
.cod-dispozitiv small { color: var(--culoare-text-secundar); }
.formular-licenta { display: grid; gap: 10px; }
.formular-licenta input { padding: 13px; border: 1px solid var(--culoare-bordura); border-radius: 10px; font: inherit; text-transform: uppercase; }

@media (max-width: 640px) {
    .asistent-buton {
        right: 14px;
        bottom: 14px;
    }

    .asistent-panou {
        inset: 10px;
        width: auto;
        height: auto;
        border-radius: 16px;
    }

    .pagina-login {
        padding: 14px;
    }

    .pagina-login .card-login,
    .login-intro {
        padding: 26px 22px;
    }

    .layout {
        flex-direction: column;
    }

    .meniu-lateral {
        width: 100%;
        height: auto;
        position: relative;
        overflow: visible;
    }

    .meniu-nav {
        overflow: visible;
    }

    .carduri-info {
        grid-template-columns: 1fr;
    }

    .actiuni-rapide {
        grid-template-columns: 1fr;
    }

    .optiune-pret-achizitie {
        grid-template-columns: 1fr;
    }
}

/* ---------- Finisaje versiune completă ---------- */

select, textarea, input {
    font-family: inherit;
}

select, textarea,
.formular-simplu input,
.formular-inline input {
    padding: 9px 10px;
    border: 1px solid var(--culoare-bordura);
    border-radius: var(--raza-colt);
    background: rgba(250, 251, 252, 0.9);
    color: var(--culoare-text);
}

.formular-lat { max-width: none; }
.grila-piese { grid-template-columns: repeat(auto-fit, minmax(135px, 1fr)); max-width: none; }
.separator-sus { border-top: 1px solid var(--culoare-bordura); padding-top: 16px; }
.tabel-scroll { overflow-x: auto; }
.numar-document { font-weight: 700; color: #334155; letter-spacing: .04em; }
.antet-supra { margin: 0 0 4px; color: #94a3b8; font-size: 10px; font-weight: 700; letter-spacing: .14em; }
.antet-data { color: var(--culoare-text-secundar); font-size: 13px; text-transform: capitalize; }
.versiune-produs { margin-top: 0; padding: 10px 20px 0; color: #86efac; font-size: 11px; font-weight: 600; }
.versiune-produs + .inchide-portabil { margin-top: 0; }

.antet-lucrare, .stare-lucrare, .finalizat-rezumat,
.finalizat-rezumat > div { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.stare-lucrare { justify-content: flex-end; }
.badge-plata { display: inline-block; padding: 4px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.plata-achitat { background: #dcfce7; color: #166534; }
.plata-partial { background: #fef3c7; color: #92400e; }
.plata-neachitat { background: #fee2e2; color: #991b1b; }
.status-finalizat, .status-predat, .status-achitat, .status-montata { background: #dcfce7; color: #166534; }
.status-terminat { background: #cffafe; color: #0e7490; font-weight: 600; }
.status-asteapta_piese, .status-comandata, .status-pe_drum { background: #fff7ed; color: #9a3412; }
.status-returnata, .status-anulata { background: #f1f5f9; color: #475569; }
.select-status { min-width: 125px; padding: 6px 8px; }
code { background: #f1f5f9; border-radius: 5px; padding: 3px 6px; color: #334155; }

.totaluri-lucrare { display: grid; grid-template-columns: repeat(3, 1fr); padding: 0; overflow: hidden; }
.totaluri-lucrare > div { display: flex; flex-direction: column; gap: 5px; padding: 18px 22px; border-right: 1px solid var(--culoare-bordura); }
.totaluri-lucrare > div:last-child { border: 0; }
.totaluri-lucrare span { color: var(--culoare-text-secundar); font-size: 12px; text-transform: uppercase; }
.totaluri-lucrare strong { font-size: 18px; }
.totaluri-lucrare .total-general { background: #eff6ff; }
.totaluri-lucrare .total-general strong { color: var(--culoare-primara); font-size: 22px; }

.finalizare-card { border-color: #bfdbfe; background: linear-gradient(135deg, #fff, #f5f9ff); }
.finalizare-card { background: linear-gradient(135deg, rgba(248,250,251,.96), rgba(233,240,247,.96)); }
.formular-finalizare { display: grid; grid-template-columns: repeat(4, minmax(130px, 1fr)) auto; gap: 12px; align-items: end; }
.buton-finalizare { border: 0; border-radius: 8px; padding: 11px 18px; color: white; background: #166534; font-weight: 700; cursor: pointer; white-space: nowrap; }
.buton-finalizare:hover { background: #14532d; }
.semn-finalizat { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: #dcfce7; color: #166534; font-size: 20px; font-weight: 800; }

.carduri-mecanici { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; margin-bottom: 16px; }
.card-mecanic { display: grid; grid-template-columns: auto 1fr; gap: 12px 14px; align-items: center; background: rgba(248,250,251,.92); border: 1px solid var(--culoare-bordura); border-radius: 10px; padding: 18px; box-shadow: 0 9px 28px rgba(42,52,64,.05); }
.card-mecanic.inactiv { opacity: .55; }
.avatar-mecanic { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 10px; color: white; background: var(--culoare-primara); font-weight: 800; }
.card-mecanic h3, .card-mecanic p { margin: 0; }
.card-mecanic p { margin-top: 4px; color: var(--culoare-text-secundar); font-size: 12px; }
.cifre-mecanic { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; border-top: 1px solid var(--culoare-bordura); padding-top: 12px; }
.cifre-mecanic span { display: flex; flex-direction: column; color: var(--culoare-text-secundar); font-size: 11px; text-transform: uppercase; }
.cifre-mecanic strong { color: var(--culoare-text); font-size: 15px; margin-top: 4px; }

.pagina-login {
    min-height: 100vh;
    padding: 32px;
    background:
        radial-gradient(circle at 82% 16%, rgba(41, 132, 232, .7), transparent 34%),
        radial-gradient(circle at 12% 88%, rgba(132, 85, 198, .42), transparent 38%),
        linear-gradient(135deg, #d5e8f9, #c8ddf1 48%, #e2dcef);
    background-size: 125% 125%;
    animation: loginFundal 22s ease-in-out infinite alternate;
}

.login-shell {
    width: min(980px, 100%);
    display: grid;
    grid-template-columns: 1fr minmax(390px, .82fr);
    align-items: stretch;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .58);
    border-radius: 24px;
    background: rgba(248, 251, 255, .58);
    box-shadow: 0 30px 80px rgba(29, 69, 109, .2);
    backdrop-filter: blur(18px);
}

.login-intro {
    min-height: 560px;
    padding: 56px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    color: white;
    background:
        linear-gradient(160deg, rgba(18, 63, 117, .22), rgba(25, 69, 125, .8)),
        radial-gradient(circle at 75% 12%, #60a5fa, transparent 42%),
        #1d4f91;
}

.login-logo {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    margin-bottom: auto;
    border: 1px solid rgba(255, 255, 255, .24);
    border-radius: 16px;
    background: rgba(255, 255, 255, .1);
    font-size: 20px;
}

.login-intro .antet-supra {
    color: #bfdbfe;
}

.login-intro h1 {
    max-width: 420px;
    margin: 8px 0 14px;
    font-size: clamp(34px, 5vw, 52px);
    line-height: 1.02;
}

.login-intro > p:last-child {
    max-width: 470px;
    margin: 0;
    color: #dbeafe;
    line-height: 1.65;
}

.pagina-login .card-login {
    width: auto;
    padding: 48px 42px;
    border: 0;
    border-radius: 0;
    background: rgba(248, 251, 255, .82);
    box-shadow: none;
}

.login-antet h2 {
    margin: 6px 0 24px;
    font-size: 24px;
}

.formular-login {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.alegere-utilizator {
    display: grid;
    gap: 10px;
}

.utilizator-card {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 13px;
    border: 1px solid rgba(137, 166, 197, .5);
    border-radius: 12px;
    background: rgba(255, 255, 255, .52);
    cursor: pointer;
    transition: border-color .2s ease, transform .2s ease, background .2s ease;
}

.utilizator-card:hover {
    transform: translateY(-1px);
    border-color: #60a5fa;
    background: rgba(255, 255, 255, .82);
}

.utilizator-card input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.utilizator-card:has(input:checked) {
    border-color: #2f6fed;
    background: rgba(219, 234, 254, .72);
    box-shadow: 0 0 0 3px rgba(47, 111, 237, .1);
}

.utilizator-avatar {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    color: #1d5fc4;
    background: rgba(96, 165, 250, .2);
    font-weight: 800;
}

.utilizator-card > span:nth-of-type(2) {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.utilizator-card small {
    color: var(--culoare-text-secundar);
}

.utilizator-bifa {
    color: #2f6fed;
    opacity: 0;
    font-weight: 800;
}

.utilizator-card:has(input:checked) .utilizator-bifa {
    opacity: 1;
}

.login-submit {
    width: 100%;
    padding: 12px 18px;
}

.badge-rol {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
}

.badge-rol-admin {
    color: #1e40af;
    background: #dbeafe;
}

.badge-rol-angajat {
    color: #166534;
    background: #dcfce7;
}

.asistent-buton {
    position: fixed;
    right: 24px;
    bottom: 22px;
    z-index: 80;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 12px 16px;
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 999px;
    color: white;
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    box-shadow: 0 14px 34px rgba(29, 78, 216, .32);
    font-family: inherit;
    cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease;
}

.asistent-buton:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 40px rgba(29, 78, 216, .4);
}

.asistent-buton span {
    font-size: 18px;
}

.asistent-panou {
    position: fixed;
    right: 22px;
    bottom: 78px;
    z-index: 90;
    width: min(410px, calc(100vw - 32px));
    height: min(680px, calc(100vh - 110px));
    display: grid;
    grid-template-rows: auto 1fr auto;
    overflow: hidden;
    border: 1px solid rgba(134, 165, 198, .56);
    border-radius: 18px;
    background: rgba(247, 251, 255, .96);
    box-shadow: 0 28px 70px rgba(23, 55, 89, .28);
    backdrop-filter: blur(18px);
    opacity: 0;
    visibility: hidden;
    transform: translateY(18px) scale(.98);
    transform-origin: bottom right;
    transition: opacity .22s ease, visibility .22s ease, transform .22s ease;
}

.asistent-panou.vizibil {
    opacity: 1;
    visibility: visible;
    transform: none;
}

.asistent-antet {
    padding: 15px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: white;
    background: linear-gradient(135deg, #173b70, #225fa9);
}

.asistent-antet > div {
    display: flex;
    align-items: center;
    gap: 10px;
}

.asistent-antet > div > div {
    display: flex;
    flex-direction: column;
}

.asistent-antet small {
    margin-top: 2px;
    color: #bfdbfe;
    font-size: 10px;
}

.asistent-simbol {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 11px;
    background: rgba(255, 255, 255, .13);
}

.asistent-antet > button {
    border: 0;
    color: #dbeafe;
    background: transparent;
    font-size: 25px;
    cursor: pointer;
}

.asistent-conversatie {
    padding: 16px;
    overflow-y: auto;
    background:
        radial-gradient(circle at 90% 0%, rgba(96, 165, 250, .12), transparent 32%),
        #edf4fb;
}

.asistent-mesaj {
    width: fit-content;
    max-width: 88%;
    margin-bottom: 10px;
    padding: 10px 12px;
    border-radius: 12px 12px 12px 4px;
    color: #263442;
    background: rgba(255, 255, 255, .9);
    box-shadow: 0 5px 15px rgba(36, 70, 105, .07);
    font-size: 13px;
    line-height: 1.5;
}

.asistent-mesaj-utilizator {
    margin-left: auto;
    border-radius: 12px 12px 4px 12px;
    color: white;
    background: #2f6fed;
}

.asistent-mesaj-asteptare {
    color: var(--culoare-text-secundar);
    font-style: italic;
}

.asistent-mesaj-eroare {
    color: #991b1b;
    background: #fee2e2;
}

.asistent-exemple {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 4px 0 14px;
}

.asistent-exemple button {
    padding: 7px 9px;
    border: 1px solid #c7d7e8;
    border-radius: 999px;
    color: #36526e;
    background: rgba(255, 255, 255, .65);
    font-family: inherit;
    font-size: 10px;
    cursor: pointer;
}

.asistent-card {
    margin: 4px 0 14px;
    overflow: hidden;
    border: 1px solid #c7d7e8;
    border-radius: 12px;
    background: rgba(255, 255, 255, .9);
    box-shadow: 0 8px 22px rgba(36, 70, 105, .09);
}

.asistent-card-rand {
    padding: 9px 11px;
    display: grid;
    grid-template-columns: 105px 1fr;
    gap: 8px;
    border-bottom: 1px solid #e3eaf1;
    font-size: 11px;
}

.asistent-card-rand strong {
    color: #526477;
}

.asistent-card-rand small {
    color: #202832;
    font-size: 11px;
    line-height: 1.4;
}

.asistent-card-alegere,
.asistent-card-rezultate {
    padding: 5px;
}

.asistent-card-alegere button,
.asistent-card-rezultate a {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 10px;
    border: 0;
    border-radius: 8px;
    color: var(--culoare-text);
    background: transparent;
    text-align: left;
    font-family: inherit;
    cursor: pointer;
}

.asistent-card-alegere button:hover,
.asistent-card-rezultate a:hover {
    background: #eaf3fd;
}

.asistent-card-alegere small,
.asistent-card-rezultate small {
    color: var(--culoare-text-secundar);
    font-size: 10px;
}

.asistent-card-actiuni {
    padding: 10px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
}

.asistent-card-actiuni button {
    padding: 9px 10px;
    border-radius: 8px;
    font-family: inherit;
    font-size: 11px;
    cursor: pointer;
}

.asistent-confirma {
    border: 0;
    color: white;
    background: #2563eb;
}

.asistent-renunta {
    border: 1px solid #cbd5e1;
    color: #526477;
    background: white;
}

.asistent-card-succes {
    padding: 10px;
    border-color: #86efac;
    background: #f0fdf4;
}

.asistent-card-succes .asistent-card-rand {
    grid-template-columns: 1fr;
    border: 0;
    color: #166534;
}

.asistent-card-succes a {
    display: inline-block;
    padding: 5px 11px 9px;
    color: #166534;
    font-size: 11px;
    font-weight: 700;
}

.asistent-formular {
    padding: 11px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
    border-top: 1px solid #d9e3ec;
    background: rgba(255, 255, 255, .94);
}

.asistent-formular textarea {
    min-height: 44px;
    max-height: 110px;
    resize: vertical;
    padding: 10px 11px;
    border: 1px solid #c7d7e8;
    border-radius: 10px;
    color: var(--culoare-text);
    background: #f8fbfe;
    font-family: inherit;
    font-size: 12px;
}

.asistent-formular > button {
    width: 44px;
    border: 0;
    border-radius: 10px;
    color: white;
    background: #2563eb;
    font-size: 19px;
    cursor: pointer;
}

@keyframes loginFundal {
    from { background-position: 0% 0%; }
    to { background-position: 100% 100%; }
}

.bun-venit { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 20px; background: #111827; color: white; opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility .35s ease; }
.bun-venit.vizibil { opacity: 1; visibility: visible; }
.bun-venit.iese { opacity: 0; }
.bun-venit-card { width: min(430px, 100%); text-align: center; animation: bunVenitSus .65s cubic-bezier(.2,.8,.2,1) both; }
.bun-venit-simbol { display: grid; place-items: center; width: 58px; height: 58px; margin: 0 auto 24px; border: 1px solid rgba(255,255,255,.2); border-radius: 16px; color: #93c5fd; font-size: 24px; }
.bun-venit-eticheta { color: #93c5fd; font-size: 10px; font-weight: 800; letter-spacing: .22em; }
.bun-venit h2 { margin: 14px 0 8px; font-size: clamp(28px, 6vw, 40px); }
.bun-venit p:not(.bun-venit-eticheta) { color: #cbd5e1; }
.bun-venit-linie { width: 180px; height: 2px; margin: 28px auto; overflow: hidden; background: rgba(255,255,255,.12); }
.bun-venit-linie span { display: block; width: 100%; height: 100%; background: #60a5fa; transform-origin: left; animation: bunVenitLinie 2.4s ease both; }
.bun-venit button { padding: 11px 20px; border: 1px solid rgba(255,255,255,.25); border-radius: 8px; color: white; background: transparent; cursor: pointer; }
.bun-venit button:hover { background: rgba(255,255,255,.08); }
@keyframes bunVenitSus { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes bunVenitLinie { from { transform: scaleX(0); } to { transform: scaleX(1); } }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
@media (max-width: 900px) {
    .formular-finalizare { grid-template-columns: 1fr 1fr; }
    .totaluri-lucrare { grid-template-columns: 1fr; }
    .totaluri-lucrare > div { border-right: 0; border-bottom: 1px solid var(--culoare-bordura); }
}
.subsol-legal{display:flex;justify-content:center;gap:18px;flex-wrap:wrap;padding:20px;color:#52657a;font-size:13px}
.subsol-legal a{color:#1859b7}
.lista-diagnostic{display:grid;gap:10px;margin:18px 0}
.diagnostic-rand{display:flex;justify-content:space-between;gap:20px;padding:13px 15px;border:1px solid #d7e2ee;border-radius:12px;background:#f8fbff}
.diagnostic-ok{color:#087a45}.diagnostic-eroare{color:#b42318}
.continut-legal{max-width:900px;line-height:1.65}.continut-legal h3{margin-top:24px}
.cale-recuperare{display:block;white-space:normal;overflow-wrap:anywhere;padding:10px;background:#edf4fc;border-radius:8px;margin:10px 0 18px}
.link-recuperare{display:block;text-align:center;margin-top:14px}

/* --- Buton „Marchează terminat” --- */
.buton-terminat { border: 0; border-radius: 999px; padding: 8px 16px; background: #0e7490; color: #fff; font-weight: 600; font-size: 13px; cursor: pointer; white-space: nowrap; }
.buton-terminat:hover { background: #155e75; }

/* --- Mașini din fișa clientului (editare inline) --- */
.lista-masini-client { display: grid; gap: 12px; }
.masina-client { border: 1px solid var(--culoare-bordura); border-radius: 12px; background: rgba(248, 250, 251, .9); overflow: hidden; }
.masina-client > summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 16px 18px; cursor: pointer; list-style: none; }
.masina-client > summary::-webkit-details-marker { display: none; }
.masina-client[open] > summary { border-bottom: 1px solid var(--culoare-bordura); background: #fff; }
.masina-client-titlu { display: flex; flex-direction: column; gap: 3px; }
.masina-client-actiuni { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.indiciu-modifica { color: var(--culoare-primara); font-size: 13px; font-weight: 600; }
.masina-client[open] .indiciu-modifica::after { content: " ▲"; }
.masina-client:not([open]) .indiciu-modifica::after { content: " ▼"; }
.masina-client form { padding: 0 18px 18px; }
.masina-client form.separator-sus { padding-top: 16px; }

/* --- Mașini în lucru: carduri + galerie foto --- */
.grila-masini { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.card-masina { display: flex; flex-direction: column; gap: 12px; padding: 18px; border: 1px solid var(--culoare-bordura); border-radius: 12px; background: rgba(255, 255, 255, .95); box-shadow: 0 9px 28px rgba(42, 52, 64, .05); }
.card-masina-antet { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.card-masina-antet h3 { margin: 0 0 4px; font-size: 17px; }
.card-masina-antet p { margin: 0; font-size: 13px; }
.card-masina-descriere { margin: 0; font-size: 14px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.galerie-mica { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; min-height: 76px; border-radius: 10px; overflow: hidden; background: #eef2f7; text-decoration: none; }
.galerie-mica img { width: 100%; height: 76px; object-fit: cover; display: block; }
.galerie-goala { grid-column: 1 / -1; display: grid; place-items: center; padding: 12px; color: var(--culoare-text-secundar); font-size: 13px; text-align: center; }
.galerie-rest { position: absolute; right: 6px; bottom: 6px; padding: 2px 8px; border-radius: 999px; background: rgba(15, 23, 42, .78); color: #fff; font-size: 12px; font-weight: 600; }
.card-masina-subsol { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; border-top: 1px solid var(--culoare-bordura); padding-top: 12px; font-size: 13px; }
.actiuni-card-masina { display: flex; gap: 14px; }

.galerie-lucrare { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; margin-top: 8px; }
.poza-lucrare { margin: 0; border: 1px solid var(--culoare-bordura); border-radius: 12px; overflow: hidden; background: #fff; }
.poza-lucrare img { width: 100%; height: 170px; object-fit: cover; display: block; background: #eef2f7; }
.poza-lucrare figcaption { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; font-size: 13px; }
.poza-lucrare figcaption form { margin-top: 2px; }

/* --- Deviz disponibil doar după terminarea mașinii --- */
.buton-indisponibil { display: inline-block; padding: 10px 16px; border: 1px dashed var(--culoare-bordura); border-radius: 8px; color: var(--culoare-text-secundar); background: rgba(241, 245, 249, .75); font-size: 13px; cursor: not-allowed; white-space: nowrap; }
/* Ancorele nu lipesc panoul de marginea de sus a ecranului. */
#piese, #manopera { scroll-margin-top: 18px; }

/* ===================================================
   Refresh vizual — fundal în degrade, contrast mai bun
   și mișcare discretă. Totul se dezactivează automat
   dacă utilizatorul cere reducerea animațiilor.
   =================================================== */

body {
    background: #c9dcef;
}

/* ---------- Fundal animat ---------- */

.continut-principal {
    background:
        linear-gradient(135deg,
            #dceafa 0%,
            #c6dcf3 26%,
            #d3d9f4 52%,
            #c2d9f2 76%,
            #dde6f8 100%);
    background-size: 260% 260%;
    animation: fundalCurge 34s ease-in-out infinite alternate;
}

@keyframes fundalCurge {
    0%   { background-position: 0% 45%; }
    50%  { background-position: 100% 55%; }
    100% { background-position: 12% 100%; }
}

/* Petele de lumină existente, puțin mai prezente. */
.continut-principal::before {
    background: radial-gradient(circle, rgba(38, 128, 228, .5) 0%, rgba(86, 170, 232, .26) 44%, transparent 70%);
    filter: blur(26px);
}

.continut-principal::after {
    background: radial-gradient(circle, rgba(126, 92, 208, .3) 0%, rgba(48, 143, 218, .22) 46%, transparent 72%);
    filter: blur(26px);
}

/* ---------- Panouri ---------- */

.panou,
.card-info,
.card-masina,
.card-mecanic {
    background: linear-gradient(160deg, rgba(255, 255, 255, .95) 0%, rgba(240, 246, 253, .88) 100%);
    border-color: var(--culoare-bordura-fina);
    box-shadow: var(--umbra-panou);
    transition: box-shadow var(--tranzitie), transform var(--tranzitie);
}

.panou { border-radius: 14px; padding: 20px 22px; }

.card-info:hover,
.card-masina:hover,
.card-mecanic:hover {
    transform: translateY(-3px);
    box-shadow: var(--umbra-panou-ridicat);
}

/* Antetul panourilor primește un accent subtil. */
.panou h2 {
    font-size: 16.5px;
    letter-spacing: -.01em;
    color: var(--culoare-text);
}

/* ---------- Lizibilitate text ---------- */

.text-secundar,
.camp-formular label,
.tabel-simplu th,
.panou-placeholder {
    color: var(--culoare-text-secundar);
}

.tabel-simplu th {
    letter-spacing: .04em;
    font-weight: 700;
    border-bottom-color: var(--culoare-bordura);
}

.tabel-simplu td { border-bottom-color: var(--culoare-bordura-fina); }
.tabel-simplu tbody tr { transition: background-color var(--tranzitie); }
.tabel-simplu tbody tr:hover { background: rgba(47, 111, 237, .06); }

.camp-formular label { font-weight: 600; }

/* ---------- Câmpuri de formular ---------- */

.camp-formular input,
.camp-formular select,
.camp-formular textarea,
.grila-formular input,
.grila-formular select,
.formular-simplu input,
.formular-simplu select,
.formular-simplu textarea {
    background: rgba(255, 255, 255, .96);
    border: 1px solid var(--culoare-bordura);
    border-radius: 9px;
    color: var(--culoare-text);
    transition: border-color var(--tranzitie), box-shadow var(--tranzitie), background-color var(--tranzitie);
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: none;
    border-color: var(--culoare-primara);
    box-shadow: 0 0 0 3px rgba(47, 111, 237, .18);
    background: #fff;
}

input::placeholder,
textarea::placeholder { color: #8494a8; }

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

.buton-principal,
.buton-secundar,
.buton-finalizare,
.buton-terminat,
.buton-pericol {
    transition: background-color var(--tranzitie), box-shadow var(--tranzitie), transform var(--tranzitie);
}

.buton-principal {
    background-image: linear-gradient(135deg, #3b7bf5 0%, #2558c4 100%);
    box-shadow: 0 6px 16px rgba(47, 111, 237, .28);
}

.buton-principal:hover,
.buton-finalizare:hover,
.buton-terminat:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(47, 111, 237, .32);
}

.buton-principal:active,
.buton-secundar:active,
.buton-finalizare:active,
.buton-terminat:active { transform: translateY(0); }

.buton-secundar {
    background: rgba(255, 255, 255, .92);
    border-color: var(--culoare-bordura);
}

.buton-secundar:hover {
    background: #fff;
    border-color: var(--culoare-primara);
    color: var(--culoare-primara);
    box-shadow: 0 6px 16px rgba(28, 45, 70, .1);
}

/* ---------- Meniul lateral ---------- */

.meniu-nav a {
    transition: background-color var(--tranzitie), color var(--tranzitie),
                border-left-color var(--tranzitie), padding-left var(--tranzitie);
}

.meniu-nav a:hover { padding-left: calc(var(--spatiere) + 4px); }

.meniu-nav a.activ {
    background-image: linear-gradient(90deg, #2f6fed 0%, #3f83f0 100%);
    box-shadow: inset 0 0 20px rgba(255, 255, 255, .08);
}

/* ---------- Taburi și badge-uri ---------- */

.tab-context {
    background: rgba(255, 255, 255, .8);
    transition: background-color var(--tranzitie), color var(--tranzitie),
                border-color var(--tranzitie), transform var(--tranzitie);
}

.tab-context:hover { transform: translateY(-1px); border-color: #9ec0f5; color: var(--culoare-text); }

.badge-status,
.badge-plata { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .04); font-weight: 600; }

/* ---------- Intrarea în pagină ---------- */

.continut-pagina > * {
    animation: intraInPagina 420ms cubic-bezier(.22, .8, .3, 1) backwards;
}

.continut-pagina > *:nth-child(1) { animation-delay: 0ms; }
.continut-pagina > *:nth-child(2) { animation-delay: 45ms; }
.continut-pagina > *:nth-child(3) { animation-delay: 90ms; }
.continut-pagina > *:nth-child(4) { animation-delay: 135ms; }
.continut-pagina > *:nth-child(n+5) { animation-delay: 175ms; }

@keyframes intraInPagina {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}

/* ---------- Mesaje flash ---------- */

.mesaj {
    border: 1px solid transparent;
    box-shadow: 0 6px 18px rgba(28, 45, 70, .08);
}

.mesaj-succes { border-color: #a7e3bf; }
.mesaj-eroare { border-color: #f6b3b3; }

/* ---------- Respectă preferința de mișcare redusă ---------- */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
}

/* ===================================================
   NIGHT MODE — se activează prin data-tema="noapte"
   pe elementul <html>. Comutatorul e în meniul lateral.
   =================================================== */

:root[data-tema="noapte"] {
    --culoare-fundal: #131a26;
    --culoare-panou: rgba(28, 37, 51, 0.92);
    --culoare-panou-adanc: rgba(21, 29, 41, 0.94);
    --culoare-text: #e8eef7;
    --culoare-text-secundar: #a2b2c6;
    --culoare-bordura: #35435a;
    --culoare-bordura-fina: rgba(120, 145, 180, 0.22);

    --umbra-panou: 0 10px 30px rgba(0, 0, 0, 0.42), 0 1px 2px rgba(0, 0, 0, 0.3);
    --umbra-panou-ridicat: 0 20px 48px rgba(0, 0, 0, 0.55), 0 2px 5px rgba(0, 0, 0, 0.35);

    --culoare-primara: #4d8bf5;
    --culoare-primara-hover: #6ba0f8;

    --culoare-meniu-fundal: #0d131d;
    color-scheme: dark;
}

/* ---------- Fundal ---------- */

:root[data-tema="noapte"] body { background: #0b1119; }

:root[data-tema="noapte"] .continut-principal {
    background:
        linear-gradient(135deg,
            #1a2536 0%,
            #101825 26%,
            #191d31 52%,
            #0f1723 76%,
            #16202f 100%);
    background-size: 260% 260%;
}

:root[data-tema="noapte"] .continut-principal::before {
    background: radial-gradient(circle, rgba(50, 110, 210, .34) 0%, rgba(40, 100, 180, .16) 44%, transparent 70%);
}

:root[data-tema="noapte"] .continut-principal::after {
    background: radial-gradient(circle, rgba(122, 82, 200, .26) 0%, rgba(40, 110, 180, .14) 46%, transparent 72%);
}

:root[data-tema="noapte"] .meniu-lateral {
    background: linear-gradient(180deg, #0d131d 0%, #111927 48%, #090e16 100%);
}

/* ---------- Panouri și carduri ---------- */

:root[data-tema="noapte"] .panou,
:root[data-tema="noapte"] .card-info,
:root[data-tema="noapte"] .card-masina,
:root[data-tema="noapte"] .card-mecanic,
:root[data-tema="noapte"] .card-login,
:root[data-tema="noapte"] .actiune-rapida-card,
:root[data-tema="noapte"] .card-alegere,
:root[data-tema="noapte"] .masina-client,
:root[data-tema="noapte"] .poza-lucrare,
:root[data-tema="noapte"] .finalizare-card {
    background: linear-gradient(160deg, rgba(32, 43, 60, .94) 0%, rgba(23, 32, 45, .9) 100%);
    border-color: var(--culoare-bordura-fina);
    color: var(--culoare-text);
}

:root[data-tema="noapte"] .masina-client[open] > summary {
    background: rgba(38, 50, 68, .9);
    border-bottom-color: var(--culoare-bordura-fina);
}

:root[data-tema="noapte"] .optiune-extinsa,
:root[data-tema="noapte"] .optiune-pret-achizitie,
:root[data-tema="noapte"] .diagnostic-rand,
:root[data-tema="noapte"] .cale-recuperare,
:root[data-tema="noapte"] .galerie-mica,
:root[data-tema="noapte"] .poza-lucrare img,
:root[data-tema="noapte"] .buton-indisponibil {
    background: rgba(20, 28, 40, .75);
    border-color: var(--culoare-bordura-fina);
}

/* ---------- Text, tabele, formulare ---------- */

:root[data-tema="noapte"] .tabel-simplu tbody tr:hover { background: rgba(77, 139, 245, .12); }
:root[data-tema="noapte"] .rand-clickabil:hover { background: rgba(77, 139, 245, .12); }

:root[data-tema="noapte"] input,
:root[data-tema="noapte"] select,
:root[data-tema="noapte"] textarea {
    background: rgba(15, 22, 33, .9);
    border-color: var(--culoare-bordura);
    color: var(--culoare-text);
}

:root[data-tema="noapte"] input::placeholder,
:root[data-tema="noapte"] textarea::placeholder { color: #7386a0; }

:root[data-tema="noapte"] input:focus-visible,
:root[data-tema="noapte"] select:focus-visible,
:root[data-tema="noapte"] textarea:focus-visible {
    background: rgba(20, 30, 44, .96);
    box-shadow: 0 0 0 3px rgba(77, 139, 245, .3);
}

:root[data-tema="noapte"] code,
:root[data-tema="noapte"] .cod-dispozitiv code {
    background: rgba(15, 22, 33, .9);
    color: #b9c8dc;
}

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

:root[data-tema="noapte"] .buton-principal {
    background-image: linear-gradient(135deg, #3f7ff0 0%, #2b60cc 100%);
    border-color: transparent;
    box-shadow: 0 6px 18px rgba(30, 80, 190, .4);
}

:root[data-tema="noapte"] .buton-secundar {
    background: rgba(38, 50, 68, .9);
    border-color: var(--culoare-bordura);
    color: var(--culoare-text);
}

:root[data-tema="noapte"] .buton-secundar:hover {
    background: rgba(48, 63, 85, .95);
    color: #8fb6fb;
    border-color: #4d8bf5;
}

:root[data-tema="noapte"] .buton-status.neutru { background: #33405a; color: #d5dfee; }
:root[data-tema="noapte"] .buton-status.gata { background: rgba(22, 101, 52, .5); color: #8ee0ae; }
:root[data-tema="noapte"] .buton-status.gata:hover { background: rgba(22, 101, 52, .7); }
:root[data-tema="noapte"] .buton-finalizare { background: #15803d; }
:root[data-tema="noapte"] .buton-finalizare:hover { background: #166534; }
:root[data-tema="noapte"] .buton-terminat { background: #0e7490; }
:root[data-tema="noapte"] .buton-terminat:hover { background: #0891b2; }
:root[data-tema="noapte"] .buton-pericol { background: #b3261e; }
:root[data-tema="noapte"] .pericol { color: #ff8b84; }
:root[data-tema="noapte"] .zona-pericol { border-color: rgba(179, 38, 30, .45); }

/* ---------- Taburi, badge-uri, mesaje ---------- */

:root[data-tema="noapte"] .tab-context {
    background: rgba(30, 41, 57, .85);
    border-color: var(--culoare-bordura-fina);
    color: var(--culoare-text-secundar);
}

:root[data-tema="noapte"] .tab-context:hover { color: var(--culoare-text); border-color: #4d8bf5; }
:root[data-tema="noapte"] .tab-context.activ { background: rgba(77, 139, 245, .22); border-color: #4d8bf5; color: #a8c6fc; }

:root[data-tema="noapte"] .badge-status { background: rgba(99, 122, 232, .22); color: #b6c4fb; }
:root[data-tema="noapte"] .status-finalizat,
:root[data-tema="noapte"] .status-predat,
:root[data-tema="noapte"] .status-achitat,
:root[data-tema="noapte"] .status-montata { background: rgba(22, 101, 52, .34); color: #86e0aa; }
:root[data-tema="noapte"] .status-terminat { background: rgba(14, 116, 144, .38); color: #7edce9; }
:root[data-tema="noapte"] .status-asteapta_piese,
:root[data-tema="noapte"] .status-comandata,
:root[data-tema="noapte"] .status-pe_drum { background: rgba(154, 52, 18, .34); color: #f6b98a; }
:root[data-tema="noapte"] .status-returnata,
:root[data-tema="noapte"] .status-anulata { background: rgba(71, 85, 105, .45); color: #b6c2d2; }

:root[data-tema="noapte"] .plata-achitat { background: rgba(22, 101, 52, .34); color: #86e0aa; }
:root[data-tema="noapte"] .plata-partial { background: rgba(146, 64, 14, .38); color: #f4c778; }
:root[data-tema="noapte"] .plata-neachitat { background: rgba(153, 27, 27, .38); color: #f8a3a3; }

:root[data-tema="noapte"] .mesaj-succes { background: rgba(22, 101, 52, .3); border-color: rgba(134, 224, 170, .35); color: #9ce8b8; }
:root[data-tema="noapte"] .mesaj-eroare { background: rgba(153, 27, 27, .3); border-color: rgba(248, 163, 163, .35); color: #f9b4b4; }

:root[data-tema="noapte"] .totaluri-lucrare .total-general { background: rgba(77, 139, 245, .16); }
:root[data-tema="noapte"] .semn-finalizat { background: rgba(22, 101, 52, .4); color: #86e0aa; }
:root[data-tema="noapte"] .trial-banner { background: rgba(30, 58, 110, .5); border-color: rgba(77, 139, 245, .35); color: #b8cffb; }
:root[data-tema="noapte"] .trial-banner.expirat { background: rgba(153, 27, 27, .32); border-color: rgba(248, 163, 163, .4); color: #f9b4b4; }
:root[data-tema="noapte"] .licenta-activa { background: rgba(22, 101, 52, .3); border-color: rgba(134, 224, 170, .35); color: #9ce8b8; }
:root[data-tema="noapte"] .licenta-trial { background: rgba(30, 58, 110, .45); border-color: rgba(77, 139, 245, .35); color: #b8cffb; }
:root[data-tema="noapte"] .licenta-expirata { background: rgba(153, 27, 27, .3); border-color: rgba(248, 163, 163, .35); color: #f9b4b4; }

:root[data-tema="noapte"] .subsol-legal { color: #8ea0b8; }
:root[data-tema="noapte"] .subsol-legal a { color: #7cabf7; }
:root[data-tema="noapte"] .fir-navigare a:hover { color: #7cabf7; }
:root[data-tema="noapte"] .diagnostic-ok { color: #7ddba4; }
:root[data-tema="noapte"] .diagnostic-eroare { color: #f9a8a3; }

/* ---------- Pagina de autentificare ---------- */

:root[data-tema="noapte"] .pagina-login { background: #0b1119; }
:root[data-tema="noapte"] .utilizator-card { background: rgba(30, 41, 57, .8); border-color: var(--culoare-bordura-fina); }

/* ---------- Asistent ---------- */

:root[data-tema="noapte"] .asistent-panou { background: rgba(20, 28, 40, .97); border-color: var(--culoare-bordura-fina); }
:root[data-tema="noapte"] .asistent-mesaj-sistem { background: rgba(38, 50, 68, .8); color: var(--culoare-text); }
:root[data-tema="noapte"] .asistent-card { background: rgba(32, 43, 60, .92); border-color: var(--culoare-bordura-fina); }

/* ---------- Comutatorul de temă ---------- */

.comutator-tema {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: calc(100% - 32px);
    margin: 10px 16px 0;
    padding: 9px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 8px;
    color: #c7cbd6;
    background: rgba(255, 255, 255, .04);
    font-family: inherit;
    font-size: 12px;
    cursor: pointer;
    transition: background-color var(--tranzitie), color var(--tranzitie);
}

.comutator-tema:hover { color: #fff; background: rgba(255, 255, 255, .1); }
.comutator-tema .pictograma-tema { font-size: 14px; line-height: 1; }
.comutator-tema .eticheta-zi { display: none; }
:root[data-tema="noapte"] .comutator-tema .eticheta-zi { display: inline; }
:root[data-tema="noapte"] .comutator-tema .eticheta-noapte { display: none; }

/* Tranziție lină la schimbarea temei. */
body, .panou, .card-info, .card-masina, .card-mecanic, .continut-principal, .meniu-lateral {
    transition: background-color var(--tranzitie), color var(--tranzitie), border-color var(--tranzitie);
}

/* ---------- Asistentul în mod noapte ---------- */

:root[data-tema="noapte"] .asistent-conversatie {
    background:
        radial-gradient(circle at 90% 0%, rgba(77, 139, 245, .16), transparent 32%),
        #131b27;
}

:root[data-tema="noapte"] .asistent-mesaj {
    color: #dce5f1;
    background: rgba(38, 50, 68, .92);
    box-shadow: 0 5px 15px rgba(0, 0, 0, .3);
}

:root[data-tema="noapte"] .asistent-mesaj-utilizator { background: #2f6fed; color: #fff; }
:root[data-tema="noapte"] .asistent-mesaj-asteptare { color: var(--culoare-text-secundar); }
:root[data-tema="noapte"] .asistent-mesaj-eroare { background: rgba(153, 27, 27, .38); color: #f9b4b4; }

:root[data-tema="noapte"] .asistent-exemple button {
    border-color: var(--culoare-bordura);
    color: #adc0d6;
    background: rgba(38, 50, 68, .8);
}

:root[data-tema="noapte"] .asistent-exemple button:hover { background: rgba(50, 66, 90, .9); color: #fff; }

:root[data-tema="noapte"] .asistent-card { border-color: var(--culoare-bordura); box-shadow: 0 8px 22px rgba(0, 0, 0, .35); }
:root[data-tema="noapte"] .asistent-card-rand { border-bottom-color: var(--culoare-bordura-fina); }
:root[data-tema="noapte"] .asistent-card-rand strong { color: #9fb2c8; }
:root[data-tema="noapte"] .asistent-card-rand small { color: var(--culoare-text); }
:root[data-tema="noapte"] .asistent-card-succes { background: rgba(22, 101, 52, .28); border-color: rgba(134, 224, 170, .4); }
:root[data-tema="noapte"] .asistent-card-succes .asistent-card-rand,
:root[data-tema="noapte"] .asistent-card-succes a { color: #9ce8b8; }

:root[data-tema="noapte"] .asistent-renunta { background: rgba(38, 50, 68, .9); border-color: var(--culoare-bordura); color: #c3d1e2; }

:root[data-tema="noapte"] .asistent-antet { border-bottom-color: var(--culoare-bordura-fina); }
:root[data-tema="noapte"] .asistent-antet small { color: var(--culoare-text-secundar); }

:root[data-tema="noapte"] .asistent-formular {
    border-top-color: var(--culoare-bordura-fina);
    background: rgba(20, 28, 40, .96);
}

:root[data-tema="noapte"] .asistent-formular textarea {
    border-color: var(--culoare-bordura);
    background: rgba(15, 22, 33, .92);
    color: var(--culoare-text);
}

/* Validare pe camp: mesaj si evidentiere */
.camp-eroare {
    display: block;
    margin-top: 5px;
    color: #b42318;
    font-size: 12px;
    line-height: 1.4;
}
.camp-formular input.camp-invalid {
    border-color: #d92d20;
    box-shadow: 0 0 0 3px rgba(217, 45, 32, .12);
}
:root[data-tema="noapte"] .camp-eroare { color: #ff9c92; }
:root[data-tema="noapte"] .camp-formular input.camp-invalid {
    border-color: #ff6b5e;
    box-shadow: 0 0 0 3px rgba(255, 107, 94, .18);
}

/* Caseta de detalii din tabelul de remindere */
.celula-detalii { min-width: 240px; }
.celula-detalii textarea {
    width: 100%;
    min-height: 76px;
    resize: vertical;
    line-height: 1.45;
}
.camp-formular textarea { resize: vertical; line-height: 1.5; }

/* Casuta de cautare din listele cu filtru */
.camp-cautare {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 14px;
}
.camp-cautare input[type="search"],
.camp-cautare input[type="text"] { flex: 1 1 280px; }


/* ==========================================================================
   OPTIMIZARE MOBIL
   Blocul e la finalul fisierului intentionat: regulile de layout desktop
   sunt definite dupa media query-urile vechi, deci le anulau. Aici castiga
   ordinea, fara sa rearanjam restul fisierului.
   ========================================================================== */

/* --- iOS: campurile sub 16px declanseaza zoom automat la focus --- */
@media (max-width: 900px) {
    input, select, textarea,
    .formular-simplu input, .formular-inline input,
    .camp-cautare input {
        font-size: 16px;
    }
}

/* ---------------------- Telefon si tableta mica ------------------------- */
@media (max-width: 900px) {

    /* --- Autentificare: cardul se plieaza pe verticala --- */
    .pagina-login {
        padding: 16px;
        align-items: start;
    }

    .login-shell {
        grid-template-columns: 1fr;
        width: 100%;
        border-radius: 18px;
    }

    .login-intro {
        min-height: auto;
        padding: 28px 24px 24px;
        justify-content: flex-start;
    }

    .login-intro h1 {
        max-width: none;
        margin: 10px 0 10px;
        font-size: clamp(26px, 7vw, 34px);
    }

    .login-intro > p:last-child {
        max-width: none;
        font-size: 14px;
        line-height: 1.55;
    }

    .login-vpf-logo { margin-bottom: 10px; }
    .created-by { margin-top: 16px; }

    .pagina-login .card-login {
        width: 100%;
        padding: 26px 22px 30px;
    }

    .login-antet h2 { margin: 6px 0 18px; font-size: 21px; }

    /* --- Structura aplicatiei: meniul devine bara sus --- */
    .layout { flex-direction: column; }

    .meniu-lateral {
        width: 100%;
        height: auto;
        position: static;
        overflow: visible;
        padding-bottom: 8px;
    }

    .logo-atelier { padding: 14px 16px 10px; }

    /* Meniul devine o banda orizontala derulabila, nu o lista lunga */
    .meniu-nav {
        display: flex;
        flex-wrap: nowrap;
        gap: 6px;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 6px 12px 10px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .meniu-nav::-webkit-scrollbar { display: none; }

    .meniu-nav a {
        flex: 0 0 auto;
        white-space: nowrap;
        padding: 9px 14px;
        border-radius: 9px;
        font-size: 14px;
    }

    /* Etichetele de grup ar rupe banda si ar fura spatiu */
    .meniu-sectiune { display: none; }

    .utilizator-curent {
        margin: 0;
        padding: 10px 16px;
        border-top: 1px solid rgba(255, 255, 255, .08);
    }

    .comutator-tema,
    .versiune-produs,
    .inchide-portabil { padding-left: 16px; padding-right: 16px; }

    .continut-principal {
        padding: 16px 14px 28px;
        min-height: auto;
    }

    /* Fundalul animat costa bateria si framerate pe telefon */
    .continut-principal::before,
    .continut-principal::after { display: none; }
    .pagina-login { animation: none; }

    .antet-pagina {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
    .antet-pagina h1 { font-size: 25px; }
    .antet-data { font-size: 12px; }

    /* --- Tabelele: derulare orizontala in loc de taiere --- */
    .panou { overflow-x: auto; }
    .tabel-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .tabel-simplu { min-width: 560px; }
    .tabel-simplu th, .tabel-simplu td { white-space: nowrap; }
    .celula-detalii { min-width: 220px; }
    .celula-detalii textarea { white-space: normal; }

    /* --- Formulare pe o coloana, tinte de atins mai mari --- */
    .grila-formular,
    .grila-piese,
    .formular-finalizare,
    .optiune-pret-achizitie { grid-template-columns: 1fr; }

    .formular-inline { flex-wrap: wrap; gap: 10px; }

    .buton-principal, .buton-secundar, .buton-pericol,
    .buton-finalizare, .login-submit {
        min-height: 44px;
        padding-left: 18px;
        padding-right: 18px;
    }

    .actiuni-antet {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }
    .actiuni-antet .buton-principal,
    .actiuni-antet .buton-secundar { text-align: center; }

    .bara-context {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    .taburi-context { overflow-x: auto; white-space: nowrap; padding-bottom: 4px; }

    .camp-cautare { flex-direction: column; align-items: stretch; }
    .camp-cautare .buton-principal,
    .camp-cautare .buton-secundar { width: 100%; }

    /* --- Carduri si liste --- */
    .carduri-info { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .grila-masini { grid-template-columns: 1fr; }
    .carduri-mecanici { grid-template-columns: 1fr; }
    .galerie-lucrare { grid-template-columns: repeat(2, 1fr); }
    .totaluri-lucrare { grid-template-columns: 1fr; }
    .totaluri-lucrare > div {
        border-right: 0;
        border-bottom: 1px solid var(--culoare-bordura);
    }

    /* --- Selectorul de client: lista de rezultate nu depaseste ecranul --- */
    .rezultate-client { max-height: 260px; overflow-y: auto; }

    /* --- Asistentul: deasupra barei Safari --- */
    .asistent-buton {
        right: 12px;
        bottom: calc(12px + env(safe-area-inset-bottom, 0px));
        padding: 11px 16px;
    }
}

/* ------------------------------ Telefon --------------------------------- */
@media (max-width: 640px) {

    .carduri-info { grid-template-columns: 1fr; }
    .actiuni-rapide { grid-template-columns: 1fr; }
    .galerie-lucrare { grid-template-columns: 1fr; }

    .continut-principal { padding: 14px 12px 26px; }
    .panou { padding: 16px 14px; }

    .antet-lucrare,
    .stare-lucrare,
    .finalizat-rezumat,
    .finalizat-rezumat > div,
    .card-masina-antet,
    .card-masina-subsol,
    .masina-client > summary {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    .stare-lucrare { justify-content: flex-start; }

    .actiuni-deviz { flex-wrap: wrap; gap: 8px; }

    .asistent-panou {
        inset: 8px;
        width: auto;
        height: auto;
        border-radius: 16px;
    }

    .subsol-legal { gap: 12px; padding: 16px 12px; font-size: 12px; }
}