:root {
    color-scheme: light;
    --chrome-bg: #203c34;
    --chrome-text: #e4eee8;
    --chrome-border: #638276;
    --chrome-hover: #315348;
    --page-bg: #f6f8f7;
    --surface: #fff;
    --text: #203c34;
    --muted: #60776a;
    --border: #dce5df;
    --accent: #24735c;
    --selected-bg: #24735c;
    --soft: #eaf4ee;
    --next-bg: #f3faf5;
    --notice-bg: #fff6e4;
    --notice-text: #77551c;
}
:root[data-theme="dark"] {
    color-scheme: dark;
    --chrome-bg: var(--page-bg);
    --chrome-text: #e4eee8;
    --chrome-border: #395045;
    --chrome-hover: #294236;
    --page-bg: #111c18;
    --surface: #1b2b24;
    --text: #e1eee6;
    --muted: #a5bcae;
    --border: #395045;
    --accent: #8ed5b2;
    --selected-bg: #296b50;
    --soft: #24392e;
    --next-bg: #203b2e;
    --notice-bg: #40351f;
    --notice-text: #f1d28d;
}
body { background-color: var(--page-bg) !important; color: var(--text); }
.theme-toggle { float: left; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 40px; margin: 5px 8px; padding: 0; border: 1px solid var(--chrome-border); border-radius: 10px; background: transparent; color: var(--chrome-text); font-size: 25px; line-height: 1; }
.theme-toggle:hover, .theme-toggle:focus { background: var(--chrome-hover); color: var(--chrome-text); }
.theme-toggle:focus-visible { outline: 2px solid #a5e5c5; outline-offset: 2px; }
[data-theme="dark"] a { color: var(--accent); }
[data-theme="dark"] .navbar a, [data-theme="dark"] footer a { color: var(--chrome-text); }
[data-theme="dark"] .panel, [data-theme="dark"] .well, [data-theme="dark"] .modal-content, [data-theme="dark"] .dropdown-menu, [data-theme="dark"] .list-group-item { background: var(--surface); color: var(--text); border-color: var(--border); }
[data-theme="dark"] .form-control, [data-theme="dark"] .btn-default, [data-theme="dark"] .navbar-btn { background: var(--surface); color: var(--text); border-color: var(--border); }
[data-theme="dark"] input::placeholder { color: var(--muted); opacity: 1; }
[data-theme="dark"] .table > thead > tr > th, [data-theme="dark"] .table > tbody > tr > td, [data-theme="dark"] .table > tbody > tr > th { border-color: var(--border); }
[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd), [data-theme="dark"] .table-hover > tbody > tr:hover { background: var(--soft); }
[data-theme="dark"] .text-muted, [data-theme="dark"] small { color: var(--muted); }

.theme-toggle svg { display: block; width: 21px; height: 21px; }
.navbar.navbar-inverse, .inner-footer { background: var(--chrome-bg); border-color: var(--chrome-bg); color: var(--chrome-text); }
.navbar-inverse .navbar-brand, .navbar-inverse .navbar-nav > li > a, footer a { color: var(--chrome-text); }
.navbar-inverse .navbar-nav > li > a:hover, .navbar-inverse .navbar-nav > li > a:focus,
.navbar-inverse .navbar-toggle:hover, .navbar-inverse .navbar-toggle:focus { background: var(--chrome-hover); color: var(--chrome-text); }
.navbar-inverse .navbar-toggle, .navbar-inverse .navbar-collapse { border-color: var(--chrome-border); }
.navbar-inverse .navbar-toggle .icon-bar { background: var(--chrome-text); }

/* Keep the full fixed footer surface aligned with the shared theme. */
footer { background: var(--chrome-bg); }
.navbar .logout-button { background: #e4eee8; color: #203c34; border: 1px solid #e4eee8; border-radius: 10px; min-height: 36px; padding: 7px 14px; font-weight: bold; }
.navbar .logout-button:hover, .navbar .logout-button:focus { background: #fff; color: #15271f; border-color: #fff; }
.navbar .logout-button:focus-visible { outline: 2px solid var(--chrome-text); outline-offset: 3px; }
[data-theme="dark"] .navbar .logout-button { background: var(--surface); color: var(--text); border-color: var(--border); }
[data-theme="dark"] .navbar .logout-button:hover, [data-theme="dark"] .navbar .logout-button:focus { background: var(--chrome-hover); border-color: var(--accent); }