/* Dark mode styles for AllHam application */

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

/* Text colors */
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6,
body.dark-mode p,
body.dark-mode span,
body.dark-mode div,
body.dark-mode li,
body.dark-mode label,
body.dark-mode strong,
body.dark-mode small {
    color: #e0e0e0;
}

/* Links */
body.dark-mode a:not(.btn):not(.nav-link) {
    color: #64b5f6;
}

body.dark-mode a:not(.btn):not(.nav-link):hover {
    color: #90caf9;
}

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

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

body.dark-mode .navbar-dark .nav-link.active {
    color: #ffffff;
    font-weight: bold;
}

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

body.dark-mode .card-header {
    background-color: #2a2a2a;
    border-bottom-color: #333;
    color: #e0e0e0;
}

body.dark-mode .card-body {
    background-color: #1e1e1e;
    color: #e0e0e0;
}

body.dark-mode .card-title {
    color: #e0e0e0;
}

body.dark-mode .card-text {
    color: #e0e0e0;
}

/* Primary color elements */
body.dark-mode .bg-primary {
    background-color: #0d47a1 !important;
}

body.dark-mode .btn-primary {
    background-color: #0d47a1;
    border-color: #0d47a1;
}

body.dark-mode .btn-primary:hover {
    background-color: #1565c0;
    border-color: #1565c0;
}

/* Success color elements */
body.dark-mode .bg-success {
    background-color: #2e7d32 !important;
}

body.dark-mode .btn-success {
    background-color: #2e7d32;
    border-color: #2e7d32;
}

body.dark-mode .btn-success:hover {
    background-color: #388e3c;
    border-color: #388e3c;
}

/* Info color elements */
body.dark-mode .bg-info {
    background-color: #0277bd !important;
}

body.dark-mode .btn-info {
    background-color: #0277bd;
    border-color: #0277bd;
    color: white;
}

body.dark-mode .btn-info:hover {
    background-color: #0288d1;
    border-color: #0288d1;
}

/* Warning color elements */
body.dark-mode .bg-warning {
    background-color: #f57f17 !important;
}

body.dark-mode .btn-warning {
    background-color: #f57f17;
    border-color: #f57f17;
    color: white;
}

body.dark-mode .btn-warning:hover {
    background-color: #f9a825;
    border-color: #f9a825;
}

/* Danger color elements */
body.dark-mode .bg-danger {
    background-color: #c62828 !important;
}

body.dark-mode .btn-danger {
    background-color: #c62828;
    border-color: #c62828;
}

body.dark-mode .btn-danger:hover {
    background-color: #d32f2f;
    border-color: #d32f2f;
}

/* Light color elements */
body.dark-mode .bg-light {
    background-color: #2a2a2a !important;
    color: #e0e0e0;
}

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

body.dark-mode .text-primary {
    color: #64b5f6 !important;
}

body.dark-mode .text-success {
    color: #81c784 !important;
}

body.dark-mode .text-info {
    color: #4fc3f7 !important;
}

body.dark-mode .text-warning {
    color: #ffb74d !important;
}

body.dark-mode .text-danger {
    color: #e57373 !important;
}

body.dark-mode .text-muted {
    color: #9e9e9e !important;
}

/* Forms */
body.dark-mode .form-control,
body.dark-mode .form-select {
    background-color: #333;
    border-color: #444;
    color: #e0e0e0;
}

body.dark-mode .form-control:focus,
body.dark-mode .form-select:focus {
    background-color: #3a3a3a;
    border-color: #555;
    color: #ffffff;
}

body.dark-mode .form-label {
    color: #e0e0e0;
}

/* Alerts */
body.dark-mode .alert {
    background-color: #2a2a2a;
    border-color: #333;
    color: #e0e0e0;
}

body.dark-mode .alert-success {
    background-color: rgba(46, 125, 50, 0.2);
    border-color: #2e7d32;
    color: #e0e0e0;
}

body.dark-mode .alert-info {
    background-color: rgba(2, 119, 189, 0.2);
    border-color: #0277bd;
    color: #e0e0e0;
}

body.dark-mode .alert-warning {
    background-color: rgba(245, 127, 23, 0.2);
    border-color: #f57f17;
    color: #e0e0e0;
}

body.dark-mode .alert-danger {
    background-color: rgba(198, 40, 40, 0.2);
    border-color: #c62828;
    color: #e0e0e0;
}

