@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=JetBrains+Mono:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap');

:root{
  --paper:      #0E1512;
  --paper-card: #17211C;
  --surface-2:  #1E2A23;
  --ink:        #EAF0EB;
  --ink-soft:   #8CA096;
  --forest:     #3FA179;
  --forest-bright:#5FC79A;
  --forest-deep:#1F5A42;
  --forest-tint:rgba(63,161,121,.14);
  --amber:      #E0AC54;
  --amber-bright:#F0C173;
  --amber-tint: rgba(224,172,84,.14);
  --rust:       #EF6B54;
  --rust-tint:  rgba(239,107,84,.14);
  --line:       #263129;
  --line-strong:#37453C;
  --shadow: 0 1px 0 rgba(0,0,0,.25), 0 12px 30px -14px rgba(0,0,0,.55);
  color-scheme: dark;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  background:
    radial-gradient(1100px 480px at 88% -10%, rgba(63,161,121,0.14), transparent 60%),
    radial-gradient(700px 380px at 8% 105%, rgba(63,161,121,0.07), transparent 60%),
    var(--paper);
  color:var(--ink);
  font-family:'Inter', sans-serif;
  min-height:100vh;
}

.app{ display:flex; align-items:flex-start; max-width:1400px; margin:0 auto; }

/* ===== SIDEBAR ===== */
.sidebar{
  width:212px; flex-shrink:0; position:sticky; top:0; height:100vh;
  padding: 24px 14px; border-right:1px solid var(--line);
  display:flex; flex-direction:column; gap:4px;
}
.sb-brand{ display:flex; align-items:center; gap:10px; padding:2px 8px 22px; }
.sb-mark{
  width:32px; height:32px; border-radius:8px; background:var(--forest-deep); color:#F3F2E9;
  font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:14px;
  display:flex; align-items:center; justify-content:center;
}
.sb-name{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:14.5px; }
.nav-item{
  display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:9px;
  font-size:13px; font-weight:600; color:var(--ink-soft); cursor:pointer; border:1px solid transparent;
  transition: all .15s ease;
}
.nav-item:hover{ background:rgba(63,161,121,.10); }
.nav-item.active{ background:var(--forest-tint); color:var(--forest-bright); border-color:rgba(63,161,121,.3); }
.nav-item .ic{ font-size:15px; width:18px; text-align:center; }
.sb-foot{ margin-top:auto; padding:10px 8px; font-size:10.5px; color:var(--ink-soft); border-top:1px solid var(--line); line-height:1.5; }

.content{ flex:1; min-width:0; padding: 24px 26px 60px; }
.page{ display:none; }
.page.active{ display:block; }

@media (max-width: 760px){
  .app{ flex-direction:column; }
  .sidebar{ width:100%; height:auto; position:relative; flex-direction:row; align-items:center; overflow-x:auto; border-right:none; border-bottom:1px solid var(--line); padding:12px; }
  .sb-foot{ display:none; }
  .content{ padding:16px; }
}

.wrap{ max-width: 1220px; margin: 0; }

