/* Lot 2 lipsuri (5-Oct-2026): pâlnia cap-coadă și raportul săptămânal, aceleași clase în War
   Room (war-marketing.js) și în aplicația clientului (metrici-client.js). Stă pe display negru
   (`wr-panou`), ca restul stărilor. Pasul fără date e scris, nu desenat ca 0. */
.mk-panou + .mk-panou { margin-top: var(--p4); }
.mk-cont { font-size: 13px; line-height: 1.45; overflow-wrap: anywhere; }

.mk-palnie { list-style: none; margin: var(--p3) 0; padding: 0; display: grid; gap: var(--p3); }
.mk-pas { display: grid; grid-template-columns: minmax(0, 150px) minmax(0, 1fr) auto; gap: 4px var(--p3);
          align-items: center; color: var(--dispink); }
.mk-pas-et { font-size: 14px; font-weight: 700; }
.mk-pas-bara { height: 10px; background: var(--disprule); position: relative; min-width: 40px; }
.mk-pas-bara i { position: absolute; inset: 0 auto 0 0; background: var(--gnd); }
.mk-pas--pierdere .mk-pas-bara i { background: var(--rdd); }
.mk-pas-n { font-family: var(--mono); font-size: 20px; font-variant-numeric: tabular-nums; text-align: right; min-width: 3ch; }
.mk-pas-sub { grid-column: 1 / -1; font-family: var(--mono); font-size: 11px; color: var(--dispink2); overflow-wrap: anywhere; }
.mk-pas--gol .mk-pas-et, .mk-pas--gol .mk-pas-n { color: var(--dispink2); }
.mk-pas--gol .mk-pas-bara { background: repeating-linear-gradient(90deg, var(--disprule) 0 6px, transparent 6px 10px); }

.mk-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: var(--p3); margin: var(--p3) 0; }
.mk-kpi { border-top: 2px solid var(--c, var(--dispink)); padding-top: var(--p2); color: var(--dispink); min-width: 0; }
.mk-kpi b { display: block; font-family: var(--mono); font-size: 26px; font-variant-numeric: tabular-nums; }
.mk-kpi span { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--dispink2); }
.mk-sapt { display: flex; flex-wrap: wrap; gap: var(--p2); align-items: center; font-family: var(--mono); font-size: 12px; color: var(--dispink2); }
.mk-sapt button { font: inherit; color: var(--dispink); background: transparent; border: 1px solid var(--disprule); padding: 6px 10px; cursor: pointer; }
.mk-sapt button:disabled { opacity: .4; cursor: default; }
.mk-sapt button[aria-pressed="true"] { background: var(--dispink); color: var(--disp); border-color: var(--dispink); }
.mk-lista { list-style: none; margin: var(--p2) 0 0; padding: 0; display: grid; gap: 4px; font-size: 13px; color: var(--dispink); }
.mk-lista li { display: flex; justify-content: space-between; gap: var(--p3); border-bottom: 1px solid var(--disprule); padding: 4px 0; }
.mk-nota { font-family: var(--mono); font-size: 12px; color: var(--dispink2); margin: var(--p2) 0 0; }

@media (max-width: 560px) {
  .mk-pas { grid-template-columns: minmax(0, 1fr) auto; }
  .mk-pas-bara { grid-column: 1 / -1; grid-row: 2; }
}

/* .wr-rand implicit are 4 coloane (84px pentru led + text + 2 auto); aici rândurile au doar text
   + coloana din dreapta, deci titlul cădea în coloana de 84px. Aceeași reparație ca #tab-livrare. */
#tab-marketing .wr-rand { grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
#tab-marketing .wr-rand-d { text-align: right; }
@media (max-width: 700px) {
  #tab-marketing .wr-rand { grid-template-columns: minmax(0, 1fr); }
  #tab-marketing .wr-rand-d { text-align: left; white-space: normal; }
}