@layer components {
  /**
   * Financial / metrics tables — locked columns, tabular numerals, header/body alignment.
   * Source-of-truth for dashboard metrics tables; complements tables.css + route-specific pages.
   */

  /* ---- Dashboard: all data tables inside premium dashboard shell ---- */
  .dashboard-layout .dashboard-premium-wrap .table-wrap > table {
    width: 100%;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0;
  }

  .dashboard-layout .dashboard-premium-wrap .table-wrap thead th,
  .dashboard-layout .dashboard-premium-wrap .table-wrap tbody td {
    box-sizing: border-box;
    vertical-align: middle;
    line-height: 1.4;
    font-size: var(--type-table-cell, 17px);
    padding: 12px 14px;
  }

  .dashboard-layout .dashboard-premium-wrap .table-wrap thead th {
    font-size: var(--type-table-head, 15px);
    font-weight: 600;
    letter-spacing: 0.045em;
    text-transform: uppercase;
    color: #475569;
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
    border-bottom: 1px solid #e2e8f0;
    white-space: nowrap;
  }

  .dashboard-layout .dashboard-premium-wrap .table-wrap tbody td {
    font-weight: 500;
    border-bottom: 1px solid #f1f5f9;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
  }

  .dashboard-layout .dashboard-premium-wrap .table-wrap tbody tr:last-child td {
    border-bottom: 0;
  }

  /* Text / label column */
  .dashboard-layout .dashboard-premium-wrap .table-wrap th:first-child,
  .dashboard-layout .dashboard-premium-wrap .table-wrap td:first-child {
    text-align: left;
    font-weight: 500;
    padding-inline-start: 12px;
    word-break: break-word;
    overflow-wrap: anywhere;
  }

  /* Numeric columns */
  .dashboard-layout .dashboard-premium-wrap .table-wrap th:nth-child(n + 2),
  .dashboard-layout .dashboard-premium-wrap .table-wrap td:nth-child(n + 2) {
    text-align: right;
    white-space: nowrap;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
  }

  /* SL / count column — same weight as money, still tabular */
  .dashboard-layout .dashboard-premium-wrap .table-wrap th:nth-child(2),
  .dashboard-layout .dashboard-premium-wrap .table-wrap td:nth-child(2) {
    font-weight: 600;
  }

  /* Margin / % last column — align with stack, slightly lighter than revenue */
  .dashboard-layout .dashboard-premium-wrap .table-wrap th:last-child,
  .dashboard-layout .dashboard-premium-wrap .table-wrap td:last-child {
    padding-inline-end: 14px;
    font-weight: 500;
  }

  .dashboard-layout .dashboard-premium-wrap .table-wrap td:last-child span {
    font-weight: 500 !important;
  }

  /* 6-column financial blocks (source + profit-by-source style) */
  .dashboard-layout .dashboard-source-panel .table-wrap table th:nth-child(1),
  .dashboard-layout .dashboard-source-panel .table-wrap table td:nth-child(1),
  .dashboard-layout #hydraDashProfitPanels .table-wrap table th:nth-child(1),
  .dashboard-layout #hydraDashProfitPanels .table-wrap table td:nth-child(1) {
    width: 22%;
  }

  .dashboard-layout .dashboard-source-panel .table-wrap table th:nth-child(2),
  .dashboard-layout .dashboard-source-panel .table-wrap table td:nth-child(2),
  .dashboard-layout #hydraDashProfitPanels .table-wrap table th:nth-child(2),
  .dashboard-layout #hydraDashProfitPanels .table-wrap table td:nth-child(2) {
    width: 14%;
  }

  .dashboard-layout .dashboard-source-panel .table-wrap table th:nth-child(3),
  .dashboard-layout .dashboard-source-panel .table-wrap table td:nth-child(3),
  .dashboard-layout .dashboard-source-panel .table-wrap table th:nth-child(4),
  .dashboard-layout .dashboard-source-panel .table-wrap table td:nth-child(4),
  .dashboard-layout .dashboard-source-panel .table-wrap table th:nth-child(5),
  .dashboard-layout .dashboard-source-panel .table-wrap table td:nth-child(5),
  .dashboard-layout .dashboard-source-panel .table-wrap table th:nth-child(6),
  .dashboard-layout .dashboard-source-panel .table-wrap table td:nth-child(6),
  .dashboard-layout #hydraDashProfitPanels .table-wrap table th:nth-child(3),
  .dashboard-layout #hydraDashProfitPanels .table-wrap table td:nth-child(3),
  .dashboard-layout #hydraDashProfitPanels .table-wrap table th:nth-child(4),
  .dashboard-layout #hydraDashProfitPanels .table-wrap table td:nth-child(4),
  .dashboard-layout #hydraDashProfitPanels .table-wrap table th:nth-child(5),
  .dashboard-layout #hydraDashProfitPanels .table-wrap table td:nth-child(5),
  .dashboard-layout #hydraDashProfitPanels .table-wrap table th:nth-child(6),
  .dashboard-layout #hydraDashProfitPanels .table-wrap table td:nth-child(6) {
    width: 16%;
  }

  /* Top products trio — product name wraps */
  .dashboard-layout #hydraDashTopProducts .table-wrap > table th:first-child,
  .dashboard-layout #hydraDashTopProducts .table-wrap > table td:first-child {
    width: 56%;
    white-space: normal;
    word-break: break-word;
  }

  .dashboard-layout #hydraDashTopProducts .table-wrap > table th:nth-child(2),
  .dashboard-layout #hydraDashTopProducts .table-wrap > table td:nth-child(2) {
    width: 28%;
  }

  .dashboard-layout #hydraDashTopProducts .table-wrap > table th:nth-child(3),
  .dashboard-layout #hydraDashTopProducts .table-wrap > table td:nth-child(3) {
    width: 16%;
  }

  body.dark .dashboard-layout .dashboard-premium-wrap .table-wrap thead th {
    background: rgba(30, 41, 59, 0.92);
    color: #cbd5e1;
    border-bottom-color: rgba(71, 85, 105, 0.9);
  }

  body.dark .dashboard-layout .dashboard-premium-wrap .table-wrap tbody td {
    border-bottom-color: rgba(51, 65, 85, 0.55);
    color: #e2e8f0;
  }

  body.dark .dashboard-layout .dashboard-premium-wrap .table-wrap tbody tr:hover td {
    background: rgba(51, 65, 85, 0.35);
  }

  /* ---- Báo cáo (tables directly under .panel, không bọc .table-wrap) ---- */
  .reports-page .panel > table {
    width: 100%;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0;
    margin-top: 8px;
    font-size: var(--type-table-cell, 18px);
  }

  .reports-page .panel > table thead th,
  .reports-page .panel > table tbody td {
    vertical-align: middle;
    line-height: 1.35;
    padding: 10px 12px;
    border-bottom: 1px solid #f1f5f9;
  }

  .reports-page .panel > table thead th {
    font-size: var(--type-table-head, 16px);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #475569;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    text-align: left;
    white-space: nowrap;
  }

  .reports-page .panel > table tbody td {
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
  }

  .reports-page .panel > table th:first-child,
  .reports-page .panel > table td:first-child {
    text-align: left;
    word-break: break-word;
  }

  .reports-page .panel > table th:nth-child(n + 2),
  .reports-page .panel > table td:nth-child(n + 2) {
    text-align: right;
    white-space: nowrap;
    font-weight: 600;
  }

  .reports-page .panel > table tbody tr:last-child td {
    border-bottom: 0;
  }

  .reports-page .panel > table th:last-child,
  .reports-page .panel > table td:last-child {
    padding-inline-end: 14px;
  }

  /* ---- COD: money columns 6–8 ---- */
  .cod-page .table-wrap > table {
    table-layout: fixed;
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
  }

  .cod-page .table-wrap thead th,
  .cod-page .table-wrap tbody td {
    vertical-align: middle;
    padding: 10px 12px;
    font-size: var(--type-table-cell, 18px);
    line-height: 1.35;
    border-bottom: 1px solid #f1f5f9;
  }

  .cod-page .table-wrap thead th:nth-child(n + 6):nth-child(-n + 8),
  .cod-page .table-wrap tbody td:nth-child(n + 6):nth-child(-n + 8) {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
    font-weight: 600;
    white-space: nowrap;
  }

  .cod-page .table-wrap thead th:nth-child(-n + 5),
  .cod-page .table-wrap tbody td:nth-child(-n + 5) {
    text-align: left;
  }

  .cod-page .table-wrap thead th {
    font-size: var(--type-table-head, 16px);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #475569;
    background: #f8fafc;
  }

  .cod-page .table-wrap tbody td:last-child {
    padding-inline-end: 14px;
  }

  /* ---- Modal: đơn chi tiết dòng hàng ---- */
  #modal .order-detail-table {
    table-layout: fixed;
  }

  #modal .order-detail-table th,
  #modal .order-detail-table td {
    vertical-align: middle;
    line-height: 1.35;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
  }

  #modal .order-detail-table th:nth-child(1),
  #modal .order-detail-table td:nth-child(1) {
    text-align: left;
    white-space: normal;
    word-break: break-word;
    font-weight: 500;
  }

  #modal .order-detail-table th:nth-child(n + 2):nth-child(-n + 7),
  #modal .order-detail-table td:nth-child(n + 2):nth-child(-n + 7) {
    text-align: right;
    font-weight: 600;
    white-space: nowrap;
  }

  #modal .order-detail-table th:nth-child(8),
  #modal .order-detail-table td:nth-child(8) {
    text-align: left;
    white-space: normal;
    font-weight: 500;
    font-variant-numeric: normal;
    font-feature-settings: normal;
  }

  body.dark .reports-page .panel > table thead th {
    background: rgba(30, 41, 59, 0.92);
    color: #cbd5e1;
    border-bottom-color: rgba(71, 85, 105, 0.9);
  }

  body.dark .reports-page .panel > table tbody td {
    border-bottom-color: rgba(51, 65, 85, 0.55);
  }

  body.dark .cod-page .table-wrap thead th {
    background: rgba(30, 41, 59, 0.92);
    color: #cbd5e1;
  }

  .reports-page .reports-empty-card {
    text-align: center;
    padding: 28px 20px;
  }

  .reports-page .reports-empty-title {
    margin: 0 0 8px;
    font-size: 16px;
    font-weight: 700;
    color: var(--hydra-text, #0f172a);
  }

  .reports-page .reports-empty-desc {
    margin: 0 0 14px;
    font-size: 13px;
    line-height: 1.45;
  }
}