/* SDRB Corporate Identity Color Theme */
/* Based on SDRB Color Palette - Updated Color Scheme */
/* 
 * Primary Color: Dusty Blue (#4189dd) - Main brand color
 * Secondary Color: Light Blue (#97cbff) - Accent and highlights  
 * Accent Colors: Dark Blue (#095593), Navy Blue (#073656) - Supporting colors
 * 
 * Color Usage:
 * - Dusty Blue: Primary buttons, links, active states, main branding
 * - Light Blue: Secondary elements, hover states, backgrounds
 * - Dark Blue: Borders, text emphasis, tertiary elements
 * - Navy Blue: Dark mode elements, deep accents (optional)
 */

:root {
  /* Primary Colors - Dusty Blue */
  --primary-50: #e8f2fb;
  --primary-100: #d1e5f7;
  --primary-200: #b3d6f2;
  --primary-300: #97cbff;
  --primary-400: #6aaef0;
  --primary-500: #4189dd;
  --primary-600: #4189dd;  /* Main Dusty Blue */
  --primary-700: #3470b8;
  --primary-800: #285793;
  --primary-900: #1c3e6e;

  /* Secondary Colors - Light Blue & Dark Blue */
  --secondary-400: #97cbff;  /* Light Blue */
  --secondary-500: #4189dd;  /* Dusty Blue */
  --secondary-600: #095593;  /* Dark Blue */
  --secondary-700: #074a7e;
  --secondary-800: #063f69;
  --secondary-900: #4189dd;  /* Navy Blue - darkest */

  /* Accent Colors - Light Blue Focus */
  --accent-light: #97cbff;
  --accent-medium: #4189dd;
  --accent-dark: #095593;

  /* Brand Colors - Updated */
  --brand: #4189dd;           /* Primary: Dusty Blue */
  --brand-secondary: #97cbff; /* Secondary: Light Blue */
  --brand-accent: #095593;    /* Accent: Dark Blue */
  --brand-dark: #4189dd;      /* Dark: Navy Blue */

  /* Update the main primary color */
  --primary: var(--primary-600);
}

/* Primary Background Colors */
.bg-primary-600,
.btn-primary-600 {
  background-color: #4189dd !important;  /* Dusty Blue */
}

.bg-primary-700 {
  background-color: #3470b8 !important;
}

.bg-primary-500 {
  background-color: #4189dd !important;  /* Dusty Blue */
}

.bg-primary-400 {
  background-color: #6aaef0 !important;
}

.bg-primary-300 {
  background-color: #97cbff !important;  /* Light Blue */
}

.bg-primary-200 {
  background-color: #b3d6f2 !important;
}

.bg-primary-100 {
  background-color: #d1e5f7 !important;
}

.bg-primary-50 {
  background-color: #e8f2fb !important;
}

/* Primary Text Colors */
.text-primary-600,
.text-primary {
  color: #4189dd !important;  /* Dusty Blue */
}

.text-primary-light {
  color: #4189dd !important;  /* Dusty Blue */
}

.text-primary-500 {
  color: #4189dd !important;  /* Dusty Blue */
}

.text-primary-400 {
  color: #6aaef0 !important;
}

/* Primary Border Colors */
.border-primary-600,
.border-primary {
  border-color: #4189dd !important;  /* Dusty Blue */
}

.border-primary-main {
  border-color: #4189dd !important;  /* Dusty Blue */
}

/* Button Primary */
.btn-primary,
.btn-primary-600 {
  background-color: #4189dd !important;  /* Dusty Blue */
  border-color: #4189dd !important;
  color: #fff !important;
}

.btn-primary:hover,
.btn-primary-600:hover {
  background-color: #3470b8 !important;  /* Darker Dusty Blue */
  border-color: #3470b8 !important;
  color: #fff !important;
}

.btn-primary:active,
.btn-primary:focus,
.btn-primary-600:active,
.btn-primary-600:focus {
  background-color: #285793 !important;  /* Even Darker */
  border-color: #285793 !important;
  color: #fff !important;
}

