/* SCSA Brand Colors
   Bright Red  RGB(231, 52, 76)  — primary accent
   Dark Blue   RGB(52, 47, 62)   — nav, headings, text
   Light Blue  RGB(73, 190, 216) — secondary / info
*/

:root {
  --primary-rgb: 231, 52, 76;
  --info-rgb: 73, 190, 216;
  --secondary-rgb: 73, 190, 216;
}

[data-theme-mode=light] {
  --default-text-color: #342f3e;
  --menu-prime-color: #342f3e;
  --header-prime-color: #4a4556;
  --text-muted: #6b6578;
  --gray-7: #4a4556;
  --gray-8: #342f3e;
  --gray-9: #2a2633;
}

[data-theme-mode=dark] {
  --body-bg-rgb: 28, 25, 34;
  --body-bg-rgb2: 20, 18, 26;
  --custom-white: #2c2836;
  --default-background: #16141c;
  --default-body-bg-color: #16141c;
  --menu-bg: #241f2c;
  --header-bg: #241f2c;
  --default-text-color: #f4f2f7;
  --text-muted: #c2bccc;
  --menu-prime-color: rgba(255, 255, 255, 0.82);
  --header-prime-color: rgba(255, 255, 255, 0.9);
  --default-border: rgba(255, 255, 255, 0.14);
  --input-border: rgba(255, 255, 255, 0.24);
  --form-control-bg: #3a3446;
  --menu-border-color: rgba(255, 255, 255, 0.1);
  --header-border-color: rgba(255, 255, 255, 0.1);
  --gray-7: #d2ccd9;
  --gray-8: #e7e3ed;
  --gray-9: #f7f5f9;
}

/* Dark blue navigation (default menu style) */
[data-menu-styles=dark][data-theme-mode=light] {
  --menu-bg: #342f3e;
  --menu-prime-color: rgba(255, 255, 255, 0.55);
  --menu-border-color: rgba(255, 255, 255, 0.08);
}

[data-menu-styles=light][data-theme-mode=light] {
  --menu-prime-color: #342f3e;
}

/* Headings use dark blue */
h1, h2, h3, h4, h5, h6,
.page-title,
.card-title {
  color: #342f3e;
}

[data-theme-mode=dark] h1,
[data-theme-mode=dark] h2,
[data-theme-mode=dark] h3,
[data-theme-mode=dark] h4,
[data-theme-mode=dark] h5,
[data-theme-mode=dark] h6,
[data-theme-mode=dark] .page-title,
[data-theme-mode=dark] .card-title {
  color: rgba(255, 255, 255, 0.85);
}

/* Brand red as first Theme Primary swatch */
.theme-colors .switch-select .color-input.color-primary-1 {
  background-color: rgb(231, 52, 76);
}

/* Light blue for info / secondary accents */
.theme-colors .switch-select .color-input.color-primary-2 {
  background-color: rgb(73, 190, 216);
}

.theme-colors .switch-select .color-input.color-primary-3 {
  background-color: rgb(0, 149, 140);
}

.theme-colors .switch-select .color-input.color-primary-4 {
  background-color: rgb(138, 59, 203);
}

.theme-colors .switch-select .color-input.color-primary-5 {
  background-color: rgb(97, 110, 7);
}

/* Auth pages — sidebar dark blue background */
.authentication-background {
  background-color: #342f3e;
}

.authentication .desktop-logo,
.authentication .desktop-dark {
  height: 3.5rem;
  line-height: 3.5rem;
}

.auth-icon svg {
  fill: rgb(var(--primary-rgb));
}

.authentication .h4,
.authentication .card-title {
  color: var(--default-text-color);
}

/* Employee / Tab Style-4 headers — stronger, easier to read */
.tab-style-4.nav-tabs .nav-link {
  font-weight: 700;
  font-size: 0.92rem;
  color: #342f3e;
  letter-spacing: 0.01em;
}

.tab-style-4.nav-tabs .nav-link i {
  font-weight: normal;
}

.tab-style-4.nav-tabs .nav-link:hover {
  color: rgb(231, 52, 76);
}

.tab-style-4.nav-tabs .nav-link.active {
  font-weight: 700;
  color: rgb(231, 52, 76);
}

.tab-style-4.nav-tabs .nav-link.disabled {
  color: #9a95a3;
  font-weight: 600;
}

[data-theme-mode=dark] .tab-style-4.nav-tabs .nav-link {
  color: #eeeaf3;
}

[data-theme-mode=dark] .tab-style-4.nav-tabs .nav-link:hover,
[data-theme-mode=dark] .tab-style-4.nav-tabs .nav-link.active {
  color: rgb(231, 52, 76);
}

[data-theme-mode=dark] .tab-style-4.nav-tabs .nav-link.disabled {
  color: #c4becc;
}

[data-theme-mode=dark] body,
[data-theme-mode=dark] .page {
  background-color: #16141c;
  color: #f4f2f7;
}

[data-theme-mode=dark] .card.custom-card {
  background-color: #2c2836;
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #f4f2f7;
}

