/*!
 * CPWL Theme for Outager Application
 * Based on CPWL Look, Tone and Feel Guidelines V4
 * Overrides SB Admin 2 theme with CPWL brand colors
 */

/* ===== CPWL COLOR VARIABLES ===== */
:root {
  /* CPWL Primary Colors */
  --cpwl-dark-blue: #00234b;
  --cpwl-mid-blue: #00a4e0;
  --cpwl-charcoal-grey: #58595b;
  
  /* CPWL Secondary Colors */
  --cpwl-candy-apple: #ee243b;
  --cpwl-cheerful-orange: #f36c21;
  --cpwl-sunflower-yellow: #fec00f;
  --cpwl-spring-green: #3aa349;
  
  /* CPWL Color Variations for UI States */
  --cpwl-dark-blue-light: #1a3a5c;
  --cpwl-dark-blue-dark: #001a3a;
  --cpwl-mid-blue-light: #1ab4f0;
  --cpwl-mid-blue-dark: #0094d0;
  --cpwl-charcoal-light: #6b6d6f;
  --cpwl-charcoal-dark: #454749;
  
  /* Status Color Variations */
  --cpwl-success-light: #4bb359;
  --cpwl-success-dark: #2a9339;
  --cpwl-warning-light: #fed41f;
  --cpwl-warning-dark: #eeb400;
  --cpwl-danger-light: #f1344b;
  --cpwl-danger-dark: #db142b;
  --cpwl-orange-light: #f57c31;
  --cpwl-orange-dark: #e35c11;
  
  /* Bootstrap Color Variable Overrides */
  --bs-primary: var(--cpwl-dark-blue);
  --bs-primary-rgb: 0, 35, 75;
  --bs-secondary: var(--cpwl-charcoal-grey);
  --bs-secondary-rgb: 88, 89, 91;
  --bs-success: var(--cpwl-spring-green);
  --bs-success-rgb: 58, 163, 73;
  --bs-info: var(--cpwl-mid-blue);
  --bs-info-rgb: 0, 164, 224;
  --bs-warning: var(--cpwl-sunflower-yellow);
  --bs-warning-rgb: 254, 192, 15;
  --bs-danger: var(--cpwl-candy-apple);
  --bs-danger-rgb: 238, 36, 59;
  
  /* SB Admin Color Variable Overrides */
  --blue: var(--cpwl-mid-blue);
  --indigo: #6610f2;
  --purple: #6f42c1;
  --pink: #e83e8c;
  --red: var(--cpwl-candy-apple);
  --orange: var(--cpwl-cheerful-orange);
  --yellow: var(--cpwl-sunflower-yellow);
  --green: var(--cpwl-spring-green);
  --teal: #20c9a6;
  --cyan: var(--cpwl-mid-blue);
  --white: #fff;
  --gray: var(--cpwl-charcoal-grey);
  --gray-dark: var(--cpwl-charcoal-dark);
  --primary: var(--cpwl-dark-blue);
  --secondary: var(--cpwl-charcoal-grey);
  --success: var(--cpwl-spring-green);
  --info: var(--cpwl-mid-blue);
  --warning: var(--cpwl-sunflower-yellow);
  --danger: var(--cpwl-candy-apple);
  --light: #f8f9fc;
  --dark: var(--cpwl-dark-blue);
  
  /* Typography */
  --cpwl-font-family: 'Calibri', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-family-sans-serif: var(--cpwl-font-family);
}

/* ===== TYPOGRAPHY OVERRIDES ===== */
body {
  font-family: var(--cpwl-font-family);
  color: var(--cpwl-charcoal-grey);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--cpwl-font-family);
  font-weight: 600;
  color: var(--cpwl-dark-blue);
}

/* ===== PRIMARY COLOR OVERRIDES ===== */

/* Primary Buttons */
.btn-primary {
  color: #fff;
  background-color: var(--cpwl-dark-blue);
  border-color: var(--cpwl-dark-blue);
}

.btn-primary:hover {
  color: #fff;
  background-color: var(--cpwl-dark-blue-light);
  border-color: var(--cpwl-dark-blue-light);
}

