/* Font loaded via HTML preload for performance - see index.html */

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

/* Definition of the design system. All colors, gradients, fonts, etc should be defined here. 
All colors MUST be HSL.
*/

@layer base {
  :root {
    --trustpilot: 158 100% 36%;
    --background: 0 0% 100%;
    --foreground: 215 25% 27%;

    --card: 0 0% 100%;
    --card-foreground: 215 25% 27%;

    --popover: 0 0% 100%;
    --popover-foreground: 215 25% 27%;

    /* Magenta - Primary brand color for "Facture" */
    --primary: 334 86% 42%;
    --primary-foreground: 0 0% 100%;
    --primary-hover: 334 86% 47%; /* +10% luminosité */

    /* Bleu nuit - Brand color for "Devis.fr" */
    --brand-dark: 224 43% 19%;
    --brand-dark-foreground: 0 0% 100%;
    --brand-dark-hover: 224 43% 29%; /* +10% luminosité */

    /* Couleurs secondaires selon charte */
    --secondary: 240 9% 96%; /* Gris clair #F5F5F7 */
    --secondary-foreground: 0 0% 29%; /* Gris foncé #4A4A4A */
    
    /* Gris spécifiques de la charte */
    --gray-light: 240 9% 96%; /* #F5F5F7 */
    --gray-dark: 0 0% 29%; /* #4A4A4A */

    --muted: 240 9% 96%; /* Gris clair */
    --muted-foreground: 0 0% 29%; /* Gris foncé */

    /* Navy Blue - Accent color for success/validation */
    --accent: 224 43% 35%;
    --accent-foreground: 0 0% 100%;
    --accent-hover: 224 43% 30%;

    --destructive: 0 84% 60%;
    --destructive-foreground: 0 0% 100%;

    --success: 142 76% 36%;
    --success-foreground: 0 0% 100%;

    /* Text laid on a tint of its own colour (state pills, tinted notes): the token itself is too
       light to be read there (about 3:1). These darker shades reach 5:1 on a 15 % tint
       (tests/statusToneContrast.test.ts). Never used as a background. */
    --success-strong: 142 72% 26%;
    --destructive-strong: 0 72% 42%;
    --warning-strong: 26 90% 32%;

    /* Orange - attention: something to check or to finish (pending mandate, low stock, unconfirmed email) */
    --warning: 26 90% 37%;
    --warning-foreground: 0 0% 100%;

    --border: 220 13% 91%;
    --input: 220 13% 91%;
    --ring: 334 86% 42%; /* Utilise la couleur magenta principale au lieu du bleu */

    --radius: 0.75rem;

    /* Design system additions for beautiful effects */
    --primary-glow: 334 86% 52%;
    --brand-dark-glow: 224 43% 29%;
    --accent-glow: 224 43% 45%;
    --gradient-primary: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--primary-glow)));
    --gradient-brand-dark: linear-gradient(135deg, hsl(var(--brand-dark)), hsl(var(--brand-dark-glow)));
    --gradient-accent: linear-gradient(135deg, hsl(var(--accent)), hsl(var(--accent-glow)));
    --shadow-elegant: 0 10px 30px -10px hsl(var(--primary) / 0.2);
    --shadow-glow: 0 0 40px hsl(var(--primary-glow) / 0.3);
    --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    /* Document generator specific colors */
    --document-company: 334 86% 42%; /* Magenta pour entreprise */
    --document-company-foreground: 0 0% 100%;
    --document-company-bg: 334 86% 95%;
    --document-client: 224 43% 35%; /* Bleu marine pour client */ 
    --document-client-foreground: 0 0% 100%;
    --document-client-bg: 224 43% 95%;
    --document-optional: 220 14% 94%; /* Gris clair */
    --document-table-alt: 220 14% 98%;

    /* Document generator header - Version allégée et élégante */
    --header-light-start: 347 100% 96%; /* Rose pâle #FDE6EF */
    --header-light-end: 334 77% 77%; /* Magenta clair #F48FB1 */
    --header-accent: 334 86% 42%; /* Magenta pour accents #C70F5A */
    --header-text-primary: 224 43% 19%; /* Bleu nuit #1C2746 */
    --header-text-secondary: 334 86% 35%; /* Magenta foncé */
    --header-border: 334 50% 85%; /* Bordure douce */
    --header-shadow: 334 30% 50%; /* Ombre douce */
    --invoice-vat-foreground: 0 0% 100%;
    --invoice-no-vat: 334 86% 47%; /* Magenta plus clair pour auto-entrepreneur */
    --invoice-no-vat-foreground: 0 0% 100%;
    --quote: 224 43% 19%; /* Bleu nuit pour devis */
    --quote-foreground: 0 0% 100%;
    --receipt: 45 93% 47%; /* Jaune/or pour reçu */
    --receipt-foreground: 0 0% 100%;
    --rent-receipt: 195 100% 45%; /* Cyan/bleu pour quittance */
    --rent-receipt-foreground: 0 0% 100%;
    --credit-note: 14 100% 57%; /* Rouge/orange pour avoir */
    --credit-note-foreground: 0 0% 100%;

    /* Invoice VAT manquant en mode clair */
    --invoice-vat: 334 86% 42%; /* Magenta pour facture avec TVA */

    --sidebar-background: 0 0% 98%;

    --sidebar-foreground: 240 5.3% 26.1%;

    --sidebar-primary: 240 5.9% 10%;

    --sidebar-primary-foreground: 0 0% 98%;

    --sidebar-accent: 240 4.8% 95.9%;

    --sidebar-accent-foreground: 240 5.9% 10%;

    --sidebar-border: 220 13% 91%;

    --sidebar-ring: 217.2 91.2% 59.8%;
  }
}

