/* ============================================
   THEME.CSS - Dark Mode & Theme Toggle
   ============================================ */

/* ============================================
   THEME TOGGLE COMPONENT
   ============================================ */

.theme-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    margin: 16px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
}

.theme-toggle:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-1px);
}

.theme-toggle:active {
    transform: translateY(0);
}

.theme-toggle-icon {
    width: 20px;
    height: 20px;
    color: rgba(255, 255, 255, 0.85);
    transition: transform 0.3s ease, opacity 0.3s ease;
    flex-shrink: 0;
}

.theme-toggle-text {
    font-size: 0.9rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.85);
}

/* Icon Visibility basierend auf Theme */
[data-theme="dark"] .theme-toggle .icon-moon {
    display: none;
}

[data-theme="dark"] .theme-toggle .icon-sun {
    display: block;
}

[data-theme="light"] .theme-toggle .icon-sun,
:root:not([data-theme]) .theme-toggle .icon-sun {
    display: none;
}

[data-theme="light"] .theme-toggle .icon-moon,
:root:not([data-theme]) .theme-toggle .icon-moon {
    display: block;
}

/* ============================================
   UTILITY CLASSES FOR STAT-CARDS
   ============================================ */

.stat-card--success {
    border-left: 4px solid var(--success-green) !important;
}

.stat-card--info {
    border-left: 4px solid var(--secondary-blue) !important;
}

.stat-card--warning {
    border-left: 4px solid var(--warning-yellow) !important;
}

.stat-card--error {
    border-left: 4px solid var(--error-red) !important;
}

.stat-card--purple {
    border-left: 4px solid #8b5cf6 !important;
}

.stat-card--indigo {
    border-left: 4px solid #6366f1 !important;
}

.stat-card--orange {
    border-left: 4px solid var(--accent-orange) !important;
}

/* ============================================
   DARK MODE OVERRIDES
   ============================================ */

/* Cards */
[data-theme="dark"] .card {
    background: var(--bg-card);
    border-color: var(--border-primary);
    transition: var(--theme-transition);
}

[data-theme="dark"] .card h2 {
    color: var(--text-primary);
}

[data-theme="dark"] .card-header p {
    color: var(--text-secondary);
}

/* Stat Cards */
[data-theme="dark"] .stat-card {
    background: var(--bg-card);
    border-color: var(--border-primary);
    transition: var(--theme-transition);
}

[data-theme="dark"] .stat-number {
    color: var(--text-primary);
}

[data-theme="dark"] .stat-label {
    color: var(--text-secondary);
}

/* Tables */
[data-theme="dark"] .results-table,
[data-theme="dark"] .netto-creator-table,
[data-theme="dark"] .data-table {
    background: var(--bg-card);
}

[data-theme="dark"] .results-table td,
[data-theme="dark"] .netto-creator-table td,
[data-theme="dark"] .data-table td {
    border-color: var(--border-primary);
    color: var(--text-primary);
}

[data-theme="dark"] .results-table tbody tr:nth-child(even),
[data-theme="dark"] .netto-creator-table tbody tr:nth-child(even) {
    background: var(--bg-secondary);
}

[data-theme="dark"] .results-table tbody tr:nth-child(odd),
[data-theme="dark"] .netto-creator-table tbody tr:nth-child(odd) {
    background: var(--bg-card);
}

[data-theme="dark"] .results-table tbody tr:hover,
[data-theme="dark"] .netto-creator-table tbody tr:hover {
    background: rgba(59, 130, 246, 0.15) !important;
}

[data-theme="dark"] .results-table tbody tr:hover td,
[data-theme="dark"] .netto-creator-table tbody tr:hover td {
    color: var(--secondary-blue);
}

/* Table Container */
[data-theme="dark"] .table-container {
    background: var(--bg-card);
    border: 1px solid var(--border-primary);
}

/* Form Controls */
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-input,
[data-theme="dark"] .form-select {
    background: var(--bg-input);
    border-color: var(--border-primary);
    color: var(--text-primary);
}

