/* SladMir — unified safe-area system (Telegram WebApp + mini app fullscreen screens) */

/* ── Layout + safe tokens (JS: mini-telegram-init.js → --mini-tg-top-offset, --tg-*-inset-*) ── */
body.mini-app-page {
  --ui-nav-item-height: 48px;
  --ui-nav-padding-block: 6px;
  --ui-nav-height: calc(var(--ui-nav-padding-block) * 2 + var(--ui-nav-item-height));
  --ui-header-height: 52px;
  --ui-screen-gap: 10px;
  --ui-safe-extra-top: 20px;
  --ui-footer-gap: 12px;
  --ui-tabbar-padding-block: 8px;
  --ui-bottom-action-height: 92px;
  --ui-viewport-height: var(--ui-tg-viewport-height, 100dvh);
  --ui-safe-bottom: max(env(safe-area-inset-bottom, 0px), var(--tg-safe-area-inset-bottom, 0px));
  --ui-safe-left: max(env(safe-area-inset-left, 0px), var(--tg-safe-area-inset-left, 0px));
  --ui-safe-right: max(env(safe-area-inset-right, 0px), var(--tg-safe-area-inset-right, 0px));
  --ui-safe-content-inset-top: 0px;
  --ui-safe-app-top: 0px;
  --ui-safe-screen-top: calc(env(safe-area-inset-top, 0px) + var(--ui-footer-gap));
  --ui-safe-page-gap: 0px;
  --ui-safe-tg-extra: 0px;
  --ui-page-bottom-inset: calc(var(--ui-nav-height) + var(--ui-safe-bottom));
  --ui-tabbar-bottom-inset: calc(var(--ui-bottom-action-height) + var(--ui-safe-bottom));
  --ui-cart-checkout-bottom-inset: calc(var(--ui-bottom-action-height) - var(--ui-footer-gap) / 2 + var(--ui-safe-bottom));
  /* legacy aliases (do not use in new screen CSS) */
  --mini-app-content-inset-top: var(--ui-safe-content-inset-top);
  --mini-app-safe-top: var(--ui-safe-app-top);
  --mini-fullscreen-safe-top: var(--ui-safe-screen-top);
  --mini-tg-page-gap: var(--ui-safe-page-gap);
  --supplier-safe-top: var(--ui-safe-screen-top);
  --supplier-safe-bottom: var(--ui-safe-bottom);
}

body.mini-app-page.tg-webapp {
  --ui-safe-tg-extra: var(--ui-footer-gap);
  --ui-safe-page-gap: var(--ui-screen-gap);
  --mini-tg-top-extra: var(--ui-safe-tg-extra);
  --ui-safe-content-inset-top: max(
    var(--tg-content-safe-area-inset-top, 0px),
    var(--tg-safe-area-inset-top, 0px)
  );
  --ui-safe-app-top: calc(max(var(--mini-tg-top-offset, 0px), var(--ui-safe-content-inset-top)) + var(--ui-safe-extra-top));
  --ui-safe-screen-top: calc(var(--ui-safe-app-top) + var(--ui-safe-tg-extra) + var(--ui-screen-gap));
  padding-top: 0;
}

body.mini-app-page.tg-webapp.tg-ios {
  --ui-safe-tg-extra: calc(var(--ui-header-height) / 2);
  --ui-safe-page-gap: var(--ui-footer-gap);
}

/* ── Layout primitives ── */
.ui-safe-page {
  box-sizing: border-box;
  min-height: var(--ui-viewport-height);
  padding-bottom: var(--ui-page-bottom-inset);
}

.ui-safe-screen {
  box-sizing: border-box;
  min-height: var(--ui-viewport-height);
  display: flex;
  flex-direction: column;
  padding-top: var(--ui-safe-screen-top);
  padding-bottom: var(--ui-safe-bottom);
}

.ui-safe-screen--flush-top {
  padding-top: 0;
}

.ui-safe-header {
  flex-shrink: 0;
  box-sizing: border-box;
}

.ui-safe-header--inset {
  padding-top: var(--ui-safe-screen-top);
}

.ui-safe-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
}

.ui-safe-body--inset-top {
  padding-top: var(--ui-safe-screen-top);
  box-sizing: border-box;
}

.ui-safe-footer {
  flex-shrink: 0;
  padding-bottom: var(--ui-safe-bottom);
  box-sizing: border-box;
}

/* Screen already padded → header/body must not add safe-top again */
.ui-safe-screen:not(.ui-safe-screen--flush-top) > .ui-safe-header,
.ui-safe-screen:not(.ui-safe-screen--flush-top) > .ui-safe-header--inset {
  padding-top: 0;
}

/* Flush shell: header OR scroll gets inset once (never both) */
.ui-safe-screen--flush-top > .ui-safe-header--inset:not(.hidden) ~ .ui-safe-body,
.ui-safe-screen--flush-top > .ui-safe-header--inset:not(.hidden) ~ .mini-picker-scroll,
.ui-safe-screen--flush-top > .ui-safe-header--inset:not(.hidden) ~ .mini-supplier-scroll {
  padding-top: 0;
}

.mini-picker-shell--subpage > .mini-picker-scroll,
.mini-supplier-shell--subpage > .mini-supplier-scroll,
.ui-safe-screen--flush-top.ui-safe-screen--subpage-inset > .ui-safe-body {
  padding-top: calc(var(--ui-safe-screen-top) + 6px);
}

