/**
 * Component Overrides CSS
 * Theme-aware Overrides fuer Bootstrap / Standard-Komponenten
 * Nutzt CSS-Variablen aus theme-variables.css
 */

/* ============================================
   BODY & LAYOUT
   ============================================ */
body {
  background-color: var(--bg-body) !important;
  color: var(--text-primary) !important;
}

[data-bs-theme="light"] body {
  background-image: none !important;
}

[data-bs-theme="light"] body::after {
  content: none !important;
}

#main-wrapper {
  background: var(--bg-page);
}

.page-wrapper {
  background: transparent;
}

.container-fluid {
  color: var(--text-primary);
}


/* ============================================
   CARDS
   ============================================ */
.card {
  background: var(--card-bg) !important;
  border: 1px solid var(--card-border) !important;
  box-shadow: var(--card-shadow);
  color: var(--text-primary);
}

.card-header {
  background: var(--card-header-bg) !important;
  border-bottom: 1px solid var(--card-border) !important;
  color: var(--text-primary);
}

.card-body {
  color: var(--text-primary);
}

.card-footer {
  background: var(--card-header-bg) !important;
  border-top: 1px solid var(--card-border) !important;
}

.card.bg-transparent {
  background: transparent !important;
  border-color: var(--card-border) !important;
}


/* ============================================
   FORMS
   ============================================ */
.form-control,
.form-select {
  background-color: var(--input-bg) !important;
  border-color: var(--input-border) !important;
  color: var(--input-color) !important;
}

.form-control:focus,
.form-select:focus {
  background-color: var(--input-bg-focus) !important;
  border-color: var(--input-border-focus) !important;
  color: var(--input-color) !important;
  box-shadow: 0 0 0 0.25rem rgba(99, 102, 241, 0.2) !important;
  -webkit-text-fill-color: var(--input-color) !important;
}

.form-control::placeholder {
  color: var(--input-placeholder) !important;
}

.form-control:-webkit-autofill,
.form-control:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--input-color) !important;
  -webkit-box-shadow: 0 0 0 1000px var(--input-bg) inset !important;
  background-color: var(--input-bg) !important;
}

.form-label,
label {
  color: var(--text-primary);
}

.form-text {
  color: var(--text-muted) !important;
}

.form-check-label {
  color: var(--text-primary);
}

.input-group-text {
  background-color: var(--card-header-bg);
  border-color: var(--input-border);
  color: var(--text-secondary);
}

.form-floating > label {
  color: var(--text-muted);
}

.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label {
  color: var(--text-secondary);
}


/* ============================================
   TABLES
   ============================================ */
.table {
  --bs-table-bg: var(--table-bg);
  --bs-table-color: var(--text-primary);
  --bs-table-border-color: var(--table-border);
  --bs-table-hover-bg: var(--table-hover);
  --bs-table-striped-bg: var(--table-stripe);
  color: var(--text-primary);
}

.table > thead {
  color: var(--table-header-color);
}

.table > thead > tr > th {
  background: var(--table-header-bg);
  border-bottom-color: var(--table-border);
  color: var(--table-header-color);
  font-weight: 600;
}

.table > tbody > tr > td {
  border-bottom-color: var(--table-border);
}

.table-hover > tbody > tr:hover > * {
  background-color: var(--table-hover);
  color: var(--text-primary);
}

.table-borderless > :not(caption) > * > * {
  border-bottom-color: transparent;
}

.table-sm > :not(caption) > * > * {
  color: var(--text-primary);
}


/* ============================================
   MODALS
   ============================================ */
.modal-content {
  background: var(--modal-bg) !important;
  border: 1px solid var(--modal-border) !important;
  color: var(--text-primary);
}

.modal-header {
  border-bottom-color: var(--modal-border) !important;
  color: var(--text-primary);
}

.modal-footer {
  border-top-color: var(--modal-border) !important;
}

.modal-title {
  color: var(--text-heading);
}