[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-input:focus,
[data-theme="dark"] .form-select:focus {
    border-color: var(--secondary-blue);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

[data-theme="dark"] .form-control::placeholder,
[data-theme="dark"] .form-input::placeholder {
    color: var(--text-muted);
}

/* Input Groups */
[data-theme="dark"] .input-group label {
    color: var(--text-primary);
}

/* Upload Area */
[data-theme="dark"] .upload-area {
    background: linear-gradient(135deg, rgba(30, 58, 95, 0.5) 0%, var(--bg-card) 100%);
    border-color: var(--secondary-blue);
}

[data-theme="dark"] .upload-area:hover {
    background: linear-gradient(135deg, rgba(30, 58, 95, 0.7) 0%, var(--bg-card) 100%);
}

[data-theme="dark"] .upload-area.dragover {
    background: linear-gradient(135deg, rgba(249, 115, 22, 0.15) 0%, var(--bg-card) 100%);
    border-color: var(--accent-orange);
}

[data-theme="dark"] .upload-area p {
    color: var(--text-secondary);
}

/* Messages */
[data-theme="dark"] .info-message {
    background: rgba(59, 130, 246, 0.15);
    border-color: rgba(59, 130, 246, 0.3);
    color: #93c5fd;
}

[data-theme="dark"] .success-message {
    background: rgba(16, 185, 129, 0.15);
    border-color: rgba(16, 185, 129, 0.3);
    color: #6ee7b7;
}

[data-theme="dark"] .error-message {
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.3);
    color: #fca5a5;
}

[data-theme="dark"] .warning-message {
    background: rgba(245, 158, 11, 0.15);
    border-color: rgba(245, 158, 11, 0.3);
    color: #fcd34d;
}

/* Date Range Selector & Controls */
[data-theme="dark"] .date-range-selector,
[data-theme="dark"] .netto-controls,
[data-theme="dark"] .netto-filter {
    background: var(--bg-secondary);
    border-color: var(--border-primary);
}

/* Modals */
[data-theme="dark"] .modal-overlay {
    background: rgba(0, 0, 0, 0.8);
}

[data-theme="dark"] .modal-container {
    background: var(--bg-card);
    border: 1px solid var(--border-primary);
}

[data-theme="dark"] .modal-title {
    color: var(--text-primary);
}

[data-theme="dark"] .modal-message {
    color: var(--text-secondary);
}

[data-theme="dark"] .modal-footer {
    border-top-color: var(--border-primary);
}

/* Buttons - Secondary */
[data-theme="dark"] .btn-secondary {
    background: var(--bg-tertiary);
    border-color: var(--border-primary);
    color: var(--text-primary);
}

[data-theme="dark"] .btn-secondary:hover {
    background: var(--bg-secondary);
    border-color: var(--secondary-blue);
    color: var(--secondary-blue);
}

/* Wizard Steps */
[data-theme="dark"] .wizard-steps::before {
    background: var(--border-primary);
}

[data-theme="dark"] .wizard-step {
    color: var(--text-muted);
}

[data-theme="dark"] .wizard-step::before {
    background: var(--bg-tertiary);
    color: var(--text-muted);
    border-color: var(--bg-card);
}

[data-theme="dark"] .wizard-step.active {
    color: #a5b4fc;
}

[data-theme="dark"] .wizard-step.completed {
    color: #6ee7b7;
}

[data-theme="dark"] .wizard-content h3 {
    color: var(--text-primary);
}

/* Type/Database/Campaign/Action Buttons */
[data-theme="dark"] .type-btn,
[data-theme="dark"] .database-btn,
[data-theme="dark"] .campaign-btn,
[data-theme="dark"] .action-btn {
    background: var(--bg-card);
    border-color: var(--border-primary);
    color: var(--text-primary);
}

[data-theme="dark"] .type-btn:hover,
[data-theme="dark"] .database-btn:hover,
[data-theme="dark"] .campaign-btn:hover,
[data-theme="dark"] .action-btn:hover {
    background: var(--bg-secondary);
    border-color: var(--secondary-blue);
}

[data-theme="dark"] .type-btn.selected,
[data-theme="dark"] .database-btn.selected {
    border-color: #6366f1 !important;
    background: rgba(99, 102, 241, 0.2) !important;
}

[data-theme="dark"] .campaign-btn.active,
[data-theme="dark"] .action-btn.active {
    color: white;
}

/* Comparison Summary */
[data-theme="dark"] .comparison-summary {
    background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-card) 100%);
    border-color: var(--border-primary);
}

[data-theme="dark"] .comparison-summary h3 {
    color: var(--text-primary);
}

/* Loading Overlay */
[data-theme="dark"] .loading-overlay {
    background: rgba(0, 0, 0, 0.85);
}

[data-theme="dark"] .loading-content {
    background: var(--bg-card);
    border: 1px solid var(--border-primary);
}

[data-theme="dark"] .loading-content p {
    color: var(--text-primary);
}

/* Spinner */
[data-theme="dark"] .spinner {
    border-color: var(--border-primary);
    border-top-color: var(--secondary-blue);
}

/* Progress Bar */
[data-theme="dark"] .progress-bar {
    background: var(--bg-tertiary);
}

/* Status Selection List */
[data-theme="dark"] .status-selection-list {
    background: var(--bg-secondary);
    border-color: var(--border-primary);
}

[data-theme="dark"] .status-selection-item {
    border-color: var(--border-primary);
    color: var(--text-primary);
}

/* Mapping Rows */
[data-theme="dark"] .mapping-row {
    background: var(--bg-secondary);
}

/* Log Container - bleibt dunkel auch im Light Mode */
[data-theme="dark"] .log-container {
    background: #0f172a;
    border: 1px solid var(--border-primary);
}

/* ============================================
   ADMIN / BENUTZERVERWALTUNG
   ============================================ */

[data-theme="dark"] .admin-create-section {
    background: var(--bg-secondary);
    border-color: var(--border-primary);
}

