/* ================================================================
   PREMIUM.CSS — stambenezajednice.rs  ·  Product register
   Revized per impeccable product rules:
   - transitions 150–200ms (product, not 360–450ms)
   - no page-load orchestration (product ban)
   - no ghost-card (border + blur≥16px = banned combo)
   - card radius max 14px per product register
   - prefers-reduced-motion on every animation
   ================================================================ */

/* ---- Font upgrade: Plus Jakarta Sans ---- */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700&display=swap');

/* ---- Design tokens — cool neutral, data-first ---- */
:root {
  --bg:        #111318;
  --surface:   #191d24;
  --surface2:  #1f2530;
  --border:    #2c3340;
  --border-hi: rgba(255,255,255,0.04);
  --accent:    #e8a427;
  --accent2:   rgba(232,164,39,0.08);
  --text:      #e6edf3;
  --muted:     #7d8896;
  --prof:      #34c759;
  --dom:       #7d8896;
  --radius:    12px;
  --radius-lg: 14px;
  --radius-sm: 7px;
  --sh-card:   0 1px 0 rgba(255,255,255,0.03) inset, 0 1px 4px rgba(0,0,0,0.3);
  --sh-hover:  0 1px 0 rgba(255,255,255,0.05) inset, 0 3px 10px rgba(0,0,0,0.45);
  --ease-out:    cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
}

:root.light {
  --bg:        #f4f6f8;
  --surface:   #ffffff;
  --surface2:  #edf0f4;
  --border:    #d0d7e0;
  --border-hi: rgba(0,0,0,0.03);
  --accent:    #c68a00;
  --accent2:   rgba(198,138,0,0.07);
  --text:      #1c2029;
  --muted:     #6a7381;
  --prof:      #1a8c3a;
  --dom:       #6a7381;
  --sh-card:   0 1px 0 rgba(255,255,255,1) inset, 0 1px 3px rgba(0,0,0,0.06);
  --sh-hover:  0 1px 0 rgba(255,255,255,1) inset, 0 2px 8px rgba(0,0,0,0.09);
}

/* ---- Body ---- */
body {
  font-family: 'Plus Jakarta Sans', 'Source Sans 3', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: var(--bg);
}

/* ================================================================
   HEADER — glassmorphism (fixed/sticky element = permitted blur)
   ================================================================ */
header {
  background: rgba(17,19,24,0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 0 rgba(255,255,255,0.03);
  /* NO height override — original is 64px, all sticky top: values depend on it */
}

:root.light header {
  background: rgba(244,246,248,0.95);
  box-shadow: 0 1px 0 rgba(0,0,0,0.07);
}

.logo {
  font-size: 20px;
  letter-spacing: -0.02em;
}

.logo small {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 4px;
  opacity: 0.55;
}

/* ---- Nav tabs — 150ms product timing ---- */
.tab {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.005em;
  border-radius: 8px;
  transition: background 150ms var(--ease-out), color 150ms var(--ease-out),
              box-shadow 150ms var(--ease-out), transform 100ms var(--ease-out);
  touch-action: manipulation;
}

@media (hover: hover) and (pointer: fine) {
  .tab:hover {
    background: var(--surface2);
    color: var(--text);
  }
}

.tab:active {
  transform: scale(0.96);
  transition-duration: 80ms;
}

.tab.active {
  background: var(--accent);
  color: #000;
  box-shadow: 0 1px 8px rgba(240,168,50,0.28);
}

.nav-link {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  border-radius: 8px;
  transition: background 150ms var(--ease-out), color 150ms var(--ease-out),
              border-color 150ms var(--ease-out), transform 100ms var(--ease-out);
  touch-action: manipulation;
}

.nav-link.active {
  color: var(--accent);
  border-color: rgba(240,168,50,0.4);
  background: var(--accent2);
}

.nav-link:active {
  transform: scale(0.96);
  transition-duration: 80ms;
}

.pb2 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 11px;
  font-weight: 600;
  border-radius: 7px;
  transition: background 150ms var(--ease-out), color 150ms var(--ease-out),
              border-color 150ms var(--ease-out), box-shadow 150ms var(--ease-out);
  touch-action: manipulation;
}

