/*
 * =========================================
 * โค้ดสำหรับปรับปรุง Layout และ Footer
 * =========================================
 */
html, body {
    height: 100%;
}
body {
    display: flex;
    flex-direction: column;
}
main {
    flex-grow: 1;
}

/*
 * =========================================
 * โค้ดสำหรับปรับสี Header และ Footer
 * =========================================
 */
.custom-header {
    background: linear-gradient(90deg, rgba(36,41,67,1) 0%, rgba(44,53,80,1) 100%);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
}
.custom-footer {
    background: #242943;
    color: #e0e0e0;
    padding: 1.5rem 0;
    flex-shrink: 0;
}
.custom-header .navbar-nav .nav-link {
    color: rgba(255, 255, 255, 0.8);
}
.custom-header .navbar-nav .nav-link:hover,
.custom-header .navbar-nav .nav-link.active {
    color: #ffffff;
}

/*
 * =========================================
 * สไตล์อื่นๆ
 * =========================================
 */
.login-container {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
.login-card {
    max-width: 450px;
    width: 100%;
}
#route-list .card {
    cursor: pointer;
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}
#route-list .card:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}
/*
 * =========================================
 * สไตล์เพิ่มเติมสำหรับเมนู Active
 * =========================================
 */

/* เพิ่ม Transition และปรับแต่งเมนูทุกอันให้สวยงามขึ้น */
.custom-header .navbar-nav .nav-link {
    transition: all 0.3s ease;
    border-radius: 8px;
    /* ทำให้ขอบมนสวยงาม */
    padding-left: 1rem;
    padding-right: 1rem;
    margin: 0 2px;
    /* เพิ่มระยะห่างระหว่างเมนูเล็กน้อย */
}

/* ทำให้เมนูที่ไม่ Active สว่างขึ้นเล็กน้อยเมื่อนำเมาส์ไปชี้ (Hover) */
.custom-header .navbar-nav .nav-link:not(.active):hover {
    background-color: rgba(255, 255, 255, 0.08);
}

/* --- สไตล์ของเมนู Active ที่เราต้องการ --- */
.custom-header .navbar-nav .nav-link.active {
    background-color: #4dabf7;
    /* พื้นหลังสีฟ้าสดใส */
    color: #ffffff !important;
    /* ตัวอักษรสีขาว (ใส่ !important เพื่อความแน่นอน) */
    box-shadow: 0 2px 8px rgba(77, 171, 247, 0.4);
    /* เพิ่มเงาเรืองแสงสีฟ้าจางๆ */
}