/* Unified Billing V2: shared presentation only. No action or permission changes.
   Tokenizovano (tokens.css): --ub-* vezani na globalne tokene; body/površine/tabele/
   dugmad prate temu. Navy chrome (topbar/sidebar) i globalni focus (#53b5e2) namjerno
   literal — tempirani da rade i na tamnoj traci (flip bi srušio kontrast). */
:root {
 --ub-canvas:var(--canvas);
 --ub-surface:var(--surface);
 --ub-ink:var(--text);
 --ub-muted:var(--text-muted);
 --ub-line:var(--border);
 --ub-navy:#101b30;
 --ub-blue:var(--primary);
 --ub-soft-blue:var(--primary-weak);
 --ub-shadow:var(--shadow-sm);
 --ub-radius:12px;
}
body { background:var(--ub-canvas); color:var(--ub-ink); font-family:var(--font-sans); font-size:var(--text-base); line-height:1.55; }
body .admin-shell { background:var(--ub-canvas); }
body .topbar { background:var(--ub-navy); border-bottom:1px solid rgba(255,255,255,.08); min-height:64px; }
body .topbar strong { font-size:var(--text-lg); letter-spacing:-.025em; }
/* Dark-mode prekidač: sjedi na navy traci u obje teme, suptilan. */
body .topbar .theme-toggle { display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:8px; border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.06); color:#e2eaf5; font-size:var(--text-lg); line-height:1; cursor:pointer; }
body .topbar .theme-toggle:hover { background:rgba(255,255,255,.14); }
body .topbar .theme-toggle:focus-visible { outline:3px solid #53b5e2; outline-offset:2px; }
body .admin-shell > .admin-sidebar { background:var(--ub-navy); box-shadow:none; color:#e2eaf5; }
body .admin-sidebar .sidebar-brand { gap:11px; padding:22px 18px; border-bottom:1px solid rgba(255,255,255,.08); }
body .admin-sidebar .sidebar-brand span { width:36px; height:36px; border-radius:10px; background:linear-gradient(135deg,#168bc6,#2164ad); box-shadow:0 3px 10px rgba(0,0,0,.12); }
body .admin-sidebar .sidebar-brand strong { color:#fff; font-size:var(--text-lg); font-weight:650; letter-spacing:-.02em; }
body .admin-shell > .admin-sidebar nav { gap:4px; padding:14px 10px; }
body .admin-shell > .admin-sidebar nav a { margin:0; padding:11px 12px; color:#b9c9dd; border:1px solid transparent; border-radius:8px; font-size:var(--text-sm); line-height:1.4; text-decoration:none; }
body .admin-shell > .admin-sidebar nav a:hover,
body .admin-shell > .admin-sidebar nav a:focus-visible { color:#fff; background:#21324e; border-color:#334968; }
body .admin-shell > .admin-sidebar nav a:is(.selected,.active,[aria-current="page"]) { background:#1c4770; border-color:#29608f; color:#fff; box-shadow:inset 3px 0 #41b7e7; }
body .admin-sidebar .sidebar-note { background:#1b2a42; border:1px solid #2a3a54; border-radius:9px; font-size:var(--text-xs); color:#d3dfee; }
body .admin-sidebar .sidebar-note small { color:#94aac5; }
body .admin-content { padding:26px 28px; }
/* Sadržaj puni grid kolonu uz sidebar; .container margin:0 auto je centrirao sadržaj
   unutar kolone i stvarao prazninu lijevo (ugao izgledao odsječeno). */
body .admin-shell > .admin-content.container { max-width:none; margin:0; }
body .admin-content > .page-heading,
body .admin-overview-design > .page-heading,
body .dashboard-design .dashboard-hero { border:1px solid var(--ub-line); border-left:4px solid var(--ub-blue); border-radius:var(--ub-radius); background:var(--surface); box-shadow:var(--ub-shadow); padding:22px 24px; margin-bottom:20px; }
body .page-heading h1,
body .dashboard-design .dashboard-hero h1 { color:var(--ub-ink); font-size:var(--text-3xl); font-weight:700; line-height:1.25; letter-spacing:-.035em; }
body .page-heading p { color:var(--ub-muted); font-size:var(--text-sm); line-height:1.6; }
body .eyebrow { color:var(--primary); font-size:var(--text-2xs); letter-spacing:.12em; font-weight:750; }
body .panel,
body .portal-card,
body .client-identification-card { border-color:var(--ub-line); border-radius:var(--ub-radius); box-shadow:var(--ub-shadow); }
body .panel > .panel-heading { background:var(--surface); padding:17px 20px; border-bottom:1px solid var(--ub-line); gap:12px; }
body .panel-heading h2 { color:var(--ub-ink); font-size:var(--text-lg); font-weight:700; letter-spacing:-.02em; }
body .panel-heading span { color:var(--ub-muted); font-size:var(--text-sm); }
body .metric-grid .metric,
body .dashboard-design .dashboard-primary-card { border-radius:11px; box-shadow:var(--ub-shadow); }
body .metric-grid .metric strong { font-variant-numeric:tabular-nums; letter-spacing:-.035em; }
body :is(.mapping-button,.secondary-action,.add-client-button,.back-link) { border-radius:8px; font-size:var(--text-sm); font-weight:650; text-decoration:none; line-height:1.4; }
body .mapping-button { background:var(--primary); border:1px solid var(--primary); color:var(--on-primary); box-shadow:0 2px 4px rgba(21,103,154,.1); }
body .mapping-button:hover { background:var(--primary-700); border-color:var(--primary-700); }
body .secondary-action { background:var(--surface); color:var(--primary-700); border:1px solid var(--border); box-shadow:none; }
body .secondary-action:hover { background:var(--surface-raised); border-color:var(--border); }
body .danger-button { border-radius:8px; }
body :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),select,textarea) { border-color:var(--border); border-radius:8px; color:var(--ub-ink); font-family:inherit; }
body :is(input,select,textarea):focus-visible { outline:3px solid rgba(34,142,201,.22); outline-offset:1px; border-color:var(--primary); }
body :is(button,a):focus-visible { outline:3px solid #53b5e2; outline-offset:2px; }
body :is(.client-filter-form,.security-filter-form,.client-toolbar) { background:var(--surface-2); border-color:var(--ub-line); }
body .portal-tabs { gap:7px; }
body .portal-tabs a { border-radius:8px; font-size:var(--text-sm); padding:8px 12px; border-color:var(--border); }
body .portal-tabs a.selected { background:var(--primary-weak); border-color:var(--primary); color:var(--primary-700); font-weight:700; }
body table th { color:var(--text-muted); background:var(--surface-raised); font-size:var(--text-2xs); letter-spacing:.045em; font-weight:750; border-color:var(--ub-line); }
body table td { border-color:var(--border-soft); font-variant-numeric:tabular-nums; }
body table tbody tr:nth-child(even) { background-color:var(--surface-2); }
body table tbody tr:hover { background-color:var(--row-hover); }
body table :is(td,th) { padding-top:11px; padding-bottom:11px; }
body code,
body .portal-id { font-family:var(--font-mono); font-size:.92em; }
body .status { border-radius:6px; font-size:var(--text-xs); line-height:1.4; }
body .alert { border-radius:9px; line-height:1.55; }
body .country-widget-grid { gap:9px; }
/* Dashboard composition follows the reference: title, portal strip, indicators. */
body .admin-overview-design { display:flex; flex-direction:column; }
body .admin-overview-design > .page-heading { order:-3; }
body .admin-overview-design > .metric-grid { order:-1; }
body .admin-overview-design .dashboard-primary-grid { display:contents; }
body .admin-overview-design .portal-status-panel { order:-2; margin-bottom:18px; }
body .admin-overview-design .portal-status-panel > .panel-heading { padding:10px 16px; }
body .admin-overview-design .portal-status-panel .panel-heading h2 { font-size:var(--text-sm); }
body .admin-overview-design .portal-status-list { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); padding:8px; gap:6px; }
body .admin-overview-design .portal-status-row { min-width:0; min-height:48px; border:1px solid var(--border); border-radius:7px; padding:9px; }
body .admin-overview-design .portal-status-name { font-size:var(--text-xs); overflow-wrap:anywhere; }
body .admin-overview-design .portal-status-row strong { font-size:var(--text-xs); white-space:normal; overflow:visible; text-overflow:clip; }
body .line-workspace .profile-block,
body .admin-content #client-profile .client-profile-grid > div { border-color:var(--ub-line); box-shadow:none; }
@media(min-width:1101px) {
 body .admin-shell { grid-template-columns:220px minmax(0,1fr); }
}
@media(max-width:700px) {
 body .admin-overview-design .portal-status-list { grid-template-columns:repeat(2,minmax(0,1fr)); }
 body .admin-overview-design .portal-status-row:last-child { grid-column:1 / -1; }
 body .admin-content { padding:14px 12px; }
 body .topbar { padding:0 16px; }
 body .admin-content > .page-heading,
 body .admin-overview-design > .page-heading,
 body .dashboard-design .dashboard-hero { padding:18px 16px; }
 body .page-heading h1,
 body .dashboard-design .dashboard-hero h1 { font-size:var(--text-2xl); }
 body .admin-shell > .admin-sidebar nav { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:4px; padding:8px; overflow:visible; }
 body .admin-shell > .admin-sidebar nav a { min-height:44px; display:flex; align-items:center; padding:9px 10px; min-width:0; white-space:normal; overflow-wrap:anywhere; }
 body .panel > .panel-heading { padding:15px; flex-wrap:wrap; }
 body :is(.mapping-button,.secondary-action,.add-client-button) { min-height:44px; box-sizing:border-box; }
 body .admin-content .add-client-button { position:static; inset:auto; z-index:auto; box-shadow:none; }
 body :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),select,textarea) { font-size:var(--text-lg); }
}
@media(prefers-reduced-motion:reduce) {
 body :is(.mapping-button,.secondary-action,.admin-sidebar nav a) { transition:none; }
}

/* Dark-mode override za legacy komponente koje imaju hardkodirane svijetle boje
   (nisu u tokenizovanom dizajn-sloju). Skalira pozadine/tekst na tokene; semanticki
   akcenti (heat-skala, obojeni lijevi rubovi) namjerno ostaju. */
:root[data-theme="dark"] .alert { background:var(--surface-2); color:var(--text); }
:root[data-theme="dark"] .alert.danger { background:var(--bad-bg); color:var(--bad-fg); }
:root[data-theme="dark"] .alert.success { background:var(--ok-bg); color:var(--ok-fg); }
:root[data-theme="dark"] .geo-v2 .geo-map-card { background:var(--surface); border-color:var(--border); }
:root[data-theme="dark"] .geo-v2 .geo-map-period { background:var(--primary-weak); color:var(--text); }
:root[data-theme="dark"] .reconciliation-metric { background:var(--surface); border-color:var(--border); }
:root[data-theme="dark"] .reconciliation-metric span { color:var(--text-muted); }
:root[data-theme="dark"] .reconciliation-event { background:var(--surface-2); }
:root[data-theme="dark"] .reconciliation-safe-note { background:var(--primary-weak); color:var(--text); }