.pb2.active {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent2);
}

/* ---- Nav dropdown ---- */
.nav-dropdown-menu {
  border-radius: var(--radius);
  border: 1px solid var(--border);
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
  background: var(--surface);
}

/* ================================================================
   SEARCH BAR & FILTER BAR
   ================================================================ */
.search-bar {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 14px 24px;
}

.sg label {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.1px;
}

.fw input,
.fw select {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 13px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition: border-color 150ms ease-out, box-shadow 150ms ease-out;
}

.fw input:focus,
.fw select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(240,168,50,0.12);
}

.btn-clear {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 600;
  border-radius: var(--radius-sm);
  transition: border-color 150ms var(--ease-out), color 150ms var(--ease-out),
              background 150ms var(--ease-out), transform 100ms var(--ease-out);
  touch-action: manipulation;
}

@media (hover: hover) and (pointer: fine) {
  .btn-clear:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent2);
  }
}

.btn-clear:active {
  transform: scale(0.97);
}

.fbar {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

/* ---- Chips ---- */
.chip {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 11.5px;
  font-weight: 600;
  border-radius: 20px;
  padding: 5px 14px;
  transition: background 150ms var(--ease-out), color 150ms var(--ease-out),
              border-color 150ms var(--ease-out), box-shadow 150ms var(--ease-out),
              transform 100ms var(--ease-out);
  touch-action: manipulation;
}

@media (hover: hover) and (pointer: fine) {
  .chip:hover {
    background: var(--surface2);
    color: var(--text);
  }
}

.chip:active {
  transform: scale(0.96);
}

.chip.ca {
  background: var(--accent);
  border-color: var(--accent);
  color: #000;
  box-shadow: 0 1px 6px rgba(240,168,50,0.2);
}

/* ================================================================
   MAIN LAYOUT
   ================================================================ */
.wrap {
  padding: 24px 28px;
  max-width: 1400px;
}

.dash-section {
  margin-bottom: 36px;
}

/* ---- Section title with gradient rule ---- */
.dash-section-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 10px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 1.4px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.dash-section-title::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--border), transparent);
}

/* ================================================================
   KPI CARDS — no ghost-card (border only, subtle inset depth)
   ================================================================ */
.dash-kpi {
  gap: 14px;
  margin-bottom: 28px;
}

.dash-kpi-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px 22px 18px;
  box-shadow: var(--sh-card);
  transition: border-color 150ms ease-out, box-shadow 150ms ease-out,
              transform 150ms ease-out;
}

@media (hover: hover) and (pointer: fine) {
  .dash-kpi-card:hover {
    border-color: rgba(240,168,50,0.3);
    box-shadow: var(--sh-hover);
    transform: translateY(-2px);
  }
}

.dash-kpi-val {
  font-size: 40px;
  font-weight: 900;
  font-family: 'Playfair Display', serif;
  color: var(--accent);
  line-height: 1;
  letter-spacing: -0.03em;
}

.dash-kpi-lbl {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 10px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 1.2px;
  margin-top: 8px;
}

/* ================================================================
   MINI CARDS
   ================================================================ */
.dash-mini-grid {
  gap: 10px;
  margin-bottom: 14px;
}

.dash-mini-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 13px 15px;
  box-shadow: var(--sh-card);
  transition: border-color 150ms ease-out, transform 150ms ease-out;
}

.dash-mini-card:hover {
  border-color: rgba(240,168,50,0.22);
  transform: translateY(-1px);
}

.dash-mini-val {
  font-size: 23px;
  font-weight: 900;
  letter-spacing: -0.025em;
}

.dash-mini-lbl {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.9px;
}

/* ================================================================
   SRB BADGES
   ================================================================ */
.srb-badge {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 15px 11px;
  box-shadow: var(--sh-card);
  transition: border-color 150ms ease-out, transform 150ms ease-out;
}

.srb-badge:hover {
  border-color: rgba(240,168,50,0.2);
  transform: translateY(-1px);
}

.srb-badge-v {
  font-size: 26px;
  letter-spacing: -0.025em;
}

.srb-badge-l {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.9px;
}

.srb-sub {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.9px;
}

