@layer components {
/* ===== components layer — components-extra.css ===== */
/* ═══════════════════════════════════════════════════════════
   components-extra.css — Module-specific Components
   BACFUTURES OPC CRM · Conv 20 · ITCSS Layer: Components (extended)
   Split from components.css to keep each file ≤ 1000 lines.
   ═══════════════════════════════════════════════════════════ */

/* ═══ KPI PROGRESS ═══ */
.kpi-progress { display: flex; flex-direction: column; gap: var(--space-0); }
.kpi-progress__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--font-size-sm);
}
.kpi-progress__track {
  height: var(--space-1);
  background: var(--color-surface-alt);
  border-radius: var(--radius-full);
  overflow: hidden;
}
.kpi-progress__fill {
  height: 100%;
  border-radius: var(--radius-full);
  transition: width var(--transition-slow);
}

/* ═══ PIPELINE BAR ═══ */
.pipeline-bar { display: flex; align-items: center; gap: var(--space-1); }
.pipeline-track {
  flex: 1;
  height: var(--space-1);
  background: var(--color-surface-alt);
  border-radius: var(--radius-full);
  overflow: hidden;
}
.pipeline-fill {
  width: var(--fill, 0%);
  height: 100%;
  border-radius: var(--radius-full);
  transition: width var(--transition-slow);
}
.pipeline-fill--lead { background: var(--pipeline-lead); }
.pipeline-fill--prospect { background: var(--pipeline-prospect); }
.pipeline-fill--kyc { background: var(--pipeline-kyc); }
.pipeline-fill--investor { background: var(--pipeline-investor); }

/* ═══ TIMELINE ═══ */
.timeline-item {
  display: flex;
  gap: var(--space-2);
  padding-bottom: var(--space-2);
  border-left: 2px solid var(--color-border);
  padding-left: var(--space-2);
  position: relative;
}
.timeline-item:last-child { border-left-color: transparent; }
.timeline-item__marker {
  position: absolute;
  left: calc(-1 * var(--activity-marker-size) / 2 - 1px);
  top: var(--space-1);
}

/* ═══ CHART OF ACCOUNTS (COA) ═══ */
.coa-node {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-0) var(--space-1);
}
.coa-node__code {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-muted);
  min-width: var(--space-6);
}
.coa-entry__icon { font-size: var(--font-size-lg); color: var(--color-text-muted); flex-shrink: 0; }

/* ═══ TICKET MESSAGES ═══ */
.ticket-messages { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-2); }
.ticket-msg { display: flex; flex-direction: column; gap: var(--space-0); }
.ticket-msg--inbound { align-items: flex-start; }
.ticket-msg--outbound { align-items: flex-end; }
.ticket-msg__header {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}
.ticket-msg__label { font-weight: var(--font-weight-semibold); color: var(--color-text); }
.ticket-msg__bubble {
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius);
  background: var(--color-surface-alt);
  font-size: var(--font-size-base);
  color: var(--color-text);
  max-width: 80%;
}
.ticket-msg--inbound .ticket-msg__bubble { background: var(--color-surface-alt); }
.ticket-msg--outbound .ticket-msg__bubble { background: var(--color-info-bg); border: 1px solid var(--color-info); }
.ticket-msg__body { font-size: var(--font-size-base); color: var(--color-text); }
.ticket-msg__input { width: 100%; min-height: var(--size-3xl); }
.ticket-reply-area { display: flex; flex-direction: column; gap: var(--space-1); }
.ticket-meta-row { display: flex; align-items: center; gap: var(--space-2); font-size: var(--font-size-sm); color: var(--color-text-muted); }

/* ═══ COMPLIANCE ═══ */
.compliance-icon-text { display: flex; align-items: center; gap: var(--space-1); }
.compliance-section-row {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) 0;
  font-weight: var(--font-weight-semibold);
}

/* ═══ SETTINGS ═══ */
.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-border);
}
.settings-row:last-child { border-bottom: none; }

