/* ========================================
   JustEnt Auth Pages - 認證頁面樣式
   Pages 層（頁面專用）
   依賴：core/tokens.css, main.css
   適用：Login, ForgetPassword, ResetPassword
   ======================================== */

/* ========================================
   基礎設定
   ======================================== */

body {
    font-family: var(--je-font-sans);
    background: var(--je-bg-secondary);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* ========================================
   Main Container
   ======================================== */

.je-auth-main {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: calc(var(--je-header-height) + var(--je-space-6)) var(--je-space-4) var(--je-space-8);
}

.je-auth-container {
    width: 100%;
    max-width: 420px;
    animation: je-fadeInUp var(--je-duration-slow) var(--je-ease-emphasized-decelerate) forwards;
}

/* ========================================
   Card - Geist Style
   ======================================== */

.je-auth-card {
    background: var(--je-bg-primary);
    border: 1px solid var(--je-border-primary);
    border-radius: var(--je-radius-xl);
    box-shadow: var(--je-shadow-lg);
    overflow: hidden;
}

.je-auth-card-header {
    padding: var(--je-space-8) var(--je-space-8) var(--je-space-6);
    text-align: center;
    border-bottom: 1px solid var(--je-border-secondary);
    background: var(--je-bg-subtle);
}

.je-auth-icon {
    width: var(--je-space-14);
    height: var(--je-space-14);
    margin: 0 auto var(--je-space-4);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--je-primary);
    border-radius: var(--je-radius-xl);
    color: var(--je-white);
    font-size: var(--je-text-2xl);
}

.je-auth-title {
    font-size: var(--je-text-2xl);
    font-weight: var(--je-font-semibold);
    color: var(--je-text-primary);
    margin-bottom: var(--je-space-2);
    letter-spacing: var(--je-tracking-tight);
}

.je-auth-subtitle {
    font-size: var(--je-text-sm);
    color: var(--je-text-secondary);
    line-height: 1.5;
}

.je-auth-card-body {
    padding: var(--je-space-8);
}

/* ========================================
   表單輸入框擴展 - 認證頁專用
   使用 je-input-surface 共用元件，此處僅定義覆寫樣式
   ======================================== */

/* 表單群組間距調整 */
.je-auth-card .je-form-group {
    margin-bottom: var(--je-space-5);
}

/* 輸入框包裝器（帶圖標） */
.je-form-input-wrapper {
    position: relative;
}

.je-form-input-icon {
    position: absolute;
    left: var(--je-space-4);
    top: 50%;
    transform: translateY(-50%);
    color: var(--je-text-muted);
    font-size: var(--je-text-lg);
    pointer-events: none;
    transition: color var(--je-transition-fast);
}

/* 認證頁輸入框覆寫 - 帶圖標樣式 */
.je-auth-card .je-input-surface {
    height: var(--je-btn-height-lg);
    padding: 0 var(--je-space-4) 0 calc(var(--je-space-4) + 28px);
    font-size: var(--je-text-base);
    border-radius: var(--je-radius-lg);
}

.je-input-surface:focus + .je-form-input-icon,
.je-form-input-wrapper:focus-within .je-form-input-icon {
    color: var(--je-primary);
}

/* Password Toggle - 使用共用元件：molecules/_forms.css (.je-password-toggle) */

.je-input-surface.has-toggle {
    padding-right: calc(var(--je-space-4) + var(--je-space-9));
}

/* ========================================
   Remember & Forgot
   ======================================== */

.je-form-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--je-space-6);
}

.je-form-check {
    display: flex;
    align-items: center;
    gap: var(--je-space-2);
    cursor: pointer;
}

.je-form-check-input {
    width: var(--je-text-lg);
    height: var(--je-text-lg);
    margin: 0;
    cursor: pointer;
    accent-color: var(--je-primary);
    border-radius: var(--je-radius-sm);
}

