:root{
  /* UI scale */
  --sb-space-1: 6px;
  --sb-space-2: 10px;
  --sb-space-3: 14px;
  --sb-space-4: 18px;
  --sb-space-5: 24px;
  --sb-radius-sm: 12px;
  --sb-radius-md: 16px;
  --sb-radius-lg: 22px;
}

/* ===== Icons (consistent) ===== */
.sb-icon{display:inline-block;flex:0 0 auto;vertical-align:middle;inline-size:20px;block-size:20px}
.sb-icon svg{inline-size:100%;block-size:100%}
.sb-icon-16{inline-size:16px;block-size:16px}
.sb-icon-20{inline-size:20px;block-size:20px}
.sb-icon-24{inline-size:24px;block-size:24px}
.sb-icon-muted{opacity:.78}

/* legacy emoji icons (until migrated to svg everywhere) */
.icon{display:inline-flex; align-items:center; justify-content:center; inline-size:20px; block-size:20px; font-size:18px; line-height:1; opacity:.85}

/* ===== Buttons (sizes + icon alignment) ===== */
.btn{line-height:1; font-weight:700}
.btn.sm{padding:8px 12px; font-size:13px}
.btn.md{padding:10px 16px; font-size:14px}
.btn.lg{padding:12px 18px; font-size:15px}
.btn .sb-icon{margin-inline-start:0; margin-inline-end:6px}

/* ===== Inputs ===== */
.sb-input,
.sb-select,
.sb-textarea{
  width:100%;
  background: rgba(23,27,41,.85);
  border: 1px solid var(--bd);
  color: var(--ink);
  border-radius: 12px;
  padding: 10px 12px;
  outline: none;
}
.sb-input:focus,
.sb-select:focus,
.sb-textarea:focus{ box-shadow: 0 0 0 2px rgba(59,130,246,.35); border-color: rgba(59,130,246,.65)}
.sb-textarea{resize:vertical; min-height: 92px}

.sb-field{display:flex; flex-direction:column; gap:6px}
.sb-label{font-weight:700}
.sb-help{color:var(--ink-muted); font-size:13px}

/* ===== Layout helpers ===== */
.sb-page{max-width:var(--max); margin:0 auto; padding:18px 16px}
.sb-pad-16{padding:16px}
.sb-dot{margin:0 6px; opacity:.8}
.sb-surface{
  background: rgba(18,22,34,.78);
  border: 1px solid var(--bd);
  border-radius: 18px;
  box-shadow: var(--shadow);
}

/* ===== Manage toolbar (Task 4) ===== */
.sb-manage-toolbar{display:flex; gap:12px; align-items:center; justify-content:space-between; margin:14px 0}
.sb-search{flex:1; display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:14px; border:1px solid var(--bd);
  background: rgba(16,20,34,.78); box-shadow: inset 0 2px 8px rgba(0,0,0,.25);}
.sb-search .sb-input{border:none; background:transparent; padding:0; box-shadow:none}
.sb-search .sb-input:focus{border:none; box-shadow:none}
.sb-empty{padding:12px 14px; border:1px dashed rgba(148,163,184,.35); border-radius:14px; color:var(--ink-muted); background: rgba(15,23,42,.35)}

@media (max-width: 720px){
  .sb-manage-toolbar{flex-direction:column; align-items:stretch}
  .sb-manage-toolbar .btn{align-self:flex-end}
}

/* ===== Density toggle (Task 4) ===== */
body.sb-compact .sb-page{padding:14px 12px}
body.sb-compact .sb-hero-inner{padding:14px}
body.sb-compact .sb-kpi{padding:12px}
body.sb-compact .sb-kpi-value{font-size:26px}
body.sb-compact .sb-card{padding:12px}
body.sb-compact .sb-card-links{gap:6px}
body.sb-compact .sb-quick .btn{padding:9px 14px; font-size:13px}