/* ═══ DOCS (markdown rendering) ═══ */
.docs-editor { width: 100%; min-height: 60vh; line-height: 1.5; }
.docs-article { max-width: var(--width-5xl); margin: 0 auto; }
.docs-article h1 { font-size: var(--font-size-2xl); font-weight: var(--font-weight-bold); margin-bottom: var(--space-2); }
.docs-article h2 { font-size: var(--font-size-xl); font-weight: var(--font-weight-semibold); margin: var(--space-3) 0 var(--space-1); }
.docs-article h3 { font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); margin: var(--space-2) 0 var(--space-1); }
.docs-article p { margin-bottom: var(--space-1); line-height: var(--line-height-relaxed); }
.docs-article ul, .docs-article ol { padding-left: var(--space-3); margin-bottom: var(--space-2); }
.docs-article li { margin-bottom: var(--space-0); }
.docs-article table { border: 1px solid var(--color-border); border-radius: var(--radius); margin-bottom: var(--space-2); }
.docs-article th { background: var(--color-surface-alt); font-weight: var(--font-weight-semibold); }
.docs-article td, .docs-article th { border: 1px solid var(--color-border); }
.docs-list { padding-left: var(--space-3); margin-bottom: var(--space-2); }
.docs-hr { border: none; border-top: 1px solid var(--color-border); margin: var(--space-3) 0; }
.docs-code {
  display: block;
  background: var(--color-surface-alt);
  padding: var(--space-2);
  border-radius: var(--radius);
  overflow-x: auto;
  font-family: var(--font-family-mono);
  font-size: var(--font-size-sm);
  margin-bottom: var(--space-2);
}
.docs-code-inline {
  background: var(--color-surface-alt);
  padding: var(--space-px) var(--space-1);
  border-radius: var(--radius-sm);
  font-family: var(--font-family-mono);
  font-size: var(--font-size-sm);
}
.docs-quote {
  border-left: var(--border-accent) solid var(--color-primary);
  padding-left: var(--space-2);
  color: var(--color-text-muted);
  font-style: italic;
  margin-bottom: var(--space-2);
}
.docs-table { width: 100%; border-collapse: collapse; margin-bottom: var(--space-2); }
.docs-table th, .docs-table td { border: 1px solid var(--color-border); padding: var(--space-1) var(--space-2); }

/* ═══ PUBLIC PORTAL ═══ */
.public-row-alt:nth-child(even) { background: var(--color-surface-alt); }
.public-section-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-border);
}
.public-tier-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-2);
  text-align: center;
}
.public-tier-card__rate {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary-text);
}
.public-code-block {
  background: var(--color-surface-alt);
  padding: var(--space-2);
  border-radius: var(--radius);
  font-family: var(--font-family-mono);
  font-size: var(--font-size-sm);
  overflow-x: auto;
}
.public-terms-content {
  white-space: pre-wrap;
  line-height: var(--line-height-relaxed);
  padding: var(--space-2);
  background: var(--color-bg);
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
}
.public-fee-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--space-2);
}
.public-fee-table th, .public-fee-table td {
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--color-border);
}
.public-fee-table th { background: var(--color-surface-alt); font-weight: var(--font-weight-semibold); }

/* ═══ KYC ═══ */
.kyc-doc-image {
  width: var(--size-3xl);
  height: var(--size-3xl);
  object-fit: cover;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
}

/* ═══ WALLET ═══ */
.wallet-contact-btn {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-height: var(--touch-target);
  width: 100%;
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  cursor: pointer;
  text-align: left;
  transition: background var(--transition), border-color var(--transition);
}
.wallet-contact-btn { max-width: var(--width-4xl); }
.wallet-contact-btn:hover { background: var(--color-primary-light); border-color: var(--color-primary); }
.wallet-page__body,
.wallet-page__content { display: grid; gap: var(--space-2); }
.wallet-page__search { width: 100%; }
.wallet-page__results {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--width-2xl)), 1fr));
  gap: var(--space-1);
}
.wallet-page__contact {
  display: flex;
  align-items: baseline;
  gap: var(--space-1);
  flex-wrap: wrap;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface-alt);
}
.wallet-page__contact-label {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}
.wallet-page__contact-name { font-weight: var(--font-weight-semibold); }
.wallet-page__cards {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-2);
}
.wallet-page__card { width: 100%; min-width: 0; }
.wallet-page__card-body {
  display: grid;
  align-content: start;
  gap: var(--space-2);
}
.wallet-page__card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}
.wallet-page__history { min-width: 0; }
.wallet-page__history-header { flex-wrap: wrap; }
.wallet-page__history-filter {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin-left: auto;
}
.wallet-page__history-filter .form-field__label { white-space: nowrap; }
.wallet-page__history-filter .form-field__input { min-width: var(--width-lg); }
.contacts-financial-summary {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--width-md)), 1fr));
}

