/* ZAD responsive — portal + showroom (loads last; mobile-only overrides) */



/* ── Portal gateway ─────────────────────────────────────────────── */

@media (max-width: 768px) {

  .pg-gemini-shell {

    min-height: 100dvh;

    overflow-x: hidden;

  }



  .pg-gemini-shell .main-container {

    width: 100%;

    max-width: 100vw;

    height: auto;

    min-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom));

    margin: 0;

    padding: max(0.65rem, env(safe-area-inset-top)) 0.85rem max(0.85rem, env(safe-area-inset-bottom));

    box-sizing: border-box;

  }



  .pg-gemini-shell header {

    gap: 0.65rem;

  }



  .pg-gemini-shell .auth-buttons {

    width: 100%;

    display: flex;

    flex-direction: column;

    align-items: stretch;

    justify-content: stretch;

    gap: 0.65rem;

  }



  .pg-gemini-shell .auth-controls-row {

    width: 100%;

    display: grid;

    grid-template-columns: minmax(0, 1.2fr) auto minmax(0, 1.4fr);

    gap: 0.4rem;

    align-items: center;

  }



  .pg-gemini-shell .auth-buttons .portal-country,

  .pg-gemini-shell .auth-buttons .portal-lang-slot,

  .pg-gemini-shell .auth-buttons .portal-skin-switch {

    flex: 1 1 auto;

    min-width: 0;

  }



  .pg-gemini-shell .auth-actions-row {

    width: 100%;

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 0.55rem;

  }



  .pg-gemini-shell .auth-actions-row .btn {

    width: 100%;

    min-height: 2.65rem;

  }



  .pg-gemini-shell .search-box {

    width: 100%;

    max-width: 100%;

    margin-inline: 0;

    box-sizing: border-box;

  }



  .pg-gemini-shell .search-box input {

    font-size: 0.95rem;

    padding-block: 0.85rem;

  }



  .pg-gemini-shell.is-rtl .search-box input {

    direction: rtl !important;

    text-align: right !important;

    unicode-bidi: plaintext;

    padding-inline-start: 48px !important;

    padding-inline-end: 46px !important;

  }



  .pg-gemini-shell.is-ltr .search-box input {

    direction: ltr !important;

    text-align: left !important;

    padding-inline-start: 46px !important;

    padding-inline-end: 48px !important;

  }



  .pg-gemini-shell .portal-search-dropdown {

    max-height: min(52vh, 420px);

    overflow-y: auto;

    -webkit-overflow-scrolling: touch;

  }



  .pg-gemini-shell .portal-search-dd__item {

    padding: 0.75rem 0.8rem;

  }



  .pg-gemini-shell .portal-search-dd__copy strong {

    font-size: 0.92rem;

    line-height: 1.4;

  }



  .pg-gemini-shell .gemini-results {

    position: relative;

    inset: auto;

    width: 100%;

    max-height: none;

    margin-top: 0.75rem;

  }



  .pg-gemini-shell .hero {

    margin-top: 0.5rem;

  }



  .pg-gemini-shell .cursor-glow {

    display: none;

  }

}



