/* ============================================================
   fisa-online.css — configurator „Comandă debitare online"
   Limbajul vizual Redesign 2026: Space Grotesk + Space Mono,
   ink/paper, colțuri drepte, linii subțiri, accente portocalii.
   Folosește tokenii din :root ai shell-ului (_fisa-shell-2026.html):
   --grotesk, --rd-mono, --rd-ink, --rd-paper, --rd-mute, --accent…
   ============================================================ */

:root {
  --fo-line: rgba(20, 17, 15, 0.16);
  --fo-line-soft: rgba(20, 17, 15, 0.09);
  --fo-card-bg: #FFFFFF;
  --fo-soft-bg: #EDE8DD;
  --fo-err: #B3261E;
  --fo-ok-bg: #E8EFE4;
  --fo-ok-ink: #2C4A25;
}

/* ---- hero ---- */
.fo-hero { background: var(--rd-paper); border-bottom: 1px solid var(--fo-line); }
.fo-hero-inner { max-width: 1180px; margin: 0 auto; padding: clamp(3.2rem, 8vw, 5.5rem) 1.5rem 2.6rem; }
.fo-eyebrow {
  font-family: var(--rd-mono); font-size: 0.78rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--rd-mute); margin: 0 0 1.1rem;
}
.fo-hero-title {
  font-family: var(--grotesk); font-weight: 600; letter-spacing: -0.03em;
  font-size: clamp(2.4rem, 6vw, 4rem); line-height: 1.02; color: var(--rd-ink); margin: 0;
}
.fo-hero-title em { font-style: normal; color: var(--accent-deep); }
.fo-hero-sub { max-width: 56ch; margin: 1.2rem 0 0; color: var(--rd-mute); font-size: 1.02rem; line-height: 1.7; }

/* linia discretă cu căile alternative */
.fo-altcai { max-width: 1180px; margin: 1.4rem auto 0; padding: 0 1.5rem; }
.fo-altcai p { text-align: center; margin: 0; font-family: var(--rd-mono); font-size: 0.78rem; letter-spacing: 0.02em; color: var(--rd-mute); }
.fo-altcai a { color: var(--accent-deep); font-weight: 700; text-decoration: none; border-bottom: 1px solid currentColor; }
.fo-altcai a:hover { color: var(--rd-ink); }

/* ---- app ---- */
.fo-app { max-width: 1020px; margin: 0 auto; padding: 3rem 1.5rem 5.5rem; color: var(--rd-ink); }

/* ---- pași ---- */
.fo-step { margin-bottom: 3.4rem; }
.fo-step-head { display: flex; align-items: baseline; gap: 0.9rem; }
.fo-step-num {
  font-family: var(--rd-mono); font-size: 0.82rem; letter-spacing: 0.1em;
  color: var(--rd-mute); flex-shrink: 0; background: none; border: none;
}
.fo-step-num::before { content: "( 0"; }
.fo-step-num::after { content: " )"; }
.fo-step-head h2 {
  font-family: var(--grotesk); font-weight: 600; letter-spacing: -0.02em;
  font-size: clamp(1.7rem, 4vw, 2.3rem); line-height: 1.08; color: var(--rd-ink); margin: 0;
}
.fo-step-sub { color: var(--rd-mute); margin: 0.55rem 0 1.4rem; font-size: 0.95rem; line-height: 1.6; }

/* ---- cele trei intrări ---- */
.fo-start { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.8rem; margin: 0 0 1.4rem; }
.fo-start-tile {
  display: flex; flex-direction: column; gap: 0.35rem; text-align: left;
  padding: 1.05rem 1.1rem; background: var(--fo-card-bg); border: 1px solid var(--fo-line);
  font-family: inherit; cursor: default; position: relative;
}
.fo-start-active { border-left: 3px solid var(--accent); }
.fo-start-action { cursor: pointer; transition: border-color 0.18s, transform 0.18s; }
.fo-start-action:hover { border-color: var(--rd-ink); transform: translateY(-2px); }
.fo-start-title { font-family: var(--grotesk); font-weight: 600; font-size: 0.98rem; letter-spacing: -0.01em; color: var(--rd-ink); }
.fo-start-desc { font-size: 0.82rem; color: var(--rd-mute); line-height: 1.5; }
.fo-start-tile input[type="file"] { display: none; }

/* ---- carduri & câmpuri ---- */
.fo-card { background: var(--fo-card-bg); border: 1px solid var(--fo-line); padding: 1.7rem; }
.fo-card + .fo-card { margin-top: 1.2rem; }
.fo-card-title {
  font-family: var(--rd-mono); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; margin: 0 0 1.2rem; color: var(--rd-ink);
}
.fo-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.fo-field { margin-bottom: 1.1rem; }
.fo-field:last-child { margin-bottom: 0; }
.fo-field label {
  display: block; font-family: var(--rd-mono); font-size: 0.7rem; letter-spacing: 0.08em;
  text-transform: uppercase; margin-bottom: 0.45rem; color: var(--rd-mute);
}
.fo-req { color: var(--accent-deep); }
.fo-field input, .fo-field select, .fo-field textarea {
  width: 100%; padding: 0.8rem 0.95rem; font-family: inherit; font-size: 0.95rem;
  border: 1px solid var(--fo-line); border-radius: 0;
  background: var(--fo-card-bg); color: var(--rd-ink); transition: border-color 0.18s, box-shadow 0.18s;
}
.fo-field textarea { resize: vertical; min-height: 56px; }
.fo-field input:focus, .fo-field select:focus, .fo-field textarea:focus {
  outline: none; border-color: var(--rd-ink); box-shadow: 0 0 0 3px rgba(255, 136, 0, 0.18);
}
.fo-field input.invalid, .fo-field select.invalid { border-color: var(--fo-err); }
.fo-field input[readonly] { background: var(--fo-soft-bg); color: var(--rd-mute); }
.fo-err { color: var(--fo-err); font-size: 0.8rem; margin-top: 0.35rem; display: none; }
.fo-err.show { display: block; }

/* ---- checkbox label ---- */
.fo-cb { display: flex; align-items: flex-start; gap: 0.6rem; cursor: pointer; font-size: 0.92rem; color: var(--rd-ink); line-height: 1.5; margin: 0.4rem 0; }
.fo-cb input { width: auto; margin-top: 0.2rem; flex-shrink: 0; cursor: pointer; accent-color: var(--accent-deep); }
.fo-cb a { color: var(--accent-deep); text-decoration: underline; }
.fo-cb-mini { display: inline-flex; margin: 0.1rem 0; font-size: 0.85rem; color: var(--rd-mute); }

/* ---- material PAL/PFL/Blat ---- */
.fo-mat-types { display: flex; gap: 0; margin-bottom: 1.2rem; flex-wrap: wrap; border: 1px solid var(--fo-line); width: fit-content; }
.fo-mat-type {
  min-width: 130px; padding: 0.85rem 1.3rem; font-family: var(--rd-mono); font-size: 0.8rem;
  letter-spacing: 0.06em; text-transform: uppercase;
  border: none; border-right: 1px solid var(--fo-line); background: var(--fo-card-bg); color: var(--rd-mute);
  cursor: pointer; transition: background 0.18s, color 0.18s;
}
.fo-mat-type:last-child { border-right: none; }
.fo-mat-type:hover { color: var(--rd-ink); }
.fo-mat-type.active { background: var(--rd-ink); color: var(--rd-paper); }
.fo-blat-opts { border: 1px solid var(--fo-line-soft); background: var(--rd-paper); padding: 1rem 1.1rem; margin-bottom: 1.1rem; }
.fo-blat-opts .fo-field { max-width: 260px; }

/* note discrete */
.fo-note-inline, .fo-pfl-note {
  font-size: 0.84rem; color: var(--rd-mute); background: var(--rd-paper);
  border-left: 3px solid var(--accent); padding: 0.65rem 0.9rem; margin: 0.6rem 0; line-height: 1.55;
}