/* ═══ CONTRACT PREVIEW ═══ */
.contract-preview {
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  font-size: var(--font-size-base);
  line-height: var(--line-height-relaxed);
  max-height: var(--width-3xl);
  overflow-y: auto;
}

/* ═══ SUMMARY ROW (between-row: label ← → value) ═══ */
.summary-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-1) 0;
  border-bottom: 1px solid var(--color-border);
}
.summary-row:last-child { border-bottom: none; }
.summary-row--md { font-size: var(--font-size-base); font-weight: var(--font-weight-medium); }
.summary-row--sm { font-size: var(--font-size-sm); }

/* ═══ DETAIL ROW (horizontal row with icon + content) ═══ */
.detail-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2);
  border-bottom: 1px solid var(--color-border);
}
.detail-row:last-child { border-bottom: none; }

/* ═══ TREE NODE (org chart, COA indentation) ═══ */
.tree-node { margin-bottom: var(--space-0); }
.tree-node--depth-1 { margin-left: var(--space-3); }
.tree-node--depth-2 { margin-left: calc(var(--space-3) * 2); }
.tree-node--depth-3 { margin-left: calc(var(--space-3) * 3); }
.tree-node--depth-4 { margin-left: calc(var(--space-3) * 4); }
.tree-node--depth-5 { margin-left: calc(var(--space-3) * 5); }

/* ═══ FILTER BAR ═══ */
.filter-bar {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  flex-wrap: wrap;
  margin-bottom: var(--space-2);
}

/* ═══ DASHBOARD APPROVAL ═══ */
.dash-approval-btn {
  display: flex;
  align-items: center;
  gap: var(--space-0);
  padding: var(--space-0) var(--space-1);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  cursor: pointer;
  font-size: var(--font-size-sm);
  transition: all var(--transition);
}
.dash-approval-btn:hover { background: var(--color-surface-alt); }

/* ═══ NOTIFICATIONS PAGE ═══ */
.notif-search-input { flex: 0 0 var(--width-xl); }
.notif-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-1);
  padding: var(--space-2);
  border-bottom: 1px solid var(--color-border);
  cursor: pointer;
  transition: background var(--transition);
}
.notif-item:last-child { border-bottom: none; }
.notif-item:hover { background: var(--color-surface-alt); }
.notif-item--unread { background: var(--color-info-bg); }
.notif-item > .activity-marker { margin: var(--space-0) var(--space-0) 0 0; }
.notif-item__time { font-size: var(--font-size-xs); color: var(--color-text-muted); }
.notif-item__actions { display: flex; gap: var(--space-0); }
.notif-dropdown-body { padding: var(--space-1); }
.notif-dropdown-row { display: flex; align-items: center; gap: var(--space-1); }
.notif-dropdown-title { font-weight: var(--font-weight-semibold); font-size: var(--font-size-base); }
.notif-dropdown-title--bold { font-weight: var(--font-weight-bold); }
.notif-dropdown-time { font-size: var(--font-size-xs); color: var(--color-text-muted); }

/* ═══ DROPDOWN — Component chuẩn, tái sử dụng toàn app ═══ */
.dropdown { position: relative; display: inline-block; }
.dropdown__menu {
  position: absolute;
  top: 100%;
  right: 0;
  min-width: var(--width-md);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  z-index: 200;
  display: none;
}
.dropdown__menu--open { display: block; }
.dropdown__item {
  display: flex; align-items: center; gap: var(--space-1);
  width: 100%; padding: var(--space-1) var(--space-2);
  background: none; border: none;
  color: var(--color-text); cursor: pointer;
  font-size: var(--font-size-sm);
  text-align: left;
  transition: background var(--transition);
}
.dropdown__item:hover { background: var(--color-surface-alt); }
.dropdown__item:first-child { border-radius: var(--radius) var(--radius) 0 0; }
.dropdown__item:last-child { border-radius: 0 0 var(--radius) var(--radius); }

/* ═══ CHECKBOX — Form checkbox chuẩn ═══ */
.checkbox {
  display: flex; align-items: center; gap: var(--space-0);
  cursor: pointer;
  font-size: var(--font-size-sm);
  color: var(--color-text);
}
.checkbox input { width: var(--size-sm); height: var(--size-sm); cursor: pointer; }

