/**
 * GenCalc - Theme Stylesheet
 * Temas Dark (padrão) e Light (PRO)
 */
/**
 * GenCalc v0.0.11
 * Build: b30979ff
 */

/* ============================================
   DARK THEME (Padrão)
   ============================================ */

[data-theme="dark"] {
    --bg-primary: #111827;
    --bg-secondary: #1f2937;
    --bg-tertiary: #374151;
    --bg-quaternary: #4b5563;

    --text-primary: #ffffff;
    --text-secondary: #9ca3af;
    --text-tertiary: #6b7280;

    --border-color: #374151;
    --shadow-color: rgba(0, 0, 0, 0.5);

    /* Calculator Button Colors */
    --btn-gray: #d1d5db;
    --btn-gray-text: #111827;
    --btn-gray-hover: #9ca3af;

    --btn-dark-gray: #374151;
    --btn-dark-gray-text: #ffffff;
    --btn-dark-gray-hover: #4b5563;

    --btn-orange: #f97316;
    --btn-orange-hover: #ea580c;

    --btn-red: #ef4444;
    --btn-red-hover: #dc2626;

    --btn-green: #10b981;
    --btn-green-hover: #059669;
}

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

body[data-theme="dark"] .app-container {
    background: var(--bg-primary);
}

body[data-theme="dark"] .content-area {
    background: var(--bg-secondary);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

body[data-theme="dark"] .tab-navigation {
    background: var(--bg-tertiary);
}

body[data-theme="dark"] .calculator-display {
    background: var(--bg-primary);
}

body[data-theme="dark"] .input-field,
body[data-theme="dark"] .select-field,
body[data-theme="dark"] .textarea-field {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

body[data-theme="dark"] .result-box {
    background: var(--bg-tertiary);
}

body[data-theme="dark"] .ai-result-box {
    background: linear-gradient(
        135deg,
        rgba(139, 92, 246, 0.2) 0%,
        rgba(99, 102, 241, 0.15) 50%,
        rgba(139, 92, 246, 0.2) 100%
    ) !important;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(139, 92, 246, 0.4) !important;
    box-shadow: 0 8px 32px rgba(139, 92, 246, 0.2) !important;
}

/* ============================================
   LIGHT THEME (PRO Feature)
   ============================================ */

[data-theme="light"] {
    --bg-primary: #f9fafb;
    --bg-secondary: #ffffff;
    --bg-tertiary: #f3f4f6;
    --bg-quaternary: #e5e7eb;

    --text-primary: #111827;
    --text-secondary: #6b7280;
    --text-tertiary: #9ca3af;

    --border-color: #e5e7eb;
    --shadow-color: rgba(0, 0, 0, 0.1);

    /* Calculator Button Colors */
    --btn-gray: #e5e7eb;
    --btn-gray-text: #111827;
    --btn-gray-hover: #d1d5db;

    --btn-dark-gray: #9ca3af;
    --btn-dark-gray-text: #111827;
    --btn-dark-gray-hover: #6b7280;

    --btn-orange: #f97316;
    --btn-orange-hover: #ea580c;

    --btn-red: #ef4444;
    --btn-red-hover: #dc2626;

    --btn-green: #10b981;
    --btn-green-hover: #059669;
}

body[data-theme="light"] {
    background: var(--bg-primary);
    color: var(--text-primary);
}

body[data-theme="light"] .app-container {
    background: var(--bg-primary);
}

body[data-theme="light"] .content-area {
    background: var(--bg-secondary);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
    border: 1px solid var(--border-color);
}

body[data-theme="light"] .tab-navigation {
    background: linear-gradient(
        180deg,
        rgba(237, 233, 254, 0.6) 0%,
        rgba(221, 214, 254, 0.5) 50%,
        rgba(196, 181, 253, 0.4) 100%
    );
    box-shadow:
        0 4px 12px rgba(139, 92, 246, 0.2),
        0 2px 8px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(139, 92, 246, 0.15);
    border-bottom: 2px solid rgba(139, 92, 246, 0.3);
    border-top: 1px solid rgba(139, 92, 246, 0.15);
}

body[data-theme="light"] .tab-btn {
    background: linear-gradient(
        145deg,
        rgba(249, 250, 251, 0.9),
        rgba(243, 244, 246, 0.7)
    );
    color: var(--text-secondary);
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.1),
        inset 0 1px 1px rgba(255, 255, 255, 0.9);
}

body[data-theme="light"] .tab-btn::before {
    background: linear-gradient(
        135deg,
        rgba(139, 92, 246, 0.08),
        rgba(59, 130, 246, 0.08)
    );
}

body[data-theme="light"] .tab-btn:hover {
    background: linear-gradient(
        145deg,
        rgba(243, 244, 246, 1),
        rgba(229, 231, 235, 0.9)
    );
    color: var(--text-primary);
    transform: translateY(-1px);
    box-shadow:
        0 4px 8px rgba(0, 0, 0, 0.12),
        inset 0 1px 2px rgba(255, 255, 255, 1);
    border-color: rgba(0, 0, 0, 0.12);
}

body[data-theme="light"] .tab-btn.active {
    background: linear-gradient(
        145deg,
        var(--bg-secondary),
        rgba(249, 250, 251, 0.95)
    );
    color: var(--color-primary);
    box-shadow:
        0 6px 16px rgba(139, 92, 246, 0.2),
        0 2px 8px rgba(0, 0, 0, 0.1),
        inset 0 1px 2px rgba(255, 255, 255, 1);
    border-color: rgba(139, 92, 246, 0.25);
    transform: translateY(0);
    font-weight: 700;
}

body[data-theme="light"] .calculator-display {
    background: linear-gradient(
        135deg,
        rgba(249, 250, 251, 0.98) 0%,
        rgba(243, 244, 246, 0.95) 50%,
        rgba(249, 250, 251, 0.98) 100%
    );
    box-shadow:
        inset 0 2px 8px rgba(0, 0, 0, 0.08),
        inset 0 -1px 2px rgba(139, 92, 246, 0.15),
        0 4px 12px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(139, 92, 246, 0.15);
}

body[data-theme="light"] .history-display {
    color: #1f2937;
    text-shadow: 0 0 20px rgba(124, 58, 237, 0.3);
}

body[data-theme="light"] .history-display:hover {
    opacity: 0.7;
}

body[data-theme="light"] .main-display {
    color: #10b981;
    text-shadow: 0 0 20px rgba(16, 185, 129, 0.4);
}

body[data-theme="light"] .calculator-keypad {
    background: linear-gradient(
        180deg,
        rgba(249, 250, 251, 0.5) 0%,
        rgba(243, 244, 246, 0.3) 100%
    );
}

body[data-theme="light"] .calc-btn-gray {
    background: linear-gradient(145deg, #f9fafb 0%, #e5e7eb 100%);
    color: #1f2937;
    border: 1px solid rgba(0, 0, 0, 0.1);
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.8);
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.15),
        inset 0 1px 2px rgba(255, 255, 255, 0.5);
}

