/* ================================================================
   TURKISH SWEET CENTRE — ADMIN PANEL
   White Ottoman luxury design · Gold accents · GDPR-conscious
   ================================================================ */

/* ── TOKENS ── */
:root {
  /* Whites & creams */
  --bg:        #faf9f7;
  --bg-alt:    #f5f2ee;
  --surface-1: #ffffff;
  --surface-2: #fdfcfb;
  --surface-3: #f7f4f0;
  --surface-4: #eeebe5;

  /* Borders */
  --bdr:       rgba(180,150,80,.18);
  --bdr-mid:   rgba(180,150,80,.28);
  --bdr-strong:rgba(180,150,80,.45);

  /* Gold palette */
  --gold:      #c9a84c;
  --gold-mid:  #d4af37;
  --gold-lt:   #b8941f;
  --gold-dk:   #9a7a15;
  --gold-dim:  rgba(201,168,76,.08);
  --gold-glow: rgba(201,168,76,.18);

  /* Status colours */
  --amber:     #d97706;
  --green-ok:  #16a34a;
  --red:       #dc2626;
  --blue:      #0284c7;

  /* Text */
  --text-1:    #1c1712;
  --text-2:    #4a3f2f;
  --text-3:    #9a8a70;
  --text-4:    #c4b89a;

  /* Typography */
  --font-d: "Playfair Display", serif;
  --font-b: "Montserrat", sans-serif;
  --font-a: "Cormorant Garamond", serif;

  /* Layout */
  --sidebar-w: 272px;
  --topbar-h:  68px;

  /* Radii */
  --r-sm:   8px;
  --r-md:   12px;
  --r-lg:   18px;
  --r-xl:   24px;
  --r-pill: 100px;

  /* Shadows */
  --shadow-sm:   0 1px 4px rgba(0,0,0,.06), 0 2px 12px rgba(0,0,0,.04);
  --shadow-md:   0 4px 24px rgba(0,0,0,.08), 0 1px 4px rgba(0,0,0,.04);
  --shadow-lg:   0 12px 40px rgba(0,0,0,.12);
  --shadow-gold: 0 8px 28px rgba(201,168,76,.2);

  /* Motion */
  --ease:   cubic-bezier(.25,.8,.25,1);
  --ease-b: cubic-bezier(.34,1.56,.64,1);
  --t:      .18s;
  --tm:     .32s;
}

/* ── RESET ── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }
html { scroll-behavior:smooth; height:100% }
body {
  font-family: var(--font-b);
  background: var(--bg);
  color: var(--text-1);
  line-height: 1.6;
  height: 100%;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display:block; max-width:100% }
button { font-family:inherit; cursor:pointer; border:none; background:none }
input, select, textarea { font-family:inherit }
a { color:inherit; text-decoration:none }

/* Subtle arabesque texture on bg */
body::before {
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background-image: url("data:image/svg+xml,%3Csvg width='52' height='52' viewBox='0 0 52 52' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23c9a84c' fill-opacity='0.04'%3E%3Cpath d='M26 2l24 24-24 24L2 26z'/%3E%3C/g%3E%3C/svg%3E");
}

/* ── SCROLLBAR ── */
::-webkit-scrollbar { width:5px }
::-webkit-scrollbar-track { background:var(--bg-alt) }
::-webkit-scrollbar-thumb { background:var(--gold); border-radius:5px }
::selection { background:rgba(201,168,76,.18) }

/* ================================================================
   LOADING OVERLAY
   ================================================================ */
#loading-overlay {
  position:fixed; inset:0; z-index:9999;
  background: linear-gradient(160deg, #faf9f7, #f0ebe0);
  display:flex; align-items:center; justify-content:center;
  transition: opacity .4s var(--ease);
}
.loader-inner {
  display:flex; flex-direction:column; align-items:center; gap:20px;
}
.loader-logo {
  width:80px; height:80px; border-radius:50%;
  border:2px solid var(--bdr-mid);
  box-shadow: 0 0 40px rgba(201,168,76,.15);
  animation: pulseScale 2s ease-in-out infinite;
}
@keyframes pulseScale { 0%,100%{transform:scale(1);opacity:.8} 50%{transform:scale(1.06);opacity:1} }
.loader-spinner {
  width:44px; height:44px;
  border:3px solid rgba(201,168,76,.15);
  border-top-color:var(--gold);
  border-radius:50%;
  animation:spin .9s linear infinite;
}
@keyframes spin { to{transform:rotate(360deg)} }
.loader-text {
  font-family:var(--font-a); font-style:italic;
  color:var(--text-3); font-size:.95rem; letter-spacing:.08em;
}

/* ================================================================
   TOAST NOTIFICATIONS
   ================================================================ */
#toast-container {
  position:fixed; bottom:28px; right:28px;
  display:flex; flex-direction:column; gap:10px; z-index:8000;
}
.toast {
  display:flex; align-items:center; gap:12px;
  padding:14px 18px; min-width:280px;
  background:var(--surface-1);
  border:1px solid var(--bdr);
  border-radius:var(--r-md);
  box-shadow:var(--shadow-md);
  animation:toastIn .3s var(--ease-b) both;
  font-size:.88rem; font-weight:500; color:var(--text-1);
}
@keyframes toastIn { from{opacity:0;transform:translateX(40px) scale(.95)} to{opacity:1;transform:none} }
.toast.removing { animation:toastOut .25s var(--ease) both }
@keyframes toastOut { to{opacity:0;transform:translateX(40px)} }
.toast .material-symbols-outlined { font-size:1.25rem; flex-shrink:0 }
.toast-success { border-left:3px solid var(--green-ok) }
.toast-success .material-symbols-outlined { color:var(--green-ok) }
.toast-error   { border-left:3px solid var(--red) }
.toast-error   .material-symbols-outlined { color:var(--red) }
.toast-info    { border-left:3px solid var(--blue) }
.toast-info    .material-symbols-outlined { color:var(--blue) }
.toast-warning { border-left:3px solid var(--amber) }
.toast-warning .material-symbols-outlined { color:var(--amber) }

/* ================================================================
   LAYOUT
   ================================================================ */
.admin-wrap { display:flex; min-height:100vh; position:relative; z-index:1 }

/* ================================================================
   SIDEBAR
   ================================================================ */
