@layer components {
/* ===== components layer — components.css ===== */
/* ═══════════════════════════════════════════════════════════
   components.css — 16 BEM Components + States + Skeleton + Responsive Tables
   BACFUTURES OPC CRM · Conv 20 · ITCSS Layer: Components
   Flat selectors · CSS variables only · No inline styles
   ═══════════════════════════════════════════════════════════ */

/* ═══ 1. CARD ═══ */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: box-shadow var(--transition), border-color var(--transition);
}
.card:hover {
  box-shadow: var(--shadow-md);
}
.card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-border);
}
.card__title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
}
.card__body { padding: var(--space-3); }
.card--primary { border-left: var(--border-accent) solid var(--color-primary); }
.card--danger { border-left: var(--border-accent) solid var(--color-danger); }
.card--info { border-left: var(--border-accent) solid var(--color-info); }
.card--warning { border-left: var(--border-accent) solid var(--color-warning); }
.card--clickable { cursor: pointer; transition: box-shadow var(--transition), border-color var(--transition); }
.card--clickable:hover { border-color: var(--color-primary); box-shadow: var(--shadow-md); }

/* ═══ 2. BADGE ═══ */
.badge {
  display: inline-flex;
  align-items: center;
  padding: var(--space-px) var(--space-1);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  border-radius: var(--radius-full);
  line-height: var(--line-height);
  white-space: nowrap;
}
.badge--success { background: var(--color-success-bg); color: var(--color-success-text); }
.badge--danger { background: var(--color-danger-bg); color: var(--color-danger-text); }
.badge--warning { background: var(--color-warning-bg); color: var(--color-warning-text); }
.badge--info { background: var(--color-info-bg); color: var(--color-info-text); }
.badge--neutral { background: var(--color-surface-alt); color: var(--color-text-muted); }
.badge__dot { width: var(--space-1); height: var(--space-1); border-radius: var(--radius-full); background: currentColor; display: inline-block; }

/* ═══ ACTIVITY MARKERS ═══ */
.activity-marker {
  display: inline-block;
  flex: 0 0 var(--activity-marker-size);
  width: var(--activity-marker-size);
  height: var(--activity-marker-size);
  border-radius: var(--radius-full);
  background: var(--activity-marker-color, var(--activity-marker-system));
  box-shadow: 0 0 0 2px var(--color-surface);
}
.activity-marker--default,
.activity-marker--system { --activity-marker-color: var(--activity-marker-system); }
.activity-marker--communication { --activity-marker-color: var(--activity-marker-communication); }
.activity-marker--finance { --activity-marker-color: var(--activity-marker-finance); }
.activity-marker--kyc { --activity-marker-color: var(--activity-marker-kyc); }
.activity-marker--compliance,
.activity-marker--urgent { --activity-marker-color: var(--activity-marker-compliance); }
.activity-marker--workflow { --activity-marker-color: var(--activity-marker-workflow); }
.activity-marker--success { --activity-marker-color: var(--color-success); }
.activity-marker--danger { --activity-marker-color: var(--color-danger); }
.badge__icon { font-size: var(--font-size-sm); }
.badge--count { min-width: var(--size-sm); height: var(--size-sm); padding: 0 var(--space-0); justify-content: center; }

/* ═══ 3. STAT ═══ */
.stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-0);
}
.stat__label {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  font-weight: var(--font-weight-medium);
}
.stat__value {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
}
.stat__change {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
}
.stat__change--up { color: var(--color-success-text); }
.stat__change--down { color: var(--color-danger-text); }

/* ═══ 4. CHART ═══ */
.chart {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.chart svg { max-width: 100%; height: auto; }
.chart__legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-2);
  justify-content: center;
  padding: var(--space-1) 0;
}
.chart__legend-item {
  display: flex;
  align-items: center;
  gap: var(--space-0);
  font-size: var(--font-size-sm);
  color: var(--color-text);
}
.chart__legend-dot {
  display: inline-block;
  width: var(--size-xs);
  height: var(--size-xs);
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}