/* ================================================================
   ZGRADE / BUILDING CARDS
   ================================================================ */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px;
  box-shadow: var(--sh-card);
  transition: border-color 150ms var(--ease-out), box-shadow 150ms var(--ease-out),
              transform 180ms var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .card:hover {
    border-color: rgba(240,168,50,0.3);
    transform: translateY(-2px);
    box-shadow: var(--sh-hover);
  }
}

.card:active {
  transform: scale(0.98);
  transition-duration: 80ms;
}

.cn {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.4;
  margin-bottom: 6px;
}

.ca2 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 12px;
}

.cu {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 13px;
  font-weight: 700;
}

/* ---- Badges ---- */
.badge {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.3px;
  border-radius: 7px;
  padding: 2px 7px;
}

/* ---- Card katastar tags ---- */
.card-kat { margin-top: 8px; padding-top: 8px; gap: 5px; }
.card-kat span { border-radius: 6px; font-size: 11px; }

/* ---- Card footer ---- */
.card-footer { margin-top: 8px; padding-top: 7px; }
.card-kom-btn {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 11px;
  font-weight: 600;
  border-radius: 20px;
  transition: border-color 150ms var(--ease-out), color 150ms var(--ease-out),
              background 150ms var(--ease-out), transform 100ms var(--ease-out);
  touch-action: manipulation;
}

.card-kom-btn:active { transform: scale(0.95); transition-duration: 80ms; }

/* ================================================================
   UPRAVNICI CARDS
   ================================================================ */
.ugrid { gap: 12px; }

.ucard {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--sh-card);
  transition: border-color 150ms var(--ease-out), box-shadow 150ms var(--ease-out),
              transform 180ms var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .ucard:hover {
    border-color: rgba(240,168,50,0.28);
    box-shadow: var(--sh-hover);
    transform: translateY(-2px);
  }
}

.ucard:active {
  transform: scale(0.99);
  transition-duration: 80ms;
}

.uh {
  padding: 15px 17px;
}

.uav {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  font-size: 17px;
}

.uime {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.uv {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 11px;
}

.ucf {
  font-size: 25px;
  letter-spacing: -0.035em;
}

.uct {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.4px;
}

.ubody { padding: 8px 17px; }
.zu { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 13px; font-weight: 600; }
.zn { font-family: 'Plus Jakarta Sans', sans-serif; }

/* ================================================================
   MAP
   ================================================================ */
#dash-map {
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  overflow: hidden;
}

.leaflet-popup-content-wrapper {
  border-radius: var(--radius) !important;
  box-shadow: 0 6px 24px rgba(0,0,0,0.55) !important;
}

/* ================================================================
   TRŽIŠTE
   ================================================================ */
.trz-kpi-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--sh-card);
  transition: border-color 150ms ease-out, transform 150ms ease-out;
}

.trz-kpi-card:hover {
  border-color: rgba(240,168,50,0.2);
  transform: translateY(-1px);
}

.trz-kpi-val {
  font-size: 32px;
  letter-spacing: -0.025em;
}

.trz-kpi-lbl {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.1px;
}

.trz-box, .trz-full {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.trz-box-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.1px;
}

.trz-report-btn {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  border-radius: var(--radius-sm);
  transition: background 150ms var(--ease-out), color 150ms var(--ease-out),
              border-color 150ms var(--ease-out), box-shadow 150ms var(--ease-out),
              transform 100ms var(--ease-out);
  touch-action: manipulation;
}

.trz-report-btn:active { transform: scale(0.97); transition-duration: 80ms; }

/* ================================================================
   PAGINATION & BUTTONS
   ================================================================ */
.pb {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  border-radius: var(--radius-sm);
  transition: background 150ms var(--ease-out), color 150ms var(--ease-out),
              border-color 150ms var(--ease-out), transform 100ms var(--ease-out);
  touch-action: manipulation;
}

@media (hover: hover) and (pointer: fine) {
  .pb:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent2);
  }
}

.pb:active {
  transform: scale(0.95);
  transition-duration: 80ms;
}

