/* Atelier SimoShop — temă deschisă, contrast mare.
   Culorile sunt alese pe contrast, nu pe modă: textul pe fundal trece de 7:1
   (AAA), iar butoanele de acțiune de 4,5:1 (AA). Hala are lumină de neon și
   ecrane ieftine — un gri deschis pe alb nu se vede acolo. */

:root {
    --fundal: #f4f6f8;
    --carte: #ffffff;
    --text: #16202a;
    --text-slab: #4a5967;
    --linie: #d3dbe3;
    --linie-tare: #b4c0cc;
    --accent: #0b5fa5;
    --accent-inchis: #084a82;
    --accent-slab: #e7f0f9;
    --verde: #1a7a45;
    --verde-slab: #e4f4ea;
    --rosu: #b3261e;
    --rosu-slab: #fbeae9;
    --galben: #8a5a00;
    --galben-slab: #fdf3e0;
    --umbra: 0 1px 2px rgba(16, 32, 48, .08), 0 4px 12px rgba(16, 32, 48, .06);
    --raza: 12px;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--fundal);
    color: var(--text);
    font: 16px/1.55 "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

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

/* ------------------------------------------------------------------ antet */

header.sus {
    position: sticky; top: 0; z-index: 50;
    background: var(--carte);
    border-bottom: 1px solid var(--linie);
    box-shadow: 0 1px 3px rgba(16, 32, 48, .05);
}

.bara {
    max-width: 1280px; margin: 0 auto; padding: 0 18px;
    display: flex; align-items: center; gap: 10px; min-height: 60px;
}