/* ═══ CARD COLLAPSIBLE — toggle trên card header (dùng cho Profile form) ═══ */
.card--collapsible .card__header { cursor: pointer; user-select: none; }
.card--collapsible .card__toggle { font-size: var(--font-size-sm); transition: transform var(--transition); }
.card--collapsed .card__body { display: none; }
.card--collapsed .card__toggle { transform: rotate(-90deg); }

/* ═══ KYC CARD PAIRS — document slots ═══ */
.kyc-doc-slot {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-1);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-0);
  text-align: center;
  min-height: var(--width-sm);
  justify-content: flex-start;
}
.kyc-doc-preview { width: 100%; }
.kyc-doc-placeholder {
  width: 100%;
  min-height: var(--size-3xl);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed var(--color-border);
  border-radius: var(--radius);
  color: var(--color-text-muted);
}
.kyc-doc-placeholder i { font-size: var(--font-size-xl); }
.kyc-doc-placeholder--empty {
  flex-direction: column;
  gap: var(--space-0);
  padding: var(--space-1);
}
.detail-kyc-section { margin-bottom: var(--space-3); }
.detail-kyc-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.detail-kyc-card { min-width: 0; }
.detail-kyc-card .card__header { justify-content: space-between; gap: var(--space-1); }
.detail-kyc-card .card__title { min-width: 0; font-size: var(--font-size-sm); }
.detail-kyc-card .card__body { display: flex; flex-direction: column; gap: var(--space-1); }
.detail-kyc-card__upload { flex: 0 0 var(--control-height); }
.detail-kyc-card__preview {
  display: flex;
  width: 100%;
  aspect-ratio: 16 / 9;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--color-surface-alt);
}
.detail-kyc-card__preview-link { display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; }
.detail-kyc-card__image { display: block; width: 100%; height: 100%; object-fit: contain; }
.detail-kyc-card__file,
.detail-kyc-card__empty,
.detail-kyc-card__preview-message {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}
.detail-kyc-card__empty--warning { color: var(--color-warning-text); }
.detail-kyc-card__preview-message--warning { color: var(--color-warning-text); }
.detail-kyc-card__file { flex-direction: column; width: 100%; height: 100%; }
.detail-kyc-card__file i,
.detail-kyc-card__empty i { font-size: var(--font-size-xl); }
.detail-kyc-card__meta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-0) var(--space-1);
  min-height: var(--touch-target);
}
.detail-kyc-card__details {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-0);
  grid-column: 1 / -1;
}
.detail-kyc-card__uploaded { color: var(--color-text-muted); font-size: var(--font-size-xs); }
.detail-kyc-card__meta .badge { grid-column: 1 / -1; justify-self: start; }
.detail-kyc-card__details .kyc-history-btn { flex: 0 0 auto; padding: 0 var(--space-0); font-size: var(--font-size-xs); }
.kyc-history__timeline { display: flex; flex-direction: column; padding-left: var(--space-2); }
.kyc-history__item {
  position: relative;
  display: flex;
  gap: var(--space-1);
  padding: 0 0 var(--space-2) var(--space-2);
  border-left: 1px solid var(--color-border);
}
.kyc-history__item:last-child { padding-bottom: 0; border-left-color: transparent; }
.kyc-history__marker {
  position: absolute;
  top: 0;
  left: calc(-1 * var(--activity-marker-size) / 2 - .var(--space-0));
}
.kyc-history__marker--verify { --activity-marker-color: var(--color-success); }
.kyc-history__marker--reject { --activity-marker-color: var(--color-danger); }
.notification-event__header { display: flex; align-items: center; gap: var(--space-1); }
.kyc-history__content { display: flex; min-width: 0; flex-direction: column; gap: var(--space-0); }
.kyc-history__heading { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-1); }
.kyc-history__file { overflow-wrap: anywhere; font-size: var(--font-size-sm); }
.kyc-history__note { margin: var(--space-1) 0 0; }
.detail-kyc-card-skeleton { height: var(--width-sm); }

/* ═══ DIRTY SAVE — Save bar ẩn/hiện ═══ */
.dirty-save--hidden { display: none; }

/* ═══ RESPONSIVE — Module components (≤768px) ═══ */
@media (max-width: 768px) {
  .detail-kyc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .settings-row { flex-direction: column; align-items: flex-start; gap: var(--space-1); }
  .filter-bar { flex-direction: column; align-items: stretch; }
  .notif-search-input { flex: 1; }
  .compliance-section-row { flex-direction: column; align-items: flex-start; gap: var(--space-1); }
  .wallet-page__history-header { align-items: flex-start; }
  .wallet-page__history-filter { width: 100%; margin-left: 0; }
  .wallet-page__history-filter .form-field__input { flex: 1; min-width: 0; }
}

