/*
 * Centralized Dark Mode Styles
 * Uses html[data-mode=dark] selector to automatically apply dark mode styles
 * without needing dark: classes on individual elements
 */

/* ==========================================================================
   Base Elements
   ========================================================================== */

/* Body and main content area */
html[data-mode=dark] body {
  background-color: #111827; /* gray-900 */
  color: #e5e7eb; /* gray-200 */
}

/* Headings */
html[data-mode=dark] h1,
html[data-mode=dark] h2,
html[data-mode=dark] h3,
html[data-mode=dark] h4,
html[data-mode=dark] h5,
html[data-mode=dark] h6 {
  color: #f3f4f6; /* gray-100 */
}

/* Paragraphs and general text */
html[data-mode=dark] p {
  color: #d1d5db; /* gray-300 */
}

/* Links */
html[data-mode=dark] a:not(.btn):not([class*="text-"]) {
  color: #93c5fd; /* blue-300 */
}

html[data-mode=dark] a:not(.btn):not([class*="text-"]):hover {
  color: #bfdbfe; /* blue-200 */
}

/* ==========================================================================
   Background Colors - Convert light backgrounds to dark
   ========================================================================== */

/* White backgrounds */
html[data-mode=dark] .bg-white {
  background-color: #1f2937 !important; /* gray-800 */
}

/* Gray-50 backgrounds */
html[data-mode=dark] .bg-gray-50 {
  background-color: #111827 !important; /* gray-900 */
}

/* Gray-100 backgrounds */
html[data-mode=dark] .bg-gray-100 {
  background-color: #1f2937 !important; /* gray-800 */
}

/* Gray-200 backgrounds */
html[data-mode=dark] .bg-gray-200 {
  background-color: #374151 !important; /* gray-700 */
}

/* Slate backgrounds */
html[data-mode=dark] .bg-slate-50 {
  background-color: #1e293b !important; /* slate-800 */
}

html[data-mode=dark] .bg-slate-100 {
  background-color: #1e293b !important; /* slate-800 */
}

/* ==========================================================================
   Hover Background Colors - Convert light hover backgrounds to dark
   ========================================================================== */

html[data-mode=dark] .hover\:bg-gray-50:hover {
  background-color: #374151 !important; /* gray-700 */
}

html[data-mode=dark] .hover\:bg-gray-100:hover {
  background-color: #374151 !important; /* gray-700 */
}

html[data-mode=dark] .hover\:bg-gray-200:hover {
  background-color: #4b5563 !important; /* gray-600 */
}

html[data-mode=dark] .hover\:bg-gray-300:hover {
  background-color: #4b5563 !important; /* gray-600 */
}

html[data-mode=dark] .hover\:bg-white:hover {
  background-color: #374151 !important; /* gray-700 */
}

/* ==========================================================================
   Text Colors - Convert dark text to light
   ========================================================================== */

/* Dark gray text */
html[data-mode=dark] .text-gray-900 {
  color: #f9fafb !important; /* gray-50 */
}

html[data-mode=dark] .text-gray-800 {
  color: #f3f4f6 !important; /* gray-100 */
}

html[data-mode=dark] .text-gray-700 {
  color: #e5e7eb !important; /* gray-200 */
}

html[data-mode=dark] .text-gray-600 {
  color: #d1d5db !important; /* gray-300 */
}

html[data-mode=dark] .text-gray-500 {
  color: #9ca3af !important; /* gray-400 */
}

/* Slate text colors */
html[data-mode=dark] .text-slate-900 {
  color: #f8fafc !important; /* slate-50 */
}

html[data-mode=dark] .text-slate-800 {
  color: #f1f5f9 !important; /* slate-100 */
}

html[data-mode=dark] .text-slate-700 {
  color: #e2e8f0 !important; /* slate-200 */
}

html[data-mode=dark] .text-slate-600 {
  color: #cbd5e1 !important; /* slate-300 */
}

html[data-mode=dark] .text-slate-500 {
  color: #94a3b8 !important; /* slate-400 */
}

/* Black text */
html[data-mode=dark] .text-black {
  color: #f9fafb !important; /* gray-50 */
}

/* ==========================================================================
   Border Colors - Convert light borders to dark
   ========================================================================== */

