/* ==============================================
   GLOBAL LAYOUT
   ============================================== */
:root{
  /* ------------------------------------------------
     Z-INDEX SCALE
     Layering order (lowest → highest):
       --z-base      :   1  – normal stacked content
       --z-overlay   :  40  – page overlays / backdrops (below sidebar)
       --z-dropdown  : 100  – dropdowns, tooltips
       --z-sidebar   : 200  – sidebar / navigation
       --z-modal     : 2000 – modal dialogs
       --z-toast     : 3000 – toast / snackbar notifications
     ------------------------------------------------ */
  --z-base: 1;
  --z-overlay: 40;
  --z-dropdown: 100;
  --z-sidebar: 200;
  --z-modal: 2000;
  --z-toast: 3000;

  --bg-url: url("bg.png");
  /* image-set: WebP served to supporting browsers, PNG fallback for others.
     bg.webp must be generated via:  python3 scripts/optimize-images.py     */
  --bg-url: image-set(url("bg.webp") type("image/webp"), url("bg.png") type("image/png"));

  --sidebar-w: min(340px, 50vw);
  --edge-w: 0px;

  --main-pad: 18px;

  --ink:#0f172a;
  --muted:rgba(15,23,42,.65);
  --glass:rgba(241,245,249,.78); /* manje belo */
  --border:rgba(15,23,42,.14);
  --shadow:0 18px 40px rgba(2,6,23,.10);

  --side1:rgba(10,35,56,.92);
  --side2:rgba(6,24,40,.92);

  --sidebar-top-offset: 72px; /* menjaj po potrebi */

  --fin-ctrl-h: 36px;
  --fin-ctrl-font: 13px;
  --fin-ctrl-pad-y: 6px;
  --fin-ctrl-pad-x: 10px;
}
@media(min-width:900px){
  :root{
    --main-pad: 52px;
    --sidebar-w: 280px; /* ✅ desktop uži sidebar */
  }
}

@media(min-width:600px) and (max-width:899px){
  :root{
    --main-pad: 32px;
  }
}

*{margin:0;padding:0;box-sizing:border-box;font-family:"Inter",system-ui,Arial,sans-serif}

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  touch-action: manipulation;
  -webkit-text-size-adjust: 100%;
}

body{
  min-height:100dvh;
  background: var(--bg-url) center/cover no-repeat fixed;
  color: var(--ink);
  overflow-x: hidden;
  overscroll-behavior-y: none;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  background: rgba(255,255,255,.22);
  backdrop-filter: blur(1.4px);
  filter: contrast(1.35) saturate(1.25);
  z-index:-2;
  pointer-events:none;
}

/* ambient blobs */
.ambient{
  position:fixed;
  inset:-20%;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(600px 380px at 18% 22%, rgba(59,130,246,.22), transparent 60%),
    radial-gradient(620px 420px at 82% 26%, rgba(14,165,233,.18), transparent 60%),
    radial-gradient(720px 520px at 50% 84%, rgba(15,23,42,.12), transparent 62%);
  filter: blur(2px);
}

/* overlay + hover zona (PORTAL) */
/* Overlay must remain below sidebar in stacking order to avoid blocking navigation. */
.overlay{
  position:fixed; inset:0;
  background:rgba(2,6,23,.25);
  opacity:0; pointer-events:none;
  transition:.2s;
  z-index:var(--z-overlay);
}
.overlay.show{opacity:1;pointer-events:auto}
.edgeHotspot{
  position:fixed; left:0; top:0;
  width:var(--edge-w); height:100vh;
  z-index:var(--z-overlay);
  pointer-events:none;
}


.main{ padding:0 var(--main-pad) max(22px, calc(22px + env(safe-area-inset-bottom, 0px))); }
.contentWrap{ padding-top:calc(86px + 14px); }
/* ===== GLOBAL OFFSET ISPOD SIDEBARA ===== */
.contentWrap{
  padding-top: var(--sidebar-top-offset);
}

/* pages switch */
.page{ display:none; }
.page.active{ display:block; }

/* mode switching */
body.mode-login #portalScreen,
body.mode-login #buildingSelectScreen{display:none;}
body.mode-buildingSelect #loginScreen,
body.mode-buildingSelect #portalScreen{display:none;}
body.mode-portal #loginScreen,
body.mode-portal #buildingSelectScreen{display:none;}
body.mode-portal #portalScreen{display:block;}

.hidden{ display:none; }

body.noScroll{
  overflow:hidden;
}

/* iOS: spreči auto-zoom kad fokusiraš input */
input, select, textarea{
  font-size:16px;
}

/* ==============================================
   HEADER
   ============================================== */
/* ===== SIDEBAR LOGOUT ===== */
.nav .logoutItem{
  margin-top: auto;
  background: rgba(220, 38, 38, .12);
  border: 1px solid rgba(220, 38, 38, .45);
  color: #fecaca;
  font-weight: 900;
  letter-spacing: .04em;
  text-align: center;
}

.nav .logoutItem:hover{
  background: rgba(220, 38, 38, .22);
  box-shadow: 0 0 0 4px rgba(220, 38, 38, .18);
}

/* TOP RIGHT */
.topRightBar{
  position:absolute;
  top:10px;
  right:var(--main-pad);

  /* ✅ više ne razvlači preko cele stranice */
  left:auto;
  width:max-content;
  max-width: calc(100vw - var(--main-pad) - 12px);

  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:12px;
  z-index:calc(var(--z-sidebar) + 5);

  pointer-events:auto;
}

/* safe-area (iPhone notch) */
@supports (top: env(safe-area-inset-top)){
  .topRightBar{
    top: calc(10px + env(safe-area-inset-top));
    right: calc(var(--main-pad) + env(safe-area-inset-right));
    left: auto;
  }
}

/* SLOT: Promeni zgradu */
#topRightSwitchSlot{
  pointer-events:auto;
  display:flex;
  align-items:center;
  flex:0 0 auto;
}

/* SLOT: ID+adresa + pretraga + stanje */
#topRightHeaderSlot{
  pointer-events:auto;
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}

/* ID • adresa ne sme da puca u krug */
#topRightHeaderSlot #buildingMetaText{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:260px;
}

/* Pretraga: default 100px (širenje radi JS dok kucaš) */
#topRightHeaderSlot .searchInline{
  width: 100px;
  flex: 0 0 100px;
  min-width: 100px;
  max-width: 100px;
  transition: width .18s ease, flex-basis .18s ease;
  overflow: visible;
}

/* Stanje računa kompaktnije gore */
#topRightHeaderSlot .balanceCard{
  width:240px;
  flex:0 0 auto;
}

/* Malo jače skupljanje na manjim desktopima (ALI zadrži 100px search) */
@media (max-width: 1200px){
  #topRightHeaderSlot #buildingMetaText{ max-width:220px; }

  /* ✅ NE širi pretragu ovde */
  #topRightHeaderSlot .searchInline{
    width: 100px;
    flex: 0 0 100px;
    min-width: 100px;
    max-width: 100px;
  }

  #topRightHeaderSlot .balanceCard{ width:220px; }
}

/* opciono: title/logo neka budu neklikabilni */
.topRightTitle{
  pointer-events:none;
}
.topRightLogo{
  pointer-events:auto;
  cursor:pointer;
}
.topRightLogo:hover{
  background:rgba(255,255,255,.92);
  box-shadow:0 4px 18px rgba(0,0,0,.18);
}
.topRightLogo:focus-visible{
  outline:2px solid var(--accent,#6366f1);
  outline-offset:3px;
}

.topRightTitle{
  text-align:left;
  font-weight:900;
  line-height:1.1;
  display:flex;
  flex-direction:column;
}
.topRightTitle span:not(.brand-e):not(.brand){
  display:block;
  font-size:18px;
}
.role-label{
  font-size:0.8em;
  font-weight:600;
  color:#0f172a;
}
.brand{
  font-family: Inter, system-ui, sans-serif;
  font-weight:700;
  letter-spacing:-0.02em;
  font-size:1.1em;
}
.brand-e{
  color:#2563eb;
  display:inline-block;
  transform:rotate(-8deg);
  font-weight:700;
  font-size:1.3em;
  transform-origin:center;
}
.topRightLogo{
  padding:6px;
  background:rgba(255,255,255,.72);
  border:1px solid var(--border);
  border-radius:22px;
  box-shadow:var(--shadow);
}
.topRightLogo img{
  height:56px;
  width:auto;
  display:block;
  border-radius:16px;
}
@media(min-width:900px){
  .topRightTitle span:not(.brand-e):not(.brand){font-size:22px;}
  .topRightLogo img{height:92px;}
}

/* SIDEBAR */
.sidebar{
  position:fixed; left:0; top:0;
  width:var(--sidebar-w); height:100vh; height:100dvh;
  padding:16px 20px;
  background:linear-gradient(180deg,var(--side1),var(--side2)),var(--bg-url);
  background-size:cover;
  color:#fff;
  box-shadow:18px 0 40px rgba(0,0,0,.28);
  transform:translateX(-100%);
  transition:.2s;
  z-index:var(--z-sidebar);
}
.sidebar.open{transform:translateX(0)}
body:not(.sidebar-open) .sidebar{ filter: brightness(1.20); }
body.sidebar-open .sidebar{ filter:none; }
.sidebar::before{
  content:"";
  position:absolute; inset:0;
  background:rgba(0,0,0,.22);
  backdrop-filter:blur(8px);
}
.sidebar>*{position:relative;z-index:1}
body.role-admin .sidebar{overflow-y:auto;scrollbar-width:thin;}

/* ===== ROLE-STANAR FINANCE DEFENSE-IN-DEPTH (CSS secondary guard) ===== */
/* JS handlers are the primary guards. CSS is a visual fail-safe only.    */
/* body.role-stanar is toggled by applyRoleUI() for ROLE_STANAR sessions. */
body.role-stanar #financeFormWrap      { display: none !important; }
body.role-stanar .finRowActions        { display: none !important; }
body.role-stanar #existingDocsWrap     { display: none !important; }
body.role-stanar #addFinanceBtn        { display: none !important; }
body.role-stanar #entriesImportBtn     { display: none !important; }
body.role-stanar #bankHistoryBtn       { display: none !important; }
/* Additional belt-and-braces using the existing role-manage class */
body:not(.role-manage) #financeFormWrap  { display: none !important; }
body:not(.role-manage) .finRowActions    { display: none !important; }
body:not(.role-manage) #existingDocsWrap { display: none !important; }
/* ===== /ROLE-STANAR FINANCE DEFENSE-IN-DEPTH ===== */


.sidebar .brand{height:92px}
.sidebar .brand h1{font-size:24px;font-weight:900;letter-spacing:.16em}
.sidebar .brand p{font-size:13px;opacity:.78;margin-top:8px}

.nav{margin-top:26px;display:flex;flex-direction:column;gap:12px}
.nav a{
  padding:16px 18px;
  border-radius:18px;
  color:#fff;
  text-decoration:none;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
  font-size:19px;
  font-weight:700;
  display:block;
}
.nav a.active{background:rgba(255,255,255,.14)}

/* Unread badge on the "Poruke" sidebar nav link */
.nav a[data-page="poruke"]{display:flex;align-items:center;justify-content:space-between}
.navMsgBadge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:rgba(239,68,68,.85);
  color:#fff;
  border-radius:10px;
  padding:2px 7px;
  font-size:12px;
  font-weight:800;
  min-width:20px;
  white-space:nowrap;
  flex-shrink:0;
}

  /* ✅ PREMIUM DASHBOARD BUTTON (plavi gradient + glow) */
.operCentarGlow,
.nav a[data-page="dashboard"]{
  position: relative;
  overflow: hidden;

  background: linear-gradient(135deg,
    rgba(59,130,246,.35),
    rgba(14,165,233,.22)
  );
  border: 1px solid rgba(147,197,253,.65);
  box-shadow:
    0 18px 40px rgba(37, 99, 235, .22),
    0 6px 14px rgba(2, 6, 23, .22);

  color: #fff;
  font-weight: 900;
  letter-spacing: .02em;
}

/* ✅ Dashboard (samo plava pozadina + tekst) */
.operCentarGlow::before,
.operCentarGlow::after,
.nav a[data-page="dashboard"]::before,
.nav a[data-page="dashboard"]::after{
  content: none;
  display: none;
}

/* hover efekat */
.operCentarGlow:hover,
.nav a[data-page="dashboard"]:hover{
  transform: translateY(-1px);
  background: linear-gradient(135deg,
    rgba(59,130,246,.45),
    rgba(14,165,233,.30)
  );
  box-shadow:
    0 22px 50px rgba(37, 99, 235, .30),
    0 8px 16px rgba(2, 6, 23, .25);
}

/* active (kada si na dashboardu) */
.operCentarGlow.active,
.nav a[data-page="dashboard"].active{
  background: linear-gradient(135deg,
    rgba(59,130,246,.72),
    rgba(14,165,233,.55)
  );
  border-color: rgba(191,219,254,.95);
  box-shadow:
    0 26px 60px rgba(37, 99, 235, .36),
    0 10px 20px rgba(2, 6, 23, .28);
}

/* ✅ Dashboard tab pill — visual elevation for the primary operational center tab */
.dashTabGlobal.operCentarGlow {
  border: 1.5px solid rgba(0,0,0,0.6);
  box-shadow:
    0 2px 6px rgba(0,0,0,0.18),
    0 0 0 1px rgba(0,0,0,0.08);
  color: #111;
}

.dashTabGlobal.operCentarGlow .navSubLabel {
  color: #333;
  opacity: 1;
}

.dashTabInner {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.dashTabText {
  display: inline-flex;
  align-items: center;
  line-height: 1;
}

.dashTabIcon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  margin-right: 0;
  line-height: 1;
}

.dashTabIcon svg {
  display: block;
  width: 16px;
  height: 16px;
  opacity: 0.95;
  transform: none;
  vertical-align: middle;
  shape-rendering: geometricPrecision;
}


.navSubLabel {
  font-size: 0.55em;
  margin-left: 4px;
  opacity: 1;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.navSubLabelAccent {
  font-size: 0.55em;
  margin-left: 4px;
  font-weight: 500;
  color: #7dbdff;
  opacity: 1;
  letter-spacing: 0.02em;
}

/* hamburger */
.hamburger{
  position:fixed;
  left:max(18px, env(safe-area-inset-left, 18px)); top:max(18px, env(safe-area-inset-top, 18px));
  width:56px; height:56px;
  border-radius:17px;
  background:var(--glass);
  border:1px solid var(--border);
  box-shadow:var(--shadow);
  display:grid; place-items:center;
  cursor:pointer;
  z-index:calc(var(--z-sidebar) + 1);
  user-select:none;
}

/* MAIN */
@media(min-width:900px){
  .contentWrap{padding-top:calc(120px + 14px);}
}
.pageHeader{
  display:flex;
  justify-content:space-between;
  gap:14px;
  margin-bottom:18px;
}
.leftInfo{max-width:52vw}
.meta{
  font-size:18px;
  color:rgba(15,23,42,.62);
  font-weight:600;
  line-height:1.28;
}
.rightCol{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:10px;
}

.topMini{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
  justify-content:flex-end;
}

/* top header: ID+adresa + Izmeni + Promeni zgradu */
.topBuildingMeta{
  display:flex;
  align-items:center;
  gap:8px;
}

body.sidebar-open .hamburger{
  opacity: 0;
  pointer-events: none;
}

/* Header (meta + pretraga + stanje) samo na Početnoj */
body.mode-portal .pageHeader{ 
  display: none; 
}

body.mode-portal.page-home .pageHeader{ 
  display: flex; 
}

  /* Logo smanjen za ~40% */
.topRightLogo img{
  height: 34px;   /* 56px → 34px */
}

/* desktop */
@media (min-width: 900px){
  .topRightLogo img{
    height: 55px; /* 92px → 55px */
  }
}

  /* Tekst smanjen proporcionalno sa logom (−40%) */
.topRightTitle span:not(.brand-e):not(.brand){
  font-size: 11px;   /* 18px → 11px */
}

/* desktop */
@media (min-width: 900px){
  .topRightTitle span:not(.brand-e):not(.brand){
    font-size: 13px; /* 22px → 13px */
  }
}

/* SIDEBAR – ZLATNA SREDINA (desktop) */
#nav a{
  font-size: 14px;
  padding: 11px 14px;     /* više “vazduha” */
  border-radius: 14px;
  margin: 2px 0;          /* veći razmak između stavki */
  line-height: 1.15;
}

/* ako imaš ikonicu/kvadrat u linku */
#nav a .navIcon,
#nav a .iconBox{
  width: 32px;
  height: 32px;
  border-radius: 10px;
}

/* ako je kvadrat urađen preko ::before pseudo-elementa */
#nav a::before{
  width: 32px;
  height: 32px;
  border-radius: 10px;
  margin-right: 10px;
}

/* Odjava da ne bude “previše” odvojena */
#nav a.logoutItem{
  margin-top: 10px;
}

/* Promeni zgradu = isti "glass" stil kao logo */
#topRightSwitchSlot #switchBuildingBtn{
  display:inline-flex;         /* ✅ default vidljiv (kad JS pusti) */
  align-items:center;
  justify-content:center;

  pointer-events:auto;
  cursor:pointer;

  padding: 12px 16px;
  border-radius: 22px;
  background: rgba(255,255,255,.72);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);

  font-weight: 900;
  letter-spacing: .02em;
  white-space: nowrap;
}

#topRightSwitchSlot #switchBuildingBtn:hover{
  transform: translateY(-1px);
}

/* u topRightBar pretraga da bude šira */
#topRightHeaderSlot .searchInline{
  width: min(520px, 42vw);
}

/* stanje računa kompaktnije gore */
#topRightHeaderSlot .balanceCard{
  width: 240px;
}

/* na manjim širinama nek se lepše skuplja */
@media (max-width: 980px){
  #topRightHeaderSlot .searchInline{ width: min(380px, 38vw); }
  #topRightHeaderSlot .balanceCard{ width: 210px; }
}

/* ✅ LOGIN + BUILDING SELECT: sakrij gornji red (pretraga/meta/promeni zgradu) */
body.mode-login #topRightSwitchSlot,
body.mode-login #topRightHeaderSlot,
body.mode-buildingSelect #topRightSwitchSlot,
body.mode-buildingSelect #topRightHeaderSlot{
  display:none !important;
}

/* ==============================================
   BUTTONS
   ============================================== */
.eyeBtn{
  position:absolute;
  right:10px;
  top:50%;
  transform:translateY(-50%);
  border:none;
  background:rgba(15,23,42,.06);
  border:1px solid rgba(15,23,42,.14);
  border-radius:14px;
  padding:8px 10px;
  cursor:pointer;
  font-weight:900;
  user-select:none;
}

.btnRow{ display:flex; gap:10px; margin-top:14px; }
.btn{
   flex:1;
  border:none;
  cursor:pointer;
  border-radius:18px;
  padding:14px 16px;
  font-weight:900;
  letter-spacing:.02em;
  transition:.15s;
}
.btnGhost{
  background:rgba(255,255,255,.72);
  border:1px solid rgba(15,23,42,.14);
  box-shadow:var(--shadow);
  color:rgba(15,23,42,.92);
}
/* =========================
   ENTERPRISE BUTTON VARIANTS
   (no ID overrides)
========================= */

.btnOutlinePrimary{
  background: transparent;
  color: #2563eb;
  border: 1px solid #2563eb;
}

.btnOutlinePrimary:hover{
  background: #2563eb;
  color: #fff;
}

.btnPrimary{
  background: #0f172a;
  color: #fff;
  border: 1px solid #0f172a;
  box-shadow: 0 18px 36px rgba(2,6,23,.18);
}

.btnPrimary:hover{
  transform: translateY(-1px);
  filter: brightness(0.95);
}

.btnDanger{
  background: transparent;
  color: #dc2626;
  border: 1px solid #dc2626;
}

.btnDanger:hover{
  background: #dc2626;
  color: #fff;
}

.btnOutlineDanger{
  background: transparent;
  color: #dc2626;
  border: 1px solid #dc2626;
}

.btnOutlineDanger:hover{
  background: #dc2626;
  color: #fff;
}

.btnSecondary{
  background: rgba(255,255,255,.72);
  color: rgba(15,23,42,.92);
  border: 1px solid rgba(15,23,42,.14);
}

.btnSecondary:hover{
  filter: brightness(0.98);
}

.pill{
  border-radius:999px;
  padding:10px 12px;
  background:rgba(255,255,255,.72);
  border:1px solid rgba(15,23,42,.14);
  box-shadow:var(--shadow);
  font-weight:900;
  font-size:13px;
  user-select:none;
}
.pillBtn{ cursor:pointer; }

/* badge */
.badge{
  display:inline-block;
  padding:6px 10px;
  border-radius:999px;
  font-weight:900;
  font-size:12px;
  border:1px solid rgba(15,23,42,.14);
  background:rgba(255,255,255,.72);
  box-shadow:var(--shadow);
}

.mpBtn{
  padding:12px 14px;
  border-radius:16px;
  font-weight:900;
  white-space:nowrap;
}

#addFinanceBtn,
#addBoardBtn{
  background: transparent;
  color: #2563eb;
  border: 1px solid #2563eb;
}

#addFinanceBtn:hover,
#addBoardBtn:hover{
  background: #2563eb;
  color: #fff;
}

.unreadBadge{
  flex:0 0 auto;
  padding:6px 10px;
  border-radius:999px;
  font-weight:900;
  font-size:12px;
  letter-spacing:.06em;
  background: rgba(59,130,246,.16);
  border: 1px solid rgba(59,130,246,.45);
  color:#1d4ed8;
}

.finRowActions .btn{
  padding:8px 14px;
  border-radius:999px;
}

.finActBtn{
  padding:8px 12px;
  border-radius:12px;
  border:1px solid rgba(15,23,42,.18);
  background:rgba(248,250,252,.92);
  color:#0f172a;
  font-weight:800;
  letter-spacing:.2px;
  cursor:pointer;
  transition:transform .08s ease, background .12s ease;
  line-height:1;
}

.finActBtn:hover{ transform:translateY(-1px); }
.finActBtn:active{ transform:translateY(0px); }

.finActBtn.danger{
  border-color: rgba(239,68,68,.35);
  color:#b91c1c;
}