@media (max-width: 480px) {

  .pg-gemini-shell .hero h2 {

    font-size: 1.15rem;

    line-height: 1.45;

    padding-inline: 0.25rem;

  }



  .pg-gemini-shell .auth-buttons {

    flex-direction: column;

    width: 100%;

    gap: 0.5rem;

  }



  .pg-gemini-shell .auth-buttons .btn-system,

  .pg-gemini-shell .auth-buttons .btn-exhibit {

    width: 100%;

    justify-content: center;

  }



  .pg-gemini-shell .auth-buttons .portal-country,

  .pg-gemini-shell .auth-buttons .portal-lang-slot {

    width: 100%;

    justify-content: center;

  }



  .pg-gemini-shell .grid-container {

    gap: 1.1rem;

    row-gap: 1rem;

    min-height: auto;

    padding-bottom: 0.5rem;

  }



  .pg-gemini-shell .floating-card {

    width: 96px;

    height: 96px;

  }



  .pg-gemini-shell .floating-card .icon-placeholder {

    font-size: 1.65rem;

  }



  .pg-gemini-shell .floating-card span {

    font-size: 0.62rem;

    line-height: 1.25;

    max-width: 88px;

  }



  .pg-gemini-shell .portal-hub-erp span {

    display: none;

  }



  .pg-gemini-shell .portal-staff-actions {

    gap: 0.35rem;

  }



  .portal-glass-overlay {

    padding: max(0.5rem, env(safe-area-inset-top)) 0.5rem max(0.5rem, env(safe-area-inset-bottom));

  }



  .portal-glass-modal {

    width: 100%;

    max-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 1rem);

    border-radius: 18px;

  }



  .portal-signup-overlay {

    padding: max(0.5rem, env(safe-area-inset-top)) 0.5rem max(0.5rem, env(safe-area-inset-bottom));

  }



  .portal-signup-shell {

    width: 100%;

    max-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 1rem);

    border-radius: 18px;

  }



  /* Touch: show tips when parent has .is-tip-open (portal-gemini.js) */

  .pg-gemini-shell .portal-feature-tip,

  .pg-gemini-shell .portal-search-hint-tip {

    display: none;

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

  }



  .pg-gemini-shell .floating-card.is-tip-open .portal-feature-tip,

  .pg-gemini-shell .portal-search-hint-wrap.is-tip-open .portal-search-hint-tip {

    display: block;

    opacity: 1;

    visibility: visible;

    pointer-events: auto;

    position: fixed;

    left: 50%;

    bottom: max(1rem, env(safe-area-inset-bottom));

    top: auto;

    transform: translateX(-50%);

    width: min(92vw, 360px);

    z-index: 10050;

  }

}



@media (hover: hover) and (pointer: fine) {

  .pg-gemini-shell .portal-feature-tip,

  .pg-gemini-shell .portal-search-hint-tip {

    display: block;

  }

}



/* ── Showroom / hall ─────────────────────────────────────────────── */

@media (max-width: 900px) {

  html.is-storefront .sx-root.is-hall .sx-top.sx-hud-split {

    flex-wrap: nowrap !important;

    flex-direction: row !important;

    align-items: center !important;

    justify-content: space-between !important;

    gap: 8px !important;

    top: max(8px, env(safe-area-inset-top)) !important;

    left: 8px !important;

    right: 8px !important;

    overflow: visible !important;

  }



  html.is-storefront .sx-root.is-hall .sx-top .sx-brand {

    flex: 0 0 auto !important;

    justify-content: flex-start !important;

    max-width: none !important;

    padding: 4px 8px 4px 4px !important;

  }



  html.is-storefront .sx-root.is-hall .sx-top .sx-brand-copy {

    display: none !important;

  }



  html.is-storefront .sx-root.is-hall .sx-top .sx-brand-mark {

    width: 40px !important;

    height: 40px !important;

  }



  html.is-storefront .sx-root.is-hall .sx-top-tools {

    flex: 1 1 auto !important;

    flex-wrap: nowrap !important;

    justify-content: flex-start !important;

    gap: 5px !important;

    min-width: 0 !important;

    max-width: none !important;

    overflow: visible !important;

    padding: 6px 8px 6px 6px !important;

  }



  html.is-storefront .sx-root.is-hall .sx-hud-mobile-bar {

    display: inline-flex !important;

    align-items: center !important;

    gap: 4px !important;

    flex: 1 1 auto !important;

    min-width: 0 !important;

    justify-content: flex-start !important;

  }



  html.is-storefront .sx-root.is-hall .sx-hud-mobile-bar .lang-compact {

    height: 36px !important;

    flex-shrink: 0 !important;

  }



  html.is-storefront .sx-root.is-hall .sx-hud-mobile-bar .sx-icon {

    width: 36px !important;

    height: 36px !important;

    flex-shrink: 0 !important;

  }



  html.is-storefront .sx-root.is-hall .sx-top-tools .sx-icon.is-search {

    flex-shrink: 0 !important;

  }



  html.is-storefront .sx-root.is-hall .sx-hud-desktop-only {

    display: none !important;

  }



  html.is-storefront .sx-root.is-hall .sx-hud-more {

    display: inline-flex !important;

    flex-shrink: 0 !important;

  }

}



  html.is-storefront .sx-root.is-hall > aside.sx-rail {

    width: min(100%, calc(100vw - 16px)) !important;

    left: 8px !important;

    right: 8px !important;

  }



  html.is-storefront .sx-root.is-hall > aside.sx-map.sx-map-nav {

    width: min(280px, calc(100vw - 16px)) !important;

  }



  html.is-storefront .sx-root.is-hall .sx-brand-org {

    display: none !important;

  }

}