html[data-mode=dark] .border-gray-100 {
  border-color: #374151 !important; /* gray-700 */
}

html[data-mode=dark] .border-gray-200 {
  border-color: #4b5563 !important; /* gray-600 */
}

html[data-mode=dark] .border-gray-300 {
  border-color: #4b5563 !important; /* gray-600 */
}

html[data-mode=dark] .border-slate-200 {
  border-color: #475569 !important; /* slate-600 */
}

html[data-mode=dark] .border-slate-300 {
  border-color: #475569 !important; /* slate-600 */
}

/* Divide colors */
html[data-mode=dark] .divide-gray-100 > :not([hidden]) ~ :not([hidden]) {
  border-color: #374151 !important; /* gray-700 */
}

html[data-mode=dark] .divide-gray-200 > :not([hidden]) ~ :not([hidden]) {
  border-color: #4b5563 !important; /* gray-600 */
}

/* ==========================================================================
   Cards
   ========================================================================== */

html[data-mode=dark] .card {
  background-color: #1f2937; /* gray-800 */
  border-color: #374151; /* gray-700 */
}

html[data-mode=dark] .card-header {
  border-color: #374151; /* gray-700 */
}

html[data-mode=dark] .card-footer {
  border-color: #374151; /* gray-700 */
  background-color: #111827; /* gray-900 */
}

html[data-mode=dark] .card-title {
  color: #e2e8f0; /* slate-200 */
}

/* ==========================================================================
   Tables
   ========================================================================== */

html[data-mode=dark] table {
  color: #e5e7eb; /* gray-200 */
}

html[data-mode=dark] thead {
  background-color: #1f2937; /* gray-800 */
}

html[data-mode=dark] thead th {
  color: #d1d5db; /* gray-300 */
  border-color: #374151; /* gray-700 */
}

html[data-mode=dark] tbody tr {
  border-color: #374151; /* gray-700 */
}

html[data-mode=dark] tbody td {
  border-color: #374151; /* gray-700 */
}

html[data-mode=dark] tbody tr:hover {
  background-color: #374151; /* gray-700 */
}

/* Striped tables */
html[data-mode=dark] .table-striped tbody tr:nth-child(odd) {
  background-color: #111827; /* gray-900 */
}

html[data-mode=dark] .table-striped tbody tr:nth-child(even) {
  background-color: #1f2937; /* gray-800 */
}

/* ==========================================================================
   Forms
   ========================================================================== */

/* Text inputs, textareas, selects */
html[data-mode=dark] input[type="text"],
html[data-mode=dark] input[type="email"],
html[data-mode=dark] input[type="password"],
html[data-mode=dark] input[type="number"],
html[data-mode=dark] input[type="url"],
html[data-mode=dark] input[type="search"],
html[data-mode=dark] input[type="tel"],
html[data-mode=dark] input[type="date"],
html[data-mode=dark] input[type="datetime-local"],
html[data-mode=dark] input[type="time"],
html[data-mode=dark] textarea,
html[data-mode=dark] select {
  background-color: #374151; /* gray-700 */
  border-color: #4b5563; /* gray-600 */
  color: #f3f4f6; /* gray-100 */
}

html[data-mode=dark] input::placeholder,
html[data-mode=dark] textarea::placeholder {
  color: #9ca3af; /* gray-400 */
}

html[data-mode=dark] input:focus,
html[data-mode=dark] textarea:focus,
html[data-mode=dark] select:focus {
  border-color: #6366f1; /* indigo-500 */
  background-color: #1f2937; /* gray-800 */
}

/* Form classes */
html[data-mode=dark] .form-input,
html[data-mode=dark] .form-textarea,
html[data-mode=dark] .form-select {
  background-color: #374151; /* gray-700 */
  border-color: #4b5563; /* gray-600 */
  color: #f3f4f6; /* gray-100 */
}

/* Labels */
html[data-mode=dark] label {
  color: #d1d5db; /* gray-300 */
}

/* Checkboxes and radios */
html[data-mode=dark] .form-checkbox,
html[data-mode=dark] .form-radio {
  background-color: #374151; /* gray-700 */
  border-color: #4b5563; /* gray-600 */
}

/* ==========================================================================
   Dropdowns and Menus
   ========================================================================== */

