:root {
    --primary-color: #008f88; 
    --primary-hover: #00695c;
    --success-color: #28a745;
    --warning-color: #ff9800;
    --danger-color: #dc3545;
    --secondary-color: #6c757d;
    --bg-color: #f4f7f6;
    --text-color: #333;
}

/* styles.css - 學生社團報名系統樣式表 (整合版) */

/* =========================================
   1. 基礎重置與佈局 (Base Layout)
   ========================================= */
* {
    box-sizing: border-box; /* 確保 padding 不會撐大寬度 */
}

body, html {
    margin: 0;
    padding: 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #f4f7f6;
    color: #333;
    height: 100%;
}

/* Header 背景色 */
#header {
    background: var(--primary-color);
}

/* 登入容器居中 */
.login-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 20px;
}

/* 登入框主體設定 */
/* 套用於所有類型的登入表單 */
#studentLoginForm, #adminLoginForm, #kindergartenLoginForm, .login-box-common {
    background: #ffffff;
    padding: 40px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    
    /* ★修改：稍微加寬到 450px~480px，這樣三個頁籤才不會太擠 */
    width: 100%;
    max-width: 480px; 
    
    margin-top: 0; /* 因為上方有頁籤，這裡歸零 */
    margin-bottom: 20px;
}

/* h1 {
    font-size: 1.8rem;
    color: #2c3e50;
    margin-bottom: 25px;
    text-align: center;
    font-weight: 600;
} */

h2 {
    font-size: 1.4rem;
    color: #495057;
    margin-bottom: 20px;
    text-align: center;
    margin-top: 0;
}

/* =========================================
   2. 頁籤切換樣式 (Role Switcher) - 綠色主題版
   ========================================= */
.role-switcher {
    display: flex;
    margin-bottom: 0;
    width: 100%;
    /* 建議加上這一行，讓按鈕底部剛好蓋在表單的邊框上 */
    position: relative; 
    z-index: 10; 
}

.role-switcher button {
    flex: 1;              /* 平均分配寬度 */
    padding: 16px 10px;   /* 內距 */
    font-size: 1.05rem;   /* 字體大小 */
    font-weight: 500;     /* 一般粗細 */
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    
    /* 上方圓角 */
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    
    /* 未選中狀態：淺灰底 */
    background: #ebebeb;  /* 類似 Tailwind 的 slate-100 */
    color: #64748b;       /* 類似 Tailwind 的 slate-500 */
    margin-right: 2px;    /* 按鈕間隔 */
}

.role-switcher button:last-child {
    margin-right: 0;
}

/* 滑鼠移過未選中的按鈕 */
.role-switcher button:hover {
    background-color: #e0f2f1; /* 極淡的綠色背景 (Teal-50) */
    color: #008f88;            /* 文字變為主題色 */
}

/* ★ 狀態：已選中 (Active) */
.role-switcher button.active {
    background-color: #ffffff; /* 背景變白，與表單融合 */
    color: #008f88;            /* 文字變為主題色 */
    font-weight: 700;          /* 字體加粗 */
    
    /* 頂部加上主題色線條 (3px 厚度) */
    box-shadow: 0 -3px 0 #008f88 inset; 
    
    /* 讓它稍微覆蓋住下方的容器邊框 */
    border-bottom: 1px solid #ffffff; 
}

/* =========================================
   3. 表單元件樣式 (Forms & Inputs)
   ========================================= */
.input-group {
    margin-bottom: 15px;
    text-align: left; /* 確保標籤靠左 */
}

.input-group label {
    display: block;
    margin-bottom: 6px;
    color: #495057;
    font-weight: 500;
}

.input-group label i {
    width: 20px;
    text-align: center;
    margin-right: 5px;
    color: #888;
}

