/* Geolithe Innovation — RFID Dashboard theme
   Palette : vert #93c01f  |  sombre #384951  |  fond #f8f9fa
*/

/* ── Global ───────────────────────────────────────────────── */
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background-color: #f8f9fa;
    margin: 0;
    color: #384951;
}

/* ── Page ─────────────────────────────────────────────────── */
.app-page {
    min-height: 100vh;
    background-color: #f8f9fa;
}

.app-content {
    width: 95%;
    margin: 24px auto 0;
}

/* ── Header ───────────────────────────────────────────────── */
.app-header {
    background-color: #384951;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.app-header-inner {
    width: 95%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 64px;
}

.app-header-logo-group {
    display: flex;
    align-items: center;
    gap: 14px;
}

.app-header-logo {
    height: 46px;
}

.app-header-sep {
    width: 1px;
    height: 30px;
    background-color: rgba(255, 255, 255, 0.2);
}

.app-header-title {
    color: white;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0.3px;
}

.app-header-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

/* ── Boutons du header ────────────────────────────────────── */
.btn-header {
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    font-family: inherit;
    transition: background-color 0.15s;
}

.btn-header-outline {
    padding: 7px 16px;
    background-color: transparent;
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: white;
}

.btn-header-outline:hover {
    background-color: rgba(255, 255, 255, 0.12);
}

.btn-header-icon {
    padding: 7px 11px;
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: white;
    font-size: 18px;
    line-height: 1;
}

.btn-header-icon:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

/* ── Boutons d'action (vert primaire) ─────────────────────── */
.btn-primary {
    background-color: #93c01f !important;
    border: none !important;
}

.btn-primary:hover {
    background-color: #7fa319 !important;
}

/* ── Leaflet — tooltips permanents ───────────────────────── */
.leaflet-tooltip {
    background-color: white;
    border: 1.5px solid #93c01f;
    border-radius: 4px;
    color: #384951;
    font-size: 11px;
    font-weight: 600;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    padding: 2px 7px;
    white-space: nowrap;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
}

/* Masquer la flèche — plus lisible pour les étiquettes permanentes */
.leaflet-tooltip::before {
    display: none !important;
}

/* ── Login ────────────────────────────────────────────────── */
.login-page {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: #f0f2f5;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.login-card {
    width: 380px;
}

.login-logo-wrap {
    text-align: center;
    margin-bottom: 20px;
}

.login-logo {
    width: 200px;
}

.login-subtitle {
    text-align: center;
    color: #868e96;
    font-size: 14px;
    margin-bottom: 24px;
    margin-top: 0;
}

.login-error {
    color: #e03131;
    margin-top: 14px;
    text-align: center;
    font-size: 14px;
}

/* ── Carte / Map ──────────────────────────────────────────── */
.map-canvas {
    width: 100%;
    height: 700px;
}

.map-placeholder {
    color: #6c757d;
    text-align: center;
    padding: 60px;
}

.map-placeholder--error {
    color: #d94040;
}

/* ── Séparateur de section ────────────────────────────────── */
.section-sep {
    border-color: #dee2e6;
    margin: 20px 0;
}

/* ── Controls (dropdowns dcc) ─────────────────────────────── */
.control-label {
    text-align: center;
}

.dropdown-220 { width: 220px; }
.dropdown-160 { width: 160px; }

/* ── Admin — tables et messages ───────────────────────────── */
.admin-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.admin-table td {
    font-size: 13px;
}

.admin-hint {
    color: gray;
    font-size: 13px;
}

.admin-msg {
    font-size: 13px;
}

.admin-msg--top {
    margin-top: 10px;
    font-size: 13px;
}

/* ── Dash tabs (dashboard principal) ──────────────────────── */
.tab {
    color: #6c757d !important;
    font-weight: 500 !important;
    border-top: 3px solid transparent !important;
    border-left: none !important;
    border-right: none !important;
    padding: 12px 22px !important;
    background-color: transparent !important;
    transition: color 0.15s;
}

.tab:hover {
    color: #384951 !important;
    background-color: rgba(147, 192, 31, 0.06) !important;
}

.tab--selected {
    color: #384951 !important;
    font-weight: 600 !important;
    border-top: 3px solid #93c01f !important;
    background-color: white !important;
}