/* ---- buton alege decor ---- */
.fo-decor-pick { display: flex; gap: 0.6rem; align-items: stretch; }
.fo-btn-decor {
  flex: 1; display: flex; align-items: center; gap: 0.8rem; text-align: left;
  padding: 0.8rem 1rem; font-family: inherit; font-size: 0.95rem; color: var(--rd-ink);
  border: 1px solid var(--fo-line); background: var(--fo-card-bg);
  cursor: pointer; transition: border-color 0.18s;
}
.fo-btn-decor:hover { border-color: var(--rd-ink); }
.fo-btn-decor svg { margin-left: auto; color: var(--rd-mute); flex-shrink: 0; }
.fo-decor-swatch {
  width: 2.4rem; height: 2.4rem; flex-shrink: 0;
  background: var(--fo-soft-bg) center/cover no-repeat; border: 1px solid var(--fo-line);
}
.fo-decor-label { font-weight: 500; }
.fo-decor-label small { display: block; font-weight: 400; color: var(--rd-mute); font-size: 0.8rem; margin-top: 1px; }
.fo-decor-clear {
  padding: 0 1.1rem; font-family: var(--rd-mono); font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase;
  border: 1px solid var(--fo-line); background: var(--rd-paper); color: var(--rd-mute);
  cursor: pointer; transition: border-color 0.18s, color 0.18s;
}
.fo-decor-clear:hover { border-color: var(--rd-ink); color: var(--rd-ink); }
.fo-skip { margin: 0.9rem 0 0.4rem; }

/* bara compactă cu datele clientului (ecranul 2) */
.fo-client-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  background: var(--rd-ink); color: var(--rd-paper); padding: 0.9rem 1.2rem; margin-bottom: 2.4rem;
}
.fo-client-bar[hidden] { display: none; }
.fo-bar-info { display: flex; align-items: baseline; gap: 0.4rem 1rem; flex-wrap: wrap; min-width: 0; }
.fo-bar-name { font-family: var(--grotesk); font-weight: 600; font-size: 0.97rem; color: var(--rd-paper); }
.fo-bar-detail { color: rgba(245, 242, 236, 0.72); font-size: 0.83rem; font-family: var(--rd-mono); }
.fo-client-bar .fo-mini { background: transparent; color: var(--rd-paper); border-color: rgba(245, 242, 236, 0.4); }
.fo-client-bar .fo-mini:hover { border-color: var(--accent); color: var(--accent); }
@media (max-width: 560px) { .fo-client-bar { flex-direction: column; align-items: flex-start; } .fo-bar-info { flex-direction: column; gap: 0.15rem; } }

/* gate „date obligatorii întâi" */
.fo-gate { margin-top: 1.3rem; display: flex; flex-direction: column; gap: 1.1rem; }
.fo-gate .fo-btn-add { align-self: flex-start; }
#fo-import-err { margin-top: 0.4rem; }

/* ---- piese ---- */
.fo-pieces { margin-top: 1.4rem; display: flex; flex-direction: column; gap: 1.2rem; }
.fo-empty { color: var(--rd-mute); font-size: 0.92rem; padding: 1.4rem; text-align: center; border: 1px dashed var(--fo-line); margin-top: 1.2rem; }
.fo-pieces-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.4rem; flex-wrap: wrap; }
.fo-btn-add {
  display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.95rem 1.6rem;
  font-family: var(--rd-mono); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--rd-paper); background: var(--rd-ink);
  border: 1px solid var(--rd-ink); cursor: pointer; transition: background 0.18s, color 0.18s, transform 0.15s;
}
.fo-btn-add:hover { background: var(--accent-deep); border-color: var(--accent-deep); transform: translateY(-1px); }
.fo-totals { font-size: 0.85rem; font-family: var(--rd-mono); color: var(--rd-mute); }
.fo-totals strong { color: var(--rd-ink); }

/* ---- card piesă ---- */
.fo-piece { border: 1px solid var(--fo-line); background: var(--fo-card-bg); padding: 1.4rem; }
.fo-piece-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; border-bottom: 1px solid var(--fo-line-soft); padding-bottom: 0.7rem; }
.fo-piece-title { font-family: var(--rd-mono); font-size: 0.76rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--rd-ink); }
.fo-piece-acts { display: flex; gap: 0.5rem; }
.fo-mini {
  padding: 0.42rem 0.85rem; font-family: var(--rd-mono); font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase;
  border: 1px solid var(--fo-line); background: var(--fo-card-bg); color: var(--rd-mute);
  cursor: pointer; transition: border-color 0.18s, color 0.18s;
}
.fo-mini:hover { border-color: var(--rd-ink); color: var(--rd-ink); }
.fo-del:hover { border-color: var(--fo-err); color: var(--fo-err); }
.fo-piece-grid { display: grid; grid-template-columns: 2fr 0.8fr 1fr 1fr; gap: 0.9rem; }
.fo-piece-grid .fo-field { margin-bottom: 0; }

/* ---- cant ---- */
.fo-cant { margin-top: 1.2rem; padding-top: 1.1rem; border-top: 1px solid var(--fo-line-soft); }
.fo-cant-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.9rem; }
.fo-cant-title { font-family: var(--rd-mono); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--rd-ink); }
.fo-cant-main { display: flex; gap: 1.4rem; align-items: flex-start; flex-wrap: wrap; }