.marca {
    display: flex; align-items: center; gap: 10px;
    font-weight: 700; font-size: 17px; color: var(--text); text-decoration: none;
    white-space: nowrap;
}
.marca .punct {
    width: 26px; height: 26px; border-radius: 8px;
    background: linear-gradient(135deg, var(--accent), #12a3a3);
}

nav.meniu { display: flex; gap: 0; margin-left: 6px; flex: 1; min-width: 0; }

.grup { position: relative; }

.grup > button {
    font: inherit; font-size: 14.5px; font-weight: 600; color: var(--text);
    background: none; border: 0; border-radius: 8px; white-space: nowrap;
    padding: 8px 9px; cursor: pointer; display: flex; align-items: center; gap: 5px;
}
@media (min-width: 1121px) and (max-width: 1400px) {
    .grup > button { font-size: 13.5px; padding: 8px 7px; }
    .marca { font-size: 15px; }
}
.grup > button:hover, .grup.deschis > button { background: var(--accent-slab); color: var(--accent-inchis); }
.grup > button .sageata { transition: transform .15s; font-size: 11px; opacity: .7; }
.grup.deschis > button .sageata { transform: rotate(180deg); }

.panou {
    display: none; position: absolute; top: calc(100% + 6px); left: 0;
    min-width: 340px; background: var(--carte);
    border: 1px solid var(--linie); border-radius: var(--raza);
    box-shadow: var(--umbra); padding: 6px; z-index: 60;
}
.grup.deschis .panou { display: block; }

.panou .titlu-grup {
    font-size: 12px; text-transform: uppercase; letter-spacing: .04em;
    color: var(--text-slab); padding: 8px 10px 4px;
}

.panou a, .panou span.mort {
    display: block; padding: 9px 10px; border-radius: 8px;
    color: var(--text); text-decoration: none;
}
.panou a:hover { background: var(--accent-slab); }
.panou .nume { font-weight: 600; display: flex; align-items: center; gap: 8px; }
.panou .scurt { font-size: 13px; color: var(--text-slab); }
.panou span.mort { opacity: .62; cursor: default; }

.eticheta {
    font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 999px;
    text-transform: uppercase; letter-spacing: .03em;
}
.et-link { background: var(--accent-slab); color: var(--accent-inchis); }
.et-curand { background: var(--galben-slab); color: var(--galben); }
.et-gata { background: var(--verde-slab); color: var(--verde); }

.dreapta { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.cine { font-size: 14px; color: var(--text-slab); }
.cine b { color: var(--text); }

/* Contul: acelasi mecanism de meniu, ancorat la dreapta ca sa nu iasa din ecran */
.grup.eu .panou { left: auto; right: 0; min-width: 300px; }
.grup.eu > button { border: 1.5px solid var(--linie-tare); }
.bulina {
    width: 24px; height: 24px; border-radius: 50%; background: var(--accent);
    color: #fff; font-size: 13px; display: flex; align-items: center;
    justify-content: center; font-weight: 700;
}

.hamburger { display: none; font-size: 22px; background: none; border: 0; cursor: pointer; }

/* ----------------------------------------------------------------- cuprins */

main { max-width: 1280px; margin: 0 auto; padding: 26px 18px 60px; }

h1 { font-size: 26px; margin: 0 0 6px; letter-spacing: -.01em; }
h2 { font-size: 19px; margin: 30px 0 12px; }
.sub { color: var(--text-slab); margin: 0 0 22px; }

.carte {
    background: var(--carte); border: 1px solid var(--linie);
    border-radius: var(--raza); box-shadow: var(--umbra); padding: 20px;
}

/* pictogramele de pe prima pagină */
.placi {
    display: grid; gap: 16px; margin-top: 18px;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.placa {
    display: flex; gap: 14px; align-items: flex-start;
    background: var(--carte); border: 1px solid var(--linie); border-radius: 14px;
    padding: 18px; text-decoration: none; color: var(--text);
    box-shadow: var(--umbra); transition: transform .12s, border-color .12s, box-shadow .12s;
}
.placa:hover {
    transform: translateY(-2px); border-color: var(--accent);
    box-shadow: 0 6px 18px rgba(11, 95, 165, .16);
}
.placa .ico {
    flex: 0 0 52px; height: 52px; border-radius: 13px;
    background: var(--accent-slab); color: var(--accent-inchis);
    display: flex; align-items: center; justify-content: center;
}
.placa .ico svg { width: 28px; height: 28px; }
.placa h3 { margin: 2px 0 4px; font-size: 16.5px; }
.placa p { margin: 0; font-size: 13.5px; color: var(--text-slab); }

/* ------------------------------------------------------------- formulare */

.doua { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 20px; }

label.camp { display: block; margin: 0 0 14px; }
label.camp .et { display: block; font-weight: 600; margin-bottom: 5px; font-size: 14.5px; }
label.camp .ajutor { font-size: 12.5px; color: var(--text-slab); margin-top: 4px; }

input[type=text], input[type=password], input[type=number], select, textarea {
    width: 100%; padding: 10px 12px; font: inherit; color: var(--text);
    background: #fff; border: 1.5px solid var(--linie-tare); border-radius: 9px;
}
input:focus, select:focus, textarea:focus {
    outline: 3px solid rgba(11, 95, 165, .25); border-color: var(--accent);
}
textarea { min-height: 92px; resize: vertical; }

.bifa-rand { display: flex; align-items: flex-start; gap: 9px; margin-bottom: 13px; }
.bifa-rand input { width: 19px; height: 19px; margin-top: 2px; accent-color: var(--accent); }

button.actiune, a.actiune {
    display: inline-flex; align-items: center; gap: 8px; justify-content: center;
    background: var(--accent); color: #fff; border: 0; border-radius: 10px;
    padding: 12px 20px; font: inherit; font-weight: 600; cursor: pointer;
    text-decoration: none;
}
button.actiune:hover, a.actiune:hover { background: var(--accent-inchis); }
button.actiune:disabled { background: var(--linie-tare); cursor: default; }
button.mic, a.mic { padding: 7px 12px; font-size: 14px; border-radius: 8px; }
button.gol, a.gol {
    background: #fff; color: var(--accent-inchis); border: 1.5px solid var(--linie-tare);
}
button.gol:hover, a.gol:hover { background: var(--accent-slab); }
button.rau { background: var(--rosu); }
button.rau:hover { background: #8f1e17; }

/* zona de încărcat */
.zona {
    border: 2.5px dashed var(--linie-tare); border-radius: 14px; padding: 26px 18px;
    text-align: center; background: #fbfcfd; cursor: pointer; margin-bottom: 16px;
}
.zona.peste { border-color: var(--accent); background: var(--accent-slab); }
.zona .mare { font-weight: 600; }
.zona .mic-txt { font-size: 13px; color: var(--text-slab); }
.zona img.previz { max-height: 190px; max-width: 100%; border-radius: 10px; margin-top: 12px; }

/* rezultate */
.rezultat { margin-top: 16px; }
.fisier {
    display: flex; align-items: center; gap: 12px; padding: 11px 12px;
    border: 1px solid var(--linie); border-radius: 10px; margin-bottom: 9px;
    background: #fff;
}
.fisier .nume { font-weight: 600; }
.fisier .et2 { font-size: 13px; color: var(--text-slab); }
.fisier img { width: 54px; height: 54px; object-fit: contain; border: 1px solid var(--linie); border-radius: 8px; background: #fff; }

.stare-bara { padding: 12px 14px; border-radius: 10px; font-weight: 600; }
.st-lucru { background: var(--galben-slab); color: var(--galben); }
.st-gata { background: var(--verde-slab); color: var(--verde); }
.st-picata { background: var(--rosu-slab); color: var(--rosu); }

/* tabele */
table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--linie); }
th { font-size: 12.5px; text-transform: uppercase; letter-spacing: .03em; color: var(--text-slab); }
tr:hover td { background: #fafbfc; }

.pastila { font-size: 12px; font-weight: 700; padding: 2px 9px; border-radius: 999px; }
.p-gata { background: var(--verde-slab); color: var(--verde); }
.p-lucru { background: var(--galben-slab); color: var(--galben); }
.p-picata { background: var(--rosu-slab); color: var(--rosu); }

.nota { background: var(--accent-slab); border-left: 4px solid var(--accent);
        padding: 12px 14px; border-radius: 0 10px 10px 0; font-size: 14px; }
.mesaj-ok { background: var(--verde-slab); color: var(--verde); padding: 11px 14px;
            border-radius: 10px; margin-bottom: 16px; font-weight: 600; }
.mesaj-rau { background: var(--rosu-slab); color: var(--rosu); padding: 11px 14px;
             border-radius: 10px; margin-bottom: 16px; font-weight: 600; }

/* ----------------------------------------------------------------- telefon */

@media (max-width: 1120px) {
    .doua { grid-template-columns: 1fr; }
    .hamburger { display: block; margin-left: auto; }
    nav.meniu {
        display: none; position: absolute; top: 60px; left: 0; right: 0;
        flex-direction: column; background: var(--carte); padding: 10px;
        border-bottom: 1px solid var(--linie); max-height: 78vh; overflow: auto;
    }
    nav.meniu.deschis { display: flex; }
    .grup > button { width: 100%; justify-content: space-between; }
    .panou { position: static; box-shadow: none; border: 0; min-width: 0;
             padding-left: 8px; border-left: 3px solid var(--accent-slab); }
    /* Ordinea pe telefon: marca, contul, hamburgerul. Fara asta, contul sare
       inaintea logo-ului, pentru ca in HTML sta dupa butonul de meniu. */
    .marca { order: 1; }
    .dreapta { order: 2; margin-left: auto; }
    .hamburger { order: 3; margin-left: 4px; }
    .grup.eu .panou { border-left: 0; }
}

/* Iesirea unui script sau a unui raport, afisata in pagina. Monospace si
   derulabila: consola unui import de lot poate avea 200 de randuri. */
pre.consola {
    background: #12202c; color: #e8eef4; padding: 14px 16px; border-radius: 10px;
    overflow: auto; max-height: 460px; font-size: 13px; line-height: 1.45;
    white-space: pre-wrap; word-break: break-word;
}
.rezultat table, .rezultat-html table { margin-top: 10px; }
.rezultat-html { margin-top: 12px; }