/*
 * Barre d'état de la machine (cf. `templates/_host_status_bar.html.twig`). Sombre dans les deux
 * thèmes, comme le menu latéral dont elle prolonge le cadre : c'est un élément de la fenêtre, pas du
 * contenu de la page.
 */
:root {
    /* Le thème pose `html { font-size: 13px }` : 2.5rem ≈ 32 px de haut, texte à ≈ 12 px. */
    --host-status-bar-height: 2.5rem;
    --host-status-bar-bg: #15151f;
    --host-status-bar-border: #2b2b40;
    --host-status-bar-text: #c9cbd6;
    --host-status-bar-muted: #7e8299;
    --host-status-bar-meter-bg: #2b2b40;
    /* Teintes de la cloche, choisies pour se lire sur le fond sombre de la barre. */
    --host-status-bar-running: #6ea8fe;
    --host-status-bar-success: #5fd68a;
    --host-status-bar-danger: #ff5c7a;
}

.host-status-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    /* Au-dessus du menu latéral fixe (105), sous les tiroirs et les modales du thème. */
    z-index: 106;
    display: flex;
    align-items: center;
    gap: 1.75rem;
    height: var(--host-status-bar-height);
    padding: 0 1.25rem;
    overflow: hidden;
    background: var(--host-status-bar-bg);
    border-top: 1px solid var(--host-status-bar-border);
    color: var(--host-status-bar-text);
    font-family: var(--bs-font-monospace);
    font-size: 0.95rem;
    white-space: nowrap;
}

.host-status-bar--stale .host-status-bar__item {
    opacity: 0.45;
}

.host-status-bar__item {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: default;
}

.host-status-bar__label,
.host-status-bar__icon {
    color: var(--host-status-bar-muted);
}

.host-status-bar__icon {
    font-size: 1.15rem;
}

.host-status-bar__meter {
    display: inline-block;
    width: 3.25rem;
    height: 0.5rem;
    overflow: hidden;
    border-radius: 0.2rem;
    background: var(--host-status-bar-meter-bg);
}

.host-status-bar__meter-fill {
    display: block;
    width: 0;
    height: 100%;
    background: var(--bs-success);
    transition: width 0.4s ease;
}

.host-status-bar__item--warning .host-status-bar__meter-fill {
    background: var(--bs-warning);
}

.host-status-bar__item--warning .host-status-bar__value {
    color: var(--bs-warning);
}

.host-status-bar__item--danger .host-status-bar__meter-fill {
    background: var(--bs-danger);
}

.host-status-bar__item--danger .host-status-bar__value {
    color: var(--bs-danger);
}

/* Bout droit de la barre : mise à jour disponible, puis la cloche des tâches de fond. */
.host-status-bar__end {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    margin-left: auto;
}

.host-status-bar__activity {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    height: calc(var(--host-status-bar-height) - 0.5rem);
    padding: 0 0.5rem;
    border: 0;
    border-radius: 0.375rem;
    background: transparent;
    color: var(--host-status-bar-text);
    font: inherit;
    cursor: pointer;
}

.host-status-bar__activity:hover,
.host-status-bar__activity:focus-visible,
.host-status-bar__activity[aria-expanded="true"] {
    background: var(--host-status-bar-border);
}

.host-status-bar__activity:focus-visible {
    outline: 2px solid var(--host-status-bar-text);
    outline-offset: -2px;
}

.host-status-bar__activity[aria-expanded="true"] .host-status-bar__icon {
    color: var(--host-status-bar-text);
}

/*
 * État de la cloche, posé par `activity-console.js` : bleue tant que des tâches tournent, verte
 * quand des tâches terminées non lues ont toutes réussi, rouge dès qu'une a échoué. La couleur
 * n'est jamais seule : le badge compte les non lues, et le nom accessible de la cloche les redit.
 */
.host-status-bar__activity[data-activity-state="running"] .host-status-bar__icon {
    color: var(--host-status-bar-running);
}

.host-status-bar__activity[data-activity-state="done"] .host-status-bar__icon {
    color: var(--host-status-bar-success);
}

.host-status-bar__activity[data-activity-state="failed"] .host-status-bar__icon {
    color: var(--host-status-bar-danger);
}

.host-status-bar__activity[data-activity-state="done"],
.host-status-bar__activity[data-activity-state="failed"] {
    font-weight: 700;
}

/*
 * Emplacement du badge : il garde la taille d'un badge même vide, pour que l'anneau de
 * traitement en cours tourne seul au même endroit quand il n'y a rien de non lu.
 */
.host-status-bar__activity-badge {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.4rem;
    height: 1.4rem;
}

/* Anneau qui tourne PAR-DESSUS le badge des non lues : un traitement est en cours. */
.host-status-bar__activity-spinner {
    position: absolute;
    inset: -3px;
    border: 2px solid var(--host-status-bar-running);
    border-right-color: transparent;
    border-radius: 999px;
    pointer-events: none;
    animation: host-status-bar-spin 0.9s linear infinite;
}

.host-status-bar__activity-spinner[hidden] {
    display: none;
}

@keyframes host-status-bar-spin {
    to { transform: rotate(360deg); }
}

/* Sans animation, l'anneau reste : complet et immobile, il dit encore « en cours ». */
@media (prefers-reduced-motion: reduce) {
    .host-status-bar__activity-spinner {
        border-right-color: var(--host-status-bar-running);
        animation: none;
    }
}

/* Nombre de tâches terminées non lues : il reste jusqu'à l'ouverture de la console. */
.host-status-bar__activity-count {
    min-width: 1.4rem;
    padding: 0 0.35rem;
    border-radius: 0.7rem;
    background: var(--host-status-bar-success);
    color: #0b2e1a;
    font-weight: 700;
    line-height: 1.4rem;
    text-align: center;
}

.host-status-bar__activity-count[hidden] {
    display: none;
}

.host-status-bar__activity[data-activity-state="failed"] .host-status-bar__activity-count {
    background: var(--host-status-bar-danger);
    color: #ffffff;
}

.host-status-bar__update {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--bs-warning);
    font-weight: 600;
    text-decoration: none;
}

.host-status-bar__update[hidden] {
    display: none;
}

.host-status-bar__update:hover,
.host-status-bar__update:focus-visible {
    color: var(--bs-warning);
    text-decoration: underline;
}

.host-status-bar__update .host-status-bar__icon {
    color: inherit;
}

/* La page, le menu latéral et la console des tâches de fond s'arrêtent au-dessus de la barre. */
.has-host-status-bar {
    padding-bottom: var(--host-status-bar-height);
}

.has-host-status-bar[data-kt-app-sidebar-fixed=true] .app-sidebar {
    bottom: var(--host-status-bar-height);
}

/* Ouverte, la console se pose juste au-dessus de la cloche, au bout droit de la barre. */
.has-host-status-bar .activity-console {
    bottom: calc(var(--host-status-bar-height) + 0.5rem);
}

/* Écran étroit : on garde CPU, RAM et la mise à jour ; le reste se lit sur grand écran. */
@media (max-width: 575.98px) {
    .host-status-bar {
        gap: 0.75rem;
        padding: 0 0.5rem;
    }

    .host-status-bar__meter,
    .host-status-bar__item[data-host-status-item="disk"],
    .host-status-bar__item[data-host-status-item="containers"] {
        display: none;
    }

    .has-host-status-bar .activity-console {
        bottom: calc(var(--host-status-bar-height) + 0.5rem);
    }
}

@media print {
    .host-status-bar {
        display: none;
    }

    .has-host-status-bar {
        padding-bottom: 0;
    }
}