/* ============================================================
   Configurator DocManager — design system
   Bootstrap 5.3 + custom tokens (light / dark native)
   ============================================================ */

:root {
  --brand: #2563eb;
  --brand-strong: #1d4ed8;
  --brand-soft: #eff6ff;

  --indigo: #4f46e5;
  --indigo-soft: rgba(79, 70, 229, .10);
  --royal: #1e40af;
  --royal-soft: rgba(30, 64, 175, .10);
  --cyan: #0e7490;
  --cyan-soft: rgba(14, 116, 144, .10);
  --sky: #0284c7;
  --sky-soft: rgba(2, 132, 199, .10);
  --have: #16a34a;
  --have-soft: rgba(22, 163, 74, .12);

  --ring: rgba(37, 99, 235, .35);
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, .06), 0 1px 3px rgba(15, 23, 42, .08);
  --shadow-md: 0 10px 30px -12px rgba(15, 23, 42, .25);
  --shadow-lg: 0 24px 60px -20px rgba(15, 23, 42, .35);

  --radius-lg: 20px;
  --radius-md: 14px;
  --radius-sm: 10px;

  --ease: cubic-bezier(.16, 1, .3, 1);
}

[data-bs-theme="dark"] {
  --brand: #60a5fa;
  --brand-strong: #93c5fd;
  --brand-soft: rgba(96, 165, 250, .14);

  --indigo: #a5b4fc;
  --indigo-soft: rgba(165, 180, 252, .16);
  --royal: #93b4fd;
  --royal-soft: rgba(96, 165, 250, .16);
  --cyan: #22d3ee;
  --cyan-soft: rgba(34, 211, 238, .16);
  --sky: #38bdf8;
  --sky-soft: rgba(56, 189, 248, .16);
  --have: #4ade80;
  --have-soft: rgba(74, 222, 128, .16);

  --shadow-md: 0 10px 30px -12px rgba(0, 0, 0, .6);
  --shadow-lg: 0 24px 60px -20px rgba(0, 0, 0, .7);
}

* { -webkit-font-smoothing: antialiased; }

body {
  position: relative;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--bs-body-bg);
  color: var(--bs-body-color);
  letter-spacing: -0.01em;
  overflow-x: hidden;
}

h1, h2, h3, .display-5 { letter-spacing: -0.03em; }

/* ============================================================
   Sticker — decorațiune de fundal, distribuită pe toată înălțimea
   paginii (nu doar în viewport), ca fundalul să nu rămână alb
   ============================================================ */
.sticker { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.sticker,
.sticker-item { position: absolute; }
.sticker-item img { display: block; width: 100%; height: auto; }
.sticker-soft { opacity: .54; }
.sticker-soften { opacity: .16; }

.sticker-middle { top: 50%; left: 50%; transform: translate3d(-50%, -50%, 0); }
.sticker-middle-right { top: 50%; right: 0; transform: translate3d(0, -50%, 0); transform-origin: right center; }
.sticker-middle-left { top: 50%; left: 0; transform: translate3d(0, -50%, 0); transform-origin: left center; }
.sticker-top-right { top: 0; right: 0; transform-origin: right top; }
.sticker-top-center { top: 0; left: 50%; transform: translate3d(-50%, 0, 0); transform-origin: center top; }
.sticker-top-left { top: 0; left: 0; transform-origin: left top; }
.sticker-bottom-center { bottom: 0; left: 50%; transform: translate3d(-50%, 0, 0); transform-origin: center bottom; }
.sticker-bottom-left { bottom: 0; left: 0; transform-origin: left bottom; }
.sticker-bottom-right { bottom: 0; right: 0; transform-origin: right bottom; }

/* dimensiuni alternative — proprietatea `scale` se combină cu transform-ul de poziționare */
.scale-75 { scale: .75; }
.scale-125 { scale: 1.25; }
.scale-150 { scale: 1.5; }

[data-bs-theme="dark"] .sticker-soften { opacity: .1; }

@media (max-width: 991.98px) {
  .sticker-middle, .sticker-middle-left, .sticker-middle-right { display: none; }
}
@media (max-width: 767.98px) {
  .sticker-item { width: 150px; }
}

/* ---- mod embed: configuratorul rulează într-un dialog pe altă pagină ---- */
.is-embed .app-nav,
.is-embed .hero,
.is-embed .app-footer,
.is-embed .sticker { display: none; }
.is-embed #configurator { padding-top: 1.75rem; }

/* ---- accent helpers ---- */
.accent-indigo { --c: var(--indigo); --c-soft: var(--indigo-soft); }
.accent-sky    { --c: var(--sky);    --c-soft: var(--sky-soft); }
.accent-royal  { --c: var(--royal);  --c-soft: var(--royal-soft); }
.accent-cyan   { --c: var(--cyan);   --c-soft: var(--cyan-soft); }

/* ============================================================
   Navbar
   ============================================================ */
.app-nav {
  background: color-mix(in srgb, var(--bs-body-bg) 78%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--bs-border-color);
}
.brand-mark {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
}
.brand-mark svg { display: block; }
.app-nav .navbar-brand { font-size: 1.45rem; font-weight: 700 !important; letter-spacing: -.01em; }
.theme-toggle {
  width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--bs-border-color);
  background: var(--bs-body-bg); color: var(--bs-body-color);
  transition: transform .2s var(--ease), background .2s var(--ease);
}
.theme-toggle:hover { transform: rotate(-18deg); background: var(--bs-tertiary-bg); }

