.top-bar-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  color: #666 !important;
  font-size: 17px;
  transition: 0.3s;
  background: #f5f5f5;
}
.top-bar-btn:hover {
  color: #111 !important;
  background-color: #e6e6e6 !important;
}
.top-bar-btn:focus {
  box-shadow: none !important;
  background-color: #e6e6e6 !important;
}.page-description[data-v-d4ae5d5f] {
  background: #ffffff;
  border-radius: 5px;
  padding: 5px;
  overflow: auto;
}
[data-v-d4ae5d5f] .page-description b {
  font-weight: bold !important;
}
.info-popup-title[data-v-d4ae5d5f] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
}
.info-popup-title div[data-v-d4ae5d5f] {
  display: flex;
  align-items: center;
  margin-left: 10px;
}.person {
  display: flex;
  align-items: center;
  margin-left: 5px;
}
.top-bar {
  display: flex;
  width: 100%;
  position: fixed;
  top: 0;
  right: 0;
  background: #f5f5f5;
  z-index: 1020;
}.btn-toolbox--home[data-v-aed10e4c] {
  width: 50px;
}
.person-name[data-v-aed10e4c] {
  font-size: 17px;
}.v-sidebar-menu {
  top: 40px;
  z-index: 999;
  height: calc(100% - 40px);
  text-align: left;
}
.v-sidebar-menu .vsm--link {
  padding: 10px 5px !important;
}
.v-sidebar-menu path {
  transform: scale(0.55);
  transform-origin: 50% 50%;
  transform-box: fill-box;
}.breadcrumb-item a[data-v-26d12588] {
  color: #888;
  text-decoration: none;
  margin-right: 10px;
}
.breadcrumb-item--active a[data-v-26d12588] {
  color: #212529;
}
.breadcrumb-item:hover a[data-v-26d12588] {
  cursor: pointer;
  color: #212529;
  text-decoration: none;
}.breadcrumbs[data-v-a9cba2db] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin-top: 10px;
  margin-bottom: -5px;
}
.breadcrumb-navigation[data-v-a9cba2db] {
  display: flex;
  margin-top: 10px;
}
.breadcrumb-delimiter[data-v-a9cba2db] {
  margin-right: 8px;
}
.breadcrumb-delimiter[data-v-a9cba2db]:last-child {
  display: none;
}.toolbar {
  display: flex;
  align-items: center;
  margin: 8px 12px 4px;
}.person-photo {
  width: 30px;
  height: 30px;
  background: #333;
  margin-right: 3px;
}
.person-photo--lg {
  width: 40px;
  height: 40px;
  background: #333;
}
.person-photo--rounded {
  background-position: center !important;
  background-size: cover !important;
  border-radius: 50%;
}

/* ========================================
   CSS VARIABLES - UNIFIED COLOR SYSTEM
   ======================================== */
:root {
  /* Primary Brand Colors */
  --color-primary: #007acc;
  --color-primary-dark: #0056a3;
  --color-primary-light: #0088e6;
  --color-secondary: #0066cc;
  --color-corporate: #576bb2;
  /* Status Colors - Success */
  --color-success: #28a745;
  --color-success-dark: #218838;
  --color-success-light: #20c997;
  --color-success-alt: #5cb85c;
  --color-success-bright: #7BC142;
  /* Status Colors - Warning */
  --color-warning: #ffc107;
  --color-warning-dark: #ff9800;
  --color-warning-light: #ffcd38;
  --color-warning-alt: #ffb74d;
  /* Status Colors - Danger */
  --color-danger: #dc3545;
  --color-danger-dark: #c82333;
  --color-danger-light: #e74c3c;
  --color-danger-bright: #ff0000;
  --color-danger-alt: #E64C3C;
  /* Background Colors */
  --bg-primary: #ffffff;
  --bg-secondary: #f9f9f9;
  --bg-tertiary: #f8f9fa;
  --bg-quaternary: #fafafa;
  --bg-alt: #f5f5f5;
  --bg-light: #fafbfc;
  --bg-gray: #e6e6e6;
  --bg-dark: #333333;
  --bg-field: field; /* Native field background */
  /* Border Colors */
  --border-primary: #dddddd;
  --border-secondary: #e0e0e0;
  --border-tertiary: #cccccc;
  --border-light: #e1e5e9;
  --border-gray: #ced4da;
  --border-dark: #666666;
  --border-disabled: #b4b8bc;
  --border-native: -internal-light-dark(rgb(118, 118, 118), rgb(133, 133, 133));
  /* Text Colors */
  --text-primary: #000000;
  --text-secondary: #333333;
  --text-tertiary: #555555;
  --text-quaternary: #666666;
  --text-light: #85919e;
  --text-gray: #495057;
  --text-muted: #6c757d;
  --text-white: #ffffff;
  --text-red: #ff0000;
  /* Special Purpose Colors */
  --color-purple: #6f42c1;
  --color-purple-dark: #563d7c;
  --color-purple-light: #7952b3;
  --color-orange: #e5ac23;
  --color-highlight: #3499cc;
  --color-info: #42b983;
  /* Overlays & Effects */
  --overlay-modal: rgba(0, 0, 0, 0.5);
  --overlay-light: rgba(0, 0, 0, 0.2);
  --shadow-default: rgba(0, 0, 0, 0.33);
  --shadow-light: rgba(0, 0, 0, 0.14);
  --shadow-card: 0 1px 4px 0 rgb(0 0 0 / 14%);
  --shadow-button: 0 2px 8px rgba(220, 53, 69, 0.3);
  --shadow-button-hover: 0 4px 12px rgba(220, 53, 69, 0.4);
  --shadow-text: 0 1px 2px rgba(0, 0, 0, 0.2);
  /* Gradients */
  --gradient-primary: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  --gradient-success: linear-gradient(135deg, var(--color-success) 0%, var(--color-success-light) 100%);
  --gradient-warning: linear-gradient(135deg, var(--color-warning) 0%, var(--color-warning-dark) 100%);
  --gradient-danger: linear-gradient(135deg, var(--color-danger) 0%, var(--color-danger-dark) 100%);
  --gradient-purple: linear-gradient(135deg, var(--color-purple) 0%, var(--color-purple-dark) 100%);
  /* Component Specific Variables */
  --mom-action-bg: var(--bg-secondary);
  --mom-action-border: var(--border-primary);
  --mom-header-divider: var(--border-secondary);
  --html-editor-border: var(--border-tertiary);
  --html-editor-bg: var(--bg-primary);
  --html-editor-toolbar-bg: var(--bg-tertiary);
  --remove-btn-gradient: var(--gradient-danger);
  --pdf-header-color: var(--color-primary);
  --pdf-content-bg: var(--bg-quaternary);
  --modal-overlay: var(--overlay-modal);
  /* Semantic Color Mappings */
  --form-bg: var(--bg-primary);
  --form-border: var(--border-gray);
  --form-border-focus: var(--color-highlight);
  --form-text: var(--text-gray);
  --form-text-disabled: var(--text-light);
  --form-bg-disabled: var(--bg-alt);
  --button-bg: var(--text-muted);
  --button-text: var(--text-white);
  --button-border: var(--text-muted);
  --card-bg: var(--bg-primary);
  --card-border: var(--border-primary);
  --card-shadow: var(--shadow-card);
  --tooltip-bg: var(--text-primary);
  --tooltip-text: var(--text-white);
}

/* ========================================
   EXISTING STYLES (Updated to use variables)
   ======================================== */
