/* Shared palette for the website and Bootstrap 4 components. */
:root { color-scheme: dark; --site-bg: #0b1220; --site-surface: #101a2b; --site-raised: #18263a; --site-hover: #273d54; --site-nav-text: #c4d1df; --site-border: #304157; --site-text: #e6edf5; --site-muted: #a8b8ca; --site-accent: #72ddd0; }
html, body { background-color: var(--site-bg) !important; color: var(--site-text); }
a { color: var(--site-accent); }
a:hover { color: #acf4eb; }
.text-muted { color: var(--site-muted) !important; }
.text-dark { color: var(--site-text) !important; }
.bg-light, .bg-white, .card, .list-group-item, .modal-content, .personal-link { background-color: var(--site-surface) !important; color: var(--site-text); border-color: var(--site-border); }
#nav-placeholder, .site-header { background-color: var(--site-surface) !important; }
.site-header { border-color: var(--site-border); }
.site-header .navbar-brand, .navbar-light .navbar-brand { color: var(--site-text); }
.site-header .navbar-nav .nav-link, .navbar-light .navbar-nav .nav-link { color: var(--site-nav-text); }
.site-header .nav-link:hover, .site-header .nav-link:focus, .navbar-light .navbar-brand:hover { color: var(--site-accent); }
.navbar-light .navbar-toggler { color: var(--site-text); border-color: #61758b; }
.navbar-light .navbar-toggler-icon { filter: invert(1); }
.dropdown-menu { background: var(--site-raised); border-color: var(--site-border); }
.dropdown-item { color: var(--site-text); }
.dropdown-item:hover, .dropdown-item:focus, .list-group-item-action:hover, .list-group-item-action:focus { color: #fff; background: var(--site-hover); }
.dropdown-divider { border-color: var(--site-border); }
.section-label, .project-link { color: var(--site-accent); }
.project-card:hover, .project-card:focus { color: var(--site-text); box-shadow: 0 12px 30px #0005; border-color: #52748c; }
.preview-system { background: #16342d; color: #85d4ac; }
.preview-life { background-color: #25233e; background-image: linear-gradient(#393553 1px, transparent 1px), linear-gradient(90deg, #393553 1px, transparent 1px); }
.life-pattern i:nth-child(2), .life-pattern i:nth-child(6), .life-pattern i:nth-child(n+7) { background: #b5a4f4; }
.btn-outline-dark { color: var(--site-text); border-color: #879aaf; }
.btn-outline-dark:hover, .btn-outline-dark:focus { color: #fff; background: #304860; border-color: #a8b8ca; }
.form-control, .custom-select { color: var(--site-text); background-color: var(--site-raised); border-color: #52677e; }
.form-control:focus, .custom-select:focus { color: var(--site-text); background-color: var(--site-raised); border-color: var(--site-accent); }
.custom-select option { background: var(--site-raised); color: var(--site-text); }
.table { color: var(--site-text); }
.table td, .table th, .table thead th { border-color: var(--site-border); }

/* Keep the navbar name the same accent color in every interaction state. */
.site-header .navbar-brand,
.site-header .navbar-brand:link,
.site-header .navbar-brand:visited,
.site-header .navbar-brand:hover,
.site-header .navbar-brand:focus,
.site-header .navbar-brand:active { color: var(--site-accent); }

/* Override Bootstrap and the default navbar link color on interaction. */
.site-header .navbar-nav .nav-link:hover,
.site-header .navbar-nav .nav-link:focus,
.site-header .navbar-nav .nav-link:active,
.site-header .navbar-nav .show > .nav-link,
.site-header .dropdown-item:hover,
.site-header .dropdown-item:focus { color: var(--site-accent); }

/* Shared controls and simulation panels use the navigation palette. */
.scene-info, #boids-controls {
    color: var(--site-text);
    background: var(--site-surface);
    border-color: var(--site-border);
}
.scene-info p, .scene-info small, #boids-controls p, #boids-controls small {
    color: var(--site-muted);
}
.scene-info output, #boids-controls output, #boids-controls h1 span, #boids-controls a {
    color: var(--site-accent);
}
input[type="range"], input[type="checkbox"], input[type="radio"] { accent-color: var(--site-accent); }
.btn-primary, .btn-success, .btn-outline-light, .btn-outline-dark, .boids-actions button {
    color: var(--site-text);
    background-color: var(--site-raised);
    border-color: var(--site-border);
}
.btn-primary:hover, .btn-success:hover, .btn-outline-light:hover, .btn-outline-dark:hover,
.boids-actions button:hover {
    color: var(--site-accent);
    background-color: var(--site-hover);
    border-color: var(--site-accent);
}
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 3px solid var(--site-accent);
    outline-offset: 3px;
}

/* Bootstrap 4 resets dialog to display:block, including closed dialogs. */
dialog:not([open]) { display: none !important; }