/* ==========================================================================
   Tables and Lists
   ========================================================================== */

   .management-list,
   .management-table {
       padding: 20px;
       font-family: Arial, sans-serif;
   }
   
   .management-list .create-button,
   .management-list .search-input {
       margin-bottom: 10px;
   }
   
   .management-list .search-input {
       padding: 5px;
       width: 300px;
   }
   
   .management-table {
       width: 100%;
       border-collapse: collapse;
       font-size: 0.9em;
   }
   
   .management-table th,
   .management-table td {
       border: 1px solid #ccc;
       padding: 8px;
       text-align: left;
   }
   
   .management-table th {
       background-color: #f2f2f2;
   }
   
   .management-table tr:nth-child(even) {
       background-color: #f9f9f9;
   }
   
   .management-table tr:hover {
       background-color: #e6f7ff;
       cursor: pointer;
   }
   
   .management-list .form-section {
       margin-bottom: 15px;
   }
   
   .management-list .form-section h3 {
       cursor: pointer;
       margin-top: 0;
       padding: 7px;
       background-color: #f2f2f2;
       border: 1px solid #ccc;
       font-size: large;
   }
   
   .management-list .form-section h3:hover {
       background-color: #e6e6e6;
   }
   
   .management-list .form-section.collapsed > div {
       display: none;
   }
   
   .management-list .form-divide {
       margin-bottom: 10px;
       width: 100%;
       border: 1px solid #ccc;
       padding: 10px;
   }
   
   .management-list .form-field-row {
       box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
       position: relative;
   }
   
   .management-list .form-field-row .iconButton {
       position: absolute;
       top: 0;
       right: 0;
   }
   
   .management-list .form-actions button {
       margin-top: 10px;
       margin-right: 5px;
   }
   
   .management-list .form-actions button:hover {
       background-color: #0056b3;
   }
   
   .user-list {
       display: flex;
       flex-direction: column;
   }
   
   .user-section {
       margin-bottom: 20px;
   }
   
   .user-card {
       border: 1px solid #ccc;
       padding: 10px;
       margin: 10px;
       border-radius: 5px;
       text-align: center;
       width: fit-content;
   }
   
   .user-card img.user-image {
       border-radius: 50%;
       width: 80px;
       height: 80px;
       object-fit: cover;
   }
   
   .user-card h4 {
       margin: 10px 0;
   }
   
   .attendance-buttons {
    display: flex;
    justify-content: center;
    gap: 5px;
    flex-wrap: wrap; /* Allows buttons to wrap to the next line on smaller screens */
    padding: 0 10px; /* Optional: Adds some horizontal padding to prevent overflow */
  }
   
   .attendance-buttons button {
       border: none;
       background-color: #ccc;
       color: white;
       font-weight: bold;
       cursor: pointer;
       transition: background-color 0.3s;
   }
   
   .attendance-buttons button.present {
       background-color: green;
   }
   
   .attendance-buttons button.absent {
       background-color: red;
   }
   
   .attendance-buttons button.late {
       background-color: orange;
   }
   
   @media (max-width: 600px) {
       .user-card {
        width: 93%;
       }
       .attendance-buttons {
        gap: 3px; /* Reduce gap on mobile for tighter spacing */
        padding: 0 5px; /* Further reduce padding on mobile if needed */
      }
    
      /* Ensure buttons don't exceed screen width */
      .attendance-buttons button {
        flex: 1; /* Allows buttons to shrink/grow to fit the container */
        white-space: nowrap; /* Prevents text from wrapping within buttons */
      }
   }
   
   @media (min-width: 601px) {
       .user-card {
           width: fit-content;
       }
   }
   
   @media (min-width: 901px) {
       .user-card {
           width: fit-content;
       }
   }