/* mobile: da ne bude tesno */
@media (max-width: 640px){
  .finRowTop{
    flex-direction:column;
    align-items:stretch;
  }
  .finRowActions{
    justify-content:flex-end;
  }
}

.cDanger{
  background: rgba(220,38,38,.92) !important;
  color:#fff !important;
}

.cDanger:hover{
  transform: translateY(-1px);
}

.lawPdfLink{
  padding:6px 12px;
  border-radius:10px;
  background:#eef2ff;
  color:#1e3a8a;
  font-weight:600;
  text-decoration:none;
}

.lawPdfLink:hover{
  background:#e0e7ff;
}

/* ===== LEGAL DOCUMENT CARDS ===== */
.legalDocList{
  list-style: none;
  padding: 0;
  margin: 0;
}

.legalDocItem{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(15,23,42,.08);
}

.legalDocItem:last-child{
  border-bottom: none;
}

.legalDocTitle{
  flex: 1;
  font-weight: 600;
  font-size: 15px;
  color: rgba(15,23,42,.9);
}

.legalDocUnavailable{
  font-size: 13px;
  color: rgba(15,23,42,.4);
  font-style: italic;
}

.legalAdminControls{
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* ===== LEGAL DOCUMENT INFO / META / ACTIONS (dynamic list) ===== */
.legalDocInfo{
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.legalDocDesc{
  font-size: 13px;
  color: rgba(15,23,42,.65);
}

.legalDocMeta{
  font-size: 12px;
  color: rgba(15,23,42,.45);
}

.legalDocActions{
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  flex-shrink: 0;
}

.adminNavBtn{
  margin-left:auto;
  padding:6px 10px;
  border-radius:10px;
  border:1px solid rgba(15,23,42,.14);
  background:rgba(248,250,252,.92);
  cursor:pointer;
  font-weight:700;
  font-size:12px;
}

/* ===== ADMIN DROPDOWN (PRO LOOK) ===== */
.adminTopWrap{
  position: relative;
  display: inline-block;
  width: 100%;
}

.adminToggle{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:14px;
  background: rgba(255,255,255,.65);
  border: 1px solid rgba(15,23,42,.14);
  backdrop-filter: blur(10px);
  cursor:pointer;
  user-select:none;
}

#adminToggleLabel{
  font-weight:900;
}

#adminActiveBuilding{
  font-weight:700;
  opacity:.8;
}

.adminArrow{
  margin-left:auto;
  font-size:16px;
  padding:6px 10px;
  border-radius:12px;
  border:1px solid rgba(15,23,42,.12);
  background: rgba(255,255,255,.6);
}

/* dropdown panel */
.adminMenu{
  position:absolute;
  top: calc(100% + 8px);
  left: 0;
  width: min(520px, 100%);
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(15,23,42,.14);
  border-radius: 14px;
  box-shadow: 0 18px 40px rgba(2,6,23,.14);
  padding: 8px;
  z-index: var(--z-dropdown);
}

.adminMenuItem{
  width: 100%;
  display: block;
  text-align: left;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid transparent;
  background: transparent;
  cursor: pointer;
  font-weight: 700;
}

.adminMenuItem:hover{
  background: rgba(15,23,42,.06);
  border-color: rgba(15,23,42,.10);
}


/* ==============================================
   CARDS
   ============================================== */
/* SCREENS */
.loginWrap{
  min-height:100vh;
  min-height:100dvh;
  display:grid;
  place-items:center;
  padding:24px var(--main-pad);
}

.loginCard{
  width:min(560px, 100%);
  border-radius:30px;
  background:rgba(255,255,255,.90);
  border:1px solid rgba(15,23,42,.14);
  box-shadow:var(--shadow);
  padding:22px;
  position:relative;
  overflow:hidden;
}
.loginCard::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(520px 320px at 22% 18%, rgba(59,130,246,.14), transparent 60%),
    radial-gradient(520px 320px at 86% 18%, rgba(14,165,233,.10), transparent 60%);
  pointer-events:none;
}
.loginInner{position:relative; z-index:1;}

.loginHead{
  padding-bottom:12px;
  border-bottom:1px solid rgba(15,23,42,.10);
}
.formTitle{
  margin:0;
  font-weight:900;
  font-size:26px;
  letter-spacing:.02em;
}
.formSub{
  margin-top:12px;
  color:var(--muted);
  font-weight:700;
  font-size:13px;
  line-height:1.4;
}

.field{ margin-top:12px; }
.field label{
  display:block;
  font-size:12px;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
  opacity:.7;
  margin-bottom:6px;
}
.inputWrap{ position:relative; }
.field input, .field select, .field textarea{
  width:100%;
  border-radius:18px;
  border:1px solid rgba(15,23,42,.14);
  background:rgba(255,255,255,.94);
  padding:14px 14px;
  font-size:15px;
  outline:none;
  transition:.15s;
}
.field textarea{min-height:86px; resize:vertical;}
#duesStartMonth{width:100%;max-width:100%;min-width:0;box-sizing:border-box;}
.field input:focus, .field select:focus, .field textarea:focus{
  border-color:rgba(15,23,42,.28);
  box-shadow:0 0 0 5px rgba(15,23,42,.06);
}
/* Read-only auto-generated code preview */
.field input.codePreviewReadonly{
  background:#f5f5f5;
  color:#666;
  cursor:default;
}

.row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:12px;
  flex-wrap:wrap;
}
.check{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:800;
  color:rgba(15,23,42,.75);
  font-size:13px;
}
.check input{width:18px;height:18px}

.error{
  margin-top:10px;
  font-weight:900;
  color:#9f1239;
  display:none;
}
.successMsg{
  margin-top:10px;
  font-weight:600;
  color:#15803d;
  padding:6px 0;
  display:none;
}
.miniHint{
  margin-top:10px;
  font-weight:800;
  color:rgba(15,23,42,.62);
  font-size:12px;
  line-height:1.4;
}

.searchInline,
.balanceCard{
  width:clamp(180px,42vw,300px);
  border-radius:18px;
  background:var(--glass);
  border:1px solid var(--border);
  box-shadow:var(--shadow);
}

.searchInline{ padding:10px 14px; }
.searchInline input{
  border:none;
  background:transparent;
  width:100%;
  outline:none;
  font-size:14px;
}

/* stanje */
.balanceCard{
  padding:12px;
  text-align:right;
}
.balanceCard .label{
  font-size:12px;
  font-weight:700;
  display:block;
  margin-bottom:6px;
}
.balanceAmount{ white-space:nowrap; }
.balanceAmount .value{
  font-size:20px;
  font-weight:900;
  letter-spacing:0.2px;
}
.balanceAmount .currency{
  font-size:11px;
  font-weight:700;
  opacity:.55;
  margin-left:4px;
}

@media(min-width:900px){
  .meta{font-size:26px;}
  .balanceAmount .value{font-size:25px;}
  .balanceAmount .currency{font-size:13px;}
  .balanceCard{padding:10px;}
}
/* MOBILE FIX – veliki iznosi da ne izlaze iz kartice */
@media (max-width: 520px){
  .balanceCard{ overflow:hidden; }
  .balanceAmount{ white-space: normal; }
  .balanceAmount .value{ font-size: 18px; }
}

/* reset <button> defaults so balanceCard looks identical to the original <div> */
button.balanceCard{
  font:inherit;
  text-align:inherit;
  cursor:default;
}

/* tenant interactive state – added via JS (bindBalanceCardOnce) */
button.balanceCard.stanjeRacunaInteractive{
  cursor:pointer;
}
button.balanceCard.stanjeRacunaInteractive:hover{
  opacity:.88;
  box-shadow:var(--shadow),0 0 0 2px rgba(99,102,241,.18);
}
button.balanceCard.stanjeRacunaInteractive:focus-visible{
  outline:2px solid var(--accent,#6366f1);
  outline-offset:2px;
}

/* cards */
.card{
  background:rgba(248,250,252,.86);
  border-radius:26px;
  padding:22px;
  box-shadow:var(--shadow);
}
.card h3{
  text-transform:uppercase;
  letter-spacing:.16em;
  font-size:22px;
  font-weight:900;
}
@media(min-width:900px){
  .card{padding:28px;}
  .card h3{font-size:26px;}
}

.boardList{
  margin-top:14px;
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.boardList li{
  background:rgba(15,23,42,.06);
  border:1px solid rgba(15,23,42,.10);
  padding:12px 14px;
  border-radius:16px;
  font-weight:700;
}

.smallText{
  margin-top:10px;
  font-weight:700;
  color:rgba(15,23,42,.65);
  line-height:1.45;
}

.fRow{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:flex-start;
}
.fRow .grow{flex:1; min-width:220px;}
.fRow .half{flex:1; min-width:220px;}

/* ===== Two-Column Form Pattern ===== */
.twoColForm{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  align-items:end;
}

.twoColForm .field{
  margin:0;
}

.twoColForm .field > label{
  display:block;
  line-height:1.2;
  min-height:calc(1.2em * 2);
}

.twoColForm .field input,
.twoColForm .field select,
.twoColForm .field textarea{
  width:100%;
}

@media(max-width:520px){
  .twoColForm{
    grid-template-columns:1fr;
  }
}

/* files list */
.fileList{
  margin-top:10px;
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.fileList li{
  background:rgba(15,23,42,.06);
  border:1px solid rgba(15,23,42,.10);
  padding:10px 12px;
  border-radius:14px;
  font-weight:800;
  display:flex;
  justify-content:space-between;
  gap:10px;
}
.fileList small{opacity:.7; font-weight:900;}

/* Global search dropdown */
.searchResults{
  position:absolute;
  left:10px;
  right:10px;
  top:calc(100% + 10px);
  z-index: var(--z-dropdown);
  border-radius:18px;
  background:rgba(255,255,255,.92);
  border:1px solid rgba(15,23,42,.14);
  box-shadow:0 18px 40px rgba(2,6,23,.12);
  overflow:hidden;
  backdrop-filter: blur(6px);
}
.searchResults .srHead{
  padding:10px 12px;
  font-weight:900;
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(15,23,42,.70);
  background:rgba(15,23,42,.04);
  border-bottom:1px solid rgba(15,23,42,.10);
}
.searchResults .srItem{
  padding:10px 12px;
  cursor:pointer;
  display:flex;
  gap:10px;
  align-items:flex-start;
  border-bottom:1px solid rgba(15,23,42,.08);
}
.searchResults .srItem:last-child{ border-bottom:none; }
.searchResults .srItem:hover{ background:rgba(15,23,42,.05); }
.searchResults .srTag{
  flex:0 0 auto;
  font-weight:900;
  font-size:11px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(15,23,42,.14);
  background:rgba(255,255,255,.72);
  color:rgba(15,23,42,.85);
  white-space:nowrap;
}
.searchResults .srText{
  flex:1;
  font-weight:800;
  color:rgba(15,23,42,.88);
  line-height:1.25;
  font-size:13px;
}
.searchResults .srSub{
  margin-top:4px;
  font-weight:700;
  color:rgba(15,23,42,.60);
  font-size:12px;
}

.searchHitFlash{
  outline:3px solid rgba(59,130,246,.55);
  box-shadow:0 0 0 6px rgba(59,130,246,.14);
  transition:.2s;
  animation: srFlash .9s ease-in-out 1;
}
@keyframes srFlash{
  0%{ transform:scale(1); }
  50%{ transform:scale(1.01); }
  100%{ transform:scale(1); }
}

/* building select list */
.pickList{
  margin-top:14px;
  display:flex;
  flex-direction:column;
  gap:10px;
}

/* building select: search */
.pickSearch{
  width:100%;
  margin-top:12px;
}

.pickSearch input{
  width:100%;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid rgba(15,23,42,.14);
  background:rgba(255,255,255,.92);
  box-shadow:var(--shadow);
  outline:none;
  font-weight:800;
}
.pickSearch input:focus{
  border-color: rgba(15,23,42,.28);
}

.pickEmpty{
  padding:12px 14px;
  border-radius:14px;
  background:rgba(255,255,255,.75);
  border:1px solid rgba(15,23,42,.12);
  font-weight:800;
}

.pickBtn{
  width:100%;
  text-align:left;
  border:none;
  cursor:pointer;
  border-radius:18px;
  padding:14px 14px;
  background:rgba(255,255,255,.92);
  border:1px solid rgba(15,23,42,.14);
  box-shadow:var(--shadow);
}
.pickBtn .t{font-weight:900;}
.pickBtn .s{margin-top:4px; font-weight:800; color:rgba(15,23,42,.62); font-size:12px; line-height:1.3;}

  /* Finansije: stavke koje imaju uploadovane dokumente -> PLAVO */
/* FINANSIJE: samo PDF fajlovi (donji deo) da budu PLAVI */
#financeList .fileList li,
#financeList .fileList li span,
#financeList .fileList li small{
  color:#1d4ed8;
  font-weight:900;
}

  /* ====== DARKEN WHITE CARDS (soft, for eyes) ====== */
/* sve glavne kartice */
.card{
  background: rgba(15,23,42,.18) !important;
  border: 1px solid rgba(15,23,42,.22) !important;
}

/* login + building select kartice */
.loginCard{
  background: rgba(241,245,249,.82) !important;
  border: 1px solid rgba(15,23,42,.18) !important;
}

/* search, balance, hamburger, pill */
.searchInline,
.balanceCard{
  background: rgba(241,245,249,.72) !important;
  border: 1px solid rgba(15,23,42,.18) !important;
}

/* pill (Korisnik/Zgrada/Odjava) */
.pill{
  background: rgba(241,245,249,.70) !important;
  border: 1px solid rgba(15,23,42,.18) !important;
}

/* dropdown rezultati pretrage */
.searchResults{
  background: rgba(241,245,249,.92) !important;
  border: 1px solid rgba(15,23,42,.18) !important;
}

/* izbor zgrade */
.pickBtn{
  background: rgba(241,245,249,.85) !important;
  border: 1px solid rgba(15,23,42,.18) !important;
}

    /* =========================
   CUSTOM MONTH PICKER (SR)
========================= */

.monthPick{
  margin-top:12px;
}

.monthPickRow{
  display:flex;
  gap:10px;
  align-items:flex-end;
  flex-wrap:wrap;
}

.mpLabel{
  display:block;
  font-size:12px;
  font-weight:800;
  color:rgba(15,23,42,.72);
  margin-bottom:8px;
  letter-spacing:.02em;
}

.mpSelect{
  flex:1 1 160px;
  min-width:160px;
  padding:12px 12px;
  border-radius:16px;
  border:1px solid rgba(15,23,42,.18);
  background:rgba(255,255,255,.78);
  color:rgba(15,23,42,.92);
  font-weight:800;
  outline:none;
  box-shadow:0 10px 26px rgba(2,6,23,.06);
}

.mpSelect:focus{
  border-color:rgba(29, 78, 216, .45);
  box-shadow:0 0 0 4px rgba(29, 78, 216, .18);
}



.mpHint{
  margin-top:10px;
  font-size:12px;
  font-weight:800;
  color:rgba(15,23,42,.65);
}


/* ===== Tenant: Finansije -> kartica "Potraživanje SZ" ===== */
.finSZCard{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:2px;

  padding:10px 14px;
  border-radius:16px;
  background: rgba(255,255,255,.50);
  border: 1px solid rgba(15,23,42,.18);
  backdrop-filter: blur(8px);

  cursor:pointer;
  user-select:none;
  transition: transform .12s ease, background .12s ease, box-shadow .12s ease;
}

.finSZCard:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.58);
  box-shadow: 0 10px 22px rgba(2,6,23,.10);
}

.finSZCard:active{ transform: translateY(0); }

.finSZHint{
  font-size:12px;
  font-weight:800;
  opacity:.65;
}


  /* Početno stanje – labela manja i diskretnija */
.openingBalanceLabel{
  font-size: 0.65em;   /* ~35–40% manje od normalnog teksta */
  opacity: .65;
  letter-spacing: .02em;
  margin-bottom: 2px;
}

/* Wrapper za početno stanje */
#openingBalanceView,
#openingBalanceViewAdmin{
  gap: 6px !important;      /* približi elemente */
  align-items: baseline;    /* poravnaj tekst i cifru */
}

/* Sama cifra */
#openingBalanceValue,
#openingBalanceValueAdmin{
  font-size: 1.25em;        /* blago istaknuta */
  padding: 4px 10px;        /* manji “balon” */
}

  /* =========================================================
   POCETNO STANJE – smanjeno dugme "Sačuvaj" (−40%)
   bez promene izgleda + zategnut razmak
   ========================================================= */

#saveOpeningBalanceBtn,
#saveOpeningBalanceBtnAdmin{
  transform: scale(0.9);              /* 40% manje */
  transform-origin: left center;      /* skuplja se ka inputu */
  margin-left: -2px;                  /* zategni razmak */
}

/* opciono: malo zategni ceo red da deluje kompaktnije */
[data-role="upravnik"] .fRow .grow,
[data-role="admin"] .fRow .grow{
  gap: 6px;
}

.finDesc{
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-width: 100%;
}

.userBadge{
  font-weight: 900;
  font-size: 14px;
  letter-spacing: .6px;
  color: #1e40af;
  line-height: 1;
}

  /* FIX: samo skrati DATE input da prati ostale kvadrate */
#fDate{
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

  .lockIcon{
  font-size:16px;
  line-height:1;
  opacity:.7;
  user-select:none;
}

/* zaključano */
.lockIcon.locked::before{
  content:"🔒";
}

/* otključano */
.lockIcon.unlocked::before{
  content:"🔓";
}

/* ✅ Confirm modal (custom) */
.cModal{
  position:fixed;
  inset:0;
  z-index: var(--z-modal);
}

.cModalOverlay{
  position:absolute;
  inset:0;
  background: rgba(2,6,23,.45);
  backdrop-filter: blur(6px);
}

.cModalCard{
  position: absolute;
  left:50%;
  top:50%;
  transform: translate(-50%,-50%);
  width: min(520px, calc(100vw - 28px));
  border-radius: 22px;
  background: rgba(241,245,249,.96);
  border: 1px solid rgba(15,23,42,.18);
  box-shadow: 0 26px 70px rgba(2,6,23,.28);
  padding: 14px;
  max-height: calc(100dvh - 28px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.cModalHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding: 6px 6px 10px 6px;
  border-bottom: 1px solid rgba(15,23,42,.10);
  flex-shrink: 0;
}

.cModalTitle{
  font-weight: 900;
  font-size: 16px;
  letter-spacing: .02em;
}

.cModalX{
  border:none;
  background: rgba(15,23,42,.06);
  border: 1px solid rgba(15,23,42,.14);
  border-radius: 12px;
  padding: 8px 10px;
  cursor:pointer;
  font-weight: 900;
  min-width: 44px;
  min-height: 44px;
}

.cModalBody{
  padding: 12px 6px;
  overflow-y: auto;
  min-height: 0;
  flex: 1 1 auto;
}

.cModalText{
  font-weight: 800;
  color: rgba(15,23,42,.82);
  line-height: 1.35;
}

.cModalActions{
  display:flex;
  gap:10px;
  padding: 0 6px 6px 6px;
  flex-shrink: 0;
  flex-wrap: wrap;
}

.cModalActions .btn{
  flex:1;
}

/* Finansije + Oglasna: smanji “Upravnik” i “Upload limit” (badge-ove u toj info liniji) */
#page-finansije .smallText[data-role="upravnik"] .badge,
#page-oglasna   .smallText[data-role="upravnik"] .badge{
  font-size: 11px;
  padding: 5px 9px;
  opacity: .85;
}

  /* =========================
   STATISTIKA — FINAL
========================= */
.statsGrid{
  margin-top:12px;
  display:grid;
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  gap:12px;
}

.statsCard{
  background: rgba(241,245,249,.85);
  border: 1px solid rgba(15,23,42,.14);
  border-radius: 18px;
  padding: 14px;
  box-shadow: 0 18px 40px rgba(2,6,23,.08);
}

.statsCard h4{
  margin:0 0 10px 0;
  font-size: 15px;
  font-weight: 900;
  color: rgba(15,23,42,.92);
  letter-spacing:.02em;
}

.statsRows{ display:flex; flex-direction:column; gap:8px; }

.statRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(15,23,42,.10);
}

.statRow .k{
  color: rgba(15,23,42,.70);
  font-weight: 700;
  font-size: 13px;
}

.statRow .v{
  color: rgba(15,23,42,.92);
  font-weight: 900;
  font-size: 15px;
}

/* mobilni */
@media (max-width: 640px){
  .statsGrid{ grid-template-columns: 1fr; }
  .statsCard[style*="grid-column"]{ grid-column:auto !important; }
}

/* =================================================
   PROFI LIST ITEM UI (Finansije + Oglasna)
================================================= */

.itemHead{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}

.itemLeft{
  flex:1;
  min-width:0;
}

.itemMeta{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
}
.itemMeta .pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:999px;
  font-weight:900;
  font-size:12px;
  border:1px solid rgba(15,23,42,.14);
  background: rgba(255,255,255,.55);
  color: rgba(15,23,42,.88);
  white-space:nowrap;
}

.itemMeta .pill.type-rashod{
  color:#b91c1c;
  background: rgba(220,38,38,.12);
  border-color: rgba(220,38,38,.30);
}

.itemMeta .pill.type-prihod{
  color:#166534;
  background: rgba(22,163,74,.12);
  border-color: rgba(22,163,74,.28);
}

.itemMeta .pill.pill-infostan{
  color:#0d47a1;
  background: rgba(13,71,161,.10);
  border-color: rgba(13,71,161,.25);
  font-size:.78em;
}

.finIzvodLabel {
  font-weight: 700;
  letter-spacing: 0.5px;
  margin-right: 10px;
  color: rgba(10,18,30,0.85);
}

/* opis */
.itemDesc{
  margin-top:6px;
  font-weight:800;
  color: rgba(15,23,42,.70);
  line-height:1.35;

  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* iznos (price-tag) */
.itemAmount{
  flex:0 0 auto;
  padding:8px 12px;
  border-radius:14px;
  font-weight:900;
  white-space:nowrap;
  border:1px solid rgba(15,23,42,.14);
  background: rgba(255,255,255,.62);
  color: rgba(15,23,42,.92);
}

.itemAmount.rashod{
  border-color: rgba(220,38,38,.25);
}
.itemAmount.prihod{
  border-color: rgba(22,163,74,.22);
}

/* mobile */
@media (max-width: 640px){
  .itemHead{ flex-direction:column; }
  .itemAmount{ align-self:flex-start; }
}

/* ================= VLASNICI STANOVA (PRO UI) ================= */

#ownersPanelWrap {
  display: none !important;
}

