/* ================================================================
   DEX LEDGER — MOBILE-FORWARD STYLES
   Optimised for Android & iOS primary usage.
   ================================================================ */

/* ----------------------------------------------------------------
   BOTTOM NAVIGATION BAR
   ---------------------------------------------------------------- */
.mobile-bottom-nav {
  display: none; /* desktop: off */
}

@media (max-width: 640px) {

  /* Show bar when logged in (hidden attr removed by JS) */
  .mobile-bottom-nav:not([hidden]) {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 500;
    align-items: stretch;
    justify-content: space-around;
    background: var(--oh-surface);
    border-top: 1px solid var(--oh-gold-border);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.40);
  }

  /* Push main content up so it isn't hidden behind the bar */
  body.page-app #app-content,
  body.page-app .app-section-shell,
  body.page-app .app-intro {
    padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
  }

  body.has-mobile-bottom-nav {
    padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px));
  }

  /* Each nav item */
  .mobile-nav-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    flex: 1;
    min-height: 56px;
    padding: 8px 4px 6px;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--oh-text-3);
    text-decoration: none;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    transition: color var(--oh-t-fast) ease, background var(--oh-t-fast) ease;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }

  .mobile-nav-btn:hover,
  .mobile-nav-btn:focus-visible {
    color: var(--oh-text-2);
    background: rgba(255,255,255,0.04);
    outline: none;
  }

  .mobile-nav-btn.is-active {
    color: var(--oh-gold);
  }

  .mobile-nav-btn svg {
    width: 22px;
    height: 22px;
    stroke: currentColor;
    flex-shrink: 0;
    transition: transform 0.15s var(--oh-spring, cubic-bezier(0.34,1.56,0.64,1));
  }

  .mobile-nav-btn.is-active svg {
    transform: scale(1.15) translateY(-1px);
  }

  /* Scan button — slightly elevated / pill style */
  .mobile-nav-btn--scan {
    position: relative;
  }

  .mobile-nav-scan-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 36px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--oh-gold), var(--oh-gold-2));
    box-shadow: 0 2px 12px rgba(201,168,76,0.40);
    margin-bottom: 1px;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
  }

  .mobile-nav-btn--scan svg {
    stroke: #09090d;
    width: 20px;
    height: 20px;
  }

  .mobile-nav-btn--scan:active .mobile-nav-scan-wrap {
    transform: scale(0.94);
    box-shadow: 0 1px 6px rgba(201,168,76,0.25);
  }

  .mobile-nav-btn--scan .mobile-nav-label {
    color: var(--oh-gold-2);
    font-weight: 800;
  }

}

/* ----------------------------------------------------------------
   GLOBAL TOUCH IMPROVEMENTS
   ---------------------------------------------------------------- */

