:root{
  --bg:#f4f7fb;
  --surface:#ffffff;
  --surface-2:#f8fafc;
  --text:#0f172a;
  --muted:#64748b;
  --line:#e5eaf1;
  --primary:#3157d5;
  --primary-strong:#2446bd;
  --sidebar:#0b1220;
  --sidebar-2:#101a2e;
  --success:#0f9f6e;
  --warning:#c88716;
  --danger:#d9485f;
  --radius:18px;
  --shadow:0 12px 35px rgba(15,23,42,.07);
}

*{box-sizing:border-box}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:14px;
}

a{text-decoration:none}

.app-layout{min-height:100vh}

.enterprise-sidebar{
  position:fixed;
  inset:0 auto 0 0;
  width:258px;
  background:linear-gradient(180deg,var(--sidebar) 0%,var(--sidebar-2) 100%);
  color:#fff;
  padding:22px 16px 18px;
  z-index:1040;
  display:flex;
  flex-direction:column;
  overflow-y:auto;
  box-shadow:18px 0 50px rgba(2,6,23,.08);
}

.brand-area{
  display:flex;
  align-items:center;
  gap:12px;
  padding:4px 8px 24px;
  border-bottom:1px solid rgba(255,255,255,.08);
  margin-bottom:20px;
}
.brand-logo{
  width:42px;height:42px;border-radius:13px;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#5f7cf1,#3157d5);
  font-weight:800;font-size:15px;
  box-shadow:0 8px 24px rgba(49,87,213,.35);
}
.brand-title{font-weight:800;letter-spacing:.7px;font-size:14px}
.brand-subtitle{font-size:11px;color:#94a3b8;margin-top:2px}

.nav-section-label{
  color:#64748b;
  font-size:10px;
  font-weight:800;
  letter-spacing:1.35px;
  padding:14px 12px 7px;
}

.enterprise-nav{display:flex;flex-direction:column;gap:4px}
.enterprise-nav a{
  color:#b8c3d7;
  padding:10px 12px;
  border-radius:11px;
  display:flex;
  align-items:center;
  gap:11px;
  transition:.18s ease;
  font-weight:550;
}
.enterprise-nav a i{font-size:16px;width:18px;text-align:center}
.enterprise-nav a:hover{color:#fff;background:rgba(255,255,255,.06)}
.enterprise-nav a.active{
  color:#fff;
  background:linear-gradient(135deg,rgba(68,98,222,.92),rgba(49,87,213,.92));
  box-shadow:0 8px 24px rgba(49,87,213,.20);
}
.sidebar-spacer{flex:1;min-height:22px}
.sidebar-bottom{padding-top:14px;border-top:1px solid rgba(255,255,255,.08)}

.main-shell{margin-left:258px;min-height:100vh}
.enterprise-topbar{
  height:72px;
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 28px;
  position:sticky;
  top:0;
  z-index:1020;
}
.topbar-title{font-weight:750;font-size:16px}
.topbar-context{font-size:11px;color:var(--muted);margin-top:2px}
.topbar-actions{display:flex;align-items:center;gap:14px}
.user-chip{display:flex;align-items:center;gap:9px;padding-left:14px;border-left:1px solid var(--line)}
.user-avatar{
  width:36px;height:36px;border-radius:11px;
  display:flex;align-items:center;justify-content:center;
  color:white;font-weight:800;
  background:linear-gradient(135deg,#0f172a,#334155);
}
.user-name{font-weight:700;font-size:12px;line-height:1.1}
.user-role{font-size:10px;color:var(--muted);text-transform:capitalize;margin-top:3px}
.sidebar-toggle{border:0;background:none;font-size:24px;margin-right:12px}

.enterprise-content{padding:28px;max-width:1600px;margin:0 auto}

.page-head{
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:18px;margin-bottom:24px;
}
.page-title{font-size:26px;font-weight:800;letter-spacing:-.5px;margin:0}
.page-subtitle{color:var(--muted);margin-top:5px}

.enterprise-card{
  background:var(--surface);
  border:1px solid rgba(226,232,240,.75);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.enterprise-card .card-header{
  background:transparent;border-bottom:1px solid var(--line);
  padding:18px 20px;font-weight:750;
}
.enterprise-card .card-body{padding:20px}

.kpi-card{
  background:var(--surface);
  border:1px solid rgba(226,232,240,.8);
  border-radius:18px;
  padding:19px;
  box-shadow:var(--shadow);
  height:100%;
}
.kpi-top{display:flex;align-items:center;justify-content:space-between}
.kpi-label{font-size:12px;color:var(--muted);font-weight:600}
.kpi-icon{
  width:38px;height:38px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  background:#eef2ff;color:var(--primary);font-size:17px;
}
.kpi-value{font-size:24px;font-weight:800;letter-spacing:-.5px;margin-top:14px}
.kpi-note{font-size:11px;color:var(--muted);margin-top:4px}

.btn{border-radius:10px;font-weight:650}
.btn-primary{background:var(--primary);border-color:var(--primary)}
.btn-primary:hover{background:var(--primary-strong);border-color:var(--primary-strong)}
.form-control,.form-select{
  border-radius:10px;border-color:#dbe2ea;padding:.65rem .8rem;
  box-shadow:none!important;
}
.form-control:focus,.form-select:focus{border-color:#9cb0ee}
.form-label{font-weight:650;color:#334155;font-size:12px}
.input-group-text{border-color:#dbe2ea;background:#f8fafc}

.table{--bs-table-bg:transparent}
.table thead th{
  color:#64748b;font-size:11px;text-transform:uppercase;
  letter-spacing:.55px;font-weight:800;border-bottom-color:var(--line);
  background:#fbfcfe;padding-top:13px;padding-bottom:13px;
}
.table tbody td{border-bottom-color:#edf1f5;padding-top:14px;padding-bottom:14px;vertical-align:middle}
.table tbody tr:last-child td{border-bottom:0}

.status-pill{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 9px;border-radius:999px;
  font-size:10px;font-weight:800;letter-spacing:.2px;
}
.status-pill::before{content:"";width:6px;height:6px;border-radius:50%}
.status-draft{background:#f1f5f9;color:#64748b}.status-draft::before{background:#94a3b8}
.status-unpaid{background:#eef2ff;color:#4058b8}.status-unpaid::before{background:#5b73d8}
.status-partial{background:#fff8e7;color:#a5680b}.status-partial::before{background:#d79a25}
.status-paid{background:#eafaf4;color:#087a54}.status-paid::before{background:#12a476}
.status-overdue{background:#fff0f2;color:#b72e44}.status-overdue::before{background:#dc4d63}
.status-cancelled{background:#f1f5f9;color:#64748b}.status-cancelled::before{background:#64748b}

.invoice-builder{
  display:grid;
  grid-template-columns:minmax(0,1fr) 340px;
  gap:22px;
  align-items:start;
}
.invoice-sticky{position:sticky;top:96px}
.line-item-card{border:1px solid var(--line);border-radius:14px;overflow:hidden}
.line-item-head{
  display:grid;
  grid-template-columns:2.2fr .7fr 1fr 1fr 42px;
  gap:10px;padding:10px 12px;background:#f8fafc;
  color:var(--muted);font-size:10px;text-transform:uppercase;font-weight:800;letter-spacing:.5px;
}
.line-item-row{
  display:grid;
  grid-template-columns:2.2fr .7fr 1fr 1fr 42px;
  gap:10px;padding:12px;border-top:1px solid var(--line);align-items:start;
}
.item-product-wrap{display:flex;flex-direction:column;gap:7px}
.item-subtotal{
  height:42px;display:flex;align-items:center;justify-content:flex-end;
  font-weight:750;white-space:nowrap;
}
.remove-row{
  width:38px;height:38px;border:1px solid #e2e8f0;border-radius:10px;
  background:#fff;color:#94a3b8;
}
.remove-row:hover{color:#d9485f;border-color:#f1b8c2}

.summary-row{display:flex;justify-content:space-between;gap:18px;padding:7px 0;color:#475569}
.summary-total{
  display:flex;justify-content:space-between;align-items:center;
  border-top:1px dashed #d8e0e8;margin-top:10px;padding-top:15px;
}
.summary-total .label{font-weight:800}
.summary-total .amount{font-size:22px;font-weight:850;color:var(--text)}

.invoice-hero{
  background:linear-gradient(135deg,#0f172a,#18284c);
  color:#fff;border-radius:20px;padding:24px;
  box-shadow:0 18px 45px rgba(15,23,42,.16);
}
.invoice-hero .muted{color:#a9b8d0}
.invoice-number{font-size:27px;font-weight:850;letter-spacing:-.5px}
.money-big{font-size:30px;font-weight:850;letter-spacing:-.6px}

@media(max-width:1100px){
  .invoice-builder{grid-template-columns:1fr}
  .invoice-sticky{position:static}
}
@media(max-width:991.98px){
  .enterprise-sidebar{transform:translateX(-100%);transition:.22s ease}
  .sidebar-open .enterprise-sidebar{transform:translateX(0)}
  .main-shell{margin-left:0}
  .enterprise-content{padding:20px}
}
@media(max-width:767.98px){
  .enterprise-topbar{padding:0 16px}
  .enterprise-content{padding:16px}
  .page-head{flex-direction:column}
  .line-item-head{display:none}
  .line-item-row{
    grid-template-columns:1fr 1fr;
  }
  .item-product-wrap{grid-column:1/-1}
  .item-subtotal{justify-content:flex-start}
}

/* ===== Tahap 4: Pembayaran, Kwitansi & Piutang ===== */
.receipt-amount-box{
  background:linear-gradient(135deg,#f7f9ff,#eef3ff);
  border:1px solid #dfe7fb;
  border-radius:16px;
  padding:22px;
}
.receipt-amount{
  font-size:30px;
  line-height:1.15;
  font-weight:850;
  letter-spacing:-.6px;
  margin:6px 0;
}


/* ===== Tahap 5: Branding Perusahaan ===== */
.company-logo-preview,
.company-logo-placeholder{
  width:100%;
  min-height:180px;
  border:1px dashed #cbd5e1;
  border-radius:16px;
  background:#f8fafc;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.company-logo-preview img{
  max-width:85%;
  max-height:150px;
  object-fit:contain;
}
.company-logo-placeholder{
  color:#94a3b8;
  font-size:54px;
}


/* ===== Tahap 6: Reports & Analytics ===== */
.analytics-chart-wrap{
  position:relative;
  min-height:340px;
}
.aging-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:13px 0;
  border-bottom:1px solid var(--line);
}
.aging-row:last-of-type{
  border-bottom:0;
}
.aging-label{
  font-weight:700;
  color:var(--text);
}
.aging-sub{
  font-size:11px;
  color:var(--muted);
  margin-top:2px;
}