/*
 * Tessarakt Brand Edition
 * Presentation-only application theme. Loaded after all legacy and module CSS
 * so application behavior, markup, renderers, and data flows remain unchanged.
 */

:root,
html[data-theme="dark"],
body[data-theme="dark"] {
  --bg: #031a26;
  --bg-deep: #031a26;
  --bg-app: #031a26;
  --bg-sidebar: #08263a;
  --panel: #08263a;
  --panel-2: #0b2f46;
  --panel-3: #0b2f46;
  --card: #0b2f46;
  --card-2: #08263a;
  --surface: #08263a;
  --surface-2: #0b2f46;
  --surface-3: #123d5a;
  --line: rgba(125, 216, 244, 0.1);
  --border: rgba(125, 216, 244, 0.1);
  --border-soft: rgba(125, 216, 244, 0.08);
  --blue: #1d8ce8;
  --accent: #1d8ce8;
  --indigo: #0f5fd3;
  --purple: #1d8ce8;
  --green: #26b5e8;
  --success: #26b5e8;
  --amber: #26b5e8;
  --warning: #26b5e8;
  --cyan: #26b5e8;
  --shadow: 0 8px 24px rgba(3, 26, 38, 0.35);
  --shadow-soft: 0 8px 24px rgba(3, 26, 38, 0.35);

  --color-bg-app: #031a26;
  --color-bg-surface: #0b2f46;
  --color-bg-surface-subtle: #08263a;
  --color-bg-surface-elevated: #0b2f46;
  --color-bg-input: #08263a;
  --color-bg-overlay: rgba(3, 26, 38, 0.78);
  --color-bg-hover: rgba(38, 181, 232, 0.1);
  --color-bg-selected: rgba(29, 140, 232, 0.15);
  --color-border-default: rgba(125, 216, 244, 0.1);
  --color-border-strong: rgba(125, 216, 244, 0.15);
  --color-border-subtle: rgba(125, 216, 244, 0.08);
  --color-action-primary: #1d8ce8;
  --color-action-primary-hover: #26b5e8;
  --color-action-secondary: #08263a;
  --color-action-secondary-hover: rgba(29, 140, 232, 0.1);
  --color-focus-ring: #26b5e8;
  --color-info: #1d8ce8;
  --color-accent: #26b5e8;
  --color-success: #26b5e8;
  --color-warning: #1d8ce8;
  --color-value-positive: #26b5e8;
  --color-value-neutral: #1d8ce8;
  --color-value-accent: #7dd8f4;
  --card-radius: 1rem;
  --card-shadow: 0 8px 24px rgba(3, 26, 38, 0.35);
  --button-height: 2.75rem;
  --input-height: 2.75rem;
}

html[data-theme="dark"],
html[data-theme="dark"] body,
body[data-theme="dark"],
#app-shell {
  background: #031a26;
}

html[data-theme="dark"] #app-shell > .app-header {
  border-bottom-color: rgba(125, 216, 244, 0.1);
  background: #08263a;
  box-shadow: none;
  backdrop-filter: none;
}

html[data-theme="dark"] #layout > .sidebar {
  border-right-color: rgba(125, 216, 244, 0.1);
  background: #08263a;
  box-shadow: none;
}

html[data-theme="dark"] #layout > .sidebar .nav-section + .nav-section,
html[data-theme="dark"] #layout > .sidebar .sidebar-top,
html[data-theme="dark"] #layout > .sidebar .sidebar-footer {
  border-color: rgba(125, 216, 244, 0.08);
}

html[data-theme="dark"] #layout > .sidebar .nav-btn:hover {
  background: rgba(38, 181, 232, 0.1);
}

html[data-theme="dark"] #layout > .sidebar .nav-btn.active {
  background: linear-gradient(90deg, #0f5fd3, #1d8ce8);
  box-shadow: none;
}

html[data-theme="dark"] #layout > .sidebar .nav-btn.active::before {
  width: 4px;
  background: #7dd8f4;
  box-shadow: none;
}

html[data-theme="dark"] #layout > .sidebar #sidebar-toggle,
html[data-theme="dark"] #layout > .sidebar .sidebar-theme-control {
  border-color: rgba(125, 216, 244, 0.1);
  background: #0b2f46;
  box-shadow: none;
}

html[data-theme="dark"] :is(
  .card,
  .ui-card,
  .side-card,
  .kpi-card,
  .dashboard-module-card,
  .receipt-summary-card,
  .bank-card,
  .outstanding-table-card,
  .commitment-section,
  .report-table-card,
  .reports-visual-card,
  .sales-import-tracker,
  .dashboard-main,
  .dashboard-highlight-card
) {
  border-color: rgba(125, 216, 244, 0.08) !important;
  border-radius: 1rem;
  background: #0b2f46 !important;
  background-image: none !important;
  box-shadow: 0 8px 24px rgba(3, 26, 38, 0.35) !important;
}

html[data-theme="dark"] :is(
  .card,
  .ui-card,
  .side-card,
  .dashboard-module-card,
  .bank-card,
  .dashboard-highlight-card
):hover {
  border-color: rgba(125, 216, 244, 0.1) !important;
  background: #123d5a !important;
}

