// Per-theme custom CSS properties
//
// Replaces the dynamic CSS injected via jQuery in p3xr-theme.js:
//   $('head').append('<style id="p3xr-theme-styles">' + styles + '</style>')
//
// Uses the Layout sub-theme for border/toolbar colors (matching AngularJS usage of themeLayout)
// Uses the Main sub-theme for content-area colors
// Uses the Common sub-theme for status/indicator colors

@use '@angular/material' as mat;
@use 'theme-definitions' as defs;

// ============================================================================
// Shared dark/light mixins
// ============================================================================

@mixin p3xr-dark-custom-props($layout-theme, $main-theme, $common-theme) {
  // Layout toolbar (primary default hue — header/footer)
  --p3xr-toolbar-bg: #{mat.get-theme-color($layout-theme, neutral-variant, 40)};
  --p3xr-toolbar-color: #{mat.get-theme-color($layout-theme, neutral-variant, 90)};
  --p3xr-toolbar-strong-bg: #{mat.get-theme-color($layout-theme, primary, 20)};
  --p3xr-toolbar-strong-color: #{mat.get-theme-color($layout-theme, neutral, 98)};
  // Accordion toolbar (primary hue-1 — content area section headers)
  --p3xr-accordion-bg: #{mat.get-theme-color($layout-theme, neutral-variant, 60)};
  --p3xr-accordion-color: #{mat.get-theme-color($layout-theme, neutral-variant, 10)};
  // Button colors from Main sub-theme: primary, accent(tertiary), warn(error)
  --p3xr-btn-primary-bg: #{mat.get-theme-color($main-theme, primary, 80)};
  --p3xr-btn-primary-color: rgba(0, 0, 0, 0.87);
  --p3xr-btn-accent-bg: #{mat.get-theme-color($main-theme, tertiary, 80)};
  --p3xr-btn-accent-color: rgba(0, 0, 0, 0.87);
  --p3xr-btn-warn-bg: #{mat.get-theme-color($main-theme, error, 80)};
  --p3xr-btn-warn-color: rgba(0, 0, 0, 0.87);
  --p3xr-common-btn-primary-bg: #{mat.get-theme-color($common-theme, primary, 80)};
  --p3xr-common-btn-primary-color: rgba(0, 0, 0, 0.87);
  --p3xr-plain-button-color: rgba(255, 255, 255, 0.87);
  --p3xr-hover-bg: rgba(255, 255, 255, 0.1);
  --p3xr-hover-bg-inverse: rgba(0, 0, 0, 0.1);
  --p3xr-border-color: #{mat.get-theme-color($layout-theme, primary, 50)};
  --p3xr-input-border-color: #{mat.get-theme-color($layout-theme, primary, 50)};
  --p3xr-content-border-color: rgba(255, 255, 255, 0.12);
  --p3xr-content-border-toolbar-color: rgba(255, 255, 255, 0.12);
  --p3xr-dialog-surface-bg: var(--p3xr-content-bg);
  --p3xr-toast-bg: #{mat.get-theme-color($common-theme, neutral, 10)};
  --p3xr-toast-border: rgba(255, 255, 255, 0.5);
  --p3xr-toast-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
  --p3xr-tree-branch-color: #{mat.get-theme-color($main-theme, tertiary, 80)};
  --p3xr-tree-branch-shadow: 1px 1px 1px rgba(55, 29, 27, 0.5);
  --p3xr-list-odd-bg: rgba(255, 255, 255, 0.05);
  --p3xr-list-border: rgba(255, 255, 255, 0.05);
  --p3xr-autofill-bg: rgb(66, 66, 66, 0.9);
  --p3xr-autofill-color: white;
  --p3xr-input-bg: rgba(64, 64, 64, 1);
  --p3xr-input-color: white;
  --p3xr-fieldset-border: rgba(255, 255, 255, 0.25);
  --p3xr-selection-color: white;
  --p3xr-selection-bg: black;
  --p3xr-placeholder-color: rgba(255, 255, 255, 0.75);
  --p3xr-menu-selected-bg: rgba(255, 255, 255, 0.1);
  --p3xr-json-key-color: white;
  --p3xr-json-value-string: var(--p3xr-btn-accent-bg);
  --p3xr-json-value-number: var(--p3xr-btn-primary-bg);
  --p3xr-json-value-boolean: var(--p3xr-btn-warn-bg);
  --p3xr-json-value-null: rgba(255, 255, 255, 0.4);
  --p3xr-treecontrol-icon-color: rgba(255, 255, 255, 0.7);
  --p3xr-link-color: #82b1ff;
  --p3xr-common-warn-color: var(--p3xr-btn-warn-bg);
}

