:root {
  --native-touch-target: 46px;
  --native-radius: 18px;
  --native-safe-bottom: env(safe-area-inset-bottom, 0px);
  --native-safe-top: env(safe-area-inset-top, 0px);
}

html { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
body { overscroll-behavior-y: none; }

@media (max-width: 768px) {
  html, body {
    min-height: 100%;
    background: radial-gradient(circle at 18% 12%, rgba(0, 180, 216, 0.16), transparent 34%), linear-gradient(145deg, #eef5ff 0%, #f8fbff 100%);
  }

  body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background-image: url("/images/vtx-logo.png");
    background-repeat: no-repeat;
    background-position: center 32%;
    background-size: min(78vw, 360px);
    opacity: 0.055;
    animation: mobile-watermark-breathe 8s ease-in-out infinite;
  }

  body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(255,255,255,0.2), rgba(255,255,255,0.74));
  }

  @keyframes mobile-watermark-breathe {
    0%, 100% { opacity: 0.04; transform: scale(0.98); }
    50% { opacity: 0.08; transform: scale(1.03); }
  }

  .page, .layout, .app-shell, main, .main, .content, article {
    max-width: 100%;
    overflow-x: hidden;
  }

  .content, article.content, .container, .container-fluid, .main-content {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }

  .card, .panel, .glass, .surface, .login-card, .dashboard-card, .summary-card, section, form {
    border-radius: var(--native-radius) !important;
  }

  .glass, .card, .panel, .surface, .login-card, .dashboard-card, .summary-card {
    background: linear-gradient(145deg, rgba(255,255,255,0.8), rgba(255,255,255,0.52)) !important;
    border: 1px solid rgba(255,255,255,0.64) !important;
    box-shadow: 0 18px 45px rgba(13, 27, 62, 0.13), inset 0 1px 0 rgba(255,255,255,0.75) !important;
    backdrop-filter: blur(22px) saturate(1.2) !important;
    -webkit-backdrop-filter: blur(22px) saturate(1.2) !important;
  }

  h1, .page-title { font-size: clamp(1.55rem, 8vw, 2.2rem) !important; line-height: 1.06; letter-spacing: 0; }
  h2, h3 { letter-spacing: 0; }
  p, label, small, span, td, th { overflow-wrap: anywhere; }

  button, .btn, a.btn, input, select, textarea, .form-control, .form-select, .nav-link {
    min-height: var(--native-touch-target);
    touch-action: manipulation;
  }

  .btn, button { border-radius: 999px; }

  .form-control, .form-select, textarea {
    border-radius: 14px !important;
    background: rgba(255,255,255,0.8) !important;
    border-color: rgba(13, 27, 62, 0.14) !important;
    font-size: 16px;
  }

  .row, .grid, .dashboard-grid, .cards-grid, .summary-grid {
    gap: 0.85rem;
  }

  .mobile-section-swipe, .cards-carousel, .dashboard-grid, .summary-grid {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(84%, 1fr);
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    padding-bottom: 0.85rem;
  }

  .mobile-section-swipe > *, .cards-carousel > *, .dashboard-grid > *, .summary-grid > * {
    scroll-snap-align: center;
    min-width: 0;
  }

  .mobile-section-swipe::-webkit-scrollbar, .cards-carousel::-webkit-scrollbar, .dashboard-grid::-webkit-scrollbar, .summary-grid::-webkit-scrollbar {
    display: none;
  }

  .table-responsive, table {
    max-width: 100%;
  }

  .table-responsive {
    border-radius: var(--native-radius);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

@media (max-width: 768px) {
  body::before,
  body::after,
  .vtx-app-watermark {
    display: none !important;
    content: none !important;
  }

  body { font-size: 0.92rem; }

  .login-page,
  .login-card {
    position: relative;
    overflow: hidden;
  }

  .login-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: url("/images/vtx-logo.png");
    background-repeat: no-repeat;
    background-position: center 42%;
    background-size: min(70vw, 280px);
    opacity: 0.075;
    filter: saturate(0.9);
    animation: mobile-watermark-breathe 8s ease-in-out infinite;
  }

  .login-card > * { position: relative; z-index: 1; }
  h1, .page-title { font-size: clamp(1.28rem, 6.2vw, 1.75rem) !important; }
  h2 { font-size: clamp(1.12rem, 5vw, 1.45rem) !important; }
  h3, .page-header h3 { font-size: clamp(1rem, 4.4vw, 1.25rem) !important; }

  .navbar-brand, .top-row, .nav-link, .bottom-nav-label, .more-menu-label, .card-title, .stat-label {
    font-size: 0.86rem !important;
    line-height: 1.15 !important;
  }

  .bi, .login-icon, .bottom-nav-icon, .stat-card .stat-icon, .navbar-toggler .bi, .hamburger .bi {
    font-size: 1.05rem !important;
    line-height: 1 !important;
  }

  .login-icon { font-size: 2rem !important; }
  .theme-logo, .login-logo { max-height: 42px !important; }
  button, .btn, a.btn, input, select, textarea, .form-control, .form-select, .nav-link { min-height: 42px; }
}

