/* Theme and UI styles extracted from _Layout.cshtml */

.flag-icon { width: 24px; height: 16px; display: inline-block; }
.flag-btn { padding: .25rem .4rem; }
.brand-logo { height: 19px; }

/* Dark mode basic overrides */
.dark-mode body, .dark-mode .container { background-color: #121212; color: #e6e6e6; }
.dark-mode .navbar, .dark-mode .navbar-light { background-color: #1f1f1f !important; }
.dark-mode .nav-link { color: rgba(255,255,255,0.85) !important; }
.dark-mode .dropdown-menu { background-color: #2a2a2a; color: #e6e6e6; }
.dark-mode .dropdown-item { color: #e6e6e6; }
.dark-mode .dropdown-item.active, .dark-mode .dropdown-item:active { background-color: #3a3a3a; }
.dark-mode .footer, .dark-mode .footer a { color: #cfcfcf !important; }
.dark-mode .btn-outline-secondary { color: #e6e6e6; border-color: #555; }
.dark-mode a { color: #8ab4f8; }

/* Navbar Toggle Icon für Dark Mode */
.dark-mode .navbar-toggler {
  border-color: rgba(255,255,255,0.3);
}

.dark-mode .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(255, 255, 255, 0.85)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

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

.dark-mode .navbar-toggler:focus {
  box-shadow: 0 0 0 0.25rem rgba(255,255,255,0.15);
}

/* Ensure body background follows html class when CSS loaded */
:root.dark-mode body { background-color: #121212; }

/* Theme toggle button */
.theme-toggle { width: 38px; height: 34px; display:flex; align-items:center; justify-content:center; }

/* Component-specific dark variants */

/* Tables */
.dark-mode table, .dark-mode .table {
  color: #e6e6e6;
  background-color: transparent;
  border-color: #2b2b2b;
}
.dark-mode .table thead th {
  color: #e6e6e6;
  background-color: #1e1e1e;
  border-bottom-color: #333;
}
.dark-mode .table tbody td, .dark-mode .table tbody th {
  border-top-color: #2a2a2a;
}
.dark-mode .table-striped > tbody > tr:nth-of-type(odd) {
  background-color: rgba(255,255,255,0.02);
}
.dark-mode .table-hover tbody tr:hover {
  background-color: rgba(255,255,255,0.04);
}

/* Forms and inputs */
.dark-mode .form-control,
.dark-mode input[type="text"],
.dark-mode input[type="email"],
.dark-mode input[type="password"],
.dark-mode textarea {
  background-color: #1e1e1e;
  color: #e6e6e6;
  border: 1px solid #333;
}
.dark-mode .form-control:focus {
  background-color: #1e1e1e;
  color: #fff;
  border-color: #444;
  box-shadow: 0 0 0 0.2rem rgba(138,180,248,0.12);
}

/* Cards */
.dark-mode .card {
  background-color: #1c1c1c;
  border-color: #2b2b2b;
  color: #e6e6e6;
}
.dark-mode .card-header, .dark-mode .card-footer {
  background-color: #161616;
  color: #e6e6e6;
  border-color: #262626;
}

/* Modals */
.dark-mode .modal-backdrop {
  background-color: rgba(0,0,0,0.7) !important;
}
.dark-mode .modal-content {
  background-color: #1f1f1f;
  color: #e6e6e6;
  border-color: #333;
}
.dark-mode .modal-header, .dark-mode .modal-footer {
  border-color: #2b2b2b;
}

/* Buttons - primary keep contrast */
.dark-mode .btn-primary {
  background-color: #0b5ed7;
  border-color: #0b5ed7;
  color: #ffffff;
}
.dark-mode .btn-outline-primary {
  color: #9ec8ff;
  border-color: #2b2b2b;
}

/* Alerts */
.dark-mode .alert {
  background-color: #1e1e1e;
  color: #e6e6e6;
  border-color: #2b2b2b;
}

/* Pre/code blocks */
.dark-mode pre, .dark-mode code {
  background-color: #0f1415;
  color: #d6f1ff;
  border-radius: 4px;
}

/* Pagination */
.dark-mode .page-item.active .page-link {
  background-color: #2a6fd6;
  border-color: #2a6fd6;
}
.dark-mode .page-link { color: #cfe3ff; border-color: #2b2b2b; }

/* Misc */
.dark-mode .breadcrumb-item a { color: #9ec8ff; }
.dark-mode .badge { background-color: #2a2a2a; color: #e6e6e6; border: 1px solid #333; }

/* Ensure contrast for tables in forms and datatables */
.dark-mode .dataTables_wrapper .dataTables_filter input,
.dark-mode .dataTables_wrapper .dataTables_length select {
  background-color: #1e1e1e; color: #e6e6e6; border-color: #333;
}

/* End of theme.css */