html[data-theme="dark"] :is(
  .toolbar,
  .ui-toolbar,
  .ui-filter-bar,
  .ui-table-toolbar,
  .data-toolbar,
  .commitment-filter-bar,
  .commitment-matrix-toolbar,
  .sales-filter-bar,
  .outstanding-toolbar
) {
  border-color: rgba(125, 216, 244, 0.1) !important;
  background: #08263a !important;
  background-image: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

html[data-theme="dark"] :is(
  .table-wrap,
  .ui-table-container,
  .outstanding-table-wrap,
  .commitment-table-wrap,
  .commitment-matrix-wrap
) {
  border-color: rgba(125, 216, 244, 0.1) !important;
  background: #08263a !important;
  box-shadow: none !important;
  scrollbar-color: #1d8ce8 #08263a;
}

html[data-theme="dark"] :is(.data-table, .ui-table, .sales-master-table, .commitment-table, .commitment-matrix) {
  background: #08263a !important;
}

html[data-theme="dark"] :is(.data-table, .ui-table, .sales-master-table, .commitment-table, .commitment-matrix) thead th {
  border-color: rgba(125, 216, 244, 0.08) !important;
  background: #0b2f46 !important;
  background-image: none !important;
}

html[data-theme="dark"] :is(.data-table, .ui-table, .sales-master-table, .commitment-table, .commitment-matrix) tbody tr,
html[data-theme="dark"] :is(.data-table, .ui-table, .sales-master-table, .commitment-table, .commitment-matrix) tbody td {
  border-color: rgba(125, 216, 244, 0.08) !important;
  background: #08263a;
}

html[data-theme="dark"] :is(.data-table, .ui-table, .sales-master-table, .commitment-table, .commitment-matrix) tbody tr:nth-child(even) td {
  background: #0a3048 !important;
}

html[data-theme="dark"] :is(.data-table, .ui-table, .sales-master-table, .commitment-table, .commitment-matrix) tbody tr:hover td {
  background: #123d5a !important;
}

html[data-theme="dark"] :is(.data-table, .ui-table) tbody tr:focus-within td,
html[data-theme="dark"] :is(.data-table, .ui-table) tbody tr.selected td {
  background: rgba(29, 140, 232, 0.15) !important;
}

html[data-theme="dark"] :is(
  .frozen-first-column,
  .frozen-action-column,
  .ui-table-column--frozen-first,
  .ui-table-column--frozen-last
) {
  border-color: rgba(125, 216, 244, 0.08) !important;
  background: #08263a !important;
  box-shadow: none !important;
}

html[data-theme="dark"] :is(input, select, textarea, .ui-input, .ui-select, .ui-textarea) {
  min-height: 2.75rem;
  border-color: rgba(125, 216, 244, 0.15) !important;
  background: #08263a !important;
  box-shadow: none !important;
}

html[data-theme="dark"] :is(input, select, textarea, .ui-input, .ui-select, .ui-textarea):hover {
  border-color: #1d8ce8 !important;
}

html[data-theme="dark"] :is(input, select, textarea, .ui-input, .ui-select, .ui-textarea):focus,
html[data-theme="dark"] :is(input, select, textarea, .ui-input, .ui-select, .ui-textarea):focus-visible {
  border-color: #26b5e8 !important;
  outline-color: #26b5e8 !important;
  box-shadow: 0 0 0 3px rgba(38, 181, 232, 0.1) !important;
}

html[data-theme="dark"] :is(
  .primary-btn,
  .ui-btn-primary,
  button.primary,
  .button-primary
) {
  min-height: 2.75rem;
  border-color: #1d8ce8 !important;
  background: #1d8ce8 !important;
  background-image: none !important;
  box-shadow: none !important;
}

html[data-theme="dark"] :is(.primary-btn, .ui-btn-primary, button.primary, .button-primary):hover {
  border-color: #26b5e8 !important;
  background: #26b5e8 !important;
}

html[data-theme="dark"] :is(.primary-btn, .ui-btn-primary, button.primary, .button-primary):active {
  border-color: #0f5fd3 !important;
  background: #0f5fd3 !important;
}

html[data-theme="dark"] :is(
  .secondary-btn,
  .ghost-btn,
  .ui-btn-secondary,
  .ui-btn-ghost,
  .icon-btn,
  .bank-link
):not(.danger-btn):not(.ui-btn-danger) {
  min-height: 2.75rem;
  border-color: #1d8ce8 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

html[data-theme="dark"] :is(
  .secondary-btn,
  .ghost-btn,
  .ui-btn-secondary,
  .ui-btn-ghost,
  .icon-btn,
  .bank-link
):not(.danger-btn):not(.ui-btn-danger):hover {
  background: rgba(29, 140, 232, 0.1) !important;
}

html[data-theme="dark"] :is(
  .modal,
  .dialog,
  .ui-dialog,
  .modal-card,
  .dialog-card,
  .sales-conflict-modal,
  .column-filter-popover,
  .action-menu-list,
  .user-menu-panel
) {
  border-color: rgba(125, 216, 244, 0.1) !important;
  background: #08263a !important;
  background-image: none !important;
  box-shadow: 0 8px 24px rgba(3, 26, 38, 0.35) !important;
}

html[data-theme="dark"] :is(
  .sheet-tabs button,
  .sales-tabs button,
  .subtabs button,
  .tab-btn,
  .step
) {
  border-color: rgba(125, 216, 244, 0.1) !important;
  background: transparent !important;
  background-image: none !important;
}

html[data-theme="dark"] :is(
  .sheet-tabs button,
  .sales-tabs button,
  .subtabs button,
  .tab-btn,
  .step
):hover {
  background: rgba(38, 181, 232, 0.1) !important;
}

html[data-theme="dark"] :is(
  .sheet-tabs button.active,
  .sales-tabs button.active,
  .subtabs button.active,
  .tab-btn.active,
  .step.active
) {
  border-color: #7dd8f4 !important;
  background: #1d8ce8 !important;
  box-shadow: inset 0 -2px 0 #7dd8f4 !important;
}

html[data-theme="dark"] :is(
  .purple,
  .green,
  .blue,
  .amber,
  .warning,
  .orange,
  .bank-summary-block.purple,
  .bank-summary-block.green,
  .bank-summary-block.blue
) {
  color: #26b5e8 !important;
}

html[data-theme="dark"] :is(
  .purple-bg,
  .green-bg,
  .blue-bg,
  .amber-bg,
  .warning-bg,
  .orange-bg
) {
  border-color: #1d8ce8 !important;
  background: #1d8ce8 !important;
  background-image: none !important;
}

html[data-theme="dark"] :is(
  .director-praveen,
  .director-rahil,
  .dashboard-module-column > h3,
  .dashboard-highlight-card,
  .pool-card,
  .bank-summary-block
) {
  border-color: rgba(125, 216, 244, 0.1) !important;
}

html[data-theme="dark"] :is(
  .badge,
  .ui-badge,
  .status-pill,
  .ui-status-pill,
  .director-chip,
  .type-pill
):not(.danger):not(.red):not(.ui-badge-danger) {
  border-color: rgba(125, 216, 244, 0.15) !important;
  background: rgba(29, 140, 232, 0.15) !important;
  color: #7dd8f4 !important;
}

html[data-theme="dark"] :is(
  .notice,
  .toast,
  .notification,
  .info-notice
):not(.danger-notice):not(.error) {
  border-color: #1d8ce8 !important;
  background: #08263a !important;
  background-image: none !important;
}

html[data-theme="dark"] :is(
  .kpi-card,
  .ui-card-kpi,
  .receipt-summary-card,
  .vendor-payment-summary-card
)::before {
  background: #26b5e8 !important;
  background-image: none !important;
}

html[data-theme="dark"] :is(
  .progress-track,
  .cash-flow-track,
  progress
) {
  background: rgba(125, 216, 244, 0.15) !important;
}

html[data-theme="dark"] :is(
  .progress-fill,
  .cash-flow-fill
) {
  background: #26b5e8 !important;
  background-image: none !important;
}

html[data-theme="dark"] progress::-webkit-progress-value {
  background: #26b5e8;
}

html[data-theme="dark"] progress::-moz-progress-bar {
  background: #26b5e8;
}

html[data-theme="dark"] :is(
  .bar,
  .report-bar,
  .mini-bar,
  .chart-bar,
  .bank-gauge-fill,
  .kpi-ring-value
) {
  stroke: #26b5e8 !important;
  background: #26b5e8 !important;
  background-image: none !important;
}

html[data-theme="dark"] :is(.bar.out, .report-bar.red-bg, .chart-bar:nth-child(even)) {
  stroke: #0f5fd3 !important;
  background: #0f5fd3 !important;
}

html[data-theme="dark"] svg stop:nth-child(1) {
  stop-color: #0f5fd3 !important;
}

html[data-theme="dark"] svg stop:nth-child(2) {
  stop-color: #1d8ce8 !important;
}

html[data-theme="dark"] svg stop:nth-child(3) {
  stop-color: #26b5e8 !important;
}

html[data-theme="dark"] :is(.auth-card, .login-card) {
  border-color: rgba(125, 216, 244, 0.1) !important;
  background: #08263a !important;
  background-image: none !important;
  box-shadow: 0 8px 24px rgba(3, 26, 38, 0.35) !important;
}

html[data-theme="dark"] #app-shell > .app-footer {
  border-top-color: rgba(125, 216, 244, 0.08);
  background: #08263a;
}

html[data-theme="dark"] * {
  scrollbar-width: thin;
  scrollbar-color: #1d8ce8 #08263a;
}

html[data-theme="dark"] *::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

html[data-theme="dark"] *::-webkit-scrollbar-track {
  background: #08263a;
}

html[data-theme="dark"] *::-webkit-scrollbar-thumb {
  border: 2px solid #08263a;
  border-radius: 999px;
  background: #1d8ce8;
}

html[data-theme="dark"] *::-webkit-scrollbar-thumb:hover {
  background: #26b5e8;
}

html[data-theme="dark"] :focus-visible {
  outline-color: #26b5e8;
}

@media (max-width: 980px) {
  html[data-theme="dark"] #layout > .sidebar {
    border-color: rgba(125, 216, 244, 0.1);
  }
}

@media print {
  html[data-theme="dark"],
  html[data-theme="dark"] body {
    background: transparent;
  }
}

/*
 * Reference calibration
 * Deeper navy hierarchy and restrained electric-blue accents matching the
 * approved ERP reference while retaining the existing application structure.
 */
:root,
html[data-theme="dark"],
body[data-theme="dark"] {
  --bg: #020f1b;
  --bg-deep: #020f1b;
  --bg-app: #020f1b;
  --bg-sidebar: #041827;
  --panel: #041827;
  --panel-2: #072238;
  --panel-3: #082a43;
  --card: #061e32;
  --card-2: #041827;
  --surface: #041827;
  --surface-2: #061e32;
  --surface-3: #0a2d49;
  --line: rgba(125, 216, 244, 0.12);
  --border: rgba(125, 216, 244, 0.12);
  --border-soft: rgba(125, 216, 244, 0.08);
  --color-bg-app: #020f1b;
  --color-bg-surface: #061e32;
  --color-bg-surface-subtle: #041827;
  --color-bg-surface-elevated: #082a43;
  --color-bg-input: #041827;
  --color-bg-hover: rgba(38, 181, 232, 0.08);
  --color-bg-selected: rgba(29, 140, 232, 0.16);
  --color-border-default: rgba(125, 216, 244, 0.12);
  --color-border-strong: rgba(125, 216, 244, 0.2);
  --color-border-subtle: rgba(125, 216, 244, 0.08);
}

