/* =====================================================
   Admin Panel - Tennis Court Management Styles
   -----------------------------------------------------
   Description: Custom styles for the Admin Panel to
   manage tennis court assignments. This includes
   adjustments for button padding, font sizes, responsive
   layouts, and visibility enhancements for both desktop
   and mobile views.
   ===================================================== */

/* ----------------------------
   General Styles
   ---------------------------- */

/* Ensure all dropdown menus have consistent z-index */
.dropdown-menu {
    z-index: 1050;
}

/* Reduce the overall padding and font size for dropdown buttons */
.court-status-dropdown {
    padding: 0.25rem 0.5rem; /* Reduced vertical and horizontal padding */
    font-size: 0.875rem; /* Slightly smaller font size for compactness */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Adjust the size of Font Awesome icons within dropdown buttons */
.court-status-dropdown .fas {
    font-size: 0.8rem; /* Smaller icon size for better alignment */
}

/* Ensure the table remains responsive and does not exceed viewport width */
.table-responsive {
    overflow-x: auto;
}

/* Reduce the bottom margin of dropdowns to save vertical space */
.dropdown.mb-3 {
    margin-bottom: 0.5rem; /* Reduced from default 1rem */
}

/* ----------------------------
   Scroll to Top Button
   ---------------------------- */

/* Style the Scroll to Top button */
.scroll-to-top {
    position: fixed;
    bottom: 40px;
    right: 40px;
    display: none; /* Hidden by default */
    cursor: pointer;
    z-index: 1100; /* Positioned above other elements */
    transition: opacity 0.3s ease-in-out;
}

.scroll-to-top:hover {
    opacity: 0.8; /* Slight transparency on hover */
}

.scroll-to-top i {
    font-size: 2rem; /* Larger icon size for visibility */
    color: #0d6efd; /* Bootstrap primary color */
}

/* Display the Scroll to Top button on medium and larger screens */
@media (min-width: 768px) {
    .scroll-to-top {
        display: block;
    }
}

/* ----------------------------
   Desktop View Styles
   ---------------------------- */

/* Adjust table header to remain sticky */
.table thead th {
    position: sticky;
    top: 0;
    background-color: #f8f9fa; /* Light background for visibility */
    z-index: 2; /* Ensure it stays above table rows */
}

/* Ensure table cells have proper vertical alignment */
.table td, .table th {
    vertical-align: middle;
}

/* ----------------------------
   Mobile View Styles
   ---------------------------- */

/* Style for court cards in mobile accordion */
.card-body {
    padding: 0.5rem; /* Reduced padding for compactness */
}

/* Style for court titles in mobile view */
.card-title {
    font-size: 1rem; /* Slightly larger font for readability */
    margin-bottom: 0.5rem;
}

/* Adjust dropdown buttons within mobile cards */
.card .dropdown .court-status-dropdown {
    width: 100%; /* Full width for better touch targets */
    justify-content: flex-start; /* Align icon and text to the start */
}

/* Adjust icon size within mobile dropdown buttons */
.card .dropdown .court-status-dropdown .fas {
    font-size: 0.8rem; /* Consistent with desktop view */
    margin-right: 0.3rem; /* Slight space between icon and text */
}

/* Ensure mobile dropdown menus span the full width of the card */
.card .dropdown-menu {
    width: 100%;
}

/* Optional: Add borders to separate courts in mobile view */
 /* .card .dropdown {
  border: 1px solid #dee2e6;
    border-radius: 0.25rem;
    padding: 0.25rem; */
}

/* ----------------------------
   Modal Styles
   ---------------------------- */

/* Style modal headers for better visual distinction */
.modal-header.bg-success {
    background-color: #198754 !important; /* Bootstrap success color */
}

.modal-header.bg-warning {
    background-color: #ffc107 !important; /* Bootstrap warning color */
}

.modal-header .modal-title {
    color: #ffffff; /* White text for contrast */
}

/* ----------------------------
   Toast Notification Styles
   ---------------------------- */

/* Ensure toast has rounded corners */
.toast {
    border-radius: 0.25rem;
}

/* Adjust toast content alignment */
.toast .toast-body {
    font-size: 0.9rem; /* Slightly smaller font for compactness */
}

/* ----------------------------
   Additional Enhancements
   ---------------------------- */

/* Hover effect for dropdown items */
.dropdown-item:hover {
    background-color: #e9ecef; /* Light gray on hover */
}

/* Active state for selected dropdown items */
.dropdown-item.active {
    background-color: #0d6efd; /* Bootstrap primary color */
    color: #ffffff; /* White text */
}

/* Ensure all interactive elements have adequate touch targets */
.btn, .dropdown-item {
    min-height: 2rem;
}
/*Adjusts the table header background color*/
div.table-responsive th {
    background-color: #eee;
    color:black;
}
div.dropdown button.court-status-dropdown {
margin-top: 2px ;
margin-bottom: 2px ;

}
/* Responsive font sizes for better readability */
@media (max-width: 575.98px) {
    .court-status-dropdown {
        font-size: 0.75rem; /* Smaller font on extra small screens */
    }
    
    .court-status-dropdown .fas {
        font-size: 0.7rem; /* Smaller icons on extra small screens */
    }
    
    .card-title {
        font-size: 0.9rem; /* Smaller titles on extra small screens */
    }
}

/* Optional: Customize scrollbar within table-responsive for better aesthetics */
.table-responsive::-webkit-scrollbar {
    height: 3px;
}

.table-responsive::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.table-responsive::-webkit-scrollbar-thumb {
    background: #0d6efd;
    border-radius: 3px;
}

.table-responsive::-webkit-scrollbar-thumb:hover {
    background: #0b5ed7;
}

/*a few needed overrides to the default bootstrap css*/

div.dropdown i.text-warning, i.text-danger, i.text-primary, i.text-success {
    color: white !important; /* Change the color */

}
a.dropdown-item i.text-warning {
	color:#ffcd39 !important;
}
a.dropdown-item i.text-danger{
	color:red !important;
}
a.dropdown-item i.text-primary {
	color:#0d6efd !important;
}
a.dropdown-item i.text-success {
	color:#6c757d !important;
}


/* Ensure card allows overflow */
.card {
    overflow: visible; /* Changed from hidden or auto */
}

/* Ensure table-responsive allows vertical overflow */
.table-responsive {
    overflow-y: visible; /* Changed from hidden or auto */
}

/* Optional: Increase z-index for dropdown menus */
.dropdown-menu {
    z-index: 1050; /* Higher than default to appear above other elements */
}

/* Adjust dropdown-menu positioning when dropup is active */
.dropup .dropdown-menu {
    top: auto;
    bottom: 100%;
    margin-bottom: 0.125rem;
}
/* Ensure dropdown menus appear above other elements */
.dropdown-menu {
    z-index: 1050; /* Higher than most Bootstrap components except modals */
}