.sidebar {
  width: var(--sidebar-w);
  background: var(--surface-1);
  border-right: 1px solid var(--bdr);
  display:flex; flex-direction:column;
  position:fixed; top:0; left:0; height:100%; z-index:200;
  transition: transform var(--tm) var(--ease);
  box-shadow: var(--shadow-sm);
}

/* Brand */
.sidebar-brand {
  display:flex; align-items:center; gap:12px;
  padding:20px 18px 16px;
  border-bottom:1px solid var(--bdr);
  background: linear-gradient(135deg, var(--gold-dim), transparent);
}
.sidebar-logo {
  width:48px; height:48px; border-radius:50%; flex-shrink:0;
  border:2px solid var(--bdr-mid);
  box-shadow:0 0 0 3px var(--gold-dim);
}
.sidebar-brand-text h1 {
  font-family:var(--font-d); font-size:.76rem; font-weight:700;
  color:var(--text-1); letter-spacing:.09em; line-height:1.25;
}
.sidebar-brand-text p {
  font-size:.63rem; color:var(--gold-lt);
  letter-spacing:.14em; text-transform:uppercase; margin-top:2px;
}

/* Nav */
.sidebar-nav {
  flex:1; padding:14px 10px; display:flex; flex-direction:column; gap:3px;
  overflow-y:auto;
}
.nav-btn {
  display:flex; align-items:center; gap:11px;
  padding:11px 14px; border-radius:var(--r-md);
  color:var(--text-2); font-size:.875rem; font-weight:500;
  transition:all var(--t) var(--ease);
  text-align:left; width:100%; position:relative;
  border-left:3px solid transparent;
}
.nav-btn .material-symbols-outlined { font-size:1.2rem; flex-shrink:0 }
.nav-btn:hover {
  background:var(--gold-dim); color:var(--text-1);
  border-left-color:rgba(201,168,76,.35);
}
.nav-btn.active {
  background:linear-gradient(90deg, rgba(201,168,76,.12), rgba(201,168,76,.03));
  color:var(--gold-lt); border-left-color:var(--gold); font-weight:700;
}
.nav-badge {
  margin-left:auto; background:var(--red); color:#fff;
  font-size:.65rem; font-weight:700; padding:2px 7px;
  border-radius:var(--r-pill); min-width:20px; text-align:center;
}

/* Logout button */
.nav-btn.logout {
  color:var(--red); margin-top:auto;
  border-top: 1px solid var(--bdr);
  border-radius:0;
  padding-top:14px; margin-top:8px;
}
.nav-btn.logout:hover { background:rgba(220,38,38,.06); border-left-color:var(--red) }

/* Sidebar footer */
.sidebar-footer {
  padding:14px 18px; border-top:1px solid var(--bdr);
  display:flex; flex-direction:column; gap:6px;
  background:var(--surface-3);
}
.gdpr-note {
  display:flex; align-items:center; gap:6px;
  font-size:.67rem; color:var(--text-3);
}
.gdpr-note .material-symbols-outlined { font-size:.85rem; color:var(--gold); opacity:.7 }
.sidebar-footer > span:last-child {
  font-size:.66rem; color:var(--text-4);
  font-family:var(--font-a); font-style:italic;
}

/* ================================================================
   MAIN AREA
   ================================================================ */
.main {
  flex:1; margin-left:var(--sidebar-w);
  min-height:100vh; display:flex; flex-direction:column;
  background:var(--bg);
}

/* ── TOPBAR ── */
.topbar {
  height:var(--topbar-h);
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--bdr);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 32px; position:sticky; top:0; z-index:100;
  flex-shrink:0; box-shadow:var(--shadow-sm);
}
.topbar-left { display:flex; align-items:center; gap:14px }
.topbar-tag {
  display:block; font-size:.67rem; font-weight:700; letter-spacing:.18em;
  text-transform:uppercase; color:var(--gold);
}
.topbar-heading h2 {
  font-family:var(--font-d); font-size:1.35rem; color:var(--text-1); line-height:1;
}
.topbar-right { display:flex; align-items:center; gap:8px }
.topbar-btn {
  width:38px; height:38px; border-radius:var(--r-sm);
  border:1px solid var(--bdr); color:var(--text-2);
  display:flex; align-items:center; justify-content:center;
  transition:all var(--t);
}
.topbar-btn:hover { background:var(--gold-dim); color:var(--gold-lt); border-color:var(--gold) }
.topbar-btn .material-symbols-outlined { font-size:1.2rem }
.mobile-menu-btn { display:none }

/* ── VIEW CONTAINERS ── */
.view { display:none; padding:28px 32px; flex:1; animation:fadeUp .3s var(--ease) both }
.view.active { display:block }
@keyframes fadeUp { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:none} }

/* ================================================================
   ALERT BANNER
   ================================================================ */
.alert-banner {
  display:flex; align-items:center; gap:10px;
  padding:12px 18px; margin-bottom:24px;
  background:rgba(217,119,6,.06); border:1px solid rgba(217,119,6,.22);
  border-radius:var(--r-md); font-size:.88rem; color:var(--amber);
}
.alert-banner .material-symbols-outlined { font-size:1.1rem; flex-shrink:0 }
.banner-link {
  margin-left:auto; color:var(--gold-lt); font-size:.82rem;
  font-weight:600; text-decoration:underline; cursor:pointer;
  background:none; border:none;
}

/* ================================================================
   STATS ROW
   ================================================================ */
.stats-row {
  display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:28px;
}
.stat-card {
  background:var(--surface-1);
  border:1px solid var(--bdr);
  border-radius:var(--r-lg);
  padding:22px 20px;
  display:flex; align-items:center; gap:16px;
  transition:transform var(--tm) var(--ease-b), box-shadow var(--tm);
  position:relative; overflow:hidden;
  box-shadow:var(--shadow-sm);
}
.stat-card::before {
  content:""; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg, var(--gold-dk), var(--gold-mid), var(--gold-dk));
  opacity:.6;
}
.stat-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-gold) }
.stat-icon {
  width:52px; height:52px; border-radius:var(--r-md); flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
}
.stat-icon .material-symbols-outlined { font-size:1.5rem }
.stat-icon.gold  { background:rgba(201,168,76,.12); color:var(--gold) }
.stat-icon.amber { background:rgba(217,119,6,.10);  color:var(--amber) }
.stat-icon.green { background:rgba(22,163,74,.10);  color:var(--green-ok) }
.stat-icon.teal  { background:rgba(2,132,199,.10);  color:var(--blue) }
.stat-value {
  font-family:var(--font-d); font-size:2rem; color:var(--text-1); line-height:1; margin-bottom:2px;
}
.stat-label { font-size:.78rem; font-weight:600; color:var(--text-2); text-transform:uppercase; letter-spacing:.05em }
.stat-sub   { font-size:.72rem; color:var(--text-3); margin-top:3px }

