/* Melody Hub - Design v11 Dark Glass overrides */

:root {
    --v11-surface-1: rgba(30, 41, 59, 0.62);
    --v11-surface-2: rgba(30, 41, 59, 0.46);
    --v11-surface-3: rgba(15, 23, 42, 0.78);
    --v11-border-strong: rgba(148, 163, 184, 0.34);
}

/* ============================================================
   Dark Glass Variable Overrides
   Remap light-theme CSS variables to dark-glass equivalents
   so all template <style> blocks automatically adapt.
   NOTE: --white is NOT overridden because it's used for text too.
   ============================================================ */
main {
    --gray-50: rgba(15, 23, 42, 0.5);
    --gray-100: rgba(30, 41, 59, 0.5);
    --gray-200: rgba(148, 163, 184, 0.25);
    --gray-300: rgba(148, 163, 184, 0.35);
    --gray-400: rgba(203, 213, 225, 0.7);
    --gray-500: rgba(203, 213, 225, 0.65);
    --gray-600: rgba(226, 232, 240, 0.75);
    --gray-700: rgba(241, 245, 249, 0.88);
    --gray-800: rgba(248, 250, 252, 0.92);
    --gray-900: #f1f5f9;
    --primary: var(--accent-cyan);
    --primary-light: rgba(34, 211, 238, 0.2);
    --primary-100: rgba(34, 211, 238, 0.12);
    --primary-50: rgba(34, 211, 238, 0.08);
}

/* Catch template styles using background: var(--white) or white */
main .summary-card,
main .payment-card,
main .registration-card,
main .related-event-card,
main .week-card,
main .summary-price,
main .booking-summary-wrapper,
main .message-input-container,
main .lesson-card {
    background: var(--glass-bg) !important;
    border: 1px solid var(--glass-border) !important;
}

main .bg-white,
main section.bg-white,
main .events-page-content {
    background: transparent !important;
}

main .card,
main .stat-card,
main .dashboard-sidebar,
main .table-container,
main .summary-card,
main .payment-card,
main .filters-card,
main .event-card-standard,
main .event-card-modern,
main .event-card-compact,
main .plan-card,
main .comparison-card,
main .goal-card,
main .empty-state,
main .recent-messages-widget,
main .teacher-header,
main .plans-intro,
main .events-empty,
main .modal-content,
main .gradient-border-card,
main .gradient-border-inner {
    background: linear-gradient(
        145deg,
        rgba(30, 41, 59, 0.62) 0%,
        rgba(51, 65, 85, 0.46) 50%,
        rgba(30, 41, 59, 0.62) 100%
    ) !important;
    border: 1px solid var(--glass-border) !important;
    box-shadow: 0 10px 30px rgba(2, 8, 23, 0.32) !important;
    color: var(--text-secondary);
}

main .card-header,
main .card-footer,
main .standard-header,
main .standard-footer,
main .payment-summary,
main .payment-security,
main .plan-per-lesson,
main .comparison-card.highlighted,
main .message-input-container,
main .events-page-content .filters-header {
    background: var(--v11-surface-2) !important;
    border-color: var(--glass-border) !important;
}

main .card-header h1,
main .card-header h2,
main .card-header h3,
main .card-header h4,
main .card h1,
main .card h2,
main .card h3,
main .card h4,
main .dashboard-title,
main .dashboard-subtitle,
main .section-title,
main .section-subtitle,
main .feature-title,
main .teacher-info h1,
main .plans-intro h2,
main .events-empty h3,
main .compact-title,
main .card-title a,
main .standard-title a,
main .summary-card h3,
main .payment-header h1 {
    color: var(--text-primary) !important;
}

main .text-muted,
main .dashboard-subtitle,
main .section-subtitle,
main .feature-text,
main .conversation-preview,
main .conversation-time,
main .security-info,
main .payment-methods-note,
main .item-label,
main .summary-row,
main .meta-row,
main .compact-meta {
    color: var(--text-muted) !important;
}

/* Buttons and links on dark cards */
main .btn-ghost {
    background: rgba(148, 163, 184, 0.12) !important;
    border: 1px solid rgba(148, 163, 184, 0.26) !important;
    color: var(--text-secondary) !important;
}

main .btn-ghost:hover {
    background: rgba(34, 211, 238, 0.12) !important;
    border-color: rgba(34, 211, 238, 0.34) !important;
    color: var(--text-primary) !important;
}

main .btn-outline,
main .btn-secondary {
    border-color: var(--glass-border) !important;
    color: var(--text-secondary) !important;
}

main .btn-outline:hover,
main .btn-secondary:hover {
    border-color: var(--v11-border-strong) !important;
    color: var(--text-primary) !important;
}

/* Forms */
main .form-input,
main .form-control,
main .form-select,
main .form-textarea,
main input[type="text"],
main input[type="email"],
main input[type="password"],
main input[type="number"],
main textarea,
main select {
    background: rgba(15, 23, 42, 0.62) !important;
    border: 1px solid var(--glass-border) !important;
    color: var(--text-primary) !important;
}

main .form-input::placeholder,
main .form-control::placeholder,
main .form-textarea::placeholder,
main input::placeholder,
main textarea::placeholder {
    color: var(--text-muted) !important;
}

main .form-input:focus,
main .form-control:focus,
main .form-select:focus,
main .form-textarea:focus,
main input:focus,
main textarea:focus,
main select:focus {
    border-color: rgba(34, 211, 238, 0.55) !important;
    box-shadow: 0 0 0 4px rgba(34, 211, 238, 0.16) !important;
}

main select option {
    background: #182134;
    color: var(--text-primary);
}

/* Stripe and payment containers */
main #payment-element,
main .stripe-element,
main .stripe-payment-element {
    background: rgba(15, 23, 42, 0.56) !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: var(--radius-lg) !important;
}

main .payment-errors,
main #payment-errors,
main .form-error {
    color: #fca5a5 !important;
}

main .payment-icons,
main .security-icons {
    color: var(--text-dim) !important;
}

/* Alerts */
main .alert {
    border: 1px solid var(--glass-border) !important;
    background: var(--v11-surface-2) !important;
    color: var(--text-secondary) !important;
}

main .alert-success {
    border-color: rgba(16, 185, 129, 0.45) !important;
    background: rgba(16, 185, 129, 0.16) !important;
    color: #86efac !important;
}

main .alert-warning {
    border-color: rgba(245, 158, 11, 0.45) !important;
    background: rgba(245, 158, 11, 0.16) !important;
    color: #fcd34d !important;
}

main .alert-danger,
main .alert-error {
    border-color: rgba(239, 68, 68, 0.45) !important;
    background: rgba(239, 68, 68, 0.16) !important;
    color: #fecaca !important;
}

main .alert-info {
    border-color: rgba(34, 211, 238, 0.45) !important;
    background: rgba(34, 211, 238, 0.14) !important;
    color: #a5f3fc !important;
}

/* Tables */
main .table,
main table {
    color: var(--text-secondary) !important;
    border-color: var(--glass-border) !important;
}

main .table th,
main table th {
    background: rgba(34, 211, 238, 0.1) !important;
    color: var(--text-primary) !important;
    border-color: var(--glass-border) !important;
}

