/* ==========================================================================
   TOP NAV (PRIORITY STYLES)
   ========================================================================== */

.nav-container {
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
    min-height: 2.5rem;
    box-sizing: border-box;
}

/* Breadcrumb section (left side) */
.breadcrumb-section {
    flex: 1;
    min-width: 0;
}

.breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: nowrap;
    height: 1.75rem;
    overflow-x: auto;
    padding: 0;
}

.breadcrumb-item {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.875rem;
    flex-shrink: 0;
    white-space: nowrap;
    height: 1.75rem;
    line-height: 1.75rem;
    box-sizing: border-box;
}

.breadcrumb-item a {
    background-color: var(--gray-100);
    text-decoration: none;
    padding: 0.375rem 0.5rem;
    border-radius: 0.375rem;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    white-space: nowrap;
    height: 1.75rem;
    line-height: normal;
    box-sizing: border-box;
    font-weight: 500;
}

.breadcrumb-item a:hover {
    /* css-color-ok: blue-50 historique des breadcrumbs, pas de token */
    background-color: #eff6ff;
}

.breadcrumb-item.active {
    color: var(--gray-700);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    white-space: nowrap;
    height: 1.75rem;
    line-height: normal;
    box-sizing: border-box;
    padding: 0.375rem 0.5rem;
    border-radius: 0.375rem;
    /* css-color-ok: blue-50 historique des breadcrumbs, pas de token */
    background: #eff6ff;
}

/* Icons consistent sizing */
.breadcrumb-item svg,
.breadcrumb-item .icon {
    flex-shrink: 0;
    width: 16px !important;
    height: 16px !important;
    display: inline-block;
    vertical-align: middle;
}

.breadcrumb > svg {
    flex-shrink: 0;
    width: 14px !important;
    height: 14px !important;
    color: var(--gray-400);
}

.search-section {
  background: var(--gray-50);
  padding: var(--space-6);
  border-radius: var(--radius);
  margin-bottom: var(--space-6);
  border: 1px solid var(--border);
  position: relative;
  overflow: hidden;
}

.search-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
}

/* .search-title / .search-description / .search-controls / .search-filters-bar
   supprimés le 2026-08-28 — zéro consommateur (seul .search-section vit encore,
   airfact Réglages § SIREN). */

/* ==========================================================================
   TOPBAR SEARCH — le dialecte de la BARRE DE NAVIGATION, et de rien d'autre.
   Renommé .search-wrapper → .topbar-search le 2026-08-28 : les 16 listes qui
   l'écrivaient à la main sont passées sur filter_search()/.filter-search
   (tables.css), le gabarit des LISTES. Consommateurs : le slot topbar_search()
   (topbar.php) et les recherches posées dans le slot actions du page_header
   (airfact /previsionnel). */
.topbar-search {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1 1 300px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    /* ⚠ LA GOUTTIÈRE VERTICALE EST NULLE, et `height` fait donc enfin ce
       qu'elle dit. Elle valait `1.5rem` — 24 px en haut ET en bas — dans une
       boîte déclarée à `2.25rem` (36 px) : en `border-box`, 48 px de gouttière
       + 2 px de bordure l'emportent sur la hauteur demandée, et le champ
       sortait à **50 px**. La déclaration `height` ne mentait pas un peu, elle
       était entièrement inopérante.
       Mesuré dans la barre le 2026-09-13 : champ 50 px contre 40-42 px pour
       les boutons voisins — trois hauteurs dans une rangée de 80 px (constat
       Olivier). 40 px aligne le champ sur les boutons de l'en-tête, qui sont
       désormais bornés à la même valeur (layout.css). */
    padding: 0 0.875rem;
    min-width: 280px;
    height: 40px;
    box-sizing: border-box;
    transition: all 0.2s ease;
}

/* UNE seule marque de focus, et elle est portée par le CHAMP (2026-09-13).
   Il y en avait TROIS pour un seul événement, mesurées au clic, transition
   terminée : la bordure du champ passait au bleu marine, une ombre de 3 px
   apparaissait autour, ET un `outline: 2px solid` était peint sur l'input avec
   `outline-offset: -2px` — donc un RECTANGLE À ANGLES DROITS À L'INTÉRIEUR
   d'un champ arrondi (capture Olivier). C'est la troisième qui se voyait le
   plus et qui n'aurait jamais dû exister : elle avait été ajoutée en A5
   (2026-08-27) au motif que « la recherche n'avait AUCUN indicateur de
   focus », ce qui était déjà faux — cette règle-ci existait.
   ⚠ Un <input> texte matche `:focus-visible` même au CLIC de souris (la spec
   l'impose pour tout ce qui attend une saisie) : la marque de trop se voyait
   donc à chaque clic, pas seulement au clavier.
   L'ombre passe de 10 % à 25 % : à 10 % d'un bleu marine sur fond clair, elle
   ne se voyait pas — c'était la bordure qui faisait tout le travail. */
.topbar-search:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 25%, transparent);
}

.topbar-search .topbar-search-icon {
    color: var(--gray-500);
    margin-right: 0.5rem;
    flex-shrink: 0;
}

