/* MitaBase Pro — a product of ETMITA · https://etmita.com
   Copyright © ETMITA. All rights reserved. */
/* public/navbar.css — the top navbar v3 "the lit bar" (markup + behaviour
   in /js/shell/navbar.js, emitted from src/features/shell/). Loaded AFTER
   style.css so it wins.

   The sidebar is the road; the bar is the sky over it. One glass surface
   with the rail's lime dawn continued along the start, one hairline
   underneath, and every control drawn on it in the same two inks: ink
   for the ground, lime for whatever is live. Fields are drawn, not
   filled (the search is a line, not a slab); the tenant's logo sits on
   a white disc because a logo may be black; the clock is one line.

   Motion: --mb-ease-out for hovers, --nav-ease-settle for anything that
   arrives (popovers, their rows, the theme thumb); 150–320 ms; the one
   loop is the live dot. The bar is LTR in every language (.nav-inner
   pins it), so NO rule in here may flip on html[dir] — the last one that
   did pushed the theme thumb out of its track in Persian and Arabic. */

#app-navbar {
  --nav-ease-settle: cubic-bezier(0.22, 1, 0.36, 1);
  --nav-dawn: rgba(164, 240, 58, 0.11);
  --nav-glass: rgba(255, 255, 255, 0.84);
  --nav-ground: #fff;
  --nav-line: var(--mb-line);
  --nav-hair: var(--mb-hairline);
  --nav-hover: var(--mb-row);
  --nav-shadow: 0 24px 56px rgba(23, 23, 23, 0.16), 0 4px 12px rgba(23, 23, 23, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.7);
  position: sticky;
  top: 0;
  z-index: var(--mb-z-navbar);
  background:
    linear-gradient(90deg, var(--nav-dawn), transparent 380px),
    var(--nav-glass);
  backdrop-filter: blur(16px) saturate(1.5);
  -webkit-backdrop-filter: blur(16px) saturate(1.5);
  border-bottom: 1px solid var(--nav-hair);
  font-family: var(--mb-font-sans);
  color: var(--mb-ink);
}
body.dark #app-navbar {
  --nav-dawn: rgba(164, 240, 58, 0.07);
  --nav-glass: rgba(9, 9, 11, 0.78);
  --nav-ground: var(--mb-ink-2);
  --nav-line: rgba(255, 255, 255, 0.12);
  --nav-hair: rgba(255, 255, 255, 0.08);
  --nav-hover: rgba(255, 255, 255, 0.07);
  --nav-shadow: 0 24px 56px rgba(0, 0, 0, 0.55), 0 4px 12px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  color: var(--mb-alt);
}
html[lang="fa"] #app-navbar { font-family: var(--mb-font-fa); }

/* skip link — the first focusable thing on the page */
.nav-skip {
  position: absolute;
  inset-inline-start: 12px;
  top: -40px;
  padding: 8px 12px;
  border-radius: 8px;
  background: var(--mb-ink);
  color: var(--mb-lime);
  font-size: 12px;
  font-weight: 700;
  z-index: 2;
  transition: top var(--mb-dur-fast);
}
.nav-skip:focus { top: 8px; outline: 2px solid var(--mb-lime); }

/* the row — 56 px, LTR in every language (mandate-bar.css reads this
   height as its own `top`; keep it the first height in the file) */
.nav-inner {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px;
  height: 56px;
  padding: 0 14px;
  direction: ltr;
}
.nav-spacer { flex: 1; }
svg.nav-ic {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}
.nav-chev { width: 12px; height: 12px; opacity: 0.55; transition: transform var(--mb-dur-slow) var(--nav-ease-settle), opacity var(--mb-dur-fast); }
button[aria-expanded="true"] .nav-chev { transform: rotate(180deg); opacity: 1; }

/* ── Where you are ─────────────────────────────────────────────────── */
/* the title never gives way to the search: the field shrinks first
   (flex 0 1 below), the where-block keeps its words up to 280px */
