/* ==========================================================================
   ALPHA DESIGN ERP Cloud v4.8.14 — ALPHA DATA GRID (Phase 8)
   Canonical presentation layer for ERP tables/card views.
   Owns density, column visibility, sticky-key geometry, card-mode geometry,
   touch behavior and Phase 5 readability closure.
   ========================================================================== */

/* Modern Data Grid */
.table-wrap.alpha-grid-shell{border:1px solid var(--alpha-line);border-radius:14px;background:var(--alpha-surface);overflow:auto!important;overscroll-behavior:contain;scrollbar-gutter:stable}
.table-wrap.alpha-grid-shell>table.alpha-data-grid{border-collapse:separate!important;border-spacing:0!important;width:100%;min-width:max-content}
/*
 * Ghim dòng tiêu đề cho MỌI bảng (chính sách 30/08/2026). thead th đã position:sticky, nhưng
 * sticky chỉ có tác dụng khi .table-wrap là khung cuộn — bảng dài mà wrap không giới hạn chiều
 * cao thì cả bảng trôi theo trang và tiêu đề biến mất. Trước đây chỉ bảng ≥10 dòng mới được
 * app.js gắn .table-scroll-frame; các bảng do module riêng vẽ (nghỉ phép, thi công, xuất/nhập…)
 * không có khung. Quy tắc dưới cho mọi lưới một trần chiều cao theo viewport: bảng ngắn không
 * đổi gì, bảng dài cuộn bên trong và tiêu đề luôn ở trên. Chế độ thẻ (card) giữ nguyên; chỉ áp cho
 * màn hình (@media screen) nên khi in không có trần chiều cao — không cần quy tắc in ấn riêng, và
 * không thêm quy tắc ép ưu tiên nào (ngân sách ép ưu tiên của repo đã đóng băng, bài test
 * ui-architecture-cleanup-phase8 đếm cả chữ trong chú thích — nên chú thích này cũng không viết nó).
 */
