/* ================================================================
   STANX ADMIN — layout on top of the shared design tokens.
   Same colours/type as the storefront; denser spacing for usability.
   ================================================================ */

body.admin-body{ background: var(--background-alt); }

.admin-shell{ display:flex; min-height:100vh; }

.admin-sidebar{
  width: 250px; flex-shrink:0; background: var(--surface); border-right:1px solid var(--border);
  display:flex; flex-direction:column; position:sticky; top:0; height:100vh; overflow-y:auto;
}
.admin-sidebar__brand{ padding:1.5rem; border-bottom:1px solid var(--border); }
.admin-sidebar__brand .logo{ font-size:1.1rem; }
.admin-sidebar__tag{ font-size:.72rem; color:var(--muted-foreground); margin-top:.3rem; letter-spacing:.03em; text-transform:uppercase; }
.admin-nav{ padding:1rem .75rem; display:flex; flex-direction:column; gap:.15rem; flex:1; }
.admin-nav button{
  display:flex; align-items:center; gap:.75rem; padding:.75rem .85rem; font-size:.86rem; border-radius:var(--radius);
  text-align:left; width:100%; color:var(--accent-soft);
}
.admin-nav button:hover{ background: var(--background-alt); }
.admin-nav button.is-active{ background: var(--foreground); color: var(--surface); }
.admin-nav .icon{ width:17px; height:17px; flex-shrink:0; }
.admin-sidebar__foot{ padding:1rem 1.5rem; border-top:1px solid var(--border); font-size:.78rem; color:var(--muted-foreground); }
.admin-sidebar__foot a{ text-decoration:underline; text-underline-offset:3px; }

.admin-main{ flex:1; min-width:0; }
.admin-topbar{
  background: var(--surface); border-bottom:1px solid var(--border);
  padding:1rem 2rem; display:flex; align-items:center; justify-content:space-between; gap:1rem; position:sticky; top:0; z-index:10;
}
.admin-topbar h1{ font-size:1.15rem; }
.admin-topbar__right{ display:flex; align-items:center; gap:1rem; }
.admin-avatar{ width:34px; height:34px; border-radius:50%; background:var(--muted); display:flex; align-items:center; justify-content:center; font-size:.8rem; font-weight:600; color:var(--accent-soft); }
.admin-content{ padding:2rem; max-width:1180px; }
.admin-panel{ display:none; }
.admin-panel.is-active{ display:block; }

.admin-demo-banner{
  background: var(--warning-bg); color: var(--warning); font-size:.8rem; padding:.85rem 1.25rem; border-radius:var(--radius);
  margin-bottom:1.75rem; display:flex; align-items:center; gap:.6rem;
}

.stat-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.25rem; margin-bottom:2rem; }
@media (min-width:900px){ .stat-grid{ grid-template-columns:repeat(4,1fr); } }
.stat-card{ background:var(--surface); border:1px solid var(--border); padding:1.4rem; }
.stat-card__label{ font-size:.75rem; letter-spacing:.04em; text-transform:uppercase; color:var(--muted-foreground); }
.stat-card__value{ font-family:var(--font-display); font-size:1.65rem; font-weight:700; margin-top:.5rem; }
.stat-card__trend{ font-size:.78rem; margin-top:.4rem; }
.stat-card__trend.up{ color:var(--success); }
.stat-card__trend.down{ color:var(--error); }

.admin-grid-2{ display:grid; gap:1.5rem; grid-template-columns:1fr; margin-bottom:2rem; }
@media (min-width:1000px){ .admin-grid-2{ grid-template-columns:1.3fr 1fr; } }
.admin-card{ background:var(--surface); border:1px solid var(--border); padding:1.5rem; }
.admin-card h2{ font-size:.95rem; text-transform:uppercase; letter-spacing:.04em; margin-bottom:1.25rem; }

.bar-chart{ display:flex; align-items:flex-end; gap:.85rem; height:160px; }
.bar-chart__col{ flex:1; display:flex; flex-direction:column; align-items:center; gap:.5rem; height:100%; justify-content:flex-end; }
.bar-chart__bar{ width:100%; background:var(--foreground); border-radius:2px 2px 0 0; transition:height 600ms var(--ease); }
.bar-chart__label{ font-size:.7rem; color:var(--muted-foreground); }

.panel-toolbar{ display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:1.5rem; flex-wrap:wrap; }
.panel-toolbar h2{ font-size:1.05rem; }
.mini-input{ border:1px solid var(--border); padding:.6rem .85rem; font-size:.85rem; border-radius:var(--radius); }

.admin-table-actions{ display:flex; gap:.85rem; }
.admin-table-actions button{ font-size:.78rem; text-decoration:underline; text-underline-offset:3px; }
.admin-table-actions button.danger{ color:var(--error); }

.stock-input{ width:64px; border:1px solid var(--border); padding:.4rem .5rem; text-align:center; border-radius:var(--radius); }

.media-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; }
@media (min-width:700px){ .media-grid{ grid-template-columns:repeat(4,1fr); } }
.media-tile{ aspect-ratio:1/1; background:var(--muted); display:flex; align-items:center; justify-content:center; overflow:hidden; position:relative; }
.media-tile img{ width:100%; height:100%; object-fit:cover; }
.media-tile .icon-hanger{ width:32%; color:var(--muted-foreground); opacity:.5; }
.media-upload{ border:1px dashed var(--border); aspect-ratio:1/1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.5rem; cursor:pointer; color:var(--muted-foreground); font-size:.8rem; text-align:center; padding:.5rem; }
.media-upload:hover{ border-color:var(--foreground); color:var(--foreground); }

.rating-stars{ color:var(--foreground); letter-spacing:1px; }

.admin-mobile-toggle{ display:flex; }
@media (min-width:900px){ .admin-mobile-toggle{ display:none; } }
@media (max-width:899px){
  .admin-sidebar{ position:fixed; left:0; top:0; z-index:90; transform:translateX(-100%); transition:transform var(--speed) var(--ease); }
  .admin-sidebar.is-open{ transform:translateX(0); }
}