[data-theme="dark"] .admin-create-section h3 {
    color: var(--text-primary);
}

[data-theme="dark"] .permission-checkbox {
    background: var(--bg-card);
    border-color: var(--border-primary);
    color: var(--text-primary);
}

[data-theme="dark"] .permission-checkbox:hover {
    background: var(--bg-secondary);
}

[data-theme="dark"] .user-table td,
[data-theme="dark"] .user-table th {
    border-color: var(--border-primary);
}

[data-theme="dark"] .user-table tbody tr:hover {
    background: rgba(59, 130, 246, 0.1);
}

/* ============================================
   USER INFO BOX
   ============================================ */

[data-theme="dark"] .user-info-box {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15) 0%, rgba(59, 130, 246, 0.05) 100%);
    border-color: var(--secondary-blue);
}

[data-theme="dark"] .user-info-box h3 {
    color: var(--text-primary);
}

[data-theme="dark"] .user-info-box p {
    color: var(--text-secondary);
}

/* ============================================
   NETTO CREATOR TABLE SPECIFICS
   ============================================ */

[data-theme="dark"] .netto-creator-table {
    border-color: var(--border-primary);
}

[data-theme="dark"] .netto-creator-table th {
    background: linear-gradient(135deg, var(--primary-navy) 0%, #1e3a8a 100%);
}

[data-theme="dark"] .netto-summary-row {
    background: var(--bg-tertiary) !important;
}

[data-theme="dark"] .netto-summary-row td {
    color: var(--text-primary);
}

/* ============================================
   STATS SUMMARY
   ============================================ */

[data-theme="dark"] .stats-summary {
    background: var(--bg-secondary);
    border-color: var(--border-primary);
}

[data-theme="dark"] .stat-item {
    background: var(--bg-card);
    border-color: var(--border-primary);
}

[data-theme="dark"] .stat-item .label {
    color: var(--text-secondary);
}

[data-theme="dark"] .stat-item .value {
    color: var(--text-primary);
}

/* ============================================
   PROVISIONEN MODULE
   ============================================ */

[data-theme="dark"] .provision-card {
    background: var(--bg-card);
    border-color: var(--border-primary);
}

[data-theme="dark"] .provision-header {
    color: var(--text-primary);
}

[data-theme="dark"] .provision-value {
    color: var(--text-primary);
}

/* ============================================
   JOB HISTORIE
   ============================================ */

[data-theme="dark"] .job-history-table tbody tr:nth-child(even) {
    background: var(--bg-secondary);
}

[data-theme="dark"] .job-history-table tbody tr:nth-child(odd) {
    background: var(--bg-card);
}

/* ============================================
   TELEFONNUMMERN MODULE
   ============================================ */

[data-theme="dark"] .telefon-stats-grid .stat-card {
    background: var(--bg-card);
}

[data-theme="dark"] .telefon-table tbody tr:hover {
    background: rgba(59, 130, 246, 0.1);
}

/* ============================================
   SCROLLBAR STYLING (DARK MODE)
   ============================================ */

[data-theme="dark"] ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

[data-theme="dark"] ::-webkit-scrollbar-track {
    background: var(--bg-secondary);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: var(--border-secondary);
    border-radius: 5px;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: #64748b;
}

/* ============================================
   TOOLTIP DARK MODE
   ============================================ */

[data-theme="dark"] .tooltip {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--border-primary);
}

/* ============================================
   DROPDOWN/SELECT DARK MODE
   ============================================ */

[data-theme="dark"] select option {
    background: var(--bg-card);
    color: var(--text-primary);
}

/* ============================================
   LOGIN PAGE DARK MODE SUPPORT
   ============================================ */

[data-theme="dark"] .login-container {
    background: var(--bg-card);
    border: 1px solid var(--border-primary);
}

[data-theme="dark"] .login-form {
    background: var(--bg-card);
}

[data-theme="dark"] .login-form label {
    color: var(--text-primary);
}

[data-theme="dark"] .login-form input {
    background: var(--bg-input);
    border-color: var(--border-primary);
    color: var(--text-primary);
}

[data-theme="dark"] .login-form input:focus {
    border-color: var(--secondary-blue);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

[data-theme="dark"] .login-form input::placeholder {
    color: var(--text-muted);
}

[data-theme="dark"] .login-footer {
    color: var(--text-muted);
}

[data-theme="dark"] .login-error {
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.3);
    color: #fca5a5;
}

/* ============================================
   MISC DARK MODE FIXES
   ============================================ */

/* Links */
[data-theme="dark"] a {
    color: var(--secondary-blue);
}

[data-theme="dark"] a:hover {
    color: #93c5fd;
}

/* Code blocks */
[data-theme="dark"] code {
    background: var(--bg-tertiary);
    color: #f472b6;
}

/* HR */
[data-theme="dark"] hr {
    border-color: var(--border-primary);
}

/* Blockquote */
[data-theme="dark"] blockquote {
    border-left-color: var(--secondary-blue);
    background: var(--bg-secondary);
    color: var(--text-secondary);
}