@import "reset.css";
@import "layout.css";
@import "button.css";
@import "table.css";
@import "form.css";
@import "toast.css";
@import "editor.css";
@import "dialog.css";
@import "tabs.css";
@import "dashboard.css";
@import "filter_select.css";
@import "tooltip.css";

:root {
    --clr-text: rgb(12, 26, 61);
    --clr-text-weaker: rgb(102, 118, 128);
    --clr-text-success: rgb(64, 210, 35);
    --clr-text-error: rgb(210, 64, 35);
    --clr-text-warning: rgb(219, 161, 0);
    --clr-text-danger: rgb(178, 48, 21);
    --clr-text-success: rgb(17, 118, 39);
    --clr-text-neutral: rgb(85, 89, 93);
    --clr-text-accent: rgb(255, 255, 255);
    --clr-shadow-success: rgb(64 210 35 / 0.2);
    --clr-shadow-error: rgb(210 64 35 / 0.2);
    --clr-accent: rgb(53, 89, 199);
    --clr-background: rgb(250, 251, 251);
    --clr-surface: rgb(255, 255, 255);
    --clr-surface-raised: rgb(250, 251, 251);
    --clr-nav-surface: rgb(255, 255, 255);
    --clr-nav-hover: rgb(246, 248, 248);
    --clr-nav-heading: rgb(143, 161, 170);
    --clr-border: rgb(216, 222, 228);
    --clr-border-strong: rgb(188, 197, 204);
    --clr-status-notification: rgb(231, 84, 54);
    --clr-status-highlight: rgb(142, 78, 198);
    --clr-header: rgb(246, 248, 248);
    --clr-button: rgb(255, 255, 255);
    --clr-button-hover: rgb(246, 248, 248);
    --clr-border-hover: rgb(102, 118, 128);
    --shadow-nav: none;
    --shadow-toast: 0 0 15px 5px rgba(0, 0, 0, 0.1);
    --shadow-card: 0 0 0 1px var(--clr-border), 0 1px 5px rgba(12, 12, 12, 0.05), 0 0 40px rgba(12, 12, 12, 0.015);
}

@media (prefers-color-scheme: dark) {
    :root {
        color-scheme: dark;
        --clr-text: rgb(222, 223, 225);
        --clr-text-weaker: rgb(143, 148, 158);
        --clr-text-success: rgb(58, 203, 29);
        --clr-text-error: rgb(203, 58, 29);
        --clr-text-warning: rgb(148, 105, 0);
        --clr-text-danger: rgb(243, 126, 104);
        --clr-text-success: rgb(99, 193, 116);
        --clr-text-neutral: rgb(155, 161, 166);
        --clr-accent: rgb(42, 70, 157);
        --clr-background: rgb(24, 27, 32);
        --clr-surface: rgb(29, 32, 37);
        --clr-surface-raised: rgb(34, 37, 43);
        --clr-nav-surface: rgb(38, 41, 48);
        --clr-nav-hover: rgb(44, 49, 58);
        --clr-nav-heading: rgb(155, 155, 155);
        --clr-border: rgb(47, 52, 60);
        --clr-border-strong: rgb(61, 67, 77);
        --clr-status-notification: rgb(231, 84, 54);
        --clr-status-highlight: rgb(142, 78, 198);
        --clr-header: rgb(38, 41, 48);
        --clr-button: rgb(29, 32, 37);
        --clr-button-hover: rgb(38, 41, 48);
        --clr-border-hover: rgb(143, 148, 158);
        --shadow-nav: 0 0 0 1px var(--clr-border), 0 5px 17px rgba(0, 0, 0, 0.24);
        --shadow-toast: 0 0 0 1px var(--clr-border), 0 5px 17px rgba(0, 0, 0, 0.24);
        --shadow-card: 0 0 0 1px var(--clr-border), 0 1px 5px rgba(0, 0, 0, 0.15);
    }
}

body {
    font-family: sans-serif;
    background: var(--clr-background);
    color: var(--clr-text);
    accent-color: var(--clr-accent);
}


.badge {
    background: var(--clr-status-notification);
    color: rgb(255 255 255);
    border-radius: 100vw;
    font-size: 0.75em;
    padding: 0.125rem 0.5rem;
}

.stats {
    display: grid;
    gap: 0.25rem;
}

.stats .label {
    font-size: 0.75rem;
    color: var(--clr-nav-heading);
}

.calender-container {
    display: grid;
    grid-template-columns: repeat(7, 1fr)
}

.search-bar {
    display: grid;
    grid-template-columns: 1fr auto;
    padding: 0.5rem;
}

.search-bar input[type="search"]::before {
    content: '🔍';
    display: block;
}

.search-bar select {
    border-radius: 0 100vw 100vw 0;
}

.notice {
    display: flex;
    justify-content: center;
}

.subtext {
    font-size: 0.75rem;
    color: var(--clr-nav-heading);
}