/* =========================================================================
   LitoralulRomanesc · Reports — Design System
   Tema light, profesionala. Tokens -> componente.
   ========================================================================= */

:root {
  /* paleta */
  --bg:        #eef1f4;
  --surface:   #ffffff;
  --surface-2: #f7f9fb;
  --border:    #e2e7ec;
  --border-2:  #d3dae1;

  --text:      #16242f;
  --text-soft: #51606c;
  --text-mute: #8795a1;

  --brand:     #1f7a4d;   /* verde litoral */
  --brand-700: #196340;
  --brand-50:  #e9f3ed;

  --pos:       #15803d;   /* delta in crestere */
  --pos-bg:    #e7f4ec;
  --neg:       #b42318;   /* delta in scadere */
  --neg-bg:    #fbeae8;
  --warn:      #92610a;   /* rezerva la date, nu eroare */
  --warn-bg:   #fdf5e3;

  --accent:    #2563eb;

  /* forma */
  --r-sm: 6px;  --r: 10px;  --r-lg: 14px;
  --sh-sm: 0 1px 2px rgba(16,40,60,.06);
  --sh:    0 1px 3px rgba(16,40,60,.08), 0 1px 2px rgba(16,40,60,.04);
  --sh-lg: 0 6px 24px rgba(16,40,60,.10);

  --ff: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --num: "SF Mono", "Roboto Mono", ui-monospace, Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--ff);
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
}
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }
code { font-family: var(--num); background: var(--surface-2); padding: 1px 6px; border-radius: var(--r-sm); font-size: .92em; border: 1px solid var(--border); }
h1 { font-size: 22px; font-weight: 700; letter-spacing: -.01em; margin: 0; }
h2 { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--text-mute); margin: 28px 0 12px; }
.muted { color: var(--text-mute); }
.tnum { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }

/* ---- topbar ---- */
.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 18px;
  height: 58px; padding: 0 24px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--sh-sm);
}
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 16px; color: var(--text); letter-spacing: -.01em; }
.brand:hover { text-decoration: none; }
.brand .logo {
  width: 30px; height: 30px; border-radius: 9px;
  background: linear-gradient(135deg, var(--brand), #2ea36a);
  display: grid; place-items: center; color: #fff; font-size: 16px;
}
.brand .sub { color: var(--text-mute); font-weight: 500; }
.topbar .spacer { flex: 1; }
.topbar .who { color: var(--text-mute); font-size: 13px; }

/* ---- layout ----
   Latimea intreaga a ecranului, nu 1240px. Rapoartele sunt tabele late — cel de
   campanii are 15 coloane — iar pe un monitor de 1920px se iroseau ~680px de
   margini albe in timp ce coloanele de ROAS cadeau in afara si cereau scroll
   orizontal. */
.container { max-width: 100%; margin: 0 auto; padding: 26px 24px 70px; }
/* Textul explicativ ramane insa ingust: un paragraf intins pe 2000px se citeste
   prost, iar tabelele sunt cele care aveau nevoie de latime, nu proza. */
.page-head p, .crumbs + p, .panel-body > p.muted { max-width: 100ch; }
.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 6px; }
.crumbs { margin-bottom: 14px; font-size: 13px; }