@layer base {
  * {
    @apply border-border;
  }

  body {
    @apply bg-background text-foreground;
    font-family: 'Montserrat', 'MontserratFallback', 'Arial', 'Helvetica', sans-serif;
    /* Optimisations tactiles pour mobile */
    -webkit-tap-highlight-color: rgba(0,0,0,0.1);
    min-height: 100vh;
  }

  /* Optimisation des éléments interactifs pour mobile */
  input, textarea, select, button, [role="button"], a {
    touch-action: manipulation;
  }

  /* Placeholders très légers pour ne pas être confondus avec du contenu saisi */
  ::placeholder,
  input::placeholder,
  textarea::placeholder {
    color: hsl(0 0% 78%) !important;
    opacity: 1 !important;
    font-weight: 400;
  }

  /* Permettre la sélection de texte dans les inputs et contenus */
  input, textarea, [contenteditable] {
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
  }
}

/* Styles pour les articles en prose */
.prose {
  @apply text-foreground max-w-none;
}

.prose h2 {
  @apply text-xl md:text-2xl font-bold mt-8 md:mt-12 mb-4 md:mb-6 text-foreground border-b border-border pb-2;
}

.prose h3 {
  @apply text-lg md:text-xl font-semibold mt-6 md:mt-8 mb-3 md:mb-4 text-foreground;
}

.prose h4 {
  @apply text-base md:text-lg font-medium mt-4 md:mt-6 mb-2 md:mb-3 text-foreground;
}

.prose p {
  @apply mb-3 md:mb-4 text-muted-foreground leading-relaxed text-sm md:text-base;
}

.prose ul {
  @apply mb-3 md:mb-4 space-y-1 md:space-y-2;
}

.prose li {
  @apply text-muted-foreground text-sm md:text-base;
}

.prose strong {
  @apply font-semibold text-foreground;
}

.prose code {
  @apply bg-muted px-1 md:px-2 py-0.5 md:py-1 rounded text-xs md:text-sm font-mono;
}

.prose blockquote {
  @apply border-l-4 border-l-primary pl-3 md:pl-4 italic text-muted-foreground text-sm md:text-base;
}

/* Styles responsifs globaux */
@media (max-width: 768px) {
  .container {
    @apply px-3;
  }
  
  /* Amélioration des cartes sur mobile */
  .card-mobile {
    @apply p-4 rounded-lg;
  }
  
  /* Tables responsives */
  .table-mobile {
    @apply text-xs;
  }
  
  /* Boutons plus grands sur mobile */
  .btn-mobile {
    @apply min-h-[44px] text-sm;
  }
  
  /* Réduire les espacements sur mobile */
  .spacing-mobile {
    @apply space-y-4;
  }
  
  /* Headers plus petits sur mobile */
  .header-mobile h1 {
    @apply text-2xl leading-tight;
  }
  
  .header-mobile h2 {
    @apply text-xl;
  }
  
  .header-mobile h3 {
    @apply text-lg;
  }
}

/* Amélioration des formulaires mobiles */
@media (max-width: 640px) {
  .form-mobile input,
  .form-mobile textarea,
  .form-mobile select {
    @apply text-base; /* Évite le zoom sur iOS */
  }
  
  /* Navigation mobile */
  .nav-mobile {
    @apply flex-col space-y-2;
  }
  
  /* Grilles adaptatives */
  .grid-mobile {
    @apply grid-cols-1 gap-4;
  }
}

/* Styles pour Crisp Chat */
.crisp-client,
[class*="crisp"],
[class*="cc-"],
iframe[src*="crisp.chat"] {
  z-index: 999999 !important;
}

/* Note: Position handled via $crisp config in CrispPositionManager */

/* Admin : pas de bulle de chat client */
body.admin-shell .crisp-client { display: none !important; }

