/*
 * Mikhmon Modern UI Overlay
 * Drop-in stylesheet that modernizes the look & feel of Mikhmon V3
 * without changing markup, class names, JS behavior, or UX flow.
 * Loaded AFTER the active theme so it overrides selectively.
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  --mk-accent: #2563eb;
  --mk-accent-hover: #1d4ed8;
  --mk-accent-soft: rgba(37, 99, 235, 0.10);
  --mk-bg: #f4f6fb;
  --mk-surface: #ffffff;
  --mk-surface-2: #f8fafc;
  --mk-border: #e5e9f2;
  --mk-border-strong: #cbd5e1;
  --mk-text: #1f2937;
  --mk-text-muted: #64748b;
  --mk-radius: 10px;
  --mk-radius-sm: 6px;
  --mk-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.06);
  --mk-shadow: 0 4px 12px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.04);
  --mk-shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.12);
  --mk-transition: 160ms cubic-bezier(.4,0,.2,1);

  --mk-success: #16a34a;
  --mk-warning: #f59e0b;
  --mk-danger:  #dc2626;
  --mk-info:    #0ea5e9;
}

/* ---------- Base ---------- */
html, body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  background-color: var(--mk-bg) !important;
  color: var(--mk-text) !important;
  font-size: 14px;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code, pre, .mono { font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace !important; }

h1, h2, h3, h4, h5, h6 { color: var(--mk-text); letter-spacing: -0.015em; font-weight: 600; }

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

