/* Dark Mode Theme Styles */

/* Dark mode color variables */
:root {
    --dark-bg-primary: #111827;
    --dark-bg-secondary: #1f2937;
    --dark-bg-tertiary: #374151;
    --dark-text-primary: #f9fafb;
    --dark-text-secondary: #d1d5db;
    --dark-text-tertiary: #9ca3af;
    --dark-border: #4b5563;
    --dark-border-light: #374151;
}

/* Dark mode base styles */
.dark {
    color-scheme: dark;
}

.dark body {
    background-color: var(--dark-bg-primary);
    color: var(--dark-text-primary);
}

/* Preserve branding colors - Primary and Secondary colors should remain visible */
.dark .bg-primary,
.dark .btn-primary,
.dark .text-white.bg-primary {
    background-color: var(--dark-primary-color, var(--primary-color)) !important;
    color: white !important;
}

.dark .text-primary {
    color: var(--dark-primary-color, var(--primary-color)) !important;
}

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

.dark .bg-secondary {
    background-color: var(--dark-secondary-color, var(--secondary-color)) !important;
}

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

/* Auth-specific branding preservation */
.dark .auth-primary-bg {
    background-color: var(--dark-primary-color, var(--primary-color)) !important;
}

.dark .auth-primary-text {
    color: var(--dark-primary-color, var(--primary-color)) !important;
}

.dark .auth-primary-border {
    border-color: var(--dark-primary-color, var(--primary-color)) !important;
}

/* Hover states for primary elements */
.dark .bg-primary:hover,
.dark .btn-primary:hover {
    opacity: 0.9;
}

/* Focus rings with primary color */
.dark .focus\:ring-primary:focus,
.dark .auth-primary-ring:focus {
    --tw-ring-color: var(--dark-primary-color, var(--primary-color));
    --tw-ring-opacity: 0.5;
}

/* Base backgrounds */
.dark .bg-white {
    background-color: var(--dark-bg-secondary) !important;
}

.dark .bg-gray-50 {
    background-color: var(--dark-bg-primary);
}

.dark .bg-gray-100 {
    background-color: var(--dark-bg-secondary);
}

.dark .bg-gray-200 {
    background-color: var(--dark-bg-tertiary);
}

/* Text colors */
.dark .text-gray-900 {
    color: var(--dark-text-primary);
}

.dark .text-gray-800 {
    color: var(--dark-text-primary);
}

.dark .text-gray-700 {
    color: var(--dark-text-secondary);
}

.dark .text-gray-600 {
    color: var(--dark-text-secondary);
}

.dark .text-gray-500 {
    color: var(--dark-text-tertiary);
}

/* Borders - use gray lines in dark mode */
.dark .border,
.dark [class*="border-gray-"],
.dark [class*="border-white"] {
    border-color: var(--dark-border) !important;
}

.dark .border-gray-200,
.dark .border-gray-300 {
    border-color: var(--dark-border-light) !important;
}

/* Form inputs */
.dark input,
.dark textarea,
.dark select {
    background-color: var(--dark-bg-tertiary);
    border-color: var(--dark-border);
    color: var(--dark-text-primary);
    box-shadow: 0 0 0 1px rgba(75, 85, 99, 0.5) inset;
}

.dark input:focus,
.dark textarea:focus,
.dark select:focus {
    background-color: var(--dark-bg-secondary);
    border-color: var(--dark-border);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5) inset;
    outline: none;
}

.dark input::placeholder,
.dark textarea::placeholder {
    color: var(--dark-text-tertiary);
}

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

.dark thead {
    background-color: var(--dark-bg-tertiary);
}

.dark tbody tr:hover {
    background-color: var(--dark-bg-tertiary);
}

.dark tbody tr {
    border-color: transparent;
}

/* Cards and panels */
.dark .shadow,
.dark .shadow-sm,
.dark .shadow-md,
.dark .shadow-lg {
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.5), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
}

/* Status badges - use brand colors with dark mode adjustments */
.dark .bg-blue-50 {
    background-color: rgba(59, 130, 246, 0.15);
}

.dark .bg-green-50 {
    background-color: rgba(16, 185, 129, 0.15);
}

.dark .bg-red-50 {
    background-color: rgba(239, 68, 68, 0.15);
}

.dark .bg-yellow-50 {
    background-color: rgba(245, 158, 11, 0.15);
}

/* Text colors for status badges - brighter for visibility */
.dark .text-blue-700,
.dark .text-blue-800 {
    color: #60a5fa;
}

.dark .text-green-700,
.dark .text-green-800 {
    color: #34d399;
}