/* ---- status pill ---- */
.status { display: inline-flex; align-items: center; gap: 8px; padding: 7px 13px; border-radius: 999px; font-size: 13px; font-weight: 500; border: 1px solid var(--border); background: var(--surface); }
.status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--text-mute); }
.status.ok { color: var(--brand-700); background: var(--brand-50); border-color: #cfe6da; }
.status.ok::before { background: var(--pos); }
.status.err { color: var(--neg); background: var(--neg-bg); border-color: #f3d3cf; }
.status.err::before { background: var(--neg); }
/* atentionare, nu eroare: raportul e bun, dar are o rezerva de spus (ex. liniile
   in EUR convertite cu ultimul curs BNR, in loc de cursul rezervarii). */
.status.warn { color: var(--warn); background: var(--warn-bg); border-color: #f0dcb0; }
.status.warn::before { background: var(--warn); }

/* ---- cards (dashboard) ---- */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.card {
  display: block; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 18px; box-shadow: var(--sh-sm);
  transition: box-shadow .15s, border-color .15s, transform .15s;
}
.card:hover { text-decoration: none; border-color: var(--brand); box-shadow: var(--sh-lg); transform: translateY(-1px); }
.card h3 { margin: 0 0 6px; font-size: 15px; font-weight: 650; color: var(--text); display: flex; align-items: center; gap: 8px; }
.card p { margin: 0; color: var(--text-soft); font-size: 13px; }
.card .ic { font-size: 17px; }

/* ---- KPI tiles ---- */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin: 18px 0; }
.kpi { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 15px 16px; box-shadow: var(--sh-sm); }
.kpi .label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--text-mute); }
.kpi .value { font-size: 25px; font-weight: 700; letter-spacing: -.02em; margin: 7px 0 4px; color: var(--text); }
.kpi .value small { font-size: 13px; font-weight: 600; color: var(--text-mute); }
.kpi .vs { font-size: 12px; color: var(--text-mute); }
.delta { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; font-weight: 600; padding: 1px 7px; border-radius: 999px; margin-top: 6px; }
.delta.up { color: var(--pos); background: var(--pos-bg); }
.delta.down { color: var(--neg); background: var(--neg-bg); }
.delta.flat { color: var(--text-mute); background: var(--surface-2); }

/* ---- panel ---- */
.panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--sh-sm); margin: 18px 0; }
.panel-head { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--border); font-weight: 650; font-size: 14px; }
.panel-body { padding: 18px; }

/* ---- buttons ---- */
.btn { display: inline-flex; align-items: center; gap: 7px; padding: 8px 15px; border-radius: var(--r-sm); font-size: 13px; font-weight: 600; border: 1px solid var(--border-2); background: var(--surface); color: var(--text); cursor: pointer; transition: .12s; }
.btn:hover { text-decoration: none; border-color: var(--brand); color: var(--brand-700); }
.btn.primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn.primary:hover { background: var(--brand-700); color: #fff; }

/* ---- form controls / segmented ---- */
.field { display: flex; flex-direction: column; gap: 5px; }
.field label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--text-mute); }
.field select, .field input { font-family: var(--ff); font-size: 13px; padding: 8px 10px; border: 1px solid var(--border-2); border-radius: var(--r-sm); background: var(--surface); color: var(--text); }
.field select:focus, .field input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-50); }
.seg { display: inline-flex; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 3px; gap: 2px; }
.seg button, .seg a { border: 0; background: transparent; padding: 6px 13px; border-radius: 5px; font-size: 13px; font-weight: 600; color: var(--text-soft); cursor: pointer; }
.seg .active { background: var(--brand); color: #fff; box-shadow: var(--sh-sm); }
.info { display: inline-flex; width: 16px; height: 16px; align-items: center; justify-content: center; border-radius: 50%; background: var(--surface-2); border: 1px solid var(--border-2); font-size: 11px; color: var(--text-mute); cursor: help; }
.info:hover { border-color: var(--brand); color: var(--brand); }

/* ---- table ---- */
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--sh-sm); }
table { border-collapse: collapse; width: 100%; font-size: 13px; }
th, td { text-align: left; padding: 10px 16px; white-space: nowrap; }
thead th { position: sticky; top: 0; background: var(--surface-2); color: var(--text-mute); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; border-bottom: 1px solid var(--border); }
tbody td { border-bottom: 1px solid var(--border); }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--surface-2); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
/* tabel churn (Before / CXL / After): coloane stranse la continut, spacer absoarbe restul */
table.churn { width: 100%; }
/* Spatiere mai stransa decat restul tabelelor: astea au 15 coloane, iar pe un
   laptop ultimele (ROAS TTV / ROAS com) cadeau in afara ecranului. */
