/* Professional Dark Theme with Purple Accent */
:root {
    /* === DESIGN TOKENS === */

    /* Border Radius – 3 levels instead of 7 arbitrary values */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;

    /* Spacing – 4px grid */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;

    /* Typography Scale – 7 levels instead of 15+ arbitrary values */
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 2rem;

    /* Base Colors */
    --clr-dark: #000000;
    --clr-light: #ffffff;

    /* Primary Colors - Purple Theme */
    --primary: #9d00ff;
    --primary-light: #ac3aff;
    --primary-lighter: #ba58ff;
    --primary-hover: #c672ff;
    --primary-soft: #d28bff;
    --primary-softer: #dca2ff;

    /* Surface Colors - Neutral Grays */
    --surface-0: #000000;
    --surface-10: #1e1e1e;
    --surface-20: #353535;
    --surface-30: #4e4e4e;
    --surface-40: #696969;
    --surface-50: #858585;

    /* Tonal Surface Colors - Purple Tinted */
    --surface-tonal-0: #170a1c;
    --surface-tonal-10: #2b2231;
    --surface-tonal-20: #423a47;
    --surface-tonal-30: #5a535f;
    --surface-tonal-40: #746d77;
    --surface-tonal-50: #8e8891;

    /* Status Colors */
    --success: #47d5a6;
    --success-dark: #22946e;
    --success-light: #9ae8ce;

    --warning: #eeb85c;
    --warning-dark: #cf8a15;
    --warning-light: #f8e0b8;

    --danger: #d94a4a;
    --danger-dark: #9c2121;
    --danger-light: #eb9e9e;

    --info: #4077d1;
    --info-dark: #21498a;
    --info-light: #92b2e5;

    /* Theme Application */
    --bg-main: var(--surface-0);
    --bg-card: var(--surface-10);
    --bg-elevated: var(--surface-20);
    --bg-hover: var(--surface-30);

    --text-primary: #ffffff;
    --text-secondary: var(--surface-50);
    --text-muted: #8e8e8e;

    --border: var(--surface-20);
    --border-light: var(--surface-30);

    --shadow: rgba(0, 0, 0, 0.5);
    --shadow-sm: rgba(0, 0, 0, 0.3);
    --shadow-lg: rgba(0, 0, 0, 0.7);
}

/* Skip to content link */
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-4);
  z-index: 9999;
  padding: var(--space-2) var(--space-4);
  background: var(--primary);
  color: #fff;
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
  transition: top 0.1s;
}
.skip-link:focus {
  top: var(--space-2);
}

[data-theme="light"] {
    /* Light Theme */
    --primary: #9d00ff;
    --primary-light: #ac3aff;
    --primary-lighter: #ba58ff;
    --primary-hover: #8a00e6;
    --primary-soft: #d28bff;
    --primary-softer: #dca2ff;

    --success: #22946e;
    --success-dark: #1a7355;
    --success-light: #47d5a6;

    --warning: #cf8a15;
    --warning-dark: #a66d11;
    --warning-light: #eeb85c;

    --danger: #9c2121;
    --danger-dark: #7a1a1a;
    --danger-light: #d94a4a;

    --info: #21498a;
    --info-dark: #1a3a6e;
    --info-light: #4077d1;

    --bg-main: #f5f5f5;
    --bg-card: #ffffff;
    --bg-elevated: #fafafa;
    --bg-hover: #eeeeee;

    --text-primary: #1e1e1e;
    --text-secondary: #696969;
    --text-muted: #5f5f5f;

    --border: #e0e0e0;
    --border-light: #d0d0d0;

    --shadow: rgba(0, 0, 0, 0.1);
    --shadow-sm: rgba(0, 0, 0, 0.05);
    --shadow-lg: rgba(0, 0, 0, 0.15);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: var(--bg-main);
    color: var(--text-primary);
    line-height: 1.6;
    min-height: 100vh;
}

/* Professional Cards */
.card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: 0 2px 8px var(--shadow-sm);
    transition: all 0.2s ease;
    overflow: hidden;
}