.modal-backdrop {
  background-color: rgba(0, 0, 0, 0.5);
}

.btn-close {
  filter: var(--bs-btn-close-white-filter, none);
}

[data-bs-theme="dark"] .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
}


/* ============================================
   DROPDOWNS
   ============================================ */
.dropdown-menu {
  background-color: var(--dropdown-bg) !important;
  border-color: var(--dropdown-border) !important;
  color: var(--dropdown-color);
  box-shadow: var(--shadow-md);
}

.dropdown-item {
  color: var(--dropdown-color) !important;
}

.dropdown-item:hover,
.dropdown-item:focus {
  background-color: var(--dropdown-hover) !important;
  color: var(--text-primary) !important;
}

.dropdown-item.active,
.dropdown-item:active {
  background-color: var(--accent-primary) !important;
  color: var(--text-on-accent) !important;
}

.dropdown-divider {
  border-color: var(--border-color);
}


/* ============================================
   BUTTONS
   ============================================ */
.btn-outline-secondary {
  color: var(--text-secondary);
  border-color: var(--border-color-strong);
}

.btn-outline-secondary:hover {
  background-color: var(--bg-surface-hover);
  color: var(--text-primary);
  border-color: var(--border-color-strong);
}

.btn-light-secondary {
  background: var(--bg-surface);
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
}

.btn-light-secondary:hover {
  background: var(--bg-surface-hover);
  color: var(--text-primary);
}


/* ============================================
   NAVIGATION
   ============================================ */
.nav-tabs {
  border-bottom-color: var(--nav-tab-border);
}

.nav-tabs .nav-link {
  color: var(--nav-tab-color);
}

.nav-tabs .nav-link:hover {
  border-color: var(--nav-tab-border) var(--nav-tab-border) transparent;
  color: var(--text-primary);
}

.nav-tabs .nav-link.active {
  color: var(--nav-tab-active-color);
  background-color: var(--nav-tab-active-bg);
  border-color: var(--nav-tab-border) var(--nav-tab-border) transparent;
}

.nav-pills .nav-link {
  color: var(--nav-tab-color);
}

.nav-pills .nav-link.active {
  background-color: var(--accent-primary);
  color: var(--text-on-accent);
}


/* ============================================
   BADGES
   ============================================ */
.badge.bg-light {
  background-color: var(--badge-muted-bg) !important;
  color: var(--badge-muted-color) !important;
}


/* ============================================
   ALERTS
   ============================================ */
.alert-info {
  background-color: var(--alert-info-bg);
  border-color: var(--alert-info-border);
  color: var(--alert-info-color);
}

.alert-success {
  background-color: var(--alert-success-bg);
  border-color: var(--alert-success-border);
  color: var(--alert-success-color);
}

.alert-warning {
  background-color: var(--alert-warning-bg);
  border-color: var(--alert-warning-border);
  color: var(--alert-warning-color);
}

.alert-danger {
  background-color: var(--alert-danger-bg);
  border-color: var(--alert-danger-border);
  color: var(--alert-danger-color);
}


/* ============================================
   PROGRESS
   ============================================ */
.progress {
  background-color: var(--bg-secondary);
}


/* ============================================
   TYPOGRAPHY HELPERS
   ============================================ */
.text-muted {
  color: var(--text-muted) !important;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--text-heading);
}

a {
  color: var(--text-link);
}

a:hover {
  color: var(--accent-primary);
}

a.text-decoration-none {
  color: var(--text-primary);
}

a.text-decoration-none:hover {
  color: var(--accent-primary);
}

code {
  background: var(--code-bg);
  color: var(--code-color);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.85em;
}

hr {
  border-color: var(--border-color);
  opacity: 1;
}


/* ============================================
   SCROLLBAR
   ============================================ */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
}

::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
}


/* ============================================
   SIDEBAR THEME OVERRIDES
   ============================================ */