.spacer {
  flex-grow: 1 !important;
}
.tooltip {
  position: relative;
  display: inline-block;
}
.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: var(--tooltip-bg);
  color: var(--tooltip-text);
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  top: 150%;
  left: 50%;
  margin-left: -60px;
}
.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent var(--tooltip-bg) transparent;
}
.tooltip:hover .tooltiptext {
  visibility: visible;
}
.vs__dropdown-option {
  display: table;
  min-width: 100%;
}
.top-bar-divider {
  position: relative;
}
.top-bar-divider:after {
  display: block;
  width: 1px;
  height: 80%;
  background: var(--overlay-light);
  content: "";
  position: absolute;
  top: 10%;
  right: 0;
}
.content {
  display: flex;
  flex-direction: row;
}
.content > div {
  width: 48%;
  margin-right: 5px;
}
.content > textarea {
  width: 50%;
}
.content .multiselect {
  width: 100% !important;
}
.required {
  width: 50%;
  margin: 0;
  display: flex;
  flex-direction: column;
}
.required > span {
  color: var(--text-red);
}
.required input {
  width: 60% !important;
}
.required .multiselect .multiselect__tags {
  border-color: var(--text-red);
}
.pointer {
  cursor: pointer;
}
.highlight {
  color: var(--color-highlight);
}

/* Background Utility Classes */
.orange-bg {
  background-color: var(--color-orange);
}
.green-bg {
  background-color: var(--color-success-bright);
}
.red-bg {
  background-color: var(--color-danger-light);
}
.blue-bg {
  background-color: var(--color-highlight);
  margin-left: 5px;
}
.gray-bg {
  background-color: var(--text-quaternary);
}

/* Modal Styles */
.modal {
  display: flex;
  justify-content: center;
  align-items: center;
}
.modal-content {
  display: flex;
  flex-direction: column;
  padding: 1rem;
  background: var(--bg-primary);
  border-radius: 0.5rem;
  min-width: 25%;
  max-width: 50%;
}
.right {
  text-align: right;
}

/* Form Element Styles */
input,
textarea {
  display: block;
  height: 30px;
  font-family: ABBVoice, Verdana, Arial, sans-serif;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--form-text);
  background-color: var(--form-bg);
  background-clip: padding-box;
  border: 1px solid var(--form-border);
  border-radius: 3px;
  text-rendering: auto;
  letter-spacing: normal;
  word-spacing: normal;
  line-height: normal;
  text-transform: none;
  text-indent: 0px;
  text-shadow: none;
  display: inline-block;
  text-align: start;
  appearance: auto;
  -webkit-rtl-ordering: logical;
  cursor: text;
  margin: 0em;
  padding: 1px 2px;
  border-color: var(--border-native);
}
input:focus,
textarea:focus {
  border: var(--form-border-focus) solid 1px;
  box-shadow: var(--form-border-focus) 1px 0 1px 1px;
}
input:disabled,
textarea:disabled {
  color: var(--form-text-disabled);
  background: var(--form-bg-disabled);
  cursor: default;
}
.vs__dropdown-toggle {
  width: 100%;
}

