:root{
  --bg:#f3f6fa;--card:#fff;--ink:#152033;--muted:#6c7789;
  --primary:#0b6bcb;--primary2:#084d92;--danger:#b42318;--success:#067647;--warn:#b54708;
  --line:#dbe3ed;--side:#101c2d;--topbar:#fff;--topbar-ink:#152033;--side-hover:#1e3452;
  --input:#fff;--soft:#e8eef6;--table-head:#f7f9fc;--row-hover:#fbfdff;
  --banner1:#061b3b;--banner2:#075985;--shadow:0 10px 30px rgba(20,40,70,.08)
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--bg)}
body{margin:0;overflow-x:hidden;background:var(--bg);color:var(--ink);font:14px/1.55 Inter,"Segoe UI",Arial,sans-serif}
a{color:var(--primary);text-underline-offset:2px}
img{display:block;max-width:100%}
button,input,select,textarea{font:inherit}

/* Header admin */
.topbar{position:fixed;z-index:40;top:0;left:0;right:0;height:72px;background:var(--topbar);color:var(--topbar-ink);border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 22px;box-shadow:0 2px 12px rgba(15,30,55,.04)}
.admin-brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--ink);min-width:250px}
.admin-brand .brand-logo{width:42px;height:42px;object-fit:contain;filter:drop-shadow(0 4px 8px rgba(10,75,145,.16))}
.admin-brand strong{display:block;font-size:16px;line-height:1.05;letter-spacing:.01em}
.admin-brand small{display:block;margin-top:4px;font-size:10px;letter-spacing:.28em;font-weight:850;color:var(--primary)}
.top-user{margin-left:auto;display:grid;grid-template-columns:auto auto;column-gap:10px;align-items:center;text-align:right}
.top-user span{font-weight:800;color:var(--ink)}
.top-user small{grid-column:1;font-size:10px;letter-spacing:.08em;color:var(--muted)}
.top-user a{grid-column:2;grid-row:1/3;color:var(--danger);font-weight:800;text-decoration:none;padding:8px 10px;border-radius:8px;background:color-mix(in srgb,var(--danger) 8%,transparent)}
.menu-toggle{display:none;border:0;background:var(--soft);color:var(--ink);border-radius:9px;width:40px;height:40px;font-size:20px;cursor:pointer}