.sidebar3 {
  background: var(--sidebar-bg) !important;
  border-right-color: var(--sidebar-border) !important;
}

.sidebar3-menu-link {
  color: var(--sidebar-text) !important;
}

.sidebar3-menu-link:hover {
  background: var(--sidebar-item-hover) !important;
  color: var(--sidebar-text-active) !important;
}

.sidebar3-menu-link.active {
  background: var(--sidebar-item-active) !important;
  color: var(--sidebar-text-active) !important;
}

.sidebar3-search-input {
  background: var(--input-bg) !important;
  border-color: var(--input-border) !important;
  color: var(--input-color) !important;
}

.sidebar3-search-input::placeholder {
  color: var(--input-placeholder) !important;
}

.sidebar3-section-title {
  color: var(--text-muted) !important;
}


/* ============================================
   DATATABLES OVERRIDES
   ============================================ */
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
  background-color: var(--input-bg) !important;
  border-color: var(--input-border) !important;
  color: var(--input-color) !important;
}

.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label {
  color: var(--text-muted) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
  color: var(--text-secondary) !important;
  border-color: var(--border-color) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
  background: var(--accent-primary) !important;
  color: var(--text-on-accent) !important;
  border-color: var(--accent-primary) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: var(--bg-surface-hover) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}


/* ============================================
   LIST GROUPS
   ============================================ */
.list-group-item {
  background-color: var(--card-bg);
  border-color: var(--border-color);
  color: var(--text-primary);
}

.list-group-item:hover {
  background-color: var(--bg-surface-hover);
}

.list-group-item.active {
  background-color: var(--accent-primary);
  border-color: var(--accent-primary);
  color: var(--text-on-accent);
}


/* ============================================
   ACCORDION
   ============================================ */
.accordion-item {
  background-color: var(--card-bg);
  border-color: var(--border-color);
}

.accordion-button {
  background-color: var(--card-bg);
  color: var(--text-primary);
}

.accordion-button:not(.collapsed) {
  background-color: var(--bg-surface);
  color: var(--accent-primary);
}

.accordion-body {
  background-color: var(--card-bg);
}


/* ============================================
   TOOLTIPS & POPOVERS
   ============================================ */
.tooltip-inner {
  background-color: var(--modal-bg);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
}

.popover {
  background-color: var(--modal-bg);
  border-color: var(--border-color);
}

.popover-header {
  background-color: var(--card-header-bg);
  border-bottom-color: var(--border-color);
  color: var(--text-heading);
}

.popover-body {
  color: var(--text-primary);
}


/* ============================================
   BREADCRUMBS
   ============================================ */
.breadcrumb {
  background: transparent;
}

.breadcrumb-item a {
  color: var(--text-link);
}

.breadcrumb-item.active {
  color: var(--text-muted);
}

.breadcrumb-item + .breadcrumb-item::before {
  color: var(--text-muted);
}


/* ============================================
   THEME TOGGLE BUTTON
   ============================================ */
.theme-toggle {
  position: relative;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--border-color);
  background: var(--bg-surface);
  color: var(--text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  transition: all 0.2s ease;
}

.theme-toggle:hover {
  background: var(--bg-surface-hover);
  color: var(--text-primary);
  border-color: var(--border-color-strong);
}

[data-bs-theme="dark"] .theme-toggle .theme-icon-light { display: inline; }
[data-bs-theme="dark"] .theme-toggle .theme-icon-dark  { display: none; }
[data-bs-theme="light"] .theme-toggle .theme-icon-light { display: none; }
[data-bs-theme="light"] .theme-toggle .theme-icon-dark  { display: inline; }


/* ============================================
   SIDEBAR ICON COLORS
   ============================================ */
