/**
 * =====================================================
 * FIXBUDDY LUXUS DESIGN SYSTEM
 * Apple-Clean Glasmorphism + Gold/Dunkel Theme
 * =====================================================
 *
 * Dieses CSS überschreibt alle Module mit dem Luxus-Stil:
 * - Glasmorphism (backdrop-filter: blur)
 * - Smooth Transitions (cubic-bezier)
 * - NUR Gold (#b8935f) + Dunkel (#0d0d0d, #1a1a1a)
 * - Subtile mehrstufige Schatten
 * - Elegante Hover-Effekte
 */

/* =====================================================
   CSS VARIABLEN - LUXUS THEME
   ===================================================== */
:root {
    /* Gold Palette */
    --luxus-gold: #b8935f;
    --luxus-gold-light: #d4af7a;
    --luxus-gold-dark: #a5885a;
    --luxus-gold-glow: rgba(184, 147, 95, 0.4);

    /* Dark Palette */
    --luxus-dark: #0d0d0d;
    --luxus-dark-card: #1a1a1a;
    --luxus-dark-elevated: #1e1e1e;
    --luxus-dark-input: #151515;

    /* Glass Effects */
    --glass-bg: rgba(26, 26, 26, 0.75);
    --glass-bg-light: rgba(26, 26, 26, 0.6);
    --glass-bg-heavy: rgba(26, 26, 26, 0.9);
    --glass-border: rgba(184, 147, 95, 0.15);
    --glass-border-hover: rgba(184, 147, 95, 0.3);
    --glass-border-active: rgba(184, 147, 95, 0.5);

    /* Smooth Easings */
    --ease-smooth: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-apple: cubic-bezier(0.25, 0.46, 0.45, 0.94);

    /* Luxus Shadows */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.15);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.2), 0 8px 32px rgba(0, 0, 0, 0.15);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.2), 0 16px 48px rgba(0, 0, 0, 0.25);
    --shadow-gold: 0 8px 24px rgba(184, 147, 95, 0.2);
    --shadow-gold-hover: 0 12px 32px rgba(184, 147, 95, 0.3);
}

/* =====================================================
   GLASMORPHISM CARDS - Alle Module
   ===================================================== */

/* Standard Card */
.card,
.stat-card,
.stats-card,
.balance-card,
.wallet-stat,
.metric-card,
.metric-group,
.level-card,
.progress-card,
.achievement-card,
.challenge-card,
.streak-card,
.badge-item,
.transactions-section,
.faceit-chart-container,
.jobs-card,
.finance-card,
.forecast-card,
.provision-info-card,
.calendar-container,
.job-card,
.message-card,
.order-card,
.listing-card,
.profile-card,
.settings-card,
.shop-item {
    background: var(--glass-bg) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: 20px !important;
    transition: all 0.4s var(--ease-smooth) !important;
    box-shadow: var(--shadow-md) !important;
}

/* Card Hover - Elegant Float */
.card:hover,
.stat-card:hover,
.stats-card:hover,
.balance-card:hover,
.metric-card:hover,
.metric-group:hover,
.achievement-card:hover,
.challenge-card:hover,
.streak-card:hover,
.badge-item:hover,
.job-card:hover,
.message-card:hover,
.order-card:hover,
.listing-card:hover,
.shop-item:hover {
    transform: translateY(-4px) !important;
    border-color: var(--glass-border-hover) !important;
    box-shadow: var(--shadow-lg) !important;
}

/* Featured/Active Card - Gold Glow */
.card.featured,
.card.active,
.card.current,
.balance-card.main,
.streak-card.active,
.plan-card.featured {
    background: linear-gradient(180deg, rgba(184, 147, 95, 0.12) 0%, var(--glass-bg) 100%) !important;
    border-color: var(--glass-border-active) !important;
    box-shadow: var(--shadow-md), 0 0 40px rgba(184, 147, 95, 0.1) !important;
}