@media (max-width: 600px) {

  html.is-storefront .sx-root.is-hall > aside.sx-map.sx-map-nav,

  html.is-storefront .sx-root.is-hall > aside.sx-rail,

  html.is-storefront .sx-root.is-hall > aside.sx-product,

  html.is-storefront .sx-root.is-hall > .sx-bot.is-open,

  html.is-storefront .sx-root.is-hall .sx-search-card.glass {

    top: var(--sx-popup-top, 88px) !important;

    bottom: var(--sx-popup-bottom, calc(84px + env(safe-area-inset-bottom))) !important;

    left: var(--sx-popup-side, 8px) !important;

    right: var(--sx-popup-side, 8px) !important;

    width: auto !important;

    height: auto !important;

    min-height: 0 !important;

    max-height: none !important;

    border-radius: 18px !important;

    margin: 0 !important;

    overflow-y: auto !important;

    -webkit-overflow-scrolling: touch;

    box-sizing: border-box !important;

    transform: none !important;

  }

  html.is-storefront .sx-root.is-hall > aside.sx-map.sx-map-nav,

  html.is-storefront .sx-root.is-hall > aside.sx-rail {

    z-index: 270 !important;

  }

  html.is-storefront .sx-root.is-hall > aside.sx-product {

    z-index: 310 !important;

  }

  html.is-storefront .sx-root.is-hall > .sx-bot.is-open {

    z-index: 290 !important;

    display: flex !important;

    flex-direction: column !important;

  }

  html.is-storefront .sx-root.is-hall .sx-search-card.glass {

    z-index: 320 !important;

  }



  html.is-storefront .sx-root.is-ltr.is-hall .sx-nav-search input,

  html.is-storefront .sx-root.is-ltr.is-hall .sx-search input {

    direction: ltr;

    text-align: left;

  }



  html.is-storefront .sx-root.is-rtl.is-hall .sx-nav-search input,

  html.is-storefront .sx-root.is-rtl.is-hall .sx-search input {

    direction: rtl;

    text-align: right;

  }



  html.is-storefront .sx-root.is-hall > .sx-dock-slot > .sx-dock {

    padding: 6px 8px !important;

    gap: 4px !important;

    max-width: calc(100vw - 12px - env(safe-area-inset-left) - env(safe-area-inset-right)) !important;

    margin-bottom: env(safe-area-inset-bottom) !important;

  }



  html.is-storefront .sx-root.is-hall > .sx-dock-slot > .sx-dock button {

    width: 54px !important;

    min-width: 54px !important;

    height: 58px !important;

    padding: 5px 2px 4px !important;

    gap: 4px !important;

  }



  html.is-storefront .sx-root.is-hall > .sx-dock-slot > .sx-dock button span:not(.sx-dock-ico) {

    font-size: 0.6rem !important;

    line-height: 1.1 !important;

    white-space: normal !important;

    text-align: center !important;

    max-width: 52px !important;

  }



  html.is-storefront .sx-root.is-hall .sx-pcards,

  html.is-storefront .sx-search-hits {

    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;

    gap: 10px !important;

  }



  html.is-storefront .sx-pcard {

    min-height: 210px !important;

  }



  html.is-storefront .sx-pcard-img,

  html.is-storefront .sx-pcard-img img,

  html.is-storefront .sx-pcard-img svg {

    height: 120px !important;

    min-height: 120px !important;

    max-height: 120px !important;

  }



  html.is-storefront .sx-root.is-hall > .sx-bot.is-open {

    left: var(--sx-popup-side, 8px) !important;

    right: var(--sx-popup-side, 8px) !important;

    width: auto !important;

    top: var(--sx-popup-top, 88px) !important;

    bottom: var(--sx-popup-bottom, calc(84px + env(safe-area-inset-bottom))) !important;

    z-index: 290 !important;

    display: flex !important;

    flex-direction: column !important;

  }



  html.is-storefront .sx-root.is-rtl.is-hall > .sx-bot.is-open,

  html.is-storefront .sx-root.is-ltr.is-hall > .sx-bot.is-open {

    left: 8px !important;

    right: 8px !important;

  }



  html.is-storefront .sx-root.is-hall .sx-search-card.glass {

    padding: 16px 14px 14px !important;

  }

  html.is-storefront .sx-search-card:not(.glass),

  .sx-search-card:not(.glass) {

    width: calc(100vw - 16px) !important;

    max-width: calc(100vw - 16px) !important;

    height: min(88dvh, 680px) !important;

    min-height: 0 !important;

    max-height: min(88dvh, 680px) !important;

    padding: 16px 14px 14px !important;

    border-radius: 18px !important;

  }



  html.is-storefront .sx-genie-sig:not(.is-hidden) {
    transform: none !important;
    transform-origin: bottom center;
    bottom: calc(92px + env(safe-area-inset-bottom)) !important;
    z-index: 86 !important;
    opacity: 1 !important;
    filter: none !important;
  }

  html.is-storefront .sx-genie-sig.is-hidden {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }



  html.is-storefront .sx-root.is-hall .sx-user-chip {

    max-width: min(8.5rem, 34vw) !important;

    font-size: 0.72rem !important;

    height: 36px !important;

    padding: 0 10px !important;

  }



  html.is-storefront .sx-root.is-hall .sx-visitors small {

    display: none;

  }



  .sf-root.sf-immersive .sf-modal.sf-quick {

    display: flex !important;

    flex-direction: column !important;

    grid-template-columns: 1fr !important;

    width: calc(100vw - 12px) !important;

    min-height: 0 !important;

    height: auto !important;

    max-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 12px) !important;

    overflow-y: auto !important;

    -webkit-overflow-scrolling: touch;

    border-radius: 18px !important;

  }



  .sf-root.sf-immersive .sf-modal.sf-quick .sf-modal-media {

    min-height: 38vh !important;

    max-height: 46vh !important;

    order: 1;

  }



  .sf-root.sf-immersive .sf-modal.sf-quick .sf-modal-copy {

    order: 2;

    padding: 18px 16px 20px !important;

  }



  .sf-root.sf-immersive .sf-cart-lux,

  .sf-root.sf-immersive .sf-drawer.sf-cart-lux {

    top: auto !important;

    bottom: 0 !important;

    left: 0 !important;

    right: 0 !important;

    width: 100% !important;

    max-width: 100% !important;

    height: min(92dvh, 760px) !important;

    min-height: 0 !important;

    border-radius: 20px 20px 0 0 !important;

    padding-bottom: env(safe-area-inset-bottom) !important;

  }



  .sf-root.sf-immersive .sf-auth {

    width: calc(100vw - 16px) !important;

    max-width: 420px !important;

    max-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 16px) !important;

    overflow-y: auto !important;

  }



  .sf-root.sf-immersive .sf-overlay {

    padding: max(8px, env(safe-area-inset-top)) 6px max(8px, env(safe-area-inset-bottom)) !important;

    align-items: flex-end !important;

  }



  .sf-root.sf-immersive .sf-overlay:has(.sf-modal.sf-quick),

  .sf-root.sf-immersive .sf-overlay:has(.sf-auth) {

    align-items: center !important;

  }



  html.is-storefront .sx-root.is-hall .sx-hall-live .sx-spot {

    width: 64px !important;

    height: 64px !important;

  }

}



