/* Responsive integration of the supplied AKAY customer preview.
   Keep live Blazor pages/data; use viewport media queries rather than demo data-layout flags. */
.mobile-nav-icon, .mobile-more-toggle, .mobile-more-menu, .mobile-menu-dismiss { display: none; }
.app-shell .main, .customer-app .customer-main { min-width: 0; }

.customer-app .customer-topbar {
  position: sticky;
  top: 0;
  z-index: 80;
  background: linear-gradient(125deg, #fff, #edf5fd);
}

/* Keep the balance dialog viewport-fixed when opened from the sticky header. */
.customer-app .customer-topbar:has(.ak-modal-wrapper) {
  z-index: 110;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transform: none;
  filter: none;
}

@media (max-width: 920px) {
  :root { --mobile-nav-height: 78px; --mobile-nav-bg: #f8fafc; }
  html { scroll-padding-bottom: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom) + 24px); }
  .app-shell, .customer-app .customer-layout {
    display: block; width: 100%; max-width: none; min-width: 0; min-height: 100dvh;
    margin: 0; padding: 0;
  }
  .app-shell .main, .customer-app .customer-main {
    width: 100%; min-width: 0; margin: 0;
    padding: 12px 12px calc(var(--mobile-nav-height) + env(safe-area-inset-bottom) + 24px);
  }
  /* One navigation component per role: the desktop sidebar becomes a bottom dock. */
  .app-shell .app-sidebar, .customer-app .customer-sidebar {
    position: fixed; inset: auto 0 0; z-index: 90; display: block;
    width: 100%; height: auto; min-height: 0; max-height: none; margin: 0;
    padding: 8px max(6px, env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left));
    border: 1px solid #e2e8f0; border-bottom: 0; border-radius: 22px 22px 0 0;
    background: var(--mobile-nav-bg); background-image: none;
    box-shadow: 0 -5px 28px rgb(34 52 78 / 10%); overflow: visible;
    backdrop-filter: none; -webkit-backdrop-filter: none; transform: none;
  }
  .app-sidebar::before, .app-sidebar .sidebar-brandmark, .app-sidebar .sidebar-status,
  .customer-sidebar > .customer-brand, .customer-sidebar > .side-caption,
  .customer-sidebar > .customer-signout, .customer-sidebar .desktop-nav-extra,
  .app-sidebar .nav-arrow { display: none; }
  .app-sidebar .side-nav, .customer-sidebar .customer-nav {
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: stretch;
    gap: 2px; width: 100%; margin: 0; padding: 0;
  }
  .app-sidebar .side-nav .nav-button, .customer-sidebar .customer-nav > a,
  .customer-sidebar .customer-nav > .mobile-more-toggle {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    grid-column: auto; width: 100%; min-width: 0; min-height: 60px; margin: 0; padding: 5px 2px;
    border: 0; border-radius: 12px; background: transparent; box-shadow: none;
    color: #596579; font-size: 11px; font-weight: 600; line-height: 1.55;
    text-align: center; text-decoration: none; white-space: normal; gap: 4px; transform: none;
  }
  .customer-sidebar .customer-nav > .desktop-nav-extra { display: none; }
  .app-sidebar .nav-button::before, .app-sidebar .nav-button::after { display: none; }
  .mobile-nav-icon { display: block; width: 22px; height: 22px; flex: 0 0 22px; }
  .app-sidebar .side-nav .nav-button.active, .customer-sidebar .customer-nav > .active {
    color: #1d5daf; background: #e7effb; box-shadow: none;
  }
  .app-sidebar .side-nav .nav-button:hover, .customer-sidebar .customer-nav > a:hover,
  .customer-sidebar .mobile-more-toggle:hover { transform: none; color: #174c92; background: #e7effb; }
  .app-sidebar .nav-button:focus-visible, .customer-sidebar :is(a,button):focus-visible { outline: 2px solid #2563eb; outline-offset: -2px; }
  .customer-sidebar .mobile-more-menu {
    display: grid; position: absolute; bottom: calc(100% + 8px); inset-inline: 12px; z-index: 3;
    max-height: calc(100dvh - 120px - env(safe-area-inset-bottom)); overflow: auto;
    padding: 12px; gap: 6px; border: 1px solid #dbe3ed; border-radius: 16px;
    background: #fff; box-shadow: 0 -8px 35px rgb(34 52 78 / 16%);
  }
  .customer-sidebar .mobile-more-menu :is(a,button) {
    display: block; width: 100%; min-height: 44px; padding: 10px 14px; border: 0;
    border-radius: 8px; background: #f1f5fa; color: #24364a; text-align: right; text-decoration: none;
  }
  .customer-sidebar .mobile-menu-dismiss {
    display: block; position: absolute; bottom: 100%; left: 0; width: 100%; height: 100dvh;
    z-index: 2; border: 0; border-radius: 0; background: rgb(15 23 42 / 26%);
  }
  .app-shell .topbar, .app-shell .content { width: 100%; min-width: 0; margin: 0 0 12px; }
  .app-shell .content { padding: 0; }
  .app-shell .grid, .app-shell .dashboard-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .app-shell .grid > *, .customer-app .customer-main > * { min-width: 0; }
  .app-shell .topbar { display: flex; flex-wrap: wrap; padding: 14px; gap: 12px; }
  .app-shell .top-actions { display: flex; flex-wrap: wrap; gap: 8px; }
  .app-shell .top-actions > * { width: auto; min-width: 0; }
  .app-shell .topbar h1 { font-size: clamp(20px, 4vw, 28px); }
  .app-shell .panel { min-width: 0; max-width: 100%; }
  .app-shell :is(.panel-header,.panel-body) { padding: 14px; }
  .app-shell .panel-header { flex-wrap: wrap; gap: 10px; }
  .app-shell :is(.toolbar,.toolbar-group,.pagination-bar,.pagination-actions) { flex-wrap: wrap; gap: 8px; }
  .app-shell .tx-filter-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .app-shell .table-wrap, .customer-app :is(.customer-table-wrap,.tahesab-table-wrap,.table-wrap) {
    display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
  }
  .app-shell .table-wrap table, .customer-app :is(.customer-table-wrap,.tahesab-table-wrap) table { min-width: 640px; }
  .app-shell .metric-value, .app-shell .balance-value { overflow-wrap: anywhere; font-size: clamp(20px, 5vw, 30px); }
  .app-shell .activity-item { grid-template-columns: 10px minmax(0,1fr); }
  .app-shell .activity-item > :last-child:not(.activity-copy) { grid-column: 2; justify-self: start; }
  .app-shell .position-grid { grid-template-columns: minmax(0,1fr); }
  .customer-app .customer-topbar { min-height: 0; padding: 12px; margin-bottom: 14px; flex-wrap: wrap; gap: 10px; }
  .customer-app .customer-topbar h1 { font-size: 19px; }
  .customer-app .customer-topbar .menu-toggle { display: none; } /* Navigation is always accessible below. */
  .customer-app .topbar-actions { flex-wrap: wrap; min-width: 0; gap: 8px; }
  .customer-app .trade-layout, .customer-app .orders-page .order-list, .customer-app .order-list { grid-template-columns: minmax(0,1fr); }
  .customer-app .rate-row { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
  .customer-app .rate-row-label { grid-column: 1/-1; }
  .customer-app .rate-button { min-width: 0; min-height: 60px; padding: 9px; }
  .customer-app .rate-button strong { font-size: 14px; white-space: normal; overflow-wrap: anywhere; }
  .customer-app .trade-product-tabs, .customer-app .daily-balance-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
  .customer-app .trade-product-tabs button { min-width: 0; }
  .customer-app .statement-summary, .customer-app .customer-details { grid-template-columns: minmax(0,1fr); }
  .customer-app .trade-form { padding: 14px 12px; }
  .customer-app .review-row { flex-wrap: wrap; gap: 8px; }
  .app-shell :is(input,select,textarea), .customer-app :is(input,select,textarea) { max-width: 100%; font-size: 16px; }
  .app-shell :is(button,.btn,.select), .customer-app :is(button,.balance-trigger) { min-height: 44px; }
  .app-shell .ak-modal-wrapper, .customer-app .ak-modal-wrapper { padding: 10px; }
  .ak-modal-card { max-height: calc(100dvh - 24px); display: flex; flex-direction: column; }
  .ak-modal-body { min-height: 0; max-height: none; overflow: auto; }
  .ak-modal-header, .ak-modal-footer { flex-shrink: 0; flex-wrap: wrap; gap: 8px; }
  /* A modal inside main must remain above the fixed bottom navigation. */
  .app-shell .main:has(.ak-modal-wrapper), .customer-app .customer-main:has(.ak-modal-wrapper) { position: relative; z-index: 110; }
}

@media (max-width: 480px) {
  .app-shell .stats-grid, .app-shell .tx-filter-grid { grid-template-columns: minmax(0,1fr); }
  .app-shell .pagination-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); width: 100%; }
  .app-shell .pagination-actions .btn { min-width: 0; width: 100%; }
  .app-shell .top-actions .btn { flex: 1 1 auto; }
  .customer-app .customer-user { font-size: 13px; overflow-wrap: anywhere; }
  .customer-app .daily-balance-grid { grid-template-columns: minmax(0,1fr); }
  .customer-app .rules-list section { grid-template-columns: minmax(0,1fr); }
}

