/**
 * Theme Configuration - Trọ An Cư
 * Primary Color: Blue (#1e3c72 - Professional Blue)
 * Updated: 2026-01-31
 */

:root {
  /* Primary Colors - Blue Theme */
  --primary-color: #1e3c72;
  --primary-dark: #172d5a;
  --primary-light: #2a5298;
  --primary-lighter: #3d6bb3;
  --primary-lightest: #5a8dd8;
  
  /* Background Colors */
  --bg-primary: #1e3c72;
  --bg-primary-dark: #172d5a;
  --bg-gradient: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
  --bg-gradient-reverse: linear-gradient(135deg, #2a5298 0%, #1e3c72 100%);
  
  /* Secondary Colors */
  --secondary-color: #2a5298;
  --success-color: #198754;
  --danger-color: #dc3545;
  --warning-color: #ffc107;
  --info-color: #0dcaf0;
  
  /* Text Colors */
  --text-primary: #1F2937;
  --text-secondary: #6c757d;
  --text-light: #adb5bd;
  --text-white: #ffffff;
  
  /* Border & Background */
  --border-color: #dee2e6;
  --bg-light: #f8f9fa;
  --bg-white: #ffffff;
  
  /* Shadows */
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.12);
  --shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.15);
  --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.2);
  
  /* Focus States */
  --focus-border: #1e3c72;
  --focus-shadow: 0 0 0 0.2rem rgba(30, 60, 114, 0.25);
  
  /* Transitions */
  --transition-fast: 0.15s ease-in-out;
  --transition-normal: 0.3s ease-in-out;
  --transition-slow: 0.5s ease-in-out;
}

/* Button Styles */
.btn-primary {
  background: var(--bg-gradient);
  border: none;
  color: var(--text-white);
  transition: var(--transition-normal);
}

.btn-primary:hover {
  background: var(--bg-gradient-reverse);
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(30, 60, 114, 0.4);
}

.btn-primary:focus {
  border-color: var(--focus-border);
  box-shadow: var(--focus-shadow);
}

/* Form Controls */
.form-control:focus,
.form-select:focus {
  border-color: var(--focus-border);
  box-shadow: var(--focus-shadow);
}

/* Links */
a.text-primary {
  color: var(--primary-color) !important;
}

a.text-primary:hover {
  color: var(--primary-dark) !important;
}

/* Badges */
.badge-primary {
  background-color: var(--primary-color);
}

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

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

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

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

/* Custom Utility Classes */
.hover-lift {
  transition: var(--transition-normal);
}

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

/* Card Styles */
.card-primary {
  border-left: 4px solid var(--primary-color);
}

/* Alert Styles */
.alert-primary {
  background-color: rgba(30, 60, 114, 0.1);
  border-color: var(--primary-color);
  color: var(--primary-dark);
}

/* Progress Bar */
.progress-bar-primary {
  background-color: var(--primary-color);
}

/* Navbar */
.navbar-primary {
  background: var(--bg-gradient);
}

/* Sidebar */
.sidebar-primary {
  background: var(--bg-gradient);
}

/* Table */
.table-primary {
  --bs-table-bg: rgba(30, 60, 114, 0.1);
  --bs-table-striped-bg: rgba(30, 60, 114, 0.05);
  --bs-table-hover-bg: rgba(30, 60, 114, 0.075);
}

/* Pagination */
.pagination .page-link {
  color: var(--primary-color);
}

.pagination .page-item.active .page-link {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}

/* Spinner */
.spinner-primary {
  color: var(--primary-color);
}

/* Dropdown */
.dropdown-item:hover,
.dropdown-item:focus {
  background-color: rgba(30, 60, 114, 0.1);
  color: var(--primary-dark);
}

.dropdown-item.active {
  background-color: var(--primary-color);
  color: var(--text-white);
}