/* ============================================
   主题系统 - CSS 变量定义
   通过 [data-theme="xxx"] 切换主题
   新增主题只需添加新的 [data-theme="xxx"] 块
   ============================================ */

/* ---- 暗色主题（默认，保持原有风格） ---- */
:root,
[data-theme="dark"] {
    --oidc-bg-gradient: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
    --oidc-bg-overlay-1: rgba(120, 119, 198, 0.1);
    --oidc-bg-overlay-2: rgba(255, 119, 198, 0.1);
    --oidc-bg-overlay-3: rgba(120, 219, 255, 0.1);

    --oidc-card-bg: rgba(255, 255, 255, 0.05);
    --oidc-card-border: rgba(255, 255, 255, 0.1);
    --oidc-card-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);

    --oidc-text-primary: #ffffff;
    --oidc-text-regular: rgba(255, 255, 255, 0.8);
    --oidc-text-muted: rgba(255, 255, 255, 0.5);
    --oidc-text-link: #a78bfa;
    --oidc-text-link-hover: #c4b5fd;

    --oidc-input-bg: rgba(255, 255, 255, 0.08);
    --oidc-input-bg-focus: rgba(255, 255, 255, 0.12);
    --oidc-input-border: rgba(255, 255, 255, 0.15);
    --oidc-input-text: #ffffff;
    --oidc-input-placeholder: rgba(255, 255, 255, 0.4);
    --oidc-input-focus-border: rgba(120, 119, 198, 0.5);
    --oidc-input-focus-shadow: rgba(120, 119, 198, 0.15);
    --oidc-select-option-bg: #1e1b4b;

    --oidc-label-text: rgba(255, 255, 255, 0.8);

    --oidc-sidebar-bg: rgba(15, 12, 41, 0.8);
    --oidc-sidebar-border: rgba(255, 255, 255, 0.1);
    --oidc-sidebar-text: rgba(255, 255, 255, 0.6);
    --oidc-sidebar-text-hover: #ffffff;
    --oidc-sidebar-hover-bg: rgba(102, 126, 234, 0.15);
    --oidc-sidebar-active-bg: linear-gradient(135deg, rgba(102, 126, 234, 0.3) 0%, rgba(118, 75, 162, 0.3) 100%);
    --oidc-sidebar-active-border: rgba(102, 126, 234, 0.3);

    --oidc-header-bg: rgba(255, 255, 255, 0.05);
    --oidc-header-border: rgba(255, 255, 255, 0.1);
    --oidc-header-title: #ffffff;
    --oidc-header-user-text: rgba(255, 255, 255, 0.6);
    --oidc-header-user-icon: #a78bfa;

    --oidc-table-text: rgba(255, 255, 255, 0.8);
    --oidc-table-head-text: #ffffff;
    --oidc-table-head-bg: rgba(255, 255, 255, 0.05);
    --oidc-table-border: rgba(255, 255, 255, 0.1);
    --oidc-table-row-border: rgba(255, 255, 255, 0.05);
    --oidc-table-hover-bg: rgba(255, 255, 255, 0.05);

    --oidc-hr-border: rgba(255, 255, 255, 0.1);
    --oidc-code-bg: rgba(255, 255, 255, 0.1);
    --oidc-code-text: #a78bfa;

    --oidc-check-bg: rgba(255, 255, 255, 0.1);
    --oidc-check-border: rgba(255, 255, 255, 0.3);
    --oidc-check-label: rgba(255, 255, 255, 0.8);

    --oidc-btn-social-bg: rgba(255, 255, 255, 0.1);
    --oidc-btn-social-hover-bg: rgba(255, 255, 255, 0.15);
    --oidc-btn-social-text: #ffffff;

    --oidc-btn-outline-text: #ffffff;
    --oidc-btn-outline-danger-text: #fca5a5;
    --oidc-btn-outline-warning-text: #fcd34d;

    --oidc-alert-success-bg: rgba(34, 197, 94, 0.15);
    --oidc-alert-success-text: #86efac;
    --oidc-alert-success-border: rgba(34, 197, 94, 0.3);
    --oidc-alert-danger-bg: rgba(239, 68, 68, 0.15);
    --oidc-alert-danger-text: #fca5a5;
    --oidc-alert-danger-border: rgba(239, 68, 68, 0.3);
    --oidc-alert-info-bg: rgba(59, 130, 246, 0.15);
    --oidc-alert-info-text: #93c5fd;
    --oidc-alert-info-border: rgba(59, 130, 246, 0.3);

    --oidc-badge-success-bg: rgba(34, 197, 94, 0.2);
    --oidc-badge-success-text: #86efac;
    --oidc-badge-danger-bg: rgba(239, 68, 68, 0.2);
    --oidc-badge-danger-text: #fca5a5;
    --oidc-badge-warning-bg: rgba(245, 158, 11, 0.2);
    --oidc-badge-warning-text: #fcd34d;
    --oidc-badge-info-bg: rgba(59, 130, 246, 0.2);
    --oidc-badge-info-text: #93c5fd;

    --oidc-theme-toggle-icon: "\F2AE"; /* bi-moon */
    --oidc-theme-toggle-text: #ffffff;

    /* 独立页面（Login/Register/Home 等）专用变量 */
    --oidc-standalone-bg: radial-gradient(circle at 20% 30%, #0B1120, #030614);
    --oidc-standalone-card-bg: rgba(18, 25, 45, 0.55);
    --oidc-standalone-card-border: rgba(72, 120, 255, 0.25);
    --oidc-standalone-card-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 0 0 0 0.5px rgba(72, 120, 255, 0.2) inset;
    --oidc-standalone-card-hover-shadow: 0 25px 45px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(72, 120, 255, 0.4) inset;
    --oidc-standalone-title: #F0F3FA;
    --oidc-standalone-greeting: #9aa9c7;
    --oidc-standalone-input-bg: rgba(12, 20, 35, 0.6);
    --oidc-standalone-input-border: rgba(72, 120, 255, 0.35);
    --oidc-standalone-input-text: #eef2ff;
    --oidc-standalone-input-placeholder: #6a7c9f;
    --oidc-standalone-input-focus-bg: rgba(18, 28, 45, 0.8);
    --oidc-standalone-input-focus-border: #3b82f6;
    --oidc-standalone-input-focus-shadow: rgba(59, 130, 246, 0.2);
    --oidc-standalone-link: #9aaacb;
    --oidc-standalone-link-hover: #3b82f6;
    --oidc-standalone-muted: rgba(255, 255, 255, 0.4);
    --oidc-standalone-copyright: #4f5e83;
    --oidc-standalone-social-bg: rgba(255, 255, 255, 0.1);
    --oidc-standalone-social-border: rgba(255, 255, 255, 0.15);
    --oidc-standalone-social-text: #fff;
    --oidc-standalone-social-hover-bg: rgba(255, 255, 255, 0.2);
    --oidc-standalone-secondary-btn-bg: rgba(255, 255, 255, 0.06);
    --oidc-standalone-secondary-btn-border: rgba(255, 255, 255, 0.12);
    --oidc-standalone-secondary-btn-text: rgba(255, 255, 255, 0.7);
    --oidc-standalone-secondary-btn-hover-bg: rgba(255, 255, 255, 0.1);
    --oidc-standalone-secondary-btn-hover-text: rgba(255, 255, 255, 0.9);
    --oidc-standalone-info-border: rgba(255, 255, 255, 0.1);
    --oidc-standalone-info-text: rgba(255, 255, 255, 0.6);
}

