/* ============================================================================
   AskNetSuite — responsive.css
   Shared mobile/tablet adaptation layer. Drop-in stylesheet.

   Loaded AFTER each page's inline <style> so equal-specificity rules win on
   small screens. !important is used selectively to override existing rules
   that themselves use !important (mostly the .dash-* grid breakpoints).

   Breakpoints (mobile-first thinking, written as max-width to override):
     ≤480px   small phone
     ≤640px   phone
     ≤900px   tablet portrait / phone landscape
     ≤1100px  tablet landscape / small laptop — sidebars collapse here

   Design tokens (--ink, --brand, --border, etc.) are already defined per page
   and re-used via var(). This file adds no new tokens.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   1. Foundation — applies on every screen size
   --------------------------------------------------------------------------- */

/* Prevent horizontal page scroll caused by stray wide elements. */
html, body {
  max-width: 100vw;
  overflow-x: hidden;
}

/* Media should never overflow its container. */
img, video, iframe, svg, canvas {
  max-width: 100%;
  height: auto;
}

/* Long unbreakable strings (URLs, IDs, account names) should wrap. */
.page-hdr, .topnav, .topbar,
.env-bar, .content, .card, .panel,
td, th, .kv, .meta, .badge {
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* Hamburger button — hidden by default, shown <=1100px when a sidebar exists */
.resp-menu-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--border, #E2E8F0);
  border-radius: 8px;
  background: #fff;
  color: var(--ink, #0F172A);
  cursor: pointer;
  flex-shrink: 0;
  margin-right: 4px;
}
.resp-menu-btn:hover { background: var(--bg, #F8FAFC); }
.resp-menu-btn:focus-visible {
  outline: 2px solid var(--brand, #2563EB);
  outline-offset: 2px;
}
.resp-menu-btn svg {
  width: 20px;
  height: 20px;
  display: block;
}

/* Drawer backdrop — injected by responsive-nav.js when drawer opens */
.resp-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  z-index: 998;
  -webkit-tap-highlight-color: transparent;
  animation: respFadeIn .15s ease;
}
@keyframes respFadeIn { from { opacity: 0 } to { opacity: 1 } }

/* Table horizontal-scroll wrapper — injected by responsive-nav.js */
.resp-table-wrap {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  /* subtle right-edge shadow to hint at scroll on mobile */
  background:
    linear-gradient(to right, #fff 30%, rgba(255,255,255,0)) left,
    linear-gradient(to left,  #fff 30%, rgba(255,255,255,0)) right,
    radial-gradient(at left,  rgba(0,0,0,.08), transparent 70%) left,
    radial-gradient(at right, rgba(0,0,0,.08), transparent 70%) right;
  background-size: 24px 100%, 24px 100%, 12px 100%, 12px 100%;
  background-repeat: no-repeat;
  background-attachment: local, local, scroll, scroll;
}
.resp-table-wrap > table {
  margin: 0;
}

/* ---------------------------------------------------------------------------
   2. iOS form-zoom prevention — needs font-size ≥16px on focus
   --------------------------------------------------------------------------- */
@media (max-width: 900px) {
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="search"],
  input[type="number"],
  input[type="tel"],
  input[type="url"],
  input[type="date"],
  input[type="datetime-local"],
  input[type="month"],
  input[type="time"],
  input[type="week"],
  select,
  textarea {
    font-size: 16px !important;
  }
}

/* ---------------------------------------------------------------------------
   3. ≤1100px — sidebar collapses, drawer becomes available
   --------------------------------------------------------------------------- */
@media (max-width: 1100px) {

  /* Show hamburger when JS has attached one. The JS only attaches it if a
     sidebar is present, so this rule is safe to apply globally. */
  .resp-menu-btn { display: inline-flex; }

  /* Shell layouts (index.html, analytics.html) — single column */
  .shell {
    grid-template-columns: 1fr !important;
  }

  /* Existing rules hide .sb at this breakpoint. On index.html and
     analytics.html the rule is `#app .sb { display: none !important }`
     (specificity 1,1,0) which beats a plain .sb.resp-drawer-open (0,2,0).
     We list both selectors so we win on every page. */
  .sb.resp-drawer-open,
  #app .sb.resp-drawer-open {
    display: block !important;
    position: fixed !important;
    top: 0;
    left: 0;
    width: min(300px, 84vw);
    height: 100vh;
    max-height: 100vh;
    z-index: 999;
    background: #fff;
    color: var(--ink, #0F172A);
    box-shadow: 4px 0 32px rgba(15, 23, 42, 0.18);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 16px !important;
    transform: translateX(0);
    animation: respSlideIn .2s ease;
  }
  @keyframes respSlideIn {
    from { transform: translateX(-100%) }
    to   { transform: translateX(0) }
  }

  /* Sidebar items should be roomy enough to tap accurately */
  .sb.resp-drawer-open a,
  .sb.resp-drawer-open button,
  .sb.resp-drawer-open .nav-item {
    min-height: 44px;
    display: flex;
    align-items: center;
  }
}

/* ---------------------------------------------------------------------------
   4. ≤900px — tablet portrait. Grids collapse to 2 cols. Content padding shrinks.
   --------------------------------------------------------------------------- */
@media (max-width: 900px) {

  /* Generic content area shrinks horizontally */
  .content,
  .container,
  .page-body,
  .ans-content {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* Common multi-col grids → 2 cols at this size */
  .kpi-grid,
  .admin-stat-grid,
  .ql-grid,
  .dashboard-tile-grid,
  .dash-kpi-grid,
  .ai-action-grid,
  .field-grid,
  .asx-feature-grid,
  .home-bottom-grid,
  .op-cards,
  .support-type-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  /* Charts/wide-data grids → single column (better than squashed 2-col) */
  .dash-grid,
  .dash-report-grid,
  .ai-home-grid,
  .ai-home-hero,
  .ai-work-grid,
  .ai-hero-grid,
  .asx-flow,
  .asx-footer-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* Headers — looser layout, allow wrap.
     NOTE: .topbar is intentionally NOT included here. index.html has its own
     extensive mobile rules for .topbar (with .mobile-menu-btn already wired
     up). Adding flex-wrap to it makes the env dropdown collide with content. */
  .page-hdr,
  .topnav {
    flex-wrap: wrap;
    gap: 10px !important;
  }

  /* env-bar — select takes available width */
  .env-bar {
    flex-wrap: wrap;
    gap: 10px !important;
  }
  .env-bar select,
  .env-sel,
  select.env-sel {
    min-width: 0 !important;
    width: 100%;
    max-width: 100% !important;
    flex: 1 1 100%;
  }
}

/* ---------------------------------------------------------------------------
   5. ≤640px — phones. Everything collapses to 1 column. Compact spacing.
   --------------------------------------------------------------------------- */
@media (max-width: 640px) {

  /* Content area — tighter padding */
  .content,
  .container,
  .page-body,
  .ans-content {
    padding: 14px !important;
  }

  /* Every multi-col grid → single column */
  .kpi-grid,
  .admin-stat-grid,
  .ql-grid,
  .dash-grid,
  .dashboard-tile-grid,
  .dash-kpi-grid,
  .dash-report-grid,
  .ai-action-grid,
  .ai-home-grid,
  .ai-home-hero,
  .ai-work-grid,
  .ai-hero-grid,
  .field-grid,
  .support-type-grid,
  .asx-feature-grid,
  .asx-flow,
  .asx-footer-grid,
  .home-bottom-grid,
  .op-cards {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* Top headers — phone-sized.
     .topbar excluded — index.html already has `.topbar { padding: 8px 12px }`
     at <=640px and we don't want to fight it. */
  .page-hdr,
  .topnav {
    padding: 10px 14px !important;
    gap: 8px !important;
    min-height: 56px;
  }

  /* Brand mark / logo — smaller on phones (excluding .topbar — already handled) */
  .page-hdr .brand img,
  .topnav .brand img,
  .ans-brand-mark,
  .topnav__brand img {
    height: 22px !important;
    width: auto;
  }
  .page-hdr .brand span,
  .topnav .brand span,
  .ans-brand-word {
    font-size: 13px !important;
  }

  /* Middle title in header — wrap to its own row, smaller */
  .page-hdr-mid,
  .topnav__page-title,
  .page-title {
    flex-basis: 100%;
    text-align: left !important;
    font-size: 14px !important;
    order: 99; /* push below the brand + menu */
    margin: 2px 0 0 !important;
  }

  /* Hide email text — keep only avatar/initial if present */
  .page-hdr-right #userEmail,
  .topnav__right #userEmail,
  #userEmail,
  .user-email,
  .user-name-text {
    display: none !important;
  }

  /* Right-side header actions — compact */
  .page-hdr-right,
  .topnav__right,
  .topbar-right {
    gap: 6px !important;
    margin-left: auto;
  }

  /* env-bar — compact, full-width select */
  .env-bar {
    padding: 8px 14px !important;
    font-size: 12px !important;
  }

  /* Tighter typography on phones */
  h1 { font-size: 22px !important; line-height: 1.25 !important; }
  h2 { font-size: 18px !important; line-height: 1.3 !important; }
  h3 { font-size: 16px !important; line-height: 1.35 !important; }

  /* Their oversized hero/marketing headlines */
  .asx-headline { font-size: 32px !important; line-height: 1.1 !important; letter-spacing: -1.2px !important; }
  .ai-title,
  .ai-home-title { font-size: 24px !important; }
  .dash-title { font-size: 20px !important; }
  .sec-title { font-size: 18px !important; }
  .home-h { font-size: 22px !important; }

  /* Sidebar opens FULL width on tiny phones */
  .sb.resp-drawer-open,
  #app .sb.resp-drawer-open {
    width: min(320px, 88vw) !important;
  }

  /* Modals — fullscreen on phones */
  .modal,
  .dash-modal,
  [class*="-modal"]:not(.resp-drawer-backdrop),
  [class$="modal-backdrop"] {
    padding: 0 !important;
  }
  .modal-card,
  .modal-content,
  .dash-modal-card,
  [class*="modal-body"],
  [class*="dialog-card"] {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100vh !important;
    max-height: 100vh !important;
    border-radius: 0 !important;
    margin: 0 !important;
  }

  /* Forms / inputs full width by default */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="search"],
  input[type="tel"],
  input[type="url"],
  input[type="number"],
  input[type="date"],
  select:not(.env-sel-tight),
  textarea {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  /* Tables — at this size, force horizontal scroll via wrapper */
  .resp-table-wrap {
    margin-left: -14px;
    margin-right: -14px;
    padding-left: 14px;
    padding-right: 14px;
  }

  /* Buttons — touch targets */
  button,
  .btn,
  [role="button"],
  input[type="submit"],
  input[type="button"] {
    min-height: 40px;
  }
  /* Don't enforce on tiny icon buttons or chips that opted-in to compact */
  .btn-xs,
  .btn-icon,
  .chip,
  .resp-menu-btn,
  .icon-btn {
    min-height: auto;
  }

  /* Toasts / floating panels (AI panel, etc.) — full width */
  .aip,
  .aip-panel {
    width: calc(100vw - 16px) !important;
    right: 8px !important;
    bottom: 8px !important;
    left: 8px !important;
    max-height: 70vh !important;
  }

  /* Code blocks / pre — wrap or scroll */
  pre, code {
    word-break: break-word;
    overflow-x: auto;
  }
  pre {
    padding: 10px !important;
    font-size: 12px !important;
  }
}

/* ---------------------------------------------------------------------------
   6. ≤480px — small phones (iPhone SE etc). Even tighter.
   --------------------------------------------------------------------------- */
@media (max-width: 480px) {
  .content,
  .container,
  .page-body,
  .ans-content {
    padding: 12px !important;
  }

  .page-hdr,
  .topnav {
    padding: 8px 12px !important;
  }

  .asx-headline { font-size: 28px !important; }
  .ai-title, .ai-home-title { font-size: 22px !important; }

  /* env-bar — stack the label above the select */
  .env-bar label {
    flex-basis: 100%;
  }
}

/* ---------------------------------------------------------------------------
   7. Login overlay (.auth-overlay / .auth-box, currently only in index.html)
   --------------------------------------------------------------------------- */

/* CRITICAL FIX — applies at every screen size, not just mobile.
   Without this, when the login form is taller than the viewport (any phone
   in landscape, any small phone in portrait with keyboard up, or any of the
   multi-step flows in a short window), the password field + Sign In button
   are off-screen and unreachable. Adding scroll on the overlay itself means
   the box can always be reached. */
.auth-overlay {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 640px) {
  /* index.html already has partial mobile rules around line 4435. We add
     what's missing and tighten the rest. */

  .auth-overlay {
    padding: 16px !important;
    /* Account for iOS notch / status bar */
    padding-top: max(16px, env(safe-area-inset-top, 16px)) !important;
    padding-bottom: max(16px, env(safe-area-inset-bottom, 16px)) !important;
    align-items: flex-start !important;
  }

  .auth-box {
    width: 100% !important;
    max-width: 100% !important;
    padding: 24px 18px !important;
    border-radius: 16px !important;
    margin: 0 auto !important;
  }

  /* Logo + brand mark — tighter on phones */
  .auth-logo-final { margin-bottom: 18px !important; }
  .auth-logo-final .ans-brand-mark { height: 36px !important; }
  .auth-logo-final .ans-brand-word { font-size: 22px !important; }

  /* Title + subtitle */
  .auth-title {
    font-size: 19px !important;
    line-height: 1.25 !important;
    margin-bottom: 4px !important;
  }
  .auth-sub {
    font-size: 12.5px !important;
    line-height: 1.45 !important;
    margin-bottom: 18px !important;
  }

  /* SSO buttons (Google / Microsoft) — comfortable touch target */
  .auth-sso-btn {
    min-height: 46px !important;
    padding: 12px 14px !important;
    font-size: 13.5px !important;
    gap: 12px !important;
  }

  /* Divider "or with email" */
  .auth-divider {
    margin: 16px 0 12px !important;
    font-size: 10.5px !important;
  }

  /* Form inputs — generic 16px-on-mobile rule above already fires for these,
     but .fi has its own padding/border that we tighten here. */
  .auth-box .fi {
    padding: 12px 13px !important;
    font-size: 16px !important;  /* iOS auto-zoom prevention, explicit */
  }
  .auth-box .fl {
    font-size: 11px !important;
    margin-bottom: 6px !important;
  }
  .auth-box .fg { margin-bottom: 12px !important; }

  /* Primary Sign In / Verify button — 46px touch target */
  .auth-box .btn-primary.btn-block,
  .auth-box #lbtn,
  .auth-box #l2faBtn,
  .auth-box #rpBtn {
    min-height: 46px !important;
    padding: 13px !important;
    font-size: 14px !important;
  }

  /* Secondary "Email me a sign-in link" / "Use a different method" buttons */
  .auth-box .btn-ghost.btn-block {
    min-height: 42px !important;
  }

  /* The 6-digit 2FA code input — keep big but allow it to fit narrow phones */
  #l2faCode {
    font-size: 22px !important;
    letter-spacing: .3em !important;  /* down from .4em */
    padding: 14px 10px !important;
  }

  /* Forgot password link + admin contact line — tight */
  #forgotPwdLink { font-size: 12.5px !important; }

  /* The marketing/legal disclaimer at the bottom eats vertical space.
     Smaller font + tighter line-height so it doesn't push Sign In off-screen. */
  .auth-tm-disclaimer {
    font-size: 10.5px !important;
    line-height: 1.5 !important;
    margin-top: 14px !important;
    padding-top: 12px !important;
  }
}

@media (max-width: 380px) {
  /* iPhone SE / very small phones — pull in a touch more */
  .auth-box {
    padding: 20px 14px !important;
  }
  .auth-title { font-size: 18px !important; }
  .auth-logo-final .ans-brand-word { font-size: 20px !important; }
  .auth-logo-final .ans-brand-mark { height: 32px !important; }
  .auth-sso-btn {
    font-size: 13px !important;
    padding: 11px 12px !important;
  }
  /* 2FA code field — 6 digits at .3em letter-spacing still fit at 380px;
     fall back further only if narrower */
  #l2faCode {
    font-size: 20px !important;
    letter-spacing: .25em !important;
  }
}

/* Landscape phone — viewport is short. Squeeze vertical spacing. */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 480px) {
  .auth-overlay {
    align-items: flex-start !important;
    padding-top: 12px !important;
  }
  .auth-logo-final {
    margin-bottom: 10px !important;
  }
  .auth-logo-final .ans-brand-mark { height: 28px !important; }
  .auth-title { font-size: 17px !important; margin-bottom: 2px !important; }
  .auth-sub { margin-bottom: 12px !important; }
  .auth-divider { margin: 10px 0 !important; }
  .auth-box .fg { margin-bottom: 10px !important; }
  .auth-tm-disclaimer {
    /* In landscape phones, the disclaimer is barely useful — fold it down */
    margin-top: 10px !important;
    padding-top: 8px !important;
    font-size: 10px !important;
  }
}

/* ---------------------------------------------------------------------------
   10. Marketing landing page (asknetsuite.com)
        ────────────────────────────────────────────────────────────────────
        The marketing sections (.nl-section, .asx-*) often use INLINE styles
        for grids — `style="display:grid;grid-template-columns:repeat(3,1fr)"`.
        Class-based CSS can't reach those without attribute selectors. These
        rules force inline-styled multi-column grids back to single-column on
        phones (fixes the "3 narrow columns of 3 letters each" issue).
   --------------------------------------------------------------------------- */

@media (max-width: 900px) {
  /* Any element using an inline 3-column grid */
  div[style*="repeat(3,1fr)"],
  div[style*="repeat(3, 1fr)"],
  div[style*="repeat(3,minmax"],
  div[style*="repeat(3, minmax"] {
    grid-template-columns: 1fr 1fr !important;
  }
  /* 4-col → 2-col on tablets */
  div[style*="repeat(4,1fr)"],
  div[style*="repeat(4, 1fr)"],
  div[style*="repeat(4,minmax"],
  div[style*="repeat(4, minmax"] {
    grid-template-columns: 1fr 1fr !important;
  }
}

@media (max-width: 640px) {
  /* On phones, drop ALL inline multi-column grids to 1 column */
  div[style*="repeat(2,1fr)"],
  div[style*="repeat(2, 1fr)"],
  div[style*="repeat(3,1fr)"],
  div[style*="repeat(3, 1fr)"],
  div[style*="repeat(4,1fr)"],
  div[style*="repeat(4, 1fr)"],
  div[style*="repeat(2,minmax"],
  div[style*="repeat(2, minmax"],
  div[style*="repeat(3,minmax"],
  div[style*="repeat(3, minmax"],
  div[style*="repeat(4,minmax"],
  div[style*="repeat(4, minmax"] {
    grid-template-columns: 1fr !important;
  }

  /* The "REAL THINGS TEAMS DO WITH US" card row uses inline flex with fixed
     widths — let it scroll horizontally instead of overflowing. */
  div[style*="display:flex"][style*="gap"] {
    flex-wrap: wrap;
  }

  /* asx-* shared classes (some are already handled by section 5, but the
     landing-specific ones get a second pass with stronger selectors). */
  .nl-section,
  section.nl-section,
  section[class*="asx-"] {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  /* The fixed floating widgets on the marketing page (back-to-top arrow,
     chat-bubble launcher, lightning-bolt operator launcher) are sized for
     desktop. Shrink them and tuck into the corner so they don't cover
     readable content. */
  .asx-backtop,
  .asx-operator-launcher,
  .asx-operator-launcher-btn,
  [class*="chat-launcher"],
  [class*="-fab"] {
    width: 44px !important;
    height: 44px !important;
    font-size: 18px !important;
    bottom: 12px !important;
    right: 12px !important;
  }
  /* If multiple floating buttons exist, stack them vertically with a small gap.
     This relies on each having position:fixed and bottom set. We give the
     "chat" / launcher the lowest spot, and stack others above. */
  .asx-operator-launcher,
  .asx-operator-launcher-btn {
    bottom: 64px !important;  /* sits above the chat fab */
  }
  .asx-backtop {
    bottom: 116px !important; /* sits above the operator launcher */
  }
}

/* ---------------------------------------------------------------------------
   11. Print — preserve readable layout if anyone prints
   --------------------------------------------------------------------------- */
@media print {
  .sb,
  .topnav,
  .topbar,
  .page-hdr,
  .env-bar,
  .resp-menu-btn,
  .resp-drawer-backdrop,
  .aip,
  .aip-panel {
    display: none !important;
  }
  .content,
  .container { padding: 0 !important; }
  body { background: #fff !important; }
}

/* ---------------------------------------------------------------------------
   12. prefers-reduced-motion — kill drawer animation for sensitive users
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .sb.resp-drawer-open,
  .resp-drawer-backdrop {
    animation: none !important;
    transition: none !important;
  }
}