@media (prefers-reduced-motion: reduce) {
  /* Honor the device preference without stopping loading indicators. */
  .app-shell *, .customer-app *, .login-shell * { transition: none !important; }
  .ak-toast, .ak-modal-card { animation: none; }
}

/* Long prices, account identifiers and action rows must not widen narrow screens. */
@media (max-width: 920px) {
  .app-shell :is(.price-card-content,.price-market,.price-editor),
  .customer-app :is(.trade-aside,.trade-context,.current-rate,.order-card,.rate-card) { min-width: 0; }
  .app-shell .price-card-content { flex-wrap: wrap; gap: 12px; }
  .app-shell .price-editor { flex: 1 1 140px; max-width: 100%; }
  .app-shell .price-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
  .customer-app :is(.current-rate,.trade-context,.section-heading,.order-card-top,.order-card-foot) { flex-wrap: wrap; gap: 8px; }
  .customer-app :is(.current-rate strong,.trade-aside strong,.order-card-values strong,.signed-value strong) { overflow-wrap: anywhere; }
  .customer-app .trade-entry input { width: 100%; min-width: 0; min-height: 48px; scroll-margin-block: 80px 110px; }
  .customer-app .submit-order { width: 100%; min-height: 48px; }
  .customer-app .customer-nav > .mobile-more-toggle { font: inherit; font-size: 11px; font-weight: 600; }
  /* Existing glass headers otherwise become the containing block for fixed modals. */
  .customer-app .customer-topbar:has(.ak-modal-wrapper),
  .app-shell .panel:has(.ak-modal-wrapper), .app-shell .topbar:has(.ak-modal-wrapper) {
    backdrop-filter: none; -webkit-backdrop-filter: none; transform: none; filter: none;
  }
  .ak-modal-card :is(input,select,textarea) { max-width: 100%; font-size: 16px; }
  .ak-modal-header { align-items: center; justify-content: space-between; }
  .ak-modal-header .ak-close-btn { width: 44px; min-height: 44px; flex: 0 0 44px; }
}

@media (max-width: 480px) {
  .app-shell .price-card-content { display: grid; grid-template-columns: minmax(0,1fr); }
  .app-shell .price-editor { width: 100%; }
  .app-shell .price-actions > .btn { width: 100%; }
  .customer-app .current-rate { align-items: flex-start; flex-direction: column; }
  .customer-app .order-card-values { grid-template-columns: minmax(0,1fr); }
}

/* Keep Dashboard centered and slightly raised in both mobile navigation bars. */
@media (max-width: 920px) {
  .app-sidebar .side-nav > .nav-button[data-nav="dashboard"],
  .customer-app .customer-sidebar .customer-nav > a[href="/customer/dashboard"] {
    grid-column: 3;
    grid-row: 1;
    min-height: 66px;
    font-size: 12px;
    font-weight: 750;
    transform: translateY(-6px);
    border-radius: 16px;
    box-shadow: 0 -3px 12px rgb(34 52 78 / 9%);
  }
  .app-sidebar .side-nav > .nav-button[data-nav="dashboard"] .mobile-nav-icon,
  .customer-app .customer-sidebar .customer-nav > a[href="/customer/dashboard"] .mobile-nav-icon {
    width: 30px;
    height: 30px;
    flex-basis: 30px;
  }
}