/* Material Design Colors */
:root {
    --primary-color: #6200ea; /* Deep Purple */
    --primary-light-color: #ff00bf; /* Light Purple #bb86fc */
    --primary-dark-color: #3700b3; /* Dark Purple #3700b3 */
    --secondary-color: #03dac6; /* Teal */
    --background-color: #ffffff; /* White */
    --surface-color: #f5f5f5; /* Light Grey */
    --error-color: #b00020; /* Red */
    --on-primary-color: #ffffff; /* White */
    --on-secondary-color: #000000; /* Black */
    --on-background-color: #000000; /* Black */
    --on-surface-color: #000000; /* Black */
    --on-error-color: #ffffff; /* White */
}

body {
    font-family: Arial, sans-serif;
    margin: 20px;
    background-color: var(--background-color);
    background-image: url(29338222.jpg);
    background-repeat: no-repeat;
}
h2 {
    color: var(--primary-dark-color);
	text-shadow: 10px 5px 2px #E6E6FA;
}
.layout {
    width: 100%;
    display: grid;
    grid-template-areas: 
        "header header header"
        "leftSide body rightSide"
        "footer footer footer";
    grid-template-columns: auto 1fr auto;
    gap: 8px;
}

.header { grid-area: header; }
.leftSide { grid-area: leftSide; }
.body { grid-area: body; }
.rightSide { grid-area: rightSide; }
.footer { grid-area: footer; }

button {
    background-color: var(--primary-color);
    color: var(--on-primary-color);
    border: none;
    padding: 12px 24px;
    margin: 8px;
    border-radius: 20px; /* Zaokrąglone rogi */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    transition: background-color 0.3s, transform 0.2s; /* Animacje */
    font-size: 16px;
}

button:hover {
    background-color: var(--primary-light-color);
    transform: translateY(-2px); /* Efekt uniesienia */
}

button:active {
    background-color: var(--primary-dark-color);
    transform: translateY(0); /* Powrót do pozycji */
}

button.selected {
    background-color: var(--primary-light-color); /* Light Purple for selected buttons */
    color: var(--on-primary-color);
}

.selectable-button.selected {
    background-color: var(--secondary-color); /* Teal for selectable buttons */
    color: var(--on-secondary-color);
}

#sequence, #driver-occurrences {
    border-collapse: collapse;
    width: 100%;
 #   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
#last-sequence {
    border-collapse: collapse;
    width: 400px;
 #   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

#sequence th, #sequence td, #last-sequence th, #last-sequence td, #driver-occurrences th, #driver-occurrences td {
    padding: 10px;
    text-align: left;
}

#sequence th, #last-sequence th, #driver-occurrences th {
    background-color: var(--surface-color);
    color: var(--on-surface-color);
    border-bottom: 2px solid var(--primary-color);
}

#sequence td, #last-sequence td, #driver-occurrences td {
    border-bottom: 1px solid var(--surface-color);
}

#sequence tr:nth-child(even), #last-sequence tr:nth-child(even), #driver-occurrences tr:nth-child(even) {
    background-color: var(--surface-color);
}

#sequence tr:hover, #last-sequence tr:hover, #driver-occurrences tr:hover {
    background-color: var(--primary-light-color);
    color: var(--on-primary-color);
}

#sequence td:last-child, #last-sequence td:last-child, #driver-occurrences td:last-child {
    color: var(--primary-color); /* Secondary color for the "Kierowca" column */
    font-weight: bold;
}

/* GM3 Material Design Table Styles */
table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border-radius: 8px; /* Zaokrąglone rogi */
    overflow: hidden;
}
.klasa {
    width: 400px;
    border-collapse: separate;
    border-spacing: 0;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border-radius: 8px; /* Zaokrąglone rogi */
    overflow: hidden;
}

th, td {
    padding: 12px 15px;
    text-align: left;
}

th {
    background-color: var(--surface-color);
    color: var(--on-surface-color);
    border-bottom: 2px solid var(--primary-color);
}

td {
    background-color: var(--background-color);
    color: var(--on-background-color);
    border-bottom: 1px solid var(--surface-color);
}

tr:nth-child(even) td {
    background-color: var(--surface-color);
}

tr:hover td {
    background-color: var(--primary-light-color);
    color: var(--on-primary-color);
}

/* Media Queries for Responsiveness */

/* Mobile Devices (max-width: 600px) */
@media (max-width: 600px) {
    .layout {
        grid-template-areas: 
            "header"
            "body"
            "leftSide"
            "rightSide"
            "footer";
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .header, .leftSide, .body, .rightSide, .footer {
        text-align: center;
    }

    button {
        width: 25%;
        margin: 10px 0;
    }

    #sequence, #last-sequence, #driver-occurrences {
        width: 100%;
        font-size: 14px;
    }

    #sequence th, #sequence td, #last-sequence th, #last-sequence td, #driver-occurrences th, #driver-occurrences td {
        padding: 8px;
    }
}

/* Tablets (max-width: 768px) */
@media (max-width: 768px) {
  /*  .layout {
        grid-template-areas: 
            "header header"
            "body body"
            "leftSide rightSide"
            "footer footer";
        grid-template-columns: 1fr 1fr;
    } */

.layout {
        grid-template-areas: 
            "header"
            "leftSide"
			"body"

        grid-template-columns: 1fr 1fr;
    }



    button {
        padding: 8px 15px;
    }

    #sequence, #last-sequence, #driver-occurrences {
        width: 100%;
        font-size: 16px;
    }
}