/* OctoRank AI mobile compatibility layer
   Layout-only patch: no brand color changes. */

:root {
  --octo-mobile-safe-gap: 14px;
  --octo-mobile-border: #dbe4f0;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overflow-x: hidden;
}

body {
  max-width: 100%;
  overflow-x: hidden;
}

img,
video,
canvas,
svg,
iframe {
  max-width: 100%;
  height: auto;
}

input,
select,
textarea,
button {
  max-width: 100%;
  font-size: 16px;
}

textarea {
  min-height: 96px;
}

.octo-mobile-table-wrap {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.octo-mobile-table-wrap > table {
  min-width: 680px;
}

@media (max-width: 980px) {
  body {
    min-width: 0 !important;
  }

  .container,
  .page,
  .page-wrap,
  .page-wrapper,
  .wrapper,
  .content,
  .main,
  .main-content,
  .dashboard,
  .dashboard-container,
  .dashboard-content,
  .octo-page,
  .octo-wrap,
  .pricing-page,
  .pricing-wrap,
  .home-page,
  .hero,
  .section,
  main {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .container,
  .page,
  .page-wrap,
  .page-wrapper,
  .dashboard,
  .dashboard-container,
  .dashboard-content,
  .pricing-page,
  .pricing-wrap,
  .home-page,
  main {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  .row,
  .grid,
  .cards,
  .card-grid,
  .pricing-grid,
  .plans-grid,
  .dashboard-grid,
  .stats-grid,
  .summary-grid,
  .products-grid,
  .marketplace-grid,
  .feature-grid,
  .hero-grid,
  .split,
  .two-col,
  .three-col,
  .form-grid,
  .tools-grid,
  .video-grid,
  .media-grid,
  .workspace-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: var(--octo-mobile-safe-gap) !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .card,
  .panel,
  .box,
  .tile,
  .plan-card,
  .pricing-card,
  .dashboard-card,
  .product-card,
  .market-card,
  .feature-card,
  .octo-card,
  .form-card,
  .video-card,
  .tool-card,
  section,
  article {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .hero,
  .hero-section,
  .landing-hero,
  .home-hero {
    padding-top: 28px !important;
    padding-bottom: 28px !important;
  }

  h1 {
    font-size: clamp(32px, 9vw, 48px) !important;
    line-height: 1.05 !important;
    overflow-wrap: anywhere;
  }

  h2 {
    font-size: clamp(24px, 7vw, 36px) !important;
    line-height: 1.12 !important;
    overflow-wrap: anywhere;
  }

  h3 {
    font-size: clamp(19px, 5.5vw, 26px) !important;
    line-height: 1.18 !important;
    overflow-wrap: anywhere;
  }

  p,
  li,
  label,
  .muted,
  .subtitle,
  .description {
    overflow-wrap: anywhere;
  }

  .topbar,
  .navbar,
  .nav,
  header,
  .site-header,
  .octo-nav,
  .dashboard-nav,
  .actions,
  .button-row,
  .cta-row,
  .form-actions,
  .toolbar,
  .filters,
  .tabs,
  .tab-row,
  .quick-actions {
    max-width: 100% !important;
    min-width: 0 !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    box-sizing: border-box !important;
  }

  .topbar a,
  .navbar a,
  .nav a,
  .octo-nav a,
  .dashboard-nav a,
  .tabs a,
  .tab-row a,
  .topbar button,
  .navbar button,
  .nav button,
  .octo-nav button,
  .dashboard-nav button,
  .tabs button,
  .tab-row button {
    white-space: nowrap;
  }

  .nav,
  .navbar,
  .octo-nav,
  .dashboard-nav,
  .tabs,
  .tab-row {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }

  .dropdown,
  .menu,
  .popover,
  .floating-menu,
  .mobile-menu,
  .login-menu,
  .profile-menu {
    max-width: calc(100vw - 28px) !important;
    box-sizing: border-box !important;
  }

  form,
  fieldset,
  .form,
  .product-form,
  .checkout-form,
  .generator-form,
  .video-form {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="url"],
  input[type="number"],
  input[type="search"],
  input[type="tel"],
  select,
  textarea {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  button,
  .btn,
  .button,
  .cta,
  .nav-btn,
  .octo-btn,
  .primary-btn,
  .secondary-btn,
  input[type="submit"] {
    min-height: 44px;
    touch-action: manipulation;
  }

  table {
    max-width: 100%;
    border-collapse: collapse;
  }

  pre,
  code {
    max-width: 100%;
    overflow-x: auto;
    white-space: pre-wrap;
  }

  .sticky,
  .fixed,
  .sidebar,
  aside {
    max-width: 100vw !important;
  }
}

@media (max-width: 700px) {
  .container,
  .page,
  .page-wrap,
  .page-wrapper,
  .dashboard,
  .dashboard-container,
  .dashboard-content,
  .pricing-page,
  .pricing-wrap,
  .home-page,
  main {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .card,
  .panel,
  .box,
  .tile,
  .plan-card,
  .pricing-card,
  .dashboard-card,
  .product-card,
  .market-card,
  .feature-card,
  .octo-card,
  .form-card,
  .video-card,
  .tool-card,
  section,
  article {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  .hero,
  .hero-section,
  .landing-hero,
  .home-hero {
    text-align: left !important;
  }

  .actions,
  .button-row,
  .cta-row,
  .form-actions,
  .toolbar,
  .quick-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
  }

  .actions > *,
  .button-row > *,
  .cta-row > *,
  .form-actions > *,
  .toolbar > *,
  .quick-actions > *,
  .btn,
  .button,
  .cta,
  .octo-btn,
  .primary-btn,
  .secondary-btn,
  input[type="submit"] {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    justify-content: center !important;
    text-align: center !important;
  }

  .dashboard-card,
  .stats-card,
  .summary-card,
  .metric-card {
    min-height: 0 !important;
  }

  .product-row,
  .page-row,
  .list-row,
  .order-row,
  .dashboard-list-row {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    align-items: start !important;
  }

  .product-row input,
  .page-row input,
  .list-row input,
  .order-row input {
    width: 100% !important;
  }

  .modal,
  .dialog,
  .drawer,
  .popup {
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
    max-height: calc(100vh - 24px) !important;
    overflow: auto !important;
  }

  .hide-mobile,
  .desktop-only {
    display: none !important;
  }

  .show-mobile,
  .mobile-only {
    display: block !important;
  }
}

@media (max-width: 480px) {
  h1 {
    font-size: clamp(29px, 10vw, 40px) !important;
  }

  h2 {
    font-size: clamp(23px, 8vw, 32px) !important;
  }

  .container,
  .page,
  .page-wrap,
  .page-wrapper,
  .dashboard,
  .dashboard-container,
  .dashboard-content,
  .pricing-page,
  .pricing-wrap,
  .home-page,
  main {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .card,
  .panel,
  .box,
  .tile,
  .plan-card,
  .pricing-card,
  .dashboard-card,
  .product-card,
  .market-card,
  .feature-card,
  .octo-card,
  .form-card,
  .video-card,
  .tool-card,
  section,
  article {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .topbar,
  .navbar,
  .nav,
  header,
  .site-header,
  .octo-nav,
  .dashboard-nav {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
}