.fo-diagram { position: relative; width: 196px; height: 134px; flex-shrink: 0; }
.fo-diagram-face {
  position: absolute; inset: 13px; background: var(--rd-paper);
  border: 1px dashed var(--fo-line);
  display: flex; align-items: center; justify-content: center; gap: 0.3rem;
  font-family: var(--rd-mono); font-size: 0.7rem; color: var(--rd-mute); text-align: center; padding: 4px;
}
.fo-edge { position: absolute; background: #D8D2C4; border: none; cursor: pointer; padding: 0; transition: background 0.18s, opacity 0.18s; }
.fo-edge:hover:not(.disabled) { background: var(--rd-mute); }
.fo-edge.on { background: var(--accent-deep); }
.fo-edge.disabled { opacity: 0.35; cursor: not-allowed; }
.fo-edge-top { top: 0; left: 13px; right: 13px; height: 9px; }
.fo-edge-bottom { bottom: 0; left: 13px; right: 13px; height: 9px; }
.fo-edge-left { left: 0; top: 13px; bottom: 13px; width: 9px; }
.fo-edge-right { right: 0; top: 13px; bottom: 13px; width: 9px; }
/* Blat: latura lungă de sus (L1) vine rotunjită și melaminată din fabrică. Nu se
   cantuiește — dar nu e „indisponibilă", ci gata finisată, așa că o desenăm plină
   și rotunjită, nu ștearsă ca laturile blocate de dimensiune. */
.fo-diagram.blat .fo-edge.rounded,
.fo-diagram.blat .fo-edge.rounded:hover { border-radius: 9px 9px 0 0; background: var(--rd-ink); opacity: 1; cursor: default; }

.fo-edge-rows { flex: 1; min-width: 240px; display: flex; flex-direction: column; gap: 0.55rem; }
.fo-edge-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 0.6rem; padding: 0.45rem 0.65rem; border: 1px solid var(--fo-line-soft); background: var(--fo-card-bg); }
.fo-edge-row.on { border-color: var(--accent-deep); background: #FDF4E7; }
.fo-edge-row.disabled { opacity: 0.5; }
.fo-edge-on { margin: 0; font-size: 0.86rem; color: var(--rd-ink); }
.fo-edge-ctl { display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.fo-edge-row .e-th { width: auto; padding: 0.45rem 0.6rem; font-size: 0.85rem; border: 1px solid var(--fo-line); background: var(--fo-card-bg); font-family: inherit; }
.fo-edge-row:not(.on) .fo-edge-ctl { visibility: hidden; }
.fo-edge-color { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.42rem 0.6rem; border: 1px solid var(--fo-line); background: var(--fo-card-bg); cursor: pointer; font-family: var(--rd-mono); font-size: 0.68rem; letter-spacing: 0.02em; color: var(--rd-mute); white-space: nowrap; }
.fo-edge-color:hover { border-color: var(--rd-ink); color: var(--rd-ink); }
.fo-edge-color.set { border-color: var(--accent-deep); color: var(--rd-ink); }
.ec-swatch { width: 1rem; height: 1rem; flex-shrink: 0; border: 1px solid var(--fo-line); background-color: var(--fo-card-bg); background-size: cover; background-position: center; background-image: repeating-linear-gradient(45deg, #E8E3D8 0, #E8E3D8 3px, #fff 3px, #fff 6px); }
.ec-swatch.set { background-image: none; }
.ec-label { max-width: 96px; overflow: hidden; text-overflow: ellipsis; }
.fo-edge-hint { grid-column: 1 / -1; font-size: 0.74rem; color: var(--fo-err); display: none; }
.fo-edge-row.disabled .fo-edge-hint { display: block; }
.fo-modal-default { margin: 0 1.3rem 0.2rem; padding: 0.75rem 1rem; text-align: left; font-family: var(--rd-mono); font-size: 0.75rem; letter-spacing: 0.04em; font-weight: 700; color: var(--rd-ink); background: var(--rd-paper); border: 1px solid var(--fo-line); cursor: pointer; }
.fo-modal-default:hover { border-color: var(--accent-deep); color: var(--accent-deep); }
.fo-modal-default[hidden] { display: none; }

.fo-cant-color { display: flex; align-items: center; gap: 0.55rem; flex-wrap: wrap; margin-top: 1rem; font-size: 0.86rem; color: var(--rd-mute); }
.fo-cant-color-val { font-weight: 600; color: var(--rd-ink); }
.fo-cant-note { font-size: 0.78rem; color: var(--rd-mute); margin-top: 0.7rem; line-height: 1.55; }

/* ---- prelucrări speciale (expander) ---- */
.fo-piece-extra { margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid var(--fo-line-soft); }
.fo-piece-extra .fo-field { margin-top: 0.6rem; }
.fo-extra { margin-top: 1.1rem; border-top: 1px solid var(--fo-line-soft); }
.fo-extra-summary {
  list-style: none; cursor: pointer; padding: 0.9rem 0 0.4rem;
  font-family: var(--rd-mono); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--rd-ink); user-select: none;
}
.fo-extra-summary::-webkit-details-marker { display: none; }
.fo-extra-summary::before { content: "+"; display: inline-block; width: 1.1rem; color: var(--accent-deep); font-weight: 700; }
.fo-extra[open] .fo-extra-summary::before { content: "–"; }
.fo-extra-summary:hover { color: var(--accent-deep); }
.fo-extra-hint { font-weight: 400; letter-spacing: 0.02em; text-transform: none; color: var(--rd-mute); font-size: 0.72rem; }
.fo-extra-body { padding: 0.4rem 0 0.2rem; }
.fo-extra-body .fo-field { margin-top: 0.7rem; }
.fo-inline-opts { display: flex; gap: 0.9rem; flex-wrap: wrap; align-items: flex-end; background: var(--rd-paper); border: 1px solid var(--fo-line-soft); padding: 0.8rem 0.9rem; margin: 0.5rem 0 0.8rem; }
/* `display: flex` de mai sus învinge atributul `hidden` (care e doar `display: none`
   din foaia browserului) — fără regula asta, rândurile de redebitare și de găuri de
   balama se vedeau chiar nebifate. Bug vechi, prins la verificarea vizuală 2026-07-17. */
.fo-inline-opts[hidden] { display: none; }
/* aceeași capcană pe etichetele-bifă: fără regula asta, „ascunderea" opțiunilor
   pe PFL/Blat (applyMaterialRules) nu se vedea — bug prins de Yosua 22.07 */
.fo-cb[hidden] { display: none; }
.fo-inline-opts .fo-field { margin: 0; min-width: 150px; flex: 1; }
.fo-inline-opts .fo-note-inline { flex-basis: 100%; margin: 0.2rem 0 0; }
.fo-tesit-sides { display: flex; gap: 0.2rem 1rem; flex-wrap: wrap; }
.fo-dim-pair { display: flex; align-items: center; gap: 0.5rem; }
.fo-dim-pair span { color: var(--rd-mute); }
.p-redeb-row { margin-top: 0.6rem; }

/* ---- avertismente „pe răspunderea ta": se semnează individual ---- */
.fo-warn-risc { border-left: 3px solid var(--fo-err); padding-left: 0.7rem; margin-bottom: 0.7rem; }
.fo-warn-risc ul { list-style: none; margin: 0.4rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.fo-warn-sign { align-items: flex-start; margin: 0; }
.fo-warn-sign input { margin-top: 0.2rem; flex-shrink: 0; }
.blocked-by-sign { opacity: 0.55; }
@keyframes fo-shake { 10%, 90% { transform: translateX(-1px); } 30%, 70% { transform: translateX(2px); } 50% { transform: translateX(-2px); } }
.shake { animation: fo-shake 0.5s; }
@media (prefers-reduced-motion: reduce) { .shake { animation: none; } }

/* ---- teșit: schița pe colțuri ---- */
.p-tesit-row { margin-top: 0.4rem; }
.fo-tesit-main { display: flex; gap: 1rem; flex-wrap: wrap; align-items: flex-start; background: var(--rd-paper); border: 1px solid var(--fo-line-soft); padding: 0.9rem; margin: 0.5rem 0 0.8rem; }
.fo-tesit-canvas { flex-shrink: 0; }
.fo-tesit-svg { display: block; width: 264px; height: 194px; }
.ts-shape { fill: #EDE7D9; stroke: var(--rd-ink); stroke-width: 2; stroke-linejoin: round; transition: none; }
/* fără L×l pe piesă nu există plan de cotat — schița stă „stinsă" până le dai */
.fo-tesit-svg.no-dims .ts-shape { opacity: 0.35; }
.fo-tesit-svg.no-dims .ts-corner { opacity: 0.4; }
/* cotele scrise pe plan, ca pe schița de hârtie a clientului */
.ts-dims text { font-family: var(--rd-mono); font-size: 9.5px; letter-spacing: 0.02em; fill: var(--rd-ink); pointer-events: none; }
.ts-corner { fill: #FFF; stroke: var(--rd-mute); stroke-width: 2; cursor: pointer; transition: fill 0.15s, stroke 0.15s, r 0.15s; }
.ts-corner:hover { fill: var(--accent-deep); stroke: var(--accent-deep); r: 11; }
.ts-corner.on { fill: var(--accent-deep); stroke: var(--rd-ink); }
.ts-corner:focus-visible { outline: 2px solid var(--rd-ink); outline-offset: 2px; }
/* FĂRĂ uppercase: „l1/l2" (laturile scurte) ar deveni „L1/L2" — fix notația laturilor lungi */
.fo-tesit-legend { display: flex; justify-content: space-between; gap: 0.5rem; margin-top: 0.3rem; font-family: var(--rd-mono); font-size: 0.62rem; letter-spacing: 0.04em; color: var(--rd-mute); }
.fo-tesit-list { flex: 1; min-width: 230px; display: flex; flex-direction: column; gap: 0.5rem; }
.fo-ts-card { border: 1px solid var(--accent-deep); background: #FDF4E7; padding: 0.55rem 0.7rem; }
.fo-ts-head { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; font-size: 0.85rem; }
.fo-ts-del { border: none; background: none; cursor: pointer; font-size: 1.1rem; line-height: 1; color: var(--rd-mute); padding: 0 0.2rem; }
.fo-ts-del:hover { color: var(--fo-err); }
.fo-ts-fields { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.4rem; }
.fo-ts-fields label { display: flex; align-items: center; gap: 0.25rem; font-size: 0.7rem; color: var(--rd-mute); font-family: var(--rd-mono); letter-spacing: 0.02em; }
.fo-ts-fields input { width: 4.4rem; padding: 0.32rem 0.4rem; font-size: 0.85rem; font-family: inherit; border: 1px solid var(--fo-line); background: var(--fo-card-bg); }
/* felul tăieturii: oblic (linie înclinată) / drept (dreptunghi scos — piesă în L) */
.fo-ts-type { display: flex; gap: 0.35rem; flex-wrap: wrap; margin-top: 0.45rem; }
.fo-ts-tbtn { position: relative; }
.fo-ts-tbtn input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.fo-ts-tbtn span { display: inline-block; border: 1px solid var(--fo-line); background: var(--fo-card-bg); color: var(--rd-ink); padding: 0.24rem 0.55rem; font-size: 0.72rem; cursor: pointer; user-select: none; }
.fo-ts-tbtn input:checked + span { background: var(--rd-ink); border-color: var(--rd-ink); color: #FFF; }
.fo-ts-tbtn input:focus-visible + span { outline: 2px solid var(--rd-ink); outline-offset: 2px; }
/* cote lipsă = card incomplet: obligatoriu de completat înainte de trimitere */
.fo-ts-card.incomplete { border-color: var(--fo-err); }
.fo-ts-fields input.invalid { border-color: var(--fo-err); background: #FDF0EC; }
.fo-ts-need { color: var(--fo-err); font-size: 0.72rem; margin: 0.35rem 0 0; }
.fo-ts-card:not(.incomplete) .fo-ts-need { display: none; }
.fo-tesit-err { color: var(--fo-err); font-size: 0.8rem; margin: 0.2rem 0 0.6rem; }
@media (max-width: 560px) {
  .fo-tesit-main { flex-direction: column; }
  .fo-tesit-canvas { align-self: center; }
}

/* ---- dublare cu fâșii: fâșiile propuse ---- */
.p-fasii-row { margin-top: 0.2rem; }
.fo-fasii-prop { border: 1px solid var(--accent-deep); background: #FDF4E7; padding: 0.8rem 0.9rem; margin: 0.5rem 0 0.2rem; }
.fo-fasii-title { font-family: var(--rd-mono); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--rd-mute); margin-bottom: 0.5rem; }
.fo-fasii-list { list-style: none; margin: 0 0 0.7rem; padding: 0; display: flex; flex-direction: column; gap: 0.3rem; }
.fo-fasii-list li { font-size: 0.88rem; color: var(--rd-ink); }
.fo-fasii-list small { color: var(--rd-mute); }
.fo-fasii-prop .fo-note-inline { margin: 0.6rem 0 0; }

/* ---- rezumat ---- */
.fo-summary { display: flex; flex-direction: column; gap: 1.1rem; margin-bottom: 1.3rem; }
.fo-sum-order { border: 1px solid var(--fo-line); background: var(--fo-card-bg); }
.fo-sum-head { display: flex; align-items: center; gap: 0.8rem; padding: 0.9rem 1.1rem; background: var(--rd-paper); border-bottom: 1px solid var(--fo-line); flex-wrap: wrap; }
.fo-sum-badge { background: var(--rd-ink); color: var(--rd-paper); font-family: var(--rd-mono); font-size: 0.66rem; font-weight: 700; padding: 0.3rem 0.65rem; letter-spacing: 0.1em; }
.fo-sum-swatch { width: 1.8rem; height: 1.8rem; background: var(--fo-soft-bg) center/cover; border: 1px solid var(--fo-line); flex-shrink: 0; }
.fo-sum-decor { font-weight: 600; color: var(--rd-ink); font-size: 0.92rem; }
.fo-sum-decor small { display: block; font-weight: 400; color: var(--rd-mute); font-size: 0.78rem; }
.fo-sum-acts { margin-left: auto; display: flex; gap: 0.45rem; }
.fo-sum-active { outline: 2px solid var(--accent-deep); outline-offset: -1px; }
.fo-sum-note { padding: 0.6rem 1.1rem; font-size: 0.82rem; color: var(--rd-mute); background: #FDF4E7; border-bottom: 1px solid var(--fo-line-soft); }
.fo-sum-body { padding: 0.5rem 1.1rem 0.9rem; }
.fo-sum-piece { padding: 0.6rem 0; border-bottom: 1px solid var(--fo-line-soft); font-size: 0.86rem; }
.fo-sum-piece:last-child { border-bottom: none; }
.fo-sum-piece-name { font-weight: 600; color: var(--rd-ink); }
.fo-sum-piece-detail { color: var(--rd-mute); margin-top: 0.2rem; line-height: 1.5; }
.fo-sum-empty { color: var(--rd-mute); font-size: 0.85rem; padding: 0.6rem 0; }

.fo-btn-secondary {
  display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.85rem 1.4rem;
  font-family: var(--rd-mono); font-size: 0.76rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--rd-ink); background: var(--rd-paper);
  border: 1px solid var(--fo-line); cursor: pointer; transition: border-color 0.18s, transform 0.15s;
  margin-bottom: 1.6rem;
}
.fo-btn-secondary:hover { border-color: var(--rd-ink); transform: translateY(-1px); }

/* ---- trimitere ---- */
.fo-honeypot { position: absolute; left: -9999px; }
.fo-actions { display: flex; gap: 0.8rem; margin-top: 1.1rem; flex-wrap: wrap; }
.fo-btn-csv {
  display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.95rem 1.4rem;
  font-family: var(--rd-mono); font-size: 0.76rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--rd-ink); background: var(--fo-card-bg);
  border: 1px solid var(--fo-line); cursor: pointer; transition: border-color 0.18s, color 0.18s;
}
.fo-btn-csv:hover { border-color: var(--rd-ink); }
.fo-btn-submit {
  flex: 1; min-width: 200px; padding: 1rem 1.5rem;
  font-family: var(--rd-mono); font-size: 0.82rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--rd-paper); background: var(--rd-ink); border: 1px solid var(--rd-ink); cursor: pointer;
  transition: background 0.18s, transform 0.15s;
}
.fo-btn-submit:hover:not(:disabled) { background: var(--accent-deep); border-color: var(--accent-deep); transform: translateY(-1px); }
.fo-btn-submit:disabled { opacity: 0.55; cursor: not-allowed; }
.fo-btn-submit .fo-btn-loading, .fo-btn-csv .fo-btn-loading { display: none; }
.fo-btn-submit.loading .fo-btn-text, .fo-btn-csv.loading .fo-btn-text { display: none; }
.fo-btn-submit.loading .fo-btn-loading, .fo-btn-csv.loading .fo-btn-loading { display: inline; }
.fo-btn-csv:disabled { opacity: 0.55; cursor: not-allowed; }
.fo-status { margin-top: 1rem; padding: 1rem 1.1rem; font-size: 0.9rem; line-height: 1.55; display: none; }
.fo-status a { color: inherit; text-decoration: underline; font-weight: 600; }
.fo-status.success { display: block; background: var(--fo-ok-bg); color: var(--fo-ok-ink); border: 1px solid #BFCFB6; }
.fo-status.error { display: block; background: #F7E4E2; color: #7A1D16; border: 1px solid #E3B7B2; }
.fo-btn-mailto { display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 0.6rem; padding: 0.7rem 1.3rem; background: var(--rd-ink); color: var(--rd-paper) !important; font-family: var(--rd-mono); font-size: 0.74rem; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none !important; }

/* ---- modal selector culori ---- */
/* z-index peste banner-ul de cookie (#otto-consent = 99999). */
.fo-modal { position: fixed; inset: 0; z-index: 100000; background: rgba(20, 17, 15, 0.6); display: flex; align-items: center; justify-content: center; padding: 1rem; }
.fo-modal[hidden] { display: none; }
.fo-modal-box { background: var(--rd-paper); width: 100%; max-width: 980px; max-height: 90vh; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--rd-ink); box-shadow: 0 24px 60px rgba(20, 17, 15, 0.35); }
.fo-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 1.1rem 1.3rem; border-bottom: 1px solid var(--fo-line); }
.fo-modal-head h3 { font-family: var(--grotesk); font-weight: 600; letter-spacing: -0.01em; font-size: 1.35rem; margin: 0; color: var(--rd-ink); }
.fo-modal-close { background: none; border: none; cursor: pointer; color: var(--rd-mute); padding: 0.3rem; line-height: 0; }
.fo-modal-close svg { width: 22px; height: 22px; }
.fo-modal-close:hover { color: var(--rd-ink); }
.fo-modal-tools { padding: 1rem 1.3rem 0.6rem; }
.fo-modal-tools input[type=search] { width: 100%; padding: 0.75rem 1rem; font-family: inherit; font-size: 0.95rem; border: 1px solid var(--fo-line); background: var(--fo-card-bg); border-radius: 0; }
.fo-modal-tools input[type=search]:focus { outline: none; border-color: var(--rd-ink); box-shadow: 0 0 0 3px rgba(255, 136, 0, 0.18); }
.fo-modal-suppliers { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-top: 0.7rem; }
.fo-sup-chip { padding: 0.42rem 0.9rem; font-family: var(--rd-mono); font-size: 0.68rem; letter-spacing: 0.05em; text-transform: uppercase; border: 1px solid var(--fo-line); background: var(--fo-card-bg); color: var(--rd-mute); cursor: pointer; transition: background 0.18s, color 0.18s, border-color 0.18s; }
.fo-sup-chip:hover { border-color: var(--rd-ink); color: var(--rd-ink); }
.fo-sup-chip.active { background: var(--rd-ink); color: var(--rd-paper); border-color: var(--rd-ink); }
.fo-modal-count { padding: 0.2rem 1.3rem; font-family: var(--rd-mono); font-size: 0.7rem; color: var(--rd-mute); }
/* grid-auto-rows: max-content + align-content: start — fără ele, flexul pe
   coloană al lui .fo-modal-box (max-height 88vh) STRIVEȘTE rândurile grilei ca să
   încapă în înălțimea vizibilă → carduri minuscule la „încarcă mai multe" */
.fo-modal-grid { padding: 0.6rem 1.3rem 1rem; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); grid-auto-rows: max-content; align-content: start; gap: 0.8rem; }
.fo-modal-loading { grid-column: 1 / -1; padding: 2.4rem 1rem; text-align: center; color: var(--rd-mute); font-size: 0.9rem; }
/* FĂRĂ content-visibility pe carduri: contain:layout împiedică grila să afle când
   se încarcă pozele lazy → rânduri calculate greșit (lecția din vechea pagină) */
.fo-color-card { display: flex; flex-direction: column; border: 1px solid var(--fo-line); overflow: hidden; cursor: pointer; background: var(--fo-card-bg); text-align: left; padding: 0; font-family: inherit; transition: transform 0.18s, border-color 0.18s; }
.fo-color-card:hover { transform: translateY(-2px); border-color: var(--rd-ink); }
/* CAPCANĂ (bug recurent „carduri minuscule"): FĂRĂ aspect-ratio+width:100% aici —
   la calculul intrinsec al rândului de grilă lățimea procentuală nu se rezolvă,
   poza contribuie cu 0 înălțime și rândul iese cât textul. Înălțime EXPLICITĂ în px. */
.fo-color-card img { width: 100%; height: 150px; object-fit: cover; background: var(--fo-soft-bg); }
.fo-color-card .cc-info { padding: 0.5rem 0.6rem; }
.fo-color-card .cc-name { font-size: 0.8rem; font-weight: 600; color: var(--rd-ink); line-height: 1.2; }
.fo-color-card .cc-code { font-family: var(--rd-mono); font-size: 0.68rem; color: var(--rd-mute); margin-top: 2px; }
.fo-modal-more { padding: 0 1.3rem 1.2rem; text-align: center; }
.fo-modal-more button { padding: 0.75rem 1.6rem; font-family: var(--rd-mono); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; border: 1px solid var(--fo-line); background: var(--fo-card-bg); color: var(--rd-ink); cursor: pointer; }
.fo-modal-more button:hover { border-color: var(--rd-ink); }

/* ---- statistici live (piese, m², ml cant) ---- */
.fo-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.8rem; margin-bottom: 1.3rem; }
.fo-stats[hidden] { display: none; }
.fo-stat { border: 1px solid var(--fo-line); background: var(--fo-card-bg); padding: 0.9rem 1rem; }
.fo-stat-k { font-family: var(--rd-mono); font-size: 0.64rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--rd-mute); margin-bottom: 0.4rem; }
.fo-stat-v { font-family: var(--grotesk); font-weight: 600; font-size: 1.5rem; letter-spacing: -0.02em; color: var(--rd-ink); line-height: 1.1; }
.fo-stat-v small { font-size: 0.8rem; font-weight: 400; color: var(--rd-mute); }
.fo-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.fo-chip { font-family: var(--rd-mono); font-size: 0.68rem; border: 1px solid var(--fo-line); background: var(--rd-paper); color: var(--rd-ink); padding: 0.25rem 0.5rem; }
.fo-chip-mute { font-size: 0.8rem; color: var(--rd-mute); }
@media (max-width: 720px) { .fo-stats { grid-template-columns: repeat(2, 1fr); } }

/* ---- sugestii blânde ---- */
.fo-warnbox { display: none; border: 1px solid #E3CDA0; border-left: 3px solid var(--accent); background: #FBF3E2; color: #6B5220; padding: 0.9rem 1.1rem; font-size: 0.87rem; line-height: 1.55; margin-bottom: 1.3rem; }
.fo-warnbox.show { display: block; }
.fo-warnbox ul { margin: 0.4rem 0 0 1.1rem; padding: 0; }
.fo-warnbox li { margin: 0.25rem 0; }

/* ---- modele gata făcute ---- */
.fo-presets { margin-top: 1.2rem; border: 1px dashed var(--fo-line); padding: 1.2rem 1.3rem; background: var(--rd-paper); }
.fo-presets-title { font-family: var(--grotesk); font-weight: 600; font-size: 0.98rem; color: var(--rd-ink); margin: 0; }
.fo-presets-sub { font-size: 0.84rem; color: var(--rd-mute); margin: 0.25rem 0 0; }
.fo-presets-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.8rem; margin-top: 0.95rem; }
.fo-preset { text-align: left; padding: 0.9rem 1rem; border: 1px solid var(--fo-line); background: var(--fo-card-bg); cursor: pointer; font-family: inherit; transition: border-color 0.18s, transform 0.18s; }
.fo-preset:hover { border-color: var(--rd-ink); transform: translateY(-2px); }
.fo-preset b { display: block; font-family: var(--grotesk); font-weight: 600; font-size: 0.92rem; color: var(--rd-ink); margin-bottom: 0.25rem; }
.fo-preset span { font-size: 0.8rem; color: var(--rd-mute); line-height: 1.45; }
@media (max-width: 720px) { .fo-presets-grid { grid-template-columns: 1fr; } }

/* ---- planul de debitare (pd-*) ---- */
.pd-section { margin-bottom: 1.6rem; }
.pd-sub { font-size: 0.88rem; color: var(--rd-mute); line-height: 1.55; margin: -0.6rem 0 1.1rem; }
#fo-plan-list { display: flex; flex-direction: column; gap: 1.1rem; }
.pd-fisa { border: 1px solid var(--fo-line); background: var(--fo-card-bg); overflow: hidden; }
.pd-fisa-head { display: flex; align-items: center; gap: 0.8rem; padding: 0.85rem 1.1rem; background: var(--rd-paper); border-bottom: 1px solid var(--fo-line); flex-wrap: wrap; }
.pd-fisa-title { font-weight: 600; font-size: 0.9rem; color: var(--rd-ink); flex: 1; min-width: 150px; }
.pd-gen {
  padding: 0.6rem 1.1rem; font-family: var(--rd-mono); font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--rd-ink); background: var(--fo-card-bg);
  border: 1px solid var(--rd-ink); cursor: pointer; transition: background 0.18s, color 0.18s, transform 0.15s;
}
.pd-gen:hover { background: var(--rd-ink); color: var(--rd-paper); transform: translateY(-1px); }
.pd-gen:active { transform: translateY(0) scale(0.98); }
.pd-gen:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pd-body { padding: 1rem 1.1rem 1.2rem; }
.pd-hint { font-size: 0.86rem; color: var(--rd-mute); line-height: 1.5; }
.pd-note { font-size: 0.88rem; color: var(--rd-mute); background: var(--rd-paper); border: 1px solid var(--fo-line-soft); border-left: 3px solid var(--accent); padding: 0.7rem 0.9rem; line-height: 1.5; }
.pd-note-warn { background: #F7E9E7; border-left-color: var(--fo-err); color: #6E2B25; }
.pd-note-half { background: #FDF4E7; border-left-color: var(--accent); color: var(--rd-ink); }
.pd-note-half strong { color: var(--accent-deep); }
/* lista calculatorului de blaturi (o linie per blat, cu lungimile tăiate din el) */
.pd-blat-list { list-style: none; margin: 0.8rem 0 0; padding: 0; display: grid; gap: 0.45rem; }
.pd-blat-list li { border: 1px solid var(--fo-line); background: var(--fo-card-bg); padding: 0.55rem 0.8rem; font-size: 0.88rem; color: var(--rd-ink); }
.pd-blat-list li small { color: var(--rd-mute); }
.pd-stats { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.4rem; }
.pd-chip { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.35rem 0.8rem; font-family: var(--rd-mono); font-size: 0.72rem; color: var(--rd-mute); background: var(--rd-paper); border: 1px solid var(--fo-line); }
.pd-chip strong { color: var(--rd-ink); }
.pd-chip-half { background: #FDF4E7; border-color: var(--accent); color: var(--accent-deep); font-weight: 700; }
.pd-sheet { margin-top: 1rem; }
.pd-sheet-cap { font-family: var(--rd-mono); font-size: 0.72rem; letter-spacing: 0.04em; color: var(--rd-mute); margin-bottom: 0.4rem; }
.pd-sheet-box { position: relative; }
.pd-sheet-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--fo-line); background: var(--fo-card-bg); padding: 0.6rem; }
.pd-sheet-wrap svg { display: block; min-width: 540px; width: 100%; height: auto; }
.pd-scroll-hint { display: none; }
@media (max-width: 640px) {
  .pd-sheet-wrap::after {
    content: ""; position: absolute; top: 1px; right: 1px; bottom: 1px; width: 34px;
    pointer-events: none;
    background: linear-gradient(to left, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0));
  }
  .pd-scroll-hint { display: block; font-size: 0.78rem; color: var(--rd-mute); margin: 0.4rem 0 0; }
}
/* elementele desenate de renderSheetSVG */
.pd-board { fill: #FBFAF6; stroke: #C9C2B4; stroke-width: 1; }
.pd-trim { fill: #F1EEE8; stroke: none; }
.pd-piece { fill: #FDF4E7; stroke: #E67500; stroke-width: 1; }
.pd-piece-label { font-family: 'Space Mono', ui-monospace, monospace; fill: #4A4438; }
.pd-offcut { fill: url(#pd-hatch) #ECE9E2; stroke: #D6D0C4; stroke-width: 1; }
.pd-offcut-useful { fill: #FFE9CF; stroke: #FF8800; stroke-width: 1.5; }
.pd-legend { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 0.7rem; font-size: 0.78rem; color: var(--rd-mute); }
.pd-lg { display: inline-flex; align-items: center; gap: 0.35rem; }
.pd-lg i { width: 0.85rem; height: 0.85rem; display: inline-block; border: 1px solid var(--fo-line); }
.pd-lg-piece i { background: #FDF4E7; border-color: #E67500; }
.pd-lg-useful i { background: #FFE9CF; border-color: #FF8800; }
.pd-lg-waste i { background: #ECE9E2; border-color: #D6D0C4; }
.pd-offcuts { margin-top: 1rem; font-size: 0.86rem; }
.pd-offcuts-title { font-weight: 600; color: var(--rd-ink); }
.pd-offcuts-list { list-style: none; display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 0.5rem; padding: 0; }
.pd-offcuts-list li { background: var(--rd-paper); border: 1px solid var(--fo-line); color: var(--rd-ink); padding: 0.3rem 0.8rem; font-family: var(--rd-mono); font-size: 0.72rem; }
.pd-offcuts-list li small { color: var(--rd-mute); }
.pd-disclaimer { font-size: 0.8rem; color: var(--rd-mute); margin-top: 1rem; line-height: 1.5; border-top: 1px dashed var(--fo-line); padding-top: 0.7rem; }
@media (max-width: 560px) {
  .pd-fisa-head { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
  .pd-gen { width: 100%; min-height: 44px; }
}

/* ---- pagina unică: mod „Tabel rapid" ---- */
.fo-mode-row { display: flex; align-items: center; gap: 0.8rem; margin: 1.3rem 0 0; flex-wrap: wrap; }
.fo-mode-hint { font-family: var(--rd-mono); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--rd-mute); }
.fo-mode-toggle { display: flex; border: 1px solid var(--fo-line); }
.fo-mode-btn { padding: 0.55rem 1.2rem; font-family: var(--rd-mono); font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; border: none; background: var(--fo-card-bg); color: var(--rd-mute); cursor: pointer; transition: background 0.18s, color 0.18s; }
.fo-mode-btn + .fo-mode-btn { border-left: 1px solid var(--fo-line); }
.fo-mode-btn.active { background: var(--rd-ink); color: var(--rd-paper); }
.fo-savestate { font-family: var(--rd-mono); font-size: 0.66rem; letter-spacing: 0.02em; color: var(--rd-mute); }
.fo-savestate[hidden] { display: none; }

#fo-table-wrap { margin-top: 1.2rem; }
#fo-table-wrap[hidden] { display: none; }
.fo-qt-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--fo-line); background: var(--fo-card-bg); }
table.fo-qt { border-collapse: collapse; width: 100%; min-width: 880px; font-size: 0.85rem; }
/* FĂRĂ uppercase pe anteturi — „Cant l1/l2" trebuie să rămână diferit de „Cant L1/L2" */
.fo-qt th { text-align: left; font-family: var(--rd-mono); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.04em; color: var(--rd-mute); padding: 0.55rem 0.5rem; border-bottom: 1px solid var(--fo-line); background: var(--rd-paper); white-space: nowrap; }
.fo-qt td { border-bottom: 1px solid var(--fo-line-soft); padding: 0.12rem 0.2rem; }
.fo-qt tr:last-child td { border-bottom: none; }
.fo-qt td.qt-poz { padding: 0.12rem 0.6rem; font-family: var(--rd-mono); font-weight: 700; color: var(--accent-deep); white-space: nowrap; }
/* coloana Poz e STICKY la scroll orizontal */
.fo-qt th:first-child, .fo-qt td.qt-poz { position: sticky; left: 0; z-index: 2; background: var(--fo-card-bg); }
.fo-qt th:first-child { z-index: 3; background: var(--rd-paper); }
.fo-qt td.qt-poz { box-shadow: 1px 0 0 var(--fo-line); }
.fo-qt input, .fo-qt select { width: 100%; border: 1px solid transparent; background: transparent; padding: 0.45rem 0.4rem; font-family: inherit; font-size: 0.85rem; color: var(--rd-ink); transition: border-color 0.15s, background 0.15s; }
.fo-qt input:hover, .fo-qt select:hover { border-color: var(--fo-line); }
.fo-qt input:focus, .fo-qt select:focus { outline: none; border-color: var(--rd-ink); background: var(--fo-card-bg); box-shadow: 0 0 0 2px rgba(255, 136, 0, 0.16); }
.fo-qt input.invalid { border-color: var(--fo-err); background: #F7E9E7; }
.fo-qt .qt-name { min-width: 108px; }
.fo-qt .qt-qty { width: 52px; }
.fo-qt .qt-len, .fo-qt .qt-wid { width: 78px; }
.fo-qt select.qt-e { min-width: 76px; padding-left: 0.25rem; padding-right: 0.15rem; }
.fo-qt select.qt-fiber { min-width: 106px; padding-left: 0.25rem; padding-right: 0.15rem; }
/* bara de deasupra tabelului: fibra pentru toată fișa */
.fo-qt-toolbar { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 0.6rem; }
.fo-qt-toolbar label { font-family: var(--rd-mono); font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--rd-mute); }
.fo-qt-toolbar select { padding: 0.5rem 0.7rem; font-family: inherit; font-size: 0.88rem; border: 1px solid var(--fo-line); background: var(--fo-card-bg); color: var(--rd-ink); border-radius: 0; }
.fo-qt-toolbar select:focus { outline: none; border-color: var(--rd-ink); box-shadow: 0 0 0 2px rgba(255, 136, 0, 0.16); }
.fo-qt .qt-obs { min-width: 120px; }
.fo-qt-del { background: none; border: none; cursor: pointer; color: var(--rd-mute); padding: 0.45rem; line-height: 0; transition: color 0.15s; }
.fo-qt-del:hover { color: var(--fo-err); }
.fo-qt-del:active { transform: scale(0.94); }
.fo-qt-del:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.fo-qt-del svg { width: 15px; height: 15px; }
.fo-qt-foot { display: flex; gap: 0.9rem; align-items: center; padding: 0.7rem 0.2rem 0; flex-wrap: wrap; }
.fo-qt-hint { font-size: 0.76rem; color: var(--rd-mute); line-height: 1.5; }
@media (max-width: 640px) { .fo-mode-row, #fo-table-wrap { display: none !important; } }

/* ---- modalul de import din Excel (lipire) ---- */
.fo-pm-box { max-width: 860px; }
.fo-pm-body { padding: 0.8rem 1.3rem; overflow: auto; }
.fo-pm-note { font-size: 0.85rem; color: var(--rd-mute); margin-bottom: 0.7rem; line-height: 1.5; }
.fo-pm-scroll { overflow-x: auto; border: 1px solid var(--fo-line); }
table.fo-pm-table { border-collapse: collapse; width: 100%; font-size: 0.82rem; }
.fo-pm-table th { padding: 0.4rem 0.5rem; background: var(--rd-paper); border-bottom: 1px solid var(--fo-line); }
.fo-pm-table th select { width: 100%; min-width: 106px; padding: 0.4rem; font-family: inherit; font-size: 0.8rem; border: 1px solid var(--fo-line); background: var(--fo-card-bg); }
.fo-pm-table th select:focus { outline: none; border-color: var(--rd-ink); }
.fo-pm-table td { padding: 0.35rem 0.55rem; border-bottom: 1px solid var(--fo-line-soft); white-space: nowrap; max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.fo-pm-table tr.pm-bad td { background: #F7E9E7; color: #6E2B25; }
.fo-pm-table td.pm-flag { font-family: var(--rd-mono); font-size: 0.66rem; font-weight: 700; }
.fo-pm-actions { display: flex; gap: 0.7rem; align-items: center; justify-content: flex-end; padding: 0.9rem 1.3rem; border-top: 1px solid var(--fo-line); flex-wrap: wrap; }
.fo-pm-actions .fo-btn-csv, .fo-pm-actions .fo-btn-add { margin: 0; }
.fo-pm-count { margin-right: auto; font-family: var(--rd-mono); font-size: 0.72rem; color: var(--rd-mute); }

/* ---- panoul cu detaliile piesei (desktop: lateral; mobil: bottom-sheet) ---- */
.fo-pdetail { position: fixed; z-index: 100050; background: var(--fo-card-bg); border: 1px solid var(--rd-ink); box-shadow: 0 24px 60px rgba(20, 17, 15, 0.3); opacity: 0; pointer-events: none; transition: opacity 0.25s, transform 0.25s; }
@media (min-width: 641px) {
  .fo-pdetail { top: 50%; right: 1.2rem; width: min(360px, calc(100vw - 2.4rem)); max-height: min(78vh, 620px); overflow-y: auto; transform: translateY(-50%) translateX(18px); }
  .fo-pdetail.open { opacity: 1; pointer-events: auto; transform: translateY(-50%) translateX(0); }
}
@media (max-width: 640px) {
  .fo-pdetail { left: 0; right: 0; bottom: 0; max-height: 72vh; overflow-y: auto; transform: translateY(102%); padding-bottom: env(safe-area-inset-bottom); }
  .fo-pdetail.open { opacity: 1; pointer-events: auto; transform: translateY(0); }
}
.fo-pdetail-head { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; padding: 0.9rem 1.1rem; border-bottom: 1px solid var(--fo-line); position: sticky; top: 0; background: var(--fo-card-bg); z-index: 1; }
.fo-pdetail-title { font-family: var(--grotesk); font-weight: 600; font-size: 1rem; color: var(--rd-ink); }
.fo-pdetail-body { padding: 0.7rem 1.1rem 1.1rem; font-size: 0.88rem; }
.fo-pdetail-row { display: flex; justify-content: space-between; gap: 1rem; padding: 0.42rem 0; border-bottom: 1px dashed var(--fo-line-soft); }
.fo-pdetail-row span { color: var(--rd-mute); }
.fo-pdetail-row strong { color: var(--rd-ink); text-align: right; font-weight: 600; }
.fo-pdetail-go { margin-top: 1rem; width: 100%; justify-content: center; }
.fo-row-hl { box-shadow: inset 0 0 0 2px var(--accent-deep) !important; background: #FDF4E7 !important; }
.pd-sel { outline: 2px solid var(--accent-deep); }
/* cu panoul deschis pe desktop, planul primește loc în dreapta (nimic acoperit) */
@media (min-width: 1100px) {
  #fo-plan { transition: padding-right 0.25s ease; }
  body.fo-pdetail-open #fo-plan { padding-right: max(1.6rem, calc(390px - (100vw - 1020px) / 2)); }
}

/* ---- descărcările planului ---- */
.pd-downloads { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-top: 1rem; }
.pd-dl-title { font-family: var(--rd-mono); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--rd-ink); }
.pd-dl { padding: 0.5rem 0.95rem; font-family: var(--rd-mono); font-size: 0.68rem; letter-spacing: 0.04em; text-transform: uppercase; border: 1px solid var(--fo-line); background: var(--fo-card-bg); color: var(--rd-ink); cursor: pointer; transition: border-color 0.15s; }
.pd-dl:hover { border-color: var(--rd-ink); }
.pd-dl-hint { flex-basis: 100%; font-size: 0.76rem; color: var(--rd-mute); margin: 0.2rem 0 0; line-height: 1.5; }

/* ---- MOBIL ≤640px: quick-add, listă compactă, bară sticky ---- */
.fo-quick { display: none; }
.fo-mob-list { display: none; }
.fo-mobbar { display: none; }
@media (max-width: 640px) {
  .fo-quick { display: block; margin-top: 1.2rem; border: 1px solid var(--fo-line); border-left: 3px solid var(--accent); background: var(--rd-paper); padding: 1.1rem 1rem 1.2rem; }
  .fo-quick h4 { font-family: var(--grotesk); font-size: 1rem; font-weight: 600; color: var(--rd-ink); margin: 0 0 0.7rem; }
  .fo-quick-grid { display: grid; grid-template-columns: 1fr 1fr 0.7fr; gap: 0.55rem; }
  .fo-quick-grid label { display: block; font-family: var(--rd-mono); font-size: 0.62rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--rd-mute); }
  .fo-quick-grid input { width: 100%; margin-top: 0.3rem; font-size: 16px; font-family: inherit; padding: 0.85rem 0.6rem; border: 1px solid var(--fo-line); background: var(--fo-card-bg); }
  .fo-quick-grid input:focus { outline: none; border-color: var(--rd-ink); box-shadow: 0 0 0 3px rgba(255, 136, 0, 0.16); }
  .fo-qk-hint { font-size: 0.78rem; color: var(--rd-mute); margin: 0.9rem 0 0.4rem; text-align: center; }
  .fo-qk-sketch { position: relative; width: 160px; height: 110px; margin: 0 auto; }
  .fo-qk-face { position: absolute; inset: 12px; background: var(--fo-card-bg); border: 1px dashed var(--fo-line); display: flex; align-items: center; justify-content: center; font-family: var(--rd-mono); font-size: 0.7rem; color: var(--rd-mute); }
  .fo-qk-edge { position: absolute; background: #D8D2C4; border: none; cursor: pointer; padding: 0; transition: background 0.15s; }
  .fo-qk-edge.on { background: var(--accent-deep); }
  .fo-qk-edge:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  .fo-qk-top { top: 0; left: 12px; right: 12px; height: 9px; }
  .fo-qk-bottom { bottom: 0; left: 12px; right: 12px; height: 9px; }
  .fo-qk-left { left: 0; top: 12px; bottom: 12px; width: 9px; }
  .fo-qk-right { right: 0; top: 12px; bottom: 12px; width: 9px; }
  .fo-qk-add { width: 100%; justify-content: center; margin-top: 0.9rem; min-height: 48px; }

  /* cardurile mari stau ascunse — editezi prin lista compactă (tap pe piesă) */
  #fo-pieces .fo-piece { display: none; }
  #fo-pieces .fo-piece.fo-open { display: block; }
  .fo-mob-list { display: flex; flex-direction: column; gap: 0.45rem; margin-top: 1rem; }
  .fo-mob-item { display: flex; align-items: center; gap: 0.7rem; padding: 0.75rem 0.8rem; background: var(--fo-card-bg); border: 1px solid var(--fo-line); font-family: inherit; font-size: 0.85rem; cursor: pointer; width: 100%; text-align: left; transition: border-color 0.15s; }
  .fo-mob-item.mi-open { border-color: var(--accent-deep); }
  .fo-mob-item .mi-poz { font-family: var(--rd-mono); font-weight: 700; color: var(--accent-deep); flex-shrink: 0; }
  .fo-mob-item .mi-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.1rem; }
  .fo-mob-item .mi-dims { font-weight: 600; color: var(--rd-ink); }
  .fo-mob-item .mi-sub { font-size: 0.76rem; color: var(--rd-mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .fo-mob-item svg { flex-shrink: 0; color: var(--rd-mute); }
  .fo-mob-empty { font-size: 0.82rem; color: var(--rd-mute); text-align: center; padding: 0.6rem; }

  body.co-builder .fo-mobbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 86; display: flex; gap: 0.5rem; padding: 0.55rem 0.8rem calc(0.55rem + env(safe-area-inset-bottom)); background: var(--fo-card-bg); border-top: 1px solid var(--fo-line); box-shadow: 0 -6px 20px -13px rgba(20, 17, 15, 0.55); }
  .fo-mobbar button { flex: 1; min-height: 2.9rem; font-family: var(--rd-mono); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; border: 1px solid var(--fo-line); background: var(--fo-card-bg); color: var(--rd-ink); cursor: pointer; transition: border-color 0.15s; }
  .fo-mobbar button:active { transform: scale(0.98); }
  .fo-mobbar button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  .fo-mobbar .fo-mb-send { background: var(--rd-ink); border-color: var(--rd-ink); color: var(--rd-paper); }
  body.menu-open .fo-mobbar { display: none !important; }
  body.co-builder .fo-app { padding-bottom: 6.5rem; }
}

/* ---- ghid + glosar ---- */
.fo-guide { border-top: 1px solid var(--fo-line); background: var(--rd-paper); margin-top: 2rem; }
.fo-guide-inner { max-width: 1020px; margin: 0 auto; padding: 3.2rem 1.5rem 3.6rem; }
.fo-guide-title { font-family: var(--grotesk); font-weight: 600; letter-spacing: -0.02em; font-size: clamp(1.5rem, 3.4vw, 2rem); color: var(--rd-ink); margin: 0 0 1.4rem; }
.fo-guide-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.fo-guide-card { border: 1px solid var(--fo-line); background: var(--fo-card-bg); padding: 1.3rem 1.4rem; }
.fo-guide-card h4 { font-family: var(--grotesk); font-weight: 600; font-size: 1rem; letter-spacing: -0.01em; color: var(--rd-ink); margin: 0 0 0.55rem; }
.fo-guide-card p { font-size: 0.88rem; color: var(--rd-mute); line-height: 1.6; margin: 0 0 0.5rem; }
.fo-guide-card ul { margin: 0.3rem 0 0.4rem 1.1rem; padding: 0; font-size: 0.86rem; color: var(--rd-mute); line-height: 1.6; }
.fo-guide-card li { margin: 0.3rem 0; }
.fo-guide-card strong { color: var(--rd-ink); }
.fo-guide-svg { margin-top: 0.9rem; background: var(--fo-card-bg); border: 1px solid var(--fo-line-soft); padding: 0.6rem; max-width: 340px; }
.fo-guide-svg svg { display: block; width: 100%; height: auto; }
.fo-gloss { margin-top: 1.4rem; border: 1px solid var(--fo-line); background: var(--fo-card-bg); }
.fo-gloss summary { list-style: none; cursor: pointer; padding: 1rem 1.3rem; font-family: var(--rd-mono); font-size: 0.76rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--rd-ink); user-select: none; }
.fo-gloss summary::-webkit-details-marker { display: none; }
.fo-gloss summary::before { content: "+"; display: inline-block; width: 1.2rem; color: var(--accent-deep); }
.fo-gloss[open] summary::before { content: "–"; }
.fo-gloss dl { margin: 0; padding: 0 1.3rem 1.2rem; display: grid; grid-template-columns: max-content 1fr; gap: 0.5rem 1.2rem; }
.fo-gloss dt { font-family: var(--rd-mono); font-size: 0.76rem; font-weight: 700; letter-spacing: 0.04em; color: var(--rd-ink); padding-top: 0.1rem; }
.fo-gloss dd { margin: 0; font-size: 0.87rem; color: var(--rd-mute); line-height: 1.55; }
@media (max-width: 720px) { .fo-guide-grid { grid-template-columns: 1fr; } .fo-gloss dl { grid-template-columns: 1fr; gap: 0.15rem; } .fo-gloss dd { margin-bottom: 0.6rem; } }

/* ---- responsive ---- */
@media (max-width: 720px) {
  .fo-piece-grid { grid-template-columns: 1fr 1fr; }
  .fo-piece-grid .fo-f-name { grid-column: 1 / -1; }
  .fo-start { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .fo-grid-2 { grid-template-columns: 1fr; gap: 0; }
  .fo-grid-2 .fo-field { margin-bottom: 1.1rem; }
  /* grila piesei (Nume / Buc / L / l) — pe telefon o punem pe 1 coloană ca să nu se înghesuie */
  .fo-piece-grid { grid-template-columns: 1fr; }
  .fo-piece-grid .fo-f-name { grid-column: auto; }
  .fo-cant-main { flex-direction: column; }
  .fo-diagram { margin: 0 auto; width: 100%; max-width: 196px; }
  .fo-edge-row { grid-template-columns: 1fr; }
  .fo-edge-ctl { justify-content: flex-start; }
  .fo-actions { flex-direction: column; }
  .fo-btn-csv, .fo-btn-submit { width: 100%; justify-content: center; }
  .fo-inline-opts { flex-direction: column; align-items: stretch; }
  /* ținte de atingere mai generoase + chip-uri aliniate */
  .fo-mini, .fo-del, .fo-edge-color { min-height: 40px; }
  .fo-piece-acts { gap: 0.6rem; }
  .fo-sup-chip { min-height: 38px; display: inline-flex; align-items: center; }
  .fo-modal-close { padding: 0.55rem; }
  .ec-label { max-width: none; }
  .fo-mat-types { width: 100%; }
  .fo-mat-type { flex: 1; min-width: 0; }
}

/* Telefoane mici (iPhone SE / Android vechi): fără min-width-uri care forțează
   scroll orizontal; permitem wrap pe textele `nowrap`. */
@media (max-width: 560px) {
  .fo-modal-grid { grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 0.6rem; }
  .fo-color-card img { height: 124px; }
}
@media (max-width: 380px) {
  .fo-mat-type { min-width: 0; }
  .fo-edge-rows { min-width: 0; }
  .fo-edge-color { white-space: normal; }
  .fo-modal-grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
  .fo-color-card img { height: 110px; }
}

@media (prefers-reduced-motion: reduce) {
  .fo-btn-add, .fo-btn-submit, .fo-btn-secondary, .fo-color-card, .fo-edge, .fo-edge-row, .fo-start-action { transition: none !important; }
  .fo-btn-add:hover, .fo-btn-submit:hover, .fo-btn-secondary:hover, .fo-color-card:hover, .fo-start-action:hover { transform: none !important; }
}