/* ================================================================
   SECTION CARD
   ================================================================ */
.section-card {
  background:var(--surface-1); border:1px solid var(--bdr);
  border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-sm);
}
.section-card-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 24px; border-bottom:1px solid var(--bdr);
}
.section-card-header h3 { font-family:var(--font-d); font-size:1.1rem; color:var(--text-1) }
.text-btn {
  font-size:.82rem; color:var(--gold-lt); font-weight:600;
  background:none; border:none; cursor:pointer; transition:color var(--t);
}
.text-btn:hover { color:var(--gold) }

/* Recent orders in overview */
.recent-order-row {
  display:flex; align-items:center; gap:16px;
  padding:14px 24px; border-bottom:1px solid var(--bdr);
  cursor:pointer; transition:background var(--t);
}
.recent-order-row:last-child { border-bottom:none }
.recent-order-row:hover { background:var(--gold-dim) }
.recent-order-id   { font-size:.82rem; font-weight:700; color:var(--gold-lt); min-width:80px; flex-shrink:0; }
.recent-order-customer { flex:1; font-size:.88rem; color:var(--text-2); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.recent-order-total { font-family:var(--font-d); color:var(--text-1); font-size:.95rem; flex-shrink:0; }

/* ================================================================
   SKELETON LOADERS
   ================================================================ */
.skeleton-row {
  height:44px;
  background:linear-gradient(90deg,var(--surface-3) 25%,var(--surface-4) 50%,var(--surface-3) 75%);
  background-size:200%; animation:shimmer 1.5s infinite;
  border-radius:var(--r-sm); margin:8px 0;
}
.skeleton-grid {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:20px;
}
.skeleton-card {
  height:280px;
  background:linear-gradient(90deg,var(--surface-3) 25%,var(--surface-4) 50%,var(--surface-3) 75%);
  background-size:200%; animation:shimmer 1.5s infinite; border-radius:var(--r-lg);
}
.skeleton-table-row td { padding:8px 16px }
@keyframes shimmer { 0%{background-position:200%} 100%{background-position:-200%} }

/* ================================================================
   MENU TOOLBAR
   ================================================================ */
.menu-toolbar {
  display:flex; align-items:center; gap:12px; margin-bottom:24px; flex-wrap:wrap;
}
.search-box {
  display:flex; align-items:center; gap:8px;
  background:var(--surface-1); border:1px solid var(--bdr);
  border-radius:var(--r-pill); padding:0 16px;
  transition:border-color var(--t), box-shadow var(--t);
}
.search-box:focus-within { border-color:var(--gold); box-shadow:0 0 0 3px var(--gold-glow) }
.search-box .material-symbols-outlined { font-size:1.1rem; color:var(--text-3); flex-shrink:0 }
.search-box input {
  background:none; border:none; outline:none;
  color:var(--text-1); font-size:.88rem; padding:10px 0; min-width:180px;
}
.search-box input::placeholder { color:var(--text-3) }

.category-filters { display:flex; gap:6px; flex-wrap:wrap; flex:1 }
.cat-btn {
  padding:8px 16px; border-radius:var(--r-pill);
  border:1px solid var(--bdr);
  background:var(--surface-1); color:var(--text-2);
  font-size:.78rem; font-weight:500;
  transition:all var(--t) var(--ease); white-space:nowrap;
}
.cat-btn:hover { border-color:var(--gold); color:var(--text-1) }
.cat-btn.active {
  background:var(--gold); color:#fff; border-color:var(--gold); font-weight:700;
}

.add-item-btn {
  display:flex; align-items:center; gap:7px;
  padding:10px 22px; border-radius:var(--r-pill);
  background:linear-gradient(135deg, var(--gold-lt), var(--gold));
  color:#fff; font-size:.88rem; font-weight:700;
  transition:all var(--tm) var(--ease-b);
  box-shadow:0 4px 16px rgba(201,168,76,.3);
  white-space:nowrap; flex-shrink:0;
}
.add-item-btn:hover { transform:translateY(-2px); box-shadow:var(--shadow-gold) }
.add-item-btn .material-symbols-outlined { font-size:1.1rem }

/* ================================================================
   ITEMS GRID
   ================================================================ */
.items-grid {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:20px;
}
.item-card {
  background:var(--surface-1); border:1px solid var(--bdr);
  border-radius:var(--r-lg); overflow:hidden;
  display:flex; flex-direction:column;
  transition:transform var(--tm) var(--ease-b), box-shadow var(--tm), border-color var(--tm);
  position:relative; box-shadow:var(--shadow-sm);
}
.item-card:hover { transform:translateY(-6px); box-shadow:var(--shadow-gold); border-color:var(--bdr-strong) }
.item-card-img {
  height:170px; position:relative; overflow:hidden; background:var(--surface-3);
}
.item-card-img img {
  width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease);
}
.item-card:hover .item-card-img img { transform:scale(1.06) }
.unavail-badge {
  position:absolute; top:10px; right:10px;
  background:rgba(220,38,38,.88); color:#fff;
  font-size:.65rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  padding:3px 10px; border-radius:var(--r-pill); backdrop-filter:blur(4px);
}
.item-card-body { padding:16px; flex:1; display:flex; flex-direction:column; gap:4px }
.item-card-cat  {
  font-size:.68rem; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--gold);
  word-break:break-word; overflow-wrap:anywhere;
}
.item-card-name {
  font-family:var(--font-d); font-size:1.1rem; color:var(--text-1);
  margin-bottom:2px; line-height:1.25;
  word-break:break-word; overflow-wrap:anywhere;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.item-card-desc {
  font-family:var(--font-a); font-style:italic;
  font-size:.85rem; color:var(--text-3); flex:1; line-height:1.5;
  word-break:break-word; overflow-wrap:anywhere;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.item-card-price {
  font-family:var(--font-d); font-size:1.15rem; color:var(--gold-lt); font-weight:700;
}
.item-card-footer {
  padding:12px 16px; border-top:1px solid var(--bdr);
  display:flex; align-items:center; justify-content:space-between;
  background:var(--surface-3);
}
.avail-toggle { display:flex; align-items:center; gap:8px }
.avail-toggle-label { font-size:.75rem; color:var(--text-2); font-weight:500 }
.item-card-actions { display:flex; gap:4px }

/* Icon buttons */
.icon-btn {
  width:32px; height:32px; border-radius:var(--r-sm);
  border:1px solid var(--bdr); color:var(--text-3);
  display:flex; align-items:center; justify-content:center;
  transition:all var(--t);
}
.icon-btn .material-symbols-outlined { font-size:1rem }
.icon-btn:hover { background:var(--gold-dim); color:var(--gold-lt); border-color:var(--gold) }
.icon-btn.dup:hover { color:var(--blue); border-color:var(--blue); background:rgba(2,132,199,.06) }
.icon-btn.danger:hover { color:var(--red); border-color:var(--red); background:rgba(220,38,38,.06) }

/* Toggle switch */
.toggle-switch { position:relative; display:inline-block; width:40px; height:22px }
.toggle-switch input { opacity:0; width:0; height:0 }
.toggle-track {
  position:absolute; cursor:pointer; inset:0;
  background:var(--surface-4); border-radius:var(--r-pill);
  border:1px solid var(--bdr);
  transition:all var(--t);
}
.toggle-track::before {
  content:""; position:absolute; height:16px; width:16px;
  left:2px; top:2px; border-radius:50%;
  background:var(--text-3); transition:all var(--t);
}
.toggle-switch input:checked + .toggle-track { background:var(--gold); border-color:var(--gold) }
.toggle-switch input:checked + .toggle-track::before { transform:translateX(18px); background:#fff }

/* ================================================================
   ORDERS TOOLBAR
   ================================================================ */
.orders-toolbar {
  display:flex; align-items:center; gap:12px; margin-bottom:24px; flex-wrap:wrap;
}
.status-filters { display:flex; gap:6px; flex-wrap:wrap; flex:1 }
.status-filter-btn {
  padding:8px 16px; border-radius:var(--r-pill);
  border:1px solid var(--bdr); background:var(--surface-1);
  color:var(--text-2); font-size:.78rem; font-weight:500;
  transition:all var(--t) var(--ease); white-space:nowrap;
}
.status-filter-btn:hover { border-color:var(--gold); color:var(--text-1) }
.status-filter-btn.active { background:var(--gold); color:#fff; border-color:var(--gold); font-weight:700 }

/* ================================================================
   STATUS PILLS
   ================================================================ */
.status-pill {
  display:inline-block; padding:3px 12px; border-radius:var(--r-pill);
  font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:capitalize;
}
.status-pill.pending   { background:rgba(217,119,6,.1);  color:var(--amber);    border:1px solid rgba(217,119,6,.2) }
.status-pill.confirmed { background:rgba(2,132,199,.1);  color:var(--blue);     border:1px solid rgba(2,132,199,.2) }
.status-pill.completed { background:rgba(22,163,74,.1);  color:var(--green-ok); border:1px solid rgba(22,163,74,.2) }
.status-pill.cancelled { background:rgba(220,38,38,.08); color:var(--red);      border:1px solid rgba(220,38,38,.15) }

/* ================================================================
   ORDERS TABLE
   ================================================================ */
.orders-table-wrap {
  background:var(--surface-1); border:1px solid var(--bdr);
  border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-sm);
  overflow-x:auto; -webkit-overflow-scrolling:touch;
}
.orders-table { width:100%; border-collapse:collapse }
.orders-table thead { background:var(--surface-3) }
.orders-table th {
  padding:12px 16px; text-align:left;
  font-size:.68rem; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--gold-lt);
  border-bottom:1px solid var(--bdr);
}
.orders-table td {
  padding:14px 16px; font-size:.875rem; color:var(--text-1);
  border-bottom:1px solid var(--bdr);
}
.orders-table tbody tr:last-child td { border-bottom:none }
.orders-table tbody tr { cursor:pointer; transition:background var(--t) }
.orders-table tbody tr:hover { background:var(--gold-dim) }
.td-id    { font-weight:700; color:var(--gold-lt); font-size:.82rem }
.td-name  { font-weight:500 }
.td-total { font-family:var(--font-d); font-weight:700 }
.td-date  { color:var(--text-3); font-size:.82rem }
.td-actions { text-align:right; width:40px }
.td-items-count {
  display:flex; align-items:center; gap:4px; font-size:.82rem; color:var(--text-2);
}

/* ================================================================
   ITEMS MINI IN ORDER EXPAND
   ================================================================ */
.items-mini-row {
  display:flex; justify-content:space-between; font-size:.83rem;
  padding:5px 0; border-bottom:1px solid var(--bdr);
}
.items-mini-row:last-child { border-bottom:none }
.items-mini-total {
  display:flex; justify-content:space-between;
  padding-top:8px; border-top:1px solid var(--bdr-mid);
  font-family:var(--font-d); color:var(--gold-lt); font-size:1rem; font-weight:600;
}
.empty-orders {
  padding:60px 24px; text-align:center;
  color:var(--text-3); font-family:var(--font-a); font-style:italic;
}
.empty-orders .material-symbols-outlined { font-size:3rem; opacity:.3; display:block; margin:0 auto 12px }

/* ================================================================
   ITEM DRAWER
   ================================================================ */
.drawer-overlay {
  position:fixed; inset:0; z-index:300;
  background:rgba(20,16,10,.45); backdrop-filter:blur(6px);
  opacity:0; pointer-events:none; transition:opacity var(--tm) var(--ease);
}
.drawer-overlay.visible { opacity:1; pointer-events:all }

.drawer {
  position:fixed; top:0; right:0; height:100%;
  width:560px; max-width:100%;
  background:var(--surface-1);
  border-left:1px solid var(--bdr);
  z-index:400; display:flex; flex-direction:column;
  transform:translateX(100%); transition:transform var(--tm) var(--ease);
  box-shadow:-20px 0 60px rgba(0,0,0,.14);
}
.drawer.open { transform:translateX(0) }

/* ── Drawer header ── */
.drawer-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 22px; border-bottom:1px solid var(--bdr);
  flex-shrink:0;
  background:linear-gradient(135deg, var(--surface-2), var(--surface-1));
}
.drawer-header-inner { display:flex; align-items:center; gap:13px }
.drawer-header-icon {
  width:42px; height:42px; border-radius:var(--r-md);
  background:linear-gradient(135deg, var(--gold-lt), var(--gold));
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0; box-shadow:0 4px 12px rgba(201,168,76,.3);
}
.drawer-header-icon .material-symbols-outlined { font-size:1.2rem; color:#fff }
.drawer-header h3 { font-family:var(--font-d); font-size:1.25rem; color:var(--text-1); line-height:1.2 }
.drawer-header p  { font-size:.78rem; color:var(--text-3); margin-top:2px }
.drawer-close {
  width:36px; height:36px; border-radius:50%; flex-shrink:0;
  border:1px solid var(--bdr); color:var(--text-2);
  display:flex; align-items:center; justify-content:center;
  transition:all var(--t);
}
.drawer-close:hover { background:var(--red); border-color:var(--red); color:#fff; transform:rotate(90deg) }
.drawer-close .material-symbols-outlined { font-size:1.1rem }

/* ── Scrollable body ── */
.drawer-body {
  flex:1; min-height:0; overflow-y:auto; padding:20px 22px 12px;
  scrollbar-width:thin; scrollbar-color:var(--gold) var(--bg-alt);
}
.drawer-body::-webkit-scrollbar { width:5px }
.drawer-body::-webkit-scrollbar-track { background:var(--bg-alt) }
.drawer-body::-webkit-scrollbar-thumb { background:var(--gold); border-radius:5px }

/* ── Form inside drawer body ── */
#item-form { display:flex; flex-direction:column; gap:16px }

/* ── Section labels (flat layout, no card boxes) ── */
.fs-label {
  display:flex; align-items:center; gap:7px;
  font-size:.65rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--gold-lt);
  border-left:3px solid var(--gold); padding-left:10px;
  margin-top:4px;
}
.fs-label .material-symbols-outlined { font-size:.9rem; color:var(--gold) }
.fs-divider {
  height:1px;
  background:linear-gradient(90deg, var(--bdr-mid), transparent);
  border:none; margin:2px 0;
}

/* ── Field groups ── */
.field-group { display:flex; flex-direction:column; gap:6px }
.field-group label {
  display:flex; align-items:center; gap:5px;
  font-size:.68rem; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--gold-lt);
}
.label-icon { font-size:.85rem !important; color:var(--gold) !important; flex-shrink:0 }
.req { color:var(--red); margin-left:1px }

.field-group input:not([type=checkbox]):not([type=radio]):not([type=hidden]),
.field-group select,
.field-group textarea {
  padding:11px 14px;
  background:var(--surface-2);
  border:1.5px solid var(--bdr);
  border-radius:var(--r-sm);
  color:var(--text-1); font-size:.9rem;
  transition:border-color var(--t), box-shadow var(--t);
  width:100%;
}
.field-group input::placeholder,
.field-group textarea::placeholder { color:var(--text-4) }
.field-group input:focus,
.field-group select:focus,
.field-group textarea:focus {
  outline:none; border-color:var(--gold); box-shadow:0 0 0 3px var(--gold-glow);
}
.field-group select {
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24'%3E%3Cpath fill='%23b8941f' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 10px center;
  background-color:var(--surface-2); padding-right:34px; cursor:pointer;
}
.field-group select option { background:var(--surface-1); color:var(--text-1) }
.field-group textarea { resize:vertical; min-height:80px; line-height:1.6 }

/* Field hint text */
.field-hint { font-size:.73rem; color:var(--text-3); line-height:1.5 }

/* £ prefix inputs */
.input-prefix-wrap { position:relative }
.input-prefix {
  position:absolute; left:13px; top:50%; transform:translateY(-50%);
  font-family:var(--font-d); font-size:.95rem; color:var(--gold-lt);
  font-weight:700; pointer-events:none; z-index:1;
}
.input-prefix-wrap input { padding-left:26px !important }

/* ── Pricing type cards ── */
.pricing-type-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px }
.pricing-type-card {
  position:relative; display:flex; flex-direction:column;
  align-items:center; gap:5px; padding:16px 12px;
  border:2px solid var(--bdr); border-radius:var(--r-md);
  cursor:pointer; background:var(--surface-2);
  text-align:center; transition:all var(--t) var(--ease);
  user-select:none;
}
.pricing-type-card input[type="radio"] { position:absolute; opacity:0; width:0; height:0 }
.pricing-type-card:hover { border-color:var(--gold); background:var(--gold-dim) }
.pricing-type-card:has(input:checked) {
  border-color:var(--gold);
  background:linear-gradient(135deg, rgba(201,168,76,.12), rgba(201,168,76,.04));
  box-shadow:0 0 0 1px rgba(201,168,76,.3);
}
.pricing-type-card:has(input:checked)::after {
  content:"✓"; position:absolute; top:8px; right:10px;
  font-size:.7rem; font-weight:800; color:var(--gold);
}
.pricing-card-icon { font-size:1.7rem !important; color:var(--text-3); transition:color var(--t) }
.pricing-type-card:has(input:checked) .pricing-card-icon { color:var(--gold) }
.pricing-card-title { font-size:.82rem; font-weight:700; color:var(--text-1) }
.pricing-card-desc { font-size:.7rem; color:var(--text-3); font-family:var(--font-a); font-style:italic }