body[data-theme="light"] .calc-btn-gray:hover {
    background: linear-gradient(145deg, #ffffff 0%, #f3f4f6 100%);
    box-shadow:
        0 6px 16px rgba(0, 0, 0, 0.2),
        inset 0 1px 2px rgba(255, 255, 255, 0.8);
}

body[data-theme="light"] .calc-btn-dark {
    background: linear-gradient(145deg, #6b7280 0%, #4b5563 100%);
    color: #ffffff;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

body[data-theme="light"] .calc-btn-dark:hover {
    background: linear-gradient(145deg, #9ca3af 0%, #6b7280 100%);
}

body[data-theme="light"] .calc-btn::before {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.3), transparent);
}

body[data-theme="light"] .about-title {
    background: linear-gradient(135deg, #8b5cf6, #6366f1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

body[data-theme="light"] .about-version {
    background: var(--bg-tertiary);
    color: var(--text-tertiary);
}

body[data-theme="light"] .about-version strong {
    color: var(--text-primary);
}

body[data-theme="light"] .btn-primary {
    background: linear-gradient(
        145deg,
        var(--bg-secondary),
        rgba(249, 250, 251, 0.95)
    );
    color: var(--color-primary);
    border: 1px solid rgba(139, 92, 246, 0.25);
    box-shadow:
        0 6px 16px rgba(139, 92, 246, 0.2),
        0 2px 8px rgba(0, 0, 0, 0.1),
        inset 0 1px 2px rgba(255, 255, 255, 1);
}

body[data-theme="light"] .btn-primary::before {
    background: linear-gradient(
        135deg,
        rgba(139, 92, 246, 0.1),
        rgba(59, 130, 246, 0.1)
    );
    opacity: 1;
}

body[data-theme="light"] .btn-primary:hover {
    background: linear-gradient(
        145deg,
        rgba(243, 244, 246, 1),
        rgba(229, 231, 235, 0.9)
    );
    color: var(--text-primary);
    transform: translateY(-1px);
    box-shadow:
        0 4px 8px rgba(0, 0, 0, 0.12),
        inset 0 1px 2px rgba(255, 255, 255, 1);
    border-color: rgba(139, 92, 246, 0.3);
}

body[data-theme="light"] .btn-primary:disabled {
    background: rgba(243, 244, 246, 0.5);
    border-color: rgba(0, 0, 0, 0.05);
    opacity: 0.5;
}

body[data-theme="light"] .pro-link {
    background: linear-gradient(
        145deg,
        var(--bg-secondary),
        rgba(249, 250, 251, 0.95)
    );
    color: var(--color-primary);
    border: 1px solid rgba(139, 92, 246, 0.25);
    box-shadow:
        0 6px 16px rgba(139, 92, 246, 0.2),
        0 2px 8px rgba(0, 0, 0, 0.1),
        inset 0 1px 2px rgba(255, 255, 255, 1);
}

body[data-theme="light"] .pro-link::before {
    background: linear-gradient(
        135deg,
        rgba(139, 92, 246, 0.1),
        rgba(59, 130, 246, 0.1)
    );
    opacity: 1;
}

body[data-theme="light"] .pro-link:hover {
    background: linear-gradient(
        145deg,
        rgba(243, 244, 246, 1),
        rgba(229, 231, 235, 0.9)
    );
    color: var(--text-primary);
    transform: translateY(-1px);
    box-shadow:
        0 4px 8px rgba(0, 0, 0, 0.12),
        inset 0 1px 2px rgba(255, 255, 255, 1);
    border-color: rgba(139, 92, 246, 0.3);
}

body[data-theme="light"] .btn-install {
    background: linear-gradient(
        145deg,
        var(--bg-secondary),
        rgba(249, 250, 251, 0.95)
    );
    color: var(--color-primary);
    border: 1px solid rgba(139, 92, 246, 0.25);
    box-shadow:
        0 6px 16px rgba(139, 92, 246, 0.2),
        0 2px 8px rgba(0, 0, 0, 0.1),
        inset 0 1px 2px rgba(255, 255, 255, 1);
}

body[data-theme="light"] .btn-install::before {
    background: linear-gradient(
        135deg,
        rgba(139, 92, 246, 0.1),
        rgba(59, 130, 246, 0.1)
    );
    opacity: 1;
}

body[data-theme="light"] .btn-install:hover {
    background: linear-gradient(
        145deg,
        rgba(243, 244, 246, 1),
        rgba(229, 231, 235, 0.9)
    );
    color: var(--text-primary);
    transform: translateY(-1px);
    box-shadow:
        0 4px 8px rgba(0, 0, 0, 0.12),
        inset 0 1px 2px rgba(255, 255, 255, 1);
    border-color: rgba(139, 92, 246, 0.3);
}

body[data-theme="light"] .btn-contact {
    background: linear-gradient(
        145deg,
        var(--bg-secondary),
        rgba(249, 250, 251, 0.95)
    );
    color: var(--color-primary);
    border: 1px solid rgba(139, 92, 246, 0.25);
    box-shadow:
        0 6px 16px rgba(139, 92, 246, 0.2),
        0 2px 8px rgba(0, 0, 0, 0.1),
        inset 0 1px 2px rgba(255, 255, 255, 1);
}

body[data-theme="light"] .btn-contact::before {
    background: linear-gradient(
        135deg,
        rgba(139, 92, 246, 0.1),
        rgba(59, 130, 246, 0.1)
    );
    opacity: 1;
}

body[data-theme="light"] .btn-contact:hover {
    background: linear-gradient(
        145deg,
        rgba(243, 244, 246, 1),
        rgba(229, 231, 235, 0.9)
    );
    color: var(--text-primary);
    transform: translateY(-2px);
    box-shadow:
        0 8px 20px rgba(139, 92, 246, 0.3),
        0 4px 12px rgba(0, 0, 0, 0.15),
        inset 0 1px 2px rgba(255, 255, 255, 1);
    border-color: rgba(139, 92, 246, 0.35);
}

body[data-theme="light"] .calculator-display {
    background: var(--bg-tertiary);
}

body[data-theme="light"] .main-display {
    color: #10b981;
    text-shadow: 0 0 20px rgba(16, 185, 129, 0.4);
}

body[data-theme="light"] .input-field,
body[data-theme="light"] .select-field,
body[data-theme="light"] .textarea-field {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border-color: var(--border-color);
}

body[data-theme="light"] .input-field:focus,
body[data-theme="light"] .select-field:focus,
body[data-theme="light"] .textarea-field:focus {
    background: #ffffff;
    border-color: var(--color-primary);
}

body[data-theme="light"] .result-box {
    background: var(--bg-tertiary);
}

body[data-theme="light"] .ai-result-box {
    background: linear-gradient(
        135deg,
        rgba(139, 92, 246, 0.12) 0%,
        rgba(99, 102, 241, 0.08) 50%,
        rgba(139, 92, 246, 0.12) 100%
    );
    backdrop-filter: blur(10px);
    border: 1px solid rgba(139, 92, 246, 0.25);
    box-shadow: 0 8px 32px rgba(139, 92, 246, 0.12);
}

body[data-theme="light"] .icon-btn {
    color: var(--text-secondary);
}

body[data-theme="light"] .icon-btn:hover {
    color: var(--color-primary);
    background: var(--bg-tertiary);
}

body[data-theme="light"] .app-title {
    background: linear-gradient(135deg, #7c3aed 0%, #6366f1 50%, #2563eb 100%);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow:
        0 0 15px rgba(124, 58, 237, 0.3),
        0 0 30px rgba(99, 102, 241, 0.2);
}

body[data-theme="light"] .feature-title {
    background: linear-gradient(135deg, #7c3aed 0%, #6366f1 50%, #2563eb 100%);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow:
        0 0 15px rgba(124, 58, 237, 0.3),
        0 0 30px rgba(99, 102, 241, 0.2);
}

/* History Modal - Light Theme */
body[data-theme="light"] .history-item {
    background: rgba(124, 58, 237, 0.08);
    border-color: rgba(124, 58, 237, 0.2);
}

body[data-theme="light"] .history-item:hover {
    background: rgba(124, 58, 237, 0.15);
    border-color: rgba(124, 58, 237, 0.4);
}

body[data-theme="light"] .history-item-expression {
    color: #6b7280;
}

body[data-theme="light"] .history-item-result {
    color: #1f2937;
}

body[data-theme="light"] .pagination-btn {
    background: #f3f4f6;
    border-color: rgba(124, 58, 237, 0.25);
}

body[data-theme="light"] .pagination-btn:hover:not(:disabled) {
    background: rgba(124, 58, 237, 0.12);
    border-color: rgba(124, 58, 237, 0.5);
}

body[data-theme="light"] .page-info {
    color: #4b5563;
}

body[data-theme="light"] .feature-subtitle {
    color: var(--text-secondary);
}

body[data-theme="light"] .feature-note {
    color: var(--text-tertiary);
}

body[data-theme="light"] .result-label {
    color: var(--text-secondary);
}

body[data-theme="light"] .ai-result {
    color: var(--text-primary);
}

body[data-theme="light"] .ai-result code {
    background: rgba(0, 0, 0, 0.08);
    color: var(--text-primary);
}

body[data-theme="light"] .ai-result pre {
    background: rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(0, 0, 0, 0.1);
}

body[data-theme="light"] .ai-result blockquote {
    border-left-color: var(--primary);
    color: var(--text-secondary);
}

/* ============================================
   MODAL THEMING
   ============================================ */

body[data-theme="light"] .modal {
    background: rgba(0, 0, 0, 0.5);
}

body[data-theme="light"] .modal-content {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

body[data-theme="light"] .modal-header {
    border-bottom-color: var(--border-color);
    background: var(--bg-primary);
}

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

body[data-theme="light"] .setting-group {
    background: var(--bg-tertiary);
}

body[data-theme="light"] .toggle-btn {
    background: var(--bg-quaternary);
    color: var(--text-secondary);
}

body[data-theme="light"] .toggle-btn:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

body[data-theme="light"] .toggle-btn.active {
    background: var(--color-primary);
    color: white;
}

/* ============================================
   CALCULATOR BUTTONS THEMING
   ============================================ */

body[data-theme="light"] .calc-btn-gray {
    background: var(--btn-gray);
    color: var(--btn-gray-text);
}

body[data-theme="light"] .calc-btn-gray:hover {
    background: var(--btn-gray-hover);
}

body[data-theme="light"] .calc-btn-dark {
    background: var(--btn-dark-gray);
    color: var(--btn-dark-gray-text);
}

body[data-theme="light"] .calc-btn-dark:hover {
    background: var(--btn-dark-gray-hover);
}

/* ============================================
   SCROLLBAR THEMING
   ============================================ */

body[data-theme="light"] ::-webkit-scrollbar-track {
    background: var(--bg-tertiary);
}

body[data-theme="light"] ::-webkit-scrollbar-thumb {
    background: var(--bg-quaternary);
}

body[data-theme="light"] ::-webkit-scrollbar-thumb:hover {
    background: #9ca3af;
}

/* ============================================
   INSTALL PROMPT THEMING
   ============================================ */

body[data-theme="light"] .install-prompt {
    background: var(--bg-secondary);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.2);
    border: 1px solid var(--border-color);
}

body[data-theme="light"] .install-prompt-content h3 {
    color: var(--text-primary);
}

body[data-theme="light"] .install-prompt-content p {
    color: var(--text-secondary);
}

body[data-theme="light"] .btn-dismiss {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
}

body[data-theme="light"] .btn-dismiss:hover {
    background: var(--bg-quaternary);
    color: var(--text-primary);
}

/* ============================================
   LOADING SCREEN THEMING
   ============================================ */

body[data-theme="light"] .loading-screen {
    background: var(--bg-primary);
}

body[data-theme="light"] .loader {
    border-color: var(--bg-quaternary);
    border-top-color: var(--color-primary);
}

body[data-theme="light"] .loading-screen p {
    color: var(--text-secondary);
}

/* ============================================
   THEME TRANSITION
   ============================================ */

body {
    transition:
        background-color 0.3s ease,
        color 0.3s ease;
}

.app-container,
.content-area,
.tab-navigation,
.calculator-display,
.input-field,
.select-field,
.textarea-field,
.result-box,
.ai-result-box,
.modal-content,
.install-prompt {
    transition:
        background-color 0.3s ease,
        color 0.3s ease,
        border-color 0.3s ease;
}

/* ============================================
   COLOR SCHEME PREFERENCE (Auto-detect)
   ============================================ */

@media (prefers-color-scheme: light) {
    :root {
        /* Se o usuário preferir light e for PRO, aplica automaticamente */
    }
}

@media (prefers-color-scheme: dark) {
    :root {
        /* Dark é o padrão */
    }
}