@layer pages {
  /* --- Shell & hierarchy --- */
  .expenses-page .finance-page {
    display: flex;
    flex-direction: column;
    min-height: 0;
    gap: 0;
  }

  .expenses-page .finance-shell {
    max-width: 1480px;
    margin: 0 auto;
    width: 100%;
    padding: 0 4px;
    box-sizing: border-box;
  }

  .expenses-page .finance-inline-alert {
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid #fecaca;
    background: #fef2f2;
    color: #991b1b;
    font-size: 12.5px;
    margin-bottom: 12px;
  }

  .expenses-page .finance-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    padding-bottom: 2px;
  }

  .expenses-page .finance-filter-input {
    width: 88px;
    height: 38px;
    min-height: 38px;
    padding: 0 10px;
    font-size: 13px;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    background: #fff;
    color: #0f172a;
  }

  .expenses-page .finance-period-hint {
    margin-left: auto;
    font-size: 12px;
    font-weight: 500;
    color: #64748b;
  }

  .expenses-page .finance-btn-add.btn.primary {
    height: 38px;
    padding: 0 18px;
    border-radius: 11px;
    font-weight: 700;
    font-size: 13px;
    box-shadow: 0 4px 14px rgba(59, 130, 246, 0.22);
    border: none;
  }

  .expenses-page .finance-btn-view {
    height: 38px;
    padding: 0 16px;
    border-radius: 11px;
    font-weight: 600;
    font-size: 13px;
    background: #fff;
    color: #334155;
    border: 1px solid #e2e8f0;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  }

  .expenses-page .finance-btn-view:hover {
    background: #f8fafc;
    border-color: #cbd5e1;
  }

  /* KPI stack: 18px below toolbar, 12px between rows */
  .expenses-page .finance-kpi-stack {
    margin-top: 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .expenses-page .finance-kpi-row {
    display: grid;
    gap: 12px;
  }

  .expenses-page .finance-kpi-row--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .expenses-page .finance-kpi-row--bottom {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .expenses-page .finance-kpi-card--hero-wide {
    grid-column: span 2;
  }

  /* Premium KPI card */
  .expenses-page .finance-kpi-card {
    background: #fff;
    border: 1px solid #e8edf5;
    border-radius: 18px;
    padding: 18px 20px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
    min-width: 0;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
  }

  .expenses-page .finance-kpi-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06);
  }

  .expenses-page .finance-kpi-card--negative-border {
    border-color: #fecaca;
  }

  /* Tint borders / backgrounds — subtle */
  .expenses-page .finance-kpi-card--cogs {
    background: #fff;
  }

  .expenses-page .finance-kpi-card--transfer {
    background: #f8fbff;
    border-color: #dbeafe;
  }

  .expenses-page .finance-kpi-card--cash {
    background: #f6fdf9;
    border-color: #d1fae5;
  }

  .expenses-page .finance-kpi-card--cod {
    background: #fffbf5;
    border-color: #ffedd5;
  }

  .expenses-page .finance-kpi-card--store {
    background: #f6fbff;
    border-color: #e0f2fe;
  }

  .expenses-page .finance-kpi-card--expense {
    background: #fffafa;
    border-color: #ffe4e6;
  }

  .expenses-page .finance-kpi-card--ket {
    background: #f6fdf9;
    border-color: #bbf7d0;
  }

  .expenses-page .finance-kpi-card--hero-positive.finance-kpi-card--ket {
    border-color: #86efac;
  }

  .expenses-page .finance-kpi-card--hero-negative.finance-kpi-card--ket {
    background: #fff5f5;
    border-color: #fecaca;
  }

  /* Typography */
  .expenses-page .finance-kpi-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #64748b;
    margin-bottom: 10px;
  }

  .expenses-page .finance-kpi-value {
    font-size: clamp(22px, 3.2vw, 34px);
    font-weight: 800;
    line-height: 1.05;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
    word-break: break-word;
  }

  .expenses-page .finance-kpi-card--hero-wide .finance-kpi-value {
    font-size: clamp(26px, 3.8vw, 38px);
  }

  .expenses-page .finance-kpi-value--neutral {
    color: #0f172a;
  }

  .expenses-page .finance-kpi-value--blue {
    color: #1d4ed8;
  }

  .expenses-page .finance-kpi-value--green {
    color: #047857;
  }

  .expenses-page .finance-kpi-value--orange {
    color: #c2410c;
  }

  .expenses-page .finance-kpi-value--sky {
    color: #0369a1;
  }

  .expenses-page .finance-kpi-value--red {
    color: #b91c1c;
  }

  .expenses-page .finance-kpi-card--hero-positive .finance-kpi-value--ket {
    color: #047857;
  }

  .expenses-page .finance-kpi-card--hero-negative .finance-kpi-value--ket {
    color: #991b1b;
  }

  .expenses-page .finance-neg-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 2px 8px;
    border-radius: 8px;
    font-size: 10px;
    font-weight: 800;
    vertical-align: middle;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    background: #fee2e2;
    color: #b91c1c;
  }

  /* Table section: 22px below KPI */
  .expenses-page .finance-split-grid {
    margin-top: 22px;
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(300px, 0.88fr);
    gap: 14px;
    align-items: start;
  }

  .expenses-page .finance-expense-panel,
  .expenses-page .finance-breakdown-panel {
    border-radius: 18px;
    border: 1px solid #e8edf5;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
    padding: 16px 18px;
    margin-top: 0;
    margin-bottom: 0;
    background: #fff;
  }

  .expenses-page .finance-panel-title {
    margin: 0 0 12px;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: #1e293b;
  }

  .expenses-page .finance-expense-table-wrap {
    overflow-x: auto;
    max-height: min(52vh, 520px);
    overflow-y: auto;
    border-radius: 12px;
    border: 1px solid #f1f5f9;
  }

  .expenses-page .finance-expense-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
  }

  .expenses-page .finance-expense-table th,
  .expenses-page .finance-expense-table td {
    padding: 10px 12px;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
  }

  .expenses-page .finance-expense-table tbody tr.finance-expense-row:nth-child(even) {
    background: #fbfcfe;
  }

  .expenses-page .finance-expense-table tbody tr.finance-expense-row:hover {
    background: #f1f5f9;
  }

  .expenses-page .finance-expense-table thead th {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #64748b;
    background: #f8fafc;
    position: sticky;
    top: 0;
    z-index: 2;
    box-shadow: 0 1px 0 #e2e8f0;
  }

  .expenses-page .finance-th-money,
  .expenses-page .finance-money-cell {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
    white-space: nowrap;
    font-weight: 600;
    color: #0f172a;
  }

  .expenses-page .finance-cell-strong {
    font-weight: 600;
    color: #1e293b;
    max-width: 220px;
  }

  .expenses-page .finance-cell-note {
    max-width: 240px;
    font-size: 12px;
    color: #64748b;
  }

  .expenses-page .finance-th-actions,
  .expenses-page .finance-actions-cell {
    text-align: center;
    white-space: nowrap;
  }

  .expenses-page .finance-actions-cell .btn {
    min-width: 44px;
  }

  /* Empty state */
  .expenses-page .finance-empty-state {
    text-align: center;
    padding: 36px 20px 40px;
    color: #64748b;
  }

  .expenses-page .finance-empty-state-icon {
    display: block;
    font-size: 28px;
    color: #cbd5e1;
    margin-bottom: 10px;
    line-height: 1;
  }

  .expenses-page .finance-empty-state-title {
    font-size: 15px;
    font-weight: 800;
    color: #334155;
    margin-bottom: 6px;
  }

  .expenses-page .finance-empty-state-desc {
    font-size: 13px;
    color: #64748b;
    max-width: 320px;
    margin: 0 auto;
    line-height: 1.45;
  }

  /* Breakdown panel */
  .expenses-page .finance-breakdown-inner {
    font-size: 13px;
    color: #334155;
  }

  .expenses-page .finance-bd-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid #f1f5f9;
  }

  .expenses-page .finance-bd-head-icon {
    font-size: 18px;
    color: #94a3b8;
    line-height: 1;
  }

  .expenses-page .finance-bd-title {
    margin: 0;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: #0f172a;
  }

  .expenses-page .finance-bd-section {
    margin-bottom: 14px;
  }

  .expenses-page .finance-bd-section-label {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #94a3b8;
    margin-bottom: 8px;
  }

  .expenses-page .finance-bd-lines {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .expenses-page .finance-bd-line {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 14px;
    line-height: 1.4;
  }

  .expenses-page .finance-bd-label {
    color: #475569;
    font-weight: 500;
    font-size: 12.5px;
  }

  .expenses-page .finance-bd-value {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
    color: #0f172a;
    flex-shrink: 0;
    font-size: 13px;
  }

  .expenses-page .finance-bd-line--warn .finance-bd-value {
    color: #b91c1c;
  }

  .expenses-page .finance-bd-muted {
    font-size: 12px;
    color: #94a3b8;
    padding: 4px 0;
  }

  .expenses-page .finance-bd-final {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    margin-top: 6px;
    padding-top: 14px;
    border-top: 1px solid #e8edf5;
  }

  .expenses-page .finance-bd-final-label {
    font-weight: 800;
    font-size: 13px;
    color: #1e293b;
  }

  .expenses-page .finance-bd-final-value {
    font-size: 18px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
  }

  .expenses-page .finance-bd-final--positive .finance-bd-final-value {
    color: #047857;
  }

  .expenses-page .finance-bd-final--negative .finance-bd-final-value {
    color: #991b1b;
  }

  .expenses-page .finance-bd-final--negative .finance-bd-final-label {
    color: #991b1b;
  }

  .expenses-page .finance-insight-box {
    margin-top: 16px;
    padding: 12px 14px;
    border-radius: 12px;
    background: #f8fafc;
    border: 1px solid #f1f5f9;
    font-size: 12px;
    line-height: 1.5;
    color: #475569;
  }

  .expenses-page .finance-insight-line + .finance-insight-line {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed #e2e8f0;
  }

  .expenses-page .finance-flow-footnote {
    margin: 14px 0 0;
    font-size: 11px;
    color: #94a3b8;
    line-height: 1.5;
  }

  /* Tablet */
  @media (max-width: 1100px) {
    .expenses-page .finance-kpi-row--4 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .expenses-page .finance-kpi-row--bottom {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .expenses-page .finance-kpi-card--hero-wide {
      grid-column: span 2;
    }

    .expenses-page .finance-split-grid {
      grid-template-columns: 1fr;
    }

    .expenses-page .finance-breakdown-panel {
      order: 2;
    }

    .expenses-page .finance-expense-panel {
      order: 1;
    }

    .expenses-page .finance-period-hint {
      width: 100%;
      margin-left: 0;
      margin-top: 4px;
    }
  }

  /* Mobile */
  @media (max-width: 640px) {
    .expenses-page .finance-shell {
      padding: 0;
    }

    .expenses-page .finance-kpi-row--4,
    .expenses-page .finance-kpi-row--bottom {
      grid-template-columns: 1fr;
    }

    .expenses-page .finance-kpi-card--hero-wide {
      grid-column: span 1;
    }

    .expenses-page .finance-filter-input {
      flex: 1;
      min-width: 0;
    }
  }

  /* Dark mode */
  body.dark .expenses-page .finance-filter-input {
    background: rgba(15, 23, 42, 0.8);
    border-color: #475569;
    color: #f1f5f9;
  }

  body.dark .expenses-page .finance-kpi-card,
  body.dark .expenses-page .finance-expense-panel,
  body.dark .expenses-page .finance-breakdown-panel {
    background: rgba(15, 23, 42, 0.72);
    border-color: #334155;
    box-shadow: none;
  }

  body.dark .expenses-page .finance-kpi-card--transfer {
    background: rgba(30, 58, 138, 0.2);
    border-color: #3730a3;
  }

  body.dark .expenses-page .finance-kpi-card--cash {
    background: rgba(6, 78, 59, 0.22);
    border-color: #065f46;
  }

  body.dark .expenses-page .finance-kpi-card--cod {
    background: rgba(124, 45, 18, 0.2);
    border-color: #9a3412;
  }

  body.dark .expenses-page .finance-kpi-card--store {
    background: rgba(12, 74, 110, 0.2);
    border-color: #0369a1;
  }

  body.dark .expenses-page .finance-kpi-card--expense {
    background: rgba(127, 29, 29, 0.18);
    border-color: #7f1d1d;
  }

  body.dark .expenses-page .finance-kpi-card--ket.finance-kpi-card--hero-positive {
    background: rgba(6, 78, 59, 0.25);
    border-color: #15803d;
  }

  body.dark .expenses-page .finance-kpi-card--ket.finance-kpi-card--hero-negative {
    background: rgba(127, 29, 29, 0.22);
    border-color: #991b1b;
  }

  body.dark .expenses-page .finance-kpi-label {
    color: #94a3b8;
  }

  body.dark .expenses-page .finance-kpi-value--neutral {
    color: #f1f5f9;
  }

  body.dark .expenses-page .finance-kpi-value--blue {
    color: #93c5fd;
  }

  body.dark .expenses-page .finance-kpi-value--green {
    color: #6ee7b7;
  }

  body.dark .expenses-page .finance-kpi-value--orange {
    color: #fdba74;
  }

  body.dark .expenses-page .finance-kpi-value--sky {
    color: #7dd3fc;
  }

  body.dark .expenses-page .finance-kpi-value--red {
    color: #fca5a5;
  }

  body.dark .expenses-page .finance-kpi-card--hero-positive .finance-kpi-value--ket {
    color: #6ee7b7;
  }

  body.dark .expenses-page .finance-kpi-card--hero-negative .finance-kpi-value--ket {
    color: #fca5a5;
  }

  body.dark .expenses-page .finance-expense-table thead th {
    background: rgba(30, 41, 59, 0.95);
    color: #94a3b8;
    box-shadow: 0 1px 0 #334155;
  }

  body.dark .expenses-page .finance-expense-table tbody tr.finance-expense-row:nth-child(even) {
    background: rgba(30, 41, 59, 0.35);
  }

  body.dark .expenses-page .finance-expense-table tbody tr.finance-expense-row:hover {
    background: rgba(51, 65, 85, 0.55);
  }

  body.dark .expenses-page .finance-expense-table td {
    border-bottom-color: #334155;
  }

  body.dark .expenses-page .finance-expense-table-wrap {
    border-color: #334155;
  }

  body.dark .expenses-page .finance-panel-title,
  body.dark .expenses-page .finance-bd-title {
    color: #f1f5f9;
  }

  body.dark .expenses-page .finance-bd-value,
  body.dark .expenses-page .finance-bd-final-value {
    color: #e2e8f0;
  }

  body.dark .expenses-page .finance-bd-final--positive .finance-bd-final-value {
    color: #6ee7b7;
  }

  body.dark .expenses-page .finance-bd-final--negative .finance-bd-final-value,
  body.dark .expenses-page .finance-bd-final--negative .finance-bd-final-label {
    color: #fca5a5;
  }

  body.dark .expenses-page .finance-insight-box {
    background: rgba(30, 41, 59, 0.5);
    border-color: #334155;
    color: #cbd5e1;
  }

  body.dark .expenses-page .finance-period-hint {
    color: #94a3b8;
  }

  body.dark .expenses-page .finance-inline-alert {
    background: rgba(127, 29, 29, 0.28);
    border-color: #7f1d1d;
    color: #fecaca;
  }

  body.dark .expenses-page .finance-empty-state-title {
    color: #e2e8f0;
  }

  body.dark .expenses-page .finance-btn-view {
    background: rgba(30, 41, 59, 0.8);
    border-color: #475569;
    color: #e2e8f0;
  }
}

/*
 * Chi phí & Dòng tiền — NGOÀI @layer.
 * Neo #addExpense vào #appContent + button#… để luôn match DOM thực tế.
 * Tách background-color / background-image: tránh gradient invalid khiến nền “trống” nhưng chữ vẫn primary trắng.
 */
body.use-new-ui #appContent button#addExpense.btn.primary.finance-btn-add,
body #appContent button#addExpense.btn.primary.finance-btn-add,
button#addExpense.btn.primary.finance-btn-add,
body .expenses-page #addExpense.btn.primary,
body .expenses-page .finance-btn-add.btn.primary,
body .finance-page #addExpense.btn.primary,
body .finance-btn-add.btn.primary,
body .finance-toolbar #addExpense.btn.primary,
body .expense-toolbar #addExpense.btn.primary {
  background-color: #2563eb !important;
  background-image: linear-gradient(120deg, #3b82f6, #1d4ed8) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  border: 1px solid #1d4ed8 !important;
  opacity: 1 !important;
  box-shadow: 0 8px 18px rgba(59, 130, 246, 0.28) !important;
  font-weight: 800;
}

body.use-new-ui #appContent button#addExpense.btn.primary.finance-btn-add:hover:not(:disabled),
body #appContent button#addExpense.btn.primary.finance-btn-add:hover:not(:disabled),
button#addExpense.btn.primary.finance-btn-add:hover:not(:disabled),
body .expenses-page #addExpense.btn.primary:hover:not(:disabled),
body .expenses-page .finance-btn-add.btn.primary:hover:not(:disabled),
body .finance-page #addExpense.btn.primary:hover:not(:disabled),
body .finance-btn-add.btn.primary:hover:not(:disabled),
body .finance-toolbar #addExpense.btn.primary:hover:not(:disabled),
body .expense-toolbar #addExpense.btn.primary:hover:not(:disabled) {
  filter: brightness(1.05);
  background-color: #1d4ed8 !important;
  background-image: linear-gradient(120deg, #3b82f6, #1e40af) !important;
  box-shadow: 0 12px 26px rgba(59, 130, 246, 0.32) !important;
}

/* KPI: cùng fragment .finance-page; .expenses-page khi có trên route wrapper */
body .expenses-page .finance-kpi-label,
body .finance-page .finance-kpi-label {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.04em;
}

body .expenses-page .finance-kpi-value,
body .finance-page .finance-kpi-value {
  font-size: clamp(26px, 3.5vw, 36px);
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -0.02em;
}

body .expenses-page .finance-kpi-card--hero-wide .finance-kpi-value,
body .finance-page .finance-kpi-card--hero-wide .finance-kpi-value {
  font-size: clamp(28px, 4vw, 42px);
}