/* =========================================================
   MIKHMON Modern UI - visual layer only
   No PHP/JS functionality is changed.
   ========================================================= */
:root{
  --ui-radius: 14px;
  --ui-radius-sm: 10px;
  --ui-shadow: 0 8px 30px rgba(0,0,0,.10);
  --ui-shadow-hover: 0 12px 36px rgba(0,0,0,.16);
  --ui-accent: #2563eb;
  --ui-accent-2: #06b6d4;
  --ui-border: rgba(127,127,127,.18);
  --ui-glass: rgba(255,255,255,.055);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  letter-spacing:.01em;
}
.wrapper{min-height:100vh}
a{transition:color .18s ease,background .18s ease,transform .18s ease,box-shadow .18s ease}
button,.btn,input,select,textarea{border-radius:var(--ui-radius-sm);transition:.18s ease}
input,select,textarea{
  min-height:38px;
  border:1px solid var(--ui-border);
}
input:focus,select:focus,textarea:focus{
  outline:none;
  border-color:var(--ui-accent);
  box-shadow:0 0 0 3px rgba(37,99,235,.13);
}

/* Top navigation */
#navbar{
  min-height:58px!important;
  padding:0 14px!important;
  border-bottom:1px solid var(--ui-border)!important;
  box-shadow:0 4px 22px rgba(0,0,0,.08)!important;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  position:sticky;
  top:0;
  z-index:1000;
}
#navbar #brand{
  font-weight:800!important;
  letter-spacing:.7px;
  font-size:18px;
  padding:0 14px!important;
}
#navbar #cpage{
  font-weight:650!important;
  opacity:.92;
  padding-left:8px!important;
}
#navbar .navbar-hover{
  border-radius:10px;
  margin:7px 3px;
}
#navbar .navbar-hover:hover,
#navbar #logout:hover{
  background:rgba(127,127,127,.13)!important;
  transform:translateY(-1px);
}
#navbar #logout{
  border-radius:10px;
  padding:8px 11px!important;
}
#navbar select{
  border-radius:9px!important;
  min-height:34px;
}

/* Content / cards */
.content,
.content-wrapper,
.main-content{position:relative}
.card{
  border:1px solid var(--ui-border)!important;
  border-radius:var(--ui-radius)!important;
  overflow:hidden;
  box-shadow:var(--ui-shadow)!important;
  margin-bottom:18px;
}
.card-header{
  border-bottom:1px solid var(--ui-border)!important;
  padding:14px 18px!important;
}
.card-header h3,.card-header h4{
  margin:0!important;
  font-weight:750!important;
}
.card-body{padding:16px!important}
.box{
  border:1px solid var(--ui-border)!important;
  border-radius:var(--ui-radius-sm)!important;
  box-shadow:0 5px 20px rgba(0,0,0,.07);
  overflow:hidden;
}
.box:hover{
  box-shadow:var(--ui-shadow-hover);
}
.box-group{min-height:72px}
.box-group-icon{
  border-radius:12px!important;
  margin:10px!important;
}
.box-group-area{padding:10px 12px!important}

/* Dashboard statistic tiles */
#reloadHome .box.bmh-75{
  min-height:78px;
}
#reloadHome .row > [class*="col-"]{margin-bottom:14px}
#reloadHome .box.bg-blue,
#reloadHome .box.bg-green,
#reloadHome .box.bg-red,
#reloadHome .box.bg-yellow{
  border:0!important;
  box-shadow:0 8px 22px rgba(0,0,0,.12);
}
#reloadHome .box.bg-blue:hover,
#reloadHome .box.bg-green:hover,
#reloadHome .box.bg-red:hover,
#reloadHome .box.bg-yellow:hover{
  transform:translateY(-2px);
}
#reloadHome .box h1{
  font-weight:800;
  margin-top:5px;
}

/* Tables */
table{
  border-collapse:separate!important;
  border-spacing:0;
  width:100%;
}
.table-responsive{border-radius:var(--ui-radius);overflow:auto}
thead th{
  font-size:12px!important;
  text-transform:uppercase;
  letter-spacing:.04em;
  font-weight:750!important;
}
table tr td,table tr th{
  border-color:var(--ui-border)!important;
}
table tbody tr{transition:background .15s ease}
table tbody tr:hover{background:rgba(127,127,127,.07)!important}