/* Native mobile full-screen navigation surfaces */
@media (max-width: 768px) {
  :root {
    --native-touch-target: 48px;
    --native-touch-gap: 10px;
  }

  .mobile-overlay.open,
  .horizontal-nav-overlay.open,
  .more-menu-overlay.open {
    position: fixed !important;
    inset: 0 !important;
    z-index: 29980 !important;
    background: rgba(8, 18, 32, 0.42) !important;
    backdrop-filter: blur(10px) saturate(1.05) !important;
    -webkit-backdrop-filter: blur(10px) saturate(1.05) !important;
  }

  .sidebar.open,
  .horizontal-nav-collapse.open,
  .more-menu-panel.open {
    position: fixed !important;
    inset: 0 !important;
    z-index: 30000 !important;
    width: 100vw !important;
    max-width: none !important;
    height: 100dvh !important;
    max-height: none !important;
    display: flex !important;
    flex-direction: column !important;
    padding: calc(env(safe-area-inset-top, 0px) + 16px) 16px calc(env(safe-area-inset-bottom, 0px) + 20px) !important;
    border: 0 !important;
    border-radius: 0 !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    background: linear-gradient(145deg, rgba(246, 251, 255, 0.94), rgba(228, 238, 252, 0.88)) !important;
    box-shadow: none !important;
    backdrop-filter: blur(26px) saturate(1.18) !important;
    -webkit-backdrop-filter: blur(26px) saturate(1.18) !important;
  }

  .more-menu-panel.open {
    transform: none !important;
  }

  .more-menu-header {
    position: sticky;
    top: 0;
    z-index: 1;
    min-height: 56px;
    padding: 4px 0 12px !important;
    background: inherit;
  }

  .sidebar.open .navbar-brand,
  .horizontal-nav-collapse.open .navbar-brand {
    min-height: 56px;
    margin-bottom: 12px;
  }

  .sidebar.open .flex-column,
  .horizontal-nav-collapse.open .flex-column,
  .more-menu-panel.open .flex-column {
    display: grid !important;
    gap: var(--native-touch-gap);
    width: 100%;
  }

  .sidebar.open .nav-section-label,
  .horizontal-nav-collapse.open .nav-section-label,
  .more-menu-panel.open .nav-section-label {
    margin-top: 12px;
    padding: 0 6px;
    font-size: 0.75rem !important;
    letter-spacing: 0.08em;
  }

  .sidebar.open .nav-link,
  .horizontal-nav-collapse.open .nav-link,
  .more-menu-panel.open .nav-link,
  .bottom-nav-item {
    min-height: var(--native-touch-target) !important;
    border-radius: 16px !important;
    padding: 12px 14px !important;
    gap: 12px !important;
    font-size: 0.95rem !important;
    line-height: 1.15 !important;
    touch-action: manipulation;
  }

  .sidebar.open .nav-link .bi,
  .horizontal-nav-collapse.open .nav-link .bi,
  .more-menu-panel.open .nav-link .bi {
    width: 24px;
    min-width: 24px;
    font-size: 1.12rem !important;
  }

  .bottom-nav {
    min-height: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
  }

  .bottom-nav-item {
    min-width: 64px !important;
  }
}
/* Final native mobile menu/flyout positioning pass */
@media (max-width: 768px) {
  .mobile-overlay.open,
  .horizontal-nav-overlay.open,
  .more-menu-overlay.open {
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
  }

  .sidebar,
  .horizontal-nav-collapse,
  .more-menu-panel {
    transition: transform 220ms ease, opacity 180ms ease !important;
  }

  .sidebar:not(.open),
  .horizontal-nav-collapse:not(.open),
  .more-menu-panel:not(.open) {
    transform: translateX(100%) !important;
  }

  .sidebar.open,
  .horizontal-nav-collapse.open,
  .more-menu-panel.open {
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    min-height: 100dvh !important;
    height: 100dvh !important;
    transform: translateX(0) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .more-menu-header {
    display: none !important;
  }

  .more-menu-body {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .sidebar.open::before,
  .horizontal-nav-collapse.open::before,
  .more-menu-panel.open::before,
  [class*="flyout"].open::before,
  [class*="drawer"].open::before {
    content: "";
    display: block;
    width: 44px;
    height: 5px;
    min-height: 5px;
    margin: 0 auto 14px;
    border-radius: 999px;
    background: rgba(13, 27, 62, 0.24);
    flex: 0 0 auto;
  }

  [class*="flyout"].open,
  [class*="drawer"].open,
  .flyout,
  .drawer {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    max-width: none !important;
    max-height: none !important;
    border-radius: 0 !important;
    transform: translateX(0) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
  }
}

/* Hard stop: banking/admin mobile drawers are right-to-left full-screen surfaces. */
@media (max-width: 900px), (pointer: coarse) and (max-width: 1180px) {
  body:has(.vtx-mobile-nav.open),
  body:has(.mobile-nav.open),
  body:has(.mobile-drawer.open),
  body:has([class*="drawer"].open),
  body:has([class*="flyout"].open) {
    overflow: hidden !important;
  }

  .vtx-mobile-nav.open,
  .mobile-nav.open,
  .mobile-drawer.open,
  .drawer.open,
  [class*="drawer"].open,
  [class*="flyout"].open,
  .offcanvas.show {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    z-index: 2147483000 !important;
    width: 100vw !important;
    min-width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    transform: translateX(0) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: calc(env(safe-area-inset-top, 0px) + 18px) 16px calc(env(safe-area-inset-bottom, 0px) + 22px) !important;
  }
}