/* =========================================================
   SHELL.CSS — Static UI Frame (Topbar, Sidebar, Account Dropdown)
   This file should NEVER be modified by dynamic view loading.
   All classes are namespaced to prevent collision.
========================================================= */

/* ===== Base Reset (Shell-scoped) ===== */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
  font-family: "Lexend Deca", sans-serif;
  background: #f9fafb;
  color: #111827;
  overflow: hidden;
}

/* =========================================================
   TOPBAR — Fixed horizontal header
========================================================= */
.mm-topbar {
  height: 52px;
  background: linear-gradient(180deg, #0a1e3d 0%, #071428 100%);
  color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  font-weight: 500;
  z-index: 100;
  position: sticky;
  top: 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.mm-topbar .mm-top-left {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1px;
}

.mm-topbar .mm-app-version {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.42);
  font-variant-numeric: tabular-nums;
  user-select: none;
  line-height: 1;
  min-height: 10px;
  padding-left: 2px;
}

.mm-topbar .mm-logo-text {
  font-size: 26px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.3px;
  user-select: none;
  line-height: 1;
}

.mm-topbar .mm-logo-text .mx-logo-aura {
  color: #7c3aed;
}

.mm-topbar .mm-logo-text .mx-logo-tm {
  font-size: 12px;
  font-weight: 500;
  color: #7c3aed;
  vertical-align: top;
  position: relative;
  top: 1px;
  margin-left: 1px;
  opacity: 0.85;
  line-height: 1;
}

.mm-topbar .mm-top-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* =========================================================
   ACCOUNT DROPDOWN (HubSpot-style)
========================================================= */

/* Settings Gear Button (mirrors bell pattern) */
.settings-gear-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.settings-gear {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: transparent;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s ease;
  color: #E2E8F0;
}

.settings-gear:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.settings-gear.active {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
}

.settings-gear svg {
  width: 22px;
  height: 22px;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Wrapper */
.mm-account-dropdown-wrapper {
  position: relative;
}

/* Trigger Button */
.mm-account-trigger {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
  color: #fff;
  font-family: "Lexend Deca", sans-serif;
}

.mm-account-trigger:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.3);
}

.mm-account-trigger.active {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.4);
}

.mm-account-trigger-name {
  font-size: 14px;
  font-weight: 500;
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mm-account-trigger-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255, 255, 255, 0.3);
}

.mm-account-trigger-caret {
  width: 10px;
  height: 6px;
  opacity: 0.7;
  transition: transform 0.2s ease;
}

.mm-account-trigger.active .mm-account-trigger-caret {
  transform: rotate(180deg);
}

/* Dropdown Panel */
.mm-account-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 300px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.05);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: all 0.2s ease;
  z-index: 1000;
  overflow: hidden;
}

.mm-account-dropdown.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* User Section */
.mm-dropdown-user-section {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: #f8fafc;
  border-bottom: 1px solid #e5e7eb;
}

.mm-dropdown-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #e5e7eb;
}

.mm-dropdown-user-info {
  flex: 1;
  min-width: 0;
}