.nav-where {
  display: flex;
  align-items: center;
  gap: 11px;
  flex: none;
  max-width: 280px;
  min-width: 0;
  padding: 4px 10px 4px 4px;
  border-radius: 12px;
  transition: opacity 180ms var(--mb-ease-out), transform 180ms var(--mb-ease-out);
}
.nav-where.swap { opacity: 0; transform: translateY(3px); }
.nav-where-ic {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 11px;
  background: linear-gradient(160deg, var(--mb-ink-2), var(--mb-ink));
  color: var(--mb-lime);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 6px 14px rgba(23, 23, 23, 0.18);
  flex: none;
}
/* 2px between the crumb and the title: at line-height 1.1 the two sat
   on top of one another and the block read as one smudge (operator,
   2026-09-14). */
.nav-where-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; line-height: 1.1; }
.nav-where-crumb {
  font-family: var(--mb-font-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mb-muted);
  white-space: nowrap;
}
.nav-where-title {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 640px) { .nav-where-crumb { display: none; } }

/* ── The search field — a drawn line, not a filled slab ───────────── */
.nav-search {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 1 auto;
  width: min(420px, 28vw);
  min-width: 170px;
  height: 38px;
  padding: 0 6px 0 14px;
  border-radius: 999px;
  border: 1px solid var(--field-line);
  background: var(--field-ground);
  color: var(--mb-muted);
  cursor: text;
  font-family: inherit;
  text-align: start;
  transition: border-color var(--mb-dur-fast), box-shadow var(--mb-dur-base) var(--mb-ease-out), color var(--mb-dur-fast);
}
.nav-search .nav-ic { color: var(--mb-faint); transition: color var(--mb-dur-fast); }
body.dark .nav-search { color: var(--mb-faint); }
.nav-search:hover, .nav-search:focus-visible {
  border-color: var(--mb-lime-mid);
  box-shadow: 0 0 0 4px rgba(164, 240, 58, 0.14);
  color: var(--mb-body);
  outline: none;
}
.nav-search:hover .nav-ic, .nav-search:focus-visible .nav-ic { color: var(--mb-lime-text); }
body.dark .nav-search:hover, body.dark .nav-search:focus-visible { color: var(--mb-ondark); }
body.dark .nav-search:hover .nav-ic, body.dark .nav-search:focus-visible .nav-ic { color: var(--mb-lime); }
.nav-search-text { position: relative; flex: 1; min-width: 0; height: 18px; overflow: hidden; }
.nav-search-ph, .nav-search-hint {
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 600;
  transition: transform var(--mb-dur-slow) var(--nav-ease-settle), opacity var(--mb-dur-base);
}
.nav-search-hint { opacity: 0; transform: translateY(14px); font-family: var(--mb-font-mono); font-size: 11px; letter-spacing: 0.02em; font-weight: 500; }
.nav-search:hover .nav-search-ph, .nav-search:focus-visible .nav-search-ph { opacity: 0; transform: translateY(-14px); }
.nav-search:hover .nav-search-hint, .nav-search:focus-visible .nav-search-hint { opacity: 1; transform: translateY(0); }
/* A chip inside a fully rounded shell takes the shell's radius — a 7px
   box inside a 999px pill reads as a sticker somebody dropped in
   (operator, 2026-09-14). Same law for the logo disc in the account
   pill below; the 40px tile in the dropdown PANEL keeps its 10px,
   because its shell is a rectangle. */
.nav-kbd {
  font-family: var(--mb-font-mono);
  font-size: 10.5px;
  font-weight: 600;
  color: var(--mb-muted);
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--nav-line);
  background: var(--nav-ground);
  flex: none;
}
@media (max-width: 900px) {
  .nav-search { width: 40px; min-width: 40px; padding: 0; justify-content: center; }
  .nav-search-text, .nav-kbd { display: none; }
}

/* ── Live clock — one line: dot · 14:32 07 │ Do., 17.09.2026 ────────
   European everywhere (de-DE, Gregorian, 24 h, latin digits) whatever
   the language — the office runs on the German calendar. */