/* ── Onglet Santé — palette ────────────────────────────────
   Variables locales (pas de :root pour éviter les conflits)
   c-h = healthy ≥80%   c-w = warning 40–79%
   c-c = critical <40%  c-o = offline / unknown
*/
.c-h { color: #2ab86b; }
.c-w { color: #e8940f; }
.c-c { color: #d94040; }
.c-o { color: #9ba5bc; }

/* ── Layout temps réel ────────────────────────────────────── */
.health-live-wrap {
    padding: 16px 0 0;
}

.health-window-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.health-radio label {
    font-size: 13px;
    margin-right: 12px;
    cursor: pointer;
}

/* ── Résumé global ────────────────────────────────────────── */
.health-summary {
    background: #fff;
    border: 1px solid #dce2ee;
    border-radius: 10px;
    padding: 16px 22px;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
}

.health-sdiv {
    width: 1px;
    height: 36px;
    background: #dce2ee;
    margin: 0 22px;
    flex-shrink: 0;
}

.health-stat { flex-shrink: 0; }

.health-stat-n {
    font-size: 28px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.health-stat-lbl {
    font-size: 11px;
    color: #6b7590;
    margin-top: 2px;
    white-space: nowrap;
}

.health-global-wrap { flex: 1; min-width: 0; }

.health-global-top {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 7px;
}

.health-global-lbl {
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: #6b7590;
}

.health-global-pct {
    font-size: 15px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: #1a1e2e;
}

.health-global-bar {
    height: 8px;
    border-radius: 4px;
    background: #cdd4e4;
    overflow: hidden;
    display: flex;
}

.health-gb {
    height: 100%;
    transition: width .5s cubic-bezier(.4,0,.2,1);
}
.health-gb.c-h { background: #2ab86b; }
.health-gb.c-w { background: #e8940f; }
.health-gb.c-c { background: #d94040; }

/* ── Tableau par tag ──────────────────────────────────────── */
.health-tags-card {
    background: #fff;
    border: 1px solid #dce2ee;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 12px;
}

.health-trow {
    display: grid;
    grid-template-columns: 152px 1fr 106px 92px;
    padding: 10px 18px;
    gap: 0 16px;
    align-items: center;
}

.health-thead {
    background: #f2f4f8;
    border-bottom: 1px solid #dce2ee;
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: #6b7590;
}

.health-tbrow {
    border-bottom: 1px solid #dce2ee;
    transition: background .12s;
}

.health-tbrow:last-child { border-bottom: none; }
.health-tbrow:hover { background: #f6f8fc; }

.health-name-cell {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

/* Point de statut animé */
.health-sdot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
    position: relative;
}
.health-sdot.c-h { background: #2ab86b; }
.health-sdot.c-h::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    background: #2ab86b;
    opacity: 0;
    animation: health-ring 2.6s ease-out infinite;
}
@keyframes health-ring {
    0%   { transform: scale(.7); opacity: .45; }
    100% { transform: scale(2);  opacity: 0;   }
}
.health-sdot.c-w { background: #e8940f; }
.health-sdot.c-c { background: #d94040; }
.health-sdot.c-o { background: #9ba5bc; }

.health-tag-nm {
    font-size: 12.5px;
    font-weight: 500;
    font-family: 'SF Mono','Consolas',monospace;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.health-ref-badge {
    font-size: 9px;
    background: #eff2ff;
    color: #4a6cf7;
    border-radius: 3px;
    padding: 1px 5px;
    font-family: system-ui;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .4px;
    flex-shrink: 0;
}

.health-nodate-badge {
    font-size: 9px;
    background: #fff8e1;
    color: #b45309;
    border-radius: 3px;
    padding: 1px 5px;
    font-family: system-ui;
    font-weight: 600;
    flex-shrink: 0;
}

.health-tbrow--nodate {
    opacity: 0.65;
}

/* Historique dots */
.health-hist {
    display: flex;
    gap: 3px;
    align-items: center;
}

.health-hd {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}
.health-hd--ok   { background: #2ab86b; }
.health-hd--miss { background: #cdd4e4; }

/* Barre de taux */
.health-rate-cell {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.health-rpct {
    font-size: 13px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.health-rbar {
    height: 3px;
    border-radius: 2px;
    background: #cdd4e4;
    overflow: hidden;
}

.health-rbfill {
    height: 100%;
    border-radius: 2px;
}
.health-rbfill.c-h { background: #2ab86b; }
.health-rbfill.c-w { background: #e8940f; }
.health-rbfill.c-c { background: #d94040; }
.health-rbfill.c-o { background: #9ba5bc; }

.health-last {
    font-size: 12px;
    color: #6b7590;
    font-variant-numeric: tabular-nums;
}
.health-last.c-c { color: #d94040; }
.health-last.c-o { color: #9ba5bc; }

/* Note de bas de tableau */
.health-footnote {
    display: flex;
    gap: 18px;
    padding: 0 2px;
    margin-top: 8px;
}

.health-fn {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    color: #6b7590;
}

.health-fn-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* ── Historique mensuel ───────────────────────────────────── */
.health-hist-wrap { padding: 16px 0 0; }

.hist-layout {
    display: grid;
    grid-template-columns: 1fr 220px;
    gap: 14px;
    margin-bottom: 14px;
}

/* Bar chart */
.bar-chart-card {
    background: #fff;
    border: 1px solid #dce2ee;
    border-radius: 10px;
    padding: 18px 20px 14px;
}

.card-title {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: #6b7590;
    margin-bottom: 14px;
}

.health-barchart-wrap {
    display: flex;
    height: 110px;
    align-items: flex-end;
    gap: 5px;
    position: relative;
    padding-left: 0;
}

.health-barchart-ygrid {
    position: absolute;
    left: 0; right: 0; top: 0; bottom: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    pointer-events: none;
}

.health-ygrid-line {
    width: 100%;
    height: 1px;
    background: #e8ecf5;
}

.health-bar-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    cursor: pointer;
    z-index: 1;
}

.health-bar-body {
    width: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.health-bar-fill {
    width: 100%;
    border-radius: 3px 3px 0 0;
    min-height: 2px;
    transition: opacity .15s;
}

.health-bar-col:hover .health-bar-fill { opacity: .78; }

.health-bar-col--selected .health-bar-fill {
    outline: 2px solid #1a1e2e;
    outline-offset: 1px;
}

.health-bar-xlabel {
    font-size: 9.5px;
    color: #6b7590;
    margin-top: 4px;
    text-align: center;
    white-space: pre;
    line-height: 1.3;
}

.health-bar-col--selected .health-bar-xlabel {
    color: #1a1e2e;
    font-weight: 600;
}

/* Résumé mensuel */
.month-summary-card {
    background: #fff;
    border: 1px solid #dce2ee;
    border-radius: 10px;
    padding: 18px 20px;
}

.month-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.month-nav-btn {
    background: #f2f4f8;
    border: 1px solid #dce2ee;
    border-radius: 6px;
    width: 28px;
    height: 28px;
    cursor: pointer;
    font-size: 15px;
    color: #6b7590;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .15s;
    line-height: 1;
}

.month-nav-btn:hover { border-color: #93c01f; color: #93c01f; }

.month-nav-label {
    font-size: 14px;
    font-weight: 700;
    color: #1a1e2e;
}

.msumm-stat { margin-bottom: 14px; }

.msumm-n {
    font-size: 26px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.msumm-lbl { font-size: 11px; color: #6b7590; margin-top: 2px; }

.msumm-divider { height: 1px; background: #dce2ee; margin: 14px 0; }

.msumm-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.msumm-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.msumm-key { font-size: 12px; color: #6b7590; flex: 1; }

.msumm-val {
    font-size: 12px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* Heatmap */
.heatmap-card {
    background: #fff;
    border: 1px solid #dce2ee;
    border-radius: 10px;
    padding: 18px 20px;
    overflow: hidden;
}

.heatmap-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
}

.heatmap-title {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: #6b7590;
}

.hm-legend {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 10.5px;
    color: #6b7590;
}

.hm-legend-bar {
    width: 80px;
    height: 8px;
    border-radius: 4px;
    background: linear-gradient(to right, #d94040, #e8940f, #2ab86b);
}

.heatmap-scroll { overflow-x: auto; }

.hm-grid {
    display: inline-flex;
    flex-direction: column;
    gap: 3px;
    min-width: 100%;
}

.hm-header-row {
    display: flex;
    gap: 2px;
    margin-bottom: 4px;
}

.hm-tag-spacer {
    width: 110px;
    flex-shrink: 0;
}

.hm-day-header {
    width: 19px;
    text-align: center;
    font-size: 9px;
    color: #6b7590;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

.hm-day-avg {
    width: 34px !important;
    color: #1a1e2e;
    font-weight: 600;
}

.hm-row {
    display: flex;
    gap: 2px;
    align-items: center;
}

.hm-tag-label {
    width: 110px;
    flex-shrink: 0;
    font-size: 11.5px;
    font-weight: 500;
    font-family: 'SF Mono','Consolas',monospace;
    color: #1a1e2e;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-right: 6px;
}

.hm-cell {
    width: 19px;
    height: 19px;
    border-radius: 3px;
    flex-shrink: 0;
    cursor: default;
    transition: transform .1s, box-shadow .1s;
}

.hm-cell:hover {
    transform: scale(1.25);
    box-shadow: 0 2px 6px rgba(0,0,0,.18);
    z-index: 2;
    position: relative;
}

.hm-cell--na {
    width: 19px;
    height: 19px;
    border-radius: 3px;
    flex-shrink: 0;
    background: #edf1f7;
    border: 1px dashed #dce2ee;
}

.hm-avg-sep { width: 8px; flex-shrink: 0; }

.hm-avg-label {
    width: 34px;
    flex-shrink: 0;
    font-size: 10.5px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-align: right;
}