﻿/* CKZU ERP v3 - visual layer only, business selectors stay intact. */
:root {
  --erp-primary:#2563eb; --erp-primary-dark:#1d4ed8; --erp-success:#10b981;
  --erp-warning:#f59e0b; --erp-danger:#ef4444; --erp-cyan:#0891b2;
  --erp-sidebar:#111827; --erp-bg:#f5f7fb; --erp-surface:#fff;
  --erp-text:#111827; --erp-muted:#64748b; --erp-border:#e5e7eb;
  --erp-radius:8px; --erp-shadow:0 1px 3px rgba(15,23,42,.06),0 8px 24px rgba(15,23,42,.04);
}
html,body{min-width:320px;background:var(--erp-bg)}
body{color:var(--erp-text);font-family:Inter,"Source Han Sans SC","Noto Sans CJK SC","Microsoft YaHei","Segoe UI",sans-serif}
button,input,select{letter-spacing:0}
button{min-height:38px;padding:8px 14px;border-radius:6px;background:var(--erp-primary);box-shadow:none;font-size:14px;font-weight:700;transition:background .15s,border-color .15s,color .15s,transform .1s,box-shadow .15s}
button:hover{background:var(--erp-primary-dark);box-shadow:0 4px 12px rgba(37,99,235,.18);transform:translateY(-1px)}
button:active{transform:translateY(0)}
button:disabled{cursor:not-allowed;opacity:.5;transform:none}
button.ghost{color:#334155;border:1px solid var(--erp-border);background:#fff}
button.ghost:hover{color:var(--erp-primary);border-color:#bfdbfe;background:#eff6ff;box-shadow:none}
button.danger-button,.danger-button{background:var(--erp-danger)}
input,select{min-height:40px;padding:8px 11px;border:1px solid #d7dee8;border-radius:6px;color:var(--erp-text);background:#fff;font-size:14px}
input::placeholder{color:#94a3b8} input:hover,select:hover{border-color:#b8c3d2}
input:focus,select:focus{border-color:var(--erp-primary);box-shadow:0 0 0 3px rgba(37,99,235,.12)}
.shell{width:100%;min-height:100vh;margin:0;padding:0;gap:0}
.app-view{width:100%;height:100vh;min-height:100vh;grid-template-columns:232px minmax(0,1fr);overflow:hidden;border:0;border-radius:0;background:var(--erp-bg);box-shadow:none}
.sidebar{position:relative;height:100vh;padding:0 14px 16px;gap:0;overflow-y:auto;border:0;background:var(--erp-sidebar)}
.sidebar-brand{display:flex;align-items:center;gap:11px;min-height:72px;margin:0 -14px;padding:0 18px;border-bottom:1px solid rgba(255,255,255,.08)}
.brand-mark{display:grid;place-items:center;width:34px;height:34px;flex:0 0 34px;border-radius:8px;color:#fff;background:var(--erp-primary);font-size:18px;font-weight:900}
.sidebar-brand strong,.sidebar-brand span{display:block;letter-spacing:0}.sidebar-brand strong{color:#fff;font-size:16px}.sidebar-brand span{margin-top:2px;color:#94a3b8;font-size:11px}
.sidebar-user{display:flex;align-items:center;gap:10px;margin:14px 0 10px;padding:11px;border:1px solid rgba(255,255,255,.08);border-radius:var(--erp-radius);background:rgba(255,255,255,.04)}
.user-avatar{position:relative;width:34px;height:34px;flex:0 0 34px;border-radius:50%;background:#334155}
.user-avatar:before,.user-avatar:after{content:"";position:absolute;left:50%;transform:translateX(-50%);border:2px solid #cbd5e1}
.user-avatar:before{top:7px;width:7px;height:7px;border-radius:50%}.user-avatar:after{bottom:6px;width:16px;height:8px;border-radius:12px 12px 4px 4px}
.sidebar-user .eyebrow{color:#64748b;font-size:9px}.sidebar-user h2{margin:2px 0 1px;color:#f8fafc;font-size:14px;line-height:1.25}.sidebar-user .hint{margin:0;color:#94a3b8;font-size:11px}
.sidebar nav{display:grid;gap:3px;padding:4px 0 12px}.nav-button{min-height:40px;padding:9px 11px;border:0;border-radius:6px;color:#aeb9c8;background:transparent;font-size:13px;font-weight:650}
.nav-button:before{width:20px;height:20px;border-radius:5px;color:#94a3b8;background:transparent;font-size:14px}.nav-button:hover{color:#f8fafc;background:rgba(255,255,255,.07);box-shadow:none;transform:none}
.nav-button.active{color:#fff;border:0;background:var(--erp-primary);box-shadow:0 4px 14px rgba(37,99,235,.28)}.nav-button.active:before{color:#fff}
.sidebar-footer{display:grid;gap:9px;margin-top:auto;padding-top:10px}.system-state,.live-indicator{display:flex;align-items:center;gap:7px}.system-state{padding:0 4px;color:#94a3b8;font-size:11px}
.system-state i,.live-indicator i{width:7px;height:7px;border-radius:50%;background:var(--erp-success);box-shadow:0 0 0 3px rgba(16,185,129,.14)}
#logoutButton{width:100%;min-height:38px;color:#cbd5e1;border-color:rgba(255,255,255,.1);background:rgba(255,255,255,.05)}
#logoutButton:hover{color:#fff;border-color:rgba(255,255,255,.16);background:rgba(255,255,255,.09)}
.content{height:100vh;padding:0 24px 28px;overflow:auto;background:var(--erp-bg)}
.content-header{position:sticky;top:0;z-index:40;min-height:72px;margin:0 -24px 20px;padding:0 24px;border-bottom:1px solid var(--erp-border);background:rgba(255,255,255,.94);backdrop-filter:blur(14px)}
.content-header .eyebrow{margin-bottom:3px;color:var(--erp-muted);font-size:10px}.content-header h2{margin:0;font-size:20px;line-height:1.2}.topbar-meta{display:flex;align-items:center;gap:14px;color:var(--erp-muted);font-size:12px}.live-indicator{padding-right:14px;border-right:1px solid var(--erp-border)}
.page{width:100%;max-width:1540px;margin:0 auto;animation:erpV3Enter .16s ease-out}@keyframes erpV3Enter{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
.toolbar{min-height:58px;margin-bottom:14px;padding:9px 12px;align-items:center;border:1px solid var(--erp-border);border-radius:var(--erp-radius);background:var(--erp-surface);box-shadow:var(--erp-shadow)}.toolbar h3{margin:0;font-size:15px}
.search{gap:8px;align-items:center}.search input,.search select{min-width:160px;height:38px}.search input:first-child{min-width:230px}
.dashboard-summary,.sales-daily-summary{display:grid;grid-template-columns:repeat(4,minmax(150px,1fr));gap:12px;margin:0 0 14px}
.dashboard-summary div,.sales-daily-summary div{min-height:92px;padding:16px;border:1px solid var(--erp-border);border-radius:var(--erp-radius);background:#fff;box-shadow:var(--erp-shadow)}
.dashboard-summary div:after,.sales-daily-summary div:after,.card:after{display:none}.dashboard-summary span,.sales-daily-summary span{color:var(--erp-muted);font-size:12px;font-weight:600}.dashboard-summary strong,.sales-daily-summary strong{margin-top:8px;color:var(--erp-text);font-size:24px;line-height:1.1}
.grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px}.card,.role-card{padding:14px;border:1px solid var(--erp-border);border-radius:var(--erp-radius);background:#fff;box-shadow:none}.card:hover{border-color:#bfdbfe;background:#f8fbff}
.table{border:1px solid var(--erp-border);border-radius:var(--erp-radius);background:#fff;box-shadow:var(--erp-shadow)}
.row{min-height:46px;padding:9px 11px;border:0;border-bottom:1px solid #edf0f4;border-radius:0;color:#334155;background:#fff;box-shadow:none;font-size:13px}.row:last-child{border-bottom:0}
.row.header{min-height:42px;color:#64748b;background:#f8fafc;font-size:11px;font-weight:800;text-transform:none}.row:not(.header):hover{border-color:#edf0f4;background:#f8fbff;box-shadow:inset 3px 0 0 var(--erp-primary)}
.row button,.small-button{min-height:32px;padding:5px 10px;font-size:12px}.status-badge{min-height:22px;padding:3px 8px;border-radius:999px;font-size:11px}
.pager,.sales-product-pager{min-height:48px;margin-top:10px;padding:8px 10px;border:1px solid var(--erp-border);border-radius:var(--erp-radius);background:#fff}.pager button,.sales-product-pager button{min-height:32px;padding:5px 11px}
/* Sales order workspace */
#ordersPage .order-form{padding:16px;border:1px solid var(--erp-border);border-radius:var(--erp-radius);background:#fff;box-shadow:var(--erp-shadow)}
.sales-order-create-head{margin:-16px -16px 0;padding:14px 16px;border-bottom:1px solid var(--erp-border);background:#f8fafc}.sales-order-create-head strong{color:var(--erp-text);font-size:16px}.sales-order-create-head span{color:var(--erp-muted);font-size:12px}
.sales-product-search{padding:10px;border:1px solid #dbeafe;border-radius:7px;background:#eff6ff}.sales-product-grid{grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px}
.sales-product-card{overflow:hidden;border:1px solid var(--erp-border);border-radius:var(--erp-radius);background:#fff;box-shadow:none}.sales-product-card:hover{border-color:#93c5fd;box-shadow:0 8px 22px rgba(15,23,42,.09);transform:translateY(-2px)}
.sales-product-image{min-height:154px;padding:8px;border-bottom:1px solid #edf0f4;background:#fff}.sales-product-image img{width:100%;height:154px;object-fit:contain}.sales-product-body{padding:10px}.sales-product-body strong{font-size:14px}.sales-product-code,.sales-product-meta{color:var(--erp-muted);font-size:11px}.sales-product-price{color:var(--erp-danger);font-size:16px}.sales-product-actions{gap:7px}.sales-product-actions input{min-height:36px}.sales-add-button{width:38px;min-width:38px;min-height:36px;padding:0;background:var(--erp-primary);font-size:18px}
.order-subtitle{margin:8px 0 0;font-size:14px}.order-total-row{border-color:#dbeafe;background:#eff6ff}
.sales-order-tabs{position:sticky;top:82px;z-index:18;gap:4px;margin:16px 0 10px;padding:4px;overflow-x:auto;border:1px solid var(--erp-border);border-radius:7px;background:#fff}.sales-order-tabs button{min-width:max-content;min-height:34px;padding:6px 11px;color:var(--erp-muted);background:transparent;font-size:12px}.sales-order-tabs button:hover{color:var(--erp-primary);background:#eff6ff;box-shadow:none}.sales-order-tabs button.active{color:#fff;background:var(--erp-primary)}
.sales-order-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:10px}.sales-order-card{padding:14px;border:1px solid var(--erp-border);border-radius:var(--erp-radius);background:#fff;box-shadow:none}.sales-order-card:hover{border-color:#bfdbfe;box-shadow:var(--erp-shadow);transform:none}.sales-order-head,.sales-order-customer,.sales-order-footer{gap:8px}.sales-order-thumb{width:58px;height:58px;border-radius:6px}.sales-order-amount{color:var(--erp-primary);background:#eff6ff}
/* Operational forms */
.picking-form,.delivery-form,.scan-panel,.product-form,.inline-form,.form.narrow{margin-top:14px;padding:16px;border:1px solid var(--erp-border);border-radius:var(--erp-radius);background:#fff;box-shadow:var(--erp-shadow)}
.scan-panel{border-top:3px solid var(--erp-cyan)}.scan-form{gap:8px;padding:12px;border-radius:7px;background:#ecfeff}.scan-form input{height:48px;border-color:#67e8f9;font-size:17px;font-weight:700}.scan-form button,#startScanPickingButton,button[data-scan-order-id]{background:var(--erp-cyan)}#confirmPickingButton,button[type="submit"]{background:var(--erp-success)}.scan-alert{border-radius:7px}.scan-row-complete{background:#ecfdf5;box-shadow:inset 3px 0 0 var(--erp-success)}
.product-form,.inline-form{margin-bottom:14px}.role-card h3{margin:0 0 10px;font-size:15px}.checks{gap:8px}.checks label{padding:8px 10px;border:1px solid var(--erp-border);border-radius:6px;background:#f8fafc;font-size:12px}
.message:not(:empty){right:20px;bottom:20px;min-width:220px;padding:11px 14px;border-radius:7px;color:#fff!important;background:#111827;box-shadow:0 12px 30px rgba(15,23,42,.24);font-size:13px}
/* Login */
body:has(#loginView:not(.hidden)) .shell{display:grid;grid-template-columns:minmax(420px,1.2fr) minmax(360px,.8fr);gap:0;min-height:100vh;background:#fff}.brand-panel{min-height:100vh;padding:56px;border:0;border-radius:0;color:#fff;background:#111827;box-shadow:none}.brand-panel .eyebrow,.brand-panel .subtitle{color:#94a3b8}.brand-panel h1{max-width:680px;font-size:48px}.status-strip span{color:#dbeafe;border-color:rgba(255,255,255,.12);background:rgba(255,255,255,.05)}.language-switch{border-color:rgba(255,255,255,.12);background:rgba(255,255,255,.05)}.language-switch button{color:#cbd5e1}.login-panel{width:min(430px,calc(100% - 48px));margin:auto;padding:34px;border:1px solid var(--erp-border);border-radius:var(--erp-radius);box-shadow:var(--erp-shadow)}.login-panel h2{margin-top:0;font-size:24px}
@media(max-width:1100px){.dashboard-summary,.sales-daily-summary{grid-template-columns:repeat(2,minmax(150px,1fr))}.sales-product-grid{grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}}
@media(max-width:860px){
 body:has(#loginView:not(.hidden)) .shell{grid-template-columns:1fr}.brand-panel{display:none}.login-panel{min-height:auto;margin:12vh auto 0}
 .app-view{height:auto;min-height:100vh;grid-template-columns:1fr}.sidebar{position:sticky;top:0;z-index:60;height:auto;padding:0 10px 10px;overflow:visible}.sidebar-brand{min-height:58px;margin:0 -10px;padding:0 13px}.brand-mark{width:30px;height:30px;flex-basis:30px;font-size:15px}.sidebar-user,.sidebar-footer{display:none}.sidebar nav{display:flex;gap:5px;padding:8px 0 0;overflow-x:auto;scrollbar-width:none}.sidebar nav::-webkit-scrollbar{display:none}.nav-button{width:auto;min-width:max-content;min-height:36px;padding:7px 10px;font-size:12px}.nav-button:before{width:16px;height:16px;font-size:11px}
 .content{height:auto;min-height:calc(100vh - 100px);padding:0 12px 24px;overflow:visible}.content-header{position:relative;min-height:62px;margin:0 -12px 12px;padding:0 12px}.content-header h2{font-size:18px}.topbar-meta{display:none}
 .toolbar{display:grid;grid-template-columns:1fr;gap:9px;padding:10px}.search{display:grid;grid-template-columns:1fr 1fr;gap:7px}.search input,.search input:first-child,.search select,.search button{width:100%;min-width:0}.search input:first-child{grid-column:1/-1}
 .dashboard-summary,.sales-daily-summary{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.dashboard-summary div,.sales-daily-summary div{min-height:80px;padding:12px}.dashboard-summary strong,.sales-daily-summary strong{font-size:20px}
 #ordersPage .order-form{padding:11px}.sales-order-create-head{margin:-11px -11px 0;padding:12px}.sales-product-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.sales-product-image,.sales-product-image img{height:145px;min-height:145px}.sales-product-body{padding:8px}.sales-order-tabs{top:0}.sales-order-list{grid-template-columns:1fr}
 .row{font-size:13px}.row.header{display:none}.pager,.sales-product-pager{display:grid;grid-template-columns:1fr auto 1fr;gap:7px}.pager button,.sales-product-pager button{width:100%;min-height:38px}.message:not(:empty){right:12px;bottom:12px;left:12px;min-width:0}
}
@media(max-width:430px){.sales-product-grid{grid-template-columns:1fr 1fr}.sales-product-image,.sales-product-image img{height:132px;min-height:132px}.sales-product-actions{grid-template-columns:minmax(0,1fr) 36px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}}
.nav-button::before{display:none}
.nav-button svg{width:18px;height:18px;flex:0 0 18px;color:currentColor;stroke-width:1.8}
.nav-button span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.shell{display:block;grid-template-columns:1fr}
.sidebar,.content,.page{min-width:0;max-width:100%}
.table{max-width:100%}
@media(max-width:860px){
 .app-view{width:100%;overflow-x:hidden}
 .sidebar,.content,.page{width:100%;min-width:0;max-width:100%}
 .sales-order-tabs{display:flex;max-width:100%}
 .sales-order-tabs button{width:auto;min-width:max-content}
}
#adminOrderExportButton{color:#334155;border-color:#d7dee8;background:#f1f5f9}
#adminOrderExportButton:hover{color:#0f172a;border-color:#cbd5e1;background:#e2e8f0}
.order-action-buttons{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.order-action-buttons button{width:auto}