@media screen{.table-wrap.alpha-grid-shell:not(.alpha-card-shell){max-height:clamp(360px,62dvh,760px)}}
.alpha-data-grid thead{position:sticky;top:0;z-index:8}
.alpha-data-grid thead th{position:sticky;top:0;z-index:8;min-height:44px;padding:12px 14px!important;background:var(--alpha-surface-subtle)!important;color:var(--alpha-text-muted)!important;border-bottom:1px solid var(--alpha-line-strong)!important;font-size:10.5px!important;line-height:1.35!important;font-weight:760!important;letter-spacing:.045em;text-transform:none;white-space:nowrap}
.alpha-data-grid tbody td{min-height:46px;padding:12px 14px!important;background:var(--alpha-surface)!important;color:var(--alpha-text)!important;border-bottom:1px solid var(--alpha-line)!important;font-size:12px!important;line-height:1.45!important;vertical-align:middle!important}
.alpha-data-grid tbody tr:last-child td{border-bottom:0!important}
.alpha-data-grid tbody tr:hover td{background:var(--alpha-brand-50)!important}
.alpha-data-grid td.numeric,.alpha-data-grid th.numeric{font-variant-numeric:tabular-nums lining-nums;white-space:nowrap!important}
.alpha-data-grid td.actions,.alpha-data-grid td.table-col-actions,.alpha-data-grid.alpha-sticky-last th:last-child{text-align:center}
.alpha-data-grid tbody tr[data-record-id]{cursor:pointer}
.alpha-data-grid tbody tr.alpha-row-selected td{background:var(--alpha-brand-100)!important}
.alpha-data-grid.alpha-sticky-first:not(.alpha-card-view) th:first-child,.alpha-data-grid.alpha-sticky-first:not(.alpha-card-view) td:first-child{position:sticky;left:0;z-index:7;box-shadow:1px 0 0 var(--alpha-line);background:var(--alpha-surface)!important}
.alpha-data-grid.alpha-sticky-first:not(.alpha-card-view) thead th:first-child{z-index:11;background:var(--alpha-surface-subtle)}
.alpha-data-grid.alpha-sticky-last:not(.alpha-card-view) th:last-child,.alpha-data-grid.alpha-sticky-last:not(.alpha-card-view) td:last-child{position:sticky;right:0;z-index:7;box-shadow:-1px 0 0 var(--alpha-line);background:var(--alpha-surface)!important}
.alpha-data-grid.alpha-sticky-last:not(.alpha-card-view) thead th:last-child{z-index:11;background:var(--alpha-surface-subtle)!important}
.alpha-data-grid tbody tr:hover td:first-child,.alpha-data-grid tbody tr:hover td:last-child{background:var(--alpha-brand-50)!important}
.alpha-column-hidden{display:none!important}
.alpha-grid-controls{display:flex;align-items:center;justify-content:flex-end;gap:8px;margin-left:auto;position:relative}
.alpha-grid-control{min-height:34px;padding:7px 10px;border:1px solid var(--alpha-line);border-radius:9px;background:var(--alpha-surface);color:var(--alpha-text-muted);font-size:10.5px;font-weight:650;white-space:nowrap}
.alpha-grid-control:hover,.alpha-grid-control[aria-expanded="true"]{border-color:var(--alpha-line-strong);background:var(--alpha-brand-50);color:var(--alpha-brand-800)}
.alpha-column-menu{position:absolute;right:0;top:40px;z-index:80;width:min(290px,calc(100vw - 32px));max-height:360px;overflow:auto;padding:8px;border:1px solid var(--alpha-line);border-radius:12px;background:var(--alpha-surface);box-shadow:var(--alpha-shadow-md)}
.alpha-column-menu[hidden]{display:none!important}
.alpha-column-menu label{display:flex;align-items:center;gap:9px;min-height:36px;padding:7px 8px;border-radius:8px;color:var(--alpha-text);font-size:11px}
.alpha-column-menu label:hover{background:var(--alpha-surface-subtle)}
.alpha-column-menu input{accent-color:var(--alpha-brand-700)}
.alpha-column-menu .alpha-column-menu-title{padding:7px 8px;color:var(--alpha-text-muted);font-size:9.5px;font-weight:760;letter-spacing:.08em;text-transform:uppercase}

/* Card view baseline. Phase 5 geometry below owns dimensions and cell layout. */
.alpha-data-grid.alpha-card-view{background:transparent!important}
.alpha-data-grid.alpha-card-view thead{display:none!important}
.alpha-data-grid.alpha-card-view tbody tr{border:1px solid var(--alpha-line);border-radius:12px;background:var(--alpha-surface);box-shadow:var(--alpha-shadow-sm);overflow:hidden}
.alpha-data-grid.alpha-card-view tbody tr[hidden]{display:none!important}
.alpha-data-grid.alpha-card-view tbody td:last-child{border-bottom:0!important}

/* Data grid: smart key-column pinning and user-selectable density. */
.alpha-data-grid:not(.alpha-card-view) .alpha-sticky-key-cell{position:sticky;left:0;z-index:7;box-shadow:1px 0 0 var(--alpha-line);background:var(--alpha-surface)!important}
/*
 * GD-CTRL-01 (06/09/2026) — Ô TIÊU ĐỀ GHIM PHẢI NẰM TRÊN CÁC Ô TIÊU ĐỀ ĐANG TRÔI.
 *
 * alpha-design-system.css (.table-wrap.table-scroll-frame table thead th) đặt z-index:6 ở mức ƯU
 * TIÊN CAO NHẤT cho MỌI ô tiêu đề. Mức ưu tiên đó thắng độ đặc hiệu, nên ô tiêu đề của cột khóa
 * bị kéo từ 11 xuống 6 — BẰNG các ô anh em. Hoà z-index thì thứ tự DOM quyết định: ô đứng sau vẽ
 * đè lên ô đứng trước, tức chính ô đang được ghim. Đo trên Chrome 1440x900, bảng Kiểm soát vận
 * hành: chưa cuộn, elementFromPoint tại tâm ô tiêu đề cột khóa = TH#0 "Dự án"; cuộn ngang 395px
 * thì thành TH#3 "Đã xuất hóa đơn" — chữ "Dự án" bị che khuất đúng như người dùng báo, trong khi
 * ô thân bảng (z-index:7, không bị mức ưu tiên nào đè) vẫn ghim đúng.
 *
 * Ngân sách override của Phase 8 (config/ui-architecture-budget-v4796.json) là ngân sách ĐÓNG:
 * thêm một khai báo ưu tiên cao thì phải bỏ một khai báo khác. Đã trả giá bằng đúng một khai báo
 * ở quy tắc .alpha-sticky-first ngay trên — lớp đó KHÔNG nơi nào gắn (alpha-data-grid.js:138 chỉ
 * gỡ ra), nên quy tắc đó là mã chết và mức ưu tiên ở đó không bảo vệ điều gì.
 */
