/* Global Color Variables for Wcargoplus - Bootstrap 4 Compatible */
/* Optimized for AdminLTE 3 (Bootstrap 4) backend usage */

:root {
  /* Wcargoplus Core Colors */
  --color-white: #fff;
  --color-dark-blue-gray: #2d4156;
  --color-darker-blue-gray: #1d2e38;
  --color-light-gray-blue: #eaeff2;
  --color-light-gray-blue-alt: #d5dee2;
  --color-very-light-blue: #ecf2fa;
  --color-very-light-blue-alt: #e9eff4;
  --color-very-light-gray-blue: #f0f4f7;
  --color-light-gray: #d8e0e6;
  --color-light-gray-alt: #e9edf2;
  --color-light-gray-alt2: #f1f3f5;
  --color-light-gray-alt3: #cfd5db;
  --color-medium-gray: #919ea6;
  --color-medium-gray-alt: #9199a0;
  --cc-overlay-bg: rgba(4, 6, 8, 0.85);

  /* Bootstrap 4 Variables (AdminLTE compatible) */
  --blue: #007bff;
  --indigo: #6610f2;
  --purple: #6f42c1;
  --pink: #e83e8c;
  --red: #dc3545;
  --orange: #fd7e14;
  --yellow: #ffc107;
  --green: #28a745;
  --teal: #20c997;
  --cyan: #17a2b8;
  --white: #fff;
  --gray: #6c757d;
  --gray-dark: #343a40;
  --primary: #007bff;
  --secondary: #6c757d;
  --success: #28a745;
  --info: #17a2b8;
  --warning: #ffc107;
  --danger: #dc3545;
  --light: #f8f9fa;
  --dark: #343a40;

  /* Bootstrap 4 RGB Values */
  --primary-rgb: 0, 123, 255;
  --secondary-rgb: 108, 117, 125;
  --success-rgb: 40, 167, 69;
  --info-rgb: 23, 162, 184;
  --warning-rgb: 255, 193, 7;
  --danger-rgb: 220, 53, 69;
  --light-rgb: 248, 249, 250;
  --dark-rgb: 52, 58, 64;

  /* Typography (Bootstrap 4) */
  --font-family-sans-serif: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --font-size-base: 0.875rem; /* 14px for dashboard density */
  --font-weight-normal: 400;
  --line-height-base: 1.5;

  /* Layout (Bootstrap 4) */
  --body-color: #212529;
  --body-bg: #fff;
  --border-width: 1px;
  --border-color: #dee2e6;
  --border-radius: .25rem;
  --border-radius-sm: .2rem;
  --border-radius-lg: .3rem;

  /* Dark Mode Support */
  --color-scheme: light;

  /* Component-Specific Colors */
  --dashboard-bg: var(--color-very-light-gray-blue);
  --dashboard-card-shadow: 0 2px 10px rgba(45, 65, 86, 0.1);
  --form-border-focus: var(--primary);
  --form-error-color: var(--danger);
  --form-success-color: var(--success);
  --navbar-bg: var(--color-white);
  --navbar-border: var(--color-light-gray);
  --sidebar-bg: var(--color-darker-blue-gray);
  --sidebar-text: var(--color-very-light-gray-blue);

  /* Spacing Scale */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 3rem;
  --spacing-2xl: 4rem;

  /* Border Radius Scale */
  --radius-sm: 0.2rem;
  --radius-md: 0.25rem;
  --radius-lg: 0.3rem;
  --radius-xl: 0.5rem;

  /* Transitions & Animations */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.5s ease;
  --animation-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --animation-smooth: cubic-bezier(0.4, 0, 0.2, 1);

  /* AdminLTE Theme Integration */
  --adminlte-sidebar-width: 250px;
  --adminlte-header-height: 57px;
  --adminlte-primary: var(--color-dark-blue-gray);
  --adminlte-accent: var(--color-light-gray-blue);
  --adminlte-light: var(--color-very-light-gray-blue);
  --adminlte-dark: var(--color-darker-blue-gray);

  /* Responsive Breakpoints (Bootstrap 4) */
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;

  /* Color Shades - Most Common (Bootstrap 4) */
  --primary-50: rgba(var(--primary-rgb), 0.05);
  --primary-100: rgba(var(--primary-rgb), 0.1);
  --primary-200: rgba(var(--primary-rgb), 0.2);
  --primary-300: rgba(var(--primary-rgb), 0.3);
  --primary-400: rgba(var(--primary-rgb), 0.4);
  --primary-500: rgba(var(--primary-rgb), 0.5);
  --primary-600: rgba(var(--primary-rgb), 0.6);
  --primary-700: rgba(var(--primary-rgb), 0.7);
  --primary-800: rgba(var(--primary-rgb), 0.8);
  --primary-900: rgba(var(--primary-rgb), 0.9);

  --success-50: rgba(var(--success-rgb), 0.05);
  --success-100: rgba(var(--success-rgb), 0.1);
  --success-200: rgba(var(--success-rgb), 0.2);
  --success-500: rgba(var(--success-rgb), 0.5);

  --danger-50: rgba(var(--danger-rgb), 0.05);
  --danger-100: rgba(var(--danger-rgb), 0.1);
  --danger-200: rgba(var(--danger-rgb), 0.2);
  --danger-500: rgba(var(--danger-rgb), 0.5);

  --warning-50: rgba(var(--warning-rgb), 0.05);
  --warning-100: rgba(var(--warning-rgb), 0.1);
  --warning-200: rgba(var(--warning-rgb), 0.2);
  --warning-500: rgba(var(--warning-rgb), 0.5);

  --info-50: rgba(var(--info-rgb), 0.05);
  --info-100: rgba(var(--info-rgb), 0.1);
  --info-200: rgba(var(--info-rgb), 0.2);
  --info-500: rgba(var(--info-rgb), 0.5);

  /* Common Shape Variables */
  --shape-circle: 50%;
  --shape-rounded: var(--border-radius);
  --shape-rounded-sm: var(--border-radius-sm);
  --shape-rounded-lg: var(--border-radius-lg);
  --shape-rounded-xl: var(--radius-xl);
  --shape-pill: 10rem;
  --shape-square: 0;

  /* Common Shadow Presets (Bootstrap 4 style) */
  --shadow-none: none;
  --shadow-sm: 0 .125rem .25rem rgba(0,0,0,.075);
  --shadow: 0 .5rem 1rem rgba(0,0,0,.15);
  --shadow-lg: 0 1rem 3rem rgba(0,0,0,.175);
  --shadow-inner: inset 0 1px 2px rgba(0,0,0,.075);

  /* Semantic Mappings */
  --primary-color: var(--color-dark-blue-gray);
  --secondary-color: var(--color-medium-gray);
  --accent-color: var(--color-light-gray-blue);
  --background-light: var(--color-very-light-gray-blue);
  --background-dark: var(--color-darker-blue-gray);
  --text-primary: var(--color-dark-blue-gray);
  --text-secondary: var(--color-medium-gray);
  --border-color: var(--color-light-gray);
}