/* Per-gram sub-block */
.per-gram-block { display:flex; flex-direction:column; gap:14px }

/* ── Price preview ── */
.price-preview-box {
  border:1.5px solid rgba(201,168,76,.5);
  border-radius:var(--r-md); overflow:hidden;
  background:linear-gradient(135deg, rgba(201,168,76,.07), rgba(201,168,76,.02));
}
.price-preview-head {
  display:flex; align-items:center; gap:7px;
  padding:9px 14px;
  background:rgba(201,168,76,.1);
  border-bottom:1px solid rgba(201,168,76,.2);
  font-size:.65rem; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--gold-lt);
}
.price-preview-head .material-symbols-outlined { font-size:.9rem }
#price-preview-rows { padding:8px 14px 10px }
.price-preview-row {
  display:flex; justify-content:space-between; align-items:center;
  font-size:.83rem; padding:5px 0;
  border-bottom:1px solid rgba(201,168,76,.1);
}
.price-preview-row:last-child { border-bottom:none }
.pw-label { color:var(--text-2) }
.pw-value { font-weight:700; color:var(--gold-lt); font-family:var(--font-d) }

/* ── Upload zone ── */
.upload-zone {
  border:2px dashed var(--bdr-mid); border-radius:var(--r-md);
  padding:28px 20px; text-align:center; cursor:pointer;
  background:var(--surface-2);
  transition:all var(--t) var(--ease);
}
.upload-zone:hover { border-color:var(--gold); background:var(--gold-dim) }
.upload-zone-icon {
  font-size:2.2rem !important; color:var(--text-3);
  display:block; margin:0 auto 8px;
  transition:color var(--t);
}
.upload-zone:hover .upload-zone-icon { color:var(--gold) }
.upload-zone-title { font-size:.88rem; font-weight:600; color:var(--text-2); margin-bottom:4px }
.upload-zone-sub { font-size:.72rem; color:var(--text-3) }
.upload-status-text { text-align:center; margin-top:6px }