.mm-dropdown-user-name {
  font-size: 15px;
  font-weight: 600;
  color: #1f2937;
  margin-bottom: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mm-dropdown-user-email {
  font-size: 13px;
  color: #6b7280;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Profile Link */
.mm-dropdown-profile-link {
  display: block;
  padding: 12px 16px;
  font-size: 14px;
  color: #0073b1;
  text-decoration: none;
  transition: background 0.15s ease;
}

.mm-dropdown-profile-link:hover {
  background: #f3f4f6;
  color: #005a8c;
}

/* Divider */
.mm-dropdown-divider {
  height: 1px;
  background: #e5e7eb;
  margin: 0;
}

/* Section Label */
.mm-dropdown-section-label {
  padding: 12px 16px 8px;
  font-size: 11px;
  font-weight: 600;
  color: #9ca3af;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Account Row */
.mm-dropdown-account-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  cursor: pointer;
  transition: background 0.15s ease;
}

.mm-dropdown-account-row:hover {
  background: #f3f4f6;
}

.mm-dropdown-account-info {
  flex: 1;
  min-width: 0;
}

.mm-dropdown-account-name {
  font-size: 14px;
  font-weight: 500;
  color: #1f2937;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mm-dropdown-account-type {
  font-size: 12px;
  color: #6b7280;
  margin-top: 2px;
}

.mm-dropdown-account-arrow {
  width: 6px;
  height: 10px;
  color: #9ca3af;
  flex-shrink: 0;
}

/* Dropdown Links */
.mm-dropdown-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  font-size: 14px;
  color: #374151;
  text-decoration: none;
  transition: background 0.15s ease;
}

.mm-dropdown-link:hover {
  background: #f3f4f6;
}

.mm-dropdown-link svg {
  flex-shrink: 0;
  color: #6b7280;
}

/* Settings Link */
.mm-dropdown-settings-link {
  color: #374151;
}

.mm-dropdown-settings-link:hover {
  color: #1f2937;
}

/* Sign Out */
.mm-dropdown-signout {
  color: #0073b1;
}

.mm-dropdown-signout:hover {
  color: #005a8c;
  background: #f3f4f6;
}

/* =========================================================
   ACCOUNT SWITCHER STYLES
========================================================= */

/* Account Switcher List */
.mm-account-switcher-list {
  max-height: 200px;
  overflow-y: auto;
}

/* Current Account (with checkmark) */
.mm-dropdown-account-row.mm-account-current {
  background: #eff6ff;
  border-left: 3px solid #2563eb;
}

.mm-dropdown-account-row.mm-account-current .mm-dropdown-account-name {
  color: #1e40af;
  font-weight: 600;
}

.mm-dropdown-account-check {
  color: #2563eb;
  flex-shrink: 0;
}

/* Switchable Account Rows */
.mm-dropdown-account-row.mm-account-switchable {
  cursor: pointer;
  transition: background 0.15s ease;
}

.mm-dropdown-account-row.mm-account-switchable:hover {
  background: #f3f4f6;
}

.mm-dropdown-account-row.mm-account-switchable:hover .mm-dropdown-account-name {
  color: #1f2937;
}

/* Role-based styling */
.mm-dropdown-account-type[data-role="owner"] {
  color: #7c3aed;
}

.mm-dropdown-account-type[data-role="admin"] {
  color: #2563eb;
}

.mm-dropdown-account-type[data-role="consultant"] {
  color: #059669;
}

/* Scrollbar for account list */
.mm-account-switcher-list::-webkit-scrollbar {
  width: 4px;
}

.mm-account-switcher-list::-webkit-scrollbar-track {
  background: transparent;
}

.mm-account-switcher-list::-webkit-scrollbar-thumb {
  background: #d1d5db;
  border-radius: 2px;
}

.mm-account-switcher-list::-webkit-scrollbar-thumb:hover {
  background: #9ca3af;
}

/* =========================================================
   LAYOUT CONTAINER
========================================================= */
.mm-container {
  display: flex;
  flex-direction: row;
  height: calc(100vh - 52px);
  overflow: visible !important;
  background: #f8fafc;
  position: relative;
  z-index: 1;
}

/* =========================================================
   SIDEBAR — Vertical navigation
========================================================= */
.mm-sidebar {
  width: 220px;
  background: linear-gradient(180deg, #071428 0%, #050e1d 100%);
  color: #fff;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  padding-top: 12px;
  overflow: visible !important;
  position: relative;
  z-index: 100;
  box-shadow: 1px 0 3px rgba(0, 0, 0, 0.15);
}

/* Inner corner radius where sidebar meets content area */
.mm-sidebar::after {
  content: "";
  position: absolute;
  top: 0;
  right: -8px;
  width: 8px;
  height: 8px;
  background: radial-gradient(circle at 0% 0%, transparent 8px, #fff 8px);
  z-index: 101;
  pointer-events: none;
}

.mm-sidebar ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.mm-sidebar li {
  margin: 2px 0;
}

.mm-nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 18px;
  font-size: 15px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
  border-left: 3px solid transparent;
  transition: all 0.15s ease;
  cursor: pointer;
}

.mm-nav-item:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.mm-nav-item.active {
  background: rgba(255, 255, 255, 0.12);
  border-left: 3px solid #3b82f6;
  color: #fff;
}

.mm-nav-item span {
  flex: 1;
}

/* =========================================================
   EXPANDABLE NAV GROUPS
   Messaging and Analytics are groups; Content nests one level
   deeper inside Messaging.
========================================================= */

/* Icons ship as bare <svg> with no width/height - they are sized by the rule
   that lists every container they can appear in. The group header was missing
   from that list, which is why Messaging and Analytics rendered with 24px-plus
   icons blowing out the row. */
.mm-nav-expandable-header > svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  opacity: 0.7;
}

.mm-nav-expandable-header:hover > svg,
.mm-nav-expandable-header.active > svg { opacity: 1; }

/* The caret is in the same container and must stay small. */
.mm-nav-expandable-header > svg.mm-nav-caret {
  width: 10px;
  height: 10px;
}

.mm-nav-expandable-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 18px;
  font-size: 15px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
  border-left: 3px solid transparent;
  transition: all 0.15s ease;
  cursor: pointer;
  user-select: none;
}