/* =====================================================
   BUTTONS - Premium Feel
   ===================================================== */

/* Primary Button - Gold Gradient */
.btn-primary,
.btn.btn-primary,
button.btn-primary {
    background: linear-gradient(135deg, var(--luxus-gold) 0%, var(--luxus-gold-dark) 100%) !important;
    color: #0d0d0d !important;
    border: none !important;
    border-radius: 14px !important;
    padding: 14px 24px !important;
    font-weight: 600 !important;
    transition: all 0.35s var(--ease-spring) !important;
    box-shadow: var(--shadow-gold) !important;
}

.btn-primary:hover,
.btn.btn-primary:hover,
button.btn-primary:hover {
    transform: translateY(-2px) !important;
    box-shadow: var(--shadow-gold-hover) !important;
    background: linear-gradient(135deg, var(--luxus-gold-light) 0%, var(--luxus-gold) 100%) !important;
}

.btn-primary:active,
.btn.btn-primary:active {
    transform: translateY(0) !important;
    box-shadow: 0 4px 12px rgba(184, 147, 95, 0.25) !important;
}

/* Secondary Button - Glasmorphism */
.btn-secondary,
.btn.btn-secondary,
button.btn-secondary {
    background: var(--glass-bg-light) !important;
    backdrop-filter: blur(12px) !important;
    color: #fff !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: 14px !important;
    padding: 14px 24px !important;
    font-weight: 600 !important;
    transition: all 0.35s var(--ease-spring) !important;
}

.btn-secondary:hover,
.btn.btn-secondary:hover {
    background: var(--glass-bg) !important;
    border-color: var(--glass-border-hover) !important;
    transform: translateY(-2px) !important;
    box-shadow: var(--shadow-sm) !important;
}

/* Ghost/Outline Button */
.btn-ghost,
.btn-outline {
    background: transparent !important;
    border: 1px solid var(--glass-border) !important;
    color: #888 !important;
    border-radius: 14px !important;
    transition: all 0.3s var(--ease-smooth) !important;
}

.btn-ghost:hover,
.btn-outline:hover {
    border-color: var(--glass-border-hover) !important;
    color: #fff !important;
    background: var(--glass-bg-light) !important;
}

