@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@500;600;700&family=Share+Tech+Mono&family=Nunito:wght@400;600;700;800&display=swap');

/* ════ VARIABLES ════ */
:root{
  --bg:       #f0f7ff;
  --bg2:      #e8f3ff;
  --white:    #ffffff;
  --card:     #ffffffee;
  --bdr:      #cce0f5;
  --bdr2:     #b8d4ee;
  --text:     #1a3a5c;
  --muted:    #6a8baa;
  --green:    #0a9e5c;
  --green-l:  #d4f5e7;
  --orange:   #e06010;
  --orange-l: #fde8d4;
  --blue:     #1565c0;
  --blue-l:   #d4e8ff;
  --purple:   #6a1b9a;
  --purple-l: #ead4ff;
  --red:      #c62828;
  --red-l:    #ffd4d4;
  --gold:     #b8860b;
  --gold-l:   #fff4cc;
  --ff:       'Nunito',sans-serif;
  --fm:       'Share Tech Mono',monospace;
  --ft:       'Rajdhani',sans-serif;
}

/* ════ RESET ════ */
.sgx-wrap *{box-sizing:border-box;margin:0;padding:0;}
.sgx-wrap{position:relative;min-height:100vh;background:var(--bg);font-family:var(--ff);color:var(--text);overflow-x:hidden;}

/* ════ CHEMISTRY BACKGROUND ════ */
#sgxCanvas{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:0.6;}

