/* LWB Statut — page publique · LEWEBMAX Admin · MIT
   Couleurs reprises du thème LWB s'il est actif (variables --lwm-*), sinon valeurs par défaut. */
.lwbs {
    --s-ok: #16a34a; --s-warn: #e3a008; --s-partial: #ea580c; --s-danger: #dc2626; --s-info: #2563eb; --s-none: #e5e7eb;
    --s-text: var(--lwm-text, #0f172a); --s-muted: var(--lwm-muted, #64748b); --s-border: var(--lwm-border, #e6eaf2);
    --s-surface: var(--lwm-surface, #fff); --s-radius: var(--lwm-radius, 14px);
    max-width: 920px; margin: 0 auto; color: var(--s-text);
}
.lwbs-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.lwbs-head h2 { margin: 2px 0 0; font-size: 26px; font-weight: 700; }
.lwbs-eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--s-muted); }
.lwbs-updated { font-size: 13px; color: var(--s-muted); }

.lwbs-overall { display: flex; align-items: center; gap: 14px; padding: 18px 22px; border-radius: var(--s-radius); color: #fff; font-size: 18px; margin-bottom: 18px; }
.lwbs-overall-icon { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: rgba(255, 255, 255, .22); font-size: 15px; }
.lwbs-overall.lwbs-tone-ok { background: var(--s-ok); }
.lwbs-overall.lwbs-tone-info { background: var(--s-info); }
.lwbs-overall.lwbs-tone-warn { background: var(--s-warn); }
.lwbs-overall.lwbs-tone-partial { background: var(--s-partial); }
.lwbs-overall.lwbs-tone-danger { background: var(--s-danger); }

.lwbs-card { background: var(--s-surface); border: 1px solid var(--s-border); border-radius: var(--s-radius); padding: 20px 22px; margin-bottom: 18px; }
.lwbs-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.lwbs-card-head h3, .lwbs-card h3 { margin: 0; font-size: 17px; font-weight: 700; }
.lwbs-card-head span { font-size: 13px; color: var(--s-muted); }
.lwbs-empty { color: var(--s-muted); margin: 12px 0 0; }

.lwbs-incident { border-left: 4px solid var(--s-warn); }
.lwbs-impact-major { border-left-color: var(--s-partial); }
.lwbs-impact-critical { border-left-color: var(--s-danger); }
.lwbs-impact-maintenance { border-left-color: var(--s-info); }
.lwbs-incident h3 i { color: var(--s-info); margin-right: 4px; }
.lwbs-incident-meta { margin: 4px 0 10px; font-size: 13px; color: var(--s-muted); }
.lwbs-timeline { list-style: none; margin: 0; padding: 0; }
.lwbs-timeline li { position: relative; padding: 0 0 12px 18px; font-size: 14px; line-height: 1.5; }
.lwbs-timeline li::before { content: ""; position: absolute; left: 0; top: 7px; width: 8px; height: 8px; border-radius: 50%; background: var(--s-border); }
.lwbs-timeline li:first-child::before { background: var(--s-warn); }
.lwbs-impact-maintenance .lwbs-timeline li:first-child::before { background: var(--s-info); }
.lwbs-timeline small { display: block; color: var(--s-muted); font-size: 12px; }

.lwbs-group { margin: 22px 0 4px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--s-muted); }
.lwbs-comp { padding: 16px 0; border-top: 1px solid var(--s-border); }
.lwbs-group + .lwbs-comp { border-top: 0; }
.lwbs-comp-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 10px; }
.lwbs-comp-name { font-weight: 600; font-size: 15px; }
.lwbs-comp-name i { color: var(--s-muted); font-size: 13px; margin-left: 4px; cursor: help; }
.lwbs-state { font-size: 13.5px; font-weight: 600; }
.lwbs-state.lwbs-tone-ok { color: var(--s-ok); }
.lwbs-state.lwbs-tone-info { color: var(--s-info); }
.lwbs-state.lwbs-tone-warn { color: #b7791f; }
.lwbs-state.lwbs-tone-partial { color: var(--s-partial); }
.lwbs-state.lwbs-tone-danger { color: var(--s-danger); }

.lwbs-bars { display: flex; gap: 2px; height: 34px; }
.lwbs-bar { position: relative; flex: 1 1 0; min-width: 2px; border-radius: 2px; background: var(--s-none); outline: none; transition: opacity .1s; }
.lwbs-bars:hover .lwbs-bar { opacity: .55; }
.lwbs-bars .lwbs-bar:hover, .lwbs-bar:focus { opacity: 1 !important; }
.lwbs-bar-ok { background: var(--s-ok); }
.lwbs-bar-warn { background: var(--s-warn); }
.lwbs-bar-partial { background: var(--s-partial); }
.lwbs-bar-danger { background: var(--s-danger); }
.lwbs-bar-none { background: var(--s-none); }
.lwbs-bar:hover::after, .lwbs-bar:focus::after {
    content: attr(data-tip); position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
    z-index: 5; width: max-content; max-width: 240px; padding: 8px 10px; border-radius: 8px;
    background: #0f172a; color: #fff; font-size: 12px; line-height: 1.45; white-space: pre-line; text-align: left;
    box-shadow: 0 6px 20px rgba(15, 23, 42, .2); pointer-events: none;
}
.lwbs-bars .lwbs-bar:nth-child(-n+8):hover::after { left: 0; transform: none; }
.lwbs-bars .lwbs-bar:nth-last-child(-n+8):hover::after { left: auto; right: 0; transform: none; }
.lwbs-bars-foot { display: flex; align-items: center; gap: 10px; margin-top: 8px; font-size: 12px; color: var(--s-muted); white-space: nowrap; }
.lwbs-line { flex: 1; height: 1px; background: var(--s-border); }

.lwbs-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--s-border); font-size: 12px; color: var(--s-muted); }
.lwbs-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }

.lwbs-day { padding: 14px 0; border-top: 1px solid var(--s-border); }
.lwbs-card-head + .lwbs-day { border-top: 0; }
.lwbs-day h4 { margin: 0 0 6px; font-size: 14px; font-weight: 700; }
.lwbs-none { margin: 0; font-size: 13.5px; color: var(--s-muted); }
.lwbs-past { padding: 4px 0 4px 12px; border-left: 3px solid var(--s-warn); margin-top: 6px; }
.lwbs-past b { display: block; font-size: 14.5px; margin-bottom: 2px; }
.lwbs-past p { margin: 2px 0; font-size: 13.5px; }
.lwbs-past p span { font-weight: 600; }
.lwbs-past small { color: var(--s-muted); }

@media (max-width: 640px) {
    .lwbs-card { padding: 16px; }
    .lwbs-overall { font-size: 16px; padding: 14px 16px; }
    .lwbs-bars { height: 30px; }
    .lwbs-bars .lwbs-bar:nth-last-child(n+31) { display: none; }
    .lwbs-bars-foot span:first-child { visibility: hidden; position: relative; }
    .lwbs-bars-foot span:first-child::after { content: "30 jours"; visibility: visible; position: absolute; left: 0; }
}

/* Sous le thème LWB, la barre supérieure affiche déjà le titre de la page. */
body.lwx .lwbs-head h2, body.lwx .lwbs-eyebrow { display: none; }
body.lwx .lwbs-head { margin-bottom: 10px; }