main .table td,
main table td {
    border-color: rgba(148, 163, 184, 0.2) !important;
}

main .table tbody tr:hover,
main table tbody tr:hover {
    background: rgba(34, 211, 238, 0.08) !important;
}

/* Dashboard sidebar and nav */
main .dashboard-sidebar {
    background: linear-gradient(
        180deg,
        rgba(15, 23, 42, 0.82) 0%,
        rgba(30, 41, 59, 0.72) 100%
    ) !important;
}

main .sidebar-section-label {
    color: var(--text-muted) !important;
}

main .sidebar-nav-link {
    color: var(--text-secondary) !important;
    border: 1px solid transparent;
}

main .sidebar-nav-link:hover {
    background: rgba(34, 211, 238, 0.1) !important;
    border-color: rgba(34, 211, 238, 0.24) !important;
    color: var(--text-primary) !important;
}

main .sidebar-nav-link.active {
    background: linear-gradient(
        135deg,
        rgba(34, 211, 238, 0.24) 0%,
        rgba(13, 148, 136, 0.18) 100%
    ) !important;
    border-color: rgba(34, 211, 238, 0.36) !important;
    color: #ecfeff !important;
    box-shadow: 0 8px 20px rgba(6, 182, 212, 0.2) !important;
}

/* Auth layout */
.auth-shell {
    min-height: calc(100vh - 210px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-xl) 0 var(--spacing-2xl);
}

.auth-card {
    width: min(100%, 560px);
}

.auth-card .card-body {
    padding: clamp(1.25rem, 4vw, 2rem) !important;
}

.auth-brand h1 {
    margin-bottom: var(--spacing-sm);
}

/* Settings page modal */
.settings-page #deleteModal {
    backdrop-filter: blur(6px);
}

.settings-page #deleteModal .card {
    background: linear-gradient(
        145deg,
        rgba(30, 41, 59, 0.82) 0%,
        rgba(15, 23, 42, 0.9) 100%
    ) !important;
}

/* Messages */
main .conversation-item {
    border-bottom: 1px solid rgba(148, 163, 184, 0.2) !important;
}

main .conversation-item:hover {
    background: rgba(34, 211, 238, 0.08) !important;
}

main .conversation-item.unread {
    background: rgba(34, 211, 238, 0.14) !important;
}

main .conversation-item.unread:hover {
    background: rgba(34, 211, 238, 0.2) !important;
}

main .badge-primary,
main .conversation-item .badge {
    background: rgba(34, 211, 238, 0.24) !important;
    color: #a5f3fc !important;
    border: 1px solid rgba(34, 211, 238, 0.4) !important;
}

main .messages-container {
    background: rgba(15, 23, 42, 0.28);
}

main .message-input-container {
    border-top: 1px solid rgba(148, 163, 184, 0.24) !important;
}

main .message.received .message-bubble {
    background: rgba(30, 41, 59, 0.68) !important;
    border: 1px solid var(--glass-border);
    color: var(--text-secondary) !important;
}

main .message.sent .message-bubble {
    background: linear-gradient(
        135deg,
        rgba(34, 211, 238, 0.35) 0%,
        rgba(13, 148, 136, 0.28) 100%
    ) !important;
    border: 1px solid rgba(34, 211, 238, 0.34);
    color: #ecfeff !important;
}

/* Event and subscription cards */
main .events-page-content .filter-select,
main .events-page-content .filter-input,
main .mobile-filter-btn,
main .event-date-box,
main .standard-header,
main .standard-footer,
main .card-footer,
main .compact-date,
main .plan-savings,
main .discount-badge {
    border-color: var(--glass-border) !important;
}

main .event-date-box,
main .compact-date,
main .event-card-standard .standard-header,
main .event-card-standard .standard-footer,
main .event-card-modern .card-footer,
main .event-card-modern .card-image-overlay {
    background-color: rgba(15, 23, 42, 0.46) !important;
}

main .compact-title,
main .event-date-box .day,
main .compact-date .day,
main .price-current,
main .summary-item.total .item-value,
main .summary-row.total {
    color: var(--accent-cyan) !important;
}

main .location-pill,
main .popup-feature,
main .teacher-avatar-small {
    background: rgba(51, 65, 85, 0.52) !important;
    color: var(--text-secondary) !important;
    border: 1px solid var(--glass-border);
}

/* Leaflet popups and map utility boxes */
.leaflet-popup-content-wrapper,
.leaflet-popup-tip,
.location-modal-content {
    background: linear-gradient(
        145deg,
        rgba(30, 41, 59, 0.86) 0%,
        rgba(15, 23, 42, 0.9) 100%
    ) !important;
    border: 1px solid var(--glass-border) !important;
    color: var(--text-secondary) !important;
}

.leaflet-popup-close-button {
    background: rgba(15, 23, 42, 0.72) !important;
    color: var(--text-secondary) !important;
    border: 1px solid var(--glass-border);
}

.popup-name,
.popup-stat-value,
.location-modal-title {
    color: var(--text-primary) !important;
}

.popup-location,
.popup-stat-label,
.location-modal-message,
.location-modal-hint {
    color: var(--text-muted) !important;
    background: transparent !important;
}

.map-control-btn,
.sidebar-toggle {
    background: rgba(15, 23, 42, 0.72) !important;
    border: 1px solid var(--glass-border) !important;
    color: var(--text-secondary) !important;
}

.map-control-btn:hover,
.sidebar-toggle:hover {
    border-color: rgba(34, 211, 238, 0.4) !important;
    color: #ecfeff !important;
}

/* Booking, onboarding and availability controls */
main .lesson-type-card,
main .instrument-select-card,
main .duration-card,
main .location-card,
main .time-slot-card,
main .type-card,
main .access-card,
main .checkbox-card .card-content,
main .lesson-type-option,
main .template-btn,
main .day-row,
main .slot-item,
main .file-upload-area,
main .file-selected {
    background: rgba(15, 23, 42, 0.56) !important;
    border: 1px solid var(--glass-border) !important;
    color: var(--text-secondary) !important;
}

main .lesson-type-card:hover:not(.disabled),
main .instrument-select-card:hover,
main .duration-card:hover,
main .location-card:hover,
main .time-slot-card:hover:not(.disabled),
main .type-option:hover .type-card,
main .access-option:hover .access-card,
main .file-upload-area:hover,
main .file-upload-area.drag-over {
    border-color: rgba(34, 211, 238, 0.4) !important;
    background: rgba(34, 211, 238, 0.08) !important;
}

main .lesson-type-card.selected,
main .instrument-select-card:has(input:checked),
main .duration-card.selected,
main .duration-card:has(input:checked),
main .location-card:has(input:checked),
main .time-slot-card.selected,
main .type-option input:checked + .type-card,
main .access-option input:checked + .access-card,
main .lesson-type-option.selected,
main .lesson-type-option:has(input:checked) {
    border-color: rgba(34, 211, 238, 0.5) !important;
    background: rgba(34, 211, 238, 0.14) !important;
    color: #ecfeff !important;
}