// Accordion/toolbar background colors matching AngularJS md-toolbar with Layout sub-theme
// AngularJS used md-theme="themeLayout" + class="md-primary md-hue-1"
// These are the exact colors from the AngularJS Material palette definitions

@mixin p3xr-light-custom-props($layout-theme, $main-theme, $common-theme) {
  // Layout toolbar (primary default hue — header/footer)
  --p3xr-toolbar-bg: #{mat.get-theme-color($layout-theme, neutral-variant, 60)};
  --p3xr-toolbar-color: #{mat.get-theme-color($layout-theme, neutral-variant, 10)};
  --p3xr-toolbar-strong-bg: #{mat.get-theme-color($layout-theme, primary, 20)};
  --p3xr-toolbar-strong-color: #{mat.get-theme-color($layout-theme, neutral, 98)};
  // Accordion toolbar (primary hue-1 — content area section headers)
  --p3xr-accordion-bg: #{mat.get-theme-color($layout-theme, neutral-variant, 40)};
  --p3xr-accordion-color: #{mat.get-theme-color($layout-theme, neutral-variant, 90)};
  // Button colors from Main sub-theme: primary, accent(tertiary), warn(error)
  --p3xr-btn-primary-bg: #{mat.get-theme-color($main-theme, primary, 40)};
  --p3xr-btn-primary-color: white;
  --p3xr-btn-accent-bg: #{mat.get-theme-color($main-theme, tertiary, 40)};
  --p3xr-btn-accent-color: white;
  --p3xr-btn-warn-bg: #{mat.get-theme-color($main-theme, error, 40)};
  --p3xr-btn-warn-color: white;
  --p3xr-common-btn-primary-bg: #{mat.get-theme-color($common-theme, primary, 40)};
  --p3xr-common-btn-primary-color: white;
  --p3xr-plain-button-color: rgba(0, 0, 0, 0.87);
  --p3xr-hover-bg: rgba(0, 0, 0, 0.1);
  --p3xr-hover-bg-inverse: rgba(255, 255, 255, 0.1);
  --p3xr-border-color: #{mat.get-theme-color($layout-theme, primary, 50)};
  --p3xr-input-border-color: #{mat.get-theme-color($layout-theme, primary, 50)};
  --p3xr-content-border-color: transparent;
  --p3xr-content-border-toolbar-color: #{mat.get-theme-color($layout-theme, primary, 50)};
  --p3xr-dialog-surface-bg: var(--p3xr-content-bg);
  --p3xr-toast-bg: auto;
  --p3xr-toast-border: auto;
  --p3xr-toast-shadow: none;
  --p3xr-tree-branch-color: #{mat.get-theme-color($main-theme, tertiary, 40)};
  --p3xr-tree-branch-shadow: 1px 1px 0px rgba(55, 11, 0, 0.5);
  --p3xr-list-odd-bg: rgba(0, 0, 0, 0.04);
  --p3xr-list-border: rgba(0, 0, 0, 0.06);
  --p3xr-autofill-bg: rgba(255, 255, 255, 0.5);
  --p3xr-autofill-color: black;
  --p3xr-input-bg: white;
  --p3xr-input-color: black;
  --p3xr-fieldset-border: rgba(0, 0, 0, 0.5);
  --p3xr-selection-color: inherit;
  --p3xr-selection-bg: highlight;
  --p3xr-placeholder-color: inherit;
  --p3xr-menu-selected-bg: rgba(0, 0, 0, 0.1);
  --p3xr-json-key-color: black;
  --p3xr-json-value-string: var(--p3xr-btn-accent-bg);
  --p3xr-json-value-number: var(--p3xr-btn-primary-bg);
  --p3xr-json-value-boolean: var(--p3xr-btn-warn-bg);
  --p3xr-json-value-null: rgba(0, 0, 0, 0.4);
  --p3xr-treecontrol-icon-color: rgba(0, 0, 0, 0.87);
  --p3xr-link-color: #1a73e8;
  --p3xr-common-warn-color: var(--p3xr-btn-warn-bg);
}

