@import '../../../../vendor/filament/filament/resources/css/theme.css';

/* v4.11.0 §D — Les utilitaires d'accent de la vue client. Le panneau `client` rend les MÊMES
   partiels `espace-client/**` que la page de lecture : sans ces classes ici, l'espace connecté
   et la page publique divergeraient au premier correctif. */
@import '../../espace-client-accent.css';

/* Compiler les utilitaires Tailwind utilisés dans TOUTES les vues Filament personnalisées
   (widgets, pages, portail, relevés) des 3 panneaux — corrige les « cartes cassées ». */
@source '../../../../app/Filament/**/*';
@source '../../../../app/Livewire/**/*';
@source '../../../../resources/views/**/*';
@source '../../../../vendor/filament/**/*.blade.php';

/* Police auto-hébergée (voir public/fonts/plus-jakarta-sans) — aucun CDN.

   v3.0 §3 — Les valeurs ci-dessous sont une PALETTE NEUTRE DE REPLI, et rien d'autre. La charte
   réelle de chaque installation est injectée au rendu par `filament.brand-head`, qui redéclare
   ces mêmes variables depuis les réglages `company.primary_color` / `company.accent_color`.
   Une feuille de style est compilée une fois pour toutes et livrée à tout le monde : elle ne
   peut donc pas porter les couleurs de l'une des sociétés servies. */
@theme {
    --font-sans: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
}

:root {
    /* Repli neutre — surchargé au rendu depuis les réglages (cf. filament/brand-head). */
    --socle-primary: #2563EB;
    --socle-primary-600: #1D4ED8;
    --socle-primary-700: #1E40AF;
    --socle-primary-50: #EFF6FF;
    --socle-navy: #0F172A;
    --socle-accent: #F59E0B;
    --socle-bg: #F8FAFC;
    --socle-border: #E2E8F0;
}

/* Fond doux en mode clair uniquement — en mode sombre, Filament garde son
   propre fond ; une règle non scopée ici rendait la page blanche sous le thème sombre. */
:root:not(.dark) .fi-body {
    background-color: var(--socle-bg);
}

/* Titres en teinte foncée, graisse renforcée (Plus Jakarta Sans porte les deux rôles). */
h1, h2, h3, h4, h5, h6,
.fi-header-heading, .fi-section-header-heading, .fi-modal-heading {
    letter-spacing: -0.01em;
    font-weight: 700;
}

:where(:root:not(.dark)) .fi-topbar {
    background-color: #ffffff;
}

/* Logo nettement agrandi et centré sur la page de connexion (layout simple) des 3 panneaux
   (admin /, employé /espace, investisseur /portail). Le topbar garde sa hauteur définie par
   brandLogoHeight (~2.5rem) ; ici on agrandit uniquement la connexion à 5rem (~80 px). */
.fi-simple-layout-header .fi-logo,
.fi-simple-layout-header a.fi-logo,
.fi-simple-page .fi-logo {
    height: 5rem !important;
    margin-left: auto;
    margin-right: auto;
}

/* ------------------------------------------------------------------ v1.2 §4 — mobile
   Barre supérieure saturée sous 640 px : les boutons « Saisie rapide » et « Opération
   complète » passent en icône seule (le libellé est masqué par font-size:0, l'icône SVG
   garde sa taille utilitaire), et la recherche globale se replie derrière sa loupe et ne
   s'étend qu'au focus. L'avatar et la cloche restent ainsi toujours accessibles. */
@media (max-width: 639px) {
    .socle-topbar-actions .fi-btn {
        font-size: 0;
        gap: 0;
        padding-inline: 0.55rem;
    }

    .fi-topbar .fi-global-search-ctn {
        min-width: 0;
    }

    .fi-topbar .fi-global-search-field .fi-input-wrp {
        width: 2.5rem;
        overflow: hidden;
        transition: width 0.2s ease;
    }

    .fi-topbar .fi-global-search-field:focus-within .fi-input-wrp {
        width: min(11rem, 45vw);
    }

    .fi-topbar .fi-global-search-field .fi-input {
        min-width: 0;
    }

    /* Rien ne doit pousser l'avatar hors écran : le topbar ne déborde jamais. */
    .fi-topbar > div {
        min-width: 0;
    }
}

