/* AWASO STEM SHS Brand Colors */
/* Brand Colors: #514c4a, #fabc9a, #141111, #FFFFFF */

:root {
  /* Brand Colors */
  --brand-primary: #514c4a;
  --brand-secondary: #fabc9a;
  --brand-dark: #141111;
  --brand-light: #FFFFFF;
  
  /* Gradients */
  --gradient-primary: linear-gradient(135deg, #514c4a 0%, #141111 100%);
  --gradient-secondary: linear-gradient(135deg, #fabc9a 0%, #514c4a 100%);
  --gradient-warm: linear-gradient(135deg, #fabc9a 0%, #FFFFFF 50%, #fabc9a 100%);
}

/* Brand Color Utilities */
.bg-brand-primary {
  background-color: var(--brand-primary) !important;
}

.bg-brand-secondary {
  background-color: var(--brand-secondary) !important;
}

.bg-brand-dark {
  background-color: var(--brand-dark) !important;
}

.text-brand-primary {
  color: var(--brand-primary) !important;
}

.text-brand-secondary {
  color: var(--brand-secondary) !important;
}

.text-brand-dark {
  color: var(--brand-dark) !important;
}

.border-brand-primary {
  border-color: var(--brand-primary) !important;
}

.border-brand-secondary {
  border-color: var(--brand-secondary) !important;
}

/* Button Brand Colors */
.btn-brand-primary {
  background-color: var(--brand-primary);
  border-color: var(--brand-primary);
  color: var(--brand-light);
}

.btn-brand-primary:hover {
  background-color: var(--brand-dark);
  border-color: var(--brand-dark);
  color: var(--brand-light);
}

.btn-brand-secondary {
  background-color: var(--brand-secondary);
  border-color: var(--brand-secondary);
  color: var(--brand-dark);
}

.btn-brand-secondary:hover {
  background-color: var(--brand-primary);
  border-color: var(--brand-primary);
  color: var(--brand-light);
}

/* Gradient Backgrounds */
.bg-gradient-brand {
  background: var(--gradient-primary);
}

.bg-gradient-warm {
  background: var(--gradient-warm);
}

.bg-gradient-secondary {
  background: var(--gradient-secondary);
}

/* Form Input Brand Colors */
.form-control:focus,
.form-floating-outline .form-control:focus {
  border-color: var(--brand-secondary);
  box-shadow: 0 0 0 0.2rem rgba(250, 188, 154, 0.25);
}

.form-check-input:checked {
  background-color: var(--brand-primary);
  border-color: var(--brand-primary);
}

/* Link Colors */
a {
  color: var(--brand-primary);
}

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

/* Card Brand Styling */
.card {
  border-color: rgba(81, 76, 74, 0.1);
}

.card-header {
  background-color: rgba(81, 76, 74, 0.05);
  border-bottom-color: rgba(81, 76, 74, 0.1);
}

/* Navbar Brand Colors */
.navbar {
  background-color: var(--brand-light);
  border-bottom: 1px solid rgba(81, 76, 74, 0.1);
}

/* Menu Brand Colors */
.menu-item.active > .menu-link {
  background-color: rgba(250, 188, 154, 0.1);
  color: var(--brand-primary);
}

.menu-link:hover {
  background-color: rgba(250, 188, 154, 0.05);
  color: var(--brand-primary);
}

/* Badge Brand Colors */
.badge.bg-primary {
  background-color: var(--brand-primary) !important;
}

.badge.bg-secondary {
  background-color: var(--brand-secondary) !important;
}

/* Alert Brand Colors */
.alert-primary {
  background-color: rgba(81, 76, 74, 0.1);
  border-color: var(--brand-primary);
  color: var(--brand-dark);
}

/* Override Bootstrap Primary Color */
.btn-primary {
  background-color: var(--brand-primary);
  border-color: var(--brand-primary);
}

.btn-primary:hover {
  background-color: var(--brand-dark);
  border-color: var(--brand-dark);
}

/* Override Bootstrap Success Color for Staff */
.btn-success {
  background-color: var(--brand-secondary);
  border-color: var(--brand-secondary);
  color: var(--brand-dark);
}

.btn-success:hover {
  background-color: var(--brand-primary);
  border-color: var(--brand-primary);
  color: var(--brand-light);
}

/* Override Bootstrap Danger Color for Admin */
.btn-danger {
  background-color: var(--brand-dark);
  border-color: var(--brand-dark);
}

.btn-danger:hover {
  background-color: var(--brand-primary);
  border-color: var(--brand-primary);
}

/* Dashboard Avatar Background Colors */
.avatar-initial.bg-primary {
  background-color: var(--brand-primary) !important;
}

.avatar-initial.bg-success {
  background-color: var(--brand-secondary) !important;
}

.avatar-initial.bg-warning {
  background-color: var(--brand-secondary) !important;
  opacity: 0.8;
}

.avatar-initial.bg-info {
  background-color: var(--brand-primary) !important;
  opacity: 0.7;
}

.avatar-initial.bg-danger {
  background-color: var(--brand-dark) !important;
}

/* Dashboard Card Styling */
.card {
  border-color: rgba(81, 76, 74, 0.15);
  box-shadow: 0 2px 6px rgba(81, 76, 74, 0.08);
}

.card:hover {
  box-shadow: 0 4px 12px rgba(81, 76, 74, 0.12);
  transition: box-shadow 0.3s ease;
}

/* Navbar Brand Colors */
.navbar.bg-navbar-theme {
  background-color: var(--brand-light) !important;
  border-bottom: 1px solid rgba(81, 76, 74, 0.1);
}

/* Menu Theme Colors */
.menu.bg-menu-theme {
  background-color: var(--brand-light) !important;
  border-right: 1px solid rgba(81, 76, 74, 0.1);
}

/* Active Menu Item */
.menu-item.active > .menu-link {
  background-color: rgba(250, 188, 154, 0.15) !important;
  color: var(--brand-primary) !important;
  border-left: 3px solid var(--brand-primary);
}

.menu-link:hover {
  background-color: rgba(250, 188, 154, 0.08) !important;
  color: var(--brand-primary) !important;
}

/* Badge Colors */
.badge.bg-primary {
  background-color: var(--brand-primary) !important;
}

.badge.bg-success {
  background-color: var(--brand-secondary) !important;
  color: var(--brand-dark) !important;
}

.badge.bg-warning {
  background-color: var(--brand-secondary) !important;
  color: var(--brand-dark) !important;
}

.badge.bg-info {
  background-color: var(--brand-primary) !important;
  opacity: 0.8;
}

.badge.bg-danger {
  background-color: var(--brand-dark) !important;
}

/* Progress Bar Colors */
.progress-bar.bg-primary {
  background-color: var(--brand-primary) !important;
}

.progress-bar.bg-success {
  background-color: var(--brand-secondary) !important;
}

.progress-bar.bg-info {
  background-color: var(--brand-primary) !important;
  opacity: 0.7;
}

/* Dropdown Menu Styling */
.dropdown-menu {
  border-color: rgba(81, 76, 74, 0.1);
  box-shadow: 0 4px 12px rgba(81, 76, 74, 0.15);
}

.dropdown-item:hover,
.dropdown-item:focus {
  background-color: rgba(250, 188, 154, 0.1);
  color: var(--brand-primary);
}

/* Table Styling */
.table thead th {
  background-color: rgba(81, 76, 74, 0.05);
  color: var(--brand-dark);
  border-bottom: 2px solid rgba(81, 76, 74, 0.1);
}

.table tbody tr:hover {
  background-color: rgba(250, 188, 154, 0.05);
}

/* Divider Styling */
.dropdown-divider {
  border-color: rgba(81, 76, 74, 0.1);
}

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

.text-success {
  color: var(--brand-secondary) !important;
}

.text-danger {
  color: var(--brand-dark) !important;
}