:root {
    /* Tamna Tema */
    --primary-bg: #121212;
    --sidebar-bg: #1e1e1e;
    --text-main: #ffffff;
    --text-muted: #a0a0a0;
    --accent-primary: #2267ac;
    --accent-secondary: #fdc40e;
    --border-color: #333333;
    --item-hover: rgba(41, 35, 92, 0.5);
    --modal-bg: #252525;
}

body.light-theme {
    /* Svijetla Tema */
    --primary-bg: #f5f5f5;
    --sidebar-bg: #ffffff;
    --text-main: #121212;
    --text-muted: #666666;
    --border-color: #e0e0e0;
    --item-hover: rgba(253, 196, 14, 0.2);
    --modal-bg: #ffffff;
}

/* Forsira svijetlu temu na PODSTABLU bez obzira na trenutnu temu aplikacije (tijelo/dark-theme
   itd.) — koristi se SAMO za demografski PDF slajd (Pre-campaign/RVC izvještaj), koji mora
   uvijek biti bijel kad se preuzima, dok isti sadržaj UŽIVO (u aplikaciji) i dalje prati temu
   (korisnikov eksplicitan zahtjev). Isti cd-card/pc-* stil samo čita ove iste varijable, pa
   ovaj omotač ne zahtijeva duplirane klase/markup. */
.force-light-theme {
    --primary-bg: #f5f5f5;
    --sidebar-bg: #ffffff;
    --text-main: #121212;
    --text-muted: #666666;
    --border-color: #e0e0e0;
    --item-hover: rgba(253, 196, 14, 0.2);
    background: #ffffff;
    color: #121212;
}

* {
    box-sizing: border-box; margin: 0; padding: 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

body { background-color: var(--primary-bg); color: var(--text-main); height: 100vh; overflow: hidden; transition: 0.3s; }

.app-container { display: flex; height: 100vh; }

/* Sidebar */
.sidebar {
    width: 380px; background-color: var(--sidebar-bg);
    display: flex; flex-direction: column;
    border-right: 1px solid var(--border-color);
    box-shadow: 2px 0 20px rgba(0,0,0,0.15);
    z-index: 1000;
}

.sidebar-header { padding: 25px 20px; border-bottom: 1px solid var(--border-color); }
.sidebar-header h2 { font-weight: 800; letter-spacing: 1px; }

.search-container { padding: 20px; position: relative; }
.search-container i { position: absolute; left: 35px; top: 50%; transform: translateY(-50%); color: var(--text-muted); }
.search-container input {
    width: 100%; padding: 14px 15px 14px 45px;
    border-radius: 25px; border: 1px solid var(--border-color);
    background-color: var(--primary-bg); color: var(--text-main); outline: none; transition: 0.3s;
}
.search-container input:focus { border-color: var(--accent-secondary); box-shadow: 0 0 8px rgba(253, 196, 14, 0.3); }

.list-container { flex-grow: 1; overflow-y: auto; padding: 0 20px; }
.list-container::-webkit-scrollbar { width: 6px; }
.list-container::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 10px; }

ul { list-style: none; }
li {
    padding: 15px; margin-bottom: 10px; background-color: var(--primary-bg);
    border-radius: 12px; cursor: pointer; transition: all 0.2s;
    border: 1px solid transparent; display: flex; align-items: center; gap: 12px; font-weight: 500;
}
li:hover { background-color: var(--item-hover); transform: translateX(5px); }
li.active { border-left: 5px solid var(--accent-secondary); background-color: var(--accent-primary); color: white; }
li.city-locked { opacity: 0.45; cursor: not-allowed; }
li.city-locked:hover { background-color: var(--primary-bg); transform: none; }
.city-lock-icon { margin-left: auto; color: var(--text-muted); font-size: 0.9rem; }

.info-box {
    background: rgba(253, 196, 14, 0.1); color: var(--accent-secondary);
    padding: 12px; border-radius: 10px; font-size: 0.85rem; margin-bottom: 20px; display: flex; gap: 10px; align-items: center;
}

h3, h4 { margin: 20px 0 12px 0; color: var(--text-muted); text-transform: uppercase; font-size: 0.85rem; letter-spacing: 1px; }
#selected-city-title { font-size: 1.5rem; color: var(--text-main); text-transform: none; letter-spacing: 0; margin-top: 0; }

.sidebar-footer { padding: 8px 14px; border-top: 1px solid var(--border-color); display: flex; align-items: center; justify-content: space-between; }
.footer-left { display: flex; align-items: center; gap: 2px; }
.footer-right { display: flex; align-items: center; gap: 2px; }

/* Sidebar collapse button */
.sidebar { position: relative; transition: width 0.3s ease; overflow: visible; }
.sidebar-collapse-btn {
    position: absolute; right: -14px; top: 50%; transform: translateY(-50%);
    width: 28px; height: 56px; border-radius: 14px;
    background: var(--sidebar-bg); border: 1px solid var(--border-color);
    color: var(--text-muted); cursor: pointer; z-index: 1005;
    display: flex; align-items: center; justify-content: center; font-size: 0.75rem;
    box-shadow: 2px 0 8px rgba(0,0,0,0.25); transition: 0.2s;
}
.sidebar-collapse-btn:hover { color: var(--text-main); background: var(--item-hover); }
.sidebar.collapsed { width: 62px; }
.sidebar.collapsed .search-container { display: none; }
.sidebar.collapsed .sidebar-header .app-logo { display: block; max-height: 26px; width: auto; margin: 0 auto; }
.sidebar.collapsed .sidebar-header { justify-content: center; padding: 10px 0; }
.sidebar.collapsed .sidebar-collapse-btn i { transform: rotate(180deg); }
/* List container: keep visible, minimal padding */
.sidebar.collapsed .list-container { padding: 0 4px; }
.sidebar.collapsed .route-search-wrap,
.sidebar.collapsed .city-title-row,
.sidebar.collapsed .compare-panel,
.sidebar.collapsed #zone-demo-card,
.sidebar.collapsed #rvc-card,
.sidebar.collapsed #back-to-cities,
.sidebar.collapsed .route-section-toolbar,
.sidebar.collapsed #route-landmark-section > h4,
.sidebar.collapsed #back-to-countries,
.sidebar.collapsed #city-section .city-title-row,
.sidebar.collapsed #city-section .route-search-wrap { display: none !important; }
/* City/country list: icon only, centered */
.sidebar.collapsed .city-name { display: none; }
.sidebar.collapsed #city-list li,
.sidebar.collapsed #country-list li { padding: 8px 4px; justify-content: center; gap: 0; overflow: hidden; }
/* Route list: colored route icon only, hide text */
.sidebar.collapsed #route-list li { padding: 8px 4px; justify-content: center; gap: 0; overflow: hidden; }
.sidebar.collapsed #route-list li span { display: none; }
.sidebar.collapsed #route-list li .compare-chk { display: none; }
/* Footer: 2-column icon grid — drži dugmiće unutar uskog (62px) sidebara */
.sidebar.collapsed .sidebar-footer { padding: 8px 6px; display: grid !important; grid-template-columns: 1fr 1fr; gap: 4px; box-sizing: border-box; }
.sidebar.collapsed .footer-left,
.sidebar.collapsed .footer-right { display: contents !important; }
.sidebar.collapsed .icon-btn {
    width: 100%; height: 36px; padding: 0; font-size: 1rem;
    border-radius: 8px; display: flex; align-items: center; justify-content: center;
    box-sizing: border-box; min-width: 0;
}
/* Guest login dugme: u skupljenom modu samo ikona, preko cijele širine */
.sidebar.collapsed .btn-guest-login {
    grid-column: 1 / -1; width: 100%; padding: 8px 0; font-size: 0;
    border-radius: 8px; justify-content: center; box-sizing: border-box;
}
.sidebar.collapsed .btn-guest-login i { font-size: 1rem; }

/* Sidebar header logo */
.sidebar-header { display: flex; align-items: center; }
.sidebar-collapsed-icon { display: none; }

/* Collapsed tools (single icon expanding to 4) */
.collapsed-tools { display: none; padding: 0 4px; margin: 4px 0; }
.sidebar.collapsed .collapsed-tools { display: block; }
.collapsed-tools-trigger {
    width: 100%; padding: 10px; border-radius: 10px;
    background: var(--primary-bg); border: 1px solid var(--border-color);
    color: var(--text-muted); cursor: pointer; font-size: 1.1rem;
    display: flex; align-items: center; justify-content: center;
    transition: 0.2s;
}
.collapsed-tools-trigger:hover { background: var(--item-hover); color: var(--text-main); }
.collapsed-tools-popup {
    display: none; position: fixed; z-index: 2100;
    background: var(--modal-bg); border: 1px solid var(--border-color);
    border-radius: 12px; padding: 8px;
    box-shadow: 6px 4px 24px rgba(0,0,0,0.4);
    flex-direction: column; gap: 5px; min-width: 130px;
    animation: toolsPopIn 0.15s ease;
}
@keyframes toolsPopIn {
    from { opacity: 0; transform: translateX(-8px); }
    to   { opacity: 1; transform: translateX(0); }
}
.mini-tool-btn {
    display: flex; align-items: center; gap: 8px;
    width: 100%; padding: 8px 12px; border-radius: 8px;
    background: transparent; border: 1px solid var(--border-color);
    color: var(--text-muted); cursor: pointer; font-size: 0.8rem;
    font-weight: 600; transition: 0.2s; text-align: left;
}
.mini-tool-btn:hover { background: var(--item-hover); color: var(--text-main); }
.mini-tool-btn.active { background: var(--accent-primary); color: white; border-color: transparent; }

/* Mobile hamburger */
.mobile-menu-btn {
    display: none; position: fixed; top: 14px; left: 14px; z-index: 1100;
    width: 44px; height: 44px; border-radius: 12px;
    background: var(--sidebar-bg); border: 1px solid var(--border-color);
    color: var(--text-main); font-size: 1.1rem; cursor: pointer;
    align-items: center; justify-content: center;
    box-shadow: 0 4px 16px rgba(0,0,0,0.35);
}
.mobile-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.55); z-index: 1090; }
.mobile-backdrop.hidden { display: none; }

/* Heatmap opacity popup */
.heatmap-opacity-wrap { position: relative; }
.heatmap-opacity-popup {
    display: none; flex-direction: column; align-items: center; gap: 8px;
    position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);
    background: var(--modal-bg); border: 1px solid var(--border-color); border-radius: 14px;
    padding: 12px 16px; min-width: 150px; box-shadow: 0 4px 20px rgba(0,0,0,0.4);
    z-index: 2000; margin-bottom: 0;
}
/* popup visibility controlled by JS with hover delay */
.opacity-popup-label { font-size: 0.75rem; color: var(--text-muted); font-weight: 600; white-space: nowrap; }
#heatmap-opacity-slider { width: 120px; accent-color: var(--accent-secondary); cursor: pointer; }
#heatmap-opacity-val { font-size: 0.85rem; color: var(--accent-secondary); font-weight: 800; }