/* Buttons */
.btn{
  border:0!important;
  font-weight:650!important;
  box-shadow:0 3px 10px rgba(0,0,0,.08);
}
.btn:hover{
  transform:translateY(-1px);
  box-shadow:0 6px 16px rgba(0,0,0,.12);
}
.btn:active{transform:translateY(0)}
.btn-primary,.bg-blue{background-image:linear-gradient(135deg,#2563eb,#1d4ed8)!important}
.bg-green{background-image:linear-gradient(135deg,#16a34a,#15803d)!important}
.bg-red{background-image:linear-gradient(135deg,#ef4444,#dc2626)!important}
.bg-yellow{background-image:linear-gradient(135deg,#f59e0b,#d97706)!important}

/* Menus / side panels */
.menu,
.sidebar,
#menu{
  scrollbar-width:thin;
}
.menu a,.sidebar a{
  border-radius:10px;
  margin:2px 6px;
}
.menu a:hover,.sidebar a:hover{
  background:rgba(127,127,127,.10)!important;
}
.menu .active,.sidebar .active{
  font-weight:700!important;
}

/* Alerts / modal */
.alert{
  border:1px solid var(--ui-border)!important;
  border-radius:12px!important;
  box-shadow:var(--ui-shadow);
}
.modal-content{
  border:1px solid var(--ui-border)!important;
  border-radius:16px!important;
  overflow:hidden;
  box-shadow:0 22px 70px rgba(0,0,0,.25)!important;
}

/* Login */
.login-box,.login-panel,.login-card{
  border-radius:18px!important;
  box-shadow:0 20px 60px rgba(0,0,0,.18)!important;
}

/* Forms and small controls */
.form-control,.form-select{
  border-radius:10px!important;
}
label{font-weight:650}
hr{border-color:var(--ui-border)!important}

/* Scrollbars */
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-thumb{
  border-radius:20px;
  background:rgba(127,127,127,.35);
}
::-webkit-scrollbar-track{background:transparent}

/* Responsive */
@media (max-width:900px){
  #navbar{padding:0 8px!important}
  #navbar #cpage{font-size:14px}
  .card{border-radius:12px!important}
  .card-body{padding:12px!important}
}
@media (max-width:640px){
  #navbar #brand{font-size:15px;padding:0 7px!important}
  #navbar #cpage{display:none}
  #navbar .navbar-right{gap:3px}
  #navbar .slang,#navbar .stheme{max-width:105px;font-size:11px}
  #reloadHome .row > [class*="col-"]{width:100%!important}
  .box{border-radius:10px!important}
  table{font-size:12px}
  .btn{padding:7px 10px}
}

/* =========================================================
   Mobile Dashboard - 2 cards per row
   Keeps Hotspot / PPP dashboard compact on phones.
   ========================================================= */
@media (max-width:750px){
  /* Keep Hotspot / PPP sections full width, but force statistic tiles to 2 columns. */
  #reloadHome .row > .col-8,
  #reloadHome .row > .col-12{
    width:100%!important;
    max-width:100%!important;
  }

  /* Mikhmon theme CSS has a later/important rule that makes every .col-* 100%.
     Override it explicitly so .col-box-6 is always half width on phones. */
  #reloadHome .row > .col-3.col-box-6,
  #reloadHome .row .col-3.col-box-6{
    width:50%!important;
    max-width:50%!important;
    flex:none!important;
    float:left!important;
    padding-left:4px!important;
    padding-right:4px!important;
  }

  #reloadHome .box{
    min-height:82px!important;
    width:100%!important;
    margin:0!important;
    padding:10px 9px!important;
    border-radius:10px!important;
  }

  #reloadHome .box h1{
    font-size:24px!important;
    line-height:1.05!important;
    margin:2px 0 5px!important;
    white-space:nowrap;
  }

  #reloadHome .box h1 span{
    font-size:11px!important;
    font-weight:650!important;
  }

  #reloadHome .box div{
    font-size:11px!important;
    line-height:1.25!important;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  #reloadHome .card-header h3{
    font-size:15px!important;
  }

  #reloadHome .card-body{
    padding:8px!important;
  }
}

@media (max-width:360px){
  #reloadHome .row > .col-3.col-box-6,
  #reloadHome .row .col-3.col-box-6{
    width:50%!important;
    max-width:50%!important;
  }
  #reloadHome .box{
    min-height:78px!important;
    padding:9px 7px!important;
  }
  #reloadHome .box h1{font-size:22px!important}
  #reloadHome .box div{font-size:10.5px!important}
}

/* =========================================================
   COMPACT MOBILE DASHBOARD - target 2-column layout
   Optimized for narrow phones around 360-520px.
   ========================================================= */
