/* ========================================
   LSS COMPANY COLOR SCHEME
   Based on company logo colors
   ======================================== */

:root {
  /* Primary Company Colors */
  --color-blue-dark: #003B73;      /* Dark Blue from logo */
  --color-blue-light: #00A8E8;     /* Light Blue/Cyan from logo */
  --color-blue-medium: #0077B6;    /* Medium Blue */
  --color-white: #FFFFFF;          /* White */

  /* Extended Color Palette */
  --color-blue-darker: #002847;    /* Extra dark blue */
  --color-blue-lighter: #33BFEB;   /* Lighter cyan */
  --color-blue-pale: #E6F7FF;      /* Very light blue background */
  --color-gray-light: #F8F9FA;     /* Light gray background */
  --color-gray: #E9ECEF;           /* Gray background */

  /* Gradient System - Company Theme */
  --primary-gradient: linear-gradient(135deg, #00A8E8 0%, #003B73 100%);
  --secondary-gradient: linear-gradient(135deg, #00B4DB 0%, #0077B6 100%);
  --ocean-gradient: linear-gradient(135deg, #00A8E8 0%, #003B73 100%);
  --light-gradient: linear-gradient(135deg, #E6F7FF 0%, #FFFFFF 100%);
  --blue-gradient: linear-gradient(135deg, #003B73 0%, #0077B6 100%);

  /* Button Colors */
  --btn-primary-bg: var(--color-blue-light);
  --btn-primary-hover: var(--color-blue-medium);
  --btn-secondary-bg: var(--color-blue-dark);
  --btn-secondary-hover: var(--color-blue-darker);
}

/* Background Colors */
.bg-blue-dark {
  background-color: var(--color-blue-dark) !important;
}

.bg-blue-light {
  background-color: var(--color-blue-light) !important;
}

.bg-blue-medium {
  background-color: var(--color-blue-medium) !important;
}

.bg-blue-pale {
  background-color: var(--color-blue-pale) !important;
}

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

.bg-gradient-ocean {
  background: var(--ocean-gradient) !important;
}

.bg-gradient-light {
  background: var(--light-gradient) !important;
}

/* Text Colors */
.text-blue-dark {
  color: var(--color-blue-dark) !important;
}

.text-blue-light {
  color: var(--color-blue-light) !important;
}

.text-blue-medium {
  color: var(--color-blue-medium) !important;
}

/* Border Colors */
.border-blue-dark {
  border-color: var(--color-blue-dark) !important;
}

.border-blue-light {
  border-color: var(--color-blue-light) !important;
}

/* Buttons with Company Colors */
.btn-lss-primary {
  background: var(--primary-gradient);
  color: white;
  border: none;
  padding: 12px 32px;
  border-radius: 12px;
  font-weight: 600;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(0, 168, 232, 0.3);
}

.btn-lss-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 168, 232, 0.4);
  color: white;
}

.btn-lss-secondary {
  background: var(--color-blue-dark);
  color: white;
  border: none;
  padding: 12px 32px;
  border-radius: 12px;
  font-weight: 600;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(0, 59, 115, 0.3);
}

.btn-lss-secondary:hover {
  background: var(--color-blue-darker);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 59, 115, 0.4);
  color: white;
}

.btn-lss-outline {
  background: transparent;
  color: var(--color-blue-light);
  border: 2px solid var(--color-blue-light);
  padding: 10px 30px;
  border-radius: 12px;
  font-weight: 600;
  transition: all 0.3s ease;
}

.btn-lss-outline:hover {
  background: var(--color-blue-light);
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 168, 232, 0.3);
}

/* Links with Company Colors */
a {
  color: var(--color-blue-light);
  transition: color 0.3s ease;
}

a:hover {
  color: var(--color-blue-dark);
}

/* Card Hover Effects */
.card-lss {
  transition: all 0.3s ease;
  border: 1px solid rgba(0, 168, 232, 0.1);
}

.card-lss:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0, 168, 232, 0.2);
  border-color: var(--color-blue-light);
}

/* Section Backgrounds */
.section-light {
  background: linear-gradient(135deg, #FFFFFF 0%, #E6F7FF 100%);
}

.section-blue {
  background: var(--primary-gradient);
  color: white;
}

.section-dark-blue {
  background: var(--color-blue-dark);
  color: white;
}

/* Icon Colors */
.icon-blue-light {
  color: var(--color-blue-light);
  font-size: 2.5rem;
}

.icon-blue-dark {
  color: var(--color-blue-dark);
  font-size: 2.5rem;
}

/* Badge with Company Colors */
.badge-lss {
  background: var(--primary-gradient);
  color: white;
  padding: 6px 16px;
  border-radius: 20px;
  font-weight: 600;
  font-size: 0.875rem;
}

/* Progress Bar */
.progress-lss {
  background-color: var(--color-blue-pale);
}

.progress-lss .progress-bar {
  background: var(--primary-gradient);
}

/* Alert with Company Colors */
.alert-lss {
  background: var(--color-blue-pale);
  border-left: 4px solid var(--color-blue-light);
  color: var(--color-blue-dark);
  padding: 1rem 1.5rem;
  border-radius: 8px;
}

/* Overlay with Company Colors */
.overlay-blue {
  background: linear-gradient(135deg, rgba(0, 168, 232, 0.9) 0%, rgba(0, 59, 115, 0.9) 100%);
}

/* Divider Line */
.divider-lss {
  height: 3px;
  width: 80px;
  background: var(--primary-gradient);
  margin: 1rem auto;
  border-radius: 3px;
}