// ============================================================================
// Per-theme CSS custom properties (using all 3 sub-themes)
// ============================================================================

// ============================================================================
// Per-theme EXACT colors from AngularJS Material palette definitions
// These override the mixin-generated M3 values with the production hex values
// Source: angular-material/angular-material.js palette definitions
// ============================================================================

body.p3xr-mat-theme-enterprise {
  @include p3xr-light-custom-props(defs.$p3xr-theme-enterprise-layout, defs.$p3xr-theme-enterprise, defs.$p3xr-theme-enterprise-common);
  // Enterprise: Layout primary=grey default:800, hue-1:500
  --p3xr-toolbar-bg: #424242;          // grey-800 (primary default — header/footer)
  --p3xr-toolbar-color: rgba(255,255,255,0.87);
  --p3xr-toolbar-strong-bg: #212121;   // grey-900
  --p3xr-toolbar-strong-color: rgba(255,255,255,0.87);
  --p3xr-accordion-bg: #9e9e9e;       // grey-500 (primary hue-1 — accordion headers)
  --p3xr-accordion-color: rgba(0,0,0,0.87);
  --p3xr-btn-primary-bg: #3f51b5;      // indigo-500
  --p3xr-btn-primary-color: white;
  --p3xr-btn-accent-bg: #1976d2;       // blue-700
  --p3xr-btn-accent-color: white;
  --p3xr-btn-warn-bg: #d32f2f;         // red-700
  --p3xr-btn-warn-color: white;
  --p3xr-common-btn-primary-bg: #4caf50; // green-500
  --p3xr-common-btn-primary-color: white;
  --p3xr-border-color: #424242;
  --p3xr-input-border-color: #9e9e9e;
  --p3xr-dialog-surface-bg: #ffffff;
  --p3xr-content-bg: #fafafa;         // near-white (default light bg)
  --p3xr-body-bg: #e0e0e0;           // grey-300 (body background)
  --p3xr-common-warn-color: #03a9f4; // light-blue-500
}

body.p3xr-mat-theme-light {
  @include p3xr-light-custom-props(defs.$p3xr-theme-light-layout, defs.$p3xr-theme-light, defs.$p3xr-theme-light-common);
  // Light: Layout primary=blue-grey default:800, hue-1:200
  --p3xr-toolbar-bg: #37474f;          // blue-grey-800 (primary default — header/footer)
  --p3xr-toolbar-color: rgba(255,255,255,0.87);
  --p3xr-toolbar-strong-bg: #263238;   // blue-grey-900
  --p3xr-toolbar-strong-color: rgba(255,255,255,0.87);
  --p3xr-accordion-bg: #b0bec5;       // blue-grey-200 (primary hue-1 — accordion headers)
  --p3xr-accordion-color: rgba(0,0,0,0.87);
  --p3xr-btn-primary-bg: #673ab7;      // deep-purple-500
  --p3xr-btn-primary-color: white;
  --p3xr-btn-accent-bg: #9c27b0;       // purple-500
  --p3xr-btn-accent-color: white;
  --p3xr-btn-warn-bg: #d32f2f;         // red-700
  --p3xr-btn-warn-color: white;
  --p3xr-common-btn-primary-bg: #4caf50; // green-500
  --p3xr-common-btn-primary-color: white;
  --p3xr-border-color: #37474f;
  --p3xr-input-border-color: #b0bec5;
  --p3xr-dialog-surface-bg: #cfd8dc;  // blue-grey-100 (legacy md-dialog paper)
  --p3xr-content-bg: #eceff1;         // blue-grey-50
  --p3xr-body-bg: #cfd8dc;           // blue-grey-100 (body background)
  --p3xr-common-warn-color: #607d8b; // blue-grey-500
}