/* ── Image preview ── */
.image-preview { border-radius:var(--r-md); overflow:hidden; border:1px solid var(--bdr) }
.image-preview img { width:100%; height:200px; object-fit:cover; display:block }
.image-preview-actions {
  display:flex; gap:8px; padding:10px 12px;
  background:var(--surface-3); border-top:1px solid var(--bdr);
}
.img-action-btn {
  display:flex; align-items:center; gap:6px;
  padding:7px 14px; border-radius:var(--r-sm);
  border:1.5px solid var(--bdr); background:var(--surface-1);
  color:var(--text-2); font-size:.78rem; font-weight:600;
  cursor:pointer; transition:all var(--t); font-family:inherit;
}
.img-action-btn:hover { border-color:var(--gold); color:var(--gold-lt); background:var(--gold-dim) }
.img-action-btn.danger:hover { border-color:var(--red); color:var(--red); background:rgba(220,38,38,.05) }
.img-action-btn .material-symbols-outlined { font-size:.9rem }

/* ── Multi-image grid ── */
.multi-image-grid {
  display:flex; flex-wrap:wrap; gap:10px; margin-top:8px;
}
.img-thumb-tile {
  width:88px; height:88px;
  border-radius:var(--r-sm);
  overflow:hidden; position:relative;
  border:2px solid var(--bdr-mid);
  background:var(--surface-2);
  flex-shrink:0;
}
.img-thumb-tile img { width:100%; height:100%; object-fit:cover; display:block; }
.img-thumb-badge {
  position:absolute; bottom:0; left:0; right:0;
  background:rgba(201,168,76,.88);
  color:#1a0e00; font-size:.58rem; font-weight:700;
  text-align:center; padding:2px 0; letter-spacing:.05em;
}
.img-thumb-remove {
  position:absolute; top:3px; right:3px;
  width:22px; height:22px; border-radius:50%;
  background:rgba(220,38,38,.85);
  border:none; color:#fff;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; opacity:0; transition:opacity .15s; padding:0;
}
.img-thumb-tile:hover .img-thumb-remove { opacity:1; }
.img-thumb-remove .material-symbols-outlined { font-size:.85rem; }
.add-image-tile {
  width:88px; height:88px; border-radius:var(--r-sm);
  border:2px dashed var(--bdr-mid);
  background:transparent; color:var(--gold);
  display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:4px;
  cursor:pointer; font-size:.7rem; font-weight:600;
  transition:border-color .2s, background .2s; font-family:inherit;
}
.add-image-tile:hover { border-color:var(--gold); background:var(--gold-dim); }
.add-image-tile .material-symbols-outlined { font-size:1.5rem; }

