/* ========================================
   Dark Mode Enhancements - Gestion Patrimoine
   ======================================== */

/* Root Dark Mode Settings */
html.dark {
  color-scheme: dark;
}

/* ========================================
   BODY & BACKGROUNDS
   ======================================== */

html.dark body {
  @apply bg-gray-900 text-gray-100;
}

html.dark main,
html.dark [role="main"] {
  @apply bg-gray-900 text-gray-100;
}

/* ========================================
   TEXT COLORS - Textes principaux
   ======================================== */

html.dark p,
html.dark span,
html.dark label,
html.dark td,
html.dark th,
html.dark li,
html.dark div {
  @apply text-gray-200;
}

html.dark h1,
html.dark h2,
html.dark h3,
html.dark h4,
html.dark h5,
html.dark h6 {
  @apply text-white;
}

html.dark a {
  @apply text-blue-400 hover:text-blue-300;
}

/* ========================================
   CONTAINER & BOX STYLES
   ======================================== */

html.dark .modal,
html.dark [role="dialog"],
html.dark .card,
html.dark .form-group,
html.dark .box,
html.dark .panel,
html.dark .container-fluid,
html.dark .container {
  @apply bg-gray-800 text-gray-100;
}

html.dark .card-body,
html.dark .modal-body {
  @apply bg-gray-800 text-gray-200;
}

html.dark .card-header,
html.dark .modal-header,
html.dark .panel-heading {
  @apply bg-gray-700 text-white border-gray-600;
}

html.dark .card-footer,
html.dark .modal-footer,
html.dark .panel-footer {
  @apply bg-gray-700 text-gray-200 border-gray-600;
}

/* ========================================
   INPUT & FORM STYLES
   ======================================== */

html.dark input[type="text"],
html.dark input[type="email"],
html.dark input[type="password"],
html.dark input[type="number"],
html.dark input[type="date"],
html.dark input[type="datetime-local"],
html.dark input[type="time"],
html.dark textarea,
html.dark select {
  @apply bg-gray-800 text-gray-100 border-gray-600;
}

html.dark input::placeholder,
html.dark textarea::placeholder {
  @apply text-gray-500;
}

html.dark input:focus,
html.dark textarea:focus,
html.dark select:focus {
  @apply border-blue-500 bg-gray-800 text-gray-100 ring-blue-500;
}

/* Spécifique pour la barre de recherche dans la navigation */
html.dark #global-search-input {
  @apply bg-gray-800 text-gray-200 border-gray-700 placeholder-gray-500;
}

/* ========================================
   TABLE STYLES
   ======================================== */

html.dark table {
  @apply bg-gray-800 text-gray-200;
}

html.dark thead {
  @apply bg-gray-700 text-white;
}

html.dark tbody tr:hover {
  @apply bg-gray-700/50;
}

html.dark td,
html.dark th {
  @apply border-gray-700 text-gray-200;
}

/* ========================================
   BUTTON STYLES
   ======================================== */

html.dark .btn,
html.dark button,
html.dark input[type="button"],
html.dark input[type="submit"] {
  @apply bg-gray-700 text-gray-100 border-gray-600 hover:bg-gray-600;
}

html.dark .btn-primary,
html.dark button.btn-primary {
  @apply bg-blue-600 text-white hover:bg-blue-700;
}

html.dark .btn-secondary {
  @apply bg-gray-700 text-gray-100 hover:bg-gray-600;
}

html.dark .btn:disabled,
html.dark button:disabled {
  @apply opacity-50 cursor-not-allowed;
}

/* ========================================
   DROPDOWN & MENU STYLES
   ======================================== */

html.dark .dropdown-menu,
html.dark [role="menu"],
html.dark .popover {
  @apply bg-gray-800 text-gray-200 border-gray-600;
}

html.dark .dropdown-item,
html.dark [role="menuitem"] {
  @apply text-gray-300 hover:bg-gray-700 hover:text-white;
}

html.dark .dropdown-divider {
  @apply border-gray-600;
}

/* Modal & Dialog Styles */
html.dark .modal,
html.dark [role="dialog"] {
  @apply bg-gray-800 border-gray-700;
}

html.dark .modal-header,
html.dark .modal-footer {
  @apply bg-gray-700 border-gray-600;
}

html.dark .modal-content {
  @apply bg-gray-800;
}

/* Global Search Dropdown */
html.dark [x-data*="globalSearchData"] > div {
  @apply bg-gray-800 border-gray-700;
}

html.dark [x-data*="globalSearchData"] ul {
  @apply divide-gray-700 bg-gray-800;
}

html.dark [x-data*="globalSearchData"] li a {
  @apply hover:bg-gray-700;
}

/* ========================================
   ALERT & MESSAGE STYLES
   ======================================== */

html.dark .alert {
  @apply bg-gray-800 text-gray-200 border-gray-700;
}

html.dark .alert-info {
  @apply bg-blue-900/30 text-blue-300 border-blue-700;
}

html.dark .alert-success {
  @apply bg-green-900/30 text-green-300 border-green-700;
}