.sb-stack{display:flex; flex-direction:column; gap:12px}
.sb-row{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.sb-row.between{justify-content:space-between}

.sb-grid{display:grid; gap:14px}
.sb-grid.cols-3{grid-template-columns:repeat(3, minmax(0, 1fr))}
.sb-grid.cols-4{grid-template-columns:repeat(4, minmax(0, 1fr))}

@media (max-width: 1024px){
  .sb-grid.cols-3{grid-template-columns:repeat(2, minmax(0, 1fr))}
  .sb-grid.cols-4{grid-template-columns:repeat(2, minmax(0, 1fr))}
}
@media (max-width: 640px){
  .sb-grid.cols-3,
  .sb-grid.cols-4{grid-template-columns:1fr}
}

/* ===== Owner dashboard header + switcher ===== */
.sb-manage-hd{padding:16px; border-radius: 18px}
.sb-manage-title{margin:0; font-size: clamp(18px, 2.8vw, 24px)}
.sb-manage-sub{margin-top:4px}

.sb-switcher{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.sb-switcher .sb-select{min-width: 240px}

@media (max-width: 640px){
  .sb-switcher{width:100%}
  .sb-switcher .sb-select{min-width:0}
}

/* ===== Quick actions bar ===== */
.sb-quick{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  padding:14px 16px;
}

@media (max-width: 640px){
  /* horizontal scroll for thumb-friendly actions */
  .sb-quick{flex-wrap:nowrap; overflow:auto; padding-bottom:10px; -webkit-overflow-scrolling:touch}
  .sb-quick .btn{white-space:nowrap}
}

/* ===== KPI tiles ===== */
.sb-kpi{padding:14px 14px}
.sb-kpi-label{color:var(--ink-muted); font-size:13px}
.sb-kpi-value{font-size:24px; font-weight:900; margin-top:6px}
.sb-kpi-foot{margin-top:10px; display:flex; align-items:center; gap:6px; font-size:13px}

/* ===== Restaurant manage dashboard (Task 3) ===== */
.sb-hero{
  position:relative;
  border:1px solid var(--bd);
  border-radius: 22px;
  overflow:hidden;
  background: radial-gradient(1200px 400px at 20% -10%, rgba(59,130,246,.35), transparent 55%),
              radial-gradient(900px 360px at 80% 0%, rgba(37,99,235,.28), transparent 55%),
              linear-gradient(180deg, rgba(18,22,34,.92), rgba(10,14,24,.86));
  background-size:cover;
  background-position:center;
}
.sb-hero-overlay{
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(10,14,24,.2), rgba(10,14,24,.78));
}
.sb-hero-inner{position:relative; padding: 18px 16px 14px; display:flex; flex-direction:column; gap:12px}
.sb-hero-top{display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex-wrap:wrap}
.sb-hero-title h1{margin:0; font-size: clamp(22px, 2.9vw, 32px); letter-spacing:.2px}
.sb-hero-kicker{font-weight:800; color: color-mix(in srgb, var(--ink) 75%, var(--brand)); opacity:.9}
.sb-hero-sub{margin-top:6px; font-size:14px}
.sb-hero-tools{display:flex; align-items:flex-start; gap:10px; flex-wrap:wrap; justify-content:flex-end}
.sb-hero-quick{background: rgba(18,22,34,.7); border-radius: 18px}

/* Mobile/tablet hero layout: keep one clean column, no horizontal overflow */
@media (max-width: 860px){
  .sb-hero-top{align-items:stretch}
  .sb-hero-tools{justify-content:flex-start}
}

@media (max-width: 640px){
  .sb-hero-inner{padding: 16px 14px 12px}
  .sb-hero-top{flex-direction:column; gap:10px}
  .sb-hero-tools{width:100%}
  .sb-hero-tools .sb-row{width:100%; justify-content:space-between}
  .sb-hero-title h1{font-size: 24px}
  .sb-hero-sub{font-size: 13px}
}

.sb-dashboard{display:grid; grid-template-columns: minmax(0, 1fr) 360px; gap:14px; margin-top:14px}
.sb-dashboard-main{display:flex; flex-direction:column; gap:14px}
.sb-dashboard-side{display:flex; flex-direction:column; gap:14px}
@media (max-width: 1024px){
  .sb-dashboard{grid-template-columns: 1fr}
}

.sb-card{padding:14px 14px}
.sb-card-hd{display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:10px}
.sb-card-ttl{display:flex; align-items:center; gap:10px}
.sb-card-title{font-weight:900}
.sb-card-sub{font-size:13px; margin-top:2px}

.sb-card-links{display:grid; gap:8px; margin-top:8px}
.sb-link{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 10px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.07);
  background: rgba(255,255,255,.03);
  color: var(--ink);
  text-decoration:none;
  font-weight:800;
}
.sb-link:hover{filter:brightness(1.08)}
.sb-link::after{content:"›"; opacity:.65}

