/* =====================================================================
   DESIGN TOKENS
   Tema: pergudangan/logistik. Navy gelap untuk struktur, teal untuk aksi,
   amber untuk peringatan stok menipis (bukan dekorasi -- makna fungsional).
   ===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  --navy-900: #17233A;
  --navy-800: #1E2E4A;
  --navy-700: #2A3F63;
  --steel-400: #7C93AD;
  --steel-200: #C4D0DD;

  --teal-600: #1F6F6B;
  --teal-500: #26877F;
  --teal-100: #E3F1EE;

  --amber-600: #C9791E;
  --amber-100: #FBEDDA;

  --red-600: #B84A3E;
  --red-100: #FBE9E6;

  --green-600: #2F8F5B;
  --green-100: #E4F5EC;

  --bg: #F3F5F8;
  --surface: #FFFFFF;
  --border: #E1E6EC;
  --text-900: #16212F;
  --text-600: #55697D;
  --text-400: #8B9AAB;

  --font-ui: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', 'SFMono-Regular', Consolas, monospace;

  --radius: 8px;
  --sidebar-w: 232px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text-900);
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.5;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; }

.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------------
   Layout: Sidebar + Main
   --------------------------------------------------------------------- */
.app-shell {
  display: flex;
  min-height: 100vh;
}

.sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  background: var(--navy-900);
  color: var(--steel-200);
  padding: 20px 14px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.sidebar .brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px 20px 10px;
  color: #fff;
}
.sidebar .brand .mark {
  width: 30px; height: 30px;
  border-radius: 7px;
  background: linear-gradient(135deg, var(--teal-500), var(--navy-700));
  display: flex; align-items: center; justify-content: center;
  font-weight: 700;
  font-size: 14px;
}
.sidebar .brand .name {
  font-weight: 600;
  font-size: 14.5px;
  letter-spacing: 0.1px;
}
.sidebar .brand .sub {
  font-size: 11px;
  color: var(--steel-400);
}

