/* MOBIUS · stiluri comune peste Bootstrap 5.3.
 * 1. tokenuri (culori, suprafețe, raze, umbre) – o singură sursă pentru toată aplicația, tema deschisă și cea întunecată;
 * 2. finisaje pe componentele Bootstrap (carduri, tabele, butoane, insigne, formulare);
 * 3. componente proprii: pași de flux, cronologie, conversație (bule), indicatori (stat / kpi);
 * 4. stilurile existente ale aplicației, trecute pe tokenuri. */

/* ===================== 1. tokenuri ===================== */
:root, [data-bs-theme=light] {
  --mb-dark: #0b1d33; --mb-mid: #152f4b; --mb-head: #37517e; --mb-accent: #47b2e4;
  --mb-bg: #f3f5f8; --mb-surface: #fff; --mb-surface-2: #f6f8fb; --mb-line: #e4e9f0; --mb-tree: #9fb3c8;
  --mb-text: #3d4651; --mb-soft: #6b7a8c; --mb-link: #1f6fa8;
  /* semnificații – aceleași peste tot (risc, stare, verificare) */
  --mb-ok: #2e9d4a; --mb-warn: #d39e00; --mb-risk: #c0392b; --mb-verify: #6f42c1; --mb-info: #2b8fc4;
  --mb-ok-bg: #e5f4e9; --mb-warn-bg: #fff4d6; --mb-risk-bg: #fbe5e2; --mb-verify-bg: #f1ebfb; --mb-info-bg: #e6f3fb;
  /* nuanțe pentru mesaje */
  --mb-tint-client: #fff; --mb-tint-mobius: #eaf1f8; --mb-tint-internal: #fff6dc; --mb-tint-private: #f3f4f6;
  --mb-shadow: 0 1px 2px rgba(11,29,51,.05), 0 2px 8px rgba(11,29,51,.06);
  --mb-shadow-hover: 0 2px 4px rgba(11,29,51,.07), 0 8px 20px rgba(11,29,51,.09);
  --mb-radius: .65rem;

  --bs-body-bg: var(--mb-bg); --bs-body-color: var(--mb-text); --bs-secondary-color: var(--mb-soft);
  --bs-border-color: var(--mb-line);
  --bs-border-radius: .5rem; --bs-border-radius-sm: .4rem; --bs-border-radius-lg: .75rem; --bs-border-radius-pill: 50rem;
  --bs-link-color: var(--mb-link); --bs-link-color-rgb: 31,111,168; --bs-link-hover-color: #165482; --bs-link-hover-color-rgb: 22,84,130;
  --bs-primary: #2873ae; --bs-primary-rgb: 40,115,174;
  --bs-primary-text-emphasis: #174a72; --bs-primary-bg-subtle: #e2eef8; --bs-primary-border-subtle: #b5d3ea;
  --bs-heading-color: var(--mb-head);
  --bs-font-sans-serif: "Open Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: light;
}
[data-bs-theme=dark] {
  --mb-bg: #0e1621; --mb-surface: #16212f; --mb-surface-2: #1c2939; --mb-line: #2a394c; --mb-tree: #4f6681;
  --mb-text: #d5dde7; --mb-soft: #95a5b8; --mb-link: #7cc4ee; --mb-head: #a9c8e8; --mb-accent: #5cbfec;
  --mb-ok: #4cc56d; --mb-warn: #f0bf3c; --mb-risk: #ef6b5b; --mb-verify: #a688e6; --mb-info: #5cbfec;
  --mb-ok-bg: #173523; --mb-warn-bg: #3a2f10; --mb-risk-bg: #3d1d1a; --mb-verify-bg: #2a2142; --mb-info-bg: #14324a;
  --mb-tint-client: #1b2736; --mb-tint-mobius: #1d3049; --mb-tint-internal: #3a3115; --mb-tint-private: #232b36;
  --mb-shadow: 0 1px 2px rgba(0,0,0,.35), 0 2px 8px rgba(0,0,0,.25);
  --mb-shadow-hover: 0 2px 4px rgba(0,0,0,.4), 0 8px 20px rgba(0,0,0,.35);

  --bs-body-bg: var(--mb-bg); --bs-body-color: var(--mb-text); --bs-secondary-color: var(--mb-soft);
  --bs-border-color: var(--mb-line); --bs-tertiary-bg: var(--mb-surface-2); --bs-secondary-bg: var(--mb-surface-2);
  --bs-link-color: var(--mb-link); --bs-link-color-rgb: 124,196,238; --bs-link-hover-color: #a6d8f5; --bs-link-hover-color-rgb: 166,216,245;
  --bs-primary: #4a9fe0; --bs-primary-rgb: 74,159,224;
  --bs-primary-text-emphasis: #9fcdf0; --bs-primary-bg-subtle: #14304a; --bs-primary-border-subtle: #24507a;
  --bs-heading-color: var(--mb-head);
  color-scheme: dark;
}

