/* Reset de stiluri de bază */
body, h1, button, div {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Stiluri de bază pentru corpul paginii */
body {
    font-family: 'Arial', sans-serif;
    background-color: #f9f9fc; /* Fundal modern, curat */
    color: #333; /* Text neutru */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    min-height: 100vh;
    padding: 20px;
}

/* Titlu principal */
h1 {
    font-size: 3rem;
    color: #0078D7; /* Albastru modern */
    margin-bottom: 20px;
    text-align: center;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}

/* Stil pentru link-ul din titlu */
h1 a {
    color: inherit; /* Folosește culoarea din <h1> */
    text-decoration: none; /* Elimină sublinierea */
}

h1 a:hover {
    cursor: pointer; /* Opțional: adaugă un efect la hover */
}

/* Status ROS */
#ros-status {
    font-size: 1.2rem;
    color: #555;
    margin-bottom: 30px;
    background-color: #e6f7ff;
    padding: 10px 15px;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    text-align: center;
}

/* Container pentru fiecare categorie */
.control-category {
    width: 100%;
    max-width: 600px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    padding: 20px;
    margin-bottom: 20px;
    text-align: center;
}

.control-category h2 {
    font-size: 1.8rem;
    color: #0078D7;
    margin-bottom: 15px;
}

.direction-grid-controller {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    gap: 10px; /* Spațiere între butoane */
    justify-items: center;
    align-items: center;
    margin-top: 20px;
}

/* Poziționarea butoanelor în grilă */
#forward {
    grid-column: 2; /* Aliniat pe coloana din mijloc */
    grid-row: 1; /* Prima linie */
}

#backward {
    grid-column: 2; /* Aliniat pe coloana din mijloc */
    grid-row: 3; /* Ultima linie */
}

#left {
    grid-column: 1; /* Prima coloană */
    grid-row: 2; /* Linia din mijloc */
}

#right {
    grid-column: 3; /* Ultima coloană */
    grid-row: 2; /* Linia din mijloc */
}

#stop_dir {
    grid-column: 2; /* Aliniat pe coloana din mijloc */
    grid-row: 2; /* Linia din mijloc */
}

.fork-grid-controller {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr;
    gap: 10px; /* Spațiere între butoane */
    justify-items: center;
    align-items: center;
    margin-top: 20px;
}

/* Poziționarea butoanelor în grilă */
#forks_up {
    grid-column: 1; /* Prima linie */
    grid-row: 1;
}

#forks_down {
    grid-column: 3; /* Ultima linie */
    grid-row: 1;
}

#stop_forks {
    grid-column: 2; /* Linia din mijloc */
    grid-row: 1;
}

/* Layout pentru butoane */
.control-button {
    padding: 18px 25px;
    font-size: 1.2rem;
    color: #fff;
    background-color: #0078D7; /* Albastru intens */
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: transform 0.2s ease, background-color 0.3s ease;
    margin: 5px;
}

.control-button:hover {
    background-color: #005a9e; /* Albastru mai închis */
}

.control-button:active {
    background-color: #003f6f; /* Culoare apăsare */
}

.control-button:disabled {
    background-color: #ccc; /* Gri pentru stări inactive */
    cursor: not-allowed;
}

.stop-button {
    padding: 18px 25px;
    font-size: 1.2rem;
    color: #fff;
    background-color: #FF4500; /* Roșu pentru stop */
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: transform 0.2s ease, background-color 0.3s ease;
    margin: 5px;
}

.stop-button:hover {
    background-color: #e34611;
}

.stop-button:active {
    background-color: #b93201;
}

.stop-button:disabled {
    background-color: #ccc; /* Gri pentru stări inactive */
    cursor: not-allowed;
}

/* Flux video 
#camera-stream img {
    border: 2px solid #ddd;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    max-width: 100%;
    height: auto;
}*/

/* Vedere hartă 
#map-view {
    width: 100%;
    max-width: 600px;
    height: auto;
    margin-top: 20px;
    border: 2px solid #ddd;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}*/

/* Responsivitate */
@media (max-width: 768px) {
    h1 {
        font-size: 2.5rem;
    }

    .control-category {
        width: 95%;
        padding: 15px;
    }

    .control-category h2 {
        font-size: 1.5rem;
    }

    .direction-grid-controller {
        gap: 4px; /* Spațiere mai mică pentru mobil */
    }

    .fork-grid-controller {
        gap: 4px; /* Spațiere mai mică pentru mobil */
    }

    .control-button {
        font-size: 1.1rem;
        padding: 14px 20px;
        margin: 5px 0;
    }

    .stop-button {
        font-size: 1.1rem;
        padding: 14px 20px;
        margin: 5px 0;
    }

    /*#map-view {
        width: 100%;
        height: auto;
    }*/
}

@media (max-width: 480px) {
    h1 {
        font-size: 2rem;
    }

    .control-category {
        width: 90%;
        padding: 15px;
    }

    .direction-grid-controller {
        gap: 2px; /* Spațiere mai mică pentru mobil */
    }

    .fork-grid-controller {
        gap: 2px; /* Spațiere mai mică pentru mobil */
    }

    .control-button {
        font-size: 0.9rem;
        padding: 8px 12px;
    }

    .stop-button {
        font-size: 0.9rem;
        padding: 8px 12px;
    }
}