.nav-group {
  margin-top: 18px;
}
.nav-group .label {
  font-size: 11px;
  color: var(--steel-400);
  padding: 0 10px 6px 10px;
  font-weight: 600;
}
.nav-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 6px;
  color: var(--steel-200);
  font-size: 13.5px;
  font-weight: 500;
  margin-bottom: 2px;
  transition: background 0.12s ease, color 0.12s ease;
}
.nav-link:hover { background: rgba(255,255,255,0.06); color: #fff; }
.nav-link.active { background: var(--teal-600); color: #fff; }
.nav-link .ic { width: 16px; text-align: center; opacity: 0.9; }

.main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.topbar {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 16px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.topbar h1 {
  font-size: 18px;
  margin: 0;
  font-weight: 600;
}
.topbar .desc {
  font-size: 12.5px;
  color: var(--text-600);
  margin-top: 2px;
}

.content {
  padding: 24px 28px 60px 28px;
  flex: 1;
}

/* ---------------------------------------------------------------------
   Cards / Panels
   --------------------------------------------------------------------- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
}
.card + .card { margin-top: 16px; }

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  gap: 12px;
  flex-wrap: wrap;
}
.card-header h2 {
  font-size: 15px;
  margin: 0;
  font-weight: 600;
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
  margin-bottom: 16px;
}
@media (max-width: 1000px) {
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
}
.stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
}
.stat-card .label { font-size: 12px; color: var(--text-600); margin-bottom: 6px; }
.stat-card .value { font-size: 22px; font-weight: 700; font-family: var(--font-mono); }
.stat-card.warn .value { color: var(--amber-600); }
.stat-card.accent .value { color: var(--teal-600); }

/* ---------------------------------------------------------------------
   Buttons
   --------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: filter 0.1s ease, background 0.1s ease;
  white-space: nowrap;
}
.btn:active { filter: brightness(0.94); }
.btn-primary { background: var(--teal-600); color: #fff; }
.btn-primary:hover { background: var(--teal-500); }
.btn-outline { background: #fff; border-color: var(--border); color: var(--text-900); }
.btn-outline:hover { border-color: var(--steel-400); }
.btn-danger { background: #fff; border-color: var(--red-100); color: var(--red-600); }
.btn-danger:hover { background: var(--red-100); }
.btn-sm { padding: 5px 10px; font-size: 12px; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-icon {
  width: 30px; height: 30px; padding: 0;
  align-items: center; justify-content: center;
  border-radius: 6px;
}

/* ---------------------------------------------------------------------
   Tables
   --------------------------------------------------------------------- */
.table-wrap { overflow-x: auto; }
table.data {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
table.data th {
  text-align: left;
  font-size: 11.5px;
  text-transform: none;
  color: var(--text-600);
  font-weight: 600;
  padding: 9px 12px;
  border-bottom: 1px solid var(--border);
  background: #FAFBFC;
  white-space: nowrap;
}
table.data td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
table.data tbody tr:hover { background: #FAFBFC; }
table.data td.num, table.data th.num { text-align: right; font-family: var(--font-mono); }

/* Header kolom yang bisa diklik untuk mengurutkan tabel (mis. Laporan Laba
   Rugi) -- panah kecil di sebelah label menunjukkan kolom mana yang lagi
   jadi acuan urutan & ke arah mana (naik/turun). */
table.data th.sortable {
  cursor: pointer;
  user-select: none;
}
table.data th.sortable:hover { color: var(--teal-600); }
table.data th.sortable.sorted { color: var(--teal-600); }
table.data th .sort-arrow {
  display: inline-block;
  font-size: 9px;
  margin-left: 2px;
  color: var(--teal-600);
}

/* Tabel dengan lebar kolom TETAP (colgroup + width) -- dipakai di Laporan
   Laba Rugi, yang punya banyak kolom sekaligus 1 kolom "ditempel" (sticky)
   di kanan. table-layout:fixed WAJIB dipakai di sini supaya lebar tiap
   kolom stabil/pasti -- kalau tidak (table-layout:auto bawaan browser),
   lebar kolom dihitung ulang browser tiap saat mengikuti isi datanya, dan
   posisi kolom sticky bisa "salah hitung" jadi menumpuk di atas kolom
   sebelahnya (angka Keuntungan ketutupan tombol Aksi).
   PENTING: kolom angka (nominal Rupiah, No. Nota) SENGAJA TIDAK dipotong
   pakai ellipsis "..." -- untuk laporan keuangan, angka yang kepotong
   jauh lebih berbahaya daripada baris yang jadi 2 baris. Kalau suatu isi
   kolom ternyata lebih panjang dari lebar kolomnya (mis. nominal yang
   sangat besar), biarkan dia turun ke baris baru di dalam kolomnya
   sendiri (row jadi lebih tinggi), bukan terpotong atau meluber ke kolom
   lain. */
table.data.data-fixed { table-layout: fixed; }
table.data.data-fixed td {
  overflow-wrap: break-word;
}
table.data.data-fixed th {
  overflow: hidden;
  text-overflow: ellipsis;
}
.empty-row td {
  text-align: center;
  color: var(--text-400);
  padding: 30px 12px;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 100px;
  font-size: 11.5px;
  font-weight: 600;
}
.badge-in { background: var(--green-100); color: var(--green-600); }
.badge-out { background: var(--red-100); color: var(--red-600); }
.badge-warn { background: var(--amber-100); color: var(--amber-600); }
.badge-neutral { background: #EEF1F4; color: var(--text-600); }
.badge-info { background: var(--teal-100); color: var(--teal-600); }

/* Link No. Nota di Laporan Laba Rugi -> buka transaksi penjualan terkait untuk diedit */
.invoice-link { color: var(--teal-600); font-weight: 600; }
.invoice-link:hover { text-decoration: underline; }

/* Kolom Aksi (tombol Sinkron HPP dsb) di tabel Laporan Laba Rugi -- tabel
   ini punya banyak kolom lebar (Barang, 4 kolom nominal), jadi kalau layar
   sempit tabelnya perlu discroll ke kanan. Supaya tombol Aksi tidak ikut
   "hilang"/mepet di ujung saat discroll, kolom ini "ditempel" (sticky) di
   sisi kanan tabel -- selalu terlihat berapa pun posisi scroll horizontalnya. */
table.data th.col-actions,
table.data td.col-actions {
  position: sticky;
  right: 0;
  z-index: 1;
  background: var(--surface);
  box-shadow: -6px 0 8px -6px rgba(0,0,0,0.12);
}
table.data th.col-actions { z-index: 2; background: #FAFBFC; }
table.data tbody tr:hover td.col-actions { background: #FAFBFC; }

/* Menu titik-tiga (ikon ⋮) per baris di Laporan Laba Rugi -- dipakai
   supaya aksi seperti "Sinkron HPP" tidak butuh kolom lebar sendiri, cukup
   1 ikon kecil yang selalu muat berapa pun banyaknya kolom lain di tabel. */
.row-menu { position: relative; display: flex; justify-content: center; }
.action-menu {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 170px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.12);
  z-index: 30;
  overflow: hidden;
}
.action-menu.open { display: block; }
.action-menu button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 9px 14px;
  background: none;
  border: none;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-900);
  cursor: pointer;
}
.action-menu button:hover { background: #FAFBFC; }
.action-menu button:disabled { opacity: 0.5; cursor: not-allowed; }

/* Status invoice penjualan: Proses (kuning) / Terkirim (biru) / Dibayarkan (hijau) */
.status-select {
  border: none;
  font-size: 11.5px;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 100px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-repeat: no-repeat;
  background-position: right 6px center;
  background-size: 10px;
  padding-right: 20px;
}
.status-select.status-proses { background-color: var(--red-100); color: var(--red-600); }
.status-select.status-terkirim { background-color: var(--amber-100); color: var(--amber-600); }
.status-select.status-dibayarkan { background-color: var(--green-100); color: var(--green-600); }

.row-actions { display: flex; gap: 6px; justify-content: flex-end; }

/* ---------------------------------------------------------------------
   Forms
   --------------------------------------------------------------------- */
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
.form-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 800px) {
  .form-grid, .form-grid.cols-3 { grid-template-columns: 1fr; }
}
.field { display: flex; flex-direction: column; gap: 6px; }
.field.full { grid-column: 1 / -1; }
.field label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-600);
}
.field .hint { font-size: 11.5px; color: var(--text-400); }
input, select, textarea {
  font-family: inherit;
  font-size: 13.5px;
  padding: 8px 10px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--text-900);
  outline: none;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--teal-500);
  box-shadow: 0 0 0 3px var(--teal-100);
}
input[type="number"] { font-family: var(--font-mono); }
textarea { resize: vertical; min-height: 64px; }

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

/* ---------------------------------------------------------------------
   Modal
   --------------------------------------------------------------------- */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(23, 35, 58, 0.45);
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 6vh 16px;
  z-index: 100;
  overflow-y: auto;
}
.modal-overlay.open { display: flex; }
.modal {
  background: #fff;
  border-radius: 10px;
  width: 100%;
  max-width: 480px;
  padding: 20px;
  box-shadow: 0 20px 50px rgba(23,35,58,0.25);
}
.modal h3 { margin: 0 0 16px 0; font-size: 15.5px; }
.modal-close {
  float: right;
  cursor: pointer;
  color: var(--text-400);
  font-size: 18px;
  line-height: 1;
  background: none;
  border: none;
}

