/* =========================================================================
   MyGoodang · Design Tokens (dark + light)
   -------------------------------------------------------------------------
   Pakai: <html data-theme="dark"> atau <html data-theme="light">.
   Tombol ganti tema yang sudah ada cukup mengubah atribut data-theme.
   Semua komponen HANYA boleh memakai var(--mg-*), jangan hex langsung.
   ========================================================================= */


:root {
  /* ---- Tipografi ---- */
  --mg-font: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mg-font-num: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --mg-text-xs: 11px;
  --mg-text-sm: 12px;
  --mg-text-md: 13px;
  --mg-text-base: 14px;
  --mg-text-lg: 15px;
  --mg-text-xl: 17px;
  --mg-text-2xl: 20px;
  --mg-text-3xl: 26px;
  --mg-kpi: 34px;        /* angka KPI */
  --mg-kpi-lg: 52px;     /* angka hero (mis. Current Stock) */

  /* ---- Spasi (kelipatan 4) ---- */
  --mg-1: 4px;  --mg-2: 8px;  --mg-3: 12px; --mg-4: 16px;
  --mg-5: 20px; --mg-6: 24px; --mg-8: 32px; --mg-10: 40px;

  /* ---- Radius ---- */
  --mg-r-sm: 8px;
  --mg-r-md: 12px;
  --mg-r-lg: 16px;
  --mg-r-xl: 20px;
  --mg-r-pill: 999px;

  /* ---- Ukuran ---- */
  --mg-touch: 44px;          /* target sentuh minimum */
  --mg-sidebar-w: 248px;
  --mg-sidebar-w-collapsed: 76px;
  --mg-drawer-w: 288px;

  /* ---- Efek ---- */
  --mg-blur: 14px;
  --mg-ease: cubic-bezier(.2,.8,.2,1);
  --mg-dur: .2s;
}

/* =============================== DARK =================================== */
:root,
[data-theme="dark"] {
  color-scheme: dark;

  --mg-bg: #0B1118;                         /* deep slate, bukan hitam pekat */
  --mg-bg-dot: rgba(148,163,184,0.07);      /* pola titik di latar */
  --mg-surface: rgba(23,32,44,0.62);        /* kartu glass */
  --mg-surface-solid: #151D27;              /* popover, dropdown, flyout */
  --mg-surface-sunken: rgba(8,13,19,0.55);  /* input, sel dalam kartu */
  --mg-surface-hover: rgba(127,182,255,0.10);

  --mg-border: rgba(148,163,184,0.14);
  --mg-border-strong: rgba(148,163,184,0.25);

  --mg-text: #E6EDF5;        /* teks utama */
  --mg-text-2: #CFD8E3;      /* teks sekunder kuat */
  --mg-text-muted: #AFC0D3;  /* label */
  --mg-text-faint: #8B98A9;  /* keterangan kecil (lolos 4.5:1 di bg) */

  /* Biru elektrik: aksi utama, Active Orders, item aktif */
  --mg-primary: #4C9EFF;
  --mg-primary-strong: #2F7FE6;   /* latar tombol primer (teks putih) */
  --mg-primary-text: #CFE3FF;
  --mg-primary-soft: rgba(76,158,255,0.16);
  --mg-primary-border: rgba(76,158,255,0.45);
  --mg-primary-glow: 0 0 22px -8px rgba(76,158,255,0.7);

  /* Hijau neon lembut: Ready to Ship, sukses, lunas */
  --mg-success: #3DDC97;
  --mg-success-text: #6BE8B1;
  --mg-success-soft: rgba(61,220,151,0.14);
  --mg-success-border: rgba(61,220,151,0.40);

  /* Amber: pending, stok menipis, perlu review */
  --mg-warning: #F5B544;
  --mg-warning-text: #F8C46A;
  --mg-warning-soft: rgba(245,181,68,0.14);
  --mg-warning-border: rgba(245,181,68,0.40);

  /* Merah: cancelled, error, jatuh tempo, turun */
  --mg-danger: #F0637A;
  --mg-danger-text: #FF8FA0;
  --mg-danger-soft: rgba(240,99,122,0.16);
  --mg-danger-border: rgba(240,99,122,0.40);

  /* Ungu: packing, jurnal otomatis, portal brand */
  --mg-accent: #C79BFF;
  --mg-accent-text: #E3CCFF;
  --mg-accent-soft: rgba(199,155,255,0.16);

  --mg-neutral-soft: rgba(148,163,184,0.12);

  --mg-shadow-pop: 0 18px 40px -16px rgba(0,0,0,0.85);
  --mg-scrim: rgba(4,8,12,0.6);
}

