/* ═══════════════════════════════════════════════════════════
   emergency.css — Emergency mode UI for Mello
   ═══════════════════════════════════════════════════════════ */


/* ── Storm icon (inside .topbar-left, after #homeButton) ── */

.mn-emergency-storm-icon {
  display: block;
  color: #e67e22;
  font-size: 1.45rem;
  line-height: 1;
  cursor: default;
  transform: translateY(1px);
  animation: mn-storm-blink 2s steps(1, end) infinite;
}

.mn-emergency-icon.is-active {
  display: inline-flex;
}

@keyframes mn-storm-blink {
  0%, 49.999% {
    opacity: 1;
  }
  50%, 100% {
    opacity: 0.75;
  }
}

/* Tooltip */
.mn-emergency-tooltip {
  position: absolute;
  top: calc(100% + 0.55rem);
  left: 0;
  transform: none;
  background: var(--panel-bg, #1a1a2e);
  color: var(--color-text, #f0f0f0);
  border: 1px solid var(--panel-border, rgba(255,255,255,.14));
  padding: 0.6rem 0.8rem;
  border-radius: var(--radius-panel, 6px);
  font-size: 0.78rem;
  line-height: 1.45;
  max-width: 260px;
  white-space: normal;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s, visibility 0.2s;
  z-index: 9999;
}
.mn-emergency-tooltip::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 0.75rem;
  border: 6px solid transparent;
  border-bottom-color: var(--panel-border, rgba(255,255,255,.14));
}

.mn-emergency-icon:hover .mn-emergency-tooltip,
.mn-emergency-icon:focus-within .mn-emergency-tooltip {
  opacity: 1;
  visibility: visible;
}


/* ── Snackbar (below .topbar) ── */

.mn-snackbar {
  position: fixed;
  /* sits just below the topbar (60px height + some padding) */
  top: 72px;
  left: 1rem;
  max-width: 440px;
  z-index: 10000;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.65rem 0.9rem;
  border-radius: var(--radius-panel, 6px);
  font-family: var(--font-body);
  font-size: 0.85rem;
  line-height: 1.4;
  color: #fff;
  box-shadow: 0 6px 24px rgba(0,0,0,.3);
  transform: translateY(-0.75rem);
  opacity: 0;
  transition:
    transform 0.35s cubic-bezier(.22,1,.36,1),
    opacity 0.35s ease;
  pointer-events: none;
}
.mn-snackbar.is-visible {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.mn-snackbar--warning {
  background: linear-gradient(135deg, #e67e22, #d35400);
}
.mn-snackbar--info {
  background: linear-gradient(135deg, #27ae60, #1e8449);
}
.mn-snackbar i { font-size: 1rem; flex-shrink: 0; }
.mn-snackbar-text { flex: 1; }

@media (max-width: 600px) {
  .mn-snackbar { left: 0.5rem; right: 0.5rem; max-width: none; }
}


/* ── Desktop topnav: dimmed + diagonal line ── */

.mn-nav-disabled {
  position: relative;
  opacity: 0.3 !important;
  pointer-events: none !important;
  cursor: not-allowed;
}

/* ── Mobile hamburger menu: dimmed + strikethrough ── */

.mn-menu-disabled {
  opacity: 0.3 !important;
  pointer-events: none !important;
  cursor: not-allowed;
}
.mn-menu-disabled {
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
}


/* ── Global player slide-out ── */

#globalPlayer.mn-player-emergency {
  transform: translateY(100%);
  opacity: 0;
  pointer-events: none;
  transition:
    transform 0.5s cubic-bezier(.22,1,.36,1),
    opacity 0.3s ease;
}


/* ── Body class: hide images in news + home ── */

.mn-emergency .mn-article-media img,
.mn-emergency .news-top-lead-media img,
.mn-emergency .news-top-rail-thumb img,
.mn-emergency .news-feed-media img,
.mn-emergency .news-critical-compact-media img,
.mn-emergency .news-hero-article .mn-article-media img {
  display: none !important;
}

/* Placeholder background for empty image slots */
.mn-emergency .has-fallback {
  background: var(--hover-bg, rgba(255,255,255,.05));
}

/* Also hide home page images (brand hero etc.) */
.mn-emergency .mn-home-header img,
.mn-emergency .mn-link-card-thumb img {
  display: none !important;
}


/* ── Admin toggle in #settingsDropdown ── */

.mn-emergency-toggle-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  gap: 0.75rem;
  padding: 0.35rem 0.4rem;
  border-radius: 0.5rem;
}
.mn-emergency-toggle-label:hover {
  background: var(--hover-bg);
}

.mn-emergency-toggle-text {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-header);
  font-size: 0.95rem;
  font-weight: 700;
  color: #e67e22;
}

/* Toggle switch (matching your existing theme option sizing) */
.mn-toggle-switch {
  position: relative;
  width: 2.6rem;
  height: 1.4rem;
  flex-shrink: 0;
}
.mn-toggle-switch input {
  opacity: 0; width: 0; height: 0; position: absolute;
}
.mn-toggle-slider {
  position: absolute;
  inset: 0;
  cursor: pointer;
  background: var(--color-accent-soft, rgba(255,255,255,.15));
  border-radius: 1.4rem;
  transition: background 0.25s;
}
.mn-toggle-slider::before {
  content: "";
  position: absolute;
  height: 1rem;
  width: 1rem;
  left: 0.2rem;
  bottom: 0.2rem;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.25s;
}
.mn-toggle-switch input:checked + .mn-toggle-slider {
  background: #e67e22;
}
.mn-toggle-switch input:checked + .mn-toggle-slider::before {
  transform: translateX(1.2rem);
}
.mn-toggle-switch input:focus-visible + .mn-toggle-slider {
  outline: 2px solid #e67e22;
  outline-offset: 2px;
}

/* Fuel display */

.mn-emergency #fuelPriceBadge {
  display: none !important;
}

/* Responsive */

@media (max-width: 900px) {
  .topbar-left {
    grid-column: 1 / -1;
    justify-self: stretch;
    position: relative;
    width: 100%;
    justify-content: center;
    gap: 0.3rem;
  }

  #navMobileToggle {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
  }

  .brand {
    margin: 0;
  }

  .mn-emergency-icon {
    margin-left: 0.2rem;
    flex: 0 0 auto;
  }
}