/* PicoCSS Overrides */
:root {
    --font-size: 14px;
    --form-element-spacing-vertical: 0.4rem;
    --form-element-spacing-horizontal: 0.6rem;
    --custom-table-background-hover: #333;
}
:where(:root) {
    cursor: unset;
}
/* Base Colors */
:root {
    --custom-table-background-hover: #DDE8E7;

    --light-green-rgb: 6, 139, 38;
    --dark-green-rgb: 5, 116, 32;

    --bright-red-rgb: 255, 0, 0;
    --light-red-rgb: 195, 53, 55;
    --dark-red-rgb: 128, 24, 26;

    --light-orange-rgb: 251, 140, 0;
    --dark-orange-rgb: 198, 113, 7;
    --light-orange: rgb(245, 160, 86);

    --dark-blue: #18232C;
    --dark-blue-a25: #18232C40;
    --darker-blue: #11191F;
    --light-gray: #A2AFB9;
    --light-gray2: #E8EBEE;
    --darker-blue2: #131C22;

    --light-gray-a25: #A2AFB93F;
    --lighter-gray: #EDF0F3;
    --gray: #BBC6CE;
}
/* Color Overrides Light Mode */
:root:not([data-theme=dark]), [data-theme=light] {
    --primary: #00A295;
    --primary-hover: #00847A;
    --primary-focus: rgba(0, 162, 149, 0.125);

    --separator-color: var(--gray);
    --value-text-color: var(--primary);
    --overlay-header-color: var(--gray);
    --custom-table-background: var(--lighter-gray);
    --card-background-color: var(--light-gray-a25);
    --card-border-color: var(--light-gray);
    --table-header-background-color: var(--light-gray-a25);
    --assignment-background-color: var(--lighter-gray);
    --popover-primary-text-color: white;
    --popover-secondary-text-color: var(--gray);
    --twin-grouped-button-background-color: var(--lighter-gray);
    --upper-navigation-footer-background-color: var(--light-gray2);
}

/* Color Overrides Dark Mode */
@media only screen and (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
        --primary: #00A295;
        --primary-hover: #00847A;
        --primary-focus: rgba(0, 162, 149, 0.125);

        --separator-color: var(--dark-blue);
        --value-text-color: var(--lighter-gray);
        --overlay-header-color: var(--dark-blue);
        --custom-table-background: var(--darker-blue);
        --custom-table-background-hover: var(--dark-blue-a25);
        --card-background-color: var(--dark-blue-a25);
        --card-border-color: var(--dark-blue);
        --table-header-background-color: var(--dark-blue);
        --assignment-background-color: rgb(20, 30, 37);
        --twin-grouped-button-background-color: #11191F80;
        --upper-navigation-footer-background-color: var(--darker-blue2);
    }
}

h1 {
    --typography-spacing-vertical: 1.5rem;
    margin-top: var(--typography-spacing-vertical)
}
h4 {
    --typography-spacing-vertical: 0.5rem;
    margin-top: var(--typography-spacing-vertical);
}
th {
    font-weight: bold;
    padding: calc(var(--spacing) / 2) calc(var(--spacing) / 4);
}
td {
    padding: calc(var(--spacing) / 4) calc(var(--spacing) / 4);
}
table {
    max-width: fit-content;
}
tbody tr:hover,
table[role=grid] tbody tr:nth-child(odd):hover {
    background-color: var(--custom-table-background-hover);
}
.container {
    padding-left: 1px;
    padding-right: 1px;
}
nav {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
}
article {
    margin: calc(var(--block-spacing-vertical) / 2) 0;
    padding: calc(var(--block-spacing-vertical) / 2) calc(var(--block-spacing-horizontal) / 2);
}
[role=button]:disabled,
button:disabled,
input[type=button]:disabled,
input[type=reset]:disabled,
input[type=submit]:disabled {
    background-color: var(--muted-color);
    border-color: var(--muted-color);
}
code {
    margin-bottom: var(--typography-spacing-vertical);
}

.site-header {
    width: 100%;
    background-color: var(--card-sectionning-background-color);
    border-bottom: var(--border-width) solid var(--card-border-color);
}

.tooltip-wrap[data-tooltip]::after,
.tooltip-wrap[data-tooltip]::before,
.tooltip-wrap[data-tooltip][data-placement="top"]::after,
.tooltip-wrap[data-tooltip][data-placement="top"]::before {
  /* Remove the nowrap constraint */
  white-space: normal;
}

@media (min-width: 576px) {
    :root {
        --font-size: 15px;
    }
    .site-header nav {
        max-width: 510px;
    }
}
@media (min-width: 768px) {
    :root {
        --font-size: 16px;
    }
    .site-header nav {
        max-width: 700px;
    }
}
@media (min-width: 992px) {
    :root {
        --font-size: 16px;
    }
    .site-header nav {
        max-width: 920px;
    }
    th {
        padding: calc(var(--spacing) / 2) calc(var(--spacing) / 2);
    }
    td {
        padding: calc(var(--spacing) / 4) calc(var(--spacing) / 2);
    }
}
@media (min-width: 1200px) {
    .site-header nav {
        max-width: 1130px;
    }
}
@media (min-width: 1600px) {
    .container, .site-header nav {
        max-width: 2000px;
        padding-left: calc(var(--spacing) * 6);
        padding-right: calc(var(--spacing) * 6);
    }
}