/* ===== HEADER (POS strip) ===== */
.header{
  display:flex; align-items:center; justify-content:space-between;
  background: linear-gradient(135deg, #1F5A42, #16402F);
  color: #F3F2E9;
  border-radius: 14px;
  padding: 16px 22px;
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.04);
  border: 1px solid rgba(63,161,121,.25);
  flex-wrap: wrap;
  gap:12px;
}
.brand{ display:flex; align-items:center; gap:12px; }
.brand-mark{
  width:38px; height:38px; border-radius:9px;
  background: var(--amber);
  display:flex; align-items:center; justify-content:center;
  font-family:'Space Grotesk', sans-serif; font-weight:700; color:var(--forest-deep);
  font-size:17px;
}
.brand-name{ font-family:'Space Grotesk', sans-serif; font-weight:700; font-size:19px; letter-spacing:.2px; }
.brand-sub{ font-size:12px; color:#CFE3DA; margin-top:1px; }
.header-right{ display:flex; align-items:center; gap:18px; }
.live-dot{ display:inline-flex; align-items:center; gap:7px; font-size:12.5px; color:#CFE3DA; }
.live-dot::before{
  content:''; width:7px; height:7px; border-radius:50%; background:#8CF0B7;
  box-shadow:0 0 0 3px rgba(140,240,183,.25);
}
.mp-badges{ display:flex; gap:6px; }
.mp-badge{
  font-size:11px; font-family:'JetBrains Mono', monospace; padding:3px 8px;
  border-radius:999px; background:rgba(255,255,255,.12); color:#EAF3EE; border:1px solid rgba(255,255,255,.18);
}

/* ===== NOTICE ===== */
.notice{
  margin-top:14px;
  font-size:12.5px; color: var(--ink-soft);
  background: var(--paper-card);
  border: 1px dashed var(--line-strong);
  border-radius: 10px;
  padding: 9px 14px;
  display:flex; gap:8px; align-items:flex-start;
}
.notice b{ color:var(--ink); }

/* ===== CONTROL BAR ===== */
.controls{
  margin-top:18px;
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px;
}
.mode-toggle{
  display:inline-flex; background:var(--paper-card); border:1px solid var(--line); border-radius:11px; padding:4px;
  box-shadow: var(--shadow);
}
.mode-btn{
  border:none; background:transparent; padding:8px 18px; font-family:'Space Grotesk',sans-serif;
  font-weight:600; font-size:13.5px; color:var(--ink-soft); border-radius:8px; cursor:pointer;
  transition: all .15s ease;
}
.mode-btn.active{ background:var(--forest); color:#fff; }

.date-picker{
  display:flex; align-items:center; gap:10px;
  background:var(--paper-card); border:1px solid var(--line); border-radius:11px; padding:8px 14px;
  box-shadow: var(--shadow);
}
.date-picker label{ font-size:12px; color:var(--ink-soft); font-weight:600; }
.date-picker input{
  font-family:'JetBrains Mono', monospace; font-size:13.5px; border:none; background:transparent; color:var(--ink);
  outline:none; font-weight:600;
}
.nav-btn{
  width:26px; height:26px; border-radius:7px; border:1px solid var(--line); background:var(--surface-2); cursor:pointer;
  color:var(--ink-soft); font-size:13px; display:flex; align-items:center; justify-content:center;
}
.nav-btn:hover{ background:var(--forest-tint); color:var(--forest-bright); }

/* ===== PIPELINE ===== */
.pipeline{
  margin-top:20px;
  background: var(--paper-card);
  border:1px solid var(--line);
  border-radius: 14px;
  padding: 16px 18px;
  box-shadow: var(--shadow);
}
.pipeline-title{ font-size:11.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-soft); font-weight:700; margin-bottom:12px; }
.pipeline-row{ display:flex; align-items:stretch; gap:0; flex-wrap:wrap; }
.pstage{
  flex:1; min-width:150px; position:relative; cursor:pointer;
  padding:12px 16px; border-radius:10px; border:1.5px solid transparent;
  display:flex; flex-direction:column; gap:4px; transition: all .15s ease;
}
.pstage + .pstage{ margin-left:8px; }
.pstage:hover{ background: rgba(63,161,121,.08); }
.pstage.active{ border-color: var(--forest); background: var(--forest-tint); }
.pstage .plabel{ font-size:12px; color:var(--ink-soft); font-weight:600; }
.pstage .pcount{ font-family:'Space Grotesk',sans-serif; font-size:24px; font-weight:700; color:var(--ink); }
.pstage .pcount .u{ font-size:12px; font-weight:500; color:var(--ink-soft); margin-left:3px;}
.pstage.active .plabel{ color: var(--forest-deep); }
.parrow{ align-self:center; color: var(--line-strong); font-size:18px; padding: 0 6px; }
.pstage[data-status="selesai"].active{ border-color:var(--forest); }

/* ===== CARDS ===== */
.cards{
  margin-top:16px;
  display:grid; grid-template-columns: repeat(4, 1fr); gap:12px;
}
@media (max-width: 900px){ .cards{ grid-template-columns: repeat(2,1fr);} }
.card{
  background:var(--paper-card); border:1px solid var(--line); border-radius:14px; padding:16px 18px;
  box-shadow: var(--shadow);
}
.card .clabel{ font-size:11.5px; color:var(--ink-soft); font-weight:600; text-transform:uppercase; letter-spacing:.05em; }
.card .cval{ font-family:'JetBrains Mono', monospace; font-weight:700; font-size:20px; margin-top:6px; }
.card .csub{ font-size:11.5px; color:var(--ink-soft); margin-top:4px; }
.card.pos .cval{ color: var(--forest); }
.card.neg .cval{ color: var(--rust); }
.card.neutral .cval{ color: var(--amber); }

/* ===== MAIN GRID ===== */
.main-grid{
  margin-top:16px;
  display:grid; grid-template-columns: 1.5fr 1fr; gap:16px; align-items:start;
}
@media (max-width: 980px){ .main-grid{ grid-template-columns: 1fr; } }

.panel{
  background:var(--paper-card); border:1px solid var(--line); border-radius:14px; overflow:hidden;
  box-shadow: var(--shadow);
}
.panel-head{
  padding:14px 18px; border-bottom:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between;
}
.panel-head h3{ margin:0; font-family:'Space Grotesk',sans-serif; font-size:14.5px; }
.panel-head span{ font-size:11.5px; color:var(--ink-soft); font-family:'JetBrains Mono',monospace;}

table{ width:100%; border-collapse:collapse; font-size:12.8px; }
thead th{
  text-align:left; padding:9px 16px; color:var(--ink-soft); font-weight:600; font-size:11px;
  text-transform:uppercase; letter-spacing:.04em; border-bottom:1px solid var(--line);
}
tbody td{ padding:10px 16px; border-bottom:1px solid var(--line); vertical-align:middle; }
tbody tr:last-child td{ border-bottom:none; }
tbody tr:hover{ background: rgba(63,161,121,.06); }
.oid{ font-family:'JetBrains Mono', monospace; color:var(--ink-soft); }
.status-pill{
  font-size:10.5px; font-weight:700; padding:3px 9px; border-radius:999px; display:inline-block;
}
.status-pill.dikemas{ background:var(--amber-tint); color:var(--amber-bright); }
.status-pill.dikirim{ background:rgba(122,156,224,.16); color:#9FC0F5; }
.status-pill.selesai{ background:var(--forest-tint); color:var(--forest-bright); }
.status-pill.dibatalkan{ background:var(--rust-tint); color:var(--rust); }
.omoney{ font-family:'JetBrains Mono', monospace; text-align:right; font-weight:600; }
.empty-row td{ text-align:center; padding: 34px 12px; color:var(--ink-soft); font-size:12.5px; }

.month-chart{ padding:16px 18px; }
.mbar-row{ display:flex; align-items:center; gap:10px; margin-bottom:7px; }
.mbar-day{ width:22px; font-family:'JetBrains Mono',monospace; font-size:10.5px; color:var(--ink-soft); text-align:right; }
.mbar-track{ flex:1; background:var(--surface-2); border-radius:4px; height:9px; overflow:hidden; }
.mbar-fill{ height:100%; background: linear-gradient(90deg, var(--forest), #2E8067); border-radius:4px; }
.mbar-val{ width:74px; font-family:'JetBrains Mono',monospace; font-size:10.5px; color:var(--ink-soft); text-align:right; }

/* ===== RECEIPT (signature element) ===== */
.receipt-wrap{ position:relative; padding-bottom: 22px; }
.receipt{
  background: var(--paper-card);
  border:1px solid var(--line);
  border-radius:14px 14px 0 0;
  box-shadow: var(--shadow);
  position:relative;
  padding: 4px 0 18px;
}
.receipt::after{
  content:'';
  position:absolute; left:0; right:0; bottom:-11px; height:12px;
  background:
    linear-gradient(-45deg, var(--paper) 6px, transparent 0),
    linear-gradient(45deg, var(--paper) 6px, transparent 0);
  background-size: 12px 12px;
  background-position: left bottom;
  background-repeat: repeat-x;
}
.receipt-top{
  text-align:center; padding: 18px 20px 12px;
  border-bottom: 1px dashed var(--line-strong);
  margin: 0 18px;
}
.receipt-top .rname{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:15px; letter-spacing:.03em; }
.receipt-top .rdate{ font-family:'JetBrains Mono',monospace; font-size:11.5px; color:var(--ink-soft); margin-top:4px; }
.receipt-body{ padding: 14px 20px 4px; }
.rline{
  display:flex; justify-content:space-between; font-family:'JetBrains Mono',monospace; font-size:12.5px;
  padding:6px 0; color:var(--ink);
}
.rline.minus{ color:var(--rust); }
.rline .rlabel{ color:var(--ink-soft); }
.rline.minus .rlabel{ color:var(--rust); opacity:.85; }
.rdiv{ border-top:1px dashed var(--line-strong); margin: 8px 0 4px; }
.rtotal{
  display:flex; justify-content:space-between; align-items:baseline;
  padding: 12px 20px 6px; margin: 4px 18px 0;
  border-top: 2px solid var(--ink);
}
.rtotal .tlabel{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:13px; }
.rtotal .tval{ font-family:'JetBrains Mono',monospace; font-weight:700; font-size:19px; }
.rtotal .tval.pos{ color:var(--forest); }
.rtotal .tval.neg{ color:var(--rust); }
.stamp{
  position:absolute; top:14px; right:16px;
  border:2px solid var(--rust); color:var(--rust);
  font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:10px;
  padding:3px 9px; border-radius:5px; transform: rotate(6deg);
  letter-spacing:.06em; opacity:.85;
}

.footnote{
  margin-top:26px; font-size:11.5px; color:var(--ink-soft); text-align:center;
  border-top:1px solid var(--line); padding-top:14px;
}

/* ===== MARKETPLACE FILTER CHIPS ===== */
.mp-filter{ display:flex; gap:8px; flex-wrap:wrap; }
.mp-chip{
  display:flex; align-items:center; gap:6px; padding:7px 13px; border-radius:999px;
  border:1px solid var(--line); background:var(--paper-card); font-size:12.5px; font-weight:600;
  color:var(--ink-soft); cursor:pointer; transition:all .15s ease;
}
.mp-chip .dot{ width:7px; height:7px; border-radius:50%; }
.mp-chip.active{ background:var(--forest); color:#0B1410; border-color:var(--forest); font-weight:700; }
.mp-chip[data-mp="shopee"] .dot{ background:#EE4D2D; }
.mp-chip[data-mp="tokopedia"] .dot{ background:#42B549; }
.mp-chip[data-mp="tiktok"] .dot{ background:#111; }
.mp-chip[data-mp="lazada"] .dot{ background:#0F146D; }
.mp-chip[data-mp="semua"] .dot{ background:var(--amber); }

/* ===== PAGE HEADER (generic) ===== */
.page-head{ margin-bottom:18px; }
.page-head h1{ font-family:'Space Grotesk',sans-serif; font-size:20px; margin:0 0 4px; }
.page-head p{ font-size:12.5px; color:var(--ink-soft); margin:0; }

/* ===== MASTER PRODUK ===== */
.produk-toolbar{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-bottom:14px;
}
.produk-search{
  flex:1; min-width:200px; max-width:340px;
  background:var(--paper-card); border:1px solid var(--line); border-radius:10px;
  padding:9px 13px; font-size:13px; display:flex; align-items:center; gap:8px; color:var(--ink-soft);
}
.produk-search input{ border:none; background:transparent; outline:none; font-size:13px; color:var(--ink); flex:1; font-family:'Inter',sans-serif; }
.btn{
  font-family:'Inter',sans-serif; font-weight:600; font-size:12.8px; padding:9px 16px; border-radius:10px;
  border:1px solid var(--line); background:var(--paper-card); color:var(--ink); cursor:pointer;
  display:inline-flex; align-items:center; gap:7px; transition:all .15s ease;
}
.btn:hover{ background:var(--surface-2); box-shadow:var(--shadow); }
.btn.primary{ background:var(--forest); color:#fff; border-color:var(--forest); }
.btn.primary:hover{ background:var(--forest-deep); }
.btn-row{ display:flex; gap:8px; }

.import-banner{
  display:none; align-items:center; gap:10px; background:var(--forest-tint); color:var(--forest-bright);
  border:1px solid rgba(63,161,121,.3); border-radius:10px; padding:10px 14px; font-size:12.5px; font-weight:600;
  margin-bottom:14px;
}
.import-banner.show{ display:flex; }

.produk-panel{ background:var(--paper-card); border:1px solid var(--line); border-radius:14px; overflow:hidden; box-shadow:var(--shadow); }
.sku{ font-family:'JetBrains Mono',monospace; color:var(--ink-soft); font-size:12px; }
.margin-tag{ font-family:'JetBrains Mono',monospace; font-size:11.5px; font-weight:700; padding:2px 8px; border-radius:6px; }
.margin-tag.good{ background:var(--forest-tint); color:var(--forest-bright); }
.margin-tag.mid{ background:var(--amber-tint); color:var(--amber-bright); }
.margin-tag.low{ background:var(--rust-tint); color:var(--rust); }
.prod-edit{ font-size:11.5px; color:var(--ink-soft); font-weight:600; white-space:nowrap; }
.prod-act-edit, .prod-act-del{ cursor:pointer; }
.prod-act-edit{ color:var(--forest); }
.prod-act-edit:hover, .prod-act-del:hover{ text-decoration:underline; }

.manual-form{
  display:none; background:var(--paper-card); border:1px solid var(--line); border-radius:14px;
  padding:18px 20px; margin-bottom:14px; box-shadow:var(--shadow);
}
.manual-form.show{ display:block; }
.manual-form h4{ margin:0 0 14px; font-family:'Space Grotesk',sans-serif; font-size:14px; }
.form-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap:12px; }
@media (max-width:900px){ .form-grid{ grid-template-columns: repeat(2,1fr); } }
.form-field label{ display:block; font-size:11px; color:var(--ink-soft); font-weight:600; margin-bottom:5px; }
.form-field input, .form-field select{
  width:100%; padding:8px 10px; border:1px solid var(--line); border-radius:8px; font-size:12.8px;
  font-family:'Inter',sans-serif; background:var(--surface-2); color:var(--ink); outline:none;
}
.form-field input:focus, .form-field select:focus{ border-color:var(--forest); }
.form-actions{ margin-top:14px; display:flex; gap:8px; }

/* ===== IKLAN PAGE ===== */
.iklan-summary{ display:grid; grid-template-columns: repeat(3,1fr); gap:12px; margin-bottom:16px; }
@media (max-width:900px){ .iklan-summary{ grid-template-columns:1fr; } }
.sku-status{ font-size:10.5px; font-weight:700; padding:3px 9px; border-radius:999px; display:inline-flex; align-items:center; gap:5px; }
.sku-status.profit{ background:var(--forest-tint); color:var(--forest-bright); }
.sku-status.rugi{ background:var(--rust-tint); color:var(--rust); }
.roas-bar-wrap{ display:flex; align-items:center; gap:8px; }
.roas-track{ width:64px; height:6px; border-radius:4px; background:var(--surface-2); overflow:hidden; }
.roas-fill{ height:100%; border-radius:4px; }
.roas-val{ font-family:'JetBrains Mono',monospace; font-size:11.5px; font-weight:700; }

/* ===== PENGATURAN PAGE ===== */
.settings-section{ margin-bottom:26px; }
.settings-section h3{ font-family:'Space Grotesk',sans-serif; font-size:14.5px; margin:0 0 12px; }
.connector-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap:12px; }
@media (max-width:980px){ .connector-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width:600px){ .connector-grid{ grid-template-columns: 1fr; } }
.connector-card{
  background:var(--paper-card); border:1px solid var(--line); border-radius:14px; padding:16px;
  box-shadow:var(--shadow); display:flex; flex-direction:column; gap:10px;
}
.connector-top{ display:flex; align-items:center; justify-content:space-between; }
.connector-name{ display:flex; align-items:center; gap:9px; font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:14px; }
.connector-logo{ width:30px; height:30px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; color:#fff; }
.conn-status{ font-size:11px; font-weight:700; display:flex; align-items:center; gap:5px; }
.conn-status .cdot{ width:6px; height:6px; border-radius:50%; }
.conn-status.on{ color:var(--forest-bright); }
.conn-status.on .cdot{ background:var(--forest-bright); box-shadow:0 0 0 3px rgba(63,161,121,.2); }
.conn-status.off{ color:var(--ink-soft); }
.conn-status.off .cdot{ background:var(--ink-soft); }
.connector-meta{ font-size:11.5px; color:var(--ink-soft); }
.connector-form{ display:none; flex-direction:column; gap:8px; margin-top:4px; }
.connector-form.show{ display:flex; }
.connector-form input{
  width:100%; padding:7px 10px; border:1px solid var(--line); border-radius:7px; font-size:12px;
  font-family:'JetBrains Mono',monospace; background:var(--surface-2); color:var(--ink); outline:none;
}
.connector-actions{ display:flex; gap:7px; margin-top:2px; }
.btn.small{ padding:7px 12px; font-size:11.8px; }
.btn.ghost{ background:transparent; }
.btn.danger{ border-color:rgba(239,107,84,.4); color:var(--rust); background:transparent; }
.btn.danger:hover{ background:var(--rust-tint); }

.settings-row{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  background:var(--paper-card); border:1px solid var(--line); border-radius:12px; padding:14px 18px; margin-bottom:10px;
}
.settings-row .srow-label{ font-size:13px; font-weight:600; }
.settings-row .srow-sub{ font-size:11.5px; color:var(--ink-soft); margin-top:2px; }
.settings-row input[type="number"], .settings-row select{
  width:110px; padding:8px 10px; border:1px solid var(--line); border-radius:8px; background:var(--surface-2);
  color:var(--ink); font-family:'JetBrains Mono',monospace; font-size:13px; outline:none;
}
.switch{ position:relative; width:40px; height:22px; flex-shrink:0; }
.switch input{ opacity:0; width:0; height:0; }
.slider{ position:absolute; inset:0; background:var(--surface-2); border:1px solid var(--line); border-radius:999px; cursor:pointer; transition:.2s; }
.slider::before{ content:''; position:absolute; width:16px; height:16px; left:2px; top:2px; background:var(--ink-soft); border-radius:50%; transition:.2s; }
.switch input:checked + .slider{ background:var(--forest-tint); border-color:var(--forest); }
.switch input:checked + .slider::before{ transform:translateX(18px); background:var(--forest-bright); }

/* ===== LOADING OVERLAY (Apps Script async calls) ===== */
.loading-overlay{
  position:fixed; inset:0; background:rgba(14,21,18,.72); backdrop-filter: blur(2px);
  display:none; align-items:center; justify-content:center; z-index:999;
}
.loading-overlay.show{ display:flex; }
.loading-box{ display:flex; flex-direction:column; align-items:center; gap:12px; }
.loading-spinner{
  width:34px; height:34px; border-radius:50%; border:3px solid var(--line);
  border-top-color: var(--forest-bright); animation: spin .8s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }
.loading-text{ font-size:12.5px; color:var(--ink-soft); font-family:'JetBrains Mono',monospace; }