@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,500;12..96,600;12..96,700;12..96,800&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

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

@layer base {
  html {
    @apply scroll-smooth;
  }

  body {
    @apply bg-[#f7f8fa] text-surface-800 dark:bg-surface-950 dark:text-surface-100 antialiased;
    font-feature-settings: "cv11", "ss01";
  }

  h1, h2, h3, h4, h5, h6 {
    @apply font-display;
  }

  /* Custom selection color */
  ::selection {
    @apply bg-primary-200 dark:bg-primary-800;
  }
}

@layer components {
  /* === BUTTONS === */
  .btn {
    @apply inline-flex items-center justify-center gap-2 px-4 py-2.5 text-sm font-semibold rounded-xl transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed;
  }

  .btn-sm {
    @apply px-3 py-1.5 text-xs rounded-lg;
  }

  .btn-lg {
    @apply px-6 py-3 text-base rounded-2xl;
  }

  .btn-primary {
    @apply bg-primary-600 text-white hover:bg-primary-700 focus:ring-primary-500 shadow-soft hover:shadow-soft-lg hover:-translate-y-0.5 active:translate-y-0 dark:focus:ring-offset-surface-900;
  }

  .btn-secondary {
    @apply bg-white text-surface-700 border border-surface-200 hover:bg-surface-50 hover:border-surface-300 focus:ring-surface-500 dark:bg-surface-800 dark:text-surface-200 dark:border-surface-700 dark:hover:bg-surface-700 dark:hover:border-surface-600;
  }

  .btn-success {
    @apply bg-success-600 text-white hover:bg-success-700 focus:ring-success-500 shadow-soft;
  }

  .btn-danger {
    @apply bg-danger-600 text-white hover:bg-danger-700 focus:ring-danger-500 shadow-soft;
  }

  .btn-warning {
    @apply bg-warning-500 text-white hover:bg-warning-600 focus:ring-warning-500 shadow-soft;
  }

  .btn-ghost {
    @apply text-surface-600 hover:bg-surface-100 hover:text-surface-900 dark:text-surface-400 dark:hover:bg-surface-800 dark:hover:text-surface-100;
  }

  .btn-icon {
    @apply p-2 rounded-xl text-surface-500 hover:bg-surface-100 hover:text-surface-700 dark:hover:bg-surface-800 dark:hover:text-surface-300 transition-colors;
  }

  /* === CARDS === */
  .card {
    @apply bg-white dark:bg-surface-900 rounded-2xl shadow-soft border border-surface-200/60 dark:border-surface-800/60;
  }

  .card-hover {
    @apply card hover:shadow-soft-lg hover:border-surface-300 dark:hover:border-surface-700 transition-all duration-300;
  }

  .stat-card {
    @apply card p-5 relative overflow-hidden;
  }

  /* === INPUTS === */
  .input {
    @apply block w-full px-4 py-2.5 text-sm rounded-xl border border-surface-300 bg-white shadow-inner-soft placeholder:text-surface-400 focus:border-primary-500 focus:ring-2 focus:ring-primary-500/20 focus:outline-none transition-all dark:bg-surface-900 dark:border-surface-700 dark:text-white dark:placeholder:text-surface-500 dark:focus:border-primary-500;
  }

  .label {
    @apply block text-sm font-medium text-surface-700 dark:text-surface-300 mb-1.5;
  }

  .input-group {
    @apply relative;
  }

  .input-icon {
    @apply absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-surface-400;
  }

  .input-with-icon {
    @apply pl-10;
  }

  /* === BADGES === */
  .badge {
    @apply inline-flex items-center gap-1 px-2.5 py-1 rounded-lg text-xs font-medium;
  }

  .badge-success {
    @apply bg-success-100 text-success-700 dark:bg-success-900/40 dark:text-success-400;
  }

  .badge-warning {
    @apply bg-warning-100 text-warning-700 dark:bg-warning-900/40 dark:text-warning-400;
  }

  .badge-danger {
    @apply bg-danger-100 text-danger-700 dark:bg-danger-900/40 dark:text-danger-400;
  }

  .badge-primary {
    @apply bg-primary-100 text-primary-700 dark:bg-primary-900/40 dark:text-primary-400;
  }

  .badge-secondary {
    @apply bg-surface-100 text-surface-600 dark:bg-surface-800 dark:text-surface-400;
  }

  .badge-yellow {
    @apply bg-yellow-100 text-yellow-700 dark:bg-yellow-900/40 dark:text-yellow-400;
  }

  /* === TABLES === */
  .table-container {
    @apply overflow-x-auto;
  }

  .table-scroll {
    @apply max-h-96 overflow-y-auto;
  }

  .table {
    @apply w-full text-left text-sm;
  }

  .table thead {
    @apply sticky top-0 z-10;
  }

  .table th {
    @apply px-4 py-3 text-xs font-semibold text-surface-500 uppercase tracking-wider bg-surface-50 dark:bg-surface-800/80 dark:text-surface-400 border-b border-surface-200 dark:border-surface-700;
  }

  .table td {
    @apply px-4 py-3 text-surface-700 dark:text-surface-300 border-b border-surface-100 dark:border-surface-800;
  }

  .table tbody tr {
    @apply transition-colors hover:bg-surface-50 dark:hover:bg-surface-800/50;
  }

  /* === NAVIGATION === */
  .nav-link {
    @apply flex items-center gap-3 px-4 py-2.5 text-sm font-medium rounded-xl transition-all duration-200 text-surface-600 hover:bg-surface-100 hover:text-surface-900 dark:text-surface-400 dark:hover:bg-surface-800 dark:hover:text-white;
  }

  .nav-link-active {
    @apply bg-primary-50 text-primary-700 dark:bg-primary-900/30 dark:text-primary-400;
  }

  /* === TYPOGRAPHY === */
  .section-title {
    @apply font-display text-2xl font-bold text-surface-900 dark:text-white tracking-tight;
  }

  .section-subtitle {
    @apply text-sm text-surface-500 dark:text-surface-400 mt-1;
  }

  /* === AMOUNTS === */
  .amount-positive {
    @apply text-success-600 dark:text-success-400 font-semibold;
  }

  .amount-negative {
    @apply text-danger-600 dark:text-danger-400 font-semibold;
  }

  .trend-up {
    @apply text-success-600 dark:text-success-400;
  }

  .trend-down {
    @apply text-danger-600 dark:text-danger-400;
  }

  /* === ALERTS === */
  .alert {
    @apply p-4 rounded-xl border flex items-start gap-3;
  }

  .alert-success {
    @apply bg-success-50 border-success-200 text-success-800 dark:bg-success-900/20 dark:border-success-800/50 dark:text-success-400;
  }

  .alert-warning {
    @apply bg-warning-50 border-warning-200 text-warning-800 dark:bg-warning-900/20 dark:border-warning-800/50 dark:text-warning-400;
  }

  .alert-danger {
    @apply bg-danger-50 border-danger-200 text-danger-800 dark:bg-danger-900/20 dark:border-danger-800/50 dark:text-danger-400;
  }

  .alert-info {
    @apply bg-primary-50 border-primary-200 text-primary-800 dark:bg-primary-900/20 dark:border-primary-800/50 dark:text-primary-400;
  }

  /* === CHARTS === */
  .chart-container {
    @apply relative h-64;
  }

  /* === MISC === */
  .divider {
    @apply border-t border-surface-200 dark:border-surface-800;
  }

  /* === FORM WIDGETS === */
  .money-widget {
    @apply relative;
  }

  .money-widget input {
    @apply pr-10;
  }

  .money-widget .currency-symbol {
    @apply absolute right-3 top-1/2 -translate-y-1/2 text-surface-500 dark:text-surface-400 pointer-events-none font-medium;
  }
}

/* Animation delays */
.delay-1 { animation-delay: 0.1s; }
.delay-2 { animation-delay: 0.2s; }
.delay-3 { animation-delay: 0.3s; }
.delay-4 { animation-delay: 0.4s; }
.delay-5 { animation-delay: 0.5s; }

/* Opacity zero for animated elements */
[class*="animate-"]:not(.animate-spin) {
  opacity: 0;
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  @apply bg-transparent;
}

::-webkit-scrollbar-thumb {
  @apply bg-surface-300 dark:bg-surface-700 rounded-full;
}

::-webkit-scrollbar-thumb:hover {
  @apply bg-surface-400 dark:bg-surface-600;
}

/* === FLATPICKR CUSTOM STYLES === */
.flatpickr-calendar {
  @apply bg-white dark:bg-surface-800 shadow-soft-xl border border-surface-200 dark:border-surface-700 rounded-2xl;
  font-family: inherit;
}

.flatpickr-months {
  @apply bg-primary-600 dark:bg-primary-700 rounded-t-2xl;
}

.flatpickr-current-month {
  @apply text-white;
}

.flatpickr-monthDropdown-months,
.numInputWrapper input {
  @apply text-white bg-transparent border-transparent;
}

.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
  @apply text-white hover:text-primary-100;
}