/* buton de închidere (X) din dialoguri — circular, cu hover elegant */
.modal .btn-close {
  box-sizing: border-box;
  width: 38px; height: 38px; padding: 0; margin: 0 0 0 auto;
  border: 1px solid var(--bs-border-color); border-radius: 50%;
  background-color: var(--bs-body-bg);
  background-size: 13px; opacity: 1;
  transition: transform .2s var(--ease), background-color .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.modal .btn-close:hover {
  background-color: var(--brand-soft);
  border-color: color-mix(in srgb, var(--brand) 40%, var(--bs-border-color));
  transform: rotate(90deg);
}
.modal .btn-close:focus-visible {
  outline: none; box-shadow: 0 0 0 4px var(--brand-soft);
  border-color: var(--brand);
}

/* ============================================================
   Hero
   ============================================================ */
.hero {
  position: relative;
  padding: 5.5rem 0 3rem;
  overflow: hidden;
}
.hero::before,
.hero::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: .5;
  z-index: 0;
  pointer-events: none;
}
.hero::before {
  width: 420px; height: 420px;
  background: radial-gradient(circle, var(--brand), transparent 70%);
  top: -160px; right: -80px;
  opacity: .65;
}
.hero::after {
  width: 360px; height: 360px;
  background: radial-gradient(circle, #22d3ee, transparent 70%);
  bottom: -180px; left: -120px;
  opacity: .45;
}
.hero > .container { position: relative; z-index: 1; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 500;
  padding: 6px 14px; border-radius: 999px;
  background: var(--brand-soft); color: var(--brand-strong);
  border: 1px solid color-mix(in srgb, var(--brand) 25%, transparent);
}
.hero h1 { font-weight: 700; line-height: 1.05; }
.hero .lead { color: var(--bs-secondary-color); max-width: 38rem; }

/* badge pentru modulele obligatorii (fundația oricărei implementări) */
.req-badge {
  display: inline-flex; align-items: center;
  font-size: 10px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  color: var(--brand-strong); background: var(--brand-soft);
  border: 1px solid color-mix(in srgb, var(--brand) 30%, transparent);
  padding: 2px 8px; border-radius: 999px;
  margin-left: 4px; vertical-align: 1px; white-space: nowrap;
}
.req-badge.rec {
  color: var(--have); background: var(--have-soft);
  border-color: color-mix(in srgb, var(--have) 35%, transparent);
}

/* accent de gradient pentru cuvintele-cheie din titluri */
.text-gradient {
  background: linear-gradient(90deg, var(--brand), var(--indigo));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.stat-chip {
  display: flex; flex-direction: column; gap: 2px;
  padding: 0 1.25rem;
}
.stat-chip + .stat-chip { border-left: 1px solid var(--bs-border-color); }
.stat-chip .n { font-size: 1.6rem; font-weight: 700; line-height: 1; color: var(--brand); }
.stat-chip .l { font-size: 12.5px; color: var(--bs-secondary-color); }

/* ============================================================
   Stepper layout — rail vertical, în dreapta
   ============================================================ */
.config-layout {
  display: flex; gap: 2.5rem; align-items: flex-start;
  max-width: 1360px; margin: 0 auto;
}
.config-main { flex: 1; min-width: 0; }
.config-rail { width: 236px; flex: none; position: sticky; top: 84px; }

/* pe desktop, configuratorul se încadrează în viewport:
   întrebările au scroll intern, navigarea rămâne mereu vizibilă */
#configurator { scroll-margin-top: 78px; }
@media (min-width: 768px) {
  .config-layout { height: calc(100vh - 94px); min-height: 480px; align-items: stretch; }
  .config-main { display: flex; flex-direction: column; min-height: 0; }
  .config-main .config-card { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
  #panes {
    flex: 1; min-height: 0; overflow-y: auto;
    margin-right: -1.25rem; padding-right: 1.25rem;
    scrollbar-width: thin;
  }
  #panes::-webkit-scrollbar { width: 8px; }
  #panes::-webkit-scrollbar-track { background: transparent; }
  #panes::-webkit-scrollbar-thumb { background: var(--bs-tertiary-bg); border-radius: 999px; }
  #panes:hover::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--brand) 30%, var(--bs-tertiary-bg)); }
  .is-embed .config-layout { height: calc(100vh - 4.9rem); }
}

.rail { position: relative; display: flex; flex-direction: column; }
.rail-track { position: absolute; z-index: 0; background: var(--bs-border-color); border-radius: 2px; }
.rail-fill {
  position: absolute; z-index: 0; background: var(--brand); border-radius: 2px;
  transition: width .4s var(--ease), height .4s var(--ease);
}
.node {
  position: relative; z-index: 1; width: 100%;
  display: flex; flex-direction: row; align-items: flex-start; gap: 14px;
  padding: 12px 0; cursor: pointer; background: none; border: none; text-align: left;
}
.node .dot {
  width: 40px; height: 40px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: var(--bs-body-bg);
  border: 2px solid var(--bs-border-color);
  color: var(--bs-secondary-color);
  font-size: 15px; font-weight: 600;
  transition: all .3s var(--ease);
}
.node-text { display: flex; flex-direction: column; gap: 2px; padding-top: 1px; }
.node .node-label {
  font-size: 14px; color: var(--bs-secondary-color);
  font-weight: 500; line-height: 1.3; transition: color .2s var(--ease);
}
.node .node-detail { font-size: 11.5px; color: var(--bs-secondary-color); line-height: 1.35; }
.node.active .dot {
  border-color: var(--brand); color: var(--brand);
  box-shadow: 0 0 0 5px var(--brand-soft);
}
.node.active .node-label { color: var(--brand); }
.node.done .dot { background: var(--brand); border-color: var(--brand); color: #fff; }
.node.done .node-label { color: var(--bs-body-color); }

/* ============================================================
   Stepper card + panes
   ============================================================ */
.config-card {
  background: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 2rem;
  min-height: 360px;
}
.step-pane { display: none; }
.step-pane.show { display: block; animation: fadeUp .35s var(--ease); }
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
.cat-eyebrow {
  font-size: 12px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--c, var(--brand));
}
.cat-icon {
  width: 44px; height: 44px; border-radius: 12px;
  display: grid; place-items: center; font-size: 22px;
  background: var(--c-soft); color: var(--c);
}

/* ---- question cards ---- */
.q-grid { display: grid; gap: 12px; }
.q-card {
  display: grid; grid-template-columns: auto 1fr;
  column-gap: 14px;
  padding: 16px 18px; cursor: pointer;
  border: 1.5px solid var(--bs-border-color);
  border-radius: var(--radius-md);
  background: var(--bs-body-bg);
  transition: border-color .18s var(--ease), background .18s var(--ease), transform .18s var(--ease);
}
.q-card:hover { border-color: color-mix(in srgb, var(--c) 45%, var(--bs-border-color)); transform: translateY(-1px); }
.q-card.picked { border-color: var(--c); background: var(--c-soft); }
.q-card .q-ico {
  flex: none; width: 38px; height: 38px; border-radius: 10px;
  display: grid; place-items: center; font-size: 18px;
  background: var(--c-soft); color: var(--c);
  transition: all .18s var(--ease);
}
.q-card.picked .q-ico { background: var(--c); color: #fff; }
.q-card .q-body { grid-column: 2; min-width: 0; }
.q-card .q-q { font-size: 14.5px; line-height: 1.5; font-weight: 500; }
.q-card .q-m { font-size: 12.5px; color: var(--c); font-weight: 600; }
.q-card .q-d { font-size: 12.5px; color: var(--bs-secondary-color); margin-top: 4px; }
.q-card .q-foot {
  grid-column: 1 / -1;
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px 14px; flex-wrap: wrap;
  margin-top: 12px; padding-top: 12px;
  border-top: 1px dashed var(--bs-border-color);
}
.q-card .q-check {
  flex: none; width: 22px; height: 22px; border-radius: 6px;
  border: 2px solid var(--bs-border-color);
  display: grid; place-items: center; color: #fff;
  font-size: 13px; transition: all .18s var(--ease);
}
.q-card.picked .q-check { background: var(--c); border-color: var(--c); }
.q-card .q-check i { opacity: 0; transform: scale(.6); transition: all .18s var(--ease); }
.q-card.picked .q-check i { opacity: 1; transform: scale(1); }

/* ============================================================
   Buttons
   ============================================================ */
.btn-brand {
  background: linear-gradient(135deg, var(--brand), var(--brand-strong)); border: none; color: #fff; font-weight: 500;
  border-radius: var(--radius-sm); padding: 10px 22px;
  box-shadow: 0 6px 18px -6px var(--ring);
  transition: box-shadow .18s var(--ease), transform .18s var(--ease), filter .18s var(--ease);
}
.btn-brand:hover {
  color: #fff; transform: translateY(-1px);
  filter: brightness(1.06);
  box-shadow: 0 10px 24px -8px var(--ring);
}
.btn-ghost {
  background: transparent; border: 1px solid var(--bs-border-color);
  color: var(--bs-body-color); font-weight: 500;
  border-radius: var(--radius-sm); padding: 10px 22px;
  transition: background .18s var(--ease);
}
.btn-ghost:hover { background: var(--bs-tertiary-bg); color: var(--bs-body-color); }

/* ============================================================
   Review / plan
   ============================================================ */
.summary-group {
  border: 1px solid var(--bs-border-color);
  border-radius: var(--radius-md);
  padding: 16px 18px; margin-bottom: 14px;
}
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 500;
  padding: 7px 14px; border-radius: 999px;
  background: var(--c-soft); color: var(--c);
}
.empty-state {
  text-align: center; padding: 2.5rem 1rem;
  color: var(--bs-secondary-color);
}
.empty-state i { font-size: 2.4rem; opacity: .4; }

/* ---- generated plan (modal) ---- */
.phase-block { border-left: 3px solid var(--brand); padding-left: 16px; margin-bottom: 1.5rem; }
.phase-num {
  display: inline-grid; place-items: center;
  width: 26px; height: 26px; border-radius: 8px;
  background: var(--brand-soft); color: var(--brand-strong);
  font-size: 13px; font-weight: 700; margin-right: 8px;
}
.plan-mod {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 10px 0; border-top: 1px solid var(--bs-border-color);
}
.plan-mod:first-of-type { border-top: none; }
.plan-mod .pm-ico {
  flex: none; width: 34px; height: 34px; border-radius: 9px;
  display: grid; place-items: center; font-size: 16px;
  background: var(--bs-tertiary-bg); color: var(--brand);
}

/* ---- formular de solicitare ofertă (Form.io) ---- */
.plan-request { margin-top: 2rem; padding-top: .25rem; }
.plan-request-divider {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 1.1rem; color: var(--bs-secondary-color);
  font-size: 12.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
}
.plan-request-divider::before,
.plan-request-divider::after { content: ""; height: 1px; flex: 1; background: var(--bs-border-color); }

#requestFormio .form-group,
#requestFormio .formio-component { margin-bottom: 14px; }
#requestFormio label { font-size: 13px; font-weight: 500; color: var(--bs-body-color); margin-bottom: 5px; }
#requestFormio .form-control {
  border-radius: var(--radius-sm); border: 1.5px solid var(--bs-border-color);
  background: var(--bs-body-bg); color: var(--bs-body-color);
  padding: 9px 12px; font-size: 14px;
}
#requestFormio .form-control:focus {
  border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-soft);
  background: var(--bs-body-bg); color: var(--bs-body-color);
}
#requestFormio .form-control:disabled { background: var(--bs-tertiary-bg); opacity: .85; }
#requestFormio .btn-primary {
  background: var(--brand); border: none; border-radius: var(--radius-sm);
  padding: 11px 22px; font-weight: 500; width: 100%;
}
#requestFormio .btn-primary:hover { background: var(--brand-strong); }
#requestFormio .formio-errors { font-size: 12px; }