html[data-theme="dark"],
html[data-theme="dark"] body,
html[data-theme="dark"] #app-shell,
html[data-theme="dark"] #layout,
html[data-theme="dark"] .main-panel {
  background: #020f1b !important;
}

html[data-theme="dark"] #app-shell > .app-header {
  border-bottom: 1px solid rgba(125, 216, 244, 0.12) !important;
  background: #041827 !important;
}

html[data-theme="dark"] #layout > .sidebar {
  border-right: 1px solid rgba(125, 216, 244, 0.16) !important;
  background: #041827 !important;
}

html[data-theme="dark"] #layout > .sidebar .nav-section-label {
  color: #7dd8f4 !important;
}

html[data-theme="dark"] #layout > .sidebar .nav-btn {
  color: inherit;
}

html[data-theme="dark"] #layout > .sidebar .nav-btn:hover {
  background: rgba(38, 181, 232, 0.08) !important;
}

html[data-theme="dark"] #layout > .sidebar .nav-btn.active {
  background: linear-gradient(90deg, #0f5fd3, #1d8ce8) !important;
}

html[data-theme="dark"] #layout > .sidebar .nav-icon {
  color: #7dd8f4;
}

html[data-theme="dark"] #layout > .sidebar .nav-text {
  font-size: 0.8125rem;
}

html[data-theme="dark"] #layout > .sidebar .sidebar-theme-control,
html[data-theme="dark"] #layout > .sidebar #sidebar-toggle {
  border-color: rgba(125, 216, 244, 0.14) !important;
  background: #061e32 !important;
}

html[data-theme="dark"] #page-dashboard .dashboard-main {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html[data-theme="dark"] :is(
  .card,
  .ui-card,
  .side-card,
  .kpi-card,
  .dashboard-module-card,
  .receipt-summary-card,
  .bank-card,
  .outstanding-table-card,
  .commitment-section,
  .report-table-card,
  .reports-visual-card,
  .sales-import-tracker,
  .dashboard-highlight-card
) {
  border-color: rgba(125, 216, 244, 0.12) !important;
  background: #061e32 !important;
  box-shadow: 0 8px 24px rgba(2, 15, 27, 0.3) !important;
}

html[data-theme="dark"] :is(
  .card,
  .ui-card,
  .side-card,
  .dashboard-module-card,
  .bank-card,
  .dashboard-highlight-card
):hover {
  border-color: rgba(38, 181, 232, 0.28) !important;
  background: #082a43 !important;
}

html[data-theme="dark"] :is(
  .toolbar,
  .ui-toolbar,
  .ui-filter-bar,
  .ui-table-toolbar,
  .data-toolbar,
  .commitment-filter-bar,
  .commitment-matrix-toolbar,
  .sales-filter-bar,
  .outstanding-toolbar,
  .table-wrap,
  .ui-table-container,
  .outstanding-table-wrap,
  .commitment-table-wrap,
  .commitment-matrix-wrap
) {
  border-color: rgba(125, 216, 244, 0.12) !important;
  background: #041827 !important;
}

html[data-theme="dark"] :is(.data-table, .ui-table, .sales-master-table, .commitment-table, .commitment-matrix) {
  background: #041827 !important;
}

html[data-theme="dark"] :is(.data-table, .ui-table, .sales-master-table, .commitment-table, .commitment-matrix) thead th {
  background: #082a43 !important;
}

html[data-theme="dark"] :is(.data-table, .ui-table, .sales-master-table, .commitment-table, .commitment-matrix) tbody tr,
html[data-theme="dark"] :is(.data-table, .ui-table, .sales-master-table, .commitment-table, .commitment-matrix) tbody td {
  background: #041827;
}

html[data-theme="dark"] :is(.data-table, .ui-table, .sales-master-table, .commitment-table, .commitment-matrix) tbody tr:nth-child(even) td {
  background: #061e32 !important;
}

html[data-theme="dark"] :is(.data-table, .ui-table, .sales-master-table, .commitment-table, .commitment-matrix) tbody tr:hover td {
  background: #0a2d49 !important;
}

html[data-theme="dark"] :is(
  .frozen-first-column,
  .frozen-action-column,
  .ui-table-column--frozen-first,
  .ui-table-column--frozen-last
) {
  background: #041827 !important;
}

html[data-theme="dark"] :is(input, select, textarea, .ui-input, .ui-select, .ui-textarea) {
  background: #041827 !important;
}

html[data-theme="dark"] :is(
  .modal,
  .dialog,
  .ui-dialog,
  .modal-card,
  .dialog-card,
  .sales-conflict-modal,
  .column-filter-popover,
  .action-menu-list,
  .user-menu-panel
) {
  background: #041827 !important;
}

html[data-theme="dark"] :is(
  .dashboard-module-column > h3,
  .dashboard-highlight-card,
  .pool-card,
  .bank-summary-block
) {
  border-color: rgba(125, 216, 244, 0.14) !important;
  background: #061e32 !important;
}

html[data-theme="dark"] :is(
  .dashboard-module-column > h3,
  .dashboard-module-column > h3 *,
  .dashboard-module-card strong,
  .dashboard-module-card .module-link,
  .dashboard-highlight-card strong,
  .receipt-summary-card strong,
  .vendor-payment-summary-card strong
) {
  color: #7dd8f4 !important;
}

html[data-theme="dark"] :is(
  .dashboard-module-card,
  .dashboard-highlight-card,
  .receipt-summary-card,
  .vendor-payment-summary-card
) {
  --receipt-accent: #26b5e8 !important;
  --module-accent: #26b5e8 !important;
  --dashboard-accent: #26b5e8 !important;
}

html[data-theme="dark"] :is(
  .dashboard-module-card,
  .dashboard-highlight-card,
  .receipt-summary-card,
  .vendor-payment-summary-card
)::before {
  background: #26b5e8 !important;
}

html[data-theme="dark"] :is(.badge, .ui-badge, .status-pill, .ui-status-pill, .director-chip, .type-pill):not(.danger):not(.red):not(.ui-badge-danger) {
  border-color: rgba(38, 181, 232, 0.22) !important;
  background: rgba(29, 140, 232, 0.12) !important;
  color: #7dd8f4 !important;
}

html[data-theme="dark"] * {
  scrollbar-color: #0f5fd3 #041827;
}

html[data-theme="dark"] *::-webkit-scrollbar-track {
  background: #041827;
}

html[data-theme="dark"] *::-webkit-scrollbar-thumb {
  border-color: #041827;
  background: #0f5fd3;
}

/* Dashboard and navigation density aligned to the approved reference */
html[data-theme="dark"] #layout > .sidebar .nav-btn {
  padding-inline: 0.875rem;
}

html[data-theme="dark"] #layout > .sidebar .nav-text {
  max-width: none !important;
  overflow: visible !important;
  color: inherit;
  font-size: 0.8125rem;
  text-overflow: clip !important;
  white-space: nowrap !important;
}

html[data-theme="dark"] #layout > .sidebar .nav-icon {
  width: 1.5rem;
  height: 1.5rem;
  flex-basis: 1.5rem;
}

html[data-theme="dark"] #layout > .sidebar .nav-section {
  gap: 0.375rem;
  padding-block: 1.125rem;
}

html[data-theme="dark"] #layout > .sidebar .nav-section-label {
  padding-bottom: 0.625rem;
  font-size: 0.6875rem;
  letter-spacing: 0.11em;
}

html[data-theme="dark"] #page-dashboard {
  --dashboard-column-gap: 1rem;
}

html[data-theme="dark"] #page-dashboard .dashboard-page-header {
  margin-bottom: 1.25rem;
  padding-bottom: 1.25rem;
}

html[data-theme="dark"] #page-dashboard .dashboard-highlight-grid,
html[data-theme="dark"] #page-dashboard .dashboard-module-grid {
  gap: 1rem;
}

html[data-theme="dark"] #page-dashboard .dashboard-highlight-grid {
  margin-bottom: 1rem;
}

html[data-theme="dark"] #page-dashboard .dashboard-module-column {
  grid-auto-rows: minmax(8.75rem, auto);
  gap: 0.75rem;
}