.ownersHead{
  display:flex;
  justify-content:space-between;
  gap:16px;
  align-items:flex-end;
  margin: 10px 0 12px;
}

.ownersTitle .hSub{
  margin-top:8px;
  opacity:.75;
  font-size:13px;
  line-height:1.35;
}

.ownersTools{
  display:flex;
  gap:14px;
  align-items:center;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.ownersProgress{
  font-weight:900;
  font-size:13px;
  opacity:.8;
  padding:8px 10px;
  border-radius:12px;
  border:1px solid rgba(15,23,42,.14);
  background: rgba(255,255,255,.55);
}

.ownersSearch input{
  width:min(360px, 70vw);
  height:40px;
  border-radius:14px;
}

.ownersToggle{
  display:flex;
  gap:10px;
  align-items:center;
  user-select:none;
  font-size:13px;
  opacity:.9;
}

.ownersToggle input{
  width:18px;
  height:18px;
}

.ownersList{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:10px;
}

/* jedan red kao "card" */
.ownerRow{
  display:flex;
  gap:12px;
  align-items:center;
  padding:12px 12px;
  border-radius:16px;
  border:1px solid rgba(15,23,42,.14);
  background: rgba(255,255,255,.75);
  box-shadow: 0 10px 22px rgba(2,6,23,.06);
}

.ownerRow:hover{ background: rgba(255,255,255,.88); }

/* badge za sifru stana */
.ownerBadge{
  font-weight:900;
  font-size:13px;
  padding:8px 10px;
  border-radius:12px;
  border:1px solid rgba(15,23,42,.14);
  background: rgba(15,23,42,.04);
  min-width: 108px;
  text-align:center;
}

/* input */
.ownerField{ flex:1; display:flex; align-items:center; }

.ownerField input{
  width:100%;
  height:40px;
  border-radius:12px;
  border:1px solid rgba(15,23,42,.18);
  background: rgba(255,255,255,.95);
  padding: 0 12px;
}

.ownerField input:focus{
  outline:none;
  border-color: rgba(15,23,42,.35);
  box-shadow: 0 0 0 4px rgba(15,23,42,.08);
}

/* status — / • / ✓ */
.ownerStatus{
  width:40px;
  height:40px;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(15,23,42,.14);
  background: rgba(15,23,42,.03);
  font-weight:900;
  font-size:16px;
  opacity:.75;
}

.ownerStatus.saved{ opacity:1; }
.ownerStatus.dirty{ opacity:1; }

/* mobile: red u 2 linije */
@media (max-width: 640px){
  .ownerRow{
    flex-direction:column;
    align-items:stretch;
  }
  .ownerBadge{
    min-width:unset;
    text-align:left;
  }
  .ownerStatus{
    width:100%;
  }
}

  /* ===== FORUM – PROCENTI GLASANJA ===== */
.pollStats{
  font-size:13px;
  color:var(--muted);
}

.pollBar{
  display:flex;
  height:8px;
  border-radius:6px;
  overflow:hidden;
  background:rgba(15,23,42,.12);
  margin-bottom:6px;
}

.pollYes{
  background:#22c55e;
}

.pollNo{
  background:#ef4444;
}

.pollText{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  align-items:center;
}

.pollSep{
  opacity:.6;
}

/* ✅ Backup / Restore modal (admin tools) */
.bModal{ position:fixed; inset:0; z-index: var(--z-modal); }
.bModalOverlay{
  position:absolute; inset:0;
  background: rgba(2,6,23,.45);
  backdrop-filter: blur(6px);
}
.bModalCard{
  position:absolute; left:50%; top:50%;
  transform: translate(-50%,-50%);
  width: min(760px, calc(100vw - 28px));
  max-height: calc(100dvh - 28px);
  overflow: hidden;
  border-radius: 22px;
  background: rgba(241,245,249,.96);
  border: 1px solid rgba(15,23,42,.18);
  box-shadow: 0 26px 70px rgba(2,6,23,.28);
  padding: 14px;
}
.bModalHead{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; padding: 6px 6px 10px 6px;
  border-bottom: 1px solid rgba(15,23,42,.10);
}
.bModalTitle{ font-weight:900; font-size:16px; letter-spacing:.02em; }
.bModalX{
  border:none;
  background: rgba(15,23,42,.06);
  border: 1px solid rgba(15,23,42,.14);
  border-radius: 12px;
  padding: 8px 10px;
  font-weight: 900;
  cursor:pointer;
  min-width: 44px;
  min-height: 44px;
}
.bModalX:hover{ transform: translateY(-1px); }
.bModalBody{ padding: 12px 6px 6px 6px; overflow-y: auto; max-height: calc(100dvh - 130px); }
@media (max-width:520px){
  .bModalCard{ padding: 12px; }
  .bModalTitle{ font-size:15px; }
}

/* ===== Admin: modal za unos zgrade ===== */
#adminAddBuildingModalCard{
  width:min(980px, calc(100vw - 28px));
  max-height:82dvh;
  overflow:hidden;
}

#adminAddBuildingModal .cModalBody{
  max-height: calc(82dvh - 74px);
  overflow: auto;
}

/* ===== Admin: modal za izmenu zgrade ===== */
#adminEditBuildingModalCard{
  width:min(92vw, 720px);
  max-width:720px;
  max-height: calc(100dvh - 24px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#adminEditBuildingModalCard > .cModalBody{
  width:100%;
  overflow-y: auto;
  min-height: 0;
  flex: 1;
}

#adminEditBuildingModalCard .cModalActions{
  position: sticky;
  bottom: 0;
  background: rgba(241,245,249,.96);
  padding-top: 8px;
  flex-shrink: 0;
}

/* Compact spacing inside edit-building modal */
#adminEditBuildingModalCard .adminEditMgrInfo{
  margin-bottom: 4px;
}

/* ===== Modal: Globalne mesečne stavke SZ ===== */
#szFinanceModal .cModalBody{
  max-height: calc(82dvh - 74px);
  overflow: auto;
}

.szFinanceFields{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  align-items:end;
}

.szFinanceFields:empty{
  display:none;
}

@media (max-width: 520px){
  .szFinanceFields{
    grid-template-columns: 1fr;
  }
}

.szfd_addRow{
  margin-bottom:10px;
}

.szfd_addRow select{
  border-radius:18px;
  border:1px solid rgba(15,23,42,.18);
  background:rgba(255,255,255,.94);
  padding:10px 14px;
  font-size:14px;
  font-weight:700;
  color:rgba(15,23,42,.72);
  cursor:pointer;
  outline:none;
}

.szfd_addRow select:focus{
  border-color:rgba(15,23,42,.3);
  box-shadow:0 0 0 4px rgba(15,23,42,.06);
}

.szFinanceFields .field{
  margin:0;
}

.szFinanceFields .field label{
  line-height:1.2;
  min-height:calc(1.2em * 2);
}

.szFinanceActions{
  display:flex;
  gap:8px;
  margin-top:16px;
  flex-wrap:wrap;
}

.szFinanceStatus{
  margin-top:6px;
  min-height:16px;
}

/* ===== SZ Month Lock Section ===== */
.szLockRow{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:10px;
}

.szLockLabel{
  font-size:13px;
  font-weight:600;
  white-space:nowrap;
}

.szLockStatus{
  font-size:13px;
  font-weight:700;
  padding:4px 10px;
  border-radius:99px;
  display:inline-block;
  min-height:1em;
}

.szLockStatus.szLockLocked{
  background:rgba(248,113,113,.15);
  color:#ef4444;
}

.szLockStatus.szLockOpen{
  background:rgba(74,222,128,.15);
  color:#16a34a;
}

.szLockAudit{
  font-size:11px;
  font-weight:400;
  opacity:.8;
  display:block;
  margin-top:3px;
}

.szFinanceSepLine{
  border:none;
  border-top:1px solid var(--border);
  margin:20px 0 14px;
}

.szFinanceSectionTitle{
  font-size:13px;
  font-weight:700;
  letter-spacing:.3px;
  opacity:.75;
  margin-bottom:8px;
  text-transform:uppercase;
}

/* ===== SZ Opening Balance Breakdown ===== */
#szfd_obBreakdown{
  grid-column:1 / -1;
  margin-top:8px;
  padding:14px 16px 10px;
  border:1.5px solid rgba(15,23,42,.12);
  border-radius:12px;
  background:rgba(248,250,252,.9);
}

.szfdObHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:12px;
}

.szfdObTitle{
  font-size:13px;
  font-weight:700;
  letter-spacing:.3px;
  opacity:.8;
  text-transform:uppercase;
}

.szfdObRows{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(170px,1fr));
  gap:8px;
  margin-bottom:12px;
}

.szfdObRow{
  display:flex;
  flex-direction:column;
  gap:4px;
}

.szfdObRowLabel{
  font-size:12px;
  font-weight:600;
  opacity:.7;
  white-space:nowrap;
}

.szfdObInput{
  width:100%;
  padding:7px 10px;
  border:1px solid rgba(15,23,42,.18);
  border-radius:8px;
  font-size:14px;
  background:rgba(255,255,255,.95);
  box-sizing:border-box;
}

.szfdObInput:focus{
  outline:none;
  border-color:rgba(15,23,42,.35);
  box-shadow:0 0 0 3px rgba(15,23,42,.06);
}

/* Dynamic fund-row UI */
.szfdObDynRows{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-bottom:4px;
}

.szfdObDynRow{
  display:flex;
  flex-direction:column;
  gap:4px;
}

.szfdObDynRowMain{
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:nowrap;
}

.szfdObCatSel{
  flex:1 1 auto;
  min-width:120px;
  padding:7px 10px;
  border:1px solid rgba(15,23,42,.18);
  border-radius:8px;
  font-size:14px;
  background:rgba(255,255,255,.95);
  box-sizing:border-box;
}

.szfdObCatSel:focus{
  outline:none;
  border-color:rgba(15,23,42,.35);
  box-shadow:0 0 0 3px rgba(15,23,42,.06);
}

.szfdObDynRow .szfdObInput{
  flex:0 0 110px;
  width:110px;
  min-width:80px;
}

.szfdObRemoveBtn{
  flex:0 0 auto;
  padding:5px 9px;
  font-size:13px;
  opacity:.6;
  line-height:1;
}

.szfdObRemoveBtn:hover{
  opacity:1;
}

.szfdObOstaloName{
  width:100%;
  padding:6px 10px;
  border:1px solid rgba(15,23,42,.14);
  border-radius:8px;
  font-size:13px;
  background:rgba(255,255,255,.95);
  box-sizing:border-box;
  color:#4b5563;
}

.szfdObOstaloName:focus{
  outline:none;
  border-color:rgba(15,23,42,.35);
  box-shadow:0 0 0 3px rgba(15,23,42,.06);
}

.szfdObAutoMsg{
  font-size:12px;
  font-weight:600;
  color:#b45309;
  background:rgba(251,191,36,.15);
  border-radius:8px;
  padding:6px 12px;
  margin-bottom:8px;
}

/* Live summary panel */
.szfdObSummary{
  border-radius:10px;
  padding:10px 14px;
  margin-top:4px;
  background:rgba(15,23,42,.04);
  font-size:13px;
}

.szfdObSummaryRow{
  display:flex;
  justify-content:space-between;
  gap:8px;
  padding:2px 0;
}

.szfdObSummaryRow span:first-child{
  opacity:.7;
}

.szfdObSummaryRow span:last-child{
  font-weight:600;
  font-variant-numeric:tabular-nums;
}

.szfdObSummaryDiff span:last-child{
  font-weight:700;
}

.szfdObSummaryMsg{
  margin-top:6px;
  font-size:12px;
  font-weight:700;
  padding:5px 10px;
  border-radius:99px;
  text-align:center;
}

.szfdObSummaryOk{
  background:rgba(74,222,128,.12);
}
.szfdObSummaryOk .szfdObSummaryDiff span:last-child,
.szfdObSummaryOk .szfdObSummaryMsg{
  color:#15803d;
}
.szfdObSummaryOk .szfdObSummaryMsg{
  background:rgba(74,222,128,.18);
}

.szfdObSummaryExcess{
  background:rgba(248,113,113,.08);
}
.szfdObSummaryExcess .szfdObSummaryDiff span:last-child,
.szfdObSummaryExcess .szfdObSummaryMsg{
  color:#dc2626;
}
.szfdObSummaryExcess .szfdObSummaryMsg{
  background:rgba(248,113,113,.18);
}

.szfdObSummaryMissing{
  background:rgba(251,191,36,.08);
}
.szfdObSummaryMissing .szfdObSummaryDiff span:last-child,
.szfdObSummaryMissing .szfdObSummaryMsg{
  color:#b45309;
}
.szfdObSummaryMissing .szfdObSummaryMsg{
  background:rgba(251,191,36,.2);
}

/* ===== SZ Finance Modal: Accordion ===== */
.szAcc{
  border:1px solid var(--border);
  border-radius:14px;
  overflow:hidden;
  margin-bottom:8px;
  background:rgba(255,255,255,.55);
}

.szAccHead{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:13px 16px;
  background:none;
  border:none;
  cursor:pointer;
  text-align:left;
  color:inherit;
  font:inherit;
  min-height:48px;
  transition:background .12s;
}

.szAccHead:hover{
  background:rgba(15,23,42,.05);
}

.szAcc.szAccOpen .szAccHead{
  background:rgba(15,23,42,.04);
}

.szAccTitle{
  font-size:13px;
  font-weight:700;
  letter-spacing:.3px;
  text-transform:uppercase;
  opacity:.8;
  flex:1;
}

.szAccIcon{
  font-size:16px;
  line-height:1;
  color:rgba(15,23,42,.55);
  transition:transform .2s;
  flex-shrink:0;
}

.szAcc.szAccOpen .szAccIcon{
  transform:rotate(0deg);
}

.szAcc:not(.szAccOpen) .szAccIcon{
  transform:rotate(-90deg);
}

.szAccBody{
  padding:0 16px 14px;
  display:none;
}

.szAcc.szAccOpen .szAccBody{
  display:block;
}

/* ===== SZ Overview: view-mode controls ===== */
#szOvControls{
  margin-top:6px;
}

.szOvModeRow{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.szOvModeBtn{
  flex:0 0 auto;
  background:rgba(255,255,255,.72);
  border:1px solid rgba(15,23,42,.14);
  box-shadow:var(--shadow);
  color:rgba(15,23,42,.92);
  border-radius:18px;
  padding:8px 18px;
  font-weight:700;
  font-size:13px;
  cursor:pointer;
  transition:.15s;
}

.szOvModeBtn.szOvModeActive{
  background:#0f172a;
  color:#fff;
  border-color:#0f172a;
}

.szOvMonthRow{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:10px;
  flex-wrap:wrap;
}

.szOvMonthLabel{
  font-size:13px;
  font-weight:700;
  color:rgba(15,23,42,.7);
}

.szOvMonthPicker{
  border:1px solid rgba(15,23,42,.18);
  border-radius:10px;
  padding:6px 10px;
  font-size:13px;
  background:rgba(255,255,255,.9);
  color:rgba(15,23,42,.92);
  cursor:pointer;
}

@media(max-width:520px){
  .szOvModeRow{ flex-direction:column; }
  .szOvModeBtn{ width:100%; text-align:center; }
}

/* ===== SZ Finance Overview (Pregled stanja po stavkama SZ) ===== */
.szovSection{
  margin-top:20px;
  border-top:1px solid var(--border);
  padding-top:16px;
}

.szovTitle{
  font-size:15px;
  font-weight:900;
  margin-bottom:12px;
  color:rgba(15,23,42,.92);
  letter-spacing:.01em;
}

.szovGrid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-bottom:10px;
}

.szovCard{
  background:rgba(241,245,249,.85);
  border:1px solid var(--border);
  border-radius:12px;
  padding:10px 12px;
}

.szovLabel{
  font-weight:700;
  font-size:12px;
  margin-bottom:6px;
  opacity:.8;
}

.szovRow{
  display:flex;
  justify-content:space-between;
  font-size:12px;
  padding:2px 0;
}

.szovBalance{
  font-weight:900;
  margin-top:4px;
  border-top:1px solid rgba(15,23,42,.08);
  padding-top:4px;
}

.szovNeg{ color:#dc2626; }
.szovZero{ color:rgba(15,23,42,.65); }
.szovPos{ color:#15803d; }

.szovTotal{
  background:rgba(15,23,42,.06);
  border:1px solid var(--border);
  border-radius:12px;
  padding:12px 14px;
  margin-top:4px;
}

.szovTotalLabel{
  font-weight:900;
  font-size:14px;
  margin-bottom:8px;
}

@media(max-width:520px){
  .szovGrid{
    grid-template-columns:1fr;
  }
}

/* ===== SZ Finance Modal: tenant read-only view ===== */
#szFinanceModal.szTenantView #szAcc_obs,
#szFinanceModal.szTenantView #szAcc_defaults,
#szFinanceModal.szTenantView #szAcc_lock,
#szFinanceModal.szTenantView #szAcc_reminders{
  display:none;
}

.szRemindersSelect{
  border-radius:18px;
  border:1px solid rgba(15,23,42,.18);
  background:rgba(255,255,255,.94);
  padding:10px 14px;
  font-size:14px;
  font-weight:700;
  color:rgba(15,23,42,.72);
  cursor:pointer;
  outline:none;
}

.szRemindersSelect:focus{
  border-color:rgba(15,23,42,.3);
  box-shadow:0 0 0 4px rgba(15,23,42,.06);
}

.szRemindersList{
  margin-top:10px;
}

.szReminderItem{
  display:flex;
  align-items:center;
  gap:8px;
  padding:7px 10px;
  border-radius:10px;
  background:rgba(255,255,255,.6);
  border:1px solid rgba(15,23,42,.09);
  margin-bottom:5px;
  font-size:0.9em;
  flex-wrap:wrap;
}

.szReminderUnit{
  flex:1;
  font-weight:600;
  min-width:100px;
}

.szReminderDebt{
  color:#ef4444;
  font-weight:700;
  white-space:nowrap;
}

.szReminderDays{
  color:rgba(15,23,42,.5);
  font-size:0.88em;
  white-space:nowrap;
}

.szRemindersEmpty{
  color:rgba(15,23,42,.5);
  font-size:0.9em;
  margin-top:8px;
  padding:8px 0;
}

.szRemindersDisabledMsg{
  font-size:13px;
  font-weight:600;
  color:rgba(153,27,27,.9);
  background:rgba(220,38,38,.08);
  border:1px solid rgba(220,38,38,.18);
  border-radius:8px;
  padding:10px 14px;
  margin:8px 0 4px;
}

/* ===== Toast (profi notifikacije) ===== */
.toastHost{
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
  max-width: min(420px, calc(100vw - 32px));
}

.toast{
  pointer-events: auto;
  background: rgba(255,255,255,.96);
  border: 1px solid rgba(15,23,42,.14);
  border-radius: 16px;
  box-shadow: var(--shadow);
  padding: 12px 14px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.toastIcon{
  width: 24px;
  height: 24px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-weight: 900;
  background: rgba(15,23,42,.08);
  flex: 0 0 auto;
}

.toastMsg{
  font-weight: 800;
  line-height: 1.25;
  word-break: break-word;
}

.toastSmall{
  margin-top: 4px;
  opacity: .75;
  font-weight: 700;
  font-size: 13px;
}

.toast.success .toastIcon{ background: rgba(16,185,129,.16); }
.toast.error .toastIcon{ background: rgba(239,68,68,.16); }
.toast.info .toastIcon{ background: rgba(59,130,246,.16); }

@media (max-width: 520px){
  .toastHost{
    left: 12px;
    right: 12px;
    top: 12px;
    max-width: none;
  }
}

/* ===== Modal: Unos / izmena stana ===== */
/* Raise above tcOverlay (9999) and ocOverlay (2100) so the modal is visible
   when opened from within the tenant-card or owner-card overlays. */
#adminAddUnitModal{ z-index: calc(var(--z-modal) + 1); }
#adminAddUnitModalCard{
  width: min(980px, calc(100vw - 28px));
  max-height: 82dvh;
  overflow: hidden;
}
#adminAddUnitModal .cModalBody{
  max-height: calc(82dvh - 74px);
  overflow: auto;
}

/* ===== Kredencijali modal (profi) ===== */
#credModalCard{
  width: min(720px, calc(100vw - 28px));
  max-height: 82dvh;
  overflow: hidden;
}

#credModal .cModalBody{
  max-height: calc(82dvh - 74px);
  overflow: auto;
}

.credBox{
  margin-top: 10px;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(15,23,42,.14);
  box-shadow: var(--shadow);
}

.credPre{
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 13.5px;
  line-height: 1.35;
}

/* ===== Tenant form professional header ===== */

.tcFormHeader{
  padding:16px 18px;
  border-radius:14px;
  margin-bottom:14px;
  background: rgba(15,23,42,.04);
  border:1px solid rgba(15,23,42,.10);
}

.tcFormBadge{
  display:inline-block;
  font-size:11px;
  font-weight:900;
  letter-spacing:.8px;
  padding:4px 10px;
  border-radius:999px;
  margin-bottom:8px;
}

.tcFormTitle{
  font-size:16px;
  font-weight:950;
  margin-bottom:4px;
}

.tcFormSub{
  font-size:13px;
  opacity:.75;
}

/* različite boje */

.tcFormHeaderPay .tcFormBadge{
  background: rgba(34,197,94,.15);
  color: #22c55e;
}

.tcFormHeaderAdj .tcFormBadge{
  background: rgba(245,158,11,.15);
  color: #f59e0b;
}

/* ===== HOME BUILDING INFO SPACING ===== */

#page-home > div:first-child,
.page-home > div:first-child {
  margin-top: 32px;
}

/* ==============================================
   TABLES
   ============================================== */
/* =========================
   DUGOVANJA (ADMIN GRID)
========================= */
.duesToolbar{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
  margin-top:12px;
}

