/* ==========================================================================
   MOBILE UI FIXES (2026-09-01)
   Comprehensive fix for mobile responsiveness issues
   Loaded AFTER styles.css to override problematic rules
   ========================================================================== */

/* Ensure nav-left and nav-right wrap properly */
.nav-left,
.nav-right {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-wrap: wrap !important;
}

/* Login details and notification label are mobile-only additions. */
.site-header .nav-login-card,
.site-header .nav-notification-label {
  display: none;
}

/* ===== MOBILE BREAKPOINT: 900px ===== */
@media (max-width: 900px) {
  /* Navigation drawer */
  .nav-left,
  .nav-right {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 2px;
    width: 100%;
    margin: 0;
    padding-right: 0;
  }
  
  .nav-right {
    margin-left: 0 !important;
    margin-top: 10px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
  }
  
  .nav-left a,
  .nav-right a {
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 12px 10px;
    min-height: 44px;
    font-size: 15px;
    text-align: left;
    border-radius: 10px;
  }
  
  .nav-left .nav-cta,
  .nav-right .nav-cta {
    margin-top: 8px !important;
    text-align: center;
  }
  
  /* Hamburger button */
  .nav-toggle {
    display: inline-block !important;
    font-size: 24px;
    line-height: 1;
    padding: 10px 14px;
    -webkit-tap-highlight-color: transparent;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.15) !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    color: #fff !important;
    cursor: pointer;
    min-width: 44px;
    min-height: 44px;
    align-items: center;
    justify-content: center;
  }

  .nav-toggle:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.85);
    outline-offset: 2px;
  }

  .nav-toggle-icon {
    display: block;
    line-height: 1;
  }
  
    /* Header stays above backdrop + drawer so logo & toggle remain reachable */
  .site-header {
    position: relative;
    z-index: 1001;
  }

  /* Ensure the toggle button respects its z-index (requires position set) */
  .nav-toggle {
    position: relative;
  }

  /* Full-viewport modal navigation drawer (fixed + full viewport) */
  .site-header .nav {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(82vw, 340px);
    max-width: 100%;
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    max-height: none;
    margin: 0;
    box-sizing: border-box;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
    visibility: hidden;
    transform: translateX(100%);
    transition: transform 0.25s ease, visibility 0.25s ease;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: flex-start;
    padding: calc(72px + env(safe-area-inset-top, 0px))
             calc(20px + env(safe-area-inset-right, 0px))
             calc(20px + env(safe-area-inset-bottom, 0px))
             calc(20px + env(safe-area-inset-left, 0px));
    gap: 6px;
    background: linear-gradient(90deg, var(--brand-2), var(--brand-accent));
    background-position: center bottom;
    background-repeat: no-repeat;
    z-index: 999;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.3);
  }

  .site-header .nav > * {
    flex-shrink: 0;
    min-width: 0;
  }

  .site-header .nav a,
  .site-header .nav .nav-logout,
  .site-header .nav .nav-user,
  .site-header .nav .nav-user *,
  .site-header .nav .nav-label,
  .site-header .nav svg {
    color: #fff !important;
  }

  /* Keep every menu row on the same icon/text grid, including the bell and
     the POST logout button (desktop styles center the bell and indent forms). */
  .site-header .nav > a,
  .site-header .nav .nav-logout {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    width: 100%;
    min-height: 46px;
    margin: 0;
    padding: 12px 14px;
    box-sizing: border-box;
    white-space: normal;
    text-align: left;
    font-size: 16px;
    line-height: 1.4;
    color: #fff !important;
    border-radius: 12px;
    transition: background-color 0.2s ease;
  }

  /* Premium menu rows: soft frosted highlight while pressed */
  .site-header .nav > a:hover,
  .site-header .nav > a:active {
    background: rgba(255, 255, 255, 0.14);
  }

  /* Logout: white pill button, always visible on the purple drawer */
  .site-header .nav .nav-logout {
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.3);
    font-weight: 600;
    letter-spacing: 0.2px;
    cursor: pointer;
    font-family: inherit;
  }
  .site-header .nav .nav-logout:hover,
  .site-header .nav .nav-logout:active {
    background: rgba(255, 255, 255, 0.22);
  }

  .site-header .nav .nav-form {
    display: block;
    width: 100%;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    box-shadow: none;
    background: transparent;
  }

  /* Thin divider above the logout action */
  .site-header .nav .nav-form::before {
    content: "";
    display: block;
    height: 1px;
    margin: 0 0 12px;
    background: rgba(255, 255, 255, 0.22);
  }

  .site-header .nav > a > svg,
  .site-header .nav .nav-bell-icon,
  .site-header .nav .nav-logout > svg {
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    margin: 0;
    color: #fff !important;
  }

  .site-header .nav .nav-user {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    margin: 6px 0;
    padding: 12px 10px;
    box-sizing: border-box;
    gap: 8px;
    white-space: normal;
    overflow-wrap: anywhere;
    text-align: left;
  }

  .site-header .nav .nav-user > span {
    display: block;
    min-width: 0;
    max-width: 100%;
    white-space: normal;
    color: #fff !important;
  }

  /* Greeting: prominent header of the drawer profile block */
  .site-header .nav .nav-user {
    /* Profile is the final item after every navigation/action option. */
    order: 99;
  }
  .site-header .nav .nav-form {
    /* Keep logout alongside the other options, before the profile. */
    order: 0;
  }

  .site-header .nav .nav-user > span:first-child {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.2px;
  }

  /* Last-login pill: frosted glass card under the greeting */
  .site-header .nav .nav-login-card {
    display: block;
    padding: 9px 14px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
    font-size: 12px;
    line-height: 1.5;
    font-weight: 500;
    letter-spacing: 0.2px;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .site-header .nav .nav-notification-label {
    display: inline;
  }

  body.nav-drawer-open .site-header .nav-toggle {
    position: fixed;
    top: calc(12px + env(safe-area-inset-top, 0px));
    right: calc(12px + env(safe-area-inset-right, 0px));
    z-index: 1000;
  }

  /* Hamburger ⟷ close (✕) icon swap */
  .nav-toggle .nav-toggle-icon.nav-icon-close {
    display: none;
  }
  .nav-toggle.open .nav-toggle-icon.nav-icon-open {
    display: none;
  }
  .nav-toggle.open .nav-toggle-icon.nav-icon-close {
    display: inline;
  }

  /* Full-viewport clickable backdrop for outside-tap-to-close */
  .nav-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 998;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease;
  }

  .nav-backdrop.show {
    opacity: 1;
    visibility: visible;
  }

  /* Lock body scroll when drawer is open (independent drawer scroll only) */
  body.nav-drawer-open {
    overflow: hidden;
    -webkit-overflow-scrolling: auto;
  }

  .site-header .nav.open {
    visibility: visible;
    transform: translateX(0);
  }

  /* Premium: smoother easing for drawer slide and backdrop fade */
  .nav,
  .nav-backdrop {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                visibility 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }

  /* Premium frosted-glass backdrop */
  .nav-backdrop {
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
  }

  /* Premium custom scrollbar — theme-aware accent */
  .nav::-webkit-scrollbar {
    width: 6px;
  }
  .nav::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
  }
  .nav::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg,
      rgba(255, 255, 255, 0.18) 0%,
      rgba(255, 255, 255, 0.30) 100%);
    border-radius: 3px;
  }
  .nav::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg,
      rgba(255, 255, 255, 0.28) 0%,
      rgba(255, 255, 255, 0.40) 100%);
  }

  /* Premium nav-link hover: subtle white wash with smooth transition */
  .nav a,
  .nav .nav-notification-bell,
  .nav .nav-user {
    transition: background-color 0.18s ease;
  }
  .nav a:hover,
  .nav .nav-notification-bell:hover,
  .nav .nav-user:hover {
    background: rgba(255, 255, 255, 0.1);
  }
  
  /* Hero section */
  .site-hero {
    height: 280px;
  }
  
  .site-hero .hero-content {
    padding: 28px;
  }
  
  /* Dashboard mock */
  .dashboard-mock {
    grid-template-columns: 1fr;
  }
  
  .dashboard-sidebar {
    display: none;
  }
  
  /* Features grid */
  .features-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  /* Product showcase */
  .product-showcase {
    grid-template-columns: 1fr;
  }
  
  /* AI grid */
  .ai-grid {
    grid-template-columns: 1fr;
  }
  
  /* Demo form */
  .demo-form-grid {
    grid-template-columns: 1fr;
  }
  
  /* Demo split */
  .demo-split {
    grid-template-columns: 1fr;
  }
  
  /* Partner schools */
  .partners-heading-row {
    align-items: flex-start;
    flex-direction: column;
  }
  
  .partners-action {
    align-self: flex-end;
  }
  
  /* Footer */
  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  /* Member card */
  .member-card {
    grid-template-columns: 1fr;
    text-align: left;
  }
  
  /* Survey */
  .survey-choices {
    grid-template-columns: 1fr;
  }
  
  /* Nav survey pill */
  .nav-survey {
    width: 100%;
    justify-content: center;
    padding: 11px 15px !important;
  }
}

