/* assets/css/dark-theme.css - Dark mode med komplett Auth + Profile Overlay support */

/* Dark Mode Variables */
body.dark {
    --primary-color: #e67e22;
    --primary-dark: #d35400;
    --text-primary: #e1e1e1;
    --text-secondary: #aaa;
    --text-muted: #888;
    --background: #1a1a1a;
    --background-card: #2d2d2d;
    --border-color: #444;
    --border-hover: #e67e22;
    --success-color: #27ae60;
    --warning-color: #f39c12;
    --error-color: #e74c3c;
    --shadow: 0 1px 3px rgba(0,0,0,0.3);
    --shadow-hover: 0 4px 12px rgba(0,0,0,0.4);
}

/* Base Dark Mode */
body.dark {
    background: var(--background);
    color: var(--text-primary);
}

/* Cards and Panels */
body.dark .main-panel,
body.dark .side-menu,
body.dark .auth-content,
body.dark .limit-content,
body.dark .language-content,
body.dark .profile-content {
    background: var(--background-card);
    color: var(--text-primary);
}

/* ===================================== */
/* AUTH OVERLAY DARK MODE - KOMPLETT */
/* ===================================== */

/* Auth Overlay Container */
body.dark .auth-overlay {
    background: rgba(0, 0, 0, 0.8) !important;
}

/* Auth Content */
body.dark .auth-content {
    background: var(--background-card) !important;
    color: var(--text-primary) !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6) !important;
}

/* Auth Header */
body.dark .auth-header {
    background: #333 !important;
    border-bottom: 1px solid var(--border-color) !important;
}

body.dark .auth-header h2 {
    color: var(--text-primary) !important;
}

body.dark .auth-close {
    background: rgba(255, 255, 255, 0.05) !important;
    color: var(--text-secondary) !important;
}

body.dark .auth-close:hover {
    background: rgba(230, 126, 34, 0.1) !important;
    color: var(--primary-color) !important;
}

/* Auth Body */
body.dark .auth-body {
    background: var(--background-card) !important;
}

/* Auth Views */
body.dark #signup-view h3,
body.dark #signin-view h3 {
    color: var(--text-primary) !important;
}

/* Form Elements Dark Mode */
body.dark .email-form input {
    background: #333 !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

body.dark .email-form input:focus {
    border-color: var(--primary-color) !important;
    background: #3a3a3a !important;
    box-shadow: 0 0 0 3px rgba(230, 126, 34, 0.1) !important;
}

body.dark .email-form input::placeholder {
    color: var(--text-muted) !important;
}

body.dark .email-form button[type="submit"] {
    background: var(--primary-color) !important;
    color: white !important;
}

body.dark .email-form button[type="submit"]:hover {
    background: var(--primary-dark) !important;
}

body.dark .email-form button[type="submit"]:disabled {
    background: #555 !important;
    color: #888 !important;
}

/* Google OAuth Button Dark Mode */
body.dark #google-signup,
body.dark #google-signin {
    background: #333 !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

body.dark #google-signup:hover,
body.dark #google-signin:hover {
    background: #3a3a3a !important;
    border-color: var(--primary-color) !important;
}

/* Divider Dark Mode */
body.dark .auth-divider {
    color: var(--text-muted) !important;
}

body.dark .auth-divider::before {
    background: var(--border-color) !important;
}

body.dark .auth-divider span {
    background: var(--background-card) !important;
}

/* Auth Footer Dark Mode */
body.dark .auth-footer {
    color: var(--text-secondary) !important;
}

body.dark .auth-footer a {
    color: var(--primary-color) !important;
}

/* Error and Success Messages Dark Mode */
body.dark .auth-error-message {
    background: #3f1a1a !important;
    border-color: #5a2d2d !important;
    color: #f47f7f !important;
}

body.dark .auth-success-message {
    background: #1a3f1a !important;
    border-color: #2d5a2d !important;
    color: #7fd17f !important;
}

/* ===================================== */
/* PROFILE OVERLAY DARK MODE - KOMPLETT */
/* ===================================== */

