@font-face {font-family: "encode"; src: url("../fonts/Encode_Sans/EncodeSans-VariableFont_wdth,wght.ttf");}


body {
  font-family: encode;
  font-size: 14px; font-weight: 500;
  line-height: 1.2;
  -webkit-font-smoothing: antialiased;
  color: #58666e;
  background-color: #FFF;
}


.schimba-tema {display: inline-flex; align-items: center; cursor: pointer;}
.schimba-tema .dark,
html.tema-dark .schimba-tema .light {
  display: inline-flex;
}

.schimba-tema .light,
html.tema-dark .schimba-tema .dark {
  display: none;
}
.schimba-tema span {
  display: inline-flex; align-items: center; 
  width: 80px; height: 33px;
  margin: -10px 0 0 0;
}
.schimba-tema span:before {
  font: 300 20px/1 var(--mso);
  margin: 0 5px 0 0;
}
.light:before {content: "light_mode";}
.dark:before {content: "dark_mode";}

/* Restul de css pt tema dark in duviana-dark.css */


.header-login {
    position: absolute; top: 0; left: 0; z-index: 5;
    background: #fff;
    width: 100%; height: 90px;
}
.pagina-login .schimba-tema {
    position: absolute; right: 70px; top: 1px;
}
.sigla-login {
  position: absolute; top: 20px; left: 20px; z-index: 10;
}
.nav-lang {
  position: absolute; top: 20px; right: 20px; z-index: 10;
}
.pagina-login {
  background: #eee;
  padding: 100px 0 0 0;
  min-height: 100vh;
}
.pagina-login .header-h1 {margin: 0 0 30px 0; padding: 30px 0 0;}
.pagina-login .header-h1 h5 {
  width: 100%;
  font: 500 18px/1.2 encode;
}
.caseta-login {
  width: 500px;
  background: #fff;
  border-radius: 20px;
  padding: 30px;
}
.caseta-login .form-grup input {height: 45px;}
.caseta-login .but-icon-adauga-user {margin: 0 0 10px 0;}
.micu {padding: 10px 0;}

.app-content-body {
    padding: 0 20px 50px 20px;
}
.navi a .mso {
  font: 300 20px/1 var(--mso);
  color: var(--mov);
}
header .navbar-nav .dropdown-menu {
  position: absolute; top: 51px; right: 0;
}
header .navbar-nav a {
  text-shadow: none !important;
  text-transform: uppercase; font-size: 13px;
}
.nav-limba.show > a {color: var(--mov);}
/* Iconita de utilizator nu mai deschide un meniu derulant, ci duce in /profile:
   `.show` (pus de Bootstrap la deschidere) nu mai apare, deci raspunsul vizual e la hover. */
.nav-user.show > a,
.nav-user-a:hover, .nav-user-a:focus {color: var(--mov);}
/* `.nav-user-i` e pozitionata absolut fata de acest `li`. Contextul il dadea pana acum clasa
   Bootstrap `dropdown` (`position: relative`), scoasa odata cu meniul derulant — fara regula
   asta, desenul s-ar aseza fata de alt stramos si ar pleca din coltul din dreapta sus. */
.nav-user {position: relative;}
.nav-user-a {padding-right: 40px !important;}
.nav-user-a:before {
  position: absolute; top: 9px; right: 0;
  content: "co_present";
  font: 200 30px/1 var(--mso);
  border: 0 !important;
}
header .navbar-nav .nav-item {margin-left: 20px !important;}

