/* =========================================================
   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}
}