.btn-primary:focus, .btn-primary.focus {
  color: #fff;
  background-color: var(--cpwl-dark-blue-light);
  border-color: var(--cpwl-dark-blue-light);
  box-shadow: 0 0 0 0.2rem rgba(0, 35, 75, 0.5);
}

.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle {
  color: #fff;
  background-color: var(--cpwl-dark-blue-dark);
  border-color: var(--cpwl-dark-blue-dark);
}

/* Secondary Buttons */
.btn-secondary {
  color: #fff;
  background-color: var(--cpwl-charcoal-grey);
  border-color: var(--cpwl-charcoal-grey);
}

.btn-secondary:hover {
  color: #fff;
  background-color: var(--cpwl-charcoal-light);
  border-color: var(--cpwl-charcoal-light);
}

/* Info Buttons */
.btn-info {
  color: #fff;
  background-color: var(--cpwl-mid-blue);
  border-color: var(--cpwl-mid-blue);
}

.btn-info:hover {
  color: #fff;
  background-color: var(--cpwl-mid-blue-dark);
  border-color: var(--cpwl-mid-blue-dark);
}

/* Success Buttons */
.btn-success {
  color: #fff;
  background-color: var(--cpwl-spring-green);
  border-color: var(--cpwl-spring-green);
}

.btn-success:hover {
  color: #fff;
  background-color: var(--cpwl-success-dark);
  border-color: var(--cpwl-success-dark);
}

/* Warning Buttons */
.btn-warning {
  color: var(--cpwl-dark-blue);
  background-color: var(--cpwl-sunflower-yellow);
  border-color: var(--cpwl-sunflower-yellow);
}

.btn-warning:hover {
  color: var(--cpwl-dark-blue);
  background-color: var(--cpwl-warning-dark);
  border-color: var(--cpwl-warning-dark);
}

/* Danger Buttons */
.btn-danger {
  color: #fff;
  background-color: var(--cpwl-candy-apple);
  border-color: var(--cpwl-candy-apple);
}

.btn-danger:hover {
  color: #fff;
  background-color: var(--cpwl-danger-dark);
  border-color: var(--cpwl-danger-dark);
}

/* ===== LINK COLORS ===== */
a {
  color: var(--cpwl-mid-blue);
}

a:hover {
  color: var(--cpwl-mid-blue-dark);
  text-decoration: underline;
}

/* ===== BADGE OVERRIDES ===== */
.badge-primary {
  color: #fff;
  background-color: var(--cpwl-dark-blue);
}

.badge-secondary {
  color: #fff;
  background-color: var(--cpwl-charcoal-grey);
}

.badge-success {
  color: #fff;
  background-color: var(--cpwl-spring-green);
}

.badge-info {
  color: #fff;
  background-color: var(--cpwl-mid-blue);
}

.badge-warning {
  color: var(--cpwl-dark-blue);
  background-color: var(--cpwl-sunflower-yellow);
}

.badge-danger {
  color: #fff;
  background-color: var(--cpwl-candy-apple);
}

/* ===== BACKGROUND UTILITIES ===== */
.bg-primary {
  background-color: var(--cpwl-dark-blue) !important;
}

.bg-secondary {
  background-color: var(--cpwl-charcoal-grey) !important;
}

.bg-success {
  background-color: var(--cpwl-spring-green) !important;
}

.bg-info {
  background-color: var(--cpwl-mid-blue) !important;
}

.bg-warning {
  background-color: var(--cpwl-sunflower-yellow) !important;
}

.bg-danger {
  background-color: var(--cpwl-candy-apple) !important;
}

/* ===== TEXT COLOR UTILITIES ===== */
.text-primary {
  color: var(--cpwl-dark-blue) !important;
}

.text-secondary {
  color: var(--cpwl-charcoal-grey) !important;
}

.text-success {
  color: var(--cpwl-spring-green) !important;
}

.text-info {
  color: var(--cpwl-mid-blue) !important;
}

.text-warning {
  color: var(--cpwl-sunflower-yellow) !important;
}

.text-danger {
  color: var(--cpwl-candy-apple) !important;
}

/* ===== BORDER UTILITIES ===== */
.border-primary {
  border-color: var(--cpwl-dark-blue) !important;
}

.border-secondary {
  border-color: var(--cpwl-charcoal-grey) !important;
}

.border-success {
  border-color: var(--cpwl-spring-green) !important;
}