.card:hover {
    box-shadow: 0 4px 16px var(--shadow);
    border-color: var(--border-light);
}

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

.card-title {
    color: var(--text-primary);
    font-weight: 600;
}

/* Bessere Lesbarkeit für Card-Labels */
.card h6 {
    color: var(--surface-50) !important;
    font-weight: 500;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.card h2, .card h3, .card h4, .card h5 {
    color: var(--text-primary) !important;
}

.card .small {
    color: var(--surface-40) !important;
}

.text-secondary {
    color: var(--surface-50) !important;
}

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

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

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

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

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

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

/* Professional Buttons */
.btn {
    border-radius: var(--radius-sm);
    padding: 10px 20px;
    font-weight: 600;
    border: none;
    transition: all 0.2s ease;
    cursor: pointer;
    font-size: var(--text-sm);
}

.btn-primary {
    --bs-btn-bg: var(--primary);
    --bs-btn-border-color: var(--primary);
    --bs-btn-hover-bg: var(--primary-light);
    --bs-btn-hover-border-color: var(--primary-light);
    --bs-btn-hover-color: white;
    --bs-btn-active-bg: var(--primary);
    --bs-btn-active-border-color: var(--primary);
    --bs-btn-active-color: white;
    --bs-btn-focus-shadow-rgb: 157, 0, 255;
    background: var(--primary);
    color: white;
    box-shadow: none;
}

.btn-primary:hover {
    background: var(--primary-light);
    color: white;
}

.btn-primary:active,
.btn-primary.active {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
    color: white !important;
    box-shadow: none !important;
}

.btn-success {
    background: var(--success);
    color: white;
}

.btn-success:hover {
    background: var(--success-dark);
    color: white;
}

.btn-warning {
    background: var(--warning);
    color: var(--surface-0);
}

.btn-warning:hover {
    background: var(--warning-dark);
    color: white;
}

.btn-danger {
    background: var(--danger);
    color: white;
}

.btn-danger:hover {
    background: var(--danger-dark);
    color: white;
}

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

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

.btn-sm {
    padding: 6px 14px;
    font-size: 0.8rem;
}

.btn-outline-secondary {
    --bs-btn-hover-color: var(--text-primary);
    --bs-btn-hover-bg: var(--bg-elevated);
    --bs-btn-hover-border-color: var(--primary);
    --bs-btn-active-color: white;
    --bs-btn-active-bg: var(--primary);
    --bs-btn-active-border-color: var(--primary);
    --bs-btn-focus-shadow-rgb: 157, 0, 255;
    background: var(--bg-card);
    color: var(--text-primary);
    border: 1px solid var(--border);
    box-shadow: none;
}
.btn-outline-secondary:hover { background: var(--bg-elevated) !important; color: var(--text-primary) !important; border-color: var(--primary) !important; box-shadow: none !important; }
.btn-outline-secondary:active,
.btn-outline-secondary.active { background: var(--primary) !important; color: white !important; border-color: var(--primary) !important; box-shadow: none !important; }
.btn-check:checked + .btn-outline-secondary { background: var(--primary); color: white; border-color: var(--primary); box-shadow: none; }

/* Professional Forms */
.form-control, .form-select {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 10px 14px;
    transition: all 0.2s ease;
    background: var(--bg-card);
    color: var(--text-primary);
    font-size: 0.9rem;
}

.form-control:focus, .form-select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(157, 0, 255, 0.1);
    outline: none;
    background-color: var(--bg-card);
    color: var(--text-primary);
}

/* Input Group */
.input-group-text {
    background-color: var(--bg-elevated);
    border-color: var(--border);
    color: var(--text-primary);
}

/* Checkboxes & Switches – Dark Mode (default) */
.form-check-input {
    background-color: var(--surface-20);
    border-color: var(--surface-30);
}

.form-check-input:checked {
    background-color: var(--primary);
    border-color: var(--primary);
}

.form-check-input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(157, 0, 255, 0.15);
}