/* ═══ 5. DATA-TABLE ═══ */
.data-table {
  width: 100%;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-xs);
}
.data-table__toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-border);
  flex-wrap: wrap;
}
.data-table__search { flex: 0 0 var(--width-lg); position: relative; }
.data-table__search-clear {
  position: absolute;
  right: var(--space-1);
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  padding: var(--space-0);
  display: none;
}
.data-table__search-clear:hover { color: var(--color-text); }
.data-table__search--has-text .data-table__search-clear { display: block; }
.data-table__filter { flex: 1 1 var(--width-sm); max-width: var(--width-md); }
.data-table__element { width: 100%; border-collapse: collapse; }
.data-table__actions {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin-left: auto;
}
.data-table__scroll { overflow-x: auto; }
.data-table__sort-button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-0);
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  text-transform: inherit;
  letter-spacing: inherit;
  cursor: pointer;
}
.data-table__sort-button:hover { color: var(--color-primary-text); }
.data-table__sort-button:focus-visible { outline: var(--focus-ring-width) solid var(--color-primary); outline-offset: var(--space-px); }
.data-table__sort { display: inline-block; font-size: var(--font-size-xs); opacity: 0.6; }
.data-table__sort::after { content: '▲'; }
.data-table__header th[data-sortable].data-table__header--desc .data-table__sort::after { content: '▼'; }
.data-table__sort-button:hover .data-table__sort { opacity: 1; }
.data-table__header th {
  background: var(--color-surface-alt);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
  cursor: default;
  border-bottom: 1px solid var(--color-border);
}
.data-table__header th[data-sortable] { cursor: default; }
.data-table__row { border-bottom: 1px solid var(--color-border); transition: background var(--transition); }
.data-table__row:last-child { border-bottom: none; }
.data-table__row:hover { background: var(--color-surface-alt); }
.data-table__row:focus-visible { outline: var(--focus-ring-width) solid var(--color-primary); outline-offset: calc(-1 * var(--focus-ring-width)); }
.data-table__row--selected { background: var(--color-primary-light); }
.data-table__row--selected:hover { background: var(--color-primary-light); }
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.data-table__pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  border-top: 1px solid var(--color-border);
  font-size: var(--font-size-sm);
}
.data-table--striped .data-table__row:nth-child(even) { background: var(--color-surface-alt); }
.data-table--striped .data-table__row:nth-child(even):hover { background: var(--color-border); }
.data-table--compact th, .data-table--compact td { padding: var(--space-0) var(--space-1); }
.data-table--selectable .data-table__row { cursor: pointer; }

/* ═══ 6. FORM-FIELD ═══ */
.form-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-0);
  margin-bottom: var(--space-2);
}
.form-field__label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
}
.form-field__label--required::after { content: ' *'; color: var(--color-danger-text); }
.form-field--required .form-field__label::after { content: ' *'; color: var(--color-danger-text); }
.form-field__input {
  transition: border-color var(--transition), box-shadow var(--transition);
  outline: none;
}
.form-field__input:focus,
.form-field__input:focus-within {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 var(--focus-ring-width) var(--color-primary-light);
}
.form-field__input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.form-field__input-wrap input { padding-right: var(--space-5); }
.form-field__toggle {
  position: absolute;
  right: var(--space-1);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text-muted);
  padding: var(--space-0);
}
.form-field__toggle:hover { color: var(--color-text); }
.form-field__error {
  font-size: var(--font-size-sm);
  color: var(--color-danger-text);
}
.form-field__hint {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}
.form-field--error input, .form-field--error select, .form-field--error textarea {
  border-color: var(--color-danger);
}
.form-field--error input:focus, .form-field--error select:focus, .form-field--error textarea:focus {
  box-shadow: 0 0 0 var(--focus-ring-width) var(--color-danger-bg);
}
.form__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-1);
  margin-top: var(--space-2);
}

