/*
 * Admin Dewiana, tampilan "simple" (sama dengan mockup admin). Dimuat terakhir di layout
 * default/login:
 *  - kerangka adm-* (sidebar, header, drawer log, palet Ctrl K) menggantikan Metronic;
 *  - komponen Metronic/Bootstrap di dalam halaman (tombol, badge, tabel, input, switch,
 *    pagination, SweetAlert, alert) dipetakan ke komponen mockup lewat selector + --bs-*;
 *  - komponen mockup juga tersedia langsung (adm-btn, adm-pill, adm-seg, adm-tbl, ...)
 *    untuk halaman yang ditulis ulang (produk, dashboard, laporan, profil, login);
 *  - tanpa animasi/transisi.
 * Tema mengikuti data-bs-theme (light/dark) yang dipasang skrip di <body>.
 */
:root,
[data-bs-theme=light] {
  --adm-bg: #eef1ec;
  --adm-surface: #ffffff;
  --adm-surface-2: #f6f8f4;
  --adm-line: #dfe5dc;
  --adm-ink: #16211b;
  --adm-muted: #5c6b62;
  --adm-accent: #0b7a57;
  --adm-accent-ink: #ffffff;
  --adm-accent-soft: #dff2e8;
  --adm-warn: #b25e09;
  --adm-warn-soft: #fbecd8;
  --adm-danger: #b4262c;
  --adm-danger-ink: #ffffff;
  --adm-danger-soft: #fbe2e1;
  --adm-deep: #0c3b2b;
  --adm-deep-ink: #e3f3ea;
  --adm-paper: #fbfaf4;
  --adm-paper-ink: #2a2a24;
  --adm-key-bg: #ffffff;
  --adm-key-line: #c9d1c6;
  --adm-shadow: 0 1px 2px rgba(20, 40, 30, .06), 0 8px 24px rgba(20, 40, 30, .06);
  --adm-font-ui: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;
  --adm-font-num: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --bs-font-sans-serif: var(--adm-font-ui);
  --bs-body-font-family: var(--adm-font-ui);
  --bs-page-bg: var(--adm-bg);
  --bs-body-bg: var(--adm-surface);
  --bs-body-color: var(--adm-ink);
  --bs-border-color: var(--adm-line);
  --bs-text-muted: var(--adm-muted);
  --bs-gray-900: #16211b;
  --bs-gray-800: #2b3a32;
  --bs-gray-700: #45544b;
  --bs-gray-600: #5c6b62;
  --bs-gray-500: #7c8a81;
  --bs-gray-400: #a8b3ab;
  --bs-gray-300: #dfe5dc;
  --bs-gray-200: #edf1ea;
  --bs-gray-100: #f6f8f4;
  --bs-light: #f6f8f4;
  --bs-light-active: #edf1ea;

  --bs-primary: #0b7a57;
  --bs-primary-rgb: 11, 122, 87;
  --bs-primary-active: #086247;
  --bs-primary-light: #dff2e8;
  --bs-primary-inverse: #ffffff;
  --bs-success: #0b7a57;
  --bs-success-rgb: 11, 122, 87;
  --bs-success-active: #086247;
  --bs-success-light: #dff2e8;
  --bs-success-inverse: #ffffff;
  --bs-info: #45544b;
  --bs-info-rgb: 69, 84, 75;
  --bs-info-active: #2b3a32;
  --bs-info-light: #edf1ea;
  --bs-info-inverse: #ffffff;
  --bs-warning: #b25e09;
  --bs-warning-rgb: 178, 94, 9;
  --bs-warning-active: #93500b;
  --bs-warning-light: #fbecd8;
  --bs-warning-inverse: #ffffff;
  --bs-danger: #b4262c;
  --bs-danger-rgb: 180, 38, 44;
  --bs-danger-active: #961f24;
  --bs-danger-light: #fbe2e1;
  --bs-danger-inverse: #ffffff;
  --bs-link-color: #0b7a57;
  --bs-link-hover-color: #086247;
  --bs-text-primary: #0b7a57;
  --bs-text-success: #0b7a57;
  --bs-text-info: #45544b;
  --bs-text-warning: #b25e09;
  --bs-text-danger: #b4262c;
  --bs-text-dark: #16211b;
  --bs-text-gray-900: #16211b;
}

[data-bs-theme=dark] {
  --adm-bg: #0e1411;
  --adm-surface: #161e1a;
  --adm-surface-2: #1c2621;
  --adm-line: #2a3630;
  --adm-ink: #e6efe9;
  --adm-muted: #93a49a;
  --adm-accent: #3fd4a0;
  --adm-accent-ink: #062218;
  --adm-accent-soft: #163a2c;
  --adm-warn: #f2a65a;
  --adm-warn-soft: #3a2a17;
  --adm-danger: #ff7b78;
  --adm-danger-ink: #2b0909;
  --adm-danger-soft: #3b1d1d;
  --adm-deep: #0a2a1f;
  --adm-deep-ink: #cfe9dc;
  --adm-paper: #e9e7dc;
  --adm-paper-ink: #22221d;
  --adm-key-bg: #1f2a24;
  --adm-key-line: #36443c;
  --adm-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 28px rgba(0, 0, 0, .35);

  --bs-page-bg: var(--adm-bg);
  --bs-body-bg: var(--adm-surface);
  --bs-body-color: var(--adm-ink);
  --bs-border-color: var(--adm-line);
  --bs-text-muted: var(--adm-muted);
  --bs-gray-900: #e6efe9;
  --bs-gray-800: #cfdcd4;
  --bs-gray-700: #b2c1b8;
  --bs-gray-600: #93a49a;
  --bs-gray-500: #76877d;
  --bs-gray-400: #56665c;
  --bs-gray-300: #34413a;
  --bs-gray-200: #24302a;
  --bs-gray-100: #1c2621;
  --bs-light: #1c2621;
  --bs-light-active: #24302a;

  --bs-primary: #3fd4a0;
  --bs-primary-rgb: 63, 212, 160;
  --bs-primary-active: #2fbf8c;
  --bs-primary-light: #163a2c;
  --bs-primary-inverse: #062218;
  --bs-success: #3fd4a0;
  --bs-success-rgb: 63, 212, 160;
  --bs-success-active: #2fbf8c;
  --bs-success-light: #163a2c;
  --bs-success-inverse: #062218;
  --bs-info: #b2c1b8;
  --bs-info-rgb: 178, 193, 184;
  --bs-info-active: #cfdcd4;
  --bs-info-light: #24302a;
  --bs-info-inverse: #0e1411;
  --bs-warning: #f2a65a;
  --bs-warning-rgb: 242, 166, 90;
  --bs-warning-active: #e8964a;
  --bs-warning-light: #3a2a17;
  --bs-warning-inverse: #2b1a08;
  --bs-danger: #ff7b78;
  --bs-danger-rgb: 255, 123, 120;
  --bs-danger-active: #f2625f;
  --bs-danger-light: #3b1d1d;
  --bs-danger-inverse: #2b0909;
  --bs-link-color: #3fd4a0;
  --bs-link-hover-color: #2fbf8c;
  --bs-text-primary: #3fd4a0;
  --bs-text-success: #3fd4a0;
  --bs-text-info: #b2c1b8;
  --bs-text-warning: #f2a65a;
  --bs-text-danger: #ff7b78;
  --bs-text-dark: #e6efe9;
  --bs-text-gray-900: #e6efe9;
}

/* ---------- dasar ---------- */
*, *::before, *::after { animation: none !important; transition: none !important; }
html, body { background: var(--adm-bg) !important; }
body { font-family: var(--adm-font-ui) !important; font-size: 14px !important; line-height: 1.4; color: var(--adm-ink); text-transform: none !important; }
/* Data (isi tabel & isian) tetap huruf besar seperti sebelumnya; menu, judul, tombol normal */
#kt_content .table tbody, #kt_content .form-control { text-transform: uppercase; }
#kt_content .form-control::placeholder { text-transform: none; }
:focus-visible { outline: 3px solid var(--adm-accent); outline-offset: 2px; }
h1, h2, h3 { text-wrap: balance; }
.adm-num, .num { font-family: var(--adm-font-num) !important; font-variant-numeric: tabular-nums; }
.adm-muted { color: var(--adm-muted); }
.adm-label { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--adm-muted); }
kbd { font-family: var(--adm-font-num); font-size: 11px; font-weight: 700; line-height: 1; padding: 3px 5px; min-width: 12px; text-align: center; display: inline-block; border: 1px solid var(--adm-key-line); border-bottom-width: 2px; border-radius: 5px; background: var(--adm-key-bg); color: var(--adm-ink); box-shadow: none; }

/* ---------- komponen mockup (dipakai langsung) ---------- */
.adm-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 38px; padding: 0 14px; border-radius: 9px; border: 1px solid var(--adm-line); background: var(--adm-surface); color: var(--adm-ink) !important; font-weight: 700; font-size: 14px; white-space: nowrap; text-decoration: none; cursor: pointer; }
.adm-btn:hover { border-color: var(--adm-muted); }
.adm-btn.primary { background: var(--adm-accent); color: var(--adm-accent-ink) !important; border-color: var(--adm-accent); }
.adm-btn.primary:hover { filter: brightness(1.05); }
.adm-btn.danger { background: var(--adm-danger); color: var(--adm-danger-ink) !important; border-color: var(--adm-danger); }
.adm-btn.sm { height: 32px; padding: 0 10px; font-size: 13px; }
.adm-btn:disabled { opacity: .7; cursor: progress; }
.adm-btn.primary kbd { background: transparent; color: inherit; border-color: currentColor; font-size: 10px; padding: 1px 4px; }
.adm-icon-btn { display: inline-grid; place-items: center; width: 36px; height: 36px; padding: 0; border-radius: 9px; border: 1px solid var(--adm-line); background: var(--adm-surface); color: var(--adm-muted) !important; cursor: pointer; position: relative; text-decoration: none; font-size: 18px; line-height: 1; }
.adm-icon-btn:hover { color: var(--adm-ink) !important; border-color: var(--adm-muted); }
.adm-icon-btn.sm { width: 32px; height: 32px; }
.adm-icon-btn.del:hover { color: var(--adm-danger) !important; border-color: var(--adm-danger); }
.adm-pill { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; line-height: 1.5; padding: 2px 8px; border-radius: 99px; border: 1px solid transparent; background: var(--adm-surface-2); color: var(--adm-muted) !important; white-space: nowrap; text-decoration: none; }
a.adm-pill, button.adm-pill { cursor: pointer; }
.adm-pill.ok { background: var(--adm-accent-soft); color: var(--adm-accent) !important; }
.adm-pill.off { background: var(--adm-danger-soft); color: var(--adm-danger) !important; }
.adm-pill.warn { background: var(--adm-warn-soft); color: var(--adm-warn) !important; }
.adm-seg { display: inline-flex; border: 1px solid var(--adm-line); border-radius: 9px; padding: 2px; background: var(--adm-surface-2); flex-wrap: wrap; }
.adm-seg button, .adm-seg a { border: 0; background: transparent; border-radius: 7px; padding: 6px 11px; font-weight: 700; font-size: 13px; color: var(--adm-muted); text-decoration: none; cursor: pointer; }
.adm-seg [aria-pressed="true"], .adm-seg .active { background: var(--adm-surface); color: var(--adm-ink); box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
.adm-input, .adm-select { width: 100%; min-width: 0; height: 38px; padding: 0 12px; border: 1px solid var(--adm-line); border-radius: 8px; background: var(--adm-surface); color: var(--adm-ink); font: inherit; }
.adm-input:focus, .adm-select:focus { outline: none; border-color: var(--adm-accent); box-shadow: 0 0 0 3px var(--adm-accent-soft); }
.adm-field { display: grid; gap: 6px; min-width: 0; }
.adm-field > span { font-size: 13px; font-weight: 600; }
.adm-field small { color: var(--adm-muted); font-size: 12px; }
.adm-switch, .form-group .form-check-custom > input.form-check-input[type=checkbox] { appearance: none; -webkit-appearance: none; margin: 0; width: 38px !important; height: 22px !important; border-radius: 11px !important; border: 0 !important; background: var(--adm-line) !important; background-image: none !important; position: relative; cursor: pointer; flex: none; }
.adm-switch::after, .form-group .form-check-custom > input.form-check-input[type=checkbox]::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--adm-surface); box-shadow: 0 1px 2px rgba(0, 0, 0, .25); }
.adm-switch:checked, .form-group .form-check-custom > input.form-check-input[type=checkbox]:checked { background: var(--adm-accent) !important; }
.adm-switch:checked::after, .form-group .form-check-custom > input.form-check-input[type=checkbox]:checked::after { left: 19px; }
/* label "AKTIF" di samping switch tidak perlu: judul kolom sudah di kiri */
.form-group .form-check-custom > input.form-check-input[type=checkbox] + .form-check-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.form-group .form-check-custom { min-height: 38px; display: flex; align-items: center; }