/* Sidebar */
.sidebar{position:fixed;z-index:30;left:0;top:72px;bottom:0;width:272px;background:var(--side);overflow:auto;padding:14px 14px 26px;box-shadow:8px 0 24px rgba(10,20,35,.08)}
.sidebar-company{height:92px;margin:0 2px 12px;border-radius:14px;background:rgba(255,255,255,.96);display:flex;align-items:center;justify-content:center;padding:11px;overflow:hidden}
.sidebar-company img{max-height:72px;max-width:205px;object-fit:contain}
.sidebar nav>a{display:flex;align-items:center;gap:10px;color:#d8e2f0;text-decoration:none;padding:10px 12px;border-radius:9px;margin:2px 0;font-weight:650;transition:.16s}
.sidebar nav>a:hover,.sidebar nav>a.active{background:var(--side-hover);color:#fff;transform:translateX(2px)}
.nav-label{color:#7890ad;text-transform:uppercase;font-size:10px;font-weight:900;letter-spacing:.13em;margin:18px 12px 6px}
.sidebar-backdrop{display:none}

/* Main */
.main{margin-left:272px;padding:96px 28px 30px;min-height:100vh;max-width:1800px}
.auth-main{min-height:100vh;display:grid;place-items:center;padding:24px;background:radial-gradient(circle at 20% 10%,color-mix(in srgb,var(--primary) 13%,transparent),transparent 35%),var(--bg)}
.page-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px}
.page-head h1{margin:0;font-size:28px;line-height:1.2;letter-spacing:-.02em}
.page-head p{margin:3px 0 0;color:var(--muted)}
.footer{color:var(--muted);text-align:center;margin:28px 0 0;padding:18px 0;border-top:1px solid var(--line)}

/* Cards and grids */
.grid{display:grid;gap:16px}
.grid.cards,.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid-3,.stat-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-2,.two-col,.split{grid-template-columns:repeat(2,minmax(0,1fr))}
.card,.soft-card{background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:16px;padding:18px;box-shadow:0 5px 18px rgba(20,40,70,.05)}
.soft-card{background:color-mix(in srgb,var(--card) 86%,var(--soft))}
.card h2,.card h3{margin-top:0}
.metric .label,.stat small{color:var(--muted);font-weight:750}
.metric .value,.stat strong{display:block;font-size:25px;font-weight:900;margin-top:5px;letter-spacing:-.02em}
.metric .hint{font-size:12px;color:var(--muted)}
.stat{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px}

/* Dashboard */
.dashboard-brand-banner{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(240px,.6fr);gap:24px;align-items:center;min-height:218px;border-radius:22px;background:linear-gradient(120deg,var(--banner1),var(--banner2));color:#fff;margin-bottom:18px;padding:32px;overflow:hidden;position:relative;box-shadow:var(--shadow)}
.dashboard-brand-banner:after{content:"";position:absolute;width:330px;height:330px;border-radius:50%;right:-90px;top:-150px;background:rgba(255,255,255,.08)}
.dashboard-brand-banner .overlay{position:relative;z-index:2;max-width:760px}
.dashboard-brand-banner h2{font-size:31px;line-height:1.15;margin:0 0 10px;letter-spacing:-.025em}
.dashboard-brand-banner p{font-size:15px;line-height:1.65;margin:0 0 18px;color:rgba(255,255,255,.88)}
.dashboard-brand-banner .brand-visual{position:relative;z-index:2;display:flex;justify-content:center;align-items:center;min-height:150px;border-radius:18px;background:rgba(255,255,255,.96);padding:17px;box-shadow:0 18px 35px rgba(0,0,0,.18)}
.dashboard-brand-banner .brand-visual img{position:static!important;width:auto!important;height:auto!important;max-width:290px!important;max-height:165px!important;object-fit:contain!important;opacity:1!important}
.report-visual{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(260px,.65fr);gap:16px;margin-top:16px}
.report-visual .visual-frame{height:230px;border-radius:14px;background:var(--table-head);display:flex;align-items:center;justify-content:center;padding:18px;overflow:hidden}
.report-visual img{width:100%;height:100%;object-fit:contain}

/* Forms */
.toolbar{display:flex;gap:10px;align-items:end;justify-content:space-between;flex-wrap:wrap;margin-bottom:15px}
.form-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px}
.form-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}
.field,.form-group{min-width:0}
.field label,.form-group label{display:block;font-size:12px;font-weight:800;color:var(--muted);margin:0 0 5px}
.field input,.field select,.field textarea,.form-control,.form-select{width:100%;border:1px solid var(--line);border-radius:9px;padding:10px 11px;background:var(--input);color:var(--ink);outline:none;transition:.15s}
.field input:focus,.field select:focus,.field textarea:focus,.form-control:focus,.form-select:focus{border-color:var(--primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 14%,transparent)}
.field textarea,.form-control[type="textarea"],textarea.form-control{min-height:92px;resize:vertical}
.span-2{grid-column:span 2}.span-3{grid-column:span 3}
.filters{display:flex;gap:10px;flex-wrap:wrap;align-items:end}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:0;border-radius:9px;padding:10px 14px;background:var(--primary);color:#fff;text-decoration:none;font-weight:850;cursor:pointer;transition:.15s;white-space:nowrap}
.btn:hover{filter:brightness(.96);transform:translateY(-1px)}
.btn.secondary,.btn-outline{background:var(--soft);color:var(--ink);border:1px solid var(--line)}
.btn.danger,.btn-danger{background:var(--danger);color:#fff}.btn.success{background:var(--success)}.btn-muted{background:#697386;color:#fff}.btn-orange{background:#f66b1f;color:#fff}
.btn.small,.btn-sm{padding:6px 9px;font-size:12px;border-radius:7px}
.hero-actions,.proof-actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:14px}

/* Tables */
.table-wrap{overflow:auto;background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:0 5px 16px rgba(20,35,60,.035)}
table,.table{border-collapse:collapse;width:100%;min-width:760px}
th,td{padding:11px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
th{background:var(--table-head);color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.05em;position:sticky;top:0;z-index:1}
tr:hover td{background:var(--row-hover)}
.text-right{text-align:right}.empty{text-align:center;color:var(--muted);padding:28px!important}

/* Badges, alerts, status */
.badge,.status{display:inline-flex;align-items:center;border-radius:999px;padding:4px 9px;font-size:11px;font-weight:850;background:#e9eef5;color:#34465f;white-space:nowrap}
.badge.success,.status.green{background:#dff7ec;color:#067647}.badge.danger,.status.red{background:#fee4e2;color:#b42318}.badge.warn,.status.orange{background:#fff0d5;color:#b54708}
.alert{border-radius:11px;padding:12px 14px;margin:0 0 14px;background:#eaf2ff;color:#174f8a;border:1px solid color-mix(in srgb,#174f8a 13%,transparent)}
.alert.success{background:#dcfae6;color:#067647}.alert.danger,.alert.error{background:#fee4e2;color:#b42318}.alert.warning{background:#fff0d5;color:#b54708}
.notice{border-radius:11px;padding:12px 14px;background:#eef5ff;border:1px solid #d6e6fb;color:#36516e}
.muted{color:var(--muted)}.danger-text{color:var(--danger);font-weight:800}.success-text{color:var(--success);font-weight:800}

/* Tabs and filters */
.tabs,.filter-tabs{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap}
.tabs a,.filter-tabs a{padding:8px 12px;border-radius:8px;background:var(--soft);color:var(--ink);text-decoration:none;font-weight:800}
.tabs a.active,.filter-tabs a.active{background:var(--primary);color:#fff}

/* Login */
.login-card{width:min(460px,100%);padding:26px}
.login-logo{display:flex;justify-content:center;margin-bottom:16px}
.login-logo img{width:min(280px,82%);max-height:190px;object-fit:contain}
.login-card h1{text-align:center;margin:0 0 4px;font-size:24px}.login-card>p{text-align:center;margin-top:0}

/* Branding and theme */
.branding-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:16px}
.branding-preview{height:210px;border:1px dashed var(--line);border-radius:14px;display:flex;align-items:center;justify-content:center;overflow:hidden;background:var(--table-head);padding:16px}
.branding-preview img{max-width:100%;max-height:100%;object-fit:contain}
.branding-placeholder{color:var(--muted);text-align:center}
.branding-card label{display:block;font-weight:700;margin:10px 0 6px}
.branding-card input[type=file],.branding-card input[type=text],.branding-card textarea{width:100%}
.theme-columns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.theme-select-card{border:1px solid var(--line);border-radius:14px;padding:16px;background:var(--card)}
.theme-select-card select{width:100%;padding:10px;border:1px solid var(--line);border-radius:9px;background:var(--input);color:var(--ink)}
.theme-live-preview{height:145px;margin-top:13px;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--preview-bg)}
.theme-live-top{height:24px;background:var(--preview-primary)}.theme-live-body{height:121px;display:flex}.theme-live-side{width:29%;background:var(--preview-side)}.theme-live-content{flex:1;padding:14px}.theme-live-card{height:60px;border-radius:9px;background:var(--preview-card);box-shadow:0 4px 12px rgba(0,0,0,.08)}
.theme-preset-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px;margin-top:15px}.theme-preset{border:1px solid var(--line);border-radius:12px;padding:12px}.theme-preset small{display:block;color:var(--muted);margin:4px 0 8px}.theme-swatches{display:flex;gap:6px}.theme-swatch{width:26px;height:26px;border-radius:8px;border:1px solid rgba(0,0,0,.08)}
.custom-color-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px}.color-field{border:1px solid var(--line);border-radius:10px;padding:10px}.color-field label{display:block;font-size:11px;font-weight:800;color:var(--muted);margin-bottom:6px}.color-field input{width:100%;height:38px;border:0;background:transparent}

/* Special page helpers */
.stock-info{display:flex;gap:8px;flex-wrap:wrap}.stock-info span,.unit,.cost,.price{font-weight:800}.price{color:var(--primary)}.cost{color:var(--muted)}
.proof-admin-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,.55fr);gap:16px}.proof-preview,.pdf-preview{min-height:280px;border-radius:14px;background:var(--table-head);display:flex;align-items:center;justify-content:center;overflow:hidden}.proof-preview img,.pdf-preview iframe{width:100%;height:100%;object-fit:contain;border:0}.proof-card-head{display:flex;justify-content:space-between;gap:12px}.proof-review-card{align-self:start}
.mt-1{margin-top:8px}.mt-2{margin-top:16px}.mt-3{margin-top:24px}.page-title{margin:0;font-size:27px}

/* Dark mode table/card harmonization */
html[data-theme="midnight"] .card,html[data-theme="midnight"] .table-wrap,html[data-theme="midnight"] .stat{box-shadow:none}

@media(max-width:1180px){
  .grid.cards,.grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.span-3{grid-column:span 2}
  .dashboard-brand-banner{grid-template-columns:minmax(0,1.2fr) minmax(210px,.8fr)}
}
@media(max-width:900px){
  .menu-toggle{display:inline-grid;place-items:center;margin-left:8px}
  .admin-brand{min-width:0}.top-user span,.top-user small{display:none}
  .sidebar{transform:translateX(-105%);transition:.22s}.nav-open .sidebar{transform:none}
  .sidebar-backdrop{position:fixed;z-index:25;inset:72px 0 0;background:rgba(8,17,31,.42)}.nav-open .sidebar-backdrop{display:block}
  .main{margin-left:0;padding:92px 16px 24px}
  .dashboard-brand-banner{grid-template-columns:1fr;padding:24px}.dashboard-brand-banner .brand-visual{justify-self:stretch}
  .two-col,.split,.report-visual,.proof-admin-grid,.theme-columns{grid-template-columns:1fr}
}
@media(max-width:680px){
  .topbar{height:66px;padding:0 12px}.sidebar{top:66px}.sidebar-backdrop{inset:66px 0 0}.admin-brand strong{font-size:14px}.admin-brand small{font-size:8px}.admin-brand .brand-logo{width:38px!important;height:38px!important}
  .main{padding:82px 12px 20px}.page-head h1,.page-title{font-size:22px}
  .grid.cards,.grid-4,.grid-3,.grid-2,.stat-grid,.form-grid,.form-row{grid-template-columns:1fr}.span-2,.span-3{grid-column:auto}
  .dashboard-brand-banner{min-height:auto;padding:20px}.dashboard-brand-banner h2{font-size:25px}.dashboard-brand-banner .brand-visual img{max-width:230px!important;max-height:130px!important}
  .toolbar{align-items:stretch}.toolbar>.btn{width:100%}
  .card{padding:15px}.branding-grid{grid-template-columns:1fr}
}

/* V11 Retur Produk */
.summary-row{display:flex;justify-content:space-between;gap:16px;padding:8px 0;border-bottom:1px solid var(--line)}
.summary-row.total{font-size:17px;border-top:2px solid var(--ink);border-bottom:0;margin-top:6px;padding-top:12px}
.return-process-actions{display:flex;gap:8px;flex-wrap:wrap}
.return-item-note{min-width:180px}
@media(max-width:760px){.return-process-actions{display:grid}.return-process-actions .btn{width:100%}}