/* ================================================================== v1.5 §6 — Assistant IA
   L'écran affichait la réponse du modèle en texte brut : le gérant lisait « | Poste | Montant | »
   et « **Non** » en toutes lettres là où il devait lire un tableau. Ces règles habillent le
   Markdown rendu (titres, gras, listes, tableaux, code), les tuiles de chiffres, la zone de saisie
   collante et le fil de conversation — en clair ET en sombre, les tableaux et blocs de code étant
   des surfaces neuves jamais vues sous le thème sombre.

   Contrainte de revue : 390 px de large sans coupure horizontale. Les tableaux défilent DANS leur
   propre conteneur, jamais la page. */

.socle-assistant [x-cloak] { display: none !important; }

/* ---- Cartes et bulles ---- */
.socle-carte {
    border-radius: 0.85rem;
    border: 1px solid var(--socle-border);
    background-color: #ffffff;
    padding: 1rem;
    box-shadow: 0 1px 2px rgb(11 20 55 / 0.04);
}

.dark .socle-carte {
    border-color: rgb(255 255 255 / 0.1);
    background-color: rgb(255 255 255 / 0.05);
    box-shadow: none;
}

.socle-bulle-question {
    max-width: min(100%, 34rem);
    border-radius: 0.85rem 0.85rem 0.25rem 0.85rem;
    background-color: var(--socle-primary-50);
    padding: 0.6rem 0.85rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--socle-primary-700);
    overflow-wrap: anywhere;
}

.dark .socle-bulle-question {
    background-color: rgb(92 101 245 / 0.18);
    color: #c7cbff;
}

/* ---- Tuiles de chiffres : le montant en gros, le libellé dessous ---- */
.socle-tuile {
    border-radius: 0.65rem;
    border: 1px solid var(--socle-border);
    background-color: var(--socle-bg);
    padding: 0.55rem 0.6rem;
    min-width: 0;
}

.dark .socle-tuile {
    border-color: rgb(255 255 255 / 0.1);
    background-color: rgb(255 255 255 / 0.04);
}

.socle-tuile__montant {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--socle-navy);
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

