/*
 * Mikhmon Modern UI Overlay  —  Premium Enterprise Console
 * -------------------------------------------------------------------
 * This file controls STRUCTURE only: typography, radius, elevation,
 * spacing, tiles, tables, forms, buttons, badges, sidebar rhythm,
 * scrollbars, toasts and the login screen.
 *
 * Per-theme COLOR is owned by the authoritative inline palette block
 * (QEOV_EXACT_MIKHMON_PALETTE) injected in include/headhtml.php, which
 * loads after this file. We therefore avoid re-declaring flat color
 * fills that the palette already governs, and instead lean on
 * properties the palette leaves untouched (font, radius, shadow,
 * padding, transition, transform, background-image, box-shadow rings).
 *
 * No markup contracts, ids, form fields, links or JS hooks are changed.
 *
 * Fonts are loaded non-render-blocking from include/headhtml.php (via a
 * print->all <link>), NOT via CSS @import, so first paint is not delayed.
 */

:root {
  --mk-radius: 14px;
  --mk-radius-sm: 10px;
  --mk-radius-xs: 8px;
  --mk-radius-pill: 999px;

  --mk-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.06);
  --mk-shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.04);
  --mk-shadow: 0 6px 18px rgba(15, 23, 42, 0.10), 0 2px 6px rgba(15, 23, 42, 0.06);
  --mk-shadow-lg: 0 22px 48px rgba(15, 23, 42, 0.16);

  --mk-ease: 200ms cubic-bezier(0.4, 0, 0.2, 1);

  --mk-font-ui: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  --mk-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* ============================================================
   Base typography
   ============================================================ */
html,
body {
  font-family: var(--mk-font-ui) !important;
  font-size: 14px;
  line-height: 1.55;
  letter-spacing: -0.006em;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5 {
  font-family: var(--mk-font-ui) !important;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

/* Numeric / technical values read better in mono */
#timer,
.qb-mono,
.mono {
  font-family: var(--mk-font-mono) !important;
  font-variant-numeric: tabular-nums;
}

a { transition: color var(--mk-ease), background-color var(--mk-ease); }

/* ============================================================
   Navbar
   ============================================================ */
.navbar {
  height: 56px !important;
  box-shadow: var(--mk-shadow-sm) !important;
}

#brand {
  font-weight: 800 !important;
  letter-spacing: 0.14em !important;
  font-size: 15px !important;
}

.navbar a,
#navbar a {
  transition: background-color var(--mk-ease), color var(--mk-ease) !important;
  border-radius: var(--mk-radius-xs);
}

.navbar select,
#navbar select,
.stheme,
.slang,
.connect {
  border-radius: var(--mk-radius-xs) !important;
  padding: 6px 10px !important;
  font-weight: 500;
  cursor: pointer;
  transition: border-color var(--mk-ease), box-shadow var(--mk-ease) !important;
}

/* ============================================================
   Sidebar
   ============================================================ */
.sidenav {
  margin-top: 56px !important;
  padding: 10px 12px !important;
  box-shadow: var(--mk-shadow-sm) !important;
}

/* Section group labels (Operations / Sales / Monitoring / Reports / Admin).
   Non-interactive dividers; do not carry the .menu class so sidebar JS
   ignores them. Color follows the active theme's sidebar text token. */
.sidenav .nav-section {
  margin: 14px 6px 4px !important;
  padding: 6px 6px 4px !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.11em !important;
  text-transform: uppercase !important;
  opacity: 0.42;
  color: var(--qeov-side-text, currentColor) !important;
  border-top: 1px solid var(--qeov-side-border, rgba(127,127,127,0.18)) !important;
  border-radius: 0 !important;
  user-select: none;
  pointer-events: none;
  white-space: nowrap;
  overflow: hidden;
}
/* First section sits right under Dashboard: no top rule needed there. */
.sidenav .menu + .nav-section {
  border-top: 0 !important;
  margin-top: 8px !important;
}