.alpha-data-grid:not(.alpha-card-view) thead .alpha-sticky-key-cell{z-index:11!important;background:var(--alpha-surface-subtle)!important}
.alpha-data-grid:not(.alpha-card-view) tbody tr:hover .alpha-sticky-key-cell{background:var(--alpha-brand-50)!important}
.alpha-data-grid:not(.alpha-card-view) tbody tr.alpha-row-selected .alpha-sticky-key-cell{background:var(--alpha-brand-100)!important}
.alpha-data-grid[data-alpha-density="comfortable"] thead th{padding:13px 15px!important}
.alpha-data-grid[data-alpha-density="comfortable"] tbody td{min-height:52px;padding:14px 15px!important;font-size:12.5px!important;line-height:1.5!important}
.alpha-data-grid[data-alpha-density="standard"] thead th{padding:11px 13px!important}
.alpha-data-grid[data-alpha-density="standard"] tbody td{min-height:46px;padding:11px 13px!important;font-size:12px!important}
.alpha-data-grid[data-alpha-density="compact"] thead th{padding:8px 10px!important;font-size:10px!important}
.alpha-data-grid[data-alpha-density="compact"] tbody td{min-height:38px;padding:8px 10px!important;font-size:11px!important;line-height:1.35!important}
.alpha-data-grid tbody tr[tabindex="0"]{outline:0}
.alpha-data-grid tbody tr[tabindex="0"]:focus-visible td{background:var(--alpha-brand-50)!important;box-shadow:inset 0 1px color-mix(in srgb,var(--alpha-brand-700) 32%,transparent),inset 0 -1px color-mix(in srgb,var(--alpha-brand-700) 32%,transparent)}
.alpha-grid-control.alpha-density-control{min-width:116px}
.alpha-column-menu-footer{position:sticky;bottom:-8px;margin:6px -8px -8px;padding:8px;border-top:1px solid var(--alpha-line);background:var(--alpha-surface)}
.alpha-column-menu-footer button{width:100%;min-height:34px;border:1px solid var(--alpha-line);border-radius:8px;background:var(--alpha-surface-subtle);color:var(--alpha-text-muted);font-size:10px;font-weight:700}
.alpha-column-menu-footer button:hover{background:var(--alpha-brand-50);color:var(--alpha-brand-800)}

/* Phase 5 — Global Data Grid Readability & Card View Geometry Closure
   Fixes fixed-column/table-grid geometry leaking into Card View across every ERP module. */