html[data-theme="dark"] #page-dashboard .dashboard-module-column > h3 {
  min-height: 3.25rem;
  padding: 0.875rem 1.125rem !important;
  border: 1px solid rgba(125, 216, 244, 0.12) !important;
  border-left: 3px solid #1d8ce8 !important;
  border-radius: 0.75rem !important;
  background: #041827 !important;
  color: #7dd8f4 !important;
  font-size: 1rem !important;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-shadow: none !important;
  box-shadow: none !important;
}

html[data-theme="dark"] #page-dashboard .dashboard-module-column > h3::before {
  width: 0.5rem;
  height: 0.5rem;
  flex-basis: 0.5rem;
  border: 0;
  background: #1d8ce8;
  box-shadow: none;
}

html[data-theme="dark"] #page-dashboard .dashboard-module-card {
  min-height: 8.75rem;
  padding: 1.125rem 1.25rem !important;
  border-radius: 0.75rem !important;
}

html[data-theme="dark"] #page-dashboard .dashboard-module-card::before {
  top: 0;
  right: 1.25rem;
  bottom: auto;
  left: 1.25rem;
  width: auto;
  height: 2px;
  background: #1d8ce8 !important;
}

html[data-theme="dark"] #page-dashboard .dashboard-module-card .dashboard-module-label {
  color: inherit !important;
  font-size: 0.6875rem;
  letter-spacing: 0.07em;
}

html[data-theme="dark"] #page-dashboard .dashboard-module-card .ui-card-kpi__value,
html[data-theme="dark"] #page-dashboard .dashboard-highlight-grid .dashboard-module-card strong,
html[data-theme="dark"] #page-dashboard .dashboard-module-grid .dashboard-module-card strong {
  margin-top: 0.25rem;
  color: inherit !important;
  font-size: clamp(1.45rem, 1.7vw, 1.85rem);
  font-weight: 750;
}

html[data-theme="dark"] #page-dashboard .dashboard-module-card .ui-card-kpi__meta,
html[data-theme="dark"] #page-dashboard .dashboard-module-card small {
  padding-top: 0;
  color: inherit !important;
  font-size: 0.75rem;
}

html[data-theme="dark"] #page-dashboard .dashboard-module-open {
  margin-top: 0.5rem;
  padding-top: 0.25rem;
  color: #26b5e8 !important;
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
}

html[data-theme="dark"] #page-dashboard .dashboard-module-card:hover {
  transform: none;
  border-color: rgba(38, 181, 232, 0.35) !important;
  background: #082a43 !important;
  box-shadow: none !important;
}

html[data-theme="dark"] #page-dashboard .dashboard-module-column:nth-child(1) > h3,
html[data-theme="dark"] #page-dashboard .dashboard-module-column:nth-child(2) > h3,
html[data-theme="dark"] #page-dashboard .dashboard-module-column:nth-child(3) > h3 {
  --module-heading-accent: #1d8ce8;
}

html[data-theme="dark"] #page-dashboard :is(
  .tone-green,
  .tone-red,
  .tone-purple,
  .tone-blue
) {
  --module-accent: #1d8ce8 !important;
}

/* ========================================================================== 
   Legacy semantic accents
   Keep the Tessarakt navy surfaces while restoring the finance-oriented
   foreground colours used before the application-wide blue accent migration.
   ========================================================================== */

:root,
html[data-theme="dark"],
body[data-theme="dark"] {
  --blue: #5b7cfa;
  --accent: #5b7cfa;
  --indigo: #7864f4;
  --purple: #a78bfa;
  --green: #67c99a;
  --success: #67c99a;
  --red: #e88396;
  --danger: #e88396;
  --amber: #e6a85b;
  --warning: #e6a85b;
  --money-in: #67c99a;
  --money-out: #e88396;
  --money-net: #5b7cfa;
  --money-reserve: #a78bfa;
  --director-praveen: #67c99a;
  --director-rahil: #e6a85b;
  --color-action-primary: #5b7cfa;
  --color-action-primary-hover: #6c91ff;
  --color-info: #5b7cfa;
  --color-accent: #a78bfa;
  --color-success: #67c99a;
  --color-warning: #e6a85b;
  --color-danger: #e88396;
  --color-value-positive: #67c99a;
  --color-value-negative: #e88396;
  --color-value-neutral: #5b7cfa;
  --color-value-accent: #a78bfa;
}

html[data-theme="dark"] .green {
  color: #67c99a !important;
}

html[data-theme="dark"] .red {
  color: #e88396 !important;
}

html[data-theme="dark"] .blue {
  color: #5b7cfa !important;
}

html[data-theme="dark"] .purple {
  color: #a78bfa !important;
}

html[data-theme="dark"] :is(.amber, .warning, .orange) {
  color: #e6a85b !important;
}

html[data-theme="dark"] .green-bg {
  background: #67c99a !important;
}

html[data-theme="dark"] .red-bg {
  background: #e88396 !important;
}

html[data-theme="dark"] .blue-bg {
  background: #5b7cfa !important;
}

html[data-theme="dark"] .purple-bg {
  background: #a78bfa !important;
}

html[data-theme="dark"] :is(.amber-bg, .warning-bg, .orange-bg) {
  background: #e6a85b !important;
}

html[data-theme="dark"] #page-dashboard .tone-green {
  --module-accent: #47d7a0 !important;
}

html[data-theme="dark"] #page-dashboard .tone-red {
  --module-accent: #f07f98 !important;
}

html[data-theme="dark"] #page-dashboard .tone-purple {
  --module-accent: #9c83ff !important;
}

html[data-theme="dark"] #page-dashboard .tone-blue {
  --module-accent: #6c91ff !important;
}

html[data-theme="dark"] #page-dashboard .dashboard-module-card::before {
  background: var(--module-accent, #6c91ff) !important;
}

html[data-theme="dark"] #page-dashboard .dashboard-module-card .dashboard-module-label {
  color: var(--muted) !important;
}

html[data-theme="dark"] #page-dashboard .dashboard-module-card :is(
  strong,
  .ui-card-kpi__value,
  .dashboard-module-open
) {
  color: var(--module-accent, #6c91ff) !important;
}

html[data-theme="dark"] #page-dashboard .dashboard-module-card :is(
  small,
  .ui-card-kpi__meta
) {
  color: var(--muted) !important;
}

html[data-theme="dark"] #page-dashboard .dashboard-module-column > h3 {
  color: var(--text) !important;
  border-left-color: var(--module-heading-accent, #6c91ff) !important;
}

html[data-theme="dark"] #page-dashboard .dashboard-module-column > h3::before {
  background: var(--module-heading-accent, #6c91ff) !important;
  box-shadow: 0 0 0.625rem color-mix(in srgb, var(--module-heading-accent, #6c91ff) 55%, transparent);
}

html[data-theme="dark"] #page-dashboard .dashboard-module-column:nth-child(1) > h3 {
  --module-heading-accent: #47d7a0;
}

html[data-theme="dark"] #page-dashboard .dashboard-module-column:nth-child(2) > h3 {
  --module-heading-accent: #6c91ff;
}

html[data-theme="dark"] #page-dashboard .dashboard-module-column:nth-child(3) > h3 {
  --module-heading-accent: #9c83ff;
}

html[data-theme="dark"] .receipt-summary-card.tone-green {
  --receipt-accent: #47d7a0 !important;
}

html[data-theme="dark"] .receipt-summary-card.tone-red {
  --receipt-accent: #f07f98 !important;
}

html[data-theme="dark"] .receipt-summary-card.tone-purple {
  --receipt-accent: #9c83ff !important;
}

html[data-theme="dark"] .receipt-summary-card.tone-blue {
  --receipt-accent: #6c91ff !important;
}

