/* Dragon Crusade User Panel - Light & Dark Theme Variants */

/* Light Theme (Default) */
[data-theme="light"] {
    --primary: #6750A4;
    --on-primary: #FFFFFF;
    --primary-container: #EADDFF;
    --on-primary-container: #21005D;

    --secondary: #625B71;
    --on-secondary: #FFFFFF;
    --secondary-container: #E8DEF8;
    --on-secondary-container: #1F192C;

    --surface: #FEF7FF;
    --on-surface: #1D1B20;
    --surface-variant: #E7E0EC;
    --on-surface-variant: #49454F;

    --error: #BA1A1A;
    --outline: #79747E;
    --outline-variant: #CAC4D0;
}

/* Dark Theme */
[data-theme="dark"] {
    --primary: #D0BCFF;
    --on-primary: #381E72;
    --primary-container: #4F378B;
    --on-primary-container: #EADDFF;

    --secondary: #CCC2DC;
    --on-secondary: #332D41;
    --secondary-container: #4A4458;
    --on-secondary-container: #E8DEF8;

    --surface: #1D1B20;
    --on-surface: #E6E0E9;
    --surface-variant: #49454F;
    --on-surface-variant: #CAC4D0;

    --error: #FFB4AB;
    --outline: #938F99;
    --outline-variant: #49454F;
}

/* Smooth transitions when switching themes */
[data-theme] * {
    transition: background-color 300ms, color 300ms, border-color 300ms, box-shadow 300ms;
}

[data-theme] input,
[data-theme] textarea,
[data-theme] select {
    transition: background-color 300ms, color 300ms, border-color 300ms;
}

/* Dark theme specific adjustments */
[data-theme="dark"] .card {
    border-color: var(--surface-variant);
}

[data-theme="dark"] .alert-success {
    background: #1B5E201A;
    border-color: var(--success);
}

[data-theme="dark"] .alert-error {
    background: #B71C1C1A;
    border-color: var(--error);
}

[data-theme="dark"] .alert-warning {
    background: #E651001A;
    border-color: var(--warning);
}

[data-theme="dark"] .alert-info {
    background: #0D47A11A;
    border-color: var(--info);
}

[data-theme="dark"] .table {
    border-color: var(--surface-variant);
}

[data-theme="dark"] .table thead {
    background: var(--primary-container);
    color: var(--on-primary-container);
}

[data-theme="dark"] .table tbody tr:hover {
    background: var(--primary-container);
}

[data-theme="dark"] .table th,
[data-theme="dark"] .table td {
    border-color: var(--surface-variant);
}

/* Scrollbar styling for dark theme */
[data-theme="dark"] ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

[data-theme="dark"] ::-webkit-scrollbar-track {
    background: var(--surface-variant);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: var(--outline);
    border-radius: 4px;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: var(--on-surface-variant);
}

/* Light theme scrollbar */
[data-theme="light"] ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

[data-theme="light"] ::-webkit-scrollbar-track {
    background: var(--surface-variant);
}

[data-theme="light"] ::-webkit-scrollbar-thumb {
    background: var(--outline);
    border-radius: 4px;
}

[data-theme="light"] ::-webkit-scrollbar-thumb:hover {
    background: var(--on-surface-variant);
}

/* Firefox scrollbar styling */
* {
    scrollbar-color: var(--outline) var(--surface-variant);
    scrollbar-width: thin;
}

/* Placeholder text color adjustments */
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
    color: var(--on-surface-variant);
    opacity: 0.7;
}

[data-theme="light"] input::placeholder,
[data-theme="light"] textarea::placeholder {
    color: var(--on-surface-variant);
    opacity: 0.7;
}

/* Code blocks */
[data-theme="dark"] code,
[data-theme="dark"] pre {
    background: var(--surface-variant);
    color: var(--on-surface);
}

[data-theme="light"] code,
[data-theme="light"] pre {
    background: var(--surface-variant);
    color: var(--on-surface);
}

/* Links */
a {
    color: var(--primary);
    text-decoration: none;
    transition: color 300ms;
}

a:hover {
    color: var(--primary-container);
    text-decoration: underline;
}

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

/* Selection color */
::selection {
    background: var(--primary);
    color: var(--on-primary);
}

::-moz-selection {
    background: var(--primary);
    color: var(--on-primary);
}

/* Print styles */
@media print {
    [data-theme] {
        --surface: white;
        --on-surface: black;
        --primary: #6750A4;
    }

    .no-print {
        display: none;
    }

    body {
        background: white;
        color: black;
    }
}