/* =========================================
   1. Fonts & Variables (การตั้งค่าพื้นฐาน)
   ========================================= */
@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@300;400;600&family=Sarabun:wght@300;400;500;600&display=swap');

:root {
    /* สีหลักของระบบ */
    --primary-color: #4361ee;
    --secondary-color: #4cc9f0;
    --text-color: #2b2d42;
    --bg-color: #f4f7f6;
    
    /* การไล่สี (Gradient) */
    --bg-gradient: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    
    /* Effect กระจก (Glassmorphism) */
    --glass-bg: rgba(255, 255, 255, 0.95);
    --glass-border: 1px solid rgba(255, 255, 255, 0.5);
    
    /* เงา */
    --shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
    --card-shadow: 0 4px 20px rgba(0,0,0,0.05);
}

body {
    font-family: 'Sarabun', sans-serif;
    background: var(--bg-color); /* ใช้สีพื้นเรียบเป็นค่าเริ่มต้น */
    margin: 0; padding: 0;
    color: var(--text-color);
    box-sizing: border-box;
}

/* พื้นหลังแบบ Gradient สำหรับหน้า Login/Register */
body.auth-page {
    background: var(--bg-gradient);
    display: flex; justify-content: center; align-items: center;
    min-height: 100vh;
    padding: 20px 0;
}

/* พื้นหลังสำหรับหน้า Dashboard (มีเว้นหัวข้อ Navbar) */
body.dashboard-page {
    padding-top: 80px;
}

/* =========================================
   2. Navbar (แถบเมนูด้านบน)
   ========================================= */
nav {
    position: fixed; top: 0; left: 0; width: 100%;
    display: flex; justify-content: space-between; align-items: center;
    padding: 10px 20px; box-sizing: border-box;
    background: #ffffff;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    z-index: 1000;
}

.nav-brand {
    display: flex; align-items: center; text-decoration: none; color: var(--text-color);
    font-family: 'Kanit', sans-serif; font-size: 20px; font-weight: 600;
}
.nav-brand img { width: 32px; height: 32px; margin-right: 10px; }
.nav-brand span { color: var(--primary-color); }

