/* =============================================================================
 *  NuvaTag — lapisan tipis di atas Tabler 1.5.1
 *  Tidak boleh ada style sebaris di HTML (CSP style-src 'self'); semua di sini.
 * ========================================================================== */

/* Plus Jakarta Sans (SIL OFL) — di-vendor lokal karena CSP font-src 'self'. */
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/assets/fonts/plus-jakarta-sans-latin.woff2") format("woff2");
}

:root {
  --nv-brand: #0B4A8B;
  --nv-brand-dark: #08386A;
  --nv-navy: #0B2545;
  --nv-teal: #0E9F8E;
  --nv-accent: #5EEAD4;
  --nv-ink: #0F172A;
  --nv-muted: #475569;
  --nv-line: #E6EAF0;
  --nv-soft: #F5F7FA;

  /* Tabler memakai variabel ini untuk seluruh komponen. */
  --tblr-font-sans-serif: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --tblr-primary: #0B4A8B;
  --tblr-primary-rgb: 11, 74, 139;
  --tblr-primary-text: #0B4A8B;
  --tblr-primary-lt: #E6F0FB;
  --tblr-primary-lt-rgb: 230, 240, 251;
  --tblr-primary-darken: #08386A;
  --tblr-link-color: #0B4A8B;
  --tblr-link-color-rgb: 11, 74, 139;
  --tblr-link-hover-color: #08386A;
  --tblr-link-hover-color-rgb: 8, 56, 106;
}

body { font-family: var(--tblr-font-sans-serif); letter-spacing: -0.005em; }
.btn-primary {
  --tblr-btn-bg: #0B4A8B; --tblr-btn-border-color: #0B4A8B;
  --tblr-btn-hover-bg: #08386A; --tblr-btn-hover-border-color: #08386A;
  --tblr-btn-active-bg: #072F59; --tblr-btn-active-border-color: #072F59;
}
.page-title { font-weight: 700; letter-spacing: -0.02em; }
.navbar-vertical[data-bs-theme="dark"] { background: var(--nv-navy); }

/* ---------------------------------------------------------------- ikon mask */
.ikon {
  display: inline-block;
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  vertical-align: -0.225em;
  background-color: currentColor;
  -webkit-mask: var(--ikon) center / contain no-repeat;
          mask: var(--ikon) center / contain no-repeat;
}
.ikon-sm { width: 1rem; height: 1rem; }
.ikon-lg { width: 1.75rem; height: 1.75rem; }
.btn .ikon {
  width: var(--tblr-btn-icon-size);
  min-width: var(--tblr-btn-icon-size);
  height: var(--tblr-btn-icon-size);
  margin: 0 calc(var(--tblr-btn-padding-x) / 2) 0 calc(var(--tblr-btn-padding-x) / -4);
}
.btn-icon .ikon { margin: 0; }

.ikon-alert-circle { --ikon: url("/assets/tabler/icons/alert-circle.svg"); }
.ikon-alert-triangle { --ikon: url("/assets/tabler/icons/alert-triangle.svg"); }
.ikon-arrow-left { --ikon: url("/assets/tabler/icons/arrow-left.svg"); }
.ikon-ban { --ikon: url("/assets/tabler/icons/ban.svg"); }
.ikon-bell { --ikon: url("/assets/tabler/icons/bell.svg"); }
.ikon-building { --ikon: url("/assets/tabler/icons/building.svg"); }
.ikon-building-bank { --ikon: url("/assets/tabler/icons/building-bank.svg"); }
.ikon-calendar { --ikon: url("/assets/tabler/icons/calendar.svg"); }
.ikon-cash { --ikon: url("/assets/tabler/icons/cash.svg"); }
.ikon-chart-bar { --ikon: url("/assets/tabler/icons/chart-bar.svg"); }
.ikon-check { --ikon: url("/assets/tabler/icons/check.svg"); }
.ikon-chevron-right { --ikon: url("/assets/tabler/icons/chevron-right.svg"); }
.ikon-clipboard-check { --ikon: url("/assets/tabler/icons/clipboard-check.svg"); }
.ikon-clock { --ikon: url("/assets/tabler/icons/clock.svg"); }
.ikon-copy { --ikon: url("/assets/tabler/icons/copy.svg"); }
.ikon-download { --ikon: url("/assets/tabler/icons/download.svg"); }
.ikon-file-text { --ikon: url("/assets/tabler/icons/file-text.svg"); }
.ikon-history { --ikon: url("/assets/tabler/icons/history.svg"); }
.ikon-info-circle { --ikon: url("/assets/tabler/icons/info-circle.svg"); }
.ikon-key { --ikon: url("/assets/tabler/icons/key.svg"); }
.ikon-layout-dashboard { --ikon: url("/assets/tabler/icons/layout-dashboard.svg"); }
.ikon-lock { --ikon: url("/assets/tabler/icons/lock.svg"); }
.ikon-logout { --ikon: url("/assets/tabler/icons/logout.svg"); }
.ikon-pencil { --ikon: url("/assets/tabler/icons/pencil.svg"); }
.ikon-plus { --ikon: url("/assets/tabler/icons/plus.svg"); }
.ikon-printer { --ikon: url("/assets/tabler/icons/printer.svg"); }
.ikon-receipt { --ikon: url("/assets/tabler/icons/receipt.svg"); }
.ikon-report-analytics { --ikon: url("/assets/tabler/icons/report-analytics.svg"); }
.ikon-search { --ikon: url("/assets/tabler/icons/search.svg"); }
.ikon-send { --ikon: url("/assets/tabler/icons/send.svg"); }
.ikon-settings { --ikon: url("/assets/tabler/icons/settings.svg"); }
.ikon-shield { --ikon: url("/assets/tabler/icons/shield.svg"); }
.ikon-tag { --ikon: url("/assets/tabler/icons/tag.svg"); }
.ikon-trash { --ikon: url("/assets/tabler/icons/trash.svg"); }
.ikon-user { --ikon: url("/assets/tabler/icons/user.svg"); }
.ikon-users { --ikon: url("/assets/tabler/icons/users.svg"); }
.ikon-x { --ikon: url("/assets/tabler/icons/x.svg"); }