.sidenav a,
.sidenav .menu,
.sidenav .dropdown-btn {
  border-radius: var(--mk-radius-sm) !important;
  margin: 2px 0 !important;
  padding: 10px 12px !important;
  font-weight: 500 !important;
  font-size: 13.5px !important;
  transition: background-color var(--mk-ease), color var(--mk-ease), transform var(--mk-ease) !important;
}

.sidenav a i,
.sidenav .menu i,
.sidenav .dropdown-btn i {
  width: 18px;
  text-align: center;
  margin-right: 4px;
  opacity: 0.9;
}

.sidenav a:hover,
.sidenav .menu:hover,
.sidenav .dropdown-btn:hover {
  transform: translateX(4px);
}

.sidenav a.active,
.sidenav .menu.active {
  font-weight: 600 !important;
  box-shadow: var(--mk-shadow-xs);
}

.dropdown-container {
  padding-left: 6px;
}

.dropdown-container a {
  border-radius: var(--mk-radius-sm) !important;
  padding: 9px 10px !important;
  font-size: 13px !important;
}

/* header block inside sidebar (session name) */
.sidenav .card-header {
  border-radius: var(--mk-radius-sm) !important;
  margin-bottom: 8px;
  box-shadow: var(--mk-shadow-xs);
}

/* ============================================================
   Main container spacing
   ============================================================ */
#main .main-container,
.main-container {
  padding: 18px !important;
}

.row { margin-bottom: 2px; }

/* ============================================================
   Cards / boxes / panels
   ============================================================ */
.card,
.box,
.panel {
  border-radius: var(--mk-radius) !important;
  box-shadow: var(--mk-shadow-sm) !important;
  border-width: 1px !important;
  border-style: solid !important;
  overflow: hidden;
  transition: box-shadow var(--mk-ease), transform var(--mk-ease) !important;
}

.card:hover,
.panel:hover {
  box-shadow: var(--mk-shadow) !important;
}

.card-header,
.panel-heading,
.box-header {
  padding: 14px 18px !important;
  font-weight: 700 !important;
}

.card-header h1,
.card-header h2,
.card-header h3,
.card-header h4 {
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  margin: 0 !important;
}

.card-body { padding: 16px 18px !important; }

.card-header i,
.box-header i { margin-right: 7px; opacity: 0.85; }

/* ============================================================
   Stat tiles (dashboard KPI boxes: .bg-blue/.bg-green/.bg-yellow/.bg-red)
   Palette forces flat background-color; we overlay a subtle gradient
   via background-image (which paints above background-color) + shape.
   ============================================================ */
.box {
  border-radius: var(--mk-radius) !important;
}

.box.bg-blue,
.box.bg-green,
.box.bg-yellow,
.box.bg-red,
.box.bg-info {
  color: #ffffff !important;
  border: none !important;
  box-shadow: var(--mk-shadow-sm) !important;
  background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 60%) !important;
}