.mm-nav-expandable-header:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.mm-nav-expandable-header.active {
  color: #fff;
}

.mm-nav-expandable-header span {
  flex: 1;
}

.mm-nav-caret {
  flex-shrink: 0;
  opacity: 0.55;
  transition: transform 0.15s ease;
}

.mm-nav-expandable.expanded > .mm-nav-expandable-header .mm-nav-caret {
  transform: rotate(90deg);
}

.mm-nav-subitems {
  list-style: none;
  margin: 0;
  padding: 0;
  display: none;
}

.mm-nav-subitem {
  display: flex;
  align-items: center;
  padding: 9px 18px 9px 50px;
  font-size: 14px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.68);
  border-left: 3px solid transparent;
  transition: all 0.15s ease;
  cursor: pointer;
}

.mm-nav-subitem:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}

.mm-nav-subitem.active {
  background: rgba(255, 255, 255, 0.12);
  border-left: 3px solid #3b82f6;
  color: #fff;
}

/* Nested flyout - Content slides right rather than pushing the list down.
   The row keeps sub-item metrics; the panel reuses .mm-nav-flyout. */
.mm-nav-subflyout {
  position: relative;
}

.mm-nav-subflyout-header {
  display: flex;
  align-items: center;
  padding: 9px 18px 9px 50px;
  font-size: 14px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.68);
  border-left: 3px solid transparent;
  transition: all 0.15s ease;
  cursor: pointer;
  user-select: none;
}

.mm-nav-subflyout-header span { flex: 1; }

.mm-nav-subflyout-header:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}

.mm-nav-subflyout-header.active {
  background: rgba(255, 255, 255, 0.12);
  border-left: 3px solid #3b82f6;
  color: #fff;
}

.mm-nav-subflyout-header .mm-nav-caret {
  width: 10px;
  height: 10px;
  opacity: 0.55;
  transition: transform 0.15s ease;
}

.mm-nav-subflyout.open > .mm-nav-subflyout-header .mm-nav-caret {
  transform: rotate(90deg);
}

/* Panel is positioned against its own row, not the top of the sidebar, so it
   opens beside Content wherever Content happens to sit. */
.mm-nav-subflyout .mm-nav-subflyout-panel {
  top: -8px;
  left: 214px;
}

.mm-nav-subflyout.open > .mm-nav-subflyout-panel {
  display: flex !important;
  opacity: 1 !important;
  transform: translateX(0) !important;
}

/* Level three - Content inside Messaging */
.mm-nav-expandable-header.nested {
  padding: 9px 18px 9px 50px;
  font-size: 14px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.68);
}

.mm-nav-expandable-header.nested:hover { color: #fff; }

.mm-nav-expandable.nested .mm-nav-subitem {
  padding-left: 66px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.58);
}

.mm-nav-expandable.nested .mm-nav-subitem:hover,
.mm-nav-expandable.nested .mm-nav-subitem.active { color: #fff; }

/* Nav Icons */
.mm-nav-icon {
  flex-shrink: 0;
  opacity: 0.7;
  transition: opacity 0.15s ease;
  width: 20px;
  height: 20px;
}

.mm-nav-icon svg {
  width: 20px;
  height: 20px;
}

/* Constrain SVG icons injected directly into nav items */
.mm-nav-item > svg,
.mm-footer-link > svg,
.mm-logout-item > svg,
.mm-nav-group-header > svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  opacity: 0.7;
  transition: opacity 0.15s ease;
}