.form-check-input[type="checkbox"]:indeterminate {
    background-color: var(--primary);
    border-color: var(--primary);
}

/* Switch-Thumb Dark Mode */
.form-switch .form-check-input {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23858585'/%3e%3c/svg%3e");
}

.form-switch .form-check-input:checked {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23ffffff'/%3e%3c/svg%3e");
}

/* Checkboxes & Switches – Light Mode */
[data-theme="light"] .form-check-input {
    background-color: #ffffff;
    border-color: #adb5bd;
}

[data-theme="light"] .form-check-input:checked {
    background-color: var(--primary);
    border-color: var(--primary);
}

[data-theme="light"] .form-switch .form-check-input {
    background-color: #dee2e6;
    border-color: #dee2e6;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23ffffff'/%3e%3c/svg%3e");
}

[data-theme="light"] .form-switch .form-check-input:checked {
    background-color: var(--primary);
    border-color: var(--primary);
}

/* Browser Autofill override */
.form-control:-webkit-autofill,
.form-control:-webkit-autofill:hover,
.form-control:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px var(--bg-card) inset;
    -webkit-text-fill-color: var(--text-primary);
    caret-color: var(--text-primary);
}

.form-control::placeholder {
    color: var(--text-muted);
}

.form-label {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 6px;
    font-size: var(--text-sm);
}

.form-select {
    cursor: pointer;
}

.form-select option {
    background: var(--bg-card);
    color: var(--text-primary);
}

/* Professional Alerts */
.alert {
    border: 1px solid;
    border-radius: var(--radius-sm);
    padding: 14px 18px;
    font-size: 0.9rem;
}

.alert-success {
    background: rgba(71, 213, 166, 0.1);
    border-color: var(--success);
    color: var(--text-primary);
}

.alert-info {
    background: rgba(64, 119, 209, 0.1);
    border-color: var(--info);
    color: var(--text-primary);
}

.alert-danger {
    background: rgba(217, 74, 74, 0.1);
    border-color: var(--danger);
    color: var(--text-primary);
}

.alert-warning {
    background: rgba(238, 184, 92, 0.1);
    border-color: var(--warning);
    color: var(--text-primary);
}

/* Professional Badges */
.badge {
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: var(--text-xs);
    letter-spacing: 0.3px;
}

.bg-success {
    background: var(--success) !important;
    color: white !important;
}

.bg-danger {
    background: var(--danger) !important;
    color: white !important;
}

.bg-secondary {
    background: var(--surface-40) !important;
    color: white !important;
}

.bg-primary {
    background: var(--primary) !important;
    color: white !important;
}

.bg-warning {
    background: var(--warning) !important;
    color: var(--surface-0) !important;
}

.bg-info {
    background: var(--info) !important;
    color: white !important;
}

/* Professional Navigation */
.navbar {
    background: var(--bg-card);
    box-shadow: 0 1px 3px var(--shadow-sm);
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
}

.navbar-brand {
    font-weight: 700;
    color: var(--primary) !important;
    font-size: var(--text-xl);
}

.nav-link {
    color: var(--text-secondary) !important;
    font-weight: 500;
    padding: 8px 16px !important;
    border-radius: var(--radius-sm);
    transition: all 0.2s ease;
    font-size: 0.9rem;
}

.nav-link:hover {
    background: var(--bg-elevated);
    color: var(--text-primary) !important;
}

.nav-link.active {
    color: var(--primary) !important;
    background: rgba(157, 0, 255, 0.08);
    font-weight: 600;
}

[data-theme="light"] .nav-link.active {
    background: rgba(157, 0, 255, 0.06);
}

.navbar-toggler {
    border: 1px solid var(--border);
    padding: 6px 10px;
}

.navbar-toggler:focus {
    box-shadow: none;
}

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

/* Responsive Design */
@media (max-width: 768px) {
    .btn {
        padding: 10px 20px;
        font-size: 0.9rem;
    }

    .card {
        border-radius: var(--radius-lg);
    }

    .table {
        font-size: var(--text-sm);
    }

    .navbar-brand {
        font-size: var(--text-xl);
    }
}

