/* Responsive CSS for Klick-Game */

/* Make all images responsive */
img {
  max-width: 100%;
  height: auto;
}

/* Make tables responsive */
table {
  width: 100% !important;
  max-width: 100%;
  margin-bottom: 1rem;
  overflow-x: auto;
  display: block;
}

@media (min-width: 768px) {
  table {
    display: table;
  }
}

/* Make form elements responsive */
input, select, textarea {
  max-width: 100%;
}

/* Mobile adjustments */
@media (max-width: 767px) {
  .container {
    padding: 0 10px;
  }
  
  .site-content-main {
    padding: 10px;
  }
  
  /* Fix for tables on mobile */
  td {
    display: block;
    width: 100% !important;
  }
  
  /* Hide certain elements on mobile if needed */
  .mobile-hidden {
    display: none;
  }
  
  /* Sidebar adjustments */
  .site-content-left, .site-content-right {
    margin-bottom: 15px;
  }
  
  /* Make sure buttons are properly sized on mobile */
  button, .btn {
    width: auto;
    white-space: normal;
  }
  
  /* Add margin between stacked elements */
  [class*="col-"] {
    margin-bottom: 15px;
  }
  
  /* Make navigation more touch-friendly */
  a, button, input[type="button"], input[type="submit"] {
    min-height: 44px;
    min-width: 44px;
  }

  /* Adjust modal for mobile */
  .modal-content {
    padding: 10px;
  }
  
  /* Scale down text on very small screens */
  @media (max-width: 480px) {
    body {
      font-size: 14px;
    }
    
    h1, h2, h3, h4 {
      font-size: 1.5em;
    }
  }
}

/* Medium screens */
@media (min-width: 768px) and (max-width: 991px) {
  .container {
    width: 100%;
  }
}

/* Fix for fixed-width elements */
[style*="width"] {
  max-width: 100%;
}

/* Ensure modals are responsive */
.modal-dialog {
  max-width: 95%;
  margin: 1.75rem auto;
}

@media (min-width: 576px) {
  .modal-dialog {
    max-width: 500px;
  }
}