html[data-theme="dark"] .receipt-summary-card::before {
  background: var(--receipt-accent, #6c91ff) !important;
}

html[data-theme="dark"] .receipt-summary-card strong {
  color: var(--receipt-accent, #6c91ff) !important;
}

html[data-theme="dark"] .director-chip.praveen {
  border-color: rgba(103, 201, 154, 0.38) !important;
  background: rgba(103, 201, 154, 0.14) !important;
  color: #9de2bd !important;
}

html[data-theme="dark"] .director-chip.rahil {
  border-color: rgba(230, 168, 91, 0.38) !important;
  background: rgba(230, 168, 91, 0.14) !important;
  color: #f0ce84 !important;
}

html[data-theme="dark"] .director-chip.both {
  border-color: rgba(167, 139, 250, 0.38) !important;
  background: rgba(167, 139, 250, 0.14) !important;
  color: #c7b6ff !important;
}

html[data-theme="dark"] :is(
  .status-pill.paid,
  .status-pill.completed,
  .ui-status-paid,
  .ui-status-completed,
  .ui-badge-success
) {
  border-color: rgba(103, 201, 154, 0.38) !important;
  background: rgba(103, 201, 154, 0.14) !important;
  color: #9de2bd !important;
}

html[data-theme="dark"] :is(
  .status-pill.pending,
  .ui-status-pending,
  .ui-badge-warning
) {
  border-color: rgba(230, 168, 91, 0.38) !important;
  background: rgba(230, 168, 91, 0.14) !important;
  color: #f0ce84 !important;
}

html[data-theme="dark"] :is(
  .status-pill.overdue,
  .ui-status-overdue,
  .ui-badge-danger
) {
  border-color: rgba(232, 131, 150, 0.38) !important;
  background: rgba(232, 131, 150, 0.14) !important;
  color: #f3a5b4 !important;
}

html[data-theme="dark"] :is(
  .status-pill.draft,
  .ui-status-draft,
  .ui-badge-info
) {
  border-color: rgba(167, 139, 250, 0.38) !important;
  background: rgba(167, 139, 250, 0.14) !important;
  color: #c7b6ff !important;
}

html[data-theme="dark"] :is(.bar.in, .report-bar.green-bg) {
  background: #67c99a !important;
}

html[data-theme="dark"] :is(.bar.out, .report-bar.red-bg) {
  background: #e88396 !important;
}

html[data-theme="dark"] .cash-flow-fill {
  background: linear-gradient(90deg, #67c99a, #e6a85b, #e88396) !important;
}

/* Dashboard values have higher-specificity legacy rules. Keep these explicit so
   semantic KPI colours cannot fall back to inherited white. */
html[data-theme="dark"] #page-dashboard .dashboard-highlight-grid .dashboard-module-card.tone-green strong,
html[data-theme="dark"] #page-dashboard .dashboard-module-grid .dashboard-module-card.tone-green strong,
html[data-theme="dark"] #page-dashboard .dashboard-module-card.tone-green .ui-card-kpi__value {
  color: #47d7a0 !important;
}

html[data-theme="dark"] #page-dashboard .dashboard-highlight-grid .dashboard-module-card.tone-red strong,
html[data-theme="dark"] #page-dashboard .dashboard-module-grid .dashboard-module-card.tone-red strong,
html[data-theme="dark"] #page-dashboard .dashboard-module-card.tone-red .ui-card-kpi__value {
  color: #f07f98 !important;
}

html[data-theme="dark"] #page-dashboard .dashboard-highlight-grid .dashboard-module-card.tone-purple strong,
html[data-theme="dark"] #page-dashboard .dashboard-module-grid .dashboard-module-card.tone-purple strong,
html[data-theme="dark"] #page-dashboard .dashboard-module-card.tone-purple .ui-card-kpi__value {
  color: #9c83ff !important;
}

html[data-theme="dark"] #page-dashboard .dashboard-highlight-grid .dashboard-module-card.tone-blue strong,
html[data-theme="dark"] #page-dashboard .dashboard-module-grid .dashboard-module-card.tone-blue strong,
html[data-theme="dark"] #page-dashboard .dashboard-module-card.tone-blue .ui-card-kpi__value {
  color: #6c91ff !important;
}

html[data-theme="dark"] #page-dashboard .dashboard-module-column:nth-child(1) > h3 {
  color: #47d7a0 !important;
}

html[data-theme="dark"] #page-dashboard .dashboard-module-column:nth-child(2) > h3 {
  color: #6c91ff !important;
}

html[data-theme="dark"] #page-dashboard .dashboard-module-column:nth-child(3) > h3 {
  color: #9c83ff !important;
}

html[data-theme="dark"] #page-dashboard .dashboard-module-card :is(
  .dashboard-module-label,
  .ui-card-kpi__label
) {
  color: #a9a3bd !important;
}

html[data-theme="dark"] #page-dashboard .dashboard-module-card :is(
  small,
  .ui-card-kpi__meta
) {
  color: #9aa8ba !important;
}

/* Sidebar collapse control: a single directional arrow in both states. */
#layout > .sidebar #sidebar-toggle::after {
  display: none !important;
  content: none !important;
  background: none !important;
}

#layout > .sidebar #sidebar-toggle::before {
  margin: 0 !important;
  content: "\2039" !important;
  font-size: 2rem !important;
  line-height: 1 !important;
}

#layout.layout.sidebar-collapsed > .sidebar .sidebar-top {
  position: relative !important;
  z-index: 20;
  display: flex !important;
  min-height: 3.25rem !important;
  align-items: center;
  justify-content: center !important;
  padding: 0 0 0.75rem !important;
  overflow: visible;
}

#layout.layout.sidebar-collapsed > .sidebar .sidebar-brand {
  display: none !important;
}

#layout.layout.sidebar-collapsed > .sidebar #sidebar-toggle {
  position: static !important;
  top: auto !important;
  right: auto !important;
  display: grid !important;
  width: 2.75rem !important;
  height: 2.75rem !important;
  min-height: 2.75rem !important;
  margin: 0 auto !important;
  place-items: center;
  visibility: visible !important;
  opacity: 1 !important;
}

#layout.layout.sidebar-collapsed > .sidebar #sidebar-toggle::before {
  content: "\203A" !important;
}

/* ========================================================================== 
   Reference surface palette
   Restore the neutral charcoal backgrounds visible in the supplied pre-blue
   screenshots. Semantic foreground colours above remain unchanged.
   ========================================================================== */

html[data-theme="dark"],
html[data-theme="dark"] body,
body[data-theme="dark"],
html[data-theme="dark"] #app-shell {
  --bg: #0e1117;
  --panel: #171b24;
  --panel-2: #1b202b;
  --panel-3: #202633;
  --card: #171b24;
  --bg-card: #171b24;
  --bg-sidebar: #171b24;
  --color-bg-canvas: #0e1117;
  --color-bg-surface: #171b24;
  --color-bg-surface-subtle: #1b202b;
  --color-bg-surface-raised: #202633;
  --color-bg-overlay: #171b24;
  background: #0e1117 !important;
}

html[data-theme="dark"] #app-shell > .app-header {
  border-bottom-color: #262c38 !important;
  background: #0b0f16 !important;
}

html[data-theme="dark"] #layout > .sidebar {
  border-right-color: #262c38 !important;
  background: #171b24 !important;
}

html[data-theme="dark"] #layout > .sidebar .sidebar-menu {
  background: #171b24 !important;
}

html[data-theme="dark"] #layout > .sidebar :is(
  .sidebar-top,
  .sidebar-footer,
  .nav-section + .nav-section
) {
  border-color: #262c38 !important;
}

html[data-theme="dark"] #layout > .sidebar :is(
  #sidebar-toggle,
  .sidebar-theme-control
) {
  border-color: #303746 !important;
  background: #1b202b !important;
}

html[data-theme="dark"] :is(
  .card,
  .ui-card,
  .side-card,
  .kpi-card,
  .dashboard-module-card,
  .receipt-summary-card,
  .bank-card,
  .outstanding-table-card,
  .commitment-section,
  .report-table-card,
  .reports-visual-card,
  .sales-import-tracker,
  .dashboard-highlight-card
) {
  border-color: #2a303c !important;
  background: #171b24 !important;
}

html[data-theme="dark"] #page-dashboard .dashboard-module-column > h3 {
  border-color: #2a303c !important;
  background: #171b24 !important;
}

html[data-theme="dark"] #page-dashboard .dashboard-module-card:hover {
  border-color: #343c4b !important;
  background: #1b202b !important;
}

html[data-theme="dark"] :is(
  .ui-table-container,
  .table-wrap,
  .report-table-shell,
  .receipts-table-shell,
  .vendor-payments-table-shell,
  .sales-table-shell,
  table
) {
  border-color: #2a303c !important;
  background: #171b24 !important;
}

html[data-theme="dark"] :is(
  thead,
  thead tr,
  th,
  .ui-table thead,
  .ui-table th
) {
  border-color: #2a303c !important;
  background: #1b202b !important;
}

