/**
 * _design_system.css — Can I Take Your Order v3.8.0
 * Shared design tokens, animations, and component styles.
 * Include: <link rel="stylesheet" href="assets/css/_design_system.css">
 */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

:root {
  --clr-primary: #16a34a; --clr-primary-dark: #14532d; --clr-primary-deeper: #0a3d20;
  --clr-primary-glow: rgba(22,163,74,.35); --clr-primary-pale: #f0fdf4;
  --clr-gold: #f59e0b; --clr-blue: #3b82f6; --clr-red: #ef4444;
  --clr-purple: #8b5cf6; --clr-teal: #14b8a6; --clr-orange: #f97316;
  --bg: #050d1a; --bg-2: #0a1628; --bg-3: #0f2040;
  --surface-1: #111d35; --surface-2: #162032; --surface-3: #1c2a44;
  --border: #1e3a5f; --border-2: #274166;
  --text: #f0f4f8; --text-2: #c8d8e8; --text-muted: #7a9cc0; --text-dim: #3d5a7a;
  --success: #22c55e; --warning: #f59e0b; --danger: #ef4444; --info: #38bdf8;
  --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 20px; --radius-full: 9999px;
  --shadow-sm: 0 1px 3px rgba(0,0,0,.4); --shadow-md: 0 4px 16px rgba(0,0,0,.5);
  --shadow-lg: 0 8px 32px rgba(0,0,0,.6); --shadow-glow: 0 0 24px var(--clr-primary-glow);
  --t-fast: 0.12s ease; --t-normal: 0.22s cubic-bezier(.4,0,.2,1);
  --t-slow: 0.38s cubic-bezier(.4,0,.2,1); --t-bounce: 0.4s cubic-bezier(.34,1.56,.64,1);
  --font-base: 'Inter', system-ui, -apple-system, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
body { font-family: var(--font-base); background: var(--bg-2); color: var(--text); min-height: 100vh; line-height: 1.5; }

/* ── GLOBAL ANIMATIONS ──────────────────────────────────────────────────────── */
@keyframes fadeIn      { from{opacity:0} to{opacity:1} }
@keyframes fadeInUp    { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeInDown  { from{opacity:0;transform:translateY(-20px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeInLeft  { from{opacity:0;transform:translateX(-24px)} to{opacity:1;transform:translateX(0)} }
@keyframes scaleIn     { from{opacity:0;transform:scale(.92)} to{opacity:1;transform:scale(1)} }
@keyframes pulse       { 0%,100%{opacity:1} 50%{opacity:.5} }
@keyframes ping        { 75%,100%{transform:scale(2);opacity:0} }
@keyframes spin        { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }
@keyframes shimmer     { from{background-position:-200% 0} to{background-position:200% 0} }
@keyframes glow-pulse  { 0%,100%{box-shadow:0 0 8px var(--clr-primary-glow)} 50%{box-shadow:0 0 28px var(--clr-primary-glow),0 0 50px rgba(22,163,74,.15)} }
@keyframes float       { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }
@keyframes status-blink{ 0%,100%{opacity:1} 50%{opacity:.25} }
@keyframes number-pop  { 0%{transform:scale(1)} 30%{transform:scale(1.18)} 60%{transform:scale(.95)} 100%{transform:scale(1)} }
@keyframes gradient-shift { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }
@keyframes border-glow { 0%,100%{border-color:var(--border)} 50%{border-color:rgba(22,163,74,.5)} }
@keyframes slide-right { from{transform:translateX(-8px);opacity:0} to{transform:translateX(0);opacity:1} }

.animate-fade-in  { animation: fadeIn    0.4s ease both; }
.animate-fade-up  { animation: fadeInUp  0.5s cubic-bezier(.4,0,.2,1) both; }
.animate-scale-in { animation: scaleIn   0.35s cubic-bezier(.34,1.2,.64,1) both; }
.animate-float    { animation: float 3s ease-in-out infinite; }
.animate-pulse    { animation: pulse 2s ease-in-out infinite; }
.animate-glow     { animation: glow-pulse 2.5s ease-in-out infinite; }
.animate-spin     { animation: spin 1s linear infinite; }

.stagger > *:nth-child(1)  { animation-delay:.05s } .stagger > *:nth-child(2)  { animation-delay:.10s }
.stagger > *:nth-child(3)  { animation-delay:.15s } .stagger > *:nth-child(4)  { animation-delay:.20s }
.stagger > *:nth-child(5)  { animation-delay:.25s } .stagger > *:nth-child(6)  { animation-delay:.30s }
.stagger > *:nth-child(7)  { animation-delay:.35s } .stagger > *:nth-child(8)  { animation-delay:.40s }
.stagger > *:nth-child(9)  { animation-delay:.45s } .stagger > *:nth-child(10) { animation-delay:.50s }

/* ── TOPBAR ─────────────────────────────────────────────────────────────────── */
.ds-topbar {
  position:sticky;top:0;z-index:200;
  background:rgba(5,13,26,.88);
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  border-bottom:1px solid rgba(30,58,95,.6);
  padding:0 24px;height:58px;
  display:flex;align-items:center;justify-content:space-between;
  transition:box-shadow var(--t-normal);
  animation:fadeInDown .4s ease both;
}
.ds-topbar.scrolled{box-shadow:0 4px 24px rgba(0,0,0,.5);}
.ds-topbar-brand{display:flex;align-items:center;gap:10px;text-decoration:none;}
.ds-topbar-logo{font-size:1.3rem;transition:transform var(--t-bounce);}
.ds-topbar-brand:hover .ds-topbar-logo{transform:rotate(-8deg) scale(1.15);}
.ds-topbar-name{font-size:.95rem;font-weight:800;color:var(--text);letter-spacing:-.01em;}
.ds-topbar-name span{color:var(--clr-primary);}
.ds-topbar-right{display:flex;align-items:center;gap:8px;}
.ds-topbar-link{color:var(--text-muted);text-decoration:none;font-size:.8rem;font-weight:500;padding:6px 10px;border-radius:var(--radius-sm);transition:all var(--t-fast);}
.ds-topbar-link:hover{color:var(--text);background:var(--surface-2);}
.ds-user-chip{display:flex;align-items:center;gap:8px;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-full);padding:5px 12px 5px 5px;transition:border-color var(--t-fast);}
.ds-user-chip:hover{border-color:var(--border-2);}
.ds-user-av{width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,var(--clr-primary-dark),var(--clr-primary));display:flex;align-items:center;justify-content:center;font-size:.72rem;font-weight:800;color:#fff;flex-shrink:0;}
.ds-user-name{font-size:.78rem;font-weight:600;color:var(--text-2);}
.ds-sign-out{color:var(--text-muted);text-decoration:none;font-size:.78rem;padding:5px 10px;border-radius:var(--radius-sm);border:1px solid var(--border);transition:all var(--t-fast);}
.ds-sign-out:hover{color:var(--danger);border-color:var(--danger);background:rgba(239,68,68,.08);}

/* ── HERO ───────────────────────────────────────────────────────────────────── */
.ds-hero{
  position:relative;overflow:hidden;
  background:linear-gradient(135deg,var(--clr-primary-deeper) 0%,var(--bg-3) 60%,var(--surface-1) 100%);
  padding:28px 32px;border-radius:var(--radius-xl);margin-bottom:24px;
  border:1px solid rgba(22,163,74,.2);
  animation:fadeInUp .5s ease both;
}
.ds-hero::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;
  background:radial-gradient(ellipse 60% 80% at 90% 50%,rgba(22,163,74,.12) 0%,transparent 70%),
             radial-gradient(ellipse 40% 60% at 10% 20%,rgba(59,130,246,.08) 0%,transparent 60%);
  pointer-events:none;}
.ds-hero-grid{position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none;overflow:hidden;
  background-image:linear-gradient(rgba(30,58,95,.25) 1px,transparent 1px),linear-gradient(90deg,rgba(30,58,95,.25) 1px,transparent 1px);
  background-size:40px 40px;
  mask-image:radial-gradient(ellipse 100% 100% at 50% 50%,black 30%,transparent 100%);
  -webkit-mask-image:radial-gradient(ellipse 100% 100% at 50% 50%,black 30%,transparent 100%);}
.ds-hero-content{position:relative;z-index:1;}
.ds-hero-eyebrow{display:inline-flex;align-items:center;gap:6px;background:rgba(22,163,74,.12);border:1px solid rgba(22,163,74,.3);color:var(--clr-primary);padding:4px 12px;border-radius:var(--radius-full);font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin-bottom:12px;}
.ds-hero-dot{width:6px;height:6px;border-radius:50%;background:var(--clr-primary);animation:status-blink 2s ease-in-out infinite;}
.ds-hero-title{font-size:clamp(1.4rem,3vw,1.9rem);font-weight:800;letter-spacing:-.03em;line-height:1.1;margin-bottom:6px;}
.ds-hero-sub{font-size:.85rem;color:var(--text-muted);line-height:1.5;}

/* ── KPI STATS ──────────────────────────────────────────────────────────────── */
.ds-stat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:16px;margin-bottom:24px;}
.ds-stat{
  background:var(--surface-1);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:20px;text-align:center;cursor:default;
  transition:all var(--t-normal);animation:fadeInUp .5s ease both;
  position:relative;overflow:hidden;
}
.ds-stat::before{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:var(--clr-primary);transform:scaleX(0);transition:transform var(--t-normal);transform-origin:left;}
.ds-stat:hover{border-color:var(--border-2);transform:translateY(-3px);box-shadow:var(--shadow-md);}
.ds-stat:hover::before{transform:scaleX(1);}
.ds-stat-num{font-size:2rem;font-weight:900;letter-spacing:-.04em;color:var(--clr-primary);line-height:1;transition:transform var(--t-bounce);}
.ds-stat:hover .ds-stat-num{animation:number-pop .4s ease;}
.ds-stat-num.danger{color:var(--danger);} .ds-stat-num.amber{color:var(--warning);} .ds-stat-num.blue{color:var(--clr-blue);}
.ds-stat-lbl{font-size:.72rem;color:var(--text-muted);margin-top:4px;text-transform:uppercase;letter-spacing:.05em;font-weight:500;}

/* ── SECTION HEADING ────────────────────────────────────────────────────────── */
.ds-section-head{display:flex;align-items:center;gap:10px;font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid var(--border);}
.ds-section-head::before{content:'';display:block;width:3px;height:16px;border-radius:2px;background:var(--clr-primary);flex-shrink:0;}

/* ── NAV CARDS ──────────────────────────────────────────────────────────────── */
.ds-nav-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:16px;margin-bottom:32px;}
.ds-nav-card{
  background:var(--surface-1);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:20px;text-decoration:none;color:var(--text);
  display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;
  transition:all var(--t-normal);position:relative;overflow:hidden;
  animation:fadeInUp .5s ease both;
}
.ds-nav-card::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% 0%,rgba(22,163,74,.08),transparent 70%);opacity:0;transition:opacity var(--t-normal);}
.ds-nav-card:hover{border-color:rgba(22,163,74,.5);transform:translateY(-4px);box-shadow:0 8px 28px rgba(0,0,0,.4),0 0 0 1px rgba(22,163,74,.2);}
.ds-nav-card:hover::after{opacity:1;}
.ds-nav-card:active{transform:translateY(-1px);transition:transform .08s;}
.ds-nav-icon{width:48px;height:48px;border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;font-size:1.3rem;transition:transform var(--t-bounce);}
.ds-nav-card:hover .ds-nav-icon{transform:scale(1.12) rotate(-3deg);}
.ds-nav-label{font-size:.82rem;font-weight:700;color:var(--text);}
.ds-nav-desc{font-size:.72rem;color:var(--text-muted);line-height:1.4;}
.ic-green{background:rgba(22,163,74,.15);color:#4ade80;} .ic-blue{background:rgba(59,130,246,.15);color:#60a5fa;}
.ic-amber{background:rgba(245,158,11,.15);color:#fbbf24;} .ic-red{background:rgba(239,68,68,.15);color:#f87171;}
.ic-purple{background:rgba(139,92,246,.15);color:#c4b5fd;} .ic-teal{background:rgba(20,184,166,.15);color:#2dd4bf;}
.ic-orange{background:rgba(249,115,22,.15);color:#fb923c;} .ic-pink{background:rgba(236,72,153,.15);color:#f472b6;}

/* ── CARDS ──────────────────────────────────────────────────────────────────── */
.ds-card{background:var(--surface-1);border:1px solid var(--border);border-radius:var(--radius-lg);padding:24px;transition:border-color var(--t-normal);}
.ds-card:hover{border-color:var(--border-2);}
.ds-card-head{font-size:.82rem;font-weight:700;color:var(--text-2);margin-bottom:16px;display:flex;align-items:center;gap:8px;}

/* ── ALERT BANNERS ──────────────────────────────────────────────────────────── */
.ds-alert{display:flex;align-items:center;gap:12px;border-radius:var(--radius-md);padding:12px 16px;font-size:.82rem;font-weight:600;animation:fadeInDown .4s ease both;margin-bottom:12px;}
.ds-alert-birthday{background:linear-gradient(90deg,rgba(245,158,11,.15),rgba(249,115,22,.1));border:1px solid rgba(245,158,11,.4);color:#fbbf24;}
.ds-alert-allergy{background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.4);color:#f87171;}
.ds-alert-iddsi{background:rgba(139,92,246,.1);border:1px solid rgba(139,92,246,.4);color:#c4b5fd;}
.ds-alert-success{background:rgba(22,163,74,.1);border:1px solid rgba(22,163,74,.4);color:#86efac;}
.ds-alert-warning{background:rgba(245,158,11,.1);border:1px solid rgba(245,158,11,.4);color:#fde68a;}
.ds-alert-icon{font-size:1.2rem;flex-shrink:0;}
.ds-alert-text{flex:1;}
.ds-alert-link{margin-left:auto;font-size:.74rem;text-decoration:none;color:currentColor;opacity:.75;border:1px solid currentColor;padding:2px 10px;border-radius:4px;transition:opacity var(--t-fast);}
.ds-alert-link:hover{opacity:1;}

/* ── BADGES ─────────────────────────────────────────────────────────────────── */
.ds-badge{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:var(--radius-full);font-size:.68rem;font-weight:700;letter-spacing:.04em;}
.badge-green{background:rgba(22,163,74,.15);color:var(--success);border:1px solid rgba(22,163,74,.3);}
.badge-red{background:rgba(239,68,68,.15);color:var(--danger);border:1px solid rgba(239,68,68,.3);}
.badge-amber{background:rgba(245,158,11,.15);color:var(--warning);border:1px solid rgba(245,158,11,.3);}
.badge-blue{background:rgba(59,130,246,.15);color:var(--info);border:1px solid rgba(59,130,246,.3);}
.badge-purple{background:rgba(139,92,246,.15);color:#c4b5fd;border:1px solid rgba(139,92,246,.3);}
.badge-new{background:linear-gradient(90deg,#14532d,#166534);color:#86efac;border:1px solid rgba(22,163,74,.4);animation:glow-pulse 3s ease-in-out infinite;}

/* ── BUTTONS ────────────────────────────────────────────────────────────────── */
.ds-btn{display:inline-flex;align-items:center;gap:6px;padding:9px 18px;border-radius:var(--radius-md);font-size:.85rem;font-weight:700;font-family:var(--font-base);text-decoration:none;cursor:pointer;border:none;transition:all var(--t-normal);position:relative;overflow:hidden;}
.ds-btn::after{content:'';position:absolute;top:50%;left:50%;width:120%;padding-bottom:120%;background:rgba(255,255,255,.12);border-radius:50%;transform:translate(-50%,-50%) scale(0);transition:transform .5s ease;}
.ds-btn:active::after{transform:translate(-50%,-50%) scale(1);transition:0s;}
.ds-btn-primary{background:linear-gradient(135deg,#14532d,#16a34a);color:#fff;box-shadow:0 2px 12px rgba(22,163,74,.4);}
.ds-btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(22,163,74,.5);}
.ds-btn-danger{background:linear-gradient(135deg,#7f1d1d,#dc2626);color:#fff;}
.ds-btn-danger:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(239,68,68,.4);}
.ds-btn-ghost{background:var(--surface-2);color:var(--text-2);border:1px solid var(--border);}
.ds-btn-ghost:hover{border-color:var(--border-2);background:var(--surface-3);}

/* ── FORMS ──────────────────────────────────────────────────────────────────── */
.ds-input,.ds-select,.ds-textarea{width:100%;padding:9px 12px;background:rgba(5,13,26,.6);border:1px solid var(--border);color:var(--text);border-radius:var(--radius-md);font-size:.87rem;font-family:var(--font-base);transition:border-color var(--t-fast),box-shadow var(--t-fast);appearance:none;}
.ds-input:focus,.ds-select:focus,.ds-textarea:focus{outline:none;border-color:var(--clr-primary);box-shadow:0 0 0 3px rgba(22,163,74,.2);}
.ds-label{display:block;font-size:.74rem;font-weight:600;color:var(--text-muted);margin-bottom:5px;letter-spacing:.02em;}

/* ── TABLE ──────────────────────────────────────────────────────────────────── */
.ds-table{width:100%;border-collapse:collapse;}
.ds-table thead tr{background:rgba(5,13,26,.6);}
.ds-table th{padding:10px 14px;text-align:left;font-size:.72rem;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em;border-bottom:1px solid var(--border);}
.ds-table td{padding:11px 14px;border-bottom:1px solid rgba(30,58,95,.4);font-size:.84rem;}
.ds-table tbody tr{transition:background var(--t-fast);}
.ds-table tbody tr:hover{background:rgba(22,163,74,.04);}
.ds-table tbody tr:last-child td{border-bottom:none;}

/* ── SHIMMER / SKELETON ─────────────────────────────────────────────────────── */
.ds-shimmer{background:linear-gradient(90deg,var(--surface-1) 25%,var(--surface-2) 50%,var(--surface-1) 75%);background-size:200% 100%;animation:shimmer 1.5s ease-in-out infinite;border-radius:var(--radius-md);}

/* ── PROGRESS ───────────────────────────────────────────────────────────────── */
.ds-progress{height:6px;background:var(--surface-3);border-radius:var(--radius-full);overflow:hidden;}
.ds-progress-bar{height:100%;background:linear-gradient(90deg,var(--clr-primary-dark),var(--clr-primary));border-radius:var(--radius-full);transition:width .8s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden;}
.ds-progress-bar::after{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);animation:shimmer 2s ease-in-out infinite;}

/* ── NOTIFICATION DOT ───────────────────────────────────────────────────────── */
.ds-notif-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--danger);position:absolute;top:-2px;right:-2px;}
.ds-notif-dot::before{content:'';position:absolute;inset:-3px;border-radius:50%;background:var(--danger);opacity:.4;animation:ping 1.5s ease-in-out infinite;}

/* ── GLASS ──────────────────────────────────────────────────────────────────── */
.ds-glass{background:rgba(17,29,53,.7);backdrop-filter:blur(16px) saturate(160%);-webkit-backdrop-filter:blur(16px) saturate(160%);border:1px solid rgba(255,255,255,.06);border-radius:var(--radius-xl);}

/* ── TEXT EFFECTS ───────────────────────────────────────────────────────────── */
.ds-glow-text{color:var(--clr-primary);text-shadow:0 0 20px rgba(22,163,74,.6);}
.ds-gradient-text{background:linear-gradient(135deg,#86efac 0%,#22c55e 50%,#14b8a6 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}

/* ── SCROLLBAR ──────────────────────────────────────────────────────────────── */
::-webkit-scrollbar{width:6px;height:6px;}
::-webkit-scrollbar-track{background:var(--bg);}
::-webkit-scrollbar-thumb{background:var(--border-2);border-radius:3px;}
::-webkit-scrollbar-thumb:hover{background:var(--text-dim);}

/* ── CONTAINERS ─────────────────────────────────────────────────────────────── */
.ds-container{max-width:1200px;margin:0 auto;padding:24px;}
.ds-container-wide{max-width:1400px;margin:0 auto;padding:24px;}

/* ── RESPONSIVE ─────────────────────────────────────────────────────────────── */
@media(max-width:768px){
  .ds-nav-grid{grid-template-columns:repeat(2,1fr);}
  .ds-stat-grid{grid-template-columns:repeat(2,1fr);}
  .ds-container{padding:16px;}
  .ds-hero{padding:20px;border-radius:var(--radius-lg);}
}
@media(max-width:480px){
  .ds-nav-grid{grid-template-columns:1fr 1fr;gap:10px;}
}