table.churn th, table.churn td { padding: 7px 8px; }
table.churn .spc { width: 100%; padding: 0; }
table.churn thead th[colspan] { text-align: center; }
table.churn td.grp, table.churn th.grp { border-left: 1px solid var(--border-2); }
/* rand de total (in tfoot, ca sortarea sa nu il mute din loc); lipit jos la derulare */
tfoot tr.tot td { position: sticky; bottom: 0; background: var(--surface-2); font-weight: 700;
  border-top: 2px solid var(--border-2); }
tfoot tr.tot td.grp { border-left: 1px solid var(--border-2); }
/* Coloanele de identitate (sursa/medium/campanie): trunchiere cu … + tooltip.
   Latimile sunt FIXE, nu doar maxime, din doua motive: tabelul devine mai ingust
   si mai previzibil, iar pozitionarea lipita de mai jos are nevoie de ele.

   Lipite la stanga: chiar daca pe un ecran mic tot ramane de derulat pana la
   ROAS, numele campaniei ramane pe ecran. Fara asta, ca sa vezi „ROAS com"
   trebuia sa derulezi pana pierdeai din ochi randul pe care erai. */
table.churn td.c-src, table.churn th.c-src { width: 78px; max-width: 78px; overflow: hidden; text-overflow: ellipsis; }
table.churn td.c-med, table.churn th.c-med { width: 62px; max-width: 62px; overflow: hidden; text-overflow: ellipsis; }
table.churn td.c-camp, table.churn th.c-camp { width: 190px; max-width: 190px; overflow: hidden; text-overflow: ellipsis; }
table.churn .c-src, table.churn .c-med, table.churn .c-camp { position: sticky; z-index: 2; }
table.churn .c-src { left: 0; }
table.churn .c-med { left: 78px; }
table.churn .c-camp { left: 140px; }
/* fundal opac, altfel randul de sub ele se vede prin coloanele lipite */
table.churn tbody .c-src, table.churn tbody .c-med, table.churn tbody .c-camp { background: var(--surface); }
/* in cap sunt lipite si sus, si la stanga -> peste celelalte celule de cap */
table.churn thead .c-src, table.churn thead .c-med, table.churn thead .c-camp { z-index: 21; background: var(--surface-2); }
/* acordeon (b1): hotel parinte + split campanii */
tr.acc-h { cursor: pointer; }
tr.acc-h:hover { background: var(--surface-2); }
tr.acc-h .caret { display: inline-block; width: 12px; color: var(--text-mute); transition: transform .12s; }
tr.acc-h.open .caret { transform: rotate(90deg); }
tr.acc-c td { background: var(--surface-2); }
tr.acc-c td.sub { padding-left: 28px; color: var(--text-soft); }
/* linkuri mici catre ERP, pe randurile de camera din /hotel-sales */
td.lnk { white-space: nowrap; }
td.lnk a { text-decoration: none; margin-right: 6px; opacity: .7; }
td.lnk a:hover { opacity: 1; }
/* deep-link ERP: randuri/celule clickabile */
tr.erp-row { cursor: pointer; }
table.churn td.cell { cursor: pointer; }
a.erp { color: inherit; text-decoration: none; }
a.erp:hover { color: var(--brand); text-decoration: underline; }

