/* MIK N-MOBILE - dashboard AZROPOTO inspired palette */
html, body { background: linear-gradient(135deg,#111d55 0%,#243a91 52%,#17266a 100%) !important; color:#f5f7ff !important; }
body, #main, .content-wrapper, .container, .container-fluid, .content { background: transparent !important; }
.navbar, .navbar-default, .main-header, .main-sidebar, .sidebar { background:linear-gradient(110deg,#15234f,#293f91 55%,#1b2d71) !important; color:#fff !important; }
.box, .box-bordered, .panel, .well { border-radius:18px !important; border:1px solid rgba(180,200,255,.24) !important; box-shadow:0 8px 24px rgba(4,10,45,.22) !important; }
.box.bg-blue, .bg-blue { background:linear-gradient(135deg,#2f9ab5,#207aa0) !important; color:#fff !important; }
.box.bg-green, .bg-green { background:linear-gradient(135deg,#51a96d,#278447) !important; color:#fff !important; }
.box.bg-yellow, .bg-yellow { background:linear-gradient(135deg,#e1bf43,#b98a18) !important; color:#fff !important; }
.box.bg-red, .bg-red { background:linear-gradient(135deg,#d45e60,#a9343b) !important; color:#fff !important; }
.box-group, .box-group-area, .box-group-icon, .box-header, .box-title { color:#f8f9ff !important; }
.box-header { background:linear-gradient(110deg,#101b45,#203b91 70%,#2d51bd) !important; border-radius:16px 16px 0 0 !important; }
/* Removed generic card background override: it masked the randomized router palette. */
a, .navbar a, .sidebar a { color:#f6f7ff !important; }


/* ================================================================
   N-MOBILE responsive polish — reference: AZROPO blue/violet screens
   Scroll containers are deliberately two-axis and touch friendly.
   ================================================================ */
:root{
  --nm-navy:#17245d; --nm-royal:#344aa5; --nm-violet:#6542a0;
  --nm-glass:rgba(107,125,196,.34); --nm-border:rgba(190,207,255,.30);
}
html,body{min-height:100%;height:auto;overflow-y:auto!important;overscroll-behavior-y:contain}
body{-webkit-overflow-scrolling:touch;touch-action:pan-x pan-y}
.wrapper,#main,.content-wrapper,.content,.container,.container-fluid{height:auto!important;min-height:0;overflow:visible!important}
/* The original Mikhmon .overflow class wraps report, user and voucher tables. */
.overflow{
  display:block!important; width:100%; max-width:100%;
  max-height:75vh; overflow:auto!important;
  overflow-x:auto!important; overflow-y:auto!important;
  -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
  scrollbar-width:thin; scrollbar-color:rgba(125,190,255,.72) rgba(16,31,82,.35);
  border-radius:12px;
}
.overflow::-webkit-scrollbar{width:7px;height:7px}
.overflow::-webkit-scrollbar-track{background:rgba(16,31,82,.35);border-radius:8px}
.overflow::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#36c5e8,#7657d8);border-radius:8px}
.overflow>table,.overflow table{width:max-content!important;min-width:100%!important;max-width:none!important;margin-bottom:0!important}
.overflow table th,.overflow table td{white-space:nowrap}
/* Report and voucher lists: swipe horizontally for columns, vertically for rows. */
#dataTable{min-width:760px!important;width:max-content!important}
#dataTable thead th{position:sticky;top:0;z-index:3;background:linear-gradient(110deg,#15245e,#304ca9)!important}
/* Profile cards use a shuffled PHP palette on every page refresh. */
.box-bordered.bg-blue,.bg-blue{background:linear-gradient(135deg,#278da9,#216a9e)!important;color:#fff!important}
.box-bordered.bg-indigo,.bg-indigo{background:linear-gradient(135deg,#5142a0,#343b91)!important;color:#fff!important}
.box-bordered.bg-purple,.bg-purple{background:linear-gradient(135deg,#75419b,#4c347f)!important;color:#fff!important}
.box-bordered.bg-pink,.bg-pink{background:linear-gradient(135deg,#bd3e83,#8e326d)!important;color:#fff!important}
.box-bordered.bg-red,.bg-red{background:linear-gradient(135deg,#c65a59,#963e4b)!important;color:#fff!important}
.box-bordered.bg-yellow,.bg-yellow{background:linear-gradient(135deg,#c69d35,#a97821)!important;color:#fff!important}
.box-bordered.bg-green,.bg-green{background:linear-gradient(135deg,#399d75,#247d69)!important;color:#fff!important}
.box-bordered.bg-teal,.bg-teal{background:linear-gradient(135deg,#238f91,#176e7c)!important;color:#fff!important}
.box-bordered.bg-cyan,.bg-cyan{background:linear-gradient(135deg,#269db8,#267b9f)!important;color:#fff!important}
.box-bordered.bg-grey,.bg-grey{background:linear-gradient(135deg,#8796a4,#657687)!important;color:#fff!important}
.box-bordered.bg-light-blue,.bg-light-blue{background:linear-gradient(135deg,#4c9fbe,#397caa)!important;color:#fff!important}
.box-bordered[class*="bg-"]{border:1px solid rgba(220,232,255,.26)!important;box-shadow:0 8px 20px rgba(5,13,48,.20)!important}
/* Preserve the compact card layout while making controls usable on phones. */
.card,.box,.box-bordered,.panel{max-width:100%;min-width:0}
.card-body,.box-body,.panel-body{min-width:0}
input,select,textarea,.form-control{max-width:100%;min-width:0}
@media(max-width:767px){
  html,body{width:100%;min-width:320px;overflow-x:auto!important;overflow-y:auto!important}
  #main,.wrapper,.content-wrapper,.content,.container,.container-fluid{width:100%!important;max-width:100%!important}
  .overflow{max-height:72vh!important;max-width:100%!important}
  .overflow table{min-width:760px!important}
  #dataTable{min-width:760px!important}
  .card-body>.row{margin-left:-5px;margin-right:-5px}
  .box-group-area{overflow-wrap:anywhere}
  .input-group{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .btn{white-space:normal;line-height:1.25}
}
@media(max-width:420px){
  .overflow{max-height:68vh!important}
  .overflow table,#dataTable{min-width:720px!important}
}


/* N-MOBILE Sales summary — replacement for the old Income box */
.nm-sales-column{width:100%!important;max-width:100%!important;flex:0 0 100%!important;padding-left:10px!important;padding-right:10px!important;}
.nm-sales-row{display:block!important;width:100%!important;margin:0!important;padding:0!important;}
.nm-sales-panel{display:block;width:100%;box-sizing:border-box;padding:24px 24px 22px;border:2px solid rgba(69,211,255,.78);border-radius:30px;background:radial-gradient(ellipse at 8% 0%,rgba(28,163,255,.38),transparent 42%),linear-gradient(135deg,#0752c8 0%,#07358f 48%,#102c79 100%);box-shadow:0 12px 28px rgba(0,20,95,.34),inset 0 1px 0 rgba(255,255,255,.24);overflow:hidden;}
.nm-sales-heading{display:flex;align-items:center;gap:20px;margin:0 0 20px;color:#fff;}
.nm-sales-heading-icon{width:82px;height:82px;flex:0 0 82px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:39px;background:linear-gradient(145deg,#20baff,#0750c9 72%);border:3px solid rgba(83,221,255,.9);box-shadow:0 0 18px rgba(45,195,255,.55),inset 0 0 12px rgba(255,255,255,.2);}
.nm-sales-heading-copy{border-left:2px solid rgba(255,255,255,.65);padding-left:20px;}
.nm-sales-heading-copy h2{margin:0;color:#fff;font-size:clamp(30px,4vw,48px);line-height:1.05;font-weight:800;letter-spacing:.2px;}
.nm-sales-heading-copy p{margin:7px 0 0;color:#d4e7ff;font-size:clamp(12px,1.7vw,20px);font-weight:800;letter-spacing:5px;}
.nm-sales-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;}
.nm-sales-card{min-width:0;min-height:150px;box-sizing:border-box;display:flex;align-items:center;gap:16px;padding:20px 22px;border-radius:25px;background:linear-gradient(135deg,#f7fbff,#d9eaff);border:1px solid rgba(255,255,255,.95);box-shadow:0 8px 18px rgba(0,22,90,.20);color:#153c82;}
.nm-sales-month{background:linear-gradient(135deg,#effff7,#c8f9df);color:#087b4b;}
.nm-sales-icon{width:84px;height:84px;flex:0 0 84px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(28,102,229,.09);color:#1554d5;font-size:39px;}
.nm-sales-month .nm-sales-icon{background:rgba(0,173,100,.10);color:#08a85f;}
.nm-sales-content{min-width:0;flex:1;border-left:2px solid rgba(35,102,204,.24);padding-left:18px;}
.nm-sales-month .nm-sales-content{border-left-color:rgba(0,160,93,.25);}
.nm-sales-label{font-size:clamp(12px,1.5vw,18px);font-weight:800;letter-spacing:3px;color:#65758d;line-height:1.3;}
.nm-sales-month .nm-sales-label{color:#4e8870;}
.nm-sales-count{margin:4px 0 10px;font-size:clamp(17px,2vw,25px);font-weight:800;color:#173c7a;}
.nm-sales-month .nm-sales-count{color:#08764b;}
.nm-sales-amount{display:block;width:100%;box-sizing:border-box;padding:8px 12px;border-radius:15px;background:linear-gradient(100deg,#1767ed,#0648c8);color:#fff;text-align:center;font-size:clamp(17px,2.1vw,28px);font-weight:900;line-height:1.2;white-space:normal;overflow-wrap:anywhere;box-shadow:0 5px 12px rgba(0,70,190,.22);}
.nm-sales-month .nm-sales-amount{background:linear-gradient(100deg,#11b96c,#008c50);box-shadow:0 5px 12px rgba(0,150,85,.20);}
.nm-sales-loading{padding:24px;color:#fff;text-align:center;font-size:16px;}
@media(max-width:650px){.nm-sales-panel{padding:17px 14px;border-radius:22px}.nm-sales-heading{gap:13px;margin-bottom:15px}.nm-sales-heading-icon{width:62px;height:62px;flex-basis:62px;font-size:29px}.nm-sales-heading-copy{padding-left:13px}.nm-sales-heading-copy h2{font-size:32px}.nm-sales-heading-copy p{font-size:11px;letter-spacing:3px}.nm-sales-grid{grid-template-columns:1fr;gap:12px}.nm-sales-card{min-height:116px;padding:14px 13px;border-radius:19px;gap:12px}.nm-sales-icon{width:62px;height:62px;flex-basis:62px;font-size:29px}.nm-sales-content{padding-left:12px}.nm-sales-label{font-size:12px;letter-spacing:2px}.nm-sales-count{font-size:17px;margin:3px 0 7px}.nm-sales-amount{font-size:18px;padding:8px 9px;border-radius:12px}}
@media(min-width:651px) and (max-width:900px){.nm-sales-panel{padding:18px}.nm-sales-card{padding:14px;gap:10px}.nm-sales-icon{width:65px;height:65px;flex-basis:65px;font-size:30px}.nm-sales-content{padding-left:12px}.nm-sales-label{letter-spacing:2px}.nm-sales-amount{font-size:19px}}


/* ==========================================================
   N-MOBILE V6 — GLOBAL MOBILE PAGE SCROLL FIX
   Keep the document as the vertical scroll surface. Tables keep
   their own two-axis swipe area through .overflow.
   ========================================================== */
html{
  display:block!important;
  height:auto!important;
  min-height:100%!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  -webkit-text-size-adjust:100%;
  overscroll-behavior-y:auto!important;
}
body{
  display:block!important;
  position:relative!important;
  height:auto!important;
  min-height:100vh!important;
  min-height:100dvh!important;
  max-height:none!important;
  overflow-x:hidden!important;
  overflow-y:visible!important;
  touch-action:pan-y pan-x!important;
  -webkit-overflow-scrolling:touch!important;
  overscroll-behavior-y:auto!important;
}
.wrapper,
#main,
.main-container,
.content-wrapper,
.content,
.container,
.container-fluid,
.row{
  height:auto!important;
  max-height:none!important;
  min-height:0!important;
  overflow:visible!important;
}
.wrapper{min-height:100vh!important;min-height:100dvh!important;}
#main{position:relative!important;display:block!important;width:100%!important;}
.main-container{display:block!important;width:100%!important;}
/* The navigation stays fixed; it must not become the page scroll area. */
.navbar{
  position:fixed!important;
  top:0!important;
  left:0!important;
  right:0!important;
  z-index:1000!important;
}
/* Make sure dashboard sections can extend the document height. */
#main > *, .main-container > *, .content > *{
  max-height:none;
}
/* Do not clip the Ventes panel or other dashboard cards. */
.nm-sales-column,.nm-sales-row,.nm-sales-panel{
  max-height:none!important;
}
/* Scrollable report/voucher tables remain independently swipeable. */
.overflow{
  max-height:72vh!important;
  overflow:auto!important;
  overflow-x:auto!important;
  overflow-y:auto!important;
  -webkit-overflow-scrolling:touch!important;
  touch-action:pan-x pan-y!important;
}
@media(max-width:767px){
  html{overflow-x:hidden!important;overflow-y:auto!important;}
  body{width:100%!important;min-width:320px!important;overflow-x:hidden!important;overflow-y:visible!important;}
  .wrapper,#main,.main-container,.content-wrapper,.content,.container,.container-fluid{
    width:100%!important;max-width:100%!important;overflow:visible!important;
  }
  .overflow{max-height:70vh!important;overflow:auto!important;}
}


/* ==========================================================
   N-MOBILE V7 — COMPACT SALES PANEL FOR PHONE
   Match the supplied reference: compact title + two side-by-side
   revenue cards, without changing PHP calculations or other cards.
   ========================================================== */
.nm-sales-column{
  width:100%!important;max-width:100%!important;
  flex:0 0 100%!important;min-width:0!important;
}
.nm-sales-row{width:100%!important;max-width:100%!important;min-width:0!important;}
.nm-sales-panel{max-width:100%!important;min-width:0!important;}
.nm-sales-grid{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:clamp(8px,1.5vw,18px)!important;
  width:100%!important;
  min-width:0!important;
}
.nm-sales-card{
  display:flex!important;
  flex-direction:row!important;
  align-items:center!important;
  min-width:0!important;
  min-height:0!important;
  padding:clamp(8px,1.4vw,20px)!important;
  gap:clamp(7px,1.2vw,16px)!important;
  border-radius:clamp(14px,2vw,25px)!important;
}
.nm-sales-icon{
  width:clamp(34px,7vw,84px)!important;
  height:clamp(34px,7vw,84px)!important;
  flex:0 0 clamp(34px,7vw,84px)!important;
  font-size:clamp(17px,3.2vw,39px)!important;
}
.nm-sales-content{
  flex:1 1 auto!important;
  min-width:0!important;
  padding-left:clamp(7px,1.3vw,18px)!important;
}
.nm-sales-label{
  font-size:clamp(8px,1.55vw,18px)!important;
  letter-spacing:clamp(.5px,.35vw,3px)!important;
  line-height:1.25!important;
  white-space:normal!important;
}
.nm-sales-count{
  font-size:clamp(11px,1.8vw,25px)!important;
  line-height:1.25!important;
  margin:3px 0 6px!important;
  white-space:normal!important;
}
.nm-sales-amount{
  width:100%!important;
  min-width:0!important;
  padding:clamp(5px,.9vw,8px) clamp(4px,.8vw,12px)!important;
  border-radius:clamp(8px,1.2vw,15px)!important;
  font-size:clamp(9px,1.9vw,28px)!important;
  line-height:1.2!important;
  white-space:normal!important;
  overflow-wrap:anywhere!important;
  word-break:normal!important;
}
@media(max-width:767px){
  .nm-sales-panel{
    padding:12px 10px!important;
    border-radius:20px!important;
    overflow:hidden!important;
  }
  .nm-sales-heading{
    gap:10px!important;
    margin:0 0 12px!important;
  }
  .nm-sales-heading-icon{
    width:48px!important;height:48px!important;flex:0 0 48px!important;
    font-size:22px!important;border-width:2px!important;
  }
  .nm-sales-heading-copy{padding-left:10px!important;}
  .nm-sales-heading-copy h2{
    font-size:clamp(21px,5vw,30px)!important;
    line-height:1.05!important;margin:0!important;
  }
  .nm-sales-heading-copy p{
    margin:4px 0 0!important;
    font-size:9px!important;letter-spacing:2px!important;
  }
  .nm-sales-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
  }
  .nm-sales-card{
    min-height:100px!important;
    padding:9px 7px!important;
    gap:7px!important;
    border-radius:16px!important;
  }
  .nm-sales-icon{
    width:34px!important;height:34px!important;flex:0 0 34px!important;
    font-size:17px!important;
  }
  .nm-sales-content{
    padding-left:7px!important;
    border-left-width:1px!important;
  }
  .nm-sales-label{
    font-size:8px!important;letter-spacing:.7px!important;
    line-height:1.2!important;
  }
  .nm-sales-count{
    font-size:12px!important;margin:3px 0 6px!important;
    line-height:1.2!important;
  }
  .nm-sales-amount{
    font-size:clamp(9px,2.8vw,13px)!important;
    padding:6px 4px!important;border-radius:9px!important;
    line-height:1.15!important;
  }
}
@media(max-width:360px){
  .nm-sales-panel{padding:10px 7px!important}
  .nm-sales-grid{gap:6px!important}
  .nm-sales-card{padding:7px 5px!important;gap:5px!important;min-height:92px!important}
  .nm-sales-icon{width:29px!important;height:29px!important;flex-basis:29px!important;font-size:15px!important}
  .nm-sales-content{padding-left:5px!important}
  .nm-sales-label{font-size:7px!important;letter-spacing:.4px!important}
  .nm-sales-count{font-size:10px!important}
  .nm-sales-amount{font-size:9px!important;padding:5px 2px!important}
}


/* ==========================================================
   N-MOBILE V8 — PHONE WIDTH FIT: SALES + HOTSPOT LOG
   No horizontal page/table scroll for the dashboard log.
   ========================================================== */
@media(max-width:767px){
  html,body{max-width:100%!important;overflow-x:hidden!important;}
  #reloadHome,#r_3,#r_4,.nm-sales-column,.nm-sales-row,
  #r_3 .card,#r_3 .card-body,#r_4 .nm-sales-panel{
    box-sizing:border-box!important;
    width:100%!important;max-width:100%!important;min-width:0!important;
    margin-left:0!important;margin-right:0!important;
  }
  .nm-sales-column{padding-left:8px!important;padding-right:8px!important;}
  .nm-sales-row{padding:0!important;}
  .nm-sales-panel{
    padding:12px 10px!important;
    overflow:hidden!important;
    border-radius:18px!important;
  }
  .nm-sales-heading{gap:9px!important;margin-bottom:10px!important;}
  .nm-sales-heading-icon{width:44px!important;height:44px!important;flex:0 0 44px!important;font-size:20px!important;}
  .nm-sales-heading-copy{padding-left:9px!important;}
  .nm-sales-heading-copy h2{font-size:25px!important;line-height:1.05!important;}
  .nm-sales-heading-copy p{font-size:8px!important;letter-spacing:2px!important;margin-top:3px!important;}
  .nm-sales-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:7px!important;width:100%!important;}
  .nm-sales-card{min-width:0!important;width:100%!important;min-height:88px!important;padding:7px 6px!important;gap:5px!important;border-radius:13px!important;}
  .nm-sales-icon{width:29px!important;height:29px!important;flex:0 0 29px!important;font-size:14px!important;}
  .nm-sales-content{min-width:0!important;padding-left:5px!important;border-left-width:1px!important;}
  .nm-sales-label{font-size:7px!important;letter-spacing:.35px!important;line-height:1.2!important;}
  .nm-sales-count{font-size:10px!important;line-height:1.2!important;margin:3px 0 5px!important;}
  .nm-sales-amount{
    display:block!important;width:100%!important;min-width:0!important;
    box-sizing:border-box!important;padding:5px 2px!important;
    font-size:clamp(8px,2.35vw,12px)!important;line-height:1.15!important;
    white-space:normal!important;overflow-wrap:anywhere!important;word-break:normal!important;
    text-align:center!important;
  }

  /* Dashboard Hotspot Log: keep all three columns inside phone width. */
  #r_3 .card{overflow:hidden!important;border-radius:16px!important;}
  #r_3 .card-body{padding:8px!important;overflow:hidden!important;}
  #r_3 .overflow{
    box-sizing:border-box!important;width:100%!important;max-width:100%!important;
    min-width:0!important;height:auto!important;max-height:58vh!important;
    overflow-y:auto!important;overflow-x:hidden!important;
    padding:4px!important;-webkit-overflow-scrolling:touch!important;
  }
  #r_3 .overflow>table,
  #r_3 .overflow table,
  #r_3 table.table{
    width:100%!important;min-width:0!important;max-width:100%!important;
    table-layout:fixed!important;margin:0!important;font-size:10px!important;
  }
  #r_3 table th,#r_3 table td{
    box-sizing:border-box!important;
    padding:5px 4px!important;
    white-space:normal!important;
    overflow-wrap:anywhere!important;
    word-break:break-word!important;
    font-size:10px!important;line-height:1.25!important;
  }
  #r_3 table th:nth-child(1),#r_3 table td:nth-child(1){width:25%!important;}
  #r_3 table th:nth-child(2),#r_3 table td:nth-child(2){width:34%!important;}
  #r_3 table th:nth-child(3),#r_3 table td:nth-child(3){width:41%!important;}
}
@media(max-width:380px){
  .nm-sales-card{padding:6px 4px!important;gap:4px!important;}
  .nm-sales-icon{width:25px!important;height:25px!important;flex-basis:25px!important;font-size:12px!important;}
  .nm-sales-content{padding-left:4px!important;}
  .nm-sales-label{font-size:6.5px!important;letter-spacing:0!important;}
  .nm-sales-count{font-size:9px!important;}
  .nm-sales-amount{font-size:8px!important;padding:4px 1px!important;}
  #r_3 table th,#r_3 table td{font-size:9px!important;padding:4px 3px!important;}
}