:root{--bg:#07111f;--panel:#101d33;--panel2:#172943;--text:#f5f8ff;--muted:#9eb0cc;--line:#29415f;--blue:#2878ff;--cyan:#11c7e8;--purple:#8657ff;--green:#18c47d;--orange:#ff9f32;--red:#ff5570}*{box-sizing:border-box}body{margin:0;font-family:Inter,Segoe UI,Arial;background:radial-gradient(circle at 15% 10%,#142d55 0,#07111f 38%),linear-gradient(135deg,#07111f,#0c1830);color:var(--text)}button,input,select,textarea{font:inherit}button{cursor:pointer}.layout{display:flex;min-height:100vh}.side{width:255px;background:linear-gradient(180deg,#0d1b31,#081221);border-right:1px solid #29415f;padding:18px;position:fixed;inset:0 auto 0 0;box-shadow:8px 0 30px #0003}.brand{font-size:22px;font-weight:900;margin:8px 8px 26px;letter-spacing:-.5px}.brand b{color:#fff}.brand span{color:var(--cyan)}.brand small{display:block;color:#7186a6;font-size:9px;letter-spacing:3px;margin-top:3px}.nav button{display:block;width:100%;border:1px solid transparent;background:transparent;color:#b9c9e3;text-align:left;padding:12px;border-radius:11px;margin:4px 0;transition:.2s}.nav button.active,.nav button:hover{background:linear-gradient(90deg,#1b5ed6,#4b2cc9);color:#fff;border-color:#4f8cff55;box-shadow:0 7px 20px #2469ff33}.main{margin-left:255px;padding:26px;width:calc(100% - 255px)}.top{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px;gap:12px}.top h1{margin:0;font-size:29px}.sub{color:var(--muted);font-size:13px}.topActions{display:flex;gap:8px;flex-wrap:wrap}.cards{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;margin-bottom:20px}.clickableCard{width:100%;text-align:left;color:inherit;cursor:pointer;transition:.2s}.clickableCard:hover{transform:translateY(-3px);border-color:#5f8cff;box-shadow:0 14px 34px #2469ff33}.clickableCard small{display:block;color:var(--muted);font-size:11px;margin-top:7px}.card{background:linear-gradient(145deg,#12233d,#0e1a2f);border:1px solid var(--line);padding:18px;border-radius:16px;position:relative;overflow:hidden;box-shadow:0 10px 30px #0002}.card:before{content:"";position:absolute;inset:0 auto 0 0;width:4px;background:var(--blue)}.card.green:before{background:var(--green)}.card.purple:before{background:var(--purple)}.card.orange:before{background:var(--orange)}.card.red:before{background:var(--red)}.card.expiryTotal:before{background:#ff3b81}.card .label{color:var(--muted);font-size:13px}.card .value{font-size:26px;font-weight:900;margin-top:8px}.expiryCards{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:0 0 20px}.expiryCard{border:1px solid var(--line);border-radius:16px;padding:16px 18px;text-align:left;color:#fff;background:linear-gradient(135deg,#132b4a,#102039);box-shadow:0 10px 28px #0002;transition:.2s;display:flex;flex-direction:column;gap:5px}.expiryCard:hover{transform:translateY(-2px);border-color:#5f8cff;box-shadow:0 14px 32px #2469ff33}.expiryCard span{font-weight:800;font-size:15px}.expiryCard b{font-size:30px}.expiryCard small{color:var(--muted)}.expiryCard.today{background:linear-gradient(135deg,#4b2030,#20233f)}.expiryCard.week{background:linear-gradient(135deg,#173d55,#252052)}.quickPanel{display:flex;align-items:center;justify-content:space-between;background:linear-gradient(100deg,#173c7c,#452c9e);border:1px solid #5f7dff77;padding:17px 20px;border-radius:16px;margin-bottom:20px;box-shadow:0 10px 30px #245aff22}.quickPanel span{display:block;color:#cbd8ff;font-size:12px;margin-top:4px}.grid{display:grid;grid-template-columns:1.3fr .7fr;gap:18px}.panel{background:rgba(16,29,51,.96);border:1px solid var(--line);border-radius:16px;padding:18px;margin-bottom:18px;box-shadow:0 8px 25px #0002}.panel h3{margin:0 0 15px}.toolbar,.reportActions{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:15px}.input,.select,.textarea{background:#0b1729;border:1px solid #345170;color:#fff;border-radius:10px;padding:10px 12px;outline:none}.input:focus,.select:focus{border-color:#4d8cff;box-shadow:0 0 0 3px #357dff1c}.search{min-width:280px;flex:1}.btn{border:0;border-radius:10px;padding:10px 14px;background:linear-gradient(135deg,#347fff,#6b4cff);color:#fff;font-weight:800;box-shadow:0 6px 18px #286cff25}.btn.quick{background:linear-gradient(135deg,#00b9d8,#176bff)}.btn.secondary{background:#263b58}.btn.good{background:linear-gradient(135deg,#0bbf79,#18a86e)}.btn.danger{background:linear-gradient(135deg,#ff5570,#d93355)}.mini{border:1px solid #3b5a7b;background:#152943;color:#dce9ff;padding:6px 9px;border-radius:7px;font-size:12px}.mini:hover{background:#1d3d63}table{width:100%;border-collapse:collapse}th,td{padding:11px 9px;border-bottom:1px solid #263d59;text-align:left;font-size:13px}th{color:#9eafd0;font-weight:700}tbody tr:hover{background:#ffffff06}.pill{padding:4px 9px;border-radius:999px;font-size:11px;font-weight:700}.active{background:#0d7c4d33;color:#54e6a1}.off{background:#ff55701c;color:#ff8799}.modal{position:fixed;inset:0;background:#000a;display:flex;align-items:center;justify-content:center;padding:20px;z-index:5}.modalbox{background:linear-gradient(145deg,#14243e,#0d182b);border:1px solid #3a5576;border-radius:18px;padding:22px;width:min(720px,100%);max-height:90vh;overflow:auto;box-shadow:0 30px 80px #0008}.formgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.full{grid-column:1/-1}.empty{padding:30px;text-align:center;color:var(--muted)}.amountHint{color:#65d9ff;font-weight:800;margin-bottom:14px}.quickCollect{background:#0d1d34;border:1px solid #2c4b70;padding:15px;border-radius:12px}.linkNote{margin-top:10px;padding:10px 12px;border-radius:10px;background:#0b1c31;border:1px solid #2c4b70;color:#9fc2e8;font-size:12px}@media(max-width:1100px){.cards{grid-template-columns:repeat(2,1fr)}.grid{grid-template-columns:1fr}.side{width:78px}.brand{font-size:0;text-align:center}.brand span{font-size:20px}.brand small{font-size:7px}.nav button{font-size:0;text-align:center}.nav button:first-letter{font-size:20px}.main{margin-left:78px;width:calc(100% - 78px)}}@media(max-width:650px){.expiryCards{grid-template-columns:1fr}.main{padding:14px}.cards{grid-template-columns:1fr 1fr}.formgrid{grid-template-columns:1fr}.full{grid-column:auto}.top{align-items:flex-start;flex-direction:column}.topActions{width:100%}.topActions .btn{flex:1}.search{min-width:100%}.panel{overflow:auto}}
.openingBox{display:flex;flex-direction:column;gap:6px;padding:12px 14px;border:1px solid rgba(59,130,246,.35);border-radius:12px;background:rgba(37,99,235,.08)}
.openingBox small{color:#8ea7c8;font-size:12px}

.dangerMini{border-color:#ff557066;background:#3a1722;color:#ff9aaa}.dangerMini:hover{background:#5a1d2c;border-color:#ff5570}
.permGrid{display:grid;grid-template-columns:repeat(3,minmax(180px,1fr));gap:10px;margin-top:12px;padding:14px;border:1px solid #263b5c;border-radius:12px;background:#0b1930}.check{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:8px;background:#12233e;color:#dbe8ff}.check input{accent-color:#4f7cff;transform:scale(1.1)}
@media(max-width:800px){.permGrid{grid-template-columns:1fr 1fr}}
.reportList{display:grid;gap:12px;margin-top:18px}.reportRow{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:14px 16px;border:1px solid rgba(255,255,255,.09);border-radius:14px;background:rgba(255,255,255,.025)}.reportRow span{display:flex;gap:8px;flex-wrap:wrap}.fieldLabel{display:flex;flex-direction:column;gap:7px;font-weight:700;font-size:13px;color:#cbd5e1}.fieldLabel .input{font-weight:400}

/* v16 dashboard expiry popup improvements */
.modalbox.expiryPopup{width:min(1100px,96vw);max-width:1100px;}
.expiryTableWrap{overflow:auto;max-height:62vh;border:1px solid var(--line);border-radius:12px;}
.expiryPopupTable{min-width:980px;}
.expiryPopupTable th,.expiryPopupTable td{padding:13px 11px;}
.payMini{background:linear-gradient(135deg,#0bbf79,#087d5a);border-color:#25d99a;color:#fff;font-weight:800;}

.loginPage{min-height:100vh;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;background:radial-gradient(circle at 20% 20%,#173e78 0,#07111f 38%),linear-gradient(135deg,#06101d,#111b3a)}.loginGlow{position:absolute;width:520px;height:520px;border-radius:50%;background:#286dff22;filter:blur(30px);top:-180px;right:-120px}.loginCard{position:relative;width:min(430px,92vw);padding:36px;border:1px solid #38557a;background:rgba(10,24,43,.94);border-radius:24px;box-shadow:0 25px 80px #0008;text-align:center}.loginLogo{height:64px;display:flex;justify-content:center;align-items:center;margin-bottom:12px}.loginLogo img{max-height:64px;max-width:150px;object-fit:contain}.loginLogoMark{width:58px;height:58px;border-radius:17px;display:grid;place-items:center;background:linear-gradient(135deg,#2878ff,#8657ff);font-weight:1000;font-size:20px;box-shadow:0 12px 30px #2878ff55}.loginCard h1{font-size:28px;margin:5px 0 7px}.loginCard h1 span{color:#49d7ff}.loginCard>p{margin:0 0 25px;color:#9eb0cc;font-size:13px}.loginForm{text-align:left;display:grid;gap:9px}.loginForm label{font-size:12px;color:#b9c9e3;margin-top:5px}.loginBtn{width:100%;margin-top:10px;background:linear-gradient(90deg,#2878ff,#7049e8);font-weight:800;padding:13px}.loginHint{text-align:center;color:#7389a8;font-size:11px;margin-top:8px}.loginHint b{color:#dbe8ff}.sideUser{position:absolute;left:18px;right:18px;bottom:18px;border-top:1px solid #29415f;padding:14px 6px 0}.sideUser b,.sideUser small{display:block}.sideUser small{color:#7890b1;font-size:10px;margin-top:3px}.logoutBtn{width:100%;margin-top:10px;border:1px solid #36516f;background:#0d1b2d;color:#c5d5ec;padding:8px;border-radius:9px}.logoutBtn:hover{border-color:#6c83a8;color:#fff}
.invoiceMini{background:linear-gradient(135deg,#7c4dff,#b43cff);border-color:#a477ff;color:#fff;font-weight:800}.invoiceActions{margin-top:16px}.invoicePreview{display:flex;justify-content:center;background:#0a1525;border:1px solid #2b4668;border-radius:14px;padding:18px;overflow:auto}.invoicePaper{background:#fff;color:#111;padding:4mm;min-width:58mm;max-width:80mm;box-shadow:0 12px 30px #0006}.invoicePaper .receipt{width:58mm!important}.invoicePaper .noPrint{display:none}

/* Final UI corrections */
.nav{overflow-y:auto;max-height:calc(100vh - 185px);padding-right:4px;scrollbar-width:thin}.nav::-webkit-scrollbar{width:5px}.nav::-webkit-scrollbar-thumb{background:#29496d;border-radius:8px}.sideUser{background:linear-gradient(180deg,#0d1b31,#081221);z-index:2}.brand b{display:block;line-height:1.15}.loginBrand{display:flex;flex-direction:column;gap:2px;align-items:center;line-height:1}.loginBrand strong{font-size:42px;letter-spacing:1px;background:linear-gradient(90deg,#fff,#49d7ff);-webkit-background-clip:text;background-clip:text;color:transparent}.loginBrand span{font-size:18px;letter-spacing:.5px;color:#49d7ff;font-weight:800}.invoiceShareNote{margin:4px 2px 0;padding:9px 11px;border:1px solid #29415f;border-radius:10px;background:#0b1729}.invoicePaper .row{display:flex;justify-content:space-between;gap:10px;margin:2px 0}.invoicePaper .row span{color:#555}.invoicePaper .row b{text-align:right;white-space:nowrap}@media(max-width:650px){.nav{max-height:calc(100vh - 170px)}}

.invoicePaper .receipt{width:58mm;padding:4mm 3mm;font-size:11px;line-height:1.35;background:#fff;color:#111;font-family:Arial,sans-serif}.invoicePaper .logo{max-width:34mm;max-height:14mm;object-fit:contain;display:block;margin:0 auto 2mm}.invoicePaper .center{text-align:center}.invoicePaper .title{font-size:15px;font-weight:800}.invoicePaper .sub{font-size:9px;color:#444}.invoicePaper .line{border-top:1px dashed #222;margin:2.5mm 0}.invoicePaper .total{font-size:14px;font-weight:900}.invoicePaper .thanks{text-align:center;margin-top:4mm;font-size:10px}

/* Sidebar navigation fix: keep the operator footer visible and make the menu itself scrollable. */
.side{
  display:flex;
  flex-direction:column;
  height:100vh;
  min-height:0;
  overflow:hidden;
}
.side .brand{flex:0 0 auto}
.side .nav{
  flex:1 1 auto;
  min-height:0;
  max-height:none;
  overflow-y:auto;
  overflow-x:hidden;
  padding-right:6px;
  overscroll-behavior-y:contain;
  scrollbar-width:thin;
  scrollbar-color:#36577f transparent;
}
.side .nav::-webkit-scrollbar{width:7px}
.side .nav::-webkit-scrollbar-track{background:transparent}
.side .nav::-webkit-scrollbar-thumb{background:#36577f;border-radius:10px}
.side .nav::-webkit-scrollbar-thumb:hover{background:#4f76a5}
.side .sideUser{
  position:static;
  flex:0 0 auto;
  margin-top:10px;
  padding:14px 6px 0;
}
@media(max-width:1100px){
  .side .nav{padding-right:3px}
  .side .sideUser{left:auto;right:auto}
}

/* Final mobile responsive layout */
.mobileMenu,.sideOverlay{display:none}
@media(max-width:700px){
  body{overflow-x:hidden}
  .layout{min-height:100dvh}
  .side{width:280px;max-width:86vw;transform:translateX(-105%);transition:transform .25s ease;z-index:20;padding:16px;box-shadow:12px 0 35px #0008}
  .layout.mobileOpen .side{transform:translateX(0)}
  .layout.mobileOpen .sideOverlay{display:block;position:fixed;inset:0;background:#0009;z-index:19}
  .mobileMenu{display:flex;position:fixed;left:12px;top:12px;z-index:18;width:44px;height:44px;border:1px solid #3b5a7b;border-radius:12px;background:#12233d;color:#fff;align-items:center;justify-content:center;font-size:22px;box-shadow:0 8px 22px #0005}
  .main{margin-left:0;width:100%;padding:68px 12px 18px}
  .top{gap:10px}
  .top h1{font-size:24px}
  .topActions{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .topActions .btn{width:100%;min-height:42px}
  .cards{grid-template-columns:1fr 1fr;gap:10px}
  .card{padding:14px;min-height:112px}
  .card .value{font-size:22px}
  .expiryCards{grid-template-columns:1fr;gap:10px}
  .quickPanel{flex-direction:column;align-items:stretch;gap:12px}
  .quickPanel .topActions{display:grid;grid-template-columns:1fr 1fr}
  .grid{grid-template-columns:1fr}
  .panel{padding:12px;border-radius:13px;overflow-x:auto}
  .toolbar{align-items:stretch}
  .toolbar .input,.toolbar .btn{width:100%}
  .search{min-width:0}
  table{min-width:760px}
  th,td{font-size:12px;padding:9px 7px}
  .modal{padding:10px}
  .modalbox{padding:14px;max-height:94dvh;width:100%;border-radius:14px}
  .formgrid{grid-template-columns:1fr}
  .full{grid-column:auto}
  .loginCard{width:min(94vw,430px);padding:24px 18px}
  .loginBrand strong{font-size:36px}
  .loginBrand span{font-size:16px}
}

/* ===== MOBILE SIDEBAR READABLE FIX ===== */
@media (max-width: 760px){

  .side{
    width:280px !important;
    min-width:280px !important;
    padding:18px 12px !important;
    overflow-y:auto !important;
    z-index:1001 !important;
  }

  .side .brand{
    padding:10px 12px 18px !important;
    text-align:left !important;
  }

  .side .brand b{
    display:block !important;
    font-size:17px !important;
    line-height:1.3 !important;
    white-space:normal !important;
  }

  .side .brand small{
    display:block !important;
    margin-top:5px !important;
    font-size:10px !important;
    letter-spacing:2px !important;
  }

  .side .nav{
    display:flex !important;
    flex-direction:column !important;
    gap:6px !important;
    width:100% !important;
  }

  .side .nav button{
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:14px !important;
    width:100% !important;
    min-height:48px !important;
    padding:11px 14px !important;
    border-radius:12px !important;
    font-size:15px !important;
    font-weight:600 !important;
    text-align:left !important;
    white-space:nowrap !important;
    overflow:visible !important;
  }

  .side .nav button::first-letter{
    font-size:20px;
  }

  .side .nav button.active{
    background:linear-gradient(90deg,#2563eb,#4f46e5) !important;
    color:#fff !important;
  }

  .sideUser{
    margin-top:18px !important;
    padding:16px 12px !important;
  }

  .sideUser b{
    display:block !important;
    font-size:16px !important;
  }

  .sideUser small{
    display:block !important;
    margin-top:4px !important;
    font-size:13px !important;
  }

  .logoutBtn{
    margin-top:12px !important;
    width:100% !important;
  }

  .mobileMenu{
    display:flex !important;
    position:fixed !important;
    top:12px !important;
    left:12px !important;
    z-index:1100 !important;
    width:44px !important;
    height:44px !important;
    align-items:center !important;
    justify-content:center !important;
    border-radius:12px !important;
  }

  .sideOverlay{
    z-index:1000 !important;
  }

  .layout.mobileOpen .sideOverlay{
    display:block !important;
  }
}

/* Keep sidebar readable on slightly larger screens too */
@media (min-width:761px) and (max-width:1100px){
  .side{
    width:240px !important;
  }

  .side .nav button{
    display:flex !important;
    align-items:center !important;
    gap:10px !important;
    font-size:14px !important;
    padding:10px 12px !important;
  }
}


/* ===== MOBILE SIDEBAR USER / LOGOUT FIX ===== */
@media (max-width:760px){

  .side{
    display:flex !important;
    flex-direction:column !important;
    height:100vh !important;
    height:100dvh !important;
    box-sizing:border-box !important;
  }

  .side .nav{
    flex:1 1 auto !important;
    overflow-y:auto !important;
    min-height:0 !important;
    padding-bottom:8px !important;
  }

  .sideUser{
    flex:0 0 auto !important;
    margin-top:6px !important;
    padding:10px 12px !important;
    border-top:1px solid rgba(255,255,255,.12) !important;
    background:rgba(15,30,50,.96) !important;
  }

  .sideUser b{
    font-size:15px !important;
  }

  .sideUser small{
    font-size:12px !important;
  }

  .logoutBtn{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:100% !important;
    min-height:38px !important;
    margin-top:7px !important;
    padding:8px 12px !important;
    font-size:14px !important;
  }

}