.dark .text-red-700,
.dark .text-red-800 {
    color: #f87171;
}

.dark .text-yellow-700,
.dark .text-yellow-800 {
    color: #fbbf24;
}

/* Dropdowns and modals */
.dark .dropdown-menu {
    background-color: var(--dark-bg-secondary);
    border-color: transparent;
}

/* Navigation - maintain brand identity */
.dark nav {
    background-color: var(--dark-bg-secondary);
    border-color: transparent;
}

.dark nav a:hover {
    background-color: var(--dark-bg-tertiary);
}

.dark nav a.active {
    background-color: var(--primary-color);
    color: white;
}

/* Sidebar */
.dark .sidebar {
    background-color: var(--dark-bg-secondary);
}

/* Code blocks */
.dark code,
.dark pre {
    background-color: var(--dark-bg-tertiary);
    color: var(--dark-text-primary);
}

/* Links - use primary color for brand consistency */
.dark a:not(.btn):not(.bg-primary):not(.auth-primary-bg) {
    color: var(--dark-primary-color, #60a5fa);
}

.dark a:not(.btn):not(.bg-primary):not(.auth-primary-bg):hover {
    opacity: 0.8;
}

/* Alerts */
.dark .alert {
    background-color: var(--dark-bg-tertiary);
    border-color: transparent;
}

/* Form labels */
.dark label {
    color: var(--dark-text-secondary);
}

/* Disabled states */
.dark input:disabled,
.dark textarea:disabled,
.dark select:disabled {
    background-color: var(--dark-bg-primary);
    color: var(--dark-text-tertiary);
    opacity: 0.5;
}

/* Checkboxes and radio buttons with brand colors */
.dark input[type="checkbox"]:checked,
.dark input[type="radio"]:checked {
    background-color: var(--dark-primary-color, var(--primary-color));
    border-color: var(--dark-primary-color, var(--primary-color));
}

.dark input[type="checkbox"].auth-primary-text:checked {
    background-color: var(--dark-primary-color, var(--primary-color));
    border-color: var(--dark-primary-color, var(--primary-color));
}

/* Buttons - preserve brand colors */
.dark button.bg-primary,
.dark a.bg-primary,
.dark .btn-primary {
    background-color: var(--dark-primary-color, var(--primary-color)) !important;
    color: white !important;
}

.dark button.bg-secondary,
.dark a.bg-secondary {
    background-color: var(--dark-secondary-color, var(--secondary-color)) !important;
}

/* Badges with brand colors */
.dark .badge-primary {
    background-color: var(--dark-primary-color, var(--primary-color));
    color: white;
}

.dark .badge-secondary {
    background-color: var(--dark-secondary-color, var(--secondary-color));
    color: white;
}

/* Selected/Active states use brand colors */
.dark .selected,
.dark .active {
    background-color: var(--dark-primary-color, var(--primary-color));
    color: white;
}

/* Progress bars with brand colors */
.dark .progress-bar {
    background-color: var(--dark-primary-color, var(--primary-color));
}

/* Tabs - active tab uses brand color */
.dark .tab-active {
    border-bottom-color: var(--dark-primary-color, var(--primary-color));
    color: var(--dark-primary-color, var(--primary-color));
}

/* Toggle switches with brand colors */
.dark .toggle-switch:checked {
    background-color: var(--dark-primary-color, var(--primary-color));
}

/* Icons and SVGs - maintain visibility */
.dark svg {
    color: inherit;
}

.dark .text-primary svg {
    color: var(--dark-primary-color, var(--primary-color));
}

/* Admin options and card links - dark text on hover in dark mode */
.dark a.hover\:bg-gray-50:hover h3,
.dark a.hover\:bg-gray-50:hover p {
    color: var(--dark-text-primary);
}

.dark a.hover\:bg-gray-50:hover {
    background-color: var(--dark-bg-tertiary) !important;
}
/* Task status columns styling */
.dark .status-column {
    background-color: var(--dark-bg-primary);
}

.dark .task-card {
    background-color: var(--dark-bg-secondary);
    border-color: var(--dark-border-light) !important;
}

.dark .task-card:hover {
    background-color: var(--dark-bg-tertiary);
    border-color: var(--dark-border) !important;
}

.dark .task-card h4 {
    color: var(--dark-text-primary);
}

.dark .task-card p {
    color: var(--dark-text-secondary);
}

/* Checklist items styling */
.dark .checklist-toggle {
    background-color: var(--dark-bg-tertiary);
    border-color: var(--dark-border);
    accent-color: var(--dark-primary-color, var(--primary-color));
}

.dark .checklist-toggle:checked {
    background-color: var(--dark-primary-color, var(--primary-color));
    border-color: var(--dark-primary-color, var(--primary-color));
}

/* Ensure checklist items don't become white in dark mode */
.dark div[class*="bg-gray-50"] {
    background-color: var(--dark-bg-secondary) !important;
}

.dark div[class*="hover:bg-gray-50"]:hover {
    background-color: var(--dark-bg-tertiary) !important;
}

/* Green background for completed items */
.dark .bg-green-50 {
    background-color: rgba(16, 185, 129, 0.1) !important;
}
/* Chat page dark mode styling */
.dark .chat-container {
    background-color: var(--dark-bg-primary);
    border-color: var(--dark-border-light) !important;
}

.dark .chat-sidebar {
    background-color: var(--dark-bg-secondary);
    border-right-color: var(--dark-border-light) !important;
}

.dark .chat-sidebar-header {
    background-color: var(--dark-bg-secondary);
    border-bottom-color: var(--dark-border-light) !important;
}

.dark .chat-sidebar-title {
    color: var(--dark-text-primary);
}

.dark .chat-section-title {
    color: var(--dark-text-tertiary);
}

.dark .chat-item {
    color: var(--dark-text-secondary);
    transition: all 0.15s;
}

.dark .chat-item:hover {
    background-color: var(--dark-bg-tertiary);
    color: var(--dark-text-primary);
}

.dark .chat-item.active {
    background-color: var(--dark-bg-tertiary);
    color: var(--dark-text-primary);
}

.dark .chat-item-name {
    color: var(--dark-text-primary);
}

.dark .chat-item-subtitle {
    color: var(--dark-text-tertiary);
}

.dark .chat-avatar {
    background-color: var(--dark-primary-color, var(--primary-color));
    color: white;
}

.dark .chat-main {
    background-color: var(--dark-bg-primary);
}

.dark .chat-header {
    background-color: var(--dark-bg-secondary);
    border-bottom-color: var(--dark-border-light) !important;
}

.dark .chat-header-title {
    color: var(--dark-text-primary);
}

.dark .chat-header-name {
    color: var(--dark-text-primary);
}

.dark .chat-status-pill {
    background: rgba(16, 185, 129, 0.15);
    border-color: rgba(16, 185, 129, 0.4);
    color: #86efac;
}

.dark .chat-status-pill::before {
    background: #22c55e;
}

.dark .chat-status-pill.offline {
    background: rgba(107, 114, 128, 0.2);
    border-color: rgba(107, 114, 128, 0.45);
    color: var(--dark-text-tertiary);
}

.dark .chat-status-pill.offline::before {
    background: #9ca3af;
}

.dark .chat-header-subtitle {
    color: var(--dark-text-tertiary);
}

.dark .chat-messages {
    background-color: var(--dark-bg-primary);
}

.dark .chat-messages-empty {
    color: var(--dark-text-tertiary);
}

/* Chat message bubbles in dark mode */
.dark .chat-message:not(.mine) .chat-message-bubble {
    background-color: var(--dark-bg-secondary);
    color: var(--dark-text-primary);
    border-color: var(--dark-border-light);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.dark .chat-message.mine .chat-message-bubble {
    background-color: var(--dark-primary-color, var(--primary-color));
    color: white;
}

.dark .chat-message-sender {
    color: var(--dark-text-tertiary);
}

.dark .chat-message.mine .chat-message-sender {
    color: rgba(255, 255, 255, 0.8);
}

.dark .chat-message-time {
    color: var(--dark-text-tertiary);
}

.dark .chat-message.mine .chat-message-time {
    color: rgba(255, 255, 255, 0.8);
}

.dark .chat-message-edited {
    color: var(--dark-text-tertiary) !important;
}

.dark .chat-message-body {
    color: var(--dark-text-primary);
}

.dark .chat-message-deleted .chat-message-bubble {
    background-color: var(--dark-bg-tertiary) !important;
    color: var(--dark-text-tertiary) !important;
}

.dark .chat-message-deleted-text {
    color: var(--dark-text-tertiary) !important;
}

.dark .chat-message-deleted-by {
    color: var(--dark-text-tertiary) !important;
}

.dark .chat-message-reactions {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.dark .chat-message-reactions > div {
    background-color: var(--dark-bg-tertiary) !important;
    color: var(--dark-text-primary) !important;
    border-color: var(--dark-border) !important;
}

.dark .msone-my-reaction {
    background-color: rgba(59, 130, 246, 0.15) !important;
    border-color: var(--dark-primary-color, var(--primary-color)) !important;
}

/* Chat input area dark mode */
.dark .chat-input-container {
    background-color: var(--dark-bg-secondary);
    border-top-color: var(--dark-border-light) !important;
}

.dark .chat-input-form {
    background-color: var(--dark-bg-tertiary);
    border-color: var(--dark-border-light) !important;
}

.dark .chat-input {
    background-color: var(--dark-bg-tertiary);
    color: var(--dark-text-primary);
}

.dark .chat-input::placeholder {
    color: var(--dark-text-tertiary);
}

.dark .chat-input-action-btn {
    color: var(--dark-text-tertiary);
    transition: color 0.15s, background 0.15s;
}

.dark .chat-input-action-btn:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--dark-text-primary);
}

.dark .chat-contact-card {
    background: var(--dark-bg-secondary);
    border-color: var(--dark-border-light);
}

.dark .chat-contact-avatar {
    background: var(--dark-bg-tertiary);
    color: var(--dark-text-primary);
}

.dark .chat-contact-title {
    color: var(--dark-text-primary);
}

.dark .chat-contact-meta {
    color: var(--dark-text-tertiary);
}

.dark .chat-contact-row {
    color: var(--dark-text-secondary);
}

.dark .chat-contact-row a {
    color: #93c5fd;
}

.dark .chat-contact-close {
    background: var(--dark-bg-tertiary);
    border-color: var(--dark-border-light);
    color: var(--dark-text-secondary);
}

.dark .chat-send-btn {
    background-color: var(--dark-primary-color, var(--primary-color));
    color: white;
    border: none;
}

.dark .chat-send-btn:hover {
    opacity: 0.9;
}

.dark .chat-send-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Chat modal dialogs in dark mode */
.dark div[style*="background:white; border-radius:12px"] {
    background-color: var(--dark-bg-secondary) !important;
}

.dark div[style*="background:white"][style*="padding:14px"] {
    background-color: var(--dark-bg-secondary) !important;
}

/* Modal labels and text in dark mode */
.dark label[style*="color:#4b5563"] {
    color: var(--dark-text-secondary) !important;
}

.dark label[style*="color:#6b7280"] {
    color: var(--dark-text-tertiary) !important;
}

.dark span[style*="color:#6b7280"] {
    color: var(--dark-text-tertiary) !important;
}

.dark div[style*="color:#9ca3af"],
.dark p[style*="color:#9ca3af"] {
    color: var(--dark-text-tertiary) !important;
}

/* Modal inputs in dark mode */
.dark input[style*="border:1px solid"],
.dark input[type="text"][style*="border"] {
    background-color: var(--dark-bg-tertiary) !important;
    color: var(--dark-text-primary) !important;
    border-color: var(--dark-border-light) !important;
}

.dark input[type="text"]::placeholder {
    color: var(--dark-text-tertiary) !important;
}

/* Modal borders in dark mode */
.dark div[style*="border-bottom:1px solid"] {
    border-bottom-color: var(--dark-border-light) !important;
}

.dark div[style*="border-top:1px solid"] {
    border-top-color: var(--dark-border-light) !important;
}

.dark div[style*="border:1px solid"],
.dark div[style*="max-height:220px"][style*="border"] {
    border-color: var(--dark-border-light) !important;
}

/* Modal buttons in dark mode */
.dark button[style*="background:white"] {
    background-color: var(--dark-bg-tertiary) !important;
    color: var(--dark-text-primary) !important;
    border-color: var(--dark-border-light) !important;
}

.dark button[style*="background:white"]:hover {
    background-color: var(--dark-border) !important;
}

/* Modal row items */
.dark label[class*="group-user-row"] {
    border-color: var(--dark-border-light) !important;
}

.dark label[class*="group-user-row"]:hover {
    background-color: var(--dark-bg-tertiary) !important;
}

.dark input[type="checkbox"] {
    accent-color: var(--dark-primary-color, var(--primary-color));
}

/* Destructive action buttons (red) in dark mode */
.dark button[style*="background:#fef2f2"],
.dark button[style*="color:#dc2626"] {
    background-color: rgba(220, 38, 38, 0.15) !important;
    color: #ef4444 !important;
    border-color: rgba(220, 38, 38, 0.3) !important;
}

.dark button[style*="background:#fef2f2"]:hover,
.dark button[style*="color:#dc2626"]:hover {
    background-color: rgba(220, 38, 38, 0.25) !important;
}

/* Hover states on list items in dark mode */
.dark .hover\:bg-gray-50:hover {
    background-color: var(--dark-bg-tertiary) !important;
}