/* Specific paginilor Finanțe → Profit și Finanțe → Cheltuieli fixe
   (js/finante/finante.js, js/finante/cheltuieli.js). */

/* Donut chart — folosit de ambele pagini Finanțe (distribuția cheltuielilor / cost per comandă) */
.donut-card {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto 22px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 24px;
  box-shadow: var(--shadow);
}
.donut-card h3 {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .05em;
  white-space: nowrap;
}
.donut-ring { flex-shrink: 0; }
.donut-ring svg { display: block; width: 136px; height: 136px; }
.donut-center-value { font-size: 15px; font-weight: 700; fill: var(--text); }
.donut-center-label { font-size: 9px; fill: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }
.donut-legend { display: flex; flex-direction: column; gap: 8px; }
.donut-legend-row { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.donut-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.donut-legend-label { color: var(--text); white-space: nowrap; }
.donut-legend-pct { font-weight: 700; color: var(--text); min-width: 44px; text-align: right; font-variant-numeric: tabular-nums; }

/* Rând cu mai multe carduri-donut alături (ex: distribuție + simulator) */
.donut-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; margin-bottom: 22px; }
.donut-row .donut-card { margin: 0; }

/* Finanțe → Profit */
.tva-label { font-size: 13px; color: var(--text-muted); display: inline-flex; align-items: center; gap: 6px; }
.tva-input { width: 70px; }
.disclaimer { margin-top: 10px; }

.sku-filter-row { max-width: 640px; margin-bottom: 16px; }

.sku-item-label { cursor: pointer; }
.sku-item-label:hover { text-decoration: underline; }
.sku-item-label.showing-sku { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12px; color: var(--text-muted); }

/* Finanțe → Cheltuieli fixe — simulator "cost fix per comandă", stilizat ca o cartelă-donut (vezi .donut-row) */
.cheltuieli-sim-field { display: flex; align-items: center; gap: 8px; margin: 2px 0 8px; }
.cheltuieli-sim-field label { font-size: 13px; color: var(--text-muted); }
.cheltuieli-sim-field input { width: 80px; }
.cheltuieli-sim-formula { font-size: 13px; color: var(--text-muted); }

.cheltuieli-section {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
  box-shadow: var(--shadow);
  margin-bottom: 16px;
}
.cheltuieli-section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 2px; }
.cheltuieli-section-header h3 { margin: 0; font-size: 14px; }

/* Titlul secțiunii de indicatori de sub donut chart (Finanțe → Profit) */
.insights-section-title { margin: 4px 0 10px; font-size: 12px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; }
.cheltuieli-section-total { font-size: 15px; font-weight: 700; }
.cheltuieli-section-subheader { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.cheltuieli-sort-select { font-size: 12px; padding: 4px 8px; }

.cheltuieli-list { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; margin-bottom: 10px; }

/* Grid (nu flex) ca fiecare coloană — inclusiv cele două bife — să pornească din aceeași poziție pe toate rândurile. */
.cheltuieli-row {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) 118px 76px 56px 84px 84px 88px 32px;
  align-items: center;
  gap: 8px;
}
.cheltuieli-suma-wrap { display: flex; align-items: center; gap: 6px; }
.cheltuieli-suma { width: 90px; }
.cheltuieli-scadenta { width: 52px; }
.cheltuieli-checkbox-label { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--text-muted); white-space: nowrap; }
.cheltuieli-row-tva-amount, .cheltuieli-row-dividend-amount { white-space: nowrap; }
.cheltuieli-dividend-paren { font-size: 12px; font-weight: 400; color: var(--text-muted); white-space: nowrap; }

/* Text secundar în cardul "Procent neridicare" (nr. de comenzi estimate) — mai mic
   decât procentul principal, ca să nu domine cardul și să încapă pe un rând. */
.card-value-sub { display: block; font-size: 12px; font-weight: 500; color: var(--text-muted); margin-top: 2px; }

/* Finanțe → Calculator produs — profit per unitate introdus manual (COGS, preț, curier etc.).
   Grid (nu flex) ca .cheltuieli-row, dar cu 2 coloane calculate în plus (profit/unitate, procent). */