main .lesson-type-card.disabled,
main .time-slot-card.disabled {
    opacity: 0.6;
    background: rgba(30, 41, 59, 0.42) !important;
}

main .weekly-calendar {
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    background: rgba(15, 23, 42, 0.36);
}

main .calendar-times,
main .calendar-day,
main .calendar-slot,
main .time-label {
    border-color: rgba(148, 163, 184, 0.22) !important;
}

main .calendar-header-cell {
    background: rgba(30, 41, 59, 0.58) !important;
    border-color: rgba(148, 163, 184, 0.24) !important;
    color: var(--text-secondary) !important;
}

main .time-label,
main .slot-item-details,
main .slot-detail-location,
main .legend-label {
    color: var(--text-muted) !important;
}

main .calendar-slot {
    background: rgba(15, 23, 42, 0.18);
}

main .calendar-slot:hover {
    background: rgba(34, 211, 238, 0.08) !important;
}

main .slot-item {
    border-color: rgba(148, 163, 184, 0.18) !important;
}

@media (max-width: 768px) {
    main .booking-summary-wrapper {
        background: rgba(15, 23, 42, 0.82) !important;
        border-top: 1px solid var(--glass-border);
        backdrop-filter: blur(14px);
    }

    main .stat-card {
        padding: var(--spacing-md) !important;
    }

    main .stat-card-value {
        font-size: 1.5rem !important;
    }

    main .card {
        border-radius: var(--radius-xl) !important;
    }

    .gradient-border-card {
        background: transparent !important;
    }

    .gradient-border-card::before {
        display: none !important;
    }

    .gradient-border-card .gradient-border-inner {
        background: rgba(15, 23, 42, 0.56) !important;
    }
}

/* Events, subscriptions, learning plans, receipts */
main .registration-card,
main .requirement-item,
main .subscription-card,
main .past-sub-item,
main .receipt-item,
main .learning-plan-card {
    background: rgba(15, 23, 42, 0.56) !important;
    border: 1px solid var(--glass-border) !important;
}

main .receipt-item {
    border-color: rgba(148, 163, 184, 0.2) !important;
}

main .receipt-item:hover,
main .past-sub-item:hover {
    background: rgba(34, 211, 238, 0.08) !important;
}

main .receipt-icon {
    background: rgba(34, 211, 238, 0.14) !important;
    border: 1px solid rgba(34, 211, 238, 0.32);
    color: #a5f3fc !important;
}

main .receipt-amount,
main .price-current,
main .card-price .current,
main .event-price-tag,
main .price-main {
    color: var(--accent-cyan) !important;
}

main .receipt-meta,
main .sub-details,
main .progress-info,
main .related-meta {
    color: var(--text-muted) !important;
}

main .progress-bar,
main .spots-bar {
    background: rgba(51, 65, 85, 0.55) !important;
}

main .progress-fill,
main .spots-filled {
    background: linear-gradient(
        90deg,
        rgba(34, 211, 238, 0.9) 0%,
        rgba(20, 184, 166, 0.9) 100%
    ) !important;
}

main .event-type-badge,
main .location-type-badge,
main .status-badge,
main .badge-small,
main .event-discount-pill,
main .discount-badge,
main .spots-badge {
    border: 1px solid rgba(148, 163, 184, 0.28) !important;
    backdrop-filter: blur(8px);
}

/* Event/subscription builders and detail layouts */
main .checkbox-item,
main .toggle-container,
main .radio-card,
main .recurring-mode-option,
main .selected-date-item,
main .display-style-option,
main .image-preview,
main .image-guidelines,
main .preview-item,
main .subscriber-card,
main .filter-tab,
main .info-item,
main .detail-item,
main .pause-info,
main .timeline,
main .events-table-wrapper,
main .data-table {
    background: rgba(15, 23, 42, 0.56) !important;
    border: 1px solid var(--glass-border) !important;
    color: var(--text-secondary) !important;
}

main .info-grid .info-item {
    padding: 0.85rem 1rem !important;
    border-radius: var(--radius-lg) !important;
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.5), rgba(15, 23, 42, 0.45)) !important;
    border: 1px solid rgba(148, 163, 184, 0.15) !important;
}

main .info-grid .info-item .info-label {
    color: var(--text-muted) !important;
}

main .info-grid .info-item .info-value {
    color: var(--text-primary) !important;
}

main .checkbox-item:hover,
main .toggle-container:hover,
main .radio-card:hover,
main .recurring-mode-option:hover,
main .selected-date-item:hover,
main .display-style-option:hover,
main .filter-tab:hover {
    border-color: rgba(34, 211, 238, 0.4) !important;
    background: rgba(34, 211, 238, 0.08) !important;
}

main .radio-card.selected,
main .recurring-mode-option.active,
main .display-style-option.active,
main .filter-tab.active {
    border-color: rgba(34, 211, 238, 0.5) !important;
    background: rgba(34, 211, 238, 0.14) !important;
    color: #ecfeff !important;
}

main .toggle-slider,
main .toggle-checkbox,
main .toggle-switch {
    background: rgba(51, 65, 85, 0.72) !important;
    border-color: rgba(148, 163, 184, 0.3) !important;
}

main .toggle-switch input:checked + .toggle-slider,
main .toggle-filter input:checked + .toggle-checkbox,
main .toggle-label input:checked + .toggle-switch {
    background: rgba(34, 211, 238, 0.55) !important;
    border-color: rgba(34, 211, 238, 0.6) !important;
}

main .subscribers-list,
main .timeline::before {
    border-color: rgba(148, 163, 184, 0.22) !important;
}

/* Subscription success page accents */
main .success-card,
main .subscription-details,
main .next-steps li {
    background: rgba(15, 23, 42, 0.56) !important;
    border: 1px solid var(--glass-border) !important;
    color: var(--text-secondary) !important;
}

main .success-icon {
    background: linear-gradient(
        135deg,
        rgba(34, 197, 94, 0.24) 0%,
        rgba(16, 185, 129, 0.16) 100%
    ) !important;
    border: 1px solid rgba(16, 185, 129, 0.42);
}

main .success-icon i,
main .detail-value.highlight {
    color: #86efac !important;
}

main .detail-item {
    border-color: rgba(148, 163, 184, 0.22) !important;
}

main .next-steps i {
    background: rgba(34, 211, 238, 0.2) !important;
    color: #a5f3fc !important;
}

/* ============================================================
   Comprehensive fallback for inline light surfaces in templates
   ============================================================ */

/* White and light gray backgrounds */
main div[style*="background: var(--gray-50)"],
main div[style*="background: var(--gray-100)"],
main div[style*="background: var(--gray-200)"],
main div[style*="background: var(--white)"],
main div[style*="background: white"],
main div[style*="background:#fff"],
main div[style*="background: #fff"],
main div[style*="background:#ffffff"],
main div[style*="background: #ffffff"],
main span[style*="background: var(--gray-50)"],
main span[style*="background: var(--gray-100)"],
main span[style*="background: var(--white)"],
main span[style*="background: white"],
main section[style*="background: var(--gray-50)"],
main section[style*="background: var(--gray-100)"],
main section[style*="background: var(--white)"],
main section[style*="background: white"],
main article[style*="background: var(--gray-50)"],
main article[style*="background: var(--white)"],
main article[style*="background: white"],
main p[style*="background: var(--gray-50)"],
main p[style*="background: var(--gray-100)"],
main li[style*="background: var(--gray-50)"],
main li[style*="background: var(--gray-100)"],
main li[style*="background: white"],
main a[style*="background: var(--white)"],
main a[style*="background: white"] {
    background: rgba(15, 23, 42, 0.56) !important;
    border-color: var(--glass-border) !important;
}

