/* =========================================================
   AYUKKI DIMSUM — TYPOGRAPHY SYSTEM V16
   Poppins: 400 / 500 / 600 / 700 / 800
   Layout, fungsi JavaScript, database tidak diubah.
   ========================================================= */
:root {
  --font-ui: 'Poppins', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --type-display: 30px;
  --type-section: 17px;
  --type-body: 13px;
  --type-label: 11.7px;
  --type-caption: 11.2px;
  --text-heading: #241a19;
  --text-secondary: #77645f;
}
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  font-family: var(--font-ui);
  font-size: var(--type-body);
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: 0;
  color: var(--text-heading);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button, input, select, textarea, option {
  font-family: var(--font-ui);
  font-weight: inherit;
  letter-spacing: inherit;
}
b, strong { font-weight: 600; }

/* 1. Hirarki judul & deskripsi */
h1, h2, h3 { color: var(--text-heading); }
h1, .section-h1 {
  font-size: var(--type-display);
  font-weight: 700;
  letter-spacing: -0.038em;
  line-height: 1.28;
  margin-top: 10px;
  margin-bottom: 7px;
  overflow-wrap: break-word;
}
h2, .panel h2 {
  font-size: var(--type-section);
  font-weight: 700;
  letter-spacing: -0.018em;
  line-height: 1.45;
  margin-bottom: 14px;
}
.section-h1 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 11px;
  row-gap: 5px;
}
.path { font-size: 11px; font-weight: 500; letter-spacing: .01em; color: #8e7973; }
.lead { font-size: 12.7px; font-weight: 400; color: var(--text-secondary); line-height: 1.75; margin-bottom: 23px; }
.muted { font-weight: 400; color: var(--text-secondary); line-height: 1.7; }
.small, .caption, .audit-note {
  font-size: var(--type-caption);
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: 0;
}

/* 2. Identitas merek & navigasi */
.brand-word {
  font-size: 15.2px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.3;
  white-space: normal;
}
.brand-copy { min-width: 0; }
.brand .subtitle {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.12em;
  line-height: 1.55;
  white-space: normal;
  margin-top: 5px;
}
.nav { font-size: 12.3px; font-weight: 500; line-height: 1.45; letter-spacing: -.01em; }
.nav.active { font-weight: 700; }
.sidefoot { font-size: 10px; font-weight: 400; line-height: 1.65; letter-spacing: .025em; }
.pill, .logout { font-size: 11.6px; font-weight: 600; line-height: 1.45; }

/* 3. KPI: nominal lebih menonjol, label lebih tenang */
.label, .metric-card .label, .finance-summary .card .label {
  font-size: 11.4px;
  font-weight: 600;
  line-height: 1.55;
  letter-spacing: 0;
}
.metric, .card .metric {
  font-size: clamp(21px, 1.85vw, 28px);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.card .small { font-size: 10.7px; font-weight: 400; line-height: 1.7; }
.finance-summary .card .metric { font-size: clamp(20px, 1.75vw, 26px); }
.finance-balance .finance-amount {
  font-size: clamp(30px, 3vw, 40px);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.22;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.finance-eyebrow { font-size: 10.5px; font-weight: 600; letter-spacing: .06em; line-height: 1.7; }
.finance-live { font-size: 10.4px; font-weight: 600; letter-spacing: 0; }
.finance-sub { font-size: 11.4px; font-weight: 400; line-height: 1.75; }
.finance-equation small { font-size: 10.6px; font-weight: 400; line-height: 1.55; }
.finance-equation strong { font-size: 15px; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }

/* 4. Form dan input transaksi / stok / keuangan */
.field label, .date-filter label, #login-form .field label,
.stock-filter-row label, .catalog-menu-row label {
  font-size: var(--type-label);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0;
  margin-bottom: 7px;
}
.field label::before { vertical-align: middle; }
input, select, textarea {
  font-size: 12.3px;
  font-weight: 400;
  line-height: 1.6;
  min-height: 43px;
  letter-spacing: 0;
}
input::placeholder, textarea::placeholder { font-size: 12px; font-weight: 400; color: #a0928d; opacity: 1; }
textarea { line-height: 1.7; }
.date-field input { font-weight: 500; }
.field .small { font-size: 10.7px; line-height: 1.65; }
.btn, .logout {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: -.008em;
}
.btn.soft-delete, .btn.soft-danger, .btn.soft-restore {
  font-size: 10.6px;
  font-weight: 600;
}
.cartqty button { font-size: 13px; font-weight: 600; }
.total { font-size: 17px; font-weight: 700; letter-spacing: -.025em; }
.notice, .menu-guidance, .drink-recipe-notice, .finance-tip {
  font-size: 11.7px;
  font-weight: 400;
  line-height: 1.8;
}
.notice b, .menu-guidance b, .drink-recipe-notice b, .finance-tip b { font-weight: 600; }

/* 5. Tabel riwayat, stok, harga */
th {
  font-size: 10.2px;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: .045em;
  text-transform: uppercase;
}
td {
  font-size: 11.8px;
  font-weight: 400;
  line-height: 1.75;
  letter-spacing: -.005em;
  overflow-wrap: break-word;
}
td b, td strong { font-weight: 600; }
td .small, td .audit-note { font-size: 10.4px; line-height: 1.6; }
.stockbalance { font-size: 12.3px; font-weight: 700; line-height: 1.5; font-variant-numeric: tabular-nums; }
.badge, .status-inactive, .tag-estimated, .itemtag {
  font-size: 10.3px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.45;
}
.editprice, .recipe-input { font-size: 11.8px; font-weight: 500; font-variant-numeric: tabular-nums; }
.sales-total { font-size: 16px; font-weight: 700; letter-spacing: -.025em; font-variant-numeric: tabular-nums; }
.sales-toolbar-status .small, .pager .small { font-size: 10.9px; }

/* 6. Produk, resep dan riwayat */
.product strong { font-size: 12.4px; font-weight: 600; line-height: 1.55; letter-spacing: -.01em; }
.product .availability { font-size: 10.8px; font-weight: 400; line-height: 1.6; }
.catpill { font-size: 10.3px; font-weight: 600; }
.catalog-toolbar b, .catalog-subhead b { font-size: 12.2px; font-weight: 600; }
.catalog-archived b, .stock-filter-row b { font-size: 11.6px; font-weight: 600; }
.cartline b { font-size: 12px; font-weight: 600; }
.history-item, .finance-ledger-row { font-size: 11.7px; font-weight: 400; line-height: 1.65; }
.history-item b, .finance-ledger-row b { font-weight: 600; }
.finance-ledger-amount { font-weight: 700; font-variant-numeric: tabular-nums; }

/* 7. Diagram dan ringkasan omzet */
.legend-item, .barrow { font-size: 11.4px; font-weight: 500; line-height: 1.55; }
.legend-item b, .barrow b { font-size: 11.3px; font-weight: 600; font-variant-numeric: tabular-nums; }
#donut-total { font-size: 12px; font-weight: 700; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.line-chart-big { font-size: 22px; font-weight: 700; letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.line-chart-sub { font-size: 10.8px; font-weight: 400; line-height: 1.6; }
.line-chart-svg { font-family: var(--font-ui); }
.line-tooltip { font-size: 10px; font-weight: 600; }
.line-x-label, .line-point-label { font-size: 10px; font-weight: 500; }
.month-value { font-size: 10.7px; font-weight: 600; }
.month-label { font-size: 10.3px; font-weight: 500; }

/* 8. Halaman login */
.login-box h2 { font-size: 23px; font-weight: 700; letter-spacing: -.034em; line-height: 1.3; }
.login-box .small, .single-account-note { font-size: 10.9px; font-weight: 400; line-height: 1.7; }
.error { font-size: 11.2px; font-weight: 500; line-height: 1.6; }

/* Responsif: menjaga label dan nominal tidak bertumpuk */
@media (max-width: 1180px) {
  .metric, .card .metric { font-size: clamp(21px, 2.2vw, 27px); }
}
@media (max-width: 860px) {
  :root { --type-display: 26px; --type-section: 16px; }
  body { font-size: 12.8px; }
  .brand-word { font-size: 15px; }
  .nav { font-size: 12px; }
  th { font-size: 10px; }
  td { font-size: 11.7px; }
}
@media (max-width: 560px) {
  :root { --type-display: 23.5px; --type-section: 15.5px; --type-label: 11.5px; }
  h1, .section-h1 { font-size: var(--type-display); line-height: 1.35; }
  h2, .panel h2 { font-size: var(--type-section); }
  .lead { font-size: 12px; line-height: 1.7; }
  .metric, .card .metric { font-size: 23px; }
  .finance-balance .finance-amount { font-size: 30px; }
  .login-box h2 { font-size: 20px; }
  .barrow { grid-template-columns: 86px minmax(0, 1fr) 80px; gap: 8px; font-size: 10.4px; }
  .barrow b { font-size: 10.3px; }
  .catalog-toolbar, .notice, .menu-guidance { font-size: 11.2px; }
  .panel, .card { overflow-wrap: break-word; }
}