@import url('https://fonts.googleapis.com/css2?family=Sarabun:wght@400;700&display=swap');

/* === Glassmorphism Theme Start === */

/* 1. Body Font & Background */
body {
    font-family: 'Sarabun', sans-serif;
    background: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 9%, #fad0c4 18%, #ffd1ff 28%, #f2d5f5 37%, #c1d7f0 48%, #a2d2ff 59%, #bde0fe 71%, #a2d2ff 83%, #89c2d9 100%);
    background-attachment: fixed;
    color: #212529; /* Default dark text color */
}

/* 2. Glassmorphism Container */
.container, .container-xl {
    background-color: rgba(255, 255, 255, 0.85); /* More opaque white */
    border-radius: 1rem;
    padding: 2rem;
    margin-top: 2rem !important;
    margin-bottom: 2rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.15);
}

/* 3. Ensure Navbar is on top of modals */
.navbar {
    position: relative;
    z-index: 1060; /* Higher than Bootstrap modal (1055) */
}

/* 4. Adjust table for glass container */
.table {
    margin-bottom: 0; /* Remove margin when table is inside a responsive wrapper */
    --bs-table-color: #212529;
    --bs-table-bg: transparent;
    --bs-table-border-color: rgba(0, 0, 0, 0.1);
    --bs-table-striped-color: #212529;
    --bs-table-striped-bg: rgba(0, 0, 0, 0.03);
    --bs-table-hover-color: #212529;
    --bs-table-hover-bg: rgba(0, 0, 0, 0.05);
}

.table th {
    white-space: normal; /* Allow header text to wrap */
}

.table td {
    white-space: nowrap;
}

/* 5. Adjust pagination for glass container */
.page-link {
    background-color: rgba(255, 255, 255, 0.3);
    border-color: rgba(0, 0, 0, 0.1);
}
.page-item.disabled .page-link {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: rgba(0, 0, 0, 0.1);
}
.page-item.active .page-link {
    background-color: #0d6efd;
    border-color: #0d6efd;
}

/* 6. Adjust form controls */
.form-control {
    background-color: rgba(255, 255, 255, 0.5);
    border-color: rgba(0, 0, 0, 0.1);
}

/* === Glassmorphism Theme End === */

/* Fix for evaluation input modal being behind backdrop */
#evaluationInputModal {
  z-index: 1060;
}

/* Fix for notification dropdown appearing behind modal */
#notification-list {
    z-index: 1061;
}