/* AXION Industrial Marking — app styles */
:root{
  --bg:#F4F5FB;--white:#fff;--ink:#141627;--muted:#667085;--line:#E3E5F0;--soft:#F7F7FC;
  --indigo:#4F46E5;--violet:#7C3AED;--navy:#1E1B4B;--orange:#F58220;--orange-soft:#FFF1E3;
  --grad:linear-gradient(135deg,#4F46E5 0%,#7C3AED 100%);
  --grad-dark:linear-gradient(165deg,#100D2B 0%,#1E1B4B 48%,#36196F 100%);
  --red:#D92D20;--red-soft:#FFF0F0;--amber:#B45309;--amber-soft:#FFF6E3;--ok:#127A55;--ok-soft:#E9F7F1;
  --shadow:0 1px 2px #1e1b4b0a,0 10px 30px #1e1b4b10;--r:14px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font:14px/1.5 Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;color:var(--ink);background:var(--bg)}
a{color:inherit;text-decoration:none}
h1,h2,h3,p{margin:0}
button,input,select,textarea{font:inherit}
.ic{width:18px;height:18px;flex:none}.ic.sm{width:15px;height:15px}.ic.lg{width:24px;height:24px}
.num{font-variant-numeric:tabular-nums;white-space:nowrap}
.muted{color:var(--muted)}.small{font-size:12px}
.micro{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:750;color:#6D4AED}
.right{text-align:right}.center{text-align:center}
.neg{color:var(--red)}.pos{color:var(--ok)}

/* ---------- Shell ---------- */
.shell{min-height:100vh;display:grid;grid-template-columns:236px minmax(0,1fr);background:radial-gradient(1100px 420px at 85% -12%,#E9E5FF 0%,transparent 62%),radial-gradient(800px 380px at -10% 110%,#FFF0E0 0%,transparent 60%),var(--bg)}
.rail{position:sticky;top:0;height:100vh;align-self:start;display:flex;flex-direction:column;gap:18px;background:var(--grad-dark);color:#fff;padding:18px 14px;box-shadow:4px 0 30px #1e1b4b22;overflow-y:auto}
.brand{display:flex;align-items:center;gap:11px;padding:2px 6px 16px;border-bottom:1px solid #ffffff22}
.brand img{width:46px;height:46px;border-radius:12px;background:#fff;padding:5px;object-fit:contain}
.brand b{display:block;font-size:19px;letter-spacing:.14em;line-height:1.1}
.brand small{display:block;font-size:9.5px;letter-spacing:.14em;color:#FBC48F;font-weight:700}
.nav{display:grid;gap:4px}
.nav a{position:relative;display:flex;align-items:center;gap:11px;min-height:42px;padding:8px 11px;border-radius:10px;color:#E6E8FF;font-weight:600;font-size:13.5px;border:1px solid transparent}
.nav a:hover{background:#ffffff12;border-color:#ffffff1a}
.nav a.on{background:var(--grad);border-color:#ffffff30;box-shadow:0 6px 18px #4f46e555;color:#fff}
.nav a.on::before{content:'';position:absolute;left:-14px;top:9px;bottom:9px;width:4px;border-radius:0 4px 4px 0;background:var(--orange)}
.nav .count{margin-left:auto;background:var(--orange);color:#fff;border-radius:20px;font-size:10.5px;font-weight:800;padding:1px 7px}
.rail-foot{margin-top:auto;border-top:1px solid #ffffff22;padding:14px 6px 0;font-size:11.5px;color:#C9CEFF}
.rail-foot strong{display:block;color:#fff;font-size:12.5px}
.main{min-width:0;display:flex;flex-direction:column}
.topbar{position:sticky;top:0;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:12px;height:62px;padding:0 28px;background:#ffffffdb;backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.crumb{font-size:13px;color:var(--muted)}.crumb b{color:var(--ink)}
.top-actions{display:flex;align-items:center;gap:8px}
.userchip{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:650}
.avatar{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--grad);color:#fff;font-weight:750;font-size:13px}
.content{padding:26px 28px 40px;display:grid;gap:18px;min-width:0;animation:rise .18s ease-out}
@keyframes rise{from{opacity:.4;transform:translateY(4px)}to{opacity:1;transform:none}}
.foot{padding:0 28px 22px;font-size:11px;color:var(--muted)}

/* ---------- Heading ---------- */
.heading{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;flex-wrap:wrap}
.heading h1{font-size:clamp(25px,2.6vw,34px);line-height:1.12;font-weight:780;background:linear-gradient(120deg,#1E1B4B 10%,#5B3FD9 90%);-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:2px}
.heading p.sub{color:var(--muted);margin-top:4px;max-width:720px}
.actions{display:flex;gap:8px;flex-wrap:wrap}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:38px;padding:8px 14px;border-radius:10px;border:1px solid var(--line);background:#fff;color:var(--navy);font-size:13px;font-weight:700;cursor:pointer;white-space:nowrap;transition:.15s}
.btn:hover{border-color:#C7CBEA;background:#FAFAFF}
.btn.primary{background:var(--grad);color:#fff;border-color:transparent;box-shadow:0 4px 14px #6d4aed45}
.btn.primary:hover{background:linear-gradient(135deg,#4338CA,#6D28D9)}
.btn.orange{background:var(--orange);color:#fff;border-color:transparent;box-shadow:0 4px 14px #f5822045}
.btn.orange:hover{background:#E06F10}
.btn.ghost{background:transparent;border-color:transparent;color:var(--indigo)}
.btn.ghost:hover{background:#EEF0FF}
.btn.danger{color:var(--red);border-color:#F5C2C0}
.btn.danger:hover{background:var(--red-soft)}
.btn.sm{min-height:31px;padding:5px 10px;font-size:12px;border-radius:8px}
.btn:disabled{opacity:.55;cursor:not-allowed}
form.inline{display:inline}

/* ---------- Cards ---------- */
.card{background:#fff;border:1px solid #E6E7F2;border-radius:16px;box-shadow:var(--shadow);min-width:0}
.card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:16px 18px 12px}
.card-top h2{font-size:16px;font-weight:750}
.card-top p{font-size:12.5px;color:var(--muted)}
.card-body{padding:4px 18px 18px}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.split{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:16px;align-items:start}

/* ---------- Metrics ---------- */
.metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.metrics.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.metric{position:relative;overflow:hidden;display:flex;gap:12px;align-items:flex-start;padding:16px;color:inherit}
a.metric:hover{border-color:#C9CDF0}
.metric::after{content:'';position:absolute;right:-34px;top:-34px;width:100px;height:100px;border-radius:50%;background:radial-gradient(circle,#7c3aed17,transparent 70%)}
.metric .tile{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;flex:none}
.metric p{font-size:12px;color:var(--muted);font-weight:600}
.metric strong{display:block;font-size:24px;font-weight:780;line-height:1.2;margin:2px 0}
.metric small{font-size:11.5px;color:var(--muted)}
.t1{background:var(--grad);color:#fff}.t2{background:var(--orange-soft);color:#C2570C;border:1px solid #FDD8B5}.t3{background:#FFE9EE;color:#BE123C;border:1px solid #FECDD6}.t4{background:#E3F3FF;color:#0369A1;border:1px solid #BAE3FD}.t5{background:#EEF0FF;color:var(--indigo);border:1px solid #DDE0FF}

/* Hero */
.hero{position:relative;overflow:hidden;border-radius:18px;padding:22px 24px;color:#fff;background:linear-gradient(135deg,#17134A 0%,#3730A3 55%,#7C3AED 100%);box-shadow:0 18px 40px #3b1c7a40;display:flex;justify-content:space-between;gap:18px;align-items:center;flex-wrap:wrap}
.hero::after{content:'';position:absolute;right:-70px;top:-90px;width:300px;height:300px;border-radius:50%;background:radial-gradient(circle,#F5822044,transparent 65%)}
.hero h2{font-size:20px;font-weight:760}.hero p{color:#D4D8FF;font-size:13px;margin-top:3px}
.hero .micro{color:#FDBA74}
.quick{display:flex;gap:9px;flex-wrap:wrap;position:relative;z-index:1}
.quick a{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:12px;background:#ffffff14;border:1px solid #ffffff2e;font-weight:650;font-size:13px;backdrop-filter:blur(4px)}
.quick a:hover{background:#ffffff26}
.quick a.hot{background:var(--orange);border-color:var(--orange)}

/* ---------- Lists ---------- */
.list{display:grid}
.row{display:flex;align-items:center;gap:12px;padding:11px 18px;border-top:1px solid #EEF0F6}
.row:hover{background:#FAFAFF}
.row .tile{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;flex:none;background:#EEF0FF;color:var(--indigo)}
.row .grow{flex:1;min-width:0}
.row .grow strong{display:block;font-size:13.5px;font-weight:680;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row .grow small{display:block;color:var(--muted);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.empty{padding:26px 18px;text-align:center;color:var(--muted);font-size:13px}

/* ---------- Tables ---------- */
.tools{display:flex;gap:8px;flex-wrap:wrap;align-items:center;padding:12px 18px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#FBFBFF}
.tools .search{flex:1;min-width:180px;max-width:340px;position:relative}
.tools .search .ic{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--muted)}
.tools .search input{padding-left:34px;width:100%}
.table-wrap{overflow-x:auto}
table.t{width:100%;border-collapse:collapse;font-size:13px}
table.t th{text-align:left;font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:#5B6478;font-weight:750;background:#F7F7FC;padding:10px 14px;white-space:nowrap}
table.t td{padding:11px 14px;border-top:1px solid #EEF0F6;vertical-align:middle}
table.t tbody tr:hover{background:#FAF9FF}
table.t td strong{font-weight:680}
table.t td small{display:block;color:var(--muted);font-size:11.5px}
table.t tfoot td{background:#F2F1FF;font-weight:750;border-top:2px solid #DCDDF5}
table.t .r{text-align:right}
tr.link{cursor:pointer}

/* ---------- Badges / status ---------- */
.badge{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:720;border-radius:20px;padding:3px 9px;border:1px solid var(--line);background:var(--soft);color:#475467;white-space:nowrap}
.badge.gst{background:#EEF0FF;color:#4338CA;border-color:#D9DCFF}
.badge.local{background:var(--orange-soft);color:#C2570C;border-color:#FDD8B5}
.badge.urgent{background:var(--red-soft);color:var(--red);border-color:#F9C9C6}
.badge.ok{background:var(--ok-soft);color:var(--ok);border-color:#C6E8D9}
.badge.amber{background:var(--amber-soft);color:var(--amber);border-color:#FDE4A8}
.badge.blue{background:#EEF0FF;color:#4338CA;border-color:#D9DCFF}
.status{width:auto;flex:none;appearance:none;-webkit-appearance:none;font-size:12px;font-weight:750;border-radius:20px;min-height:30px;padding:4px 28px 4px 12px;cursor:pointer;border:1px solid;background-repeat:no-repeat;background-position:right 10px center;background-size:9px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23475569' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E")}
.status[data-tone=amber]{background-color:var(--amber-soft);color:var(--amber);border-color:#FDE4A8}
.status[data-tone=blue]{background-color:#EEF0FF;color:#4338CA;border-color:#D9DCFF}
.status[data-tone=ok]{background-color:var(--ok-soft);color:var(--ok);border-color:#C6E8D9}
.status:disabled{opacity:.85;cursor:default}
.overdue{color:var(--red);font-weight:700}

/* ---------- Forms ---------- */
input,select,textarea{width:100%;color:var(--ink);background:#fff;border:1px solid #CDD3E6;border-radius:10px;padding:9px 11px;min-height:40px;font-size:14px;outline:none;transition:.12s}
input:focus,select:focus,textarea:focus{border-color:var(--indigo);box-shadow:0 0 0 3px #4f46e522}
textarea{min-height:84px;resize:vertical}
.tools input,.tools select{width:auto;min-height:36px;font-size:13px}
label.f{display:grid;gap:6px;font-size:12.5px;font-weight:680;color:#344054}
label.f .hint{font-weight:500;color:var(--muted);font-size:11.5px}
.form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.form .full{grid-column:1/-1}
.form-actions{display:flex;justify-content:flex-end;gap:8px;padding:14px 18px;border-top:1px solid var(--line);background:#FBFBFF;border-radius:0 0 16px 16px}
.check{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600}
.check input{width:18px;height:18px;min-height:0}
.seg{display:inline-flex;background:#EEF0FA;border-radius:12px;padding:4px;gap:4px}
.seg label{position:relative}
.seg input{position:absolute;opacity:0;pointer-events:none}
.seg span{display:block;padding:9px 18px;border-radius:9px;font-weight:700;font-size:13px;color:#475467;cursor:pointer}
.seg input:checked+span{background:#fff;color:var(--indigo);box-shadow:0 2px 8px #1e1b4b1a}

/* Line editor */
.lines{width:100%;border-collapse:collapse}
.lines th{font-size:10.5px;text-transform:uppercase;letter-spacing:.07em;color:#5B6478;text-align:left;padding:8px 6px;background:#F7F7FC}
.lines td{padding:6px;vertical-align:top;border-top:1px solid #EEF0F6}
.lines td.amt{text-align:right;font-weight:700;padding-top:15px;white-space:nowrap}
.lines .x{border:0;background:none;color:var(--muted);cursor:pointer;padding:10px 6px}
.lines .x:hover{color:var(--red)}
.totals{margin-left:auto;width:min(100%,340px);display:grid;gap:2px;padding:12px 0}
.totals div{display:flex;justify-content:space-between;padding:7px 4px;font-size:13.5px}
.totals .grand{border-top:2px solid var(--ink);font-size:16px;font-weight:800;margin-top:4px;padding-top:10px}
.stockhint{font-size:11px;color:var(--muted);margin-top:3px}
.stockhint.low{color:var(--red);font-weight:650}

/* ---------- Tabs ---------- */
.tabs{display:flex;gap:6px;flex-wrap:wrap;padding:0 18px;border-bottom:1px solid var(--line)}
.tabs a{padding:11px 12px;font-size:13px;font-weight:680;color:#52617a;border-bottom:2px solid transparent;margin-bottom:-1px}
.tabs a.on{color:var(--indigo);border-color:var(--indigo)}

/* ---------- Defs / timeline ---------- */
.defs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;margin:0}
.defs div{padding:11px 18px;border-top:1px solid #EEF0F6}
.defs dt{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:700}
.defs dd{margin:2px 0 0;font-weight:650}
.timeline{list-style:none;margin:0;padding:6px 18px 12px}
.timeline li{position:relative;padding:4px 0 16px 24px;font-size:13px}
.timeline li::before{content:'';position:absolute;left:4px;top:9px;width:10px;height:10px;border-radius:50%;background:var(--grad);box-shadow:0 0 0 3px #EEF0FF}
.timeline li::after{content:'';position:absolute;left:8.5px;top:22px;bottom:0;width:1px;background:var(--line)}
.timeline li:last-child::after{display:none}
.timeline small{color:var(--muted)}

/* ---------- Flash ---------- */
.flash{display:flex;gap:10px;align-items:center;padding:12px 14px;border-radius:12px;font-weight:650;font-size:13.5px}
.flash.success{background:var(--ok-soft);color:var(--ok);border:1px solid #C6E8D9}
.flash.error{background:var(--red-soft);color:var(--red);border:1px solid #F9C9C6}
.note{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:12px;background:linear-gradient(90deg,#EEF0FF,#F6F0FF);border:1px solid #E0E3FF;color:var(--navy);font-size:13px}
.note.warn{background:var(--orange-soft);border-color:#FDD8B5;color:#7A3A06}
.toast{position:fixed;right:18px;bottom:18px;z-index:50;background:#141627;color:#fff;padding:11px 15px;border-radius:12px;font-size:13px;font-weight:650;box-shadow:0 10px 30px #0004;opacity:0;transform:translateY(8px);transition:.2s;pointer-events:none}
.toast.show{opacity:1;transform:none}

/* ---------- Login ---------- */
.login{min-height:100vh;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);background:#fff}
.login-art{position:relative;overflow:hidden;background:var(--grad-dark);color:#fff;padding:48px;display:flex;flex-direction:column;justify-content:space-between}
.login-art::after{content:'';position:absolute;right:-120px;bottom:-120px;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,#F5822055,transparent 65%)}
.login-art h1{font-size:40px;line-height:1.1;font-weight:800;max-width:460px}
.login-art p{color:#D4D8FF;max-width:430px;margin-top:12px}
.login-art .logo{background:#fff;border-radius:18px;padding:12px;width:120px}
.login-form{display:grid;place-items:center;padding:30px}
.login-form form{width:min(100%,380px);display:grid;gap:16px}
.login-form h2{font-size:26px;font-weight:780}

/* ---------- Mobile ---------- */
.mnav{display:none}.show-m{display:none!important}
@media (max-width:1100px){
  .metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
  .split{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:820px){
  .shell{grid-template-columns:minmax(0,1fr)}
  .rail{display:none}
  .topbar{padding:0 14px;height:56px;background:var(--grad-dark);color:#fff;border:0}
  .topbar .crumb{color:#C9CEFF}.topbar .crumb b{color:#fff}
  .topbar .btn{background:#ffffff14;color:#fff;border-color:#ffffff2e}
  .content{padding:16px 14px 96px;gap:14px}
  .foot{padding:0 14px 90px}
  .grid2,.grid3,.form,.defs{grid-template-columns:minmax(0,1fr)}
  .metrics,.metrics.three{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .metric{padding:12px;gap:9px}.metric strong{font-size:17px!important;overflow-wrap:anywhere}.metric small{display:block}.metric .tile{width:34px;height:34px}
  .heading{align-items:flex-start}
  .heading .actions{width:100%}.heading .actions .btn{flex:1}
  .mnav{display:flex;position:fixed;z-index:20;left:0;right:0;bottom:0;background:#fff;border-top:1px solid var(--line);padding:6px 6px calc(6px + env(safe-area-inset-bottom));box-shadow:0 -6px 24px #1e1b4b14}
  .mnav a{flex:1;display:grid;justify-items:center;gap:2px;font-size:10.5px;font-weight:700;color:#667085;padding:6px 2px;border-radius:10px}
  .mnav a.on{color:var(--indigo);background:#EEF0FF}
  .hide-m{display:none!important}
  .show-m{display:block!important}
  table.t th,table.t td{padding:10px}
  .userchip span{display:none}
}
.more-sheet{position:fixed;inset:0;z-index:30;background:#0f0c2980;display:none;align-items:flex-end}
.more-sheet.open{display:flex}
.more-sheet .sheet{width:100%;background:#fff;border-radius:20px 20px 0 0;padding:14px 14px calc(18px + env(safe-area-inset-bottom));display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.more-sheet .sheet a,.more-sheet .sheet button{display:grid;justify-items:center;gap:6px;padding:14px 6px;border-radius:14px;background:#F7F7FC;font-size:12px;font-weight:700;border:0;color:var(--navy)}
@media (max-width:820px){.login{grid-template-columns:1fr}.login-art{padding:28px;min-height:auto}.login-art h1{font-size:26px}}
@media print{.rail,.topbar,.mnav,.actions,.tools,.btn{display:none!important}.shell{display:block;background:#fff}.content{padding:0}.card{box-shadow:none}}

.delx{opacity:0;transition:.15s}tr:hover .delx,.delx:focus{opacity:1}@media (hover:none){.delx{opacity:.5}}