/* ── In-app tab shell (catalog / home / profile) ── */
.mini-app-page .app {
  min-height: var(--ui-viewport-height);
  padding-top: calc(env(safe-area-inset-top, 0px) + var(--ui-footer-gap));
  box-sizing: border-box;
}

.mini-app-page.tg-webapp .container {
  padding-top: 0;
}

.mini-app-page.tg-webapp .app {
  padding-top: calc(var(--ui-safe-screen-top) - var(--ui-safe-page-gap));
}

.mini-app-page.tg-webapp .mini-app-section {
  padding-top: var(--ui-safe-page-gap);
}

.mini-app-page.tg-webapp main.app > section.mini-app-section[data-mini-section="catalog"] {
  padding-top: 0;
}

.mini-app-page.tg-webapp .mini-catalog-top-bar {
  padding-top: 0;
}

/* ── Registered fullscreen screens (exactly one top safe-area each) ── */
/* Screens without .ui-safe-screen class on root */
.mini-app-page.tg-webapp .mini-orders-screen,
.mini-app-page.tg-webapp .mag-screen,
.mini-app-page.tg-webapp .mini-profile-dialog,
.mini-app-page.tg-webapp .mini-address-form-screen,
.mini-app-page.tg-webapp .mini-addresses-screen.mini-addr-map-screen,
.mini-app-page.tg-webapp .visinv-dialog[open] .visinv-screen,
.mini-app-page.tg-webapp .inv-compare-dialog[open] .inv-compare-screen,
.mini-app-page.tg-webapp .club-ops-dialog[open] .club-ops-screen,
.mini-app-page.tg-webapp .inv-compare-picker-sheet:not(.hidden),
body[data-screen="support"] #mini-support-section,
body[data-screen="manager-notifications"] #mini-mgr-notif-section,
.mini-role-picker,
.mini-club-picker,
.mini-mgr-onboarding-inner,
.ui-safe-screen:not(.ui-safe-screen--flush-top) {
  padding-top: var(--ui-safe-screen-top);
}

/* Address list: safe-top only in header */
.mini-app-page.tg-webapp .mini-addresses-screen.mini-addr-screen {
  padding-top: 0;
}

.mini-app-page.tg-webapp .mini-orders-head {
  margin-top: 0;
}

.mini-app-page.tg-webapp .mini-addr-head.ui-safe-header--inset {
  padding-top: calc(var(--ui-safe-screen-top) + var(--ui-footer-gap));
}

/* Club cart overlay */
body.mini-club-scope #mini-cart-panel.ui-safe-screen--flush-top {
  display: flex;
  flex-direction: column;
  min-height: var(--ui-viewport-height);
  padding-top: 0;
}

body.mini-club-scope #mini-cart-panel .mini-cart-panel-scroll.ui-safe-body--inset-top {
  padding-top: calc(var(--ui-safe-screen-top) + var(--ui-screen-gap));
}

/* Checkout */
.mini-checkout-dialog .mco-shell.ui-safe-screen--flush-top {
  min-height: var(--ui-viewport-height);
  max-height: var(--ui-viewport-height);
  padding-top: 0;
  padding-bottom: var(--ui-safe-bottom);
}

.mini-checkout-dialog .mco-header.ui-safe-header--inset {
  padding-top: var(--ui-safe-screen-top);
  padding-left: 16px;
  padding-right: 16px;
  padding-bottom: 12px;
}

/* Picker / supplier cabinets */
.mini-picker-shell.ui-safe-screen--flush-top,
.mini-supplier-shell.ui-safe-screen--flush-top {
  min-height: var(--ui-viewport-height);
  max-height: var(--ui-viewport-height);
  padding-top: 0;
  padding-bottom: var(--ui-safe-bottom);
}

.mini-picker-header.ui-safe-header--inset,
.mini-supplier-header.ui-safe-header--inset {
  padding-left: 16px;
  padding-right: 16px;
}

.mini-supplier-header.ui-safe-header--inset {
  padding-bottom: 14px;
}

.mini-picker-header.ui-safe-header--inset {
  padding-bottom: 16px;
}

body.mini-supplier-price-queue-mode .mini-supplier-price-queue {
  padding-top: calc(var(--ui-safe-screen-top) + 4px);
}

/* Overlays opened from ui-states.css (horizontal + bottom insets) */
body[data-screen="support"] #mini-support-section,
body[data-screen="manager-notifications"] #mini-mgr-notif-section {
  padding-left: var(--mini-side-pad, 12px);
  padding-right: var(--mini-side-pad, 12px);
  padding-bottom: var(--ui-safe-bottom);
}

.mini-app-page.tg-webapp .mini-address-form-screen .mini-addresses-close-btn {
  top: calc(14px + var(--ui-safe-screen-top));
}

.mini-app-page.tg-webapp .mini-addresses-screen.mini-addr-map-screen .mini-addr-map-close {
  top: calc(14px + var(--ui-safe-app-top));
}

body.mini-club-settings-open #mgr-club-settings-section,
body.mini-manager-settings-open #mgr-manager-settings-section {
  display: flex !important;
  flex-direction: column;
}

.mini-app-page .app {
  max-width: 100vw;
  overflow-x: hidden;
}