/*
 * idf-ui.css — petits compléments d'interface servis tels quels (2026-09-24).
 * Volontairement HORS du bundle Vite : chargé par layouts/app.blade.php, il
 * n'exige aucun `npm run build`. N'y mettre que des effets transverses (bulles,
 * message de confirmation qui s'efface) — le reste du style vit dans resources/css/app.css.
 */

/* ---- Bulle au survol : <button data-idf-tip="Modifier"> ------------------
 * Le pseudo-élément n'existe QU'AU SURVOL (content posé dans :hover) : présent en
 * permanence, même à opacity:0, il agrandirait la zone de défilement des tableaux
 * en overflow-x-auto et ferait apparaître une barre horizontale. D'où une
 * animation plutôt qu'une transition. */
[data-idf-tip] { position: relative; }
[data-idf-tip]:hover::after,
[data-idf-tip]:focus-visible::after {
    content: attr(data-idf-tip);
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: #111827;
    color: #fff;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.3;
    padding: 4px 8px;
    border-radius: 6px;
    white-space: nowrap;
    pointer-events: none;
    z-index: 60;
    animation: idf-tip-in .15s ease-out both;
}
/* Dernière icône d'une ligne : bulle alignée à droite pour ne pas déborder. */
[data-idf-tip-end]:hover::after,
[data-idf-tip-end]:focus-visible::after { left: auto; right: -4px; transform: none; animation-name: idf-tip-in-end; }
@keyframes idf-tip-in     { from { opacity: 0; transform: translate(-50%, 4px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes idf-tip-in-end { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
/* Pas de survol sur écran tactile : la bulle resterait collée après un tap. */
@media (hover: none) { [data-idf-tip]:hover::after { content: none; } }

/* ---- Message de confirmation qui s'efface seul (session('success')) -------
 * Le bandeau reste à sa place dans la page ; layouts/app.blade.php lui ajoute
 * .idf-flash puis .idf-flash--out après 4 s : fondu, puis la hauteur se replie
 * pour que le contenu remonte sans à-coup. */
.idf-flash-card {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    background: #fff;
    border: 1px solid #bbf7d0;
    border-left: 4px solid #16a34a;
    border-radius: 8px;
    box-shadow: 0 4px 12px -4px rgba(0,0,0,.10);
    padding: 12px 14px;
    color: #14532d;
    font-size: 14px;
    line-height: 1.4;
    animation: idf-flash-in .25s ease-out both;
}
.idf-flash-card > svg { flex-shrink: 0; width: 20px; height: 20px; color: #16a34a; }
.idf-flash-card button {
    margin-left: auto; padding: 2px; line-height: 0;
    color: #6b7280; background: none; border: 0; cursor: pointer;
}
.idf-flash-card button:hover { color: #111827; }
.idf-flash-card button svg { width: 16px; height: 16px; }
@keyframes idf-flash-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

.idf-flash {
    overflow: hidden;
    transition: opacity .25s ease-in, height .3s ease-in .15s, margin .3s ease-in .15s,
                padding .3s ease-in .15s, border-width .3s ease-in .15s;
}
.idf-flash--out {
    opacity: 0;
    height: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    border-width: 0 !important;
}

/* ---- Pastille de compte (journal comptable, 2026-09-24) -----------------
 * components/account-chip.blade.php. Reste un lien : curseur main, souligné et
 * teinte plus soutenue au survol. Une famille de couleurs par classe du plan
 * comptable PME : 1 actifs, 2 passifs, 3 produits, 4-6 charges, 7-9 autres. */
.idf-acc {
    display: inline-block;
    min-width: 3.25rem;
    padding: 1px 8px;
    border-radius: 9999px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.5;
    text-align: center;
    font-variant-numeric: tabular-nums;
    text-decoration: none;
    border: 1px solid transparent;
    transition: background-color .15s ease-out, border-color .15s ease-out;
}
.idf-acc:hover, .idf-acc:focus-visible { text-decoration: underline; text-underline-offset: 2px; }
.idf-acc--asset     { background: #dbeafe; color: #1d4ed8; }
.idf-acc--asset:hover     { background: #bfdbfe; border-color: #93c5fd; }
.idf-acc--liability { background: #ede9fe; color: #6d28d9; }
.idf-acc--liability:hover { background: #ddd6fe; border-color: #c4b5fd; }
.idf-acc--revenue   { background: #dcfce7; color: #15803d; }
.idf-acc--revenue:hover   { background: #bbf7d0; border-color: #86efac; }
.idf-acc--expense   { background: #ffedd5; color: #c2410c; }
.idf-acc--expense:hover   { background: #fed7aa; border-color: #fdba74; }
.idf-acc--other     { background: #f3f4f6; color: #374151; }
.idf-acc--other:hover     { background: #e5e7eb; border-color: #d1d5db; }
@media print { .idf-acc { background: none !important; border: 0; padding: 0; color: #000 !important; } }

/* ---- Rangée de filtres homogène (2026-09-24) -------------------------------
 * Onglet « Factures liées » de la fiche client : le sélecteur de statut est un
 * Tom Select (pastilles de couleur), le sélecteur d'année un <select> natif —
 * hauteurs différentes (41 / 37 px) et libellé « Tous les statuts » coupé.
 * Même hauteur et largeur minimale pour tout ce qui est dans .idf-filter-row. */
.idf-filter-row select,
.idf-filter-row .ts-wrapper { min-width: 10.5rem; }
.idf-filter-row select,
.idf-filter-row .ts-wrapper,
.idf-filter-row .ts-control,
.idf-filter-row button { height: 38px; box-sizing: border-box; }
.idf-filter-row .ts-control { display: flex; align-items: center; font-size: 14px; }

/* ---- Cartes KPI cliquables du tableau de bord (2026-09-24) ----------------
 * Léger zoom + ombre au survol, pour signaler qu'on peut cliquer. Seuls
 * transform et box-shadow sont animés (pas de recalcul de mise en page). */
.idf-kpi-link {
    display: block;
    color: inherit;
    text-decoration: none;
    transition: transform .2s ease-out, box-shadow .2s ease-out;
}
.idf-kpi-link:hover,
.idf-kpi-link:focus-visible {
    transform: scale(1.04);
    box-shadow: 0 12px 24px -8px rgba(15, 23, 42, .18);
    position: relative;
    z-index: 1;
}
.idf-kpi-link:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }
.idf-kpi-link:active { transform: scale(1.01); }

/* ---- Ligne de 6 cartes KPI du tableau de bord (2026-09-24) ---------------
 * lg:grid-cols-6 n'existe pas dans le bundle Tailwind compilé : la 6ᵉ colonne
 * est posée ici. Montant un peu réduit à cette largeur pour que « 14'825.25 CHF »
 * tienne sur une ligne. */
@media (min-width: 1024px) {
    .idf-kpi-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .idf-kpi-grid .text-2xl { font-size: 1.3rem; line-height: 1.75rem; }
}

@media (prefers-reduced-motion: reduce) {
    [data-idf-tip]:hover::after { animation: none; }
    .idf-kpi-link, .idf-kpi-link:hover, .idf-kpi-link:focus-visible { transition: none; transform: none; }
    .idf-flash { transition: none; }
    .idf-flash-card { animation: none; }
}

/* ---- Partage par le menu du téléphone (WhatsApp…) (2026-10-02) ----------
 * Couleur WhatsApp hors bundle Tailwind (pas de npm run build). Texte foncé
 * #053B2B sur le badge : du blanc sur #25D366 ne fait qu'environ 2:1 de
 * contraste, illisible. */
.idf-badge-whatsapp { background-color: #25D366; color: #053B2B; }
.idf-icon-whatsapp { color: #25D366; }
.idf-icon-whatsapp:hover { color: #128C7E; }

/* ---- Pastille « e-shop » (liste des factures, 2026-10-05) -----------------
 * <x-eshop-badge> : facture issue d'une commande de la boutique. Teal = couleur
 * de l'addon e-shop (<x-addon-box color="teal">). Jamais de teinte de la ligne
 * entière (conflit avec le zébrage even:bg-gray-50). */
.idf-eshop {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-left: 6px;
    padding: 1px 6px;
    border: 1px solid #99f6e4;
    border-radius: 9999px;
    background: #f0fdfa;
    color: #0f766e;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
    vertical-align: middle;
    white-space: nowrap;
    cursor: default;
}
.idf-eshop svg { width: 12px; height: 12px; flex-shrink: 0; }
/* Bulle alignée à gauche : la pastille est dans la 1re colonne, une bulle centrée
 * déborderait du tableau (overflow-x-auto) et ferait apparaître une barre. */
[data-idf-tip-start]:hover::after,
[data-idf-tip-start]:focus-visible::after { left: 0; transform: none; animation-name: idf-tip-in-end; }