.border-info {
  border-color: var(--cpwl-mid-blue) !important;
}

.border-warning {
  border-color: var(--cpwl-sunflower-yellow) !important;
}

.border-danger {
  border-color: var(--cpwl-candy-apple) !important;
}

/* ===== GRADIENT BACKGROUNDS ===== */
.bg-gradient-primary {
  background-color: var(--cpwl-dark-blue);
  background-image: linear-gradient(180deg, var(--cpwl-dark-blue) 10%, var(--cpwl-dark-blue-dark) 100%);
  background-size: cover;
}

.bg-gradient-secondary {
  background-color: var(--cpwl-charcoal-grey);
  background-image: linear-gradient(180deg, var(--cpwl-charcoal-grey) 10%, var(--cpwl-charcoal-dark) 100%);
  background-size: cover;
}

.bg-gradient-success {
  background-color: var(--cpwl-spring-green);
  background-image: linear-gradient(180deg, var(--cpwl-spring-green) 10%, var(--cpwl-success-dark) 100%);
  background-size: cover;
}

.bg-gradient-info {
  background-color: var(--cpwl-mid-blue);
  background-image: linear-gradient(180deg, var(--cpwl-mid-blue) 10%, var(--cpwl-mid-blue-dark) 100%);
  background-size: cover;
}

.bg-gradient-warning {
  background-color: var(--cpwl-sunflower-yellow);
  background-image: linear-gradient(180deg, var(--cpwl-sunflower-yellow) 10%, var(--cpwl-warning-dark) 100%);
  background-size: cover;
}

.bg-gradient-danger {
  background-color: var(--cpwl-candy-apple);
  background-image: linear-gradient(180deg, var(--cpwl-candy-apple) 10%, var(--cpwl-danger-dark) 100%);
  background-size: cover;
}

/* ===== FORM CONTROLS ===== */
.form-control:focus {
  color: var(--cpwl-charcoal-grey);
  background-color: #fff;
  border-color: var(--cpwl-mid-blue);
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(0, 164, 224, 0.25);
}

/* ===== ALERTS ===== */
.alert-primary {
  color: #fff;
  background-color: var(--cpwl-dark-blue);
  border-color: var(--cpwl-dark-blue-light);
}

.alert-secondary {
  color: #fff;
  background-color: var(--cpwl-charcoal-grey);
  border-color: var(--cpwl-charcoal-light);
}

.alert-success {
  color: #fff;
  background-color: var(--cpwl-spring-green);
  border-color: var(--cpwl-success-light);
}

.alert-info {
  color: #fff;
  background-color: var(--cpwl-mid-blue);
  border-color: var(--cpwl-mid-blue-light);
}

.alert-warning {
  color: var(--cpwl-dark-blue);
  background-color: var(--cpwl-sunflower-yellow);
  border-color: var(--cpwl-warning-light);
}

.alert-danger {
  color: #fff;
  background-color: var(--cpwl-candy-apple);
  border-color: var(--cpwl-danger-light);
}

/* ===== PROGRESS BARS ===== */
.progress-bar {
  background-color: var(--cpwl-mid-blue);
}

.progress-bar-primary {
  background-color: var(--cpwl-dark-blue);
}

.progress-bar-success {
  background-color: var(--cpwl-spring-green);
}

.progress-bar-warning {
  background-color: var(--cpwl-sunflower-yellow);
}

.progress-bar-danger {
  background-color: var(--cpwl-candy-apple);
}

/* ===== TABLE OVERRIDES ===== */
.table-primary,
.table-primary > td,
.table-primary > th {
  background-color: rgba(0, 35, 75, 0.1);
}

.table-secondary,
.table-secondary > td,
.table-secondary > th {
  background-color: rgba(88, 89, 91, 0.1);
}

.table-success,
.table-success > td,
.table-success > th {
  background-color: rgba(58, 163, 73, 0.1);
}

.table-info,
.table-info > td,
.table-info > th {
  background-color: rgba(0, 164, 224, 0.1);
}

.table-warning,
.table-warning > td,
.table-warning > th {
  background-color: rgba(254, 192, 15, 0.1);
}

.table-danger,
.table-danger > td,
.table-danger > th {
  background-color: rgba(238, 36, 59, 0.1);
}