/* Dark Mode CSS for KhaozBot2 Dashboard */
:root {
    /* Dark mode color scheme overrides */
    --primary-gradient: linear-gradient(135deg, #4a5568 0%, #2d3748 100%);
    --secondary-gradient: linear-gradient(135deg, #805ad5 0%, #553c9a 100%);
    --success-gradient: linear-gradient(135deg, #38b2ac 0%, #319795 100%);
    --warning-gradient: linear-gradient(135deg, #ed8936 0%, #dd6b20 100%);
    --dark-gradient: linear-gradient(135deg, #1a202c 0%, #171923 100%);
    --card-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    --card-shadow-hover: 0 20px 40px rgba(0, 0, 0, 0.4);
    
    /* Dark mode specific variables */
    --bg-primary: #1a202c;
    --bg-secondary: #2d3748;
    --bg-tertiary: #4a5568;
    --text-primary: #f7fafc;
    --text-secondary: #e2e8f0;
    --text-muted: #a0aec0;
    --border-color: #4a5568;
    --card-bg: rgba(45, 55, 72, 0.9);
}

* {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

body {
    background: linear-gradient(135deg, #1a202c 0%, #2d3748 100%);
    color: var(--text-primary);
    min-height: 100vh;
    line-height: 1.6;
}

/* Dark mode overrides for components */

/* Navbar dark mode - Keep purple gradient, only override other elements */
.navbar {
    border-bottom: 1px solid var(--border-color);
}

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

.dropdown-menu {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
}

.dropdown-item {
    color: var(--text-secondary) !important;
}

.dropdown-item:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary) !important;
}

.dropdown-divider {
    border-color: var(--border-color);
}

/* Cards dark mode */
.card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
}

.card-header {
    background: var(--primary-gradient);
    border-bottom: 1px solid var(--border-color);
    color: var(--text-primary);
}

.card-body {
    background: var(--card-bg);
}

/* Text colors */
.text-muted {
    color: var(--text-muted) !important;
}

.text-secondary {
    color: var(--text-secondary) !important;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--text-primary);
}

p {
    color: var(--text-secondary);
}

/* Hero section dark mode */
.hero-section {
    background: var(--purple-dark);
}

/* Buttons dark mode - Keep purple buttons consistent, only override other button types */
.btn-outline-primary {
    border-color: #7c3aed;
    color: #a78bfa;
}

.btn-outline-primary:hover {
    background: var(--purple-primary);
    border-color: transparent;
    color: white;
}

.btn-outline-secondary {
    border-color: #6366f1;
    color: #818cf8;
}

.btn-outline-secondary:hover {
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    border-color: transparent;
    color: white;
}

/* Nav pills dark mode */
.nav-pills .nav-link {
    background: var(--bg-secondary);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
}

.nav-pills .nav-link.active {
    background: var(--primary-gradient);
    color: var(--text-primary);
}

.nav-pills .nav-link:hover:not(.active) {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

/* Guild cards dark mode */
.guild-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
}

.guild-card:hover {
    border-color: var(--text-muted);
    background: var(--bg-secondary);
}

/* Group selection cards dark mode */
.group-selection-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
}

.group-selection-card:hover {
    border-color: var(--text-muted);
    background: var(--bg-secondary);
}

.group-name {
    color: var(--text-primary);
}

.group-selection-card:hover .group-name {
    color: var(--text-primary);
}

.group-arrow {
    color: var(--text-muted);
}

.group-selection-card:hover .group-arrow {
    color: var(--text-primary);
}

/* Badges dark mode */
.badge.bg-primary {
    background: var(--primary-gradient) !important;
}

.badge.bg-success {
    background: var(--success-gradient) !important;
}

.badge.bg-info {
    background: var(--secondary-gradient) !important;
}

.badge.bg-warning {
    background: var(--warning-gradient) !important;
}

/* Item bubbles dark mode */
.tracked-item-bubble {
    background: var(--card-bg);
    border-color: var(--success-gradient);
    color: var(--text-primary);
}

.tracked-item-bubble:hover {
    background: var(--bg-secondary);
}

.untracked-item-bubble {
    background: var(--card-bg);
    border-color: var(--border-color);
    color: var(--text-primary);
}

.untracked-item-bubble:hover {
    background: var(--bg-secondary);
    border-color: var(--warning-gradient);
}

.item-name, .untracked-item-name {
    color: var(--text-primary);
}

.tracked-item-bubble:hover .item-name,
.untracked-item-bubble:hover .untracked-item-name {
    color: var(--text-primary);
}

.untracked-item-value {
    color: var(--success-gradient);
}

/* Drop zones dark mode */
.drop-zone.drag-over {
    background: rgba(74, 85, 104, 0.2);
    border-color: var(--primary-gradient);
}

.drop-indicator {
    background: var(--primary-gradient);
    color: var(--text-primary);
}

/* Alerts dark mode */
.alert-info {
    background: rgba(79, 172, 254, 0.1);
    border-left: 4px solid var(--success-gradient);
    color: var(--text-secondary);
}

.alert-warning {
    background: rgba(237, 137, 54, 0.1);
    border-left: 4px solid var(--warning-gradient);
    color: var(--text-secondary);
}

.alert-success {
    background: rgba(56, 178, 172, 0.1);
    border-left: 4px solid var(--success-gradient);
    color: var(--text-primary);
}

.alert-danger {
    background: rgba(245, 101, 101, 0.1);
    border-left: 4px solid #f56565;
    color: var(--text-primary);
}

/* Scrollbar dark mode */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg-secondary);
}