/* Minimum 44px touch targets on all interactive elements */
@media (max-width: 768px) {

  /* Prevent iOS form zoom (font-size < 16px triggers it) */
  /* Exclude the hidden category-nav selects — they're not user-facing */
  input:not([type="checkbox"]):not([type="radio"]),
  select:not(.category-nav__select),
  textarea {
    font-size: 16px !important;
  }

  /* Comfortable tap targets */
  .button,
  button.button,
  a.button,
  .tab-btn,
  .pill-link {
    min-height: 44px;
    min-width: 44px;
  }

  /* Better button padding on mobile */
  .button {
    padding: 12px 18px;
  }

  /* Pill links a bit more comfortable */
  .pill-link,
  .pill-select {
    padding: 8px 14px;
    font-size: 0.85rem;
  }

  /* Tab buttons — bigger touch area */
  .tab-btn {
    padding: 9px 16px;
    font-size: 0.875rem;
  }

  /* Cards — better mobile padding */
  .panel {
    padding: 16px !important;
    border-radius: 16px !important;
  }

  .glass-card {
    padding: 18px;
  }

  /* Panel header spacing */
  .panel__header {
    margin-bottom: 12px;
  }

  /* Forms — better mobile spacing */
  .grid-2,
  .ui-grid-2 {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  /* Collection card grid — 2 col on mobile */
  .collection-card-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }

  /* Stat grids — 2 col */
  .ui-grid-4 {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Detail grid — single col */
  .detail-grid {
    grid-template-columns: 1fr !important;
  }

  /* Profile grid */
  .profile-page-grid {
    grid-template-columns: 1fr !important;
  }

  /* Nav row — don't wrap, scroll instead */
  .nav__row {
    overflow-x: visible;
  }

  /* App intro — simpler layout on mobile */
  .app-intro {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 16px;
  }

  .app-intro__trust {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }

  /* App section shell */
  .page-app .app-section-shell {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  /* Trust chips — compact on mobile */
  .trust-chip {
    font-size: 0.7rem;
    padding: 5px 9px;
  }

  /* Category nav header dropdowns — full width on mobile */
  .category-nav--header .category-nav__select {
    max-width: 140px;
    font-size: 0.8rem;
  }

  /* Settings notes — better mobile padding */
  .settings-note {
    padding: 12px 14px !important;
  }

  /* Reduce form action gap */
  .form-actions {
    gap: 8px;
  }

  /* Landing step cards — single col */
  .landing-steps-grid {
    grid-template-columns: 1fr !important;
  }

  /* Credits grid — single col on small */
  .credits-grid {
    grid-template-columns: 1fr !important;
  }

  /* Rewards grid */
  .rewards-grid {
    grid-template-columns: 1fr !important;
  }

  /* Dashboard layout */
  .dashboard-layout,
  .deck-builder-layout {
    grid-template-columns: 1fr !important;
  }

}

/* ----------------------------------------------------------------
   EXTRA SMALL SCREENS (iPhone SE etc.)
   ---------------------------------------------------------------- */
@media (max-width: 375px) {

  /* Collection grid — 1 col on very small */
  .collection-card-grid {
    grid-template-columns: 1fr !important;
  }

  /* Metric cards — 1 col */
  .ui-grid-4 {
    grid-template-columns: 1fr !important;
  }

  .panel {
    border-radius: 12px !important;
  }

  /* Hide the breadcrumb on tiny screens */
  .app-section-shell__breadcrumb {
    display: none;
  }

}

/* ----------------------------------------------------------------
   REDUCED MOTION — stop galaxy & transitions
   ---------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  #galaxy-bg {
    display: none !important;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ----------------------------------------------------------------
   SAFE AREA — notch / home indicator
   ---------------------------------------------------------------- */
@supports (padding: env(safe-area-inset-bottom)) {
  body.page-app header.nav-toolbar {
    padding-top: env(safe-area-inset-top, 0px);
  }

  body.page-landing .landing-nav {
    padding-top: env(safe-area-inset-top, 0px);
  }
}

@media (max-width: 640px) {
  /* Hide nav link row and action pills — hamburger drawer replaces them */
  body.page-landing .landing-nav-links,
  body.page-landing .landing-nav-actions {
    display: none !important;
  }
}

/* ----------------------------------------------------------------
   SCROLLABLE HORIZONTAL TABS ON MOBILE
   ---------------------------------------------------------------- */
@media (max-width: 640px) {
  .tabs.tabs-inline {
    padding: 6px 0;
    gap: 4px;
    /* Snap scrolling for tab strips */
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }

  .tabs.tabs-inline .tab-btn {
    scroll-snap-align: start;
    flex-shrink: 0;
  }
}

/* ----------------------------------------------------------------
   MOBILE NAV CLEANUP — hide cluttered header dropdowns on small screens
   Bottom nav handles all navigation on mobile, so the category select
   dropdowns and credit/user pills are redundant and cause truncation.
   ---------------------------------------------------------------- */
@media (max-width: 640px) {

  /* Hide the select-based nav groups — hamburger drawer replaces them.
     The selects remain in the DOM so JS can still read their options. */
  #header-grouped-nav,
  #app-tabs-wrap,
  .app-tabs-wrap,
  .tab-collapse-row {
    display: none !important;
  }

  /* Hide credits and user-display pills — too small to be readable */
  #header-credits,
  #user-display {
    display: none !important;
  }

  /* Hide the home link inside the profile strip — hamburger drawer covers it */
  .nav-launch-page-link {
    display: none !important;
  }

  /* Profile strip — tight gap, show hamburger + language + logout only */
  #profile-strip {
    gap: 8px;
    padding: 0 4px;
  }

  /* Nav toolbar — compact on mobile */
  header.nav-toolbar,
  .nav-toolbar {
    padding: 4px 0;
  }

  /* Content sits flush below the slim nav bar */
  body.page-app .app-intro {
    margin-top: 0;
  }

}