.mm-nav-item:hover > svg,
.mm-nav-item.active > svg {
  opacity: 1;
}

.mm-nav-item:hover .mm-nav-icon,
.mm-nav-item.active .mm-nav-icon {
  opacity: 1;
}

/* === Resources Group === */
.mm-nav-group {
  position: relative;
  width: 100%;
  overflow: visible !important;
}

.mm-nav-group-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 18px;
  font-size: 15px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
  cursor: pointer;
  user-select: none;
  border-left: 3px solid transparent;
  transition: all 0.15s ease;
}

.mm-nav-group-header:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.mm-nav-group-header:hover .mm-nav-icon {
  opacity: 1;
}

.mm-nav-group-header span {
  flex: 1;
}

.mm-nav-group-header .mm-caret {
  font-size: 14px;
  opacity: 0.6;
  transition: transform 0.2s ease, opacity 0.15s ease;
  margin-left: auto;
}

.mm-nav-group-header:hover .mm-caret {
  opacity: 1;
}

.mm-nav-group-header.open .mm-caret {
  transform: rotate(90deg);
}

.mm-nav-group-header.active {
  background: rgba(255, 255, 255, 0.12);
  border-left: 3px solid #3b82f6;
  color: #fff;
}

.mm-nav-group-header.active .mm-nav-icon {
  opacity: 1;
}

/* === Flyout (HubSpot-style) === */
.mm-nav-flyout {
  position: absolute;
  top: 0;
  left: 220px;
  background: #1e3a5f;
  color: #fff;
  width: 180px;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.1);
  display: none;
  flex-direction: column;
  padding: 8px 0;
  z-index: 9999;
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.mm-nav-group.open .mm-nav-flyout {
  display: flex !important;
  opacity: 1 !important;
  transform: translateX(0) !important;
}

.mm-nav-flyout .mm-nav-item {
  padding: 10px 16px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.85);
  font-weight: 400;
  transition: all 0.15s ease;
  border-left: none;
  gap: 0;
}

.mm-nav-flyout .mm-nav-item:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.mm-nav-flyout .mm-nav-item.active {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
}

/* Sidebar Footer */
.mm-sidebar-footer {
  margin-top: auto;
  padding: 8px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.mm-footer-link {
  color: rgba(255, 255, 255, 0.6) !important;
}

.mm-footer-link:hover {
  color: #fff !important;
  background: rgba(255, 255, 255, 0.08);
}

.mm-footer-link .mm-nav-icon {
  opacity: 0.5;
}

.mm-footer-link:hover .mm-nav-icon {
  opacity: 0.8;
}

.mm-logout-item {
  color: rgba(255, 255, 255, 0.6) !important;
}

.mm-logout-item:hover {
  color: #fff !important;
  background: rgba(255, 255, 255, 0.08);
}

.mm-logout-item .mm-nav-icon {
  opacity: 0.5;
}

.mm-logout-item:hover .mm-nav-icon {
  opacity: 0.8;
}

/* =========================================================
   MAIN CONTENT WRAPPER — Contains dynamic content
========================================================= */
.mm-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #fff;
  width: 100%;
}

/* Dynamic content container — see styles.css for authoritative definition */

/* Context Header - The title bar above content */
.mm-context-header {
  display: flex;
  flex-direction: column;
  padding: 16px 24px 0;
  background: #fff;
  border-bottom: 1px solid #e5e7eb;
  flex-shrink: 0;
  min-height: 70px;
}

.mm-context-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.mm-context-left h2 {
  font-size: 20px;
  font-weight: 600;
  color: #111827;
  margin: 0;
}

/* === NAVIGATION BACK BUTTON === */
.nav-back-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid #e5e7eb;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
  transition: all 0.15s ease;
  flex-shrink: 0;
}

.nav-back-btn:hover {
  background: #f3f4f6;
  border-color: #d1d5db;
}

.nav-back-btn:active {
  background: #e5e7eb;
}

