/* =====================================================================
   ALPHA DESIGN ERP Cloud v4.8.0 UI Hotfix 1 — Global UI/Table/Chart Integrity
   Cross-module closure for issues found during visual QA:
   - one toolbar row per table (search/filter/count/grid controls co-located)
   - no duplicate record-count badges
   - chart plot geometry cannot overflow its card
   - tax status text does not paint accidental pink blocks
   - Construction Command Center combobox uses an integrated chevron
   ===================================================================== */

/* ---------- Canonical table toolbar geometry ---------- */
.table-tools>.table-count-badge,
.table-tools>.record-count{
  margin-left:auto;
  flex:0 0 auto;
}
.table-tools>.alpha-grid-controls{
  width:auto;
  min-width:0;
  margin-left:0;
  flex:0 0 auto;
  justify-content:flex-end;
}
.table-tools.alpha-grid-tools--controls-only{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  min-height:50px;
}
.table-tools.alpha-grid-tools--controls-only>.table-count-badge,
.table-tools.alpha-grid-tools--controls-only>.record-count{margin-left:auto}

/* Trash has authored search + module selector + count; reserve the last cell
   for the shared Density / View / Column control cluster. */
.trash-card .trash-tools{
  grid-template-columns:minmax(260px,1fr) minmax(180px,240px) auto auto!important;
  align-items:center;
}
.trash-card .trash-tools>.alpha-grid-controls{justify-self:end}
.trash-card .trash-tools>.table-count-badge,
.trash-card .trash-tools>.record-count{justify-self:end;margin-left:0}

/* No stand-alone filter-empty panel below a populated table. Empty results
   are represented by a table row so vertical geometry remains stable. */
.trash-card>.empty-state{display:none!important}

/* ---------- Chart containment ---------- */
.combo-chart{min-height:0;overflow:hidden}
.combo-chart>.plot,
.combo-chart>.chart-horizontal-scroll,
.combo-chart>.chart-horizontal-scroll>.plot{
  min-height:0!important;
  height:100%!important;
  max-height:100%!important;
}
.combo-chart>.chart-horizontal-scroll{overflow-x:auto;overflow-y:hidden}
.executive-delivery-pane,
.executive-delivery-combo{overflow:hidden}
.executive-delivery-pane .plot{min-height:0!important;height:100%!important}

/* ---------- Tax status visual cleanup ---------- */
.tax-compliance-card .status-chip>:is(.trend-up,.trend-down,.trend-flat){
  background:transparent!important;
  box-shadow:none!important;
}

/* ---------- Construction Command Center control cleanup ---------- */
.construction-c13__toolbar>.searchable-combobox{
  width:270px;
  min-width:250px;
  max-width:min(34vw,360px);
}
.construction-c13__toolbar .searchable-combobox-input{
  height:38px!important;
  min-height:38px!important;
  padding-right:38px!important;
}
.construction-c13__toolbar .searchable-combobox-toggle{
  right:3px!important;
  top:50%!important;
  width:32px!important;
  height:32px!important;
  min-height:32px!important;
  padding:0!important;
  border:0!important;
  border-radius:7px!important;
  background:transparent!important;
  box-shadow:none!important;
}
.construction-c13__toolbar .searchable-combobox-toggle:hover{
  background:color-mix(in srgb,var(--primary) 8%,transparent)!important;
}

/* Responsive toolbar policy: keep one horizontal toolbar when possible and
   allow wrapping only when the viewport truly requires it. */
@media(max-width:1100px){
  .trash-card .trash-tools{
    display:flex!important;
    flex-wrap:wrap!important;
  }
  .trash-card .trash-tools>.table-search{flex:1 1 320px}
  .trash-card .trash-tools>.searchable-combobox{flex:1 1 210px;max-width:280px}
}
@media(max-width:820px){
  .table-tools>.alpha-grid-controls{margin-left:0;width:100%;justify-content:flex-start}
  .table-tools>.table-count-badge,
  .table-tools>.record-count{margin-left:0}
  .trash-card .trash-tools>.searchable-combobox{max-width:none}
  .construction-c13__toolbar>.searchable-combobox{width:100%;min-width:0;max-width:none}
}

