/* Stellarium (/cielo) layout fixes, injected by reader/logic.py sky_page
   (the vendored app CSS is never edited). */

/* Side menu (location, time, sky, search, shortcuts): anchored to the bottom
   (just above the location button) with the buttons closer together, and
   above the selected-object card, so a tall card never covers it and its
   buttons stay clickable. The card stays at the screen edge, top left. */
.desktop-bar { gap: 2px !important; top: auto !important; bottom: 356px !important; left: auto !important; right: 8px !important; transform: none !important; z-index: 10 !important; }
.desktop-bar .desk-btn { margin-top: 2px !important; margin-bottom: 2px !important; }

/* Selected-object card: starts below the back-to-Conteo button (fixed at
   12px, 3rem tall), which covered its top-left corner. */
.v-card[style*="top: 48px"] { top: 60px !important; }

/* "Also known as" row: the label is absolutely positioned with no width and a
   spacer indents only the first line, so in longer languages ("También
   conocido como") the label ran over the names and wrapped names went under
   it. The whole row is indented instead and the label wraps in its third. */
.v-card .col-12:has(> span[style*="position: absolute"]) {
  position: relative; padding-left: calc(33.333% + 12px) !important;
}
.v-card .col-12 > span[style*="position: absolute"] {
  left: 12px; top: 12px; width: calc(33.333% - 6px); white-space: normal; line-height: 1.25;
}
.v-card .col-12 > span[style*="padding-left: 33.3333%"] { display: none; }

/* Location panel map: ocean color behind the local base image. */
.leaflet-container { background: #0b1e3a !important; }

/* Bottom toolbar: the sky buttons (constellations, atmosphere, ... fullscreen)
   are wrapped in one .sw-bottom-group (patched in the app bundle) and centered
   on the screen, instead of between the location and time buttons, whose
   different widths pushed them off center. On phones the bar was wider than
   the screen (location and time buttons cut off), so there the group takes
   its own centered row above the location and time buttons. */
.sw-bottom-group { display: flex; align-items: flex-end; }
@media (min-width: 600px) {
  .sw-bottom-group { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); }
  /* The location button grows with the place name ("Cerca de Lat 9.566° Lon
     -73.335°") and ran under the centered group: it gets only the space left
     of the group, and a long name ends in an ellipsis. */
  .tbtcontainer { max-width: calc(50% - 206px) !important; min-width: 0; }
  .tbtcontainer .tmenubt { max-width: 100%; }
  .tbtcontainer .tmenubt .v-btn__content { min-width: 0; max-width: 100%; justify-content: flex-start; }
  .tbtcontainer .tmenubt .hidden-xs-only { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
@media (max-width: 599px) {
  .get-click:has(> .sw-bottom-group) { flex-wrap: wrap; left: 0; right: 0; width: 100%; padding: 0 4px 4px; }
  .sw-bottom-group { order: -1; width: 100%; justify-content: center; }
}

/* Side menu on phones: a row at the top, on the right edge,
   instead of a column over the left of the sky. */
@media (max-width: 599px) {
  .desktop-bar {
    top: 12px !important; bottom: auto !important; left: auto !important; right: 12px !important;
    transform: none !important; display: flex !important; flex-direction: row !important;
    align-items: center; gap: 6px !important;
  }
  .desktop-bar .desk-btn { margin: 0 !important; }
}

/* Date and time menu: 10px higher than its automatic position. */
.v-menu__content:has(.up_down_bt) { margin-top: -10px; }