.nav-back-btn svg {
  width: 16px;
  height: 16px;
  color: #374151;
}

.nav-back-btn.hidden {
  display: none;
}

.mm-context-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* =========================================================
   RESPONSIVE — Shell adjustments only
========================================================= */
@media (max-width: 768px) {
  .mm-sidebar {
    width: 180px;
  }
  
  .mm-nav-flyout {
    left: 180px;
  }
  
  .mm-account-trigger-name {
    display: none;
  }
}

@media (max-width: 480px) {
  .mm-sidebar {
    width: 60px;
  }
  
  .mm-nav-item,
  .mm-nav-group-header {
    padding: 10px 12px;
    font-size: 0;
  }
  
  .mm-nav-flyout {
    left: 60px;
  }
}

@keyframes mm-spin {
  to { transform: rotate(360deg); }
}

/* =========================================================
   CONNECTION ALERT BANNER
   Persistent banners between topbar and .mm-container.
   Two variants: warning (amber, broken connection) and
   info (blue, onboarding / no connection yet).
========================================================= */
.conn-alert-banner {
  width: 100%;
  flex-shrink: 0;
  z-index: 50;
}

/* Warning variant (amber) — broken connection */
.conn-alert-banner.conn-alert-warning {
  background: #fffbeb;
  border-bottom: 1px solid #fde68a;
}

.conn-alert-warning .conn-alert-icon { color: #d97706; }
.conn-alert-warning .conn-alert-text { color: #92400e; }
.conn-alert-warning .conn-alert-action { background: #d97706; }
.conn-alert-warning .conn-alert-action:hover { background: #b45309; }
.conn-alert-warning .conn-alert-dismiss { color: #92400e; }
.conn-alert-warning .conn-alert-dismiss:hover { background: rgba(146, 64, 14, 0.1); }

/* Info variant (blue) — onboarding / no connection */
.conn-alert-banner.conn-alert-info {
  background: #eff6ff;
  border-bottom: 1px solid #bfdbfe;
}

.conn-alert-info .conn-alert-icon { color: #2563eb; }
.conn-alert-info .conn-alert-text { color: #1e40af; }
.conn-alert-info .conn-alert-action { background: #6366f1; }
.conn-alert-info .conn-alert-action:hover { background: #4f46e5; }
.conn-alert-info .conn-alert-dismiss { color: #1e40af; }
.conn-alert-info .conn-alert-dismiss:hover { background: rgba(37, 99, 235, 0.1); }

.conn-alert-inner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  max-width: 100%;
}

.conn-alert-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}

.conn-alert-text {
  flex: 1;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
}

.conn-alert-action {
  flex-shrink: 0;
  padding: 5px 14px;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s ease;
}

.conn-alert-action:hover {
  color: #fff;
}

.conn-alert-dismiss {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
  border-radius: 4px;
  transition: background 0.15s ease;
}

/* v3.1.280: restored - the cleanup's dedup kept copies that live in sheets
   which are never loaded (base/core.css and friends). These are the live ones. */
a {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
.mm-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 80px 24px;
  flex: 1;
  min-height: 300px;
}
.mm-loading-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid #e5e7eb;
  border-top-color: #1e3a5f;
  border-radius: 50%;
  animation: mm-spin 0.7s linear infinite;
}
.mm-loading-text {
  font-size: 14px;
  color: #6b7280;
  font-weight: 400;
}

/* v3.1.309: the nav scrolls when it outgrows the viewport. Thin, quiet
   scrollbar; the footer (Getting Started, Sign out) stays pinned below.
   Flyout panels are position:fixed so the scroll container cannot clip them;
   sidebar.js sets their top from the item's rect when they open. */
.mm-nav-root {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
  scrollbar-gutter: stable;
}
.mm-nav-root::-webkit-scrollbar { width: 6px; }
.mm-nav-root::-webkit-scrollbar-track { background: transparent; }
.mm-nav-root::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.14); border-radius: 6px; }
.mm-nav-root:hover::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.28); }
.mm-nav-flyout, .mm-nav-subflyout .mm-nav-subflyout-panel {
  position: fixed;
  left: 220px;
  top: auto;
}