.input-group input {
    width: 100%;
    padding: 12px;
    border: 1px solid #ced4da;
    border-radius: 6px;
    font-size: 1rem;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.input-group input:focus {
    outline: none;
    border-color: #007bff;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
}

/* 驗證碼區塊佈局 */
.verification-code-group {
    display: flex;
    align-items: flex-end; /* 底部對齊 */
    justify-content: space-between;
}

.verification-code-group > div {
    flex: 1;
}

.verification-code-group input {
    width: 100%; 
}

.verification-code-group img {
    margin-left: 10px;
    height: 45px; /* 配合 input 高度 */
    border: 1px solid #ced4da;
    border-radius: 6px;
    cursor: pointer;
    background: #fff;
}

/* =========================================
   4. 按鈕樣式 (Buttons)
   ========================================= */
/* 通用登入按鈕設定 */
.login-button {
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: 6px;
    font-size: 1.05rem;
    font-weight: bold;
    cursor: pointer;
    margin-top: 15px;
    color: #ffffff;
    transition: background-color 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* (A) 幼兒園按鈕 - 橘色 */
.kinder-login-button {
    background-color: #ff9800;
}
.kinder-login-button:hover {
    background-color: #e68900;
}

/* (B) 管理者按鈕 - 深灰色 */
.admin-login-button {
    background-color: #343a40;
}
.admin-login-button:hover {
    background-color: #23272b;
}

/* (C) Google 登入按鈕 (白底彩色版) */
.google-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ffffff;
    color: #757575;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 10px;
    text-decoration: none;
    font-weight: bold;
    font-size: 1rem;
    margin-top: 10px;
    margin-bottom: 20px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    transition: background-color 0.2s, box-shadow 0.2s;
}

.google-btn:hover {
    background-color: #f8f9fa;
    box-shadow: 0 1px 5px rgba(0,0,0,0.15);
    color: #333;
}

.google-icon {
    width: 24px;
    height: 24px;
    margin-right: 12px;
}


/* =========================================
   5. 其他輔助樣式
   ========================================= */
.login-note {
    text-align: center;
    color: #6c757d;
    margin-bottom: 20px;
    font-size: 0.9rem;
    line-height: 1.6;
}

.error-text {
    color: #dc3545;
    font-size: 0.9rem;
    margin-top: 10px;
    margin-bottom: 5px;
    min-height: 20px;
    text-align: center;
    font-weight: 500;
}

/* =========================================
   6. 響應式設計 (Mobile)
   ========================================= */
@media (max-width: 600px) {
    .login-container {
        padding: 15px;
    }

    #studentLoginForm, #adminLoginForm, #kindergartenLoginForm {
        padding: 25px;
        width: 100%;
        max-width: 100%;
    }
    
    .role-switcher {
        width: 100%;
    }

    .role-switcher button {
        font-size: 0.9rem; /* 手機上字體稍微縮小以免折行 */
        padding: 12px 5px;
    }

    h1 {
        font-size: 1.5rem;
    }
    
    /* 手機上驗證碼圖片不要太小 */
    .verification-code-group img {
        width: 100px;
        object-fit: cover;
    }	
}

/* =========================================
   社團列表切換為單欄模式 (List View)
   ========================================= */

/* 1. 設定容器為單欄 */
.club-container {
    display: grid;
    grid-template-columns: 1fr !important; /* 強制一列一個 */
    gap: 20px;
}

/* 2. 卡片改為左右排列 (Flexbox) */
.club-card {
    display: flex;       /* 啟用彈性佈局 */
    flex-direction: row; /* 橫向排列 */
    overflow: hidden;    /* 避免內容溢出 */
}

/* 3. 左側內容區 (資訊) */
.club-body {
    flex: 1;             /* 佔用剩餘空間 */
    padding: 20px;
    border-bottom: none; /* 移除原本底部的線 */
    border-right: 1px solid #eee; /* 改為右邊加分隔線 */
}

/* 4. 右側操作區 (價格與按鈕) */
.club-footer {
    width: 220px;        /* 固定寬度 */
    flex-shrink: 0;      /* 防止被壓縮 */
    display: flex;
    flex-direction: column; /* 內容垂直置中 */
    justify-content: center;
    align-items: center;
    background-color: #f8f9fa; /* 淺灰背景區分 */
    padding: 20px;
    border-top: none;    /* 移除頂部線條 */
}

