/**
 * jex 使用者登入/註冊/忘記密碼頁樣式
 * 規範：
 * - 設計語言：Google Material Design 3（M3）
 * - 僅使用全域 tokens（variables.css），禁止 var fallback
 * - 禁止以 inline style 作為主要樣式來源（由 CSS 統一控管）
 */

/* ==========================================
 * 版面與容器（Layout & Container）
 * ========================================== */
.jex-auth-wrapper {
    display: flex;
    justify-content: center;
    align-items: stretch;
    min-height: calc(100vh - 120px);
    /* 扣除 header/footer 高度 */
    padding: 0;
}

.jex-auth-card {
    display: flex;
    width: 100%;
    max-width: none;
    margin: 0;
    background: var(--md-sys-color-surface);
    border-radius: 0;
    box-shadow: none;
    overflow: hidden;
}

.jex-auth-card:hover {
    box-shadow: none;
}

/* 左側欄（60% 比例） */
.jex-auth-sidebar {
    flex: 1 1 60%;
    min-width: 280px;
    background-color: var(--md-sys-color-background);
    padding: 40px 24px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    position: relative;
    border-right: 1px solid var(--md-sys-color-outline-variant);
}

.jex-auth-logo {
    max-width: 150px;
    margin-bottom: 20px;
    position: relative;
    z-index: 1;
}

.jex-auth-logo img {
    width: 100%;
    height: auto;
}

.jex-auth-site-title {
    font-size: 24px;
    font-weight: 700;
    margin: 0;
    position: relative;
    z-index: 1;
    color: var(--md-sys-color-inverse-on-surface);
    /* Ensure contrast */
    text-shadow: 0 2px 4px var(--md-sys-color-shadow);
}

.jex-auth-tagline {
    font-size: 16px;
    margin-top: 10px;
    opacity: 0.9;
    position: relative;
    z-index: 1;
    color: var(--md-sys-color-inverse-on-surface);
}

/* 右側主內容（40% 比例） */
.jex-auth-main {
    flex: 1 1 40%;
    min-width: 0;
    padding: 3rem 4rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    border-top-right-radius: var(--md-sys-shape-corner-extra-large);
    border-bottom-right-radius: var(--md-sys-shape-corner-extra-large);
}

.jex-auth-header {
    margin-bottom: 40px;
}

.jex-auth-title {
    font-size: 32px;
    font-weight: 600;
    color: var(--md-sys-color-on-surface);
    margin: 0 0 10px 0;
}

.jex-auth-subtitle {
    font-size: 16px;
    color: var(--md-sys-color-on-surface-variant);
    margin: 0;
}

/* ==========================================
 * 表單元件（Form Elements / M3）
 * ========================================== */
.jex-form-group {
    margin-bottom: 24px;
    position: relative;
}

.jex-form-group label {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: var(--md-sys-color-on-surface);
    margin-bottom: 8px;
}

.jex-form-group .required {
    color: var(--md-sys-color-error);
    margin-left: 4px;
}

.jex-input {
    width: 100%;
    padding: 16px;
    font-size: 16px;
    color: var(--md-sys-color-on-surface);
    background: var(--md-sys-color-surface-variant);
    border: 1px solid transparent;
    border-bottom: 2px solid var(--md-sys-color-outline-variant);
    border-radius: var(--md-sys-shape-corner-extra-small) var(--md-sys-shape-corner-extra-small) 0 0;
    transition: all 0.3s ease;
    box-sizing: border-box;
}

.jex-input:focus {
    outline: none;
    background: var(--md-sys-color-surface);
    border-bottom-color: var(--md-sys-color-primary);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--md-sys-color-primary), transparent 75%);
}

.jex-input::placeholder {
    color: var(--md-sys-color-outline);
}

/* 核取方塊 */
.jex-checkbox-group {
    display: flex;
    align-items: center;
    margin-bottom: 24px;
}

.jex-checkbox-group label {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 14px;
    color: var(--md-sys-color-on-surface-variant);
}

.jex-checkbox-group input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin-right: 10px;
    accent-color: var(--md-sys-color-primary);
    cursor: pointer;
}

/* 按鈕系統：由 common/uiservice.css 提供 .jex-btn（避免各頁重複定義） */

/* ==========================================
 * 第三方登入按鈕（SSO Buttons）
 * ========================================== */
.jex-sso-section {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid var(--md-sys-color-outline-variant);
}

/* SSO 區塊置頂版本：無上邊框、無上邊距 */
.jex-sso-section--primary {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

/* 分隔線（用於分隔 SSO 與傳統表單） */
.jex-divider {
    display: flex;
    align-items: center;
    text-align: center;
    margin: 24px 0;
    color: var(--md-sys-color-on-surface-variant);
    font-size: 14px;
}

.jex-divider::before,
.jex-divider::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
}

