/* --- Biến màu sắc chung --- */
:root {
    --qlcb-primary-color: #0073aa;
    --qlcb-secondary-color: #00a0d2;
    --qlcb-border-color: #dddddd;
    --qlcb-image-border: #cccccc;
    --qlcb-box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    --qlcb-image-shadow: 0 2px 5px rgba(0,0,0,0.15);
}

/* --- Cấu trúc bảng chung --- */
.qlcb-staff-list-container {
    margin: 20px 0;
    font-family: Arial, Helvetica, sans-serif;
    overflow-x: auto;
}

.qlcb-staff-table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0; /* Quan trọng cho một số theme */
}

.qlcb-staff-table th,
.qlcb-staff-table td {
    padding: 12px 15px;
    text-align: left;
    vertical-align: middle;
    border: 1px solid var(--qlcb-border-color); /* Border mặc định */
}

.qlcb-staff-image {
    max-width: 80px;
    height: 80px; /* Set height for consistency */
    border-radius: 50%;
    border: 2px solid var(--qlcb-image-border);
    box-shadow: var(--qlcb-image-shadow);
    object-fit: cover;
    display: block;
    margin: 0 auto;
}
.qlcb-staff-image.qlcb-default-avatar {
    border-radius: 0; /* Ảnh mặc định có thể không tròn */
}


.qlcb-staff-table td a {
    color: var(--qlcb-primary-color);
    text-decoration: none;
}
.qlcb-staff-table td a:hover {
    color: var(--qlcb-secondary-color);
    text-decoration: underline;
}