/* ---------------------------------------------------------------------
   Toast
   --------------------------------------------------------------------- */
#toast-stack {
  position: fixed;
  top: 18px;
  right: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 200;
}
.toast {
  background: var(--navy-900);
  color: #fff;
  padding: 11px 16px;
  border-radius: 7px;
  font-size: 13px;
  min-width: 220px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.18);
}
.toast.error { background: var(--red-600); }
.toast.success { background: var(--green-600); }

/* ---------------------------------------------------------------------
   Purchase / Sale line-item forms
   --------------------------------------------------------------------- */
.tx-header-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 18px;
}
@media (max-width: 900px) {
  .tx-header-grid { grid-template-columns: 1fr; }
}
table.line-items { width: 100%; border-collapse: collapse; }
table.line-items th {
  text-align: left;
  font-size: 11.5px;
  color: var(--text-600);
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
}
table.line-items td { padding: 6px 8px; vertical-align: middle; }
table.line-items td select,
table.line-items td input { width: 100%; min-width: 90px; }
table.line-items td.line-total {
  font-family: var(--font-mono);
  text-align: right;
  white-space: nowrap;
  font-weight: 600;
}
.tx-summary {
  margin-top: 14px;
  display: flex;
  justify-content: flex-end;
}
.tx-summary .box {
  min-width: 300px;
  background: #FAFBFC;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px 16px;
}
.tx-summary .line {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  padding: 4px 0;
  color: var(--text-600);
}
.tx-summary .line.total {
  border-top: 1px solid var(--border);
  margin-top: 6px;
  padding-top: 10px;
  font-weight: 700;
  color: var(--text-900);
  font-size: 15px;
}
.tx-summary .line .num { font-family: var(--font-mono); }

