/* webapp/static/css/style.css */

/* --- CÀI ĐẶT CHUNG & CÁC TRANG CARD VIEW --- */
[data-bs-theme="light"] body {
    background-color: #f8f9fa;
}
[data-bs-theme="dark"] body {
    background-color: #212529;
}

/* === THAY ĐỔI QUAN TRỌNG Ở ĐÂY === */
.login-container {
    /* Đã xóa: min-height: 100vh; */
    /* Đã xóa: align-items: center; */
    
    /* Thêm các thuộc tính này để thay thế: */
    padding-top: 3rem; /* (Bạn có thể tăng/giảm số này, vd: 4rem) */
    padding-bottom: 3rem;

    /* Giữ nguyên: */
    display: flex;
    justify-content: center;
}
/* Sửa lại class này để không gây lỗi scrollbar */
.change-password-container {
    padding-top: 3rem;
    padding-bottom: 3rem;
    display: flex;
    justify-content: center;
}

.login-card, .change-password-card {
    border: 1px solid var(--bs-border-color-translucent);
    border-radius: 0.5rem;
    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.05);
    background-color: var(--bs-body-bg);
    padding: 2.5rem;
    max-width: 500px;
    width: 100%;
}

.login-card {
    max-width: 425px;
}

.text-header {
    color: var(--bs-body-color);
    font-size: 1.75rem;
    font-weight: 700;
}
.text-subheader {
    color: var(--bs-secondary-color);
    font-size: 1rem;
}
.instructions {
    font-size: 0.85rem;
    color: var(--bs-secondary-color);
}
.instructions ul {
    list-style-type: none;
    padding-left: 0;
    margin-bottom: 0;
}
.instructions li {
    margin-bottom: 0.3rem;
}


/* --- THEME & HEADER CHUNG --- */
[data-bs-theme="light"] .app-header {
    background-color: #ffffff;
}
[data-bs-theme="dark"] .app-header {
    background-color: var(--bs-body-bg);
}

[data-bs-theme="dark"] h1,
[data-bs-theme="dark"] h3,
[data-bs-theme="dark"] h5,
[data-bs-theme="dark"] h6 {
    color: #dee2e6;
}

/* --- CÁC BẢNG DỮ LIỆU --- */
.table {
    vertical-align: middle;
}

.table thead {
    vertical-align: middle;
}

[data-bs-theme="light"] .table thead {
    background-color: #0d6efd;
    color: white;
}
[data-bs-theme="light"] .table thead a {
    color: white;
}

[data-bs-theme="dark"] .table thead {
    background-color: #343a40;
    color: #dee2e6;
}

.table thead th {
    text-align: center;
}

.resizable-table, .results-table {
    width: 100%;
    table-layout: fixed;
}

.resizable-table th:nth-child(1), .resizable-table td:nth-child(1),
.resizable-table th:nth-child(3), .resizable-table td:nth-child(3),
.results-table th:nth-child(1), .results-table td:nth-child(1),
.results-table th:nth-child(3), .results-table td:nth-child(3) {
    text-align: center;
}

