/* Comprehensive Responsive Styles */

/* Small screens - phones */
@media (max-width: 576px) {
  /* Container adjustments */
  .container:not(.container--flush) {
    padding: var(--size-4);
  }

  .container.container--flush:not(.container--full) {
    padding-top: var(--size-4);
    padding-bottom: var(--size-4);
  }

  /* Tables - force horizontal scroll */
  .urls-table,
  .admin-plan-table {
    font-size: 0.85rem;
  }

  .urls-table th,
  .urls-table td,
  .admin-plan-table th,
  .admin-plan-table td {
    padding: 0.5rem;
  }

  /* Ensure table containers allow scroll */
  .table-container,
  .urls-section,
  .admin-plan-list-section > div {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Account card */
  .account-card {
    padding: 1.5rem 1rem;
    margin: 1rem auto;
  }

  .account-details {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }

  .account-details dt {
    font-weight: 600;
    margin-top: 0.8rem;
  }

  .account-details dd {
    margin-bottom: 0.5rem;
  }

  /* Buttons - full width on mobile */
  .btn.primary,
  .btn.secondary,
  .nav-button {
    width: 100%;
    justify-content: center;
  }

  /* Form actions */
  .form-actions {
    flex-direction: column;
    gap: var(--size-2);
  }

  .form-actions .btn {
    width: 100%;
  }

  /* Plan cards - stack on mobile */
  .plans-grid {
    flex-direction: column;
    align-items: center;
  }

  .plan-card {
    max-width: 100%;
    width: 100%;
  }

  /* Admin sections */
  .admin-nav-bar {
    flex-wrap: wrap;
    gap: var(--size-2);
  }

  .admin-nav-link {
    font-size: 0.9rem;
    padding: var(--size-2);
  }

  /* Modal adjustments */
  .modal-container {
    width: 95vw;
    max-width: 95vw;
    margin: 1rem;
  }

  .modal-content {
    padding: 1rem;
  }

  /* Typography */
  .plans-title {
    font-size: 1.75rem;
  }

  .plans-subtitle {
    font-size: 1rem;
  }
}

/* Medium screens - tablets */
@media (min-width: 577px) and (max-width: 768px) {
  .container:not(.container--flush) {
    padding: var(--size-5);
  }

  .container.container--flush:not(.container--full) {
    padding-top: var(--size-5);
    padding-bottom: var(--size-5);
  }

  /* Plans grid - 2 columns on tablets */
  .plans-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
  }

  .plan-card {
    max-width: 100%;
  }

  /* Tables */
  .urls-table,
  .admin-plan-table {
    font-size: 0.9rem;
  }

  /* Account details */
  .account-card {
    padding: 2rem 1.5rem;
  }
}

/* Large screens - desktops */
@media (min-width: 769px) and (max-width: 1024px) {
  /* Adjust container max-width for better use of space */
  .container:not(.container--full) {
    max-width: 90%;
  }

  .container.container--wide:not(.container--full) {
    max-width: 95%;
  }
}

/* Extra responsive table wrapper */
.table-wrapper,
.table-container {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 1rem;
}

/* Ensure nested table content doesn't break layout */
.urls-table,
.admin-plan-table {
  min-width: 600px; /* Minimum width before horizontal scroll kicks in */
}

/* Button groups responsive */
.btn-group {
  display: flex;
  gap: var(--size-2);
  flex-wrap: wrap;
}

@media (max-width: 576px) {
  .btn-group {
    flex-direction: column;
  }

  .btn-group .btn {
    width: 100%;
  }
}

/* Form row responsive override for very small screens */
@media (max-width: 480px) {
  .form-row {
    grid-template-columns: 1fr;
  }

  .compact-form .form-row {
    grid-template-columns: 1fr;
  }
}

/* Admin content responsive */
@media (max-width: 768px) {
  #admin-content {
    padding: var(--size-3);
  }

  .admin-plan-list-section,
  .admin-userplan-list-section {
    padding: var(--size-3);
  }
}

/* Feature cards */
@media (max-width: 768px) {
  .features {
    flex-direction: column;
  }

  .feature-card {
    min-width: 100%;
    max-width: 100%;
  }
}

/* Showcase content */
@media (max-width: 768px) {
  .showcase-content {
    padding: var(--size-4);
  }

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

/* Footer responsive */
@media (max-width: 768px) {
  .footer-content {
    padding: var(--size-4);
  }

  .footer-section {
    min-width: 100%;
    margin-bottom: var(--size-4);
  }
}

/* Auth forms */
@media (max-width: 576px) {
  .auth-form {
    padding: 1.5rem 1rem;
  }

  .auth-form-card {
    padding: 1.5rem 1rem;
    margin: 1rem;
  }
}

/* Prevent horizontal overflow on all screens */
* {
  max-width: 100%;
}

html,
body {
  overflow-x: hidden;
}

/* Allow specific elements to overflow when needed (tables) */
.table-container,
.table-wrapper,
.urls-section {
  max-width: 100%;
}