/* Dark Mode Overrides */
@media (prefers-color-scheme: dark) {
  :root {
    --color-scheme: dark;
    --color-dark-blue-gray: #4a5d75;
    --color-darker-blue-gray: #2e3a47;
    --color-light-gray-blue: #3a4a5c;
    --color-very-light-gray-blue: #2a3741;
    --color-light-gray: #4a5d75;
    --color-medium-gray: #7a8a9c;
    --body-bg: #1a1a1a;
    --body-color: #e9ecef;
    --dashboard-bg: var(--color-darker-blue-gray);
    --navbar-bg: var(--color-darker-blue-gray);
    --sidebar-bg: #1a1a1a;
  }
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
  :root {
    --color-light-gray: var(--color-medium-gray);
    --border-color: var(--color-dark-blue-gray);
  }
}

/* Enhanced Utility Classes for Bootstrap 4 */
.text-primary { color: var(--color-dark-blue-gray) !important; }
.text-secondary { color: var(--color-medium-gray) !important; }
.text-accent { color: var(--color-light-gray-blue) !important; }
.text-success { color: var(--success) !important; }
.text-info { color: var(--info) !important; }
.text-warning { color: var(--warning) !important; }
.text-danger { color: var(--danger) !important; }

.bg-primary { background-color: var(--color-dark-blue-gray) !important; }
.bg-secondary { background-color: var(--color-medium-gray) !important; }
.bg-accent { background-color: var(--color-light-gray-blue) !important; }
.bg-light { background-color: var(--color-very-light-gray-blue) !important; }
.bg-dark { background-color: var(--color-darker-blue-gray) !important; }
.bg-success { background-color: var(--success) !important; }
.bg-info { background-color: var(--info) !important; }
.bg-warning { background-color: var(--warning) !important; }
.bg-danger { background-color: var(--danger) !important; }