/* =============================== LIGHT ================================== */
[data-theme="light"] {
  color-scheme: light;

  --mg-bg: #F3F5FA;
  --mg-bg-dot: rgba(15,23,42,0.05);
  --mg-surface: rgba(255,255,255,0.86);
  --mg-surface-solid: #FFFFFF;
  --mg-surface-sunken: #F1F4F9;
  --mg-surface-hover: rgba(47,111,230,0.08);

  --mg-border: rgba(15,23,42,0.10);
  --mg-border-strong: rgba(15,23,42,0.18);

  --mg-text: #0F172A;
  --mg-text-2: #1E293B;
  --mg-text-muted: #475569;
  --mg-text-faint: #5B6779;

  --mg-primary: #2F6FE6;
  --mg-primary-strong: #2F6FE6;
  --mg-primary-text: #1D4FB8;
  --mg-primary-soft: rgba(47,111,230,0.10);
  --mg-primary-border: rgba(47,111,230,0.35);
  --mg-primary-glow: none;

  --mg-success: #0E9F6E;
  --mg-success-text: #047857;
  --mg-success-soft: rgba(14,159,110,0.10);
  --mg-success-border: rgba(14,159,110,0.35);

  --mg-warning: #D97706;
  --mg-warning-text: #92400E;
  --mg-warning-soft: rgba(217,119,6,0.12);
  --mg-warning-border: rgba(217,119,6,0.35);

  --mg-danger: #DC2646;
  --mg-danger-text: #B4122F;
  --mg-danger-soft: rgba(220,38,70,0.10);
  --mg-danger-border: rgba(220,38,70,0.35);

  --mg-accent: #7C4FD6;
  --mg-accent-text: #5B2FB8;
  --mg-accent-soft: rgba(124,79,214,0.10);

  --mg-neutral-soft: rgba(15,23,42,0.06);

  --mg-shadow-pop: 0 18px 40px -16px rgba(15,23,42,0.25);
  --mg-scrim: rgba(15,23,42,0.4);
}

/* ============================ BASE & UTILITAS =========================== */
html, body { margin: 0; }
body {
  font-family: var(--mg-font);
  font-size: var(--mg-text-base);
  color: var(--mg-text);
  background-color: var(--mg-bg);
  background-image: radial-gradient(var(--mg-bg-dot) 1px, transparent 1px);
  background-size: 22px 22px;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--mg-primary); }
:focus-visible { outline: 2px solid var(--mg-primary); outline-offset: 2px; }

/* Angka: selalu monospace tabular supaya kolom sejajar */
.mg-num { font-family: var(--mg-font-num); font-variant-numeric: tabular-nums; }

/* Kartu glass */
.mg-card {
  background: var(--mg-surface);
  backdrop-filter: blur(var(--mg-blur));
  -webkit-backdrop-filter: blur(var(--mg-blur));
  border: 1px solid var(--mg-border);
  border-radius: var(--mg-r-lg);
  padding: var(--mg-5);
}
.mg-card--accent-primary { border-color: var(--mg-primary-border); box-shadow: 0 10px 40px -20px var(--mg-primary); }
.mg-card--accent-success { border-color: var(--mg-success-border); box-shadow: 0 10px 40px -20px var(--mg-success); }
.mg-card--accent-warning { border-color: var(--mg-warning-border); }