.topbar-search-input {
    /* Gouttière verticale nulle ici aussi : 20 px en haut et en bas dans un
       champ de 40 px poussaient le texte hors de sa boîte. Le centrage vient
       du `align-items: center` du champ, pas d'une gouttière. */
    padding: 0;
    border: none !important;
    background: transparent !important;
    margin: 0 !important;
    flex: 1;
    /* `min-width: 0` — sans lui, un flex item garde `min-width: auto`, et pour
       un <input> c'est sa taille INTRINSÈQUE (~181 px mesurés, la largeur par
       défaut d'un champ texte) : l'input refuse de se resserrer et c'est le
       bouton d'effacement qui DÉBORDE du champ. Mesuré le 2026-09-13 sur
       airfact /supplier-orders : le ✕ sortait de 21 px au-delà de la bordure
       arrondie, entre le champ et la grappe d'actions. Le défaut dormait
       depuis que `.topbar-search-clear` existe — il ne s'était jamais vu
       parce que le bouton n'était rendu nulle part. */
    min-width: 0;
    font-size: 0.875rem;
    outline: none !important;
    box-shadow: none !important;
    color: var(--gray-700);
    height: 100%;
}

/* PAS de règle `:focus-visible` sur l'input — c'est volontaire, et c'est une
   suppression, pas un oubli (2026-09-13). Elle peignait un rectangle à angles
   droits À L'INTÉRIEUR du champ arrondi, en plus des deux marques que
   `.topbar-search:focus-within` pose déjà sur le champ lui-même. Le focus
   reste parfaitement visible : la bordure passe de `--border` (gris clair) à
   `--primary` (le bleu marine de la marque) et gagne un anneau de 3 px —
   mesuré au clic, transition terminée. Ne pas la réintroduire sans avoir
   d'abord retiré celles du champ — sinon on revient à trois marques.
   (`outline: none !important` sur .topbar-search-input ci-dessus suffit
   désormais, plus rien ne le contredit.) */

.topbar-search-input::placeholder {
    color: var(--gray-400);
}

.topbar-search-clear {
    background: none;
    border: none;
    color: var(--gray-400);
    cursor: pointer;
    padding: 0.25rem;
    margin-left: 0.375rem;
    border-radius: 0.25rem;
    /* VISIBLE par défaut, et masqué par `.hidden` — c'était l'inverse
       jusqu'au 2026-09-13 (`display: none` + révélation au `:focus-within`).
       La règle de focus n'a JAMAIS servi : le bouton n'était rendu nulle part
       (zéro consommateur PHP comme JS, mesuré). Son seul consommateur est
       désormais la clé `clear_id` de `topbar_search()`, qui y loge
       « Supprimer les filtres » : celui-là doit se voir dès qu'un filtre est
       actif, que le champ ait le focus ou non — un bouton d'effacement qui
       n'apparaît qu'au focus est un bouton qu'on ne trouve pas. Le JS des
       pages le pilote par `classList.toggle('hidden', …)`, comme son jumeau
       de la barre d'outils. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    flex-shrink: 0;
    width: 1.5rem;
    height: 1.5rem;
}


.topbar-search-clear:hover {
    background: var(--gray-100);
    color: var(--gray-700);
}

/* Dialecte de liste (résultats/filtres) PURGÉ le 2026-08-28 : .results-badge,
   .filter-search-wrapper, .filter-wrapper, .filter-icon, .card-header-filters,
   .search-input/.search-icon « alternatifs », .filters, .filters-grid,
   .filter-group, .filter-label — les derniers consommateurs sont passés sur
   filter_search()/.table-toolbar ou les utilitaires .flex, .gap-N, .items-center.
   (Écrire « .gap-* » suivi d'une barre FERMAIT ce commentaire ici même : le
   parseur reprenait en CSS aux deux lignes suivantes, en faisait le prélude
   d'une règle invalide, et consommait jusqu'à la première accolade — donc le
   bloc .component-groups ci-dessous, JETÉ. Mesuré au navigateur, audit CSS-05.)
   Le bloc Bootstrap .category-* est parti chez son seul consommateur
   (build/project-builder.css — pack-selection-modal.js). */

/* `.component-groups` / `.component-group` RETIRÉES le 2026-09-06 (CSS-05,
   CSS-10) : aucune vue, aucun module, aucune autre feuille des 8 apps ne les
   porte — vérifié classe par classe (`data-component-group` et
   `.component-group-row/-name/-count/-price` de build sont d'autres noms).
   `.component-groups` était de surcroît la règle que le commentaire ci-dessus
   AVALAIT : elle n'a jamais peint quoi que ce soit depuis qu'il a été écrit. */

.group-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem;
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: 0.25rem;
    cursor: pointer;
    transition: background-color 0.2s;
}

.group-header:hover {
    background: var(--gray-200);
}

.group-name {
    font-weight: 500;
    flex: 1;
}

.group-arrow {
    transition: transform 0.2s;
    font-size: 0.8rem;
}

.group-content {
    border: 1px solid var(--gray-200);
    border-top: none;
    border-radius: 0 0 0.25rem 0.25rem;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.group-content.collapsed {
    max-height: 0;
    border: none;
}

.component-item {
    padding: 0.375rem 0.75rem;
    border-bottom: 1px solid var(--gray-100);
    font-size: 0.85rem;
}

.component-item:last-child {
    border-bottom: none;
}

.component-name {
    color: var(--gray-700);
}

/* ==========================================================================
   RESPONSIVE BEHAVIOR
   ========================================================================== */

/* Mobile Responsive */
@media (max-width: 768px) {
    /* Top nav responsive (priority) */
    .nav-container {
        flex-direction: column;
        gap: 0.75rem;
        align-items: stretch;
        padding: 0.75rem;
    }
    
    .search-section {
        justify-content: space-between;
        gap: 0.75rem;
    }

    .topbar-search {
        min-width: 200px;
        flex: 1;
    }
}

@media (max-width: 480px) {
    .topbar-search {
        min-width: 150px;
    }
    
    .nav-container {
        margin: 0.5rem 0;
    }
}