/*
    Meadow - light theme for Conference Management.

    Loaded after ConferenceManagement.styles.css. The layout's own rules are scoped, which
    compiles them to selectors like `.sidebar[b-xxxxxxxxxx]` - one class plus one attribute,
    specificity (0,2,0). Source order alone does not beat that, and neither does `body .sidebar`
    at (0,1,1), so the rules below that restate a layout selector are pitched deliberately above
    the scoped form. Each one notes what it has to beat.

    Registered in dbo.CSSOptions as 'Meadow' -> 'css/themes/meadow.css'.
*/

:root {
    color-scheme: light;

    --cm-bg: #f2f8f3;
    --cm-surface: #ffffff;
    --cm-raised: #e5f0e8;
    --cm-text: #1f2e22;
    --cm-muted: #556b5c;
    --cm-border: #cfe2d6;
    --cm-accent: #2f7d4f;
    --cm-accent-hover: #23603c;
    --cm-accent-text: #ffffff;
    --cm-link: #256845;
    --cm-focus: #58b183;
    --cm-ok: #2f7d4f;
    --cm-sidebar-from: #1f4d33;
    --cm-sidebar-to: #3a7d55;
    --cm-sidebar-top: #132e1f;
    --cm-sidebar-top-border: #476d58;
    --cm-sidebar-top-text: #ffffff;
    --cm-sidebar-hover: rgba(255, 255, 255, 0.12);
    --cm-sidebar-active: rgba(255, 255, 255, 0.22);
    --cm-bad: #a33224;

    /* 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;
}