/* Scrollbars */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track,
::-webkit-scrollbar-track-piece,
::-webkit-scrollbar-corner,
::-webkit-resizer { background: var(--mk-bg) !important; border: none !important; }
::-webkit-scrollbar-thumb {
  background: var(--mk-border-strong) !important;
  border: 2px solid var(--mk-bg) !important;
  border-radius: 8px !important;
}
::-webkit-scrollbar-thumb:hover { background: #94a3b8 !important; }

/* ---------- Navbar ---------- */
.navbar {
  background: var(--mk-surface) !important;
  border-bottom: 1px solid var(--mk-border) !important;
  box-shadow: var(--mk-shadow-sm);
  height: 56px !important;
  backdrop-filter: saturate(180%) blur(8px);
}
.navbar-left a, .navbar-right a {
  color: var(--mk-text) !important;
  padding: 16px 14px !important;
  font-weight: 500;
  border-radius: 0;
  transition: background var(--mk-transition), color var(--mk-transition);
}
.navbar a:hover, .navbar-hover:hover {
  background: var(--mk-accent-soft) !important;
  color: var(--mk-accent) !important;
}
#brand { font-weight: 700 !important; color: var(--mk-text) !important; }
#brand span { color: var(--mk-accent) !important; }

.ses, .dropd {
  background: var(--mk-surface-2) !important;
  color: var(--mk-text) !important;
  border: 1px solid var(--mk-border) !important;
  height: 32px !important;
  border-radius: 8px !important;
  padding: 0 10px !important;
  margin: 9px 6px !important;
  transition: border-color var(--mk-transition), box-shadow var(--mk-transition);
}
.ses:hover, .dropd:hover { border-color: var(--mk-accent) !important; }

/* ---------- Sidebar ---------- */
.sidenav {
  background: var(--mk-surface) !important;
  border-right: 1px solid var(--mk-border) !important;
  margin-top: 57px !important;
  box-shadow: var(--mk-shadow-sm);
}
.sidenav a, .dropdown-btn {
  color: var(--mk-text) !important;
  border-radius: 8px !important;
  margin: 3px 8px !important;
  padding: 8px 10px !important;
  font-weight: 500;
  width: calc(100% - 16px) !important;
  transition: background var(--mk-transition), color var(--mk-transition), transform var(--mk-transition);
}
.sidenav a:hover, .dropdown-btn:hover {
  background: var(--mk-accent-soft) !important;
  color: var(--mk-accent) !important;
}
.sidenav i { color: var(--mk-text-muted); transition: color var(--mk-transition); }
.sidenav a:hover i, .dropdown-btn:hover i, .active i { color: var(--mk-accent) !important; }
.active, .dropdown-btn.active {
  background: var(--mk-accent) !important;
  color: #fff !important;
}
.active i, .active .fa-caret-down { color: #fff !important; }
.dropdown-container {
  background: var(--mk-surface-2);
  border-radius: 8px;
  margin: 2px 8px;
}
.fa-caret-down, .fa-caret-left { color: var(--mk-text-muted) !important; }

/* ---------- Main content / boxes ---------- */
#main { margin-top: 60px !important; }
.main-container { padding: 14px !important; }

.box, .card {
  background: var(--mk-surface) !important;
  border: 1px solid var(--mk-border) !important;
  border-radius: var(--mk-radius) !important;
  box-shadow: var(--mk-shadow-sm);
  margin: 6px !important;
  color: var(--mk-text) !important;
  transition: box-shadow var(--mk-transition), transform var(--mk-transition);
}
.box:hover, .card:hover { box-shadow: var(--mk-shadow); }
.box-bordered { border: 1px solid var(--mk-border) !important; }

.card-header {
  background: var(--mk-surface) !important;
  color: var(--mk-text) !important;
  border-bottom: 1px solid var(--mk-border) !important;
  border-radius: var(--mk-radius) var(--mk-radius) 0 0 !important;
  padding: 12px 14px !important;
  font-weight: 600;
}
.card-header a, .card-header h3 { color: var(--mk-text) !important; font-weight: 600; }
.card-body { padding: 14px !important; }
.card-footer { padding: 10px 14px !important; border-top: 1px solid var(--mk-border); }

/* Box-group dashboard tiles */
.box-group-icon {
  border-radius: var(--mk-radius) !important;
  padding: 14px !important;
  margin: 6px !important;
  font-size: 32px !important;
  transition: transform var(--mk-transition), box-shadow var(--mk-transition);
}
.box-group-icon:hover { transform: translateY(-1px); box-shadow: var(--mk-shadow); }

/* ---------- Buttons ---------- */
.btn, .btn-login {
  border-radius: 8px !important;
  padding: 7px 14px !important;
  font-weight: 500 !important;
  font-size: 13.5px !important;
  letter-spacing: 0.01em;
  border: 1px solid transparent !important;
  transition: background var(--mk-transition), border-color var(--mk-transition),
              box-shadow var(--mk-transition), transform 80ms ease, color var(--mk-transition);
  box-shadow: var(--mk-shadow-sm);
}
.btn:hover, .btn-login:hover {
  box-shadow: var(--mk-shadow);
  transform: translateY(-1px);
  filter: brightness(1.04);
}
.btn:active, .btn-login:active { transform: translateY(0); filter: brightness(0.97); }
.btn:focus, .btn-login:focus {
  box-shadow: 0 0 0 3px var(--mk-accent-soft) !important;
  outline: none;
}

/* ---------- Status / utility backgrounds ---------- */
.bg-primary { background-color: var(--mk-accent) !important; color: #fff !important; }
.bg-secondary { background-color: #64748b !important; color: #fff !important; }
.bg-success, .bg-green { background-color: var(--mk-success) !important; color: #fff !important; }
.bg-info, .bg-cyan, .bg-blue { background-color: var(--mk-info) !important; color: #fff !important; }
.bg-warning, .bg-yellow, .bg-orange { background-color: var(--mk-warning) !important; color: #fff !important; }
.bg-danger, .bg-red, .bg-pink { background-color: var(--mk-danger) !important; color: #fff !important; }
.bg-dark { background-color: #1e293b !important; color: #fff !important; }
.bg-light { background-color: var(--mk-surface-2) !important; color: var(--mk-text) !important; }
.bg-purple, .bg-indigo { background-color: #7c3aed !important; color: #fff !important; }
.bg-teal { background-color: #14b8a6 !important; color: #fff !important; }

/* ---------- Inputs ---------- */
input, select, textarea, .form-control, .group-item {
  font-family: inherit !important;
  border-radius: 8px !important;
  border: 1px solid var(--mk-border-strong) !important;
  background: var(--mk-surface) !important;
  color: var(--mk-text) !important;
  padding: 7px 10px !important;
  transition: border-color var(--mk-transition), box-shadow var(--mk-transition);
}
input:focus, select:focus, textarea:focus, .form-control:focus, .group-item:focus {
  border-color: var(--mk-accent) !important;
  box-shadow: 0 0 0 3px var(--mk-accent-soft) !important;
  outline: none !important;
}
input[type=checkbox], input[type=radio] { accent-color: var(--mk-accent); }
label { color: var(--mk-text); font-weight: 500; }

/* Input groups */
.input-group .group-item:first-child,
.input-group [class*=input-group-]:first-child {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}
.input-group .group-item:last-child,
.input-group [class*=input-group-]:last-child {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}

/* ---------- Tables ---------- */
.table {
  border-collapse: separate !important;
  border-spacing: 0;
  width: 100%;
  background: var(--mk-surface);
  border-radius: var(--mk-radius);
  overflow: hidden;
}
.table th {
  background: var(--mk-surface-2) !important;
  color: var(--mk-text-muted) !important;
  text-transform: uppercase;
  font-size: 11.5px;
  letter-spacing: 0.04em;
  font-weight: 600 !important;
  padding: 10px !important;
  border-bottom: 1px solid var(--mk-border) !important;
  text-align: left;
}
.table td {
  padding: 10px !important;
  border-bottom: 1px solid var(--mk-border) !important;
  color: var(--mk-text);
}
.table tr:last-child td { border-bottom: none !important; }
.table tr:hover td { background: var(--mk-accent-soft); }
.table-striped tr:nth-child(even) td { background: var(--mk-surface-2); }

/* ---------- Modal ---------- */
.modal-window {
  background: rgba(15, 23, 42, 0.55) !important;
  backdrop-filter: blur(4px);
}
.modal-window > div {
  background: var(--mk-surface) !important;
  border-radius: var(--mk-radius) !important;
  box-shadow: var(--mk-shadow-lg) !important;
  border: 1px solid var(--mk-border) !important;
  color: var(--mk-text) !important;
}
.modal-window header {
  color: var(--mk-text) !important;
  font-weight: 600 !important;
  border-bottom: 1px solid var(--mk-border);
  padding-bottom: 10px;
}

/* ---------- Login box ---------- */
.login-box, .register-box {
  background: var(--mk-surface);
  border: 1px solid var(--mk-border);
  border-radius: var(--mk-radius);
  box-shadow: var(--mk-shadow-lg);
  padding: 24px !important;
}

/* ---------- Notify ---------- */
#notify {
  background: var(--mk-text) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 8px !important;
  box-shadow: var(--mk-shadow-lg) !important;
  padding: 10px 14px !important;
}

/* ---------- Footer ---------- */
.footer {
  background: var(--mk-surface) !important;
  border-top: 1px solid var(--mk-border);
  color: var(--mk-text-muted);
}

/* ---------- Pace progress bar ---------- */
.pace .pace-progress { background: var(--mk-accent) !important; height: 2px !important; }
.pace .pace-activity { border-top-color: var(--mk-accent) !important; border-left-color: var(--mk-accent) !important; }

/* ---------- Progress bars ---------- */
.progress-bar, .progress-bar-blue, .progress-bar-red {
  border-radius: 999px !important;
  overflow: hidden;
  background: var(--mk-surface-2);
}

/* ---------- Misc text ---------- */
.text-muted { color: var(--mk-text-muted) !important; }
hr { border: none; border-top: 1px solid var(--mk-border); }

/* ---------- Dark theme adjustments ---------- */
body[data-theme="dark"],
html.theme-dark body {
  --mk-bg: #0f172a;
  --mk-surface: #1e293b;
  --mk-surface-2: #172033;
  --mk-border: #334155;
  --mk-border-strong: #475569;
  --mk-text: #e2e8f0;
  --mk-text-muted: #94a3b8;
  --mk-accent-soft: rgba(96, 165, 250, 0.15);
  --mk-accent: #60a5fa;
  --mk-accent-hover: #3b82f6;
}

/* Auto-pick dark when the dark theme stylesheet is loaded (heuristic via background) */
@media (prefers-color-scheme: no-preference) { /* placeholder for SSR */ }

/* ---------- Mobile polish ---------- */
@media (max-width: 768px) {
  .main-container { padding: 8px !important; }
  .box, .card { margin: 4px !important; }
  .navbar-left a, .navbar-right a { padding: 16px 10px !important; }
}