/* ---------- kerangka ---------- */
.adm-shell { display: grid; grid-template-columns: 248px minmax(0, 1fr); min-height: 100vh; }
.adm-shell.mini { grid-template-columns: 68px minmax(0, 1fr); }
.adm-side { position: sticky; top: 0; height: 100vh; height: 100dvh; display: flex; flex-direction: column; background: var(--adm-surface); border-right: 1px solid var(--adm-line); min-width: 0; z-index: 50; }
.adm-side-top { display: flex; align-items: center; gap: 10px; padding: 14px 14px 10px; }
.adm-brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 16px; color: var(--adm-ink) !important; text-decoration: none; min-width: 0; }
.adm-brand > span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adm-brand-mark { width: 34px; height: 34px; border-radius: 9px; background: var(--adm-accent); color: var(--adm-accent-ink); display: grid; place-items: center; font-weight: 800; font-size: 17px; flex: none; }
.adm-kasir { margin: 4px 12px 10px; justify-content: flex-start; }
.adm-kasir kbd { margin-left: auto; }
.adm-nav { flex: 1; overflow-y: auto; padding: 4px 10px 12px; display: grid; align-content: start; gap: 2px; }
.adm-nav-label { padding: 14px 10px 6px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--adm-muted); }
.adm-nav-link { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; color: var(--adm-muted) !important; font-weight: 600; text-decoration: none; min-width: 0; }
.adm-nav-link svg { flex: none; }
.adm-nav-link span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adm-nav-link:hover { background: var(--adm-surface-2); color: var(--adm-ink) !important; }
.adm-nav-link.active { background: var(--adm-accent-soft); color: var(--adm-accent) !important; }
.adm-me { position: relative; border-top: 1px solid var(--adm-line); padding: 10px 12px; }
.adm-me-btn { width: 100%; display: flex; align-items: center; gap: 10px; border: 0; background: transparent; padding: 6px; border-radius: 8px; text-align: left; color: var(--adm-ink); cursor: pointer; }
.adm-me-btn:hover { background: var(--adm-surface-2); }
.adm-avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--adm-warn-soft); color: var(--adm-warn); display: grid; place-items: center; font-weight: 800; flex: none; object-fit: cover; }
.adm-me-who { min-width: 0; display: grid; }
.adm-me-who b, .adm-me-who small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adm-me-who small { color: var(--adm-muted); font-size: 12px; }
.adm-menu { position: absolute; z-index: 20; min-width: 200px; background: var(--adm-surface); border: 1px solid var(--adm-line); border-radius: 10px; box-shadow: var(--adm-shadow); padding: 4px; display: grid; }
.adm-menu button, .adm-menu a { display: flex; align-items: center; gap: 6px; border: 0; background: transparent; text-align: left; padding: 8px 10px; border-radius: 7px; font-weight: 600; color: var(--adm-ink); text-decoration: none; cursor: pointer; font-size: 14px; }
.adm-menu button:hover, .adm-menu a:hover { background: var(--adm-surface-2); }
.adm-menu .danger { color: var(--adm-danger) !important; }
.adm-me .adm-menu { bottom: calc(100% - 4px); left: 12px; right: 12px; }
.adm-shell.mini .adm-brand > span:last-child, .adm-shell.mini .adm-nav-link span, .adm-shell.mini .adm-nav-label, .adm-shell.mini .adm-me-who, .adm-shell.mini .adm-kasir span, .adm-shell.mini .adm-kasir kbd { display: none; }
.adm-shell.mini .adm-nav-link, .adm-shell.mini .adm-kasir { justify-content: center; }
.adm-shell.mini .adm-nav-label { display: block; height: 10px; padding: 0; font-size: 0; }
.adm-shell.mini .adm-side-top { justify-content: center; }

.adm-main { min-width: 0; display: flex; flex-direction: column; }
.adm-top { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 10px; padding: 12px 24px; background: var(--adm-bg); border-bottom: 1px solid var(--adm-line); }
.adm-title { margin-right: auto; min-width: 0; }
.adm-title h1 { margin: 0; font-size: 19px; font-weight: 800; color: var(--adm-ink); line-height: 1.25; }
.adm-crumb { display: flex; flex-wrap: wrap; gap: 6px; font-size: 12px; color: var(--adm-muted); }
.adm-crumb a { color: var(--adm-muted) !important; text-decoration: none; }
.adm-crumb a:hover { color: var(--adm-ink) !important; }
.adm-crumb > * + *::before { content: "›"; margin-right: 6px; color: var(--adm-muted); }
.adm-search-btn { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 8px 0 12px; border: 1px solid var(--adm-line); border-radius: 9px; background: var(--adm-surface); color: var(--adm-muted); min-width: 220px; cursor: pointer; font-size: 14px; }
.adm-search-btn kbd { margin-left: auto; }
.adm-search-btn:hover { border-color: var(--adm-muted); }
.adm-menu-toggle { display: none; }
.adm-content { flex: 1; padding: 20px 24px 28px; }
.adm-foot { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 14px 24px; border-top: 1px solid var(--adm-line); color: var(--adm-muted); font-size: 12px; }
.adm-scrim { position: fixed; inset: 0; z-index: 45; background: rgba(10, 20, 15, .45); }

/* drawer log aktivitas */
.adm-log-scrim { z-index: 60; }
.adm-drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 61; width: min(380px, 100%); background: var(--adm-surface); border-left: 1px solid var(--adm-line); display: flex; flex-direction: column; }
.adm-drawer-h { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--adm-line); }
.adm-drawer-h p { margin: 2px 0 0; font-size: 12px; color: var(--adm-muted); }
.adm-drawer-b { overflow: auto; padding: 6px 16px 16px; }
.adm-log { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--adm-line); }
.adm-log .ico { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 800; }
.adm-log .ico.add { background: var(--adm-accent-soft); color: var(--adm-accent); }
.adm-log .ico.edit { background: var(--adm-warn-soft); color: var(--adm-warn); }
.adm-log .ico.del { background: var(--adm-danger-soft); color: var(--adm-danger); }
.adm-log p { margin: 0; }
.adm-log small { color: var(--adm-muted); font-size: 12px; }
.adm-log-day { padding: 14px 0 4px; }

/* palet Ctrl K */
.adm-overlay { position: fixed; inset: 0; z-index: 70; background: rgba(10, 20, 15, .45); display: grid; place-items: start center; padding: 12vh 16px 16px; }
.adm-sheet { width: min(560px, 100%); background: var(--adm-surface); border: 1px solid var(--adm-line); border-radius: 14px; box-shadow: var(--adm-shadow); overflow: hidden; }
.adm-palette input { width: 100%; border: 0; border-bottom: 1px solid var(--adm-line); padding: 14px 16px; font-size: 17px; background: transparent; color: var(--adm-ink); outline: none; }
.adm-pal-list { max-height: 50vh; overflow: auto; padding: 6px; }
.adm-pal-list .grp { padding: 8px 10px 4px; }
.adm-pal-list .it { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px; cursor: pointer; }
.adm-pal-list .it svg { width: 16px; height: 16px; }
.adm-pal-list .it small { margin-left: auto; color: var(--adm-muted); font-size: 12px; }
.adm-pal-list .it.active { background: var(--adm-accent); color: var(--adm-accent-ink); }
.adm-pal-list .it.active small { color: inherit; opacity: .85; }
.adm-pal-keys { display: flex; gap: 12px; padding: 8px 14px; border-top: 1px solid var(--adm-line); font-size: 12px; color: var(--adm-muted); flex-wrap: wrap; }

/* toast: atas tengah, gelap */
.adm-toast.toast { background: var(--adm-ink) !important; color: var(--adm-bg) !important; border: 0 !important; border-radius: 10px !important; box-shadow: var(--adm-shadow) !important; width: max-content; max-width: min(560px, calc(100vw - 32px)); }
.adm-toast .toast-body { padding: 9px 16px; font-weight: 600; text-align: center; }

@media (max-width: 991.98px) {
  .adm-shell, .adm-shell.mini { grid-template-columns: minmax(0, 1fr); }
  .adm-side { position: fixed; left: 0; top: 0; bottom: 0; width: 260px; }
  .adm-shell:not(.nav-open) .adm-side { display: none; }
  .adm-shell.mini .adm-brand > span:last-child, .adm-shell.mini .adm-nav-link span, .adm-shell.mini .adm-me-who, .adm-shell.mini .adm-kasir span, .adm-shell.mini .adm-kasir kbd { display: revert; }
  .adm-shell.mini .adm-nav-label { height: auto; padding: 14px 10px 6px; font-size: 11px; }
  .adm-shell.mini .adm-nav-link, .adm-shell.mini .adm-kasir { justify-content: flex-start; }
  .adm-menu-toggle { display: inline-grid; }
  .adm-collapse-btn { display: none !important; }
  .adm-search-btn { min-width: 0; }
  .adm-search-btn span, .adm-search-btn kbd { display: none; }
  .adm-top, .adm-content, .adm-foot { padding-left: 16px; padding-right: 16px; }
}
@media (max-width: 767.98px) {
  /* Baris cari + filter di atas tabel: susun ke bawah, lebar penuh */
  #kt_content .card-body > .d-flex.flex-stack { flex-wrap: wrap; gap: 8px; }
  #kt_content .card-body > .d-flex.flex-stack > * { flex: 1 1 100%; justify-content: stretch !important; }
  #kt_content .card-body > .d-flex.flex-stack :is(.form-control, .form-select) { width: 100% !important; flex: 1 1 100%; }
}

/* ---------- kartu ---------- */
#kt_content .card, .adm-card { border: 1px solid var(--adm-line) !important; border-radius: 12px !important; box-shadow: none !important; background: var(--adm-surface); margin-bottom: 16px !important; min-width: 0; }
#kt_content .card .card-header { min-height: 0; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 14px 16px !important; border-bottom: 1px solid var(--adm-line) !important; }
#kt_content .card .card-header .card-title { margin: 0 !important; font-size: 15px !important; font-weight: 700 !important; color: var(--adm-ink) !important; }
#kt_content .card .card-header .card-title .card-label { font-size: 15px !important; font-weight: 700 !important; margin: 0 !important; }
#kt_content .card .card-header .card-title :is(.text-muted, .text-gray-400, .text-gray-500, span.fs-6, span.fs-7) { font-size: 12px !important; font-weight: 400 !important; color: var(--adm-muted) !important; margin-top: 2px !important; }
#kt_content .card .card-header .card-toolbar { margin: 0 !important; gap: 8px; }
#kt_content .card .card-body { padding: 16px !important; }
#kt_content .card .card-footer { padding: 12px 16px !important; border-top: 1px solid var(--adm-line) !important; background: transparent; display: flex; justify-content: flex-end; gap: 10px; }
#kt_content .mb-xl-8, #kt_content .mb-5.mb-xl-10 { margin-bottom: 16px !important; }
.adm-card-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--adm-line); flex-wrap: wrap; }
.adm-card-h h2 { font-size: 15px; font-weight: 700; margin: 0; color: var(--adm-ink); }
.adm-card-h p { margin: 2px 0 0; font-size: 12px; color: var(--adm-muted); }
.adm-card-b { padding: 16px; }

