@tailwind base;
@tailwind components;
@tailwind utilities;

/* ===== GLOBAL FONT FAMILY & REDUCED BOLDNESS ===== */
html, body, button, input, select, textarea, p, span, div, a, table, th, td {
  font-family: 'Poppins', sans-serif !important;
  font-weight: 400;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Poppins', sans-serif !important;
  font-weight: 600 !important;
}

.font-bonheur {
  font-family: 'Bonheur Royale', cursive !important;
}

/* ===== GLOBAL SMOOTH TRANSITIONS ===== */
html {
  scroll-behavior: smooth;
}

* {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ===== ANIMATIONS ===== */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in-up {
  animation: fadeInUp 0.5s ease-out both;
}

/* ===== CUSTOM SCROLLBAR ===== */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  @apply bg-blue-gray-200 rounded-full;
}

::-webkit-scrollbar-thumb:hover {
  @apply bg-blue-gray-300;
}

.dark ::-webkit-scrollbar-thumb {
  @apply bg-gray-700;
}

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

/* ===== HIDE SCROLLBAR UTILITY ===== */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}


/* ===== GLOBAL TABLE OVERRIDES ===== */
table th {
  color: #000000 !important;
  font-weight: 700 !important;
}
table td {
  color: #000000 !important;
  font-weight: 500 !important;
}

.dark table th {
  color: #ffffff !important;
}
.dark table td {
  color: #d1d5db !important;
}

/* ===== MODERN TABLE STYLES ===== */
.modern-table {
  @apply w-full text-left border-collapse;
}

.modern-table th {
  @apply border-b border-blue-gray-100 bg-blue-gray-50/50 p-4 text-sm font-bold uppercase tracking-wider text-black whitespace-nowrap;
}

.modern-table td {
  @apply border-b border-blue-gray-50 p-4 text-sm font-medium text-black transition-colors;
}

.modern-table tbody tr {
  @apply hover:bg-blue-gray-50/50 transition-colors duration-200;
}

.dark .modern-table th {
  @apply border-gray-700 bg-gray-800 text-white;
}

.dark .modern-table td {
  @apply border-gray-700 text-gray-300;
}

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

/* ===== GLOBAL INPUT & SELECT STYLES ===== */
input, textarea {
  @apply transition-all duration-200 outline-none;
}

/* ===== MODERN SELECT & DROPDOWN STYLING ===== */
select, .modern-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2' stroke='%2523455A64'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19.5 8.25l-7.5 7.5-7.5-7.5' /%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
  background-size: 1.1em 1.1em;
  padding-right: 2.5rem !important;
  @apply rounded-xl border border-blue-gray-200 bg-white/90 backdrop-blur-md px-4 py-3 text-sm font-semibold text-blue-gray-800 shadow-sm transition-all duration-200 hover:border-blue-400 focus:border-blue-500 focus:ring-2 focus:ring-blue-500 cursor-pointer outline-none dark:border-gray-700 dark:bg-gray-800/90 dark:text-white dark:hover:border-blue-400 dark:focus:border-blue-400;
}

.dark select, .dark .modern-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2' stroke='%252390A4AE'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19.5 8.25l-7.5 7.5-7.5-7.5' /%3E%3C/svg%3E");
}

select option {
  @apply bg-white text-blue-gray-800 font-medium py-2.5 px-3 dark:bg-gray-800 dark:text-white;
}
/* ===== GLOBAL LABEL & PLACEHOLDER OVERRIDES ===== */
label {
  color: #111827 !important;
  font-weight: 500 !important;
}
.dark label {
  color: #f3f4f6 !important;
}

::placeholder,
.peer-placeholder-shown ~ label {
  color: #374151 !important;
  font-weight: 500 !important;
}

.dark ::placeholder,
.dark .peer-placeholder-shown ~ label {
  color: #d1d5db !important;
}

input::placeholder,
textarea::placeholder {
  color: #4b5563 !important;
  font-weight: 500 !important;
  opacity: 1 !important;
}

.dark input::placeholder,
.dark textarea::placeholder {
  color: #9ca3af !important;
}