/* ============================================================
   OpenCore Theme CSS Override
   Comprehensive color palette and styling overrides
   Dark Navy: #1B243E
   Royal Blue: #0068FF (primary)
   Sky Blue: #04A2FB (info/secondary)
   Cyan: #00DAFB (highlights)
   ============================================================ */

:root {
  /* Primary colors */
  --bs-primary: #0068FF;
  --bs-info: #04A2FB;
  --bs-link-color: #0068FF;
  --bs-link-hover-color: #0055D4;

  /* Secondary colors */
  --bs-secondary: #04A2FB;
  --bs-success: #28a745;
  --bs-warning: #ffc107;
  --bs-danger: #dc3545;

  /* Dark/Light backgrounds */
  --bs-dark: #1B243E;
  --bs-body-bg: #F4F6FB;

  /* Custom theme colors */
  --theme-navy: #1B243E;
  --theme-royal-blue: #0068FF;
  --theme-sky-blue: #04A2FB;
  --theme-cyan: #00DAFB;
}

/* ============================================================
   BODY & PAGE BACKGROUNDS
   ============================================================ */

body {
  background-color: #F4F6FB !important;
  color: #1B243E;
}

/* ============================================================
   CSS CUSTOM PROPERTY OVERRIDES
   ============================================================ */

/* Bootstrap variables */
.btn-primary {
  --bs-btn-bg: #0068FF;
  --bs-btn-border-color: #0068FF;
  --bs-btn-hover-bg: #0055D4;
  --bs-btn-hover-border-color: #0055D4;
  --bs-btn-active-bg: #0055D4;
  --bs-btn-active-border-color: #0055D4;
  --bs-btn-focus-shadow-rgb: 0, 104, 255;
}

.btn-info {
  --bs-btn-bg: #04A2FB;
  --bs-btn-border-color: #04A2FB;
  --bs-btn-hover-bg: #0091E5;
  --bs-btn-hover-border-color: #0091E5;
}

.btn-outline-primary {
  --bs-btn-color: #0068FF;
  --bs-btn-border-color: #0068FF;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #0068FF;
  --bs-btn-hover-border-color: #0068FF;
  --bs-btn-focus-shadow-rgb: 0, 104, 255;
}

/* ============================================================
   SIDEBAR & MENU STYLING
   ============================================================ */

.bg-menu-theme,
.app-brand {
  background-color: #1B243E !important;
}

.menu-inner {
  background-color: #1B243E !important;
}

.menu-inner .menu-item {
  color: #9BA4B8;
}

.menu-inner .menu-item:hover {
  color: #E0E3EA;
  background-color: rgba(0, 104, 255, 0.1);
}

.menu-inner .menu-item.active {
  color: #fff !important;
  background-color: rgba(0, 104, 255, 0.15) !important;
  border-left: 3px solid #0068FF !important;
  padding-left: calc(1rem - 3px) !important;
}

.menu-inner .menu-item.active .menu-link {
  color: #fff !important;
  background-color: transparent;
}

.menu-inner .menu-link {
  color: inherit;
}

.menu-inner .menu-link.active {
  color: #fff !important;
}

.menu-inner .menu-item-title {
  color: #9BA4B8;
}

.menu-inner .menu-header {
  color: #B8BCC9;
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.02em;
}

.app-brand-link {
  color: #fff !important;
}

.app-brand-text {
  color: #fff !important;
}

/* Sidebar submenu styling */
.menu-inner .menu-sub {
  background-color: rgba(0, 0, 0, 0.1);
}

.menu-inner .menu-sub .menu-item {
  padding-left: 2.5rem;
}

.menu-inner .menu-sub .menu-item.active {
  background-color: rgba(0, 104, 255, 0.2);
  border-left: 3px solid #0068FF;
  padding-left: calc(2.5rem - 3px);
}

/* ============================================================
   BUTTONS
   ============================================================ */

.btn-primary {
  background-color: #0068FF !important;
  border-color: #0068FF !important;
  color: #fff !important;
  transition: all 0.2s ease;
}

.btn-primary:hover {
  background-color: #0055D4 !important;
  border-color: #0055D4 !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 104, 255, 0.3);
}

.btn-primary:active,
.btn-primary.active {
  background-color: #0055D4 !important;
  border-color: #0055D4 !important;
}

.btn-info {
  background-color: #04A2FB !important;
  border-color: #04A2FB !important;
  color: #fff !important;
  transition: all 0.2s ease;
}

.btn-info:hover {
  background-color: #0091E5 !important;
  border-color: #0091E5 !important;
  box-shadow: 0 4px 12px rgba(4, 162, 251, 0.3);
}