/* ---------- tombol Metronic -> tombol mockup ---------- */
.btn:not(.btn-icon):not(.btn-link):not(.page-link) { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 38px; padding: 0 14px !important; border-radius: 9px !important; font-size: 14px !important; font-weight: 700 !important; line-height: 1 !important; text-transform: none !important; letter-spacing: 0; box-shadow: none !important; white-space: nowrap; }
.btn.btn-sm:not(.btn-icon) { height: 32px; padding: 0 10px !important; font-size: 13px !important; border-radius: 8px !important; }
.btn.btn-lg:not(.btn-icon) { height: 44px; font-size: 15px !important; }
.btn .svg-icon, .btn i { color: currentColor !important; margin: 0 !important; }
.btn .svg-icon svg { width: 16px !important; height: 16px !important; }
/* utama: hijau solid */
.btn.btn-primary, .btn.btn-success { background: var(--adm-accent) !important; border: 1px solid var(--adm-accent) !important; color: var(--adm-accent-ink) !important; }
.btn.btn-primary:hover, .btn.btn-success:hover { filter: brightness(1.05); }
/* sekunder: putih bergaris */
.btn:is(.btn-light, .btn-light-primary, .btn-light-success, .btn-light-info, .btn-light-warning, .btn-light-dark, .btn-secondary, .btn-info, .btn-white, .btn-active-light-primary):not(.btn-icon) { background: var(--adm-surface) !important; border: 1px solid var(--adm-line) !important; color: var(--adm-ink) !important; }
.btn:is(.btn-light, .btn-light-primary, .btn-light-success, .btn-light-info, .btn-light-warning, .btn-light-dark, .btn-secondary, .btn-info, .btn-white):not(.btn-icon):hover { border-color: var(--adm-muted) !important; }
/* bahaya */
.btn.btn-danger { background: var(--adm-danger) !important; border: 1px solid var(--adm-danger) !important; color: var(--adm-danger-ink) !important; }
.btn.btn-light-danger:not(.btn-icon) { background: var(--adm-surface) !important; border: 1px solid var(--adm-line) !important; color: var(--adm-danger) !important; }
.btn.btn-warning { background: var(--adm-warn) !important; border: 1px solid var(--adm-warn) !important; color: #fff !important; }
.btn:disabled, .btn.disabled { opacity: .7; }
/* tombol ikon */
.btn.btn-icon { width: 36px; height: 36px; border-radius: 9px !important; border: 1px solid var(--adm-line) !important; background: var(--adm-surface) !important; color: var(--adm-muted) !important; box-shadow: none !important; }
.btn.btn-icon.btn-sm { width: 32px; height: 32px; }
.btn.btn-icon:hover { color: var(--adm-ink) !important; border-color: var(--adm-muted) !important; }
.btn.btn-icon.position-absolute { border: 0 !important; background: transparent !important; width: auto; height: auto; }
.image-input .btn.btn-icon { width: 26px !important; height: 26px !important; border-radius: 50% !important; border: 1px solid var(--adm-line) !important; background: var(--adm-surface) !important; box-shadow: var(--adm-shadow) !important; }
.btn.btn-icon.position-absolute:hover { color: var(--adm-ink) !important; }
/* aksi per baris di tabel (ikon berwarna Metronic) -> tombol ikon bergaris */
#kt_content .table td > a:has(> .svg-icon), #kt_content .table td .row-acts > a { display: inline-grid; place-items: center; width: 32px; height: 32px; margin: 0 2px; border: 1px solid var(--adm-line); border-radius: 9px; background: var(--adm-surface); color: var(--adm-muted) !important; vertical-align: middle; }
#kt_content .table td > a:has(> .svg-icon):hover { color: var(--adm-ink) !important; border-color: var(--adm-muted); }
#kt_content .table td > a.btn-delete-on-table:hover { color: var(--adm-danger) !important; border-color: var(--adm-danger); }
#kt_content .table td > a > .svg-icon { color: currentColor !important; line-height: 1; }
#kt_content .table td > a > .svg-icon svg { width: 16px !important; height: 16px !important; }

/* ---------- badge -> pill ---------- */
.badge { display: inline-block; font-size: 11px !important; font-weight: 700 !important; line-height: 1.5 !important; padding: 2px 8px !important; border-radius: 99px !important; border: 1px solid transparent; white-space: nowrap; text-decoration: none; vertical-align: middle; background: var(--adm-surface-2) !important; color: var(--adm-muted) !important; text-transform: lowercase; }
.badge::first-letter { text-transform: uppercase; }
.badge.num, .badge.adm-keep-case { text-transform: none; }
.badge:is(.badge-success, .badge-primary, .badge-info, .badge-light-success, .badge-light-primary, .badge-light-info) { background: var(--adm-accent-soft) !important; color: var(--adm-accent) !important; }
.badge:is(.badge-danger, .badge-light-danger) { background: var(--adm-danger-soft) !important; color: var(--adm-danger) !important; }
.badge:is(.badge-warning, .badge-light-warning) { background: var(--adm-warn-soft) !important; color: var(--adm-warn) !important; }
a.badge { cursor: pointer; }
a.badge:hover { filter: brightness(.97); }

/* ---------- tabel ---------- */
#kt_content .table { color: var(--adm-ink); margin-bottom: 0; --bs-table-striped-bg: transparent; --bs-table-accent-bg: transparent; }
#kt_content .table > :not(caption) > * > * { padding: 10px 12px !important; border-bottom: 1px solid var(--adm-line) !important; background: transparent; box-shadow: none !important; }
#kt_content .table.table-bordered > :not(caption) > * > *, #kt_content .table.table-bordered { border-left: 0 !important; border-right: 0 !important; border-top: 0 !important; }
#kt_content .table thead th, #kt_content .table thead td { font-size: 11px !important; font-weight: 700 !important; letter-spacing: .06em; text-transform: uppercase; color: var(--adm-muted) !important; background: var(--adm-surface-2) !important; white-space: nowrap; }
#kt_content .table thead tr { border: 0 !important; }
#kt_content .table.table-striped > tbody > tr:nth-of-type(odd) > * { --bs-table-accent-bg: transparent; background: transparent; }
#kt_content .table tbody tr:hover > * { background: var(--adm-surface-2) !important; }
#kt_content .table tbody tr:last-child > * { border-bottom: 0 !important; }
#kt_content .table td { vertical-align: middle; }
#kt_content .table tbody td.text-end, #kt_content .table tbody td.text-right { font-family: var(--adm-font-num); font-variant-numeric: tabular-nums; }
#kt_content .table tfoot td, #kt_content .table tfoot th { font-weight: 800; background: var(--adm-surface-2) !important; border-top: 2px solid var(--adm-line) !important; }
#kt_content .card-body > .table-responsive, #kt_content .card-body > .dataTables_wrapper .table-responsive { margin: 0 -16px; }
#kt_content .card-body .dataTables_wrapper .table-responsive { border-top: 1px solid var(--adm-line); }
#kt_content .table .form-check-input { width: 18px; height: 18px; border-radius: 5px; }
#kt_content .table td.dataTables_empty { text-align: center; color: var(--adm-muted); padding: 28px 12px !important; }
.adm-tbl-wrap { overflow-x: auto; }
.adm-tbl { width: 100%; border-collapse: collapse; }
.adm-tbl th { text-align: left; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--adm-muted); padding: 10px 12px; border-bottom: 1px solid var(--adm-line); white-space: nowrap; background: var(--adm-surface-2); }
.adm-tbl td { padding: 10px 12px; border-bottom: 1px solid var(--adm-line); vertical-align: middle; }
.adm-tbl tr:last-child td { border-bottom: 0; }
.adm-tbl .r { text-align: right; }
.adm-tbl tbody tr:hover td { background: var(--adm-surface-2); }

/* DataTables: info + pagination seperti pager mockup */
.dataTables_wrapper .row:last-child { align-items: center; padding-top: 12px; }
.dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_length { color: var(--adm-muted); font-size: 13px; }
.dataTables_wrapper .dataTables_length select { height: 32px; padding: 0 28px 0 10px !important; font-size: 13px !important; }
.pagination { display: inline-flex !important; gap: 0; border: 1px solid var(--adm-line); border-radius: 9px; padding: 2px; background: var(--adm-surface-2); flex-wrap: wrap; margin: 0 !important; }
.pagination .page-item { margin: 0 !important; }
.pagination .page-link { min-width: 34px; height: 30px; display: grid; place-items: center; border: 0 !important; background: transparent !important; border-radius: 7px !important; padding: 0 9px !important; font-weight: 700 !important; font-size: 13px !important; color: var(--adm-muted) !important; box-shadow: none !important; }
.pagination .page-item.active .page-link { background: var(--adm-surface) !important; color: var(--adm-ink) !important; box-shadow: 0 1px 2px rgba(0, 0, 0, .08) !important; }
.pagination .page-item.disabled .page-link { opacity: .45; }
.pagination .page-link:hover { color: var(--adm-ink) !important; }

/* ---------- form ---------- */
.form-control:not(textarea), .form-select { height: 38px; min-height: 38px; padding-top: 0 !important; padding-bottom: 0 !important; }
.form-control, .form-select { font-size: 14px !important; border-radius: 8px !important; border: 1px solid var(--adm-line) !important; background-color: var(--adm-surface) !important; color: var(--adm-ink) !important; box-shadow: none !important; }
textarea.form-control { padding-top: 8px !important; padding-bottom: 8px !important; }
.form-control.form-control-solid, .form-select.form-select-solid { background-color: var(--adm-surface) !important; }
.form-control[readonly], .form-control:disabled { background-color: var(--adm-surface-2) !important; color: var(--adm-muted) !important; }
.form-control:focus, .form-select:focus { border-color: var(--adm-accent) !important; box-shadow: 0 0 0 3px var(--adm-accent-soft) !important; }
.form-control.is-invalid, .is-invalid .form-control, .fv-plugins-bootstrap5-row-invalid .form-control { border-color: var(--adm-danger) !important; }
.invalid-feedback, .fv-plugins-message-container .fv-help-block { color: var(--adm-danger) !important; font-size: 12px; font-weight: 600; }
.input-group-text { background: var(--adm-surface-2) !important; border-color: var(--adm-line) !important; color: var(--adm-muted) !important; font-size: 13px; }
#kt_content .form-group.row { margin-bottom: 14px; align-items: center; --bs-gutter-x: 16px; }
#kt_content :is(.form-group.row, .row) > label:is(.col-form-label, [class*="col-"]), #kt_content label.fw-semibold.fs-6, .form-label { font-size: 13px !important; font-weight: 600 !important; color: var(--adm-ink) !important; padding-top: 0; padding-bottom: 0; margin-bottom: 0; }
#kt_content label.required::after, .form-label.required::after { color: var(--adm-danger) !important; }
.form-text, #kt_content .form-group small.text-muted { color: var(--adm-muted) !important; font-size: 12px; }
.form-check-input { border-color: var(--adm-key-line) !important; }
.form-check-input:checked { background-color: var(--adm-accent) !important; border-color: var(--adm-accent) !important; }
.form-check-label { color: var(--adm-ink) !important; font-weight: 600; font-size: 13px; }
/* select2 seperti select biasa */
.select2-container--bootstrap5 .select2-selection { min-height: 38px !important; height: auto; border-radius: 8px !important; border: 1px solid var(--adm-line) !important; background-color: var(--adm-surface) !important; color: var(--adm-ink) !important; box-shadow: none !important; padding: 0 30px 0 12px !important; display: flex !important; align-items: center; font-size: 14px !important; }
.select2-container--bootstrap5.select2-container--focus .select2-selection, .select2-container--bootstrap5.select2-container--open .select2-selection { border-color: var(--adm-accent) !important; box-shadow: 0 0 0 3px var(--adm-accent-soft) !important; }
.select2-container--bootstrap5 .select2-selection__rendered { color: var(--adm-ink) !important; padding: 0 !important; }
.select2-container--bootstrap5 .select2-dropdown { border: 1px solid var(--adm-line) !important; border-radius: 10px !important; box-shadow: var(--adm-shadow) !important; background: var(--adm-surface) !important; }
.select2-container--bootstrap5 .select2-results__option--highlighted { background: var(--adm-accent) !important; color: var(--adm-accent-ink) !important; }
.select2-container--bootstrap5 .select2-results__option--selected { background: var(--adm-accent-soft) !important; color: var(--adm-accent) !important; }
/* image-input (avatar/gambar) */
.image-input-wrapper { border-radius: 10px !important; border: 2px dashed var(--adm-line); box-shadow: none !important; }

/* ---------- dropdown, modal, drawer, SweetAlert ---------- */
.menu-sub-dropdown, .dropdown-menu, .modal-content { border-radius: 12px !important; border: 1px solid var(--adm-line) !important; box-shadow: var(--adm-shadow) !important; background: var(--adm-surface) !important; }
.menu-sub-dropdown .separator { border-color: var(--adm-line) !important; }
.menu-sub-dropdown .fs-5.text-dark.fw-bold { font-size: 14px !important; }
.swal2-container.swal2-backdrop-show { background: rgba(10, 20, 15, .45) !important; }
.swal2-popup { width: min(420px, calc(100vw - 32px)) !important; padding: 18px 18px 16px !important; border-radius: 14px !important; border: 1px solid var(--adm-line) !important; box-shadow: var(--adm-shadow) !important; background: var(--adm-surface) !important; color: var(--adm-ink) !important; }
.swal2-popup .swal2-icon { width: 44px !important; height: 44px !important; margin: 4px auto 10px !important; border-width: 3px !important; }
.swal2-popup .swal2-icon .swal2-icon-content { font-size: 28px !important; }
.swal2-popup .swal2-icon.swal2-success [class^=swal2-success-line], .swal2-popup .swal2-icon.swal2-error [class^=swal2-x-mark-line] { transform: scale(.55); }
.swal2-popup .swal2-icon.swal2-success .swal2-success-ring { width: 44px !important; height: 44px !important; top: -3px !important; left: -3px !important; }
.swal2-popup .swal2-icon.swal2-success [class^=swal2-success-circular-line], .swal2-popup .swal2-icon.swal2-success .swal2-success-fix { display: none !important; }
.swal2-popup .swal2-icon.swal2-success [class^=swal2-success-line][class$=tip] { top: 22px !important; left: 6px !important; }
.swal2-popup .swal2-icon.swal2-success [class^=swal2-success-line][class$=long] { top: 18px !important; right: 2px !important; }
.swal2-popup .swal2-icon.swal2-error [class^=swal2-x-mark-line] { top: 19px !important; width: 30px !important; left: 4px !important; }
.swal2-popup .swal2-icon.swal2-error [class^=swal2-x-mark-line][class$=right] { right: 4px !important; left: auto !important; }
.swal2-popup .swal2-title { font-size: 17px !important; font-weight: 800 !important; color: var(--adm-ink) !important; padding: 0 !important; }
.swal2-popup .swal2-html-container { font-size: 14px !important; font-weight: 600 !important; color: var(--adm-ink) !important; margin: 0 4px !important; }
.swal2-popup .swal2-actions { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 8px; width: 100%; margin: 16px 0 0 !important; }
.swal2-popup .swal2-actions .btn, .swal2-popup .swal2-actions .swal2-styled { width: 100%; margin: 0 !important; height: 38px; }
.swal2-popup .swal2-actions .swal2-cancel { order: -1; }
.swal2-styled.swal2-confirm { background: var(--adm-accent) !important; color: var(--adm-accent-ink) !important; border-radius: 9px !important; }
.swal2-styled.swal2-cancel { background: var(--adm-surface) !important; color: var(--adm-ink) !important; border: 1px solid var(--adm-line) !important; border-radius: 9px !important; }

