/**
 * CSS Color Configuration System
 * This is the main color configuration that can be overridden by client-specific settings
 */

:root {
  /* Main brand colors - customize these for each client */
  --primary-project-color: #004225;
  --primary-project-color-dark: #002816;
  --secondary-project-color: #0d5938;
  --accent-color: #444444;
  
  /* Background colors */
  --background-color: #f5f5f5;
  --background-white: #ffffff;
  --background-dark: #212121;
  --background-light-gray: #f8f9fa;
  --background-medium-gray: #f0f0f0;
  
  /* Text colors */
  --text-color: #212121;
  --text-color-light: #666666;
  --text-color-lighter: #999999;
  --text-color-white: #ffffff;
  --text-color-error: #dc3545;
  --text-color-success: #28a745;
  --text-color-warning: #ffc107;
  --text-color-info: #17a2b8;
  
  /* Border colors */
  --border-color: #e0e0e0;
  --border-color-light: #dfe1e6;
  --border-color-medium: #c1c7d0;
  
  /* Button colors - AI Assistant specific */
  --button-primary-bg: #444444;
  --button-primary-text: #ffffff;
  --button-secondary-bg: #6c757d;
  --button-secondary-text: #ffffff;
  --button-success-bg: #28a745;
  --button-success-text: #ffffff;
  --button-danger-bg: var(--primary-project-color-dark);
  --button-danger-text: #ffffff;
  
  /* Shadow colors */
  --shadow-color: rgba(0, 0, 0, 0.05);
  --shadow-color-dark: rgba(0, 0, 0, 0.1);
  --shadow-color-darker: rgba(0, 0, 0, 0.2);
  
  /* Overlay colors */
  --color-black-overlay: rgba(0, 0, 0, 0.276);
  --color-dark-overlay: rgba(0, 0, 0, 0.8);
  
  /* Legacy colors - kept for compatibility */
  --footer-background: var(--background-dark);
  --footer-text: var(--text-color-white);
  --link-color: var(--primary-project-color);
  --color-individual-icon: #2d5564;
  --color-white: #fff;
  --color-dee2e6: #dee2e6;
  --color-red: var(--text-color-error);
  --color-gray: #808080;
  --color-transparent: transparent;
}

/* Import client-specific overrides if available */
@import url('/static/base/css/client_config.css');

/* Override MDB hardcoded colors with CSS variables */
.mdb-color {
  background-color: var(--primary-project-color) !important;
}

.mdb-color-text {
  color: var(--primary-project-color) !important;
}

.rgba-mdb-color-slight,
.rgba-mdb-color-light,
.rgba-mdb-color-strong {
  background-color: var(--primary-project-color) !important;
}

/* Override other MDB classes that use #e64141 */
.btn-mdb-color {
  background-color: var(--primary-project-color) !important;
}

.btn-outline-mdb-color {
  color: var(--primary-project-color) !important;
  border-color: var(--primary-project-color) !important;
}

.btn-outline-mdb-color:hover {
  background-color: var(--primary-project-color) !important;
}

.mdb-skin .badge-default {
  background-color: var(--primary-project-color) !important;
}

.mdb-skin .badge-default:hover {
  background-color: var(--primary-project-color) !important;
}

/* Override MDB skin button-default colors */
.mdb-skin .btn-default {
  background-color: var(--primary-project-color) !important;
}

.mdb-skin .btn-default:hover {
  background-color: var(--primary-project-color) !important;
  filter: brightness(1.1);
}

.mdb-skin .btn-default.dropdown-toggle {
  background-color: var(--primary-project-color) !important;
}

.mdb-skin .btn-default.dropdown-toggle:hover,
.mdb-skin .btn-default.dropdown-toggle:focus {
  background-color: var(--primary-project-color) !important;
  filter: brightness(1.1);
}

.mdb-skin .btn-default:not([disabled]):not(.disabled):active,
.mdb-skin .btn-default:not([disabled]):not(.disabled).active,
.show>.mdb-skin .btn-default.dropdown-toggle {
  background-color: var(--primary-project-color) !important;
  filter: brightness(0.9);
}

/* Override MDB tabs color #BF2B2B */
.md-tabs .nav-link.active,
.md-tabs .nav-item.open .nav-link {
  background-color: var(--primary-project-color-dark) !important;
}

