/* KeyTrack custom styles - University of Chicago color scheme */

:root {
  /* Primary Colors */
  --phoenix-maroon: #800000;
  --phoenix-maroon-dark: #600000;
  --phoenix-maroon-light: #9a0000;
  --light-greystone: #D9D9D9;
  --dark-greystone: #737373;
  --footer-grey: #404040;
  
  /* Secondary Accent Colors */
  --light-goldenrod: #F3D03E;
  --light-terracotta: #ECA154;
  --light-brick: #B46A55;
  --light-ivy: #A9C47F;
  --light-forest: #9CAF88;
  --light-lake: #3EB1C8;
  --light-violet: #86647A;

  /* Transparent Maroon Colors */
  --phoenix-maroon-90: rgba(128, 0, 0, 0.9);
  --phoenix-maroon-80: rgba(128, 0, 0, 0.8);
  --phoenix-maroon-70: rgba(128, 0, 0, 0.7);
  --phoenix-maroon-60: rgba(128, 0, 0, 0.6);
  --phoenix-maroon-50: rgba(128, 0, 0, 0.5);
  --phoenix-maroon-40: rgba(128, 0, 0, 0.4);
  --phoenix-maroon-30: rgba(128, 0, 0, 0.3);
  --phoenix-maroon-20: rgba(128, 0, 0, 0.2);
  --phoenix-maroon-10: rgba(128, 0, 0, 0.1);
  
  --phoenix-maroon-light-80: rgba(154, 0, 0, 0.8);
  --phoenix-maroon-light-60: rgba(154, 0, 0, 0.6);
  --phoenix-maroon-light-40: rgba(154, 0, 0, 0.4);
  --phoenix-maroon-light-20: rgba(154, 0, 0, 0.2);
  
  --phoenix-maroon-dark-80: rgba(96, 0, 0, 0.8);
  --phoenix-maroon-dark-60: rgba(96, 0, 0, 0.6);
  --phoenix-maroon-dark-40: rgba(96, 0, 0, 0.4);
  --phoenix-maroon-dark-20: rgba(96, 0, 0, 0.2);
}

/* Sticky footer styles */
html, body {
  height: 100%;
}

body {
  background-color: #f8f8f8;
  color: var(--dark-greystone);
  display: flex;
  flex-direction: column;
}

.content-wrapper {
  flex: 1 0 auto;
  min-height: 80vh;
}

footer {
  flex-shrink: 0;
  width: 100%;
}

/* Sidebar styling */
.sidebar {
  background-color: var(--phoenix-maroon) !important;
  color: white;
  min-height: 100vh;
}

.sidebar .nav-link {
  color: white;
  opacity: 0.85;
  transition: all 0.2s ease;
}

.sidebar .nav-link:hover {
  opacity: 1;
  background-color: rgba(255, 255, 255, 0.1);
}

.sidebar .nav-link.active {
  color: white !important;
  background-color: rgba(255, 255, 255, 0.2);
  border-left: 4px solid var(--light-goldenrod);
  font-weight: 600;
  opacity: 1;
}

.sidebar h3 {
  color: white !important;
}

/* Override Bootstrap primary color with phoenix maroon */
.text-primary {
  color: var(--phoenix-maroon-80) !important;
}

.bg-primary {
  background-color: var(--phoenix-maroon-90) !important;
}

/* Button styles */
.btn-primary {
  background-color: var(--phoenix-maroon-80) !important;
  border-color: var(--phoenix-maroon-90) !important;
}

.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
  background-color: var(--phoenix-maroon-dark-80) !important;
  border-color: var(--phoenix-maroon-dark) !important;
}

.btn-outline-primary {
  color: var(--phoenix-maroon-80) !important;
  border-color: var(--phoenix-maroon-80) !important;
}

.btn-outline-primary:hover, .btn-outline-primary:focus, .btn-outline-primary:active {
  background-color: var(--phoenix-maroon-70) !important;
  color: white !important;
}

/* Override Bootstrap standard button colors with UChicago colors */
.btn-success {
  background-color: var(--light-ivy) !important;
  border-color: var(--light-ivy) !important;
  color: var(--footer-grey) !important;
}

.btn-success:hover, .btn-success:focus, .btn-success:active {
  background-color: var(--light-forest) !important;
  border-color: var (--light-forest) !important;
  color: var(--footer-grey) !important;
}

.btn-danger {
  background-color: var(--phoenix-maroon-light-80) !important;
  border-color: var(--phoenix-maroon-light) !important;
}

.btn-danger:hover, .btn-danger:focus, .btn-danger:active {
  background-color: var(--phoenix-maroon-80) !important;
  border-color: var(--phoenix-maroon) !important;
}

.btn-warning {
  background-color: var(--light-goldenrod) !important;
  border-color: var(--light-goldenrod) !important;
  color: var(--footer-grey) !important;
}

.btn-warning:hover, .btn-warning:focus, .btn-warning:active {
  background-color: var(--light-terracotta) !important;
  border-color: var(--light-terracotta) !important;
  color: var(--footer-grey) !important;
}

.btn-secondary {
  background-color: var(--dark-greystone) !important;
  border-color: var(--dark-greystone) !important;
}

.btn-secondary:hover, .btn-secondary:focus, .btn-secondary:active {
  background-color: var(--footer-grey) !important;
  border-color: var(--footer-grey) !important;
}