.table-wrap.alpha-grid-shell.alpha-card-shell{
  overflow-x:hidden!important;
  scrollbar-gutter:auto!important;
}
.table-wrap.alpha-grid-shell>table.alpha-data-grid.alpha-card-view,
.table-wrap.alpha-grid-shell>table.alpha-data-grid.alpha-card-view.table-auto-columns,
.table-wrap.alpha-grid-shell>table.alpha-data-grid.alpha-card-view.table-generated-grid,
.table-wrap.alpha-grid-shell>table.alpha-data-grid.alpha-card-view.table-grid-exact{
  display:block!important;
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  table-layout:auto!important;
  border-collapse:separate!important;
  border-spacing:0!important;
  margin:0!important;
}
.table-wrap.alpha-grid-shell>table.alpha-data-grid.alpha-card-view>colgroup,
.table-wrap.alpha-grid-shell>table.alpha-data-grid.alpha-card-view>colgroup[data-auto-columns]{
  display:none!important;
  width:0!important;
}
.table-wrap.alpha-grid-shell>table.alpha-data-grid.alpha-card-view>tbody{
  display:grid!important;
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  grid-template-columns:repeat(auto-fit,minmax(min(420px,100%),1fr))!important;
  align-items:start;
  gap:14px!important;
  padding:14px!important;
  box-sizing:border-box!important;
}
.table-wrap.alpha-grid-shell>table.alpha-data-grid.alpha-card-view>tbody>tr{
  display:block!important;
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  height:auto!important;
  box-sizing:border-box!important;
}
.table-wrap.alpha-grid-shell>table.alpha-data-grid.alpha-card-view>tbody>tr>td,
.table-wrap.alpha-grid-shell>table.alpha-data-grid.alpha-card-view.table-auto-columns>tbody>tr>td,
.table-wrap.alpha-grid-shell>table.alpha-data-grid.alpha-card-view.table-grid-exact>tbody>tr>td{
  display:flex!important;
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  height:auto!important;
  box-sizing:border-box!important;
  flex-wrap:nowrap!important;
  align-items:flex-start!important;
  justify-content:space-between!important;
  gap:16px!important;
  padding:11px 14px!important;
  position:static!important;
  inset:auto!important;
  float:none!important;
  clear:both!important;
  overflow:visible!important;
  white-space:normal!important;
  overflow-wrap:normal!important;
  word-break:normal!important;
  hyphens:none!important;
  text-align:right!important;
  line-height:1.45!important;
}
.table-wrap.alpha-grid-shell>table.alpha-data-grid.alpha-card-view>tbody>tr>td::before{
  content:attr(data-alpha-label)!important;
  display:block!important;
  flex:0 0 clamp(116px,34%,172px)!important;
  width:auto!important;
  min-width:0!important;
  max-width:172px!important;
  color:var(--alpha-text-muted)!important;
  font-size:10.5px!important;
  font-weight:750!important;
  line-height:1.4!important;
  text-align:left!important;
  white-space:normal!important;
  overflow-wrap:normal!important;
  word-break:normal!important;
  hyphens:none!important;
}
.table-wrap.alpha-grid-shell>table.alpha-data-grid.alpha-card-view>tbody>tr>td>*{
  min-width:0!important;
  max-width:100%!important;
  box-sizing:border-box!important;
}
.table-wrap.alpha-grid-shell>table.alpha-data-grid.alpha-card-view>tbody>tr>td>strong,
.table-wrap.alpha-grid-shell>table.alpha-data-grid.alpha-card-view>tbody>tr>td>.muted,
.table-wrap.alpha-grid-shell>table.alpha-data-grid.alpha-card-view>tbody>tr>td>span:not(.badge),
.table-wrap.alpha-grid-shell>table.alpha-data-grid.alpha-card-view>tbody>tr>td>a{
  overflow-wrap:anywhere;
  word-break:normal!important;
}
.table-wrap.alpha-grid-shell>table.alpha-data-grid.alpha-card-view>tbody>tr>td.table-col-numeric,
.table-wrap.alpha-grid-shell>table.alpha-data-grid.alpha-card-view>tbody>tr>td.table-col-date,
.table-wrap.alpha-grid-shell>table.alpha-data-grid.alpha-card-view>tbody>tr>td.table-col-status,
.table-wrap.alpha-grid-shell>table.alpha-data-grid.alpha-card-view>tbody>tr>td.table-col-progress,
.table-wrap.alpha-grid-shell>table.alpha-data-grid.alpha-card-view>tbody>tr>td.numeric{
  text-align:right!important;
  white-space:normal!important;
  overflow-wrap:normal!important;
  word-break:normal!important;
  font-size:12px!important;
  letter-spacing:0!important;
}
.table-wrap.alpha-grid-shell>table.alpha-data-grid.alpha-card-view>tbody>tr>td .badge,
.table-wrap.alpha-grid-shell>table.alpha-data-grid.alpha-card-view>tbody>tr>td .confidence,
.table-wrap.alpha-grid-shell>table.alpha-data-grid.alpha-card-view>tbody>tr>td .table-lock-state{
  flex:0 0 auto!important;
  white-space:nowrap!important;
  word-break:normal!important;
}
.table-wrap.alpha-grid-shell>table.alpha-data-grid.alpha-card-view>tbody>tr>td.actions,
.table-wrap.alpha-grid-shell>table.alpha-data-grid.alpha-card-view>tbody>tr>td.table-col-actions{
  display:flex!important;
  width:100%!important;
  justify-content:flex-end!important;
  align-items:center!important;
  flex-wrap:wrap!important;
  overflow:visible!important;
}
.table-wrap.alpha-grid-shell>table.alpha-data-grid.alpha-card-view>tbody>tr>td.actions::before,
.table-wrap.alpha-grid-shell>table.alpha-data-grid.alpha-card-view>tbody>tr>td.table-col-actions::before{display:none!important}
.table-wrap.alpha-grid-shell>table.alpha-data-grid.alpha-card-view>tbody>tr>td .table-action-group{
  width:auto!important;
  max-width:100%!important;
  margin-left:auto!important;
  justify-content:flex-end!important;
  flex-wrap:wrap!important;
}
/* Never allow desktop fit logic to reintroduce per-character wrapping in a card. */
@media(min-width:1280px){
  .table-wrap.alpha-grid-shell>table.alpha-data-grid.alpha-card-view.table-auto-columns th,
  .table-wrap.alpha-grid-shell>table.alpha-data-grid.alpha-card-view.table-auto-columns td{
    min-width:0!important;
    max-width:100%!important;
    white-space:normal!important;
    overflow-wrap:normal!important;
    word-break:normal!important;
    hyphens:none!important;
  }
}
@media(max-width:1180px){
  .table-wrap.alpha-grid-shell>table.alpha-data-grid.alpha-card-view>tbody{grid-template-columns:repeat(auto-fit,minmax(min(360px,100%),1fr))!important}
}
@media(max-width:820px){
  .table-wrap.alpha-grid-shell>table.alpha-data-grid.alpha-card-view>tbody{grid-template-columns:1fr!important;padding:10px!important;gap:10px!important}
  .table-wrap.alpha-grid-shell>table.alpha-data-grid.alpha-card-view>tbody>tr>td::before{flex-basis:clamp(108px,38%,154px)!important;max-width:154px!important}
}
@media(max-width:480px){
  .table-wrap.alpha-grid-shell>table.alpha-data-grid.alpha-card-view>tbody>tr>td{gap:10px!important;padding:10px 11px!important}
  .table-wrap.alpha-grid-shell>table.alpha-data-grid.alpha-card-view>tbody>tr>td::before{flex-basis:42%!important;max-width:42%!important;font-size:10px!important}
}

