/* Atelierul Suport (demo) — 2 oct 2026. Cerneala verde-inchis + galbenul biletelului lipit pe monitor.
   Elementul lor: conversatia ca bule (clientul stanga, noi dreapta), ciorna lui EDRAX cu chenar punctat. */
:root{
  --cerneala:#14343B; --cerneala2:#1d454d; --cerneala3:#2c5c66; --bilet:#F2B33D; --bilet-ink:#8a5a00; --bilet-bg:#fff6e0;
  --fond:#f1f4f3; --card:#fff; --linie:#dfe6e4; --text:#14343B; --slab:#566d70; --foarte-slab:#8a9d9f;
  --verde:#1d9a5b; --verde-bg:#e4f5ec; --galben:#b17b06; --galben-bg:#fdf3d9; --rosu:#cf4040; --rosu-bg:#fcebeb;
  --albastru:#2b6bd0; --albastru-bg:#e7effb; --mov:#7a4fd6; --mov-bg:#efe9fc; --gri:#7b8a8c; --gri-bg:#edf1f0;
  --r:14px; --umbra:0 1px 2px rgba(20,52,59,.06),0 4px 14px rgba(20,52,59,.06);
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--fond);color:var(--text)}
body{font:16px/1.55 'Figtree',system-ui,-apple-system,'Segoe UI',sans-serif;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:'Bricolage Grotesque',system-ui,sans-serif;letter-spacing:-.015em;margin:0;text-wrap:balance}
h1{font-size:30px;font-weight:800} h2{font-size:21px;font-weight:700} h3{font-size:17px;font-weight:700}
a{color:var(--albastru);text-decoration:none} a:hover{text-decoration:underline}
:focus-visible{outline:3px solid var(--bilet);outline-offset:2px;border-radius:6px}
.cifre{font-variant-numeric:tabular-nums}

