/* 1. DESKTOP DASHBOARD (PC View)                            */

/* ========================================================= */



/* De container voor de knoppen op het dashboard-beginscherm */

.dashboard-grid, 

.admin-dashboard .content-grid {

    display: grid ; /* Forceer Grid layout */

    /* Maakt kolommen van minimaal 250px breed die de ruimte vullen */

    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)) !important; 

    gap: 20px ;

    padding: 20px;

    max-width: 1200px;

    margin: 0 auto;

    /* Zorg dat het niet als een lijst (flex-column) gedraagt */

    flex-direction: row !important; 

}



/* De knoppen zelf */

.dashboard-item,

.admin-dashboard .cta-button {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    background-color: #1a1a1a;

    border: 2px solid #333;

    border-radius: 12px;

    padding: 30px 20px;

    text-align: center;

    text-decoration: none;

    transition: all 0.3s ease;

    min-height: 150px; /* Geeft ze een mooie blok-vorm */

}



.dashboard-item:hover,

.cta-button:hover {

    border-color: var(--brand-orange);

    transform: translateY(-5px);

    background-color: #222;

    box-shadow: 0 10px 20px rgba(0,0,0,0.5);

}



/* Icoontjes of titels in de blokken */

.dashboard-item h3, 

.cta-button span {

    color: var(--brand-orange);

    margin-top: 10px;

    font-size: 1.2rem;

    font-weight: bold;

}



/* ========================================================= */

/* 2. MOBIELE AANPASSINGEN (Max 768px)                       */

/* ========================================================= */



@media (max-width: 768px) {

    .dashboard-grid, 

    .admin-dashboard .content-grid {

        grid-template-columns: 1fr /* Op mobiel weer 1 kolom */

        gap: 15px ;

        padding: 10px;

    }



    .dashboard-item,

    .cta-button {

        min-height: 80px; /* Iets minder hoog op mobiel */

        padding: 15px;

    }

}



/* ... Rest van je admin.css (kaarten voor editors etc.) ... */



@media (max-width: 768px) {

    /* Algemene container aanpassing */

    .admin-wrapper { 

        width: 95%; 

        margin: 20px auto; 

    }



    /* Voorkom inzoomen op iPhone bij invoervelden */

    input, textarea, select, .form-control { 

        font-size: 16px !important; 

        width: 100% !important;

        display: block !important;

    }



    /* De 'Kaarten' van de editor (Lessen, Producten, Rooster-items) */

    .product-grid, 

    .text-block-row, 

    .editor-row, 

    .schedule-editor-item { 

        display: flex !important;

        flex-direction: column !important; 

        background: #161616 !important;

        padding: 20px !important;

        border: 1px solid var(--brand-orange) !important;

        border-radius: 12px !important;

        margin-bottom: 25px !important;

        gap: 15px !important;

        position: relative;

    }



    /* Zorg dat interne kolommen ook verticaal stapelen */

    .product-grid > div, 

    .text-block-row > div {

        width: 100% !important;

        display: flex;

        flex-direction: column;

    }



    /* Labels in kaarten (Oranje teksten boven de velden) */

    .product-grid label, 

    .text-block-row label,

    .schedule-editor-item label {

        display: block !important;

        margin-bottom: 4px;

        font-size: 0.75rem;

        color: var(--brand-orange);

        font-weight: bold;

        text-transform: uppercase;

    }



    /* De Verwijderknop (X) rechtsbovenin de kaart */

    .btn-delete-action {

        position: absolute !important;

        top: -10px;

        right: -5px;

        width: auto !important;

        padding: 8px 12px !important;

        z-index: 10;

        border-radius: 5px;

    }



    /* Dashboard knoppen raster naar 1 kolom op mobiel */

    .admin-dashboard .content-grid {

        grid-template-columns: 1fr;

        gap: 15px;

    }



    /* Footer met 'Terug' en 'Opslaan' knoppen onderin de editor */

    .footer-container {

        flex-direction: column-reverse; /* Opslaan boven, Terug onder */

        width: 95%;

        gap: 10px;

    }



    .btn-save-main, 

    .btn-back-main {

        width: 100% !important;

        display: block;

        text-align: center;

        padding: 15px;

    }



    /* Tabellen omzetten naar kaarten (indien nodig) */

    .admin-table thead { 

        display: none !important; 

    }



    .admin-table, .admin-table tbody, .admin-table tr, .admin-table td {

        display: block;

        width: 100%;

    }



    .admin-table tr { 

        border: 1px solid #333; 

        margin-bottom: 15px; 

        padding: 10px;

        background: #111;

        border-radius: 8px;

    }



    .admin-table td {

        text-align: right;

        padding-left: 50%;

        position: relative;

        border-bottom: 1px solid #222;

        min-height: 40px;

        display: flex;

        align-items: center;

        justify-content: flex-end;

    }



    .admin-table td::before {

        content: attr(data-label);

        position: absolute;

        left: 10px;

        font-weight: bold;

        color: var(--brand-orange);

        text-transform: uppercase;

        font-size: 0.7rem;

    }

}?