@media (max-width:600px){
  #main{margin-left:0!important;padding:0!important}
  .main-container{padding:4px 8px 12px!important}
  #reloadHome{width:100%!important;overflow:hidden}

  /* System information stays one compact card per row. */
  #reloadHome > #r_1{margin:0!important}
  #reloadHome > #r_1 > [class*="col-"]{
    width:100%!important;
    max-width:100%!important;
    float:none!important;
    padding:0!important;
  }
  #reloadHome > #r_1 .box{
    min-height:76px!important;
    height:auto!important;
    margin:4px 0!important;
    padding:8px 10px!important;
    box-sizing:border-box!important;
  }
  #reloadHome > #r_1 .box-group-icon{
    font-size:34px!important;
    width:20%!important;
    padding:3px 6px!important;
  }
  #reloadHome > #r_1 .box-group-area{
    padding:3px 5px!important;
    font-size:13px!important;
    line-height:1.45!important;
  }

  /* Hotspot / PPP sections: exactly 2 tiles per row. */
  #reloadHome > .row{margin:0!important}
  #reloadHome > .row > .col-8{
    width:100%!important;
    max-width:100%!important;
    float:none!important;
    padding:0!important;
  }
  #reloadHome #r_2{margin:0!important}
  #reloadHome #r_2 > .card{
    margin:4px 0!important;
    border-radius:8px!important;
  }
  #reloadHome #r_2 .card-header{
    padding:7px 10px!important;
    margin-bottom:0!important;
    min-height:35px!important;
  }
  #reloadHome #r_2 .card-header h3{
    font-size:15px!important;
    line-height:20px!important;
  }
  #reloadHome #r_2 .card-body{
    padding:7px 8px 9px!important;
    margin-bottom:0!important;
  }
  #reloadHome #r_2 .card-body > .row{
    display:flex!important;
    flex-wrap:wrap!important;
    margin:0!important;
    width:100%!important;
  }
  #reloadHome #r_2 .card-body > .row > .col-3.col-box-6,
  #reloadHome #r_2 .card-body > .row > .col-3.col-box-6:nth-child(n){
    width:50%!important;
    max-width:50%!important;
    flex:0 0 50%!important;
    float:none!important;
    box-sizing:border-box!important;
    padding:0 4px!important;
    margin:0 0 8px!important;
  }
  #reloadHome #r_2 .card-body > .row > .col-3.col-box-6:nth-last-child(-n+2){
    margin-bottom:0!important;
  }
  #reloadHome #r_2 .card-body > .row > .col-3.col-box-6 > .box{
    width:100%!important;
    min-height:95px!important;
    height:95px!important;
    margin:0!important;
    padding:10px 10px!important;
    box-sizing:border-box!important;
    border-radius:4px!important;
    overflow:hidden!important;
  }
  #reloadHome #r_2 .box h1{
    font-size:25px!important;
    line-height:28px!important;
    margin:2px 0 5px!important;
    white-space:nowrap!important;
  }
  #reloadHome #r_2 .box h1 span{
    font-size:13px!important;
    font-weight:700!important;
  }
  #reloadHome #r_2 .box h1 i{font-size:25px!important}
  #reloadHome #r_2 .box div{
    font-size:12px!important;
    line-height:17px!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
}

@media (max-width:380px){
  #reloadHome #r_2 .card-body > .row > .col-3.col-box-6 > .box{
    height:88px!important;
    min-height:88px!important;
    padding:8px!important;
  }
  #reloadHome #r_2 .box h1{font-size:23px!important;line-height:25px!important}
  #reloadHome #r_2 .box h1 span{font-size:12px!important}
  #reloadHome #r_2 .box div{font-size:11px!important}
}

/* =========================================================
   FINAL RESPONSIVE DASHBOARD
   Phone + tablet + narrow desktop window = 2 tiles per row.
   Desktop wide screens remain 4 tiles per row.
   ========================================================= */
@media screen and (max-width:1100px){
  #reloadHome #r_2 .card-body > .row{
    display:flex!important;
    flex-wrap:wrap!important;
    width:100%!important;
    margin:0!important;
  }

  #reloadHome #r_2 .card-body > .row > .col-3.col-box-6,
  #reloadHome #r_2 .card-body > .row > [class*="col-3"]{
    width:50%!important;
    max-width:50%!important;
    flex:0 0 50%!important;
    float:none!important;
    box-sizing:border-box!important;
    padding-left:4px!important;
    padding-right:4px!important;
    margin-bottom:8px!important;
  }

  #reloadHome #r_2 .card-body > .row > .col-3.col-box-6:nth-last-child(-n+2),
  #reloadHome #r_2 .card-body > .row > [class*="col-3"]:nth-last-child(-n+2){
    margin-bottom:0!important;
  }

  #reloadHome #r_2 .card-body > .row > .col-3.col-box-6 > .box,
  #reloadHome #r_2 .card-body > .row > [class*="col-3"] > .box{
    width:100%!important;
    box-sizing:border-box!important;
    margin:0!important;
    min-height:92px!important;
    height:92px!important;
    padding:10px!important;
  }

  #reloadHome #r_2 .box h1{
    font-size:25px!important;
    line-height:28px!important;
    margin:1px 0 4px!important;
  }

  #reloadHome #r_2 .box h1 span{
    font-size:12px!important;
  }

  #reloadHome #r_2 .box div{
    font-size:12px!important;
    line-height:17px!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
}

/* Smaller phones: still 2 columns, just tighter. */
@media screen and (max-width:480px){
  #reloadHome #r_2 .card-body{
    padding:6px!important;
  }

  #reloadHome #r_2 .card-body > .row > .col-3.col-box-6,
  #reloadHome #r_2 .card-body > .row > [class*="col-3"]{
    padding-left:3px!important;
    padding-right:3px!important;
    margin-bottom:6px!important;
  }

  #reloadHome #r_2 .card-body > .row > .col-3.col-box-6 > .box,
  #reloadHome #r_2 .card-body > .row > [class*="col-3"] > .box{
    min-height:86px!important;
    height:86px!important;
    padding:8px!important;
  }

  #reloadHome #r_2 .box h1{
    font-size:22px!important;
    line-height:25px!important;
  }

  #reloadHome #r_2 .box h1 span{
    font-size:11px!important;
  }

  #reloadHome #r_2 .box div{
    font-size:11px!important;
    line-height:15px!important;
  }
}