html[data-mode=dark] .dropdown-menu,
html[data-mode=dark] [data-fc-type="dropdown"] > div {
  background-color: #1f2937; /* gray-800 */
  border-color: #374151; /* gray-700 */
}

html[data-mode=dark] .dropdown-item {
  color: #e5e7eb; /* gray-200 */
}

html[data-mode=dark] .dropdown-item:hover {
  background-color: #374151; /* gray-700 */
}

/* ==========================================================================
   Modals
   ========================================================================== */

html[data-mode=dark] .modal-content,
html[data-mode=dark] [class*="fc-modal"] {
  background-color: #1f2937; /* gray-800 */
  border-color: #374151; /* gray-700 */
}

html[data-mode=dark] .modal-header {
  border-color: #374151; /* gray-700 */
}

html[data-mode=dark] .modal-footer {
  border-color: #374151; /* gray-700 */
}

/* ==========================================================================
   Alerts and Notifications
   ========================================================================== */

html[data-mode=dark] .alert {
  border-color: #374151; /* gray-700 */
}

/* ==========================================================================
   Badges
   ========================================================================== */

html[data-mode=dark] .badge-light {
  background-color: #374151; /* gray-700 */
  color: #e5e7eb; /* gray-200 */
}

/* ==========================================================================
   Lists
   ========================================================================== */

html[data-mode=dark] ul,
html[data-mode=dark] ol {
  color: #d1d5db; /* gray-300 */
}

html[data-mode=dark] li {
  color: inherit;
}

/* List group */
html[data-mode=dark] .list-group-item {
  background-color: #1f2937; /* gray-800 */
  border-color: #374151; /* gray-700 */
  color: #e5e7eb; /* gray-200 */
}

/* ==========================================================================
   Pagination
   ========================================================================== */

html[data-mode=dark] .pagination a,
html[data-mode=dark] .pagination span {
  background-color: #1f2937; /* gray-800 */
  border-color: #374151; /* gray-700 */
  color: #e5e7eb; /* gray-200 */
}

html[data-mode=dark] .pagination a:hover {
  background-color: #374151; /* gray-700 */
}

/* ==========================================================================
   Code and Pre
   ========================================================================== */

html[data-mode=dark] code {
  background-color: #374151; /* gray-700 */
  color: #f472b6; /* pink-400 */
}

html[data-mode=dark] pre {
  background-color: #111827; /* gray-900 */
  border-color: #374151; /* gray-700 */
  color: #e5e7eb; /* gray-200 */
}

/* ==========================================================================
   Accordions
   ========================================================================== */

html[data-mode=dark] [data-fc-type="accordion"] {
  background-color: #1f2937; /* gray-800 */
  border-color: #374151; /* gray-700 */
}

html[data-mode=dark] [data-fc-type="accordion"] button {
  color: #e5e7eb; /* gray-200 */
}

/* ==========================================================================
   Tabs
   ========================================================================== */

html[data-mode=dark] .nav-tabs {
  border-color: #374151; /* gray-700 */
}

html[data-mode=dark] .nav-tabs .nav-link {
  color: #9ca3af; /* gray-400 */
}

html[data-mode=dark] .nav-tabs .nav-link.active {
  background-color: #1f2937; /* gray-800 */
  color: #f3f4f6; /* gray-100 */
  border-color: #374151; /* gray-700 */
}

/* ==========================================================================
   Tooltips
   ========================================================================== */

html[data-mode=dark] .tooltip {
  background-color: #374151; /* gray-700 */
  color: #f3f4f6; /* gray-100 */
}

/* ==========================================================================
   Scrollbars
   ========================================================================== */

html[data-mode=dark] ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

html[data-mode=dark] ::-webkit-scrollbar-track {
  background-color: #1f2937; /* gray-800 */
}

html[data-mode=dark] ::-webkit-scrollbar-thumb {
  background-color: #4b5563; /* gray-600 */
  border-radius: 4px;
}

html[data-mode=dark] ::-webkit-scrollbar-thumb:hover {
  background-color: #6b7280; /* gray-500 */
}

/* ==========================================================================
   Shadows - Softer shadows for dark mode
   ========================================================================== */