/* Hex grid */
.sgx-hexgrid{position:fixed;inset:0;display:grid;grid-template-columns:repeat(8,1fr);gap:6px;padding:20px;z-index:0;pointer-events:none;}
.sgx-hex{aspect-ratio:1;clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0 75%,0 25%);background:linear-gradient(135deg,#4a90d9,#1565c0);opacity:var(--op);animation:hexP 4s ease-in-out var(--d) infinite;}
@keyframes hexP{0%,100%{opacity:var(--op);}50%{opacity:calc(var(--op)*4);}}

/* Floating formulas */
.sgx-bubbles{position:fixed;inset:0;pointer-events:none;z-index:1;}
.sgx-fml{position:absolute;left:var(--lf);top:var(--tp);font-family:var(--fm);font-size:12px;color:#1565c0;opacity:0;animation:fmlA 8s ease-in-out var(--dl) infinite;}
@keyframes fmlA{0%,100%{opacity:0;transform:scale(.8);}40%,60%{opacity:.18;transform:scale(1);}}

/* ════ HOME ════ */
.sgx-home{position:relative;z-index:10;max-width:900px;margin:0 auto;padding:36px 20px 60px;}

/* Header */
.sgx-header{display:flex;align-items:center;gap:16px;margin-bottom:36px;padding:20px 28px;background:var(--card);border-radius:16px;border:1px solid var(--bdr);box-shadow:0 4px 20px rgba(21,101,192,.1);backdrop-filter:blur(10px);}
.sgx-atom-mini{position:relative;width:56px;height:56px;flex-shrink:0;}
.sgx-nuc{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:10px;height:10px;border-radius:50%;background:var(--blue);box-shadow:0 0 12px var(--blue);animation:nucP 2s ease-in-out infinite;}
@keyframes nucP{0%,100%{transform:translate(-50%,-50%) scale(1);}50%{transform:translate(-50%,-50%) scale(1.5);}}
.sgx-orb{position:absolute;inset:0;border:1.5px solid rgba(21,101,192,.4);border-radius:50%;}
.so1{animation:orbS 3s linear infinite;}.so2{transform:rotate(60deg);animation:orbS 5s linear infinite reverse;}
@keyframes orbS{to{transform:rotate(360deg)}}.so2.sgx-orb{transform:rotate(60deg);}
.sgx-orb span{position:absolute;top:-4px;left:50%;transform:translateX(-50%);width:6px;height:6px;border-radius:50%;background:var(--blue);box-shadow:0 0 6px var(--blue);}
.so2 .sgx-orb span,.so2 span{background:var(--green);box-shadow:0 0 6px var(--green);}
.sgx-brand{font-family:var(--ft);font-size:2.2rem;font-weight:700;color:var(--blue);letter-spacing:.12em;line-height:1;}
.sgx-tagline{font-family:var(--fm);font-size:11px;color:var(--muted);letter-spacing:.25em;text-transform:uppercase;margin-top:3px;}

/* ════ SEARCH SECTION ════ */
.sgx-search-section{background:var(--card);border-radius:16px;border:1px solid var(--bdr);box-shadow:0 4px 24px rgba(21,101,192,.12);padding:24px 28px;margin-bottom:28px;backdrop-filter:blur(10px);}
.sgx-search-label{font-size:13px;font-weight:700;color:var(--muted);letter-spacing:.08em;text-transform:uppercase;margin-bottom:10px;}
.sgx-search-box{display:flex;align-items:center;background:#f0f7ff;border:2px solid var(--blue);border-radius:12px;padding:0 16px;transition:all .2s;}
.sgx-search-box:focus-within{border-color:var(--green);box-shadow:0 0 0 4px rgba(10,158,92,.12);}
#sgxQ{flex:1;background:transparent;border:none;outline:none;padding:14px 0;color:var(--text);font-family:var(--ff);font-size:1rem;}
#sgxQ::placeholder{color:var(--muted);}
.sgx-search-out{margin-top:10px;}

/* Search result card */
.sgx-src-card{background:var(--white);border:1px solid var(--bdr);border-radius:10px;padding:16px;margin-bottom:10px;box-shadow:0 2px 8px rgba(21,101,192,.08);}
.sgx-src-head{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:10px;margin-bottom:10px;}
.sgx-src-title{font-size:15px;font-weight:800;color:var(--blue);}
.sgx-src-code{display:inline-block;padding:2px 8px;background:var(--blue-l);border-radius:50px;font-family:var(--fm);font-size:11px;color:var(--blue);margin-right:8px;}
.sgx-src-cas{font-family:var(--fm);font-size:11px;color:var(--muted);margin-top:2px;}
.sgx-src-total{text-align:right;}
.sgx-src-total-label{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.1em;}
.sgx-src-total-num{font-family:var(--fm);font-size:1.3rem;font-weight:700;}
.sgx-stockgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:8px;margin-top:8px;}
.sgx-stockbox{padding:10px 14px;border-radius:8px;border:1px solid;text-align:center;}
.sgx-stockbox .sgx-sb-label{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;margin-bottom:4px;}
.sgx-stockbox .sgx-sb-num{font-family:var(--fm);font-size:1rem;font-weight:700;}
.sb-inward {background:var(--green-l);border-color:#a8e6cc;} .sb-inward .sgx-sb-num{color:var(--green);}
.sb-godown {background:#fff8e6;border-color:#ffe09a;} .sb-godown .sgx-sb-num{color:var(--gold);}
.sb-prod   {background:var(--blue-l);border-color:#a8ccee;} .sb-prod .sgx-sb-num{color:var(--blue);}
.sb-unit1  {background:#f3e8ff;border-color:#d4aaee;} .sb-unit1 .sgx-sb-num{color:var(--purple);}
.sb-unit2  {background:#fff0f0;border-color:#ffbbbb;} .sb-unit2 .sgx-sb-num{color:var(--red);}
.sb-outward{background:var(--orange-l);border-color:#f8c89a;} .sb-outward .sgx-sb-num{color:var(--orange);}
.sb-total  {background:var(--blue);border-color:var(--blue);} .sb-total .sgx-sb-num{color:#fff;} .sb-total .sgx-sb-label{color:rgba(255,255,255,.8);}
.num-pos{color:var(--green)!important;} .num-neg{color:var(--red)!important;} .num-zer{color:var(--gold)!important;}

/* ════ 4 MAIN BUTTONS ════ */
.sgx-btnrow{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:18px;}
.sgx-mainbtn{background:var(--card);border:2px solid var(--bdr);border-radius:16px;padding:28px 20px;cursor:pointer;text-align:center;transition:all .25s;box-shadow:0 4px 16px rgba(21,101,192,.08);backdrop-filter:blur(10px);color:var(--text);}
.sgx-mainbtn:hover{transform:translateY(-5px);box-shadow:0 8px 30px rgba(21,101,192,.2);}
.sgx-btn-mol{font-size:2.4rem;line-height:1;margin-bottom:10px;}
.sgx-btn-title{font-family:var(--ft);font-size:1.1rem;font-weight:700;letter-spacing:.08em;margin-bottom:6px;}
.sgx-btn-desc{font-size:11px;color:var(--muted);line-height:1.5;}
.sgx-btn-inward {border-color:#a8e6cc;} .sgx-btn-inward:hover{border-color:var(--green);background:var(--green-l);} .sgx-btn-inward .sgx-btn-title{color:var(--green);}
.sgx-btn-outward{border-color:#f8c89a;} .sgx-btn-outward:hover{border-color:var(--orange);background:var(--orange-l);} .sgx-btn-outward .sgx-btn-title{color:var(--orange);}
.sgx-btn-prod   {border-color:#a8ccee;} .sgx-btn-prod:hover{border-color:var(--blue);background:var(--blue-l);} .sgx-btn-prod .sgx-btn-title{color:var(--blue);}
.sgx-btn-admin  {border-color:#d4aaee;} .sgx-btn-admin:hover{border-color:var(--purple);background:var(--purple-l);} .sgx-btn-admin .sgx-btn-title{color:var(--purple);}

/* ════ OVERLAY + MODAL ════ */
.sgx-overlay{display:none;position:fixed;inset:0;background:rgba(21,50,92,.35);z-index:100;backdrop-filter:blur(3px);}
.sgx-overlay.open{display:block;}
.sgx-modal{display:none;position:fixed;top:50%;left:50%;transform:translate(-50%,-48%);z-index:200;
  background:var(--white);border-radius:16px;box-shadow:0 20px 60px rgba(21,50,92,.25);
  width:92vw;max-width:760px;max-height:88vh;overflow:hidden;flex-direction:column;}
.sgx-modal.open{display:flex;}
.sgx-modal-wide{max-width:1000px;}

.sgx-modal-hdr{display:flex;justify-content:space-between;align-items:center;padding:16px 22px;font-family:var(--ft);font-size:1.2rem;font-weight:700;letter-spacing:.08em;flex-shrink:0;}
.sgx-mh-green {background:var(--green-l);color:var(--green);}
.sgx-mh-orange{background:var(--orange-l);color:var(--orange);}
.sgx-mh-blue  {background:var(--blue-l);color:var(--blue);}
.sgx-mh-purple{background:var(--purple-l);color:var(--purple);}
.sgx-mclose{background:transparent;border:none;font-size:1.2rem;cursor:pointer;color:inherit;padding:4px 8px;border-radius:4px;transition:background .2s;}
.sgx-mclose:hover{background:rgba(0,0,0,.1);}

.sgx-modal-tabs{display:flex;gap:0;padding:0 20px;background:#f8f8f8;border-bottom:2px solid var(--bdr);flex-shrink:0;overflow-x:auto;}
.sgx-mt{padding:10px 16px;background:transparent;border:none;border-bottom:3px solid transparent;margin-bottom:-2px;color:var(--muted);font-family:var(--ff);font-size:13px;font-weight:700;cursor:pointer;white-space:nowrap;transition:all .2s;}
.sgx-mt:hover{color:var(--text);}.sgx-mt.active{color:var(--blue);border-bottom-color:var(--blue);}

.sgx-modal-body{overflow-y:auto;flex:1;padding:20px;}
.sgx-tab{display:none;}.sgx-tab.active{display:block;}

/* ════ FORMS ════ */
.sgx-form{display:flex;flex-direction:column;gap:12px;}
.sgx-row2{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.sgx-row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;}
.sgx-field{display:flex;flex-direction:column;gap:5px;}
.sgx-field label{font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;}
.sgx-field input,.sgx-field select,.sgx-field textarea{background:#f4f9ff;border:1.5px solid var(--bdr2);border-radius:8px;padding:9px 12px;color:var(--text);font-family:var(--ff);font-size:13px;outline:none;transition:all .2s;width:100%;}
.sgx-field input:focus,.sgx-field select:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(21,101,192,.1);}
.sgx-field select option{background:#fff;}

/* Autocomplete */
.sgx-ac{position:absolute;left:0;right:0;top:100%;z-index:9999;background:#fff;border:1.5px solid var(--bdr);border-top:none;border-radius:0 0 8px 8px;max-height:200px;overflow-y:auto;box-shadow:0 8px 20px rgba(21,50,92,.15);}
.sgx-ac div{padding:8px 12px;font-size:13px;cursor:pointer;border-bottom:1px solid #f0f0f0;color:var(--text);}
.sgx-ac div:hover{background:var(--blue-l);color:var(--blue);}
.sgx-ac-code{font-family:var(--fm);color:var(--blue);font-size:11px;margin-right:6px;font-weight:700;}
.sgx-field{position:relative;}

/* Buttons */
.sgx-fbtns{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px;}
.sgx-save{padding:10px 22px;background:var(--blue);border:none;border-radius:8px;color:#fff;font-family:var(--ft);font-size:1rem;font-weight:700;letter-spacing:.06em;cursor:pointer;transition:all .2s;}
.sgx-save:hover{background:#1050a0;box-shadow:0 4px 12px rgba(21,101,192,.35);}
.sgx-reset{padding:10px 16px;background:#f0f0f0;border:1.5px solid #ddd;border-radius:8px;color:var(--muted);font-family:var(--ff);font-size:13px;cursor:pointer;transition:all .2s;}
.sgx-reset:hover{border-color:var(--red);color:var(--red);}
.sgx-rfr{padding:5px 12px;background:#f0f0f0;border:1.5px solid #ddd;border-radius:6px;font-size:12px;cursor:pointer;color:var(--muted);transition:all .2s;}
.sgx-rfr:hover{border-color:var(--blue);color:var(--blue);}

/* Messages */
.sgx-msg{margin-top:8px;padding:8px 12px;border-radius:6px;font-size:13px;display:none;}
.sgx-msg.show{display:block;}
.sgx-ok{background:var(--green-l);border:1px solid #a8e6cc;color:var(--green);}
.sgx-er{background:var(--red-l);border:1px solid #ffaaaa;color:var(--red);}

/* Destination radios */
.sgx-dest-row{background:#f8f8f8;border:1px solid var(--bdr);border-radius:10px;padding:14px 16px;margin-bottom:12px;}
.sgx-dest-label{font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;margin-bottom:8px;}
.sgx-dests{display:flex;flex-wrap:wrap;gap:8px;}
.sgx-dl{display:flex;align-items:center;gap:6px;padding:6px 12px;background:#fff;border:1.5px solid var(--bdr2);border-radius:8px;cursor:pointer;font-size:13px;font-weight:600;transition:all .2s;}
.sgx-dl:hover{border-color:var(--blue);background:var(--blue-l);}
.sgx-dl input{accent-color:var(--blue);}

/* Production txn type */
.sgx-txnrow{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px;}
.sgx-txl{display:flex;align-items:center;gap:6px;padding:8px 14px;background:#f8f8f8;border:1.5px solid var(--bdr2);border-radius:8px;cursor:pointer;font-size:13px;font-weight:600;transition:all .2s;}
.sgx-txl:hover,.sgx-txl.active{border-color:var(--blue);background:var(--blue-l);}
.sgx-txl input{accent-color:var(--blue);}

/* ════ BULK UPLOAD ════ */
.sgx-bulkinfo{background:#f8f9fa;border:1px solid var(--bdr);border-radius:10px;padding:14px 16px;margin-bottom:14px;}
.sgx-ctags{display:flex;flex-wrap:wrap;gap:5px;margin:8px 0;}
.sgx-ctag,.sgx-ctags span{padding:2px 8px;background:var(--blue-l);border:1px solid var(--bdr);border-radius:50px;font-family:var(--fm);font-size:10px;color:var(--blue);}
.sgx-tpl{padding:6px 12px;background:var(--gold-l);border:1px solid #e6c840;border-radius:6px;color:var(--gold);font-size:12px;cursor:pointer;margin-top:8px;transition:all .2s;}
.sgx-tpl:hover{background:#ffe88a;}
.sgx-dropzone{border:2px dashed var(--bdr2);border-radius:12px;padding:36px 20px;text-align:center;cursor:pointer;transition:all .2s;margin-bottom:14px;background:#fafcff;}
.sgx-dropzone:hover,.sgx-dropzone.dov{border-color:var(--blue);background:var(--blue-l);}
.sgx-dz-icon{font-size:2.2rem;margin-bottom:8px;}
.sgx-dz-txt{font-size:14px;color:var(--text);margin-bottom:4px;font-weight:600;}
.sgx-dz-sub{font-size:11px;color:var(--muted);font-family:var(--fm);}
.sgx-prev-bar{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;flex-wrap:wrap;gap:8px;}

/* Multi-product outward */
.sgx-multiinfo{padding:10px 14px;background:var(--blue-l);border-radius:8px;font-size:13px;color:var(--blue);margin-bottom:14px;}
.sgx-multirow{display:flex;gap:8px;align-items:flex-start;flex-wrap:wrap;margin-bottom:8px;}
.sgx-multirow input{padding:8px 10px;border:1.5px solid var(--bdr2);border-radius:6px;font-size:13px;outline:none;background:#f4f9ff;}
.sgx-multirow input:focus{border-color:var(--blue);}
.sgx-addrow{padding:8px 14px;background:var(--green);border:none;border-radius:6px;color:#fff;font-weight:700;cursor:pointer;transition:all .2s;}
.sgx-addrow:hover{background:#088a4f;}

/* ════ TABLES ════ */
.sgx-tscroll{overflow-x:auto;border-radius:8px;border:1px solid var(--bdr);}
.sgx-tbl{width:100%;border-collapse:collapse;font-size:12px;white-space:nowrap;}
.sgx-tbl thead th{background:#f0f7ff;padding:9px 11px;font-family:var(--fm);font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;text-align:left;border-bottom:1.5px solid var(--bdr);position:sticky;top:0;}
.sgx-tbl tbody tr{border-bottom:1px solid #f0f0f0;}
.sgx-tbl tbody tr:hover{background:#f8fbff;}
.sgx-tbl td{padding:8px 11px;color:var(--text);}
.sgx-edt{padding:3px 9px;background:var(--gold-l);border:1px solid #e6c840;border-radius:4px;color:var(--gold);font-size:11px;cursor:pointer;}
.sgx-del{padding:3px 9px;background:var(--red-l);border:1px solid #ffaaaa;border-radius:4px;color:var(--red);font-size:11px;cursor:pointer;}

/* Records header */
.sgx-rec-hdr{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;flex-wrap:wrap;gap:8px;}
.sgx-rec-hdr span{font-weight:700;color:var(--blue);}

/* ════ PIN GATE ════ */
.sgx-pingate{padding:40px 20px;display:flex;align-items:center;justify-content:center;}
.sgx-pinbox{text-align:center;width:300px;}
.sgx-pin-icon{font-size:2.5rem;margin-bottom:10px;}
.sgx-pin-title{font-family:var(--ft);font-size:1.3rem;font-weight:700;color:var(--blue);margin-bottom:18px;}
.sgx-pinput{width:100%;padding:12px;text-align:center;font-size:1.4rem;letter-spacing:.3em;background:#f4f9ff;border:2px solid var(--bdr2);border-radius:8px;color:var(--text);outline:none;margin-bottom:12px;}
.sgx-pinput:focus{border-color:var(--blue);}

/* ════ MISC ════ */
.sgx-ld,.sgx-empty{padding:30px;text-align:center;color:var(--muted);font-family:var(--fm);font-size:12px;}

@media(max-width:600px){
  .sgx-btnrow{grid-template-columns:1fr 1fr;}
  .sgx-row2,.sgx-row3{grid-template-columns:1fr;}
  .sgx-modal{width:98vw;max-height:92vh;}
  .sgx-home{padding:20px 12px 40px;}
  .sgx-dests{flex-direction:column;}
}