.pb.act {
  background: var(--accent);
  border-color: var(--accent);
  color: #000;
  font-weight: 700;
  box-shadow: 0 1px 6px rgba(240,168,50,0.22);
}

/* ================================================================
   COMMENT SECTION
   ================================================================ */
.kom-section { border-radius: 0 0 var(--radius-lg) var(--radius-lg); }

.kom-ocena-btn {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 600;
  border-radius: var(--radius-sm);
  transition: background 150ms var(--ease-out), color 150ms var(--ease-out),
              border-color 150ms var(--ease-out), transform 100ms var(--ease-out);
  touch-action: manipulation;
}

.kom-ocena-btn:active { transform: scale(0.96); transition-duration: 80ms; }

/* ================================================================
   FOOTER / LEGEND
   ================================================================ */
.cs {
  background: var(--surface);
  border-top: 1px solid var(--border);
}

.ctitle {
  font-size: 24px;
  letter-spacing: -0.02em;
}

.csub {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 13px;
}

.clabel {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.1px;
}

.cbox {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

/* ================================================================
   MARK / HIGHLIGHT
   ================================================================ */
mark {
  background: rgba(240,168,50,0.16);
  color: var(--accent);
  border-radius: 3px;
  padding: 0 3px;
}

/* ================================================================
   SCROLLBAR
   ================================================================ */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--muted); }

/* ================================================================
   MZ FILTER BAR (upravnici.html)
   ================================================================ */
.mzf-bar {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 10px 20px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.mzf-btn {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 11.5px;
  font-weight: 600;
  border-radius: 20px;
  padding: 5px 14px;
  transition: background 150ms var(--ease-out), color 150ms var(--ease-out),
              border-color 150ms var(--ease-out), opacity 150ms var(--ease-out),
              transform 100ms var(--ease-out);
  cursor: pointer;
  background: transparent;
  touch-action: manipulation;
}

@media (hover: hover) and (pointer: fine) {
  .mzf-btn:hover { opacity: 0.75; }
}

.mzf-btn:active {
  transform: scale(0.95);
  transition-duration: 80ms;
}

.mzf-btn.mzf-active {
  background: var(--accent);
  border-color: var(--accent) !important;
  color: #000 !important;
  box-shadow: 0 1px 6px rgba(240,168,50,0.2);
}

.mzf-label {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 10px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 1.2px;
}

/* ================================================================
   BAR CHARTS
   ================================================================ */
.dash-bar-track {
  background: var(--surface2);
  border-radius: 4px;
  height: 6px;
}

.dash-bar-fill {
  border-radius: 4px;
  /* state change animation = product-permitted */
  transition: width 300ms ease-out;
}

.dash-bar-row { border-bottom-color: var(--border); }
.dash-bar-lbl { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 12px; }
.dash-bar-val { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 11px; }
.dash-rank-row { border-bottom-color: var(--border); }
.dash-rank-nm  { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 12px; }
.dash-rank-v   { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: 12px; }

/* ================================================================
   IZMENE TABLE
   ================================================================ */
.izmene-table th {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.9px;
}

.izmene-table td {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 13px;
}

.izmene-badge {
  background: var(--accent);
  font-family: 'Plus Jakarta Sans', sans-serif;
}

/* ================================================================
   RINFO / RESULTS COUNT
   ================================================================ */
.rinfo { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 11.5px; }
.rinfo strong { color: var(--accent); font-weight: 700; }

/* ================================================================
   EMPTY STATE
   ================================================================ */
.empty { font-family: 'Plus Jakarta Sans', sans-serif; }

/* ================================================================
   FOCUS RING — accessibility
   ================================================================ */
*:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width: 768px) {
  .wrap          { padding: 14px 16px; }
  .dash-section  { margin-bottom: 24px; }
  .dash-kpi      { gap: 10px; }
  .dash-kpi-val  { font-size: 34px; }
  header         { height: auto; }
}

@media (max-width: 480px) {
  .dash-kpi-card { padding: 14px 16px; }
  .dash-kpi-val  { font-size: 30px; }
}

/* ================================================================
   REDUCED MOTION
   ================================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* ================================================================
   COLOR NOISE REDUCTION — data readability
   TC card border colors: reduce from #00CC00/#0066FF/#FF0000 to
   subtle tinted borders. Readable identity without eye strain.
   ================================================================ */