/* Profile Overlay Container */
body.dark .profile-overlay {
    background: rgba(0, 0, 0, 0.8) !important;
}

/* Profile Content */
body.dark .profile-content {
    background: var(--background-card) !important;
    color: var(--text-primary) !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6) !important;
}

/* Profile Header */
body.dark .profile-header {
    background: #333 !important;
    border-bottom: 1px solid var(--border-color) !important;
}

body.dark .profile-title {
    color: var(--text-primary) !important;
}

body.dark .close-profile {
    color: var(--text-secondary) !important;
}

body.dark .close-profile:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    color: var(--text-primary) !important;
}

/* Profile Body */
body.dark .profile-body {
    background: var(--background-card) !important;
}

/* Profile Sections */
body.dark .profile-section {
    border-bottom: 1px solid var(--border-color) !important;
}

body.dark .profile-section-title {
    color: var(--text-primary) !important;
}

/* Profile Fields */
body.dark .profile-field label {
    color: var(--text-secondary) !important;
}

body.dark .profile-field span {
    color: var(--text-primary) !important;
}

/* Plan Badges Dark Mode */
body.dark .plan-badge.free {
    background: #374151 !important;
    color: #9ca3af !important;
}

body.dark .plan-badge.learner {
    background: #1e3a8a !important;
    color: #93c5fd !important;
}

body.dark .plan-badge.builder {
    background: #064e3b !important;
    color: #6ee7b7 !important;
}

body.dark .plan-badge.master {
    background: #78350f !important;
    color: #fcd34d !important;
}

/* Requests Info */
body.dark .requests-info {
    color: var(--text-secondary) !important;
}

/* Status Indicators */
body.dark .status-indicator {
    color: var(--text-primary) !important;
}

body.dark .status-dot {
    background: #6b7280 !important;
}

body.dark .status-dot.active {
    background: #10b981 !important;
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.3) !important;
}

body.dark .status-dot.cancelled {
    background: #ef4444 !important;
    box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.3) !important;
}

/* Renewal Info */
body.dark .renewal-info small {
    color: var(--text-secondary) !important;
}

/* Usage Stats Dark Mode */
body.dark .stat-item {
    background: #333 !important;
}

body.dark .stat-value {
    color: var(--text-primary) !important;
}

body.dark .stat-label {
    color: var(--text-secondary) !important;
}

body.dark .usage-chart {
    background: #333 !important;
}

body.dark .chart-bar {
    background: #555 !important;
}

body.dark .chart-info {
    color: var(--text-secondary) !important;
}

/* Profile Buttons Dark Mode */
body.dark .profile-section .btn-secondary {
    background: var(--text-secondary) !important;
    color: white !important;
}

body.dark .profile-section .btn-secondary:hover {
    background: var(--text-primary) !important;
}

body.dark .profile-section .btn-outline {
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
    background: transparent !important;
}

body.dark .profile-section .btn-outline:hover {
    border-color: var(--primary-color) !important;
    background: rgba(230, 126, 34, 0.1) !important;
    color: var(--primary-color) !important;
}

body.dark .profile-section .btn-danger {
    background: #dc2626 !important;
    color: white !important;
}

body.dark .profile-section .btn-danger:hover {
    background: #b91c1c !important;
}

body.dark .profile-section .btn-danger-outline {
    border-color: #dc2626 !important;
    color: #dc2626 !important;
    background: transparent !important;
}

body.dark .profile-section .btn-danger-outline:hover {
    background: rgba(220, 38, 38, 0.1) !important;
    border-color: #b91c1c !important;
    color: #b91c1c !important;
}

/* ===================================== */
/* ÖVRIG DARK MODE STYLING */
/* ===================================== */

/* Mode Tabs */
body.dark .mode-tabs {
    background: #333;
    border-bottom-color: var(--border-color);
}

body.dark .mode-tab {
    color: var(--text-secondary);
}

body.dark .mode-tab:hover {
    color: var(--text-primary);
    background: #3a3a3a;
}