.menu-sageata {font-size: 18px; color: #aaa;}

/* Înălțimea rândului de titlu, scrisă O SINGURĂ dată: o folosește și `.header-h1`, și rotița de
   setări, care se întinde peste rând ca să se centreze pe titlu (`.cf-setari-bara`). Două numere
   scrise de mână s-ar fi despărțit la prima schimbare. */
:root {--h-titlu: 70px;}
.header-h1 {
    display: flex; flex-wrap: wrap;
    justify-content: center; align-items: center;
    height: var(--h-titlu);
}
.header-h1 h1 {
  font: 700 18px/1.2 encode;
  text-align: center;
  text-transform: uppercase;
  color: #000;
  margin: 0;
}
/* codul intern al clientului, pe al doilea rand din titlul fisei */
.header-h1 h1 .header-cod {
  font: 400 12px/1.6 encode;
  text-transform: none;
  opacity: .7;
}

.tabul {
    position: relative;
    background: #fff;
    border-radius: 10px;
    padding: 20px;
    margin: 0 0 20px 0;
}


.tabel-flex {
  border: 1px solid #ccc; border-radius: 10px;
  overflow: hidden;
  text-align: left;
}
.tabel-flex-linie {
  position: relative;
  display: flex;
  font: 500 12px/1.2 encode;
  border-bottom: 1px solid #ccc;
  transition: all 0.5s;
}

.tabel-flex-linie > span {
  position: relative;
  flex: 1;
  display: flex; align-items: center; flex-wrap: wrap;
  padding: 10px 15px;
  border-right: 1px solid #ccc;
  /*white-space: nowrap; overflow: hidden;*/
}
span > i.client {
  display: block; width: 100%;
  font: 500 12px/1.1 encode;
  margin: 0 0 2px 0;
}
span > i.project {
  display: block; width: 100%;
  font: 700 12px/1.1 encode;
}

/*.tabel-flex-linie > span:hover {white-space: unset;}*/

.special + .tabel-flex-linie > span {
  border-top: 1px solid #ccc;
}
.tabel-furnizori .tabel-flex-linie > span {overflow: visible;}

.tfl-header {border: 0; overflow: hidden;}
.tfl-header > span {
  border: 0;
  border-bottom: 1px solid var(--mov);
}
.tabel-flex-linie > span:last-child {border-right: 0;}
.tabel-flex-linie:last-child {border-bottom: 0;}
.tabel-flex-linie > span.span-task {white-space: normal;}

.tabel-flex-linie > span.flex2 {flex: 2;}
.tabel-flex-linie > span.flex3 {flex: 3;}
.tabel-flex-linie > span.flex4 {flex: 4;}
.tabel-flex-linie > span.flex5 {flex: 5;}
.tabel-flex-linie > span.flex6 {flex: 6;}
.tabel-flex-linie > span.flex50 {flex: 0 0 50px;}
.tabel-flex-linie > span.flex80 {flex: 0 0 80px;}
.tabel-flex-linie > span.flex100 {flex: 0 0 100px;}
.tabel-flex-linie > span.flex125 {flex: 0 0 125px;}
.tabel-flex-linie > span.flex150 {flex: 0 0 150px;}
.tabel-flex-linie > span.flex180 {flex: 0 0 180px;}

.tabel-totaluri {
    background: #ccfbdd;
    margin: 30px 0;
}
.tabel-totaluri .tabel-flex-linie {font: 700 12px/1.2 encode;}
.tabel-totaluri b {color: var(--mov);}

.tabel-flex-linie > span.span-sigla img {
  width: 80px; height: 50px;
  object-fit: contain; object-position: 0 0;
}
.tabel-flex-linie > span.qe-text {font: 500 12px/1 encode;}

.tabel-flex-linie:hover {background: #eaf3f4;}
.countbadge {
    display: block; width: 16px; height: 16px;
    border-radius: 50%;
    line-height: 15px; font-size: 11px;
    text-align: center;
    position: absolute; right: -7px; top: -7px;
    background-color: #000; color: #FFF;
    z-index: 10;
}
.tabel-flex-linie a {
  text-transform: capitalize;
  color: #000;
  transition: all 0.5s;
}
.tabel-flex-linie a:hover {color: var(--mov);}
.tabel-flex-linie a b {margin: 0 7px 0 0;}
.tabel-flex-linie input[type="text"], 
.tabel-flex-linie input[type="number"], 
.tabel-flex-linie textarea {
  width: 100%;
  background: transparent; color: #000;
  border: 1px solid #aaa; outline: 0;
  font: 500 12px/1 encode;
  padding: 5px;
  border-radius: 5px;
}
.span-ore {position: relative;}

.okay {
  position: absolute; top: -38px; right: -6px;
  display: flex; justify-content: center; align-items: center;
  width: 27px; height: 27px;
  border-radius: 100px; border: 0; outline: 0;
  background: #fff; color: #aaa;
}
.okay:before {
  content: "check";
  font: 400 20px/1 var(--mso);
}
.tabel-total {
  background: aliceblue;
  font-weight: 700; font-size: 14px;
}
.tabel-total > span {border-right-color: transparent; padding: 15px;}
.label-data {
	position: absolute;
	top: 0;
	right: 0;
	background: aliceblue;
	padding: 5px;
	border-bottom: 1px solid #ccc;
	border-left: 1px solid #ccc;
	border-radius: 0 0 0 5px;
	font-size: 15px;
	color: #000;
}

/* Butoane */
.but {
  box-sizing: border-box;
  display: inline-flex; justify-content: center; align-items: center;
  height: 37px;
  border: 1px solid; border-radius: 10px;
  background: transparent;
  font: 500 14px/1 encode;
  padding: 0px 22px; margin: 0 5px 5px 0;
  transition: all 0.5s; cursor: pointer;
  white-space: nowrap;
}
.but-mic {
  height: 27px; font-size: 12px;
  padding: 0 7px; border-radius: 7px;
}
.but-bg-alb {background: #fff;}
/* Buton de acțiune cu contur, în culoarea site-ului (`--mov`), care se umple la trecerea
   mouse-ului. Îl poartă toate cele trei butoane din antetul fișei: înainte cel de
   reactualizare era albastru plin, iar celelalte două albe — trei acțiuni egale arătau ca
   una principală și două secundare, ceea ce nu erau.
   ⚠️ Culoarea e `var(--mov)`, nu o valoare scrisă de mână: accentul se schimbă din setările
   aplicației, iar un portocaliu fix aici ar rămâne în urmă pe o instalare cu altă temă. */
/* ⚠️ Conturul poartă accentul, textul NU: scris în `--mov`, eticheta de 14px ieșea la
   contrast 3,08 pe fundal alb (măsurat) — sub 4,5:1, pragul de lizibilitate pentru text
   normal. Pe bordură aceeași culoare e în regulă, acolo pragul e 3:1. */
.but-contur { background: transparent; color: #2b333a; border-color: var(--mov); }
.tema-dark .but-contur { color: #e4eaf0; }
.but-contur:hover, .but-contur:focus-visible,
.tema-dark .but-contur:hover, .tema-dark .but-contur:focus-visible {
  background: var(--mov); color: #fff; }
/* `.but` are `transition: all .5s`, deci și starea dezactivată s-ar aprinde la hover */
.but-contur:disabled, .but-contur[disabled] { opacity: .45; cursor: not-allowed; }
.but-contur:disabled:hover, .but-contur[disabled]:hover {
  background: transparent; color: var(--mov); }
.but-bg-rosu {
  background: var(--mov); color: #fff;
  border-color: var(--mov);
}
.but-bg-negru {
  background: var(--negru); color: #fff;
  border-color: var(--negru);
}
.but-bg-rosu:hover {
  color: #fff;
  background: var(--negru); 
  border-color: var(--negru);
}

.but-bg-verde {
  background: var(--verde); color: #fff;
  border-color: var(--verde);
}
.but-bg-albastru {
  background: var(--albastru); color: #fff;
  border-color: var(--albastru);
}
.but-bg-verde:hover, 
.but-bg-albastru:hover {
  color: #fff;
  box-shadow: inset 0 -100px 0 0 rgba(0 0 0 / 20%);
}

.but.but-color-rosu {
  border-color: var(--mov);
  color: var(--mov);
}
.but.but-color-rosu:hover {
  background: var(--mov); color: #fff;
}

.but.but-color-gri, 
.but.but-color-negru {
  border-color: var(--negru);
  color: var(--negru);
}
.but.but-color-gri:hover, 
.but.but-color-negru:hover {
  background: var(--negru); color: #fff;
}

.but.but-bg-gri:hover {background: var(--negru); color: #fff; border-color: var(--negru);}

.but i {margin: 0 7px 0 0; font-size: 16px}

.but-icon:before {
  content: "";
  font: 300 24px/1 var(--mso);
  margin: 0 5px 0 -5px;
  transition: all 0.5s;
}
.but-mic.but-icon:before {font-size: 20px;}
.but-icon-fara-text span {margin: 0 0 0 5px;}

.but-icon-fara-text {
  box-sizing: border-box;
  display: inline-flex; justify-content: center; align-items: center;
  background: transparent; border: 0; outline: 0;
  padding: 0; height: 17px;
  transition: all 0.5s; cursor: pointer;
}
.but-icon-fara-text:before {
  content: "";
  font: 300 24px/1 var(--mso);
  margin: 0 4px 0 0;
  transition: all 0.5s;
}
.but-icon-edit:before {content: "edit_note";}
.but-icon-delete:before {content: "delete";}
.but-icon-adauga:before {content: "add_ad";}
.but-icon-adauga-user:before {content: "emoji_people";}
.but-icon-save:before {content: "save";}
.but-icon-save-as:before {content: "save_as";}
.but-icon-unassigned:before {content: "clear_all";}
.but-icon-euro:before {content: "euro";}
.but-icon-bank:before {content: "account_balance";}
.but-icon-transit:before {content: "currency_exchange";}
.but-icon-filter:before {content: "filter_list";}
.but-icon-upload:before {content: "upload_file";}
.but-icon-download:before {content: "download";}
.but-icon-pdf:before {content: "picture_as_pdf";}
.but-icon-cancel:before {content: "delete";}
.but-icon-cancel:before {content: "delete";}
.but-icon-month:before {content: "calendar_month";}
.but-icon-history:before {content: "history";}
.but-icon-see:before {content: "visibility";}
.but-icon-inactiveaza:before {content: "person_off";}
.but-icon-reactiveaza:before {content: "how_to_reg";}
.but-icon-article:before {content: "article";}
.but-icon-menu:before {content: "menu_open";}
.but-icon-menu.open:before {content: "menu";}
.but-icon-info:before {content: "info";}
.but-icon-email:before {content: "mail";}
.but-icon-transform:before {content: "wand_stars";}
.but-icon-transform-factura:before {content: "article_shortcut";}
.but-icon-emite-factura:before {content: "content_paste_go";}
.but-icon-duplicate:before {content: "content_copy";}
.but-icon-inapoi:before {content: "keyboard_arrow_left"; margin: 0 5px 0 -10px;}
.but-icon-add-notes:before {content: "add_notes";}
.but-icon-add-header:before {content: "page_header";}
.but-icon-add-footer:before {content: "page_footer";}
.but-icon-login:before {content: "person";}
.but-icon-password:before {content: "encrypted";}
.but-icon-sageata-jos:before {content: "keyboard_arrow_down";}
.but-icon-sageata-mica-jos:before {content: "arrow_drop_down";}
.but-icon-export:before {content: "battery_android_share";}

.but-icon-sageata-jos.active {background: #000; color: #fff;}
.but-icon-sageata-jos.active:before {transform: rotate(180deg);}

.but-mare {
  width: 100%; height: 45px;
  font-size: 16px;
  text-transform: uppercase;
  padding: 0 40px;
}

.rosu {color: var(--mov);}
.rosu:hover {color: #000;}
.tabel-flex-linie a.rosu {color: var(--mov);}
.but .badge {background: var(--mov); margin: 0 0 0 7px;}
.modal .but-color-gri:hover {color: #fff;}
.modal .but-icon-delete {
    position: absolute; top: -11px; right: 32px;
}

#reset-client-data {margin: 0 0 0 7px;}
/* End Butoane */


.modal-dialog {box-shadow: 0 0 90px 0 rgba(0 0 0 / 25%);}
.modal-body {text-align: left;}
.modal h4 {margin: 0; font-size: 20px;}

.filtreaza-reset {
    display: flex;
    align-items: end;
    padding: 0 0 15px 0;
}
.filtreaza-reset .but {margin: 0 10px 0 0;}


.tabel-header-separat {
  border-bottom: 0; border-radius: 10px 10px 0 0;
}
.buzunar-tabel {
  display: none;
  border: 1px dashed #aaa; border-top: 0; border-radius: 0 0 10px 10px;
  padding: 15px; margin: 0 0 15px 0;
  background: #f0f3f4;
}
.deschide-subtabel {
  display: flex; justify-content: center; align-items: center;
  width: 100%; height: 17px;
  cursor: pointer;
}
.deschide-subtabel:before {
  content: "expand_circle_down";
  font: 300 25px/1 var(--mso);
  transition: all 0.5s;
}
.deschide-subtabel.active:before {transform: rotate(180deg);}
.tabel-in-tabel > div {background: #fff;}
.tabel-flex-grup > .tfl-body {
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
}
.buzunar-tabel.active + div {border-top: 1px solid #ccc;}
.tfl-body.bg-success {background-color: #c6ffec !important; color: #58666e;}

.word-break-break-all {word-break: break-all;}
.tabel-flex-linie > span.span-ok {
  position: relative;
}
.ok {
  position: absolute; top: 0; right: 0;
  display: inline-flex;
  color: var(--mov);
  padding: 2px 5px;
  font: 700 10px/1 encode;
  text-transform: uppercase;
}

p {
  font: 500 14px/1.2 encode;
  padding: 0 0 15px 0; margin: 0;
}

.form-grup {
    position: relative;
    margin: 0 0 15px 0;
}
.form-grup input, 
.form-grup select, 
.form-grup textarea {
    width: 100%; height: 35px;
    background: #fff; color: #000;
    border: 1px solid #a4b0bc;
    border-radius: 5px;
    outline: 0;
    font: 500 14px/1.2 encode;
    padding: 0 10px;
}
.form-grup textarea {
    height: 100px;
    padding: 10px;
    font: 500 14px/1.4 encode;
}
.form-grup input[type="checkbox"],
/* ⚠️ Și `radio` (28.09.2026) — lipsea, iar consecința era o bară de derulare orizontală pe
   toată pagina. Un radio din `.i-checks` e `position: absolute` cu `opacity: 0` (app1.css),
   deci invizibil, dar `.form-grup input { width: 100% }` îl făcea lat cât `.form-grup` —
   1233px pe un rând `lat100` — și, cu `margin-left: -20px`, ieșea din container. Măsurat pe
   `/customers/prospects/add`, ecran neatins de nimeni: pagina 1591px la o fereastră de 1425.
   Singurele locuri unde nu se vedea erau cele cu `.optiune-blocata`, care pune
   `position: relative` pe etichetă și închide absolutul înăuntru. */
.form-grup input[type="radio"] {
  width: initial; height: initial;
  margin: 0 3px 0 0;
}

.but-ca-search {
    position: absolute; top: 0; right: 0;
    border: 0; outline: 0;
    background: #fff;
    display: flex; justify-content: center;  align-items: center;
    height: 100%; height: 35px;
    border: 1px solid #a4b0bc;
    border-radius: 0 5px 5px 0;
}
.but-ca-search:hover {color: var(--mov);}
.but-ca-search:before {
  content: "search";
  font: 300 26px/1 var(--mso);
}
.but-ca-close {
  position: absolute; top: 0; right: 40px;
  border: 0; outline: 0;
  background: transparent;
  display: flex; justify-content: center; align-items: center;
  height: 100%;
}
.but-ca-close:before {
  content: "close";
  font: 300 18px/1 var(--mso);
  padding: 5px;
}
.but-ca-close:hover {color: var(--mov);}
#client-search-container .but-ca-close {top: 10px; right: 0;}

.gestionar {margin: 15px 0;}
.totaluri {
  display: flex; flex-wrap: wrap;
  justify-content: space-between;
  margin: 0 0 30px 0;
}
.total-fara-tva {
  font: 500 18px/1 encode;
}
.total-cu-tva {
  font: 700 18px/1 encode;
  color: var(--mov);
}
.tabel-flex .listing-messages p, 
.tabel-flex .listing-messages span {
  font-size: 14px !important;
}
.tabel-flex .listing-messages {
    padding: 10px 15px !important;
    line-height: 1 !important;
    display: flex;
    height: initial !important;
}



.position-static {position: static;}
.position-relative {position: relative;}

.grid-col2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0px 15px;
    align-items: start;
}
.grid-col3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0px 15px;
}
.grid-col4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0px 15px;
}
.lat100 {grid-column: 1/-1; width: 100%;}
.span2 {grid-column: span 2;}
.span3 {grid-column: span 3;}

.form-adauga {padding: 0 20px;}
.form-adauga h3 {
  position: relative;
  grid-column: 1/-1;
  font: 500 18px/1.2 encode;
  padding: 20px 20px 10px 20px;
  margin: 0 -20px 20px -20px;
  border-bottom: 1px solid #ccc;
}
.form-adauga h3 .but-icon-adauga {
    position: absolute; top: 8px; right: 20px;
}

.setari-companie .remove a {
  position: absolute; top: -6px; right: -6px;
}
.setari-companie .client-information {
  border: 1px solid var(--mov);
  border-radius: 10px;
  padding: 20px;
  margin: 0 0 20px 0;
}
.client-information {
    position: relative;
}
.remove {
  position: absolute; top: 0; right: 0; z-index: 10;
}
.remove a {
  display: inline-flex; justify-content: center; align-items: center;
  width: 30px; height: 30px;
  border: 1px solid var(--rosu); border-radius: 100px;
  background: #fff;
}
.remove a:before {
  content: "remove";
  font: 300 20px/1 var(--mso);
  color: var(--rosu);
}

.x-inchide {
  position: absolute; top: 10px; right: 10px; z-index: 10;
}
.x-inchide:before {
  content: "close";
  font: 300 30px/1 var(--mso);
  padding: 10px;
  cursor: pointer;
}
.x-inchide:hover {color: var(--rosu);}

.form-grup label {
    display: block;
    font: 400 13px/1.2 encode;
    color: #737a97;
    margin: 0 0 5px 0; 
} 
.date-label-click {
	font-weight: bold !important;
	font-size: 16px !important;
	color: #000 !important;
}
.cifrele {gap: 20px;}
.cifre {
  background: aliceblue;
  border-radius: 10px;
  padding: 15px;
}
.cifre strong {
  font: 500 12px/1.2 encode;
  text-transform: uppercase;
}
.cifre .nume {
  font: 600 24px/1 encode;
  text-shadow: 2px 2px 0 #fff;
  color: var(--albastru);
}
.but-adauga-absolute {
  position: absolute; top: -37px; right: 25px;
  border-radius: 10px 10px 0 0;
}

.h3-titlu {
  font: 500 20px/1.2 encode;
  margin: 0 0 10px 0; padding: 0;
}

.titlu-mob {display: none;}

.filtru-taskuri {position: relative;}
.luna-zi {margin: 20px 0 0 0;}

#monthdate, #yeardate , #prevmonthdate {
  display: flex; align-items: center;
  height: 34px;
  font: 500 16px/1.2 encode;
  padding: 6px 15px;
  border: 1px solid #ccc; border-radius: 5px;
  background: transparent; color: #58666e;
  width: 100%;
}
#monthdate:hover, #yeardate:hover , #prevmonthdate:hover {
  background: var(--mov); color: #fff;
  border-color: var(--mov);
}

#monthdate:before, 
#prevmonthdate:before {
  content: "article";
  font: 300 26px/1.2 'Material Symbols Outlined';
  margin: 0 7px 0 0;
}
#prevmonthdate:before {content: "article_shortcut";}

#yeardate:before {
  content: "fact_check";
  font: 300 30px/1.2 'Material Symbols Outlined';
  margin: 0 7px 0 0;
}

.reset-export {
    position: absolute; bottom: 15px; right: 0;
}
.reset-export form {display: inline-flex;}

.butoane-banca-sus {
  display: flex; flex-wrap: wrap; align-items: center;
  margin: 0 0 15px 0;
}
.butoane-banca-sus .but {margin: 0 10px 10px 0;}
.butoane-banca-sus .tl-content {margin: 0 10px 10px 0;}


.butoane-banca-jos {
  display: flex; flex-wrap: wrap; align-items: center;
  margin: 0 0 15px 0;
}
.butoane-banca-jos .but {margin: 0 10px 10px 0;}

.label-cu-data {
  position: absolute; top: 10px; right: 40px;
}
.but-date {margin: 0 -5px 0 7px;}

.tabel-oferta .tfl-body > span {height: initial !important;}
.text-cu-scroll {
    width: 100%;
    border: 1px solid #ccc; border-radius: 5px;
    max-height: 70px;
    overflow: auto;
    padding: 10px;
}
.tabel-oferta#clients-list .listing-messages.no-style-message {
  height: initial !important;
} 

.status-culoare {
  display: inline-flex; width: 200px; height: 30px;
  border-radius: 5px;
  margin: 0 20px 0 0;
}
.span-listate {
  flex-direction: column; align-items: start !important;
}

.span-categ .mso {
  font: 300 20px/1 var(--mso);
}
.span-categ .d-flex {align-items: center;}
.mesaj-mare {
  width: 100%; height: 100px;
  overflow: auto;
}
.meniu-alege {
  align-items: center;
  border: 1px solid #ccc; border-radius: 10px;
  margin: 0 0 15px 0;
}
.meniu-alege > div {
  display: flex; align-items: center;
  padding: 7px 7px 7px 15px;
}
.ma-buton {justify-content: end;}
.ma-buton .but {
  position: relative;
  margin: 0; width: 240px; justify-content: start;
}
.ma-text strong {
    display: inline-flex;
    margin: 0 0 0 7px;
    color: var(--mov);
    border: 1px solid var(--mov);
    border-radius: 5px;
    padding: 3px 7px;
}

.tabel-structura-meniu {margin: 0 20%;}
.tabel-structura-meniu .categorychoose {
  display: flex; flex-wrap: wrap;
  align-items: center;
  margin-bottom: 5px;
  border-radius: 5px;
  transition: all 0.5s;
}
.categorychoose i {margin: 0 5px 0 0;}
.nivel-0 {
  font: 700 18px/1 encode;
  text-transform: uppercase;
  border-bottom: 2px solid #ccc;
  border-radius: 0 !important;
  padding: 17px 10px;
}
.nivel-1 {
  font: 700 16px/1 encode;
  margin-left: 50px;
  background: antiquewhite;
  padding: 12px 10px;
}
.nivel-2 {
  font: 500 14px/1 encode;
  margin-left: 150px;
  background: aliceblue;
  padding: 8px 10px;
}
.nivel-3 {
  font: 500 12px/1 encode;
  margin-left: 200px;
  padding: 5px 10px;
}
.tabel-structura-meniu .categorychoose:hover {
  background: #000 !important; color: #fff;
}
.but-icon2-alege:after {
  position: absolute; top: 50%; right: 12px;
  transform: translateY(-50%);
  content: "arrow_downward_alt";
  font: 300 24px/1 var(--mso);
  transition: all 0.5s;
}
.but-icon2-alege:active, 
.but-icon2-alege.active:active {
  animation: hop 0.5s ease-in-out;
}
@keyframes hop {
  50% {transform: scale(1.05);}
  100% {transform: scale(1);}
}
.but-icon2-alege.active {background: #000; border-color: #000;}
.but-icon2-alege.active:after {transform: translateY(-50%) rotate(180deg);}
.add-menu-form {gap: 25px;}


.paginatie-total {margin: 45px 0 50px 0;}
.paginatie-nr {
    font: 500 14px/1.2 encode;
    color: #4f6578;
    text-align: right;
    padding: 8px;
    border-bottom: solid 1px #d0d4e4;
}
.paginatie {
    display: flex;
    flex-wrap: wrap;
    justify-content: end;
    align-items: center;
    padding: 20px 0;
}
.paginatie li {
    list-style: none;
}
.paginatie li a {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    height: 32px;
    font: 500 16px/1 encode;
    padding: 8px 10px; margin: 0 0 0 10px;
    border: solid 1px transparent;
    border-radius: 7px;
    color: #4f6578; background: transparent;
    transition: all 0.5s;
}
.paginatie li a:hover {background: #eee;}
.paginatie li.active a {
    border-color: var(--mov);
    background: var(--mov);
    color: #fff;
}
.paginatie li a .mso {
    font-size: 24px;
    font-weight: 400;
     color: #4f6578;
}
.paginatie li a.sag, .paginatie li a.sag2 {
    width: 32px;
}

.avertizare {
  background: antiquewhite;
  font: 500 14px/1.2 encode;
  padding: 15px; margin: 0 0 15px 0;
  border-radius: 10px;
}
.form-cu-data button {position: relative; z-index: 10;}

.form-grup .dd-container {width: 100% !important;}
.form-grup .dd-select {
   border-radius: 5px;
   width: 100% !important;
}
.form-grup .dd-selected {padding: 0 10px; line-height: 32px!important;}
.form-grup .dd-selected label {margin: 0;}

.btn-save-grup {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
    grid-column: 1/-1;
    text-align: center;
    border-top: 1px solid #ccc;
    margin: 30px 0 0 0; padding: 10px 0 0 0;
}
.btn-save-grup .but {margin: 5px;}
.form-incarcare {
  grid-column: 1/-1;
}
.form-cu-data button {
    float: right;
    margin: -26px 0 0 0;
}
.form-left, 
.form-right {
    border: 1px solid #ccc;
    border-radius: 10px;
    padding: 20px; margin: 0 0 20px 0;
}
.form-adauga-proiect .grid-col2 {gap: 0 20px;}
.tabel-task-files {margin: 15px 0;}
.form-cu-data {padding: 10px 0;}

.datepicker th {
  font: 700 12px/1 encode;
  padding: 5px;
}
.datepicker td {
  font: 500 12px/1 encode;
  padding: 5px;
}
.perp-uploader {max-height: 200px !important; min-height: 100px !important;}
.go-reset {display: flex; flex-wrap: wrap;}
.go-reset .but {margin: 0 5px 5px 0;}
.datele {
  display: flex; justify-content: space-between;
  margin: 0 0 15px 0;
  font: 500 14px/1.2 encode; color: #000;
}

.legenda-sus {margin: 0 0 15px 0;}
.legenda-sus .rand {display: flex; align-items: center;}
.legenda-sus .mso {
    font: 600 22px/1 var(--mso);
    font-variation-settings: 'FILL' 1;
    margin: 0 5px 0 0;
    color: var(--rosu);
}

.tabel-cheltuieli {overflow: visible; border-color: #999;}
.tabel-cheltuieli .tabel-flex-linie {border-color: #999; border-radius: 10px 10px 0 0;}
.tabel-cheltuieli .tabel-flex-linie > span {border-color: #999; color: #000;}
.termen-depasit {
    position: absolute; top: 50%; left: -11px;
    transform: translateY(-50%);
}
.termen-depasit:before {
    content: "error";
    font: 600 22px/1 var(--mso);
    font-variation-settings: 'FILL' 1;
    margin: 0 7px 0 0;
    color: var(--rosu);
}
.termen-rosu {background: #ffbda3; border-color: #777; color: #000;}
.termen-rosu:hover {background: #e79c7e;}
.termen-rosu > span {border-color: #999; color: #000;}


.qe-text.editable.editable-click,
.qeinterceptor-text.editable.editable-click {
	border-bottom-width: 0px !important;
	border-bottom-style: none !important;
	border-bottom-color: transparent !important;
  text-decoration: underline dotted;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.tabel-flex-linie .editable-click, 
.tabel-flex-linie a.editable-click, 
.tabel-flex-linie a.editable-click:hover {
  text-decoration: underline dotted !important;
  text-decoration-thickness: 1px !important;
  text-underline-offset: 4px !important;
  border-bottom: solid 2px transparent !important;
  border: none !important;
  line-height: 1.3;
}


.butoane-editare {
  display: block; width: 23px;
  color: #fff;
  border: 0; border-radius: 5px;
  cursor: pointer;
  padding: 5px; margin: 0 0 5px 5px;
  font: 400 10px/1 encode;
  transition: all 0.5s;
}
.editable-submit {
  background: var(--mov);
}
.editable-submit:before {content: "OK";}
.editable-cancel {
  background: var(--albastru);
  font-size: 12px;
}
.editable-cancel:before {content: "×";}
.butoane-editare:hover {
  box-shadow: inset 0 -10px 10px 0 rgba(0 0 0 / 50%);
}


.termen-rosu .titlu-mob {color: #777;}

.total-amount{
  display:flex;
  flex-direction: column;   /* <-- asta le pune pe verticală */
  align-items: flex-start;  /* <-- aliniere la stânga */
  justify-content: flex-start; 
  gap: 6px;                 /* spațiu între rânduri */
    border-bottom: 1px solid #999;
  border-radius: 0 0 10px 10px;
  background: var(--mov); color: #fff;
}

.total-amount div{
  display:flex;             /* span + strong pe aceeași linie */
  align-items:center;
  width: 100%;              /* rând complet */
}
.total-amount span {
    font: 500 16px/1 encode;
    padding: 0 7px 0 0;
}

.total-amount strong {
    font: 700 16px/1 encode;
}

.total-partial {
  display: flex; flex-wrap: wrap; align-items: center;
  padding: 5px 15px;
  border-bottom: 1px solid #999;
  background: #cfeff9; color: #000;
}
.total-partial span {
    font: 500 14px/1 encode;
    padding: 0 7px 0 0;
}
.total-partial strong {
    font: 700 14px/1 encode;
    color: var(--mov);
}
.total-partial:before {
  content: "arrow_downward";
  font: 300 20px/1 var(--mso);
  margin: 0 7px 0 0;
}

h3 {
  font: 500 20px/1.2 encode;
  margin: 0 0 15px 0; padding: 0;
}
h4 {
  font: 500 24px/1.2 encode;
  margin: 0 0 15px 0; padding: 0;
}
.tfl-footer {font: 700 12px/1 encode; background: antiquewhite;}
.tfl-footer > span {border-color: transparent;}

.tabel-report-modal {margin: 0 0 15px 0;}

.modal-dialog {
    border-radius: 20px;
    overflow: hidden;
    width: calc(100% - 300px);
    max-width: initial;
    text-align: center;
}
.modal-report-user .modal-content {text-align: left;}
.modal-report-user .tabel-flex {margin: 0 0 30px 0;}
.modal-report-user h3 {
  font-size: 30px;
}
.modal-report-user h4 {
  display: inline-flex;
  border: 1px solid #ccc; border-radius: 5px;
  padding: 10px;
  font-size: 20px;
}
.modal-report-user h5 {
  font-size: 20px;
  color: var(--albastru);
}

.modal-report-user h6 {
  display: flex; align-items: center;
  font-size: 16px;
  color: var(--mov);
}
.modal-report-user h6:before {
  content: "arrow_forward";
  font: 300 20px/1 var(--mso);
  margin: 0 5px 0 0;
}
.mob {display: none;}


.dashboard-cards {
    margin: 0 0 30px 0;
}
.dashboard-card {
    position: relative;
    background: aliceblue;
    padding: 20px;
    border-radius: 10px;
}
.card-value {
    display: inline-flex;
    font: 700 24px/1 encode;
    padding: 10px 20px;
    margin: 0 0 20px 0;
    border-radius: 5px;
    background: #fff;
    box-shadow: 5px 5px 0 0 rgba(0 0 0 / 4%);
}
.card-title {
    font: 500 20px/1.2 encode;
    text-transform: uppercase;
    color: var(--rosu);
}
.card-stats {
    font: 500 14px/1.2 encode;
}
.dashboard-card i {
    position: absolute;
    top: -10px;
    left: -6px;
    background: #333;
    color: #fff;
    border-radius: 100px;
    padding: 5px;
    font-size: 20px;
}
.dash-costuri {
  display: flex; flex-wrap: wrap;
  justify-content: space-between; align-items: center;
}

.tabel-flex-linie .span-price-ron input {width: calc(100% - 35px); margin: 0 5px 0 0;}


.culoare {
  position: absolute; top: 0; left: 0; z-index: 10;
  display: block; width: 14px;
  height: 100%;
}
.culoare .material-symbols-outlined {
  position: absolute; top: 0; left: 14px; z-index: 10;
  font-size: 16px;
}


.input-okay {position: relative;}
.input-okay .okay {top: -11px;}

.dash-costuri {
  padding: 15px; 
  border: 1px solid #ccc; border-radius: 10px;
  margin: 20px 0;
}
.dash-costuri h4 {margin: 0;}
.dash-costuri .but-icon-menu:before {color: var(--mov);}
.dash-costuri .but-icon-menu:hover:before {color: #fff;}
.dash-costuri .but-icon-menu.open:before {color: var(--mov);}
.dash-costuri .but-icon-menu.open:hover:before {color: #fff;}
.dashboard .tabel-flex {margin: 0 0 20px 0;}
.interceptor-news {
  position: relative;
  padding: 36px 0 0 0;
}
.interceptor-news .but-icon-adauga {
  position: absolute; top: 0; right: 20px;
  border-radius: 10px 10px 0 0;
  text-transform: none;
}
.tabel-flex-linie > span.span-unanswered {display: block; padding-left: 30px;}

.exclamare {
  position: absolute; top: -10px; left: 19px; z-index: 10;
  display: flex; justify-content: center; align-items: center;
  width: 26px; height: 26px; text-align: center;
  border-radius: 100px;
  background: #e1390e; color: #fff;
  font: 500 16px/1 encode;
}
.unanswered {
  display: block;
  color: var(--mov);
  margin: 0 0 5px 0;
}
.interceptor-table b, 
.interceptor-table a b {
  display: block;
  margin: 0 0 3px 0;
}
.interceptor-table .tabel-flex-linie > span {
  display: block;
  white-space: initial;
}
.span-www {word-break: break-all;}
.nume-email-tel .email-editable {
  display: block;
  margin: 0 0 9px 0;
}
strong, b {font-family: encode; font-weight: 700;}
.nume-email-tel .tel {
  display: block; margin: 0 0 5px 0;
}

.tabel-interceptor-rapoarte .flex {word-break: break-all;}
.tabel-interceptor-rapoarte > .tfl-body > span:nth-of-type(1) {min-height: 40px; padding-left: 20px;}

div[style="background-color:#0080c0"], 
div[style="background-color:#0080c0"] a, 
div[style="background-color:#525252"], 
div[style="background-color:#525252"] a {color: #fff;}

.span-status .but-mic {margin: 10px 0;}

.tabel-flex-linie > span.span-culoare {padding-left: 25px;}

#preferencesform, #preferencesformcosts {display: flex; align-items: center;}
#preferencesform label , #preferencesformcosts label {
  font: 500 14px/1.2 encode;
  margin: 0;
}
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-primary, 
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary {
  background: var(--mov) !important;
}
.bootstrap-switch {margin: 0;}
.bootstrap-switch-container {width: 135px;}
.bootstrap-switch-container span {width: 45px !important;}


.client-score-card {
  border: 1px solid #ccc;
  padding: 20px; margin: 20px 0;
  border-radius: 10px;
}
.progress {height: 26px !important; border-radius: 10px; overflow: hidden;}
.progress-bar {background-image: none; }
.progress-bar-primary {background-color: #7266ba;}

.progress-bar-info {background-color: #23b7e5;}
.progress-bar-success {background-color: #27c24c;}
.progress-bar-warning {background-color: #fad733;}
.progress-bar-danger {background-color: #f05050;}
.progress-bar-black {background-color: #1c2b36;}
.progress-bar-white {background-color: #fff;}

.scor-client {padding: 0 0 10px 0;}
.arata-text {
  display: none;
  padding: 10px 0 20px 0;
}
.h3-special {
    font: 700 16px/1.2 encode;
    text-transform: uppercase;
    margin: 30px 0 15px 0;
    text-align: center;
    color: var(--mov);
}
.h4-special {
  grid-column: 1/-1;
    font: 600 20px/1.2 encode;
    border-bottom: 1px solid #ccc;
    padding: 0 0 10px 0;
    margin: 0 0 25px 0;
}
.account-form .tabul.grid-col2 {
  gap: 0 40px;
}
.cecbox label {
  display: inline-flex; align-items: center;
}
.cecbox .i-checks > i {
    margin-right: 30px;
    margin-left: 6px;
}

.message-for-factura {
    display: flex; align-items: center;
    grid-column: 1/-1;
    background-color: #ffcccc; 
    border: 1px solid #ff8888; 
    color: #333;
    padding: 10px;
    margin: -10px 0 20px 0;
    border-radius: 5px;
}
.message-for-factura span {
    font-size: 14px;
    display: inline-block;
}
.message-for-email {
   display: flex; align-items: center;
    grid-column: 1/-1;
    background-color: #90EE90;
    border: 1px solid #228B22;
    color: #333;
    padding: 10px;
    margin: -10px 0 20px 0;
    border-radius: 5px;
}
.message-for-factura i {display: inline-flex; margin: 0 7px 0 0;}
.message-for-email i {display: inline-flex; margin: 0 7px 0 0;}


.contactperson-information {
    position: relative;
    margin: 0 0 40px 0;
    border: 1px solid #ccc; border-radius: 10px;
    padding: 15px;
}

.contactperson-information h5 {
    grid-column: 1/-1;
    font: 600 14px/1.2 encode;
    margin: 0 0 15px 0;
    text-transform: uppercase;
    color: var(--albastru);
}
.contactperson-information .remove {top: -8px;}


.nav-pills {
  display: flex; flex-wrap: wrap;
  align-items: center;
  width: 100%;
  margin: 0 0 20px 0; padding: 0;
  border-bottom: 1px solid #ccc;
}
.nav-pills .nav-item {margin-left: 0 !important;}
.nav-pills .nav-link.active, 
.nav-pills .show > .nav-link , 
.nav-pills .nav-link:hover,
.nav-pills .nav-link:focus {
	
}
.nav-pills .nav-link.active, 
.nav-pills .show > .nav-link {
    color: #fff;
    background-color: var(--mov);
    border-color: var(--mov);
    border-bottom-color: var(--mov);
    transition: all 0.5s;
}

.nav-pills .nav-link {
	color: var(--negru);
	padding: 7px 15px; margin: 0 5px 0 0;
	font: 500 14px/1 encode;
  border: 1px solid #ccc; border-radius: 5px 5px 0 0;
  border-bottom-color: transparent;
  transition: all 0.5s;
}
.nav-pills .nav-link:hover {background: #f6f6f6;}
.nav-pills .nav-link.active:hover {background: var(--mov);}
.header-produse {display: flex; flex-wrap: wrap; margin: 0 0 20px 0;}
.header-produse .but {margin: 0 5px 5px 0;}

.form-left h3, 
.form-right h3 {
  grid-column: 1/-1;
  margin: 0 0 25px 0;
  color: var(--mov);
}

.incarcare-poze {
  display: flex; flex-wrap: wrap;
}

.incarcare-poze .fg-upload {width: 100%;}
.form-grup input.filestyle {padding: 5px 10px;}
.img-incarcata {
  display: inline-flex;
  margin: 10px 10px 0px 0;
}
.img-incarcata img {
  display: flex;
  width: 100px; height: 100px; object-fit: cover;
  border: 1px solid #aaa; border-radius: 5px;
  overflow: hidden;
}
.sigla-endd-print {
  object-fit: cover; height: 80px;
}

.global-menu.dropdown-menu > li > a {
  display: block;
  font-size: 12px; padding: 5px;
}
.global-menu.dropdown-menu > li > a:hover {
  background: var(--mov); color: #fff;
}

.bootstrap-filestyle .btn-primary {
    box-sizing: border-box;
    display: inline-flex; justify-content: center;  align-items: center;
    height: 37px;
    border: 1px solid; border-radius: 10px;
    background: transparent;
    font: 500 14px/1 encode;
    padding: 0px 22px;
    transition: all 0.5s;
    cursor: pointer;
    white-space: nowrap;
    border-color: var(--mov);
    color: var(--mov);
    margin: 0 0 0 5px;
}

.mesaj-no {padding: 20px;}

.cu-sageata {
  display: flex; align-items: center;
  font: 500 14px/1.2 encode;
}
.sageata1 {font-weight: 700; color: var(--mov);}
.sageata2 {padding: 0 0 0 20px;}
.sageata3 {padding: 0 0 0 40px;}
.cu-sageata:before {
  font: 20px/1 var(--mso);
  margin: 0 5px 0 0;
}
.sageata1:before {content: "arrow_forward";}
.sageata2:before {content: "trending_flat";}
.sageata3:before {content: "subdirectory_arrow_right";}

.legenda-sus-dr {
  position: absolute; top: 15px; right: 20px;
  display: flex;
}
.titlu-stare {
    font: 500 16px/1.2 encode;
    margin: 0 0 20px 0;
}

.butoane-status {
  grid-column: 1/-1;
  margin: 10px 0 15px 0;
}
.butoane-status button {
  position: relative;
  border: none;
  border-radius: 5px !important;
  color: #fff;
  text-transform: uppercase;
  font: 500 12px/1 encode;
  margin: 0 5px 10px 0; padding: 0 20px 0 7px;
  box-shadow: none;
}
.butoane-status.project-management button {
	color:#000;
}
.butoane-status button.toate {background: #aaa;}
.butoane-status button .badge {
  position: absolute; top: -9px; right: -5px;
  background: #555;
  font: 500 12px/1 encode;
  color: #fff;
}
.butoane-status button:hover {box-shadow: inset 0 -100px 0 0 rgba(0, 0, 0, 0.2) !important;}
.download-archive-container {margin: 0 0 15px 0;}
.produse-message {
  display: block;
  padding: 20px;
}
.produse-message h3 {font-size: 14px;}
span .data {
  display: block; width: 100%;
}
span .ora {
  display: block; width: 100%;
  opacity: 0.5;
}
span a .client {
  font: 700 12px/1 encode;
  color: var(--mov);
}
span a .nume {
  margin: 2px 0 0 0;
}

/* Tabul „Istoric mesaje" al clientului (01.10.2026, cererea utilizatorului): numărul facturii e
   link spre document, iar coloana „Trimis de" spune operatorul sau „Automat".
   ⚠️ `.tabel-flex-linie a` pune `color: #000`, deci fără regula asta linkul nu s-ar fi deosebit
   de textul de lângă el. Accentul se închide cu `color-mix`, ca numărul din listele de facturi:
   `var(--mov)` curat dă contrast 3,08 pe alb, sub pragul de 4,5:1 pentru text normal.
   ⚠️ `text-transform: none` anulează `capitalize` din regula de bază — numerele de document se
   scriu exact cum sunt („ProformaENDD_00231", nu „Proformaendd_00231"). */
.tabel-flex-linie a.im-factura {
  color: color-mix(in srgb, var(--mov) 72%, #000);
  text-transform: none;
}
.tabel-flex-linie a.im-factura:hover {text-decoration: underline;}
/* „Automat" și „Utilizator șters" sunt stări, nu nume de oameni: gri, ca `.ora` de lângă ele.
   Scrise cu `.tabel-flex-linie` în față ca să nu fie bătute de vreo regulă de `span` din tabel;
   pe tema întunecată rămân culoarea temei (`.tema-dark span` are `!important`), unde oricum nu
   se confundă cu un link. */
.tabel-flex-linie .im-automat,
.tabel-flex-linie .im-sters {color: #66727f;}

.mesajul {
  background: #f6f6f6;
  padding: 20px;
  margin: 0 20px 0px 20px;
  border-radius: 0 0 20px 20px;
  border: 1px dashed #aaa;
  border-top: 0;
}
.mesajul p {font-size: 12px;}
.div-reset {padding: 20px 0 0 0;}


.nav-tabs {
  display: flex; flex-wrap: wrap;
  align-items: center;
  width: 100%;
  margin: 0 0 20px 0; padding: 0;
  border-bottom: 1px solid #ccc;
}

.butoane-sus {margin: 0 0 20px 0;}
/* Rand de butoane aliniat la varf. `.but` e `inline-flex` cu `vertical-align: baseline`, iar
   linia de baza a unui inline-flex e cea a primului element din el: butoanele CU iconita ies
   astfel cu ~7px mai sus decat cele fara, si randul apare in trepte. Clasa se pune explicit,
   ca sa nu schimbe cele 27 de sabloane care folosesc deja `.butoane-sus`. */
.butoane-aliniate .but {vertical-align: top;}
/* Comutatorul de temă ca buton în rândul de sus (pagina de profil). Logica si schimbarea
   etichetei raman cele din `.schimba-tema`; aici doar anulam cutia gandita pentru bara de
   sus (80x33 si marginea negativa), care intr-un `.but` ar impinge textul afara. */
.butoane-aliniate .schimba-tema span {width: auto; height: auto; margin: 0;}
.butoane-aliniate .schimba-tema span:before {font-size: 17px;}
.factura-print {
    border: 1px solid #aaa; border-radius: 10px;
    padding: 20px;
}
.factura-print h3 {
  font: 700 20px/1.2 encode;
}
.factura-print h4 {
  font: 500 16px/1.2 encode;
}
.tabel-factura {width: 100%; min-width: 700px;}
.tabel-factura th, 
.tabel-factura td {
    padding: 8px 15px;
    border-top: 1px solid #aaa;
}
.sigla-factura {
  width: 150px; max-height: 150px;
}


.modal-mesaj-interceptor .modal-dialog {
  max-width: 80%;
  text-align: left;
}
.note-editor.note-frame .note-editing-area .note-editable {
    text-align: left;
}
.modal-mesaj-interceptor .modal-header {padding: 10px 50px;}
.modal-mesaj-interceptor .modal-body {padding: 10px 50px;}
.modal-mesaj-interceptor .modal-footer {padding: 10px 50px;}
#interceptor-see-reply {text-align: left;}
#interceptor-see-reply .form-grup {text-align: left;}

#interceptor-reply .modal-full {max-width: 90%; box-shadow: 0 0 100px 0;}

.form-grup .label-cu-info {
  position: relative;
  display: inline-flex;
  padding: 0 32px 0 0;
}
.form-grup .checkbox {margin: 10px 0 15px 0;}

.form-zone .checkbox {margin: 0px 0 3px 0;}
.form-zone .i-checks span {
  display: inline-flex; padding: 5px; margin: 0;
  border-radius: 5px;
}
.form-zone .i-checks.disabled {
  opacity: 0.5;
}

.tab-acordeon {
  border: 1px solid #a4b0bc; border-radius: 10px;
  margin: 0 0 20px 0;
}
.tab-acordeon.active {border-color: var(--mov);}
.tab-ascuns {
  display: none;
  padding: 0px 20px 5px 20px;
}
.dupa-tabel {margin: 20px 0 0 0;}
.tab-h3-click {
  position: relative;
  font: 700 16px/1.2 encode;
  cursor: pointer;
  padding: 20px 55px 20px 20px; margin: 0;
}
.active .tab-h3-click {color: var(--mov);}
.tab-h3-click:after {
  position: absolute; top: 50%; right: 20px;
  transform: translateY(-50%);
  transition: all 0.5s;
  content: "expand_circle_down";
  font: 30px/1 var(--mso);
  font-variation-settings:
    'FILL' 1,  
    'wght' 400,
    'GRAD' 0,
    'opsz' 48;
}
.active .tab-h3-click:after {
  transform: rotate(180deg);
  transform-origin: center; margin-top: -15px;
}

.token {
  border: 1px solid #ccc;
  border-radius: 5px;
  margin: 0 0 15px 0;
  background: #fff9e4;
}
.token h4 {
  position: relative;
  display: flex; flex-wrap: wrap;
  align-items: center;
  font: 700 14px/1.2 encode;
  padding: 10px 20px; margin: 0;
  cursor: pointer;
}
.token h4 .icon:after {
  font: 400 20px/1 var(--mso);
  margin: 0 0 0 7px;
}
.token h4 .icon-valid:after {content: "check_circle"; color: var(--verde);}
.token h4 .icon-invalid:after {content: "cancel"; color: var(--rosu);}
.token h4:before {
  position: absolute; top: 50%; right: 12px;
  transform: translateY(-50%);
  content: "keyboard_arrow_down";
  font: 400 30px/1 var(--mso);
  transition: all 0.5s;
}
.token.active h4:before {transform: rotate(180deg); margin-top: -18px;}
.token .ascuns {
  display: none;
  padding: 0 20px 10px 20px;
}
.token p {
  display: flex; flex-wrap: wrap;
  align-items: center;
  padding: 0 0 5px 0; 
}
.tok-linie span {display: inline-flex; width: 150px;}
.tok-linie em {font-style: normal; margin: 0 0 0 7px;}
.tok-linie:before {
  font: 350 20px/1 var(--mso);
  margin: 0 7px 0 0;
}
.tok-generat:before {content: "wand_stars";}
.tok-expira:before {content: "hourglass_disabled";}
.tok-valabil:before {content: "event_available";}


.buton-info {position: absolute; top: -2px; right: 0;}
.buton-info .icon {
    display: inline-flex; width: 24px; height: 24px;
    background: var(--mov);
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-image: url(/img/chat_info_24dp_1F1F1F_FILL1_wght400_GRAD0_opsz24.svg);
    transition: all 0.5s;
}
.colect-accounts {
  display: inline-flex; margin: 0 20px 10px 0;
}
.colect-accounts .i-checks > i {margin-right: 7px;}
.datepicker-days {
  border: 1px solid #a4b0bc; border-top: 0;
  border-radius: 0 0 10px 10px;
  padding: 0 0 10px 0;
}

.contactperson-information:nth-last-of-type(1), 
.contactperson-information:nth-last-of-type(2), 
.contactperson-information:nth-last-of-type(3) {margin: 0;} 
h5 {
    font: 500 12px/1.2 encode;
    text-transform: uppercase;
}
.i-checks-grup {
  display: flex; flex-wrap: wrap; align-items: center;
}
.i-checks-grup .i-checks {margin: 0 10px 10px 0;}
.i-checks-grup .i-checks > i {margin-left: 3px;}
.modal-800 .modal-dialog {width: 800px;}

.buton-info:hover .icon {background: var(--rosu);}
span[data-tooltip]:hover::after {
  content: attr(data-tooltip);
  position: absolute; top: 30px; left: 0; z-index: 100;
  width: 200px;
  background: var(--menu);
  color: #fff;
  padding: 10px;
  border-radius: 5px;
  font-size: 13px;
}

span[data-tooltip]:hover::before {
  position: absolute; top: 10px; left: 3px;
  content: "arrow_drop_up";
  font: 300 36px/1 var(--mso);
  color: var(--menu);
  transition: all 0.5s;
  font-variation-settings:
    'FILL' 1,  
    'wght' 400,
    'GRAD' 0,
    'opsz' 48;
}
.popover {top: 60px; left: initial; right: 20px;}

.pagina-creare-cont .tabul {width: 1200px; margin: 0 auto 30px auto;}

.autoemail-box {
	margin-top: 10px;
}

.autoemail-title {
	display: block;
	font-weight: 600;
	margin-bottom: 8px;
	color: #4a5568;
}

.autoemail-inner {
	background: #fff5ce;
	border: 1px solid #f0d98a;
	border-radius: 8px;
	padding: 12px 14px;
}

.autoemail-label {
	display: block;
	cursor: pointer;
	margin: 0;
}

.autoemail-label input[type="checkbox"] {
	margin-right: 8px;
	vertical-align: middle;
}

.autoemail-label span {
	font-weight: 600;
	color: #2d3748;
}

.autoemail-label small {
	display: block;
	margin-top: 6px;
	color: #6b7280;
	font-size: 12px;
	line-height: 1.4;
}


/* Randurile si celulele raman `visible`: casetele de explicatie (codul ANAF, starea,
   trimiterea, avizele) ies din celula lor si n-au voie sa fie taiate.
   ⚠️ TABELUL insa NU mai e in lista (01.10.2026, cererea utilizatorului): cu `overflow:
   visible` pe el, ce nu incapea in container nu se putea nici vedea, nici derula — `body` are
   `overflow-x: hidden`, deci coloana „Actiuni" ramanea pur si simplu in afara ecranului la
   1600px (masurat: x = 1664, fereastra 1585). Acum tabelul deruleaza pe orizontala, ca orice
   tabel lat din aplicatie, cu bara vizibila si colorata (vezi mai jos, langa `.table-responsive`).
   ⚠️ Regula asta exista pentru vechiul selector de stare a platii (`.qe-input`, un dropdown
   Bootstrap care trebuia sa iasa din tabel). Din 01.10.2026 acolo e un `<select>` nativ, pe
   care browserul il deseneaza oricum in afara paginii, deci tabelul nu mai are de ce sa fie
   `visible`. */
#invoices-list .tabel-flex-linie,
#invoices-list .tfl-body,
#invoices-list .flex,
.fa-tabel .tabel-flex-linie,
.fa-tabel .tfl-body,
.fa-tabel .flex {
	overflow: visible !important;
}
#invoices-list,
.fa-tabel {
	overflow-x: auto;
}


#invoices-list .qe-input,
#invoices-list .dropdown-menu,
.fa-tabel .qe-input,
.fa-tabel .dropdown-menu {
	z-index: 9999;
}

.header-actions {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap; /* ca să nu se spargă pe ecrane mici */
}

.header-actions .form-grup {
	display: flex;
	gap: 10px;
}

.quick-status-filters {
	display: flex;
	align-items: center;
}


.but.but-mic.status-interceptor.status-pm {
	background-color: cyan;
} 



/* form section accordion */
.tabul.acc-collapsed > * { display: none !important; }
.tabul.acc-collapsed > .acc-first-h4 { display: block !important; }
.h4-special.acc-toggle { cursor: pointer; -webkit-user-select: none; user-select: none; }
.h4-special.acc-toggle .acc-icon { transition: transform .25s ease; font-size: 12px; color: #888; margin-left: 8px; vertical-align: middle; }
/* Lămurire scurtă lângă titlul unei secțiuni („informații care apar pe factură…"). Mai mică și
   mai ștearsă decât titlul, ca să nu concureze cu el; nu e italic, deși e un `<i>`. */
.h4-special .h4-paranteza { font: 400 13px/1.3 encode; font-style: normal; color: #6b7785;
                            margin-left: 6px; white-space: normal; }
.h4-special.acc-open .acc-icon { transform: rotate(180deg); }



.message-emails {
	font-size: 16px;
	margin: 10px;
	padding: 20px;
	color: red;
}

/* ═══════════════════════════════════════════════════════════
   Bandă de alertă în capul conținutului (banner licență)
   ═══════════════════════════════════════════════════════════ */

.custom-alert {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: #fff8e1;
    border-left: 4px solid #f59e0b;
    border-bottom: 1px solid #fde68a;
    padding: 10px 20px;
    font: 500 13px/1.3 encode;
    color: #78350f;
}
.custom-alert-body {
    display: flex; align-items: center; gap: 8px;
    flex: 1; min-width: 0;
}
.custom-alert-icon {
    font-size: 20px !important;
    color: #d97706;
    flex-shrink: 0;
}
.custom-alert-text { word-break: break-word; }
.custom-alert-text strong { color: #92400e; }

.custom-alert-actions {
    display: flex; align-items: center; gap: 8px; flex-shrink: 0;
}
.custom-alert-close {
    background: none; border: none; cursor: pointer;
    color: #d97706; padding: 2px;
    display: flex; align-items: center;
    border-radius: 4px;
    transition: background .15s, color .15s;
}
.custom-alert-close .mso { font-size: 20px !important; }
.custom-alert-close:hover { background: #fde68a; color: #92400e; }

/* ═══════════════════════════════════════════════════════════
   Notificări — pagina /notifications
   ═══════════════════════════════════════════════════════════ */

/* Badge număr din titlul h1 */
.notif-count-badge {
    display: inline-block;
    background: #dc2626; color: #fff;
    font-size: 12px; font-weight: 700; line-height: 1;
    padding: 3px 8px; border-radius: 10px;
    vertical-align: middle; margin-left: 8px;
}

/* Toolbar filtru + acțiuni */
.notif-toolbar {
    display: flex; align-items: center;
    justify-content: space-between; flex-wrap: wrap;
    gap: 8px; padding: 12px 20px;
}
.notif-toolbar-left  { display: flex; align-items: center; gap: 6px; }
.notif-toolbar-right { display: flex; align-items: center; }
.notif-toolbar .but  { margin: 0; }

/* Conținut notificări */
.notificari-pagina { padding: 0 20px 40px; }

.notif-grup-titlu {
    display: flex; align-items: center; gap: 8px;
    font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .07em; color: #94a3b8;
    padding: 10px 4px 8px; border-bottom: 1px solid #e2e8f0;
    margin-bottom: 2px;
}
.notif-grup-count {
    background: #e2e8f0; color: #64748b;
    font-size: 10px; font-weight: 700;
    padding: 1px 7px; border-radius: 10px; line-height: 1.6;
}

/* Rând — grid 3 coloane: icon | conținut | timp+check */
.notificarea {
    display: grid;
    grid-template-columns: 42px 1fr auto;
    align-items: start;
    gap: 0 12px;
    padding: 10px 12px 10px 11px;
    border-radius: 7px;
    margin-bottom: 3px;
    background: #fff;
    border: 1px solid #e9ecef;
    border-left: 3px solid #cbd5e1;
    transition: background .1s;
}
.notificarea.necitita {
    background: #f5f8ff;
    border-color: #dce8ff;
}
.notificarea:hover          { background: #f8fafb; }
.notificarea.necitita:hover { background: #eef3fc; }

.notif-icon-col { padding-top: 3px; }
.notif-icon-wrap {
    width: 38px; height: 38px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
}
.notif-icon-wrap .mso { font-size: 20px !important; }

.notif-body { min-width: 0; padding: 1px 0; }
.notif-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 4px; }

.notif-badge-tip {
    display: inline-block; color: #fff;
    font-size: 10px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .04em; padding: 2px 7px;
    border-radius: 3px; line-height: 1.6; white-space: nowrap;
}
.notif-sender { font-size: 12px; color: #64748b; font-weight: 500; }
.notif-mesaj  { font-size: 13px; color: #1e293b; line-height: 1.45; word-break: break-word; }
.notif-mesaj a { color: #1e293b; text-decoration: none; }
.notif-mesaj a:hover { color: #2563eb; text-decoration: underline; }

/* Coloana dreaptă: timp stivuit deasupra butonului */
.notif-right {
    display: flex; flex-direction: column;
    align-items: flex-end; gap: 6px;
    min-width: 74px; padding-top: 3px;
}
.notif-time { font-size: 11px; color: #94a3b8; white-space: nowrap; text-align: right; }

.notif-btn-citit {
    background: none;
    border: 1px solid #e2e8f0; border-radius: 50%;
    width: 28px; height: 28px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; color: #94a3b8;
    transition: border-color .15s, background .15s, color .15s;
    padding: 0;
}
.notif-btn-citit .mso { font-size: 16px !important; }
.notif-btn-citit:hover { background: #dcfce7; border-color: #22c55e; color: #16a34a; }

.notif-empty {
    text-align: center; padding: 64px 20px;
    display: flex; flex-direction: column; align-items: center; gap: 10px;
}

/* ═══════════════════════════════════════════════════════════
   Header — bell icon notificări
   ═══════════════════════════════════════════════════════════ */

.nav-notif-item {
	position: relative;
	display: inline-flex;
	align-items: center;
	cursor: pointer;
}
.nav-bell-link {
    position: relative;
    display: flex !important;
    align-items: center;
    padding: 0 8px !important;
    line-height: 1;
}
.nav-bell-mso   { font-size: 22px !important; vertical-align: middle; }

/* ---- pictogramele SVG din bara de sus (img/ui/), doar pe desktop ----
   Puse ca MASCĂ, nu ca <img>: așa își iau culoarea din `color`, deci merg mai departe și
   tema întunecată, și accentul --mov, și roșul pulsând al microfonului cât înregistrează.
   Pe telefon rămân ligaturile Material de până acum, neatinse.
   ⚠️ Fișierele din img/ui/ trebuie urcate pe live odată cu șablonul: la mască, un fișier
   lipsă nu lasă nimic în loc (spre deosebire de <img>, care măcar arată că e rupt). */
.nav-svg {
    width: 22px; height: 22px;
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-position: center;  mask-position: center;
    -webkit-mask-size: contain;     mask-size: contain;
    vertical-align: middle;
}
.nav-svg-bell {
    display: inline-block;
    -webkit-mask-image: url('../img/ui/bell.svg');
    mask-image: url('../img/ui/bell.svg');
    color: var(--mov);
    transition: color .2s;
}
/* la trecerea cu mouse-ul se innegreste; pe tema intunecata negrul ar disparea in fundal,
   deci acolo raspunsul e simetric — alb (vezi duviana-dark.css) */
.nav-bell-link:hover .nav-svg-bell,
.nav-bell-link:focus .nav-svg-bell { color: #000; }
/* Ligatura Material a clopotelului nu se mai foloseste nicaieri: desenul e acum si pe telefon. */
.nav-bell-mso { display: none; }
@media (min-width: 768px) {
    /* Banda reala a barei e de 50px (`.navbar-collapse`), acolo unde stau textele si iconita
       de utilizator. `ul`-ul se intinde insa la 61px dupa cel mai inalt element, iar un `li`
       centrat acolo cobora clopotelul cu 6px sub toate celelalte. Aceeasi regula la microfon,
       in voice-command.css. Cifra ramane pozitionata fata de `.nav-bell-link`, deci o urmeaza. */
    .nav-notif-item { height: 50px; align-items: center; }
}

/* ---- clopotelul de pe telefon (templates/header.tpl, blocul `.navbar-header`) ----
   Buton propriu, ca sa nu mai fie nevoie de rotita care deschidea `.navbar-collapse`.
   Acelasi desen si aceeasi cifra ca pe desktop; id-ul badge-ului difera, ca sa ramana unul
   singur `nav-notif-badge` pentru scriptul care pune numarul in titlul paginii.
   Afisarea o face `visible-xs` din Bootstrap, ca la celelalte butoane de aici.
   E ancora, nu buton, deci nu primeste spatierea pe care `.navbar-header > button` o da
   celorlalte: `padding-top` o compenseaza, ca desenul sa stea pe aceeasi linie cu ele. */
.nav-bell-m {
    position: relative;
    padding: 12px .35rem 0;
    line-height: 1;
}
.nav-bell-m .nav-svg-bell,
.navbar-header .nav-mic-btn .nav-svg-mic { width: 24px; height: 24px; margin-top: 5px; }
.nav-bell-m .nav-notif-badge { top: 20px; right: -1px; }
.nav-notif-badge {
    position: absolute;
    top: 5px; right: 2px;
    background: #dc2626; color: #fff;
    font-size: 9px; font-weight: 700; line-height: 1;
    min-width: 16px; height: 16px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    padding: 0 3px; pointer-events: none;
    border: 1.5px solid transparent;
}
/* ============================================================ tooltip explicativ (_help.tpl)
   Popover fara JavaScript, pentru texte de ajutor langa etichetele de formular.
   Apare pe :hover si pe :focus (focus = accesibil la tastatura si la tap pe telefon).
   Gemene autonom in modulul Support: `.sup-help*` din templates/supporttickets/_style.tpl. */
.app-help { position: relative; display: inline-block; vertical-align: middle; margin-left: 5px; outline: none; cursor: help; }
.app-help-i {
    display: inline-flex; align-items: center; justify-content: center;
    width: 15px; height: 15px; border-radius: 50%;
    background: var(--grideschis); color: #666;
    font-size: 10.5px; font-weight: 700; line-height: 1;
    font-family: ubuntu700, Arial, sans-serif;
}
.app-help:hover .app-help-i, .app-help:focus .app-help-i { background: var(--mov); color: #fff; }
.app-help-box {
    position: absolute; left: 0; top: 22px; z-index: 60; display: none;
    width: 330px; max-width: 78vw;
    background: #22282e; color: #e8edf2;
    font-size: 12px; font-weight: 400; line-height: 1.5; text-transform: none; letter-spacing: 0;
    padding: 9px 11px; border-radius: 6px; box-shadow: 0 6px 22px rgba(0, 0, 0, .28);
    white-space: normal; text-align: left;
    /* explicatiile lungi (ex. regulile ANAF de pe campurile BT-) depaseau marginea de jos a
       ecranului si se pierdea finalul; asa caseta se opreste si se poate derula in ea */
    max-height: min(60vh, 420px); overflow-y: auto; overscroll-behavior: contain;
}
.app-help-box:before {
    content: ""; position: absolute; top: -5px; left: 6px;
    border: 5px solid transparent; border-top: 0; border-bottom-color: #22282e;
}
.app-help-box b, .app-help .app-help-box b { color: #fff; }
/* ↑ a doua forma bate `.form-hint b` (text gri), declarata mai jos cu aceeasi specificitate: un
   tooltip pus intr-o nota de sub camp isi pierdea textul ingrosat, gri inchis pe fundal inchis. */
.app-help-box code { background: rgba(255, 255, 255, .14); padding: 1px 4px; border-radius: 3px; font-size: 11px; }
.app-help:hover .app-help-box, .app-help:focus .app-help-box { display: block; }
/* Linkuri în tooltip (12.10.2026, nomenclatoarele oficiale din fișa produsului): caseta rămâne deschisă cât
   mouse-ul trece din „?” în ea — puntea de sub „?” acoperă golul până la casetă (pe casetă n-ar merge: `overflow` o taie) — și cât focusul e pe un link din ea. */
.app-help:focus-within .app-help-box { display: block; }
.app-help:hover::after { content: ""; position: absolute; left: 0; top: 100%; width: 100%; height: 8px; z-index: 61; }
.app-help-box a { color: #7fd6da; text-decoration: underline; }
.app-help-box a:hover, .app-help-box a:focus { color: #fff; }
/* langa marginea din dreapta a unei coloane de formular, popover-ul ar ieși din ecran */
.app-help.right .app-help-box { left: auto; right: 0; }
.app-help.right .app-help-box:before { left: auto; right: 6px; }
/* Caseta mutata inapoi in ecran de js/perp/ajutor-margine.js (08.10.2026): sageata ramane sub
   semnul „?". Aceeasi specificitate ca regula `.right` de deasupra, deci trebuie sa stea DUPA ea. */
.app-help .app-help-box.ah-mutat:before { left: var(--ah-sag, 6px); right: auto; }

/* Nota explicativa neutra sub un grup de campuri. Deliberat diferita de `.message-for-factura`,
   care e caseta roșie de avertisment pentru campurile obligatorii ANAF. */
.form-hint {
    grid-column: 1/-1;
    font-size: 12px; line-height: 1.5; color: #7a8288;
    margin: -4px 0 18px 0;
}
.form-hint b { color: #4a5157; }

/* Explicatia de sub un mesaj de eroare din formulare (ex: ce cont ocupa deja e-mailul).
   Sta in interiorul unui `.alert-danger`, deci mosteneste culoarea; aici doar il asezam
   ca bloc separat de prima linie, nu ca text care curge in ea. */
.form-error-details {
    margin: 8px 0 0 0;
    font-size: 13px; line-height: 1.6; font-weight: 400;
}
.form-error-details p { margin: 0 0 6px 0; }
.form-error-details p:last-child { margin-bottom: 0; }
.form-error-details ul { margin: 0 0 8px 0; padding-left: 18px; }
.form-error-details li { margin-bottom: 3px; }
.form-error-details a { text-decoration: underline; white-space: nowrap; }

/* ---------------------------------------------------------------------------
   Reactualizare date client din ANAF (templates/customer/_anaf_panel.tpl).
   Overlay propriu, nu modal Bootstrap: notifications.tpl reincarca jQuery la
   mijlocul paginii si handlerele legate inainte se pierd.
   --------------------------------------------------------------------------- */
.anaf-panel { margin: 10px 0 4px 0; }
.anaf-panel .but { margin-right: 6px; }
.anaf-panel-meta { margin-top: 6px; font-size: 12px; color: #777; line-height: 1.7; }
.anaf-panel-meta span { display: inline-block; margin-right: 16px; }
.anaf-panel-meta em { font-style: normal; color: #b06a00; }

.anaf-status { margin-top: 8px; padding: 7px 10px; border-radius: 3px; font-size: 13px; }
.anaf-status-info  { background: #eef4fb; border: 1px solid #c9ddf2; color: #24557f; }
.anaf-status-ok    { background: #eef8ef; border: 1px solid #c6e6c9; color: #2c6e31; }
.anaf-status-error { background: #fdeeee; border: 1px solid #f2c9c9; color: #8f2626; }

.anaf-overlay { position: fixed; inset: 0; z-index: 20000; background: rgba(0,0,0,.45);
                display: flex; align-items: flex-start; justify-content: center; padding: 24px 12px; overflow: auto; }
.anaf-overlay[hidden] { display: none !important; }
body.anaf-open { overflow: hidden; }

.anaf-dialog { background: #fff; border-radius: 4px; width: 100%; max-width: 960px;
               box-shadow: 0 8px 40px rgba(0,0,0,.3); display: flex; flex-direction: column; max-height: 100%; }
.anaf-dialog-head { display: flex; align-items: center; justify-content: space-between;
                    padding: 12px 16px; border-bottom: 1px solid #e5e5e5; }
.anaf-dialog-head h4 { margin: 0; font-size: 17px; }
.anaf-close { border: 0; background: none; font-size: 26px; line-height: 1; color: #999; cursor: pointer; padding: 0 4px; }
.anaf-close:hover { color: #333; }
.anaf-dialog-body { padding: 14px 16px; overflow: auto; }
.anaf-dialog-foot { display: flex; align-items: center; justify-content: space-between;
                    gap: 10px; padding: 11px 16px; border-top: 1px solid #e5e5e5; flex-wrap: wrap; }
.anaf-showall { font-weight: 400; font-size: 13px; color: #555; margin: 0; }
.anaf-foot-actions .but { margin-left: 6px; }

.anaf-source { font-size: 13px; color: #666; margin: 0 0 10px 0; }
.anaf-warn { background: #fff6e5; border: 1px solid #f0d9a8; color: #8a6116;
             padding: 8px 10px; border-radius: 3px; font-size: 13px; margin-bottom: 12px; }
.anaf-ok { background: #eef8ef; border: 1px solid #c6e6c9; color: #2c6e31;
           padding: 8px 10px; border-radius: 3px; font-size: 13px; margin-bottom: 12px; }

.anaf-group { margin-bottom: 16px; }
.anaf-group h5 { margin: 0 0 6px 0; font-size: 13px; text-transform: uppercase;
                 letter-spacing: .4px; color: #8a8a8a; }
.anaf-table { width: 100%; border-collapse: collapse; font-size: 13px;
               /* fixed: antetul se scrie o singura data, deci coloanele celorlalte
                  tabele trebuie sa se alinieze dupa latimile declarate pe celule */
               table-layout: fixed; }
.anaf-table th { text-align: left; font-weight: 600; font-size: 11px; text-transform: uppercase;
                 color: #999; border-bottom: 1px solid #eee; padding: 4px 8px; }
.anaf-table td { padding: 6px 8px; border-bottom: 1px solid #f2f2f2; vertical-align: top; }
.anaf-pick { width: 30px; }
.anaf-label { width: 30%; }
/* valoarea existenta se stinge, ca ochiul sa cada pe ce vine de la ANAF */
.anaf-old { color: #999; width: 29%; }
.anaf-new { color: #1a1a1a; font-weight: 600; width: 33%; }
/* table-layout:fixed ia latimile din PRIMUL rand. Grupul cu antet le ia din <th>,
   deci acestea trebuie sa fie aceleasi cu cele de pe celule, altfel primul tabel
   se aseaza altfel decat restul. */
.anaf-table th:nth-child(1) { width: 30px; }
.anaf-table th:nth-child(2) { width: 30%; }
.anaf-table th:nth-child(3) { width: 29%; }
.anaf-table th:nth-child(4) { width: 33%; }
.anaf-same .anaf-new { font-weight: 400; color: #999; }
.anaf-onlyprofile { font-size: 11px; color: #a0a0a0; border: 1px solid #e0e0e0;
                    border-radius: 2px; padding: 0 4px; white-space: nowrap; }

/* Tabul "Date ANAF" */
.anaf-fin-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.anaf-fin-table th { text-align: right; font-size: 11px; text-transform: uppercase; color: #999;
                     border-bottom: 1px solid #eee; padding: 5px 8px; }
.anaf-fin-table th:first-child { text-align: left; }
.anaf-fin-table td { padding: 6px 8px; border-bottom: 1px solid #f2f2f2; text-align: right; }
.anaf-fin-table td:first-child { text-align: left; font-weight: 600; }
.anaf-fin-neg { color: #b02a2a; }
.anaf-badge { display: inline-block; padding: 1px 7px; border-radius: 10px; font-size: 11px; }
.anaf-badge-da { background: #e6f5e7; color: #2c6e31; }
.anaf-badge-nu { background: #f1f1f1; color: #777; }
.anaf-badge-alerta { background: #fdeeee; color: #8f2626; }

@media (max-width: 760px) {
  .anaf-table, .anaf-table tbody, .anaf-table tr, .anaf-table td { display: block; width: auto; }
  .anaf-table thead { display: none; }
  .anaf-table tr { border-bottom: 1px solid #eee; padding: 6px 0; position: relative; }
  .anaf-table td { border: 0; padding: 2px 8px 2px 30px; }
  .anaf-pick { position: absolute; left: 0; top: 6px; padding: 0; }
  .anaf-old:before { content: "Acum: "; color: #bbb; }
  .anaf-new:before { content: "ANAF: "; color: #bbb; font-weight: 400; }
}

/* Tabul "Date ANAF": blocul de identificare (denumire + boxurile de sub ea) */
.anaf-id-card { border: 1px solid #e3e8ee; border-radius: 4px; background: #fafcfe; padding: 14px 16px 10px 16px; }
.anaf-id-field { flex: 1 1 240px; min-width: 0; }
.anaf-id-field label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .4px;
                       color: #8a8a8a; font-weight: 600; margin: 0 0 4px 0; }
.anaf-id-name { font-size: 16px; font-weight: 600; color: #1a1a1a; line-height: 34px; word-break: break-word; }
/* Chenarul de identificare de sub denumire (tabul „Dashboard" al clientului): CUI, Cod fiscal,
   nr. de înmatriculare, CAEN, data înmatriculării, sediul social. Eticheta în stânga, valoarea în
   dreapta; pe telefon, una sub alta. */
.anaf-id-chenar { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 5px 18px; margin: 8px 0 2px 0;
  padding: 10px 14px; border: 1px solid #d5dde6; border-radius: 6px; background: #fff; font-size: 13px; line-height: 1.45; }
.anaf-id-chenar dt { margin: 0; font-weight: 400; color: #6b7785; }
.anaf-id-chenar dd { margin: 0; color: #1a1a1a; font-weight: 500; overflow-wrap: anywhere; }
@media (max-width: 576px) { .anaf-id-chenar { grid-template-columns: 1fr; gap: 0; } .anaf-id-chenar dd { margin-bottom: 6px; } }
/* Boxul cu starile firmei (in functiune, platitor TVA, activa fiscal...), una sub alta. */
.anaf-id-stari { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 6px;
  padding: 9px 11px; border: 1px solid #d5dde6; border-radius: 6px; background: #fff; }
.anaf-id-stari .cs-badge { margin: 0; }
/* Boxurile de sub denumire, pe un rand: identificarea firmei, starile ei, eventual campul „Cod
   Fiscal" si actualizarea de la ANAF. Boxul principal e limitat in latime, ca CAEN-ul sa se rupa pe
   2-3 randuri si sa ramana loc pentru celelalte. Pe ecrane inguste coboara unul sub altul. */
.anaf-id-corp { display: flex; flex-wrap: wrap; align-items: stretch; gap: 12px; margin: 8px 0 2px 0; }
.anaf-id-corp .anaf-id-chenar { margin: 0; flex: 1 1 360px; max-width: 640px; min-width: 0; }   /* se ingusteaza pana la 360px (CAEN pe 2-3 randuri) inainte ca starile sa coboare sub el */
.anaf-id-corp .anaf-id-stari { flex: 0 0 auto; flex-direction: column; flex-wrap: nowrap; align-items: flex-start; }
/* Boxul de actualizare: butonul (cu tooltipul lui) si data ultimelor verificari. */
.anaf-id-actualizare { position: relative; flex: 0 1 auto; display: flex; flex-direction: column; justify-content: center; gap: 10px;
  padding: 10px 14px; border: 1px solid #d5dde6; border-radius: 6px; background: #fff; }
.anaf-id-actualizare-buton { display: flex; align-items: center; gap: 6px; }
.anaf-id-actualizare .but { margin: 0; }
.anaf-id-verificari { font-size: 12px; color: #6b7785; line-height: 1.6; }
.anaf-id-verificari strong { color: #1a1a1a; font-weight: 600; }
.anaf-id-verificari em { font-style: normal; color: #b06a00; }
/* Placile mici din panoul de identificare: cele patru scoruri (Duviana, de plata, capacitate
   de plata, insolventa) plus numarul de angajati si vechimea firmei - mutate aici din
   boxurile de dedesubt (spatiul din dreapta butonului ANAF statea gol). Un box cu placi
   inauntru, fiecare cu bara de culoare deasupra ca pe cardurile mari. */
.anaf-id-mini { position: relative; flex: 1 1 320px; min-width: 0; display: grid; gap: 8px; align-content: start;
  padding: 10px; border: 1px solid #d5dde6; border-radius: 6px; background: #fff;
  /*
     Numarul de coloane urmareste latimea BOXULUI, nu a ferestrei — si asta nu e un moft:
     boxul imparte randul cu datele firmei, iar `.anaf-id-chenar` are `max-width: 640px`, deci
     tot spatiul in plus vine aici. Masurat: la 1440px boxul are 375px, la 1920px 615px, la
     2560px 1270px — o crestere care nu urmeaza deloc liniar fereastra, asa ca un `@media` pe
     latimea ei nimerea alaturi.

     Formula are trei bucati, fiecare cu treaba ei:
       `calc((100% - 24px) / 4)` — un sfert din latimea utila. Fiind minimul unei coloane,
           PLAFONEAZA la patru: un sfert nu incape de cinci ori.
       `140px` — pragul de lizibilitate. Cand un sfert ar fi sub atat, se trece la trei sau doua
           coloane in loc sa se inghesuie patru.
       `min(140px, 47%)` — ⚠️ pe telefon boxul are ~300px, iar un prag fix de 140px ar lasa o
           SINGURA coloana (doua ar cere 288px de continut). Pragul cedeaza sub 47% din latime,
           deci raman mereu cel putin doua placi pe rand, ca pana acum.

     Masurat: telefon 390px → 2 placi, 1440 → 2, 1700 → 3 de 156px, 1920 → 4 de 146px,
     2560 → 4 de 302px. Cu sapte placi, patru pe rand inseamna doua randuri (4+3) in loc de trei
     (3+3+1) — la 2560px boxul ajunge exact cat datele firmei de alaturi (261px amandoua).
  */
  grid-template-columns: repeat(auto-fit,
      minmax(max(min(140px, 47%), calc((100% - 24px) / 4)), 1fr)); }
/*
   Varianta LATA (tabul „Dashboard", din 26.09.2026): placile nu mai stau in dreapta
   cardului de identificare — acela a fost inlocuit de antetul compact din tabul „Date
   ANAF", o banda subtire —, ci pe toata latimea paginii, sub el.

   Aceeasi formula, cu alte doua numere: plafonul e 9 (cate placi sunt in tabul „Dashboard",
   de cand cifra de afaceri si profitul net au urcat in banda; peste atat, `auto-fit` ar
   intinde ultimele), iar pragul de lizibilitate 145px — cat ii revine unei placi la 1600px,
   masurat. Era 230px cu 7 placi; cu 9 ar fi impins mereu doua pe randul al doilea.
   `min(145px, 47%)` ramane pentru telefon — un prag fix ar lasa o singura placa pe rand.
   64px = cele 8 spatii dintre 9 coloane.
   Masurat: 390px → 2 placi, 1280 → 6, 1440 → 7, 1600 → toate 9 pe un rand, 1920 → 9, 2560 → 9.
*/
.anaf-id-mini-lat { flex: none; margin-bottom: 14px;
  grid-template-columns: repeat(auto-fit,
      minmax(max(min(145px, 47%), calc((100% - 64px) / 9)), 1fr)); }
/*
   ⚠️ Popover-ul de metodologie se ancoreaza de PLACA, nu de semnul intrebarii, si se
   intinde pe latimea ei. Ancorat de icon, caseta de 420px se deschide spre dreapta si
   iesea din ecran cu 216-241px la placile de pe ultima coloana (masurat la 1920 si
   2098px). `.app-help.right` n-ar rezolva: deschisa spre stanga, ar iesi pe partea
   cealalta la placile din prima coloana. Si nu se poate alege per coloana — numarul de
   coloane il decide `auto-fit`, deci `:nth-child` n-are pe ce sa se agate.
   Sub 761px regula NU se aplica: acolo blocul de telefon de mai jos intinde caseta pe
   latimea intregului rand, care e mai mare decat o placa.
*/
@media (min-width: 761px) {
  .anaf-id-mini-lat .app-help { position: static; }
  .anaf-id-mini-lat .anaf-id-placa .app-help-box { left: 0; right: 0; top: 100%;
    width: auto; max-width: none; }
  .anaf-id-mini-lat .anaf-id-placa .app-help-box:before { display: none; }
}
/*
   Pe desktop caseta e MAI LATA decat placa (cererea utilizatorului, 30.09.2026): intinsa pe
   latimea unei placi (157px masurat pe /anaf, ~130 pe Dashboard) iesea un turn de text —
   metodologia unui scor are patru indicatori cu praguri, deci zeci de randuri.

   ⚠️ De ce abia acum: pana la pozitionarea cu ancora nu exista cale CSS de a lati caseta
   FARA sa iasa din ecran la placile de pe ultima coloana (masurat atunci: 216-241px in afara,
   la 1920 si 2098px). Numarul de coloane il decide `auto-fit`, deci nici `:nth-child` n-avea
   de ce sa se agate, iar `.app-help.right` doar muta problema la prima coloana.
   `position-try-fallbacks: flip-inline` rezolva exact asta: caseta se deschide spre dreapta,
   iar unde n-ar incapea se rastoarna singura spre stanga.

   `anchor-scope` e obligatoriu: fara el, acelasi `anchor-name` pe toate placile ar face ca
   toate casetele sa se ancoreze de aceeasi placa.

   Regula sta sub `@supports`, deci pe un motor fara ancore ramane exact comportamentul de mai
   sus (caseta cat placa) — ingusta, dar niciodata in afara ecranului.
*/
@media (min-width: 761px) {
  @supports (anchor-name: --x) and (position-try-fallbacks: flip-inline) {
    .anaf-id-mini-lat .anaf-id-placa { anchor-name: --ap-placa; anchor-scope: --ap-placa; }
    .anaf-id-mini-lat .anaf-id-placa .app-help-box {
      /* ⚠️ `fixed`, nu `absolute`: pozitionarea cu ancora masoara depasirea fata de blocul
         containator, iar la `absolute` acela e PLACA — caseta o depaseste oricum, deci
         rasturnarea nu se declansa niciodata (masurat: iesea 416px din ecran). Cu `fixed`,
         reperul devine ecranul, iar ancora tine caseta lipita de placa la derulare. */
      position: fixed;
      position-anchor: --ap-placa;
      /* ⚠️ Ambele cuvinte din ACEEASI familie: `bottom span-inline-end` amesteca fizicul cu
         logicul si e respins TACIT (computed `position-area: none`), deci caseta ramanea
         pozitionata de regula veche. Verificat cu CSS.supports. */
      position-area: block-end span-inline-end;
      position-try-fallbacks: flip-inline;
      left: auto; right: auto; top: auto; bottom: auto; margin-top: 2px;
      width: max-content; min-width: anchor-size(--ap-placa width); max-width: min(520px, 46vw);
      /* ⚠️ Fara asta, o caseta mai inalta decat spatiul de sub placa nu e micsorata: e
         IMPINSA in sus ca sa incapa in ecran, deci ajunge PESTE placa — masurat, cele patru
         casete de metodologie (470px, cu 320px liberi sub placa pe un ecran de 900)
         acopereau exact jumatatea de jos a placii, adica tocmai numarul despre care vorbesc.
         `stretch` inseamna aici „cat zona de sub placa": e un MAXIM, deci casetele scurte
         raman scurte, iar cele lungi se opresc la marginea de jos si isi deschid bara de
         derulare proprie (o aveau si pana acum, `overflow: auto` de la `.app-help-box`).
         Inlocuieste `max-height: min(62vh, 470px)` de la `.anaf-id-mini`, care nu stia
         nimic despre locul placii in ecran. */
      max-height: -webkit-fill-available; /* Chrome/Safari vechi */
      max-height: stretch;
    }
  }
}
/* FARA overflow: hidden (scara isi rotunjeste singura colturile, cu raza ei de 4px): ar taia
   popover-ul de metodologie al placii, care iese mult in afara ei.
   `position: relative` = reperul scarii din marginea dreapta (`.cs-scara`). */
.anaf-id-placa { position: relative; min-width: 0; border: 1px solid #e6ecf2; border-radius: 5px;
  background: #f8fafc; }
/* Placa e mai mica decat cardul: raza interioara 4px (5px bordura-exterioara − 1px) si scara
   mai ingusta. Restul regulilor sunt la `.cs-scara`; aici se schimba doar dimensiunile. */
.anaf-id-placa .cs-scara { width: 4px; border-radius: 0 4px 4px 0; }
/* padding-right mai mare decat stanga: textul nu trece pe sub scara */
.anaf-id-placa-corp { padding: 7px 11px 7px 9px; }

/*
   Placa pur informativa (vechimea firmei, cifra de afaceri, profitul net): valoarea sta in
   mijlocul cutiei, iar variatia fata de anul trecut in coltul din dreapta jos.
   Centrarea pe verticala se face cu `margin: auto` intre titlu si coltul de jos — placile
   sunt intinse la aceeasi inaltime de grila, deci fara ea valoarea ar ramane agatata sus.
*/
.anaf-id-placa-centrat { display: flex; }
.anaf-id-placa-centrat .anaf-id-placa-corp { flex: 1 1 auto; display: flex; flex-direction: column; }
/* Loc pentru variatia din colt, ca sa nu intre peste valoare la placile inguste. DOAR unde
   exista variatie: rezervat degeaba, impingea valoarea cu 10px deasupra centrului la placa
   „Vechimea firmei", care n-are asa ceva (masurat). */
.anaf-id-placa-centrat.anaf-id-placa-cu-delta .anaf-id-placa-corp { padding-bottom: 26px; }
/*
   ⚠️ Scrise cu `.anaf-id-mini` in fata: `.anaf-id-mini .anaf-id-placa-nr`, definita mai jos,
   are aceeasi specificitate si fixeaza `margin-top: 2px` — imi anula `auto`-ul, iar valoarea
   ramanea lipita sus (masurat: 25px deasupra, 102px dedesubt).

   Centrarea pe verticala: valoarea primeste `margin-top: auto`, iar un `::after` gol de la
   coada cutiei primeste si el `margin-top: auto`. Spatiul liber se imparte egal intre cele
   doua, deci grupul valoare (+ subtext, unde exista) ramane la mijlocul zonei dintre titlu si
   coltul variatiei. Fara `::after`, `auto` singur ar fi impins valoarea la fund.
*/
.anaf-id-mini .anaf-id-placa-centrat .anaf-id-placa-nr { text-align: center; margin-top: auto; }
.anaf-id-mini .anaf-id-placa-centrat .anaf-id-placa-corp::after { content: ''; margin-top: auto; }
.anaf-id-mini .anaf-id-placa-centrat .anaf-id-placa-sub { text-align: center; }
/* ⚠️ `right: 11px`, nu 0: scara de scor ocupa 4px pe marginea din dreapta a placii */
.anaf-id-placa-centrat .anaf-id-placa-delta { position: absolute; right: 11px; bottom: 6px;
  margin: 0; text-align: right; white-space: nowrap; }
.anaf-id-placa-cap { display: flex; align-items: center; gap: 2px; font-size: 11px; color: #7a838c;
  line-height: 1.3; }
/* bate `.cs-card-nr` (19px), clasa de la care placa imprumuta culorile nivelurilor */
.anaf-id-mini .anaf-id-placa-nr { font-size: 15px; line-height: 1.25; margin-top: 2px;
  overflow-wrap: anywhere; }
.anaf-id-placa-sub { font-size: 10px; color: #8a949d; line-height: 1.35; margin-top: 1px; }
/* Graficul mic de evolutie din placa (azi: angajatii pe ultimii ani).
   ⚠️ NEUTRU dinadins: `Sparkline` pune pe SVG clasele `spark--pos` / `spark--neg`, dar aici
   NU primesc culoare. Numarul de angajati e o informatie, nu o evaluare (asa scrie si in
   tooltipul placii); verde/rosu ar sugera ca a creste e „bine" si a scadea „rau". */
.anaf-id-placa-grafic { position: relative; color: #8fa0b0; line-height: 0; margin-top: 6px; }
/* Punctele anilor. Pozitionate in procente peste SVG, deci raman rotunde oricat s-ar intinde
   graficul. */
.anaf-id-placa-punct { position: absolute; width: 8px; height: 8px; border-radius: 50%;
                       background: currentColor; transform: translate(-50%, -50%);
                       cursor: pointer; outline: none; }
/* Tinta de hover e mai mare decat punctul: 8px sunt greu de nimerit cu mouse-ul, si cu atat
   mai greu cu degetul. */
.anaf-id-placa-punct:before { content: ""; position: absolute; top: -8px; right: -8px;
                              bottom: -8px; left: -8px; border-radius: 50%; }
.anaf-id-placa-punct:hover, .anaf-id-placa-punct:focus { width: 11px; height: 11px; z-index: 3; }

/* Bula cu valoarea anului („2023: 169"). Se deschide si la `focus`, nu doar la `hover`:
   altfel pe telefon n-ar exista nicio cale s-o vezi. */
.anaf-id-placa-punct b { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%);
                         display: block; white-space: nowrap; padding: 3px 7px;
                         border-radius: 4px; background: #2b333a; color: #fff;
                         font-size: 11px; font-weight: 600; line-height: 1.45;
                         opacity: 0; visibility: hidden; pointer-events: none;
                         transition: opacity .12s ease; }
/* Punctele de sus isi deschid bula in JOS: deasupra graficului stau cifra mare si subtextul
   placii, iar dedesubt doar anii de la capete. Decizia se ia pe server, unde se stie
   inaltimea fiecarui punct (vezi `Dashboard::placaAngajati()`). */
.anaf-id-placa-punct.punct-bula-jos b { bottom: auto; top: 14px; }
.anaf-id-placa-punct:hover b, .anaf-id-placa-punct:focus b { opacity: 1; visibility: visible; }
/* La capete bula ar iesi din placa, deci se agata de marginea ei, nu de punct. */
.anaf-id-placa-punct:first-of-type b { left: -4px; transform: none; }
.anaf-id-placa-punct:last-of-type b { left: auto; right: -4px; transform: none; }
/* SVG-ul se intinde pe latimea placii (are `preserveAspectRatio="none"` din `Sparkline`),
   iar `vector-effect` tine linia la 1,5px: fara el, intinderea orizontala ar ingrosa
   segmentele verticale si le-ar subtia pe cele orizontale. */
.anaf-id-placa-grafic svg { width: 100%; height: 24px; display: block; }
.anaf-id-placa-grafic polyline { vector-effect: non-scaling-stroke; }
.anaf-id-placa-ani { display: flex; justify-content: space-between;
                     font-size: 9px; color: #9aa4ad; margin-top: 1px; }
.anaf-id-placa-ani b { font-weight: 500; }
.anaf-id-placa-stare { font-size: 10px; line-height: 1.35; margin-top: 3px; }

/* Placa care duce altundeva (dosarele din instanta): link discret la baza ei. Sageata creste
   la hover, ca sa se simta ca e o poarta, fara sa concureze cu numarul de deasupra. */
.anaf-id-placa-link { display: inline-flex; align-items: center; gap: 1px;
                      margin-top: 6px; font-size: 11px; font-weight: 600;
                      color: var(--mov); text-decoration: none; }
.anaf-id-placa-link:hover, .anaf-id-placa-link:focus { color: var(--mov); text-decoration: underline; }
.anaf-id-placa-link i { font-size: 14px; transition: transform .15s ease; }
.anaf-id-placa-link:hover i { transform: translateX(2px); }
.tema-dark .anaf-id-placa-link { color: #a78bfa; }

/* Slotul de la coada placii (`$subsol` in `customer/_score_placa.tpl`): un rand despartit
   printr-o linie, aliniat la dreapta. Azi il foloseste „Detalii" al cutiei care deschide
   documentele scorului de plata, in capul tabului „Facturi".
   ⚠️ Marginile negative il intind pana la muchiile placii, ca linia sa taie toata latimea:
   `.anaf-id-placa-corp` are `padding: 7px 11px 7px 9px`, deci -9px / -11px, iar jos -7px ca
   randul sa se lipeasca de fund. */
/* ⚠️ Accentul curat (`--mov`, #00a3a9) pe fundalul placii da contrast 2,96:1 — sub pragul de
   4,5:1 al textului mic. Aceeasi capcana notata pentru butoanele din antetul fisei si pentru
   titlul sumarului de recurente: pastram culoarea aplicatiei, dar inchisa cu `color-mix`, ca
   sa urmeze tema si sa se poata citi. (`.anaf-id-placa-link` de mai sus are inca problema
   asta, dar e folosit in alte ecrane si nu se atinge aici.) */
.anaf-id-placa-subsol { display: flex; align-items: center; justify-content: flex-end; gap: 1px;
                        margin: 6px -11px -7px -9px; padding: 4px 11px 4px 9px;
                        border-top: 1px solid #eef2f6;
                        font-size: 11px; font-weight: 600;
                        color: var(--mov);
                        color: color-mix(in srgb, var(--mov) 72%, #000); }
.anaf-id-placa-subsol i { font-size: 16px; transition: transform .2s ease; }
.tema-dark .anaf-id-placa-subsol { border-top-color: #2c3945; }

/* Campul „Cod Fiscal", cand fisa n-are un cod valid: acelasi box ca celelalte. */
.anaf-id-cod { flex: 0 1 300px; padding: 10px 14px; border: 1px dashed #d5dde6; border-radius: 6px; background: #fff; }
.anaf-id-field .form-control { max-width: 260px; font-size: 15px; letter-spacing: .3px; }
.anaf-id-hint { font-size: 12px; color: #888; margin-top: 4px; line-height: 1.5; }
.anaf-id-hint[hidden] { display: none; }
.anaf-id-bad { color: #b02a2a; }
@media (max-width: 760px) {
  .anaf-id-chenar { max-width: none; }
  .anaf-id-corp .anaf-id-chenar { flex-basis: 100%; }
  .anaf-id-corp .anaf-id-stari { flex: 1 1 100%; flex-direction: row; flex-wrap: wrap; }
  .anaf-id-actualizare, .anaf-id-cod, .anaf-id-mini { flex: 1 1 100%; }
  .anaf-id-field .form-control { max-width: none; }
  /* Ca la cardurile de scor: pe telefon popover-ul de 330px ancorat de icon ar iesi din
     ecran, deci ancorarea trece pe box si caseta se intinde pe latimea lui. */
  .anaf-id-actualizare .app-help { position: static; }
  .anaf-id-actualizare .app-help-box { left: 10px; right: 10px; top: 100%; width: auto; max-width: none; }
  .anaf-id-actualizare .app-help-box:before { display: none; }
  /* Acelasi lucru pentru butonul din antetul compact (`anaf/_header.tpl`), care n-avea
     geamanul asta: la 390px caseta iesea 53px in stanga ecranului. Ancora e boxul de
     actiuni (294px la 390px de ecran), nu iconul. Defect vechi, gasit cand datele de
     verificare au intrat in tooltip si l-au facut mai inalt. */
  .ap-header-actiuni { position: relative; }
  .ap-header-actiuni .app-help { position: static; }
  .ap-header-actiuni .app-help-box { left: 0; right: 0; top: 100%; width: auto; max-width: none; }
  .ap-header-actiuni .app-help-box:before { display: none; }
}

/* ------------------------------------------------------------------ */
/* Analiza firmei in fisa clientului (modulul CompanyScore)            */
/*                                                                     */
/* Nivelurile de risc (cs-r0..cs-r5) sunt UN SINGUR set de culori,     */
/* folosit si de bara cardului, si de valoare. Culoarea e semnal, nu   */
/* decor: cs-r0 = necunoscut, cs-r1 = cel mai bun, cs-r5 = cel mai rau.*/
/* Paleta graficului e alta, intentionat: acolo verdele inseamna       */
/* "seria profit", nu "e bine".                                        */
/* ------------------------------------------------------------------ */

.cs-badges { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 4px; }
.cs-badge { display: inline-block; padding: 3px 9px; border-radius: 4px; font-size: 11px;
            font-weight: 600; text-transform: uppercase; letter-spacing: .3px; }
.cs-badge-ok { background: #e8f6ec; color: #256b34; box-shadow: inset 0 0 0 1px #c4e6cf; }
.cs-badge-neutral { background: #f2f4f6; color: #5b6570; box-shadow: inset 0 0 0 1px #e0e4e8; }
.cs-badge-warn { background: #fdf4e3; color: #8a6116; box-shadow: inset 0 0 0 1px #f2e0bb; }
.cs-badge-danger { background: #fdecec; color: #8f2626; box-shadow: inset 0 0 0 1px #f3cfcf; }

.cs-carduri { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
              gap: 14px; margin: 16px 0; }
/* FARA overflow:hidden. Ar taia colturile barei colorate, dar taie si popover-ul de
   metodologie (`.app-help-box`, 330px, position:absolute) - explicatia scorului aparea
   retezata la marginea cardului. Colturile se rotunjesc direct pe bara si pe subsol. */
.cs-card { position: relative; background: #fff; border: 1px solid #e3e7ea;
           border-radius: 8px; box-shadow: 0 1px 2px rgba(16,24,40,.04); }
/*
   Scara de scor: bara verticală din marginea DREAPTĂ a boxului, nu linia de 3px de
   deasupra (24.09.2026). Canalul gri e scara 0–100% — adică toată înălțimea boxului —,
   iar umplutura colorată urcă de jos până unde stă scorul: „6,1 / 10" umple 61%.
   Culoarea rămâne ce era, treapta de risc; ce se adaugă e CÂT.

   ⚠️ `overflow: hidden` stă pe CANAL, niciodată pe card sau pe placă: acolo ar tăia
   popover-ul de metodologie, care iese mult în afara boxului (vezi `.cs-card` și
   `.anaf-id-placa`). Pe canal e inofensiv — înăuntru nu e decât umplutura — și e singurul
   mod de a-i rotunji colțurile de jos, fiindcă umplutura e un dreptunghi.

   Raza e cea INTERIOARĂ: cardul are 8px și 1px bordură, deci 7px; placa mică are 5px și
   1px, deci 4px (vezi `.anaf-id-mini .cs-scara` mai jos).
*/
/* ⚠️ FARA `z-index`. Scara e primul copil al boxului, deci - fiind pozitionata - se pune
   deasupra continutului obisnuit (subsolul „Evaluare pe date partiale" are fundal propriu),
   dar SUB popover-ul de metodologie, care vine mai tarziu in DOM si e si el pozitionat. Cu
   `z-index: 1` aici, dunga de 5px ar taia caseta de 420px a tooltipului pe marginea dreapta. */
/* ⚠️ Canalul trebuie sa se VADA, altfel dispare rostul barei. Prima varianta era #e6ecf2 —
   exact culoarea bordurii placii — si la marime reala partea goala se confunda cu marginea
   boxului: se vedea doar bucata colorata, fara scara pe care sa fie citita, deci „61%" nu
   se mai deosebea de „100%". */
.cs-scara { position: absolute; top: 0; right: 0; bottom: 0; width: 5px;
            background: #cbd6e2; border-radius: 0 7px 7px 0; overflow: hidden; }
/* umplutura; culorile vin din `.cs-card-bara.cs-rX`, lista de mai jos */
.cs-scara .cs-card-bara { position: absolute; left: 0; right: 0; bottom: 0; }
.cs-card-corp { display: flex; align-items: flex-start; justify-content: space-between;
                gap: 14px; padding: 14px 16px 13px; }
.cs-card-titlu { font-size: 14px; font-weight: 600; color: #2b333a; display: flex;
                 align-items: center; gap: 2px; }
.cs-card-valoare { text-align: right; }
.cs-card-nr { font-size: 19px; font-weight: 700; line-height: 1.15; }
.cs-card-sub { margin-top: 2px; font-size: 11px; color: #7a838c; }
.cs-card-partial { border-top: 1px solid #f6e6c4; background: #fdf8ec; color: #8a6116;
                   padding: 5px 16px; font-size: 11px; border-radius: 0 0 7px 7px; }

/* cardul peste care sta mouse-ul trece deasupra vecinilor, ca popover-ul sa nu intre sub ei */
.cs-card:hover, .cs-tile:hover { z-index: 2; }

/* Un singur card (client fara date ANAF: ramane doar scorul de plata) s-ar intinde pe
   toata latimea grilei, cu valoarea aruncata la celalalt capat al ecranului. */
.cs-card:only-child { max-width: 460px; }

/* bara colorata */
.cs-card-bara.cs-r0, .app-help-culoare.cs-r0 { background: #94a3b8; }
.cs-card-bara.cs-r1, .app-help-culoare.cs-r1 { background: #10b981; }
.cs-card-bara.cs-r2, .app-help-culoare.cs-r2 { background: #22c55e; }
.cs-card-bara.cs-r3, .app-help-culoare.cs-r3 { background: #f59e0b; }
.cs-card-bara.cs-r4, .app-help-culoare.cs-r4 { background: #ea580c; }
.cs-card-bara.cs-r5, .app-help-culoare.cs-r5 { background: #dc2626; }
/* cs-r6 = risc critic: nu vine din scor, ci din starea juridica (radiere, dizolvare,
   faliment, lichidare). Rosu inchis, ca sa nu se confunde cu "foarte ridicat". */
.cs-card-bara.cs-r6, .app-help-culoare.cs-r6 { background: #7f1d1d; }

/* valoarea, in aceeasi cheie cromatica */
.cs-card-nr.cs-r0 { color: #94a3b8; }
.cs-card-nr.cs-r1 { color: #047857; }
.cs-card-nr.cs-r2 { color: #15803d; }
.cs-card-nr.cs-r3 { color: #b45309; }
.cs-card-nr.cs-r4 { color: #c2410c; }
.cs-card-nr.cs-r5 { color: #b91c1c; }
.cs-card-nr.cs-r6 { color: #7f1d1d; }

/* Tabul „Dashboard": capacitatea de plata si cele trei KPI-uri pe acelasi rand. Pragul mai
   mic decat la .cs-carduri (280px) ca patru elemente sa incapa pe un rand si la ~1100px. */
.cs-carduri.cs-carduri-cu-kpi { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.cs-kpi { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
          gap: 12px; margin: 16px 0; }
.cs-tile { background: #fff; border: 1px solid #e3e7ea; border-radius: 8px; padding: 10px 14px 9px;
           box-shadow: 0 1px 2px rgba(16,24,40,.04); }
.cs-tile-eticheta { text-align: right; font-size: 10px; font-weight: 600; text-transform: uppercase;
                    letter-spacing: .5px; color: #9aa4ae; }
.cs-tile-nr { text-align: center; font-size: 22px; font-weight: 700; color: #1f262c;
              font-variant-numeric: tabular-nums; margin: 2px 0; }
.cs-tile-nr.cs-negativ { color: #b91c1c; }
.cs-tile-um { font-size: 12px; font-weight: 500; color: #9aa4ae; }
.cs-tile-jos { text-align: right; font-size: 11px; color: #7a838c; min-height: 18px; }
.cs-delta { display: inline-block; padding: 1px 6px; border-radius: 3px; font-weight: 600; }
/* ⚠️ Scrise cu AMBELE clase (specificitate 0-2-0) ca sa bata `.fr-sb-linii td + td`
   (0-1-2), care fixeaza culoarea cifrelor din cutiile de sumar: pastila de variatie sta
   intr-o celula de-a lui, iar cu un singur nume de clasa ii ramanea textul inchis pe verde.
   Placile de scor nu se schimba - e aceeasi regula, doar mai greu de invins. */
.cs-delta.cs-delta-sus { background: #e8f6ec; color: #256b34; }
.cs-delta.cs-delta-jos { background: #fdecec; color: #8f2626; }
.cs-tile-an { margin-left: 3px; }

.cs-avertismente { margin: 4px 0 16px; padding-left: 18px; font-size: 12px; color: #6b7480; }
.cs-avertismente li { margin: 2px 0; }
/* ultima bulina: disclaimerul general, mai estompat decat observatiile despre firma */
.cs-avertismente li.cs-disclaimer { margin-top: 8px; color: #8a949d; }
.cs-avertismente li.cs-disclaimer strong { color: #6b7480; }

/* Randul din mijlocul tabului „Dashboard": in stanga placile (capacitate de plata + KPI,
   doua pe rand), in dreapta graficul financiar - urcat aici de sub tabelul de detalii,
   unde lasa jumatate de ecran gol. Pe telefon, una sub alta. */
.cs-rand-mijloc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
                  gap: 14px; align-items: start; margin: 16px 0; }
.cs-col-placi { min-width: 0; }
/* Comutatorul de moneda deschide coloana din stanga, pe aceeasi linie cu titlul graficului
   din dreapta: aceeasi inaltime si aceeasi distanta pana la continut ca `.h4-special`
   (24px text + 10px padding + 1px linie, apoi 25px). */
.cs-col-placi .cs-rand-sus { align-items: flex-start; min-height: 35px; margin: 0 0 25px; }
/*
   Rândul care poartă și titlul „Date financiare" (din 26.09.2026 el stă aici, nu în capul
   coloanei graficului): titlul primul, comutatorul de monedă lipit după el — `space-between`
   i-ar fi trimis la capetele coloanei, cu un gol de câteva sute de pixeli între.
   ⚠️ Linia de sub titlu o duce RÂNDUL, nu `<h4>`: ca item de flex, bordura lui ar fi fost
   lată cât textul, nu cât coloana. De aceea `.h4-special` își pierde aici bordura, padding-ul
   și marginea — le-ar fi adăugat peste ale rândului.
   `align-items: baseline` așază butoanele de 26px pe linia de bază a titlului de 20px.
*/
.cs-col-placi .cs-rand-sus-titlu { align-items: baseline;
    gap: 6px 14px; min-height: 0; padding-bottom: 10px; border-bottom: 1px solid #ccc; }
.cs-rand-sus-titlu .h4-special { border: 0; padding: 0; margin: 0; }
/* ⚠️ `justify-content` rămâne `space-between` (moștenit din `.cs-rand-sus`): titlul la
   stânga, monedele împinse la marginea din dreapta a coloanei, adică lipite de grafic
   (26.09.2026, cererea utilizatorului). A fost scurt `flex-start`, cu butoanele lipite de
   titlu. */

/* Cele patru cifre ale paginii („Date publice"), acum în coloana din stânga graficului:
   DOUĂ pe rând, nu cât încape. `auto-fit` cu prag de 226px ar da trei coloane peste ~710px
   de coloană (adică de la ~1750px fereastră), deci exact pe ecranele late s-ar fi rupt
   simetria cu graficul de alături. `margin: 0` — distanțele le dă rândul.
   ⚠️ Numai de la 1200px în sus, adică exact cât ține rândul cu două coloane (vezi
   `.cs-rand-mijloc` mai jos): sub atât rândul se stivuiește, cifrele își recapătă toată
   lățimea paginii și `auto-fit` decide singur — la 985px o coloană de 389px dădea carduri de
   187px, în care „8.218.418.275" ieșea cu 24px din cutie (măsurat). */
@media (min-width: 1200px) {
  .cs-col-placi .ap-kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; }
}
/* in coloana lor, placile stau DOUA pe rand, nu cat incape */
.cs-col-placi .cs-carduri { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; }
.cs-col-placi .cs-avertismente { margin: 12px 0 0; }
.cs-bloc-grafic { min-width: 0; }
/* titlul graficului se aliniaza cu prima placa, nu cu marginea de sus a randului */
.cs-bloc-grafic .h4-special { margin-top: 0; }
/* ⚠️ Pragul a urcat de la 900 la 1200px (26.09.2026), odată cu mutarea celor patru cifre ale
   paginii în coloana din stânga: sub 1200px coloana scade sub ~500px, iar un card de KPI ajunge
   la 187px — cu 24px mai îngust decât „8.218.418.275" (măsurat la 985px). Stivuit, blocul
   financiar are toată lățimea și cifrele stau patru pe rând, ca înainte. */
@media (max-width: 1199px) { .cs-rand-mijloc { grid-template-columns: 1fr; } }
.cs-jos { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
          gap: 18px; align-items: start; margin: 18px 0 14px; }
.cs-bloc { min-width: 0; }
.cs-tabel { max-width: 100%; }
/* „Detalii generale", in capul paginii „Date ANAF": mutat de la coada tabului Dashboard */
.cs-detalii-generale { margin: 0 0 22px; }
.cs-grafic { height: 300px; width: 100%; }
.cs-grafic a[href*="canvasjs"], .cs-grafic .canvasjs-chart-credit { display: none !important; }

.cs-disclaimer { margin-top: 6px; }

/* Popover-ul de metodologie al cardurilor de scor e mai lat si mai inalt decat cel obisnuit:
   la riscul comercial el tine componentele, sub-criteriile lor, scara notei si modul de
   compunere - la 330px ar fi doar o fanta cu bara de derulare. Regula sta INAINTEA blocului
   de telefon de mai jos, care ii da latime automata; mutata dupa, ar bate acolo. */
.cs-card .app-help-box,
.anaf-id-mini .app-help-box { width: 420px; max-height: min(62vh, 470px); }

@media (max-width: 760px) {
  .cs-carduri, .cs-kpi, .cs-jos { grid-template-columns: 1fr; }
  .cs-card-corp { flex-direction: column; gap: 4px; }
  .cs-card-valoare { text-align: left; }

  /* Pe telefon, popover-ul de 330px ancorat de icon iese din ecran (iconul sta la
     mijlocul cardului). `position: static` pe declansator muta ancorarea pe card, deci
     caseta se intinde pe latimea lui. Regula e limitata la `.cs-card`: componenta
     comuna `_help.tpl` se poarta la fel peste tot altundeva. */
  .cs-card .app-help, .anaf-id-mini .app-help { position: static; }
  .cs-card .app-help-box { left: 10px; right: 10px; top: 34px; width: auto; max-width: none; }
  .cs-card .app-help-box:before, .anaf-id-mini .app-help-box:before { display: none; }
  /* placile stau intr-un box propriu: caseta se intinde pe latimea LUI, sub placa */
  .anaf-id-mini .app-help-box { left: 10px; right: 10px; top: auto; width: auto; max-width: none; }

  /*
     Tooltipul de langa butoanele RON / EUR / USD avea aceeasi boala, dar mai rau: iconul sta
     in MIJLOCUL randului, deci caseta de 330px (taiata la `max-width: 78vw`, adica ~305px pe
     un ecran de 390px) iesea cu ~83px in dreapta. Nici `.app-help.right` n-ar fi ajutat -
     deschisa spre stanga ar fi iesit pe partea cealalta. Singura solutie e sa nu mai fie
     ancorata de icon: se agata de randul monedelor si se intinde pe toata latimea lui.
  */
  .cs-rand-sus { position: relative; }
  /* Aceeași ancorare pentru amândouă semnele de întrebare de pe rând: al monedelor și al
     titlului „Date financiare" (al doilea stă la ~305px pe un ecran de 375, deci caseta
     ancorată de el ar ieși cu ~260px). Se deschid pe rând, nu simultan. */
  .cs-monede-grup .app-help, .cs-rand-sus-titlu .h4-special .app-help { position: static; }
  .cs-monede-grup .app-help-box,
  .cs-rand-sus-titlu .h4-special .app-help-box { left: 0; right: 0; top: 100%; width: auto; max-width: none; }
  .cs-monede-grup .app-help-box:before,
  .cs-rand-sus-titlu .h4-special .app-help-box:before { display: none; }

  /* Aceeași boală la tooltipul de lângă denumirea firmei: iconul stă la capătul numelui,
     deci la 390px caseta pornea de la x=255 și ieșea 185px în dreapta (măsurat). Ancorată
     de titlu, se întinde pe lățimea lui. */
  .ap-titlu { position: relative; }
  .ap-titlu .app-help { position: static; }
  .ap-titlu .app-help-box { left: 0; right: 0; top: 100%; width: auto; max-width: none; }
  .ap-titlu .app-help-box:before { display: none; }
}

/* comutatorul de moneda din analiza firmei */
.cs-rand-sus { display: flex; align-items: center; justify-content: space-between;
               gap: 12px; flex-wrap: wrap; }
.cs-monede { display: inline-flex; border: 1px solid #dfe4e8; border-radius: 6px;
             overflow: hidden; background: #fff; }
.cs-moneda { border: 0; background: #fff; color: #5b6570; font-size: 11px; font-weight: 600;
             letter-spacing: .4px; padding: 4px 11px; cursor: pointer; line-height: 18px; }
.cs-moneda + .cs-moneda { border-left: 1px solid #edf0f3; }
.cs-moneda:hover { background: #f5f7f9; color: #2b333a; }
.cs-moneda-activa, .cs-moneda-activa:hover { background: #2b333a; color: #fff; cursor: default; }
.cs-moneda-asteapta { opacity: .5; cursor: progress; }
.cs-curs { margin: -4px 0 12px; font-size: 11px; color: #7a838c; }
/* butoanele de moneda + semnul intrebarii cu cursul folosit, lipite */
.cs-monede-grup { display: inline-flex; align-items: center; gap: 2px; }

/* banda de detalii din cardul de scor de plata (restante + rezumatul istoricului) */
.cs-card-banda { border-top: 1px solid #edf0f3; padding: 7px 16px 8px; font-size: 11px;
                 line-height: 1.45; border-radius: 0 0 7px 7px; margin-top: auto; }
.cs-banda-stare { font-weight: 600; }
.cs-banda-ok { color: #256b34; }
.cs-banda-warn { color: #8a6116; }
.cs-banda-danger { color: #8f2626; }
.cs-banda-rezumat { color: #7a838c; margin-top: 1px; }
/* increderea evaluarii si trendul, sub scorul Duviana: acelasi rand mic, una sub alta */
.cs-card-banda .cs-banda-stare + .cs-banda-stare { margin-top: 2px; }
.cs-banda-neutral { color: #5b6570; }
/* cardul se intinde pe toata inaltimea coloanei, ca banda sa stea jos, aliniata cu
   marginea celorlalte carduri, nu agatata sub textul lui */
.cs-card { display: flex; flex-direction: column; }
.cs-card-corp { flex: 1 1 auto; }

/* Scorul de plata in detaliu (templates/customer/_payment_score.tpl).
   Stilurile stateau intr-un <style> din scor.tpl; sectiunea s-a mutat in tabul
   "Facturi", deci au venit aici, unde le vede orice sablon care o include. */
.client-score-card { background: #fff; border-radius: 8px; border: 1px solid #e0e0e0;
                     padding: 24px; margin-bottom: 20px; }
.client-score-card .score-section { margin: 16px 0; }
.client-score-card .scor-client { display: flex; align-items: center; gap: 12px;
                                  font-size: 1.1em; margin-bottom: 10px; }
.client-score-card .progress { height: 18px; border-radius: 9px; background: #eee; overflow: hidden; }
.client-score-card .progress-bar { height: 100%; border-radius: 9px; transition: width .4s; }
/* Detaliul scorului de plata din capul tabului „Facturi": placa (aceeasi ca in fisa) in
   stanga, explicatia la dreapta ei. Pe ecrane inguste, una sub alta. */
.ps-detaliu { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 14px; margin: 14px 0 18px; }
.ps-detaliu .anaf-id-placa { flex: 0 0 auto; width: 320px; max-width: 100%; }
.ps-detaliu-nota { flex: 1 1 320px; margin: 0; }
/* Sursa datei de plata, sub data, in istoricul din tabul „Facturi": confirmata din incasari,
   marcata in aplicatie sau ziua conversiei proformei. Inline ar sta lipita de data. */
.ps-sursa { display: block; font-size: 11px; font-style: normal; color: #7a838c; line-height: 1.3; }
.client-score-card .arata-text { display: none; background: #f0f4f8; border-radius: 6px;
                                 padding: 10px 14px; margin: 6px 0 10px; font-size: .9em; color: #444; }

/* Liste de detalii in popover-ul de metodologie (`_help.tpl`), folosite de cardurile de
   scor: componentele notei, compunerea ratingului, capitalul de lucru. */
.app-help-lista { display: block; margin-top: 7px; padding-top: 6px;
                  border-top: 1px solid rgba(255,255,255,.14); }
.app-help-titlu { display: block; color: #fff; font-weight: 600; margin-bottom: 3px; }
.app-help-rand { display: flex; align-items: baseline; justify-content: space-between;
                 gap: 14px; padding: 1px 0; }
.app-help-rand b { color: #fff; white-space: nowrap; }
.app-help-rand i { color: #9fb0c0; font-style: normal; }
/* Sub-criteriile unei componente, sub eticheta ei (din ce e facuta nota). */
.app-help-sub { display: block; font-style: normal; font-size: 11px; line-height: 1.35;
                color: #93a7b8; margin: 1px 0 2px 0; }
.app-help-nota { display: block; margin-top: 6px; color: #b6c2cd; }
/* Legenda de culori dintr-un popover de scor: bulina in culoarea barei de deasupra cardului
   (paleta sta o singura data, la `.cs-card-bara`), iar treapta pe care se afla firma e scrisa
   alb, ca sa se vada unde cade ea in scara. */
.app-help-culoare { display: inline-block; width: 9px; height: 9px; border-radius: 2px;
                    margin-right: 7px; background: #94a3b8; }
.app-help-rand-on > span, .app-help-rand-on b { color: #fff; font-weight: 600; }

/* ==================================================================== */
/* Pagina „Date ANAF" — profil de firmă (templates/customer/anaf/)       */
/*                                                                      */
/* ATENȚIE la dark mode: `duviana-dark.css` conține                     */
/*   .tema-dark p, .tema-dark span { color: var(--text-dark) !important }*/
/* deci niciun text colorat nu stă în <span> sau <p>. Componentele de    */
/* aici folosesc <div>, <b>, <i>, <address>. `!important` e interzis în  */
/* cod nou (doar în @media print), deci regula se ocolește, nu se bate.  */
/* ==================================================================== */

.ap-profil { --ap-surface: #fff; --ap-alt: #fafbfc;
             --ap-border: #e3e8ee; --ap-text: #1a2734; --ap-mut: #6b7a8c;
             --ap-slab: #9aa8b6; --ap-accent: #0eb5b5;
             --ap-pos: #1e9e64; --ap-pos-b: rgba(30,158,100,.12);
             --ap-neg: #d64545; --ap-neg-b: rgba(214,69,69,.12);
             --ap-warn: #d98324; --ap-warn-b: rgba(217,131,36,.12);
             --ap-info: #3a7bd5; --ap-info-b: rgba(58,123,213,.12);
             --ap-radius: 10px; --ap-gap: 16px;
             --ap-shadow: 0 1px 2px rgba(16,24,40,.04), 0 1px 3px rgba(16,24,40,.06);
             color: var(--ap-text); }

.ap-card { background: var(--ap-surface); border: 1px solid var(--ap-border);
           border-radius: var(--ap-radius); box-shadow: var(--ap-shadow);
           padding: 20px; margin-bottom: var(--ap-gap); }
.ap-card-titlu { font-size: 13px; font-weight: 600; text-transform: uppercase;
                 letter-spacing: .6px; color: var(--ap-mut); margin: 0 0 16px;
                 display: flex; align-items: center; gap: 8px; }

/* header — fiecare grup urcă în golul de lângă el: acțiunile pe rândul titlului, stările
   firmei pe rândul codurilor. Antetul pierde un rând întreg (163px → 120px la 1600px).
   ⚠️ NU toate trei pe un rând: la 1440px titlul (261) + stările (420) + butoanele (560) +
   spații cer 1273px, iar rândul are 1191 — măsurat. Așa, fiecare rând are un singur vecin
   de lungime variabilă. */
.ap-header-sus { display: flex; align-items: center; justify-content: space-between;
                 flex-wrap: wrap; gap: 8px 16px; min-width: 0; }
/* Titlul nu mai are marginea de dedesubt: distanțele le dă `gap`-ul rândului */
.ap-header-sus .ap-titlu { margin: 0; }
.ap-header-identitate { min-width: 0; margin-top: 8px; }
/* Rândul codurilor + stările firmei. Codurile rămân primele, stările curg după ele. */
.ap-header-rand { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px;
                  min-width: 0; }
.ap-header-rand .ap-badges { margin-top: 0; }

/*
   Sub 1200px rândul „titlu + butoane" nu mai încape la nume lungi (măsurat), iar butoanele ar cădea
   între titlu și datele firmei. Atunci antetul se desface pe verticală, în ordinea „cine e
   firma, apoi ce pot face cu ea": titlu → coduri, stări, adresă → butoane.
   ⚠️ `display: contents` scoate cutia rândului de sus, ca titlul și butoanele să devină
   frați cu identitatea și să poată fi ordonate cu `order` — altfel `order` n-ar avea efect,
   fiind în containere diferite. `.ap-header-sus` n-are decât flex și gap de pierdut.
*/
@media (max-width: 1199px) {
  .ap-header { display: flex; flex-direction: column; }
  .ap-header-sus { display: contents; }
  .ap-header-sus .ap-titlu { order: 1; }
  .ap-header-identitate { order: 2; }
  .ap-header-sus .ap-header-actiuni { order: 3; margin-left: 0; margin-top: 12px;
                                      justify-content: flex-start; }
  .ap-invechit { order: 4; }
}
/* Cele trei acțiuni, pe un singur rând, la dreapta. Erau una peste alta (reactualizarea sus,
   scurtăturile dedesubt), ceea ce făcea coloana din dreapta mai înaltă decât avea nevoie. */
.ap-header-actiuni { flex: 0 0 auto; display: flex; flex-wrap: wrap;
                     align-items: center; justify-content: flex-end; gap: 0; }
.ap-header-navig { display: flex; flex-wrap: wrap; gap: 0; }
/* `.but` vine cu `margin: 0 5px 5px 0`; aici distanțele le dă rândul, nu butonul */
.ap-header-actiuni .but { margin: 0 0 0 8px; }
.ap-header .anaf-panel { margin: 0; }
.ap-titlu { font-size: 26px; font-weight: 600; letter-spacing: -.4px; margin: 0 0 6px;
            color: var(--ap-text); }
.ap-meta { font-size: 13px; color: var(--ap-mut); }
.ap-meta b { color: var(--ap-text); font-weight: 600; }
/* Codul CAEN cu semnul lui de întrebare, o singură bucată la rupere de rând. ⚠️ Își anulează
   explicit stilul de `<b>` din regula de deasupra: e grupare, nu accent. */
.ap-meta .ap-meta-caen { color: inherit; font-weight: inherit; white-space: nowrap; }
.ap-meta i { color: var(--ap-slab); font-style: normal; margin: 0 4px; }
.ap-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.ap-invechit { margin-top: 12px; padding: 8px 12px; border-radius: 6px;
               background: var(--ap-warn-b); color: var(--ap-warn); font-size: 12px; }
/*
   Rândul de identificare din capul tabului „Date publice": „Detalii generale" în stânga,
   banda de plăci în dreapta (26.09.2026).

   Bazele de flex sunt alese ca perechea să se rupă pe două rânduri exact când tabelul n-ar
   mai fi citibil: 420 + 520 + 16 = 956px de conținut. Sub atât (≈1090px fereastră, cu bara
   laterală de 112px) fiecare trece pe lățime întreagă, ca înainte. Peste, spațiul liber se
   împarte 1 : 1,25 în favoarea plăcilor, care au nevoie de multiplii lor de 145px; la 1440px
   ies 524 / 651.
*/
.ap-rand-id { display: flex; flex-wrap: wrap; gap: 0 16px; align-items: flex-start; }
.ap-rand-id-detalii { flex: 1 1 420px; min-width: 0; }
.ap-rand-id-placi { flex: 1.25 1 520px; min-width: 0; }
/*
   ⚠️ Plafonul de coloane scade de la 9 la 4: în coloana din dreapta, formula lată ar da 6
   coloane la 1920px, deci 6 + 1 — o placă singură pe rândul al doilea. Cu patru ies mereu
   4 + 3, două rânduri care se potrivesc pe înălțime cu tabelul de alături. 24px = cele trei
   spații dintre 4 coloane; restul formulei (pragul de 145px, cedarea la 47% pe telefon) e
   neschimbat — vezi `.anaf-id-mini-lat`.
*/
.ap-rand-id-placi .anaf-id-mini-lat {
  grid-template-columns: repeat(auto-fit,
      minmax(max(min(145px, 47%), calc((100% - 24px) / 4)), 1fr)); }

/* Nota „de unde vin datele" NU mai are regulă proprie: din 26.09.2026 e tooltipul de lângă
   denumire (`_help.tpl`), nu un paragraf în josul antetului. */

.ap-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px;
            border-radius: 999px; font-size: 11px; font-weight: 600; text-transform: uppercase;
            letter-spacing: .5px; line-height: 1.6; white-space: nowrap; }
.ap-badge--pos  { background: var(--ap-pos-b);  color: var(--ap-pos); }
.ap-badge--neg  { background: var(--ap-neg-b);  color: var(--ap-neg); }
.ap-badge--warn { background: var(--ap-warn-b); color: var(--ap-warn); }
.ap-badge--info { background: var(--ap-info-b); color: var(--ap-info); }
.ap-badge--mut  { background: var(--ap-alt); color: var(--ap-mut); }

/* KPI */
.ap-kpi { display: grid; grid-template-columns: repeat(auto-fit, minmax(226px, 1fr));
          gap: var(--ap-gap); }
.ap-kpi-card { padding: 14px 16px; }
.ap-kpi-eticheta { font-size: 11px; text-transform: uppercase; letter-spacing: .6px;
                   color: var(--ap-mut); }
.ap-kpi-eticheta i { font-style: normal; color: var(--ap-slab); margin-left: 4px; }
.ap-kpi-valoare { font-size: 22px; font-weight: 600; letter-spacing: -.5px; margin: 4px 0 2px;
                  font-variant-numeric: tabular-nums; color: var(--ap-text); }
.ap-kpi-valoare.ap-negativ { color: var(--ap-neg); }
.ap-kpi-jos { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ap-kpi-spark { color: var(--ap-accent); line-height: 0; }
.ap-kpi-spark .spark--neg { color: var(--ap-neg); }
.ap-kpi-spark .spark--pos { color: var(--ap-pos); }
.ap-delta { font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; gap: 4px; }
.ap-delta--pos { color: var(--ap-pos); }
.ap-delta--neg { color: var(--ap-neg); }
.ap-delta--mut { color: var(--ap-mut); }

/*
   Cele patru KPI-uri stateau unul sub altul, fiecare pe toata latimea, cu ~140px de continut
   intr-un card de 350px — 501px de pagina pentru patru numere. Doua pe rand le aduc la ~250px.
   Cifra scade la 18px ca „14.186.401 RON" sa incapa intr-o coloana de ~167px, iar variatia si
   sparkline-ul trec unul sub altul cand nu incap alaturi („revenire pe profit" e lat).
*/
@media (max-width: 767px) {
  .ap-kpi { grid-template-columns: 1fr 1fr; gap: 10px; }
  .ap-kpi-card { padding: 12px; }
  .ap-kpi-valoare { font-size: 18px; }
  .ap-kpi-jos { flex-wrap: wrap; row-gap: 2px; }
  .ap-kpi-spark svg { width: 100%; max-width: 72px; }
}

/* rate */
.ap-rate { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.ap-rata { border-left: 2px solid var(--ap-border); padding-left: 12px; }
/*
   Pe telefon cele 13 rate stau DOUA pe rand: fiecare e o eticheta scurta si un numar scurt
   („0,18", „86,7%", „~50 zile"), deci pe toata latimea ecranului ocupau 975px pentru mai
   putin de jumatate de continut. Doua coloane le aduc la ~550px, fara ca vreo valoare sa se
   rupa in doua randuri.

   Tooltipul (`width: 330px`) nu incape intr-o coloana de ~157px, deci iese din ea: ramane
   ancorat de rata, ca sa apara chiar sub indicatorul lui, dar se intinde peste ambele coloane
   (`200%` + gap). Rata din dreapta se agata de marginea din dreapta, altfel caseta ar pleca in
   afara ecranului. Fara regula asta tooltipul iesea din ecran cu pana la 204px (masurat la
   390px latime, 11 din cele 18 tooltipuri ale paginii).
*/
@media (max-width: 767px) {
  .ap-rate { grid-template-columns: 1fr 1fr; gap: 14px 10px; }
  .ap-rata { position: relative; }
  .ap-rata .app-help { position: static; }
  .ap-rata .app-help-box { top: 100%; left: 0; right: auto;
                           width: calc(200% + 10px); max-width: none; }
  .ap-rata:nth-child(even) .app-help-box { left: auto; right: 0; }
  .ap-rata .app-help-box:before { display: none; }
}
.ap-rata-eticheta { font-size: 11px; text-transform: uppercase; letter-spacing: .5px;
                    color: var(--ap-mut); display: flex; align-items: center; }
.ap-rata-valoare { font-size: 19px; font-weight: 600; font-variant-numeric: tabular-nums;
                   color: var(--ap-text); margin-top: 2px; }
.ap-rata-trend { font-size: 11px; margin-left: 4px; }
.ap-trend--bun { color: var(--ap-pos); }
.ap-trend--rau { color: var(--ap-neg); }
.ap-rata-jos { font-size: 11px; color: var(--ap-slab); min-height: 16px; }

/* grafic */
.ap-grafic { height: 320px; width: 100%; }
.ap-grafic a[href*="canvasjs"], .ap-grafic .canvasjs-chart-credit { display: none !important; }

/* tabele */
.ap-tabel { width: 100%; border-collapse: collapse; font-size: 13px; }
.ap-tabel th, .ap-tabel td { padding: 7px 10px; border-bottom: 1px solid var(--ap-border); }
.ap-tabel thead th { position: sticky; top: 0; background: var(--ap-surface); z-index: 1;
                     font-size: 11px; text-transform: uppercase; letter-spacing: .5px;
                     color: var(--ap-mut); font-weight: 600; }
.ap-tabel tbody tr:hover { background: var(--ap-alt); }
.ap-num { text-align: right; font-variant-numeric: tabular-nums; }
.ap-negativ { color: var(--ap-neg); }
.ap-an-curent { background: rgba(14,181,181,.04); font-weight: 600; }
.ap-tabel--bilant { font-size: 12px; }
.ap-tabel--bilant .ap-lipit { position: sticky; left: 0; background: var(--ap-surface);
                              text-align: left; font-weight: 500; }
.ap-sub { padding-left: 26px; color: var(--ap-mut); }
.ap-grupa th { background: var(--ap-alt); font-size: 11px; text-transform: uppercase;
               letter-spacing: .6px; color: var(--ap-mut); }
.ap-spark-cell { color: var(--ap-slab); line-height: 0; width: 70px; }
.ap-spark-cell .spark--pos { color: var(--ap-pos); }
.ap-spark-cell .spark--neg { color: var(--ap-neg); }
.ap-scroll { max-height: 70vh; overflow: auto; }

/* definition grid */
.ap-grup-titlu { font-size: 11px; text-transform: uppercase; letter-spacing: .6px;
                 color: var(--ap-slab); margin: 14px 0 6px; padding-top: 10px;
                 border-top: 1px solid var(--ap-border); }
.ap-grup-titlu:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }
.ap-dl { display: grid; grid-template-columns: max-content 1fr max-content 1fr;
         gap: 6px 14px; align-items: baseline; }
.ap-dt { font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: var(--ap-mut); }
.ap-dd { font-size: 13px; color: var(--ap-text); }
.ap-dd-extra { font-size: 11px; color: var(--ap-slab); }

/* adrese */
.ap-adrese { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px; }
.ap-adresa-titlu { font-size: 11px; text-transform: uppercase; letter-spacing: .5px;
                   color: var(--ap-mut); display: flex; align-items: center; gap: 6px;
                   flex-wrap: wrap; margin-bottom: 6px; }
.ap-adresa-text { font-size: 13px; line-height: 1.6; font-style: normal; color: var(--ap-text);
                  margin: 0 0 6px; }
.ap-harta { font-size: 12px; color: var(--ap-accent); }

/* timeline TVA */
.ap-timeline { position: relative; padding-left: 22px; }
.ap-timeline:before { content: ""; position: absolute; left: 5px; top: 4px; bottom: 4px;
                      width: 2px; background: var(--ap-border); }
.ap-tl-item { position: relative; padding: 0 0 16px; }
.ap-tl-item:last-child { padding-bottom: 0; }
.ap-tl-punct { position: absolute; left: -22px; top: 4px; width: 12px; height: 12px;
               border-radius: 50%; border: 2px solid var(--ap-border); background: var(--ap-surface); }
.ap-tl--activ .ap-tl-punct { background: var(--ap-pos); border-color: var(--ap-pos); }
.ap-tl--anulat .ap-tl-punct { background: var(--ap-neg); border-color: var(--ap-neg); }
.ap-tl-titlu { font-size: 13px; font-weight: 600; display: flex; align-items: center;
               gap: 8px; flex-wrap: wrap; color: var(--ap-text); }
.ap-tl-durata { font-size: 11px; color: var(--ap-slab); }
.ap-tl-motiv { font-size: 12px; color: var(--ap-mut); margin-top: 2px; }

/* audit */
.ap-audit-item { display: flex; gap: 12px; padding: 10px 0;
                 border-bottom: 1px solid var(--ap-border); }
.ap-audit-item:last-child { border-bottom: 0; }
.ap-audit-avatar { flex: 0 0 30px; height: 30px; border-radius: 50%; background: var(--ap-alt);
                   color: var(--ap-mut); font-size: 11px; font-weight: 600;
                   display: flex; align-items: center; justify-content: center; }
.ap-audit-cap { font-size: 12px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
                color: var(--ap-text); }
.ap-audit-cap i { font-style: normal; color: var(--ap-mut); }
.ap-audit-campuri { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.ap-pastila { background: var(--ap-alt); color: var(--ap-mut); border-radius: 4px;
              padding: 1px 7px; font-size: 11px; font-weight: 500; }
.ap-audit-eroare { font-size: 12px; color: var(--ap-neg); margin-top: 4px; }

/* ── Dosare în instanță (portal.just.ro) ─────────────────────────────────────────────────
   Folosește variabilele `--ap-*`, deci se recolorează singur pe tema întunecată.
   Cele doua tabele arata DELIBERAT diferit: cel incert e estompat si cu bordura intrerupta,
   ca sa nu poata fi citit din greseala ca fiind al firmei. */
.dos-nota { display: flex; align-items: flex-start; gap: 8px; font-size: 13px;
            border-radius: 6px; padding: 9px 12px; margin-bottom: 10px; }
.dos-nota i { font-size: 18px; line-height: 1.3; flex: 0 0 auto; }
.dos-nota--info   { background: var(--ap-info-b); color: var(--ap-info); }
.dos-nota--warn   { background: var(--ap-warn-b); color: var(--ap-warn); }
.dos-nota--danger { background: var(--ap-neg-b);  color: var(--ap-neg); }
.dos-nota b { font-weight: 700; }

/* Rândul de calități + butonul termenelor la capătul lui (27.09.2026). Flex, nu grilă:
   grila `auto-fit` întindea cele cinci cutii pe toată lățimea cardului (420px fiecare la
   1600px, pentru un număr și o etichetă de 11px). Acum cresc doar până la 190px — cât cere
   „PÂRÂT / INTIMAT", eticheta cea mai lungă — iar restul rândului rămâne butonului. */
.dos-grupe { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0; }
/* Cutiile sunt linkuri: filtrează tabelul pe calitatea lor. `display: block` + `color:
   inherit` — un `<a>` ar fi luat altfel culoarea și sublinierea temei. */
.dos-grupa { flex: 1 1 110px; max-width: 190px; display: block; color: inherit;
             background: var(--ap-alt); border: 1px solid transparent; border-radius: 8px;
             padding: 10px 12px; transition: border-color .15s ease, background .15s ease; }
.dos-grupa:hover, .dos-grupa:focus-visible { border-color: var(--ap-accent);
                                             color: inherit; text-decoration: none; }
.dos-grupa-on { border-color: var(--ap-accent); background: var(--ap-info-b); }
.dos-toate { margin-left: auto; font-weight: 600; text-transform: none; letter-spacing: 0; }
.dos-toate .mso { font-size: 14px; vertical-align: -2px; }
.dos-grupa-nr { font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums;
                color: var(--ap-text); display: block; }
.dos-grupa-et { font-size: 11px; text-transform: uppercase; letter-spacing: .5px;
                color: var(--ap-mut); }
.dos-g--debitor .dos-grupa-nr, .dos-g--penal .dos-grupa-nr { color: var(--ap-neg); }
.dos-g--creditor .dos-grupa-nr { color: var(--ap-info); }

.dos-sectiune-titlu { font-size: 11px; font-weight: 600; text-transform: uppercase;
                      letter-spacing: .6px; color: var(--ap-mut); margin: 16px 0 8px;
                      display: flex; align-items: center; gap: 8px; }

/* Butonul care deschide termenele: un `<summary>` îmbrăcat în buton. Închis, e ultimul
   element al rândului de calități; deschis, trece pe rândul lui (`flex: 1 1 100%`), fiindcă
   grila de dedesubt cere 240px de coloană — în lățimea butonului ar fi ieșit o coloană. */
.dos-termene-det { flex: 0 0 auto; align-self: center; }
.dos-termene-det[open] { flex: 1 1 100%; align-self: stretch; }
.dos-termene-det[open] .dos-termene { margin-top: 10px; }
.dos-termene-btn { list-style: none; cursor: pointer; display: inline-flex; align-items: center;
                   gap: 8px; padding: 9px 14px; border: 1px solid var(--ap-border);
                   border-radius: 8px; background: var(--ap-alt); color: var(--ap-mut);
                   font-size: 11px; font-weight: 600; text-transform: uppercase;
                   letter-spacing: .5px; }
/* marcatorul nativ: `display: inline-flex` îl scoate în Blink/WebKit, `list-style` în Firefox */
.dos-termene-btn::-webkit-details-marker { display: none; }
.dos-termene-btn:hover, .dos-termene-btn:focus-visible { border-color: var(--ap-accent);
                                                         color: var(--ap-text); }
.dos-termene-btn i { font-size: 16px; }
.dos-termene-btn:after { content: "\f078"; font-family: "Font Awesome 5 Free"; font-weight: 900;
                         font-size: 10px; transition: transform .15s ease; }
.dos-termene-det[open] .dos-termene-btn:after { transform: rotate(180deg); }
.dos-termene-nr { background: var(--ap-accent); color: #fff; border-radius: 999px;
                  padding: 1px 8px; font-variant-numeric: tabular-nums; }

.dos-termene { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.dos-termen { border-left: 2px solid var(--ap-accent); padding-left: 10px; }
.dos-termen-data { font-size: 14px; font-weight: 600; color: var(--ap-text); }
.dos-termen-det { font-size: 11px; color: var(--ap-mut); }

/* Lista de dosare: primele cinci rânduri, restul din buton (27.09.2026). Rândurile sunt în
   pagină de la început — butonul nu cere nimic serverului —, iar cele două etichete ale lui se
   schimbă din CSS, ca să rămână traduse (tiparul din `cantarperfes/consum.tpl`). */
.dos-rand-extra { display: none; }
.dos-lista.dos-extins .dos-rand-extra { display: table-row; }
.dos-mai { margin-top: 10px; }
.dos-mai-putin { display: none; }
.dos-lista.dos-extins .dos-mai-mult { display: none; }
.dos-lista.dos-extins .dos-mai-putin { display: inline; }
.dos-lista.dos-extins .dos-mai .mso { transform: rotate(180deg); }

.dos-tabel th[scope="row"] { font-weight: 600; white-space: nowrap; }
.dos-obiect { font-size: 11px; color: var(--ap-slab); font-weight: 400; white-space: normal; }
.dos-viitor { color: var(--ap-accent); font-weight: 600; }
.dos-rand-grav th[scope="row"] { color: var(--ap-neg); }

/* Numarul dosarului duce la cautarea lui pe portalul public. Sageata de „alt tab" e mica si
   apare doar la hover, ca sa nu concureze cu numarul. */
.dos-link { color: var(--ap-accent); text-decoration: none;
            display: inline-flex; align-items: baseline; gap: 3px; }
.dos-link:hover, .dos-link:focus { color: var(--ap-accent); text-decoration: underline; }
.dos-link i { font-size: 13px; opacity: .45; }
.dos-link:hover i, .dos-link:focus i { opacity: 1; }

/* Nota despre limita metodei sta la finalul cardului, dupa liste, deci are nevoie de aer. */
.dos-nota--metoda { margin: 16px 0 0; }

/* Card care e tinta unei ancore (`…/anaf#dosare`, din placuta de pe Dashboard). Bara de sus e
   `position: fixed`, deci saltul nativ ar aseza cardul FIX sub ea si i-ar ascunde titlul.
   `--mt-header` e inaltimea reala a barei, masurata de `js/perp/menu-hover.js` (65-66px).
   Regula e respectata si de saltul browserului, si de `scrollIntoView` — spre deosebire de un
   `scrollBy` din JS, pe care browserul il suprascrie la incarcare. */
.ap-ancora { scroll-margin-top: calc(var(--mt-header, 66px) + 14px); }

/* ====================================================================== */
/* Bara de derulare a tabelelor (27.09.2026, cererea utilizatorului)      */
/*                                                                        */
/* Pe telefon și pe macOS bara e „overlay": apare doar cât tragi de ea,   */
/* deci un tabel mai lat decât ecranul arată ca un tabel tăiat — nimic nu */
/* spune că mai e conținut la dreapta. `scrollbar-width: thin` o scoate   */
/* din modul overlay: ocupă loc în layout și rămâne vizibilă cât timp     */
/* există derulare, iar `scrollbar-color` îi dă culoarea aplicației.      */
/*                                                                        */
/* ⚠️ Doar pe învelișurile de tabel. Barele „ascunse dinadins" din        */
/* aplicație — `.carusel` (taburile fișei), cipsurile din căutarea        */
/* inteligentă — folosesc `::-webkit-scrollbar { display: none }` și NU   */
/* trebuie prinse de regula asta.                                         */
/* ⚠️ `auto`, nu `scroll`: un tabel care încape nu primește bară goală.    */
/* ====================================================================== */
/*
   ⚠️ Culoarea aplicației e DOAR pe bara orizontală; cea verticală rămâne cum era
   (decizia utilizatorului, 27.09.2026).

   ⚠️ Ce funcționează de fapt în Chrome-ul de azi, măsurat, nu presupus: regulile
   `::-webkit-scrollbar*` sunt IGNORATE când elementul are `scrollbar-width`/`scrollbar-color`
   — grosimea și culoarea vin de la proprietățile standard. Testul: cu `background: #ff0000`
   pe `::-webkit-scrollbar-thumb` bara a rămas gri, iar scoțând `scrollbar-width: thin` bara a
   sărit de la 10px la 15 (nativ). Deci `:horizontal` / `:vertical` nu ajută aici:
   proprietățile standard se dau pe ELEMENT, nu pe axă.
   Concluzia: un element care derulează pe ambele axe nu poate avea orizontala colorată și
   verticala gri. Singurul din aplicație e tabelul de bilanț (`.ap-scroll`, `max-height: 70vh`),
   tratat separat mai jos.
   Regulile `::-webkit-scrollbar*` rămân ca plasă pentru motoarele fără proprietățile standard
   (Safari, Chrome vechi), unde `:horizontal` chiar funcționează.
*/
.table-responsive,
#invoices-list,
.fa-tabel {
  scrollbar-width: thin;
  scrollbar-color: var(--mov) rgba(0, 0, 0, .07);
}

.table-responsive::-webkit-scrollbar:horizontal { height: 10px; }
#invoices-list::-webkit-scrollbar:horizontal,
.fa-tabel::-webkit-scrollbar:horizontal { height: 10px; }
.table-responsive::-webkit-scrollbar-track:horizontal,
#invoices-list::-webkit-scrollbar-track:horizontal,
.fa-tabel::-webkit-scrollbar-track:horizontal {
  background: rgba(0, 0, 0, .07); border-radius: 999px; }
.table-responsive::-webkit-scrollbar-thumb:horizontal,
#invoices-list::-webkit-scrollbar-thumb:horizontal,
.fa-tabel::-webkit-scrollbar-thumb:horizontal {
  background: var(--mov); border-radius: 999px;
  border: 2px solid transparent; background-clip: padding-box; }
/* pe fundal închis, canalul deschis ar fi o dungă albă */
.tema-dark .table-responsive,
.tema-dark #invoices-list,
.tema-dark .fa-tabel { scrollbar-color: var(--mov) rgba(255, 255, 255, .08); }
.tema-dark .table-responsive::-webkit-scrollbar-track:horizontal,
.tema-dark #invoices-list::-webkit-scrollbar-track:horizontal,
.tema-dark .fa-tabel::-webkit-scrollbar-track:horizontal {
  background: rgba(255, 255, 255, .08); }

/*
   Bilanțul complet derulează și pe verticală (are `max-height`), deci ar fi primit o bară
   verticală colorată — exact ce nu se vrea. Pe desktop rămâne cu barele browserului, ca
   înainte: acolo sunt oricum permanent vizibile.
*/
.ap-scroll { scrollbar-width: auto; scrollbar-color: auto; }

@media (max-width: 767px) {
  /*
     Pe telefon tabelul nu mai derulează pe verticală în cutia lui: `max-height` dispare și
     derulează pagina. Rămâne o singură axă — cea orizontală —, deci primește bara colorată
     ca toate celelalte tabele. În plus, o derulare verticală într-o cutie se bate, pe
     atingere, cu derularea paginii.
  */
  .ap-scroll { max-height: none; scrollbar-width: thin;
               scrollbar-color: var(--mov) rgba(0, 0, 0, .07); }
  .tema-dark .ap-scroll { scrollbar-color: var(--mov) rgba(255, 255, 255, .08); }
}
.dos-subsol { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--ap-border);
              font-size: 11px; color: var(--ap-mut);
              display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dos-subsol .but { margin: 0; }

/* diverse */
.ap-doua { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
           gap: var(--ap-gap); align-items: start; }
.ap-doua > .ap-card { margin-bottom: 0; }
.ap-details > .ap-summary { cursor: pointer; list-style: none; }
.ap-details > .ap-summary::-webkit-details-marker { display: none; }
.ap-summary-titlu { margin-bottom: 2px; }
.ap-summary-nota { font-size: 11px; color: var(--ap-slab); }
.ap-details[open] > .ap-summary { margin-bottom: 14px; }
.ap-gol { text-align: center; color: var(--ap-mut); padding: 34px 20px; }
.ap-gol i { font-size: 26px; color: var(--ap-slab); }
.ap-gol-titlu { font-size: 15px; font-weight: 600; color: var(--ap-text); margin: 10px 0 4px; }
.ap-gol-text { font-size: 13px; max-width: 460px; margin: 0 auto; }

/* dark mode: fiecare suprafata isi declara fundalul, altfel ramane alba sub un text
   recolorat pentru fundal inchis */
.tema-dark .ap-profil { --ap-surface: #1b242d; --ap-alt: #212c37; --ap-border: #2c3945;
                        --ap-text: #e4eaf0; --ap-mut: #94a3b3; --ap-slab: #6b7b8b;
                        --ap-accent: #2fd0d0;
                        --ap-pos: #34c98a; --ap-pos-b: rgba(52,201,138,.16);
                        --ap-neg: #f0736f; --ap-neg-b: rgba(240,115,111,.16);
                        --ap-warn: #eba851; --ap-warn-b: rgba(235,168,81,.16);
                        --ap-info: #6aa3ef; --ap-info-b: rgba(106,163,239,.16);
                        --ap-shadow: 0 1px 2px rgba(0,0,0,.30); }
.tema-dark .ap-an-curent { background: rgba(47,208,208,.08); }

/* Cardurile de scor (.cs-*) au acelasi defect: fundal alb care ramane alb sub textul
   recolorat de tema. Se repara aici, ca sa nu arate rupt langa pagina noua. */
.tema-dark .cs-card, .tema-dark .cs-tile { background: #1b242d; border-color: #2c3945; }
/* Canalul gol al scarii, DOAR pe cardurile mari: griul deschis de pe tema clara ar iesi pe
   fundalul inchis ca o dunga aprinsa.
   ⚠️ Scris `.tema-dark .cs-card .cs-scara`, nu `.tema-dark .cs-scara`: panoul de identificare
   din capul fisei (`.anaf-id-mini`, cu placile lui) NU are inca tema intunecata — ramane alb
   pe #f8fafc si in modul dark. Un canal de #2c3945 pe o placa deschisa iese o dunga aproape
   neagra, exact greseala opusa. Daca panoul primeste candva tema, se muta si regula asta. */
.tema-dark .cs-card .cs-scara { background: #2c3945; }
.tema-dark .cs-card-banda { border-top-color: #2c3945; }
.tema-dark .cs-card-partial { background: #2a2418; border-top-color: #3d3420; color: #eba851; }
.tema-dark .cs-tile-nr { color: #e4eaf0; }
.tema-dark .cs-badge-ok { background: rgba(52,201,138,.16); color: #34c98a; }
.tema-dark .cs-badge-neutral { background: #212c37; color: #94a3b3; }
.tema-dark .cs-badge-warn { background: rgba(235,168,81,.16); color: #eba851; }
.tema-dark .cs-badge-danger { background: rgba(240,115,111,.16); color: #f0736f; }
.tema-dark .cs-card-nr.cs-r1 { color: #34c98a; }
.tema-dark .cs-card-nr.cs-r2 { color: #8fd35f; }
.tema-dark .cs-card-nr.cs-r3 { color: #e6c34a; }
.tema-dark .cs-card-nr.cs-r4 { color: #eba851; }
.tema-dark .cs-card-nr.cs-r5 { color: #f0736f; }
.tema-dark .cs-card-nr.cs-r6 { color: #ff8a80; }
.tema-dark .cs-moneda { background: #1b242d; color: #94a3b3; }
.tema-dark .cs-moneda-activa, .tema-dark .cs-moneda-activa:hover { background: #2fd0d0; color: #10181f; }
.tema-dark .cs-monede { border-color: #2c3945; }
/* Linia de sub titlul „Date financiare" e pe RÂND, nu pe `<h4>`, deci regula de temă întunecată
   a titlului (`duviana-dark.css`: `.tema-dark .h4-special { border-color: … }`) n-o mai prinde. */
.tema-dark .cs-rand-sus-titlu { border-bottom-color: var(--tabel-border-dark); }

@media (max-width: 768px) {
  .ap-dl { grid-template-columns: max-content 1fr; }
  .ap-header-actiuni { width: 100%; }
  .ap-header-actiuni .but { margin: 0 8px 8px 0; }
  .ap-titlu { font-size: 21px; }

  /*
     Antetul firmei, pe telefon (27.09.2026, cererea utilizatorului): datele de identificare
     centrate, iar butoanele două pe rândul al doilea.

     Centrarea atinge fiecare nivel, nu doar `text-align`: codurile și badge-urile stau în
     `.ap-header-rand`, care e flex — pe el contează `justify-content`.
  */
  .ap-titlu, .ap-meta, .ap-meta-sediu { text-align: center; }
  .ap-header-rand, .ap-badges, .ap-header-actiuni { justify-content: center; }

  /*
     „Reactualizează datele" lângă „Editare client". Cele două sunt în containere diferite —
     scurtăturile în `.ap-header-navig`, reactualizarea în panoul ANAF —, deci nu pot ajunge
     pe același rând cât timp `.ap-header-navig` e o cutie: panoul ar fi împins sub ea.
     `display: contents` o desființează, iar cele trei butoane devin frați în același flex.
     Același tipar ca la `.ap-header-sus` sub 1200px.
     ⚠️ Ca perechea să încapă, „Date financiare complete" ia rândul întâi pe toată lățimea:
     altfel el și „Editare client" s-ar fi lipit primele (172 + 8 + 102 = 282 din 295 utili),
     iar reactualizarea ar fi rămas iar singură jos. Măsurat la 375px.
  */
  .ap-header-navig { display: contents; }
  /* ⚠️ `:not(:last-child)`: în „Date publice" scurtătura spre pagina curentă nu se randează,
     deci rămâne un singur buton în navigare — pe toată lățimea, el ar fi împins din nou
     reactualizarea pe rândul următor. Plin doar când chiar sunt două. */
  .ap-header-navig .but:first-child:not(:last-child) { flex: 1 1 100%; margin-right: 0; }

  /*
     Butoanele se strâng: la 14px și `padding: 0 22px`, „Editare client" (128) +
     „Reactualizează datele" (181) + semnul întrebării (20) cer 337px, iar cardul are 295
     utili. La 13px și 12px de padding ies 102 + 151 + 20 = 281. Măsurat, nu estimat.
  */
  .ap-header-actiuni .but { font-size: 13px; padding: 0 12px; }
}

@media print {
  .ap-profil { --ap-surface: #fff; }
  .ap-card { break-inside: avoid; box-shadow: none; border-color: #bbb; }
  .ap-header-actiuni, .anaf-panel, .but { display: none !important; }
  .ap-details > .ap-summary { display: none; }
  details { display: block !important; }
  /* Doua reguli pentru acelasi lucru: `display: block` deschidea un `<details>` inchis in
     motoarele vechi, dar in Chrome 131+ ascunderea trece prin `content-visibility` pe
     `::details-content`, unde regula aia n-are niciun efect (verificat in Chrome 153: la print
     se pierdeau bilantul strans, cele 11 „Vezi datele" si istoricul actualizarilor). */
  details::details-content { content-visibility: visible !important; }
  details:not([open]) > *:not(summary) { display: block !important; }
  /* Termenele stau intr-un `<details>` care e item de flex in randul de calitati: la tiparire
     se deschide singur, dar FARA atributul `open`, deci regula `[open] { flex: 1 1 100% }`
     nu se aplica si grila ar ramane pe latimea butonului. */
  .dos-termene-det { flex: 1 1 100% !important; }
  /* ⚠️ Și `display: grid` înapoi: regula de mai sus, cea pentru motoarele vechi, pune
     `display: block` pe TOȚI copiii unui `<details>` închis — grila de termene ieșea pe o
     singură coloană, 22 de rânduri (măsurat cu `emulateMedia('print')`). */
  .dos-termene-det:not([open]) > .dos-termene { display: grid !important; }
  /* Pe hârtie se tipăresc toate dosarele, nu primele cinci; butonul nu are ce căuta acolo. */
  .dos-rand-extra { display: table-row !important; }
  .dos-mai { display: none !important; }
  .ap-scroll { max-height: none !important; overflow: visible !important; }
}

/* Sectiunile colapsabile: `list-style:none` scoate marcatorul nativ, deci nimic nu mai
   arata ca sunt clicabile. Chevronul il inlocuieste si se roteste la deschidere. */
.ap-details > .ap-summary { display: flex; align-items: flex-start; gap: 10px; }
.ap-summary:before { content: "\f054"; font-family: "Font Awesome 5 Free"; font-weight: 900;
                     font-size: 11px; color: var(--ap-slab); margin-top: 2px;
                     transition: transform .15s ease; }
.ap-details[open] > .ap-summary:before { transform: rotate(90deg); }
.ap-summary:hover:before { color: var(--ap-accent); }
.ap-summary-titlu { margin-bottom: 0; }

/* banda de detalii din cardul de scor, pe tema intunecata: verdele/rosul de light mode
   sunt prea inchise pe fundal inchis si cad sub contrastul minim */
.tema-dark .cs-banda-ok { color: #34c98a; }
.tema-dark .cs-banda-warn { color: #eba851; }
.tema-dark .cs-banda-danger { color: #f0736f; }
.tema-dark .cs-banda-neutral { color: #94a3b3; }
.tema-dark .cs-banda-rezumat { color: #94a3b3; }
.tema-dark .cs-card-sub, .tema-dark .cs-tile-eticheta, .tema-dark .cs-tile-jos { color: #94a3b3; }
.tema-dark .cs-card-titlu { color: #e4eaf0; }
.tema-dark .cs-delta.cs-delta-sus { background: rgba(52,201,138,.16); color: #34c98a; }
.tema-dark .cs-delta.cs-delta-jos { background: rgba(240,115,111,.16); color: #f0736f; }
.tema-dark .cs-avertismente { color: #94a3b3; }

/* moneda in care sunt afisate sumele: se scrie mereu, inclusiv cand e leul */
.ap-moneda-nota { font-size: 11px; color: var(--ap-slab); margin: -6px 0 14px; }
.ap-unitate { font-size: 10px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase;
              color: var(--ap-slab); background: var(--ap-alt); border-radius: 999px;
              padding: 2px 8px; margin-left: 2px; }

/* moneda de langa o suma: mult mai mica decat cifra si decolorata, ca unitatea de masura
   din tile-urile de pe Dashboard. Lipita de valoare, la aceeasi marime, ocupa cat cifra. */
.ap-um { font-size: .55em; font-weight: 500; letter-spacing: .3px; color: var(--ap-slab);
         margin-left: 3px; vertical-align: baseline; }
.ap-unitate { font-size: 9px; padding: 2px 6px; }

/* ==================================================================== */
/* Secțiunea „Analiză vizuală" — graficele SVG generate pe server       */
/* (lib/Chart/, templates/customer/anaf/_grafice.tpl)                   */
/*                                                                      */
/* În SVG nu intră niciun hex: culorile vin toate de aici, ca variabile */
/* `--chart-*`, redefinite mai jos pentru tema întunecată. Gap-urile    */
/* dintre bare și inelele markerelor folosesc culoarea SUPRAFEȚEI — cu  */
/* un alb fix ar arăta ca niște tăieturi în grafic pe fundal închis.    */
/*                                                                      */
/* Interactivitatea e fără JavaScript: `:hover` și `:focus-visible` pe  */
/* grupul anului. `!important` doar în blocul de print.                 */
/* ==================================================================== */

.ap-profil { --chart-cat-1: #1f77b4; --chart-cat-2: #c2670a; --chart-cat-3: #6a51a3;
             --chart-cat-4: #0f766e; --chart-cat-5: #be185d;
             --chart-pos: #1e9e64; --chart-neg: #d64545; --chart-zero: #9aa8b6;
             --chart-ord-1: #0b3d4a; --chart-ord-2: #17808f; --chart-ord-3: #2cb0bc;
             --chart-ord-4: #7fd3da; --chart-ord-5: #c3ebef;
             --chart-muted: #9aa8b6; --chart-surface: #fff;
             --chart-grid: #eef2f6; --chart-band: rgba(30,158,100,.07); }

.tema-dark .ap-profil { --chart-cat-1: #5aa9e6; --chart-cat-2: #f0a43a; --chart-cat-3: #a78bfa;
                        --chart-cat-4: #2fd0d0; --chart-cat-5: #f472b6;
                        --chart-pos: #34c98a; --chart-neg: #f0736f; --chart-zero: #64748b;
                        --chart-ord-1: #11515f; --chart-ord-2: #1d8496; --chart-ord-3: #2fb2be;
                        --chart-ord-4: #7ed6dd; --chart-ord-5: #bfe9ee;
                        --chart-muted: #64748b; --chart-surface: #1b242d;
                        --chart-grid: #26313c; --chart-band: rgba(52,201,138,.10); }

.ch-sectiune { margin-bottom: var(--ap-gap); }
.ch-sectiune-titlu { margin-bottom: 10px; }
.ch-grupa { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .7px;
            color: var(--ap-slab); margin: 18px 0 10px; }

/* ≥1200px: A și B pe 2 coloane, C pe 3. Mai jos, grila se strânge singură. */
.ch-grila { display: grid; gap: var(--ap-gap); margin-bottom: 4px; align-items: start; }
.ch-grila--1 { grid-template-columns: 1fr; }
.ch-grila--2 { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
.ch-grila--3 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.ch-grila > .ap-card { margin-bottom: 0; }

.ch-card { display: flex; flex-direction: column; }
.ch-cap { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.ch-titlu { font-size: 13px; font-weight: 600; color: var(--ap-text); margin: 0; }
.ch-sub { font-size: 11px; color: var(--ap-slab); margin-top: 2px; }

/* badge-ul „CALCULAT": indicatorul nu e raportat de ANAF, ci derivat din datele lui */
.ch-badge { font-size: 9px; font-weight: 700; letter-spacing: .6px; color: var(--ap-mut);
            background: var(--ap-alt); border: 1px solid var(--ap-border);
            border-radius: 999px; padding: 1px 7px; cursor: help; }

/* legenda: identitatea vine din bulina colorată, nu din culoarea textului — pe tema
   întunecată `.tema-dark span` ar fura oricum culoarea, iar `!important` e interzis */
.ch-legenda { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 10px 0 2px; }
.ch-leg { display: inline-flex; align-items: center; gap: 6px; font-size: 11px;
          font-weight: 500; color: var(--ap-mut); }
.ch-bul { width: 9px; height: 9px; border-radius: 2px; display: inline-block; }
.ch-bul--banda { background: var(--chart-band); border: 1px solid var(--chart-pos); }

.ch-wrap { margin-top: 8px; }
.ch { display: block; width: 100%; height: auto; overflow: visible; }

/* grilă hairline, niciodată punctată; linia zero mai apăsată, ca să se vadă unde se trece
   de la profit la pierdere */
.ch-grid { stroke: var(--chart-grid); stroke-width: 1; }
.ch-zero { stroke: var(--chart-zero); stroke-width: 1.5; }
.ch-ax { font-size: 9px; fill: var(--ap-slab); }
.ch-band { fill: var(--chart-band); }
.ch-ref { stroke-width: 1.5; }
.ch-ref-lbl { font-size: 8px; }
.ch-conn { stroke: var(--chart-zero); stroke-width: 1; stroke-dasharray: 3 3; }
.ch-val { font-size: 9px; font-weight: 600; fill: var(--ap-mut); }

/* zona de hover acoperă toată banda anului: o bară de 12px e o țintă imposibilă cu
   mouse-ul și complet inaccesibilă pe touch */
.mk { cursor: default; }
.mk__bar, .mk__dot { transition: opacity .12s ease; }
.mk__tip { opacity: 0; pointer-events: none; transition: opacity .12s ease; }
.mk__tip rect { fill: var(--ap-text); opacity: .94; }
/* ⚠️ Mărimea efectivă a scrisului vine din `style` inline, scris de `ChartCanvas::tooltip()`
   (`9 × TIP_SCARA`, mai mic când caseta ar depăși graficul). Valorile de aici sunt plasa
   pentru un șablon nou lângă o bibliotecă veche. */
.mk__tip-an { font-size: 18px; font-weight: 700; fill: var(--ap-surface); }
.mk__tip-v { font-size: 18px; fill: var(--ap-surface); }
/*
   Tooltipul se desenează de două ori mai mare decât era, fiindcă pe telefon SVG-ul se
   micșorează odată cu viewBox-ul: 460 de unități intră pe 294px, deci scrisul de 9 ajungea
   la 5,7px pe ecran (măsurat). De la 768px în sus graficul e randat aproape 1:1 (scara 1,41),
   iar acolo grupul se înjumătățește la loc — desktopul rămâne exact cât era.
   ⚠️ Se micșorează, nu se mărește: poziția casetei e calculată pe server pentru mărimea
   MARE și plafonată în viewBox, deci orice scalare sub 1 rămâne înăuntru. Invers — mic pe
   server, mărit din CSS — ar fi ieșit din grafic la anii de la margini.
   ⚠️ `transform-box: fill-box` mută originea pe cutia proprie a grupului; fără el originea e
   colțul viewBox-ului și tooltipul ar zbura din grafic.
*/
@media (min-width: 768px) {
  .mk__tip { transform: scale(.5); transform-box: fill-box; transform-origin: 50% 0; }
}

.mk:hover .mk__tip, .mk:focus .mk__tip, .mk:focus-visible .mk__tip { opacity: 1; }
/* ⚠️ Semnalul de hover e pe BANDA, nu pe bare: din 27.09.2026 desenul nu mai e în grupul
   `.mk` (altfel tooltipul lui ajungea sub barele anilor următori — SVG desenează în ordinea
   din DOM, n-are `z-index`), deci `.mk:hover .mk__bar` n-ar mai avea ce selecta.
   Aceeași umplutură ca la `:focus-visible`, fără contur. */
.mk:hover .mk__hit { fill: rgba(14, 181, 181, .06); }
.mk:focus { outline: none; }
.mk:focus-visible .mk__hit { stroke: var(--ap-accent); stroke-width: 2; fill: rgba(14,181,181,.06); }

@media (prefers-reduced-motion: reduce) {
  .mk__bar, .mk__dot, .mk__tip { transition: none; }
}

/* comutatorul valori / procente (B2): două radio-uri și `:checked ~`, zero JavaScript.
   Radio-urile rămân focusabile — ascunse cu `display:none` ar dispărea din tab order. */
.ch-comuta { position: relative; padding-top: 4px; }
.ch-radio { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ch-comuta-lbl { font-size: 10px; font-weight: 600; color: var(--ap-mut); cursor: pointer;
                 border: 1px solid var(--ap-border); border-radius: 999px;
                 padding: 2px 10px; margin: 0 4px 0 0; }
.ch-radio:checked + .ch-comuta-lbl { background: var(--ap-accent); border-color: var(--ap-accent);
                                     color: #fff; }
.ch-radio:focus-visible + .ch-comuta-lbl { outline: 2px solid var(--ap-accent);
                                           outline-offset: 2px; }
.ch-radio--val:checked ~ .ch-wrap .ch-stack--pct,
.ch-radio--pct:checked ~ .ch-wrap .ch-stack--val { display: none; }

.ch-formula { font-size: 10px; color: var(--ap-slab); margin-top: 10px;
              font-family: Consolas, "SF Mono", Menlo, monospace; }
.ch-nota { font-size: 11px; color: var(--ap-mut); margin-top: 8px; line-height: 1.45; }

/* geamănul tabelar: fără el, cifrele ar fi accesibile doar prin culoare și hover */
.ch-date { margin-top: 10px; }
.ch-date > summary { font-size: 11px; font-weight: 600; color: var(--ap-accent);
                     cursor: pointer; list-style: none; }
.ch-date > summary::-webkit-details-marker { display: none; }
.ch-date > summary:before { content: "\f054"; font-family: "Font Awesome 5 Free";
                            font-weight: 900; font-size: 9px; margin-right: 6px;
                            display: inline-block; transition: transform .15s ease; }
.ch-date[open] > summary:before { transform: rotate(90deg); }
.ch-tabel { margin-top: 8px; font-size: 11px; }

@media (max-width: 767px) {
  .ch-grila--2, .ch-grila--3 { grid-template-columns: 1fr; }
}

@media print {
  .ch-grila--2, .ch-grila--3 { grid-template-columns: 1fr 1fr; }
  .mk__tip { display: none !important; }
  .ch-comuta-lbl { display: none !important; }
  .ch-date[open] > summary:before, .ch-date > summary { display: none !important; }
}

/* Sigla din subsol, înaintea versiunii (înainte stătea la baza meniului lateral).
   Înălțime fixă și lățime automată, ca să nu se deformeze. */
.app-footer .footer-logo {
  height: 22px;
  width: auto;
  max-width: 120px;
  vertical-align: middle;
  margin-right: 10px;
}

/* Adresele de livrare suplimentare din fișa clientului, sub adresa de livrare e-Factura
   (templates/customer/_adresa_livrare.tpl) — aceeași casetă ca persoanele de contact */
.livrare-extra {
  position: relative;
  margin: 20px 0 0 0;
  border: 1px solid #ccc; border-radius: 10px;
  padding: 15px;
}
.livrare-extra h5 {
  font: 600 14px/1.2 encode;
  margin: 0 0 15px 0;
  text-transform: uppercase;
  color: var(--albastru);
}
.livrare-extra .remove {top: -8px;}

/* un `.but` dezactivat — ex. „Adaugă adresă de livrare nouă" cât timp nu există nicio adresă */
.but:disabled {opacity: .45; cursor: not-allowed;}

/* „×" de pe persoanele de contact. Clasa n-a avut niciun stil până la 21.09.2026: span-ul
   avea 0×0 px, deci butonul exista și funcționa, dar nu se vedea. Aspectul e cel de la `.remove a`. */
.contactperson-information > [data-element="remove-action"] {
  position: absolute; top: -8px; right: 0; z-index: 10; margin: 0;
  width: auto; /* rândul are `lat100` (lățime 100%): fără asta × ajungea în stânga */
}
.remove-caseta {
  display: inline-flex; justify-content: center; align-items: center;
  width: 30px; height: 30px;
  border: 1px solid var(--rosu); border-radius: 100px;
  background: #fff;
  cursor: pointer;
}
.remove-caseta:before {
  content: "remove";
  font: 300 20px/1 var(--mso);
  color: var(--rosu);
}

/* Sumarul persoanelor de contact din capul fișei clientului (templates/customer/add_form.tpl):
   doar datele pe care le are fiecare persoană și cui pleacă factura */
.contact-sumar-titlu {
  font: 600 16px/1.2 encode;
  margin: 0 0 12px 0;
}
.contact-sumar-lista {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
}
.contact-sumar-card {
  min-width: 0;
  border: 1px solid #ccc; border-radius: 10px;
  padding: 12px 14px;
  font: 400 13px/1.5 encode;
}
.contact-sumar-card.primeste {border-color: var(--albastru);}
/* Prima persoană de contact: cea care ține contul clientului și care pleacă în e-Factura.
   Chenar mai gros și mai intens — înlocuiește eticheta „e-Factura" de lângă nume, care ocupa
   un rând întreg pe cardurile înguste. `box-shadow`, nu `border-width`: o bordură de 2px ar
   muta conținutul cu un pixel față de celelalte carduri din grilă. */
.contact-sumar-card.principala {border-color: var(--albastru); box-shadow: inset 0 0 0 1px var(--albastru);}
.contact-sumar-cap {display: flex; align-items: flex-start; gap: 8px;}
.contact-sumar-nume {flex: 1 1 auto; min-width: 0; font-weight: 600; font-size: 14px; overflow-wrap: anywhere;}
.contact-sumar-eticheta {
  font: 600 10px/1 encode; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap;
  padding: 4px 6px; border-radius: 6px;
  background: var(--albastru); color: #fff;
}
.contact-sumar-edit {border: 0; background: transparent; padding: 0; line-height: 1; cursor: pointer; color: var(--albastru);}
.contact-sumar-edit .mso {font-size: 20px;}
.contact-sumar-functie {margin: 2px 0 4px 0; opacity: .7;}
.contact-sumar-rand {display: flex; align-items: center; gap: 6px; min-width: 0; overflow-wrap: anywhere;}
.contact-sumar-rand .mso {font-size: 16px; opacity: .6;}
.contact-sumar-obs {margin-top: 4px; font-size: 12px; font-style: italic; opacity: .65;}
.contact-sumar-facturi {display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 12px; opacity: .6;}
.contact-sumar-facturi .mso {font-size: 16px;}
.contact-sumar-card.primeste .contact-sumar-facturi {opacity: 1; font-weight: 600; color: var(--albastru);}
/* „Editează": secțiunea sau persoana adusă în vedere e evidențiată scurt */
.contact-evidentiat {box-shadow: 0 0 0 3px var(--albastru); transition: box-shadow .3s;}

/* capul sumarului: titlul și, imediat după el, „Adaugă persoană de contact" (secțiunile cu
   formularele sunt ascunse). Butonul stătea lipit de marginea din dreapta, departe de lista la
   care se referă — pe ecranele late ajungea la peste un metru de titlu. */
.contact-sumar-cap-lista {display: flex; align-items: center; justify-content: flex-start; flex-wrap: wrap; gap: 10px 16px; margin: 0 0 12px 0;}
.contact-sumar-cap-lista .contact-sumar-titlu {margin: 0;}

/* Sumarele secțiunilor din capul fișei clientului (Detalii importante, Condiții comerciale,
   Adresa de livrare). Formularele lor stau ascunse și se deschid din „Editează". */
.fisa-sumar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
}
/* Sumarul doar-de-citit din tabul „Dashboard": condițiile comerciale în stânga, persoanele
   de contact în dreapta, pe același rând. Stivuite, cardul singur („Condiții comerciale")
   lăsa un metru de gol în dreapta lui, iar pagina creștea degeaba.
   Stă la coada paginii, deci distanța o ia de sus, nu de jos. */
.fisa-sumar-citire { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 18px;
                     margin: 18px 0 0 0; }
/* Lățime fixă la condiții (lista de etichete e scurtă), restul rândului la persoane.
   ⚠️ 440 + 18 + 380 = 838: cu 460 și 420 lipseau 5px la 1100px lățime de ecran și blocurile
   se stivuiau degeaba (măsurat — rândul are acolo 893px). */
.fisa-sumar-citire > .fisa-sumar { flex: 0 1 440px; }
.fisa-sumar-citire > .contact-sumar { flex: 1 1 380px; min-width: 0; }
.fisa-sumar-card {
  min-width: 0;
  border: 1px solid #ccc; border-radius: 10px;
  padding: 12px 14px;
  font: 400 13px/1.5 encode;
}
/* De unde vin datele din card. Sub titlu, nu în el: în capul cardului ar fi rupt rândul și ar
   fi împins butonul „Editează". */
.fisa-sumar-subtitlu {margin: -2px 0 8px 0; font-size: 12px; opacity: .6;}
.fisa-sumar-rand {display: flex; gap: 8px; min-width: 0; overflow-wrap: anywhere;}
.fisa-sumar-k {flex: 0 0 40%; opacity: .6;}
.fisa-sumar-v {flex: 1 1 auto; min-width: 0;}
.fisa-sumar-gol {opacity: .6; font-style: italic;}
.fisa-sumar-lipsa {
  display: flex; align-items: flex-start; gap: 6px;
  margin: 0 0 8px 0; font-size: 12px;
  color: var(--rosu);
}
.fisa-sumar-lipsa .mso {font-size: 16px;}

/* Rotița de setări a formularului de client (fișă + adăugare) și comutatorul codurilor ANAF.
   ⚠️ Codurile se ascund din CSS, pe clasa pusă SERVER-SIDE pe `#account-form` — nu dintr-un
   walker JS ca în „Factură nouă": așa nu există cadra în care se văd și apoi dispar. Codurile
   din tooltipuri NU sunt atinse: ele stau în atributul `h="…"`, nu în text. */
.cf-bt-off .cf-bt-code {display: none;}
/* Rotița stă în COLȚUL din dreapta sus al paginii, la nivelul titlului (28.09.2026, cererea
   utilizatorului) — nu sub el, pe o bandă proprie de 46px care nu mai conținea nimic altceva.
   ⚠️ Contextul de poziționare e `.hbox`-ul care le cuprinde pe amândouă (titlul și formularul),
   luat cu `:has()`: `position: relative` pe TOATE `.hbox`-urile aplicației ar fi schimbat
   contextul oricărui element absolut din ele. */
.hbox:has(> .account-form > .cf-setari-bara) {position: relative;}
.cf-setari-bara {display: flex; justify-content: flex-end; margin: 0; position: absolute; top: 0; right: 0; z-index: 2;}
/* ⚠️ Pe telefon `.hbox` începe la y=0, adică SUB bara de sus, care e `position: fixed` (0–66px):
   cu `top: 0` rotița ajungea acoperită de ea — măsurat, `elementFromPoint` întorcea butonul de
   meniu. Se coboară sub bară, a cărei înălțime reală o scrie `js/perp/menu-hover.js` în
   `--mt-header`, și se trage de la marginea ecranului cât e gutterul paginii. */
@media (max-width: 767px) {
  .hbox > .account-form > .cf-setari-bara {top: calc(var(--mt-header, 66px) + 8px); right: 16px;}
}
/* ⚠️ „În colț" nu înseamnă lipit de marginea de sus, ci pe RÂNDUL titlului: bara se întinde
   peste el și își centrează butonul. Înălțimea e aceeași variabilă ca a lui `.header-h1`.
   Numai pe ecranul de adăugare: în fișă bara stă într-un `.tabul`, unde nu există rând de titlu
   și unde o bară de 70px ar coborî rotița la mijlocul panoului. */
@media (min-width: 768px) {
  .hbox > .account-form > .cf-setari-bara {height: var(--h-titlu); align-items: center;}
}
/* aceeași rotiță ca la „Factură nouă": cerc gol care se întoarce la hover */
.cf-gear {
  width: 40px; height: 40px; box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(128,128,128,.28); border-radius: 50%;
  background: transparent; color: #888; cursor: pointer; padding: 0;
  transition: transform .35s ease, color .2s, border-color .2s;
}
.cf-gear:hover, .cf-gear:focus-visible {color: var(--mov); border-color: var(--mov); transform: rotate(60deg);}
.cf-gear .mso {font-size: 22px; line-height: 1;}
/* panoul se deschide împingând conținutul în jos, nu peste el (ca la „Factură nouă"):
   un overlay ar acoperi tocmai câmpurile despre care vorbesc setările */
.cf-setari {overflow: hidden; max-height: 0; transition: max-height .3s ease;}
.cf-setari.open {max-height: 600px;}
.cf-setari-panou {
  margin: 0 0 18px; padding: 0;
  border: 1px solid rgba(128,128,128,.28); border-radius: 10px;
  background: #fff; box-shadow: 0 6px 20px rgba(0,0,0,.06);
}
.tema-dark .cf-setari-panou {background: #343f47; border-color: var(--tabel-border-dark);}
.cf-setari-cap {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 18px; border-bottom: 1px solid rgba(128,128,128,.22);
  font: 700 15px/1.2 encode;
}
.cf-setari-x {background: none; border: 0; font-size: 22px; line-height: 1; color: #888; cursor: pointer; padding: 0 4px;}
.cf-setari-x:hover {color: var(--rosu);}
.cf-setari-corp {padding: 16px 18px;}
.cf-setari-rand {display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;}
.cf-setari-rand + .cf-setari-rand {margin-top: 16px; padding-top: 16px; border-top: 1px solid rgba(128,128,128,.18);}
.cf-setari-info {flex: 1 1 260px; min-width: 0;}
.cf-setari-titlu {font: 700 14px/1.2 encode;}
.cf-setari-desc {font: 400 12.5px/1.45 encode; opacity: .7; margin-top: 3px;}
.cf-setari-rand .but {white-space: nowrap; margin: 0;}
/* butonul urmează starea, ca la „Factură nouă": gri închis cât timp codurile sunt ascunse */
#cf-bt-toggle.is-off {background: #4a4a4a; border-color: #4a4a4a; color: #fff;}

/* Ecranul „Client nou" (/customers/add) — cardul de pornire: țara, codul fiscal și căutarea
   la ANAF. Cardul rezultatului refolosește `.fisa-sumar-card` și rândurile ei: e aceeași formă
   „etichetă — valoare" ca sumarele din fișă, deci n-are nevoie de stiluri proprii; aici rămân
   doar starea căutării și rândul de butoane.
   ⚠️ Cardul NU are titlu: „CLIENT NOU" scrie deja în capul paginii, la trei centimetri. Din
   același motiv n-are nici `h4.h4-special` — acordeonul din `_form_scripts.tpl` prinde orice
   `h4.h4-special` din formular, iar ăsta e singurul bloc care nu trebuie să se poată închide. */
/* Câmpul de cod și butonul pe același rând: butonul e acțiunea câmpului, nu a cardului.
   ⚠️ Butonul ia exact înălțimea câmpului și își pierde marginea: `.but` e 37px cu
   `margin: 0 5px 5px 0`, deci rândul ieșea de 42px, iar `align-items: center` cobora inputul
   cu 3px față de vecinele lui de pe rând (măsurat: 166 față de 163). Cu toate trei la 35px,
   alinierea sus e și corectă, și stabilă. */
.cn-cauta-rand {display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap;}
.cn-cauta-rand .form-control {flex: 1 1 160px; min-width: 0;}
.cn-cauta-rand .but {flex: 0 0 auto; height: 35px; margin: 0;}
/* Țara: un comutator, nu un câmp de completat — aproape toți clienții sunt din România, iar
   valoarea vine deja pusă din firma care folosește aplicația. Deci ocupă exact cât scrie în
   el, nu o treime din rând.
   ⚠️ `width: auto` singur NU face asta: un `<select>` auto se întinde cât cea mai lungă
   opțiune din listă — 278px la cele 245 de țări (măsurat). `field-sizing: content` îl
   strânge la opțiunea ALEASĂ (121px pentru „RO - Romania"); unde nu e suportat rămâne
   varianta de 278px, tot mai mică decât coloana. */
.cn-start select[name="postal_country_id"],
.cn-start select[name="country_id"] {
  /* al doilea selector: ecranul „Adaugare companie" (/company/add), același card de pornire */
  width: auto; max-width: 100%;
  field-sizing: content;
}
/* Tabul „Dashboard" al fișei companiei (/company/dashboard/{id}/dashboard): toate companiile,
   pe scurt, în cardurile de sumar ale fișei clientului (`.fisa-sumar*`). */
.cf-dash-cap {display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0 0 12px 0;}
/* Secțiunea firmei, încadrată (29.09.2026, cererea utilizatorului): antetul, „Detalii generale"
   și plăcile citite ca un singur bloc. Antetul își pierde aici chenarul lui de card — altfel
   ar fi un chenar în chenar — și rămâne despărțit de restul printr-o linie. */
.cf-dash-identificare {margin: 0 0 22px 0; padding: 16px; border: 1px solid var(--mov); border-radius: 12px;}
.cf-dash-identificare > .ap-header {border: 0; border-bottom: 1px solid var(--ap-border); border-radius: 0;
  box-shadow: none; padding: 4px 4px 16px; margin-bottom: 16px;}
/* rândurile „În aplicație" din „Detalii generale" (customer/_detalii_generale.tpl,
   `detalii_extra` — doar Dashboard-ul companiei proprii) */
.anaf-fin-table tr.dg-sep td {padding-top: 18px; font: 600 11px/1.2 encode; text-transform: uppercase;
  letter-spacing: .05em; color: #6b7a8c;}
.anaf-fin-table tr.dg-sep:first-child td {padding-top: 6px;}   /* primul, imediat sub titlu */
.anaf-fin-table tr.dg-rand-ok td:last-child {color: #1c7c3e;}
.anaf-fin-table tr.dg-rand-lipsa td:last-child {color: var(--rosu);}
.anaf-fin-table tr.dg-rand-gol td:last-child {opacity: .6;}
.cf-dash-sterge {display: flex; justify-content: flex-end; margin-top: 4px;}
.cf-dash-sterge .cf-firma-sterge {margin-left: 0;}
.cf-firma-principala {display: inline-flex; align-items: center; flex: 0 0 auto; white-space: nowrap;
  font: 600 11px/1 encode; text-transform: uppercase; letter-spacing: .04em;
  padding: 5px 8px; border-radius: 6px; background: rgba(0, 163, 169, .12); color: #00797e;}
/* logo-ul companiei înaintea denumirii din antetul „Date publice" (doar la compania proprie) */
.ap-titlu-logo {height: 1.15em; width: auto; max-width: 160px; object-fit: contain;
  vertical-align: -0.18em; margin-right: 12px;}
.cf-dash-cap .but {margin: 0;}
.cf-dash-titlu {font-weight: 700;}
.cf-firma-cap {align-items: center; gap: 10px;}
.cf-firma-logo {max-height: 34px; max-width: 110px; object-fit: contain;}
.cf-firma-curenta {border-color: var(--mov); box-shadow: 0 0 0 1px var(--mov) inset;}
.cf-firma-ok, .cf-firma-info {display: flex; align-items: flex-start; gap: 6px; margin: 4px 0 8px 0; font-size: 13px;}
.cf-firma-ok {color: #1c7c3e;}
.cf-firma-info {opacity: .8;}
.cf-firma-ok .mso, .cf-firma-info .mso {font-size: 16px; line-height: 1.3;}
.cf-firma-actiuni {display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 12px;}
.cf-firma-actiuni .but {margin: 0;}
/* ștergerea: acțiune discretă, fără `.but-icon-delete` (al doilea dialog, vezi _dashboard.tpl) */
.cf-firma-sterge {margin-left: auto; background: none; border: 0; padding: 0; font: inherit; font-size: 13px;
  color: var(--rosu); text-decoration: underline; cursor: pointer;}
.cf-firma-sterge:hover, .cf-firma-sterge:focus-visible {text-decoration: none;}
.cf-fara-fisa {max-width: 720px;}
.cf-fara-fisa .but {margin: 8px 0 0 0;}
.tabul.cf-taburi-firma {padding-bottom: 0;}

/* Conturile bancare ale companiei (company/_cont_card.tpl): carduri ca persoanele de contact
   din fișa clientului (`.contact-sumar-*`), fiecare cu fața de vedere și formularul pe loc,
   comutate de `cf-cont-editare`. Până la 29.09.2026 erau patru câmpuri stivuite pe cont. */
.cf-conturi-cap {margin: -10px 0 14px 0;}          /* sub `.h4-special` (margin-bottom 25px) */
.cf-conturi-cap .but {margin: 0;}
.cf-conturi-cap .form-hint {flex: 1 1 320px; margin: 0;}
/* 270px, nu 240 ca la persoane: un IBAN românesc grupat (29 de caractere) încape pe un rând */
.cf-conturi-lista {grid-template-columns: repeat(auto-fill, minmax(min(270px, 100%), 1fr));}
/* cât se editează un card, vecinii nu se mai întind la înălțimea formularului lui */
.cf-conturi-lista:has(.cf-cont-editare) {align-items: start;}
.cf-cont-card.cf-cont-ascuns {display: none;}
.cf-cont-form {display: none;}
.cf-cont-card.cf-cont-editare .cf-cont-vedere {display: none;}
.cf-cont-card.cf-cont-editare .cf-cont-form {display: block;}
.cf-cont-card.cf-cont-editare {border-color: var(--mov); box-shadow: inset 0 0 0 1px var(--mov);}
.cf-cont-iban {font-weight: 600; font-variant-numeric: tabular-nums;}
.cf-cont-form .form-grup {margin: 0 0 10px 0;}
/* Tooltipurile din card se întind pe lățimea câmpului, nu pornesc de la semnul întrebării:
   caseta de 330px, ancorată acolo, ieșea din cardurile de pe ultima coloană și din ecran. */
.cf-cont-form .app-help {position: static;}
.cf-cont-form .app-help-box {left: 0; right: 0; top: 20px; width: auto; max-width: none;}
.cf-cont-form .app-help-box:before {display: none;}
.cf-cont-actiuni {display: flex; align-items: center; gap: 8px; margin-top: 4px;}
.cf-cont-actiuni .but {margin: 0;}
.cf-conturi-gol {margin: 0;}

/* Bara de acțiuni a fișei companiei (/company/edit): butoanele ANAF + Date publice pe un rând. */
.cf-actiuni {display: flex; align-items: center; gap: 8px; flex-wrap: wrap;}
.cf-actiuni .but {margin: 0;}
.cf-actiuni .cn-stare {flex: 1 1 100%;}
/* Rândul urmează: țara ia cât îi trebuie, cele două căutări împart restul. Doar pe lat —
   sub 992px `grid-col3` trece oricum pe două coloane, apoi pe una. */
@media (min-width: 993px) {
  .tabul.cn-start {grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr);}
}
/* Pe telefon (11.10.2026, cererea utilizatorului): țara arată doar prefixul („RO") și stă pe
   același rând cu codul fiscal; numele firmei și tot ce urmează iau rândul întreg. Prefixul
   e stratul `.cn-tara-cod`, pus peste select de `client-nou.js` (`codTara()`): textul
   selectului devine transparent, lista deschisă rămâne cu numele întregi.
   ⚠️ `field-sizing: fixed` anulează `content` de mai sus — altfel selectul ar ține lățimea
   textului întreg, care e încă acolo, doar invizibil. */
.cn-tara-cod {display: none;}
@media (max-width: 767px) {
  /* lățimea țării e scrisă o dată, în `--cn-tara`: o citesc și coloana, și rândul CNP-ului anonim
     de sub cod, care se întinde înapoi peste ea. 60px = „RO" + săgeata; cu codurile BT vizibile
     eticheta „Țară (BT-55) * ?" cere 103px, deci coloana crește (11.10.2026, cererea utilizatorului) */
  .tabul.cn-start {--cn-tara: 60px; grid-template-columns: var(--cn-tara) minmax(0, 1fr); column-gap: 10px;}
  #account-form:not(.cf-bt-off) .tabul.cn-start {--cn-tara: 106px;}
  /* „Persoană fizică fără CNP? 0000000000000" pe un singur rând: 274px nu încap sub cod (~280 la
     390px, mai puțin pe ecrane mai înguste), deci rândul pornește de sub țară */
  .cn-start .cn-anonim-rand {margin-left: calc(-1 * (var(--cn-tara) + 10px));}
  /* „Salvează" și „Renunță" de la capătul formularului: centrate și pe aceeași linie. `.but` are
     `margin: 0 5px 5px 0` și `vertical-align: baseline`, deci butonul cu pictogramă stătea mai sus
     decât celălalt; în flex le aliniază `align-items`. ⚠️ `display: flex` rămâne și după
     `.show()` din client-nou.js: jQuery scoate doar `display:none` din atribut. */
  .cn-actiuni {display: flex; justify-content: center; align-items: center; gap: 12px; flex-wrap: wrap;}
  .cn-actiuni .but {margin: 0;}
  .tabul.cn-start > .cn-ss {grid-column: 1 / -1;}
  .cn-tara-camp {position: relative; display: block;}
  /* `!important`: `app1.css` pune `.form-control {color: #000 !important}`; `text-fill` pentru Safari */
  .cn-start .cn-tara-camp select {width: 100%; field-sizing: fixed; color: transparent !important;
    -webkit-text-fill-color: transparent;}
  .cn-start .cn-tara-camp select option {color: #000 !important; -webkit-text-fill-color: initial;}
  /* 6px = bordura (1) + padding-ul selectului (5) */
  .cn-tara-cod {display: flex; align-items: center; position: absolute; top: 0; bottom: 0; left: 6px;
    pointer-events: none; color: #000; font: 14px ubuntu500;}   /* ca textul selectului */
  /* câmpul de cod cedează din bază, ca butonul „Caută" să rămână lângă el pe ~250px */
  .cn-start .cn-cauta-rand .form-control {flex-basis: 110px;}
  /* săgeata nativă folosește culoarea textului, deci a dispărut odată cu el: una desenată */
  .cn-tara-camp::after {content: ''; position: absolute; right: 11px; top: 50%; width: 7px; height: 7px;
    border-right: 1.5px solid; border-bottom: 1.5px solid; transform: translateY(-70%) rotate(45deg);
    pointer-events: none; color: #000;}
  .tema-dark .cn-tara-cod, .tema-dark .cn-tara-camp::after {color: var(--text-dark);}
}
/* „0000000000000" — CNP-ul anonim, de apăsat. E un `<button>` fiindcă nu duce nicăieri, dar
   arată ca o legătură: altfel n-ar avea niciun semn că se poate apăsa. `font: inherit` +
   `padding: 0` îi scot complet înfățișarea de buton, pe care browserul i-o dă implicit. */
.cn-anonim-rand, .cn-cnp-nota {margin: 6px 0 0 0;}
/* „Completez datele manual" din nota de CNP: tot un `<button>` care arată a legătură (nu duce
   nicăieri, deschide restul formularului). Aceeași formă ca `.cn-anonim`, fără spațierea de
   cod. */
.cn-manual-link {
  background: none; border: 0; padding: 0;
  font: inherit; color: var(--mov); text-decoration: underline; cursor: pointer;
}
.cn-manual-link:hover, .cn-manual-link:focus-visible {text-decoration: none;}
.cn-anonim {
  background: none; border: 0; padding: 0;
  font: inherit; font-weight: 700; letter-spacing: .5px;
  color: var(--mov); text-decoration: underline; cursor: pointer;
}
.cn-anonim:hover, .cn-anonim:focus-visible {text-decoration: none;}
.cn-stare {margin: 6px 0 0 0; font-size: 13px;}
.cn-stare-err {color: var(--rosu);}
.cn-stare-ok {color: #1c7c3e;}
.cn-stare-lucru, .cn-stare-info {opacity: .7;}
/* Fișele care au deja codul tastat. Chenar roșu, fiindcă aici adăugarea chiar se oprește:
   două fișe cu același cod fiscal sunt refuzate la salvare (`Customer::fiseCuAcelasiCod`),
   deci singura cale înainte e fișa existentă. */
.cn-fise {
  margin: 10px 0 0 0; padding: 10px 12px;
  border: 1px solid var(--rosu); border-radius: 10px;
  font-size: 13px; line-height: 1.6;
}
.cn-fise-titlu {font-weight: 700; margin-bottom: 4px;}
/* Legătura spre fișa existentă e singura acțiune din caseta asta, deci arată ca o legătură:
   subliniată și în culoarea de accent. Fără asta, numele firmei se citea ca text simplu —
   operatorul nu avea de unde ști că se poate apăsa (semnalat de utilizator). */
.cn-fise-link {color: var(--mov); text-decoration: underline; font-weight: 700;}
.cn-fise-link:hover, .cn-fise-link:focus-visible {text-decoration: none;}
/* Cardul rezultatului: aceeași lățime ca un card de sumar din fișă (grila de acolo e
   `minmax(280px, 1fr)` pe trei coloane). Întins pe toată lățimea paginii, `.fisa-sumar-k`,
   care e 40%, ar lăsa un metru de gol între etichetă și valoare. */
/* Căutarea firmei după nume, în „Client nou": ÎMPRUMUTĂ înfățișarea Smart Search din bara de
   sus — `.ss-wrap`, `.ss-dropdown`, `.ss-item` din css/smartsearch.css, inclusiv regulile de
   temă întunecată. Aici rămân doar potrivirile pentru locul nou: un câmp de formular, nu un
   colț de navbar. ⚠️ Caseta poartă și `data-ss-extern`, care oprește `js/perp/smartsearch.js`
   să se lege de ea: stilul e comun, creierul nu — vezi js/perp/client-nou.js. */
/* ⚠️ `.form-grup` în față, nu doar `.cn-ss`: `smartsearch.css` se încarcă DUPĂ fișierul ăsta,
   iar `.js-smart-search .ss-wrap` are aceeași specificitate (0,2,0) și fixează 34px — la
   egalitate câștigă ultimul din ordinea fișierelor, deci caseta rămânea cu 1px mai scundă
   decât vecinele ei (măsurat: 34 față de 35). */
.form-grup.cn-ss .ss-wrap {height: 35px;}
.cn-ss .ss-dropdown {left: 0; right: 0; min-width: 0;}
/* Alt CUI, altă țară: nu se mai caută nimic, deci lupa dispare — altfel caseta ar promite
   o căutare care nu pornește. */
.cn-ss-oprit .ss-ico {display: none;}
/* Rândul unui rezultat e `<button>`, nu `<a>`: nu duce nicăieri, ci pune codul firmei în
   câmpul de cod fiscal și pornește interogarea ANAF. `.ss-item` e scris pentru legături,
   deci butonului i se scot fundalul, bordura și alinierea centrată pe care i le dă browserul. */
.cn-ss-item {
  width: 100%; text-align: left;
  background: none; border: 0; border-left: 3px solid transparent;
  font: inherit; cursor: pointer;
}
/* Firma e deja în aplicație: rândul duce la fișa ei — un cod fiscal, o singură fișă. */
.cn-ss-are-fisa {opacity: .8;}
.cn-ss-fisa {font-style: italic;}
/* „scrieți mai exact" — lângă numărul de rezultate, când lista e tăiată */
.cn-ss-mai {font-size: .66rem; font-weight: 400; text-transform: none; opacity: .65; letter-spacing: 0;}
/* "Adauga firma noua", cand cautarea dupa nume nu gaseste nimic (11.10.2026): pictograma in culoarea textului */
.cn-ss-nou .ss-item-title .material-symbols-outlined {color: inherit; font-size: 20px; vertical-align: -5px;}
.cn-rezultat {margin: 12px 0 0 0; max-width: 560px;}
.cn-rez-actiuni {display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0 0 0;}

/* Asteriscul rosu de langa eticheta campurilor pe care ANAF le cere la cumparator
   (fisa clientului). Inainte, cateva etichete aveau „***" in text, fara legatura cu
   ce respinge serverul la salvare. */
/* Asteriscul rosu de langa o eticheta obligatorie. Doua nume, ca markup-ul sa spuna
   PENTRU CE e obligatoriu campul: `oblig-anaf` opreste salvarea fisei si emiterea
   facturii, `oblig-email` doar trimiterea pe e-mail. Aceeasi regula, ca sa nu apara
   doua rosuri. */
.oblig-anaf, .oblig-email {color: var(--rosu); font-weight: 700; cursor: help;}

/* Optiune de formular blocata (ex. „Persoana fizica" la o firma deja salvata ca persoana
   juridica): motivul e un tooltip pe chiar butonul blocat, nu un rand de text sub el.
   Apare la hover si, pe telefon, la apasarea etichetei (clasa `mesaj-vizibil`, pusa din JS —
   un input `disabled` nu primeste click). Aspectul e cel al tooltipurilor din `_help.tpl`. */
.i-checks.optiune-blocata {position: relative; cursor: not-allowed;}
.optiune-blocata-mesaj {
  position: absolute; left: 0; top: calc(100% + 8px); z-index: 60; display: none;
  width: 300px; max-width: 78vw;
  background: #22282e; color: #e8edf2;
  font-size: 12px; font-weight: 400; line-height: 1.5; text-transform: none; letter-spacing: 0;
  padding: 9px 11px; border-radius: 6px; box-shadow: 0 6px 22px rgba(0, 0, 0, .28);
  white-space: normal; text-align: left;
}
.optiune-blocata-mesaj:before {
  content: ""; position: absolute; top: -5px; left: 10px;
  border: 5px solid transparent; border-top: 0; border-bottom-color: #22282e;
}
.i-checks.optiune-blocata:hover .optiune-blocata-mesaj,
.i-checks.optiune-blocata:focus-within .optiune-blocata-mesaj,
.i-checks.optiune-blocata.mesaj-vizibil .optiune-blocata-mesaj {display: block;}

/* Verificarea CNP-ului din „Cod Fiscal", in timp ce se tasteaza (js/perp/cnp.js), la clientii
   persoane fizice din Romania. Stari: valid (verde), atentie (control corect dar ceva neobisnuit,
   nu blocheaza), anonim (13 zerouri, informativ), incomplet (inca se tasteaza), invalid si
   prea_lung (rosu — le refuza si serverul, CodFiscal::cnpRespins). */
.cnp-verificare {grid-column: 1/-1; margin: 4px 0 0 0; font-size: 12px; line-height: 1.4;}
.cnp-verificare[hidden] {display: none;}
.cnp-valid {color: var(--verde);}
.cnp-atentie {color: var(--galben2);}
.cnp-anonim {color: var(--albastru);}
.cnp-incomplet {opacity: .7;}
.cnp-invalid, .cnp-prea_lung {color: var(--rosu); font-weight: 600;}
.form-control.cnp-camp-gresit {border-color: var(--rosu) !important;}



/* Campul respins la salvare: incadrat cu rosu pana cand operatorul scrie in el. */
.form-control.camp-lipsa, select.camp-lipsa {
  border-color: var(--rosu) !important;
  box-shadow: 0 0 0 2px rgba(208, 2, 27, .15);
}

/* Notificare temporara („toast") — templates/footer.tpl; o pune in sesiune o actiune inaintea unui
   redirect, iar PERP\Controller o preia o singura data. Dispare singura dupa 8 s. */
.notificare-temporara { position: fixed; right: 20px; bottom: 20px; z-index: 2000; display: flex; align-items: flex-start; gap: 10px;
  max-width: 420px; padding: 12px 14px; border-radius: 8px; background: #22282e; color: #e8edf2;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .28); font-size: 13.5px; line-height: 1.45;
  animation: notificare-intra .3s ease-out; transition: opacity .35s, transform .35s; }
.notificare-temporara .mso { font-size: 20px; line-height: 1.2; flex: 0 0 auto; }
.notificare-info .mso { color: #7cc0f5; }
.notificare-succes .mso { color: #5fd49a; }
.notificare-atentie .mso { color: #f2c14e; }
.notificare-text { flex: 1 1 auto; min-width: 0; }
.notificare-inchide { flex: 0 0 auto; border: 0; background: transparent; color: inherit; opacity: .7; font-size: 20px; line-height: 1; padding: 0 0 0 4px; cursor: pointer; }
.notificare-inchide:hover { opacity: 1; }
.notificare-iese { opacity: 0; transform: translateY(10px); }
@keyframes notificare-intra { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (max-width: 767px) { .notificare-temporara { left: 12px; right: 12px; bottom: 12px; max-width: none; } }

/* „✓ Salvat" (js/perp/salvat.js, 08.10.2026): confirmarea discretă a unei salvări pe loc —
   responsabilul, starea de recuperare, starea plății, câmpurile taskurilor și ale cheltuielilor.
   Stă 1,6 s lângă controlul schimbat (deasupra lui; sub el, când e lipit de bara de sus).
   `position: fixed` și agățată de <body>: în celula unui tabel ar fi fost tăiată de `overflow`
   și ar fi mutat rândul. `pointer-events: none` — nu fură niciun click de sub ea.
   ⚠️ E un <div>, nu un <span>: `duviana-dark.css` forțează culoarea pe orice `span`. */
.salvat-pill { position: fixed; z-index: 1300; display: inline-flex; align-items: center; gap: 3px;
  padding: 3px 10px 3px 7px; border: 1px solid #b7dfc3; border-radius: 999px; background: #e8f5ec;
  color: #1b6230; font: 600 12px/16px encode, sans-serif; white-space: nowrap; pointer-events: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .12); opacity: 0; transform: translateY(3px);
  transition: opacity .18s ease, transform .18s ease; }
.salvat-pill.salvat-vizibil { opacity: 1; transform: none; }
.salvat-pill .mso { font-size: 15px; line-height: 1; color: inherit; }
.tema-dark .salvat-pill { background: #1d3a2a; border-color: #2f6a46; color: #9fe3b5; }
@media (prefers-reduced-motion: reduce) { .salvat-pill { transform: none; transition: opacity .18s ease; } }
.salvat-live { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Pagina prospectului (templates/customer/prospect_dashboard.tpl): emiterea unei facturi sau proforme
   cu prospectul deja ales, sub titlu. La emitere prospectul devine client activ. */
.prospect-emitere { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; margin: 0 0 18px 0; }
.prospect-emitere-nota { flex: 1 1 100%; text-align: center; font-size: 12px; opacity: .7; }

/* „Codul fiscal exista deja" sub campul Cod Fiscal (fisa clientului si a prospectului): fisa care
   are deja codul, cu link (js/perp/cod-fiscal-existent.js). `<div>`/`<b>`, nu `<p>`/`<span>`: tema
   intunecata forteaza culoarea pe acelea cu !important. */
.cod-existent { grid-column: 1/-1; display: flex; align-items: flex-start; gap: 8px; margin: 6px 0 0 0; padding: 8px 10px;
  border: 1px solid #f0c36d; border-radius: 6px; background: #fff8e6; color: #5c4400; font-size: 12.5px; line-height: 1.45; }
.cod-existent[hidden] { display: none; }
.cod-existent .mso { font-size: 18px; color: #c98a00; flex: 0 0 auto; }
.cod-existent ul { margin: 4px 0 0 0; padding-left: 16px; }
.cod-existent a { font-weight: 600; text-decoration: underline; }
.cod-existent em { opacity: .7; font-style: normal; }
.tema-dark .cod-existent { background: rgba(242, 193, 78, .1); border-color: rgba(242, 193, 78, .45); color: #f2d48a; }

/* ---- fișa unei persoane fizice arată altfel (28.09.2026) ------------------
   Referința cumpărătorului, numele comercial și Nr. Reg. Com. n-au sens la un om, iar seria
   buletinului n-are sens la o firmă. Steagul e clasa `cf-pf` de pe `#account-form`, pusă
   server-side la randare și întreținută de scriptul din `_form_scripts.tpl`.
   ⚠️ Se scrie DOAR `display: none`, niciodată `display: block` pe varianta vizibilă: `.form-grup`
   își are propriul display în grila secțiunii, iar o valoare scrisă peste el ar rupe rândul. */
.cf-pf .doar-pj,
.account-form:not(.cf-pf) .doar-pf {display: none;}

/* ---- semnalul ca pagina se incarca (04.10.2026, cererea utilizatorului) --------------------
   Paginile grele ale aplicatiei se randeaza in 1,5–3 s pe server, iar pana la primul octet
   browserul nu schimba nimic pe ecran. Doua semnale, in ordinea in care le vede omul:
   apasarea (instant, din CSS) si apoi incarcarea (dupa 120 ms, din js/perp/incarcare.js). */

/* 1. Apasarea, instantanee si fara JS. ⚠️ `:active` e potrivit si pe atingere — se aprinde cat
      tine degetul si se stinge la ridicare —, spre deosebire de `:hover`, care pe telefon ramane
      lipit dupa atingere (de aceea halourile de hover ale meniului stau in `@media (hover:hover)`). */
.navi ul.nav li > a:active,
.fa-sumar-box:active,
.mt-placa:active {transform: scale(.97); transition: transform .06s ease-out;}

/* 2. Incarcarea: elementul apasat se stinge si pulseaza, ca sa se vada CE s-a apasat. */
.se-incarca {opacity: .55; animation: incarcare-puls 1.1s ease-in-out infinite;}
@keyframes incarcare-puls {0%, 100% {opacity: .55} 50% {opacity: .85}}

/* 3. Bara de sus, pentru cazul in care ochiul nu mai e pe butonul apasat (s-a derulat, sau
      navigarea a pornit dintr-un formular). ⚠️ `top: 0`, peste bara aplicatiei: pe telefon
      aceea e `position: fixed` si ar fi acoperit-o. */
.incarcare-bara {position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 99999;
                 pointer-events: none; opacity: 0; transition: opacity .12s;
                 background: linear-gradient(90deg,
                   transparent 0%, var(--mov) 35%, var(--mov) 65%, transparent 100%);
                 background-size: 40% 100%; background-repeat: no-repeat;}
.incarcare-bara.e-pornita {opacity: 1; animation: incarcare-cursa 1.1s linear infinite;}
@keyframes incarcare-cursa {0% {background-position: -40% 0} 100% {background-position: 140% 0}}

/* 4. Pagina NOUA (08.10.2026, cererea utilizatorului: „la orice pagina care se incarca”): bara sta deja in
      marcaj, in header.tpl, aprinsa — deci se vede din primul cadru, in continuarea celei de pe
      pagina de dinainte —, iar js/perp/incarcare.js o stinge la `load`. ⚠️ `incarcare-plasa`: daca
      scriptul nu ajunge deloc (deploy partial, o eroare inainte de el), bara se stinge singura
      dupa 20 s, nu ramane aprinsa peste o pagina gata incarcata. */
.incarcare-bara.e-pagina {opacity: 1; animation: incarcare-cursa 1.1s linear infinite, incarcare-plasa .2s linear 20s forwards;}
@keyframes incarcare-plasa {to {opacity: 0}}
@media print {.incarcare-bara {display: none !important;}}

/* ⚠️ Cine a cerut „mai putina miscare" nu primeste niciuna: bara ramane vizibila, dar statica,
      iar elementul apasat doar se stinge. Semnalul se pastreaza, animatia nu. */
@media (prefers-reduced-motion: reduce) {
  .navi ul.nav li > a:active, .fa-sumar-box:active, .mt-placa:active {transform: none;}
  .se-incarca {animation: none;}
  .incarcare-bara.e-pornita {animation: none; background-position: 30% 0;}
  .incarcare-bara.e-pagina {animation: incarcare-plasa .2s linear 20s forwards; background-position: 30% 0;}
}

/* ── Caseta de cerere AI (10.10.2026) ────────────────────────────────────────────────────────
   Același aspect în Dashboard vânzări („Întreabă") și în Rapoarte AI („Descrie raportul"):
   steluța, câmpul cu microfonul de dictare înăuntru (`.dict-mic`, voice-command.css) și butonul
   de trimitere. Scrisă o singură dată, ca cele două ecrane să nu se despartă.
   ⚠️ Fără <span>/<p> colorate în casetă: `duviana-dark.css` le forțează culoarea. */
.ai-prompt {background: #fff; border: 1px solid #e3e8ee; border-radius: 14px; padding: 14px 16px;
  box-shadow: 0 1px 3px rgba(16,24,40,.06); margin-bottom: 16px;}
.ai-prompt-cap {display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-bottom: 10px;}
.ai-prompt-titlu {margin: 0; font-size: 14px; font-weight: 600; color: #2b3440; display: flex; align-items: center; gap: 6px;}
.ai-prompt-mod {display: flex; flex-wrap: wrap; gap: 14px; font-size: 13px;}
.ai-prompt-mod label {display: inline-flex; gap: 6px; align-items: center; font-weight: 400; margin: 0; color: #2b3440;}
/* aliniate JOS: când textul crește pe mai multe rânduri, steluța, microfonul și butonul rămân în
   dreptul ultimului rând (ca într-o casetă de chat), nu plutesc la mijloc */
.ai-prompt-rand {display: flex; gap: 8px; align-items: flex-end;}
.ai-prompt-ic {flex: 0 0 auto; display: inline-flex; align-items: center; height: 44px; color: var(--mov); font-size: 22px !important; line-height: 1;}
.ai-prompt-camp .dict-mic {margin: 4px 0;}
.ai-prompt-camp {flex: 1 1 auto; min-width: 0; display: flex; align-items: flex-end; gap: 2px; min-height: 44px;
  padding: 0 4px 0 12px; border: 1px solid #c9d2dc; border-radius: 10px; background: #fff; transition: border-color .15s, box-shadow .15s;}
.ai-prompt-camp:focus-within {border-color: var(--mov); box-shadow: 0 0 0 3px rgba(0,163,169,.15);}
.ai-prompt-camp input, .ai-prompt-camp textarea {flex: 1 1 auto; min-width: 0; width: auto; margin: 0; padding: 9px 0;
  border: 0 !important; border-radius: 0; box-shadow: none !important; background: transparent !important; outline: 0;
  font-size: 14px; line-height: 1.45; color: inherit; box-sizing: border-box;}
.ai-prompt-camp input {height: 42px;}
/* Un rând la pornire, cât un input (42px), crește până la 3 rânduri, apoi derulează
   (js/perp/ai-prompt.js îi pune înălțimea după conținut). 4.35em = 3 × line-height 1.45. */
.ai-prompt-camp textarea {resize: none; height: 42px; min-height: 42px; max-height: calc(4.35em + 22px); padding: 11px 0;
  overflow-y: hidden; display: block;}
/* Butonul care pornește analiza: plin, în culoarea aplicației, cu text (10.10.2026, cererea
   utilizatorului — săgeata albă pe contur se citea ca un buton secundar). Fondul e accentul la 75%
   (#007a7f, contrast 5,12 cu albul; accentul curat dă 3,08). Prima declarație e rezerva fără color-mix. */
.ai-prompt-rand .ai-prompt-trimite.but {flex: 0 0 auto; height: 44px; min-width: 150px; margin: 0; padding: 0 20px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 10px;
  border: 1px solid #007a7f; background: #007a7f; color: #fff; font-weight: 600; font-size: 15px;
  box-shadow: 0 2px 6px rgba(0,122,127,.25);}
@supports (background: color-mix(in srgb, red 50%, blue)) {
  .ai-prompt-rand .ai-prompt-trimite.but {background: color-mix(in srgb, var(--mov) 75%, #000); border-color: color-mix(in srgb, var(--mov) 75%, #000);}
  .ai-prompt-rand .ai-prompt-trimite.but:hover:not(:disabled), .ai-prompt-rand .ai-prompt-trimite.but:focus-visible {background: color-mix(in srgb, var(--mov) 60%, #000);}
}
.ai-prompt-rand .ai-prompt-trimite.but:hover:not(:disabled) {color: #fff;}
.ai-prompt-rand .ai-prompt-trimite .mso {font-size: 20px; color: inherit;}
/* „Filtre" (Rapoarte AI): buton secundar lângă cel de pornire, aceeași înălțime; numărul de
   filtre completate stă pe o pastilă; deschis, panoul de filtre apare imediat sub casetă */
.ai-prompt-rand .ai-prompt-filtre.but {flex: 0 0 auto; height: 44px; margin: 0; padding: 0 16px; gap: 6px;
  border-radius: 10px; border: 1px solid #c9d2dc; background: #fff; color: #2b3440; font-weight: 600; font-size: 14px;}
.ai-prompt-rand .ai-prompt-filtre.but:hover, .ai-prompt-rand .ai-prompt-filtre.but[aria-expanded="true"] {border-color: var(--mov); color: #2b3440;}
.ai-prompt-rand .ai-prompt-filtre .mso {font-size: 20px; color: var(--mov);}
.ai-prompt-filtre-nr {display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px;
  padding: 0 6px; border-radius: 10px; background: #007a7f; color: #fff; font-size: 12px; font-weight: 700;}
.ai-prompt-filtre-nr[hidden] {display: none;}
.ai-prompt-filtre-panou {margin-top: 12px; padding: 12px 14px; border: 1px solid #e3e8ee; border-radius: 10px; background: #f8fafc;}
.ai-prompt-filtre-panou[hidden] {display: none;}
.ai-prompt-filtre-panou .air-filters {margin-top: 0;}
.tema-dark .ai-prompt-rand .ai-prompt-filtre.but {background: #151c25; border-color: #34414f; color: #e6edf3;}
.tema-dark .ai-prompt-filtre-panou {background: #151c25; border-color: #2c3848;}
.ai-prompt-jos {display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 12px; align-items: center; margin-top: 8px; font-size: 13px;}
.ai-prompt-jos a.ai-prompt-link {color: var(--mov); font-weight: 600; text-decoration: none;}
.ai-prompt-jos a.ai-prompt-link:hover {text-decoration: underline;}
.ai-prompt-nota {font-size: 12px; font-weight: 400; color: #66727f;}
.tema-dark .ai-prompt {background: #1c2430; border-color: #2c3848;}
.tema-dark .ai-prompt-titlu, .tema-dark .ai-prompt-mod label {color: #e6edf3;}
.tema-dark .ai-prompt-camp {background: #151c25; border-color: #34414f; color: #e6edf3;}
.tema-dark .ai-prompt-nota {color: #9fb0bd;}
@media (max-width: 767px) {
  .ai-prompt {padding: 12px;}
  .ai-prompt-ic {display: none;}
  /* pe telefon butonul trece sub câmp, pe toată lățimea: lângă câmp i-ar fi luat jumătate din rând */
  .ai-prompt-rand {flex-wrap: wrap;}
  .ai-prompt-camp {flex-basis: 100%;}
  .ai-prompt-rand .ai-prompt-trimite.but {flex: 1 1 0;}   /* singur pe rând (vânzări): tot rândul; cu „Filtre": restul */
  /* un singur rând pe telefon (11.10.2026): microfonul de 44px fără margini dă exact înălțimea câmpului,
     iar îndemnul lung se taie cu „…" în loc să umfle caseta pe două rânduri */
  .ai-prompt-camp .dict-mic {margin: 0;}
  .ai-prompt-camp textarea {height: 44px; min-height: 44px; padding: 11px 0;}
  .ai-prompt-camp textarea::placeholder {white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
}

/* Căutarea în nomenclatoare din fișa produsului (12.10.2026, js/perp/nomenclator-produs.js):
   NC / CPV (BT-158) și conturile contabile. Caseta și lista împrumută stilul Smart Search
   (css/smartsearch.css — `.ss-wrap`, `.ss-dropdown`, `.ss-group`, `.ss-item`, cu tot cu tema întunecată);
   aici doar ce diferă. ⚠️ Scrise cu `.form-grup` / `.nom-ss` în față: smartsearch.css se încarcă DUPĂ
   fișierul ăsta, iar la specificitate egală ar câștiga el. */
.nom-camp { position: relative; }
.nom-den { display: block; margin-top: 4px; font-size: 11px; line-height: 1.35; color: #66727f; }
.nom-den:empty { display: none; }
.nom-den.nom-gol { color: #b45309; }
.form-grup.nom-ss .ss-wrap { height: 35px; }
.nom-ss .ss-dropdown.nom-dropdown { left: 0; right: 0; min-width: 0; max-width: none; }
.nom-ss .nom-item {
	display: block; width: 100%; text-align: left; border: 0; border-left: 3px solid transparent;
	background: transparent; font: inherit; cursor: pointer;
}
.nom-ss .nom-item.nom-activ { background: rgba(0, 163, 169, .08); border-left-color: var(--mov, #00a3a9); }
.nom-ss .nom-item .ss-item-title { white-space: normal; font-weight: 500; color: #2d3a45; }
.nom-ss .nom-item .nom-cod { color: color-mix(in srgb, var(--mov) 72%, #000); font-weight: 700; font-variant-numeric: tabular-nums; }
.nom-ss .nom-mai { font-size: .66rem; font-weight: 400; text-transform: none; letter-spacing: 0; opacity: .65; }
.tema-dark .nom-ss .nom-item .ss-item-title { color: #e6edf3; }
.tema-dark .nom-ss .nom-item .nom-cod { color: #59c3c7; }
.tema-dark .nom-den { color: #9fb0bd; }
.tema-dark .nom-den.nom-gol { color: #f0b46a; }
/* Unitatea de măsură din fișa produsului (js/perp/unitate-masura.js): aceeași casetă, unitatea aleasă acum marcată în listă. */
.form-grup .um-ss .ss-wrap { height: 35px; }
.um-ss .nom-item.um-curent .ss-item-title { font-weight: 700; }
.um-ss .nom-item.um-curent { border-left-color: color-mix(in srgb, var(--mov) 45%, transparent); }

/* „Clasificare și conturi” din fișa produsului (12.10.2026): codul NC / CPV, conturile și
   „Selectează cu AI” (js/perp/clasificare-ai.js). Prefixul `cla-` (nu `pc-`: îl folosește Plăți card). */
.cla-sectiune { margin-bottom: 18px; padding-bottom: 6px; border-bottom: 1px solid #e3e6e8; }
.cla-cap { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.cla-cap .h3-special { margin-bottom: 0; }
.cla-sectiune > .form-hint { margin-top: 10px; }
.cla-ai-buton { display: inline-flex; align-items: center; gap: 6px; height: 34px; margin: 0; }
.cla-ai-buton .mso { font-size: 19px; }
.cla-ai-buton.cla-ai-lucreaza .mso { animation: cla-ai-roteste 1.2s linear infinite; }
@keyframes cla-ai-roteste { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .cla-ai-buton.cla-ai-lucreaza .mso { animation: none; } }
.cla-ai-panou { margin: 6px 0 12px; padding: 12px 14px; border: 1px solid #cfe0f8; border-radius: 10px; background: #f6f9fe; }
.cla-ai-panou[hidden] { display: none; }
.cla-ai-panou.cla-ai-asteapta .cla-ai-grup, .cla-ai-panou.cla-ai-asteapta .cla-ai-panou-cap #cla-ai-toate { opacity: .45; }
.cla-ai-panou-cap { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 6px; }
.cla-ai-panou-cap b { font-size: 14px; }
.cla-ai-tokeni { font-size: 11px; color: #66727f; margin-right: auto; }
.cla-ai-panou-cap .but { margin: 0; }
.cla-ai-x { border: 0; background: transparent; font-size: 22px; line-height: 1; cursor: pointer; color: #66727f; padding: 0 4px; }
.cla-ai-stare { font-size: 13px; color: #2d3a45; }
.cla-ai-stare:empty { display: none; }
.cla-ai-stare.cla-ai-eroare { color: #b42318; }
.cla-ai-grup h4 { margin: 12px 0 6px; font-size: 13px; font-weight: 600; }
.cla-ai-rand { position: relative; padding: 8px 90px 8px 10px; margin-bottom: 6px; border: 1px solid #e3e6e8; border-radius: 8px; background: #fff; }
.cla-ai-rand.cla-ai-primul { border-color: color-mix(in srgb, var(--mov) 55%, #fff); }
.cla-ai-rand-cap { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.cla-ai-rand-cap b { color: color-mix(in srgb, var(--mov) 72%, #000); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cla-ai-den { font-size: 13px; }
.cla-ai-rec, .cla-ai-inc { font-style: normal; font-size: 11px; padding: 1px 7px; border-radius: 10px; white-space: nowrap; }
.cla-ai-rec { background: color-mix(in srgb, var(--mov) 14%, #fff); color: #0f5e62; }
.cla-ai-inc-ridicata { background: #e6f4ea; color: #1a7f37; }
.cla-ai-inc-medie { background: #fff4e0; color: #8a5300; }
.cla-ai-inc-scazuta { background: #fde8e8; color: #b42318; }
.cla-ai-motiv { margin-top: 3px; font-size: 12px; color: #4b5866; }
.cla-ai-aplica { position: absolute; top: 8px; right: 8px; margin: 0; }
.cla-ai-aplica.cla-ai-aplicat { background: #e6f4ea; border-color: #1a7f37; color: #1a7f37; }
.cla-ai-gol { margin: 0 0 6px; font-size: 12px; color: #8a5300; }
.cla-ai-obs { margin: 10px 0 0; font-size: 12px; color: #2d3a45; }
.cla-ai-obs[hidden] { display: none; }
.cla-ai-nota { margin: 8px 0 0; font-size: 11px; color: #66727f; }
@media (max-width: 767px) {
	.cla-ai-rand { padding-right: 10px; }
	.cla-ai-aplica { position: static; margin-top: 6px; }
}
.tema-dark .cla-sectiune { border-bottom-color: #465561; }
.tema-dark .cla-ai-panou { background: #2c3945; border-color: #465561; }
.tema-dark .cla-ai-rand { background: var(--menu, #343f47); border-color: #465561; }
.tema-dark .cla-ai-rand-cap b { color: #59c3c7; }
.tema-dark .cla-ai-motiv, .tema-dark .cla-ai-stare, .tema-dark .cla-ai-obs { color: #c3ccd5; }