/* =====================================================
   INPUTS - Dark + Gold Focus
   ===================================================== */

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="search"],
input[type="url"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
textarea,
select,
.form-input,
.form-select,
.form-textarea,
.input-with-prefix input,
.input-with-suffix input,
.filter-select {
    background: var(--luxus-dark-input) !important;
    border: 1.5px solid var(--glass-border) !important;
    border-radius: 12px !important;
    color: #fff !important;
    padding: 14px 16px !important;
    transition: all 0.3s var(--ease-smooth) !important;
}

input:focus,
textarea:focus,
select:focus,
.form-input:focus,
.form-select:focus {
    outline: none !important;
    border-color: var(--glass-border-active) !important;
    box-shadow: 0 0 0 3px rgba(184, 147, 95, 0.1) !important;
    background: var(--luxus-dark-card) !important;
}

input::placeholder,
textarea::placeholder {
    color: rgba(255, 255, 255, 0.4) !important;
}

/* =====================================================
   MODALS - Glasmorphism Overlay
   ===================================================== */

.modal-backdrop,
.modal-overlay {
    background: rgba(0, 0, 0, 0.6) !important;
    backdrop-filter: blur(8px) !important;
}

.modal-content,
.modal-dialog,
.modal-box {
    background: var(--glass-bg-heavy) !important;
    backdrop-filter: blur(24px) !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: 24px !important;
    box-shadow: var(--shadow-lg), inset 0 1px 1px rgba(255, 255, 255, 0.05) !important;
}

/* =====================================================
   TABS & NAVIGATION
   ===================================================== */

.tabs,
.tab-nav,
.stats-tabs,
.nav-tabs {
    background: var(--glass-bg-light) !important;
    backdrop-filter: blur(16px) !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: 16px !important;
    padding: 6px !important;
}

.tab,
.tab-item,
.stats-tab,
.nav-tab {
    border-radius: 12px !important;
    padding: 12px 20px !important;
    transition: all 0.3s var(--ease-spring) !important;
    color: #888 !important;
}

.tab.active,
.tab-item.active,
.stats-tab.active,
.nav-tab.active {
    background: linear-gradient(135deg, var(--luxus-gold) 0%, var(--luxus-gold-dark) 100%) !important;
    color: #0d0d0d !important;
    box-shadow: var(--shadow-gold) !important;
}

.tab:hover:not(.active),
.tab-item:hover:not(.active),
.stats-tab:hover:not(.active) {
    background: var(--glass-bg) !important;
    color: #fff !important;
}

/* =====================================================
   BADGES & TAGS - Gold Accent
   ===================================================== */

.badge,
.tag,
.label,
.status-badge,
.tier-badge,
.plan-badge {
    background: var(--glass-bg-light) !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: 20px !important;
    padding: 6px 14px !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    backdrop-filter: blur(8px) !important;
}

.badge.gold,
.badge.premium,
.badge.pro,
.tier-badge.vip {
    background: linear-gradient(135deg, var(--luxus-gold) 0%, var(--luxus-gold-dark) 100%) !important;
    color: #0d0d0d !important;
    border: none !important;
    box-shadow: 0 4px 12px rgba(184, 147, 95, 0.3) !important;
}

/* =====================================================
   PROGRESS BARS & RINGS
   ===================================================== */

.progress-bar,
.progress-fill,
.progress-track {
    background: var(--luxus-dark-elevated) !important;
    border-radius: 10px !important;
    overflow: hidden !important;
}

.progress-bar .fill,
.progress-fill,
.progress-value {
    background: linear-gradient(90deg, var(--luxus-gold) 0%, var(--luxus-gold-light) 100%) !important;
    border-radius: 10px !important;
    box-shadow: 0 0 20px var(--luxus-gold-glow) !important;
    transition: width 0.8s var(--ease-smooth) !important;
}

/* Ring Progress (SVG) */
.ring-progress circle.progress,
.ring-progress .progress-ring {
    stroke: var(--luxus-gold) !important;
    filter: drop-shadow(0 0 12px var(--luxus-gold-glow)) !important;
}

/* =====================================================
   LISTS & LIST ITEMS
   ===================================================== */

.list-item,
.transaction-item,
.activity-item,
.quick-action,
.menu-item {
    padding: 16px !important;
    border-bottom: 1px solid rgba(184, 147, 95, 0.08) !important;
    transition: all 0.3s var(--ease-smooth) !important;
}

.list-item:hover,
.transaction-item:hover,
.activity-item:hover,
.quick-action:hover,
.menu-item:hover {
    background: var(--glass-bg-light) !important;
    transform: translateX(4px) !important;
    border-color: rgba(184, 147, 95, 0.15) !important;
}

.list-item:last-child,
.transaction-item:last-child {
    border-bottom: none !important;
}

/* =====================================================
   ICONS - Gold Accent statt andere Farben
   ===================================================== */

.stat-icon,
.card-icon,
.feature-icon.included,
.benefit-icon,
.achievement-icon {
    color: var(--luxus-gold) !important;
}

/* Checkmarks */
.feature-icon svg,
.check-icon {
    color: var(--luxus-gold) !important;
}

/* =====================================================
   CHART FARBEN OVERRIDE (NUR Gold-Töne)
   ===================================================== */

/* Chart.js Farben werden per JS gesetzt, aber wir können
   bestimmte Elemente mit CSS überschreiben */
.chart-legend .legend-item,
.chart-tooltip {
    background: var(--glass-bg) !important;
    backdrop-filter: blur(12px) !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: 8px !important;
}

/* =====================================================
   TOAST NOTIFICATIONS
   ===================================================== */

.toast,
.notification,
.alert-toast {
    background: var(--glass-bg) !important;
    backdrop-filter: blur(20px) !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: 16px !important;
    box-shadow: var(--shadow-lg) !important;
}

.toast.success {
    border-color: rgba(184, 147, 95, 0.4) !important;
}

/* =====================================================
   SCROLLBAR - Luxus Dark
   ===================================================== */

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--luxus-dark);
    border-radius: 4px;
}

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

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