/* ============================================================
   Footer
   ============================================================ */
.app-footer {
  border-top: 1px solid var(--bs-border-color);
  padding: 2.5rem 0; margin-top: 4rem;
  color: var(--bs-secondary-color); font-size: 14px;
}
.app-footer .brand-mark + span {
  font-size: 1.15rem; font-weight: 700; color: var(--bs-body-color); letter-spacing: -.01em;
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 767.98px) {
  .config-layout { flex-direction: column; gap: 1.25rem; }
  .config-rail { width: 100%; position: static; order: -1; }
  .rail { flex-direction: row; justify-content: space-between; max-width: 600px; margin: 0 auto; }
  .node { flex-direction: column; align-items: center; gap: 8px; padding: 0; width: auto; flex: 1; text-align: center; }
  .node-text { align-items: center; padding-top: 0; }
  .node .node-detail { display: none; }
}

@media (max-width: 575.98px) {
  .config-card { padding: 1.4rem; }
  .hero { padding: 4rem 0 2rem; }
  .node .node-label { display: none; }
  .stat-chip { padding: 0 .75rem; }
}

@media print {
  .app-nav, .app-footer, .hero, .config-card, .modal-header .btn-close { display: none !important; }
  .modal { position: static !important; }
}

/* ============================================================
   Stare modul: am deja / aș implementa  +  grad de digitalizare
   ============================================================ */
