/* ── Self-hosted Inter (Tabler's default font, loaded locally) ───────────── */
@font-face {
    font-family: 'Inter';
    src: url('/css/fonts/InterVariable.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal oblique;
    font-display: block;
}

/* ── Thème TSMonitor (mêmes overrides de variables Tabler) ──────────────── */
:root,
[data-bs-theme="dark"] {
    --tblr-font-sans-serif: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;

    --tblr-body-bg:               rgb(8, 9, 13);
    --tblr-body-bg-rgb:           8, 9, 13;
    --tblr-bg-surface:            rgb(14, 15, 22);
    --tblr-bg-surface-secondary:  rgb(20, 21, 32);
    --tblr-bg-surface-tertiary:   rgb(20, 21, 32);
    --tblr-card-bg:               rgb(14, 15, 22);

    --tblr-body-color:            rgb(161, 161, 170);
    --tblr-body-color-rgb:        161, 161, 170;
    --tblr-emphasis-color:        #ffffff;
    --tblr-heading-color:         #ffffff;
    --tblr-secondary-color:       rgb(100, 100, 115);
    --tblr-secondary-color-rgb:   100, 100, 115;

    --tblr-border-color:             rgba(255, 255, 255, .04);
    --tblr-border-color-translucent: rgba(255, 255, 255, .07);
    --tblr-card-border-color:        rgba(255, 255, 255, .04);

    --tblr-link-color:       #34d399;
    --tblr-link-hover-color: #6ee7b7;

    --tblr-primary:      #34d399;
    --tblr-primary-rgb:  52, 211, 153;
    --tblr-primary-fg:   #04140d;
    --tblr-success:      #22c55e;
    --tblr-success-rgb:  34, 197, 94;
    --tblr-danger:       #ef4444;
    --tblr-danger-rgb:   239, 68, 68;
    --tblr-warning:      #fbbf24;
    --tblr-warning-rgb:  251, 191, 36;
    --tblr-orange:       #f97316;
    --tblr-orange-rgb:   249, 115, 22;

    --tblr-navbar-bg:                var(--tblr-bg-surface);
    --tblr-navbar-border-color:      var(--tblr-border-color);
    --tblr-navbar-color:             rgb(161, 161, 170);
    --tblr-navbar-active-color:      #04140d;
    --tblr-navbar-active-bg:         var(--tblr-primary);
    --tblr-navbar-hover-color:       #ffffff;
    --tblr-navbar-brand-color:       #ffffff;
    --tblr-navbar-brand-hover-color: #ffffff;
}

.navbar-vertical {
    --tblr-navbar-active-bg:    var(--tblr-primary);
    --tblr-navbar-active-color: #04140d;
}
#sidebar-menu .nav-link { color: var(--tblr-navbar-color); }
#sidebar-menu .nav-link.active,
#sidebar-menu .nav-link.active:hover {
    color: #04140d;
    background: var(--tblr-primary);
}
/* Text and icon both dark on the green fill (white on #34d399 is too faint). */
#sidebar-menu .nav-link.active .nav-link-icon,
#sidebar-menu .nav-link.active .nav-link-title {
    color: #04140d;
    opacity: 1;
}
#sidebar-menu .navbar-nav {
    --tblr-sidebar-nav-padding-y: .5rem;
    --tblr-sidebar-nav-padding-x: .625rem;
}

#aur-brand {
    --tblr-navbar-brand-font-size: 1.1rem;
    --tblr-sidebar-brand-padding-x: 1.5rem;
}
@media (min-width: 992px) {
    #aur-brand { padding-top: 1.25rem; }
}

#main-content .page-header { margin-top: 0; }
html { scroll-behavior: smooth; }
section[id] { scroll-margin-top: 1rem; }

/* ── Chart.js lit ces valeurs directement ───────────────────────────────── */
:root {
    --aur-chart-text: var(--tblr-secondary-color, #9aa0ac);
    --aur-chart-grid: rgba(255, 255, 255, .06);
}
.chart-wrap { position: relative; height: 220px; }
.chart-wrap.sm { height: 160px; }
.chart-wrap canvas { display: block; width: 100% !important; height: 100% !important; }

/* ── Hero : niveau d'alerte + score ─────────────────────────────────────── */
.aur-hero { border-left: 3px solid var(--aur-level, var(--tblr-secondary-color)); }
.aur-hero[data-level="1"] { --aur-level: var(--tblr-primary); }
.aur-hero[data-level="2"] { --aur-level: var(--tblr-orange); }
.aur-hero[data-level="3"] { --aur-level: var(--tblr-danger); }
.aur-score {
    font-size: 3rem; font-weight: 700; line-height: 1;
    color: #fff; font-variant-numeric: tabular-nums;
}
.aur-score small { font-size: 1rem; font-weight: 500; color: var(--tblr-secondary-color); }
.aur-factor { font-size: .75rem; }

/* ── Tuiles indicateurs ─────────────────────────────────────────────────── */
.aur-stat .subheader { font-size: .625rem; }
.aur-stat .h1 { font-variant-numeric: tabular-nums; }
.aur-stat .unit { font-size: .75rem; font-weight: 500; color: var(--tblr-secondary-color); margin-left: 2px; }
.aur-stat .progress { height: 4px; }

.aur-dot {
    display: inline-block; width: 8px; height: 8px; border-radius: 50%;
    background: var(--tblr-secondary-color); flex-shrink: 0;
}
.aur-dot.ok   { background: var(--tblr-success); }
.aur-dot.warn { background: var(--tblr-warning); }
.aur-dot.bad  { background: var(--tblr-danger); }

.aur-legend { display: flex; flex-wrap: wrap; gap: .25rem 1rem; font-size: .75rem; }
.aur-legend span { display: inline-flex; align-items: center; gap: 6px; }
.aur-legend i { display: inline-block; width: 12px; height: 3px; border-radius: 2px; }
.aur-legend i.box { height: 10px; width: 10px; border-radius: 2px; }

.view { animation: aur-fadein .18s ease; }
@keyframes aur-fadein { from { opacity: 0 } to { opacity: 1 } }

/* ── Images (Soleil, OVATION) ───────────────────────────────────────────── */
.aur-img { display: block; background: #000; border-radius: var(--tblr-border-radius); overflow: hidden; aspect-ratio: 1 / 1; }
.aur-img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.aur-img:hover { outline: 1px solid rgba(var(--tblr-primary-rgb), .5); }
.aur-img-cap { font-size: .75rem; margin-top: .375rem; }

/* ── Bouton d'aide « ? » ────────────────────────────────────────────────── */
.aur-help { color: var(--tblr-secondary-color); display: inline-flex; line-height: 1; }
.aur-help:hover { color: var(--tblr-primary); }
.aur-help-corner { position: absolute; top: .5rem; right: .5rem; z-index: 1; }
.aur-stat .subheader { padding-right: 1.25rem; }
.aur-help-body { color: var(--tblr-body-color); }
.aur-help-body strong { color: #fff; }
.aur-help-body ul { padding-left: 1.1rem; }
.aur-help-body li { margin-bottom: .25rem; }
.aur-help-body .table { --tblr-table-bg: transparent; margin-bottom: 0; }