/* ── Video preview (admin drawer) ── */
.video-preview-wrap { border-radius:var(--r-md); overflow:hidden; border:1px solid var(--bdr); }
.video-preview-wrap video { width:100%; max-height:180px; object-fit:contain; display:block; }

/* ── fs-label hint ── */
.fs-label-hint {
  font-size:.68rem; font-weight:400; color:var(--text-3);
  letter-spacing:0; text-transform:none; margin-left:6px;
}

/* ── Upload zone drag states ── */
.upload-zone-images { margin-top:8px; }
.upload-zone-images.drag-over,
.upload-zone.drag-over { border-color:var(--gold); background:var(--gold-dim); box-shadow:0 0 0 3px rgba(201,168,76,.15); }
.upload-zone-images.drag-over .upload-zone-icon,
.upload-zone-images:hover .upload-zone-icon,
.upload-zone.drag-over .upload-zone-icon,
.upload-zone:hover .upload-zone-icon { color:var(--gold); }

/* ── Allergen chips ── */
.allergen-chips { display:flex; flex-wrap:wrap; gap:8px }
.chip {
  display:flex; align-items:center; gap:5px;
  padding:7px 13px; border-radius:var(--r-pill);
  border:1.5px solid var(--bdr);
  background:var(--surface-1); color:var(--text-2);
  font-size:.78rem; font-weight:500; transition:all var(--t); cursor:pointer;
}
.chip-icon { font-size:.82rem !important }
.chip:hover { border-color:var(--gold); color:var(--text-1); background:var(--gold-dim) }
.chip.selected {
  background:rgba(201,168,76,.14); border-color:var(--gold);
  color:var(--gold-lt); font-weight:700;
}

/* ── Toggle ── */
.toggle-label {
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; cursor:pointer;
}
.toggle-label-title { font-size:.88rem; font-weight:600; color:var(--text-1) }

/* ── Drawer alert (pushes content, never overlaps) ── */
#drawer-alert { min-height:0 }
.form-alert {
  padding:12px 16px; border-radius:var(--r-md);
  font-size:.84rem; font-weight:500;
  display:flex; align-items:flex-start; gap:10px;
  line-height:1.5; margin-bottom:2px;
}
.form-alert .material-symbols-outlined { font-size:1.1rem; flex-shrink:0; margin-top:1px }
.form-alert.error   { background:rgba(220,38,38,.06); color:var(--red);      border:1px solid rgba(220,38,38,.18) }
.form-alert.success { background:rgba(22,163,74,.07);  color:var(--green-ok); border:1px solid rgba(22,163,74,.2) }

