:root {
  --pico-font-size: 100%;
  --navy: #1f3a5f;
  --teal: #0f6e7a;
  --ok: #1a7f37;
  --bad: #c62828;
  --warn: #b26a00;
  --bg-soft: #f3f5f8;
  --pico-primary: var(--navy);
  --pico-primary-hover: #16304f;
  --pico-primary-background: var(--navy);
  --pico-primary-hover-background: #16304f;
  --pico-border-radius: 10px;
}
html { scroll-padding-top: 60px; }
body { padding-bottom: 76px; background: var(--bg-soft); }
main.container { padding-top: 1rem; max-width: 1100px; }

/* bara de sus */
.topbar { position: sticky; top: 0; z-index: 50; background: var(--navy); color: #fff; display: flex; align-items: center; gap: 1rem; padding: .55rem 1rem; }
.topbar .brand { color: #fff; font-weight: 700; text-decoration: none; font-size: 1.05rem; white-space: nowrap; }
.topbar .brand span { font-weight: 400; opacity: .85; }
.topnav { display: none; gap: .25rem; margin-left: auto; }
.topnav a { color: #fff; text-decoration: none; padding: .35rem .6rem; border-radius: 8px; opacity: .9; }
.topnav a:hover { background: rgba(255,255,255,.12); }
.userbox { margin: 0; margin-left: auto; display: flex; gap: .5rem; align-items: center; font-size: .9rem; }
.topnav + .userbox { margin-left: 0; }
.userbox button.link { background: none; border: 0; color: #fff; padding: 0; width: auto; margin: 0; text-decoration: underline; font-size: .9rem; }
@media (min-width: 900px) { .topnav { display: flex; } .bottomnav { display: none !important; } body { padding-bottom: 2rem; } }

/* bara de jos (mobil) */
.bottomnav { position: fixed; bottom: 0; left: 0; right: 0; z-index: 50; display: flex; background: #fff; border-top: 1px solid #d9dee6; padding-bottom: env(safe-area-inset-bottom); }
.bottomnav a { flex: 1; text-align: center; padding: .45rem 0 .4rem; font-size: .72rem; color: #445; text-decoration: none; line-height: 1.1; }
.bottomnav a .ico { display: block; font-size: 1.3rem; line-height: 1.2; }
.bottomnav a.on { color: var(--navy); font-weight: 700; }

/* mesaje */
.msg { padding: .6rem .9rem; border-radius: 10px; margin-bottom: .8rem; background: #e8f0fb; border-left: 4px solid var(--navy); }
.msg-success { background: #e6f4ea; border-left-color: var(--ok); }
.msg-error { background: #fdecea; border-left-color: var(--bad); }

/* carduri și liste */
.card { background: #fff; border-radius: 12px; padding: .9rem 1rem; margin-bottom: .8rem; box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.card h2, .card h3 { margin-bottom: .5rem; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; }
@media (max-width: 600px) { .grid3 { grid-template-columns: 1fr 1fr; } }
.kpi { background: #fff; border-radius: 12px; padding: .8rem 1rem; box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.kpi .v { font-size: 1.8rem; font-weight: 700; color: var(--navy); line-height: 1.1; }
.kpi .l { font-size: .8rem; color: #556; }
.kpi.bad .v { color: var(--bad); } .kpi.ok .v { color: var(--ok); } .kpi.warn .v { color: var(--warn); }

/* butoane mari */
.btn-big { display: block; width: 100%; text-align: center; padding: .95rem 1rem; font-size: 1.1rem; font-weight: 700; border-radius: 12px; margin-bottom: .6rem; }
a.btn-big { text-decoration: none; }
.btn-ok { background: var(--ok); border-color: var(--ok); color: #fff; }
.btn-bad { background: var(--bad); border-color: var(--bad); color: #fff; }
.btn-ghost { background: #fff; color: var(--navy); border: 2px solid var(--navy); }
button.small, .small { padding: .35rem .7rem; font-size: .85rem; width: auto; }
.inline { display: inline; width: auto; margin: 0; }
.row { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.right { margin-left: auto; }
.muted { color: #667; font-size: .88rem; }
.tag { display: inline-block; padding: .12rem .5rem; border-radius: 999px; font-size: .76rem; font-weight: 600; background: #e9edf3; color: #334; }
.tag.ok { background: #e6f4ea; color: var(--ok); } .tag.bad { background: #fdecea; color: var(--bad); } .tag.warn { background: #fff3e0; color: var(--warn); }
.tag.navy { background: #e8f0fb; color: var(--navy); }

/* liste de utilaje */
.ulist { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .5rem; }
.ulist a { display: block; background: #fff; border: 1px solid #d9dee6; border-radius: 10px; padding: .6rem .7rem; text-decoration: none; color: #223; }
.ulist a b { display: block; font-size: 1rem; }
.ulist a small { color: #667; }
.ulist a.done { border-color: #bfe3c8; background: #f2faf4; }
.ulist a.late { border-color: #f3c1bd; background: #fff5f4; }

/* rezultatul PASS/FAIL ca butoane */
.seg { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: .5rem; }
.seg label { margin: 0; }
.seg input[type=radio] { position: absolute; opacity: 0; width: 0; height: 0; }
.seg span { display: block; text-align: center; padding: .9rem .4rem; border: 2px solid #cfd6e0; border-radius: 12px; font-weight: 700; font-size: 1.05rem; background: #fff; }
.seg input:checked + span.ok { background: var(--ok); border-color: var(--ok); color: #fff; }
.seg input:checked + span.bad { background: var(--bad); border-color: var(--bad); color: #fff; }
.seg input:checked + span.obs { background: var(--warn); border-color: var(--warn); color: #fff; }
.chips label { display: inline-flex; align-items: center; gap: .3rem; margin: 0 .4rem .4rem 0; padding: .35rem .7rem; border: 1.5px solid #cfd6e0; border-radius: 999px; background: #fff; font-size: .9rem; }
.chips label:has(input:checked) { background: #e8f0fb; border-color: var(--navy); font-weight: 600; }
.chips input { margin: 0; }

/* căutare produse */
.pick { position: relative; }
.pick .res { position: absolute; left: 0; right: 0; top: 100%; z-index: 20; background: #fff; border: 1px solid #cfd6e0; border-radius: 10px; box-shadow: 0 6px 18px rgba(0,0,0,.12); max-height: 300px; overflow: auto; }
.pick .res a, .pick .res button { display: block; width: 100%; text-align: left; padding: .55rem .8rem; border: 0; border-bottom: 1px solid #eef1f5; background: #fff; color: #223; text-decoration: none; font-size: .95rem; margin: 0; border-radius: 0; }
.pick .res a:hover, .pick .res button:hover { background: #f3f5f8; }
.pick .res small { color: #667; }
.ales { background: #e6f4ea; border: 1px solid #bfe3c8; border-radius: 10px; padding: .5rem .8rem; margin-bottom: .6rem; display: flex; justify-content: space-between; align-items: center; }

/* tabele */
table.compact { font-size: .9rem; }
table.compact td, table.compact th { padding: .4rem .5rem; }
.scroll { overflow-x: auto; }
.photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: .5rem; }
.photos figure { margin: 0; position: relative; }
.photos img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; }
.photos form { position: absolute; top: 4px; right: 4px; margin: 0; }
.photos form button { padding: .1rem .45rem; font-size: .8rem; width: auto; margin: 0; background: rgba(0,0,0,.55); border: 0; color: #fff; }
.numar { font-family: ui-monospace, monospace; font-weight: 700; }
fieldset { margin-bottom: .6rem; }
label { font-weight: 600; font-size: .92rem; }
input, select, textarea { font-size: 1rem; }
.extr-grid td input { margin: 0; padding: .3rem .4rem; font-size: .9rem; width: 5.2rem; }
.cam { display: block; width: 100%; text-align: center; padding: .8rem; border: 2px dashed #9fb0c6; border-radius: 12px; background: #fff; color: var(--navy); font-weight: 700; cursor: pointer; }
.cam input { display: none; }
.chart-box { background: #fff; border-radius: 12px; padding: .8rem; margin-bottom: .8rem; }
.chart-box canvas { max-height: 320px; }
.help { font-size: .85rem; color: #667; margin-top: -.4rem; margin-bottom: .6rem; }
/* Lămurirea de sub o rubrică este lămurire, nu titlu. Cât timp moștenea
   îngroșarea etichetei, se citea ca al doilea cap de rubrică și ochiul nu mai
   știa care este întrebarea și care este explicația. */
label .help, label small.help { font-weight: 400; display: block; }
.pill-row a, .pill-row button { margin-right: .4rem; margin-bottom: .4rem; }
details summary { cursor: pointer; }
.login-box { max-width: 420px; margin: 3rem auto; }

/* lista de verificări pe mobil vs tabel pe desktop */
.vlist { display: none; }
.vrow { position: relative; border-left: 4px solid #bfe3c8; background: #fafbfc; border-radius: 8px; padding: .5rem .6rem; margin-bottom: .45rem; font-size: .95rem; }
.vrow.bad { border-left-color: var(--bad); } .vrow.warn { border-left-color: var(--warn); }
.vrow .vtop { display: flex; gap: .3rem; align-items: center; font-size: .85rem; color: #445; }
.vrow .vdel { position: absolute; right: .4rem; bottom: .35rem; }
.vrow .vdel button { padding: 0 .4rem; font-size: .8rem; margin: 0; }
@media (max-width: 760px) { .vlist { display: block; } .vtable { display: none; } }

/* ===== Manuale CTC ===== */
.mgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .7rem; }
.mcard { display: flex; flex-direction: column; gap: .25rem; background: #fff; border-radius: 14px; padding: .95rem 1rem; text-decoration: none; color: #223; box-shadow: 0 1px 2px rgba(0,0,0,.06); border-top: 4px solid var(--acc, var(--navy)); }
.mcard b { font-size: 1.02rem; line-height: 1.25; }
.mcard small { color: #667; line-height: 1.35; }
.mcard .mico { font-size: 1.7rem; line-height: 1; }
.mcard .tag { align-self: flex-start; margin-top: .25rem; }
.toc { margin: 0; padding-left: 1.4rem; }
.toc li { margin-bottom: .45rem; }
.toc a { text-decoration: none; font-weight: 600; }

.manual-body { line-height: 1.62; font-size: 1.0rem; border-top: 4px solid var(--acc, var(--navy)); }
.manual-body h2 { margin: .2rem 0 .8rem; color: var(--navy); }
.manual-body h3 { margin: 1.3rem 0 .5rem; color: var(--teal); font-size: 1.12rem; }
.manual-body h4 { margin: 1rem 0 .35rem; font-size: 1rem; }
.manual-body p { margin-bottom: .7rem; }
.manual-body ul, .manual-body ol { margin-bottom: .7rem; padding-left: 1.3rem; }
.manual-body li { margin-bottom: .3rem; }
.manual-body table { font-size: .92rem; margin-bottom: .8rem; }
.manual-body td, .manual-body th { padding: .35rem .5rem; }
.manual-body figure { margin: 1rem 0; text-align: center; }
.manual-body figure svg { max-width: 100%; height: auto; }
.manual-body figcaption { font-size: .85rem; color: #667; margin-top: .3rem; }
.dece { background: #eef4fb; border-left: 4px solid var(--navy); border-radius: 0 10px 10px 0; padding: .65rem .9rem; margin: .9rem 0; }
.dece b:first-child, .dece > b { color: var(--navy); }
.atentie { background: #fdecea; border-left: 4px solid var(--bad); border-radius: 0 10px 10px 0; padding: .65rem .9rem; margin: .9rem 0; }
.pont { background: #e6f4ea; border-left: 4px solid var(--ok); border-radius: 0 10px 10px 0; padding: .65rem .9rem; margin: .9rem 0; }
.mcheck { background: #f2faf4; border: 1.5px solid #bfe3c8; border-radius: 12px; padding: .8rem 1rem; margin-top: 1.4rem; }
.mcheck h3 { margin-top: 0; color: var(--ok); }
.mcheck li { margin-bottom: .45rem; }
.mfoto { margin-top: 1.4rem; }
.mfoto h3 { color: var(--navy); }
.mfoto figcaption { font-size: .78rem; }
.defect { border: 1px solid #e2e7ee; border-radius: 12px; padding: .7rem .9rem; margin: .8rem 0; background: #fafbfd; }
.defect > b:first-child { font-size: 1.02rem; color: var(--bad); }
.defect .cauze { font-size: .92rem; color: #445; }

/* ===== Pictograme Tabler + pas de UX (v0.3) ===== */
.tic { vertical-align: -0.22em; flex-shrink: 0; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.topnav a { display: inline-flex; align-items: center; gap: .35rem; }
.userbox button.link { display: inline-flex; align-items: center; }

/* bara de jos: pastilă activă, ținte mai mari */
.bottomnav a { padding: .5rem 0 .45rem; font-size: .7rem; position: relative; transition: color .15s; }
.bottomnav a .ico { display: flex; justify-content: center; margin-bottom: .15rem; }
.bottomnav a.on { color: var(--navy); }
.bottomnav a.on .ico { position: relative; }
.bottomnav a.on .ico::before { content: ""; position: absolute; inset: -4px -12px; background: #e8f0fb; border-radius: 999px; z-index: -1; }
.bottomnav a:active { transform: scale(.96); }

/* butoane și legături cu pictograme */
.btn-big, button, .small { transition: transform .06s ease, box-shadow .15s ease; }
.btn-big:active { transform: scale(.985); }
a.iconlink { display: inline-flex; align-items: center; gap: .3rem; text-decoration: none; font-weight: 600; }
.row > h2, .row > h3 { display: flex; align-items: center; gap: .45rem; }

/* cardurile de manuale — v2, mai prietenoase */
.mcard { flex-direction: row; align-items: center; gap: .85rem; border-top: none; border-left: 5px solid var(--acc, var(--navy)); padding: .85rem .95rem; }
.mcard .mbadge { width: 52px; height: 52px; border-radius: 14px; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--acc) 12%, #fff); color: var(--acc); flex-shrink: 0; }
.mcard .mtxt { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.mcard .mtxt small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mcard .tag { margin-top: .15rem; }
.mcard .chev { margin-left: auto; color: #99a4b3; flex-shrink: 0; }
.mcard:active { transform: scale(.99); }
@media (max-width: 600px) { .mgrid { grid-template-columns: 1fr; } }

/* cuprins manual — rânduri mari, tot rândul e link */
.toc { list-style: none; padding: 0; margin: 0; counter-reset: cap; }
.toc li { margin: 0; border-bottom: 1px solid #eef1f5; }
.toc li:last-child { border-bottom: none; }
.toc a { display: flex; align-items: center; gap: .7rem; padding: .7rem .2rem; color: #223; }
.toc a::before { counter-increment: cap; content: counter(cap); width: 30px; height: 30px; border-radius: 999px; background: #e8f0fb; color: var(--navy); font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: .9rem; }
.toc a .durata { margin-left: auto; color: #8892a0; font-size: .8rem; font-weight: 400; white-space: nowrap; display: inline-flex; align-items: center; gap: .25rem; }

/* progres capitol */
.cap-progres { display: flex; align-items: center; gap: .5rem; margin: .1rem 0 .6rem; }
.cap-progres .bara { flex: 1; height: 6px; border-radius: 999px; background: #e3e8ef; overflow: hidden; }
.cap-progres .bara i { display: block; height: 100%; border-radius: 999px; background: var(--acc, var(--navy)); }
.cap-progres small { color: #667; white-space: nowrap; }

/* checklist bifabil */
.mcheck li { list-style: none; display: flex; gap: .55rem; align-items: flex-start; padding: .35rem .3rem; border-radius: 8px; cursor: pointer; }
.mcheck ul { padding-left: .2rem; }
.mcheck li::before { content: ""; width: 22px; height: 22px; border: 2px solid #9fb8a8; border-radius: 7px; flex-shrink: 0; margin-top: .1rem; background: #fff; transition: all .12s; }
.mcheck li.done { background: #e6f4ea; }
.mcheck li.done::before { background: var(--ok); border-color: var(--ok); background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l5 5l10 -10"/></svg>'); background-size: 15px; background-position: center; background-repeat: no-repeat; }
.mcheck li.done b, .mcheck li.done { text-decoration: none; }
.mcheck .mchint { font-size: .82rem; color: #6a7d70; margin: .2rem 0 .4rem; }

/* navigare capitol precedent/următor */
.capnav { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-bottom: 1.2rem; }
.capnav a { display: flex; flex-direction: column; gap: .15rem; padding: .7rem .9rem; background: #fff; border: 1.5px solid #d9dee6; border-radius: 12px; text-decoration: none; color: #223; min-height: 64px; justify-content: center; }
.capnav a small { color: #8892a0; display: inline-flex; align-items: center; gap: .25rem; }
.capnav a b { font-size: .92rem; line-height: 1.25; }
.capnav a.next { border-color: var(--navy); background: var(--navy); color: #fff; }
.capnav a.next small { color: #bcd0e8; }
.capnav a:only-child { grid-column: span 2; }

/* stări goale prietenoase */
.gol { text-align: center; padding: 2rem 1rem; color: #667; }
.gol .tic { color: #b9c2cf; margin-bottom: .4rem; }

/* căutare cu pictogramă */
.searchrow { position: relative; margin-bottom: .8rem; }
.searchrow .tic { position: absolute; left: .7rem; top: 50%; transform: translateY(-50%); color: #8892a0; pointer-events: none; }
.searchrow input { padding-left: 2.3rem; margin: 0; }
.btn-big { display: flex; align-items: center; justify-content: center; gap: .5rem; }
.kpi .l { display: inline-flex; align-items: center; gap: .3rem; }
.cam span { display: inline-flex; align-items: center; gap: .45rem; justify-content: center; }
h3 .tic, h2 .tic { color: var(--navy); }
.mcheck h3 .tic { color: var(--ok); }
.searchrow input[type=search] { background-image: none; }
a.btn-big:not(.btn-ghost):not(.btn-ok):not(.btn-bad) { background: var(--navy); color: #fff; border: 2px solid var(--navy); }

/* ============================================================
   TEMA v0.4 — stil e-commerce (antet alb, căutare mare, carduri)
   ============================================================ */
@font-face { font-family: 'Source Sans 3'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/static/vendor/fonts/source-sans-3-latin-ext-400-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Source Sans 3'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/static/vendor/fonts/source-sans-3-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Source Sans 3'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('/static/vendor/fonts/source-sans-3-latin-ext-600-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Source Sans 3'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('/static/vendor/fonts/source-sans-3-latin-600-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Source Sans 3'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('/static/vendor/fonts/source-sans-3-latin-ext-700-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Source Sans 3'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('/static/vendor/fonts/source-sans-3-latin-700-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

:root {
  --brand: #e6332a;               /* roșul „electric” de pe doze.electricsrl.ro */
  --bg-soft: #eef1f5;
  --linie: #e2e7ee;
  --umbra: 0 1px 3px rgba(16,30,54,.08);
  --umbra-hover: 0 6px 18px rgba(16,30,54,.14);
  --pico-font-family: 'Source Sans 3', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
body { font-family: 'Source Sans 3', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background: var(--bg-soft); }
h1,h2,h3,h4,b,strong { font-weight: 700; }

/* ---- antet alb pe două niveluri ---- */
.topbar { background: #fff; color: #16233a; border-bottom: 1px solid var(--linie); flex-wrap: wrap; padding: .5rem 1rem .5rem; gap: .6rem 1rem; box-shadow: var(--umbra); }
.topbar .brand { color: #16233a; font-size: 1.25rem; display: inline-flex; align-items: baseline; gap: .35rem; }
.topbar .brand span { color: var(--brand); font-weight: 800; opacity: 1; letter-spacing: -.01em; }
.topbar .brand small { font-weight: 400; color: #8892a0; font-size: .72rem; }
.userbox { color: #445; }
.userbox button.link { color: #445; }
.gsearch { flex: 1 1 300px; position: relative; display: flex; min-width: 0; order: 0; }
.gsearch input { margin: 0; padding-left: 2.4rem; padding-right: 5.2rem; border-radius: 999px; border: 2px solid #d7dde6; background: #f7f9fb; height: 42px; font-size: .98rem; }
.gsearch input:focus { border-color: var(--navy); background: #fff; box-shadow: none; }
.gsearch .tic { position: absolute; left: .85rem; top: 50%; transform: translateY(-50%); color: #8892a0; pointer-events: none; }
.gsearch button { position: absolute; right: 4px; top: 4px; bottom: 4px; width: auto; margin: 0; padding: 0 1rem; border-radius: 999px; background: var(--navy); border: none; color: #fff; font-size: .9rem; font-weight: 600; }
.topnav { margin-left: 0; width: 100%; order: 3; gap: .1rem; border-top: 1px solid var(--linie); padding-top: .35rem; }
.topnav a { color: #33415c; opacity: 1; font-weight: 600; font-size: .92rem; padding: .3rem .65rem; }
.topnav a:hover { background: #eef2f8; color: var(--navy); }
@media (max-width: 899px) {
  .topbar { padding: .5rem .8rem; }
  .gsearch { order: 2; flex-basis: 100%; }
  .gsearch input { height: 40px; }
}
@media (min-width: 900px) { .topnav { display: flex; } }

/* ---- chips de filtrare (stil marketplace) ---- */
.chiprow { display: flex; gap: .45rem; overflow-x: auto; padding: .1rem .1rem .5rem; scrollbar-width: none; }
.chiprow::-webkit-scrollbar { display: none; }
.chip { display: inline-flex; align-items: center; gap: .3rem; padding: .38rem .85rem; border-radius: 999px; background: #fff; border: 1.5px solid #d7dde6; color: #33415c; font-size: .88rem; font-weight: 600; text-decoration: none; white-space: nowrap; }
.chip:hover { border-color: var(--navy); }
.chip.on { background: var(--navy); border-color: var(--navy); color: #fff; }
.chip .cnt { background: rgba(0,0,0,.08); border-radius: 999px; padding: 0 .45rem; font-size: .78rem; }
.chip.on .cnt { background: rgba(255,255,255,.22); }

/* ---- grilă tip „produse” pentru fișe ---- */
.pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: .7rem; }
@media (min-width: 900px) { .pgrid { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); } }
.pcard { display: flex; flex-direction: column; background: #fff; border-radius: 12px; overflow: hidden; text-decoration: none; color: #223; box-shadow: var(--umbra); transition: box-shadow .15s, transform .1s; position: relative; }
.pcard:hover { box-shadow: var(--umbra-hover); transform: translateY(-2px); }
.pcard .pimg { aspect-ratio: 4/3; background: #f1f4f8; display: flex; align-items: center; justify-content: center; color: #b9c2cf; position: relative; }
.pcard .pimg { overflow: hidden; }
.pcard .pimg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pcard .pbadge { position: absolute; top: 8px; left: 8px; padding: .12rem .55rem; border-radius: 6px; font-size: .72rem; font-weight: 700; color: #fff; text-transform: uppercase; letter-spacing: .02em; }
.pbadge.critic { background: var(--bad); } .pbadge.major { background: var(--warn); } .pbadge.minor { background: #64748b; }
.pcard .pnfoto { position: absolute; bottom: 8px; right: 8px; background: rgba(15,23,42,.68); color: #fff; border-radius: 6px; padding: .1rem .45rem; font-size: .74rem; display: inline-flex; gap: .25rem; align-items: center; }
.pcard .pbody { padding: .6rem .7rem .7rem; display: flex; flex-direction: column; gap: .25rem; flex: 1; }
.pcard .pbody .numar { color: var(--navy); font-size: .95rem; }
.pcard .pbody .ptit { font-size: .88rem; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.3em; }
.pcard .pbody .pmeta { font-size: .78rem; color: #8892a0; margin-top: auto; }

/* ---- titluri de secțiune cu «Vezi toate» ---- */
.secrow { display: flex; align-items: center; gap: .5rem; margin: 1rem 0 .55rem; }
.secrow h3 { margin: 0; font-size: 1.15rem; display: flex; align-items: center; gap: .45rem; }
.secrow .vezi { margin-left: auto; font-size: .88rem; font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: .2rem; }

/* ---- rezultate căutare globală ---- */
.gres { display: flex; align-items: center; gap: .75rem; background: #fff; border-radius: 12px; padding: .65rem .85rem; margin-bottom: .5rem; text-decoration: none; color: #223; box-shadow: var(--umbra); }
.gres:hover { box-shadow: var(--umbra-hover); }
.gres .gico { width: 42px; height: 42px; border-radius: 10px; background: #eef2f8; color: var(--navy); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.gres .gimg { width: 42px; height: 42px; border-radius: 10px; object-fit: cover; flex-shrink: 0; }
.gres .gtxt { min-width: 0; } .gres .gtxt b { display: block; }
.gres .gtxt small { color: #667; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gres .chev { margin-left: auto; color: #99a4b3; }

/* ---- subsol ---- */
.footer { background: #fff; border-top: 1px solid var(--linie); margin-top: 2rem; padding: 1rem; text-align: center; color: #8892a0; font-size: .85rem; }
.footer a { color: #33415c; }
@media (max-width: 899px) { .footer { display: none; } }

/* ---- retușuri generale ---- */
.card, .kpi { box-shadow: var(--umbra); border-radius: 12px; }
table.compact thead th { background: #f5f7fa; position: sticky; top: 0; }
table.compact tbody tr:hover { background: #f8fafc; }
.msg { box-shadow: var(--umbra); }
.login-box .brand-mare { font-size: 1.9rem; font-weight: 800; text-align: center; display: block; margin-bottom: .2rem; color: #16233a; }
.login-box .brand-mare em { color: var(--brand); font-style: normal; }

/* ---- logo oficial în antet (v0.5) ---- */
.brand { display: inline-flex; align-items: center; gap: .65rem; text-decoration: none; }
.blogo { height: 36px; width: auto; display: block; }
.portal { font-weight: 700; color: #16233a; font-size: 1.06rem; padding-left: .65rem; border-left: 2px solid var(--linie); line-height: 1.15; white-space: nowrap; }
@media (max-width: 899px) { .blogo { height: 30px; } .portal { font-size: .98rem; } }
.topbar .brand .portal { color: #16233a; font-weight: 700; }

/* ---- nume utilaj în listă + previzualizare normalizare (v0.6) ---- */
.ulist a .unume { display: block; font-size: .95rem; font-weight: 600; color: #33415c; line-height: 1.2; margin: .1rem 0 .05rem; }
.ulist a small { display: block; }
.normprev:empty { display: none; }
.normhint { display: flex; align-items: flex-start; gap: .35rem; background: #e6f4ea; border-left: 3px solid var(--ok); border-radius: 0 8px 8px 0; padding: .35rem .6rem; margin: .25rem 0 .5rem; font-size: .85rem; color: #24603a; }
.normhint b { font-family: ui-monospace, monospace; }
.normhint .tic { color: var(--ok); flex-shrink: 0; margin-top: .1rem; }

/* ---- închiderea turei: motive pentru utilajele neverificate (v0.7) ---- */
.mrow { display: grid; grid-template-columns: 1fr 1.3fr; gap: .4rem .55rem; align-items: center; padding: .45rem 0; border-bottom: 1px solid #eef1f5; }
.mrow:last-child { border-bottom: none; }
.mrow.lipsa { background: #fdf3f2; border-radius: 8px; padding: .45rem .5rem; }
.mcod b { display: block; font-size: 1rem; line-height: 1.15; }
.mcod small { color: #8892a0; font-size: .8rem; }
.mrow select, .mrow input { margin: 0; font-size: .92rem; padding: .4rem .5rem; }
.mrow .mobs { grid-column: 1 / -1; font-size: .88rem; }
.mrow .mobs[hidden] { display: none; }
@media (min-width: 700px) {
  .mrow { grid-template-columns: 150px 1fr 1fr; }
  .mrow .mobs { grid-column: auto; }
}

/* ---- dashboard: producție și productivitate (v0.7) ---- */
.sectiune-titlu { display: flex; align-items: center; gap: .5rem; margin: 1.4rem 0 .7rem; padding-bottom: .45rem; border-bottom: 2px solid var(--linie); font-size: 1.2rem; color: var(--navy); }
.sectiune-titlu:first-of-type { margin-top: .6rem; }
.chart-box h4 { margin: 0 0 .1rem; font-size: 1rem; }
.chart-box .chart-sub { margin: 0 0 .6rem; font-size: .82rem; color: #8892a0; line-height: 1.35; }
.chart-box canvas { max-height: 300px; }
.grid2 > .chart-box { display: flex; flex-direction: column; }
.chart-box > canvas { height: 300px !important; }          /* înălțime care include banda axei X */
.sm-plot canvas { height: 100% !important; }
.tabelview { margin-top: .5rem; border-top: 1px solid var(--linie); padding-top: .4rem; }
.tabelview summary { font-size: .84rem; color: #667; cursor: pointer; }
.tabelview table { margin-top: .4rem; font-size: .84rem; }
.tabelview td, .tabelview th { font-variant-numeric: tabular-nums; }

/* grafice mici, unul pentru fiecare extruder */
.smallmult { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .6rem; }
.sm-item { border: 1px solid var(--linie); border-radius: 10px; padding: .45rem .55rem .3rem; background: #fff; }
.sm-cap { display: flex; align-items: baseline; justify-content: space-between; gap: .3rem; margin-bottom: .2rem; }
.sm-cap b { font-size: .88rem; color: #16233a; }
.sm-cap span { font-size: .78rem; color: #8892a0; font-variant-numeric: tabular-nums; }
.sm-plot { height: 62px; position: relative; }

/* listă cu bare (motive de oprire) */
.barlist td { vertical-align: middle; border: none; }
.barlist .bl-nume { width: 42%; }
.barlist .bl-bara { padding: .3rem .5rem; }
.barlist .bl-bara span { display: block; height: 12px; border-radius: 4px; background: var(--bad); min-width: 4px; }
.barlist .bl-bara span.plan { background: #8892a0; }
.barlist .bl-val { width: 3rem; text-align: right; font-variant-numeric: tabular-nums; }

/* ---- circuitul fabricii + ordine și disciplină (v0.8) ---- */
.cstat { display: flex; gap: .45rem; flex-wrap: wrap; margin-bottom: .3rem; }
.cs { display: inline-flex; align-items: center; gap: .3rem; padding: .3rem .7rem; border-radius: 999px; font-size: .85rem; font-weight: 600; }
.cs.gata { background: #e6f4ea; color: var(--ok); }
.cs.curs { background: #fff3e0; color: var(--warn); }
.cs.zero { background: #fdecea; color: var(--bad); }
.cs.total { background: #eef2f8; color: #33415c; }
.ulist a.part { border-color: #f3ddb0; background: #fffaf0; }
.urow { display: flex; align-items: center; justify-content: space-between; gap: .3rem; }
/* Bulinele de parcurs: câte treceri s-au făcut din cele trei obligatorii, și ce
   s-a găsit la fiecare. Peste țintă apar buline în plus — cine trece mai des
   trebuie să se vadă. Stinsă = trecere încă nefăcută. */
.udots { display: inline-flex; gap: 3px; align-items: center; }
/* Clasele bulinelor poartă prefixul `bul-` înadins: „gol" era deja o clasă
   globală pentru paginile fără conținut (padding 2rem), iar bulinele stinse
   ieșeau cât o cutie de chibrituri. Padding și margin zero, ca nicio regulă
   moștenită să nu le mai umfle. */
.udots i { width: 9px; height: 9px; border-radius: 999px; background: #dfe5ec;
           box-sizing: border-box; padding: 0; margin: 0; flex: 0 0 auto; }
.udots i.on, .udots i.bul-bun { background: var(--ok); }
.udots i.bul-rau { background: var(--bad); }
.udots i.bul-obs { background: var(--warn); }
.udots i.bul-oprit { background: #fff; border: 2px solid var(--warn); }
.udots i.bul-gol { background: #fff; border: 1px solid #ccd4de; }
.ulist a.part .udots i.on { background: var(--warn); }

.srow { display: flex; gap: .5rem; align-items: flex-start; padding: .4rem 0; border-bottom: 1px solid #eef1f5; font-size: .93rem; position: relative; }
.srow:last-of-type { border-bottom: none; }
.srow .stag { flex-shrink: 0; background: #fff3e0; color: var(--warn); border-radius: 6px; padding: .1rem .5rem; font-size: .76rem; font-weight: 700; margin-top: .1rem; max-width: 40%; }
.srow.srez .stag { background: #e6f4ea; color: var(--ok); }
.srow .vdel-s { margin-left: auto; }
.srow .vdel-s button { padding: 0 .4rem; font-size: .8rem; margin: 0; }
.sform { border-top: 1px dashed #d7dde6; padding-top: .6rem; margin-top: .5rem; }
.sform input[type=text], .sform select { margin-bottom: .5rem; }
.sgrup { border-left: 3px solid var(--linie); padding-left: .7rem; margin-bottom: .9rem; }
.sgrup-cap { margin: 0 0 .2rem; }
.subt { display: inline-flex; flex-wrap: wrap; gap: .3rem; margin: .3rem 0 0; }

/* ---------- v0.9: oprirea utilajului la trecere ---------- */
.segstare span.stop{color:#b26a00}
.segstare input:checked+span.stop{background:#fff3e0;color:#8a5200}
small.eroare{color:var(--bad);display:block;margin:-.35rem 0 .5rem}
.vrow.oprit{background:#fffaf0}
.tag.stop{background:#fff3e0;color:#8a5200}

/* ---------- v0.9: graficul cu toate extruderele ---------- */
.bursa{position:relative;height:420px}
.bursa canvas{height:420px!important}
.legenda{display:flex;flex-wrap:wrap;gap:.3rem;margin:.2rem 0 .5rem}
.lgchip{display:inline-flex;align-items:center;gap:.3rem;padding:.15rem .5rem;border:1px solid var(--linie,#e2e6ec);
  border-radius:999px;background:#fff;font-size:.78rem;font-weight:600;color:#33415c;cursor:pointer;line-height:1.6}
.lgchip:hover{border-color:#b9c2d0}
.lgchip.stins{opacity:.35}
.kpi.mare .v{font-size:2.1rem}
@media (max-width:700px){.bursa,.bursa canvas{height:320px!important}}

/* ---------- v0.9: șablonul de ordine și disciplină ---------- */
.ctrl-item{padding:.5rem 0;border-top:1px solid var(--linie,#eef1f5)}
.ctrl-item:first-of-type{border-top:0}
.ctrl-text{font-size:.95rem;margin-bottom:.35rem}
.seg4{display:grid;grid-template-columns:repeat(4,1fr);gap:.3rem}
.seg4 label{margin:0}
.seg4 input{position:absolute;opacity:0;pointer-events:none}
.seg4 span{display:block;text-align:center;padding:.35rem .2rem;border:1px solid var(--linie,#e2e6ec);border-radius:.5rem;
  font-size:.8rem;font-weight:600;color:#5a6577;background:#fff;cursor:pointer;line-height:1.3}
.seg4 input:checked+span.r5{background:#e6f4ea;border-color:#8fd0a5;color:#1a7f37}
.seg4 input:checked+span.r3{background:#fff3e0;border-color:#e8c188;color:#8a5200}
.seg4 input:checked+span.r0{background:#fdecea;border-color:#eda9a3;color:#b3261e}
.seg4 input:checked+span.r-1{background:#eef1f5;border-color:#c8d0da;color:#5a6577}
.seg4 input:focus-visible+span{outline:2px solid var(--brand,#ed2944);outline-offset:2px}
.scor{font-weight:800;font-size:1.35rem;padding:.05rem .5rem;border-radius:.5rem}
.scor.mic{font-size:1rem}
.scor.bun{background:#e6f4ea;color:#1a7f37}
.scor.mediu{background:#fff3e0;color:#8a5200}
.scor.slab{background:#fdecea;color:#b3261e}
.scor.gol{background:#eef1f5;color:#8892a0}
.conc{display:flex;gap:.5rem;align-items:flex-start;padding:.5rem .6rem;border-radius:.5rem;margin-bottom:.4rem;border-left:4px solid #c8d0da;background:#f7f9fc}
.conc.bun{border-left-color:#1a7f37;background:#f2faf5}
.conc.atentie{border-left-color:#d97706;background:#fff8ec}
.conc.grav{border-left-color:#be123c;background:#fdf2f4}
.subnav{display:flex;flex-wrap:wrap;gap:.35rem;margin:.2rem 0 .8rem}
.subnav a{display:inline-flex;align-items:center;gap:.3rem;padding:.3rem .7rem;border:1px solid var(--linie,#e2e6ec);
  border-radius:999px;background:#fff;font-size:.85rem;font-weight:600;color:#33415c;text-decoration:none}
.subnav a.on{background:#16233a;border-color:#16233a;color:#fff}
.ctrlbox{display:flex;align-items:center;gap:.6rem;padding:.6rem .7rem;margin:.2rem 0 .6rem;border-radius:.6rem;
  border:1px solid var(--linie,#e2e6ec);background:#f7f9fc;text-decoration:none;color:inherit}
.ctrlbox:hover{border-color:#b9c2d0;background:#f2f5fa}
.ctrlbox.gol{border-left:4px solid #d97706;background:#fff8ec}
.ctrlbox.bun{border-left:4px solid #1a7f37}
.ctrlbox.mediu{border-left:4px solid #d97706}
.ctrlbox.slab{border-left:4px solid #be123c}
.ctrlbox .ctrlic{color:#33415c;display:flex}
.ctrlbox .ctrltxt{display:flex;flex-direction:column;line-height:1.35;font-size:.9rem}
.ctrlbox .right{margin-left:auto;display:flex;align-items:center}
/* barlist cu etichete lungi (motive de oprire): coloana barei rămâne lizibilă */
.barlist.motive .bl-nume{width:44%}
.barlist.motive .bl-bara{width:40%}
.barlist.motive .bl-val{width:4.5rem;white-space:nowrap}

/* ---------- v1.0: reclamații ---------- */
.rcard{display:block;padding:.65rem .8rem;margin-bottom:.5rem;border:1px solid var(--linie,#e2e6ec);border-left:4px solid #2a78d6;
  border-radius:.6rem;background:#fff;text-decoration:none;color:inherit}
.rcard:hover{border-color:#b9c2d0;box-shadow:0 1px 6px rgba(16,30,54,.07)}
.rcard.inchisa{border-left-color:#1a7f37;opacity:.82}
.rcard.intarziata{border-left-color:#be123c;background:#fffafb}
.rcap{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin-bottom:.15rem}
.rcap .numar{color:#16233a}
.rclient{font-weight:700}
.rdesc{font-size:.93rem;line-height:1.45}
.rdesc.mare{font-size:1rem;padding:.5rem .7rem;background:#f7f9fc;border-radius:.5rem;border-left:3px solid #c8d0da}
.rmeta{font-size:.8rem;color:#5a6577;margin-top:.25rem}
.lreclam{padding:.55rem 0;border-top:1px solid #eef1f5}
.lreclam:first-of-type{border-top:0}
.cauza{padding:.5rem .7rem;margin-bottom:.4rem;border-radius:.5rem;background:#f7f9fc;border-left:4px solid #8892a0}
.cauza.aparitie{border-left-color:#eb6834;background:#fff8f4}
.cauza.scapare{border-left-color:#2a78d6;background:#f4f8ff}
.cauza.sistemic{border-left-color:#4a3aa7;background:#f7f5ff}
.nota{padding:.5rem .7rem;margin-bottom:.4rem;border-radius:.5rem;border:1px solid var(--linie,#e2e6ec)}
.nota.ceruta{background:#fff8ec;border-color:#f0dcb8}
.nota.primita{background:#f4faf6;border-color:#cfe8d8}
.raspuns-nota{margin-top:.3rem;padding:.4rem .6rem;background:#fff;border-radius:.4rem;border:1px solid #e2e6ec;font-size:.9rem}
.docgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.5rem;margin-bottom:.4rem}
.doc{border:1px solid var(--linie,#e2e6ec);border-radius:.5rem;padding:.4rem;text-align:center;background:#fff}
.doc.bani{border-color:#e8c188;background:#fffdf7}
.doc img{width:100%;height:90px;object-fit:cover;border-radius:.35rem;display:block;margin-bottom:.3rem}
.doc .docic{display:flex;align-items:center;justify-content:center;height:90px;color:#8892a0}
details.adauga{margin-top:.6rem;border-top:1px dashed #dfe5ec;padding-top:.5rem}
details.adauga>summary{cursor:pointer;font-weight:600;font-size:.88rem;color:#2a78d6;list-style:none}
details.adauga>summary::-webkit-details-marker{display:none}
.opsel{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:.2rem;font-size:.9rem}
.opsel label{display:flex;align-items:center;gap:.3rem;margin:0}
tr.intarziat td{background:#fffafb}
.btn-small{display:inline-flex;align-items:center;gap:.3rem;padding:.32rem .7rem;border-radius:.5rem;border:1px solid var(--linie,#e2e6ec);
  background:#fff;color:#16233a;font-size:.85rem;font-weight:600;text-decoration:none;cursor:pointer}
.btn-small:hover{border-color:#b9c2d0;background:#f7f9fc}
.btn-small.btn-ok{background:#1a7f37;border-color:#1a7f37;color:#fff}
select.mic{padding:.28rem .5rem;font-size:.85rem;width:auto;margin:0}
.filtre label{font-size:.82rem;margin:0}
.filtre input,.filtre select{margin:0}
.oprez{display:flex;flex-direction:column;gap:.2rem;margin:.2rem 0}
.oprand{display:flex;flex-direction:column;align-items:flex-start;gap:.05rem;padding:.35rem .6rem;border:1px solid var(--linie,#e2e6ec);
  border-radius:.45rem;background:#fff;cursor:pointer;text-align:left;width:100%}
.oprand:hover{border-color:#2a78d6;background:#f4f8ff}
.oprand.sigur{border-left:3px solid #1a7f37}
.oprand.intreaba{border-left:3px solid #d97706}
.oprand.slab{border-left:3px solid #c8d0da}
.oprand .marca{font-size:.75rem;color:#5a6577;background:#eef2f8;border-radius:.3rem;padding:0 .3rem}
.oprand .motiv{font-size:.75rem;color:#8892a0}
.opnimic{font-size:.82rem;color:#8a5200;background:#fff8ec;border-radius:.45rem;padding:.35rem .6rem}
.alesi{display:flex;flex-wrap:wrap;gap:.3rem;margin:.2rem 0}
.chipop{display:inline-flex;align-items:center;gap:.25rem;background:#eef2f8;border-radius:999px;padding:.15rem .3rem .15rem .6rem;font-size:.82rem;font-weight:600}
.chipop i{font-style:normal;font-weight:400;color:#5a6577}
.chipop button{border:0;background:transparent;cursor:pointer;color:#5a6577;padding:0 .3rem;font-size:.9rem}
.pnota{border-left:4px solid #be123c}

/* ---------- v1.1: traseul obligatoriu, declarații prin link ---------- */
.bara{height:8px;border-radius:999px;background:#eef2f8;overflow:hidden;margin:.3rem 0 .5rem}
.bara span{display:block;height:100%;background:#1a7f37;border-radius:999px;transition:width .3s}
ol.pasi{list-style:none;margin:.4rem 0 0;padding:0}
.pas{display:flex;gap:.6rem;padding:.5rem 0;border-top:1px solid #eef1f5}
.pas:first-child{border-top:0}
.psemn{flex:0 0 26px;height:26px;border-radius:999px;display:flex;align-items:center;justify-content:center;
  font-size:.8rem;font-weight:700;background:#eef2f8;color:#5a6577}
.pas.gata .psemn{background:#e6f4ea;color:#1a7f37}
.pas.in_curs .psemn{background:#fff3e0;color:#8a5200}
.pas.neaplicabil .psemn{background:#eef1f5;color:#8892a0}
.pas.gata{opacity:.72}
.ptext{flex:1;min-width:0;line-height:1.4}
.pexpl{display:block;font-size:.8rem;color:#8892a0;margin-top:.05rem}
.plipsa{margin:.25rem 0 0 1rem;padding:0;font-size:.85rem;color:#8a5200}
.pnea{display:block;font-size:.82rem;color:#5a6577;background:#f7f9fc;border-radius:.35rem;padding:.25rem .5rem;margin-top:.25rem}
.pact{display:flex;gap:.5rem;align-items:center;margin-top:.35rem;flex-wrap:wrap}
.pnea-form>summary{font-size:.78rem;color:#8892a0;cursor:pointer;list-style:none}
.pnea-form>summary::-webkit-details-marker{display:none}
.pnea-form input{margin:.3rem 0;font-size:.85rem}
.btn-small.blocat{background:#fdecea;border-color:#eda9a3;color:#b3261e;cursor:not-allowed}
.dlink{display:flex;gap:.6rem;align-items:flex-start;margin-top:.35rem;padding:.45rem .6rem;background:#f7f9fc;border-radius:.5rem}
.dlink-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:.15rem}
.dlink input{margin:0;font-size:.78rem;padding:.25rem .4rem;background:#fff}
.dqr{width:74px;height:74px;border-radius:.35rem;border:1px solid var(--linie,#e2e6ec);background:#fff}
.cs.live{background:#f2faf5;color:#1a7f37}
.ulist a.gata{border-color:#a9dbbc;background:#f4faf6}
.ulist a.curs{border-color:#f3ddb0;background:#fffaf0}

/* ---------- v1.2: atașarea pozelor, filmărilor și documentelor ---------- */
.incarcare{margin-bottom:.7rem}
.zona{display:flex;flex-direction:column;align-items:center;gap:.2rem;text-align:center;padding:.9rem;
  border:2px dashed #c8d0da;border-radius:.7rem;background:#f7f9fc;cursor:pointer;color:#33415c;margin:0}
.zona:hover{border-color:#2a78d6;background:#f2f7ff}
.zona input[type=file]{margin-top:.4rem;font-size:.85rem}
.alese{display:flex;flex-wrap:wrap;gap:.3rem;margin:.4rem 0}
.chipf{display:inline-flex;gap:.3rem;align-items:center;background:#eef2f8;border-radius:999px;
  padding:.15rem .6rem;font-size:.8rem;font-weight:600}
.chipf i{font-style:normal;font-weight:400;color:#5a6577}
.doc video{width:100%;height:90px;object-fit:cover;border-radius:.35rem;display:block;margin-bottom:.3rem;background:#000}

/* ---------- dosarul de documente al reclamației ---------- */
/* Fiecare document cerut are propriul rând, cu starea lui la vedere: bifat,
   cerut prin link, lipsă sau scos din dosar cu motiv. Culoarea din stânga se
   citește dintr-o privire, fără să fie nevoie să citești textul. */
.dosar{display:flex;flex-direction:column;gap:.5rem;margin:.4rem 0 .2rem}
.dcerut{border:1px solid #e3e8ef;border-left:4px solid #cbd5e1;border-radius:.6rem;padding:.6rem .75rem;background:#fcfdfe}
.dcerut.gata{border-left-color:#1a7f37;background:#f7fbf8}
.dcerut.cerut{border-left-color:#eda100;background:#fffdf5}
.dcerut.lipsa{border-left-color:#e34948;background:#fffafa}
.dcerut.neaplicabil{border-left-color:#94a3b8;background:#f8fafc;opacity:.85}
.dbif{display:inline-flex;width:1.3rem;justify-content:center;font-weight:700}
.dcerut.gata .dbif{color:#1a7f37}
.dcerut.cerut .dbif{color:#b47800}
.dcerut.lipsa .dbif{color:#e34948}
.cerere{background:#fff;border:1px solid #f0e3c0;border-radius:.5rem;padding:.5rem .6rem;margin-top:.3rem}
.linkbox{display:flex;gap:.6rem;align-items:center;margin:.4rem 0}
.linkbox input{flex:1;font-size:.8rem;font-family:ui-monospace,monospace;padding:.35rem .5rem;margin:0}
.linkbox img{border:1px solid #e3e8ef;border-radius:.4rem;background:#fff}
.confirmare{background:#fffdf5;border:1px solid #f0e3c0;border-radius:.5rem;padding:.5rem .6rem;margin-top:.4rem}
/* ce a observat aplicația comparând documentul cu reclamația */
.verif{margin-top:.3rem;padding:.25rem .4rem;border-radius:.35rem;font-size:.78rem;line-height:1.35}
.verif.ok{background:#f0f7f2;color:#14532d}
.verif.info{background:#f1f5fb;color:#1e3a5f}
.verif.atentie{background:#fff4ed;color:#7c2d12}

/* ---------- raport de tură închis ---------- */
/* Banda se vede din prima: raportul e istorie, nu ceva de completat. */
.inchis{background:#f4f6fa;border:1px solid #dbe2ec;border-left:4px solid #64748b;
        border-radius:.6rem;padding:.6rem .8rem;margin:.5rem 0 .9rem}
.inchis .row{align-items:center;gap:.5rem}
.inchis .mic{color:#475569}

/* bara de tură de deasupra bulinelor: cine lucrează acum și în ce interval */
.turabar{background:#eef3fb;border:1px solid #d7e2f2;border-radius:.5rem;
         padding:.4rem .7rem;margin-bottom:.5rem;font-size:.9rem;color:#1e3a5f}

/* ---------- alegerea perioadei în dashboard ---------- */
.perioade{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;margin-bottom:.7rem}
.pchip{display:inline-block;padding:.3rem .7rem;border:1px solid #d7e2f2;border-radius:999px;
       background:#fff;color:#1e3a5f;font-size:.85rem;text-decoration:none;white-space:nowrap}
.pchip:hover{border-color:#2a78d6;background:#f2f7ff}
.pchip.activ{background:#1e3a5f;border-color:#1e3a5f;color:#fff;font-weight:600}
.pinterval{display:flex;gap:.3rem;align-items:center;margin:0}
.pinterval input[type=date]{width:auto;margin:0;padding:.25rem .4rem;font-size:.82rem}
.pinterval button{margin:0}
.pinterval span{color:#94a3b8}

/* ---------- calendarul de acoperire a turelor ---------- */
/* Un pătrat pe zi, tăiat în două: sus tura de zi, jos cea de noapte. Se citește
   dintr-o privire — verde întreg, verde pe jumătate sau gol. */
.calzile{display:grid;grid-template-columns:repeat(7,1fr);gap:.35rem}
.calcap{text-align:center;font-size:.75rem;color:#64748b;font-weight:600;padding-bottom:.2rem}
.calzi{position:relative;border:1px solid #e3e8ef;border-radius:.45rem;padding:.25rem;
       background:#fff;min-height:3.1rem;display:flex;flex-direction:column;justify-content:space-between}
.calzi.azi{outline:2px solid #2a78d6;outline-offset:1px}
.calzi .caln{font-size:.78rem;color:#475569;font-weight:600;line-height:1}
.caltur{display:flex;flex-direction:column;gap:2px}
.caltur i{display:block;height:9px;border-radius:2px;background:#e9edf3}
.caltur i.tlucrat{background:#1a7f37}
.caltur i.tgol{background:repeating-linear-gradient(45deg,#eda100,#eda100 3px,#fff4d6 3px,#fff4d6 6px)}
.caltur i.tlipsa{background:#f1d6d6;box-shadow:inset 0 0 0 1px #e8b4b4}
.caltur i.tviitor{background:#f4f6fa}
.callegend{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:.7rem;font-size:.8rem;color:#475569}
.callegend span{display:inline-flex;align-items:center;gap:.35rem}
.callegend i{width:18px;height:9px;border-radius:2px;display:inline-block}
.callegend i.tlucrat{background:#1a7f37}
.callegend i.tgol{background:repeating-linear-gradient(45deg,#eda100,#eda100 3px,#fff4d6 3px,#fff4d6 6px)}
.callegend i.tlipsa{background:#f1d6d6;box-shadow:inset 0 0 0 1px #e8b4b4}
.callegend i.tviitor{background:#f4f6fa;box-shadow:inset 0 0 0 1px #e3e8ef}
.chips{display:flex;flex-wrap:wrap;gap:.3rem}
.chip{display:inline-block;padding:.2rem .5rem;border-radius:.35rem;background:#f1f5fb;font-size:.8rem}
.chip.bad{background:#fdeaea;color:#7c2d12}

/* fișa tehnică a utilajului — se vede numai de conducere */
.tehnic{border:1px solid #e3e8ef;border-radius:.5rem;padding:.5rem .7rem;margin-top:.6rem;background:#fbfcfe}
.tehnic summary{cursor:pointer;font-weight:600;color:#1e3a5f;display:flex;align-items:center;gap:.35rem}
.tehnic table{margin-top:.5rem}

/* ---------- fișe de service ---------- */
.srv{display:block;border:1px solid #e3e8ef;border-left:4px solid #cbd5e1;border-radius:.55rem;
     padding:.5rem .7rem;margin-bottom:.45rem;text-decoration:none;color:inherit;background:#fff}
.srv:hover{border-color:#2a78d6;background:#f8fbff}
.srv.bad{border-left-color:#e34948}
.srv.warn{border-left-color:#eda100}
.srv .row{gap:.4rem;align-items:center;flex-wrap:wrap}
.filtre{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;margin-bottom:.7rem}
.filtre select,.filtre input{width:auto;margin:0;padding:.3rem .5rem;font-size:.85rem}
.filtre button{margin:0}
/* traseul unei fișe de service: patru pași, cu cine și când la fiecare */
.pasi{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.5rem}
.pas{border:1px solid #e3e8ef;border-radius:.5rem;padding:.5rem .6rem;background:#fbfcfe}
.pas.gata{border-color:#bfe3cb;background:#f7fbf8}
.pas b{display:block;font-size:.85rem;color:#1e3a5f}
.pas span{font-size:.78rem;color:#64748b}
.photos .ph{position:relative;display:inline-block}

/* ---------------------------------------------------------------------------
   Secțiunile fișei de reclamație: fiecare se salvează singură.
   O reclamație se completează în mai multe zile, așa că fiecare bucată are
   butonul ei și își spune, discret, când a fost salvată ultima oară.
   --------------------------------------------------------------------------- */
.sectiune { scroll-margin-top: 5rem; }
/* Bifa arată la fel peste tot: și în secțiunile fișei, și în formularul de
   înregistrare. Cât timp regula a stat închisă în `.sectiune`, aceeași bifă
   ieșea altfel pe cele două pagini. */
label.bifa { display: flex; align-items: center; gap: .5rem; margin: .5rem 0; cursor: pointer; }
label.bifa input[type=checkbox] {
  flex: 0 0 auto; width: 1.15rem; height: 1.15rem; margin: 0; --pico-form-element-spacing-vertical: 0;
  /* pătrat, nu cerc: un cerc se citește ca buton radio, adică „alege una din mai
     multe", ceea ce nu este cazul niciunde în aplicație */
  border-radius: .25rem;
}
label.bifa span { font-weight: 600; }
.sectiune > .help { margin-top: -.25rem; }
.ciorna-stare { font-size: .8rem; color: #778; min-height: 1em; }
.ciorna-stare.ok { color: var(--ok); }
.ciorna-stare.warn { color: var(--warn); }
.ciorna-stare.bad { color: var(--bad); }
.sectiune.atins { box-shadow: inset 3px 0 0 var(--navy); }

/* «Continuă de unde ai rămas» — pasul următor, la vedere, în capul fișei */
.reia { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
        background: #eef4fd; border-left: 4px solid var(--navy);
        border-radius: 8px; padding: .6rem .8rem; margin: .5rem 0; }
.reia b { color: var(--navy); }

/* ---------------------------------------------------------------------------
   „Mai mult, pentru audit" — ce s-a scos din traseu, dar a rămas în aplicație.
   Stă închis: se deschide când vine auditul ISO sau un client care îl cere.
   --------------------------------------------------------------------------- */
details.audit > summary { cursor: pointer; list-style: none; display: flex;
                          align-items: center; gap: .4rem; flex-wrap: wrap; }
details.audit > summary::-webkit-details-marker { display: none; }
/* Pico pune un chevron propriu, în dreapta; îl scoatem — avem deja unul, la stânga */
details.audit > summary::after { display: none !important; }
details.audit > summary::before { content: "▸"; color: #8a93a3; font-size: .9rem; }
details.audit[open] > summary::before { content: "▾"; }
details.audit > summary .right { margin-left: auto; }
details.audit[open] > summary { margin-bottom: .6rem; padding-bottom: .5rem;
                                border-bottom: 1px solid var(--pico-muted-border-color, #e3e8ef); }
.auditlista { list-style: none; margin: 0 0 1rem; padding: 0; }
.auditlista li { display: flex; gap: .5rem; padding: .35rem 0; align-items: flex-start; }
.auditlista li .psemn { color: #8a93a3; flex: 0 0 1.1rem; }
.auditlista li.gata .psemn { color: var(--ok); }
.auditlista .pexpl { display: block; font-size: .82rem; color: #667; margin-top: .1rem; }

/* ---- semnătura desenată cu mâna (telefon, tabletă, mouse) ---- */
.semnpad { margin: .4rem 0 .8rem; }
.semnpanza {
  display: block; width: 100%; border: 2px dashed #c6cfdb; border-radius: .6rem;
  background: #fff; touch-action: none;   /* fără asta, degetul dă scroll în loc să scrie */
  cursor: crosshair;
}
.semnunelte { display: flex; align-items: center; gap: .6rem; margin-top: .35rem; }
.semnstare { font-size: .85rem; }
.semnstare:not(:empty)::before { content: "✓ "; color: var(--ok, #1a7f37); }
.semnimg { max-height: 4.5rem; }

/* cifrele se citesc la dreapta: așa se compară sumele dintr-o privire */
table td.num, table th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* butonul care chiar șterge: roșu, cu scrisul alb — să nu poată fi confundat
   cu celelalte butoane mici de pe pagină */
.btn-sterge, .btn-sterge:hover, .btn-sterge:focus {
  background: var(--bad, #c62828); border-color: var(--bad, #c62828); color: #fff;
}
.btn-sterge .tic { color: #fff; }

/* triajul reclamației: cât de mult de lucru cere dosarul */
.card.traseu-A { box-shadow: inset 4px 0 0 var(--ok, #1a7f37); }
.card.traseu-B { box-shadow: inset 4px 0 0 var(--warn, #b26a00); }
.card.traseu-C { box-shadow: inset 4px 0 0 var(--bad, #c62828); }

/* Istoricul unei note explicative: cine a atins-o și când. Nimic nu se rescrie. */
.istoric-nota { list-style: none; padding: 0; margin: .3rem 0 0; }
.istoric-nota li { padding: .35rem 0; border-bottom: 1px solid #eef1f5; font-size: .93rem; }
.istoric-nota li:last-child { border-bottom: none; }
/* Rândurile de clasament pe oameni, cu bara proporțională. */
.oprow { display: grid; grid-template-columns: 1fr auto; gap: .2rem .6rem; padding: .45rem 0; border-bottom: 1px solid #eef1f5; }
.oprow:last-child { border-bottom: none; }
.oprow .bara { grid-column: 1 / -1; height: 6px; border-radius: 999px; background: #eef1f5; overflow: hidden; }
.oprow .bara i { display: block; height: 100%; background: var(--bad); }

.legenda-buline { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; }
.legenda-buline .udots { margin: 0 .1rem; }

/* Lista de închidere a turei. Verde = terminat, roșu = de făcut; nimic între ele. */
.lista-gata { border-left: 4px solid var(--ok); }
.lista-blocata { border-left: 4px solid var(--bad); }
.inchlist { list-style: none; padding: 0; margin: .4rem 0 0; }
.inchlist li { display: flex; gap: .55rem; padding: .5rem 0; border-bottom: 1px solid #eef1f5; }
.inchlist li:last-child { border-bottom: none; }
.inchlist li.ok { color: #667; }
.inchlist li.ok .semn { color: var(--ok); }
.inchlist li.de_facut .semn { color: var(--bad); }
.inchlist li.de_gandit .semn { color: var(--warn); }
.inchlist .semn { flex: 0 0 1.1rem; margin-top: .1rem; }
.inchlist .muted { font-size: .9rem; }
.inchlist .rez { margin-top: .25rem; }
.inchel { display: flex; flex-wrap: wrap; gap: .35rem; margin: .35rem 0 .1rem; align-items: center; }
.inchel form.inline { display: inline-flex; gap: .3rem; align-items: center; }

/* Cele trei hârtii pentru client: ce a plecat, ce poate pleca, ce mai așteaptă. */
.scrisoare { padding: .6rem 0; border-bottom: 1px solid #eef1f5; }
.scrisoare:last-of-type { border-bottom: none; }
.scrisoare .srand { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.scrisoare .muted { font-size: .9rem; margin-top: .15rem; }
.scrisoare .lip { color: var(--bad); }
.scrisoare .sbtn { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .45rem; }
.scrisoare .sbtn form.inline { display: inline; }
.scrisoare.gata { border-left: 3px solid var(--warn); padding-left: .6rem; }
.scrisoare.trimisa { border-left: 3px solid var(--ok); padding-left: .6rem; }

/* «Ce spunea CTC atunci»: culoarea spune verdictul dintr-o privire. */
.ctcrand { padding: .6rem 0 .7rem; border-bottom: 1px solid #eef1f5; }
.ctcrand:last-of-type { border-bottom: none; }
.ctcrand .verdict { margin-top: .3rem; }
.ctcrand .muted { font-size: .9rem; }
.ctcrand .cifre { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .4rem; }
.ctcrand { border-left: 3px solid #dfe5ec; padding-left: .6rem; }
.ctcrand.v-neverificat, .ctcrand.v-conform { border-left-color: var(--bad); }
.ctcrand.v-gasit { border-left-color: var(--warn); }
.ctcrand.v-neconform { border-left-color: var(--warn); }
.ctcrand.v-fara_data, .ctcrand.v-fara_utilaj { border-left-color: #b9c2cf; }

/* Plăcuța spune dintr-o privire ce a fost cu utilajul în tura aceea.
   Roșu bate oprit, oprit bate verde: o tură în care s-a găsit o neconformitate
   nu are voie să arate la fel cu una în care totul a mers. */
.ulist a.rau { border-color: #f0b9b4; background: #fdf4f3; }
.ulist a.oprit { border-color: #f3ddb0; background: #fffaf0; }

.utags { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .3rem; }
.utags:empty { display: none; }