:root{
  --bg:#F3F3F3;
  --card:#ffffff;
  --text:#1b1b1b;
  --muted:#6f6f6f;
  --border:rgba(0,0,0,.08);
  --primary:#79BA56;
  --secondary:#DFB655;
  --shadow: 0 12px 26px rgba(0,0,0,.10);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font:14px/1.45 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial}
.wrap{max-width:1200px;margin:0 auto;padding:18px}

/* header */
.top{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:12px}
.title{display:flex;align-items:center;gap:12px}
.logo{width:38px;height:38px;border-radius:12px;overflow:hidden;box-shadow:0 10px 20px rgba(0,0,0,.08);border:1px solid var(--border)}
.logo img{width:100%;height:100%;display:block;object-fit:cover}

h1{font-size:18px;margin:0}
.subline{margin-top:2px;color:var(--muted);display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.dot{opacity:.55}

.actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.mini{font-size:12px;color:var(--muted)}
.muted{color:var(--muted)}

/* controls */
.btn{background:var(--primary);color:#fff;border:none;border-radius:14px;padding:10px 12px;font-weight:900;cursor:pointer;box-shadow:0 10px 18px rgba(121,186,86,.22)}
.btn.secondary{background:#fff;color:var(--text);border:1px solid var(--border);box-shadow:none}
.btn:active{transform:translateY(1px)}

.sel{border-radius:14px;border:1px solid var(--border);background:#fff;color:var(--text);padding:10px 12px;font-weight:800}

.pill{background:#fff;border:1px solid var(--border);border-radius:999px;padding:6px 10px;color:var(--muted);font-size:12px}

input{border-radius:14px;border:1px solid var(--border);background:#fff;color:var(--text);padding:10px 12px;outline:none}
input:focus,.sel:focus{border-color:rgba(121,186,86,.6);box-shadow:0 0 0 4px rgba(121,186,86,.18)}

/* layout */
.meta{display:flex;justify-content:flex-start;margin:6px 0 14px}

/* page tabs (subpages) */
.pageTabs{display:flex;gap:8px;flex-wrap:wrap;margin:-2px 0 14px}
.pageTab{
  appearance:none;
  border:1px solid var(--border);
  background:#fff;
  color:var(--text);
  border-radius:999px;
  padding:8px 12px;
  font-weight:950;
  cursor:pointer;
  box-shadow:none;
}
.pageTab:active{transform:translateY(1px)}
.pageTab.isActive{
  background:var(--primary);
  color:#fff;
  border-color:rgba(121,186,86,.38);
  box-shadow:0 10px 18px rgba(121,186,86,.18);
}

.page{margin-top:0}

.h2{margin:8px 0 6px;font-size:16px;line-height:1.25}
.emptyNote{margin-top:10px;padding:10px 12px;border-radius:14px;border:1px dashed rgba(0,0,0,.12);color:var(--muted);background:rgba(255,255,255,.55)}
.card{background:var(--card);border-radius:22px;padding:16px;border:1px solid var(--border);box-shadow:var(--shadow)}
.hidden{display:none}

.k{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.10em}
.kk{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.10em}

.v{font-size:30px;font-weight:950;margin-top:4px;color:var(--text)}
.vline{display:flex;align-items:baseline;gap:6px}
.suf{color:var(--muted);font-weight:900}
.sub{margin-top:2px;color:var(--text);font-weight:900}

.row3{display:grid;grid-template-columns:repeat(3, minmax(0,1fr));gap:10px;margin-top:10px}
.row2{display:grid;grid-template-columns:repeat(2, minmax(0,1fr));gap:12px;margin-top:10px}

/* sparkline */
.spark{margin-top:12px}
.spark svg{width:100%;height:44px;display:block}
.spark .line{fill:none;stroke:var(--primary);stroke-width:2.4}
.spark .area{fill:rgba(121, 186, 86, 0.16)}
.spark .dot{fill:var(--secondary)}

/* settings */
.cfg{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:10px}
.err{color:#b00020;font-size:12px;margin-left:6px}

/* grid */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px;margin-top:12px}

.loader{position:fixed;inset:0;z-index:99999;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.70);backdrop-filter:blur(8px)}
.loader.hidden{display:none}
.loaderCard{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:18px;background:#fff;border:1px solid rgba(0,0,0,.08);box-shadow:0 18px 40px rgba(0,0,0,.15)}
.spinner{width:26px;height:26px;border-radius:999px;border:3px solid rgba(0,0,0,.10);border-top-color:var(--primary,#79BA56);animation:spin .9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.loaderTitle{font-weight:950;font-size:20px;line-height:1.15}
.loaderSub{color:var(--muted,#6f6f6f);font-size:12px;margin-top:2px}

@media (min-width: 820px){
  .grid{display:block !important;column-count:3;column-gap:12px;font-size:0;line-height:0}
  .grid > .card{display:inline-block;width:100%;margin:0 0 12px;break-inside:avoid;vertical-align:top;font-size:14px;line-height:1.45}
}

/* wide charts */
.wide{display:grid;grid-template-columns:1fr;gap:12px;margin-top:12px}
.wideCard{padding:16px}
.wideHead{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap}
.wideHead h2{margin:6px 0 0;font-size:14px;color:var(--text)}
.wideHint{color:var(--muted);font-size:12px}
.chart{margin-top:12px}
.chart svg{width:100%;height:220px;display:block}
.chart .axis{stroke:rgba(0,0,0,.12);stroke-width:1}
.chart .label{fill:rgba(0,0,0,.55);font-size:11px;font-weight:700}
.chart .line{fill:none;stroke:var(--primary);stroke-width:3}
.chart .dot{fill:var(--secondary)}
.chart .area{fill:rgba(121, 186, 86, 0.16)}

.footer{margin-top:14px;color:var(--muted);font-size:12px;text-align:center}

/* accessibility */
.sr{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

/* hit boxes for charts */
.hit{
  fill: transparent;
  pointer-events: all;
}

/* monthly bars */
.bar{
  fill: var(--secondary);
  opacity: .32;
  transform-box: fill-box;
  transform-origin: center;
  transform: scaleX(.55);
  rx: 6px;
  stroke: rgba(0,0,0,.06);
  stroke-width: 1;
}

.bar:hover{
  opacity: .55;
  transform: scaleX(.62);
}

.rankList { display:flex; flex-direction:column; gap:10px; margin-top:10px; }

.rankRow  {
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 12px; border-radius:14px;
  background: rgba(255,255,255,0.04);
}

.rankLeft { display:flex; align-items:center; gap:10px; min-width:0; }
.rankPos  {
  width:28px; height:28px; display:flex; align-items:center; justify-content:center;
  border-radius:10px; font-weight:800;
  background: rgba(255,255,255,0.06);
}

.rankName { font-weight:650; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rankVal  { font-weight:800; margin-left:10px; }

.rankRow.isMe {
  outline: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.06);
}

.rankRow:first-child {
  background: linear-gradient(135deg, #f6d365, #fda085);
  color:#000;
}

.kRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.tag{
  display:inline-flex;
  flex-direction:column;
  padding:6px 10px;
  border-radius:10px;
  line-height:1.1;
  font-size:12px;
  font-weight:700;
  color:#111;
  background:rgba(0,0,0,.06);
}

.tag .sub{
  margin-top:2px;
  font-size:11px;
  font-weight:600;
  opacity:.75;
}

.badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 8px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  background:rgba(0,0,0,.06);
  color:#111;
  margin-left:8px;
  white-space:nowrap;
}

.badge.red{background: rgba(220, 38, 38, .14); color: rgb(185, 28, 28);}
.badge.orange{background: rgba(245, 158, 11, .18); color: rgb(180, 83, 9);}
.badge.green{background: rgba(34, 197, 94, .16); color: rgb(21, 128, 61);}

.planLine{
  fill: none;
  stroke: rgba(98,187,70,.95);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.planDot{fill: rgba(98,187,70,.95);}
.planHit{fill: transparent;}

/* --- YTD --- */
.ytdBox{margin-top:12px;padding:12px;border-radius:18px;border:1px solid var(--border);background:rgba(255,255,255,.65)}
.ytdTop{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap}
.ytdTitle{display:flex;align-items:center;gap:10px}
.ytdNums{display:flex;gap:16px;flex-wrap:wrap}
.ytdNum{min-width:150px}
.v2{font-size:18px;font-weight:950;margin-top:4px;color:var(--text)}

.ytdBarWrap{margin-top:10px}
.ytdBar{position:relative;height:12px;border-radius:999px;background:rgba(0,0,0,.08);overflow:hidden}
.ytdFill{position:absolute;inset:0 auto 0 0;width:0%;background:var(--primary)}
.ytdMarker{position:absolute;top:-2px;bottom:-2px;width:3px;border-radius:999px;background:rgba(0,0,0,.28);left:0%}
.ytdBarMeta{display:flex;justify-content:space-between;gap:10px;margin-top:6px}

.badge.isUp{background: rgba(34, 197, 94, .16); color: rgb(21, 128, 61);}
.badge.isDown{background: rgba(220, 38, 38, .14); color: rgb(185, 28, 28);}
.badge.isFlat{background: rgba(0,0,0,.08); color:#111;}

@media (max-width: 520px){
  .ytdNum{min-width:130px}
}

.pieRow{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.pie svg{width:100%;height:auto}
.legend{margin-top:10px;display:grid;gap:6px;font-size:12px}
.legend .item{display:flex;align-items:center;gap:8px;color:#666}
.legend .sw{width:10px;height:10px;border-radius:3px;flex:0 0 10px}
@media (max-width: 820px){
  .pieRow{grid-template-columns:1fr}
}

/* mobile */
@media (max-width: 520px){
  .wrap{padding:14px}
  .logo{width:34px;height:34px;border-radius:12px}
  h1{font-size:16px}
  .btn,.sel{padding:9px 10px;border-radius:14px}
  .v{font-size:26px}
  .chart svg{height:200px}
}

/* Salespeople overview table */
.spTable{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  font-size:13px;
}

.spTable thead th{
  position: sticky;
  top: 0;
  z-index: 2;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(6px);
  text-align:left;
  padding:10px 12px;
  border-bottom: 1px solid rgba(0,0,0,0.08);
  font-weight:600;
  white-space:nowrap;
}

.spTable td{
  padding:10px 12px;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  white-space:nowrap;
}

.spTable td.num,
.spTable th.num{
  text-align:right;
  font-variant-numeric: tabular-nums;
}

.spTable tr.alt td{
  background: rgba(0,0,0,0.02);
}

.spTable tbody tr:hover td{
  background: rgba(0,0,0,0.04);
}

.spTable td.name{
  font-weight:600;
}

.spTable tr.selected td,
.spTable tr.selected th{
  background: rgba(121, 186, 86, 0.12);
}

/* CRM pipeline overview table */
.spTableCRM{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
}

.spTableCRM thead th{
  position: sticky;
  top: 0;
  z-index: 2;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(6px);
  padding: 10px 12px;
  border-bottom: 1px solid rgba(0,0,0,0.08);
  font-weight: 600;
  white-space: nowrap;
  text-align: center;
}

.spTableCRM thead th:first-child{
  text-align: left;
}

.spTableCRM td{
  padding: 10px 12px;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  white-space: nowrap;
  text-align: center;
}

.spTableCRM td:first-child{
  text-align: left;
}

.spTableCRM td.num,
.spTableCRM th.num{
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.spTableCRM tr.alt td{
  background: rgba(0,0,0,0.02);
}

.spTableCRM tbody tr:hover td{
  background: rgba(0,0,0,0.04);
}

.spTableCRM td.name{
  font-weight: 600;
  padding-left: 12px;
}

.spTableCRM tr.selected td,
.spTableCRM tr.selected th{
  background: rgba(121, 186, 86, 0.12);
}

.spTableCRM tfoot th,
.spTableCRM tfoot td{
  padding: 10px 12px;
  border-top: 1px solid rgba(0,0,0,0.10);
  font-weight: 700;
  background: rgba(0,0,0,0.03);
  text-align: center;
}

.spTableCRM tfoot th:first-child,
.spTableCRM tfoot td:first-child{
  text-align: left;
}

/* CRM KPI badges */
.crmBadge{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  border: 1px solid transparent;
}

.crmBadge.ok{
  background: rgba(46, 125, 50, 0.12);
  color: #2e7d32;
  border-color: rgba(46, 125, 50, 0.22);
}

.crmBadge.warn{
  background: rgba(178, 106, 0, 0.12);
  color: #b26a00;
  border-color: rgba(178, 106, 0, 0.22);
}

.crmBadge.bad{
  background: rgba(198, 40, 40, 0.12);
  color: #c62828;
  border-color: rgba(198, 40, 40, 0.24);
}

.crmBadge.neutral{
  background: rgba(0,0,0,0.04);
  color: #222;
  border-color: rgba(0,0,0,0.08);
}

#salespeopleTable{
  overflow:auto;
  width:100%;
}

/* ---------------- Rewards ---------------- */
.rewardCard{
  background: var(--card);
  border-radius: 22px;
  padding: 0;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.rewardCard + .rewardCard{margin-top:12px}

.rewardCard > summary{
  list-style:none;
  cursor:pointer;
  padding:14px 16px;
}

.rewardCard > summary::-webkit-details-marker{display:none}

.rewardTop{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}

.rewardName{font-weight:950;font-size:16px}
.rewardSub{margin-top:2px;color:var(--muted);font-size:12px}

.rewardNums{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:10px;
  align-items:stretch;
  min-width:min(560px, 100%);
}

.rewardNum{
  padding:10px 12px;
  border-radius:16px;
  border:1px solid rgba(0,0,0,0.06);
  background: rgba(255,255,255,.65);
}

.rewardNum .kk{margin-bottom:4px}
.rewardNum .v2{font-size:16px}

.rewardBody{
  padding:0 16px 16px;
}

.rewardTableWrap{
  margin-top:12px;
  overflow:auto;
  width:100%;
  border-radius:16px;
  border:1px solid rgba(0,0,0,0.06);
  background: rgba(255,255,255,.65);
}

.rewardTable{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  font-size:13px;
}

.rewardTable thead th{
  position: sticky;
  top: 0;
  z-index: 2;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(6px);
  text-align:left;
  padding:10px 12px;
  border-bottom: 1px solid rgba(0,0,0,0.08);
  font-weight:650;
  white-space:nowrap;
}

.rewardTable td{
  padding:10px 12px;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  white-space:nowrap;
}

.rewardTable td.num,
.rewardTable th.num{
  text-align:right;
  font-variant-numeric: tabular-nums;
}

.rewardTable tr.alt td{background: rgba(0,0,0,0.02)}
.rewardTable tbody tr:hover td{background: rgba(0,0,0,0.04)}

@media (max-width: 520px){
  .rewardNums{grid-template-columns:1fr;min-width:100%}
}

/* bar value labels */
.chart .barVal{fill:rgba(0,0,0,.78);font-size:11px;font-weight:800}

/* SK/CZ split boxes */
.splitGrid{display:grid;grid-template-columns:1fr;gap:12px;margin-top:12px}
@media (min-width: 820px){
  .splitGrid{grid-template-columns:1fr 1fr}
}
.splitBox{padding:12px;border-radius:16px;border:1px solid rgba(0,0,0,.06);background:rgba(255,255,255,.65)}
.splitHead{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:10px}
.splitBar{height:12px;border-radius:999px;overflow:hidden;display:flex;background:rgba(0,0,0,.06)}
.splitSeg{height:100%}
.splitSeg.sk{background:var(--primary)}
.splitSeg.cz{background:var(--secondary)}
.splitMeta{margin-top:10px;display:flex;flex-direction:column;gap:6px}
.splitRow{display:grid;grid-template-columns:16px 1fr auto auto;gap:8px;align-items:center;font-size:13px}
.splitRow .lbl{font-weight:750}
.splitRow .val{font-variant-numeric:tabular-nums;font-weight:750}
.splitRow .pct{font-variant-numeric:tabular-nums;color:var(--muted);font-weight:750}
.splitRow .dot{width:10px;height:10px;border-radius:999px;display:inline-block}
.splitRow .dot.sk{background:var(--primary)}
.splitRow .dot.cz{background:var(--secondary)}

/* =========================
   REPORT / PDF EXPORT
========================= */

.modal{
  position:fixed;
  inset:0;
  z-index:100000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
}
.modal.hidden{display:none}

.modalBackdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.28);
  backdrop-filter:blur(4px);
}

.modalCard{
  position:relative;
  z-index:1;
  width:min(680px,100%);
  background:#fff;
  border:1px solid var(--border);
  border-radius:24px;
  box-shadow:0 24px 60px rgba(0,0,0,.18);
  padding:20px;
}

.modalHead{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}

.modalHead h2{
  margin:6px 0 0;
  font-size:24px;
  line-height:1.15;
}

.modalBody{
  margin-top:18px;
  display:grid;
  gap:18px;
}

.field{display:grid;gap:8px}

.checks{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}

.check{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border:1px solid rgba(0,0,0,.08);
  border-radius:14px;
  background:rgba(0,0,0,.02);
  font-weight:700;
}

.check input{margin:0}

.modalActions{
  margin-top:18px;
  display:flex;
  justify-content:flex-end;
  gap:8px;
  flex-wrap:wrap;
}

@media (max-width:560px){
  .checks{grid-template-columns:1fr}
}

/* report shell */
.reportRoot{
  display:none;
  background:#fff;
  color:#111;
}

.reportShell{
  width:100%;
  background:#fff;
  color:#111;
}

/* titulka */
.reportCover{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
  padding:34mm 20mm 24mm;
  position:relative;
  background:
    linear-gradient(180deg, rgba(121,186,86,.05), rgba(121,186,86,0) 32%),
    #fff;
}

.reportCover::after{
  content:"";
  position:absolute;
  left:20mm;
  right:20mm;
  bottom:18mm;
  height:4px;
  border-radius:999px;
  background:linear-gradient(90deg, var(--primary), var(--secondary));
}

.reportBrand{
  display:flex;
  align-items:center;
  gap:16px;
  margin-bottom:18px;
}

.reportBrand img{
  width:72px;
  height:72px;
  object-fit:contain;
  border-radius:18px;
}

.reportBrandText{
  display:flex;
  flex-direction:column;
  gap:4px;
}

.reportEyebrow{
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:#6d6d6d;
  font-weight:800;
}

.reportTitle{
  font-size:34px;
  line-height:1.05;
  font-weight:950;
  margin:0 0 10px;
  color:#111;
}

.reportSub{
  color:#575757;
  font-size:15px;
  line-height:1.6;
  max-width:760px;
}

.reportMetaGrid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  margin-top:24px;
  width:100%;
  max-width:900px;
}

.reportMetaCard{
  border:1px solid rgba(0,0,0,.08);
  border-radius:18px;
  padding:14px 16px;
  background:rgba(121,186,86,.04);
}

.reportMetaCard .k{
  margin-bottom:6px;
}

.reportMetaCard .v3{
  font-size:18px;
  font-weight:900;
  color:#111;
}

.reportSection{
  padding:10mm 4mm 5mm;
  page-break-before:always;
  break-before:page;
}

.reportSection:first-of-type{
  page-break-before:auto;
  break-before:auto;
}

.reportSectionHead{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:12px;
  padding-bottom:10px;
  border-bottom:2px solid rgba(0,0,0,.06);
}

.reportSectionTitle{
  font-size:22px;
  font-weight:950;
  line-height:1.1;
  margin:0;
  color:#111;
}

.reportBadge{
  display:inline-flex;
  align-items:center;
  padding:7px 12px;
  border-radius:999px;
  background:rgba(121,186,86,.12);
  color:#234315;
  font-size:12px;
  font-weight:900;
  letter-spacing:.04em;
  text-transform:uppercase;
}

/* reset app layout v reporte */
.reportSection .page{
  display:block !important;
}

.reportSection .hidden{
  display:none !important;
}

.reportSection .sel,
.reportSection .btn,
.reportSection .pageTab,
.reportSection .actions,
.reportSection .pageTabs,
.reportSection .cfg,
.reportSection .loader,
.reportSection #settingsPanel,
.reportSection .footer{
  display:none !important;
}

/* KPI layout v reporte – žiadne masonry */
.reportSection .grid{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:10px !important;
  margin-top:0 !important;
  column-count:unset !important;
}

.reportSection .grid > .card{
  display:block !important;
  width:auto !important;
  margin:0 !important;
  break-inside:avoid;
  page-break-inside:avoid;
}

/* wide sekcie */
.reportSection .wide{
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:10px !important;
  margin-top:10px !important;
}

.reportSection .wideCard{
  padding:12px !important;
  break-inside:avoid;
  page-break-inside:avoid;
}

/* vzhľad kariet v reporte */
.reportSection .card,
.reportSection .rewardCard,
.reportSection .wideCard{
  box-shadow:none !important;
  border:1px solid rgba(0,0,0,.10) !important;
  background:#fff !important;
  border-radius:16px !important;
}

/* kompaktné texty */
.reportSection .k{
  font-size:10px;
  letter-spacing:.14em;
}

.reportSection .kk{
  font-size:10px;
}

.reportSection .v{
  font-size:24px;
}

.reportSection .v2{
  font-size:16px;
}

.reportSection .sub{
  font-size:12px;
}

/* rows */
.reportSection .row3{
  gap:8px;
  margin-top:8px;
}

.reportSection .row2{
  gap:8px;
  margin-top:8px;
}

/* sparkline */
.reportSection .spark{
  margin-top:8px;
}
.reportSection .spark svg{
  height:38px !important;
}

/* grafy */
.reportSection .chart{
  margin-top:8px;
}
.reportSection .chart svg{
  height:180px !important;
}

/* ytd */
.reportSection .ytdBox{
  margin-top:10px;
  padding:10px;
  border-radius:14px;
  background:rgba(121,186,86,.04);
  border:1px solid rgba(121,186,86,.16);
}

.reportSection .ytdTop{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
}

.reportSection .ytdNums{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}

.reportSection .ytdNum{
  min-width:0 !important;
}

.reportSection .ytdBarWrap{
  margin-top:8px;
}

.reportSection .ytdBar{
  height:14px;
}

.reportSection .ytdBarMeta{
  margin-top:6px;
  font-size:11px;
}

/* pie */
.reportSection .pieRow{
  grid-template-columns:1fr 1fr !important;
  gap:10px !important;
}

/* split */
.reportSection .splitGrid{
  grid-template-columns:1fr 1fr !important;
  gap:10px !important;
}

/* tabuľky */
.reportSection #salespeopleTable,
.reportSection .rewardTableWrap{
  overflow:visible !important;
  max-height:none !important;
  border-radius:14px;
}

.reportSection .spTable,
.reportSection .rewardTable{
  font-size:11px;
}

.reportSection .spTable thead th,
.reportSection .rewardTable thead th{
  position:static !important;
  backdrop-filter:none !important;
  background:#f7f7f7 !important;
}

.reportSection .spTable td,
.reportSection .spTable th,
.reportSection .rewardTable td,
.reportSection .rewardTable th{
  padding:7px 8px !important;
}

/* odmeny v reporte */
.reportSection details{
  open:open;
}

.reportSection #rewardsHint{
  display:none !important;
}

.reportSection .rewardCard{
  margin-top:8px !important;
  break-inside:avoid !important;
  page-break-inside:avoid !important;
  border:1px solid rgba(0,0,0,.10) !important;
  box-shadow:none !important;
  background:#fff !important;
  border-radius:16px !important;
}

.reportSection .rewardCard > summary{
  display:block !important;
  padding:10px 12px !important;
  cursor:default !important;
}

.reportSection .rewardBody{
  display:block !important;
  padding:0 12px 12px !important;
}

.reportSection .rewardTop{
  display:flex !important;
  gap:10px !important;
}

.reportSection .rewardName{
  font-size:15px !important;
}

.reportSection .rewardSub{
  font-size:11px !important;
}

.reportSection .rewardNums{
  min-width:0 !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:8px !important;
}

.reportSection .rewardNum{
  padding:8px 10px !important;
  border-radius:12px !important;
}

.reportSection .rewardNum .v2{
  font-size:14px !important;
}

.reportSection .rewardTableWrap{
  margin-top:8px !important;
  overflow:visible !important;
  width:100% !important;
}

.reportSection .rewardTable{
  width:100% !important;
  table-layout:auto !important;
  font-size:10px !important;
}

.reportSection .rewardTable th,
.reportSection .rewardTable td{
  padding:6px 6px !important;
  white-space:nowrap !important;
}

.reportSection .rewardTable th:last-child,
.reportSection .rewardTable td:last-child{
  min-width:74px !important;
}

/* technické a iné heads */
.reportSection .kRow{
  justify-content:flex-start !important;
}
.reportSection .kRow > div:last-child{
  display:none !important;
}

/* iba report pri tlači */
body.reportPrinting > .wrap,
body.reportPrinting > .loader,
body.reportPrinting > #loader,
body.reportPrinting > .modal{
  display:none !important;
}

body.reportPrinting .reportRoot{
  display:block !important;
}

@page{
  size:A4 portrait;
  margin:6mm;
}

@media print{
  html,body{
    background:#fff !important;
    -webkit-print-color-adjust:exact;
    print-color-adjust:exact;
  }

  body > .wrap,
  body > #loader,
  body > .modal{
    display:none !important;
  }

  body .reportRoot{
    display:block !important;
  }

  .reportRoot{
    display:block !important;
  }

  .reportCover{
    min-height:auto;
    padding:24mm 14mm 18mm !important;
    page-break-after:always;
  }

  .reportSection{
    padding:8mm 4mm 3mm !important;
  }

  .reportSection .card,
  .reportSection .rewardCard,
  .reportSection .wideCard{
    box-shadow:none !important;
  }

  .reportSection .spTable thead th,
  
  .reportSection .rewardTable thead th{
    position:static !important;
    background:#f7f7f7 !important;
  }

  .reportSection .rewardCard,
  .reportSection .wideCard,
  .reportSection .card{
    break-inside:avoid;
    page-break-inside:avoid;
  }
}

@media (max-width:820px){
  .reportMetaGrid{
    grid-template-columns:1fr;
  }

  .reportSection .grid{
    grid-template-columns:1fr !important;
  }

  .reportSection .pieRow,
  .reportSection .splitGrid{
    grid-template-columns:1fr !important;
  }

  .reportSection .ytdNums{
    grid-template-columns:1fr;
  }
}

.coefHighlight{
  font-weight:800;
  color:#0f766e;
}

/* =========================
   REPORT – KPI pie charts FINAL
========================= */

.reportSection[data-report-page="kpi"] .pieRow{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:10px !important;
  align-items:start !important;
}

.reportSection[data-report-page="kpi"] .pieRow > div{
  border:1px solid rgba(0,0,0,.08);
  border-radius:14px;
  padding:10px 12px;
  background:#fff;
  min-height:170px;
}

.reportSection[data-report-page="kpi"] .pieRow > div > .kk{
  display:block;
  margin-bottom:8px;
}

.reportSection[data-report-page="kpi"] .pie > div{
  display:grid !important;
  grid-template-columns:140px 1fr !important;
  gap:12px !important;
  align-items:start !important;
}

.reportSection[data-report-page="kpi"] .pie > div > svg{
  width:140px !important;
  height:140px !important;
  display:block;
  margin:0 auto;
}

.reportSection[data-report-page="kpi"] .pie > div > .legend{
  margin-top:0 !important;
  display:grid !important;
  gap:6px !important;
  font-size:10px !important;
  line-height:1.2 !important;
  align-content:start !important;
}

.reportSection[data-report-page="kpi"] .pie > div > .legend .item{
  display:grid !important;
  grid-template-columns:10px 1fr auto !important;
  gap:6px !important;
  align-items:start !important;
}

.reportSection[data-report-page="kpi"] .pie > div > .legend .sw{
  width:9px !important;
  height:9px !important;
  border-radius:2px !important;
  margin-top:2px !important;
}

.reportSection[data-report-page="kpi"] .pie > div > .legend .item{
  white-space:normal !important;
}

.reportSection[data-report-page="kpi"] .pie > div > .legend .item b{
  font-size:10px !important;
  font-weight:800 !important;
  white-space:nowrap !important;
}

.reportSection[data-report-page="kpi"] .pie > div > .legend .item span,
.reportSection[data-report-page="kpi"] .pie > div > .legend .item div{
  word-break:keep-all !important;
  overflow-wrap:break-word !important;
}

.reportSection[data-report-page="kpi"] .wide:has(.pieRow){
  gap:8px !important;
  margin-top:8px !important;
}

.reportSection[data-report-page="kpi"] .wide:has(.pieRow) .wideCard{
  padding:10px !important;
}

.reportSection[data-report-page="kpi"] .wide:has(.pieRow) .wideHead{
  margin-bottom:4px !important;
}

.reportSection[data-report-page="kpi"] .wide:has(.pieRow) .wideHead h2{
  font-size:13px !important;
  margin-top:4px !important;
}

@media (max-width:820px){
  .reportSection[data-report-page="kpi"] .pieRow{
    grid-template-columns:1fr !important;
  }

  .reportSection[data-report-page="kpi"] .pie > div{
    grid-template-columns:120px 1fr !important;
  }

  .reportSection[data-report-page="kpi"] .pie > div > svg{
    width:120px !important;
    height:120px !important;
  }
}

/* Sales dashboard */
.salesAlert{
  margin-top:12px;
  padding:14px 16px;
  border-radius:18px;
  border:2px solid rgba(185, 28, 28, .26);
  background: rgba(220, 38, 38, .08);
}
.salesAlertTitle{
  font-size:15px;
  font-weight:950;
  color: rgb(153, 27, 27);
}
.salesAlertText{
  margin-top:6px;
  font-size:13px;
  line-height:1.45;
  font-weight:800;
  color: rgb(127, 29, 29);
}