
/* v2.3 — một hệ màu toàn ứng dụng và chế độ dựng hình nhẹ nhất. */
:root{
  --tnp23-navy:#0e2b4a;--tnp23-navy-2:#173f68;--tnp23-navy-3:#24577f;
  --tnp23-gold:#c99a4c;--tnp23-gold-2:#e3bc70;--tnp23-ivory:#fffdf9;
  --tnp23-canvas:#f4efe7;--tnp23-panel:#fffdf9;--tnp23-line:#d7c4a3;
  --tnp23-text:#10263d;--tnp23-muted:#657487;--tnp23-green:#18794e;
  --tnp23-red:#b42318;--tnp23-slate:#526273;--tnp23-blue:#315f86;
}
.dark-mode{
  --tnp23-canvas:#071522;--tnp23-panel:#0d2236;--tnp23-line:#715d3d;
  --tnp23-text:#f7f1e8;--tnp23-muted:#b8c1cc;
}

/* Loại bỏ các lớp GPU nặng; chỉ giữ chuyển động có ý nghĩa. */
#screen-mainapp,#screen-mainapp .app-section{background-color:var(--tnp23-canvas)}
#screen-mainapp *:not(.fa-spin),#screen-mainapp *:before,#screen-mainapp *:after{
  animation:none!important;transition:none!important;scroll-behavior:auto!important;
}
#screen-mainapp :where(.ep-primary-sidebar,.ep-secondary-sidebar,.ep-topbar,.modal-backdrop,.modal-card,.glass-panel,.account-card,.permission-account-card-v31,.ops-kpi,.ops-table-wrap,.backup-card,.ep-panel,.ep-list-card,.ep-stat-card,.ep-search-suggestions-v202,.ep-column-filter-menu-v203,.ep-history-overlay-v2021,.linked-roster-toolbar-v195,.timepay-formula-card,.attendance-summary-card,.archive-card-v198,.excel-center-card-v198){
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
}
#screen-mainapp :where(.glass-panel,.account-card,.permission-account-card-v31,.ops-kpi,.ops-table-wrap,.backup-card,.ep-panel,.ep-list-card,.ep-stat-card,.linked-roster-toolbar-v195,.timepay-formula-card,.attendance-summary-card,.archive-card-v198,.excel-center-card-v198){
  box-shadow:none!important;background-color:var(--tnp23-panel)!important;border-color:var(--tnp23-line)!important;color:var(--tnp23-text)!important;
}
#screen-mainapp .app-section:not(.active){content-visibility:hidden!important;contain:strict!important}
#screen-mainapp .app-section.active{content-visibility:visible;contain:layout style!important}
#screen-mainapp :where(table tbody tr){content-visibility:auto;contain:layout style;contain-intrinsic-size:auto 50px}
#ui-marker-layer:empty,body:not(.show-ui-id) #ui-marker-layer{display:none!important}

/* Sidebar mở/đóng tức thì, không làm dịch chuyển toàn bộ trang. */
@media(min-width:901px){
  .ep-primary-sidebar,.ep-secondary-sidebar,.ep-topbar,.ep-main-content{transition:none!important;will-change:auto!important}
  .ep-primary-sidebar,.ep-secondary-sidebar{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;box-shadow:none!important}
  .ep-secondary-sidebar{transform:translate3d(0,0,0)!important;contain:layout paint style!important}
  body.ep-sidebar-collapsed .ep-secondary-sidebar{transform:translate3d(-100%,0,0)!important}
}

/* Nền, chữ, form và bảng dùng chung trên mọi phân hệ. */
#screen-mainapp .app-section{color:var(--tnp23-text)!important}
#screen-mainapp .app-section :where(input:not([type="checkbox"]):not([type="radio"]),select,textarea){
  background:var(--tnp23-panel)!important;color:var(--tnp23-text)!important;
  border:1px solid var(--tnp23-line)!important;box-shadow:none!important;
}
#screen-mainapp .app-section :where(input,select,textarea):focus-visible{
  outline:3px solid rgba(201,154,76,.32)!important;outline-offset:1px!important;border-color:var(--tnp23-gold)!important;
}
#screen-mainapp .app-section :where(table){background:var(--tnp23-panel)!important;color:var(--tnp23-text)!important}
#screen-mainapp .app-section :where(table thead th){background:var(--tnp23-navy)!important;color:#fff!important;border-color:#48647d!important}
.dark-mode #screen-mainapp .app-section :where(table thead th){background:#173f68!important;color:#fff8eb!important;border-color:#715d3d!important}
#screen-mainapp .app-section :where(table tbody tr:nth-child(even)){background:rgba(14,43,74,.035)!important}
.dark-mode #screen-mainapp .app-section :where(table tbody tr:nth-child(even)){background:rgba(227,188,112,.045)!important}
#screen-mainapp .app-section :where(table tbody tr:hover){background:rgba(201,154,76,.10)!important}

/* Chuẩn nút toàn ứng dụng: mặc định rõ nét, màu chức năng nhất quán. */
#screen-mainapp :where(.app-section,.modal-backdrop) button:not(:disabled),
#screen-mainapp :where(.ops-button,.ui-recovery-button,.ep-action-button,.payroll-icon-btn,.ep-list-action,.money-action){
  background:var(--tnp23-ivory)!important;color:var(--tnp23-navy)!important;
  border:1px solid var(--tnp23-navy-2)!important;box-shadow:0 2px 0 rgba(14,43,74,.24)!important;font-weight:850!important;
}
.dark-mode #screen-mainapp :where(.app-section,.modal-backdrop) button:not(:disabled),
.dark-mode #screen-mainapp :where(.ops-button,.ui-recovery-button,.ep-action-button,.payroll-icon-btn,.ep-list-action,.money-action){
  background:var(--tnp23-navy-2)!important;color:#fff8eb!important;border-color:var(--tnp23-gold)!important;box-shadow:0 2px 0 #061321!important;
}
#screen-mainapp :where(.app-section,.modal-backdrop) button:not(:disabled):active{transform:translateY(1px)!important;box-shadow:none!important}
#screen-mainapp :where(.app-section,.modal-backdrop) button:focus-visible{outline:3px solid rgba(201,154,76,.38)!important;outline-offset:2px!important}

