/* assets/css/style.css — port constants/design.ts:7 + theme.ts:9 — LOCK warna/radius/font + Corporate Plan A (Plus Jakarta display) */
:root{
  --primary:#1D4ED8;
  --primaryDark:#1E40AF;
  --ink:#0F172A;
  --muted:#64748B;
  --radius-sm:6px;
  --radius-md:12px;
  --radius-lg:16px;
  --radius-header:16px;
  --radius-pill:6px;
  --radius-fab:12px;
  --duration:200ms;
  --shadow-card:0 4px 16px rgba(15,23,42,.08);
  --shadow-hover:0 8px 24px rgba(15,23,42,.12);
  --shadow-hero:0 16px 40px rgba(29,78,216,.18);
}
*{font-family:Inter,system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;}
h1,h2,h3.font-display{font-family:'Plus Jakarta Sans',Inter,system-ui,sans-serif;letter-spacing:-.02em;}
/* Card — Corporate 12px — ex md8 → 12 (Plan A) */
.card{border-radius:12px;background:#fff;border:1px solid #E2E8F0;box-shadow:var(--shadow-card);transition:box-shadow var(--duration),transform var(--duration);}
.card-marketplace{border-top-width:4px !important;border-top-color:#EE4D2D !important;border-color:#FDBA74 !important;box-shadow:0 4px 16px rgba(238,77,45,.08) !important;}
.card-non{border-top-width:4px !important;border-top-color:#1D4ED8 !important;border-color:#BFDBFE !important;box-shadow:0 4px 16px rgba(29,78,216,.08) !important;}
.card-hover:hover{box-shadow:var(--shadow-hover);transform:translateY(-1px);}
.header{border-radius:16px;}
.pill{border-radius:6px;}
.fab{border-radius:12px;}
/* Summary card 12, modal 16 hero */
.modal{border-radius:16px;}
.btn-primary{background:var(--primary);color:#fff;border-radius:12px;padding:11px 18px;font-weight:600;box-shadow:0 4px 12px rgba(29,78,216,.25);transition:background var(--duration),transform var(--duration),box-shadow var(--duration);}
.btn-primary:hover{background:var(--primaryDark);transform:translateY(-1px);box-shadow:0 6px 16px rgba(29,78,216,.3);}
.btn-primary:active{transform:translateY(0);}
.input{border-radius:12px;border:1px solid #CBD5E1;padding:11px 14px;outline:none;transition:border-color var(--duration),box-shadow var(--duration);}
.input:focus{border-color:var(--primary);box-shadow:0 0 0 4px rgba(29,78,216,.12);}
.badge{border-radius:9999px;padding:5px 10px;font-size:11px;font-weight:700;letter-spacing:.02em;display:inline-flex;align-items:center;gap:5px;border:1.5px solid;line-height:1;}
.badge-error{background:#FEF2F2;color:#991B1B;border-color:#FECACA;box-shadow:0 1px 2px rgba(220,38,38,.06);}
.badge-warning{background:#FFFBEB;color:#92400E;border-color:#FDE68A;box-shadow:0 1px 2px rgba(245,158,11,.06);}
.badge-success{background:#ECFDF5;color:#065F46;border-color:#A7F3D0;box-shadow:0 1px 2px rgba(16,185,129,.06);}
.badge-info{background:#EFF6FF;color:#1D4ED8;border-color:#BFDBFE;box-shadow:0 1px 2px rgba(29,78,216,.06);}
/* Status Batal lebih tegas — dot + border 1.5px */
.badge-error::before{content:"";width:6px;height:6px;border-radius:9999px;background:#DC2626;opacity:.9;display:inline-block;}
.badge-warning::before{content:"";width:6px;height:6px;border-radius:9999px;background:#D97706;opacity:.9;display:inline-block;}
.badge-success::before{content:"";width:6px;height:6px;border-radius:9999px;background:#10B981;opacity:.9;display:inline-block;}
/* Platform colors — transaksi.tsx:116 LOCK */
.platform-shopee{color:#EE4D2D;}
.platform-tokopedia{color:#42B549;}
.platform-lazada{color:#0F156D;}
.platform-tiktok{color:#000;}
.platform-lainnya{color:#64748B;}
.platform-non{color:#1E40AF;}
/* Retur placeholder — pesanan.tsx:160 */
.retur-placeholder{background:#FFFBEB;border:1px solid #FDE68A;color:#92400E;}
/* Shadow — design.ts + Corporate hover */
.shadow-card{box-shadow:var(--shadow-card);}
.shadow-hero{box-shadow:var(--shadow-hero);}
/* FAB mobile → btn-primary web (fab12 preserved) */
.btn-fab{background:var(--primary);color:#fff;border-radius:12px;padding:12px 22px;font-weight:700;box-shadow:0 8px 20px rgba(29,78,216,.35);transition:background var(--duration),transform var(--duration);}
.btn-fab:hover{background:var(--primaryDark);transform:translateY(-1px);}
.btn-fab:active{transform:translateY(0);}
/* Navbar toko-online polish — sticky + backdrop */
header.sticky{backdrop-filter:saturate(1.2) blur(8px);}
/* Input polish — Inter 400 */
.input{font-family:Inter,system-ui,sans-serif;}
/* Corporate hero gradient utility */
.hero-gradient{background:linear-gradient(135deg,#0F172A 0%,#1D4ED8 55%,#3B82F6 100%);}
/* Trust pill */
.trust-pill{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(6px);}
/* Fase 8 web-native utilities */
.breadcrumb{font-size:12px;color:#64748B;}
.breadcrumb a{color:#1D4ED8;font-weight:600;}
.breadcrumb a:hover{color:#1E40AF;}
.pagination .pg-btn{border:1px solid #E2E8F0;background:#fff;color:#0F172A;border-radius:8px;padding:6px 12px;font-size:13px;font-weight:600;transition:all var(--duration);}
.pagination .pg-btn:hover{background:#EFF6FF;border-color:#BFDBFE;color:#1D4ED8;}
.pagination .pg-btn.active{background:#1D4ED8;color:#fff;border-color:#1D4ED8;}
.pagination .pg-btn:disabled{opacity:.45;pointer-events:none;}
.sortable{cursor:pointer;user-select:none;}
.sortable:hover{color:#1D4ED8;}
.stepper{display:flex;gap:8px;align-items:center;}
.stepper .step{flex:1;display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:12px;border:1px solid #E2E8F0;background:#fff;font-size:13px;font-weight:600;color:#64748B;}
.stepper .step.active{border-color:#1D4ED8;background:#EFF6FF;color:#1D4ED8;}
.stepper .step .num{width:24px;height:24px;border-radius:9999px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;background:#F1F5F9;color:#475569;}
.stepper .step.active .num{background:#1D4ED8;color:#fff;}
.step-marketplace.active{border-color:#EE4D2D !important;background:#FFF4F2 !important;color:#EE4D2D !important;}
.step-marketplace.active .num{background:#EE4D2D !important;color:#fff !important;}
.step-non.active{border-color:#1D4ED8 !important;background:#EFF6FF !important;color:#1D4ED8 !important;}
.step-non.active .num{background:#1D4ED8 !important;color:#fff !important;}
.step-retur{border-color:#FDE68A !important;background:#FFFBEB !important;color:#92400E !important;}
.step-retur .num{background:#FFFBEB !important;color:#92400E !important;border:1px solid #FDE68A !important;}
.step-retur.active{border-color:#F59E0B !important;background:#FFFBEB !important;color:#92400E !important;}
.step-retur.active .num{background:#F59E0B !important;color:#fff !important;border-color:#F59E0B !important;}
.drag-drop{border:2px dashed #CBD5E1;border-radius:12px;background:#F8FAFC;transition:all var(--duration);}
.drag-drop.dragover{border-color:#1D4ED8;background:#EFF6FF;}
/* Fase 8a marketplace dashboard — port transaksi.tsx:2578 mpCard + sectionHeaderClean */
.mpCard{min-width:112px;flex:1;background:#fff;border-radius:12px;border:1px solid #E2E8F0;border-top-width:4px;padding:10px 12px;display:flex;flex-direction:column;align-items:flex-start;gap:4px;cursor:pointer;transition:all var(--duration);box-shadow:var(--shadow-card);}
.mpCard:hover{transform:translateY(-2px);box-shadow:var(--shadow-hover);border-color:#CBD5E1;}
.mpCard.active{background:#fff;border-color:#1D4ED8;box-shadow:0 8px 24px rgba(29,78,216,.14);transform:translateY(-1px);}
.mpCard.active .mpCard-label{color:#1D4ED8;}
.mpCard.active .mpCard-value{color:#0F172A;}
.mpCard-icon{width:32px;height:32px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:14px;}
.mpCard-label{font-size:11px;font-weight:700;color:#64748B;letter-spacing:.04em;text-transform:uppercase;display:flex;align-items:center;gap:6px;}
.mpCard-value{font-size:26px;font-weight:800;color:#0F172A;font-family:'Plus Jakarta Sans',Inter,sans-serif;line-height:1;}
.mpCard-sub{font-size:11px;color:#94A3B8;font-weight:500;}
.sectionHeaderClean{display:flex;align-items:center;justify-content:space-between;padding:10px 4px 8px 0;margin-top:16px;margin-bottom:8px;border-bottom:2px solid #F1F5F9;}
.sectionHeaderClean-title{font-size:12px;font-weight:800;color:#0F172A;letter-spacing:.04em;text-transform:uppercase;display:flex;align-items:center;gap:8px;}
.sectionHeaderClean-title::before{content:"";width:3px;height:14px;border-radius:9999px;background:currentColor;display:inline-block;}
.sectionHeaderClean-count{font-size:11px;color:#1D4ED8;background:#EFF6FF;border:1px solid #BFDBFE;font-weight:700;padding:3px 8px;border-radius:9999px;}
/* Fase 12 Grid switch + stockGridCard — polish Opsi A accent top + min-h */
.viewToggle{display:flex;gap:4px;align-items:center;padding:3px;background:#F1F5F9;border-radius:10px;border:1px solid #E2E8F0;}
.viewToggle .viewBtn{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:14px;color:#64748B;background:transparent;border:1px solid transparent;transition:all var(--duration);}
.viewToggle .viewBtn.active{background:#1D4ED8;color:#fff;border-color:#1D4ED8;box-shadow:0 2px 8px rgba(29,78,216,.25);}
.viewToggle .viewBtn:hover:not(.active){background:#fff;border-color:#CBD5E1;color:#0F172A;}
.stockGridCard{border-radius:12px;background:#fff;border:1px solid #E2E8F0;border-top-width:3px;box-shadow:var(--shadow-card);padding:16px;display:flex;flex-direction:column;gap:12px;min-height:148px;overflow:hidden;transition:box-shadow var(--duration),transform var(--duration);}
.stockGridCard:hover{box-shadow:var(--shadow-hover);transform:translateY(-2px);}
.stockGridCard[data-status="habis"]{border-top-color:#DC2626;}
.stockGridCard[data-status="menipis"]{border-top-color:#D97706;}
.stockGridCard[data-status="aman"]{border-top-color:#10B981;}
.stockGridCard[data-status="tersedia"]{border-top-color:#1D4ED8;}
/* Fase 13 Filter stok — port index.tsx:1068 + info_stock.tsx:635 filterBtn + OptionButton */
.filterBtn{width:44px;height:44px;border-radius:12px;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;position:relative;flex-shrink:0;box-shadow:0 4px 12px rgba(29,78,216,.25);transition:background var(--duration),transform var(--duration);}
.filterBtn:hover{background:var(--primaryDark);transform:translateY(-1px);}
.filterBtn:active{transform:translateY(0);}
.filterActiveBadge{position:absolute;top:-4px;right:-4px;width:12px;height:12px;border-radius:9999px;background:#EF4444;border:2px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.15);}
.optionBtn{padding:9px 16px !important;border-radius:10px !important;background:#F8FAFC !important;border:1.5px solid #CBD5E1 !important;font-size:13px !important;font-weight:600 !important;color:#334155 !important;transition:all var(--duration) !important;cursor:pointer !important;box-shadow:0 1px 3px rgba(15,23,42,.06) !important;display:inline-flex !important;align-items:center !important;justify-content:center !important;min-height:36px !important;}
.optionBtn:hover{border-color:#1D4ED8 !important;background:#EFF6FF !important;color:#1D4ED8 !important;box-shadow:0 4px 12px rgba(29,78,216,.15) !important;transform:translateY(-1px) !important;}
.optionBtn:active{transform:translateY(0) !important;}
.optionBtn.active{background:var(--primary) !important;border-color:var(--primary) !important;color:#fff !important;font-weight:700 !important;box-shadow:0 4px 14px rgba(29,78,216,.30) !important;transform:translateY(-1px) !important;}
.optionBtn.active::after{content:"  \f00c" !important;font-family:"Font Awesome 6 Free" !important;font-weight:900 !important;font-size:11px !important;margin-left:6px !important;opacity:.95 !important;}
.optionGroup{display:flex !important;flex-wrap:wrap !important;gap:8px !important;}
.filterModalOverlay{position:fixed;inset:0;background:rgba(0,0,0,.5);backdrop-filter:blur(2px);display:flex;align-items:flex-end;justify-content:center;z-index:50;}
@media(min-width:640px){.filterModalOverlay{align-items:center;}}
.filterModalContent{background:#fff;width:100%;max-width:480px;border-radius:16px 16px 0 0;box-shadow:0 -8px 32px rgba(15,23,42,.18);overflow:hidden;max-height:90vh;overflow-y:auto;}
@media(min-width:640px){.filterModalContent{border-radius:16px;}}
.filterModalDrag{width:40px;height:5px;background:#E5E7EB;border-radius:9999px;margin:14px auto 0;}
/* Fase 14 Transaksi — card hover + badge icon */
.trxCard{transition:box-shadow var(--duration),transform var(--duration),border-color var(--duration);}
.trxCard:hover{box-shadow:var(--shadow-hover);transform:translateY(-1px);border-color:#CBD5E1;}
.trxBadge-icon{margin-right:4px;font-size:11px;}
.viewSection{border:1px solid #E2E8F0;border-radius:10px;padding:12px;background:#F8FAFC;}
.viewSection-title{font-size:11px;font-weight:700;color:#475569;letter-spacing:.04em;text-transform:uppercase;display:flex;align-items:center;gap:6px;margin-bottom:8px;}
/* Fase 16b — Hero marketplace per platform (marketplace oranye/hijau/navy/hitam vs non marketplace biru) */
.hero-marketplace-shopee{background:linear-gradient(135deg,#7C2D12 0%,#EE4D2D 55%,#FB923C 100%) !important;}
.hero-marketplace-tokopedia{background:linear-gradient(135deg,#14532D 0%,#42B549 55%,#86EFAC 100%) !important;}
.hero-marketplace-lazada{background:linear-gradient(135deg,#0F172A 0%,#0F156D 55%,#334155 100%) !important;}
.hero-marketplace-tiktok{background:linear-gradient(135deg,#000 0%,#1F1F1F 55%,#52525B 100%) !important;}
.hero-marketplace-lainnya{background:linear-gradient(135deg,#334155 0%,#64748B 55%,#94A3B8 100%) !important;}
/* Fase 18 — Edit Replace Set horizontal card + qtyCard + badge BARU */
.itemEditBoxHorizontal{display:flex;align-items:center;gap:0;padding:12px;border:1px solid #E2E8F0;border-radius:12px;background:#fff;transition:all var(--duration);}
.itemEditBoxHorizontal:hover{border-color:#CBD5E1;box-shadow:var(--shadow-card);}
.itemEditBoxHorizontal.over{border-color:#FCA5A5 !important;background:#FEF2F2 !important;}
.qtyCard{width:64px;height:42px;border:1px solid #E2E8F0;border-radius:10px;background:#fff;display:flex;align-items:center;justify-content:center;overflow:hidden;}
.qtyCard.over{border-color:#FCA5A5;background:#FEE2E2;}
.qtyCardInput{width:100%;height:100%;text-align:center;font-weight:700;font-size:14px;color:#0F172A;outline:none;border:none;background:transparent;}
.qtyCardInput.over{color:#DC2626;}
.btnDeleteSmall{width:32px;height:32px;border-radius:8px;background:#FEF2F2;border:1px solid #FECACA;color:#EF4444;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.btnDeleteSmall:hover{background:#FECACA;}
.badgeBaru{background:#ECFDF5;border:1px solid #A7F3D0;color:#065F46;font-size:10px;font-weight:800;letter-spacing:.04em;padding:2px 6px;border-radius:9999px;}
.letterPill{padding:6px 8px;border-radius:9999px;font-size:11px;font-weight:700;border:1px solid #E2E8F0;background:#fff;color:#64748B;}
.letterPill.active{background:#1D4ED8;color:#fff;border-color:#1D4ED8;}