/* =========================================================
  MENUBAR.CSS
  Top system bar + shared dropdown menus.
  Keep this file only for the menubar, logo menu and language menu.
========================================================= */

.menubar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: var(--menubar-h);
  padding: 0 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #fff;
  background: rgba(86, 82, 96, 0.48);
  border-bottom: 0;
  border-top: 0;
  box-shadow: none;
  -webkit-backdrop-filter: blur(42px) saturate(155%);
  backdrop-filter: blur(42px) saturate(155%);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  z-index: 9999;
  pointer-events: auto;
  cursor: default;
  transition:
    transform 240ms cubic-bezier(.22, .78, .22, 1),
    opacity 160ms ease !important;
  will-change: transform, opacity;
}

/* macOS menus consistently use the arrow cursor, including during the
   fullscreen reveal transition and over nested icons/text. */
.menubar *,
.menu-dropdown,
.menu-dropdown * {
  cursor: default !important;
}

/* In app fullscreen the system bar behaves like the Dock: hidden until the
   pointer reaches the safe trigger strip at the top of the simulated screen. */
body.has-maximized-window .menubar {
  opacity: 0;
  pointer-events: none;
  transform: translateY(calc(-100% - 8px));
}

body.has-maximized-window.menubar-revealed .menubar {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.menubar::after { content: none; }

.menubar-left,
.menubar-right {
  display: flex;
  align-items: center;
  height: 100%;
  gap: 6px;
}

/* The user-facing top bar only contains the logo and status controls. */
.app-menubar {
  display: none !important;
}

.menubar-button,
.menubar-item {
  height: 20px;
  min-width: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 4px;
  padding: 0 6px;
  color: inherit;
  background: transparent;
  font: inherit;
  cursor: default;
}

.menubar-button:hover,
.menubar-button.active {
  background: rgba(255, 255, 255, 0.14);
}

.logo-button:hover,
.logo-button.active {
  background: transparent !important;
}

.menubar-icon {
  width: 14px;
  height: 14px;
  display: block;
}

.menubar-icon.logo-icon {
  width: 18px;
  height: 20px;
  display: block;
  color: #fff;
  filter: none !important;
}

.menubar-icon.search-icon {
  width: 13px;
  height: 13px;
  filter: brightness(0) invert(1);
  opacity: 0.95;
}

.camera-icon {
  /* CameraOn.svg already contains the green rounded rectangle; do not wrap it in another green box. */
  width: 40px;
  height: 27px;
  display: block;
}

.camera-indicator {
  width: 40px;
  min-width: 40px;
  height: 24px;
  padding: 0;
  border-radius: 0;
  background: transparent;
  overflow: visible;
}

.language-button {
  min-width: 27px;
  padding: 0 5px;
  border-radius: 3px;
  font-size: 11px;
}

.language-current-icon,
.language-option-icon {
  width: 20px;
  height: 14px;
  display: block;
  object-fit: contain;
  filter: none !important;
}

.clock-item {
  padding-right: 10px;
  font-weight: 400;
  white-space: nowrap;
}

/* Dropdown structure only. Material and final dimensions live in
   material-lock.css so older app styles cannot compete with them. */
.menu-dropdown {
  position: absolute;
  display: none;
  flex-direction: column;
  z-index: 10000;
  pointer-events: auto;
}

.menu-dropdown.open { display: flex; }

.logo-dropdown {
  left: 0;
  right: auto;
}

.language-dropdown {
  right: 0;
  left: auto;
}

.logo-menu-option,
.language-option {
  border: 0;
  color: inherit;
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: default;
}

.logo-menu-option {
  display: flex;
  align-items: center;
}

/* Logo menu must feel identical to the language dropdown: no extra separators or different rows. */
.logo-menu-option + .logo-menu-option {
  border-top: 0;
}

.language-option {
  display: grid;
  grid-template-columns: 18px 28px 1fr;
  align-items: center;
  column-gap: 4px;
}

.language-option .check {
  font-size: 12px;
  color: #fff;
}

.language-option .label {
  color: rgba(255, 255, 255, 0.86);
}

.language-option.active {
  background: rgba(255,255,255,.10);
}

.logo-menu-option:hover,
.language-option:hover,
.language-option.active:hover {
  background: var(--accent) !important;
  color: #fff !important;
}

.language-option:hover .label,
.language-option:hover .check,
.language-option.active:hover .label,
.language-option.active:hover .check {
  color: #fff !important;
}

.logo-button {
  width: 28px;
  min-width: 28px;
  padding: 0 5px;
}


/* TOPBAR_ALIGNMENT_SOURCE_FIX
   Keep menu bar elements optically centered and symmetrical.
   Logo SVG is white in the SVG file itself; no invert/filter needed. */
.menubar {
  padding-left: 12px !important;
  padding-right: 12px !important;
  height: var(--menubar-h) !important;
  align-items: center !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: var(--menubar-h) !important;
}

.menubar-left,
.menubar-right {
  height: var(--menubar-h) !important;
  align-items: center !important;
  align-self: center !important;
  gap: 6px !important;
}

.menubar-right > *,
.menubar-left > .menubar-button,
.logo-menu,
.language-menu {
  align-self: center !important;
}

.logo-menu,
.language-menu {
  display: inline-flex !important;
  position: relative !important;
  height: var(--menubar-h) !important;
  align-items: center !important;
  justify-content: center !important;
}

.menubar-button,
.menubar-item {
  height: var(--menubar-h) !important;
  min-height: var(--menubar-h) !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  vertical-align: middle !important;
  font-size: 12px !important;
  font-weight: 500 !important;
}

.logo-button {
  width: 26px !important;
  min-width: 26px !important;
  height: var(--menubar-h) !important;
  padding: 0 4px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.menubar-icon.logo-icon {
  width: 17px !important;
  height: 19px !important;
  display: block !important;
  color: #fff !important;
  filter: none !important;
  opacity: 1 !important;
  object-fit: contain !important;
  transform: none !important;
  flex: 0 0 auto !important;
}

.search-menubar-button {
  width: 25px !important;
  min-width: 25px !important;
  padding: 0 5px !important;
}

.menubar-icon.search-icon {
  width: 15px !important;
  height: 15px !important;
  display: block !important;
  filter: brightness(0) invert(1) !important;
  opacity: .94 !important;
  flex: 0 0 auto !important;
}

.language-button {
  height: var(--menubar-h) !important;
  width: 26px !important;
  min-width: 26px !important;
  padding: 0 2px !important;
  font-size: 11px !important;
  line-height: 1 !important;
  font-weight: 600 !important;
}

.language-current-icon {
  width: 22px !important;
  height: 17px !important;
  display: block !important;
  object-fit: contain !important;
  flex: 0 0 auto !important;
}

.camera-indicator {
  height: var(--menubar-h) !important;
  min-height: var(--menubar-h) !important;
  width: 40px !important;
  min-width: 40px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.camera-icon {
  width: 40px !important;
  height: var(--menubar-h) !important;
  display: block !important;
  object-fit: contain !important;
  flex: 0 0 auto !important;
}

.clock-item {
  height: var(--menubar-h) !important;
  line-height: var(--menubar-h) !important;
  padding: 0 4px 0 6px !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  display: inline-flex !important;
  align-items: center !important;
}


/* The supplied Retina crops are used at half size, matching Sonoma's status area. */
.wifi-indicator,
.music-playing-indicator {
  width: 25px !important;
  min-width: 25px !important;
  padding: 0 !important;
  display: grid;
  place-items: center;
  line-height: 0;
}

.wifi-indicator img,
.music-playing-indicator img {
  display: block;
  width: 25px;
  height: 23px;
  object-fit: contain;
  filter: none;
}

.wifi-indicator img { transform: translateY(2px); }

.music-playing-indicator[hidden] {
  display: none !important;
}

.menubar-icon.search-icon {
  filter: brightness(0) invert(1) !important;
}

.language-current-icon,
.language-option-icon {
  filter: none !important;
}

.clock-item {
  text-shadow: none;
}

/* Sonoma app menus use contiguous hit areas with padding, not a generic flex
   gap. These values reproduce the spacing of the supplied native menu crop. */
.menubar-left {
  gap: 0 !important;
  min-width: 0;
}

.app-menubar {
  display: flex;
  align-items: center;
  height: var(--menubar-h);
  min-width: 0;
  white-space: nowrap;
}

.app-menubar-item {
  height: var(--menubar-h);
  margin: 0;
  padding: 0 8px;
  border: 0;
  border-radius: 4px;
  color: inherit;
  background: transparent;
  font: inherit;
  font-size: 13px;
  font-weight: 400;
  line-height: var(--menubar-h);
  letter-spacing: 0;
  white-space: nowrap;
  cursor: default;
}

.app-menubar-name {
  padding-left: 1px;
  padding-right: 8px;
  font-weight: 600;
}

.app-menubar-item:hover {
  background: rgba(255, 255, 255, 0.14);
}

@media (max-width: 980px) {
  .app-menubar-item:nth-last-child(n + 5) {
    display: none;
  }
}

/* WLAN state two is a restrained system-wide latency cue. State three adds
   a short stepped after-image without changing hit targets or click timing. */
body.wifi-soft-delay .window,
body.wifi-soft-delay .dock,
body.wifi-soft-delay .menubar {
  filter: saturate(0.985) blur(0.12px);
  transition-delay: 70ms !important;
}

body.wifi-frame-feedback .window *,
body.wifi-frame-feedback .dock *,
body.wifi-frame-feedback .menubar * {
  animation-timing-function: steps(3, end) !important;
  transition-timing-function: steps(3, end) !important;
}