/* =============================================================================
   Onagre App — styles propres à l'application (le design system vit dans Ordalie.Onagre.UI).
   Uniquement des variables --o-* : aucune couleur littérale.
   ============================================================================= */
@layer o-components {
    /* Carte de service (cytoscape) : conteneur plein cadre */
    .app-servicemap { position: relative; height: calc(100dvh - 15rem); min-height: 28rem; border-radius: var(--o-radius-lg); border: 1px solid var(--o-border); background: var(--o-surface); overflow: hidden; }
    .app-servicemap__canvas { position: absolute; inset: 0; }
    .app-servicemap__tools { position: absolute; top: var(--o-space-3); left: var(--o-space-3); z-index: 2; display: flex; gap: var(--o-space-2); flex-wrap: wrap; }
    .app-servicemap__legend { position: absolute; bottom: var(--o-space-3); left: var(--o-space-3); z-index: 2; }
    .app-deps-mini { height: 15rem; position: relative; }
    .app-sketch { width: 100%; min-height: 12rem; border-radius: var(--o-radius-md); background: var(--o-surface-2); border: 1px solid var(--o-border-subtle); overflow: hidden; }
}

@layer o-components {
    /* Intégration d'alerte (logo ou icône), empilables */
    .app-integration { position: relative; display: inline-grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--o-surface); border: 1px solid var(--o-border); color: var(--o-text-2); flex-shrink: 0; }
    .app-integration img { width: 62%; height: 62%; object-fit: contain; }
    .app-integration--sm { width: 1.375rem; height: 1.375rem; }
    .app-integration-stack { display: inline-flex; }
    .app-integration-stack > .app-integration + .app-integration { margin-left: -0.375rem; box-shadow: 0 0 0 2px var(--o-surface); }

    /* Bandeau d'état global (accueil) */
    .app-pulse { display: flex; align-items: center; gap: var(--o-space-3); padding: var(--o-space-3) var(--o-space-4); border-radius: var(--o-radius-lg); border: 1px solid var(--o-border); background: var(--o-surface); box-shadow: var(--o-shadow-xs); }
    .app-pulse__text { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
    .app-pulse__title { font-weight: var(--o-weight-semibold); font-size: var(--o-text-sm); }
    .app-pulse__sub { font-size: var(--o-text-xs); color: var(--o-text-3); }
    .app-pulse--ok { border-color: var(--o-ok-line); background: linear-gradient(90deg, var(--o-ok-soft), var(--o-surface) 60%); }
    .app-pulse--danger { border-color: var(--o-danger-line); background: linear-gradient(90deg, var(--o-danger-soft), var(--o-surface) 60%); }

    /* Liste d'uptime par type */
    .app-uptime-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: var(--o-space-3); }
    .app-uptime-row__meter { grid-column: 2 / 3; }
}

@layer o-components {
    /* Filtre par type de ressource (liste) : rangée de puces défilante */
    .app-type-filter { display: flex; gap: var(--o-space-1-5); overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; mask-image: linear-gradient(90deg, black 92%, transparent); }
    .app-type-filter::-webkit-scrollbar { display: none; }
    .app-type-filter .o-chip { height: 1.75rem; padding: 0 var(--o-space-2-5); font-size: var(--o-text-xs); }
    a.o-chip:hover { background: var(--o-surface-hover); color: var(--o-text); }

    /* État cliquable (démarrer / mettre en pause) */
    .app-state-toggle { display: inline-flex; align-items: center; gap: var(--o-space-1-5); padding: 2px var(--o-space-1-5); margin-left: calc(var(--o-space-1-5) * -1); border-radius: var(--o-radius-sm); }
    .app-state-toggle:hover { background: var(--o-surface-hover); }
    .app-state-toggle__hint { opacity: 0; color: var(--o-text-3); transition: opacity var(--o-duration-fast); }
    .app-state-toggle:hover .app-state-toggle__hint, .app-state-toggle:focus-visible .app-state-toggle__hint { opacity: 1; }

    /* Uptime dans un tableau : valeur + mini-jauge */
    .app-uptime { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 4px; min-width: 4.5rem; }
    .app-uptime .o-meter { width: 4.5rem; height: 4px; }
    .app-uptime .o-meter__bar { background: var(--o-meter-c); }
}