/* Tailwind-style semantic tokens (match tailwind.config theme.extend) */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

:root {
  --background: 0 0% 100%;
  --foreground: 222.2 84% 4.9%;
  --slate: 210 40% 98%;
  --slate-foreground: 222.2 47.4% 11.2%;
  --pink: 336 100% 65%;
  --pink-foreground: 0 0% 100%;
  --blue: 217 91% 60%;
  --blue-foreground: 0 0% 100%;
  --teal: 162 83% 40%;
  --teal-foreground: 0 0% 100%;
  --green: 142 71% 45%;
  --green-foreground: 0 0% 100%;
  --red: 0 84% 60%;
  --red-foreground: 0 0% 100%;
  --orange: 24 95% 53%;
  --orange-foreground: 0 0% 100%;
  --primary: var(--teal);
  --primary-foreground: var(--teal-foreground);
  --card: 0 0% 100%;
  --card-foreground: 222.2 84% 4.9%;
  --popover: 0 0% 100%;
  --popover-foreground: 222.2 84% 4.9%;
  --secondary: 210 40% 96.1%;
  --secondary-foreground: 222.2 47.4% 11.2%;
  --muted: 210 40% 96.1%;
  --muted-foreground: 215.4 16.3% 46.9%;
  --accent: 210 40% 96.1%;
  --accent-foreground: 222.2 47.4% 11.2%;
  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 210 40% 98%;
  --border: 214.3 31.8% 91.4%;
  --input: 214.3 31.8% 91.4%;
  --ring: 222.2 84% 4.9%;
  --radius: 0.5rem;
}

/* Dark theme monochrome: fond noir, gris plus foncé, outline blanc en opacité réduite */
.dark {
  --background: 0 0% 0%;
  --foreground: 0 0% 88%;
  --slate: 0 0% 5%;
  --slate-foreground: 0 0% 88%;
  --teal: 0 0% 65%;
  --teal-foreground: 0 0% 0%;
  --primary: 299 100% 83%;
  --primary-foreground: 0 0% 0%;
  --card: 0 0% 4%;
  --card-foreground: 0 0% 86%;
  --popover: 0 0% 4%;
  --popover-foreground: 0 0% 86%;
  --secondary: 0 0% 8%;
  --secondary-foreground: 0 0% 86%;
  --muted: 0 0% 8%;
  --muted-foreground: 0 0% 50%;
  --accent: 0 0% 10%;
  --accent-foreground: 0 0% 88%;
  --destructive: 0 0% 28%;
  --destructive-foreground: 0 0% 96%;
  --border: 0 0% 100%;
  --border-opacity: 0.12;
  --input: 0 0% 10%;
  --ring: 0 0% 100%;
  --ring-opacity: 0.2;
}

* { border-color: hsl(var(--border)); }
body { font-family: 'Poppins', sans-serif; background-color: hsl(var(--background)); color: hsl(var(--foreground)); }

/* Pages auth (login, forgot-password) : fond noir brut */
.auth-page {
  background-color: #000 !important;
}
.auth-page .min-h-screen > div {
  background-color: transparent;
}