html[data-mode=dark] .shadow,
html[data-mode=dark] .shadow-sm,
html[data-mode=dark] .shadow-md,
html[data-mode=dark] .shadow-lg {
  --tw-shadow-color: rgba(0, 0, 0, 0.5);
}

/* ==========================================================================
   Ring colors
   ========================================================================== */

html[data-mode=dark] .ring-gray-200 {
  --tw-ring-color: #374151; /* gray-700 */
}

html[data-mode=dark] .ring-gray-300 {
  --tw-ring-color: #4b5563; /* gray-600 */
}

/* ==========================================================================
   Specific Component Overrides
   ========================================================================== */

/* Simplebar scrollbar */
html[data-mode=dark] .simplebar-scrollbar::before {
  background-color: #4b5563; /* gray-600 */
}

/* Search inputs */
html[data-mode=dark] [type="search"] {
  background-color: #374151; /* gray-700 */
  color: #f3f4f6; /* gray-100 */
}

/* File inputs */
html[data-mode=dark] input[type="file"] {
  color: #e5e7eb; /* gray-200 */
}

html[data-mode=dark] input[type="file"]::file-selector-button {
  background-color: #374151; /* gray-700 */
  border-color: #4b5563; /* gray-600 */
  color: #f3f4f6; /* gray-100 */
}

/* HR elements */
html[data-mode=dark] hr {
  border-color: #374151; /* gray-700 */
}

/* Blockquotes */
html[data-mode=dark] blockquote {
  border-color: #4b5563; /* gray-600 */
  color: #d1d5db; /* gray-300 */
}

/* Figure captions */
html[data-mode=dark] figcaption {
  color: #9ca3af; /* gray-400 */
}

/* ==========================================================================
   Markdown content
   ========================================================================== */

html[data-mode=dark] .markdown-content {
  color: #e5e7eb; /* gray-200 */
}

html[data-mode=dark] .markdown-content h1,
html[data-mode=dark] .markdown-content h2,
html[data-mode=dark] .markdown-content h3,
html[data-mode=dark] .markdown-content h4,
html[data-mode=dark] .markdown-content h5,
html[data-mode=dark] .markdown-content h6 {
  color: #f3f4f6; /* gray-100 */
}

html[data-mode=dark] .markdown-content a {
  color: #93c5fd; /* blue-300 */
}

html[data-mode=dark] .markdown-content code {
  background-color: #374151; /* gray-700 */
  color: #f472b6; /* pink-400 */
}

html[data-mode=dark] .markdown-content pre {
  background-color: #111827; /* gray-900 */
}

html[data-mode=dark] .markdown-content blockquote {
  border-left-color: #6366f1; /* indigo-500 */
  background-color: #1f2937; /* gray-800 */
}

html[data-mode=dark] .markdown-content table th {
  background-color: #374151; /* gray-700 */
}

html[data-mode=dark] .markdown-content table td,
html[data-mode=dark] .markdown-content table th {
  border-color: #4b5563; /* gray-600 */
}

/* ==========================================================================
   Colored Badges/Tags - Better contrast for dark mode
   Light backgrounds (100) get converted to saturated mid-tones (700)
   Dark text (800) gets converted to light text (100-200)
   ========================================================================== */

/* Orange badges */
html[data-mode=dark] .bg-orange-100 {
  background-color: #c05621 !important; /* orange-700 */
}

html[data-mode=dark] .text-orange-800 {
  color: #fffaf0 !important; /* orange-50 */
}

/* Red badges */
html[data-mode=dark] .bg-red-100 {
  background-color: #b91c1c !important; /* red-700 */
}

html[data-mode=dark] .text-red-800 {
  color: #fef2f2 !important; /* red-50 */
}

/* Green badges */
html[data-mode=dark] .bg-green-100 {
  background-color: #047857 !important; /* green-700 */
}

html[data-mode=dark] .text-green-800 {
  color: #ecfdf5 !important; /* green-50 */
}

/* Blue badges */
html[data-mode=dark] .bg-blue-100 {
  background-color: #1d4ed8 !important; /* blue-700 */
}

html[data-mode=dark] .text-blue-800 {
  color: #eff6ff !important; /* blue-50 */
}

/* Yellow badges */
html[data-mode=dark] .bg-yellow-100 {
  background-color: #b45309 !important; /* yellow-700 */
}

