/* 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;
}

/* ═══════════════════════════════════════════════════════════════════════════
   DASHBOARD – dark mode
   ═══════════════════════════════════════════════════════════════════════════ */

/* KPI stat cards */
.dark .dashboard-kpi-card {
    background: var(--dark-bg-secondary) !important;
    box-shadow: 0 1px 4px rgba(0,0,0,.45);
}
.dark .dashboard-kpi-footer {
    background: var(--dark-bg-primary) !important;
    border-top-color: var(--dark-border-light) !important;
}

/* Generic widget cards */
.dark .dashboard-widget-card {
    background: var(--dark-bg-secondary) !important;
    box-shadow: 0 1px 4px rgba(0,0,0,.45);
}
.dark .dashboard-widget-header {
    border-bottom-color: var(--dark-border-light) !important;
}
.dark .dashboard-widget-footer {
    background: var(--dark-bg-primary) !important;
    border-top-color: var(--dark-border-light) !important;
}

/* Widget text */
.dark .dashboard-list-card-title  { color: var(--dark-text-primary); }
.dark .dashboard-project-name     { color: var(--dark-text-primary); }
.dark .dashboard-project-desc     { color: var(--dark-text-tertiary); }
.dark .dashboard-spotlight-kicker { color: var(--dark-text-tertiary); }

/* Project row dividers */
.dark .dashboard-project-link {
    border-bottom-color: var(--dark-border-light) !important;
}
.dark .dashboard-project-link:hover {
    background: var(--dark-bg-tertiary) !important;
}

/* Spotlight accent cards – replace the light gradient in dark mode */
.dark .dashboard-spotlight-card {
    background: var(--dark-bg-secondary) !important;
    border-color: var(--dark-border-light) !important;
    box-shadow: 0 1px 4px rgba(0,0,0,.45);
}
.dark .dashboard-spotlight-card .dashboard-widget-header {
    background: var(--dark-bg-tertiary) !important;
    border-bottom-color: var(--dark-border-light) !important;
}
.dark .dashboard-spotlight-card.tasks .dashboard-widget-header {
    background: rgba(16,185,129,.10) !important;
}
.dark .dashboard-spotlight-card.meetings .dashboard-widget-header {
    background: rgba(99,102,241,.10) !important;
}

/* Divide lines inside widget bodies */
.dark .divide-y > * + * {
    border-top-color: var(--dark-border-light) !important;
}

/* Dashboard page-level tabs */
.dark #dashTabs {
    border-bottom-color: var(--dark-border-light) !important;
}
.dark #dashTabs button {
    color: var(--dark-text-tertiary);
}
.dark #dashTabs button.border-primary {
    color: var(--dark-primary-color, var(--primary-color));
    border-bottom-color: var(--dark-primary-color, var(--primary-color));
}

/* "Customize Dashboard" button */
.dark button[onclick*="dashboardWidgetModal"] {
    background: var(--dark-bg-secondary) !important;
    border-color: var(--dark-border) !important;
    color: var(--dark-text-secondary) !important;
}
.dark button[onclick*="dashboardWidgetModal"]:hover {
    background: var(--dark-bg-tertiary) !important;
}

/* Live indicator */
.dark #dashboard-last-update { color: var(--dark-text-tertiary); }

/* Analytics snapshot inner border-cards */
.dark #tab-overview .rounded-lg.border.border-gray-200 {
    background: var(--dark-bg-secondary) !important;
    border-color: var(--dark-border-light) !important;
}

/* Attendance overview coloured boxes */
.dark .bg-green-50.rounded-lg { background: rgba(16,185,129,.12) !important; }
.dark .bg-yellow-50.rounded-lg { background: rgba(245,158,11,.12) !important; }
.dark .bg-red-50.rounded-lg   { background: rgba(239,68,68,.12) !important; }

/* Calendar section */
.dark #dashboard-calendar-wrapper {
    background: var(--dark-bg-secondary) !important;
}