/* Light colored backgrounds */
main div[style*="background: #fef3c7"],
main div[style*="background: #fff3e0"],
main div[style*="background: #f0f4ff"],
main div[style*="background: #e8f0fe"],
main span[style*="background: #fef3c7"],
main span[style*="background: #fff3e0"] {
    background: rgba(245, 158, 11, 0.12) !important;
    border-color: rgba(245, 158, 11, 0.3) !important;
    color: #fcd34d !important;
}

main div[style*="background: #f0f4ff"],
main div[style*="background: #e8f0fe"] {
    background: rgba(34, 211, 238, 0.1) !important;
    border-color: rgba(34, 211, 238, 0.25) !important;
}

/* Light gradient backgrounds */
main div[style*="background: linear-gradient(180deg, var(--white)"],
main div[style*="background: linear-gradient(135deg, var(--gray-100)"],
main div[style*="background: linear-gradient(135deg, #f0f4ff"] {
    background: rgba(15, 23, 42, 0.56) !important;
}

/* White background with opacity */
main div[style*="background: rgba(255, 255, 255"],
main span[style*="background: rgba(255, 255, 255"] {
    background: rgba(15, 23, 42, 0.72) !important;
}

/* Borders */
main [style*="border: 1px solid var(--gray-200)"],
main [style*="border: 2px solid var(--gray-200)"],
main [style*="border: 1px solid var(--gray-100)"],
main [style*="border-top: 1px solid var(--gray-200)"],
main [style*="border-top: 1px solid var(--gray-100)"],
main [style*="border-top: 1px dashed var(--gray-200)"],
main [style*="border-bottom: 1px solid var(--gray-200)"],
main [style*="border-bottom: 1px solid var(--gray-100)"],
main [style*="border: 1px solid #c3d9ff"] {
    border-color: var(--glass-border) !important;
}

/* Dark text colors on dark backgrounds */
main [style*="color: var(--gray-900)"],
main [style*="color: var(--gray-800)"] {
    color: var(--text-primary) !important;
}

main [style*="color: var(--gray-700)"],
main [style*="color: var(--gray-600)"] {
    color: var(--text-secondary) !important;
}

main [style*="color: var(--gray-500)"],
main [style*="color: var(--gray-400)"] {
    color: var(--text-muted) !important;
}

main [style*="color: #1a56db"] {
    color: var(--accent-cyan) !important;
}

main [style*="color: #92400e"],
main [style*="color: #333"] {
    color: var(--text-secondary) !important;
}

/* .bg-white class override */
main .bg-white,
main section.bg-white,
.section.bg-white {
    background: transparent !important;
}

/* Badge light variant */
main .badge-light {
    background: rgba(51, 65, 85, 0.52) !important;
    color: var(--text-secondary) !important;
}

/* Strong / bold text in main content */
main strong,
main b {
    color: var(--text-primary);
}

/* Input group text */
main .input-group-text {
    background: rgba(15, 23, 42, 0.56) !important;
    border: 1px solid var(--glass-border) !important;
    color: var(--text-muted) !important;
}

/* Modal content in templates */
main .modal-content {
    background: linear-gradient(
        145deg,
        rgba(30, 41, 59, 0.92) 0%,
        rgba(15, 23, 42, 0.96) 100%
    ) !important;
    border: 1px solid var(--glass-border) !important;
    color: var(--text-secondary) !important;
}

/* Calendar in templates */
main .calendar {
    background: rgba(15, 23, 42, 0.56) !important;
    border: 1px solid var(--glass-border) !important;
}

main .calendar-day-name {
    background: rgba(30, 41, 59, 0.58) !important;
    color: var(--text-muted) !important;
}

main .calendar-day {
    border-color: rgba(148, 163, 184, 0.2) !important;
    color: var(--text-secondary) !important;
}

main .calendar-day:hover {
    background: rgba(34, 211, 238, 0.08) !important;
}

main .calendar-day.today {
    background: linear-gradient(135deg, rgba(34, 211, 238, 0.24), rgba(13, 148, 136, 0.18)) !important;
    color: #ecfeff !important;
}

/* ============================================================
   Location option cards (teacher/offers.html)
   ============================================================ */
main .location-option-card {
    border-color: var(--glass-border) !important;
    background: rgba(15, 23, 42, 0.56) !important;
    border-radius: var(--radius-lg) !important;
    overflow: hidden;
}

main .location-option:hover {
    background: rgba(34, 211, 238, 0.06) !important;
}

main .location-option input:checked ~ .location-option-content .location-icon,
main .location-option-card:has(input:checked) .location-icon {
    background: rgba(34, 211, 238, 0.18) !important;
    color: var(--accent-cyan) !important;
}

main .location-option-card:has(input:checked) {
    border-color: rgba(34, 211, 238, 0.4) !important;
    background: rgba(34, 211, 238, 0.08) !important;
}

main .location-icon {
    background: rgba(51, 65, 85, 0.5) !important;
    color: var(--text-muted) !important;
}

main .location-details strong {
    color: var(--text-primary) !important;
}

main .location-suboptions {
    background: rgba(15, 23, 42, 0.4) !important;
    border-top-color: var(--glass-border) !important;
}

/* ============================================================
   Toggle switch (Probestunden anbieten)
   ============================================================ */