.alpha-grid-control:focus-visible,.alpha-data-grid tbody tr:focus-visible{
  outline:0!important;box-shadow:var(--alpha-focus)!important;border-color:var(--alpha-brand-700)!important
}

@media(max-width:820px){
  .alpha-grid-controls{width:100%;margin-left:0;justify-content:flex-end}
  .alpha-grid-control{flex:0 1 auto}
  .alpha-data-grid thead th,.alpha-data-grid tbody td{padding:11px 12px!important;font-size:11px!important}
}

@media(max-width:560px){
  .alpha-grid-controls{justify-content:stretch}
  .alpha-grid-control{flex:1}
  .alpha-data-grid.alpha-card-view tbody{grid-template-columns:1fr;padding:8px}
}

@media(max-width:820px){
  .alpha-grid-controls{overflow-x:auto;justify-content:flex-start!important;scrollbar-width:none;padding-bottom:1px}
  .alpha-grid-controls::-webkit-scrollbar{display:none}
  .alpha-grid-control{min-height:40px;flex:none!important}
  .alpha-column-menu{position:fixed;left:12px;right:12px;top:auto;bottom:calc(74px + env(safe-area-inset-bottom));width:auto;max-height:min(54dvh,440px)}
}

@media(max-width:640px){
  .alpha-data-grid.alpha-card-view tbody td{min-height:46px!important;padding:11px 12px!important}
  .alpha-data-grid.alpha-card-view tbody td::before{flex-basis:40%}
  .alpha-grid-control.alpha-density-control{min-width:126px}
}

