@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root{
  /* Shopify-like palette */
  --admin-shell-bg:#f6f6f7;
  --admin-side-bg:#ffffff;
  --admin-surface:#ffffff;
  --admin-surface-2:#fbfbfc;
  --admin-border:#e5e7eb;
  --admin-border-soft:#eef2f7;
  --admin-accent:#111827;
  --admin-accent-strong:#0f172a;
  --admin-text:#0f172a;
  --admin-muted:#64748b;
  --admin-success:#059669;
  --admin-danger:#dc2626;
  --admin-shadow:0 18px 40px rgba(15,23,42,.08);
  --admin-shadow-soft:0 10px 22px rgba(15,23,42,.06);
  --admin-radius:16px;
  --admin-radius-lg:20px;
}

.admin-shell{
  display:flex;
  min-height:100vh;
  background:var(--admin-shell-bg);
}

.admin-sidebar{
  width:260px;
  padding:22px 16px 18px;
  background:var(--admin-side-bg);
  border-right:1px solid var(--admin-border);
  color:var(--admin-text);
  display:flex;
  flex-direction:column;
  gap:14px;
  position:sticky;
  top:0;
  height:100vh;
  overflow-y:auto;
  overscroll-behavior:contain;
}

.admin-brand{
  display:flex;
  align-items:center;
  gap:10px;
  font-family:"Space Grotesk", "Segoe UI", system-ui, sans-serif;
}

.admin-brand-logo{
  width:44px;
  height:44px;
  border-radius:12px;
  object-fit:cover;
  background:transparent;
  padding:0;
  box-shadow:0 10px 25px rgba(15,23,42,0.12);
}