.btn-info {
  background-color: var(--light-lake) !important;
  border-color: var(--light-lake) !important;
}

.btn-info:hover, .btn-info:focus, .btn-info:active {
  background-color: var(--light-violet) !important;
  border-color: var(--light-violet) !important;
}

/* Secondary accent button styles */
.btn-accent-gold {
  background-color: var(--light-goldenrod) !important;
  border-color: var(--light-goldenrod) !important;
  color: var(--footer-grey) !important;
}

.btn-accent-lake {
  background-color: var(--light-lake) !important;
  border-color: var(--light-lake) !important;
  color: white !important;
}

/* Badge styles */
.bg-maroon {
  background-color: var(--phoenix-maroon-80) !important;
  color: white !important;
}

.bg-gold {
  background-color: var(--light-goldenrod) !important;
  color: var(--footer-grey) !important;
}

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

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

/* Override Bootstrap standard badge colors with UChicago colors */
.bg-primary {
  background-color: var(--phoenix-maroon-80) !important;
  color: white !important;
}

.bg-success {
  background-color: var(--light-ivy) !important;
  color: var(--footer-grey) !important;
}

.bg-danger {
  background-color: var(--phoenix-maroon-light-80) !important;
  color: white !important;
}

.bg-warning {
  background-color: var(--light-goldenrod) !important;
  color: var(--footer-grey) !important;
}

.bg-info {
  background-color: var(--light-lake) !important;
  color: white !important;
}

.bg-secondary {
  background-color: var(--dark-greystone) !important;
  color: white !important;
}

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

.text-danger {
  color: var(--phoenix-maroon-80) !important;
}

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

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

/* Card styling */
.card {
  border: none;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  border-radius: 8px;
}

.card-header {
  background-color: white;
  border-bottom: 2px solid var(--light-greystone);
  font-weight: 600;
}

/* Override standard card header background colors */
.card-header.bg-primary {
  background-color: var(--phoenix-maroon-80) !important;
  color: white !important;
  border-bottom: none;
}

.card-header.bg-success {
  background-color: var(--light-ivy) !important;
  color: var(--footer-grey) !important;
  border-bottom: none;
}

.card-header.bg-danger {
  background-color: var(--phoenix-maroon-light-60) !important;
  color: white !important;
  border-bottom: none;
}

.card-header.bg-warning {
  background-color: var(--light-goldenrod) !important;
  color: var(--footer-grey) !important;
  border-bottom: none;
}

.card-header.bg-info {
  background-color: var(--light-lake) !important;
  color: white !important;
  border-bottom: none;
}

.card-header.bg-light {
  background-color: var(--light-greystone) !important;
  color: var(--dark-greystone) !important;
}

/* Table styling */
.table thead th {
  border-bottom: 2px solid var(--phoenix-maroon-60);
  color: var(--phoenix-maroon-80);
}

/* Form controls */
.form-control:focus, .form-select:focus {
  border-color: var(--phoenix-maroon-60);
  box-shadow: 0 0 0 0.25rem var(--phoenix-maroon-20);
}

/* Chart container height */
.chart-container {
  height: 300px;
}

/* Student suggestion styles */
.suggestion-item {
  padding: 8px 12px;
  transition: background-color 0.2s ease;
}

.suggestion-item:hover {
  background-color: var(--light-greystone);
}

.suggestion-item.active {
  background-color: var(--phoenix-maroon-60);
  color: white;
}

.suggestion-item:not(:last-child) {
  border-bottom: 1px solid #e9ecef;
}

/* Add a slight fade effect on the suggestions */
#studentSuggestions {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  border-radius: 0.25rem;
  border: 1px solid #dee2e6;
}

/* Footer styling */
footer {
  background-color: var(--footer-grey);
  color: white;
  padding: 1.5rem 0;
  flex-shrink: 0;
  width: 100%;
}

/* Alerts with UChicago colors */
.alert-maroon {
  background-color: var(--phoenix-maroon-10);
  border-color: var(--phoenix-maroon-50);
  color: var(--phoenix-maroon-80);
}

.alert-gold {
  background-color: rgba(243, 208, 62, 0.1);
  border-color: var(--light-goldenrod);
  color: #856404;
}

/* Override Bootstrap alerts with UChicago colors */
.alert-success {
  background-color: rgba(169, 196, 127, 0.1) !important;
  border-color: var(--light-ivy) !important;
  color: var(--light-forest) !important;
}

.alert-danger {
  background-color: var(--phoenix-maroon-10) !important;
  border-color: var(--phoenix-maroon-40) !important;
  color: var(--phoenix-maroon-80) !important;
}

.alert-warning {
  background-color: rgba(243, 208, 62, 0.1) !important;
  border-color: var(--light-goldenrod) !important;
  color: var(--light-terracotta) !important;
}

.alert-info {
  background-color: rgba(62, 177, 200, 0.1) !important;
  border-color: var(--light-lake) !important;
  color: var (--light-lake) !important;
}

/* Status indicators */
.status-available {
  color: var(--light-ivy);
}

.status-borrowed {
  color: var(--light-terracotta);
}

.status-lost {
  color: var(--phoenix-maroon-80);
}

/* Override text-muted to use the UChicago dark greystone */
.text-muted {
  color: var(--dark-greystone) !important;
}