body {
  font-family: 'FF Dax', sans-serif;
}

/* Ensure navbar text remains white */
.navbar-nav .nav-link {
    color: white;
}

/* Open dropdown on hover without clicking */
.navbar-nav .dropdown:hover .dropdown-menu {
    display: block;
    margin-top: 0;
}

/* Navbar items turn black on hover */
.navbar-nav .nav-link:hover {
    background-color: black;
    color: white;
    /* Keep text white */
}

/* Set the background of the dropdown menu to red */
.navbar-nav .dropdown-menu {
    background-color: var(--bs-danger);
    /* Red background */
}

/* Dropdown items styling */
.navbar-nav .dropdown-menu .dropdown-item {
    color: white;
    background-color: var(--bs-danger);
}

/* Dropdown items turn black on hover or focus */
.navbar-nav .dropdown-menu .dropdown-item:hover,
.navbar-nav .dropdown-menu .dropdown-item:focus {
    background-color: black;
    color: white;
}

/* Reset background after clicking */
.navbar-nav .dropdown-menu .dropdown-item:active {
    background-color: var(--bs-danger);
    color: white;
}

/* Student and Staff container */
.container-student,
.container-staff,
.container-topic,
.container-sob,
.container-observe {
    margin-left: 30px;
    margin-right: 30px;
}

/* Student table  AND the Select Action button when clicked won't create a scroll on the side of the table */

.table-responsive {
    overflow: visible;
}

/* Set the header of the table to red */
.table-dark {
    --bs-table-bg: RGBA(var(--bs-danger-rgb), var(--bs-bg-opacity, 1)) !important;
}


/* Custom table styling for SOBs */

/* Custom Table Styles */
.custom-table {
    border-collapse: separate;
    /* Prevent border collapsing */
    border-spacing: 0;
    /* Optional: Adjust spacing between cells */
}

.custom-table th,
.custom-table td {
    border: 1px solid #dee2e6;
    /* Thin borders around cells */
    padding: 0.75rem;
    /* Consistent padding (matches Bootstrap's default) */
    vertical-align: middle;
    /* Optional: Align content vertically */
}

.custom-table th.text-end,
.custom-table td.text-end {
    text-align: right;
    /* Align text to the right for "Edit" column */
}

.custom-table th {
    background-color: #f8f9fa;
    /* Optional: Light background for headers */
    font-weight: bold;
    /* Make header text bold */
}


/* Custom Single Observations FlexBox Styles */

/* Main container with 30px left and right margins */
.main-container-observe {
    display: flex;
    margin: 0 30px;
    gap: 20px;
    box-sizing: border-box;
}

/* Left section occupying 70% of the container */
.left-container-observe {
    flex: 7;
}

/* Right section occupying 30% of the container */
.right-container-observe {
    flex: 3;
}

/* Responsive Adjustments (Optional) */
@media (max-width: 768px) {
    .main-container-observe {
        flex-direction: column;
        /* Stack sections vertically on smaller screens */
        margin: 0 15px;
        /* Reduce side margins */
    }

    .left-container-observe,
    .right-container-observe {
        flex: none;
        /* Remove flex-grow */
        width: 100%;
        /* Full width for each section */
    }
}

.gradient-red-teal {
    background: linear-gradient(45deg,
            rgba(13, 202, 240, 0.2) 50%,
            rgba(220, 53, 69, 0.2) 50%) !important;
    color: #000;
}

.gradient-red-yellow {
    background: linear-gradient(45deg,
            rgba(255, 193, 7, 0.2) 50%,
            rgba(220, 53, 69, 0.2) 50%) !important;
    color: #000;
}

.rank-card {
    border-color: var(--border-color) !important;
    background: repeating-linear-gradient(45deg,
            var(--background-rgba),
            var(--background-rgba) 10px,
            transparent 10px,
            transparent 20px);
    transition: transform 0.3s ease;
    /* Optional: Add hover animation */
}

.rank-card:hover {
    transform: scale(1.05);
    /* Optional: Scale up on hover */
    cursor: pointer;
    /* Change cursor to pointer on hover */
}