/* ============================================================================
   QZR vNext — Main menu modal (#modalMainMenu)
   Strict alignment to the vNext token system (--qz-*). Loaded AFTER
   homepage-hub.css + ui-visual-language.css so it supersedes their --ux-* /
   dark-glass styling. Scoped to #modalMainMenu[data-qz-skin="mainmenu"].
   ============================================================================ */

/* ── Shell / chrome ──────────────────────────────────────────────────────── */
#modalMainMenu[data-qz-skin="mainmenu"] .modal-dialog {
  max-width: 380px;
}

#modalMainMenu[data-qz-skin="mainmenu"] .modal-content {
  background: var(--qz-sheet) !important;
  border: 1px solid var(--qz-line) !important;
  border-radius: var(--qz-r-card) !important;
  box-shadow: 0 24px 60px rgba(6, 20, 16, .18) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  color: var(--qz-text);
  font-family: var(--qz-font, inherit);
  min-width: 0;
  overflow: hidden;
}

#modalMainMenu[data-qz-skin="mainmenu"] .modal-header {
  border: 0 !important;
  padding: 14px 16px 4px;
}

#modalMainMenu[data-qz-skin="mainmenu"] .modal-title { color: var(--qz-text); }

/* Close button — plain dark glyph on the light surface (kill the dark-theme invert) */
#modalMainMenu[data-qz-skin="mainmenu"] .btn-close {
  filter: none !important;
  opacity: .55;
}
#modalMainMenu[data-qz-skin="mainmenu"] .btn-close:hover { opacity: 1; }

/* Dark mode: the menu surface (.content-card → --qz-surface) is dark, so the
   plain (non-inverted) glyph above is invisible. Restore the inverted white X. */
:root[data-mode="dark"] #modalMainMenu[data-qz-skin="mainmenu"] .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%) !important;
  opacity: .7;
}
:root[data-mode="dark"] #modalMainMenu[data-qz-skin="mainmenu"] .btn-close:hover { opacity: 1; }

#modalMainMenu[data-qz-skin="mainmenu"] .modal-body { padding: 8px 16px 18px; }

/* ── Tile grid ───────────────────────────────────────────────────────────── */
#modalMainMenu[data-qz-skin="mainmenu"] .qzr-main-menu-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

#modalMainMenu[data-qz-skin="mainmenu"] .qzr-main-menu-tile {
  min-height: 92px;
  gap: 9px;
  padding: 16px 10px;
  border: 1px solid var(--qz-line) !important;
  border-radius: var(--qz-r-card) !important;
  background: var(--qz-surface) !important;
  color: var(--qz-text) !important;
  font-family: var(--qz-font, inherit);
  font-size: var(--qz-fs-sm);
  font-weight: var(--qz-fw-strong);
  box-shadow: none !important;
  transition: transform var(--qz-dur-ui) var(--qz-ease, ease), border-color var(--qz-dur-ui) ease, background var(--qz-dur-ui) ease, color var(--qz-dur-ui) ease;
}

#modalMainMenu[data-qz-skin="mainmenu"] .qzr-main-menu-tile:hover,
#modalMainMenu[data-qz-skin="mainmenu"] .qzr-main-menu-tile:focus-visible {
  border-color: var(--qz-accent) !important;
  background: var(--qz-accent-soft) !important;
  color: var(--qz-accent-ink) !important;
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(6, 20, 16, .12) !important;
  outline: none;
}
#modalMainMenu[data-qz-skin="mainmenu"] .qzr-main-menu-tile:active { transform: translateY(0); }

/* Icons — accent by default, deep on hover (inherits color) */
#modalMainMenu[data-qz-skin="mainmenu"] .qzr-main-menu-icon {
  font-size: 2.4rem;
  color: var(--qz-accent);
}
#modalMainMenu[data-qz-skin="mainmenu"] .qzr-main-menu-tile:hover .qzr-main-menu-icon,
#modalMainMenu[data-qz-skin="mainmenu"] .qzr-main-menu-tile:focus-visible .qzr-main-menu-icon {
  color: var(--qz-accent-ink);
}

/* Notification badge */
#modalMainMenu[data-qz-skin="mainmenu"] .qzr-main-menu-tile .active-notifications-count-container {
  top: 8px;
  right: 8px;
}

/* ── Disabled tile (kept visible, non-interactive) ───────────────────────── */
#modalMainMenu[data-qz-skin="mainmenu"] .qzr-main-menu-tile--disabled,
#modalMainMenu[data-qz-skin="mainmenu"] .qzr-main-menu-tile--disabled:hover,
#modalMainMenu[data-qz-skin="mainmenu"] .qzr-main-menu-tile--disabled:focus-visible {
  opacity: .4;
  cursor: not-allowed;
  pointer-events: none;
  transform: none !important;
  border-color: var(--qz-line) !important;
  background: color-mix(in srgb, var(--qz-muted) 8%, var(--qz-surface)) !important;
  color: var(--qz-muted) !important;
  box-shadow: none !important;
}
#modalMainMenu[data-qz-skin="mainmenu"] .qzr-main-menu-tile--disabled .qzr-main-menu-icon {
  color: var(--qz-muted);
}