/* ═══ 7. BTN ═══ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-0);
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: all var(--transition);
  white-space: nowrap;
  flex-shrink: 0;
  text-decoration: none;
  line-height: var(--line-height);
  position: relative;
  overflow: hidden;
}
.btn:hover { background: var(--color-surface-hover); border-color: var(--color-border-strong); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn--primary { background: var(--color-primary-solid); border-color: var(--color-primary-solid); color: var(--color-text-inverse); }
.btn--primary:hover { background: var(--color-primary-active); border-color: var(--color-primary-active); box-shadow: var(--shadow-sm); }
.btn--secondary { background: var(--color-surface); border-color: var(--color-border-strong); }
.btn--secondary:hover { background: var(--color-surface-alt); }
.btn--danger { background: var(--color-danger); border-color: var(--color-danger); color: var(--color-text-inverse); }
.btn--danger:hover { background: var(--color-danger); opacity: 0.9; box-shadow: var(--shadow-sm); }
.btn--ghost { background: transparent; border-color: transparent; color: var(--color-primary-text); }
.btn--ghost:hover { background: var(--color-primary-light); }
.btn--sm { padding: var(--space-0) var(--space-1); font-size: var(--font-size-sm); }
.btn--icon { padding: var(--space-1); width: var(--control-height); height: var(--control-height); }
.btn--left { justify-content: flex-start; }
.btn--loading { cursor: wait; pointer-events: none; opacity: 0.7; }
.btn--loading::after {
  content: '';
  position: absolute;
  width: var(--size-sm);
  height: var(--size-sm);
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
  margin-left: var(--space-1);
}

/* ═══ 8. MODAL ═══ */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: var(--overlay-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-modal);
  padding: var(--space-2);
  animation: fadeIn var(--transition);
  backdrop-filter: blur(var(--blur-sm));
}
.modal {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  width: 100%;
  max-width: var(--width-4xl);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  animation: slideUp var(--transition-slow);
}
.modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-border);
}
.modal__title { font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); }
.modal__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--control-height);
  height: var(--control-height);
  background: none;
  border: none;
  font-size: var(--font-size-lg);
  color: var(--color-text-muted);
  cursor: pointer;
  padding: 0;
  border-radius: var(--radius);
  transition: all var(--transition);
}
.modal__close:hover { color: var(--color-danger-text); background: var(--color-danger-bg); }
.modal__body { padding: var(--space-3); overflow-y: auto; flex: 1; }
.modal__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  border-top: 1px solid var(--color-border);
}
.modal--sm { max-width: var(--width-2xl); }
.modal--md { max-width: var(--width-4xl); }
.modal--lg { max-width: var(--width-5xl); }

/* ═══ 9. TOAST ═══ */
.toast-container {
  position: fixed;
  bottom: var(--space-3);
  right: var(--space-3);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  max-width: var(--width-xl);
}
.toast {
  display: flex;
  align-items: flex-start;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  box-shadow: var(--shadow-md);
  cursor: default;
  animation: slideInRight var(--transition-slow);
}
.toast__body { flex: 1; display: flex; align-items: flex-start; gap: var(--space-1); }
.toast__icon { font-size: var(--font-size-lg); flex-shrink: 0; }
.toast__message { font-size: var(--font-size-base); color: var(--color-text); }
.toast--success { background: var(--color-success-bg); border-color: var(--color-success); }
.toast--error { background: var(--color-danger-bg); border-color: var(--color-danger); }
.toast--info { background: var(--color-info-bg); border-color: var(--color-info); }
.toast--urgent { background: var(--color-danger); border-color: var(--color-danger); color: var(--color-text-inverse); font-weight: var(--font-weight-bold); }
.toast--urgent .toast__message { color: var(--color-text-inverse); }
.toast--hide { opacity: 0; transition: opacity 200ms ease; }

/* ═══ 10. TABS ═══ */
.tabs {
  display: flex;
  gap: var(--space-0);
  border-bottom: 2px solid var(--color-border);
  flex-wrap: wrap;
}
.tabs__tab {
  padding: var(--space-1) var(--space-2);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: all var(--transition);
  margin-bottom: -2px;
}
.tabs__tab:hover { color: var(--color-text); }
.tabs__tab--active { color: var(--color-primary-text); border-bottom-color: var(--color-primary); font-weight: var(--font-weight-semibold); }