.duesToolbar .field{ margin-top:0; }
.duesToolbar input, .duesToolbar select{
  height:36px;
  border-radius:12px;
  padding:6px 10px;
  border:1px solid rgba(15,23,42,.14);
  background:rgba(248,250,252,.88);
  font-weight:800;
  font-size:13px;
}

.duesGrid{
  margin-top:12px;
  display:grid;
  gap:10px;
}

.duesRow{
  display:grid;
  grid-template-columns: 1fr auto;  /* levo: sve info | desno: dugmad */
  grid-auto-rows: auto;
  gap:12px;
  align-items:start; /* umesto center */


  background: rgba(15, 23, 42, .18);
  border: 1px solid rgba(15, 23, 42, .22);
  box-shadow: 0 10px 26px rgba(2, 6, 23, .10);
  border-radius: 18px;
  padding: 12px 14px;

  /* bitno za hover */
  transition: background .12s ease, transform .12s ease;
}

.duesUser{
  font-weight: 900;
  font-size: 16px;
  letter-spacing:.3px;
}

.duesMeta{
  font-weight:800;
  color: rgba(15,23,42,.80);
  font-size: 12px;
  opacity:.85;
}

.duesBadges{
  display:flex;
  flex-direction:column;
  gap:6px;
  align-items:flex-start;
  flex-wrap:nowrap;
}
.duesBadgesStack{
  margin-top:6px;
}

.duesBadge{
  display:inline-flex;
  align-items:center;
  gap:6px;

  padding:0;              /* ✅ nema “pill” osećaja */
  border-radius:0;        /* ✅ nema zaobljenja */
  border:none;            /* ✅ nema linije */
  background:transparent; /* ✅ nema kvadrata */

  font-weight:900;
  font-size:15px;
  white-space:nowrap;
}

/* saldo status boje (isti sistem kao kod tebe) */
.duesBadge.status-dug{ 
  color:#B91C1C;
  background: transparent !important;
  border: none !important;
  text-shadow: 0 0 10px rgba(255,59,48,.35);
}

.duesBadge.status-obaveza{
  color:#B45309;
  background: transparent !important;
  border: none !important;
  text-shadow: 0 0 10px rgba(255,204,0,.35);
}

.duesBadge.status-neutral{
  color:#6B7280;
  background: transparent !important;
  border: none !important;
  text-shadow: none;
}

.duesBadge.status-uplaceno{
  color:#166534;
  background: transparent !important;
  border: none !important;
  text-shadow: 0 0 10px rgba(15,61,46,.18);
}


.duesActions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  align-self:flex-end;
}

.duesActions .btn{
  flex:unset;
  padding:10px 14px;
  border-radius:14px;
}

/* responsive */
@media (max-width: 920px){
  .duesRow{
    grid-template-columns: 1fr; 
  }
  .duesBadges{ justify-content:flex-start; }
  .duesActions{ justify-content:flex-start; }
}

  /* =========================
   ADMIN UPLOAD GRID (kao Dugovanja)
========================= */
.uplRow{
  /* isto kao duesRow, ali drugačije kolone */
  grid-template-columns: 260px 1fr 1fr 1fr; /* zgrada | finansije | oglasna | ukupno */
}

@media (max-width: 920px){
  .uplRow{
    grid-template-columns: 1fr;
  }
}

/* ==============================================
   PAGE-SPECIFIC
   ============================================== */
  /* FINANSIJE – sakrij header */
body.page-finansije .pageHeader{
  display: none;
}

/* blago spuštanje kartica po stranama */
body.page-home #page-home,
body.page-finansije #page-finansije,
body.page-stanovi #page-stanovi,
body.page-zgrade #page-zgrade,
body.page-oglasna #page-oglasna,
body.page-forum #page-forum,
body.page-regulative #page-regulative,
body.page-kontakt #page-kontakt,
body.page-statistika #page-statistika{
  margin-top: 28px;
}

  /* ✅ POČETNA: Desktop jedan red | Mobilni kolona */
@media (min-width: 721px){
  body.mode-portal.page-home .rightCol{
    display: grid;
    grid-template-columns: auto 1fr auto; /* meta+dugme | pretraga | stanje */
    align-items: center;
    gap: 12px;
  }

  /* levi deo: ID • adresa + Promeni zgradu */
  body.mode-portal.page-home .topMini{
    grid-column: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: nowrap;
    min-width: 0; /* bitno da grid ne puca */
  }

  /* sakrij pill-ove (već ih JS gasi, ali da bude sigurno) */
  body.mode-portal.page-home #userPill,
  body.mode-portal.page-home #buildingPill{
    display: none !important;
  }

  /* sredina: pretraga */
  body.mode-portal.page-home .searchInline{
    grid-column: 2;
    width: 100%;
    margin: 0;
    min-width: 0; /* da input može da se smanji u gridu */
  }

  /* desno: stanje računa */
  body.mode-portal.page-home .balanceCard{
    grid-column: 3;
    margin: 0;
    align-self: center;
    white-space: nowrap;
  }
}

@media (max-width: 720px){
  body.mode-portal.page-home .rightCol{
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  body.mode-portal.page-home .searchInline,
  body.mode-portal.page-home .balanceCard{
    width: 100%;
    max-width: 100%;
  }

  body.mode-portal.page-home .balanceCard{
    margin-top: 0;
    align-self: auto;
  }
}

/* Početna: brze prečice (klikabilne stavke) */
#homeLastChange, #homePinned, #homeForum{
  cursor: pointer;
}

#homeLastChange:hover, #homePinned:hover, #homeForum:hover{
  text-decoration: underline;
  opacity: .9;
}

  /* PDF fajlovi – Oglasna + Finansije (force) */
.fileList li,
.fileList li span,
.fileList li small{
  color:#1d4ed8 !important;
  font-weight:900;
}

/* Početna: "NOVO" badge — legacy rule kept for non-card contexts */
#page-home .boardList li{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

/* ===== Tenant Identity / SZ Info Banner ===== */
.tenantIdentityCard {
  margin-bottom: 14px;
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.60);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(15, 23, 42, 0.10);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.04);
}

.tenantIdentityGrid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
}

.tenantIdentityItem {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 90px;
}

.tenantIdentityKey {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(15, 23, 42, 0.45);
}

.tenantIdentityVal {
  font-size: 14px;
  font-weight: 800;
  color: rgba(15, 23, 42, 0.90);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tenantIdentityCode {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 12px;
  font-weight: 700;
  color: rgba(15, 23, 42, 0.60);
}

.tenantIdentityLoading {
  font-size: 13px;
  font-weight: 700;
  color: rgba(15, 23, 42, 0.45);
  font-style: italic;
}

@media (max-width: 520px) {
  .tenantIdentityGrid {
    flex-direction: column;
    gap: 8px;
  }
  .tenantIdentityVal {
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
  }
}

/* ===== Tenant Home Glass Cards ===== */
.tenantHomeOverview{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:12px;
  margin-top:12px;
}

.tenantHomeCard{
  display:flex;
  align-items:center;
  gap:12px;
  padding:16px;
  border-radius:14px;
  background:rgba(255,255,255,0.65);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(15,23,42,0.08);
  box-shadow:0 8px 18px rgba(0,0,0,0.04);
  transition:transform .18s ease, box-shadow .18s ease;
  position:relative;
}

.tenantHomeCard[data-page]:not([data-page=""]){
  cursor:pointer;
}

.tenantHomeCard:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 24px rgba(0,0,0,0.06);
}

.tenantHomeCardIcon{
  font-size:20px;
  width:38px;
  height:38px;
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:10px;
  background:rgba(59,130,246,0.12);
}

.tenantHomeCardBody{
  flex:1;
  min-width:0;
}

.tenantHomeCardTitle{
  font-weight:700;
  font-size:14px;
  color:#0f172a;
}

.tenantHomeCardMeta{
  font-size:12px;
  color:rgba(15,23,42,0.65);
  margin-top:2px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.tenantHomeBadge{
  margin-left:auto;
  flex-shrink:0;
  background:rgba(59,130,246,0.12);
  color:#3b82f6;
  font-size:11px;
  font-weight:600;
  padding:3px 8px;
  border-radius:999px;
}

/* Issues card — full-width, column layout */
#homeMyIssuesList{
  margin-top:12px;
}

.tenantHomeCardIssues{
  align-items:flex-start;
  flex-direction:row;
}

.tenantHomeCardIssues .tenantHomeCardBody{
  width:100%;
}

/* DESKTOP ONLY – spusti "Stanje računa" */
@media (min-width: 721px){
  body.mode-portal.page-home .balanceCard{
    align-self: flex-start; /* ili start */
    margin-top: 8px;        /* sada je stvarnih 5px */
  }
}

/* ===== Finansijski statusi ===== */

/* Dug */
.status-dug,
.dug {
  color: #ff3b3b;                 /* svetlija crvena */
  background: transparent;         /* ukloni kvadrat */
  border: none;                    /* ukloni liniju */
  text-shadow: 0 0 10px rgba(255,59,59,.28);
}

/* Obaveza (žuto-narandžasta, mnogo čitljivija) */
.status-obaveza,
.obaveza {
  color: #ffd400;                  /* jača, svetlija */
  background: transparent;
  border: none;
  text-shadow: 0 0 10px rgba(255,212,0,.28);
}

/* Neutralno / nula (sivo) */
.status-neutral {
  color: #6B7280;
  background: transparent;
  border: none;
  text-shadow: none;
}

/* Uplaćeno / Pretplata (svetlija zelena) */
.status-uplaceno,
.uplaceno,
.pretplata {
  color: #166534;                  /* “bright green” */
  background: transparent;
  border: none;
  text-shadow: 0 0 10px rgba(15,61,46,.18);
}

/* Mali UI polish */
.status-dug,
.status-obaveza,
.status-neutral,
.status-uplaceno{
  padding: 0;
  border-radius: 0;
  background: transparent;
  border: none;
  font-weight: 900;
  display: inline;
}

/* ===== Finansije: kompaktne kontrole (Tip/Kategorija/Sort/Pretraga) ===== */
/* same kontrole */
#finFilterType,
#finFilterCategory,
#finSortBy,
#finLocalSearch{
  height: var(--fin-ctrl-h);
  font-size: var(--fin-ctrl-font);
  padding: var(--fin-ctrl-pad-y) var(--fin-ctrl-pad-x);
  border-radius: 12px;
  background: rgba(248,250,252,.88);
  border: 1px solid rgba(15,23,42,.14);
}

/* fokus (da izgleda profi kad klikneš) */
#finFilterType:focus,
#finFilterCategory:focus,
#finSortBy:focus,
#finLocalSearch:focus{
  outline: none;
  box-shadow: 0 0 0 3px rgba(59,130,246,.18);
}

/* FINANSIJE: naslov + stanar badge u istom redu */
.finTitleRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

#finTenantBadge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:999px;
  font-weight:900;
  font-size:12px;
  white-space:nowrap;
}

/* ===== FINANSIJE: SMANJI NAZIV PDF-a (ono plavo što si zaokružio) ===== */
#financeList .fileList li{
  padding: 6px 10px !important;     /* manje prostora */
  border-radius: 12px !important;
  font-size: 12px !important;       /* manji tekst (fallback) */
  line-height: 1.2 !important;
}

#financeList .fileList li span{
  font-size: 12px !important;       /* naziv fajla */
  font-weight: 800 !important;
}

#financeList .fileList li small{
  font-size: 10px !important;       /* "4 KB" */
  font-weight: 800 !important;
  opacity: .7 !important;
}

/* ===== OGLASNA – smanji naziv PDF fajla ispod objave ===== */
#boardList li span{
  font-size: 12px !important;   /* naziv fajla */
  font-weight: 700 !important;
}

#boardList li small{
  font-size: 10px !important;   /* "KB" */
  opacity: .7 !important;
}

#boardList li{
  padding: 6px 8px !important;
  line-height: 1.2 !important;
}

/* ===== Iznos + veličina fajla u istom redu ===== */
.finAmountInline{
  white-space:nowrap;        /* RSD + 4KB u istom redu */
}

.finFileSize{
  margin-left:8px;
  font-size:12px;
  opacity:.65;
  white-space:nowrap;
}

/* === FIN: header red (datum/opis + akcije desno) === */
.finRowTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.finRowTitle{
  flex:1;
  min-width:0;            /* bitno da tekst može da se “seče” umesto da gura dugmad */
}

.finRowActions{
  flex:0 0 auto;
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:flex-end;
}


/* malo “uredi” razmake unutar kartice (opciono) */
.finCard .row,
.finCard .finRow,
.finCard .itemRow{
  align-items: center;
  gap: 10px;
}

/* PDF redovi da budu uredniji (opciono) */
.finCard .fileRow,
.finCard .docRow{
  background: rgba(255,255,255,.35);
  border: 1px solid rgba(15,23,42,.12);
  border-radius: 14px;
  padding: 8px 10px;
}

  /* =================================================
   FINANSIJE – KARTICE ISTE KAO DUGOVANJA
   Glass fix: backdrop-filter scoped to page-finansije only
================================================= */
#page-finansije .duesRow,
#financeList li.finCard{
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

#financeList li.finCard{
  background: rgba(15, 23, 42, .18) !important;
  border: 1px solid rgba(15, 23, 42, .22) !important;
  box-shadow: 0 10px 26px rgba(2, 6, 23, .10) !important;
  border-radius: 18px !important;
}

/* hover (opciono, da bude kao “živ” efekat) */
#financeList li.finCard:hover{
  background-color: rgba(15, 23, 42, .22);
}

  /* =================================================
   UNOSI — ISTA NIJANSA KAO DUGOVANJA (toolbar)
   (finansije + oglasna + forum + uplata dugovanja)
================================================= */

#financeFormWrap .field input,
#financeFormWrap .field select,
#financeFormWrap .field textarea,

#boardFormWrap .field input,
#boardFormWrap .field select,
#boardFormWrap .field textarea,

#forumCreateWrap .field input,
#forumCreateWrap .field textarea,

#duesPayWrap .field input,
#duesPayWrap .field select,
#duesPayWrap .field textarea{
  background: rgba(248,250,252,.88);
  border: 1px solid rgba(15,23,42,.14);
  color: rgba(15,23,42,.92);
  border-radius: 14px;
}

/* fokus */
#financeFormWrap .field input:focus,
#financeFormWrap .field select:focus,
#financeFormWrap .field textarea:focus,

#boardFormWrap .field input:focus,
#boardFormWrap .field select:focus,
#boardFormWrap .field textarea:focus,

#forumCreateWrap .field input:focus,
#forumCreateWrap .field textarea:focus,

#duesPayWrap .field input:focus,
#duesPayWrap .field select:focus,
#duesPayWrap .field textarea:focus{
  outline: none;
  background: rgba(248,250,252,.94);
  border-color: rgba(15,23,42,.25);
  box-shadow: 0 0 0 4px rgba(15,23,42,.06);
}

/* disabled / readonly */
#financeFormWrap .field input[readonly],
#financeFormWrap .field input:disabled{
  opacity: .85;
  cursor: not-allowed;
}


  #regList li{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

/* ✅ UNIFIED HOVER: Finansije + Dugovanja + Oglasna (kartice) */
.finCard{
  transition: background .12s ease, transform .12s ease;
}

.finCard:hover,
.duesRow:hover{
  background-color: rgba(15, 23, 42, .22);
  transform: translateY(-1px);
}

/* ===== GROUPED FINANCE (split-payment display) ===== */
.finGroupCard{
  border-left: 3px solid rgba(59, 130, 246, .55) !important;
}

.finGroupBadge{
  background: rgba(59,130,246,.18);
  color: rgba(59,130,246,.9);
  font-size: .72em;
  font-weight: 700;
  border-radius: 999px;
  padding: 2px 8px;
}

.finGroupToggle{
  white-space: nowrap;
  min-width: 80px;
}

.finGroupChildren{
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(15,23,42,.12);
}

.finGroupChild{
  margin-bottom: 6px;
  background: rgba(15,23,42,.08) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}

.finGroupChild:last-child{
  margin-bottom: 0;
}
/* ===== /GROUPED FINANCE ===== */

/* ===== VLASNICI STANOVA ===== */
.unitOwnerRow{
  display:flex;
  gap:10px;
  align-items:center;
}

.unitOwnerRow .unitCode{
  min-width:90px;
  font-weight:600;
}

.unitOwnerRow input{
  flex:1;
}

/* ===== FINANSIJE: 3 TAB dugmeta u jednom redu ===== */
#page-finansije .fRow[data-role="upravnik"]{
  display:flex;
  gap:10px;
  flex-wrap:nowrap;
}

#page-finansije .fRow[data-role="upravnik"] > .btn{
  flex:1;
  text-align:center;
  white-space:nowrap;
}

/* Mobile: da se lepo prelomi u 2 reda ako nema mesta */
@media (max-width: 760px){
  #page-finansije .fRow[data-role="upravnik"]{
    flex-wrap:wrap;
  }
  #page-finansije .fRow[data-role="upravnik"] > .btn{
    flex:1 1 160px;
    min-width:0;
  }
}

/* Sakrij AI na login strani */
body.mode-login #aiFab,
body.mode-login #aiPanel{
  display:none !important;
}

/* ===== Portal: Building Select kao modal (ne menja mode) + FIX (dugmad vidljiva) ===== */
body.mode-portal.bsModalOpen #buildingSelectScreen{
  display:grid !important;
  position:fixed;
  inset:0;
  z-index: calc(var(--z-modal) + 2);
  background:rgba(0,0,0,.35);

  /* FIX: ne centriraj vertikalno, da dno ne beži ispod ekrana */
  place-items:start center !important;
  padding:14px var(--main-pad) !important;
}

body.mode-portal.bsModalOpen{
  overflow:hidden;
}

/* Zatvori dugme nema smisla van portala */
body.mode-buildingSelect #bsCloseBtn,
body.mode-login #bsCloseBtn{
  display:none;
}

/* kartica staje u viewport (računamo padding) */
body.mode-portal.bsModalOpen #buildingSelectScreen .loginCard{
  width:min(720px, 92vw);
  max-height:calc(100dvh - 28px);
  overflow:hidden;
  min-height:0; /* bitno za flex/overflow */
}

/* unutra je flex kolona, lista skroluje, footer ostaje u okviru */
body.mode-portal.bsModalOpen #buildingSelectScreen .loginInner{
  display:flex;
  flex-direction:column;
  max-height:calc(100dvh - 28px);
  overflow:hidden;
  min-height:0; /* bitno za flex/overflow */
}

/* lista zauzima prostor i skroluje */
body.mode-portal.bsModalOpen #buildingSelectScreen #buildingPickList{
  flex:1 1 auto;
  overflow:auto;
  padding-bottom:6px;
}

/* dugmad su uvek dole u kartici (ne izlaze van ekrana) */
body.mode-portal.bsModalOpen #buildingSelectScreen .btnRow{
  flex:0 0 auto;
  margin-top:14px;
  background:rgba(255,255,255,.96);
  padding-top:10px;
}


/* ==============================================
   MEDIA QUERIES
   ============================================== */
@media (max-width: 720px){
  /* sakrij samo header slot (meta + search + balance) */
  #topRightHeaderSlot{
    display:none !important;
  }

  /* prikaži Promeni zgradu */
  #topRightSwitchSlot{
    display:flex !important;
    align-items:center;
    pointer-events:auto;
  }

  .topRightBar{
    position:fixed;
    top:calc(10px + env(safe-area-inset-top, 0px));
    left:auto;
    right:12px;
    width:max-content;
    max-width:calc(100vw - 24px);
    justify-content:flex-end;
    gap:10px;
  }

  /* Mobile building label: hide code prefix, wrap address to max 2 lines */
  #buildingMetaText .bmtCode{
    display:none;
  }

  #buildingMetaText{
    white-space:normal;
    max-width:46vw;
    overflow:hidden;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    line-height:1.3;
    border-radius:14px;
  }
}

/* =========================
   DIAGNOSTICS MODAL (Premium++)
========================= */
.diagModal{ position:fixed; inset:0; display:none; z-index: var(--z-modal); }
.diagModal.isOpen{ display:block; }

.diagBackdrop{
  position:absolute; inset:0;
  background: rgba(15,23,42,.58);
  backdrop-filter: blur(6px);
}

.diagCard{
  position:relative;
  width: 920px;
  max-width: calc(100% - 24px);
  max-height: calc(100vh - 120px);
  margin: 70px auto;
  background: rgba(255,255,255,.98);
  border: 1px solid rgba(15,23,42,.14);
  border-radius: 18px;
  box-shadow: 0 30px 70px rgba(2,6,23,.35);
  overflow:hidden;
}

.diagHeader{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:12px;
  padding: 16px 18px;
  border-bottom: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.92);
}

.diagTitleRow{ display:flex; align-items:center; gap:10px; }
.diagTitle{
  font-weight: 950;
  font-size: 16px;
  letter-spacing: .2px;
  color: rgba(15,23,42,.95);
}
.diagSub{
  margin-top: 3px;
  font-size: 12px;
  font-weight: 800;
  color: rgba(15,23,42,.62);
}

.diagHeadRight{ display:flex; align-items:center; gap:10px; }

.diagClose{
  width: 38px; height: 38px;
  border-radius: 12px;
  border: 1px solid rgba(15,23,42,.14);
  background: rgba(255,255,255,.90);
  cursor:pointer;
  font-size: 18px;
  line-height: 1;
}

.diagContent{
  padding: 16px 18px 18px;
  margin:0;
  max-height: calc(100vh - 230px);
  overflow:auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 12.5px;
  line-height: 1.55;
  color: rgba(15,23,42,.92);
  white-space: pre-wrap;
  word-break: break-word;
}

/* Status badge */
.diagStatus{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 12px;
  border: 1px solid rgba(15,23,42,.14);
}

.diagOk{
  background: rgba(34,197,94,.12);
  border-color: rgba(34,197,94,.30);
  color: rgba(21,128,61,.95);
}
.diagWarn{
  background: rgba(245,158,11,.14);
  border-color: rgba(245,158,11,.35);
  color: rgba(146,64,14,.95);
}
.diagErr{
  background: rgba(239,68,68,.14);
  border-color: rgba(239,68,68,.35);
  color: rgba(153,27,27,.95);
}