.jex-divider span {
    padding: 0 16px;
}

.jex-sso-title {
    font-size: 14px;
    color: var(--md-sys-color-on-surface-variant);
    text-align: center;
    margin-bottom: 20px;
    position: relative;
}

.jex-sso-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.jex-sso-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 16px;
    border-radius: var(--md-sys-shape-corner-small);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: transform 0.2s, box-shadow 0.2s;
    border: 1px solid transparent;
}

.jex-sso-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--md-sys-elevation-1);
}

.jex-sso-btn img,
.jex-sso-btn svg {
    width: 20px;
    height: 20px;
    margin-right: 8px;
}

/* Provider Specifics */
.sso-google {
    background: var(--md-sys-color-surface);
    color: var(--md-sys-color-on-surface);
    border-color: var(--md-sys-color-outline-variant);
}

.sso-linkedin {
    /* 說明：第三方登入按鈕需維持供應商品牌色，避免辨識困難 */
    background: #0077b5;
    color: var(--md-sys-color-inverse-on-surface);
}

.sso-line {
    /* 說明：第三方登入按鈕需維持供應商品牌色，避免辨識困難 */
    background: #06c755;
    color: var(--md-sys-color-inverse-on-surface);
}

.sso-enterprise {
    /* 說明：第三方登入按鈕需維持供應商品牌色，避免辨識困難 */
    background: #2d3748;
    color: var(--md-sys-color-inverse-on-surface);
}

/* ==========================================
 * SSO 按鈕增強版（大型垂直堆疊）
 * ========================================== */
.jex-sso-stack {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.jex-sso-btn--large {
    padding: 14px 20px;
    font-size: 15px;
    font-weight: 500;
    border-radius: var(--md-sys-shape-corner-medium);
    justify-content: flex-start;
}

.jex-sso-btn--large .jex-sso-icon {
    width: 24px;
    height: 24px;
    margin-right: 12px;
    flex-shrink: 0;
}

/* ==========================================
 * 可摺疊區塊（Details/Summary）
 * ========================================== */
.jex-auth-details {
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--md-sys-shape-corner-medium);
    overflow: hidden;
    background: var(--md-sys-color-surface);
}

.jex-auth-details-summary {
    display: flex;
    align-items: center;
    padding: 16px 20px;
    cursor: pointer;
    font-size: 15px;
    font-weight: 500;
    color: var(--md-sys-color-on-surface);
    background: var(--md-sys-color-surface-container-low);
    transition: background-color 0.2s;
    list-style: none;
    gap: 12px;
}

.jex-auth-details-summary::-webkit-details-marker {
    display: none;
}

.jex-auth-details-summary:hover {
    background: var(--md-sys-color-surface-container);
}

.jex-auth-details-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--md-sys-color-on-surface-variant);
}

.jex-auth-details-arrow {
    margin-left: auto;
    display: flex;
    align-items: center;
    color: var(--md-sys-color-on-surface-variant);
    transition: transform 0.3s ease;
}

.jex-auth-details[open] .jex-auth-details-arrow {
    transform: rotate(180deg);
}

.jex-auth-details-content {
    padding: 24px 20px;
    border-top: 1px solid var(--md-sys-color-outline-variant);
    animation: jex-slide-down 0.3s ease;
}

