/* =====================================================================
   Silvamat — temă & scalare
   Toate dimensiunile sunt în rem; mărimea de bază urmează lățimea ecranului
   (≈16px la 1920px, mai mică pe laptop, mai mare pe 2K/4K), înmulțită cu
   preferința de zoom a utilizatorului (--ui-scale).
   ===================================================================== */
html { font-size: calc(clamp(12px, 0.42vw + 8px, 22px) * var(--ui-scale, 1)); }

/* --- Lemn Clasic (implicit) --- */
:root {
  --bg: #f7f5f2; --panel: #fff; --soft: #faf8f6; --soft2: #f1eeea; --track: #ece6df;
  --line: #ebe6df; --line2: #f2eee9; --line-strong: #ddd6cd;
  --text: #1d1b19; --text2: #5c5650; --muted: #8a837b; --mix: #fff; --chip-text: #2b2622; --backdrop: #1d1b1966;
  --side: #151413; --side2: #1f1d1b; --side-text: #d9d4cd; --side-muted: #a39c94; --side-line: #2a2725;
  --side-hover: #1e1c1a; --side-active: #2a2826; --side-alert: #ff8d7a; --tag-bg: #3a2717;
  --logout: #e7b9a3; --logout-ico: #f08a6a; --logout-hover: #2a1a16;
  --acc: #c4500c; --acc-d: #a84309; --acc-l: #fdeedf; --acc-t: #f2a55c; --acc-b: #f5d4b5; --today: #fdf0e1;
  --red: #c0262d; --red-l: #fdf0ef; --red-b: #f2cfcc;
  --green: #2f8a4a; --green-l: #e8f6ec; --green-b: #c9e8d2; --green-t: #1f6b37;
  --amber: #b7791f; --amber-l: #fdf6e3; --amber-b: #f0dfb2; --amber-t: #8a5a10;
  --blue-l: #eef1f6; --blue-t: #4c5f7a;
  --mono: ui-monospace, "Cascadia Mono", Consolas, "SFMono-Regular", monospace;
  --radius: 0.875rem;
  --on-acc: #fff;
  color-scheme: light;
}

/* --- Întunecat --- */
:root[data-theme="intunecat"] {
  --bg: #121212; --panel: #1c1b1a; --soft: #222120; --soft2: #2a2827; --track: #353230;
  --line: #2f2d2b; --line2: #272524; --line-strong: #45413e;
  --text: #ece8e3; --text2: #c4bdb5; --muted: #9a928a; --mix: #1c1b1a; --chip-text: #f3efe9; --backdrop: #000a;
  --side: #0b0b0b; --side2: #161514; --side-text: #d9d4cd; --side-muted: #8f8880; --side-line: #24221f;
  --side-hover: #191817; --side-active: #262422; --tag-bg: #3a2717;
  --acc: #e0712a; --acc-d: #f08a45; --acc-l: #3a2516; --acc-t: #f2a55c; --acc-b: #6b3d1c; --today: #2e2015;
  --red: #ef5a5f; --red-l: #3a1c1d; --red-b: #6b2b2e;
  --green: #4cc27a; --green-l: #173222; --green-b: #285c3b; --green-t: #7ed9a1;
  --amber: #e8a948; --amber-l: #33280f; --amber-b: #5f4a1c; --amber-t: #f0c27a;
  --blue-l: #1d2633; --blue-t: #9db5d6;
  color-scheme: dark;
}

/* --- Nuc (maro cald) --- */
:root[data-theme="nuc"] {
  --bg: #f3ede6; --panel: #fffdfa; --soft: #f8f2eb; --soft2: #ede3d8; --track: #e3d6c8;
  --line: #e4d8cb; --line2: #eee5db; --line-strong: #d3c3b2;
  --text: #2a1d14; --text2: #5d4636; --muted: #8c7666;
  --side: #2b1d14; --side2: #3a281c; --side-text: #eadccd; --side-muted: #b49c87; --side-line: #46321f;
  --side-hover: #35251a; --side-active: #4a3424; --tag-bg: #5a3a22;
  --acc: #8b4a2b; --acc-d: #6f3a20; --acc-l: #f4e3d6; --acc-t: #e0a57c; --acc-b: #e3c2a8; --today: #f3e2d3;
}

/* --- Pădure (verde) --- */
:root[data-theme="padure"] {
  --bg: #f1f5f0; --panel: #fff; --soft: #f6f9f5; --soft2: #e7eee5; --track: #dbe5d8;
  --line: #dfe8dc; --line2: #ecf1ea; --line-strong: #c8d6c4;
  --text: #16231a; --text2: #475a4b; --muted: #758779;
  --side: #10201a; --side2: #172c23; --side-text: #d5e5dc; --side-muted: #94ab9d; --side-line: #22382d;
  --side-hover: #163026; --side-active: #224033; --tag-bg: #1f4a35;
  --acc: #2f7d4f; --acc-d: #23633d; --acc-l: #e1f2e7; --acc-t: #8fd1a8; --acc-b: #b9e0c7; --today: #e6f3ea;
}

/* --- Ardezie (albastru-gri) --- */
:root[data-theme="ardezie"] {
  --bg: #f2f4f8; --panel: #fff; --soft: #f7f8fb; --soft2: #e8ecf3; --track: #dde3ec;
  --line: #e1e6ee; --line2: #edf0f5; --line-strong: #cbd3df;
  --text: #172030; --text2: #4a5568; --muted: #7a8698;
  --side: #141b27; --side2: #1c2534; --side-text: #d6deea; --side-muted: #95a2b6; --side-line: #273246;
  --side-hover: #1a2332; --side-active: #263247; --tag-bg: #233552;
  --acc: #2f6fb3; --acc-d: #245a93; --acc-l: #e3eefa; --acc-t: #8fbdf0; --acc-b: #bcd6f3; --today: #e8f1fb;
}