@media (max-width: 400px) {

  html.is-storefront .sx-root.is-hall .sx-pcards,

  html.is-storefront .sx-search-hits {

    grid-template-columns: 1fr !important;

  }



  html.is-storefront .sx-root.is-hall > .sx-dock-slot > .sx-dock button {

    width: 48px !important;

    min-width: 48px !important;

    height: 52px !important;

  }



  html.is-storefront .sx-root.is-hall > .sx-dock-slot > .sx-dock svg {

    width: 20px !important;

    height: 20px !important;

  }



  html.is-storefront .sx-root.is-hall .sx-brand strong {

    font-size: 0.72rem !important;

    max-width: 42vw;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

  }



  .pg-gemini-shell .floating-card {

    width: 88px;

    height: 88px;

  }

}



@media (max-width: 380px) {

  html.is-storefront .sx-root.is-hall > .sx-dock-slot > .sx-dock button span:not(.sx-dock-ico) {

    display: none !important;

  }



  html.is-storefront .sx-root.is-hall > .sx-dock-slot > .sx-dock button {

    width: 44px !important;

    min-width: 44px !important;

    height: 44px !important;

    padding: 0 !important;

  }

}



/* Coarse pointer: keep motion light, no hover-only affordances */

@media (pointer: coarse) {

  .pg-gemini-shell .cursor-glow {

    display: none;

  }



  html.is-storefront .sx-root.is-hall .sx-dock button:hover svg {

    transform: none !important;

  }

}


