/* styles.css */

/* --- 基礎排版與字體設定 --- */
body {
    /* 使用乾淨、現代的字體 */
    font-family: Arial, sans-serif; 
    background-color: #f4f7f6; /* 淺灰色背景 */
    
    /* 使用 Flexbox 進行中央排版 */
    display: flex; 
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    
    min-height: 100vh; /* 確保內容至少佔滿整個視窗高度 */
    margin: 0;
}

/* --- 容器樣式：讓登入區塊突出 --- */
.container {
    background-color: #ffffff; /* 白色背景 */
    padding: 40px;
    border-radius: 12px;
    /* 增加柔和陰影 */
    box-shadow: 0 6px 30px rgba(0, 0, 0, 0.15); 
    width: 100%;
    max-width: 400px; /* 限制最大寬度 */
    text-align: center; 
}

/* --- 標題與段落 --- */
h1 {
    color: #333;
    margin-bottom: 10px;
    font-size: 24px;
}

p {
    color: #666;
    margin-bottom: 25px;
    font-size: 14px;
}

/* --- 表單元素排版 --- */
label {
    display: block; /* 讓標籤佔滿一行 */
    text-align: left;
    margin-bottom: 8px;
    margin-top: 15px; /* 增加間隔 */
    font-weight: bold;
    color: #555;
}

/* --- 輸入框樣式 --- */
input[type="text"], input[type="password"] {
    width: 100%; 
    padding: 12px;
    margin-bottom: 5px; /* 減少與下一行的間距 */
    border: 1px solid #ccc;
    border-radius: 6px;
    box-sizing: border-box; /* 確保 padding 不增加寬度 */
    font-size: 16px;
    transition: border-color 0.3s ease;
}

input[type="text"]:focus, input[type="password"]:focus {
    border-color: #007bff; /* 聚焦時變藍色 */
    outline: none; /* 移除瀏覽器預設的藍色外框 */
}

/* --- 按鈕樣式 (通用登入按鈕) --- */
#loginForm button[type="submit"] {
    width: 100%;
    padding: 12px;
    background-color: #007bff; /* 品牌藍色 */
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 16px;
    cursor: pointer; 
    margin-top: 20px;
    transition: background-color 0.3s ease; 
}

#loginForm button[type="submit"]:hover {
    background-color: #0056b3; 
}

/* --- 註冊按鈕樣式 (使用綠色區別) --- */
#signupForm button[type="submit"] {
    width: 100%;
    padding: 12px;
    background-color: #28a745; /* 綠色 */
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 16px;
    cursor: pointer; 
    margin-top: 20px;
    transition: background-color 0.3s ease;
}

#signupForm button[type="submit"]:hover {
    background-color: #1e7e34;
}

/* --- 訊息顯示區域 (通用樣式) --- */
.message-display {
    margin-top: 20px;
    padding: 10px;
    border-radius: 5px;
    font-weight: bold;
    text-align: center;
    min-height: 20px; /* 確保空間不因內容而跳動 */
}

/* 成功訊息 */
.message-display[style*="green"] {
    background-color: #e6ffe6;
    border: 1px solid #00cc00;
    color: #009900;
}

/* 錯誤訊息 */
.message-display[style*="red"] {
    background-color: #ffe6e6;
    border: 1px solid #cc0000;
    color: #cc0000;
}

/* --- 核心切換功能樣式 --- */
/* 1. 隱藏類別：用於 JavaScript 切換時隱藏整個區塊 */
.hidden-form {
    display: none !important;
}

/* 2. 切換連結容器樣式 */
.form-toggle-link {
    text-align: right; 
    margin-bottom: 5px;
    font-size: 14px;
}

/* 3. 切換連結樣式 */
.form-toggle-link a {
    color: #007bff;
    text-decoration: underline;
    cursor: pointer;
    transition: color 0.3s ease;
}

.form-toggle-link a:hover {
    color: #0056b3;
}