.tc0 { border-color: rgba(232,164,39,0.24) !important; }
.tc0 .uh { background: rgba(232,164,39,0.04) !important; }
.tc1 { border-color: rgba(52,199,89,0.2) !important; }
.tc1 .uh { background: rgba(52,199,89,0.03) !important; }
.tc2 { border-color: rgba(64,156,255,0.2) !important; }
.tc2 .uh { background: rgba(64,156,255,0.03) !important; }
.tc3 { border-color: rgba(255,69,58,0.2) !important; }
.tc3 .uh { background: rgba(255,69,58,0.03) !important; }
.tc4 { border-color: rgba(255,214,10,0.18) !important; }
.tc4 .uh { background: rgba(255,214,10,0.03) !important; }
.tc5, .tc6, .tc7, .tc8, .tc9 { border-color: var(--border) !important; }
.tc5 .uh, .tc6 .uh, .tc7 .uh, .tc8 .uh, .tc9 .uh { background: transparent !important; }

/* MZ filter chips: neutralize inline color styles on non-active chips */
.mzf-btn:not(.mzf-active) {
  color: var(--muted) !important;
  border-color: var(--border) !important;
  background: transparent !important;
}

/* Regular filter chips: same treatment */
.chip:not(.ca):not(.cp):not(.cd):not(.ck):not(.active) {
  color: var(--muted) !important;
  border-color: var(--border) !important;
  background: transparent !important;
}

/* MZ label inside card meta (bare span with inline color) */
.str-card-meta span {
  color: var(--muted) !important;
  font-weight: 600 !important;
}

/* ================================================================
   BUILDING CARDS — dramatic typography upgrade
   Original: 13px/600, minimal padding, generic hover
   Now: clear 3-level hierarchy, generous spacing, refined hover
   ================================================================ */
.str-list {
  gap: 6px !important;
  padding: 12px 20px !important;
}

.str-card {
  border-radius: 10px !important;
  transition: border-color 120ms ease-out, box-shadow 120ms ease-out, background 120ms ease-out !important;
  box-shadow: var(--sh-card) !important;
}

.str-card:hover {
  border-color: rgba(232,164,39,0.35) !important;
  background: var(--surface2) !important;
  box-shadow: var(--sh-hover) !important;
}

.str-card-hdr {
  padding: 12px 16px 10px !important;
  align-items: flex-start !important;
}

/* Primary: building name — largest, clearest element */
.str-card-naziv {
  font-size: 13.5px !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  line-height: 1.35 !important;
  color: var(--text) !important;
  margin-bottom: 2px !important;
}

/* Secondary: address + MZ — readable but background */
.str-card-meta {
  font-size: 11.5px !important;
  color: var(--muted) !important;
  letter-spacing: 0.01em !important;
  line-height: 1.4 !important;
  margin-bottom: 4px !important;
}

/* Stats column (stanova/garaža counts on right side) */
.str-card-counts {
  gap: 10px !important;
  align-items: flex-start !important;
  padding-top: 2px !important;
}

.str-count-val {
  font-size: 15px !important;
  font-weight: 700 !important;
  font-variant-numeric: tabular-nums !important;
  color: var(--text) !important;
  line-height: 1.1 !important;
}

.str-count-lbl {
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  color: var(--muted) !important;
  text-transform: uppercase !important;
}

.str-count-m2s {
  font-size: 9px !important;
  color: var(--muted) !important;
  font-variant-numeric: tabular-nums !important;
}

/* Inline "Top 10" badge: neutralize hardcoded #0066FF */
.badge[style*="0066FF"] {
  background: rgba(232,164,39,0.08) !important;
  color: var(--accent) !important;
  border-color: rgba(232,164,39,0.22) !important;
}

/* Action buttons row (RGZ, eKAT, Računi, Detalji) */
.pl, a.pl {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  border-radius: 5px !important;
  transition: background 120ms ease-out, color 120ms ease-out !important;
}

/* Expanded card rows */
.str-r {
  border-top: 1px solid var(--border) !important;
  padding: 10px 16px !important;
}

