:root {
    /* BACKGROUND COLORS */
    --main-background-dark:#24242a;
    --main-background-dark1:#2C2C34;

    /* ACCENT COLORS */
    --main-accent:#9B2915;

    --accent-green:#0EAD69;
    --accent-green1:#21865a;
    --accent-red:#D72638;
    --accent-red1:#69140E;
    --accent-orange:#F17300;
    
    /* TEXT */
    --text-title-font: "monospace";
    --text-font: "Arial, Helvetica, sans-serif";

    --text-color: #ffff;
    --text-inverse: #000000;

    /* BORDERS */
    --border-radius-xs:0.2rem;
    --border-radius-s:0.4rem;
    --border-radius-m:0.8rem;
    --border-radius-l:1rem;
    --border-radius-xl:2rem;

    --border-thickness-xs:0.2rem;
    --border-thickness-s:0.5rem;
    --border-thickness-m:1rem;
    --border-thickness-l:2rem;

    /* PADDING + MARGIN */
    --padding-xs:0.2rem;
    --padding-s:0.3rem;
    --padding-m:0.6rem;
    --padding-x:1rem;

    --margin-xs:0.2rem;
    --margin-s:0.3rem;
    --margin-m:0.6rem;
    
    /* BOX SHADOW */
    --bottom-shadow: 0rem 0.5rem 1rem #000000;
}

html, body {

    padding:0rem;
    margin:0rem; 

    display: flex;
    flex-direction: column;

    background: var(--main-background-dark1);
    color: var(--text-color);
    font-family: var(--text-font);
    
}

header {

    background-color: var(--main-accent);
    font-family: var(--text-title-font);
    
    display: flex;
    justify-content: space-around;
}

.hidden-element {
    display: hidden !important;
}

/* main */
main {
    margin: var(--margin-m);
}

.searchbar-container {
    padding: var(--padding-m);
    display: flex;
    justify-content: center;
}


.searchbar-container .searchbar {
    width: 60%;
    padding: var(--padding-m);
    margin: auto var(--margin-s);

    background: var(--main-background-dark);
    color: var(--text-color);
    outline: none;
    border: var(--border-thickness-xs) solid var(--main-background-dark);
    border-radius: var(--border-radius-s);

    transition: all 0.2s ease;
}

.searchbar-container .searchbar:focus, .searchbar-container .searchbar:hover {
    transform: translateY(-0.2rem);
    border-color: var(--accent-red1);

    box-shadow: var(--bottom-shadow);
}

.searchbar-container .search-submit {
    background: var(--main-background-dark);
    color: var(--text-color);
    outline: none;
    border: var(--border-thickness-xs) solid var(--main-background-dark);
    border-radius: var(--border-radius-s);

    transition: all 0.2s ease;
}

.searchbar-container .search-submit:hover {
    background-color: var(--accent-green1);
    border-color: var(--accent-green);
    transform: translateY(-0.2rem);
    box-shadow: var(--bottom-shadow);
}

.searchbar-container .search-submit:active {
    transform: translateY(0.2rem);
    box-shadow: var(--bottom-shadow);
}
.student-table {
    width: 100%;
    border-collapse: collapse;
    background-color: var(--main-background-dark1);
    color: var(--text-color);
    font-family: var(--text-font);
    border-radius: var(--border-radius-m);
    overflow: hidden;
}

.student-table-head th {
    background-color: var(--main-background-dark);
    padding: var(--padding-m);
    text-align: left;
    font-family: var(--text-title-font);
    font-size: 1.1rem;
    border-bottom: var(--border-thickness-xs) solid var(--main-accent);
}

.student-table-row td {
    padding: var(--padding-m);
    border-bottom: var(--border-thickness-xs) solid var(--main-background-dark);
    vertical-align: top;
    font-family: var(--text-font);
}

.student-table-row:hover {
    background-color: var(--main-background-dark);
}

.student-table-row td:nth-child(4) {
    font-weight: bold;
}

.student-table-row td:nth-child(5) {
    max-width: 25rem;          
    white-space: normal;       
    word-wrap: break-word;     
    overflow-wrap: break-word; 
    line-height: 1.3rem;
}

.student-table-row td:nth-child(5).scrollable {
    max-height: 6rem;
    overflow-y: auto;
}

