:root {
  --primary-color: #2a80ff;
  --blue-50: #f6f8fc;
  --blue-100: #bbd3f8;
  --text-color: #0b2852;
  --text-color-secondary: #6079a6;
  /* Table header tint. Each overlay defines this, so the header follows the
     mode instead of every component restating a literal. */
  --table-header-bg: #edf3ff;

  /* ---------------------------------------------------------------------
     Status colours - LIGHT pairing (#205).

     Moved here from styles.css so they follow the mode. The hue carries the
     meaning and never changes; only the tint/text lightness flips per mode.
     These are the exact values they had in the app sheet, so light mode is
     pixel-identical. Contrast, measured: 4.39-6.05, all AA.

     Keep each -bg with its -text. They are readable as a pair and not
     otherwise.
     --------------------------------------------------------------------- */
  --status-warning-bg: #fffaeb;
  --status-warning-text: #b54708;
  --status-warning-border: #fedf89;

  --status-success-bg: #ecfdf3;
  --status-success-text: #027a48;
  --status-success-border: #abefc6;

  --status-danger-bg: #fef3f2;
  --status-danger-text: #b42318;
  --status-danger-border: #fecdca;

  --status-info-bg: #eff8ff;
  --status-info-text: #175cd3;
  --status-info-border: #b2ddff;

  /* "Draft" / "None" / inactive. Grey on grey is itself the meaning. */
  --status-neutral-bg: #f3f4f6;
  --status-neutral-text: #6b7280;

  /* ---------------------------------------------------------------------
     Account-category colours - LIGHT pairing (#205).

     The five chart-of-accounts categories. Same contract as --status-*: the
     hue carries the meaning and is constant across themes, the lightness
     pairing flips per mode. Previously these were Material-era palette
     literals inline in new-chart-of-accounts.tsx, so all 211 chips on
     /accounting/chart-of-accounts ignored the theme entirely.

     Two of these pairings failed AA at their old values and are corrected
     here - the tints are untouched, only the text darkened:
       revenue    #00838f -> #00616b   4.06 -> 6.45
       liability  #e65100 -> #9a3412   3.46 -> 6.66
     The other three are unchanged: expense 4.88, asset 4.56, equity 5.03.
     --------------------------------------------------------------------- */
  --category-revenue-bg: #e0f7fa;
  --category-revenue-text: #00616b;

  --category-expense-bg: #fce4ec;
  --category-expense-text: #c2185b;

  --category-asset-bg: #e8f5e9;
  --category-asset-text: #2e7d32;

  --category-liability-bg: #fff3e0;
  --category-liability-text: #9a3412;

  --category-equity-bg: #e3f2fd;
  --category-equity-text: #1565c0;

  /* ---------------------------------------------------------------------
     Semantic TEXT colours.

     PrimeReact's palette tokens (--green-500 and friends) are byte-identical
     in the light and dark themes, so they cannot serve as text colours in
     both. At the 500 level they are also too light to read on white:
     measured on the dashboard, #eab308 gives 1.92 and #22c55e 2.28 against
     the 4.5 AA needs.

     These are the TEXT counterparts, dark enough to read on a light surface;
     each overlay lifts them for its own background. Use the palette tokens
     for FILLS (a chart segment, a progress bar) and these for words - the
     aging widget needs both, one per role.
     --------------------------------------------------------------------- */
  --text-success: #15803d;
  --text-lime: #4d7c0f;
  --text-warning: #a16207;
  --text-orange: #c2410c;
  --text-danger: #b91c1c;
  /* Blue joined this set later and on purpose. It was held back because
     .text-blue-500 is a shade of the brand, so darkening it is a design
     decision rather than a defect fix - #195, approved explicitly. This is
     blue-600: 5.2:1 on white against the 3.7:1 of the #3b82f6 it replaces.
     NOTE it is NOT --primary-color (#2a80ff): that is the actual Calculx
     brand blue driving buttons and the navbar, and it stays untouched. */
  --text-info: #2563eb;
}

html {
  color: var(--text-color);
}

.surface-section {
  background-color: #eef2f9 !important;
}

.shadow {
  box-shadow: 0px 1px 18px 0px #00000017;
}

/*
  Solid primary buttons only. Without the :not() guards this also painted a
  background on .p-button-text and .p-button-outlined, which must stay
  transparent - producing a solid blue block with a blue label inside it
  (label #3b82f6 on background #2a80ff), i.e. an invisible button.
*/
.p-button-primary:not(.p-button-text):not(.p-button-outlined):not(.p-button-link) {
  background: #2a80ff;
}

.dashed-divider {
  border-top: dashed 1px #415066;
}

/* Scoped to data-table headers, matching the selector the dark overlays use.
   This was a bare `th`, which repainted every table element in the app - the
   date picker included, which the dark overlays style separately. The frozen
   action column is listed so it keeps matching the other headers. */
.p-datatable .p-datatable-thead > tr > th,
.p-datatable .p-datatable-thead > tr > th.p-frozen-column,
.p-datatable .p-datatable-thead > tr > th.actions-column-fixed,
.p-datatable-thead th.p-frozen-column,
.p-datatable-thead th.actions-column-fixed {
  background-color: var(--table-header-bg) !important;
  background: var(--table-header-bg) !important;
}

.p-datepicker table th {
  background: var(--table-header-bg) !important;
}

/* Frozen columns positioning */
.p-datatable .p-datatable-thead > tr > th.p-frozen-column,
.p-datatable .p-datatable-tbody > tr > td.p-frozen-column,
.p-datatable .p-datatable-thead > tr > th.actions-column-fixed,
.p-datatable .p-datatable-tbody > tr > td.actions-column-fixed {
  border-left: none !important;
  position: sticky !important;
}

/* Ensure frozen action column body cells have white background in light mode */
.p-datatable .p-datatable-tbody > tr > td.p-frozen-column,
.p-datatable .p-datatable-tbody > tr > td.actions-column-fixed,
.p-datatable-tbody td.p-frozen-column,
.p-datatable-tbody td.actions-column-fixed {
  background-color: #ffffff !important;
  background: #ffffff !important;
}

/* Striped rows - odd rows in frozen column */
.p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd > td.actions-column-fixed,
.p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd > td.p-frozen-column {
  background-color: var(--blue-50) !important;
}

.p-success {
  color: #37b20b;
}

.p-button-outlined:hover {
  background: #f8fafc !important;
}

/* Tab header styling for light mode */
.tab-header-container {
  background-color: #dbeafe !important;
}

.tab-header {
  color: #1e40af !important;
  background-color: transparent !important;
}

.tab-header.active-tab {
  background-color: #fff !important;
  color: #1e3a8a !important;
  font-weight: 500 !important;
}

.p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd {
  background: var(--blue-50);
}

.text-color-secondary {
  color: var(--text-color-secondary);
}

/* Custom dropdown styling for tenant selector - no borders */
.custom-dropdown.p-dropdown {
  background: #ffffff !important;
  border: none !important;
  border-radius: 10px !important;
}

.custom-dropdown.p-dropdown:not(.p-disabled):hover {
  border: none !important;
}

.custom-dropdown.p-dropdown:not(.p-disabled).p-focus {
  outline: 0 none !important;
  outline-offset: 0 !important;
  box-shadow: none !important;
  border: none !important;
}