/* ═══ DETAIL PAGE LAYOUT ═══ */
.detail-page { max-width: 100%; }
.detail-header {
  position: sticky;
  top: var(--topbar-height);
  z-index: calc(var(--z-topbar) - 1);
  margin-bottom: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
}
.detail-header__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}
.detail-avatar {
  display: flex;
  flex: 0 0 var(--size-2xl);
  align-items: center;
  justify-content: center;
  width: var(--size-2xl);
  height: var(--size-2xl);
  border-radius: var(--radius-full);
  background: var(--color-primary-light);
  color: var(--color-primary-text);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
}
.detail-header__identity { flex: 1; min-width: var(--width-md); }
.detail-header__name { font-size: var(--font-size-xl); font-weight: var(--font-weight-bold); }
.detail-header__meta { margin-top: var(--space-px); }
.detail-header__contact-id { font-weight: var(--font-weight-medium); white-space: nowrap; }
.detail-header__contact-info::before { content: ' · '; }
.detail-header__badges { display: flex; flex-wrap: wrap; gap: var(--space-0); }
.detail-header .detail-header__compact-actions { display: none; }
.detail-header__summary,
.detail-header__toolbar { margin-top: var(--space-2); }
.detail-header-spacer { height: 0; }
.detail-page--scrolled .detail-header {
  display: flex;
  height: var(--detail-header-compact-height);
  align-items: center;
  padding-top: var(--space-1);
  padding-bottom: var(--space-1);
}
.detail-page--scrolled .detail-header-spacer {
  height: max(0px, calc(var(--detail-header-expanded-height, var(--detail-header-compact-height)) - var(--detail-header-compact-height)));
}
.detail-page--scrolled .detail-header__summary,
.detail-page--scrolled .detail-ops-summary { display: none; }
.detail-page--scrolled .detail-header__top { width: 100%; flex-wrap: nowrap; gap: var(--space-1); }
.detail-page--scrolled .detail-header__back-label { display: none; }
.detail-page--scrolled .detail-avatar { flex-basis: var(--size-lg); width: var(--size-lg); height: var(--size-lg); font-size: var(--font-size-base); }
.detail-page--scrolled .detail-header__name { font-size: var(--font-size-lg); }
.detail-page--scrolled .detail-header__identity { min-width: 0; }
.detail-page--scrolled .detail-header__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.detail-page--scrolled .detail-header__contact-info,
.detail-page--scrolled .detail-header__badges,
.detail-page--scrolled .detail-header__toolbar { display: none; }
.detail-page--scrolled .detail-header__compact-actions { display: flex; flex: 0 0 auto; flex-wrap: nowrap; }
.detail-page--scrolled .detail-header__compact-actions .detail-toolbar__btn-label { display: none; }
.detail-page--scrolled .detail-header__compact-actions .detail-toolbar__btn { min-width: var(--size-lg); justify-content: center; padding-right: var(--space-1); padding-left: var(--space-1); }
.detail-toolbar__btns { display: flex; flex-direction: column; gap: var(--space-1); }
.detail-toolbar__group { display: flex; align-items: flex-start; gap: var(--space-1); }
.detail-toolbar__label { flex: 0 0 var(--space-6); padding-top: var(--space-1); color: var(--color-text-muted); font-size: var(--font-size-xs); }
.detail-toolbar__group-buttons { display: flex; flex: 1; flex-wrap: wrap; gap: var(--space-1); }
.detail-toolbar__btn { white-space: nowrap; }
.detail-toolbar__btn--disabled { opacity: .5; pointer-events: none; }
.detail-ops-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-3);
  margin-top: var(--space-1);
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
}
.detail-ops-summary__item { display: flex; flex-wrap: wrap; gap: var(--space-0); align-items: baseline; }
.detail-ops-summary__label { color: var(--color-text-muted); font-size: var(--font-size-xs); }
.detail-ops-summary__value { min-width: 0; overflow-wrap: anywhere; font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); }
.detail-ops-summary__notice { color: var(--color-danger-text); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); }
.detail-page > #detail-tabs {
  position: sticky;
  top: calc(var(--topbar-height) + var(--detail-header-compact-height));
  z-index: calc(var(--z-topbar) - 2);
  margin-bottom: var(--space-2);
  background: var(--color-surface);
}
.detail-page #detail-tab-content[aria-busy="true"] {
  min-height: var(--tab-reserved-height, 0);
}