body.dark .mode-tab.active {
    color: var(--primary-color);
    background: var(--background-card);
}

/* Form Elements */
body.dark .code-input,
body.dark .form-input,
body.dark .convert-select,
body.dark .results-output {
    background: #333;
    border-color: var(--border-color);
    color: var(--text-primary);
}

body.dark .code-input:focus,
body.dark .form-input:focus {
    border-color: var(--primary-color);
    background: #3a3a3a;
}

body.dark .code-input::placeholder {
    color: #666;
}

/* Buttons */
body.dark .preset-btn,
body.dark .btn,
body.dark .oauth-btn,
body.dark .input-btn,
body.dark .language-option {
    background: #333;
    border-color: var(--border-color);
    color: var(--text-secondary);
}

body.dark .preset-btn:hover,
body.dark .btn:hover,
body.dark .oauth-btn:hover,
body.dark .input-btn:hover,
body.dark .language-option:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
    background: #3a3a3a;
}

body.dark .preset-btn.active,
body.dark .language-option.active {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
}

/* Primary buttons stay the same in dark mode */
body.dark .btn-primary,
body.dark .transform-btn,
body.dark .form-btn {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
}

body.dark .btn-primary:hover,
body.dark .transform-btn:hover:not(:disabled),
body.dark .form-btn:hover {
    background: var(--primary-dark);
    border-color: var(--primary-dark);
}

/* Usage Indicator */
body.dark .usage-indicator {
    background: #333;
    color: var(--text-secondary);
    border-color: var(--border-color);
}

body.dark .usage-indicator.warning {
    background: #3d2f00;
    color: #ff9800;
    border-color: #5a4300;
}

/* Requests Counter och User Email */
body.dark .requests-counter {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

body.dark .requests-count,
body.dark .requests-label,
body.dark .user-email {
    color: #fff !important;
}

/* Borders */
body.dark .top-bar,
body.dark .language-header,
body.dark .side-menu-header,
body.dark .results-section {
    border-color: var(--border-color);
}

/* Headings and Titles */
body.dark .logo,
body.dark .language-title,
body.dark .side-menu-title,
body.dark .auth-title,
body.dark .limit-title {
    color: var(--text-primary);
}

/* Secondary Text */
body.dark .suggestion-text,
body.dark .auth-subtitle,
body.dark .limit-message {
    color: var(--text-secondary);
}

/* Labels */
body.dark .suggestion-label,
body.dark .input-label,
body.dark .results-title,
body.dark .menu-section-title,
body.dark .form-label {
    color: var(--text-muted);
}

/* Menu Items */
body.dark .menu-item {
    border-bottom-color: var(--border-color);
}

body.dark .menu-item:hover {
    background: #3a3a3a;
}

body.dark .menu-item-content {
    color: var(--text-primary);
}

body.dark .menu-item-content small {
    color: var(--text-secondary);
}

/* Auth Footer and Divider */
body.dark .auth-footer,
body.dark .divider {
    color: var(--text-secondary);
}

body.dark .divider::before {
    background: var(--border-color);
}

body.dark .divider span {
    background: var(--background-card);
}

body.dark .auth-footer a {
    color: var(--primary-color);
}

/* Hamburger Menu */
body.dark .hamburger:hover {
    background: #3a3a3a;
}

body.dark .hamburger-line {
    background: var(--text-secondary);
}

/* Close Buttons */
body.dark .close-menu,
body.dark .close-language,
body.dark .auth-close,
body.dark .close-profile {
    color: var(--text-secondary);
}

body.dark .close-language:hover,
body.dark .auth-close:hover,
body.dark .close-profile:hover {
    background: #3a3a3a;
    color: var(--text-primary);
}

/* Messages */
body.dark .success-message {
    background: #1a3f1a;
    border-color: #2d5a2d;
    color: #7fd17f;
}

body.dark .error-message {
    background: #3f1a1a;
    border-color: #5a2d2d;
    color: #f47f7f;
}

/* Overlays */
body.dark .side-menu-overlay,
body.dark .auth-overlay,
body.dark .limit-overlay,
body.dark .language-overlay,
body.dark .profile-overlay {
    background: rgba(0, 0, 0, 0.8);
}

/* Scrollbar Dark Mode */
body.dark ::-webkit-scrollbar-track {
    background: #333;
}

body.dark ::-webkit-scrollbar-thumb {
    background: #555;
}

body.dark ::-webkit-scrollbar-thumb:hover {
    background: #666;
}

/* Language Options */
body.dark .language-option.active {
    background: var(--primary-color);
    color: white;
}

/* Convert Arrow */
body.dark .convert-arrow {
    color: var(--text-muted);
}

/* OAuth Icons - Keep original colors in dark mode */
body.dark .oauth-icon path[fill="#4285f4"],
body.dark .oauth-icon path[fill="#34a853"],
body.dark .oauth-icon path[fill="#fbbc05"],
body.dark .oauth-icon path[fill="#ea4335"] {
    /* Google colors remain unchanged */
}

body.dark .oauth-icon[fill="currentColor"] {
    /* GitHub icon uses current color */
    color: var(--text-primary);
}

/* Special Dark Mode Adjustments */
body.dark .code-input,
body.dark .results-output {
    background: #2a2a2a;
    border-color: var(--border-color);
}

body.dark .mode-tabs {
    background: #333;
}

/* Loading Animation Dark Mode */
body.dark .loading::after {
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.1),
        transparent
    );
}

