/* Tampilan baru Farmalite — gaya template admin Materialize (Pixinvent) yang dibeli owner, 11 Nov 2026.
   Hanya berlaku bila <html> berkelas .tema-m (App\Support\Tema, UI_TEMA=materialize). Markup halaman TIDAK diubah:
   berkas ini menimpa tampilan kelas yang sudah ada (.panel, .data-table, .control, .btn, menu samping, topbar)
   memakai ukuran, warna, bayangan, dan huruf dari core.css Materialize. Warna utama = hijau Farmalite. */

html.tema-m {
  --m-primary: #0C5C49;
  --m-primary-rgb: 12, 92, 73;
  --m-primary-hover: #0A4D3D;
  --m-primary-light: #2E8C70;
  --m-primary-subtle: #E2F0EB;
  --m-heading: #262B43;
  --m-text: #3B4055;
  --m-text-2: #676A7B;
  --m-muted: #8A8D9B;
  --m-bg: #F7F7F9;
  --m-paper: #FFFFFF;
  --m-border: #E6E6E9;
  --m-border-input: #C9CAD1;
  --m-hover: rgba(38, 43, 67, 0.05);
  --m-open: rgba(38, 43, 67, 0.08);
  --m-radius: 0.5rem;
  --m-radius-card: 0.625rem;
  --m-shadow: 0 0.25rem 0.875rem 0 rgba(38, 43, 67, 0.16);
  --m-shadow-sm: 0 0.125rem 0.625rem 0 rgba(38, 43, 67, 0.14);
  --m-shadow-lg: 0 0.375rem 1.25rem 0 rgba(38, 43, 67, 0.18);
  --m-shadow-xs: 0 0.125rem 0.375rem 0 rgba(38, 43, 67, 0.16);
  --m-success: #56CA00;
  --m-info: #16B1FF;
  --m-warning: #FFB400;
  --m-danger: #FF4C51;
  --sidebar-width: 260px;
  --sidebar-rail: 70px;
  /* Tinggi bilah atas + jaraknya (bilah melayang 12px dari atas): dipakai elemen lengket (sticky) di bawahnya. */
  --topbar-height: 78px;
  /* Huruf dasar lebih besar (dulu 12px): semua ukuran rem di CSS lama ikut membesar ±17%. */
  /* Huruf dasar 13px (owner 11 Nov 2026: 15px terlalu besar, "kecilin 2 tingkat"). */
  --font-size: 13px;
  --line: var(--m-border);
  --text: var(--m-text);
  --text-strong: var(--m-heading);
  --text-muted: var(--m-muted);
  --b-bg: var(--m-bg);
  --b-surface: var(--m-paper);
  --b-line: var(--m-border);
  --b-line-soft: #EFEFF2;
  --b-text: var(--m-heading);
  --b-text-2: var(--m-text);
  --b-muted: var(--m-muted);
  --b-accent: var(--m-primary);
  --b-accent-hover: var(--m-primary-hover);
  --b-accent-soft: var(--m-primary-subtle);
  --b-radius: var(--m-radius);
  --b-radius-lg: var(--m-radius-card);
}

html.tema-m body {
  background: var(--m-bg);
  color: var(--m-text);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  -webkit-font-smoothing: antialiased;
}
html.tema-m h1, html.tema-m h2, html.tema-m h3, html.tema-m h4 { color: var(--m-heading); font-weight: 600; }
html.tema-m strong, html.tema-m b { font-weight: 600; color: inherit; }
html.tema-m a { color: var(--m-primary); }

/* ── Menu samping: menu vertikal terang Materialize ── */
html.tema-m .erp-sidebar {
  background: var(--m-paper);
  color: var(--m-text);
  border-right: 0;
  box-shadow: 0 0 10px rgba(38, 43, 67, 0.10);
}
html.tema-m .sidebar-brand {
  min-height: 64px;
  padding: 0 20px;
  border-bottom: 0;
}
html.tema-m .brand-mark {
  flex-basis: 34px;
  width: 34px;
  height: 34px;
  border-radius: 0.5rem;
  background: var(--m-primary);
  color: #fff;
  font-weight: 700;
  box-shadow: var(--m-shadow-xs);
}
html.tema-m .brand-title { color: var(--m-heading); font-size: 1.07rem; font-weight: 600; }
html.tema-m .brand-subtitle { color: var(--m-muted); font-size: 0.8rem; }
html.tema-m .sidebar-nav { padding: 6px 0 12px; gap: 2px; }

/* Judul kelompok (details > summary) tampil seperti butir menu bertingkat Materialize, bukan label huruf besar. */
html.tema-m .nav-section {
  min-height: 40px;
  margin: 2px 12px 0;
  padding: 0 12px;
  border-radius: var(--m-radius);
  color: var(--m-heading);
  font-size: 0.95rem;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
}
html.tema-m .nav-section:hover { background: var(--m-hover); color: var(--m-heading); }
html.tema-m .sidebar-group.is-active > .nav-section,
html.tema-m .sidebar-group[open] > .nav-section {
  background: var(--m-open);
  color: var(--m-heading);
}
html.tema-m .nav-section::after { width: 6px; height: 6px; transform: rotate(-45deg); opacity: .7; }
html.tema-m .sidebar-group[open] > .nav-section::after { transform: rotate(45deg); }

