/* Dark theme overrides — applied via html.dark-theme class */

html.dark-theme body {
    background-color: #1a1a1a;
    background-image: none;
    color: #e0e0e0;
}

html.dark-theme .body-content {
    background-color: #242424;
    color: #e0e0e0;
}

/* Yellow secondary navbar and footer bar */
html.dark-theme .navbar-hideable,
html.dark-theme .navbar-hideable2 {
    background-color: #252100;
    border-color: #3a3500;
}

html.dark-theme .navbar-hideable p,
html.dark-theme .navbar-hideable2 p {
    color: #e0e0e0;
}

/* Invert logo so dark logo becomes light on dark background */
html.dark-theme .logo-image {
    filter: invert(1) brightness(0.9);
}

/* Side nav */
html.dark-theme #mySidenav a {
    background-color: #2a2a2a;
    color: #e0e0e0;
}

html.dark-theme #mySidenav a:hover {
    background-color: #000;
    color: rgb(255, 202, 0);
}

/* Links — keep navbar/dropdown yellow, change body links */
html.dark-theme body a {
    color: #6db3f2;
}

html.dark-theme body a:hover,
html.dark-theme body a:visited {
    color: #8ec7f7;
}

/* Preserve yellow colour on navigation links */
html.dark-theme .navbar-inverse .navbar-nav > li > a,
html.dark-theme .dropdown-menu > li > a {
    color: rgb(254, 214, 39);
}

html.dark-theme .dropdown-menu > li > a:hover,
html.dark-theme .dropdown-menu > li > a:focus {
    color: #000;
    background-color: rgb(254, 214, 39);
}

/* Panels */
html.dark-theme .panel,
html.dark-theme .panel-default {
    background-color: #2d2d2d;
    border-color: #444;
}

html.dark-theme .panel-default > .panel-heading {
    background-color: #333;
    color: #e0e0e0;
    border-bottom-color: #444;
}

html.dark-theme .panel-body {
    color: #e0e0e0;
}

html.dark-theme .panel-footer {
    background-color: #2a2a2a;
    border-top-color: #444;
}

/* Tables */
html.dark-theme .table,
html.dark-theme .table > thead > tr > th,
html.dark-theme .table > tbody > tr > td,
html.dark-theme .table > tfoot > tr > td {
    color: #e0e0e0;
    border-color: #444;
}

html.dark-theme .table-bordered {
    border-color: #444;
}

html.dark-theme .table-striped > tbody > tr:nth-of-type(odd) {
    background-color: rgba(255, 255, 255, 0.05);
}

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

html.dark-theme thead {
    background-color: #333;
}

/* Forms */
html.dark-theme .form-control {
    background-color: #333;
    color: #e0e0e0;
    border-color: #555;
}

html.dark-theme .form-control:focus {
    background-color: #3a3a3a;
    color: #e0e0e0;
    border-color: #fed627;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .3), 0 0 6px rgba(254, 214, 39, .4);
}

html.dark-theme input[type="text"],
html.dark-theme input[type="email"],
html.dark-theme input[type="password"],
html.dark-theme input[type="number"],
html.dark-theme input[type="search"],
html.dark-theme input[type="url"],
html.dark-theme textarea,
html.dark-theme select {
    background-color: #333;
    color: #e0e0e0;
    border-color: #555;
}

html.dark-theme .input-group-addon {
    background-color: #3a3a3a;
    color: #e0e0e0;
    border-color: #555;
}

html.dark-theme .selectWrapper {
    background: #333;
    border-color: #555;
}

html.dark-theme select.selectBox,
html.dark-theme .selectBox {
    background-color: #333;
    color: #e0e0e0;
}

/* Modals */
html.dark-theme .modal-content {
    background-color: #2d2d2d;
    color: #e0e0e0;
    border-color: #444;
}

html.dark-theme .modal-header {
    border-bottom-color: #444;
}

html.dark-theme .modal-header .close {
    color: #e0e0e0;
    opacity: 0.7;
}

html.dark-theme .modal-footer {
    border-top-color: #444;
    background-color: #242424;
}

/* Alerts */
html.dark-theme .alert-danger {
    background-color: #3d1515;
    border-color: #721c24;
    color: #f5c6cb;
}

html.dark-theme .alert-success {
    background-color: #153d15;
    border-color: #155724;
    color: #c3e6cb;
}

html.dark-theme .alert-info {
    background-color: #1a2f3d;
    border-color: #0c5460;
    color: #bee5eb;
}

html.dark-theme .alert-warning {
    background-color: #3d3015;
    border-color: #856404;
    color: #ffeeba;
}

/* Buttons */
html.dark-theme .btn-default {
    background-color: #3a3a3a;
    color: #e0e0e0;
    border-color: #555;
}

html.dark-theme .btn-default:hover,
html.dark-theme .btn-default:focus {
    background-color: #4a4a4a;
    color: #fff;
    border-color: #666;
}