main .toggle-switch {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

main .toggle-slider {
    background: rgba(51, 65, 85, 0.6) !important;
}

main .toggle-switch input:checked + .toggle-slider {
    background: linear-gradient(135deg, var(--accent-cyan), #0d9488) !important;
}

main .toggle-label {
    color: var(--text-secondary) !important;
    font-weight: 500;
}

/* ============================================================
   Stat values - make numbers highly visible everywhere
   ============================================================ */
main .stat-value,
main .stat-card-value {
    color: #ecfeff !important;
    font-weight: 700 !important;
    text-shadow: 0 0 20px rgba(34, 211, 238, 0.3);
}

main .stat-label,
main .stat-card-label {
    color: var(--text-muted) !important;
}

main .stat-icon {
    border-radius: var(--radius-md) !important;
}

/* ============================================================
   Info section (Vorteile von Abonnements)
   ============================================================ */
main .info-section {
    background: linear-gradient(
        145deg,
        rgba(30, 41, 59, 0.62) 0%,
        rgba(51, 65, 85, 0.46) 50%,
        rgba(30, 41, 59, 0.62) 100%
    ) !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: var(--radius-xl) !important;
    padding: var(--spacing-xl) !important;
}

main .info-section h4 {
    color: var(--text-primary) !important;
    margin-bottom: var(--spacing-lg) !important;
}

main .info-section h4 i {
    color: var(--accent-cyan) !important;
}

main .info-section .info-item {
    color: var(--text-secondary) !important;
}

main .info-section .info-item i {
    color: var(--accent-cyan) !important;
}

main .info-section .info-item strong {
    color: var(--text-primary) !important;
}

main .info-section .info-item p {
    color: var(--text-muted) !important;
}

/* ============================================================
   Events table text visibility
   ============================================================ */
main .data-table th {
    background: rgba(15, 23, 42, 0.6) !important;
    color: var(--text-muted) !important;
    border-bottom: 1px solid var(--glass-border) !important;
}

main .data-table td {
    border-bottom: 1px solid rgba(148, 163, 184, 0.1) !important;
    color: var(--text-secondary) !important;
}

main .data-table td strong {
    color: var(--text-primary) !important;
}

main .data-table .event-info-cell strong {
    color: #f1f5f9 !important;
}

main .data-table .event-location {
    color: var(--text-muted) !important;
}

main .data-table .date-cell strong {
    color: var(--text-primary) !important;
}

main .data-table .date-cell span {
    color: var(--text-muted) !important;
}

main .data-table .participants-count {
    color: var(--text-primary) !important;
    font-weight: 600;
}

main .data-table .participants-max {
    color: var(--text-muted) !important;
}

main .data-table tr:hover td {
    background: rgba(34, 211, 238, 0.04) !important;
}

main .data-table tr.past td {
    opacity: 0.6;
}

/* Event type badges - dark theme */
main .event-type-badge {
    white-space: nowrap !important;
    padding: 0.25rem 0.625rem !important;
}

main .event-type-badge.workshop {
    background: rgba(99, 102, 241, 0.2) !important;
    color: #a5b4fc !important;
}

main .event-type-badge.course {
    background: rgba(34, 197, 94, 0.2) !important;
    color: #86efac !important;
}

main .event-type-badge.jam {
    background: rgba(245, 158, 11, 0.2) !important;
    color: #fcd34d !important;
}

main .event-type-badge.masterclass {
    background: rgba(236, 72, 153, 0.2) !important;
    color: #f9a8d4 !important;
}

main .event-type-badge.camp {
    background: rgba(139, 92, 246, 0.2) !important;
    color: #c4b5fd !important;
}

main .event-type-badge.ensemble {
    background: rgba(6, 182, 212, 0.2) !important;
    color: #67e8f9 !important;
}

/* Status badges */
main .status-badge {
    white-space: nowrap !important;
}

main .status-badge.active,
main .status-badge.published {
    background: rgba(34, 197, 94, 0.2) !important;
    color: #86efac !important;
}

main .status-badge.cancelled {
    background: rgba(239, 68, 68, 0.2) !important;
    color: #fca5a5 !important;
}

main .status-badge.completed {
    background: rgba(148, 163, 184, 0.2) !important;
    color: #94a3b8 !important;
}

/* ============================================================
   Calendar legend and slot indicators
   ============================================================ */
main .calendar-legend {
    color: var(--text-secondary) !important;
}

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

main .legend-swatch[style*="background: var(--gray-100)"] {
    background: rgba(51, 65, 85, 0.5) !important;
    border-color: rgba(148, 163, 184, 0.3) !important;
}

main .slot-indicator {
    opacity: 0.9 !important;
}

/* ============================================================
   Sidebar nav link text overflow fix
   ============================================================ */
main .sidebar-nav-link {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 0.875rem !important;
    padding: var(--spacing-sm) var(--spacing-md) !important;
}

main .sidebar-nav-link i {
    min-width: 20px;
    text-align: center;
    flex-shrink: 0;
}

/* ============================================================
   Profile badges (VERIFIZIERT, NIMMT SCHÜLER AN)
   ============================================================ */
main .badge,
main .badge-success,
main .badge-primary {
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.03em !important;
    padding: 0.35rem 0.75rem !important;
    border-radius: var(--radius-full) !important;
    text-transform: uppercase !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.35rem !important;
}

main .badge[style*="background: var(--success)"],
main .badge-success {
    background: rgba(34, 197, 94, 0.18) !important;
    color: #86efac !important;
    border: 1px solid rgba(34, 197, 94, 0.3) !important;
}

main .badge[style*="background: var(--primary)"],
main .badge-primary {
    background: rgba(34, 211, 238, 0.15) !important;
    color: #67e8f9 !important;
    border: 1px solid rgba(34, 211, 238, 0.3) !important;
}

main .badge-muted {
    background: rgba(51, 65, 85, 0.5) !important;
    color: #94a3b8 !important;
    border: 1px solid rgba(148, 163, 184, 0.2) !important;
}

/* Ensure text in cards is visible */
main .card strong,
main .stat-card strong,
main .glass-card strong {
    color: var(--text-primary) !important;
}

main .card p,
main .glass-card p {
    color: var(--text-secondary);
}

/* Payment result pages */
.payment-status-icon--success {
    background: linear-gradient(
        135deg,
        rgba(34, 197, 94, 0.26) 0%,
        rgba(16, 185, 129, 0.16) 100%
    ) !important;
    color: #86efac !important;
}

.payment-status-icon--failed {
    background: linear-gradient(
        135deg,
        rgba(239, 68, 68, 0.28) 0%,
        rgba(190, 24, 93, 0.16) 100%
    ) !important;
    color: #fecaca !important;
}

.payment-summary-box {
    background: rgba(15, 23, 42, 0.56) !important;
    border: 1px solid var(--glass-border);
}

/* Stat card values and labels */
main .stat-card-value {
    color: #ecfeff !important;
    font-weight: 700 !important;
    text-shadow: 0 0 20px rgba(34, 211, 238, 0.3);
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: clamp(1rem, 2vw, 1.75rem) !important;
}

main .stat-card-label {
    color: var(--text-muted) !important;
}

/* Form labels */
main .form-label,
main .form-group > label,
main label {
    color: var(--text-secondary) !important;
}

main .form-hint,
main small.form-hint {
    color: var(--text-dim) !important;
}

/* Empty state */
main .empty-state-icon {
    background: linear-gradient(135deg, rgba(34, 211, 238, 0.14), rgba(13, 148, 136, 0.1)) !important;
    color: var(--accent-cyan) !important;
}

main .empty-state-title {
    color: var(--text-primary) !important;
}

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

/* Dropdown menu */
.dropdown-menu {
    background: linear-gradient(
        145deg,
        rgba(30, 41, 59, 0.92) 0%,
        rgba(15, 23, 42, 0.96) 100%
    ) !important;
    border: 1px solid var(--glass-border) !important;
    box-shadow: 0 12px 40px rgba(2, 8, 23, 0.5) !important;
}

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

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

.dropdown-item:hover {
    background: rgba(34, 211, 238, 0.1) !important;
    color: var(--text-primary) !important;
}

.dropdown-item:hover i {
    color: var(--accent-cyan) !important;
}

.dropdown-divider {
    background: rgba(148, 163, 184, 0.2) !important;
}

/* Modal */
.modal,
.modal-content,
.feedback-modal {
    background: linear-gradient(
        145deg,
        rgba(30, 41, 59, 0.92) 0%,
        rgba(15, 23, 42, 0.96) 100%
    ) !important;
    border: 1px solid var(--glass-border) !important;
    color: var(--text-secondary) !important;
}

.modal-header {
    border-color: rgba(148, 163, 184, 0.2) !important;
    background: transparent !important;
}

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

.modal-close {
    background: rgba(148, 163, 184, 0.15) !important;
    color: var(--text-secondary) !important;
    border: 1px solid var(--glass-border);
}

.modal-close:hover {
    background: rgba(239, 68, 68, 0.2) !important;
    color: #fca5a5 !important;
}

.modal-footer {
    border-color: rgba(148, 163, 184, 0.2) !important;
    background: rgba(15, 23, 42, 0.4) !important;
}

/* Toast notifications */
.toast {
    background: linear-gradient(
        145deg,
        rgba(30, 41, 59, 0.92) 0%,
        rgba(15, 23, 42, 0.96) 100%
    ) !important;
    border: 1px solid var(--glass-border) !important;
    color: var(--text-secondary) !important;
}

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

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

.toast-close {
    color: var(--text-dim) !important;
}

.toast-close:hover {
    color: var(--text-secondary) !important;
}

/* Cookie banner */
.cookie-banner {
    background: linear-gradient(
        145deg,
        rgba(30, 41, 59, 0.95) 0%,
        rgba(15, 23, 42, 0.98) 100%
    ) !important;
    border-top: 1px solid var(--glass-border) !important;
    box-shadow: 0 -8px 30px rgba(2, 8, 23, 0.5) !important;
}

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

.cookie-text p {
    color: var(--text-secondary) !important;
}

.cookie-text a {
    color: var(--accent-cyan) !important;
}

/* Cookie settings modal */
.cookie-modal-content.card,
.cookie-modal-content {
    background: linear-gradient(
        145deg,
        rgba(30, 41, 59, 0.95) 0%,
        rgba(15, 23, 42, 0.98) 100%
    ) !important;
    border: 1px solid var(--glass-border) !important;
    color: var(--text-secondary) !important;
}

.cookie-modal-content .card-body {
    color: var(--text-secondary) !important;
}

.cookie-modal-content h3 {
    color: var(--text-primary) !important;
}

.cookie-modal-content strong {
    color: var(--text-primary) !important;
}

.cookie-modal-content .cookie-option,
.cookie-modal-content div[style*="background: var(--gray-100)"] {
    background: rgba(15, 23, 42, 0.56) !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: var(--radius-md);
}

.cookie-modal-content p {
    color: var(--text-muted) !important;
}

/* Feedback modal specific */
.feedback-intro {
    color: var(--text-muted) !important;
    background: linear-gradient(135deg, rgba(34, 211, 238, 0.08), rgba(13, 148, 136, 0.04)) !important;
    border-left-color: var(--accent-cyan) !important;
}

.feedback-mode-btn {
    background: rgba(15, 23, 42, 0.56) !important;
    border: 1px solid var(--glass-border) !important;
    color: var(--text-secondary) !important;
}

.feedback-mode-btn .mode-title {
    color: var(--text-primary) !important;
}

.feedback-mode-btn .mode-desc {
    color: var(--text-muted) !important;
}

.feedback-mode-btn i {
    color: var(--accent-cyan) !important;
}

.feedback-mode-btn:hover {
    border-color: rgba(34, 211, 238, 0.4) !important;
    background: rgba(34, 211, 238, 0.08) !important;
}

.feedback-form .form-label {
    color: var(--text-secondary) !important;
}

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

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

/* AI feedback conversation */
.ai-conversation {
    background: rgba(15, 23, 42, 0.36) !important;
}

.ai-message.assistant .ai-message-content {
    background: rgba(30, 41, 59, 0.68) !important;
    color: var(--text-secondary) !important;
    border: 1px solid var(--glass-border);
}

.ai-message.user .ai-message-content {
    background: linear-gradient(135deg, rgba(34, 211, 238, 0.35), rgba(13, 148, 136, 0.28)) !important;
    color: #ecfeff !important;
    border: 1px solid rgba(34, 211, 238, 0.34);
}

.ai-choice-btn {
    background: rgba(15, 23, 42, 0.56) !important;
    border: 1px solid var(--glass-border) !important;
    color: var(--text-secondary) !important;
}

.ai-choice-btn:hover {
    border-color: rgba(34, 211, 238, 0.4) !important;
    background: rgba(34, 211, 238, 0.08) !important;
    color: var(--text-primary) !important;
}

.ai-loading {
    background: rgba(15, 23, 42, 0.36) !important;
    color: var(--text-secondary) !important;
}

.ai-loading i {
    color: var(--accent-cyan) !important;
}

.ai-preview-content {
    background: rgba(15, 23, 42, 0.56) !important;
    border: 1px solid var(--glass-border) !important;
    color: var(--text-secondary) !important;
}

.ai-preview-content h5 {
    color: var(--text-primary) !important;
    border-color: rgba(148, 163, 184, 0.2) !important;
}

.ai-preview-content .preview-label {
    color: var(--text-muted) !important;
}

.ai-preview-content .preview-text {
    color: var(--text-secondary) !important;
}

.ai-preview-content .preview-steps li {
    color: var(--text-secondary) !important;
}

.classification-card {
    background: linear-gradient(135deg, rgba(34, 211, 238, 0.08), rgba(13, 148, 136, 0.05)) !important;
    border: 1px solid rgba(34, 211, 238, 0.2) !important;
}

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

.classification-hint {
    color: var(--text-dim) !important;
}

.type-option {
    background: rgba(15, 23, 42, 0.56) !important;
    border: 1px solid var(--glass-border) !important;
    color: var(--text-secondary) !important;
}

.type-option:hover {
    border-color: rgba(34, 211, 238, 0.4) !important;
    background: rgba(34, 211, 238, 0.08) !important;
}

.preview-edit-section {
    background: rgba(15, 23, 42, 0.56) !important;
    border: 2px dashed rgba(148, 163, 184, 0.3) !important;
}

.preview-edit-section .form-label {
    color: var(--text-muted) !important;
}

/* Screenshot preview */
.screenshot-preview-container {
    background: rgba(15, 23, 42, 0.56) !important;
    border-color: rgba(34, 211, 238, 0.3) !important;
}

.screenshot-preview-header {
    background: rgba(34, 211, 238, 0.1) !important;
    border-color: rgba(148, 163, 184, 0.2) !important;
    color: var(--text-secondary) !important;
}

.screenshot-preview-image {
    background: rgba(15, 23, 42, 0.4) !important;
}

.screenshot-analysis {
    background: rgba(15, 23, 42, 0.4) !important;
    border-color: rgba(148, 163, 184, 0.2) !important;
}

#screenshot-analysis-text {
    color: var(--text-secondary) !important;
}

/* Loading overlay */
.loading-overlay {
    background: rgba(17, 16, 24, 0.85) !important;
}

/* Tabs */
.tabs {
    background: rgba(15, 23, 42, 0.56) !important;
    border: 1px solid var(--glass-border);
}

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

.tab:hover {
    color: var(--text-secondary) !important;
}

.tab.active {
    background: rgba(34, 211, 238, 0.14) !important;
    color: var(--text-primary) !important;
    border: 1px solid rgba(34, 211, 238, 0.3);
}

/* Pagination */
.pagination-item {
    background: rgba(15, 23, 42, 0.56) !important;
    border: 1px solid var(--glass-border) !important;
    color: var(--text-secondary) !important;
}

.pagination-item:hover {
    background: rgba(34, 211, 238, 0.08) !important;
    color: var(--text-primary) !important;
    border-color: rgba(34, 211, 238, 0.3) !important;
}

.pagination-item.active {
    background: linear-gradient(135deg, rgba(34, 211, 238, 0.24), rgba(13, 148, 136, 0.18)) !important;
    color: #ecfeff !important;
    border-color: rgba(34, 211, 238, 0.4) !important;
}

/* Instrument cards */
main .instrument-card {
    background: rgba(15, 23, 42, 0.56) !important;
    border: 1px solid var(--glass-border) !important;
    color: var(--text-secondary) !important;
}

main .instrument-card:hover {
    border-color: rgba(34, 211, 238, 0.4) !important;
    background: rgba(34, 211, 238, 0.08) !important;
}

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

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

/* Instrument tags */
main .instrument-tag {
    color: var(--accent-cyan) !important;
}

/* Teacher card */
main .teacher-card {
    background: linear-gradient(
        145deg,
        rgba(30, 41, 59, 0.62) 0%,
        rgba(51, 65, 85, 0.46) 50%,
        rgba(30, 41, 59, 0.62) 100%
    ) !important;
    border: 1px solid var(--glass-border) !important;
    overflow: hidden !important;
    transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease !important;
}

main .teacher-card:hover {
    border-color: rgba(34, 211, 238, 0.35) !important;
    box-shadow: 0 12px 36px rgba(2, 8, 23, 0.4), 0 0 20px rgba(34, 211, 238, 0.08) !important;
    transform: translateY(-3px);
}

main .teacher-card-name {
    color: var(--text-primary) !important;
}

main .teacher-card-meta {
    color: var(--text-muted) !important;
}

main .teacher-card-price {
    color: var(--accent-cyan) !important;
}

main .teacher-card-footer {
    border-color: rgba(148, 163, 184, 0.2) !important;
}

main .teacher-card-content {
    color: var(--text-secondary) !important;
    border-radius: 0 !important;
}

main .teacher-card-avatar {
    background: rgba(51, 65, 85, 0.6) !important;
    border: 3px solid rgba(148, 163, 184, 0.2) !important;
}

main .teacher-card-bio {
    color: var(--text-muted) !important;
}

/* Lesson card */
main .lesson-card {
    background: linear-gradient(
        145deg,
        rgba(30, 41, 59, 0.62) 0%,
        rgba(51, 65, 85, 0.46) 50%,
        rgba(30, 41, 59, 0.62) 100%
    ) !important;
    border: 1px solid var(--glass-border) !important;
}

main .lesson-card-time {
    color: var(--text-primary) !important;
}

main .lesson-card-teacher {
    color: var(--text-muted) !important;
}

main .lesson-card-instrument {
    background: rgba(34, 211, 238, 0.1) !important;
    color: var(--accent-cyan) !important;
    border: 1px solid rgba(34, 211, 238, 0.2);
}

/* Search box */
main .search-input,
main .search-box input {
    background: rgba(15, 23, 42, 0.62) !important;
    border: 1px solid var(--glass-border) !important;
    color: var(--text-primary) !important;
}

main .search-icon {
    color: var(--text-dim) !important;
}

/* Tag input */
main .tag-input {
    background: rgba(15, 23, 42, 0.62) !important;
    border: 1px solid var(--glass-border) !important;
    color: var(--text-primary) !important;
}

main .tag-input input {
    color: var(--text-primary) !important;
    background: transparent !important;
}

/* Recent messages widget */
main .recent-messages-header {
    background: rgba(34, 211, 238, 0.06) !important;
    border-color: rgba(148, 163, 184, 0.2) !important;
}

main .recent-messages-header h3 {
    color: var(--text-primary) !important;
}

main .recent-message-item {
    border-color: rgba(148, 163, 184, 0.2) !important;
}

main .recent-message-item:hover {
    background: rgba(34, 211, 238, 0.08) !important;
}

main .recent-message-sender {
    color: var(--text-primary) !important;
}

main .recent-message-time {
    color: var(--text-dim) !important;
}

main .recent-message-preview {
    color: var(--text-muted) !important;
}

main .recent-messages-empty {
    color: var(--text-muted) !important;
}

main .recent-message-item.unread .recent-message-preview {
    color: var(--text-secondary) !important;
}

main .message-teacher-btn {
    background: rgba(15, 23, 42, 0.56) !important;
    border: 1px solid var(--glass-border) !important;
    color: var(--text-secondary) !important;
}

main .message-teacher-btn:hover {
    border-color: rgba(34, 211, 238, 0.4) !important;
    color: var(--accent-cyan) !important;
}

/* Feature cards */
main .feature-card {
    color: var(--text-secondary) !important;
}

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

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

/* Progress bar */
main .progress {
    background: rgba(51, 65, 85, 0.55) !important;
}

main .progress-label {
    color: var(--text-secondary) !important;
}

/* Avatar */
.avatar {
    background: linear-gradient(135deg, rgba(34, 211, 238, 0.3), rgba(13, 148, 136, 0.25)) !important;
    color: var(--text-primary) !important;
}

/* Collaborative AI wizard */
.collab-ai-wizard {
    background: linear-gradient(
        145deg,
        rgba(30, 41, 59, 0.92) 0%,
        rgba(15, 23, 42, 0.96) 100%
    ) !important;
    border: 1px solid var(--glass-border) !important;
}

.collab-ai-mode-selector {
    background: rgba(15, 23, 42, 0.36) !important;
    border-color: rgba(148, 163, 184, 0.2) !important;
}

.collab-ai-mode-btn {
    background: rgba(15, 23, 42, 0.56) !important;
    border: 1px solid var(--glass-border) !important;
}

.collab-ai-mode-btn span {
    color: var(--text-secondary) !important;
}

.collab-ai-mode-btn small {
    color: var(--text-dim) !important;
}

.collab-ai-mode-btn i {
    color: var(--text-dim) !important;
}

.collab-ai-mode-btn:hover {
    border-color: rgba(34, 211, 238, 0.4) !important;
    background: rgba(34, 211, 238, 0.08) !important;
}

.collab-ai-mode-btn.active {
    border-color: rgba(34, 211, 238, 0.5) !important;
    background: rgba(34, 211, 238, 0.14) !important;
}

.collab-ai-mode-btn.active i {
    color: var(--accent-cyan) !important;
}

.collab-ai-mode-btn.active span {
    color: var(--text-primary) !important;
}

.collab-ai-input-area {
    background: rgba(15, 23, 42, 0.36) !important;
    border-color: rgba(148, 163, 184, 0.2) !important;
}

.collab-ai-footer {
    border-color: rgba(148, 163, 184, 0.2) !important;
    background: rgba(15, 23, 42, 0.4) !important;
}

.collab-ai-message.assistant .collab-ai-message-content {
    background: rgba(30, 41, 59, 0.68) !important;
    color: var(--text-secondary) !important;
}

.collab-ai-choice-btn {
    background: rgba(15, 23, 42, 0.56) !important;
    border: 1px solid var(--glass-border) !important;
    color: var(--text-secondary) !important;
}

.collab-ai-choice-btn:hover {
    border-color: rgba(34, 211, 238, 0.4) !important;
    color: var(--text-primary) !important;
}

.collab-ai-result {
    background: rgba(15, 23, 42, 0.56) !important;
    border: 1px solid var(--glass-border);
}

.collab-ai-result-content {
    background: rgba(15, 23, 42, 0.4) !important;
    border-color: var(--glass-border) !important;
    color: var(--text-secondary) !important;
}

/* Generic utility */
main hr {
    border-color: rgba(148, 163, 184, 0.26) !important;
}

/* Onboarding wizard */
main .wizard-step-indicator,
main .step-number {
    color: var(--text-secondary) !important;
}

main .step-number.active {
    background: rgba(34, 211, 238, 0.24) !important;
    color: #ecfeff !important;
    border-color: rgba(34, 211, 238, 0.5) !important;
}

main .step-number.completed {
    background: rgba(16, 185, 129, 0.24) !important;
    color: #86efac !important;
}

/* Public profile */
main .profile-header,
main .profile-section {
    color: var(--text-secondary) !important;
}

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

/* Invoices */
main .invoice-header,
main .invoice-details {
    color: var(--text-secondary) !important;
}

/* Analytics */
main .analytics-card,
main .chart-container {
    color: var(--text-secondary) !important;
}

/* Pricing page */
main .pricing-card,
main .pricing-header {
    color: var(--text-secondary) !important;
}

main .pricing-price {
    color: var(--accent-cyan) !important;
}

/* Contact / FAQ / About / How it works */
main .faq-item,
main .faq-question {
    color: var(--text-secondary) !important;
}

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

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

/* Keep print output readable and bright */
/* ============================================================
   Accent gradient lines on key sections
   ============================================================ */
main .card-header {
    position: relative;
}

main .card-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(
        90deg,
        transparent,
        var(--accent-coral),
        var(--accent-amber),
        var(--accent-teal),
        var(--accent-cyan),
        transparent
    );
    border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
    opacity: 0.7;
}