/* Logo auth : Dashboard #e0e0e0, P!nk et V.0 #cccccc */
.auth-page .auth-logo-dashboard {
  color: #e0e0e0 !important;
}
.auth-logo-link {
  max-width: 100%;
}
.auth-logo-title {
  font-size: clamp(1.75rem, 6vw + 0.75rem, 2.75rem) !important;
  line-height: 1.15;
}
.auth-logo-accent {
  color: #fea7ff;
  background: linear-gradient(135deg, #fea7ff 0%, #fcc5ff 50%, #fea7ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.auth-logo-accent-sm {
  color: #fea7ff;
  background: linear-gradient(135deg, #fea7ff 0%, #fcc5ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  opacity: 0.95;
}

/* Checkbox "Se souvenir de moi" : accent #fea7ff */
.auth-remember-checkbox {
  width: 12px;
  height: 12px;
  border-width: 1px;
  accent-color: #fea7ff;
  cursor: pointer;
}
.auth-remember-checkbox:checked {
  background-color: #fea7ff;
}

/* Dark mode monochrome: outline blanc en opacité réduite */
html.dark,
html.dark *,
html.dark *::before,
html.dark *::after {
  border-color: hsl(var(--border) / var(--border-opacity, 0.12));
}

/* Header: allow dropdown to extend below */
.layout-header {
  overflow: visible;
}
.layout-header .container {
  overflow: visible;
}

/* Dark mode: footer, navbar, left panel en noir complet (outlines conservées) */
html.dark .layout-header,
html.dark .layout-footer,
html.dark .layout-sidebar,
html.dark .layout-sidebar .bg-card,
html.dark .mobile-drawer-content,
html.dark .mobile-drawer-content .bg-card {
  background-color: #000 !important;
}

/* Logo et accents en gris en dark (monochrome) */
html.dark .text-emerald-600,
html.dark .text-emerald-500,
html.dark [class*="emerald"] {
  color: hsl(0 0% 65%) !important;
}
html.dark .bg-teal-500 {
  background-color: hsl(0 0% 50%) !important;
}
/* Logo: dégradé gris en dark (monochrome) */
html.dark [class*="from-emerald-500"] {
  background: linear-gradient(to bottom right, hsl(0 0% 45%), hsl(0 0% 30%)) !important;
}

/* Footer: always visible with correct background and border */
.layout-footer {
  border-top-width: 1px;
  border-top-style: solid;
  background-color: hsl(var(--card)) !important;
  color: hsl(var(--card-foreground));
}
.layout-footer .container {
  padding-left: 1rem;
  padding-right: 30px;
  max-width: none;
  width: 100%;
}

/* Font Awesome: même famille, taille et alignement */
i[class^="fa-"],
i[class*=" fa-"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875em;
  width: 1.25em;
  height: 1.25em;
  color: currentColor;
  flex-shrink: 0;
}

/* Sidebar & mobile drawer: FA nav icons same visual size as SVG (h-5 w-5 = 1.25rem) */
.layout-sidebar nav i[class*="fa-"],
.mobile-drawer nav i[class*="fa-"] {
  font-size: 1rem !important;
  width: 1.25rem;
  height: 1.25rem;
}

/* Semantic color utilities */
.bg-background { background-color: hsl(var(--background)); }
.bg-card { background-color: hsl(var(--card)); }
.bg-primary { background-color: hsl(var(--primary)); }
.bg-primary\/10 { background-color: hsl(var(--primary) / 0.1); }
.bg-primary\/90 { background-color: hsl(var(--primary) / 0.9); }
.bg-secondary { background-color: hsl(var(--secondary)); }
.bg-secondary\/80 { background-color: hsl(var(--secondary) / 0.8); }
.bg-muted { background-color: hsl(var(--muted)); }
.bg-muted\/40 { background-color: hsl(var(--muted) / 0.4); }
.bg-accent { background-color: hsl(var(--accent)); }
.bg-accent\/50 { background-color: hsl(var(--accent) / 0.5); }
.bg-popover { background-color: hsl(var(--popover)); }
.bg-destructive { background-color: hsl(var(--destructive)); }
.bg-destructive\/90 { background-color: hsl(var(--destructive) / 0.9); }
.bg-destructive\/80 { background-color: hsl(var(--destructive) / 0.8); }
.bg-background\/80 { background-color: hsl(var(--background) / 0.8); }

.text-foreground { color: hsl(var(--foreground)); }
.text-foreground\/60 { color: hsl(var(--foreground) / 0.6); }
.text-foreground\/80 { color: hsl(var(--foreground) / 0.8); }
.text-primary { color: hsl(var(--primary)); }
.text-primary-foreground { color: hsl(var(--primary-foreground)); }
.text-card-foreground { color: hsl(var(--card-foreground)); }
.text-muted-foreground { color: hsl(var(--muted-foreground)); }
.text-popover-foreground { color: hsl(var(--popover-foreground)); }
.text-secondary-foreground { color: hsl(var(--secondary-foreground)); }
.text-accent-foreground { color: hsl(var(--accent-foreground)); }
.text-destructive { color: hsl(var(--destructive)); }
.text-destructive-foreground { color: hsl(var(--destructive-foreground)); }

.border-border { border-color: hsl(var(--border)); }
.border-border\/50 { border-color: hsl(var(--border) / 0.5); }
.border-input { border-color: hsl(var(--input)); }
.border-primary { border-color: hsl(var(--primary)); }
.border-destructive { border-color: hsl(var(--destructive)); }
.border-destructive\/50 { border-color: hsl(var(--destructive) / 0.5); }

.ring-ring { --tw-ring-color: hsl(var(--ring)); }

.placeholder\:text-muted-foreground::placeholder { color: hsl(var(--muted-foreground)); }

.shadow-primary\/20 { box-shadow: inset 0 0 0 1px hsl(var(--primary) / 0.2); }

.rounded-lg { border-radius: var(--radius); }
.rounded-md { border-radius: calc(var(--radius) - 2px); }
.rounded-sm { border-radius: calc(var(--radius) - 4px); }

/* Layout */
.layout-spacing { padding: 1.5rem; }
.container { padding-left: 1rem; padding-right: 1rem; max-width: 1400px; margin-left: auto; margin-right: auto; }

/* Mobile drawer */
.mobile-drawer { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 50; background-color: rgba(0,0,0,0.5); opacity: 0; pointer-events: none; transition: opacity 0.3s ease; }
.mobile-drawer.open { opacity: 1; pointer-events: auto; }
.mobile-drawer-content { position: fixed; top: 0; left: 0; width: 280px; height: 100%; background-color: hsl(var(--card)); transform: translateX(-100%); transition: transform 0.3s ease; overflow-y: auto; z-index: 51; box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1); }
.mobile-drawer.open .mobile-drawer-content { transform: translateX(0); }

/* Page content blocks: fade-in + slide-up, smooth & premium (sidebar not affected) */
@keyframes page-block-in {
  0% { opacity: 0; transform: translateY(24px); }
  100% { opacity: 1; transform: translateY(0); }
}
.main-content > * > * {
  animation: page-block-in 0.85s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
.main-content > * > *:nth-child(1) { animation-delay: 0.05s; }
.main-content > * > *:nth-child(2) { animation-delay: 0.1s; }
.main-content > * > *:nth-child(3) { animation-delay: 0.15s; }
.main-content > * > *:nth-child(4) { animation-delay: 0.2s; }
.main-content > * > *:nth-child(5) { animation-delay: 0.25s; }
.main-content > * > *:nth-child(6) { animation-delay: 0.3s; }
.main-content > * > *:nth-child(7) { animation-delay: 0.35s; }
.main-content > * > *:nth-child(8) { animation-delay: 0.4s; }
.main-content > * > *:nth-child(9) { animation-delay: 0.45s; }
.main-content > * > *:nth-child(10) { animation-delay: 0.5s; }
.main-content > * > *:nth-child(11) { animation-delay: 0.55s; }
.main-content > * > *:nth-child(12) { animation-delay: 0.6s; }
.main-content > * > *:nth-child(13) { animation-delay: 0.65s; }
.main-content > * > *:nth-child(14) { animation-delay: 0.7s; }
.main-content > * > *:nth-child(15) { animation-delay: 0.75s; }

/* Auth pages (login, forgot-password): same fade-in + slide-up, no sidebar */
.auth-content > * {
  animation: page-block-in 0.85s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
.auth-content > *:nth-child(1) { animation-delay: 0.05s; }
.auth-content > *:nth-child(2) { animation-delay: 0.1s; }
.auth-content > *:nth-child(3) { animation-delay: 0.15s; }
.auth-content > *:nth-child(4) { animation-delay: 0.2s; }
.auth-content > *:nth-child(5) { animation-delay: 0.25s; }

/* Animations (tailwindcss-animate) */
@keyframes accordion-down { from { height: 0; } to { height: var(--radix-accordion-content-height, auto); } }
@keyframes accordion-up { from { height: var(--radix-accordion-content-height, auto); } to { height: 0; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes zoom-in-95 { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }
@keyframes zoom-out-95 { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(0.95); } }
@keyframes slide-in-from-left { from { transform: translateX(-100%); } to { transform: translateX(0); } }
@keyframes slide-out-to-left { from { transform: translateX(0); } to { transform: translateX(-100%); } }
@keyframes slide-in-from-top-2 { from { transform: translateY(-0.5rem); } to { transform: translateY(0); } }
@keyframes slide-in-from-bottom-2 { from { transform: translateY(0.5rem); } to { transform: translateY(0); } }

.animate-in { animation-duration: 0.2s; animation-fill-mode: both; }
.fade-in-0 { animation-name: fade-in; }
.fade-out-0 { animation-name: fade-out; }
.zoom-in-95 { animation-name: zoom-in-95; }
.zoom-out-95 { animation-name: zoom-out-95; }

/* Dialog/Sheet transitions */
.dialog-overlay { position: fixed; inset: 0; z-index: 50; background-color: rgb(0 0 0 / 0.8); }
.dialog-content { position: fixed; left: 50%; top: 50%; z-index: 50; width: 100%; max-width: 32rem; transform: translate(-50%, -50%); gap: 1rem; border-width: 1px; background-color: hsl(var(--background)); padding: 1.5rem; box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1); border-radius: var(--radius); }
.sheet-content-left { position: fixed; left: 0; top: 0; z-index: 50; height: 100%; width: 280px; background-color: hsl(var(--background)); box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1); padding: 0; transition: transform 0.3s ease; }
.sheet-content-left[data-state="open"] { transform: translateX(0); }
.sheet-content-left[data-state="closed"] { transform: translateX(-100%); }

/* Dropdown */
.dropdown-content { z-index: 50; min-width: 8rem; overflow: hidden; border-radius: var(--radius); border: 1px solid hsl(var(--border)); background-color: hsl(var(--popover)); padding: 0.25rem; color: hsl(var(--popover-foreground)); box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1); }

/* Select / dropdown theme (glassy, aligned with card/muted) */
select,
.select-theme {
  background-color: hsl(var(--muted));
  color: hsl(var(--foreground));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpath d='M2 4l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.6rem center;
  padding-right: 2rem;
}
select:hover,
select:focus {
  background-color: hsl(var(--accent));
  border-color: hsl(var(--ring));
  outline: none;
}
select option {
  background-color: hsl(var(--card));
  color: hsl(var(--card-foreground));
}
.dark select option {
  background-color: hsl(var(--card));
  color: hsl(var(--card-foreground));
}

/* Champs date / month : calendrier natif OS (Windows, iPhone, etc.) */
input[type="date"],
input[type="month"] {
  appearance: auto;
  min-height: 2.5rem;
}
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: 1;
}