/* ===================== 2. Bootstrap, finisat ===================== */
body { background: var(--mb-bg); color: var(--mb-text); -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, h5, h6 { font-family: Jost, sans-serif; color: var(--mb-head); font-weight: 500; letter-spacing: -.005em; }
h2 { font-size: 1.65rem; } h3 { font-size: 1.4rem; } h5 { font-size: 1.1rem; } h6 { font-size: .98rem; }
.card > h5:first-child, .card > h6:first-child, .card h5.card-title { margin-bottom: .75rem; }
.text-muted { color: var(--mb-soft) !important; }

.card { --bs-card-bg: var(--mb-surface); --bs-card-border-color: var(--mb-line); border: 1px solid var(--mb-line);
        border-radius: var(--mb-radius); box-shadow: var(--mb-shadow); }
[data-bs-theme=dark] .card { border-color: var(--mb-line); }

/* tabele: antet discret, rânduri aerisite, aliniere pe mijloc */
.table { --bs-table-bg: transparent; --bs-table-hover-bg: rgba(71,178,228,.07); --bs-table-border-color: var(--mb-line);
         --bs-table-color: var(--mb-text); }
.table > :not(caption) > * > * { padding-top: .5rem; padding-bottom: .5rem; }
.table-sm > :not(caption) > * > * { padding-top: .38rem; padding-bottom: .38rem; }
.table td, .table th { vertical-align: middle; }
.table > thead th, .table > tbody > tr > th[scope=col] { font-size: .74rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .04em; color: var(--mb-soft); border-bottom-width: 1px; white-space: nowrap; }
.table > tbody > tr:last-child > * { border-bottom-color: transparent; }
.table-light { --bs-table-bg: var(--mb-surface-2); --bs-table-color: var(--mb-text); --bs-table-border-color: var(--mb-line); }
.table-bordered > :not(caption) > tr:last-child > * { border-bottom-color: var(--mb-line); }

/* butoane și insigne: colțuri mai moi, greutate mai mică */
.btn { --bs-btn-font-weight: 500; border-radius: .5rem; }
.btn-sm { --bs-btn-border-radius: .45rem; }
.btn-primary { --bs-btn-bg: var(--bs-primary); --bs-btn-border-color: var(--bs-primary); --bs-btn-hover-bg: #215f90;
               --bs-btn-hover-border-color: #215f90; --bs-btn-active-bg: #1c5380; }
.btn-outline-primary { --bs-btn-color: var(--bs-primary); --bs-btn-border-color: var(--bs-primary); --bs-btn-hover-bg: var(--bs-primary);
                       --bs-btn-hover-border-color: var(--bs-primary); --bs-btn-active-bg: var(--bs-primary); }
.btn-outline-secondary { --bs-btn-color: var(--mb-text); --bs-btn-border-color: var(--mb-line); --bs-btn-hover-bg: var(--mb-surface-2);
                         --bs-btn-hover-color: var(--mb-head); --bs-btn-hover-border-color: #c4cfdc; --bs-btn-active-bg: var(--mb-line);
                         --bs-btn-active-color: var(--mb-head); background: var(--mb-surface); }
.btn-mb { background: var(--mb-accent); border-color: var(--mb-accent); color: #fff; }
.btn-mb:hover, .btn-mb:focus-visible { background: #2f9fd3; border-color: #2f9fd3; color: #fff; }
[data-bs-theme=dark] .btn-mb { background: #2a8fc4; border-color: #2a8fc4; }
.btn-verify { background: var(--mb-verify); border-color: var(--mb-verify); color: #fff; }
.btn-verify:hover { filter: brightness(.92); color: #fff; }
.badge { font-weight: 500; border-radius: 50rem; padding: .32em .65em; letter-spacing: .01em; }
.badge-st { font-weight: 500; }
.alert { border-radius: var(--mb-radius); }
.form-control, .form-select { border-color: var(--mb-line); }
.form-control:focus, .form-select:focus { border-color: #8cc9ea; box-shadow: 0 0 0 .2rem rgba(71,178,228,.2); }
.progress { height: .55rem; background: var(--mb-surface-2); border-radius: 50rem; }
details > summary { cursor: pointer; }

/* temă întunecată: clasele Bootstrap „fixe” (light / dark) devin suprafețe ale temei */
[data-bs-theme=dark] .bg-light { background-color: var(--mb-surface-2) !important; }
[data-bs-theme=dark] .bg-light.text-dark, [data-bs-theme=dark] .bg-white { color: var(--mb-text) !important; }
[data-bs-theme=dark] .bg-white { background-color: var(--mb-surface) !important; }
[data-bs-theme=dark] .bg-dark { background-color: #334459 !important; }
[data-bs-theme=dark] .alert-light { --bs-alert-bg: var(--mb-surface-2); --bs-alert-color: var(--mb-text); --bs-alert-border-color: var(--mb-line); }
[data-bs-theme=dark] .btn-outline-dark { --bs-btn-color: var(--mb-text); --bs-btn-border-color: var(--mb-line); --bs-btn-hover-bg: var(--mb-surface-2);
                                         --bs-btn-hover-color: var(--mb-text); }
[data-bs-theme=dark] .btn-outline-warning.text-dark { color: var(--mb-warn) !important; }
[data-bs-theme=dark] .text-dark:not(.badge) { color: var(--mb-text) !important; }

/* ===================== 3. bara de sus, subsol ===================== */
.topbar { background: var(--mb-dark); box-shadow: 0 1px 0 rgba(255,255,255,.04), 0 2px 10px rgba(0,0,0,.12); }
.topbar a { color: #e8eef5; font-family: Poppins, sans-serif; font-size: .9rem; text-decoration: none; padding: .2rem .1rem;
            border-bottom: 2px solid transparent; transition: color .15s, border-color .15s; }
.topbar a:hover { color: var(--mb-accent); }
.topbar a.active { color: #fff; border-bottom-color: var(--mb-accent); }
.topbar .brand { border: 0; }
.theme-btn { background: transparent; border: 1px solid rgba(255,255,255,.25); color: #e8eef5; border-radius: .45rem;
             width: 2rem; height: 1.85rem; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.theme-btn:hover { border-color: var(--mb-accent); color: var(--mb-accent); }
[data-bs-theme=dark] .topbar { background: #08131f; }
footer { background: var(--mb-mid); color: #b9c8d8; font-size: .85rem; }
footer a { color: #b9c8d8; }
[data-bs-theme=dark] footer { background: #0a1724; }

/* ===================== 4. componente proprii ===================== */

/* --- pași de flux (document, tichet) --- */
.steps { display: flex; list-style: none; margin: 0; padding: 0; counter-reset: step; }
.steps li { flex: 1; position: relative; text-align: center; font-size: .78rem; color: var(--mb-soft); padding-top: 1.9rem; min-width: 0; }
.steps li::before { counter-increment: step; content: counter(step); position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 1.55rem; height: 1.55rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 600;
  font-size: .75rem; background: var(--mb-surface); border: 2px solid var(--mb-line); color: var(--mb-soft); z-index: 1; }
.steps li::after { content: ""; position: absolute; top: .72rem; left: calc(-50% + .9rem); right: calc(50% + .9rem); height: 2px; background: var(--mb-line); }
.steps li:first-child::after { display: none; }
.steps li.done { color: var(--mb-text); }
.steps li.done::before { content: "✓"; background: var(--mb-ok); border-color: var(--mb-ok); color: #fff; }
.steps li.done::after, .steps li.current::after { background: var(--mb-ok); }
.steps li.current { color: var(--mb-head); font-weight: 600; }
.steps li.current::before { background: var(--mb-accent); border-color: var(--mb-accent); color: #fff; box-shadow: 0 0 0 4px rgba(71,178,228,.22); }
.steps .detail { display: block; font-weight: 400; font-size: .72rem; color: var(--mb-soft); }
.steps-wrap { background: var(--mb-surface); border: 1px solid var(--mb-line); border-radius: var(--mb-radius); padding: .8rem .5rem .6rem; box-shadow: var(--mb-shadow); }

/* --- cronologie (jurnal document, evenimente) --- */
.tl { position: relative; margin: 0; padding: 0 0 0 1.1rem; list-style: none; }
.tl::before { content: ""; position: absolute; left: .32rem; top: .35rem; bottom: .35rem; width: 2px; background: var(--mb-line); border-radius: 2px; }
.tl > .ev, .tl > li { position: relative; margin-bottom: .6rem; font-size: .84rem; }
.tl > .ev:last-child, .tl > li:last-child { margin-bottom: 0; }
.tl > .ev::before, .tl > li::before { content: ""; position: absolute; left: -1.07rem; top: .32rem; width: .68rem; height: .68rem; border-radius: 50%;
  background: var(--mb-surface); border: 2px solid var(--mb-accent); }
.tl > .ev:last-child::before, .tl > li:last-child::before { background: var(--mb-accent); box-shadow: 0 0 0 3px rgba(71,178,228,.22); }
.tl .when { color: var(--mb-soft); font-size: .76rem; }
/* compatibilitate: jurnalul vechi .dm-flow arată la fel */
.dm-flow { position: relative; padding-left: 1.1rem; }
.dm-flow::before { content: ""; position: absolute; left: .32rem; top: .35rem; bottom: .35rem; width: 2px; background: var(--mb-line); }
.dm-flow .ev { position: relative; margin-bottom: .6rem; }
.dm-flow .ev::before { content: ""; position: absolute; left: -1.07rem; top: .32rem; width: .68rem; height: .68rem; border-radius: 50%;
  background: var(--mb-surface); border: 2px solid var(--mb-accent); }
.dm-flow .ev:last-child::before { background: var(--mb-accent); }

/* --- conversație (bule): „ale mele” la dreapta, ale celeilalte părți la stânga --- */
.chat { display: flex; flex-direction: column; gap: .7rem; }
.bubble-row { display: flex; gap: .55rem; align-items: flex-end; max-width: 88%; }
.bubble-row.mine { align-self: flex-end; flex-direction: row-reverse; }
.avatar { flex: none; width: 2rem; height: 2rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
          font-size: .72rem; font-weight: 600; letter-spacing: .02em; background: var(--mb-line); color: var(--mb-head); }
.avatar.mobius { background: var(--mb-head); color: #fff; }
[data-bs-theme=dark] .avatar.mobius { background: #2d4b72; }
.avatar.client { background: var(--mb-info-bg); color: var(--mb-info); }
.bubble { position: relative; padding: .55rem .8rem; border-radius: 1rem; border-bottom-left-radius: .3rem; min-width: 8rem;
          background: var(--mb-tint-client); border: 1px solid var(--mb-line); box-shadow: var(--mb-shadow); }
.mine .bubble { border-bottom-left-radius: 1rem; border-bottom-right-radius: .3rem; }
.bubble.b-mobius { background: var(--mb-tint-mobius); border-color: transparent; }
.bubble.b-internal { background: var(--mb-tint-internal); border: 1px dashed #e0a800; }
.bubble.b-info { box-shadow: inset 3px 0 0 var(--mb-warn), var(--mb-shadow); }
.bubble .meta { font-size: .74rem; color: var(--mb-soft); margin-bottom: .15rem; }
.bubble .meta b { color: var(--mb-text); font-weight: 600; }
.bubble .body { white-space: pre-wrap; overflow-wrap: anywhere; }
.chat-evt { align-self: center; font-size: .76rem; color: var(--mb-soft); background: var(--mb-surface-2); border-radius: 50rem;
            padding: .15rem .75rem; max-width: 95%; text-align: center; }
.read-mark { font-size: .9rem; line-height: 1; }
.read-mark.seen { color: var(--mb-info); }

/* --- indicatori (stat): etichetă, valoare mare, descriere; variantă de avertizare --- */
.stat { display: block; height: 100%; padding: .85rem 1rem; background: var(--mb-surface); border: 1px solid var(--mb-line);
        border-radius: var(--mb-radius); box-shadow: var(--mb-shadow); color: var(--mb-text); text-decoration: none; position: relative; overflow: hidden; }
a.stat { transition: box-shadow .15s, transform .15s; }
a.stat:hover { box-shadow: var(--mb-shadow-hover); transform: translateY(-1px); color: var(--mb-text); }
.stat-label { font-size: .76rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--mb-soft); }
.stat-label i { color: var(--mb-accent); margin-right: .25rem; }
.stat-value { font-family: Jost, sans-serif; font-size: 2rem; font-weight: 500; line-height: 1.15; color: var(--mb-head); font-variant-numeric: tabular-nums; }
.stat-desc { font-size: .78rem; color: var(--mb-soft); }
.stat::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--mb-accent); opacity: .7; }
.stat.warn::before, .stat.risk::before { background: var(--mb-risk); opacity: 1; }
.stat.warn .stat-value, .stat.risk .stat-value { color: var(--mb-risk); }
.stat.attn::before { background: var(--mb-warn); opacity: 1; }
.stat.ok::before { background: var(--mb-ok); opacity: 1; }
/* .kpi (tablouri existente) – aceeași familie vizuală */
.kpi { display: block; height: 100%; text-decoration: none; text-align: center; padding: .7rem .5rem; border-radius: var(--mb-radius);
       background: var(--mb-surface); border: 1px solid var(--mb-line); box-shadow: var(--mb-shadow); color: var(--mb-head);
       transition: box-shadow .15s, transform .15s; }
.kpi:hover { box-shadow: var(--mb-shadow-hover); transform: translateY(-1px); color: var(--mb-head); }
.kpi b { display: block; font-family: Jost, sans-serif; font-size: 1.7rem; font-weight: 500; line-height: 1.1; font-variant-numeric: tabular-nums; }
.kpi span { font-size: .78rem; color: var(--mb-soft); }
.kpi.warn { border-color: rgba(192,57,43,.35); background: linear-gradient(var(--mb-risk-bg), var(--mb-surface) 70%); }
.kpi.warn b { color: var(--mb-risk); }

/* ===================== 5. stilurile aplicației, pe tokenuri ===================== */
.msg-client { background: var(--mb-tint-client); border-left: 4px solid var(--mb-accent); }
.msg-mobius { background: var(--mb-tint-mobius); border-left: 4px solid var(--mb-head); }
.msg-internal { background: var(--mb-tint-internal); border-left: 4px solid #e0a800; }
.msg-report { background: var(--mb-ok-bg); border-left: 4px solid var(--mb-ok); }
.msg-reply { background: var(--mb-tint-mobius); border-left: 4px solid var(--mb-head); }
.msg-private { background: var(--mb-tint-private); border-left: 4px dashed #999; }
.msg-verification { background: var(--mb-verify-bg); border-left: 4px solid var(--mb-verify); }
.evt { font-size: .82rem; color: var(--mb-soft); }
.waiting { border-left: 4px solid var(--mb-warn) !important; }
/* bordură de accent pe carduri (înlocuiește culorile scrise direct în pagini) */
.accent-verify { border-left: 4px solid var(--mb-verify) !important; }
.accent-ok { border-left: 4px solid var(--mb-ok) !important; }
.accent-warn { border-left: 4px solid var(--mb-warn) !important; }
.accent-risk { border-left: 4px solid var(--mb-risk) !important; }
.accent-info { border-left: 4px solid var(--mb-accent) !important; }
.c-ok { color: var(--mb-ok) !important; } .c-warn { color: var(--mb-warn) !important; } .c-risk { color: var(--mb-risk) !important; }
.c-verify { color: var(--mb-verify) !important; }
.pm-nav a { font-family: Poppins, sans-serif; font-size: .9rem; }
.task-row.active, .task-row.active > td { background: var(--mb-info-bg) !important; }
.org-card { min-width: 180px; }
.hdot { display: inline-block; width: .8rem; height: .8rem; border-radius: 50%; vertical-align: middle; flex: none; }
.hdot.sm { width: .65rem; height: .65rem; }
.hdot-green { background: var(--mb-ok); } .hdot-yellow { background: var(--mb-warn); } .hdot-red { background: var(--mb-risk); }
.hchip { display: inline-flex; align-items: center; gap: .35rem; padding: .15rem .6rem; border-radius: 1rem; font-size: .8rem; font-weight: 600; }
.hchip-green { background: var(--mb-ok-bg); color: var(--mb-ok); } .hchip-yellow { background: var(--mb-warn-bg); color: #8a6500; }
.hchip-red { background: var(--mb-risk-bg); color: var(--mb-risk); }
[data-bs-theme=dark] .hchip-yellow { color: var(--mb-warn); }
.hrow-red { border-left: 5px solid var(--mb-risk); } .hrow-yellow { border-left: 5px solid var(--mb-warn); } .hrow-green { border-left: 5px solid var(--mb-ok); }
.reg-void td { text-decoration: line-through; color: #999; }
.reg-void td.reg-note { text-decoration: none; color: var(--mb-risk); }

/* HTMX */
.htmx-indicator { display: none; } .htmx-request .htmx-indicator, .htmx-request.htmx-indicator { display: inline-block; }
.htmx-request.hx-dim, .htmx-request .hx-dim { opacity: .55; transition: opacity .15s; }
.hx-flash { animation: hxflash 1.2s ease-out; }
@keyframes hxflash { from { background: var(--mb-warn-bg); } to { background: transparent; } }
.bubble.hx-flash { animation: hxpop 1.4s ease-out; }
@keyframes hxpop { 0% { box-shadow: 0 0 0 3px rgba(240,191,60,.7); } 100% { box-shadow: var(--mb-shadow); } }
@media (min-width: 992px) { .panel-sticky { position: sticky; top: 1rem; max-height: calc(100vh - 2rem); overflow-y: auto; } }
@media (max-width: 575.98px) {
  .bubble-row { max-width: 100%; } .avatar { width: 1.7rem; height: 1.7rem; font-size: .65rem; }
  .steps li { font-size: .7rem; } .steps .detail { display: none; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }
@media print {
  .register-print { font-size: .75rem; } .register-print th, .register-print td { padding: .15rem .25rem !important; }
  .topbar, footer, .no-print { display: none !important; } main { padding: 0 !important; }
  .card, .stat, .kpi { box-shadow: none !important; }
}

/* variante de bule pentru mesajele din sarcini */
.bubble.b-report { background: var(--mb-ok-bg); border-color: transparent; }
.bubble.b-private { background: var(--mb-tint-private); border: 1px dashed #999; }
.bubble.b-verification { background: var(--mb-verify-bg); border-color: transparent; }

/* ===================== diagrama fluxului (designer + fișa documentului) ===================== */
.fd-canvas { display: flex; align-items: stretch; gap: 0; overflow-x: auto; padding: 1rem .5rem 1.25rem; min-height: 9rem; }
.fd-col { display: flex; flex-direction: column; justify-content: center; gap: .6rem; flex: none; padding: .5rem; border-radius: .9rem;
          transition: background .15s, outline-color .15s; outline: 2px dashed transparent; outline-offset: -2px; }
.fd-col.fd-stage { min-width: 12rem; }
.fd-col.fd-stage.multi { background: rgba(71,178,228,.06); }
.fd-col .fd-par-label { font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; color: var(--mb-soft); text-align: center; }
.fd-link { flex: none; align-self: center; width: 2.4rem; height: 2px; background: var(--mb-tree); position: relative; }
.fd-link::after { content: ""; position: absolute; right: -1px; top: -4px; border-left: 7px solid var(--mb-tree); border-top: 5px solid transparent; border-bottom: 5px solid transparent; }
.fd-gap { flex: none; align-self: center; display: flex; align-items: center; position: relative; }
.fd-gap .fd-plus, .fd-add-par { width: 1.7rem; height: 1.7rem; border-radius: 50%; border: 1.5px dashed var(--mb-tree); background: var(--mb-surface);
  color: var(--mb-soft); display: inline-flex; align-items: center; justify-content: center; font-size: 1rem; line-height: 1; padding: 0;
  transition: all .15s; }
.fd-gap .fd-plus:hover, .fd-add-par:hover, .fd-gap.over .fd-plus { border-style: solid; border-color: var(--mb-accent); color: #fff; background: var(--mb-accent); transform: scale(1.1); }
.fd-add-par { width: auto; height: auto; border-radius: .6rem; padding: .2rem .6rem; font-size: .75rem; align-self: center; }
.fd-gap::before, .fd-gap::after { content: ""; width: .9rem; height: 2px; background: var(--mb-tree); }
.fd-gap::after { width: .6rem; }
.fd-col.over { outline-color: var(--mb-accent); background: rgba(71,178,228,.1); }
.fd-node { position: relative; display: block; width: 12rem; text-align: left; padding: .55rem .7rem .5rem 2.6rem; border-radius: .8rem;
           border: 1px solid var(--mb-line); background: var(--mb-surface); color: var(--mb-text); box-shadow: var(--mb-shadow);
           text-decoration: none; transition: box-shadow .15s, transform .15s, border-color .15s; }
button.fd-node, a.fd-node { cursor: pointer; }
button.fd-node:hover, a.fd-node:hover { box-shadow: var(--mb-shadow-hover); transform: translateY(-1px); color: var(--mb-text); }
.fd-node[draggable=true] { cursor: grab; }
.fd-node.dragging { opacity: .45; }
.fd-node .ic { position: absolute; left: .55rem; top: .6rem; width: 1.55rem; height: 1.55rem; border-radius: .5rem; display: flex;
               align-items: center; justify-content: center; font-size: .85rem; color: #fff; background: var(--mb-accent); }
.fd-node.a-approve .ic { background: var(--mb-head); }
[data-bs-theme=dark] .fd-node.a-approve .ic { background: #3c6aa0; }
.fd-node.a-sign .ic { background: var(--mb-verify); }
.fd-node .t { display: block; font-weight: 600; font-size: .86rem; line-height: 1.2; color: var(--mb-head); }
.fd-node .w { display: block; font-size: .78rem; color: var(--mb-text); line-height: 1.25; margin-top: .1rem; }
.fd-node .m { display: block; font-size: .7rem; color: var(--mb-soft); margin-top: .15rem; }
.fd-node.sel { border-color: var(--mb-accent); box-shadow: 0 0 0 3px rgba(71,178,228,.3), var(--mb-shadow); }
.fd-node.cond { border-style: dashed; }
.fd-term { flex: none; align-self: center; padding: .5rem .8rem; border-radius: 2rem; font-size: .8rem; font-weight: 600; white-space: nowrap;
           background: var(--mb-surface-2); border: 1px solid var(--mb-line); color: var(--mb-head); }
.fd-term.start { background: var(--mb-head); color: #fff; border-color: transparent; }
[data-bs-theme=dark] .fd-term.start { background: #2d4b72; }
.fd-term.end { background: var(--mb-ok-bg); color: var(--mb-ok); border-color: transparent; }
.fd-ends { display: flex; flex-direction: column; gap: .4rem; align-self: center; }
/* stări (fișa documentului) */
.fd-node.s-approved, .fd-node.s-remarks { border-color: rgba(46,157,74,.45); }
.fd-node.s-approved .ic, .fd-node.s-remarks .ic { background: var(--mb-ok); }
.fd-node.s-active { border-color: var(--mb-accent); box-shadow: 0 0 0 3px rgba(71,178,228,.25), var(--mb-shadow); }
.fd-node.s-active .ic { animation: fdpulse 1.8s ease-in-out infinite; }
@keyframes fdpulse { 0%,100% { box-shadow: 0 0 0 0 rgba(71,178,228,.55); } 50% { box-shadow: 0 0 0 6px rgba(71,178,228,0); } }
.fd-node.s-returned { border-color: var(--mb-warn); background: var(--mb-warn-bg); } .fd-node.s-returned .ic { background: var(--mb-warn); }
.fd-node.s-rejected { border-color: var(--mb-risk); background: var(--mb-risk-bg); } .fd-node.s-rejected .ic { background: var(--mb-risk); }
.fd-node.s-skipped, .fd-node.s-cancelled, .fd-node.s-waiting { box-shadow: none; }
.fd-node.s-skipped, .fd-node.s-cancelled { opacity: .55; border-style: dashed; } .fd-node.s-skipped .ic, .fd-node.s-cancelled .ic, .fd-node.s-waiting .ic { background: var(--mb-tree); }
.fd-node .st { position: absolute; right: .45rem; top: .45rem; font-size: .8rem; }
.fd-link.done { background: var(--mb-ok); } .fd-link.done::after { border-left-color: var(--mb-ok); }
.fd-next { flex: none; align-self: center; font-size: .78rem; color: var(--mb-soft); border: 1.5px dashed var(--mb-tree); border-radius: .8rem; padding: .5rem .7rem; }
/* panoul de editare */
.fd-panel { position: sticky; top: 1rem; }
.fd-actions .btn-check + .btn { min-width: 6.5rem; }
@media (max-width: 575.98px) { .fd-node { width: 10.5rem; } .fd-col.fd-stage { min-width: 10.5rem; } }
@media print { .fd-gap, .fd-add-par { display: none !important; } .fd-canvas { overflow: visible; flex-wrap: wrap; } }