.nav-profile { display: flex; align-items: center; gap: 10px; }
.profile-name { font-weight: 600; font-size: 14px; color: #555; display: none; }
@media (min-width: 600px) { .profile-name { display: block; } }

/* รูปโปรไฟล์ใน Navbar */
.profile-img-nav {
    width: 40px; height: 40px; border-radius: 50%;
    border: 2px solid var(--primary-color);
    object-fit: cover; cursor: pointer;
    transition: transform 0.2s;
}
.profile-img-nav:hover { transform: scale(1.1); }

/* ปุ่มย้อนกลับ */
.back-link {
    text-decoration: none; color: #666; font-size: 14px; font-weight: 500;
    transition: 0.3s; display: flex; align-items: center; gap: 5px;
    padding: 8px 15px; border-radius: 20px; background: #f8f9fa;
}
.back-link:hover { color: var(--primary-color); background: #eef2ff; transform: translateX(-3px); }

/* ปุ่มทั่วไปใน Navbar */
.nav-btn { 
    color: white; font-size: 20px; cursor: pointer; 
    background: rgba(0,0,0,0.2); width: 40px; height: 40px; 
    border-radius: 50%; display: flex; justify-content: center; align-items: center; 
    backdrop-filter: blur(5px); text-decoration: none; border: none; transition: 0.2s; 
}
.nav-btn:hover { background: rgba(0,0,0,0.4); transform: scale(1.1); }

/* =========================================
   3. Forms & Inputs (ฟอร์มกรอกข้อมูล)
   ========================================= */
.input-group { margin-bottom: 20px; }
.input-group label { display: block; margin-bottom: 8px; font-weight: 600; font-size: 14px; color: #4a4e69; }

.input-wrapper { position: relative; }
.input-wrapper i.icon { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: #a8dadc; transition: 0.3s; z-index: 2; }
.input-wrapper i.toggle-password { position: absolute; right: 15px; top: 50%; transform: translateY(-50%); color: #a8dadc; cursor: pointer; transition: 0.3s; z-index: 2; }
.input-wrapper i.toggle-password:hover { color: var(--primary-color); }

input[type="text"], input[type="email"], input[type="password"], input[type="number"], select {
    width: 100%; padding: 14px 45px 14px 45px; /* เว้นซ้ายขวาให้ไอคอน */
    border: 2px solid #edf2f4; background: #f8f9fa; border-radius: 12px;
    font-family: 'Sarabun', sans-serif; font-size: 16px; box-sizing: border-box;
    transition: all 0.3s ease;
}
input:focus, select:focus {
    border-color: var(--primary-color); background: #fff;
    outline: none; box-shadow: 0 0 0 4px rgba(67, 97, 238, 0.1);
}
input:focus + i.icon { color: var(--primary-color); }

/* ปุ่ม Submit หลัก */
.btn-submit, .btn-primary {
    width: 100%; padding: 16px; border: none; border-radius: 12px;
    background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
    color: white; font-family: 'Kanit', sans-serif; font-size: 18px; font-weight: 600;
    cursor: pointer; box-shadow: 0 4px 15px rgba(67, 97, 238, 0.3);
    transition: transform 0.2s, box-shadow 0.2s; margin-top: 10px;
}
.btn-submit:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(67, 97, 238, 0.4); }
.btn-submit:disabled { background: #cbd5e1; cursor: not-allowed; }

/* =========================================
   4. Cards & Containers
   ========================================= */
.container { width: 100%; max-width: 1000px; margin: 0 auto; padding: 20px; box-sizing: border-box; }

/* การ์ดแบบกระจก (ใช้หน้า Login/Register/Add) */
.card-glass {
    background: var(--glass-bg); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    border-radius: 24px; border: var(--glass-border); box-shadow: var(--shadow);
    padding: 40px 30px; position: relative; overflow: hidden;
    max-width: 480px; margin: 0 auto;
}
.card-header { text-align: center; margin-bottom: 20px; }
.card-header i { font-size: 48px; background: -webkit-linear-gradient(45deg, var(--primary-color), var(--secondary-color)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 10px; }
.card-header h2 { font-family: 'Kanit', sans-serif; font-weight: 600; color: var(--primary-color); margin: 0; font-size: 28px; }

/* การ์ดห้องเรียน (Dashboard) */
.class-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }
.class-card {
    background: white; border-radius: 16px; overflow: hidden; box-shadow: var(--card-shadow);
    transition: transform 0.2s; cursor: pointer; border: 1px solid #eee; position: relative;
}
.class-card:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(0,0,0,0.1); }
.card-img { height: 100px; }
.card-body { padding: 15px; }
.card-body h3 { margin: 0; font-size: 18px; color: #333; font-family: 'Kanit', sans-serif; }
.card-body p { margin: 5px 0 0; color: #666; font-size: 14px; }
.card-footer { padding: 10px 15px; border-top: 1px solid #f5f5f5; display: flex; justify-content: space-between; color: #888; font-size: 12px; }

/* Welcome Section */
.welcome-section {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: white; padding: 30px; border-radius: 20px;
    box-shadow: var(--card-shadow); margin-bottom: 30px;
    display: flex; justify-content: space-between; align-items: center;
}
.welcome-text h1 { margin: 0; font-family: 'Kanit', sans-serif; font-size: 24px; }

/* =========================================
   5. Modals (หน้าต่างเด้ง)
   ========================================= */
.modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.5); z-index: 3000; display: none;
    justify-content: center; align-items: center; backdrop-filter: blur(5px);
}
.modal-box {
    background: white; padding: 25px; border-radius: 20px; width: 90%; max-width: 450px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2); animation: slideUp 0.3s ease;
    max-height: 80vh; overflow-y: auto;
}
@keyframes slideUp { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

.modal-title { font-family: 'Kanit', sans-serif; font-size: 18px; margin: 0 0 15px 0; color: #333; display: flex; justify-content: space-between; align-items: center; }
.modal-input { width: 100%; padding: 12px; margin-bottom: 15px; border: 2px solid #eee; border-radius: 10px; box-sizing: border-box; font-family: 'Sarabun', sans-serif; }
.btn-confirm, .btn-save { width: 100%; padding: 12px; border: none; border-radius: 8px; background: var(--primary-color); color: white; cursor: pointer; margin-top: 10px; font-weight: 600;}
.btn-cancel { padding: 12px; border: none; border-radius: 8px; background: #eee; color: #333; cursor: pointer; flex:1; }

/* =========================================
   6. Utilities & Components
   ========================================= */
/* ปุ่มติดตั้งแอป */
.btn-install {
    background: linear-gradient(45deg, #00b09b, #96c93d); color: white; border: none; padding: 6px 12px;
    border-radius: 20px; cursor: pointer; font-family: 'Sarabun', sans-serif; font-weight: 600; font-size: 12px;
    display: none; align-items: center; gap: 5px; box-shadow: 0 4px 10px rgba(0,176,155,0.3);
}

/* ปุ่ม FAB (+) มุมขวาล่าง */
.fab-add {
    position: fixed; bottom: 30px; right: 30px; width: 60px; height: 60px;
    background: var(--primary-color); color: white; border-radius: 50%; border: none;
    box-shadow: 0 4px 15px rgba(67, 97, 238, 0.4); font-size: 24px; cursor: pointer;
    display: flex; justify-content: center; align-items: center; transition: transform 0.2s; z-index: 100;
}
.fab-add:hover { transform: scale(1.1) rotate(90deg); }

/* Loading Overlay */
#loadingOverlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: white; z-index: 2000;
    display: flex; justify-content: center; align-items: center; flex-direction: column;
}
.spinner-lg {
    width: 40px; height: 40px; border: 4px solid #f3f3f3; border-top: 4px solid var(--primary-color);
    border-radius: 50%; animation: spin 1s linear infinite;
}
.spinner-sm {
    display: inline-block; width: 16px; height: 16px; border: 2px solid rgba(0,0,0,0.1); 
    border-top-color: var(--primary-color); border-radius: 50%; animation: spin 0.8s linear infinite; 
    margin-left: 10px; vertical-align: middle; display: none; 
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Search Results Dropdown */
#resultsBox { position: absolute; top: 110%; left: 0; right: 0; background: white; border-radius: 12px; box-shadow: 0 10px 25px rgba(0,0,0,0.1); max-height: 250px; overflow-y: auto; z-index: 100; display: none; border: 1px solid #eee; }
.result-item { padding: 12px 20px; border-bottom: 1px solid #f0f0f0; cursor: pointer; transition: 0.2s; }
.result-item:hover { background-color: #f0f7ff; padding-left: 25px; }

/* Empty State */
.empty-state { grid-column: 1 / -1; text-align: center; padding: 40px; color: #999; background: white; border-radius: 20px; border: 2px dashed #eee; }

/* =========================================
   7. Avatar Selection (ปรับขนาดใหม่ เล็กลง)
   ========================================= */
.avatar-grid {
    display: flex;
    justify-content: center;
    gap: 10px; /* ลดระยะห่าง */
    flex-wrap: wrap;
    align-items: center;
}

/* รูปตัวเลือก (ปรับเหลือ 45px) */
.avatar-option {
    width: 45px; 
    height: 45px; 
    border-radius: 50%; 
    cursor: pointer; 
    border: 3px solid transparent; 
    transition: 0.2s; 
    background-color: #f8f9fa; 
    object-fit: cover;
}
.avatar-option:hover { transform: scale(1.1); }
.avatar-option.selected { border-color: var(--primary-color); transform: scale(1.1); box-shadow: 0 0 0 2px rgba(67, 97, 238, 0.2); }

/* ปุ่ม (+) เลือกเพิ่มเติม (ขนาดเท่ารูป) */
.avatar-add-btn {
    width: 45px; 
    height: 45px; 
    border-radius: 50%;
    background: white; 
    border: 2px dashed #ccc; 
    color: #ccc;
    display: flex; 
    justify-content: center; 
    align-items: center;
    cursor: pointer; 
    transition: 0.2s;
    font-size: 18px;
    overflow: hidden; /* เพื่อให้รูปที่เลือกมาทับปุ่มได้พอดี */
    position: relative;
}
.avatar-add-btn:hover { border-color: var(--primary-color); color: var(--primary-color); transform: scale(1.1); }

/* Color Picker */
.color-options { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 20px; }
.color-option { width: 40px; height: 40px; border-radius: 50%; cursor: pointer; border: 3px solid transparent; transition: 0.2s; }
.color-option.selected { border-color: #333; transform: scale(1.1); }
/* =========================================
   8. Avatar Modal Gallery (แก้ไขรูปใหญ่เกิน)
   ========================================= */

/* ตารางจัดวางรูปใน Modal */
.avatar-gallery {
    display: grid; 
    grid-template-columns: repeat(auto-fill, minmax(60px, 1fr)); /* ✅ บังคับให้แบ่งคอลัมน์ อัตโนมัติ (รูปจะไม่ใหญ่เกิน 60px) */
    gap: 15px; 
    padding: 10px;
    max-height: 300px; /* กำหนดความสูง ไม่ให้ยาวล้นจอ */
    overflow-y: auto;  /* ให้เลื่อนขึ้นลงได้ */
}

/* ตัวรูปภาพใน Modal */
.gallery-item {
    width: 100%;        /* ให้เต็มช่อง Grid (60px) ไม่ใช่เต็มจอ */
    aspect-ratio: 1/1;  /* ให้เป็นสี่เหลี่ยมจัตุรัสเสมอ */
    border-radius: 50%; /* วงกลม */
    cursor: pointer; 
    border: 3px solid transparent; 
    transition: 0.2s; 
    background: #f8f9fa;
}

.gallery-item:hover { 
    transform: scale(1.1); 
    border-color: var(--primary-color); 
}