/* ---------- alert / flash ---------- */
#kt_content .alert { display: flex; align-items: center; gap: 10px; padding: 10px 12px !important; border-radius: 9px !important; border: 0 !important; font-size: 13px; font-weight: 600; margin-bottom: 16px; }
#kt_content .alert h4 { font-size: 13px !important; font-weight: 600 !important; margin: 0 !important; color: inherit !important; }
#kt_content .alert .svg-icon { margin: 0 !important; color: currentColor !important; }
#kt_content .alert .svg-icon svg { width: 20px !important; height: 20px !important; }
#kt_content .alert.alert-success { background: var(--adm-accent-soft) !important; color: var(--adm-accent) !important; }
#kt_content .alert.alert-danger { background: var(--adm-danger-soft) !important; color: var(--adm-danger) !important; }
#kt_content .alert.alert-warning { background: var(--adm-warn-soft) !important; color: var(--adm-warn) !important; }

/* ---------- login ---------- */
.adm-login { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); background: var(--adm-surface); }
.adm-login-form { display: grid; place-items: center; padding: 32px 16px; background: var(--adm-surface); }
.adm-login-box { width: min(380px, 100%); display: grid; gap: 18px; }
.adm-login-box .adm-brand { margin-bottom: 0; }
.adm-login-title { font-size: 26px; font-weight: 800; margin: 0; color: var(--adm-ink); }
.adm-login-lead { color: var(--adm-muted); margin: 4px 0 0; }
.adm-login .adm-field .form-control { height: 44px; text-transform: none; }
.adm-login .adm-pw { position: relative; }
.adm-login .adm-pw .form-control { padding-right: 76px !important; }
.adm-login .adm-pw button { position: absolute; right: 4px; top: 7px; height: 30px; border: 0; background: transparent; color: var(--adm-muted); font-weight: 700; font-size: 12px; padding: 0 10px; border-radius: 6px; cursor: pointer; }
.adm-login .btn-primary { height: 44px !important; font-size: 15px !important; width: 100%; }
.adm-login-hint { font-size: 12px; color: var(--adm-muted); display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.adm-login-side { background: var(--adm-deep); color: var(--adm-deep-ink); display: grid; align-content: center; justify-items: center; gap: 28px; padding: 40px 32px; }
.adm-login-side h2 { font-size: 28px; font-weight: 800; max-width: 24ch; text-align: center; line-height: 1.25; color: inherit; margin: 0; }
.adm-login-side p { margin: 0; opacity: .8; text-align: center; max-width: 42ch; }
.adm-receipt { width: min(300px, 100%); background: var(--adm-paper); color: var(--adm-paper-ink); font-family: var(--adm-font-num); font-size: 12px; line-height: 1.55; padding: 18px 18px 22px; border-radius: 4px; box-shadow: 0 18px 40px rgba(0, 0, 0, .35); transform: rotate(-2deg);
  -webkit-mask: radial-gradient(circle 5px at 50% 100%, transparent 98%, #000) 0 0 / 14px 100% repeat-x; mask: radial-gradient(circle 5px at 50% 100%, transparent 98%, #000) 0 0 / 14px 100% repeat-x; }
.adm-receipt .c { text-align: center; }
.adm-receipt .r { display: flex; justify-content: space-between; gap: 10px; }
.adm-receipt hr { border: 0; border-top: 1px dashed currentColor; opacity: .5; margin: 8px 0; }
@media (max-width: 900px) { .adm-login { grid-template-columns: minmax(0, 1fr); } .adm-login-side { display: none; } }

/* ---------- daftar (toolbar, DataTables di dalam kartu) ---------- */
.adm-toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 12px 16px; border-bottom: 1px solid var(--adm-line); }
.adm-toolbar .adm-input { max-width: 280px; text-transform: none !important; }
.adm-toolbar-select { min-width: 200px; }
.adm-toolbar-select .select2-selection__rendered { text-transform: none !important; }
.adm-dt .dataTables_wrapper > .row:first-child { display: none; }
.adm-dt .dataTables_wrapper .table-responsive { margin: 0 !important; border-top: 0 !important; }
.adm-dt .dataTables_wrapper > .row:last-child { margin: 0; padding: 12px 16px; border-top: 1px solid var(--adm-line); }
.adm-dt .dataTables_wrapper > .row:last-child > [class*="col"] { padding: 0; }
.adm-thumb { width: 40px; height: 40px; border-radius: 8px; background: var(--adm-surface-2); border: 1px solid var(--adm-line); display: grid; place-items: center; font-weight: 800; color: var(--adm-muted); font-size: 13px; overflow: hidden; text-transform: uppercase; }
.adm-thumb img { width: 100%; height: 100%; object-fit: cover; }
.adm-pname { display: grid; gap: 4px; min-width: 220px; }
.adm-pname b { font-size: 14px; }
.adm-pname small { color: var(--adm-muted); font-size: 12px; text-transform: none; }
.adm-pname .tags { display: flex; gap: 4px; flex-wrap: wrap; text-transform: none; }
.adm-price-lines { display: grid; gap: 2px; font-size: 13px; white-space: nowrap; }
.adm-price-lines span { color: var(--adm-muted); font-family: var(--adm-font-ui); }
.adm-row-acts { display: flex; gap: 4px; justify-content: flex-end; }
#kt_content .table td .adm-row-acts > a { margin: 0; }
.select2-selection__placeholder { text-transform: none !important; }
#kt_content .form-control[readonly][style*="cursor"] { background-color: var(--adm-surface) !important; color: var(--adm-ink) !important; }

/* ---------- form (produk dan form lain yang ditulis ulang) ---------- */
.adm-two-col { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.adm-stack { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; min-width: 0; align-content: start; }
.adm-stack > .card { margin-bottom: 0 !important; }
/* grid isian: label di atas, dua kolom (kolom bootstrap lama dinetralkan) */
.adm-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
.adm-form-grid .row { margin: 0 !important; --bs-gutter-x: 0; --bs-gutter-y: 0; display: block; }
.adm-form-grid [class*="col-"] { width: 100% !important; max-width: none !important; padding: 0 !important; flex: none !important; }
.adm-form-grid > .row { min-width: 0; }
.adm-form-grid .form-group.row { display: grid !important; gap: 6px; margin: 0 !important; --bs-gutter-x: 0; }
.adm-form-grid .form-group.row > * { padding: 0 !important; margin: 0 !important; width: 100% !important; }
.adm-form-grid .form-group.row > label { padding: 0 !important; }
.adm-form-grid .mb-5, .adm-form-grid .mb-6 { margin-bottom: 0 !important; }
.adm-form-grid .separator { display: none; }
/* switch: judul + keterangan di kiri, switch di kanan */
.adm-switches .row, .adm-switches [class*="col-"] { display: contents; }
.adm-switches .form-group.row { display: flex !important; align-items: center; gap: 12px; padding: 10px 0; margin: 0 !important; border-bottom: 1px dashed var(--adm-line); }
.adm-switches > .row:last-of-type .form-group.row, .adm-switches .form-group.row:last-child { border-bottom: 0; }
.adm-switches .form-group.row > label { display: grid !important; width: auto !important; flex: 1 1 auto; max-width: none !important; gap: 1px; margin-right: auto; padding: 0 !important; font-size: 14px !important; font-weight: 700 !important; cursor: pointer; }
.adm-switches .form-group.row > label small { color: var(--adm-muted); font-size: 12px; font-weight: 400; }
.adm-switches .form-check-custom { min-height: 0 !important; }
/* satuan & harga */
/* satuan & harga = dua tabel (satuan, lalu harga per satuan). Markup & JS lama tetap
   (dua daftar ber-data-key), hanya ditata ulang jadi baris grid + judul kolom. */
.adm-units { overflow-x: auto; }
.adm-units .products-units-data, .adm-units .products-units-price, .adm-units-head { min-width: 520px; }
.adm-units .row, .adm-units [class*="col-"] { margin: 0 !important; padding: 0 !important; width: auto !important; max-width: none !important; flex: none !important; --bs-gutter-x: 0; }
.adm-units .mb-6, .adm-units .mb-5 { margin: 0 !important; }
.adm-units .form-group.row { display: contents !important; }
.adm-units .fv-row { min-width: 0; }
.adm-units .form-control { height: 36px; text-align: right; font-family: var(--adm-font-num); }
.adm-units .unit-name { text-align: left; font-family: var(--adm-font-ui); font-weight: 600; text-transform: uppercase; }
.adm-units .form-control[readonly] { background: var(--adm-surface-2) !important; color: var(--adm-muted) !important; }
.adm-units-head { display: grid; gap: 10px; padding: 0 0 6px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--adm-muted); }
.adm-units-head.u, .adm-units .product-unit-item { grid-template-columns: minmax(0, 1fr) 96px 120px 84px; }
.adm-units-head.p, .adm-units .price-list-unit-items { grid-template-columns: 84px repeat(4, minmax(0, 1fr)); }
.adm-units-head.p { margin-top: 18px; padding-top: 14px; border-top: 1px dashed var(--adm-line); }
.adm-units .products-units-data > .row + .row, .adm-units .price-list-unit-items + .price-list-unit-items { border-top: 1px solid var(--adm-line) !important; }
/* baris satuan: [nama] [isi] [/satuan atas] [aksi] */
.adm-units .product-unit-item { display: grid !important; gap: 10px; align-items: center; padding: 8px 0 !important; }
.adm-units .product-unit-item > div, .adm-units .product-unit-item > div > .row { display: contents !important; }
#kt_content .adm-units .product-unit-item label { display: none !important; }
.adm-units .unit-val { color: var(--adm-muted); font-weight: 700; font-family: var(--adm-font-num); font-size: 13px; }
.adm-units .unit-val::before { content: "per "; font-family: var(--adm-font-ui); font-weight: 600; }
.adm-units .product-unit-item[data-key="0"] .unit-val::before { content: "satuan terbesar"; }
.adm-units .product-unit-item[data-key="0"] .unit-val { font-size: 0; }
.adm-units .product-unit-item[data-key="0"] .unit-val::before { font-size: 13px; }
.adm-units .product-unit-item > .col-action { display: flex !important; gap: 6px; justify-content: flex-end; }
.adm-units .btn-add-unit, .adm-units .btn-remove-unit { width: 34px; height: 34px !important; padding: 0 !important; display: inline-grid !important; place-items: center; border-radius: 9px !important; box-shadow: none !important; }
.adm-units .btn-add-unit { background: var(--adm-accent-soft) !important; color: var(--adm-accent) !important; border: 1px solid transparent !important; }
.adm-units .btn-remove-unit { background: var(--adm-surface) !important; color: var(--adm-danger) !important; border: 1px solid var(--adm-line) !important; }
.adm-units .btn-add-unit:hover { background: var(--adm-accent) !important; color: var(--adm-accent-ink) !important; }
.adm-units .btn-remove-unit:hover { background: var(--adm-danger-soft) !important; }
.adm-units .btn-add-unit svg, .adm-units .btn-remove-unit svg { width: 18px; height: 18px; }
/* baris harga: [/satuan] [harga beli] [harga 1] [harga 2] [harga 3] */
.adm-units .price-list-unit-items { display: grid !important; gap: 10px; align-items: start; padding: 8px 0; }
.adm-units .price-list-unit-items > .row, .adm-units .price-list-unit-items > .row > div, .adm-units .price-list-unit-items > .row > div > .row { display: contents !important; }
#kt_content .adm-units .price-list-unit-items .form-group.row > label.fs-6 { font-size: 0 !important; padding: 0 !important; margin: 0 !important; align-self: center; width: auto !important; }
#kt_content .adm-units .price-list-unit-items label::after { display: none !important; }
#kt_content .adm-units .price-list-unit-items label .unit-label { font-size: 13px; font-weight: 700; color: var(--adm-ink); font-family: var(--adm-font-num); }
#kt_content .adm-units .price-list-unit-items label[for$="-price-1"] { display: none !important; }
.adm-units .price-list-unit-items .separator { display: none !important; }
.adm-units .helper-margin { display: block; text-align: right; font-size: 11px !important; font-weight: 700; color: var(--adm-muted) !important; padding: 3px 2px 0 !important; font-family: var(--adm-font-num); }
.adm-units .helper-margin::before { content: "margin "; font-family: var(--adm-font-ui); font-weight: 600; }
.adm-units > .row:has(> .separator) { display: none !important; }
.adm-units .invalid-feedback { font-size: 11px; }
.adm-image .row, .adm-image [class*="col-"] { display: contents; }
.adm-image .image-input { display: block; width: 125px; margin: 0 auto; }
.adm-image .image-input-wrapper { background-color: var(--adm-surface-2); }
.adm-image .form-text { text-align: center; margin-top: 10px; }
/* bar simpan menempel di bawah */
.adm-sticky-actions { position: sticky; bottom: 0; z-index: 5; display: flex; gap: 10px; justify-content: flex-end; align-items: center; margin-top: 16px; padding: 12px 16px; background: var(--adm-surface); border: 1px solid var(--adm-line); border-radius: 12px; box-shadow: var(--adm-shadow); }
.adm-sticky-actions > .adm-muted { margin-right: auto; font-size: 13px; }
@media (max-width: 1180px) { .adm-two-col { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 900px) { .adm-form-grid { grid-template-columns: minmax(0, 1fr); } .adm-sticky-actions > .adm-muted { display: none; } }

/* ---------- dashboard ---------- */
.adm-grid12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }
.adm-grid12 > .card { margin-bottom: 0 !important; }
.adm-span-4 { grid-column: span 4; } .adm-span-6 { grid-column: span 6; } .adm-span-8 { grid-column: span 8; } .adm-span-12 { grid-column: span 12; }
.adm-period { display: grid; grid-template-columns: 92px minmax(0, 1fr) auto; gap: 4px 12px; align-items: baseline; padding: 11px 0; border-bottom: 1px dashed var(--adm-line); }
.adm-period:first-child { padding-top: 0; }
.adm-period:last-child { border-bottom: 0; padding-bottom: 0; }
.adm-period .v { font-size: 20px; font-weight: 700; text-align: right; grid-column: 2 / 4; }
.adm-period .s { grid-column: 2 / 4; text-align: right; font-size: 12px; color: var(--adm-muted); }
.adm-split { display: flex; height: 14px; border-radius: 7px; overflow: hidden; background: var(--adm-surface-2); }
.adm-split i:first-child { background: var(--adm-accent); }
.adm-split i:last-child { background: var(--adm-warn); }
.adm-legend { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
.adm-legend div { display: grid; gap: 2px; }
.adm-legend b { font-size: 18px; }
.adm-legend .dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; }
/* grafik penjualan: area chart ApexCharts (seperti versi lama) */
.adm-chart { min-height: 320px; padding-top: 4px; }
.adm-chart .apexcharts-text, .adm-chart .apexcharts-legend-text { font-family: var(--adm-font-num) !important; }
.adm-chart .apexcharts-tooltip { background: var(--adm-surface) !important; border: 1px solid var(--adm-line) !important; color: var(--adm-ink); box-shadow: none !important; }
.adm-chart .apexcharts-tooltip-title { background: var(--adm-surface-2) !important; border-bottom: 1px solid var(--adm-line) !important; font-family: var(--adm-font-num); }
.adm-chart .apexcharts-tooltip-text-y-value { font-family: var(--adm-font-num); }
.adm-empty { text-align: center; padding: 28px 0; margin: 0; }
.adm-bars { display: grid; gap: 10px; }
.adm-bar-row { display: grid; grid-template-columns: minmax(0, 130px) minmax(0, 1fr) 64px; gap: 10px; align-items: center; font-size: 13px; }
.adm-bar-row > span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adm-bar { height: 10px; border-radius: 5px; background: var(--adm-surface-2); overflow: hidden; }
.adm-bar i { display: block; height: 100%; background: var(--adm-accent); border-radius: 5px; }
.adm-bar-row b { text-align: right; font-size: 12px; }
.adm-po .adm-po-list { max-height: 420px; overflow: auto; }
.adm-po input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--adm-accent); }
@media (max-width: 1180px) { .adm-span-4, .adm-span-8 { grid-column: span 6; } }
@media (max-width: 900px) { .adm-span-4, .adm-span-6, .adm-span-8 { grid-column: span 12; } }

