/* =====================================================================
   HE THONG BANG LUONG - Bang mau & kieu chu rieng
   (Ghi de Bootstrap 5.3 bang cach set truc tiep mau/border-radius tren
   tung thanh phan, khong phu thuoc vao cach Bootstrap noi bo lien ket
   bien CSS, de dam bao hien thi dung tren moi phien ban CDN.)
   ===================================================================== */

:root {
    --color-primary: #2954A6;
    --color-primary-dark: #1E3E80;
    --color-primary-light: #EAF0FA;
    --color-accent: #C99A2E;
    --color-accent-dark: #A87F1E;
    --color-accent-light: #FBF1DC;
    --color-success: #2F9E64;
    --color-success-dark: #23824F;
    --color-success-light: #E6F6ED;
    --color-danger: #D6455A;
    --color-danger-dark: #B7334A;
    --color-danger-light: #FBEAEC;
    --color-warning: #E0A94B;
    --color-warning-dark: #C68F34;
    --color-warning-light: #FCF3E3;
    --color-secondary: #6B7A90;
    --color-secondary-dark: #57667A;
    --color-navy: #16223B;
    --color-navy-soft: #1F2E4D;
    --color-bg: #F4F6FA;
    --color-surface: #FFFFFF;
    --color-text: #1F2937;
    --color-text-muted: #6B7280;
    --color-border: #E3E8F0;
    --font-main: 'Be Vietnam Pro', 'Segoe UI', Roboto, system-ui, sans-serif;
    --radius: 0.6rem;
    --radius-sm: 0.4rem;
    --radius-lg: 0.9rem;
}

/* ===== Nen chung & typography ===== */
body {
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-main);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 700;
    color: var(--color-navy);
}

a {
    color: var(--color-primary);
}

a:hover {
    color: var(--color-primary-dark);
}

/* Gioi han chieu rong noi dung tren man hinh PC rat rong, can giua lai
   de de doc hon (tu dong khong anh huong tren man hinh nho hon 1440px) */
.container-fluid {
    max-width: 1440px;
    margin-left: auto;
    margin-right: auto;
}

/* Trang Cham cong / Bang luong co bang rat nhieu cot (28 ngay + cac cot tong hop),
   nen bo gioi han chieu rong de tan dung toi da man hinh, giam bot phan phai cuon ngang */
.container-fluid.container-wide {
    max-width: 100%;
}

/* ===== Thanh dieu huong ===== */
.navbar.bg-dark {
    background: linear-gradient(180deg, var(--color-navy) 0%, var(--color-navy-soft) 100%) !important;
    box-shadow: 0 2px 10px rgba(22, 34, 59, .25);
}

.navbar-brand {
    font-weight: 800;
    letter-spacing: .2px;
}

.navbar-brand i {
    color: var(--color-accent);
    margin-right: .25rem;
}

.navbar-dark .navbar-nav .nav-link {
    color: rgba(255, 255, 255, .75);
    font-weight: 500;
    padding: .5rem .9rem;
    border-radius: var(--radius-sm);
    transition: background-color .15s ease, color .15s ease;
}

.navbar-dark .navbar-nav .nav-link:hover {
    color: #fff;
    background-color: rgba(255, 255, 255, .08);
}

.navbar-dark .navbar-nav .nav-link.active {
    color: #fff !important;
    font-weight: 700 !important;
    background-color: rgba(201, 154, 46, .18);
    box-shadow: inset 0 -2px 0 var(--color-accent);
}

.navbar-text {
    color: rgba(255, 255, 255, .65) !important;
}

.navbar .badge.bg-secondary {
    background-color: rgba(255, 255, 255, .15) !important;
    font-weight: 500;
}

/* ===== The (card) ===== */
.card {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: 0 2px 10px rgba(22, 34, 59, .05);
}

.card-header {
    background-color: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    font-weight: 700;
    color: var(--color-navy);
    border-top-left-radius: var(--radius-lg) !important;
    border-top-right-radius: var(--radius-lg) !important;
}

/* ===== Nut bam ===== */
.btn {
    font-weight: 600;
    border-radius: var(--radius-sm);
}

.btn-primary {
    --bs-btn-bg: var(--color-primary);
    --bs-btn-border-color: var(--color-primary);
    --bs-btn-hover-bg: var(--color-primary-dark);
    --bs-btn-hover-border-color: var(--color-primary-dark);
    --bs-btn-active-bg: var(--color-primary-dark);
    --bs-btn-active-border-color: var(--color-primary-dark);
    --bs-btn-disabled-bg: var(--color-primary);
    --bs-btn-disabled-border-color: var(--color-primary);
}