/* Wrapper date avec icône Font Awesome qui ouvre le calendrier */
.date-input-wrap { position: relative; display: block; }
.date-input-wrap input { padding-right: 2.5rem; }
.date-input-wrap .date-input-icon {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: auto;
  cursor: pointer;
  color: hsl(var(--muted-foreground));
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.date-input-wrap .date-input-icon:hover { color: hsl(var(--foreground)); }

/* Registre factures : onglets scrollables au mobile (iPhone, etc.) */
@media (max-width: 639px) {
  .bills-register-tabs {
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
}

/* Bills panel icons: couleurs forcées (!important pour passer devant dark mode / emerald) */
.bills-panel-icon-avenir {
  background-color: hsl(0deg 41.18% 6.67% / 78%) !important;
  border-color: hsl(0 62.8% 30.6% / 0.5) !important;
  color: hsl(0 62.8% 30.6%) !important;
}
.bills-panel-icon-mensuelles {
  color: rgb(52, 211, 153) !important;
}
.bills-panel-icon-paid {
  color: rgb(52, 211, 153) !important;
}
.bills-panel-icon-paid svg {
  color: rgb(52, 211, 153) !important;
  stroke: rgb(52, 211, 153) !important;
}

/* Dossiers : effet glassy par couleur d'accent (priorité sur le bord par défaut) */
.doc-folder.folder-accent-gray {
  background-color: hsl(var(--secondary)) !important;
  border: 1px solid hsl(var(--border) / var(--border-opacity, 0.12)) !important;
}
.doc-folder.folder-accent-blue {
  background-color: rgba(59, 130, 246, 0.18) !important;
  border: 1px solid rgba(59, 130, 246, 0.45) !important;
}
.doc-folder.folder-accent-pink {
  background-color: rgba(236, 72, 153, 0.18) !important;
  border: 1px solid rgba(236, 72, 153, 0.45) !important;
}
.doc-folder.folder-accent-teal {
  background-color: rgba(20, 184, 166, 0.18) !important;
  border: 1px solid rgba(20, 184, 166, 0.45) !important;
}
.doc-folder.folder-accent-amber {
  background-color: rgba(245, 158, 11, 0.18) !important;
  border: 1px solid rgba(245, 158, 11, 0.45) !important;
}
.doc-folder.folder-accent-violet {
  background-color: rgba(139, 92, 246, 0.18) !important;
  border: 1px solid rgba(139, 92, 246, 0.45) !important;
}

/* Modal nouveau dossier : boutons pied de modal, même hauteur et alignement */
.new-folder-modal .modal-footer-btn {
  height: 42px !important;
  min-height: 42px !important;
  max-height: 42px !important;
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 1.25rem !important;
  font-size: 0.8125rem !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  border-radius: 0.5rem;
  white-space: nowrap;
}

/* Modal nouveau dossier : thème sélectionné = bordure élégante, pas de ring */
.new-folder-modal input[type="radio"]:checked + .accent-option-span {
  border: 1px solid hsl(var(--border) / var(--border-opacity, 0.12)) !important;
  box-shadow: none !important;
  outline: none !important;
}

@media (max-width: 767px) {
  .layout-spacing { padding: 1rem; }
  .responsive-grid { grid-template-columns: 1fr !important; }
}

@media (min-width: 640px) { .responsive-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .responsive-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1280px) { .responsive-grid { grid-template-columns: repeat(4, 1fr); } }