/* Mobile : bulle Crisp masquée dans l'éditeur, plus petite et au-dessus de la barre du bas ailleurs */
@media (max-width: 767px) {
  body.document-generator-page .crisp-client { display: none !important; }
  body.has-bottom-nav .crisp-client #crisp-chatbox > div > div[aria-label],
  body.has-bottom-nav .crisp-client #crisp-chatbox > div > a {
    bottom: calc(76px + env(safe-area-inset-bottom)) !important;
    right: 12px !important;
    transform: scale(0.8);
    transform-origin: bottom right;
  }
}

/* Phone: touch targets of 44 px (plan, step 5) on the application screens, i.e. the signed-in
   shell outside the editor and the sign-in pages (body.touch-44, set by Layout).
   - .touch-target: the control grows to 44 px high. Buttons, fields, selects, tabs and menu
     entries of src/components/ui carry it. Its width is left alone (a minimum width would let
     a button shrink under its text in a row): a narrow one gets the invisible area below.
   - .touch-area: the control keeps its size on screen and an invisible area of 44 px, centred
     on it, takes the touch (switch, checkbox, close cross, avatar, discreet text button).
   The desktop is not concerned, nor the editor, whose compact fields get their own pass. */
@media (max-width: 1023px) {
  /* The invisible area needs a positioned control. One that is already absolute, fixed or
     sticky stays so. Fields are left out: they draw no ::after, and a positioned field would
     cover the icon laid over it. Plain selectors only (no :is / :where, no list in :not): the
     build targets Safari 13 and Firefox 78, which would drop the whole rule. */
  body.touch-44 .touch-target:not(.absolute):not(.fixed):not(.sticky):not(input):not(select):not(textarea),
  body.touch-44 .touch-area:not(.absolute):not(.fixed):not(.sticky) {
    position: relative;
  }
  body.touch-44 .touch-target {
    min-height: 44px;
  }
  body.touch-44 .touch-target-list {
    height: auto;
  }
  body.touch-44 .touch-target::after,
  body.touch-44 .touch-area::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: max(100%, 44px);
    height: max(100%, 44px);
    transform: translate(-50%, -50%);
  }
}

/* Optimisations pour les performances mobile et INP */
button, a, [role="button"] {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* Optimisations pour éviter les recalculs de layout */
.layout-stable {
  contain: layout style paint;
}

/* Réduire les animations pour améliorer l'INP */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* Mobile: typographie et espacements plus compacts sur les pages de génération de document */
@media (max-width: 640px) {
  .document-generator-page {
    font-size: 13px;
  }
  .document-generator-page h1 { font-size: 1.25rem !important; line-height: 1.2 !important; margin-bottom: 0.5rem !important; }
  .document-generator-page h2 { font-size: 1.05rem !important; line-height: 1.25 !important; }
  .document-generator-page h3 { font-size: 0.95rem !important; }
  .document-generator-page .text-4xl,
  .document-generator-page .text-3xl { font-size: 1.25rem !important; line-height: 1.2 !important; }
  .document-generator-page .text-2xl { font-size: 1.05rem !important; line-height: 1.2 !important; }
  .document-generator-page .text-xl { font-size: 0.95rem !important; }
  .document-generator-page .text-lg { font-size: 0.875rem !important; }
  .document-generator-page .text-base { font-size: 0.8125rem !important; }
  .document-generator-page .text-sm { font-size: 0.75rem !important; }

  /* Espacements internes plus serrés */
  .document-generator-page .p-8 { padding: 1rem !important; }
  .document-generator-page .p-6 { padding: 0.75rem !important; }
  .document-generator-page .p-4 { padding: 0.625rem !important; }
  .document-generator-page .py-8 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
  .document-generator-page .py-6 { padding-top: 0.75rem !important; padding-bottom: 0.75rem !important; }
  .document-generator-page .space-y-8 > * + * { margin-top: 1rem !important; }
  .document-generator-page .space-y-6 > * + * { margin-top: 0.75rem !important; }
  .document-generator-page .gap-8 { gap: 1rem !important; }
  .document-generator-page .gap-6 { gap: 0.75rem !important; }
  /* Colonnes principales de l'éditeur : respiration suffisante entre les blocs */
  .document-generator-page .editor-flow { gap: 1rem !important; }
  .document-generator-page .mb-6 { margin-bottom: 0.75rem !important; }
  .document-generator-page .mb-3 { margin-bottom: 0.5rem !important; }

  /* Inputs et boutons plus compacts (garde min 16px pour éviter le zoom iOS) */
  .document-generator-page input,
  .document-generator-page select,
  .document-generator-page textarea {
    font-size: 16px !important;
    padding-top: 0.375rem !important;
    padding-bottom: 0.375rem !important;
  }
  .document-generator-page label { font-size: 0.75rem !important; }
}
/* Safari iOS : les champs date ont une largeur minimale propre qui fait déborder les grilles. */
input[type="date"], input[type="time"], input[type="datetime-local"] {
  -webkit-appearance: none;
  appearance: none;
  min-width: 0;
  max-width: 100%;
}
input[type="date"]::-webkit-date-and-time-value { text-align: left; margin: 0; }