/* ------------------------------------------------------------------ sidebar */
.navbar-vertical .brand {
  display: flex;
  align-items: center;
  gap: .6rem;
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: -.01em;
}
.navbar-vertical .brand img { width: 32px; height: 32px; }
.navbar-vertical .brand small {
  display: block;
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  opacity: .6;
}
.navbar-vertical .nav-section {
  padding: 1rem 1rem .25rem;
  font-size: .675rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  opacity: .5;
}
.company-chip {
  max-width: 22rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ------------------------------------------------------------ angka & tabel */
.num { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; }
.table td, .table th { vertical-align: middle; }
.table-hover tbody tr[data-href] { cursor: pointer; }
.text-pre { white-space: pre-line; }
.min-w-0 { min-width: 0; }

/* Tab yang bisa digeser mendatar di layar sempit, tanpa scrollbar tegak. */
.tabs-scroll { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.tabs-scroll::-webkit-scrollbar { display: none; }

/* Tombol "Batalkan" pembayaran: <details> tanpa penanda segitiga bawaan. */
.void-toggle summary { list-style: none; }
.void-toggle summary::-webkit-details-marker { display: none; }
.void-toggle[open] summary { display: none; }
.void-toggle form { min-width: 15rem; }

/* ---------------------------------------------------------------- dasbor */
.stat-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: .6rem;
}
.chart-bars { width: 100%; height: 170px; }
.chart-bars rect { fill: var(--tblr-primary); opacity: .85; }
.chart-bars rect:hover { opacity: 1; }
.chart-bars text { fill: var(--tblr-secondary); font-size: 11px; }
.chart-bars .baseline { stroke: var(--tblr-border-color); }

/* -------------------------------------------------------------- form invoice */
.items-table input { min-width: 0; }
.items-table .col-desc { min-width: 16rem; }
.items-table .col-qty { width: 7rem; }
.items-table .col-price { width: 11rem; }
.items-table .col-total { width: 10rem; }
.items-table .col-act { width: 3rem; }
.totals-box dt { font-weight: 400; color: var(--tblr-secondary); }
.totals-box dd { margin: 0; text-align: end; font-variant-numeric: tabular-nums; }
.totals-box .grand { font-size: 1.25rem; font-weight: 700; color: var(--tblr-body-color); }

.reminder-text {
  font-family: var(--tblr-font-sans-serif);
  font-size: .85rem;
  background: var(--tblr-bg-surface-secondary);
}

/* ------------------------------------------------------------- halaman tamu */
.auth { display: flex; flex-wrap: wrap; min-height: 100vh; background: #fff; color: var(--nv-ink); }
.auth-aside {
  flex: 1 1 30rem; min-width: 0; box-sizing: border-box;
  background: var(--nv-navy); color: #fff;
  padding: 3rem 3.5rem;
  display: flex; flex-direction: column; justify-content: space-between; gap: 3rem;
}
.auth-aside h1 { margin: 0; font-size: 2.25rem; line-height: 1.15; font-weight: 800; letter-spacing: -0.03em; color: #fff; }
.auth-aside .lead { margin: .9rem 0 0; font-size: 1rem; line-height: 1.6; color: #B6C4D6; max-width: 28rem; }
.auth-aside .foot { font-size: .8125rem; color: #8FA3BC; }
.auth-points { margin: 2.25rem 0 0; padding: 0; list-style: none; max-width: 28rem; }
.auth-points li { display: flex; gap: .75rem; align-items: flex-start; margin-bottom: 1rem; color: #B6C4D6; font-size: .9375rem; line-height: 1.5; }
.auth-points strong { color: #fff; font-weight: 600; }
.auth-points .ikon { color: var(--nv-accent); margin-top: .1rem; }
.auth-main { flex: 1 1 30rem; min-width: 0; box-sizing: border-box; display: flex; align-items: center; justify-content: center; padding: 3rem 1.5rem; }
.auth-form { width: 100%; max-width: 25rem; }
.auth-form h2 { margin: 0; font-size: 1.75rem; font-weight: 800; letter-spacing: -0.02em; }
.auth-form .sub { margin: .5rem 0 1.5rem; color: #64748B; }
.auth-form .form-label { font-weight: 600; }
.auth-form .form-control { height: 2.875rem; border-radius: .625rem; font-size: .9375rem; }
.auth-form .btn-primary { height: 3rem; border-radius: .625rem; font-size: 1rem; font-weight: 700; }
.auth-form .alt { margin-top: 1.75rem; padding-top: 1.4rem; border-top: 1px solid var(--nv-line); text-align: center; color: var(--nv-muted); }
.auth-form .alt a { font-weight: 700; }
.auth-brand { display: inline-flex; align-items: center; gap: .6rem; font-weight: 800; font-size: 1.25rem; letter-spacing: -0.02em; color: inherit; text-decoration: none; }
.auth-brand:hover { color: inherit; }
.auth-brand img { width: 34px; height: 34px; }
.auth-aside .auth-brand { color: #fff; }
@media (max-width: 991.98px) {
  .auth-aside { display: none; }
}

/* ------------------------------------------------------------- dokumen cetak */
.doc-wrap { background: #eef1f5; min-height: 100vh; padding: 2rem 1rem; }
.doc {
  max-width: 210mm;
  margin: 0 auto;
  background: #fff;
  color: #1d273b;
  padding: 18mm 16mm;
  box-shadow: 0 10px 30px rgba(15, 23, 42, .08);
  border-radius: 4px;
  position: relative;
  font-size: 13px;
}
.doc h1 { font-size: 28px; letter-spacing: .08em; color: var(--nv-brand); margin: 0; }
.doc .company-name { font-size: 18px; font-weight: 700; }
.doc .muted { color: #667085; }
.doc .label { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: #667085; margin-bottom: 2px; }
.doc table.lines { width: 100%; border-collapse: collapse; margin-top: 18px; }
.doc table.lines th {
  background: #f1f5f9; text-align: left; font-size: 11px; text-transform: uppercase;
  letter-spacing: .05em; padding: 8px 10px; border-bottom: 2px solid #dbe2ea;
}
.doc table.lines td { padding: 9px 10px; border-bottom: 1px solid #e8edf3; vertical-align: top; }
.doc table.lines .num, .doc table.sum .num { text-align: right; }
.doc table.sum { margin-left: auto; min-width: 46%; border-collapse: collapse; margin-top: 10px; }
.doc table.sum td { padding: 5px 10px; }
.doc table.sum tr.grand td { font-size: 16px; font-weight: 700; border-top: 2px solid #1d273b; padding-top: 8px; }
.doc table.sum tr.due td { font-weight: 700; color: var(--nv-brand); }
.doc .notes { margin-top: 22px; padding: 12px 14px; background: #f8fafc; border-left: 3px solid var(--nv-brand); white-space: pre-line; }
.doc .stamp {
  position: absolute; top: 46mm; right: 18mm; transform: rotate(-12deg);
  border: 3px solid; border-radius: 6px; padding: 4px 14px; font-size: 22px; font-weight: 800;
  letter-spacing: .12em; opacity: .75;
}
.doc .stamp-paid { color: #2fb344; }
.doc .stamp-void { color: #d63939; }
.doc .stamp-draft { color: #929dab; }
.doc-toolbar { max-width: 210mm; margin: 0 auto 1rem; display: flex; gap: .5rem; justify-content: flex-end; }

@media print {
  @page { size: A4; margin: 0; }
  .doc-wrap { background: #fff; padding: 0; }
  .doc { box-shadow: none; border-radius: 0; max-width: none; }
  .doc-toolbar { display: none; }
}

/* Header dropdown Tabler berhuruf kapital; email harus tampil apa adanya. */
.dropdown-header.text-email { text-transform: none; letter-spacing: 0; font-size: .8125rem; }