@media (max-width: 1100px) and (min-width: 769px) {
  .detail-kyc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

}

/* HR career ladder (contact profile → HR Info) */
.hr-ladder { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-2); }
.hr-ladder__step { padding: var(--space-2); border: 1px solid var(--color-border); border-radius: var(--radius); opacity: 0.65; }
.hr-ladder__step--done { opacity: 0.9; }
.hr-ladder__step--current { opacity: 1; border-color: var(--color-primary); box-shadow: 0 0 0 1px var(--color-primary); }
@media (max-width: 768px) { .hr-ladder { grid-template-columns: repeat(2, 1fr); } }

/* ═══ SHARED: METER (drawdown, ký quỹ, hạn mức) ═══ */
.meter { display: flex; flex-direction: column; gap: var(--space-0); }
.meter__head { display: flex; justify-content: space-between; align-items: center; }
.meter__track {
  position: relative;
  height: var(--meter-height);
  background: var(--color-surface-alt);
  border-radius: var(--radius-full);
}
.meter__fill {
  width: var(--fill, 0%);
  height: 100%;
  border-radius: var(--radius-full);
  background: var(--risk-normal);
  transition: width var(--transition-slow);
}
.meter__fill--warning { background: var(--risk-warning); }
.meter__fill--critical { background: var(--risk-critical); }
.meter__mark {
  position: absolute;
  top: calc(var(--space-px) * -1);
  bottom: calc(var(--space-px) * -1);
  left: var(--at, 0%);
  width: var(--space-px);
  background: var(--meter-mark);
}

/* ═══ SHARED: FORM ROW (biểu mẫu ngang) ═══ */
.form-row { display: flex; flex-wrap: wrap; gap: var(--space-1); align-items: center; }
.form-row > .form-field__input, .form-row > input, .form-row > select { flex: 1 1 var(--field-min-width); min-width: 0; }
.form-row--compact > input, .form-row--compact > select { flex: 0 1 auto; width: auto; max-width: var(--width-sm); }

/* ═══ SECURITY: HR permission builder ═══ */
.hr-rules__role { max-width: var(--width-md); }
.hr-rules__section {
  margin-top: var(--space-2);
  padding: var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}
.hr-rules__section-title {
  margin: 0 0 var(--space-2);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
}
.hr-rules__resource {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}
.hr-rules__resource-mode,
.hr-rules__resource-name {
  min-height: var(--control-height);
  display: inline-flex;
  align-items: center;
  padding: 0 var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface-alt);
}
.hr-rules__resource-mode { color: var(--color-text-muted); }
.hr-rules__note { margin: var(--space-1) 0 0; }
.hr-rules__rows { display: grid; gap: var(--space-1); }
.hr-rules__row {
  display: grid;
  grid-template-columns: minmax(var(--width-sm), 0.8fr) minmax(var(--field-min-width), 1.4fr) minmax(var(--width-xs), 0.8fr) auto;
  align-items: end;
  gap: var(--space-1);
  padding: var(--space-1);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
}
.hr-rules__access { display: flex; align-items: center; gap: var(--space-2); min-height: var(--control-height); }
.hr-rules__row .form-field { margin-bottom: 0; min-width: 0; }

/* ═══ SHARED: CARD PADDED STACK ═══ */
.card--stack { display: grid; gap: var(--space-2); padding: var(--space-3); }

/* ═══ SHARED: SIMPLE TABLE (bảng tĩnh trong card, cùng ngôn ngữ với data-table) ═══ */
.table { width: 100%; border-collapse: collapse; }
.table th { text-align: left; font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--color-text-muted); }
.table th, .table td { padding: var(--space-1) var(--space-2); border-bottom: 1px solid var(--color-border); }
.table tbody tr:last-child td { border-bottom: none; }
.table tbody tr:hover { background: var(--color-surface-alt); }

.btn--disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; }

@media (max-width: 768px) {
  .hr-rules__row { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
  .hr-rules__group-wrap, .hr-rules__permission-wrap { grid-column: 1 / -1; }
  .hr-rules__access-field { grid-column: 1; }
  .hr-rules__row > .btn { grid-column: 2; grid-row: 3; }
}