@keyframes obFadeIn{
  from{
    opacity:0;
    transform: translateY(-6px);
  }
  to{
    opacity:1;
    transform: translateY(0);
  }
}
/* ===== Početno stanje – prilagođavanje inputa ===== */
#openingBalanceInput{
  height:34px;
  font-size:14px;
  border-radius:12px;
}
/* ================================
   ENTERPRISE: Početno stanje UI
================================ */

.obRow{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  position:relative; /* anchor za floating karton */
}

/* trigger izgleda kao badge ali je button */
.obTrigger{
  border:0;
  cursor:pointer;
}
.obTrigger:focus{
  outline:2px solid rgba(37, 99, 235, 0.35);
  outline-offset:2px;
}

/* glavna input zona */
.obMainInput{
  width:220px;
  display:flex;
  gap:8px;
}

/* floating mini karton */
.openingBalanceCard{
  position:absolute;
  left:0;
  top:calc(100% + 10px);
  width:300px;

  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(10px);
  border-radius:18px;
  padding:16px;
  box-shadow: 0 15px 40px rgba(15, 23, 42, 0.15);
  border:1px solid rgba(15, 23, 42, 0.08);

  opacity:0;
  transform: translateY(-6px);
  pointer-events:none;
  visibility:hidden;

  transition: opacity .14s ease, transform .14s ease, visibility .14s ease;
  z-index: var(--z-dropdown);
}

/* open state */
.openingBalanceCard.isOpen{
  opacity:1;
  transform: translateY(0);
  pointer-events:auto;
  visibility:visible;
}

.obCardHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:10px;
}
.obCardTitle{
  font-weight:900;
  font-size:14px;
  letter-spacing:.2px;
}

.openingBalanceCard input{
  width:100%;
  height:38px;
  border-radius:12px;
  padding:8px 12px;
  font-size:14px;
}

.obActions{
  margin-top:12px;
  display:flex;
  gap:10px;
  justify-content:flex-end;
}
.obActions .btn{
  padding:6px 14px;
  font-size:13px;
  border-radius:12px;
}

.forumComments{
  margin-top:12px;
  border:1px solid rgba(15,23,42,.12);
  border-radius:16px;
  padding:10px;
  background:rgba(255,255,255,.55);
}

.forumCommentsList{
  margin-top:10px;
  display:flex;
  flex-direction:column;
  gap:8px;
}

.forumCommentRow{
  border:1px solid rgba(15,23,42,.10);
  border-radius:14px;
  padding:8px 10px;
  background:rgba(255,255,255,.75);
  transition:background .15s ease;
}

.forumCommentRow:hover{
  background:rgba(255,255,255,.9);
}

.forumCommentWho{
  font-weight:900;
  font-size:12px;
  opacity:.85;
}

.forumCommentMsg {
  margin-top: 4px;
  font-size: 13px;
  line-height: 1.35;

  /* prevent long text overflow */
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: pre-wrap;
}

.forumCommentWhen{
  margin-top:6px;
  font-size:11px;
  opacity:.6;
}

.forumCommentComposer{
  margin-top:10px;
  display:flex;
  gap:10px;
  align-items:flex-end;
}

.forumCommentInput{
  flex:1;
  min-height:42px;
  resize:vertical;
  border-radius:12px;
  padding:6px 8px;
  border:1px solid rgba(15,23,42,.15);
}
.forumEmojiPanel{
  display:flex;
  flex-wrap:wrap;
  gap:4px;
  padding:6px;
  background:#fff;
  border:1px solid rgba(15,23,42,.15);
  border-radius:10px;
  margin-top:4px;
  max-width:280px;
}
.forumEmojiBtn{
  background:none;
  border:none;
  font-size:1.2rem;
  cursor:pointer;
  padding:2px 4px;
  border-radius:6px;
  line-height:1;
}
.forumEmojiBtn:hover{
  background:rgba(15,23,42,.08);
}

.forumEmojiPanel{
  margin-top:8px;
  padding:8px;
  border:1px solid rgba(15,23,42,.12);
  border-radius:14px;
  background:rgba(255,255,255,.85);
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}

.forumEmojiBtn{
  border:1px solid rgba(15,23,42,.12);
  background:rgba(255,255,255,.75);
  border-radius:12px;
  padding:6px 8px;
  cursor:pointer;
  transition:background .15s ease;
}

.forumEmojiBtn:hover{
  background:rgba(255,255,255,.95);
}

/* napravi pill efekat na samom containeru */
.forumCommentComposer{
  gap: 10px;
  padding: 10px 12px;
  border-radius: 18px;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(15, 23, 42, .12);
  box-shadow: 0 10px 30px rgba(15, 23, 42, .08);
  backdrop-filter: blur(8px);
}

/* textarea premium */
.forumCommentComposer .forumCommentInput{
  flex: 1;
  border: 0;
  outline: none;
  background: transparent;
  resize: none;
}

/* emoji dugme da bude malo */
.forumCommentComposer .btnGhost{
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  padding: 0;
  border-radius: 14px;
}

/* pošalji da ne raste */
.forumCommentComposer .btnOutlinePrimary{
  flex: 0 0 auto;
}

/* =========================
   ENTERPRISE FOCUS-VISIBLE
   Suppress ugly square outline on mouse click;
   keep a professional rounded ring for keyboard nav.
========================= */

/* Keyboard focus ring */
.btn:focus-visible,
.btnGhost:focus-visible,
.pillBtn:focus-visible,
.modal button:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 3px;
  border-radius: 8px;
}

/* Remove outline when focused by mouse (non-keyboard) */
.btn:focus:not(:focus-visible),
.btnGhost:focus:not(:focus-visible),
.pillBtn:focus:not(:focus-visible),
.modal button:focus:not(:focus-visible) {
  outline: none;
}


/* =========================
   TOP-RIGHT BUILDING SWITCHER (PR5)
   Pill button + dropdown panel in #topRightSwitchSlot / #topRightHeaderSlot.
========================= */

#puBuildingSwitcher {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

/* Compact read-only rating for the currently active building (manager/admin). */
#puBuildingActiveRating {
  padding: 0 4px;
  line-height: 1;
}
/* Remove the inline left-margin that .puRatingCompact uses when next to a name. */
#puBuildingActiveRating .puRatingCompact {
  margin-left: 0;
}


  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  background: #f1f5f9;
  color: #1e293b;
  border: 1px solid #cbd5e1;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s;
}

#puBuildingSwitchBtn:hover {
  background: #e2e8f0;
  border-color: #94a3b8;
}

#puBuildingSwitchBtn:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 3px;
  border-radius: 999px;
}

#puBuildingSwitchBtn:focus:not(:focus-visible) {
  outline: none;
}

#puBuildingSwitchDrop {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 220px;
  max-width: 340px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  z-index: var(--z-dropdown);
  padding: 6px 0;
}

#puBuildingSwitchDrop[hidden] {
  display: none;
}

.puBuildingSwitchItem {
  display: block;
  width: 100%;
  padding: 8px 16px;
  background: none;
  border: none;
  text-align: left;
  font-size: 0.85rem;
  color: #334155;
  cursor: pointer;
  border-radius: 0;
  transition: background 0.1s;
}

.puBuildingSwitchItem:hover,
.puBuildingSwitchItem:focus-visible {
  background: #f1f5f9;
  outline: none;
}

.puBuildingSwitchItem[aria-selected="true"] {
  font-weight: 600;
  color: #2563eb;
  background: #eff6ff;
}

.puBuildingSwitchItemName {
  display: block;
  font-weight: 500;
}

.puBuildingSwitchItemAddr {
  display: block;
  font-size: 0.78rem;
  color: #64748b;
  margin-top: 1px;
}

/* ========================= PR8: BUILDING SWITCHER SEARCH ========================= */

#puBuildingSwitchSearch {
  display: block;
  box-sizing: border-box;
  width: calc(100% - 24px);
  margin: 4px 12px 2px;
  padding: 6px 10px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  font-size: 0.83rem;
  color: #1e293b;
  outline: none;
}

#puBuildingSwitchSearch:focus {
  outline: 2px solid #2563eb;
  outline-offset: 0;
  border-color: #93c5fd;
}

#puBuildingSwitchList {
  max-height: 264px;
  overflow-y: auto;
  padding: 2px 0;
}

.puBuildingSwitchNoResult {
  padding: 8px 16px;
  font-size: 0.83rem;
  color: #94a3b8;
  font-style: italic;
}
/* ===== Premium SaaS Building Switch Pill ===== */

#puBuildingSwitchBtn {
  font-weight: 600;
  letter-spacing: 0.2px;
  color: #0f172a; /* tamno siva, profesionalnija od čiste crne */
  transition: all 0.15s ease;
}

#puBuildingSwitchBtn .puSwitchLabel,
#puBuildingSwitchBtn .puCaret {
  font-weight: 600;
}

/* Caret malo bliže tekstu */
#puBuildingSwitchBtn .puCaret {
  margin-left: 6px;
  opacity: 0.8;
  transition: transform 0.15s ease, opacity 0.15s ease;
}

/* Hover efekat (suptilan SaaS feel) */
#puBuildingSwitchBtn:hover {
  background-color: #e2e8f0;
}

/* Kad je dropdown otvoren */
#puBuildingSwitcher.open #puBuildingSwitchBtn .puCaret {
  transform: rotate(180deg);
  opacity: 1;
}
#entriesImportBtn,
#addFinanceEntryBtn {
  padding: 5px 10px;
  font-size: 13.5px;
}
.btn.btnSm {
  padding: 8px 14px;
  font-size: 14px;
  border-radius: 14px;
}
#puBuildingSwitchBtn,
#topRightHeaderSlot .searchInline input#globalSearch{
  border: 1px solid rgba(0,0,0,0.05);
  background: #f1f5f9;
  border-radius: 14px;
}
/* TOP SEARCH – identičan model kao #puBuildingSwitchBtn */

#topRightHeaderSlot .searchInline input#globalSearch{
  display: inline-flex;
  align-items: center;

  height: auto;                /* ne forsiramo visinu */
  padding: 4px 12px;           /* ISTI padding kao dugme */
  font-size: 14px;

  border: 1px solid rgba(0,0,0,0.05);
  background: #f1f5f9;
  border-radius: 14px;

  box-shadow: none;
  outline: none;
}

#topRightHeaderSlot .searchInline input#globalSearch:focus,
#topRightHeaderSlot .searchInline input#globalSearch:focus-visible{
  box-shadow: none;
  outline: none;
}
/* FORCE: search pill stil na WRAPPERU */
#topRightHeaderSlot .searchInline{
  display: inline-flex !important;
  align-items: center !important;
  padding: 4px 12px !important;       /* kao dugme */
  border: 1px solid rgba(0,0,0,0.05) !important;
  background: #f1f5f9 !important;
  border-radius: 14px !important;
  box-shadow: none !important;
  outline: none !important;
}

/* input unutra ostaje “clean” */
#topRightHeaderSlot .searchInline input#globalSearch{
  border: none !important;
  background: transparent !important;
  outline: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  height: auto !important;
  line-height: normal !important;
}

/* bez ovala na fokus */
#topRightHeaderSlot .searchInline:focus-within{
  box-shadow: none !important;
  outline: none !important;
}

.forumInlineError {
  margin-top: 6px;
  font-size: 12px;
  color: #b00020;
}

.forumLockedNotice {
  margin-top: 8px;
  margin-bottom: 6px;
  padding: 8px 12px;
  font-size: 13px;
  border: 1px solid rgba(15, 23, 42, .15);
  border-radius: 12px;
  background: rgba(255, 255, 255, .72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #4a4a5a;
}
/* ===== TENANT CARD STATE GRID ===== */

.tcStateTitle{
  font-weight: 900;
  font-size: 15px;
  margin-bottom: 10px;
}

.tcStateGrid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

@media (max-width: 430px) {
  .tcStateGrid {
    grid-template-columns: 1fr;
  }
}

.tcStateCard{
  background: linear-gradient(145deg,#1e1e1e,#171717);
  border-radius: 14px;
  padding: 16px;
  border: 1px solid rgba(255,255,255,0.06);
  transition: 0.25s ease;
}

.tcStateCard:hover{
  transform: translateY(-2px);
  border-color: rgba(255,255,255,0.12);
}

.tcStateLabel{
  font-size: 12px;
  opacity: 0.7;
  margin-bottom: 6px;
}

.tcStateValue{
  font-size: 18px;
  font-weight: 700;
}

.tcStateCard.paid .tcStateValue{
  color: #3ecf8e;
}

.tcStateCard.due .tcStateValue{
  color: #ff6b6b;
}

.tcStateCard.saldo .tcStateValue{
  font-size: 20px;
}
/* Mini state cards inside Tenant Card */

.tcCard .tcCard{
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.05);
  box-shadow: none;
  padding: 12px;
}

.tcSmall{
  font-size: 12px;
  opacity: 0.7;
  margin-bottom: 4px;
}

.tcAmt{
  font-size: 16px;
  font-weight: 700;
}
/* ===== Tenant Card: Bank Statement Layout ===== */

.tcStmtRow{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:14px;
  padding:12px;
  border-bottom:1px solid rgba(255,255,255,0.08);
  transition: background 160ms ease;
}

.tcStmtRow:hover{
  background: rgba(255,255,255,0.03);
}

.tcStmtLeft{ flex:1; min-width:0; }
.tcStmtRight{ flex:0 0 auto; text-align:right; }

.tcStmtDate{
  font-size:12px;
  opacity:0.75;
}

.tcStmtDesc{
  font-size:13px;
  margin-top:3px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.tcStmtRef{
  opacity:0.65;
  margin-left:6px;
}

.tcStmtAmt{
  font-weight:800;
  font-size:14px;
  white-space:nowrap;
}

.tcStmtAmt.pos{ color:#3ecf8e; }
.tcStmtAmt.neg{ color:#ff6b6b; }
/* Fallback (uvek): malo jači translucent bg da izgleda "premium" i bez blura */
#financeList li.finCard{
  border-radius: 18px !important;
  background: rgba(255,255,255,0.06); /* ili tvoja postojeća vrednost ako već imaš */
}

/* Glass only when supported */
@supports ((backdrop-filter: blur(6px)) or (-webkit-backdrop-filter: blur(6px))) {
  #page-finansije .duesRow,
  #financeList li.finCard{
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }
}

/* ===========================
   ENTERPRISE UNIT LIST
   =========================== */

.unitRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:14px 16px;
  margin:10px 0;
  border-radius:18px;
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.10);
  box-shadow:0 10px 28px rgba(0,0,0,0.10);
}

@supports ((backdrop-filter: blur(8px)) or (-webkit-backdrop-filter: blur(8px))) {
  .unitRow{
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
}

.unitRow:hover{
  border-color:rgba(255,255,255,0.18);
  box-shadow:0 14px 34px rgba(0,0,0,0.14);
}

.unitMain{ flex:1; min-width:0; }

.unitTop{
  display:flex;
  align-items:baseline;
  gap:10px;
  flex-wrap:wrap;
}

.unitCode{
  font-weight:800;
  font-size:18px;
  letter-spacing:0.6px;
}

/* User-facing apartment label — "Stan br. X" */
.unitAptLabel{
  font-weight:800;
  font-size:17px;
  letter-spacing:0.3px;
  min-width:130px;
  flex-shrink:0;
}

/* Technical BM unit ID shown as secondary/muted reference */
.unitCodeMuted{
  font-size:10px;
  font-weight:500;
  color:rgba(15,23,42,.42);
  letter-spacing:0.3px;
}

.unitBadge{
  padding:4px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:700;
  background:rgba(255,255,255,0.20);
  border:1px solid rgba(255,255,255,0.22);
}

.unitOwner{
  font-weight:700;
  color:rgba(15,23,42,.92);
}

.unitMeta{
  margin-top:6px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  font-size:13px;
  opacity:0.75;
}

.unitActions{
  display:flex;
  gap:10px;
  flex:0 0 auto;
}

@media (max-width: 720px){
  .unitRow{
    flex-direction:column;
    align-items:stretch;
  }
  .unitActions{
    justify-content:flex-end;
  }
}
/* ===========================
   ENTERPRISE++ POLISH (Units)
   =========================== */

.unitRow{
  position: relative;
}

/* subtle left accent for scanability */
.unitRow::before{
  content:"";
  position:absolute;
  left: 8px;
  top: 10px;
  bottom: 10px;
  width: 2px;
  border-radius: 2px;
  background: rgba(255,255,255,0.16);
}

/* tighten typography & spacing */
.unitTop{
  gap: 8px;
}

.unitOwner{
  color:rgba(15,23,42,.92);
}

/* meta as chips */
.unitMeta{
  margin-top: 8px;
  gap: 10px;
  opacity: 1;
}

.unitMeta span{
  display:inline-flex;
  align-items:center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.12);
}

.unitMeta b{
  font-weight: 800;
}

/* actions alignment */
.unitActions{
  gap: 8px;
}

.unitActions .btn{
  height: 40px;
  padding: 0 14px;
  border-radius: 999px;
}

/* make primary feel more "enterprise" without changing global button system */
.unitActions .btnPrimary{
  font-weight: 900;
  box-shadow: 0 10px 22px rgba(0,0,0,0.12);
}

/* mobile: remove left accent so it doesn't look like a bug */
@media (max-width: 720px){
  .unitRow::before{ display:none; }
  .unitActions .btn{ width: auto; }
}

/* ===========================
   FINANSIJE – dues row dark typography (scoped, no global impact)
   =========================== */
#page-finansije .unitRow .unitCode { color: rgba(10,18,30,0.92); }
#page-finansije .unitRow .unitOwner { color: rgba(10,18,30,0.92); font-weight:700; }
#page-finansije .unitRow .unitMeta { color: rgba(10,18,30,0.62); }

/* ===========================
   FINANSIJE – normalize duesGrid row spacing to match adminUnitsList
   =========================== */
#page-finansije .duesGrid {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
#page-finansije .duesGrid .unitRow {
  margin: 0;
}

/* ===========================
   FINANSIJE – finFiltersRow: one-row toolbar layout
   (TIP → KATEGORIJA → PERIODIČNI IZVEŠTAJ → PRETRAGA)
   =========================== */
#page-finansije .finFiltersRow{
  display:flex;
  gap:10px;
  align-items:flex-end;
  flex-wrap:nowrap;
}

#page-finansije .finFilt{ min-width: 0; }

#page-finansije .finFiltTip{ flex: 0 0 16%; }
#page-finansije .finFiltCat{ flex: 0 0 20%; }
#page-finansije .finFiltReport{ flex: 0 0 30%; }
#page-finansije .finFiltSearch{ flex: 1 1 auto; }

#page-finansije .finFiltTip select,
#page-finansije .finFiltCat select,
#page-finansije .finFiltSearch input{
  width:100%;
}

#page-finansije .finFiltSearch input{ max-width: 360px; }

/* compact report controls inside the same column */
#page-finansije .finFiltReport .finReportControls{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:nowrap;
}

#page-finansije .finFiltReport input[type="date"]{
  width: 120px;
  max-width: 100%;
  height: var(--fin-ctrl-h);
  font-size: var(--fin-ctrl-font);
  padding: var(--fin-ctrl-pad-y) var(--fin-ctrl-pad-x);
  border-radius: 12px;
  background: rgba(248,250,252,.88);
  border: 1px solid rgba(15,23,42,.14);
}

#page-finansije .finFiltReport .btn{
  height: var(--fin-ctrl-h);
  padding: 0 12px;
  min-width: 64px;
  border-radius: 999px;
  white-space: nowrap;
}

/* responsive fallback: allow wrapping nicely on smaller widths */
@media (max-width: 1100px){
  #page-finansije .finFiltersRow{ flex-wrap:wrap; }
  #page-finansije .finFiltTip{ flex: 1 1 180px; }
  #page-finansije .finFiltCat{ flex: 1 1 220px; }
  #page-finansije .finFiltReport{ flex: 1 1 360px; }
  #page-finansije .finFiltSearch{ flex: 1 1 260px; }
  #page-finansije .finFiltReport .finReportControls{ flex-wrap:wrap; }
}
@media (max-width: 430px){
  #page-finansije .finFiltReport{ flex: 1 1 100%; }
}
/* =====================================
   FINANSIJE – suzi tab dugmad
   ===================================== */

#page-finansije .finTabs{
  display:flex;
  justify-content:center;
  gap:20px;
}

#page-finansije .finTabs .btn{
  flex: 0 0 36%;   /* ~30% uže */
  max-width: 420px;
}

@media (max-width: 430px) {
  #page-finansije .finTabs {
    flex-wrap: wrap;
    gap: 10px;
  }
  #page-finansije .finTabs .btn {
    flex: 1 1 140px;
    min-width: 0;
  }
}

/* hide SORTIRANJE on Dugovanja tab only */
#page-finansije #finTabWrapDues .duesSortBlock { display: none !important; }
@media (max-width: 720px){
  body.mode-portal .fRow .half.field{
    min-width: 0 !important;
    flex: 1 1 100%;
  }
}
@media (min-width: 721px){
  #finTabWrapDues .half.field,
  #finTabWrapDues .duesToolbar .field{
    min-width: 220px;
  }
}
@media (max-width: 720px){

  /* 1) Obezbedi da polje može da se shrink-uje u flex-u */
  body.mode-portal #finTabWrapDues .fRow > .half.field{
    min-width: 0;
    flex: 1 1 100%;
  }

  /* 2) Napravi clipping boundary baš na month field wrapperu */
  body.mode-portal #finTabWrapDues .fRow > .half.field:has(#duesStartMonth){
    overflow: hidden;
    border-radius: 18px;
  }

  /* 3) Month input: osiguraj da ne prelazi širinu */
  body.mode-portal #duesStartMonth{
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  /* 4) WebKit/Chromium month shadow parts – klipuj tekst */
  body.mode-portal #duesStartMonth::-webkit-datetime-edit,
  body.mode-portal #duesStartMonth::-webkit-datetime-edit-fields-wrapper{
    max-width: 100%;
    overflow: hidden;
  }
}
@media (max-width: 720px){
  body.mode-portal #finTabWrapDues .half.field{
    overflow: hidden;
    border-radius: 18px;
  }
}