/* Xanh navy: hành động chính/tính toán/kết nối. */
#screen-mainapp :where(.ops-button-primary,.ui-recovery-primary,#add-employee-button,button[onclick*="generatePayroll"],button[onclick*="saveAllAttendance"],button[onclick*="connect" i]){
  background:var(--tnp23-navy)!important;color:#fff!important;border-color:var(--tnp23-gold)!important;box-shadow:0 2px 0 #061321!important;
}
/* Vàng: nhập dữ liệu, tạo mới và chỉnh sửa. */
#screen-mainapp :where(#import-excel-button,#attendance-import-excel-button,#payroll-import-excel-button,button[onclick*="import" i],button[onclick*="create" i],button[onclick*="edit" i],.payroll-icon-btn){
  background:var(--tnp23-gold)!important;color:#071b31!important;border-color:#8d6228!important;box-shadow:0 2px 0 #8d6228!important;
}
/* Xanh lá: lưu và xuất Excel/dữ liệu. */
#screen-mainapp :where(#export-excel-button,button[onclick*="export" i],button[onclick*="save" i],.pp-row-button-v216.save,.ui094-row-button-v2024.save,.ui094-save-v2024){
  background:var(--tnp23-green)!important;color:#fff!important;border-color:#75cda3!important;box-shadow:0 2px 0 #0d5032!important;
}
/* Đỏ: xóa, từ chối, đặt lại nguy hiểm và PDF. */
#screen-mainapp :where(.ops-button-danger,.delete,#payroll-export-pdf-button,button[onclick*="delete" i],button[onclick*="clearAudit" i],button[onclick*="reject" i]){
  background:var(--tnp23-red)!important;color:#fff!important;border-color:#ef8f87!important;box-shadow:0 2px 0 #77150f!important;
}
/* Xám: in, hủy và thao tác phụ. */
#screen-mainapp :where(button[onclick*="print" i],button[onclick*="cancel" i]){
  background:var(--tnp23-slate)!important;color:#fff!important;border-color:#aeb9c3!important;box-shadow:0 2px 0 #344250!important;
}

/* Tab toàn hệ thống. */
#screen-mainapp :where([role="tab"],.employee-tab-v198,.ep-account-tab-v31,.ep-history-tab-v2021){
  background:var(--tnp23-panel)!important;color:var(--tnp23-navy-2)!important;border:1px solid var(--tnp23-line)!important;box-shadow:none!important;
}
#screen-mainapp :where([role="tab"].active,.employee-tab-v198.active,.ep-account-tab-v31.active,.ep-history-tab-v2021.active,[aria-selected="true"]){
  background:var(--tnp23-navy)!important;color:#fff!important;border-color:var(--tnp23-gold)!important;box-shadow:inset 0 -3px 0 var(--tnp23-gold)!important;
}
#screen-mainapp .ep-primary-sidebar{background:var(--tnp23-navy)!important;border-color:#274964!important}
#screen-mainapp .ep-primary-item.active{background:var(--tnp23-gold)!important;color:#071b31!important;box-shadow:none!important}
#screen-mainapp .ep-secondary-sidebar,#screen-mainapp .ep-topbar{background:var(--tnp23-panel)!important;border-color:var(--tnp23-line)!important}
#screen-mainapp .ep-secondary-item.is-active{background:rgba(201,154,76,.15)!important;color:var(--tnp23-navy)!important;border-color:var(--tnp23-gold)!important;box-shadow:inset 4px 0 0 var(--tnp23-gold)!important}
.dark-mode #screen-mainapp .ep-secondary-item.is-active{color:#f0d39c!important}

/* Đăng nhập và cổng dữ liệu cùng bảng màu, không dùng blur toàn màn hình. */
#screen-auth *:not(.fa-spin),#ep-data-gate-v27 *:not(.fa-spin){animation:none!important;transition:none!important}
#screen-auth :where(.glass-panel,.auth-card-v33,.auth-brand-panel-v33),#ep-data-gate-v27,.ep-gate-card-v27{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
#screen-auth :where(input,select,textarea){background:var(--tnp23-panel)!important;color:var(--tnp23-text)!important;border-color:var(--tnp23-line)!important;box-shadow:none!important}
#screen-auth :where(button:not(:disabled)){background:var(--tnp23-navy)!important;color:#fff!important;border:1px solid var(--tnp23-gold)!important;box-shadow:0 2px 0 #061321!important}
#screen-auth :where(button:not(:disabled)):focus-visible{outline:3px solid rgba(201,154,76,.38)!important;outline-offset:2px!important}
#screen-auth .auth-brand-panel-v33{background:var(--tnp23-navy)!important;color:#fff8eb!important;border-color:var(--tnp23-gold)!important}
.ep-gate-card-v27{background:var(--tnp23-panel)!important;color:var(--tnp23-text)!important;border-color:var(--tnp23-gold)!important;box-shadow:none!important}

@media(prefers-reduced-motion:reduce){#screen-mainapp *,#screen-mainapp *:before,#screen-mainapp *:after{animation:none!important;transition:none!important}}
