:root{
  --app-bg:#0f1e22;           /* glavna pozadina (dark teal) */
  --app-panel:#162629;        /* plohe / kartice */
  --app-primary:#3b82f6;      /* primarna plava */
  --app-success:#22c55e;
  --app-danger:#ef4444;
  --app-muted:#9ca3af;
  --app-radius:14px;
  --app-shadow:0 10px 30px rgba(0,0,0,.25);
}

/* Global */
html,body{height:100%}
body{
  background:var(--app-bg);
  color:#e5e7eb;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Header bar */
.app-header{
  position:sticky; top:0; z-index:1040;
  background: linear-gradient(180deg,#0d6efd 0%, #0a58ca 100%);
  border-bottom:1px solid rgba(255,255,255,.12);
  box-shadow: var(--app-shadow);
}
.app-header .brand{line-height:1}
.app-header .brand .logo{font-weight:800}
.app-header .brand small{opacity:.85}

/* KPI pills */
.kpi-wrap{gap:.75rem; flex-wrap:wrap}
.kpi{
  background: rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.15);
  border-radius:999px;
  padding:.35rem .75rem;
  display:flex; align-items:center; gap:.4rem;
  font-weight:600; white-space:nowrap;
}
.kpi .val{font-variant-numeric: tabular-nums}

/* User chips */
.user-pill{display:inline-flex;align-items:center;gap:.35rem;padding:.2rem .6rem;border-radius:999px;background:rgba(255,255,255,.15);font-size:.9rem}
.dot{width:.5rem;height:.5rem;border-radius:999px;display:inline-block}
.dot.online{background:var(--app-success)} .dot.idle{background:#f59e0b}

/* Main pane */
.app-main{padding-top:1.25rem; padding-bottom:2.5rem}

/* Panels / cards */
.panel{background:var(--app-panel); border-radius:var(--app-radius); box-shadow:var(--app-shadow); border:1px solid rgba(255,255,255,.06)}
.panel-header{padding:1rem 1.25rem; border-bottom:1px solid rgba(255,255,255,.06)}
.panel-body{padding:1rem 1.25rem}

/* Forms / inputs */
.form-select, .form-control{
  background:#0e1b1e; color:#e5e7eb; border:1px solid rgba(255,255,255,.12);
}
.form-select:focus, .form-control:focus{
  border-color:var(--app-primary); box-shadow:0 0 0 .2rem rgba(59,130,246,.25);
}

/* Buttons: ujednačeno */
.btn{border-radius:10px}
.btn-primary{background:var(--app-primary); border-color:var(--app-primary)}
.btn-outline-primary{color:#cfe3ff; border-color:#3b82f6}
.btn-outline-primary:hover{background:rgba(59,130,246,.1)}
.btn-outline-light{border-color:rgba(255,255,255,.6)}
.btn-danger{background:var(--app-danger); border-color:var(--app-danger)}

/* Tables */
.table-dark{--bs-table-bg: #121f23; --bs-table-striped-bg:#13252a; --bs-table-striped-color:#e5e7eb}
.table thead th{background:#1b2d31; color:#cde4ea; border-bottom:1px solid rgba(255,255,255,.08)}
.table td,.table th{vertical-align:middle}

/* Toasts (fixed) */
.toast-stack{
  position:fixed; top:74px; right:16px; z-index:2000;
  display:flex; flex-direction:column; gap:10px; max-width:420px; width:calc(100vw - 32px);
  pointer-events:none;
}
.toast-item{pointer-events:auto; border-radius:12px; box-shadow:var(--app-shadow); margin:0; animation:toast-in .2s ease-out}
.toast-item .btn-close{float:right; filter:invert(1)}
@keyframes toast-in{from{opacity:0;transform:translateY(-6px)} to{opacity:1;transform:translateY(0)}}
.toast-hide{animation:toast-out .18s ease-in forwards}
@keyframes toast-out{to{opacity:0;transform:translateY(-6px)}}