/* ============ MOBILE NAV — Conflux Ukraine ============
   Sticky topbar + side drawer + redesigned 3-icon bottom nav.
   Visible <=1023px. Light theme only.
============================================================ */

:root {
  --mnv-bg: #ffffff;
  --mnv-bg-soft: #F4F6FA;
  --mnv-border: #DDE2EB;
  --mnv-text: #0A1628;
  --mnv-text-mute: #4A5568;
  --mnv-text-dim: #8492A6;
  --mnv-accent: #0057B7;
  --mnv-accent-soft: rgba(0,87,183,.06);
  --mnv-danger: #DC2626;
  --mnv-ukraine: #FCD34D;
  --mnv-shadow: 0 4px 20px rgba(10,22,40,.10);
  --mnv-shadow-strong: 8px 0 32px rgba(10,22,40,.20);
}

/* Default: hide all on >=1024px */
.mnv-topbar, .mnv-drawer, .mnv-backdrop, .mnv-bottom { display: none; }

@media (max-width: 1023px) {

/* ============ TOPBAR ============ */
.mnv-topbar {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 90;
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px;
  height: 52px;
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  border-bottom: 1px solid var(--mnv-border);
}
.mnv-burger {
  flex-shrink: 0;
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid var(--mnv-border);
  border-radius: 10px;
  cursor: pointer;
  color: var(--mnv-text);
  transition: background .15s, border-color .15s;
}
.mnv-burger:hover, .mnv-burger:focus-visible { background: var(--mnv-accent-soft); border-color: var(--mnv-accent); }
.mnv-burger svg { width: 20px; height: 20px; }
.mnv-brand {
  flex: 1; display: flex; align-items: center; gap: 8px;
  text-decoration: none; color: var(--mnv-text);
  min-width: 0;
}
.mnv-brand-mark {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: linear-gradient(180deg, #3B82F6 0%, #2563EB 100%);
  display: grid; place-items: center;
  flex-shrink: 0;
}
.mnv-brand-mark img { width: 20px; height: 20px; filter: brightness(0) invert(1); }
.mnv-brand-text {
  font-weight: 800;
  font-size: 15px;
  color: #1E3A8A;
  white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.mnv-brand-ua {
  background-image: linear-gradient(180deg, #1E3A8A 0%, #2A4F9F 25%, #6B8E5A 50%, #D4B948 75%, #FCD34D 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.mnv-topbar-right { flex-shrink: 0; display: flex; align-items: center; gap: 6px; }
.mnv-avatar-btn {
  width: 40px; height: 40px;
  background: transparent;
  border: 0; padding: 0;
  cursor: pointer;
}
.mnv-avatar {
  width: 36px; height: 36px;
  display: inline-grid; place-items: center;
  border-radius: 50%;
  background: linear-gradient(180deg, #3B82F6 0%, #2563EB 100%);
  color: #fff;
  font-weight: 800; font-size: 15px;
  letter-spacing: 0;
}
.mnv-avatar-lg { width: 48px; height: 48px; font-size: 20px; }
.mnv-signin-btn {
  width: 40px; height: 40px;
  display: inline-grid; place-items: center;
  border: 1px solid var(--mnv-border);
  border-radius: 10px;
  color: var(--mnv-accent);
  text-decoration: none;
  transition: background .15s;
}
.mnv-signin-btn:hover, .mnv-signin-btn:focus-visible { background: var(--mnv-accent-soft); }
.mnv-signin-btn svg { width: 20px; height: 20px; }

/* ============ BACKDROP ============ */
.mnv-backdrop {
  position: fixed; inset: 0;
  background: rgba(10,22,40,.45);
  z-index: 99;
  opacity: 0; pointer-events: none;
  transition: opacity .25s;
}
.mnv-backdrop.is-open { display: block; opacity: 1; pointer-events: auto; }

/* ============ DRAWER ============ */
.mnv-drawer {
  position: fixed; top: 0; bottom: 0; left: 0;
  width: 85vw; max-width: 320px;
  z-index: 100;
  background: var(--mnv-bg);
  box-shadow: var(--mnv-shadow-strong);
  transform: translateX(-100%);
  transition: transform .28s cubic-bezier(.32,.72,0,1);
  overflow-y: auto;
  display: flex; flex-direction: column;
  padding-top: env(safe-area-inset-top, 0);
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.mnv-drawer.is-open { display: flex; transform: translateX(0); }

.mnv-drawer-head {
  display: flex; align-items: center; gap: 10px;
  padding: 16px 16px 12px;
  border-bottom: 1px solid var(--mnv-border);
}
.mnv-profile-card { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }
.mnv-profile-info { flex: 1; min-width: 0; }
.mnv-profile-name {
  font-weight: 700; font-size: 15px; color: var(--mnv-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mnv-profile-sub {
  font-size: 11.5px; color: var(--mnv-text-dim);
  font-family: ui-monospace, Menlo, monospace;
  margin-top: 2px;
}
.mnv-signin-card {
  display: flex; align-items: center; gap: 12px; flex: 1;
  text-decoration: none; color: var(--mnv-text);
  padding: 4px;
}
.mnv-signin-card svg { width: 36px; height: 36px; color: var(--mnv-accent); flex-shrink: 0; }
.mnv-signin-card-title { font-weight: 700; font-size: 15px; }
.mnv-signin-card-sub { font-size: 12px; color: var(--mnv-text-dim); }

.mnv-drawer-close {
  flex-shrink: 0;
  width: 36px; height: 36px;
  background: transparent; border: 0;
  border-radius: 8px;
  display: inline-grid; place-items: center;
  cursor: pointer; color: var(--mnv-text-mute);
}
.mnv-drawer-close:hover, .mnv-drawer-close:focus-visible { background: var(--mnv-bg-soft); color: var(--mnv-text); }
.mnv-drawer-close svg { width: 18px; height: 18px; }

.mnv-search {
  position: relative;
  margin: 12px 16px 6px;
}
.mnv-search svg {
  position: absolute; left: 12px; top: 50%;
  transform: translateY(-50%);
  width: 16px; height: 16px;
  color: var(--mnv-text-dim);
  pointer-events: none;
}
.mnv-search input {
  width: 100%;
  padding: 10px 12px 10px 36px;
  border: 1px solid var(--mnv-border);
  border-radius: 10px;
  background: var(--mnv-bg-soft);
  font-size: 14px;
  color: var(--mnv-text);
  outline: none;
  transition: border-color .15s, background .15s;
  box-sizing: border-box;
}
.mnv-search input:focus {
  border-color: var(--mnv-accent);
  background: #fff;
  box-shadow: 0 0 0 3px var(--mnv-accent-soft);
}

.mnv-drawer-nav {
  display: flex; flex-direction: column;
  padding: 8px 12px;
  flex: 1;
  gap: 2px;
}
.mnv-link {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 12px;
  border-radius: 10px;
  color: var(--mnv-text);
  text-decoration: none;
  font-size: 14.5px; font-weight: 600;
  min-height: 44px;
  transition: background .15s, color .15s;
}
.mnv-link svg { width: 18px; height: 18px; color: var(--mnv-text-dim); flex-shrink: 0; transition: color .15s; }
.mnv-link:hover, .mnv-link:focus-visible { background: var(--mnv-accent-soft); color: var(--mnv-accent); }
.mnv-link:hover svg, .mnv-link:focus-visible svg { color: var(--mnv-accent); }
.mnv-link.is-active {
  background: var(--mnv-accent);
  color: #fff;
}
.mnv-link.is-active svg { color: #fff; }
.mnv-link.is-hidden { display: none; }

.mnv-link-admin { border-top: 1px solid var(--mnv-border); margin-top: 6px; padding-top: 12px; }
.mnv-link-admin svg { color: var(--mnv-accent); }

.mnv-drawer-social {
  display: flex; gap: 8px; justify-content: center;
  padding: 12px 16px;
  border-top: 1px solid var(--mnv-border);
}
.mnv-drawer-social a {
  width: 40px; height: 40px;
  display: inline-grid; place-items: center;
  border: 1px solid var(--mnv-border);
  border-radius: 10px;
  background: var(--mnv-bg);
  color: var(--mnv-text-mute);
  text-decoration: none;
  transition: background .15s, color .15s, border-color .15s;
}
.mnv-drawer-social a:hover, .mnv-drawer-social a:focus-visible {
  background: var(--mnv-accent-soft);
  border-color: var(--mnv-accent);
  color: var(--mnv-accent);
}
.mnv-drawer-social svg { width: 18px; height: 18px; }

.mnv-drawer-logout-form { padding: 0 16px 16px; margin: 0; }
.mnv-drawer-logout {
  width: 100%;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 14px;
  background: transparent;
  border: 1px solid var(--mnv-border);
  border-radius: 10px;
  color: var(--mnv-danger);
  font-weight: 600; font-size: 14px;
  cursor: pointer;
  min-height: 44px;
  transition: background .15s, border-color .15s;
}
.mnv-drawer-logout:hover, .mnv-drawer-logout:focus-visible {
  background: rgba(220,38,38,.06);
  border-color: var(--mnv-danger);
}
.mnv-drawer-logout svg { width: 16px; height: 16px; }

/* ============ BOTTOM NAV ============ */
.mnv-bottom {
  position: fixed; bottom: 0; left: 0; right: 0;
  z-index: 80;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  border-top: 1px solid var(--mnv-border);
  padding: 6px 0 max(6px, env(safe-area-inset-bottom));
}
.mnv-bottom-item {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 7px 4px;
  text-decoration: none;
  color: var(--mnv-text-dim);
  font-size: 11px; font-weight: 600;
  min-height: 52px;
  transition: color .15s;
}
.mnv-bottom-item svg { width: 22px; height: 22px; }
.mnv-bottom-item:hover, .mnv-bottom-item:focus-visible { color: var(--mnv-text); }
.mnv-bottom-item.is-active { color: var(--mnv-accent); }

/* Body padding so content not hidden under topbar + bottom-nav */
body.mnv-active {
  padding-top: 52px;
  padding-bottom: calc(64px + env(safe-area-inset-bottom, 0));
}
body.mnv-drawer-open { overflow: hidden; }

}

/* prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .mnv-drawer, .mnv-backdrop { transition: none !important; }
}

/* === LEGACY HIDE — глобально скрыть старые навигации на мобильных === */
/* Эти селекторы применяются ко всем страницам где подключён mobile-nav.css.
   На desktop (≥1024px) старые меню остаются как были. */
@media (max-width: 1023px) {
  body .nav,
  body .sticky-topbar,
  body .nav-toggle,
  body .mobile-menu,
  body .mobile-bn { display: none !important; }
}