/* CS Media — ProDash (scoped pod .pd) */

:root{
  --pd-bg:#f2f4f8;
  --pd-text:#1f2937;
  --pd-muted:#6b7280;
  --pd-card:#ffffff;
  --pd-line:#e5e7eb;
  --pd-shadow:0 10px 24px rgba(0,0,0,.06), 0 2px 8px rgba(0,0,0,.04);

  /* KPI gradijenti */
  --pd-green-1:#34d399; --pd-green-2:#10b981;
  --pd-yellow-1:#facc15; --pd-yellow-2:#f59e0b;
  --pd-blue-1:#60a5fa; --pd-blue-2:#3b82f6;
  --pd-rose-1:#fb7185; --pd-rose-2:#ef4444;
}

.pd{ background:var(--pd-bg); color:var(--pd-text); }
.pd .pd-wrap{ display:flex; flex-direction:column; gap:18px; }
.pd .pd-hero{ margin:4px 0 6px; }
.pd .pd-hero h1{ margin:0; font-size:22px; font-weight:800; letter-spacing:.01em; }
.pd .pd-hero .sub{ color:var(--pd-muted); margin-top:6px; }

/* KPI pločice */
.pd .pd-kpis{
  display:grid; grid-template-columns: repeat(4,minmax(0,1fr));
  gap:14px;
}
@media (max-width:1200px){ .pd .pd-kpis{ grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width:640px){ .pd .pd-kpis{ grid-template-columns: 1fr; } }

.pd .kpi{
  position:relative; overflow:hidden;
  border-radius:12px; color:#fff;
  min-height:96px;
  display:flex; align-items:center; gap:14px;
  padding:16px 18px;
  box-shadow: var(--pd-shadow);
}
.pd .kpi .ico{
  width:54px; height:54px; border-radius:12px;
  display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.18);
  font-size:22px; color:#fff;
}
.pd .kpi .meta{ display:flex; flex-direction:column; gap:6px; }
.pd .kpi .k{ font-size:13px; opacity:.95; }
.pd .kpi .v{ font-size:28px; line-height:1; font-weight:900; }

/* KPI boje (gradijenti) */
.pd .kpi.green { background:linear-gradient(135deg,var(--pd-green-1),var(--pd-green-2)); }
.pd .kpi.yellow{ background:linear-gradient(135deg,var(--pd-yellow-1),var(--pd-yellow-2)); }
.pd .kpi.blue  { background:linear-gradient(135deg,var(--pd-blue-1),var(--pd-blue-2)); }
.pd .kpi.rose  { background:linear-gradient(135deg,var(--pd-rose-1),var(--pd-rose-2)); }

/* Grid dvije kolone */
.pd .pd-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:16px; }
@media (max-width:1100px){ .pd .pd-grid{ grid-template-columns: 1fr; } }

/* Kartice */
.pd .card{
  background:var(--pd-card); border:1px solid var(--pd-line); border-radius:12px; box-shadow: var(--pd-shadow);
}
.pd .card + .card{ margin-top:16px; }
.pd .card-head{
  padding:14px 16px; border-bottom:1px solid var(--pd-line);
  display:flex; align-items:center; justify-content:space-between;
}
.pd .card-head h3{ margin:0; font-size:16px; font-weight:800; }
.pd .card-body{ padding:12px 16px 16px; }

/* Top kategorije – “list tiles” */
.pd .topcats{ display:grid; grid-template-columns: 1fr 1fr; gap:10px; }
@media (max-width:620px){ .pd .topcats{ grid-template-columns:1fr; } }
.pd .topcat{
  display:flex; align-items:center; gap:10px; padding:10px 12px;
  border:1px solid var(--pd-line); border-radius:10px; background:#fff;
}
.pd .topcat .ico{ --c:#d1d5db; width:30px; height:30px; border-radius:8px; background:var(--c); color:#111; display:flex; align-items:center; justify-content:center; }
.pd .topcat .name{ font-weight:700; }
.pd .topcat .sub{ font-size:12px; color:var(--pd-muted); }

/* Bar graf */
.pd .bars{ display:flex; flex-direction:column; gap:10px; }
.pd .bar{ display:grid; grid-template-columns: 1fr 3fr 48px; gap:10px; align-items:center; }
.pd .lbl{ display:flex; align-items:center; gap:8px; min-width:0; }
.pd .dot{ --c:#94a3b8; width:10px; height:10px; border-radius:50%; background:var(--c); }
.pd .name{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:#334155; font-weight:700; }
.pd .rail{ height:12px; border:1px solid var(--pd-line); background:#f3f4f6; border-radius:999px; overflow:hidden; }
.pd .fill{ --w:0%; --c:#3b82f6; width:var(--w); height:100%; background:var(--c); }
.pd .val{ text-align:right; font-weight:800; }

/* Tablice */
.pd table{ width:100%; border-collapse:separate; border-spacing:0; }
.pd thead th{ background:#f8fafc; color:#6b7280; font-size:12px; text-transform:uppercase; letter-spacing:.03em; padding:12px; border-bottom:1px solid var(--pd-line); }
.pd tbody td{ padding:12px; border-bottom:1px solid var(--pd-line); vertical-align:middle; }
.pd tbody tr:hover td{ background:#fbfbff; }
.pd .td-actions{ text-align:right; }

/* Helpers */
.pd .muted{ color:var(--pd-muted); }