/* ═══ 11. ALERT-BAR ═══ */
.alert-bar {
  display: flex;
  flex-direction: column;
  gap: var(--space-0);
  margin-bottom: var(--space-2);
}
.alert-bar__item {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius);
  border-left: var(--border-accent) solid var(--color-border);
  background: var(--color-surface-alt);
}
.alert-bar__icon { font-size: var(--font-size-lg); flex-shrink: 0; }
.alert-bar__text { flex: 1; font-size: var(--font-size-base); color: var(--color-text); }
.alert-bar__action {
  background: none;
  border: none;
  color: var(--color-primary-text);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  font-size: var(--font-size-sm);
}
.alert-bar--urgent .alert-bar__item { background: var(--color-danger-bg); border-left-color: var(--color-danger); }
.alert-bar--warning .alert-bar__item { background: var(--color-warning-bg); border-left-color: var(--color-warning); }
.alert-bar--info .alert-bar__item { background: var(--color-info-bg); border-left-color: var(--color-info); }

/* ═══ 12. QUICK-ACTION-BAR ═══ */
.quick-action-bar {
  display: flex;
  flex-direction: column;
  gap: var(--space-0);
  width: var(--width-md);
  flex-shrink: 0;
  position: sticky;
  top: var(--space-2);
}
.quick-action-bar__btn {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  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;
  transition: all var(--transition);
  font-size: var(--font-size-base);
  color: var(--color-text);
  text-align: left;
}
.quick-action-bar__btn:hover { background: var(--color-primary-light); border-color: var(--color-primary); color: var(--color-primary-text); }
.quick-action-bar__icon { font-size: var(--font-size-lg); flex-shrink: 0; }
.quick-action-bar__label { flex: 1; }

/* ═══ 13. SLIDE-IN-PANEL ═══ */
.slide-in-panel__overlay {
  position: fixed;
  inset: 0;
  background: var(--overlay-bg);
  z-index: var(--z-modal);
  animation: fadeIn var(--transition);
  backdrop-filter: blur(var(--blur-sm));
}
.slide-in-panel__panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: var(--width-3xl);
  max-width: 100vw;
  background: var(--color-surface);
  border-left: 1px solid var(--color-border);
  box-shadow: var(--shadow-xl);
  z-index: var(--z-modal);
  display: flex;
  flex-direction: column;
  animation: slideInRight var(--transition-slow);
}
.slide-in-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-border);
}
.slide-in-panel__body { padding: var(--space-3); overflow-y: auto; flex: 1; }
.slide-in-panel__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  border-top: 1px solid var(--color-border);
}

