/* Styling ทั่วไปของ Body และ Container */
body {
    font-family: 'Sarabun', sans-serif;
    margin: 0;
    background-color: #eef1f6; /* สีพื้นหลังอ่อนๆ */
    display: flex;
    justify-content: center;
    align-items: flex-start; /* จัดให้อยู่ด้านบน ไม่ใช่กึ่งกลางแนวตั้ง */
    min-height: 100vh; /* ความสูงขั้นต่ำเต็มหน้าจอ */
    padding: 20px;
    box-sizing: border-box;
}

.dashboard-container {
    background-color: #ffffff;
    border-radius: 15px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 1200px; /* กำหนดความกว้างสูงสุดของ dashboard */
    overflow: hidden; /* ป้องกันเนื้อหาล้น */
    display: flex;
    flex-direction: column; /* จัดองค์ประกอบภายในเป็นคอลัมน์ */
    min-height: calc(100vh - 40px); /* ให้สูงเกือบเต็มหน้าจอ ลบ padding ของ body */
}

/* Header */
.dashboard-header {
    display: flex;
    align-items: center;
    padding: 25px 30px;
    background: linear-gradient(to right, #6a5acd, #8a2be2); /* สีม่วงไล่ระดับ */
    color: white;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
}

.header-left {
    display: flex;
    align-items: center;
}

.system-logo {
    font-size: 2.5em;
    margin-right: 15px;
    /* text-shadow: 1px 1px 3px rgba(0,0,0,0.2); */
}

.system-info {
    line-height: 1.2;
}

.system-name {
    font-size: 1.6em;
    font-weight: 600;
}

.system-tagline {
    font-size: 0.9em;
    opacity: 0.9;
}

/* Navigation Tabs */
.main-nav-tabs {
    display: flex;
    justify-content: space-around; /* กระจายแท็บเท่าๆ กัน */
    background-color: #f0f2f5;
    padding: 10px 0;
    border-bottom: 1px solid #e0e0e0;
    flex-wrap: wrap; /* ให้แท็บขึ้นบรรทัดใหม่เมื่อหน้าจอเล็ก */
}

.nav-tab {
    padding: 12px 20px;
    color: #555;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
    border-radius: 8px;
    margin: 5px; /* เพิ่ม margin เพื่อไม่ให้ติดกันเกินไปใน mobile */
    display: flex;
    align-items: center;
    gap: 8px; /* ระยะห่างระหว่าง icon กับ text */
}

.nav-tab:hover {
    background-color: #e5e7eb;
    color: #6a5acd;
}

.nav-tab.active {
    background-color: #6a5acd;
    color: white;
    box-shadow: 0 2px 8px rgba(106, 92, 205, 0.3);
}

.nav-tab i {
    font-size: 1.1em;
}


/* Tab Content Container */
.tab-content-container {
    padding: 30px;
    flex-grow: 1; /* ทำให้เนื้อหาสามารถขยายเพื่อดัน footer ลงไปด้านล่างได้ */
}

.tab-content {
    display: none; /* ซ่อนทุก content โดย default */
}

.tab-content.active-tab-content {
    display: block; /* แสดงเฉพาะ content ที่ active */
}

.tab-content h1 {
    font-size: 2em;
    color: #333;
    margin-bottom: 10px;
    border-bottom: 2px solid #6a5acd;
    padding-bottom: 10px;
    display: inline-block; /* ทำให้เส้นใต้ไม่กินพื้นที่ 100% */
}

.tab-content p {
    font-size: 1.1em;
    color: #666;
    margin-bottom: 25px;
}

/* Modules Grid */
.modules-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Responsive grid with minimum 280px width per card */
    gap: 25px;
}

/* Module Card */
.module-card {
    background-color: #f8f8f8; /* สีพื้นหลังเริ่มต้น (จะถูก override ด้วย planning-purple-bg) */
    border-radius: 12px;
    padding: 25px;
    box-sizing: border-box; /* สำคัญ: เพื่อให้ padding ไม่ดัน width เกิน 100% ของพื้นที่ column */

    /* เมื่อ <a> ครอบ div.module-card */
    display: flex; /* ใช้ flex เพื่อจัดเรียงเนื้อหาภายในของการ์ด (icon, title, desc) */
    flex-direction: column;
    align-items: center; /* จัดเนื้อหาภายในให้อยู่กึ่งกลางแนวนอน */
    justify-content: center; /* จัดเนื้อหาภายในให้อยู่กึ่งกลางแนวตั้ง */
    text-align: center; /* จัดข้อความให้อยู่กึ่งกลาง */

    text-decoration: none; /* ลบเส้นใต้ของลิงก์ */
    color: inherit; /* ทำให้สีข้อความภายในลิงก์เป็นสีเดียวกับที่กำหนดไว้ในการ์ดเดิม */

    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08); /* เงาของการ์ด */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* transition สำหรับ hover effect */
    cursor: pointer; /* แสดงผลเป็นตัวชี้เมื่อเมาส์วางอยู่บนการ์ด */

    height: 100%; /* สำคัญ: ทำให้การ์ดสูงเท่ากันใน Grid row */
    width: 100%; /* ทำให้การ์ดเต็มความกว้างของ Grid cell */
}

.module-card:hover {
    transform: translateY(-5px); /* ยกการ์ดขึ้นเล็กน้อยเมื่อ hover */
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15); /* เพิ่มเงาเมื่อ hover */
}