.btn-outline-primary {
  color: #0068FF !important;
  border-color: #0068FF !important;
  transition: all 0.2s ease;
}

.btn-outline-primary:hover {
  color: #fff !important;
  background-color: #0068FF !important;
  border-color: #0068FF !important;
}

.btn {
  transition: all 0.2s ease;
}

/* ============================================================
   BADGES
   ============================================================ */

.badge.bg-primary {
  background-color: #0068FF !important;
  color: #fff !important;
}

.badge.bg-info {
  background-color: #04A2FB !important;
  color: #fff !important;
}

.badge {
  font-weight: 500;
  letter-spacing: 0.3px;
}

/* ============================================================
   CARDS
   ============================================================ */

.card {
  border: none;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
  transition: all 0.2s ease;
  background-color: #fff;
}

.card:hover {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.card-header {
  background-color: #fff;
  border-bottom: 1px solid #E8EAED;
  border-radius: 12px 12px 0 0;
  padding: 1.25rem;
  font-weight: 600;
  color: #1B243E;
}

.card-body {
  padding: 1.25rem;
}

.card-title {
  color: #1B243E;
  font-weight: 600;
  margin-bottom: 0.75rem;
}

/* ============================================================
   TABLES
   ============================================================ */

.table thead {
  background-color: #F0F4F8;
}

.table thead th {
  color: #1B243E;
  font-weight: 600;
  border-color: #E8EAED;
  padding: 1rem;
}

.table-light thead th {
  background-color: #F0F4F8;
  color: #1B243E;
}

.table-light tbody tr:hover {
  background-color: #F0F8FF;
}

.table tbody tr {
  transition: background-color 0.2s ease;
}

.table tbody td {
  color: #555;
  border-color: #E8EAED;
  padding: 0.75rem 1rem;
}

.table-striped tbody tr:nth-of-type(odd) {
  background-color: #FAFBFC;
}

/* ============================================================
   LINKS
   ============================================================ */

a {
  color: #0068FF !important;
  text-decoration: none;
  transition: all 0.2s ease;
}

a:hover {
  color: #0055D4 !important;
  text-decoration: underline;
}

.nav-link {
  color: #1B243E;
  transition: all 0.2s ease;
}

.nav-link:hover,
.nav-link.active {
  color: #0068FF;
}

/* ============================================================
   PROGRESS BARS
   ============================================================ */

.progress {
  height: 0.5rem;
  background-color: #E8EAED;
  border-radius: 10px;
  overflow: hidden;
}

.progress-bar {
  background-color: #0068FF;
  transition: width 0.6s ease;
}

.progress-bar.bg-info {
  background-color: #04A2FB !important;
}

/* ============================================================
   NAV TABS & PILLS
   ============================================================ */

.nav-tabs {
  border-color: #E8EAED;
}

.nav-tabs .nav-link {
  color: #9BA4B8;
  border-color: transparent;
  transition: all 0.2s ease;
}

.nav-tabs .nav-link:hover {
  color: #0068FF;
  border-color: #E8EAED;
}

.nav-tabs .nav-link.active {
  color: #0068FF;
  background-color: #fff;
  border-color: #0068FF #0068FF #fff;
  border-bottom-color: #fff;
  font-weight: 600;
}

.nav-pills .nav-link {
  color: #1B243E;
  border-radius: 6px;
  transition: all 0.2s ease;
}

.nav-pills .nav-link:hover {
  background-color: rgba(0, 104, 255, 0.1);
  color: #0068FF;
}

.nav-pills .nav-link.active {
  background-color: #0068FF;
  color: #fff;
}

/* ============================================================
   FORM CONTROLS
   ============================================================ */

.form-control {
  border-color: #E8EAED;
  color: #1B243E;
  transition: all 0.2s ease;
}

.form-control:focus {
  border-color: #04A2FB;
  color: #1B243E;
  box-shadow: 0 0 0 0.2rem rgba(4, 162, 251, 0.25);
  outline: none;
}

.form-control::placeholder {
  color: #9BA4B8;
}

.form-select {
  border-color: #E8EAED;
  color: #1B243E;
}

.form-select:focus {
  border-color: #04A2FB;
  box-shadow: 0 0 0 0.2rem rgba(4, 162, 251, 0.25);
}

.form-check-input {
  border-color: #E8EAED;
}

.form-check-input:checked {
  background-color: #0068FF;
  border-color: #0068FF;
}

.form-check-input:focus {
  border-color: #04A2FB;
  box-shadow: 0 0 0 0.2rem rgba(4, 162, 251, 0.25);
}

/* ============================================================
   ALERTS
   ============================================================ */

.alert-primary {
  background-color: #F0F8FF;
  border-color: #04A2FB;
  color: #0068FF;
}

.alert-primary .alert-heading {
  color: #0068FF;
  font-weight: 600;
}

.alert-info {
  background-color: #F0F8FF;
  border-color: #04A2FB;
  color: #04A2FB;
}

/* ============================================================
   COLOR UTILITY CLASSES
   ============================================================ */

.bg-navy {
  background-color: #1B243E !important;
}

.bg-royal-blue {
  background-color: #0068FF !important;
}

.bg-sky-blue {
  background-color: #04A2FB !important;
}

.bg-cyan {
  background-color: #00DAFB !important;
}

.text-navy {
  color: #1B243E !important;
}

.text-royal-blue {
  color: #0068FF !important;
}

.text-sky-blue {
  color: #04A2FB !important;
}

.text-cyan {
  color: #00DAFB !important;
}

/* ============================================================
   MODALS
   ============================================================ */

.modal-content {
  border: none;
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
}

.modal-header {
  background-color: #fff;
  border-bottom: 1px solid #E8EAED;
  border-radius: 12px 12px 0 0;
}

.modal-header .btn-close {
  filter: invert(0.2);
}

.modal-title {
  color: #1B243E;
  font-weight: 600;
}

/* ============================================================
   DROPDOWNS
   ============================================================ */

.dropdown-menu {
  border: none;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  padding: 0.5rem 0;
}

.dropdown-item {
  color: #1B243E;
  padding: 0.5rem 1rem;
  transition: all 0.2s ease;
}

.dropdown-item:hover {
  background-color: #F0F8FF;
  color: #0068FF;
}

.dropdown-item.active,
.dropdown-item:active {
  background-color: #0068FF;
  color: #fff;
}

.dropdown-divider {
  border-color: #E8EAED;
}

/* ============================================================
   PAGINATION
   ============================================================ */

.pagination {
  gap: 0.25rem;
}

.page-link {
  color: #0068FF;
  border-color: #E8EAED;
  background-color: #fff;
  transition: all 0.2s ease;
}

.page-link:hover {
  color: #0055D4;
  background-color: #F0F8FF;
  border-color: #04A2FB;
}

.page-item.active .page-link {
  background-color: #0068FF;
  border-color: #0068FF;
  color: #fff;
}

.page-link:disabled {
  color: #9BA4B8;
  background-color: #F5F5F5;
  border-color: #E8EAED;
}

/* ============================================================
   BREADCRUMBS
   ============================================================ */

.breadcrumb {
  background-color: #F4F6FB;
  padding: 0.75rem 1rem;
  border-radius: 8px;
}

.breadcrumb-item.active {
  color: #1B243E;
  font-weight: 600;
}

.breadcrumb-item a {
  color: #0068FF;
}

.breadcrumb-item a:hover {
  color: #0055D4;
}

/* ============================================================
   LIST GROUPS
   ============================================================ */

.list-group-item {
  border-color: #E8EAED;
  color: #1B243E;
  transition: all 0.2s ease;
}

.list-group-item:hover {
  background-color: #F0F8FF;
}

.list-group-item.active {
  background-color: #0068FF;
  border-color: #0068FF;
  color: #fff;
}

/* ============================================================
   SCROLLBAR STYLING
   ============================================================ */

.sidebar-menu::-webkit-scrollbar,
.menu-inner::-webkit-scrollbar {
  width: 6px;
}

.sidebar-menu::-webkit-scrollbar-track,
.menu-inner::-webkit-scrollbar-track {
  background-color: transparent;
}

.sidebar-menu::-webkit-scrollbar-thumb,
.menu-inner::-webkit-scrollbar-thumb {
  background-color: #04A2FB;
  border-radius: 3px;
}

.sidebar-menu::-webkit-scrollbar-thumb:hover,
.menu-inner::-webkit-scrollbar-thumb:hover {
  background-color: #0091E5;
}

/* ============================================================
   SELECTION / HIGHLIGHT
   ============================================================ */

::selection {
  background-color: #0068FF;
  color: #fff;
}

::-moz-selection {
  background-color: #0068FF;
  color: #fff;
}

/* ============================================================
   BADGES & LABELS
   ============================================================ */

.label {
  background-color: #0068FF;
  color: #fff;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 500;
}

/* ============================================================
   SPINNERS & LOADERS
   ============================================================ */

.spinner-border {
  color: #0068FF;
}

.spinner-border.text-info {
  color: #04A2FB;
}

.spinner-grow {
  background-color: #0068FF;
}

/* ============================================================
   TOAST NOTIFICATIONS
   ============================================================ */

.toast {
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.toast-header {
  background-color: #fff;
  border-bottom: 1px solid #E8EAED;
}

/* ============================================================
   SMOOTH TRANSITIONS
   ============================================================ */

button,
.btn,
a,
.nav-link,
.card,
.dropdown-item,
.list-group-item,
input,
textarea,
select {
  transition: all 0.2s ease;
}

/* ============================================================
   DARK MODE SUPPORT
   ============================================================ */

@media (prefers-color-scheme: dark) {
  :root {
    --bs-body-bg: #1a1d2e;
    --bs-body-color: #E8EAED;
  }

  body {
    background-color: #1a1d2e !important;
    color: #E8EAED;
  }

  .card {
    background-color: #242a3f;
    color: #E8EAED;
  }

  .card:hover {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  }

  .card-header {
    background-color: #242a3f;
    border-bottom-color: #34394f;
    color: #E8EAED;
  }

  .form-control {
    background-color: #2d3245;
    color: #E8EAED;
    border-color: #34394f;
  }

  .form-control:focus {
    background-color: #2d3245;
    color: #E8EAED;
    border-color: #04A2FB;
  }

  .form-select {
    background-color: #2d3245;
    color: #E8EAED;
    border-color: #34394f;
  }

  .form-select:focus {
    background-color: #2d3245;
    color: #E8EAED;
    border-color: #04A2FB;
  }

  .table {
    color: #E8EAED;
  }

  .table thead th {
    background-color: #242a3f;
    color: #E8EAED;
    border-color: #34394f;
  }

  .table tbody tr {
    border-color: #34394f;
  }

  .table tbody td {
    border-color: #34394f;
  }

  .table-striped tbody tr:nth-of-type(odd) {
    background-color: #2d3245;
  }

  .table-light tbody tr:hover {
    background-color: #34394f;
  }

  .dropdown-menu {
    background-color: #242a3f;
    border-color: #34394f;
  }

  .dropdown-item {
    color: #E8EAED;
  }

  .dropdown-item:hover {
    background-color: #34394f;
    color: #04A2FB;
  }

  .dropdown-item.active {
    background-color: #0068FF;
  }

  .nav-tabs {
    border-color: #34394f;
  }

  .nav-tabs .nav-link {
    color: #9BA4B8;
  }

  .nav-tabs .nav-link.active {
    background-color: #242a3f;
    border-color: #34394f #34394f #242a3f;
    color: #04A2FB;
  }

  .modal-content {
    background-color: #242a3f;
    color: #E8EAED;
  }

  .modal-header {
    background-color: #242a3f;
    border-bottom-color: #34394f;
  }

  .modal-title {
    color: #E8EAED;
  }

  .alert-primary {
    background-color: rgba(0, 104, 255, 0.2);
    border-color: #0068FF;
    color: #04A2FB;
  }

  .breadcrumb {
    background-color: #242a3f;
  }

  .breadcrumb-item.active {
    color: #E8EAED;
  }

  .list-group-item {
    background-color: #242a3f;
    color: #E8EAED;
    border-color: #34394f;
  }

  .list-group-item:hover {
    background-color: #2d3245;
  }

  .list-group-item.active {
    background-color: #0068FF;
    border-color: #0068FF;
  }

  .page-link {
    background-color: #242a3f;
    border-color: #34394f;
    color: #04A2FB;
  }

  .page-link:hover {
    background-color: #2d3245;
    border-color: #04A2FB;
  }

  .page-item.active .page-link {
    background-color: #0068FF;
    border-color: #0068FF;
  }

  .page-link:disabled {
    background-color: #1a1d2e;
    border-color: #34394f;
    color: #555;
  }

  .btn-outline-primary {
    color: #04A2FB;
    border-color: #04A2FB;
  }

  .btn-outline-primary:hover {
    background-color: #0068FF;
    color: #fff;
  }

  .nav-link {
    color: #9BA4B8;
  }

  .nav-link:hover,
  .nav-link.active {
    color: #04A2FB;
  }

  a {
    color: #04A2FB !important;
  }

  a:hover {
    color: #00DAFB !important;
  }
}

/* ============================================================
   ANIMATIONS & TRANSITIONS
   ============================================================ */

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in {
  animation: slideIn 0.3s ease-out;
}

/* ============================================================
   UTILITY HELPERS
   ============================================================ */

.shadow-sm {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}

.shadow {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.rounded-12 {
  border-radius: 12px;
}

.text-muted {
  color: #9BA4B8 !important;
}

/* ============================================================
   END OF OPENCORE THEME CSS
   ============================================================ */