/* ============================================
   BRIDGES CLEANING BRAND SYSTEM
   A modern 2025 UI/UX color overlay
   ============================================ */

/* ============================================
   1. CSS CUSTOM PROPERTIES (Brand Tokens)
   ============================================ */
:root {
  /* Primary Navy - Headers, Backgrounds, Primary Actions */
  --bridges-navy: #1a183c;
  --bridges-navy-medium: #4c445e;
  --bridges-navy-light: #6b6580;
  --bridges-navy-hover: #2d2a4d;

  /* Dusty Rose - Brand Accent, Highlights */
  --bridges-rose: #b28ea4;
  --bridges-rose-text: #8d6a7e;
  --bridges-rose-dark: #6e5261;
  --bridges-rose-light: #c9a9bb;
  --bridges-rose-pale: #e8d8e0;

  /* Lavender - Secondary Accent */
  --bridges-lavender: #a79eb9;
  --bridges-lavender-light: #c4bdd4;

  /* Background Colors */
  --bridges-bg-warm: #dfddd9;
  --bridges-bg-cool: #ebeae9;
  --bridges-bg-page: #e2e5f1;  /* Main page/body background */
  --bridges-bg-white: #ffffff;
  --bridges-bg-card: #f8f9fa;

  /* Text Colors */
  --bridges-text-primary: #1a183c;
  --bridges-text-body: #4c445e;
  --bridges-text-muted: #6b6580;
  --bridges-text-light: #80808F;

  /* Semantic Colors (keeping some for clarity) */
  --bridges-success: #28a745;
  --bridges-success-light: #d4edda;
  --bridges-warning: #ffc107;
  --bridges-warning-light: #fff3cd;
  --bridges-danger: #dc3545;
  --bridges-danger-light: #f8d7da;
  --bridges-info: #17a2b8;
  --bridges-info-light: #d1ecf1;

  /* Gradients */
  --bridges-gradient-primary: linear-gradient(135deg, #1a183c 0%, #4c445e 100%);
  --bridges-gradient-accent: linear-gradient(135deg, #b28ea4 0%, #c9a9bb 100%);
  --bridges-gradient-warm: linear-gradient(135deg, #dfddd9 0%, #ebeae9 100%);

  /* Shadows */
  --bridges-shadow-sm: 0 2px 4px rgba(26, 24, 60, 0.08);
  --bridges-shadow-md: 0 4px 12px rgba(26, 24, 60, 0.12);
  --bridges-shadow-lg: 0 8px 24px rgba(26, 24, 60, 0.16);
  --bridges-shadow-xl: 0 12px 36px rgba(26, 24, 60, 0.2);

  /* Transitions */
  --bridges-transition: all 0.2s ease;
  --bridges-transition-slow: all 0.3s ease;

  /* Border Radius */
  --bridges-radius-sm: 4px;
  --bridges-radius-md: 8px;
  --bridges-radius-lg: 12px;
  --bridges-radius-xl: 16px;
}

/* ============================================
   2. OVERRIDE METRONIC THEME COLORS
   ============================================ */

/* Override Metronic's KTAppSettings via CSS where possible */
/* This targets Metronic's generated classes */

/* Primary color overrides - Navy instead of Blue */
.btn-primary {
  background-color: var(--bridges-navy) !important;
  border-color: var(--bridges-navy) !important;
  color: #ffffff !important;
  transition: var(--bridges-transition);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active {
  background-color: var(--bridges-navy-hover) !important;
  border-color: var(--bridges-navy-hover) !important;
  box-shadow: var(--bridges-shadow-md) !important;
}

.btn-primary:focus {
  box-shadow: 0 0 0 0.2rem rgba(26, 24, 60, 0.35) !important;
}

.btn-outline-primary {
  color: var(--bridges-navy) !important;
  border-color: var(--bridges-navy) !important;
  background-color: transparent !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
  background-color: var(--bridges-navy) !important;
  border-color: var(--bridges-navy) !important;
  color: #ffffff !important;
}

/* Light primary button */
.btn-light-primary {
  background-color: rgba(26, 24, 60, 0.1) !important;
  color: var(--bridges-navy) !important;
  border: none !important;
}

.btn-light-primary:hover {
  background-color: var(--bridges-navy) !important;
  color: #ffffff !important;
}

/* Text primary color */
.text-primary {
  color: var(--bridges-navy) !important;
}

a.text-primary:hover,
a.text-primary:focus {
  color: var(--bridges-navy-medium) !important;
}

/* Background primary */
.bg-primary {
  background-color: var(--bridges-navy) !important;
}

/* Border primary */
.border-primary {
  border-color: var(--bridges-navy) !important;
}

/* Badge primary */
.badge-primary,
.badge.bg-primary {
  background-color: var(--bridges-navy) !important;
  color: #ffffff !important;
}

/* ============================================
   3. SECONDARY ACCENT BUTTON (Rose)
   ============================================ */

.btn-accent {
  background-color: var(--bridges-rose) !important;
  border-color: var(--bridges-rose) !important;
  color: #ffffff !important;
  transition: var(--bridges-transition);
}

.btn-accent:hover,
.btn-accent:focus {
  background-color: var(--bridges-rose-dark) !important;
  border-color: var(--bridges-rose-dark) !important;
}

.btn-outline-accent {
  color: var(--bridges-rose) !important;
  border-color: var(--bridges-rose) !important;
  background-color: transparent !important;
}

.btn-outline-accent:hover {
  background-color: var(--bridges-rose) !important;
  color: #ffffff !important;
}

/* ============================================
   4. INFO COLOR OVERRIDE (Lavender instead of Purple)
   ============================================ */

.btn-info {
  background-color: var(--bridges-lavender) !important;
  border-color: var(--bridges-lavender) !important;
  color: #ffffff !important;
}

.btn-info:hover {
  background-color: #9690ad !important;
  border-color: #9690ad !important;
}

.btn-outline-info {
  color: var(--bridges-lavender) !important;
  border-color: var(--bridges-lavender) !important;
}

.btn-outline-info:hover {
  background-color: var(--bridges-lavender) !important;
  color: #ffffff !important;
}

.bg-info {
  background-color: var(--bridges-lavender) !important;
}

.text-info {
  color: var(--bridges-lavender) !important;
}

.badge-info,
.badge.bg-info {
  background-color: var(--bridges-lavender) !important;
}

/* ============================================
   5. REPLACE PINK WITH ROSE
   ============================================ */

/* Pink classes now map to Rose */
.btn-pink {
  background-color: var(--bridges-rose) !important;
  border-color: var(--bridges-rose) !important;
  color: #ffffff !important;
}

.btn-pink:hover {
  background-color: var(--bridges-rose-dark) !important;
  border-color: var(--bridges-rose-dark) !important;
}

.btn-outline-pink {
  color: var(--bridges-rose) !important;
  border-color: var(--bridges-rose) !important;
  background-color: transparent !important;
}

.btn-outline-pink:hover {
  background-color: var(--bridges-rose) !important;
  color: #ffffff !important;
}

.bg-pink {
  background-color: var(--bridges-rose) !important;
}

.text-pink {
  color: var(--bridges-rose) !important;
}

.border-pink {
  border-color: var(--bridges-rose) !important;
}

.badge-pink {
  background-color: var(--bridges-rose) !important;
  color: #ffffff !important;
}

.alert-pink {
  background-color: var(--bridges-rose-pale) !important;
  border-color: var(--bridges-rose-light) !important;
  color: var(--bridges-rose-dark) !important;
}

/* ============================================
   6. NAVIGATION & HEADER STYLING
   ============================================ */

/* Header - no background override, let default show */

/* Active tab indicator */
.nav-tabs .nav-link.active {
  border-bottom-color: var(--bridges-rose) !important;
  color: var(--bridges-navy) !important;
}

.nav-pills .nav-link.active {
  background-color: var(--bridges-navy) !important;
  color: #ffffff !important;
}

/* Sidebar/Aside */
.aside,
.kt-aside,
#kt_aside {
  background-color: var(--bridges-navy) !important;
}

.aside-menu .menu-link:hover,
.aside-menu .menu-link.active {
  background-color: rgba(178, 142, 164, 0.15) !important;
}

.aside-menu .menu-link.active {
  border-left: 3px solid var(--bridges-rose) !important;
}

/* ============================================
   7. FORM ELEMENTS
   ============================================ */

/* Input focus states */
.form-control:focus,
.form-select:focus {
  border-color: var(--bridges-rose) !important;
  box-shadow: 0 0 0 0.2rem rgba(178, 142, 164, 0.25) !important;
}

/* Checkbox and radio when checked */
.form-check-input:checked {
  background-color: var(--bridges-navy) !important;
  border-color: var(--bridges-navy) !important;
}

.form-check-input:focus {
  border-color: var(--bridges-rose) !important;
  box-shadow: 0 0 0 0.2rem rgba(178, 142, 164, 0.25) !important;
}

/* Custom switches */
.form-switch .form-check-input:checked {
  background-color: var(--bridges-navy) !important;
}

/* Select2 and other dropdowns */
.select2-container--bootstrap-5 .select2-selection--single:focus,
.select2-container--bootstrap-5 .select2-selection--multiple:focus {
  border-color: var(--bridges-rose) !important;
  box-shadow: 0 0 0 0.2rem rgba(178, 142, 164, 0.25) !important;
}

.select2-container--bootstrap-5 .select2-dropdown .select2-results__option--selected {
  background-color: var(--bridges-navy) !important;
}

/* ============================================
   8. DROPDOWN MENUS
   ============================================ */

.dropdown-item.active,
.dropdown-item:active {
  background-color: var(--bridges-navy) !important;
  color: #ffffff !important;
}

.dropdown-item:hover,
.dropdown-item:focus {
  background-color: var(--bridges-bg-cool) !important;
  color: var(--bridges-navy) !important;
}

/* ============================================
   9. CARDS & CONTAINERS
   ============================================ */

.card {
  border: none;
  box-shadow: var(--bridges-shadow-sm);
  border-radius: var(--bridges-radius-lg);
  transition: var(--bridges-transition);
}

.card:hover {
  box-shadow: var(--bridges-shadow-md);
}

.card-header {
  background-color: var(--bridges-bg-card);
  border-bottom: 1px solid var(--bridges-bg-cool);
  font-weight: 600;
  color: var(--bridges-navy);
}

/* Accent card headers */
.card-header.bg-primary {
  background: var(--bridges-gradient-primary) !important;
  color: #ffffff !important;
}

/* ============================================
   10. LINKS
   ============================================ */

a {
  color: var(--bridges-navy);
  transition: var(--bridges-transition);
}

a:hover {
  color: var(--bridges-rose-text);
}

/* User links in tables/lists */
.user-link:hover {
  color: var(--bridges-rose) !important;
  border-bottom-color: var(--bridges-rose) !important;
}

/* User avatar */
.user-avatar-circle {
  background: var(--bridges-gradient-primary) !important;
}

/* ============================================
   11. BREADCRUMBS
   ============================================ */

.breadcrumb-item a {
  color: var(--bridges-navy) !important;
}

.breadcrumb-item a:hover {
  color: var(--bridges-rose) !important;
}

.breadcrumb-item.active {
  color: var(--bridges-text-muted) !important;
}

.breadcrumb-custom .breadcrumb-item a {
  color: var(--bridges-navy) !important;
}

/* ============================================
   12. TABLES
   ============================================ */

.table thead th {
  background-color: var(--bridges-navy) !important;
  color: #ffffff !important;
  font-weight: 600;
  border: none !important;
}

.table-hover tbody tr:hover {
  background-color: rgba(178, 142, 164, 0.08) !important;
}

.table-striped tbody tr:nth-of-type(odd) {
  background-color: var(--bridges-bg-cool) !important;
}

/* DataTables styling */
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
  background: var(--bridges-navy) !important;
  border-color: var(--bridges-navy) !important;
  color: #ffffff !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: var(--bridges-rose-pale) !important;
  border-color: var(--bridges-rose) !important;
  color: var(--bridges-navy) !important;
}

/* ============================================
   13. PAGINATION
   ============================================ */

.page-item.active .page-link {
  background-color: var(--bridges-navy) !important;
  border-color: var(--bridges-navy) !important;
}

.page-link {
  color: var(--bridges-navy) !important;
}

.page-link:hover {
  color: var(--bridges-rose) !important;
  background-color: var(--bridges-bg-cool) !important;
}

/* ============================================
   14. MODALS
   ============================================ */

.modal-header {
  background-color: var(--bridges-navy);
  color: #ffffff;
  border-bottom: none;
}

.modal-header .btn-close {
  filter: invert(1);
}

.modal-title {
  color: #ffffff;
  font-weight: 600;
}

/* ============================================
   15. PROGRESS BARS
   ============================================ */

.progress-bar {
  background-color: var(--bridges-navy) !important;
}

.progress-bar.bg-primary {
  background: var(--bridges-gradient-primary) !important;
}

.progress-bar.bg-info {
  background-color: var(--bridges-lavender) !important;
}

/* ============================================
   16. SPINNERS & LOADING STATES
   ============================================ */

.spinner-border {
  color: var(--bridges-navy) !important;
}

.spinner-border.text-primary {
  color: var(--bridges-navy) !important;
}

.loading-spinner {
  border-top-color: var(--bridges-navy) !important;
}

/* ============================================
   17. TOOLTIP & POPOVER
   ============================================ */

.tooltip-inner {
  background-color: var(--bridges-navy) !important;
}

.bs-tooltip-top .tooltip-arrow::before,
.bs-tooltip-auto[data-popper-placement^="top"] .tooltip-arrow::before {
  border-top-color: var(--bridges-navy) !important;
}

.popover-header {
  background-color: var(--bridges-navy) !important;
  color: #ffffff !important;
}

/* ============================================
   18. LOGIN PAGE SPECIFIC
   ============================================ */

/* Login background - override pink */
body.login-page,
.login-wrapper {
  background-color: var(--bridges-navy) !important;
  background-image: none !important;
}

/* Login card */
.login-card {
  background-color: #ffffff;
  border-radius: var(--bridges-radius-xl);
  box-shadow: var(--bridges-shadow-xl);
}

/* Login button */
.login-form .btn-primary {
  background: var(--bridges-gradient-primary) !important;
  border: none !important;
  padding: 12px 24px;
  font-weight: 600;
  border-radius: var(--bridges-radius-md);
  box-shadow: var(--bridges-shadow-md);
}

.login-form .btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: var(--bridges-shadow-lg);
}

/* ============================================
   19. WELCOME BANNER UPDATES
   ============================================ */

/* Override time-of-day accents with brand colors */
:root {
  --welcome-accent-morning: var(--bridges-rose);
  --welcome-accent-afternoon: var(--bridges-lavender);
  --welcome-accent-evening: var(--bridges-navy-medium);
  --welcome-accent-night: var(--bridges-navy);
}

.welcome-banner__icon {
  background: var(--bridges-gradient-primary) !important;
}

.welcome-banner.is-morning .welcome-banner__icon {
  background: linear-gradient(135deg, var(--bridges-rose), var(--bridges-rose-light)) !important;
}

.welcome-banner.is-afternoon .welcome-banner__icon {
  background: linear-gradient(135deg, var(--bridges-lavender), var(--bridges-lavender-light)) !important;
}

.welcome-banner.is-evening .welcome-banner__icon {
  background: linear-gradient(135deg, var(--bridges-navy-medium), var(--bridges-navy-light)) !important;
}

.welcome-banner.is-night .welcome-banner__icon {
  background: var(--bridges-gradient-primary) !important;
}

/* ============================================
   20. STATUS BADGES - UPDATED
   ============================================ */

.status-badge-urgent {
  background: linear-gradient(135deg, #dc3545, #c82333) !important;
  color: #ffffff;
}

.status-badge-warning {
  background: linear-gradient(135deg, #ffc107, #e0a800) !important;
  color: #1a183c !important;
}

.status-badge-success {
  background: linear-gradient(135deg, #28a745, #218838) !important;
  color: #ffffff;
}

.status-badge-info {
  background: linear-gradient(135deg, var(--bridges-lavender), #9690ad) !important;
  color: #ffffff;
}

/* ============================================
   21. UTILITY CLASSES
   ============================================ */

/* Background utilities */
.bg-navy {
  background-color: var(--bridges-navy) !important;
  color: #ffffff !important;
}

.bg-rose {
  background-color: var(--bridges-rose) !important;
  color: #ffffff !important;
}

.bg-lavender {
  background-color: var(--bridges-lavender) !important;
  color: #ffffff !important;
}

.bg-warm {
  background-color: var(--bridges-bg-warm) !important;
}

.bg-cool {
  background-color: var(--bridges-bg-cool) !important;
}

.bg-gradient-primary {
  background: var(--bridges-gradient-primary) !important;
  color: #ffffff !important;
}

.bg-gradient-accent {
  background: var(--bridges-gradient-accent) !important;
  color: #ffffff !important;
}

/* Text utilities */
.text-navy {
  color: var(--bridges-navy) !important;
}

.text-rose {
  color: var(--bridges-rose) !important;
}

.text-rose-dark {
  color: var(--bridges-rose-dark) !important;
}

.text-lavender {
  color: var(--bridges-lavender) !important;
}

/* Border utilities */
.border-navy {
  border-color: var(--bridges-navy) !important;
}

.border-rose {
  border-color: var(--bridges-rose) !important;
}

.border-lavender {
  border-color: var(--bridges-lavender) !important;
}

/* Hover effects */
.hover-lift {
  transition: var(--bridges-transition-slow);
}

.hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: var(--bridges-shadow-lg);
}

.hover-glow:hover {
  box-shadow: 0 0 20px rgba(178, 142, 164, 0.4);
}

/* ============================================
   22. DARK MODE SUPPORT (Future-proof)
   ============================================ */

@media (prefers-color-scheme: dark) {
  :root {
    --bridges-bg-card: #2d2a4d;
    --bridges-bg-cool: #3d3a5d;
    --bridges-bg-warm: #353350;
    --bridges-text-body: #c4bdd4;
    --bridges-text-muted: #a79eb9;
  }

  /* Dark mode specific overrides can be added here */
}

/* ============================================
   23. PRINT STYLES
   ============================================ */

@media print {
  .btn-primary,
  .bg-primary,
  .badge-primary {
    background-color: var(--bridges-navy) !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

/* ============================================
   24. ACCESSIBILITY IMPROVEMENTS
   ============================================ */

/* Focus visible for keyboard navigation */
.btn:focus-visible,
a:focus-visible,
.form-control:focus-visible,
.nav-link:focus-visible {
  outline: 2px solid var(--bridges-rose) !important;
  outline-offset: 2px;
}

/* High contrast mode */
@media (prefers-contrast: high) {
  .btn-primary {
    border: 2px solid #ffffff !important;
  }

  .card {
    border: 1px solid var(--bridges-navy) !important;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* ============================================
   25. METRONIC KTAppSettings OVERRIDE
   ============================================ */

/* These selectors target Metronic-specific components */

/* KT Menu active state */
.menu-item.menu-item-active > .menu-link {
  background-color: rgba(178, 142, 164, 0.12) !important;
}

.menu-item.menu-item-active > .menu-link .menu-text {
  color: var(--bridges-navy) !important;
}

/* KT Quick panel */
.offcanvas-header {
  background: var(--bridges-gradient-primary) !important;
}

/* KT Stepper */
.stepper .stepper-item.current .stepper-icon {
  background-color: var(--bridges-navy) !important;
}

.stepper .stepper-item.completed .stepper-icon {
  background-color: var(--bridges-rose) !important;
}

/* KT Timeline */
.timeline .timeline-item .timeline-badge {
  background-color: var(--bridges-navy) !important;
}

/* ============================================
   26. PAGE BACKGROUND & TAB STYLING
   ============================================ */

/* Body background - light gray */
#kt_body {
  background-color: #F3F6F9 !important;
}

/* Inactive nav-link tabs - very light lavender, close to body bg */
.header-tabs .nav-link {
  background-color: #f0eff5 !important;  /* very light lavender tint */
}

/* Active nav-link tab - white to match content */
.header-tabs .nav-link.active {
  background-color: #ffffff !important;
}

/* Nav title text - navy */
.header-tabs .nav-link .nav-title,
.nav-title {
  color: var(--bridges-navy) !important;
}

/* Nav description text - lighter navy */
.header-tabs .nav-link .nav-desc,
.nav-desc {
  color: var(--bridges-navy-medium) !important;
}

/* Nav icons - navy */
.header-tabs .nav-link i,
.header-tabs .nav-link .svg-icon {
  color: var(--bridges-navy) !important;
}

/* ============================================
   27. CARD HEADER STYLING
   ============================================ */

/* Card headers with bg-dark - match nav lavender with navy text */
.card-header.bg-dark,
.card-title.bg-dark,
.card .card-header.bg-dark {
  background-color: var(--bridges-lavender-light) !important;  /* #c4bdd4 */
  color: var(--bridges-navy) !important;
}

/* Override text-white on these card headers */
.card-header.bg-dark .text-white,
.card-header.bg-dark .card-title,
.card-header.bg-dark h1,
.card-header.bg-dark h2,
.card-header.bg-dark h3,
.card-header.bg-dark h4,
.card-header.bg-dark h5,
.card-header.bg-dark h6 {
  color: var(--bridges-navy) !important;
}

/* Card header icons - navy */
.card-header.bg-dark i,
.card-header.bg-dark .svg-icon,
.card-header.bg-dark .fa,
.card-header.bg-dark .fas,
.card-header.bg-dark .far,
.card-header.bg-dark .fal,
.card-header.bg-dark .fab,
.card-header.bg-dark [class^="fa-"],
.card-header.bg-dark [class*=" fa-"] {
  color: var(--bridges-navy) !important;
}

/* SVG icon fills */
.card-header.bg-dark svg,
.card-header.bg-dark svg path,
.card-header.bg-dark .svg-icon svg,
.card-header.bg-dark .svg-icon path {
  fill: var(--bridges-navy) !important;
}

/* ============================================
   END OF BRIDGES BRAND SYSTEM
   ============================================ */