[data-theme-mode=dark] .form-label,
[data-theme-mode=dark] .col-form-label {
  color: #f7f5fa;
}

[data-theme-mode=dark] .text-muted,
[data-theme-mode=dark] .form-text,
[data-theme-mode=dark] .card .form-text,
[data-theme-mode=dark] .custom-card small {
  color: #c2bccc;
}

[data-theme-mode=dark] .form-control,
[data-theme-mode=dark] .form-select,
[data-theme-mode=dark] textarea {
  background-color: #3a3446;
  color: #f7f5fa;
  border-color: rgba(255, 255, 255, 0.24);
}

[data-theme-mode=dark] .form-control::placeholder {
  color: #b7b1c2;
}

[data-theme-mode=dark] .form-control:focus,
[data-theme-mode=dark] .form-select:focus,
[data-theme-mode=dark] textarea:focus {
  background-color: #433d50;
  color: #fff;
  border-color: rgb(231, 52, 76);
  box-shadow: 0 0 0 0.15rem rgba(231, 52, 76, 0.25);
}

[data-theme-mode=dark] .form-select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23f4f2f7' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
}

[data-theme-mode=dark] .input-group-text {
  background-color: #342f3e;
  color: #f4f2f7;
  border-color: rgba(255, 255, 255, 0.24);
}

[data-theme-mode=dark] input[type=file] {
  color: #f4f2f7;
}

[data-theme-mode=dark] input[type=file]::file-selector-button {
  background-color: #fff;
  color: #342f3e;
  border: 0;
}

[data-theme-mode=dark] .select2-container--default .select2-selection--single,
[data-theme-mode=dark] .select2-container--default .select2-selection--multiple {
  background-color: #3a3446;
  border-color: rgba(255, 255, 255, 0.24);
}

[data-theme-mode=dark] .select2-container--default .select2-selection--single .select2-selection__rendered,
[data-theme-mode=dark] .select2-container--default .select2-selection--multiple .select2-selection__rendered {
  color: #f7f5fa;
}

[data-theme-mode=dark] .select2-dropdown {
  background-color: #2c2836;
  border-color: rgba(255, 255, 255, 0.16);
  color: #f7f5fa;
}

[data-theme-mode=dark] .select2-container--default .select2-results__option {
  color: #f7f5fa;
}

[data-theme-mode=dark] .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
  background-color: rgb(231, 52, 76);
  color: #fff;
}

[data-theme-mode=dark] .select2-container--default .select2-search--dropdown .select2-search__field {
  background-color: #3a3446;
  color: #f7f5fa;
  border-color: rgba(255, 255, 255, 0.24);
}

[data-theme-mode=dark] .table {
  --bs-table-color: #f4f2f7;
  --bs-table-bg: transparent;
  --bs-table-border-color: rgba(255, 255, 255, 0.12);
  --bs-table-striped-color: #f4f2f7;
  --bs-table-hover-color: #fff;
  color: #f4f2f7;
}

[data-theme-mode=dark] .table thead th {
  color: #fff;
}

[data-theme-mode=dark] .dataTables_wrapper,
[data-theme-mode=dark] .dataTables_info,
[data-theme-mode=dark] .dataTables_filter label,
[data-theme-mode=dark] .dataTables_length label {
  color: #eeeaf3;
}

[data-theme-mode=dark] .app-sidebar .side-menu__label,
[data-theme-mode=dark] .app-sidebar .side-menu__icon,
[data-theme-mode=dark] .slide__category .category-name {
  color: rgba(255, 255, 255, 0.86);
}

[data-theme-mode=dark] .app-header {
  background-color: #241f2c;
}

[data-theme-mode=dark] .alert-info {
  background-color: rgba(73, 190, 216, 0.16);
  color: #e7f8fc;
  border-color: rgba(73, 190, 216, 0.4);
}

/* Dashboard — equal card heights and tighter spacing */
.dashboard-equal-row {
  --bs-gutter-x: 0.75rem;
  --bs-gutter-y: 0.5rem;
}

.dashboard-equal-row > [class*="col-"] {
  display: flex;
  padding-block-end: 0.5rem;
}

.dashboard-equal-row .card.custom-card {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  margin-block-end: 0;
}

.dashboard-equal-row .card.custom-card .card-body {
  flex: 1 1 auto;
}

.dashboard-scroll-body {
  min-height: 0;
  overflow: auto;
}

.dashboard-chart-row {
  min-height: 32.5rem;
}

.dashboard-chart-row > [class*="col-"] > .card {
  min-height: 32.5rem;
}

.dashboard-table-row > [class*="col-"] > .card {
  min-height: 24.5rem;
}

.table-responsive:has(.dropdown.show),
.dataTables_wrapper:has(.dropdown.show) {
  overflow: visible;
}

table.dataTable tbody tr:has(.dropdown.show) {
  position: relative;
  z-index: 4;
}

.table-responsive .dropdown-menu,
.dataTables_wrapper .dropdown-menu {
  z-index: 1080;
}

.dashboard-chart-row .leads-source-chart {
  flex: 1 1 auto;
}