/* ============================================================
   layout.css — shell (sidebar + appbar + sadržaj), grid, responsive.
   ============================================================ */
.shell { display: flex; min-height: 100vh; }

/* ---------- sidebar ---------- */
.nav {
  position: fixed; inset: 0 auto 0 0; z-index: 40; width: var(--nav-w);
  background: var(--nav-bg); box-shadow: var(--elev-1); display: flex; flex-direction: column;
  padding: 0 .75rem; transition: width .22s ease, transform .22s ease; overflow: hidden;
}
.nav-logo { display: flex; align-items: center; gap: .65rem; height: var(--appbar-h); flex: 0 0 auto; padding: 0 .4rem; }
.nav-logo .mk { width: 2.05rem; height: 2.05rem; flex: 0 0 auto; display: block; }
.nav-logo .nm { font-weight: 800; font-size: var(--fs-md); letter-spacing: -.3px; white-space: nowrap;
  font-style: italic; }
.nm .hr, .wm .hr { color: var(--c-warning); font-style: italic; }
.auth-emblem { display: block; width: min(24rem, 86%); margin: 0 auto 1.4rem; border-radius: .9rem;
  box-shadow: var(--elev-pop); }
.nav-sec { font-size: .6875rem; font-weight: 600; letter-spacing: .5px; text-transform: uppercase;
  color: var(--txt-3); padding: 1.1rem .85rem .35rem; white-space: nowrap; }
.nav a.nav-i {
  display: flex; align-items: center; gap: .7rem; padding: .55rem .85rem; margin: .12rem 0;
  border-radius: var(--r); color: var(--txt-2); font-size: var(--fs); font-weight: 500;
  white-space: nowrap; transition: .15s ease;
}
.nav a.nav-i .mdi { font-size: 1.15rem; flex: 0 0 auto; }
.nav a.nav-i:hover { background: var(--surface-2); color: var(--txt); }
.nav a.nav-i.active { background: var(--primary-soft); color: var(--c-primary); }
.nav-foot { margin-top: auto; padding: var(--sp-4) .4rem; }
.nav-upgrade { background: var(--surface-2); border-radius: var(--r); padding: var(--sp-4); text-align: center; }
.nav-upgrade .mdi { font-size: 1.6rem; color: var(--txt-3); }

/* collapsed (mini) varijanta — desktop */
body.nav-mini .nav { width: var(--nav-w-mini); }
body.nav-mini .nav .nm, body.nav-mini .nav .nav-sec, body.nav-mini .nav .nav-i span,
body.nav-mini .nav .nav-upgrade { display: none; }
body.nav-mini .nav a.nav-i { justify-content: center; padding: .6rem 0; }
body.nav-mini .nav-logo { justify-content: center; padding: 0; }
body.nav-mini .main { margin-left: var(--nav-w-mini); }

/* ---------- appbar ---------- */
.main { flex: 1; margin-left: var(--nav-w); display: flex; flex-direction: column; min-width: 0; transition: margin-left .22s ease; }
.appbar {
  position: sticky; top: 0; z-index: 30; height: var(--appbar-h);
  display: flex; align-items: center; gap: .5rem; padding: 0 var(--sp-6);
  background: var(--appbar-bg); backdrop-filter: blur(8px);
}
.appbar .spacer { flex: 1; }
.appbar .searchbox { width: min(22rem, 34vw); }
.app-actions { display: flex; align-items: center; gap: .25rem; }
.app-actions .btn-icon { font-size: 1.25rem; color: var(--txt-2); }
.crash-chip { margin-right: .4rem; }

/* ---------- sadržaj ---------- */
.content { padding: var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-5); }
.page-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; }
.page-head h2 { font-size: var(--fs-xl); }
.page-head .chips { display: flex; gap: .5rem; flex-wrap: wrap; }

/* overlay za mobilni drawer */
.nav-overlay { position: fixed; inset: 0; z-index: 39; background: var(--overlay); display: none; }
body.nav-open .nav-overlay { display: block; }
body.nav-open .nav { transform: translateX(0); }

/* ---------- login ekran ---------- */
.auth { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1rem; position: relative; overflow: hidden; }
.auth::before, .auth::after {
  content: ""; position: absolute; width: 34rem; height: 34rem; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, var(--primary-soft), transparent 62%);
}
.auth::before { top: -19rem; right: -12rem; }
.auth::after { bottom: -20rem; left: -13rem;
  background: radial-gradient(circle at 30% 30%, var(--warning-soft), transparent 62%); }
.auth-card {
  position: relative; z-index: 1; width: min(26rem, 100%); background: var(--surface);
  border-radius: var(--r-lg); box-shadow: var(--elev-pop); padding: 2.5rem 2.25rem 1.75rem;
}
.auth-logo { display: inline-flex; align-items: center; gap: .55rem; margin-bottom: 1.4rem; }
.auth-logo .mk { width: 2.5rem; height: 2.5rem; display: block; }
.auth-logo .nm { font-weight: 800; font-size: var(--fs-2xl); letter-spacing: -1px; font-style: italic; }
.auth-card h3 { margin-bottom: .25rem; }
.auth-card .tag { color: var(--txt-2); font-size: var(--fs-sm); margin-bottom: 1.6rem; }
.auth-card .form-line { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: .4rem 0 1.1rem; }
.auth-card .foot { text-align: center; margin-top: 1.4rem; font-size: var(--fs-xs); color: var(--txt-3); }

/* ---------- responsive ---------- */
@media (max-width: 1199px) {
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .g-8, .g-7, .g-6, .g-5, .g-4, .g-3 { grid-column: span 12; }
}
@media (max-width: 991px) {
  .nav { transform: translateX(-100%); box-shadow: var(--elev-pop); }
  body.nav-mini .nav { width: var(--nav-w); }
  body.nav-mini .nav .nm, body.nav-mini .nav .nav-sec, body.nav-mini .nav .nav-i span { display: revert; }
  body.nav-mini .main { margin-left: 0; }
  .main { margin-left: 0; }
  .appbar { padding: 0 var(--sp-4); }
  .content { padding: var(--sp-4); }
}
@media (max-width: 640px) {
  .stat-grid { grid-template-columns: 1fr; }
  .appbar .searchbox { display: none; }
  .card { padding: var(--sp-4); }
  .form-row .field { flex: 1 1 100%; }
  .gal-main { height: 14rem; }
  .crash-chip { display: none; }
}

@media (max-width: 640px) {
  #chips { display: none !important; }
  .app-actions .dd > button.btn { padding: 0 .5rem; }
  .app-actions .dd > button.btn .mdi-chevron-down { display: none; }
  .app-actions { gap: .1rem; }
}