/* platforma.css — aplicația de simulare psiholog-pacient. Paleta salvie a studioului. */
:root{
  --bg:#E6ECE8; --card:#fff; --line:rgba(31,42,35,.12); --ink:#1e2a22; --slate:#5c6b60;
  --sage:#2E7D32; --sage-br:#3f8f52; --sage-deep:#235e28;
  --lucru-bg:rgba(214,158,46,.14); --lucru-fg:#a5701a;
  --ok-bg:rgba(46,125,50,.12); --ok-fg:#2E7D32;
  --lat:min(1080px, 94vw);
}
*{ box-sizing:border-box; }
html,body{ margin:0; }
body{ background:var(--bg); color:var(--ink); font:15px/1.55 'Open Sans', system-ui, -apple-system, Segoe UI, Roboto, sans-serif; -webkit-font-smoothing:antialiased; min-height:100dvh; }
a{ color:var(--sage); }
[hidden]{ display:none !important; }

/* Antet */
.p-antet{ background:var(--card); border-bottom:1px solid var(--line); }
.p-antet__in{ max-width:var(--lat); margin:0 auto; padding:14px 20px; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.p-antet__t{ font-weight:700; letter-spacing:-.01em; }
.p-antet__t small{ display:block; font-weight:400; font-size:12px; color:var(--slate); letter-spacing:.02em; }
.p-antet__u{ display:flex; align-items:center; gap:12px; color:var(--slate); font-size:14px; }

.p-cadru{ max-width:var(--lat); margin:0 auto; padding:28px 20px 60px; }

/* Butoane */
.p-btn{ font:inherit; font-weight:600; cursor:pointer; border-radius:10px; padding:.62em 1.05em; border:1px solid transparent; transition:transform .12s, background .18s, border-color .18s, opacity .18s; }
.p-btn:active{ transform:scale(.98); }
.p-btn:focus-visible{ outline:2px solid var(--sage); outline-offset:2px; }
.p-btn--plin{ background:var(--sage); color:#fff; }
.p-btn--plin:hover{ background:var(--sage-deep); }
.p-btn--contur{ background:transparent; border-color:var(--line); color:var(--ink); }
.p-btn--contur:hover{ border-color:var(--sage); color:var(--sage); }
.p-btn--mic{ padding:.42em .8em; font-size:13px; }
.p-btn--discret{ background:transparent; color:var(--slate); }
.p-btn--discret:hover{ color:var(--ink); }
.p-btn[disabled]{ opacity:.5; cursor:default; transform:none; }

/* Login */
.p-login{ min-height:100dvh; display:flex; align-items:center; justify-content:center; padding:24px; }
.p-login__foaie{ width:100%; max-width:420px; background:var(--card); border:1px solid var(--line); border-radius:18px; padding:32px 28px; box-shadow:0 24px 60px -34px rgba(16,32,24,.5); }
.p-login__logo{ font-weight:800; letter-spacing:-.02em; font-size:20px; }
.p-login__logo small{ display:block; font-weight:400; font-size:12.5px; color:var(--slate); margin-top:2px; }
.p-tab{ display:flex; gap:6px; margin:22px 0 18px; background:var(--bg); padding:4px; border-radius:12px; }
.p-tab__b{ flex:1; text-align:center; padding:.55em; border-radius:9px; border:0; background:transparent; font:inherit; font-weight:600; color:var(--slate); cursor:pointer; }
.p-tab__b[aria-selected="true"]{ background:var(--card); color:var(--ink); box-shadow:0 1px 3px rgba(0,0,0,.08); }

.p-camp{ margin:0 0 14px; }
.p-camp label{ display:block; font-size:13px; font-weight:600; color:var(--slate); margin:0 0 5px; }
.p-camp input{ width:100%; padding:.66em .8em; font:inherit; color:var(--ink); background:#fff; border:1px solid var(--line); border-radius:10px; }
.p-camp input:focus{ outline:2px solid var(--sage); outline-offset:1px; border-color:transparent; }
.p-eroare{ color:#b42318; font-size:13.5px; margin:2px 0 12px; min-height:1.2em; }
.p-login__submit{ width:100%; }

/* Liste / carduri */
.p-titlu-rand{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin:0 0 18px; }
.p-h{ font-size:22px; margin:0; letter-spacing:-.01em; }
.p-lista{ display:flex; flex-direction:column; gap:12px; }
.p-card{ background:var(--card); border:1px solid var(--line); border-radius:14px; padding:16px 18px; }
.p-card__cap{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.p-card__t{ font-weight:700; }
.p-card__meta{ color:var(--slate); font-size:13px; margin-top:2px; }
.p-card__act{ display:flex; gap:8px; flex-wrap:wrap; }

.p-badge{ display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:700; padding:3px 9px; border-radius:999px; }
.p-badge--neinceput{ background:rgba(92,107,96,.12); color:var(--slate); }
.p-badge--in_curs{ background:var(--lucru-bg); color:var(--lucru-fg); }
.p-badge--finalizat{ background:var(--ok-bg); color:var(--ok-fg); }
.p-badge--off{ background:rgba(180,35,24,.1); color:#b42318; }

.p-mod{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 0; border-top:1px solid var(--line); }
.p-mod:first-child{ border-top:0; }
.p-gol{ color:var(--slate); padding:24px; text-align:center; background:var(--card); border:1px dashed var(--line); border-radius:14px; }

/* Modal */
.p-modal{ position:fixed; inset:0; z-index:60; background:rgba(16,26,20,.5); display:flex; align-items:center; justify-content:center; padding:20px; }
.p-modal__foaie{ background:#fff; border-radius:16px; width:100%; max-width:460px; padding:24px; max-height:88vh; overflow:auto; }
.p-modal__t{ font-size:18px; font-weight:700; margin:0 0 16px; }
.p-modal__act{ display:flex; justify-content:flex-end; gap:8px; margin-top:18px; }

/* Rezumat afișat la psiholog */
.p-rezumat{ margin-top:12px; padding:14px 16px; background:#fafbfa; border:1px solid var(--line); border-radius:12px; }

@media (max-width:560px){
  .p-card__cap{ flex-direction:column; align-items:flex-start; }
  .p-mod{ flex-direction:column; align-items:flex-start; }
}

/* ── Nav în antet ──────────────────────────────────────────────────────────── */
.p-nav{ display:flex; gap:6px; }
.p-nav__l{ display:inline-flex; align-items:center; gap:6px; padding:.42em .72em; border-radius:9px; border:1px solid var(--line); color:var(--slate); text-decoration:none; font-size:13px; font-weight:600; transition:border-color .18s, color .18s, background .18s; }
.p-nav__l:hover{ border-color:var(--sage); color:var(--sage); background:var(--ok-bg); }
.p-nav__l svg{ width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.p-antet__sep{ width:1px; height:22px; background:var(--line); }

/* ── KPI ───────────────────────────────────────────────────────────────────── */
.p-kpi{ display:grid; grid-template-columns:repeat(4, 1fr); gap:12px; margin:0 0 24px; }
.p-kpi__c{ background:var(--card); border:1px solid var(--line); border-radius:14px; padding:16px 18px; display:flex; flex-direction:column; gap:2px; position:relative; overflow:hidden; }
.p-kpi__ic{ position:absolute; top:12px; right:12px; color:var(--sage); opacity:.28; }
.p-kpi__ic svg{ width:26px; height:26px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.p-kpi__nr{ font-size:30px; font-weight:800; letter-spacing:-.02em; line-height:1.1; }
.p-kpi__et{ font-size:13px; color:var(--slate); }
@media (max-width:720px){ .p-kpi{ grid-template-columns:repeat(2, 1fr); } }

/* ── Carduri de pacient (bogate) ───────────────────────────────────────────── */
.p-card{ transition:box-shadow .18s, transform .18s, border-color .18s; }
.p-card:hover{ box-shadow:0 14px 34px -24px rgba(16,32,24,.5); border-color:rgba(46,125,50,.28); }
.p-card--off{ opacity:.82; }
.p-card__id{ display:flex; align-items:center; gap:12px; min-width:0; }
.p-avatar{ flex:0 0 auto; width:40px; height:40px; border-radius:12px; display:grid; place-items:center; font-weight:800; color:#fff; background:linear-gradient(135deg, var(--sage-br), var(--sage-deep)); }
.p-card--off .p-avatar{ filter:grayscale(.6); }

.p-card__sumar{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin:14px 0 4px; flex-wrap:wrap; }
.p-progres{ display:flex; align-items:center; gap:10px; flex:1 1 240px; min-width:0; }
.p-progres__bara{ flex:1; height:7px; background:var(--bg); border-radius:99px; overflow:hidden; }
.p-progres__bara span{ display:block; height:100%; background:linear-gradient(90deg, var(--sage-deep), var(--sage-br)); border-radius:99px; transition:width .4s cubic-bezier(.22,1,.36,1); }
.p-progres__et{ font-size:12.5px; color:var(--slate); white-space:nowrap; }
.p-card__stat{ display:flex; gap:16px; font-size:12.5px; color:var(--slate); }
.p-card__stat span{ display:inline-flex; align-items:center; gap:5px; }
.p-card__stat svg{ width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

.p-mod-lista{ margin-top:10px; border-top:1px solid var(--line); }
.p-mod__t{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.p-mod__st{ display:inline-flex; align-items:center; gap:8px; flex:0 0 auto; }
.p-mod__pc{ color:var(--slate); font-size:13px; font-variant-numeric:tabular-nums; }
.p-card__meta--gol{ margin-top:10px; }

/* ── Onboarding (empty state) ──────────────────────────────────────────────── */
.p-onboard{ background:var(--card); border:1px solid var(--line); border-radius:18px; padding:34px; text-align:center; }
.p-onboard__t{ margin:0 0 4px; font-size:22px; letter-spacing:-.01em; }
.p-onboard__s{ margin:0 0 22px; color:var(--slate); }
.p-onboard__pasi{ list-style:none; counter-reset:pas; padding:0; margin:0 auto 24px; max-width:560px; display:grid; grid-template-columns:repeat(3, 1fr); gap:14px; text-align:left; }
.p-onboard__pasi li{ counter-increment:pas; background:var(--bg); border-radius:12px; padding:14px 16px 14px 44px; position:relative; }
.p-onboard__pasi li::before{ content:counter(pas); position:absolute; left:14px; top:14px; width:22px; height:22px; border-radius:50%; background:var(--sage); color:#fff; display:grid; place-items:center; font-size:12px; font-weight:700; }
.p-onboard__pasi b{ display:block; font-size:14px; }
.p-onboard__pasi span{ font-size:12.5px; color:var(--slate); }
@media (max-width:640px){ .p-onboard__pasi{ grid-template-columns:1fr; } }