/* ===== MOBILE BREAKPOINT: 600px ===== */
@media (max-width: 600px) {
  /* Container */
  .container {
    padding: 12px;
  }
  
  /* Hero section */
  .site-hero {
    height: 220px;
  }
  
  .site-hero .hero-content {
    padding: 18px;
  }
  
  .hero-title {
    font-size: 24px;
  }
  
  .hero-sub {
    font-size: 14px;
  }
  
  /* The toggle is in normal topbar flow; no fixed-header spacer is needed. */
  .portal-page .portal-main {
    padding: calc(16px + env(safe-area-inset-top, 0px)) 14px 30px;
  }
  
  .portal-page .portal-card {
    padding: 14px;
  }
  
  .portal-page .portal-table {
    min-width: 560px;
    font-size: 13px;
  }
  
  .portal-page .portal-topbar {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  
  .portal-page .portal-topbar h1 {
    font-size: 20px;
    margin: 0;
  }

  .portal-page .portal-topbar-actions {
    width: 100%;
    justify-content: flex-start;
  }

  .portal-page .portal-topbar-actions .portal-home-btn {
    flex: 0 0 auto;
  }
  
  .portal-page .portal-user-chip {
    width: 36px;
    height: 36px;
    font-size: 14px;
  }
  
  .portal-page .portal-hero {
    padding: 18px 20px;
    font-size: 14px;
  }
  
  .portal-page .portal-hero h2 {
    font-size: 20px;
  }
  
  /* Management toolbar */
  .portal-page .management-toolbar {
    flex-direction: column;
    gap: 12px;
  }
  
  .portal-page .management-search {
    max-width: 100%;
  }
  
  .management-form summary {
    font-size: 14px;
  }
  
  /* Table wrapper */
  .portal-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  .portal-table {
    min-width: 560px;
  }
  
  /* Pagination */
  .pagination {
    flex-direction: column;
    gap: 0.6rem;
  }
  
  .pagination a {
    display: block;
    text-align: center;
  }
  
  .pagination span {
    text-align: center;
    width: 100%;
  }
  
  /* Form elements */
  .portal-form input,
  .portal-form textarea,
  .portal-form select {
    width: 100%;
    font-size: 16px;
  }
  
  .portal-form p {
    margin: 0 0 0.8rem;
  }
  
  /* Features grid */
  .features-grid {
    grid-template-columns: 1fr;
  }
  
  /* Partner schools */
  .partners-section {
    padding: 20px 13px 16px;
  }
  
  .partners-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  
  /* Upload form */
  .upload-card {
    display: block;
    border-radius: 14px !important;
  }
  
  .upload-intro {
    min-height: auto;
    padding: 25px 22px;
  }
  
  .upload-intro-mark {
    margin-bottom: 28px;
  }
  
  .upload-intro h2 {
    font-size: 26px;
  }
  
  .upload-intro-list {
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 25px;
  }
  
  .upload-form-panel {
    padding: 22px 16px;
  }
  
  .upload-hero-logo {
    flex-basis: 54px;
    width: 54px;
    height: 54px;
    border-width: 3px;
    padding: 4px;
  }
  
  .settings-logo-preview {
    flex-basis: 58px;
    width: 58px;
    height: 58px;
  }
  
  .settings-form {
    grid-template-columns: 1fr;
  }
  
  .settings-logo-field,
  .settings-actions {
    grid-column: auto;
  }
  
  .settings-actions {
    align-items: stretch;
    flex-direction: column;
  }
  
  .settings-actions > * {
    width: 100%;
  }
  
  .upload-grid-two,
  .upload-source-grid {
    grid-template-columns: 1fr;
  }
  
  .upload-field-wide {
    grid-column: auto;
  }
  
  .upload-section {
    padding: 16px;
  }
  
  .upload-form-actions {
    align-items: stretch;
    flex-direction: column;
  }
  
  .upload-form-actions .primary-button {
    width: 100%;
  }
  
  /* Footer */
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  
  .footer-bottom {
    flex-direction: column;
    text-align: center;
  }
  
  /* Demo form */
  .demo-form-grid {
    grid-template-columns: 1fr;
  }
  
  /* School home */
  .school-home-grid {
    grid-template-columns: 1fr;
  }
  
  .school-home-wide {
    margin-bottom: 0;
  }
  
  .school-home-hero {
    align-items: flex-start;
  }
  
  .school-home-mark {
    flex-basis: 56px;
    width: 56px;
    height: 56px;
  }
  
  /* Workspace */
  .workspace-heading,
  .workspace-toolbar {
    align-items: stretch;
    flex-direction: column;
    gap: 0.75rem;
  }
  
  .workspace-back {
    align-self: flex-start;
  }
  
  /* Toast notifications */
  .toast-stack {
    left: 1rem;
    right: 1rem;
  }
  
  /* Dashboard KPIs */
  .dashboard-kpis {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .dashboard-content {
    grid-template-columns: 1fr;
  }
}

/* ===== MOBILE HERO FIXES ===== */
@media (max-width: 768px) {
  .landing-hero-grid {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 0 16px;
  }

  .landing-hero-title {
    font-size: clamp(1.6rem, 6vw, 2.2rem) !important;
    line-height: 1.15 !important;
    margin: 12px 0 8px !important;
  }

  .landing-hero-desc {
    font-size: 0.95rem !important;
    line-height: 1.6 !important;
    max-width: 100% !important;
    margin-bottom: 16px !important;
  }

  .landing-hero-actions {
    flex-direction: column;
    gap: 10px;
    margin-bottom: 20px;
  }

  .landing-hero-actions .cta,
  .landing-hero-actions .cta-secondary {
    width: 100%;
    text-align: center;
    padding: 12px 20px !important;
    font-size: 15px !important;
  }

  .hero-stats {
    gap: 16px !important;
    flex-wrap: wrap;
  }

  .hero-stats li {
    min-width: 70px;
    flex: 1 1 calc(50% - 16px);
  }

  .hero-stats li+li::before {
    display: none;
  }

  .hero-stats strong {
    font-size: clamp(1.1rem, 4vw, 1.4rem) !important;
  }

  .hero-stats small {
    font-size: 10px !important;
  }

  .landing-dashboard-mock {
    order: -1;
    max-width: 100%;
    margin: 0 auto;
  }

  .dash-shell {
    border-radius: 14px;
  }

  .float-chip {
    display: none;
  }

  .landing-badge {
    font-size: 11px;
    padding: 5px 10px;
  }
}

@media (max-width: 480px) {
  .landing-hero {
    padding: 24px 0 32px !important;
  }

  .landing-hero-grid {
    gap: 16px;
    padding: 0 12px;
  }

  .landing-hero-title {
    font-size: clamp(1.4rem, 7vw, 1.8rem) !important;
  }

  .landing-hero-desc {
    font-size: 0.88rem !important;
  }

  .hero-stats {
    gap: 12px !important;
  }

  .hero-stats li {
    flex: 1 1 100%;
    text-align: center;
  }

  .hero-stats strong {
    font-size: 1.1rem !important;
  }

  .dashboard-mock {
    grid-template-columns: 1fr;
  }

  .dashboard-sidebar {
    display: none;
  }

  .dashboard-greeting {
    font-size: 14px;
  }

  .dashboard-kpis {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }

  .kpi-card {
    padding: 10px;
  }

  .kpi-card strong {
    font-size: 16px;
  }
}

/* Drawer backdrop: injected by JS on every portal page, only used on mobile.
   Hidden outside the mobile breakpoint so it never becomes a grid item. */
.portal-backdrop {
  display: none;
}

/* In-drawer close (✕) button: hidden on desktop, only shown inside an open
   mobile drawer (rules further down). */
.portal-page .portal-sidebar .side-close-btn {
  display: none;
  border: 0;
  background: transparent;
  color: #fff;
  font-size: 18px;
  line-height: 1;
  font-family: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* ===== MOBILE BREAKPOINT: 768px ===== */
@media (max-width: 768px) {
  .portal-mobile-toggle {
    display: flex !important;
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 1001;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: #171b35;
    color: #fff;
    border: none;
    font-size: 20px;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    align-items: center;
    justify-content: center;
  }
  
  .portal-page .portal-sidebar {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 260px;
    height: 100vh;
    z-index: 1000;
    transition: transform 0.3s ease;
    transform: translateX(-100%);
    padding: 20px 14px;
    overflow-y: auto;
  }
  
  /* ---------------------------------------------------------------------
     DRAWER OPEN STATE  (fix 2026-09-17)
     The rule above hides the sidebar with display:none; without the block
     below the class toggled by the ☰ (three lines) button had no visual
     effect, so the mobile menu looked broken.
     --------------------------------------------------------------------- */
  .portal-page .portal-sidebar.mobile-open {
    display: flex !important;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    transform: translateX(0);
    animation: none;
    box-shadow: 6px 0 28px rgba(9, 12, 30, 0.45);
  }

  /* Inside the drawer the nav must stack vertically — the ≤900px rules in
     styles.css turn .portal-nav into a horizontal scrolling strip. */
  .portal-page .portal-sidebar.mobile-open .portal-nav {
    display: grid;
    gap: 4px;
    overflow: visible;
  }

  .portal-page .portal-sidebar.mobile-open .portal-nav a {
    white-space: normal;
  }

  /* Keep the brand clear of the in-drawer ✕ button. */
  .portal-page .portal-sidebar.mobile-open .portal-brand {
    padding-right: 44px;
  }

  /* styles.css hides these at ≤900px; a drawer should show them again. */
  .portal-page .portal-sidebar.mobile-open .portal-kicker,
  .portal-page .portal-sidebar.mobile-open .portal-school-name {
    display: block;
  }

  .portal-page .portal-sidebar.mobile-open .portal-sidebar-bottom {
    display: flex;
  }

  .portal-page .portal-sidebar.mobile-open .portal-sidebar-bottom span {
    display: inline;
  }

  /* Dimmed backdrop behind the drawer — tap it to close the menu. */
  .portal-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 999;
    background: rgba(9, 12, 30, 0.5);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
  }

  .portal-backdrop.show {
    opacity: 1;
    visibility: visible;
  }

  /* Lock page scroll while the drawer is open. */
  body.portal-drawer-open {
    overflow: hidden;
  }

  /* Turn the topbar toggle into a floating ✕ that stays tappable while the
     drawer is open (a static element ignores z-index / left / right). */
  .portal-page .portal-sidebar.mobile-open ~ .portal-main .portal-collapse-btn,
  .portal-page .portal-sidebar.mobile-open ~ main .portal-collapse-btn {
    position: fixed !important;
    top: 12px !important;
    left: auto !important;
    right: 12px !important;
  }

  /* Close button inside the drawer — pinned to the drawer's top-right corner so
     it stays tappable even when a long menu is scrolled. */
  .portal-page .portal-sidebar.mobile-open .side-close-btn {
    display: flex !important;
    position: fixed;
    top: 12px;
    left: 212px;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    font-size: 18px;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    z-index: 1003;
    transition: background 0.2s;
  }

  .portal-page .portal-sidebar.mobile-open .side-close-btn:hover {
    background: rgba(255, 255, 255, 0.25);
  }

  /* The ✕ glyph itself lives in the markup (_portal_base.html). */

  /* Hide default close buttons when sidebar is open and show hamburger */
  .portal-page .portal-sidebar.mobile-open .side-close-btn.hide-when-open {
    display: none !important;
  }

  /* Keep toggle button above sidebar when open */
  .portal-page .portal-sidebar.mobile-open ~ .portal-main .portal-collapse-btn,
  .portal-page .portal-sidebar.mobile-open ~ .portal-topbar .portal-collapse-btn,
  .portal-page .portal-sidebar.mobile-open ~ main .portal-collapse-btn,
  body .portal-collapse-btn {
    z-index: 1002 !important;
  }

  /* Move toggle to right when sidebar is open for better accessibility */
  .portal-page .portal-sidebar.mobile-open ~ .portal-main .portal-collapse-btn,
  .portal-page .portal-sidebar.mobile-open ~ .portal-topbar .portal-collapse-btn,
  .portal-page .portal-sidebar.mobile-open ~ main .portal-collapse-btn {
    left: auto !important;
    right: 12px !important;
  }

  /* Keep toggle button above sidebar when open */
  .portal-page .portal-sidebar.mobile-open ~ .portal-main .portal-mobile-toggle,
  .portal-page .portal-sidebar.mobile-open ~ .portal-topbar .portal-mobile-toggle,
  .portal-page .portal-sidebar.mobile-open ~ main .portal-mobile-toggle,
  body .portal-mobile-toggle {
    z-index: 1002 !important;
  }

  /* Move toggle to right when sidebar is open for better accessibility */
  .portal-page .portal-sidebar.mobile-open ~ .portal-main .portal-mobile-toggle,
  .portal-page .portal-sidebar.mobile-open ~ .portal-topbar .portal-mobile-toggle,
  .portal-page .portal-sidebar.mobile-open ~ main .portal-mobile-toggle {
    left: auto !important;
    right: 12px !important;
  }

  /* Fix: prevent sidebar-bottom from pushing to bottom, creating blank space on mobile */
  .portal-page .portal-sidebar-bottom {
    margin-top: 16px !important;
    padding-top: 14px !important;
  }
  .portal-page .portal-sidebar-bottom > div {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    width: 100%;
  }
  .portal-page .portal-sidebar-bottom span {
    color: #697396;
    font-size: 10px;
  }
  
  .portal-page .portal-shell {
    display: block;
  }
  
  .portal-page .portal-main {
    padding: calc(16px + env(safe-area-inset-top, 0px)) 16px 30px;
  }
  
  .video-grid,
  .news-grid {
    grid-template-columns: 1fr;
  }
  
  .video-list .book-card {
    flex-direction: column;
  }
  
  .video-list .video-thumb-wrap img {
    width: 100%;
    height: 180px;
    flex: auto;
  }
  
  .tour-steps::before {
    left: 24px;
  }
  
  .tour-step {
    grid-template-columns: 40px 1fr;
    padding: 16px;
  }
  
  .tour-node {
    width: 38px;
    height: 38px;
  }
  
  .tour-num {
    font-size: 12px;
  }
  
  .mock-float-badge {
    left: 0;
  }
  
  .mock-float-pill {
    right: 0;
  }
}

/* ===== MOBILE BREAKPOINT: 420px ===== */
@media (max-width: 420px) {
  .site-header {
    min-height: 56px;
  }
  
  .site-header .container {
    min-height: 56px;
  }
  
  .site-header .logo a {
    height: 56px;
  }
  
  .site-logo {
    height: 32px;
  }
  
  .site-header .nav {
    width: min(88vw, 340px);
  }

  .portal-page .portal-sidebar {
    width: 240px;
  }
  
  .portal-page .portal-main {
    padding: calc(12px + env(safe-area-inset-top, 0px)) 12px 25px;
  }
  
  .portal-page .portal-card {
    padding: 12px;
  }
  
  .portal-page .portal-table {
    min-width: 480px;
    font-size: 12px;
  }
  
  .portal-page .portal-table td small {
    margin: 2px 0 0;
  }
  
  .portal-page .portal-topbar h1 {
    font-size: 18px;
  }
  
  .portal-page .portal-hero h2 {
    font-size: 18px;
  }
  
  .upload-card {
    padding: 0 !important;
  }
  
  .upload-intro {
    padding: 22px 18px;
  }
  
  .upload-form-panel {
    padding: 20px 13px;
  }
  
  .upload-hero {
    align-items: flex-start;
  }
  
  .upload-hero-logo {
    flex-basis: 46px;
    width: 46px;
    height: 46px;
  }
  
  .upload-section {
    padding: 13px;
  }
  
  .upload-source {
    grid-template-columns: 36px minmax(0, 1fr);
    padding: 11px;
    gap: 10px;
  }
  
  .upload-source-icon {
    width: 36px;
    height: 36px;
    font-size: 9px;
  }
  
  .partners-grid {
    grid-template-columns: 1fr;
  }
  
  .status-pill {
    font-size: 11px;
    padding: 4px 6px;
  }
  
  .portal-eyebrow {
    font-size: 9px;
  }
  
  .portal-table th,
  .portal-table td {
    padding: 10px 8px;
  }
  
  .landing-hero-actions {
    flex-direction: column;
  }
  
  .landing-hero-actions .cta,
  .landing-hero-actions .cta-secondary {
    width: 100%;
    text-align: center;
  }
  
  .landing-benefits {
    flex-direction: column;
  }
  
  .landing-benefits span {
    text-align: center;
  }
  
  .device-mobile {
    width: min(110px, 40vw);
  }
  
  .device-tablet {
    width: min(160px, 55vw);
  }
  
  .device-desktop {
    width: min(220px, 70vw);
  }
}

/* ===== MOBILE BREAKPOINT: 360px ===== */
@media (max-width: 360px) {
  .portal-page .portal-main {
    padding: calc(12px + env(safe-area-inset-top, 0px)) 10px 20px;
  }
  
  .portal-page .portal-card {
    padding: 10px;
  }
  
  .portal-page .portal-table {
    min-width: 420px;
    font-size: 11px;
  }
  
  .portal-page .portal-topbar h1 {
    font-size: 16px;
  }

  .portal-page .portal-topbar-actions {
    gap: 6px;
  }

  .portal-page .portal-topbar-actions .portal-home-btn {
    width: 38px;
    min-width: 38px;
    padding: 0;
  }

  .portal-page .portal-topbar-actions .portal-home-btn span {
    display: none;
  }
  
  .site-title {
    font-size: 14px;
  }
  
  .nav-toggle {
    font-size: 20px;
    padding: 8px 10px;
  }
}

/* ===== LANDSCAPE MODE FIXES ===== */
@media (max-height: 500px) and (orientation: landscape) {
  .nav a {
    padding: 8px 10px;
    font-size: 14px;
  }
  
  .portal-page .portal-sidebar {
    overflow-y: auto;
  }
  
  .site-hero {
    height: 180px;
  }
  
  .hero-slider {
    height: 200px;
  }

  /* Fix hero slider getting stuck on mobile */
  .hero-slider {
    position: relative;
    width: 100%;
    height: 200px;
    aspect-ratio: auto;
    overflow: hidden;
    touch-action: pan-y;
  }

  .hero-slider .hero-slides {
    position: relative;
    inset: auto;
    display: block;
    flex: none;
    transition: none;
    transform: none;
  }

  .hero-slider .hero-slide {
    position: relative;
    flex: none;
    height: auto;
    min-height: 200px;
    max-height: 250px;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    transform: none !important;
    transition: opacity 0.5s ease;
    opacity: 0;
    display: none;
  }

  .hero-slider .hero-slide.active {
    opacity: 1;
    display: block;
  }

  .hero-slider .hero-content {
    position: relative;
    z-index: 3;
    padding: 18px;
  }

  .hero-title {
    font-size: 22px;
    margin: 0 0 4px;
  }

  .hero-sub {
    font-size: 13px;
    margin: 0 0 8px;
  }

  .site-hero .cta {
    min-height: 36px;
    padding: 0 14px;
    font-size: 12px;
  }

  /* Hide slider controls on very small screens */
  .hero-controls {
    display: none;
  }

  /* Prevent slider from showing in half */
  .hero-slider::after {
    display: none;
  }

  .site-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.25) 100%);
  }
}