.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg {
  fill: currentColor;
}

.flatpickr-weekdays {
  @apply bg-surface-50 dark:bg-surface-700;
}

.flatpickr-weekday {
  @apply text-surface-700 dark:text-surface-300 font-semibold;
}

.flatpickr-day {
  @apply text-surface-700 dark:text-surface-300 border-transparent rounded-lg;
}

.flatpickr-day:hover:not(.flatpickr-disabled):not(.selected) {
  @apply bg-primary-50 dark:bg-primary-900/30 text-primary-600 dark:text-primary-400 border-transparent;
}

.flatpickr-day.today {
  @apply bg-primary-100 dark:bg-primary-900/50 text-primary-700 dark:text-primary-300 border-transparent font-bold;
}

.flatpickr-day.selected {
  @apply bg-primary-600 dark:bg-primary-500 text-white border-transparent;
}

.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
  @apply text-surface-400 dark:text-surface-600;
}

.flatpickr-day.disabled {
  @apply text-surface-300 dark:text-surface-700 cursor-not-allowed;
}

/* ================================================
   HOVER CARD — fiche détail au survol des lignes
   ================================================ */

/* Conteneur principal */
.hc {
  position: fixed;
  z-index: 9000;
  width: 308px;
  background: #ffffff;
  border: 1px solid #e5e5e5;
  border-radius: 14px;
  box-shadow:
    0 4px 6px -1px rgba(0, 0, 0, 0.06),
    0 12px 28px -4px rgba(0, 0, 0, 0.12),
    0 1px 3px rgba(0, 0, 0, 0.04);
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 13px;
  color: #171717;
  pointer-events: auto;
  overflow: hidden;
  opacity: 0;
  transform: translateX(10px) scale(0.98);
  transition: opacity 200ms cubic-bezier(0.16, 1, 0.3, 1),
              transform 200ms cubic-bezier(0.16, 1, 0.3, 1);
}