/* Selection Colors Dark Mode */
body.dark ::selection {
    background: var(--primary-color);
    color: white;
}

/* Slide Toggle Dark Mode */
body.dark .slide-toggle {
    background: #555 !important;
}

body.dark .slide-toggle.active {
    background: var(--primary-color) !important;
}

/* Pricing Tier Dark Mode */
body.dark .pricing-tier {
    background: #333;
    border-color: var(--border-color);
}

body.dark .pricing-tier:hover {
    border-color: var(--primary-color);
}

body.dark .pricing-tier h3 {
    color: var(--text-primary);
}

body.dark .pricing-tier .price {
    color: var(--primary-color);
}

body.dark .pricing-tier p {
    color: var(--text-secondary);
}

/* Cancel Subscription Dialog Dark Mode */
body.dark .cancel-subscription-dialog {
    background: var(--background-card);
    color: var(--text-primary);
}

body.dark .cancel-subscription-title {
    color: var(--text-primary);
}

body.dark .cancel-subscription-message {
    color: var(--text-secondary);
}

body.dark .cancel-subscription-info-box {
    background: #3d2f00;
    border-color: #5a4300;
}

body.dark .cancel-subscription-info-box h4 {
    color: #fcd34d;
}

body.dark .cancel-subscription-info-box p {
    color: #a8a29e;
}

/* Toast Messages Dark Mode */
body.dark .success-toast {
    background: #1a3f1a !important;
    color: #7fd17f !important;
    border: 1px solid #2d5a2d !important;
}

body.dark .error-toast {
    background: #3f1a1a !important;
    color: #f47f7f !important;
    border: 1px solid #5a2d2d !important;
}

/* Confirm Dialog Dark Mode */
body.dark .confirm-dialog-overlay > div {
    background: var(--background-card) !important;
    color: var(--text-primary) !important;
}

body.dark .confirm-dialog-overlay p {
    color: var(--text-primary) !important;
}

/* Email Confirmation Overlay Dark Mode */
body.dark #email-confirmation-overlay .auth-content {
    background: var(--background-card) !important;
    color: var(--text-primary) !important;
}

body.dark #email-confirmation-overlay h2 {
    color: var(--text-primary) !important;
}

body.dark #email-confirmation-overlay p {
    color: var(--text-secondary) !important;
}

body.dark #email-confirmation-overlay button {
    background: var(--text-secondary) !important;
    color: white !important;
}

body.dark #email-confirmation-overlay button:hover {
    background: var(--text-primary) !important;
}