@import url("./features/users.css");
@import url("./features/orders.css");
@import url("./features/items.css");

:root{
  --bg0:#070A12;
  --bg1:#0B1020;
  --panel:#0F1833;
  --panel2:#0E1630;
  --line:rgba(255,255,255,.10);
  --line2:rgba(255,255,255,.16);
  --text:rgba(255,255,255,.92);
  --muted:rgba(255,255,255,.68);
  --primary:#4A6A39;
  --primary2:rgba(74,106,57,.18);
  --ok:#35D07F;
  --bad:#FF4D4D;
  --shadow:0 16px 40px rgba(0,0,0,.35);
  --radius:18px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial;color:var(--text)}
body.app-bg{background:radial-gradient(900px 640px at 10% 12%, rgba(74,106,57,.22) 0%, transparent 55%),radial-gradient(760px 560px at 82% 24%, rgba(43,104,88,.10) 0%, transparent 48%),radial-gradient(1000px 780px at 90% 70%, rgba(20,34,78,.30) 0%, transparent 52%),linear-gradient(180deg, #04070c, #02050a 72%, #010307)}
button,input,select,textarea{font:inherit}
.layout{min-height:100vh;padding-left:290px}
.sidebar{position:fixed;left:0;top:0;bottom:0;width:290px;padding:18px 14px;border-right:1px solid var(--line);background:linear-gradient(180deg, rgba(8,12,22,.96), rgba(5,8,16,.98));display:flex;flex-direction:column;gap:14px;z-index:50}
.brandPanel,.panelCard,.card,.auth-card,.navGroup,.confirmCard,.userCard,.treeSection,.subPanel,.emptyInline{background:linear-gradient(180deg, rgba(15,24,51,.95), rgba(11,18,37,.94));border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.brandPanel{padding:16px}
.sideBrand,.brand{display:flex;gap:12px;align-items:center}
.brandLogo{width:58px;height:58px;border-radius:16px;object-fit:cover;border:1px solid var(--line)}
.brandTitle{font-weight:900;font-size:18px;line-height:1.12}
.brandSub{font-size:13px;color:var(--muted);margin-top:4px}
.sideMenu{display:flex;flex-direction:column;gap:12px;overflow:auto;padding-right:4px;min-height:0;flex:1}
.navGroup{overflow:hidden}
.navGroupBtn{width:100%;padding:16px 18px;border:none;background:transparent;color:var(--text);display:flex;align-items:center;justify-content:space-between;font-weight:900;cursor:pointer}
.navGroupMain{display:flex;align-items:center;gap:12px}
.navIcon{width:22px;height:22px;display:inline-flex;color:#dfe7ff}
.navIcon svg{width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.navArrow{transition:transform .2s ease}
.navChildren{display:grid;grid-template-rows:0fr;transition:grid-template-rows .24s ease}
.navChildrenInner{overflow:hidden;padding:0 10px 10px}
.navGroup.open .navChildren{grid-template-rows:1fr}.navGroup.open .navArrow{transform:rotate(180deg)}
.navBtn{width:100%;padding:14px 16px;border:none;background:transparent;text-align:left;color:var(--text);border-radius:16px;font-weight:800;cursor:pointer;transition:background .16s ease,transform .16s ease}
.navBtn:hover{background:rgba(255,255,255,.05);transform:translateX(2px)}
.navBtn.active{background:linear-gradient(90deg, rgba(74,106,57,.24), rgba(74,106,57,.10))}
.logoutBtn{margin-top:auto;position:sticky;bottom:0;background:rgba(255,255,255,.04)}
.main{min-width:0;display:flex;flex-direction:column;min-height:100vh}
.topbar{padding:22px 28px;border-bottom:1px solid var(--line);background:rgba(9,12,20,.35);backdrop-filter:blur(8px)}
.topbarInner{display:flex;align-items:flex-start;gap:12px}.mobileMenuBtn{display:none}.sidebarBackdrop{display:none}.sidebarMobileHead{display:none}.scanReader{width:100%;height:100%;min-height:320px;border-radius:24px;overflow:hidden}.scanReader.hidden,.hidden{display:none!important}

.pageTitle{font-size:30px;font-weight:900;letter-spacing:-.02em}.subTitle,.muted,.hint{color:var(--muted)}
.content{padding:28px;flex:1;overflow-y:auto;overflow-x:hidden}.pageSection{width:100%;max-width:none;margin:0}.pageStack{display:flex;flex-direction:column;gap:20px}
.pageHero{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;padding:2px 2px 0}.pageHero h1{margin:4px 0 8px;font-size:28px;letter-spacing:-.03em}.pageHero p{margin:0;max-width:840px;color:var(--muted)}
.eyebrow{text-transform:uppercase;letter-spacing:.18em;font-size:12px;color:#d3dfcc;font-weight:800;margin:0}
.panelCard{padding:22px;overflow:hidden}.panelHead{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:16px}.cardTitle{font-size:24px;font-weight:900}.sectionMiniTitle{font-size:13px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:#dfe9d6;margin-bottom:10px}
.stackForm,.formShell{display:flex;flex-direction:column;gap:14px}.formGrid{display:grid;gap:14px}.twoCols{grid-template-columns:repeat(2,minmax(0,1fr))}.threeCols{grid-template-columns:repeat(3,minmax(0,1fr))}.field{display:flex;flex-direction:column;gap:8px}.fieldSpan2{grid-column:span 2}.fieldSpan3{grid-column:span 3}
label{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:rgba(235,241,255,.84)}
input,select,textarea{width:100%;min-height:54px;padding:13px 16px;border-radius:18px;border:1px solid rgba(120,140,180,.20);background:linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.012)),rgba(2,6,14,.78);color:var(--text);outline:none;transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease;background-repeat:no-repeat;background-position:right 16px center;color-scheme:dark}
input:focus,select:focus,textarea:focus{border-color:rgba(92,146,255,.58);box-shadow:0 0 0 4px rgba(92,146,255,.12)}
textarea{min-height:120px;resize:vertical}.btn{padding:12px 16px;border-radius:14px;border:1px solid var(--line);background:rgba(255,255,255,.08);color:var(--text);cursor:pointer;font-weight:800}.btn.primary{background:var(--primary);border-color:rgba(74,106,57,.55);color:#fff}.btn.ghost{background:rgba(255,255,255,.04)}.smallBtn{padding:8px 11px;border-radius:12px;font-size:12px}.fullWidth{width:100%}.dangerBtn{background:rgba(255,77,77,.12);color:#ffd8d8;border-color:rgba(255,77,77,.18)}.dangerBtnSolid{background:#A63636;border:none;color:white}
.divider{height:1px;background:var(--line);margin:6px 0}.row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.splitLayout{display:grid;grid-template-columns:1fr 1fr;gap:20px}.wideSingle{grid-template-columns:minmax(0,1fr)}.orderCreateLayout{grid-template-columns:minmax(0,1fr);align-items:start}.itemsCreateLayout{grid-template-columns:minmax(0,1fr)}.modernTableWrap{border:1px solid var(--line2);border-radius:18px;overflow:auto;background:rgba(255,255,255,.02)}
.table{width:100%;border-collapse:collapse}.table th,.table td{padding:16px 14px;border-bottom:1px solid rgba(255,255,255,.08);text-align:left;vertical-align:middle}.table th{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:#cfd8ea}.modernTable tbody tr{transition:background .16s ease}.modernTable tbody tr:hover{background:rgba(255,255,255,.03)}.clickRow{cursor:pointer}
.userCards{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}.userCard{padding:18px;cursor:pointer;transition:transform .16s ease,border-color .16s ease}.userCard:hover{transform:translateY(-2px);border-color:rgba(74,106,57,.38)}.userCardTop{display:flex;justify-content:space-between;gap:12px;margin-bottom:14px}.userAvatar{width:48px;height:48px;border-radius:16px;display:grid;place-items:center;background:rgba(74,106,57,.20);font-weight:900;font-size:18px}.userMetaTitle{font-size:20px;font-weight:900}.userMetaSub{color:var(--muted);margin-top:4px}.userCardGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.miniInfo{padding:12px;border-radius:14px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06)}.miniInfoLabel{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:6px}.miniInfoValue{font-weight:800}
.statusPill,.countPill{display:inline-flex;align-items:center;justify-content:center;padding:7px 12px;border-radius:999px;font-size:12px;font-weight:900}.statusPill.active{background:rgba(53,208,127,.12);color:#dbffe9}.statusPill.inactive{background:rgba(255,77,77,.12);color:#ffd7d7}
.lookupCard{padding:16px;border-radius:16px;border:1px solid var(--line2);background:rgba(255,255,255,.05)}.lookupGrid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.lookupLabel{display:block;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#cfdbff;margin-bottom:10px}.lookupCard strong{font-size:22px;line-height:1.1}
.itemsTreeList{display:flex;flex-direction:column;gap:16px}.treeSection{padding:16px}.treeHead{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:14px}.treeTitle{font-size:22px;font-weight:900}.subPanel{padding:14px}.subPanel+.subPanel{margin-top:12px}.subPanelHead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}.subPanelBody{display:grid;gap:10px}.leafGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}.leafCard{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px;border-radius:16px;background:rgba(5,10,19,.78);border:1px solid rgba(255,255,255,.06)}.emptyInline{padding:14px;border-style:dashed;color:var(--muted)}
.filterToolbar{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-bottom:14px}.filterToolbar input,.filterToolbar select{min-height:44px;padding:10px 12px;border-radius:14px}.confirmOverlay{position:fixed;inset:0;background:rgba(0,0,0,.52);backdrop-filter:blur(6px);display:none;align-items:center;justify-content:center;z-index:1000;padding:20px}.confirmOverlay.show{display:flex}.confirmCard{width:min(420px,100%);padding:22px}.confirmActions{display:flex;justify-content:flex-end;gap:10px;margin-top:18px}.formMessage{color:#dff3d0;font-weight:700}.backRow{display:flex;gap:10px;align-items:center}.backBtn{display:inline-flex;align-items:center;gap:8px}.emptyState{display:grid;place-items:center;min-height:220px;color:var(--muted)}
.auth-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:22px}.auth-card{width:420px;padding:18px}.auth-bg{background:radial-gradient(800px 500px at 18% 12%, rgba(74,106,57,.65) 0%, transparent 62%),radial-gradient(900px 600px at 88% 38%, rgba(20,30,60,.85) 0%, transparent 58%),linear-gradient(180deg, var(--bg1), var(--bg0))}
@media (max-width:1280px){.orderCreateLayout,.itemsCreateLayout,.splitLayout{grid-template-columns:1fr}.layout{grid-template-columns:260px 1fr}}
@media (max-width:920px){.layout{grid-template-columns:1fr}.sidebar{border-right:1px solid var(--line);border-bottom:none}.filterToolbar,.twoCols,.threeCols,.lookupGrid,.userCardGrid{grid-template-columns:1fr}.content{padding:18px}.topbar{padding:18px}}

@media (max-width: 980px){.layout{padding-left:0}.mobileMenuBtn{display:inline-flex}.topbar{padding:16px 18px}.topbarInner{align-items:center}.sidebarBackdrop{display:block;position:fixed;inset:0;background:rgba(0,0,0,.5);opacity:0;pointer-events:none;transition:opacity .2s ease;z-index:65}.sidebarBackdrop.show{opacity:1;pointer-events:auto}.sidebar{left:-310px;transition:left .22s ease;width:290px;z-index:70}.sidebar.mobileOpen{left:0}.sidebarMobileHead{display:flex;justify-content:flex-end;padding:0 0 6px}.sidebarCloseBtn{padding:10px 12px}.main{min-height:auto}}

select{appearance:none;-webkit-appearance:none;-moz-appearance:none;padding-right:46px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23dfe7ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-size:18px;background-repeat:no-repeat;background-position:right 16px center}
.sidebar{overflow:hidden}.sideMenu{padding-bottom:14px}.content{min-height:100vh}
.itemModalOverlay{position:fixed;inset:0;background:rgba(2,5,10,.6);backdrop-filter:blur(6px);display:none;align-items:center;justify-content:center;z-index:1200;padding:20px}.itemModalOverlay.show{display:flex}.itemModalCard{width:min(720px,100%);padding:24px;border-radius:24px;background:linear-gradient(180deg, rgba(15,24,51,.98), rgba(11,18,37,.98));border:1px solid rgba(255,255,255,.08);box-shadow:var(--shadow)}.itemModalHead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.hiddenBySearch{display:none !important}

html{scrollbar-color:var(--primary) #07101a;scrollbar-width:thin}
body::-webkit-scrollbar,.content::-webkit-scrollbar,.sideMenu::-webkit-scrollbar{width:12px;height:12px}
body::-webkit-scrollbar-track,.content::-webkit-scrollbar-track,.sideMenu::-webkit-scrollbar-track{background:#07101a}
body::-webkit-scrollbar-thumb,.content::-webkit-scrollbar-thumb,.sideMenu::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#6f9d58,#4A6A39);border-radius:999px;border:2px solid #07101a}
.clickRow{cursor:pointer}
.clickRow:hover td{background:rgba(74,106,57,.10)}
select{border-color:rgba(130,150,190,.24);box-shadow:inset 0 1px 0 rgba(255,255,255,.04);background-image:linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.012)), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2399b58a' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-size:auto,18px;background-position:left top,right 16px center}
.orderDetailShell{display:flex;flex-direction:column;gap:18px}.orderDetailTopBar{display:flex;justify-content:flex-end}.detailBadges{display:flex;gap:8px;flex-wrap:wrap}.detailPanel{padding:0}.orderDetailGrid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.orderInfoGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.orderInfoGrid.threeCols{grid-template-columns:repeat(3,minmax(0,1fr))}.infoTile{padding:16px;border:1px solid rgba(255,255,255,.08);border-radius:18px;background:rgba(255,255,255,.03);display:flex;flex-direction:column;gap:10px}.infoTile.full{grid-column:1/-1}.infoTile span{font-size:12px;color:var(--muted)}.infoTile strong{font-size:20px;line-height:1.15}.remarkPanel{padding:18px;border:1px solid rgba(255,255,255,.08);border-radius:18px;background:rgba(255,255,255,.03)}.linkItem{text-decoration:none;color:var(--text)}.projectRollupTable td,.projectRollupTable th{text-align:left}
@media (max-width:1100px){.orderDetailGrid,.orderInfoGrid,.orderInfoGrid.threeCols{grid-template-columns:1fr}}

.unitGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px;margin-top:14px}
.unitCard{padding:14px;border:1px solid rgba(255,255,255,.08);border-radius:18px;background:rgba(255,255,255,.03);display:flex;justify-content:space-between;gap:12px;align-items:center}
.scanShell,.scanResultCard{max-width:760px;margin:0 auto;width:100%}
.scanTop{display:flex;gap:10px;justify-content:flex-end;margin-bottom:12px}
.scanViewport{position:relative;min-height:280px;border:1px solid rgba(255,255,255,.08);border-radius:24px;background:rgba(3,7,16,.85);overflow:hidden;display:grid;place-items:center}
.scanViewport video{width:100%;height:100%;object-fit:cover;display:block}
.scanTarget{position:absolute;width:56vw;max-width:230px;aspect-ratio:1;border:3px solid rgba(111,157,88,.8);border-radius:24px;box-shadow:0 0 0 9999px rgba(0,0,0,.28);z-index:2;pointer-events:none}
.scanPlaceholder{position:absolute;inset:0;display:grid;place-items:center;color:var(--muted);padding:20px;text-align:center}
.scanLookupRow{display:grid;grid-template-columns:1fr auto;gap:12px;margin-top:14px}.scanLookupRow .autoField{min-width:140px}.scanLookupRow .grow{min-width:0}
.scanInfoGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:14px 0}.scanResultHead{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;margin-bottom:14px}
.scanLogs{display:flex;flex-direction:column;gap:10px}.scanLogRow{display:flex;justify-content:space-between;gap:12px;padding:12px 14px;border-radius:14px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06)}
@media (max-width:700px){.scanLookupRow,.scanInfoGrid{grid-template-columns:1fr}.scanTop{justify-content:stretch}.scanTop .btn{flex:1}.unitCard,.scanResultHead,.scanLogRow{flex-direction:column;align-items:flex-start}}

.fieldError{margin-top:8px;color:#ff7d7d;font-size:13px;font-weight:700}
.fieldError.hidden{display:none}
.field input.inputError,.field select.inputError{border-color:#c74b4b;box-shadow:0 0 0 1px rgba(199,75,75,.35)}