/* Global viewport guard: keeps every public, customer, admin and partner screen
   inside the physical device width, including after orientation changes. */
html {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overscroll-behavior: none;
}

body {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: hidden;
  overscroll-behavior: none;
}

img, video, canvas, iframe {
  max-width: 100%;
}

main, header, footer, nav, section, article, aside, form,
.header, .section, .auth-wrap, .otp-page, .team-access-page,
.admin-shell, .admin-main, .admin-top, .admin-content,
.outlet-top, .outlet-content, .shop-main {
  min-width: 0;
}

@supports (overflow: clip) {
  html, body { overflow-x: clip; }
}

.admin-mobile-brand { display: none; }

/* Keep shared headers anchored while page content scrolls. */
.header, .admin-v2 .admin-top, .outlet-top, .shop-topbar {
  position: sticky !important;
  top: 0 !important;
}
.header { z-index: 1000 !important; }
.admin-v2 .admin-top, .outlet-top, .shop-topbar { z-index: 2000 !important; }

@media (max-width: 900px) {
  body, body.admin-v2, body.outlet-os, body.shop-v2 {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .header, .deal, .footer,
  .admin-shell, .admin-main, .admin-top, .admin-content,
  .outlet-top, .outlet-content, .outlet-module-nav,
  .shop-topbar, .shop-main, .shop-tabs,
  .auth-wrap, .otp-page, .team-access-page {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .admin-v2 .admin-shell {
    display: block !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .admin-v2 .admin-main {
    grid-column: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .admin-content, .outlet-content, .shop-main,
  .panel, .admin-form, .inline-form, .shop-card,
  .module-hero, .network-card, .period-panel,
  .otp-card, .team-access-card, .login-experience {
    max-width: 100% !important;
    min-width: 0 !important;
  }

  body > main > *, .admin-content > *, .outlet-content > *, .shop-main > * {
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .admin-v2 .admin-top {
    left: 0 !important;
    right: 0 !important;
    gap: 10px;
  }

  /* A slide-out menu must cover the fixed bottom bar. */
  .admin-v2 .admin-side { z-index: 12002 !important; }
  .side-open .side-backdrop {
    display: block !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 12001 !important;
  }
  body.side-open, body.shop-menu-open { overflow: hidden !important; }
  .shop-menu-backdrop { z-index: 12001 !important; }
  .shop-mobile-menu { z-index: 12002 !important; }

  .admin-mobile-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 126px;
    height: 46px;
    padding: 5px 8px;
    background: #fff;
    border: 1px solid #e7ded6;
    border-radius: 10px;
  }

  .admin-mobile-brand img {
    display: block;
    width: 108px;
    height: 34px;
    object-fit: contain;
  }

  .admin-v2 .admin-top .side-toggle {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    margin: 0;
  }

  .admin-v2 .top-actions {
    margin-left: auto;
    min-width: 0;
  }

  .admin-v2 .top-actions a:first-child {
    white-space: nowrap;
  }

  .stats, .stats-4, .command-stats, .quick-grid,
  .dashboard-main, .dashboard-lower, .dash-grid,
  .kpi-grid, .module-kpis, .module-grid,
  .shop-layout, .expense-workspace, .fixed-layout {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .data-table, .table-wrap, .responsive-table, .inventory-table,
  .team-table, .access-table, .setup-table, .purchase-board-scroll {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
  }

  .hero, .why, .page-head, .content-page,
  .cart-layout, .checkout-grid, .account-grid,
  .login-experience, .otp-card, .team-access-card {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .hero img, .product img, .product-page > img {
    max-width: 100%;
    object-fit: cover;
  }
}

@media (max-width: 700px) {
  body, body.admin-v2, body.outlet-os, body.shop-v2 {
    padding-bottom: 0 !important;
  }

  /* Reserve usable space inside each surface instead of creating a white
     strip after the page/footer. */
  .footer { padding-bottom: 88px !important; }
  .admin-content { padding-bottom: 112px !important; }
  .outlet-content, .shop-main { padding-bottom: 112px !important; }
  body.pos-screen .outlet-content { padding-bottom: 178px !important; }

  .admin-bottom-nav, .outlet-bottom-nav, .mobile-nav {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    z-index: 10000 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 88px !important;
    min-height: 88px !important;
    padding: 7px 6px 3px !important;
    align-items: center !important;
    border-radius: 20px 20px 0 0 !important;
    background: rgba(255,255,255,.98) !important;
    border-top: 2px solid #17120f !important;
    box-shadow: 0 -10px 34px #1113 !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }

  .admin-bottom-nav a, .outlet-bottom-nav a, .mobile-nav a {
    width: 19% !important;
    height: 68px !important;
    min-width: 0;
    gap: 4px !important;
    border-radius: 14px !important;
    justify-content: center !important;
    transition: background-color .15s ease, color .15s ease, transform .15s ease;
  }

  .admin-bottom-nav i, .outlet-bottom-nav i, .mobile-nav i {
    font-size: 25px !important;
    line-height: 1 !important;
  }
  .admin-bottom-nav small, .outlet-bottom-nav small, .mobile-nav small {
    font-size: 10px !important;
    line-height: 1 !important;
    font-weight: 900 !important;
  }

  .admin-bottom-nav a.active,
  .outlet-bottom-nav a.active:not(.main),
  .mobile-nav a.active:not(.main) {
    color: #e82238 !important;
    background: #fff0f2 !important;
  }

  .admin-bottom-nav a.active i,
  .outlet-bottom-nav a.active:not(.main) i,
  .mobile-nav a.active:not(.main) i {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: #ffe0e4;
  }
  .outlet-bottom-nav .main, .mobile-nav .main {
    width: 68px !important;
    height: 68px !important;
    flex: 0 0 68px !important;
    margin-top: -24px !important;
    border: 4px solid #fff !important;
    outline: 2px solid #17120f;
    box-shadow: 0 8px 22px #e8223855 !important;
  }

  .outlet-bottom-nav, .mobile-nav, .ops-bottom-nav {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .side-open .admin-bottom-nav, .shop-menu-open .outlet-bottom-nav {
    visibility: hidden;
    pointer-events: none;
  }

  .module-hero h1, .shop-hero h1, .admin-head h1,
  .page-head h1, .otp-card h1 {
    overflow-wrap: anywhere;
  }
}

@media (max-width: 430px) {
  .admin-v2 .admin-top { padding: 0 10px !important; }
  .admin-mobile-brand { width: 118px; }
  .admin-mobile-brand img { width: 102px; }
  .admin-v2 .top-actions a:first-child { padding: 8px 9px; font-size: 10px; }

  .admin-content { padding: 14px !important; }
  .outlet-content, .shop-main { padding-left: 12px !important; padding-right: 12px !important; }

  .otp-page, .team-access-page, .auth-wrap {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .otp-card, .team-access-card, .login-panel {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  .admin-v2 .stats-4, .command-stats,
  .module-kpis, .kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 350px) {
  .admin-mobile-brand { width: 104px; padding-inline: 4px; }
  .admin-mobile-brand img { width: 94px; }
  .admin-v2 .top-actions a:first-child { font-size: 0; }
  .admin-v2 .top-actions a:first-child::after { content: '+'; font-size: 19px; }
}