.cadru{display:flex;min-height:100vh}
.meniu{width:244px;flex:0 0 244px;background:var(--cerneala);color:#dbe7e6;padding:20px 14px;display:flex;flex-direction:column;gap:4px;position:sticky;top:0;height:100vh;overflow-y:auto}
.marca{display:flex;align-items:center;gap:10px;padding:4px 8px 18px}
.marca .logo{width:40px;height:40px;border-radius:12px 12px 12px 3px;background:var(--bilet);display:grid;place-items:center;color:var(--cerneala);font:800 20px 'Bricolage Grotesque'}
.marca b{font:800 19px 'Bricolage Grotesque';color:#fff;display:block;line-height:1.1}
.marca span{font-size:12px;color:#94afb0}
.meniu a{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:11px;color:#dbe7e6;font-weight:700;font-size:15.5px}
.meniu a:hover{background:var(--cerneala2);text-decoration:none}
.meniu a.activ{background:var(--bilet);color:var(--cerneala)}
.meniu a .ic{font-size:19px;width:26px;text-align:center}
.meniu a .nr{margin-left:auto;background:#ffffff1f;border-radius:99px;font-size:12px;padding:1px 9px}
.meniu a.activ .nr{background:#14343b1f}
.meniu .grup{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#7f9a9b;padding:16px 12px 4px}
.meniu .jos{margin-top:auto;padding-top:14px;font-size:12.5px;color:#8aa5a6;line-height:1.5}
.continut{flex:1;min-width:0;padding:0 0 60px}
.banda{background:var(--cerneala2);color:#e2ecea;font-size:13.5px;padding:9px 28px;display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.banda b{color:var(--bilet)} .banda .dr{margin-left:auto;opacity:.85}
.pagina{max-width:1200px;margin:0 auto;padding:26px 28px}
.cap{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-bottom:6px}
.sub{color:var(--slab);font-size:15.5px;margin:6px 0 22px;max-width:72ch}

.card{background:var(--card);border:1px solid var(--linie);border-radius:var(--r);box-shadow:var(--umbra);padding:20px}
.grila{display:grid;gap:16px}
.g2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))} .g4{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.kpi .eticheta{font-size:13px;color:var(--slab);font-weight:700}
.kpi .valoare{font:800 30px/1.15 'Bricolage Grotesque';margin-top:4px}
.kpi .valoare small{font-size:15px;color:var(--slab);font-weight:700}
.kpi .expl{font-size:13.5px;color:var(--foarte-slab);margin-top:4px}
.kpi.bilet{background:var(--bilet-bg);border-color:#f3dca6}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:11px;padding:12px 18px;font:800 15.5px 'Figtree',sans-serif;cursor:pointer;background:var(--cerneala);color:#fff;white-space:nowrap;text-decoration:none}
.btn:hover{background:var(--cerneala3);text-decoration:none}
.btn.bilet{background:var(--bilet);color:var(--cerneala)} .btn.bilet:hover{background:#f6c25c}
.btn.verde{background:var(--verde)} .btn.alb{background:#fff;color:var(--cerneala);border:2px solid var(--linie)} .btn.alb:hover{border-color:var(--cerneala)}
.btn.mic{padding:8px 13px;font-size:14px;border-radius:9px}
.explica{font-size:13.5px;color:var(--slab);margin-top:6px}
.pastila{display:inline-flex;align-items:center;gap:6px;border-radius:99px;padding:3px 11px;font-size:13px;font-weight:800;white-space:nowrap}
.p-verde{background:var(--verde-bg);color:var(--verde)} .p-galben{background:var(--galben-bg);color:var(--galben)} .p-rosu{background:var(--rosu-bg);color:var(--rosu)}
.p-albastru{background:var(--albastru-bg);color:var(--albastru)} .p-mov{background:var(--mov-bg);color:var(--mov)} .p-gri{background:var(--gri-bg);color:var(--gri)}
.mesaj{padding:14px 18px;border-radius:13px;margin:0 0 18px;font-weight:700}
.mesaj.bine{background:var(--verde-bg);color:#11603a} .mesaj.rau{background:var(--rosu-bg);color:#9b2c2c}
.liniste{padding:18px;border-radius:14px;background:var(--verde-bg);color:#11603a;font-weight:700}

.file{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 12px}
.file a{padding:9px 15px;border-radius:11px;background:#fff;border:2px solid var(--linie);color:var(--text);font-weight:800;font-size:14.5px}
.file a:hover{text-decoration:none;border-color:var(--cerneala3)}
.file a.activ{background:var(--cerneala);border-color:var(--cerneala);color:#fff}
.file a .nr{display:inline-block;margin-left:6px;background:#14343b14;border-radius:99px;padding:0 8px;font-size:13px}
.file a.activ .nr{background:#ffffff26}
.cipuri{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 16px}
.cipuri a{padding:5px 12px;border-radius:99px;background:#fff;border:1px solid var(--linie);color:var(--slab);font-weight:700;font-size:13.5px}
.cipuri a.activ{background:var(--bilet-bg);border-color:var(--bilet);color:var(--bilet-ink)}
.cauta{display:flex;gap:10px;margin:0 0 14px;flex-wrap:wrap}
.cauta input{flex:1;min-width:200px;font:600 17px 'Figtree',sans-serif;padding:13px 16px;border-radius:13px;border:2px solid var(--linie);background:#fff;color:var(--text)}
.cauta input:focus{border-color:var(--bilet);outline:none}
input.camp,select.camp,textarea.camp{font:600 16px 'Figtree',sans-serif;padding:11px 13px;border-radius:11px;border:2px solid var(--linie);background:#fff;color:var(--text);width:100%}
textarea.camp{min-height:150px;line-height:1.5;resize:vertical}
input.camp:focus,select.camp:focus,textarea.camp:focus{border-color:var(--bilet);outline:none}
label.et{display:block;font-size:13.5px;font-weight:800;color:var(--slab);margin:0 0 5px}
input.cant{width:84px}

/* inboxul */
.inbox{background:var(--card);border:1px solid var(--linie);border-radius:var(--r);box-shadow:var(--umbra);overflow:hidden}
.tic{display:grid;grid-template-columns:42px minmax(0,1fr) auto;gap:14px;padding:15px 18px;border-bottom:1px solid var(--linie);color:var(--text);align-items:start}
.tic:last-child{border-bottom:0}
.tic:hover{background:#f7faf9;text-decoration:none}
.tic.nou{background:linear-gradient(90deg,var(--bilet-bg),#fff 40%)}
.tic .fata{font-size:26px;line-height:1;padding-top:2px;text-align:center}
.tic .sus{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.tic .sus b{font-size:16px}
.tic .subiect{font-weight:700;margin-top:2px}
.tic .ultim{color:var(--slab);font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.tic .dr{text-align:right;font-size:13px;color:var(--slab);display:flex;flex-direction:column;gap:6px;align-items:flex-end}
.numar{font:700 13px 'Bricolage Grotesque';color:var(--foarte-slab);letter-spacing:.03em}

/* conversatia */
.conv{display:flex;flex-direction:column;gap:14px}
.bula{max-width:82%;padding:13px 16px;border-radius:16px;white-space:pre-wrap;line-height:1.5;box-shadow:var(--umbra)}
.bula .cine{font-size:12.5px;font-weight:800;color:var(--slab);margin-bottom:4px;white-space:normal}
.bula.client{align-self:flex-start;background:#fff;border:1px solid var(--linie);border-bottom-left-radius:4px}
.bula.agent,.bula.edrax{align-self:flex-end;background:var(--bilet-bg);border:1px solid #f3dca6;border-bottom-right-radius:4px}
.bula.intern{align-self:stretch;max-width:none;background:#f4f7f6;border:1px dashed var(--foarte-slab);box-shadow:none;font-size:14.5px}
.bula.sistem{align-self:center;max-width:90%;background:var(--gri-bg);box-shadow:none;font-size:14px;text-align:center;border-radius:99px;padding:8px 16px}
.bula.ciorna{align-self:stretch;max-width:none;background:#fff;border:2px dashed var(--mov);box-shadow:none}
.bula.ciorna .cine{color:var(--mov)}
.panou-dr{display:grid;gap:14px;align-content:start}
.mini{font-size:14px} .mini .rand{display:flex;justify-content:space-between;gap:10px;padding:6px 0;border-bottom:1px solid var(--linie)} .mini .rand:last-child{border-bottom:0}
.drum-mic{list-style:none;margin:8px 0 0;padding:0;font-size:13.5px}
.drum-mic li{padding:3px 0 3px 16px;position:relative;color:var(--slab)} .drum-mic li::before{content:'';position:absolute;left:2px;top:10px;width:7px;height:7px;border-radius:50%;background:var(--linie)}
.drum-mic li:first-child{color:var(--text);font-weight:700} .drum-mic li:first-child::before{background:var(--bilet)}

/* rapoarte */
.bara-h{display:grid;grid-template-columns:170px 1fr 44px;gap:10px;align-items:center;padding:6px 0;font-size:14.5px}
.bara-h .b{height:14px;border-radius:7px;background:var(--bilet)}
.bara-h .n{text-align:right;font-weight:800}
.tabel{width:100%;border-collapse:separate;border-spacing:0}
.tabel th{font-size:12.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--foarte-slab);text-align:left;padding:10px 12px;border-bottom:1px solid var(--linie);font-weight:800}
.tabel td{padding:12px;border-bottom:1px solid var(--linie);vertical-align:middle}
.tabel tr:last-child td{border-bottom:0}
.tabel .dr{text-align:right;white-space:nowrap} .tabel .mic{font-size:13px;color:var(--slab)}
.cutie-tabel{background:var(--card);border:1px solid var(--linie);border-radius:var(--r);box-shadow:var(--umbra);overflow-x:auto}

@media (max-width:900px){
  .cadru{flex-direction:column}
  .meniu{width:auto;flex:none;height:auto;position:static;flex-direction:row;flex-wrap:wrap;padding:12px;gap:6px}
  .meniu .marca{width:100%;padding:2px 4px 8px} .meniu .grup,.meniu .jos{display:none}
  .meniu a{padding:8px 11px;font-size:14px}
  .pagina{padding:18px 16px} .banda{padding:8px 16px} h1{font-size:25px}
  .tic{grid-template-columns:30px minmax(0,1fr)} .tic .dr{grid-column:2;align-items:flex-start;flex-direction:row;flex-wrap:wrap}
  .bula{max-width:94%} .bara-h{grid-template-columns:110px 1fr 36px}
  .grila{grid-template-columns:minmax(0,1fr)!important}   /* 3 oct: pagina tichetului avea 2 coloane pe telefon (stil inline) */
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* 3 oct: chatul live de pe site */
.live-semn{display:flex;gap:8px;align-items:center;font-size:13.5px;font-weight:800;color:var(--rosu);margin:0 0 12px}
.live-semn span{width:10px;height:10px;border-radius:50%;background:var(--rosu);box-shadow:0 0 0 0 rgba(207,64,64,.5);animation:puls 1.6s infinite}
@keyframes puls{0%{box-shadow:0 0 0 0 rgba(207,64,64,.45)}70%{box-shadow:0 0 0 9px rgba(207,64,64,0)}100%{box-shadow:0 0 0 0 rgba(207,64,64,0)}}
@media (prefers-reduced-motion:reduce){.live-semn span{animation:none}}
/* 3 oct: produsele trimise de EDRAX in chat, ca fise scurte */
.bula .fisa-prod{display:inline-flex;align-items:center;gap:6px;margin:3px 6px 0 0;padding:5px 10px;border-radius:9px;background:#fff;border:1px solid rgba(0,0,0,.12);font-size:13px;font-weight:700;text-decoration:none;color:inherit}
.bula .fisa-prod:hover{border-color:currentColor}