@charset "UTF-8";

:root {
  /* 🔧 Font Families */
  --default-font: "Inter", "Poppins", system-ui, sans-serif;
  --heading-font: "Poppins", sans-serif;
  --nav-font: "Inter", sans-serif;

  /* 🔵 Background (Main Page) */
  --background-color: #012D5A;

  /* 🟦 Card Backgrounds (Quadrant Tiles) */
  --surface-color: #0A3D72;

  /* ⚪ Primary Text */
  --text-color: #FFFFFF;
  --heading-color: #FFFFFF;

  /* ⚫ Secondary Text / Button Outline */
  --secondary-text-color: #B0BEC5;
  --outline-color: #B0BEC5;

  /* 🟨 Accent Color (Buttons, Icons, Highlights) */
  --accent-color: #FFD000;

  /* 🟧 Interactive Elements Hover Color */
  --accent-hover-color: #FFB300;

  /* Gradients */
  --primary-gradient: linear-gradient(90deg, #FFD000 0%, #FFB300 100%);
  --primary-gradient-hover: linear-gradient(90deg, #FFB300 0%, #FFD000 100%);

  /* Buttons */
  --default-btn-bg: var(--primary-gradient);
  --default-btn-text: #012D5A;
  --default-btn-hover-bg: var(--primary-gradient-hover);
  --default-btn-hover-text: #012D5A;
}

/* Base Styles */
body {
  font-family: var(--default-font);
  background-color: var(--background-color);
  color: var(--text-color);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--heading-font);
  color: var(--heading-color);
}

/* Button Styles */
.btn-primary {
  background: var(--default-btn-bg) !important;
  color: var(--default-btn-text) !important;
  border: none !important;
  font-weight: 500;
  padding: 0.5rem 1rem;
  border-radius: 0.375rem;
  transition: all 0.3s ease;
}

.btn-primary:hover {
  background: var(--default-btn-hover-bg) !important;
  color: var(--default-btn-hover-text) !important;
  transform: translateY(-1px);
}

.btn-outline-primary {
  color: var(--accent-color) !important;
  border: 2px solid var(--accent-color) !important;
  background: transparent !important;
  font-weight: 500;
  padding: 0.5rem 1rem;
  border-radius: 0.375rem;
  transition: all 0.3s ease;
}

.btn-outline-primary:hover {
  background-color: var(--accent-color) !important;
  color: var(--background-color) !important;
  transform: translateY(-1px);
}

/* Menu Styles */
.bg-menu-theme {
  background-color: var(--surface-color) !important;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.bg-menu-theme .menu-link {
  color: var(--text-color) !important;
  font-family: var(--nav-font);
  padding: 0.75rem 1rem;
  transition: all 0.3s ease;
}

.bg-menu-theme .menu-link:hover,
.bg-menu-theme .menu-link:focus {
  color: var(--accent-color) !important;
  background-color: rgba(255, 208, 0, 0.05);
}

.bg-menu-theme .menu-link.active {
  color: var(--accent-color) !important;
  background-color: rgba(255, 208, 0, 0.1) !important;
  font-weight: 500;
}

/* Navbar Styles */
.bg-navbar-theme {
  background-color: var(--surface-color) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.bg-navbar-theme .navbar-brand,
.bg-navbar-theme .navbar-nav > .nav-link {
  color: var(--text-color) !important;
  font-family: var(--nav-font);
  transition: all 0.3s ease;
}

.bg-navbar-theme .navbar-nav > .nav-link:hover,
.bg-navbar-theme .navbar-nav > .nav-link:focus {
  color: var(--accent-color) !important;
}

/* Footer Styles */
.bg-footer-theme {
  background-color: var(--surface-color) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.bg-footer-theme .footer-link {
  color: var(--text-color) !important;
  font-family: var(--nav-font);
  transition: all 0.3s ease;
}

.bg-footer-theme .footer-link:hover,
.bg-footer-theme .footer-link:focus {
  color: var(--accent-color) !important;
}

/* Card Styles */
.card {
  background-color: var(--surface-color);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0.5rem;
}

/* Form Styles */
.form-control {
  background-color: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text-color);
}

.form-control:focus {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: var(--accent-color);
  color: var(--text-color);
  box-shadow: 0 0 0 0.25rem rgba(255, 208, 0, 0.25);
}

/* Table Styles */
.table {
  color: var(--text-color);
}

.table thead th {
  background-color: rgba(255, 255, 255, 0.05);
  border-bottom: 2px solid rgba(255, 255, 255, 0.1);
}

.table td, .table th {
  border-color: rgba(255, 255, 255, 0.1);
}

/* Alert Styles */
.alert-primary {
  background-color: rgba(255, 208, 0, 0.1);
  border-color: var(--accent-color);
  color: var(--accent-color);
}

/* Badge Styles */
.badge-primary {
  background-color: var(--accent-color);
  color: var(--background-color);
}

/* Progress Bar Styles */
.progress {
  background-color: rgba(255, 255, 255, 0.1);
}

.progress-bar {
  background: var(--primary-gradient);
}

/* List Group Styles */
.list-group-item {
  background-color: var(--surface-color);
  border-color: rgba(255, 255, 255, 0.1);
  color: var(--text-color);
}

/* Modal Styles */
.modal-content {
  background-color: var(--surface-color);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.modal-header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.modal-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* Dropdown Styles */
.dropdown-menu {
  background-color: var(--surface-color);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.dropdown-item {
  color: var(--text-color);
}

.dropdown-item:hover {
  background-color: rgba(255, 208, 0, 0.1);
  color: var(--accent-color);
}

/* Pagination Styles */
.page-link {
  background-color: var(--surface-color);
  border-color: rgba(255, 255, 255, 0.1);
  color: var(--text-color);
}

.page-link:hover {
  background-color: rgba(255, 208, 0, 0.1);
  color: var(--accent-color);
}

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