/* ---- 亮色主题 ---- */
[data-theme="light"] {
    --oidc-bg-gradient: linear-gradient(135deg, #e0e7ff 0%, #f0f4ff 50%, #e6f0ff 100%);
    --oidc-bg-overlay-1: rgba(102, 126, 234, 0.08);
    --oidc-bg-overlay-2: rgba(236, 72, 153, 0.06);
    --oidc-bg-overlay-3: rgba(59, 130, 246, 0.06);

    --oidc-card-bg: rgba(255, 255, 255, 0.85);
    --oidc-card-border: rgba(0, 0, 0, 0.08);
    --oidc-card-shadow: 0 8px 32px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.5);

    --oidc-text-primary: #1f2937;
    --oidc-text-regular: #4b5563;
    --oidc-text-muted: #9ca3af;
    --oidc-text-link: #667eea;
    --oidc-text-link-hover: #764ba2;

    --oidc-input-bg: rgba(255, 255, 255, 0.8);
    --oidc-input-bg-focus: rgba(255, 255, 255, 0.95);
    --oidc-input-border: rgba(0, 0, 0, 0.12);
    --oidc-input-text: #1f2937;
    --oidc-input-placeholder: rgba(0, 0, 0, 0.35);
    --oidc-input-focus-border: rgba(102, 126, 234, 0.5);
    --oidc-input-focus-shadow: rgba(102, 126, 234, 0.12);
    --oidc-select-option-bg: #ffffff;

    --oidc-label-text: #374151;

    --oidc-sidebar-bg: rgba(255, 255, 255, 0.7);
    --oidc-sidebar-border: rgba(0, 0, 0, 0.08);
    --oidc-sidebar-text: #6b7280;
    --oidc-sidebar-text-hover: #1f2937;
    --oidc-sidebar-hover-bg: rgba(102, 126, 234, 0.1);
    --oidc-sidebar-active-bg: linear-gradient(135deg, rgba(102, 126, 234, 0.15) 0%, rgba(118, 75, 162, 0.15) 100%);
    --oidc-sidebar-active-border: rgba(102, 126, 234, 0.2);

    --oidc-header-bg: rgba(255, 255, 255, 0.7);
    --oidc-header-border: rgba(0, 0, 0, 0.08);
    --oidc-header-title: #1f2937;
    --oidc-header-user-text: #6b7280;
    --oidc-header-user-icon: #667eea;

    --oidc-table-text: #4b5563;
    --oidc-table-head-text: #1f2937;
    --oidc-table-head-bg: rgba(0, 0, 0, 0.03);
    --oidc-table-border: rgba(0, 0, 0, 0.08);
    --oidc-table-row-border: rgba(0, 0, 0, 0.04);
    --oidc-table-hover-bg: rgba(102, 126, 234, 0.05);

    --oidc-hr-border: rgba(0, 0, 0, 0.08);
    --oidc-code-bg: rgba(102, 126, 234, 0.08);
    --oidc-code-text: #667eea;

    --oidc-check-bg: rgba(0, 0, 0, 0.05);
    --oidc-check-border: rgba(0, 0, 0, 0.2);
    --oidc-check-label: #374151;

    --oidc-btn-social-bg: rgba(255, 255, 255, 0.6);
    --oidc-btn-social-hover-bg: rgba(255, 255, 255, 0.9);
    --oidc-btn-social-text: #1f2937;

    --oidc-btn-outline-text: #1f2937;
    --oidc-btn-outline-danger-text: #ef4444;
    --oidc-btn-outline-warning-text: #d97706;

    --oidc-alert-success-bg: rgba(34, 197, 94, 0.1);
    --oidc-alert-success-text: #15803d;
    --oidc-alert-success-border: rgba(34, 197, 94, 0.25);
    --oidc-alert-danger-bg: rgba(239, 68, 68, 0.1);
    --oidc-alert-danger-text: #b91c1c;
    --oidc-alert-danger-border: rgba(239, 68, 68, 0.25);
    --oidc-alert-info-bg: rgba(59, 130, 246, 0.1);
    --oidc-alert-info-text: #1d4ed8;
    --oidc-alert-info-border: rgba(59, 130, 246, 0.25);

    --oidc-badge-success-bg: rgba(34, 197, 94, 0.15);
    --oidc-badge-success-text: #15803d;
    --oidc-badge-danger-bg: rgba(239, 68, 68, 0.15);
    --oidc-badge-danger-text: #b91c1c;
    --oidc-badge-warning-bg: rgba(245, 158, 11, 0.15);
    --oidc-badge-warning-text: #b45309;
    --oidc-badge-info-bg: rgba(59, 130, 246, 0.15);
    --oidc-badge-info-text: #1d4ed8;

    --oidc-theme-toggle-icon: "\F28B"; /* bi-sun */
    --oidc-theme-toggle-text: #1f2937;

    /* 独立页面（Login/Register/Home 等）专用变量 */
    --oidc-standalone-bg: radial-gradient(circle at 20% 30%, #e0e7ff, #f0f4ff);
    --oidc-standalone-card-bg: rgba(255, 255, 255, 0.75);
    --oidc-standalone-card-border: rgba(59, 130, 246, 0.2);
    --oidc-standalone-card-shadow: 0 20px 40px rgba(0, 0, 0, 0.08), 0 0 0 0.5px rgba(59, 130, 246, 0.15) inset;
    --oidc-standalone-card-hover-shadow: 0 25px 45px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(59, 130, 246, 0.3) inset;
    --oidc-standalone-title: #1f2937;
    --oidc-standalone-greeting: #6b7280;
    --oidc-standalone-input-bg: rgba(255, 255, 255, 0.7);
    --oidc-standalone-input-border: rgba(59, 130, 246, 0.25);
    --oidc-standalone-input-text: #1f2937;
    --oidc-standalone-input-placeholder: #9ca3af;
    --oidc-standalone-input-focus-bg: rgba(255, 255, 255, 0.9);
    --oidc-standalone-input-focus-border: #3b82f6;
    --oidc-standalone-input-focus-shadow: rgba(59, 130, 246, 0.15);
    --oidc-standalone-link: #6b7280;
    --oidc-standalone-link-hover: #3b82f6;
    --oidc-standalone-muted: rgba(0, 0, 0, 0.4);
    --oidc-standalone-copyright: #9ca3af;
    --oidc-standalone-social-bg: rgba(255, 255, 255, 0.6);
    --oidc-standalone-social-border: rgba(0, 0, 0, 0.1);
    --oidc-standalone-social-text: #1f2937;
    --oidc-standalone-social-hover-bg: rgba(255, 255, 255, 0.9);
    --oidc-standalone-secondary-btn-bg: rgba(0, 0, 0, 0.04);
    --oidc-standalone-secondary-btn-border: rgba(0, 0, 0, 0.1);
    --oidc-standalone-secondary-btn-text: #6b7280;
    --oidc-standalone-secondary-btn-hover-bg: rgba(0, 0, 0, 0.08);
    --oidc-standalone-secondary-btn-hover-text: #1f2937;
    --oidc-standalone-info-border: rgba(0, 0, 0, 0.08);
    --oidc-standalone-info-text: #6b7280;
}

/* ============================================
   主题切换翻页动画 (View Transition API)
   ============================================ */

::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: 0.6s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: both;
}

/* 旧页面向上翻转消失 */
::view-transition-old(root) {
    animation-name: theme-flip-out;
    transform-origin: center bottom;
    z-index: 1;
}

/* 新页面从下方翻转进入，延迟 0.3s 让旧页面先翻出一半 */
::view-transition-new(root) {
    animation-name: theme-flip-in;
    transform-origin: center top;
    animation-delay: 0.3s;
    z-index: 2;
}

@keyframes theme-flip-out {
    0% {
        transform: perspective(1200px) rotateX(0deg) translateY(0);
        opacity: 1;
    }
    100% {
        transform: perspective(1200px) rotateX(-90deg) translateY(-30%);
        opacity: 0;
    }
}

@keyframes theme-flip-in {
    0% {
        transform: perspective(1200px) rotateX(90deg) translateY(30%);
        opacity: 0;
    }
    100% {
        transform: perspective(1200px) rotateX(0deg) translateY(0);
        opacity: 1;
    }
}