:root{font-family:Inter,system-ui,Arial,sans-serif;color:#e8f1ff;background:#070d19}*{box-sizing:border-box}body{margin:0;display:flex;min-height:100vh}.sidebar{width:240px;flex-shrink:0;background:#0c1628;border-right:1px solid #1e3351;padding:27px 16px;display:flex;flex-direction:column}.brand{font-weight:800;letter-spacing:1px;color:#65b7ff;font-size:17px}.brand small{display:block;color:#91a4c2;margin-top:7px;font-size:11px}.sidebar nav{margin-top:44px}.sidebar a{display:block;text-decoration:none;color:#e3f0ff;border-radius:10px;padding:13px;background:#16345b;border:1px solid #26568c}.sidefoot{margin-top:auto;color:#6783a9;font-size:11px}main{flex:1;min-width:0;padding:36px;max-width:1600px}header,.panelhead{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}h1{margin:8px 0;font-size:30px}p{color:#92a9c8}.eyebrow{color:#51a9ff;font-size:11px;font-weight:800;letter-spacing:2px}.status{border:1px solid #365071;padding:9px 14px;border-radius:30px;color:#b6c7de}.status.ok{color:#5fe0a3;border-color:#23785c}.status.bad{color:#ff9b9b;border-color:#823f48}.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin:28px 0}.stats article,.panel{background:#101c30;border:1px solid #223954;border-radius:14px;padding:22px}.stats article span{display:block;color:#92a9c8;font-size:13px}.stats strong{display:block;font-size:34px;margin-top:12px;color:#eaf4ff}.stats strong.small{font-size:18px;overflow-wrap:anywhere}.panelhead h2{margin:0}.panelhead p{margin:6px 0 0;font-size:13px}input{background:#0a1425;border:1px solid #2b4669;border-radius:9px;color:white;padding:12px;width:min(330px,100%)}.scroll{overflow-x:auto;margin-top:22px}table{width:100%;border-collapse:collapse;text-align:left}th{font-size:12px;color:#8fa8c8;letter-spacing:.6px}td,th{padding:14px 12px;border-bottom:1px solid #20334b}td{font-size:14px}td:first-child{color:#6eb8ff;font-weight:600}.pill{display:inline-block;border-radius:20px;background:#123e34;color:#72e3b1;padding:5px 10px;font-size:12px}#error{color:#ff9e9e}footer{font-size:12px;color:#647f9e;margin-top:25px}@media(max-width:1050px){.stats{grid-template-columns:repeat(2,1fr)}}@media(max-width:680px){body{display:block}.sidebar{width:auto;padding:16px}.sidebar nav{margin-top:15px}.sidefoot{display:none}main{padding:18px}.stats{gap:9px}.stats article{padding:14px}.stats strong{font-size:25px}h1{font-size:24px}
/*  PROMETHEUS 4.0 - Identification des appareils */

.device-name-button {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 6px 0;
    border: none;
    background: transparent;
    color: #38bdf8;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    text-align: left;
}

.device-name-button:hover {
    color: #7dd3fc;
}

.device-name-button:focus-visible,
.device-modal-close:focus-visible {
    outline: 2px solid #38bdf8;
    outline-offset: 3px;
}

.device-type-icon {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: #152b46;
    font-size: 17px;
}

.device-modal[hidden] {
    display: none;
}

.device-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.device-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .75);
    backdrop-filter: blur(5px);
}

.device-modal-content {
    position: relative;
    z-index: 1;
    width: min(680px, 100%);
    max-height: 90vh;
    overflow-y: auto;
    padding: 30px;
    border: 1px solid #24466a;
    border-radius: 18px;
    background: #0e1b2e;
    color: #e5f0ff;
    box-shadow: 0 25px 80px rgba(0, 0, 0, .6);
}

.device-modal-close {
    position: absolute;
    top: 14px;
    right: 18px;
    background: transparent;
    border: none;
    color: #a9bfd8;
    font-size: 30px;
    cursor: pointer;
}

.device-detail-header {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 28px;
    padding-right: 30px;
}

.device-detail-icon {
    display: grid;
    place-items: center;
    width: 65px;
    height: 65px;
    border-radius: 15px;
    background: #193858;
    font-size: 32px;
}

.device-detail-header h2 {
    margin: 0 0 8px;
    color: #fff;
    font-size: 24px;
}

.device-detail-header p {
    margin: 0;
    color: #8aa7c7;
}

.device-details-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.device-detail-item {
    display: flex;
    flex-direction: column;
    gap: 9px;
    min-width: 0;
    padding: 16px;
    border: 1px solid #233b59;
    border-radius: 10px;
    background: #13243b;
}

.device-detail-item span {
    color: #8ca9c9;
    font-size: 12px;
}

.device-detail-item strong {
    color: #f0f7ff;
    font-size: 14px;
    overflow-wrap: anywhere;
}

.device-detail-note {
    margin-top: 22px;
    color: #8ca9c9;
    font-size: 12px;
    line-height: 1.6;
}

body.modal-open {
    overflow: hidden;
}

@media (max-width: 600px) {
    .device-details-grid {
        grid-template-columns: 1fr;
    }

    .device-modal-content {
        padding: 22px;
    }
}
}