.admin-brand .badge{
  width:36px;
  height:36px;
  border-radius:12px;
  background:linear-gradient(135deg, #0f172a, #334155);
  color:#fff;
  font-weight:800;
  display:grid;
  place-items:center;
  letter-spacing:.6px;
}

.admin-brand .title{
  font-size:16px;
  font-weight:700;
  letter-spacing:.3px;
}

.admin-brand .subtitle{
  font-size:12px;
  color:var(--admin-muted);
}

.admin-nav{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.admin-nav-group{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.admin-nav-group__title{
  font-size:11px;
  color:var(--admin-muted);
  font-weight:800;
  letter-spacing:.6px;
  text-transform:uppercase;
  padding:6px 10px 2px;
}

.admin-nav a{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:12px;
  text-decoration:none;
  color:var(--admin-text);
  border:1px solid transparent;
  background:var(--admin-surface-2);
  font-weight:700;
  font-size:13px;
  transition:all .18s ease;
}
.admin-nav .nav-toggle{
  display:none;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid transparent;
  background:#f8fafc;
  color:var(--admin-text);
  font-weight:700;
  font-size:13px;
  cursor:pointer;
  transition:all .18s ease;
}
.admin-nav .nav-toggle:hover{
  border-color:#fed7aa;
  background:#fff7ed;
}
.admin-nav .nav-icon{font-size:16px;line-height:1;}
.admin-nav .nav-label{font-size:13px;}

.admin-nav a:hover{
  border-color:var(--admin-border);
  background:var(--admin-surface);
  box-shadow:var(--admin-shadow-soft);
}

.admin-nav a.active{
  border-color:rgba(15,23,42,.18);
  color:var(--admin-accent-strong);
  background:var(--admin-surface);
  box-shadow:var(--admin-shadow-soft);
}

.admin-foot{
  margin-top:auto;
  padding-top:12px;
  border-top:1px dashed #e2e8f0;
  font-size:12px;
  color:var(--admin-muted);
}

.admin-main{
  flex:1;
  min-width:0;
  padding:24px 28px;
}

.admin-shell-applied .btn{
  appearance:none;
  border:1px solid var(--admin-border);
  background:var(--admin-surface-2);
  color:var(--admin-text);
  border-radius:999px;
  padding:9px 14px;
  font-weight:800;
  font-size:13px;
  cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.admin-shell-applied .btn:hover{
  background:var(--admin-surface);
  box-shadow:var(--admin-shadow-soft);
  transform:translateY(-1px);
}
.admin-shell-applied .btn:disabled{
  opacity:.6;
  cursor:not-allowed;
  transform:none;
  box-shadow:none;
}
.admin-shell-applied .btn.primary{
  background:#111827;
  color:#fff;
  border-color:#111827;
}
.admin-shell-applied .btn.primary:hover{
  background:#0f172a;
  border-color:#0f172a;
}
.admin-shell-applied .btn.gold{
  background:#fff7ed;
  border-color:#fed7aa;
  color:#9a3412;
}

.admin-main .wrap{
  max-width:1560px;
  width:100%;
  margin:0 auto;
}

.admin-shell-applied .page{
  max-width:1200px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:16px;
}
.admin-shell-applied .page-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
.admin-shell-applied .page-title h1{
  margin:0;
  font-size:22px;
  line-height:1.2;
  font-weight:800;
}
.admin-shell-applied .page-sub{
  margin-top:6px;
  font-size:13px;
  color:var(--admin-muted);
}
.admin-shell-applied .page-actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.admin-shell-applied .page-body{
  display:grid;
  gap:12px;
}
.admin-shell-applied .panel{
  background:var(--admin-surface);
  border:1px solid var(--admin-border);
  border-radius:var(--admin-radius);
  box-shadow:var(--admin-shadow-soft);
  padding:14px;
}
.admin-shell-applied .kpi-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:12px;
}
.admin-shell-applied .kpi-card{
  background:var(--admin-surface);
  border:1px solid var(--admin-border);
  border-radius:14px;
  padding:12px;
}
.admin-shell-applied .kpi-title{
  font-size:12px;
  color:var(--admin-muted);
  font-weight:700;
}
.admin-shell-applied .kpi-value{
  font-size:22px;
  font-weight:800;
  margin-top:6px;
}
.admin-shell-applied .kpi-sub{
  font-size:12px;
  color:var(--admin-muted);
  margin-top:4px;
}
.admin-shell-applied .health-box{
  display:grid;
  gap:8px;
}
.admin-shell-applied .health-item{
  border-radius:12px;
  padding:10px 12px;
  border:1px solid var(--admin-border);
  background:var(--admin-surface);
}
.admin-shell-applied .health-item.ok{border-color:rgba(22,163,74,.35);}
.admin-shell-applied .health-item.warn{border-color:rgba(234,179,8,.45);}
.admin-shell-applied .health-item.err{border-color:rgba(239,68,68,.45);}
.admin-shell-applied .health-item .en{
  display:block;
  font-size:12px;
  color:var(--admin-muted);
  margin-top:4px;
}
.admin-shell-applied .table-wrap{
  overflow:auto;
  border:1px solid var(--admin-border-soft);
  border-radius:12px;
  background:var(--admin-surface);
}
.admin-shell-applied table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  font-size:13px;
}
.admin-shell-applied thead th{
  position:sticky;
  top:0;
  background:var(--admin-surface-2);
  z-index:2;
  text-align:left;
  padding:10px 12px;
  border-bottom:1px solid var(--admin-border);
  color:var(--admin-muted);
  font-weight:800;
  letter-spacing:.2px;
}
.admin-shell-applied tbody td{
  padding:12px;
  border-bottom:1px solid var(--admin-border-soft);
  vertical-align:top;
  color:var(--admin-text);
  font-weight:600;
}
.admin-shell-applied tbody tr:hover td{
  background:#fbfbfc;
}

.admin-shell .wrap{
  font-family:"Space Grotesk", "Segoe UI", system-ui, sans-serif;
}

.admin-shell-applied .backLink{display:none;}
.admin-shell-applied .wrap > h1{margin-top:0;}

.admin-topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  background:var(--admin-surface);
  border:1px solid var(--admin-border);
  border-radius:var(--admin-radius);
  padding:12px 16px;
  box-shadow:var(--admin-shadow-soft);
  margin-bottom:16px;
}
.admin-topbar-title{
  font-weight:800;
  font-size:16px;
  color:#0f172a;
}
.admin-topbar-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.admin-topbar-actions a{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 12px;
  border-radius:999px;
  border:1px solid var(--admin-border);
  background:var(--admin-surface-2);
  color:#0f172a;
  text-decoration:none;
  font-weight:700;
  font-size:12px;
}
.admin-topbar-user{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:2px;
  padding:6px 10px;
  border-radius:14px;
  border:1px solid var(--admin-border);
  background:var(--admin-surface);
  min-width:160px;
}
.admin-topbar-user__name{
  font-weight:800;
  font-size:12px;
  color:#0f172a;
  line-height:1.2;
  max-width:240px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.admin-topbar-user__meta{
  font-size:11px;
  color:#64748b;
  line-height:1.2;
}
.admin-topbar-logout{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:6px 12px;
  border-radius:999px;
  border:1px solid rgba(220,38,38,.24);
  background:#fff1f2;
  color:#b91c1c;
  font-weight:800;
  font-size:12px;
  cursor:pointer;
}
.admin-topbar-logout:disabled{
  opacity:.6;
  cursor:not-allowed;
}

@media(max-width:900px){
  .admin-sidebar{
    width:100%;
    position:static;
    height:auto;
    border-right:none;
    border-bottom:1px solid #e5e7eb;
  }
  .admin-shell{
    flex-direction:column;
  }
  .admin-main{
    padding:18px 14px;
  }
  .admin-shell-applied .page-head{
    flex-direction:column;
    align-items:stretch;
  }
  .admin-shell-applied .page-actions{
    justify-content:flex-start;
  }
  .admin-shell-applied .kpi-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}

/* ================================
   Page: /admin/audit-logs
   Keep scoped to avoid side effects
================================ */
.admin-shell-applied [data-admin-page="audit-logs"] .bar{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  margin:14px 0;
}
.admin-shell-applied [data-admin-page="audit-logs"] .bar input,
.admin-shell-applied [data-admin-page="audit-logs"] .bar select{
  appearance:none;
  background:var(--admin-surface);
  border:1px solid var(--admin-border);
  border-radius:14px;
  padding:10px 12px;
  color:var(--admin-text);
  font-weight:700;
  font-size:13px;
  min-height:40px;
}
.admin-shell-applied [data-admin-page="audit-logs"] .bar input{
  min-width:220px;
}
.admin-shell-applied [data-admin-page="audit-logs"] .bar .muted{
  color:var(--admin-muted);
  font-size:12px;
  font-weight:600;
}
.admin-shell-applied [data-admin-page="audit-logs"] .btn{
  appearance:none;
  border:1px solid var(--admin-border);
  background:var(--admin-surface-2);
  color:var(--admin-text);
  border-radius:999px;
  padding:9px 14px;
  font-weight:800;
  font-size:13px;
  cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.admin-shell-applied [data-admin-page="audit-logs"] .btn:hover{
  background:var(--admin-surface);
  box-shadow:var(--admin-shadow-soft);
  transform:translateY(-1px);
}
.admin-shell-applied [data-admin-page="audit-logs"] .btn:disabled{
  opacity:.6;
  cursor:not-allowed;
  transform:none;
  box-shadow:none;
}
.admin-shell-applied [data-admin-page="audit-logs"] .card{
  background:var(--admin-surface);
  border:1px solid var(--admin-border);
  border-radius:var(--admin-radius);
  box-shadow:var(--admin-shadow-soft);
  padding:12px;
}
.admin-shell-applied [data-admin-page="audit-logs"] table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  font-size:13px;
}
.admin-shell-applied [data-admin-page="audit-logs"] thead th{
  position:sticky;
  top:0;
  background:var(--admin-surface);
  z-index:2;
  text-align:left;
  padding:10px 12px;
  border-bottom:1px solid var(--admin-border);
  color:var(--admin-muted);
  font-weight:800;
  letter-spacing:.2px;
}
.admin-shell-applied [data-admin-page="audit-logs"] tbody td{
  padding:12px;
  border-bottom:1px solid var(--admin-border-soft);
  vertical-align:top;
  color:var(--admin-text);
  font-weight:600;
}
.admin-shell-applied [data-admin-page="audit-logs"] tbody tr:hover td{
  background:#fbfbfc;
}

@media(max-width:980px){
  .admin-shell{flex-direction:column;}
  .admin-sidebar{
    width:100%;
    height:auto;
    position:sticky;
    top:0;
    z-index:999;
    gap:8px;
    padding:10px 12px 8px;
    border-bottom:1px solid rgba(148,163,184,0.18);
    border-right:none;
    background:rgba(255,255,255,0.92);
    backdrop-filter:blur(10px);
    box-shadow:0 10px 22px rgba(15,23,42,0.08);
  }
  .admin-brand{justify-content:space-between;}
  .admin-brand .badge{width:30px;height:30px;border-radius:10px;font-size:13px;}
  .admin-brand .title{font-size:14px;}
  .admin-brand .subtitle{display:none;}
  .admin-nav{
    display:grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:6px;
    overflow:visible;
    padding:0 2px 2px;
  }
  .admin-nav-group{display:contents;}
  .admin-nav-group__title{display:none;}
  .admin-nav a[data-nav-group="extra"]{display:none;}
  .admin-nav a[data-nav-group="extra"].active{display:flex;}
  .admin-nav.is-expanded a[data-nav-group="extra"]{display:flex;}
  .admin-nav a{
    flex:initial;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:left;
    gap:4px;
    min-height:46px;
    padding:6px 4px;
    border-radius:12px;
    background:var(--admin-surface-2);
    white-space:nowrap;
  }
  .admin-nav a.active{background:var(--admin-surface);}
  .admin-nav .nav-icon{font-size:16px;}
  .admin-nav .nav-label{font-size:11px;letter-spacing:.2px;}
  .admin-nav .nav-toggle{
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    gap:4px;
    min-height:46px;
    padding:6px 4px;
    border-radius:12px;
    background:var(--admin-surface-2);
    white-space:nowrap;
  }
  .admin-nav.is-expanded .nav-toggle{
    border-color:rgba(15,23,42,.18);
    color:var(--admin-accent-strong);
    background:var(--admin-surface);
  }
  .admin-foot{display:none;}
  .admin-main{padding:14px 12px 24px;}
  .admin-shell-applied .kpi-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}
@media(max-width:640px){
  .admin-shell-applied .kpi-grid{
    grid-template-columns:repeat(1, minmax(0, 1fr));
  }
}
@media(max-width:720px){
  .admin-nav{grid-template-columns:repeat(3, minmax(0, 1fr));}
  .admin-nav a{min-height:44px;padding:6px 4px;}
  .admin-nav .nav-toggle{min-height:44px;}
  .admin-brand .title{font-size:15px;}
  .admin-stat-card{padding:10px 12px;}
  .admin-stat-value{font-size:18px;}
}
@media(max-width:420px){
  .admin-nav{grid-template-columns:repeat(3, minmax(0, 1fr));}
  .admin-nav a{min-height:42px;padding:6px 2px;}
  .admin-nav .nav-icon{font-size:14px;}
  .admin-nav .nav-label{font-size:10px;}
  .admin-nav .nav-toggle{min-height:42px;padding:6px 2px;}
}

.admin-shell-applied .topbar{display:none;}
.admin-shell-applied .backLink{margin:8px 0 0;}

.admin-stats{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:12px;
  margin-bottom:18px;
}
.admin-stat-card{
  background:var(--admin-surface);
  border:1px solid var(--admin-border);
  border-radius:var(--admin-radius);
  padding:14px 14px;
  color:var(--admin-text);
  box-shadow:var(--admin-shadow-soft);
}
.admin-stat-title{
  font-size:12px;
  color:var(--admin-muted);
  font-weight:700;
}
.admin-stat-value{
  font-size:22px;
  font-weight:900;
  margin-top:6px;
  letter-spacing:.2px;
}
.admin-stat-sub{
  font-size:12px;
  color:var(--admin-muted);
  margin-top:4px;
}

/* Subtle normalization for common admin pages */
.admin-shell-applied .wrap p.muted{color:var(--admin-muted);}
.admin-shell-applied .wrap .card{background:var(--admin-surface);border:1px solid var(--admin-border);border-radius:var(--admin-radius);box-shadow:var(--admin-shadow-soft);}
.admin-shell-applied .wrap table{border-collapse:separate;border-spacing:0;}
.admin-shell-applied .wrap table th{background:var(--admin-surface-2);}
.admin-shell-applied .wrap input,.admin-shell-applied .wrap select,.admin-shell-applied .wrap textarea{border-radius:12px;}