/* CRM vânzări — temă deschisă, accent indigo */
:root{--bg:#f4f5f9;--card:#fff;--bd:#e3e6ef;--bd2:#eef0f6;
 --tx:#141726;--tx-2:#5d6480;--tx-3:#9096ad;
 --in:#4f46e5;--in-2:#6366f1;--in-bg:#eeecfd;
 --gr:#16a34a;--am:#f59e0b;--rd:#ef4444;--sk:#0ea5e9;
 --sh:0 1px 2px rgba(20,23,38,.06);--sh2:0 4px 14px rgba(20,23,38,.07)}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--tx);
 font:14px/1.45 "Segoe UI",system-ui,-apple-system,Arial,sans-serif;-webkit-font-smoothing:antialiased}
.num{font-variant-numeric:tabular-nums}
.app{display:flex;min-height:100vh}
aside{width:224px;flex:none;background:#fff;border-right:1px solid var(--bd);padding:18px 14px}
.brand{display:flex;align-items:center;gap:10px;padding:4px 8px 20px;font-size:17px;font-weight:700}
.brand i{width:30px;height:30px;border-radius:9px;background:linear-gradient(150deg,#6366f1,#4338ca);
 color:#fff;display:flex;align-items:center;justify-content:center;font-style:normal;font-size:15px}
.me{background:var(--in-bg);border-radius:10px;padding:11px 12px;margin-bottom:20px}
.me b{display:block;font-size:13.5px}
.me span{font-size:11.5px;color:var(--in);text-transform:uppercase;letter-spacing:.07em;font-weight:700}
nav .g{font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--tx-3);
 font-weight:700;padding:14px 10px 7px}
nav a{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:9px;
 text-decoration:none;color:var(--tx-2);font-size:14px}
nav a.on{background:var(--in);color:#fff;font-weight:600}
main{flex:1;min-width:0}
.top{background:#fff;border-bottom:1px solid var(--bd);padding:13px 26px;display:flex;align-items:center;gap:14px}
.top .s{margin-left:auto;font-size:13px;color:var(--tx-2)}
.pill{border:1px solid var(--bd);border-radius:999px;padding:6px 14px;font-size:13px;color:var(--tx-2)}
.body{padding:24px 26px 44px}
h1{font-size:26px;letter-spacing:-.4px}
.sub{color:var(--tx-2);font-size:14px;margin-top:5px}
h2{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--tx-3);font-weight:700;margin-bottom:13px}
.card{background:var(--card);border:1px solid var(--bd);border-radius:12px;padding:17px 19px;box-shadow:var(--sh)}
.k4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.k3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.kpi .k{font-size:12.5px;color:var(--tx-2)}
.kpi .v{font-size:27px;font-weight:700;letter-spacing:-.5px;margin:6px 0 5px}
.kpi .s{font-size:12px;color:var(--tx-3)}
.btn{border:1px solid var(--bd);background:#fff;border-radius:9px;padding:8px 15px;font:inherit;
 font-size:13px;color:var(--tx);cursor:pointer;box-shadow:var(--sh)}
.btn.p{background:var(--in);border-color:var(--in);color:#fff;font-weight:600}
/* pipeline */
.kb{display:flex;gap:14px;overflow-x:auto;padding-bottom:10px}
.col{flex:none;width:250px}
.col .h{display:flex;align-items:center;gap:8px;padding:0 3px 10px}
.col .h u{width:9px;height:9px;border-radius:50%;text-decoration:none}
.col .h b{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--tx-2)}
.col .h span{margin-left:auto;font-size:12px;color:var(--tx-3);font-weight:700}
.col .t{font-size:12px;color:var(--tx-3);padding:0 3px 11px;margin-top:-6px}
.lc{background:#fff;border:1px solid var(--bd);border-radius:11px;padding:12px 13px;margin-bottom:10px;
 box-shadow:var(--sh)}
.lc .f{font-weight:700;font-size:13.5px}
.lc .sv{font-size:12px;color:var(--tx-2);margin-top:3px}
.lc .r{display:flex;align-items:center;margin-top:10px;font-size:13px}
.lc .r em{font-style:normal;font-weight:700}
.lc .r span{margin-left:auto;font-size:11.5px;color:var(--tx-3)}
.tag{display:inline-block;background:var(--in-bg);color:var(--in);border-radius:5px;padding:1px 7px;
 font-size:11px;font-weight:700;margin-top:9px}
.tag.w{background:#fef3c7;color:#a16207}.tag.r{background:#fee2e2;color:#b91c1c}
/* liste */
table{width:100%;border-collapse:collapse}
th{font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--tx-3);font-weight:700;
 text-align:left;padding:0 12px 10px;border-bottom:1px solid var(--bd)}
th.n{text-align:right}
td{padding:12px;border-bottom:1px solid var(--bd2);font-size:13.5px}
td.n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
tr.done td{color:var(--tx-3)}
tr.done td .f{text-decoration:line-through}
.rk{width:26px;height:26px;border-radius:8px;background:var(--in-bg);color:var(--in);font-weight:700;
 font-size:12.5px;display:flex;align-items:center;justify-content:center}
.rk.d{background:#dcfce7;color:var(--gr)}
.ck{width:19px;height:19px;border-radius:50%;border:1.6px solid var(--bd);display:inline-block}
.ck.on{background:var(--gr);border-color:var(--gr);position:relative}
.ck.on::after{content:"✓";color:#fff;font-size:11px;position:absolute;left:4px;top:-1px}
.scr{border-left:2.5px solid var(--in);background:#fafaff;border-radius:0 10px 10px 0;
 padding:12px 14px;margin-bottom:11px}
.scr b{display:block;font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--in);margin-bottom:6px}
.scr p{font-size:13.5px;color:var(--tx-2);line-height:1.5}
/* comision */
.trk{height:26px;background:#edeff6;border-radius:8px;overflow:hidden;display:flex}
.trk b{display:block;height:100%;display:flex;align-items:center;justify-content:flex-end;
 padding-right:9px;color:#fff;font-size:11.5px;font-weight:700}
.leg{display:flex;gap:20px;font-size:12.5px;color:var(--tx-2);margin-top:10px}
.leg i{width:9px;height:9px;border-radius:3px;display:inline-block;margin-right:6px}
.rowk{display:flex;font-size:13.5px;padding:9px 0;border-bottom:1px solid var(--bd2)}
.rowk span:last-child{margin-left:auto;font-variant-numeric:tabular-nums;font-weight:600}
.mapb{background:#eaf0ea;border:1px solid var(--bd);border-radius:12px;position:relative;overflow:hidden}

/* telefon (≤820px) */
@media (max-width:820px){
  /* bara laterala de 224px devine antet: navigatia trece intr-un rand derulabil */
  .app{flex-direction:column}
  aside{width:auto;flex:none;display:flex;flex-wrap:wrap;align-items:center;gap:10px;
    padding:10px 14px;border-right:none;border-bottom:1px solid var(--bd)}
  .brand{padding:0;font-size:16px}
  .me{margin:0 0 0 auto;padding:7px 10px;display:flex;align-items:center;gap:8px}
  .me b{display:inline}
  aside nav{flex-basis:100%;display:flex;align-items:center;gap:4px;overflow-x:auto}
  /* titlurile de grup raman, ca separatoare in rand — nu se pierde informatie */
  nav .g{flex:none;padding:0 4px;white-space:nowrap}
  nav a{flex:none;white-space:nowrap;padding:8px 12px}

  /* antet de pagina + spatii */
  .top{flex-wrap:wrap;gap:8px;padding:10px 14px}
  .top .s{margin-left:0;flex-basis:100%}
  .body{padding:16px 14px 32px}
  .card{padding:14px 15px}
  h1{font-size:21px}
  /* 20px, nu 27: la doua coloane pe 375px, „247.118 RON" la 22px se rupea in
     doua randuri. Ramane cifra dominanta din card, doar ca incape pe un rand. */
  .kpi .v{font-size:20px}

  .k4,.k3{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .k3>*:last-child{grid-column:1/-1}

  #ct>div[style*="grid-template-columns"]{grid-template-columns:minmax(0,1fr)!important}
  /* tabelul are 6 coloane si nu incape; fontul ramane lizibil, se deruleaza
     cardul. min-width ca sa nu se striveasca coloanele. */
  #ct>div[style*="grid-template-columns"]>.card{overflow-x:auto}
  #ct>div[style*="grid-template-columns"]>.card table{min-width:620px}

  .card>div[style*="align-items:baseline"]{flex-wrap:wrap}
  .leg{flex-wrap:wrap;gap:6px 14px}
  .leg span:last-child{margin-left:0!important}
  .rowk{flex-wrap:wrap;gap:2px 10px}
  .rowk span{min-width:0!important}

  /* pipeline.html — .kb are deja overflow-x:auto, deci kanbanul se deruleaza
     lateral in cutia lui; coloanele raman la 250px ca sa ramana citibile. */
}