.border-primary { border-color: var(--color-dark-blue-gray) !important; }
.border-secondary { border-color: var(--color-medium-gray) !important; }
.border-light { border-color: var(--color-light-gray) !important; }
.border-success { border-color: var(--success) !important; }
.border-info { border-color: var(--info) !important; }
.border-warning { border-color: var(--warning) !important; }
.border-danger { border-color: var(--danger) !important; }

/* Spacing Utilities */
.m-xs { margin: var(--spacing-xs) !important; }
.m-sm { margin: var(--spacing-sm) !important; }
.m-md { margin: var(--spacing-md) !important; }
.m-lg { margin: var(--spacing-lg) !important; }
.m-xl { margin: var(--spacing-xl) !important; }

.p-xs { padding: var(--spacing-xs) !important; }
.p-sm { padding: var(--spacing-sm) !important; }
.p-md { padding: var(--spacing-md) !important; }
.p-lg { padding: var(--spacing-lg) !important; }
.p-xl { padding: var(--spacing-xl) !important; }

/* Border Radius Utilities */
.rounded-none { border-radius: var(--shape-square) !important; }
.rounded-sm { border-radius: var(--shape-rounded-sm) !important; }
.rounded { border-radius: var(--shape-rounded) !important; }
.rounded-lg { border-radius: var(--shape-rounded-lg) !important; }
.rounded-xl { border-radius: var(--shape-rounded-xl) !important; }
.rounded-pill { border-radius: var(--shape-pill) !important; }
.rounded-circle { border-radius: var(--shape-circle) !important; }
.rounded-custom { border-radius: var(--shape-rounded-lg) !important; }

/* Shadow Utilities */
.shadow-none { box-shadow: var(--shadow-none) !important; }
.shadow-sm { box-shadow: var(--shadow-sm) !important; }
.shadow { box-shadow: var(--shadow) !important; }
.shadow-lg { box-shadow: var(--shadow-lg) !important; }
.shadow-inner { box-shadow: var(--shadow-inner) !important; }

/* Transition Utilities */
.transition-fast { transition: all var(--transition-fast) !important; }
.transition-normal { transition: all var(--transition-normal) !important; }
.transition-slow { transition: all var(--transition-slow) !important; }
.transition-all { transition: all var(--transition-normal) !important; }

/* Flexbox Utilities */
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.flex-start { display: flex; align-items: center; justify-content: flex-start; }
.flex-end { display: flex; align-items: center; justify-content: flex-end; }
.flex-column { display: flex; flex-direction: column; }