/* Button Styles */
button {
  color: var(--button-text);
  background-color: var(--button-bg);
  border-color: var(--button-border);
  font-size: 14px;
  text-rendering: auto;
  letter-spacing: normal;
  word-spacing: normal;
  line-height: normal;
  text-transform: none;
  text-indent: 0px;
  text-shadow: none;
  display: inline-block;
  text-align: center;
  align-items: flex-start;
  box-sizing: border-box;
  margin: 0em;
  padding: 1px 6px;
  border-width: 2px;
  border-style: outset;
  border-color: buttonborder;
  border-image: initial;
  display: inline-block;
  font-weight: 400;
  text-align: center;
  vertical-align: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  border: 1px solid transparent;
  padding: 0.375rem 0.75rem;
  line-height: 1.5;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
button:hover {
  text-decoration: none;
  filter: saturate(0.7);
}

/* ========================================
   COLOR UTILITY MIXINS (SCSS)
   ======================================== */
/* Utility function to get CSS variable value for use in SCSS calculations */
/* Mixins for common color patterns */
/* ========================================
   DARK THEME SUPPORT
   ======================================== */
/* Dark theme color overrides */
[data-theme=dark] {
  /* Primary Brand Colors */
  --color-primary: #0099ff;
  --color-primary-dark: #007acc;
  --color-primary-light: #33aaff;
  --color-secondary: #0088ff;
  --color-corporate: #7086d6;
  /* Status Colors - Success */
  --color-success: #4caf50;
  --color-success-dark: #388e3c;
  --color-success-light: #26d0ce;
  --color-success-alt: #66bb6a;
  --color-success-bright: #8bc34a;
  /* Status Colors - Warning */
  --color-warning: #ffca28;
  --color-warning-dark: #ffa726;
  --color-warning-light: #ffd54f;
  --color-warning-alt: #ffcc02;
  /* Status Colors - Danger */
  --color-danger: #f44336;
  --color-danger-dark: #e53935;
  --color-danger-light: #ef5350;
  --color-danger-bright: #ff1744;
  --color-danger-alt: #ff5722;
  /* Background Colors */
  --bg-primary: #121212;
  --bg-secondary: #1e1e1e;
  --bg-tertiary: #242424;
  --bg-quaternary: #2c2c2c;
  --bg-alt: #383838;
  --bg-light: #404040;
  --bg-gray: #2a2a2a;
  --bg-dark: #000000;
  --bg-field: #2c2c2c; /* Dark field background */
  /* Border Colors */
  --border-primary: #404040;
  --border-secondary: #4a4a4a;
  --border-tertiary: #555555;
  --border-light: #333333;
  --border-gray: #484848;
  --border-dark: #606060;
  --border-disabled: #2a2a2a;
  --border-native: #555555;
  /* Text Colors */
  --text-primary: #ffffff;
  --text-secondary: #e0e0e0;
  --text-tertiary: #b0b0b0;
  --text-quaternary: #909090;
  --text-light: #707070;
  --text-gray: #a0a0a0;
  --text-muted: #808080;
  --text-white: #ffffff;
  --text-red: #ff6b6b;
  /* Special Purpose Colors */
  --color-purple: #9c27b0;
  --color-purple-dark: #7b1fa2;
  --color-purple-light: #ba68c8;
  --color-orange: #ff9800;
  --color-highlight: #03dac6;
  --color-info: #4fc3f7;
  /* Overlays & Effects */
  --overlay-modal: rgba(0, 0, 0, 0.8);
  --overlay-light: rgba(255, 255, 255, 0.1);
  --shadow-default: rgba(0, 0, 0, 0.6);
  --shadow-light: rgba(0, 0, 0, 0.4);
  --shadow-card: 0 2px 8px 0 rgb(0 0 0 / 40%);
  --shadow-button: 0 2px 8px rgba(244, 67, 54, 0.4);
  --shadow-button-hover: 0 4px 12px rgba(244, 67, 54, 0.5);
  --shadow-text: 0 1px 2px rgba(0, 0, 0, 0.4);
  /* Gradients - Dark Theme */
  --gradient-primary: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  --gradient-success: linear-gradient(135deg, var(--color-success) 0%, var(--color-success-light) 100%);
  --gradient-warning: linear-gradient(135deg, var(--color-warning) 0%, var(--color-warning-dark) 100%);
  --gradient-danger: linear-gradient(135deg, var(--color-danger) 0%, var(--color-danger-dark) 100%);
  --gradient-purple: linear-gradient(135deg, var(--color-purple) 0%, var(--color-purple-dark) 100%);
  /* Component Specific Variables - Dark */
  --mom-action-bg: var(--bg-secondary);
  --mom-action-border: var(--border-primary);
  --mom-header-divider: var(--border-secondary);
  --html-editor-border: var(--border-tertiary);
  --html-editor-bg: var(--bg-tertiary);
  --html-editor-toolbar-bg: var(--bg-quaternary);
  --remove-btn-gradient: var(--gradient-danger);
  --pdf-header-color: var(--color-primary);
  --pdf-content-bg: var(--bg-secondary);
  --modal-overlay: var(--overlay-modal);
  /* Semantic Color Mappings - Dark */
  --form-bg: var(--bg-tertiary);
  --form-border: var(--border-gray);
  --form-border-focus: var(--color-highlight);
  --form-text: var(--text-gray);
  --form-text-disabled: var(--text-light);
  --form-bg-disabled: var(--bg-alt);
  --button-bg: var(--text-muted);
  --button-text: var(--text-white);
  --button-border: var(--text-muted);
  --card-bg: var(--bg-secondary);
  --card-border: var(--border-primary);
  --card-shadow: var(--shadow-card);
  --tooltip-bg: var(--bg-quaternary);
  --tooltip-text: var(--text-primary);
  /* Dark Theme Surface Elevation */
  --surface-1: #121212; /* Base surface */
  --surface-2: #1e1e1e; /* +1dp elevation */
  --surface-3: #242424; /* +2dp elevation */
  --surface-4: #272727; /* +3dp elevation */
  --surface-6: #2c2c2c; /* +4dp elevation */
  --surface-8: #2e2e2e; /* +6dp elevation */
  --surface-12: #323232; /* +8dp elevation */
  --surface-16: #353535; /* +12dp elevation */
  --surface-24: #383838; /* +16dp elevation */
  /* Risk Matrix - Dark Theme */
  /* Risk Level Backgrounds - Dark */
  --risk-low-bg: #1a3a1a;
  --risk-medium-bg: #3d3317;
  --risk-high-bg: #3d1a1d;
  --risk-critical-bg: #1a2d33;
  /* Risk Level Text Colors - Dark */
  --risk-low-text: #90c690;
  --risk-medium-text: #d4af37;
  --risk-high-text: #ff8a95;
  --risk-critical-text: #87ceeb;
  /* Opportunity Level Backgrounds - Dark */
  --opportunity-low-bg: #2a2a2a;
  --opportunity-medium-bg: #1a2d3d;
  --opportunity-high-bg: #1a3d26;
  --opportunity-highest-bg: #1a2d4d;
  /* Opportunity Level Text Colors - Dark */
  --opportunity-low-text: #a0a0a0;
  --opportunity-medium-text: #4da6ff;
  --opportunity-high-text: #66bb6a;
  --opportunity-highest-text: #64b5f6;
  /* Matrix Component Colors - Dark */
  --matrix-hover-border: var(--color-primary);
  --matrix-selection-border: var(--color-danger);
  /* Chip Component Colors - Dark */
  --chip-bg: var(--color-primary);
  --chip-text: var(--text-primary);
  --chip-border: var(--color-primary);
  --chip-hover-bg: var(--color-primary-light);
  --chip-hover-text: var(--text-primary);
  --chip-highlight-bg: var(--color-warning);
  --chip-highlight-text: var(--text-primary);
  /* Legend Component Colors - Dark */
  --legend-bg: var(--bg-secondary);
  --legend-border: var(--border-primary);
  --legend-text: var(--text-primary);
  --legend-item-bg: transparent;
  --legend-item-border: transparent;
  --legend-hover-bg: var(--bg-tertiary);
  --legend-highlight-bg: var(--bg-quaternary);
  --legend-selection-bg: var(--bg-tertiary);
  /* Color on Primary - Dark */
  --color-on-primary: var(--text-primary);
  --color-primary-light: #404080;
  --bg-accent-light: var(--color-primary-light);
}

/* Auto theme - only applies dark colors when user explicitly chooses auto AND system prefers dark */
@media (prefers-color-scheme: dark) {
[data-theme=auto] {
    /* Apply dark theme variables only when auto theme is selected and system prefers dark */
    --color-primary: #0099ff;
    --color-primary-dark: #007acc;
    --color-primary-light: #33aaff;
    --color-secondary: #0088ff;
    --color-corporate: #7086d6;
    --color-success: #4caf50;
    --color-success-dark: #388e3c;
    --color-success-light: #26d0ce;
    --color-success-alt: #66bb6a;
    --color-success-bright: #8bc34a;
    --color-warning: #ffca28;
    --color-warning-dark: #ffa726;
    --color-warning-light: #ffd54f;
    --color-warning-alt: #ffcc02;
    --color-danger: #f44336;
    --color-danger-dark: #e53935;
    --color-danger-light: #ef5350;
    --color-danger-bright: #ff1744;
    --color-danger-alt: #ff5722;
    --bg-primary: #121212;
    --bg-secondary: #1e1e1e;
    --bg-tertiary: #242424;
    --bg-quaternary: #2c2c2c;
    --bg-alt: #383838;
    --bg-light: #404040;
    --bg-gray: #2a2a2a;
    --bg-dark: #000000;
    --bg-field: #2c2c2c;
    --border-primary: #404040;
    --border-secondary: #4a4a4a;
    --border-tertiary: #555555;
    --border-light: #333333;
    --border-gray: #484848;
    --border-dark: #606060;
    --border-disabled: #2a2a2a;
    --border-native: #555555;
    --text-primary: #ffffff;
    --text-secondary: #e0e0e0;
    --text-tertiary: #b0b0b0;
    --text-quaternary: #909090;
    --text-light: #707070;
    --text-gray: #a0a0a0;
    --text-muted: #808080;
    --text-white: #ffffff;
    --text-red: #ff6b6b;
    --color-purple: #9c27b0;
    --color-purple-dark: #7b1fa2;
    --color-purple-light: #ba68c8;
    --color-orange: #ff9800;
    --color-highlight: #03dac6;
    --color-info: #4fc3f7;
    --overlay-modal: rgba(0, 0, 0, 0.8);
    --overlay-light: rgba(255, 255, 255, 0.1);
    --shadow-default: rgba(0, 0, 0, 0.6);
    --shadow-light: rgba(0, 0, 0, 0.4);
    --shadow-card: 0 2px 8px 0 rgb(0 0 0 / 40%);
    --shadow-button: 0 2px 8px rgba(244, 67, 54, 0.4);
    --shadow-button-hover: 0 4px 12px rgba(244, 67, 54, 0.5);
    --shadow-text: 0 1px 2px rgba(0, 0, 0, 0.4);
    /* Component and semantic colors inherit from variables above */
    --mom-action-bg: var(--bg-secondary);
    --mom-action-border: var(--border-primary);
    --mom-header-divider: var(--border-secondary);
    --html-editor-border: var(--border-tertiary);
    --html-editor-bg: var(--bg-tertiary);
    --html-editor-toolbar-bg: var(--bg-quaternary);
    --pdf-header-color: var(--color-primary);
    --pdf-content-bg: var(--bg-secondary);
    --modal-overlay: var(--overlay-modal);
    --form-bg: var(--bg-tertiary);
    --form-border: var(--border-gray);
    --form-border-focus: var(--color-highlight);
    --form-text: var(--text-gray);
    --form-text-disabled: var(--text-light);
    --form-bg-disabled: var(--bg-alt);
    --card-bg: var(--bg-secondary);
    --card-border: var(--border-primary);
    --card-shadow: var(--shadow-card);
    --tooltip-bg: var(--bg-quaternary);
    --tooltip-text: var(--text-primary);
    /* Risk Matrix - Auto Theme Dark */
    /* Risk Level Backgrounds - Auto Dark */
    --risk-low-bg: #1a3a1a;
    --risk-medium-bg: #3d3317;
    --risk-high-bg: #3d1a1d;
    --risk-critical-bg: #1a2d33;
    /* Risk Level Text Colors - Auto Dark */
    --risk-low-text: #90c690;
    --risk-medium-text: #d4af37;
    --risk-high-text: #ff8a95;
    --risk-critical-text: #87ceeb;
    /* Opportunity Level Backgrounds - Auto Dark */
    --opportunity-low-bg: #2a2a2a;
    --opportunity-medium-bg: #1a2d3d;
    --opportunity-high-bg: #1a3d26;
    --opportunity-highest-bg: #1a2d4d;
    /* Opportunity Level Text Colors - Auto Dark */
    --opportunity-low-text: #a0a0a0;
    --opportunity-medium-text: #4da6ff;
    --opportunity-high-text: #66bb6a;
    --opportunity-highest-text: #64b5f6;
    /* Matrix Component Colors - Auto Dark */
    --matrix-hover-border: var(--color-primary);
    --matrix-selection-border: var(--color-danger);
    /* Chip Component Colors - Auto Dark */
    --chip-bg: var(--color-primary);
    --chip-text: var(--text-primary);
    --chip-border: var(--color-primary);
    --chip-hover-bg: var(--color-primary-light);
    --chip-hover-text: var(--text-primary);
    --chip-highlight-bg: var(--color-warning);
    --chip-highlight-text: var(--text-primary);
    /* Legend Component Colors - Auto Dark */
    --legend-bg: var(--bg-secondary);
    --legend-border: var(--border-primary);
    --legend-text: var(--text-primary);
    --legend-item-bg: transparent;
    --legend-item-border: transparent;
    --legend-hover-bg: var(--bg-tertiary);
    --legend-highlight-bg: var(--bg-quaternary);
    --legend-selection-bg: var(--bg-tertiary);
    /* Color on Primary - Auto Dark */
    --color-on-primary: var(--text-primary);
    --color-primary-light: #404080;
    --bg-accent-light: var(--color-primary-light);
}
}

/* High contrast theme support */
[data-theme=high-contrast] {
  --color-primary: #0066ff;
  --bg-primary: #000000;
  --bg-secondary: #000000;
  --bg-tertiary: #1a1a1a;
  --text-primary: #ffffff;
  --text-secondary: #ffffff;
  --border-primary: #ffffff;
  --border-secondary: #ffffff;
  --color-success: #00ff00;
  --color-warning: #ffff00;
  --color-danger: #ff0000;
}

/* Smooth theme transitions */
* {
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

/* Disable transitions during theme switching to prevent flashing */
.theme-switching * {
  transition: none !important;
}

/* ========================================
   COMPONENT-SPECIFIC COLOR SCHEMES
   ======================================== */
/* Minutes of Meeting Theme */
:root {
  --mom-primary: var(--color-primary);
  --mom-secondary: var(--bg-secondary);
  --mom-accent: var(--color-success);
  --mom-warning: var(--color-warning);
  --mom-danger: var(--color-danger);
}

/* Form Theme */
:root {
  --form-primary: var(--color-highlight);
  --form-secondary: var(--bg-tertiary);
  --form-success: var(--color-success);
  --form-warning: var(--color-warning);
  --form-danger: var(--color-danger);
}

/* Status Theme */
:root {
  --status-completed: var(--color-success);
  --status-pending: var(--color-warning);
  --status-failed: var(--color-danger);
  --status-info: var(--color-primary);
}

/* ========================================
   RISK MATRIX COMPONENT COLORS
   ======================================== */
/* Risk Matrix - Risk Level Colors */
:root {
  /* Risk Level Backgrounds */
  --risk-low-bg: #e8f5e8;
  --risk-medium-bg: #fff3cd;
  --risk-high-bg: #f8d7da;
  --risk-critical-bg: #d1ecf1;
  /* Risk Level Text Colors */
  --risk-low-text: #2d5a2d;
  --risk-medium-text: #856404;
  --risk-high-text: #721c24;
  --risk-critical-text: #0c5460;
  /* Opportunity Level Backgrounds */
  --opportunity-low-bg: #f8f9fa;
  --opportunity-medium-bg: #e7f3ff;
  --opportunity-high-bg: #d4edda;
  --opportunity-highest-bg: #cce7ff;
  /* Opportunity Level Text Colors */
  --opportunity-low-text: #6c757d;
  --opportunity-medium-text: #0066cc;
  --opportunity-high-text: #155724;
  --opportunity-highest-text: #004085;
  /* Matrix Component Colors */
  --matrix-hover-border: var(--color-primary);
  --matrix-selection-border: var(--color-danger);
  /* Chip Component Colors */
  --chip-bg: var(--color-primary);
  --chip-text: var(--text-white);
  --chip-border: var(--color-primary);
  --chip-hover-bg: var(--color-primary-dark);
  --chip-hover-text: var(--text-white);
  --chip-highlight-bg: var(--color-warning);
  --chip-highlight-text: var(--text-primary);
  /* Legend Component Colors */
  --legend-bg: var(--bg-primary);
  --legend-border: var(--border-primary);
  --legend-text: var(--text-primary);
  --legend-item-bg: transparent;
  --legend-item-border: transparent;
  --legend-hover-bg: var(--bg-tertiary);
  --legend-highlight-bg: var(--bg-quaternary);
  --legend-selection-bg: var(--bg-secondary);
  /* Color on Primary (for contrast on primary color backgrounds) */
  --color-on-primary: var(--text-white);
  --color-primary-light: #cce7ff;
  --bg-accent-light: var(--color-primary-light);
}
.spacer {
  flex-grow: 1 !important;
}
.tooltip {
  position: relative;
  display: inline-block;
}
.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  top: 150%;
  left: 50%;
  margin-left: -60px;
}
.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent black transparent;
}
.tooltip:hover .tooltiptext {
  visibility: visible;
}
.vs__dropdown-option {
  display: table;
  min-width: 100%;
}
.top-bar-divider {
  position: relative;
}
.top-bar-divider:after {
  display: block;
  width: 1px;
  height: 80%;
  background: rgba(0, 0, 0, 0.2);
  content: "";
  position: absolute;
  top: 10%;
  right: 0;
}
.content {
  display: flex;
  flex-direction: row;
}
.content > div {
  width: 48%;
  margin-right: 5px;
}
.content > textarea {
  width: 50%;
}
.content .multiselect {
  width: 100% !important;
}
.required {
  width: 50%;
  margin: 0;
  display: flex;
  flex-direction: column;
}
.required > span {
  color: red;
}
.required input {
  width: 60% !important;
}
.required .multiselect .multiselect__tags {
  border-color: red;
}
.form-body {
  height: calc(100vh - 380px);
  overflow: auto;
}
textarea {
  resize: vertical;
}
.width-half {
  width: 50%;
}
.input-group-prepend > .input-group-text {
  min-width: 225px;
}
.pointer {
  cursor: pointer;
}
.highlight {
  color: #3499cc;
}
.pointer {
  cursor: pointer;
}
.orange-bg {
  background-color: #e5ac23;
}
.green-bg {
  background-color: rgb(0, 191, 0);
}
.red-bg {
  background-color: #e64c3c;
}
.blue-bg {
  background-color: #3499cc;
  margin-left: 5px;
}
.gray-bg {
  background-color: #666;
}
.modal {
  display: flex;
  justify-content: center;
  align-items: center;
}
.modal-content {
  display: flex;
  flex-direction: column;
  padding: 1rem;
  background: #fff;
  border-radius: 0.5rem;
  min-width: 25%;
  max-width: 50%;
}
.right {
  text-align: right;
}
input,
textarea {
  display: block;
  height: 30px;
  font-family: ABBVoice, Verdana, Arial, sans-serif;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #495057;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #ced4da;
  border: gray solid 1px;
  border-radius: 3px;
  text-rendering: auto;
  letter-spacing: normal;
  word-spacing: normal;
  line-height: normal;
  text-transform: none;
  text-indent: 0px;
  text-shadow: none;
  display: inline-block;
  text-align: start;
  appearance: auto;
  -webkit-rtl-ordering: logical;
  cursor: text;
  background-color: field;
  margin: 0em;
  padding: 1px 2px;
  border-color: -internal-light-dark(rgb(118, 118, 118), rgb(133, 133, 133));
}
input:focus,
textarea:focus {
  border: #3499cc solid 1px;
  box-shadow: #3499cc 1px 0 1px 1px;
}
input:disabled,
textarea:disabled {
  color: #85919e;
  background: #ffffff;
  cursor: default;
}
.vs__dropdown-toggle {
  width: 100%;
}
button {
  color: #fff;
  background-color: #6c757d;
  border-color: #6c757d;
  font-size: 14px;
  text-rendering: auto;
  letter-spacing: normal;
  word-spacing: normal;
  line-height: normal;
  text-transform: none;
  text-indent: 0px;
  text-shadow: none;
  display: inline-block;
  text-align: center;
  align-items: flex-start;
  box-sizing: border-box;
  margin: 0em;
  padding: 1px 6px;
  border-width: 2px;
  border-style: outset;
  border-color: buttonborder;
  border-image: initial;
  display: inline-block;
  font-weight: 400;
  text-align: center;
  vertical-align: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  border: 1px solid transparent;
  padding: 0.375rem 0.75rem;
  line-height: 1.5;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
button:hover {
  text-decoration: none;
  filter: saturate(0.7);
}

/* Modern button styles */
.btn {
  border: none;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  letter-spacing: 0.5px;
  color: var(--text-white);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 0.25rem;
}
.btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s;
}
.btn:hover:not(:disabled) {
  transform: translateY(-2px);
}
.btn:hover:not(:disabled)::before {
  left: 100%;
}
.btn:active:not(:disabled) {
  transform: translateY(-1px);
}
.btn:disabled {
  background: linear-gradient(135deg, var(--form-text-disabled) 0%, var(--form-text-disabled) 100%);
  color: var(--form-text-disabled);
  cursor: not-allowed;
  transform: none;
  box-shadow: var(--shadow-light);
}
.btn svg,
.btn .fa-file-pdf {
  flex-shrink: 0;
  font-size: 1rem;
}
.btn-create {
  background: var(--gradient-primary);
  box-shadow: 0 4px 12px rgba(0, 122, 204, 0.3);
  min-width: 140px;
}
.btn-create:hover:not(:disabled) {
  box-shadow: 0 6px 20px rgba(0, 122, 204, 0.4);
  background: linear-gradient(135deg, var(--color-primary-light) 0%, var(--color-primary) 100%);
}
.btn-create:active:not(:disabled) {
  box-shadow: 0 4px 12px rgba(0, 122, 204, 0.3);
}
.btn-save {
  background: var(--gradient-warning);
  box-shadow: 0 4px 12px rgba(255, 193, 7, 0.3);
  min-width: 140px;
}
.btn-save:hover:not(:disabled) {
  box-shadow: 0 6px 20px rgba(255, 193, 7, 0.4);
  background: linear-gradient(135deg, var(--color-warning-light) 0%, var(--color-warning) 100%);
}
.btn-save:active:not(:disabled) {
  box-shadow: 0 4px 12px rgba(255, 193, 7, 0.3);
}
.btn-pdf {
  background: var(--gradient-purple);
  box-shadow: 0 4px 12px rgba(111, 66, 193, 0.3);
  min-width: 120px;
}
.btn-pdf:hover:not(:disabled) {
  box-shadow: 0 6px 20px rgba(111, 66, 193, 0.4);
  background: linear-gradient(135deg, var(--color-purple-light) 0%, var(--color-purple) 100%);
}
.btn-pdf:active:not(:disabled) {
  box-shadow: 0 4px 12px rgba(111, 66, 193, 0.3);
}
.btn-review {
  background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
  box-shadow: 0 4px 12px rgba(52, 152, 219, 0.3);
  min-width: 140px;
}
.btn-review:hover:not(:disabled) {
  box-shadow: 0 6px 20px rgba(52, 152, 219, 0.4);
  background: linear-gradient(135deg, #5dade2 0%, #3498db 100%);
}
.btn-review:active:not(:disabled) {
  box-shadow: 0 4px 12px rgba(52, 152, 219, 0.3);
}
.btn-approval {
  background: linear-gradient(135deg, #27ae60 0%, #229954 100%);
  box-shadow: 0 4px 12px rgba(39, 174, 96, 0.3);
  min-width: 150px;
}
.btn-approval:hover:not(:disabled) {
  box-shadow: 0 6px 20px rgba(39, 174, 96, 0.4);
  background: linear-gradient(135deg, #58d68d 0%, #27ae60 100%);
}
.btn-approval:active:not(:disabled) {
  box-shadow: 0 4px 12px rgba(39, 174, 96, 0.3);
}
.btn-accept,
.btn-approve {
  background: linear-gradient(135deg, #28a745 0%, #1e7e34 100%);
  box-shadow: 0 4px 12px rgba(40, 167, 69, 0.3);
  min-width: 140px;
  margin-right: 8px;
}
.btn-accept:hover:not(:disabled),
.btn-approve:hover:not(:disabled) {
  box-shadow: 0 6px 20px rgba(40, 167, 69, 0.4);
  background: linear-gradient(135deg, #34ce57 0%, #28a745 100%);
}
.btn-accept:active:not(:disabled),
.btn-approve:active:not(:disabled) {
  box-shadow: 0 4px 12px rgba(40, 167, 69, 0.3);
}
.btn-reject {
  background: linear-gradient(135deg, #dc3545 0%, #bd2130 100%);
  box-shadow: 0 4px 12px rgba(220, 53, 69, 0.3);
  min-width: 120px;
  margin-left: 8px;
}
.btn-reject:hover:not(:disabled) {
  box-shadow: 0 6px 20px rgba(220, 53, 69, 0.4);
  background: linear-gradient(135deg, #e4606d 0%, #dc3545 100%);
}
.btn-reject:active:not(:disabled) {
  box-shadow: 0 4px 12px rgba(220, 53, 69, 0.3);
}
.btn-files {
  background: linear-gradient(135deg, #17a2b8 0%, #138496 100%);
  box-shadow: 0 4px 12px rgba(23, 162, 184, 0.3);
  min-width: 140px;
}
.btn-files:hover:not(:disabled) {
  box-shadow: 0 6px 20px rgba(23, 162, 184, 0.4);
  background: linear-gradient(135deg, #3fc1d8 0%, #17a2b8 100%);
}
.btn-files:active:not(:disabled) {
  box-shadow: 0 4px 12px rgba(23, 162, 184, 0.3);
}
.btn-upload {
  background: linear-gradient(135deg, #20c997 0%, #1a9a73 100%);
  box-shadow: 0 4px 12px rgba(32, 201, 151, 0.3);
  min-width: 140px;
}
.btn-upload:hover:not(:disabled) {
  box-shadow: 0 6px 20px rgba(32, 201, 151, 0.4);
  background: linear-gradient(135deg, #4dd4ac 0%, #20c997 100%);
}
.btn-upload:active:not(:disabled) {
  box-shadow: 0 4px 12px rgba(32, 201, 151, 0.3);
}
.toolbar {
  display: flex;
  align-items: center;
  width: 100%;
}
body {
  height: 100%;
  margin: 0;
  font-family: ABBVoice, Verdana, Arial, sans-serif;
  background-color: #e6e6e6 !important;
}
#app {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 35px 12px 0 55px;
}
.row.short-gutters {
  margin-right: -7px;
  margin-left: -7px;
}
.short-gutters > .col,
.short-gutters > [class*=col-] {
  padding-right: 7px;
  padding-left: 7px;
}
.vertical-gutters > .col,
.vertical-gutters > [class*=col-] {
  padding-top: 7px;
  padding-bottom: 7px;
}
.vertical-gutters-top > .col,
.vertical-gutters-top > [class*=col-] {
  padding-bottom: 7px;
}/* ========================================
   CSS VARIABLES - UNIFIED COLOR SYSTEM
   ======================================== */
:root {
  /* Primary Brand Colors */
  --color-primary: #007acc;
  --color-primary-dark: #0056a3;
  --color-primary-light: #0088e6;
  --color-secondary: #0066cc;
  --color-corporate: #576bb2;
  /* Status Colors - Success */
  --color-success: #28a745;
  --color-success-dark: #218838;
  --color-success-light: #20c997;
  --color-success-alt: #5cb85c;
  --color-success-bright: #7BC142;
  /* Status Colors - Warning */
  --color-warning: #ffc107;
  --color-warning-dark: #ff9800;
  --color-warning-light: #ffcd38;
  --color-warning-alt: #ffb74d;
  /* Status Colors - Danger */
  --color-danger: #dc3545;
  --color-danger-dark: #c82333;
  --color-danger-light: #e74c3c;
  --color-danger-bright: #ff0000;
  --color-danger-alt: #E64C3C;
  /* Background Colors */
  --bg-primary: #ffffff;
  --bg-secondary: #f9f9f9;
  --bg-tertiary: #f8f9fa;
  --bg-quaternary: #fafafa;
  --bg-alt: #f5f5f5;
  --bg-light: #fafbfc;
  --bg-gray: #e6e6e6;
  --bg-dark: #333333;
  --bg-field: field; /* Native field background */
  /* Border Colors */
  --border-primary: #dddddd;
  --border-secondary: #e0e0e0;
  --border-tertiary: #cccccc;
  --border-light: #e1e5e9;
  --border-gray: #ced4da;
  --border-dark: #666666;
  --border-disabled: #b4b8bc;
  --border-native: -internal-light-dark(rgb(118, 118, 118), rgb(133, 133, 133));
  /* Text Colors */
  --text-primary: #000000;
  --text-secondary: #333333;
  --text-tertiary: #555555;
  --text-quaternary: #666666;
  --text-light: #85919e;
  --text-gray: #495057;
  --text-muted: #6c757d;
  --text-white: #ffffff;
  --text-red: #ff0000;
  /* Special Purpose Colors */
  --color-purple: #6f42c1;
  --color-purple-dark: #563d7c;
  --color-purple-light: #7952b3;
  --color-orange: #e5ac23;
  --color-highlight: #3499cc;
  --color-info: #42b983;
  /* Overlays & Effects */
  --overlay-modal: rgba(0, 0, 0, 0.5);
  --overlay-light: rgba(0, 0, 0, 0.2);
  --shadow-default: rgba(0, 0, 0, 0.33);
  --shadow-light: rgba(0, 0, 0, 0.14);
  --shadow-card: 0 1px 4px 0 rgb(0 0 0 / 14%);
  --shadow-button: 0 2px 8px rgba(220, 53, 69, 0.3);
  --shadow-button-hover: 0 4px 12px rgba(220, 53, 69, 0.4);
  --shadow-text: 0 1px 2px rgba(0, 0, 0, 0.2);
  /* Gradients */
  --gradient-primary: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  --gradient-success: linear-gradient(135deg, var(--color-success) 0%, var(--color-success-light) 100%);
  --gradient-warning: linear-gradient(135deg, var(--color-warning) 0%, var(--color-warning-dark) 100%);
  --gradient-danger: linear-gradient(135deg, var(--color-danger) 0%, var(--color-danger-dark) 100%);
  --gradient-purple: linear-gradient(135deg, var(--color-purple) 0%, var(--color-purple-dark) 100%);
  /* Component Specific Variables */
  --mom-action-bg: var(--bg-secondary);
  --mom-action-border: var(--border-primary);
  --mom-header-divider: var(--border-secondary);
  --html-editor-border: var(--border-tertiary);
  --html-editor-bg: var(--bg-primary);
  --html-editor-toolbar-bg: var(--bg-tertiary);
  --remove-btn-gradient: var(--gradient-danger);
  --pdf-header-color: var(--color-primary);
  --pdf-content-bg: var(--bg-quaternary);
  --modal-overlay: var(--overlay-modal);
  /* Semantic Color Mappings */
  --form-bg: var(--bg-primary);
  --form-border: var(--border-gray);
  --form-border-focus: var(--color-highlight);
  --form-text: var(--text-gray);
  --form-text-disabled: var(--text-light);
  --form-bg-disabled: var(--bg-alt);
  --button-bg: var(--text-muted);
  --button-text: var(--text-white);
  --button-border: var(--text-muted);
  --card-bg: var(--bg-primary);
  --card-border: var(--border-primary);
  --card-shadow: var(--shadow-card);
  --tooltip-bg: var(--text-primary);
  --tooltip-text: var(--text-white);
}

/* ========================================
   EXISTING STYLES (Updated to use variables)
   ======================================== */
.spacer {
  flex-grow: 1 !important;
}

.tooltip {
  position: relative;
  display: inline-block;
}
.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: var(--tooltip-bg);
  color: var(--tooltip-text);
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  top: 150%;
  left: 50%;
  margin-left: -60px;
}
.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent var(--tooltip-bg) transparent;
}
.tooltip:hover .tooltiptext {
  visibility: visible;
}

.vs__dropdown-option {
  display: table;
  min-width: 100%;
}

.top-bar-divider {
  position: relative;
}
.top-bar-divider:after {
  display: block;
  width: 1px;
  height: 80%;
  background: var(--overlay-light);
  content: "";
  position: absolute;
  top: 10%;
  right: 0;
}

.content {
  display: flex;
  flex-direction: row;
}
.content > div {
  width: 48%;
  margin-right: 5px;
}
.content > textarea {
  width: 50%;
}
.content .multiselect {
  width: 100% !important;
}

.required {
  width: 50%;
  margin: 0;
  display: flex;
  flex-direction: column;
}
.required > span {
  color: var(--text-red);
}
.required input {
  width: 60% !important;
}
.required .multiselect .multiselect__tags {
  border-color: var(--text-red);
}

.pointer {
  cursor: pointer;
}

.highlight {
  color: var(--color-highlight);
}

/* Background Utility Classes */
.orange-bg {
  background-color: var(--color-orange);
}

.green-bg {
  background-color: var(--color-success-bright);
}

.red-bg {
  background-color: var(--color-danger-light);
}

.blue-bg {
  background-color: var(--color-highlight);
  margin-left: 5px;
}

.gray-bg {
  background-color: var(--text-quaternary);
}

/* Modal Styles */
.modal {
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal-content {
  display: flex;
  flex-direction: column;
  padding: 1rem;
  background: var(--bg-primary);
  border-radius: 0.5rem;
  min-width: 25%;
  max-width: 50%;
}

.right {
  text-align: right;
}

/* Form Element Styles */
input,
textarea {
  display: block;
  height: 30px;
  font-family: ABBVoice, Verdana, Arial, sans-serif;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--form-text);
  background-color: var(--form-bg);
  background-clip: padding-box;
  border: 1px solid var(--form-border);
  border-radius: 3px;
  text-rendering: auto;
  letter-spacing: normal;
  word-spacing: normal;
  line-height: normal;
  text-transform: none;
  text-indent: 0px;
  text-shadow: none;
  display: inline-block;
  text-align: start;
  appearance: auto;
  -webkit-rtl-ordering: logical;
  cursor: text;
  margin: 0em;
  padding: 1px 2px;
  border-color: var(--border-native);
}
input:focus,
textarea:focus {
  border: var(--form-border-focus) solid 1px;
  box-shadow: var(--form-border-focus) 1px 0 1px 1px;
}
input:disabled,
textarea:disabled {
  color: var(--form-text-disabled);
  background: var(--form-bg-disabled);
  cursor: default;
}

.vs__dropdown-toggle {
  width: 100%;
}

/* Button Styles */
button {
  color: var(--button-text);
  background-color: var(--button-bg);
  border-color: var(--button-border);
  font-size: 14px;
  text-rendering: auto;
  letter-spacing: normal;
  word-spacing: normal;
  line-height: normal;
  text-transform: none;
  text-indent: 0px;
  text-shadow: none;
  display: inline-block;
  text-align: center;
  align-items: flex-start;
  box-sizing: border-box;
  margin: 0em;
  padding: 1px 6px;
  border-width: 2px;
  border-style: outset;
  border-color: buttonborder;
  border-image: initial;
  display: inline-block;
  font-weight: 400;
  text-align: center;
  vertical-align: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  border: 1px solid transparent;
  padding: 0.375rem 0.75rem;
  line-height: 1.5;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
button:hover {
  text-decoration: none;
  filter: saturate(0.7);
}

/* ========================================
   COLOR UTILITY MIXINS (SCSS)
   ======================================== */
/* Utility function to get CSS variable value for use in SCSS calculations */
/* Mixins for common color patterns */
/* ========================================
   DARK THEME SUPPORT
   ======================================== */
/* Dark theme color overrides */
[data-theme=dark] {
  /* Primary Brand Colors */
  --color-primary: #0099ff;
  --color-primary-dark: #007acc;
  --color-primary-light: #33aaff;
  --color-secondary: #0088ff;
  --color-corporate: #7086d6;
  /* Status Colors - Success */
  --color-success: #4caf50;
  --color-success-dark: #388e3c;
  --color-success-light: #26d0ce;
  --color-success-alt: #66bb6a;
  --color-success-bright: #8bc34a;
  /* Status Colors - Warning */
  --color-warning: #ffca28;
  --color-warning-dark: #ffa726;
  --color-warning-light: #ffd54f;
  --color-warning-alt: #ffcc02;
  /* Status Colors - Danger */
  --color-danger: #f44336;
  --color-danger-dark: #e53935;
  --color-danger-light: #ef5350;
  --color-danger-bright: #ff1744;
  --color-danger-alt: #ff5722;
  /* Background Colors */
  --bg-primary: #121212;
  --bg-secondary: #1e1e1e;
  --bg-tertiary: #242424;
  --bg-quaternary: #2c2c2c;
  --bg-alt: #383838;
  --bg-light: #404040;
  --bg-gray: #2a2a2a;
  --bg-dark: #000000;
  --bg-field: #2c2c2c; /* Dark field background */
  /* Border Colors */
  --border-primary: #404040;
  --border-secondary: #4a4a4a;
  --border-tertiary: #555555;
  --border-light: #333333;
  --border-gray: #484848;
  --border-dark: #606060;
  --border-disabled: #2a2a2a;
  --border-native: #555555;
  /* Text Colors */
  --text-primary: #ffffff;
  --text-secondary: #e0e0e0;
  --text-tertiary: #b0b0b0;
  --text-quaternary: #909090;
  --text-light: #707070;
  --text-gray: #a0a0a0;
  --text-muted: #808080;
  --text-white: #ffffff;
  --text-red: #ff6b6b;
  /* Special Purpose Colors */
  --color-purple: #9c27b0;
  --color-purple-dark: #7b1fa2;
  --color-purple-light: #ba68c8;
  --color-orange: #ff9800;
  --color-highlight: #03dac6;
  --color-info: #4fc3f7;
  /* Overlays & Effects */
  --overlay-modal: rgba(0, 0, 0, 0.8);
  --overlay-light: rgba(255, 255, 255, 0.1);
  --shadow-default: rgba(0, 0, 0, 0.6);
  --shadow-light: rgba(0, 0, 0, 0.4);
  --shadow-card: 0 2px 8px 0 rgb(0 0 0 / 40%);
  --shadow-button: 0 2px 8px rgba(244, 67, 54, 0.4);
  --shadow-button-hover: 0 4px 12px rgba(244, 67, 54, 0.5);
  --shadow-text: 0 1px 2px rgba(0, 0, 0, 0.4);
  /* Gradients - Dark Theme */
  --gradient-primary: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  --gradient-success: linear-gradient(135deg, var(--color-success) 0%, var(--color-success-light) 100%);
  --gradient-warning: linear-gradient(135deg, var(--color-warning) 0%, var(--color-warning-dark) 100%);
  --gradient-danger: linear-gradient(135deg, var(--color-danger) 0%, var(--color-danger-dark) 100%);
  --gradient-purple: linear-gradient(135deg, var(--color-purple) 0%, var(--color-purple-dark) 100%);
  /* Component Specific Variables - Dark */
  --mom-action-bg: var(--bg-secondary);
  --mom-action-border: var(--border-primary);
  --mom-header-divider: var(--border-secondary);
  --html-editor-border: var(--border-tertiary);
  --html-editor-bg: var(--bg-tertiary);
  --html-editor-toolbar-bg: var(--bg-quaternary);
  --remove-btn-gradient: var(--gradient-danger);
  --pdf-header-color: var(--color-primary);
  --pdf-content-bg: var(--bg-secondary);
  --modal-overlay: var(--overlay-modal);
  /* Semantic Color Mappings - Dark */
  --form-bg: var(--bg-tertiary);
  --form-border: var(--border-gray);
  --form-border-focus: var(--color-highlight);
  --form-text: var(--text-gray);
  --form-text-disabled: var(--text-light);
  --form-bg-disabled: var(--bg-alt);
  --button-bg: var(--text-muted);
  --button-text: var(--text-white);
  --button-border: var(--text-muted);
  --card-bg: var(--bg-secondary);
  --card-border: var(--border-primary);
  --card-shadow: var(--shadow-card);
  --tooltip-bg: var(--bg-quaternary);
  --tooltip-text: var(--text-primary);
  /* Dark Theme Surface Elevation */
  --surface-1: #121212; /* Base surface */
  --surface-2: #1e1e1e; /* +1dp elevation */
  --surface-3: #242424; /* +2dp elevation */
  --surface-4: #272727; /* +3dp elevation */
  --surface-6: #2c2c2c; /* +4dp elevation */
  --surface-8: #2e2e2e; /* +6dp elevation */
  --surface-12: #323232; /* +8dp elevation */
  --surface-16: #353535; /* +12dp elevation */
  --surface-24: #383838; /* +16dp elevation */
  /* Risk Matrix - Dark Theme */
  /* Risk Level Backgrounds - Dark */
  --risk-low-bg: #1a3a1a;
  --risk-medium-bg: #3d3317;
  --risk-high-bg: #3d1a1d;
  --risk-critical-bg: #1a2d33;
  /* Risk Level Text Colors - Dark */
  --risk-low-text: #90c690;
  --risk-medium-text: #d4af37;
  --risk-high-text: #ff8a95;
  --risk-critical-text: #87ceeb;
  /* Opportunity Level Backgrounds - Dark */
  --opportunity-low-bg: #2a2a2a;
  --opportunity-medium-bg: #1a2d3d;
  --opportunity-high-bg: #1a3d26;
  --opportunity-highest-bg: #1a2d4d;
  /* Opportunity Level Text Colors - Dark */
  --opportunity-low-text: #a0a0a0;
  --opportunity-medium-text: #4da6ff;
  --opportunity-high-text: #66bb6a;
  --opportunity-highest-text: #64b5f6;
  /* Matrix Component Colors - Dark */
  --matrix-hover-border: var(--color-primary);
  --matrix-selection-border: var(--color-danger);
  /* Chip Component Colors - Dark */
  --chip-bg: var(--color-primary);
  --chip-text: var(--text-primary);
  --chip-border: var(--color-primary);
  --chip-hover-bg: var(--color-primary-light);
  --chip-hover-text: var(--text-primary);
  --chip-highlight-bg: var(--color-warning);
  --chip-highlight-text: var(--text-primary);
  /* Legend Component Colors - Dark */
  --legend-bg: var(--bg-secondary);
  --legend-border: var(--border-primary);
  --legend-text: var(--text-primary);
  --legend-item-bg: transparent;
  --legend-item-border: transparent;
  --legend-hover-bg: var(--bg-tertiary);
  --legend-highlight-bg: var(--bg-quaternary);
  --legend-selection-bg: var(--bg-tertiary);
  /* Color on Primary - Dark */
  --color-on-primary: var(--text-primary);
  --color-primary-light: #404080;
  --bg-accent-light: var(--color-primary-light);
}

/* Auto theme - only applies dark colors when user explicitly chooses auto AND system prefers dark */
@media (prefers-color-scheme: dark) {
  [data-theme=auto] {
    /* Apply dark theme variables only when auto theme is selected and system prefers dark */
    --color-primary: #0099ff;
    --color-primary-dark: #007acc;
    --color-primary-light: #33aaff;
    --color-secondary: #0088ff;
    --color-corporate: #7086d6;
    --color-success: #4caf50;
    --color-success-dark: #388e3c;
    --color-success-light: #26d0ce;
    --color-success-alt: #66bb6a;
    --color-success-bright: #8bc34a;
    --color-warning: #ffca28;
    --color-warning-dark: #ffa726;
    --color-warning-light: #ffd54f;
    --color-warning-alt: #ffcc02;
    --color-danger: #f44336;
    --color-danger-dark: #e53935;
    --color-danger-light: #ef5350;
    --color-danger-bright: #ff1744;
    --color-danger-alt: #ff5722;
    --bg-primary: #121212;
    --bg-secondary: #1e1e1e;
    --bg-tertiary: #242424;
    --bg-quaternary: #2c2c2c;
    --bg-alt: #383838;
    --bg-light: #404040;
    --bg-gray: #2a2a2a;
    --bg-dark: #000000;
    --bg-field: #2c2c2c;
    --border-primary: #404040;
    --border-secondary: #4a4a4a;
    --border-tertiary: #555555;
    --border-light: #333333;
    --border-gray: #484848;
    --border-dark: #606060;
    --border-disabled: #2a2a2a;
    --border-native: #555555;
    --text-primary: #ffffff;
    --text-secondary: #e0e0e0;
    --text-tertiary: #b0b0b0;
    --text-quaternary: #909090;
    --text-light: #707070;
    --text-gray: #a0a0a0;
    --text-muted: #808080;
    --text-white: #ffffff;
    --text-red: #ff6b6b;
    --color-purple: #9c27b0;
    --color-purple-dark: #7b1fa2;
    --color-purple-light: #ba68c8;
    --color-orange: #ff9800;
    --color-highlight: #03dac6;
    --color-info: #4fc3f7;
    --overlay-modal: rgba(0, 0, 0, 0.8);
    --overlay-light: rgba(255, 255, 255, 0.1);
    --shadow-default: rgba(0, 0, 0, 0.6);
    --shadow-light: rgba(0, 0, 0, 0.4);
    --shadow-card: 0 2px 8px 0 rgb(0 0 0 / 40%);
    --shadow-button: 0 2px 8px rgba(244, 67, 54, 0.4);
    --shadow-button-hover: 0 4px 12px rgba(244, 67, 54, 0.5);
    --shadow-text: 0 1px 2px rgba(0, 0, 0, 0.4);
    /* Component and semantic colors inherit from variables above */
    --mom-action-bg: var(--bg-secondary);
    --mom-action-border: var(--border-primary);
    --mom-header-divider: var(--border-secondary);
    --html-editor-border: var(--border-tertiary);
    --html-editor-bg: var(--bg-tertiary);
    --html-editor-toolbar-bg: var(--bg-quaternary);
    --pdf-header-color: var(--color-primary);
    --pdf-content-bg: var(--bg-secondary);
    --modal-overlay: var(--overlay-modal);
    --form-bg: var(--bg-tertiary);
    --form-border: var(--border-gray);
    --form-border-focus: var(--color-highlight);
    --form-text: var(--text-gray);
    --form-text-disabled: var(--text-light);
    --form-bg-disabled: var(--bg-alt);
    --card-bg: var(--bg-secondary);
    --card-border: var(--border-primary);
    --card-shadow: var(--shadow-card);
    --tooltip-bg: var(--bg-quaternary);
    --tooltip-text: var(--text-primary);
    /* Risk Matrix - Auto Theme Dark */
    /* Risk Level Backgrounds - Auto Dark */
    --risk-low-bg: #1a3a1a;
    --risk-medium-bg: #3d3317;
    --risk-high-bg: #3d1a1d;
    --risk-critical-bg: #1a2d33;
    /* Risk Level Text Colors - Auto Dark */
    --risk-low-text: #90c690;
    --risk-medium-text: #d4af37;
    --risk-high-text: #ff8a95;
    --risk-critical-text: #87ceeb;
    /* Opportunity Level Backgrounds - Auto Dark */
    --opportunity-low-bg: #2a2a2a;
    --opportunity-medium-bg: #1a2d3d;
    --opportunity-high-bg: #1a3d26;
    --opportunity-highest-bg: #1a2d4d;
    /* Opportunity Level Text Colors - Auto Dark */
    --opportunity-low-text: #a0a0a0;
    --opportunity-medium-text: #4da6ff;
    --opportunity-high-text: #66bb6a;
    --opportunity-highest-text: #64b5f6;
    /* Matrix Component Colors - Auto Dark */
    --matrix-hover-border: var(--color-primary);
    --matrix-selection-border: var(--color-danger);
    /* Chip Component Colors - Auto Dark */
    --chip-bg: var(--color-primary);
    --chip-text: var(--text-primary);
    --chip-border: var(--color-primary);
    --chip-hover-bg: var(--color-primary-light);
    --chip-hover-text: var(--text-primary);
    --chip-highlight-bg: var(--color-warning);
    --chip-highlight-text: var(--text-primary);
    /* Legend Component Colors - Auto Dark */
    --legend-bg: var(--bg-secondary);
    --legend-border: var(--border-primary);
    --legend-text: var(--text-primary);
    --legend-item-bg: transparent;
    --legend-item-border: transparent;
    --legend-hover-bg: var(--bg-tertiary);
    --legend-highlight-bg: var(--bg-quaternary);
    --legend-selection-bg: var(--bg-tertiary);
    /* Color on Primary - Auto Dark */
    --color-on-primary: var(--text-primary);
    --color-primary-light: #404080;
    --bg-accent-light: var(--color-primary-light);
  }
}

/* High contrast theme support */
[data-theme=high-contrast] {
  --color-primary: #0066ff;
  --bg-primary: #000000;
  --bg-secondary: #000000;
  --bg-tertiary: #1a1a1a;
  --text-primary: #ffffff;
  --text-secondary: #ffffff;
  --border-primary: #ffffff;
  --border-secondary: #ffffff;
  --color-success: #00ff00;
  --color-warning: #ffff00;
  --color-danger: #ff0000;
}

/* Smooth theme transitions */
* {
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

/* Disable transitions during theme switching to prevent flashing */
.theme-switching * {
  transition: none !important;
}

/* ========================================
   COMPONENT-SPECIFIC COLOR SCHEMES
   ======================================== */
/* Minutes of Meeting Theme */
:root {
  --mom-primary: var(--color-primary);
  --mom-secondary: var(--bg-secondary);
  --mom-accent: var(--color-success);
  --mom-warning: var(--color-warning);
  --mom-danger: var(--color-danger);
}

/* Form Theme */
:root {
  --form-primary: var(--color-highlight);
  --form-secondary: var(--bg-tertiary);
  --form-success: var(--color-success);
  --form-warning: var(--color-warning);
  --form-danger: var(--color-danger);
}

/* Status Theme */
:root {
  --status-completed: var(--color-success);
  --status-pending: var(--color-warning);
  --status-failed: var(--color-danger);
  --status-info: var(--color-primary);
}

/* ========================================
   RISK MATRIX COMPONENT COLORS
   ======================================== */
/* Risk Matrix - Risk Level Colors */
:root {
  /* Risk Level Backgrounds */
  --risk-low-bg: #e8f5e8;
  --risk-medium-bg: #fff3cd;
  --risk-high-bg: #f8d7da;
  --risk-critical-bg: #d1ecf1;
  /* Risk Level Text Colors */
  --risk-low-text: #2d5a2d;
  --risk-medium-text: #856404;
  --risk-high-text: #721c24;
  --risk-critical-text: #0c5460;
  /* Opportunity Level Backgrounds */
  --opportunity-low-bg: #f8f9fa;
  --opportunity-medium-bg: #e7f3ff;
  --opportunity-high-bg: #d4edda;
  --opportunity-highest-bg: #cce7ff;
  /* Opportunity Level Text Colors */
  --opportunity-low-text: #6c757d;
  --opportunity-medium-text: #0066cc;
  --opportunity-high-text: #155724;
  --opportunity-highest-text: #004085;
  /* Matrix Component Colors */
  --matrix-hover-border: var(--color-primary);
  --matrix-selection-border: var(--color-danger);
  /* Chip Component Colors */
  --chip-bg: var(--color-primary);
  --chip-text: var(--text-white);
  --chip-border: var(--color-primary);
  --chip-hover-bg: var(--color-primary-dark);
  --chip-hover-text: var(--text-white);
  --chip-highlight-bg: var(--color-warning);
  --chip-highlight-text: var(--text-primary);
  /* Legend Component Colors */
  --legend-bg: var(--bg-primary);
  --legend-border: var(--border-primary);
  --legend-text: var(--text-primary);
  --legend-item-bg: transparent;
  --legend-item-border: transparent;
  --legend-hover-bg: var(--bg-tertiary);
  --legend-highlight-bg: var(--bg-quaternary);
  --legend-selection-bg: var(--bg-secondary);
  /* Color on Primary (for contrast on primary color backgrounds) */
  --color-on-primary: var(--text-white);
  --color-primary-light: #cce7ff;
  --bg-accent-light: var(--color-primary-light);
}