/* ALPHA DESIGN ERP Cloud v4.8.0 — Global Scope Analytics & UI Refinement
   - shared Design / Construction analytics scope
   - corporate-only chart disclosure
   - header sync-status redesign
   - task table column profile
   - executive heading placement refinement
*/

/* ---------- Analytics scope controls ---------- */
.chart-heading-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:9px;
  flex-wrap:wrap;
  margin-left:auto;
}
.chart-heading-actions--compact{gap:6px}

/* ---------- GD-LAYOUT-01: hành động trên tiêu đề thẻ bảng phải nằm TRÊN MỘT DÒNG ----------
 * .section-header-actions (public/app.js, 4 thẻ của màn Hợp đồng & Công nợ) trước đây KHÔNG có
 * quy tắc nào, nên nó là một khối thường. Ô lọc trạng thái bên trong bị searchable-select nâng
 * thành .searchable-combobox — mà quy tắc gốc của combobox là display:block;width:100%
 * (alpha-design-system.css:3600) — nên ô lọc chiếm trọn một dòng và đẩy nút "+ ..." xuống dòng
 * dưới. Đo trên Chrome 1440px: thẻ "Hồ sơ nghiệm thu" cao thêm ~44px chỉ vì việc xuống dòng này.
 * Dùng đúng khuôn của .chart-heading-actions ngay trên để hai chỗ không lệch nhau về sau.
 */
.section-header-actions{display:flex;align-items:center;justify-content:flex-end;gap:9px;flex-wrap:wrap;margin-left:auto}
.section-header-actions>.inline-filter{display:inline-flex;align-items:center;min-width:0;margin:0}
.section-header-actions .searchable-combobox{width:auto;min-width:186px;max-width:260px}
.section-header-actions .filter-select,.section-header-actions select{min-width:0}
@media(max-width:900px){
  .section-header-actions{width:100%;justify-content:flex-start;margin-left:0}
  .section-header-actions .searchable-combobox{flex:1 1 186px;max-width:none}
}

.chart-scope-badge{
  display:inline-flex;
  align-items:center;
  min-height:28px;
  padding:5px 9px;
  border:1px solid #d0dfe7;
  border-radius:9px;
  background:#f3f9fc;
  color:#1c5b7d;
  font-size:9.5px;
  font-weight:780;
  white-space:nowrap;
}
.chart-scope-badge.is-corporate{
  border-color:#dce3ea;
  background:#f7f9fb;
  color:#5a6877;
}
.chart-card>.section-header,
.chart-card .section-header.dashboard-chart-heading{
  min-width:0;
}
.chart-card>.section-header>div:first-child,
.chart-card .section-header.dashboard-chart-heading>div:first-child{
  min-width:0;
}
.dashboard-scope-warning{
  margin:0 0 9px;
  padding:7px 10px;
  border:1px solid #efd8a7;
  border-radius:9px;
  background:#fffaf0;
  color:#7a5a16;
  font-size:10px;
  line-height:1.4;
}

/* User requested ACTUAL PERFORMANCE caption below the KPI cards. */
.executive-section-heading--after-kpis{
  margin-top:8px!important;
  margin-bottom:10px!important;
  padding:0 2px;
}