/* Age distribution chart */
.age-chart { margin: 6px 0 4px; }
.age-bar-wrap { display: flex; height: 8px; border-radius: 4px; overflow: hidden; }
.age-seg { height: 100%; }
.age-seg.seg-young  { background: #26de81; }
.age-seg.seg-adult  { background: #45b7d1; }
.age-seg.seg-middle { background: #f7b731; }
.age-seg.seg-senior { background: #e17055; }
.age-legend { display: flex; flex-wrap: wrap; gap: 3px 10px; margin-top: 5px; }
.age-lbl { font-size: 0.71rem; display: inline-flex; align-items: center; gap: 4px; color: var(--text-muted); }
.age-lbl::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; }
.age-lbl.young::before  { background: #4ecdc4; }
.age-lbl.adult::before  { background: #45b7d1; }
.age-lbl.middle::before { background: #f7b731; }
.age-lbl.senior::before { background: #e17055; }
.age-lbl b { color: var(--text-main); }

/* Buttons */
.icon-btn { background: transparent; border: none; color: var(--text-main); font-size: 1.2rem; cursor: pointer; padding: 10px; border-radius: 50%; transition: 0.2s; }
.icon-btn:hover { background-color: var(--item-hover); color: var(--accent-secondary); }
.icon-btn.active { background: var(--accent-primary); color: #fff; }
.btn-guest-login { background: var(--accent-primary); color: #fff; border: none; border-radius: 20px; padding: 6px 14px; font-size: 0.8rem; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 6px; transition: 0.2s; white-space: nowrap; }
.btn-guest-login:hover { background: #1a56a0; }

/* Guest mode banner */
#guest-mode-banner { display: none; background: rgba(34,103,172,0.12); border-left: 3px solid var(--accent-primary); padding: 7px 16px; font-size: 0.78rem; color: var(--text-muted); letter-spacing: 0.02em; }
body.guest-mode #guest-mode-banner { display: block; }

/* Guest mode — lock interactive sidebar sections */
body.guest-mode .search-container,
body.guest-mode #city-list,
body.guest-mode #back-to-cities,
body.guest-mode #route-landmark-section { pointer-events: none; opacity: 0.45; user-select: none; filter: grayscale(30%); }

/* Lock the floating map tool buttons */
body.guest-mode .collapsed-tools-trigger,
body.guest-mode .collapsed-tools-popup { pointer-events: none; opacity: 0.35; }

/* Keep footer-left active (theme, fullscreen, print, pdf, login) */
body.guest-mode .sidebar-footer .footer-left { pointer-events: auto; opacity: 1; filter: none; }

.btn-primary, .btn-secondary { width: 100%; padding: 14px; border-radius: 15px; border: none; cursor: pointer; font-weight: bold; font-size: 1rem; transition: 0.2s; }
.btn-primary { background-color: var(--accent-secondary); color: #000; box-shadow: 0 4px 15px rgba(253, 196, 14, 0.3); margin-top: 10px;}
.btn-secondary { background-color: var(--accent-primary); color: #fff; margin-bottom: 20px; }
.btn-primary:hover, .btn-secondary:hover { transform: translateY(-2px); opacity: 0.9; }

/* Mapa */
.map-container { flex-grow: 1; position: relative; }
#map { height: 100%; width: 100%; z-index: 1; }

/* Leaflet Bubbles */
.leaflet-tooltip-own {
    background: var(--accent-primary); color: white; border: 1px solid var(--accent-secondary);
    border-radius: 8px; padding: 4px 10px; font-weight: bold; font-size: 12px; box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}
.custom-div-icon {
    background: var(--accent-primary); color: var(--accent-secondary); border: 2px solid var(--accent-secondary);
    border-radius: 50%; display: flex; justify-content: center; align-items: center; font-size: 14px; box-shadow: 0 0 10px rgba(0,0,0,0.5);
}
/* Static (LED) marker */
.static-div-icon {
    background: #0e2a3a; color: #1abc9c; border: 2px solid #1abc9c;
    border-radius: 8px; box-shadow: 0 0 10px rgba(0,0,0,0.55);
}
.static-div-icon.active { color: #fff; background: #16a085; border-color: #fff; transform: scale(1.12); }

/* Kategorije Transit / Static u listi ruta */
.cat-group { display: block; list-style: none; margin: 0 0 8px; }
.cat-header { width: 100%; display: flex; align-items: center; gap: 9px; background: var(--sidebar-bg); border: 1px solid var(--border-color); border-radius: 10px; padding: 11px 14px; cursor: pointer; font-size: 0.9rem; font-weight: 800; color: var(--text-main); text-align: left; transition: 0.2s; }
.cat-header:hover { border-color: var(--accent-primary); }
.cat-header.open { border-color: var(--accent-primary); }
.cat-header small { margin-left: auto; color: var(--text-muted); font-weight: 500; font-size: 0.78rem; background: var(--primary-bg); border-radius: 10px; padding: 1px 8px; }
.cat-chevron { transition: transform 0.2s; font-size: 0.8rem; opacity: 0.7; }
.cat-header.open .cat-chevron { transform: rotate(90deg); }
.cat-list { list-style: none; margin: 6px 0 0; padding: 0 0 0 4px; }
.cat-list.hidden { display: none; }
.static-rvc-flag { margin-left: auto; opacity: 0.5; font-size: 0.75rem; }

.static-traffic i { color: #f7b731; }
.est-note { opacity: 0.6; font-size: 0.78em; display: block; margin-top: 2px; }
/* Static radius polje u settingsu */
.static-radius-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.static-radius-row input { width: 100px; }

/* Sidebar Settings Panel */
.sidebar-settings-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 0 14px; border-bottom: 1px solid var(--border-color); margin-bottom: 14px;
}
.sidebar-settings-header span {
    font-weight: 700; font-size: 0.85rem; color: var(--text-muted);
    text-transform: uppercase; letter-spacing: 1px;
}
/* Broj verzije/build-a — na dnu Settings-a, da se vidi da li je najnoviji deploy stigao */
.app-version { text-align: center; padding: 18px 0 4px; font-size: 0.72rem; color: var(--text-muted); opacity: 0.6; }
#sidebar-settings select,
#sidebar-settings input[type="text"],
#sidebar-settings input[type="email"] {
    width: 100%; padding: 12px; border-radius: 12px; border: 1px solid var(--border-color);
    background: var(--primary-bg); color: var(--text-main); margin-bottom: 15px; outline: none; transition: 0.3s;
}
#sidebar-settings input[type="text"]:focus,
#sidebar-settings input[type="email"]:focus { border-color: var(--accent-secondary); }

/* Nalog red (Upravljanje nalozima) — jedan red: email se skraćuje (...) da napravi mjesta
   za mali dropdown uloge i malo dugme, umjesto da se sve nabije/preklopi. */
.user-row { display: flex; align-items: center; gap: 8px; background: var(--primary-bg); padding: 10px 12px; border-radius: 12px; border: 1px solid var(--border-color); margin-bottom: 8px; flex-wrap: nowrap; }
.user-row-email { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; font-size: 0.85rem; }
.user-row-email i { opacity: 0.55; margin-right: 6px; }
#sidebar-settings .user-row select { flex: 0 0 auto; width: auto; padding: 6px 8px; font-size: 0.75rem; margin-bottom: 0; border-radius: 8px; }

/* Log aktivnosti — modal (osm-imp-overlay/box), kompaktan red (vrijeme/ko/šta/cilj), klik otvara detalje (JSON) ako postoje */
#activity-search-wrap { padding: 14px 22px 0; }
#activity-search { width: 100%; padding: 11px 12px; border-radius: 12px; border: 1px solid var(--border-color); background: var(--primary-bg); color: var(--text-main); outline: none; font-size: 0.9rem; }
#activity-search:focus { border-color: var(--accent-secondary); }
.activity-list { padding: 12px 22px 20px !important; }
.activity-row { display: block !important; background: var(--primary-bg); border-radius: 12px; border: 1px solid var(--border-color); margin-bottom: 8px; padding: 10px 12px; cursor: default; }
.activity-row.activity-expandable { cursor: pointer; }
.activity-row-main { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; font-size: 0.8rem; }
.activity-time { color: var(--text-muted); font-variant-numeric: tabular-nums; flex-shrink: 0; }
.activity-actor { font-weight: 600; }
.activity-action { color: var(--accent-secondary); }
.activity-target { color: var(--text-muted); margin-left: auto; text-align: right; }
.activity-details { display: none; margin: 10px 0 0; padding: 10px; background: var(--sidebar-bg); border-radius: 8px; font-size: 0.72rem; white-space: pre-wrap; word-break: break-word; max-height: 220px; overflow-y: auto; }
.activity-row.open .activity-details { display: block; }

/* Prozorčić sa generisanom lozinkom (Upravljanje nalozima) */
.creds-row { display: flex; justify-content: space-between; gap: 10px; padding: 10px 12px; background: var(--primary-bg); border-radius: 10px; margin-top: 8px; font-size: 0.95rem; }
.creds-row span { color: var(--text-muted); }
.creds-row b { color: var(--text-main); word-break: break-all; text-align: right; }
.user-row .btn-small { flex-shrink: 0; padding: 6px 9px; font-size: 0.72rem; white-space: nowrap; }

.tabs { display: flex; margin-bottom: 20px; background: var(--primary-bg); border-radius: 12px; padding: 5px; }
.tab-btn { flex: 1; background: transparent; border: none; color: var(--text-muted); padding: 12px; cursor: pointer; border-radius: 10px; font-weight: bold; transition: 0.3s; }
.tab-btn.active { background: var(--accent-primary); color: white; }

.divider { border: 0; height: 1px; background: var(--border-color); margin: 25px 0; }

/* Edit liste u modal-u */
.edit-list li { display: flex; justify-content: space-between; align-items: center; background: var(--primary-bg); padding: 12px 15px; border-radius: 12px; border: 1px solid var(--border-color); margin-bottom: 8px; cursor: default; }
.edit-list li:hover { transform: none; }
.action-btns { display: flex; gap: 8px; }
.btn-small { padding: 8px 12px; border-radius: 8px; border: none; cursor: pointer; font-size: 0.8rem; font-weight: bold; transition: 0.2s; color: white; }
.btn-edit { background: var(--accent-primary); }
.btn-edit:hover { background: var(--accent-secondary); color: black; }
.btn-delete { background: #e74c3c; }
.btn-delete:hover { background: #c0392b; }
.btn-copy { background: #27ae60; }
.btn-copy:hover { background: #1e8449; }

/* City group accordion in settings */
.city-group-item { list-style: none; margin-bottom: 6px; display: block !important; padding: 0 !important; background: transparent !important; border: none !important; }
.city-group-header { width: 100%; display: flex; align-items: center; gap: 8px; background: var(--sidebar-bg); border: 1px solid var(--border-color); border-radius: 10px; padding: 9px 14px; cursor: pointer; font-size: 0.83rem; font-weight: 700; color: var(--text-main); text-align: left; transition: 0.2s; }
.city-group-header:hover { border-color: var(--accent-primary); }
.city-group-header small { margin-left: auto; color: var(--text-muted); font-weight: 400; font-size: 0.78rem; background: var(--primary-bg); border-radius: 10px; padding: 1px 7px; }
.city-group-chevron { transition: transform 0.2s; font-size: 0.65rem; color: var(--text-muted); flex-shrink: 0; }
.city-group-list { padding: 4px 0 0 0; margin: 0; }
.city-group-list li { margin-bottom: 6px; border-radius: 8px; }
/* Country-level grupa (država → grad → stavke) — istaknut header */
.country-group-header { background: var(--primary-bg); }
.country-group-header > span i.fa-flag { margin-right: 6px; opacity: 0.6; }
.country-group-item > .city-group-list { padding-left: 8px; border-left: 2px solid var(--border-color); margin-left: 4px; }

/* Geo sekcija — upravljanje državama/gradovima (iznad tabova Rute/Landmarks) */
.geo-tabs-divider { margin: 22px 0; }
/* Široko toggle dugme "Dodaj državu ili grad" */
.btn-geo-toggle {
    width: 100%; padding: 14px; border-radius: 12px; cursor: pointer;
    background: var(--accent-primary); color: #fff; border: none; font-weight: 700; font-size: 0.95rem;
    display: flex; align-items: center; justify-content: center; gap: 10px; transition: 0.2s; margin-bottom: 14px;
}
.btn-geo-toggle:hover { background: var(--accent-secondary); color: #000; }
.geo-toggle-chevron { transition: transform 0.25s; font-size: 0.8rem; margin-left: auto; }
#geo-section { margin-bottom: 6px; }
/* Drag & drop redoslijed država/gradova */
.geo-grip { color: var(--text-muted); opacity: 0.5; margin-right: 8px; cursor: grab; font-size: 0.8rem; }
.geo-row-head[draggable] { cursor: grab; }
.geo-city-row[draggable] { cursor: grab; }
.geo-dragging { opacity: 0.45; }
.geo-city-row.geo-dragging { outline: 2px dashed var(--accent-secondary); }
/* Red države u listi: ime (klik = dropdown) + Edit/Brisanje */
.geo-row-head { display: flex; align-items: center; gap: 8px; }
.geo-row-head .city-group-header { flex: 1; min-width: 0; }
.geo-row-head .action-btns { flex-shrink: 0; }
/* Inline forma za uređivanje */
.geo-edit-form { background: var(--sidebar-bg); border: 1px solid var(--accent-secondary); border-radius: 12px; padding: 14px; margin-bottom: 16px; }
.geo-edit-form h4 { margin-top: 0; color: var(--accent-secondary); }
.geo-edit-form input[type="text"] { width: 100%; padding: 12px; border-radius: 10px; border: 1px solid var(--border-color); background: var(--primary-bg); color: var(--text-main); margin-bottom: 10px; outline: none; }
.geo-edit-actions { display: flex; gap: 8px; }
.geo-edit-actions .btn-primary { flex: 1; margin-top: 0; }
.geo-edit-actions .btn-danger-small { flex: 1; }
/* Dodavanje države: pin + zoom preseti */
.btn-pin {
    width: 100%; padding: 12px; border-radius: 12px; border: none; cursor: pointer;
    background: var(--accent-primary); color: #fff; font-weight: 700; font-size: 0.9rem;
    display: flex; align-items: center; justify-content: center; gap: 8px; transition: 0.2s; margin-bottom: 10px;
}
.btn-pin:hover { background: var(--accent-secondary); color: #000; }
.pin-status { display: block; font-size: 0.8rem; color: var(--text-muted); margin-bottom: 14px; }
.pin-status.set { color: var(--accent-secondary); font-weight: 600; }
.zoom-preset-label { font-size: 0.78rem; color: var(--text-muted); margin-bottom: 8px; }
.zoom-presets { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.zoom-preset {
    flex: 1; min-width: 60px; padding: 9px 6px; border-radius: 10px; cursor: pointer;
    background: var(--primary-bg); border: 1px solid var(--border-color); color: var(--text-main);
    font-size: 0.8rem; font-weight: 600; transition: 0.2s;
}
.zoom-preset:hover { border-color: var(--accent-primary); }
.zoom-preset.selected { background: var(--accent-primary); color: #fff; border-color: var(--accent-secondary); }

/* Geo tab — upravljanje državama/gradovima */
.geo-coord-row { display: flex; gap: 8px; align-items: center; margin-bottom: 15px; }
.geo-coord-row input[type="number"] { margin-bottom: 0 !important; flex: 1; min-width: 0; }
#sidebar-settings input[type="number"] {
    width: 100%; padding: 12px; border-radius: 12px; border: 1px solid var(--border-color);
    background: var(--primary-bg); color: var(--text-main); margin-bottom: 15px; outline: none; transition: 0.3s;
}
#sidebar-settings input[type="number"]:focus { border-color: var(--accent-secondary); }
.geo-pick { background: var(--accent-primary); flex-shrink: 0; }
.geo-pick:hover { background: var(--accent-secondary); color: black; }
.geo-add-city { display: block !important; background: var(--sidebar-bg) !important; border: 1px dashed var(--border-color) !important; padding: 12px !important; cursor: default; }
.geo-add-city input { width: 100%; padding: 10px; border-radius: 8px; border: 1px solid var(--border-color); background: var(--primary-bg); color: var(--text-main); margin-bottom: 8px; outline: none; }
.geo-add-city .geo-coord-row { margin-bottom: 8px; }
.geo-add-city .geo-coord-row input { margin-bottom: 0; }
.btn-add-geo { background: var(--accent-secondary); color: #000; width: 100%; padding: 10px; margin-bottom: 10px; }
.btn-add-geo:hover { opacity: 0.9; }
.geo-country-actions { display: flex; gap: 8px; }
.geo-country-actions .btn-small { flex: 1; }
.muted-row { color: var(--text-muted); font-size: 0.82rem; justify-content: center !important; cursor: default; background: transparent !important; border: none !important; }

/* Icon Picker */
.icon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); gap: 6px; max-height: 260px; overflow-y: auto; overflow-x: hidden; background: var(--primary-bg); padding: 10px; border-radius: 12px; margin-bottom: 15px; border: 1px solid var(--border-color); }
.icon-item { padding: 9px 6px; text-align: center; cursor: pointer; border-radius: 8px; border: 1px solid transparent; font-size: 1.1rem; transition: 0.2s; }
.icon-item:hover, .icon-item.selected { background: var(--accent-primary); border-color: var(--accent-secondary); color: var(--accent-secondary); }

/* Floating Edit Toolbar */
.floating-toolbar { position: absolute; top: 20px; left: 50%; transform: translateX(-50%); background: var(--modal-bg); padding: 15px 25px; border-radius: 30px; box-shadow: 0 10px 30px rgba(0,0,0,0.5); z-index: 1500; border: 2px solid var(--accent-secondary); max-width: calc(100vw - 20px); }
.toolbar-content { display: flex; flex-direction: column; gap: 12px; color: var(--text-main); font-weight: bold; min-width: min(420px, calc(100vw - 70px)); }
.toolbar-row { display: flex; align-items: center; gap: 20px; }
.edit-toolbar-input { width: 100%; padding: 10px 15px; border-radius: 10px; border: 1px solid var(--border-color); background: var(--primary-bg); color: var(--text-main); outline: none; font-size: 0.95rem; transition: 0.3s; }
.edit-toolbar-input:focus { border-color: var(--accent-secondary); }
.toolbar-actions { display: flex; gap: 10px; }
.btn-primary-small { background: var(--accent-secondary); color: black; border: none; padding: 10px 20px; border-radius: 20px; cursor: pointer; font-weight: bold; }
.btn-danger-small { background: #e74c3c; color: white; border: none; padding: 10px 20px; border-radius: 20px; cursor: pointer; font-weight: bold; }

.hidden { display: none !important; }
/* Garantovana rotacija spinnera (na nekim desktop browserima FA animacija ne radi) */
@keyframes bm-spin { from { transform: rotate(0); } to { transform: rotate(360deg); } }
.fa-spin, .fa-circle-notch.fa-spin { animation: bm-spin 0.85s linear infinite !important; transform-origin: center; }

/* Login overlay */
.login-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: var(--primary-bg);
    display: flex; justify-content: center; align-items: center;
    z-index: 9999;
}
.login-box {
    background: var(--sidebar-bg); padding: 50px 40px; border-radius: 25px;
    width: 400px; text-align: center;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5); border: 1px solid var(--border-color);
}
.login-logo { max-height: 70px; margin: 0 auto 30px; display: block; }
.login-subtitle { color: var(--text-muted); margin-bottom: 25px; font-size: 0.95rem; }
.login-input-wrap { position: relative; margin-bottom: 12px; }
.login-input-wrap i { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); color: var(--text-muted); }
.login-input-wrap input {
    width: 100%; padding: 15px 15px 15px 45px; border-radius: 15px;
    border: 1px solid var(--border-color); background: var(--primary-bg);
    color: var(--text-main); font-size: 1rem; outline: none; transition: 0.3s;
}
.login-input-wrap input:focus { border-color: var(--accent-secondary); box-shadow: 0 0 8px rgba(253,196,14,0.3); }
.login-error { color: #e74c3c; font-size: 0.85rem; margin-bottom: 12px; }
.login-hint { color: var(--text-muted); font-size: 0.78rem; text-align: left; margin: -4px 0 14px; }

/* Boje ruta */
.color-picker-row { margin-bottom: 5px; }
.color-picker-label { font-size: 0.85rem; color: var(--text-muted); margin-bottom: 10px; display: block; }
.color-swatches { display: grid; grid-template-columns: repeat(8, 1fr); gap: 8px; margin-bottom: 15px; }
.color-swatch {
    width: 28px; height: 28px; border-radius: 50%; cursor: pointer;
    border: 3px solid transparent; transition: all 0.2s;
}
.color-swatch:hover:not(.used) { transform: scale(1.2); }
.color-swatch.selected { border-color: white; transform: scale(1.15); box-shadow: 0 0 10px rgba(255,255,255,0.4); }
.color-swatch.used { opacity: 0.25; cursor: not-allowed; }

.app-logo {
    max-width: 100%;
    max-height: 60px;
    display: block;
    margin: 15px;
}

/* Route section toolbar — 2×2 grid */
.route-section-toolbar { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin: 14px 0 12px; }
.route-tool-wrap { position: relative; }
.route-tool-btn {
    padding: 10px 6px; border-radius: 18px; border: 1px solid var(--border-color);
    background: transparent; color: var(--text-muted); cursor: pointer; font-size: 0.79rem;
    font-weight: 600; transition: 0.2s; display: flex; align-items: center; gap: 5px; justify-content: center;
    width: 100%;
}
.route-tool-btn:hover { background: var(--item-hover); color: var(--text-main); }
.route-tool-btn.active { background: var(--accent-primary); color: white; border-color: transparent; }
.route-tool-btn.danger { background: rgba(231,76,60,0.1); color: #e74c3c; border-color: rgba(231,76,60,0.3); grid-column: 1 / -1; }
.metrika-btn { grid-column: auto; }  /* jedna ćelija — Kombinuj stoji desno od Metrike */
.route-tool-btn.danger:hover { background: rgba(231,76,60,0.2); }
/* Detaljno poređenje — puna širina kao Metrika; zaključano (tamno + katanac) dok nije aktivno */
#compare-dash-btn { grid-column: 1 / -1; }
#compare-dash-btn .dash-lock { display: none; }
#compare-dash-btn.locked { background: rgba(0,0,0,0.22); color: var(--text-muted); opacity: 0.6; cursor: not-allowed; border-color: var(--border-color); }
body.light-theme #compare-dash-btn.locked { background: rgba(0,0,0,0.06); }
#compare-dash-btn.locked:hover { background: rgba(0,0,0,0.22); color: var(--text-muted); }
#compare-dash-btn.locked .dash-ico { display: none; }
#compare-dash-btn.locked .dash-lock { display: inline; }

/* Compare panel */
/* Dashboard za poređenje — zauzima prostor liste; footer ostaje vidljiv ispod.
   Širina se kontroliše preko .sidebar.compare-expanded */
.sidebar.compare-expanded { width: clamp(420px, 50vw, 860px); }
/* Strelica ostaje vidljiva i kad je dashboard otvoren (skriva/vraća cijeli sidebar) */
.sidebar { transition: width 0.3s ease, transform 0.3s ease; }
.sidebar.compare-expanded .sidebar-collapse-btn { display: flex !important; }
/* Skrivanje: stisni sidebar na 0 (mapa preuzme prostor), bez transform-a (transform
   bi pomjerio i fiksiranu strelicu jer postaje containing block). Strelica ostaje. */
.sidebar.compare-expanded.dash-hidden { width: 0 !important; min-width: 0 !important; }
.sidebar.compare-expanded.dash-hidden > *:not(.sidebar-collapse-btn) { display: none !important; }
.sidebar.compare-expanded.dash-hidden .sidebar-collapse-btn { display: flex !important; left: 4px; right: auto; }
.sidebar.compare-expanded.dash-hidden .sidebar-collapse-btn i { transform: rotate(180deg); }
.sidebar.compare-expanded .list-container,
.sidebar.compare-expanded .search-container { display: none; }
.compare-dashboard { flex: 1; min-height: 0; background: var(--sidebar-bg); display: flex; flex-direction: column; }
.compare-dash-header { padding: 14px 18px 12px; border-bottom: 1px solid var(--border-color); }
.compare-dash-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
/* Back dugme zadržava normalnu veličinu (ne razvlači se preko cijele širine) */
.compare-dash-header .btn-secondary { width: auto; margin: 0; padding: 10px 16px; }
/* Gost (nije ulogovan) ne smije ništa kliknuti — sakrij Nazad i Share */
body.guest-mode #compare-dash-close,
body.guest-mode #compare-dash-share { display: none !important; }
/* RVC u compare panelu (kad je Metrika uključena) */
.compare-rvc-line { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--border-color); font-size: 0.8rem; color: var(--text-muted); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.compare-rvc-line i { color: var(--accent-secondary); }
.compare-rvc-line b { color: var(--text-main); }
.compare-rvc-block { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--border-color); }
.compare-dash-header h3 { margin: 12px 0 0; color: var(--text-main); font-size: 1.15rem; text-transform: none; letter-spacing: 0; display: flex; align-items: center; gap: 8px; }
.compare-dash-header h3 i { color: var(--accent-secondary); }
/* Ime/naziv u zaglavlju izvještaja na svom PUNOM redu (ne u istom flex redu kao
   ikona+naslov) — sprječava sabijanje dugih naziva u usku kolonu bez obzira
   koliko se sidebar proširi. */
.rvc-report-name-row { font-size: 1.05rem; font-weight: 700; color: var(--text-main); margin-top: 4px; word-break: break-word; }
#compare-dash-body { flex: 1; overflow-y: auto; padding: 18px; }
.cd-loading { text-align: center; color: var(--text-muted); padding: 40px 0; font-size: 0.95rem; }
.cd-loading i { margin-right: 8px; color: var(--accent-secondary); }
.cd-heads { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin-bottom: 14px; }
.cd-head { display: flex; align-items: center; gap: 10px; background: var(--primary-bg); border: 1px solid var(--border-color); border-left-width: 4px; border-radius: 12px; padding: 12px 14px; }
.cd-head-name { font-weight: 800; color: var(--text-main); }
.cd-head-sub { font-size: 0.78rem; color: var(--text-muted); margin-top: 2px; }
.cd-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; display: inline-block; }

/* Grid: dvije kolone; pojedine kartice mogu zauzeti obje (cd-span2) */
.cd-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
/* PDF prezentacija: 2 kolone (za 2 rute → svaka kartica čitljiva, bez razvlačenja) */
.pdf-slide { display: flex; flex-direction: column; }
.pdf-grid2.cd-grid { grid-template-columns: 1fr 1fr; gap: 20px; }
.pdf-slide .cd-heads { margin-bottom: 20px; }
.cd-card { background: var(--primary-bg); border: 1px solid var(--border-color); border-radius: 14px; padding: 14px 16px; }
.cd-card.cd-span2 { grid-column: 1 / -1; }
/* Omotač demografske sekcije (age/gender/peak/zona) unutar pc-dash (Pre-campaign/RVC
   izvještaj, i sam 2-kolonski grid) — puna širina kao ostale kartice te sekcije. */
.rvc-demo-groups-wrap { grid-column: 1 / -1; }
/* Tanka kartica-separator (RVC Digital) + datumi kampanje */
.cd-card.cd-thin { padding: 10px 16px; background: var(--accent-primary); border-color: transparent; }
.cd-card.cd-thin h4 { margin: 0; color: #fff; }
.cd-card.cd-thin h4 i { color: var(--accent-secondary); }
.cd-rvc-dates { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 8px; font-size: 0.76rem; color: rgba(255,255,255,0.92); align-items: center; }
.cd-rvc-dates > i { color: var(--accent-secondary); margin-right: 2px; }
.cd-rvc-date { display: inline-flex; align-items: center; gap: 6px; }
/* Pie chart blokovi (dob/spol) */
.cd-pies { display: flex; flex-wrap: wrap; gap: 16px; }
.cd-pie-block { flex: 1; min-width: 120px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.cd-pie-svg { display: block; }
.cd-card h4 { margin: 0 0 14px; color: var(--text-main); text-transform: none; letter-spacing: 0; font-size: 0.95rem; display: flex; align-items: center; gap: 8px; }
.cd-card h4 i { color: var(--accent-primary); }
.cd-mini-title { display: flex; align-items: center; gap: 7px; font-weight: 700; font-size: 0.82rem; color: var(--text-main); margin-bottom: 8px; }

/* Donut starosne distribucije */
.cd-donuts { display: flex; flex-wrap: wrap; gap: 16px; }
.cd-donut-col { flex: 1; min-width: 130px; }
.cd-donut-block { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.cd-donut-svg { display: block; flex-shrink: 0; }
.cd-donut-legend { display: flex; flex-direction: column; gap: 3px; font-size: 0.74rem; color: var(--text-muted); width: 100%; }
.cd-donut-legend span { display: flex; align-items: center; gap: 6px; }
.cd-donut-legend i { width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0; }
.cd-donut-legend b { color: var(--text-main); margin-left: auto; }

/* Peak */
.cd-peak { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; color: var(--text-muted); margin-bottom: 8px; }
.cd-peak b { color: var(--text-main); }
.cd-peak-val { margin-left: auto; font-weight: 700; color: var(--accent-secondary); text-align: right; }

/* Metrike ruta — unutar velike kartice u dvije kolone */
.cd-metric-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px 22px; }
.cd-metric-label { font-size: 0.82rem; font-weight: 700; color: var(--text-main); margin-bottom: 7px; display: flex; align-items: center; gap: 7px; }
.cd-metric-label i { color: var(--text-muted); width: 16px; text-align: center; }
.cd-bar-row { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.cd-bar-name { font-size: 0.72rem; width: 64px; flex-shrink: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.cd-bar-track { flex: 1; height: 16px; background: var(--sidebar-bg); border-radius: 8px; overflow: hidden; }
.cd-bar-fill { height: 100%; border-radius: 8px; min-width: 2px; transition: width 0.4s ease; }
.cd-bar-fill.cd-bar-best { box-shadow: inset 0 0 0 2px rgba(255,255,255,0.55); }
/* U PDF-u inset shadow html2canvas iscrtava kao artefakt (strelice) — ukloni */
.pdf-slide .cd-bar-fill.cd-bar-best { box-shadow: none; }
/* Demografska strana: 3 kolone (Dob span 2 + Peak 1 → nema prazne pola kartice);
   velike kartice (Metrike ruta, Sastav zone) zauzimaju punu širinu (cd-span2 = 1/-1). */
.pdf-grid3.cd-grid { grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
.pdf-grid2.cd-grid { grid-template-columns: 1fr 1fr; gap: 16px; }
/* Kompaktno da svi demografski podaci stanu na jednu stranu, bez razvlačenja */
.pdf-slide .cd-card { padding: 13px 16px; }
.pdf-slide .cd-card h4 { font-size: 0.98rem; margin-bottom: 10px; }
.pdf-slide .cd-metric-grid { grid-template-columns: 1fr 1fr; gap: 12px 48px; }
.pdf-slide .cd-metric { padding-right: 6px; margin-bottom: 4px; }
.pdf-slide .cd-metric-label { font-size: 0.86rem; margin-bottom: 5px; }
.pdf-slide .cd-bar-row { margin-bottom: 4px; gap: 10px; }
.pdf-slide .cd-bar-name { width: 48px; }
.pdf-slide .cd-bar-track { height: 16px; }
.pdf-slide .cd-bar-val { min-width: 64px; }
.pdf-slide .cd-donuts { gap: 12px; }
/* Sastav zone (leptir) — uži centar da barovi budu bliže nazivima */
.pdf-slide .cd-bfly-row { grid-template-columns: 1.15fr minmax(150px, 0.8fr) 1.15fr; gap: 10px; margin-bottom: 7px; }
.pdf-slide .cd-bfly-label { font-size: 0.86rem; }
.pdf-slide .cd-bfly-bar { height: 16px; }
.cd-bar-val { font-size: 0.8rem; font-weight: 800; color: var(--text-main); min-width: 44px; width: auto; padding-left: 4px; text-align: right; flex-shrink: 0; white-space: nowrap; }

/* Sastav zone — LEPTIR (diverging) grafikon: lijeva ruta naspram desne */
.cd-bfly-head { display: flex; justify-content: space-between; align-items: center; font-weight: 800; font-size: 0.82rem; color: var(--text-main); margin-bottom: 14px; }
.cd-bfly-head .cd-dot { margin: 0 6px; }
.cd-bfly-row { display: grid; grid-template-columns: 1fr minmax(150px, 1.4fr) 1fr; align-items: center; gap: 6px; margin-bottom: 9px; }
.cd-bfly-side { display: flex; align-items: center; gap: 6px; min-width: 0; }
.cd-bfly-left { justify-content: flex-end; }
.cd-bfly-right { justify-content: flex-start; }
.cd-bfly-bar { height: 16px; min-width: 2px; transition: width 0.45s ease; }
.cd-bfly-left .cd-bfly-bar { border-radius: 8px 0 0 8px; }
.cd-bfly-right .cd-bfly-bar { border-radius: 0 8px 8px 0; }
.cd-bfly-val { font-size: 0.78rem; font-weight: 800; color: var(--text-main); flex-shrink: 0; }
.cd-bfly-label { text-align: center; font-size: 0.76rem; color: var(--text-muted); line-height: 1.2; padding: 0 4px; }
.cd-bfly-label i { color: var(--accent-primary); margin-right: 4px; }

/* Sastav zone — STACKED profil (3+ ruta) */
.cd-stack-route { margin-bottom: 12px; }
.cd-stack-bar { display: flex; height: 22px; border-radius: 7px; overflow: hidden; background: var(--sidebar-bg); }
.cd-stack-seg { height: 100%; transition: width 0.4s ease; }
.cd-stack-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; font-size: 0.74rem; color: var(--text-muted); }
.cd-stack-legend span { display: flex; align-items: center; gap: 6px; }
.cd-stack-legend i { width: 11px; height: 11px; border-radius: 3px; flex-shrink: 0; }

.compare-panel { margin-top: 15px; padding-top: 15px; border-top: 1px solid var(--border-color); }
.compare-route-card { background: var(--primary-bg); border-radius: 10px; padding: 12px 14px; margin-bottom: 10px; }
.compare-route-name { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 0.9rem; }
.compare-lm-count { font-size: 0.76rem; color: var(--text-muted); font-weight: normal; }
.compare-city-tag { font-size: 0.69rem; background: var(--primary-bg); border: 1px solid var(--border-color); border-radius: 8px; padding: 1px 6px; color: var(--text-muted); }
.compare-card-remove { margin-left: auto; background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 1rem; line-height: 1; padding: 0 3px; transition: 0.15s; flex-shrink: 0; }
.compare-card-remove:hover { color: #e74c3c; }
.compare-lm-list { list-style: none; font-size: 0.82rem; color: var(--text-muted); }
.compare-lm-list li { padding: 3px 0; display: flex; align-items: center; gap: 8px; }
.compare-lm-list .muted { color: var(--text-muted); }
.compare-hint { color: var(--text-muted); font-size: 0.85rem; text-align: center; padding: 15px 0; }

/* Category breakdown chips */
.cat-breakdown { display:flex; flex-wrap:wrap; gap:5px; margin:6px 0 2px; }
.cat-chip { display:inline-flex; align-items:center; gap:4px; background:var(--primary-bg); border:1px solid var(--border-color); border-radius:8px; padding:3px 8px; font-size:0.74rem; color:var(--text-muted); white-space:nowrap; }
.cat-chip i { color:var(--accent-primary); font-size:0.68rem; }
.cat-chip b { color:var(--text-main); }

/* Compare card demographics */
.compare-demo-area { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border-color); font-size: 0.8rem; }
.compare-demo-row { display:flex; align-items:center; gap:7px; margin-bottom:4px; color:var(--text-muted); }
.compare-demo-row i { color:var(--accent-primary); width:14px; text-align:center; flex-shrink:0; }
.compare-demo-row.small { font-size:0.74rem; }
.compare-demo-loading, .compare-demo-na { color:var(--text-muted); font-size:0.78rem; }

/* Cluster Markers */
.custom-cluster { background: transparent !important; border: none !important; box-shadow: none !important; }
.cluster-badge {
    width: 40px; height: 40px; border-radius: 50%;
    background: var(--accent-primary); border: 2px solid var(--accent-secondary);
    color: white; font-weight: 800; font-size: 13px;
    display: flex; justify-content: center; align-items: center;
    box-shadow: 0 0 12px rgba(0,0,0,0.4);
}

/* City title row with share button */
.city-title-row { display: flex; align-items: center; justify-content: space-between; margin: 20px 0 12px 0; }
.city-title-row h3 { margin: 0; }

/* Route search within city view */
.route-search-wrap { position: relative; margin-bottom: 10px; }
.route-search-wrap i { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: var(--text-muted); font-size: 0.85rem; pointer-events: none; }
.route-search-wrap input {
    width: 100%; padding: 10px 10px 10px 38px; border-radius: 20px;
    border: 1px solid var(--border-color); background: var(--primary-bg);
    color: var(--text-main); outline: none; font-size: 0.9rem; transition: 0.3s;
}
.route-search-wrap input:focus { border-color: var(--accent-secondary); box-shadow: 0 0 6px rgba(253,196,14,0.25); }

/* Print Legend */
.print-legend {
    position: absolute; bottom: 24px; left: 24px; z-index: 2000;
    background: white; color: #111; padding: 16px 20px; border-radius: 14px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.18); border: 1px solid #ddd;
    min-width: 160px; font-family: 'Segoe UI', sans-serif;
}
.print-legend-title { font-size: 1rem; font-weight: 800; margin-bottom: 10px; color: #111; }
.print-legend-item { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; font-size: 0.88rem; color: #222; }
.print-legend-swatch { display: inline-block; width: 24px; height: 5px; border-radius: 3px; flex-shrink: 0; }
.print-legend-date { margin-top: 10px; font-size: 0.75rem; color: #888; }

/* Print */
@media print {
    @page { size: landscape; margin: 0; }
    * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
    html, body { overflow: hidden !important; margin: 0 !important; padding: 0 !important; width: 100vw !important; height: 100vh !important; }
    .sidebar { display: none !important; }
    .app-container { display: block !important; width: 100vw !important; height: 100vh !important; position: relative !important; overflow: hidden !important; }
    .map-container { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; overflow: hidden !important; }
    #map { width: 100% !important; height: 100% !important; }
    .leaflet-control-container { display: none !important; }
    .floating-toolbar, #edit-toolbar, .time-slider-panel, .app-toast { display: none !important; }
    #login-modal { display: none !important; }
    .print-legend { display: block !important; }
}

/* Offline banner */
#offline-banner { position:fixed; top:0; left:0; right:0; z-index:10000; background:#e74c3c; color:white; text-align:center; padding:8px 16px; font-size:0.85rem; font-weight:600; display:none; }
body.offline #offline-banner { display:block; }

/* Toast notification — safe-area-inset-bottom for iPhone notch */
.app-toast { position:fixed; bottom:max(80px, calc(60px + env(safe-area-inset-bottom, 0px))); left:50%; transform:translateX(-50%); background:rgba(20,20,20,0.92); color:white; padding:10px 20px; border-radius:20px; z-index:9000; font-size:0.88rem; box-shadow:0 4px 15px rgba(0,0,0,0.35); pointer-events:none; transition:opacity 0.3s; }
.app-toast.hidden { opacity:0; }

/* Heatmap time slider — safe-area for iPhone */
.time-slider-panel { position:absolute; bottom:max(50px, calc(30px + env(safe-area-inset-bottom, 0px))); left:50%; transform:translateX(-50%); background:var(--modal-bg); padding:12px 20px; border-radius:25px; box-shadow:0 4px 20px rgba(0,0,0,0.4); z-index:1500; border:1px solid var(--border-color); display:flex; align-items:center; gap:12px; }
.time-play-btn { background:var(--accent-primary); border:none; color:white; width:32px; height:32px; border-radius:50%; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:0.85rem; flex-shrink:0; transition:0.2s; }
.time-play-btn:hover { opacity:0.85; }
.time-label { font-weight:800; color:var(--accent-secondary); font-size:1rem; min-width:42px; }
.time-range { width:160px; accent-color:var(--accent-secondary); cursor:pointer; }
.time-hint { font-size:0.75rem; color:var(--text-muted); white-space:nowrap; }

/* Zone demographics card */
.zone-demo-card { background:rgba(253,196,14,0.07); border:1px solid rgba(253,196,14,0.25); border-radius:12px; padding:14px 16px; margin-bottom:12px; font-size:0.84rem; }
.demo-header { display:flex; align-items:center; gap:8px; font-weight:700; color:var(--accent-secondary); margin-bottom:10px; }
.demo-header small { margin-left:auto; color:var(--text-muted); font-weight:normal; font-size:0.78rem; }
.demo-row { display:flex; align-items:flex-start; gap:8px; margin-bottom:5px; color:var(--text-main); }
.demo-row i { color:var(--text-muted); width:14px; text-align:center; flex-shrink:0; margin-top:2px; }

/* RVC date-range picker — visibility is tied to the Metrika button's own state via
   :has(), so no JS branch has to toggle it. Keyed off #metrika-btn rather than the
   card, because compare mode keeps #rvc-card hidden while metrics are still shown. */
#rvc-range { display:none; align-items:center; gap:6px; margin:10px 0 -4px; padding:7px 10px;
    background:rgba(34,103,172,0.10); border:1px solid rgba(34,103,172,0.35); border-radius:10px; flex-wrap:wrap; }
.sidebar:has(#metrika-btn.active) #rvc-range { display:flex; }
#rvc-range label { font-size:0.72rem; font-weight:700; color:#4aa3ff; text-transform:uppercase; letter-spacing:0.03em; }
#rvc-range input[type="date"] { flex:1; min-width:96px; background:var(--bg-input,rgba(255,255,255,0.05));
    border:1px solid var(--border-color); border-radius:6px; padding:4px 6px; color:var(--text-main);
    font-size:0.76rem; font-family:inherit; color-scheme:dark light; }
.rvc-range-sep { color:var(--text-muted); font-size:0.8rem; }
#rvc-range-clear { background:none; border:none; color:var(--text-muted); cursor:pointer; padding:3px 5px;
    border-radius:6px; font-size:0.8rem; }
#rvc-range-clear:hover { color:#4aa3ff; background:rgba(34,103,172,0.18); }
.rvc-demo-note { display:flex; align-items:flex-start; gap:6px; margin:2px 0 8px; font-size:0.68rem;
    line-height:1.35; color:var(--text-muted); }
.rvc-demo-note i { margin-top:2px; flex-shrink:0; }

/* RVC campaign metrics card — blue accent to distinguish from yellow zone card */
.rvc-card { background:rgba(34,103,172,0.10); border:1px solid rgba(34,103,172,0.35); }
.rvc-card .demo-header { color:#4aa3ff; }
.rvc-stats { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; margin-bottom:10px; }
.rvc-stat { background:rgba(255,255,255,0.04); border:1px solid var(--border-color); border-radius:8px; padding:8px 10px; display:flex; flex-direction:column; }
.rvc-stat b { font-size:1.05rem; font-weight:800; color:var(--text-main); line-height:1.2; }
.rvc-stat span { font-size:0.7rem; color:var(--text-muted); margin-top:2px; }
.rvc-gender { margin:4px 0 10px; }
.rvc-gender-bar { display:flex; height:8px; border-radius:4px; overflow:hidden; }
.rvc-gender-m { background:#45b7d1; height:100%; }
.rvc-gender-f { background:#e84393; height:100%; }
.rvc-gender-legend { display:flex; gap:14px; margin-top:5px; font-size:0.72rem; color:var(--text-muted); }
.rvc-gender-legend i { margin-right:3px; }
.age-seg.rvc-age-alpha { background:#26de81; }
.age-seg.rvc-age-z     { background:#45b7d1; }
.age-seg.rvc-age-y     { background:#5f27cd; }
.age-seg.rvc-age-x     { background:#f7b731; }
.age-seg.rvc-age-bb    { background:#e17055; }
.age-lbl.rvc-age-alpha-lbl::before { background:#26de81; }
.age-lbl.rvc-age-z-lbl::before     { background:#45b7d1; }
.age-lbl.rvc-age-y-lbl::before     { background:#5f27cd; }
.age-lbl.rvc-age-x-lbl::before     { background:#f7b731; }
.age-lbl.rvc-age-bb-lbl::before    { background:#e17055; }

/* RVC block inside PDF brief (light background) */
.brief-rvc-section { margin:5px 0; }
.brief-rvc-period { margin-left:auto; font-weight:normal; font-size:0.7rem; color:#888; }
.brief-rvc-stats { display:flex; flex-wrap:wrap; gap:3px 12px; margin:4px 0 6px; font-size:0.74rem; color:#555; }
.brief-rvc-stats i { color:#2267ac; }
.brief-rvc-stats b { color:#222; }
.brief-rvc-section .rvc-gender { margin:5px 0 7px; }
.brief-rvc-section .rvc-gender-legend { color:#555; }
.brief-rvc-section .age-lbl { color:#555; }

/* Export Brief print layout */
#brief-data-panel { display:none; }

/* Screen-level layout for html2canvas capture — same rules as @media print below */
body.print-brief .sidebar { display: none !important; }
body.print-brief .app-container { display: flex !important; overflow: hidden !important; }
body.print-brief .map-container { flex: 0 0 60% !important; position: relative !important; }
body.print-brief #map { height: 100% !important; }
body.print-brief .print-legend { display: none !important; }
body.print-brief #brief-data-panel {
    display: flex !important; flex-direction: column; flex: 0 0 40%;
    background: white; color: #111; overflow: hidden;
    font-family: 'Segoe UI', sans-serif;
}

@media print {
    body.print-brief .app-container { display:flex !important; overflow:hidden !important; }
    body.print-brief .map-container { flex:0 0 60% !important; position:relative !important; }
    body.print-brief #map { height:100% !important; }
    body.print-brief .print-legend { display:none !important; }
    body.print-brief #brief-data-panel {
        display:flex !important; flex-direction:column; flex:0 0 40%;
        background:white; color:#111; overflow:hidden;
        font-family:'Segoe UI',sans-serif;
    }
}

/* Brief panel content styles (also visible on screen briefly during export) */
.brief-header { background:#2267ac; color:white; padding:16px 20px; display:flex; align-items:center; gap:16px; flex-shrink:0; }
.brief-logo { height:36px; }
.brief-city-name { font-size:1.2rem; font-weight:800; }
.brief-date-line { font-size:0.8rem; opacity:0.8; }
.brief-body { flex:1; overflow:hidden; padding:14px 16px; }
.brief-route-block { margin-bottom:12px; }
.brief-route-title { display:flex; align-items:center; gap:8px; font-size:0.9rem; margin-bottom:4px; }
.brief-dot { display:inline-block; width:12px; height:12px; border-radius:50%; flex-shrink:0; }
.brief-lm-badge { margin-left:auto; background:#f0f0f0; color:#555; font-size:0.72rem; padding:2px 7px; border-radius:10px; }
.brief-lm-list { list-style:none; padding-left:20px; font-size:0.78rem; color:#444; }
.brief-lm-list li { padding:1px 0; }
.brief-footer { padding:10px 16px; font-size:0.72rem; color:#999; border-top:1px solid #eee; flex-shrink:0; }

/* Brief: horizontal landmark chips */
.brief-lm-chips { display:flex; flex-wrap:wrap; gap:4px; margin:4px 0 6px; }
.brief-lm-chip { display:inline-flex; align-items:center; gap:4px; background:#f0f0f0; border-radius:10px; padding:2px 8px; font-size:0.72rem; color:#333; }
.brief-lm-chip i { color:#2267ac; font-size:0.65rem; }
.brief-demo-section { margin:5px 0; padding:6px 8px; background:#f4f7fb; border-radius:8px; border-left:3px solid #2267ac; }
.brief-demo-zone { display:flex; align-items:center; gap:5px; font-size:0.78rem; font-weight:700; color:#222; margin-bottom:4px; }
.brief-demo-zone i { color:#2267ac; }
.brief-stats-row { display:block; font-size:0.72rem; color:#666; margin-top:3px; }

/* Print state panel (for print-btn with active selection) */
#print-state-panel { display: none; }
.print-state-header { background:#2267ac; color:white; padding:14px 18px; display:flex; align-items:center; gap:14px; flex-shrink:0; }
.print-state-content { flex:1; overflow:hidden; padding:14px 16px; background:white; color:#111; font-family:'Segoe UI',sans-serif; }
@media print {
    body.print-with-state .sidebar { display: none !important; }
    body.print-with-state .app-container { display: flex !important; overflow: hidden !important; }
    body.print-with-state .map-container { flex: 0 0 62% !important; position: relative !important; height: 100vh !important; }
    body.print-with-state #map { height: 100% !important; }
    body.print-with-state .print-legend { display: none !important; }
    body.print-with-state #print-state-panel {
        display: flex !important; flex-direction: column; flex: 0 0 38%;
        background: white; color: #111; overflow: hidden;
        font-family: 'Segoe UI', sans-serif;
    }
    body.print-with-state .compare-route-card { background: #f5f5f5; page-break-inside: avoid; }
    body.print-with-state .compare-demo-row { color: #444; }
    body.print-with-state .compare-demo-row i { color: #2267ac; }
}

/* ===== MOBILE RESPONSIVE ===== */
@media (max-width: 768px) {
    .app-container { flex-direction: column; height: 100dvh; overflow: hidden; }

    /* Sidebar becomes a slide-in drawer */
    .sidebar {
        position: fixed !important; left: -340px; top: 0;
        width: 320px !important; height: 100dvh; z-index: 1200;
        transition: left 0.3s ease; overflow-y: auto; overflow-x: visible;
        box-shadow: 4px 0 32px rgba(0,0,0,0.5);
    }
    .sidebar.mobile-open { left: 0 !important; }
    /* Detaljno poređenje na mobilnom — skoro cijeli ekran */
    .sidebar.compare-expanded { width: 94vw !important; max-width: none !important; }
    .sidebar.collapsed { width: 320px !important; left: -340px; }
    /* Na mobilnom: strelica vidljiva dok je dashboard otvoren da se sidebar može vratiti */
    .sidebar.compare-expanded .sidebar-collapse-btn { display: flex !important; right: -14px; left: auto; }
    .sidebar.compare-expanded.dash-hidden { transform: none; left: -100% !important; }
    .sidebar.compare-expanded.dash-hidden .sidebar-collapse-btn { position: fixed; left: 6px; right: auto; top: 50%; transform: translateY(-50%); }
    .sidebar.collapsed.mobile-open { left: 0 !important; }
    .sidebar-collapse-btn { display: none !important; }
    /* On mobile, undo all collapsed-sidebar rules */
    .sidebar.collapsed .search-container { display: revert !important; }
    .sidebar.collapsed .list-container { display: revert !important; padding: 0 12px !important; }
    .sidebar.collapsed .route-search-wrap,
    .sidebar.collapsed .city-title-row,
    .sidebar.collapsed #back-to-cities,
    .sidebar.collapsed #back-to-countries,
    .sidebar.collapsed .route-section-toolbar,
    .sidebar.collapsed #route-landmark-section > h4 { display: revert !important; }
    .sidebar.collapsed #route-list li,
    .sidebar.collapsed #country-list li,
    .sidebar.collapsed #city-list li { padding: 15px !important; font-size: 1rem !important; justify-content: revert !important; gap: 12px !important; }
    .sidebar.collapsed #route-list li span { display: revert !important; }
    .sidebar.collapsed #route-list li .compare-chk { display: revert !important; }
    .sidebar.collapsed .city-name { display: revert !important; }
    .sidebar.collapsed .city-icon { display: flex !important; }
    .sidebar.collapsed .sidebar-footer { padding: 8px 14px !important; display: flex !important; justify-content: space-between !important; flex-wrap: nowrap !important; }
    .sidebar.collapsed .footer-left,
    .sidebar.collapsed .footer-right { display: flex !important; }
    .sidebar.collapsed .icon-btn { padding: 10px !important; font-size: 1.1rem !important; }
    .sidebar.collapsed .collapsed-tools { display: none !important; }

    /* Map fills entire screen */
    .map-container { width: 100vw; height: 100dvh; position: relative; }
    #map { width: 100% !important; height: 100% !important; }

    /* Show hamburger */
    .mobile-menu-btn { display: flex !important; }

    /* Shrink sidebar elements for touch */
    .sidebar-header { padding: 14px 16px !important; }
    .app-logo { width: 100px !important; }
    .search-container { padding: 12px 16px; }
    .list-container { padding: 0 12px; }
    .route-section-toolbar { gap: 6px; margin: 10px 0 10px; }
    .route-tool-btn { padding: 12px 6px; font-size: 0.8rem; }
    .sidebar-footer { padding: 10px 14px; }
    .icon-btn { padding: 12px; font-size: 1.1rem; }

    /* Time slider panel */
    .time-slider-panel { flex-wrap: wrap; gap: 6px; padding: 8px 12px; font-size: 0.8rem; }
    .time-range { width: 120px; }
    .time-hint { display: none; }

    /* Compare panel cards stack */
    #compare-content { display: flex; flex-direction: column; gap: 10px; }

    /* Heatmap popup — prevent overflow on mobile */
    .heatmap-opacity-popup { min-width: 130px; }

    /* Login box */
    .login-box { width: 90vw; padding: 28px 20px; }
    .login-logo { width: 100px; }

    /* Settings modal */
    .modal-content { width: 95vw; max-height: 85dvh; }

    /* Edit toolbar — full-width on mobile */
    .floating-toolbar { top: 66px; left: 10px; right: 10px; transform: none !important; padding: 10px 14px; border-radius: 18px; }
    .toolbar-content { min-width: unset; width: 100%; }
    .toolbar-row { flex-wrap: wrap; gap: 8px; }
    #edit-toolbar-hint { flex: 1 1 100%; font-size: 0.82rem; }
    .toolbar-actions { width: 100%; display: flex; gap: 8px; }
    .btn-primary-small, .btn-danger-small { flex: 1; text-align: center; }
}

/* Accessibility: visually hidden (for screen readers) */
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* Accessibility: keyboard focus indicator */
:focus-visible { outline: 2px solid var(--accent-secondary); outline-offset: 2px; border-radius: 4px; }
button:focus-visible { outline: 2px solid var(--accent-secondary); outline-offset: 3px; border-radius: 8px; }
input:focus-visible { outline: 2px solid var(--accent-secondary); outline-offset: 2px; }
/* ============================================================
   IMG RSI — dodatne komponente (v2)
   Lampica RVC statusa · Kombinuj · RVC izvor · OSM izvor · Jezik
   ============================================================ */

/* --- RVC status lampica u kartici rute/Static-a (suptilne boje) --- */
.route-list-item .rvc-lamp, #route-list .rvc-lamp { }
.rvc-lamp {
    width: 9px; height: 9px; border-radius: 50%;
    margin-left: auto; flex: 0 0 auto; align-self: center;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.18);
}
.rvc-lamp.on  { background: #5cae7e; }   /* meka zelena — ima RVC */
.rvc-lamp.off { background: #cf8a8a; }   /* meka crvena — nema RVC */
body.light-theme .rvc-lamp.on  { background: #4a9e70; }
body.light-theme .rvc-lamp.off { background: #c98080; }
/* (liste su već flex preko globalnog `li` pravila; lampica ide desno preko margin-left:auto) */

/* --- Metrika: mali „Izvor: RVC Digital" pečat (samo u Metrika kartici) --- */
.rvc-source {
    display: flex; align-items: center; gap: 7px;
    margin-top: 12px; padding-top: 9px;
    border-top: 1px solid var(--border-color);
    font-size: 0.72rem; color: var(--text-muted);
}
.rvc-source-lbl { letter-spacing: 0.02em; }
.rvc-logo { display: inline-flex; align-items: baseline; gap: 2px; line-height: 1; text-decoration: none; cursor: pointer; }
.rvc-logo:hover { opacity: 0.85; }
.rvc-logo-r { color: #c724b1; font-weight: 800; font-size: 0.92rem; letter-spacing: -0.5px; }
.rvc-logo-d { color: var(--text-main); font-weight: 600; font-size: 0.92rem; letter-spacing: 0.5px; }

/* --- demografski spol bar (razmak kad se prikaže u zone kartici) --- */
.demo-gender { margin: 8px 0 4px; }

/* --- OSM izvor podataka na dnu sidebara --- */
.data-source-bar {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 16px 10px; margin: 0;
    font-size: 0.72rem; color: var(--text-muted);
    text-decoration: none; border-top: 1px solid var(--border-color);
    transition: color 0.2s, background 0.2s;
}
.data-source-bar:hover { color: var(--text-main); background: var(--item-hover); }
.data-source-bar .osm-mark { display: inline-flex; flex: 0 0 auto; }
.data-source-bar .osm-text b { color: var(--text-main); font-weight: 700; }

/* --- Prekidač jezika (BS | EN) u gornjem desnom uglu zaglavlja --- */
.lang-switch {
    position: absolute; top: 14px; right: 14px;
    display: inline-flex; gap: 2px; padding: 2px;
    background: rgba(0,0,0,0.22); border: 1px solid var(--border-color);
    border-radius: 8px;
}
body.light-theme .lang-switch { background: rgba(0,0,0,0.05); }
/* Prekidač valute (BAM | EUR) — identičan stil, odmah ispod prekidača jezika. */
#currency-switch { top: 46px; }
.lang-opt {
    border: none; background: transparent; cursor: pointer;
    color: var(--text-muted); font-weight: 700; font-size: 0.72rem;
    padding: 3px 8px; border-radius: 6px; line-height: 1; transition: 0.15s;
}
.lang-opt:hover { color: var(--text-main); }
.lang-opt.active { background: var(--accent-primary); color: #fff; }

/* --- Kombinuj dugme: aktivno stanje kao ostali alati (grid ćelija uz Metriku) --- */
#combine-btn.active { background: var(--accent-primary); color: #fff; border-color: transparent; }

/* --- Izvor pri DNU PDF slajda, horizontalno centriran (demografija → OSM, RVC slajd → RVC Digital) --- */
.pdf-slide { position: relative; min-height: 958px; display: flex; flex-direction: column; }
.pdf-source {
    margin-top: auto; align-self: center; justify-content: center;
    display: flex; align-items: baseline; gap: 7px; padding-top: 24px;
    font-size: 16px; color: var(--text-muted); letter-spacing: 0.02em;
}
.pdf-slide .pdf-source b { color: var(--text-main); font-weight: 700; }
.pdf-source-osm b { color: #3a9d5d; }
.pdf-rvc-logo { display: inline-flex; align-items: baseline; gap: 2px; }
.pdf-rvc-logo .r { color: #c724b1; font-weight: 800; font-size: 18px; letter-spacing: -0.5px; }
.pdf-rvc-logo .d { color: var(--text-main); font-weight: 700; font-size: 18px; letter-spacing: 0.5px; }

/* --- Sortiranje detaljnog poređenja (bar na vrhu) --- */
.cd-sort {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 10px 14px; margin: 0 0 14px; background: var(--primary-bg);
    border: 1px solid var(--border-color); border-radius: 12px;
}
.cd-sort-lbl { font-size: 0.85rem; font-weight: 700; color: var(--text-muted); }
.cd-sort-lbl i { color: var(--accent-secondary); margin-right: 3px; }
.cd-sort-sel {
    background: var(--sidebar-bg); color: var(--text-main);
    border: 1px solid var(--border-color); border-radius: 8px;
    padding: 6px 10px; font-size: 0.85rem; font-weight: 600; cursor: pointer; outline: none;
}
.cd-sort-sel:focus { border-color: var(--accent-secondary); }

/* --- Izvor podataka na dnu detaljnog poređenja --- */
.cd-sources {
    display: flex; justify-content: center; align-items: baseline; gap: 22px; flex-wrap: wrap;
    margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--border-color);
    font-size: 0.75rem; color: var(--text-muted);
}
.cd-src { display: inline-flex; align-items: baseline; gap: 6px; }
.cd-src b { color: #3a9d5d; font-weight: 700; }

/* --- Desna kolona dashboarda: Peak + Spol složeni (popunjava prazninu pored Starosne distribucije) --- */
.cd-pair { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.cd-pair > .cd-card { margin: 0; }

/* --- Chart aktivnosti po satu (dashboard peak kartica) --- */
.cd-peak-item { margin-bottom: 12px; }
.cd-peak-item:last-child { margin-bottom: 0; }
.cd-hchart { display: flex; align-items: flex-end; gap: 2px; height: 46px; margin: 6px 0 2px; }
.cd-hbar { flex: 1; min-width: 0; border-radius: 2px 2px 0 0; opacity: 0.55; }
.cd-hbar.peak { opacity: 1; box-shadow: 0 0 6px rgba(253,196,14,0.5); }
.cd-haxis { display: flex; justify-content: space-between; font-size: 0.62rem; color: var(--text-muted); }
.cd-peak-hour { display: inline-block; margin-top: 3px; font-size: 0.72rem; color: var(--text-muted); }
.cd-peak-hour b { color: var(--accent-secondary); }

/* --- Chart aktivnosti po satu (zone-demo kartica u side meniju) --- */
.demo-hourly { margin: 8px 0 4px; }
.demo-hchart { display: flex; align-items: flex-end; gap: 2px; height: 40px; }
.demo-hbar { flex: 1; min-width: 0; background: var(--accent-primary); opacity: 0.5; border-radius: 2px 2px 0 0; }
.demo-hbar.peak { background: var(--accent-secondary); opacity: 1; }
.demo-haxis { display: flex; justify-content: space-between; font-size: 0.6rem; color: var(--text-muted); margin-top: 2px; }
.demo-peak-hour { display: inline-block; margin-top: 3px; font-size: 0.72rem; color: var(--text-muted); }
.demo-peak-hour b { color: var(--accent-secondary); }

/* --- Puni red u dashboard gridu (Peak aktivnost preko cijele širine) --- */
.cd-grid > .cd-fullrow { grid-column: 1 / -1; }

/* --- Kupovna moć: dugme + kartica --- */
.cd-pp-btn {
    display: inline-flex; align-items: center; gap: 8px; margin: 4px 0 2px;
    padding: 10px 16px; border-radius: 12px; cursor: pointer;
    background: var(--primary-bg); color: var(--text-main);
    border: 1px solid var(--border-color); font-weight: 700; font-size: 0.9rem; transition: 0.15s;
}
.cd-pp-btn:hover { border-color: var(--accent-secondary); }
.cd-pp-btn.active { background: var(--accent-primary); color: #fff; border-color: transparent; }
.cd-pp-btn i { color: var(--accent-secondary); }
.cd-pp-btn.active i { color: #fff; }
.cd-pp-card .cd-bar-row { margin-bottom: 8px; }
.cd-pp-val { min-width: 210px; text-align: right; font-size: 0.82rem; color: var(--text-muted); white-space: nowrap; }
.cd-pp-val b { color: var(--text-main); font-size: 0.95rem; }
.cd-pp-note { margin-top: 8px; font-size: 0.72rem; color: var(--text-muted); }
.cd-pp-note i { color: var(--accent-secondary); margin-right: 4px; }

/* --- Klik na kategoriju u demografiji → čip je klikabilan --- */
.cat-chip { cursor: pointer; transition: border-color 0.15s, background 0.15s, color 0.15s; }
.cat-chip:hover { border-color: var(--accent-primary); }
.cat-chip.active { background: var(--accent-primary); color: #fff; border-color: transparent; }
.cat-chip.active b, .cat-chip.active i { color: #fff; }

/* --- POI marker kategorije na mapi (banke, stajališta...) --- */
.custom-div-icon.poi-cat-icon i {
    display: flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; border-radius: 50%;
    background: var(--accent-primary); color: #fff;
    border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,0.45); font-size: 12px;
}

/* --- Kupovna moć (alat): dugme + panel + zone --- */
.pp-btn { grid-column: 1 / -1; }
#pp-btn.active { background: var(--accent-primary); color: #fff; border-color: transparent; }
.pp-panel .pp-sub { font-size: 0.72rem; color: var(--text-muted); margin: 2px 0 10px; }
.pp-row { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.pp-rank { width: 18px; text-align: right; font-size: 0.72rem; color: var(--text-muted); flex: 0 0 auto; }
.pp-name { flex: 1; min-width: 0; font-size: 0.78rem; font-weight: 600; color: var(--text-main); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-bar-track { flex: 0 0 64px; height: 12px; background: var(--primary-bg); border-radius: 6px; overflow: hidden; }
.pp-bar-fill { height: 100%; border-radius: 6px; }
.pp-row-val { min-width: 116px; text-align: right; font-size: 0.75rem; color: var(--text-muted); white-space: nowrap; flex: 0 0 auto; }
.pp-row-val b { color: var(--text-main); }
.pp-legend { display: flex; gap: 14px; margin-top: 10px; font-size: 0.72rem; color: var(--text-muted); }
.pp-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 4px; vertical-align: middle; }
.pp-note { margin-top: 8px; font-size: 0.7rem; color: var(--text-muted); line-height: 1.35; }
.pp-note i { color: var(--accent-secondary); margin-right: 4px; }
/* klikabilne/hoverabilne zone u listi */
.pp-panel .pp-row { cursor: pointer; padding: 3px 6px; border-radius: 7px; border: 2px solid transparent; transition: background 0.12s, border-color 0.12s; }
.pp-panel .pp-row.hl { background: var(--item-hover); }
.pp-panel .pp-row.sel { border-color: var(--accent-secondary); background: rgba(253,196,14,0.12); }
/* tooltip: širok koliko treba, četiri reda (naslov / dnevna / rezidentna / prosječna) */
.leaflet-tooltip-own.pp-tip { max-width: none; white-space: nowrap; line-height: 1.55; padding: 8px 12px; }
.leaflet-tooltip-own.pp-tip b { display: inline-block; margin-bottom: 2px; }

/* --- Kupovna moć u PDF-u (dvije kolone zona) --- */
.pp-pdf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 40px; margin: 14px 0; }
.pp-pdf-grid .pp-bar-track { flex: 0 0 90px; height: 16px; }
.pp-pdf-grid .pp-name { font-size: 0.9rem; }
/* tri iznosa u redu (Dnevna / Rezidentna / Prosječna) traže širu kolonu */
.pp-pdf-grid .pp-row-val { min-width: 250px; font-size: 0.9rem; }
.pp-pdf-grid .pp-row { cursor: default; }

/* --- Kupovna moć: slajder popune zona (hover) + linije uz naziv --- */
.pp-opacity-wrap { position: relative; }
.pp-opacity-wrap > #pp-btn { width: 100%; }
#pp-opacity-slider { width: 120px; accent-color: var(--accent-secondary); cursor: pointer; }
#pp-opacity-val { font-size: 0.85rem; color: var(--accent-secondary); font-weight: 800; }
.pp-lines { color: var(--text-muted); font-weight: 500; font-size: 0.92em; }
.pp-pdf-grid .pp-name { white-space: normal; }
.pp-pdf-grid .pp-row { align-items: flex-start; }

/* --- Kupovna moć: izbor sortiranja (Dnevna/Rezidentna) --- */
.pp-sortbar { display: flex; align-items: center; gap: 8px; margin: 2px 0 8px; font-size: 0.72rem; color: var(--text-muted); }
.pp-sort-sel { background: var(--sidebar-bg); color: var(--text-main); border: 1px solid var(--border-color); border-radius: 8px; padding: 4px 9px; font-size: 0.75rem; font-weight: 600; cursor: pointer; outline: none; }
.pp-sort-sel:focus { border-color: var(--accent-secondary); }

/* --- Dugme za PROŠIRENJE sidebara — ISTA veličina/stil kao dugme za smanjenje, iznad njega --- */
.sidebar-expand-btn {
    position: absolute; right: -14px; top: calc(50% - 62px); transform: translateY(-50%);
    width: 28px; height: 56px; border-radius: 14px;
    background: var(--sidebar-bg); border: 1px solid var(--border-color);
    color: var(--text-muted); cursor: pointer; z-index: 1005;
    display: flex; align-items: center; justify-content: center; font-size: 0.75rem;
    box-shadow: 2px 0 8px rgba(0,0,0,0.25); transition: 0.2s;
}
.sidebar-expand-btn:hover { color: var(--text-main); background: var(--item-hover); }
.sidebar.wide { width: min(560px, 50vw); }
.sidebar.wide .sidebar-expand-btn i { transform: rotate(180deg); }
/* kad je meni skupljen ili je otvoreno detaljno poređenje, dugme za proširenje nema smisla */
.sidebar.collapsed .sidebar-expand-btn,
.sidebar.compare-expanded .sidebar-expand-btn { display: none; }
@media (max-width: 768px) { .sidebar-expand-btn { display: none; } }

/* --- Kupovna moć: puni nazivi (prelom) SAMO kad je meni proširen; inače uredno skraćivanje --- */
.sidebar.wide .pp-panel .pp-row { align-items: flex-start; }
.sidebar.wide .pp-panel .pp-name { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.3; }

/* === OSM Import (uvoz ruta) === */
.route-add-actions { display: flex; gap: 8px; }
.route-add-actions .btn-primary { flex: 1; margin-top: 10px; }
.btn-osm-import { flex: 1; margin-bottom: 0; margin-top: 10px; padding: 14px 10px; display: flex; align-items: center; justify-content: center; gap: 7px; font-size: 0.92rem; }
.osm-imp-overlay { position: fixed; inset: 0; z-index: 10000; background: rgba(0,0,0,0.55); backdrop-filter: blur(3px); display: flex; justify-content: center; align-items: center; }
.osm-imp-overlay.hidden { display: none; }
.osm-imp-box { background: var(--sidebar-bg); border: 1px solid var(--border-color); border-radius: 20px; width: min(560px, 94vw); max-height: 88vh; display: flex; flex-direction: column; box-shadow: 0 24px 70px rgba(0,0,0,0.55); overflow: hidden; }
.osm-imp-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid var(--border-color); }
.osm-imp-head h3 { margin: 0; font-size: 1.1rem; color: var(--text-main); display: flex; align-items: center; gap: 10px; }
.osm-imp-head h3 i { color: var(--accent-secondary); }
.osm-imp-x { background: none; border: none; color: var(--text-muted); font-size: 1.2rem; cursor: pointer; padding: 4px 8px; border-radius: 8px; }
.osm-imp-x:hover { color: var(--text-main); background: var(--item-hover); }
.osm-imp-selects { display: flex; flex-wrap: wrap; gap: 10px; padding: 16px 22px; align-items: flex-end; }
.osm-imp-selects label { display: flex; flex-direction: column; gap: 5px; font-size: 0.8rem; color: var(--text-muted); flex: 1 1 150px; }
.osm-imp-selects select { padding: 11px 12px; border-radius: 12px; border: 1px solid var(--border-color); background: var(--primary-bg); color: var(--text-main); font-size: 0.92rem; outline: none; }
.osm-imp-selects .btn-primary { flex: 0 0 auto; width: auto; margin: 0; padding: 11px 18px; }
.osm-imp-status { padding: 0 22px 6px; font-size: 0.88rem; color: var(--text-muted); min-height: 18px; }
.osm-imp-status.err { color: #e74c3c; }
.osm-imp-listtools { display: flex; gap: 8px; padding: 4px 22px 10px; }
.osm-imp-listtools.hidden { display: none; }
.osm-imp-listtools .btn-small { background: var(--item-hover); color: var(--text-main); padding: 6px 12px; }
.osm-imp-list { list-style: none; margin: 0; padding: 0 12px; overflow-y: auto; flex: 1; }
.osm-imp-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; cursor: pointer; transition: background 0.15s; border: 1px solid transparent; }
.osm-imp-row:hover { background: var(--item-hover); }
.osm-imp-row input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--accent-secondary); flex: 0 0 auto; cursor: pointer; }
.osm-imp-ref { flex: 0 0 auto; min-width: 46px; text-align: center; font-weight: 800; color: #000; background: var(--accent-secondary); border-radius: 8px; padding: 4px 8px; font-size: 0.85rem; }
.osm-imp-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.osm-imp-meta .nm { color: var(--text-main); font-size: 0.9rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.osm-imp-meta .sub { color: var(--text-muted); font-size: 0.78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.osm-imp-badge { margin-left: auto; flex: 0 0 auto; font-size: 0.68rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); border: 1px solid var(--border-color); border-radius: 20px; padding: 2px 9px; }
.osm-imp-foot { display: flex; gap: 10px; padding: 14px 22px; border-top: 1px solid var(--border-color); }
.osm-imp-foot .btn-primary, .osm-imp-foot .btn-secondary { margin: 0; padding: 12px; }
.osm-imp-foot .btn-primary:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none; }
.osm-imp-spin { display: inline-block; width: 14px; height: 14px; border: 2px solid var(--text-muted); border-top-color: var(--accent-secondary); border-radius: 50%; animation: osm-spin 0.8s linear infinite; vertical-align: middle; margin-right: 7px; }
@keyframes osm-spin { to { transform: rotate(360deg); } }
.btn-simplify { width: 100%; margin: 10px 0 0; padding: 10px; font-size: 0.86rem; display: flex; align-items: center; justify-content: center; gap: 7px; }
.btn-simplify i { color: var(--accent-secondary); }

/* === Editor ruta: alati + vrhovi === */
.rte-tools { display: flex; gap: 6px; margin-bottom: 10px; }
.rte-tool { flex: 1; padding: 9px 0; border-radius: 10px; border: 1px solid var(--border-color); background: var(--primary-bg); color: var(--text-main); cursor: pointer; font-size: 0.95rem; transition: .15s; }
.rte-tool:hover { background: var(--item-hover); }
.rte-tool.active { background: var(--accent-secondary); color: #000; border-color: var(--accent-secondary); }
.rte-tool.rte-del { flex: 0 0 auto; width: 42px; color: #e74c3c; }
.rte-tool.rte-del:hover { background: rgba(231,76,60,.15); }
.rte-tool.rte-act { flex: 0 0 auto; width: 40px; }
.rte-tool:disabled { opacity: .38; cursor: default; }
.rte-tool:disabled:hover { background: var(--primary-bg); }

/* Pomjerljivi prozor alata rute */
.rte-toolbox { position: fixed; top: 96px; right: 24px; z-index: 1200; background: var(--sidebar-bg); border: 1px solid var(--border-color); border-radius: 14px; box-shadow: 0 12px 40px rgba(0,0,0,.45); overflow: hidden; user-select: none; }
.rte-toolbox.hidden { display: none; }
.rte-toolbox.dragging { box-shadow: 0 18px 55px rgba(0,0,0,.6); }
.rte-toolbox-handle { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--primary-bg); border-bottom: 1px solid var(--border-color); cursor: move; font-size: .8rem; font-weight: 700; color: var(--text-muted); touch-action: none; }
.rte-toolbox-handle i { opacity: .6; }
.rte-toolbox .rte-tools { margin: 0; padding: 10px; }
.rte-toolbox .rte-tool { flex: 0 0 auto; width: 40px; }
.rte-vtx { background: #fff; border: 2px solid var(--accent-secondary); border-radius: 50%; box-shadow: 0 1px 4px rgba(0,0,0,.55); box-sizing: border-box; cursor: pointer; }
.rte-vtx.sel { background: var(--accent-secondary); border-color: #fff; box-shadow: 0 0 0 3px rgba(253,196,14,.4); }

/* === Pre-campaign simulacija === */
#precampaign-btn { grid-column: 1 / -1; }
.pc-loading { padding: 14px 4px; color: var(--text-muted); font-size: .9rem; text-align: center; }
.pc-sub { margin: 10px 0 6px; font-size: .82rem; font-weight: 700; color: var(--accent-secondary); display: flex; align-items: center; gap: 7px; }
.pc-table { width: 100%; border-collapse: collapse; font-size: .82rem; }
.pc-table th { text-align: right; color: var(--text-muted); font-weight: 600; padding: 4px 6px; border-bottom: 1px solid var(--border-color); font-size: .74rem; }
.pc-table th:first-child { text-align: left; }
.pc-table td { padding: 5px 6px; border-bottom: 1px solid var(--border-color); }
.pc-table tbody tr:hover { background: var(--item-hover); }
.pc-seg { color: var(--text-main); }
.pc-num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; color: var(--text-main); white-space: nowrap; }
.pc-table tbody tr:first-child .pc-num { color: var(--accent-secondary); }
.pc-note { margin-top: 10px; font-size: .72rem; color: var(--text-muted); opacity: .85; line-height: 1.4; }
.pc-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 10px 0; }
.pc-metric { background: var(--item-hover); border-radius: 10px; padding: 9px 10px; text-align: center; }
.pc-m-val { font-size: 1.05rem; font-weight: 800; color: var(--text-main); font-variant-numeric: tabular-nums; }
.pc-m-lbl { font-size: .68rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .03em; margin-top: 2px; }
/* Finansijski izvještaj: cijena je uzak input (ne razvučen na cijelu širinu kartice), a
   svaki CPM/CPUR/CPP/CPI tile dobija kratko objašnjenje ispod skraćenice (dataviz: broj
   bez konteksta se lako pogrešno pročita — "0.0089" ništa ne znači bez "po impresiji"). */
.rvc-fin-price-field { max-width: 220px; margin-bottom: 12px; }
.rvc-fin-sub { font-size: .64rem; color: var(--text-muted); margin-top: 3px; line-height: 1.3; }
.pc-warn { font-size: .74rem; color: #e67e22; background: rgba(230,126,34,.1); border-radius: 8px; padding: 6px 9px; margin-bottom: 8px; }
.pc-score { display: flex; align-items: center; gap: 8px; font-size: .82rem; color: var(--text-muted); margin: 6px 0 10px; }
.pc-score b { color: #16a34a; }
.pc-score-bar { flex: 1; height: 8px; border-radius: 5px; background: var(--item-hover); overflow: hidden; }
.pc-score-bar > div { height: 100%; background: linear-gradient(90deg, #22c55e, #16a34a); }
.pc-cpm { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; background: var(--item-hover); border-radius: 10px; padding: 9px 11px; font-size: .8rem; margin-bottom: 4px; }
.pc-cpm label { display: flex; align-items: center; gap: 6px; color: var(--text-muted); }
.pc-cpm input { width: 82px; padding: 5px 7px; border-radius: 8px; border: 1px solid var(--border-color); background: var(--primary-bg); color: var(--text-main); font-size: .8rem; }
.pc-cpm b { color: var(--accent-secondary); }
/* Pre-campaign dashboard (kartice, kao Detaljno poređenje) */
#precampaign-dash-body { flex: 1; overflow-y: auto; padding: 18px; }
.pc-dash { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-content: start; }
.pc-dash .pc-controls, .pc-dash .pc-card-aud, .pc-dash .pc-note { grid-column: 1 / -1; }
.pc-controls { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: var(--primary-bg); border: 1px solid var(--border-color); border-radius: 14px; padding: 10px 14px; }
.pc-controls .pc-meta { font-size: .82rem; color: var(--text-muted); display: inline-flex; align-items: center; gap: 6px; }
.pc-controls .pc-meta b { color: var(--text-main); }
.pc-edit-btn { background: var(--item-hover); border: 1px solid var(--border-color); color: var(--text-main); border-radius: 9px; padding: 7px 12px; font-size: .82rem; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.pc-edit-btn:hover { border-color: var(--accent-secondary); }
/* Setup forma */
.pc-setup .cd-card { display: flex; flex-direction: column; gap: 14px; }
.pc-field { display: flex; flex-direction: column; gap: 6px; font-size: .82rem; color: var(--text-muted); }
.pc-field > input { padding: 9px 11px; border-radius: 10px; border: 1px solid var(--border-color); background: var(--primary-bg); color: var(--text-main); font-size: .9rem; }
.pc-field > input:focus { border-color: var(--accent-secondary); outline: none; }
/* Period od–do */
.pc-dates { flex-direction: row; gap: 12px; }
.pc-dates label { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.pc-dates input { padding: 9px 11px; border-radius: 10px; border: 1px solid var(--border-color); background: var(--primary-bg); color: var(--text-main); font-size: .9rem; font-family: inherit; color-scheme: dark light; }
.pc-dates input:focus { border-color: var(--accent-secondary); outline: none; }
/* Cijena povučena iz MediaBook ponude (bez PDV-a) */
.pc-offer-price { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pc-offer-price > b { font-size: 1.05rem; color: var(--accent-secondary); }
.pc-offer-price-x { background: var(--item-hover); border: 1px solid var(--border-color); color: var(--text-muted); border-radius: 8px; padding: 4px 9px; font-size: .72rem; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; }
.pc-offer-price-x:hover { color: var(--text-main); border-color: var(--accent-secondary); }
.pc-price-tag { background: var(--item-hover); border: 1px solid var(--border-color); border-radius: 20px; padding: 2px 9px; font-size: .68rem; color: var(--text-muted); white-space: nowrap; }
/* Broj vozila po gradu (pcVehiclesListHTML) — obavezno prije "Pokreni simulaciju" bez ponude */
.pc-vehicles-list { display: flex; flex-direction: column; gap: 8px; }
.pc-vehicles-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pc-vehicles-city { font-size: .85rem; color: var(--text-main); }
.pc-vehicles-input { width: 80px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--border-color); background: var(--primary-bg); color: var(--text-main); font-size: .9rem; text-align: center; font-variant-numeric: tabular-nums; }
.pc-vehicles-input:focus { border-color: var(--accent-secondary); outline: none; }
/* Rute koje ulaze u simulaciju (samo prikaz — biraju se preko „Kombinuj") */
.pc-subjects { display: flex; flex-wrap: wrap; gap: 8px; }
.pc-subj-chip { display: inline-flex; align-items: center; gap: 7px; background: var(--item-hover); border: 1px solid var(--border-color); border-radius: 20px; padding: 6px 13px; font-size: .82rem; color: var(--text-main); }
.pc-subj-chip i { color: var(--accent-secondary); font-size: .78rem; }
.pc-empty { padding: 14px; text-align: center; color: var(--text-muted); font-size: .84rem; line-height: 1.5; }
.pc-run-btn[disabled] { opacity: .45; cursor: not-allowed; }
.pc-run-btn { align-self: flex-start; padding: 10px 20px; font-size: .9rem; }
.pc-dash .pc-metrics { margin: 0; }
.pc-dash .pc-note { margin-top: 0; }
@media (max-width: 620px) { .pc-dash { grid-template-columns: 1fr; } }
/* Pretraga adrese/mjesta (vrh liste) */
.top-search-wrap { position: relative; margin: 4px 0 12px; }
.top-search-wrap i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--text-muted); pointer-events: none; }
.top-search-wrap input { width: 100%; padding: 11px 12px 11px 40px; border-radius: 14px; border: 1px solid var(--border-color); background: var(--primary-bg); color: var(--text-main); font-size: .92rem; outline: none; box-sizing: border-box; }
.top-search-wrap input:focus { border-color: var(--accent-secondary); box-shadow: 0 0 8px rgba(253,196,14,.25); }

/* === RVC REPORTS: lista kampanja === */
/* .list-container ostaje kao prazan flex-grow:1 blok kad su mu SVA djeca sakrivena preko
   setSidebarView (samo djeca dobijaju .hidden, ne i sam container) — pravio je fantomski
   razmak iznad #rvc-reports-list/#rvc-heat-editor. Ista klasa koju .compare-expanded već
   koristi za isti problem (vidi ".sidebar.compare-expanded .list-container" pravilo). */
.sidebar.rvc-mode .list-container, .sidebar.rvc-mode .search-container { display: none; }
#rvc-reports-list, #rvc-heat-editor, #rvc-offer-picker { padding: 18px; overflow-y: auto; flex: 1; min-height: 0; }
#rvc-offer-picker h4 { margin: 4px 0 14px; display: flex; align-items: center; gap: 8px; }
#rvc-offer-list { margin-top: 14px; }
/* Detalji ponude (modal) — sadržaj kutije (osm-imp-box je već stilizovan), samo unutrašnji
   razmak/scroll za tijelo; naslov dobija status bedž pored broja ponude. */
.offer-detail-box { width: min(640px, 94vw); }
.offer-detail-body { padding: 18px 22px; overflow-y: auto; flex: 1; min-height: 0; }
.offer-detail-sub { font-size: .86rem; color: var(--text-muted); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.offer-status-badge { font-size: .68rem; text-transform: uppercase; letter-spacing: .03em; background: rgba(34,103,172,.15); color: var(--accent-secondary); padding: 3px 9px; border-radius: 20px; font-weight: 700; }
/* Traka multi-grad wizard-a (Pre-campaign) — dokovana na dno sidebara preko liste ruta. */
/* Normalan flex-child (ne position:absolute) — direktan sibling .sidebar-footer/.data-source-bar
   u istoj flex koloni (.sidebar), pa .list-container (flex-grow:1) sam napravi mjesta iznad ove
   trake umjesto da je ona pokriva postavke/export dugmad na dnu sidebara. */
#offer-wizard-bar { flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; background: var(--sidebar-bg); border-top: 1px solid var(--border-color); box-shadow: 0 -6px 18px rgba(0,0,0,.18); }
#offer-wizard-bar.hidden { display: none; }
#offer-wizard-progress { font-size: .84rem; font-weight: 700; color: var(--text-main); }
#offer-wizard-next { margin: 0; width: auto; padding: 10px 18px; }
#rvc-report-body { flex: 1; overflow-y: auto; padding: 18px; }
.rvc-rep-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.rvc-rep-header h3 { margin: 0; font-size: 1.05rem; display: flex; align-items: center; gap: 8px; }
.rvc-camp-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.rvc-camp-item { background: var(--primary-bg); border: 1px solid var(--border-color); border-radius: 12px; padding: 10px 14px; cursor: pointer; }
.rvc-camp-item:hover { border-color: var(--accent-secondary); }
.rvc-camp-row { display: flex; align-items: center; gap: 10px; }
.rvc-camp-title { flex: 1; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; min-width: 0; }
.rvc-camp-title b { font-size: .96rem; color: var(--text-main); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.rvc-camp-client { width: 100%; background: none; border: none; border-bottom: 1px dashed transparent; color: var(--text-muted); font-size: .82rem; padding: 3px 0; margin-top: 4px; }
.rvc-camp-client:hover, .rvc-camp-client:focus { border-bottom-color: var(--accent-secondary); outline: none; color: var(--text-main); }
.rvc-camp-city { font-size: .74rem; color: var(--text-muted); flex-shrink: 0; max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rvc-camp-sub { font-size: .78rem; color: var(--text-muted); margin-top: 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rvc-camp-id { font-size: .68rem; opacity: .6; }

/* === RVC REPORTS: izvještaj kampanje (širi dashboard) === */
/* Naziv kampanje dobija svoj PUN red (ne 1-od-3 grid kolona) — dugi generisani
   nazivi kampanja (RVC campaign.name) inače su se sabijali u uzak stubac i
   prelamali u 3 reda, bez obzira koliko se sidebar proširio (samo je input za
   klijenta prirodno rastao jer je width:100%, naziv nije imao gdje). */
.rvc-info-grid { display: flex; flex-direction: column; gap: 14px; }
.rvc-info-name-row { display: flex; flex-direction: column; gap: 6px; }
.rvc-info-name-row b { font-size: 1.1rem; word-break: break-word; }
.rvc-info-name-line { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.rvc-info-edit-btn { width: auto; margin: 0; padding: 5px 12px; font-size: .78rem; }
.rvc-info-sub-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 16px; }
.rvc-info-sub-row > div { display: flex; flex-direction: column; gap: 6px; }
.rvc-info-grid span { font-size: .72rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .03em; }
.rvc-info-grid b { color: var(--text-main); }
.rvc-info-grid input.rvc-camp-client { border: 1px solid var(--border-color); border-radius: 8px; padding: 7px 9px; background: var(--secondary-bg, transparent); font-weight: 600; }
.rvc-rep-meta-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }
.rvc-rep-meta { font-size: .8rem; color: var(--text-muted); margin-bottom: 0; }
.rvc-rep-range { display: flex; align-items: center; gap: 6px; padding: 6px 9px; background: rgba(34,103,172,0.10); border: 1px solid rgba(34,103,172,0.35); border-radius: 10px; }
.rvc-rep-range input[type="date"] { background: var(--bg-input, rgba(255,255,255,0.05)); border: 1px solid var(--border-color); border-radius: 6px; padding: 4px 6px; color: var(--text-main); font-size: .76rem; font-family: inherit; color-scheme: dark light; }
.rvc-rep-range button { background: none; border: none; color: var(--text-muted); cursor: pointer; padding: 3px 5px; border-radius: 6px; font-size: .8rem; }
.rvc-rep-range button:hover { color: #4aa3ff; background: rgba(34,103,172,0.18); }
.rvc-kpi-table th, .rvc-kpi-table td { white-space: nowrap; }
.rvc-kpi-table th:nth-child(2) { text-align: left; }
.rvc-heat-img { width: 100%; border-radius: 12px; display: block; }
.pdf-slide .rvc-heat-img { border-radius: 0; }
.rvc-heat-img-wrap { position: relative; }
.rvc-heat-edit-btn { position: absolute; top: 12px; right: 12px; width: auto; margin: 0; padding: 8px 14px; font-size: .82rem; box-shadow: 0 4px 14px rgba(0,0,0,.35); }
/* Kampanja sa više ruta: jedan red PO ruti u kartici "Heatmapa kampanje" (slika ili dugme
   za bojanje), razdvojeni razmakom + imenom rute — bez ovoga se vidjela samo prva obojena
   ruta, ostale u kampanji su bile potpuno nevidljive. */
.rvc-heat-item + .rvc-heat-item { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--border-color); }
.rvc-heat-route-lbl { font-size: .82rem; font-weight: 600; color: var(--text-main); margin-bottom: 8px; }

/* Gender kao stvarna kružna torta (conic-gradient) — vizuelno bliže RVC referenci */
.rvc-pie-wrap { display: flex; align-items: center; gap: 18px; }
.rvc-pie { width: 120px; height: 120px; border-radius: 50%; flex-shrink: 0; }
.rvc-pie-legend { display: flex; flex-direction: column; gap: 8px; font-size: .85rem; color: var(--text-main); }

/* === RVC REPORTS: alat za bojanje heatmape === */
#rvc-heat-editor h4 { margin: 4px 0 14px; display: flex; align-items: center; gap: 8px; }
#rvc-heat-editor select { width: 100%; padding: 9px 11px; border-radius: 10px; border: 1px solid var(--border-color); background: var(--primary-bg); color: var(--text-main); font-size: .9rem; }
/* Plutajući toolbar za bojanje heatmape — reuse .rte-toolbox (isti stil kao kod
   crtanja ruta), samo dodaje panele za intenzitet/radijus i akcije ispod .rte-tools. */
.rvc-heat-tool-panel { padding: 12px; border-top: 1px solid var(--border-color); display: flex; flex-direction: column; gap: 12px; width: 240px; }
.rvc-heat-tool-panel label { display: flex; flex-direction: column; gap: 6px; font-size: .78rem; color: var(--text-muted); }
.rvc-heat-tool-panel input[type="range"] { width: 100%; }
.rvc-heat-tool-actions { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--border-color); }
.rvc-heat-tool-actions button { flex: 1; width: auto; margin: 0; padding: 9px 0; font-size: .84rem; }
.rvc-paint-cursor, .rvc-paint-cursor .leaflet-container { cursor: crosshair !important; }

/* === RVC PDF IZVJEŠTAJ (1:1 stil referentnog RVC PDF-a, naša plava #2267ac umjesto
   njihove magente). Namjerno NE koristi var(--text-main) i sl. — izvještaj mora
   izgledati identično bez obzira na temu aplikacije (dark/light), jer ide klijentu
   kao zvaničan dokument. Sve boje su zato hardkodirane. === */
.rvcpdf-page { font-family:'Segoe UI',Arial,sans-serif; color:#0b0b0b; position:relative; min-height:940px; box-sizing:border-box; padding:70px 90px; }
.rvcpdf-h2 { display:flex; align-items:center; gap:12px; font-size:32px; font-weight:800; margin:0 0 30px; color:#0b0b0b; }
.rvcpdf-bullet { width:16px; height:16px; background:#2267ac; border-radius:3px; flex-shrink:0; }
.rvcpdf-footer { position:absolute; left:90px; right:90px; bottom:40px; display:flex; justify-content:space-between; font-size:14px; color:#898781; }
.rvcpdf-footer b { color:#2267ac; letter-spacing:0.5px; }

.rvcpdf-toc-list { border-top:1px solid #e1e0d9; }
.rvcpdf-toc-row { display:flex; justify-content:space-between; padding:18px 4px; border-bottom:1px solid #e1e0d9; font-size:20px; font-weight:600; color:#0b0b0b; }

.rvcpdf-info-page { background:#031637; color:#fff; }
.rvcpdf-info-page .rvcpdf-h2 { color:#fff; }
.rvcpdf-info-table { display:grid; grid-template-columns:repeat(3,1fr); gap:0; margin-top:10px; border-top:1px solid rgba(255,255,255,0.25); }
.rvcpdf-info-table > div { padding:16px 20px; border-right:1px solid rgba(255,255,255,0.2); }
.rvcpdf-info-table > div:last-child { border-right:none; }
.rvcpdf-info-table .rvcpdf-lbl { font-size:14px; color:#9db8d6; margin-bottom:6px; }
.rvcpdf-info-table .rvcpdf-val { font-size:20px; font-weight:700; color:#fff; }

.rvcpdf-fin-page { padding:0; }
.rvcpdf-fin-banner { background:#031637; padding:54px 90px; }
.rvcpdf-fin-banner-title { font-size:40px; font-weight:800; color:#fff; letter-spacing:.01em; }
.rvcpdf-fin-banner-title span { color:#5598e7; }
.rvcpdf-fin-body { padding:44px 90px 70px; }
.rvcpdf-fin-total { display:flex; align-items:center; gap:18px; padding:16px 24px; border-radius:16px; background:rgba(34,103,172,0.06); border:1px solid #e1e0d9; margin-bottom:26px; }
.rvcpdf-fin-total-lbl { font-size:15px; font-weight:700; color:#12395c; text-transform:uppercase; letter-spacing:.03em; }
.rvcpdf-fin-total-val { font-size:30px; font-weight:800; color:#2267ac; margin-left:auto; }

/* Piktogrami (inline SVG) na kartici — badge (kružić) + sam SVG unutra */
.rvcpdf-fin-icon { width:44px; height:44px; min-width:44px; border-radius:50%; background:#12395c; display:flex; align-items:center; justify-content:center; margin-bottom:10px; }
.rvcpdf-fin-icon-lg { width:52px; height:52px; min-width:52px; margin-bottom:0; }
.rvcpdf-fin-icon-svg { width:22px; height:22px; }
.rvcpdf-fin-icon-lg .rvcpdf-fin-icon-svg { width:26px; height:26px; }

/* Pregled performansi: 5 kartica u redu, uže od standardnih 4 (Rezultati stranica) —
   kompaktniji padding/font jer ova stranica ima znatno više sadržaja naslagano. */
.rvcpdf-fin-page .rvcpdf-stat { padding:16px 14px; }
.rvcpdf-fin-page .rvcpdf-stat .rvcpdf-val { font-size:22px; }
.rvcpdf-fin-page .rvcpdf-stats { margin-bottom:22px; }
.rvcpdf-stats-5 .rvcpdf-stat .rvcpdf-val { font-size:19px; }

/* Trend grafikon — dva odvojena panela (Doseg %, Frekvencija), svaki sa svojom ispravno
   skaliranom osom (namjerno NE jedan grafikon sa dvije y-ose — različite jedinice/skale). */
.rvcpdf-fin-chart-row { display:flex; gap:24px; border:1px solid #e1e0d9; border-radius:16px; padding:18px 20px 8px; box-shadow:0 4px 14px rgba(0,0,0,0.05); }
.rvcpdf-fin-chart-panel { flex:1; min-width:0; }
.rvcpdf-fin-chart-title { font-size:13px; font-weight:700; color:#2267ac; text-transform:uppercase; letter-spacing:.02em; margin-bottom:4px; }

.rvcpdf-dates { display:flex; gap:60px; margin-bottom:20px; font-size:16px; color:#0b0b0b; }
.rvcpdf-dates b { color:#12395c; }
.rvcpdf-sub-h { font-size:18px; font-weight:700; margin:0 0 14px; color:#0b0b0b; }

.rvcpdf-stats { display:flex; border:1px solid #e1e0d9; border-radius:16px; overflow:hidden; box-shadow:0 4px 14px rgba(0,0,0,0.05); margin:0 0 28px; }
.rvcpdf-stat { flex:1; padding:20px 22px; border-right:1px solid #eef0f2; background:rgba(34,103,172,0.05); }
.rvcpdf-stat:last-child { border-right:none; }
.rvcpdf-stat .rvcpdf-lbl { font-size:14px; color:#2267ac; font-weight:700; margin-bottom:6px; text-transform:uppercase; letter-spacing:.02em; }
.rvcpdf-stat .rvcpdf-val { font-size:28px; font-weight:800; color:#12395c; }
.rvcpdf-stat-sub { font-size:11px; color:#6b7a8c; margin-top:4px; line-height:1.35; }
.rvcpdf-kpi-card { border:1px solid #e1e0d9; border-radius:16px; padding:18px 22px; box-shadow:0 4px 14px rgba(0,0,0,0.05); }
.rvcpdf-kpi-table { width:100%; border-collapse:collapse; font-size:16px; }
.rvcpdf-kpi-table th { text-align:left; color:#898781; font-weight:600; font-size:13px; text-transform:uppercase; padding-bottom:10px; }
.rvcpdf-kpi-table td { padding:8px 0; border-top:1px solid #f1f2f4; color:#2267ac; font-weight:700; font-variant-numeric:tabular-nums; }
.rvcpdf-kpi-table tr:first-child td { border-top:none; }
.rvcpdf-kpi-table td:nth-child(-n+2) { color:#12395c; font-variant-numeric:normal; }
.rvcpdf-kpi-table th:not(:nth-child(-n+2)), .rvcpdf-kpi-table td:not(:nth-child(-n+2)) { text-align:right; }

.rvcpdf-map-frame { border:1px solid #e1e0d9; border-radius:16px; overflow:hidden; box-shadow:0 4px 14px rgba(0,0,0,0.06); }
.rvcpdf-map-frame img { display:block; width:100%; }

/* Puna širina jedno-ispod-drugog (ne pola-pola) — starosna lista treba prostor za 5
   redova, spolna struktura je namjerno krupna "hero" statistika; obje gube stisnute. */
.rvcpdf-demo-grid { display:flex; flex-direction:column; gap:48px; }
/* Starosna distribucija: reuse .rvcpdf-abar-* (ista forma kao Procjena publike, jedan
   vizuelni jezik kroz cijeli izvještaj) — vidi rvcPdfAgeBarChart. */
.rvcpdf-agebars { border-top:1px solid #e1e0d9; padding-top:18px; max-width:900px; }
.rvcpdf-agebars .rvcpdf-abar-name { width:170px; }
/* Spol: par krupnih brojeva (identitet nosi tačka, ne boja teksta — dataviz skill)
   iznad tankog stacked bara. Bar spec: ≤24px debljine, 2px surface-gap između segmenata. */
.rvcpdf-gender-hero { display:flex; gap:56px; padding-top:14px; margin-bottom:18px; }
.rvcpdf-gstat { display:flex; align-items:baseline; gap:10px; }
.rvcpdf-gstat i { display:inline-block; width:12px; height:12px; border-radius:50%; flex-shrink:0; }
.rvcpdf-gstat b { font-size:34px; font-weight:800; color:#0b0b0b; line-height:1; }
.rvcpdf-gstat span { font-size:15px; color:#52514e; font-weight:600; }
.rvcpdf-gbar-track { display:flex; height:22px; border-radius:6px; overflow:hidden; background:#f1f2f4; max-width:900px; }
.rvcpdf-gbar-seg:first-child { margin-right:2px; }

/* Procjena publike: horizontalne bar-liste, ista forma kao Pre-campaign PDF (.pc-abar-*)
   radi dosljednosti između izvještaja — jedna nijansa jer je ovo magnituda, ne identitet. */
.rvcpdf-abar-grid { columns:2; column-gap:40px; }
.rvcpdf-abar-row { display:flex; align-items:center; gap:10px; break-inside:avoid; margin-bottom:7px; }
.rvcpdf-abar-name { font-size:13px; width:150px; flex-shrink:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:600; color:#0b0b0b; }
.rvcpdf-abar-track { flex:1; height:12px; background:#f1f2f4; border-radius:6px; overflow:hidden; }
.rvcpdf-abar-fill { height:100%; border-radius:6px; min-width:2px; background:#2267ac; }
.rvcpdf-abar-val { font-size:13px; font-weight:800; color:#0b0b0b; min-width:52px; text-align:right; flex-shrink:0; font-variant-numeric:tabular-nums; }
.rvcpdf-abar-val small { display:block; font-size:11px; font-weight:600; color:#898781; }
.rvcpdf-empty { color:#898781; font-size:16px; padding:40px 0; text-align:center; }

/* Kupovna moć — PDF kompozit panel (tabela, 1/3 širine strane pored mape) — "fino
   uokviren" (rub + sjena) da se jasno izdvoji od mape lijevo, isto obrazloženje kao
   ostale rvcpdf-* stranice (fiksna bijela šema, ne prati temu aplikacije). */
.rvcpdf-pp-panel { box-sizing:border-box; min-height:1010px; display:flex; flex-direction:column; border:1px solid #e1e0d9; border-radius:20px; box-shadow:0 6px 22px rgba(0,0,0,0.08); padding:26px 24px; background:#fff; }
.rvcpdf-pp-foot { margin-top:auto; padding-top:14px; display:flex; justify-content:space-between; gap:10px; font-size:11px; color:#898781; }
.rvcpdf-pp-foot b { color:#2267ac; }
.rvcpdf-pp-head { border-bottom:1px solid #e1e0d9; padding-bottom:14px; margin-bottom:14px; }
.rvcpdf-pp-title { font-size:24px; font-weight:800; color:#0b0b0b; }
.rvcpdf-pp-sub { font-size:13px; color:#898781; margin-top:4px; }
.rvcpdf-pp-row { margin-bottom:12px; }
.rvcpdf-pp-row-top { display:flex; align-items:center; gap:8px; margin-bottom:4px; }
.rvcpdf-pp-rank { width:20px; flex-shrink:0; font-size:12px; font-weight:700; color:#898781; }
.rvcpdf-pp-name { flex:1; min-width:0; font-size:13px; font-weight:700; color:#0b0b0b; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rvcpdf-pp-val { flex-shrink:0; font-size:14px; font-weight:800; color:#12395c; font-variant-numeric:tabular-nums; }
.rvcpdf-pp-bar-track { height:8px; background:#f1f2f4; border-radius:4px; overflow:hidden; margin-left:28px; }
.rvcpdf-pp-bar-fill { height:100%; border-radius:4px; min-width:2px; }
.rvcpdf-pp-km { margin-left:28px; font-size:11px; color:#898781; margin-top:2px; }
.rvcpdf-pp-more { font-size:12px; color:#898781; font-style:italic; margin:6px 0 14px; }
.rvcpdf-pp-legend { display:flex; gap:14px; flex-wrap:wrap; border-top:1px solid #e1e0d9; padding-top:14px; margin-top:6px; }
.rvcpdf-pp-legend span { display:flex; align-items:center; gap:6px; font-size:12px; color:#0b0b0b; }
.rvcpdf-pp-legend i { width:12px; height:12px; border-radius:3px; display:inline-block; }

/* === Pre-campaign PDF: kartice/gauge/bar-liste za "wow" izgled izvoza (prati
   temu aplikacije, za razliku od .rvcpdf-* koje su uvijek bijele) === */
.pc-metric-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.pc-metric-card { display:flex; align-items:center; gap:12px; background:var(--sidebar-bg); border-radius:12px; padding:12px 14px; border-left:4px solid var(--accent-primary); }
.pc-metric-card i { font-size:1.3rem; color:var(--accent-primary); width:26px; text-align:center; flex-shrink:0; }
.pc-metric-card .pc-m-val { font-size:1.2rem; font-weight:800; color:var(--text-main); line-height:1.15; }
.pc-metric-card .pc-m-lbl { font-size:0.72rem; color:var(--text-muted); margin-top:2px; }
.pc-score-row { display:flex; align-items:center; gap:24px; }
.pc-gauge-wrap { position:relative; width:96px; height:96px; flex-shrink:0; }
.pc-gauge-wrap svg { transform:rotate(0deg); }
.pc-gauge-num { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.pc-gauge-num b { font-size:1.5rem; font-weight:800; color:var(--text-main); line-height:1; }
.pc-gauge-num span { font-size:0.68rem; color:var(--text-muted); }
.pc-cpm-block { display:flex; flex-direction:column; gap:6px; font-size:0.82rem; color:var(--text-muted); }
.pc-cpm-block b { font-size:1.1rem; color:var(--text-main); }
.pc-cpm-sep { margin-top:4px; }
.pc-abar-grid { columns:2; column-gap:28px; }
.pc-abar-row { display:flex; align-items:center; gap:9px; break-inside:avoid; margin-bottom:6px; }
.pc-abar-name { font-size:0.74rem; width:130px; flex-shrink:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:600; color:var(--text-main); }
.pc-abar-track { flex:1; height:12px; background:var(--sidebar-bg); border-radius:6px; overflow:hidden; }
.pc-abar-fill { height:100%; border-radius:6px; min-width:2px; background:linear-gradient(90deg,var(--accent-primary),#4a9fe0); }
.pc-abar-val { font-size:0.78rem; font-weight:800; color:var(--text-main); min-width:52px; text-align:right; flex-shrink:0; }
.pc-abar-val small { display:block; font-size:0.62rem; font-weight:600; color:var(--text-muted); }
.pdf-slide .pc-abar-name { width:150px; }
.pdf-slide .pc-abar-row { margin-bottom:3px; }

/* === Pre-campaign: kupovna moć na trasi (kartica u simulaciji + stranica u PDF-u) === */
.pc-dash .pc-card-pp { grid-column: 1 / -1; }
.pc-pp-loading, .pc-pp-empty { font-size:.84rem; color:var(--text-muted); padding:10px 0; display:flex; align-items:center; gap:8px; }
.pc-pp-sub { font-size:.75rem; color:var(--text-muted); margin:-4px 0 10px; }
.pc-pp-tiles { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:12px; }
.pc-pp-tile { background:var(--sidebar-bg); border:1px solid var(--border-color); border-radius:12px; padding:10px 12px; }
/* Prosječna je vodeći broj izvještaja — istaknuta bojom akcenta */
.pc-pp-tile.hl { border-color:var(--accent-secondary); background:rgba(253,196,14,.08); }
.pc-pp-t-lbl { font-size:.7rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:.03em; }
.pc-pp-t-val { font-size:1.1rem; font-weight:800; color:var(--text-main); margin-top:3px; line-height:1.15; }
.pc-pp-t-idx { font-size:.68rem; color:var(--text-muted); margin-top:2px; }
/* dvoredna vrijednost (prosjek + razrada dnevna/rezidentna) → redovi se poravnavaju uz vrh */
.pc-pp-list .pp-row { align-items:flex-start; cursor:default; margin-bottom:6px; }
.pc-pp-list .pp-name { white-space:normal; overflow:visible; text-overflow:clip; line-height:1.3; }
.pc-pp-list .pp-row-val { min-width:150px; line-height:1.3; }
.pc-pp-list .pp-row-val small { display:block; font-size:.66rem; color:var(--text-muted); font-weight:500; margin-top:1px; }
/* Pre-campaign PDF: kupovna moć kompozit stranica (mapa 2/3 + uokvirena tabela 1/3) — ISTI
   raspored kao izvještaj (rvcpdf-pp-*, 13-rvc-reports.js), ali CSS varijable (prati temu). */
.pc-pp-pdf-panel { box-sizing:border-box; min-height:1010px; display:flex; flex-direction:column; border:1px solid var(--border-color); border-radius:20px; box-shadow:0 6px 22px rgba(0,0,0,0.18); padding:26px 24px; background:var(--sidebar-bg); }
.pc-pp-pdf-head { border-bottom:1px solid var(--border-color); padding-bottom:14px; margin-bottom:14px; }
.pc-pp-pdf-title { font-size:24px; font-weight:800; color:var(--text-main); }
.pc-pp-pdf-sub { font-size:13px; color:var(--text-muted); margin-top:4px; }
.pc-pp-pdf-row { margin-bottom:12px; }
.pc-pp-pdf-row-top { display:flex; align-items:center; gap:8px; margin-bottom:4px; }
.pc-pp-pdf-rank { width:20px; flex-shrink:0; font-size:12px; font-weight:700; color:var(--text-muted); }
.pc-pp-pdf-name { flex:1; min-width:0; font-size:13px; font-weight:700; color:var(--text-main); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pc-pp-pdf-val { flex-shrink:0; font-size:14px; font-weight:800; color:var(--accent-secondary); font-variant-numeric:tabular-nums; }
.pc-pp-pdf-bar-track { height:8px; background:var(--primary-bg); border-radius:4px; overflow:hidden; margin-left:28px; }
.pc-pp-pdf-bar-fill { height:100%; border-radius:4px; min-width:2px; }
.pc-pp-pdf-km { margin-left:28px; font-size:11px; color:var(--text-muted); margin-top:2px; }
.pc-pp-pdf-more { font-size:12px; color:var(--text-muted); font-style:italic; margin:6px 0 14px; }
.pc-pp-pdf-panel .pp-legend { border-top:1px solid var(--border-color); padding-top:14px; margin-top:6px; }
.pc-pp-pdf-foot { margin-top:auto; padding-top:14px; font-size:11px; color:var(--text-muted); }
.pc-pp-pdf-foot b { color:var(--text-main); }

/* === Dodaj kampanju: toolbar + tok (drzava/grad/ruta/period/slajder) + objašnjenje === */
.rvc-rep-header-btns { display:flex; gap:8px; flex-wrap:wrap; }
.rvc-rep-header-btns .btn-secondary { width:auto; margin:0; }

#rvc-add-campaign { padding:18px; overflow-y:auto; flex:1; min-height:0; }
#rvc-add-delete { margin-top:10px; }
#rvc-add-campaign h4 { margin:4px 0 10px; display:flex; align-items:center; gap:8px; }
#rvc-add-campaign select, #rvc-add-campaign input[type="text"], #rvc-add-campaign input[type="date"] { width:100%; padding:9px 11px; border-radius:10px; border:1px solid var(--border-color); background:var(--primary-bg); color:var(--text-main); font-size:0.9rem; }
.rvc-add-route-list { max-height:160px; overflow-y:auto; border:1px solid var(--border-color); border-radius:10px; background:var(--primary-bg); margin-bottom:12px; }
.rvc-add-route-row { display:flex; align-items:center; gap:9px; padding:8px 11px; font-size:0.85rem; color:var(--text-main); cursor:pointer; }
.rvc-add-route-row:hover { background:var(--item-hover); }
.rvc-add-route-row input { flex-shrink:0; }
.rvc-add-dates { display:grid; grid-template-columns:1fr 1fr; gap:10px 14px; margin-bottom:6px; }
.rvc-add-dates label { display:flex; flex-direction:column; gap:5px; font-size:0.78rem; color:var(--text-muted); }
.rvc-add-slider-row { display:flex; align-items:center; gap:10px; font-size:0.76rem; color:var(--text-muted); }
.rvc-add-slider-row input[type="range"] { flex:1; }
.rvc-add-slider-row #rvc-add-slider-out { font-weight:700; color:var(--text-main); min-width:24px; text-align:right; }

.rvc-add-metrics-head { display:flex; align-items:center; justify-content:space-between; margin:16px 0 8px; }
.rvc-add-metrics-head h4 { margin:0; }
.rvc-lock-btn { width:34px; height:34px; border-radius:50%; border:1px solid var(--border-color); background:var(--item-hover); color:var(--text-muted); cursor:pointer; flex-shrink:0; display:flex; align-items:center; justify-content:center; }
.rvc-lock-btn:hover { background:var(--sidebar-bg); }
.rvc-add-input { width:100%; padding:5px 6px; border-radius:8px; border:1px solid var(--accent-secondary); background:var(--primary-bg); color:var(--text-main); font-size:1.05rem; font-weight:800; text-align:center; font-variant-numeric:tabular-nums; }
/* Kapija za uređivanje spol/dob/Fokus/publika (rvcAddEditUnlocked) — NAMJERNO bez ikakvog
   vizuelnog traga da je klikabilna. To je fa-chart-line ikona (isti stil kao ostatak RVC
   izvještaja — h3 naslov panela i njegovo dugme u sidebar traci koriste istu ikonu), pa pored
   "Dodaj kampanju" naslova izgleda kao obična tematska dekoracija — samo joj je ovdje dodat
   klik, bez ijedne promjene izgleda (nema border/pozadinu/hover boju koja bi je odala). */
#rvc-add-edit-trigger { cursor: pointer; }

.rvc-gen-explain-btn { margin-top:12px; }
.rvc-gen-explain-box { display:flex; gap:10px; margin-top:14px; padding:12px 14px; background:var(--sidebar-bg); border-radius:12px; border:1px solid var(--border-color); }
.rvc-gen-explain-box i { color:var(--accent-primary); margin-top:2px; flex-shrink:0; }
.rvc-gen-explain-box p { margin:0 0 8px; font-size:0.84rem; line-height:1.5; color:var(--text-main); }
.rvc-gen-explain-box p:last-child { margin-bottom:0; }

/* Demografija (Dodaj kampanju): spol (jedan slajder) + Age slajderi koji se proporcionalno
   nadopunjuju do 100%. */
.rvc-add-demo-row { display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.rvc-add-demo-lbl { font-size:.8rem; color:var(--text-muted); width:110px; flex-shrink:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rvc-add-demo-row input[type="range"] { flex:1; min-width:0; }
.rvc-add-demo-num { width:70px; flex-shrink:0; padding:5px 6px; border-radius:8px; border:1px solid var(--border-color); background:var(--primary-bg); color:var(--text-main); font-size:.85rem; text-align:center; font-variant-numeric:tabular-nums; }
.rvc-add-demo-derived { margin-top:-4px; }
.rvc-add-demo-spacer { flex:1; min-width:0; }
.rvc-add-demo-derived b { width:70px; flex-shrink:0; padding:5px 6px; text-align:center; font-size:.85rem; font-weight:700; color:var(--text-main); font-variant-numeric:tabular-nums; }

/* "Uvid u publiku" editovanje (Dodaj kampanju) — 30 segmenata, 2 reda po stavci (naziv+TRP,
   pa slajder+broj+katanac) namjerno umjesto jednog širokog reda — ne staje sve u standardnu
   (neproširenu) širinu sidebara ako je sve u jednom redu. */
.rvc-add-aud-list { max-height:460px; overflow-y:auto; padding-right:4px; margin-bottom:10px; }
.rvc-add-aud-row { padding:7px 0; border-bottom:1px solid var(--border-color); }
.rvc-add-aud-row:last-child { border-bottom:none; }
.rvc-add-aud-row.locked { opacity:.6; }
.rvc-add-aud-top { display:flex; align-items:baseline; justify-content:space-between; gap:8px; margin-bottom:5px; }
.rvc-add-aud-lbl { font-size:.8rem; font-weight:600; color:var(--text-main); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rvc-add-aud-trp { font-size:.7rem; color:var(--text-muted); flex-shrink:0; white-space:nowrap; font-variant-numeric:tabular-nums; }
.rvc-add-aud-bottom { display:flex; align-items:center; gap:8px; }
.rvc-add-aud-bottom input[type="range"] { flex:1; min-width:0; }
.rvc-add-aud-lock { width:26px; height:26px; font-size:.75rem; }
.rvc-add-aud-reset { padding:4px 10px; font-size:.76rem; }