main .dashboard-sidebar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(
        90deg,
        var(--accent-cyan),
        var(--accent-teal),
        var(--accent-amber),
        var(--accent-coral)
    );
    border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
    opacity: 0.6;
    z-index: 1;
}

main .stat-card {
    position: relative;
    overflow: hidden;
}

main .stat-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 100%;
    background: linear-gradient(
        180deg,
        var(--accent-cyan),
        var(--accent-teal)
    );
    opacity: 0.8;
}

main .events-table-wrapper,
main .info-section {
    position: relative;
    overflow: hidden;
}

main .events-table-wrapper::before,
main .info-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(
        90deg,
        transparent,
        var(--accent-cyan),
        var(--accent-teal),
        transparent
    );
    opacity: 0.6;
    z-index: 1;
}

/* ============================================================
   Form select - dark theme arrow and spacing
   ============================================================ */
main .form-select {
    background-color: rgba(15, 23, 42, 0.56) !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2394a3b8' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 0.75rem center !important;
    background-size: 16px 12px !important;
    padding-right: 2.25rem !important;
    border: 1px solid var(--glass-border) !important;
    color: var(--text-secondary) !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
}

main .form-select:focus {
    border-color: rgba(34, 211, 238, 0.4) !important;
    box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.12) !important;
}