/* --- Contrast ridicat (accesibilitate) --- */
:root[data-theme="contrast"] {
  --bg: #fff; --panel: #fff; --soft: #f4f4f4; --soft2: #e6e6e6; --track: #cfcfcf;
  --line: #8a8a8a; --line2: #b5b5b5; --line-strong: #555;
  --text: #000; --text2: #1a1a1a; --muted: #3d3d3d; --chip-text: #000;
  --side: #000; --side2: #111; --side-text: #fff; --side-muted: #e0e0e0; --side-line: #555;
  --side-hover: #222; --side-active: #333; --side-alert: #ffd400; --tag-bg: #333;
  --acc: #b33c00; --acc-d: #8a2e00; --acc-l: #ffe7d6; --acc-t: #ffb070; --acc-b: #b33c00; --today: #fff1c2;
  --red: #b00000; --red-l: #ffe0e0; --red-b: #b00000; --green: #00661f; --green-l: #d9f5e1; --green-t: #004d17;
  --amber: #8a5a00; --amber-l: #fff1c2; --amber-t: #5c3c00;
}
:root[data-theme="contrast"] .btn, :root[data-theme="contrast"] input, :root[data-theme="contrast"] select { border-width: 2px; }
:root[data-theme="contrast"] a:focus-visible, :root[data-theme="contrast"] button:focus-visible { outline: 3px solid #ffd400; }

/* --- Nuc Întunecat (maro închis) --- */
:root[data-theme="nuc-noapte"] {
  --bg: #17110d; --panel: #211812; --soft: #281e17; --soft2: #31251c; --track: #3d2f24;
  --line: #352920; --line2: #2b211a; --line-strong: #4e3d30;
  --text: #f1e7dc; --text2: #cdbba8; --muted: #a08b77; --mix: #211812; --chip-text: #f7eee4; --backdrop: #000a;
  --side: #120c08; --side2: #1c140e; --side-text: #e6d8c9; --side-muted: #a28c78; --side-line: #2c2017;
  --side-hover: #1e150f; --side-active: #2e2219; --side-alert: #ff9b7f; --tag-bg: #4a2f1a;
  --acc: #d9894a; --acc-d: #e89c5e; --acc-l: #3b2617; --acc-t: #f0b37a; --acc-b: #6e4423; --today: #33231a;
  --red: #ef6a5f; --red-l: #3b1d1a; --red-b: #6d302a;
  --green: #6cc48a; --green-l: #1b2f21; --green-b: #2f5b3c; --green-t: #95dcab;
  --amber: #e8b04f; --amber-l: #352914; --amber-b: #644c21; --amber-t: #f2c983;
  --blue-l: #222630; --blue-t: #a9bad3;
  color-scheme: dark;
}

/* --- Pădure Noaptea (verde închis) --- */
:root[data-theme="padure-noapte"] {
  --bg: #0e1713; --panel: #15211b; --soft: #1a2821; --soft2: #213128; --track: #2a3d33;
  --line: #24352c; --line2: #1d2b24; --line-strong: #37503f;
  --text: #e3efe7; --text2: #b5c9bb; --muted: #86a08f; --mix: #15211b; --chip-text: #eef7f0; --backdrop: #000a;
  --side: #08110d; --side2: #101c16; --side-text: #d3e5da; --side-muted: #86a392; --side-line: #1b2c23;
  --side-hover: #12201a; --side-active: #1c3127; --side-alert: #ff8d7a; --tag-bg: #1f4a35;
  --acc: #4fbf7f; --acc-d: #66d193; --acc-l: #183526; --acc-t: #8fdcac; --acc-b: #2c6545; --today: #17301f;
  --red: #ef5f62; --red-l: #3a1d1e; --red-b: #6b2d30;
  --green: #4fbf7f; --green-l: #173222; --green-b: #285c3b; --green-t: #8fdcac;
  --amber: #e2b04c; --amber-l: #302a12; --amber-b: #5e4d1e; --amber-t: #efc77d;
  --blue-l: #1a2a2e; --blue-t: #9fc3cf;
  color-scheme: dark;
}

/* --- Miezul Nopții (bleumarin) --- */
:root[data-theme="miezul-noptii"] {
  --bg: #0d1320; --panel: #151d2d; --soft: #1a2335; --soft2: #212b40; --track: #2a364e;
  --line: #243049; --line2: #1d2639; --line-strong: #364462;
  --text: #e4ebf7; --text2: #b4c0d6; --muted: #8291ad; --mix: #151d2d; --chip-text: #eef3fb; --backdrop: #000a;
  --side: #070b14; --side2: #0f1626; --side-text: #d4ddee; --side-muted: #8796b3; --side-line: #1b2438;
  --side-hover: #111a2c; --side-active: #1c2840; --side-alert: #ff8d8d; --tag-bg: #233552;
  --acc: #5b9cf0; --acc-d: #77b0f6; --acc-l: #1b2b47; --acc-t: #9cc4f7; --acc-b: #2f4f80; --today: #192845;
  --red: #f0626b; --red-l: #3a1c24; --red-b: #6b2c38;
  --green: #4fc48a; --green-l: #15302a; --green-b: #255945; --green-t: #8adcb2;
  --amber: #e8b04f; --amber-l: #2f2915; --amber-b: #5d4b22; --amber-t: #f2c983;
  --blue-l: #1b2741; --blue-t: #a6c0ea;
  color-scheme: dark;
}

/* --- Cărbune (negru pur, ecrane OLED) --- */
:root[data-theme="carbune"] {
  --bg: #000; --panel: #0e0e0e; --soft: #151515; --soft2: #1c1c1c; --track: #262626;
  --line: #222; --line2: #191919; --line-strong: #333;
  --text: #eeeeee; --text2: #c2c2c2; --muted: #8f8f8f; --mix: #0e0e0e; --chip-text: #f5f5f5; --backdrop: #000c;
  --side: #000; --side2: #0a0a0a; --side-text: #dcdcdc; --side-muted: #8a8a8a; --side-line: #1a1a1a;
  --side-hover: #111; --side-active: #1c1c1c; --side-alert: #ff8d7a; --tag-bg: #3a2e12;
  --acc: #e8b33c; --acc-d: #f2c35a; --acc-l: #2e2410; --acc-t: #f5cf73; --acc-b: #5f4a1a; --today: #1f1a0e;
  --red: #f05a5f; --red-l: #2e1415; --red-b: #5e2427;
  --green: #4cc27a; --green-l: #10261a; --green-b: #22503a; --green-t: #7ed9a1;
  --amber: #e8b33c; --amber-l: #2e2410; --amber-b: #5f4a1a; --amber-t: #f5cf73;
  --blue-l: #141c26; --blue-t: #9db5d6;
  color-scheme: dark;
}
/* --- Panou de control (bleumarin, accent turcoaz — în stilul unui dashboard) --- */
:root[data-theme="panou"] {
  --bg: #14203a; --panel: #1b2a4a; --soft: #213358; --soft2: #283c64; --track: #2f4570;
  --line: #263b62; --line2: #20335a; --line-strong: #36507f;
  --text: #eaf1fb; --text2: #bccbe3; --muted: #8b9dc0; --mix: #1b2a4a; --chip-text: #f1f6fd; --backdrop: #000a;
  --side: #17243f; --side2: #1d2d4f; --side-text: #dce6f5; --side-muted: #8fa1c4; --side-line: #24375c;
  --side-hover: #1f3053; --side-active: #2a3f68; --side-alert: #ff8d9b; --tag-bg: #23406a;
  --acc: #1fc79a; --acc-d: #3fd6ae; --acc-l: #173d48; --acc-t: #5fe0bb; --acc-b: #22685f; --today: #1d3355;
  --red: #f2647a; --red-l: #3b1c2c; --red-b: #6b2c44;
  --green: #4fd18f; --green-l: #143a33; --green-b: #23634f; --green-t: #8be3b6;
  --amber: #f0b34a; --amber-l: #33301f; --amber-b: #64522a; --amber-t: #f5cd86;
  --blue-l: #1f3157; --blue-t: #a9c3ef;
  color-scheme: dark;
}

/* temele cu accent deschis au nevoie de text închis pe butoanele/etichetele colorate */
:root:is([data-theme="nuc-noapte"], [data-theme="padure-noapte"], [data-theme="miezul-noptii"], [data-theme="carbune"], [data-theme="panou"]) { --on-acc: #0b0f0d; }

/* elemente care depind de tema întunecată */
:root:is([data-theme="intunecat"], [data-theme="nuc-noapte"], [data-theme="padure-noapte"], [data-theme="miezul-noptii"], [data-theme="carbune"], [data-theme="panou"]) .bar { color: #1d1b19; }
:root:is([data-theme="intunecat"], [data-theme="nuc-noapte"], [data-theme="padure-noapte"], [data-theme="miezul-noptii"], [data-theme="carbune"], [data-theme="panou"]) .bar.urgent { color: #5a0d0d; }
:root:is([data-theme="intunecat"], [data-theme="nuc-noapte"], [data-theme="padure-noapte"], [data-theme="miezul-noptii"], [data-theme="carbune"], [data-theme="panou"]) .login-wrap { background: var(--panel); }
:root:is([data-theme="intunecat"], [data-theme="nuc-noapte"], [data-theme="padure-noapte"], [data-theme="miezul-noptii"], [data-theme="carbune"], [data-theme="panou"]) :is(img, input[type=color]) { filter: none; }

.logout.prefs { color: var(--side-text); margin-bottom: 0; }
.logout.prefs svg { color: var(--acc-t); }
.logout.prefs:hover { background: var(--side-hover); }
.logout.prefs + .logout { border-top: 0; margin-top: 0.125rem; }
.settings-theme { flex-basis: 100%; }

/* ---------- procese + meșteri în formularul de comandă / produs */
.flow-plan { display: grid; gap: 0.5rem; }
.flow-row { display: grid; grid-template-columns: auto minmax(0, 1.2fr) 6.5rem minmax(0, 1fr); gap: 0.25rem 0.625rem; align-items: center;
  padding: 0.5rem 0.625rem; border: 1px solid var(--line); border-radius: 0.625rem; background: var(--soft); }
.flow-row .pchip { border: 0; background: none; padding: 0; min-width: 0; flex-wrap: wrap; }
.flow-row > * { min-width: 0; }
.flow-row select.flow-worker { max-width: 100%; text-overflow: ellipsis; }
.flow-row select.flow-worker { width: 100%; padding: 0.4rem 0.5rem; font-size: 0.84rem; }
.flow-res { grid-column: 1 / -1; font-size: 0.8rem; color: var(--text2); padding-left: 1.6rem; }
.flow-res:empty { display: none; }
.flow-move { display: inline-flex; gap: 2px; }
.flow-move .mv { width: 1.75rem; height: 1.75rem; padding: 0; border: 1px solid var(--line); border-radius: 0.375rem;
  background: var(--panel); color: var(--text2); cursor: pointer; font-size: 0.875rem; line-height: 1; }
.flow-move .mv:hover { border-color: var(--acc); color: var(--acc); }
.flow-row:first-of-type .mv[data-mv="-1"], .flow-row:last-of-type .mv[data-mv="1"] { visibility: hidden; }
.flow-hours { flex-direction: row; align-items: center; gap: 0.25rem; font-weight: 500; }
.flow-hours input { width: 100%; min-width: 0; padding: 0.35rem 0.45rem; font-size: 0.84rem; }
.flow-hours input:disabled { opacity: .5; }
.flow-row.moved { background: var(--acc-l); transition: background .4s; border-radius: 0.5rem; }
.flow-help { margin: 0.25rem 0 0.5rem; }
.pc-move { display: inline-flex; flex-direction: column; gap: 2px; }
.pc-move form { margin: 0; }
.pc-move .mv { width: 1.5rem; height: 1.25rem; padding: 0; border: 1px solid var(--line); border-radius: 0.3rem; background: var(--panel);
  color: var(--text2); cursor: pointer; font-size: 0.75rem; line-height: 1; }
.pc-move .mv:hover { border-color: var(--acc); color: var(--acc); }
@media (pointer: coarse) { .pc-move .mv { width: 2rem; height: 1.75rem; } }
.hours-box .inline { align-items: flex-end; gap: 0.625rem; } .hours-box input { width: 7rem; }
.flow-res.redirected { color: var(--amber-t); }
.flow-note { font-weight: 600; }
.flow-row.off { opacity: .5; }
.flow-row.off .flow-res { display: none; }
.flow-summary { margin-top: 0.75rem; display: grid; gap: 0.4rem; }
.flow-summary .flash { margin: 0; }
@media (max-width: 760px) {
  .flow-row { grid-template-columns: auto minmax(0, 1fr) 5.5rem; }
  .flow-row .flow-worker { grid-column: 1 / -1; }
  .flow-move .mv { width: 2.25rem; height: 2.25rem; }
}

/* ---------- ocupare meșteri */
.util-panel { padding: 0.875rem 1.25rem; }
.util-panel > summary { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; cursor: pointer; list-style: none; }
.util-panel > summary::before { content: "▸"; color: var(--acc); transition: transform .15s; }
.util-panel[open] > summary::before { transform: rotate(90deg); }
.util-panel > summary .btn { margin-left: auto; }
.util-avg { font-family: var(--mono); font-weight: 800; font-size: 0.8rem; padding: 0.15rem 0.5rem; border-radius: 0.4rem; }
.util-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: 0.625rem; margin-top: 0.875rem; }
.util-card { border: 1px solid var(--line); border-radius: 0.75rem; padding: 0.625rem 0.75rem; background: var(--soft); }
.util-card .u-head { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; }
.util-card .u-head b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.util-card .u-pct { font-family: var(--mono); font-weight: 800; }
.u-bar { height: 0.4rem; border-radius: 9px; background: var(--track); overflow: hidden; margin: 0.4rem 0; }
.u-bar i { display: block; height: 100%; border-radius: 9px; }
.u-meta { color: var(--text2); line-height: 1.4; }
.u-meta .idle { color: var(--amber-t); }
.lvl-low .u-bar i, .util-avg.lvl-low { background: var(--red); color: #fff; }
.lvl-mid .u-bar i, .util-avg.lvl-mid { background: var(--amber); color: #fff; }
.lvl-high .u-bar i, .util-avg.lvl-high { background: var(--green); color: #fff; }
.util-card.lvl-low { border-color: var(--red-b); background: var(--red-l); }
.util-card.lvl-low .u-pct { color: var(--red); }
.util-card.lvl-off { opacity: .6; }
/* ---------- procese tehnologice — grilă */
.proc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(21rem, 1fr)); gap: 1rem; }
.proc-card { position: relative; display: flex; flex-direction: column; gap: 0.75rem; padding: 1rem 1.1rem 0.9rem;
  border: 1px solid var(--line); border-top: 0.3rem solid var(--c); border-radius: 0.875rem; background: var(--panel);
  transition: box-shadow .15s, transform .15s; }
.proc-card:hover { box-shadow: 0 0.4rem 1.2rem #0000001a; transform: translateY(-1px); }
.proc-card.warn-card { border-color: var(--red-b); border-top-color: var(--red); }
.proc-card header { display: flex; align-items: flex-start; gap: 0.75rem; }
.pc-step { width: 2.4rem; height: 2.4rem; flex: none; border-radius: 0.6rem; display: grid; place-items: center;
  font-weight: 800; font-size: 1.05rem; background: color-mix(in srgb, var(--c) 55%, var(--mix)); color: var(--chip-text); }
.pc-title { flex: 1; min-width: 0; }
.pc-title h4 { margin: 0.1rem 0 0; font-size: 1.02rem; line-height: 1.25; }
.pc-hours { font-family: var(--mono); font-weight: 800; font-size: 1.35rem; color: var(--acc); line-height: 1; white-space: nowrap; }
.pc-hours small { font-size: 0.75rem; margin-left: 0.1rem; color: var(--muted); }
.pc-desc { margin: 0; color: var(--text2); font-size: 0.86rem; line-height: 1.4; }
.pc-sec { display: grid; gap: 0.3rem; }
.pcg-lbl { font-size: 0.7rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 700; }
.pc-chips { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.pc-chip { font-size: 0.78rem; padding: 0.18rem 0.55rem; border-radius: 99px; background: var(--soft2); color: var(--text2); white-space: nowrap; }
.pc-chip.off { opacity: .55; text-decoration: line-through; }
.pc-chip.danger { background: var(--red-l); color: var(--red); font-weight: 700; }
.proc-card footer { margin-top: auto; padding-top: 0.7rem; border-top: 1px solid var(--line2); display: flex; align-items: center;
  justify-content: space-between; gap: 0.5rem; }
.pc-stats { display: flex; flex-wrap: wrap; gap: 0.2rem 0.75rem; font-size: 0.78rem; color: var(--text2); }
.pc-stats b { font-family: var(--mono); color: var(--text); }
.add-card { align-items: center; justify-content: center; min-height: 12rem; border: 2px dashed var(--line-strong);
  border-top-width: 2px; color: var(--muted); font-weight: 700; text-decoration: none; background: var(--soft); }
.add-card span { font-size: 2rem; line-height: 1; color: var(--acc); }
.add-card:hover { color: var(--acc); border-color: var(--acc); }
/* vedere listă compactă */
.proc-grid.as-list { grid-template-columns: 1fr; gap: 0.5rem; }
.proc-grid.as-list .proc-card { flex-direction: row; flex-wrap: wrap; align-items: center; border-top-width: 1px;
  border-left: 0.3rem solid var(--c); padding: 0.6rem 0.9rem; gap: 0.4rem 1rem; }
.proc-grid.as-list .proc-card header { flex: 1 1 18rem; align-items: center; }
.proc-grid.as-list .pc-desc { display: none; }
.proc-grid.as-list .pc-sec { flex: 1 1 13rem; }
.proc-grid.as-list .proc-card footer { flex: 1 1 100%; border: 0; padding-top: 0; }
.proc-grid.as-list .add-card { min-height: 3rem; flex-direction: row; gap: 0.5rem; }
.proc-grid.as-list .add-card span { font-size: 1.3rem; }

td.quals { min-width: 8rem; }
td.quals .chip { margin: 0.1rem 0.15rem 0.1rem 0; }
.u-help { margin-top: 0.35rem; padding-top: 0.35rem; border-top: 1px dashed var(--line-strong); color: var(--text2); }
.util-mini { display: inline-flex; align-items: center; gap: 0.4rem; font-family: var(--mono); font-size: 0.8rem; }
.util-mini .u-bar { width: 4.5rem; margin: 0; }

/* ---------- comandă nouă cu mai multe produse */
.order-new h3 { margin-top: 1.25rem; }
.items-head { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; }
.items-head h3 { display: flex; align-items: center; gap: 0.5rem; }
#itemsBox { display: grid; gap: 0.875rem; }
.item-card { border: 1px solid var(--line-strong); border-left: 4px solid var(--acc); border-radius: 0.875rem; padding: 0.875rem 1rem; background: var(--panel); }
.item-card header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.625rem; }
.item-card .item-no { font-weight: 800; color: var(--acc); font-size: 1rem; }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.625rem 0.875rem; }
.grid3 .span2 { grid-column: span 2; }
.grid3 input, .grid3 select { width: 100%; }
.flow-details { margin-top: 0.75rem; }
.flow-details > summary { cursor: pointer; font-weight: 700; color: var(--acc-d); margin-bottom: 0.5rem; }
.add-item-bottom { width: 100%; justify-content: center; margin-top: 0.75rem; border-style: dashed; }
.order-total { margin-top: 0.875rem; }
#formDlg:has(.order-new) { width: min(70rem, 96vw); }
@media (max-width: 900px) { .grid3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .grid3 { grid-template-columns: 1fr; } .grid3 .span2 { grid-column: auto; } }

/* ---------- utilizatori & roluri */
.role-legend { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 0.625rem; margin-bottom: 1.25rem; }
.role-legend .rl { display: flex; align-items: center; gap: 0.625rem; padding: 0.625rem 0.75rem; border: 1px solid var(--line); border-radius: 0.75rem; background: var(--soft); font-size: 0.84rem; color: var(--text2); }
.role-pill { display: inline-block; flex: none; font-family: var(--mono); font-size: 0.75rem; font-weight: 800; letter-spacing: .03em; padding: 0.2rem 0.55rem; border-radius: 0.4rem; }
.r-admin { background: var(--acc); color: var(--on-acc); }
.r-tehnician { background: var(--blue-l); color: var(--blue-t); }
.r-operator { background: var(--green-l); color: var(--green-t); }
.users-tbl td { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.user-cell { display: flex; align-items: center; gap: 0.75rem; min-width: 14rem; }
.avatar { width: 2.5rem; height: 2.5rem; flex: none; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 0.9rem; }
.avatar.r-admin { box-shadow: 0 0 0 3px var(--acc-l); }
.you { font-size: 0.75rem; color: var(--acc); font-weight: 600; }
.ta-r { text-align: right; }
tr.inactive-row td { opacity: .55; }
tr.inactive-row td:last-child { opacity: 1; }
.bar { color: #1d1b19; }

/* previzualizare teme (preferințe) */
.theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: 0.75rem; }
.theme-card { position: relative; cursor: pointer; border: 2px solid var(--line); border-radius: 0.75rem; padding: 0.5rem; background: var(--panel); }
.theme-card:has(input:checked) { border-color: var(--acc); box-shadow: 0 0 0 3px var(--acc-l); }
.theme-card input { position: absolute; opacity: 0; }
.theme-card .tp { display: flex; height: 4.2rem; border-radius: 0.5rem; overflow: hidden; border: 1px solid #0002; }
.theme-card .tp i { display: block; }
.theme-card .tp .s { width: 28%; }
.theme-card .tp .m { flex: 1; padding: 0.4rem; display: flex; flex-direction: column; gap: 0.3rem; }
.theme-card .tp .m b { height: 0.5rem; border-radius: 3px; display: block; }
.theme-card .tn { display: block; margin-top: 0.4rem; font-weight: 700; font-size: 0.85rem; color: var(--text); }
.theme-card .td { display: block; font-size: 0.75rem; color: var(--muted); font-weight: 500; }

* { box-sizing: border-box; }
html, body { margin: 0; }
body { font: 0.9375rem/1.45 "Segoe UI", system-ui, -apple-system, Roboto, sans-serif; color: var(--text); background: var(--bg); }
a { color: var(--acc); text-decoration: none; }
h2 { font-size: 1.125rem; margin: 0 0 0.25rem; } h3 { font-size: 1rem; margin: 1.125rem 0 0.5rem; } h4 { margin: 0.25rem 0 0.375rem; font-size: 0.9375rem; }
.mono { font-family: var(--mono); } .muted { color: var(--muted); } .small { font-size: 0.7812rem; }
.red { color: var(--red); } .green { color: var(--green); } .amber { color: var(--amber); } .nowrap { white-space: nowrap; }
svg { width: 1.375rem; height: 1.375rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
svg.i { width: 1.125rem; height: 1.125rem; }

/* ---------- layout */
.layout { display: flex; min-height: 100vh; }
.sidebar { width: 22.625rem; flex: none; background: var(--side); color: var(--side-text); position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.brand { display: flex; align-items: baseline; justify-content: space-between; padding: 1.875rem 2.25rem 1.625rem 0.875rem; border-bottom: 1px solid var(--side-line); }
.brand span { font-weight: 800; font-size: 1.4375rem; color: #fff; letter-spacing: -.3px; }
.brand small { font-family: var(--mono); color: var(--acc-t); font-size: 0.8125rem; letter-spacing: .5px; }
.usercard { margin: 1.125rem 1.125rem 1.375rem 0; padding: 1.25rem 1.25rem 1rem 1.125rem; border: 1px solid var(--side-line); border-left: 0; border-radius: 0 0.875rem 0.875rem 0; background: var(--side2); }
.u-top { display: flex; justify-content: space-between; align-items: center; color: #fff; font-size: 1.0625rem; }
.tag { font-family: var(--mono); font-size: 0.75rem; color: var(--acc-t); background: var(--tag-bg); padding: 3px 0.5rem; border-radius: 0.375rem; font-style: normal; }
.u-desc { color: var(--side-muted); font-size: 0.9062rem; margin: 0.5rem 0 0.75rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--side-line); }
.roletest { display: flex; align-items: center; gap: 0.25rem; color: var(--side-muted); font-size: 0.9062rem; }
.roletest span { margin-right: auto; }
.roletest form { margin: 0; }
.roletest button { background: none; border: 0; color: var(--side-muted); padding: 0.3125rem 0.5625rem; border-radius: 0.375rem; cursor: pointer; font: inherit; }
.roletest button.on { background: var(--acc); color: var(--on-acc); font-weight: 700; }
nav a { display: flex; align-items: center; gap: 0.875rem; padding: 0.9375rem 1.125rem 0.9375rem 1rem; margin: 2px 1.125rem 2px 0; color: var(--side-text); border-radius: 0 0.75rem 0.75rem 0; font-size: 1.0938rem; }
nav a svg { color: var(--acc-t); }
nav a span { flex: 1; }
nav a em { font-style: normal; color: var(--side-muted); font-size: 0.9375rem; }
nav a em.alert { color: var(--side-alert); font-weight: 700; }
nav a:hover { background: var(--side-hover); }
nav a.active { background: var(--side-active); color: #fff; }
main { flex: 1; min-width: 0; }
.topbar { display: flex; justify-content: space-between; align-items: center; gap: 0.875rem; padding: 1.375rem 2.25rem; background: var(--panel); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 30; flex-wrap: wrap; }
.crumb { color: var(--muted); font-size: 1.0938rem; font-weight: 600; }
.crumb b { color: var(--text); }
.actions { display: flex; gap: 0.875rem; flex-wrap: wrap; }
.content { padding: 2.25rem; max-width: 106.25rem; }

/* ---------- controls */
.btn { display: inline-flex; align-items: center; gap: 0.5rem; border: 1px solid var(--line); background: var(--soft); color: var(--text); padding: 0.6875rem 1.25rem; border-radius: 0.625rem; font: 600 0.9688rem/1.2 inherit; font-family: inherit; cursor: pointer; white-space: nowrap; }
.btn:hover { background: var(--soft2); }
.btn.primary { background: var(--acc); border-color: var(--acc); color: var(--on-acc); }
.btn.primary:hover { background: var(--acc-d); }
.btn.ghost { background: var(--panel); font-weight: 500; }
.btn.danger { background: var(--red-l); color: var(--red); border-color: var(--red-b); }
/* consum materiale (formular proces simplificat) */
.mat-pick { margin-top: 1rem; padding: 0.875rem 1rem; border: 1px solid var(--line); border-radius: 0.75rem; display: flex; flex-direction: column; gap: 0.625rem; align-items: flex-start; }
.mp-rows { display: flex; flex-direction: column; gap: 0.5rem; width: 100%; }
.mp-rows:empty { display: none; }
.mp-row { display: grid; grid-template-columns: minmax(0, 1fr) 7rem auto; gap: 0.5rem; align-items: center; }
/* mod test (demo) */
.demo-flag { margin-left: 0.75rem; padding: 0.25rem 0.75rem; border-radius: 99rem; background: var(--acc); color: var(--on-acc) !important;
  font-size: 0.75rem; font-weight: 700; letter-spacing: .5px; white-space: nowrap; text-decoration: none; }
.demo-box { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; padding: 1.125rem 1.25rem;
  margin-bottom: 1.25rem; border: 1px dashed var(--line); border-radius: 0.875rem; background: var(--soft2); }
.demo-box.on { border: 1px solid var(--acc); background: var(--acc-l); }
.demo-box > div { flex: 1 1 26rem; }
.demo-box h3 { display: flex; align-items: center; gap: 0.625rem; margin: 0 0 0.375rem; }
.demo-box p { margin: 0; }
.demo-box .pill.warn { background: var(--acc); color: var(--on-acc); }
.db-box { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; padding: 1.125rem 1.25rem;
  margin-bottom: 1.25rem; border: 1px dashed var(--line); border-radius: 0.875rem; background: var(--soft2); }
.db-box > div:first-child { flex: 1 1 26rem; }
.db-box > div:first-child { min-width: 0; }
.backup-box .mono, .db-box .mono { overflow-wrap: anywhere; word-break: break-all; }
@media (max-width: 760px) { .db-box > div:first-child { flex-basis: 100%; } .db-box .db-actions { width: 100%; } }
.backup-box .pill.warn { background: var(--amber-l); color: var(--amber-t); }
.backup-box .backup-dir { margin-top: 0.5rem; align-items: flex-end; }
.text-red { color: var(--red); }
/* Progres Hală: filtre, carduri compacte, liste pe un rând */
.pfilters { display: flex; flex-wrap: wrap; gap: 0.5rem 0.75rem; align-items: center; margin: 0 0 1rem; }
.pfilters select, .pfilters input[type=search] { min-width: 0; max-width: 100%; }
.pfilters input[type=search] { flex: 1 1 14rem; }
.progres-panel .kanban-col { gap: 0.5rem; }
.kgroup { margin: 0.25rem 0 0; font-size: 0.8125rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text2); }
.pcard { background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--c); border-radius: 0.625rem;
  padding: 0.625rem 0.75rem; display: grid; gap: 0.25rem; min-width: 0; }
.pcard[hidden] { display: none; }
.pcard header { display: flex; justify-content: space-between; gap: 0.5rem; align-items: baseline; min-width: 0; }
.pcard .pc-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.9375rem; }
.pc-code { font-family: var(--mono); font-size: 0.75rem; font-weight: 700; padding: 0 0.3rem; border-radius: 0.25rem;
  background: color-mix(in srgb, var(--c) 45%, transparent); color: var(--text); }
.pc-order { flex: none; font-size: 0.75rem; color: var(--muted); }
.pcard p { margin: 0; font-size: 0.8125rem; color: var(--text2); overflow-wrap: anywhere; }
.pc-who { color: var(--muted) !important; } .pc-site { color: var(--acc-d) !important; font-weight: 600; }
.pcard footer { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.125rem; }
.pc-when { font-size: 0.8125rem; color: var(--text2); font-family: var(--mono); }
.pc-actions { display: inline-flex; gap: 0.375rem; margin: 0; }
.pc-slider { display: flex; align-items: center; gap: 0.625rem; margin: 0.25rem 0 0; }
.pc-slider .progress-range { flex: 1; }
.pc-slider b { font-family: var(--mono); font-size: 0.8125rem; min-width: 2.75rem; text-align: right; }
.pcard.urgent-card { border-color: var(--red); border-left-color: var(--red); background: var(--red-l); }
.klist { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.375rem; }
.prow { display: flex; align-items: center; gap: 0.5rem; padding: 0.375rem 0.5rem 0.375rem 0.625rem; font-size: 0.8125rem; }
.prow .pr-main { flex: 1; min-width: 0; display: grid; gap: 1px; }
.prow .pr-main b, .prow .pr-main small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prow .pr-main small { font-size: 0.75rem; }
.prow .prog-box { margin: 0; flex: none; }
.prow.done { opacity: .85; } .prow .ok { color: var(--green); font-weight: 700; }
.prow .warn { color: var(--amber-t); }
.kblocked { border: 1px dashed var(--line); border-radius: 0.625rem; padding: 0.5rem 0.625rem; background: var(--soft); }
.kblocked > summary { cursor: pointer; font-weight: 600; font-size: 0.875rem; color: var(--text2); }
.kblocked[open] > summary { margin-bottom: 0.5rem; }
/* Calendar (Gantt): bară de unelte, legendă, rânduri compacte */
.gantt-toolbar { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.75rem; }
.gantt-toolbar .tb-row { min-width: 0; }
.gantt-toolbar .tb-row { display: flex; flex-wrap: wrap; gap: 0.75rem 1.25rem; align-items: flex-end; }
.gantt-toolbar .tb-field { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.gantt-toolbar .tb-grow { flex: 1 1 14rem; } .gantt-toolbar .tb-grow select { width: 100%; }
@media (max-width: 760px) {
  /* telefon: fiecare grup de butoane pe toată lățimea; butoanele de vedere derulează orizontal */
  .gantt-toolbar .tb-field, .gantt-toolbar .tb-row > .btn { width: 100%; min-width: 0; }
  .gantt-toolbar .seg { max-width: 100%; }
  .gantt-toolbar .navdate { width: 100%; } .gantt-toolbar .navdate #todayBtn { flex: 1; }
  .gantt-legend { padding: 0.5rem 0.75rem; font-size: 0.75rem; gap: 0.25rem 0.625rem; }
  .gantt-legend .nm { display: none; }  /* pe telefon: doar codurile proceselor (numele la atingere) */
}
.gantt-toolbar .tb-label { font-size: 0.75rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.gantt-head h3 { display: inline; margin: 0; font-size: 1.0625rem; }
.gantt-legend { display: flex; flex-wrap: wrap; gap: 0.375rem 0.875rem; padding: 0.5rem 1.125rem 0.75rem; font-size: 0.8125rem; color: var(--text2); }
.gantt-legend:empty { display: none; }
.lg-proc, .lg-mark { display: inline-flex; align-items: center; gap: 0.375rem; white-space: nowrap; }
.lg-proc i { width: 0.875rem; height: 0.875rem; border-radius: 0.25rem; background: var(--c); }
.lg-mark i { width: 1rem; height: 0.875rem; display: inline-block; }
.lg-now { border-left: 2px solid var(--acc); } .lg-dl { border-left: 2px dashed var(--red); }
.lg-wk { background: var(--soft); border: 1px solid var(--line); border-radius: 2px; }
.lg-done { background: var(--soft2); border-radius: 0.25rem; opacity: .6; }
.g-day i { font-style: normal; font-size: 0.6875rem; font-weight: 700; color: var(--acc-d); text-transform: uppercase; }
.g-day.m1 { border-left: 2px solid var(--acc-b); }
.g-compact .g-left { align-items: center; }
.g-compact .g-title small { margin-top: 1px; }
.g-compact .mini { display: block; width: 100%; max-width: 12rem; margin-top: 0.375rem; }
.g-compact.late .g-left { box-shadow: inset 0.25rem 0 0 var(--red); }
.g-compact.risk .g-left { box-shadow: inset 0.25rem 0 0 var(--amber); }
.g-swatch { display: inline-block; width: 0.75rem; height: 0.75rem; border-radius: 0.2rem; background: var(--c); margin-right: 0.375rem; vertical-align: middle; }
.g-out { align-self: center; padding-left: 0.875rem; font-size: 0.8125rem; color: var(--muted); }
/* Primii pași */
.setup-steps .steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 0.5rem; }
.setup-steps li { display: flex; align-items: center; gap: 0.625rem; padding: 0.5rem 0.75rem; border: 1px solid var(--line); border-radius: 0.625rem; background: var(--soft); }
.setup-steps li a:not(.btn) { color: inherit; text-decoration: none; flex: 1; min-width: 0; }
.setup-steps li small { display: block; color: var(--muted); font-size: 0.75rem; }
.setup-steps .st { flex: none; width: 1.75rem; height: 1.75rem; border-radius: 50%; display: grid; place-items: center; font-weight: 700;
  background: var(--soft2); color: var(--text2); }
.setup-steps li.ok { opacity: .7; } .setup-steps li.ok .st { background: var(--green); color: #fff; }
.setup-steps li.next { border-color: var(--acc); background: var(--acc-l); } .setup-steps li.next .st { background: var(--acc); color: var(--on-acc); }
/* Progres Hală: 3 coloane (În așteptare / În lucru / Gata) */
.kanban { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; align-items: start; }
.kanban-col { background: var(--soft2); border-radius: var(--radius); padding: 0.75rem; display: grid; gap: 0.75rem; min-width: 0;
  border-top: 4px solid var(--muted); }
.kanban-col.col-asteptare { border-top-color: var(--amber); }
.kanban-col.col-lucru { border-top-color: var(--acc); }
.kanban-col.col-gata { border-top-color: var(--green); }
.kanban-col > header h3 { margin: 0; display: flex; align-items: center; gap: 0.5rem; }
.kanban-col > header p { margin: 0.125rem 0 0; }
.kanban-col .taskcard { background: var(--panel); padding: 0.875rem; }
.kanban-col .empty { margin: 0; padding: 0.75rem; text-align: center; }
.seg.kanban-tabs { display: none; margin-bottom: 0.75rem; }
@media (max-width: 1100px) and (min-width: 761px) { .kanban { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kanban-col.col-gata { grid-column: 1 / -1; } }
@media (max-width: 760px) {
  .seg.kanban-tabs { display: flex; }
  .kanban { grid-template-columns: minmax(0, 1fr); }
  .kanban-col { display: none; } .kanban-col.on { display: grid; }
}
/* selectorul de culoare: un pătrat, nu o bară pe toată lățimea */
.grid2 input[type=color], .grid3 input[type=color], input[type=color] { width: 4.5rem; max-width: 4.5rem; height: 2.5rem; cursor: pointer; }
.modal-actions .delete-btn { margin-right: auto; }
.kind-pill { display: inline-block; margin: 0.25rem 0.25rem 0 0; padding: 1px 0.5rem; border-radius: 99px; font-size: 0.75rem;
  font-weight: 600; background: var(--soft2); color: var(--text2); }
.kind-pill.k-masuratori { background: #dcebf7; color: #1f4e79; } .kind-pill.k-livrare { background: #f6e7d6; color: #7a4a17; }
.kind-pill.k-montaj { background: #e3f1da; color: #2f5f1d; }
.stage-suggest { align-items: center; flex-wrap: wrap; }
.multi-new { display: block; margin-top: 0.625rem; } .multi-new input { width: 100%; max-width: 30rem; display: block; }
/* Panou Administrare → Stare sistem */
.sys-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr)); gap: 1rem; }
.sys-card { border: 1px solid var(--line); border-radius: 0.875rem; padding: 1rem 1.125rem; background: var(--panel);
  border-top: 4px solid var(--muted); min-width: 0; }
.sys-card header { display: flex; align-items: center; gap: 0.5rem; }
.sys-card h3 { margin: 0; font-size: 1rem; }
.sys-card .dot { width: 0.75rem; height: 0.75rem; border-radius: 50%; background: var(--muted); flex: none; }
.sys-card.lvl-ok { border-top-color: var(--green); } .sys-card.lvl-ok .dot { background: var(--green); box-shadow: 0 0 0 4px var(--green-l); }
.sys-card.lvl-warn { border-top-color: var(--amber); } .sys-card.lvl-warn .dot { background: var(--amber); box-shadow: 0 0 0 4px var(--amber-l); }
.sys-card.lvl-bad { border-top-color: var(--red); } .sys-card.lvl-bad .dot { background: var(--red); box-shadow: 0 0 0 4px var(--red-l); }
.sys-head { margin: 0.625rem 0; overflow-wrap: anywhere; }
.sys-rows > div { display: flex; justify-content: space-between; gap: 0.75rem; padding: 0.3125rem 0; border-top: 1px dashed var(--line2); font-size: 0.875rem; }
.sys-rows span { color: var(--muted); flex: none; }
.sys-rows b { font-weight: 600; text-align: right; overflow-wrap: anywhere; min-width: 0; }
.sys-h { margin: 1.5rem 0 0.625rem; }
.db-box h3 { margin: 0 0 0.375rem; }
.db-box p { margin: 0 0 0.375rem; }
.db-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 0.625rem; }
.db-actions form { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.db-actions input[type=file] { max-width: 16rem; font-size: 0.85rem; }
.btn.sm { padding: 0.375rem 0.75rem; font-size: 0.8438rem; border-radius: 0.5rem; }
.btn.wide { width: 100%; justify-content: center; }
input, select, textarea { font: inherit; padding: 0.5625rem 0.75rem; border: 1px solid var(--line-strong); border-radius: 0.5625rem; background: var(--panel); color: var(--text); min-width: 0; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--acc-b); border-color: var(--acc); }
input[type=checkbox] { width: 1.0625rem; height: 1.0625rem; accent-color: var(--acc); }
input[type=color] { padding: 2px; height: 2.5rem; }
label { display: flex; flex-direction: column; gap: 0.3125rem; font-size: 0.8438rem; color: var(--text2); font-weight: 600; }
label.check { flex-direction: row; align-items: center; gap: 0.5625rem; font-weight: 500; color: var(--text); }
.w80 { width: 5rem; } .w140 { width: 8.75rem; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0.875rem 1.125rem; }
.grid2 .span2 { grid-column: span 2; }
.grid2 > label { min-width: 0; }
.grid2 input, .grid2 select, .grid2 textarea { width: 100%; }
/* bifele nu se întind niciodată ca un câmp de text (regulile de lățime de mai sus le-ar centra într-o căsuță lată) */
.grid2 input[type=checkbox], .grid3 input[type=checkbox], .grid2 input[type=radio], .grid3 input[type=radio],
label.check > input[type=checkbox] { width: 1.0625rem; height: 1.0625rem; flex: none; margin: 0; padding: 0; }
label.check { text-align: left; justify-content: flex-start; }
.checks { align-items: start; }
.modal { overflow-x: hidden; }
.checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr)); gap: 0.5rem; }
form.inline { display: inline-flex; gap: 0.5rem; align-items: center; margin: 0; }
form.inline.wrap { flex-wrap: wrap; align-items: flex-end; }

/* ---------- panels */
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 1.125rem; padding: 1.5rem; margin-bottom: 1.5rem; }
.panel.empty { text-align: center; color: var(--muted); }
.panel-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 1.125rem; }
.panel-head p { margin: 0; }
.toolbar { display: flex; justify-content: space-between; align-items: flex-start; gap: 1.125rem; flex-wrap: wrap; }
.seg { display: inline-flex; align-items: center; gap: 3px; background: var(--soft2); border-radius: 0.75rem; padding: 0.25rem; width: fit-content; }
.seg button, .seg a { border: 0; background: none; padding: 0.5rem 0.9375rem; border-radius: 0.5625rem; font: inherit; font-size: 1rem; color: var(--text2); cursor: pointer; }
.seg.mono button { font-family: var(--mono); font-size: 0.9062rem; font-weight: 700; padding: 0.4375rem 0.75rem; }
.seg span { font-family: var(--mono); font-size: 0.8438rem; color: var(--muted); padding: 0 0.625rem; }
.seg .on { background: var(--panel); color: var(--text); box-shadow: 0 1px 2px #0000001a; }
.navdate { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 0.75rem; overflow: hidden; }
.navdate button { border: 0; background: var(--panel); color: var(--text); padding: 0.625rem 1rem; font: 700 1rem inherit; font-family: inherit; cursor: pointer; }
.navdate button:hover { background: var(--soft2); }
.filters { display: flex; gap: 0.75rem; flex-wrap: wrap; align-items: center; margin: 0; }

.flash { padding: 0.75rem 1rem; border-radius: 0.625rem; margin-bottom: 0.75rem; display: flex; justify-content: space-between; gap: 0.75rem; background: var(--soft2); border: 1px solid var(--line); }
.flash.weak-pw { display: block; }
.flash button { border: 0; background: none; font-size: 1.125rem; cursor: pointer; color: inherit; }
.flash.success { background: var(--green-l); border-color: var(--green-b); color: var(--green-t); }
.flash.error { background: var(--red-l); border-color: var(--red-b); color: var(--red); }
.flash.warning { background: var(--amber-l); border-color: var(--amber-b); color: var(--amber-t); }
.flash.info { background: var(--acc-l); border-color: var(--acc-b); color: var(--acc-d); }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(13.75rem, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.stat { background: var(--panel); border: 1px solid var(--line); border-radius: 1rem; padding: 1.125rem 1.25rem; }
.stat span { display: block; color: var(--muted); font-size: 0.8125rem; }
.stat b { font-size: 1.5rem; }
.stat.alert { background: var(--red-l); border-color: var(--red-b); } .stat.alert b { color: var(--red); }

/* ---------- tables */
.tbl { width: 100%; border-collapse: collapse; }
.tbl th { text-align: left; font-size: 0.7812rem; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); font-weight: 600; padding: 0.625rem; border-bottom: 1px solid var(--line); }
.tbl td { padding: 0.75rem 0.625rem; border-bottom: 1px solid var(--line2); vertical-align: middle; }
.tbl.compact td { padding: 0.4375rem 0.625rem; font-size: 0.875rem; }
.tbl tr.lowrow td { background: var(--red-l); }
.pill { display: inline-block; padding: 3px 0.625rem; border-radius: 6.1875rem; font-size: 0.7812rem; font-weight: 600; background: var(--soft2); }
.p-activ { background: var(--green-l); color: var(--green); }
.p-concediu { background: var(--amber-l); color: var(--amber); }
.p-repaus { background: var(--blue-l); color: var(--blue-t); }
.p-mentenanță { background: var(--amber-l); color: var(--amber); }
.p-defect { background: var(--red-l); color: var(--red); }
.mini { display: inline-block; width: 4.375rem; height: 0.375rem; background: var(--track); border-radius: 0.5625rem; overflow: hidden; vertical-align: middle; }
.mini i { display: block; height: 100%; background: var(--acc); }
.mini.low i { background: var(--red); }
.chip { display: inline-block; font-family: var(--mono); font-size: 0.75rem; font-weight: 700; padding: 2px 0.5rem; border-radius: 0.375rem; background: color-mix(in srgb, var(--c) 45%, var(--mix)); color: var(--chip-text); }
.warn { color: var(--red); }

/* ---------- Administrare → Date & copii: trei carduri (copiile automate pe toată lățimea, apoi export și mod test) */
.data-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: 1rem; }
.data-cards > .demo-box, .data-cards > .db-box { margin: 0; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0.875rem; }
.data-cards > div > div:first-child { flex: none; }
.data-cards .backup-box { order: -1; grid-column: 1 / -1; }
.data-cards .backup-box { flex-direction: row; align-items: flex-start; }
.data-cards .backup-box > div:first-child { flex: 1 1 26rem; }
.data-cards .db-actions { margin-top: auto; }
@media (max-width: 760px) { .data-cards .backup-box { flex-direction: column; } }
/* ---------- Server & securitate: bara de deblocare, sub-taburi, „Prezentare” cu carduri de stare */
.root-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: 0.875rem 1.125rem;
  border: 1px solid var(--line); border-radius: 1rem; background: var(--panel); margin-bottom: 1rem; }
.root-bar.open { border-color: var(--amber-b); background: var(--amber-l); }
.rb-state { display: flex; flex-direction: column; gap: 0.125rem; min-width: 0; }
.root-alerts { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1rem; }
.root-alerts .flash { margin: 0; }
.root-subtabs { margin-top: 0; }
[data-rpanel][hidden] { display: none !important; }
.rp-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 0.875rem; }
.rp-tile { --st: var(--green); position: relative; display: flex; flex-direction: column; gap: 0.3125rem; padding: 1rem 1.125rem;
  border: 1px solid var(--line); border-radius: 1rem; background: var(--panel); color: var(--text); text-decoration: none; min-width: 0; }
.rp-tile:hover { border-color: var(--line-strong); box-shadow: 0 2px 10px #0000000f; }
.rp-tile.warn { --st: var(--amber); }
.rp-tile.bad { --st: var(--red); border-color: var(--red-b); }
.rp-tile h3 { margin: 0; font-size: 0.75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text2); }
.rp-tile b { font-size: 1.1875rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp-tile small { color: var(--muted); overflow-wrap: anywhere; line-height: 1.35; }
.rp-dot { position: absolute; top: 1.0625rem; right: 1.125rem; width: 0.625rem; height: 0.625rem; border-radius: 50%; background: var(--st);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--st) 22%, transparent); }

