/**** design tokens ****/

:root {
    color-scheme: light;
    --bg: #ffffff;
    --fg: #333333;
    --quiet-fg: #777777;
    --panel-bg: #f5f5f5;
    --border-color: #cccccc;
    --hairline-color: #dddddd;
    --link-color: #337ab7;
    --link-hover-color: #23527c;
    --btn-primary-bg: #337ab7;
    --btn-primary-border: #2e6da4;
    --btn-primary-hover-bg: #286090;
    --btn-primary-hover-border: #204d74;
    --input-bg: #ffffff;
    --input-border: #cccccc;
    --input-focus-border: #66afe9;
    --input-focus-shadow: rgba(102, 175, 233, 0.6);
    --alert-success-bg: #dff0d8;
    --alert-success-border: #d6e9c6;
    --alert-success-fg: #3c763d;
    --alert-info-bg: #d9edf7;
    --alert-info-border: #bce8f1;
    --alert-info-fg: #31708f;
    --alert-warning-bg: #fcf8e3;
    --alert-warning-border: #faebcc;
    --alert-warning-fg: #8a6d3b;
    --alert-danger-bg: #f2dede;
    --alert-danger-border: #ebccd1;
    --alert-danger-fg: #a94442;
    --app-margin: 10px;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;
        --bg: #1b1b1b;
        --fg: #e0e0e0;
        --quiet-fg: #a0a0a0;
        --panel-bg: #242424;
        --border-color: #494949;
        --hairline-color: #333333;
        --link-color: #5ba3e0;
        --link-hover-color: #7ab8e8;
        --btn-primary-bg: #2e6da4;
        --btn-primary-border: #2b648f;
        --btn-primary-hover-bg: #3d80b5;
        --btn-primary-hover-border: #356e9c;
        --input-bg: #242424;
        --input-border: #494949;
        --input-focus-border: #5ba3e0;
        --input-focus-shadow: rgba(91, 163, 224, 0.6);
        --alert-success-bg: #123524;
        --alert-success-border: #1c4a30;
        --alert-success-fg: #a8e6b8;
        --alert-info-bg: #12344d;
        --alert-info-border: #1c4a66;
        --alert-info-fg: #b0d9f5;
        --alert-warning-bg: #453a10;
        --alert-warning-border: #5c4d19;
        --alert-warning-fg: #f5e6a8;
        --alert-danger-bg: #471615;
        --alert-danger-border: #61201e;
        --alert-danger-fg: #f5b8b7;
    }
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --bg: #1b1b1b;
    --fg: #e0e0e0;
    --quiet-fg: #a0a0a0;
    --panel-bg: #242424;
    --border-color: #494949;
    --hairline-color: #333333;
    --link-color: #5ba3e0;
    --link-hover-color: #7ab8e8;
    --btn-primary-bg: #2e6da4;
    --btn-primary-border: #2b648f;
    --btn-primary-hover-bg: #3d80b5;
    --btn-primary-hover-border: #356e9c;
    --input-bg: #242424;
    --input-border: #494949;
    --input-focus-border: #5ba3e0;
    --input-focus-shadow: rgba(91, 163, 224, 0.6);
    --alert-success-bg: #123524;
    --alert-success-border: #1c4a30;
    --alert-success-fg: #a8e6b8;
    --alert-info-bg: #12344d;
    --alert-info-border: #1c4a66;
    --alert-info-fg: #b0d9f5;
    --alert-warning-bg: #453a10;
    --alert-warning-border: #5c4d19;
    --alert-warning-fg: #f5e6a8;
    --alert-danger-bg: #471615;
    --alert-danger-border: #61201e;
    --alert-danger-fg: #f5b8b7;
}

/**** element styles ****/

body {
    background-color: var(--bg);
    color: var(--fg);
}

hr {
    border-color: var(--hairline-color);
    margin: 0;
}

::placeholder {
    color: var(--quiet-fg);
}

/**** header, main and footer divs ****/
.header-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 30px;
}

/**** class-based style modifiers ****/

.no-margins {
    margin: 0;
}

.with-margins {
    margin: var(--app-margin);
}

.col-centered {
    float: none;
    margin-inline: auto;
}

/* Bootstrap 5 dropped the text-justify utility; keep it for body copy. */
.text-justify {
    text-align: justify;
}

/* Django renders checkbox widgets without the form-check-input class. */
.form-check input[type="checkbox"] {
    margin-right: 0.3em;
}

/* Bootstrap 3 had has-error; keep the error affordance for form fields. */
.has-error .form-control {
    border-color: var(--alert-danger-fg);
}

/**** dark-mode-aware overrides for the Bootstrap 5 components in use ****/

a {
    color: var(--link-color);
}

a:hover,
a:focus {
    color: var(--link-hover-color);
}

.text-muted {
    color: var(--quiet-fg);
}

.alert-success {
    background-color: var(--alert-success-bg);
    border-color: var(--alert-success-border);
    color: var(--alert-success-fg);
}

.alert-info {
    background-color: var(--alert-info-bg);
    border-color: var(--alert-info-border);
    color: var(--alert-info-fg);
}

.alert-warning {
    background-color: var(--alert-warning-bg);
    border-color: var(--alert-warning-border);
    color: var(--alert-warning-fg);
}

.alert-danger {
    background-color: var(--alert-danger-bg);
    border-color: var(--alert-danger-border);
    color: var(--alert-danger-fg);
}

.btn-primary {
    background-color: var(--btn-primary-bg);
    border-color: var(--btn-primary-border);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active {
    background-color: var(--btn-primary-hover-bg);
    border-color: var(--btn-primary-hover-border);
    color: #ffffff;
}

.form-control {
    background-color: var(--input-bg);
    border-color: var(--input-border);
    color: var(--fg);
}

.form-control:focus {
    border-color: var(--input-focus-border);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px var(--input-focus-shadow);
}

.well {
    background-color: var(--panel-bg);
    border-color: var(--border-color);
}

.table-bordered,
.table-bordered > :is(thead, tbody, tfoot) > tr > :is(th, td) {
    border-color: var(--border-color);
}

.table > :is(thead, tbody) > tr > :is(th, td) {
    border-bottom-color: var(--hairline-color);
}

/**** logout button (styled as a link) ****/

.logout-form {
    display: inline;
}

.logout-link {
    background: none;
    border: 0;
    color: var(--link-color);
    cursor: pointer;
    padding: 0;
}

.logout-link:is(:hover, :focus) {
    color: var(--link-hover-color);
    text-decoration: underline;
}

/**** theme toggle link (text reflects the mode you would switch to) ****/

/* effective light (default): offer to switch to dark */
.toggle-to-light {
    display: none;
}

/* explicit dark: offer to switch to light */
:root[data-theme="dark"] .toggle-to-dark {
    display: none;
}

:root[data-theme="dark"] .toggle-to-light {
    display: inline;
}

/* auto + dark system preference: offer to switch to light */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]):not([data-theme="dark"]) .toggle-to-dark {
        display: none;
    }

    :root:not([data-theme="light"]):not([data-theme="dark"]) .toggle-to-light {
        display: inline;
    }
}

/**** printing always uses the light palette ****/

@media print {
    body {
        background: #ffffff;
        color: #000000;
    }
}