.je-form-check-label {
    font-size: var(--je-text-sm);
    color: var(--je-text-secondary);
    cursor: pointer;
    user-select: none;
}

.je-forgot-link {
    font-size: var(--je-text-sm);
    font-weight: var(--je-font-medium);
    color: var(--je-primary);
    text-decoration: none;
    transition: color var(--je-transition-fast);
}

.je-forgot-link:hover {
    color: var(--je-primary-hover);
}

.je-forgot-link:focus-visible {
    outline: 2px solid var(--je-primary);
    outline-offset: 2px;
    border-radius: var(--je-radius-sm);
}

/* ========================================
   按鈕額外效果 - 認證頁專用
   ======================================== */

/* 按鈕 hover 上浮效果 */
.je-auth-card .je-btn-primary:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 var(--je-space-1) var(--je-space-3) var(--je-primary-alpha-30); /* 原 4px 12px */
}

.je-auth-card .je-btn-primary:active:not(:disabled) {
    transform: translateY(0);
}

/* 按鈕內 Spinner */
.je-btn .je-spinner {
    width: var(--je-text-lg);
    height: var(--je-text-lg);
    border: 2px solid var(--je-white-alpha-30);
    border-top-color: var(--je-white);
    border-radius: 50%;
    animation: je-spin var(--je-duration-normal) linear infinite;
}

/* ========================================
   Message (Error/Success)
   使用共用元件：molecules/_forms.css (.je-form-message)
   ======================================== */

/* 認證頁專用：調整內邊距 */
.je-auth-card .je-form-message {
    padding: var(--je-space-4);
}

/* ========================================
   Switch Link / Back Link
   ======================================== */

.je-form-switch-info,
.je-back-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--je-space-2);
    margin-top: var(--je-space-6);
    padding-top: var(--je-space-6);
    border-top: 1px solid var(--je-border-secondary);
    font-size: var(--je-text-sm);
    color: var(--je-text-secondary);
}

.je-form-switch-info a,
.je-back-link a {
    display: inline-flex;
    align-items: center;
    gap: var(--je-space-2);
    font-weight: var(--je-font-medium);
    color: var(--je-primary);
    text-decoration: none;
    cursor: pointer;
    transition: color var(--je-transition-fast);
}

.je-form-switch-info a:hover,
.je-back-link a:hover {
    color: var(--je-primary-hover);
}

.je-back-link a i {
    font-size: var(--je-text-base);
}

/* ========================================
   Form Panel (Login/Register Switch)
   ======================================== */

.je-form-panel {
    display: none;
}

.je-form-panel.active {
    display: block;
    animation: je-fadeIn 0.3s ease;
}

/* ========================================
   Terms Checkbox
   ======================================== */

.je-form-terms {
    margin-bottom: var(--je-space-6);
}

.je-form-terms .je-form-check {
    align-items: flex-start;
}

.je-form-terms .je-form-check-input {
    margin-top: 2px;
    flex-shrink: 0;
}

.je-form-terms .je-form-check-label {
    line-height: 1.5;
}

.je-form-terms .je-form-check-label a {
    color: var(--je-primary);
    text-decoration: none;
    font-weight: var(--je-font-medium);
}

.je-form-terms .je-form-check-label a:hover {
    color: var(--je-primary-hover);
    text-decoration: underline;
}

/* ========================================
   背景裝飾 - 簡潔網格
   ======================================== */

.je-auth-bg {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}

.je-auth-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background-color: var(--je-bg-secondary);
}

.je-auth-bg-gradient {
    position: absolute;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    filter: blur(120px);
    opacity: 0.4;
}

.je-auth-bg-gradient-1 {
    top: -200px;
    right: -100px;
    background: var(--je-primary-alpha-4);
}

.je-auth-bg-gradient-2 {
    bottom: -200px;
    left: -100px;
    background: rgba(var(--je-primary-rgb), 0.025);
}