/* ----------------------------------------------------------------
   STANDALONE APP-LIKE PAGES
   Keep the top header compact on mobile and remove the duplicate
   page-module-nav row that was spilling over the header area.
   ---------------------------------------------------------------- */
@media (max-width: 820px) {
  body.page.page-public-verify .nav,
  body.page.page-shop-backoffice .nav {
    position: static !important;
    top: auto !important;
    display: grid;
    gap: 10px;
    align-items: start;
    padding: 10px 12px;
  }

  body.page.page-public-verify .nav__actions,
  body.page.page-shop-backoffice .nav__actions {
    width: 100%;
    display: flex !important;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 6px;
  }

  body.page.page-public-verify .nav__actions .pill-link,
  body.page.page-shop-backoffice .nav__actions .pill-link,
  body.page.page-shop-backoffice .nav__actions .pill,
  body.page.page-public-verify .nav__actions .pill,
  body.page.page-public-verify .nav__actions button,
  body.page.page-shop-backoffice .nav__actions button {
    min-height: 32px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.72rem;
    line-height: 1.15;
    white-space: nowrap;
    flex: 0 0 auto;
  }

  body.page.page-shop-backoffice #shop-bo-user-pill,
  body.page.page-shop-backoffice #shop-bo-role-pill {
    max-width: 100%;
    font-size: 0.68rem;
  }

  body.page.page-shop-backoffice .shop-bo-nav-collapse-row {
    display: none !important;
  }

  body.page.page-shop-backoffice .shop-bo-nav-actions-wrap {
    display: block !important;
  }

  body.page.page-public-verify .page-module-nav,
  body.page.page-shop-backoffice .page-module-nav {
    display: none !important;
  }
}

@media (max-width: 560px) {
  body.page.page-public-verify .nav__actions,
  body.page.page-shop-backoffice .nav__actions {
    gap: 5px;
  }

  body.page.page-public-verify .nav__actions .pill-link,
  body.page.page-shop-backoffice .nav__actions .pill-link,
  body.page.page-shop-backoffice .nav__actions .pill,
  body.page.page-public-verify .nav__actions .pill,
  body.page.page-public-verify .nav__actions button,
  body.page.page-shop-backoffice .nav__actions button {
    min-height: 30px;
    padding: 4px 9px;
    font-size: 0.68rem;
  }
}

/* ----------------------------------------------------------------
   LIGHT MODE — mobile bottom nav
   ---------------------------------------------------------------- */
:root[data-theme="light"] .mobile-bottom-nav:not([hidden]) {
  background: var(--oh-surface);
  border-top-color: rgba(201,168,76,0.25);
  box-shadow: 0 -2px 16px rgba(0,0,0,0.12);
}

/* ----------------------------------------------------------------
   MOBILE HEADER STABILITY
   Keep the top nav from bunching, wrapping over itself, or bleeding
   into page copy on phones.
   ---------------------------------------------------------------- */