.sb-table{border:1px solid rgba(255,255,255,.08); border-radius: 16px; overflow:hidden}
.sb-table-head{background: rgba(255,255,255,.04); border-bottom:1px solid rgba(255,255,255,.08)}
.sb-tr{display:grid; grid-template-columns: 92px 1fr 80px 92px; gap:10px; padding:10px 12px; align-items:center}
.sb-th{color:var(--ink-muted); font-size:12px; font-weight:900; text-transform:uppercase; letter-spacing:.08em}
.sb-td{font-size:14px}
.sb-rowlink{color:inherit; text-decoration:none}
.sb-rowlink:hover{background: rgba(59,130,246,.08)}
@media (max-width: 640px){
  .sb-tr{grid-template-columns: 72px 1fr 60px 86px}
}

.sb-badge{display:inline-flex; align-items:center; justify-content:center; padding:6px 10px; border-radius:999px; font-weight:900; font-size:12px; border:1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04)}
.sb-badge.warn{background: rgba(245,158,11,.14); border-color: rgba(245,158,11,.35)}

.sb-list{display:flex; flex-direction:column; gap:8px}
.sb-list-item{display:flex; align-items:flex-start; gap:10px; padding:10px 10px; border-radius: 16px; border:1px solid rgba(255,255,255,.07); background: rgba(255,255,255,.03); text-decoration:none; color:inherit}
.sb-list-item:hover{filter:brightness(1.08)}
.sb-list-body{min-width:0; flex:1}
.sb-list-title{font-weight:900; line-height:1.2}
.sb-list-sub{font-size:13px; margin-top:2px}
.sb-dotmark{inline-size:10px; block-size:10px; border-radius:999px; margin-top:5px; background: rgba(59,130,246,.9)}
.sb-dotmark.warn{background: rgba(245,158,11,.95)}
.sb-dotmark.danger{background: rgba(239,68,68,.95)}
.sb-dotmark.info{background: rgba(59,130,246,.95)}

.sb-empty{padding:10px 0}

/* ===== Operations grid (app-like quick entry) ===== */
.sb-ops{padding:14px; border-radius: 22px}
.sb-ops-hd{display:flex; align-items:center; justify-content:space-between; margin-bottom:10px}
.sb-ops-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px}
.sb-ops-btn{display:flex; flex-direction:column; gap:4px; padding:12px; border-radius:18px; border:1px solid rgba(255,255,255,.10); background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)); text-decoration:none; color:inherit; min-height:84px}
.sb-ops-btn:hover{filter:brightness(1.08)}
.sb-ops-label{font-weight:900; margin-top:4px}
.sb-ops-sub{font-size:13px}
@media (max-width: 900px){
  .sb-ops-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width: 520px){
  .sb-ops-grid{grid-template-columns:1fr}
  .sb-ops-btn{min-height:72px}
}

/* ===== Small section text ===== */
.sb-note{color:var(--ink-muted); font-size:13px}

/* ===== Forms ===== */
.sb-form-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px}
.sb-actions{display:flex; gap:10px; justify-content:flex-end; margin-top:14px; flex-wrap:wrap}
.sb-span-all{grid-column:1/-1}

/* ===== Touch targets ===== */
@media (max-width: 768px){
  .btn{min-height:44px}
}

/* ===== Reduce motion ===== */
@media (prefers-reduced-motion: reduce){
  *{scroll-behavior:auto !important; transition:none !important; animation:none !important}
}