/* Server & securitate → Server */
.srv-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; align-items: start; }
.srv-grid > .panel { margin: 0; }
.srv-wide { grid-column: 1 / -1; }
.srv-card h3 { margin: 0 0 0.875rem; }
.srv-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.625rem; margin-bottom: 0.875rem; }
.srv-stats div { background: var(--soft); border-radius: 0.75rem; padding: 0.625rem 0.75rem; display: flex; flex-direction: column; min-width: 0; }
.srv-stats small { color: var(--muted); font-size: 0.75rem; }
.srv-stats b { font-size: 1.0625rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.srv-kv dd { overflow-wrap: anywhere; }
.srv-access { display: flex; flex-direction: column; gap: 0.75rem; }
.srv-acc { --st: var(--line-strong); position: relative; display: flex; flex-direction: column; gap: 0.25rem; padding: 0.75rem 0.875rem;
  border: 1px solid var(--line); border-radius: 0.875rem; background: var(--soft); }
.srv-acc.on { --st: var(--green); }
.srv-acc .rp-dot { top: 0.9375rem; right: 0.875rem; }
.srv-url { display: block; font-size: 0.8125rem; background: var(--panel); border: 1px solid var(--line); border-radius: 0.5rem;
  padding: 0.375rem 0.5rem; overflow-wrap: anywhere; user-select: all; }
.srv-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: 0.625rem; margin-bottom: 0.75rem; }
.srv-act { display: flex; align-items: center; justify-content: space-between; gap: 0.875rem; padding: 0.75rem 0.875rem; margin: 0;
  border: 1px solid var(--line); border-radius: 0.875rem; background: var(--soft); }
.srv-act div { display: flex; flex-direction: column; min-width: 0; }
.srv-act small { color: var(--muted); line-height: 1.35; }
.srv-act .btn { flex: none; }
.srv-log-head { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 0.625rem; }
.srv-log-head h3 { margin: 0; }
.srv-log-tools { display: flex; align-items: center; gap: 0.75rem; }
.srv-log-tools .check { margin: 0; }
.srv-log { max-height: 22rem; overflow: auto; margin: 0; padding: 0.75rem 0.875rem; background: #12110f; color: #d9d4cd; border-radius: 0.75rem;
  font: 0.75rem/1.55 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; }
.srv-log span { display: block; }
.srv-log span.err { color: #ff8d7a; }
.srv-log.only-err span:not(.err) { display: none; }
@media (max-width: 900px) { .srv-grid { grid-template-columns: minmax(0, 1fr); } }
/* Server & securitate → E-mail */
.srv-card .srv-acc + p, .srv-card p + .srv-acc { margin-top: 0.75rem; }
.srv-card .srv-act { margin-top: 0.75rem; }
.pub-form { display: flex; gap: 0.5rem; align-items: flex-end; flex-wrap: wrap; margin-top: 0.875rem; }
.pub-form label { flex: 1 1 16rem; margin: 0; }
.mail-steps { list-style: none; counter-reset: st; display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 0.75rem; padding: 0; margin: 0; }
.mail-steps li { counter-increment: st; display: flex; flex-direction: column; gap: 0.25rem; padding: 0.875rem; border: 1px solid var(--line);
  border-radius: 0.875rem; background: var(--soft); font-size: 0.875rem; }
.mail-steps li::before { content: counter(st); width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--acc); color: var(--on-acc);
  display: grid; place-items: center; font-weight: 700; font-size: 0.75rem; margin-bottom: 0.25rem; }
.mail-steps span { color: var(--text2); overflow-wrap: anywhere; line-height: 1.45; }

/* Server & securitate → Conturi */
.acc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(22rem, 1fr)); gap: 0.75rem; }
.acc-card { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.75rem 0.875rem; border: 1px solid var(--line); border-radius: 0.875rem;
  background: var(--soft); min-width: 0; }
.acc-card.off { opacity: 0.6; }
.acc-av { flex: none; width: 2.5rem; height: 2.5rem; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 0.875rem;
  background: var(--soft2); color: var(--text2); position: relative; }
.acc-av.on::after { content: ""; position: absolute; right: -1px; bottom: -1px; width: 0.75rem; height: 0.75rem; border-radius: 50%;
  background: var(--green); border: 2px solid var(--soft); }
.acc-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.1875rem; }
.acc-main small { color: var(--muted); overflow-wrap: anywhere; }
.acc-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; margin-top: 0.25rem; }
.acc-out { flex: none; margin: 0; }
.root-transfer form { margin-top: 0.5rem; align-items: flex-end; }

/* Server & securitate → Securitate */
.sec-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sec-stats .bad { background: var(--red-l); } .sec-stats .bad b { color: var(--red); }
.sec-stats .warn { background: var(--amber-l); } .sec-stats .warn b { color: var(--amber-t); }
.ev-list { max-height: 26rem; overflow-y: auto; border: 1px solid var(--line); border-radius: 0.75rem; scrollbar-width: thin; }
.ev { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.75rem; padding: 0.5625rem 0.875rem;
  border-bottom: 1px solid var(--line2); font-size: 0.875rem; }
.ev:last-child { border-bottom: 0; }
.ev-dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--green); }
.ev.bad .ev-dot { background: var(--red); }
.ev-text { overflow-wrap: anywhere; }
.ev.bad .ev-text { font-weight: 600; }
.ev-meta { color: var(--muted); font-size: 0.75rem; white-space: nowrap; }
.ev-list.only-bad .ev:not(.bad) { display: none; }
.ev[hidden] { display: none; }
.ev.al { align-items: flex-start; }
.ev.al .ev-dot { margin-top: 0.4375rem; }
.al-filter { flex-wrap: wrap; }
.al-filter button.on { background: var(--panel); color: var(--text); box-shadow: 0 1px 2px #0002; }
.al-empty { margin: 0; padding: 1rem; }
@media (max-width: 760px) { .ev { grid-template-columns: auto minmax(0, 1fr); } .ev-meta { grid-column: 2; white-space: normal; }
  .sec-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.375rem; } }

/* ---------- Administrare → Ecrane TV: cardul de asociere + un card pe ecran */
.tv-admin { display: grid; grid-template-columns: minmax(16rem, 22rem) minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.tv-new { border: 1px solid var(--acc-b); background: var(--acc-l); border-radius: 1rem; padding: 1.125rem 1.25rem; }
.tv-new h3 { margin: 0 0 0.625rem; }
.tv-steps { margin: 0 0 1rem; padding-left: 1.25rem; line-height: 1.55; color: var(--text2); font-size: 0.875rem; }
.tv-steps b { overflow-wrap: anywhere; }
.tv-pair-form { display: flex; flex-direction: column; gap: 0.75rem; }
.tv-pair-form label { margin: 0; }
.tv-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); gap: 0.875rem; }
.tv-card { border: 1px solid var(--line); border-radius: 1rem; padding: 0.875rem 1rem; background: var(--soft); display: flex; flex-direction: column; gap: 0.75rem; min-width: 0; }
.tv-card header { display: flex; align-items: center; gap: 0.625rem; min-width: 0; }
.tv-dot { flex: none; width: 0.625rem; height: 0.625rem; border-radius: 50%; background: var(--line-strong); }
.tv-dot.on { background: var(--green); box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 25%, transparent); }
.tv-name { flex: 1; display: flex; gap: 0.375rem; min-width: 0; margin: 0; }
.tv-name input[name=name] { flex: 1; min-width: 0; font-weight: 700; }
.tv-meta { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.25rem 0.875rem; margin: 0; font-size: 0.8125rem; }
.tv-meta dt { color: var(--muted); }
.tv-meta dd { margin: 0; overflow-wrap: anywhere; min-width: 0; }
.tv-card footer { display: flex; flex-wrap: wrap; gap: 0.5rem; padding-top: 0.625rem; border-top: 1px solid var(--line2); }
.tv-card footer form { margin: 0; }
.tv-card .tv-remove { margin-left: auto; }
.tv-empty { margin: 0; padding: 1.5rem; border: 1px dashed var(--line-strong); border-radius: 1rem; text-align: center; }
@media (max-width: 1100px) { .tv-admin { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Administrare → Firma */
.firm-form { display: flex; flex-direction: column; gap: 1rem; }
.firm-form .firm-name { max-width: 30rem; }
.firm-form .settings-theme h3 { margin: 0 0 0.25rem; }

/* ---------- Administrare → procese: listă (stânga) + detaliu (dreapta) */
.pm { display: grid; grid-template-columns: minmax(14rem, 18rem) minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.pm-list { display: flex; flex-direction: column; gap: 0.25rem; max-height: 70vh; overflow-y: auto; padding-right: 0.25rem;
  position: sticky; top: 6.5rem; scrollbar-width: thin; }
.pm-item { display: flex; align-items: center; gap: 0.75rem; text-align: left; padding: 0.625rem 0.75rem; border: 1px solid transparent;
  border-radius: 0.75rem; background: none; color: var(--text); font: inherit; cursor: pointer; }
.pm-item:hover { background: var(--soft); }
.pm-item.on { background: var(--acc-l); border-color: var(--acc-b); }
.pm-name { display: flex; flex-direction: column; min-width: 0; }
.pm-name b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-name small { color: var(--muted); }
.pm-item.pm-empty small [data-cnt=w] { color: var(--red); font-weight: 700; }
.pm-detail { min-width: 0; container-type: inline-size; }
.pm-pane { border: 1px solid var(--line); border-radius: 1rem; padding: 1.125rem 1.25rem; background: var(--soft); }
.pm-pane header { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 0.875rem; }
.pm-pane header h3 { margin: 0; flex: 1; min-width: 10rem; font-size: 1.125rem; }
.pm-warn { margin: 0 0 0.875rem; padding: 0.5rem 0.75rem; border-radius: 0.625rem; background: var(--amber-l); color: var(--amber-t); font-size: 0.875rem; }
.pm-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.pm-col { display: flex; flex-direction: column; gap: 0.625rem; background: var(--panel); border: 1px solid var(--line); border-radius: 0.875rem;
  padding: 0.875rem; min-width: 0; }
.pm-col-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; }
.pm-col-head input { flex: 0 1 11rem; min-width: 0; padding: 0.375rem 0.625rem; }
.pm-chips { display: flex; flex-wrap: wrap; gap: 0.375rem; max-height: 22rem; overflow-y: auto; scrollbar-width: thin; }
.pm-chips .tchip.on { order: -1; }  /* cei aleși, primii */
.pm-chips .tchip:not(.on) { background: var(--panel); border-color: var(--line); color: var(--text2); }
.pm-chips .tchip:not(.on):hover { border-color: var(--acc); color: var(--text); }
.pm-chips .tchip[hidden] { display: none; }
@container (max-width: 40rem) { .pm-cols { grid-template-columns: minmax(0, 1fr); } .pm-chips { max-height: 15rem; } }
@media (max-width: 900px) { .pm { grid-template-columns: minmax(0, 1fr); } .pm-list { position: static; max-height: 16rem; } }

/* ---------- Rapoarte: generator (lista rapoartelor în stânga, opțiunile în dreapta) */
.rb { display: grid; grid-template-columns: minmax(17rem, 24rem) minmax(0, 1fr); gap: 1.5rem; align-items: start; }
.rb-list { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.5rem; min-width: 0; }
.rb-item { display: flex; gap: 0.875rem; align-items: flex-start; padding: 0.875rem 1rem; border: 1px solid var(--line);
  border-radius: 0.875rem; cursor: pointer; background: var(--panel); flex-direction: row; margin: 0; font-weight: 400; }
.rb-item:hover { border-color: var(--line-strong); background: var(--soft); }
.rb-item.on { border-color: var(--acc); background: var(--acc-l); box-shadow: inset 3px 0 0 var(--acc); }
.rb-item input { position: absolute; opacity: 0; pointer-events: none; }
.rb-item:has(input:focus-visible) { outline: 2px solid var(--acc); outline-offset: 2px; }
.rb-ico { flex: none; width: 2.25rem; height: 2.25rem; border-radius: 0.625rem; background: var(--soft2); display: grid; place-items: center; font-size: 1.125rem; }
.rb-item b { display: block; color: var(--text); }
.rb-item small { display: block; color: var(--muted); line-height: 1.4; margin-top: 0.125rem; }
.rb-options { display: flex; flex-direction: column; gap: 1rem; padding: 1.125rem 1.25rem; border: 1px solid var(--line); border-radius: 0.875rem;
  background: var(--soft); min-width: 0; }
.rb-field { display: flex; flex-direction: column; gap: 0.5rem; margin: 0; }
.rb-field[hidden] { display: none; }
.rb-label { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text2); }
.rb-quick { flex-wrap: wrap; width: auto; }
.rb-quick button.on { background: var(--panel); color: var(--text); box-shadow: 0 1px 2px #0002; }
.rb-dates { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.rb-dates label { flex: 1 1 10rem; margin: 0; }
.rb-go { display: flex; justify-content: flex-end; padding-top: 0.25rem; border-top: 1px solid var(--line2); }
@media (max-width: 900px) { .rb { grid-template-columns: minmax(0, 1fr); } .rb-go .btn { flex: 1; justify-content: center; } }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- capabilități utilaje: un card pe utilaj, procesele ca pastile colorate */
.cap-legend { display: flex; flex-wrap: wrap; gap: 0.375rem 1rem; margin: 0 0 1rem; font-size: 0.8125rem; color: var(--text2); }
.cap-key { display: inline-flex; align-items: center; gap: 0.375rem; }
.cap-key i { width: 0.625rem; height: 0.625rem; border-radius: 50%; background: var(--c); }
.cap-key b { font-family: var(--mono); font-size: 0.75rem; }
.cap-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; margin-bottom: 1rem; }
.cap-tools input[type=search] { flex: 0 1 18rem; min-width: 0; }
.cap-tools .check { margin: 0; }
.cap-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); gap: 0.75rem; }
.cap-card { border: 1px solid var(--line); border-radius: 0.875rem; padding: 0.75rem 0.875rem; background: var(--soft);
  display: flex; flex-direction: column; gap: 0.625rem; }
