/* Global Dark Mode Consistency Styles */

body.dark-mode {
  --bg: #020617;
  --card: #1e293b;
  --text-main: #f1f5f9;
  --text-muted: #94a3b8;
  --border: #334155;
  --primary-light: rgba(59, 130, 246, 0.15);
  background-color: var(--bg);
  color: var(--text-main);
}

body.dark-mode .app-shell,
body.dark-mode main {
  background-color: var(--bg);
}

body.dark-mode .sidebar {
  background-color: #0f172a;
  border-right: 1px solid var(--border);
}

body.dark-mode .topbar {
  background: rgba(15, 23, 42, 0.8);
  border-bottom: 1px solid var(--border);
}

/* Base Elements */
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6 {
  color: var(--text-main) !important;
}

body.dark-mode p,
body.dark-mode span,
body.dark-mode div {
  color: inherit;
}

body.dark-mode strong,
body.dark-mode b {
  color: #fff !important;
}

/* Cards & Modals */
body.dark-mode .card,
body.dark-mode .modal-card,
body.dark-mode .modal-content,
body.dark-mode .student-tooltip {
  background: var(--card) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
}

/* Inputs, Textareas, Selects */
body.dark-mode input,
body.dark-mode textarea,
body.dark-mode select {
  background-color: #020617 !important;
  color: var(--text-main) !important;
  border-color: #475569 !important;
}

body.dark-mode input::placeholder,
body.dark-mode textarea::placeholder {
  color: var(--text-muted) !important;
}

/* Buttons */
body.dark-mode .btn-secondary,
body.dark-mode .btn-outline {
  border-color: #475569;
  background: transparent;
  color: var(--text-muted);
}

body.dark-mode .btn-secondary:hover,
body.dark-mode .btn-outline:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-main);
}

/* Navigation & Tabs */
body.dark-mode .nav-item:hover {
  background-color: rgba(255, 255, 255, 0.05);
  color: var(--text-main);
}

body.dark-mode .tab-btn.active {
  background: #1e293b !important;
  color: white !important;
  border: 1px solid var(--border) !important;
}

body.dark-mode .tabs-header {
  background: #0f172a !important;
}

/* Search */
body.dark-mode .search {
  background: #0f172a !important;
  border-color: var(--border) !important;
}

body.dark-mode .search svg {
  color: var(--text-muted) !important;
}

body.dark-mode .search input {
  color: var(--text-main) !important;
}

/* Tables */
body.dark-mode .table,
body.dark-mode .table-container {
  border-color: var(--border);
}

body.dark-mode .table thead {
  background: #0f172a !important;
  border-color: var(--border) !important;
}

body.dark-mode .table thead th {
  color: var(--text-muted) !important;
}

body.dark-mode .table tbody td,
body.dark-mode .table td {
  color: var(--text-main) !important;
  border-color: var(--border) !important;
}

body.dark-mode .table tbody tr:hover {
  background-color: rgba(255, 255, 255, 0.03) !important;
}

/* Overriding Tailwind Colors for proper visibility */

/* Grays */
body.dark-mode .text-gray-900,
body.dark-mode .text-gray-800,
body.dark-mode .text-gray-700,
body.dark-mode .text-gray-600 {
  color: var(--text-main) !important;
}

body.dark-mode .text-gray-500,
body.dark-mode .text-gray-400 {
  color: var(--text-muted) !important;
}

body.dark-mode .bg-white {
  background-color: var(--card) !important;
}

body.dark-mode .bg-gray-50,
body.dark-mode .bg-gray-100,
body.dark-mode .bg-gray-200 {
  background-color: #0f172a !important;
  border-color: var(--border) !important;
  color: var(--text-main) !important;
}

/* Blues */
body.dark-mode .text-blue-900,
body.dark-mode .text-blue-800,
body.dark-mode .text-blue-700,
body.dark-mode .text-blue-600 {
  color: #60a5fa !important; /* Lighter blue for dark mode */
}

body.dark-mode .bg-blue-50,
body.dark-mode .bg-blue-50\/50,
body.dark-mode .bg-blue-100,
body.dark-mode .hover\:bg-blue-50:hover {
  background-color: rgba(59, 130, 246, 0.15) !important;
  border-color: rgba(59, 130, 246, 0.2) !important;
  color: var(--text-main) !important;
}

/* Greens / Emeralds */
body.dark-mode .text-green-600,
body.dark-mode .text-green-700,
body.dark-mode .text-emerald-600,
body.dark-mode .text-emerald-700 {
  color: #34d399 !important;
}

body.dark-mode .bg-green-50,
body.dark-mode .bg-emerald-50 {
  background-color: rgba(16, 185, 129, 0.1) !important;
  border-color: rgba(16, 185, 129, 0.2) !important;
}

/* Reds / Roses */
body.dark-mode .text-red-500,
body.dark-mode .text-red-600,
body.dark-mode .text-rose-500,
body.dark-mode .text-rose-600 {
  color: #fb7185 !important;
}

body.dark-mode .bg-red-50,
body.dark-mode .bg-rose-50 {
  background-color: rgba(244, 63, 94, 0.1) !important;
  border-color: rgba(244, 63, 94, 0.2) !important;
}

/* Oranges / Yellows */
body.dark-mode .text-orange-500,
body.dark-mode .text-orange-600,
body.dark-mode .text-yellow-500,
body.dark-mode .text-yellow-600 {
  color: #fbbf24 !important;
}

body.dark-mode .bg-orange-50,
body.dark-mode .bg-yellow-50 {
  background-color: rgba(245, 158, 11, 0.1) !important;
  border-color: rgba(245, 158, 11, 0.2) !important;
}

/* Indigo */
body.dark-mode .text-indigo-600,
body.dark-mode .text-indigo-700 {
  color: #818cf8 !important;
}

body.dark-mode .bg-indigo-50 {
  background-color: rgba(99, 102, 241, 0.1) !important;
  border-color: rgba(99, 102, 241, 0.2) !important;
}

/* Specific elements that might be hardcoded */
body.dark-mode #role-selector,
body.dark-mode #role-selector .card {
  background-color: var(--bg);
  border: none;
}

body.dark-mode #announcement-list li,
body.dark-mode #leaves-list li {
  background-color: #0f172a !important;
  border-color: var(--border) !important;
  color: var(--text-main);
}

body.dark-mode #payment-config-card .bg-gray-50 {
  background-color: #0f172a !important;
}

/* Chat Styles */
body.dark-mode .chat-bubble.others {
  background: #334155 !important;
  color: #f8fafc !important;
}

body.dark-mode .chat-bubble.mine {
  background: var(--primary) !important;
  color: white !important;
}

/* Form Groups & Dividers */
body.dark-mode .border-gray-100,
body.dark-mode .border-gray-200,
body.dark-mode .border-gray-300,
body.dark-mode .divide-y > * {
  border-color: var(--border) !important;
}

/* Text placeholders */
body.dark-mode .text-muted, body.dark-mode .muted-sm {
  color: var(--text-muted) !important;
}