.str-r-meta {
  font-size: 11px !important;
  color: var(--muted) !important;
  letter-spacing: 0.01em !important;
}

/* No-data card state */
.str-no-data {
  font-size: 11px !important;
  color: var(--muted) !important;
  font-style: italic !important;
}

/* Tabbar (Zgrade | Grafici | Vlasnici | Računi) */
.str-tabbar {
  padding: 6px 20px 0 !important;
  gap: 3px !important;
}

.str-tab {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  padding: 6px 14px !important;
  transition: color 120ms ease-out, border-color 120ms ease-out !important;
}

.str-tab.active {
  letter-spacing: 0 !important;
}

/* ================================================================
   BADGE SYSTEM — 3 semantic states
   Green = licensed/professional (OK)
   Red   = revoked/problem
   Amber = update/important
   Gray  = neutral metadata
   ================================================================ */
/* Professional/PKS licensed */
.bp, .bpks {
  background: rgba(52,199,89,0.08) !important;
  color: #34c759 !important;
  border-color: rgba(52,199,89,0.22) !important;
}
/* Domestic manager — blue (same semantic tier as PROF, different type) */
.bd {
  background: rgba(64,156,255,0.08) !important;
  color: #409cff !important;
  border-color: rgba(64,156,255,0.25) !important;
}
/* PKS revoked */
.bpks-obr {
  background: rgba(255,69,58,0.08) !important;
  color: #ff453a !important;
  border-color: rgba(255,69,58,0.22) !important;
}
/* Update/changed — amber */
.bu {
  background: rgba(232,164,39,0.08) !important;
  color: var(--accent) !important;
  border-color: rgba(232,164,39,0.22) !important;
}
/* Neutral */
.bn {
  background: transparent !important;
  color: var(--muted) !important;
  border-color: var(--border) !important;
}

/* ================================================================
   DATA TYPOGRAPHY — hierarchy
   Primary: building name, manager = high contrast
   Secondary: metadata, dates, MZ = muted
   ================================================================ */
.cn {
  font-size: 13.5px !important;
  font-weight: 700 !important;
  color: var(--text) !important;
  letter-spacing: -0.01em !important;
}
.cu {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--accent) !important;
}
.ca2 {
  font-size: 11.5px !important;
  color: var(--muted) !important;
}
/* Katastar tags — subtle */
.ck-stan { background: rgba(80,120,180,0.07) !important; color: #6ea8d6 !important; border-color: rgba(80,120,180,0.18) !important; }
.ck-gar  { background: transparent !important; color: var(--muted) !important; border-color: var(--border) !important; }
.ck-pos  { background: rgba(232,164,39,0.07) !important; color: var(--accent) !important; border-color: rgba(232,164,39,0.18) !important; }
.ck-m2   { background: transparent !important; color: var(--muted) !important; border-color: var(--border) !important; }

/* Avatar colors — match new badge system */
.avp { background: rgba(52,199,89,0.12) !important; color: #34c759 !important; }
.avd { background: rgba(125,136,150,0.12) !important; color: var(--muted) !important; }

/* TOP badge — keep accent, it's meaningful */
.badge.btop { background: rgba(232,164,39,0.12) !important; color: var(--accent) !important; border-color: rgba(232,164,39,0.25) !important; }

/* ================================================================
   DRAMATIC CARD REDESIGN — 3-zone layout
   sc-top: building identity (name + address)
   sc-mid: manager (left) | stats (right)
   sc-bar: action toolbar
   ================================================================ */

/* Disable old card inner padding — new zones handle it */
.str-card .str-card-hdr { display: none !important; }

/* ─── TOP ZONE ─── */
.sc-top {
  padding: 11px 15px 9px;
  border-bottom: 1px solid var(--border);
}

.sc-name {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.3;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}

.sc-addr {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 11px;
  color: var(--muted);
  margin-top: 3px;
  line-height: 1.4;
  letter-spacing: 0.01em;
}

.sc-mz-tag {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.01em;
  /* color set inline from MZ_COL map */
}

.sc-ps-btn {
  font-size: 10px !important;
  font-weight: 700 !important;
  padding: 2px 8px !important;
  border-radius: 10px !important;
  cursor: pointer;
}

/* ─── MID ZONE ─── */
.sc-mid {
  display: flex;
  gap: 10px;
  padding: 9px 15px 7px;
  align-items: flex-start;
}

.sc-left {
  flex: 1;
  min-width: 0;
}

/* Manager name + badges in one flex row */
.sc-uprav-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
}

/* Building-level badges (spratnost, vlasnik, etc.) — second row */
.sc-bldg-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px solid rgba(255,255,255,0.04);
}