/* Make sure all text in alerts is visible */
body.dark-mode .alert p,
body.dark-mode .alert h1,
body.dark-mode .alert h2,
body.dark-mode .alert h3,
body.dark-mode .alert h4,
body.dark-mode .alert h5,
body.dark-mode .alert h6,
body.dark-mode .alert span,
body.dark-mode .alert div {
    color: #e0e0e0;
}

/* Tables */
body.dark-mode .table {
    color: #e0e0e0;
    background-color: #2a2a2a;
    border-color: #444;
}

body.dark-mode .table th {
    color: #ffffff;
    background-color: #333;
    border-color: #444;
}

body.dark-mode .table td {
    color: #e0e0e0;
    border-color: #444;
}

body.dark-mode .table-striped > tbody > tr:nth-of-type(odd) {
    background-color: #222;
    color: #e0e0e0;
}

body.dark-mode .table-striped > tbody > tr:nth-of-type(even) {
    background-color: #2a2a2a;
    color: #e0e0e0;
}

/* Ensure all table cells are visible in dark mode */
body.dark-mode .table tbody tr td {
    color: #e0e0e0;
}

body.dark-mode .table-hover > tbody > tr:hover {
    background-color: #333;
}

/* Fix for table header in dark mode */
body.dark-mode .table thead th {
    background-color: #0277bd;
    color: white;
    border-color: #0288d1;
}

/* Fix for table-info in dark mode */
body.dark-mode .table-info,
body.dark-mode .table-info > th,
body.dark-mode .table-info > td {
    background-color: #0277bd;
    color: white;
}

body.dark-mode .table > thead.table-info > tr > th {
    background-color: #0277bd;
    color: white;
    border-color: #0288d1;
}

/* List groups */
body.dark-mode .list-group-item {
    background-color: #1e1e1e;
    border-color: #333;
    color: #e0e0e0;
}

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

/* Badges */
body.dark-mode .badge {
    color: #ffffff;
}

/* Footer */
body.dark-mode footer {
    background-color: #1e1e1e !important;
    color: #e0e0e0;
}

body.dark-mode footer a {
    color: #64b5f6;
}

body.dark-mode footer a:hover {
    color: #90caf9;
}

/* Accordion */
body.dark-mode .accordion-item {
    background-color: #1e1e1e;
    border-color: #333;
}

body.dark-mode .accordion-button {
    background-color: #2a2a2a;
    color: #e0e0e0;
}

body.dark-mode .accordion-button:not(.collapsed) {
    background-color: #333;
    color: #ffffff;
}

body.dark-mode .accordion-button::after {
    filter: invert(1);
}

body.dark-mode .accordion-body {
    background-color: #1e1e1e;
    color: #e0e0e0;
}

/* Jumbotron */
body.dark-mode .jumbotron {
    background-color: #2a2a2a;
    color: #e0e0e0;
    padding: 2rem;
    border-radius: 0.3rem;
}

body.dark-mode .jumbotron h1,
body.dark-mode .jumbotron .lead,
body.dark-mode .jumbotron p,
body.dark-mode .jumbotron ul,
body.dark-mode .jumbotron li {
    color: #e0e0e0;
}

/* Code blocks */
body.dark-mode pre,
body.dark-mode code {
    background-color: #2a2a2a;
    color: #e0e0e0;
    border-color: #333;
}

/* Abeceda items */
body.dark-mode .abeceda-item {
    background-color: #2a2a2a;
    border-color: #333;
    color: #e0e0e0;
    padding: 8px;
    margin-bottom: 5px;
    border-radius: 4px;
}

/* Mode toggle button */
.mode-toggle {
    cursor: pointer;
    padding: 0.5rem;
    margin-left: 1rem;
    border-radius: 50%;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s;
}

.mode-toggle:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

body.dark-mode .mode-toggle .fa-sun {
    display: inline-block;
}

body.dark-mode .mode-toggle .fa-moon {
    display: none;
}

.mode-toggle .fa-sun {
    display: none;
}

.mode-toggle .fa-moon {
    display: inline-block;
}

/* Visualization elements */
body.dark-mode #wave-visualization {
    background-color: #2a2a2a;
    border-color: #444;
    border-radius: 4px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

body.dark-mode #wave-info {
    background-color: rgba(255, 255, 255, 0.1);
    color: #e0e0e0;
}

/* Canvas elements (for backward compatibility) */
body.dark-mode canvas {
    background-color: #2a2a2a;
    border-color: #333;
    border-radius: 4px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}