/* ── Sticky footer actions ── */
.drawer-actions {
  display:flex; gap:10px;
  padding:14px 22px;
  border-top:1px solid var(--bdr);
  background:var(--surface-1);
  flex-shrink:0;
}
.btn-ghost {
  flex:1; padding:12px; border-radius:var(--r-md);
  border:1.5px solid var(--bdr); color:var(--text-2);
  font-size:.88rem; font-weight:600; transition:all var(--t);
  background:var(--surface-1);
}
.btn-ghost:hover { border-color:var(--gold); color:var(--text-1) }
.btn-gold {
  flex:2; padding:12px; border-radius:var(--r-md);
  background:linear-gradient(135deg, var(--gold-lt), var(--gold));
  color:#fff; font-size:.88rem; font-weight:700;
  display:flex; align-items:center; justify-content:center; gap:8px;
  transition:all var(--tm) var(--ease-b);
  box-shadow:0 4px 16px rgba(201,168,76,.25);
}
.btn-gold:hover { transform:translateY(-2px); box-shadow:var(--shadow-gold) }
.btn-gold .material-symbols-outlined { font-size:1.1rem }

/* ================================================================
   ORDER DETAIL DRAWER
   ================================================================ */
#order-drawer-body { display:flex; flex-direction:column; gap:20px }
.order-section {
  background:var(--surface-3); border-radius:var(--r-md); padding:18px;
  border:1px solid var(--bdr);
}
.order-section h4 {
  font-size:.7rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold-lt); margin-bottom:12px; display:flex; align-items:center; gap:6px;
}
.order-section h4 .material-symbols-outlined { font-size:.9rem }
.order-info-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px }
.order-info-item { display:flex; flex-direction:column; gap:2px }
.order-info-item label {
  font-size:.65rem; color:var(--text-3); font-weight:700;
  text-transform:uppercase; letter-spacing:.08em;
}
.order-info-item span { font-size:.88rem; color:var(--text-1); font-weight:500 }
.order-note-box {
  background:rgba(217,119,6,.06); border:1px solid rgba(217,119,6,.2);
  border-radius:var(--r-sm); padding:12px;
  font-size:.86rem; color:var(--amber); display:flex; gap:8px;
}
.order-note-box .material-symbols-outlined { font-size:1rem; flex-shrink:0; margin-top:1px }
.order-items-list { display:flex; flex-direction:column; gap:6px }
.order-item-row {
  display:flex; justify-content:space-between; align-items:center;
  font-size:.875rem; padding:6px 0; border-bottom:1px solid var(--bdr);
}
.order-item-row:last-child { border-bottom:none }
.order-item-name  { color:var(--text-2) }
.order-item-qty   { color:var(--text-3); font-size:.78rem; margin-left:6px }
.order-item-price { color:var(--text-1); font-weight:600 }
.order-total-row {
  display:flex; justify-content:space-between;
  padding-top:10px; border-top:1px solid var(--bdr-mid);
  font-family:var(--font-d); font-size:1.1rem;
  color:var(--gold-lt); font-weight:700;
}

/* Drawer footer */
.drawer-footer {
  padding:1.25rem 1.5rem; border-top:1px solid var(--bdr);
  background:var(--surface-2);
  display:flex; gap:.75rem; flex-wrap:wrap;
}

