/* ============================================================
   SANPATONG MARKET — Design System v2
   Light theme, clean, professional
   ============================================================ */

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

:root {
  /* Colors */
  --c-primary:    #0F6E56;
  --c-primary2:   #1D9E75;
  --c-primary3:   #9FE1CB;
  --c-primary-bg: #E8F5F0;
  --c-gold:       #D4A017;
  --c-gold-bg:    #FFF8E7;
  --c-warn:       #BA7517;
  --c-warn-bg:    #FFF3DC;
  --c-danger:     #DC2626;
  --c-danger-bg:  #FEF2F2;
  --c-blue:       #185FA5;
  --c-blue-bg:    #EFF6FF;

  /* Neutral */
  --c-bg:         #F4F6F5;
  --c-surface:    #FFFFFF;
  --c-border:     #E2E8E5;
  --c-text:       #1A2E27;
  --c-text2:      #4A6B60;
  --c-text3:      #8BA99E;

  /* Radius */
  --r-sm:  8px;
  --r-md:  12px;
  --r-lg:  16px;
  --r-xl:  20px;
  --r-2xl: 24px;

  /* Shadow */
  --s-sm:  0 1px 3px rgba(15,110,86,.06), 0 1px 2px rgba(0,0,0,.04);
  --s-md:  0 4px 12px rgba(15,110,86,.08), 0 2px 4px rgba(0,0,0,.04);
  --s-lg:  0 8px 24px rgba(15,110,86,.10), 0 4px 8px rgba(0,0,0,.06);

  /* Spacing */
  --sp-xs: 6px;
  --sp-sm: 10px;
  --sp-md: 14px;
  --sp-lg: 20px;
  --sp-xl: 28px;
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body { font-family: 'Sarabun', sans-serif; background: var(--c-bg); color: var(--c-text); }

/* ── TOPBAR ── */
.ds-topbar {
  background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-primary2) 100%);
  padding: 12px 16px 16px;
  position: sticky; top: 0; z-index: 30;
}
.ds-topbar-row { display: flex; align-items: center; justify-content: space-between; }
.ds-topbar h1 { color: #fff; font-size: 16px; font-weight: 700; }
.ds-topbar-sub { color: rgba(255,255,255,.65); font-size: 11px; margin-top: 2px; }

/* ── HERO CARD ── */
.ds-hero {
  background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-primary2) 60%, #185FA5 100%);
  padding: 20px 16px 32px;
  position: relative; overflow: hidden;
}
.ds-hero::after {
  content: '';
  position: absolute; inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='40' cy='40' r='1.5' fill='%23ffffff' fill-opacity='0.06'/%3E%3C/svg%3E");
  pointer-events: none;
}

/* ── CARD ── */
.ds-card {
  background: var(--c-surface);
  border-radius: var(--r-lg);
  padding: 16px;
  box-shadow: var(--s-sm);
  border: 1px solid var(--c-border);
}
.ds-card-title {
  font-size: 13px; font-weight: 700; color: var(--c-text);
  margin-bottom: 12px; display: flex; align-items: center; gap: 6px;
}

/* ── STAT GRID ── */
.ds-stats { display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; }
.ds-stat {
  background: var(--c-surface); border-radius: var(--r-md);
  padding: 14px; box-shadow: var(--s-sm); border: 1px solid var(--c-border);
}
.ds-stat-val { font-size: 28px; font-weight: 800; line-height: 1; }
.ds-stat-lbl { font-size: 11px; color: var(--c-text3); margin-top: 3px; }
.ds-stat-sub { font-size: 10px; color: var(--c-text3); margin-top: 2px; }
.ds-stat.green .ds-stat-val  { color: var(--c-primary); }
.ds-stat.amber .ds-stat-val  { color: var(--c-warn); }
.ds-stat.red   .ds-stat-val  { color: var(--c-danger); }
.ds-stat.blue  .ds-stat-val  { color: var(--c-blue); }