@keyframes jex-slide-down {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ==========================================
 * 表單橫向排列（記住我 + 忘記密碼）
 * ========================================== */
.jex-form-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.jex-link-muted {
    color: var(--md-sys-color-on-surface-variant);
    font-size: 14px;
    text-decoration: none;
}

.jex-link-muted:hover {
    color: var(--md-sys-color-primary);
    text-decoration: underline;
}

.jex-link-primary {
    color: var(--md-sys-color-primary);
    font-weight: 600;
    text-decoration: none;
}

.jex-link-primary:hover {
    text-decoration: underline;
}

/* 註冊提示 */
.jex-auth-register-prompt {
    font-size: 15px;
    color: var(--md-sys-color-on-surface-variant);
}

/* ==========================================
 * 訊息（Messages）
 * ========================================== */
.jex-message {
    padding: 12px 16px;
    border-radius: var(--md-sys-shape-corner-small);
    margin-bottom: 20px;
    font-size: 14px;
    display: none;
}

.jex-message.is-visible {
    display: block;
}

.jex-message.error {
    background-color: var(--md-sys-color-error-container);
    color: var(--md-sys-color-on-error-container);
    border: 1px solid var(--md-sys-color-error);
}

.jex-message.success {
    background-color: var(--md-sys-color-success-container);
    color: var(--md-sys-color-on-success-container);
    border: 1px solid var(--md-sys-color-success);
}

.jex-message.info {
    background-color: var(--md-sys-color-surface-variant);
    color: var(--md-sys-color-on-surface-variant);
    border: 1px solid var(--md-sys-color-outline-variant);
}

/* ==========================================
 * 頁尾連結（Footer Links）
 * ========================================== */
.jex-auth-footer {
    margin-top: 30px;
    text-align: center;
    font-size: 14px;
    color: var(--md-sys-color-on-surface-variant);
}

.jex-auth-footer a {
    color: var(--md-sys-color-secondary);
    text-decoration: none;
    font-weight: 500;
}

.jex-auth-footer a:hover {
    text-decoration: underline;
}

/* ==========================================
 * 密碼強度與比對（Password Strength & Match）
 * ========================================== */
.password-strength-meter {
    display: flex;
    gap: 4px;
    margin-top: 8px;
    height: 4px;
}

.strength-bar {
    flex: 1;
    background: var(--md-sys-color-surface-variant);
    border-radius: var(--md-sys-shape-corner-extra-small);
    transition: background-color 0.3s;
}

/* Strength Colors */
[data-strength="1"] .strength-bar:nth-child(1) {
    background: var(--md-sys-color-error);
}

[data-strength="2"] .strength-bar:nth-child(1),
[data-strength="2"] .strength-bar:nth-child(2) {
    background: var(--md-sys-color-warning);
}

[data-strength="3"] .strength-bar:nth-child(1),
[data-strength="3"] .strength-bar:nth-child(2),
[data-strength="3"] .strength-bar:nth-child(3) {
    background: var(--md-sys-color-primary);
}

[data-strength="4"] .strength-bar:nth-child(n) {
    background: var(--md-sys-color-success);
}

.password-match-status {
    font-size: 12px;
    margin-top: 4px;
    min-height: 18px;
}

.password-match-status.match {
    color: var(--md-sys-color-success);
}

.password-match-status.mismatch {
    color: var(--md-sys-color-error);
}

/* ==========================================
 * 響應式（Responsive）
 * ========================================== */

/* ==========================================
 * 共用輔助樣式（移除模板/JS inline style）
 * ========================================== */
.jex-auth-helper-text {
    margin-top: 6px;
    font-size: 12px;
    color: var(--md-sys-color-on-surface-variant);
}

.jex-auth-logo-emoji {
    font-size: 48px;
    line-height: 1;
}

.jex-auth-link {
    color: var(--md-sys-color-primary);
}

.jex-auth-emoji {
    font-size: 48px;
    line-height: 1;
    margin-bottom: 20px;
    text-align: center;
}

/* ==========================================
 * Email 驗證碼（註冊/登入啟用/忘記密碼）
 * ========================================== */
.jex-auth-verify-container {
    width: 100%;
}

.jex-auth-verify-title {
    margin: 0 0 10px 0;
    text-align: center;
    font-size: 24px;
    font-weight: 600;
    color: var(--md-sys-color-on-surface);
}

.jex-auth-verify-desc {
    margin: 0 0 16px 0;
    text-align: center;
    color: var(--md-sys-color-on-surface-variant);
    font: var(--md-sys-typescale-body-medium);
}

.jex-auth-verify-email {
    color: var(--md-sys-color-primary);
    font-weight: 700;
}

.jex-auth-verify-meta {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    color: var(--md-sys-color-on-surface-variant);
}

.jex-auth-verify-hint {
    margin: 0 0 15px 0;
    text-align: center;
    font-size: 12px;
    color: var(--md-sys-color-on-surface-variant);
}

.jex-auth-verify-hint.is-error {
    color: var(--md-sys-color-error);
}

.jex-auth-code-inputs {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 15px;
}

.jex-auth-code-digit {
    width: 50px;
    height: 60px;
    padding: 0;
    text-align: center;
    font-size: 24px;
}

.jex-auth-verify-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-bottom: 15px;
}

.jex-auth-verify-message {
    margin-bottom: 10px;
    display: none;
}

@media (max-width: 992px) {
    .jex-auth-card {
        flex-direction: column;
    }

    .jex-auth-sidebar {
        display: none;
    }

    .jex-auth-main {
        padding: 2rem 1.5rem;
        border-radius: 0;
    }

    .jex-sso-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .jex-auth-card {
        width: 100%;
        margin: 0;
    }

    .jex-auth-main {
        padding: 1.5rem 1rem;
    }
}