/* =========================================================
   Base
   ========================================================= */
:root{
  --nsz-blue:#1E67A7;   /* glasanje */
  --nsz-yellow:#F2C100; /* komisija */
  --bg-soft:#F6F7F9;
  --text:#111827;
  --muted:#6b7280;
  --card-shadow: 0 .25rem .75rem rgba(0,0,0,.06);
  --radius: 1rem;
}

html, body{
  height: 100%;
}

body{
  background: var(--bg-soft);
  color: var(--text);
}

/* =========================================================
   Role-based themes
   ========================================================= */
body[data-role="admin"]{
  --role-accent:#0F766E;
  --role-accent-hover:#0b5f59;
}

body[data-role="komisija"]{
  --role-accent:var(--nsz-yellow);
  --role-accent-hover:#d9ad00;
}

body[data-role="glasanje"]{
  --role-accent:var(--nsz-blue);
  --role-accent-hover:#165487;
}

/* =========================================================
   Topbar (logo + utilities)
   ========================================================= */
.topbar{
  background:#fff;
  border-bottom: 1px solid rgba(0,0,0,.06);
}

.link-topbar{
  color: #334155;
  text-decoration: none;
}
.link-topbar:hover{
  text-decoration: underline;
}

/* brand inline in topbar */
.topbar .brand-inline{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  text-decoration:none;
  color:inherit;
}
.topbar .brand-inline .brand-title{
  font-weight:600;
  letter-spacing:.01em;
}
.topbar .brand-inline img{
  height:34px;
  width:auto;
}

.topbar .brand-inline img{
  height:40px;
  width:auto;
}

/* =========================================================
   Role badge
   ========================================================= */
.role-badge{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  padding:.35rem .55rem;
  border-radius:999px;
  font-weight:700;
  letter-spacing:.03em;
  font-size:.75rem;
  line-height:1;
  border:1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(6px);
  white-space: nowrap;
}
.role-dot{
  width:10px;
  height:10px;
  border-radius:999px;
  background: var(--role-accent);
  box-shadow: 0 0 0 3px rgba(0,0,0,.04);
}

/* =========================================================
   Brandbar = navigation strip (classic bootstrap navbar)
   ========================================================= */
.brandbar{
  background: var(--role-accent);
}

.brandbar .app-nav{
  padding: .55rem 0;
}

/* menu links on strip */
.brandbar .navbar-nav .nav-link{
  color: rgba(255,255,255,.92);
  font-weight: 600;
  padding: .5rem .65rem;
  border-radius: .75rem;
  line-height: 1.1;
}
.brandbar .navbar-nav .nav-link:hover{
  background: rgba(255,255,255,.12);
  color:#fff;
}
.brandbar .navbar-nav .nav-link.active{
  background: rgba(255,255,255,.18);
  color:#fff;
}

/* role badge on strip becomes bright pill */
.brandbar .role-badge{
  background: rgba(255,255,255,.92);
  border-color: rgba(255,255,255,.35);
}

/* hamburger icon on strip */
.brandbar .navbar-toggler{
  border-color: rgba(255,255,255,.45);
}
.brandbar .navbar-toggler:focus{
  box-shadow: 0 0 0 .2rem rgba(255,255,255,.18);
}
.brandbar .navbar-toggler-icon{
  filter: invert(1); /* make it white */
}

/* CTA button on strip */
.brandbar .btn-strip{
  --bs-btn-bg: rgba(255,255,255,.12);
  --bs-btn-border-color: rgba(255,255,255,.35);
  --bs-btn-hover-bg: rgba(255,255,255,.20);
  --bs-btn-hover-border-color: rgba(255,255,255,.55);
  --bs-btn-color:#fff;
}

/* =========================================================
   Cards / typography helpers
   ========================================================= */
.card{
  border: 1px solid rgba(0,0,0,.06);
  border-radius: var(--radius);
  box-shadow: var(--card-shadow);
}

.card-accent-left{
  border-left: 6px solid var(--role-accent);
}

.section-title{
  display:inline-block;
  border-bottom: 3px solid var(--role-accent);
  padding-bottom: .25rem;
}


.icon{
  width: 22px;
  height: 22px;
}

/* =========================================================
   Hero
   ========================================================= */
.app-hero .tint{
  border-radius: var(--radius);
  background: rgba(255,255,255,.85);
  box-shadow: var(--card-shadow);
  border: 1px solid rgba(0,0,0,.06);
}

/* role-specific hero tint */
body[data-role="admin"] .app-hero .tint{
  background: linear-gradient(90deg, rgba(15,118,110,.12), rgba(242,193,0,.08)), rgba(255,255,255,.88);
}
body[data-role="komisija"] .app-hero .tint{
  background: linear-gradient(90deg, rgba(242,193,0,.14), rgba(30,103,167,.10)), rgba(255,255,255,.88);
}
body[data-role="glasanje"] .app-hero .tint{
  background: linear-gradient(90deg, rgba(30,103,167,.12), rgba(242,193,0,.08)), rgba(255,255,255,.88);
}

/* =========================================================
   Buttons
   ========================================================= */
.btn-role-primary{
  --bs-btn-bg: var(--role-accent);
  --bs-btn-border-color: var(--role-accent);
  --bs-btn-hover-bg: var(--role-accent-hover);
  --bs-btn-hover-border-color: var(--role-accent-hover);
  --bs-btn-color:#fff;
}

/* subtle status badge sizing */
.badge-status{
  font-weight: 700;
}
/* =========================================================
   Ikonice
   ========================================================= */
.bi{
  vertical-align:-0.1em;
}

h1 > .bi{
  font-size:1.25rem;
  line-height:1;
  vertical-align:-0.1em;
}