/**
 * The Multitude: reskins vAmigaWeb's own #navbar/#navgrid into the same
 * left-sidebar convention every other machine's shell uses (see
 * machines/_shared/src/toolbar.css) - hamburger-triggered full-width
 * dropdown on narrow screens (unchanged from upstream, just recoloured),
 * permanent left sidebar once there's width to spare. No element id is
 * touched, so vAmiga_ui.js's jQuery bindings (#button_reset, #button_run,
 * the ROM modal, settings, etc.) all keep working unmodified.
 */
:root {
  --darkbg: #1a1b2e;
  --lightbg: #1a1b2e;
}
[data-theme="dark"] #navbar {
  background-color: #1a1b2e;
  opacity: 1;
}
#navbar {
  /* Clears the hamburger (fixed top-left) - upstream's own horizontal
     layout used a spacer span for this instead of padding, which we hide
     unconditionally above since the stacked list doesn't need it. */
  padding-top: 56px;
  box-sizing: border-box;
}

.mx-home {
  display: block;
  text-align: center;
  text-decoration: none;
  box-sizing: border-box;
  font-family: monospace;
  font-size: 13px;
  background: #262842;
  color: #edebf5;
  border: 1px solid #565a82;
  border-radius: 4px;
  padding: 6px 8px;
  margin: 0 4px 8px;
}

#button_show_menu {
  background: #262842 !important;
  color: #edebf5 !important;
  border: 1px solid #565a82 !important;
  border-radius: 4px;
}

/* Vertical stacked list, one control per row - applies at EVERY width,
   mobile included. Icon-only made sense in upstream's tightly-packed grid;
   once each row also carries a text label (see mx-btn-label below,
   matching "Fullscreen"/"⌨ Keyboard" on every other machine), that grid
   has no room and wraps/overlaps badly. Mobile keeps Bootstrap's
   collapse-hidden-by-default full-width dropdown panel (unchanged from
   upstream) - only what's INSIDE it changes. */
#navgrid {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}
#navgrid * {
  max-width: 100%;
  box-sizing: border-box;
}
.left, .right {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  width: 100%;
  margin: 0;
  padding: 0;
}
.left > *, .right > * {
  height: auto;
  min-height: 40px;
  justify-content: flex-start;
  width: 100%;
  margin: 0;
  gap: 8px;
}
.left > span[style*="width: 40px"] {
  /* was a spacer reserving room for the hamburger in the old horizontal
     layout - the stacked list doesn't need it (the hamburger sits above
     the panel, not inline with the first button). */
  display: none;
}
.mx-btn-label {
  font-family: monospace;
  font-size: 13px;
  white-space: nowrap;
}
.mx-select-label {
  font-family: monospace;
  font-size: 12px;
  color: #b8b8c8;
  padding: 0 4px 2px;
}
#theFileInput {
  grid-column: unset;
}

@media (min-width: 700px) {
  /* Permanent sidebar instead of Bootstrap's collapse-hidden-by-default
     panel - same override pattern our shared toolbar.css uses
     (`.mx-toolbar { display: flex !important; }`) to beat the framework's
     own default at this breakpoint. */
  #navbar {
    display: flex !important;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    width: 220px;
    height: 100vh;
    padding: 56px 8px 12px;
    box-sizing: border-box;
    overflow-y: auto;
    overflow-x: hidden;
    border-right: 2px solid #43456a;
    backdrop-filter: none;
  }
  #button_show_menu {
    /* !important: upstream's own JS sets an inline display:inline-block on
       this element at boot, which otherwise beats any external stylesheet
       rule regardless of specificity (confirmed via computed style). */
    display: none !important;
  }
  /* The on-screen keyboard is also position:fixed + width:100% (see
     vAmiga.css) - same left-edge overlap problem the canvas had, same fix:
     reserve the sidebar's width. */
  #virtual_keyboard {
    left: 220px;
    width: calc(100% - 220px);
  }
}