/* ==========================================================================
   MISTER FAST — ICON VISUAL PATCH V1.0
   Flat Logistics Vector Style — Blue + Yellow + White
   Scoped to header nav icons and quickbar icon containers.
   Additive only — no existing rules overridden destructively.
   ========================================================================== */

/* ── 1. HEADER NAV ICONS — White rendering on blue navbar ─────────────── */

/*
 * Nav icons (normal state) sit on #003DA5 blue background.
 * SVGs are already white/yellow but need consistent sizing + no rendering artifacts.
 */
.mf-std-nav-icon-circle img {
  width: 14px;
  height: 14px;
  display: block;
  object-fit: contain;
}

/* Normal state circle: tighten to square pill — more enterprise, less circular */
.mf-std-nav-icon-circle {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  border: 1.4px solid rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.mf-std-nav-item:hover .mf-std-nav-icon-circle {
  border-color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.18);
}

/* Active state icon box: on yellow pill, icon should read in dark navy */
.mf-std-nav-icon-box {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: rgba(0, 0, 0, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.mf-std-nav-icon-box img {
  width: 14px;
  height: 14px;
  display: block;
  object-fit: contain;
  /* Active pill is yellow — darken the white icon to navy for contrast */
  filter: brightness(0) saturate(100%);
}

/* Emoji fallback hidden in nav — SVG takes priority */
.mf-std-emoji {
  font-size: 0 !important;
  line-height: 1;
}

/* ── 2. QUICKBAR ICON CONTAINER — Rounded Square, Brand Blue ─────────── */

/*
 * Transform .mf-v4-qicon-box from a bare <img> wrapper
 * into a 44×44 rounded-square container with #EEF3FB background.
 * The SVG icons from mf-icons-v3 are already blue (#003DA5 paths).
 */
.mf-v4-qicon-box {
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: 12px;
  background: #EEF3FB;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-bottom: 8px;
  transition: background-color 0.18s ease, transform 0.18s ease;
  box-shadow: 0 1px 4px rgba(0, 61, 165, 0.08);
}

.mf-v4-qicon-box img {
  width: 24px;
  height: 24px;
  display: block;
  object-fit: contain;
}

/* Hover: lift icon box */
.mf-v4-qitem:hover .mf-v4-qicon-box {
  background: #DDE8F8;
  transform: translateY(-2px);
}

/* Prominent items (first 4): yellow accent border on container */
.mf-v4-qitem.is-prominent .mf-v4-qicon-box {
  background: #EEF3FB;
  border: 2px solid #FFC400;
  box-shadow: 0 2px 8px rgba(255, 196, 0, 0.2);
}

.mf-v4-qitem.is-prominent:hover .mf-v4-qicon-box {
  background: #FFF8DC;
  border-color: #E5AF00;
}

/* Label styling consistency */
.mf-v4-qlabel {
  font-size: 12px;
  font-weight: 600;
  color: #003DA5;
  line-height: 1.3;
  text-align: center;
  max-width: 100%;
  word-break: break-word;
}

/* ── 3. QUICKBAR GRID — Consistent icon centering ─────────────────────── */

/* Ensure each item uses column flex for icon-above-label layout */
.mf-v4-qitem {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 12px 6px 10px;
  gap: 0;
}

/* ── 4. MOBILE — No overflow, icon sizing consistent ──────────────────── */

@media (max-width: 479px) {
  .mf-v4-qicon-box {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 10px;
  }

  .mf-v4-qicon-box img {
    width: 22px;
    height: 22px;
  }

  .mf-v4-qlabel {
    font-size: 11px;
  }
}

@media (min-width: 480px) and (max-width: 767px) {
  .mf-v4-qicon-box {
    width: 42px;
    height: 42px;
    border-radius: 11px;
  }
}

/* ── 5. DESKTOP NAV — Prevent horizontal overflow ─────────────────────── */

@media (min-width: 1024px) {
  .mf-std-nav-list {
    gap: 3px;
  }

  .mf-std-nav-item {
    font-size: 13px;
    padding: 6px 9px;
  }
}

@media (min-width: 1280px) {
  .mf-std-nav-list {
    gap: 5px;
  }

  .mf-std-nav-item {
    font-size: 13.5px;
    padding: 6px 11px;
  }
}