/* ---------- laporan ---------- */
.adm-report { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: 16px; align-items: start; }
.adm-report > .card { margin-bottom: 0 !important; }
.adm-report-types { display: grid; gap: 4px; }
.adm-report-types a { text-align: left; border: 1px solid transparent; padding: 9px 10px; border-radius: 8px; display: grid; gap: 1px; text-decoration: none; color: var(--adm-ink) !important; }
.adm-report-types a:hover { background: var(--adm-surface-2); }
.adm-report-types a small { color: var(--adm-muted); font-size: 12px; }
.adm-report-types a[aria-pressed="true"] { background: var(--adm-accent-soft); border-color: var(--adm-accent-soft); }
.adm-report-types a[aria-pressed="true"] b { color: var(--adm-accent); }
.adm-dates { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.adm-dates .adm-input { padding: 0 6px; font-size: 12px; }
.adm-quick { display: flex; gap: 6px; flex-wrap: wrap; }
.adm-quick button { border: 1px solid var(--adm-line); background: var(--adm-surface); border-radius: 99px; padding: 4px 10px; font-size: 12px; font-weight: 700; color: var(--adm-muted); cursor: pointer; }
.adm-quick button:hover { color: var(--adm-ink); border-color: var(--adm-muted); }
.adm-report-head { padding: 14px 16px; border-bottom: 1px solid var(--adm-line); display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.adm-report-head > div { display: grid; gap: 2px; }
.adm-report-head b { font-size: 14px; letter-spacing: .02em; }
.adm-report-frame iframe { display: block; width: 100%; height: 70vh; border: 0; background: #fff; border-radius: 0 0 12px 12px; }
@media (max-width: 1180px) { .adm-report { grid-template-columns: minmax(0, 1fr); } }

/* ---------- profil ---------- */
.adm-avatar-row { grid-column: 1 / -1; display: flex; align-items: center; gap: 14px; }
.adm-avatar.lg { width: 56px; height: 56px; font-size: 20px; }
.adm-form-actions { display: flex; gap: 10px; justify-content: flex-end; border-top: 1px solid var(--adm-line); }

/* ---------- form generik (kartu Metronic: form > .card-body.p-9) -> pola form mockup ---------- */
#kt_content form .card-body.border-top.p-9 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; padding: 16px !important; align-items: start; }
#kt_content form .card-body.border-top.p-9 > * { min-width: 0; margin: 0 !important; }
#kt_content form .card-body.border-top.p-9 > :is(:has(.image-input), :has(table), :has(textarea), :has(.separator), .separator, :not(.row)) { grid-column: 1 / -1; }
#kt_content form .card-body.border-top.p-9 .row { --bs-gutter-x: 0; --bs-gutter-y: 0; margin: 0 !important; }
#kt_content form .card-body.border-top.p-9 > .row > [class*="col-"]:not(.form-group) { width: 100%; max-width: none; flex: none; padding: 0 !important; }
#kt_content form .card-body.border-top.p-9 .form-group.row { display: grid !important; gap: 6px; margin: 0 !important; }
#kt_content form .card-body.border-top.p-9 .form-group.row > * { width: 100% !important; max-width: none !important; padding: 0 !important; flex: none !important; }
#kt_content form .card-body.border-top.p-9 .form-group.row > label { padding: 0 !important; }
#kt_content form .card-body.border-top.p-9 > .row:has(> .form-group.row + .form-group.row) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; grid-column: 1 / -1; }
#kt_content .card > .card-header + form .card-footer, #kt_content form .card-footer { border-top: 1px solid var(--adm-line) !important; }
#kt_content .card-body.border-top { border-top: 0 !important; }
#kt_content .table td.dataTables_empty { text-transform: none; }
@media (max-width: 900px) { #kt_content form .card-body.border-top.p-9, #kt_content form .card-body.border-top.p-9 > .row:has(> .form-group.row + .form-group.row) { grid-template-columns: minmax(0, 1fr); } }
.image-input.image-input-outline .image-input-wrapper, .image-input .image-input-wrapper { border: 2px dashed var(--adm-line) !important; background-color: var(--adm-surface-2); box-shadow: none !important; border-radius: 10px !important; }
/* isian tanggal (picker) memang readonly, tapi bisa diklik: jangan tampil seperti nonaktif */
#kt_content .form-control.flatpickr-input[readonly], #kt_content .form-control[readonly][data-td-target], #kt_content .form-control.datetimepicker-input[readonly], #kt_content input[readonly][id*="date"] { background-color: var(--adm-surface) !important; color: var(--adm-ink) !important; cursor: pointer; }

/* ---------- kerapatan: layar laptop (13–15", tinggi ~650–800px) ---------- */
@media (min-width: 992px) {
  .adm-shell { grid-template-columns: 216px minmax(0, 1fr); }
  .adm-shell.mini { grid-template-columns: 64px minmax(0, 1fr); }
}
.adm-side-top { padding: 10px 12px 6px; }
.adm-brand { font-size: 15px; }
.adm-brand-mark { width: 30px; height: 30px; font-size: 15px; border-radius: 8px; }
.adm-kasir { margin: 4px 10px 6px; height: 36px; }
.adm-nav { padding: 2px 8px 10px; gap: 1px; }
.adm-nav-label { padding: 10px 10px 4px; }
.adm-nav-link { padding: 6px 10px; }
.adm-me { padding: 6px 10px; }
.adm-top { padding: 8px 16px; gap: 8px; }
.adm-title h1 { font-size: 17px; }
.adm-search-btn { min-width: 190px; height: 34px; }
.adm-icon-btn { width: 34px; height: 34px; }
.adm-content { padding: 14px 16px 18px; }
.adm-foot { padding: 10px 16px; }
#kt_content .card, .adm-card { margin-bottom: 12px !important; }
#kt_content .card .card-header, .adm-card-h { padding: 10px 14px !important; }
#kt_content .card .card-body, .adm-card-b { padding: 12px 14px !important; }
.adm-grid12, .adm-two-col, .adm-stack, .adm-report { gap: 12px; }
.adm-toolbar { padding: 10px 14px; gap: 8px; }
.adm-toolbar .adm-input { max-width: 230px; height: 34px; }
.adm-toolbar-select { min-width: 170px; }
.adm-toolbar .select2-container--bootstrap5 .select2-selection { min-height: 34px !important; }
.adm-seg button, .adm-seg a { padding: 5px 9px; font-size: 12.5px; }
#kt_content .table > :not(caption) > * > * { padding: 8px 12px !important; }
.adm-thumb { width: 36px; height: 36px; }
/* dashboard: angka per periode dalam satu baris (label | nilai), margin di bawahnya */
.adm-period { grid-template-columns: 84px minmax(0, 1fr); padding: 8px 0; gap: 2px 10px; }
.adm-period .v { font-size: 18px; grid-column: 2; }
.adm-period .s { grid-column: 1 / -1; }
.adm-legend b { font-size: 16px; }
.adm-po .adm-po-list { max-height: 320px; }
@media (min-width: 1500px) {
  .adm-shell { grid-template-columns: 240px minmax(0, 1fr); }
  .adm-content { padding: 18px 22px 24px; }
  .adm-grid12, .adm-two-col, .adm-stack, .adm-report { gap: 16px; }
}
.adm-span-5 { grid-column: span 5; } .adm-span-7 { grid-column: span 7; }
.adm-po .adm-tbl { table-layout: fixed; }
.adm-po .adm-tbl th:nth-child(3), .adm-po .adm-tbl td:nth-child(3) { width: 96px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adm-po .adm-tbl td:nth-child(2) b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 1100px) { .adm-span-5, .adm-span-7 { grid-column: span 12; } }

/* Metronic memberi html/body height:100%: kerangka harus bisa memanjang supaya sidebar sticky tidak ikut tergulung */
html, body { height: auto !important; min-height: 100%; }
.adm-shell { height: auto !important; min-height: 100vh; align-items: start; }
.adm-main { min-height: 100vh; }
.adm-po .adm-tbl th:first-child, .adm-po .adm-tbl td:first-child { width: 44px !important; }
.adm-po .adm-tbl th:last-child, .adm-po .adm-tbl td:last-child { width: 58px !important; padding-left: 4px; text-align: right; }
/* dashboard: tanggal acuan */
.adm-dash-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.adm-dash-date { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; font-weight: 600; }
.adm-dash-date .adm-input { width: 160px; height: 32px; padding: 0 8px; font-size: 13px; }
#dashDateNote { font-size: 12px; }
.adm-period { grid-template-columns: max-content minmax(0, 1fr); }
.adm-period > .adm-muted { white-space: nowrap; }
/* dashboard: online vs offline setengah lingkaran */
.adm-half { max-width: 240px; margin: 0 auto; }
.adm-half svg { display: block; width: 100%; height: auto; overflow: visible; }
.adm-half path { fill: none; stroke-width: 24; }
.adm-half .track { stroke: var(--adm-surface-2); }
.adm-half .off { stroke: var(--adm-accent); }
.adm-half .on { stroke: var(--adm-warn); }
.adm-half .big { fill: var(--adm-ink); font-family: var(--adm-font-num); font-size: 22px; font-weight: 700; }
.adm-half .small { fill: var(--adm-muted); font-family: var(--adm-font-ui); font-size: 10px; }

/* ---------- menu samping ciut (default): ikon kotak seragam di tengah, pemisah grup
   berupa garis, tanpa scrollbar, nama menu lewat tooltip (.adm-tip) ---------- */
.adm-nav { scrollbar-width: thin; scrollbar-color: var(--adm-line) transparent; }
@media (min-width: 992px) {
  .adm-shell.mini { grid-template-columns: 64px minmax(0, 1fr); }
  .adm-shell.mini .adm-side-top { padding: 12px 0 10px; justify-content: center; }
  .adm-shell.mini .adm-brand { gap: 0; }
  .adm-shell.mini .adm-brand-mark { width: 36px; height: 36px; font-size: 17px; border-radius: 10px; }
  .adm-shell.mini .adm-kasir { width: 40px; height: 40px; min-height: 0; padding: 0; margin: 0 auto 6px; gap: 0; justify-content: center; border-radius: 10px; flex: none; }
  .adm-shell.mini .adm-nav { padding: 4px 0 12px; justify-items: center; gap: 2px; overflow-x: hidden; scrollbar-width: none; }
  .adm-shell.mini .adm-nav::-webkit-scrollbar { display: none; }
  .adm-shell.mini .adm-nav-link { width: 40px; height: 38px; padding: 0; gap: 0; justify-content: center; border-radius: 10px; }
  .adm-shell.mini .adm-nav-label { display: block; width: 24px; height: 1px; padding: 0; margin: 7px 0; background: var(--adm-line); font-size: 0; overflow: hidden; }
  .adm-shell.mini .adm-me { padding: 8px 0 10px; display: flex; justify-content: center; }
  .adm-shell.mini .adm-me-btn { width: auto; padding: 3px; gap: 0; border-radius: 50%; }
  .adm-shell.mini .adm-me .adm-menu { left: 8px; right: auto; }
}


/* ---------- tooltip tombol ikon (webroot/js/admin/states.js) ---------- */
.adm-tip { position: fixed; z-index: 1100; pointer-events: none; white-space: nowrap; max-width: 280px; overflow: hidden; text-overflow: ellipsis; background: var(--adm-ink); color: var(--adm-surface); font-size: 12px; font-weight: 600; line-height: 1.3; padding: 5px 9px; border-radius: 7px; box-shadow: var(--adm-shadow); }
.adm-tip[data-side="right"] { transform: translateY(-50%); }
.adm-tip[hidden] { display: none; }
/* Metronic/Bootstrap tooltip bawaan (data-bs-toggle) disamakan */
.tooltip .tooltip-inner { background: var(--adm-ink) !important; color: var(--adm-surface) !important; font-size: 12px; font-weight: 600; border-radius: 7px; box-shadow: var(--adm-shadow); }
.tooltip .tooltip-arrow { display: none; }

/* ---------- empty / cari kosong / error / memuat: satu gaya ---------- */
.adm-state { display: grid; justify-items: center; align-content: center; gap: 4px; text-align: center; padding: 40px 16px; color: var(--adm-muted); text-transform: none; letter-spacing: normal; }
.adm-state .ico { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--adm-surface-2); border: 1px solid var(--adm-line); color: var(--adm-muted); margin-bottom: 8px; }
.adm-state b { color: var(--adm-ink); font-size: 15px; font-weight: 700; }
.adm-state small { font-size: 13px; line-height: 1.45; max-width: 380px; color: var(--adm-muted); }
.adm-state .adm-btn { margin-top: 10px; }
.adm-state.sm { padding: 26px 12px; }
.adm-state.sm .ico { width: 40px; height: 40px; border-radius: 12px; margin-bottom: 6px; }
.adm-state.sm b { font-size: 14px; }
.adm-state.error .ico { background: var(--adm-danger-soft); border-color: transparent; color: var(--adm-danger); }
.adm-state.done .ico { background: var(--adm-accent-soft); border-color: transparent; color: var(--adm-accent); }
.adm-state.loading .ico { border-style: dashed; }
td.dataTables_empty .adm-state { padding: 34px 12px; }
#kt_content .table td.dataTables_empty { padding: 0 !important; }

/* ---------- skeleton statis (tanpa animasi) ---------- */
.adm-skel { display: inline-block; height: .85em; min-height: 10px; border-radius: 6px; background: var(--adm-line); opacity: .55; vertical-align: middle; }
.v .adm-skel, .adm-legend b .adm-skel { height: 18px; }
.adm-skel-rows { display: grid; gap: 14px; padding: 6px 0; }
.adm-skel-row { display: flex; justify-content: space-between; gap: 16px; align-items: center; }
.adm-skel-label { text-transform: none; letter-spacing: normal; font-size: 12px; color: var(--adm-muted); text-align: center; padding-top: 4px; }
.adm-skel-chart { position: relative; height: 320px; display: grid; place-items: center; border-radius: 10px; background:
  repeating-linear-gradient(to bottom, transparent 0 63px, var(--adm-line) 63px 64px); opacity: .9; }
.adm-skel-chart .adm-state { background: var(--adm-surface); border-radius: 12px; padding: 18px 22px; }

/* ---------- DataTables: memuat = tabel diredupkan + label di atasnya ---------- */
.dataTables_wrapper { position: relative; }
.dataTables_wrapper.adm-busy tbody { opacity: .4; }
div.dataTables_processing { display: none !important; }
.adm-dt-busy { position: absolute; top: 56px; left: 50%; transform: translateX(-50%); z-index: 5; pointer-events: none; }
.adm-dt-busy[hidden] { display: none; }
tr.adm-skel-tr td { padding: 14px 16px !important; }
tr.adm-skel-tr:hover td { background: transparent !important; }
.adm-proc { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: var(--adm-surface); border: 1px solid var(--adm-line); box-shadow: var(--adm-shadow); color: var(--adm-ink); font-size: 13px; font-weight: 600; }
.adm-proc svg { width: 16px; height: 16px; color: var(--adm-muted); }
.adm-card-err { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; padding: 8px 10px; border-radius: 9px; background: var(--adm-danger-soft); color: var(--adm-danger); font-size: 13px; font-weight: 600; }
.adm-half .mid { fill: var(--adm-muted); font-family: var(--adm-font-ui); font-size: 12px; font-weight: 600; }
.adm-half.is-loading .track { opacity: .55; }
.adm-po-list td .adm-state, .adm-po-list td .adm-skel-rows { margin: 0 4px; }
.adm-report-frame { position: relative; }
.adm-report-frame.is-loading iframe { visibility: hidden; }
.adm-report-loading { position: absolute; inset: 0; display: grid; place-items: start center; padding-top: 10vh; background: var(--adm-surface); border-radius: 0 0 12px 12px; z-index: 2; }
.adm-pal-list > .adm-state { padding: 28px 12px; }
.adm-log-list .adm-skel-rows, #admLogList .adm-skel-rows { padding: 14px 0; }

/* ---------- Pembelian (upload faktur, review hasil AI, posting) ---------- */
.adm-pur .req { color: var(--adm-danger); }
.adm-pur .num { text-align: right; }
.adm-link { border: 0; background: none; padding: 0; color: var(--adm-accent); font-weight: 700; text-decoration: underline; cursor: pointer; font-size: inherit; }
.adm-pur-ai { display: flex; gap: 6px; flex-wrap: wrap; }
.adm-drop { display: grid; justify-items: center; gap: 4px; text-align: center; padding: 26px 16px; border: 1.5px dashed var(--adm-key-line); border-radius: 12px; background: var(--adm-surface-2); cursor: pointer; margin: 0; }
.adm-drop .ico { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--adm-accent-soft); color: var(--adm-accent); margin-bottom: 6px; }
.adm-drop b { font-size: 15px; color: var(--adm-ink); }
.adm-drop small { color: var(--adm-muted); font-size: 13px; max-width: 520px; line-height: 1.45; }
.adm-drop:hover, .adm-drop:focus-visible, .adm-drop.is-over { border-color: var(--adm-accent); background: var(--adm-accent-soft); outline: none; }
.adm-drop.is-busy { cursor: progress; opacity: .7; }
.adm-pur-upmsg { margin-top: 10px; padding: 10px 12px; border-radius: 10px; font-size: 13px; font-weight: 600; white-space: pre-line; background: var(--adm-surface-2); border: 1px solid var(--adm-line); }
.adm-pur-upmsg.error { background: var(--adm-danger-soft); color: var(--adm-danger); border-color: transparent; }
.adm-pur-upmsg.ok { background: var(--adm-accent-soft); color: var(--adm-accent); border-color: transparent; }
.adm-pur-or { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 12px; color: var(--adm-muted); font-size: 13px; }
.adm-pur-sum { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 12px 14px 0; }
.adm-pur-sum a { display: grid; gap: 2px; padding: 10px 12px; border: 1px solid var(--adm-line); border-radius: 10px; color: var(--adm-ink); text-decoration: none; background: var(--adm-surface); }
.adm-pur-sum a:hover { border-color: var(--adm-muted); }
.adm-pur-sum span { font-size: 12px; color: var(--adm-muted); font-weight: 600; }
.adm-pur-sum b { font-size: 20px; font-family: var(--adm-font-num); }
.adm-pur-sum small { font-size: 12px; color: var(--adm-muted); }

.adm-pur-review { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 400px); gap: 12px; align-items: start; }
.adm-pur-review.no-files { grid-template-columns: minmax(0, 1fr) minmax(300px, 360px); }
.adm-pur-main, .adm-pur-side { display: grid; gap: 12px; min-width: 0; align-content: start; }
.adm-pur-main > .card, .adm-pur-side > .card { margin: 0 !important; }
.adm-pur-side { position: sticky; top: 12px; max-height: calc(100vh - 112px); overflow: auto; } /* di atas bar tombol bawah */
.adm-pur-review > .adm-sticky-actions { grid-column: 1 / -1; margin-top: 0; }
@media (max-width: 1200px) { .adm-pur-review, .adm-pur-review.no-files { grid-template-columns: minmax(0, 1fr); } .adm-pur-side { position: static; max-height: none; order: -1; } }

.adm-pur-head { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 14px; }
.adm-pur-head .adm-pur-notes { grid-column: 1 / -1; }
.adm-pur-head > .adm-field { align-content: start; }
.adm-pur-head .adm-field > small { min-height: 0; }
.adm-pur-head .adm-seg { width: max-content; }
.adm-pur-head [hidden] { display: none !important; }
@media (max-width: 900px) { .adm-pur-head { grid-template-columns: minmax(0, 1fr); } }
.adm-pur .is-unsure { border-color: var(--adm-warn) !important; background: var(--adm-warn-soft) !important; }
.adm-pur .is-flash { outline: 2px solid var(--adm-accent); outline-offset: 2px; }
/* supplier dipilih sebelum upload (catatan AI per supplier) */
.adm-pur-sup { display: grid; gap: 4px; margin: 0 0 12px; max-width: 520px; }
.adm-pur-sup label { font-size: 13px; font-weight: 700; color: var(--adm-ink); }
.adm-pur-sup .req { color: var(--adm-danger); }
.adm-pur-sup small { font-size: 12.5px; color: var(--adm-muted); }
.adm-drop.has-stage { padding: 14px 16px; }
/* halaman yang akan diupload (faktur panjang = beberapa foto) */
.adm-pur-stage { margin-top: 12px; border: 1px solid var(--adm-line); border-radius: 12px; background: var(--adm-surface); }
.adm-pur-stage-h { display: grid; gap: 2px; padding: 10px 14px; border-bottom: 1px solid var(--adm-line); }
.adm-pur-stage-h small { color: var(--adm-muted); font-size: 12.5px; }
.adm-pur-stage ol { list-style: none; margin: 0; padding: 6px 8px; display: grid; gap: 4px; max-height: 340px; overflow: auto; }
.adm-pur-stage li { display: grid; grid-template-columns: 22px 44px minmax(0, 1fr) auto auto auto; gap: 8px; align-items: center; padding: 4px 6px; border-radius: 8px; }
.adm-pur-stage li:hover { background: var(--adm-surface-2); }
.adm-pur-stage li .no { font-family: var(--adm-font-num); font-weight: 700; text-align: center; }
.adm-pur-stage li img, .adm-pur-stage li .pdf { width: 44px; height: 44px; border-radius: 6px; object-fit: cover; border: 1px solid var(--adm-line); }
.adm-pur-stage li .pdf { display: grid; place-items: center; font-size: 11px; font-weight: 700; background: var(--adm-surface-2); }
.adm-pur-stage li .nm { display: grid; min-width: 0; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-pur-stage li .nm small { color: var(--adm-muted); font-size: 12px; }
.adm-pur-stage-f { display: flex; justify-content: flex-end; gap: 8px; padding: 10px 14px; border-top: 1px solid var(--adm-line); }
/* pelajaran AI: banner di review, kartu ketepatan, halaman pelajaran */
.adm-pur-learn summary { cursor: pointer; font-weight: 600; }
.adm-pur-learn ul { margin: 6px 0 0; padding-left: 18px; font-size: 13px; }
.adm-pur-acc { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: baseline; font-size: 13px; color: var(--adm-muted); }
.adm-pur-acc b { font-family: var(--adm-font-num); font-size: 15px; color: var(--adm-ink); }
.adm-pur-acc .up { color: var(--adm-accent); font-weight: 700; }
.adm-pur-acc .down { color: var(--adm-danger); font-weight: 700; }
.adm-learn-changes { margin: 0; padding-left: 18px; font-size: 13px; }
.adm-learn-changes li { margin: 2px 0; }
.adm-learn-h { font-size: 13px; font-weight: 700; margin: 0 0 4px; }
tr.is-excluded td { opacity: .5; }
/* diskusi dengan AI (layar review) */
.adm-pur-thread { display: grid; gap: 8px; max-height: 360px; overflow: auto; padding: 0 16px; }
.adm-pur-thread .msg { display: grid; gap: 3px; padding: 8px 10px; border-radius: 10px; font-size: 13.5px; border: 1px solid var(--adm-line); }
.adm-pur-thread .msg p { margin: 0; line-height: 1.45; }
.adm-pur-thread .msg b { font-size: 12px; color: var(--adm-muted); }
.adm-pur-thread .msg.user { background: var(--adm-surface-2); margin-left: 24px; }
.adm-pur-thread .msg.ai { background: var(--adm-accent-soft); border-color: var(--adm-accent); margin-right: 24px; }
.adm-pur-thread .st { color: var(--adm-muted); font-size: 12px; }
.adm-pur-thread .st.bad { color: var(--adm-danger); }
.adm-pur-thread .lesson { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; font-size: 12.5px; padding: 6px 8px; border-radius: 8px; background: var(--adm-surface); border: 1px dashed var(--adm-accent); }
.adm-pur-thread .lesson.off { border-color: var(--adm-line); color: var(--adm-muted); }
.adm-pur-chat-empty { font-size: 13px; margin: 0; }
.adm-pur-thread .lesson-add { justify-self: start; font-size: 12px; font-weight: 600; }
.adm-pur-say { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: end; padding: 12px 16px 16px; }
.adm-pur-say textarea { resize: vertical; min-height: 44px; }

.adm-pur-banner { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--adm-line); background: var(--adm-surface); font-size: 13px; margin-bottom: 12px; }
.adm-pur-banner > div { flex: 1; display: grid; gap: 2px; }
.adm-pur-banner b { font-size: 14px; }
.adm-pur-banner.danger { background: var(--adm-danger-soft); border-color: transparent; }
.adm-pur-banner.danger b { color: var(--adm-danger); }
.adm-pur-banner.warn { background: var(--adm-warn-soft); border-color: transparent; }
.adm-pur-banner.warn b { color: var(--adm-warn); }
.adm-pur-banner.info { background: var(--adm-surface-2); }
.adm-pur-banner a { color: inherit; font-weight: 700; }
.adm-pur-aiw { margin: 6px 0 0; padding-left: 18px; color: var(--adm-ink); }
.adm-pur-aiw li { margin: 2px 0; }
#purBanners:empty { display: none; }
#purBanners .adm-pur-banner:last-child { margin-bottom: 0; }
.adm-pur-proc-acts { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 12px; }
#purProcState.error .ico { background: var(--adm-warn-soft); color: var(--adm-warn); border-color: transparent; }

.adm-pur-lines { display: grid; }
.adm-pur-lines > .adm-state { border: 0; }
/* baris barang (container query pada kartu Barang): HP = bertumpuk, sedang = dua baris, lebar = satu baris */
#purLinesCard { container-type: inline-size; }
.adm-pur-lines-tools { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.adm-pur-lines-tools .adm-seg b { font-family: var(--adm-font-num); margin-left: 4px; }
.adm-pur-lines.only-todo .pl:not(.todo) { display: none; }
.pl-head { display: none; }
.pl { display: grid; gap: 6px 8px; align-items: start; padding: 10px 12px; border-bottom: 1px solid var(--adm-line); border-left: 3px solid transparent;
  grid-template-columns: 22px minmax(0, 1fr) minmax(0, 1fr) 32px;
  grid-template-areas: "no name name del" ". prod prod prod" ". unit qty qty" ". price disc disc" ". sub sub sub" ". notes notes notes"; }
.pl > .pl-no { grid-area: no; padding-top: 8px; }
.pl > .pl-cname { grid-area: name; }
.pl > .pl-cprod { grid-area: prod; }
.pl > .pl-unit { grid-area: unit; }
.pl > .pl-qty { grid-area: qty; }
.pl > .pl-price { grid-area: price; }
.pl > .pl-disc { grid-area: disc; }
.pl > .pl-sub { grid-area: sub; }
.pl > .pl-del { grid-area: del; }
.pl > .pl-notes { grid-area: notes; }
.pl-c { display: grid; gap: 3px; min-width: 0; margin: 0; }
.pl-c > * { min-width: 0; }
.pl-c .adm-input, .pl-c .adm-select { width: 100%; height: 32px; padding: 0 8px; }
.pl-lb { font-size: 11px; font-weight: 700; color: var(--adm-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-namew { display: flex; gap: 4px; min-width: 0; }
.pl-namew .pl-name { flex: 1; min-width: 0; font-weight: 600; text-transform: none !important; }
.pl-namew .pl-code { width: 76px !important; flex: none; font-size: 12px; text-transform: none !important; }
.pl-lb em { font-style: normal; font-weight: 600; }
.pl-lbst { display: flex; min-width: 0; }
.pl-st { font-size: 11.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.pl-st::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 5px; background: currentColor; vertical-align: 1px; }
.pl-st.ok { color: var(--adm-accent); } .pl-st.warn { color: var(--adm-warn); } .pl-st.bad { color: var(--adm-danger); } .pl-st.off { color: var(--adm-muted); }
.pl-pickw { display: flex; gap: 4px; min-width: 0; }
.pl-pickw .pl-pick { flex: 1; min-width: 0; }
/* nama barang di sistem boleh dua baris, tidak terpotong */
.pl .pl-pick { height: auto; min-height: 32px; padding: 6px 10px; white-space: normal; line-height: 1.25; overflow-wrap: anywhere; }
.pl-new { width: 32px !important; height: 32px !important; flex: none; }
.pl-hint { display: none; font-size: 11px; color: var(--adm-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-sub b { height: 32px; display: flex; align-items: center; justify-content: flex-end; font-size: 14px; }
.pl-n .adm-input { text-align: right; }
/* laptop & desktop: nama di faktur + barang di sistem di atas (lebar), angka di bawah */
@container (min-width: 560px) {
  .pl { grid-template-columns: 22px repeat(6, minmax(0, 1fr)) 32px;
    grid-template-areas: "no name name name prod prod prod del" ". unit unit qty price disc sub ." ". notes notes notes notes notes notes notes"; }
}
.pl:last-child { border-bottom: 0; }
.pl.unlinked { border-left-color: var(--adm-danger); }
.pl.unsure:not(.unlinked) { border-left-color: var(--adm-warn); }
.pl-no { width: 24px; flex: none; text-align: center; font-weight: 700; color: var(--adm-muted); font-family: var(--adm-font-num); }
.pl-del { width: 32px !important; height: 32px !important; flex: none; }
.pl-pick { height: 34px; width: 100%; text-align: left; padding: 0 10px; border: 1px solid var(--adm-line); border-radius: 8px; background: var(--adm-surface); color: var(--adm-ink); font-weight: 600; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.pl-pick:hover { border-color: var(--adm-muted); }
.pl-pick.empty { border-style: dashed; border-color: var(--adm-danger); color: var(--adm-danger); }
.pl-notes { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 12.5px; }
.pl-notes li { padding: 4px 8px; border-radius: 7px; background: var(--adm-surface-2); }
.pl-notes li.danger { background: var(--adm-danger-soft); color: var(--adm-danger); }
.pl-notes li.warn { background: var(--adm-warn-soft); color: var(--adm-warn); }
.pl-notes li.ok { background: transparent; color: var(--adm-muted); padding-left: 0; }
.pl-notes li.info { color: var(--adm-muted); }
.pl-notes label { display: inline-flex; gap: 6px; align-items: center; margin: 0; cursor: pointer; color: inherit; font-weight: 600; flex-wrap: wrap; }
.pl-notes label input { width: 16px; height: 16px; accent-color: var(--adm-accent); }
.pl-notes s { opacity: .75; }
.pl-notes small { opacity: .8; }
@media (max-width: 900px) {
    .pl-notes { padding-left: 0; }
  }

.adm-pur-viewer .adm-card-h label.adm-btn { margin: 0; }
.adm-pur-pages { display: flex; gap: 4px; padding: 8px 14px 0; flex-wrap: wrap; }
.adm-pur-pages button { min-width: 30px; height: 28px; border: 1px solid var(--adm-line); border-radius: 7px; background: var(--adm-surface); font-weight: 700; font-size: 12px; color: var(--adm-muted); cursor: pointer; }
.adm-pur-pages button[aria-selected="true"] { background: var(--adm-ink); color: var(--adm-surface); border-color: var(--adm-ink); }
.adm-pur-frame { margin: 8px 14px 0; height: min(62vh, 640px); min-height: 280px; overflow: auto; background: var(--adm-surface-2); border: 1px solid var(--adm-line); border-radius: 10px; display: grid; place-items: center; }
.adm-pur-frame img { display: block; max-width: 100%; max-height: 100%; cursor: zoom-in; transform-origin: center; }
.adm-pur-frame.is-rot img { max-width: min(100%, 62vh); max-height: none; }
.adm-pur-frame[data-zoom="full"] { place-items: start; }
.adm-pur-frame[data-zoom="full"] img { max-width: none; max-height: none; width: 200%; cursor: zoom-out; }
.adm-pur-frame iframe { width: 100%; height: 100%; border: 0; background: #fff; }
.adm-pur-frame > .adm-state { padding: 20px; }
.adm-pur-tools { display: flex; gap: 6px; justify-content: flex-end; padding: 8px 14px 12px; }
@media (max-width: 1200px) { .adm-pur-frame { height: 46vh; } }

.adm-pur-totals { display: grid; gap: 6px; margin: 0 0 12px; }
.adm-pur-totals > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13px; }
.adm-pur-totals dt { font-weight: 600; color: var(--adm-muted); margin: 0; }
.adm-pur-totals dt label { margin: 0; font-weight: 600; }
.adm-pur-totals dt small { display: block; font-weight: 500; font-size: 11px; }
.adm-pur-totals dd { margin: 0; font-family: var(--adm-font-num); font-weight: 700; text-align: right; }
.adm-pur-totals .edit dd { width: 150px; }
.adm-pur-totals .edit .adm-input { height: 34px; }
.adm-pur-totals .total { border-top: 1px solid var(--adm-line); padding-top: 8px; }
.adm-pur-totals .total dt, .adm-pur-totals .total dd { color: var(--adm-ink); font-size: 15px; }
.adm-pur-totals .diff.good dd { color: var(--adm-accent); }
.adm-pur-totals .diff.bad dd { color: var(--adm-danger); }
.adm-pur-issues { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.adm-pur-issues li { border-radius: 8px; font-size: 13px; background: var(--adm-surface-2); border-left: 3px solid var(--adm-line); }
.adm-pur-issues li > * { display: block; width: 100%; text-align: left; padding: 7px 10px; border: 0; background: none; color: inherit; font-weight: 600; }
.adm-pur-issues button { cursor: pointer; }
.adm-pur-issues button[data-go=""] { cursor: default; }
.adm-pur-issues .danger { background: var(--adm-danger-soft); color: var(--adm-danger); border-left-color: var(--adm-danger); }
.adm-pur-issues .warn { background: var(--adm-warn-soft); color: var(--adm-warn); border-left-color: var(--adm-warn); }
.adm-pur-issues .ok { background: var(--adm-accent-soft); color: var(--adm-accent); border-left-color: var(--adm-accent); }
.adm-pur-issues .info { color: var(--adm-muted); }
.adm-pur-note { margin-top: 12px; }
.adm-pur-note textarea { height: auto; padding: 8px 10px; text-transform: none !important; }
.adm-pur-actions { flex-wrap: wrap; }
@media (max-width: 640px) { .adm-pur-actions .adm-btn { flex: 1 1 auto; } .adm-pur-actions #purBack { display: none; } }

.adm-dialog { border: 0; border-radius: 14px; padding: 0; width: min(640px, calc(100vw - 32px)); max-height: calc(100vh - 48px); background: var(--adm-surface); color: var(--adm-ink); box-shadow: 0 20px 60px rgba(0, 0, 0, .25); }
.adm-dialog.sm { width: min(460px, calc(100vw - 32px)); }
.adm-dialog::backdrop { background: rgba(10, 20, 15, .45); }
.adm-dialog-b { display: grid; gap: 12px; padding: 16px; margin: 0; }
.adm-dialog-h { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.adm-dialog-h b { font-size: 16px; display: block; }
.adm-dialog-h small { color: var(--adm-muted); font-size: 12.5px; display: block; margin-top: 2px; }
.adm-dialog-f { display: flex; gap: 8px; justify-content: flex-end; align-items: center; flex-wrap: wrap; }
.adm-dialog-text { font-size: 14px; line-height: 1.5; }
.adm-dialog-text p { margin: 0 0 8px; }
.adm-dialog-text ul { margin: 0 0 8px; padding-left: 18px; }
.adm-pk-list { max-height: min(52vh, 460px); overflow: auto; display: grid; gap: 6px; align-content: start; }
.adm-pk-title { font-size: 12px; color: var(--adm-muted); font-weight: 700; }
.adm-pk-item { display: grid; gap: 2px; text-align: left; padding: 9px 10px; border: 1px solid var(--adm-line); border-radius: 10px; background: var(--adm-surface); color: var(--adm-ink); cursor: pointer; }
.adm-pk-item:hover, .adm-pk-item[aria-selected="true"] { border-color: var(--adm-accent); background: var(--adm-accent-soft); }
.adm-pk-item b { font-size: 14px; }
.adm-pk-item em { font-style: normal; font-size: 11px; font-weight: 700; color: var(--adm-accent); }
.adm-pk-item small { color: var(--adm-muted); font-size: 12px; }
.adm-pk-item .u { display: flex; gap: 4px; flex-wrap: wrap; }
.adm-pk-item .u span { font-family: var(--adm-font-num); font-size: 11.5px; padding: 1px 6px; border-radius: 6px; background: var(--adm-surface-2); border: 1px solid var(--adm-line); }
.adm-pk-item .u span.on { border-color: var(--adm-accent); color: var(--adm-accent); }
.adm-pk-row { display: grid; gap: 4px; }
/* konversi satuan faktur -> satuan kita di catatan baris */
.pl-conv { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.pl-conv .adm-input { width: 64px; height: 28px; padding: 2px 6px; }
.pl-conv .adm-select { width: auto; height: 28px; padding: 2px 24px 2px 6px; }
.adm-pk-item .aka { display: flex; flex-wrap: wrap; gap: 2px 10px; font-size: 12px; color: var(--adm-muted); }
.adm-pk-item .aka b { font-size: 12px; font-weight: 600; color: var(--adm-ink); }
.adm-pk-item small.warn { color: var(--adm-warn); font-weight: 600; }
.adm-pk-acts { display: flex; flex-wrap: wrap; gap: 4px 14px; padding: 0 10px; font-size: 12.5px; }
/* form produk yang dibuka dari faktur pembelian (purchase-link.js) */
.adm-pur-from { display: grid; gap: 2px; margin: 0 0 14px; padding: 10px 14px; border: 1px solid var(--adm-accent); border-radius: 12px; background: var(--adm-accent-soft); color: var(--adm-ink); font-size: 13.5px; }
.adm-pur-from small { color: var(--adm-muted); font-size: 12.5px; }
#pkFoot { justify-content: flex-start; font-size: 13px; }
#pkFoot small { width: 100%; }
.adm-toast.is-error { background: var(--adm-danger) !important; color: var(--adm-danger-ink) !important; }

.adm-pur-view { display: grid; gap: 12px; }
.adm-pur-view > .card { margin: 0 !important; }
.adm-pur-view-st { display: flex; gap: 8px; align-items: center; }
.adm-pur-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.adm-pur-facts > div { display: grid; gap: 2px; padding: 10px 12px; border: 1px solid var(--adm-line); border-radius: 10px; }
.adm-pur-facts .wide { grid-column: 1 / -1; }
.adm-pur-facts span { font-size: 12px; color: var(--adm-muted); font-weight: 600; }
.adm-pur-facts b { font-size: 18px; font-family: var(--adm-font-num); }
.adm-pur-facts b.txt { font-size: 14px; font-family: inherit; font-weight: 600; }
.adm-pur-facts small { font-size: 12px; color: var(--adm-muted); }
.adm-pur-facts small.bad { color: var(--adm-danger); font-weight: 700; }
.adm-pur-thumbs { display: flex; gap: 10px; flex-wrap: wrap; }
.adm-pur-thumbs a { width: 120px; height: 150px; border: 1px solid var(--adm-line); border-radius: 10px; overflow: hidden; display: grid; place-items: center; background: var(--adm-surface-2); }
.adm-pur-thumbs img { width: 100%; height: 100%; object-fit: cover; }
.adm-pur-thumbs .pdf { font-weight: 800; color: var(--adm-danger); }
@media (max-width: 900px) { .adm-pur-sum, .adm-pur-facts { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 1201px) { .adm-pur-review, .adm-pur-review.no-files { grid-template-columns: minmax(0, 1fr) minmax(340px, 34%); } }
.adm-pur-barsum { font-weight: 700; font-size: 13px; padding: 4px 10px; border-radius: 99px; background: var(--adm-surface-2); white-space: nowrap; }
.adm-pur-barsum:empty { display: none; }
.adm-pur-barsum.good { background: var(--adm-accent-soft); color: var(--adm-accent); }
.adm-pur-barsum.warn { background: var(--adm-warn-soft); color: var(--adm-warn); }
.adm-pur-barsum.bad { background: var(--adm-danger-soft); color: var(--adm-danger); }
.adm-pur-actions > .adm-pur-barsum + .adm-muted { margin-right: auto; }
.adm-pur-frame { height: calc(100vh - 230px); }
.adm-pur-frame { height: auto; max-height: calc(100vh - 230px); min-height: 220px; }
.adm-pur-frame:has(iframe) { height: calc(100vh - 230px); }
.adm-pur-frame[data-zoom="full"] { height: calc(100vh - 230px); }
@media (max-width: 1200px) { .adm-pur-frame, .adm-pur-frame:has(iframe), .adm-pur-frame[data-zoom="full"] { max-height: 60vh; } .adm-pur-frame:has(iframe) { height: 60vh; } }
@media (max-width: 640px) {
  .adm-pur-review > .adm-sticky-actions { position: static; }
        .adm-pur-totals .edit dd { width: 130px; }
}
.adm-pur-unsure-ok { justify-self: start; font-size: 12px; color: var(--adm-warn); }
.adm-pur-totals .edit { flex-wrap: wrap; }
.adm-pur-totals .edit .adm-pur-unsure-ok { width: 100%; text-align: right; }

/* ===== Layar review pembelian v2: foto kecil + ringkasan di kanan, previewer & Tanya AI di modal ===== */
@media (min-width: 1201px) { .adm-pur-review, .adm-pur-review.no-files { grid-template-columns: minmax(0, 1fr) 340px; } }
.adm-pur-side .adm-pur-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 8px; padding: 12px 14px; }
.adm-pur-thumb { position: relative; height: 84px; padding: 0; border: 1px solid var(--adm-line); border-radius: 9px; overflow: hidden; background: var(--adm-surface-2); cursor: zoom-in; display: grid; place-items: center; }
.adm-pur-thumb:hover { border-color: var(--adm-accent); }
.adm-pur-thumb img { width: 100%; height: 100%; object-fit: cover; }
.adm-pur-thumb .pdf { font-weight: 800; font-size: 12px; color: var(--adm-danger); }
.adm-pur-thumb .no { position: absolute; left: 4px; bottom: 4px; min-width: 18px; padding: 0 4px; border-radius: 5px; background: var(--adm-ink); color: var(--adm-surface); font: 700 11px/18px var(--adm-font-num); text-align: center; }
.adm-pur-side .adm-pur-check .adm-card-b { padding-top: 12px; }
.adm-pur-side .adm-pur-totals .edit dd { width: 128px; }
.adm-pur-askcard .adm-card-b { display: flex; gap: 10px; align-items: center; justify-content: space-between; padding: 12px 14px; }
.adm-pur-askcard b { display: block; font-size: 14px; }
.adm-pur-askcard small { display: block; color: var(--adm-muted); font-size: 12px; line-height: 1.4; }
.adm-pur-askn { display: inline-grid; place-items: center; min-width: 18px; height: 18px; margin-left: 6px; padding: 0 5px; border-radius: 9px; background: var(--adm-accent); color: var(--adm-accent-ink); font: 700 11px var(--adm-font-num); }
/* modal previewer */
.adm-preview { width: min(1180px, calc(100vw - 32px)); height: calc(100vh - 40px); max-height: none; display: none; }
.adm-preview[open] { display: flex; flex-direction: column; }
.adm-preview-h { display: flex; gap: 10px; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--adm-line); }
.adm-preview-h .adm-pur-pages { padding: 0; flex: 1; }
.adm-preview-h .adm-pur-tools { padding: 0; }
.adm-preview .adm-pur-frame { flex: 1; margin: 0; height: auto !important; max-height: none !important; min-height: 0; border: 0; border-radius: 0 0 14px 14px; }
.adm-preview .adm-pur-frame.is-rot img { max-width: min(100%, calc(100vh - 120px)); }
/* sheet Tanya AI (modal dari kanan; HP: dari bawah) */
.adm-sheet { position: fixed; inset: 0 0 0 auto; margin: 0; width: min(460px, 100vw); height: 100vh; max-height: none; padding: 0; border: 0; border-left: 1px solid var(--adm-line); background: var(--adm-surface); color: var(--adm-ink); box-shadow: var(--adm-shadow); display: none; }
.adm-sheet[open] { display: flex; flex-direction: column; }
.adm-sheet::backdrop, .adm-preview::backdrop { background: rgba(10, 14, 12, .45); }
.adm-sheet-h { display: flex; gap: 10px; align-items: flex-start; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--adm-line); }
.adm-sheet-h b { display: block; font-size: 16px; }
.adm-sheet-h small { display: block; color: var(--adm-muted); font-size: 12.5px; line-height: 1.4; margin-top: 2px; }
.adm-sheet .adm-pur-thread { flex: 1; max-height: none; padding: 12px 16px; align-content: start; }
.adm-sheet .adm-pur-say { border-top: 1px solid var(--adm-line); padding: 10px 16px 14px; }
.adm-pur-suggest { grid-column: 1 / -1; display: flex; gap: 6px; flex-wrap: wrap; }
.adm-pur-suggest button { border: 1px solid var(--adm-line); background: var(--adm-surface-2); color: var(--adm-ink); border-radius: 999px; padding: 3px 10px; font-size: 12px; cursor: pointer; }
.adm-pur-suggest button:hover { border-color: var(--adm-accent); }
.adm-pur-thread .acts { display: grid; gap: 6px; margin-top: 4px; padding: 8px 10px; border-radius: 8px; background: var(--adm-surface); border: 1px solid var(--adm-line); }
.adm-pur-thread .acts.done { color: var(--adm-muted); font-size: 12.5px; }
.adm-pur-thread .acts ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.adm-pur-thread .acts label { display: flex; gap: 6px; align-items: flex-start; margin: 0; font-size: 13px; cursor: pointer; }
.adm-pur-thread .acts label input { margin-top: 3px; accent-color: var(--adm-accent); }
.adm-pur-thread .acts small { display: block; margin-left: 20px; color: var(--adm-muted); font-size: 12px; }
.adm-pur-thread .acts .bad { color: var(--adm-danger); font-style: normal; }
.adm-pur-thread .acts-f { display: flex; gap: 6px; justify-content: flex-end; }
@media (max-width: 700px) {
  .adm-sheet { inset: auto 0 0 0; width: 100vw; height: 88vh; border-left: 0; border-top: 1px solid var(--adm-line); border-radius: 14px 14px 0 0; }
  .adm-preview { width: 100vw; height: 100vh; border-radius: 0; }
  .adm-preview-h { flex-wrap: wrap; }
}
/* dropdown dengan pencarian (supplier) */
.adm-combo { position: relative; min-width: 0; }
.adm-combo-btn { width: 100%; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.adm-combo-btn.empty { color: var(--adm-muted); }
.adm-combo-pop { position: absolute; z-index: 40; top: calc(100% + 4px); left: 0; right: 0; min-width: 260px; padding: 6px; border: 1px solid var(--adm-line); border-radius: 10px; background: var(--adm-surface); box-shadow: var(--adm-shadow); }
.adm-combo-pop .adm-input { width: 100%; height: 34px; }
.adm-combo-pop ul { list-style: none; margin: 6px 0 0; padding: 0; max-height: 280px; overflow: auto; }
.adm-combo-pop li { padding: 7px 10px; border-radius: 7px; font-size: 13.5px; cursor: pointer; }
.adm-combo-pop li[aria-selected="true"], .adm-combo-pop li:hover { background: var(--adm-accent-soft); }
.adm-combo-pop li.on { font-weight: 700; }
.adm-combo-pop li.ph, .adm-combo-pop li.none { color: var(--adm-muted); }
.adm-combo-pop li.none { cursor: default; }
/* balasan AI (markdown ringan) */
.adm-pur-thread .md { display: grid; gap: 4px; line-height: 1.45; font-size: 13.5px; }
.adm-pur-thread .md p { margin: 0; }
.adm-pur-thread .md ul, .adm-pur-thread .md ol { margin: 0; padding-left: 18px; display: grid; gap: 2px; }
.adm-pur-thread .md code { font-family: var(--adm-font-num); font-size: 12.5px; padding: 0 4px; border-radius: 4px; background: var(--adm-surface-2); }
/* modal cek harga jual */
.adm-prices { width: min(980px, calc(100vw - 32px)); }
.adm-prices-b { display: grid; gap: 14px; max-height: calc(100vh - 220px); overflow: auto; padding: 4px 0; }
.adm-prices .pr-p h3 { font-size: 14px; margin: 0 0 6px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.adm-prices .adm-tbl td { vertical-align: top; }
.adm-prices .pr-c .adm-input { width: 112px; height: 32px; margin-left: auto; text-align: right; }
.adm-prices .pr-c small { display: block; font-size: 11.5px; color: var(--adm-muted); white-space: nowrap; }
.adm-prices .pr-c .now-loss, .adm-prices .pr-c.loss .pr-m { color: var(--adm-danger); }
.adm-prices .pr-c.loss .adm-input { border-color: var(--adm-danger); }
.adm-pill.bad { background: var(--adm-danger-soft); color: var(--adm-danger); }

/* angka hasil hitungan: kotak readonly (sejajar dengan isian, tidak bisa diketik, tetap bisa disalin) */
.adm-input.adm-ro, .adm-input[readonly].adm-ro { background: var(--adm-surface-2); border-color: var(--adm-line); color: var(--adm-ink); font-weight: 700; cursor: default; box-shadow: none; }
.adm-input.adm-ro:focus { outline: none; border-color: var(--adm-line); }
.adm-pur-totals .total .adm-input.adm-ro { font-size: 15px; }

/* catatan AI di banner: topik tebal, angka/kode menonjol, sisanya dilipat */
.adm-pur-aiw { margin: 6px 0 0; padding-left: 18px; display: grid; gap: 3px; font-size: 13px; line-height: 1.45; }
.adm-pur-aiw b { font-weight: 700; color: var(--adm-ink); }
.adm-pur-aiw code { font-family: var(--adm-font-num); font-size: 12px; padding: 0 4px; border-radius: 4px; background: var(--adm-surface-2); }
.adm-pur-aiw-more { margin-top: 4px; font-size: 13px; }
.adm-pur-aiw-more summary { cursor: pointer; font-weight: 600; color: var(--adm-accent); }
.adm-pur-pricebtn { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--adm-line); }
.adm-pur-pricebtn small { color: var(--adm-muted); font-size: 12px; flex: 1; min-width: 140px; }