/* Dark Mode for Customer Service Sections - Chat Bot & FAQs */
.dark-mode .faq-page,
.dark-mode .content__container {
  background: linear-gradient(135deg, #1a1a1a 0%, #222 100%) !important;
  color: #e9ecef !important;
}

/* ===== CHAT BOT DARK MODE ===== */
.dark-mode .content__container {
  background-color: #1a1a1a !important;
  border-color: #333 !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3) !important;
}

.dark-mode .bot-header__container {
  background-color: #222 !important;
  border-bottom-color: #333 !important;
}

.dark-mode .bot-header__title .p-name {
  color: #e9ecef !important;
}

.dark-mode .bot-header__title .p-intro {
  color: #adb5bd !important;
}

.dark-mode .bot-notice {
  background-color: #2d2416 !important;
  border-bottom-color: #4a3a1f !important;
}

.dark-mode .bot-notice__popup {
  color: #f5c77e !important;
}

.dark-mode .bot-body {
  background: linear-gradient(135deg, #1a1a1a 0%, #222 100%) !important;
  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.3) !important;
}

.dark-mode .bot-chat-content {
  background: transparent !important;
}

.dark-mode .bot-chat-item__bot-answer-content {
  background: linear-gradient(135deg, #2d2d2d 0%, #333 100%) !important;
  color: #e9ecef !important;
  border-left-color: #d9b69b !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

.dark-mode .bot-chat-item__user-question-content {
  background: linear-gradient(135deg, #d9b69b 0%, #bb9d87 100%) !important;
  color: white !important;
  box-shadow: 0 2px 8px rgba(217, 182, 155, 0.4) !important;
}

/* Self-service Items Dark Mode */
.dark-mode .selfservice-item {
  background: linear-gradient(145deg, #2d2d2d, #252525) !important;
  border-color: #3a3a3a !important;
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3) !important;
}

.dark-mode .selfservice-item:hover {
  background: linear-gradient(145deg, #333, #2a2a2a) !important;
  border-color: #d9b69b !important;
  box-shadow: 0 10px 30px rgba(217, 182, 155, 0.3) !important;
}

.dark-mode .selfservice-icon img {
  background: #333 !important;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3) !important;
}

.dark-mode .selfservice-txt {
  color: #e9ecef !important;
}

.dark-mode .selfservice-item:hover .selfservice-txt {
  color: #d9b69b !important;
}

.dark-mode .selfservice-btn {
  background: rgba(45, 45, 45, 0.98) !important;
  border-color: rgba(217, 182, 155, 0.4) !important;
  color: #d9b69b !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}

.dark-mode .selfservice-btn:hover:not(.selfservice-btn-disabled) {
  background: #333 !important;
  color: #bb9d87 !important;
}

.dark-mode .indicator {
  background: rgba(217, 182, 155, 0.4) !important;
}

.dark-mode .indicator.active {
  background: #d9b69b !important;
  border-color: #bb9d87 !important;
}

/* Tabs Dark Mode */
.dark-mode .nav-tabs {
  background: linear-gradient(135deg, #222 0%, #2d2d2d 100%) !important;
  border-bottom-color: #3a3a3a !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

.dark-mode .nav-tabs .nav-link {
  color: #adb5bd !important;
}

.dark-mode .nav-tabs .nav-link:hover {
  background: rgba(217, 182, 155, 0.15) !important;
  color: #d9b69b !important;
}

.dark-mode .nav-tabs .nav-link.active {
  background: linear-gradient(135deg, #d9b69b 0%, #bb9d87 100%) !important;
  color: white !important;
  border-color: #d9b69b !important;
}

.dark-mode .tab-content {
  background: #1a1a1a !important;
  border-color: #333 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

.dark-mode .tab-content .d-flex.align-items-center.border {
  background: linear-gradient(135deg, #222 0%, #2d2d2d 100%) !important;
  border-color: #3a3a3a !important;
  color: #e9ecef !important;
}

.dark-mode .tab-content .d-flex.align-items-center.border:hover {
  background: linear-gradient(135deg, #2d2d2d 0%, #333 100%) !important;
  border-color: #d9b69b !important;
  box-shadow: 0 4px 12px rgba(217, 182, 155, 0.25) !important;
}

/* Input Container Dark Mode */
.dark-mode .input-container {
  background: linear-gradient(135deg, #1a1a1a 0%, #222 100%) !important;
  border-top-color: #333 !important;
  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.3) !important;
}

.dark-mode .input-container .form-control {
  background: #2d2d2d !important;
  border-color: #3a3a3a !important;
  color: #e9ecef !important;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3) !important;
}

.dark-mode .input-container .form-control:focus {
  background-color: #333 !important;
  border-color: #d9b69b !important;
  color: #e9ecef !important;
  box-shadow: 0 0 0 3px rgba(217, 182, 155, 0.25) !important;
}

.dark-mode .input-container .form-control::placeholder {
  color: #6c757d !important;
}

.dark-mode .input-container .btn {
  background: linear-gradient(135deg, #d9b69b 0%, #bb9d87 100%) !important;
  color: white !important;
}

.dark-mode .input-container .btn:hover {
  background: linear-gradient(135deg, #bb9d87 0%, #a08670 100%) !important;
}

/* History Section Dark Mode */
.dark-mode .history-section {
  background-color: #222 !important;
  border-color: #3a3a3a !important;
}

.dark-mode .history-section h6 {
  color: #e9ecef !important;
}

.dark-mode .history-section .bot-timestamp {
  color: #adb5bd !important;
}

.dark-mode .text-danger {
  background: rgba(231, 76, 60, 0.2) !important;
}

.dark-mode .text-warning {
  background: rgba(243, 156, 18, 0.2) !important;
}

.dark-mode .text-yellow {
  background: rgba(241, 196, 15, 0.2) !important;
}

.dark-mode .text-secondary {
  background: rgba(149, 165, 166, 0.2) !important;
}

/* ===== FAQS DARK MODE ===== */
.dark-mode .faq-page {
  background: linear-gradient(135deg, #1a1a1a 0%, #222 100%) !important;
}

.dark-mode .faq-header {
  background: linear-gradient(135deg, #d9b69b 0%, #bb9d87 100%) !important;
}

.dark-mode .category-tabs {
  background: #222 !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
  border: 1px solid #3a3a3a !important;
}

.dark-mode .category-tab {
  border-color: #3a3a3a !important;
  color: #adb5bd !important;
}

.dark-mode .category-tab:hover {
  border-color: #d9b69b !important;
  color: #d9b69b !important;
  box-shadow: 0 4px 12px rgba(217, 182, 155, 0.25) !important;
}

.dark-mode .category-tab.active {
  background: linear-gradient(135deg, #d9b69b 0%, #bb9d87 100%) !important;
  color: white !important;
  border-color: #d9b69b !important;
}

.dark-mode .question-item {
  background: #222 !important;
  border-color: #3a3a3a !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
}

.dark-mode .question-item:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4) !important;
  border-color: #d9b69b !important;
}

.dark-mode .question-header {
  background: linear-gradient(135deg, #2d2d2d 0%, #333 100%) !important;
}

.dark-mode .question-text {
  color: #e9ecef !important;
}

.dark-mode .toggle-icon {
  background: #333 !important;
  color: #adb5bd !important;
}

.dark-mode .toggle-icon.rotated {
  background: #d9b69b !important;
  color: white !important;
}

.dark-mode .answer {
  background: #1a1a1a !important;
  border-top-color: #3a3a3a !important;
}

.dark-mode .answer-content {
  color: #adb5bd !important;
}

.dark-mode .answer-content p {
  color: #adb5bd !important;
}

.dark-mode .empty-state {
  color: #adb5bd !important;
}

.dark-mode .empty-state h3 {
  color: #e9ecef !important;
}

.dark-mode .empty-state p {
  color: #adb5bd !important;
}

.dark-mode .help-card {
  background: linear-gradient(135deg, #222 0%, #2d2d2d 100%) !important;
  border-color: #3a3a3a !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
}

.dark-mode .help-card::before {
  background: linear-gradient(90deg, #d9b69b 0%, #bb9d87 100%) !important;
}

.dark-mode .help-icon {
  color: #d9b69b !important;
}

.dark-mode .help-content h3 {
  color: #e9ecef !important;
}

.dark-mode .help-content p {
  color: #adb5bd !important;
}

.dark-mode .help-button {
  background: linear-gradient(135deg, #d9b69b 0%, #bb9d87 100%) !important;
  color: white !important;
}

.dark-mode .help-button:hover {
  background: linear-gradient(135deg, #bb9d87 0%, #a08670 100%) !important;
}

/* Additional Dark Mode Utilities */
.dark-mode .bot-timestamp {
  color: #6c757d !important;
}

.dark-mode a {
  color: #d9b69b !important;
}

.dark-mode p {
  color: #e9ecef !important;
}

/* Ensure all text elements are properly colored in dark mode */
.dark-mode .faq-page h1,
.dark-mode .faq-page h2,
.dark-mode .faq-page h3,
.dark-mode .faq-page h4,
.dark-mode .faq-page h5,
.dark-mode .faq-page h6,
.dark-mode .content__container h1,
.dark-mode .content__container h2,
.dark-mode .content__container h3,
.dark-mode .content__container h4,
.dark-mode .content__container h5,
.dark-mode .content__container h6 {
  color: #e9ecef !important;
}

/* Loading States */
.dark-mode .spinner-container {
  background-color: rgba(26, 26, 26, 0.8) !important;
}

.dark-mode .spinner .dot {
  background-color: #d9b69b !important;
}

/* Scrollbar Styling for Dark Mode */
.dark-mode ::-webkit-scrollbar {
  width: 8px;
}

.dark-mode ::-webkit-scrollbar-track {
  background: #1a1a1a;
}

.dark-mode ::-webkit-scrollbar-thumb {
  background: #3a3a3a;
  border-radius: 4px;
}

.dark-mode ::-webkit-scrollbar-thumb:hover {
  background: #d9b69b;
}