.card-icon {
    font-size: 3em;
    margin-bottom: 15px;
    color: rgba(255, 255, 255, 0.85); /* สี icon โปร่งแสง */
}

.card-title {
    font-size: 1.4em;
    font-weight: 600;
    color: white; /* สีตัวอักษรของชื่อการ์ด */
    margin-bottom: 8px;
}

.card-description {
    font-size: 0.9em;
    color: rgba(255, 255, 255, 0.8); /* สีตัวอักษรของคำอธิบายการ์ด */
    line-height: 1.4;
}

/* Background Colors for Cards */
.academic-red-bg { background-image: linear-gradient(to right top, #ff6b6b, #ee5253); }
.academic-orange-bg { background-image: linear-gradient(to right top, #ffa500, #ff7f50); }
.academic-deep-orange-bg { background-image: linear-gradient(to right top, #ff7043, #f4511e); }

.planning-purple-bg { background-image: linear-gradient(to right top, #a29bfe, #6c5ce7); }
.planning-indigo-bg { background-image: linear-gradient(to right top, #6a5acd, #483d8b); }

.green-bg { background-image: linear-gradient(to right top, #6ab04c, #4CAF50); }
.light-green-bg { background-image: linear-gradient(to right top, #9ccc65, #8bc34a); }
.dark-green-bg { background-image: linear-gradient(to right top, #388e3c, #2e7d32); }

.blue-bg { background-image: linear-gradient(to right top, #48dbfb, #0abde3); }
.light-blue-bg { background-image: linear-gradient(to right top, #81ecec, #74b9ff); }

.student-teal-bg { background-image: linear-gradient(to right top, #00cec9, #00b894); }
.student-cyan-bg { background-image: linear-gradient(to right top, #00cec9, #00d2d3); }
.student-light-green-bg { background-image: linear-gradient(to right top, #a4e66e, #7be0a4); }

.green-blue-gradient { background-image: linear-gradient(to right top, #2ecc71, #3498db); }


/* Footer Styling */
.dashboard-footer {
    margin-top: 30px; /* เว้นระยะห่างจากเนื้อหาด้านบน */
    padding: 20px;
    text-align: center;
    font-size: 0.85em;
    color: #777;
    border-top: 1px solid #eee; /* เส้นแบ่งด้านบน */
    background-color: #ffffff; /* สีพื้นหลังเดียวกับ dashboard-container */
    border-bottom-left-radius: 15px; /* ทำให้มุมโค้งมนตาม dashboard-container */
    border-bottom-right-radius: 15px;

    /* เพิ่มคุณสมบัติ 3 อย่างนี้เพื่อให้ Footer อยู่กึ่งกลางและมีขนาดเท่า dashboard-container */
    /* เนื่องจาก footer อยู่ใน dashboard-container ซึ่งมี max-width และ margin auto อยู่แล้ว
       การกำหนด max-width ให้ footer อีกครั้งก็เพื่อให้มันมีขนาดที่คาดหวัง
       แต่จริงๆ แล้วมันจะถูกจำกัดด้วย parent อยู่แล้ว
       หากต้องการให้ footer มีความกว้างเต็ม dashboard-container */
    width: 100%; /* ให้ Footer กินพื้นที่เต็มความกว้างของ parent (dashboard-container) */
    /* max-width: 1200px; /* หากต้องการจำกัดความกว้างของ footer ให้เท่ากับ dashboard-container */
    /* margin-left: auto; */
    /* margin-right: auto; */
    /* สองบรรทัดข้างบนไม่จำเป็นแล้ว เพราะ footer อยู่ใน dashboard-container ที่จัดกึ่งกลางอยู่แล้ว */
}

.dashboard-footer p {
    margin: 5px 0;
}

.dashboard-footer a {
    color: #6a5acd; /* สีลิงก์ใน footer */
    text-decoration: none;
    transition: color 0.3s ease;
}

.dashboard-footer a:hover {
    color: #4b3e8e; /* สีลิงก์เมื่อโฮเวอร์ */
    text-decoration: underline;
}

/* Responsive Design */
@media (max-width: 992px) {
    .dashboard-header {
        flex-direction: column;
        text-align: center;
        padding: 20px;
    }

    .header-left {
        flex-direction: column;
        margin-bottom: 15px;
    }

    .system-logo {
        margin-right: 0;
        margin-bottom: 10px;
    }

    .system-name {
        font-size: 1.4em;
    }

    .system-tagline {
        font-size: 0.8em;
    }

    .main-nav-tabs {
        flex-direction: column;
        align-items: center;
    }

    .nav-tab {
        width: 90%; /* ทำให้แท็บเต็มความกว้างมากขึ้นใน mobile */
        text-align: center;
        justify-content: center; /* จัดข้อความและไอคอนให้อยู่กึ่งกลาง */
    }

    .dashboard-container {
        padding: 10px; /* ลด padding รอบ container */
    }

    .tab-content-container {
        padding: 20px;
    }

    .modules-grid {
        grid-template-columns: 1fr; /* 1 column per row on smaller screens */
    }

    .module-card {
        padding: 20px;
    }

    /* Footer ใน Responsive */
    .dashboard-footer {
        padding: 15px;
        /* ไม่ต้องใช้ max-width: 1200px; ที่นี่ เพราะ body จะจัดการให้กึ่งกลางอยู่แล้ว */
    }
}

@media (max-width: 768px) {
    /* คุณสมบัติเพิ่มเติมสำหรับหน้าจอขนาดเล็กมาก ถ้าจำเป็น */
}