.dark .socle-tuile__montant { color: #ffffff; }

.socle-tuile__libelle {
    margin-top: 0.15rem;
    font-size: 0.7rem;
    line-height: 1.25;
    color: #6b7280;
}

.dark .socle-tuile__libelle { color: #9ca3af; }

/* ---- Markdown rendu ---- */
.socle-md {
    font-size: 0.875rem;
    line-height: 1.6;
    color: #1f2937;
    overflow-wrap: anywhere;
}

.dark .socle-md { color: #e5e7eb; }

.socle-md > *:first-child { margin-top: 0; }
.socle-md > *:last-child { margin-bottom: 0; }

.socle-md p { margin: 0.5rem 0; }

.socle-md h1, .socle-md h2, .socle-md h3, .socle-md h4, .socle-md h5, .socle-md h6 {
    margin: 1rem 0 0.4rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--socle-navy);
}

.dark .socle-md :is(h1, h2, h3, h4, h5, h6) { color: #ffffff; }

.socle-md h1 { font-size: 1.05rem; }
.socle-md h2 { font-size: 1rem; }
.socle-md h3 { font-size: 0.925rem; }
.socle-md h4, .socle-md h5, .socle-md h6 { font-size: 0.875rem; }

.socle-md strong { font-weight: 700; color: var(--socle-navy); }
.dark .socle-md strong { color: #ffffff; }

.socle-md ul, .socle-md ol { margin: 0.5rem 0; padding-left: 1.15rem; }
.socle-md ul { list-style: disc; }
.socle-md ol { list-style: decimal; }
.socle-md li { margin: 0.2rem 0; }
.socle-md li::marker { color: var(--socle-primary); }

.socle-md blockquote {
    margin: 0.6rem 0;
    border-left: 3px solid var(--socle-primary);
    background-color: var(--socle-bg);
    padding: 0.4rem 0.75rem;
    color: #4b5563;
}

.dark .socle-md blockquote {
    background-color: rgb(255 255 255 / 0.04);
    color: #d1d5db;
}

.socle-md hr {
    margin: 0.9rem 0;
    border: 0;
    border-top: 1px solid var(--socle-border);
}

.dark .socle-md hr { border-top-color: rgb(255 255 255 / 0.1); }

/* Tableaux : le TABLEAU défile, jamais la page (revue 390 px). */
.socle-md table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    border-collapse: collapse;
    margin: 0.7rem 0;
    font-size: 0.8rem;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
}

.socle-md thead { background-color: var(--socle-navy); }
.socle-md th {
    padding: 0.45rem 0.6rem;
    text-align: left;
    font-weight: 600;
    color: #ffffff;
}

.socle-md td {
    padding: 0.45rem 0.6rem;
    border-bottom: 1px solid var(--socle-border);
    font-variant-numeric: tabular-nums;
}

.dark .socle-md thead { background-color: rgb(11 20 55 / 0.85); }
.dark .socle-md td { border-bottom-color: rgb(255 255 255 / 0.1); }
.socle-md tbody tr:nth-child(even) { background-color: var(--socle-bg); }
.dark .socle-md tbody tr:nth-child(even) { background-color: rgb(255 255 255 / 0.03); }

/* Code */
.socle-md code {
    border-radius: 0.3rem;
    background-color: var(--socle-primary-50);
    padding: 0.1rem 0.3rem;
    font-size: 0.8em;
    color: var(--socle-primary-700);
}

.dark .socle-md code {
    background-color: rgb(255 255 255 / 0.08);
    color: #c7cbff;
}

.socle-md pre {
    margin: 0.7rem 0;
    overflow-x: auto;
    border-radius: 0.55rem;
    border: 1px solid var(--socle-border);
    background-color: var(--socle-bg);
    padding: 0.7rem;
    font-size: 0.78rem;
    line-height: 1.5;
}

.dark .socle-md pre {
    border-color: rgb(255 255 255 / 0.1);
    background-color: rgb(0 0 0 / 0.35);
}

.socle-md pre code { background: none; padding: 0; color: inherit; }

.socle-md a { color: var(--socle-primary-600); text-decoration: underline; }
.dark .socle-md a { color: #a5abff; }

/* Mode analyse : chaque bloc (Constat / Lecture / Options / Angles morts) visuellement distinct. */
.socle-md--analyse h2 {
    margin-top: 1.2rem;
    border-left: 3px solid var(--socle-primary);
    background-color: var(--socle-primary-50);
    padding: 0.35rem 0.6rem;
    border-radius: 0 0.4rem 0.4rem 0;
}

.dark .socle-md--analyse h2 {
    background-color: rgb(92 101 245 / 0.15);
    border-left-color: #8c93ff;
}

/* ---- Puces, chips, rangées défilables ---- */
.socle-chip,
.socle-pastille,
.socle-lien {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.75rem;
    font-weight: 500;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.socle-chip {
    min-height: 2.75rem; /* 44 px : cible tactile */
    border-radius: 999px;
    border: 1px solid var(--socle-border);
    background-color: #ffffff;
    padding: 0 0.85rem;
    color: #374151;
}

.socle-chip:hover { background-color: var(--socle-primary-50); }

.dark .socle-chip {
    border-color: rgb(255 255 255 / 0.12);
    background-color: rgb(255 255 255 / 0.05);
    color: #e5e7eb;
}

.dark .socle-chip:hover { background-color: rgb(255 255 255 / 0.1); }

.socle-chip--actif {
    border-color: var(--socle-primary);
    background-color: var(--socle-primary-50);
    color: var(--socle-primary-700);
}

.dark .socle-chip--actif {
    background-color: rgb(92 101 245 / 0.2);
    color: #c7cbff;
}

.socle-rangee {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    padding-bottom: 0.35rem;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}

.socle-pastille {
    flex: 0 0 auto;
    max-width: min(72vw, 20rem);
    min-height: 2.75rem;
    border-radius: 999px;
    border: 1px solid var(--socle-primary-50);
    background-color: var(--socle-primary-50);
    padding: 0.4rem 0.85rem;
    text-align: left;
    color: var(--socle-primary-700);
    white-space: normal;
    line-height: 1.25;
}

.socle-pastille:hover { background-color: #e2e5ff; }

.dark .socle-pastille {
    border-color: rgb(92 101 245 / 0.3);
    background-color: rgb(92 101 245 / 0.12);
    color: #c7cbff;
}

.dark .socle-pastille:hover { background-color: rgb(92 101 245 / 0.22); }

.socle-pastille--favori {
    border-color: #fde68a;
    background-color: #fffbeb;
    color: #92400e;
    gap: 0.5rem;
}

.dark .socle-pastille--favori {
    border-color: rgb(251 191 36 / 0.3);
    background-color: rgb(251 191 36 / 0.12);
    color: #fcd34d;
}

.socle-theme {
    margin-bottom: 0.35rem;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #6b7280;
}

.dark .socle-theme { color: #9ca3af; }

.socle-lien { color: #6b7280; }
.socle-lien:hover { color: var(--socle-primary-600); }
.dark .socle-lien { color: #9ca3af; }
.dark .socle-lien:hover { color: #a5abff; }

.socle-outil {
    border-radius: 0.35rem;
    background-color: var(--socle-bg);
    padding: 0.1rem 0.4rem;
    color: var(--socle-primary-700);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.socle-outil--muet { color: #6b7280; text-decoration: none; }

.dark .socle-outil { background-color: rgb(255 255 255 / 0.06); color: #a5abff; }
.dark .socle-outil--muet { color: #9ca3af; }

/* ---- Détail des appels d'outils (traçabilité §3) ---- */
.socle-detail {
    border-radius: 0.55rem;
    border: 1px solid var(--socle-border);
    background-color: var(--socle-bg);
    padding: 0.5rem 0.7rem;
    font-size: 0.75rem;
}

.dark .socle-detail {
    border-color: rgb(255 255 255 / 0.1);
    background-color: rgb(255 255 255 / 0.04);
}

.socle-detail summary { cursor: pointer; font-weight: 600; color: var(--socle-navy); }
.dark .socle-detail summary { color: #e5e7eb; }

.socle-detail__titre {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #6b7280;
}

.socle-json {
    max-height: 16rem;
    overflow: auto;
    border-radius: 0.4rem;
    background-color: #ffffff;
    padding: 0.5rem;
    font-size: 0.68rem;
    line-height: 1.45;
    white-space: pre;
    color: #374151;
}

.dark .socle-json { background-color: rgb(0 0 0 / 0.35); color: #d1d5db; }

/* ---- Saisie collante : atteignable au pouce, jamais masquée par le clavier iOS ---- */
.socle-saisie {
    position: sticky;
    bottom: 0;
    z-index: 10;
    margin-inline: -0.25rem;
    border-radius: 0.85rem;
    border: 1px solid var(--socle-border);
    background-color: rgb(255 255 255 / 0.96);
    backdrop-filter: blur(8px);
    padding: 0.6rem;
    padding-bottom: calc(0.6rem + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -4px 16px rgb(11 20 55 / 0.06);
}

.dark .socle-saisie {
    border-color: rgb(255 255 255 / 0.12);
    background-color: rgb(17 24 39 / 0.94);
    box-shadow: 0 -4px 16px rgb(0 0 0 / 0.35);
}

.socle-champ {
    min-width: 0;
    flex: 1 1 auto;
    resize: none;
    border-radius: 0.6rem;
    border: 1px solid var(--socle-border);
    background-color: #ffffff;
    padding: 0.55rem 0.7rem;
    font-size: 16px; /* < 16 px déclenche le zoom automatique d'iOS à la mise au point */
    line-height: 1.4;
    color: #111827;
}

.socle-champ:focus {
    outline: none;
    border-color: var(--socle-primary);
    box-shadow: 0 0 0 3px rgb(92 101 245 / 0.15);
}

.dark .socle-champ {
    border-color: rgb(255 255 255 / 0.12);
    background-color: rgb(255 255 255 / 0.05);
    color: #f9fafb;
}

.socle-bouton-icone,
.socle-bouton-envoi {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-height: 2.75rem;
    min-width: 2.75rem;
    border-radius: 0.6rem;
    font-size: 0.8rem;
    font-weight: 600;
}

.socle-bouton-icone {
    border: 1px solid var(--socle-border);
    background-color: #ffffff;
    color: #4b5563;
}

.dark .socle-bouton-icone {
    border-color: rgb(255 255 255 / 0.12);
    background-color: rgb(255 255 255 / 0.05);
    color: #d1d5db;
}

.socle-bouton-icone--actif {
    border-color: var(--socle-accent);
    background-color: #fff1ed;
    color: #b45309;
}

.socle-bouton-envoi {
    padding-inline: 0.9rem;
    background-color: var(--socle-primary);
    color: #ffffff;
}

.socle-bouton-envoi:hover { background-color: var(--socle-primary-600); }
.socle-bouton-envoi:disabled { opacity: 0.6; }

/* ---- Indicateur d'attente ---- */
.socle-pulse {
    display: inline-block;
    height: 0.6rem;
    width: 0.6rem;
    border-radius: 999px;
    background-color: var(--socle-primary);
    animation: socle-pulse 1.1s ease-in-out infinite;
}

@keyframes socle-pulse {
    0%, 100% { opacity: 0.35; transform: scale(0.85); }
    50% { opacity: 1; transform: scale(1.15); }
}

@media (prefers-reduced-motion: reduce) {
    .socle-pulse { animation: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════════════════════
   v4.4.0 §C1 — LES CINQ MOMENTS DES PRIMES GAMIFIÉES.

   Règles, et elles sont courtes : **CSS seulement** (aucune bibliothèque, aucun confetti JS lourd
   sur un téléphone de terrain), **moins d'une seconde**, **jamais de son**, et **coupées par
   `prefers-reduced-motion`** — auquel cas la carte reste, avec exactement les mêmes informations,
   simplement sans le mouvement. Fêter, jamais retenir.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */

/* La ligne « Ma prime » : une pulsation discrète quand les points du jour changent. */
.ma-prime-ligne {
    transition: transform .18s ease, box-shadow .18s ease;
}

.ma-prime-ligne:active {
    transform: scale(.985);
}

/* La jauge des niveaux monte plutôt que d'apparaître : c'est la progression qu'on veut voir. */
.ma-prime-jauge {
    animation: socle-jauge-monte .7s cubic-bezier(.22, 1, .36, 1) both;
    transform-origin: left center;
}

@keyframes socle-jauge-monte {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}

/* La carte de fête : badge débloqué, niveau franchi, série de 10, révélation de la prime. */
.carte-de-fete {
    animation: socle-fete-entre .45s cubic-bezier(.16, 1, .3, 1) both;
}

@keyframes socle-fete-entre {
    from { opacity: 0; transform: translateY(14px) scale(.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Le « +3 » qui s'envole vers la ligne prime après un « Terminé ». */
.point-qui-senvole {
    animation: socle-point-senvole .9s ease-out forwards;
    pointer-events: none;
}

@keyframes socle-point-senvole {
    from { opacity: 1; transform: translateY(0) scale(1); }
    to   { opacity: 0; transform: translateY(-42px) scale(1.25); }
}

/* ⚠️ « Réduire les animations » : tout s'arrête, rien ne disparaît. Le collaborateur voit les
   mêmes cartes, les mêmes montants et les mêmes badges — c'est le mouvement qu'on retire, pas
   l'information. */
@media (prefers-reduced-motion: reduce) {
    .ma-prime-ligne,
    .ma-prime-jauge,
    .carte-de-fete,
    .point-qui-senvole {
        animation: none !important;
        transition: none !important;
        transform: none !important;
    }
}

/* ═══ v4.9.0 §B — LE TIROIR DES PANNEAUX DE L'ESPACE CLIENT ═════════════════════════════════

   Le formulaire d'un espace ne se rend plus « quelque part dans la page » : il s'ouvre dans un
   tiroir ancré à l'écran. Sur téléphone, une feuille qui monte du bas ; à partir de 640 px, un
   panneau qui glisse de la droite. Le mouvement est ici, en CSS, et non en transitions Alpine :
   l'élément est INSÉRÉ par Livewire, pas montré par Alpine — une transition d'entrée ne se
   déclencherait pas.

   ⚠️ « Réduire les animations » coupe le mouvement, jamais le tiroir. */
.socle-tiroir-fond {
    animation: socle-tiroir-fond .18s ease-out;
}

.socle-tiroir {
    animation: socle-tiroir-bas .22s ease-out;
}

@media (min-width: 640px) {
    .socle-tiroir {
        animation: socle-tiroir-droite .22s ease-out;
    }
}

@keyframes socle-tiroir-fond {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes socle-tiroir-bas {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
}

@keyframes socle-tiroir-droite {
    from { transform: translateX(100%); }
    to   { transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
    .socle-tiroir,
    .socle-tiroir-fond {
        animation: none !important;
        transform: none !important;
    }
}