/* ═══ 14. NOTIFICATION-DROPDOWN ═══ */
.notification-dropdown {
  position: absolute;
  top: calc(var(--topbar-height) - var(--space-0));
  right: var(--space-2);
  width: var(--width-2xl);
  max-width: calc(100vw - var(--space-3));
  max-height: var(--width-3xl);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  z-index: var(--z-dropdown);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.notification-dropdown__tabs {
  display: flex;
  gap: var(--space-0);
  padding: var(--space-1);
  border-bottom: 1px solid var(--color-border);
}
.notification-dropdown__tab {
  padding: var(--space-0) var(--space-1);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition);
}
.notification-dropdown__tab:hover { background: var(--color-surface-alt); color: var(--color-text); }
.notification-dropdown__tab--active { background: var(--color-primary-light); color: var(--color-primary-text); }
.notification-dropdown__list {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-0);
}
.notification-dropdown__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-0);
  padding: var(--space-1) var(--space-2);
  border-bottom: 1px solid var(--color-border);
  cursor: default;
  transition: background var(--transition);
}
.notification-dropdown__content { display: flex; flex: 1; min-width: 0; flex-direction: column; gap: var(--space-0); }
.notification-dropdown__meta { display: flex; align-items: center; justify-content: space-between; gap: var(--space-1); }
.notification-dropdown__item > .activity-marker { margin-top: var(--space-1); }
.notification-dropdown__item:last-child { border-bottom: none; }
.notification-dropdown__item:hover { background: var(--color-surface-alt); }
.notification-dropdown__item--unread { background: var(--color-info-bg); font-weight: var(--font-weight-medium); }
.notification-dropdown__item-title { font-size: var(--font-size-base); font-weight: var(--font-weight-semibold); color: var(--color-text); }
.notification-dropdown__item-body { font-size: var(--font-size-sm); color: var(--color-text-muted); }
.notification-dropdown__item-time { font-size: var(--font-size-xs); color: var(--color-text-muted); }
.notification-dropdown__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  border-top: 1px solid var(--color-border);
  background: var(--color-surface-alt);
}
.notification-dropdown__footer button {
  background: none;
  border: none;
  color: var(--color-primary-text);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
}
.notification-dropdown__footer button:hover { text-decoration: underline; }

/* ═══ 15. USER-DROPDOWN (reuse notification-dropdown base) ═══ */
.user-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  min-width: var(--width-lg);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  z-index: var(--z-dropdown);
  overflow: hidden;
  display: none;
}
.user-dropdown--open { display: block; }
.user-dropdown__header { padding: var(--space-2); border-bottom: 1px solid var(--color-border); }
.user-dropdown__body { padding: var(--space-1); display: flex; flex-direction: column; gap: var(--space-0); }

/* ═══ 16. SKELETON ═══ */
.skeleton {
  background: var(--skeleton-bg);
  border-radius: var(--radius-sm);
  animation: shimmer 1.5s infinite;
}
.skeleton--text { height: var(--font-size-base); width: 100%; }
.skeleton--line { height: var(--font-size-base); width: 80%; }
.skeleton--line-short { height: var(--font-size-base); width: 50%; }
.skeleton--title { height: var(--font-size-xl); width: var(--width-md); margin-bottom: var(--space-2); }
.skeleton--avatar { width: var(--size-xl); height: var(--size-xl); border-radius: var(--radius-full); flex-shrink: 0; }
.skeleton--card { height: var(--width-xs); border-radius: var(--radius); }
.skeleton--stat { height: var(--size-3xl); border-radius: var(--radius); }
.skeleton--input { height: var(--control-height); width: var(--width-md); border-radius: var(--radius); }
.skeleton--btn { height: var(--control-height); width: var(--width-xs); border-radius: var(--radius); }
.skeleton--w60 { width: var(--space-6); }
.skeleton--w80 { width: var(--size-3xl); }
.skeleton--w120 { width: var(--width-xs); }
.skeleton--flex1 { flex: 1; }
.skeleton--row {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) 0;
}
.skeleton--toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin-bottom: var(--space-2);
}
@keyframes shimmer {
  0% { background: var(--skeleton-bg); }
  50% { background: var(--skeleton-shine); }
  100% { background: var(--skeleton-bg); }
}

/* ═══ STATE COMPONENTS ═══ */
.state-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  color: var(--color-text-muted);
}
.state-loading::before {
  content: '';
  width: var(--space-3);
  height: var(--space-3);
  border: var(--border-accent) solid var(--color-border);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin-right: var(--space-1);
}
.state-loading--skeleton { display: block; padding: 0; }
.state-loading--skeleton::before { display: none; }
@keyframes spin { to { transform: rotate(360deg); } }

.state-empty {
  text-align: center;
  padding: var(--space-4);
  color: var(--color-text-muted);
}
.state-empty__icon { font-size: var(--font-size-3xl); margin-bottom: var(--space-2); }
.state-empty__text { margin-bottom: var(--space-1); }

