/* AVSP dark mode. Scoped under html.theme-dark, toggled by js/theme.js. */

:root {
    --avsp-dark-bg: #12161b;
    --avsp-dark-surface: #1e242c;
    --avsp-dark-surface-alt: #262d37;
    --avsp-dark-border: #3a4552;
    --avsp-dark-text: #e8ecf1;
    --avsp-dark-text-muted: #a8b3c0;
    --avsp-dark-link: #ff8a94;
    --avsp-dark-link-hover: #ffb0b8;
}

/* Card surface for the shared max-width:900 content wrapper (see
   modernize.css). In dark mode this matches the nested-table background
   exactly, so the two read as one seamless card instead of two shades. */
html.theme-dark .avsp-page-body > div[style*="max-width:900"] {
    background: var(--avsp-dark-surface);
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.5);
}

html.theme-dark body {
    background-color: var(--avsp-dark-bg) !important;
    color: var(--avsp-dark-text);
}

html.theme-dark .avsp-shell {
    background-color: #000 !important;
}

html.theme-dark .avsp-page-body {
    color: var(--avsp-dark-text);
}

html.theme-dark .avsp-page-body a {
    color: var(--avsp-dark-link);
}

html.theme-dark .avsp-page-body a:hover,
html.theme-dark .avsp-page-body a:focus {
    color: var(--avsp-dark-link-hover);
}

/* Bootstrap 3 components used across AVSP pages */
html.theme-dark .table {
    color: var(--avsp-dark-text);
}

/* Bootstrap 3's bootstrap.css sets ".table .table { background-color: #fff }"
   to set nested tables apart from their parent table. AVSP nests tables
   heavily for layout (e.g. Member.cshtml), so this repaints every nested
   table white regardless of theme unless overridden here. */
html.theme-dark .table .table {
    background-color: var(--avsp-dark-surface);
}

html.theme-dark .table > thead > tr > th,
html.theme-dark .table > tbody > tr > td,
html.theme-dark .table > tbody > tr > th,
html.theme-dark .table > tfoot > tr > td,
html.theme-dark .table-bordered,
html.theme-dark .table-bordered > thead > tr > th,
html.theme-dark .table-bordered > tbody > tr > td {
    border-color: var(--avsp-dark-border);
}

html.theme-dark .table-striped > tbody > tr:nth-of-type(odd) {
    background-color: var(--avsp-dark-surface-alt);
}

/* modernize.css stripes/hovers every .table with light-mode rgba tints;
   redo both in light-on-dark for visibility against a dark surface. */
html.theme-dark .table > tbody > tr:nth-of-type(odd) {
    background-color: rgba(255, 255, 255, 0.04);
}

html.theme-dark .table > tbody > tr:hover {
    background-color: rgba(255, 138, 148, 0.1);
}

html.theme-dark .panel,
html.theme-dark .panel-default {
    background-color: var(--avsp-dark-surface);
    border-color: var(--avsp-dark-border);
}

html.theme-dark .panel-heading {
    background-color: var(--avsp-dark-surface-alt);
    border-color: var(--avsp-dark-border);
    color: var(--avsp-dark-text);
}

html.theme-dark .panel-body,
html.theme-dark .panel-footer {
    background-color: var(--avsp-dark-surface);
    color: var(--avsp-dark-text);
}

html.theme-dark .well {
    background-color: var(--avsp-dark-surface);
    border-color: var(--avsp-dark-border);
    color: var(--avsp-dark-text);
}

html.theme-dark .form-control,
html.theme-dark select,
html.theme-dark textarea,
html.theme-dark input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="image"]):not([type="hidden"]) {
    background-color: var(--avsp-dark-surface);
    border-color: var(--avsp-dark-border);
    color: var(--avsp-dark-text);
}

html.theme-dark .form-control::placeholder {
    color: var(--avsp-dark-text-muted);
}

html.theme-dark input[type="submit"] {
    background-color: var(--brand);
    border-color: var(--brand);
    color: #fff;
}

html.theme-dark input[type="submit"]:hover,
html.theme-dark input[type="submit"]:focus {
    background-color: var(--brand-dark);
    border-color: var(--brand-dark);
}

html.theme-dark input[type="button"],
html.theme-dark input[type="reset"],
html.theme-dark .btn-default,
html.theme-dark button:not(.btn):not(.theme-toggle):not(.navbar-toggle):not(:has(> i:only-child)) {
    background-color: var(--avsp-dark-surface-alt);
    border-color: var(--avsp-dark-border);
    color: var(--avsp-dark-text);
}

html.theme-dark button:not(.btn):has(> i:only-child) {
    background: transparent;
    border-color: transparent;
    color: var(--avsp-dark-link);
}

html.theme-dark button:not(.btn):has(> i:only-child):hover {
    color: var(--avsp-dark-link-hover);
}

html.theme-dark .modal-content {
    background-color: var(--avsp-dark-surface);
    color: var(--avsp-dark-text);
}

html.theme-dark .dropdown-menu {
    background-color: var(--avsp-dark-surface);
    border-color: var(--avsp-dark-border);
}

html.theme-dark .dropdown-menu > li > a {
    color: var(--avsp-dark-text);
}

html.theme-dark .dropdown-menu > li > a:hover,
html.theme-dark .dropdown-menu > li > a:focus {
    background-color: var(--avsp-dark-surface-alt);
    color: #ffffff;
}

/* Theme toggle button, sits in the navbar */
.theme-toggle {
    background: transparent;
    border: 0;
    color: #f5f7fa;
    font-size: 16px;
    padding: 15px;
    line-height: 20px;
    display: inline-block;
    cursor: pointer;
}

.theme-toggle:hover,
.theme-toggle:focus {
    color: #ffffff;
    text-decoration: none;
    outline: none;
}