html[data-theme="dark"] :is(
  tbody tr,
  .ui-table tbody tr
) {
  border-color: #262c38 !important;
  background: #171b24 !important;
}

html[data-theme="dark"] :is(
  tbody tr:nth-child(even),
  .ui-table tbody tr:nth-child(even)
) {
  background: #1b202b !important;
}

html[data-theme="dark"] :is(
  input,
  select,
  textarea,
  .ui-input,
  .ui-select,
  .ui-textarea,
  .toolbar,
  .filter-bar,
  .ui-filter-bar,
  dialog,
  .modal,
  .dialog
) {
  border-color: #303746 !important;
  background-color: #1b202b !important;
}

/* Keep the navigation pane on the same deep charcoal base as the workspace. */
html[data-theme="dark"] #layout > .sidebar,
html[data-theme="dark"] #layout > .sidebar .sidebar-menu,
html[data-theme="dark"] #layout > .sidebar .sidebar-top,
html[data-theme="dark"] #layout > .sidebar .sidebar-footer {
  background-color: #0e1117 !important;
}

html[data-theme="dark"] #layout > .sidebar {
  border-right-color: #262c38 !important;
}

/* Dropdown menus must stay above sticky table headers and frozen columns. */
:is(
  .toolbar,
  .data-toolbar,
  .outstanding-toolbar,
  .ui-table-toolbar
):has(.action-menu[open]) {
  z-index: calc(var(--z-popover) + 20) !important;
  overflow: visible !important;
}

.action-menu[open] {
  z-index: calc(var(--z-popover) + 21) !important;
}

.action-menu .action-menu-list {
  z-index: calc(var(--z-popover) + 22) !important;
  max-height: min(26rem, calc(100vh - 9rem));
  padding: 0.5rem !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  border: 1px solid #303746 !important;
  border-radius: 1rem !important;
  background: #171b24 !important;
  box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, 0.42) !important;
  isolation: isolate;
}

.action-menu .action-menu-list :is(button, label, .ui-btn) {
  position: relative;
  z-index: 1;
  min-height: 2.5rem;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

.action-menu .action-menu-list :is(button, label, .ui-btn):hover {
  background: #202633 !important;
}

.column-menu .action-menu-list {
  max-height: min(26rem, calc(100vh - 9rem));
}

/* Unified module visual language */
html[data-theme="dark"] :is(#page-dashboard,#page-reports,#page-summary,#page-receipts,#page-vendor-payments,#page-monthly-commitments,#page-sales,#page-outstanding-vendors,#page-bank-balances,#page-access-control) {
  --module-surface: #171b24;
  --module-surface-subtle: #1b202b;
  --module-surface-hover: #202633;
  --module-line: #2a303c;
  --module-line-soft: #252b36;
  --module-table-head: #20212b;
  --module-table-row: #171b24;
  --module-table-row-alt: #1b202b;
  --module-radius: 1.25rem;
  --module-control-radius: 0.875rem;
  color: #f7f8fb;
}

html[data-theme="dark"] :is(#page-dashboard,#page-reports,#page-summary,#page-receipts,#page-vendor-payments,#page-monthly-commitments,#page-sales,#page-outstanding-vendors,#page-bank-balances,#page-access-control) > .page-header {
  min-height: 7.75rem;
  margin: 0 0 1.75rem !important;
  padding: 0 0 1.5rem !important;
  border-bottom: 1px solid var(--module-line-soft) !important;
  background: transparent !important;
}

html[data-theme="dark"] :is(#page-dashboard,#page-reports,#page-summary,#page-receipts,#page-vendor-payments,#page-monthly-commitments,#page-sales,#page-outstanding-vendors,#page-bank-balances,#page-access-control) > .page-header h2 {
  margin: 0 0 0.625rem !important;
  font-size: clamp(2.25rem, 3vw, 3.25rem) !important;
  line-height: 1.05 !important;
  letter-spacing: -0.035em !important;
}

html[data-theme="dark"] :is(#page-dashboard,#page-reports,#page-summary,#page-receipts,#page-vendor-payments,#page-monthly-commitments,#page-sales,#page-outstanding-vendors,#page-bank-balances,#page-access-control) > .page-header p {
  margin: 0 !important;
  color: #b6aec9 !important;
  font-size: 1rem !important;
  line-height: 1.55 !important;
}

html[data-theme="dark"] :is(#page-dashboard,#page-reports,#page-summary,#page-receipts,#page-vendor-payments,#page-monthly-commitments,#page-sales,#page-outstanding-vendors,#page-bank-balances,#page-access-control) :is(.ui-card,.card,.kpi-card,.receipt-summary-card,.outstanding-metric,.dashboard-module-card,.bank-card,.commitment-section,.report-table-card,.reports-visual-card) {
  border: 1px solid var(--module-line) !important;
  border-radius: var(--module-radius) !important;
  background: var(--module-surface) !important;
  box-shadow: none !important;
}

html[data-theme="dark"] :is(#page-dashboard,#page-reports,#page-summary,#page-receipts,#page-vendor-payments,#page-monthly-commitments,#page-sales,#page-outstanding-vendors,#page-bank-balances) :is(.ui-card-kpi,.kpi-card,.receipt-summary-card,.outstanding-metric) {
  min-height: 13.5rem;
  padding: 1.5rem !important;
}

html[data-theme="dark"] :is(#page-dashboard,#page-reports,#page-summary,#page-receipts,#page-vendor-payments,#page-monthly-commitments,#page-sales,#page-outstanding-vendors,#page-bank-balances) :is(.ui-card-kpi,.kpi-card,.receipt-summary-card,.outstanding-metric) :is(.ui-card-title,.kpi-label,.outstanding-metric-label,span:first-child) {
  font-size: 0.875rem !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
}

html[data-theme="dark"] :is(#page-dashboard,#page-reports,#page-summary,#page-receipts,#page-vendor-payments,#page-monthly-commitments,#page-sales,#page-outstanding-vendors,#page-bank-balances) :is(.ui-kpi-value,.kpi-value,.outstanding-metric-value,.receipt-summary-card > strong) {
  margin-top: 1.5rem !important;
  font-size: clamp(2rem, 2.5vw, 2.75rem) !important;
  line-height: 1.05 !important;
  letter-spacing: -0.035em !important;
}

html[data-theme="dark"] :is(#page-reports,#page-summary,#page-receipts,#page-vendor-payments,#page-monthly-commitments,#page-sales,#page-outstanding-vendors,#page-access-control) :is(.toolbar,.ui-toolbar,.ui-table-toolbar,.filter-bar,.commitment-filter-bar,.project-form-card,.settings-tabs,.vendor-import-card) {
  gap: 1.25rem !important;
  padding: 1.5rem !important;
  border: 1px solid var(--module-line) !important;
  border-radius: var(--module-radius) !important;
  background: var(--module-surface) !important;
  box-shadow: none !important;
}

html[data-theme="dark"] :is(#page-reports,#page-summary,#page-receipts,#page-vendor-payments,#page-monthly-commitments,#page-sales,#page-outstanding-vendors,#page-bank-balances,#page-access-control) :is(input,select,textarea,.ui-input,.ui-select,.ui-textarea) {
  min-height: 3.25rem;
  border: 1px solid #303746 !important;
  border-radius: var(--module-control-radius) !important;
  background: var(--module-surface-subtle) !important;
  box-shadow: none !important;
}

html[data-theme="dark"] :is(#page-sales,#page-outstanding-vendors,#page-access-control) :is(.subtabs,.sales-tabs,.outstanding-tabs,.settings-tabs,.sheet-tabs) {
  display: inline-flex;
  width: auto;
  max-width: 100%;
  gap: 0.5rem !important;
  padding: 0.5rem !important;
  border: 1px solid var(--module-line) !important;
  border-radius: 1rem !important;
  background: var(--module-surface) !important;
  overflow-x: auto;
}

html[data-theme="dark"] :is(#page-sales,#page-outstanding-vendors,#page-access-control) :is(.subtabs,.sales-tabs,.outstanding-tabs,.settings-tabs,.sheet-tabs) > button {
  min-height: 2.875rem;
  padding: 0.625rem 1.25rem !important;
  border: 1px solid #168fe1 !important;
  border-radius: 0.75rem !important;
  background: transparent !important;
}

html[data-theme="dark"] :is(#page-sales,#page-outstanding-vendors,#page-access-control) :is(.subtabs,.sales-tabs,.outstanding-tabs,.settings-tabs,.sheet-tabs) > button.active {
  background: #258fe0 !important;
  color: #fff !important;
}

html[data-theme="dark"] :is(#page-reports,#page-summary,#page-receipts,#page-vendor-payments,#page-monthly-commitments,#page-sales,#page-outstanding-vendors,#page-access-control) :is(.table-wrap,.ui-table-container,.report-table-shell) {
  border: 1px solid var(--module-line) !important;
  border-radius: var(--module-radius) !important;
  background: var(--module-surface) !important;
  box-shadow: none !important;
  overflow: auto;
}

html[data-theme="dark"] :is(#page-reports,#page-summary,#page-receipts,#page-vendor-payments,#page-monthly-commitments,#page-sales,#page-outstanding-vendors,#page-access-control) :is(table,.ui-table) thead :is(tr,th) {
  border-color: var(--module-line) !important;
  background: var(--module-table-head) !important;
}

html[data-theme="dark"] :is(#page-reports,#page-summary,#page-receipts,#page-vendor-payments,#page-monthly-commitments,#page-sales,#page-outstanding-vendors,#page-access-control) :is(table,.ui-table) tbody tr {
  border-color: var(--module-line-soft) !important;
  background: var(--module-table-row) !important;
}

html[data-theme="dark"] :is(#page-reports,#page-summary,#page-receipts,#page-vendor-payments,#page-monthly-commitments,#page-sales,#page-outstanding-vendors,#page-access-control) :is(table,.ui-table) tbody tr:nth-child(even) {
  background: var(--module-table-row-alt) !important;
}

html[data-theme="dark"] :is(#page-reports,#page-summary,#page-receipts,#page-vendor-payments,#page-monthly-commitments,#page-sales,#page-outstanding-vendors,#page-access-control) :is(table,.ui-table) tbody tr:hover {
  background: var(--module-surface-hover) !important;
}

html[data-theme="dark"] :is(#page-dashboard,#page-reports,#page-summary,#page-receipts,#page-vendor-payments,#page-monthly-commitments,#page-sales,#page-outstanding-vendors,#page-bank-balances,#page-access-control) :is(button,.ui-btn):not(.sidebar-item) {
  min-height: 2.75rem;
  border-radius: 0.75rem !important;
}

@media (max-width: 1536px) {
  html[data-theme="dark"] :is(#page-dashboard,#page-reports,#page-summary,#page-receipts,#page-vendor-payments,#page-monthly-commitments,#page-sales,#page-outstanding-vendors,#page-bank-balances) :is(.ui-card-kpi,.kpi-card,.receipt-summary-card,.outstanding-metric) {
    min-height: 11.5rem;
  }
}

/* =========================================================
   Complete light theme
   The brand file defines dark defaults at :root, therefore
   light mode must explicitly replace the full token cascade.
   ========================================================= */

html[data-theme="light"],
body[data-theme="light"] {
  color-scheme: light;
  --bg: #f4f7fb;
  --bg-deep: #eef3f8;
  --bg-app: #f4f7fb;
  --bg-sidebar: #fbfcfe;
  --panel: #ffffff;
  --panel-2: #f8fafc;
  --panel-3: #eef3f8;
  --card: #ffffff;
  --card-2: #f8fafc;
  --surface: #ffffff;
  --surface-2: #f8fafc;
  --surface-3: #eef3f8;
  --text: #111827;
  --muted: #64748b;
  --line: #dce4ee;
  --border: #dce4ee;
  --border-soft: #e8edf4;
  --shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
  --shadow-soft: 0 4px 16px rgba(15, 23, 42, 0.05);
  --color-bg-app: #f4f7fb;
  --color-bg-canvas: #f4f7fb;
  --color-bg-surface: #ffffff;
  --color-bg-surface-subtle: #f8fafc;
  --color-bg-surface-raised: #ffffff;
  --color-bg-surface-elevated: #ffffff;
  --color-bg-input: #f3f5fa;
  --color-bg-overlay: rgba(15, 23, 42, 0.32);
  --color-bg-hover: #eef4ff;
  --color-bg-selected: #e7efff;
  --color-border-default: #dce4ee;
  --color-border-strong: #c7d2e0;
  --color-border-subtle: #e8edf4;
  --color-text-primary: #111827;
  --color-text-secondary: #475569;
  --color-text-muted: #64748b;
  --color-action-secondary: #ffffff;
  --color-action-secondary-hover: #eef4ff;
}

html[data-theme="light"],
html[data-theme="light"] body,
html[data-theme="light"] #app-shell,
html[data-theme="light"] #layout,
html[data-theme="light"] #layout > .main-panel {
  color: #111827 !important;
  background: #f4f7fb !important;
}