/* FullCalendar overrides */
.dark .fc .fc-toolbar-title                { color: var(--dark-text-primary) !important; }
.dark .fc .fc-button                       { background: var(--dark-bg-tertiary) !important; border-color: var(--dark-border) !important; color: var(--dark-text-secondary) !important; }
.dark .fc .fc-button:hover                 { background: var(--dark-border) !important; }
.dark .fc .fc-button-primary.fc-button-active,
.dark .fc .fc-button-primary:not(:disabled).fc-button-active { background: var(--dark-primary-color, var(--primary-color)) !important; border-color: var(--dark-primary-color, var(--primary-color)) !important; color: #fff !important; }
.dark .fc td, .dark .fc th                 { border-color: var(--dark-border-light) !important; }
.dark .fc .fc-scrollgrid                   { border-color: var(--dark-border-light) !important; }
.dark .fc .fc-col-header-cell-cushion      { color: var(--dark-text-secondary) !important; }
.dark .fc .fc-daygrid-day-number           { color: var(--dark-text-secondary) !important; }
.dark .fc .fc-daygrid-day.fc-day-today     { background: rgba(59,130,246,.08) !important; }
.dark .fc .fc-daygrid-day:hover            { background: var(--dark-bg-tertiary) !important; }
.dark .fc .fc-list-day-cushion,
.dark .fc .fc-list-day-text,
.dark .fc .fc-list-day-side-text           { color: var(--dark-text-secondary) !important; background: var(--dark-bg-tertiary) !important; }
.dark .fc .fc-list-event:hover td          { background: var(--dark-bg-tertiary) !important; }
.dark .fc .fc-list-event td               { background: var(--dark-bg-secondary) !important; border-color: var(--dark-border-light) !important; color: var(--dark-text-primary) !important; }
.dark .fc .fc-list-empty                   { background: var(--dark-bg-secondary) !important; color: var(--dark-text-tertiary) !important; }
.dark .fc .fc-list-event-title a          { color: var(--dark-text-primary) !important; }
.dark .fc .fc-daygrid-event               { border-radius: 4px; }
.dark .fc .fc-event-title                 { color: #fff !important; }

/* Dashboard Widget modal */
.dark #dashboardWidgetModal .bg-white,
.dark #dashboardWidgetModal [class*="bg-white"] {
    background: var(--dark-bg-secondary) !important;
}
.dark #dashboardWidgetModal h2,
.dark #dashboardWidgetModal h3,
.dark #dashboardWidgetModal label {
    color: var(--dark-text-primary) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   CHAT – fcp-* component dark mode
   ═══════════════════════════════════════════════════════════════════════════ */

/* Outer wrapper */
.dark .fcp-wrap {
    background: var(--dark-bg-secondary);
    border-color: var(--dark-border-light);
    box-shadow: 0 2px 16px rgba(0,0,0,.55);
}

/* ── Sidebar ── */
.dark .fcp-sidebar {
    background: var(--dark-bg-primary);
    border-right-color: var(--dark-border-light) !important;
}
.dark .fcp-sidebar-hdr {
    background: var(--dark-bg-secondary);
    border-bottom-color: var(--dark-border-light) !important;
}
.dark .fcp-sidebar-hdr h1 { color: var(--dark-text-primary); }

/* Search box */
.dark .fcp-search-box {
    background: var(--dark-bg-tertiary);
    border-color: var(--dark-border) !important;
}
.dark .fcp-search-box input {
    color: var(--dark-text-primary);
    background: transparent !important;
}
.dark .fcp-search-box input::placeholder { color: var(--dark-text-tertiary); }
.dark .fcp-search-box svg { color: var(--dark-text-tertiary); }

/* Tabs */
.dark .fcp-sidebar-tabs {
    background: var(--dark-bg-secondary);
    border-bottom-color: var(--dark-border-light) !important;
}
.dark .fcp-tab { color: var(--dark-text-tertiary); background: none !important; }
.dark .fcp-tab:hover:not(.active) { color: var(--dark-text-secondary); }
/* Override the generic `.dark .active` rule which fills the tab with solid primary */
.dark .fcp-tab.active {
    background: none !important;
    background-color: transparent !important;
    color: var(--dark-primary-color, var(--primary-color)) !important;
    border-bottom-color: var(--dark-primary-color, var(--primary-color)) !important;
}

/* Conversation items */
.dark .fcp-conv-section-title { color: var(--dark-text-tertiary); }
.dark .fcp-conv-item:hover    { background: var(--dark-bg-tertiary); }
.dark .fcp-conv-item.active   { background: rgba(59,130,246,.15); }
.dark .fcp-conv-item.active .fcp-ci-name { color: #93c5fd; }
.dark .fcp-ci-name            { color: var(--dark-text-primary); }
.dark .fcp-ci-preview         { color: var(--dark-text-tertiary); }
.dark .fcp-ci-time            { color: var(--dark-text-tertiary); }
.dark .fcp-conv-item--unread .fcp-ci-preview { color: var(--dark-text-secondary); }

/* Online dot border */
.dark .fcp-online-dot { border-color: var(--dark-bg-primary); }

/* New group button */
.dark .fcp-new-group-btn {
    border-color: var(--dark-border) !important;
    color: var(--dark-text-tertiary);
}
.dark .fcp-new-group-btn:hover {
    border-color: var(--dark-primary-color, var(--primary-color)) !important;
    color: var(--dark-primary-color, var(--primary-color));
    background: rgba(59,130,246,.10);
}

/* Sidebar empty / search results */
.dark .fcp-sidebar-empty  { color: var(--dark-text-tertiary); }
.dark .fcp-search-empty   { color: var(--dark-text-tertiary); }
.dark .fcp-search-user:hover { background: var(--dark-bg-tertiary); }
.dark .fcp-search-user-name  { color: var(--dark-text-primary); }
.dark .fcp-search-user-sub   { color: var(--dark-text-tertiary); }

/* ── Main area ── */
.dark .fcp-main { background: var(--dark-bg-secondary); }

/* Empty state */
.dark .fcp-empty-state h2 { color: var(--dark-text-secondary); }

/* Chat header */
.dark .fcp-chat-hdr {
    background: var(--dark-bg-secondary);
    border-bottom-color: var(--dark-border-light) !important;
}
.dark .fcp-chat-hdr-name   { color: var(--dark-text-primary); }
.dark .fcp-chat-hdr-status { color: var(--dark-text-tertiary); }
.dark .fcp-chat-hdr-status.online { color: #34d399; }

.dark .fcp-hdr-btn {
    background: var(--dark-bg-tertiary);
    border-color: var(--dark-border) !important;
    color: var(--dark-text-tertiary);
}
.dark .fcp-hdr-btn:hover {
    background: var(--dark-border);
    color: var(--dark-text-primary);
}

/* Message list */
.dark .fcp-msg-list { background: var(--dark-bg-primary); }

/* Date dividers */
.dark .fcp-date-divider::before { border-top-color: var(--dark-border-light) !important; }
.dark .fcp-date-divider span    { background: var(--dark-bg-primary); color: var(--dark-text-tertiary); }

/* Message bubbles – peer */
.dark .fcp-bubble {
    background: var(--dark-bg-secondary);
    color: var(--dark-text-primary);
}
/* own bubble uses var(--cp) – no change needed */

/* Reply preview inside bubble */
.dark .fcp-bubble .fcp-reply-preview {
    background: rgba(255,255,255,.06);
    border-left-color: rgba(255,255,255,.25);
}

/* Message actions */
.dark .fcp-msg-actions {
    background: var(--dark-bg-secondary);
    border-color: var(--dark-border) !important;
    box-shadow: 0 2px 10px rgba(0,0,0,.55);
}
.dark .fcp-action-btn { color: var(--dark-text-tertiary); }
.dark .fcp-action-btn:hover {
    background: var(--dark-bg-tertiary);
    color: var(--dark-text-primary);
}

/* Reactions */
.dark .fcp-reactions .fcp-reaction {
    background: var(--dark-bg-tertiary);
    border-color: var(--dark-border) !important;
    color: var(--dark-text-primary);
}
.dark .fcp-reactions .fcp-reaction:hover { background: var(--dark-border); }
.dark .fcp-reactions .fcp-reaction.mine  {
    background: rgba(59,130,246,.18);
    border-color: rgba(96,165,250,.45) !important;
}

/* Typing indicator */
.dark .fcp-typing-row { color: var(--dark-text-tertiary); }
.dark .fcp-typing-dots span { background: var(--dark-text-tertiary); }

/* Load more */
.dark .fcp-load-more {
    background: var(--dark-bg-secondary);
    border-color: var(--dark-border-light) !important;
    color: var(--dark-text-tertiary);
}
.dark .fcp-load-more:hover { background: var(--dark-bg-tertiary); }

/* Reply bar */
.dark .fcp-reply-bar {
    background: rgba(59,130,246,.12);
    border-top-color: rgba(59,130,246,.30) !important;
}
.dark .fcp-reply-bar-label { color: #93c5fd; }
.dark .fcp-reply-cancel    { color: var(--dark-text-tertiary); }
.dark .fcp-reply-cancel:hover { color: var(--dark-text-primary); }

/* Input area */
.dark .fcp-input-area {
    background: var(--dark-bg-secondary);
    border-top-color: var(--dark-border-light) !important;
}
.dark .fcp-msg-input {
    background: var(--dark-bg-tertiary);
    border-color: var(--dark-border) !important;
    color: var(--dark-text-primary);
}
.dark .fcp-msg-input::placeholder { color: var(--dark-text-tertiary); }
.dark .fcp-msg-input:focus {
    background: var(--dark-bg-secondary);
    border-color: var(--dark-primary-color, var(--primary-color)) !important;
}
.dark .fcp-toolbar-btn { color: var(--dark-text-tertiary); }
.dark .fcp-toolbar-btn:hover {
    background: var(--dark-bg-tertiary);
    color: var(--dark-text-secondary);
}

/* Emoji panel */
.dark .fcp-emoji-panel {
    background: var(--dark-bg-secondary);
    border-color: var(--dark-border) !important;
    box-shadow: 0 4px 20px rgba(0,0,0,.55);
}
.dark .fcp-emoji-opt:hover { background: var(--dark-bg-tertiary); }

/* Inline reaction picker */
.dark #fcp-inline-picker {
    background: var(--dark-bg-secondary);
    border-color: var(--dark-border) !important;
    box-shadow: 0 4px 20px rgba(0,0,0,.55);
}

/* ── Info / members panel ── */
.dark .fcp-info-panel {
    background: var(--dark-bg-primary);
    border-left-color: var(--dark-border-light) !important;
}
.dark .fcp-info-hdr {
    background: var(--dark-bg-secondary);
    border-bottom-color: var(--dark-border-light) !important;
}
.dark .fcp-info-hdr h3 { color: var(--dark-text-primary); }
.dark .fcp-info-close:hover {
    background: var(--dark-bg-tertiary);
    color: var(--dark-text-secondary);
}
.dark .fcp-info-card {
    background: var(--dark-bg-secondary);
    border-color: var(--dark-border-light) !important;
}
.dark .fcp-info-title         { color: var(--dark-text-primary); }
.dark .fcp-info-meta          { color: var(--dark-text-tertiary); }
.dark .fcp-info-section-title { color: var(--dark-text-tertiary); }
.dark .fcp-info-badge         { background: var(--dark-bg-tertiary); color: var(--dark-text-secondary); }
.dark .fcp-info-online        { background: rgba(16,185,129,.15); color: #34d399; }
.dark .fcp-info-offline       { background: var(--dark-bg-tertiary); color: var(--dark-text-tertiary); }
.dark .fcp-info-member {
    background: var(--dark-bg-secondary);
    border-color: var(--dark-border-light) !important;
}
.dark .fcp-info-member:hover  { background: var(--dark-bg-tertiary); }
.dark .fcp-info-member-name   { color: var(--dark-text-primary); }
.dark .fcp-info-member-sub    { color: var(--dark-text-tertiary); }

/* Skeleton shimmer */
.dark .fcp-sk {
    background: linear-gradient(90deg, var(--dark-bg-tertiary) 25%, var(--dark-border) 50%, var(--dark-bg-tertiary) 75%) !important;
    background-size: 200% 100% !important;
}

/* Inline edit */
.dark .fcp-inline-edit {
    background: var(--dark-bg-tertiary) !important;
    color: var(--dark-text-primary) !important;
    border-color: var(--dark-primary-color, var(--primary-color)) !important;
}
.dark .fcp-edit-cancel {
    background: var(--dark-bg-tertiary) !important;
    color: var(--dark-text-secondary) !important;
}
.dark .fcp-edit-cancel:hover { background: var(--dark-border) !important; }

/* Mobile sidebar overlay */
@media (max-width:768px) {
    .dark .fcp-sidebar { background: var(--dark-bg-primary); }
}

/* ── Full-page chat: context menu dark ─── */
.dark .fcp-ctx-menu {
    background: var(--dark-bg-secondary);
    border-color: var(--dark-border);
    box-shadow: 0 4px 20px rgba(0,0,0,.6);
}
.dark .fcp-ctx-item { color: var(--dark-text-secondary); }
.dark .fcp-ctx-item:hover { background: var(--dark-bg-tertiary); color: var(--dark-text-primary); }
.dark .fcp-ctx-item.danger { color: #f87171; }
.dark .fcp-ctx-item.danger:hover { background: rgba(239,68,68,.15); }

/* ── Full-page chat: reply preview dark ─── */
.dark .fcp-reply-preview {
    background: rgba(96,165,250,.12) !important;
    border-left-color: var(--dark-primary-color, var(--primary-color)) !important;
}
.dark .fcp-reply-prev-sender {
    color: var(--dark-primary-color, #60a5fa) !important;
}
.dark .fcp-reply-prev-text {
    color: var(--dark-text-secondary) !important;
    opacity: 1 !important;
}
/* ── People Directory modal dark ─────────────────────────────────────────── */
.dark .fcp-dir-btn { color: var(--dark-text-tertiary); }
.dark .fcp-dir-btn:hover { background: rgba(96,165,250,.12); color: var(--dark-primary-color, #60a5fa); }

.dark .fcp-dir-card {
    background: var(--dark-bg-secondary);
    box-shadow: 0 24px 64px rgba(0,0,0,.55);
}
.dark .fcp-dir-hdr {
    border-bottom-color: var(--dark-border);
}
.dark .fcp-dir-hdr h2 { color: var(--dark-text-primary); }
.dark .fcp-dir-close { color: var(--dark-text-tertiary); }
.dark .fcp-dir-close:hover { background: var(--dark-bg-tertiary); color: var(--dark-text-primary); }

.dark .fcp-dir-search-wrap {
    background: var(--dark-bg-primary);
    border-bottom-color: var(--dark-border);
}
.dark .fcp-dir-search { color: var(--dark-text-primary); }
.dark .fcp-dir-search::placeholder { color: var(--dark-text-tertiary); }
.dark .fcp-dir-search-wrap svg { color: var(--dark-text-tertiary); }

.dark .fcp-dir-section-hdr { color: var(--dark-text-tertiary); }
.dark .fcp-dir-user:hover { background: var(--dark-bg-tertiary); }
.dark .fcp-dir-name { color: var(--dark-text-primary); }
.dark .fcp-dir-sub  { color: var(--dark-text-tertiary); }
.dark .fcp-dir-online { border-color: var(--dark-bg-secondary); }

.dark .fcp-dir-msg-btn {
    background: rgba(96,165,250,.12);
    color: var(--dark-primary-color, #60a5fa);
}
.dark .fcp-dir-msg-btn:hover {
    background: var(--dark-primary-color, #3b82f6);
    color: #fff;
}
.dark .fcp-dir-empty, .dark .fcp-dir-loading { color: var(--dark-text-tertiary); }
.dark .fcp-dir-load-more button {
    background: var(--dark-bg-tertiary);
    border-color: var(--dark-border);
    color: var(--dark-text-secondary);
}
.dark .fcp-dir-load-more button:hover { background: var(--dark-bg-primary); color: var(--dark-text-primary); }