/* Dark Mode Theme for Support System */
:root[data-theme="dark"] {
    --bg-primary: #1a1a1a;
    --bg-secondary: #2d2d2d;
    --bg-tertiary: #3a3a3a;
    --text-primary: #e4e4e4;
    --text-secondary: #b0b0b0;
    --text-muted: #808080;
    --border-color: #404040;
    --link-color: #66b3ff;
    --link-hover: #4da3ff;
    --success: #5cb85c;
    --danger: #d9534f;
    --warning: #f0ad4e;
    --info: #5bc0de;
    --card-bg: #2d2d2d;
    --input-bg: #2d2d2d;
    --input-border: #404040;
    --input-focus: #4da3ff;
    --navbar-bg: #1f1f1f;
    --sidebar-bg: #252525;
    --message-own-bg: #0084ff;
    --message-other-bg: #3a3a3a;
    --hover-bg: rgba(255, 255, 255, 0.05);
    --shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Dark mode body */
[data-theme="dark"] body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
}

/* Cards and panels */
[data-theme="dark"] .card,
[data-theme="dark"] .panel,
[data-theme="dark"] .modal-content {
    background-color: var(--card-bg);
    border-color: var(--border-color);
    color: var(--text-primary);
}

/* Navigation */
[data-theme="dark"] .navbar {
    background-color: var(--navbar-bg) !important;
    border-bottom: 1px solid var(--border-color);
}

[data-theme="dark"] .navbar-brand,
[data-theme="dark"] .navbar-nav .nav-link {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .navbar-nav .nav-link:hover {
    color: var(--link-hover) !important;
    background-color: var(--hover-bg);
}

/* Sidebar */
[data-theme="dark"] .sidebar,
[data-theme="dark"] .chat-sidebar {
    background-color: var(--sidebar-bg);
    border-right: 1px solid var(--border-color);
}

/* Forms */
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select,
[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] select {
    background-color: var(--input-bg);
    border-color: var(--input-border);
    color: var(--text-primary);
}

[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus {
    background-color: var(--input-bg);
    border-color: var(--input-focus);
    color: var(--text-primary);
    box-shadow: 0 0 0 0.2rem rgba(77, 163, 255, 0.25);
}

/* Buttons */
[data-theme="dark"] .btn-outline-primary {
    color: var(--link-color);
    border-color: var(--link-color);
}

[data-theme="dark"] .btn-outline-primary:hover {
    background-color: var(--link-color);
    border-color: var(--link-color);
}

[data-theme="dark"] .btn-light {
    background-color: var(--bg-tertiary);
    border-color: var(--border-color);
    color: var(--text-primary);
}

/* Tables */
[data-theme="dark"] .table {
    color: var(--text-primary);
    border-color: var(--border-color);
}

[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: var(--hover-bg);
}

[data-theme="dark"] .table-hover > tbody > tr:hover > * {
    background-color: var(--hover-bg);
}

/* Chat specific */
[data-theme="dark"] .chat-messages {
    background-color: var(--bg-primary);
}

[data-theme="dark"] .message.own .message-bubble {
    background-color: var(--message-own-bg);
}

[data-theme="dark"] .message:not(.own) .message-bubble {
    background-color: var(--message-other-bg);
}

[data-theme="dark"] .conversation-item {
    border-bottom: 1px solid var(--border-color);
}

[data-theme="dark"] .conversation-item:hover {
    background-color: var(--hover-bg);
}

[data-theme="dark"] .conversation-item.active {
    background-color: var(--hover-bg);
    border-left: 3px solid var(--link-color);
}

/* Dropdown menus */
[data-theme="dark"] .dropdown-menu {
    background-color: var(--bg-secondary);
    border-color: var(--border-color);
}

[data-theme="dark"] .dropdown-item {
    color: var(--text-primary);
}

[data-theme="dark"] .dropdown-item:hover {
    background-color: var(--hover-bg);
    color: var(--text-primary);
}

/* Badges */
[data-theme="dark"] .badge {
    background-color: var(--danger);
}

/* Text colors */
[data-theme="dark"] .text-muted {
    color: var(--text-muted) !important;
}

[data-theme="dark"] .text-secondary {
    color: var(--text-secondary) !important;
}

/* Links */
[data-theme="dark"] a {
    color: var(--link-color);
}

[data-theme="dark"] a:hover {
    color: var(--link-hover);
}

/* Modals */
[data-theme="dark"] .modal-header {
    background-color: var(--bg-secondary);
    border-bottom-color: var(--border-color);
}

[data-theme="dark"] .modal-footer {
    background-color: var(--bg-secondary);
    border-top-color: var(--border-color);
}

/* Close button */
[data-theme="dark"] .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* Scrollbar */
[data-theme="dark"] ::-webkit-scrollbar {
    background-color: var(--bg-secondary);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background-color: var(--border-color);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background-color: #505050;
}

/* Alerts */
[data-theme="dark"] .alert-info {
    background-color: rgba(91, 192, 222, 0.2);
    border-color: var(--info);
    color: var(--text-primary);
}

[data-theme="dark"] .alert-success {
    background-color: rgba(92, 184, 92, 0.2);
    border-color: var(--success);
    color: var(--text-primary);
}

[data-theme="dark"] .alert-warning {
    background-color: rgba(240, 173, 78, 0.2);
    border-color: var(--warning);
    color: var(--text-primary);
}

[data-theme="dark"] .alert-danger {
    background-color: rgba(217, 83, 79, 0.2);
    border-color: var(--danger);
    color: var(--text-primary);
}