/* Custom Navy Blue and White Theme for YourWord */

/* Override Tailwind's indigo colors with navy blue #001831 */
:root {
  --tw-color-indigo-50: rgba(0, 24, 49, 0.05);
  --tw-color-indigo-100: rgba(0, 24, 49, 0.1);
  --tw-color-indigo-200: rgba(0, 24, 49, 0.2);
  --tw-color-indigo-300: rgba(0, 24, 49, 0.3);
  --tw-color-indigo-400: rgba(0, 24, 49, 0.4);
  --tw-color-indigo-500: rgba(0, 24, 49, 0.6);
  --tw-color-indigo-600: #001831;
  --tw-color-indigo-700: #001429;
  --tw-color-indigo-800: #001020;
  --tw-color-indigo-900: #000c18;
  
  /* Primary color variables */
  --primary-color: #001831;
  --primary-light: rgba(0, 24, 49, 0.1);
  --primary-dark: #000c18;
  --text-on-primary: #ffffff;
}

/* Navy icon styling for consistent theme */
.navy-icon {
  color: #001831 !important;
}

/* Normal mode icon styling */
svg[style*="#001831"] {
  color: #001831 !important;
}

/* Primary color backgrounds with navy blue */
.bg-indigo-600,
.bg-indigo-800,
.bg-primary {
  background-color: #001831 !important;
  color: #ffffff !important;
}

.bg-indigo-700 {
  background-color: #001429 !important;
  color: #ffffff !important;
}

.bg-indigo-900 {
  background-color: #000c18 !important;
  color: #ffffff !important;
}

/* Light backgrounds with navy blue tint */
.bg-indigo-50 {
  background-color: rgba(0, 24, 49, 0.05) !important;
  color: #ffffff !important;
}

.bg-indigo-100 {
  background-color: rgba(0, 24, 49, 0.1) !important;
 
}

/* Text colors */
.text-indigo-600,
.text-indigo-800,
.text-primary {
  color: #001831 !important;
}

.text-white-on-primary {
  color: #ffffff !important;
}

/* Border colors */
.border-indigo-100 {
  border-color: rgba(0, 24, 49, 0.1) !important;
}

.border-indigo-700 {
  border-color: #001429 !important;
}

.border-primary {
  border-color: #001831 !important;
}

/* Hover states */
.hover\:bg-indigo-700:hover {
  background-color: #001429 !important;
  color: #ffffff !important;
}

.hover\:bg-indigo-200:hover {
  background-color: rgba(0, 24, 49, 0.2) !important;
}

.hover\:text-indigo-600:hover {
  color: #001831 !important;
}

/* Button styling */
button.bg-indigo-600,
.btn-primary {
  background-color: #001831 !important;
  color: #ffffff !important;
  border-color: #001831 !important;
}

button.bg-indigo-600:hover,
.btn-primary:hover {
  background-color: #001429 !important;
  color: #ffffff !important;
}

/* White backgrounds where needed */
.bg-white {
  background-color: #ffffff !important;
  color: #001831 !important;
}

/* Override specific elements with navy blue theme */
#versesContainerLocal .verse-num,
.strong-num,
.strongs-tooltip h4,
.markdown-content a {
  color: #ffffff !important;
} 

.strong-num:hover {
  background-color: rgba(0, 24, 49, 0.2) !important;
  color: #001831 !important;
}

/* Header styling */
header.bg-indigo-800 {
  background-color: #001831 !important;
  color: #ffffff !important;
}

/* Navigation and sidebar elements */
.sidebar {
  background-color: #ffffff !important;
  color: #001831 !important;
}

/* Chat message styling */
.bg-indigo-50 {
  background-color: rgba(0, 24, 49, 0.05) !important;
  border-color: rgba(0, 24, 49, 0.1) !important;
}

/* Form elements */
input:focus,
textarea:focus,
select:focus {
  border-color: #000000 !important;
  box-shadow: 0 0 0 1px #ffffff !important;
}

/* Modal and overlay backgrounds */
.modal-content {
  background-color: #ffffff !important;
  color: #001831 !important;
}

/* Tab navigation */
.mobile-tab-button.active {
  color: #001831 !important;
}

.mobile-tab-button:hover {
  color: #001831 !important;
}


/* Session items */
.session-item.active {
  background-color: rgba(0, 24, 49, 0.1) !important;
  color: #001831 !important;
}

.session-icon {
  background-color: #001831 !important;
  color: #ffffff !important;
}

/* Links and interactive elements */
a {
  /*color: #001831 !important;*/
  color:#0f75e3 !important;
}

a:hover {
  color: #001429 !important;
}

/* Challenge modal and components */
.challenge-btn.bg-gradient-to-r {
  background: linear-gradient(to right, #001831, #001429) !important;
  color: #ffffff !important;
}

.challenge-btn:hover {
  background: #001429 !important;
  color: #ffffff !important;
}

/* Audio visualization */
#audioBall {
  background-color: #001831 !important;
}

/* Progress bars and indicators */
.bg-blue-500,
.bg-blue-600 {
  background-color: #001831 !important;
}

/* Typography enhancements for readability */
.text-gray-700 {
  color: #374151 !important;
}

.text-gray-600 {
  color: #4b5563 !important;
}

/* Ensure white text on navy backgrounds */
.bg-indigo-600 *,
.bg-indigo-700 *,
.bg-indigo-800 *,
.bg-primary * {
  color: #ffffff !important;
}

/* Exception for specific elements that should maintain their color */
.bg-indigo-600 .text-amber-400,
.bg-indigo-700 .text-amber-400,
.bg-indigo-800 .text-amber-400,
.bg-primary .text-amber-400 {
  color: #fbbf24 !important;
}

/* Scrollbar styling */
::-webkit-scrollbar-thumb {
  background-color: #001831 !important;
}

::-webkit-scrollbar-thumb:hover {
  background-color: #001429 !important;
}

/* Success and status colors remain functional */
.bg-green-600 {
  background-color: #059669 !important;
  color: #ffffff !important;
}

.bg-red-500,
.bg-red-600 {
  background-color: #dc2626 !important;
  color: #ffffff !important;
}

.bg-amber-600,
.bg-yellow-500 {
  background-color: #d97706 !important;
  color: #ffffff !important;
}

/* Ensure proper contrast for readability */
.text-sm,
.text-xs {
  font-weight: 500;
}

/* White on navy theme for dropdowns */
.bg-white\/10 {
  background-color: rgba(255, 255, 255, 0.1) !important;
  color: #ffffff !important;
}

.bg-white\/20 {
  background-color: rgba(255, 255, 255, 0.2) !important;
  color: #ffffff !important;
}