/* MIG UI v1: satu sumber gaya untuk semua tools MIG Digital Printing.
   Hanya ada SATU file ini, di root repo. Halaman depan memanggil "index.css",
   tiap tools memanggil "../index.css". Ubah di sini = semua tools ikut berubah.
   Gaya khusus tiap tools ada di style.css masing-masing.
   Nama token sama dengan @theme Tailwind di aplikasi kasir (--color-brand, dst). */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");

:root {
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --color-brand: #7b29ba;
  --color-brand-hover: #6a21a3;
  --color-brand-soft: #f4ebfa;
  --color-page: #f5f4f8;
  --color-surface: #ffffff;
  --color-line: #e2e0ea;
  --color-ink: #1c1b1a;
  --color-muted: #6b675e;
  --color-success-bg: #dcfce7;
  --color-success-fg: #15803d;
  --color-warning-bg: #fdf0d5;
  --color-warning-fg: #8a5a00;
  --color-danger-bg: #fee2e2;
  --color-danger-fg: #b91c1c;
  --radius-pill: 999px; /* teks kecil sampai 3 baris, tinggi maks ~90px */
  --radius-card: 32px; /* susunan vertikal, grafik, panel, teks besar, blok tinggi */
  --control-h: 44px; /* tinggi minimal semua yang bisa disentuh */
}

.mig-base, .mig-base * { box-sizing: border-box; }
.mig-base {
  margin: 0;
  background: var(--color-page);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.45;
  font-variant-numeric: tabular-nums;
}
.mig-base button, .mig-base input, .mig-base select, .mig-base textarea { font-family: inherit; }
.mig-base :focus-visible { outline: 2px solid var(--color-brand); outline-offset: 2px; }
.mig-base svg { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Tombol */
.mig-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--control-h); padding: 0 20px; border: 0; cursor: pointer;
  border-radius: var(--radius-pill); background: var(--color-brand); color: #fff;
  font-size: 14px; font-weight: 600; transition: background-color .15s;
}
.mig-btn:hover { background: var(--color-brand-hover); }
.mig-btn--secondary { background: var(--color-surface); color: var(--color-ink); box-shadow: inset 0 0 0 1.5px var(--color-line); }
.mig-btn--secondary:hover { background: var(--color-brand-soft); }
.mig-btn--danger { background: var(--color-danger-fg); }
.mig-btn--danger:hover { background: var(--color-danger-fg); opacity: .9; }
.mig-btn--lg { min-height: 56px; font-size: 16px; font-weight: 700; }
.mig-btn--block { width: 100%; }
.mig-btn:disabled { opacity: .5; cursor: not-allowed; }

/* Kartu: susunan vertikal, grafik, panel. Blok horizontal pendek dengan teks kecil (sampai 3 baris): .mig-capsule */
.mig-card { background: var(--color-surface); border-radius: var(--radius-card); padding: 16px; }
.mig-card--lg { padding: 24px; }
.mig-capsule { background: var(--color-surface); border-radius: var(--radius-pill); padding: 14px 28px; }
.mig-card--selected { box-shadow: inset 0 0 0 1.5px var(--color-brand); }

