/* ==========================================================================
   Mypack Indonesia — tema aplikasi bisnis (desktop ERP + mobile native)
   Warna utama di-inject dari pengaturan melalui variabel --app-primary*.
   ========================================================================== */
:root {
  --app-bg: #f4f5f7;
  --app-surface: #ffffff;
  --app-border: #e5e7eb;
  --app-border-strong: #d1d5db;
  --app-text: #111827;
  --app-text-2: #4b5563;
  --app-text-3: #6b7280;
  --app-sidebar-bg: #111827;
  --app-sidebar-text: #cbd5e1;
  --app-sidebar-muted: #64748b;
  --app-sidebar-hover: rgba(255, 255, 255, .06);
  --app-success: #15803d;
  --app-danger: #b91c1c;
  --app-warning: #b45309;
  --app-info: #0369a1;
  --sidebar-w: 264px;
  --sidebar-w-collapsed: 76px;
  --topbar-h: 64px;
  --bottom-nav-h: 64px;
  --radius: 12px;
  --radius-sm: 8px;
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, .05);
  --shadow: 0 1px 3px rgba(16, 24, 40, .08), 0 1px 2px rgba(16, 24, 40, .04);

  --bs-primary: var(--app-primary);
  --bs-primary-rgb: var(--app-primary-rgb);
  --bs-link-color: var(--app-primary);
  --bs-link-color-rgb: var(--app-primary-rgb);
  --bs-link-hover-color: var(--app-primary-dark);
  --bs-body-font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --bs-body-color: var(--app-text);
  --bs-body-bg: var(--app-bg);
  --bs-border-color: var(--app-border);
  --bs-border-radius: var(--radius-sm);
  --bs-focus-ring-color: rgba(var(--app-primary-rgb), .25);
}

body { background: var(--app-bg); color: var(--app-text); font-size: .9375rem; -webkit-font-smoothing: antialiased; }
.min-w-0 { min-width: 0; }
a { text-decoration: none; }
.text-secondary { color: var(--app-text-3) !important; }
.fw-medium { font-weight: 500; }
.tabular { font-variant-numeric: tabular-nums; }