.nav-clock {
  display: flex;
  align-items: center;
  gap: 9px;
  height: 38px;
  padding: 0 12px 0 11px;
  border-radius: 999px;
  margin-inline-end: 2px;
}
.nav-clock-row { display: flex; align-items: baseline; gap: 5px; }
.nav-clock-time {
  font-family: var(--mb-font-mono);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.nav-clock-sec { font-size: 10.5px; font-weight: 600; letter-spacing: 0.04em; color: var(--mb-faint); }
.nav-clock-sep { width: 1px; height: 14px; background: var(--nav-line); flex: none; }
.nav-clock-date {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--mb-muted);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.nav-live-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--mb-lime-mid);
  box-shadow: 0 0 0 3px rgba(164, 240, 58, 0.18);
  animation: nav-live 2.4s ease-in-out infinite;
  flex: none;
}
@keyframes nav-live {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 3px rgba(164, 240, 58, 0.18); }
  50% { opacity: 0.5; box-shadow: 0 0 0 5px rgba(164, 240, 58, 0.06); }
}
@media (max-width: 1320px) { .nav-clock-sep, .nav-clock-date { display: none; } }
@media (max-width: 900px) { .nav-clock { display: none; } }

/* ── Pills ─────────────────────────────────────────────────────────── */
.nav-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 11px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  transition: background var(--mb-dur-fast), border-color var(--mb-dur-fast), transform var(--mb-dur-base) var(--mb-ease-out);
}
.nav-pill:hover, .nav-pill[aria-expanded="true"] { background: var(--nav-hover); }
.nav-pill:hover { transform: translateY(-1px); }
.nav-pill:focus-visible { outline: 2px solid var(--mb-lime); outline-offset: 1px; }
.nav-pill-icon { width: 38px; padding: 0; justify-content: center; position: relative; }
/* the language: its code as a lime chip, the globe beside it */
.nav-pill-code {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 7px;
  border-radius: 999px;
  border: 1px solid rgba(164, 240, 58, 0.55);
  background: var(--mb-lime-50);
  color: var(--mb-lime-deep);
  font-family: var(--mb-font-mono);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
  line-height: 1;
}
body.dark .nav-pill-code { background: rgba(164, 240, 58, 0.12); border-color: rgba(164, 240, 58, 0.3); color: var(--mb-lime); }

/* ── Theme: one thumb slides between sun and moon ─────────────────
   The track is LTR like the rest of the bar: the thumb starts at the
   left and travels +30px to the moon. Physical `left`, on purpose. */
.nav-seg {
  position: relative;
  display: flex;
  height: 36px;
  padding: 3px;
  border-radius: 999px;
  border: 1px solid var(--nav-line);
  background: var(--nav-ground);
}
.nav-seg-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 30px;
  height: 28px;
  border-radius: 999px;
  background: var(--mb-ink);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.14);
  transition: transform var(--mb-dur-slow) var(--nav-ease-settle), background var(--mb-dur-base), box-shadow var(--mb-dur-base);
}
.nav-seg[data-theme="dark"] .nav-seg-thumb { transform: translateX(30px); background: var(--mb-lime); box-shadow: 0 2px 10px rgba(164, 240, 58, 0.45); }
.nav-seg-btn {
  position: relative;
  z-index: 1;
  width: 30px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--mb-muted);
  cursor: pointer;
  transition: color var(--mb-dur-base), transform var(--mb-dur-base) var(--mb-ease-out);
}
.nav-seg-btn .nav-ic { width: 15px; height: 15px; }
.nav-seg-btn:hover { transform: scale(1.08); }
.nav-seg[data-theme="light"] #nav-theme-light { color: var(--mb-lime); }
.nav-seg[data-theme="dark"] #nav-theme-dark { color: var(--mb-ink); }
.nav-seg-btn:focus-visible { outline: 2px solid var(--mb-lime); outline-offset: -2px; }

/* ── Bell ──────────────────────────────────────────────────────────── */
.nav-badge {
  position: absolute;
  top: -2px;
  inset-inline-end: -3px;
  min-width: 17px;
  height: 17px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--mb-lime);
  color: var(--mb-ink);
  font-family: var(--mb-font-mono);
  font-size: 9.5px;
  font-weight: 800;
  line-height: 17px;
  text-align: center;
  box-shadow: 0 0 0 2px var(--nav-ground);
}
.nav-badge.hidden { display: none !important; }
.nav-pill.ring .nav-ic { animation: nav-ring 0.45s var(--mb-ease-out); transform-origin: 50% 0; }
@keyframes nav-ring {
  0% { transform: rotate(0); }
  25% { transform: rotate(14deg); }
  55% { transform: rotate(-10deg); }
  80% { transform: rotate(5deg); }
  100% { transform: rotate(0); }
}