.btn-outline-primary {
    --bs-btn-color: var(--color-primary);
    --bs-btn-border-color: var(--color-primary);
    --bs-btn-hover-bg: var(--color-primary);
    --bs-btn-hover-border-color: var(--color-primary);
    --bs-btn-active-bg: var(--color-primary);
    --bs-btn-active-border-color: var(--color-primary);
}

.btn-success {
    --bs-btn-bg: var(--color-success);
    --bs-btn-border-color: var(--color-success);
    --bs-btn-hover-bg: var(--color-success-dark);
    --bs-btn-hover-border-color: var(--color-success-dark);
    --bs-btn-active-bg: var(--color-success-dark);
    --bs-btn-active-border-color: var(--color-success-dark);
}

.btn-outline-success {
    --bs-btn-color: var(--color-success);
    --bs-btn-border-color: var(--color-success);
    --bs-btn-hover-bg: var(--color-success);
    --bs-btn-hover-border-color: var(--color-success);
    --bs-btn-active-bg: var(--color-success);
    --bs-btn-active-border-color: var(--color-success);
}

.btn-danger {
    --bs-btn-bg: var(--color-danger);
    --bs-btn-border-color: var(--color-danger);
    --bs-btn-hover-bg: var(--color-danger-dark);
    --bs-btn-hover-border-color: var(--color-danger-dark);
    --bs-btn-active-bg: var(--color-danger-dark);
    --bs-btn-active-border-color: var(--color-danger-dark);
}

.btn-outline-danger {
    --bs-btn-color: var(--color-danger);
    --bs-btn-border-color: var(--color-danger);
    --bs-btn-hover-bg: var(--color-danger);
    --bs-btn-hover-border-color: var(--color-danger);
    --bs-btn-active-bg: var(--color-danger);
    --bs-btn-active-border-color: var(--color-danger);
}

.btn-warning {
    --bs-btn-bg: var(--color-warning);
    --bs-btn-border-color: var(--color-warning);
    --bs-btn-hover-bg: var(--color-warning-dark);
    --bs-btn-hover-border-color: var(--color-warning-dark);
    --bs-btn-active-bg: var(--color-warning-dark);
    --bs-btn-active-border-color: var(--color-warning-dark);
    --bs-btn-color: #3a2b06;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-color: #fff;
}

.btn-outline-warning {
    --bs-btn-color: var(--color-warning-dark);
    --bs-btn-border-color: var(--color-warning);
    --bs-btn-hover-bg: var(--color-warning);
    --bs-btn-hover-border-color: var(--color-warning);
    --bs-btn-hover-color: #3a2b06;
    --bs-btn-active-bg: var(--color-warning);
    --bs-btn-active-border-color: var(--color-warning);
}

.btn-secondary {
    --bs-btn-bg: var(--color-secondary);
    --bs-btn-border-color: var(--color-secondary);
    --bs-btn-hover-bg: var(--color-secondary-dark);
    --bs-btn-hover-border-color: var(--color-secondary-dark);
}

.btn-outline-secondary {
    --bs-btn-color: var(--color-secondary);
    --bs-btn-border-color: var(--color-secondary);
    --bs-btn-hover-bg: var(--color-secondary);
    --bs-btn-hover-border-color: var(--color-secondary);
    --bs-btn-active-bg: var(--color-secondary);
    --bs-btn-active-border-color: var(--color-secondary);
}

.btn-outline-dark {
    --bs-btn-color: var(--color-navy);
    --bs-btn-border-color: var(--color-navy);
    --bs-btn-hover-bg: var(--color-navy);
    --bs-btn-hover-border-color: var(--color-navy);
    --bs-btn-active-bg: var(--color-navy);
    --bs-btn-active-border-color: var(--color-navy);
}

/* ===== Nhan trang thai (badge) ===== */
.badge.bg-primary {
    background-color: var(--color-primary) !important;
}

.badge.bg-success {
    background-color: var(--color-success) !important;
}

.badge.bg-danger {
    background-color: var(--color-danger) !important;
}

.badge.bg-secondary {
    background-color: var(--color-secondary) !important;
}

.badge.bg-info {
    background-color: var(--color-primary-light) !important;
    color: var(--color-primary-dark) !important;
}

.badge.bg-warning {
    background-color: var(--color-warning-light) !important;
    color: var(--color-warning-dark) !important;
}

/* ===== Canh bao (alert) ===== */
.alert-success {
    background-color: var(--color-success-light);
    color: var(--color-success-dark);
    border-color: #cdeeda;
}

.alert-danger {
    background-color: var(--color-danger-light);
    color: var(--color-danger-dark);
    border-color: #f5d3d8;
}

