:root{
  --bg:#0b0f14; --panel:#0f1621; --panel-2:#0b1220;
  --border:#1e2a36; --accent:#2a74ff; --accent-2:#7aa4ff;
  --text:#e6eef7; --muted:#b7c6d9; --danger:#ff6b6b; --ok:#3ad29f;
  --radius:14px; --radius-sm:10px; --shadow:0 8px 26px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:linear-gradient(180deg,#0b0f14 0%,#0a0d12 100%);
  color:var(--text); font:15px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial;
}

/* Layout */
header,footer{padding:16px 0;border-bottom:1px solid var(--border);background:transparent}
.wrap{max-width:1100px;margin:0 auto;padding:0 18px}
.card{
  background:radial-gradient(1200px 500px at 20% -10%, #111a28 0%, #0d131e 55%, #0c121c 100%);
  height: 74%; height: fit-content;
  border:1px solid var(--border); border-radius:var(--radius); padding:20px; box-shadow:var(--shadow);
}
.card-compact{padding:14px}
.grid{display:grid; gap:14px}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:820px){ .grid-2{grid-template-columns:1fr} }

/* Typography */
h1,h2,h3{margin:0 0 10px}
h2{font-size:24px} h3{font-size:18px}
.muted{color:var(--muted)}

/* Inputs */
input,select,textarea{
  width:100%; padding:12px 12px; border-radius:12px;
  background:var(--panel-2); border:1px solid #223043; color:var(--text);
  outline:none; transition:border .15s, box-shadow .15s
}
input:focus,select:focus,textarea:focus{
  border-color:var(--accent); box-shadow:0 0 0 3px rgba(42,116,255,.15)
}
label{display:block; margin:6px 0 6px; color:var(--muted); font-size:13px}

/* Buttons */
button,.btn{
  display:inline-flex; align-items:center; gap:8px;
  background:linear-gradient(180deg,var(--accent) 0%, #215fe0 100%);
  color:#fff; border:0; padding:10px 14px; border-radius:12px; cursor:pointer;
}
.btn-secondary{background:#152235; color:#cfe3ff; border:1px solid #29405f}
.btn-ghost{background:transparent; border:1px solid var(--border)}
button:disabled{opacity:.6; cursor:not-allowed}

/* Table */
table{width:100%; border-collapse:separate; border-spacing:0 8px}
th{color:var(--muted); font-weight:600; text-align:left; padding:10px}
td{
  background:var(--panel); border:1px solid var(--border);
  padding:12px; vertical-align:middle;
}
td:first-child{border-radius:10px 0 0 10px} td:last-child{border-radius:0 10px 10px 0}

/* Badges */
.badge{padding:4px 10px; border-radius:999px; font-size:12px}
.badge-info{background:#132033; color:#9fd1ff; border:1px solid #274166}
.badge-ok{background:#10281d; color:#9ff3c7; border:1px solid #2a6b4c}
.badge-danger{background:#2b1316; color:#ff9ea4; border:1px solid #5c2830}

/* Login card centering */
.page-center{min-height:calc(100vh - 120px); display:grid; place-items:center}
.form-card{width:min(520px, 92vw)}

/* ===== Header / Topbar ===== */
.site-header{
  position:sticky; top:0; z-index:40; backdrop-filter:saturate(140%) blur(8px);
  background:linear-gradient(180deg, rgba(10,13,18,.85) 0%, rgba(10,13,18,.55) 100%);
  border-bottom:1px solid var(--border);
}
.topbar{ display:flex; align-items:center; justify-content:space-between; gap:14px }
.brand-link{
  display:inline-flex; align-items:center; gap:10px; color:var(--text); text-decoration:none;
  font-weight:700; letter-spacing:.2px;
}
.brand-dot{ width:10px; height:10px; border-radius:50%; background:var(--accent) }
.brand-dot.small{ width:8px; height:8px }
.nav-actions{ display:flex; align-items:center; gap:10px }
.btn-back{ padding:8px 12px; }

/* ===== Footer ===== */
.site-footer{
  margin-top:40px;
  background: radial-gradient(900px 200px at 20% 0%, #0f1624 0%, #0b0f14 70%);
  border-top:1px solid var(--border);
}
.footer-inner{
  display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px 0;
}
.footer-brand{
  display:flex; align-items:center; gap:10px; font-weight:600; color:#cfe3ff;
}
.footer-left .muted{ margin-top:4px }

/* ===== Login page polish ===== */
.login-card{
  width:min(560px,94vw);
  padding:26px 22px;
  background:
    radial-gradient(1200px 500px at 20% -10%, #101827 0%, #0e1522 55%, #0c121c 100%),
    linear-gradient(180deg, #0c1119 0%, #0a0f16 100%);
  border:1px solid #1f2a3a;
  border-radius:var(--radius);
  box-shadow: 0 10px 35px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.02);
}
.login-title{ font-size:26px; margin-bottom:4px }
.login-subtitle{ margin:0 0 14px }
.login-grid{ gap:14px }
.form-group label{ margin:4px 0 6px }
.login-actions{ display:flex; gap:10px; align-items:center; justify-content:flex-end; margin-top:8px }

/* Fancy primary button */
button, .btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 20px;
  border-radius:var(--radius-sm);
  font-weight:600; font-size:15px;
  background:linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
  color:#fff;
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 4px 12px rgba(42,116,255,.35);
  transition:all .2s ease;
}
button:hover, .btn:hover {
  transform:translateY(-1px);
  box-shadow:0 6px 16px rgba(42,116,255,.45);
  background:linear-gradient(135deg, var(--accent-2) 0%, var(--accent) 100%);
}

/* Secondary / Cancel */
.btn-secondary {
  background:linear-gradient(135deg,#1b2735 0%, #101822 100%);
  color:#cfe3ff;
  border:1px solid #2c3e55;
  box-shadow:0 2px 8px rgba(0,0,0,.3);
}
.btn-secondary:hover {
  background:linear-gradient(135deg,#22364d 0%, #131c28 100%);
}

/* Ghost */
.btn-ghost {
  background:transparent;
  color:var(--muted);
  border:1px solid var(--border);
  transition:all .2s ease;
}
.btn-ghost:hover {
  color:#fff;
  border-color:var(--accent);
  box-shadow:0 0 0 2px rgba(42,116,255,.25);
}

/* Login card stronger look */
.login-card {
  border-radius:20px;
  border:1px solid rgba(255,255,255,.05);
  background:linear-gradient(145deg, #111827 0%, #0d131d 40%, #0b1019 100%);
  box-shadow:0 14px 40px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.04);
  padding:40px 32px;
}
.login-title { font-size:28px; margin-bottom:6px; font-weight:700 }
.login-subtitle { font-size:14px; color:var(--muted); margin-bottom:20px }


/* ===== NAVBAR ===== */
.nav-header{
  position:sticky; top:0; z-index:50;
  backdrop-filter:saturate(140%) blur(8px);
  background:
    linear-gradient(180deg, rgba(10,13,18,.95) 0%, rgba(10,13,18,.70) 100%),
    radial-gradient(900px 200px at 10% -20%, rgba(42,116,255,.10), transparent 60%);
  border-bottom:1px solid var(--border);
}
.nav-inner{
  display:grid; grid-template-columns: 1fr auto auto; gap:16px; align-items:center;
  padding:14px 0;
}
@media(max-width:900px){
  .nav-inner{ grid-template-columns: 1fr auto; grid-template-areas:
    "brand actions"
    "identity identity"; row-gap:10px;
  }
  .nav-brand{ grid-area: brand; }
  .nav-actions{ grid-area: actions; }
  .nav-identity{ grid-area: identity; justify-self: start; }
}

/* Brand (left) */
.nav-brand{
  display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--text);
}
.nav-logo{ width:34px; height:34px; object-fit:contain; filter:drop-shadow(0 2px 6px rgba(0,0,0,.35)) }
.nav-logo-fallback{
  width:34px; height:34px; border-radius:10px;
  display:grid; place-items:center;
  background:linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow:0 6px 16px rgba(42,116,255,.45);
  color:#fff; font-weight:800;
}
.brand-text{ display:flex; flex-direction:column; line-height:1.1 }
.brand-title{ font-weight:800; letter-spacing:.2px }
.brand-sub{ color:var(--muted); font-size:12px }

/* Identity (center) */
.nav-identity{ justify-self:center; text-align:center }
.id-line{ display:flex; align-items:center; gap:10px; flex-wrap:wrap }
.id-company{ font-weight:700 }
.id-dealer{ color:#cfe3ff; }
.dot{ opacity:.5 }
.badge-role{
  padding:4px 8px; border-radius:999px; font-size:12px; font-weight:700;
  background:#132033; color:#9fd1ff; border:1px solid #274166;
}

/* Actions (right) */
.nav-actions{ display:flex; align-items:center; gap:10px }
.logout-form{ display:inline-block; margin:0 }
.btn-logout{
  background:linear-gradient(135deg, #ff6b6b 0%, #ff8b8b 100%);
  border:1px solid rgba(255,255,255,.06);
  box-shadow:0 6px 18px rgba(255,107,107,.35);
}
.btn-logout:hover{
  background:linear-gradient(135deg, #ff8b8b 0%, #ff6b6b 100%);
  box-shadow:0 10px 24px rgba(255,107,107,.45);
}

/* Mala korekcija na wrap u headeru da se ne "lijepi" */
.nav-header .wrap{ padding-left:18px; padding-right:18px }

/* ===== Admin dashboard ===== */
.adm{padding:20px 0 10px}
.adm__hero{display:grid; place-items:center; gap:6px; margin:10px 0 18px}
.adm__title{font-size:40px; letter-spacing:.5px; margin:0}
.adm__subtitle{color:var(--muted); margin:0}

/* Stats */
.adm__stats{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px;
  margin:0 auto 18px; max-width:900px;
}
.adm-stat{
  background:linear-gradient(145deg,#0f1726 0%, #0b111d 100%);
  border:1px solid rgba(255,255,255,.06);
  border-radius:14px; padding:14px 16px;
  box-shadow:0 8px 24px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.04);
}
.adm-stat__label{color:var(--muted); font-weight:600; font-size:13px; margin-bottom:6px}
.adm-stat__value{font-size:24px; font-weight:800}

/* Cards grid */
.adm__grid{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px;
  margin:10px auto 14px; max-width:1000px;
}
.adm-card{
  display:flex; flex-direction:column; gap:8px; text-decoration:none; color:var(--text);
  padding:22px; border-radius:18px;
  background:
    radial-gradient(800px 300px at 0% -30%, rgba(42,116,255,.15), transparent 55%),
    linear-gradient(145deg, #101725 0%, #0b111d 100%);
  border:1px solid rgba(255,255,255,.06);
  box-shadow:0 12px 32px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.04);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.adm-card:hover{
  transform:translateY(-2px);
  border-color:var(--accent);
  box-shadow:0 16px 36px rgba(42,116,255,.28);
}
.adm-card__icon{font-size:28px}
.adm-card__title{font-size:20px; margin:0}
.adm-card__text{color:var(--muted); margin:0 0 6px}
.adm-card__cta{
  align-self:flex-start;
  padding:8px 12px; border-radius:12px;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  color:#fff; font-weight:700; border:1px solid rgba(255,255,255,.06);
  box-shadow:0 6px 16px rgba(42,116,255,.35);
}

/* Shortcuts */
.adm__shortcuts{
  display:flex; gap:10px; flex-wrap:wrap; justify-content:center;
  margin:8px 0 4px;
}
.adm-pill{
  text-decoration:none; color:#cfe3ff; font-weight:700;
  padding:8px 12px; border-radius:999px;
  border:1px solid #223043; background:#0f1624;
  transition:all .18s ease;
}
.adm-pill:hover{border-color:var(--accent); color:#fff; box-shadow:0 0 0 2px rgba(42,116,255,.22)}