/* Button Outline Primary */
.btn-outline-primary,
.btn-outline-primary-600 {
  background-color: transparent !important;
  color: #4189dd !important;  /* Dusty Blue */
  border-color: #4189dd !important;
}

.btn-outline-primary:hover,
.btn-outline-primary-600:hover {
  background-color: #4189dd !important;  /* Dusty Blue */
  color: #fff !important;
  border-color: #4189dd !important;
}

/* Links and Hover Effects */
.hover-text-primary:hover,
.btn.hover-text-primary:hover {
  color: #4189dd !important;
}

.bg-hover-primary-600:hover {
  background-color: #4189dd !important;
}

.text-hover-primary-600:hover {
  color: #4189dd !important;
}

/* Form Controls */
.form-control:focus,
.form-control:active,
textarea:focus,
textarea:active,
.form-select:focus {
  border-color: #4189dd !important;
}

/* Checkboxes and Radio Buttons */
.form-check.style-check .form-check-input:checked,
.form-check .form-check-input:checked[type="radio"] {
  border-color: #4189dd !important;
}

.form-check .form-check-input:checked::before {
  background-color: #4189dd !important;
}

.checked-primary .form-check-input:checked[type="radio"] {
  border-color: #4189dd !important;
}

.checked-primary .form-check-input:checked::before {
  background-color: #4189dd !important;
}

.checked-primary .form-check-input:checked ~ label {
  color: #4189dd !important;
}

/* Switches */
.form-switch .form-check-input:checked,
.switch-primary .form-check-input:checked {
  background-color: #4189dd !important;
}

.switch-primary .form-check-input:checked ~ .form-check-label {
  color: #4189dd !important;
}

/* Badges */
.badge.bg-primary-600 {
  background-color: #4189dd !important;
}

.badge.text-primary-600 {
  color: #4189dd !important;
}

/* Progress Bars */
.progress-bar {
  background-color: #4189dd !important;
}

/* Pagination */
div.dt-container .dt-paging .dt-paging-button:hover,
div.dt-container .dt-paging .dt-paging-button.current {
  background: #4189dd !important;
  color: #fff !important;
}

.pagination .page-link.active,
.pagination .page-item.active .page-link {
  background-color: #4189dd !important;
  border-color: #4189dd !important;
}

/* Left Line Accent */
.left-line::before {
  background-color: #4189dd !important;
  box-shadow: 2px 1px 7px 0px rgba(7, 54, 86, 0.6) !important;
}

.line-bg-primary::before {
  background-color: #4189dd !important;
  box-shadow: 2px 1px 7px 0px rgba(7, 54, 86, 0.6) !important;
}

/* Accordion */
.accordion .accordion-button:not(.collapsed)::after {
  color: #4189dd !important;
}

.accordion .accordion-button[aria-expanded="true"]::after,
.accordion .accordion-button[aria-expanded="false"]::after {
  border: 2px solid #4189dd !important;
}

/* Nav Tabs */
.nav-tabs .nav-link.active,
.nav-tabs .nav-link:hover {
  color: #4189dd !important;
  border-bottom-color: #4189dd !important;
}

/* Sidebar Active State */
.sidebar-menu li a.active-page,
.sidebar-menu li a:hover {
  color: #4189dd !important;
}

.sidebar-menu .active-page::before {
  background-color: #4189dd !important;
}

/* Group Hover Effects */
.group-item:hover .group-hover\:bg-primary-600 {
  background-color: #4189dd !important;
}

.group-item:hover .group-hover\:text-primary-600 {
  color: #4189dd !important;
}

/* Table Borders */
.border-primary-table {
  border: 1px solid #4189dd !important;
}

.border-primary-table thead tr th {
  border-bottom: 1px solid #4189dd !important;
  border-inline-end: 1px solid #4189dd !important;
}

.border-primary-table tbody tr td {
  border-bottom: 1px solid #4189dd !important;
  border-inline-end: 1px solid #4189dd !important;
}