html.dark .alert-warning {
  @apply bg-yellow-900/30 text-yellow-300 border-yellow-700;
}

html.dark .alert-danger {
  @apply bg-red-900/30 text-red-300 border-red-700;
}

/* ========================================
   SIDEBAR & NAVIGATION
   ======================================== */

html.dark aside,
html.dark nav,
html.dark .sidebar,
html.dark .navbar {
  @apply bg-gray-800 border-gray-700 text-gray-200;
}

html.dark .sidebar-menu a,
html.dark nav a {
  @apply text-gray-300 hover:text-white hover:bg-gray-700;
}

html.dark .sidebar-menu .active,
html.dark nav .active {
  @apply bg-gray-700 text-white;
}

/* ========================================
   SCROLLBAR STYLES
   ======================================== */

html.dark ::-webkit-scrollbar {
  @apply w-2 h-2;
}

html.dark ::-webkit-scrollbar-track {
  @apply bg-gray-800;
}

html.dark ::-webkit-scrollbar-thumb {
  @apply bg-gray-600 rounded;
}

html.dark ::-webkit-scrollbar-thumb:hover {
  @apply bg-gray-500;
}

/* ========================================
   BORDER & DIVIDER
   ======================================== */

html.dark hr,
html.dark .divider {
  @apply border-gray-700;
}

html.dark .border {
  @apply border-gray-700;
}

/* ========================================
   BADGE & PILL STYLES
   ======================================== */

html.dark .badge,
html.dark .pill {
  @apply bg-gray-700 text-gray-100;
}

html.dark .badge-primary {
  @apply bg-blue-600 text-white;
}

html.dark .badge-secondary {
  @apply bg-gray-600 text-gray-100;
}

/* ========================================
   TOOLTIP & POPOVER
   ======================================== */

html.dark .tooltip {
  @apply bg-gray-900 text-gray-100 border-gray-700;
}

html.dark .popover {
  @apply bg-gray-800 text-gray-200 border-gray-700;
}

/* ========================================
   CODE & PREFORMATTED TEXT
   ======================================== */

html.dark code,
html.dark pre {
  @apply bg-gray-700 text-gray-100;
}

html.dark .code-block {
  @apply bg-gray-700 text-gray-100 border-gray-600;
}

/* ========================================
   PRELINE UI OVERRIDES
   ======================================== */

html.dark .hs-form-field {
  @apply bg-gray-800;
}

html.dark .hs-form-field input,
html.dark .hs-form-field textarea {
  @apply bg-gray-800 text-gray-100 border-gray-600;
}

/* ========================================
   NEUTRAL TO GRAY CONVERSION
   Convert dark:bg-neutral-* to dark:bg-gray-*
   ======================================== */

html.dark .dark\:bg-neutral-900 {
  @apply bg-gray-900;
}

html.dark .dark\:bg-neutral-800 {
  @apply bg-gray-800;
}

html.dark .dark\:bg-neutral-700 {
  @apply bg-gray-700;
}

html.dark .dark\:border-neutral-700 {
  @apply border-gray-700;
}

html.dark .dark\:border-neutral-800 {
  @apply border-gray-800;
}

html.dark .dark\:text-neutral-400 {
  @apply text-gray-400;
}

html.dark .dark\:text-neutral-200 {
  @apply text-gray-200;
}

/* ========================================
   UTILITY NEUTRALIZERS
   ======================================== */

html.dark .bg-base-100 {
  @apply bg-gray-900;
}

html.dark .base-content {
  @apply text-gray-100;
}

html.dark .base-content\/70 {
  @apply text-gray-400;
}

/* ========================================
   SPECIAL ELEMENTS
   ======================================== */

html.dark select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%238b92a1' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
  background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 16px 12px;
  padding-right: 2.5rem;
}

/* DataTables Dark Mode */
html.dark .dataTables_wrapper {
  @apply text-gray-200;
}

html.dark .dataTables_length,
html.dark .dataTables_filter,
html.dark .dataTables_info {
  @apply text-gray-300;
}

html.dark .dataTables_paginate {
  @apply text-gray-300;
}

html.dark .paginate_button {
  @apply bg-gray-700 text-gray-200 border-gray-600 hover:bg-gray-600 hover:text-white;
}

html.dark .paginate_button.current {
  @apply bg-blue-600 text-white border-blue-600;
}

/* ========================================
   FOCUS & ACTIVE STATES
   ======================================== */

html.dark *:focus {
  @apply outline-none ring-2 ring-blue-500 ring-offset-2 ring-offset-gray-900;
}

html.dark input:focus,
html.dark textarea:focus,
html.dark select:focus {
  @apply ring-blue-500;
}

/* ========================================
   FORCED DARK MODE FOR CERTAIN ELEMENTS
   ======================================== */

html.dark {
  /* Force all text to be visible in dark mode */
  --tw-text-opacity: 1;
}

html.dark * {
  /* Reset any inline styles that might conflict */
  color: inherit;
}