@media (max-width: 640px) {
  .nav,
  .nav-toolbar,
  .landing-nav {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 8px;
  }

  .nav__row {
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
  }

  .nav__brand,
  .landing-nav .nav__brand,
  .nav__actions,
  .landing-nav .nav__actions,
  .landing-nav-actions {
    min-width: 0;
    width: 100%;
  }

  .nav__brand,
  .landing-nav .nav__brand {
    display: flex;
    align-items: center;
    gap: 8px;
    overflow: hidden;
  }

  .nav__brand span:last-child,
  .landing-nav .nav__brand span:last-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .nav__actions,
  .landing-nav .nav__actions,
  .landing-nav-actions {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
  }

  .nav__actions > *,
  .landing-nav .nav__actions > *,
  .landing-nav-actions > * {
    max-width: 100%;
    min-width: 0;
    flex: 0 1 auto;
  }

  .nav__actions .pill-link,
  .nav__actions .pill-select,
  .nav__actions .button,
  .landing-nav .nav__actions .pill-link,
  .landing-nav .nav__actions .pill-select,
  .landing-nav .nav__actions .button,
  .landing-nav-actions .pill-link,
  .landing-nav-actions .pill-select,
  .landing-nav-actions .pill,
  .nav-hamburger {
    min-height: 36px;
    padding: 6px 10px;
    font-size: 0.74rem;
    line-height: 1.15;
  }

  .pill-select,
  .nav-lang-select {
    max-width: min(48vw, 180px);
  }
}

@media (max-width: 820px) {
  body.nav-drawer-enabled.page-app .nav-toolbar,
  body.nav-drawer-enabled.page-scan .nav,
  body.nav-drawer-enabled.page-landing .landing-nav {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px 10px;
  }

  body.nav-drawer-enabled.page-app .nav__brand,
  body.nav-drawer-enabled.page-scan .nav__brand,
  body.nav-drawer-enabled.page-landing .nav__brand {
    min-width: 0;
    width: auto;
    overflow: hidden;
  }

  body.nav-drawer-enabled.page-app .nav__actions,
  body.nav-drawer-enabled.page-scan .nav__actions,
  body.nav-drawer-enabled.page-landing .nav__actions {
    width: auto;
    min-width: 0;
    margin-left: auto;
    justify-content: flex-end;
    flex-wrap: nowrap;
    gap: 6px;
  }

  body.nav-drawer-enabled.page-app .nav__actions .pill-link:not(.nav-hamburger--auto),
  body.nav-drawer-enabled.page-app .nav__actions .button:not(.nav-hamburger--auto),
  body.nav-drawer-enabled.page-app .nav__actions .pill:not(.nav-hamburger--auto),
  body.nav-drawer-enabled.page-app .nav__actions .nav-launch-page-link,
  body.nav-drawer-enabled.page-scan .nav__actions .pill-link:not(.nav-hamburger--auto),
  body.nav-drawer-enabled.page-scan .nav__actions .button:not(.nav-hamburger--auto),
  body.nav-drawer-enabled.page-scan .nav__actions .pill:not(.nav-hamburger--auto),
  body.nav-drawer-enabled.page-scan .nav__actions .nav-launch-page-link {
    display: none !important;
  }

  body.nav-drawer-enabled.page-app .nav__actions .pill-select,
  body.nav-drawer-enabled.page-scan .nav__actions .pill-select,
  body.nav-drawer-enabled.page-app .nav__actions .nav-hamburger--auto,
  body.nav-drawer-enabled.page-scan .nav__actions .nav-hamburger--auto,
  body.nav-drawer-enabled.page-landing .nav-hamburger--auto {
    flex: 0 0 auto;
  }
}

@media (max-width: 640px) {
  body.page-landing .landing-nav {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px 10px;
    height: auto !important;
    min-height: 64px;
    padding: 10px 12px !important;
    margin: 0 auto 10px !important;
    overflow: clip;
  }

  body.page-landing .landing-nav-links,
  body.page-landing .landing-nav-actions,
  body.page-landing .launch-quick-nav {
    display: none !important;
  }

  body.page-landing .landing-nav > .nav__brand {
    display: flex;
    align-items: center;
    gap: 8px;
    width: auto;
    min-width: 0;
    overflow: hidden;
  }

  body.page-landing .landing-nav .nav__brand-meta {
    display: grid;
    gap: 2px;
    min-width: 0;
  }

  body.page-landing .landing-nav .nav__brand-meta > span:first-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.page-landing .landing-nav .brand-trust {
    display: none;
  }

  body.page-landing .landing-nav .badge {
    flex: 0 0 auto;
  }

  body.page-landing .landing-nav > .nav-hamburger,
  body.page-landing .landing-nav > .nav-hamburger--auto {
    display: inline-flex !important;
    align-self: center;
    justify-self: end;
    margin-left: auto;
  }

  body.page-landing .launch-top-beta {
    width: min(calc(100% - 24px), var(--landing-shell));
    margin: 0 auto 0;
    clear: both;
  }

  body.page-landing .landing-main {
    display: block;
  }

  body.page-landing .landing-hero,
  body.page-landing .detail-hero {
    padding-top: 20px !important;
  }

  body.page-landing .landing-hero__copy .eyebrow,
  body.page-landing .detail-hero .eyebrow {
    margin-top: 0;
  }
}