.hc--on {
  opacity: 1;
  transform: translateX(0) scale(1);
}

.dark .hc {
  background: #1c1c1c;
  border-color: #2e2e2e;
  box-shadow:
    0 4px 6px -1px rgba(0, 0, 0, 0.3),
    0 12px 28px -4px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(255, 255, 255, 0.04);
  color: #f5f5f5;
}

/* Barre d'accent colorée en haut */
.hc-bar {
  height: 3px;
  width: 100%;
}
.hc-bar--vi {
  background: linear-gradient(90deg, #4d44de 0%, #7d77ef 60%, #a9a3f8 100%);
}
.hc-bar--rd {
  background: linear-gradient(90deg, #dc2626 0%, #f87171 60%, #fca5a5 100%);
}

/* Corps intérieur */
.hc-bd {
  padding: 14px 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* En-tête */
.hc-hd {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding-bottom: 12px;
}

.hc-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 4px;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.06);
}
.dark .hc-dot {
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.06);
}

.hc-hd-text { flex: 1; min-width: 0; }

.hc-ttl {
  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #171717;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dark .hc-ttl { color: #f5f5f5; }

.hc-sub {
  font-size: 11.5px;
  color: #737373;
  margin-top: 2px;
  line-height: 1.4;
}
.dark .hc-sub { color: #a3a3a3; }

/* Mini-badges */
.hc-bdgs {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex-shrink: 0;
}

.hc-bdg {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 99px;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.hc-bdg--or { background: #fef3c7; color: #92400e; }
.hc-bdg--vi { background: #e4e2fe; color: #3c34c4; }
.dark .hc-bdg--or { background: rgba(245, 158, 11, 0.15); color: #fbbf24; }
.dark .hc-bdg--vi { background: rgba(77, 68, 222, 0.2); color: #a9a3f8; }

/* Séparateur */
.hc-sep { height: 1px; background: #e5e5e5; margin: 0 -16px; }
.dark .hc-sep { background: #2e2e2e; }

/* Bloc montants */
.hc-amts {
  padding: 11px 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.hc-amt-big {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 3px;
}

.hc-lbl {
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #a3a3a3;
}
.dark .hc-lbl { color: #737373; }

.hc-val {
  font-family: 'JetBrains Mono', monospace;
  font-size: 20px;
  font-weight: 600;
  color: #059669;
  letter-spacing: -0.03em;
  line-height: 1;
}
.hc-val--rd { color: #dc2626; }
.dark .hc-val { color: #34d399; }
.dark .hc-val--rd { color: #f87171; }

.hc-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: #737373;
}
.dark .hc-line { color: #a3a3a3; }

.hc-mono {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 500;
  color: #404040;
}
.dark .hc-mono { color: #d4d4d4; }

/* Parts Sécu / Mutuelle */
.hc-pts {
  padding: 11px 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.hc-pt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.hc-pt-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.hc-pt-lbl { font-size: 12px; color: #525252; font-weight: 500; }
.dark .hc-pt-lbl { color: #d4d4d4; }

/* Statut pill */
.hc-s {
  display: inline-flex;
  align-items: center;
  font-size: 10.5px;
  font-weight: 600;
  padding: 2px 9px;
  border-radius: 99px;
  white-space: nowrap;
  flex-shrink: 0;
}
.hc-s--paid { background: #d1fae5; color: #065f46; }
.hc-s--pend { background: #fef3c7; color: #92400e; }
.hc-s--bill { background: #e4e2fe; color: #3c34c4; }
.dark .hc-s--paid { background: rgba(5, 150, 105, 0.18); color: #34d399; }
.dark .hc-s--pend { background: rgba(245, 158, 11, 0.15); color: #fbbf24; }
.dark .hc-s--bill { background: rgba(77, 68, 222, 0.22); color: #a9a3f8; }

/* Barre de progression */
.hc-prog {
  height: 5px;
  background: #e5e5e5;
  border-radius: 99px;
  overflow: hidden;
  margin-top: 10px;
}
.dark .hc-prog { background: #2e2e2e; }

.hc-prog-fill {
  height: 100%;
  background: linear-gradient(90deg, #4d44de, #7d77ef);
  border-radius: 99px;
  transition: width 0.5s ease;
}

.hc-prog-lbl {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: #737373;
  margin-top: 5px;
  margin-bottom: 10px;
}
.dark .hc-prog-lbl { color: #a3a3a3; }
.hc-prog-lbl b { color: #171717; font-weight: 700; }
.dark .hc-prog-lbl b { color: #f5f5f5; }

/* Bloc méta */
.hc-meta {
  padding: 10px 0 2px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.hc-meta-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12px;
  color: #525252;
  line-height: 1.5;
}
.dark .hc-meta-row { color: #d4d4d4; }
.hc-meta-row--notes { color: #737373; font-style: italic; }
.dark .hc-meta-row--notes { color: #a3a3a3; }

.hc-ic {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  margin-top: 1px;
  color: #a3a3a3;
}
.hc-ic--vi { color: #4d44de; }
.dark .hc-ic { color: #525252; }
.dark .hc-ic--vi { color: #7d77ef; }

/* Curseur pointer sur les lignes cliquables */
[data-hc] { cursor: pointer; }