/* ---- footer ---- */
/* ---- timeline agenti ---- */
.tl-legend { display: flex; gap: 16px; font-size: 12px; color: var(--text-soft); align-items: center; }
.tl-legend i { font-style: normal; margin-right: 4px; }
.ev-cer { color: #0d9488; } .ev-telin { color: #7c3aed; } .ev-telout { color: #db2777; } .ev-of { color: #d97706; } .ev-rez { color: #1f7a4d; } .ev-rezxml { color: #2563eb; }

.tl-legend label { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
.tl-legend input { cursor: pointer; margin: 0; }

.tl-wrap { overflow-x: auto; }
.tl { min-width: 1000px; }
/* badges / gamification */
.badges { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin: 16px 0; }
.badge { display: flex; align-items: center; gap: 9px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 9px 11px; box-shadow: var(--sh-sm); min-width: 0; }
.badge .bi { font-size: 22px; line-height: 1; }
.badge > div { min-width: 0; }
.badge .bl { font-weight: 700; font-size: 12px; white-space: nowrap; }
.badge .ba { font-size: 11px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 900px) { .badges { grid-template-columns: repeat(3, 1fr); } }
.medal { font-size: 15px; }
.rank { display: inline-block; min-width: 18px; text-align: center; font-size: 11px; font-weight: 700; color: var(--text-mute); }
.abadge { font-size: 12px; }

.tl-row { display: grid; grid-template-columns: 200px 40px 40px 40px 40px 40px 46px 112px 112px 56px 1fr; align-items: center; border-bottom: 1px solid var(--border); }
#tlbody .tl-row:last-child { border-bottom: 0; }
#tlbody .tl-row:hover { background: var(--surface-2); }
.tl-head { position: sticky; top: 0; background: var(--surface-2); border-bottom: 1px solid var(--border); z-index: 2; }
.tl-head .tl-agent, .tl-head .m { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--text-mute); }
.tl-agent { padding: 8px 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13px; font-weight: 500; }
.sortable { cursor: pointer; user-select: none; }
.sortable:hover { color: var(--brand); }
.sortable.sort-asc::after { content: " ▲"; font-size: 9px; }
.sortable.sort-desc::after { content: " ▼"; font-size: 9px; }
.m { text-align: center; font-size: 12px; font-weight: 600; padding: 6px 2px; color: var(--text); }
.m.mv { text-align: right; padding-right: 10px; }
a.m:hover { text-decoration: none; }
a.m.cer { color: #0d9488; } a.m.tel { color: #7c3aed; } a.m.of { color: #d97706; } a.m.rez { color: #1f7a4d; } a.m.xml { color: #2563eb; }
a.m.trez, a.m.vrez { color: var(--text); }
a.m.vcom { color: #d97706; }
/* filtrare tipuri (markeri) */
#tl.hide-cer .ev-cer, #tl.hide-telin .ev-telin, #tl.hide-telout .ev-telout, #tl.hide-of .ev-of, #tl.hide-rez .ev-rez, #tl.hide-rezxml .ev-rezxml { display: none; }
.tl-track { position: relative; height: 30px; border-left: 1px solid var(--border); }
.tl-tick { position: absolute; top: 7px; transform: translateX(-50%); font-size: 10px; color: var(--text-mute); }
.tl-grid { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--border); opacity: .5; }
.tl-prog { position: absolute; top: 0; bottom: 0; width: 0; border-left: 1px dashed rgba(31,122,77,.55); }
.ev { position: absolute; top: 50%; transform: translate(-50%, -50%); font-size: 11px; line-height: 1; text-decoration: none; cursor: pointer; }
.ev:hover { text-decoration: none; transform: translate(-50%, -50%) scale(1.5); z-index: 3; }
.ev-rez, .ev-rezxml { font-size: 13px; }
.tl-heat { display: grid; height: 30px; }
.heat-cell { display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 600; border-right: 1px solid var(--border); }
.heat-cell:last-child { border-right: 0; }
.heat-head { display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 600; color: var(--text-mute); border-right: 1px solid var(--border); overflow: hidden; white-space: nowrap; padding: 0 2px; }
.heat-head:last-child { border-right: 0; }

.footer { color: var(--text-mute); font-size: 12px; padding: 22px 24px; border-top: 1px solid var(--border); background: var(--surface); }

@media (max-width: 640px) {
  .container { padding: 18px 14px 50px; }
  .kpi .value { font-size: 21px; }
}