/* ==========================================================
   STALPLANNING
   style.css
   ========================================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {

    --groen-donker: #2F5D50;
    --groen: #4CAF50;
    --geel: #F4C542;
    --bruin: #8B5A2B;

    --grijs-100: #f7f7f7;
    --grijs-200: #eeeeee;
    --grijs-300: #dddddd;
    --grijs-400: #cccccc;

    --tekst: #333333;
}

body {

    font-family: Arial, Helvetica, sans-serif;

    background: var(--grijs-100);

    color: var(--tekst);

}

header {

    background: var(--groen-donker);

    color: white;

    padding: 20px;

    text-align: center;

}

header h1 {

    font-size: 32px;

    font-weight: bold;

}

.planning-container {

    width: 95%;

    margin: 25px auto;

}

.tabs {

    width: 95%;

    margin: 20px auto;

    display: flex;

    gap: 10px;

}

.tabs a {

    text-decoration: none;

    color: #333;

    background: white;

    border: 1px solid var(--grijs-400);

    border-radius: 6px;

    padding: 12px 24px;

    transition: .2s;

}

.tabs a:hover {

    background: var(--grijs-200);

}

.tabs a.active {

    background: var(--groen-donker);

    color: white;

}

table.planning {

    width: 100%;

    border-collapse: collapse;

    background: white;

}

table.planning th {

    background: var(--groen-donker);

    color: white;

    padding: 14px;

    text-align: left;

}

table.planning td {

    padding: 12px;

    border-bottom: 1px solid var(--grijs-300);

}

table.planning tbody tr:nth-child(even) {

    background: #fafafa;

}

table.planning tbody tr:hover {

    background: #eef8f0;

}

.horse-column {

    width: 220px;

}

.horse-name {

    font-weight: bold;

    white-space: nowrap;

}

/* ==========================================================
   TOGGLE BUTTONS
   ========================================================== */

.toggle-group {

    display: flex;

    gap: 8px;

    justify-content: flex-start;

    align-items: center;

    flex-wrap: nowrap;

}

.toggle {

    min-width: 95px;

    padding: 10px 16px;

    border-radius: 6px;

    border: 2px solid transparent;

    background: #ffffff;

    cursor: pointer;

    font-size: 14px;

    font-weight: bold;

    transition:
        background-color .20s ease,
        color .20s ease,
        border-color .20s ease,
        transform .15s ease;

}

.toggle:hover {

    transform: translateY(-1px);

}

/* ---------- STAL ---------- */

.toggle.stal {

    border-color: #8B5A2B;

    color: #8B5A2B;

}

.toggle.stal.selected {

    background: #8B5A2B;

    color: #ffffff;

}

/* ---------- PADDOCK ---------- */

.toggle.paddock {

    border-color: #F4C542;

    color: #8a6b00;

}

.toggle.paddock.selected {

    background: #F4C542;

    color: #333333;

}

/* ---------- WEI ---------- */

.toggle.wei {

    border-color: #4CAF50;

    color: #2e7d32;

}

.toggle.wei.selected {

    background: #4CAF50;

    color: #ffffff;

}

/* ==========================================================
   STICKY EERSTE KOLOM
   ========================================================== */

.table-wrapper {

    overflow-x: auto;

}

table.planning th:first-child,
table.planning td:first-child {

    position: sticky;

    left: 0;

    z-index: 5;

}

table.planning th:first-child {

    background: var(--groen-donker);

}

table.planning td:first-child {

    background: #ffffff;

}

table.planning tbody tr:nth-child(even) td:first-child {

    background: #fafafa;

}

/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media screen and (max-width: 900px) {

    .planning-container {

        width: 100%;

        padding: 0 10px;

    }

    .toggle-group {

        gap: 5px;

    }

    .toggle {

        min-width: 80px;

        padding: 8px 10px;

        font-size: 13px;

    }

}

@media screen and (max-width: 600px) {

    header h1 {

        font-size: 24px;

    }

    .tabs {

        width: 100%;

        padding: 0 10px;

    }

    table.planning {

        min-width: 850px;

    }

}

/* ==========================================================
   MOBIELE KAARTWEERGAVE
   ========================================================== */

@media screen and (max-width: 600px) {


    .planning-container {

        width:100%;

        padding:0 10px;

    }


    table.planning {

        min-width:0;

        background:transparent;

    }


    table.planning thead {

        display:none;

    }


    table.planning,
    table.planning tbody,
    table.planning tr,
    table.planning td {

        display:block;

        width:100%;

    }


    table.planning tr {

        background:white;

        margin-bottom:15px;

        border-radius:10px;

        padding:10px;

        box-shadow:0 2px 5px rgba(0,0,0,0.08);

    }


    table.planning td {

        border:none;

        padding:10px 5px;

    }


    table.planning td:first-child {

        position:static;

        background:white;

        font-size:18px;

        font-weight:bold;

        border-bottom:1px solid #ddd;

        margin-bottom:10px;

    }


    table.planning td[data-label]::before {

        content:attr(data-label);

        display:block;

        font-weight:bold;

        margin-bottom:6px;

        color:#555;

    }


    .toggle-group {

        display:grid;

        grid-template-columns:repeat(3,1fr);

        gap:6px;

    }


    .toggle {

        min-width:0;

        width:100%;

        padding:12px 5px;

    }

}