html.dark-theme .btn-primary {
    background-color: #1a4a8a;
    border-color: #1a3a6a;
    color: #fff;
}

html.dark-theme .btn-primary:hover,
html.dark-theme .btn-primary:focus {
    background-color: #2a5a9a;
    border-color: #2a4a7a;
}

html.dark-theme .btn-danger {
    background-color: #8b1a1a;
    border-color: #6b1212;
}

html.dark-theme .btn-success {
    background-color: #1a5c1a;
    border-color: #135213;
}

html.dark-theme .btn-warning {
    background-color: #8b6914;
    border-color: #7a5c0f;
    color: #fff;
}

html.dark-theme .btn-secondary {
    background-color: #3a3a3a;
    color: #e0e0e0;
    border-color: #555;
}

html.dark-theme .btn-secondary:hover,
html.dark-theme .btn-secondary:focus {
    background-color: #4a4a4a;
    color: #fff;
    border-color: #666;
}

html.dark-theme .btn-outline-secondary {
    background-color: transparent;
    color: #ccc;
    border-color: #888;
}

html.dark-theme .btn-outline-secondary:hover {
    background-color: #3a3a3a;
    color: #e0e0e0;
    border-color: #aaa;
}

/* btn-outline-dark is invisible on dark bg — flip to light outline */
html.dark-theme .btn-outline-dark {
    color: #e0e0e0;
    border-color: #aaa;
    background-color: transparent;
}

html.dark-theme .btn-outline-dark:hover {
    background-color: #3a3a3a;
    color: #fff;
    border-color: #ccc;
}

/* Well */
html.dark-theme .well {
    background-color: #2d2d2d;
    border-color: #444;
    color: #e0e0e0;
}

/* List group */
html.dark-theme .list-group-item {
    background-color: #2d2d2d;
    border-color: #444;
    color: #e0e0e0;
}

html.dark-theme .list-group-item:hover,
html.dark-theme .list-group-item:focus {
    background-color: #383838;
    color: #e0e0e0;
}

html.dark-theme a.list-group-item {
    color: #6db3f2;
}

/* Breadcrumb */
html.dark-theme .breadcrumb {
    background-color: #2d2d2d;
    color: #aaa;
}

html.dark-theme .breadcrumb > li + li::before {
    color: #777;
}

html.dark-theme .breadcrumb > li > a {
    color: #6db3f2;
}

html.dark-theme .breadcrumb > .active {
    color: #aaa;
}

/* Tabs */
html.dark-theme .nav-tabs {
    border-bottom-color: #444;
}

html.dark-theme .nav-tabs > li > a {
    color: #aaa;
    border-color: transparent;
}

html.dark-theme .nav-tabs > li > a:hover {
    border-color: #444;
    background-color: #333;
    color: #e0e0e0;
}

html.dark-theme .nav-tabs > li.active > a,
html.dark-theme .nav-tabs > li.active > a:focus,
html.dark-theme .nav-tabs > li.active > a:hover {
    background-color: #2d2d2d;
    border-color: #444;
    border-bottom-color: #2d2d2d;
    color: #e0e0e0;
}

html.dark-theme .tab-content {
    background-color: #2d2d2d;
    border: 1px solid #444;
    border-top: none;
    padding: 15px;
    color: #e0e0e0;
}

/* Pagination */
html.dark-theme .pagination > li > a,
html.dark-theme .pagination > li > span {
    background-color: #2d2d2d;
    border-color: #444;
    color: #6db3f2;
}

html.dark-theme .pagination > li > a:hover {
    background-color: #383838;
    border-color: #555;
}

html.dark-theme .pagination > .active > a,
html.dark-theme .pagination > .active > span,
html.dark-theme .pagination > .active > a:hover,
html.dark-theme .pagination > .active > span:hover {
    background-color: #fed627;
    border-color: #fed627;
    color: #000;
}

html.dark-theme .pagination > .disabled > a,
html.dark-theme .pagination > .disabled > span {
    background-color: #222;
    border-color: #444;
    color: #666;
}

/* Badge */
html.dark-theme .badge {
    background-color: #fed627;
    color: #000;
}

/* Headings */
html.dark-theme h1,
html.dark-theme h2,
html.dark-theme h3,
html.dark-theme h4,
html.dark-theme h5,
html.dark-theme h6 {
    color: #e0e0e0;
}

html.dark-theme .text-muted {
    color: #999;
}

html.dark-theme hr {
    border-top-color: #444;
}

/* Divider in dropdowns */
html.dark-theme .dropdown-menu .divider {
    background-color: #555;
}

/* Theme toggle button in navbar — matches #lang-selection vertical alignment */
#theme-toggle {
    background: none;
    border: none;
    cursor: pointer;
    padding: 14px 10px 5px;
    font-size: 20px;
    color: rgb(254, 214, 39);
    display: block;
    line-height: 1;
}

#theme-toggle:hover {
    opacity: 0.75;
}