/*
    Citrus - light theme for Conference Management.

    Light theme in bright orange - a pale zest ground with a burnt tangerine accent.

    Only the custom properties below differ from the other themes; everything after them is the
    shared overlay body, kept identical so a theme can never drift from the rest. The selectors
    there are pitched above the scoped layout rules they restate - see default.css for why.

    Registered in dbo.CSSOptions as 'Citrus' -> 'css/themes/citrus.css'.
*/

:root {
    color-scheme: light;

    --cm-bg: #fffaf2;
    --cm-surface: #ffffff;
    --cm-raised: #ffeed6;
    --cm-text: #3b2a15;
    --cm-muted: #7a6242;
    --cm-border: #f2ddbd;
    --cm-accent: #b35f06;
    --cm-accent-hover: #8f4b04;
    --cm-accent-text: #ffffff;
    --cm-link: #a85808;
    --cm-focus: #e8973a;
    --cm-ok: #2f8f4e;
    --cm-sidebar-from: #6b3a05;
    --cm-sidebar-to: #c4780f;
    --cm-sidebar-top: #482703;
    --cm-sidebar-top-border: #8a4f08;
    --cm-sidebar-top-text: #ffffff;
    --cm-sidebar-hover: rgba(255, 255, 255, 0.14);
    --cm-sidebar-active: rgba(255, 255, 255, 0.24);
    --cm-bad: #c62828;

    /* Bootstrap reads these, so components we never touch inherit the theme too. */
    --bs-body-bg: var(--cm-bg);
    --bs-body-color: var(--cm-text);
    --bs-secondary-color: var(--cm-muted);
    --bs-border-color: var(--cm-border);
    --bs-emphasis-color: var(--cm-text);
    --bs-link-color: var(--cm-link);
    --bs-link-hover-color: var(--cm-accent-hover);
    --bs-heading-color: var(--cm-text);
}

html,
body {
    background-color: var(--cm-bg);
    color: var(--cm-text);
}

h1, h2, h3, h4, h5, h6 {
    color: var(--cm-text);
}

hr {
    border-color: var(--cm-border);
    opacity: 1;
}

a,
.btn-link {
    color: var(--cm-link);
}

a:hover,
.btn-link:hover {
    color: var(--cm-accent-hover);
}

/* ---- Layout ------------------------------------------------------------ */

/* Beats the scoped `.sidebar[b-xxxxxxxxxx]`, (0,2,0). This is (0,2,1). */
body .page > .sidebar {
    background-image: linear-gradient(180deg, var(--cm-sidebar-from) 0%, var(--cm-sidebar-to) 100%);
}

/* The brand block at the top of the sidebar. Beats the scoped `.top-row[b-xxxxxxxxxx]`,
   (0,2,0). This is (0,2,1). */
body .sidebar > .top-row {
    background-color: var(--cm-sidebar-top);
    border-bottom: 1px solid var(--cm-sidebar-top-border);
}

body .sidebar .navbar-brand {
    color: var(--cm-sidebar-top-text);
}

/* Beats the scoped `.top-row[b-xxxxxxxxxx]`, (0,2,0). This is (0,2,2). */
body .page > main > .top-row {
    background-color: var(--cm-surface);
    border-bottom: 1px solid var(--cm-border);
}

body article.content {
    background-color: var(--cm-bg);
    color: var(--cm-text);
}

/* Beats the scoped `.nav-item[b-xxxxxxxxxx] .nav-link`, (0,3,0). This is (0,3,1). */
body .sidebar .nav-item .nav-link {
    color: rgba(255, 255, 255, 0.85);
}

/* Beats the scoped `.nav-item[b-xxxxxxxxxx] .nav-link:hover`, (0,4,0). This is (0,4,1). */
body .sidebar .nav-item .nav-link:hover {
    color: #ffffff;
    background-color: var(--cm-sidebar-hover);
}

/* Beats the scoped `.nav-item[b-xxxxxxxxxx] a.active`, (0,3,1). This is (0,4,2). */
body .sidebar .nav-item a.nav-link.active {
    color: #ffffff;
    background-color: var(--cm-sidebar-active);
}

/* ---- Buttons ----------------------------------------------------------- */

.btn-primary {
    color: var(--cm-accent-text);
    background-color: var(--cm-accent);
    border-color: var(--cm-accent);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    color: var(--cm-accent-text);
    background-color: var(--cm-accent-hover);
    border-color: var(--cm-accent-hover);
}

.btn-secondary {
    color: var(--cm-text);
    background-color: var(--cm-raised);
    border-color: var(--cm-border);
}

.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus {
    box-shadow: 0 0 0 0.1rem var(--cm-surface), 0 0 0 0.25rem var(--cm-focus);
}

/* ---- Forms ------------------------------------------------------------- */

.form-control,
.form-select {
    background-color: var(--cm-surface);
    color: var(--cm-text);
    border-color: var(--cm-border);
}

.form-control:focus,
.form-select:focus {
    background-color: var(--cm-surface);
    color: var(--cm-text);
    border-color: var(--cm-accent);
}

.form-control::placeholder {
    color: var(--cm-muted);
}

.form-floating > label {
    color: var(--cm-muted);
}

.form-check-input {
    background-color: var(--cm-surface);
    border-color: var(--cm-border);
}

.form-check-input:checked {
    background-color: var(--cm-accent);
    border-color: var(--cm-accent);
}

.darker-border-checkbox.form-check-input {
    border-color: var(--cm-muted);
}

/* ---- Panels, tables, validation ---------------------------------------- */

.card,
.list-group-item {
    background-color: var(--cm-surface);
    color: var(--cm-text);
    border-color: var(--cm-border);
}

/* The user name and password rule boxes on the account pages. */
.alert-secondary {
    background-color: var(--cm-raised);
    color: var(--cm-text);
    border-color: var(--cm-border);
}

.table {
    --bs-table-bg: var(--cm-surface);
    --bs-table-color: var(--cm-text);
    --bs-table-border-color: var(--cm-border);
    --bs-table-striped-bg: var(--cm-raised);
    --bs-table-striped-color: var(--cm-text);
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--cm-ok);
}

.invalid {
    outline: 1px solid var(--cm-bad);
}

.validation-message,
.text-danger {
    color: var(--cm-bad) !important;
}