/* Gradient Backgrounds */
.gradient-deep-1 {
  background: linear-gradient(135deg, #e6eef3 0%, #bfd9e6 100%) !important;
}

.gradient-deep-2 {
  background: linear-gradient(135deg, #d9e7f5 0%, #b3d0e8 100%) !important;
}

/* Focus States */
.bg-primary-focus {
  background-color: rgba(7, 54, 86, 0.1) !important;
}

/* Border Hover */
.br-hover-primary:hover {
  border-color: #4189dd !important;
}

/* Custom SDRB Specific Classes */
/* Primary Color: Dusty Blue #4189dd */
/* Secondary Color: Light Blue #97cbff */
/* Accent Colors: Dark Blue #095593, Navy Blue #073656 */

.bg-sdrb-dusty-blue {
  background-color: #4189dd !important;  /* Primary */
}

.bg-sdrb-light-blue {
  background-color: #97cbff !important;  /* Secondary */
}

.bg-sdrb-dark-blue {
  background-color: #095593 !important;  /* Accent */
}

.bg-sdrb-navy {
  background-color: #073656 !important;  /* Dark Accent */
}

.text-sdrb-dusty-blue {
  color: #4189dd !important;  /* Primary */
}

.text-sdrb-light-blue {
  color: #97cbff !important;  /* Secondary */
}

.text-sdrb-dark-blue {
  color: #095593 !important;  /* Accent */
}

.text-sdrb-navy {
  color: #073656 !important;  /* Dark Accent */
}

.border-sdrb-dusty-blue {
  border-color: #4189dd !important;  /* Primary */
}

.border-sdrb-light-blue {
  border-color: #97cbff !important;  /* Secondary */
}

.border-sdrb-dark-blue {
  border-color: #095593 !important;  /* Accent */
}

.border-sdrb-navy {
  border-color: #073656 !important;  /* Dark Accent */
}

/* Sidebar Logo Background */
.sidebar-logo {
  background-color: white !important;
}

/* Active Menu Item */
.sidebar-menu li.active-page {
  background-color: rgba(7, 54, 86, 0.1) !important;
}

/* Card Headers with Primary Background */
.card-header.bg-primary {
  background-color: #4189dd !important;
}

/* Alert Primary */
.alert-primary {
  background-color: rgba(7, 54, 86, 0.1) !important;
  border-color: #4189dd !important;
  color: #4189dd !important;
}

/* Dropdown Active Item */
.dropdown-item.active,
.dropdown-item:active {
  background-color: #4189dd !important;
}

/* Custom SDRB Badge Styles */
.badge-sdrb-primary {
  background-color: #4189dd !important;  /* Dusty Blue */
  color: #fff !important;
}

.badge-sdrb-secondary {
  background-color: #97cbff !important;  /* Light Blue */
  color: #fff !important;
}

.badge-sdrb-accent {
  background-color: #095593 !important;  /* Dark Blue */
  color: #fff !important;
}

/* SDRB Specific Component Styles */
.sdrb-card-accent {
  border-left: 4px solid #4189dd !important;
}

.sdrb-divider {
  border-color: #4189dd !important;
}

/* Chart Colors (for ApexCharts) */
.apexcharts-theme-light {
  --apexcharts-color-1: #4189dd;  /* Dusty Blue - Primary */
  --apexcharts-color-2: #97cbff;  /* Light Blue - Secondary */
  --apexcharts-color-3: #095593;  /* Dark Blue - Accent */
  --apexcharts-color-4: #073656;  /* Navy Blue - Dark */
}

/* Loading Spinner */
.spinner-border-primary {
  border-color: #4189dd !important;
  border-right-color: transparent !important;
}

/* Navbar Brand/Logo Area */
.navbar-header {
  border-bottom-color: rgba(7, 54, 86, 0.1) !important;
}

/* Footer */
.d-footer {
  border-top-color: rgba(7, 54, 86, 0.1) !important;
}

/* Custom Shadow with SDRB Navy */
.shadow-sdrb {
  box-shadow: 0 4px 12px rgba(7, 54, 86, 0.15) !important;
}

.shadow-sdrb-sm {
  box-shadow: 0 2px 6px rgba(7, 54, 86, 0.1) !important;
}

.shadow-sdrb-lg {
  box-shadow: 0 8px 24px rgba(7, 54, 86, 0.2) !important;
}