/* ?? App shell + reports + accounting (gap-free mobile) ????????? */
@media (max-width: 900px) {
  .app-shell .main-content,
  .app-shell .page-body,
  .main-wrapper .page-body {
    padding-inline: 0.7rem !important;
    max-width: 100vw;
    overflow-x: hidden;
  }

  .page-header,
  .page-header-row,
  .page-toolbar,
  .compact-filter-bar,
  .filters-row,
  .report-toolbar,
  .payroll-filter-row,
  .staff-filter-bar {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
    width: 100%;
  }

  .compact-filter-bar > *,
  .payroll-filter-row > *,
  .cdf-field,
  .cf-pair,
  .cf-search {
    flex: 1 1 11rem;
    min-width: min(100%, 10.5rem);
    max-width: 100%;
  }

  .summary-cards,
  .summary-cards-4,
  .summary-cards-3,
  .stat-grid,
  .dash-stats-4,
  .kpi-row,
  .insight-cards,
  .dash-grid,
  .fin-charts-row {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0.65rem !important;
  }

  .report-document,
  .report-print-sheet,
  .panel-card.report-document,
  .accounting-page,
  .acc-report-tabs {
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: 0 !important;
    box-sizing: border-box;
  }

  .acc-report-tabs,
  .payroll-mode-tabs {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.35rem !important;
  }

  .acc-report-tabs .tab-btn,
  .payroll-mode-tabs .tab-btn {
    flex: 1 1 auto;
    min-height: 2.45rem;
  }

  .aging-buckets,
  .report-summary,
  .acc-tb-summary {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.45rem !important;
  }

  .aging-chip {
    flex: 1 1 7rem;
  }

  .shop-portal-grid,
  .sx-re-grid,
  .sf-product-grid,
  .sx-pcards,
  .hub-card-grid,
  .quick-report-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.55rem !important;
  }

  .modal-card,
  .portal-glass-modal,
  .drawer-panel {
    width: min(100vw - 0.7rem, 36rem) !important;
    max-height: 92dvh !important;
  }
}

@media (max-width: 560px) {
  .shop-portal-grid,
  .sx-re-grid,
  .sf-product-grid,
  .sx-pcards,
  .hub-card-grid,
  .quick-report-grid,
  .ob-cards {
    grid-template-columns: 1fr !important;
  }

  .page-header h1,
  .page-title {
    font-size: 1.12rem !important;
    line-height: 1.3;
  }

  .toolbar-icon-group {
    width: 100%;
    justify-content: flex-start;
  }

  .field-input,
  .cf-pair-ctrl,
  .cf-search-input,
  select.field-input,
  input.field-input {
    font-size: 16px !important;
  }
}