@media (max-width: 576px) {
    .card {
        border-radius: var(--radius-md);
    }

    .btn {
        padding: 8px 16px;
        font-size: 0.85rem;
    }
}

/* ── Navbar Avatar & User-Dropdown ── */
.nav-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--primary);
    color: white;
    font-size: var(--text-xs);
    font-weight: 700;
    border: 2px solid var(--primary-hover);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 0;
    line-height: 1;
    transition: border-color 0.2s ease;
}
.nav-avatar:hover,
.nav-avatar:focus-visible { border-color: white; outline: none; }
.nav-avatar.dropdown-toggle::after { display: none; } /* Bootstrap-Caret unterdrücken */

.nav-avatar--icon {
    background: var(--bg-elevated);
    border-color: var(--border);
    color: var(--text-primary);
}
.nav-avatar--icon:hover,
.nav-avatar--icon:focus-visible { border-color: var(--primary); background: var(--bg-hover); }
.nav-avatar--icon svg { width: 16px; height: 16px; }

.nav-dropdown {
    background: var(--bg-card) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: 0 8px 24px var(--shadow) !important;
    padding: var(--space-1) !important;
    min-width: 190px;
}
.nav-dropdown .dropdown-divider { border-color: var(--border); margin: var(--space-1) 0; }

.nav-dropdown-header { padding: var(--space-3); line-height: 1.3; }
.nav-dropdown-header .fw-semibold { color: var(--text-primary); font-size: var(--text-sm); }
.nav-dropdown-header small { color: var(--text-secondary); font-size: var(--text-xs); }

.nav-dropdown-header--clickable {
    display: block;
    text-decoration: none;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    transition: background 0.15s ease;
    cursor: pointer;
}
.nav-dropdown-header--clickable:hover {
    background: var(--bg-elevated);
}
.nav-dropdown-header--clickable .fw-semibold {
    color: var(--text-primary);
}
.nav-dropdown-header--clickable small {
    color: var(--text-secondary);
}

.nav-dropdown-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-sm);
    color: var(--text-primary);
    text-decoration: none;
    border-radius: var(--radius-sm);
    background: none;
    border: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s ease;
}
.nav-dropdown-item:hover { background: var(--bg-elevated); color: var(--text-primary); }

.nav-dropdown-item--danger { color: var(--danger) !important; }
.nav-dropdown-item--danger:hover {
    background: color-mix(in srgb, var(--danger) 10%, transparent) !important;
    color: var(--danger) !important;
}

.nav-theme-toggle { justify-content: space-between; }
.nav-theme-toggle svg { color: var(--text-secondary); flex-shrink: 0; }

[data-theme="light"] .nav-dropdown {
    background: white !important;
    box-shadow: 0 8px 24px var(--shadow) !important;
}
[data-theme="light"] .nav-avatar--icon { background: var(--bg-elevated); }

/* Smooth transitions */
* {
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* Focus states for accessibility */
*:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* Scrollbar Styling */
::-webkit-scrollbar {
    width: 10px;
}

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

::-webkit-scrollbar-thumb {
    background: var(--bg-elevated);
    border-radius: 5px;
}

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

/* Accessibility: respect user's motion preference */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Owner Result Card – adapts to theme */
.card-owner-result {
    border-color: var(--primary) !important;
    background: linear-gradient(135deg, #2b1a3a, #1e0f2e);
}

.card-owner-result h3 {
    color: var(--primary-hover);
}

.card-owner-result small {
    color: var(--primary-softer);
    opacity: 0.8;
}

[data-theme="light"] .card-owner-result {
    background: linear-gradient(135deg, #f4ebff, #ede0ff);
}

[data-theme="light"] .card-owner-result h3 {
    color: var(--primary);
}

[data-theme="light"] .card-owner-result small {
    color: var(--text-secondary);
    opacity: 1;
}

/* Owner result text color */
.text-owner-result {
    color: var(--primary-hover);
}