.student-table-row-buttons {
    display: flex;
}

.student-editBtn, .student-delBtn, .top-text-option {
    background-color: var(--main-background-dark1);
    color: var(--text-color);
    text-decoration: none;
    margin: 0rem var(--margin-xs);
    padding: var(--padding-s);
    
    border: var(--border-thickness-xs) solid var(--accent-red1);
    border-radius: var(--border-radius-s);

    transition: all 0.2s ease;
}

.nav-section {
    padding: var(--padding-m);
    display: flex;
    justify-content: center;
}

/* epic lil animation cuz satisfying ig yes yes 🦆 */
.student-editBtn:hover, .top-text-option:hover {
    background-color: var(--accent-green1);
    border-color: var(--accent-green);
    transform: translateY(-0.2rem);
    box-shadow: var(--bottom-shadow);
}

.student-editBtn:active, .top-text-option:active {
    transform: translateY(0.4rem);
    background-color: var(--accent-green);
}

.student-delBtn:hover {
    background-color: var(--accent-red1);
    border-color: var(--accent-red);
    transform: translateY(-0.2rem);
    box-shadow: var(--bottom-shadow);
}

.student-delBtn:active {
    transform: translateY(0.4rem);
}

.form-required {
    color: var(--accent-red);
}

/* aanmaken.php */

.create-student-form {
    background: var(--main-background-dark);
    padding: var(--padding-x);
    margin: var(--margin-m) auto;
    width: 40%;
    min-width: 22rem;

    border-radius: var(--border-radius-m);
    box-shadow: var(--bottom-shadow);
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.form-field {
    display: flex;
    flex-direction: column;
}

.form-field label {
    margin-bottom: var(--margin-xs);
    font-family: var(--text-title-font);
}

.create-student-form input {
    padding: var(--padding-m);
    background: var(--main-background-dark1);
    color: var(--text-color);

    border: var(--border-thickness-xs) solid var(--main-background-dark);
    border-radius: var(--border-radius-s);

    transition: all 0.2s ease;
}

.create-student-form input:focus,
.create-student-form input:hover {
    border-color: var(--accent-red1);
    transform: translateY(-0.15rem);
    box-shadow: var(--bottom-shadow);
}

.submit-btn {
    padding: var(--padding-m);
    margin-top: var(--margin-m);

    background: var(--main-background-dark1);
    color: var(--text-color);

    border:none;
    border-radius: var(--border-radius-s);

    font-family: var(--text-title-font);
    cursor: pointer;

    transition: all 0.2s ease;
}

.submit-btn:hover {
    background-color: var(--accent-green1);
    border-color: var(--accent-green);
    transform: translateY(-0.2rem);
    box-shadow: var(--bottom-shadow);
}

.submit-btn:active {
    transform: translateY(0.2rem);
}

/* verwijderen.php waarschuwing blok */

.warning-box {
    background: var(--main-background-dark);
    padding: var(--padding-x);
    margin: var(--margin-m) auto;
    width: 40%;
    min-width: 22rem;

    border-radius: var(--border-radius-m);
    box-shadow: var(--bottom-shadow);
}

.warning-header {
    color: var(--text-color);
    padding: var(--padding-m);
    text-align: center;
    font-family: var(--text-title-font);
    font-size: 1.3rem;

    border-radius: var(--border-radius-s);
    margin-bottom: var(--margin-m);
}

.warning-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.warning-form label {
    font-family: var(--text-font);
    text-align: center;
}

.warning-submit {
    padding: var(--padding-m);
    margin-top: var(--margin-m);

    background: var(--accent-red1);
    color: var(--text-color);

    border: var(--border-thickness-xs) solid var(--accent-red);
    border-radius: var(--border-radius-s);

    font-family: var(--text-title-font);
    cursor: pointer;

    transition: all 0.2s ease;
}

.warning-submit:hover {
    background-color: var(--accent-red);
    transform: translateY(-0.2rem);
    box-shadow: var(--bottom-shadow);
}

.warning-submit:active {
    transform: translateY(0.2rem);
}

/* score dingekes */
.good {
    color: var(--accent-green);
}

.decent {
    color: var(--accent-orange);
}

.bad {
    color: var(--accent-red);
}