/* === THEME: DEFAULT (Bóng bẩy) === */
.qlcb-theme-default .qlcb-staff-table {
    box-shadow: var(--qlcb-box-shadow);
    border-radius: 8px;
    overflow: hidden;
}
.qlcb-theme-default .qlcb-staff-table th {
    background: linear-gradient(to bottom, #0085ba, #0073aa);
    color: #ffffff;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-color: #006799; /* Darker border for header */
}
.qlcb-theme-default .qlcb-staff-table tbody tr:nth-of-type(even) {
    background-color: #f9f9f9;
}
.qlcb-theme-default .qlcb-staff-table tbody tr:hover {
    background-color: #f0f8ff; /* AliceBlue */
    transition: background-color 0.3s ease;
}
/* .qlcb-theme-default .qlcb-staff-image - đã có ở trên */


/* === THEME: MINIMAL === */
.qlcb-theme-minimal .qlcb-staff-table {
    border: 1px solid #e0e0e0;
}
.qlcb-theme-minimal .qlcb-staff-table th,
.qlcb-theme-minimal .qlcb-staff-table td {
    border-width: 0 0 1px 0; /* Chỉ border dưới */
    border-color: #e0e0e0;
    padding: 10px;
}
.qlcb-theme-minimal .qlcb-staff-table th {
    background-color: #f7f7f7;
    color: #333;
    font-weight: 600;
    text-transform: none;
}
.qlcb-theme-minimal .qlcb-staff-table tbody tr:hover {
    background-color: #fafafa;
}
.qlcb-theme-minimal .qlcb-staff-image {
    max-width: 60px; height: 60px;
    border-radius: 4px; /* Hơi bo góc */
    border: 1px solid #ddd;
    box-shadow: none;
}

/* === THEME: DARK === */
.qlcb-theme-dark {
    background-color: #2a2a2a; /* Nền cho container nếu bảng không full width */
    color: #e0e0e0;
}
.qlcb-theme-dark .qlcb-staff-table {
    border: 1px solid #444;
}
.qlcb-theme-dark .qlcb-staff-table th,
.qlcb-theme-dark .qlcb-staff-table td {
    border-color: #444;
    color: #e0e0e0;
}
.qlcb-theme-dark .qlcb-staff-table th {
    background-color: #383838;
    color: #f5f5f5;
    font-weight: bold;
}
.qlcb-theme-dark .qlcb-staff-table tbody tr:nth-of-type(even) {
    background-color: #333333;
}
.qlcb-theme-dark .qlcb-staff-table tbody tr:hover {
    background-color: #404040;
}
.qlcb-theme-dark .qlcb-staff-table td a {
    color: #77bbff;
}
.qlcb-theme-dark .qlcb-staff-table td a:hover {
    color: #99ccff;
}
.qlcb-theme-dark .qlcb-staff-image {
    border-color: #555;
}

/* === THEME: CORPORATE === */
.qlcb-theme-corporate .qlcb-staff-table th {
    background-color: #004a7c; /* Màu xanh đậm doanh nghiệp */
    color: #ffffff;
    border-color: #003355;
    text-transform: uppercase;
    font-size: 0.9em;
}
.qlcb-theme-corporate .qlcb-staff-table td {
    border-color: #dce4e9;
}
.qlcb-theme-corporate .qlcb-staff-table tbody tr:nth-of-type(odd) { /* Hàng lẻ có nền */
    background-color: #f2f5f8;
}
.qlcb-theme-corporate .qlcb-staff-table tbody tr:hover {
    background-color: #e6edf2;
}
.qlcb-theme-corporate .qlcb-staff-image {
    border-radius: 4px; /* Ít bo góc hơn */
    border: 1px solid #ccc;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}


/* --- Responsive chung (áp dụng cho tất cả các theme) --- */
@media screen and (max-width: 768px) {
    .qlcb-staff-table {
        border: 0;
        box-shadow: none;
    }
    .qlcb-staff-table thead { display: none; }
    .qlcb-staff-table tr {
        margin-bottom: 15px;
        display: block;
        border: 1px solid var(--qlcb-border-color); /* Border cho card */
        border-radius: 6px;
    }
    /* Riêng cho từng theme nếu cần điều chỉnh card border */
    .qlcb-theme-minimal tr { border-color: #e0e0e0; }
    .qlcb-theme-dark tr { border-color: #444; }
    .qlcb-theme-corporate tr { border-color: #dce4e9; box-shadow: var(--qlcb-box-shadow); }


    .qlcb-staff-table td {
        display: block;
        text-align: right;
        padding-left: 50%;
        position: relative;
        border: none;
        border-bottom: 1px dotted var(--qlcb-border-color); /* Dotted cho theme default */
    }
     /* Riêng cho từng theme nếu cần điều chỉnh card border */
    .qlcb-theme-minimal td { border-bottom-color: #e0e0e0; }
    .qlcb-theme-dark td { border-bottom-color: #444; }
    .qlcb-theme-corporate td { border-bottom-color: #dce4e9; }

    .qlcb-staff-table td:last-child { border-bottom: 0; }
    .qlcb-staff-table td::before {
        content: attr(data-label);
        position: absolute;
        left: 10px;
        width: calc(50% - 20px);
        padding-right: 10px;
        white-space: nowrap;
        text-align: left;
        font-weight: bold;
    }
    /* Màu label cho từng theme */
    .qlcb-theme-default td::before { color: var(--qlcb-primary-color); }
    .qlcb-theme-minimal td::before { color: #555; }
    .qlcb-theme-dark td::before { color: #aaa; }
    .qlcb-theme-corporate td::before { color: #004a7c; }


    .qlcb-staff-image {
        max-width: 60px; height: 60px;
        float: right;
        margin: 0 0 5px 5px;
    }
    .qlcb-staff-table td[data-label*="<?php _e( 'Ảnh', 'quan-ly-can-bo' ); ?>"]::before, /* Dùng *= để bắt cả "Ảnh" và "Ảnh đại diện" */
    .qlcb-staff-table td[data-label*="<?php echo qlcb_get_available_fields()['anh_dai_dien']; ?>"]::before { /* Cụ thể hơn */
        display: none;
    }
    .qlcb-staff-table td[data-label*="<?php _e( 'Ảnh', 'quan-ly-can-bo' ); ?>"],
    .qlcb-staff-table td[data-label*="<?php echo qlcb_get_available_fields()['anh_dai_dien']; ?>"] {
        padding-left: 10px;
        text-align: center;
    }
}