.q-card { cursor: default; }
.q-choice {
  display: inline-flex; flex: none; align-self: center;
  border: 1px solid var(--bs-border-color); border-radius: 999px;
  background: var(--bs-body-bg); overflow: hidden;
}
.q-opt {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  font-size: 12px; font-weight: 500; padding: 7px 13px; white-space: nowrap;
  border: none; border-radius: 0; background: transparent;
  color: var(--bs-secondary-color); cursor: pointer; transition: all .15s var(--ease);
}
.q-opt + .q-opt { border-left: 1px solid var(--bs-border-color); }
.q-opt:hover { color: var(--bs-body-color); background: var(--bs-tertiary-bg); }
.q-opt.q-have.active { background: var(--have); color: #fff; }
.q-opt.q-want.active { background: var(--c, var(--brand)); color: #fff; }
.q-card.is-have { border-color: var(--have); background: var(--have-soft); }
.q-card.is-want { border-color: var(--c); background: var(--c-soft); }
.q-card.is-have .q-ico { background: var(--have); color: #fff; }
.q-card.is-want .q-ico { background: var(--c); color: #fff; }

.grade-bar { display: flex; height: 16px; border-radius: 999px; background: var(--bs-tertiary-bg); overflow: hidden; }
.grade-bar .seg { height: 100%; transition: width .5s var(--ease); }
.grade-bar .seg-have { background: var(--have); }
.grade-bar .seg-want { background: var(--brand); }
.grade-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 10px; font-size: 12.5px; color: var(--bs-secondary-color); }
.ldot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 4px; }
.ldot-have { background: var(--have); }
.ldot-want { background: var(--brand); }
.grade-metrics { display: flex; gap: 12px; margin-top: 16px; }
.grade-card { flex: 1; background: var(--bs-tertiary-bg); border-radius: 12px; padding: 14px 16px; }
.grade-card .gc-num { font-size: 30px; font-weight: 700; line-height: 1; }
.grade-card .gc-lbl { font-size: 12.5px; color: var(--bs-secondary-color); margin-top: 5px; }
.grade-card.proj { background: var(--brand-soft); }
.grade-card.proj .gc-num { color: var(--brand); }
.pill-have { background: var(--have-soft) !important; color: var(--have) !important; }
.plan-grade { background: var(--brand-soft); border-radius: 12px; padding: 12px 16px; font-size: 14px; line-height: 1.5; }

@media (max-width: 575.98px) {
  .q-card .q-foot { flex-direction: column; align-items: stretch; }
  .q-choice { width: 100%; }
  .q-opt { flex: 1; }
}