.alert-warning {
    background-color: var(--color-warning-light);
    color: var(--color-warning-dark);
    border-color: #f3e2bf;
}

.alert-info {
    background-color: var(--color-primary-light);
    color: var(--color-primary-dark);
    border-color: #d6e3f7;
}

/* ===== Form ===== */
.form-control,
.form-select {
    border-radius: var(--radius-sm);
    border-color: var(--color-border);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 .2rem rgba(41, 84, 166, .18);
}

.form-label {
    font-weight: 600;
    color: var(--color-navy);
    font-size: .9rem;
}

/* ===== Bang (table) ===== */
.table {
    color: var(--color-text);
}

.table> :not(caption)>*>* {
    border-bottom-color: var(--color-border);
}

.table thead.table-light,
.table>thead>tr>th.table-light,
thead.table-light>tr>th {
    --bs-table-bg: var(--color-primary-light);
    --bs-table-color: var(--color-navy);
    --bs-table-border-color: #d7e2f4;
    font-weight: 700;
}

.table-hover>tbody>tr:hover>* {
    --bs-table-accent-bg: var(--color-primary-light);
}

.card>.table-responsive:last-child .table,
.card>.table-responsive:last-child {
    border-bottom-left-radius: var(--radius-lg);
    border-bottom-right-radius: var(--radius-lg);
}

/* QUAN TRONG: KHONG duoc dat "overflow: hidden" o rule tren - no se de bi Bootstrap
   ".table-responsive { overflow-x: auto }" (do CSS nay nap SAU bootstrap.min.css nen
   thang khi trung do uu tien), khoa cung viec cuon ngang, lam CAC COT BEN PHAI (vd bang
   luong co toi 20+ cot) bi khuat HAN, khong the cuon toi de xem - day chinh la nguyen
   nhan gay loi "khuat cot" o trang Bang luong / Cham cong. */
.card>.table-responsive:last-child {
    overflow-x: auto;
    overflow-y: hidden;
}

/* Cuon ngang muot hon tren cam ung (iOS Safari, Android Chrome) cho moi bang rong */
.table-responsive {
    -webkit-overflow-scrolling: touch;
}

/* ===== The thong ke tren trang Tong quan ===== */
.stat-card .card-body {
    padding: 1.25rem 1.4rem;
}

.stat-icon {
    width: 54px;
    height: 54px;
    min-width: 54px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
}

.stat-icon-primary {
    background: var(--color-primary-light);
    color: var(--color-primary);
}

.stat-icon-success {
    background: var(--color-success-light);
    color: var(--color-success);
}

.stat-icon-accent {
    background: var(--color-accent-light);
    color: var(--color-accent-dark);
}

.stat-value {
    font-size: 1.9rem;
    font-weight: 800;
    color: var(--color-navy);
    line-height: 1.1;
}

.stat-value-sm {
    font-size: 1.15rem;
}

.stat-label {
    color: var(--color-text-muted);
    font-size: .88rem;
    font-weight: 500;
}

/* ===== Trang dang nhap ===== */
.login-body {
    min-height: 100vh;
    background:
        radial-gradient(circle at 15% 15%, rgba(201, 154, 46, .18), transparent 45%),
        radial-gradient(circle at 85% 85%, rgba(41, 84, 166, .25), transparent 50%),
        var(--color-navy);
}