/* Action buttons */
.btn-outline {
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.75rem 1.25rem;
  background:var(--surface-1); border:1.5px solid var(--bdr);
  color:var(--text-2); border-radius:var(--r-md);
  font-weight:600; font-size:.88rem; cursor:pointer;
  transition:all var(--t); font-family:inherit;
}
.btn-outline:hover { border-color:var(--gold); color:var(--gold-lt); transform:translateY(-1px) }
.btn-primary {
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.75rem 1.25rem;
  background:linear-gradient(135deg, var(--gold-lt), var(--gold));
  border:none; color:#fff; border-radius:var(--r-md);
  font-weight:700; font-size:.88rem; cursor:pointer;
  transition:all var(--t); font-family:inherit;
}
.btn-primary:hover { transform:translateY(-1px); box-shadow:var(--shadow-gold) }
.btn-success {
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.75rem 1.25rem; background:#16a34a; border:none; color:#fff;
  border-radius:var(--r-md); font-weight:700; font-size:.88rem; cursor:pointer;
  transition:all var(--t); font-family:inherit;
}
.btn-success:hover { background:#15803d; transform:translateY(-1px); box-shadow:0 4px 12px rgba(22,163,74,.25) }
.btn-danger {
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.75rem 1.25rem; background:var(--red); border:none; color:#fff;
  border-radius:var(--r-md); font-weight:700; font-size:.88rem; cursor:pointer;
  transition:all var(--t); font-family:inherit;
}
.btn-danger:hover { background:#b91c1c; transform:translateY(-1px); box-shadow:0 4px 12px rgba(220,38,38,.25) }
.btn-outline .material-symbols-outlined,
.btn-primary .material-symbols-outlined,
.btn-success .material-symbols-outlined,
.btn-danger  .material-symbols-outlined { font-size:1.1rem }

/* ================================================================
   IMAGE UPLOAD
   ================================================================ */
.btn-upload {
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.75rem 1.5rem;
  background:linear-gradient(135deg, var(--gold-lt), var(--gold));
  color:#fff; border:none; border-radius:var(--r-sm);
  font-weight:600; font-size:.9rem; cursor:pointer;
  transition:all var(--t); font-family:inherit;
}
.btn-upload:hover { transform:translateY(-2px); box-shadow:var(--shadow-gold) }
.btn-upload:disabled { opacity:.5; cursor:not-allowed; transform:none }
.btn-upload .material-symbols-outlined { font-size:1.1rem }
.upload-hint { font-size:.82rem; color:var(--text-3); margin-top:.5rem }

/* ================================================================
   CONFIRM DIALOG
   ================================================================ */
.modal-overlay {
  position:fixed; inset:0; z-index:500;
  background:rgba(20,16,10,.4); backdrop-filter:blur(8px);
  display:none; align-items:center; justify-content:center; padding:20px;
}
.modal-overlay.active { display:flex }
.confirm-box {
  background:var(--surface-1); border:1px solid var(--bdr);
  border-radius:var(--r-xl); padding:36px; max-width:400px; width:100%;
  text-align:center; animation:scaleIn .3s var(--ease-b) both;
  box-shadow:var(--shadow-lg);
}
@keyframes scaleIn { from{opacity:0;transform:scale(.9)} to{opacity:1;transform:scale(1)} }
.confirm-icon {
  width:64px; height:64px; border-radius:50%;
  background:rgba(220,38,38,.08); border:1px solid rgba(220,38,38,.2);
  display:flex; align-items:center; justify-content:center; margin:0 auto 16px;
}
.confirm-icon .material-symbols-outlined { font-size:1.8rem; color:var(--red) }
.confirm-box h3 { font-family:var(--font-d); font-size:1.4rem; color:var(--text-1); margin-bottom:8px }
.confirm-box p  { font-size:.88rem; color:var(--text-2); margin-bottom:24px; line-height:1.6 }
.confirm-actions { display:flex; gap:10px; justify-content:center }

/* ================================================================
   EMPTY STATE
   ================================================================ */
.empty-state { text-align:center; padding:64px 24px; color:var(--text-3) }
.empty-state .material-symbols-outlined { font-size:3.5rem; opacity:.25; display:block; margin:0 auto 12px }
.empty-state p { font-family:var(--font-a); font-style:italic; font-size:1rem }

/* ================================================================
   GDPR DATA ACCESS BANNER
   ================================================================ */
.gdpr-access-banner {
  display:flex; align-items:flex-start; gap:10px;
  padding:12px 16px; margin-bottom:16px;
  background:rgba(2,132,199,.05); border:1px solid rgba(2,132,199,.15);
  border-radius:var(--r-md); font-size:.78rem; color:var(--text-2); line-height:1.5;
}
.gdpr-access-banner .material-symbols-outlined { font-size:.95rem; color:var(--blue); flex-shrink:0; margin-top:1px }

/* ================================================================
   SESSION EXPIRY NOTICE
   ================================================================ */
.session-banner {
  position:fixed; top:0; left:0; right:0; z-index:9000;
  background:var(--amber); color:#fff;
  padding:10px 24px; text-align:center; font-size:.875rem; font-weight:600;
  display:none; align-items:center; justify-content:center; gap:12px;
}
.session-banner.visible { display:flex }
.session-banner button {
  background:rgba(255,255,255,.25); border:1px solid rgba(255,255,255,.4);
  color:#fff; padding:4px 14px; border-radius:var(--r-pill);
  font-size:.8rem; font-weight:700; cursor:pointer; transition:background var(--t);
}
.session-banner button:hover { background:rgba(255,255,255,.4) }

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media(max-width:1280px) {
  .stats-row { grid-template-columns:repeat(2,1fr) }
}
@media(max-width:1024px) {
  :root { --sidebar-w:240px }
  .items-grid { grid-template-columns:repeat(auto-fill,minmax(220px,1fr)) }
}
@media(max-width:900px) {
  .sidebar { transform:translateX(-100%) }
  .sidebar.mobile-open { transform:translateX(0) }
  .main { margin-left:0 }
  .mobile-menu-btn {
    display:flex; width:38px; height:38px; border-radius:var(--r-sm);
    border:1px solid var(--bdr); color:var(--text-2);
    align-items:center; justify-content:center;
  }
  .mobile-menu-btn .material-symbols-outlined { font-size:1.2rem }
  .view { padding:20px }
  .topbar { padding:0 20px }
  .stats-row { grid-template-columns:1fr 1fr }
  .drawer { width:100%; max-width:480px }
  /* Tighten stat cards at tablet */
  .stat-card { padding:16px 14px; gap:12px; }
  .stat-icon { width:44px; height:44px; }
  .stat-value { font-size:1.6rem; }
}
@media(max-width:600px) {
  .stats-row { grid-template-columns:1fr 1fr }
  /* Stat cards compact on phones */
  .stat-card { padding:14px 12px; gap:10px; }
  .stat-icon { width:38px; height:38px; flex-shrink:0; }
  .stat-icon .material-symbols-outlined { font-size:1.2rem; }
  .stat-value { font-size:1.4rem; }
  .stat-label { font-size:.68rem; }
  .stat-sub { font-size:.65rem; }
  /* View padding tighter */
  .view { padding:14px }
  .topbar { padding:0 14px; }
  /* Recent order row — prevent overflow */
  .recent-order-row { padding:12px 14px; gap:10px; }
  .recent-order-id { min-width:64px; font-size:.75rem; }
  .recent-order-total { font-size:.85rem; }
  /* Section card header */
  .section-card-header { padding:14px 16px; }
  /* Menu toolbar */
  .menu-toolbar { flex-direction:column; align-items:stretch }
  .add-item-btn { width:100%; justify-content:center }
  .orders-toolbar { flex-direction:column; align-items:stretch }
  .form-row-2 { grid-template-columns:1fr }
  .order-info-grid { grid-template-columns:1fr }
  .drawer-footer { flex-direction:column }
  .drawer-footer button { width:100%; justify-content:center }
  /* Items grid single column on phone */
  .items-grid { grid-template-columns:1fr 1fr !important; gap:12px; }
  /* Topbar title smaller */
  .topbar-title { font-size:.9rem; }
  /* Ensure nothing bleeds off screen */
  .main { overflow-x:hidden; }
  * { max-width:100%; }

  /* Orders table → card layout on small screens
     Columns: 1=id  2=name  3=items  4=total  5=date  6=status  7=actions */
  .orders-table-wrap { overflow-x:visible; border-radius:var(--r-md) }
  .orders-table thead { display:none }
  .orders-table, .orders-table tbody { display:block; width:100% }
  .orders-table tbody tr {
    display:grid;
    grid-template-columns:1fr auto;
    gap:2px 8px;
    padding:14px 16px;
    border-bottom:1px solid var(--bdr);
    cursor:pointer;
    align-items:start;
  }
  .orders-table tbody tr:last-child { border-bottom:none }
  .orders-table td { padding:0; border:none; display:block; min-width:0 }
  /* Row 1: ID (left) + action btn (right, spans all rows) */
  .orders-table td:nth-child(1) { grid-column:1; grid-row:1; font-size:.72rem; color:var(--gold-lt); font-weight:700; }
  .orders-table td:nth-child(7) { grid-column:2; grid-row:1/5; display:flex; align-items:center; }
  /* Row 2: Customer name */
  .orders-table td:nth-child(2) { grid-column:1; grid-row:2; font-weight:600; font-size:.92rem; color:var(--text-1); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  /* Row 3: Total + status side by side */
  .orders-table td:nth-child(4) { grid-column:1; grid-row:3; font-weight:700; font-family:var(--font-d); color:var(--gold-lt); font-size:.92rem; }
  .orders-table td:nth-child(6) { grid-column:1; grid-row:4; display:flex; align-items:center; margin-top:2px; }
  /* Hide items count and date — info is in the detail drawer */
  .orders-table td:nth-child(3),
  .orders-table td:nth-child(5) { display:none }
}