html[data-theme="light"] #app-shell > .app-header {
  border-bottom: 1px solid #dce4ee !important;
  background: #ffffff !important;
  box-shadow: none !important;
}

html[data-theme="light"] #layout > .sidebar,
html[data-theme="light"] #layout > .sidebar :is(.sidebar-top,.sidebar-menu,.sidebar-footer) {
  border-color: #dce4ee !important;
  background: #fbfcfe !important;
  box-shadow: none !important;
}

html[data-theme="light"] #layout > .sidebar {
  border-right: 1px solid #dce4ee !important;
}

html[data-theme="light"] #layout > .sidebar :is(.nav-section + .nav-section,.sidebar-top,.sidebar-footer) {
  border-color: #e8edf4 !important;
}

html[data-theme="light"] #layout > .sidebar :is(.nav-section-label,.nav-label) {
  color: #6b6687 !important;
}

html[data-theme="light"] #layout > .sidebar .nav-btn {
  color: #1f2937 !important;
}

html[data-theme="light"] #layout > .sidebar .nav-icon {
  color: #8ba4c7 !important;
}

html[data-theme="light"] #layout > .sidebar .nav-btn:hover {
  background: #eef4ff !important;
}

html[data-theme="light"] #layout > .sidebar .nav-btn.active {
  color: #ffffff !important;
  background: linear-gradient(90deg, #4775eb, #587cf1) !important;
  box-shadow: 0 10px 24px rgba(71, 117, 235, 0.18) !important;
}

html[data-theme="light"] #layout > .sidebar .nav-btn.active .nav-icon {
  color: #ffffff !important;
}

html[data-theme="light"] #layout > .sidebar :is(#sidebar-toggle,.sidebar-theme-control) {
  border: 1px solid #dce4ee !important;
  color: #334155 !important;
  background: #ffffff !important;
  box-shadow: none !important;
}

html[data-theme="light"] :is(
  #page-dashboard,
  #page-reports,
  #page-summary,
  #page-receipts,
  #page-vendor-payments,
  #page-monthly-commitments,
  #page-sales,
  #page-outstanding-vendors,
  #page-bank-balances,
  #page-access-control
) {
  --module-surface: #ffffff;
  --module-surface-subtle: #f3f5fa;
  --module-surface-hover: #eef4ff;
  --module-line: #dce4ee;
  --module-line-soft: #e8edf4;
  --module-table-head: #20212b;
  --module-table-row: #ffffff;
  --module-table-row-alt: #f7f9fc;
  color: #111827 !important;
  background: transparent !important;
}

html[data-theme="light"] :is(
  #page-dashboard,
  #page-reports,
  #page-summary,
  #page-receipts,
  #page-vendor-payments,
  #page-monthly-commitments,
  #page-sales,
  #page-outstanding-vendors,
  #page-bank-balances,
  #page-access-control
) > .page-header {
  border-bottom-color: #e8edf4 !important;
  background: transparent !important;
}

html[data-theme="light"] :is(
  #page-dashboard,
  #page-reports,
  #page-summary,
  #page-receipts,
  #page-vendor-payments,
  #page-monthly-commitments,
  #page-sales,
  #page-outstanding-vendors,
  #page-bank-balances,
  #page-access-control
) > .page-header :is(h1,h2,.ui-page-title) {
  color: #111827 !important;
}

html[data-theme="light"] :is(
  #page-dashboard,
  #page-reports,
  #page-summary,
  #page-receipts,
  #page-vendor-payments,
  #page-monthly-commitments,
  #page-sales,
  #page-outstanding-vendors,
  #page-bank-balances,
  #page-access-control
) > .page-header p {
  color: #64748b !important;
}