@media (max-width: 560px) {
  body.page-landing .landing-nav,
  body.page-landing .launch-top-beta,
  body.page-landing .landing-section,
  body.page-landing .landing-footer {
    width: min(100vw - 20px, 100%);
  }

  body.page-landing .landing-nav {
    padding: 10px 10px !important;
    margin-bottom: 8px !important;
  }

  body.page-landing .launch-top-beta {
    padding: 10px 12px;
  }

  body.page-landing .landing-hero {
    padding-top: 18px !important;
  }

  body.page-landing .landing-hero__copy h1 {
    margin-top: 6px;
  }
}

/* ----------------------------------------------------------------
   GLOBAL MOBILE LAYOUT SAFETY
   Stop shared headers, panels, actions, and tables from bleeding or
   bunching on narrow screens across app, launch, and support pages.
   ---------------------------------------------------------------- */
@media (max-width: 820px) {
  html,
  body {
    overflow-x: hidden;
  }

  :is(
    .page,
    .page-inner,
    .panel,
    .ui-card,
    .glass-card,
    .settings-note,
    .tab-panel,
    .modal-content,
    .app-intro,
    .app-section-shell,
    .landing-section,
    .landing-auth-card,
    .trade-card,
    .pv-banner,
    .pv-check-item,
    .pv-explain-box,
    .scan-root-panel,
    .catalog-scan-camera-panel,
    .dm-card,
    .dm-topbar,
    .dm-kpi
  ) {
    max-width: 100%;
    min-width: 0;
    overflow-wrap: anywhere;
  }

  :is(
    .panel__header,
    .form-actions,
    .pill-group,
    .nav__actions,
    .dashboard-update-banner__actions,
    .landing-hero__actions,
    .landing-final-cta__actions,
    .scan-section-header,
    .kv-row
  ) {
    gap: 8px !important;
    flex-wrap: wrap !important;
  }

  :is(
    .panel__header,
    .scan-section-header,
    .app-intro,
    .app-section-shell,
    .dashboard-update-banner
  ) {
    align-items: flex-start !important;
  }

  :is(
    .pill-link,
    .pill-select,
    .button,
    .tab-btn,
    .icon-btn
  ) {
    max-width: 100%;
  }

  :is(
    table,
    .table,
    .dm-table-wrap,
    .catalog-photo-catalog,
    .scan-queue-list
  ) {
    max-width: 100%;
    overflow-x: auto;
  }
}

@media (max-width: 640px) {
  body {
    padding-left: max(0px, env(safe-area-inset-left, 0px));
    padding-right: max(0px, env(safe-area-inset-right, 0px));
  }

  :is(
    .panel,
    .glass-card,
    .tab-panel,
    .modal-content,
    .landing-auth-card,
    .trade-card,
    .pv-banner,
    .pv-check-item,
    .pv-explain-box,
    .scan-root-panel,
    .catalog-scan-camera-panel,
    .dm-card,
    .dm-topbar,
    .dm-kpi
  ) {
    padding: 14px !important;
    border-radius: 14px !important;
  }

  :is(
    h1,
    h2,
    h3,
    .landing-hero__copy h1,
    .page-marketing-detail .detail-hero__title
  ) {
    max-width: 100%;
    overflow-wrap: anywhere;
  }
}