:root{--bg:#f3f6fb;--surface:#fff;--surface-2:#f8fafd;--text:#0f172a;--muted:#64748b;--border:#dbe3ef;--primary:#0f6cbd;--primary-soft:#e7f1fb;--danger:#b42318;--success:#067647;--shadow-soft:0 8px 24px #0f172a0f;--radius-sm:8px;--radius-md:12px;--radius-lg:16px}*{box-sizing:border-box}html,body,#root{width:100%;min-height:100vh}body{color:var(--text);background:radial-gradient(circle at 100% 0,#dbeafe 0%,#f3f6fb 40%);margin:0;font-family:Manrope,Segoe UI,Helvetica Neue,sans-serif}h1,h2,h3,p{margin:0}a{color:inherit}button,input,select{font:inherit}.app-shell{grid-template-columns:248px 1fr;min-height:100vh;display:grid}.app-shell.sidebar-collapsed{grid-template-columns:88px 1fr}.sidebar-nav{background:var(--surface);border-right:1px solid var(--border);flex-direction:column;gap:16px;padding:24px 16px;display:flex}.sidebar-nav.collapsed{align-items:center;padding:18px 10px}.sidebar-head{align-items:center;gap:10px;display:flex}.sidebar-toggle{border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--muted);cursor:pointer;background:#fff;width:32px;height:32px}.sidebar-toggle:hover{background:var(--surface-2);color:var(--text)}.brand-mark{color:#fff;background:linear-gradient(135deg,#0f6cbd,#2f9cf4);border-radius:12px;justify-content:center;align-items:center;width:40px;height:40px;font-weight:700;display:inline-flex}.sidebar-nav h2{margin-bottom:8px;font-size:1rem}.nav-section{gap:8px;display:grid}.nav-section-toggle{border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--muted);letter-spacing:.04em;text-transform:uppercase;cursor:pointer;background:#fff;justify-content:space-between;align-items:center;padding:7px 10px;font-size:.8rem;display:flex}.nav-section-toggle:hover{color:var(--text);background:var(--surface-2)}.sidebar-nav ul{gap:8px;margin:0;padding:0;list-style:none;display:grid}.sidebar-collapsed-links{gap:8px;width:100%;margin:0;padding:0;list-style:none;display:grid}.sidebar-collapsed-links a{text-align:center;font-weight:700}.sidebar-nav a{border-radius:var(--radius-sm);color:var(--muted);padding:10px 12px;text-decoration:none;transition:all .16s;display:block}.sidebar-nav a:hover{background:var(--surface-2);color:var(--text)}.sidebar-nav a.active{background:var(--primary-soft);color:var(--primary);font-weight:600}.main-shell{flex-direction:column;min-width:0;display:flex}.top-header{z-index:30;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid var(--border);background:#f3f6fbf2;justify-content:space-between;align-items:center;padding:16px 24px;display:flex;position:sticky;top:0}.header-kicker{color:var(--muted);margin-bottom:2px;font-size:.75rem}.top-header h1{font-size:1.125rem}.header-actions{align-items:center;gap:12px;display:flex}.user-chip{text-overflow:ellipsis;white-space:nowrap;background:var(--surface);border:1px solid var(--border);max-width:300px;color:var(--muted);border-radius:999px;padding:8px 12px;font-size:.85rem;overflow:hidden}.btn-logout{border:1px solid var(--border);background:var(--surface);border-radius:var(--radius-sm);cursor:pointer;padding:8px 12px}.main-content{padding:24px}.page-shell{gap:16px;display:grid}.page-title-bar h1{margin-bottom:6px;font-size:1.625rem}.page-title-bar p{color:var(--muted)}.sales-order-layout{grid-template-columns:minmax(0,1fr) 300px;align-items:start;gap:16px;display:grid}.sales-order-main{gap:16px;display:grid}.content-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-soft);gap:12px;padding:20px;display:grid}.content-card h3{font-size:1rem}.section-title-row{justify-content:space-between;align-items:center;gap:8px;display:flex}.so-line-head,.so-line-row{grid-template-columns:minmax(220px,1fr) 130px 110px 110px 120px 88px;align-items:start;gap:8px;display:grid}.so-line-head{color:var(--muted);padding:0 4px;font-size:.85rem}.so-lines-list{gap:10px;display:grid}.so-line-row{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-md);padding:10px;transition:border-color .16s,transform .16s}.so-line-row:hover{border-color:#b5c4da;transform:translateY(-1px)}.so-line-col{min-width:0}.so-line-col.unit-price,.so-line-col.stock,.so-line-col.subtotal{padding-top:10px;font-weight:600}.line-tax{color:var(--muted);font-size:.72rem;font-weight:500}.so-field{gap:6px;display:grid;position:relative}.so-field label{color:var(--muted);font-size:.85rem}.so-input,.qty-input,.btn-primary,.btn-secondary,.btn-ghost{border-radius:var(--radius-sm);border:1px solid var(--border)}.so-input,.qty-input{background:#fff;outline:none;padding:10px 12px;transition:border-color .16s,box-shadow .16s}.so-input:focus,.qty-input:focus{border-color:var(--primary);box-shadow:0 0 0 3px #0f6cbd29}.so-input.is-invalid,.qty-input-wrap.is-invalid{border-color:var(--danger)}.qty-input-wrap{border:1px solid var(--border);border-radius:var(--radius-sm);background:#fff;grid-template-columns:34px 1fr 34px;display:grid;overflow:hidden}.qty-input{border:none;border-left:1px solid var(--border);border-right:1px solid var(--border);text-align:center;padding:8px 6px}.qty-btn{cursor:pointer;background:#fff;border:none;transition:all .16s}.qty-btn:hover{background:var(--primary-soft)}.so-error{color:var(--danger);font-size:.75rem}.so-dropdown{z-index:20;border:1px solid var(--border);border-radius:var(--radius-sm);box-shadow:var(--shadow-soft);background:#fff;max-height:260px;position:absolute;top:calc(100% + 4px);left:0;right:0;overflow-y:auto}.so-dropdown-item{text-align:left;cursor:pointer;background:0 0;border:none;border-bottom:1px solid #eef2f8;gap:2px;width:100%;padding:10px 12px;display:grid}.so-dropdown-item:last-child{border-bottom:none}.so-dropdown-item small{color:var(--muted)}.so-dropdown-item.active,.so-dropdown-item:hover{background:var(--primary-soft)}.summary-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-soft);gap:12px;padding:16px;display:grid;position:sticky;top:90px}.summary-card h3{font-size:1rem}.summary-row{color:var(--muted);justify-content:space-between;display:flex}.summary-row strong{color:var(--text)}.summary-row.total{border-top:1px solid var(--border);color:var(--text);padding-top:10px}.actions-row{justify-content:flex-end;display:flex}.btn-primary,.btn-secondary,.btn-ghost{cursor:pointer;justify-content:center;align-items:center;gap:8px;height:40px;padding:0 14px;transition:all .16s;display:inline-flex}.btn-primary{background:var(--primary);border-color:var(--primary);color:#fff}.btn-primary:hover{filter:brightness(1.04)}.btn-primary:disabled{opacity:.65;cursor:not-allowed}.btn-secondary{color:var(--primary);background:#fff;border-color:#b6d0e8}.btn-secondary:hover{background:var(--primary-soft)}.btn-ghost{color:var(--muted);background:0 0}.btn-ghost:hover{color:var(--text);border-color:#b5c4da}.spinner{border:2px solid #ffffff73;border-top-color:#fff;border-radius:50%;width:14px;height:14px;animation:.7s linear infinite spin}.toast{z-index:100;border-radius:var(--radius-md);min-width:260px;max-width:420px;box-shadow:var(--shadow-soft);color:#fff;justify-content:space-between;align-items:center;gap:12px;padding:12px 14px;display:flex;position:fixed;top:20px;right:20px}.toast.success{background:var(--success)}.toast.error{background:var(--danger)}.toast button{color:inherit;cursor:pointer;background:0 0;border:none}.login-layout{background:linear-gradient(135deg,#0f172a 0%,#1e293b 60%,#0f172a 100%);place-items:center;min-height:100vh;padding:24px;display:grid}.login-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);flex-direction:column;gap:24px;width:min(440px,100%);padding:40px 36px;display:flex;box-shadow:0 20px 60px #00000059,0 4px 16px #0003}.login-brand{align-items:center;gap:16px;margin-bottom:4px;display:flex}.login-brand-mark{border-radius:var(--radius-md);background:var(--accent);color:#fff;letter-spacing:.5px;flex-shrink:0;place-items:center;width:52px;height:52px;font-size:1.1rem;font-weight:700;display:grid}.login-title{color:var(--text);margin:0;font-size:1.4rem;font-weight:700}.login-subtitle{color:var(--muted);margin:2px 0 0;font-size:.85rem}.login-error{color:#b91c1c;border-radius:var(--radius-md);background:#fef2f2;border:1px solid #fecaca;align-items:center;gap:10px;padding:10px 14px;font-size:.875rem;font-weight:500;animation:.2s fadeIn;display:flex}.login-error-icon{flex-shrink:0;font-size:1rem}.login-form{flex-direction:column;gap:16px;display:flex}.login-password-wrap{align-items:center;display:flex;position:relative}.login-password-wrap .so-input{width:100%;padding-right:44px}.login-pw-toggle{cursor:pointer;color:var(--muted);background:0 0;border:none;align-items:center;padding:4px;font-size:1rem;line-height:1;display:flex;position:absolute;right:10px}.login-pw-toggle:hover{color:var(--text)}.login-submit-btn{justify-content:center;align-items:center;gap:8px;width:100%;min-height:44px;margin-top:4px;padding:12px;font-size:1rem;display:flex}.login-spinner{border:2px solid #ffffff59;border-top-color:#fff;border-radius:50%;width:18px;height:18px;animation:.7s linear infinite spin;display:inline-block}@keyframes spin{to{transform:rotate(360deg)}}@keyframes fadeIn{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.orders-summary-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;display:grid}.orders-summary-grid>div{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-md);gap:4px;padding:12px;display:grid}.orders-summary-grid small{color:var(--muted)}.orders-summary-grid strong{font-size:1.05rem}.orders-layout{grid-template-columns:minmax(0,1.4fr) minmax(320px,1fr);gap:16px;display:grid}.orders-table-wrap{overflow:auto}.orders-table{border-collapse:collapse;width:100%}.orders-table th,.orders-table td{text-align:left;border-bottom:1px solid var(--border);padding:10px}.orders-filter-input{border:1px solid var(--border);border-radius:var(--radius-sm);background:#fff;width:100%;min-width:90px;padding:6px 8px}.orders-table tbody tr{cursor:pointer;transition:all .16s}.orders-table tbody tr:hover{background:var(--surface-2)}.badge{border-radius:999px;padding:4px 10px;font-size:.75rem;font-weight:600;display:inline-flex}.badge.success{color:#067647;background:#ecfdf3}.badge.warn{color:#b54708;background:#fffaeb}.badge.danger{color:#b42318;background:#fef3f2}.order-details-card{max-height:none;overflow:visible}.order-details-content{gap:14px;display:grid}.detail-block{border:1px solid var(--border);border-radius:var(--radius-md);background:var(--surface-2);gap:8px;padding:12px;display:grid}.detail-block h4{font-size:.95rem}.detail-line{border-radius:var(--radius-sm);background:#fff;border:1px solid #e8edf5;gap:6px;padding:8px;display:grid}.orders-pagination{justify-content:flex-end;align-items:center;gap:10px;margin-top:10px;display:flex}.exec-dashboard{gap:20px}.exec-section-header{border-bottom:2px solid var(--border);margin-top:8px;padding-bottom:8px}.exec-section-header h2{text-transform:uppercase;letter-spacing:.07em;color:var(--muted);font-size:.82rem;font-weight:700}.exec-tab-bar{border-bottom:2px solid var(--border);gap:4px;padding-bottom:0;display:flex}.exec-tab-btn{border-radius:var(--radius-sm) var(--radius-sm) 0 0;color:var(--muted);cursor:pointer;background:0 0;border:1px solid #0000;border-bottom:none;padding:9px 18px;font-size:.88rem;font-weight:500;transition:color .12s,background .12s;position:relative;bottom:-2px}.exec-tab-btn:hover{color:var(--text);background:var(--surface-2)}.exec-tab-btn.active{color:#0f6cbd;border-color:var(--border);background:#fff;border-bottom-color:#fff;font-weight:600}.exec-filter-card{background:linear-gradient(165deg,#fff 0%,#f4f8ff 100%)}.exec-filters-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;display:grid}.exec-kpi-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;display:grid}.exec-stat-card{border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-soft);background:linear-gradient(145deg,#fff,#f7faff);gap:6px;padding:14px;display:grid}.exec-stat-card small{color:var(--muted);text-transform:uppercase;letter-spacing:.04em;font-size:.72rem}.exec-stat-card strong{font-size:1.2rem}.exec-stat-card span{color:var(--muted);font-size:.8rem}.exec-stat-card.success{border-color:#b8e8d7}.exec-stat-card.warn{border-color:#f4ddb3}.exec-stat-card.danger{border-color:#f1b9b9}.exec-grid-two{grid-template-columns:1fr 1fr;gap:16px;display:grid}.exec-chart{width:100%;min-height:320px}.exec-drilldown-head{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-md);flex-wrap:wrap;gap:12px;padding:10px;font-size:.9rem;display:flex}.exec-heatmap{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;display:grid}.exec-heat-cell{border:1px solid var(--border);border-radius:var(--radius-sm);text-align:left;cursor:pointer;background:#fff;gap:4px;min-height:74px;padding:10px;transition:all .16s;display:grid}.exec-heat-cell:hover{transform:translateY(-1px)}.exec-heat-cell span{color:var(--muted);font-size:.76rem}.exec-heat-cell.good{background:#ecfdf3;border-color:#a7f3d0}.exec-heat-cell.mid{background:#e7f1fb;border-color:#bfdcf7}.exec-heat-cell.warn{background:#fffaeb;border-color:#f5d08e}.exec-heat-cell.bad{background:#fef3f2;border-color:#f8caca}.exec-insights-list{gap:10px;display:grid}.exec-insight{border:1px solid var(--border);border-radius:var(--radius-md);background:#fff;border-left-width:5px;gap:6px;padding:12px;display:grid}.exec-insight h4{font-size:.95rem}.exec-insight p{color:var(--muted);font-size:.9rem}.exec-insight strong{font-size:.88rem}.exec-insight.high{border-left-color:#dc2626}.exec-insight.medium{border-left-color:#d97706}.exec-insight.low{border-left-color:#0f6cbd}@media (width<=1120px){.sales-order-layout{grid-template-columns:1fr}.summary-card{position:static}.orders-layout{grid-template-columns:1fr}.exec-kpi-grid,.exec-filters-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.exec-grid-two{grid-template-columns:1fr}}@media (width<=900px){.app-shell,.app-shell.sidebar-collapsed{grid-template-columns:1fr}.sidebar-nav{border-right:none;border-bottom:1px solid var(--border);padding:12px 16px}.sidebar-nav ul{flex-wrap:wrap;display:flex}.top-header{padding:12px 16px}.main-content{padding:16px}}@media (width<=760px){.so-line-head{display:none}.so-line-row{grid-template-columns:1fr}.so-line-col.unit-price:before{content:"Unit Price: ";color:var(--muted);font-weight:500}.so-line-col.stock:before{content:"Stock: ";color:var(--muted);font-weight:500}.so-line-col.subtotal:before{content:"Subtotal: ";color:var(--muted);font-weight:500}.actions-row{justify-content:stretch}.btn-primary{width:100%}.orders-summary-grid,.exec-heatmap{grid-template-columns:1fr 1fr}}