body.p3xr-mat-theme-redis {
  @include p3xr-light-custom-props(defs.$p3xr-theme-redis-layout, defs.$p3xr-theme-redis, defs.$p3xr-theme-redis-common);
  // Redis: Layout primary=red default:800, hue-1:200
  --p3xr-toolbar-bg: #c62828;          // red-800 (primary default — header/footer)
  --p3xr-toolbar-color: rgba(255,255,255,0.87);
  --p3xr-accordion-bg: #ef9a9a;       // red-200 (primary hue-1 — accordion headers)
  --p3xr-accordion-color: rgba(0,0,0,0.87);
  --p3xr-toolbar-strong-bg: #b71c1c;   // red-900
  --p3xr-toolbar-strong-color: rgba(255,255,255,0.87);
  --p3xr-btn-primary-bg: #212121;      // grey-900
  --p3xr-btn-primary-color: rgba(255,255,255,0.87);
  --p3xr-btn-accent-bg: #757575;       // grey-600
  --p3xr-btn-accent-color: white;
  --p3xr-btn-warn-bg: #ffc107;         // amber-500
  --p3xr-btn-warn-color: white;
  --p3xr-common-btn-primary-bg: #4caf50; // green-500
  --p3xr-common-btn-primary-color: white;
  --p3xr-border-color: #c62828;
  --p3xr-input-border-color: #ef9a9a;
  --p3xr-dialog-surface-bg: #ffffff;
  --p3xr-content-bg: #fafafa;         // near-white (default light bg)
  --p3xr-body-bg: #ffcdd2;           // red-100 (body background)
  --p3xr-common-warn-color: #f44336; // red-500
}

body.p3xr-mat-theme-dark {
  @include p3xr-dark-custom-props(defs.$p3xr-theme-dark-layout, defs.$p3xr-theme-dark, defs.$p3xr-theme-dark-common);
  // Dark: Layout primary=grey default:800, hue-1:500
  --p3xr-toolbar-bg: #424242;          // grey-800 (primary default — header/footer)
  --p3xr-toolbar-color: rgba(255,255,255,0.87);
  --p3xr-accordion-bg: #9e9e9e;       // grey-500 (primary hue-1 — accordion headers)
  --p3xr-accordion-color: rgba(0,0,0,0.87);
  --p3xr-toolbar-strong-bg: #212121;   // grey-900
  --p3xr-toolbar-strong-color: rgba(255,255,255,0.87);
  --p3xr-btn-primary-bg: #7986cb;      // indigo-300
  --p3xr-btn-primary-color: rgba(0,0,0,0.87);
  --p3xr-btn-accent-bg: #2196f3;       // blue-500
  --p3xr-btn-accent-color: rgba(0,0,0,0.87);
  --p3xr-btn-warn-bg: #ff9800;         // orange-500
  --p3xr-btn-warn-color: rgba(0,0,0,0.87);
  --p3xr-common-btn-primary-bg: #4caf50; // green-500
  --p3xr-common-btn-primary-color: rgba(0,0,0,0.87);
  --p3xr-border-color: #424242;
  --p3xr-input-border-color: #9e9e9e;
  --p3xr-dialog-surface-bg: #424242;  // legacy dark md-dialog paper
  --p3xr-content-bg: #303030;         // grey-A400 (dark mode md-content bg)
  --p3xr-body-bg: #212121;           // grey-900 (body background)
  --p3xr-common-warn-color: #9fa8da; // indigo-200
}

body.p3xr-mat-theme-dark-neu {
  @include p3xr-dark-custom-props(defs.$p3xr-theme-dark-neu-layout, defs.$p3xr-theme-dark-neu, defs.$p3xr-theme-dark-neu-common);
  // DarkNeu: Layout primary=blue-grey default:800, hue-1:300
  --p3xr-toolbar-bg: #37474f;          // blue-grey-800 (primary default — header/footer)
  --p3xr-toolbar-color: rgba(255,255,255,0.87);
  --p3xr-accordion-bg: #90a4ae;       // blue-grey-300 (primary hue-1 — accordion headers)
  --p3xr-accordion-color: rgba(0,0,0,0.87);
  --p3xr-toolbar-strong-bg: #263238;   // blue-grey-900
  --p3xr-toolbar-strong-color: rgba(255,255,255,0.87);
  --p3xr-btn-primary-bg: #00bcd4;      // cyan-500
  --p3xr-btn-primary-color: rgba(0,0,0,0.87);
  --p3xr-btn-accent-bg: #2196f3;       // blue-500
  --p3xr-btn-accent-color: rgba(0,0,0,0.87);
  --p3xr-btn-warn-bg: #ffeb3b;         // yellow-500
  --p3xr-btn-warn-color: rgba(0,0,0,0.87);
  --p3xr-common-btn-primary-bg: #4caf50; // green-500
  --p3xr-common-btn-primary-color: rgba(0,0,0,0.87);
  --p3xr-border-color: #37474f;
  --p3xr-input-border-color: #90a4ae;
  --p3xr-dialog-surface-bg: #424242;
  --p3xr-content-bg: #303030;         // dark mode md-content bg
  --p3xr-body-bg: #263238;           // blue-grey-900 (body background)
  --p3xr-common-warn-color: #2196f3; // blue-500
}

