﻿    /* Alapbeállítások */
    html, body {
        margin: 0;
        padding: 0;
        height: 100%;
        background-color: #0a0a1a; /* sötétkékes háttér */
        color: #00eaff; /* világoskék szöveg */
        font-family: "Consolas", "Courier New", monospace;
    }

    /* Konténer, ami kitölti az egész képernyőt */
    .container {
        display: flex;
        flex-direction: column;
        height: 100vh;
    }

    /* Sorok */
    .row {
        display: flex;
        width: 100%;
    }

    /* Felső sor – max. 200px */
    .top-row {
        height: 200px;
        background-color: #001a33; /* sötétebb diagnosztikai fejléckék */
        box-shadow: 0 0 15px #00eaff55 inset;
    }

    /* Alsó sor – a maradék helyet foglalja el */
    .bottom-row {
        flex-grow: 1;
        background-color: #001122; /* mély sötétkék */
        box-shadow: inset 0 0 20px #0077ff55;
    }

    /* Oszlopok aránya: 2-8-2 */
    .col-2 {
        flex: 2;
        padding: 10px;
        border-right: 1px solid #004488;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .col-8 {
    flex: 8;
    padding: 10px;
    display: flex;
    flex-direction: column;  /* ez a kulcs */
    align-items: center;
    justify-content: center;
}

    /* Alsó sor oszlopai */
    .bottom-row .col-2, .bottom-row .col-8 {
        border-top: 1px solid #004488;
    }

    /* Kisebb fényhatás a cellák körül */
    .col-2, .col-8 {
        box-shadow: 0 0 10px #004488 inset;
        border-radius: 6px;
    }

    /* Szöveg középre és némi ragyogás */
    h1, h2, p {
        text-align: center;
        text-shadow: 0 0 8px #00ccff;
    }

    /* Link gombok stílusa a bal oszlopban */
.link-button {
    display: block;
    width: 80%;
    margin: 10px 0;
    padding: 10px;
    text-align: center;
    background-color: #0044ff; /* élénk kék */
    color: #ffffff;
    text-decoration: none;
    border-radius: 6px;
    box-shadow: 0 0 8px #00ccff inset;
    transition: 0.3s;
}

.link-button:hover {
    background-color: #00eaff;
    color: #001122;
    box-shadow: 0 0 12px #00eaff inset;
}

/* Form stílusa a középső oszlopban */
.user-form {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 400px;
    padding: 15px;
    background-color: #001a33;
    border-radius: 10px;
    box-shadow: 0 0 15px #00eaff inset;
    color: #00eaff;
}

.user-form label {
    margin-top: 10px;
    margin-bottom: 5px;
    font-weight: bold;
}

.user-form input {
    padding: 8px;
    border: 1px solid #004488;
    border-radius: 5px;
    background-color: #0a0a1a;
    color: #00eaff;
}

.user-form input:focus {
    outline: none;
    border-color: #00eaff;
    box-shadow: 0 0 8px #00ccff;
}

.user-form button {
    margin-top: 15px;
    padding: 10px;
    background-color: #0044ff;
    color: #fff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    box-shadow: 0 0 8px #00ccff inset;
    transition: 0.3s;
}

.user-form button:hover {
    background-color: #00eaff;
    color: #001122;
    box-shadow: 0 0 12px #00eaff inset;
}
/* BAL OSZLOP: link gombok */
.col-2.d-flex.flex-column {
    display: flex;
    flex-direction: column;
    align-items: center;   /* vízszintesen középre */
    justify-content: flex-start; /* felülről induljon */
}

/* Link gombok stílusa */
.link-button {
    display: block;
    width: 80%;
    margin: 10px 0;        /* egymástól függő távolság */
    padding: 10px;
    text-align: center;
    background-color: #0044ff;
    color: #ffffff;
    text-decoration: none;
    border-radius: 6px;
    box-shadow: 0 0 8px #00ccff inset;
    transition: 0.3s;
}

.link-button:hover {
    background-color: #00eaff;
    color: #001122;
    box-shadow: 0 0 12px #00eaff inset;
}

.slot { padding:10px; border-radius:6px; margin:6px 0; display:flex; justify-content:space-between; align-items:center; }
.slot.free { background: #00aa44; color: #001; cursor:pointer; box-shadow: 0 0 8px #00ff99 inset; }
.slot.booked { background: #cc2b2b; color: #fff; box-shadow: inset 0 0 6px rgba(0,0,0,0.3); }
