/* ============================================================
   1. DESKTOP VIEW (Mặc định)
   ============================================================ */

/* Header Desktop: In đậm, viết hoa */
.don-tu-header.nhan-vien-grid {
    background-color: #f8f9fa;
    border-bottom: 2px solid #dee2e6;
    font-weight: 800; 
    color: #1a252f;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 15px 12px;
}

/* Grid layout cho Desktop */
.nhan-vien-grid {
    display: grid;
    grid-template-columns: 100px 1.5fr 1fr 1fr 120px;
    gap: 12px;
    align-items: center;
    padding: 12px;
}

.item-title {
    font-weight: 700;
    color: #2c3e50;
}

/* Mặc định ẩn các thành phần chỉ dành cho Mobile khi ở Desktop */
.mobile-only-flex {
    display: none !important;
}


/* ============================================================
   2. MOBILE VIEW (Dưới 768px)
   ============================================================ */

@media (max-width: 768px) {
    /* Ẩn các cột thừa của Desktop và Header Desktop */
    .hide-mobile, 
    .don-tu-header.nhan-vien-grid {
        display: none !important;
    }

    /* Hiển thị các row dành riêng cho Mobile */
    .mobile-only-flex {
        display: flex !important;
    }

    .don-tu-list {
        background: #f1f3f5; 
        padding: 10px;
    }

    /* Chuyển dòng thành Card */
    .don-tu-item.nhan-vien-grid {
        display: flex;
        flex-direction: column;
        gap: 10px;
        background: #fff;
        margin-bottom: 12px;
        border-radius: 10px;
        box-shadow: 0 3px 10px rgba(0,0,0,0.08);
        padding: 14px;
        border-left: 4px solid #3498db;
    }

    /* Row 1: Tên + Mã NV */
    .nv-row-1 {
        justify-content: space-between;
        align-items: flex-start;
        width: 100%;
    }

    /* Row 2: Chức vụ + Trạng thái */
    .nv-row-2 {
        justify-content: space-between;
        align-items: center;
        width: 100%;
        font-size: 0.85rem;
        color: #576574;
    }
    
    .nv-ma-mobile {
        font-family: 'Courier New', Courier, monospace;
        color: #8395a7;
        font-size: 0.8rem;
        background: #f8f9fa;
        padding: 2px 6px;
        border-radius: 4px;
        font-weight: 600;
    }

    .don-tu-item .item-title {
        text-transform: uppercase;
        font-size: 1rem;
        flex: 1;
        padding-right: 10px;
        color: #2c3e50;
    }
}



.tab-pane.hidden {
  display: none;
}

.tab-pane {
    display: block; /* Hoặc grid tùy layout của bạn */
    min-height: 200px; /* Đảm bảo có không gian để hiển thị */
}


/*  FORM NHÂN VIÊN */

/* 1. ĐỊNH DANH RIÊNG CHO CONTAINER CHÍNH */
#nhanVienFormView {
    display: block !important; /* Ép hiển thị container chính */
    visibility: visible !important;
    opacity: 1 !important;
    width: 100%;
    min-height: 500px;
    background: transparent;
}

/* 2. CẤU TRÚC CARD BÊN TRONG */
#nhanVienFormView .card {
    background: #fff;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    margin: 10px auto;
    max-width: 100%;
}

/* 3. ĐIỀU KHIỂN HIỂN THỊ CÁC TAB PANE */
/* Reset lại toàn bộ tab-pane bên trong ID này */
#nhanVienFormView .tab-pane {
    display: none; /* Mặc định ẩn tất cả */
    width: 100%;
    padding-top: 15px;
    animation: fadeIn 0.3s ease;
}

/* Chỉ hiện khi không có class 'hidden' HOẶC khi có class 'active' (nếu bạn dùng) */
#nhanVienFormView .tab-pane:not(.hidden) {
    display: block !important;
}

/* 4. THANH ĐIỀU HƯỚNG TAB */
#nhanVienFormView .nv-tabs {
    display: flex;
    gap: 10px;
    border-bottom: 2px solid #eee;
    padding-bottom: 10px;
    margin-bottom: 20px;
    overflow-x: auto;
}