/* KPI */
.mg-kpi__label { font-size: var(--mg-text-md); color: var(--mg-text-muted); }
.mg-kpi__value { font-family: var(--mg-font-num); font-size: var(--mg-kpi); font-weight: 700; line-height: 1; }
.mg-kpi__sub   { font-size: var(--mg-text-sm); color: var(--mg-text-faint); }

/* Chip status */
.mg-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 8px; border-radius: 6px;
  font-size: var(--mg-text-xs); font-weight: 600; white-space: nowrap;
  color: var(--mg-text-muted); background: var(--mg-neutral-soft);
}
.mg-chip--primary { color: var(--mg-primary-text); background: var(--mg-primary-soft); }
.mg-chip--success { color: var(--mg-success-text); background: var(--mg-success-soft); }
.mg-chip--warning { color: var(--mg-warning-text); background: var(--mg-warning-soft); }
.mg-chip--danger  { color: var(--mg-danger-text);  background: var(--mg-danger-soft); }
.mg-chip--accent  { color: var(--mg-accent-text);  background: var(--mg-accent-soft); }

/* Tombol */
.mg-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--mg-touch); padding: 0 16px;
  border-radius: var(--mg-r-md); border: 1px solid var(--mg-border-strong);
  background: transparent; color: var(--mg-text-2);
  font: inherit; font-size: var(--mg-text-md); font-weight: 500; cursor: pointer; text-decoration: none;
  transition: background var(--mg-dur), border-color var(--mg-dur), color var(--mg-dur);
}
.mg-btn:hover { background: var(--mg-surface-hover); color: var(--mg-text); }
.mg-btn--primary { background: var(--mg-primary-strong); border-color: var(--mg-primary-border); color: #fff; font-weight: 600; }
.mg-btn--primary:hover { background: var(--mg-primary); color: #fff; }
.mg-btn--soft { background: var(--mg-primary-soft); border-color: var(--mg-primary-border); color: var(--mg-primary-text); }
.mg-btn--icon { width: var(--mg-touch); padding: 0; }

/* Input */
.mg-input, .mg-select {
  height: 42px; padding: 0 12px; box-sizing: border-box;
  border-radius: 10px; border: 1px solid var(--mg-border-strong);
  background: var(--mg-surface-sunken); color: var(--mg-text);
  font: inherit; font-size: var(--mg-text-md);
}
.mg-input::placeholder { color: var(--mg-text-faint); }

/* Tab / segmented */
.mg-tabs { display: flex; gap: 4px; padding: 6px; overflow-x: auto; border-radius: var(--mg-r-lg); background: var(--mg-surface); border: 1px solid var(--mg-border); }
.mg-tab {
  flex: 1 0 auto; min-height: var(--mg-touch); padding: 0 16px; white-space: nowrap;
  border-radius: var(--mg-r-md); border: 1px solid transparent; background: transparent;
  color: var(--mg-text-muted); font: inherit; font-size: var(--mg-text-md); cursor: pointer;
}
.mg-tab[aria-selected="true"], .mg-tab[aria-pressed="true"] {
  background: var(--mg-primary-soft); border-color: var(--mg-primary-border); color: var(--mg-text); font-weight: 600;
}

/* Tabel */
.mg-table-wrap { overflow-x: auto; }
.mg-table { width: 100%; border-collapse: collapse; font-size: var(--mg-text-md); }
.mg-table th {
  text-align: left; padding: 10px 8px; font-weight: 500; font-size: var(--mg-text-sm);
  color: var(--mg-text-faint); border-bottom: 1px solid var(--mg-border-strong); white-space: nowrap;
}
.mg-table td { padding: 12px 8px; border-bottom: 1px solid var(--mg-border); }
.mg-table tbody tr:hover { background: var(--mg-surface-hover); }
.mg-table .is-num { text-align: right; font-family: var(--mg-font-num); font-variant-numeric: tabular-nums; }

/* Tag data contoh (hanya untuk mockup/demo) */
.mg-sample-tag { padding: 2px 8px; border-radius: 6px; font-size: 10px; letter-spacing: .08em; color: var(--mg-text-faint); border: 1px dashed var(--mg-border-strong); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; }
}