html[data-mode=dark] .text-yellow-800 {
  color: #fffbeb !important; /* yellow-50 */
}

/* Purple badges */
html[data-mode=dark] .bg-purple-100 {
  background-color: #6d28d9 !important; /* purple-700 */
}

html[data-mode=dark] .text-purple-800 {
  color: #f5f3ff !important; /* purple-50 */
}

/* Indigo badges */
html[data-mode=dark] .bg-indigo-100 {
  background-color: #4338ca !important; /* indigo-700 */
}

html[data-mode=dark] .text-indigo-800 {
  color: #eef2ff !important; /* indigo-50 */
}

/* Pink badges */
html[data-mode=dark] .bg-pink-100 {
  background-color: #be185d !important; /* pink-700 */
}

html[data-mode=dark] .text-pink-800 {
  color: #fdf2f8 !important; /* pink-50 */
}

/* Teal badges */
html[data-mode=dark] .bg-teal-100 {
  background-color: #0f766e !important; /* teal-700 */
}

html[data-mode=dark] .text-teal-800 {
  color: #f0fdfa !important; /* teal-50 */
}

/* Cyan badges */
html[data-mode=dark] .bg-cyan-100 {
  background-color: #0e7490 !important; /* cyan-700 */
}

html[data-mode=dark] .text-cyan-800 {
  color: #ecfeff !important; /* cyan-50 */
}

/* Emerald badges */
html[data-mode=dark] .bg-emerald-100 {
  background-color: #047857 !important; /* emerald-700 */
}

html[data-mode=dark] .text-emerald-800 {
  color: #ecfdf5 !important; /* emerald-50 */
}

/* Lime badges */
html[data-mode=dark] .bg-lime-100 {
  background-color: #4d7c0f !important; /* lime-700 */
}

html[data-mode=dark] .text-lime-800 {
  color: #f7fee7 !important; /* lime-50 */
}

/* Amber badges */
html[data-mode=dark] .bg-amber-100 {
  background-color: #b45309 !important; /* amber-700 */
}

html[data-mode=dark] .text-amber-800 {
  color: #fffbeb !important; /* amber-50 */
}

/* Sky badges */
html[data-mode=dark] .bg-sky-100 {
  background-color: #0369a1 !important; /* sky-700 */
}

html[data-mode=dark] .text-sky-800 {
  color: #f0f9ff !important; /* sky-50 */
}

/* Violet badges */
html[data-mode=dark] .bg-violet-100 {
  background-color: #6d28d9 !important; /* violet-700 */
}

html[data-mode=dark] .text-violet-800 {
  color: #f5f3ff !important; /* violet-50 */
}

/* Fuchsia badges */
html[data-mode=dark] .bg-fuchsia-100 {
  background-color: #a21caf !important; /* fuchsia-700 */
}

html[data-mode=dark] .text-fuchsia-800 {
  color: #fdf4ff !important; /* fuchsia-50 */
}

/* Rose badges */
html[data-mode=dark] .bg-rose-100 {
  background-color: #be123c !important; /* rose-700 */
}

html[data-mode=dark] .text-rose-800 {
  color: #fff1f2 !important; /* rose-50 */
}
/* ==========================================================================
   Responsive Width Utilities - Missing from base Tailwind
   These supplement the pre-compiled Tailwind CSS with responsive widths
   ========================================================================== */

/* Medium breakpoint (≥768px) width utilities */
@media (min-width: 768px) {
  .md\:w-1\/3 {
    width: 33.333333%;
  }

  .md\:w-2\/3 {
    width: 66.666667%;
  }

  .md\:w-1\/4 {
    width: 25%;
  }

  .md\:w-3\/4 {
    width: 75%;
  }

  .md\:w-1\/2 {
    width: 50%;
  }

  .md\:w-auto {
    width: auto;
  }

  .md\:w-full {
    width: 100%;
  }

  /* Flex direction utilities */
  .md\:flex-row {
    flex-direction: row;
  }

  .md\:flex-col {
    flex-direction: column;
  }

  .md\:flex-wrap {
    flex-wrap: wrap;
  }

  .md\:flex-nowrap {
    flex-wrap: nowrap;
  }
}