/* ===== TOUCH DEVICE OPTIMIZATIONS ===== */
@media (hover: none) and (pointer: coarse) {
  .nav a,
  .nav-left a,
  .nav-right a {
    min-height: 44px;
    padding: 12px 10px;
  }
  
  .primary-button,
  button,
  .cta,
  .cta-secondary {
    min-height: 44px;
  }
  
  .feature-card:hover,
  .product-showcase-item:hover,
  .ai-card:hover,
  .partner-card:hover {
    transform: none;
  }
  
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="tel"],
  input[type="url"],
  textarea,
  select {
    min-height: 44px;
    font-size: 16px;
  }
  
  .portal-table button {
    min-height: 36px;
    min-width: 36px;
    padding: 8px 12px;
  }
}

/* ===== IOS SAFARI FIXES ===== */
@supports (-webkit-touch-callout: none) {
  /* Drawer sizing is handled by the 100vh/100dvh mobile rule above.
     -webkit-fill-available here would override the dynamic viewport height. */
  .portal-page .portal-sidebar {
    height: -webkit-fill-available;
  }
  
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="tel"],
  input[type="url"],
  textarea,
  select {
    font-size: 16px;
  }
}

/* ===== OVERFLOW FIXES ===== */
html {
  overscroll-behavior-y: none;
  background: #100f2c;
}
html, body {
  overflow-x: hidden;
  overflow-x: clip;
  max-width: 100%;
}

