/* Stardust mini app (Telegram on Android and iPhone), paired with tma-viewport-unified-*.js.
   --sd-sys-top     status bar / notch reported by Telegram
   --sd-tg-bar-top  Telegram "Close" and "..." buttons in fullscreen
   --sd-vtop/--sd-vh  visible area above the keyboard
   html.sd-tg-bar   fullscreen with the Telegram buttons on top
   html.sd-kb       keyboard open on a phone
   html.sd-touch    phone layout (touch screen or narrow window) */
:root {
  --sd-top-sys: max(var(--sd-sys-top, 0px), env(safe-area-inset-top, 0px));
  --sd-top: calc(var(--sd-top-sys) + var(--sd-tg-bar-top, 0px));
}

/* Task reminder: w-full next to left/right insets pushed it off-centre. */
.fixed.bottom-4.left-4.right-4.max-w-sm.mx-auto.w-full {
  width: auto !important;
  bottom: calc(1rem + max(env(safe-area-inset-bottom, 0px), var(--app-safe-area-bottom, 0px))) !important;
}

/* Lucide icons that were printed as their names. */
.sd-icon {
  display: inline-block;
  width: 1.15em;
  height: 1.15em;
  flex-shrink: 0;
  vertical-align: -0.2em;
}

/* Suggestions under a field open upwards when there is no room below. */
.sd-list-up {
  top: auto !important;
  bottom: 100% !important;
  margin-top: 0 !important;
  margin-bottom: 4px !important;
}

/* Car make field on phones: the list never drops down, the match is highlighted in the field. */
html.sd-touch body > div.fixed.max-h-60[class*="z-[99999]"] {
  display: none !important;
}
.sd-car-hint {
  position: absolute;
  z-index: 1;
  display: flex;
  align-items: center;
  overflow: hidden;
  white-space: pre;
  line-height: normal;
  pointer-events: none;
}
.sd-car-hint-typed {
  flex: none;
  visibility: hidden;
}
.sd-car-hint-pick {
  flex: 0 1 auto;
  min-width: 0;
  align-self: stretch;
  display: flex;
  align-items: center;
  padding-right: 12px;
  color: var(--color-primary);
  cursor: pointer;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}
.sd-car-hint-rest {
  border-radius: 4px;
  background: color-mix(in oklab, var(--color-primary) 18%, transparent);
}
/* In a narrow field a long make is shortened: "мерс  Merced…". */
.sd-car-hint-tag {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-left: 8px;
  padding: 2px 8px;
  border: 1px solid color-mix(in oklab, var(--color-primary) 30%, transparent);
  border-radius: 0.75rem;
  background: color-mix(in oklab, var(--color-primary) 15%, transparent);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
}

/* ── Fullscreen: title between the Telegram buttons, the rest below them ── */
html.sd-tg-bar header.sticky.top-0:not(.h-14) {
  padding-top: var(--sd-top-sys) !important;
}
html.sd-tg-bar .header-top {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr);
  row-gap: 4px;
  min-height: 0 !important;
  padding-top: 0 !important;
}
html.sd-tg-bar .header-top > :first-child {
  height: var(--sd-tg-bar-top);
  min-width: 0;
  justify-content: center;
}
html.sd-tg-bar .header-summary {
  justify-content: space-between;
}
@media (min-width: 640px) {
  html.sd-tg-bar .header-summary {
    justify-content: center;
    gap: 28px;
  }
}

/* Client booking shell. */
html.sd-tg-bar header.sticky.top-0.h-14 {
  height: calc(3.5rem + var(--sd-top)) !important;
  padding-top: var(--sd-top) !important;
}
html.sd-tg-bar #app > div.min-h-screen:has(> header.sticky.top-0.h-14) {
  padding-top: 0 !important;
}
html.sd-tg-bar #app > div.min-h-screen:not(:has(> header)) {
  padding-top: calc(var(--sd-top) + 8px) !important;
}

/* Dialogs start below the Telegram buttons and fit the screen. */
html.sd-tg-bar .fixed.inset-0 {
  padding-top: calc(var(--sd-top) + 8px) !important;
}
html.sd-tg-bar .fixed.inset-0 > [class*="max-h-["] {
  max-height: 100% !important;
  min-height: 0;
}

/* ── Keyboard open: dialogs use the visible area only, no extra gaps ── */
/* The bottom tab bar steps aside while typing, as the app does with body.keyboard-open. */
html.sd-kb nav.fixed.bottom-0,
html.sd-kb footer.fixed.bottom-0 {
  display: none !important;
}
/* Cash, task details, planner form and new order are laid out by tma-dialog-viewport. */
html.sd-kb .fixed.inset-0:not(.cash-modal-overlay):not(.task-detail-overlay):not(.planner-create-open):not(.order-create-overlay) {
  top: var(--sd-vtop, 0px) !important;
  bottom: auto !important;
  height: var(--sd-vh, 100%) !important;
  box-sizing: border-box !important;
  padding-top: calc(var(--sd-top, 0px) + 8px) !important;
  padding-bottom: 8px !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
}
/* Centred and bottom sheets: keep the top reachable when the card is taller than the area. */
html.sd-kb .fixed.inset-0.items-center:not(.flex-col):not(.cash-modal-overlay),
html.sd-kb .fixed.inset-0.items-end:not(.flex-col) {
  align-items: flex-start !important;
}
html.sd-kb .fixed.inset-0.items-center:not(.flex-col):not(.cash-modal-overlay) > :not(.absolute):not(.fixed) {
  margin-top: auto !important;
  margin-bottom: auto !important;
}
html.sd-kb .fixed.inset-0.items-end:not(.flex-col) > :not(.absolute):not(.fixed) {
  margin-top: auto !important;
}
html.sd-kb .fixed.inset-0 > [class*="max-h-["] {
  max-height: 100% !important;
  min-height: 0 !important;
}
html.sd-kb .fixed.inset-0 > .history-modal-card {
  height: 100% !important;
  max-height: 100% !important;
}