/* Custom overrides on top of the vendored Scratch GUI build. Kept separate from
   runtime/ so it survives a rebuild of the vendored bundle. */

html, body, button, input, select, textarea,
[class*="menu-bar"], [class*="settings-menu"], [class*="context-menu"],
[class*="dropdown"], [class*="tooltip"], [class*="alert"], [class*="modal"],
[class*="react-tabs"], [class*="prompt"], [class*="loader"], [class*="library"],
[class*="sprite-info"], [class*="target-pane"], [class*="stage-header"],
[class*="controls_"], [class*="save-status"], [class*="card"] {
  font-family: 'Vazirmatn', Tahoma, 'Segoe UI', sans-serif !important;
}
text, .blocklyText, .blocklyFlyoutLabelText, .blocklyHtmlInput {
  font-family: 'Vazirmatn', Tahoma, 'Segoe UI', sans-serif !important;
}

/* The native top menu bar (logo, settings, file, edit, tutorials, debug) is
   replaced by the host app's own toolbar. */
[class*="menu-bar_menu-bar"] { display: none !important; }
[class*="body-wrapper"] { height: 100% !important; }

/* Block-category labels (Motion, Looks, Sound, Events, ...) are tiny by default. */
.blocklyToolboxCategoryLabel { font-weight: 700 !important; }

/* Mobile layout: the editor (blocks/costumes/sounds) and the stage+sprites
   column are stacked full-width and shown one at a time, switched from the
   bottom tab bar injected by bridge.js, instead of the desktop side-by-side
   layout which does not fit a phone screen. */
#aax-mobile-tabs { display: none; }
@media (max-width: 700px) {
  [class*="gui_flex-wrapper"] { flex-direction: column !important; }
  [class*="gui_editor-wrapper"], [class*="gui_stage-and-target-wrapper"] {
    width: 100% !important; max-width: 100% !important; height: auto !important; flex: 1 1 auto !important;
  }
  [class*="stage-wrapper_stage-wrapper"] { width: 100% !important; }
  body:not(.aax-mobile-stage) [class*="gui_stage-and-target-wrapper"] { display: none !important; }
  body.aax-mobile-stage [class*="gui_editor-wrapper"] { display: none !important; }
  [class*="react-tabs__tab-list"] { display: none !important; }
  [class*="gui_body-wrapper"] { padding-bottom: 50px !important; box-sizing: border-box; }

  #aax-mobile-tabs {
    display: flex; position: fixed; inset-inline: 0; bottom: 0; z-index: 1000;
    background: white; border-top: 1px solid #d9e1ef;
  }
  #aax-mobile-tabs button {
    flex: 1; padding: 9px 2px; border: 0; background: transparent; color: #243047;
    font-family: 'Vazirmatn', Tahoma, sans-serif; font-weight: 700; font-size: 12px; cursor: pointer;
  }
  #aax-mobile-tabs button.aax-active { color: #7854d7; }
}