/* =========================================================
   POS — Pusat Kendali Bisnis
   Design tokens & premium SaaS-style stylesheet
   ========================================================= */

:root{
  --navy-900:#0F2440;
  --navy-800:#153252;
  --navy-700:#1B3E63;
  --navy-accent:#2D5C8F;

  --bg:#F4F6FA;
  --surface:#FFFFFF;
  --border:#E4E9F0;

  --ink-900:#101828;
  --ink-700:#344054;
  --ink-500:#667085;
  --ink-400:#98A2B3;

  --green-600:#1E9E6B;
  --green-100:#E4F7EF;
  --red-600:#D14343;
  --red-100:#FCEAEA;
  --amber-600:#B7791F;
  --amber-100:#FCF3DE;
  --blue-600:#2D5C8F;
  --blue-100:#E8F0FA;

  --radius-lg:20px;
  --radius-md:16px;
  --radius-sm:10px;
  --shadow-card:0 10px 30px rgba(16,24,40,.06);
  --shadow-modal:0 24px 60px rgba(16,24,40,.24);

  --font-head:'Poppins', 'Inter', system-ui, sans-serif;
  --font-body:'Inter', system-ui, -apple-system, sans-serif;

  --sidebar-w:260px;
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--ink-900);
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
h1,h2,h3,h4{font-family:var(--font-head); margin:0; color:var(--ink-900); font-weight:600;}
p{margin:0;}
button{font-family:inherit;}
input,select{font-family:inherit;}
a{color:inherit;}
img{max-width:100%;}
::selection{background:var(--blue-100);}

.muted{color:var(--ink-500); font-size:14px;}

/* =========================== LAYOUT =========================== */
.main{
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

.content{
  flex:1;
  padding:20px 16px 40px;
  max-width:1100px;
  width:100%;
  margin:0 auto;
}

.page{display:none;}
.page.active{display:block; animation:fadeIn .25s ease;}
@keyframes fadeIn{from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:translateY(0);}}

.page-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:16px;
  margin-bottom:20px;
  flex-wrap:wrap;
}
.page-head h2{font-size:22px; margin-bottom:4px;}

/* =========================== SIDEBAR =========================== */
.sidebar{
  position:fixed;
  top:0; left:0; bottom:0;
  width:var(--sidebar-w);
  background:linear-gradient(180deg, var(--navy-900), var(--navy-800));
  color:#fff;
  display:flex;
  flex-direction:column;
  padding:22px 16px;
  z-index:60;
  transform:translateX(-100%);
  transition:transform .28s ease;
  padding-top:calc(22px + env(safe-area-inset-top,0px));
}
.sidebar.open{transform:translateX(0);}