::-webkit-scrollbar-thumb {
    background: var(--primary-gradient);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--secondary-gradient);
}

/* Footer dark mode */
footer {
    background: var(--dark-gradient);
    color: var(--text-primary);
}

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

/* Form controls dark mode */
.form-control {
    background: var(--bg-secondary);
    border-color: var(--border-color);
    color: var(--text-primary);
}

.form-control:focus {
    background: var(--bg-secondary);
    border-color: var(--primary-gradient);
    color: var(--text-primary);
    box-shadow: 0 0 0 0.2rem rgba(74, 85, 104, 0.25);
}

.form-control::placeholder {
    color: var(--text-muted);
}

/* Statistics cards dark mode */
.stat-number {
    color: var(--text-primary);
}

.stat-label {
    color: var(--text-muted);
}

/* Empty state dark mode */
.text-center h5 {
    color: var(--text-muted);
}

/* Bootstrap overrides for dark mode */
.bg-light {
    background: var(--bg-secondary) !important;
}

.bg-secondary {
    background: var(--bg-tertiary) !important;
}

.border {
    border-color: var(--border-color) !important;
}

/* Tab content dark mode */
.tab-content {
    color: var(--text-primary);
}

/* List group dark mode */
.list-unstyled li {
    color: var(--text-secondary);
}

.list-group-item {
    background: var(--card-bg);
    border-color: var(--border-color);
    color: var(--text-primary);
}

/* Small text dark mode */
.small {
    color: var(--text-muted);
}

/* Lead text dark mode */
.lead {
    color: var(--text-secondary);
}

/* Display text dark mode */
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
    color: var(--text-primary);
}

/* Table dark mode */
.table {
    color: var(--text-primary);
}

.table-dark {
    background: var(--bg-secondary);
    border-color: var(--border-color);
}

/* Modal dark mode */
.modal-content {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
}

.modal-header {
    border-bottom-color: var(--border-color);
}

.modal-footer {
    border-top-color: var(--border-color);
}

/* Breadcrumb dark mode */
.breadcrumb {
    background: var(--bg-secondary);
}

.breadcrumb-item a {
    color: var(--text-secondary);
}

.breadcrumb-item.active {
    color: var(--text-muted);
}

/* Progress bar dark mode */
.progress {
    background: var(--bg-secondary);
}

.progress-bar {
    background: var(--primary-gradient);
}

/* Pagination dark mode */
.page-link {
    background: var(--bg-secondary);
    border-color: var(--border-color);
    color: var(--text-secondary);
}

.page-link:hover {
    background: var(--bg-tertiary);
    border-color: var(--border-color);
    color: var(--text-primary);
}

.page-item.active .page-link {
    background: var(--primary-gradient);
    border-color: var(--primary-gradient);
}

/* Tooltip dark mode */
.tooltip-inner {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

/* Popover dark mode */
.popover {
    background: var(--card-bg);
    border-color: var(--border-color);
}

.popover-header {
    background: var(--bg-secondary);
    border-bottom-color: var(--border-color);
    color: var(--text-primary);
}

.popover-body {
    color: var(--text-secondary);
}