/* 5. 手機版響應式調整 (維持原樣) */
@media (max-width: 768px) {
    .club-card {
        flex-direction: column; /* 手機上改回上下排列 */
    }
    
    .club-body {
        border-right: none;
        border-bottom: 1px solid #eee;
    }
    
    .club-footer {
        width: 100%;     /* 手機上寬度滿版 */
        flex-direction: row; /* 手機上讓價格和按鈕並排(可選) */
        justify-content: space-between;
        align-items: center;
    }
}

/* =========================================
   以下為「內部管理系統」與「社團列表」專用樣式
   請貼在 styles.css 的最下方，不要覆蓋上方原有的登入樣式
   ========================================= */

/* 1. 內部頁面結構 (導覽列、標題) */
.navbar {
    background-color: #fff;
    padding: 15px 20px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.navbar h1 {
    margin: 0;
    font-size: 1.2rem;
    color: var(--primary-color);
}

.container {
    max-width: 1000px;
    margin: 0 auto 30px auto; /* 上下留白 */
    padding: 0 15px;
}

.page-header {
    margin-bottom: 25px;
    border-bottom: 2px solid #ddd;
    padding-bottom: 10px;
}

.page-header h2 {
    margin: 0;
    color: #444;
}

.back-btn {
    text-decoration: none;
    color: #666;
    font-size: 0.95rem;
}
.back-btn:hover { color: #333; }

/* 2. 社團列表佈局 (強制一列一筆 List View) */
.club-grid, .club-container {
    display: grid;
    grid-template-columns: 1fr; /* 強制一列 */
    gap: 20px;
}

/* 卡片本體：左右橫向排列 */
.club-card {
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 3px 6px rgba(0,0,0,0.05);
    border-left: 5px solid var(--primary-color); /* 左側色條 */
    transition: transform 0.2s, box-shadow 0.2s;
    
    display: flex;       /* Flexbox 佈局 */
    flex-direction: row; /* 橫向 */
}

.club-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.1);
}

/* 左側：資訊區 */
.club-body {
    padding: 20px;
    flex: 1;             /* 佔滿剩餘空間 */
    border-right: 1px solid #eee; 
}

/* 右側：操作區 (價格與按鈕) */
.club-footer {
    width: 220px;        /* 固定寬度 */
    flex-shrink: 0;      /* 防止壓縮 */
    background-color: #fafafa;
    padding: 20px;
    
    display: flex;
    flex-direction: column; /* 垂直排列 */
    justify-content: center;
    align-items: center;
    text-align: center;
    border-top: none;    /* 覆蓋掉原本可能的邊框 */
}

/* 3. 卡片內部文字樣式 */
.club-title {
    font-size: 1.25rem;
    font-weight: bold;
    margin-bottom: 0;
    color: #333;
}

.club-type {
    color: #666;
    font-size: 0.95rem;
    margin-bottom: 0;
}

.club-teacher {
    color: #666;
    font-size: 0.95rem;
    margin-bottom: 12px;
}

.club-meta {
    font-size: 0.9rem;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
}

.club-meta i {
    width: 25px;
    text-align: center;
    color: var(--primary-color);
    margin-right: 5px;
}

.club-desc {
    margin-top: 12px;
    font-size: 1rem;
    color: #555;
    line-height: 1.5;
	display: flex;            /* 使用彈性佈局 */
    align-items: flex-start;  /* 關鍵：讓內容從最上方開始對齊 */
    /* 限制顯示 3 行 */
    /* display: -webkit-box; */
    /* -webkit-line-clamp: 3; */
    /* -webkit-box-orient: vertical; */
    /* overflow: hidden; */
}

.club-desc i {
    margin-right: 10px;       /* 圖示與文字之間的距離 */
    margin-top: 4px;          /* 微調：讓圖示中心與第一行文字的視覺中心對齊 */
	margin-left: 4px;
    color: var(--primary-color);
}

.club-desc span {
    line-height: 1.6;         /* 設定行高，讓多行文字閱讀起來更舒適 */
    display: block;           /* 確保 span 表現得像塊狀元素 */
    flex: 1;                  /* 讓文字自動填滿剩餘空間 */
}