.filter-bar {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: flex-end;
  margin-bottom: 16px;
}
.filter-bar .field { min-width: 170px; }

/* Variasi filter-bar yang mengelompokkan field & tombol jadi 2 baris rapi
   (field-field di atas, tombol aksi di bawah) -- dipakai di halaman yang
   field-nya banyak (mis. Laporan Laba Rugi), supaya tidak jadi 1 baris
   panjang yang berantakan pas layar sempit. Halaman lain yang masih pakai
   .filter-bar polos (field & tombol jadi 1 baris flex) tidak terpengaruh. */
.filter-bar-grouped { display: flex; flex-direction: column; align-items: stretch; gap: 12px; }
.filter-bar-grouped .filter-fields { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-start; }
.filter-bar-grouped .filter-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-start; }

.low-stock-dot {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--amber-600);
  margin-right: 6px;
}

.empty-state {
  text-align: center;
  padding: 50px 20px;
  color: var(--text-400);
}
.empty-state .big { font-size: 30px; margin-bottom: 8px; }

.text-muted { color: var(--text-600); }
.text-danger { color: var(--red-600); }
.text-warn { color: var(--amber-600); }
.text-success { color: var(--green-600); }

.helper-text { font-size: 12px; color: var(--text-400); margin-top: 4px; }

/* ---------------------------------------------------------------------
   Sidebar: kartu user + tombol keluar
   --------------------------------------------------------------------- */
.sidebar-user {
  margin-top: 22px;
  padding: 12px 10px 4px 10px;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.sidebar-user .su-name { color: #fff; font-size: 13px; font-weight: 600; }
.sidebar-user .su-role { color: var(--steel-400); font-size: 11.5px; margin-top: 2px; }

/* ---------------------------------------------------------------------
   Halaman Login
   --------------------------------------------------------------------- */
.auth-body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 20% 20%, rgba(38,135,127,0.35), transparent 45%),
    var(--navy-900);
  padding: 20px;
}
.auth-card {
  background: #fff;
  border-radius: 12px;
  padding: 32px;
  width: 100%;
  max-width: 380px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.35);
}
.auth-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; }
.auth-brand .mark {
  width: 34px; height: 34px; border-radius: 8px;
  background: linear-gradient(135deg, var(--teal-500), var(--navy-700));
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: 14px;
}
.auth-brand .name { font-weight: 700; font-size: 15px; }
.auth-brand .sub { font-size: 11px; color: var(--text-600); }
.auth-card h1 { font-size: 19px; margin: 0 0 6px 0; }
.auth-desc { font-size: 12.5px; color: var(--text-600); margin: 0 0 20px 0; }
.auth-error {
  background: var(--red-100); color: var(--red-600);
  padding: 9px 12px; border-radius: 6px; font-size: 12.5px; margin-top: 14px;
}
.auth-hint {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  font-size: 11.5px;
  color: var(--text-400);
}