#nhanVienFormView .tab {
    padding: 10px 20px;
    border: none;
    background: #f5f5f5;
    border-radius: 8px 8px 0 0;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.2s;
    white-space: nowrap;
}

#nhanVienFormView .tab.active {
    background: #1976d2;
    color: white;
}

/* 5. GRID CHO FORM NẰM TRONG CÁC TAB */
#nhanVienFormView .form-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 cột trên desktop */
    gap: 15px;
}

/* Responsive cho Form Grid */
@media (max-width: 1024px) {
    #nhanVienFormView .form-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    #nhanVienFormView .form-grid {
        grid-template-columns: 1fr;
    }
}

/* 6. CÁC LỚP TIỆN ÍCH CHO GRID (Col-span) */
#nhanVienFormView .span-2 { grid-column: span 2; }
#nhanVienFormView .span-4 { grid-column: span 4; }

@media (max-width: 600px) {
    #nhanVienFormView .span-2, 
    #nhanVienFormView .span-4 { grid-column: span 1; }
}

/* Hiệu ứng fadeIn nhẹ khi chuyển tab */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}

/* FORM EDIT */

/* --- BỘ CSS ĐỊNH DANH RIÊNG CHO VIEW CHỈNH SỬA --- */

/* 1. Ép hiển thị container chính bất chấp CSS hệ thống */
#nhanVienEditView {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100%;
    background-color: #f8f9fa; /* Màu nền nhẹ để phân biệt */
    min-height: 100vh;
}

/* 2. Cấu trúc Card bao ngoài */
#nhanVienEditView .card {
    background: #ffffff;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    margin: 15px auto;
    max-width: 1200px; /* Giới hạn độ rộng để dễ nhìn trên desktop */
}

/* 3. Tiêu đề và Header */
#nhanVienEditView .view-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
    border-bottom: 1px solid #eee;
    padding-bottom: 15px;
}

#nhanVienEditView .view-title {
    font-size: 1.5rem;
    color: #2c3e50;
    margin: 0;
}

/* 4. Tab Navigation - Cố định hiển thị Flex */
#nhanVienEditView .nv-tabs {
    display: flex !important; 
    gap: 8px;
    margin-bottom: 20px;
    overflow-x: auto;
    padding-bottom: 5px;
}

#nhanVienEditView .tab {
    padding: 10px 20px;
    border: 1px solid #ddd;
    background: #fdfdfd;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.3s ease;
    white-space: nowrap;
}

#nhanVienEditView .tab.active {
    background: #1976d2 !important;
    color: white !important;
    border-color: #1976d2;
}

/* 5. Điều khiển Tab Pane (Ẩn/Hiện) */
#nhanVienEditView .tab-pane {
    display: block; /* Mặc định cho phép hiển thị */
    width: 100%;
}

/* Ép ẩn khi có class .hidden */
#nhanVienEditView .tab-pane.hidden {
    display: none !important;
}

/* 6. Form Grid - Chia 4 cột chuẩn */
#nhanVienEditView .form-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 15px;
    margin-top: 10px;
}

/* Group input và Label */
#nhanVienEditView .form-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

#nhanVienEditView .form-group label {
    font-weight: 600;
    font-size: 13px;
    color: #555;
}

#nhanVienEditView .form-group input, 
#nhanVienEditView .form-group select {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
}

#nhanVienEditView .form-group input:disabled {
    background-color: #eee;
    cursor: not-allowed;
}

/* 7. Form Actions (Nút Lưu) */
#nhanVienEditView .form-actions {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #eee;
    text-align: right;
}

#nhanVienEditView button.primary {
    background: #27ae60;
    color: white;
    padding: 12px 30px;
    border: none;
    border-radius: 6px;
    font-weight: bold;
    cursor: pointer;
    font-size: 16px;
}

#nhanVienEditView button.primary:hover {
    background: #219150;
}

/* Responsive cho di động */
@media (max-width: 992px) {
    #nhanVienEditView .form-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 500px) {
    #nhanVienEditView .form-grid {
        grid-template-columns: 1fr !important;
    }
}