/* Sticky-footer page shell: footer always last, no gap below it on any
   screen size (iPhone Chrome bounce, iPad, Android, laptop, desktop).
   NOTE: body background is NOT touched here — styles.css paints the light
   page gradient on body; only html (overscroll area) stays footer-dark. */
body {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
main.container {
  flex: 1 0 auto;
  width: 100%;
  max-width: 1100px;
  box-sizing: border-box;
}
.site-footer {
  margin-top: auto;
  flex-shrink: 0;
}

/* iOS rubber-band overscroll shows html background; keep it footer-dark
   so no white flash appears above header or below footer. */
@supports (-webkit-touch-callout: none) {
  html {
    background: #100f2c;
  }
}

/* Floating chat widget must respect iPhone home-indicator safe area. */
.aa-chat-fab {
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
}
@media (max-width: 480px) {
  .aa-chat-fab {
    bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  }
}

img {
  max-width: 100%;
  height: auto;
}

.portal-table td,
.portal-table th {
  word-break: break-word;
  overflow-wrap: break-word;
}

/* ===== ACCESSIBILITY ===== */
*:focus-visible {
  outline: 2px solid #6d28d9;
  outline-offset: 2px;
}

.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: #6d28d9;
  color: #fff;
  padding: 8px 16px;
  z-index: 10000;
  text-decoration: none;
  font-weight: 600;
}

.skip-link:focus {
  top: 0;
}