body {
    margin: 0;
    color: #333;
    background: #F7F2EB;
}

/*umm this is the color palette i chose 8B9A6E, F7F2EB, EAE2D6, EEEEEE */

header {
    padding: 16px 24px;
    background: #EEEEEE;
    border-bottom: 2px solid #EAE2D6;
}

h1 {
    margin: 0 0 12px;
    font-size: 20px;
    color: #8B9A6E;
}

#tabs button {
    border: 0;
    background: #EAE2D6;
    color: #555;
    padding: 8px 16px;
    margin-right: 4px;
    border-radius: 4px;
    font: inherit;
    cursor: pointer;
}

#tabs button.active {
    background: #8B9A6E;
    color: #F7F2EB;
}

main {
    padding: 24px;
}

.panel {
    display: none;
}

.panel.active {
    display: block;
}

h2 {
    color: #8B9A6E;
}

label {
    display: block;
    margin: 8px 0;
}

input {
    background: #EEEEEE;
    border: 1px solid #EAE2D6;
    border-radius: 4px;
    padding: 6px 8px;
    font: inherit;
}

.row {
    display: flex;
    gap: 16px;
    align-items: center;
    margin: 6px 0;
}

.teacherSubjects {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    flex-basis: 100%;
}

.weeklyRequirementRow {
    flex-wrap: wrap;
}

button {
    background: #8B9A6E;
    color: #F7F2EB;
    border-radius: 4px;
    padding: 8px 12px;
    font: inherit;
    cursor: pointer;
    border: 0;
}

/* i wll change this later*/
label input[type="checkbox"]{
    margin-right: 4px;
}

.block {
    border: 1px solid #EAE2D6;
    border-radius: 4px;
    padding: 12px;
    margin: 8px 0;
    background: #EEEEEE;
}

.grid {
    border-collapse: collapse;
    background: #F7F2EB;
    margin: 12px 0;
}

.grid th, .grid td {
    border: 1px solid #EAE2D6;
    padding: 8px 10px;
    text-align: left;
    min-width: 90px;
}

.grid th {
    background: #EEEEEE;
    color: #8B9A6E;
}

.grid td b {
    display: block;
    font-size: 14px;
}

.grid td small {
    color: #777;
}

.breakRow td {
    background: #8B9A6E;
    color: #F7F2EB;
    text-align: center;
    font-size: 12px;
}

select {
    background: #EEEEEE;
    border: 1px solid #EAE2D6;
    border-radius: 4px;
    padding: 6px 8px;
    font: inherit;
}

.validationMessage {
    white-space: pre-line;
    padding: 12px;
    border-radius: 4px;
}

.validationMessage.error {
    color: #7a241d;
    background:#f8e5e2;
}

.validationMessage.success {
    color: #35512f;
    background: #e8f0e3;
}

.freeTeacherFinder {
    margin: 16px 0 24px;
    padding: 16px;
    border: 1px solid #EAE2D6;
    border-left: 6px solid #8B9A6E;
    border-radius: 6px;
    background: #EEEEEE;
}

.freeTeacherFinder h3 {
    margin-top: 0;
    color: #8B9A6E;
}

.freeTeacherFinder summary {
    cursor: pointer;
    color: #8B9A6E;
    font-weight: bold
}

.freeTeacherControls {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.freeTeacherControls label {
    margin: 0;
}

#freeResults {
    margin-top: 12px;
}

/* i marked things as important cause there are so many things in it*/
@media print {
    @page {
        size: landscape;
        margin: 12px;
    }

    header,
    #setupPanel,
    #generatePanel,
    .freeTeacherFinder,
    #timetablesPanel > label,
    #printTimetable {
        display: none !important;
    }

    main {
        padding: 0;
    }

    #timetablesPanel {
        display: block !important;
    }

    .grid {
        width: 100%;
        border-collapse: collapse;
        break-inside: avoid;
    }

    .grid th,
    .grid td {
        min-width: 0;
        padding: 5px;
        border: 1px solid #555;
    }

    .grid th {
        color: #111 !important;
        background: #eee !important;
    }

    .breakRow td {
        color: #111 !important;
        background: #ddd !important;
    }
}

.workloadGrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin-top: 16px;
}

.workloadCard {
    padding: 16px;
    border: 1px solid #EAE2D6;
    border-radius: 6px;
    background: #EEEEEE;
}

.workloadCard h3 {
    margin-top: 0;
    color: #8B9A6E;
}

.workloadTrack {
    height: 12px;
    overflow: hidden;
    border-radius: 6px;
    background: #EAE2D6;
}

.workloadFill {
    height: 100%;
    background: #8B9A6E;
}

.workloadCard .success {
    color: #35512f;
}

.workloadCard .error {
    color: #7a241d;
}

.setupLayout {
    display: grid;
    gap: 24px;
    align-items: start;
    grid-template-columns: 2fr 1fr;
}

.setupForm {
    min-width: 0;
}

.setupSection {
    margin-bottom: 10px;
    padding: 10px 14px;
    border: 1px solid #EAE2D6;
    border-radius: 6px;
    background: #EEEEEE;
}

.setupSection summary {
    color: #8B9A6E;
    font-weight: bold;
    cursor: pointer;
}

.setupIllustration {
    display: block;
    width: 240%;
    max-width: 850px;
    height: auto;
    justify-self: end;
    /*this blend line made it look fine*/
    mix-blend-mode: multiply;
    /*omg why am i writing such bad css*/
    transform: translateY(-70px);
    /*omg im so stupid lol*/
    /* transform: translateY(-70px); */
}

@media (max-width: 800px){
    .setupLayout {
        grid-template-columns: 1fr;
    }

    .setupIllustration {
        width: 100%;
        max-width: 500px;
        margin: auto;
    }
}