/**
 * Tools mobile-friendly styles
 * Responsive overrides for AuthAction developer tools
 */

@media (max-width: 767.98px) {
  /* Hero sections - tighter spacing, smaller headings */
  .pkce-hero .container,
  .jwt-hero .container,
  .base64-hero .container,
  .oauth-hero .container,
  section[class$="-hero"] .container {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
  }

  .pkce-hero h1,
  .jwt-hero h1,
  .base64-hero h1,
  .oauth-hero h1,
  section[class$="-hero"] h1 {
    font-size: 1.75rem !important;
    line-height: 1.2 !important;
    margin-bottom: 0.75rem !important;
  }

  .pkce-hero .lead,
  .jwt-hero .lead,
  .base64-hero .lead,
  .oauth-hero .lead,
  section[class$="-hero"] .lead {
    font-size: 0.95rem !important;
    margin-bottom: 0 !important;
  }

  /* Tool card - reduce padding on mobile */
  .pkce-tool .card-body,
  .jwt-decoder .card-body,
  .base64-tool .card-body,
  .oauth-tool .card-body,
  section[class$="-tool"] .card-body {
    padding: 1rem !important;
  }

  /* Button groups - stack or wrap, full width primary actions */
  .d-flex.justify-content-between.align-items-center {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.5rem;
  }

  .d-flex.justify-content-between.align-items-center .btn {
    width: 100%;
    margin: 0;
  }

  /* Primary action buttons - touch friendly min height */
  .btn-primary,
  .btn-info,
  .btn-success {
    min-height: 44px;
    padding: 0.625rem 1rem;
  }

  /* Encode/Decode button rows - stack on mobile */
  .col-md-8.d-flex.align-items-end.gap-2 {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .col-md-8.d-flex.align-items-end.gap-2 .btn {
    flex: 1 1 auto !important;
    min-height: 44px;
  }

  /* Output areas - ensure readable font size, prevent overflow */
  .pkce-output,
  .jwt-output,
  .encoding-output,
  .param-output,
  .auth-url-display,
  .font-monospace {
    font-size: 0.8rem !important;
    word-break: break-all;
    overflow-wrap: break-word;
    max-width: 100%;
  }

  /* JWKS / verify section - stack inputs and buttons */
  .d-flex.align-items-center.gap-2 {
    flex-wrap: wrap;
  }

  #verifyOptions .row.g-2 {
    flex-direction: column;
  }

  #verifyOptions .col-md-6 {
    max-width: 100%;
  }

  #verifyButtonRow .d-flex.gap-2 {
    flex-direction: column;
  }

  #verifyButtonRow .btn {
    width: 100%;
    min-height: 44px;
  }

  /* Nav pills (OAuth2 tabs) - horizontal scroll if needed */
  .nav.nav-pills#oauthTabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    padding-bottom: 0.25rem;
  }

  .nav.nav-pills .nav-link {
    white-space: nowrap;
    flex-shrink: 0;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
  }

  /* Alert with icon - stack on very small screens */
  .alert.d-flex.align-items-center {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 0.5rem;
  }

  .alert.d-flex.align-items-center i {
    margin-right: 0 !important;
  }

  /* CTA section - full width buttons */
  .cta .d-flex.flex-wrap.justify-content-center.gap-3 {
    flex-direction: column;
    align-items: stretch;
  }

  .cta .btn {
    width: 100%;
    min-height: 48px;
  }

  /* Info cards row - ensure proper stacking */
  .row.g-4 .col-md-4,
  .row.g-4 .col-md-3 {
    margin-bottom: 0.5rem;
  }

  /* Token details / JWT output - stack cards */
  #jwtResults .row.g-3 .col-md-6 {
    margin-bottom: 0.75rem;
  }

  /* d-flex align-items-center mb-3 - allow wrap for header + badge + button */
  .d-flex.align-items-center.mb-3 {
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .d-flex.align-items-center.mb-3 .btn {
    margin-left: 0;
  }

  /* Copy buttons - ensure touch target */
  .copy-btn,
  .btn.btn-sm.btn-outline-secondary {
    min-width: 44px;
    min-height: 44px;
    padding: 0.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Textareas - comfortable size on mobile */
  textarea.form-control {
    min-height: 100px;
    font-size: 0.9rem;
  }

  /* Section padding - reduce on mobile */
  section.py-5.pb-5 {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
  }

  section.bg-body-tertiary .container.py-5 {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
  }

  .display-6 {
    font-size: 1.5rem !important;
  }

  /* Passkey debugger: Create Credential & Authenticate buttons - stack on mobile */
  .passkey-debugger .debug-section .d-flex.align-items-center.mb-3 {
    flex-wrap: wrap !important;
    gap: 0.5rem;
  }

  .passkey-debugger .debug-section .d-flex.align-items-center .btn-group {
    flex: 1 1 100% !important;
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .passkey-debugger .btn-group {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    flex-wrap: nowrap !important;
    gap: 0.75rem;
  }

  .passkey-debugger .btn-group .btn {
    width: 100% !important;
    min-width: 0 !important;
    flex: 0 0 auto !important;
    min-height: 44px;
    border-radius: var(--bs-border-radius, 0.375rem) !important;
  }
}

/* Extra small devices */
@media (max-width: 575.98px) {
  .container {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .card-body.p-4.p-md-5,
  .card-body.p-4 {
    padding: 0.75rem !important;
  }
}