/* Override hardcoded #ff3333 colors with CSS variables */
.ai-loader-error-text {
  color: var(--secondary-project-color) !important;
}

.ai-loader-graph .error-indicator {
  background-color: var(--secondary-project-color) !important;
}

.ai-loader-node.error {
  color: var(--secondary-project-color) !important;
}

.ai-assistant .error-highlight {
  background-color: var(--secondary-project-color) !important;
}

.ai-assistant .error-text {
  color: var(--secondary-project-color) !important;
}

.ai-assistant .critical-error {
  color: var(--secondary-project-color) !important;
}

.ai-assistant .critical-error-bg {
  background-color: var(--secondary-project-color) !important;
}

h1.header-style {
  color: var(--primary-project-color);
  margin-bottom: 1rem;
}

.icon-superscript {
  vertical-align: super;
  font-size: 0.6em; /* Adjust as needed */
  /* You might need to add a little left margin if it's too close */
  /* margin-left: 2px; */
}

/* Existing CSS with color variables */
.double-nav .breadcrumb-dn {
  color: var(--color-white);
}

.side-nav.wide.slim .sn-ad-avatar-wrapper a span {
  display: none;
}

.link-cursor {
  cursor: pointer;
}

.mdb-autocomplete-wrap {
  translate: 0px -2.5rem;
}

/* (A) FULL SCREEN WRAPPER */
#div_general_loader {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  width: 100vw;
  height: 100vh;
  background: var(--color-black-overlay);
  transition: opacity 0.2s;
}

/* (B) CENTER LOADING SPINNER */
#div_general_loader img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 35px;
  height: auto;
  transform: translate(-50%, +40%);
}

/* (B) CENTER LOADING SPINNER */
#div_general_loader center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%);
}

/* (C) SHOW & HIDE */
#div_general_loader {
  visibility: hidden;
  opacity: 0;
}

#div_general_loader.show {
  visibility: visible;
  opacity: 1;
}

.table-border-double {
  border-left: double 4px var(--color-dee2e6);
  border-right: double 4px var(--color-dee2e6);
}

.table-border-double-top {
  border-top: double 4px var(--color-dee2e6);
}

.feedback-num {
  position: relative;
  right: 0rem;
  bottom: 0.5rem;
  height: 1rem;
  width: 1rem;
  color: var(--color-white);
  background-color: var(--color-red);
  border-radius: 50%;
  padding: 0 0.4rem;
}

span:has(.js-clear-field) {
  margin-bottom: 2.5rem;
  padding: .6rem 0 0.4rem 0;
}

.counter-num {
  position: relative;
  right: 0.0rem;
  bottom: 0.5rem;
  height: 1rem;
  width: 1rem;
  background-color: var(--color-transparent);
  border-radius: 50%;
  padding: 0 0.4rem;
  font-family: "Helvetica Neue","Segoe UI",helvetica,verdana,sans-serif;
  font-weight: 900;
}

.select-label {
  color: var(--color-gray);
  font-weight: 300;
  padding-right: 0.5rem;
  background-color: var(--color-white);
}

#logout-form {
  width: auto;
}

.tabs-individual-color {
  background-color: var(--primary-project-color) !important
}

.tabs-red {
  background-color: var(--primary-project-color) !important
}

.individual-color-text {
  color: var(--primary-project-color) !important
}

.individual-color-icon {
  color: var(--color-individual-icon) !important
}

/* Override Font Awesome paper-plane icon color */
.fa-paper-plane {
  color: var(--secondary-project-color) !important;
}

/* Override Bootstrap danger classes with project colors */
.alert-danger {
  background-color: rgba(13, 89, 56, 0.1) !important;
  border-color: var(--secondary-project-color) !important;
  color: var(--secondary-project-color) !important;
}

.badge-danger {
  background-color: var(--secondary-project-color) !important;
  color: var(--text-color-white) !important;
}

.btn-danger {
  background-color: var(--secondary-project-color) !important;
  border-color: var(--secondary-project-color) !important;
  color: var(--text-color-white) !important;
}

.btn-danger:hover {
  background-color: var(--primary-project-color-dark) !important;
  border-color: var(--primary-project-color-dark) !important;
}

.text-danger {
  color: var(--secondary-project-color) !important;
}