/* ── Popover card — arrives on the settle curve, rows a beat apart ── */
.nav-pop-wrap { position: relative; }
.nav-dd {
  position: absolute;
  top: calc(100% + 8px);
  inset-inline-end: 0;
  display: flex;
  flex-direction: column;
  min-width: 248px;
  max-width: min(360px, calc(100vw - 24px));
  padding: 6px;
  border-radius: 16px;
  border: 1px solid var(--nav-line);
  background: var(--nav-ground);
  color: var(--mb-ink);
  box-shadow: var(--nav-shadow);
  z-index: var(--mb-z-pop);
  transform-origin: top right;
  animation: nav-dd-in 260ms var(--nav-ease-settle) both;
}
body.dark .nav-dd { color: var(--mb-alt); }
.nav-dd.hidden { display: none !important; }
.nav-dd.flex { flex-direction: column; }
.nav-dd-item > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-dd-wide { min-width: 348px; }
@keyframes nav-dd-in {
  from { opacity: 0; transform: translateY(-10px) scale(0.96); }
  to { opacity: 1; transform: none; }
}
@keyframes nav-dd-row {
  from { opacity: 0; transform: translateY(-5px); }
  to { opacity: 1; transform: none; }
}
/* every row of every popover rises a beat after the one above (`--i`) */
.nav-dd-item, .nav-notif-q, .nav-notif-row, .nav-lang-item, .nav-dd-head, .nav-notif-head {
  animation: nav-dd-row 300ms var(--mb-ease-out) both;
  animation-delay: calc(var(--i, 0) * 24ms);
}
.nav-dd-item {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  min-height: 40px;
  padding: 8px 10px;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: inherit;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  text-align: start;
  cursor: pointer;
  transition: background var(--mb-dur-fast), padding-inline-start var(--mb-dur-base) var(--mb-ease-out);
}
.nav-dd-item[hidden] { display: none !important; }
.nav-dd-item:hover { background: var(--nav-hover); padding-inline-start: 13px; }
.nav-dd-item .nav-ic { width: 16px; height: 16px; color: var(--mb-muted); transition: color var(--mb-dur-fast), transform var(--mb-dur-base) var(--mb-ease-out); }
.nav-dd-item:hover .nav-ic { color: var(--mb-lime-text); transform: scale(1.1); }
body.dark .nav-dd-item:hover .nav-ic { color: var(--mb-lime); }
.nav-dd-item:focus-visible { outline: 2px solid var(--mb-lime); outline-offset: -2px; }
.nav-dd-sep { height: 1px; margin: 6px 6px; background: var(--nav-hair); }
.nav-dd-sep[hidden] { display: none !important; }
.nav-dd-danger { color: var(--mb-danger); }
.nav-dd-danger .nav-ic, .nav-dd-danger:hover .nav-ic { color: var(--mb-danger); }
.nav-dd-head { display: flex; align-items: center; gap: 11px; padding: 8px 8px 12px; margin-bottom: 4px; border-bottom: 1px solid var(--nav-hair); }
.nav-dd-id { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.nav-dd-name { font-size: 13.5px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-dd-sub { font-family: var(--mb-font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mb-muted); }

/* ── the language sheet (2026-09-07: thirteen languages, not two) ── */
#nav-lang-dd { width: min(400px, calc(100vw - 24px)); padding: 10px; }
.nav-lang-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 4px 8px 8px; }
.nav-lang-title { font-size: 13px; font-weight: 800; }
.nav-lang-count { font-family: var(--mb-font-mono); font-size: 10px; letter-spacing: 0.08em; color: var(--mb-muted); }
.nav-lang-body { max-height: min(60vh, 420px); overflow: auto; overscroll-behavior: contain; }
.nav-lang-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px; }
.nav-lang-item {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 9px;
  min-height: 46px; padding: 6px 9px;
  border: 1px solid transparent; border-radius: 10px;
  background: transparent; color: inherit; font: inherit; text-align: start; cursor: pointer;
  animation-delay: calc(var(--i, 0) * 14ms);
  transition: background var(--mb-dur-fast), border-color var(--mb-dur-fast);
}
.nav-lang-item:hover { background: var(--nav-hover); }
.nav-lang-item:focus-visible { outline: 2px solid var(--mb-lime); outline-offset: -2px; }
.nav-lang-item.active { background: var(--mb-lime-50); border-color: rgba(164, 240, 58, 0.55); }
body.dark .nav-lang-item.active { background: rgba(164, 240, 58, 0.12); border-color: rgba(164, 240, 58, 0.35); }
.nav-lang-code {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 30px; height: 22px; padding: 0 5px; border-radius: 6px;
  background: var(--mb-ink); color: var(--mb-lime);
  font-family: var(--mb-font-mono); font-size: 10px; font-weight: 800; letter-spacing: 0.08em;
}
body.dark .nav-lang-code { background: rgba(0, 0, 0, 0.45); }
.nav-lang-names { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; line-height: 1.2; }
.nav-lang-native { font-size: 13.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-lang-en { font-size: 10.5px; color: var(--mb-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-lang-native[dir="rtl"] { font-family: var(--mb-font-fa, inherit); text-align: start; }
.nav-lang-none { padding: 14px 8px; font-size: 12.5px; color: var(--mb-muted); text-align: center; }
.nav-ic-check { color: var(--mb-lime-text); }
@media (max-width: 480px) {
  #nav-lang-dd { position: fixed; inset-inline: 12px; top: 64px; width: auto; }
  .nav-lang-grid { grid-template-columns: 1fr; }
}

/* ── Notifications ─────────────────────────────────────────────────── */
.nav-notif-head { display: flex; align-items: center; gap: 8px; padding: 8px 10px 8px; }
.nav-notif-title { font-size: 13px; font-weight: 800; }
.nav-notif-new { font-family: var(--mb-font-mono); font-size: 10px; font-weight: 700; padding: 1px 7px; border-radius: 999px; background: var(--mb-lime); color: var(--mb-ink); }
.nav-notif-new.hidden { display: none !important; }
.nav-link { border: none; background: transparent; color: var(--mb-lime-text); font-family: inherit; font-size: 11.5px; font-weight: 700; cursor: pointer; }
body.dark .nav-link { color: var(--mb-lime); }
.nav-notif-list { max-height: 300px; overflow-y: auto; scrollbar-width: thin; }
/* the work half — what waits for a person, each row walks to its tab */
.nav-notif-todo { display: flex; flex-direction: column; gap: 2px; }
.nav-notif-q { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: none; border-radius: 10px; background: transparent; font-family: inherit; text-align: start; cursor: pointer; transition: background var(--mb-dur-fast); }
.nav-notif-q:hover { background: var(--nav-hover); }
.nav-notif-q .nav-notif-t { color: var(--mb-ink); }
body.dark .nav-notif-q .nav-notif-t { color: #fff; }
.nav-notif-n { font-family: var(--mb-font-mono); font-size: 11px; font-weight: 700; min-width: 22px; padding: 2px 7px; border-radius: 999px; text-align: center; background: var(--mb-lime); color: var(--mb-ink); flex: none; }
.nav-notif-clear { display: flex; align-items: center; justify-content: center; gap: 7px; padding: 16px 10px; font-size: 12px; color: var(--mb-muted); }
.nav-notif-clear svg { color: var(--mb-lime-deep); }
body.dark .nav-notif-clear svg { color: var(--mb-lime); }
.nav-notif-sec { padding: 10px 10px 4px; font-family: var(--mb-font-mono); font-size: 9.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--mb-faint); border-top: 1px solid var(--nav-hair); margin-top: 6px; }
.nav-notif-row { display: flex; align-items: flex-start; gap: 10px; padding: 9px 10px; border-radius: 10px; transition: background var(--mb-dur-fast); }
.nav-notif-row:hover { background: var(--nav-hover); }
.nav-notif-row.fresh .nav-notif-t { color: var(--mb-ink); }
body.dark .nav-notif-row.fresh .nav-notif-t { color: #fff; }
.nav-notif-ic { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 8px; flex: none; background: var(--mb-row); color: var(--mb-body); }
body.dark .nav-notif-ic { background: rgba(255, 255, 255, 0.06); color: var(--mb-ondark); }
.nav-k-alert { color: var(--mb-danger) !important; background: var(--mb-danger-50) !important; }
.nav-k-ok { color: var(--mb-lime-deep) !important; background: var(--mb-lime-50) !important; }
.nav-k-fuel { color: var(--mb-warn) !important; }
.nav-k-star { color: var(--mb-purple) !important; background: var(--mb-purple-tint) !important; }
.nav-notif-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.nav-notif-t { font-size: 12.5px; font-weight: 700; color: var(--mb-body); }
.nav-notif-s { font-size: 11.5px; color: var(--mb-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-notif-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none; }
.nav-notif-ago { font-family: var(--mb-font-mono); font-size: 9.5px; color: var(--mb-faint); white-space: nowrap; }
.nav-notif-dot { width: 7px; height: 7px; border-radius: 999px; background: var(--mb-lime); }
.nav-notif-empty { padding: 22px 10px; text-align: center; font-size: 12px; color: var(--mb-muted); }
.nav-notif-foot { width: 100%; margin-top: 4px; padding: 9px; border: none; border-top: 1px solid var(--nav-hair); background: transparent; color: var(--mb-lime-text); font-family: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
body.dark .nav-notif-foot { color: var(--mb-lime); }

/* ── Tenant tile — the logo on a white disc, whatever the theme ────
   A customer's mark may be black, or have transparent edges: it sits on
   white with a hairline ring and `contain`, never cropped, never on ink.
   Only the fallback initial (no logo yet) wears the ink disc. */
.nav-company .nav-pill { padding-inline-start: 5px; }
.nav-co-logo {
  position: relative;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--nav-line);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
body.dark .nav-co-logo { border-color: rgba(255, 255, 255, 0.22); }
.nav-co-logo img { width: 100%; height: 100%; object-fit: contain; padding: 3px; box-sizing: border-box; background: #fff; position: relative; z-index: 1; }
.nav-co-logo img:not([src]) { display: none; }
.nav-co-logo img[src] + .nav-co-fallback { display: none; }
.nav-co-fallback { position: absolute; inset: -1px; display: flex; align-items: center; justify-content: center; background: var(--mb-ink); color: var(--mb-lime); font-size: 12px; font-weight: 800; }
/* in the dropdown PANEL, not in the pill — a rectangle's tile */
.nav-co-logo-lg { width: 40px; height: 40px; border-radius: 10px; }
.nav-co-logo-lg img { padding: 4px; }
.nav-co-logo-lg .nav-co-fallback { font-size: 15px; }
.nav-co-name { max-width: 170px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 640px) { .nav-co-name { display: none; } }

/* ── Burger ────────────────────────────────────────────────────────── */
.nav-burger { display: none; }
@media (max-width: 1023px) { .nav-burger { display: flex; } }

/* ── A phone ───────────────────────────────────────────────────────
   burger · where (short) · search lens · globe · bell · tenant, one row;
   the theme segment and the language chip wait in the palette and the
   menu. Last in the file on purpose: it must outrank the rules above. */
@media (max-width: 640px) {
  .nav-inner { gap: 4px; padding: 0 10px; }
  .nav-where { max-width: 120px; padding-inline-end: 4px; }
  .nav-seg { display: none; }
  #nav-lang-btn { width: 38px; padding: 0; justify-content: center; }
  #nav-lang-btn .nav-pill-code, #nav-lang-btn .nav-chev { display: none; }
  .nav-company .nav-pill { padding-inline-end: 5px; }
  .nav-company .nav-chev { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  #app-navbar *, .nav-dd, .nav-dd-item, .nav-seg-thumb, .nav-where, .nav-live-dot {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    transition-duration: 0.01ms !important;
  }
}