/* ================================================
   AFRICLOUD Custom Styles
   ================================================ */

/* Brand Colors */
:root {
    --africloud-blue: #1e40af;
    --africloud-orange: #ea580c;
    --africloud-teal: #0d9488;
}

/* ================================================
   Knowledgebase Dark Mode Fixes
   ================================================ */

/* KB Hero Search Section gradient */
html.dark .bg-gradient-to-r {
    background: linear-gradient(to right, #1f2937, #111827) !important;
}

/* KB Category Cards */
html.dark .bg-white.rounded-xl,
html.dark a.group.block.bg-white,
html.dark a.block.bg-white {
    background-color: #1f2937 !important;
    border-color: #374151 !important;
}

html.dark a.group.block.bg-white:hover,
html.dark a.block.bg-white:hover {
    background-color: #374151 !important;
    border-color: #1e40af !important;
}

/* KB Category Card Icon Backgrounds */
html.dark .bg-blue-100,
html.dark .bg-blue-900\/50 {
    background-color: rgba(30, 64, 175, 0.3) !important;
}

html.dark .text-blue-600 {
    color: #60a5fa !important;
}

html.dark .text-blue-700 {
    color: #93c5fd !important;
}

html.dark .text-blue-400 {
    color: #60a5fa !important;
}

html.dark .text-blue-300 {
    color: #93c5fd !important;
}

/* KB Article Count Badge */
html.dark span.bg-blue-100,
html.dark span.bg-blue-900\/50 {
    background-color: rgba(30, 64, 175, 0.3) !important;
    color: #93c5fd !important;
}

/* KB Text Colors */
html.dark .text-gray-900 {
    color: #f9fafb !important;
}

html.dark .text-gray-500 {
    color: #9ca3af !important;
}

html.dark .text-gray-400 {
    color: #9ca3af !important;
}

html.dark .text-gray-300 {
    color: #d1d5db !important;
}

html.dark .text-white {
    color: #ffffff !important;
}

/* KB Popular Articles Section */
html.dark .bg-gray-50,
html.dark .bg-gray-700\/50 {
    background-color: #374151 !important;
}

html.dark .bg-gray-100,
html.dark .bg-gray-700 {
    background-color: #374151 !important;
}

html.dark .divide-gray-100 > * + *,
html.dark .divide-gray-700 > * + * {
    border-color: #374151 !important;
}

/* KB Article Icon */
html.dark i.text-gray-400,
html.dark i.text-gray-500 {
    color: #6b7280 !important;
}

/* KB Search Input */
html.dark input.bg-white,
html.dark input.dark\:bg-gray-700 {
    background-color: #374151 !important;
    color: #f9fafb !important;
    border-color: #4b5563 !important;
}

html.dark input::placeholder {
    color: #9ca3af !important;
}

/* KB Info/Empty State Box */
html.dark .bg-blue-50,
html.dark .bg-blue-900\/20 {
    background-color: rgba(30, 64, 175, 0.2) !important;
}

html.dark .border-blue-200,
html.dark .border-blue-800 {
    border-color: rgba(30, 64, 175, 0.4) !important;
}

/* KB Borders */
html.dark .border-gray-200,
html.dark .border-gray-700 {
    border-color: #374151 !important;
}

/* KB Hero Text */
html.dark .text-blue-100,
html.dark .dark\:text-gray-300 {
    color: #d1d5db !important;
}

/* Fix rounded cards in dark mode */
html.dark .rounded-xl.shadow-sm,
html.dark .rounded-xl.border {
    background-color: #1f2937;
    border-color: #374151 !important;
}

/* Hover states */
html.dark .hover\:bg-gray-50:hover,
html.dark .dark\:hover\:bg-gray-700\/50:hover {
    background-color: #374151 !important;
}

/* KB Article title hover */
html.dark .group-hover\:text-africloud-blue,
html.dark .dark\:group-hover\:text-blue-400 {
    color: #60a5fa !important;
}

/* ================================================
   Left Sidebar Dark Mode Fixes
   ================================================ */

/* Sidebar panels/cards */
html.dark .card-sidebar,
html.dark .sidebar .card,
html.dark .panel-sidebar,
html.dark aside .card,
html.dark .col-md-4 .card,
html.dark .col-lg-3 .card,
html.dark .sidebar-card {
    background-color: #1f2937 !important;
    border-color: #374151 !important;
}

/* Sidebar card headers */
html.dark .card-sidebar .card-header,
html.dark .sidebar .card-header,
html.dark aside .card-header,
html.dark .panel-sidebar .panel-heading {
    background-color: #374151 !important;
    border-color: #4b5563 !important;
    color: #f9fafb !important;
}

/* Sidebar card body */
html.dark .card-sidebar .card-body,
html.dark .sidebar .card-body,
html.dark aside .card-body {
    background-color: #1f2937 !important;
    color: #d1d5db !important;
}

/* Sidebar list items */
html.dark .card-sidebar .list-group-item,
html.dark .sidebar .list-group-item,
html.dark aside .list-group-item {
    background-color: #1f2937 !important;
    border-color: #374151 !important;
    color: #d1d5db !important;
}

html.dark .card-sidebar .list-group-item:hover,
html.dark .sidebar .list-group-item:hover,
html.dark aside .list-group-item:hover {
    background-color: #374151 !important;
    color: #f9fafb !important;
}

/* Sidebar badges */
html.dark .card-sidebar .badge,
html.dark .sidebar .badge,
html.dark aside .badge {
    background-color: #4b5563 !important;
    color: #f9fafb !important;
}

/* Sidebar links */
html.dark .card-sidebar a,
html.dark .sidebar a,
html.dark aside a:not(.btn) {
    color: #60a5fa !important;
}

html.dark .card-sidebar a:hover,
html.dark .sidebar a:hover,
html.dark aside a:hover:not(.btn) {
    color: #93c5fd !important;
}

/* Tag cloud specific */
html.dark .tag-cloud,
html.dark [class*="tag"] {
    color: #60a5fa !important;
}

/* Support menu items */
html.dark .sidebar-nav a,
html.dark .nav-sidebar a,
html.dark aside nav a {
    color: #d1d5db !important;
}

html.dark .sidebar-nav a:hover,
html.dark .nav-sidebar a:hover,
html.dark aside nav a:hover {
    color: #f9fafb !important;
    background-color: #374151 !important;
}

/* Fix any remaining white backgrounds in sidebar */
html.dark .bg-white,
html.dark .bg-light {
    background-color: #1f2937 !important;
}

/* Sidebar section headers/titles */
html.dark .sidebar h5,
html.dark .sidebar h6,
html.dark .sidebar .h5,
html.dark .sidebar .h6,
html.dark aside h5,
html.dark aside h6 {
    color: #f9fafb !important;
}

/* Icons in sidebar */
html.dark .sidebar i,
html.dark aside i {
    color: #9ca3af !important;
}

html.dark .sidebar a:hover i,
html.dark aside a:hover i {
    color: #60a5fa !important;
}

/* ================================================
   Sidebar Specific Dark Mode Fixes (Tailwind-style)
   ================================================ */

/* Main sidebar container with bg-white */
html.dark div[menuItemName].bg-white,
html.dark div.mb-4.bg-white,
html.dark .bg-white.rounded-lg,
html.dark .bg-white.shadow-sm {
    background-color: #1f2937 !important;
}

/* Sidebar header with bg-gray-50 */
html.dark .bg-gray-50 {
    background-color: #374151 !important;
}

/* Sidebar body */
html.dark .sidebar-card-body {
    background-color: #1f2937 !important;
}

/* Sidebar links text-gray-700 */
html.dark .text-gray-700 {
    color: #d1d5db !important;
}

/* Sidebar dividers */
html.dark .divide-gray-100 > *,
html.dark .divide-y > * {
    border-color: #374151 !important;
}

/* Sidebar badges bg-gray-100 */
html.dark span.bg-gray-100,
html.dark .bg-gray-100 {
    background-color: #4b5563 !important;
}

html.dark span.text-gray-600,
html.dark .text-gray-600 {
    color: #d1d5db !important;
}

/* Hover states */
html.dark .hover\:bg-gray-50:hover,
html.dark a[menuItemName]:hover {
    background-color: #374151 !important;
}

/* Select dropdowns in sidebar */
html.dark select.bg-white {
    background-color: #374151 !important;
    color: #f9fafb !important;
    border-color: #4b5563 !important;
}

/* Tag Cloud and Support sections */
html.dark div[menuItemName*="Tag"],
html.dark div[menuItemName*="Support"] {
    background-color: #1f2937 !important;
}

html.dark div[menuItemName*="Tag"] .bg-gray-50,
html.dark div[menuItemName*="Support"] .bg-gray-50 {
    background-color: #374151 !important;
}

/* ================================================
   Ultra-Specific Sidebar Dark Mode Overrides
   ================================================ */

/* Target ALL bg-white elements in dark mode with maximum specificity */
html.dark .mb-4.bg-white.rounded-lg.shadow-sm.border {
    background-color: #1f2937 !important;
    border-color: #374151 !important;
}

/* Sidebar containers by menuItemName attribute */
html.dark div[menuItemName="Support Knowledgebase Categories"],
html.dark div[menuItemName="Support Knowledgebase Tag Cloud"],
html.dark div[menuItemName="Support"],
html.dark div[menuItemName].mb-4 {
    background-color: #1f2937 !important;
    border-color: #374151 !important;
}

/* Mobile dropdown in sidebar */
html.dark .block.md\:hidden.mb-4.bg-white {
    background-color: #1f2937 !important;
}

/* Force all bg-white to dark in dark mode - nuclear option */
html.dark [class*="bg-white"]:not(.dark\:bg-gray-800) {
    background-color: #1f2937 !important;
}

/* All sidebar card headers (bg-gray-50) */
html.dark [class*="bg-gray-50"] {
    background-color: #374151 !important;
}

/* Sidebar body - sidebar-card-body class */
html.dark .sidebar-card-body {
    background-color: #1f2937 !important;
    color: #d1d5db !important;
}

/* Badge counters */
html.dark span[class*="bg-gray-100"] {
    background-color: #4b5563 !important;
    color: #f9fafb !important;
}

/* Links in sidebar */
html.dark div[menuItemName] a {
    color: #d1d5db !important;
}

html.dark div[menuItemName] a:hover {
    background-color: #374151 !important;
    color: #f9fafb !important;
}

/* Dividers inside sidebar cards */
html.dark div[menuItemName] [class*="divide-"] > * {
    border-color: #374151 !important;
}
/* ================================================
   Final Sidebar Dark Mode Fix - Direct Override
   ================================================ */

/* Override ALL bg-white in dark mode - no exclusions */
html.dark .bg-white {
    background-color: #1f2937 !important;
}

/* Specific sidebar panels */
html.dark div[menuItemName] {
    background-color: #1f2937 !important;
    border-color: #374151 !important;
}

/* Sidebar headers */
html.dark div[menuItemName] .bg-gray-50 {
    background-color: #374151 !important;
}

/* Sidebar body content */
html.dark .sidebar-card-body {
    background-color: #1f2937 !important;
}

/* ================================================
   Store/Product Cards Dark Mode
   ================================================ */

/* Product cards on store pages */
html.dark .product-card,
html.dark .card,
html.dark .panel,
html.dark .panel-default,
html.dark .panel-body,
html.dark .well {
    background-color: #1f2937 !important;
    border-color: #374151 !important;
    color: #d1d5db !important;
}

html.dark .panel-heading,
html.dark .card-header {
    background-color: #374151 !important;
    border-color: #4b5563 !important;
    color: #f9fafb !important;
}

html.dark .panel-footer,
html.dark .card-footer {
    background-color: #374151 !important;
    border-color: #4b5563 !important;
}

/* Store product boxes */
html.dark .product,
html.dark .product-box,
html.dark .pricing-table,
html.dark .price-box {
    background-color: #1f2937 !important;
    border-color: #374151 !important;
}

html.dark .product:hover,
html.dark .product-box:hover {
    border-color: #1e40af !important;
}

/* Product feature lists */
html.dark .product ul li,
html.dark .feature-list li {
    border-color: #374151 !important;
    color: #d1d5db !important;
}

/* ================================================
   Tables Dark Mode (Email History, etc.)
   ================================================ */

/* DataTables and standard tables */
html.dark table,
html.dark .table,
html.dark .dataTables_wrapper {
    background-color: #1f2937 !important;
    color: #d1d5db !important;
}

html.dark table thead,
html.dark .table thead,
html.dark table thead th,
html.dark .table thead th {
    background-color: #374151 !important;
    border-color: #4b5563 !important;
    color: #f9fafb !important;
}

html.dark table tbody tr,
html.dark .table tbody tr {
    background-color: #1f2937 !important;
    border-color: #374151 !important;
}

html.dark table tbody tr:nth-child(even),
html.dark .table-striped tbody tr:nth-child(even) {
    background-color: #111827 !important;
}

html.dark table tbody tr:hover,
html.dark .table-hover tbody tr:hover {
    background-color: #374151 !important;
}

html.dark table td,
html.dark .table td,
html.dark table th,
html.dark .table th {
    border-color: #374151 !important;
    color: #d1d5db !important;
}

/* DataTables controls */
html.dark .dataTables_length,
html.dark .dataTables_filter,
html.dark .dataTables_info,
html.dark .dataTables_paginate {
    color: #d1d5db !important;
}

html.dark .dataTables_length select,
html.dark .dataTables_filter input {
    background-color: #374151 !important;
    border-color: #4b5563 !important;
    color: #f9fafb !important;
}

/* Pagination */
html.dark .pagination > li > a,
html.dark .pagination > li > span,
html.dark .paginate_button {
    background-color: #1f2937 !important;
    border-color: #374151 !important;
    color: #d1d5db !important;
}

html.dark .pagination > li > a:hover,
html.dark .paginate_button:hover {
    background-color: #374151 !important;
    color: #f9fafb !important;
}

html.dark .pagination > .active > a,
html.dark .pagination > .active > span,
html.dark .paginate_button.current {
    background-color: #1e40af !important;
    border-color: #1e40af !important;
    color: #ffffff !important;
}

html.dark .pagination > .disabled > a,
html.dark .paginate_button.disabled {
    background-color: #111827 !important;
    color: #6b7280 !important;
}

/* ================================================
   View Ticket Page Dark Mode
   ================================================ */

/* Ticket container */
html.dark .ticket-container,
html.dark .ticket-content,
html.dark .ticket-reply,
html.dark .ticket-message {
    background-color: #1f2937 !important;
    border-color: #374151 !important;
}

/* Ticket replies/messages */
html.dark .ticket-reply-container,
html.dark .client-reply,
html.dark .staff-reply,
html.dark .message-box {
    background-color: #1f2937 !important;
    border-color: #374151 !important;
}

/* Ticket header info */
html.dark .ticket-info,
html.dark .ticket-details {
    background-color: #1f2937 !important;
    border-color: #374151 !important;
}

/* CC Recipients box */
html.dark .cc-recipients,
html.dark .ticket-cc {
    background-color: #1f2937 !important;
    border-color: #374151 !important;
}

/* ================================================
   Form Controls Dark Mode
   ================================================ */

/* All form inputs */
html.dark input[type="text"],
html.dark input[type="email"],
html.dark input[type="password"],
html.dark input[type="number"],
html.dark input[type="search"],
html.dark input[type="tel"],
html.dark input[type="url"],
html.dark textarea,
html.dark select,
html.dark .form-control {
    background-color: #374151 !important;
    border-color: #4b5563 !important;
    color: #f9fafb !important;
}

html.dark input::placeholder,
html.dark textarea::placeholder {
    color: #9ca3af !important;
}

html.dark input:focus,
html.dark textarea:focus,
html.dark select:focus,
html.dark .form-control:focus {
    border-color: #1e40af !important;
    box-shadow: 0 0 0 2px rgba(30, 64, 175, 0.2) !important;
}

/* Input groups */
html.dark .input-group-addon,
html.dark .input-group-text {
    background-color: #4b5563 !important;
    border-color: #4b5563 !important;
    color: #d1d5db !important;
}

/* ================================================
   Buttons Dark Mode
   ================================================ */

html.dark .btn-default,
html.dark .btn-secondary {
    background-color: #374151 !important;
    border-color: #4b5563 !important;
    color: #f9fafb !important;
}

html.dark .btn-default:hover,
html.dark .btn-secondary:hover {
    background-color: #4b5563 !important;
    border-color: #6b7280 !important;
}

/* ================================================
   Alerts and Messages Dark Mode
   ================================================ */

html.dark .alert {
    border-color: #374151 !important;
}

html.dark .alert-info {
    background-color: rgba(30, 64, 175, 0.2) !important;
    border-color: rgba(30, 64, 175, 0.4) !important;
    color: #93c5fd !important;
}

html.dark .alert-success {
    background-color: rgba(13, 148, 136, 0.2) !important;
    border-color: rgba(13, 148, 136, 0.4) !important;
    color: #5eead4 !important;
}

html.dark .alert-warning {
    background-color: rgba(234, 88, 12, 0.2) !important;
    border-color: rgba(234, 88, 12, 0.4) !important;
    color: #fdba74 !important;
}

html.dark .alert-danger {
    background-color: rgba(220, 38, 38, 0.2) !important;
    border-color: rgba(220, 38, 38, 0.4) !important;
    color: #fca5a5 !important;
}

/* ================================================
   Modal Dark Mode
   ================================================ */

html.dark .modal-content {
    background-color: #1f2937 !important;
    border-color: #374151 !important;
}

html.dark .modal-header {
    background-color: #374151 !important;
    border-color: #4b5563 !important;
}

html.dark .modal-header .close {
    color: #f9fafb !important;
}

html.dark .modal-body {
    background-color: #1f2937 !important;
    color: #d1d5db !important;
}

html.dark .modal-footer {
    background-color: #374151 !important;
    border-color: #4b5563 !important;
}

/* ================================================
   Dropdown Menus Dark Mode
   ================================================ */

html.dark .dropdown-menu {
    background-color: #1f2937 !important;
    border-color: #374151 !important;
}

html.dark .dropdown-menu > li > a,
html.dark .dropdown-item {
    color: #d1d5db !important;
}

html.dark .dropdown-menu > li > a:hover,
html.dark .dropdown-item:hover {
    background-color: #374151 !important;
    color: #f9fafb !important;
}

html.dark .dropdown-divider {
    border-color: #374151 !important;
}

/* ================================================
   Breadcrumb Dark Mode
   ================================================ */

html.dark .breadcrumb {
    background-color: transparent !important;
}

html.dark .breadcrumb > li,
html.dark .breadcrumb-item {
    color: #9ca3af !important;
}

html.dark .breadcrumb > li > a,
html.dark .breadcrumb-item > a {
    color: #60a5fa !important;
}

/* ================================================
   List Groups Dark Mode
   ================================================ */

html.dark .list-group-item {
    background-color: #1f2937 !important;
    border-color: #374151 !important;
    color: #d1d5db !important;
}

html.dark .list-group-item:hover {
    background-color: #374151 !important;
}

html.dark .list-group-item.active {
    background-color: #1e40af !important;
    border-color: #1e40af !important;
    color: #ffffff !important;
}

/* ================================================
   Nav Tabs Dark Mode
   ================================================ */

html.dark .nav-tabs {
    border-color: #374151 !important;
}

html.dark .nav-tabs > li > a,
html.dark .nav-link {
    color: #d1d5db !important;
    border-color: transparent !important;
}

html.dark .nav-tabs > li > a:hover,
html.dark .nav-link:hover {
    border-color: #374151 !important;
    background-color: #374151 !important;
}

html.dark .nav-tabs > li.active > a,
html.dark .nav-link.active {
    background-color: #1f2937 !important;
    border-color: #374151 #374151 #1f2937 !important;
    color: #f9fafb !important;
}

html.dark .tab-content {
    background-color: #1f2937 !important;
    border-color: #374151 !important;
}

/* ================================================
   Progress Bars Dark Mode
   ================================================ */

html.dark .progress {
    background-color: #374151 !important;
}

/* ================================================
   Misc Elements Dark Mode
   ================================================ */

/* Horizontal rules */
html.dark hr {
    border-color: #374151 !important;
}

/* Blockquotes */
html.dark blockquote {
    border-color: #374151 !important;
    color: #9ca3af !important;
}

/* Code blocks */
html.dark code,
html.dark pre {
    background-color: #111827 !important;
    border-color: #374151 !important;
    color: #f9fafb !important;
}

/* Labels and badges */
html.dark .label,
html.dark .badge {
    color: #f9fafb !important;
}

html.dark .label-default,
html.dark .badge-secondary {
    background-color: #4b5563 !important;
}

/* Tooltips */
html.dark .tooltip-inner {
    background-color: #374151 !important;
    color: #f9fafb !important;
}

/* Popovers */
html.dark .popover {
    background-color: #1f2937 !important;
    border-color: #374151 !important;
}

html.dark .popover-title {
    background-color: #374151 !important;
    border-color: #4b5563 !important;
}

html.dark .popover-content {
    color: #d1d5db !important;
}