:root {
    color-scheme: light;
    --ac-page: #f6f5ef;
    --ac-card: #fff;
    --ac-surface: #eaf2eb;
    --ac-text: #20342d;
    --ac-link: #205345;
    --ac-border: #cddccf;
    --ac-action: #205345;
    --ac-action-text: #fff;
    --ac-focus: #996b23;
    --ac-nav: #205345;
    --ac-nav-text: #fff;
    --ac-nav-hover: #163c31;
}

:root[data-anaconda-theme="dark"] {
    color-scheme: dark;
    --ac-page: #111b18;
    --ac-card: #1b2823;
    --ac-surface: #23352d;
    --ac-text: #e1e9e3;
    --ac-link: #b0ddb4;
    --ac-border: #52685a;
    --ac-action: #b0ddb4;
    --ac-action-text: #182e24;
    --ac-focus: #e6bd70;
    --ac-nav: #17231e;
    --ac-nav-text: #f0f4eb;
    --ac-nav-hover: #294136;
}

body {
    background: var(--ac-page);
    color: var(--ac-text);
    font-family: system-ui, -apple-system, sans-serif;
}

a, a:hover, a:focus, .btn-link { color: var(--ac-link); }
h1, h2, h3, label { color: inherit; }

#navbar {
    background: var(--ac-nav);
    border-color: var(--ac-border);
    box-shadow: 0 2px 12px #111b1822;
}
#navbar .anaconda-brand {
    display: flex;
    align-items: center;
    gap: 9px;
    height: 50px;
    padding-block: 0;
    font-weight: 700;
    color: var(--ac-nav-text);
}

#navbar .anaconda-brand-icon {
    display: grid;
    place-items: center;
    top: 0;
    width: 28px;
    height: 28px;
    border: 1px solid #d3a754;
    border-radius: 8px;
    color: #f0d395;
    font-size: 13px;
}

#navbar .navbar-brand,
#navbar .navbar-nav > li > a,
#navbar .navbar-text,
#navbar .toggle-sidebar button { color: var(--ac-nav-text); }
#navbar .navbar-nav > li > a:hover,
#navbar .navbar-nav > .open > a,
#navbar .navbar-toggle:hover,
#navbar .navbar-toggle:focus { background: var(--ac-nav-hover); color: var(--ac-nav-text); }
#navbar .navbar-toggle .icon-bar { background: var(--ac-nav-text); }

#anaconda-theme-toggle {
    margin: 8px 8px;
    min-height: 26px;
    padding: 2px 8px;
    font-size: 11px;
    border: 1px solid #d3a754;
    border-radius: 999px;
    background: transparent;
    color: var(--ac-nav-text);
    font-weight: 600;
}
#anaconda-theme-toggle:hover,
:root[data-anaconda-theme="dark"] #anaconda-theme-toggle { background: var(--ac-nav-hover); }

.panel, .modal-content, .dropdown-menu, .popover, .well, .table, .list-group-item,
.form-control, .input-group-addon, .btn-default, .select2-container .select2-choice,
.select2-drop, .select2-search input, .select2-container-multi .select2-choices {
    background: var(--ac-card);
    color: var(--ac-text);
    border-color: var(--ac-border);
}

.panel-default > .panel-heading, .panel-footer, .modal-header, .modal-footer,
.table > thead > tr > th, .table-striped > tbody > tr:nth-of-type(odd),
.table-hover > tbody > tr:hover, .dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus, .btn-default:hover, .btn-default:focus,
.breadcrumb, .pagination > li > a, .pagination > li > span {
    background: var(--ac-surface);
    color: var(--ac-text);
    border-color: var(--ac-border);
}

.table > thead > tr > th, .table > tbody > tr > td, .table > tbody > tr > th {
    border-color: var(--ac-border);
}
.dropdown-menu > li > a, .list-group-item > a { color: var(--ac-link); }
.btn-primary, .btn-primary:hover, .btn-primary:focus,
.pagination > .active > a, .pagination > .active > span {
    background: var(--ac-action);
    border-color: var(--ac-action);
    color: var(--ac-action-text);
}
.btn-primary:hover { filter: brightness(0.9); }
.btn, .form-control, .panel, .modal-content { border-radius: 7px; }
:focus-visible { outline: 2px solid var(--ac-focus); outline-offset: 2px; }

:root[data-anaconda-theme="dark"] :is(
    .form-control[readonly], .form-control[disabled], fieldset[disabled] .form-control,
    .select2-container.select2-container-disabled .select2-choice,
    .select2-container.select2-container-disabled .select2-choices,
    .pagination > .disabled > a, .pagination > .disabled > span
) {
    background: var(--ac-surface);
    border-color: var(--ac-border);
    color: #afc4b6;
    opacity: 1;
}

:root[data-anaconda-theme="dark"] .select2-container .select2-default {
    color: #afc4b6 !important; /* Select2 sets its placeholder color with !important. */
}

:root[data-anaconda-theme="dark"] .select2-choice .select2-arrow {
    background: transparent;
    border-color: var(--ac-border);
}

:root[data-anaconda-theme="dark"] .empty-grid {
    background: var(--ac-surface);
    border-color: var(--ac-border);
    color: var(--ac-text);
}

@media (min-width: 768px) {
    #navbar .navbar-nav > li > a {
        padding-block: 15px;
        line-height: 20px;
    }
    #anaconda-theme-toggle {
        box-sizing: border-box;
        height: 26px;
        margin: 12px 0 12px 12px;
        line-height: 20px;
    }
}