/* ========== Responsive Styles for Login Page ========== */

@media (max-width: 767.98px) {
    body {
      padding: 0 10px;
    }
  
    .auth-page .card {
      margin-top: 20px;
      border-radius: 0.75rem;
    }
  
    .auth-side-wrapper {
      display: none; /* Hide side image on mobile */
    }
  
    .auth-form-wrapper {
      padding: 1.5rem !important;
      text-align: center;
    }
  
    .auth-form-wrapper .btn {
      width: 100% !important;
    }
  
    .input-group {
      flex-direction: row;
      align-items: stretch;
    }
  
    .input-group .input-group-text {
      padding: 0.5rem 0.75rem;
      font-size: 1rem;
    }
  
    .social-icons {
      gap: 2rem;
    }
  
    .noble-ui-logo {
      font-size: 1.5rem;
    }
  
    .auth-form-wrapper h5 {
      font-size: 1rem;
    }
  
    /* ========== Responsive Styles for Seasons List Page ========== */
    .page-content {
      padding: 1rem;
    }
  
    .breadcrumb {
      flex-wrap: wrap;
      font-size: 0.9rem;
    }
  
    .card .card-title {
      font-size: 1.2rem;
    }
  
    .card .btn-sm {
      font-size: 0.75rem;
      padding: 6px 10px;
    }
  
    .table-responsive {
      overflow-x: auto;
    }
  
    #dataTableExample thead {
      font-size: 0.85rem;
    }
  
    #dataTableExample tbody td {
      font-size: 0.85rem;
      white-space: nowrap;
    }
  
    /* Modal */
    .modal-dialog {
      margin: 1rem;
    }
  
    .modal-body p {
      font-size: 0.95rem;
    }
  
    .modal-body .fs-5 {
      font-size: 0.9rem !important;
    }
  
    .modal-title {
      font-size: 1.2rem;
    }
  }