/* ===== Theme ===== */
:root{
  --bg:#0a0f1a;
  --pane:#0d172a;
  --pane2:#0c1526;
  --border:#213a63;
  --text:#e6eeff;
  --muted:#a9b7cf;
  --accent:#00e7a7;
  --accent2:#00c1ff;
  --danger:#ff5c74;
  --good:#21d19f;
  --shadow:0 18px 50px rgba(0,0,0,.45);
  --radius:14px;

  /* Layout constants */
  --nav-h: 64px;       /* height of top bar (JS keeps it in sync) */
  --sidenav-w: 280px;  /* width of drawer */
}

*{ box-sizing:border-box }
html,body{
  margin:0;
  background:linear-gradient(180deg,#081226,#070b14);
  color:var(--text);
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial
}

/* ===== Shell ===== */
.shell{ max-width:1100px; margin:18px auto 60px; padding:0 18px; display:grid; gap:16px }
.card{
  border:1px solid rgba(164,186,220,.14);
  background:linear-gradient(180deg,var(--pane),var(--pane2));
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:18px;
}
.card.compact{ padding:14px }

/* ===== Top bar (single declaration) ===== */
.admin-nav{
  position: sticky;
  top: 0;
  z-index: 900;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 0 18px;
  background: linear-gradient(180deg, rgba(7,13,24,.85), rgba(7,13,24,.70));
  backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.admin-nav .brand{ display:flex; align-items:center; gap:10px }
.admin-nav .logo{
  width:34px; height:34px; border-radius:10px;
  display:grid; place-items:center;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  color:#062b23; font-weight:800;
}
.admin-nav .stack small{ color:var(--muted) }
.admin-nav .navlinks{ display:flex; gap:10px }
.admin-nav a{
  color:#dfe6ff; text-decoration:none; font-weight:700;
  padding:8px 12px; border-radius:9px; transition:background .15s,color .15s
}
.admin-nav a:hover{ background:rgba(255,255,255,.06) }
.admin-nav a[aria-current="page"]{
  color:#062b23; background:linear-gradient(90deg,var(--accent),var(--accent2));
  box-shadow:0 0 0 3px rgba(0,231,167,.20)
}

/* Leave space for the hamburger so it doesn’t overlap the logo on narrow screens */
@media (max-width:1100px){
  .admin-nav{ padding-left:56px; }
}

/* ===== Drawer toggle (hamburger) ===== */
.nav-toggle{
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 1020;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid #284062;
  background: #13284e;
  color: #e8f0ff;
  font-weight: 800;
}

/* ===== Sidenav (closed by default at ALL widths) ===== */
.sidenav{
  position: fixed;
  top: var(--nav-h);   /* sits BELOW the top bar */
  left: 0; bottom: 0;
  width: var(--sidenav-w);
  overflow: auto;
  background: linear-gradient(180deg,var(--pane),var(--pane2));
  border-right: 1px solid rgba(164,186,220,.14);
  box-shadow: var(--shadow);
  transform: translateX(-100%);   /* closed */
  transition: transform .25s ease;
  z-index: 1000;
}
.sidenav.open{ transform: translateX(0); }

.sidenav-head{
  display:flex; align-items:center; gap:10px; padding:12px 14px;
  border-bottom:1px solid rgba(164,186,220,.10);
}
.sidenav-head .brand-mini{
  width:28px; height:28px; border-radius:8px; background:#0c162b;
  display:grid; place-items:center; font-weight:800; color:#cfe0ff;
}
.icon-btn{
  margin-left:auto; border:1px solid #284062; background:#13284e;
  color:#e8f0ff; border-radius:8px; padding:4px 8px; font-weight:800;
}

.sidenav-links{ padding:10px; overflow:auto; flex:1; }
.sidenav-links .sec{
  margin:10px 8px 6px; font-size:12px; color:#a9b7cf; text-transform:uppercase;
  letter-spacing:.04em;
}
.sidenav a{
  display:flex; align-items:center; gap:10px;
  padding:8px 10px; margin:4px 4px; border-radius:10px;
  color:#e8f0ff; text-decoration:none; border:1px solid transparent;
}
.sidenav a:hover{ background:#0a1327; border-color:#2a3c5f; }
.sidenav a.active{
  background:#13284e; border-color:#284062; box-shadow: inset 0 0 0 1px #284062;
}
.badge{
  margin-left:auto; font-size:12px; padding:2px 8px; border-radius:999px;
  background:#203a70; color:#dfe8ff; border:1px solid #2f4f86;
}

/* Backdrop (mobile only; JS hides it on desktop) */
.sidenav-backdrop{
  position: fixed; inset: 0;
  background: rgba(3,8,18,.6);
  z-index: 990;
}
.sidenav-backdrop[hidden]{ display:none; }

/* ===== Desktop: when open, shift layout (no forced always-open) ===== */
@media (min-width:1101px){
  /* When the drawer is open, shift BOTH top bar and main area */
  body.sidebar-open .admin-nav{ margin-left: var(--sidenav-w); }
  body.sidebar-open .with-sidenav{ margin-left: var(--sidenav-w); }
  /* Hide hamburger if you prefer; keep it if you want a close button on desktop */
  /* .nav-toggle{ display:none; } */
}

/* ===== Toolbar / buttons / misc from your original ===== */
.toolbar{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap }
.title{ margin:0 }
.kpis{ display:flex; gap:10px; flex-wrap:wrap; margin-top:6px }
.kpi{
  min-width:110px; padding:10px 12px; border-radius:12px;
  border:1px solid rgba(164,186,220,.16);
  background:rgba(255,255,255,.02);
}
.kpi-label{ color:#b8c7e3; font-size:12px; font-weight:700; letter-spacing:.2px }
.kpi-value{ font-size:18px; font-weight:800; margin-top:2px }

.actions{ display:flex; gap:8px; flex-wrap:wrap }
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 14px; border-radius:12px; border:1px solid #284062;
  background:#13284e; color:#e8f0ff; font-weight:800; cursor:pointer; text-decoration:none;
  transition:transform .06s ease, filter .2s ease
}
.btn:hover{ filter:brightness(1.06) }
.btn:active{ transform:translateY(1px) }
.btn.primary{ background:linear-gradient(90deg,var(--accent),var(--accent2)); color:#052221; border-color:transparent; box-shadow:0 8px 22px rgba(0,193,255,.22) }
.btn.ghost{ background:transparent }
.btn.danger{ background:var(--danger); border-color:transparent; color:#2b0612 }

/* Sections */
.section-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin-bottom:10px }
.section-head h3{ margin:0 }
.hint{ color:#b8c7e3; font-size:13px }

/* Lists / tables (left from your stylesheet) */
.model-table{ width:100%; border-collapse:collapse; }
.model-table th, .model-table td{
  padding:10px 8px; border-bottom:1px dashed rgba(164,186,220,.10); text-align:left;
}
.model-table th{ color:#b8c7e3; font-size:12px; font-weight:800; letter-spacing:.2px }
.model-name{ font-weight:800; }

/* Simple lists */
.simple-list{ display:grid; gap:8px }
.simple-list > div{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:10px 12px; border:1px solid rgba(164,186,220,.14); border-radius:12px;
  background:rgba(255,255,255,.02)
}
.simple-list .row-meta{ color:#b8c7e3; font-size:12px }

/* Dialogs */
dialog{ border:none; border-radius:14px; padding:0; background:transparent }
.dialog form{
  display:grid; gap:12px; max-width:440px; padding:18px;
  background:linear-gradient(180deg,var(--pane),var(--pane2));
  border:1px solid rgba(164,186,220,.16); border-radius:14px; box-shadow:var(--shadow)
}
.dialog-title{ margin:0 0 4px }
label{ display:flex; flex-direction:column; gap:6px; font-size:14px; color:#d8e6ff }
input,textarea,select{
  padding:11px 12px; border-radius:10px; border:1px solid #2a3c5f; background:#0a1327; color:#eff4ff;
  transition:border-color .15s ease, box-shadow .15s ease; font-size:15px
}
input:focus,textarea:focus,select:focus{ outline:none; border-color:#3c74ff; box-shadow:0 0 0 3px rgba(60,116,255,.18) }
.dialog .actions{ display:flex; justify-content:flex-end; gap:10px; margin-top:4px }
.row2{ display:grid; grid-template-columns:1fr 1fr; gap:10px }
@media (max-width:560px){ .row2{ grid-template-columns:1fr } }

/* Footer */
.fineprint{ text-align:center; color:#9fb0cf; font-size:12px; padding:12px 0 30px }

/* Order form */
.order-form { display:grid; gap:16px; }
.order-form label { font-weight:600; }
.result-box{
  margin-top:18px; padding:12px; border-radius:10px;
  background: rgba(0,231,167,.12); border:1px solid rgba(0,231,167,.35);
  font-weight:700; color:var(--good);
}

/* ===== Mobile-friendly tweaks ===== */
input, textarea, select, button { min-height:44px; }
@media (max-width: 600px){ input, textarea, select { font-size:16px; } }
@media (max-width: 900px){
  .shell { max-width: 920px; padding: 0 14px; gap: 14px; }
  .card { padding: 14px; }
  .card.compact { padding: 12px; }
}

/* Optional: top-nav wraps nicely */
@media (max-width: 760px) {
  .admin-nav { flex-wrap: wrap; gap: 8px; }
  .admin-nav .navlinks {
    width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch;
    gap: 6px; padding-bottom: 4px;
  }
  .admin-nav a { padding: 8px 10px; white-space: nowrap; }
  .admin-nav .logo { width:30px; height:30px; border-radius:8px; }
}

/* --- Fix: prevent hamburger/logo overlap on desktop when drawer is CLOSED --- */
@media (min-width:1101px){
  /* When the sidebar is not open, leave room for the fixed ☰ button */
  body:not(.sidebar-open) .admin-nav { padding-left: 56px; }
}

/* ==== Drawer layout constants ==== */
:root{
  --nav-h: 64px;      /* top bar height */
  --sidenav-w: 280px; /* drawer width   */
}

/* Top bar (sticky) */
.admin-nav{
  position: sticky;
  top: 0;
  z-index: 900;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 0 18px;
  background: linear-gradient(180deg, rgba(7,13,24,.85), rgba(7,13,24,.70));
  backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(255,255,255,.07);
}

/* Hamburger (expand/collapse) */
.nav-toggle{
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 1020;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid #284062;
  background: #13284e;
  color: #e8f0ff;
  font-weight: 800;
}

/* Drawer */
.sidenav{
  position: fixed;
  top: var(--nav-h);     /* sits BELOW the top bar */
  left: 0;
  bottom: 0;
  width: var(--sidenav-w);
  overflow: auto;
  background: linear-gradient(180deg,var(--pane),var(--pane2));
  border-right: 1px solid rgba(164,186,220,.14);
  box-shadow: var(--shadow);
  transform: translateX(-100%);   /* closed by default */
  transition: transform .25s ease;
  z-index: 1000;
}
.sidenav.open{ transform: translateX(0); }

.sidenav-head{
  display:flex; align-items:center; gap:10px; padding:12px 14px;
  border-bottom:1px solid rgba(164,186,220,.10);
}
.sidenav-head .brand-mini{
  width:28px; height:28px; border-radius:8px; background:#0c162b;
  display:grid; place-items:center; font-weight:800; color:#cfe0ff;
}
.icon-btn{
  margin-left:auto; border:1px solid #284062; background:#13284e;
  color:#e8f0ff; border-radius:8px; padding:4px 8px; font-weight:800;
}

/* Drawer links */
.sidenav-links{ padding:10px; overflow:auto; flex:1; }
.sidenav-links .sec{
  margin:10px 8px 6px; font-size:12px; color:#a9b7cf; text-transform:uppercase; letter-spacing:.04em;
}
.sidenav a{
  display:flex; align-items:center; gap:10px;
  padding:8px 10px; margin:4px 4px; border-radius:10px;
  color:#e8f0ff; text-decoration:none; border:1px solid transparent;
}
.sidenav a:hover{ background:#0a1327; border-color:#2a3c5f; }
.sidenav a.active{
  background:#13284e; border-color:#284062; box-shadow: inset 0 0 0 1px #284062;
}
.badge{
  margin-left:auto; font-size:12px; padding:2px 8px; border-radius:999px;
  background:#203a70; color:#dfe8ff; border:1px solid #2f4f86;
}

/* Backdrop (mobile only; JS hides on desktop) */
.sidenav-backdrop{
  position: fixed; inset: 0; background: rgba(3,8,18,.6); z-index: 990;
}
.sidenav-backdrop[hidden]{ display:none; }

/* Desktop behavior: allow closing the drawer and shift layout only when open */
@media (min-width:1101px){
  .nav-toggle{ display: none; } /* hide hamburger on wide screens */
  body.sidebar-open .admin-nav,
  body.sidebar-open .shell { margin-left: var(--sidenav-w); } /* shift when open */
}

/* Prevent hamburger/logo overlap when drawer is CLOSED on desktop */
@media (min-width:1101px){
  body:not(.sidebar-open) .admin-nav { padding-left: 56px; }
}

/* On narrow screens, always leave space for hamburger */
@media (max-width:1100px){
  .admin-nav { padding-left: 56px; }
}

/* ===== Brand accordion (Catalog > Models) ===== */

/* Wrapper for each brand group */
.brand-item{
  border: 1px solid rgba(164,186,220,.14);
  border-radius: 12px;
  background: rgba(255,255,255,.02);
  margin: 10px 0;
  overflow: hidden;
}

/* Header row with title + toggle */
.brand-header{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px 14px;
}
.brand-title{ display:flex; align-items:center; gap:10px; font-weight:800; }
.brand-meta{ color:#a9b7cf; font-size:12px; }

/* Collapsible body */
.brand-body{ display:none; padding:8px 12px 12px; border-top:1px solid rgba(164,186,220,.10); }
.brand-item.open .brand-body{ display:block; }

/* The expand/collapse button */
.brand-toggle{
  -webkit-appearance:none; appearance:none;
  border:1px solid #284062; background:#13284e; color:#e8f0ff;
  padding:6px 10px; border-radius:8px; font-weight:800; font-size:12px;
  display:inline-flex; align-items:center; gap:8px; cursor:pointer;
}
.brand-toggle:hover{ filter:brightness(1.06); }
.brand-toggle:active{ transform:translateY(1px); }

/* Caret indicator (auto) */
.brand-toggle::before{ content:"►"; font-weight:800; }
.brand-item.open .brand-toggle::before{ content:"▼"; }

/* Table used inside brand-body (models list) */
.model-table{ width:100%; border-collapse:collapse; }
.model-table th, .model-table td{
  padding:10px 8px; border-bottom:1px dashed rgba(164,186,220,.10); text-align:left;
}
.model-table th{ color:#b8c7e3; font-size:12px; font-weight:800; letter-spacing:.2px }

/* Per-row actions */
.row-actions{ display:flex; gap:6px; justify-content:flex-end; }
.row-actions .btn{ padding:8px 10px; border-radius:10px; }

@media (min-width:1101px){
  .sidenav { transform: translateX(0); }  /* keep drawer open */
  .nav-toggle { display: none; }          /* hide hamburger */
  .admin-nav, .shell { margin-left: var(--sidenav-w); }
}