/**
 * Thème AppBorvo — charte validée le 2026-06-05 (docs/charte-ui.md).
 *
 * Bleu #00205b (principal), vert #02914c (positif), rouge #d6001c (alerte).
 * Mulish (texte, chargée par le panel) + Roboto (titres, chargée ci-dessous).
 * Style "Metricool" : sidebar bleu marine, cartes arrondies, boutons pilule,
 * graisses légères.
 *
 * ⚠️ Ne JAMAIS mettre de couleur en dur dans les Resources : tout le style
 * passe par ce fichier et par ->colors() dans AdminPanelProvider.
 */

/* Roboto (titres) : auto-hébergée, déclarée dans public/fonts/fonts.css
   (chargé par le panel via ->font()). PAS d'@import externe ici : un CDN
   de polices injoignable bloquait le rendu des pages ~30s. */

/* ─────────────────────── Typographie ─────────────────────── */

/* Titres et gros chiffres en Roboto, graisse 500 max (charte : "pas trop gras") */
.fi-header-heading,
.fi-section-header-heading,
.fi-modal-heading,
.fi-wi-stats-overview-stat-value {
    font-family: 'Roboto', ui-sans-serif, system-ui, sans-serif;
    font-weight: 500;
}

.fi-header-heading {
    font-size: 1.25rem;
}

/* ─────────────────────── Sidebar bleu marine ─────────────────────── */

.fi-sidebar,
.fi-sidebar-header {
    background-color: #00205b;
}

/* Logo / nom de marque en blanc sur le fond bleu */
.fi-sidebar-header .fi-logo {
    color: #fff;
}

/* Liens de navigation : blanc translucide, actif inversé (fond blanc) */
.fi-sidebar-item-btn {
    border-radius: 10px;
}

.fi-sidebar-item-btn .fi-sidebar-item-label {
    color: rgb(255 255 255 / 0.8);
    font-weight: 400;
}

.fi-sidebar-item-btn svg {
    color: rgb(255 255 255 / 0.7);
}

.fi-sidebar-item-btn:hover {
    background-color: rgb(255 255 255 / 0.08);
}

.fi-sidebar-item.fi-active > .fi-sidebar-item-btn,
.fi-sidebar-item.fi-active .fi-sidebar-item-btn {
    background-color: #fff;
}

.fi-sidebar-item.fi-active .fi-sidebar-item-btn .fi-sidebar-item-label {
    color: #00205b;
    font-weight: 600;
}

.fi-sidebar-item.fi-active .fi-sidebar-item-btn svg {
    color: #00205b;
}

/* Intitulés de groupes de navigation */
.fi-sidebar-group-btn,
.fi-sidebar-group-label {
    color: rgb(255 255 255 / 0.55);
}

/* Boutons d'ouverture/fermeture de la sidebar */
.fi-sidebar-close-sidebar-btn svg,
.fi-sidebar-close-collapse-sidebar-btn svg {
    color: rgb(255 255 255 / 0.7);
}

/* Switcher d'entité (tenant menu) : encadré translucide comme la maquette */
.fi-sidebar [class*='fi-tenant-menu'] button,
.fi-sidebar [class*='fi-tenant'] > button {
    background-color: rgb(255 255 255 / 0.1);
    border: 1px solid rgb(255 255 255 / 0.18);
    border-radius: 10px;
    color: #fff;
}

.fi-sidebar [class*='fi-tenant'] button span,
.fi-sidebar [class*='fi-tenant'] button svg {
    color: #fff;
}

/* ─────────────────────── Cartes et conteneurs ─────────────────────── */

.fi-section,
.fi-ta-ctn,
.fi-wi-stats-overview-stat {
    border-radius: 14px;
}

/* Blocs de formulaire à hauteur égale : quand deux sections partagent une
   rangée de la grille, la plus courte s'étire au niveau de la plus haute
   (demande Jeremie 2026-06-05 — rendu plus harmonieux).
   ⚠️ Toute la chaîne de wrappers doit être à 100%, sinon le height de la
   section s'appuie sur un parent en hauteur auto et ne fait rien :
   .fi-grid-col (cellule, s'étire seule) > .fi-sc-component > .fi-sc-section
   > section.fi-section. Le :has() limite l'étirement aux wrappers qui
   contiennent bien une section (pas aux simples champs). */
.fi-sc-component:has(> .fi-sc-section) {
    height: 100%;
}

.fi-sc-component > .fi-sc-section,
.fi-sc-component > .fi-sc-section > .fi-section {
    height: 100%;
}

/* ─────────────────────── Boutons pilule ─────────────────────── */

.fi-btn {
    border-radius: 9999px;
}

/* ─────────────────── Fil de notes (App\Livewire\NotesFeed) ───────────────────
   Le bloc garde une hauteur stable : c'est le fil qui scrolle. */

/* NB : la zone de saisie et le bouton "Publier" du fil sont stylés en INLINE
   dans la vue (les styles internes de Filament écrasaient les champs nus
   dans ses sections, même avec !important). Seules les cartes du fil
   ci-dessous passent par ce fichier. */

.erp-notes-feed {
    max-height: 260px; /* hauteur fixe du fil : au-delà, on scrolle */
    overflow-y: auto;
    margin-top: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding-right: 0.25rem;
}

.erp-note {
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 0.6rem 0.8rem;
    background: #fff;
}

.erp-note-pinned {
    border-color: #00205b33;
    background: #00205b08;
}

.erp-note-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    font-size: 0.75rem;
}

.erp-note-author {
    font-weight: 600;
}

.erp-note-date {
    color: #6b7280;
}

.erp-note-badge {
    color: #00205b;
    font-weight: 500;
}

.erp-note-actions {
    margin-left: auto;
    display: flex;
    gap: 0.6rem;
}

.erp-note-actions button {
    color: #6b7280;
    font-size: 0.72rem;
}

.erp-note-actions button:hover {
    color: #00205b;
}

.erp-note-body {
    margin-top: 0.35rem;
    font-size: 0.85rem;
    white-space: pre-line;
}

.erp-notes-empty {
    color: #6b7280;
    font-size: 0.8rem;
    padding: 0.5rem 0;
}

/* Lisibilité du fil en mode sombre */
:is(.dark) .erp-note {
    background: rgb(255 255 255 / 0.05);
    border-color: rgb(255 255 255 / 0.12);
}

:is(.dark) .erp-note-pinned {
    background: rgb(255 255 255 / 0.09);
}