@media(forced-colors:active){
  .alpha-data-grid tbody tr:focus-visible td{outline:2px solid CanvasText!important}
}


/* ==========================================================================
   v4.8.14 — DATA GRID COMPOSITOR PERFORMANCE

   Không gắn will-change cho toàn bộ hàng vì bảng Enterprise có thể có hàng
   nghìn record. Chỉ row đang hover/focus mới được promote tạm thời. Điều này
   tránh bùng compositing layer/VRAM nhưng vẫn giữ micro-interaction mượt.
   ========================================================================== */
.alpha-data-grid tbody tr:not(.local-filter-empty-row){
  transition:
    transform var(--alpha-motion-xs,80ms) var(--alpha-motion-ease,cubic-bezier(0.4,0,0.2,1)),
    opacity var(--alpha-motion-xs,80ms) var(--alpha-motion-ease,cubic-bezier(0.4,0,0.2,1));
}

@media(hover:hover) and (pointer:fine){
  .alpha-data-grid tbody tr:not(.local-filter-empty-row):hover{
    will-change:transform,opacity;
    transform:translate3d(1px,0,0);
  }
  .alpha-data-grid tbody tr:not(.local-filter-empty-row):active{
    transform:translate3d(0,0,0) scale(.999);
  }
}

.alpha-data-grid tbody tr:not(.local-filter-empty-row):focus-within{
  will-change:transform,opacity;
  transform:translate3d(0,0,0);
}

/* Action controls dùng compositor thay vì margin/left cho hiệu ứng xuất hiện. */
.alpha-data-grid .table-action-group,
.alpha-data-grid td.actions > button,
.alpha-data-grid td.table-col-actions > button{
  backface-visibility:hidden;
  transition:
    transform var(--alpha-motion-sm,120ms) var(--alpha-motion-ease,cubic-bezier(0.4,0,0.2,1)),
    opacity var(--alpha-motion-sm,120ms) var(--alpha-motion-ease,cubic-bezier(0.4,0,0.2,1));
}
@media(hover:hover) and (pointer:fine){
  .alpha-data-grid tbody tr:hover .table-action-group{
    will-change:transform,opacity;
    transform:translate3d(0,0,0);
  }
}

/* Không dùng smooth scroll nội bộ cho Data Grid: tránh tích lũy animation khi
   người dùng cuộn nhanh trên iPad/trackpad. */
.alpha-grid-shell,
.alpha-data-grid{
  scroll-behavior:auto;
}

@media(prefers-reduced-motion:reduce){
  .alpha-data-grid tbody tr,
  .alpha-data-grid .table-action-group,
  .alpha-data-grid td.actions > button,
  .alpha-data-grid td.table-col-actions > button{
    transition:none;
    transform:none;
  }
}

/* ========================================================================== 
   v4.8.14 — DATA GRID VIRTUAL SCROLLING / WINDOWING

   Chỉ các row nằm trong viewport + overscan được giữ trong DOM. Hai spacer row
   giữ nguyên tổng chiều cao cuộn. Các override xung đột với cell legacy được
   đặt inline có priority ở thời điểm tạo spacer để không tăng override-priority
   debt của Phase 8. Không thêm paint/layout containment để giữ sticky/card.
   ========================================================================== */
.alpha-data-grid[data-alpha-virtualized="true"] .alpha-virtual-spacer-row{
  pointer-events:none;
  user-select:none;
}
.alpha-data-grid[data-alpha-virtualized="true"] .alpha-virtual-spacer-row:hover .alpha-virtual-spacer-cell{
  background:transparent;
}