main .form-select option {
    background: #1e293b;
    color: #e2e8f0;
}

/* ============================================================
   Empty state icon - dark glass theme
   ============================================================ */
main .empty-icon {
    background: rgba(34, 211, 238, 0.08) !important;
    border: 1px solid rgba(34, 211, 238, 0.2) !important;
}

main .empty-icon i {
    color: var(--accent-cyan) !important;
}

main .empty-state-title,
main .empty-state h3 {
    color: var(--text-primary) !important;
}

main .empty-state-text,
main .empty-state p {
    color: var(--text-muted) !important;
}

/* ============================================================
   Event description text readability
   ============================================================ */
main .event-description {
    color: var(--text-secondary) !important;
    line-height: 1.7 !important;
}

main .event-detail-page .card-body {
    color: var(--text-secondary) !important;
}

/* ============================================================
   Hero image sections
   ============================================================ */
main .hero-image,
section.hero-image {
    position: relative;
    overflow: hidden;
}

main .hero-image::before,
section.hero-image::before {
    content: none;
}

main .hero-image > *,
section.hero-image > * {
    position: relative;
    z-index: 2;
}

main .hero-image h1,
main .hero-image h2,
section.hero-image h1,
section.hero-image h2 {
    color: #f1f5f9 !important;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
}