/* ── MENU ITEM ── */
.ds-menu-item {
  display: flex; align-items: center; gap: 14px;
  background: var(--c-surface); border-radius: var(--r-lg);
  padding: 14px 16px; text-decoration: none; color: var(--c-text);
  box-shadow: var(--s-sm); border: 1px solid var(--c-border);
  transition: box-shadow .15s, transform .12s;
}
.ds-menu-item:active { transform: scale(.98); box-shadow: none; }
.ds-menu-item.primary {
  background: linear-gradient(135deg, var(--c-primary), var(--c-primary2));
  color: #fff; border: none;
  box-shadow: 0 4px 16px rgba(15,110,86,.3);
}
.ds-menu-icon {
  width: 44px; height: 44px; border-radius: var(--r-md);
  background: var(--c-primary-bg); display: flex; align-items: center;
  justify-content: center; font-size: 22px; flex-shrink: 0;
}
.ds-menu-item.primary .ds-menu-icon { background: rgba(255,255,255,.2); }
.ds-menu-text { flex: 1; }
.ds-menu-label { font-size: 14px; font-weight: 700; display: block; }
.ds-menu-sub { font-size: 11px; opacity: .6; display: block; margin-top: 2px; }
.ds-menu-arrow { color: var(--c-text3); font-size: 18px; flex-shrink: 0; }
.ds-menu-item.primary .ds-menu-arrow { color: rgba(255,255,255,.6); }

/* ── BADGE ── */
.ds-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 600; padding: 3px 9px;
  border-radius: 20px; white-space: nowrap;
}
.ds-badge.green  { background: var(--c-primary-bg); color: var(--c-primary); }
.ds-badge.amber  { background: var(--c-warn-bg);    color: var(--c-warn); }
.ds-badge.red    { background: var(--c-danger-bg);  color: var(--c-danger); }
.ds-badge.blue   { background: var(--c-blue-bg);    color: var(--c-blue); }
.ds-badge.gold   { background: var(--c-gold-bg);    color: var(--c-gold); }