/* PATCH: Mobile Finance Text Clipping + Date Radius Fix */
@media (max-width: 720px) {
  /* FIX 1a – Text clipping: override overflow:hidden on all .half.field wrappers.
     Root cause: body.mode-portal #finTabWrapDues .half.field (line ~3674) set
     overflow:hidden + border-radius:18px on every label+input container, causing
     the 18px corner radius to clip the first character of every field label.
     The container carries no visible background/border, so overflow:visible
     is safe here. Same selector, later position in the file wins. */
  body.mode-portal #finTabWrapDues .half.field {
    overflow: visible;
  }

  /* FIX 1b – Also remove overflow:hidden from the duesStartMonth wrapper.
     The :has(#duesStartMonth) rule (line ~3653) has specificity 2,4,1.
     Adding #page-finansije to the selector raises specificity to 3,4,1,
     outranking the conflicting rule without needing !important.
     The wrapper no longer needs overflow:hidden because FIX 2 applies it
     directly to the input element instead. */
  body.mode-portal #page-finansije #finTabWrapDues .fRow > .half.field:has(#duesStartMonth) {
    overflow: visible;
  }

  /* FIX 2 – Sharp top-right corner on month input: apply overflow:hidden
     directly to #duesStartMonth so the native ::-webkit-calendar-picker-indicator
     shadow DOM is clipped to the input's own border-radius, rounding all four
     corners of the field (including top-right) correctly. */
  body.mode-portal #duesStartMonth {
    overflow: hidden;
    border-radius: 18px;
  }
}

.duesPayItem{
  display:flex;
  align-items:center;
  gap:8px;
  padding:5px 8px;
  border-radius:7px;
  background:rgba(15,23,42,.04);
  margin-bottom:4px;
  font-size:.85em;
}
.duesPayItemRemove{
  margin-left:auto;
  cursor:pointer;
  color:#dc2626;
  font-weight:700;
  background:none;
  border:none;
  padding:0 4px;
  font-size:1em;
  line-height:1;
}

/* ================= STANOVI PAGE — TOP GRID LAYOUT ================= */

.stanoviTopGrid{
  display:grid;
  grid-template-columns:1fr;
  gap:16px;
  align-items:start;
}

/* ================= DASHBOARD PAGE ================= */

.dashWrap{
  display:flex;
  flex-direction:column;
  gap:20px;
}

.dashViewGlobal,
.dashViewCurrent{
  display:flex;
  flex-direction:column;
  gap:20px;
}

.dashStatsRow{
  display:flex;
  flex-wrap:wrap;
  gap:20px;
  margin-top:14px;
}

.dashStatCard{
  flex:1 1 140px;
  background:rgba(241,245,249,.85);
  border:1px solid rgba(15,23,42,.14);
  border-radius:18px;
  padding:14px 18px;
  box-shadow:0 4px 16px rgba(2,6,23,.08);
  text-align:center;
}

.dashStatCard .dsc-label{
  font-size:11px;
  font-weight:700;
  color:rgba(15,23,42,.55);
  text-transform:uppercase;
  letter-spacing:.08em;
  margin-bottom:6px;
}

.dashStatCard .dsc-value{
  font-size:20px;
  font-weight:900;
  color:rgba(15,23,42,.92);
  word-break:break-word;
}

.dashEmptyState{
  font-size:13px;
  color:rgba(15,23,42,.45);
  padding:16px 12px;
  text-align:center;
  font-style:italic;
}

/* ---- Dashboard: Brze akcije (quick action buttons used by Aktivna zgrada) ---- */

.dashQuickActionBtn{
  flex:1 1 auto;
  background:rgba(241,245,249,.90);
  border:1px solid rgba(15,23,42,.16);
  border-radius:12px;
  padding:10px 16px;
  font-size:13px;
  font-weight:700;
  color:rgba(15,23,42,.82);
  cursor:pointer;
  transition:background .15s, box-shadow .15s, border-color .15s;
  text-align:center;
  box-shadow:0 2px 8px rgba(2,6,23,.06);
  white-space:nowrap;
}

.dashQuickActionBtn:hover,
.dashQuickActionBtn:focus{
  background:rgba(224,231,240,.98);
  border-color:rgba(15,23,42,.28);
  box-shadow:0 4px 14px rgba(2,6,23,.11);
  outline:none;
}

/* ---- Dashboard: Aktivna zgrada (STEP 18) ---- */

.dashActiveBuilding .dab-title{
  font-size:18px;
  font-weight:900;
  color:rgba(15,23,42,.92);
  margin-bottom:4px;
  word-break:break-word;
}

.dashActiveBuilding .dab-meta{
  font-size:12px;
  color:rgba(15,23,42,.52);
  margin-bottom:14px;
}

.dab-stats{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:16px;
}

.dab-stat{
  flex:1 1 120px;
  background:rgba(241,245,249,.85);
  border:1px solid rgba(15,23,42,.12);
  border-radius:14px;
  padding:10px 14px;
  display:flex;
  flex-direction:column;
  gap:3px;
  box-shadow:0 2px 8px rgba(2,6,23,.05);
}

.dab-stat-label{
  font-size:10px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:rgba(15,23,42,.5);
}

.dab-stat-value{
  font-size:16px;
  font-weight:900;
  color:rgba(15,23,42,.88);
  word-break:break-word;
}

.dab-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

/* ---- Dashboard: Zgrada info card (.dashBuildingInfo) ---- */

.dashBuildingInfo h3{
  margin-bottom:2px;
}

.zgrInfo-subtitle{
  font-size:14px;
  font-weight:700;
  color:rgba(15,23,42,.68);
  margin-bottom:16px;
  word-break:break-word;
}

.zgrInfo-grid{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-bottom:18px;
}

.zgrInfo-row{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  padding:7px 12px;
  background: transparent;
  border:1px solid rgba(15,23,42,.1);
  border-radius:10px;
}

.zgrInfo-label{
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.07em;
  color: #0f172a;
  flex-shrink:0;
}

.zgrInfo-value{
  font-size:13px;
  font-weight:700;
  color: #0f172a;
  text-align:right;
  word-break:break-word;
}

.zgrInfo-value--debt{
  color:rgba(185,28,28,.9);
}

/* ---- Dashboard: Module launcher grid (STEP 1 refactor) ---- */

.dashModuleGrid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
  gap:14px;
  margin-top:14px;
}

.dashModuleNoBidHint{
  font-size:12px;
  color:rgba(15,23,42,.55);
  font-weight:600;
  margin:4px 0 10px;
}

/* .dashModuleCard uses .card for all visual appearance (bg, radius, padding, shadow).
   Only layout and interaction overrides are added here. */
.dashModuleCard{
  display:flex;
  flex-direction:column;
  gap:8px;
  cursor:pointer;
  text-align:left;
  border:none;
  width:100%;
  transition:box-shadow .15s,background .15s;
}

.dashModuleCard:hover,
.dashModuleCard:focus{
  box-shadow:0 6px 20px rgba(2,6,23,.13);
  outline:none;
  background:rgba(241,245,249,.98);
}

.dashModuleCard:focus-visible{
  outline:2px solid rgba(59,130,246,.7);
  outline-offset:2px;
}

.dashModuleCard--disabled{
  opacity:.45;
  cursor:not-allowed;
}

.dashModuleCard--disabled:hover,
.dashModuleCard--disabled:focus{
  box-shadow:var(--shadow);
  background:rgba(248,250,252,.86);
}

/* Phase 2: cards with a live non-zero badge are promoted to priority.
   Uses a subtle blue-left accent border and a cooler background to draw
   attention without overwhelming the layout. */
.dashModuleCard--priority{
  border-left:3px solid rgba(37,99,235,.55);
  background:rgba(239,246,255,.85);
}
.dashModuleCard--priority:hover,
.dashModuleCard--priority:focus{
  background:rgba(219,234,254,.95);
  box-shadow:0 6px 20px rgba(37,99,235,.15);
}

/* Warn variant: cards whose badge is a "!" attention signal (e.g. finansije
   with debtors/critical health).  Uses amber instead of blue to distinguish
   an alert state from a simple unread-count signal. */
.dashModuleCard--priority-warn{
  border-left:3px solid rgba(217,119,6,.65);
  background:rgba(255,251,235,.88);
}
.dashModuleCard--priority-warn:hover,
.dashModuleCard--priority-warn:focus{
  background:rgba(254,243,199,.98);
  box-shadow:0 6px 20px rgba(217,119,6,.15);
}

.dashModuleCardHead{
  display:flex;
  align-items:center;
  gap:8px;
}

.dashModuleCardTitle{
  font-size:14px;
  font-weight:900;
  color:rgba(15,23,42,.88);
  text-transform:uppercase;
  letter-spacing:.1em;
  flex:1 1 auto;
}

.dashModuleCardDesc{
  font-size:12px;
  color:rgba(15,23,42,.55);
  font-weight:600;
  line-height:1.4;
}

.dashModuleCardBadge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:rgba(59,130,246,.15);
  color:rgba(37,99,235,.92);
  border-radius:10px;
  padding:2px 8px;
  font-size:11px;
  font-weight:800;
  min-width:22px;
  white-space:nowrap;
}

/* Warn badge: amber styling for "!" attention signals (distinct from blue count badges). */
.dashModuleCardBadge--warn{
  background:rgba(245,158,11,.18);
  color:rgba(180,83,9,.95);
}

/* =========================================================
   DASHBOARD TOP ROW — two cards side by side
   ========================================================= */
.dashTopRow{
  display:flex;
  gap:20px;
  align-items:flex-start;
}
.dashTopRow>.card{
  flex:1 1 0;
  min-width:0;
}
@media(max-width:700px){
  .dashTopRow{flex-direction:column;}
  .dashTopRow>.card{flex:unset;width:100%;}
}

/* =========================================================
   DASHBOARD OPERATIONS ROW — operational widgets side by side,
   wrapping to 2+1 on medium widths and stacking on mobile
   ========================================================= */
.dashOpRow{
  display:flex;
  flex-wrap:wrap;
  gap:20px;
  align-items:flex-start;
}
.dashOpRow>.card{
  flex:1 1 260px;
  min-width:0;
}
@media(max-width:700px){
  .dashOpRow{flex-direction:column;}
  .dashOpRow>.card{flex:unset;width:100%;}
}

/* =========================================================
   BUILDINGS OVERVIEW WIDGET (.dashBldOverview)
   ========================================================= */
.dashBldOverview{
  cursor:pointer;
  transition:box-shadow .15s,background .15s;
}
.dashBldOverview:hover{
  box-shadow:0 6px 20px rgba(2,6,23,.13);
  background:rgba(241,245,249,.98);
}
.dashBldToggleBtn{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  background:none;
  border:none;
  padding:0;
  cursor:pointer;
  text-align:left;
  font:inherit;
  color:inherit;
}
.dashBldToggleBtn:focus-visible{
  outline:2px solid rgba(59,130,246,.7);
  outline-offset:2px;
  border-radius:4px;
}
.dashBldToggleLabel{
  font-size:15px;
  font-weight:800;
  color:rgba(15,23,42,.88);
}
.dashBldToggleMeta{
  display:flex;
  align-items:center;
  gap:8px;
  flex-shrink:0;
}
.dashBldToggleArrow{
  font-size:11px;
  color:rgba(15,23,42,.45);
  transition:transform .2s;
  display:inline-block;
}
.dashBldOverview--open .dashBldToggleArrow{
  transform:rotate(180deg);
}
.dashBldPanel{
  margin-top:12px;
}
.dashBldCount{
  font-size:12px;
  font-weight:700;
  color:rgba(15,23,42,.5);
  text-transform:uppercase;
  letter-spacing:.07em;
}
.dashBldSearch{
  display:block;
  width:100%;
  box-sizing:border-box;
  padding:8px 12px;
  border:1px solid rgba(15,23,42,.2);
  border-radius:10px;
  font-size:13px;
  font-weight:600;
  color:rgba(15,23,42,.85);
  background:rgba(248,250,252,.9);
  margin-bottom:10px;
  outline:none;
  transition:border-color .15s,box-shadow .15s;
}
.dashBldSearch:focus{
  border-color:rgba(59,130,246,.55);
  box-shadow:0 0 0 3px rgba(59,130,246,.12);
}
.dashBldList{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:6px;
  max-height:260px;
  overflow-y:auto;
}
.dashBldSwitchBtn{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  background:rgba(241,245,249,.85);
  border:1px solid rgba(15,23,42,.12);
  border-radius:12px;
  padding:10px 14px;
  cursor:pointer;
  text-align:left;
  transition:background .15s,border-color .15s,box-shadow .15s;
}
.dashBldSwitchBtn:hover,
.dashBldSwitchBtn:focus{
  background:rgba(224,231,240,.98);
  border-color:rgba(15,23,42,.25);
  box-shadow:0 3px 10px rgba(2,6,23,.09);
  outline:none;
}
.dashBldSwitchBtn:focus-visible{
  outline:2px solid rgba(59,130,246,.7);
  outline-offset:2px;
}
.dashBldItem--active .dashBldSwitchBtn{
  background:rgba(219,234,254,.7);
  border-color:rgba(59,130,246,.35);
}
.dashBldItemInfo{
  display:flex;
  flex-direction:column;
  gap:2px;
  flex:1 1 auto;
  min-width:0;
}
.dashBldItemTitle{
  font-size:13px;
  font-weight:800;
  color:rgba(15,23,42,.88);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.dashBldItemAddress{
  font-size:11px;
  color:rgba(15,23,42,.5);
  font-weight:600;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
/* Inline row: address + compact rating stars on the same line */
.dashBldItemAddrRow{
  display:flex;
  align-items:center;
  gap:4px;
  min-width:0;
}
.dashBldItemAddrRow .dashBldItemAddress{
  flex:1 1 auto;
  min-width:0;
}
.dashBldItemAddrRow .puRatingCompact{
  flex-shrink:0;
  margin-left:0;
}
.dashBldActiveBadge{
  flex-shrink:0;
  font-size:10px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:rgba(37,99,235,.9);
  background:rgba(219,234,254,.8);
  border:1px solid rgba(59,130,246,.3);
  border-radius:8px;
  padding:2px 8px;
}
.dashBldItemRight{
  display:flex;
  align-items:center;
  gap:6px;
  flex-shrink:0;
}
.dashBldHealth{
  flex-shrink:0;
  width:8px;
  height:8px;
  border-radius:50%;
  display:inline-block;
}
.dashBldHealth--critical{
  background:#ef4444;
  box-shadow:0 0 0 2px rgba(239,68,68,.25);
}
.dashBldHealth--attention{
  background:#f59e0b;
  box-shadow:0 0 0 2px rgba(245,158,11,.25);
}
.dashBldHealth--ok{
  background:#22c55e;
  box-shadow:0 0 0 2px rgba(34,197,94,.25);
}

/* =========================================================
   CLICKABLE OPERATIONAL WIDGETS
   Cards that carry data-dash-widget-open are interactive entry
   points — show pointer cursor and a visible focus ring.
   ========================================================= */
.card[data-dash-widget-open]{
  cursor:pointer;
}
.card[data-dash-widget-open]:focus-visible{
  outline:2px solid #2563eb;
  outline-offset:2px;
}

/* =========================================================
   DEBTORS WIDGET (.dashDebtors)
   ========================================================= */
.dashDebtList{
  list-style:none;
  margin:10px 0 0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.dashDebtItem{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  background:rgba(241,245,249,.85);
  border:1px solid rgba(15,23,42,.1);
  border-radius:12px;
  padding:9px 14px;
}
.dashDebtItemLeft{
  display:flex;
  flex-direction:column;
  gap:2px;
  flex:1 1 auto;
  min-width:0;
}
.dashDebtItemBldg{
  font-size:12px;
  font-weight:700;
  color:rgba(15,23,42,.7);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.dashDebtItemAddr{
  font-size:11px;
  font-weight:500;
  color:rgba(15,23,42,.45);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.dashDebtItemUnit{
  font-size:13px;
  font-weight:800;
  color:rgba(15,23,42,.88);
}
.dashDebtItemOwner{
  font-size:12px;
  font-weight:600;
  color:rgba(15,23,42,.78);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.dashDebtItemAmt{
  flex-shrink:0;
  font-size:13px;
  font-weight:900;
  color:rgba(185,28,28,.9);
  white-space:nowrap;
}

/* =========================================================
   COLLECTIONS WIDGET (.dashCollections)
   ========================================================= */
.dashCollSummary{
  font-size:12px;
  font-weight:700;
  color:rgba(15,23,42,.52);
  margin:6px 0 4px;
  letter-spacing:.02em;
}

/* =========================================================
   PROBLEMS WIDGET (.dashProblems)
   ========================================================= */
.dashProbList{
  list-style:none;
  margin:10px 0 0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.dashProbItem{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  background:rgba(241,245,249,.85);
  border:1px solid rgba(15,23,42,.1);
  border-radius:12px;
  padding:9px 14px;
}
.dashProbItemLeft{
  display:flex;
  flex-direction:column;
  gap:3px;
  flex:1 1 auto;
  min-width:0;
}
.dashProbItemMeta{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:6px;
}
.dashProbItemPri,
.dashProbItemStat{
  flex-shrink:0;
  font-size:10px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.06em;
  border-radius:6px;
  padding:2px 7px;
}
.dashProbItemPri--urgent{
  color:rgba(153,27,27,.95);
  background:rgba(254,226,226,.85);
  border:1px solid rgba(239,68,68,.3);
}
.dashProbItemPri--high{
  color:rgba(154,52,18,.95);
  background:rgba(255,237,213,.85);
  border:1px solid rgba(249,115,22,.3);
}
.dashProbItemPri--medium{
  color:rgba(92,67,14,.95);
  background:rgba(254,249,195,.85);
  border:1px solid rgba(234,179,8,.3);
}
.dashProbItemPri--low{
  color:rgba(20,83,45,.95);
  background:rgba(220,252,231,.85);
  border:1px solid rgba(34,197,94,.3);
}
.dashProbItemStat--open{
  color:rgba(30,86,160,.95);
  background:rgba(219,234,254,.8);
  border:1px solid rgba(59,130,246,.25);
}
.dashProbItemStat--in_progress{
  color:rgba(88,28,135,.95);
  background:rgba(243,232,255,.8);
  border:1px solid rgba(168,85,247,.25);
}
.dashProbItemBldg{
  font-size:12px;
  font-weight:700;
  color:rgba(15,23,42,.7);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.dashProbItemAddr{
  font-size:11px;
  font-weight:500;
  color:rgba(15,23,42,.45);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.dashProbItemUnit{
  font-size:11px;
  font-weight:700;
  color:rgba(15,23,42,.6);
  white-space:nowrap;
}
.dashProbItemTitle{
  font-size:13px;
  font-weight:600;
  color:rgba(15,23,42,.88);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.dashProbItemDate{
  flex-shrink:0;
  font-size:11px;
  font-weight:500;
  color:rgba(15,23,42,.45);
  white-space:nowrap;
}


/* =========================================================
   ATTENTION WIDGET (.dashAttention)
   ========================================================= */
.dashAttList{
  list-style:none;
  margin:10px 0 0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.dashAttItem{
  display:flex;
  align-items:center;
  gap:10px;
  background:rgba(241,245,249,.85);
  border:1px solid rgba(15,23,42,.1);
  border-radius:10px;
  padding:8px 12px;
  cursor:pointer;
  transition:background .15s;
}
.dashAttItem:hover{
  background:rgba(226,232,240,.95);
}
.dashAttItem:focus-visible{
  outline:2px solid rgba(59,130,246,.7);
  outline-offset:2px;
}
.dashAttItemSev{
  flex-shrink:0;
  font-size:10px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.06em;
  border-radius:6px;
  padding:2px 7px;
}
.dashAttItemSev--critical{
  color:rgba(153,27,27,.95);
  background:rgba(254,226,226,.85);
  border:1px solid rgba(239,68,68,.3);
}
.dashAttItemSev--warning{
  color:rgba(154,52,18,.95);
  background:rgba(255,237,213,.85);
  border:1px solid rgba(249,115,22,.3);
}
.dashAttItemSev--info{
  color:rgba(30,86,160,.95);
  background:rgba(219,234,254,.8);
  border:1px solid rgba(59,130,246,.25);
}
.dashAttItemLabel{
  font-size:13px;
  font-weight:600;
  color:rgba(15,23,42,.85);
  flex:1 1 auto;
  min-width:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.dashAttItemBldg{
  display:block;
  font-size:11px;
  font-weight:500;
  color:rgba(71,85,105,.7);
  margin-top:2px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* =========================================================
   DEBT REMINDERS PREVIEW WIDGET (.dashOpomene)
   "Pregled opomena" — manage-only, current-building-scoped.
   ========================================================= */
.dashOpomeneCount{
  font-size:12px;
  font-weight:700;
  color:rgba(15,23,42,.55);
  margin:0 0 10px;
  text-transform:uppercase;
  letter-spacing:.04em;
}
.dashOpomeneList{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:14px;
}
.dashOpomeneItem{
  border:1px solid rgba(15,23,42,.1);
  border-radius:8px;
  padding:10px 12px;
  background:rgba(15,23,42,.02);
}
.dashOpomeneMeta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px 10px;
  margin-bottom:8px;
}
.dashOpomeneUnit{
  font-size:14px;
  font-weight:800;
  color:rgba(15,23,42,.92);
}
.dashOpomeneOwner{
  font-size:12px;
  color:rgba(15,23,42,.6);
}
.dashOpomeneStage{
  font-size:11px;
  font-weight:700;
  letter-spacing:.04em;
  border-radius:4px;
  padding:2px 6px;
  text-transform:uppercase;
}
.dashOpomeneStage--30{
  background:rgba(234,179,8,.15);
  color:rgba(133,77,14,.9);
}
.dashOpomeneStage--60{
  background:rgba(249,115,22,.15);
  color:rgba(154,52,18,.9);
}
.dashOpomeneStage--90{
  background:rgba(220,38,38,.13);
  color:rgba(153,27,27,.9);
}
.dashOpomeneDebt{
  font-size:13px;
  font-weight:700;
  color:rgba(220,38,38,.85);
  margin-left:auto;
}
.dashOpomeneOldest,
.dashOpomeneDays{
  font-size:12px;
  color:rgba(15,23,42,.55);
}
.dashOpomeneForm{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.dashOpomeneSubjectInp{
  width:100%;
  box-sizing:border-box;
  font-size:13px;
  font-weight:600;
  padding:6px 8px;
  border:1px solid rgba(15,23,42,.18);
  border-radius:6px;
  background:#fff;
  color:rgba(15,23,42,.9);
}
.dashOpomeneSubjectInp:focus{
  outline:2px solid rgba(59,130,246,.5);
  outline-offset:1px;
}
.dashOpomeneSubjectInp:disabled,
.dashOpomeneBodyTA:disabled{
  background:rgba(15,23,42,.04);
  color:rgba(15,23,42,.45);
  cursor:not-allowed;
}
.dashOpomeneBodyTA{
  width:100%;
  box-sizing:border-box;
  font-size:12px;
  padding:6px 8px;
  border:1px solid rgba(15,23,42,.18);
  border-radius:6px;
  resize:vertical;
  background:#fff;
  color:rgba(15,23,42,.85);
  font-family:inherit;
}
.dashOpomeneBodyTA:focus{
  outline:2px solid rgba(59,130,246,.5);
  outline-offset:1px;
}
.dashOpomeneActions{
  display:flex;
  gap:8px;
  align-items:center;
}
.dashOpomeneSendBtn{
  font-size:12px;
  font-weight:700;
  padding:6px 14px;
  border-radius:6px;
  border:none;
  cursor:pointer;
  background:#0f172a;
  color:#fff;
  transition:.15s;
  flex:0 0 auto;
}
.dashOpomeneSendBtn:hover:not(:disabled){
  background:#1e293b;
}
.dashOpomeneSendBtn:disabled,
.dashOpomeneSendBtn--sent{
  background:rgba(22,163,74,.85);
  cursor:default;
}
/* Resend button — secondary/muted, clearly distinct from the primary send */
.dashOpomeneResendBtn{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:5px 11px;
  border-radius:8px;
  font-size:11px;
  font-weight:600;
  cursor:pointer;
  border:1px solid rgba(15,23,42,.18);
  background:rgba(241,245,249,.9);
  color:rgba(15,23,42,.6);
  transition:background .15s,color .15s;
}
.dashOpomeneResendBtn:hover:not(:disabled){
  background:rgba(241,245,249,1);
  color:rgba(15,23,42,.85);
}
.dashOpomeneResendBtn:disabled,
.dashOpomeneResendBtn--sent{
  opacity:.7;
  cursor:default;
}
/* Print / PDF button — tertiary ghost action */
.dashOpomenePrintBtn{
  display:inline-flex;
  align-items:center;
  padding:5px 11px;
  border-radius:8px;
  font-size:11px;
  font-weight:600;
  cursor:pointer;
  border:1px solid rgba(15,23,42,.15);
  background:transparent;
  color:rgba(15,23,42,.5);
  transition:background .15s,color .15s,border-color .15s;
  white-space:nowrap;
}
.dashOpomenePrintBtn:hover{
  background:rgba(15,23,42,.05);
  color:rgba(15,23,42,.75);
  border-color:rgba(15,23,42,.25);
}
/* Already-sent badge in meta row */
.dashOpomeneSentBadge{
  font-size:11px;
  font-weight:700;
  letter-spacing:.03em;
  border-radius:4px;
  padding:2px 7px;
  background:rgba(22,163,74,.12);
  color:rgba(21,128,61,.9);
  text-transform:uppercase;
}
/* Compact send-history row (count + last sent timestamp) */
.dashOpomeneSentHistoryRow{
  padding:2px 0 4px;
}
.dashOpomeneSentHistory{
  font-size:11px;
  color:rgba(15,23,42,.45);
  font-style:italic;
}
/* Dim the whole item row when already sent */
.dashOpomeneItem--sent{
  opacity:.72;
}

/* ── Summary counter bar ── */
.dashOpomeneSummaryBar{
  display:flex;
  flex-wrap:wrap;
  gap:6px 10px;
  margin-bottom:10px;
}
.dashOpomeneSummaryItem{
  display:flex;
  align-items:baseline;
  gap:4px;
  font-size:12px;
  padding:3px 8px;
  border-radius:5px;
  background:rgba(15,23,42,.05);
}
.dashOpomeneSummaryNum{
  font-weight:800;
  font-size:13px;
  color:rgba(15,23,42,.85);
}
.dashOpomeneSummaryLbl{
  color:rgba(15,23,42,.55);
}
.dashOpomeneSummaryItem--30 .dashOpomeneSummaryNum{ color:rgba(133,77,14,.9); }
.dashOpomeneSummaryItem--60 .dashOpomeneSummaryNum{ color:rgba(154,52,18,.9); }
.dashOpomeneSummaryItem--90 .dashOpomeneSummaryNum{ color:rgba(153,27,27,.9); }
.dashOpomeneSummaryItem--sent .dashOpomeneSummaryNum{ color:rgba(21,128,61,.9); }

/* ── Filter chips ── */
.dashOpomeneFilters{
  display:flex;
  flex-wrap:wrap;
  gap:5px;
  margin-bottom:10px;
}
.dashOpomeneFilterBtn{
  font-size:11px;
  font-weight:700;
  padding:4px 10px;
  border-radius:20px;
  border:1px solid rgba(15,23,42,.18);
  background:#fff;
  color:rgba(15,23,42,.65);
  cursor:pointer;
  transition:.12s;
  line-height:1.4;
}
.dashOpomeneFilterBtn:hover{
  background:rgba(15,23,42,.06);
  color:rgba(15,23,42,.85);
}
.dashOpomeneFilterBtn--active{
  background:#0f172a;
  color:#fff;
  border-color:#0f172a;
}

/* ── Bulk send bar ── */
.dashOpomeneBulkBar{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:12px;
  flex-wrap:wrap;
}
.dashOpomeneBulkSendBtn{
  font-size:12px;
  font-weight:700;
  padding:6px 14px;
  border-radius:6px;
  border:none;
  cursor:pointer;
  background:rgba(59,130,246,.9);
  color:#fff;
  transition:.15s;
}
.dashOpomeneBulkSendBtn:hover:not(:disabled){
  background:rgba(37,99,235,.95);
}
.dashOpomeneBulkSendBtn:disabled{
  opacity:.6;
  cursor:default;
}
.dashOpomeneBulkResult{
  font-size:12px;
  font-weight:600;
  color:rgba(21,128,61,.9);
}

/* ── CSS-driven filter show/hide ──
   The <ul> carries data-opomene-list="all|30|60|90|unsent".
   Each <li> carries data-opomena-stage="30|60|90" and
   class "dashOpomeneItem--sent" when already sent. ── */
[data-opomene-list="30"] [data-opomena-stage]:not([data-opomena-stage="30"]){ display:none; }
[data-opomene-list="60"] [data-opomena-stage]:not([data-opomena-stage="60"]){ display:none; }
[data-opomene-list="90"] [data-opomena-stage]:not([data-opomena-stage="90"]){ display:none; }
[data-opomene-list="unsent"] .dashOpomeneItem--sent{ display:none; }

/* ── Disabled-state banner (global or per-building off) ── */
.dashOpomeneDisabledBanner{
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  border-radius:8px;
  background:rgba(241,245,249,.85);
  border:1px solid rgba(15,23,42,.1);
  margin-top:4px;
}
.dashOpomeneDisabledIcon{
  font-size:16px;
  flex:0 0 auto;
}
.dashOpomeneDisabledMsg{
  font-size:12px;
  font-weight:600;
  color:rgba(15,23,42,.55);
}

/* ── Status bar: Globalno / Ova zgrada / Aktivni nivoi ── */
.dashOpomeneStatusBar{
  display:flex;
  flex-wrap:wrap;
  gap:5px 6px;
  margin-bottom:8px;
}
.dashOpomeneStatusChip{
  display:inline-flex;
  align-items:center;
  font-size:10px;
  font-weight:700;
  letter-spacing:.03em;
  padding:2px 7px;
  border-radius:20px;
  white-space:nowrap;
}
.dashOpomeneStatusChip--on{
  background:rgba(220,252,231,.85);
  color:rgba(21,128,61,.9);
  border:1px solid rgba(74,222,128,.4);
}
.dashOpomeneStatusChip--off{
  background:rgba(254,226,226,.85);
  color:rgba(153,27,27,.9);
  border:1px solid rgba(252,165,165,.4);
}
.dashOpomeneStatusChip--neutral{
  background:rgba(241,245,249,.9);
  color:rgba(15,23,42,.65);
  border:1px solid rgba(15,23,42,.12);
}

/* ── Footer / signature settings ── */
.dashOpomeneFooterSettings{
  margin-top:14px;
  padding:10px 12px;
  border:1px solid rgba(15,23,42,.1);
  border-radius:8px;
  background:rgba(241,245,249,.55);
}
.dashOpomeneFooterLabel{
  display:block;
  font-size:11px;
  font-weight:700;
  color:rgba(15,23,42,.6);
  margin-bottom:5px;
  letter-spacing:.02em;
}
.dashOpomeneFooterTA{
  width:100%;
  box-sizing:border-box;
  padding:6px 8px;
  border:1px solid rgba(15,23,42,.18);
  border-radius:6px;
  font-size:12px;
  font-family:inherit;
  line-height:1.45;
  background:#fff;
  color:rgba(15,23,42,.85);
  resize:vertical;
}
.dashOpomeneFooterTA:focus{
  outline:none;
  border-color:rgba(59,130,246,.55);
  box-shadow:0 0 0 2px rgba(59,130,246,.15);
}
.dashOpomeneFooterActions{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:6px;
}
.dashOpomeneFooterSaveBtn{
  font-size:11px;
  font-weight:700;
  padding:4px 12px;
  border-radius:6px;
  border:none;
  cursor:pointer;
  background:rgba(15,23,42,.75);
  color:#fff;
  transition:background .15s;
}
.dashOpomeneFooterSaveBtn:hover{
  background:rgba(15,23,42,.9);
}
.dashOpomeneFooterSaved{
  font-size:11px;
  font-weight:600;
  color:rgba(21,128,61,.9);
}

/* =========================================================
   DASHBOARD: Poslate opomene — sent-reminder log widget
   (.dashSentLog, .dashSentLogControls, .dashSentLogList, etc.)
   ========================================================= */
.dashSentLogControls{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:10px;
}
.dashSentLogSearch{
  flex:1 1 120px;
  min-width:80px;
  max-width:200px;
  padding:4px 8px;
  border:1px solid rgba(15,23,42,.18);
  border-radius:6px;
  font-size:12px;
  line-height:1.4;
  background:#fff;
  color:rgba(15,23,42,.85);
}
.dashSentLogSearch:focus{
  outline:none;
  border-color:rgba(59,130,246,.55);
  box-shadow:0 0 0 2px rgba(59,130,246,.15);
}
.dashSentLogCsvBtn{
  padding:4px 10px;
  border:1px solid rgba(15,23,42,.18);
  border-radius:6px;
  background:#fff;
  color:rgba(15,23,42,.7);
  font-size:12px;
  font-weight:600;
  cursor:pointer;
  white-space:nowrap;
  transition:background .15s,color .15s,border-color .15s;
}
.dashSentLogCsvBtn:hover{
  background:rgba(15,23,42,.06);
  border-color:rgba(15,23,42,.28);
}
.dashSentLogList{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.dashSentLogItem{
  display:grid;
  grid-template-columns:auto auto 1fr 2fr;
  align-items:baseline;
  gap:4px 10px;
  padding:6px 8px;
  border-radius:6px;
  background:rgba(241,245,249,.6);
  font-size:12px;
  line-height:1.4;
}
.dashSentLogItem--unitHidden{ display:none; }
[data-sentlog-list="30"] .dashSentLogItem:not([data-sentlog-stage="30"]){ display:none; }
[data-sentlog-list="60"] .dashSentLogItem:not([data-sentlog-stage="60"]){ display:none; }
[data-sentlog-list="90"] .dashSentLogItem:not([data-sentlog-stage="90"]){ display:none; }
.dashSentLogUnit{
  font-weight:700;
  color:rgba(15,23,42,.9);
  white-space:nowrap;
}
.dashSentLogStage{
  font-size:11px;
  font-weight:600;
  padding:1px 6px;
  border-radius:4px;
  white-space:nowrap;
  background:rgba(241,245,249,.9);
  border:1px solid rgba(15,23,42,.12);
  color:rgba(15,23,42,.6);
}
.dashSentLogStage--30{ background:rgba(254,243,199,.8); color:rgba(133,77,14,.9); border-color:rgba(133,77,14,.18); }
.dashSentLogStage--60{ background:rgba(254,226,226,.8); color:rgba(154,52,18,.9); border-color:rgba(154,52,18,.18); }
.dashSentLogStage--90{ background:rgba(254,202,202,.8); color:rgba(153,27,27,.9); border-color:rgba(153,27,27,.18); }
.dashSentLogDate{
  font-size:11px;
  color:rgba(15,23,42,.5);
  white-space:nowrap;
}
.dashSentLogSubject{
  color:rgba(15,23,42,.75);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
@media(max-width:700px){
  .dashSentLogItem{
    grid-template-columns:auto auto;
  }
  .dashSentLogDate,.dashSentLogSubject{ grid-column:1 / -1; }
}

/* =========================================================
   DASHBOARD WIDGET CTA BUTTON
   Compact call-to-action row at the bottom of summary widgets
   (.dashOpomene, .dashSentLog) that opens the detailed modal.
   ========================================================= */
.dashWidgetCta{
  margin-top:12px;
}
.dashWidgetCtaBtn{
  width:100%;
  padding:9px 16px;
  border:none;
  border-radius:8px;
  background:#0f172a;
  color:#fff;
  font-size:13px;
  font-weight:600;
  cursor:pointer;
  transition:.15s;
  letter-spacing:.01em;
}
.dashWidgetCtaBtn:hover{
  filter:brightness(.9);
}
.dashOpomeneSummaryNum--small{
  font-size:11px;
  font-weight:500;
}

/* =========================================================
   ADMIN: Global Debt Reminder Settings toggle
   (.adminGlobalReminderRow, .adminToggleSwitch, etc.)
   ========================================================= */
.adminGlobalReminderRow{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.adminGlobalReminderLabel{
  font-size:13px;
  font-weight:600;
  color:rgba(15,23,42,.8);
  cursor:pointer;
  flex:1 1 auto;
}
.adminGlobalReminderHint{
  font-size:11px;
  color:rgba(15,23,42,.5);
  margin:6px 0 0;
}
.adminGlobalReminderStatus{
  font-size:11px;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
  padding:2px 7px;
  border-radius:4px;
  background:rgba(22,163,74,.12);
  color:rgba(21,128,61,.9);
}
.adminGlobalReminderStatus--off{
  background:rgba(220,38,38,.1);
  color:rgba(153,27,27,.9);
}
/* Toggle switch */
.adminToggleSwitch{
  position:relative;
  display:inline-flex;
  width:40px;
  height:22px;
  cursor:pointer;
  flex:0 0 auto;
}
.adminToggleSwitch input{
  opacity:0;
  width:0;
  height:0;
  position:absolute;
}
.adminToggleSlider{
  position:absolute;
  inset:0;
  border-radius:22px;
  background:rgba(15,23,42,.18);
  transition:.2s;
}
.adminToggleSlider::before{
  content:"";
  position:absolute;
  width:16px;
  height:16px;
  left:3px;
  top:3px;
  border-radius:50%;
  background:#fff;
  transition:.2s;
  box-shadow:0 1px 3px rgba(0,0,0,.2);
}
.adminToggleSwitch input:checked + .adminToggleSlider{
  background:rgba(22,163,74,.85);
}
.adminToggleSwitch input:checked + .adminToggleSlider::before{
  transform:translateX(18px);
}
.adminToggleSwitch input:focus-visible + .adminToggleSlider{
  outline:2px solid rgba(59,130,246,.6);
  outline-offset:2px;
}

/* =========================================================
   PAGE: PORUKE (Messages) — STEP 1 read-only thread list
   ========================================================= */

.msgPage{
  padding:0 4px;
}

.msgToolbar{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:16px;
  padding-bottom:10px;
  border-bottom:1px solid rgba(15,23,42,.1);
}

.msgTitle{
  font-size:18px;
  font-weight:700;
  color:rgba(15,23,42,.9);
  margin:0;
}

.msgThreadList{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:0;
}

.msgThreadItem{
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:12px 14px;
  border-bottom:1px solid rgba(15,23,42,.08);
  cursor:pointer;
  border-radius:6px;
  transition:background .15s;
  outline:none;
}

.msgThreadItem:last-child{
  border-bottom:none;
}

.msgThreadItem:hover{
  background:rgba(241,245,249,.8);
}

.msgThreadItem:focus-visible{
  box-shadow:0 0 0 2px rgba(59,130,246,.5);
}

.msgThreadItem--selected{
  background:rgba(219,234,254,.55);
}

.msgThreadSubject{
  font-size:14px;
  font-weight:600;
  color:rgba(15,23,42,.9);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.msgMeta{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  align-items:center;
}

.msgMetaUnit,
.msgMetaKind,
.msgMetaStatus,
.msgMetaDate{
  font-size:11px;
  color:rgba(15,23,42,.55);
}

.msgMetaUnit::after,
.msgMetaKind::after,
.msgMetaStatus::after{
  content:" ·";
  margin-left:4px;
}

.msgMetaDate:last-child::after{
  content:"";
}

.msgEmptyState{
  padding:24px 0;
  text-align:center;
  color:rgba(15,23,42,.5);
  font-size:14px;
}

/* STEP 2: two-panel layout + detail view */
.msgLayout{
  display:flex;
  gap:0;
  align-items:flex-start;
  min-height:300px;
}

.msgListCol{
  flex:0 0 320px;
  max-width:320px;
  border-right:1px solid rgba(15,23,42,.1);
  overflow-y:auto;
}

.msgDetailCol{
  flex:1 1 0;
  min-width:0;
  padding:0 16px;
}

.msgDetail{
  display:flex;
  flex-direction:column;
  gap:16px;
}

.msgDetailHead{
  padding-bottom:12px;
  border-bottom:1px solid rgba(15,23,42,.1);
}

.msgDetailSubject{
  font-size:16px;
  font-weight:700;
  color:rgba(15,23,42,.9);
  margin-bottom:8px;
}

.msgDetailMeta{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.msgDetailMetaItem{
  font-size:12px;
  color:rgba(15,23,42,.6);
}

.msgDetailMetaItem strong{
  color:rgba(15,23,42,.75);
}

.msgMessageList{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.msgMessageItem{
  padding:12px 14px;
  background:rgba(241,245,249,.6);
  border-radius:6px;
  border:1px solid rgba(15,23,42,.07);
}

.msgMessageMeta{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
  margin-bottom:6px;
}

.msgMessageAuthor{
  font-size:12px;
  font-weight:600;
  color:rgba(15,23,42,.75);
}

.msgMessageDate{
  font-size:11px;
  color:rgba(15,23,42,.45);
}

.msgMessageBody{
  font-size:13px;
  color:rgba(15,23,42,.85);
  white-space:pre-wrap;
  word-break:break-word;
}

.msgDetailEmpty{
  padding:32px 0;
  text-align:center;
  color:rgba(15,23,42,.45);
  font-size:14px;
}

@media(max-width:680px){
  .msgLayout{
    flex-direction:column;
  }
  .msgListCol{
    flex:none;
    max-width:100%;
    width:100%;
    border-right:none;
    border-bottom:1px solid rgba(15,23,42,.1);
    padding-bottom:12px;
    max-height:40dvh;
    overflow-y:auto;
  }
  .msgDetailCol{
    padding:12px 0 0;
    width:100%;
  }
}

/* STEP 3: compose new thread */
.msgToolbarActions{
  margin-left:auto;
}

.msgNewThreadBtn{
  display:inline-block;
  padding:6px 14px;
  background:rgba(59,130,246,.9);
  color:#fff;
  border:none;
  border-radius:6px;
  font-size:13px;
  font-weight:600;
  cursor:pointer;
  transition:background .15s;
}
.msgNewThreadBtn:hover{
  background:rgba(37,99,235,.95);
}

.msgComposePanel{
  margin-bottom:16px;
  padding:16px;
  background:rgba(241,245,249,.7);
  border:1px solid rgba(15,23,42,.12);
  border-radius:8px;
}

.msgComposeField{
  display:flex;
  flex-direction:column;
  gap:4px;
  margin-bottom:12px;
}

.msgComposeLabel{
  font-size:12px;
  font-weight:600;
  color:rgba(15,23,42,.7);
}

.msgComposeInput{
  padding:7px 10px;
  border:1px solid rgba(15,23,42,.2);
  border-radius:6px;
  font-size:13px;
  color:rgba(15,23,42,.9);
  background:#fff;
  outline:none;
  transition:border-color .15s;
}
.msgComposeInput:focus{
  border-color:rgba(59,130,246,.6);
  box-shadow:0 0 0 2px rgba(59,130,246,.2);
}

.msgComposeTextarea{
  padding:7px 10px;
  border:1px solid rgba(15,23,42,.2);
  border-radius:6px;
  font-size:13px;
  color:rgba(15,23,42,.9);
  background:#fff;
  outline:none;
  resize:vertical;
  font-family:inherit;
  transition:border-color .15s;
}
.msgComposeTextarea:focus{
  border-color:rgba(59,130,246,.6);
  box-shadow:0 0 0 2px rgba(59,130,246,.2);
}

.msgComposeError{
  font-size:12px;
  color:rgba(185,28,28,.9);
  min-height:16px;
  margin-bottom:8px;
}

.msgComposeActions{
  display:flex;
  gap:10px;
  align-items:center;
}
.msgComposeActions button[type="button"]{
  padding:6px 14px;
  background:transparent;
  border:1px solid rgba(15,23,42,.2);
  border-radius:6px;
  font-size:13px;
  cursor:pointer;
  color:rgba(15,23,42,.7);
  transition:background .15s;
}
.msgComposeActions button[type="button"]:hover{
  background:rgba(15,23,42,.06);
}

/* STEP 4: reply inside selected thread */
.msgReplyBox{
  margin-top:16px;
  padding:14px;
  background:rgba(241,245,249,.7);
  border:1px solid rgba(15,23,42,.12);
  border-radius:8px;
}

.msgReplyLabel{
  display:block;
  font-size:12px;
  font-weight:600;
  color:rgba(15,23,42,.7);
  margin-bottom:6px;
}

.msgReplyTextarea{
  width:100%;
  box-sizing:border-box;
  padding:7px 10px;
  border:1px solid rgba(15,23,42,.2);
  border-radius:6px;
  font-size:13px;
  color:rgba(15,23,42,.9);
  background:#fff;
  outline:none;
  resize:vertical;
  font-family:inherit;
  transition:border-color .15s;
}
.msgReplyTextarea:focus{
  border-color:rgba(59,130,246,.6);
  box-shadow:0 0 0 2px rgba(59,130,246,.2);
}

.msgReplyError{
  font-size:12px;
  color:rgba(185,28,28,.9);
  min-height:16px;
  margin:6px 0;
}

.msgReplyActions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  margin-top:8px;
}

.msgReplySendBtn{
  display:inline-block;
  padding:6px 14px;
  background:rgba(59,130,246,.9);
  color:#fff;
  border:none;
  border-radius:6px;
  font-size:13px;
  font-weight:600;
  cursor:pointer;
  transition:background .15s;
}
.msgReplySendBtn:hover{
  background:rgba(37,99,235,.95);
}

/* =========================================================
   Prijave (Issues) page
   ========================================================= */
.issPage{
  padding:0 4px;
}

.issToolbar{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:16px;
  padding-bottom:10px;
  border-bottom:1px solid rgba(15,23,42,.1);
}

.issTitle{
  font-size:18px;
  font-weight:700;
  color:rgba(15,23,42,.9);
  margin:0;
}

.issList{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:0;
}

.issItem{
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:12px 14px;
  border-bottom:1px solid rgba(15,23,42,.08);
  cursor:pointer;
  border-radius:6px;
  transition:background .15s;
  outline:none;
}

.issItem:last-child{
  border-bottom:none;
}

.issItem:hover{
  background:rgba(241,245,249,.8);
}

.issItem:focus-visible{
  box-shadow:0 0 0 2px rgba(59,130,246,.5);
}

.issItem--selected{
  background:rgba(219,234,254,.55);
}

.issItemTitle{
  font-size:14px;
  font-weight:600;
  color:rgba(15,23,42,.9);
}

.issMeta{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  font-size:12px;
  color:rgba(15,23,42,.55);
}

.issMetaUnit,
.issMetaCat,
.issMetaPri,
.issMetaStat,
.issMetaDate{
  display:inline-block;
}

.issMetaUnit::after,
.issMetaCat::after,
.issMetaPri::after,
.issMetaStat::after{
  content:" ·";
  margin-left:6px;
}

.issMetaDate::after{
  content:"";
}

.issMetaRole--stanar{
  color:#0369a1;
  font-weight:600;
}

.issDetailMetaItem--stanar{
  color:#0369a1;
  font-weight:600;
}

.issEmptyState{
  padding:24px 14px;
  color:rgba(15,23,42,.45);
  font-size:14px;
  text-align:center;
}

/* STEP 2: two-panel layout + detail view */
.issLayout{
  display:flex;
  gap:0;
  align-items:flex-start;
  min-height:300px;
}

.issListCol{
  flex:0 0 320px;
  max-width:320px;
  border-right:1px solid rgba(15,23,42,.1);
  overflow-y:auto;
}

.issDetailCol{
  flex:1 1 0;
  min-width:0;
  padding:0 16px;
}

.issDetail{
  display:flex;
  flex-direction:column;
  gap:16px;
}

.issDetailHead{
  padding-bottom:12px;
  border-bottom:1px solid rgba(15,23,42,.1);
}

.issDetailTitle{
  font-size:16px;
  font-weight:700;
  color:rgba(15,23,42,.9);
  margin-bottom:8px;
}

.issDetailMeta{
  display:flex;
  flex-wrap:wrap;
  gap:8px 16px;
  font-size:13px;
  color:rgba(15,23,42,.65);
}

.issDetailMetaItem{
  display:inline-block;
}

.issDetailBody{
  font-size:14px;
  color:rgba(15,23,42,.8);
  line-height:1.6;
  white-space:pre-wrap;
  word-break:break-word;
}

.issDetailImgWrap{
  line-height:0;
}

.issDetailImg{
  max-width:100%;
  max-height:260px;
  object-fit:contain;
  border-radius:6px;
  display:block;
  cursor:pointer;
}

.issDetailEmpty{
  padding:24px 0;
  text-align:center;
  color:rgba(15,23,42,.45);
  font-size:14px;
}

/* Thumbnail indicator in issue list rows */
.issRowImgIndicator{
  margin-left:auto;
  flex-shrink:0;
}
.issRowImgIndicator img{
  width:32px;
  height:32px;
  object-fit:cover;
  border-radius:4px;
  display:block;
  pointer-events:none;
}

@media (max-width:640px){
  .issLayout{
    flex-direction:column;
  }
  .issListCol{
    flex:none;
    max-width:100%;
    width:100%;
    border-right:none;
    border-bottom:1px solid rgba(15,23,42,.1);
    max-height:40dvh;
    overflow-y:auto;
  }
  .issDetailCol{
    padding:12px 0 0;
  }
}

/* --- Issue detail action buttons (manage/admin) --- */
.issDetailActions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:12px;
  align-items:center;
}

.issActionBtn{
  min-height:44px;
  padding:8px 14px;
  border-radius:8px;
  border:1px solid rgba(15,23,42,.18);
  background:rgba(15,23,42,.06);
  cursor:pointer;
  font-weight:700;
}

/* --- Issue status badge --- */
.issItemMain{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.issItemTitle{
  min-width:0;
  flex:1 1 auto;
}

.issStatusBadge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:72px;
  padding:4px 8px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  letter-spacing:.03em;
  white-space:nowrap;
}

.issStatusBadge--open{
  background:rgba(220,38,38,.16);
  color:#ef4444;
  border:1px solid rgba(220,38,38,.28);
}

.issStatusBadge--in_progress{
  background:rgba(245,158,11,.16);
  color:#f59e0b;
  border:1px solid rgba(245,158,11,.28);
}

.issStatusBadge--resolved{
  background:rgba(34,197,94,.16);
  color:#22c55e;
  border:1px solid rgba(34,197,94,.28);
}

.issItemBadges{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}

.issPriorityBadge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:72px;
  padding:4px 8px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  letter-spacing:.03em;
  white-space:nowrap;
}

.issPriorityBadge--low{
  background:rgba(148,163,184,.16);
  color:#94a3b8;
  border:1px solid rgba(148,163,184,.28);
}

.issPriorityBadge--normal{
  background:rgba(59,130,246,.16);
  color:#3b82f6;
  border:1px solid rgba(59,130,246,.28);
}

.issPriorityBadge--high{
  background:rgba(249,115,22,.16);
  color:#f97316;
  border:1px solid rgba(249,115,22,.30);
}

.adminEditMgrInfo{
  margin-bottom:12px;
  font-size:13px;
  line-height:1.4;
}

.adminEditMgrCurrent{
  font-weight:500;
}

.adminEditMgrNotice{
  opacity:.75;
  margin-top:4px;
}

/* ===== Modal: Prijavi kvar (stanar) — viewport-aware ===== */
#prijaviKvarModal .cModalCard{
  max-height: calc(100dvh - 24px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#prijaviKvarModal .cModalBody{
  overflow-y: auto;
  min-height: 0;
  flex: 1;
}

#prijaviKvarModal .cModalActions{
  position: sticky;
  bottom: 0;
  background: rgba(241,245,249,.96);
  padding-top: 8px;
  flex-shrink: 0;
}

/* Slightly reduce field spacing inside this modal only */
#prijaviKvarModal .field{
  margin-top: 8px;
}

/* Manager contact card inside Prijavi kvar modal */
#prijaviKvarModal .pkMgrCard{
  background: rgba(239,246,255,.75);
  border: 1px solid rgba(59,130,246,.2);
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 10px;
  font-size: 13px;
  line-height: 1.5;
}
#prijaviKvarModal .pkMgrTitle{
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: rgba(15,23,42,.45);
  margin-bottom: 4px;
}
#prijaviKvarModal .pkMgrName{
  font-weight: 600;
  color: rgba(15,23,42,.9);
}
#prijaviKvarModal .pkMgrPhone{
  color: #1d4ed8;
  font-weight: 600;
}
#prijaviKvarModal .pkMgrMeta{
  color: rgba(15,23,42,.65);
  margin-top: 2px;
}
#prijaviKvarModal .pkMgrEmpty{
  color: rgba(15,23,42,.45);
  font-style: italic;
}

/* ===== Poverenje upravniku — Manager Rating ===== */

/* Compact preview card lives inside page-home, not the header. */
#tenantManagerRating{
  margin-top:12px;
}

/* Vertical wrapper that holds the balance card on desktop.
   Lives inside #topRightHeaderSlot; width is set by the balance card child. */
#topRightBalanceStack{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:6px;
}

/* ---- Compact clickable preview card (tenant home page) ---- */
.puManagerRatingPreview{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  padding:10px 14px;
  border-radius:14px;
  background:rgba(255,255,255,0.65);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(245,158,11,0.25);
  box-shadow:0 4px 12px rgba(0,0,0,0.04);
  cursor:pointer;
  text-align:left;
  transition:transform .15s ease, box-shadow .15s ease;
  box-sizing:border-box;
}
.puManagerRatingPreview:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 18px rgba(0,0,0,0.07);
}
.puManagerRatingPreviewIcon{
  font-size:18px;
  flex-shrink:0;
  width:34px;
  height:34px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:9px;
  background:rgba(245,158,11,0.12);
}
.puManagerRatingPreviewBody{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:1px;
}
.puManagerRatingPreviewLabel{
  font-weight:700;
  font-size:13px;
  color:#0f172a;
}
.puManagerRatingPreviewMeta{
  font-size:11px;
  color:rgba(15,23,42,0.6);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.puManagerRatingPreviewStars{
  display:flex;
  gap:1px;
  flex-shrink:0;
}
.puManagerRatingPreviewStars .puStar{
  font-size:14px;
}
.puManagerRatingPreviewArrow{
  font-size:16px;
  color:rgba(15,23,42,0.3);
  flex-shrink:0;
  margin-left:2px;
}

.puManagerRatingSection{
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:10px 12px;
  border-radius:14px;
  background:var(--glass);
  border:1px solid var(--border);
  box-shadow:var(--shadow);
  width:100%;
  box-sizing:border-box;
}

.puManagerRatingLabel{
  font-weight:700;
  font-size:12px;
  color:#0f172a;
}

.puManagerRatingStars{
  display:flex;
  gap:0;
  align-items:center;
  justify-content:space-between; /* stretch stars evenly across full width */
}

/* Common star base */
.puStar{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:22px; /* reduced from 26px for compact placement in rightCol */
  line-height:1;
  padding:0;
  border:none;
  background:transparent;
  cursor:default;
  transition:transform .12s ease, color .12s ease;
}

/* Interactive stars (tenant) */
button.puStar{
  cursor:pointer;
  border-radius:4px;
}

button.puStar:focus-visible{
  outline:2px solid #3b82f6;
  outline-offset:2px;
}

button.puStar:hover,
button.puStar:hover ~ button.puStar{
  color:#f59e0b !important;
}

.puStar.puStarFilled{
  color:#f59e0b;
}

.puStar.puStarEmpty{
  color:rgba(15,23,42,0.18);
}

/* Hover: highlight up-to hovered star */
.puManagerRatingStars:hover button.puStar{
  color:#f59e0b;
}

.puManagerRatingStars button.puStar:hover ~ button.puStar{
  color:rgba(15,23,42,0.18);
}

.puManagerRatingAgg{
  font-size:11px;
  color:rgba(15,23,42,0.65);
}

.puManagerRatingOwn{
  font-size:11px;
  color:#0f172a;
  font-weight:600;
}

.puManagerRatingOwnNone{
  font-weight:400;
  color:rgba(15,23,42,0.5);
}

/* Manager / Admin compact rating chip */
.puRatingCompact{
  display:inline-flex;
  align-items:center;
  gap:2px;
  font-size:11px;
  vertical-align:middle;
  color:#f59e0b;
  margin-left:6px;
}

.puRatingCompact .puStar{
  font-size:12px;
}

.puRatingCompactVal{
  color:#92400e;
  font-weight:600;
  margin-left:2px;
}

.puRatingCompactCnt{
  color:rgba(15,23,42,0.5);
  font-weight:400;
}

/* Empty-state compact chip (no ratings yet) */
.puRatingCompactEmpty{
  opacity:0.45;
}

/* Building switcher list item with rating */
.puBuildingSwitchItemRating{
  display:inline-flex;
  align-items:center;
  gap:2px;
  font-size:11px;
  color:#f59e0b;
  margin-top:1px;
}

.puBuildingSwitchItemRating .puStar{
  font-size:11px;
}

.puBuildingSwitchItemRating .puRatingCompactVal{
  color:#92400e;
  font-weight:600;
}

/* ===== Manager info card inside "Poverenje upravniku" modal ===== */

.puManagerInfo {
  margin: 10px 0 12px;
  padding: 12px 14px;
  border: 1px solid rgba(15, 23, 42, .10);
  border-radius: 16px;
  background: rgba(255, 255, 255, .55);
}

.puManagerInfoTitle {
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #64748b;
  margin-bottom: 6px;
}

.puManagerInfoName {
  font-size: 15px;
  font-weight: 900;
  color: #0f172a;
  margin-bottom: 8px;
}

.puManagerInfoGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 12px;
}

.puManagerInfoGrid div {
  min-width: 0;
}

.puManagerInfoGrid span {
  display: block;
  font-size: 11px;
  font-weight: 800;
  color: #64748b;
  margin-bottom: 2px;
}

.puManagerInfoGrid strong {
  display: block;
  font-size: 13px;
  color: #0f172a;
  overflow-wrap: anywhere;
}

@media (max-width: 430px) {
  .puManagerInfoGrid {
    grid-template-columns: 1fr;
  }
}

/* ===== Admin: Upravnici — two-panel layout + detail view ===== */
.uprLayout{
  display:flex;
  gap:0;
  align-items:flex-start;
  min-height:300px;
  margin-top:12px;
}

.uprListCol{
  flex:0 0 300px;
  max-width:300px;
  border-right:1px solid rgba(15,23,42,.1);
  overflow-y:auto;
  max-height:70vh;
}

.uprDetailCol{
  flex:1 1 0;
  min-width:0;
  padding:0 0 0 16px;
}

.uprItem{
  display:flex;
  flex-direction:column;
  gap:3px;
  padding:10px 12px;
  border-bottom:1px solid rgba(15,23,42,.08);
  cursor:pointer;
  border-radius:6px;
  outline:none;
  transition:background .12s;
}

.uprItem:last-child{ border-bottom:none; }
.uprItem:hover{ background:rgba(241,245,249,.8); }
.uprItem:focus-visible{ box-shadow:0 0 0 2px rgba(59,130,246,.5); }

.uprItem--selected{ background:rgba(219,234,254,.55); }

.uprItemTitle{
  font-size:13px;
  font-weight:700;
  color:rgba(15,23,42,.9);
}

.uprItemMeta{
  font-size:12px;
  color:rgba(15,23,42,.55);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.uprDetailEmpty{
  padding:24px 0;
  text-align:center;
  color:rgba(15,23,42,.45);
  font-size:14px;
}

.uprDetail{
  display:flex;
  flex-direction:column;
  gap:16px;
}

.uprDetailHead{
  padding-bottom:12px;
  border-bottom:1px solid rgba(15,23,42,.1);
}

.uprDetailTitle{
  font-size:16px;
  font-weight:700;
  color:rgba(15,23,42,.9);
}

.uprDetailFields{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.uprDetailField{
  display:flex;
  gap:10px;
  font-size:13px;
  align-items:baseline;
}

.uprDetailLabel{
  flex:0 0 140px;
  font-weight:700;
  color:rgba(15,23,42,.55);
}

.uprDetailValue{
  color:rgba(15,23,42,.85);
}

.uprDetailSection{
  display:flex;
  flex-direction:column;
}

.uprDetailSectionTitle{
  font-size:13px;
  font-weight:800;
  color:rgba(15,23,42,.65);
  text-transform:uppercase;
  letter-spacing:.06em;
  margin-bottom:8px;
}

.uprBldgList{
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:6px;
}

.uprBldgItem{
  display:flex;
  align-items:baseline;
  gap:8px;
  font-size:13px;
}

.uprBldgLabel{
  color:rgba(15,23,42,.85);
  font-weight:600;
}

.uprBldgAddr{
  color:rgba(15,23,42,.5);
  font-weight:400;
}

@media (max-width:640px){
  .uprLayout{
    flex-direction:column;
  }
  .uprListCol{
    flex:none;
    max-width:100%;
    width:100%;
    border-right:none;
    border-bottom:1px solid rgba(15,23,42,.1);
    max-height:none;
  }
  .uprDetailCol{
    padding:12px 0 0;
  }
}

/* ===== Admin: Upravnici — edit form ===== */
.uprEditForm{
  display:flex;
  flex-direction:column;
  gap:2px;
}

/* =============================================================
   STAGE 2 — Dashboard mobile responsive (CSS-only patch)
   All rules are scoped to dashboard selectors and wrapped in
   mobile/tablet media queries so desktop is unaffected.
   No JS, no data logic, no router touched.
   ============================================================= */

/* ── 1 & 4. Phone ≤430px: spacing + module grid single-column ── */
@media (max-width: 430px) {
  .dashWrap {
    gap: 14px;
    /* Extra bottom clearance so AI FAB (fixed, bottom-right) never covers
       the last dashboard card or action button (req. 8). */
    padding-bottom: 76px;
  }

  .dashTopRow,
  .dashOpRow {
    gap: 14px;
  }

  /* Tighter card padding inside the dashboard only */
  .dashWrap .card {
    padding: clamp(14px, 4vw, 20px);
  }

  /* Module launcher: single column so cards are not cramped tiles */
  .dashModuleGrid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .dashModuleCard {
    min-width: 0;
  }
}

/* ── 2. Very narrow phones ≤360px: recover horizontal space ── */
@media (max-width: 360px) {
  .dashWrap .card {
    padding: 14px;
    border-radius: 20px;
  }

  /* Keep single-column at ≤360px (overrides auto-fill minmax) */
  .dashModuleGrid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}

/* ── 3. Dashboard tab row ≤430px: shrink safely, ellipsis on address ── */
@media (max-width: 430px) {
  .dashTabRow {
    gap: 8px !important;
  }

  /* Both tab buttons must shrink below their natural width */
  .dashTabGlobal,
  .dashTabCurrent {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* Hide the small sublabel text on very narrow phones to avoid tab overflow */
@media (max-width: 400px) {
  .dashTabRow .navSubLabel {
    display: none;
  }
}

/* ── 5. Reminder action rows: wrap buttons instead of overflowing ── */
.dashOpomeneActions {
  flex-wrap: wrap;
}

.dashOpomeneSendBtn,
.dashOpomeneResendBtn,
.dashOpomenePrintBtn {
  min-width: 0;
}

/* ── 6. Problem items ≤360px: stack date below title ── */
@media (max-width: 360px) {
  .dashProbItem {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
  }

  .dashProbItemDate {
    align-self: flex-start;
  }
}

/* ── 7. Text overflow protection on module card titles ── */
.dashModuleCardTitle {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* =============================================================
   STAGE 2.1 — Dashboard tab ellipsis fix (CSS-only patch)
   Targets .dashTabGlobal inner text span so ellipsis fires on
   the text directly (not on the outer button which contains
   nested inline-flex children).
   No JS, no data logic, no router touched.
   ============================================================= */

/* Allow .dashTabInner to shrink below its natural width so the
   text child can clip instead of pushing the button wider. */
@media (max-width: 430px) {
  .dashTabGlobal .dashTabInner {
    min-width: 0;
  }

  /* Ellipsis on the text label itself; icon (.dashTabIcon) has
     flex:0 0 auto so it is never clipped or hidden. */
  .dashTabGlobal .dashTabText {
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* =====================================================
   INFOSTAN — scrollable table wrappers (Stage 3B)
   Prevents wide tables from overflowing on 320–430px.
   Applied only to specific InfoStan tables, not globally.
   ===================================================== */
.infostanTableScroll {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.infostanTableScroll > table {
  min-width: 640px;
}

.infostanTableScrollCompact {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.infostanTableScrollCompact > table {
  min-width: 420px;
}

/* =====================================================
   Admin credential masked view (Part D)
   Scoped classes — no global button style changes.
   ===================================================== */
.adminCredBox {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-left: 4px;
  vertical-align: middle;
}

.adminCredMasked {
  font-weight: 900;
  letter-spacing: .08em;
}

.adminCredNotice {
  color: #64748b;
  font-size: 12px;
}

.adminCredBtn {
  min-height: 28px;
  padding: 2px 8px;
  font-size: 12px;
}

.adminCredBtn[disabled] {
  opacity: .45;
  cursor: not-allowed;
}

@media (max-width: 430px) {
  .adminCredBox {
    display: flex;
    margin-left: 0;
    margin-top: 6px;
  }
}


/* =====================================================
   Managers switch buildings through the dashboard
   "Pregled svih zgrada" flow; keep top quick switcher
   admin-only.
   ===================================================== */
body.role-manage #topRightSwitchSlot {
  display: none !important;
}

/* =====================================================
   PHASE 1A — Mobile performance: reduce expensive
   compositing/paint cost. Desktop appearance unchanged.
   Keeps translucent surfaces (background-color rgba)
   for visual identity, only removes blur/filter effects
   that are GPU-expensive on mid/low-end mobile.
   ===================================================== */
@media (max-width: 720px) {
  /* Avoid fixed-attachment cover repaint on scroll */
  body {
    background-attachment: scroll;
  }

  /* Drop full-viewport backdrop blur + contrast/saturate filter */
  body::before {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    filter: none;
  }

  /* Hide blurred radial-gradient ambient layer on mobile */
  .ambient {
    display: none;
  }

  /* Glass surfaces: keep translucent background, drop blur */
  .unitRow,
  #financeList li.finCard,
  #page-finansije .duesRow,
  .duesRow,
  .sidebar,
  .cModalCard {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}