.calc-produs-list { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; margin-bottom: 10px; }
.calc-produs-row {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) 90px 90px 90px 100px 100px 80px 110px 80px 110px 32px;
  align-items: center;
  gap: 8px;
}
.calc-produs-header {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 4px;
}
.cp-field { display: flex; align-items: center; gap: 4px; }
.cp-field input { width: 100%; min-width: 0; }
.cp-result-wrap { display: flex; align-items: center; justify-content: flex-end; gap: 4px; }
.cp-result-label { display: none; } /* vizibilă doar pe mobil — desktop are deja .calc-produs-header */
.cp-result { font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.cp-result.green { color: var(--green); }
.cp-result.red { color: var(--red); }
.cp-result.blue { color: var(--blue); } /* CPA break-even — informativ, nu urmează culoarea profit/pierdere */

/* Finanțe → Profit → tabelul "Profit per SKU" — rată neridicare + reclamă editabile per rând. */
.skp-input-wrap { display: flex; align-items: center; gap: 4px; }
.skp-input-wrap input { width: 70px; min-width: 0; } /* rata de neridicare — max 3 cifre (100%) + săgețile native ale input[number] */
.skp-input-wrap input.skp-reclama-input { width: 90px; } /* reclama — sume de mii de lei, are nevoie de mai mult loc */
.skp-profit { font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.skp-profit.green { color: var(--green); }
.skp-profit.red { color: var(--red); }
.skp-total-row td { font-weight: 700; border-top: 2px solid var(--border); }

/* Telefon: cartelele-donut (ring + legendă alăturate, width:fit-content) nu mai încap pe lățime —
   trec cercul deasupra legendei și ocupă toată lățimea disponibilă. */
@media (max-width: 480px) {
  .donut-card { flex-direction: column; width: 100%; text-align: center; gap: 14px; }
  .donut-legend { width: 100%; align-items: center; }
  .donut-legend-row { width: 100%; max-width: 240px; }
}

/* .cheltuieli-list-wrap — plasă de siguranță: dacă din orice motiv (nume lung, zoom, ecran
   neobișnuit) rândurile tot nu încap la lățimea de mai jos, scrolează orizontal DOAR lista,
   nu toată pagina (la fel ca .table-wrap pentru tabele) — fără asta, un grid cu coloane fixe
   care nu încape își revarsă conținutul în afara lui .cheltuieli-section, spre marginea paginii. */
.cheltuieli-list-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* B/C. Sub laptop mic: .cheltuieli-row e un grid cu coloane în pixeli fixe (~734px conținut minim)
   gândit pentru desktop — nu există un rând de header deasupra cu care trebuie să rămână aliniat
   (doar secțiunea are titlu/total), așa că sub acest prag îl trecem pe flex-wrap: fiecare rând
   devine un mini-card care își înfășoară câmpurile pe mai multe linii, în loc să oblige la scroll
   orizontal pe un formular. Pragul (1100px, nu 700px) ține cont de sidebar-ul de 240px + padding-ul
   lui .main (~44-64px) care rămân prezente pe orice ecran >760px — un prag de 700px pe VIEWPORT
   lăsa conținutul (734px) să nu încapă în cele ~700-304=396px rămase disponibile lui .main pe orice
   laptop cu fereastra sub ~1040px lățime, mult înainte ca "telefon" să pară motivul. */
@media (max-width: 1100px) {
  .cheltuieli-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
  }
  .cheltuieli-denumire { flex: 1 1 100%; }
  .cheltuieli-suma-wrap { flex: 1 1 110px; }
  .cheltuieli-suma, .cheltuieli-scadenta { flex: 1; width: auto; min-width: 0; }
  .cheltuieli-row > [data-remove-cheltuiala] { margin-left: auto; }
}

/* .calc-produs-table-wrap — aceeași plasă de siguranță ca .cheltuieli-list-wrap mai sus, dar
   înfășoară și rândul de header (nu doar lista), ca cele două să scroleze împreună și coloanele
   să rămână aliniate dacă totuși scrolează. */
.calc-produs-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* B/C. Sub laptop mic: la fel ca .cheltuieli-row mai sus, dar pragul e mult mai mare (1440px, nu
   900px) — .calc-produs-row are conținut minim ~1100px (2 coloane în plus față de .cheltuieli-row:
   profit/unitate, procent, CPA break-even), plus cei ~240+64px de sidebar+padding care rămân
   prezenți pe orice ecran de tip "laptop" (>760px lățime, unde sidebar-ul nu s-a strâns încă la
   bară orizontală) — un prag de 900px pe viewport lăsa acest rând să se reverse în afara paginii
   pe majoritatea laptopurilor obișnuite (1024-1366px), exact fereastra din screenshot-ul care a
   pornit verificarea asta. Rândul de header (etichetele coloanelor) n-are sens pe mobil odată ce
   totul e flex-wrap, deci se ascunde. */
@media (max-width: 1440px) {
  .calc-produs-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
  }
  .cp-nume { flex: 1 1 100%; }
  .cp-field { flex: 1 1 100px; }
  .cp-field input { flex: 1; width: auto; min-width: 0; }
  .cp-result-wrap { flex: 1 1 100px; justify-content: flex-start; }
  .cp-result-label { display: inline; font-size: 11px; color: var(--text-muted); }
  .calc-produs-row > [data-remove-produs] { margin-left: auto; }
  /* Selector mai specific (2 clase) decât .calc-produs-row de mai sus, ca să câștige indiferent
     de ordinea din fișier — altfel display:flex de pe .calc-produs-row ar suprascrie display:none. */
  .calc-produs-row.calc-produs-header { display: none; }
}