/*
 * trafiksok.css
 * Version 1.01 2026-10-13
 * - Gemensamma regler flyttade till weather_common.css och traffic_common.css.
 * - Här finns bara det som är unikt för trafiksok.php: sökformulär, knappar,
 *   overlay, rubrik för sökresultat och kolumnbredder för tabellen (12 kolumner).
 * - Knappstilen gäller nu bara knapparna i sökformuläret (.button-container button),
 *   inte alla knappar på sidan.
 */

/* ------------------------------------------------------------------
   Sökformulär
   ------------------------------------------------------------------ */
.form-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#location {
    background-color: #f2f2f2;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 8px;
    font-size: 14px;
    color: #000;
    width: 100%;
    box-sizing: border-box;
}

.button-container {
    display: flex;
    justify-content: flex-start;
    gap: 10px;
}

.button-container button {
    background-color: #f2f2f2;
    color: #000;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 10px 15px;
    font-size: 14px;
    cursor: pointer;
}

.button-container button:hover {
    background-color: #e6e6e6;
}

/* ------------------------------------------------------------------
   Overlay
   ------------------------------------------------------------------ */
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    display: none;
}

.overlay.show {
    display: block;
}

/* Rubrik ovanför sökresultatet */
h4 {
    font-size: 11px;
}

/* ------------------------------------------------------------------
   Kolumnbredder (12 kolumner)
   ------------------------------------------------------------------ */
thead th:nth-child(1) {  /* Station */
    width: 25%;
}

thead th:nth-child(2) {  /* Sök */
    width: 5%;
}

thead th:nth-child(3),   /* Tid */
thead th:nth-child(4),   /* Temperatur */
thead th:nth-child(5),   /* Vägbana */
thead th:nth-child(6),   /* Fuktighet */
thead th:nth-child(7),   /* Nederbörd */
thead th:nth-child(8),   /* Vind (medel) */
thead th:nth-child(9),   /* Vind (max) */
thead th:nth-child(12) { /* Avstånd (km) */
    width: 10%;
}

thead th:nth-child(10),  /* Lat */
thead th:nth-child(11) { /* Lon */
    width: 6%;
}

@media (max-width: 768px) {
    th:nth-child(10), td:nth-child(10), /* Dölj Lat */
    th:nth-child(11), td:nth-child(11) { /* Dölj Lon */
        display: none;
    }
}