main .hero-image p,
section.hero-image p {
    color: rgba(226, 232, 240, 0.9) !important;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
}

/* ============================================================
   Subtle, professional card hover effects site-wide
   ============================================================ */
main .card {
    transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease !important;
}

main .card:hover {
    border-color: rgba(34, 211, 238, 0.25) !important;
    box-shadow: 0 10px 30px rgba(2, 8, 23, 0.35), 0 0 12px rgba(34, 211, 238, 0.06) !important;
    transform: translateY(-2px);
}

main .glass-card {
    transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease !important;
}

main .glass-card:hover {
    border-color: rgba(34, 211, 238, 0.3) !important;
    box-shadow: 0 12px 36px rgba(2, 8, 23, 0.38), 0 0 16px rgba(34, 211, 238, 0.08) !important;
    transform: translateY(-2px);
}

/* V11 teacher card on homepage */
main .v11-teacher-grid .teacher-card.glass-card {
    overflow: hidden !important;
}

main .v11-teacher-grid .teacher-card.glass-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--accent-cyan), var(--accent-teal), var(--accent-coral));
    z-index: 1;
}

/* Instrument card hover */
main .instrument-card {
    transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease !important;
}

main .instrument-card:hover {
    border-color: rgba(34, 211, 238, 0.35) !important;
    box-shadow: 0 12px 36px rgba(2, 8, 23, 0.4), 0 0 16px rgba(34, 211, 238, 0.1) !important;
    transform: translateY(-3px);
}

@media print {
    body {
        background: #fff !important;
        color: #111 !important;
    }

    body::before {
        display: none !important;
    }

    .header,
    .footer,
    .beta-feedback-btn,
    .scroll-top-btn,
    .floating-messages-btn,
    .mobile-menu-toggle,
    .sidebar-floating-toggle {
        display: none !important;
    }

    .card,
    .table-container,
    .stat-card {
        background: #fff !important;
        border: 1px solid #d1d5db !important;
        color: #111 !important;
        box-shadow: none !important;
    }
}