:root {
  --primary-color: #5a8cb9;
  --dark-color: #1b272d;
  --charcoal: #2D424F;
  --eerie-black: #152024;
  --baby-powder: #F6F6F2;
  --paynes-gray: #456987;
  --battleship-gray: #8D9193;
}

body {
  color: var(--eerie-black);
  background-color: var(--baby-powder);
}

.bg-primary, .btn-primary, .navbar.bg-primary {
  background-color: var(--paynes-gray) !important;
  border-color: var(--paynes-gray) !important;
}

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

.text-muted {
  color: var(--battleship-gray) !important;
}

.navbar-brand, .navbar-nav .nav-link {
  color: var(--baby-powder) !important;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--charcoal) !important;
}

/* DataTables pagination styling */
.page-item.active .page-link {
  background-color: var(--paynes-gray) !important;
  border-color: var(--paynes-gray) !important;
}

.page-link {
  color: var(--paynes-gray);
}

.page-link:hover {
  color: var(--paynes-gray);
  background-color: rgba(69, 105, 135, 0.1);
}

/* Tour styling - Enhanced visibility */
.shepherd-overlay {
  background-color: rgba(0, 0, 0, 0.7) !important;
  backdrop-filter: blur(2px);
}

.shepherd-element {
  background-color: #f8f9fa !important;
  border-radius: 8px !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
  border: 2px solid var(--paynes-gray) !important;
  z-index: 10000 !important;
}

.shepherd-content {
  padding: 20px !important;
  border-radius: 6px !important;
  background-color: #f8f9fa !important;
}

.shepherd-text {
  color: var(--eerie-black) !important;
  font-size: 16px !important;
  line-height: 1.5 !important;
  margin-bottom: 15px !important;
}

.shepherd-button {
  background-color: var(--paynes-gray) !important;
  color: white !important;
  border: none !important;
  padding: 8px 16px !important;
  border-radius: 4px !important;
  margin: 0 5px !important;
  cursor: pointer !important;
  transition: background-color 0.2s ease !important;
}

.shepherd-button:hover {
  background-color: var(--charcoal) !important;
}

.shepherd-button.shepherd-button-secondary {
  background-color: var(--battleship-gray) !important;
}

.shepherd-button.shepherd-button-secondary:hover {
  background-color: var(--charcoal) !important;
}

/* Arrow styling - ensure visibility */
.shepherd-arrow {
  border-color: var(--paynes-gray) !important;
}

.shepherd-arrow::before {
  border-color: var(--paynes-gray) !important;
}

/* Specific arrow directions for better visibility */
.shepherd-element[data-popper-placement^="top"] .shepherd-arrow {
  border-bottom-color: var(--paynes-gray) !important;
}

.shepherd-element[data-popper-placement^="bottom"] .shepherd-arrow {
  border-top-color: var(--paynes-gray) !important;
}

.shepherd-element[data-popper-placement^="left"] .shepherd-arrow {
  border-right-color: var(--paynes-gray) !important;
}

.shepherd-element[data-popper-placement^="right"] .shepherd-arrow {
  border-left-color: var(--paynes-gray) !important;
}

/* Tutorial modal active item styling */
#supportTutorialsList .list-group-item.active {
  background-color: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
  color: white !important;
}

#supportTutorialsList .list-group-item.active .text-muted {
  color: rgba(255, 255, 255, 0.8) !important;
}

#supportTutorialsList .list-group-item:hover:not(.active) {
  background-color: rgba(90, 140, 185, 0.1);
  border-color: rgba(90, 140, 185, 0.3);
}

/* ==========================================
   MOBILE RESPONSIVENESS STYLES
   ========================================== */

/* Base mobile improvements for touch interfaces */
@media (max-width: 768px) {
  /* Touch-friendly button sizing */
  .btn {
    min-height: 44px;
    min-width: 44px;
  }
  
  .btn-sm {
    min-height: 40px;
    min-width: 40px;
    padding: 0.5rem 0.75rem;
  }
  
  /* Improve form input touch targets */
  .form-control,
  .form-select {
    min-height: 44px;
    font-size: 16px; /* Prevents zoom on iOS */
  }
  
  /* Container adjustments */
  .container {
    padding-left: 15px;
    padding-right: 15px;
  }
  
  /* Modal improvements */
  .modal-dialog {
    margin: 10px;
    max-width: calc(100% - 20px);
    max-height: calc(100vh - 20px);
  }
  
  .modal-dialog.modal-lg {
    max-width: calc(100% - 20px);
    max-height: calc(100vh - 20px);
  }
  
  .modal-content {
    max-height: calc(100vh - 20px);
    overflow-y: auto;
  }
  
  .modal-body {
    max-height: calc(100vh - 200px);
    overflow-y: auto;
    padding: 1rem;
  }
  
  /* Modal tabs responsiveness */
  .modal-body .nav-tabs {
    flex-wrap: wrap;
  }
  
  .modal-body .nav-tabs .nav-link {
    font-size: 0.875rem;
    padding: 0.5rem 0.75rem;
  }
  
  /* Navigation improvements */
  .navbar-nav .nav-link {
    padding: 1rem 0.75rem;
    text-align: center;
  }
  
  /* Credit badge adjustments */
  .credit-badge {
    margin: 0.5rem 0;
    text-align: center;
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  /* Table responsiveness improvements */
  .table-responsive {
    border: none;
  }
  
  .table th,
  .table td {
    padding: 0.5rem 0.25rem;
    font-size: 0.875rem;
    white-space: nowrap;
  }
  
  /* Footer adjustments */
  footer .d-flex {
    flex-direction: column;
    text-align: center;
  }
  
  footer .me-md-3 {
    margin-right: 0 !important;
    margin-bottom: 0.5rem;
  }
}

@media (max-width: 576px) {
  /* Extra small mobile adjustments */
  .container {
    padding-left: 10px;
    padding-right: 10px;
  }
  
  .btn {
    padding: 0.75rem 1rem;
    font-size: 0.9rem;
  }
  
  /* Navigation brand adjustment */
  .navbar-brand {
    font-size: 1.1rem;
  }
  
  .navbar-brand img {
    height: 28px !important;
    margin-right: 8px !important;
  }
  
  /* Modal full-width on very small screens */
  .modal-dialog {
    margin: 5px;
    max-width: calc(100% - 10px);
    max-height: calc(100vh - 10px);
  }
  
  .modal-content {
    max-height: calc(100vh - 10px);
  }
  
  .modal-body {
    max-height: calc(100vh - 150px);
    padding: 0.75rem;
  }
  
  /* Modal tabs on small screens */
  .modal-body .nav-tabs .nav-link {
    font-size: 0.8rem;
    padding: 0.4rem 0.6rem;
  }
  
  /* Table font size reduction */
  .table th,
  .table td {
    padding: 0.4rem 0.2rem;
    font-size: 0.75rem;
  }
  
  /* Credit badge stacking */
  .navbar-nav .nav-item.d-flex {
    justify-content: center;
    width: 100%;
  }
}