.login-card {
    border: none;
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.login-card-accent {
    height: 6px;
    background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
}

.login-logo {
    width: 56px;
    height: 56px;
    margin: 0 auto 1rem;
    border-radius: 50%;
    background: var(--color-primary-light);
    color: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
}

/* ===== Bang cham cong dang luoi giong Excel ===== */
.timesheet-table {
    font-size: 0.85rem;
}

.timesheet-table th,
.timesheet-table td {
    text-align: center;
    vertical-align: middle;
    padding: 2px;
}

.timesheet-table td.name-col,
.timesheet-table th.name-col {
    text-align: left;
    min-width: 150px;
    white-space: nowrap;
    /* Cot ten dinh (sticky) khi cuon ngang tren man hinh nho, giup luon thay ten nhan vien */
    position: sticky;
    left: 0;
    z-index: 2;
    background-color: #fff;
}

.timesheet-table thead th.name-col {
    z-index: 3;
    background-color: var(--color-primary-light);
}

/* Cot Chuc vu: gioi han 1 dong, cat bot chu bang dau "..." thay vi xuong dong lam
   bang bi cao qua muc can thiet (di kem thuoc tinh title de xem day du khi ru chuot vao) */
.timesheet-table td.position-col,
.timesheet-table th.position-col {
    text-align: left;
    max-width: 130px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.timesheet-table input.day-input {
    width: 34px;
    height: 28px;
    text-align: center;
    padding: 0;
    border: 1px solid #ccc;
    font-size: 0.85rem;
    border-radius: 4px;
}

/* 5 cot tong hop (Di lam, Nghi luong, Nghi ko luong, So cong PC, Cong tang ca) dong
   deu 1 kich thuoc voi nhau, lay chuan theo cot rong nhat ("Cong tang ca"/"Nghi ko luong") */
.timesheet-table th.summary-col,
.timesheet-table td.summary-col {
    width: 68px;
    min-width: 68px;
}

.day-weekend {
    background-color: #ffcc99 !important;
}

.day-holiday {
    background-color: #ccffff !important;
}

.day-input.val-half {
    background-color: #ffcce5;
}

.day-input.val-unpaid {
    background-color: #ddccff;
}

.day-input.val-paid {
    background-color: #c6efce;
}

.day-input.val-empty {
    background-color: #ffeb9c;
}

.day-input.invalid {
    border: 2px solid red !important;
    background-color: #ffe0e0 !important;
}

/* To sang toan bo dong dang thao tac (bam vao 1 o bat ky trong dong), giup de theo
   doi minh dang sua du lieu cua nhan vien nao khi bang co rat nhieu dong/cot.
   Dung box-shadow inset (KHONG dung background-color) de lop mau nay luon hien ro
   phia tren moi mau nen khac cua o, ke ca cac mau dang dung !important nhu
   Thu7/CN (cam) va Ngay le (xanh nhat) - box-shadow khong bi !important tren
   background-color de nen se khong bao gio bi "mat tich" o cac o dac biet do. */
.timesheet-table tbody tr.row-active td {
    box-shadow: inset 0 0 0 999px rgba(41, 84, 166, 0.16);
}

.timesheet-table tbody tr.row-active td.name-col,
.timesheet-table tbody tr.row-active td.position-col {
    background-color: #d7e4f7 !important;
}

.timesheet-table tbody tr.row-active input.day-input {
    box-shadow: inset 0 0 0 999px rgba(41, 84, 166, 0.22);
    border-color: var(--color-primary);
}

.group-row-I,
.group-row-II {
    background-color: #fff59d !important;
    font-weight: bold;
    color: #b30000;
}

.group-row-A,
.group-row-B {
    background-color: #cfecf7 !important;
    font-weight: bold;
}

.table-payroll th {
    font-size: 0.78rem;
    vertical-align: middle;
}

.table-payroll td {
    font-size: 0.82rem;
    vertical-align: middle;
    white-space: nowrap;
}

.table-payroll input.cell-input {
    width: 100px;
    font-size: 0.8rem;
}

/* Cot "Ho ten" dinh khi cuon ngang bang luong (rat rong tren dien thoai/tablet) */
.table-payroll td:first-child,
.table-payroll th:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    background-color: #fff;
}

.table-payroll thead th:first-child {
    z-index: 3;
    background-color: var(--color-primary-light);
}

/* ===== Responsive: dien thoai / tablet ===== */
@media (max-width: 767.98px) {
    h4 {
        font-size: 1.15rem;
    }

    .card-header {
        font-size: 0.95rem;
    }

    .btn-group {
        flex-wrap: wrap;
    }

    .btn-group>.btn,
    .btn-group>form {
        margin-bottom: 2px;
    }

    .navbar-text {
        display: block;
        margin-bottom: .5rem;
    }

    /* Tren man hinh nho, thu gon phan chu thich va thanh cong cu de danh cho long bang */
    .timesheet-table {
        font-size: 0.78rem;
    }

    .timesheet-table input.day-input {
        width: 28px;
        height: 26px;
        font-size: 0.78rem;
    }

    .timesheet-table td.name-col,
    .timesheet-table th.name-col {
        min-width: 110px;
    }

    .timesheet-table td.position-col,
    .timesheet-table th.position-col {
        max-width: 90px;
    }

    .table-payroll th,
    .table-payroll td {
        font-size: 0.72rem;
    }

    .table-payroll input.cell-input {
        width: 70px;
    }

    /* Cac the thong ke tren Tong quan xep doc, giam khoang cach */
    .stat-value {
        font-size: 1.5rem !important;
    }

    .stat-icon {
        width: 46px;
        height: 46px;
        min-width: 46px;
        font-size: 1.2rem;
    }
}

/* ===== Responsive: man hinh PC lon ===== */
@media (min-width: 1400px) {

    .timesheet-table,
    .table-payroll {
        font-size: 0.95rem;
    }
}