/**
 * myLogbook toolbar — Zone 1.
 *
 * Layout: [logo] -- [fixed icon cluster] -- [status cluster], a 3-item
 * flex row. Under dir="rtl", logo and status-cluster naturally swap
 * visual ends (that's just normal flexbox+dir behavior, nothing special
 * needed) — but the middle fixed-icon-cluster gets an explicit
 * direction:ltr override so ITS children never reverse order, keeping
 * every icon's screen position constant regardless of RTL/LTR. That's
 * the whole trick — the cluster's overall position (middle) doesn't need
 * protecting, only its internal child order does.
 */

.ml-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--ml-toolbar-height);
  padding: 0 var(--ml-space-lg);
  background-color: var(--ml-bg-surface);
  border-bottom: 1px solid var(--ml-border);
  gap: var(--ml-space-md);
  overflow: hidden;
  opacity: 1;
  transition: height var(--ml-dur-base) var(--ml-ease), opacity var(--ml-dur-base) var(--ml-ease), border-color var(--ml-dur-base) var(--ml-ease);
}

/* Auto-hide mode (sticky-toggle button): only the gadget bar collapses on
   scroll-down — the mega-menu row below it is untouched and stays pinned,
   naturally ending up at the very top once this bar's height goes to 0. */
[data-header-mode="autohide"][data-header-hidden="true"] .ml-toolbar {
  height: 0;
  opacity: 0;
  border-bottom-color: transparent;
}

.ml-toolbar-logo {
  flex-shrink: 0;
  font-weight: 800;
  font-size: var(--ml-text-lg);
  letter-spacing: -0.01em;
  color: var(--ml-text-primary);
}

.ml-toolbar-logo:hover {
  color: var(--ml-text-primary);
  text-decoration: none;
}

.ml-toolbar-logo .ml-logo-accent {
  color: var(--ml-accent);
}

.ml-toolbar-fixed-icons {
  display: flex;
  align-items: center;
  gap: var(--ml-space-2xs);
  direction: ltr; /* the key rule — see file header comment */
}

.ml-toolbar-width-group {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-inline-start: var(--ml-space-xs);
  padding-inline-start: var(--ml-space-xs);
  border-inline-start: 1px solid var(--ml-border);
}

.ml-toolbar-status-cluster {
  display: flex;
  align-items: center;
  gap: var(--ml-space-md);
  flex-shrink: 0;
}

.ml-toolbar-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--ml-radius-sm);
  padding: var(--ml-space-3xs) var(--ml-space-xs);
  font-family: var(--ml-font-sans);
  font-size: var(--ml-text-xs);
  font-weight: 600;
  color: var(--ml-text-secondary);
  cursor: pointer;
  transition: background-color var(--ml-dur-fast) var(--ml-ease), color var(--ml-dur-fast) var(--ml-ease);
  white-space: nowrap;
}

.ml-toolbar-btn:hover {
  background-color: var(--ml-bg-muted);
  color: var(--ml-text-primary);
}

.ml-toolbar-btn[aria-pressed="true"] {
  color: var(--ml-accent);
  background-color: var(--ml-accent-bg);
}

.ml-toolbar-status {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: var(--ml-text-xs);
  color: var(--ml-text-muted);
  white-space: nowrap;
}

.ml-toolbar-status span {
  font-size: inherit;
  line-height: inherit;
  vertical-align: baseline;
  font-variant-numeric: normal;
  font-feature-settings: normal;
}

@media (max-width: 640px) {
  .ml-toolbar-status-cluster > .ml-toolbar-status:not(:last-child) {
    display: none; /* keep weather on narrow screens, hide date/time to save space */
  }

  /* The 100%/80%/60% page-width presets are meaningless on a phone (no
     room to shrink into) and were crowding the RTL/LTR toggle out of the
     visible toolbar — once RTL flips, the toolbar's flex order mirrors,
     and whatever's past the edge is clipped (.ml-toolbar has
     overflow: hidden) with no way to reach it. Removing this group's
     width fixes both the pointless preset and the RTL trap. */
  .ml-toolbar-width-group {
    display: none;
  }

  /* Safety net so this specific trap (a control pushed past the edge,
     with .ml-toolbar's overflow: hidden making it permanently
     unreachable) can't happen again even if more buttons get added here
     later — worth it given we just hit exactly that failure mode. */
  .ml-toolbar-fixed-icons {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

html[data-force-mobile] .ml-toolbar-width-group {
  display: none;
}