/* 4. 標籤與按鈕樣式 */
.badge {
    padding: 5px 10px;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: normal;
    display: inline-block;
}
.badge-target { background-color: #e3f2fd; color: #0d47a1; }
.badge-full { background-color: #ffebee; color: #c62828; }
.badge-waitlist { background-color: #fff3e0; color: #ef6c00; }


/* 通用按鈕 */
.btn {
    text-decoration: none; 
    padding: 8px 20px; 
    border-radius: 50px; /* 圓角膠囊狀 */
    font-size: 0.95rem; 
    transition: 0.3s; 
    display: inline-flex; 
    align-items: center;
    justify-content: center;
    color: #fff;
    border: none;
    cursor: pointer;
}
.btn i { margin-right: 6px; }

/* 讓列表右側的按鈕稍微分開並滿寬 */
.club-footer .btn {
    margin-top: 10px;
    width: 100%;
}

.btn-select { background-color: var(--primary-color); }
.btn-select:hover { background-color: var(--primary-hover); box-shadow: 0 4px 8px rgba(0,0,0,0.15); transform: translateY(-1px); }

.btn-register { background-color: var(--primary-color); color: white; }
.btn-register:hover { background-color: #3367d6; }

.btn-waitlist { background-color: var(--warning-color); color: white; }
.btn-waitlist:hover { background-color: #e65100; }

.btn-disabled { background-color: #e0e0e0; color: #999; cursor: not-allowed; }

.msg-error {
    color: var(--danger-color);
    font-size: 0.85rem;
    font-weight: bold;
    display: block;
    margin-bottom: 5px;
}

/* 5. 手機版響應式 (變回上下排列) */
@media (max-width: 768px) {
    .club-card {
        flex-direction: column;
        border-left: none;
        border-top: 4px solid var(--primary-color);
    }

    .club-body {
        border-right: none;
        border-bottom: 1px solid #eee;
    }

    .club-footer {
        width: 100%;
        flex-direction: row; /* 手機版：價格與按鈕並排 */
        justify-content: space-between;
        padding: 15px 20px;
    }

    .club-footer .btn {
        width: auto;
        margin-top: 0;
    }
}

/* =========================================
   備註欄位樣式 (Note Style)
   ========================================= */
.club-note {
    margin-top: 12px;
    padding: 8px 12px;
    background-color: #fff8e1; /* 淡黃色背景，提醒注意 */
    border-left: 3px solid #ffc107; /* 左側橘黃色警示條 */
    border-radius: 4px;
    color: #856404; /* 深黃褐色文字 */
    font-size: 0.9rem;
    display: flex;
    align-items: flex-start; /* 讓圖示對齊第一行文字 */
    line-height: 1.5;
}

.club-note i {
    margin-right: 8px;
    margin-top: 3px; /* 微調圖示位置 */
    color: #ffc107;
}

.ui-state-default { cursor: grab; }
.ui-state-default .handle { cursor: grab; color: #007bff; padding: 0 5px; }
.ui-sortable-helper { display: table; background: #f7f7f7; border: 1px dashed #ccc; opacity: 0.8; }



.term-desc {
    /* margin-top: 12px; */
    font-size: 1rem;
    color: #555;
    line-height: 1.5;
	display: flex;            /* 使用彈性佈局 */
    align-items: flex-start;  /* 關鍵：讓內容從最上方開始對齊 */
    /* 限制顯示 3 行 */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.term-list { 
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); 
    gap: 20px; 
    margin-bottom: 30px;
}

/* 卡片主體 */
.term-card {
    background: #fff;
    border-radius: 12px;
    padding: 25px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
    transition: transform 0.3s, box-shadow 0.3s;
    position: relative;
    border-left: 5px solid var(--primary-color);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* 關閉狀態 */
.term-card.closed {
    background-color: #fafafa;
}

/* 滑鼠懸停特效 */
.term-card:hover { 
    transform: translateY(-5px); 
    box-shadow: 0 8px 15px rgba(0,0,0,0.1); 
}

/* 文字樣式 */
.term-name { 
    font-size: 1.25rem; 
    font-weight: bold; 
    margin-bottom: 10px; 
    color: #333; 
    display: flex;
    align-items: center;
}
.term-name i { margin-right: 8px; color: var(--primary-color); }

.term-info { 
    color: #666; 
    font-size: 0.95rem; 
    margin-bottom: 8px; 
    line-height: 1.6;
}
.term-info i { 
    width: 20px; 
    text-align: center; 
    color: var(--primary-color); 
    margin-right: 5px; 
}

/* 狀態標籤 (非報名期間) */
.term-status-msg {
    margin-top: 15px;
    font-size: 0.9rem;
    font-weight: bold;
    color: var(--danger-color);
    background: #fff3f3;
    padding: 8px 12px;
    border-radius: 4px;
    display: inline-block;
}
.term-status-msg i { margin-right: 5px; }

/* 按鈕區塊 */
.term-action { 
    margin-top: 20px; 
    text-align: right; 
    display: flex; 
    gap: 10px; 
    justify-content: flex-end; 
    flex-wrap: wrap; 
}

/* CKEditor 5 樣式調整 */
.ck-editor__editable {
    min-height: 300px; /* 設定編輯器內容區的最小高度 */
    max-height: 600px; /* 設定最大高度，超過出現卷軸 */
}

/* 確保編輯器在 Modal 裡面的層級正確 */
.ck.ck-balloon-panel {
    z-index: 10055 !important;
}


/* 強制恢復按鈕大小 (如果有變跑版的話) */
.btn-sm {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
    line-height: 1.5;
    border-radius: 0.2rem;
}

.btn-view { background-color: var(--secondary-color); }
.btn-view:hover { background-color: #5a6268; box-shadow: 0 4px 8px rgba(0,0,0,0.15); }

.btn-registered { background-color: var(--success-color); color: white; }
.btn-registered:hover { background-color: #138496; }

/* =========================================
   個人資料卡片 (Profile Card)
   ========================================= */
.profile-card {
    background: #fff; border-radius: 12px; padding: 25px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05); margin-bottom: 25px;
}

.profile-header {
    border-bottom: 1px solid #eee; padding-bottom: 15px; margin-bottom: 15px;
    font-size: 1.2rem; font-weight: bold; display: flex; align-items: center;
}
.profile-header i { color: var(--primary-color); margin-right: 10px; }

.info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; }
.info-item { margin-bottom: 10px; position: relative; min-height: 60px; }
.info-label { font-size: 0.85rem; color: #777; margin-bottom: 4px; }
.info-value { font-size: 1.05rem; font-weight: 500; color: #333; display: flex; align-items: center; }
.info-value.empty { color: #f90a44; font-style: italic; }

.empty { color: red; background-color: #ffffd2; padding: 2px 4px; border-radius: 3px; }

/* 行內編輯功能 (Inline Edit) */
.edit-icon-btn {
    background: none; border: none; color: var(--primary-color); cursor: pointer;
    margin-left: 10px; font-size: 0.9rem; opacity: 0.7; transition: 0.2s;
}
.edit-icon-btn:hover { opacity: 1; transform: scale(1.1); }

.edit-container { display: none; margin-top: 5px; }
.edit-container.active { display: block; }
.view-container.hidden { display: none; }

.form-input-sm {
    padding: 5px 8px; border: 1px solid #ccc; border-radius: 4px;
    font-size: 1rem; width: 140px; margin-right: 5px;
}
.btn-action {
    padding: 4px 10px; border: none; border-radius: 4px; cursor: pointer;
    font-size: 0.85rem; margin-right: 3px; color: white;
}
.btn-save { background-color: var(--success-color); }
.btn-cancel { background-color: var(--secondary-color); }

/* 提示訊息框 (Alert Box) */
.alert-box {
    padding: 15px; border-radius: 8px; margin-bottom: 20px; line-height: 1.5;
    display: flex; flex-direction: column; gap: 15px;
}
.alert-item { display: flex; align-items: flex-start; }
.alert-item i, .alert-box > i { margin-right: 10px; margin-top: 4px; font-size: 1.2rem; }

.alert-active { background-color: #e3f2fd; border-left: 5px solid var(--primary-color); color: #005662; }
.alert-inactive { background-color: #f8d7da; border-left: 5px solid var(--danger-color); color: #721c24; }