/* ==========================================================================
   HERO GỌN + NHỊP DỌC ĐỀU — TOÀN HỆ THỐNG (30/08/2026, ảnh trang Nghỉ phép của người dùng)
   (1) Sau khi ẩn đoạn mô tả, các ô hero chỉ còn nhãn + tiêu đề nhưng vẫn giữ min-height 108px và
       đệm 18–24px → một dải trống chiếm cả hàng. Bỏ chiều cao tối thiểu, thu đệm.
   (2) Khoảng cách giữa các hàng không đều: khối nào có .section thì cách 18–24px, khối không có
       (.kpi-grid, .note, toolbar kỳ) thì dính sát 0px vào thanh tab/toolbar phía trên. Đặt MỘT nhịp
       16px giữa mọi khối xếp dọc trong thân màn hình. Tệp này nạp cuối nên thắng bằng thứ tự,
       không cần ép ưu tiên; section.content thêm vào để vượt các quy tắc hai lớp như
       .operations-dashboard .section. Margin trong luồng block tự gộp, nên heading (margin-bottom
       11px) + khối sau (16px) vẫn ra đúng 16px, không cộng dồn.
   ========================================================================== */
section.content .suite-screen-intro{min-height:0;padding:12px 18px;gap:16px}
section.content .suite-intro-copy{display:grid;gap:2px}
section.content .operations-screen-intro,section.content .operations-dashboard-head{padding:14px 18px}
section.content .project-master-hero,section.content .design-workspace__hero{padding:14px 18px;align-items:center}
section.content .construction-workspace__hero{padding:14px 18px;align-items:center}
section.content .annual-benefit-hero{padding:14px 18px}
section.content .alpha-role-lens{padding:12px 16px;margin-bottom:16px}
section.content .enterprise-suite-screen{gap:16px}
/* alpha-modern-workspace.css có `.section{margin-top:24px!important}` — không thể thắng bằng độ ưu tiên
   hay thứ tự, nên riêng margin-top ở đây phải ép. Tệp này nằm ngoài ngân sách ép ưu tiên
   (config/ui-architecture-budget-v4796.json chỉ đếm các tệp được liệt kê). */
section.content .suite-screen-body>*+*,section.content .suite-screen-body>div:not([class])>*+*,
section.content .operations-view>*+*,section.content .business-suite-screen>*+*,
section.content .business-screen-body>*+*,section.content .business-procurement-body>*+*{margin-top:16px!important}
/* Dải tab của các màn hình Kinh doanh (Mua sắm, CRM…): thanh tab 45px nằm trong hộp 70px vì hộp có đệm,
   cộng 14px trên + 24px dưới thành một khoảng trống ~110px giữa KPI và bảng (ảnh người dùng). */
section.content .business-tabs-shell{padding:0;min-height:0;margin-bottom:0!important}
section.content .business-tabs-shell .metric-switch{margin:0}
/* Khối ĐẦU của thân màn hình: lưới .enterprise-suite-screen đã có gap 16px, mà khối đầu (.hr-scope-toolbar.section,
   .metric-switch.section…) còn mang margin-top 24px — gap lưới và margin KHÔNG gộp, thành 40px trống
   dưới hero (ảnh Nhân sự của người dùng: "có chỗ thì thừa khoảng cách quá"). */
section.content .suite-screen-body>*:first-child,section.content .suite-screen-body>div:not([class])>*:first-child,
section.content .operations-view>*:first-child,section.content .business-suite-screen>*:first-child,
section.content .business-procurement-body>*:first-child,section.content .business-screen-body>*:first-child{margin-top:0!important}
/* .section{margin-top:24px!important} bám cả vào phần tử nằm TRONG hộp flex/grid (thanh tab, dải nút):
   margin không gộp trong flex nên nó đội chiều cao hộp lên (đo được: hộp 70px cho thanh tab 46px). */
/* Ba selector của khối GIAO DIỆN IM LẶNG bị stylesheet nạp SAU ghi đè (project-delivery-layout.css
   đặt .project-routing-rule{display:flex}), nên lặp lại ở tệp cuối cùng — thắng bằng thứ tự. */