.cap-card.cap-none { border-style: dashed; }
.cap-card header { display: flex; align-items: center; gap: 0.5rem; min-width: 0; }
.cap-card header b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cap-n { font-style: normal; font-size: 0.75rem; font-weight: 700; min-width: 1.5rem; text-align: center; padding: 0.0625rem 0.4375rem;
  border-radius: 1rem; background: var(--acc-l); color: var(--acc-d); }
.cap-card.cap-none .cap-n { background: var(--soft2); color: var(--muted); }
.cap-card.st-mentenanță, .cap-card.st-defect { opacity: 0.7; }
.cap-chips { display: flex; flex-wrap: wrap; gap: 0.3125rem; }
.cap-names { color: var(--text2); font-size: 0.8125rem; line-height: 1.35; margin-top: -0.25rem; min-height: 1.1em; }
.cap-card.cap-none .cap-names { color: var(--muted); font-style: italic; }
.cap-chip { font: 700 0.75rem/1 var(--mono); padding: 0.375rem 0.4375rem; border-radius: 0.4375rem; cursor: pointer;
  border: 1px dashed var(--line-strong); background: transparent; color: var(--muted); min-width: 2.5rem; }
.cap-chip:hover { border-color: var(--c); color: var(--text); }
.cap-chip.on { background: var(--c); border: 1px solid var(--c); color: #1d1b19; }
.cap-chip.busy { opacity: 0.5; }
.cap-chip.ro { cursor: default; }
.cap-chip.ro:not(.on) { display: none; }  /* fără drept de editare: doar procesele utilajului */
@media (max-width: 760px) { .cap-grid { grid-template-columns: 1fr; } .cap-chip { padding: 0.5rem; } }

/* ---------- matrix */
.matrix { border-collapse: collapse; }
.matrix th { padding: 0.5rem; vertical-align: bottom; max-width: 8.125rem; text-align: center; }
.matrix th small { display: block; font-weight: 500; color: var(--muted); font-size: 0.7188rem; margin-top: 0.25rem; line-height: 1.25; }
.matrix td { padding: 0.5rem 0.75rem; border-top: 1px solid var(--line2); text-align: center; }
.matrix td:first-child { text-align: left; min-width: 15.625rem; }

/* ---------- order cards */
.ordercards { display: grid; gap: 1.25rem; }
.ordercard { margin: 0; border-left: 0.3125rem solid var(--line-strong); }
.ordercard.st-întârziată { border-left-color: var(--red); }
.ordercard.st-în-lucru { border-left-color: var(--acc); }
.ordercard.st-finalizată { border-left-color: var(--green); }
.ordercard header { display: flex; justify-content: space-between; gap: 1rem; }
.ordercard h3 { margin: 0.25rem 0 2px; font-size: 1.1875rem; }
.ordercard header p { margin: 0; color: var(--text2); }
.oc-right { display: flex; gap: 0.5rem; align-items: flex-start; flex-wrap: wrap; justify-content: flex-end; }
.status { padding: 0.3125rem 0.75rem; border-radius: 6.1875rem; font-weight: 700; font-size: 0.8125rem; background: var(--soft2); }
.st-întârziată .status { background: var(--red-l); color: var(--red); }
.st-în-lucru .status { background: var(--acc-l); color: var(--acc-d); }
.st-finalizată .status { background: var(--green-l); color: var(--green); }
.status.risk { background: var(--amber-l) !important; color: var(--amber) !important; }
.progressbar { height: 0.5rem; background: var(--track); border-radius: 0.5625rem; margin: 1rem 0; overflow: hidden; }
.progressbar i { display: block; height: 100%; background: linear-gradient(90deg, var(--acc-t), var(--acc)); }
.oc-metrics { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.375rem, 1fr)); gap: 0.75rem; }
.oc-metrics span { display: block; color: var(--muted); font-size: 0.7812rem; }
.oc-metrics b { font-size: 0.9688rem; }
.ordercard details { margin-top: 1rem; }
.ordercard summary { cursor: pointer; font-weight: 600; color: var(--acc-d); margin-bottom: 0.5rem; }
.ordercard footer { display: flex; flex-wrap: wrap; gap: 0.625rem; margin-top: 1.125rem; padding-top: 1rem; border-top: 1px solid var(--line2); }
.ordercard footer select { max-width: 20.625rem; padding: 0.375rem 0.625rem; font-size: 0.875rem; }

/* ---------- machines / processes / tasks */
.machinecards { display: grid; grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr)); gap: 1.125rem; }
.machine, .taskcard { border: 1px solid var(--line); border-radius: var(--radius); padding: 1.125rem; background: var(--soft); }
.machine.st-defect { border-color: var(--red-b); background: var(--red-l); }
.machine.st-mentenanță { border-color: var(--amber-b); background: var(--amber-l); }
.mc-top { display: flex; justify-content: space-between; align-items: center; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 0.375rem 0.875rem; margin: 0.75rem 0; font-size: 0.875rem; }
.kv dt { color: var(--muted); } .kv dd { margin: 0; font-weight: 600; }
.taskcard.blocked { opacity: .75; background: var(--soft); }
.flow { display: grid; gap: 0.875rem; }
.proc { display: flex; gap: 1.125rem; align-items: flex-start; border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.125rem; }

/* ---------- progress slider */
.prog-box { margin-top: 0.75rem; }
.prog-box label { flex-direction: row; justify-content: space-between; }
.progress-range { -webkit-appearance: none; appearance: none; width: 100%; height: 0.625rem; border-radius: 0.5625rem; padding: 0; border: 0;
  background: linear-gradient(90deg, var(--acc) var(--p, 0%), var(--track) var(--p, 0%)); margin: 0.625rem 0; }
.progress-range::-webkit-slider-thumb { -webkit-appearance: none; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--panel); border: 3px solid var(--acc); cursor: pointer; }
.progress-range::-moz-range-thumb { width: 1.25rem; height: 1.25rem; border-radius: 50%; background: var(--panel); border: 3px solid var(--acc); cursor: pointer; }
.progress-range:disabled { opacity: .5; }
.quick { display: flex; gap: 0.375rem; flex-wrap: wrap; }