/* =====================================================
   SELECTION - Gold Highlight
   ===================================================== */

::selection {
    background: rgba(184, 147, 95, 0.3);
    color: #fff;
}

/* =====================================================
   FILTER BUTTONS
   ===================================================== */

.filter-btn,
.filter-button,
.chip {
    background: var(--glass-bg-light) !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: 12px !important;
    padding: 10px 18px !important;
    color: #888 !important;
    font-weight: 500 !important;
    transition: all 0.3s var(--ease-spring) !important;
}

.filter-btn:hover,
.filter-button:hover,
.chip:hover {
    background: var(--glass-bg) !important;
    border-color: var(--glass-border-hover) !important;
    color: #fff !important;
}

.filter-btn.active,
.filter-button.active,
.chip.active {
    background: linear-gradient(135deg, var(--luxus-gold) 0%, var(--luxus-gold-dark) 100%) !important;
    border-color: transparent !important;
    color: #0d0d0d !important;
}

/* =====================================================
   PAYMENT METHOD CARDS
   ===================================================== */

.payment-method-inner,
.payment-option,
.method-card {
    background: var(--glass-bg-light) !important;
    backdrop-filter: blur(12px) !important;
    border: 2px solid var(--glass-border) !important;
    border-radius: 14px !important;
    transition: all 0.35s var(--ease-spring) !important;
}

.payment-method-inner:hover,
.payment-option:hover {
    border-color: var(--glass-border-hover) !important;
    transform: translateY(-2px) !important;
    box-shadow: var(--shadow-sm) !important;
}

input:checked + .payment-method-inner,
.payment-option.selected {
    border-color: var(--luxus-gold) !important;
    background: rgba(184, 147, 95, 0.1) !important;
    box-shadow: 0 0 0 3px rgba(184, 147, 95, 0.1) !important;
}

/* =====================================================
   AMOUNT BUTTONS (Wallet)
   ===================================================== */

.amount-btn,
.amount-option {
    background: var(--glass-bg-light) !important;
    border: 2px solid var(--glass-border) !important;
    border-radius: 12px !important;
    transition: all 0.35s var(--ease-spring) !important;
    backdrop-filter: blur(10px) !important;
}

.amount-btn:hover,
.amount-option:hover {
    border-color: var(--glass-border-hover) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 16px rgba(184, 147, 95, 0.15) !important;
}

.amount-btn.selected,
.amount-option.selected {
    background: linear-gradient(135deg, var(--luxus-gold) 0%, var(--luxus-gold-dark) 100%) !important;
    border-color: transparent !important;
    color: #0d0d0d !important;
    transform: scale(1.02) !important;
    box-shadow: var(--shadow-gold) !important;
}

/* =====================================================
   WELCOME BANNER
   ===================================================== */

.welcome-banner,
.hero-banner {
    background: linear-gradient(135deg, rgba(184, 147, 95, 0.9) 0%, rgba(165, 136, 90, 0.9) 100%) !important;
    backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 20px !important;
    box-shadow: 0 8px 32px rgba(139, 109, 63, 0.25) !important;
}

/* =====================================================
   ANIMATIONS
   ===================================================== */

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulseGold {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(184, 147, 95, 0.4);
    }
    50% {
        box-shadow: 0 0 0 10px rgba(184, 147, 95, 0);
    }
}

.animate-in {
    animation: fadeInUp 0.5s var(--ease-smooth) forwards;
}

.pulse-gold {
    animation: pulseGold 2s infinite;
}