/* --- BASIS STYLING --- */
body { 
    background-color: #fcfcfc; 
    transition: all 0.3s; 
    font-family: 'Segoe UI', sans-serif; 
    color: #444; 
    font-size: 1.25rem; 
}

.nav-logo {
    height: 35px; 
    width: 35px; 
    min-width: 35px; 
    margin-right: 10px; 
    background-color: white; 
    padding: 2px; 
    border-radius: 4px; 
    object-fit: contain;
}

.jumbotron { padding: 1.5rem !important; margin-bottom: 0.5rem !important; }
.card { padding: 15px !important; margin-bottom: 8px !important; }
.input-label { display: block; font-size: 0.75rem; color: #6c757d; text-transform: uppercase; margin-bottom: 0; }
.status-container { height: 24px; }

.student-info-input { 
    border: none; 
    border-bottom: 2px solid #007bff; 
    background: transparent; 
    text-align: center; 
    font-weight: bold; 
    width: 220px; 
    color: #007bff; 
    font-size: 1.3rem; 
    outline: none; 
}

.rooster-input { 
    width: 100%; 
    border: none; 
    background: transparent; 
    font-size: 0.8rem; 
    text-align: center; 
    height: 35px; 
}

.date-display { min-width: 160px; text-align: center; }

/* --- ACCENTEN --- */
.accent-warning { border-left: 5px solid #ffc107 !important; }
.accent-danger { border-left: 5px solid #dc3545 !important; }

/* --- ANIMATIES --- */
@keyframes blink-red { 
    0% { background-color: #fff; } 
    50% { background-color: #ffcccc; } 
    100% { background-color: #fff; } 
}
.timer-alarm { animation: blink-red 0.5s infinite !important; border: 2px solid red !important; }

/* --- SECTIE CONTROLS --- */
#notitiesSectie, #toetsenSectie, #roosterSectie, #helpSectie { display: none; }
.sortable-ghost { opacity: 0.4; background-color: #007bff !important; }

/* --- PROGRESS BAR --- */
.progress { background-color: #e9ecef; border-radius: 10px; overflow: hidden; box-shadow: inset 0 1px 2px rgba(0,0,0,.1); }
.progress-bar { transition: width 0.6s ease; font-weight: bold; font-size: 0.75rem; line-height: 20px; }

/* --- KLEURRIJK MODUS (KLEURRIJK) --- */
.kleurrijk { background-color: #f0f2f5 !important; color: #333 !important; }
.kleurrijk .navbar { background-color: #2c3e50 !important; }
.kleurrijk .jumbotron { background: linear-gradient(135deg, #ffffff 0%, #f1f8e9 100%) !important; border-bottom: 4px solid #7ed321 !important; }
.kleurrijk .student-info-input { color: #d35400 !important; border-bottom: 3px solid #d35400 !important; }
.kleurrijk .card { border-radius: 12px !important; border: none !important; box-shadow: 4px 4px 0px #bdc3c7 !important; background-color: #fff !important; }
.kleurrijk .btn-primary { background-color: #7ed321 !important; border: none !important; color: #fff !important; font-weight: bold !important; }
.kleurrijk .btn-info { background-color: #e67e22 !important; border: none !important; color: #fff !important; }
.kleurrijk .progress-bar { background-color: #7ed321 !important; }
.kleurrijk .badge-primary { background-color: #e67e22 !important; }

/* --- MOBIEL & PRINT --- */
@media print {
    /* 1. Verberg de labels boven de velden EN alle knoppen/switches */
    .navbar, .btn, .input-group, .custom-control, #miniTimer, 
    footer, #dayPicked-nav, #progressContainer, .status-container, 
    .input-label { /* <-- Deze zorgt dat 'Naam Leerling' en 'Klas' verdwijnen */
        display: none !important; 
    }

    /* 2. Maak de header (Naam, Klas, Datum) zichtbaar */
    .jumbotron { 
        display: block !important; 
        border: none !important; 
        margin: 0 !important; 
        padding: 5px 0 !important; 
        background: transparent !important;
        text-align: left !important; /* Lijn alles links uit voor een strakke look */
    }

    /* 3. De printdatum-regel */
    #printDateHeader {
        display: block !important;
        font-style: italic;
        border-bottom: 1px dotted #ccc;
        margin-bottom: 15px;
        font-size: 0.85rem;
    }

    /* 4. De tekst van de naam en klas zelf */
    .student-info-input {
        border: none !important;
        color: black !important;
        font-size: 1.5rem !important; /* Iets groter zodat het opvalt zonder label */
        font-weight: bold !important;
        background: transparent !important;
        padding: 0 !important;
        margin-bottom: 5px;
    }

    /* 5. De rest van de pagina */
    .container { width: 100% !important; max-width: none !important; padding: 0 !important; }
    .card { border: 1px solid #eee !important; box-shadow: none !important; break-inside: avoid; }
}
#taskInput:focus {
    background-color: #ffffff;
    border-color: #0056b3;
    box-shadow: 0 0 0 3px rgba(0,123,255,0.15);
}

/* Definitieve Firefox Mobiel Fix - v4.21 */
@media (max-width: 576px) {
    #miniTimer .timer-box {
        display: flex !important;
        flex-wrap: nowrap !important; /* Dwingt alles op één lijn */
        align-items: center;
        width: 100% !important;
        max-width: 360px; /* Voorkomt dat hij té breed wordt op tablets */
        margin: 0 auto;
        padding: 5px 4px !important; /* Minimale zijpadding */
    }

    #miniTimer .fa-stopwatch {
        flex-shrink: 0;
        margin-right: 4px !important;
    }

    #timerSelect {
        flex: 1 1 auto; /* Selectbox mag krimpen om ruimte te maken */
        min-width: 70px !important; 
        max-width: 100px !important;
        font-size: 0.75rem;
        height: 30px;
        padding: 0 2px !important;
        margin-right: 4px !important;
    }

    #miniTimer .btn {
        flex-shrink: 0; /* Knoppen mogen niet vervormen */
        padding: 4px 5px !important;
        font-size: 0.7rem !important;
        margin-right: 2px !important;
    }

    #timerDisplay {
        flex-shrink: 0; /* Zorgt dat de tijd NOOIT wegvalt */
        font-size: 0.85rem;
        font-weight: bold;
        min-width: 42px; /* Gereserveerde ruimte voor 00:00 */
        text-align: right;
        margin-left: 2px !important;
    }
}

/* Het effect van de gloeimodus voor de focus-modus */
.timer-running {
    box-shadow: 0 0 15px rgba(0, 123, 255, 0.5) !important;
    border-color: #007bff !important;
    transition: all 0.5s ease;
}