/* 
 * Dark Mode Stylesheet for Hubben.net
 */

body.dark-mode {
    background-color: #121212;
    color: #e0e0e0;
}

.dark-mode a {
    color: #6fa8dc;
}

.dark-mode a:hover {
    color: #8eb7e0;
}

/* Cards */
.dark-mode .card {
    background-color: #1e1e1e;
    border-color: #2d2d2d;
    color: #e0e0e0;
}

.dark-mode .card-body,
.dark-mode .card-title,
.dark-mode .card-text,
.dark-mode .card-title a,
.dark-mode .card-title a.text-reset,
.dark-mode .card a.text-reset,
.dark-mode .card a.text-decoration-none {
    color: #e0e0e0 !important;
}

.dark-mode .card-header,
.dark-mode .card-footer {
    background-color: #2d2d2d;
    border-color: #3d3d3d;
    color: #e0e0e0;
}

.dark-mode .list-group-item {
    background-color: #1e1e1e;
    border-color: #2d2d2d;
    color: #e0e0e0;
}

.dark-mode .list-group-item-action:hover {
    background-color: #2d2d2d;
}

/* Form Elements */
.dark-mode .form-control,
.dark-mode .form-select {
    background-color: #2d2d2d;
    border-color: #3d3d3d;
    color: #e0e0e0;
}

.dark-mode .form-control:focus,
.dark-mode .form-select:focus {
    background-color: #2d2d2d;
    border-color: #6fa8dc;
    color: #e0e0e0;
}

.dark-mode .form-control::placeholder {
    color: #aaaaaa;
}

.dark-mode .form-text {
    color: #aaaaaa;
}

/* Buttons */
.dark-mode .btn-outline-primary {
    color: #6fa8dc;
    border-color: #6fa8dc;
}

.dark-mode .btn-outline-primary:hover {
    background-color: #6fa8dc;
    color: #121212;
}

.dark-mode .btn-outline-secondary {
    color: #aaaaaa;
    border-color: #aaaaaa;
}

/* Tables */
.dark-mode .table {
    --bs-table-bg: #1e1e1e;
    --bs-table-color: #e0e0e0;
    --bs-table-border-color: #3d3d3d;
    --bs-table-striped-bg: rgba(255, 255, 255, 0.05);
    --bs-table-striped-color: #e0e0e0;
    --bs-table-hover-bg: rgba(255, 255, 255, 0.075);
    --bs-table-hover-color: #e0e0e0;
    --bs-table-active-bg: rgba(255, 255, 255, 0.08);
    --bs-table-active-color: #e0e0e0;
    color: #e0e0e0;
}

.dark-mode .table > thead {
    background-color: #2d2d2d;
}

.dark-mode .table > :not(caption) > * > * {
    background-color: #1e1e1e !important;
    color: #e0e0e0 !important;
    border-color: #3d3d3d !important;
}

.dark-mode .table > tbody > .table-active > * {
    background-color: #2a2a2a !important;
}

.dark-mode .table-bordered,
.dark-mode .table-bordered th,
.dark-mode .table-bordered td {
    border-color: #3d3d3d;
}

/* Navbar */
.dark-mode .navbar-light {
    background-color: #1e1e1e !important;
}

.dark-mode .navbar-light .navbar-brand,
.dark-mode .navbar-light .navbar-nav .nav-link {
    color: #e0e0e0;
}

.dark-mode .navbar-light .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.7%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Dropdown Menus */
.dark-mode .dropdown-menu {
    background-color: #2d2d2d;
    border-color: #3d3d3d;
}

.dark-mode .dropdown-item {
    color: #e0e0e0;
}

.dark-mode .dropdown-item:hover,
.dark-mode .dropdown-item:focus {
    background-color: #3d3d3d;
    color: #e0e0e0;
}

.dark-mode .dropdown-divider {
    border-color: #3d3d3d;
}

/* Modals */
.dark-mode .modal-content {
    background-color: #1e1e1e;
    border-color: #3d3d3d;
}

.dark-mode .modal-header,
.dark-mode .modal-footer {
    border-color: #3d3d3d;
}

.dark-mode .close {
    color: #e0e0e0;
}

/* Alerts */
.dark-mode .alert-success {
    background-color: #163728;
    border-color: #204d39;
    color: #a7d7bf;
}

.dark-mode .alert-danger {
    background-color: #491c24;
    border-color: #61272f;
    color: #e9aaaa;
}

.dark-mode .alert-warning {
    background-color: #533e15;
    border-color: #6d5218;
    color: #e6d39b;
}

.dark-mode .alert-info {
    background-color: #123a41;
    border-color: #194c54;
    color: #a0d1d8;
}

/* Flash Messages */
.dark-mode .flash-success {
    background-color: #163728;
    border-color: #204d39;
    color: #a7d7bf;
}

.dark-mode .flash-error {
    background-color: #491c24;
    border-color: #61272f;
    color: #e9aaaa;
}

.dark-mode .flash-warning {
    background-color: #533e15;
    border-color: #6d5218;
    color: #e6d39b;
}

.dark-mode .flash-info {
    background-color: #123a41;
    border-color: #194c54;
    color: #a0d1d8;
}

/* Pagination */
.dark-mode .page-link {
    background-color: #2d2d2d;
    border-color: #3d3d3d;
    color: #6fa8dc;
}

.dark-mode .page-link:hover {
    background-color: #3d3d3d;
    border-color: #4d4d4d;
    color: #8eb7e0;
}

.dark-mode .page-item.active .page-link {
    background-color: #6fa8dc;
    border-color: #6fa8dc;
}

/* Footer */
.dark-mode .footer {
    background-color: #1e1e1e;
    border-top-color: #3d3d3d;
}

/* Crypto Ticker */
.dark-mode .crypto-ticker {
    background-color: #1e1e1e !important;
    border-color: #3d3d3d !important;
}

/* Text Colors */
.dark-mode .text-muted,
.dark-mode .text-secondary,
.dark-mode .text-body-secondary {
    color: #aaaaaa !important;
}

.dark-mode .text-dark,
.dark-mode .text-body,
.dark-mode .text-black {
    color: #e0e0e0 !important;
}

.dark-mode .text-primary {
    color: #6fa8dc !important;
}

/* Ensure plain paragraph/span text is always readable */
.dark-mode p,
.dark-mode span,
.dark-mode li,
.dark-mode td,
.dark-mode th,
.dark-mode label,
.dark-mode small {
    color: inherit;
}

/* Border Colors */
.dark-mode .border,
.dark-mode .border-top,
.dark-mode .border-end,
.dark-mode .border-bottom,
.dark-mode .border-start {
    border-color: #3d3d3d !important;
}

/* Background Colors */
.dark-mode .bg-light {
    background-color: #2d2d2d !important;
}

.dark-mode .bg-white {
    background-color: #1e1e1e !important;
}

.dark-mode .bg-dark {
    background-color: #121212 !important;
}

.dark-mode .notification-item.notif-unread {
    background-color: rgba(13, 110, 253, .12) !important;
}

.dark-mode .notification-item {
    border-bottom-color: #444 !important;
}

.dark-mode .message-item.msg-unread {
    background-color: rgba(13, 110, 253, .12) !important;
}

.dark-mode .message-item {
    border-bottom-color: #444 !important;
}