/*
  File: styles-part-09-ui-design-system.css
  Purpose: Shared table and UI design-system token layer for visual maintenance.
  Loaded by: index.html at the former styles.css cascade position.

  Why this file exists:
  - It is loaded directly with its own cache token; styles.css remains a compatibility entry only.
  - Later active stylesheet layers may override it, so inspect the last-loaded owner for cascade bugs.
  - Frequent visual fixes should start here first, not by hunting across many CSS files.
  - Table row/header/filter sizing, font weight, borders, and density are controlled by tokens below.

  Safe edit rule:
  - For row text weight, edit --pd-table-row-font-weight.
  - For header weight, edit --pd-table-header-font-weight.
  - For table density, edit row/header/filter height and padding tokens.
*/

/* =========================================================
   1) Visual tokens — single source for common UI fixes
   ========================================================= */
:root {
  /* Font weights */
  --pd-font-weight-normal: 400;
  --pd-font-weight-medium: 500;
  --pd-font-weight-semibold: 600;
  --pd-font-weight-bold: 700;
  --pd-font-weight-heavy: 800;

  /* Live data table typography */
  --pd-table-header-font-weight: 800;
  --pd-table-filter-font-weight: 400;
  --pd-table-row-font-weight: 400;
  --pd-table-selected-row-font-weight: 400;
  --pd-table-row-font-size: 13.5px;
  --pd-table-header-font-size: 13px;
  --pd-table-filter-font-size: 13px;
  --pd-table-line-height: 1.55;

  /* Live data table density */
  --pd-table-column-gap: 8px;
  --pd-table-header-height: 40px;
  --pd-table-filter-height: 40px;
  --pd-table-row-height: 40px;
  --pd-table-cell-min-height: 24px;
  --pd-table-cell-padding-x: 14px;
  --pd-table-cell-padding-y: 7px;
  --pd-table-filter-input-height: 30px;
  --pd-table-control-cell-height: 24px;

  /* Borders and backgrounds */
  --pd-table-border-strong: #dbe4f0;
  --pd-table-border-soft: #edf2f7;
  --pd-table-border-cell: #f0f4f8;
  --pd-table-header-bg: linear-gradient(180deg, #eef4ff, #e6eefc);
  --pd-table-filter-bg: #f8fbff;
  --pd-table-row-bg: #ffffff;
  --pd-table-row-bg-even: #fcfdff;
  --pd-table-row-bg-hover: #f3f8ff;
  --pd-table-row-bg-selected: #eaf2ff;
  --pd-table-header-text: #1e3a5f;
  --pd-table-row-text: #172033;
  --pd-table-row-selected-text: #102a56;

  /* Scrollbars */
  --pd-scrollbar-size: 8px;
  --pd-scrollbar-thumb: color-mix(in srgb, var(--grid-primary, #2563eb) 34%, #94a3b8);

  /* Mixed English/Khmer stack: Latin text resolves to Times New Roman, Khmer falls through safely. */
  --pd-khmer-ui-font: "Times New Roman", Times, "Khmer OS Siemreap", "Khmer OS Battambang", "Noto Serif Khmer", "Noto Sans Khmer", serif;
}

/* Dark theme token bridge. Existing dark-theme classes are preserved. */
[data-theme="dark"],
body.dark-theme,
body.midnight-theme,
body.deep-navy-theme,
body.charcoal-theme,
body.dark-emerald-theme {
  --pd-table-border-strong: #334155;
  --pd-table-border-soft: #2a3040;
  --pd-table-border-cell: #202838;
  --pd-table-header-bg: linear-gradient(180deg, #20283a, #1a2131);
  --pd-table-filter-bg: #171d2b;
  --pd-table-row-bg: #151823;
  --pd-table-row-bg-even: #151823;
  --pd-table-row-bg-hover: #1e293b;
  --pd-table-row-bg-selected: #172554;
  --pd-table-header-text: #dbeafe;
  --pd-table-row-text: #e5e7eb;
  --pd-table-row-selected-text: #e5e7eb;
}

/* =========================================================
   2) Live table layout contract
   ========================================================= */
.data-grid-scroll {
  scrollbar-width: thin;
  scrollbar-color: var(--pd-scrollbar-thumb) transparent;
}

.data-grid-scroll::-webkit-scrollbar {
  width: var(--pd-scrollbar-size) !important;
  height: var(--pd-scrollbar-size) !important;
}

.data-grid-scroll::-webkit-scrollbar-track {
  background: transparent !important;
}

.data-grid-scroll::-webkit-scrollbar-thumb {
  border: 2px solid transparent !important;
  border-radius: 999px !important;
  background: var(--pd-scrollbar-thumb) !important;
  background-clip: content-box !important;
}

.data-grid-scroll > .table-header,
.data-grid-scroll > .column-filter-row,
.data-grid-scroll > .item-list > .item-row {
  column-gap: var(--pd-table-column-gap) !important;
  align-items: center !important;
  font-family: var(--pd-khmer-ui-font) !important;
  line-height: var(--pd-table-line-height) !important;
}

/* =========================================================
   3) Header row — bold only for headers
   ========================================================= */
.data-grid-scroll > .table-header {
  top: 0 !important;
  min-height: var(--pd-table-header-height) !important;
  padding: 0 !important;
  background: var(--pd-table-header-bg) !important;
  color: var(--pd-table-header-text) !important;
  border-bottom: 1px solid var(--pd-table-border-strong) !important;
}

.data-grid-scroll > .table-header > span,
.data-grid-scroll > .table-header > .table-header-cell,
.data-grid-scroll > .table-header > .table-control-cell {
  min-height: var(--pd-table-header-height) !important;
  padding: var(--pd-table-cell-padding-y) var(--pd-table-cell-padding-x) !important;
  color: var(--pd-table-header-text) !important;
  font-size: var(--pd-table-header-font-size) !important;
  font-weight: var(--pd-table-header-font-weight) !important;
  font-variation-settings: "wght" var(--pd-table-header-font-weight) !important;
  white-space: nowrap !important;
  border-right: 1px solid var(--pd-table-border-strong) !important;
}

/* =========================================================
   4) Filter row — normal text, consistent inputs
   ========================================================= */
.data-grid-scroll > .column-filter-row {
  top: var(--pd-table-header-height) !important;
  min-height: var(--pd-table-filter-height) !important;
  padding: 0 !important;
  background: var(--pd-table-filter-bg) !important;
  border-bottom: 1px solid var(--pd-table-border-strong) !important;
}

.data-grid-scroll > .column-filter-row > span,
.data-grid-scroll > .column-filter-row > label,
.data-grid-scroll > .column-filter-row > div,
.data-grid-scroll > .column-filter-row > .table-control-cell {
  min-height: var(--pd-table-filter-height) !important;
  padding: 5px 10px !important;
  display: flex !important;
  align-items: center !important;
  font-size: var(--pd-table-filter-font-size) !important;
  font-weight: var(--pd-table-filter-font-weight) !important;
  border-right: 1px solid var(--pd-table-border-soft) !important;
  background: transparent !important;
}

.data-grid-scroll > .column-filter-row input,
.data-grid-scroll > .column-filter-row select {
  min-height: var(--pd-table-filter-input-height) !important;
  height: var(--pd-table-filter-input-height) !important;
  padding: 5px 10px !important;
  font-size: var(--pd-table-filter-font-size) !important;
  font-weight: var(--pd-table-filter-font-weight) !important;
  line-height: 1.35 !important;
}

/* =========================================================
   5) Body rows — normal text, including selected/active rows
   ========================================================= */
.data-grid-scroll > .item-list {
  background: var(--pd-table-row-bg) !important;
}

.data-grid-scroll > .item-list > .item-row {
  min-height: var(--pd-table-row-height) !important;
  padding: 0 !important;
  color: var(--pd-table-row-text) !important;
  background: var(--pd-table-row-bg) !important;
  border-bottom: 1px solid var(--pd-table-border-soft) !important;
  font-weight: var(--pd-table-row-font-weight) !important;
  font-variation-settings: "wght" var(--pd-table-row-font-weight) !important;
}

.data-grid-scroll > .item-list > .item-row > span,
.data-grid-scroll > .item-list > .item-row > div,
.data-grid-scroll > .item-list > .item-row > label,
.data-grid-scroll > .item-list > .item-row > .table-control-cell,
.data-grid-scroll > .item-list > .item-row > span *,
.data-grid-scroll > .item-list > .item-row > div *,
.data-grid-scroll > .item-list > .item-row strong,
.data-grid-scroll > .item-list > .item-row b {
  min-height: var(--pd-table-cell-min-height) !important;
  padding-top: var(--pd-table-cell-padding-y) !important;
  padding-bottom: var(--pd-table-cell-padding-y) !important;
  color: var(--pd-table-row-text) !important;
  font-size: var(--pd-table-row-font-size) !important;
  font-weight: var(--pd-table-row-font-weight) !important;
  font-variation-settings: "wght" var(--pd-table-row-font-weight) !important;
  font-synthesis-weight: none !important;
  line-height: var(--pd-table-line-height) !important;
  border-right: 1px solid var(--pd-table-border-cell) !important;
  background: transparent !important;
}

.data-grid-scroll > .item-list > .item-row:nth-child(even),
.data-grid-scroll > .item-list > .item-row:nth-child(even) > span,
.data-grid-scroll > .item-list > .item-row:nth-child(even) > div {
  background: var(--pd-table-row-bg-even) !important;
}

.data-grid-scroll > .item-list > .item-row:hover,
.data-grid-scroll > .item-list > .item-row:hover > span,
.data-grid-scroll > .item-list > .item-row:hover > div {
  background: var(--pd-table-row-bg-hover) !important;
}

.data-grid-scroll > .item-list > .item-row.is-selected,
.data-grid-scroll > .item-list > .item-row.selected,
.data-grid-scroll > .item-list > .item-row.active,
.data-grid-scroll > .item-list > .item-row.selected-for-download,
.data-grid-scroll > .item-list > .item-row.is-selected > span,
.data-grid-scroll > .item-list > .item-row.selected > span,
.data-grid-scroll > .item-list > .item-row.active > span,
.data-grid-scroll > .item-list > .item-row.selected-for-download > span,
.data-grid-scroll > .item-list > .item-row.is-selected > div,
.data-grid-scroll > .item-list > .item-row.selected > div,
.data-grid-scroll > .item-list > .item-row.active > div,
.data-grid-scroll > .item-list > .item-row.selected-for-download > div,
.data-grid-scroll > .item-list > .item-row.is-selected > span *,
.data-grid-scroll > .item-list > .item-row.selected > span *,
.data-grid-scroll > .item-list > .item-row.active > span *,
.data-grid-scroll > .item-list > .item-row.selected-for-download > span *,
.data-grid-scroll > .item-list > .item-row.is-selected > div *,
.data-grid-scroll > .item-list > .item-row.selected > div *,
.data-grid-scroll > .item-list > .item-row.active > div *,
.data-grid-scroll > .item-list > .item-row.selected-for-download > div * {
  color: var(--pd-table-row-selected-text) !important;
  background: var(--pd-table-row-bg-selected) !important;
  font-weight: var(--pd-table-selected-row-font-weight) !important;
  font-variation-settings: "wght" var(--pd-table-selected-row-font-weight) !important;
}

/* =========================================================
   6) Compact control columns — select / pin / favorite / add / delete
   ========================================================= */
.data-grid-scroll > .table-header > .table-control-cell,
.data-grid-scroll > .column-filter-row > .table-control-cell,
.data-grid-scroll > .item-list > .item-row > .table-control-cell {
  min-height: var(--pd-table-control-cell-height) !important;
  height: var(--pd-table-control-cell-height) !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}

.data-grid-scroll .table-control-cell .row-select-button,
.data-grid-scroll .table-control-cell .select-visible-button,
.data-grid-scroll .table-control-cell .table-add-button,
.data-grid-scroll .table-control-cell .table-clear-button,
.data-grid-scroll .table-control-cell .data-pin-label,
.data-grid-scroll .table-control-cell .star-label,
.data-grid-scroll .table-control-cell .control-placeholder {
  margin: 0 auto !important;
  align-self: center !important;
  justify-self: center !important;
}

/* =========================================================
   7) One-line row mode for dense data
   ========================================================= */
.data-grid-scroll > .item-list > .item-row > span,
.data-grid-scroll > .item-list > .item-row > div {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}

.data-grid-scroll > .table-header > span,
.data-grid-scroll > .table-header > .table-header-cell {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* =========================================================
   8) Developer/debug helper
   Add class="pd-debug-grid" on body temporarily to see cell boundaries.
   ========================================================= */
body.pd-debug-grid .data-grid-scroll > .table-header > *,
body.pd-debug-grid .data-grid-scroll > .column-filter-row > *,
body.pd-debug-grid .data-grid-scroll > .item-list > .item-row > * {
  outline: 1px dashed rgba(37, 99, 235, 0.45) !important;
  outline-offset: -1px !important;
}

/* =========================================================
   2026-05-30 USER UPDATE: Menu 1 row data matches Menu 3
   Menu 3 rows use the compact task-table rhythm from the base
   table layer. Menu 1 previously received a stronger premium
   direct-row override. This final scoped override makes only
   Menu 1/document rows use the same compact, clean row feel.
   ========================================================= */
.library-panel:not(.inspector-mode) .data-grid-scroll > .table-header {
  min-height: 42px !important;
  padding: 0 10px !important;
  background: #D1EFFB !important;
  color: var(--ink, #172033) !important;
  border-bottom: 1px solid var(--line, #d9e2ef) !important;
  box-shadow: none !important;
  font-family: "Times New Roman", "Khmer OS Muol Light", "Khmer OS Siemreap", serif !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  text-transform: uppercase !important;
}

.library-panel:not(.inspector-mode) .data-grid-scroll > .table-header > span,
.library-panel:not(.inspector-mode) .data-grid-scroll > .table-header > .table-header-cell,
.library-panel:not(.inspector-mode) .data-grid-scroll > .table-header > .table-control-cell {
  min-height: 42px !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  color: var(--ink, #172033) !important;
  font-family: inherit !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  line-height: 1.35 !important;
  border-right: 0 !important;
  background: transparent !important;
}

.library-panel:not(.inspector-mode) .data-grid-scroll > .column-filter-row {
  top: 42px !important;
  min-height: 42px !important;
  padding: 6px 10px !important;
  background: #f7faf8 !important;
  border-bottom: 1px solid var(--line, #d9e2ef) !important;
  box-shadow: none !important;
}

.library-panel:not(.inspector-mode) .data-grid-scroll > .column-filter-row > span,
.library-panel:not(.inspector-mode) .data-grid-scroll > .column-filter-row > label,
.library-panel:not(.inspector-mode) .data-grid-scroll > .column-filter-row > div,
.library-panel:not(.inspector-mode) .data-grid-scroll > .column-filter-row > .table-control-cell {
  min-height: 28px !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  border-right: 0 !important;
  background: transparent !important;
}

.library-panel:not(.inspector-mode) .data-grid-scroll > .column-filter-row input,
.library-panel:not(.inspector-mode) .data-grid-scroll > .column-filter-row select {
  min-height: 28px !important;
  height: 28px !important;
  margin-left: -3px !important;
  padding: 4px 3px !important;
  border: 1px solid #d5dfda !important;
  border-radius: 4px !important;
  background: #ffffff !important;
  color: var(--ink, #172033) !important;
  font: inherit !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 1.35 !important;
  text-align: left !important;
  box-shadow: none !important;
}

.library-panel:not(.inspector-mode) .data-grid-scroll > .item-list {
  background: #ffffff !important;
}

.library-panel:not(.inspector-mode) .data-grid-scroll > .item-list > .item-row {
  min-height: 42px !important;
  padding: 5px 10px !important;
  column-gap: 8px !important;
  align-items: center !important;
  color: var(--ink, #172033) !important;
  background: #ffffff !important;
  border-bottom: 1px solid var(--line, #d9e2ef) !important;
  font-family: var(--pd-khmer-ui-font) !important;
  font-size: 13.5px !important;
  font-weight: 400 !important;
  font-variation-settings: "wght" 400 !important;
  line-height: 1.35 !important;
}

.library-panel:not(.inspector-mode) .data-grid-scroll > .item-list > .item-row > span,
.library-panel:not(.inspector-mode) .data-grid-scroll > .item-list > .item-row > div,
.library-panel:not(.inspector-mode) .data-grid-scroll > .item-list > .item-row > label,
.library-panel:not(.inspector-mode) .data-grid-scroll > .item-list > .item-row > span *,
.library-panel:not(.inspector-mode) .data-grid-scroll > .item-list > .item-row > div *,
.library-panel:not(.inspector-mode) .data-grid-scroll > .item-list > .item-row strong,
.library-panel:not(.inspector-mode) .data-grid-scroll > .item-list > .item-row b,
.library-panel:not(.inspector-mode) .data-grid-scroll > .item-list > .item-row small {
  min-height: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  color: var(--ink, #172033) !important;
  font-size: 13.5px !important;
  font-weight: 400 !important;
  font-variation-settings: "wght" 400 !important;
  font-synthesis-weight: none !important;
  line-height: 1.35 !important;
  border-right: 0 !important;
  background: transparent !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}

.library-panel:not(.inspector-mode) .data-grid-scroll > .item-list > .item-row .item-title,
.library-panel:not(.inspector-mode) .data-grid-scroll > .item-list > .item-row .item-title-line {
  min-width: 0 !important;
  width: 100% !important;
  justify-content: flex-start !important;
  text-align: left !important;
}

.library-panel:not(.inspector-mode) .data-grid-scroll > .item-list > .item-row:hover,
.library-panel:not(.inspector-mode) .data-grid-scroll > .item-list > .item-row:hover > span,
.library-panel:not(.inspector-mode) .data-grid-scroll > .item-list > .item-row:hover > div {
  background: #f1f7f5 !important;
}

.library-panel:not(.inspector-mode) .data-grid-scroll > .item-list > .item-row.active,
.library-panel:not(.inspector-mode) .data-grid-scroll > .item-list > .item-row.selected-for-download,
.library-panel:not(.inspector-mode) .data-grid-scroll > .item-list > .item-row.active > span,
.library-panel:not(.inspector-mode) .data-grid-scroll > .item-list > .item-row.selected-for-download > span,
.library-panel:not(.inspector-mode) .data-grid-scroll > .item-list > .item-row.active > div,
.library-panel:not(.inspector-mode) .data-grid-scroll > .item-list > .item-row.selected-for-download > div,
.library-panel:not(.inspector-mode) .data-grid-scroll > .item-list > .item-row.active > span *,
.library-panel:not(.inspector-mode) .data-grid-scroll > .item-list > .item-row.selected-for-download > span *,
.library-panel:not(.inspector-mode) .data-grid-scroll > .item-list > .item-row.active > div *,
.library-panel:not(.inspector-mode) .data-grid-scroll > .item-list > .item-row.selected-for-download > div * {
  color: var(--ink, #172033) !important;
  background: #f1f7f5 !important;
  font-weight: 400 !important;
  font-variation-settings: "wght" 400 !important;
}

.library-panel:not(.inspector-mode) .data-grid-scroll > .item-list > .item-row:nth-child(even),
.library-panel:not(.inspector-mode) .data-grid-scroll > .item-list > .item-row:nth-child(even) > span,
.library-panel:not(.inspector-mode) .data-grid-scroll > .item-list > .item-row:nth-child(even) > div {
  background: #ffffff !important;
}

.library-panel:not(.inspector-mode) .data-grid-scroll > .table-header > :first-child,
.library-panel:not(.inspector-mode) .data-grid-scroll > .column-filter-row > :first-child,
.library-panel:not(.inspector-mode) .data-grid-scroll > .item-list > .item-row > :first-child {
  box-shadow: none !important;
}

.library-panel:not(.inspector-mode) .data-grid-scroll > .item-list > .item-row.pinned-row {
  border-left: 0 !important;
  border-radius: 0 !important;
  background: #fbfcff !important;
  box-shadow: inset 3px 0 0 var(--accent, #2563eb) !important;
}

.library-panel:not(.inspector-mode) .data-grid-scroll > .item-list > .item-row > .table-control-cell,
.library-panel:not(.inspector-mode) .data-grid-scroll > .table-header > .table-control-cell,
.library-panel:not(.inspector-mode) .data-grid-scroll > .column-filter-row > .table-control-cell {
  min-height: 24px !important;
  height: 24px !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}

/* =========================================================
   10) Million-row readiness: virtualized table body
   ========================================================= */
.virtual-row-host {
  position: relative !important;
  min-height: var(--pd-table-row-height, 42px) !important;
  contain: layout paint style !important;
  background: var(--pd-table-row-bg, #ffffff) !important;
}

.virtual-table-body {
  position: relative !important;
  min-height: var(--pd-table-row-height, 42px) !important;
  background: var(--pd-table-row-bg, #ffffff) !important;
  contain: layout paint style !important;
}

.virtual-row-spacer {
  display: block !important;
  pointer-events: none !important;
}

.virtual-row-layer {
  position: absolute !important;
  inset: 0 auto auto 0 !important;
  width: 100% !important;
  pointer-events: none !important;
}

.virtual-row-layer > .item-row {
  position: absolute !important;
  left: 0 !important;
  right: auto !important;
  margin: 0 !important;
  pointer-events: auto !important;
  will-change: transform !important;
  transform-origin: top left !important;
  contain: layout paint style !important;
}

.data-grid-scroll .virtual-row-layer > .item-row {
  min-height: var(--pd-table-row-height, 42px) !important;
  padding: 0 !important;
  color: var(--pd-table-row-text, #172033) !important;
  background: var(--pd-table-row-bg, #ffffff) !important;
  border-bottom: 1px solid var(--pd-table-border-soft, #d9e2ef) !important;
  font-weight: var(--pd-table-row-font-weight, 400) !important;
  font-variation-settings: "wght" var(--pd-table-row-font-weight, 400) !important;
}

.data-grid-scroll .virtual-row-layer > .item-row > span,
.data-grid-scroll .virtual-row-layer > .item-row > div,
.data-grid-scroll .virtual-row-layer > .item-row > label,
.data-grid-scroll .virtual-row-layer > .item-row > .table-control-cell,
.data-grid-scroll .virtual-row-layer > .item-row > span *,
.data-grid-scroll .virtual-row-layer > .item-row > div *,
.data-grid-scroll .virtual-row-layer > .item-row strong,
.data-grid-scroll .virtual-row-layer > .item-row b,
.data-grid-scroll .virtual-row-layer > .item-row small {
  color: var(--pd-table-row-text, #172033) !important;
  font-size: var(--pd-table-row-font-size, 13.5px) !important;
  font-weight: var(--pd-table-row-font-weight, 400) !important;
  font-variation-settings: "wght" var(--pd-table-row-font-weight, 400) !important;
  font-synthesis-weight: none !important;
  line-height: var(--pd-table-line-height, 1.35) !important;
}

.data-grid-scroll .virtual-row-layer > .item-row:nth-child(even),
.data-grid-scroll .virtual-row-layer > .item-row:nth-child(even) > span,
.data-grid-scroll .virtual-row-layer > .item-row:nth-child(even) > div {
  background: var(--pd-table-row-bg-even, #fbfdff) !important;
}

.data-grid-scroll .virtual-row-layer > .item-row:hover,
.data-grid-scroll .virtual-row-layer > .item-row:hover > span,
.data-grid-scroll .virtual-row-layer > .item-row:hover > div {
  background: var(--pd-table-row-bg-hover, #f4f8ff) !important;
}

.data-grid-scroll .virtual-row-layer > .item-row.active,
.data-grid-scroll .virtual-row-layer > .item-row.selected-for-download,
.data-grid-scroll .virtual-row-layer > .item-row.active > span,
.data-grid-scroll .virtual-row-layer > .item-row.selected-for-download > span,
.data-grid-scroll .virtual-row-layer > .item-row.active > div,
.data-grid-scroll .virtual-row-layer > .item-row.selected-for-download > div,
.data-grid-scroll .virtual-row-layer > .item-row.active > span *,
.data-grid-scroll .virtual-row-layer > .item-row.selected-for-download > span *,
.data-grid-scroll .virtual-row-layer > .item-row.active > div *,
.data-grid-scroll .virtual-row-layer > .item-row.selected-for-download > div * {
  color: var(--pd-table-row-text, #172033) !important;
  font-weight: 400 !important;
}

.library-panel:not(.inspector-mode) .data-grid-scroll .virtual-row-layer > .item-row {
  min-height: 42px !important;
  padding: 5px 10px !important;
  column-gap: 8px !important;
  align-items: center !important;
  font-family: var(--pd-khmer-ui-font) !important;
  font-size: 13.5px !important;
  font-weight: 400 !important;
  line-height: 1.35 !important;
}

.library-panel:not(.inspector-mode) .data-grid-scroll .virtual-row-layer > .item-row > span,
.library-panel:not(.inspector-mode) .data-grid-scroll .virtual-row-layer > .item-row > div,
.library-panel:not(.inspector-mode) .data-grid-scroll .virtual-row-layer > .item-row > label,
.library-panel:not(.inspector-mode) .data-grid-scroll .virtual-row-layer > .item-row > span *,
.library-panel:not(.inspector-mode) .data-grid-scroll .virtual-row-layer > .item-row > div *,
.library-panel:not(.inspector-mode) .data-grid-scroll .virtual-row-layer > .item-row strong,
.library-panel:not(.inspector-mode) .data-grid-scroll .virtual-row-layer > .item-row b,
.library-panel:not(.inspector-mode) .data-grid-scroll .virtual-row-layer > .item-row small {
  min-height: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  font-size: 13.5px !important;
  font-weight: 400 !important;
  line-height: 1.35 !important;
}

.virtual-row-host::after {
  content: attr(data-virtual-window) " / " attr(data-virtual-total-rows);
  position: sticky;
  left: 12px;
  bottom: 8px;
  display: inline-flex;
  margin: 8px 0;
  padding: 3px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--panel, #ffffff) 86%, var(--accent, #2563eb));
  color: var(--muted, #64748b);
  font-size: 11px;
  font-weight: 700;
  pointer-events: none;
  opacity: 0.72;
}

.virtual-row-host[data-virtual-total-rows="0"]::after {
  content: none;
}

/* Bulk attachment rename action in Settings */
.settings-action-row.attachment-rename-action {
  display: grid;
  gap: 6px;
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 14px;
  background: rgba(248, 250, 252, 0.86);
}

.settings-action-row.attachment-rename-action small {
  color: #64748b;
  font-size: 12px;
  line-height: 1.45;
}

body.dark-theme .settings-action-row.attachment-rename-action,
body.deep-navy-theme .settings-action-row.attachment-rename-action,
body.charcoal-theme .settings-action-row.attachment-rename-action,
body.dark-emerald-theme .settings-action-row.attachment-rename-action {
  border-color: rgba(148, 163, 184, 0.24);
  background: rgba(15, 23, 42, 0.42);
}

/* Million/billion row paging guard: visible for every menu when database has more rows than loaded. */
.large-data-load-more {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 12px 14px 14px;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--border) 80%, var(--accent) 20%);
  border-radius: 16px;
  background: color-mix(in srgb, var(--panel) 92%, var(--accent) 8%);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
  color: var(--text);
  font-size: 13px;
  font-weight: 800;
}

.large-data-load-more button {
  border: 0;
  border-radius: 999px;
  padding: 9px 14px;
  background: var(--accent);
  color: #fff;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 10px 18px color-mix(in srgb, var(--accent) 26%, transparent);
}

.large-data-load-more button:hover {
  transform: translateY(-1px);
}

/* System status running animation: bars should feel alive even when OS metrics are simulated. */
.system-utilization-bar {
  position: relative;
  overflow: hidden;
  transition: width 520ms ease !important;
}
.system-utilization-bar::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.34), transparent);
  transform: translateX(-120%);
  animation: systemStatusBarSheen 2.2s linear infinite;
}
@keyframes systemStatusBarSheen {
  0% { transform: translateX(-120%); }
  100% { transform: translateX(120%); }
}

/* Menu 3 Document Folder support documents */
#placeholderAttachmentBlock.is-drag-over {
  outline: 2px dashed rgba(37, 99, 235, 0.45);
  outline-offset: 4px;
  border-radius: 14px;
  background: rgba(37, 99, 235, 0.04);
}
.task-support-status {
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.45;
}


/* Menu 3 Assignment Letter button columns */
.assignment-letter-cell {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 34px;
}

.assignment-letter-button,
.assignment-letter-detail-button {
  min-height: 30px;
  padding: 6px 12px;
  border: 1px solid rgba(37, 99, 235, 0.22);
  border-radius: 10px;
  background: #ffffff;
  color: #1e3a8a;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 5px 14px rgba(15, 23, 42, 0.06);
}

.assignment-letter-button-print {
  color: #14532d;
  border-color: rgba(22, 163, 74, 0.24);
}

.assignment-letter-button:hover,
.assignment-letter-detail-button:hover {
  background: #eff6ff;
  border-color: rgba(37, 99, 235, 0.38);
}

.assignment-letter-button-print:hover {
  background: #f0fdf4;
  border-color: rgba(22, 163, 74, 0.42);
}

.assignment-letter-detail-button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}


/* Menu 3 Assignment Letter counts + right panel actions */
.assignment-letter-panel-button {
  min-width: 92px;
}
.task-fields input[data-task-column="saveAssignmentLetter"],
.task-fields input[data-task-column="printAssignmentLetter"] {
  text-align: center;
  font-weight: 800;
  color: var(--primary, #2563eb);
}