:root{color:#222537;background:#f3f4f8;font-family:Inter,Segoe UI,Arial,sans-serif}*{box-sizing:border-box}body{margin:0;overflow-x:hidden}h1,h2,h3,p{margin:0}input,select,button{font:inherit}#root{width:100%;min-height:100vh;overflow-x:hidden}.app-shell{grid-template-columns:190px 1fr;min-height:100vh;display:grid}.sidebar{background:#fff;border-right:1px solid #eceef5;flex-direction:column;gap:26px;padding:20px 18px;display:flex}.brand{text-align:center}.brand-logo{font-family:Times New Roman,serif;font-size:42px;font-weight:700;line-height:1}.brand-sub{letter-spacing:.8px;margin-top:-4px;font-weight:500}.side-nav{flex-direction:column;gap:8px;display:flex}.side-link,.logout-link{color:#787e90;cursor:pointer;background:0 0;border:1px solid #0000;border-radius:10px;align-items:center;gap:10px;padding:10px;text-decoration:none;display:flex}.side-link.active{color:#5a52ea;background:#f5f5ff;font-weight:600}.logout-link{margin-top:auto}.main-panel{flex-direction:column;min-width:0;display:flex}.topbar{background:#fff;border-bottom:1px solid #eceef5;justify-content:space-between;align-items:center;height:74px;padding:0 18px;display:flex}.menu-toggle{color:#4d5366;cursor:pointer;background:#fff;border:1px solid #d8deea;border-radius:10px;justify-content:center;align-items:center;width:40px;height:40px;display:none}.sidebar-backdrop{z-index:8;background:#0f121c4d;border:none;padding:0;display:none;position:fixed;inset:0}.sidebar-backdrop.show{display:block}.search-wrap{color:#8b90a2;border:1px solid #dde1ea;border-radius:999px;align-items:center;gap:8px;width:min(360px,90%);padding:10px 12px;display:flex}.search-wrap input{background:0 0;border:none;outline:none;width:100%}.top-actions{align-items:center;gap:18px;display:flex}.notif-wrap{position:relative}.notif-btn{color:#4d5366;cursor:pointer;background:#fff;border:1px solid #d8deea;border-radius:10px;justify-content:center;align-items:center;width:36px;height:36px;display:inline-flex;position:relative}.notif-badge{color:#fff;background:#9aa1b4;border-radius:999px;justify-content:center;align-items:center;min-width:18px;height:18px;padding:0 6px;font-size:11px;display:inline-flex;position:absolute;top:-6px;right:-6px}.notif-badge.urgent{background:#e0565b}.notif-popover{z-index:20;background:#fff;border:1px solid #eceef5;border-radius:12px;width:min(320px,80vw);padding:12px;position:absolute;top:44px;right:0;box-shadow:0 12px 24px #1a1e2a1f}@media (width<=600px){.notif-popover{width:auto;max-height:calc(100vh - 90px);position:fixed;top:70px;left:12px;right:12px;overflow-y:auto}}.notif-header{justify-content:space-between;align-items:center;margin-bottom:10px;display:flex}.notif-header-actions{align-items:center;gap:8px;display:inline-flex}.notif-close{color:#5a6072;cursor:pointer;background:#fff;border:1px solid #e1e4ee;border-radius:8px;justify-content:center;align-items:center;width:28px;height:28px;display:inline-flex}.notif-filters{flex-wrap:wrap;gap:6px;margin-bottom:10px;display:flex}.notif-filter{color:#5a6072;cursor:pointer;background:#fff;border:1px solid #dde1ea;border-radius:999px;padding:4px 10px;font-size:12px}.notif-filter.active{color:#fff;background:#5a52ea;border-color:#5a52ea}.notif-urgent{color:#e0565b;font-size:12px;font-weight:600}.notif-list{flex-direction:column;gap:8px;display:flex}.notif-item{text-align:left;cursor:pointer;background:#f9fafc;border:1px solid #eef1f7;border-radius:10px;justify-content:space-between;gap:12px;padding:10px;display:flex}.notif-item p{color:#6f7689;margin:4px 0 0;font-size:12px}.notif-empty{color:#7f879b;margin:0;font-size:13px}.urgency-badge{text-transform:uppercase;letter-spacing:.4px;color:#6f7689;background:#e6e8ed;border-radius:999px;justify-content:center;align-items:center;padding:4px 10px;font-size:11px;font-weight:600;display:inline-flex}.urgency-badge.critical{color:#d94146;background:#ffe3e5}.urgency-badge.high{color:#f28d33;background:#ffe8d2}.urgency-badge.medium{color:#4e59d8;background:#e0e5ff}.urgency-badge.low{color:#7a8197;background:#e6e8ed}.user-box{align-items:center;gap:10px;display:flex}.avatar{background:#d8d9de;border-radius:50%;place-items:center;width:38px;height:38px;font-weight:600;display:grid}.user-box p{color:#858ca0;font-size:12px}.page-content{min-width:0;max-width:100%;padding:22px 18px;overflow-x:hidden}.page-grid{flex-direction:column;gap:14px;display:flex}.page-title-wrap{flex-direction:column;gap:6px;display:flex}.page-title-wrap h1{font-size:34px;font-weight:700}.page-title-wrap p,.subtitle{color:#7f879b}.row-between{flex-direction:row;justify-content:space-between;align-items:center}.row-end{align-items:center;gap:10px;display:flex}.card{background:#fff;border:1px solid #eceef5;border-radius:12px;min-width:0;padding:16px;box-shadow:0 6px 18px #1a1e2a0d}.card-header{justify-content:space-between;align-items:center;margin-bottom:12px;display:flex}.card h3{font-size:23px}.primary-btn,.ghost-btn,.outline-btn{color:#4d5366;cursor:pointer;background:#fff;border:1px solid #d8deea;border-radius:8px;justify-content:center;align-items:center;gap:7px;min-height:38px;padding:10px 14px;transition:all .2s;display:inline-flex}.primary-btn{color:#fff;background:#5a52ea;border-color:#5a52ea}.outline-btn{color:#6e63df;border-color:#8d83f2}.outline-btn.danger{color:#e0565b;border-color:#f4c1c3}.primary-btn:disabled{opacity:.65;cursor:not-allowed}.dashboard-grid{grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:18px;min-width:0;display:grid}.dashboard-grid>*{min-width:0}.chart-wrap{width:100%;height:280px}.pie-row{flex-wrap:wrap;justify-content:center;gap:10px;display:flex}.pie-item{text-align:center}.pie-item p{color:#70768a;font-size:13px}.status-bars{flex-direction:column;gap:12px;display:flex}.status-row{justify-content:space-between;margin-bottom:6px;display:flex}.progress{background:#edf0f5;border-radius:999px;height:8px;overflow:hidden}.progress span{height:100%;display:block}.simple-table{flex-direction:column;gap:8px;min-width:0;display:flex}.simple-table .thead,.simple-table .trow{grid-template-columns:1.2fr .8fr 1fr auto;align-items:center;gap:8px;min-width:0;padding:6px 0;display:grid}.simple-table .thead span,.simple-table .trow span{overflow-wrap:anywhere;min-width:0}.simple-table .thead{color:#7a8197;font-size:13px}.table-scroll{width:100%;max-width:100%;overflow:auto hidden}.stack-table{min-width:0}table{border-collapse:collapse;width:100%;min-width:760px}th,td{text-align:left;border-bottom:1px solid #edf0f5;padding:11px 9px}th{color:#7d8498;font-size:13px}td a{color:#24263b;font-weight:600;text-decoration:none}.action-row{gap:8px;display:flex}.pill{border-radius:999px;padding:6px 10px;font-size:12px;font-weight:600;display:inline-flex}.pill.success{color:#16b67c;background:#d7f9ec}.pill.warning{color:#f28d33;background:#ffe8d2}.pill.muted{color:#7a8197;background:#e6e8ed}.pill.info{color:#4e59d8;background:#e0e5ff}.form-grid{grid-template-columns:1fr;gap:8px;display:grid}.form-grid input,.form-grid select{border:1px solid #d8deea;border-radius:8px;outline:none;padding:10px}.divider{background:#edf0f5;height:1px;margin:6px 0 2px}.allocation-row{grid-template-columns:1fr 120px auto;align-items:center;gap:8px;display:grid}.allocation-summary{margin-top:6px}.full{width:100%}.modal-backdrop{background:#1a203159;place-items:center;padding:14px;display:grid;position:fixed;inset:0}.modal-card{background:#fff;border-radius:12px;width:min(520px,100%);padding:14px}.modal-header{justify-content:space-between;align-items:center;margin-bottom:12px;display:flex}.error-box{color:#cd4047;background:#fff0f1;border:1px solid #f5c5c8;border-radius:10px;padding:12px}.auth-page{place-items:center;min-height:100vh;padding:16px;display:grid}.auth-card{background:#fff;border:1px solid #eceef5;border-radius:16px;flex-direction:column;gap:10px;width:min(420px,100%);padding:24px;display:flex}.auth-brand{margin-bottom:10px}.auth-card input,.auth-card select{border:1px solid #d8deea;border-radius:10px;padding:10px}.detail-grid{grid-template-columns:1fr;gap:12px;display:grid}@media (width<=900px){.app-shell{grid-template-columns:1fr}.sidebar{z-index:9;border-right:1px solid #eceef5;width:min(260px,84vw);padding:18px 16px;transition:transform .25s;position:fixed;top:0;bottom:0;left:0;transform:translate(-100%)}.sidebar.open{transform:translate(0)}.side-nav{flex-direction:column;gap:8px}.side-link,.logout-link{padding:10px}.topbar{flex-wrap:wrap;justify-content:flex-start;gap:12px;height:auto;padding:12px 16px}.menu-toggle{display:inline-flex}.search-wrap{flex:220px;width:100%}.row-between{flex-direction:column;align-items:flex-start;gap:10px}.row-end{flex-wrap:wrap;justify-content:flex-start}.dashboard-grid,.reports-layout.with-filter{grid-template-columns:1fr}}@media (width<=600px){.page-content{padding:16px 12px}.page-title-wrap h1{font-size:26px}.card h3{font-size:20px}.simple-table .thead,.simple-table .trow{grid-template-columns:1fr;gap:6px}.simple-table .thead,.stack-table thead{display:none}.stack-table{table-layout:fixed;width:100%;min-width:0}.stack-table tbody tr{border-bottom:1px solid #edf0f5;grid-template-columns:1fr;gap:8px;padding:12px 0;display:grid}.stack-table td{text-align:right;flex-wrap:wrap;justify-content:space-between;gap:12px;min-width:0;display:flex}.stack-table td:before{content:attr(data-label);color:#6c7387;text-align:left;font-weight:600}.stack-table .action-row{flex-wrap:wrap;justify-content:flex-end}.stack-table .empty-row{display:block}.stack-table .empty-row td{text-align:center;justify-content:center}.stack-table .empty-row td:before{content:""}.table-scroll:has(.stack-table){overflow-x:hidden}}.summary-list{flex-direction:column;gap:12px;display:flex}.summary-list>div{justify-content:space-between;align-items:center;gap:12px;display:flex}.summary-list span{color:#7d8597}.summary-list input,.summary-list select{border:1px solid #d8deea;border-radius:8px;padding:8px}.reports-layout{grid-template-columns:1fr;gap:12px;display:grid}.reports-layout.with-filter{grid-template-columns:1fr 260px}.filter-panel{align-self:start}.check-grid{gap:8px;margin-bottom:12px;display:grid}.check-item{align-items:center;gap:8px;display:flex}.order-form-layout{grid-template-columns:1fr 260px;gap:12px;display:grid}.helper-card{align-self:start}@media (width<=1200px){.dashboard-grid,.detail-grid,.reports-layout.with-filter,.order-form-layout{grid-template-columns:1fr}}@media (width<=920px){.app-shell{grid-template-columns:1fr}.sidebar{border-bottom:none;border-right:1px solid #eceef5}.row-between{flex-direction:column;align-items:flex-start;gap:10px}}