.icon-orange  { color: #fd7e14; }
.icon-purple  { color: #6f42c1; }
.icon-teal    { color: #17a2b8; }
.icon-green   { color: #28a745; }
.icon-pink    { color: #e83e8c; }
.icon-blue    { color: #007bff; }
.icon-mint    { color: #20c997; }

.sidebar3-theme-toggle-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 12px 8px;
}


/* ============================================
   SELECT2 OVERRIDES
   ============================================ */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
  background-color: var(--input-bg) !important;
  border-color: var(--input-border) !important;
  color: var(--input-color) !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--input-color) !important;
}

.select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: var(--input-placeholder) !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
  border-color: var(--text-muted) transparent transparent transparent !important;
}

.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple {
  border-color: var(--input-border-focus) !important;
  box-shadow: 0 0 0 0.25rem rgba(99, 102, 241, 0.2) !important;
}

.select2-dropdown {
  background-color: var(--dropdown-bg) !important;
  border-color: var(--dropdown-border) !important;
}

.select2-container--default .select2-results__option {
  color: var(--dropdown-color) !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: var(--accent-primary) !important;
  color: var(--text-on-accent) !important;
}

.select2-container--default .select2-results__option[aria-selected=true] {
  background-color: var(--dropdown-hover) !important;
  color: var(--text-primary) !important;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
  background-color: var(--input-bg) !important;
  border-color: var(--input-border) !important;
  color: var(--input-color) !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
  background-color: var(--badge-muted-bg) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}


/* ============================================
   DATERANGEPICKER OVERRIDES
   ============================================ */
.daterangepicker {
  background-color: var(--dropdown-bg) !important;
  border-color: var(--dropdown-border) !important;
  color: var(--text-primary) !important;
}

.daterangepicker .calendar-table {
  background-color: var(--dropdown-bg) !important;
  border-color: var(--border-color) !important;
}

.daterangepicker td.off,
.daterangepicker td.off.in-range {
  background-color: transparent !important;
  color: var(--text-muted) !important;
}

.daterangepicker td.available:hover {
  background-color: var(--dropdown-hover) !important;
  color: var(--text-primary) !important;
}

.daterangepicker td.active,
.daterangepicker td.active:hover {
  background-color: var(--accent-primary) !important;
  color: var(--text-on-accent) !important;
}

.daterangepicker td.in-range {
  background-color: var(--accent-glow) !important;
  color: var(--text-primary) !important;
}

.daterangepicker th {
  color: var(--text-secondary) !important;
}

.daterangepicker .drp-buttons {
  border-top-color: var(--border-color) !important;
}

.daterangepicker select.monthselect,
.daterangepicker select.yearselect {
  background-color: var(--input-bg) !important;
  border-color: var(--input-border) !important;
  color: var(--input-color) !important;
}


/* ============================================
   TOAST / NOTIFICATION OVERRIDES
   ============================================ */
.toast {
  background-color: var(--card-bg);
  border-color: var(--border-color);
  color: var(--text-primary);
}

.toast-header {
  background-color: var(--card-header-bg);
  border-bottom-color: var(--border-color);
  color: var(--text-heading);
}

.toast-body {
  color: var(--text-primary);
}


/* ============================================
   OFFCANVAS OVERRIDES
   ============================================ */
.offcanvas {
  background-color: var(--modal-bg) !important;
  color: var(--text-primary);
}

.offcanvas-header {
  border-bottom-color: var(--border-color);
}

.offcanvas-title {
  color: var(--text-heading);
}


/* ============================================
   PAGINATION OVERRIDES
   ============================================ */
.page-link {
  background-color: var(--card-bg);
  border-color: var(--border-color);
  color: var(--text-secondary);
}

.page-link:hover {
  background-color: var(--bg-surface-hover);
  border-color: var(--border-color);
  color: var(--text-primary);
}

.page-item.active .page-link {
  background-color: var(--accent-primary);
  border-color: var(--accent-primary);
  color: var(--text-on-accent);
}

.page-item.disabled .page-link {
  background-color: var(--bg-surface);
  border-color: var(--border-color);
  color: var(--text-muted);
}