/* ── PROGRESS ── */
.ds-progress { background: var(--c-border); border-radius: 6px; height: 8px; overflow: hidden; }
.ds-progress-fill { height: 100%; border-radius: 6px; transition: width .5s ease; }
.ds-progress-fill.green  { background: linear-gradient(90deg, var(--c-primary), var(--c-primary2)); }
.ds-progress-fill.amber  { background: linear-gradient(90deg, #BA7517, #EF9F27); }
.ds-progress-fill.red    { background: linear-gradient(90deg, #DC2626, #F87171); }

/* ── BUTTON ── */
.ds-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font-family: 'Sarabun', sans-serif; font-size: 14px; font-weight: 600;
  padding: 11px 20px; border-radius: var(--r-md); cursor: pointer;
  border: none; transition: opacity .15s, transform .1s; white-space: nowrap;
}
.ds-btn:active { opacity: .8; transform: scale(.97); }
.ds-btn.primary { background: var(--c-primary); color: #fff; }
.ds-btn.secondary { background: var(--c-primary-bg); color: var(--c-primary); }
.ds-btn.danger  { background: var(--c-danger-bg); color: var(--c-danger); }
.ds-btn.ghost   { background: transparent; color: var(--c-text3); border: 1.5px solid var(--c-border); }
.ds-btn.full    { width: 100%; }
.ds-btn.sm      { font-size: 12px; padding: 7px 14px; border-radius: var(--r-sm); }

/* ── INPUT ── */
.ds-input {
  width: 100%; background: var(--c-bg); border: 1.5px solid var(--c-border);
  border-radius: var(--r-md); padding: 10px 14px;
  font-family: 'Sarabun', sans-serif; font-size: 14px; color: var(--c-text);
  outline: none; transition: border-color .15s;
}
.ds-input:focus { border-color: var(--c-primary); background: #fff; }
.ds-label { font-size: 12px; font-weight: 600; color: var(--c-text2); display: block; margin-bottom: 5px; }

/* ── TABS ── */
.ds-tabs { display: flex; background: var(--c-border); border-radius: var(--r-md); padding: 3px; gap: 2px; }
.ds-tab {
  flex: 1; padding: 7px; font-size: 12px; font-weight: 600;
  border: none; border-radius: 9px; cursor: pointer;
  background: transparent; color: var(--c-text3); font-family: 'Sarabun', sans-serif;
  transition: all .15s; text-align: center;
}
.ds-tab.on { background: var(--c-surface); color: var(--c-text); box-shadow: var(--s-sm); }

/* ── NAV ── */
.ds-nav {
  background: var(--c-surface); border-top: 1px solid var(--c-border);
  display: flex; padding: 8px 4px 10px; flex-shrink: 0;
  box-shadow: 0 -4px 12px rgba(0,0,0,.04);
}
.ds-nav-btn {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
  border: none; background: transparent; cursor: pointer; padding: 4px 0;
  font-family: 'Sarabun', sans-serif; font-size: 10px; font-weight: 500;
  color: var(--c-text3); transition: color .15s;
}
.ds-nav-btn.on { color: var(--c-primary); }
.ds-nav-btn.on .ds-nav-icon { background: var(--c-primary-bg); }
.ds-nav-icon {
  width: 36px; height: 28px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; transition: background .15s;
}

/* ── SECTION ── */
.ds-section { padding: 12px 14px; }
.ds-section-title {
  font-size: 12px; font-weight: 700; color: var(--c-text3);
  letter-spacing: .06em; text-transform: uppercase;
  margin-bottom: 10px; display: flex; align-items: center; gap: 6px;
}
.ds-section-title::after { content: ''; flex: 1; height: 1px; background: var(--c-border); }

/* ── LIST ITEM ── */
.ds-list-item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 0; border-bottom: 1px solid var(--c-border);
}
.ds-list-item:last-child { border-bottom: none; }

/* ── CHIP ── */
.ds-chip {
  background: var(--c-bg); border: 1px solid var(--c-border);
  border-radius: 20px; padding: 5px 12px; font-size: 12px;
  cursor: pointer; white-space: nowrap; font-family: 'Sarabun', sans-serif;
  transition: all .12s;
}
.ds-chip.on { background: var(--c-primary); color: #fff; border-color: var(--c-primary); font-weight: 600; }

/* ── SCORE RING ── */
.ds-score-ring {
  width: 52px; height: 52px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 800; position: relative;
}
.ds-score-ring.A { background: var(--c-primary-bg); color: var(--c-primary); border: 2.5px solid var(--c-primary); }
.ds-score-ring.B { background: var(--c-blue-bg);    color: var(--c-blue);    border: 2.5px solid var(--c-blue); }
.ds-score-ring.C { background: var(--c-warn-bg);    color: var(--c-warn);    border: 2.5px solid var(--c-warn); }
.ds-score-ring.D { background: var(--c-danger-bg);  color: var(--c-danger);  border: 2.5px solid var(--c-danger); }

/* ── TOAST ── */
.ds-toast {
  position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
  background: var(--c-text); color: #fff; padding: 11px 22px;
  border-radius: 24px; font-size: 13px; font-weight: 500;
  z-index: 200; display: none; white-space: nowrap;
  box-shadow: 0 8px 24px rgba(0,0,0,.2);
}
.ds-toast.show { display: block; animation: toastIn .25s ease; }
.ds-toast.ok     { background: var(--c-primary); }
.ds-toast.err    { background: var(--c-danger); }
.ds-toast.warn   { background: var(--c-warn); }
@keyframes toastIn { from { opacity:0; transform:translateX(-50%) translateY(8px); } to { opacity:1; transform:translateX(-50%) translateY(0); } }

/* ── SHEET ── */
.ds-sheet-bg {
  position: fixed; inset: 0; background: rgba(0,0,0,.45);
  z-index: 50; display: none; align-items: flex-end; justify-content: center;
  backdrop-filter: blur(2px);
}
.ds-sheet-bg.show { display: flex; }
.ds-sheet {
  background: var(--c-surface); border-radius: var(--r-2xl) var(--r-2xl) 0 0;
  padding: 16px; width: 100%; max-width: 480px;
  max-height: 90vh; overflow-y: auto;
}
.ds-handle {
  width: 40px; height: 4px; background: var(--c-border);
  border-radius: 2px; margin: 0 auto 16px;
}
.ds-sheet-title { font-size: 16px; font-weight: 700; color: var(--c-text); margin-bottom: 16px; }

/* ── DARK MODE ── */
body.dark {
  --c-bg:      #0d1117;
  --c-surface: #161b22;
  --c-border:  #30363d;
  --c-text:    #e6edf3;
  --c-text2:   #7d8590;
  --c-text3:   #484f58;
  --c-primary-bg: rgba(29,158,117,.15);
  --c-warn-bg:    rgba(186,117,23,.15);
  --c-danger-bg:  rgba(220,38,38,.15);
  --c-blue-bg:    rgba(24,95,165,.15);
}

/* ── SCROLL ── */
.ds-scroll { overflow-y: auto; -webkit-overflow-scrolling: touch; }
.ds-scroll::-webkit-scrollbar { width: 4px; }
.ds-scroll::-webkit-scrollbar-thumb { background: var(--c-border); border-radius: 2px; }

/* ── ANIMATE ── */
.ds-fade-in { animation: fadeIn .3s ease; }
@keyframes fadeIn { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } }