/* Global styles for mobile app look */
body {
    font-family: 'Baloo', Arial, sans-serif;
    background: #f8f9fa;
    padding-bottom: 70px; /* space for bottom nav */
}

main.container {
    margin-top: 20px;
}

.collection-item i {
    vertical-align: middle;
}

.card.absent {
    background: #FFEBEE;
    border-left: 4px solid #F44336;
}

img.thumb {
    width: 50px;
    height: 50px;
    object-fit: cover;
    border-radius: 50%;
}

/* bottom navigation bar */
nav.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60px;
    background: #ffffff;
    box-shadow: 0 -1px 5px rgba(0,0,0,0.2);
    display: flex;
    z-index: 1000;
}

nav.bottom-nav a {
    flex: 1;
    text-align: center;
    padding-top: 8px;
    color: #555;
    font-size: 12px;
    text-decoration: none;
}

nav.bottom-nav a i {
    font-size: 24px;
    display: block;
    margin: 0 auto 4px;
}

nav.bottom-nav a.active {
    color: #2196F3;
}

.brand-logo {
    padding-left: 15px !important;
}

.sidenav-trigger {
    margin-left: -15px !important;
}

.cards-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.card {
    background: white;
    padding: 15px;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

.cards-container{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:20px;
}

.card{
padding:10px;
border-radius:10px;
background:white;
cursor:pointer;
text-align:center;
box-shadow:0 2px 5px rgba(0,0,0,0.2);
}

.card.absent{
background:#ffb3b3;
}

.btn-valider{
    background:#28a745;
    color:white;
    border:none;
    padding:12px 25px;
    font-size:16px;
    font-weight:bold;
    border-radius:10px;
    cursor:pointer;
    transition:0.3s;
    box-shadow:0 3px 6px rgba(0,0,0,0.2);
}

.btn-valider:hover{
    background:#218838;
    transform: translateY(-2px);
}

.btn-valider:active{
    transform: scale(0.97);
}

.photo-container{
    width:120px;
    height:160px;
    margin:auto;
}

.photo-etudiant{
    width:120px;
    height:160px;
    object-fit:cover;
    border-radius:8px;
}

.photo-vide{
    width:120px;
    height:160px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#f0f0f0;
    border-radius:8px;
    font-size:50px;
}

.card{
    text-align:center;
}

/* Style for the Materialize select when placeholder is shown (no longer strictly needed but harmless) */
.select-wrapper .placeholder-selected {
    color: rgb(230, 152, 8);
    font-weight: bold;
}

/* UNCONDITIONAL style for the dropdown input */
.select-wrapper input.select-dropdown {
    font-size: 1.4rem;
    color: rgb(230, 152, 8);
    font-weight: bold;
}

/* Override Materialize dropdown highlight color */
.dropdown-content li.selected {
    background-color: rgba(230, 152, 8, 0.15); /* Light orange background */
}

.dropdown-content li.selected > span {
    color: rgb(230, 152, 8); /* Full orange text */
}