section.content .project-routing-rule,section.content .modern-hero>div>p,
section.content .dashboard-project-table-note{display:none}
/* Khe hero: nhận thanh tab / nút chọn phạm vi được dời lên (mountHeroSlot). Rỗng thì không chiếm chỗ. */
section.content .suite-intro-slot{display:flex;align-items:center;justify-content:flex-end;flex:1 1 auto;min-width:0;margin-inline:8px}
section.content .suite-intro-slot:empty{display:none}
section.content .suite-intro-slot>*{margin:0!important}
section.content .suite-intro-slot .metric-switch{box-shadow:none}
section.content .business-tabs-shell>*,section.content .chart-heading-actions>*,
section.content .hr-scope-toolbar>*,section.content .timesheet-period-toolbar>*{margin-top:0!important;margin-bottom:0!important}

/* Ma trận quyền trong hộp thoại "Tạo vai trò" (cloud-v2 openRoleModal): mỗi hàng là một màn hình
   với hai mức Xem/Ghi. Danh sách dài nên cuộn trong hộp thay vì đẩy nút Lưu ra khỏi màn hình. */
.role-permission-matrix{display:grid;gap:2px;max-height:46dvh;overflow:auto;padding:4px;border:1px solid var(--line,#d8e3ed);border-radius:10px}
.role-permission-row{display:grid;grid-template-columns:minmax(0,1fr) 92px 92px;align-items:center;gap:8px;padding:6px 8px;border-radius:8px}
.role-permission-row:nth-child(odd){background:color-mix(in srgb,var(--surface-2,#f4f8fb) 60%,transparent)}
.role-permission-row>span{font-size:11.5px;min-width:0;overflow-wrap:anywhere}
.role-permission-row .form-check{margin:0;font-size:11px;white-space:nowrap}
.role-permission-row input[disabled]+*,.role-permission-row .form-check:has(input[disabled]){opacity:.4}

/* Ô tìm kiếm viết tay (Thùng rác) hiện thành HỘP LỒNG HỘP: label.table-search có viền, và
   `.table-tools input` ở alpha-professional-ui.css (nạp sau) trả lại viền + nền trắng + bo góc
   cho chính input bên trong. Đo 30/08/2026: input 129×36 viền 1px #d7e2e8 nằm trong hộp 169×40.
   Trả input về trong suốt, và cho ô tìm kiếm giãn bằng ô tìm kiếm chuẩn của bảng. */
section.content .table-search>input{border:0!important;background:transparent!important;height:auto!important;min-height:0!important;border-radius:0!important;padding:0!important;box-shadow:none!important}
section.content .table-search:focus-within{border-color:#76aac6;box-shadow:var(--pro-focus,0 0 0 3px rgba(113,186,203,.18))}
section.content .trash-tools>.table-search{flex:1 1 300px;min-width:220px;max-width:420px}

/* Cột THAO TÁC của bảng người dùng: hàng Giám đốc gốc chứa một CÂU ("Tài khoản Giám đốc gốc")
   thay vì nút, mà cột lại hẹp và cắt chữ (ảnh người dùng 30/08/2026: "khoản Giám đốc g…").
   Cho cột đủ rộng và cho chữ xuống dòng thay vì bị xén. */
section.content .cloud-table-actions{min-width:200px;white-space:normal}
section.content .cloud-table-actions .table-action-group{display:flex;flex-wrap:wrap;gap:6px;align-items:center;justify-content:center}
section.content .cloud-table-actions .badge{white-space:normal;text-align:center;line-height:1.35}

/* Panel Báo cáo tài chính pháp định (app.js bctcPanel): một hàng điều khiển, bảng lần lập bên dưới. */
section.content .bctc-controls{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px;margin:12px 0}
section.content .bctc-controls .field{display:grid;gap:4px;min-width:0;margin:0}
section.content .bctc-controls .field>span{font-size:9.5px;font-weight:760;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
section.content .bctc-controls #bctcTemplate{min-width:min(420px,52vw)}
section.content .bctc-controls input[type="date"]{height:38px;padding:0 10px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--text)}
section.content .bctc-controls .primary-btn{height:38px}
section.content .bctc-checks{display:grid;gap:6px;margin-bottom:12px}
section.content .bctc-checks .note{margin:0}
section.content .bctc-panel .primary-btn.is-blocked{opacity:.5;cursor:not-allowed}


/* ===== BẢNG PHÂN QUYỀN TRONG HỘP TẠO VAI TRÒ =====
   Thẻ mang cả .role-permission-form lẫn .role-permission-matrix, nên quy tắc
   ".role-permission-form .form-check" ở alpha-design-system.css vẽ mỗi ô chọn thành hộp có viền
   padding 11px và đẩy chữ xuống dòng. Ở đây tháo hộp đó ra, thêm hàng tiêu đề dính, và siết chiều
   cao dòng để nhìn được nhiều màn hình cùng lúc thay vì 5 dòng một lần cuộn. */
.role-permission-matrix{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:0 20px!important;max-height:52dvh!important;padding:0 6px 6px!important;align-content:start}
.role-permission-head{display:grid;grid-template-columns:minmax(0,1fr) 44px 44px;gap:10px;position:sticky;top:0;z-index:2;padding:7px 8px 6px;background:var(--surface,#fff);border-bottom:1px solid var(--line,#d8e3ed);font-size:10px;font-weight:650;letter-spacing:.05em;text-transform:uppercase;color:var(--muted,#6b7f92)}
.role-permission-head>span+span{text-align:center}
.role-permission-row{grid-template-columns:minmax(0,1fr) 44px 44px!important;gap:10px!important;padding:0 8px!important;min-height:30px}
.role-permission-row>span{font-size:12px!important;line-height:1.25;overflow-wrap:anywhere}
/* Tháo hộp viền mà design-system áp cho .form-check, chỉ còn ô tick nằm giữa cột. */
.role-permission-matrix .form-check{border:0!important;background:none!important;padding:0!important;margin:0!important;min-width:0!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:0!important}
.role-permission-matrix .form-check input{margin:0!important}
/* Chữ "Xem"/"Ghi" đã nằm ở hàng tiêu đề; ẩn bản lặp ở từng dòng nhưng giữ cho trình đọc màn hình. */
.role-permission-matrix .chk-nhan{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
@media(max-width:760px){
  .role-permission-matrix{grid-template-columns:minmax(0,1fr)!important}
}


/* ===== 1. THẺ ĐIỂM BẢO MẬT: chữ trắng còn sót từ thời hero nền tối =====
   Hero đã bị sơn lại thành nền sáng ở alpha-design-system.css:4332, nhưng phần chỉnh kèm theo
   nhắm lớp .security-health — một lớp KHÔNG có trong markup nào. Markup dùng .security-score.
   Đo được trước khi sửa: chữ rgba(255,255,255,.68) trên nền gần trắng, tương phản 1.00. */
.security-score{background:rgba(255,255,255,.86)!important;border:1px solid #dde8ee!important;color:var(--text)!important;box-shadow:0 4px 16px rgba(4,47,85,.035)!important;backdrop-filter:none!important}
.security-score span,.security-score small{color:var(--muted,#61788a)!important}
.security-score strong{color:var(--alpha-navy-950,#0b2338)!important}
html[data-theme="dark"] .security-score{background:rgba(255,255,255,.06)!important;border-color:rgba(255,255,255,.14)!important}
html[data-theme="dark"] .security-score span,html[data-theme="dark"] .security-score small{color:rgba(226,242,248,.74)!important}
html[data-theme="dark"] .security-score strong{color:#ebf5fa!important}

/* Ô tick trong ma trận quyền: KHÔNG cần quy tắc riêng ở đây.
   Nguyên nhân thật là .modal-form.alpha-keyboard-form .field input{min-height:44px!important} ở
   alpha-modern-workspace.css kéo cả checkbox — đã sửa tại gốc bằng :not([type="checkbox"]).
   Bản vá cho ô tick vốn đã có sẵn ở alpha-modern-refinement-v4838.css. */