.sc-upravnik {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: -0.01em;
  line-height: 1.3;
  flex-shrink: 0;
}

.sc-meta {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 4px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 9.5px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.sc-meta-lbl {
  font-weight: 700;
  color: var(--text);
  opacity: 0.65;
  font-size: 9px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.sc-kat-lbl {
  font-size: 8.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 2px 7px;
  border-radius: 4px;
  border: 1px solid;
  white-space: nowrap;
  margin-left: auto;
  flex-shrink: 0;
}

/* ─── STATS ROW (right side of mid — horizontal) ─── */
.sc-stats {
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: flex-start;
  flex-shrink: 0;
  padding-top: 2px;
}

.sc-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  min-width: 30px;
}

.sc-sv {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.035em;
  color: var(--text);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  user-select: text;
  cursor: text;
}

.sc-sv-m2 {
  font-size: 13px !important;
  letter-spacing: -0.02em !important;
}

.sc-sl {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 8px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1.2;
}

.sc-sm {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 11px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
  white-space: nowrap;
  margin-top: 2px;
  user-select: text;
  cursor: text;
}

/* ─── TOOLBAR ─── */
.sc-bar {
  display: flex;
  gap: 5px;
  padding: 7px 12px 9px;
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
  align-items: center;
  background: rgba(0,0,0,0.12);
  border-radius: 0 0 10px 10px;
}

.sc-tool {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 10.5px;
  font-weight: 600;
  padding: 4px 9px;
  border-radius: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--muted);
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  line-height: 1.2;
  transition: background 100ms ease-out, color 100ms ease-out, border-color 100ms ease-out,
              transform 80ms ease-out;
  touch-action: manipulation;
  white-space: nowrap;
}

@media (hover: hover) and (pointer: fine) {
  .sc-tool:hover {
    background: rgba(232,164,39,0.08);
    border-color: rgba(232,164,39,0.3);
    color: var(--accent);
  }
}

.sc-tool:active {
  transform: scale(0.94);
  transition-duration: 60ms;
}

.sc-pin {
  padding: 4px 7px;
  color: var(--muted);
}

/* Pin button — absolute top-right of card */
.sc-pin-abs {
  position: absolute;
  top: 9px;
  right: 11px;
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 2px 3px;
  z-index: 2;
  opacity: 0.5;
  transition: opacity 120ms ease-out, transform 80ms ease-out;
}

@media (hover: hover) and (pointer: fine) {
  .sc-pin-abs:hover { opacity: 1; }
}

.sc-pin-abs:active { transform: scale(0.88); transition-duration: 60ms; }

.sc-kat {
  color: #5b9bd5;
  border-color: rgba(91,155,213,0.25);
  background: rgba(91,155,213,0.06);
}

.sc-par {
  color: #2ec4b6;
  border-color: rgba(46,196,182,0.25);
  background: rgba(46,196,182,0.06);
}

.sc-exp {
  margin-left: auto;
  color: var(--muted);
}

.sc-tool.sc-open {
  background: rgba(232,164,39,0.08);
  border-color: rgba(232,164,39,0.3);
  color: var(--accent);
}

.sc-tool.sc-blok {
  border-color: rgba(255,69,58,0.3);
  color: #ff453a;
  background: rgba(255,69,58,0.06);
}

.sc-nodata {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 10.5px;
  color: var(--muted);
  font-style: italic;
  align-self: center;
}

/* Light mode adjustments */
:root.light .sc-bar {
  background: rgba(0,0,0,0.025);
}

:root.light .sc-meta {
  border-top-color: rgba(0,0,0,0.06);
}

:root.light .sc-tool {
  background: var(--surface2);
}