
/* v2.2 — màu thao tác Nhân sự/Chấm công/Lương và lớp hiệu năng cuối cùng. */
:root{--tnp-action-navy:#0e2b4a;--tnp-action-navy-2:#173f68;--tnp-action-gold:#c99a4c;--tnp-action-gold-2:#e3bc70;--tnp-action-ivory:#fffdf9;--tnp-action-green:#18794e;--tnp-action-red:#b42318;--tnp-action-slate:#526273}

/* Nền tĩnh thay cho lớp gradient 200% chạy animation + blur liên tục. */
.icloud-bg{inset:0!important;width:100%!important;height:100%!important;animation:none!important;filter:none!important;transform:none!important;background:linear-gradient(145deg,#fffdf9 0%,#f3eee7 62%,#eadcc5 100%)!important}
.dark-mode .icloud-bg{background:linear-gradient(145deg,#061321 0%,#081a2b 58%,#102942 100%)!important}
#screen-mainapp .app-section{animation:none!important}
#screen-mainapp :is(#screen-employees,#screen-personnel-profile,#screen-insurance,#screen-hr-overview,#screen-hr-alerts,#screen-hr-reports,#screen-attendance,#screen-payroll) :where(.glass-panel,.ep-list-card,.ep-panel,.ep-stat-card,.ops-kpi,.ops-table-wrap,.timepay-formula-card,.attendance-summary-card,.linked-roster-toolbar-v195){box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
#screen-mainapp :is(#screen-employees,#screen-personnel-profile,#screen-insurance,#screen-attendance,#screen-payroll) :where(table>tbody>tr){content-visibility:auto;contain-intrinsic-size:52px;transition:none!important}
#screen-mainapp :is(#screen-employees,#screen-personnel-profile,#screen-insurance,#screen-attendance,#screen-payroll) :where(table,input,select,textarea){scroll-behavior:auto!important}

/* Nút dùng chung: viền rõ, bóng ngắn, phản hồi nhấn dễ nhận biết. */
#screen-mainapp :is(#screen-employees,#screen-personnel-profile,#screen-insurance,#screen-hr-overview,#screen-hr-alerts,#screen-hr-reports,#screen-attendance,#screen-payroll) :is(.ops-button,.employee-tab-v198,.pp-row-button-v216,.ui094-row-button-v2024,.attendance-year-archive-button-v213,.attendance-archive-button-v213,.terminated-attendance-month-button-v215,.terminated-attendance-years-v215 button,.payroll-icon-btn,.ep-list-action,.money-action){
  border:1px solid rgba(14,43,74,.34)!important;background:linear-gradient(180deg,#fffdf9,#f3eee7)!important;color:var(--tnp-action-navy)!important;
  box-shadow:0 2px 0 rgba(7,27,49,.16),0 5px 12px rgba(7,27,49,.08)!important;
  transition:transform .10s ease,background-color .10s ease,border-color .10s ease,box-shadow .10s ease!important;
}
.dark-mode #screen-mainapp :is(#screen-employees,#screen-personnel-profile,#screen-insurance,#screen-hr-overview,#screen-hr-alerts,#screen-hr-reports,#screen-attendance,#screen-payroll) :is(.ops-button,.employee-tab-v198,.pp-row-button-v216,.ui094-row-button-v2024,.attendance-year-archive-button-v213,.attendance-archive-button-v213,.terminated-attendance-month-button-v215,.terminated-attendance-years-v215 button,.payroll-icon-btn,.ep-list-action,.money-action){
  border-color:rgba(227,188,112,.42)!important;background:linear-gradient(180deg,#173f68,#0e2b4a)!important;color:#f7f1e8!important;box-shadow:0 2px 0 #061321,0 5px 12px rgba(0,0,0,.18)!important;
}
#screen-mainapp :is(#screen-employees,#screen-personnel-profile,#screen-insurance,#screen-hr-overview,#screen-hr-alerts,#screen-hr-reports,#screen-attendance,#screen-payroll) :is(button,[role="button"]):not(:disabled):hover{border-color:var(--tnp-action-gold)!important;filter:brightness(1.04)}
#screen-mainapp :is(#screen-employees,#screen-personnel-profile,#screen-insurance,#screen-hr-overview,#screen-hr-alerts,#screen-hr-reports,#screen-attendance,#screen-payroll) :is(button,[role="button"]):not(:disabled):active{transform:translateY(2px) scale(.99)!important;box-shadow:0 1px 0 rgba(7,27,49,.16)!important}
#screen-mainapp :is(#screen-employees,#screen-personnel-profile,#screen-insurance,#screen-hr-overview,#screen-hr-alerts,#screen-hr-reports,#screen-attendance,#screen-payroll) :is(button,input,select,textarea):focus-visible{outline:3px solid rgba(201,154,76,.34)!important;outline-offset:2px!important}

/* Hành động chính luôn navy, icon và chữ tương phản cao. */
#screen-mainapp :is(#screen-employees,#screen-personnel-profile,#screen-insurance,#screen-hr-overview,#screen-hr-alerts,#screen-hr-reports,#screen-attendance,#screen-payroll) .ops-button-primary,
#screen-mainapp :is(#screen-personnel-profile,#screen-insurance) :is(.pp-row-button-v216.save,.ui094-row-button-v2024.save,.ui094-save-v2024){
  background:linear-gradient(135deg,#071b31,#173f68)!important;border-color:#c99a4c!important;color:#fff!important;box-shadow:0 3px 0 #061321,0 7px 16px rgba(7,27,49,.24)!important;
}
#screen-mainapp :is(#screen-employees,#screen-personnel-profile,#screen-insurance,#screen-hr-overview,#screen-hr-alerts,#screen-hr-reports,#screen-attendance,#screen-payroll) .ops-button-primary i{color:#e3bc70!important}
#screen-mainapp :is(#screen-employees,#screen-personnel-profile,#screen-insurance,#screen-hr-alerts,#screen-attendance,#screen-payroll) .ops-button-danger{background:linear-gradient(135deg,#8f1d16,#b42318)!important;border-color:#ef8f87!important;color:#fff!important}

/* Bốn nút đầu màn hình Hợp đồng lao động có màu chức năng riêng. */
#screen-mainapp #add-employee-button{background:linear-gradient(135deg,#071b31,#173f68)!important;border:1px solid #c99a4c!important;color:#fff!important;box-shadow:0 3px 0 #061321,0 7px 16px rgba(7,27,49,.22)!important}
#screen-mainapp #import-excel-button{background:linear-gradient(135deg,#c99a4c,#e3bc70)!important;border:1px solid #9b6d2c!important;color:#071b31!important;box-shadow:0 3px 0 #9b6d2c,0 7px 15px rgba(155,109,44,.20)!important}
#screen-mainapp #export-excel-button{background:linear-gradient(135deg,#12613e,#18794e)!important;border:1px solid #5fc392!important;color:#fff!important;box-shadow:0 3px 0 #0e4c30,0 7px 15px rgba(24,121,78,.20)!important}
#screen-mainapp #check-roster-links-v195{background:linear-gradient(135deg,#3c4b5b,#526273)!important;border:1px solid #9fb0c0!important;color:#fff!important;box-shadow:0 3px 0 #273542,0 7px 15px rgba(39,53,66,.18)!important}

/* Tab nhân sự: trạng thái chưa chọn/chọn khác nhau rõ rệt ở cả sáng và tối. */
#screen-mainapp #employee-tabs-v198{padding:4px!important;border:1px solid rgba(14,43,74,.20)!important;background:rgba(14,43,74,.06)!important;border-radius:13px!important}
.dark-mode #screen-mainapp #employee-tabs-v198{border-color:rgba(227,188,112,.22)!important;background:rgba(227,188,112,.06)!important}
#screen-mainapp #employee-tabs-v198 .employee-tab-v198{min-height:38px!important;background:#fffdf9!important;border-color:rgba(14,43,74,.22)!important;color:#173f68!important;box-shadow:none!important}
.dark-mode #screen-mainapp #employee-tabs-v198 .employee-tab-v198{background:#102942!important;border-color:rgba(227,188,112,.28)!important;color:#f7f1e8!important}
#screen-mainapp #employee-tabs-v198 .employee-tab-v198.active{background:linear-gradient(135deg,#071b31,#173f68)!important;border-color:#c99a4c!important;color:#fff!important;box-shadow:inset 0 0 0 1px rgba(227,188,112,.24),0 4px 11px rgba(7,27,49,.20)!important}
#screen-mainapp #employee-tabs-v198 .employee-tab-v198.active i{color:#e3bc70!important}
#screen-mainapp #employee-tabs-v198 .employee-tab-v198 .count{background:rgba(14,43,74,.10)!important;color:#173f68!important}
#screen-mainapp #employee-tabs-v198 .employee-tab-v198.active .count{background:#c99a4c!important;color:#071b31!important}

/* Thanh công cụ Chấm công: nhập vàng, mẫu xanh thép, xuất xanh lá, in xám, lưu navy. */
#screen-mainapp #attendance-import-excel-button,#screen-mainapp #payroll-import-excel-button{background:linear-gradient(135deg,#c99a4c,#e3bc70)!important;border-color:#9b6d2c!important;color:#071b31!important}
#screen-mainapp #attendance-import-excel-button i,#screen-mainapp #payroll-import-excel-button i{color:#071b31!important}
#screen-mainapp #attendance-header button[onclick*="downloadAttendanceDailyTemplate"]{background:linear-gradient(135deg,#315f86,#477ca6)!important;border-color:#85accb!important;color:#fff!important}
#screen-mainapp #attendance-header button[onclick*="exportAttendanceExcel"],#screen-mainapp #payroll-header button[onclick*="exportPayrollExcel"]{background:linear-gradient(135deg,#12613e,#18794e)!important;border-color:#5fc392!important;color:#fff!important}
#screen-mainapp #attendance-header button[onclick*="printAttendanceReport"],#screen-mainapp #payroll-print-button{background:linear-gradient(135deg,#3c4b5b,#526273)!important;border-color:#9fb0c0!important;color:#fff!important}
#screen-mainapp #payroll-export-pdf-button{background:linear-gradient(135deg,#8f1d16,#b42318)!important;border-color:#ef8f87!important;color:#fff!important}
#screen-mainapp #attendance-header button[onclick*="saveAllAttendance"],#screen-mainapp #payroll-header button[onclick*="generatePayroll"]{background:linear-gradient(135deg,#071b31,#173f68)!important;border-color:#c99a4c!important;color:#fff!important}
#screen-mainapp #attendance-table .ops-button{background:linear-gradient(135deg,#12613e,#18794e)!important;border-color:#5fc392!important;color:#fff!important}
#screen-mainapp #payroll-table .ops-button{background:linear-gradient(135deg,#071b31,#173f68)!important;border-color:#c99a4c!important;color:#fff!important}
#screen-mainapp #payroll-table .payroll-icon-btn{background:linear-gradient(135deg,#c99a4c,#e3bc70)!important;border-color:#9b6d2c!important;color:#071b31!important}
#screen-mainapp #payroll-table .payroll-icon-btn i{color:#071b31!important}

/* Nút thao tác theo dòng trong Nhân sự/BHXH. */
#screen-mainapp #screen-employees .ep-list-action:not(.delete),#screen-mainapp #screen-employees .money-action{background:linear-gradient(135deg,#c99a4c,#e3bc70)!important;border-color:#9b6d2c!important;color:#071b31!important}
#screen-mainapp #screen-employees .ep-list-action.delete{background:linear-gradient(135deg,#8f1d16,#b42318)!important;border-color:#ef8f87!important;color:#fff!important}
#screen-mainapp :is(#screen-personnel-profile,#screen-insurance) :is(.pp-row-button-v216.save,.ui094-row-button-v2024.save,.ui094-save-v2024).pending{box-shadow:0 0 0 3px rgba(201,154,76,.24),0 7px 16px rgba(7,27,49,.20)!important}

/* Tab sidebar của hai nhóm nghiệp vụ. */
#screen-mainapp #navigation-panel .ep-secondary-item{border:1px solid transparent!important}
#screen-mainapp #navigation-panel .ep-secondary-item.is-active{background:linear-gradient(90deg,rgba(14,43,74,.16),rgba(201,154,76,.14))!important;border-color:rgba(201,154,76,.34)!important;color:#0e2b4a!important;box-shadow:inset 4px 0 0 #c99a4c!important}
.dark-mode #screen-mainapp #navigation-panel .ep-secondary-item.is-active{background:linear-gradient(90deg,rgba(227,188,112,.18),rgba(14,43,74,.22))!important;color:#f0d39c!important}
#screen-mainapp #navigation-panel .ep-secondary-item.is-active .ep-secondary-icon{background:linear-gradient(135deg,#c99a4c,#e3bc70)!important;color:#071b31!important}

@media(min-width:901px){
  body,body.ep-sidebar-collapsed{--ep-shell-left:var(--ep-primary-w)!important}
  .ep-primary-sidebar{transform:none!important;transition:none!important;contain:layout paint style!important}
  .ep-secondary-sidebar{left:var(--ep-primary-w)!important;transform:translate3d(0,0,0);transition:transform .13s cubic-bezier(.2,.8,.2,1)!important;will-change:auto!important;contain:layout paint style!important;backface-visibility:hidden!important}
  body.ep-sidebar-collapsed .ep-secondary-sidebar{transform:translate3d(-100%,0,0)!important}
  .ep-topbar{left:var(--ep-primary-w)!important;transition:none!important}.ep-main-content{margin-left:var(--ep-primary-w)!important;transition:none!important}
}
@media(prefers-reduced-motion:reduce){#screen-mainapp *,#screen-mainapp *:before,#screen-mainapp *:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