.items { display: grid; gap: 0.625rem; margin-top: 1.125rem; }
.item { border: 1px solid var(--line); border-radius: 0.75rem; padding: 0 0.875rem; background: var(--soft); }
.item[open] { padding-bottom: 0.875rem; }
.item > summary { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; padding: 0.75rem 0; cursor: pointer; list-style: none; flex-wrap: wrap; }
.item > summary::before { content: "▸"; color: var(--acc); margin-right: 0.25rem; transition: transform .15s; }
.item[open] > summary::before { transform: rotate(90deg); }
.item-title { flex: 1; min-width: 16.25rem; display: flex; flex-direction: column; }
.item-meta { display: flex; align-items: center; gap: 0.625rem; }
.item .tbl td.mono { white-space: nowrap; }
.item-actions { display: grid; gap: 0.625rem; margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px dashed var(--line); }
.proc-select { display: flex; flex-wrap: wrap; gap: 0.375rem 0.625rem; align-items: center; margin: 0; }
.pchip { flex-direction: row; align-items: center; gap: 0.375rem; font-weight: 500; color: var(--text); font-size: 0.8438rem; border: 1px solid var(--line); border-radius: 0.5rem; padding: 0.25rem 0.5rem; background: var(--panel); cursor: pointer; }
.pchip:has(input:checked) { border-color: var(--acc); background: var(--acc-l); }
.g-item { min-height: 3.125rem; background: var(--soft); }
.g-item .g-left { background: var(--soft); padding-left: 1.875rem; }
.g-item .g-title b { font-size: 0.9375rem; color: var(--text2); }
.g-item .g-title small { font-size: 0.8125rem; }
.g-add.sm { font-size: 0.875rem; }
.admin-tabs { margin-bottom: 1.25rem; flex-wrap: wrap; }
.tchip { border: 1px solid var(--line-strong); background: var(--panel); border-radius: 6.1875rem; padding: 0.3125rem 0.75rem; font-size: 0.8438rem; cursor: pointer; user-select: none; transition: .12s; }
.tchip:hover { border-color: var(--acc); }
.tchip.on { background: var(--acc); border-color: var(--acc); color: var(--on-acc); }
.tchip.on::before { content: "✓ "; }
.tchip.inactive { opacity: .55; text-decoration: line-through; }
.tchip.busy { opacity: .4; }
.tbl-scroll { overflow-x: auto; }
.tbl.attr input, .tbl.attr select { padding: 0.375rem 0.5rem; font-size: 0.8438rem; }
.tbl.attr select[name=specialization] { max-width: 14.375rem; }
.tbl.attr td { padding: 0.375rem 0.3125rem; }
.w100 { width: 6.25rem; } .w-wide { width: 18.75rem; }
/* ---------- meniu lateral restrângibil + deconectare */
.sidebar { display: flex; flex-direction: column; transition: width .18s ease; overflow: hidden; }
.sidebar nav { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--side-line) transparent; }
.sidebar nav a { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.usercard { margin-bottom: 0.875rem; }
/* logo: marcaj + nume, centrate în panoul lateral */
.brand-logo { flex: none; display: block; width: 2.75rem; height: 2.75rem; }
.brand-logo .logo-svg { display: block; width: 100%; height: 100%; filter: drop-shadow(0 2px 6px #0004); }
.brand .brand-text { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.05; gap: 0.25rem; }
.brand .brand-text .brand-full { font-weight: 800; font-size: 1.5rem; color: #fff; letter-spacing: 1.5px; }
.brand .brand-text small { font-size: 0.75rem; letter-spacing: 2.5px; }
.brand-toggle { position: relative; width: 100%; white-space: nowrap; background: none; border: 0; border-bottom: 1px solid var(--side-line);
  cursor: pointer; font: inherit; display: flex; align-items: center; justify-content: center; gap: 0.75rem; padding: 1.5rem 2.5rem; }
.brand-toggle:hover { background: var(--side-hover); }
.brand-toggle .chev { position: absolute; right: 0.875rem; top: 50%; margin-top: -0.5625rem; width: 1.125rem; height: 1.125rem; color: var(--side-muted); transition: transform .18s; }
.logout { display: flex; align-items: center; gap: 0.875rem; margin: 0.75rem 1.125rem 1.125rem 0; padding: 0.875rem 1rem; border-radius: 0 0.75rem 0.75rem 0; color: var(--logout); border-top: 1px solid var(--side-line); font-size: 1.0312rem; }
.logout svg { color: var(--logout-ico); }
.logout span { flex: 1; }
.logout em { font-style: normal; font-family: var(--mono); font-size: 0.75rem; color: var(--side-muted); }
.logout:hover { background: var(--logout-hover); color: #fff; }
html.sb-collapsed .sidebar { width: 5.125rem; }
html.sb-collapsed .brand-toggle { padding: 1.375rem 0; }
html.sb-collapsed .brand-toggle .brand-text, html.sb-collapsed .brand-toggle .chev { display: none; }
/* doar meniul barei laterale; meniurile din pagină (Setări, sub-taburi) rămân întregi */
html.sb-collapsed .usercard, html.sb-collapsed .sidebar nav a span, html.sb-collapsed .sidebar nav a em,
html.sb-collapsed .logout span, html.sb-collapsed .logout em { display: none; }
html.sb-collapsed .sidebar nav a, html.sb-collapsed .logout { justify-content: center; margin: 2px 0.625rem; padding: 0.875rem 0; border-radius: 0.75rem; }
html.sb-collapsed .sidebar nav { margin-top: 0.875rem; }

/* tabel materiale simplificat */
.mat-simple { width: 100%; }
.mat-simple th.r, .mat-simple td.r { text-align: right; width: 1%; white-space: nowrap; }
.mat-simple td:first-child { width: auto; }
.mat-simple td { padding-top: 0.4375rem; padding-bottom: 0.4375rem; vertical-align: middle; }
.mat-simple input { border-color: transparent; background: transparent; padding: 0.375rem 0.5rem; }
.mat-simple input:hover { border-color: var(--line); }
.mat-simple input:focus { border-color: var(--acc); background: var(--panel); }
.mat-simple .ms-name { width: 100%; min-width: 14rem; font-weight: 600; }
.ms-num { display: inline-flex; align-items: center; gap: 0.25rem; }
.ms-num input { width: 5.5rem; text-align: right; font-family: var(--mono); }
.ms-num em { font-style: normal; color: var(--muted); font-size: 0.8125rem; min-width: 2.25rem; text-align: left; }
.mat-simple tr.lowrow td { background: transparent; }
.mat-simple tr.lowrow td:first-child { box-shadow: inset 3px 0 0 var(--red); }
.mat-simple tr.dirty td { background: var(--amber-l); }
.mat-simple tr.dirty td:first-child { box-shadow: inset 3px 0 0 var(--amber); }
#dirtyInfo { margin-right: auto; color: var(--amber); font-weight: 600; }
/* ---------- etape URGENTE (suprapuse sau marcate) */
@keyframes urgentPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(208, 32, 32, .55); } 50% { box-shadow: 0 0 0 0.3125rem rgba(208, 32, 32, 0); } }
.bar.urgent { border: 2px solid var(--red); color: #5a0d0d; font-weight: 700;
  background: repeating-linear-gradient(-45deg, rgba(192, 38, 45, .16) 0 0.5rem, transparent 0.5rem 1rem),
              linear-gradient(90deg, var(--c) var(--p), color-mix(in srgb, var(--c) 35%, white) var(--p));
  animation: urgentPulse 1.6s ease-in-out infinite; }
.bar.stacked { top: 0.5rem; transform: none; height: 2.375rem; }
.urgent-badge { display: inline-block; margin-left: 0.5rem; padding: 1px 0.4375rem; border-radius: 0.375rem; background: var(--red); color: #fff;
  font-size: 0.7188rem; font-weight: 800; letter-spacing: .4px; vertical-align: middle; white-space: nowrap; }
.g-row.urgent-row .g-left { box-shadow: inset 0.25rem 0 0 var(--red); background: var(--red-l); }
tr.urgent-row td { background: var(--red-l); }
tr.urgent-row td:first-child { box-shadow: inset 0.25rem 0 0 var(--red); }
.taskcard.urgent-card { border: 2px solid var(--red); background: var(--red-l); }
.btn.urgent-btn { background: var(--red); border-color: var(--red); color: #fff; }
.btn.urgent-btn:hover { background: #a01d23; }
.urgent-toggle { margin: 0.625rem 0; padding: 0.625rem 0.75rem; border: 1px dashed var(--red-b); border-radius: 0.625rem; background: var(--red-l); }
.conflict .btn + .btn { margin-left: 0.5rem; }


/* ---------- inventar */
.stat small { display: block; font-size: 0.7812rem; }
.stats:has(> .stat:nth-child(5)) { grid-template-columns: repeat(auto-fit, minmax(10.625rem, 1fr)); }
.tbl td.mono { white-space: nowrap; }
.stat.warnstat { background: var(--amber-l); border-color: var(--amber-b); } .stat.warnstat b { color: var(--amber); }
.admin-tabs a { text-decoration: none; }
.new-count { margin-bottom: 1.125rem; padding: 0.875rem; border: 1px dashed var(--line); border-radius: 0.75rem; }
.quick-tool select { padding: 0.3125rem 0.5rem; font-size: 0.8125rem; max-width: 10.625rem; }
.tstat.ts-defect, .tstat.ts-în-reparație { color: var(--red); border-color: var(--red-b); }
.tstat.ts-în-uz { color: var(--green); }
tr.casat td { opacity: .5; }
.inv-stats { margin: 0.375rem 0 1.125rem; }
.count-tbl input.bad { border-color: var(--red); background: var(--red-l); }
.print-sign { display: none; }
@media print {
  .sidebar, .topbar, .noprint, #flashes, .delete-form { display: none !important; }
  .layout { display: block; } .content { padding: 0; } .panel { border: 0; padding: 0; }
  .count-tbl input { border: 0; padding: 0; }
  .print-sign { display: block; margin-top: 2.5rem; font-size: 0.875rem; }
}
.assign-box { margin: 0.875rem 0; padding: 0.875rem; border: 1px solid var(--line); border-radius: 0.75rem; background: var(--soft); }
.assign-box h4 { margin: 0 0 0.625rem; }
select.res-select { padding: 0.3125rem 0.5rem; font-size: 0.8438rem; max-width: 16.25rem; }
.ordercard footer select { max-width: 16.25rem; }
select option:disabled { color: var(--muted); }

/* ---------- modals */
.modal { border: 0; border-radius: 1.125rem; padding: 1.625rem; width: min(47.5rem, 94vw); box-shadow: 0 1.25rem 3.75rem #0000003a; }
.modal::backdrop { background: var(--backdrop); }
.modal h3 { margin-top: 0; font-size: 1.1875rem; }
.small-modal { width: min(35rem, 94vw); }

.spec-move { display: inline-flex; align-items: center; gap: 0.5rem; margin-right: 0.375rem; font-size: 0.85rem; color: var(--text2); }
.spec-move select, .spec-move .allow-new-input { min-width: 15rem; }
.checks-field { border: 1px solid var(--line); border-radius: 0.75rem; padding: 0.625rem 0.875rem 0.75rem; margin: 0; }
.checks-field legend { padding: 0 0.375rem; font-weight: 600; }

/* --- Parametri de calcul: grupurile în stânga, câte un rând pe parametru, bara de salvare jos --- */
.pm-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; }
.pm-head > div:first-child { flex: 1 1 24rem; min-width: 0; }
.pm-tools { display: flex; flex-direction: column; align-items: flex-end; gap: 0.5rem; flex: 0 1 18rem; }
.pm-tools input { width: 100%; box-sizing: border-box; }
.pm-count { font-size: 0.8125rem; color: var(--muted); }
.pm-count.on { color: var(--acc); font-weight: 600; }
.pm-layout { display: grid; grid-template-columns: 14.5rem minmax(0, 1fr); gap: 1.5rem; align-items: start; margin-top: 1.25rem; }
.pm-nav { display: flex; flex-direction: column; gap: 0.125rem; position: sticky; top: 1rem;
  border: 1px solid var(--line); border-radius: var(--radius); padding: 0.5rem; background: var(--soft); }
.pm-nav .tabs-sep { margin: 0.75rem 0.625rem 0.25rem; font-size: 0.6875rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted); }
.pm-nav .tabs-sep:first-child { margin-top: 0.375rem; }
.pm-nav button { display: flex; align-items: center; gap: 0.5rem; width: 100%; padding: 0.5rem 0.625rem; border: 0;
  border-radius: 0.5rem; background: none; color: var(--text2); font: inherit; font-weight: 600; text-align: left; cursor: pointer; }
.pm-nav button:hover { background: var(--soft2); color: var(--text); }
.pm-nav button.on { background: var(--acc-l); color: var(--acc); box-shadow: inset 3px 0 0 var(--acc); }
.pm-nav .sn-label { flex: 1; min-width: 0; }
.pm-badge { font-style: normal; font-size: 0.6875rem; font-weight: 700; min-width: 1.25rem; padding: 0.0625rem 0.375rem;
  border-radius: 1rem; text-align: center; background: var(--acc); color: var(--on-acc); }
.pm-badge[hidden] { display: none; }
.pm-searching .pm-nav button.on { background: none; color: var(--text2); box-shadow: none; }

.pm-body { min-width: 0; display: grid; gap: 1.25rem; }
.pm-group { border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); overflow: hidden; }
.pm-group[hidden] { display: none; }
.pm-group > header { padding: 1rem 1.25rem 0.75rem; }
.pm-group > header small { color: var(--muted); font-size: 0.6875rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.pm-group > header h3 { margin: 0.125rem 0 0; font-size: 1.125rem; }

.pm-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(11rem, 15rem); gap: 0.5rem 1.5rem; align-items: start;
  padding: 0.875rem 1.25rem; border-top: 1px solid var(--line2); }
.pm-row[hidden] { display: none; }
.pm-row.is-changed { box-shadow: inset 3px 0 0 var(--acc); }
.pm-row.is-dirty { background: color-mix(in srgb, var(--amber-l) 55%, transparent); }
.pm-row.pm-long { grid-template-columns: 1fr; }
.pm-text { display: grid; gap: 0.25rem; min-width: 0; }
.pm-text label { font-size: 0.9375rem; color: var(--text); cursor: pointer; }
.pm-text small { color: var(--muted); line-height: 1.4; }
.pm-ctl { display: grid; gap: 0.375rem; min-width: 0; }
.pm-input { display: flex; align-items: stretch; border: 1px solid var(--line-strong); border-radius: 0.625rem;
  background: var(--panel); overflow: hidden; }
.pm-input:focus-within { border-color: var(--acc); box-shadow: 0 0 0 3px color-mix(in srgb, var(--acc) 22%, transparent); }
.pm-input input { flex: 1; min-width: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; outline: 0;
  font-variant-numeric: tabular-nums; font-weight: 600; }
.pm-unit { display: flex; align-items: center; padding: 0 0.75rem; background: var(--soft2); color: var(--muted);
  font-size: 0.8125rem; font-weight: 600; white-space: nowrap; border-left: 1px solid var(--line); }
.pm-ctl textarea { width: 100%; box-sizing: border-box; resize: vertical; font: inherit; }
.pm-def { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; font-size: 0.75rem; color: var(--muted); }
.pm-reset { border: 0; background: none; padding: 0; font: inherit; font-weight: 600; color: var(--acc); cursor: pointer; visibility: hidden; }
.pm-reset:hover { text-decoration: underline; }
.pm-row.is-changed .pm-reset { visibility: visible; }

.pm-switch { display: inline-flex; flex-direction: row; align-items: center; gap: 0.625rem; cursor: pointer; justify-self: start; }
.pm-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pm-switch span { position: relative; width: 2.75rem; height: 1.5rem; border-radius: 1rem; background: var(--track);
  border: 1px solid var(--line-strong); transition: background .15s; flex: none; }
.pm-switch span::after { content: ""; position: absolute; top: 0.125rem; left: 0.125rem; width: 1.125rem; height: 1.125rem;
  border-radius: 50%; background: var(--panel); box-shadow: 0 1px 2px #0004; transition: transform .15s; }
.pm-switch input:checked + span { background: var(--acc); border-color: var(--acc); }
.pm-switch input:checked + span::after { transform: translateX(1.25rem); }
.pm-switch input:focus-visible + span { box-shadow: 0 0 0 3px color-mix(in srgb, var(--acc) 30%, transparent); }
.pm-switch b { color: var(--text); font-size: 0.875rem; }
.pm-switch b::after { content: "Nu"; }
.pm-switch input:checked ~ b::after { content: "Da"; }

.pm-day { margin: 0 1.25rem 1rem; padding: 1rem; border-radius: 0.75rem; background: var(--soft); border: 1px solid var(--line); }
.pm-week { display: flex; gap: 0.375rem; margin-bottom: 0.875rem; }
.pm-week span { flex: 1; max-width: 3rem; padding: 0.375rem 0; text-align: center; border-radius: 0.5rem; font-size: 0.8125rem;
  font-weight: 700; color: var(--muted); background: var(--soft2); }
.pm-week span.on { background: var(--acc); color: var(--on-acc); }
.pm-timeline { display: flex; gap: 2px; height: 0.875rem; border-radius: 0.5rem; overflow: hidden; background: var(--track); }
.pm-timeline i { display: block; height: 100%; transition: width .2s; }
.pm-timeline .work { background: var(--acc); }
.pm-timeline .lunch { background: var(--green, #2f8f4e); }
.pm-timeline .hand { background: var(--amber); }
.pm-timeline .clean { background: var(--muted); }
.pm-hours { display: flex; justify-content: space-between; margin-top: 0.25rem; font-size: 0.75rem; color: var(--muted);
  font-variant-numeric: tabular-nums; }
.pm-day-sum { display: flex; flex-wrap: wrap; gap: 0.375rem 1.25rem; margin: 0.625rem 0 0; font-size: 0.875rem; color: var(--text2); }
.pm-day-sum b { color: var(--text); margin-right: 0.125rem; }
.pm-day-sum span[class]::before { content: ""; display: inline-block; width: 0.625rem; height: 0.625rem; border-radius: 0.1875rem;
  margin-right: 0.375rem; vertical-align: -0.0625rem; }
.pm-day-sum .k-work::before { background: var(--acc); }
.pm-day-sum .k-lunch::before { background: var(--green, #2f8f4e); }
.pm-day-sum .k-hand::before { background: var(--amber); }
.pm-day-sum .k-clean::before { background: var(--muted); }
.pm-day.bad .pm-timeline { opacity: .35; }
.pm-day.bad .pm-day-sum { color: var(--red); font-weight: 600; }

.pm-empty { padding: 2rem; text-align: center; border: 1px dashed var(--line-strong); border-radius: var(--radius); }
.pm-bar { position: sticky; bottom: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;
  margin: 1.25rem -1.5rem -1.5rem; padding: 0.875rem 1.5rem; background: var(--panel); border-top: 1px solid var(--line);
  border-radius: 0 0 1.125rem 1.125rem; }
.pm-bar .pm-state { margin-right: auto; color: var(--muted); font-size: 0.875rem; }
.pm-bar.dirty { box-shadow: 0 -6px 18px #0000001f; }
.pm-bar.dirty .pm-state { color: var(--amber-t); font-weight: 700; }
.pm-bar .btn[hidden] { display: none; }
/* lățimea contează în panou, nu pe ecran: bara laterală deschisă sau interfața mărită îl îngustează */
.pm-form, .pm-group { container-type: inline-size; }
@container (max-width: 62rem) {
  .pm-layout { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .pm-nav { position: static; flex-direction: row; flex-wrap: wrap; gap: 0.25rem; }
  .pm-nav .tabs-sep { display: none; }
  .pm-nav button { width: auto; padding: 0.375rem 0.75rem; border-radius: 2rem; }
  .pm-nav button.on { box-shadow: none; }
}
@container (max-width: 36rem) { .pm-row { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) {
  .pm-layout { grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: 0.75rem; }
  .pm-tools { flex-basis: 100%; align-items: stretch; }
  .pm-row { grid-template-columns: minmax(0, 1fr); padding: 0.875rem 1rem; }
  .pm-group > header { padding: 0.875rem 1rem 0.5rem; }
  .pm-day { margin: 0 1rem 0.875rem; padding: 0.875rem; }
  /* pe telefon bara stă lipită jos doar cât sunt modificări de salvat, ca să nu acopere parametrii */
  .pm-bar { position: static; margin: 1rem 0 0; padding: 0.75rem; border: 1px solid var(--line); border-radius: var(--radius); }
  .pm-bar.dirty { position: sticky; bottom: calc(4.75rem + env(safe-area-inset-bottom)); }
  .pm-bar.dirty .btn.ghost { display: none; }
  .pm-bar .pm-state { flex-basis: 100%; }
  .pm-bar .btn { flex: 1; justify-content: center; }
}

/* --- Ajutor --- */
.hdot { display: inline-flex; align-items: center; justify-content: center; width: 1.25rem; height: 1.25rem; padding: 0;
  margin-left: 0.375rem; border-radius: 50%; border: 1px solid var(--line-strong); background: var(--soft); color: var(--muted);
  font: 700 0.75rem/1 inherit; cursor: pointer; vertical-align: middle; flex: none; }
.hdot:hover, .hdot:focus-visible { background: var(--acc); border-color: var(--acc); color: var(--on-acc); }
.hdot.static { cursor: default; margin-left: 0; }
.help-btn .hdot { width: 1.05rem; height: 1.05rem; font-size: 0.7rem; }
.help-btn:hover .hdot { background: var(--acc); border-color: var(--acc); color: var(--on-acc); }
.help-dlg { padding: 0; margin: 0 0 0 auto; height: 100dvh; max-height: 100dvh; width: min(34rem, 100vw); border-radius: 0;
  display: none; flex-direction: column; background: var(--panel); color: var(--text); }
.help-dlg[open] { display: flex; }
.help-head { display: flex; justify-content: space-between; align-items: center; padding: 1.125rem 1.375rem 0.5rem; }
.help-head h2 { margin: 0; font-size: 1.25rem; display: flex; align-items: center; gap: 0.5rem; }
.help-tabs { display: flex; gap: 0.375rem; flex-wrap: wrap; padding: 0.375rem 1.375rem 0.875rem; border-bottom: 1px solid var(--line); }
.help-tabs button { border: 1px solid var(--line); background: var(--soft); color: var(--text2); border-radius: 99rem;
  padding: 0.25rem 0.75rem; font: 600 0.8rem inherit; cursor: pointer; }
.help-tabs button.on { background: var(--acc); border-color: var(--acc); color: var(--on-acc); }
.help-body { flex: 1; overflow-y: auto; padding: 1rem 1.375rem 1.5rem; position: relative; }
.help-foot { padding: 0.875rem 1.375rem; border-top: 1px solid var(--line); font-weight: 600; }
.help-foot a { color: var(--acc); }
.help-sec h3 { margin: 0 0 0.375rem; font-size: 1.125rem; }
.help-intro { color: var(--text2); margin: 0 0 1rem; line-height: 1.5; }
.help-items { margin: 0; display: grid; gap: 0.625rem; }
.help-item { padding: 0.75rem 0.875rem; border: 1px solid var(--line); border-radius: 0.75rem; background: var(--soft);
  transition: border-color .3s, box-shadow .3s; }
.help-item dt { font-weight: 700; margin-bottom: 0.25rem; }
.help-item dd { margin: 0; color: var(--text2); line-height: 1.5; font-size: 0.92rem; }
.help-item.hl { border-color: var(--acc); box-shadow: 0 0 0 3px var(--acc-l); background: var(--panel); }
.help-tips { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: 0.375rem; color: var(--text2); font-size: 0.9rem; }
.help-page .help-sec { padding-top: 1.5rem; margin-top: 1.5rem; border-top: 1px solid var(--line); scroll-margin-top: 6rem; }
.help-page .help-items { grid-template-columns: repeat(auto-fill, minmax(22rem, 1fr)); }
.help-toc { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.help-toc a { padding: 0.375rem 0.875rem; border-radius: 99rem; border: 1px solid var(--line); background: var(--soft);
  color: var(--text); font-weight: 600; font-size: 0.9rem; text-decoration: none; }
.help-toc a:hover { border-color: var(--acc); color: var(--acc); }
@media (max-width: 640px) { .help-page .help-items { grid-template-columns: 1fr; } .help-btn { padding-inline: 0.5rem; } }
.modal-actions { display: flex; justify-content: flex-end; gap: 0.625rem; margin-top: 1.25rem; flex-wrap: wrap; }
.conflict { margin-top: 0.875rem; padding: 0.875rem; border-radius: 0.75rem; background: var(--red-l); }
.conflict .btn { margin-top: 0.625rem; }
.errlist { margin: 0.375rem 0; padding-left: 1.25rem; color: var(--red); }
.errlist li { margin-bottom: 0.25rem; }
.suggest { margin-top: 0.75rem; padding: 0.75rem 0.875rem; border-radius: 0.625rem; background: var(--green-l); color: var(--green-t); }
.formpanel { max-width: 62.5rem; }
.delete-form { margin-top: -54px; }
#formDlg { width: min(53.75rem, 96vw); max-height: 92vh; }
.modal-form .panel-head { margin-bottom: 0.5rem; }
.modal-form .delete-form { margin-top: -44px; }

/* ---------- Gantt */
.gantt-panel { padding: 0; overflow: hidden; }
.gantt-head { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; padding: 0.875rem 1.125rem; flex-wrap: wrap; }
.gantt { overflow: auto; max-height: calc(100vh - 20.625rem); min-height: 22.5rem; border-top: 1px solid var(--line); position: relative; }
.g-inner { position: relative; }
.g-row { display: flex; min-height: 4.625rem; border-bottom: 1px solid var(--line); }
.g-left { width: 23.125rem; flex: none; position: sticky; left: 0; z-index: 6; background: var(--panel); border-right: 1px solid var(--line); padding: 0.625rem 1.125rem; display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.g-title { min-width: 0; flex: 1; }
.g-title b { font-size: 1.0312rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: inline-block; max-width: calc(100% - 4rem); vertical-align: middle; }
.g-group .g-title b { max-width: calc(100% - 1.25rem); }
.g-title small { display: block; color: var(--muted); font-size: 0.9375rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g-track { position: relative; flex: none; display: flex; }
.g-header { position: sticky; top: 0; z-index: 8; min-height: 4.125rem; background: var(--soft); }
.g-header .g-left { background: var(--soft); font-size: 1.0625rem; }
.g-day { flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: var(--mono); border-right: 1px solid var(--line); color: var(--text2); background: var(--soft); }
.g-day span { font-family: "Segoe UI", system-ui, sans-serif; font-weight: 700; font-size: 0.9375rem; }
.g-day.wk { color: var(--muted); }
.g-day.today { background: var(--today); color: var(--acc-d); outline: 2px solid var(--acc-b); outline-offset: -2px; }
.g-body { position: relative; }
.g-cols { position: absolute; top: 0; bottom: 0; z-index: 0; pointer-events: none; }
.g-col { position: absolute; top: 0; bottom: 0; border-right: 1px solid var(--line2); }
.g-col.wk { background: var(--soft); }
.g-col.today { background: var(--today); }
/* orele zilei: linii fine în coloane și etichete sub dată (doar când coloana e destul de lată) */
.g-cols.hrs .g-col { background-image: linear-gradient(to right, var(--line2) 1px, transparent 1px); background-size: var(--hw) 100%; }
.g-header.with-hrs { min-height: 5.25rem; }
.g-header.with-hrs .g-day { justify-content: flex-start; padding-top: 0.5rem; }
.g-hrs { position: relative; align-self: stretch; height: 1.125rem; margin-top: auto; border-top: 1px solid var(--line); }
.g-hrs em { position: absolute; top: 0.1875rem; padding-left: 0.1875rem; font-style: normal; font-size: 0.6875rem; font-weight: 600;
  color: var(--muted); border-left: 1px solid var(--line); line-height: 1; height: 0.9375rem; }
.g-day.today .g-hrs em { color: var(--acc-d); }
.g-now { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--acc); opacity: .55; z-index: 3; }
.g-group { background: var(--soft); min-height: 4.625rem; }
.g-group .g-left { background: var(--soft); }
.g-group .g-track { align-items: center; padding-left: 1.125rem; color: var(--text2); font-size: 1.0625rem; z-index: 1; }
.g-group.late, .g-group.late .g-left { background: var(--red-l); }
.g-group.late .g-info { color: var(--red); }
.g-group.risk .g-info { color: var(--amber); }
.dot { display: inline-block; width: 0.5625rem; height: 1.125rem; border-radius: 0.25rem; background: var(--red); margin-left: 0.5rem; vertical-align: middle; }
.g-prog { margin-left: 0.875rem; font-family: var(--mono); font-size: 0.8125rem; color: var(--muted); }
.g-deadline { position: absolute; top: 0; bottom: -2000px; border-left: 2px dashed var(--red); opacity: .35; pointer-events: none; }
.g-add { border: 0; background: none; color: var(--acc); font: 700 1rem inherit; font-family: inherit; cursor: pointer; white-space: nowrap; }
.shift { display: flex; gap: 2px; }
.shift button { border: 0; background: none; font-family: var(--mono); font-size: 0.8438rem; color: var(--muted); cursor: pointer; padding: 0.25rem 0.375rem; border-radius: 0.375rem; }
.shift button:hover { background: var(--acc-l); color: var(--acc-d); }
.dep { font-size: 0.75rem; font-weight: 600; color: var(--amber-t); background: var(--amber-l); border-radius: 0.375rem; padding: 1px 0.375rem; margin-left: 0.5rem; vertical-align: middle; cursor: help; }
.dep.ok { color: var(--green-t); background: var(--green-l); }
.lane { z-index: 1; align-items: center; }
.bar { position: absolute; top: 50%; transform: translateY(-50%); height: 2.625rem; border-radius: 0.5625rem; border: 1px solid color-mix(in srgb, var(--c) 70%, #6b5c50);
  background: linear-gradient(90deg, var(--c) var(--p), color-mix(in srgb, var(--c) 35%, white) var(--p));
  display: flex; align-items: center; justify-content: space-between; gap: 0.375rem; padding: 0 0.625rem; overflow: hidden; cursor: pointer; font-size: 0.9688rem; user-select: none; touch-action: none; }
.bar:hover { box-shadow: 0 3px 0.625rem #0000002a; z-index: 4; }
.bar .bl { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar .bp { font-family: var(--mono); font-size: 0.7812rem; flex: none; }
/* etapă gata: estompată, cu ✓ (nu mai are contur gros, care părea „urgent”) */
.bar.done { opacity: .55; border-style: dashed; }
.bar.done:hover { opacity: .9; }
.bar.bar-sm { padding: 0 0.3rem; justify-content: center; font-size: 0.75rem; font-weight: 700; }
.bar.bar-xs { padding: 0; }
.bar.bar-xs .bl { display: none; }
.bar.drag { cursor: grab; }
.bar.dragging { cursor: grabbing; opacity: .85; box-shadow: 0 0.5rem 1.25rem #0003; z-index: 5; transform: translateY(-50%); }
.g-row.complete .g-left { background: var(--amber-l); }
.g-out { color: var(--muted); font-size: 0.8125rem; padding-left: 1.125rem; }
.g-empty { padding: 2.5rem; text-align: center; color: var(--muted); }

/* ---------- login */
.login-body { min-height: 100vh; display: grid; place-items: center; padding: 1.5rem 1rem;
  background: radial-gradient(circle at 15% 10%, color-mix(in srgb, var(--acc) 22%, #1a1411), #0f0d0c 62%); }
.login-wrap { display: grid; grid-template-columns: 1.05fr 1fr; width: min(64rem, 100%); background: var(--panel);
  border-radius: 1.5rem; overflow: hidden; box-shadow: 0 2rem 5rem #0008, 0 0 0 1px #ffffff0d; }
.login-wrap > .panel { grid-column: span 2; margin: 0; }
/* partea din stânga: marca, mesajul și ce face aplicația, pe un fundal cu inelele unui buștean */
.login-side { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 2rem; padding: 2.75rem;
  color: #f3ece4; background: linear-gradient(155deg, color-mix(in srgb, var(--acc) 55%, #2a1609) 0%, #1c130e 55%, #120d0a 100%); }
.login-brand { display: flex; align-items: center; gap: 0.875rem; position: relative; z-index: 1; }
.login-logo { display: block; width: 3.25rem; height: 3.25rem; flex: none; filter: drop-shadow(0 6px 14px #0006); }
.login-logo.sm { width: 2.25rem; height: 2.25rem; filter: none; }
.login-logo .logo-svg { width: 100%; height: 100%; display: block; }
.login-name { display: flex; flex-direction: column; line-height: 1.05; }
.login-name b { font-size: 1.5rem; letter-spacing: 2px; color: #fff; }
.login-name small { font-size: 0.75rem; letter-spacing: 3px; color: #e9c9a6; margin-top: 0.25rem; }
.login-hero { position: relative; z-index: 1; margin-top: auto; }
.login-hero h1 { margin: 0 0 0.75rem; font-size: 2.125rem; line-height: 1.15; color: #fff; letter-spacing: -.01em; }
.login-hero h1 span { color: #f5b77d; }
.login-hero p { margin: 0; color: #d8cabd; font-size: 1rem; max-width: 26rem; }
.login-feats { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.875rem; position: relative; z-index: 1; }
.login-feats li { display: flex; gap: 0.875rem; align-items: flex-start; padding: 0.75rem 0.875rem; border-radius: 0.875rem;
  background: #ffffff0d; border: 1px solid #ffffff14; backdrop-filter: blur(4px); }
.login-feats svg { flex: none; width: 1.5rem; height: 1.5rem; fill: none; stroke: #f5b77d; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; margin-top: 0.125rem; }
.login-feats span { display: flex; flex-direction: column; font-size: 0.875rem; color: #cbbcad; }
.login-feats b { color: #fff; font-size: 0.9375rem; }
.login-rings { position: absolute; right: -9rem; bottom: -9rem; width: 26rem; height: 26rem; z-index: 0; pointer-events: none;
  fill: none; stroke: #f5b77d; stroke-width: 1.2; opacity: .14; }
/* formularul */
.login-card { padding: 3rem 2.75rem; display: flex; flex-direction: column; gap: 1rem; justify-content: center; }
.login-card h2 { font-size: 1.875rem; margin: 0; letter-spacing: -.01em; }
.login-card > .muted { margin: -0.5rem 0 0.5rem; }
.login-card-brand { display: none; align-items: center; gap: 0.625rem; font-size: 1.125rem; }
.login-field { display: flex; flex-direction: column; gap: 0.375rem; font-weight: 600; font-size: 0.875rem; }
.login-input { position: relative; display: flex; align-items: center; }
.login-input > svg { position: absolute; left: 0.875rem; width: 1.125rem; height: 1.125rem; fill: none; stroke: var(--muted);
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.login-input input { width: 100%; padding: 0.875rem 0.875rem 0.875rem 2.75rem; font-size: 1rem; border-radius: 0.75rem; }
.login-input input:focus { border-color: var(--acc); box-shadow: 0 0 0 4px color-mix(in srgb, var(--acc) 18%, transparent); outline: none; }
.login-input:focus-within > svg { stroke: var(--acc); }
.login-input input#loginPw { padding-right: 3rem; }
.login-eye { position: absolute; right: 0.375rem; width: 2.5rem; height: 2.5rem; border: 0; background: none; border-radius: 0.5rem;
  cursor: pointer; display: grid; place-items: center; color: var(--muted); }
.login-eye svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 1.8; }
.login-eye:hover, .login-eye.on { color: var(--acc); background: var(--soft); }
.login-caps { margin: -0.375rem 0 0; color: var(--amber, #b7791f); font-size: 0.8125rem; font-weight: 600; }
.login-submit { padding: 0.9375rem; font-size: 1rem; border-radius: 0.75rem; margin-top: 0.375rem; position: relative; }
.login-submit.busy span { opacity: 0; }
.login-submit.busy::after { content: ""; position: absolute; inset: 0; margin: auto; width: 1.25rem; height: 1.25rem;
  border: 2.5px solid #fff8; border-top-color: #fff; border-radius: 50%; animation: login-spin .7s linear infinite; }
@keyframes login-spin { to { transform: rotate(360deg); } }
.login-foot { text-align: center; margin: 0.5rem 0 0; }

@media (max-width: 1100px) {
  .sidebar { width: 15.625rem; } nav a { font-size: 0.9375rem; padding: 0.75rem; } .brand span { font-size: 1.125rem; }
  .content { padding: 1.25rem; } .topbar { padding: 0.875rem 1.25rem; }
}
/* ===================================================================== telefon & tabletă */
.nav-toggle { display: none; }
.nav-backdrop { position: fixed; inset: 0; z-index: 90; background: var(--backdrop); }

/* ecrane tactile: ținte de atingere de cel puțin ~40 px */
@media (pointer: coarse) {
  .btn.sm { min-height: 2.5rem; padding-inline: 0.875rem; }
  .hdot { width: 1.75rem; height: 1.75rem; font-size: 0.875rem; }
  .seg button, .seg a { min-height: 2.5rem; }
  input[type=checkbox], .grid2 input[type=checkbox], .grid3 input[type=checkbox],
  label.check > input[type=checkbox] { width: 1.25rem; height: 1.25rem; }
}

/* tabletă: tabelele late derulează orizontal în panoul lor, nu împing pagina */
@media (max-width: 1100px) {
  .panel { min-width: 0; }
  .items { grid-template-columns: minmax(0, 1fr); }
  .items > .item { min-width: 0; }
  .panel > .tbl, .panel > form > .tbl, .items .tbl, .item .tbl { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .stats { grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); }
}

@media (max-width: 760px) {
  html { font-size: calc(15px * var(--ui-scale, 1)); }
  /* meniul lateral devine sertar */
  .layout { display: block; }
  .sidebar { position: fixed; z-index: 100; left: 0; top: 0; bottom: 0; height: 100dvh; width: min(20rem, 86vw);
    transform: translateX(-102%); transition: transform .22s ease; box-shadow: 0 0 2.5rem #0006; }
  html.nav-open .sidebar { transform: none; }
  html.nav-open { overflow: hidden; }
  .brand-toggle .chev { display: none; }
  .nav-toggle { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem;
    margin: -0.25rem 0 -0.25rem -0.375rem; border: 0; border-radius: 0.625rem; background: none; color: var(--text); cursor: pointer; flex: none; }
  .nav-toggle:active { background: var(--soft2); }

  /* bara de sus compactă, fixată sus */
  .topbar { padding: 0.5rem 0.75rem; gap: 0.5rem; flex-wrap: nowrap; padding-top: max(0.5rem, env(safe-area-inset-top)); }
  .crumb { font-size: 1rem; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .crumb-company, .demo-flag { display: none; }
  .topbar .actions { gap: 0.5rem; flex-wrap: nowrap; }
  .help-btn { padding: 0.5rem 0.625rem; }

  .content { padding: 0.75rem; padding-bottom: max(1.5rem, env(safe-area-inset-bottom)); }
  .panel { padding: 1rem; border-radius: 0.875rem; margin-bottom: 0.875rem; }
  .panel-head { flex-wrap: wrap; gap: 0.625rem; }
  .panel-head > .btn, .panel-head > .actions { margin-left: auto; }
  .stats { grid-template-columns: 1fr 1fr; gap: 0.625rem; margin-bottom: 0.875rem; }
  .stat { padding: 0.75rem 0.875rem; }
  .stat b { font-size: 1.125rem; }

  /* formulare: o coloană; text de 16 px ca iPhone să nu mărească pagina la atingerea unui câmp */
  .grid2, .grid3 { grid-template-columns: 1fr; } .grid2 .span2, .grid3 .span2 { grid-column: auto; }
  input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea { font-size: 16px; }
  .w-wide, .w140, .w100 { width: 100%; max-width: 100%; }
  form.inline, .filters { flex-wrap: wrap; }
  .modal-actions { position: sticky; bottom: 0; background: var(--panel); padding-top: 0.625rem; margin-top: 0.875rem; }
  .modal-actions .btn { flex: 1; justify-content: center; }

  /* butoane segmentate (filtre de stare, grupare Gantt): derulează orizontal în loc să rupă textul */
  .seg { overflow-x: auto; flex-wrap: nowrap; max-width: 100%; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .seg::-webkit-scrollbar { display: none; }
  .seg > * { white-space: nowrap; flex: none; }
  .admin-tabs { position: sticky; top: 3.5rem; z-index: 20; }

  /* ferestrele (pop-up) ocupă tot ecranul */
  .modal { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 0; padding: 1rem; }
  .small-modal { height: auto; max-height: 90dvh; margin: auto auto 0; border-radius: 1rem 1rem 0 0; }

  /* toate tabelele derulează orizontal în panoul lor */
  .panel .tbl, .tbl.users-tbl { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .tbl th, .tbl td { white-space: nowrap; }
  .tbl td:has(> small), .tbl td:has(> br) { white-space: normal; min-width: 9rem; }

  /* tabele → carduri: un rând = un card, fiecare valoare cu eticheta coloanei în stânga (etichetele le pune app.js) */
  .tbl.cards, .panel .tbl.cards { display: block; overflow: visible; border: 0; }
  .tbl.cards thead, .tbl.cards tr:not(:has(> td)) { display: none; }
  .tbl.cards tbody { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.625rem; width: 100%; }
  .tbl.cards td > * { min-width: 0; }
  .tbl.cards tr { display: block; border: 1px solid var(--line); border-radius: 0.75rem; background: var(--panel); padding: 0.375rem 0.75rem; }
  .tbl.cards td { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.4375rem 0;
    border: 0; border-bottom: 1px dashed var(--line2); white-space: normal; text-align: right; min-width: 0; }
  .tbl.cards td:last-child { border-bottom: 0; }
  .tbl.cards td:first-child { font-weight: 700; font-size: 1rem; }
  .tbl.cards td[data-label]::before { content: attr(data-label); flex: none; max-width: 45%; text-align: left;
    color: var(--muted); font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
  .tbl.cards td[data-label=""]::before { content: none; }
  .tbl.cards td:empty { display: none; }
  .tbl.cards td { width: auto !important; max-width: none !important; }
  .tbl.cards td > input:not([type=checkbox]), .tbl.cards td > select, .tbl.cards td > .ms-num { flex: 1; min-width: 0; max-width: 65%; }
  .tbl.cards td > .ms-num input { width: 100%; }
  .tbl.cards td.c-wide { display: block; text-align: left; }
  .tbl.cards td:has(> small), .tbl.cards td:has(> br) { min-width: 0; }
  .tbl.cards tr:has(> td.c-wide:only-child) { background: var(--soft); }
  .tbl-scroll:has(> .tbl.cards) { overflow: visible; }

  /* comenzi: produsele (celule de grilă) nu se mai lățesc după tabelul de etape — tabelul derulează */
  .ordercard { min-width: 0; }
  .items { grid-template-columns: minmax(0, 1fr); }
  .items > .item, .item > summary { min-width: 0; max-width: 100%; }
  .filters > .seg { min-width: 0; flex: 1 1 100%; }
  .filters > select { flex: 1 1 auto; min-width: 0; }
  /* listele derulante iau lățimea celei mai lungi opțiuni — pe telefon nu depășesc ecranul */
  select { max-width: 100%; min-width: 0; text-overflow: ellipsis; }
  .filters, form.inline, .proc-select, .item-actions, .panel-head > div { min-width: 0; max-width: 100%; }
  form.inline > *, .proc-select > *, .filters > * { max-width: 100%; min-width: 0; }
  .proc-select { display: flex; flex-wrap: wrap; gap: 0.5rem; }
  .ordercard header { flex-wrap: wrap; gap: 0.625rem; }
  .oc-right { flex-wrap: wrap; justify-content: flex-start; }
  .oc-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .item summary { flex-wrap: wrap; }
  .item-actions form { flex-wrap: wrap; }
  .item-actions select { max-width: 100%; }
  .ordercard footer { flex-wrap: wrap; }

  /* planificare */
  .util-grid { grid-template-columns: 1fr 1fr; gap: 0.5rem; }
  .gantt { max-height: 70dvh; min-height: 55dvh; }
  .gantt-head { padding: 0.625rem 0.75rem; font-size: 0.875rem; }
  .gantt-note { display: none; }
  /* Gantt: coloana cu denumiri îngustă (lățimea e citită și de gantt.js), butonul „+ Etapă” sub titlu */
  .g-left { width: 10.5rem; padding: 0.375rem 0.5rem; flex-direction: column; align-items: flex-start; justify-content: center; gap: 0.125rem; }
  .g-item .g-left { padding-left: 0.75rem; }
  .g-title { width: 100%; }
  .g-title b, .g-group .g-title b { font-size: 0.875rem; max-width: 100%; }
  .g-title small, .g-item .g-title small { font-size: 0.75rem; }
  .g-add, .g-add.sm { font-size: 0.8125rem; }
  .g-header .g-left { font-size: 0.875rem; }
  .g-row, .g-group { min-height: 3.75rem; }
  .g-group .g-track { font-size: 0.875rem; padding-left: 0.5rem; }

  /* cardurile de etapă (Progres Hală), procese, utilaje: o coloană */
  .machinecards, .proc-grid, .ordercards { grid-template-columns: 1fr !important; }
  .progress-range { height: 2rem; }
  .quick .btn { flex: 1; justify-content: center; }

  /* butoanele „?” din pagină aglomerează ecranul mic — explicațiile rămân în butonul „Ajutor” de sus */
  .content .hdot:not(.static) { display: none; }
  .flash.weak-pw { font-size: 0.875rem; }
  .util-panel { padding: 0.75rem 1rem; }
  .util-panel > summary { display: grid; grid-template-columns: auto 1fr; gap: 0.5rem; align-items: start; }
  .util-panel > summary::before { margin-top: 0.125rem; }
  .util-panel > summary > * { grid-column: 2; min-width: 0; }
  .util-panel > summary .btn { margin-left: 0; width: 100%; justify-content: center; white-space: normal; }

  .help-dlg { width: 100vw; }
  .login-wrap { grid-template-columns: 1fr; } .login-side { display: none; }
  .login-card { padding: 2rem 1.25rem; }
  .login-card-brand { display: flex; }
}
@media (max-width: 420px) {
  .util-grid { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr 1fr; }
}

/* ---------- inventar pe categorii */
.sidebar .subnav { display: flex; flex-direction: column; margin: -0.25rem 1.125rem 0.5rem 3.25rem; border-left: 1px solid var(--side-line); }
.sidebar .subnav a { padding: 0.375rem 0.75rem; font-size: 0.875rem; color: var(--side-muted); border-radius: 0 0.5rem 0.5rem 0; margin: 0; }
.sidebar .subnav a.sub { padding-left: 1.625rem; font-size: 0.8125rem; }
.sidebar .subnav a.gap { margin-top: 0.5rem; }
.sidebar .subnav a:hover { background: var(--side-hover); color: #fff; }
.sidebar .subnav a.on { color: #fff; font-weight: 700; box-shadow: inset 3px 0 0 var(--acc); }
html.sb-collapsed .sidebar .subnav { display: none; }
.inv-cats { display: flex; flex-wrap: wrap; gap: 0.375rem; margin: 0 0 0.875rem; }
.inv-cats a { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.375rem 0.75rem; border: 1px solid var(--line);
  border-radius: 999px; background: var(--panel); color: var(--text); font-size: 0.875rem; font-weight: 600; text-decoration: none; }
.inv-cats a.sub { font-weight: 500; color: var(--muted); }
.inv-cats a span { font-family: var(--mono); font-size: 0.75rem; color: var(--muted); }
.inv-cats a.on { background: var(--acc); border-color: var(--acc); color: #fff; }
.inv-cats a.on span { color: #fff; }
.inv-tbl { font-size: 0.8125rem; }
.inv-tbl th { white-space: nowrap; font-size: 0.6875rem; }
.mat-simple.inv-tbl td, .mat-simple.inv-tbl th { padding-left: 0.2rem; padding-right: 0.2rem; }
.mat-simple.inv-tbl input, .mat-simple.inv-tbl select { padding: 0.3rem 0.35rem; font-size: 0.8125rem; }
.mat-simple .ms-cat { display: block; padding-left: 0.35rem; font-size: 0.6875rem; }
.mat-simple .ms-text { width: 6.25rem; }
.mat-simple .ms-code, .mat-simple .ms-pos { width: 4.75rem; font-family: var(--mono); }
.mat-simple .ms-unit { width: 3.9rem; border-color: transparent; background-color: transparent; }
.mat-simple .ms-unit:hover { border-color: var(--line); }
.inv-tbl .ms-num input { width: 4rem; }
.inv-tbl .ms-num em { min-width: 0; font-size: 0.6875rem; }
.inv-tbl .ms-num.pct input { width: 2.4rem; padding-left: 0.2rem; padding-right: 0.2rem; }
.inv-tbl td.mono { font-size: 0.8125rem; white-space: nowrap; }
.ms-dot { display: inline-block; width: 0.5rem; height: 0.5rem; border-radius: 50%; margin-right: 0.25rem; vertical-align: middle; }
.ms-dot.ok { background: var(--green, #2f8f4e); }
.ms-dot.low { background: var(--red); box-shadow: 0 0 0 3px var(--red-l); }
.mat-simple.inv-tbl .ms-name { min-width: 8.5rem; }
.ms-chk { display: inline-flex; align-items: center; margin-right: 0.25rem; vertical-align: middle; }
.ms-chk input { width: 1.05rem; height: 1.05rem; }
.inv-tbl tfoot td { border-top: 2px solid var(--line); font-weight: 600; }
.extras-tbl .ms-num input { width: 4.5rem; }
@media (max-width: 820px) {
  .inv-cats { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 0.25rem; scrollbar-width: thin; }
  .inv-cats a { flex: none; }
  .tbl.cards td > .ms-text, .tbl.cards td > .ms-name, .tbl.cards td > .ms-unit { flex: 1; min-width: 0; max-width: 65%; width: auto; }
  .tbl.cards td:has(> .ms-name) { flex-wrap: wrap; }
  .tbl.cards td > .ms-name { max-width: 100%; }
  .tbl.cards .ms-cat { width: 100%; text-align: left; }
  .tbl.cards tfoot tr { display: block; }
}

/* ---------- Progres Hală: arhiva produselor terminate */
.karchive { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-top: 0.625rem;
  padding: 0.625rem 0.875rem; border: 1px dashed var(--line); border-radius: 0.75rem; color: var(--text); font-weight: 600;
  text-decoration: none; background: var(--panel); }
.karchive:hover { border-color: var(--acc); color: var(--acc); }
.asearch { width: 100%; max-width: 28rem; margin-bottom: 0.875rem; }
.alist { display: grid; gap: 0.5rem; }
.aitem { border: 1px solid var(--line); border-radius: 0.75rem; background: var(--panel); min-width: 0; }
.aitem > summary { display: flex; align-items: center; gap: 0.75rem; padding: 0.625rem 0.875rem; cursor: pointer; list-style: none; }
.aitem > summary::-webkit-details-marker { display: none; }
.aitem .ok { color: var(--green, #2f8f4e); font-weight: 700; }
.aitem .a-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.aitem .a-main small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aitem .a-meta { text-align: right; color: var(--muted); flex: none; }
.aitem[open] > summary { border-bottom: 1px solid var(--line); }
.aitem > .klist { padding: 0.5rem 0.75rem 0.75rem; margin: 0; }
@media (max-width: 600px) { .aitem > summary { flex-wrap: wrap; } .aitem .a-meta { text-align: left; width: 100%; padding-left: 1.5rem; } }

/* ---------- Rapoarte */

/* ---------- Închidere zi */
.head-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
/* ---------- prioritatea comenzilor */
.prio-panel > summary { cursor: pointer; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.prio-list { list-style: none; margin: 0.75rem 0; padding: 0; display: grid; gap: 0.375rem; }
.prio-list li { display: flex; align-items: center; gap: 0.625rem; padding: 0.375rem 0.625rem; border: 1px solid var(--line);
  border-radius: 0.625rem; background: var(--panel); min-width: 0; }
.prio-no { flex: none; width: 1.75rem; height: 1.75rem; border-radius: 50%; display: grid; place-items: center;
  background: var(--acc); color: #fff; font-weight: 700; font-size: 0.8125rem; }
.prio-main { flex: 1; min-width: 0; }

/* ---------- Panou Administrare → Documente PDF */
.pdf-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.pdf-common { display: grid; gap: 0.875rem; min-width: 0; border: 1px solid var(--line); border-radius: 0.875rem; padding: 1rem 1.125rem; margin: 0; }
.pdf-common legend { font-weight: 700; padding: 0 0.375rem; }
.pdf-common label { display: flex; flex-direction: column; gap: 0.3rem; font-weight: 600; min-width: 0; }
.pdf-common label.check { flex-direction: row; font-weight: 500; }
.pdf-common textarea { resize: vertical; }
.pdf-logo-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; }
.pdf-logo-now { width: 3.5rem; height: 3.5rem; object-fit: contain; border: 1px solid var(--line); border-radius: 0.625rem; background: #fff; padding: 0.25rem; }
.pdf-logo-row > label:not(.check) { flex: 1; min-width: 12rem; }
.pdf-row2 { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem; align-items: end; }
.pdf-row2 input[type=color] { width: 4rem; height: 2.5rem; padding: 0.125rem; cursor: pointer; }
.pdf-preview { display: grid; gap: 0.5rem; justify-items: center; position: sticky; top: 1rem; }
.pv-page { --pacc: #b5541c; width: min(100%, 19rem); aspect-ratio: 210 / 297; background: #fff; color: #1d1b19; border-radius: 0.375rem;
  box-shadow: 0 6px 24px #0003; padding: 1.25rem 1.125rem; display: flex; flex-direction: column; gap: 0.5rem; font-size: 0.625rem; overflow: hidden; }
.pv-head { display: flex; gap: 0.5rem; align-items: flex-start; border-bottom: 3px solid var(--pacc); padding-bottom: 0.5rem; margin-bottom: 0.375rem; }
.pv-head img { width: 1.875rem; height: 1.875rem; object-fit: contain; flex: none; }
.pv-head div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pv-head b { font-size: 0.8125rem; }
.pv-head small { color: #6b645c; white-space: pre-line; line-height: 1.3; max-height: 4.2em; overflow: hidden; }
.pv-title { color: var(--pacc); font-weight: 800; text-transform: uppercase; letter-spacing: .05em; font-size: 0.625rem; text-align: right; max-width: 40%; }
.pv-page > i { display: block; height: 0.375rem; border-radius: 3px; background: #ece6de; }
.pv-page > i.short { width: 60%; }
.pv-foot { margin-top: auto; text-align: center; color: #6b645c; border-top: 1px solid #ece6de; padding-top: 0.375rem; min-height: 1.4em; }
.pdf-docs-h { margin: 1.5rem 0 0.5rem; }
.pdf-docs td { vertical-align: middle; }
.pdf-docs .pdf-title { width: 100%; min-width: 11rem; }
.seg.orient { display: inline-flex; flex-wrap: nowrap; }
.seg.orient label { cursor: pointer; }
.seg.orient input { position: absolute; opacity: 0; pointer-events: none; }
.seg.orient span { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.375rem 0.625rem; border-radius: 0.5rem; font-size: 0.8125rem; font-weight: 600; }
.seg.orient input:checked + span { background: var(--panel); box-shadow: 0 1px 3px #0002; color: var(--acc); }
.seg.orient input:focus-visible + span { outline: 2px solid var(--acc); }
.seg.orient i { display: inline-block; border: 1.5px solid currentColor; border-radius: 2px; }
.seg.orient i.o-portrait { width: 0.625rem; height: 0.875rem; }
.seg.orient i.o-landscape { width: 0.875rem; height: 0.625rem; }
@media (max-width: 900px) {
  .pdf-grid { grid-template-columns: minmax(0, 1fr); }
  .pdf-preview { position: static; }
  .pdf-row2 { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- conturi: parolă uitată, 2FA, contul meu, panoul root */
.auth-solo { grid-template-columns: 1fr; width: min(28rem, 100%); }
.auth-solo .login-card { padding: 2.25rem 2rem; }
.auth-solo .login-card-brand { display: flex; }
.login-pw-row { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; }
.login-forgot { font-weight: 500; font-size: 0.8125rem; }
.otp-input { letter-spacing: 0.35em; font-family: var(--mono); font-size: 1.25rem !important; }
.account-grid { display: grid; gap: 1rem; max-width: 56rem; }
.account-grid h3 { margin: 0.5rem 0 0.25rem; }
.totp-steps { padding-left: 1.25rem; display: grid; gap: 0.5rem; }
.totp-key { font-size: 1rem; letter-spacing: 0.08em; padding: 0.125rem 0.375rem; background: var(--soft); border-radius: 0.375rem; user-select: all; }
.root-badge { display: inline-block; font-size: 0.6875rem; letter-spacing: .06em; padding: 0.0625rem 0.375rem; border-radius: 0.3125rem;
  background: #1d1b19; color: #f5b77d; border: 1px solid #f5b77d66; vertical-align: middle; }
.kv { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.375rem 1rem; margin: 0 0 1rem; }
.kv dt { color: var(--muted); font-size: 0.8125rem; font-weight: 600; }
.kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.kv .ok, td .ok { color: var(--green, #2f8f4e); font-weight: 600; }
.root-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.5rem 0 1rem; }
.root-actions form { margin: 0; }
.sudo-need { font-size: 0.75rem; opacity: .7; }
.root-transfer { margin-top: 1rem; }
.root-transfer summary { cursor: pointer; font-weight: 600; color: var(--red); }
.sudo-panel { max-width: 36rem; }
.reset-link { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; margin-top: 0.75rem; }
.reset-link code { flex: 1; min-width: 0; overflow-wrap: anywhere; background: var(--soft); padding: 0.625rem 0.75rem; border-radius: 0.5rem; font-size: 0.875rem; user-select: all; }
.login-remember { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start;
  gap: .45rem; margin: .2rem 0 .9rem; cursor: pointer; font-weight: 600; text-align: left; }
.login-remember small { font-weight: 400; }
.login-remember input { width: 1.05rem; height: 1.05rem; flex: none; margin: 0; }


/* Contul meu: notificări push */
.push-box { margin: .4rem 0 .8rem; }
.push-state { margin: 0 0 .6rem; }
.push-state.ok { color: var(--ok, #3c9a5f); font-weight: 600; }
.push-prefs { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1rem; margin: .4rem 0 1rem; }
.push-prefs label { display: inline-flex; align-items: center; gap: .35rem; }

.push-box [hidden] { display: none !important; }
.push-state { line-height: 1.45; }
.push-prefs label { flex-direction: row; margin: 0; font-weight: 500; }
.push-prefs input[type=checkbox] { width: auto; margin: 0; }


/* aplicația instalabilă (PWA) */
[data-install][hidden] { display: none !important; }
.login-install { display: block; text-align: center; margin: .9rem 0 0; font-weight: 600; color: var(--accent, #e07a2e); text-decoration: none; }
.install-steps { line-height: 1.6; padding-left: 1.2rem; }


.tv-link-box { display: flex; gap: .6rem; margin: 1rem 0; }
.tv-link-box input { flex: 1; min-width: 0; }


/* ============================================================================ meniul lateral: derulează întreg
   (Preferințe și Deconectare vin după module, nu stau fixate jos — pe orice dispozitiv) */
.sidebar { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--side-line) transparent; }
.sidebar nav { flex: none; min-height: auto; overflow: visible; }
.sidebar .logout.prefs { margin-top: 0.75rem; }
.sidebar .logout.prefs.active { background: var(--side-active); color: #fff; box-shadow: inset 3px 0 0 var(--acc); }

/* taburile grupate ale contului root */

/* Preferințe → aspect pe telefon */
.mui-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 0.75rem; margin-bottom: 1rem; }
.mui-card { display: flex; gap: 0.875rem; align-items: center; padding: 0.875rem; border: 2px solid var(--line); border-radius: 0.875rem;
  cursor: pointer; flex-direction: row; margin: 0; }
.mui-card:has(input:checked) { border-color: var(--acc); background: var(--acc-l); }
.mui-card input { position: absolute; opacity: 0; pointer-events: none; }
.mui-card b { display: block; }
.mui-card small { color: var(--muted); font-weight: 400; line-height: 1.35; }
.mui-preview { flex: none; width: 3.25rem; height: 5.5rem; border-radius: 0.625rem; border: 2px solid var(--line-strong); position: relative;
  overflow: hidden; display: flex; flex-direction: column; gap: 0.25rem; padding: 0.375rem 0.3rem; }
.mui-preview i { display: block; height: 0.875rem; border-radius: 0.25rem; }
.mui-preview b { position: absolute; left: 0; right: 0; bottom: 0; height: 0.75rem; }
.mui-atelier .mui-preview { background: #f7f2ea; }
.mui-atelier .mui-preview i { background: #fff; box-shadow: 0 0 0 1px #e8dccb; }
.mui-atelier .mui-preview b { background: #2a2420; border-top: 2px solid #c4500c; }
.mui-insta .mui-preview { background: #fff; padding: 0.375rem 0; gap: 0.2rem; }
.mui-insta .mui-preview i { background: #efefef; border-radius: 0; height: 1.25rem; }
.mui-insta .mui-preview b { background: #fff; border-top: 1px solid #dbdbdb; }

/* sub-taburi (ex. Inventar → Materiale: Stoc · Mișcări · Inventarieri): mai discrete decât taburile principale */
.subtabs { display: flex; gap: 0.25rem; margin: -0.5rem 0 1.25rem; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.subtabs a { padding: 0.625rem 0.875rem; color: var(--muted); font-weight: 600; white-space: nowrap; border-bottom: 2px solid transparent;
  margin-bottom: -1px; text-decoration: none; }
.subtabs a:hover { color: var(--text); }
.subtabs a.on { color: var(--text); border-bottom-color: var(--acc); }
.subtabs em { font-style: normal; background: var(--amber-l); color: var(--amber-t); border-radius: 1rem; padding: 0 0.4375rem; font-size: 0.75rem; }
.tb-inline { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }
/* categoriile inventarului apar în meniul din stânga; rândul din pagină doar unde meniul nu le arată */
@media (min-width: 761px) { html:not(.sb-collapsed) .inv-cats { display: none; } }

/* centrul de setări (Preferințe → teme, afișare, cont, administrare): lista secțiunilor stă vertical, în stânga */
.settings-nav .tabs-sep { display: none; }
.settings-nav span { font-family: inherit; font-size: inherit; color: inherit; padding: 0; }  /* nu ia stilul numerelor din .seg span */
@media (min-width: 761px) {
  .content:has(> .settings-nav) { display: grid; grid-template-columns: 16.5rem minmax(0, 1fr); column-gap: 1.75rem; align-items: start; }
  .content:has(> .settings-nav) > * { grid-column: 2; min-width: 0; }
  .content:has(> .settings-nav) > .settings-nav { grid-column: 1; grid-row: 1 / span 60; position: sticky; top: 6.5rem; }
  .settings-nav { display: flex; flex-direction: column; align-items: stretch; gap: 0.125rem; width: auto; padding: 0.5rem;
    background: var(--panel); border: 1px solid var(--line); border-radius: 1rem; }
  .settings-nav > a, .settings-nav > button { display: flex; align-items: center; gap: 0.75rem; text-align: left;
    padding: 0.5rem 0.625rem; border-radius: 0.75rem; color: var(--text); font: inherit; border: 0; background: none;
    position: relative; cursor: pointer; text-decoration: none; }
  .settings-nav > a:hover, .settings-nav > button:hover { background: var(--soft); }
  .settings-nav > .on { background: var(--acc-l); }
  .settings-nav > .on::before { content: ""; position: absolute; left: -0.5rem; top: 0.5rem; bottom: 0.5rem; width: 3px;
    border-radius: 0 3px 3px 0; background: var(--acc); }
  .sn-ico { flex: none; width: 2.125rem; height: 2.125rem; border-radius: 0.625rem; background: var(--soft2); display: grid; place-items: center;
    color: var(--text2); }
  .sn-ico svg { width: 1.125rem; height: 1.125rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .settings-nav > .on .sn-ico { background: var(--acc); color: var(--on-acc); }
  .sn-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
  .sn-label { font-weight: 600; font-size: 0.9375rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .sn-text small { color: var(--muted); font-size: 0.75rem; font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .settings-nav > .on .sn-label { color: var(--acc-d); }
  .settings-nav .tabs-sep { display: block; margin: 0.875rem 0.625rem 0.375rem; font: 600 0.75rem/1 inherit; font-family: inherit;
    color: var(--muted); letter-spacing: .02em; }
  .settings-nav .tabs-sep:first-child { margin-top: 0.375rem; }
}
@media (min-width: 761px) and (max-width: 1100px) {
  .content:has(> .settings-nav) { grid-template-columns: 12.5rem minmax(0, 1fr); column-gap: 1rem; }
}

/* jurnale lungi (audit, evenimente de securitate, alerte): zonă proprie cu bară de derulare și antet fix */
.log-scroll { max-height: min(32rem, 60vh); overflow: auto; border: 1px solid var(--line); border-radius: 0.75rem;
  scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; overscroll-behavior: contain; }
.log-scroll .tbl { margin: 0; border: 0; }
.log-scroll th { position: sticky; top: 0; z-index: 1; background: var(--panel); box-shadow: 0 1px 0 var(--line); }
.log-scroll td:last-child { white-space: normal; overflow-wrap: anywhere; min-width: 10rem; }  /* evenimentul se rupe pe rânduri */
@media (max-width: 760px) { .log-scroll { max-height: 55vh; } .panel .log-scroll .tbl { display: table; overflow: visible; } }

/* ============================================================================ Tablou de bord */
/* culorile celor două serii (validate pentru daltonism: turcoaz + violet), alt pas pe temele întunecate */
:root { --s1: #1baf7a; --s2: #6250d6; }
:root:is([data-theme="intunecat"], [data-theme="nuc-noapte"], [data-theme="padure-noapte"], [data-theme="miezul-noptii"], [data-theme="carbune"], [data-theme="panou"]) {
  --s1: #199e70; --s2: #9085e9; }
.db-hero { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.db-hero h2 { margin: 0; font-size: 1.5rem; }
.db-hero p { margin: 0.25rem 0 0; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1rem; margin-bottom: 1.25rem; }
.kpi { --tone: var(--s1); background: var(--panel); border: 1px solid var(--line); border-radius: 1rem; padding: 1.125rem 1.25rem;
  display: flex; flex-direction: column; gap: 0.625rem; }
.kpi-violet { --tone: var(--s2); }
.kpi-red { --tone: var(--red); }
.kpi-amber { --tone: var(--amber); }
.kpi { container-type: inline-size; }
/* valoarea mare nu iese din card: titlul trece deasupra când nu încap alături, iar cifra se micșorează cu cardul */
.kpi-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0.375rem 0.75rem; min-width: 0; }
.kpi-top h3 { flex: 1 1 7rem; min-width: 0; }
.kpi h3 { margin: 0; font-size: 0.8125rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text2); }
.kpi-top b { margin-left: auto; font-size: clamp(1.125rem, 11cqi, 1.625rem); line-height: 1; white-space: nowrap; max-width: 100%; }
.kpi-bar { display: flex; align-items: center; gap: 0.625rem; }
.kpi-badge { flex: none; font-size: 0.75rem; font-weight: 700; padding: 0.125rem 0.5rem; border-radius: 0.375rem;
  background: color-mix(in srgb, var(--tone) 22%, transparent); color: var(--text); }
.kpi-track { flex: 1; height: 0.375rem; border-radius: 1rem; background: var(--track); overflow: hidden; }
.kpi-track i { display: block; height: 100%; border-radius: 1rem; background: var(--tone, var(--s1)); }
.kpi-track.lvl-high i { background: var(--red); }
.kpi-track.lvl-mid i { background: var(--amber); }
.kpi-track.lvl-low i { background: var(--s1); }
.db-grid { display: grid; grid-template-columns: minmax(0, 1fr) 18rem; gap: 1.25rem; align-items: start; }
.db-grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: 1.25rem; }
.db-side { display: flex; flex-direction: column; gap: 1.25rem; }
.db-side .panel { margin: 0; }
.db-legend { display: flex; gap: 1rem; font-size: 0.875rem; color: var(--text2); flex-wrap: wrap; }
.sw { display: inline-block; width: 0.875rem; height: 0.25rem; border-radius: 1rem; vertical-align: middle; margin-right: 0.375rem; }
.sw-1 { background: var(--s1); } .sw-2 { background: var(--s2); }
.line-chart { width: 100%; min-height: 220px; }
.line-chart svg, .spark svg { display: block; width: 100%; height: auto; max-width: 100%; touch-action: pan-y; stroke: none; fill: none; }
:is(.line-chart, .spark) text { stroke: none; }
.line-chart .grid { stroke: var(--line); stroke-width: 1; }
.line-chart .axis { stroke: var(--line-strong); stroke-width: 1; }
.line-chart .now { stroke: var(--line-strong); stroke-width: 1; }
.line-chart .cross { stroke: var(--muted); stroke-width: 1; }
.line-chart .tick { fill: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.line-chart .tick.cur { fill: var(--text); font-weight: 700; }
.line-chart .end-label { fill: var(--text2); font-size: 12px; font-weight: 600; }
:is(.line-chart, .spark) .line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
:is(.line-chart, .spark) .line.s1 { stroke: var(--s1); } :is(.line-chart, .spark) .line.s2 { stroke: var(--s2); }
:is(.line-chart, .spark) .area.s1 { fill: var(--s1); opacity: 0.1; }
:is(.line-chart, .spark) .dot { stroke: var(--panel); stroke-width: 2; }
:is(.line-chart, .spark) .dot.s1 { fill: var(--s1); } :is(.line-chart, .spark) .dot.s2 { fill: var(--s2); }
.db-table { margin-top: 0.75rem; }
.db-table summary { cursor: pointer; color: var(--muted); font-size: 0.875rem; }
.spark-card { display: flex; flex-direction: column; gap: 0.5rem; padding: 1rem 1.125rem; }
.spark-card h3 { margin: 0; font-size: 0.9375rem; }
.spark-row { display: flex; align-items: center; gap: 0.75rem; }
.spark-row .spark { flex: 1; min-width: 0; }
.spark-row b { font-size: 1.25rem; white-space: nowrap; }
.dl-row { display: grid; grid-template-columns: minmax(0, 1fr) 8rem auto; gap: 0.875rem; align-items: center; padding: 0.625rem 0;
  border-bottom: 1px solid var(--line2); }
.dl-row:last-child { border-bottom: 0; }
.dl-main { display: flex; flex-direction: column; min-width: 0; }
.dl-main b, .dl-main small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dl-prog { display: flex; align-items: center; gap: 0.5rem; }
.dl-prog small { min-width: 2.5rem; text-align: right; color: var(--text2); }
.due-pill { font-size: 0.75rem; font-weight: 700; padding: 0.1875rem 0.5625rem; border-radius: 1rem; background: var(--soft2); white-space: nowrap; }
.due-pill.warn { background: var(--amber-l); color: var(--amber-t); }
.due-pill.bad { background: var(--red-l); color: var(--red); }
.chart-tip { position: fixed; z-index: 300; pointer-events: none; background: var(--panel); color: var(--text); border: 1px solid var(--line-strong);
  border-radius: 0.625rem; padding: 0.5rem 0.75rem; font-size: 0.8125rem; box-shadow: 0 0.5rem 1.5rem #0004; display: flex;
  flex-direction: column; gap: 0.25rem; min-width: 9rem; }
.chart-tip span { display: flex; align-items: center; gap: 0.375rem; color: var(--text2); }
.chart-tip span b { margin-left: auto; color: var(--text); }
@media (max-width: 1100px) { .db-grid { grid-template-columns: minmax(0, 1fr); } .db-side { flex-direction: row; flex-wrap: wrap; }
  .db-side .spark-card { flex: 1 1 14rem; } }
@media (max-width: 760px) { .kpis { grid-template-columns: 1fr 1fr; gap: 0.625rem; } .kpi { padding: 0.875rem; }
  .kpi-top { flex-direction: column; align-items: flex-start; gap: 0.375rem; } .kpi-top b { margin-left: 0; font-size: clamp(1rem, 12cqi, 1.375rem); }
  .dl-row { grid-template-columns: minmax(0, 1fr) auto; } .dl-prog { grid-column: 1 / -1; grid-row: 2; } }

/* elementele doar pentru telefon sunt ascunse pe ecranele mari */
.tabbar, .m-logo, .m-filter-toggle, .tab-picker { display: none; }

/* ============================================================================ TELEFON — structura comună */
@media (max-width: 760px) {
  /* nimic nu mai poate împinge pagina în lateral (clip nu strică bara de sus lipită, spre deosebire de hidden) */
  html, body { overflow-x: clip; max-width: 100%; }
  .content, main { min-width: 0; max-width: 100vw; }
  /* formulare și butoane care nu se puteau rupe pe rândul următor */
  form.nowrap, .panel-head > form { display: flex; flex-wrap: wrap; gap: 0.5rem; width: 100%; white-space: normal; }
  form.nowrap > input, .panel-head > form > input { flex: 1 1 10rem; min-width: 0; width: auto; }
  .btn { white-space: normal; max-width: 100%; }
  form.inline.wrap > label, form.inline.wrap > select { flex: 1 1 100%; min-width: 0; }
  .pdf-logo-row > label:not(.check) { min-width: 0; flex-basis: 100%; }
  .pdf-row2 { grid-template-columns: minmax(0, 1fr); }
  .kv dd, .kv dt { min-width: 0; overflow-wrap: anywhere; }
  pre { white-space: pre-wrap; overflow-wrap: anywhere; }
  img, video, canvas { max-width: 100%; }

  /* taburile multe devin un singur buton „Secțiune ▾” (app.js); lista se deschide de jos */
  nav.has-picker { display: none !important; }
  .tab-picker { display: flex; align-items: center; gap: 0.75rem; width: 100%; margin: 0 0 0.875rem; padding: 0.75rem 1rem;
    border: 1px solid var(--line); border-radius: 0.875rem; background: var(--panel); color: var(--text); font: inherit; cursor: pointer;
    text-align: left; }
  .tab-picker span { flex: 1; min-width: 0; display: flex; flex-direction: column; }
  .tab-picker small { color: var(--muted); font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
  .tab-picker b { font-size: 1.0625rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tab-picker svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 2; flex: none; color: var(--muted); }
  .tab-sheet h3 { margin: 0 0 0.5rem; font-size: 1rem; color: var(--muted); }
  .tab-sheet .ts-list { display: flex; flex-direction: column; }
  .tab-sheet .ts-list button { display: flex; align-items: center; gap: 0.75rem; padding: 0.9375rem 0.5rem; border: 0;
    border-bottom: 1px solid var(--line2); background: none; color: var(--text); font: inherit; font-size: 1.0625rem; text-align: left; cursor: pointer; }
  .tab-sheet .ts-list button:last-child { border-bottom: 0; }
  .tab-sheet .ts-list h4 { margin: 0.875rem 0.5rem 0.25rem; font-size: 0.75rem; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
  .tab-sheet .ts-list h4:first-child { margin-top: 0; }
  .tab-sheet { max-height: 85dvh; overflow-y: auto; }
  .tab-sheet button:focus:not(:focus-visible) { outline: none; }
  .tab-sheet .ts-list button.on { font-weight: 700; color: var(--acc); }
  .tab-sheet .ts-list button.on::after { content: "✓"; margin-left: auto; }
  [data-mui="insta"] .tab-picker { border-radius: 0; border-width: 0 0 1px; margin: 0; }
  .nav-toggle { display: none; }                         /* meniul se deschide din bara de jos */
  .content { padding-bottom: calc(6rem + env(safe-area-inset-bottom)); }
  .help-btn { width: 2.5rem; height: 2.5rem; padding: 0; justify-content: center; border-radius: 50%; gap: 0; flex: none; }
  .topbar .hb-label { display: none; }
  .help-btn .hdot { margin: 0; }

  /* bara de jos */
  .tabbar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 80; justify-content: space-around;
    align-items: stretch; padding: 0.375rem 0.25rem calc(0.375rem + env(safe-area-inset-bottom)); }
  .tabbar > a, .tabbar > button { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 0.2rem; padding: 0.375rem 0.125rem; border: 0; background: none; font: inherit; cursor: pointer; color: inherit;
    -webkit-tap-highlight-color: transparent; text-decoration: none; }
  .tabbar svg { width: 1.5rem; height: 1.5rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .tabbar span { font-size: 0.6875rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  .tb-avatar { display: none; }
  /* barele noi sunt tot <nav>: fără stilul meniului lateral */
  .tabbar a { margin: 0; border-radius: 0; font-size: inherit; background: none; }
  .tabbar a:hover, .tabbar a.on { background: none; }
  .tabbar a svg { color: inherit; }
  .tabbar a span { flex: none; }

  /* meniul complet: o foaie care urcă de jos */
  .sidebar { top: auto; bottom: 0; left: 0; right: 0; width: 100%; height: auto; max-height: 88dvh; border-radius: 1.375rem 1.375rem 0 0;
    transform: translateY(105%); transition: transform .26s cubic-bezier(.2, .8, .2, 1); padding-bottom: env(safe-area-inset-bottom); }
  html.nav-open .sidebar { transform: none; }
  .sidebar::before { content: ""; display: block; width: 2.5rem; height: 0.3125rem; border-radius: 1rem; background: var(--side-line);
    margin: 0.625rem auto 0; flex: none; }
  .sidebar .brand-toggle { display: none; }
  .sidebar .usercard { margin-top: 0.75rem !important; }
  .sidebar .usercard { margin: 0 1rem 0.75rem; border-left: 1px solid var(--side-line); border-radius: 0.875rem; padding: 0.875rem 1rem; }
  .sidebar .logout { margin: 0.25rem 1rem; border-radius: 0.75rem; }
  .sidebar .logout:last-child { margin-bottom: 1rem; }
  .sidebar .subnav { display: none; }

  /* filtrele strânse sub un buton */
  .m-filter-toggle { display: flex; width: 100%; justify-content: flex-start; margin-bottom: 0.75rem; }
  .m-filter-toggle svg { width: 1.125rem; height: 1.125rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; flex: none; }
  .m-filter-toggle span { flex: 1; text-align: left; }
  .m-filter-toggle em { font-style: normal; background: var(--acc); color: var(--on-acc); border-radius: 1rem; padding: 0 0.5rem;
    font-size: 0.75rem; line-height: 1.375rem; }
  .m-collapsed { display: none !important; }
  .panel.m-collapsed + *, section.toolbar.m-collapsed { margin-top: 0; }
}

/* ============================================================================ TELEFON — aspectul „Atelier” */
@media (max-width: 760px) {
  [data-mui="atelier"] .topbar { background: color-mix(in srgb, var(--panel) 86%, transparent); backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px); padding-left: 1rem; }
  [data-mui="atelier"] .crumb { color: var(--text); font-size: 1.3125rem; font-weight: 800; letter-spacing: -0.01em; }
  [data-mui="atelier"] .panel { border-radius: 1.125rem; border-color: transparent; box-shadow: 0 1px 2px #0000000d, 0 4px 16px #0000000a; }
  [data-mui="atelier"] .stat { border-color: transparent; box-shadow: 0 1px 2px #0000000d, 0 4px 14px #0000000a; }

  [data-mui="atelier"] .tabbar { background: color-mix(in srgb, var(--panel) 92%, transparent); backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px); border-top: 1px solid var(--line); color: var(--muted); }
  [data-mui="atelier"] .tabbar svg { padding: 0.25rem 1rem; box-sizing: content-box; border-radius: 1rem; transition: background .15s; }
  [data-mui="atelier"] .tabbar .on { color: var(--acc); }
  [data-mui="atelier"] .tabbar .on svg { background: var(--acc-l); stroke-width: 2.2; }

  /* meniul ca dale */
  [data-mui="atelier"] .sidebar nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.625rem; padding: 0 1rem 0.5rem; }
  [data-mui="atelier"] .sidebar nav a { flex-direction: column; justify-content: center; text-align: center; gap: 0.5rem; margin: 0;
    padding: 0.875rem 0.375rem; border-radius: 1rem; background: var(--side2); font-size: 0.8125rem; line-height: 1.2; position: relative;
    min-height: 5.75rem; }
  [data-mui="atelier"] .sidebar nav a svg { width: 1.625rem; height: 1.625rem; color: var(--acc-t); }
  [data-mui="atelier"] .sidebar nav a.active { background: var(--side-active); box-shadow: inset 0 0 0 2px var(--acc); }
  [data-mui="atelier"] .sidebar nav a em { position: absolute; top: 0.375rem; right: 0.5rem; font-size: 0.6875rem; }
  [data-mui="atelier"] .sidebar nav a em.tag { position: static; }
  [data-mui="atelier"] .sidebar nav a span { overflow-wrap: anywhere; }
}

/* ============================================================================ TELEFON — aspectul „Instagram” */
@media (max-width: 760px) {
  :root[data-mui="insta"] {
    --bg: #fff; --panel: #fff; --soft: #fafafa; --soft2: #efefef; --track: #efefef;
    --line: #dbdbdb; --line2: #efefef; --line-strong: #c7c7c7;
    --text: #000; --text2: #262626; --muted: #737373;
    --acc: #0095f6; --acc-d: #1877f2; --acc-l: #e0f1ff; --acc-t: #0095f6; --acc-b: #b2dffc; --on-acc: #fff;
    --side: #fff; --side2: #fafafa; --side-text: #000; --side-muted: #737373; --side-line: #dbdbdb;
    --side-hover: #fafafa; --side-active: #efefef; --logout: #ed4956; --logout-ico: #ed4956; --logout-hover: #fff0f1;
    --ig: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    color-scheme: light;
  }
  :root[data-mui="insta"]:is([data-theme="intunecat"], [data-theme="nuc-noapte"], [data-theme="padure-noapte"], [data-theme="miezul-noptii"], [data-theme="carbune"], [data-theme="panou"]) {
    --bg: #000; --panel: #000; --soft: #121212; --soft2: #262626; --track: #262626;
    --line: #262626; --line2: #1a1a1a; --line-strong: #363636;
    --text: #f5f5f5; --text2: #e0e0e0; --muted: #a8a8a8; --acc-l: #0d2a40;
    --side: #000; --side2: #121212; --side-text: #f5f5f5; --side-muted: #a8a8a8; --side-line: #262626;
    --side-hover: #121212; --side-active: #262626; --logout-hover: #2a0f12; --mix: #000; --chip-text: #f5f5f5;
    color-scheme: dark;
  }
  [data-mui="insta"] body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background: var(--bg); }

  /* bara de sus: sigla scrisă de mână */
  [data-mui="insta"] .topbar { background: var(--panel); border-bottom: 1px solid var(--line); padding: 0.375rem 1rem; }
  [data-mui="insta"] .m-logo { display: block; font-family: "Segoe Script", "Snell Roundhand", "Brush Script MT", "Dancing Script", cursive;
    font-size: 1.625rem; font-weight: 700; color: var(--text); line-height: 1.15; letter-spacing: 0; }
  [data-mui="insta"] .crumb b { display: block; font-size: 0.75rem; color: var(--muted); font-weight: 600; margin-top: -0.125rem; }
  [data-mui="insta"] .help-btn { border: 0; background: none; }

  /* conținutul ca un „feed”: carduri pe toată lățimea, separate prin linii */
  [data-mui="insta"] .content { padding-left: 0; padding-right: 0; padding-top: 0; }
  [data-mui="insta"] .panel { border-radius: 0; border-width: 0 0 1px; margin-bottom: 0; box-shadow: none; padding: 1rem; }
  [data-mui="insta"] .panel h2 { font-size: 1rem; font-weight: 700; }
  [data-mui="insta"] .stats { gap: 0; margin: 0; padding: 0.875rem 0.5rem; border-bottom: 1px solid var(--line); background: var(--panel);
    grid-template-columns: repeat(auto-fit, minmax(5.5rem, 1fr)); }
  [data-mui="insta"] .stat { border: 0; background: none; text-align: center; padding: 0.25rem; box-shadow: none;
    display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 0.125rem; font-size: 0.75rem; color: var(--muted); line-height: 1.25; }
  [data-mui="insta"] .stat b { display: block; font-size: 1.0625rem; color: var(--text); }
  [data-mui="insta"] .panel .m-filter-toggle { margin: 0 0 0.75rem; }
  [data-mui="insta"] #flashes { padding: 0.5rem 1rem 0; }
  [data-mui="insta"] .m-filter-toggle { width: auto; margin: 0.75rem 1rem; border-radius: 0.5rem; background: var(--soft2); border: 0; }
  [data-mui="insta"] .btn { border-radius: 0.5rem; }
  [data-mui="insta"] .btn.primary { background: var(--acc); border-color: var(--acc); }
  [data-mui="insta"] .seg { border-radius: 0.5rem; }
  [data-mui="insta"] .taskcard, [data-mui="insta"] .ordercard { border-radius: 0; border-left: 0; border-right: 0; box-shadow: none; }
  [data-mui="insta"] .admin-tabs { border-radius: 0; width: 100%; background: var(--panel); border-bottom: 1px solid var(--line); }

  /* bara de jos: doar iconițe, ultima e avatarul */
  [data-mui="insta"] .tabbar { background: var(--panel); border-top: 1px solid var(--line); color: var(--text); padding-top: 0.25rem; }
  [data-mui="insta"] .tabbar span { display: none; }
  [data-mui="insta"] .tabbar svg { width: 1.6875rem; height: 1.6875rem; stroke-width: 1.7; }
  [data-mui="insta"] .tabbar .on svg { stroke-width: 2.6; }
  [data-mui="insta"] .tabbar > * { padding: 0.5rem 0; }
  [data-mui="insta"] .tb-grid { display: none; }
  [data-mui="insta"] .tabbar .tb-avatar { display: flex; width: 1.75rem; height: 1.75rem; border-radius: 50%; align-items: center; justify-content: center;
    background: var(--ig); color: #fff; font-size: 0.6875rem; font-weight: 700; }
  [data-mui="insta"] .tabbar .tb-menu.on .tb-avatar { box-shadow: 0 0 0 2px var(--panel), 0 0 0 3.5px var(--text); }

  /* meniul complet: listă simplă, ca setările din Instagram */
  [data-mui="insta"] .sidebar { box-shadow: 0 -0.25rem 2rem #0003; }
  [data-mui="insta"] .sidebar .brand-toggle { display: none; }
  [data-mui="insta"] .sidebar .usercard { background: none; border: 0; border-bottom: 1px solid var(--side-line); border-radius: 0; margin: 0.5rem 0 0.25rem;
    padding: 0.5rem 1.25rem 0.875rem; }
  [data-mui="insta"] .sidebar nav a { margin: 0; border-radius: 0; padding: 0.875rem 1.25rem; font-size: 1rem; }
  [data-mui="insta"] .sidebar nav a svg { color: var(--text); }
  [data-mui="insta"] .sidebar nav a.active { background: var(--side-active); font-weight: 700; }
  [data-mui="insta"] .sidebar .tag { background: var(--soft2); color: var(--text); }
  [data-mui="insta"] .sidebar .logout { margin: 0; border-radius: 0; padding: 0.875rem 1.25rem; border-top: 1px solid var(--side-line); }
  [data-mui="insta"] .roletest button.on { background: var(--text); color: var(--panel); }
}

/* --- Consumabilele unui produs (comandă nouă, produs) și oferta estimată --- */
.cons-box { grid-column: 1 / -1; min-width: 0; margin: 0.75rem 0; padding: 0.75rem 1rem 1rem; border: 1px solid var(--line);
  border-radius: 0.75rem; background: var(--soft); display: grid; gap: 0.875rem; }
.cons-box legend { padding: 0 0.375rem; font-weight: 700; }
.cons-sec { display: grid; gap: 0.5rem; justify-items: start; }
.cons-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.625rem; }
.cons-order-sec { padding-top: 0.75rem; border-top: 1px dashed var(--line-strong); }
.cons-order-sec .cons-title b { color: var(--text2); }
.cons-rows { display: grid; gap: 0.375rem; width: 100%; }
.cons-rows:empty { display: none; }
.cons-row { display: grid; grid-template-columns: minmax(0, 1fr) 6.5rem auto auto auto; gap: 0.375rem; align-items: center; }
.cons-row.cons-ord { grid-template-columns: minmax(0, 1fr) 5.5rem 4.5rem 8rem auto auto; }
.cons-row select, .cons-row input { min-width: 0; width: 100%; box-sizing: border-box; }
.cons-unit { color: var(--muted); font-size: 0.8125rem; min-width: 2rem; }
.cons-flag, .cons-chip em { font-style: normal; font-size: 0.6875rem; font-weight: 700; padding: 0.0625rem 0.4375rem; border-radius: 1rem;
  background: var(--amber-l); color: var(--amber-t); white-space: nowrap; }
.cons-date { display: flex; flex-direction: row; align-items: center; gap: 0.375rem; font-size: 0.75rem; color: var(--muted); white-space: nowrap; }
.cons-date input { width: auto; }
.cons-empty { margin: 0; }
.cons-total { margin: 0; font-weight: 700; font-size: 0.875rem; }
.cons-total:empty { display: none; }
.cons-list { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; margin: 0.25rem 0 0.75rem; }
.cons-chip { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.1875rem 0.625rem; border-radius: 1rem;
  background: var(--soft2); font-size: 0.8125rem; }
.cons-chip.to-order { background: var(--amber-l); }
.offer-est { display: flex; flex-wrap: wrap; gap: 0.375rem 1.25rem; align-items: baseline; margin-top: 0.5rem; padding: 0.75rem 1rem;
  border-radius: 0.75rem; background: var(--acc-l); font-size: 0.875rem; }
.offer-est .oe-total { margin-left: auto; font-size: 1rem; }
@media (max-width: 760px) {
  .cons-row, .cons-row.cons-ord { grid-template-columns: minmax(0, 1fr) 5.5rem auto; }
  .cons-row select, .cons-row.cons-ord input[name$="ord_name"] { grid-column: 1 / -1; }
  .cons-row .cons-date { grid-column: 1 / -1; }
  .offer-est .oe-total { margin-left: 0; flex-basis: 100%; }
}

/* --- Progres hală → Programul zilei: o bandă pe utilaj, etapele oră cu oră, închiderea zilei --- */
.pz-views a { text-decoration: none; white-space: nowrap; }
.pz-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1.25rem; margin: 0.25rem 0 1rem; }
.pz-days { display: flex; align-items: center; gap: 0.375rem; }
.pz-pick { margin: 0; }
.pz-pick input { width: auto; }
.pz-sum { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.875rem; color: var(--text2); }
.pz-sum b { color: var(--text); font-size: 1.0625rem; }
.pz-closed { font-size: 0.8125rem; font-weight: 600; color: var(--green-t); background: var(--green-l); padding: 0.125rem 0.625rem; border-radius: 1rem; }
.pz-lanes { display: grid; gap: 1rem; }
.pz-lane { border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); overflow: hidden; }
.pz-lane > header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem;
  padding: 0.875rem 1.125rem 0.5rem; }
.pz-lt { min-width: 0; }
.pz-lt h3 { margin: 0; font-size: 1rem; }
.pz-lt small { color: var(--muted); }
.pz-load { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; color: var(--text2); white-space: nowrap; }
.pz-load b { color: var(--text); font-size: 1rem; }
.pz-load i { display: block; width: 7rem; height: 0.4375rem; border-radius: 1rem; background: var(--track); overflow: hidden; }
.pz-load i span { display: block; height: 100%; background: var(--green); border-radius: 1rem; }
.pz-load.over b { color: var(--red); } .pz-load.over i span { background: var(--red); }
.pz-day { padding: 0 1.125rem 0.375rem; }
.pz-track { position: relative; height: 1.75rem; border-radius: 0.5rem; background: var(--soft2); overflow: hidden; }
.pz-seg { position: absolute; top: 0; bottom: 0; background: var(--c); border-right: 2px solid var(--panel); display: flex;
  align-items: center; justify-content: center; overflow: hidden; }
.pz-seg em { font-style: normal; font-size: 0.6875rem; font-weight: 700; color: #1d1b19; white-space: nowrap; padding: 0 0.25rem; }
.pz-seg.done { opacity: .45; }
.pz-ticks { position: relative; height: 1rem; margin-top: 0.125rem; }
.pz-ticks span { position: absolute; transform: translateX(-50%); font-size: 0.6875rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.pz-ticks span:first-child { transform: none; }
.pz-ticks span.end { transform: translateX(-100%); }
.pz-rows { list-style: none; margin: 0; padding: 0; }
.pz-row { display: grid; grid-template-columns: 6.75rem minmax(0, 1fr) 5.5rem auto; gap: 0.25rem 1rem; align-items: center;
  padding: 0.75rem 1.125rem; border-top: 1px solid var(--line2); box-shadow: inset 4px 0 0 var(--c); }
.pz-row.late { background: color-mix(in srgb, var(--red-l) 70%, transparent); }
.pz-row.is-done, .pz-row.checked { background: color-mix(in srgb, var(--green-l) 55%, transparent); }
.pz-time { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 0.9375rem; white-space: nowrap; }
.pz-time i { font-style: normal; color: var(--muted); padding: 0 0.125rem; }
.pz-what { display: grid; gap: 0.1875rem; min-width: 0; }
.pz-what small { color: var(--muted); }
.pz-flags { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.pz-flags:empty { display: none; }
.pz-flags em { font-style: normal; font-size: 0.6875rem; font-weight: 700; padding: 0.0625rem 0.5rem; border-radius: 1rem; }
.f-late { background: var(--red-l); color: var(--red); }
.f-in { background: var(--blue-l); color: var(--blue-t); }
.f-out { background: var(--amber-l); color: var(--amber-t); }
.f-done { background: var(--green-l); color: var(--green-t); }
.pz-est { display: grid; text-align: right; }
.pz-est b { font-variant-numeric: tabular-nums; }
.pz-est small { color: var(--muted); font-size: 0.75rem; }
.pz-close { display: grid; grid-template-columns: auto auto minmax(7rem, 12rem) 3.5rem; align-items: center; gap: 0.5rem; }
.pz-real { display: flex; flex-direction: row; align-items: center; gap: 0.375rem; }
.pz-real small { color: var(--muted); font-weight: 600; }
.pz-real .ms-num input { width: 4.5rem; }
.pz-check { display: inline-flex; flex-direction: row; align-items: center; gap: 0.375rem; padding: 0.375rem 0.625rem; border: 1px solid var(--line-strong);
  border-radius: 2rem; cursor: pointer; font-weight: 600; color: var(--text); white-space: nowrap; }
.pz-check:has(input:checked) { background: var(--green); border-color: var(--green); color: #fff; }
.pz-notes { min-width: 0; }
.pz-diff { font-size: 0.8125rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.pz-diff.more { color: var(--red); } .pz-diff.less { color: var(--green-t); }
.pz-closebar { position: sticky; bottom: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 0.75rem 1.5rem; margin-top: 1rem; padding: 0.875rem 1.125rem; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--panel); box-shadow: 0 -6px 18px #0000001a; }
.pz-closebar p { margin: 0; display: grid; gap: 0.125rem; flex: 1 1 24rem; }
@media (max-width: 1100px) {
  .pz-row { grid-template-columns: 6rem minmax(0, 1fr) 5rem; }
  .pz-close { grid-column: 1 / -1; grid-template-columns: auto auto minmax(0, 1fr) auto; }
}
@media (max-width: 760px) {
  .pz-row { grid-template-columns: minmax(0, 1fr) auto; padding: 0.75rem 0.875rem; }
  .pz-time { grid-column: 1; } .pz-est { grid-column: 2; grid-row: 1; }
  .pz-what { grid-column: 1 / -1; }
  .pz-close { grid-template-columns: auto auto minmax(0, 1fr); }
  .pz-close .pz-notes { grid-column: 1 / -1; grid-row: 2; }
  .pz-day, .pz-lane > header { padding-left: 0.875rem; padding-right: 0.875rem; }
  .pz-load i { width: 4.5rem; }
  .pz-closebar { bottom: calc(4.75rem + env(safe-area-inset-bottom)); padding: 0.625rem 0.75rem; gap: 0.5rem; }
  .pz-closebar p { flex-basis: 100%; font-size: 0.8125rem; }
  .pz-closebar p .muted { display: none; }  /* explicația e în capul paginii; bara rămâne mică */
  .pz-closebar .btn { width: 100%; justify-content: center; }
}
/* Gantt: pauza de masă, o bandă în fiecare zi lucrătoare */
.g-col .g-lunch { position: absolute; top: 0; bottom: 0; background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--green) 22%, transparent) 0 4px, transparent 4px 8px); pointer-events: none; }
.lg-lunch { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--green) 45%, transparent) 0 3px, transparent 3px 6px); }
/* starea unei etape (fără procente): în așteptare / în lucru / gata */
.st-pill { display: inline-block; padding: 0.125rem 0.5rem; border-radius: 1rem; font-size: 0.8125rem; font-weight: 600;
  white-space: nowrap; background: var(--soft2); color: var(--muted); }
.st-pill.st-lucru { background: var(--amber-l); color: var(--amber-t, var(--text)); }
.st-pill.st-gata { background: var(--green-l); color: var(--green-t); }
.state-seg { margin-top: 0.375rem; }
.state-seg button.on { background: var(--panel); box-shadow: 0 1px 2px rgba(0, 0, 0, .12); font-weight: 700; }
/* Programul zilei: pauza de masă pe bara utilajului și ca rând în listă */
.pz-lunch { position: absolute; top: 0; bottom: 0; z-index: 1; border-radius: 0.25rem; pointer-events: auto;
  background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--green) 40%, transparent) 0 4px, transparent 4px 8px); }
.pz-row.pz-break { --c: var(--green); background: color-mix(in srgb, var(--green-l) 60%, transparent); }
.pz-row.pz-break .pz-what b { color: var(--green-t); }
/* Progres hală: etapele pornesc singure, se confirmă la închiderea zilei */
.pc-auto { font-size: 0.8125rem; color: var(--muted); white-space: nowrap; }
.col-lucru .pc-auto { color: var(--amber-t); font-weight: 600; }

/* ---------- proiectare: statusul proiectării și producția produsului */
.ds-de_proiectat { background: var(--amber-l); color: var(--amber-t); }
.ds-in_proiectare { background: #dcebf7; color: #1f4e79; }
.ds-terminat, .ds-ok { background: var(--green-l); color: var(--green-t); }
.ds-work { background: #f6e7d6; color: #7a4a17; }
select.ds-de_proiectat, select.ds-in_proiectare, select.ds-terminat { font-weight: 600; border-radius: 0.5rem; }
.design-card h2 .mono { font-weight: 700; }

/* mesajele de confirmare când pagina a rămas derulată (după o acțiune): plutesc sus, deasupra conținutului */
#flashes.floating { position: fixed; top: 0.75rem; left: 50%; transform: translateX(-50%); z-index: 1000;
  width: min(40rem, calc(100vw - 2rem)); }
#flashes.floating .flash { box-shadow: 0 6px 24px #0003; }