.state-error {
  text-align: center;
  padding: var(--space-4);
  color: var(--color-danger-text);
}
.state-error__icon { font-size: var(--font-size-3xl); margin-bottom: var(--space-2); }
.state-error__text { margin-bottom: var(--space-1); }

/* ═══ GRID ═══ */
.grid { display: grid; gap: var(--space-2); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--5 { grid-template-columns: repeat(5, 1fr); }

/* ═══ NOTICE-BOX (info banner — success / danger / info) ═══ */
.notice-box {
  display: flex;
  align-items: flex-start;
  gap: var(--space-1);
  padding: var(--space-2);
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  font-size: var(--font-size-sm);
  color: var(--color-text);
  margin-bottom: var(--space-2);
}
.notice-box--success { background: var(--color-success-bg); border-color: var(--color-success); color: var(--color-success-text); }
.notice-box--danger { background: var(--color-danger-bg); border-color: var(--color-danger); color: var(--color-danger-text); }
.notice-box--info { background: var(--color-info-bg); border-color: var(--color-info); }

/* ═══ ANIMATIONS ═══ */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp { from { transform: translateY(var(--space-2)); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes slideInRight { from { transform: translateX(100%); } to { transform: translateX(0); } }
.fade-in { animation: fadeIn var(--transition) ease; }
.slide-up { animation: slideUp var(--transition) ease; }

/* ═══ RESPONSIVE TABLES — Card-stack (≤768px) ═══ */
@media (max-width: 768px) {
  .modal-overlay { padding: 0; }
  .modal { max-width: 100%; max-height: 100vh; border-radius: 0; }
  .data-table__scroll thead { display: none; }
  .data-table__scroll tr {
    display: block;
    padding: var(--space-1) var(--space-2);
    border-bottom: 1px solid var(--color-border);
  }
  .data-table__scroll td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-0) 0;
    border: none;
    text-align: right;
  }
  .data-table__scroll td::before {
    content: attr(data-label);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    text-align: left;
  }
  .grid--2, .grid--3, .grid--4, .grid--5 { grid-template-columns: 1fr; }
  .detail-header__summary .grid--5,
  .detail-header__summary .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .detail-header__summary .grid--3 { grid-template-columns: 1fr; }
  .detail-header__top { flex-direction: column; align-items: flex-start; }
  .detail-page--scrolled .detail-header__top { flex-direction: row; align-items: center; }
  .detail-page--scrolled .detail-header__identity { flex: 1 1 var(--size-3xl); }
  .quick-action-bar { width: 100%; position: static; flex-direction: row; flex-wrap: wrap; }
  .quick-action-bar__btn { width: auto; }
  .slide-in-panel__panel { width: 100vw; }
  .notification-dropdown { width: calc(100vw - var(--space-3)); right: var(--space-1); }
  .btn--icon { min-width: var(--touch-target); min-height: var(--touch-target); }
  .topbar__bell, .topbar__theme-toggle, .topbar__hamburger { min-width: var(--touch-target); min-height: var(--touch-target); display: flex; align-items: center; justify-content: center; }
  .data-table__pagination .btn { min-width: var(--touch-target); min-height: var(--touch-target); }
  .sidebar__link { min-height: var(--touch-target); }
}

/* ═══ TABLE ALIGN (data attribute, không inline) ═══ */
.data-table [data-align="right"] { text-align: right; font-variant-numeric: tabular-nums; }
.data-table [data-align="center"] { text-align: center; }
.data-table [data-align="left"] { text-align: left; }

/* ═══ TABLE — checkbox column + pagination separator ═══ */
.data-table__col-checkbox { width: var(--size-xl); }
.pagination__separator { padding: 0 var(--space-0); }

/* ═══ DYNAMIC SIZE — CSS variable pattern (không inline) ═══ */
.chart { height: var(--chart-h, var(--width-xl)); }
.data-table th { width: var(--col-w, auto); }

}

.action-dialog__details dd { margin: 0 0 var(--space-3); word-break: break-word; }
.action-dialog__block { white-space: pre-wrap; max-height: 15rem; overflow: auto; }