/* PBI 5909 — ATS "Statistika oglasa" dashboard. Global stylesheet (linked in _Host.cshtml).
   Prefix os-* to avoid collisions. Self-contained (brand colors inline). */

.os-page { padding: 18px 22px 60px; background: #f5f7fa; min-height: 100%; font-family: 'Plus Jakarta Sans', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif; }

/* Header */
.os-head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 12px; }
.os-crumb { font-size: 12px; color: #7a8395; margin-bottom: 4px; }
.os-crumb span { color: #1a1f2e; font-weight: 600; }
.os-title { font-size: 24px; font-weight: 700; color: #1a1f2e; margin: 0; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.os-loadchip { font-size: 12px; font-weight: 500; font-style: italic; color: #999; }

/* Filter card */
.os-filters { background: #fff; border: 1px solid #e6e9ef; border-radius: 10px; padding: 12px 14px; margin-bottom: 14px; box-shadow: 0 1px 2px rgba(20,28,50,.06); }
.os-filters-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.os-daterange { display: flex; align-items: center; gap: 6px; border: 1px solid #b9bfca; border-radius: 6px; padding: 0 10px; height: 38px; background: #fff; }
.os-daterange i { color: #7a8395; }
.os-daterange input { border: 0; outline: 0; height: 36px; font-size: 13px; color: #1a1f2e; }
.os-adselect { min-width: 300px; flex: 1; max-width: 460px; }
.os-btn { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border-radius: 6px; font-weight: 700; font-size: 13px; border: 1px solid transparent; cursor: pointer; }
.os-btn-primary { background: #0494da; color: #fff; }
.os-btn-primary:hover { background: #066894; }
.os-btn-ghost { background: #fff; color: #1a1f2e; border-color: #b9bfca; }
.os-btn-ghost:hover { background: #f8f9fa; }

.os-presets { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 10px; padding-top: 10px; border-top: 1px dashed #e6e9ef; }
.os-presets-lbl { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #7a8395; margin-right: 2px; }
.os-preset { background: transparent; border: 1px solid #e6e9ef; height: 26px; padding: 0 11px; border-radius: 999px; font-size: 12px; font-weight: 600; color: #4a5468; cursor: pointer; }
.os-preset:hover { background: #f8f9fa; }
.os-preset.is-on { background: #e6f4fb; color: #066894; border-color: #b9d9ec; }

/* KPI grid */
.os-kpis { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-bottom: 14px; }
@media (max-width: 1280px) { .os-kpis { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px) { .os-kpis { grid-template-columns: repeat(2, 1fr); } }
.os-kpi { background: #fff; border: 1px solid #e6e9ef; border-radius: 10px; padding: 14px 16px; box-shadow: 0 1px 2px rgba(20,28,50,.06); }
.os-kpi-lbl { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #7a8395; margin-bottom: 8px; display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.os-kpi-val { font-size: 28px; font-weight: 700; color: #1a1f2e; font-variant-numeric: tabular-nums; line-height: 1.05; }
.os-kpi-unit { font-size: 14px; font-weight: 600; color: #7a8395; margin-left: 4px; }
.os-kpi-sub { font-size: 12px; color: #7a8395; margin-top: 8px; }
.os-kpi-icon { width: 26px; height: 26px; border-radius: 7px; background: #e6f4fb; color: #066894; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; flex: none; }
.os-kpi-icon.is-success { background: #e6f7ec; color: #26b050; }
.os-kpi-icon.is-orange { background: #fef1e0; color: #e0851a; }
.os-info { width: 18px; height: 18px; border-radius: 999px; border: 1px solid #d6d5d5; background: #fff; color: #7a8395; font-size: 9px; cursor: help; display: inline-flex; align-items: center; justify-content: center; flex: none; padding: 0; }
.os-info:hover { color: #007bff; border-color: #007bff; }
.os-kpi-featured { background: linear-gradient(135deg, #0494da 0%, #066894 100%); border-color: transparent; }
.os-kpi-featured .os-kpi-lbl, .os-kpi-featured .os-kpi-val { color: #fff; }
.os-kpi-featured .os-kpi-unit { color: rgba(255,255,255,.72); }
.os-kpi-featured .os-kpi-sub { color: rgba(255,255,255,.85); }
.os-kpi-featured .os-kpi-icon { background: rgba(255,255,255,.18); color: #fff; }
.os-kpi-featured .os-info { border-color: rgba(255,255,255,.5); background: transparent; color: #fff; }

/* Donut + custom legend (Prijave po izvoru) */
.os-donutwrap { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.os-donut-chart { position: relative; width: 220px; height: 220px; flex: none; }
.os-donut-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; }
.os-donut-center b { font-size: 24px; font-weight: 800; color: #1a1f2e; font-variant-numeric: tabular-nums; line-height: 1; }
.os-donut-center span { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: #7a8395; margin-top: 3px; }
.os-legend { display: flex; flex-direction: column; gap: 10px; flex: 1; min-width: 220px; }
.os-legend-row { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; color: #1a1f2e; }
.os-legend-sw { width: 12px; height: 12px; border-radius: 3px; flex: none; }
.os-legend-val { margin-left: auto; font-family: 'JetBrains Mono', monospace; font-weight: 700; color: #4a5468; font-variant-numeric: tabular-nums; }
.os-legend-pct { color: #7a8395; font-weight: 600; margin-left: 6px; }

/* Cards + grid */
.os-card { background: #fff; border: 1px solid #e6e9ef; border-radius: 10px; box-shadow: 0 1px 2px rgba(20,28,50,.06); padding: 12px 16px 16px; margin-bottom: 14px; }
.os-card-head { font-size: 14px; font-weight: 700; color: #1a1f2e; display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.os-card-head i { color: #7a8395; font-size: 12px; }
.os-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 1100px) { .os-grid2 { grid-template-columns: 1fr; } }
.os-grid2 .os-card { margin-bottom: 14px; }

/* Funnel */
.os-funnel { display: flex; flex-direction: column; gap: 10px; padding: 6px 2px; }
.os-funnel-step { }
.os-funnel-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; font-size: 12px; color: #1a1f2e; }
.os-funnel-name { font-weight: 600; }
.os-funnel-top b { font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 13px; color: #1a1f2e; font-variant-numeric: tabular-nums; }
.os-funnel-bar { height: 26px; border-radius: 6px; display: flex; align-items: center; padding: 0 10px; color: #fff; font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; min-width: 34px; box-sizing: border-box; }
.os-funnel-conv { font-size: 11px; font-weight: 600; color: #7a8395; margin-top: 3px; display: block; }
.os-funnel-conv b { font-family: 'JetBrains Mono', monospace; font-weight: 700; color: #4a5468; }
.os-fb1 { background: #0494da; }
.os-fb2 { background: #097cb9; }
.os-fb3 { background: #26b050; }

/* Horizontal bars */
.os-hbars { display: flex; flex-direction: column; gap: 9px; padding: 6px 2px; }
.os-hbar { display: grid; grid-template-columns: 150px 1fr 52px; gap: 10px; align-items: center; }
.os-hbar-lbl { font-size: 12px; font-weight: 600; color: #1a1f2e; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.os-hbar-track { height: 16px; background: #f8f9fa; border: 1px solid #e6e9ef; border-radius: 999px; overflow: hidden; }
.os-hbar-fill { height: 100%; background: #0494da; border-radius: 999px; }
.os-fill-success { background: #26b050; }
.os-hbar-val { font-size: 12px; font-weight: 700; font-family: 'JetBrains Mono', monospace; color: #4a5468; text-align: right; font-variant-numeric: tabular-nums; }

/* Table */
.os-tablewrap { overflow-x: auto; }
.os-table { width: 100%; border-collapse: separate; border-spacing: 0; }
.os-table thead th { background: #f8f9fa; border-bottom: 1px solid #d6d5d5; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #7a8395; padding: 10px 12px; text-align: right; white-space: nowrap; }
.os-table thead th:first-child { text-align: left; }
.os-table tbody td { padding: 11px 12px; border-bottom: 1px solid #e6e9ef; text-align: right; font-size: 13px; font-weight: 600; font-family: 'JetBrains Mono', monospace; color: #1a1f2e; font-variant-numeric: tabular-nums; }
.os-table tbody td.os-td-ad { text-align: left; font-family: inherit; }
.os-td-ad b { display: block; font-weight: 700; color: #1a1f2e; }
.os-ad-date { display: block; font-size: 11px; font-weight: 500; color: #7a8395; margin-top: 1px; }
.os-table tbody tr:hover { background: #f8f9fa; }
.os-nd { color: #9aa3b3; font-style: italic; font-family: inherit; font-weight: 500; }

/* Notes + empty states */
.os-note { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding: 10px 12px; background: #f8f9fa; border: 1px dashed #d6d5d5; border-radius: 6px; font-size: 12.5px; color: #4a5468; }
.os-note i { color: #0d8fd9; }
.os-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; height: 200px; color: #9aa3b3; text-align: center; }
.os-empty i { font-size: 22px; opacity: .5; }
.os-empty b { font-size: 13px; color: #4a5468; }
.os-empty span { font-size: 12px; max-width: 320px; }