/* Badge status */
.mig-badge {
  display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px;
  border-radius: var(--radius-pill); font-size: 11px; font-weight: 700;
  background: var(--color-line); color: var(--color-muted);
}
.mig-badge--dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.mig-badge--success { background: var(--color-success-bg); color: var(--color-success-fg); }
.mig-badge--warning { background: var(--color-warning-bg); color: var(--color-warning-fg); }
.mig-badge--danger { background: var(--color-danger-bg); color: var(--color-danger-fg); }
.mig-badge--brand { background: var(--color-brand-soft); color: var(--color-brand); }
.mig-badge--dark { background: var(--color-ink); color: #fff; } /* persen naik/turun */

/* Isian: satu baris = pill, banyak baris = kartu 32px */
.mig-field { display: flex; flex-direction: column; gap: 6px; }
.mig-label { font-size: 14px; font-weight: 500; }
.mig-hint { font-size: 12px; color: var(--color-muted); }
.mig-error { font-size: 12px; color: var(--color-danger-fg); }
.mig-input {
  width: 100%; min-height: var(--control-h); padding: 0 18px; font-size: 14px; color: var(--color-ink);
  background: var(--color-surface); border: 1.5px solid var(--color-line); border-radius: var(--radius-pill);
}
.mig-input::placeholder { color: rgba(107, 103, 94, .6); }
.mig-input:focus { outline: none; border-color: var(--color-brand); box-shadow: 0 0 0 3px rgba(123, 41, 186, .15); }
.mig-input--error { border-color: var(--color-danger-fg); }
.mig-input--multiline { padding: 16px 24px; border-radius: var(--radius-card); resize: vertical; }

/* Pilihan 2-3 opsi (pill, satu ketukan). 4 opsi atau lebih: pakai select */
.mig-choice { display: flex; flex-wrap: wrap; gap: 8px; }
.mig-choice__item {
  flex: 1 0 auto; min-width: 96px; min-height: var(--control-h); padding: 0 16px; cursor: pointer;
  border-radius: var(--radius-pill); border: 1.5px solid var(--color-line);
  background: var(--color-surface); color: var(--color-ink); font-size: 14px; font-weight: 600;
}
.mig-choice__item[aria-checked="true"] { border-color: var(--color-brand); background: var(--color-brand-soft); color: var(--color-brand); }

/* Chip kategori / filter */
.mig-chip { flex: none; min-height: var(--control-h); padding: 0 20px; border: 0; cursor: pointer; border-radius: var(--radius-pill); background: var(--color-surface); color: var(--color-ink); font-size: 14px; font-weight: 600; }
.mig-chip.is-active { background: var(--color-brand); color: #fff; }

/* Kotak ikon produk: ikon satu warna hitam */
.mig-tile { width: 44px; height: 44px; border-radius: 16px; display: flex; align-items: center; justify-content: center; background: var(--color-page); color: var(--color-ink); }

/* Tata letak layar: atas tetap, daftar bergulir, aksi utama menempel di bawah */
.mig-screen { display: flex; flex-direction: column; height: 100dvh; }
.mig-screen__top, .mig-screen__bottom { flex: none; }
.mig-screen__body { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: none; }
.mig-screen__body::-webkit-scrollbar { display: none; }

/* Menu bawah di HP */
.mig-tabbar { display: flex; padding: 8px 8px 14px; background: var(--color-surface); border-radius: 28px 28px 0 0; }
.mig-tab { flex: 1; min-height: 56px; display: flex; flex-direction: column; align-items: center; gap: 2px; border: 0; background: none; color: var(--color-muted); font-size: 11px; font-weight: 600; cursor: pointer; }
.mig-tab > span { width: 56px; height: 30px; border-radius: var(--radius-pill); display: flex; align-items: center; justify-content: center; }
.mig-tab[aria-current="page"] { color: var(--color-brand); }
.mig-tab[aria-current="page"] > span { background: var(--color-brand-soft); }

/* Modal (elemen dialog) dan pesan singkat */
dialog.mig-modal { width: calc(100% - 32px); max-width: 448px; padding: 20px; border: 0; border-radius: var(--radius-card); background: var(--color-surface); color: var(--color-ink); box-shadow: 0 20px 50px rgba(0, 0, 0, .2); }
dialog.mig-modal::backdrop { background: rgba(0, 0, 0, .4); }
.mig-toast { padding: 12px 20px; border-radius: var(--radius-pill); background: var(--color-ink); color: #fff; font-size: 14px; font-weight: 600; box-shadow: 0 8px 24px rgba(0, 0, 0, .18); }

.mig-toast--success { background: var(--color-success-bg); color: var(--color-success-fg); }
.mig-toast--danger { background: var(--color-danger-bg); color: var(--color-danger-fg); }

/* Teks di dalam pill satu baris; kalau tidak muat, pill-nya yang turun (lihat prinsip 6) */
.mig-btn, .mig-choice__item, .mig-chip, .mig-badge { white-space: nowrap; }

@media (prefers-reduced-motion: reduce) { .mig-btn { transition: none; } }


/* Select pill dengan panah sendiri (sama di semua browser) */
select.mig-input {
  appearance: none; -webkit-appearance: none; padding-right: 44px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%231c1b1a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 18px center;
}

/* Logo di header tools = tombol kembali ke halaman depan */
.mig-home { display: flex; flex: none; border-radius: 16px; }