body.p3xr-mat-theme-darko-bluo {
  @include p3xr-dark-custom-props(defs.$p3xr-theme-darko-bluo-layout, defs.$p3xr-theme-darko-bluo, defs.$p3xr-theme-darko-bluo-common);
  // DarkoBluo: Layout primary=indigo default:900, hue-1:500
  --p3xr-toolbar-bg: #1a237e;          // indigo-900 (primary default — header/footer)
  --p3xr-toolbar-color: rgba(255,255,255,0.87);
  --p3xr-accordion-bg: #3f51b5;       // indigo-500 (primary hue-1 — accordion headers)
  --p3xr-accordion-color: white;
  --p3xr-toolbar-strong-bg: #1a237e;   // indigo-900
  --p3xr-toolbar-strong-color: rgba(255,255,255,0.87);
  --p3xr-btn-primary-bg: #7986cb;      // indigo-300
  --p3xr-btn-primary-color: rgba(0,0,0,0.87);
  --p3xr-btn-accent-bg: #2196f3;       // blue-500
  --p3xr-btn-accent-color: rgba(0,0,0,0.87);
  --p3xr-btn-warn-bg: #ff9800;         // orange-500
  --p3xr-btn-warn-color: rgba(0,0,0,0.87);
  --p3xr-common-btn-primary-bg: #4caf50; // green-500
  --p3xr-common-btn-primary-color: rgba(0,0,0,0.87);
  --p3xr-border-color: #1a237e;
  --p3xr-input-border-color: #3f51b5;
  --p3xr-dialog-surface-bg: #424242;
  --p3xr-content-bg: #303030;         // dark mode md-content bg
  --p3xr-body-bg: #283593;           // indigo-800 (body background)
  --p3xr-common-warn-color: #03a9f4; // light-blue-500
}

body.p3xr-mat-theme-matrix {
  @include p3xr-dark-custom-props(defs.$p3xr-theme-matrix-layout, defs.$p3xr-theme-matrix, defs.$p3xr-theme-matrix-common);
  // Matrix: Layout primary=light-green default:A400, hue-1:A400
  --p3xr-toolbar-bg: #76ff03;          // light-green-A400 (primary default — header/footer)
  --p3xr-toolbar-color: rgba(0,0,0,0.87);
  --p3xr-accordion-bg: #76ff03;       // light-green-A400 (primary hue-1 — accordion headers, same)
  --p3xr-accordion-color: rgba(0,0,0,0.87);
  --p3xr-toolbar-strong-bg: #33691e;   // light-green-900
  --p3xr-toolbar-strong-color: rgba(255,255,255,0.87);
  --p3xr-btn-primary-bg: #76ff03;      // light-green-A400
  --p3xr-btn-primary-color: rgba(0,0,0,0.87);
  --p3xr-btn-accent-bg: #c6ff00;       // lime-A400
  --p3xr-btn-accent-color: rgba(0,0,0,0.87);
  --p3xr-btn-warn-bg: #00c853;         // green-A700
  --p3xr-btn-warn-color: rgba(0,0,0,0.87);
  --p3xr-common-btn-primary-bg: #76ff03; // light-green-A400
  --p3xr-common-btn-primary-color: rgba(0,0,0,0.87);
  --p3xr-border-color: #76ff03;
  --p3xr-tree-branch-color: #76ff03;
  --p3xr-input-border-color: #76ff03;
  --p3xr-dialog-surface-bg: #424242;
  --p3xr-content-bg: #303030;         // dark mode md-content bg
  --p3xr-body-bg: #1b5e20;           // green-900 (body background)
  --p3xr-common-warn-color: #4caf50; // green-500
}