html[data-theme="light"] :is(
  #page-dashboard,
  #page-reports,
  #page-summary,
  #page-receipts,
  #page-vendor-payments,
  #page-monthly-commitments,
  #page-sales,
  #page-outstanding-vendors,
  #page-bank-balances,
  #page-access-control
) :is(.ui-card,.card,.kpi-card,.receipt-summary-card,.outstanding-metric,.dashboard-module-card,.bank-card,.commitment-section,.report-table-card,.reports-visual-card) {
  border: 1px solid #dce4ee !important;
  color: #111827 !important;
  background: #ffffff !important;
  background-image: none !important;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05) !important;
}

html[data-theme="light"] :is(
  #page-reports,
  #page-summary,
  #page-receipts,
  #page-vendor-payments,
  #page-monthly-commitments,
  #page-sales,
  #page-outstanding-vendors,
  #page-access-control
) :is(.toolbar,.ui-toolbar,.ui-table-toolbar,.filter-bar,.commitment-filter-bar,.project-form-card,.settings-tabs,.vendor-import-card) {
  border: 1px solid #dce4ee !important;
  color: #111827 !important;
  background: #ffffff !important;
  background-image: none !important;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04) !important;
}

html[data-theme="light"] :is(
  #page-reports,
  #page-summary,
  #page-receipts,
  #page-vendor-payments,
  #page-monthly-commitments,
  #page-sales,
  #page-outstanding-vendors,
  #page-bank-balances,
  #page-access-control
) :is(input,select,textarea,.ui-input,.ui-select,.ui-textarea) {
  border-color: #dce4ee !important;
  color: #1f2937 !important;
  background: #f3f5fa !important;
}

html[data-theme="light"] :is(input,textarea)::placeholder {
  color: #94a3b8 !important;
  opacity: 1;
}

html[data-theme="light"] :is(
  #page-sales,
  #page-outstanding-vendors,
  #page-access-control
) :is(.subtabs,.sales-tabs,.outstanding-tabs,.settings-tabs,.sheet-tabs) {
  border-color: #dce4ee !important;
  background: #ffffff !important;
}

html[data-theme="light"] :is(
  #page-sales,
  #page-outstanding-vendors,
  #page-access-control
) :is(.subtabs,.sales-tabs,.outstanding-tabs,.settings-tabs,.sheet-tabs) > button {
  border-color: transparent !important;
  color: #334155 !important;
  background: #f3f5fa !important;
}

html[data-theme="light"] :is(
  #page-sales,
  #page-outstanding-vendors,
  #page-access-control
) :is(.subtabs,.sales-tabs,.outstanding-tabs,.settings-tabs,.sheet-tabs) > button.active {
  border-color: #4775eb !important;
  color: #ffffff !important;
  background: #5277eb !important;
}

html[data-theme="light"] :is(
  #page-reports,
  #page-summary,
  #page-receipts,
  #page-vendor-payments,
  #page-monthly-commitments,
  #page-sales,
  #page-outstanding-vendors,
  #page-access-control
) :is(.table-wrap,.ui-table-container,.report-table-shell) {
  border-color: #dce4ee !important;
  background: #ffffff !important;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04) !important;
  scrollbar-color: #9ab8e8 #eef3f8;
}

html[data-theme="light"] :is(
  #page-reports,
  #page-summary,
  #page-receipts,
  #page-vendor-payments,
  #page-monthly-commitments,
  #page-sales,
  #page-outstanding-vendors,
  #page-access-control
) :is(table,.ui-table) thead :is(tr,th) {
  border-color: #3a3d48 !important;
  color: #c8c8ee !important;
  background: #20212b !important;
}

html[data-theme="light"] :is(
  #page-reports,
  #page-summary,
  #page-receipts,
  #page-vendor-payments,
  #page-monthly-commitments,
  #page-sales,
  #page-outstanding-vendors,
  #page-access-control
) :is(table,.ui-table) tbody tr {
  border-color: #e8edf4 !important;
  color: #334155 !important;
  background: #ffffff !important;
}

html[data-theme="light"] :is(
  #page-reports,
  #page-summary,
  #page-receipts,
  #page-vendor-payments,
  #page-monthly-commitments,
  #page-sales,
  #page-outstanding-vendors,
  #page-access-control
) :is(table,.ui-table) tbody tr:nth-child(even) {
  background: #f7f9fc !important;
}

html[data-theme="light"] :is(
  #page-reports,
  #page-summary,
  #page-receipts,
  #page-vendor-payments,
  #page-monthly-commitments,
  #page-sales,
  #page-outstanding-vendors,
  #page-access-control
) :is(table,.ui-table) tbody tr:hover {
  background: #eef4ff !important;
}

html[data-theme="light"] :is(.action-menu .action-menu-list,.column-menu .action-menu-list,dialog,.modal,.dialog) {
  border-color: #dce4ee !important;
  color: #111827 !important;
  background: #ffffff !important;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.14) !important;
}

html[data-theme="light"] :is(.action-menu .action-menu-list,.column-menu .action-menu-list) :is(button,label,.ui-btn):hover {
  background: #eef4ff !important;
}

html[data-theme="light"] :is(.app-footer,#app-shell > .app-footer) {
  border-color: #dce4ee !important;
  color: #64748b !important;
  background: #ffffff !important;
}

/* Settings > Authorized Users: readable, balanced columns. */
#page-access-control .card > .notice ~ .table-wrap table {
  width: 100% !important;
  min-width: 68rem;
  table-layout: fixed !important;
}

#page-access-control .card > .notice ~ .table-wrap :is(th,td):nth-child(1) {
  width: 42% !important;
  min-width: 24rem !important;
}

#page-access-control .card > .notice ~ .table-wrap :is(th,td):nth-child(2) {
  width: 28% !important;
  min-width: 17rem !important;
}

#page-access-control .card > .notice ~ .table-wrap :is(th,td):nth-child(3) {
  width: 10.5rem !important;
  min-width: 10.5rem !important;
  white-space: nowrap !important;
}

#page-access-control .card > .notice ~ .table-wrap :is(th,td):nth-child(4) {
  width: 9rem !important;
  min-width: 9rem !important;
  white-space: nowrap !important;
}

#page-access-control .card > .notice ~ .table-wrap td:nth-child(1) {
  max-width: none !important;
  white-space: nowrap !important;
  overflow: visible !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  text-overflow: clip !important;
}

#page-access-control .card > .notice ~ .table-wrap td:nth-child(2) select {
  width: 100% !important;
  min-width: 0 !important;
}

#page-access-control .card > .notice ~ .table-wrap td:nth-child(4) {
  overflow: visible !important;
  text-align: center !important;
}

#page-access-control .card > .notice ~ .table-wrap td:nth-child(4) .danger-btn {
  width: 100% !important;
  min-width: 6.75rem;
}

@media (max-width: 1366px) {
  #page-access-control .card > .notice ~ .table-wrap table {
    min-width: 64rem;
  }

  #page-access-control .card > .notice ~ .table-wrap :is(th,td):nth-child(1) {
    width: 40% !important;
    min-width: 22rem !important;
  }
}

/* Outstanding Vendors: keep row actions fully inside the frozen cell. */
#page-outstanding-vendors .outstanding-vendors-table :is(th,td):last-child {
  width: 15.5rem !important;
  min-width: 15.5rem !important;
  max-width: 15.5rem !important;
}

#page-outstanding-vendors .outstanding-vendors-table td:last-child,
#page-outstanding-vendors .outstanding-vendors-table .actions-cell,
#page-outstanding-vendors .outstanding-vendors-table .ui-table-cell-actions {
  padding-inline: 1rem !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  text-align: center !important;
}

#page-outstanding-vendors .outstanding-vendors-table td:last-child :is(button,.ui-btn) {
  display: inline-flex !important;
  width: auto !important;
  min-width: 6.25rem !important;
  max-width: 7rem !important;
  margin: 0 0.25rem !important;
  padding-inline: 0.875rem !important;
  vertical-align: middle;
}

#page-outstanding-vendors .outstanding-vendors-table td:last-child :is(button,.ui-btn).danger-action,
#page-outstanding-vendors .outstanding-vendors-table td:last-child :is(button,.ui-btn).ui-btn-danger {
  min-width: 6.75rem !important;
}

#page-outstanding-vendors .outstanding-vendors-table-container {
  overflow-x: auto !important;
  overflow-y: auto !important;
}