/* TrustClient Theme - Client Color Palette */

:root {
  /* Main Blues */
  --color-navy-main: #162a40;
  --color-navy-main-600: #1a2f7a;  /* Darker navy-main for hover states */
  --color-navy-secondary: #206b87;
  --color-navy-secondary-600: #1a2f7a;  /* Darker navy-secondary for hover states */
  --color-navy-tertiary: #206b86;
  --color-navy-500: #0a1e3f;  /* Main Navy from client palette */
  --color-navy-600: #1a2f7a;  /* Darker navy for hover states */
  --color-navy-100: #e6e8eb;  /* Light navy for borders */
  --color-navy-200: #cbd5e1;  /* Lighter navy for hover states */
  --color-navy-400: #94a3b8;  /* Medium navy for borders */
  --color-navy-50: #f8fafc;   /* Very light navy for backgrounds */
  --color-navy-700: #475569;  /* Dark navy for text */

  /* Cool Gray */
  --color-coolGray-50: #f8fafc;

  /* Teal Accent */
  --color-teal: #38B2AC;
  --color-teal-500: #38B2AC;  /* Teal Accent from client palette */
  --color-teal-600: #319795;  /* Darker teal for hover states */

  /* Highlight Blue */
  --color-highlight: #2E5AAC;
  --color-highlight-500: #2E5AAC;  /* Highlight Blue from client palette */
  --color-highlight-600: #2563eb;  /* Darker highlight for hover states */

  /* Charcoal Gray */
  --color-charcoal: #333333;
  --color-charcoal-700: #343a40;
  --color-charcoal-500: #6c757d;
  --color-charcoal-300: #ced4da;

  /* Gray Navbar */
  --color-gray-800: #1f2937;
  --color-gray-700: #374151;
  --color-navbar-gray: #1f2937;

  /* Success Green */
  --color-success: #15803d;
  --color-success-500: #15803d;  /* Success Green from client palette */
  --color-success-100: #dcfce7;  /* Light green background for badges */
  --color-success-800: #166534;  /* Dark green text for badges */
  --color-green-500: #15803d;   /* Success Green for approval badges */

  /* Error Red */
  --color-error: #B00020;
  --color-error-500: #B00020;  /* Error Red from client palette */
  --color-error-100: #fee2e2;  /* Light red background for badges */
  --color-error-800: #991b1b;  /* Dark red text for badges */
  --color-red-500: #B00020;    /* Error Red for rejection badges */

  /* New Client Colors */
  --color-light-grey: #d1d1d1;  /* Light Grey for backgrounds */
  --color-grey: #737373;        /* Grey for text and accents */
  --color-star-orange: #eeba2b; /* Star Orange for highlights */
}

/* Utility Classes */
.bg-navy-main { background-color: var(--color-navy-main) !important; }
.bg-navy-main-600 { background-color: var(--color-navy-main-600) !important; }
.bg-navy-secondary { background-color: var(--color-navy-secondary) !important; }
.bg-navy-secondary-600 { background-color: var(--color-navy-secondary-600) !important; }
.bg-navy-tertiary { background-color: var(--color-navy-tertiary) !important; }
.bg-navy-500 { background-color: var(--color-navy-500) !important; }
.bg-navy-600 { background-color: var(--color-navy-600) !important; }
.bg-navy-100 { background-color: var(--color-navy-100) !important; }
.bg-navy-200 { background-color: var(--color-navy-200) !important; }
.bg-navy-400 { background-color: var(--color-navy-400) !important; }
.bg-navy-50 { background-color: var(--color-navy-50) !important; }
.bg-navy-700 { background-color: var(--color-navy-700) !important; }
.bg-coolGray-50 { background-color: var(--color-coolGray-50) !important; }
.bg-teal { background-color: var(--color-teal) !important; }
.bg-teal-500 { background-color: var(--color-teal-500) !important; }
.bg-teal-600 { background-color: var(--color-teal-600) !important; }
.bg-highlight { background-color: var(--color-highlight) !important; }
.bg-highlight-500 { background-color: var(--color-highlight-500) !important; }
.bg-highlight-600 { background-color: var(--color-highlight-600) !important; }
.bg-charcoal { background-color: var(--color-charcoal) !important; }
.bg-gray-800 { background-color: var(--color-gray-800) !important; }
.bg-navbar-gray { background-color: var(--color-navbar-gray) !important; }
.bg-success { background-color: var(--color-success) !important; }
.bg-success-500 { background-color: var(--color-success-500) !important; }
.bg-success-100 { background-color: var(--color-success-100) !important; }
.bg-error { background-color: var(--color-error) !important; }
.bg-error-500 { background-color: var(--color-error-500) !important; }
.bg-error-100 { background-color: var(--color-error-100) !important; }
.bg-green-500 { background-color: var(--color-green-500) !important; }
.bg-red-500 { background-color: var(--color-red-500) !important; }
.bg-light-grey { background-color: var(--color-light-grey) !important; }
.bg-grey { background-color: var(--color-grey) !important; }
.bg-star-orange { background-color: var(--color-star-orange) !important; }