/* Color Shade Background Utilities */
.bg-primary-50 { background-color: var(--primary-50) !important; }
.bg-primary-100 { background-color: var(--primary-100) !important; }
.bg-primary-200 { background-color: var(--primary-200) !important; }
.bg-success-50 { background-color: var(--success-50) !important; }
.bg-success-100 { background-color: var(--success-100) !important; }
.bg-danger-50 { background-color: var(--danger-50) !important; }
.bg-danger-100 { background-color: var(--danger-100) !important; }
.bg-warning-50 { background-color: var(--warning-50) !important; }
.bg-warning-100 { background-color: var(--warning-100) !important; }
.bg-info-50 { background-color: var(--info-50) !important; }
.bg-info-100 { background-color: var(--info-100) !important; }

/* Shape Utility Classes */
.shape-circle { border-radius: var(--shape-circle) !important; }
.shape-rounded { border-radius: var(--shape-rounded) !important; }
.shape-rounded-sm { border-radius: var(--shape-rounded-sm) !important; }
.shape-rounded-lg { border-radius: var(--shape-rounded-lg) !important; }
.shape-pill { border-radius: var(--shape-pill) !important; }
.shape-square { border-radius: var(--shape-square) !important; }

/* AdminLTE-Specific Overrides */
.sidebar-dark-primary {
  background-color: var(--adminlte-dark) !important;
}

.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link.active {
  background-color: var(--adminlte-accent);
  color: var(--adminlte-primary);
}

.main-header.navbar.navbar-expand.navbar-white.navbar-light {
  background: var(--navbar-bg) !important;
  border-bottom: 1px solid var(--navbar-border);
  height: var(--adminlte-header-height);
}

.content-wrapper {
  background-color: var(--dashboard-bg);
  margin-left: var(--adminlte-sidebar-width);
}

.card {
  border-color: var(--border-color);
  box-shadow: var(--dashboard-card-shadow);
  border-radius: var(--border-radius);
}

.btn-primary {
  background-color: var(--adminlte-primary);
  border-color: var(--adminlte-primary);
  border-radius: var(--border-radius);
  transition: var(--transition-normal);
}

.btn-primary:hover {
  background-color: var(--adminlte-dark);
  border-color: var(--adminlte-dark);
  transform: translateY(-1px);
  box-shadow: var(--shadow);
}

/* Form Enhancements */
.form-control:focus {
  border-color: var(--form-border-focus);
  box-shadow: 0 0 0 0.2rem rgba(var(--primary-rgb), 0.25);
}

.is-valid {
  border-color: var(--form-success-color) !important;
}

.is-invalid {
  border-color: var(--form-error-color) !important;
}

/* Dashboard Components */
.dashboard-card {
  background: var(--color-white);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  box-shadow: var(--dashboard-card-shadow);
  transition: var(--transition-normal);
}

.dashboard-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

/* Responsive Utilities */
@media (max-width: 768px) {
  .content-wrapper {
    margin-left: 0;
  }

  .main-sidebar {
    transform: translateX(-100%);
  }

  .main-sidebar.show {
    transform: translateX(0);
  }
}

/* Animation Classes */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideInUp {
  from {
    transform: translateY(30px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes bounce {
  0%, 20%, 53%, 80%, 100% {
    transform: translate3d(0, 0, 0);
  }
  40%, 43% {
    transform: translate3d(0, -30px, 0);
  }
  70% {
    transform: translate3d(0, -15px, 0);
  }
  90% {
    transform: translate3d(0, -4px, 0);
  }
}

.animate-fade-in {
  animation: fadeIn var(--transition-normal);
}

.animate-slide-in-up {
  animation: slideInUp var(--transition-normal);
}

.animate-bounce {
  animation: bounce 1s var(--animation-bounce);
}

/* Module-Specific Overrides */
.carrier-module {
  --primary: var(--color-dark-blue-gray);
  --module-accent: var(--color-light-gray-blue);
}

.shipper-module {
  --primary: var(--green);
  --module-accent: var(--color-very-light-blue);
}

.admin-module {
  --primary: var(--info);
  --module-accent: var(--color-light-gray-blue);
}