.header-row {
    font-weight: bold;
}
[data-bs-theme="light"] .header-row { background-color: #f2f2f2; }
[data-bs-theme="dark"] .header-row { background-color: #343a40; }

.resizable-table th.resizable .resize-handle {
    position: absolute;
    top: 0;
    right: 0;
    width: 10px;
    height: 100%;
    cursor: col-resize;
    user-select: none;
    z-index: 10;
}

.resizable-table th:nth-child(1), .results-table th:nth-child(1) { width: 4%; }
.resizable-table th:nth-child(2), .results-table th:nth-child(2) { width: 20%; }
.resizable-table th:nth-child(3), .results-table th:nth-child(3) { width: 8%; }
.resizable-table th:nth-child(4), .results-table th:nth-child(4) { width: 10%; }
.resizable-table th:nth-child(5), .results-table th:nth-child(5) { width: 20%; }
.resizable-table th:nth-child(6), .results-table th:nth-child(6) { width: 19%; }
.resizable-table th:nth-child(7), .results-table th:nth-child(7) { width: 19%; }

/* --- TEXTAREA --- */
.resizable-table textarea, textarea[readonly] {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    border: 1px solid var(--bs-border-color-translucent);
    border-radius: 4px;
    resize: vertical;
    margin: 0;
    padding: 8px;
    min-height: 100px;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
.resizable-table textarea:focus {
    outline: 0;
    border-color: #86b7fe;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, .25);
}

[data-bs-theme="light"] textarea[readonly] {
    background-color: #e9ecef;
    cursor: default;
}
[data-bs-theme="dark"] textarea[readonly] {
    background-color: #2b3035;
    color: #dee2e6;
    cursor: default;
    border: 1px solid #495057;
}

/* === TÙY CHỈNH STYLE CHO CÁC TAB === */

.nav-tabs .nav-link {
    border: 1px solid var(--bs-border-color-translucent);
    border-bottom: 1px solid var(--bs-border-color);
    margin-right: 2px;
    border-radius: 0.375rem 0.375rem 0 0;
    background-color: var(--bs-tertiary-bg);
    color: var(--bs-secondary-color);
    /* Giữ padding trên/dưới, giảm trái/phải cho nút không active */
    padding: 0.5rem 0.3rem;
    text-align: center;
}

/* --- LÀM NỔI BẬT TAB ACTIVE --- */
.nav-tabs .nav-link.active {
    /* Nút active: XÓA padding để span con chiếm hết chỗ */
    padding: 0;
    /* Nền nút active giờ sẽ trong suốt */
    background-color: transparent;
    /* Bỏ border đáy */
    border-bottom-color: transparent;
    /* Border còn lại đậm hơn */
    border-color: var(--bs-border-color) var(--bs-border-color) transparent;
    font-weight: normal; /* Đã đổi thành normal */
    color: var(--bs-body-color); /* Chữ của nút (không phải span) */
}

/* --- STYLE CHO PHẦN TEXT BÊN TRONG TAB ACTIVE --- */
.nav-tabs .nav-link.active .tab-text-highlight {
    display: block; /* Cho span chiếm toàn bộ chiều rộng/cao của nút cha */
    background-color: var(--bs-primary); /* Nền xanh primary */
    color: white; /* Chữ trắng */
    /* Áp dụng padding ở đây để tạo khoảng cách */
    padding: 0.5rem 0.8rem;
    /* Bo góc trên khớp với nút cha */
    border-radius: 0.375rem 0.375rem 0 0;
    line-height: 1.25; /* Điều chỉnh chiều cao dòng nếu cần */
}

/* Hiệu ứng hover */
.nav-tabs .nav-link:not(.active):hover {
    border-color: var(--bs-border-color);
    background-color: var(--bs-secondary-bg);
    color: var(--bs-emphasis-color);
}

.nav-tabs {
    border-bottom: none;
}

.tab-content {
    border: 1px solid var(--bs-border-color);
    border-top: none;
    padding: 1rem;
    background-color: var(--bs-body-bg);
    border-radius: 0 0 0.375rem 0.375rem;
    margin-top: -1px;
}

/* Phần còn lại giữ nguyên */
.tab-pane .pt-3 { padding-top: 0 !important; }
.tab-content .card { border: none; border-radius: 0; box-shadow: none; }
.tab-content .card .card-header { border-bottom: 1px solid var(--bs-border-color-translucent); margin: -1rem -1rem 1rem -1rem; padding: 0.75rem 1rem; border-radius: 0; background-color: transparent; }
.tab-content .card .card-body { padding: 0; }

/* === KẾT THÚC TÙY CHỈNH STYLE CHO CÁC TAB === */

/* === RESET STYLE TAB ACTIVE CHO TRANG SINGLE TAB (result.html) === */

/* Đưa style của nút active về gần giống nút thường, NHƯNG dùng màu nền chính */
.single-tab-view .nav-link.active {
    /* SỬA DÒNG NÀY: Dùng màu nền body */
    background-color: var(--bs-body-bg); 
    color: var(--bs-secondary-color); 
    padding: 0.5rem 0.3rem; 
    border: 1px solid var(--bs-border-color-translucent); 
    /* SỬA DÒNG NÀY: Border đáy phải giống border của tab-content */
    border-bottom: 1px solid var(--bs-border-color); 
    font-weight: normal; 
    border-radius: 0.375rem 0.375rem 0 0; 
}

/* Bỏ style đặc biệt của span bên trong (giữ nguyên) */
.single-tab-view .nav-link.active .tab-text-highlight {
    display: inline; 
    background-color: transparent; 
    color: inherit; 
    padding: 0; 
    border-radius: 0; 
}

/* Đảm bảo border top của content khớp */
.single-tab-view + .tab-content {
     border-top: 1px solid var(--bs-border-color); /* Luôn là màu border chính */
}


/* === TỰ ĐỘNG ẨN THÔNG BÁO (ALERT) === */

/* 1. Định nghĩa keyframes cho animation */
@keyframes fadeOutAndSlideUp {
    /* Trạng thái ban đầu (hiển thị) */
    from {
        opacity: 1;
        transform: translateY(0);
        /* Giữ nguyên các giá trị ban đầu (height, margin, v.v.) */
        /* Chúng ta cần thêm margin-bottom để nó đẩy nội dung xuống */
        margin-bottom: 1rem; 
    }
    /* Trạng thái cuối cùng (ẩn) */
    to {
        opacity: 0;
        visibility: hidden;
        transform: translateY(-20px);
        
        /* CẬP NHẬT: Thêm các thuộc tính này để co lại */
        height: 0;
        margin-top: 0;
        margin-bottom: 0;
        padding-top: 0;
        padding-bottom: 0;
        border-width: 0;
    }
}

/* 2. Áp dụng animation cho các alert */
.alert {
    animation-name: fadeOutAndSlideUp;
    
    /* CẬP NHẬT: Thời gian animation chạy (mờ đi) */
    animation-duration: 0.5s; 
    
    /* CẬP NHẬT: Thời gian chờ TRƯỚC KHI animation bắt đầu */
    animation-delay: 2s; /* <-- Chờ 2s + Mờ 0.5s = Tổng 2.5s */

    animation-fill-mode: forwards;
    animation-timing-function: ease-out;

    /* CẬP NHẬT: Thêm overflow: hidden để tránh nội dung tràn ra khi co lại */
    overflow: hidden;
    /* Đảm bảo nó có margin-bottom ban đầu (giống Bootstrap) */
    margin-bottom: 1rem;
}