/* keep the non-primary tiles distinctive and premium */
.box.bg-green  { background-color: #16a34a !important; }
.box.bg-yellow { background-color: #d97706 !important; }
.box.bg-red    { background-color: #dc2626 !important; }

.box.bg-blue a,
.box.bg-green a,
.box.bg-yellow a,
.box.bg-red a,
.box.bg-info a { color: #ffffff !important; }

.box.bg-blue:hover,
.box.bg-green:hover,
.box.bg-yellow:hover,
.box.bg-red:hover,
.box.bg-info:hover {
  transform: translateY(-2px);
  box-shadow: var(--mk-shadow) !important;
}

.box h1 {
  font-size: 30px !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
  margin: 2px 0 !important;
}

/* info / stat group cards */
.box-group-icon {
  border-radius: var(--mk-radius-sm) !important;
  background: rgba(127, 127, 127, 0.10) !important;
  box-shadow: var(--mk-shadow-xs);
}

.box-group-area span { line-height: 1.7; }

/* ============================================================
   Tables
   ============================================================ */
.table {
  border-radius: var(--mk-radius-sm);
  overflow: hidden;
  border-collapse: separate !important;
  border-spacing: 0;
}

.table th {
  font-size: 11.5px !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 11px 12px !important;
  white-space: nowrap;
}

.table td {
  padding: 10px 12px !important;
  vertical-align: middle !important;
}

.table-hover tbody tr,
.table tbody tr { transition: background-color var(--mk-ease); }

/* technical columns get mono automatically where marked */
.table td .mono,
.table td code { font-family: var(--mk-font-mono) !important; }

/* ============================================================
   Buttons
   ============================================================ */
.btn,
button,
input[type="submit"],
input[type="button"],
.btn-login {
  border-radius: var(--mk-radius-xs) !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em;
  padding: 8px 14px !important;
  transition: transform var(--mk-ease), box-shadow var(--mk-ease) !important;
}

.btn:hover,
button:hover,
input[type="submit"]:hover {
  transform: translateY(-1px);
  box-shadow: var(--mk-shadow-sm);
}

.btn:active,
button:active { transform: translateY(0); }

/* ============================================================
   Forms
   ============================================================ */
input,
select,
textarea,
.form-control {
  border-radius: var(--mk-radius-xs) !important;
  padding: 9px 12px !important;
  transition: border-color var(--mk-ease), box-shadow var(--mk-ease) !important;
}

input:focus,
select:focus,
textarea:focus,
.form-control:focus {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18) !important;
}

label { font-weight: 600; font-size: 13px; }

/* ============================================================
   Badges / status pills (generic, class-agnostic helpers)
   ============================================================ */
.label,
.badge {
  border-radius: var(--mk-radius-pill) !important;
  padding: 3px 10px !important;
  font-weight: 700 !important;
  font-size: 11.5px !important;
  letter-spacing: 0.02em;
}

/* ============================================================
   Login screen
   ============================================================ */
.login-box {
  max-width: 400px;
  margin: 0 auto;
  padding-top: 6vh !important;
}

.login-box .card {
  border-radius: 18px !important;
  box-shadow: var(--mk-shadow-lg) !important;
}

.login-box .card-header {
  text-align: center;
  border-bottom: none !important;
  padding-bottom: 4px !important;
}

.login-box .card-header h3 {
  font-size: 18px !important;
  letter-spacing: -0.01em;
}

.login-box img {
  width: 72px;
  height: 72px;
  object-fit: contain;
  filter: drop-shadow(0 6px 14px rgba(15, 23, 42, 0.18));
}

.login-box .btn-login {
  border-radius: var(--mk-radius-sm) !important;
  height: 46px !important;
  font-weight: 700 !important;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  font-size: 14px !important;
}

.login-box input.form-control {
  height: 46px !important;
  font-size: 15px !important;
}

/* ============================================================
   Toast / notify + loading spinner
   ============================================================ */
#notify {
  border-radius: var(--mk-radius-sm) !important;
  box-shadow: var(--mk-shadow-lg) !important;
  font-weight: 600;
}

#notify .message { letter-spacing: 0.01em; }

.lds-dual-ring:after {
  border-width: 3px !important;
}

/* ============================================================
   Utility niceties
   ============================================================ */
.radius-3 { border-radius: var(--mk-radius-xs) !important; }

.pointer,
a[onclick],
.ses { cursor: pointer; }

.overflow { border-radius: var(--mk-radius-sm); }

/* ============================================================
   Custom scrollbars
   ============================================================ */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(127, 127, 127, 0.45) transparent;
}
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: rgba(127, 127, 127, 0.4);
  border-radius: var(--mk-radius-pill);
  border: 2px solid transparent;
  background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background: rgba(127, 127, 127, 0.6); background-clip: content-box; }

/* ============================================================
   Motion
   Entrance animations were intentionally removed: animating every
   card/box on each server-rendered page load made ready pages look
   like they were still assembling. Hover/focus micro-transitions
   above are compositor-friendly and stay.
   ============================================================ */

/* ============================================================
   Responsive polish
   ============================================================ */
@media (max-width: 720px) {
  .card-body { padding: 14px !important; }
  .box h1 { font-size: 26px !important; }
  .login-box { padding-top: 4vh !important; }
}