/* ---------- Sync status: clear cloud + small state indicator ---------- */
.sync-pill{
  min-width:104px;
  border-radius:10px!important;
  gap:7px!important;
}
.sync-status-icon{
  position:relative;
  display:inline-grid;
  place-items:center;
  width:24px;
  height:24px;
  flex:0 0 24px;
}
.sync-status-icon svg{
  width:20px!important;
  height:20px!important;
  fill:none!important;
  stroke:currentColor!important;
  stroke-width:1.65!important;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.sync-state-dot{
  position:absolute;
  right:0;
  bottom:1px;
  width:7px;
  height:7px;
  border:2px solid var(--surface,#fff);
  border-radius:50%;
  background:#94a3b8;
  box-sizing:content-box;
}
.sync-pill:not(.sync-error):not(.sync-offline):not(.sync-pending):not(.synching) .sync-state-dot{background:#16a36a}
.sync-pill.synching .sync-state-dot{background:#1688da;animation:alphaSyncDotPulse 1s ease-in-out infinite}
.sync-pill.sync-pending .sync-state-dot{background:#d99000}
.sync-pill.sync-error .sync-state-dot{background:#dc3f49}
.sync-pill.sync-offline .sync-state-dot{background:#8492a5}
@keyframes alphaSyncDotPulse{50%{transform:scale(.7);opacity:.55}}

/* ---------- Task table profile ---------- */
.table-tasks th:nth-child(2),.table-tasks td:nth-child(2){white-space:normal;overflow-wrap:anywhere}
.table-tasks th:nth-child(4),.table-tasks td:nth-child(4),
.table-tasks th:nth-child(6),.table-tasks td:nth-child(6),
.table-tasks th:nth-child(7),.table-tasks td:nth-child(7),
.table-tasks th:nth-child(8),.table-tasks td:nth-child(8){white-space:nowrap}
.table-tasks td:nth-child(2){line-height:1.35}

/* ---------- Tablet / phone ---------- */
@media(max-width:1024px){
  .chart-heading-actions{width:100%;justify-content:flex-start;margin-left:0}
  .chart-card>.section-header{align-items:flex-start;flex-wrap:wrap}
  .chart-scope-badge{align-self:flex-start}
  .table-tasks{min-width:1120px!important}
}
@media(max-width:820px){
  .sync-pill{min-width:40px!important;width:40px!important;padding:0!important;justify-content:center!important}
  .sync-pill>span#syncText{display:none!important}
  .sync-status-icon{width:24px;height:24px}
  .dashboard-scope-switch{max-width:100%;overflow-x:auto;scrollbar-width:none}
  .dashboard-scope-switch::-webkit-scrollbar{display:none}
  .executive-section-heading--after-kpis{margin-top:5px!important}
}
@media(max-width:520px){
  .chart-heading-actions{gap:6px}
  .chart-heading-actions .dashboard-scope-switch{width:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
  .chart-heading-actions .dashboard-scope-switch button{min-width:0;padding-inline:6px}
  .chart-scope-badge{font-size:9px}
}

html[data-theme="dark"] .chart-scope-badge{background:#122733;border-color:#334e5c;color:#93c5e0}
html[data-theme="dark"] .chart-scope-badge.is-corporate{background:#13242e;border-color:#334954;color:#afbec6}
html[data-theme="dark"] .dashboard-scope-warning{background:#342b17;border-color:#675628;color:#efd58f}
html[data-theme="dark"] .sync-state-dot{border-color:#11232d}

/* v4.8.14 — smooth mode transitions, compact tax composition and payroll delivery */
.alpha-chart-periods .alpha-chart-period-action{
  min-height:28px!important;
  padding:5px 9px!important;
  border:1px solid #d0dfe7!important;
  border-radius:8px!important;
  background:#f3f9fc!important;
  color:#1c5b7d!important;
  font-weight:780!important;
  white-space:nowrap;
}
.alpha-chart-periods .alpha-chart-period-action:hover{background:#e8f3f9!important;color:#134f70!important}
#content.alpha-soft-updating{opacity:.94;transition:opacity .12s ease}
::view-transition-old(root),::view-transition-new(root){animation-duration:.16s;animation-timing-function:cubic-bezier(.2,.7,.2,1)}
::view-transition-old(root){animation-name:alphaFadeOut}
::view-transition-new(root){animation-name:alphaFadeIn}
@keyframes alphaFadeOut{to{opacity:.94}}
@keyframes alphaFadeIn{from{opacity:.94}}
@media(prefers-reduced-motion:reduce){::view-transition-old(root),::view-transition-new(root){animation:none!important}#content.alpha-soft-updating{transition:none!important}}

.tax-analysis-grid{gap:12px!important}
.tax-structure-card{min-height:0!important}
.tax-composition{display:grid;grid-template-columns:minmax(190px,.72fr) minmax(0,1.65fr);gap:20px;align-items:center;padding:8px 2px 4px}
.tax-composition-total{display:grid;gap:6px;padding:18px;border:1px solid #dce8ee;border-radius:14px;background:linear-gradient(145deg,#f7fbfd,#fff)}
.tax-composition-total span{font-size:10px;font-weight:760;color:var(--muted,#64748b);text-transform:uppercase;letter-spacing:.06em}
.tax-composition-total strong{font-size:28px;line-height:1;color:var(--text,#0f2742);font-variant-numeric:tabular-nums}
.tax-composition-total small{font-size:9.5px;line-height:1.45;color:var(--muted,#64748b)}
.tax-composition-bars{display:grid;gap:11px}
.tax-composition-row{display:grid;grid-template-columns:minmax(0,1fr) 52px;column-gap:10px;row-gap:5px;align-items:center}
.tax-composition-label{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:12px;min-width:0;font-size:10px}
.tax-composition-label>span{display:flex;align-items:center;gap:7px;min-width:0;color:var(--text,#0f2742);font-weight:680}
.tax-composition-label>span i{width:8px;height:8px;border-radius:3px;flex:none}
.tax-composition-label strong{font-variant-numeric:tabular-nums;white-space:nowrap}
.tax-composition-track{height:8px;border-radius:999px;background:#edf3f6;overflow:hidden}
.tax-composition-track i{display:block;height:100%;border-radius:inherit;min-width:2px;transition:width .24s cubic-bezier(.2,.7,.2,1)}
.tax-composition-row>small{text-align:right;font-size:9px;font-weight:700;color:var(--muted,#64748b)}
.tax-calendar-card .tax-calendar-list{margin-bottom:0!important}
.accounting-payslip-card .table-tools{align-items:center}
.accounting-payslip-card .filter-control--select{min-width:220px}
.accounting-payslip-table td.actions{white-space:nowrap}
html[data-theme="dark"] .tax-composition-total{background:#12252f;border-color:#2b4451}
html[data-theme="dark"] .tax-composition-track{background:#1b303b}
@media(max-width:820px){.tax-composition{grid-template-columns:1fr;gap:12px}.tax-composition-total{padding:14px}.tax-composition-total strong{font-size:23px}.alpha-chart-periods .alpha-chart-period-action{order:-1;flex:1 1 100%}}

/* Phase 18 — HR / Timesheet delivery-scope alignment */
.hr-scope-toolbar{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:16px 18px;border:1px solid var(--border);border-radius:18px;background:var(--surface);
  box-shadow:var(--shadow-sm,0 8px 24px rgba(15,23,42,.04));
}
.hr-scope-toolbar h2{margin:3px 0 4px;font-size:17px;line-height:1.25}
.hr-scope-toolbar p{margin:0;max-width:900px;color:var(--text-muted);font-size:12px;line-height:1.55}
.hr-delivery-scope-switch{flex:0 0 auto}
.hr-scope-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.hr-scope-metrics>div{display:grid;grid-template-columns:1fr auto;align-items:center;gap:3px 12px;padding:12px 14px;border:1px solid var(--border);border-radius:14px;background:var(--surface)}
.hr-scope-metrics span{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.045em;color:var(--text-muted)}
.hr-scope-metrics strong{grid-row:1/3;grid-column:2;font-size:20px}
.hr-scope-metrics small{font-size:11px;color:var(--text-muted)}
.hr-scope-badges{display:flex;justify-content:center;align-items:center;gap:5px;flex-wrap:wrap}
.table-timesheet-delivery th:nth-child(1){width:9%}.table-timesheet-delivery th:nth-child(2){width:14%}.table-timesheet-delivery th:nth-child(3){width:16%}.table-timesheet-delivery th:nth-child(4){width:9%}.table-timesheet-delivery th:nth-child(5){width:20%}.table-timesheet-delivery th:nth-child(6){width:7%}.table-timesheet-delivery th:nth-child(7){width:8%}.table-timesheet-delivery th:nth-child(8){width:8%}.table-timesheet-delivery th:nth-child(9){width:9%}
.table-people-directory th:nth-child(1){width:15%}.table-people-directory th:nth-child(2){width:11%}.table-people-directory th:nth-child(3){width:10%}.table-people-directory th:nth-child(4){width:10%}.table-people-directory th:nth-child(5){width:7%}.table-people-directory th:nth-child(9){width:7%}.table-people-directory th:nth-child(10){width:8%}.table-people-directory th:nth-child(11){width:9%}
@media(max-width:900px){.hr-scope-toolbar{align-items:flex-start;flex-direction:column}.hr-delivery-scope-switch{width:100%;display:grid;grid-template-columns:repeat(3,1fr)}.hr-scope-metrics{grid-template-columns:1fr}.table-timesheet-delivery,.table-people-directory{min-width:1120px!important}}


/* v4.8.14 — scoped chart micro-transition hardening
   Scope filters must not cross-fade the whole ERP shell. Only the chart cards whose
   data actually changes participate in the View Transition snapshot. */
html.alpha-scope-transition-running::view-transition-old(root),
html.alpha-scope-transition-running::view-transition-new(root){
  animation:none!important;
  mix-blend-mode:normal!important;
}
::view-transition-group(alpha-scope-1),
::view-transition-group(alpha-scope-2),
::view-transition-group(alpha-scope-3),
::view-transition-group(alpha-scope-4),
::view-transition-group(alpha-scope-5),
::view-transition-group(alpha-scope-6),
::view-transition-group(alpha-scope-7),
::view-transition-group(alpha-scope-8){
  animation-duration:240ms;
  animation-timing-function:cubic-bezier(.22,.61,.36,1);
}
::view-transition-old(alpha-scope-1),
::view-transition-old(alpha-scope-2),
::view-transition-old(alpha-scope-3),
::view-transition-old(alpha-scope-4),
::view-transition-old(alpha-scope-5),
::view-transition-old(alpha-scope-6),
::view-transition-old(alpha-scope-7),
::view-transition-old(alpha-scope-8){
  animation:alphaScopeSurfaceOut 130ms cubic-bezier(.4,0,.2,1) both;
  mix-blend-mode:normal;
}
::view-transition-new(alpha-scope-1),
::view-transition-new(alpha-scope-2),
::view-transition-new(alpha-scope-3),
::view-transition-new(alpha-scope-4),
::view-transition-new(alpha-scope-5),
::view-transition-new(alpha-scope-6),
::view-transition-new(alpha-scope-7),
::view-transition-new(alpha-scope-8){
  animation:alphaScopeSurfaceIn 220ms cubic-bezier(.22,.61,.36,1) both;
  mix-blend-mode:normal;
}
@keyframes alphaScopeSurfaceOut{
  from{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}
  to{opacity:.18;transform:translateY(-1px) scale(.998);filter:blur(.35px)}
}
@keyframes alphaScopeSurfaceIn{
  from{opacity:.18;transform:translateY(2px) scale(.998);filter:blur(.35px)}
  to{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}
}
.alpha-scope-surface-exiting{
  opacity:.90;
  transform:scale(.999);
  transition:opacity 70ms ease-out,transform 70ms ease-out;
}
.alpha-scope-surface-entering{
  animation:alphaScopeDomFallbackIn 220ms cubic-bezier(.22,.61,.36,1) both;
}
@keyframes alphaScopeDomFallbackIn{
  from{opacity:.90;transform:translateY(2px) scale(.999)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
html.alpha-scope-transition-running .dashboard-scope-switch button{
  pointer-events:auto;
}
@media(prefers-reduced-motion:reduce){
  html.alpha-scope-transition-running::view-transition-old(root),
  html.alpha-scope-transition-running::view-transition-new(root),
  ::view-transition-old(alpha-scope-1),::view-transition-new(alpha-scope-1),
  ::view-transition-old(alpha-scope-2),::view-transition-new(alpha-scope-2),
  ::view-transition-old(alpha-scope-3),::view-transition-new(alpha-scope-3),
  ::view-transition-old(alpha-scope-4),::view-transition-new(alpha-scope-4),
  ::view-transition-old(alpha-scope-5),::view-transition-new(alpha-scope-5),
  ::view-transition-old(alpha-scope-6),::view-transition-new(alpha-scope-6),
  ::view-transition-old(alpha-scope-7),::view-transition-new(alpha-scope-7),
  ::view-transition-old(alpha-scope-8),::view-transition-new(alpha-scope-8),
  .alpha-scope-surface-exiting,.alpha-scope-surface-entering{
    animation:none!important;
    transition:none!important;
    transform:none!important;
    filter:none!important;
  }
}


/* v4.8.14 — Scope control placement integrity
   Giữ selector Design/Construction ở vị trí ổn định và ghép với bộ chọn kỳ biểu đồ. */
.delivery-scope-toolbar{
  display:flex;
  align-items:center;
  width:100%;
  margin-top:10px;
  margin-bottom:2px;
}
.delivery-scope-toolbar--right{justify-content:flex-end}
.delivery-scope-toolbar--left{justify-content:flex-start}
.delivery-scope-toolbar .dashboard-scope-switch{margin-left:0}
.operations-controls-scope{padding-inline:2px}
.documents-intro-scope{margin-top:12px;margin-bottom:0}
.commercial-scope-toolbar{margin-top:8px;margin-bottom:0;padding-inline:2px}

.alpha-chart-header-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:6px;
  flex-wrap:wrap;
  margin-left:auto;
  min-width:0;
}
.alpha-chart-header-actions>.dashboard-scope-switch,
.alpha-chart-header-actions>.chart-scope-badge,
.alpha-chart-header-actions>.alpha-chart-periods{margin-left:0!important}
.alpha-chart-header-actions>.alpha-chart-periods{width:auto!important;margin-top:0!important}
.alpha-chart-header-actions>.chart-scope-badge{align-self:center}

@media(max-width:1024px){
  .alpha-chart-header-actions{width:100%;justify-content:flex-start;margin-left:0}
  .delivery-scope-toolbar--right{justify-content:flex-start}
}
@media(max-width:520px){
  .delivery-scope-toolbar .dashboard-scope-switch{width:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
  .alpha-chart-header-actions{display:grid;grid-template-columns:1fr;width:100%}
  .alpha-chart-header-actions>.dashboard-scope-switch{width:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
  .alpha-chart-header-actions>.alpha-chart-periods{width:100%!important}
}


/* v4.8.14 — Inline scope-toolbar alignment hotfix
   Hợp đồng: selector nằm cùng hàng với cảnh báo dữ liệu.
   Kiểm soát vận hành: selector nằm cùng hàng với các tab lớp dữ liệu. */
.commercial-alert-scope-row{
  display:flex;
  align-items:center;
  gap:12px;
  width:100%;
  min-width:0;
}
.commercial-alert-scope-row .business-alert-note{
  flex:1 1 auto;
  min-width:0;
  margin:0;
}
.commercial-alert-scope-row .commercial-alert-placeholder{
  flex:1 1 auto;
  min-width:0;
}
.commercial-alert-scope-row>.dashboard-scope-switch{
  flex:0 0 auto;
  margin-left:auto;
}
.control-tabs-scope-row{
  display:flex;
  align-items:center;
  gap:12px;
  width:100%;
  min-width:0;
}
.control-tabs-scope-row .control-tabs-inline{
  flex:0 1 auto;
  width:auto;
  min-width:0;
  margin:0;
}
.control-tabs-scope-row>.dashboard-scope-switch{
  flex:0 0 auto;
  margin-left:auto;
}
/* Legacy standalone rows are no longer rendered on these two screens. */
.operations-controls-scope,.commercial-scope-toolbar{display:none!important}

@media(max-width:900px){
  .commercial-alert-scope-row,
  .control-tabs-scope-row{align-items:stretch;flex-direction:column}
  .commercial-alert-scope-row>.dashboard-scope-switch,
  .control-tabs-scope-row>.dashboard-scope-switch{
    width:100%;
    margin-left:0;
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
  .control-tabs-scope-row .control-tabs-inline{width:100%}
}

/* ------------------------------------------------------------------
   v4.8.40 - Thiet ke lai chi bao dong bo
   Truoc day: mot dam may vien mo cong them cham 7px co vien 2px de len canh
   dam may - o 20px hai hinh nay danh nhau, nhin nhu vet nhoe.
   Nay: dam may nam trong mot chip tron co nen mau theo trang thai; trang thai
   doc duoc ngay tu mau nen thay vi tu mot cham nho.
   ------------------------------------------------------------------ */
.sync-status-icon{
  width:28px!important;height:28px!important;flex:0 0 28px!important;
  border-radius:50%;
  background:color-mix(in srgb,var(--sync-tone,#16a36a) 13%,transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--sync-tone,#16a36a) 26%,transparent);
  color:var(--sync-tone,#16a36a);
  transition:background .2s ease,box-shadow .2s ease,color .2s ease;
}
.sync-status-icon svg{
  width:15px!important;height:15px!important;
  stroke-width:1.9!important;
  stroke:var(--sync-tone,#16a36a)!important;
}
/* Cham trang thai khong con can thiet: chip da mang mau trang thai. Giu the trong
   DOM de khong pha markup, nhung an di. */
.sync-state-dot{display:none!important}

.sync-pill:not(.sync-error):not(.sync-offline):not(.sync-pending):not(.synching){--sync-tone:#16a36a}
.sync-pill.synching{--sync-tone:#1688da}
.sync-pill.sync-pending{--sync-tone:#d99000}
.sync-pill.sync-error{--sync-tone:#dc3f49}
.sync-pill.sync-offline{--sync-tone:#8492a5}

/* Dang dong bo: vong sang lan toa - dien ta chuyen dong tot hon mot cham nhap nhay */
.sync-pill.synching .sync-status-icon::after{
  content:"";position:absolute;inset:0;border-radius:50%;
  box-shadow:0 0 0 0 color-mix(in srgb,var(--sync-tone) 55%,transparent);
  animation:alphaSyncRing 1.4s cubic-bezier(.2,.7,.3,1) infinite;
}
@keyframes alphaSyncRing{
  0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--sync-tone) 50%,transparent)}
  70%{box-shadow:0 0 0 7px color-mix(in srgb,var(--sync-tone) 0%,transparent)}
  100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--sync-tone) 0%,transparent)}
}
@media(prefers-reduced-motion:reduce){
  .sync-pill.synching .sync-status-icon::after{animation:none}
}

html[data-theme="dark"] .sync-status-icon{
  background:color-mix(in srgb,var(--sync-tone,#16a36a) 22%,transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--sync-tone,#16a36a) 40%,transparent);
}
@media(max-width:900px){
  .sync-status-icon{width:26px!important;height:26px!important;flex:0 0 26px!important}
}

/* ------------------------------------------------------------------
   Hang tab + o chon pham vi tren cung mot dong.
   Truoc day o chon pham vi la mot hang RIENG dat ngay duoi the gioi
   thieu, nen no de len dai KPI cua the do va bo trong ca mot hang phia
   duoi. Nay tab nam trai, o chon pham vi nam phai cung hang.
   ------------------------------------------------------------------ */
.business-tabs-shell--split{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
.business-tabs-shell--split > .chart-heading-actions{margin-left:auto;flex:0 1 auto}
@media(max-width:900px){
  .business-tabs-shell--split{align-items:flex-start}
  .business-tabs-shell--split > .chart-heading-actions{width:100%;justify-content:flex-start;margin-left:0}
}