.text-navy-main { color: var(--color-navy-main) !important; }
.text-navy-main-600 { color: var(--color-navy-main-600) !important; }
.text-navy-secondary { color: var(--color-navy-secondary) !important; }
.text-navy-tertiary { color: var(--color-navy-tertiary) !important; }
.text-navy-500 { color: var(--color-navy-500) !important; }
.text-navy-100 { color: var(--color-navy-100) !important; }
.text-navy-200 { color: var(--color-navy-200) !important; }
.text-navy-400 { color: var(--color-navy-400) !important; }
.text-navy-50 { color: var(--color-navy-50) !important; }
.text-navy-700 { color: var(--color-navy-700) !important; }
.text-coolGray-50 { color: var(--color-coolGray-50) !important; }
.text-teal { color: var(--color-teal) !important; }
.text-teal-500 { color: var(--color-teal-500) !important; }
.text-highlight { color: var(--color-highlight) !important; }
.text-highlight-500 { color: var(--color-highlight-500) !important; }
.text-charcoal { color: var(--color-charcoal) !important; }
.text-charcoal-700 { color: var(--color-charcoal-700) !important; }
.text-charcoal-500 { color: var(--color-charcoal-500) !important; }
.text-charcoal-300 { color: var(--color-charcoal-300) !important; }
.text-success { color: var(--color-success) !important; }
.text-success-500 { color: var(--color-success-500) !important; }
.text-success-800 { color: var(--color-success-800) !important; }
.text-error { color: var(--color-error) !important; }
.text-error-500 { color: var(--color-error-500) !important; }
.text-error-800 { color: var(--color-error-800) !important; }
.text-green-500 { color: var(--color-green-500) !important; }
.text-red-500 { color: var(--color-red-500) !important; }
.text-light-grey { color: var(--color-light-grey) !important; }
.text-grey { color: var(--color-grey) !important; }
.text-star-orange { color: var(--color-star-orange) !important; }

.border-navy-main { border-color: var(--color-navy-main) !important; }
.border-navy-secondary { border-color: var(--color-navy-secondary) !important; }
.border-navy-tertiary { border-color: var(--color-navy-tertiary) !important; }
.border-navy-500 { border-color: var(--color-navy-500) !important; }
.border-navy-100 { border-color: var(--color-navy-100) !important; }
.border-navy-200 { border-color: var(--color-navy-200) !important; }
.border-navy-400 { border-color: var(--color-navy-400) !important; }
.border-navy-50 { border-color: var(--color-navy-50) !important; }
.border-navy-700 { border-color: var(--color-navy-700) !important; }
.border-coolGray-50 { border-color: var(--color-coolGray-50) !important; }
.border-teal { border-color: var(--color-teal) !important; }
.border-teal-500 { border-color: var(--color-teal-500) !important; }
.border-highlight { border-color: var(--color-highlight) !important; }
.border-highlight-500 { border-color: var(--color-highlight-500) !important; }
.border-charcoal { border-color: var(--color-charcoal) !important; }
.border-gray-700 { border-color: var(--color-gray-700) !important; }
.border-success { border-color: var(--color-success) !important; }
.border-success-500 { border-color: var(--color-success-500) !important; }
.border-error { border-color: var(--color-error) !important; }
.border-error-500 { border-color: var(--color-error-500) !important; }
.border-green-500 { border-color: var(--color-green-500) !important; }
.border-red-500 { border-color: var(--color-red-500) !important; }
.border-light-grey { border-color: var(--color-light-grey) !important; }
.border-grey { border-color: var(--color-grey) !important; }
.border-star-orange { border-color: var(--color-star-orange) !important; }

/* Ensure form elements have proper backgrounds */
input, select, textarea {
  background-color: white !important;
}

/* Tab active state */
.tab-active {
  background: var(--color-navy-500) !important;
  color: white !important;
  box-shadow: 0 4px 15px rgba(22, 42, 64, 0.3) !important;
}