/*
 * Mikhmon — compact professional theme, loaded after mikhmon-ui.<theme>.min.css
 * by include/headhtml.php on every page. It only refines sizes, spacing,
 * radius and states; backgrounds keep the colors of the selected theme.
 */

/* ---------- base ---------- */
body{font-size:13px;line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}
.main-container{padding:8px 10px 20px}
h1{font-size:20px}h2{font-size:17px}h3{font-size:14px}h4{font-size:13px}
a{transition:color .15s ease,opacity .15s ease}
::selection{background:rgba(16,185,129,.35)}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-thumb{background:rgba(127,127,127,.35);border-radius:8px;border:2px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-track{background:transparent}

/* ---------- top bar ---------- */
.navbar{box-shadow:0 1px 0 rgba(0,0,0,.25),0 4px 14px rgba(0,0,0,.12)}
#brand{font-size:13.5px;letter-spacing:.3px;font-weight:800;white-space:nowrap}
.mx-brand-ico{width:20px;height:20px;border-radius:5px;margin-right:7px;vertical-align:-5px}
#cpage{font-size:14px;font-weight:600;letter-spacing:.2px}
.navbar-right a{font-size:12.5px}
.navbar-right select.ses{font-size:12.5px;border-radius:6px;padding:4px 6px;cursor:pointer}
#timer{font-variant-numeric:tabular-nums}

/* ---------- cards ---------- */
.card{border-radius:10px;border:1px solid rgba(127,127,127,.2);box-shadow:0 2px 10px rgba(0,0,0,.12);margin:6px 5px}
.card-header{padding:9px 14px;margin-bottom:0;border-radius:10px 10px 0 0;border-bottom:1px solid rgba(127,127,127,.18)}
.card-header h3,.card-header .card-title,.card-title{font-size:12px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;line-height:1.6}
.card-header h3 i,.card-title i{margin-right:5px;opacity:.85}
.card-header a{font-size:12px}
.card-body{padding:10px 14px 12px;margin-bottom:0}
.card-footer{padding:8px 14px;border-top:1px solid rgba(127,127,127,.15);font-size:12px}

/* ---------- boxes (dashboard style tiles of the old pages) ---------- */
.box{border-radius:10px;padding:10px 12px;box-shadow:0 2px 8px rgba(0,0,0,.12)}
.box-bordered{border:1px solid rgba(127,127,127,.2)}
.box h1{font-size:20px;font-weight:700}
.box-group-icon{font-size:22px;width:auto;padding:6px 10px;border-radius:9px}
.box-group-area{font-size:12px}

/* ---------- tables ---------- */
.table{font-size:12px;font-variant-numeric:tabular-nums}
.table th{font-size:10.5px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;white-space:nowrap;
  padding:8px 9px;background:rgba(127,127,127,.1)}
.table td{padding:6px 9px;vertical-align:middle}
.table-sm td,.table-sm th{padding:4px 7px}
.table-bordered td,.table-bordered th{border:1px solid rgba(127,127,127,.16)!important}
.table tbody tr:nth-child(even){background:rgba(127,127,127,.035)}
.table-hover:hover tbody tr:hover,.table-hover tbody tr:hover{background:rgba(16,185,129,.08)}
.table th .fa-sort{opacity:.45;margin-left:3px;font-size:10px}
.overflow{border-radius:8px}

/* ---------- forms ---------- */
.form-control,.group-item{font-size:12.5px;padding:6px 9px;border:1px solid rgba(127,127,127,.3);border-radius:7px;
  transition:border-color .15s ease,box-shadow .15s ease}
.group-item-l{border-radius:7px 0 0 7px}
.group-item-r{border-radius:0 7px 7px 0}
.group-item-md{border-radius:0}
.form-control:focus,.group-item:focus{border-color:#10b981;box-shadow:0 0 0 3px rgba(16,185,129,.18);outline:0}
.form-control::placeholder,.group-item::placeholder{opacity:.55}
select.form-control,select.group-item{cursor:pointer}
textarea.form-control{line-height:1.45}
label{font-size:12px;font-weight:600}
input[type=checkbox],input[type=radio]{accent-color:#10b981}

/* ---------- buttons ---------- */
.btn,.btn-login{font-size:12px;font-weight:600;padding:6px 12px;border-radius:7px;margin:3px;
  box-shadow:0 1px 3px rgba(0,0,0,.18);transition:filter .15s ease,transform .1s ease,box-shadow .15s ease}
.btn:hover,.btn-login:hover{filter:brightness(1.1);box-shadow:0 3px 10px rgba(0,0,0,.22)}
.btn:active,.btn-login:active{transform:translateY(1px)}
.btn i{margin-right:3px}

/* modern accent palette (used by buttons, labels and old boxes) */
.bg-primary,.bg-blue{background-color:#0ea5e9}
.bg-success,.bg-green{background-color:#10b981}
.bg-danger,.bg-red{background-color:#ef4444}
.bg-warning,.bg-yellow{background-color:#f59e0b}
.bg-info,.bg-light-blue{background-color:#38bdf8}
.bg-purple{background-color:#8b5cf6}
.bg-indigo{background-color:#6366f1}
.bg-pink{background-color:#ec4899}
.bg-teal{background-color:#14b8a6}
.bg-cyan{background-color:#06b6d4}
.bg-orange{background-color:#f97316}
.bg-grey,.bg-secondary{background-color:#64748b}
.text-green,.text-success{color:#10b981}
.text-red,.text-danger{color:#ef4444}
.text-blue,.text-primary{color:#0ea5e9}
.text-yellow,.text-warning{color:#f59e0b}

/* ---------- alerts / notices ---------- */
.alert{border-radius:8px;padding:8px 12px;font-size:12px}
#notify{border-radius:10px;border:1px solid rgba(127,127,127,.3);box-shadow:0 10px 30px rgba(0,0,0,.3);font-size:12.5px;backdrop-filter:blur(6px)}

/* ---------- modals ---------- */
.modal-window>div{border-radius:12px;border:1px solid rgba(127,127,127,.25);box-shadow:0 20px 50px rgba(0,0,0,.4)}
.modal-window h1{font-size:15px;font-weight:700}
.modal-close{border-radius:0 12px 0 10px}

/* ---------- login / register ---------- */
.login-box .card{border-radius:14px;box-shadow:0 20px 50px rgba(0,0,0,.3)}
.login-box .card-header h3{font-size:13px}
.btn-login{padding:8px 12px;font-size:13px}

@media (max-width:750px){
  .main-container{padding:6px 4px 16px}
  .card-body{padding:9px 10px}
  .table{font-size:11.5px}
}