html.tema-m .nav-link {
  min-height: 40px;
  margin: 0 12px;
  padding: 0 12px;
  gap: 10px;
  border-radius: var(--m-radius);
  color: var(--m-text);
  font-size: 0.95rem;
  font-weight: 400;
}
html.tema-m .nav-link svg { flex-basis: 20px; width: 20px; height: 20px; stroke-width: 1.7; color: var(--m-heading); opacity: .85; }
html.tema-m .nav-link:hover { background: var(--m-hover); color: var(--m-heading); }
html.tema-m .nav-link.is-active {
  background: linear-gradient(270deg, rgba(var(--m-primary-rgb), 0.72) 0%, var(--m-primary) 100%);
  color: #fff;
  font-weight: 500;
  box-shadow: var(--m-shadow-xs);
}
html.tema-m .nav-link.is-active svg { color: #fff; opacity: 1; }
html.tema-m .nav-link.is-active::before { display: none; }

/* Sub-menu: titik kecil di depan (gaya Materialize); ikon tetap dipakai saat menu diciutkan. */
html.tema-m .sidebar-group-list { gap: 2px; padding: 2px 0 4px; }
html.tema-m .sidebar-group-list .nav-link { margin-left: 12px; padding-left: 16px; min-height: 36px; font-size: 0.93rem; }
html.tema-m body:not(.sidebar-collapsed) .sidebar-group-list .nav-link svg { display: none; }
html.tema-m body:not(.sidebar-collapsed) .sidebar-group-list .nav-link::after {
  order: -1;
  flex: 0 0 8px;
  width: 8px;
  height: 8px;
  margin-right: 4px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  content: "";
  opacity: .55;
}
html.tema-m body:not(.sidebar-collapsed) .sidebar-group-list .nav-link.is-active::after { background: #fff; border-color: #fff; opacity: 1; }

html.tema-m .sidebar-footer { padding: 12px; border-top: 1px solid var(--m-border); }
html.tema-m .branch-card { background: var(--m-bg); border: 0; border-radius: var(--m-radius); }
html.tema-m .branch-label { color: var(--m-muted); }
html.tema-m .branch-name { color: var(--m-heading); font-weight: 600; }
html.tema-m .sm-search { background: var(--m-bg); border: 1px solid var(--m-border); border-radius: var(--m-radius); }
html.tema-m .sm-search:focus-within { border-color: var(--m-primary); background: var(--m-paper); }
html.tema-m .sm-search svg { color: var(--m-muted); }
html.tema-m .sm-search input { color: var(--m-heading); }
html.tema-m .sm-search input::placeholder { color: var(--m-muted); }
html.tema-m .sm-search input:focus-visible { outline: 0; }
html.tema-m .sm-search-full { margin: 4px 16px 6px; }
/* Tampilan Sederhana (7 menu) memakai .sm-link: sama dengan menu lengkap, tanpa garis emas. */
html.tema-m .sidebar-simple .sm-link.is-active { color: #fff; }
html.tema-m .sidebar-simple .sm-link.is-active::before,
html.tema-m .sidebar-simple .nav-link.is-active::before { display: none; }
html.tema-m .sm-link:focus-visible { outline: 2px solid var(--m-primary); }

/* ── Topbar: bilah "melayang" (navbar detached Materialize) ── */
html.tema-m .topbar {
  min-height: 62px;
  top: 12px;
  margin: 12px 24px 0;
  padding: 0 20px;
  border: 0;
  border-radius: var(--m-radius-card);
  background: var(--m-paper);
  box-shadow: var(--m-shadow-sm);
  backdrop-filter: none;
}
html.tema-m .page-title { color: var(--m-heading); font-size: 1.15rem; font-weight: 600; }
html.tema-m .page-kicker { color: var(--m-muted); font-size: 0.85rem; }
html.tema-m .icon-button {
  border: 0;
  border-radius: var(--m-radius);
  background: transparent;
  color: var(--m-heading);
  box-shadow: none;
  font-weight: 500;
}
html.tema-m .icon-button:hover { background: var(--m-hover); color: var(--m-heading); }
html.tema-m .topbar .icon-button[style],
html.tema-m .qris-header-button,
html.tema-m .cashier-close-button,
html.tema-m .ui-try-button {
  background: transparent !important;
  border: 1px solid var(--m-border) !important;
  color: var(--m-heading) !important;
}
html.tema-m .user-chip .avatar {
  background: var(--m-primary-subtle);
  color: var(--m-primary);
  border-radius: 50%;
  font-weight: 600;
}
html.tema-m .user-name { color: var(--m-heading); font-weight: 600; }
html.tema-m .user-role { color: var(--m-muted); }

/* ── Area isi ── */
html.tema-m .content { padding: 24px 24px 40px; gap: 24px; }

/* ── Kartu ── */
html.tema-m .panel,
html.tema-m .metric-card,
html.tema-m .stat-card {
  background: var(--m-paper);
  border: 0;
  border-radius: var(--m-radius-card);
  box-shadow: var(--m-shadow);
}
html.tema-m .panel-header { padding: 18px 20px; border-bottom: 1px solid var(--m-border); }
html.tema-m .panel-title { color: var(--m-heading); font-size: 1.1rem; font-weight: 600; }
html.tema-m .panel-body { padding: 20px; }
html.tema-m .metric-card { padding: 20px; }
html.tema-m .metric-label { color: var(--m-text-2); font-weight: 500; }
html.tema-m .metric-value,
html.tema-m .metric-card h2,
html.tema-m .metric-card strong { color: var(--m-heading); font-weight: 600; }
html.tema-m .metric-note { color: var(--m-muted); }
html.tema-m .metric-icon {
  border: 0 !important;
  border-radius: var(--m-radius) !important;
  background: var(--m-primary-subtle) !important;
  color: var(--m-primary) !important;
}

/* ── Tombol ── */
html.tema-m .btn {
  min-height: 38px;
  padding: 0 18px;
  border-radius: var(--m-radius);
  font-weight: 500;
  letter-spacing: 0.01em;
  box-shadow: none;
  transition: background-color .15s ease, box-shadow .15s ease, border-color .15s ease;
}
html.tema-m .btn-sm { min-height: 32px; padding: 0 12px; font-size: 0.85rem; }
html.tema-m .btn-primary {
  background: var(--m-primary);
  border-color: var(--m-primary);
  color: #fff;
  box-shadow: 0 0.125rem 0.375rem 0 rgba(var(--m-primary-rgb), 0.35);
}
html.tema-m .btn-primary:hover { background: var(--m-primary-hover); border-color: var(--m-primary-hover); box-shadow: 0 0.25rem 0.75rem 0 rgba(var(--m-primary-rgb), 0.35); }
html.tema-m .btn-secondary,
html.tema-m .btn-ghost {
  background: transparent;
  border: 1px solid var(--m-border-input);
  color: var(--m-heading);
}
html.tema-m .btn-secondary:hover,
html.tema-m .btn-ghost:hover { background: var(--m-hover); border-color: #B4B6BF; color: var(--m-heading); box-shadow: none; }
html.tema-m .btn-danger { background: transparent; border: 1px solid rgba(255, 76, 81, .5); color: #E0353A; }
html.tema-m .btn-danger:hover { background: rgba(255, 76, 81, .08); }

/* ── Isian ── */
html.tema-m .control {
  min-height: 40px;
  border: 1px solid var(--m-border-input);
  border-radius: var(--m-radius);
  background-color: var(--m-paper);
  color: var(--m-heading);
}
html.tema-m .control:hover { border-color: #9EA0AB; }
html.tema-m .control:focus {
  border-color: var(--m-primary);
  box-shadow: 0 0 0 1px var(--m-primary);
  outline: 0;
}
html.tema-m .field-label { color: var(--m-heading); font-size: 0.88rem; font-weight: 500; }
html.tema-m .field-hint,
html.tema-m .status-meta { color: var(--m-muted); }
html.tema-m .error-text { color: #E0353A; }

/* ── Tabel: kepala huruf besar kecil seperti Materialize, isi tebal & jelas, baris tetap rapat ── */
html.tema-m .table-wrap { border-radius: var(--m-radius-card); }
html.tema-m .data-table th {
  padding: 12px 14px;
  background: #F6F6F8;
  border-bottom: 1px solid var(--m-border);
  color: var(--m-heading);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.2px;
  text-transform: uppercase;
}
html.tema-m .data-table td {
  padding: 10px 14px;
  border-bottom: 1px solid #EFEFF2;
  color: var(--m-text);
  font-weight: 500;
}
html.tema-m .data-table tbody tr:hover td { background: #FAFAFB; }
html.tema-m .data-table tfoot th,
html.tema-m .data-table tfoot td { background: #F6F6F8; color: var(--m-heading); font-weight: 600; }

/* ── Badge: gaya "label" Materialize (latar lembut, teks berwarna) ── */
html.tema-m .badge {
  min-height: 24px;
  padding: 0 10px;
  border: 0;
  border-radius: 0.375rem;
  background: rgba(38, 43, 67, 0.08);
  color: var(--m-text);
  font-size: 0.82rem;
  font-weight: 500;
}
html.tema-m .badge::before { display: none; }
html.tema-m .badge-success { background: rgba(86, 202, 0, .16); color: #3E9400; }
html.tema-m .badge-warning { background: rgba(255, 180, 0, .16); color: #B37E00; }
html.tema-m .badge-info { background: rgba(22, 177, 255, .16); color: #0B84C2; }
html.tema-m .badge-danger { background: rgba(255, 76, 81, .16); color: #E0353A; }

/* ── Pemberitahuan ── */
html.tema-m .alert { border: 0; border-radius: var(--m-radius); font-weight: 500; }
html.tema-m .alert-success { background: rgba(86, 202, 0, .16); color: #3E9400; }
html.tema-m .alert-error { background: rgba(255, 76, 81, .16); color: #D42D33; }
html.tema-m .alert-warning { background: rgba(255, 180, 0, .16); color: #9A6C00; }
html.tema-m .alert-info { background: rgba(22, 177, 255, .16); color: #0A77AE; }

/* ── Jendela dialog ── */
html.tema-m .erp-dialog {
  border: 0;
  border-radius: var(--m-radius-card);
  box-shadow: var(--m-shadow-lg);
}
html.tema-m .erp-dialog-title { color: var(--m-heading); font-weight: 600; }

html.tema-m .empty-state { color: var(--m-muted); }
html.tema-m .text-muted,
html.tema-m .muted-text { color: var(--m-muted) !important; }

/* ══ Halaman login — gaya "Login Cover" Materialize: kiri terang + foto + kartu melayang, kanan panel form putih ══ */
html.tema-m .auth-shell { grid-template-columns: minmax(0, 1fr) 460px; background: var(--m-bg); }
html.tema-m .auth-visual {
  position: relative;
  justify-content: flex-start;
  padding: 32px 40px;
  background: var(--m-bg);
  color: var(--m-heading);
}
html.tema-m .auth-visual::after { display: none; }
html.tema-m .auth-visual .auth-copy,
html.tema-m .auth-visual .auth-feature-list,
html.tema-m .auth-visual .auth-footnote { display: none; }
html.tema-m .auth-brand .brand-mark { width: 38px; height: 38px; flex-basis: 38px; border-radius: .5rem; background: var(--m-primary); color: #fff; font-weight: 700; }
html.tema-m .auth-brand .brand-title { color: var(--m-heading); font-size: 1.15rem; font-weight: 600; }
html.tema-m .auth-brand .brand-subtitle { color: var(--m-muted); }
/* Foto apoteker menempel di dasar panel, TANPA bayangan/halo (owner 11 Nov: "bayangan orangnya ngebayang, jelek"). */
html.tema-m .auth-visual > .auth-person {
  right: auto;
  left: 50%;
  bottom: 0;
  height: 86%;
  max-height: 720px;
  transform: translateX(-50%);
  filter: none;
}
html.tema-m .auth-visual {
  overflow: hidden;
  background:
    radial-gradient(1200px 600px at 110% 110%, rgba(var(--m-primary-rgb), .10), transparent 60%),
    radial-gradient(700px 420px at -10% -10%, rgba(22, 177, 255, .07), transparent 60%),
    var(--m-bg);
}
/* Lingkaran latar di BELAKANG foto (bukan bayangan di badan). */
html.tema-m .auth-m-blob {
  position: absolute;
  z-index: 0;
  left: 50%;
  bottom: -22%;
  width: min(62vh, 620px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, rgba(var(--m-primary-rgb), .20), rgba(var(--m-primary-rgb), .07) 62%, transparent 70%);
  transform: translateX(-50%);
}
html.tema-m .auth-m-head { position: relative; z-index: 3; max-width: 460px; margin-top: 7vh; }
html.tema-m .auth-m-head h1 { margin: 0 0 10px; color: var(--m-heading); font-size: 2.3rem; font-weight: 700; line-height: 1.15; letter-spacing: -.02em; }
html.tema-m .auth-m-head p { margin: 0; color: var(--m-text-2); font-size: 1.05rem; line-height: 1.55; }
html.tema-m .auth-visual > .auth-person { left: 64%; z-index: 2; }

html.tema-m .auth-m-float {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px 14px 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 .75rem 2rem rgba(38, 43, 67, .14);
  backdrop-filter: blur(6px);
  color: var(--m-heading);
  animation: authMFloat 6s ease-in-out infinite;
}
html.tema-m .auth-m-float > div { display: grid; gap: 1px; }
html.tema-m .auth-m-float strong { font-size: 1rem; font-weight: 600; }
html.tema-m .auth-m-float small { color: var(--m-muted); font-size: .85rem; }
html.tema-m .auth-m-ic {
  display: grid;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 10px;
  background: var(--m-primary-subtle);
  color: var(--m-primary);
}
html.tema-m .auth-m-ic svg { width: 22px; height: 22px; }
html.tema-m .auth-m-float.is-a { top: 46%; left: 30%; animation-delay: -1s; }
html.tema-m .auth-m-float.is-b { top: 30%; right: 6%; animation-delay: -3s; }
html.tema-m .auth-m-float.is-b .auth-m-ic { background: rgba(255, 180, 0, .16); color: #C98A00; }
html.tema-m .auth-m-float.is-c { bottom: 18%; right: 5%; display: grid; gap: 6px; padding: 14px 16px; animation-delay: -4.5s; }
html.tema-m .auth-m-float.is-c .auth-m-ic { background: rgba(22, 177, 255, .14); color: #0B8FD6; }
html.tema-m .auth-m-c-top { display: flex; align-items: center; gap: 12px; }
html.tema-m .auth-m-chart { width: 190px; height: 58px; margin-top: 4px; color: var(--m-primary); }
@keyframes authMFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@media (prefers-reduced-motion: reduce) { html.tema-m .auth-m-float { animation: none; } }

/* Ajakan unduh aplikasi HP: dua HP + QR, judul berefek, lencana toko (owner 11 Nov 2026). */
html.tema-m .auth-m-apps {
  position: absolute; z-index: 3; left: 40px; bottom: 32px;
  display: grid; grid-template-columns: auto auto; justify-content: start; align-items: end; gap: 12px 18px;
}
html.tema-m .auth-m-dl-hp { position: relative; width: 176px; height: 236px; }
html.tema-m .auth-m-phone {
  position: absolute; width: 104px; aspect-ratio: 500 / 1082; padding: 4px; border-radius: 20px;
  background: linear-gradient(145deg, #2b2f36, #0d0f12);
  box-shadow: 0 18px 36px rgba(12, 92, 73, .28), 0 0 0 1px rgba(255, 255, 255, .06) inset;
  animation: authMHp 5s ease-in-out infinite;
}
html.tema-m .auth-m-phone img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 16px; }
html.tema-m .auth-m-phone::after { content: ""; position: absolute; top: 8px; left: 50%; translate: -50% 0; background: #0d0f12; }
html.tema-m .auth-m-phone.is-android { left: 0; bottom: 0; rotate: -9deg; }
html.tema-m .auth-m-phone.is-android::after { width: 7px; height: 7px; border-radius: 50%; }
html.tema-m .auth-m-phone.is-ios { right: 0; top: 0; z-index: 1; rotate: 7deg; border-radius: 22px; animation-delay: -2.5s; }
html.tema-m .auth-m-phone.is-ios img { border-radius: 18px; }
html.tema-m .auth-m-phone.is-ios::after { width: 30px; height: 9px; border-radius: 9px; }
@keyframes authMHp { 0%, 100% { translate: 0 0; } 50% { translate: 0 -9px; } }

html.tema-m .auth-m-qr {
  position: relative; display: grid; justify-items: center; gap: 6px; width: 118px; padding: 10px 10px 8px;
  overflow: hidden; border-radius: 16px; background: #fff;
  box-shadow: 0 .6rem 1.6rem rgba(38, 43, 67, .16); color: var(--m-heading); font-size: .72rem; font-weight: 700;
}
html.tema-m .auth-m-qr img { display: block; width: 98px; height: 98px; }
html.tema-m .auth-m-qr::after {
  content: ""; position: absolute; left: 8px; right: 8px; top: 10px; height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, transparent, #16B1A0, transparent); box-shadow: 0 0 10px #16B1A0;
  animation: authMScan 2.6s ease-in-out infinite;
}
@keyframes authMScan { 0%, 100% { translate: 0 0; opacity: .9; } 50% { translate: 0 94px; opacity: .5; } }

html.tema-m .auth-m-dl-text { grid-column: 1 / -1; display: grid; justify-items: start; gap: 8px; }
html.tema-m .auth-m-dl-pill {
  display: inline-flex; align-items: center; gap: 7px; padding: 4px 11px; border-radius: 999px;
  background: rgba(12, 92, 73, .1); color: #0C5C49; font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
html.tema-m .auth-m-dl-pill i { width: 7px; height: 7px; border-radius: 50%; background: #16B1A0; animation: authMDenyut 1.6s ease-out infinite; }
@keyframes authMDenyut { 0% { box-shadow: 0 0 0 0 rgba(22, 177, 160, .6); } 100% { box-shadow: 0 0 0 9px rgba(22, 177, 160, 0); } }
html.tema-m .auth-m-dl-title { color: var(--m-heading); font-size: 1.45rem; font-weight: 700; line-height: 1.18; letter-spacing: -.01em; }
html.tema-m .auth-m-dl-title span {
  background: linear-gradient(100deg, #0C5C49 0%, #16B1A0 30%, #E7B341 50%, #16B1A0 70%, #0C5C49 100%);
  background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: authMKilau 4.5s linear infinite;
}
@keyframes authMKilau { from { background-position: 100% 0; } to { background-position: -120% 0; } }
html.tema-m .auth-m-apps > .auth-m-badges { grid-column: 1 / -1; }
html.tema-m .auth-m-badges { display: flex; flex-wrap: wrap; gap: 10px; }
@media (max-height: 860px) {
  html.tema-m .auth-m-dl-hp { width: 150px; height: 198px; }
  html.tema-m .auth-m-phone { width: 88px; border-radius: 17px; }
  html.tema-m .auth-m-qr { width: 104px; }
  html.tema-m .auth-m-qr img { width: 84px; height: 84px; }
  html.tema-m .auth-m-dl-title { font-size: 1.25rem; }
}
@media (max-height: 700px) { html.tema-m .auth-m-dl-hp { display: none; } }
@media (min-width: 1600px) and (min-height: 940px) {
  html.tema-m .auth-m-apps { left: 56px; bottom: 44px; gap: 16px 24px; }
  html.tema-m .auth-m-dl-hp { width: 226px; height: 300px; }
  html.tema-m .auth-m-phone { width: 132px; border-radius: 24px; }
  html.tema-m .auth-m-qr { width: 146px; font-size: .8rem; }
  html.tema-m .auth-m-qr img { width: 124px; height: 124px; }
  html.tema-m .auth-m-dl-title { font-size: 1.9rem; }
}
@media (prefers-reduced-motion: reduce) {
  html.tema-m .auth-m-phone, html.tema-m .auth-m-qr::after, html.tema-m .auth-m-dl-pill i, html.tema-m .auth-m-dl-title span { animation: none; }
}
html.tema-m .auth-m-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 158px;
  height: 50px;
  padding: 0 16px 0 12px;
  border-radius: 10px;
  background: #111317;
  color: #fff;
  text-decoration: none;
  box-shadow: 0 .375rem 1rem rgba(17, 19, 23, .22);
  transition: transform .15s ease, box-shadow .15s ease;
}
html.tema-m .auth-m-badge:hover { transform: translateY(-2px); box-shadow: 0 .6rem 1.4rem rgba(17, 19, 23, .28); color: #fff; }
html.tema-m .auth-m-badge svg { flex: 0 0 26px; width: 26px; height: 26px; }
html.tema-m .auth-m-badge span { display: grid; font-size: 1.05rem; font-weight: 600; line-height: 1.1; letter-spacing: .01em; }
html.tema-m .auth-m-badge small { font-size: .62rem; font-weight: 500; letter-spacing: .08em; opacity: .8; }
html.tema-m .auth-m-apps-mini { display: none; }
@media (max-width: 1280px) {
  html.tema-m .auth-m-float.is-a { left: 22%; }
  html.tema-m .auth-m-head h1 { font-size: 1.9rem; }
}

html.tema-m .auth-panel {
  align-content: center;
  padding: 40px 44px;
  background: var(--m-paper);
  box-shadow: -2px 0 12px rgba(38, 43, 67, .06);
}
html.tema-m .auth-back-link { background: var(--m-bg); color: var(--m-heading); font-weight: 500; }
html.tema-m .auth-back-link:hover { background: var(--m-open); }
html.tema-m .auth-card { gap: 22px; padding: 0; border: 0; background: transparent; box-shadow: none; }
html.tema-m .auth-card-title { color: var(--m-heading); font-size: 1.6rem; font-weight: 600; }
html.tema-m .auth-card-subtitle { color: var(--m-text-2); font-size: 1rem; }
html.tema-m .auth-form { gap: 16px; }
/* Label diganti tulisan di dalam isian (placeholder) seperti template; tetap terbaca pembaca layar. */
html.tema-m .auth-form .field > .field-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
html.tema-m .auth-form .control { min-height: 50px; padding: 0 16px; font-size: 1rem; }
html.tema-m .auth-actions { flex-wrap: wrap; row-gap: 18px; }
html.tema-m .auth-actions .checkbox-row { color: var(--m-text); }
html.tema-m .auth-actions .btn-primary { order: 3; width: 100%; min-height: 44px; font-size: 1rem; }
@media (max-width: 991.98px) {
  html.tema-m .auth-m-apps-mini { display: grid; gap: 10px; justify-items: center; margin-top: 28px; color: var(--m-text-2); font-size: .9rem; }
  html.tema-m .auth-m-apps-mini .auth-m-badges { justify-content: center; }
  html.tema-m .auth-shell { grid-template-columns: 1fr; }
  html.tema-m .auth-visual { display: none; }
  html.tema-m .auth-panel { min-height: 100vh; padding: 32px 24px; box-shadow: none; }
}

/* ══ Buka / gabung shift kasir — sisi kiri terang (bukan biru tua), kartu putih berbayang ══ */
html.tema-m body:has(.cashier-entry-shell) { background: var(--m-bg); font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
html.tema-m .cashier-entry-shell { background: var(--m-bg); color: var(--m-text); }
html.tema-m .cashier-entry-aside {
  padding: 32px 40px;
  background: var(--m-paper);
  color: var(--m-heading);
  box-shadow: 2px 0 12px rgba(38, 43, 67, .06);
}
html.tema-m .cashier-logo-mark { border-radius: .5rem; background: var(--m-primary); color: #fff; font-weight: 700; }
html.tema-m .cashier-logo-text span:first-child { color: var(--m-heading); font-weight: 600; }
html.tema-m .cashier-logo-text span:last-child { color: var(--m-muted); font-weight: 400; }
html.tema-m .cashier-logout { border: 1px solid var(--m-border-input); background: transparent; color: var(--m-heading); font-weight: 500; }
html.tema-m .cashier-logout:hover { background: var(--m-hover); }
html.tema-m .cashier-eyebrow { border: 0; border-radius: .375rem; background: var(--m-primary-subtle); color: var(--m-primary); font-size: .8rem; font-weight: 600; }
html.tema-m .cashier-aside-copy h1 { color: var(--m-heading); font-size: 2rem; font-weight: 600; }
html.tema-m .cashier-aside-copy p { color: var(--m-text-2); font-weight: 400; font-size: 1.05rem; }
html.tema-m .cashier-summary-item { padding: 16px; border: 0; border-radius: var(--m-radius-card); background: var(--m-bg); }
html.tema-m .cashier-summary-item span,
html.tema-m .cashier-summary-item small { color: var(--m-muted); }
html.tema-m .cashier-summary-item strong { color: var(--m-heading); font-size: 1.05rem; font-weight: 600; }
html.tema-m .cashier-summary-item.is-primary { background: var(--m-primary-subtle); }
html.tema-m .cashier-summary-item.is-primary strong { color: var(--m-primary); }
html.tema-m .cashier-entry-workspace { padding: 32px; }
html.tema-m .cashier-shift-card {
  width: min(100%, 600px);
  padding: 26px;
  border: 0;
  border-radius: var(--m-radius-card);
  background: var(--m-paper);
  box-shadow: var(--m-shadow);
}
html.tema-m .cashier-card-heading h2 { color: var(--m-heading); font-size: 1.35rem; font-weight: 600; }

/* ══ Bilah atas seperti navbar Materialize: tombol IKON bulat tanpa tulisan (tulisan tetap jadi tooltip/title) ══ */
html.tema-m .topbar-right { gap: 4px; }
html.tema-m .topbar-right .icon-button,
html.tema-m .topbar-right .qris-header-button,
html.tema-m .topbar-right .cashier-close-button,
html.tema-m .topbar-right .ui-try-button {
  width: 40px;
  min-width: 40px;
  height: 40px;
  min-height: 40px;
  padding: 0 !important;
  justify-content: center;
  border: 0 !important;
  border-radius: 50% !important;
  background: transparent !important;
  color: var(--m-heading) !important;
}
html.tema-m .topbar-right .icon-button > span:not(.avatar):not([class*=badge]):not([class*=dot]) { display: none; }
html.tema-m .topbar-right .icon-button svg { width: 22px; height: 22px; stroke-width: 1.7; }
html.tema-m .topbar-right .icon-button:hover { background: var(--m-hover) !important; }
html.tema-m .user-chip { margin-left: 6px; padding: 0; border: 0; background: transparent; }
html.tema-m .user-chip .avatar { width: 40px; height: 40px; font-size: .9rem; box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--m-primary-subtle); }
html.tema-m .user-chip .user-meta { display: none; }
html.tema-m .topbar-title { padding-left: 4px; }
html.tema-m .page-kicker { max-width: 520px; }

/* ══ Halaman menu (Tampilan Sederhana: Produk & Stok, Penjualan, dst.) & Beranda — komponen kartu Materialize ══ */
html.tema-m .sb-wrap { gap: 24px; color: var(--m-text); }
html.tema-m .sb-h1 { color: var(--m-heading); font-size: 1.6rem; font-weight: 600; }
html.tema-m .sb-h2 { margin-bottom: 14px; color: var(--m-heading); font-size: 1.15rem; font-weight: 600; }
html.tema-m .sb-sub,
html.tema-m .sb-muted { color: var(--m-text-2); }
html.tema-m .sb-card { padding: 20px 24px; border: 0; border-radius: var(--m-radius-card); background: var(--m-paper); box-shadow: var(--m-shadow); }
html.tema-m .sb-tiles { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; }
html.tema-m .sb-wrap .sb-tile {
  align-items: flex-start;
  gap: 16px;
  min-height: 0;
  padding: 20px;
  border: 0;
  border-radius: var(--m-radius-card);
  background: var(--m-paper);
  box-shadow: var(--m-shadow);
  color: var(--m-heading);
  transition: box-shadow .2s ease, transform .2s ease;
}
html.tema-m .sb-wrap .sb-tile:hover { border: 0; box-shadow: var(--m-shadow-lg); transform: translateY(-2px); }
/* Ikon dalam kotak warna lembut (avatar "bg-label-*" Materialize), warnanya bergiliran supaya tidak serba hijau. */
html.tema-m .sb-wrap .sb-tile > svg {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  padding: 10px;
  border-radius: .5rem;
  background: rgba(var(--m-primary-rgb), .12);
  color: var(--m-primary);
  stroke-width: 1.8;
}
html.tema-m .sb-wrap .sb-tile:nth-child(6n+2) > svg { background: rgba(22, 177, 255, .14); color: #0B8FD6; }
html.tema-m .sb-wrap .sb-tile:nth-child(6n+3) > svg { background: rgba(255, 180, 0, .16); color: #C98A00; }
html.tema-m .sb-wrap .sb-tile:nth-child(6n+4) > svg { background: rgba(102, 108, 255, .14); color: #5A5FE0; }
html.tema-m .sb-wrap .sb-tile:nth-child(6n+5) > svg { background: rgba(255, 76, 81, .13); color: #E0353A; }
html.tema-m .sb-wrap .sb-tile:nth-child(6n+6) > svg { background: rgba(86, 202, 0, .15); color: #3E9400; }
html.tema-m .sb-wrap .sb-tile strong { margin-top: 2px; color: var(--m-heading); font-size: 1.02rem; font-weight: 600; }
html.tema-m .sb-wrap .sb-tile span:not(.sb-badge) {
  display: -webkit-box;
  margin-top: 4px;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  color: var(--m-text-2);
  font-size: .88rem;
  font-weight: 400;
  line-height: 1.45;
}
/* Kartu kecil di "Lainnya": baris ikon + judul, tanpa garis. */
html.tema-m .sb-wrap .sb-tile.is-small { align-items: center; gap: 12px; padding: 12px 14px; box-shadow: none; background: var(--m-bg); }
html.tema-m .sb-wrap .sb-tile.is-small:hover { background: var(--m-open); box-shadow: none; transform: none; }
html.tema-m .sb-wrap .sb-tile.is-small > svg { flex-basis: 36px; width: 36px; height: 36px; padding: 8px; }
html.tema-m .sb-wrap .sb-tile.is-small strong { margin: 0; font-size: .95rem; font-weight: 500; }
html.tema-m .sb-card .sb-tiles { gap: 12px; }
html.tema-m .sb-group-title { margin: 22px 0 10px; color: var(--m-muted); font-size: .78rem; font-weight: 600; letter-spacing: .06em; }
/* Kartu utama Beranda ("Mulai jual"): isi warna utama seperti tombol besar Materialize. */
html.tema-m .sb-wrap .sb-tile.is-main { background: var(--m-primary); box-shadow: 0 .25rem .875rem rgba(var(--m-primary-rgb), .4); }
html.tema-m .sb-wrap .sb-tile.is-main > svg { background: rgba(255, 255, 255, .18) !important; color: #fff !important; }
html.tema-m .sb-wrap .sb-tile.is-main strong,
html.tema-m .sb-wrap .sb-tile.is-main span:not(.sb-badge) { color: #fff; }
html.tema-m .sb-badge { border-radius: .375rem; background: rgba(255, 76, 81, .14); color: #E0353A; font-weight: 600; }
html.tema-m .sb-attn { border-top-color: var(--m-border); color: var(--m-text); }
html.tema-m .sb-attn-go { color: var(--m-primary); font-weight: 600; }
html.tema-m .sb-big { color: var(--m-heading); font-weight: 600; }
html.tema-m .sb-chip { border: 0; border-radius: .5rem; background: var(--m-paper); box-shadow: var(--m-shadow-xs); color: var(--m-heading); font-weight: 500; }
html.tema-m .sb-chip:hover { background: var(--m-primary-subtle); color: var(--m-primary); }

/* Kotak cari di halaman menu: putih berbayang, bukan garis hijau tebal. */
html.tema-m .ms-field { min-height: 50px; border: 0; border-radius: var(--m-radius); background: var(--m-paper); box-shadow: var(--m-shadow-sm); }
html.tema-m .ms-field:focus-within { box-shadow: 0 0 0 2px var(--m-primary), var(--m-shadow-sm); }
html.tema-m .ms-field svg { color: var(--m-muted); }
html.tema-m .ms-results { border: 0; border-radius: var(--m-radius-card); box-shadow: var(--m-shadow); }
html.tema-m .ms-result { border-color: var(--m-border); border-radius: var(--m-radius); }

/* ══ Isian seragam (owner 11 Nov: baris saringan "jelek banget") — semua kotak isian satu tinggi, satu garis, satu huruf ══ */
html.tema-m input.control:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=color]),
html.tema-m select.control {
  height: 40px;
  min-height: 40px;
  padding: 0 12px;
  font-size: .95rem;
  line-height: 38px;
}
/* Pilihan (select): tampilan sendiri, bukan tampilan bawaan Safari/Chrome yang lebih pendek. */
html.tema-m select.control:not([multiple]) {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23676A7B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px 16px;
}
html.tema-m select.control[multiple] { height: auto; line-height: 1.4; padding: 6px 10px; }
/* Tanggal: angka terbaca jelas (dulu pudar di Safari), ikon kalender abu-abu. */
html.tema-m input.control[type=date],
html.tema-m input.control[type=month],
html.tema-m input.control[type=time],
html.tema-m input.control[type=datetime-local] { color: var(--m-heading); }
html.tema-m input.control::-webkit-datetime-edit,
html.tema-m input.control::-webkit-datetime-edit-day-field,
html.tema-m input.control::-webkit-datetime-edit-month-field,
html.tema-m input.control::-webkit-datetime-edit-year-field,
html.tema-m input.control::-webkit-datetime-edit-text { color: var(--m-heading); }
html.tema-m input.control::-webkit-calendar-picker-indicator { opacity: .55; cursor: pointer; }
html.tema-m input.control::placeholder { color: #A8AAB4; }
html.tema-m textarea.control { padding: 10px 12px; line-height: 1.5; }
/* Fokus: garis hijau tipis + cincin halus, sama untuk semua jenis isian. */
html.tema-m .control:focus,
html.tema-m .control:focus-visible { border-color: var(--m-primary); box-shadow: 0 0 0 3px rgba(var(--m-primary-rgb), .14); outline: 0; }
/* Label sebaris ("Dari", "Sampai") dalam baris saringan: rata tengah, kecil, abu-abu. */
html.tema-m .toolbar { gap: 12px; }
html.tema-m .toolbar-group { gap: 10px; }
html.tema-m .field.inline-field { display: inline-flex; flex-direction: row; align-items: center; gap: 8px; margin: 0; }
html.tema-m .field.inline-field > .field-label { margin: 0; color: var(--m-text-2); font-size: .88rem; font-weight: 500; white-space: nowrap; }
html.tema-m .field.inline-field > .control { width: auto; min-width: 150px; }
html.tema-m .toolbar .btn { min-height: 40px; }

/* ══ Kartu angka (Dashboard & laporan) — gaya kartu statistik Materialize: ikon berwarna, angka besar, label, catatan ══ */
html.tema-m .grid { gap: 24px; }
html.tema-m .metric-card { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 20px 22px; }
html.tema-m .metric-card .metric-top { display: contents; }
html.tema-m .metric-card .metric-icon {
  order: -1;
  display: grid;
  width: 44px;
  height: 44px;
  margin-bottom: 12px;
  place-items: center;
  border-radius: .5rem !important;
}
html.tema-m .metric-card .metric-icon svg { width: 24px; height: 24px; }
html.tema-m .grid > .metric-card:nth-child(4n+2) .metric-icon { background: rgba(22, 177, 255, .14) !important; color: #0B8FD6 !important; }
html.tema-m .grid > .metric-card:nth-child(4n+3) .metric-icon { background: rgba(255, 180, 0, .16) !important; color: #C98A00 !important; }
html.tema-m .grid > .metric-card:nth-child(4n+4) .metric-icon { background: rgba(102, 108, 255, .14) !important; color: #5A5FE0 !important; }
html.tema-m .metric-card .metric-value { order: 1; color: var(--m-heading); font-size: 1.6rem; font-weight: 600; line-height: 1.2; letter-spacing: -.01em; }
html.tema-m .metric-card .metric-label { order: 2; color: var(--m-heading); font-size: .95rem; font-weight: 500; }
html.tema-m .metric-card .metric-note { order: 3; margin-top: 6px; color: var(--m-muted); font-size: .85rem; line-height: 1.45; }
html.tema-m .metric-card > :not(.metric-top):not(.metric-value):not(.metric-note) { order: 4; }

/* Kartu panel bertingkat (judul + isi) di Dashboard: judul tebal tanpa garis tebal, tombol kanan sejajar. */
html.tema-m .panel-header { gap: 12px; }
html.tema-m details.panel > summary { padding: 14px 20px; color: var(--m-text-2); font-weight: 500; cursor: pointer; }

/* ══ Faktur Beli / SP (form pembelian) ══ */
/* Bilah Kembali / Simpan: kartu lengket TEPAT di bawah bilah atas (dulu menimpanya). */
html.tema-m .purchase-actionbar {
  top: calc(var(--topbar-height) + 8px);
  padding: 10px 14px;
  border: 0;
  border-radius: var(--m-radius-card);
  background: rgba(255, 255, 255, .96);
  box-shadow: var(--m-shadow-sm);
  backdrop-filter: blur(6px);
}
/* Baris isian barang: netral (dulu hijau muda), tombol "Riwayat beli" jadi tautan kecil. */
html.tema-m .purchase-entry-row td { background: #FAFAFB; color: var(--m-text); border-bottom: 1px dashed var(--m-border); }
html.tema-m .purchase-entry-row .btn-ghost { min-height: 30px; border: 0; background: transparent; color: var(--m-primary); font-weight: 500; }
html.tema-m .purchase-entry-row .btn-ghost:hover { background: var(--m-primary-subtle); }
html.tema-m .purchase-line-table td { padding: 10px 10px; }
html.tema-m .purchase-line-table th { padding: 12px 10px; }
/* Kotak TOTAL: kartu ringkasan Materialize — latar lembut warna utama, angka besar, tanpa garis kiri. */
html.tema-m .purchase-total-box {
  min-height: 0;
  padding: 18px 20px;
  border: 0 !important;
  border-radius: var(--m-radius-card);
  background: var(--m-primary-subtle);
  box-shadow: none;
}
html.tema-m .purchase-total-box span { color: var(--m-text-2); font-size: .8rem; font-weight: 600; letter-spacing: .06em; }
html.tema-m .purchase-total-box strong { color: var(--m-primary); font-size: 1.9rem; font-weight: 700; letter-spacing: -.01em; }
/* Imbuhan isian ("Rp", "%", "hari"): kotak abu-abu Materialize. */
html.tema-m .input-addon,
html.tema-m .input-prefix,
html.tema-m .input-suffix { border-color: var(--m-border-input); background: #F2F2F5; color: var(--m-text-2); }
/* Penyesuaian login: judul tak tertimpa foto, kartu Laporan rapi. */
html.tema-m .auth-m-head { max-width: min(40%, 440px); }
html.tema-m .auth-visual > .auth-person { left: 66%; }
html.tema-m .auth-m-float > .auth-m-c-top { display: flex; align-items: center; gap: 12px; }
html.tema-m .auth-m-c-top > div { display: grid; gap: 1px; }
html.tema-m .auth-m-float.is-a { top: 50%; left: 36%; }
html.tema-m .auth-m-blob { left: 66%; }

/* ══ Panduan langkah (onboarding.js) — gaya "Tour" Materialize ══ */
html.tema-m .onb-spot { border-radius: var(--m-radius-card, .625rem); box-shadow: 0 0 0 9999px rgba(38, 43, 67, .5); }
html.tema-m .onb-spot.onb-pulse { outline: 2px solid var(--m-primary, #0C5C49); outline-offset: 3px; }
html.tema-m .onb-card {
  width: 340px;
  padding: 20px 22px 18px;
  border-radius: .625rem;
  box-shadow: 0 .375rem 1.25rem rgba(38, 43, 67, .22);
  color: #3B4055;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 14px;
}
html.tema-m .onb-card .onb-step {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  border-radius: .375rem;
  background: rgba(12, 92, 73, .12);
  color: #0C5C49;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .04em;
}
html.tema-m .onb-card .onb-title { margin: 12px 0 6px; color: #262B43; font-size: 17px; font-weight: 600; }
html.tema-m .onb-card .onb-text { color: #676A7B; font-size: 14px; line-height: 1.55; }
html.tema-m .onb-card .onb-foot { margin-top: 18px; }
html.tema-m .onb-btn { height: 34px; padding: 0 16px; border-radius: .5rem; font-size: 13.5px; font-weight: 500; }
html.tema-m .onb-btn-primary { background: #0C5C49; box-shadow: 0 .125rem .375rem rgba(12, 92, 73, .35); }
html.tema-m .onb-btn-primary:hover { background: #0A4D3D; }
html.tema-m .onb-btn-ghost { background: rgba(38, 43, 67, .08); color: #3B4055; }
html.tema-m .onb-btn-ghost:hover { background: rgba(38, 43, 67, .14); color: #262B43; }
/* "Lewati" jadi tombol abu-abu kecil (dulu tulisan bergaris bawah). */
html.tema-m .onb-skip { height: 34px; padding: 0 14px; border-radius: .5rem; background: rgba(38, 43, 67, .08); color: #676A7B; font-size: 13.5px; font-weight: 500; text-decoration: none; }
html.tema-m .onb-skip:hover { background: rgba(255, 76, 81, .12); color: #E0353A; }
html.tema-m .onb-dontshow { margin-top: 14px; padding-top: 12px; border-top: 1px solid #EFEFF2; color: #8A8D9B; font-size: 12.5px; }
html.tema-m .onb-dontshow input { accent-color: #0C5C49; }

/* ══ Laporan & SP (owner 11 Nov: "lanjut SP sama laporan") ══ */
/* Ikon kartu angka yang berupa huruf/emoji ("#", "Rp", "P", "!") → ikon garis seragam, warnanya bergiliran di semua halaman. */
html.tema-m .metric-card:nth-child(4n+2) .metric-icon { background: rgba(22, 177, 255, .14) !important; color: #0B8FD6 !important; }
html.tema-m .metric-card:nth-child(4n+3) .metric-icon { background: rgba(255, 180, 0, .16) !important; color: #C98A00 !important; }
html.tema-m .metric-card:nth-child(4n+4) .metric-icon { background: rgba(102, 108, 255, .14) !important; color: #5A5FE0 !important; }
html.tema-m .metric-card .metric-icon:not(:has(svg)) { font-size: 0 !important; }
html.tema-m .metric-card .metric-icon:not(:has(svg))::before {
  width: 22px;
  height: 22px;
  background-color: currentColor;
  content: "";
  -webkit-mask: var(--m-ikon) center / contain no-repeat;
  mask: var(--m-ikon) center / contain no-repeat;
}
html.tema-m .metric-card .metric-icon { --m-ikon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20V10M10 20V4M16 20v-7M22 20H2'/%3E%3C/svg%3E"); }
html.tema-m .metric-card:nth-child(4n+2) .metric-icon { --m-ikon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 8 12 3 3 8v8l9 5 9-5z'/%3E%3Cpath d='M3 8l9 5 9-5M12 13v8'/%3E%3C/svg%3E"); }
html.tema-m .metric-card:nth-child(4n+3) .metric-icon { --m-ikon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='6' width='20' height='13' rx='2'/%3E%3Ccircle cx='12' cy='12.5' r='2.5'/%3E%3Cpath d='M6 10v.01M18 15v.01'/%3E%3C/svg%3E"); }
html.tema-m .metric-card:nth-child(4n+4) .metric-icon { --m-ikon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 17l6-6 4 4 8-8'/%3E%3Cpath d='M14 7h7v7'/%3E%3C/svg%3E"); }

/* Tabel laporan: baris lebih rapat; keterangan kecil di bawah angka/nama tidak memakan tempat. */
html.tema-m .data-table td { line-height: 1.35; }
html.tema-m .data-table td .status-meta { font-size: .8rem; line-height: 1.3; }
html.tema-m .data-table td strong { color: var(--m-heading); font-weight: 600; }

/* Tab laporan (Dashboard / Detail): gaya "nav-pills" Materialize. */
html.tema-m .report-tabs a,
html.tema-m .report-tabs button,
html.tema-m [role="tablist"] > a,
html.tema-m [role="tablist"] > button { border-radius: .5rem; font-weight: 500; }

/* Kotak keterangan biru di laporan: gaya "alert" lembut tanpa garis. */
html.tema-m .alert-info,
html.tema-m .info-note { border: 0 !important; border-radius: var(--m-radius); background: rgba(22, 177, 255, .12) !important; color: #0A6FA3 !important; }

/* Pilihan sempit di baris tabel isian (Satuan di SP/Faktur): panah lebih rapat supaya teks tak tertutup. */
html.tema-m .purchase-line-table select.control,
html.tema-m .data-table td select.control { padding-left: 8px; padding-right: 24px; background-position: right 6px center; background-size: 14px 14px; }

/* ══ Tab modul di atas halaman (opsi D, gaya Xero) — menggantikan halaman kotak-kotak ══ */
html.tema-m .m-tabs {
  display: flex;
  align-items: stretch;
  gap: 4px;
  margin: 14px 24px 0;
  padding: 0 8px 0 18px;
  border-radius: var(--m-radius-card);
  background: var(--m-paper);
  box-shadow: var(--m-shadow-sm);
}
html.tema-m .m-tabs-modul {
  display: flex;
  align-items: center;
  margin-right: 10px;
  padding-right: 16px;
  border-right: 1px solid var(--m-border);
  color: var(--m-heading);
  font-size: 1rem;
  font-weight: 600;
  white-space: nowrap;
}
html.tema-m .m-tabs-list { display: flex; flex: 1; min-width: 0; overflow: hidden; }
html.tema-m .m-tab[hidden] { display: none; }
html.tema-m .m-tabs-lain[hidden] { display: none; }
html.tema-m .m-tabs-lebih { display: grid; }
html.tema-m .m-tabs-lebih:empty { display: none; }
html.tema-m .m-tabs-lebih.ada { margin-bottom: 6px; padding-bottom: 6px; border-bottom: 1px solid var(--m-border); }
html.tema-m .m-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 50px;
  padding: 0 14px;
  color: var(--m-text-2);
  font-size: .95rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}
html.tema-m .m-tab:hover { color: var(--m-heading); }
html.tema-m .m-tab.is-active { color: var(--m-primary); }
html.tema-m .m-tab.is-active::after {
  position: absolute;
  right: 10px;
  bottom: 0;
  left: 10px;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: var(--m-primary);
  content: "";
}
html.tema-m .m-tab-badge { padding: 1px 7px; border-radius: .375rem; background: rgba(255, 76, 81, .14); color: #E0353A; font-size: .75rem; font-weight: 600; }
html.tema-m .m-tabs-lain { position: relative; display: flex; align-items: center; }
html.tema-m .m-tabs-lain > summary {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 36px;
  padding: 0 12px;
  border-radius: .5rem;
  color: var(--m-heading);
  font-weight: 500;
  list-style: none;
  cursor: pointer;
}
html.tema-m .m-tabs-lain > summary::-webkit-details-marker { display: none; }
html.tema-m .m-tabs-lain > summary svg { width: 16px; height: 16px; }
html.tema-m .m-tabs-lain[open] > summary,
html.tema-m .m-tabs-lain > summary:hover { background: var(--m-hover); }
html.tema-m .m-tabs-menu {
  position: absolute;
  top: calc(100% - 4px);
  right: 0;
  z-index: 50;
  display: grid;
  min-width: 240px;
  max-height: 70vh;
  overflow-y: auto;
  padding: 8px;
  border-radius: var(--m-radius-card);
  background: var(--m-paper);
  box-shadow: var(--m-shadow-lg);
}
html.tema-m .m-tabs-menu a { padding: 9px 12px; border-radius: .375rem; color: var(--m-heading); text-decoration: none; }
html.tema-m .m-tabs-menu a:hover { background: var(--m-primary-subtle); color: var(--m-primary); }
html.tema-m .m-tabs-grup { padding: 10px 12px 4px; color: var(--m-muted); font-size: .75rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
/* Judul halaman di bilah atas tetap; jarak isi di bawah tab sedikit dirapatkan. */
html.tema-m .m-tabs + .content,
html.tema-m .m-tabs ~ .content { padding-top: 18px; }
@media (max-width: 840px) {
  html.tema-m .m-tabs { margin: 10px 12px 0; padding-left: 12px; }
  html.tema-m .m-tabs-modul { display: none; }
}

/* ══ Ikon Remix Icon (dari template Materialize, assets/vendor/fonts/iconify-icons.css) — menu samping & bilah atas ══
   Ikon garis lama disembunyikan; ikon template dipasang sebagai masker CSS (warna ikut teks). Dibuat skrip dari berkas template. */
html.tema-m .erp-sidebar a.nav-link[href$="/beranda"] { --m-ri: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M6 19h12V9.157l-6-5.454l-6 5.454zm13 2H5a1 1 0 0 1-1-1v-9H1l10.327-9.388a1 1 0 0 1 1.346 0L23 11h-3v9a1 1 0 0 1-1 1M7.5 13h2a2.5 2.5 0 0 0 5 0h2a4.5 4.5 0 1 1-9 0'/%3E%3C/svg%3E"); }
html.tema-m .erp-sidebar a.nav-link[href$="/konsultan-ai"] { --m-ri: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M13.5 2c0 .444-.193.843-.5 1.118V5h5a3 3 0 0 1 3 3v10a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3V8a3 3 0 0 1 3-3h5V3.118A1.5 1.5 0 1 1 13.5 2M6 7a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V8a1 1 0 0 0-1-1zm-4 3H0v6h2zm20 0h2v6h-2zM9 14.5a1.5 1.5 0 1 0 0-3a1.5 1.5 0 0 0 0 3m6 0a1.5 1.5 0 1 0 0-3a1.5 1.5 0 0 0 0 3'/%3E%3C/svg%3E"); }
html.tema-m .erp-sidebar a.nav-link[href$="/menu/kasir"] { --m-ri: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M4.004 6.417L.762 3.174L2.176 1.76l3.243 3.243H20.66a1 1 0 0 1 .958 1.287l-2.4 8a1 1 0 0 1-.958.713H6.004v2h11v2h-12a1 1 0 0 1-1-1zm2 .586v6h11.512l1.8-6zm-.5 16a1.5 1.5 0 1 1 0-3a1.5 1.5 0 0 1 0 3m12 0a1.5 1.5 0 1 1 0-3a1.5 1.5 0 0 1 0 3'/%3E%3C/svg%3E"); }
html.tema-m .erp-sidebar a.nav-link[href$="/menu/penjualan"] { --m-ri: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M19 22H5a3 3 0 0 1-3-3V3a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v12h4v4a3 3 0 0 1-3 3m-1-5v2a1 1 0 1 0 2 0v-2zm-2 3V4H4v15a1 1 0 0 0 1 1zM6 7h8v2H6zm0 4h8v2H6zm0 4h5v2H6z'/%3E%3C/svg%3E"); }
html.tema-m .erp-sidebar a.nav-link[href$="/menu/pbf"] { --m-ri: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M8.965 18a3.5 3.5 0 0 1-6.93 0H1V6a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v2h3l3 4.056V18h-2.035a3.501 3.501 0 0 1-6.93 0zM15 7H3v8.05a3.5 3.5 0 0 1 5.663.95h5.674c.168-.353.393-.674.663-.95zm2 6h4v-.285L18.992 10H17zm.5 6a1.5 1.5 0 1 0 0-3.001a1.5 1.5 0 0 0 0 3.001M7 17.5a1.5 1.5 0 1 0-3 0a1.5 1.5 0 0 0 3 0'/%3E%3C/svg%3E"); }
html.tema-m .erp-sidebar a.nav-link[href$="/menu/klinik"] { --m-ri: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M8 20v-6h8v6h3V4H5v16zm2 0h4v-4h-4zm11 0h2v2H1v-2h2V3a1 1 0 0 1 1-1h16a1 1 0 0 1 1 1zM11 8V6h2v2h2v2h-2v2h-2v-2H9V8z'/%3E%3C/svg%3E"); }
html.tema-m .erp-sidebar a.nav-link[href$="/menu/pembelian"] { --m-ri: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M6.505 2h11a1 1 0 0 1 .8.4l2.7 3.6v15a1 1 0 0 1-1 1h-16a1 1 0 0 1-1-1V6l2.7-3.6a1 1 0 0 1 .8-.4m12.5 6h-14v12h14zm-.5-2l-1.5-2h-10l-1.5 2zm-9.5 4v2a3 3 0 1 0 6 0v-2h2v2a5 5 0 0 1-10 0v-2z'/%3E%3C/svg%3E"); }
html.tema-m .erp-sidebar a.nav-link[href$="/menu/produk"] { --m-ri: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M19.779 4.222a6 6 0 0 1 0 8.485l-7.071 7.071a6 6 0 0 1-8.486-8.485l7.071-7.071a6 6 0 0 1 8.486 0m-5.657 11.313L8.466 9.878l-2.83 2.83a4 4 0 0 0 5.657 5.656zm4.242-9.899a4 4 0 0 0-5.657 0L9.88 8.464l5.657 5.657l2.827-2.828a4 4 0 0 0 0-5.657'/%3E%3C/svg%3E"); }
html.tema-m .erp-sidebar a.nav-link[href$="/menu/laporan"] { --m-ri: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M3 3h18a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1m1 2v14h16V5zm3 8h2v4H7zm4-6h2v10h-2zm4 3h2v7h-2z'/%3E%3C/svg%3E"); }
html.tema-m .erp-sidebar a.nav-link[href$="/menu/inventori"] { --m-ri: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M4 5h16V3H4zm16 4H4V7h16zM3 11h7v2h4v-2h7v9a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1zm13 2v2H8v-2H5v6h14v-6z'/%3E%3C/svg%3E"); }
html.tema-m .erp-sidebar a.nav-link[href$="/menu/akuntansi"] { --m-ri: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M4 2h16a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1m1 2v16h14V4zm2 2h10v4H7zm0 6h2v2H7zm0 4h2v2H7zm4-4h2v2h-2zm0 4h2v2h-2zm4-4h2v6h-2z'/%3E%3C/svg%3E"); }
html.tema-m .erp-sidebar a.nav-link[href$="/menu/hr"] { --m-ri: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M12 11a5 5 0 0 1 5 5v6h-2v-6a3 3 0 0 0-2.824-2.995L12 13a3 3 0 0 0-2.995 2.824L9 16v6H7v-6a5 5 0 0 1 5-5m-6.5 3q.42.001.81.094a6 6 0 0 0-.301 1.575L6 16v.086a1.5 1.5 0 0 0-.356-.08L5.5 16a1.5 1.5 0 0 0-1.493 1.355L4 17.5V22H2v-4.5A3.5 3.5 0 0 1 5.5 14m13 0a3.5 3.5 0 0 1 3.5 3.5V22h-2v-4.5a1.5 1.5 0 0 0-1.355-1.493L18.5 16q-.264.001-.5.085V16c0-.666-.108-1.306-.308-1.904c.258-.063.53-.096.808-.096m-13-6a2.5 2.5 0 1 1 0 5a2.5 2.5 0 0 1 0-5m13 0a2.5 2.5 0 1 1 0 5a2.5 2.5 0 0 1 0-5m-13 2a.5.5 0 1 0 0 1a.5.5 0 0 0 0-1m13 0a.5.5 0 1 0 0 1a.5.5 0 0 0 0-1M12 2a4 4 0 1 1 0 8a4 4 0 0 1 0-8m0 2a2 2 0 1 0 0 4a2 2 0 0 0 0-4'/%3E%3C/svg%3E"); }
html.tema-m .erp-sidebar a.nav-link[href$="/menu/pengaturan"] { --m-ri: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M2 12c0-.865.11-1.704.316-2.504A3 3 0 0 0 4.99 4.867a10 10 0 0 1 4.335-2.506a3 3 0 0 0 5.348 0a10 10 0 0 1 4.335 2.506a3 3 0 0 0 2.675 4.63c.206.8.316 1.638.316 2.503c0 .864-.11 1.703-.316 2.503a3 3 0 0 0-2.675 4.63a10 10 0 0 1-4.335 2.505a3 3 0 0 0-5.348 0a10 10 0 0 1-4.335-2.505a3 3 0 0 0-2.675-4.63C2.11 13.703 2 12.864 2 12m4.804 3c.63 1.091.81 2.346.564 3.524q.613.436 1.297.75A5 5 0 0 1 12 18c1.26 0 2.438.471 3.335 1.274q.684-.314 1.297-.75A5 5 0 0 1 17.196 15a5 5 0 0 1 2.77-2.25a8 8 0 0 0 0-1.5A5 5 0 0 1 17.196 9a5 5 0 0 1-.564-3.524a8 8 0 0 0-1.297-.75A5 5 0 0 1 12 6a5 5 0 0 1-3.335-1.274a8 8 0 0 0-1.297.75A5 5 0 0 1 6.804 9a5 5 0 0 1-2.77 2.25a8 8 0 0 0 0 1.5A5 5 0 0 1 6.805 15M12 15a3 3 0 1 1 0-6a3 3 0 0 1 0 6m0-2a1 1 0 1 0 0-2a1 1 0 0 0 0 2'/%3E%3C/svg%3E"); }
html.tema-m .erp-sidebar a.nav-link[href$="/pelatihan"] { --m-ri: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M4 11.333L0 9l12-7l12 7v8.5h-2v-7.333l-2 1.166v6.678l-.223.275A9.98 9.98 0 0 1 12 22a9.98 9.98 0 0 1-7.777-3.714L4 18.011zM6 12.5v4.792A7.98 7.98 0 0 0 12 20a7.98 7.98 0 0 0 6-2.708V12.5L12 16zM3.97 9L12 13.685L20.03 9L12 4.315z'/%3E%3C/svg%3E"); }
html.tema-m .erp-sidebar a.nav-link[href$="/training"] { --m-ri: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M12.382 3a1 1 0 0 1 .894.553L14 5h6a1 1 0 0 1 1 1v11a1 1 0 0 1-1 1h-6.382a1 1 0 0 1-.894-.553L12 16H5v6H3V3zm-.618 2H5v9h8.236l1 2H19V7h-6.236z'/%3E%3C/svg%3E"); }
html.tema-m .topbar .logout-button { --m-ri: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M5 22a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v3h-2V4H6v16h12v-2h2v3a1 1 0 0 1-1 1zm13-6v-3h-7v-2h7V8l5 4z'/%3E%3C/svg%3E"); }
html.tema-m .topbar .onb-help { --m-ri: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10s-4.477 10-10 10m0-2a8 8 0 1 0 0-16a8 8 0 0 0 0 16m-1-5h2v2h-2zm2-1.645V14h-2v-1.5a1 1 0 0 1 1-1a1.5 1.5 0 1 0-1.471-1.794l-1.962-.393A3.501 3.501 0 1 1 13 13.355'/%3E%3C/svg%3E"); }
html.tema-m .topbar .qris-header-button { --m-ri: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M16 17v-1h-3v-3h3v2h2v2h-1v2h-2v2h-2v-3h2v-1zm5 4h-4v-2h2v-2h2zM3 3h8v8H3zm2 2v4h4V5zm8-2h8v8h-8zm2 2v4h4V5zM3 13h8v8H3zm2 2v4h4v-4zm13-2h3v2h-3zM6 6h2v2H6zm0 10h2v2H6zM16 6h2v2h-2z'/%3E%3C/svg%3E"); }
html.tema-m .topbar .cashier-close-button { --m-ri: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M22.005 7h1v10h-1v3a1 1 0 0 1-1 1h-18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h18a1 1 0 0 1 1 1zm-2 10h-6a5 5 0 0 1 0-10h6V5h-16v14h16zm1-2V9h-7a3 3 0 1 0 0 6zm-7-4h3v2h-3z'/%3E%3C/svg%3E"); }
html.tema-m .topbar .ui-try-button { --m-ri: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='m5.828 7l2.536 2.535L6.95 10.95L2 6l4.95-4.95l1.414 1.415L5.828 5H13a8 8 0 1 1 0 16H4v-2h9a6 6 0 0 0 0-12z'/%3E%3C/svg%3E"); }
html.tema-m .topbar [data-sidebar-toggle] { --m-ri: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M3 4h18v2H3zm0 7h18v2H3zm0 7h18v2H3z'/%3E%3C/svg%3E"); }
html.tema-m .erp-sidebar a.nav-link[href$="/beranda"] > svg,
html.tema-m .erp-sidebar a.nav-link[href$="/konsultan-ai"] > svg,
html.tema-m .erp-sidebar a.nav-link[href$="/menu/kasir"] > svg,
html.tema-m .erp-sidebar a.nav-link[href$="/menu/penjualan"] > svg,
html.tema-m .erp-sidebar a.nav-link[href$="/menu/pbf"] > svg,
html.tema-m .erp-sidebar a.nav-link[href$="/menu/klinik"] > svg,
html.tema-m .erp-sidebar a.nav-link[href$="/menu/pembelian"] > svg,
html.tema-m .erp-sidebar a.nav-link[href$="/menu/produk"] > svg,
html.tema-m .erp-sidebar a.nav-link[href$="/menu/laporan"] > svg,
html.tema-m .erp-sidebar a.nav-link[href$="/menu/inventori"] > svg,
html.tema-m .erp-sidebar a.nav-link[href$="/menu/akuntansi"] > svg,
html.tema-m .erp-sidebar a.nav-link[href$="/menu/hr"] > svg,
html.tema-m .erp-sidebar a.nav-link[href$="/menu/pengaturan"] > svg,
html.tema-m .erp-sidebar a.nav-link[href$="/pelatihan"] > svg,
html.tema-m .erp-sidebar a.nav-link[href$="/training"] > svg,
html.tema-m .topbar .logout-button > svg,
html.tema-m .topbar .onb-help > svg,
html.tema-m .topbar .qris-header-button > svg,
html.tema-m .topbar .cashier-close-button > svg,
html.tema-m .topbar .ui-try-button > svg,
html.tema-m .topbar [data-sidebar-toggle] > svg { display: none !important; }
html.tema-m .erp-sidebar a.nav-link[href$="/beranda"]::before,
html.tema-m .erp-sidebar a.nav-link[href$="/konsultan-ai"]::before,
html.tema-m .erp-sidebar a.nav-link[href$="/menu/kasir"]::before,
html.tema-m .erp-sidebar a.nav-link[href$="/menu/penjualan"]::before,
html.tema-m .erp-sidebar a.nav-link[href$="/menu/pbf"]::before,
html.tema-m .erp-sidebar a.nav-link[href$="/menu/klinik"]::before,
html.tema-m .erp-sidebar a.nav-link[href$="/menu/pembelian"]::before,
html.tema-m .erp-sidebar a.nav-link[href$="/menu/produk"]::before,
html.tema-m .erp-sidebar a.nav-link[href$="/menu/laporan"]::before,
html.tema-m .erp-sidebar a.nav-link[href$="/menu/inventori"]::before,
html.tema-m .erp-sidebar a.nav-link[href$="/menu/akuntansi"]::before,
html.tema-m .erp-sidebar a.nav-link[href$="/menu/hr"]::before,
html.tema-m .erp-sidebar a.nav-link[href$="/menu/pengaturan"]::before,
html.tema-m .erp-sidebar a.nav-link[href$="/pelatihan"]::before,
html.tema-m .erp-sidebar a.nav-link[href$="/training"]::before,
html.tema-m .topbar .logout-button::before,
html.tema-m .topbar .onb-help::before,
html.tema-m .topbar .qris-header-button::before,
html.tema-m .topbar .cashier-close-button::before,
html.tema-m .topbar .ui-try-button::before,
html.tema-m .topbar [data-sidebar-toggle]::before {
  position: static !important;
  display: inline-block !important;
  flex: 0 0 22px;
  width: 22px !important;
  height: 22px !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: currentColor !important;
  transform: none !important;
  content: "" !important;
  -webkit-mask: var(--m-ri) center / contain no-repeat;
  mask: var(--m-ri) center / contain no-repeat;
}

/* Ukuran huruf mengikuti template (15px): menu samping & tab. */
html.tema-m .nav-link, html.tema-m .nav-section { font-size: 13px; }
html.tema-m .sidebar-group-list .nav-link { font-size: 12.5px; }
html.tema-m .m-tab { font-size: 13px; }

/* ══ Isian di dalam tabel baris barang (Faktur Beli / SP): kolom pajak & diskon tak boleh terjepit (owner 11 Nov: "pajak kecil banget") ══ */
html.tema-m .data-table td .input-group { min-width: 118px; }
html.tema-m .data-table td .input-group > .control { min-width: 56px; padding-left: 10px; padding-right: 8px; }
html.tema-m .data-table td .input-group > select.control { flex: 0 0 64px; min-width: 64px; padding-right: 22px; }
html.tema-m .input-group > span { min-height: 40px; padding: 0 10px; border-color: var(--m-border-input); background: #F2F2F5; color: var(--m-text-2); font-weight: 500; }
/* Panah naik-turun bawaan isian angka disembunyikan (memakan tempat; angka tetap bisa diketik). */
html.tema-m .data-table input[type=number]::-webkit-inner-spin-button,
html.tema-m .data-table input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
html.tema-m .data-table input[type=number] { -moz-appearance: textfield; appearance: textfield; text-align: right; }

/* Faktur Beli ringkas (main 11 Nov): kolom pajak tetap sempit di tampilan baru (aturan umum isian-dalam-tabel lebih lebar). */
html.tema-m .purchase-invoice-line-table .input-group:has([data-entry-tax]),
html.tema-m .purchase-invoice-line-table .input-group:has([data-row-tax]) { width: 5.6rem; min-width: 5.6rem; }
html.tema-m .purchase-invoice-line-table [data-entry-tax],
html.tema-m .purchase-invoice-line-table [data-row-tax] { width: 3rem; min-width: 0 !important; padding-left: 6px !important; padding-right: 6px !important; }
html.tema-m .ket-pensil { width: 36px; height: 36px; border-color: var(--m-border-input); border-radius: var(--m-radius); }
html.tema-m .ket-pensil.ada { border-color: var(--m-primary); background: var(--m-primary-subtle); color: var(--m-primary); }
html.tema-m .btn-hapus-baris { width: 36px; min-width: 36px; height: 36px; min-height: 36px !important; border: 0 !important; background: rgba(255, 76, 81, .1) !important; color: #E0353A !important; }

/* Di dalam jendela layar penuh (Buat Faktur Layar Penuh): tanpa deretan tab modul. */
html.tema-m.di-popup .m-tabs { display: none; }

/* ══ Kasir Penjualan & Penjualan Resep (owner 11 Nov: "jelek banget, rapihkan" — di iPad) ══ */
/* Bilah tombol atas: kiri sebaris, Total = kotak ringkas, tombol simpan rata kanan. */
html.tema-m .sales-actionbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
  padding: 10px 14px;
  border: 0;
  border-radius: var(--m-radius-card);
  background: rgba(255, 255, 255, .97);
  box-shadow: var(--m-shadow-sm);
}
html.tema-m .sales-actionbar > .toolbar-group { flex-wrap: nowrap; gap: 8px; }
html.tema-m .sales-actionbar > .toolbar-group:last-child { flex-wrap: wrap; justify-content: flex-end; margin-left: auto; }
html.tema-m .sales-actionbar .btn { white-space: nowrap; }
html.tema-m .sales-live-total {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 6px 14px;
  border-radius: var(--m-radius);
  background: var(--m-primary-subtle);
  color: var(--m-text-2);
  font-weight: 500;
}
html.tema-m .sales-live-total span { font-size: .8rem; }
html.tema-m .sales-live-total strong { color: var(--m-primary); font-size: 1.3rem; font-weight: 700; }
/* Tombol kecil di samping label (+ Baru, Riwayat): chip kecil sebaris, tidak menumpuk. */
html.tema-m .field-label .btn-sm {
  min-height: 24px !important;
  height: 24px;
  padding: 0 8px !important;
  border: 0 !important;
  border-radius: .375rem;
  background: var(--m-primary-subtle) !important;
  color: var(--m-primary) !important;
  font-size: .78rem !important;
  font-weight: 500;
  box-shadow: none;
}
html.tema-m .field-label .btn-sm:hover { background: rgba(var(--m-primary-rgb), .2) !important; }
html.tema-m .sales-header-grid > .field > .field-label { flex-wrap: nowrap !important; gap: 6px !important; min-height: 26px; white-space: nowrap; }
/* Isian kepala: 5 kolom terlalu sempit di layar iPad/laptop kecil → 3 kolom. */
@media (max-width: 1400px) {
  html.tema-m .sales-header-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* Tabel barang: judul kolom kecil & tidak terpotong; pilihan harga cukup lebar. */
html.tema-m .sales-main-panel .sales-line-table { min-width: 1320px; }
html.tema-m .sales-prescription-mode .sales-main-panel .sales-line-table { min-width: 1360px; }
html.tema-m .sales-line-table th { font-size: .72rem; letter-spacing: 0; white-space: nowrap; line-height: 1.25; }
html.tema-m .sales-line-table select.control { min-width: 0; }
html.tema-m .sales-line-table td { padding: 8px 6px; }
/* Bilah kasir di layar < 1400px: tombol sedikit lebih kecil supaya muat sebaris. */
@media (max-width: 1400px) {
  html.tema-m .sales-actionbar .btn { min-height: 36px; padding: 0 12px; font-size: .88rem; }
}
/* Tombol melayang Panduan & AI: saat menu samping berupa ikon, jadi bulat kecil bertumpuk di atas menu (tidak menutupi isi). */
html.tema-m body.sidebar-collapsed #guide-fab {
  left: 10px !important;
  bottom: 74px !important;
  width: 46px;
  min-width: 46px;
  height: 46px;
  padding: 0 !important;
  justify-content: center;
  border-radius: 50%;
  font-size: 0 !important;
}
html.tema-m body.sidebar-collapsed #guide-fab svg { width: 22px; height: 22px; margin: 0; }
html.tema-m body.sidebar-collapsed #ai-fab { left: 10px !important; bottom: 18px !important; width: 46px; height: 46px; }

/* Bilah kasir satu baris: [Daftar] [+ Produk] ··· Total · [Cetak: OFF] [Simpan ▾] */
html.tema-m .sales-actionbar { flex-wrap: nowrap; }
html.tema-m .sales-actionbar > .toolbar-group:last-child { flex-wrap: nowrap; align-items: center; }
html.tema-m .sales-actionbar .sales-live-total { margin-right: 4px; }
/* Sakelar cetak: ringkas "Cetak: ON/OFF" + ikon printer (teks panjang aslinya tetap jadi tooltip). */
html.tema-m .sales-actionbar .ct-tombol { gap: 6px; font-size: 0 !important; }
html.tema-m .sales-actionbar .ct-tombol::before {
  width: 18px; height: 18px; background: currentColor; content: "";
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M7 8V3h10v5M7 17H4v-7a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v7h-3'/%3E%3Cpath d='M7 14h10v7H7z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M7 8V3h10v5M7 17H4v-7a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v7h-3'/%3E%3Cpath d='M7 14h10v7H7z'/%3E%3C/svg%3E") center / contain no-repeat;
}
html.tema-m .sales-actionbar .ct-tombol::after { content: "Cetak: OFF"; font-size: .88rem; }
html.tema-m .sales-actionbar .ct-tombol[data-on="1"]::after { content: "Cetak: ON"; }
/* Tombol simpan terpisah (split button): utama + menu ▾ pilihan lain. */
html.tema-m .m-split { position: relative; display: inline-flex; align-items: stretch; }
html.tema-m .m-split > .btn-primary { border-top-right-radius: 0; border-bottom-right-radius: 0; }
html.tema-m .m-split-lain { position: relative; display: flex; }
html.tema-m .m-split-lain > summary {
  display: grid; width: 36px; place-items: center; list-style: none; cursor: pointer;
  border-left: 1px solid rgba(255, 255, 255, .35); border-radius: 0 var(--m-radius) var(--m-radius) 0;
  background: var(--m-primary); color: #fff; box-shadow: 0 .125rem .375rem 0 rgba(var(--m-primary-rgb), .35);
}
html.tema-m .m-split-lain > summary::-webkit-details-marker { display: none; }
html.tema-m .m-split-lain > summary:hover { background: var(--m-primary-hover); }
html.tema-m .m-split-lain > summary svg { width: 16px; height: 16px; }
html.tema-m .m-split-menu {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 60; display: grid; min-width: 220px; padding: 6px;
  border-radius: var(--m-radius-card); background: var(--m-paper); box-shadow: var(--m-shadow-lg);
}
html.tema-m .m-split-menu .btn { justify-content: flex-start; width: 100%; border: 0 !important; background: transparent !important; color: var(--m-heading) !important; box-shadow: none !important; }
html.tema-m .m-split-menu .btn:hover { background: var(--m-primary-subtle) !important; color: var(--m-primary) !important; }
/* Bilah kasir tak boleh mendorong halaman melebihi layar: boleh turun baris (kelompok simpan utuh di kanan),
   dan di layar sempit teks tombol diringkas. */
html.tema-m .sales-actionbar { flex-wrap: wrap; min-width: 0; }
html.tema-m .m-split-lain:not([open]) > .m-split-menu { display: none; }
@media (max-width: 1280px) {
  html.tema-m .sales-actionbar > .toolbar-group:first-child > a.btn { width: 38px; min-width: 38px; padding: 0 !important; justify-content: center; font-size: 0 !important; }
  html.tema-m .sales-actionbar > .toolbar-group:first-child > a.btn svg { width: 18px; height: 18px; }
  html.tema-m .sales-actionbar [data-open-quick-product] { font-size: 0 !important; }
  html.tema-m .sales-actionbar [data-open-quick-product]::after { content: "+ Produk"; font-size: .88rem; }
  html.tema-m .sales-actionbar .sales-live-total > span { display: none; }
}
html.tema-m .sales-relation-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 1280px) { html.tema-m .sales-relation-grid { grid-template-columns: minmax(0, 1fr); } }

/* Sisa gaya "AI": garis putus-putus inline → garis tipis biasa; kotak foto produk kosong → ikon gambar abu-abu. */
html.tema-m .content [style*="dashed"]:not(input):not(textarea) { border-style: solid !important; border-color: var(--m-border) !important; }
html.tema-m .content div[title^="Belum ada foto"] { position: relative; border: 0 !important; background: #F2F2F5; font-size: 0 !important; }
html.tema-m .content div[title^="Belum ada foto"]::before {
  width: 20px; height: 20px; background: #A8AAB4; content: "";
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Ccircle cx='9' cy='10' r='2'/%3E%3Cpath d='m21 16-5-5-9 9'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Ccircle cx='9' cy='10' r='2'/%3E%3Cpath d='m21 16-5-5-9 9'/%3E%3C/svg%3E") center / contain no-repeat;
}
html.tema-m .sales-info-button { display: inline-grid; width: 30px; height: 30px; place-items: center; padding: 0; border: 1px solid var(--m-border-input); border-radius: var(--m-radius); background: #fff; color: var(--m-text-2); }
html.tema-m .sales-info-button:hover { border-color: var(--m-primary); color: var(--m-primary); }
/* Tombol "Isi otomatis dari ketikan / tempelan teks": tombol lembut biasa, bukan kotak hijau bergaris putus-putus. */
html.tema-m .io-buka { border: 0 !important; border-radius: var(--m-radius) !important; background: var(--m-primary-subtle) !important; color: var(--m-primary) !important; font-weight: 500; }
html.tema-m .io-buka:hover { background: rgba(var(--m-primary-rgb), .2) !important; }

/* ══ Pop-up promo #GandengCuan (kartu, menggantikan poster) & pengingat tagihan — gaya modal Materialize ══ */
html.tema-m #gcPromo { background: rgba(38, 43, 67, .5) !important; }
html.tema-m .gc-m {
  position: relative;
  width: min(400px, 100%);
  overflow: hidden;
  border-radius: 14px;
  background: var(--m-paper);
  box-shadow: 0 1.25rem 3rem rgba(38, 43, 67, .3);
  animation: gcMasuk .28s ease-out;
}
@keyframes gcMasuk { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
html.tema-m .gc-m-kepala {
  position: relative;
  padding: 26px 26px 22px;
  background:
    radial-gradient(circle at 92% 8%, rgba(255, 255, 255, .16) 0 70px, transparent 71px),
    radial-gradient(circle at 78% 120%, rgba(255, 217, 104, .22) 0 90px, transparent 91px),
    var(--m-primary);
  color: #fff;
}
html.tema-m .gc-m-tutup { position: absolute; top: 12px; right: 12px; display: grid; width: 32px; height: 32px; place-items: center; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .14); color: #fff; cursor: pointer; }
html.tema-m .gc-m-tutup:hover { background: rgba(255, 255, 255, .26); }
html.tema-m .gc-m-tutup svg { width: 16px; height: 16px; }
html.tema-m .gc-m-label { display: inline-block; padding: 3px 10px; border-radius: 999px; background: rgba(255, 255, 255, .16); font-size: .78rem; font-weight: 600; letter-spacing: .02em; }
html.tema-m .gc-m-ajak { margin: 14px 0 2px; font-size: 1rem; font-weight: 500; opacity: .92; }
html.tema-m .gc-m-angka { color: #FFD968; font-size: 2.5rem; font-weight: 700; line-height: 1.1; letter-spacing: -.02em; }
html.tema-m .gc-m-angka small { margin-left: 6px; color: rgba(255, 255, 255, .85); font-size: .9rem; font-weight: 500; letter-spacing: 0; }
html.tema-m .gc-m-sub { margin: 8px 0 0; font-size: .9rem; line-height: 1.45; opacity: .9; }
html.tema-m .gc-m-isi { padding: 18px 26px 22px; }
html.tema-m .gc-m-langkah { display: flex; gap: 6px; margin: 0 0 18px; padding: 0; list-style: none; counter-reset: gc; }
html.tema-m .gc-m-langkah li {
  display: flex; flex: 1; align-items: center; gap: 6px; padding: 8px 8px; counter-increment: gc;
  border-radius: var(--m-radius); background: var(--m-bg); color: var(--m-heading); font-size: .82rem; font-weight: 500; white-space: nowrap;
}
html.tema-m .gc-m-langkah li::before {
  display: grid; flex: 0 0 20px; width: 20px; height: 20px; place-items: center; border-radius: 50%;
  background: var(--m-primary); color: #fff; font-size: .72rem; font-weight: 600; content: counter(gc);
}
html.tema-m .gc-m-aksi { display: flex; gap: 10px; }
html.tema-m .gc-m-aksi .btn-primary { flex: 1; justify-content: center; min-height: 42px; }

html.tema-m #billingModal { background: rgba(38, 43, 67, .5) !important; }
html.tema-m #billingModal > div { border-top: 0 !important; border-radius: var(--m-radius-card) !important; padding: 26px !important; box-shadow: var(--m-shadow-lg) !important; font-family: inherit; }
html.tema-m #billingModal table { font-size: .88rem !important; }
html.tema-m #billingModal a.btn, html.tema-m #billingModal button { border-radius: var(--m-radius) !important; font-weight: 500 !important; }
html.tema-m #billingBanner { border: 0 !important; border-radius: var(--m-radius) !important; background: rgba(255, 180, 0, .14) !important; }

/* ══ Jendela pop-up (erp-dialog: Tambah Supplier/Pelanggan/Dokter, dll.) — kepala putih gaya modal Materialize ══ */
html.tema-m .erp-dialog-header {
  padding: 20px 24px 8px !important;
  border-bottom: 0 !important;
  background: var(--m-paper) !important;
  color: var(--m-heading) !important;
}
html.tema-m .erp-dialog-header .erp-dialog-title,
html.tema-m .erp-dialog-title { color: var(--m-heading) !important; font-size: 1.2rem; font-weight: 600; }
html.tema-m .erp-dialog .dialog-close {
  display: grid; width: 34px; height: 34px; place-items: center; padding: 0;
  border: 0 !important; border-radius: 50%; background: transparent !important; color: var(--m-muted) !important; font-size: 1.1rem;
}
html.tema-m .erp-dialog .dialog-close:hover { background: var(--m-hover) !important; color: var(--m-heading) !important; }
html.tema-m .erp-dialog-body { padding: 12px 24px 16px !important; }
html.tema-m .erp-dialog-footer { padding: 14px 24px 20px !important; border-top: 0 !important; background: var(--m-paper) !important; }
html.tema-m .erp-dialog::backdrop { background: rgba(38, 43, 67, .5); }
/* Login demo: tombol masuk cepat per peran — tombol garis biasa (bukan putus-putus hijau). */
html.tema-m .auth-form button[form="demo-login-form"] {
  border: 1px solid var(--m-border-input) !important; border-radius: var(--m-radius) !important;
  background: var(--m-paper) !important; color: var(--m-heading) !important; font-weight: 500 !important;
}
html.tema-m .auth-form button[form="demo-login-form"]:hover { border-color: var(--m-primary) !important; color: var(--m-primary) !important; }

/* ══ Bilah atas: keterangan singkat di bawah tiap ikon (owner 11 Nov 2026: "kasih keterangan yg singkat biar jelas") ══ */
html.tema-m .topbar-right { gap: 2px; }
html.tema-m .topbar-right .icon-button,
html.tema-m .topbar-right .qris-header-button,
html.tema-m .topbar-right .cashier-close-button,
html.tema-m .topbar-right .ui-try-button {
  width: auto !important;
  min-width: 58px !important;
  height: 52px !important;
  min-height: 52px !important;
  flex-direction: column;
  gap: 3px;
  padding: 4px 6px !important;
  border: 0 !important;
  border-radius: var(--m-radius) !important;
  box-shadow: none !important;
}
html.tema-m .topbar-right .icon-button svg { width: 20px !important; height: 20px !important; }
html.tema-m .topbar-right .icon-button::after {
  color: var(--m-text-2);
  font-size: 10.5px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
}
html.tema-m .topbar-right .ui-try-button::after { content: "Tampilan"; }
html.tema-m .topbar-right .qris-header-button::after { content: "QRIS"; }
html.tema-m .topbar-right .cashier-close-button::after { content: "Tutup Kasir"; }
html.tema-m .topbar-right .onb-help::after { content: "Panduan"; }
html.tema-m .topbar-right .logout-button::after { content: "Keluar"; }
html.tema-m .topbar .topbar-right .icon-button[style] { border: 0 !important; background: transparent !important; }
/* Kotak cari berikon (kaca pembesar di kiri): sisakan ruang untuk ikonnya (aturan isian seragam menimpa padding kiri). */
html.tema-m .search-field input.control { padding-left: 36px !important; }
html.tema-m .search-field svg { left: 12px; width: 16px; height: 16px; color: var(--m-muted); z-index: 1; pointer-events: none; }
html.tema-m .ms-field input, html.tema-m .sm-search input { padding-left: 0 !important; }

/* Safari iPad/iPhone memperbesar teks otomatis di blok lebar (tabel) sehingga isi tampak lebih besar dari menu
   (owner 11 Nov 2026: "yg di dalem kok font lebih besar"). Matikan supaya ukuran persis sesuai pengaturan. */
html.tema-m { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* ══ Tombol Warna & Klasik di bilah atas ══ */
html.tema-m .topbar-right .ui-try-button::after { content: "Menu ringkas"; }
html.tema-m .topbar-right .ui-try-button.is-back::after { content: "Menu lengkap"; }
html.tema-m .topbar-right .m-warna-btn::after { content: "Warna"; }
html.tema-m .m-warna { position: relative; }
html.tema-m .m-warna-menu {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 80; display: grid; min-width: 170px; padding: 6px;
  border-radius: var(--m-radius-card); background: var(--m-paper); box-shadow: var(--m-shadow-lg);
}
html.tema-m .m-warna-menu[hidden] { display: none; }
html.tema-m .m-warna-menu button {
  display: flex; align-items: center; gap: 10px; padding: 9px 10px; border: 0; border-radius: .375rem;
  background: transparent; color: var(--m-heading); font: inherit; text-align: left; cursor: pointer;
}
html.tema-m .m-warna-menu button:hover { background: var(--m-hover); }
html.tema-m .m-warna-menu button.is-aktif { background: var(--m-primary-subtle); color: var(--m-primary); font-weight: 600; }
html.tema-m .m-warna-contoh { width: 22px; height: 22px; border: 1px solid var(--m-border); border-radius: 6px; }
html.tema-m .m-warna-contoh.is-clean { background: linear-gradient(90deg, #fff 50%, #F7F7F9 50%); }
html.tema-m .m-warna-contoh.is-farmalite { background: linear-gradient(90deg, #0B4A3B 50%, #F2F6F4 50%); }
html.tema-m .m-warna-contoh.is-gelap { background: linear-gradient(90deg, #2F3349 50%, #25293C 50%); }

/* ══ Warna FARMALITE: menu samping hijau tua khas Farmalite, latar sedikit kehijauan ══ */
html.tema-m[data-warna="farmalite"] { --m-bg: #F1F5F3; }
html.tema-m[data-warna="farmalite"] .erp-sidebar { background: #0B4A3B; color: rgba(255, 255, 255, .86); box-shadow: none; }
html.tema-m[data-warna="farmalite"] .brand-title { color: #fff; }
html.tema-m[data-warna="farmalite"] .brand-subtitle { color: rgba(255, 255, 255, .6); }
html.tema-m[data-warna="farmalite"] .brand-mark { background: #E7C873; color: #0B4A3B; }
html.tema-m[data-warna="farmalite"] .nav-link,
html.tema-m[data-warna="farmalite"] .nav-section { color: rgba(255, 255, 255, .84); }
html.tema-m[data-warna="farmalite"] .nav-link svg { color: rgba(255, 255, 255, .84); }
html.tema-m[data-warna="farmalite"] .nav-link:hover,
html.tema-m[data-warna="farmalite"] .nav-section:hover { background: rgba(255, 255, 255, .08); color: #fff; }
html.tema-m[data-warna="farmalite"] .sidebar-group.is-active > .nav-section,
html.tema-m[data-warna="farmalite"] .sidebar-group[open] > .nav-section { background: rgba(255, 255, 255, .1); color: #fff; }
html.tema-m[data-warna="farmalite"] .nav-link.is-active { background: #fff; color: #0B4A3B; box-shadow: 0 .125rem .5rem rgba(0, 0, 0, .18); }
html.tema-m[data-warna="farmalite"] .nav-link.is-active svg { color: #0B4A3B; }
html.tema-m[data-warna="farmalite"] .sm-search { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .14); }
html.tema-m[data-warna="farmalite"] .sm-search svg,
html.tema-m[data-warna="farmalite"] .sm-search input::placeholder { color: rgba(255, 255, 255, .55); }
html.tema-m[data-warna="farmalite"] .sm-search input { color: #fff; }
html.tema-m[data-warna="farmalite"] .sidebar-footer { border-top-color: rgba(255, 255, 255, .1); }
html.tema-m[data-warna="farmalite"] .branch-card { background: rgba(255, 255, 255, .07); }
html.tema-m[data-warna="farmalite"] .branch-label { color: rgba(255, 255, 255, .6); }
html.tema-m[data-warna="farmalite"] .branch-name { color: #fff; }
html.tema-m[data-warna="farmalite"] .branch-card a { color: rgba(255, 255, 255, .8) !important; }

/* ══ Warna GELAP (gaya mode gelap Materialize) ══ */
html.tema-m[data-warna="gelap"] {
  color-scheme: dark;
  --m-primary: #2BA37F;
  --m-primary-rgb: 43, 163, 127;
  --m-primary-hover: #34B68F;
  --m-primary-subtle: rgba(43, 163, 127, .18);
  --m-heading: #E4E2F4;
  --m-text: #CFCDE4;
  --m-text-2: #ADABC4;
  --m-muted: #8D8BA6;
  --m-bg: #25293C;
  --m-paper: #2F3349;
  --m-border: #42465E;
  --m-border-input: #545872;
  --m-hover: rgba(255, 255, 255, .06);
  --m-open: rgba(255, 255, 255, .09);
  --m-shadow: 0 .25rem .875rem rgba(15, 20, 34, .4);
  --m-shadow-sm: 0 .125rem .625rem rgba(15, 20, 34, .35);
  --m-shadow-xs: 0 .125rem .375rem rgba(15, 20, 34, .3);
  --m-shadow-lg: 0 .375rem 1.25rem rgba(15, 20, 34, .5);
  --surface-50: #2F3349;
  --line: #42465E;
}
html.tema-m[data-warna="gelap"] body { background: var(--m-bg); color: var(--m-text); }
html.tema-m[data-warna="gelap"] .control,
html.tema-m[data-warna="gelap"] .sm-search,
html.tema-m[data-warna="gelap"] .ms-field { background-color: #2B2F45 !important; color: var(--m-heading); }
html.tema-m[data-warna="gelap"] select.control:not([multiple]) {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ADABC4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
html.tema-m[data-warna="gelap"] .data-table th,
html.tema-m[data-warna="gelap"] .data-table tfoot td,
html.tema-m[data-warna="gelap"] .data-table tfoot th { background: #2A2E43; color: var(--m-heading); border-color: var(--m-border); }
html.tema-m[data-warna="gelap"] .data-table td { border-bottom-color: var(--m-border); color: var(--m-text); }
html.tema-m[data-warna="gelap"] .data-table tbody tr:hover td { background: rgba(255, 255, 255, .03); }
html.tema-m[data-warna="gelap"] .purchase-entry-row td { background: #2B2F45; }
html.tema-m[data-warna="gelap"] .input-group > span { background: #353A52; color: var(--m-text-2); }
html.tema-m[data-warna="gelap"] .badge { background: rgba(255, 255, 255, .08); color: var(--m-text); }
html.tema-m[data-warna="gelap"] .btn-secondary,
html.tema-m[data-warna="gelap"] .btn-ghost { color: var(--m-heading); }
html.tema-m[data-warna="gelap"] .data-table td strong,
html.tema-m[data-warna="gelap"] .panel-title,
html.tema-m[data-warna="gelap"] .metric-value { color: var(--m-heading); }
html.tema-m[data-warna="gelap"] .ket-pensil,
html.tema-m[data-warna="gelap"] .disc-ringkas,
html.tema-m[data-warna="gelap"] .sales-info-button { background: #2B2F45; }
/* Kotak berlatar putih/pastel tertulis langsung di halaman (gaya inline) ikut gelap. */
html.tema-m[data-warna="gelap"] .content [style*="background:#fff"],
html.tema-m[data-warna="gelap"] .content [style*="background: #fff"],
html.tema-m[data-warna="gelap"] .content [style*="background:#FFF"],
html.tema-m[data-warna="gelap"] .content [style*="background: rgb(255, 255, 255)"],
html.tema-m[data-warna="gelap"] .content [style*="background-color: rgb(255, 255, 255)"],
html.tema-m[data-warna="gelap"] .content [style*="background:#F"],
html.tema-m[data-warna="gelap"] .content [style*="background: #F"],
html.tema-m[data-warna="gelap"] .content [style*="background:#f"] { background: var(--m-paper) !important; color: var(--m-text) !important; }
html.tema-m[data-warna="gelap"] .content [style*="color:#1"],
html.tema-m[data-warna="gelap"] .content [style*="color: #1"],
html.tema-m[data-warna="gelap"] .content [style*="color:#3"],
html.tema-m[data-warna="gelap"] .content [style*="color:#0B"] { color: var(--m-text) !important; }
html.tema-m[data-warna="gelap"] .erp-dialog { background: var(--m-paper); color: var(--m-text); }
html.tema-m[data-warna="gelap"] .alert-success { color: #7FD957; }
html.tema-m[data-warna="gelap"] .alert-warning { color: #FFC74D; }
html.tema-m[data-warna="gelap"] .alert-error { color: #FF8589; }
html.tema-m[data-warna="gelap"] .alert-info { color: #6FCBFF !important; }
html.tema-m[data-warna="gelap"] .auth-m-badge { background: #11131A; }
html.tema-m[data-warna="farmalite"] .erp-sidebar .nav-link.is-active { background: #fff !important; color: #0B4A3B !important; box-shadow: 0 .125rem .5rem rgba(0, 0, 0, .18) !important; }
html.tema-m[data-warna="farmalite"] .erp-sidebar .nav-link.is-active svg,
html.tema-m[data-warna="farmalite"] .erp-sidebar .nav-link.is-active::before { color: #0B4A3B !important; }
html.tema-m[data-warna="farmalite"] .erp-sidebar .nav-link.is-active::after { border-color: #0B4A3B !important; background: #0B4A3B !important; }
html.tema-m[data-warna="gelap"] .content div[title^="Belum ada foto"] { background: #353A52; }

/* ══ Tombol "⋯" (menu aksi per baris tabel) → tombol bertulisan "Lainnya ▾" (owner 11 Nov: "titik tiga orang g ngerti") ══ */
html.tema-m .row-action-menu > summary {
  display: inline-flex !important;
  align-items: center;
  gap: 4px;
  width: auto !important;
  min-width: 0 !important;
  height: 34px !important;
  padding: 0 10px !important;
  border: 1px solid var(--m-border-input) !important;
  border-radius: var(--m-radius) !important;
  background: var(--m-paper) !important;
  color: var(--m-heading) !important;
  font-size: .9rem;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
}
html.tema-m .row-action-menu > summary > svg { display: none !important; }
html.tema-m .row-action-menu > summary::before { content: "Lainnya"; }
html.tema-m .row-action-menu > summary::after {
  width: 12px; height: 12px; background: currentColor; content: "";
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
}
html.tema-m .row-action-menu > summary:hover,
html.tema-m .row-action-menu[open] > summary { border-color: var(--m-primary) !important; color: var(--m-primary) !important; }
/* Kotak berlatar terang yang digelapkan skrip di mode Gelap (lihat gelapkan() di farmalite-m.js). */
html.tema-m[data-warna="gelap"] .m-latar-gelap { background-color: var(--m-paper) !important; background-image: none !important; border-color: var(--m-border) !important; color: var(--m-text) !important; }
html.tema-m[data-warna="gelap"] .m-latar-gelap :is(strong, b, h1, h2, h3, h4, a) { color: var(--m-heading) !important; }
html.tema-m[data-warna="gelap"] .content .btn-ghost,
html.tema-m[data-warna="gelap"] .content .btn-secondary { background: transparent !important; color: var(--m-heading) !important; border-color: var(--m-border-input) !important; }
html.tema-m[data-warna="gelap"] .m-latar-gelap :is(p, span, small, div) { color: var(--m-text-2) !important; }
html.tema-m[data-warna="gelap"] .m-latar-gelap :is(strong, b, h1, h2, h3, h4) { color: var(--m-heading) !important; }

/* Menu sederhana (ui-simple) memperbesar halaman dengan zoom 108% — di tampilan baru ukuran huruf sudah diatur sendiri,
   dan zoom membuat menu "Lainnya" (posisi fixed dihitung skrip) muncul jauh dari tombolnya. */
html.tema-m.ui-simple { zoom: 1; }
/* Tanpa zoom, koreksi tinggi "100vh / 1.0833" dari erp-simple.css ikut dibatalkan — dulu sidebar berhenti di 92% layar
   (menggantung, tombol Panduan/FIA tampak di luar sidebar; owner 11 Nov 2026). */
html.tema-m.ui-simple .erp-sidebar,
html.tema-m.ui-simple #guide-drawer { height: 100vh; }
html.tema-m.ui-simple #ai-panel { max-height: calc(100vh - 96px); }
html.tema-m.ui-simple .erp-dialog { max-height: min(860px, calc(100vh - 28px)); }
html.tema-m.ui-simple .erp-dialog-body { max-height: calc(100vh - 190px); }
@media (max-width: 720px) { html.tema-m.ui-simple .erp-dialog { max-height: calc(100vh - 16px); } }