*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --sand:#f0f4f0;--sand2:#e2ede2;--sand3:#d5e2d5;--sand4:#c8d7c8;--sand-dk:#a6bfa6;
  --cream:#f9fbf9;--cream2:#f2f7f2;
  --br:#6c946c;--br2:#8db58d;--br3:#a6cfa6;
  --txt:#2d362d;--txt2:#4a5d4a;--txt3:#6a7a6a;
  --hbg:#8db58d;--htxt:#ffffff;
  --red:#d9534f;--blue:#5bc0de;--green:#5cb85c;--amber:#f0ad4e;
  --brd:#ccd6cc;--brd2:#a6bfa6;
  --ibg:#ffffff;--ralt:#f8faf8;--rhov:#edf2ed;--rsel:#e2ede2;
  --shd:0 4px 12px rgba(108,148,108,0.08);--shd-lg:0 12px 32px rgba(108,148,108,0.12);
  --r:6px;--rsm:4px;
}

/* Hide number input spinners */
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}
input[type=number] {
  -moz-appearance: textfield;
}

  body{font-family:'IBM Plex Sans',sans-serif;background:#eff3ef;min-height:100vh;color:var(--txt);font-size:13px;line-height:1.4;}
  
  /* Role Based Visibility */
  body[data-role="MANAGER"] .btn-home,
  body[data-role="MANAGER"] #page-dash,
  body[data-role="MANAGER"] #mg-trans,
  body[data-role="MANAGER"] #mg-rep,
  body[data-role="MANAGER"] #mg-mst { display: none !important; }

  body[data-role="VIEWER"] #mg-trans { display: none !important; }

  body[data-role="VIEWER"] .btn-act,
  body[data-role="VIEWER"] .btn-save,
  body[data-role="VIEWER"] .btn-del,
  body[data-role="VIEWER"] .action-cell,
  body[data-role="VIEWER"] button[onclick*="save"],
  body[data-role="VIEWER"] button[onclick*="Save"],
  body[data-role="VIEWER"] button[onclick*="del"],
  body[data-role="VIEWER"] button[onclick*="Delete"] { display: none !important; }

  /* Login Overlay */
  #login-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: #5C3D1E; z-index: 9999; display: flex; align-items: center; justify-content: center;
  }
  #login-overlay.hidden { display: none; }
  .login-box {
    background: var(--cream); padding: 32px; border: 3px solid var(--br); border-radius: 12px;
    width: 320px; text-align: center; box-shadow: var(--shd-lg);
  }
  .login-box h2 { color: var(--br); font-family: 'IBM Plex Sans'; margin-bottom: 20px; }
  .login-box input {
    width: 100%; padding: 10px; margin-bottom: 12px; border: 1.5px solid var(--brd); border-radius: 4px;
    font-family: inherit; outline: none;
  }
  .login-box button {
    width: 100%; padding: 10px; background: var(--br); color: white; border: none; border-radius: 4px;
    font-weight: 700; cursor: pointer;
  }
  .login-box button:hover { background: #000; }

#mb{background:linear-gradient(180deg,#a6cfa6,#6c946c);display:flex;align-items:center;height:38px;border-bottom:2.5px solid var(--amber);box-shadow:0 1px 10px rgba(0,0,0,.1);position:sticky;top:0;z-index:300;}
.mbl{padding:0 12px; display:flex; align-items:center; height:100%;}
.mb-r{margin-left:auto;padding-right:12px;display:flex;align-items:center;gap:10px;}
.mbl-name{display:none;}

.btn-home {
  background: rgba(255,255,255,0.12);
  color: #F5EDD8;
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 4px;
  padding: 0;
  width: 32px;
  height: 28px;
  font-size: 16px;
  justify-content: center;
  transition: all 0.2s;
}
.btn-home:hover {
  background: rgba(255,255,255,0.22);
  color: white;
}

/* ─── DASHBOARD ─── */
.dash-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
@media(max-width:960px){ .dash-grid { grid-template-columns: 1fr; } }
.d-card { background: var(--cream2); border: 2.5px solid var(--br); border-radius: 8px; overflow: hidden; box-shadow: var(--shd); }
.d-head { background: var(--br); color: white; padding: 10px 14px; font-weight: 700; font-size: 13px; display: flex; justify-content: space-between; align-items: center; }
.d-body { padding: 12px; }
.d-table { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 5px; }
.d-table th { background: rgba(92,61,30,0.1); padding: 8px; text-align: left; border-bottom: 2px solid var(--brd2); font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; }
.d-table td { padding: 8px; border-bottom: 1px solid rgba(0,0,0,0.06); }
.d-table .r { text-align: right; }
.d-table .total-row { background: var(--sand3); font-weight: 700; border-top: 1.5px solid var(--br); }
.stat-vals { display: flex; gap: 15px; }
.stat-val { font-family: 'IBM Plex Mono', monospace; font-size: 17px; font-weight: 700; color: var(--br); display: flex; align-items: baseline; gap: 4px; }
.stat-val small { font-size: 10px; color: var(--txt3); font-weight: 600; text-transform: uppercase; }
.d-select { padding: 4px 8px; border: 1.5px solid var(--brd); border-radius: 4px; font-size: 12px; font-family: 'IBM Plex Sans'; background: var(--ibg); color: var(--txt); cursor: pointer; }
.mbl em{color:#FFD580;font-style:normal;}
.mbg{position:relative;}
.mbb{padding:0 14px;color:#F5EDD8;font-size:14px;font-weight:500;cursor:pointer;height:36px;display:flex;align-items:center;border:none;background:transparent;font-family:'IBM Plex Sans',sans-serif;transition:background .12s;border-right:1px solid rgba(255,255,255,.07);}
.mbb:hover,.mbb.on{background:rgba(255,255,255,.18);color:#fff;}
.mbb u{text-decoration:underline;}
.mbd{display:none;position:absolute;top:36px;left:0;min-width:220px;background:var(--cream);border:1.5px solid var(--brd2);border-radius:0 0 var(--r) var(--r);box-shadow:0 8px 24px rgba(0,0,0,.3);z-index:400;}
.mbg.open .mbd{display:block;}
.mb-sep{height:1px;background:var(--brd);margin:3px 0;}
.mbdi{padding:10px 18px;font-size:14px;color:var(--txt);cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:8px;border-bottom:1px solid rgba(196,169,106,.3);transition:background .1s;position:relative;}
.mbdi:hover{background:var(--rhov);}
.mbdi i:first-child { margin-right: 8px; }
.mbdi-arr { font-size: 10px; opacity: 0.5; }
.mbd-sub { display: none; position: absolute; left: calc(100% + 2px); top: -2px; min-width: 240px; background: var(--cream); border: 1.5px solid var(--brd2); border-radius: var(--rsm); box-shadow: 8px 8px 24px rgba(0,0,0,.25); z-index: 410; }
.mbdi:hover > .mbd-sub { display: block; }
.mb-head{padding:6px 14px;font-size:11px;font-weight:700;color:var(--br);background:rgba(212,189,142,0.3);text-transform:uppercase;letter-spacing:1px;border-bottom:1px solid rgba(196,169,106,.3);}
.mb-sub-item{padding-left:30px!important;}
.mb-r{margin-left:auto;padding-right:12px;display:flex;align-items:center;}
.mb-clk{font-family:'IBM Plex Mono',monospace;font-size:13px;color:rgba(245,237,216,.65);}

/* ─── WINDOW ─── */
#aw{padding:14px 16px 16px;min-height:calc(100vh - 36px);}
#win{background:var(--sand);border:2px solid var(--br);border-radius:var(--r);box-shadow:var(--shd-lg),inset 0 1px 0 rgba(255,255,255,.4);overflow:hidden;max-width:1420px;margin:0 auto;}
.wtb{background:linear-gradient(180deg,var(--hbg),var(--br));padding:6px 14px;display:flex;align-items:center;justify-content:space-between;border-bottom:2px solid var(--br);}
.wtt{color:var(--htxt);font-weight:700;font-size:13px;letter-spacing:.3px;display:flex;align-items:center;gap:8px;}
.wti{width:18px;height:18px;background:rgba(255,255,255,.2);border-radius:3px;display:flex;align-items:center;justify-content:center;font-size:11px;}
.wbs{display:flex;gap:4px;}
.wb{width:19px;height:19px;border-radius:3px;border:1px solid rgba(0,0,0,.3);cursor:pointer;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;}
.wb.mn{background:#FFB800;color:#7A4800;}.wb.mx{background:#28C840;color:#0A5C20;}.wb.cl{background:#FF5F57;color:#7A0000;}

/* ─── PAGES ─── */
.pg{display:none;padding:16px;}.pg.active{display:block;}

/* ─── FIELDS ─── */
.fl{font-size:11.5px;font-weight:600;color:var(--txt2);white-space:nowrap;}
.fi{height:26px;border:1.5px solid var(--brd);border-radius:var(--rsm);padding:0 8px;font-size:12.5px;font-family:'IBM Plex Sans',sans-serif;background:var(--ibg);color:var(--txt);outline:none;width:100%;transition:all 0.2s cubic-bezier(0.4, 0, 0.2, 1);}
.fi:focus{border-color:var(--br);box-shadow:0 0 0 3px rgba(108,148,108,0.15);background:#fff;}
.fi.mn{font-family:'IBM Plex Mono',monospace;font-size:12px;}
select.fi{cursor:pointer;}
.fg{display:flex;flex-direction:column;gap:3px;}
.fg label{font-size:10.5px;font-weight:700;color:var(--txt3);letter-spacing:.5px;text-transform:uppercase;}
.fgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(195px,1fr));gap:10px 12px;}

/* ─── MANAGER DASHBOARD ─── */
.m-dash-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px; padding: 20px; }
.m-dash-card { 
  background: var(--cream); border: 2.5px solid var(--br); border-radius: 8px; padding: 25px 15px; 
  text-align: center; cursor: pointer; transition: all 0.2s; box-shadow: var(--shd);
  display: flex; align-items: center; justify-content: center;
}
.m-dash-card:hover { background: var(--sand2); transform: translateY(-2px); box-shadow: var(--shd-lg); }
.m-dash-label { font-weight: 800; font-size: 15px; color: var(--br); text-transform: uppercase; letter-spacing: 1.5px; }
.fgrid.c2{grid-template-columns:repeat(auto-fill,minmax(240px,1fr));}
.slbl{font-size:10px;font-weight:700;color:var(--br);letter-spacing:1px;text-transform:uppercase;display:flex;align-items:center;gap:7px;margin:14px 0 8px;}
.slbl::after{content:'';flex:1;height:1px;background:var(--brd);}

/* ─── SECTION BAR ─── */
.sb{background:linear-gradient(90deg,var(--br),var(--br3));color:var(--htxt);font-size:11px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;padding:4px 12px;border-radius:var(--rsm) var(--rsm) 0 0;display:flex;align-items:center;justify-content:space-between;gap:8px;}

/* ─── CARD ─── */
.card{background:var(--cream2);border:1.5px solid var(--brd);border-radius:var(--r);margin-bottom:14px;overflow:hidden;}
.cb{padding:14px;}

/* ─── FILTER BAR ─── */
.fb{display:flex;gap:8px;flex-wrap:wrap;align-items:flex-end;background:var(--cream2);border:1.5px solid var(--brd);border-radius:var(--r);padding:11px 14px;margin-bottom:12px;}
.fb .fg{min-width:138px;}
.fb .fg.sm{min-width:108px;}

/* ─── TABLE ─── */
.tw{overflow:auto;max-height:70vh;border:1.5px solid var(--brd);border-radius:var(--rsm);}
.gt{width:100%;border-collapse:collapse;font-size:12.5px;}
.gt thead tr{background:var(--sand4);}
.gt th{position:sticky;top:0;z-index:5;background:var(--sand4);padding:6px 10px;text-align:left;font-size:10.5px;font-weight:700;color:var(--br);letter-spacing:.5px;text-transform:uppercase;border-right:1px solid var(--brd);border-bottom:2px solid var(--brd2);white-space:nowrap;}
.gt th.r,.gt td.r{text-align:right;}.gt th.c,.gt td.c{text-align:center;}
.gt th:last-child{border-right:none;}
.gt td{padding:7px 10px;border-right:1px solid rgba(196,169,106,.35);border-bottom:1px solid rgba(196,169,106,.3);color:var(--txt);vertical-align:middle;}
.gt td:last-child{border-right:none;}
.gt tbody tr{background:var(--cream);}
.gt tbody tr:nth-child(even){background:var(--ralt);}
.gt tbody tr:hover td{background:var(--rhov);cursor:pointer;}
.d-table tbody tr:hover td{background:var(--rhov);cursor:pointer;}

/* ─── BUTTONS ─── */
.btn{height:26px;padding:0 14px;border-radius:var(--rsm);font-size:12px;font-weight:600;font-family:'IBM Plex Sans',sans-serif;cursor:pointer;transition:all .13s;display:inline-flex;align-items:center;gap:5px;box-shadow:0 2px 4px rgba(0,0,0,.12),inset 0 1px 0 rgba(255,255,255,.25);white-space:nowrap;border:none;}
.bbr{background:linear-gradient(180deg,var(--br3),var(--br2));color:var(--htxt);border:1.5px solid var(--br)!important;}.bbr:hover{filter:brightness(1.1);}
.bgr{background:linear-gradient(180deg,#1E8449,#196F3D);color:#fff;border:1.5px solid #145A32!important;}.bgr:hover{filter:brightness(1.1);}
.brd{background:linear-gradient(180deg,#C0392B,#A93226);color:#fff;border:1.5px solid #922B21!important;}.brd:hover{filter:brightness(1.1);}
.bbl{background:linear-gradient(180deg,#1A5276,#154360);color:#fff;border:1.5px solid #0E3460!important;}.bbl:hover{filter:brightness(1.1);}
.bgh{background:linear-gradient(180deg,var(--cream),var(--sand2));color:var(--br);border:1.5px solid var(--brd)!important;}.bgh:hover{background:linear-gradient(180deg,var(--sand2),var(--sand3));}
.bam{background:linear-gradient(180deg,#B8920A,#9A7A08);color:#fff;border:1.5px solid #7A6000!important;}.bam:hover{filter:brightness(1.1);}
.bsm{height:24px;padding:0 10px;font-size:11.5px;}
.bic{height:24px;width:26px;padding:0;font-size:13px;}
.k{font-size:9px;background:rgba(0,0,0,.12);border-radius:2px;padding:1px 3px;font-family:'IBM Plex Mono',monospace;margin-left:2px;}
.abar{background:linear-gradient(180deg,var(--sand3),var(--sand4));padding:8px 14px;display:flex;align-items:center;gap:6px;flex-wrap:wrap;border-top:2px solid var(--brd2);}
.asep{width:1px;height:20px;background:var(--brd2);margin:0 3px;}

/* ─── MODAL ─── */
.mbg2{display:none;position:fixed;inset:0;width:100%;height:100%;background:rgba(44,26,8,.55);z-index:500;align-items:center;justify-content:center;}
.mbg2.open{display:flex;}
.mod{background:var(--sand);border:2px solid var(--br);border-radius:var(--r);box-shadow:var(--shd-lg);width:94%;max-width:700px;max-height:92vh;overflow-y:auto;animation:mIn .2s ease;}
.mod.wd{max-width:980px;}.mod.nw{max-width:420px;}
@keyframes mIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.mtt{background:linear-gradient(180deg,var(--hbg),var(--br));color:var(--htxt);padding:7px 14px;display:flex;align-items:center;justify-content:space-between;font-weight:700;font-size:13px;position:sticky;top:0;z-index:10;}
.mb2{padding:16px;}
.mcl{width:22px;height:22px;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.3);border-radius:3px;color:var(--htxt);cursor:pointer;font-size:14px;display:flex;align-items:center;justify-content:center;}
.mcl:hover{background:rgba(192,57,43,.7);}

/* ─── INLINE ITEM TABLE ─── */
.itbl{width:100%;border-collapse:collapse;font-size:12px;}
.itbl th{position:sticky;top:0;z-index:5;background:var(--sand4);color:var(--br);padding:5px 6px;font-size:10px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;border-right:1px solid var(--brd);border-bottom:2px solid var(--brd2);text-align:left;white-space:nowrap;}
.itbl th.r{text-align:right;}.itbl th.c{text-align:center;}.itbl th:last-child{border-right:none;}
.itbl td{padding:2px 3px;border-right:1px solid rgba(196,169,106,.35);border-bottom:1px solid rgba(196,169,106,.3);}
.itbl td:last-child{border-right:none;}
.itbl tbody tr:nth-child(even) td{background:rgba(242,232,208,.45);}
.itbl tbody tr.fent-row td{background:rgba(26,82,118,.06)!important;}
.iw{border:1.5px solid var(--brd2);border-radius:0 var(--rsm) var(--rsm) var(--rsm);overflow:hidden;margin-bottom:10px;}
.arb{padding:5px 8px;background:var(--sand2);border-top:1px solid var(--brd);}
.ci{width:100%;height:23px;border:none;background:transparent;color:var(--txt);font-family:'IBM Plex Mono',monospace;font-size:11.5px;outline:none;padding:0 4px;}
.ci:focus{background:rgba(255,253,247,.95);box-shadow:0 0 0 3px rgba(108,148,108,0.2);border-radius:2px;border:1px solid var(--br);}
.ci.r{text-align:right;}
.ciro{width:100%;height:23px;background:var(--sand2);color:var(--txt2);font-family:'IBM Plex Mono',monospace;font-size:11.5px;padding:0 4px;display:flex;align-items:center;justify-content:flex-end;border-radius:2px;}
select.ci{font-family:'IBM Plex Sans',sans-serif;font-size:11px;cursor:pointer;}

/* ─── TOTALS PANEL ─── */
.tp{background:var(--cream2);border:1.5px solid var(--brd);border-radius:var(--r);overflow:hidden;}
.tr2{display:grid;grid-template-columns:1fr 58px 110px;align-items:center;border-bottom:1px solid rgba(196,169,106,.35);padding:5px 10px;gap:8px;}
.tr2:last-child{border-bottom:none;}
.tr2.sum{background:var(--sand2);font-weight:700;}
.tr2.bill{background:linear-gradient(90deg,var(--sand3),var(--sand4));font-weight:700;}
.tlbl{font-size:12px;font-weight:600;color:var(--txt2);}
.tpct{height:21px;border:1px solid var(--brd);border-radius:var(--rsm);padding:0 5px;text-align:center;font-family:'IBM Plex Mono',monospace;font-size:11.5px;background:var(--ibg);color:var(--txt);outline:none;width:100%;}
.tpct:focus{border-color:var(--br2);}
.tval{height:22px;font-family:'IBM Plex Mono',monospace;font-size:12.5px;font-weight:600;color:var(--txt);text-align:right;background:var(--sand2);border:1px solid var(--brd);border-radius:var(--rsm);padding:0 8px;display:flex;align-items:center;justify-content:flex-end;width:100%;}
.tval.big{font-size:14px;height:26px;color:var(--br);}
.tval.red{color:var(--red);}.tval.grn{color:var(--green);}

/* ─── BADGES / PILLS ─── */
.badge{display:inline-flex;align-items:center;padding:2px 8px;border-radius:20px;font-size:11px;font-weight:700;}
.bbr2{background:rgba(160,112,60,.15);color:var(--br2);}
.bbl2{background:rgba(26,82,118,.12);color:#1A5276;}
.bgr2{background:rgba(30,132,73,.12);color:#1E8449;}
.brd2{background:rgba(192,57,43,.12);color:#C0392B;}
.bam2{background:rgba(184,146,10,.15);color:#7A6000;}
.pill{display:inline-flex;align-items:center;gap:4px;padding:2px 9px;border-radius:20px;font-size:11px;font-weight:600;}
.pill::before{content:'';width:5px;height:5px;border-radius:50%;}
.pp{background:rgba(30,132,73,.12);color:#1E8449;}.pp::before{background:#1E8449;}
.ppa{background:rgba(184,146,10,.15);color:#7A6000;}.ppa::before{background:#B8920A;}
.ppn{background:rgba(192,57,43,.12);color:#C0392B;}.ppn::before{background:#C0392B;}
.ppb{background:rgba(26,82,118,.12);color:#1A5276;}.ppb::before{background:#1A5276;}

/* ─── DASH STATS ─── */
.dg{display:grid;grid-template-columns:repeat(auto-fill,minmax(185px,1fr));gap:12px;margin-bottom:16px;}
.dc{background:var(--cream);border:1.5px solid var(--brd);border-radius:var(--r);padding:13px 16px;display:flex;flex-direction:column;gap:4px;}
.dc-lbl{font-size:10.5px;font-weight:700;color:var(--txt3);text-transform:uppercase;letter-spacing:.5px;}
.dc-val{font-size:22px;font-weight:700;color:var(--br);font-family:'IBM Plex Mono',monospace;}
.dc-sub{font-size:11px;color:var(--txt3);}

/* ─── TOAST ─── */
#toast{position:fixed;bottom:20px;right:20px;z-index:9999;display:flex;flex-direction:column;gap:6px;pointer-events:none;}
.tst{padding:9px 16px;border-radius:var(--r);font-size:12.5px;font-weight:600;box-shadow:var(--shd-lg);animation:tIn .2s ease;pointer-events:none;}
.tst.ok{background:#1E8449;color:#fff;}.tst.err{background:#C0392B;color:#fff;}.tst.inf{background:var(--br);color:var(--htxt);}
@keyframes tIn{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:none}}

/* ─── PRINT PREVIEW MODAL ─── */
#ppMod{display:none;position:fixed;top:0;left:0;right:0;bottom:0;width:100%;height:100%;background:rgba(0,0,0,.85);z-index:999999;flex-direction:column;}
#ppMod.open{display:flex !important;}
#ppBar{background:#222;background:linear-gradient(180deg,#444,#222);display:flex;align-items:center;gap:8px;padding:10px 14px;flex-shrink:0;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;border-bottom:1px solid #000;}
#ppBar .pptitle{color:#ddd;font-size:12px;font-weight:600;flex:1;min-width:100px;font-family:'IBM Plex Sans',sans-serif;}
#ppBar .ppbtn{height:30px;padding:0 13px;border-radius:4px;font-size:12px;font-weight:600;font-family:'IBM Plex Sans',sans-serif;cursor:pointer;border:none;display:inline-flex;align-items:center;gap:5px;white-space:nowrap;}
.ppbtn-print{background:#28C840;color:#fff;}
.ppbtn-pdf{background:#1A5276;color:#fff;}
.ppbtn-wa{background:#25D366;color:#fff;}
.ppbtn-email{background:#EA4335;color:#fff;}
.ppbtn-csv{background:#B8920A;color:#fff;}
.ppbtn-close{background:#C0392B;color:#fff;}
#ppFrame{flex:1;border:none;background:#fff;width:100%;}

/* ─── METERMEL TABLE ─── */
.mmtbl{width:100%;border-collapse:collapse;font-size:12px;}
.mmtbl th{background:linear-gradient(180deg,#1A5276,#154360);color:#fff;padding:5px 10px;font-size:10px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;border-right:1px solid rgba(255,255,255,.2);white-space:nowrap;}
.mmtbl th:last-child{border-right:none;}
.mmtbl td{padding:5px 10px;border-right:1px solid rgba(196,169,106,.35);border-bottom:1px solid rgba(196,169,106,.3);font-size:12px;}
.mmtbl td.r{text-align:right;font-family:'IBM Plex Mono',monospace;}
.mmtbl tbody tr{background:var(--cream);}
.mmtbl tbody tr:nth-child(even){background:var(--ralt);}

/* Mobile Table Overrides */
#prodJourneyTbl, #prodDmgTbl, #prodOutTbl, #prodReceiptTbl, #prodSilicateTbl, #prodBillingTbl, 
#pomItemsTbl, #prmItemsTbl, #psmItemsTbl, #pbmItemsTbl { table-layout: auto; }

@media(max-width:960px){
  #prodJourneyTbl th, #prodJourneyTbl td, #prodDmgTbl th, #prodDmgTbl td,
  #prodOutTbl th, #prodOutTbl td, #prodReceiptTbl th, #prodReceiptTbl td,
  #prodSilicateTbl th, #prodSilicateTbl td, #prodBillingTbl th, #prodBillingTbl td,
  #pomItemsTbl th, #pomItemsTbl td, #prmItemsTbl th, #prmItemsTbl td,
  #psmItemsTbl th, #psmItemsTbl td, #pbmItemsTbl th, #pbmItemsTbl td { padding: 3px 5px !important; font-size: 10px !important; }
  
  .badge { padding: 1px 4px; font-size: 9px; }
  .pill { padding: 1px 6px; font-size: 9px; }
}



@media print {
  @page { size: A4 landscape; margin: 10mm; }
  body { background: #fff !important; color: #000 !important; font-size: 10px !important; }
  #mb, .no-print, .abar, .wtb, .sb, button, .mcl, .ham, .detail-row { display: none !important; }
  #aw { padding: 0 !important; }
  #win, .card { border: none !important; box-shadow: none !important; margin: 0 !important; width: 100% !important; max-width: none !important; background: #fff !important; }
  .tw { overflow: visible !important; }
  .gt { width: 100% !important; border-collapse: collapse !important; color: #000 !important; }
  .gt th, .gt td { border: 1px solid #333 !important; padding: 4px !important; font-size: 9px !important; color: #000 !important; background: transparent !important; }
  .gt thead tr { background: #f0f0f0 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .gt tfoot { display: table-footer-group !important; }
  .gt tfoot tr { background: #f9f9f9 !important; border-top: 2px solid #000 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .badge, .pill { border: 1px solid #444 !important; background: transparent !important; color: #000 !important; box-shadow: none !important; }
  .pill::before { border: 1px solid #000 !important; background: #000 !important; }
}

/* ─── INWARD LAYOUT ─── */
.iw-hdr{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;margin-bottom:12px;}
.iw-hdr2{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:12px;margin-bottom:12px;}

/* ─── INVOICE LAYOUT ─── */
.inv-layout{display:grid;grid-template-columns:1fr 320px;gap:14px;}

/* ─── MOBILE RESPONSIVENESS ─── */
.ham{display:none;background:transparent;border:none;color:#FBF6EC;font-size:20px;cursor:pointer;padding:0 12px;margin-left:auto;}
.nav-links{display:flex;align-items:stretch;}
/* ─── FOOTER ─── */
.main-footer {
  background: linear-gradient(180deg, #6B4423, #5C3D1E);
  color: #F5EDD8;
  padding: 8px 16px;
  font-size: 11px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--sand-dk);
  margin-top: 10px;
}
.footer-left {
  font-weight: 600;
  letter-spacing: 0.3px;
}
.footer-right {
  opacity: 0.7;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
}

@media(max-width:960px){
  .inv-layout{grid-template-columns:1fr;}
  
  /* Layout Spacing */
  #aw{padding:8px;min-height:calc(100vh - 40px);}
  #win{border-radius:0;border:none;box-shadow:none;}
  .cb{padding:10px;}
  
  /* Typography & Modals */
  body{font-size:12px;}
  .btn{padding:0 10px;font-size:11px;}
  .mod{width:98%;}
  .mb2{padding:12px;}
  
  /* Forms & Grids */
  .iw-hdr, .iw-hdr2{grid-template-columns:1fr;}
  .fgrid, .fgrid.c2{grid-template-columns:1fr;}
  .dg{grid-template-columns:1fr;}
  
  /* Table Wrapping */
  .tw{overflow-x:auto;-webkit-overflow-scrolling:touch;}
  .gt th, .gt td, .itbl th, .itbl td{white-space:nowrap;font-size:11px;}
  .mmtbl th, .mmtbl td{white-space:nowrap;font-size:11px;}
  
  /* Mobile Side Drawer Navigation */
  #mb{height:44px; display:flex; align-items:center; position:sticky; top:0; z-index:10000;}
  .ham{display:flex; align-items:center; height:44px; font-size:22px; order: -1; margin-left:0; margin-right:10px;}
  .mbl{font-size:14px; padding:0; flex:1;}
  
  .nav-backdrop { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.5); z-index:9998; opacity:0; transition:opacity 0.3s ease; }
  .nav-backdrop.open { display:block; opacity:1; }

  .nav-links {
    display:flex; flex-direction:column; position:fixed; top:0; left:-280px; bottom:0; width:280px; 
    background:var(--cream); z-index:9999; box-shadow:8px 0 32px rgba(0,0,0,0.3); 
    transition:left 0.3s cubic-bezier(0.4, 0, 0.2, 1); padding-top:0; overflow-y:auto; overflow-x:hidden;
    -webkit-overflow-scrolling: touch;
  }
  .nav-links.open { left:0; }
  
  .nav-links::before { 
    content:'MeterMel & ERP'; display:flex; align-items:center; justify-content:center; padding:30px 20px; font-weight:700; 
    font-size:22px; color:#fff; border-bottom:1px solid rgba(255,255,255,0.1); background:linear-gradient(135deg, var(--br), var(--br3));
    letter-spacing: 1.5px; text-shadow: 0 2px 4px rgba(0,0,0,0.2);
  }

  .mbg { width:100%; border-right:none; border-bottom:1px solid rgba(0,0,0,0.05); }
  .mbb { 
    display:flex; align-items:center; justify-content:space-between; width:100%; height:58px; 
    padding:0 20px; text-align:left;
    font-size:16px; font-weight:600; color:var(--txt2); background:transparent; border-right:none;
  }
  .mbb:hover, .mbb.on { background:var(--sand2); color: var(--br); }
  
  .mbd { 
    position:static; width:100%; box-shadow:none; border:none; background:var(--sand2); 
    display:none; border-bottom:1px solid var(--brd);
  }
  .mbg.open .mbd { display:block; }
  .mbdi { display:flex; width:100%; padding:16px 20px; font-size:15px; text-align:left; border-bottom:1px solid rgba(0,0,0,0.03); cursor:pointer; flex-direction: column; align-items: flex-start; }
  .mbdi:last-child { border-bottom:none; }
  
  .mbdi span { display: flex; align-items: center; width: 100%; justify-content: space-between; }
  .mbdi-arr { transform: rotate(0deg); transition: transform 0.2s; font-size: 14px; opacity: 0.7; }
  .mbdi:hover > .mbdi-arr, .mbdi:active > .mbdi-arr { transform: rotate(90deg); }

  /* Mobile Sub-menu expansion */
  .mbd-sub {
    position: static; display: none; width: 100%; background: #fff;
    box-shadow: none; border: none; border-left: 4px solid var(--br); margin-top: 10px;
    min-width: unset; border-radius: 0;
  }
  .mbdi:hover > .mbd-sub, .mbdi:active > .mbd-sub { display: block; }
  .mbd-sub .mbdi { padding: 12px 20px 12px 25px; background: transparent; flex-direction: row; align-items: center; }
  
  /* Home icon button stays visible on mobile — compact size */
  .btn-home { display: flex !important; width: 34px !important; height: 34px !important; font-size: 16px !important; }

  /* Compact user info on mobile */
  #user-info { margin-right:8px !important; padding-right:8px !important; gap:6px !important; border-right: none !important; }
  #user-name { font-size:11px !important; max-width:80px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  #user-info button { font-size:10px !important; padding:2px 8px !important; }

  /* App brand name compact */
  .mbl-name { font-size:13px !important; letter-spacing:0.5px !important; }

  /* Login Overlay Mobile */
  .login-box { width: 90%; max-width: 340px; padding: 24px; }

  /* Dashboard Stats Mobile */
  .stat-box { flex-direction: column; align-items: flex-start !important; gap: 8px; }
  .stat-vals { width: 100%; justify-content: flex-end; }

  /* RESPONSIVE TABLES */
  .m-hide { display: none !important; }
  .m-show { display: table-cell !important; }
  
  .res-grid { grid-template-columns: 1fr !important; }

  /* Container for multi-line info in a single cell */
  .m-info-cell { display: flex; flex-direction: column; gap: 1px; line-height: 1.3; padding: 2px 0; }
  .m-badge { 
    display: inline-block; background: #DAE4EE; color: #1A5276; 
    padding: 0px 10px; border-radius: 12px; font-weight: 700; font-size: 11px; 
    margin-bottom: 2px; font-family: 'IBM Plex Mono', monospace; 
    width: fit-content; border: 1px solid rgba(26,82,118,0.1);
  }
  .m-main { font-weight: 700; font-size: 13px; color: var(--txt); }
  .m-sub { font-size: 11px; color: #555; font-weight: 500; }
  .m-sub b { font-weight: 700; color: #333; }
  .m-meta { font-size: 11px; color: #C0392B; font-weight: 600; margin-top: 1px; }

  /* Buttons & Bars */
  .abar { padding: 8px; gap: 6px; }
  .abar .btn { flex: 1; min-width: 130px; justify-content: center; height: 32px; font-size: 12px; }
  .asep { display: none; }
  
  /* Cards & Forms */
  .fgrid { gap: 8px; }
  .fg { margin-bottom: 6px; }
  .slbl { margin: 12px 0 8px; }
  .cb { padding: 12px; }
  
  /* Modal optimization */
  .mod { width: 96%; max-height: 95vh; }
  .mtt { padding: 10px 14px; }
  .mb2 { padding: 12px; }

  /* Print Preview Bar Mobile */
  #ppBar { padding: 8px 10px; gap: 8px; border-bottom: 1px solid #000; }
  .ppbtn { height: 40px !important; padding: 0 14px !important; font-size: 13px !important; display: inline-flex !important; }
  .pptitle { display: none !important; }
  
  /* Form Improvements */
  .fi { height: 36px; font-size: 14px; } /* Larger inputs for touch */
  .btn { height: 34px; padding: 0 16px; font-size: 13px; } /* Larger buttons */
  .sb { height: 36px; font-size: 12px; }
  
  /* Dashboard Card Enhancements */
  .m-dash-grid { gap: 12px; padding: 12px; }
  .m-dash-card { padding: 20px 10px; }
  .m-dash-label { font-size: 13px; }
  
  /* Tables on Mobile */
  .tw { border-radius: 0; }
  .gt th, .gt td { padding: 8px 10px; }
}

/* ─── NATIVE SHARE BUTTON ─── */
.ppbtn-share { background: #6200ee; color: #fff; display: inline-flex; }
@media(max-width:960px) {
    .ppbtn-share { display: inline-flex !important; }
    .ppbtn-print, .ppbtn-csv { display: none !important; }
}
@media(min-width:961px) {
    .ppbtn-share { display: none !important; } /* Hide share on desktop if explicitly requested earlier */
}

.m-show { display: none; }