/* ---------- Tombol & form ---------- */
.btn { font-weight: 500; border-radius: var(--radius-sm); display: inline-flex; align-items: center; justify-content: center; gap: .15rem; }
.btn-primary {
  --bs-btn-bg: var(--app-primary); --bs-btn-border-color: var(--app-primary); --bs-btn-color: var(--app-on-primary);
  --bs-btn-hover-bg: var(--app-primary-dark); --bs-btn-hover-border-color: var(--app-primary-dark); --bs-btn-hover-color: var(--app-on-primary);
  --bs-btn-active-bg: var(--app-primary-dark); --bs-btn-active-border-color: var(--app-primary-dark); --bs-btn-active-color: var(--app-on-primary);
  --bs-btn-disabled-bg: var(--app-primary); --bs-btn-disabled-border-color: var(--app-primary); --bs-btn-disabled-color: var(--app-on-primary);
  --bs-btn-focus-shadow-rgb: var(--app-primary-rgb);
}
.btn-outline-primary {
  --bs-btn-color: var(--app-primary); --bs-btn-border-color: var(--app-primary);
  --bs-btn-hover-bg: var(--app-primary); --bs-btn-hover-border-color: var(--app-primary); --bs-btn-hover-color: var(--app-on-primary);
  --bs-btn-active-bg: var(--app-primary-dark); --bs-btn-active-color: var(--app-on-primary);
}
.btn-light { --bs-btn-bg: #fff; --bs-btn-border-color: var(--app-border-strong); --bs-btn-hover-bg: #f9fafb; --bs-btn-hover-border-color: var(--app-border-strong); --bs-btn-color: var(--app-text); }
.btn-soft { background: var(--app-primary-soft); color: var(--app-primary-dark); border: 1px solid transparent; }
.btn-soft:hover, .btn-soft:focus { background: var(--app-primary); color: var(--app-on-primary); }
.btn-icon { width: 40px; height: 40px; padding: 0; border-radius: 10px; color: var(--app-text-2); background: transparent; border: 0; font-size: 1.15rem; }
.btn-icon:hover { background: rgba(0, 0, 0, .05); color: var(--app-text); }
.btn-icon.btn-soft { color: var(--app-primary-dark); background: var(--app-primary-soft); }
.form-control, .form-select { border-color: var(--app-border-strong); border-radius: var(--radius-sm); min-height: 40px; }
.form-control:focus, .form-select:focus { border-color: var(--app-primary); box-shadow: 0 0 0 .2rem rgba(var(--app-primary-rgb), .18); }
.form-check-input:checked { background-color: var(--app-primary); border-color: var(--app-primary); }
.form-label { font-weight: 500; font-size: .875rem; color: var(--app-text-2); margin-bottom: .35rem; }
.input-group-text { background: #f9fafb; border-color: var(--app-border-strong); color: var(--app-text-3); font-size: .875rem; }
.form-actions { display: flex; justify-content: flex-end; gap: .5rem; padding-top: 1rem; border-top: 1px solid var(--app-border); margin-top: .5rem; }

/* ---------- Sidebar ---------- */
.sidebar {
  position: fixed; inset: 0 auto 0 0; width: var(--sidebar-w); background: var(--app-sidebar-bg); color: var(--app-sidebar-text);
  display: flex; flex-direction: column; z-index: 1040; transition: width .2s ease, transform .25s ease;
}
.sidebar-brand { height: var(--topbar-h); display: flex; align-items: center; justify-content: space-between; padding: 0 .9rem 0 1rem; border-bottom: 1px solid rgba(255, 255, 255, .06); }
.brand-link { display: flex; align-items: center; gap: .7rem; color: #fff; min-width: 0; }
.brand-logo { width: 38px; height: 38px; object-fit: contain; border-radius: 9px; background: #fff; padding: 3px; flex-shrink: 0; }
.brand-mark { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; background: var(--app-primary); color: var(--app-on-primary); font-size: 1.15rem; flex-shrink: 0; }
.brand-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.brand-name { font-weight: 700; font-size: .98rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand-tagline { font-size: .72rem; color: var(--app-sidebar-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-close { color: var(--app-sidebar-text); }
.sidebar-nav { flex: 1; overflow-y: auto; padding: .75rem .65rem 1rem; scrollbar-width: thin; scrollbar-color: #334155 transparent; }
.nav-section { font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: var(--app-sidebar-muted); padding: 1rem .7rem .4rem; font-weight: 600; white-space: nowrap; }
.sidebar .nav-link { display: flex; align-items: center; gap: .75rem; padding: .55rem .7rem; color: var(--app-sidebar-text); border-radius: 9px; font-size: .9rem; font-weight: 500; white-space: nowrap; margin-bottom: 2px; }
.sidebar .nav-link i { font-size: 1.1rem; width: 1.25rem; text-align: center; flex-shrink: 0; }
.sidebar .nav-link:hover { background: var(--app-sidebar-hover); color: #fff; }
.sidebar .nav-link.active { background: var(--app-primary); color: var(--app-on-primary); }
.nav-badge { font-size: .68rem; }
.sidebar-footer { padding: .5rem .65rem; border-top: 1px solid rgba(255, 255, 255, .06); display: flex; justify-content: flex-end; }
.sidebar-toggle { color: var(--app-sidebar-text); }
.sidebar-toggle:hover { background: var(--app-sidebar-hover); color: #fff; }

.app-main { margin-left: var(--sidebar-w); min-height: 100vh; transition: margin-left .2s ease; display: flex; flex-direction: column; }

@media (min-width: 992px) {
  body.sidebar-collapsed .sidebar { width: var(--sidebar-w-collapsed); }
  body.sidebar-collapsed .app-main { margin-left: var(--sidebar-w-collapsed); }
  body.sidebar-collapsed .brand-text, body.sidebar-collapsed .nav-label, body.sidebar-collapsed .nav-badge { display: none; }
  body.sidebar-collapsed .nav-section { font-size: 0; padding: .6rem 0 .3rem; border-top: 1px solid rgba(255, 255, 255, .06); margin: .4rem .5rem 0; }
  body.sidebar-collapsed .sidebar .nav-link { justify-content: center; padding: .6rem; }
  body.sidebar-collapsed .sidebar-footer { justify-content: center; }
  body.sidebar-collapsed .sidebar-toggle i { transform: rotate(180deg); }
  body.sidebar-collapsed .sidebar-brand { justify-content: center; padding: 0; }
}

/* ---------- Topbar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 1020; height: var(--topbar-h); background: rgba(255, 255, 255, .92); backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--app-border); display: flex; align-items: center; justify-content: space-between; padding: 0 1.5rem; gap: 1rem;
}
.topbar-left, .topbar-right { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.topbar-title { min-width: 0; }
.topbar-heading { font-weight: 700; font-size: 1.08rem; margin: 0; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -.01em; }
.topbar-heading-row { display: flex; align-items: center; gap: .25rem; min-width: 0; }
.help-btn { width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; color: var(--app-text-3); background: transparent; font-size: 1rem; flex-shrink: 0; display: inline-grid; place-items: center; }
.help-btn:hover, .help-btn:focus-visible, .help-btn.active { color: var(--app-primary); background: var(--app-primary-soft); }
.help-popover { --bs-popover-max-width: min(380px, calc(100vw - 24px)); --bs-popover-bg: #fff; --bs-popover-body-color: var(--app-text); --bs-popover-border-color: var(--app-border); --bs-popover-header-bg: var(--app-primary-soft); --bs-popover-header-color: var(--app-primary-dark); --bs-popover-body-padding-x: 1rem; --bs-popover-body-padding-y: .85rem; box-shadow: 0 12px 32px rgba(16, 24, 40, .16); font-size: .85rem; }
.help-popover .popover-header { font-weight: 700; font-size: .9rem; }
.help-pop p { margin: 0 0 .6rem; color: var(--app-text); }
.help-pop .help-heading { display: flex; align-items: center; gap: .4rem; font-weight: 600; font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--app-text-2); margin: .6rem 0 .3rem; }
.help-pop .help-heading i { color: var(--app-primary); }
.help-pop ol, .help-pop ul { padding-left: 1.15rem; margin: 0; color: var(--app-text-2); }
.help-pop li { margin-bottom: .2rem; }
.topbar-sub { font-size: .76rem; color: var(--app-text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.notif-dot { position: absolute; top: 4px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--app-danger); color: #fff; font-size: .65rem; font-weight: 700; display: grid; place-items: center; border: 2px solid #fff; }
.notif-menu { width: 340px; max-width: calc(100vw - 24px); padding: 0; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--app-border); }
.notif-header { display: flex; justify-content: space-between; align-items: center; padding: .85rem 1rem; border-bottom: 1px solid var(--app-border); }
.notif-item { display: flex; gap: .75rem; align-items: center; padding: .7rem 1rem; white-space: normal; }
.notif-icon { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; flex-shrink: 0; }
.notif-empty { display: flex; flex-direction: column; align-items: center; gap: .3rem; padding: 1.5rem; color: var(--app-text-3); font-size: .875rem; }
.notif-empty i { font-size: 1.6rem; color: var(--app-success); }
.notif-footer { border-top: 1px solid var(--app-border); padding: .6rem 1rem; text-align: center; font-size: .85rem; font-weight: 500; }
.user-chip { display: flex; align-items: center; gap: .6rem; padding: .25rem .5rem .25rem .25rem; border-radius: 999px; border: 1px solid transparent; background: transparent; }
.user-chip:hover { background: #f3f4f6; }
.avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--app-primary-soft); color: var(--app-primary-dark); display: grid; place-items: center; font-weight: 700; font-size: .82rem; flex-shrink: 0; }
.user-meta { flex-direction: column; align-items: flex-start; line-height: 1.15; }
.user-name { font-weight: 600; font-size: .86rem; max-width: 160px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-role { font-size: .72rem; color: var(--app-text-3); }

/* ---------- Konten ---------- */
.content { padding: 1.5rem; flex: 1; width: 100%; max-width: 1600px; }
.page-actions-bar { display: flex; justify-content: flex-end; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: 1rem; }
.list-actions { display: flex; justify-content: flex-end; align-items: center; gap: .5rem; flex-wrap: wrap; padding: .75rem 1.25rem; border-bottom: 1px solid var(--app-border); background: #fafafa; }
.list-actions-footer { border-top: 1px solid var(--app-border); border-bottom: 0; border-radius: 0 0 var(--radius) var(--radius); }

.card { border: 1px solid var(--app-border); border-radius: var(--radius); box-shadow: var(--shadow-sm); background: var(--app-surface); }
.card-header { background: transparent; border-bottom: 1px solid var(--app-border); padding: .9rem 1.25rem; display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap; }
.card-title { font-size: .98rem; font-weight: 600; margin: 0; display: flex; align-items: center; gap: .5rem; }
.card-title i { color: var(--app-primary); }
.card-body { padding: 1.25rem; }
.card-footer { background: #fafafa; border-top: 1px solid var(--app-border); }
.section-title { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--app-text-3); font-weight: 600; margin-bottom: .75rem; }

/* Stat card */
.stat-card { position: relative; display: flex; gap: .9rem; align-items: center; padding: 1.1rem 1.15rem; background: var(--app-surface); border: 1px solid var(--app-border); border-radius: var(--radius); box-shadow: var(--shadow-sm); height: 100%; transition: border-color .15s, box-shadow .15s; }
.stat-card:has(.stretched-link):hover { border-color: rgba(var(--app-primary-rgb), .45); box-shadow: var(--shadow); }
.stat-icon { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; font-size: 1.3rem; flex-shrink: 0; }
.stat-label { font-size: .8rem; color: var(--app-text-3); font-weight: 500; }
.stat-value { font-size: 1.28rem; font-weight: 700; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.stat-hint { font-size: .76rem; color: var(--app-text-3); margin-top: .1rem; }
.tone-primary { background: var(--app-primary-soft); color: var(--app-primary-dark); }
.tone-success { background: #dcfce7; color: #166534; }
.tone-danger { background: #fee2e2; color: #991b1b; }
.tone-warning { background: #fef3c7; color: #92400e; }
.tone-info { background: #e0f2fe; color: #075985; }
.tone-slate { background: #f1f5f9; color: #334155; }
.text-positive { color: var(--app-success) !important; }
.text-negative { color: var(--app-danger) !important; }

/* Badge soft */
.badge { font-weight: 600; font-size: .72rem; padding: .38em .65em; border-radius: 6px; }
.badge-soft-success { background: #dcfce7; color: #166534; }
.badge-soft-warning { background: #fef3c7; color: #92400e; }
.badge-soft-danger { background: #fee2e2; color: #991b1b; }
.badge-soft-primary { background: var(--app-primary-soft); color: var(--app-primary-dark); }
.badge-soft-secondary { background: #f1f5f9; color: #475569; }
.badge-soft-info { background: #e0f2fe; color: #075985; }

/* ---------- Toolbar daftar ---------- */
.list-toolbar { display: flex; gap: .6rem; align-items: flex-end; flex-wrap: wrap; padding: 1rem 1.25rem; border-bottom: 1px solid var(--app-border); }
.search-box { position: relative; flex: 1 1 240px; max-width: 360px; }
.search-box i { position: absolute; left: .8rem; top: 50%; transform: translateY(-50%); color: var(--app-text-3); }
.search-box .form-control { padding-left: 2.2rem; }
.filter-panel { gap: .6rem; align-items: flex-end; flex-wrap: wrap; }
.filter-field { min-width: 150px; }
.filter-field .form-label { color: var(--app-text-3); }

/* ---------- Tabel ---------- */
.table-app { margin: 0; --bs-table-bg: transparent; }
.table-app > :not(caption) > * > * { padding: .75rem 1rem; border-bottom-color: var(--app-border); vertical-align: middle; }
.table-app thead th { font-size: .74rem; text-transform: uppercase; letter-spacing: .04em; color: var(--app-text-3); font-weight: 600; background: #f9fafb; white-space: nowrap; }
.table-app tbody tr:hover { background: #fafafa; }
.table-app tfoot td, .table-app tfoot th { font-weight: 700; background: #f9fafb; }
.table-app .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.table-app tr.row-muted { color: var(--app-text-3); }
.table-app tr.row-muted td:not(:last-child) { text-decoration: line-through; text-decoration-color: rgba(0, 0, 0, .25); }
.sort-link { color: inherit; display: inline-flex; gap: .3rem; align-items: center; }
.sort-link i { opacity: .45; font-size: .8rem; }
.sort-link.active { color: var(--app-primary-dark); }
.sort-link.active i { opacity: 1; }
.cell-title { font-weight: 600; color: var(--app-text); }
a.cell-title:hover { color: var(--app-primary); }
.cell-sub { font-size: .78rem; color: var(--app-text-3); }
.row-actions { display: flex; gap: .25rem; justify-content: flex-end; }
.row-actions .btn { padding: .3rem .55rem; }
.pagination-bar { display: flex; justify-content: space-between; align-items: center; gap: .75rem; flex-wrap: wrap; padding: .85rem 1.25rem; border-top: 1px solid var(--app-border); }
.per-page { width: auto; min-height: 32px; }
.pagination { --bs-pagination-active-bg: var(--app-primary); --bs-pagination-active-border-color: var(--app-primary); --bs-pagination-active-color: var(--app-on-primary); --bs-pagination-color: var(--app-text-2); }

/* Report table styling */
.row-heading td { font-weight: 700; background: #f9fafb; text-transform: uppercase; font-size: .78rem; letter-spacing: .05em; color: var(--app-text-2); }
.row-subtotal td { font-weight: 600; border-top: 1px solid var(--app-border-strong); }
.row-total td { font-weight: 700; background: var(--app-primary-soft); }
.row-grand td { font-weight: 800; font-size: 1.02rem; background: var(--app-primary); color: var(--app-on-primary); }

/* ---------- Empty / loading ---------- */
.empty-state { text-align: center; padding: 3rem 1.5rem; }
.empty-icon { width: 64px; height: 64px; border-radius: 18px; background: var(--app-primary-soft); color: var(--app-primary); display: grid; place-items: center; font-size: 1.8rem; margin: 0 auto 1rem; }
.page-loader { position: fixed; top: 0; left: 0; height: 3px; width: 0; background: var(--app-primary); z-index: 2000; transition: width .3s ease, opacity .3s; opacity: 0; }
.page-loader.loading { opacity: 1; width: 70%; transition: width 8s cubic-bezier(.1, .7, .1, 1); }
.chart-box { position: relative; height: 280px; }
.chart-loading { position: absolute; inset: 0; display: grid; place-items: center; color: var(--app-text-3); font-size: .85rem; }

/* ---------- Detail ---------- */
.detail-list { margin: 0; }
.detail-row { display: flex; justify-content: space-between; gap: 1rem; padding: .55rem 0; border-bottom: 1px dashed var(--app-border); font-size: .9rem; }
.detail-row:last-child { border-bottom: 0; }
.detail-row dt { font-weight: 500; color: var(--app-text-3); }
.detail-row dd { margin: 0; text-align: right; font-weight: 500; }
.summary-box { background: #f9fafb; border: 1px solid var(--app-border); border-radius: var(--radius-sm); padding: 1rem; }
.summary-line { display: flex; justify-content: space-between; padding: .3rem 0; font-variant-numeric: tabular-nums; }
.summary-line.total { border-top: 1px solid var(--app-border-strong); margin-top: .35rem; padding-top: .6rem; font-weight: 700; font-size: 1.05rem; }
/* Kalkulasi harga */
.calc-block { padding-bottom: 1rem; margin-bottom: 1rem; border-bottom: 1px dashed var(--app-border); }
.calc-block:last-child { border-bottom: 0; margin-bottom: 0; }
.calc-block .mb-3 { margin-bottom: .6rem !important; }
.calc-line-result { display: flex; justify-content: space-between; align-items: center; gap: 1rem; background: #f9fafb; border-radius: var(--radius-sm); padding: .45rem .75rem; font-variant-numeric: tabular-nums; }
@media (min-width: 1200px) { .calc-summary-card { position: sticky; top: 5rem; } }
.timeline { list-style: none; padding: 0; margin: 0; }
.timeline li { display: flex; gap: .75rem; padding: .6rem 0; border-bottom: 1px solid var(--app-border); }
.timeline li:last-child { border-bottom: 0; }

/* Line item editor */
.line-items .table-app > :not(caption) > * > * { padding: .5rem; }
.line-items .form-control, .line-items .form-select { min-height: 38px; }
.line-items .col-remove { width: 44px; }
.line-items td.col-main { min-width: 260px; }
.card-body > .form-actions:first-child { border-top: 0; margin-top: 0; padding-top: 0; }
.line-total { font-weight: 600; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.stock-hint { font-size: .74rem; color: var(--app-text-3); margin-top: .2rem; }
.item-size { min-height: 38px; display: flex; align-items: center; font-weight: 600; white-space: nowrap; }
.product-info { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: .5rem; background: #f9fafb; border: 1px solid var(--app-border); border-radius: var(--radius-sm); padding: .6rem .8rem; margin: -.5rem 0 1rem; }
.product-info span { display: block; font-size: .74rem; color: var(--app-text-3); }
.product-info strong { font-size: .9rem; }
.doc-signatures { display: none; }
.offer-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; padding: .6rem 1rem; border-bottom: 1px solid var(--app-border); background: #f9fafb; }
.payment-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.payment-option input { position: absolute; opacity: 0; pointer-events: none; }
.payment-option label { display: flex; flex-direction: column; align-items: center; gap: .25rem; padding: .75rem .5rem; border: 1.5px solid var(--app-border-strong); border-radius: var(--radius-sm); cursor: pointer; font-weight: 500; font-size: .875rem; text-align: center; background: #fff; transition: all .15s; }
.payment-option label i { font-size: 1.25rem; color: var(--app-text-3); }
.payment-option input:checked + label { border-color: var(--app-primary); background: var(--app-primary-soft); color: var(--app-primary-dark); }
.payment-option input:checked + label i { color: var(--app-primary); }
.payment-option input:focus-visible + label { box-shadow: 0 0 0 .2rem rgba(var(--app-primary-rgb), .25); }

/* Report cards */
.report-card { display: flex; gap: .9rem; padding: 1rem 1.1rem; border: 1px solid var(--app-border); border-radius: var(--radius); background: #fff; color: var(--app-text); height: 100%; transition: all .15s; }
.report-card:hover { border-color: var(--app-primary); box-shadow: var(--shadow); color: var(--app-text); }
.report-card .stat-icon { width: 42px; height: 42px; font-size: 1.15rem; }
.report-card h6 { margin: 0 0 .2rem; font-weight: 600; }
.report-card p { margin: 0; font-size: .82rem; color: var(--app-text-3); }
.progress-thin { height: 6px; border-radius: 3px; background: #f1f5f9; }
.progress-thin .progress-bar { background: var(--app-primary); border-radius: 3px; }

/* Toast & modal */
.toast-stack { top: calc(var(--topbar-h) + 12px); right: 16px; z-index: 1090; }
.app-toast { border: 0; border-radius: var(--radius); box-shadow: 0 10px 30px rgba(0, 0, 0, .12); border-left: 4px solid; background: #fff; width: 360px; max-width: calc(100vw - 32px); }
.toast-success { border-left-color: var(--app-success); } .toast-success .toast-icon { color: var(--app-success); }
.toast-danger { border-left-color: var(--app-danger); } .toast-danger .toast-icon { color: var(--app-danger); }
.toast-warning { border-left-color: #d97706; } .toast-warning .toast-icon { color: #d97706; }
.toast-info { border-left-color: var(--app-info); } .toast-info .toast-icon { color: var(--app-info); }
.toast-icon { font-size: 1.15rem; margin-top: .05rem; }
.modal-content { border: 0; border-radius: 16px; }
.confirm-icon { width: 56px; height: 56px; border-radius: 50%; background: #fee2e2; color: var(--app-danger); display: grid; place-items: center; font-size: 1.5rem; margin: 0 auto; }

/* Auth */
.auth-body { min-height: 100vh; display: grid; place-items: center; padding: 1.5rem 1rem; background: linear-gradient(135deg, var(--app-primary-soft), #f4f5f7 60%); }
.auth-card { width: 100%; max-width: 420px; }
.auth-brand { text-align: center; margin-bottom: 1.5rem; }
.auth-brand .brand-logo, .auth-brand .brand-mark { width: 60px; height: 60px; margin: 0 auto .75rem; font-size: 1.6rem; border-radius: 16px; }
.auth-brand .brand-logo { box-shadow: var(--shadow); }
.error-page { min-height: 60vh; display: grid; place-items: center; text-align: center; }
.error-code { font-size: 4rem; font-weight: 800; color: var(--app-primary); line-height: 1; }

/* Bottom nav (mobile) */
.bottom-nav { position: fixed; left: 0; right: 0; bottom: 0; height: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); background: #fff; border-top: 1px solid var(--app-border); display: flex; z-index: 1035; box-shadow: 0 -2px 10px rgba(0, 0, 0, .04); }
.bottom-nav-item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: var(--app-text-3); font-size: .7rem; font-weight: 500; background: none; border: 0; position: relative; }
.bottom-nav-item i { font-size: 1.3rem; }
.bottom-nav-item.active { color: var(--app-primary); }
.bottom-nav-item.active::before { content: ""; position: absolute; top: 0; width: 32px; height: 3px; border-radius: 0 0 3px 3px; background: var(--app-primary); }
.sidebar-backdrop { display: none; }

/* ---------- Mobile ---------- */
@media (max-width: 991.98px) {
  :root { --topbar-h: 56px; }
  .sidebar { transform: translateX(-100%); width: min(84vw, 300px); }
  body.sidebar-open .sidebar { transform: translateX(0); box-shadow: 0 0 40px rgba(0, 0, 0, .3); }
  body.sidebar-open .sidebar-backdrop { display: block; position: fixed; inset: 0; background: rgba(17, 24, 39, .5); z-index: 1039; }
  body.sidebar-open { overflow: hidden; }
  .app-main { margin-left: 0; padding-bottom: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom)); }
  .topbar { padding: 0 .5rem 0 .25rem; }
  .content { padding: 1rem; }
  .page-actions-bar { margin-bottom: .85rem; }
  .page-actions-bar > .btn, .page-actions-bar > form, .list-actions > .btn { flex: 1 1 0; min-width: max-content; }
  .page-actions-bar > form .btn { width: 100%; }
  .list-actions { padding: .65rem .75rem; }
  .toast-stack { top: auto; bottom: calc(var(--bottom-nav-h) + 12px + env(safe-area-inset-bottom)); left: 16px; right: 16px; }
  .app-toast { width: 100%; }
  .list-toolbar { padding: .75rem; }
  .search-box { max-width: none; flex-basis: calc(100% - 100px); }
  .filter-panel { width: 100%; }
  .filter-panel.show, .filter-panel.collapsing { display: flex; }
  .filter-field { flex: 1 1 calc(50% - .6rem); min-width: 0; }
  .card-body { padding: 1rem; }
  .form-actions { position: sticky; bottom: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom)); background: #fff; margin: 0 -1rem -1rem; padding: .75rem 1rem; z-index: 5; box-shadow: 0 -4px 12px rgba(0, 0, 0, .05); }
  .form-actions .btn { flex: 1; }
  .modal-sheet, .modal-dialog.modal-sheet-auto { margin: 0; position: fixed; bottom: 0; left: 0; right: 0; max-width: none; align-items: flex-end; min-height: auto; }
  .modal-sheet .modal-content, .modal-sheet-auto .modal-content { border-radius: 20px 20px 0 0; padding-bottom: env(safe-area-inset-bottom); }
  .modal.fade .modal-sheet, .modal.fade .modal-sheet-auto { transform: translateY(100%); transition: transform .25s ease-out; }
  .modal.show .modal-sheet, .modal.show .modal-sheet-auto { transform: none; }
  .stat-card { padding: .85rem; gap: .55rem; flex-direction: column; align-items: flex-start; }
  .stat-value { font-size: 1.02rem; white-space: normal; overflow-wrap: anywhere; }
  .stat-icon { width: 36px; height: 36px; font-size: 1rem; border-radius: 10px; }
  .payment-options { grid-template-columns: repeat(3, 1fr); }

  /* Tabel menjadi kartu di layar kecil */
  .table-cards thead { display: none; }
  .table-cards, .table-cards tbody, .table-cards tr, .table-cards td { display: block; width: 100%; }
  .table-cards tbody tr { padding: .85rem 1rem; border-bottom: 1px solid var(--app-border); position: relative; }
  .table-cards tbody tr:hover { background: transparent; }
  .table-cards > :not(caption) > * > * { padding: .18rem 0; border: 0; }
  .table-cards td[data-label] { display: flow-root; text-align: right; font-size: .875rem; }
  .table-cards td[data-label]::before { content: attr(data-label); float: left; margin-right: 1rem; color: var(--app-text-3); font-weight: 500; text-align: left; }
  .table-cards td.cell-primary { font-size: .95rem; padding-bottom: .35rem; padding-right: 5rem; }
  .table-cards td.cell-badge { position: absolute; top: .85rem; right: 1rem; width: auto; padding: 0; }
  .table-cards td.cell-actions { padding-top: .5rem; }
  .table-cards td.cell-actions .row-actions { justify-content: flex-start; }
  .table-cards td.hide-mobile { display: none; }
  .table-cards tfoot { display: block; }
  .table-cards tfoot tr { display: flex; justify-content: space-between; padding: .75rem 1rem; background: #f9fafb; }
  .table-cards tfoot td { display: block; width: auto; padding: 0; background: transparent; }
  .table-cards tfoot td:empty { display: none; }

  .line-items table thead { display: none; }
  .line-items table, .line-items tbody, .line-items tr, .line-items td { display: block; width: 100%; }
  .line-items tbody tr { border: 1px solid var(--app-border); border-radius: var(--radius-sm); margin-bottom: .6rem; padding: .6rem; position: relative; background: #fff; }
  .line-items td { border: 0 !important; padding: .25rem 0 !important; width: 100% !important; min-width: 0 !important; }
  .line-items td[data-label]::before { content: attr(data-label); display: block; font-size: .74rem; color: var(--app-text-3); font-weight: 500; margin-bottom: .15rem; }
  .line-items td.col-remove { position: absolute; top: .3rem; right: .3rem; width: auto !important; }
  .line-items td.line-total { text-align: left; }
  .line-items td.col-main { padding-right: 2.5rem !important; min-width: 0; }
  .line-items .item-size { min-height: 0; }
  .card-body > .form-actions:first-child { position: static; margin: 0; padding: 0; box-shadow: none; }
}

/* ---------- Print ---------- */
@media print {
  .sidebar, .topbar, .bottom-nav, .page-actions-bar, .list-actions, .list-toolbar, .pagination-bar, .no-print, .toast-stack { display: none !important; }
  .app-main { margin: 0 !important; padding: 0 !important; }
  .content { padding: 0 !important; max-width: none; }
  body { background: #fff; font-size: 11pt; }
  .card { box-shadow: none; border: 0; }
  .card-header { padding-left: 0; padding-right: 0; }
  .print-only { display: block !important; }
  a { color: inherit; }
  .doc-signatures { display: flex; justify-content: space-between; margin-top: 2.5rem; text-align: center; }
  .doc-signatures > div { min-width: 200px; }
  .doc-signatures .sign-space { height: 70px; }
}
.print-only { display: none; }