/* Portal client solviERP */
:root {
  --albastru: #24418c;
  --albastru-inchis: #1a2f66;
  --albastru-deschis: #e8edf7;
  --fundal: #f4f6f9;
  --card: #ffffff;
  --text: #1b1f24;
  --slab: #5b6573;
  --linie: #dde3ec;
  --ok: #1d7a46;
  --ok-fond: #e3f4ea;
  --atentie: #8a5a00;
  --atentie-fond: #fdf1d8;
  --rau: #b42318;
  --rau-fond: #fde8e6;
  --neutru-fond: #eef1f5;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--fundal); color: var(--text);
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif; font-size: 15px; line-height: 1.5;
  display: flex; flex-direction: column; min-height: 100vh;
}
a { color: var(--albastru); }
h1 { font-size: 1.5rem; margin: 0 0 .5rem; }
h2 { font-size: 1.1rem; margin: 1.2rem 0 .6rem; }
.card > h2:first-child, .card-titlu h2 { margin-top: 0; }
code { font-family: Consolas, "Courier New", monospace; }

/* bara de sus */
.sus { background: var(--card); border-bottom: 3px solid var(--albastru); }
.sus-in { max-width: 1100px; margin: 0 auto; padding: .6rem 16px; display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.marca { display: flex; align-items: center; gap: .7rem; text-decoration: none; color: var(--albastru); font-weight: 600; }
.marca img { height: 34px; width: auto; }
.marca span { border-left: 1px solid var(--linie); padding-left: .7rem; }
.meniu { display: flex; align-items: center; gap: .2rem; margin-left: auto; flex-wrap: wrap; }
.meniu a, .meniu .link { padding: .4rem .7rem; border-radius: 6px; text-decoration: none; color: var(--text); font-size: .95rem; }
.meniu a:hover, .meniu .link:hover { background: var(--albastru-deschis); }
.meniu a.activ { background: var(--albastru); color: #fff; }
.iesire { margin: 0; }

.pagina { width: 100%; max-width: 1100px; margin: 0 auto; padding: 1.5rem 16px 2rem; flex: 1; }
.jos { max-width: 1100px; width: 100%; margin: 0 auto; padding: 1rem 16px 1.5rem; color: var(--slab); font-size: .85rem; display: flex; gap: 1rem; justify-content: space-between; }

/* carduri */
.card { background: var(--card); border: 1px solid var(--linie); border-radius: 10px; padding: 1.2rem 1.3rem; margin-bottom: 1rem; }
.card.ingust { max-width: 26rem; margin: 6vh auto 1rem; }
.card.text { max-width: 46rem; }
.card-titlu { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: .6rem; }
.card-titlu h1 { margin: 0; }
.grila { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1rem; align-items: start; }
.grila .card { margin-bottom: 0; }
.grila + .card { margin-top: 1rem; }

.cifre { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin: 1rem 0; }
.cifra { background: var(--card); border: 1px solid var(--linie); border-left: 4px solid var(--albastru); border-radius: 10px; padding: .9rem 1.1rem; display: flex; flex-direction: column; }
.cifra.rau { border-left-color: var(--rau); }
.cifra .eticheta { color: var(--slab); font-size: .85rem; }
.cifra .valoare { font-size: 1.35rem; font-weight: 600; }
.cifra .valoare.mic { font-size: 1rem; padding-top: .3rem; }
.cifra .nota { color: var(--slab); font-size: .82rem; }

/* tabele */
.tabel-derulant { overflow-x: auto; }
.tabel { width: 100%; border-collapse: collapse; }
.tabel th { text-align: left; font-weight: 600; font-size: .82rem; color: var(--slab); border-bottom: 2px solid var(--linie); padding: .5rem .55rem; white-space: nowrap; }
.tabel td { border-bottom: 1px solid var(--linie); padding: .55rem .55rem; vertical-align: top; }
.tabel tr:last-child td { border-bottom: 0; }
.tabel .n { text-align: right; white-space: nowrap; }
.tabel td.titlu-fisa { white-space: nowrap; }
.tabel.mic td, .tabel.mic th { font-size: .82rem; padding: .35rem .45rem; }
.rosu, .tabel tr.rosu td { color: var(--rau); }

.insigna { display: inline-block; padding: .1rem .55rem; border-radius: 999px; font-size: .8rem; font-weight: 600; white-space: nowrap; }
.insigna.ok { background: var(--ok-fond); color: var(--ok); }
.insigna.atentie { background: var(--atentie-fond); color: var(--atentie); }
.insigna.rau { background: var(--rau-fond); color: var(--rau); }
.insigna.neutru { background: var(--neutru-fond); color: var(--slab); }

.detalii { display: grid; grid-template-columns: max-content 1fr; gap: .3rem 1.2rem; margin: 0 0 .5rem; }
.detalii dt { color: var(--slab); }
.detalii dd { margin: 0; }

/* formulare */
.formular { display: flex; flex-direction: column; gap: .8rem; }
.formular label { display: flex; flex-direction: column; gap: .25rem; font-size: .9rem; color: var(--slab); }
.formular label.bifa, .filtre label.bifa { flex-direction: row; align-items: center; gap: .5rem; color: var(--text); }
input[type=email], input[type=password], input[type=text], input[type=tel], input[type=search], select {
  font: inherit; color: var(--text); padding: .55rem .7rem; border: 1px solid #c4ccd8; border-radius: 7px; background: #fff; width: 100%;
}
input:focus, select:focus { outline: 2px solid var(--albastru); outline-offset: 0; border-color: var(--albastru); }
input:disabled { background: var(--neutru-fond); color: var(--slab); }
.filtre { display: flex; gap: .8rem; align-items: flex-end; flex-wrap: wrap; margin: 1rem 0; }
.filtre label { display: flex; flex-direction: column; gap: .25rem; font-size: .85rem; color: var(--slab); }
.filtre select, .filtre input[type=search] { width: auto; min-width: 11rem; }

.buton { display: inline-block; font: inherit; font-weight: 600; background: var(--albastru); color: #fff; border: 1px solid var(--albastru);
  border-radius: 7px; padding: .55rem 1.1rem; cursor: pointer; text-decoration: none; text-align: center; }
.buton:hover { background: var(--albastru-inchis); }
.buton.secundar { background: #fff; color: var(--albastru); }
.buton.secundar:hover { background: var(--albastru-deschis); }
.buton.mic { padding: .2rem .65rem; font-size: .82rem; }
.butoane { display: flex; gap: .6rem; flex-wrap: wrap; }
.butoane form { margin: 0; }
.link { background: none; border: 0; font: inherit; color: var(--albastru); cursor: pointer; padding: 0; }

.mesaj { border-radius: 8px; padding: .7rem 1rem; margin-bottom: 1rem; border: 1px solid var(--linie); background: var(--albastru-deschis); }
.mesaj.ok { background: var(--ok-fond); border-color: #b9e2c8; color: var(--ok); }
.mesaj.eroare { background: var(--rau-fond); border-color: #f5c2bd; color: var(--rau); }

.slab { color: var(--slab); }
.mic { font-size: .85rem; }
.pasi { padding-left: 1.2rem; }
.pasi li { margin-bottom: .6rem; }
.cheie { display: inline-block; background: var(--albastru-deschis); padding: .25rem .5rem; border-radius: 5px; font-size: 1.05rem; letter-spacing: .05em; word-break: break-all; }

@media (max-width: 640px) {
  .sus-in { gap: .5rem; }
  .meniu { margin-left: 0; width: 100%; }
  .marca span { display: none; }
  h1 { font-size: 1.3rem; }
  .card { padding: 1rem; }
  .jos { flex-direction: column; }
  /* tabel -> fise pe telefon */
  .tabel.fise thead { display: none; }
  .tabel.fise, .tabel.fise tbody, .tabel.fise tr, .tabel.fise td { display: block; width: 100%; }
  .tabel.fise tr { border-bottom: 1px solid var(--linie); padding: .5rem 0; }
  .tabel.fise tr:last-child { border-bottom: 0; }
  .tabel.fise td { border: 0; padding: .15rem 0; display: flex; justify-content: space-between; gap: 1rem; text-align: right; }
  .tabel.fise td::before { content: attr(data-e); color: var(--slab); font-size: .85rem; text-align: left; }
  .tabel.fise td.titlu-fisa { font-weight: 600; font-size: 1.05rem; justify-content: flex-start; }
  .tabel.fise td.titlu-fisa::before { content: none; }
}