.sidebar-brand{
  display:flex;
  align-items:center;
  gap:12px;
  padding:6px 8px 22px;
  border-bottom:1px solid rgba(255,255,255,.12);
  margin-bottom:14px;
}
.brand-mark{
  width:40px; height:40px;
  border-radius:12px;
  background:linear-gradient(135deg,#2D5C8F,#1E9E6B);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-head); font-weight:700; font-size:18px;
  flex-shrink:0;
}
.brand-name{font-family:var(--font-head); font-weight:700; font-size:16px; line-height:1.2;}
.brand-sub{font-size:12px; color:rgba(255,255,255,.6);}

.sidebar-nav{display:flex; flex-direction:column; gap:2px; flex:1; overflow-y:auto;}
.nav-item{
  display:flex; align-items:center; gap:12px;
  background:none; border:none; color:rgba(255,255,255,.78);
  padding:12px 12px; border-radius:12px; cursor:pointer;
  font-size:14.5px; font-weight:500; text-align:left;
  transition:background .15s ease, color .15s ease;
}
.nav-item svg{width:20px; height:20px; flex-shrink:0; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;}
.nav-item:hover{background:rgba(255,255,255,.06); color:#fff;}
.nav-item.active{background:rgba(255,255,255,.14); color:#fff;}
.nav-item.active svg{stroke:#7FD8B0;}

.sidebar-footer{
  border-top:1px solid rgba(255,255,255,.12);
  padding-top:14px; margin-top:10px;
}
.biz-name{font-weight:600; font-size:14px;}
.biz-tag{font-size:12px; color:rgba(255,255,255,.55);}

.overlay{
  position:fixed; inset:0; background:rgba(15,26,45,.45);
  z-index:50; opacity:0; pointer-events:none; transition:opacity .2s ease;
}
.overlay.show{opacity:1; pointer-events:auto;}

/* =========================== TOPBAR =========================== */
.topbar{
  position:sticky; top:0; z-index:30;
  display:flex; align-items:center; gap:12px;
  padding:14px 16px;
  padding-top:calc(14px + env(safe-area-inset-top,0px));
  background:rgba(244,246,250,.9);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--border);
}
.topbar-title{font-size:17px;}
.topbar-spacer{flex:1;}

.icon-btn{
  width:38px; height:38px;
  border-radius:10px;
  border:1px solid var(--border);
  background:var(--surface);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  color:var(--ink-700);
}
.icon-btn svg{width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round;}
.icon-btn:hover{background:var(--blue-100); color:var(--navy-800);}

.app-footer{
  text-align:center; font-size:12.5px; color:var(--ink-400);
  padding:18px 16px calc(18px + env(safe-area-inset-bottom,0px));
}

/* =========================== KPI CARDS =========================== */
.kpi-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:12px;
  margin-bottom:20px;
}
.kpi-card{
  background:var(--surface);
  border-radius:var(--radius-md);
  padding:18px;
  box-shadow:var(--shadow-card);
  border-top:3px solid var(--navy-accent);
}
.kpi-card.kpi-primary{border-top-color:var(--navy-accent);}
.kpi-card.kpi-positive{border-top-color:var(--green-600);}
.kpi-card.kpi-negative{border-top-color:var(--red-600);}
.kpi-card.kpi-accent{border-top-color:var(--amber-600);}

.kpi-label{font-size:12.5px; color:var(--ink-500); font-weight:600; text-transform:none; margin-bottom:8px;}
.kpi-value{font-family:var(--font-head); font-size:21px; font-weight:700; color:var(--ink-900); word-break:break-word;}
.kpi-value-sm{font-family:var(--font-head); font-size:18px; font-weight:700; margin-top:4px;}
.kpi-note{font-size:12px; color:var(--ink-400); margin-top:6px;}

/* =========================== CARD / GRID =========================== */
.grid-2{display:grid; grid-template-columns:1fr; gap:16px;}

.card{
  background:var(--surface);
  border-radius:var(--radius-lg);
  padding:20px;
  box-shadow:var(--shadow-card);
  margin-bottom:16px;
}
.card-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:6px;}
.card-head h3{font-size:15.5px;}

.link-btn{
  background:none; border:none; color:var(--navy-accent);
  font-weight:600; font-size:13.5px; cursor:pointer; padding:4px;
}
.link-btn:hover{text-decoration:underline;}

/* =========================== BUTTONS =========================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:11px 18px;
  border-radius:12px;
  font-size:14px; font-weight:600;
  border:1px solid transparent;
  cursor:pointer;
  transition:transform .05s ease, opacity .15s ease, background .15s ease;
  white-space:nowrap;
}
.btn svg{width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round;}
.btn:active{transform:scale(.98);}

.btn-primary{background:var(--navy-800); color:#fff;}
.btn-primary:hover{background:var(--navy-900);}

.btn-secondary{background:var(--blue-100); color:var(--navy-800);}
.btn-secondary:hover{background:#DCE9F7;}

.btn-ghost{background:none; color:var(--ink-700); border-color:var(--border);}
.btn-ghost:hover{background:var(--bg);}

.btn-danger{background:var(--red-600); color:#fff;}
.btn-danger:hover{background:#B93636;}

.btn-danger-outline{background:none; color:var(--red-600); border-color:var(--red-100);}
.btn-danger-outline:hover{background:var(--red-100);}

.btn-row{display:flex; flex-wrap:wrap; gap:10px;}

.btn-sm{padding:7px 12px; font-size:13px; border-radius:9px;}

/* =========================== FORM =========================== */
.input{
  width:100%;
  padding:11px 13px;
  border-radius:11px;
  border:1px solid var(--border);
  background:var(--surface);
  font-size:14.5px;
  color:var(--ink-900);
  outline:none;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.input:focus{border-color:var(--navy-accent); box-shadow:0 0 0 3px var(--blue-100);}

.field{margin-bottom:16px; display:flex; flex-direction:column; gap:6px;}
.field label{font-size:13.5px; font-weight:600; color:var(--ink-700);}
.field-hint{font-size:12px; color:var(--ink-400);}
.field-inline{display:flex; flex-direction:column; gap:6px; flex:1; font-size:13px; font-weight:600; color:var(--ink-700);}

.req{color:var(--red-600);}

.form-card{max-width:480px;}
.form-error{
  background:var(--red-100); color:var(--red-600);
  padding:10px 12px; border-radius:10px; font-size:13px;
  margin-bottom:14px;
}

.seg-control{display:flex; gap:8px;}
.seg-option{
  flex:1; position:relative;
}
.seg-option input{position:absolute; opacity:0; inset:0; cursor:pointer;}
.seg-option span{
  display:block; text-align:center; padding:10px; border-radius:11px;
  border:1px solid var(--border); font-size:13.5px; font-weight:600; color:var(--ink-500);
  transition:all .15s ease;
}
.seg-option input:checked + span{
  background:var(--navy-800); border-color:var(--navy-800); color:#fff;
}

.filter-row{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:14px;}
.filter-row .input{flex:1; min-width:140px;}

/* =========================== LIST ITEMS =========================== */
.list{display:flex; flex-direction:column;}
.list-item{
  display:flex; align-items:center; gap:12px;
  padding:14px 0;
  border-bottom:1px solid var(--border);
}
.list-item:last-child{border-bottom:none;}

.li-icon{
  width:42px; height:42px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0; font-size:18px;
}
.li-icon.bg-green{background:var(--green-100); color:var(--green-600);}
.li-icon.bg-red{background:var(--red-100); color:var(--red-600);}
.li-icon.bg-blue{background:var(--blue-100); color:var(--navy-accent);}
.li-icon.bg-amber{background:var(--amber-100); color:var(--amber-600);}

.li-body{flex:1; min-width:0;}
.li-title{font-weight:600; font-size:14.5px; color:var(--ink-900); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.li-sub{font-size:12.5px; color:var(--ink-500); margin-top:2px;}

.li-amount{font-weight:700; font-size:14.5px; white-space:nowrap;}
.li-amount.pos{color:var(--green-600);}
.li-amount.neg{color:var(--red-600);}

.li-side{display:flex; flex-direction:column; align-items:flex-end; gap:6px;}
.li-actions{display:flex; gap:6px; margin-top:2px;}

.badge{
  display:inline-flex; align-items:center; padding:3px 10px;
  border-radius:999px; font-size:11.5px; font-weight:700;
}
.badge-success{background:var(--green-100); color:var(--green-600);}
.badge-warning{background:var(--amber-100); color:var(--amber-600);}
.badge-danger{background:var(--red-100); color:var(--red-600);}

.icon-action{
  width:32px; height:32px; border-radius:9px;
  border:1px solid var(--border); background:var(--surface);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  color:var(--ink-500);
}
.icon-action svg{width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round;}
.icon-action:hover{background:var(--bg); color:var(--navy-800);}
.icon-action.wa{color:var(--green-600); border-color:var(--green-100);}
.icon-action.wa:hover{background:var(--green-100);}
.icon-action.danger{color:var(--red-600); border-color:var(--red-100);}
.icon-action.danger:hover{background:var(--red-100);}

/* =========================== EMPTY STATE =========================== */
.empty-state{
  text-align:center; padding:36px 16px; color:var(--ink-500);
}
.empty-icon{font-size:34px; margin-bottom:10px;}
.empty-state p{margin-bottom:14px; font-size:14px;}

/* =========================== KAS SUMMARY =========================== */
.kas-summary{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px;
}
.kas-summary-split{display:flex; gap:18px; font-size:13.5px; color:var(--ink-700); flex-wrap:wrap;}
.kas-summary-split strong{margin-left:4px;}
.dot{width:9px; height:9px; border-radius:50%; display:inline-block; margin-right:4px;}
.dot-positive{background:var(--green-600);}
.dot-negative{background:var(--red-600);}

.lap-pu-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px;}

/* =========================== MODAL =========================== */
.modal{
  position:fixed; inset:0; z-index:80;
  display:flex; align-items:flex-end; justify-content:center;
  background:rgba(15,26,45,.5);
  opacity:0; pointer-events:none;
  transition:opacity .2s ease;
}
.modal.open{opacity:1; pointer-events:auto;}
.modal-box{
  background:var(--surface);
  width:100%;
  max-width:480px;
  max-height:88vh;
  overflow-y:auto;
  border-radius:22px 22px 0 0;
  padding:22px 20px calc(22px + env(safe-area-inset-bottom,0px));
  box-shadow:var(--shadow-modal);
  transform:translateY(16px);
  transition:transform .25s ease;
}
.modal.open .modal-box{transform:translateY(0);}
.modal-box-sm{max-width:400px;}

.modal-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:16px;}
.modal-head h3{font-size:17px;}
.modal-head .icon-btn{border:none; background:var(--bg); font-size:18px;}

.modal-actions{display:flex; justify-content:flex-end; gap:10px; margin-top:6px;}
.confirm-text{font-size:14px; color:var(--ink-700); line-height:1.6; margin-bottom:18px;}

/* =========================== TOAST =========================== */
.toast{
  position:fixed; left:50%; bottom:24px;
  transform:translate(-50%, 20px);
  background:var(--navy-900); color:#fff;
  padding:13px 20px; border-radius:12px;
  font-size:14px; font-weight:500;
  box-shadow:var(--shadow-modal);
  opacity:0; pointer-events:none;
  transition:all .25s ease;
  z-index:100;
  max-width:90vw;
  display:flex; align-items:center; gap:10px;
}
.toast.show{opacity:1; transform:translate(-50%, 0);}
.toast.toast-success{background:var(--green-600);}
.toast.toast-error{background:var(--red-600);}

/* =========================== SCROLLBAR (desktop) =========================== */
.sidebar-nav::-webkit-scrollbar{width:5px;}
.sidebar-nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.2); border-radius:3px;}

/* =========================== FOCUS VISIBLE =========================== */
button:focus-visible, input:focus-visible, select:focus-visible{
  outline:2px solid var(--navy-accent); outline-offset:2px;
}

/* =========================== RESPONSIVE =========================== */
@media (min-width:640px){
  .kpi-grid{grid-template-columns:repeat(4,1fr);}
  .grid-2{grid-template-columns:1fr 1fr;}
}

@media (min-width:1024px){
  .sidebar{transform:translateX(0); box-shadow:2px 0 20px rgba(16,24,40,.08);}
  .main{margin-left:var(--sidebar-w);}
  .overlay{display:none;}
  #menuToggle{display:none;}
  .content{padding:32px 32px 48px;}
  .modal{align-items:center;}
  .modal-box{border-radius:22px; transform:translateY(8px);}
}

/* =========================== PRINT =========================== */
@media print{
  .sidebar, .topbar, .app-footer, #btnPrintLaporan, .filter-row, .overlay, .modal{display:none !important;}
  .main{margin-left:0;}
  body{background:#fff;}
  .content{max-width:100%; padding:0;}
  .page{display:none !important;}
  #page-laporan{display:block !important;}
  .card{box-shadow:none; border:1px solid #ddd;}
}