/* ========================================================= KasirKu — Design Tokens ========================================================= */ :root{ --bg:#eef1f8; --bg-2:#f6f8fc; --card:#fff; --ink:#141a2e; --muted:#69738a; --muted-2:#98a2b8; --line:#e8ecf3; --line-2:#dfe4ee; --brand:#2f5bf6; --brand2:#6d4bf0; --brand-ink:#1d3fc7; --danger:#e11d48; --danger-bg:#fef1f4; --success:#12a454; --success-bg:#eafbf1; --warning:#f59e0b; --warning-bg:#fef6e6; --sidebar-a:#3324a3; --sidebar-b:#3452d6; --sidebar-c:#0aa7e0; --sidebar-ink:#28308c; --brand-rgb:47,91,246; --brand2-rgb:109,75,240; --brand-light:#eef2ff; --brand-light-2:#e3e8ff; --brand-border:#a9bdfb; --brand-border-2:#c8d6ff; --success-ink:#0d7d40; --danger-ink:#b6123a; --warning-ink:#92400e; --topbar-bg:rgba(255,255,255,.86); --scrollbar-thumb:#c7cede; --scrollbar-thumb-hover:#a9b3ca; --radius-sm:10px; --radius-md:14px; --radius-lg:18px; --radius-xl:22px; --shadow-xs:0 1px 2px rgba(20,26,46,.05); --shadow-sm:0 4px 14px rgba(20,26,46,.05); --shadow-md:0 10px 30px rgba(20,26,46,.07); --shadow-lg:0 24px 60px rgba(20,26,46,.14); --shadow-brand:0 10px 24px rgba(47,91,246,.28); --ff:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; } *{box-sizing:border-box} /* =========================================================== Skema Gelap — dipakai saat . Dirancang manual (bukan invert), engine tema JS juga akan menimpa variabel warna brand/sidebar di atas elemen ini. =========================================================== */ :root[data-theme="dark"]{ --bg:#0b0e1a; --bg-2:#12162a; --card:#161b30; --ink:#eef1fb; --muted:#9aa3c0; --muted-2:#6b7392; --line:#242b47; --line-2:#2c3454; --brand-light:#1c2340; --brand-light-2:#232b4d; --brand-border:#3a4576; --brand-border-2:#2c3560; --success-bg:#0e2a1f; --danger-bg:#301321; --warning-bg:#302411; --success-ink:#4ade80; --danger-ink:#fb7185; --warning-ink:#fbbf24; --topbar-bg:rgba(18,22,42,.86); --scrollbar-thumb:#2c3454; --scrollbar-thumb-hover:#3a4576; --shadow-xs:0 1px 2px rgba(0,0,0,.22); --shadow-sm:0 4px 14px rgba(0,0,0,.28); --shadow-md:0 10px 30px rgba(0,0,0,.32); --shadow-lg:0 24px 60px rgba(0,0,0,.45); } ::selection{background:var(--brand-light-2);color:var(--brand-ink)} body{ margin:0;color:var(--ink);font-family:var(--ff);font-size:14px; background: radial-gradient(900px 500px at 100% -10%, rgba(var(--brand-rgb),.10), transparent 60%), radial-gradient(700px 420px at -5% 0%, rgba(var(--brand2-rgb),.09), transparent 55%), var(--bg); background-attachment:fixed; -webkit-font-smoothing:antialiased; } .app{display:flex;min-height:100vh} /* ===== Scrollbars ===== */ ::-webkit-scrollbar{width:9px;height:9px} ::-webkit-scrollbar-track{background:transparent} ::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb);border-radius:99px} ::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover)} .sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.28)} /* ===== Animations ===== */ @keyframes fadeSlideIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}} @keyframes popIn{from{opacity:0;transform:scale(.94) translateY(8px)}to{opacity:1;transform:scale(1) translateY(0)}} @keyframes shimmer{0%{background-position:-300px 0}100%{background-position:300px 0}} @keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}} /* ========================================================= Sidebar ========================================================= */ .sidebar{ width:242px;color:#fff;position:fixed;inset:0 auto 0 0;padding:20px 13px;z-index:10; overflow-y:auto; background: radial-gradient(420px 260px at 100% 0%, rgba(255,255,255,.10), transparent 60%), linear-gradient(165deg,var(--sidebar-a) 0%,var(--sidebar-b) 55%,var(--sidebar-c) 100%); box-shadow:6px 0 30px rgba(24,35,110,.22); } .brand{display:flex;gap:11px;align-items:center;padding:6px 10px 22px;font-weight:800;font-size:19px;letter-spacing:.2px} .brand-logo{border-radius:9px} .brand-mark{width:36px;height:36px;border-radius:11px;background:linear-gradient(135deg,#fff,var(--brand-light-2));display:grid;place-items:center;box-shadow:var(--shadow-sm)} .nav-title{font-size:10px;text-transform:uppercase;letter-spacing:1.4px;color:rgba(255,255,255,.58);padding:16px 12px 7px;font-weight:700} .nav-item{ display:flex;align-items:center;gap:11px;color:rgba(255,255,255,.85);text-decoration:none; padding:10px 12px;border-radius:12px;margin:2px 0;cursor:pointer;position:relative; transition:background .15s ease,transform .15s ease,box-shadow .15s ease; } .nav-item span:first-child{ flex:0 0 auto;width:28px;height:28px;display:grid;place-items:center;font-size:15px; background:rgba(255,255,255,.12);border-radius:9px;transition:background .15s ease,transform .15s ease; } .nav-item span:last-child{font-size:13.5px;font-weight:600;white-space:nowrap} .nav-item:hover{background:rgba(255,255,255,.14);transform:translateX(3px)} .nav-item:hover span:first-child{background:rgba(255,255,255,.22)} .nav-item.active{background:rgba(255,255,255,.22);color:#fff;box-shadow:0 6px 16px rgba(10,18,60,.18)} .nav-item.active span:first-child{background:linear-gradient(135deg,#fff,var(--brand-light-2));color:var(--sidebar-ink)} .nav-item.active::before{ content:"";position:absolute;left:-13px;top:50%;transform:translateY(-50%); width:4px;height:20px;border-radius:0 4px 4px 0;background:#fff; } /* ========================================================= Main / Topbar / Content ========================================================= */ .main{margin-left:242px;width:calc(100% - 242px)} .topbar{ height:72px;background:var(--topbar-bg);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px); border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between; padding:0 30px;position:sticky;top:0;z-index:5; } .topbar h1{font-size:20px;margin:0;font-weight:800;letter-spacing:-.2px} .topbar small{color:var(--muted)} .content{padding:26px;max-width:1500px;margin:auto} .page{display:none} .page.active{display:block;animation:fadeSlideIn .4s cubic-bezier(.2,.7,.3,1)} /* ========================================================= Buttons / Inputs / Selects ========================================================= */ .btn{ border:0;border-radius:12px;padding:11px 16px;font-weight:700;cursor:pointer;font-size:13.5px; background:linear-gradient(135deg,var(--brand),var(--brand2));color:#fff; box-shadow:var(--shadow-brand);transition:transform .15s ease,box-shadow .15s ease,filter .15s ease; } .btn:hover{transform:translateY(-1px);filter:brightness(1.05)} .btn:active{transform:translateY(0)} .btn.secondary{background:var(--brand-light);color:var(--brand-ink);box-shadow:none} .btn.secondary:hover{background:var(--brand-light-2)} .btn.danger{background:var(--danger-bg);color:var(--danger-ink);box-shadow:none} .btn.danger:hover{background:#fde2e9} .input,.select{ width:100%;border:1px solid var(--line-2);background:var(--card);border-radius:11px;padding:11px 12px; outline:none;color:var(--ink);font-family:var(--ff);transition:border-color .15s ease,box-shadow .15s ease; } .input:focus,.select:focus{border-color:var(--brand-border);box-shadow:0 0 0 4px rgba(var(--brand-rgb),.12)} .input::placeholder{color:var(--muted-2)} select.select-sm{width:auto;min-width:100px;padding:8px 10px;font-weight:700;font-size:13px} /* ========================================================= Panels ========================================================= */ .panel{ background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);padding:20px; box-shadow:var(--shadow-sm);transition:box-shadow .2s ease; } .section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:15px;gap:10px} .section-head h2{font-size:16px;margin:0;font-weight:800;letter-spacing:-.1px} /* ========================================================= Stat cards ========================================================= */ .stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} .stat{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);padding:19px;box-shadow:var(--shadow-sm)} .stat small{color:var(--muted)} .stat b{display:block;font-size:25px;margin-top:8px;letter-spacing:-.3px} .stat .accent{color:var(--brand)} .stat-modern{display:flex;align-items:center;gap:14px;transition:transform .2s ease,box-shadow .2s ease;animation:fadeSlideIn .45s ease both} .stats .stat-modern:nth-child(1){animation-delay:.02s} .stats .stat-modern:nth-child(2){animation-delay:.05s} .stats .stat-modern:nth-child(3){animation-delay:.08s} .stats .stat-modern:nth-child(4){animation-delay:.11s} .stats .stat-modern:nth-child(5){animation-delay:.14s} .stats .stat-modern:nth-child(6){animation-delay:.17s} .stats .stat-modern:nth-child(7){animation-delay:.20s} .stats .stat-modern:nth-child(8){animation-delay:.23s} .stats .stat-modern:nth-child(9){animation-delay:.26s} .stat-modern:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)} .stat-icon{flex:0 0 auto;width:50px;height:50px;border-radius:15px;display:grid;place-items:center;font-size:22px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.5)} .stat-icon-blue{background:linear-gradient(135deg,#dbe8ff,#bcd3ff)} .stat-icon-green{background:linear-gradient(135deg,#d8f8e6,#b7f0cf)} .stat-icon-purple{background:linear-gradient(135deg,#eae2fe,#d8c9fd)} .stat-icon-amber{background:linear-gradient(135deg,#fef0cf,#fde2a0)} .stat-icon-teal{background:linear-gradient(135deg,#cdf5f0,#a6ebe1)} .stat-icon-indigo{background:linear-gradient(135deg,#dcdfff,#c1c6ff)} .stat-icon-rose{background:linear-gradient(135deg,#ffdce8,#ffc0d7)} .stat-icon-cyan{background:linear-gradient(135deg,#cdeffd,#a2e4fb)} .stat-icon-slate{background:linear-gradient(135deg,#e2e8f4,#c9d3e6)} .stat-body{min-width:0} .stat-body b{font-size:22px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block} /* ========================================================= Charts (Chart.js canvas + legacy bar fallback) ========================================================= */ .chart-panel{animation:fadeSlideIn .5s ease both} .chart-panel .section-head h2{display:flex;align-items:center;gap:7px} .chart-total-badge{background:var(--brand-light);color:var(--brand-ink);font-weight:800;font-size:13px;padding:6px 13px;border-radius:99px;white-space:nowrap} .month-summary-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px;flex-wrap:wrap} .month-summary-item small{color:var(--muted);display:block;font-size:11px;text-transform:uppercase;letter-spacing:.4px;font-weight:700} .month-summary-item b{font-size:20px;display:block;margin-top:3px} .chart-modern{height:230px;position:relative} /* container hosting a Chart.js canvas (no manual bar layout) */ .chart-canvas-host{display:block!important;padding:6px 2px 0} .chart-canvas-host canvas{width:100%!important;height:100%!important} .chart-tall{height:290px} /* legacy manual-bar styles kept for compatibility */ .bar-wrap-modern{flex:1;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:end;gap:6px;position:relative;cursor:default} .bar-value-modern{font-size:10px;font-weight:800;color:var(--muted);white-space:nowrap;min-height:12px} .bar-modern{width:100%;max-width:34px;min-height:5px;border-radius:9px 9px 4px 4px;background:linear-gradient(180deg,#9db8ff,var(--brand));transition:transform .18s,filter .18s;box-shadow:0 4px 10px rgba(47,91,246,.2)} .bar-wrap-modern:hover .bar-modern{transform:scaleY(1.02);filter:brightness(1.08)} .bar-modern.bar-peak{background:linear-gradient(180deg,#fca5a5,#ef4444);box-shadow:0 4px 12px rgba(239,68,68,.25)} .bar-modern.bar-current{background:linear-gradient(180deg,#6ee7b7,#10b981);box-shadow:0 4px 12px rgba(16,185,129,.28)} .bar-wrap-modern small{color:var(--muted);font-size:10px;text-align:center;line-height:1.25} .dashboard-stack{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:18px} .dashboard-stack>.panel-full{grid-column:1/-1} @media(max-width:1100px){.dashboard-stack{grid-template-columns:1fr}} .type-breakdown{display:flex;align-items:center;gap:28px;flex-wrap:wrap} .type-donut-box{flex:0 0 auto;width:200px;height:200px;position:relative;display:grid;place-items:center;margin:0 auto} .type-donut-box svg{width:100%;height:100%;transform:rotate(-90deg)} .type-donut-box canvas{position:absolute;inset:0;width:100%!important;height:100%!important} .type-donut-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;pointer-events:none} .type-donut-center small{color:var(--muted);font-size:11px;font-weight:700} .type-donut-center b{font-size:17px;margin-top:3px;line-height:1.15} .type-legend{flex:1 1 260px;display:flex;flex-direction:column;gap:10px;min-width:220px} .type-legend-item{display:flex;align-items:center;gap:12px;background:var(--bg-2);border:1px solid var(--line);border-radius:13px;padding:11px 14px;transition:transform .15s ease,box-shadow .15s ease} .type-legend-item:hover{transform:translateX(3px);box-shadow:var(--shadow-xs)} .type-legend-dot{width:12px;height:12px;border-radius:50%;flex:0 0 auto;box-shadow:0 0 0 3px rgba(0,0,0,.04)} .type-legend-body{flex:1;min-width:0} .type-legend-body .tl-row{display:flex;align-items:baseline;justify-content:space-between;gap:8px} .type-legend-body .tl-label{font-size:12.5px;font-weight:700;color:var(--ink)} .type-legend-body .tl-pct{font-size:11.5px;font-weight:800;color:var(--muted)} .type-legend-body .tl-value{font-size:15px;font-weight:800;margin-top:2px} .type-legend-body .tl-sub{font-size:10.5px;color:var(--muted);margin-top:1px} .type-legend-bar{margin-top:7px;height:6px;border-radius:99px;background:var(--line);overflow:hidden} .type-legend-bar span{display:block;height:100%;border-radius:99px;transition:width .5s ease} @media(max-width:640px){.type-breakdown{flex-direction:column}.type-donut-box{width:170px;height:170px}} .chart-panel .section-head{flex-wrap:wrap;row-gap:10px} .chart-panel .section-head h2{flex:1 1 auto;min-width:0} .chart-panel .section-head select.select-sm{flex:0 0 auto} .chart{height:245px;display:flex;align-items:end;gap:12px;padding:18px 4px 4px;position:relative} .bar-wrap{flex:1;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:end;gap:7px} .bar{width:100%;max-width:46px;min-height:5px;border-radius:7px 7px 3px 3px;background:linear-gradient(180deg,#7ea2ff,var(--brand))} .bar-wrap small{color:var(--muted);font-size:10px} .empty-chart{margin:auto;color:var(--muted);text-align:center;display:flex;flex-direction:column;align-items:center;gap:6px} .empty-chart::before{content:"📉";font-size:26px;opacity:.55;animation:floaty 2.6s ease-in-out infinite} .month-compare{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px} .mc-box{flex:1;background:var(--bg-2);border:1px solid var(--line);border-radius:13px;padding:12px 14px;text-align:center} .mc-box small{color:var(--muted)} .mc-box b{display:block;font-size:18px;margin-top:4px} .mc-box-accent{background:var(--brand-light);border-color:var(--brand-border-2)} .mc-delta{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:2px;font-weight:800;font-size:13px;padding:8px 12px;border-radius:11px} .mc-delta small{font-weight:600;opacity:.75;font-size:10px} .mc-delta.mc-up{color:var(--success);background:var(--success-bg)} .mc-delta.mc-down{color:var(--danger);background:var(--danger-bg)} /* ========================================================= POS / Kasir ========================================================= */ .pos{display:grid;grid-template-columns:minmax(0,1fr) 420px;gap:18px} .pos-left{display:flex;flex-direction:column;gap:18px;min-width:0} .toolbar{display:flex;gap:10px;margin-bottom:14px} .product-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(145px,1fr));gap:11px} .product-card{ border:1px solid var(--line);border-top:3px solid var(--cat-color,var(--brand));background:#fff; border-radius:var(--radius-md);padding:13px;text-align:left;cursor:pointer;display:flex;flex-direction:column; gap:6px;min-height:170px;transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease; } .product-card:hover{border-color:var(--brand-border);transform:translateY(-3px);box-shadow:var(--shadow-md)} .product-card:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none} .cat-chip{align-self:flex-start;font-size:10px;font-weight:700;padding:3px 8px;border-radius:99px;letter-spacing:.2px} .product-icon{width:38px;height:38px;border-radius:12px;background:var(--brand-light);color:var(--brand);display:grid;place-items:center;font-weight:800;font-size:16px;overflow:hidden} .product-icon img{width:100%;height:100%;object-fit:cover} .product-name{font-weight:700;min-height:35px} .product-card b{font-size:14px} .product-card small{color:var(--muted)} .danger-text{color:var(--danger)!important} .cart-panel{position:sticky;top:90px;align-self:start} .cart-head{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap} .cart-head-actions{display:flex;align-items:center;gap:8px} .cart-items{max-height:390px;overflow:auto;margin:10px -4px} .cart-row{display:grid;grid-template-columns:1fr auto auto;gap:9px;align-items:center;padding:12px 4px;border-bottom:1px solid var(--line)} .cart-info b,.cart-info small{display:block} .cart-info small{color:var(--muted);margin-top:3px} .qty{display:flex;align-items:center;gap:7px} .qty button{border:1px solid var(--line-2);background:var(--card);border-radius:8px;width:27px;height:27px;cursor:pointer;transition:background .15s ease} .qty button:hover{background:var(--brand-light)} .cart-empty{text-align:center;color:var(--muted);padding:70px 10px} .total-box{border-top:1px dashed var(--line-2);padding-top:15px} .grand{font-size:28px;font-weight:850;letter-spacing:-.4px} .pay-grid{display:grid;grid-template-columns:1fr 1fr;grid-template-areas:"method method" "quick paid";gap:10px;margin-top:12px} .pay-grid #payMethod{grid-area:method} .pay-grid #paidQuick{grid-area:quick} .pay-grid #paid{grid-area:paid} .pay-btn{width:100%;padding:12px;border:1px solid var(--line);border-radius:11px;background:var(--card)} .pay-btn:focus{outline:2px solid var(--brand-border)} .change{display:flex;justify-content:space-between;margin:12px 0;color:var(--muted)} .change b{color:var(--success)} .pay-main{width:100%;padding:14px;border:0;border-radius:13px;background:linear-gradient(135deg,#18b968,var(--success));color:#fff;font-weight:800;font-size:15.5px;box-shadow:0 10px 26px rgba(18,164,84,.3);cursor:pointer;transition:transform .15s ease,filter .15s ease} .pay-main:hover:not(:disabled){transform:translateY(-1px);filter:brightness(1.05)} .pay-main:disabled{opacity:.4;box-shadow:none;cursor:not-allowed} .top-sellers-panel{margin-bottom:0} .top-sellers-row{display:flex;gap:12px;overflow-x:auto;padding:2px 2px 8px} .top-seller-card{ flex:0 0 152px;border:1px solid var(--line);border-top:3px solid var(--cat-color,var(--brand));background:var(--card); border-radius:var(--radius-md);padding:12px;text-align:left;cursor:pointer;display:flex;flex-direction:column; gap:5px;position:relative;transition:transform .15s ease,box-shadow .15s ease; } .top-seller-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:#a9bdfb} .top-seller-card .rank-badge{position:absolute;top:8px;right:10px;font-size:12px} .top-seller-card b{font-size:13px;min-height:34px;padding-right:16px} .top-seller-card .tsc-price{color:var(--brand);font-weight:800;font-size:13px} .top-seller-card small{color:var(--muted);font-size:11px} /* ========================================================= Tables ========================================================= */ .table-wrap{overflow:auto;border-radius:var(--radius-md)} .table{width:100%;border-collapse:collapse} .table th,.table td{padding:12px 12px;border-bottom:1px solid var(--line);text-align:left;white-space:nowrap} .table th{font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);font-weight:800;background:var(--bg-2);position:sticky;top:0} .table tbody tr{transition:background .12s ease} .table tbody tr:hover{background:rgba(var(--brand-rgb),.045)} .sub{display:block;color:var(--muted);font-size:11px;margin-top:3px} .actions button{border:0;background:var(--bg-2);border-radius:9px;padding:7px;cursor:pointer;margin-right:4px;transition:background .15s ease} .actions button:hover{background:var(--line-2)} .actions .danger-btn{background:var(--danger-bg)} .actions .danger-btn:hover{background:#fbdbe4} .stock-pill{background:var(--success-bg);color:var(--success-ink);padding:5px 9px;border-radius:99px;font-size:11px;font-weight:700} .stock-pill.warn{background:var(--warning-bg);color:var(--warning-ink)} .table-cat-pill{padding:4px 10px;border-radius:99px;font-size:11px;font-weight:700;display:inline-block} .small-btn{border:1px solid var(--brand-border-2);background:var(--brand-light);color:var(--brand-ink);padding:7px 11px;border-radius:9px;font-weight:700;cursor:pointer;transition:background .15s ease} .small-btn:hover{background:var(--brand-light-2)} .section-head .category-add{display:flex;gap:8px} .section-head .category-add .input{width:220px} .category-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px} .category-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-md);padding:17px;display:flex;align-items:center;gap:12px;transition:box-shadow .15s ease,transform .15s ease} .category-card:hover{box-shadow:var(--shadow-sm);transform:translateY(-2px)} .category-card>span{width:42px;height:42px;border-radius:13px;background:var(--brand-light);color:var(--brand-ink);display:grid;place-items:center;font-weight:800} .category-card small{display:block;color:var(--muted);margin-top:4px} .cat-del-btn{margin-left:auto;border:0;background:var(--danger-bg);color:var(--danger-ink);width:32px;height:32px;border-radius:10px;cursor:pointer;font-size:14px;flex:none;transition:background .15s ease} .cat-del-btn:hover{background:#fbdbe4} .sku-row{display:flex;gap:6px;margin-top:5px} .sku-row .input{margin-top:0;flex:1;min-width:0} .sku-row .small-btn{flex:none;padding:0 11px} .filters{display:flex;gap:10px;align-items:end;flex-wrap:wrap} .filters>div{min-width:180px} .report-stats{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin:15px 0} .report-stat{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px;transition:box-shadow .15s ease} .report-stat:hover{box-shadow:var(--shadow-xs)} .report-stat small{color:var(--muted)} .report-stat b{display:block;font-size:18px;margin-top:5px} /* ========================================================= Modals ========================================================= */ .modal-lite{position:fixed;inset:0;background:rgba(15,20,40,.5);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);display:none;place-items:center;z-index:50;padding:15px} .modal-lite.show{display:grid} .modal-card{background:var(--card);border-radius:var(--radius-xl);width:min(620px,100%);padding:22px;box-shadow:var(--shadow-lg);max-height:92vh;overflow:auto;animation:popIn .22s cubic-bezier(.2,.8,.3,1)} .modal-card.wide{width:min(820px,100%)} .credit-preview{background:var(--bg-2);border:1px solid var(--line);border-radius:13px;padding:14px;margin-top:14px} .credit-preview-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px} .credit-preview-grid small{color:var(--muted);display:block;font-size:11px;text-transform:uppercase;letter-spacing:.4px} .credit-preview-grid b{display:block;font-size:16px;margin-top:4px} .accent{color:var(--brand)} .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px} .form-grid label{font-size:12px;color:var(--muted);font-weight:700} .form-grid input,.form-grid select{margin-top:5px} .full{grid-column:1/-1} .modal-actions{display:flex;justify-content:end;gap:8px;margin-top:18px} .toast-lite{position:fixed;right:20px;bottom:20px;background:#151b2e;color:#fff;padding:13px 16px;border-radius:12px;z-index:100;box-shadow:var(--shadow-lg);animation:popIn .2s ease} .toast-lite.error{background:#b6123a} .empty-state{text-align:center;color:var(--muted);padding:38px} .empty-state::before{content:"🗂️ ";} .settings-grid{max-width:1400px;display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start} .textarea{min-height:90px;resize:vertical} .network-access-box{background:var(--bg-2);border:1px solid var(--line);border-radius:14px;padding:16px;margin-top:12px} .network-ip-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:8px} .network-ip-row small{color:var(--muted);display:block;font-size:11px;text-transform:uppercase;letter-spacing:.4px} .network-ip-row b{font-size:17px;color:var(--brand);word-break:break-all} .row-voided{opacity:.55} .row-voided td{text-decoration:line-through} .row-voided td:last-child,.row-voided td .stock-pill{text-decoration:none} .ppob-layout{display:grid;grid-template-columns:420px minmax(0,1fr);gap:18px;align-items:start} .ppob-field{font-size:12px;color:var(--muted);font-weight:700;display:block;margin-bottom:8px} .ppob-cat-row{display:flex;flex-wrap:wrap;gap:9px} .ppob-cat-chip{border:1px solid var(--line);background:var(--card);color:var(--ink);padding:9px 14px;border-radius:99px;font-weight:700;font-size:13px;cursor:pointer;transition:all .15s ease} .ppob-cat-chip:hover{border-color:#a9bdfb} .ppob-cat-chip.active{background:var(--brand);border-color:var(--brand);color:#fff} .ppob-cat-select{position:relative} .ppob-cat-trigger{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;border:1px solid var(--line-2);background:var(--card);border-radius:11px;padding:11px 12px;font-weight:700;font-size:14px;color:var(--ink);cursor:pointer;text-align:left;transition:border-color .15s ease} .ppob-cat-trigger:hover{border-color:var(--brand-border)} .ppob-cat-select.open .ppob-cat-trigger{border-color:var(--brand-border);box-shadow:0 0 0 4px rgba(var(--brand-rgb),.12)} .ppob-cat-caret{color:var(--muted);font-size:11px;transition:transform .15s ease} .ppob-cat-select.open .ppob-cat-caret{transform:rotate(180deg)} .ppob-cat-dropdown{display:none;position:absolute;top:calc(100% + 6px);left:0;right:0;background:var(--card);border:1px solid var(--line);border-radius:13px;box-shadow:var(--shadow-lg);padding:10px;z-index:30} .ppob-cat-select.open .ppob-cat-dropdown{display:block;animation:popIn .16s ease} .ppob-cat-options{max-height:230px;overflow:auto;margin-top:8px;display:flex;flex-direction:column;gap:2px} .ppob-cat-option{padding:9px 11px;border-radius:9px;cursor:pointer;font-weight:600;font-size:13.5px;color:var(--ink);transition:background .12s ease} .ppob-cat-option:hover{background:var(--bg-2)} .ppob-cat-option.active{background:var(--brand-light);color:var(--brand-ink);font-weight:800} .ppob-preview{background:var(--bg-2);border:1px solid var(--line);border-radius:13px;padding:14px;margin-top:14px;display:grid;grid-template-columns:repeat(3,1fr);gap:10px} .ppob-preview small{color:var(--muted);display:block;font-size:11px;text-transform:uppercase;letter-spacing:.4px} .ppob-preview b{display:block;font-size:16px;margin-top:4px} @media(max-width:1100px){.ppob-layout{grid-template-columns:1fr}} @media(max-width:720px){.ppob-preview{grid-template-columns:1fr}} .void-tx-info{background:var(--bg-2);border:1px solid var(--line);border-radius:13px;padding:12px 14px;margin-bottom:14px} .void-item-list{margin:8px 0;padding:0;list-style:none} .void-item-list li{display:flex;justify-content:space-between;padding:4px 0;border-bottom:1px dashed var(--line);font-size:13px} .void-item-list li span{color:var(--muted);font-weight:700} .brand-logo{max-height:34px;max-width:130px;object-fit:contain} .logo-upload-box{display:flex;gap:16px;align-items:center;border:1.5px dashed var(--line-2);border-radius:15px;padding:16px;margin-bottom:18px;flex-wrap:wrap} .logo-preview{width:88px;height:88px;border-radius:15px;background:var(--bg-2);border:1px solid var(--line);display:grid;place-items:center;overflow:hidden;font-size:11px;color:var(--muted);text-align:center;padding:6px;flex-shrink:0} .logo-preview img{max-width:100%;max-height:100%;object-fit:contain} .stock-thumb{width:44px;height:44px;border-radius:10px;background:var(--bg-2);border:1px solid var(--line);display:grid;place-items:center;overflow:hidden;font-size:16px;color:var(--muted)} .stock-thumb img{width:100%;height:100%;object-fit:cover} .logo-upload-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap} .muted{color:var(--muted);display:block;margin-top:8px} .pagination{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:14px;padding-top:14px;border-top:1px solid var(--line)} .pagination .page-info{color:var(--muted);font-size:12px} .pagination .page-buttons{display:flex;gap:8px;align-items:center} .pagination .page-buttons .small-btn:disabled{opacity:.4;cursor:not-allowed} .small-btn:disabled,.actions button:disabled{opacity:.4;cursor:not-allowed} .pagination .page-buttons .page-num{border:1px solid var(--line-2);background:var(--card);color:var(--ink);padding:7px 11px;border-radius:9px;font-weight:700;cursor:pointer} .pagination .page-buttons .page-num.active{background:var(--brand);border-color:var(--brand);color:#fff} /* ========================================================= Top produk terlaris (dashboard chart tambahan) ========================================================= */ .top-products-caption{color:var(--muted);font-size:12.5px} @media(max-width:1100px){ .stats{grid-template-columns:repeat(2,1fr)} .pos{grid-template-columns:1fr} .cart-panel{position:static} .report-stats{grid-template-columns:repeat(3,1fr)} } .sidebar-toggle{ display:none;background:none;border:0;cursor:pointer;font-size:20px;color:var(--ink); width:38px;height:38px;border-radius:10px;align-items:center;justify-content:center;flex:0 0 auto; } .sidebar-toggle:hover{background:var(--bg-2)} .sidebar-close{ display:none;position:absolute;top:14px;right:12px;background:rgba(255,255,255,.14);border:0;color:#fff; width:30px;height:30px;border-radius:9px;cursor:pointer;font-size:14px;align-items:center;justify-content:center; } .sidebar-close:hover{background:rgba(255,255,255,.24)} .sidebar-overlay{ display:none;position:fixed;inset:0;background:rgba(10,14,34,.55);z-index:199; backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px); } .sidebar-overlay.show{display:block;animation:fadeSlideIn .2s ease} @media(max-width:860px){ .sidebar{ width:250px;padding:20px 16px;position:fixed;inset:0 auto 0 0; transform:translateX(-100%);transition:transform .25s cubic-bezier(.4,0,.2,1);z-index:200; } .sidebar.sidebar-open{transform:translateX(0);box-shadow:10px 0 40px rgba(10,14,34,.35)} .sidebar-close{display:flex} .brand span,.nav-item span:last-child,.nav-title{display:initial} .nav-item{justify-content:flex-start} .main{margin-left:0;width:100%} .sidebar-toggle{display:inline-flex} .topbar{padding:0 14px} .content{padding:14px} .stats{grid-template-columns:1fr 1fr} .product-grid{grid-template-columns:repeat(2,1fr)} .report-stats{grid-template-columns:1fr 1fr} .form-grid{grid-template-columns:1fr} .full{grid-column:auto} .credit-preview-grid{grid-template-columns:1fr} .settings-grid{grid-template-columns:1fr} } /* ========================================================= Login Screen & Keamanan ========================================================= */ .login-screen{ position:fixed;inset:0;z-index:300;display:grid;place-items:center;padding:16px; background: radial-gradient(1200px 600px at 10% -10%, rgba(109,75,240,.35), transparent 60%), radial-gradient(1000px 600px at 110% 10%, rgba(10,167,224,.30), transparent 55%), linear-gradient(135deg,var(--sidebar-a),var(--sidebar-b) 55%,var(--sidebar-c)); } .login-card{ width:min(380px,100%);background:var(--card);border-radius:var(--radius-xl);padding:30px 26px 26px; box-shadow:var(--shadow-lg);display:flex;flex-direction:column;gap:12px;animation:popIn .25s cubic-bezier(.2,.8,.3,1); } .login-logo{display:flex;justify-content:center;margin-bottom:2px} .login-logo img{width:56px;height:56px;border-radius:14px;object-fit:cover} .login-card h1{margin:0;font-size:20px;text-align:center;letter-spacing:-.2px} .login-card>small.muted{text-align:center;margin-top:-8px;margin-bottom:6px} .login-card label{display:flex;flex-direction:column;gap:6px;font-size:12.5px;font-weight:700;color:var(--muted)} .login-remember{flex-direction:row !important;align-items:center;gap:8px !important;font-weight:600 !important;color:var(--ink) !important} .login-error{background:var(--danger-bg);color:var(--danger-ink);border-radius:10px;padding:9px 12px;font-size:13px;font-weight:600} .login-submit{width:100%;margin-top:4px;text-align:center} .login-forgot{display:block;text-align:center;margin-top:2px;color:var(--brand-ink);font-weight:700;font-size:13px;text-decoration:none} .login-forgot:hover{text-decoration:underline} .topbar-user{display:flex;align-items:center;gap:8px;background:var(--bg-2);border:1px solid var(--line);border-radius:12px;padding:7px 8px 7px 14px;font-weight:700;font-size:13px;color:var(--ink)} .topbar-user .actions.button{width:30px;height:30px} /* Catatan akun default (tampil hanya saat instalasi pertama kali) */ .login-default-notice{ background:linear-gradient(135deg,var(--brand-light),var(--bg-2));border:1px solid var(--brand-border-2);border-radius:12px; padding:12px 14px;font-size:12.5px;color:var(--ink);animation:popIn .25s cubic-bezier(.2,.8,.3,1); } .login-default-notice b{display:block;font-size:13px;margin-bottom:4px} .login-default-notice p{margin:0 0 8px;color:var(--muted);line-height:1.4} .login-default-notice-row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:4px 0} .login-default-notice-row span{color:var(--muted);font-weight:700} .login-default-notice-row code{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:3px 9px;font-weight:700;font-size:12.5px} /* Footer kredit developer */ .app-footer{ width:min(380px,100%);text-align:center;margin-top:14px;font-size:12px;color:rgba(255,255,255,.85); } .app-footer b{color:#fff} .app-footer a{color:#fff;font-weight:700;text-decoration:underline} .sidebar-footer{ margin-top:18px;padding:14px 10px 4px;text-align:center;font-size:11.5px;line-height:1.6; color:rgba(255,255,255,.65);border-top:1px solid rgba(255,255,255,.14) } .sidebar-footer b{color:rgba(255,255,255,.9)} .sidebar-footer a{color:rgba(255,255,255,.9);text-decoration:none;font-weight:600} .sidebar-footer a:hover{text-decoration:underline} @media (max-width:900px) and (min-width:861px){ .sidebar-footer{display:none} } /* ========================================================= Panel Tema & Warna Tampilan (Pengaturan) ========================================================= */ .theme-panel .section-head small{display:block;margin-top:2px} .theme-block{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)} .theme-block:first-of-type{margin-top:14px;padding-top:0;border-top:0} .theme-block-title{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);margin:0 0 12px} .theme-mode-toggle{display:inline-flex;gap:4px;background:var(--bg-2);border:1px solid var(--line);border-radius:99px;padding:4px} .theme-mode-btn{border:0;background:transparent;color:var(--muted);font-weight:700;font-size:13px;padding:8px 16px;border-radius:99px;cursor:pointer;transition:background .15s ease,color .15s ease} .theme-mode-btn.active{background:var(--card);color:var(--brand-ink);box-shadow:var(--shadow-xs)} .theme-preset-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px} .theme-preset-item{border:1.5px solid var(--line);background:var(--card);border-radius:14px;padding:10px 8px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:7px;transition:border-color .15s ease,transform .15s ease,box-shadow .15s ease} .theme-preset-item:hover{transform:translateY(-2px);box-shadow:var(--shadow-sm)} .theme-preset-item.active{border-color:var(--brand);box-shadow:0 0 0 3px rgba(var(--brand-rgb),.15)} .theme-preset-swatch{width:38px;height:38px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)} .theme-preset-item span{font-size:11.5px;font-weight:700;color:var(--ink);text-align:center;line-height:1.2} @media(max-width:640px){.theme-preset-grid{grid-template-columns:repeat(2,1fr)}} .theme-color-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px} .theme-color-field{display:flex;align-items:center;gap:12px;border:1px solid var(--line);background:var(--bg-2);border-radius:13px;padding:10px 12px} .theme-color-field label{flex:1;min-width:0;font-size:12.5px;font-weight:700;color:var(--muted)} .theme-color-field .theme-color-hex{display:block;font-size:12px;font-weight:800;color:var(--ink);margin-top:2px;font-family:ui-monospace,Menlo,Consolas,monospace} .theme-color-input{flex:0 0 auto;width:42px;height:42px;border:2px solid var(--card);box-shadow:0 0 0 1px var(--line);border-radius:11px;cursor:pointer;padding:0;background:none;overflow:hidden} .theme-color-input::-webkit-color-swatch-wrapper{padding:0} .theme-color-input::-webkit-color-swatch{border:0;border-radius:9px} @media(max-width:640px){.theme-color-grid{grid-template-columns:1fr}} .theme-radius-row{display:flex;align-items:center;gap:14px} .theme-radius-row input[type=range]{flex:1;accent-color:var(--brand)} .theme-radius-row .theme-radius-labels{display:flex;justify-content:space-between;font-size:11px;color:var(--muted);margin-top:6px} .theme-radius-preview{flex:0 0 auto;width:44px;height:44px;background:linear-gradient(135deg,var(--brand),var(--brand2));border-radius:var(--radius-md);transition:border-radius .15s ease} .theme-status-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:4px} @media(max-width:640px){.theme-status-grid{grid-template-columns:1fr}} details.theme-advanced{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)} details.theme-advanced summary{cursor:pointer;font-weight:700;font-size:13px;color:var(--ink);list-style:none} details.theme-advanced summary::-webkit-details-marker{display:none} details.theme-advanced summary::before{content:"▸ ";color:var(--muted)} details.theme-advanced[open] summary::before{content:"▾ "} details.theme-advanced .theme-status-grid{margin-top:14px}