.dashboard-panel{
    height: 100%;
    display: flex;
    align-items: stretch;
    gap: var(--padding-large);
    --dashboard-aside-width: 300px;
}
.dashboard-aside{
    width: var(--dashboard-aside-width);
}
.dashboard-main{
    flex-grow: 1;
}
.alerte-center{
    position: fixed;
    top: 10px;
    width: 50%;
    height: 100px;
    background: color-mix(in srgb,  var(--color-error) 65%, transparent);
    left: 50%;
    transform: translate(-50%);
    border-radius: var(--border-radius-large);
    box-shadow: var(--box-shadow-lvl5);
    display: none;
    z-index: 10000;
}
.alerte-center.active{
    display: flex;
    align-items: stretch;
    gap: var(--padding-large);
    padding: var(--padding-medium);
}
.alerte-center-icon{
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 50px;
    border-right: var(--border-width) solid var(--text-disabled);
}
.alerte-center-text{
    flex: 1;
}
.site-robot-list{
    display: flex;
    flex-direction: column;
    padding: var(--padding);
    gap: var(--padding);
}
.robot-aside{
    height: 100%;
    border: var(--border-width) solid var(--text-invisible);
    border-radius: var(--border-radius-large);
    display: flex;
    flex-direction: column;
}
.robot-header{
    padding: var(--padding-medium);
    font-weight: var(--font-bold);
    font-size: var(--font-size-large);
    border-bottom: var(--border-width) solid var(--text-invisible);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    width: 100%;
}
.robot-serial{
    font-size: var(--font-size-small);
    font-weight: var(--font-regular);
    color: var(--color-info-light);
}
.robot-status{
    --status-color: var(--color-main);
    padding: var(--padding-medium);
    border-radius: var(--border-radius-large);
    background: var(--status-color);
    box-shadow: 0 0 6px 2px var(--status-color);
}
.robot-status[data-status="0"]{ /*Hors ligne*/
    --status-color: var(--color-disabled);
}
.robot-status[data-status="1"]{ /*Disponnible*/
    --status-color: var(--color-success-dark);
}
.robot-status[data-status="2"]{ /*En fonctionnement*/
    --status-color: var(--color-social-spotify);
}
.robot-status[data-status="3"]{ /*En pause*/
    --status-color: var(--color-social-reddit);
}
.robot-status[data-status="-1"]{ /*En erreur*/
    --status-color: var(--color-error);
}
.robot-body{
    padding: var(--padding);
    flex: 1;
    min-height: 0;
    width: 100%;
    overflow: auto;
}
.robot-footer{
    padding: var(--padding-medium);
    border-top: var(--border-width) solid var(--text-invisible);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}
.robot-loader{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}
.robot-body-block{
    padding: var(--padding);
    background: var(--background-lvl1);
    border-radius: var(--border-radius-large);
    margin: var(--margin) 0;
}
.robot-body-block.robot-mode{
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--currentColor);
    padding: var(--padding) var(--padding-medium);
    font-size: var(--font-size-large);
    font-weight: var(--font-bold);
}
.robot-body-block.robot-mode-0{--currentColor: var(--color-info);}
.robot-body-block.robot-mode-1{--currentColor: var(--color-social-reddit);}
.robot-body-block.robot-mode-2{--currentColor: var(--color-error);}
.robot-body-block.robot-battery{
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--currentColor);
    padding: var(--padding-medium);
    font-size: var(--font-size-medium);
}
.robot-error-item{
    margin: var(--margin);
    background: var(--color-error-dark);
    padding: var(--padding);
    border-radius: var(--border-radius-medium);
}
.robot-body-block > h5{
    margin: 0 var(--margin);
    border-bottom: var(--border-width) solid var(--text-invisible);
}
.robot-body-sub-block > h6{
    margin: 0 var(--margin);
    border-bottom: var(--border-width) solid var(--text-invisible);
}
.robot-motor-table{
    width: 100%;
}
.robot-motor-table th {
    background: var(--background);
    padding: var(--padding);
}
.robot-motor-table td {
    padding: var(--padding);
    text-align: center;
    background: color-mix(in srgb, var(--currentColor) 45%, transparent);
}
.robot-mission > h5{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.robot-mission > h5 > span{
    font-size: var(--font-size-medium);
}

.robot-battery > div{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--padding);
}
.robot-body-flex{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--padding);
    margin: var(--margin) 0;
}
.robot-mission-controls my-button{
    flex: 1;
    font-size: var(--font-size-small);
}
.robot-no-action{
    padding: var(--padding-large);
    text-align: center;
}
.robot-marker{
    height: 16px;
    width: 16px;
    border-radius: var(--border-circle);
    background: var(--currentColor);
}
.robot-marker::after {
    content: "";
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 8px solid var(--currentColor);
}
.popup-edit-mission{
    height: 100%;
    display: flex;
    flex-direction: column;
}
.popup-edit-mission-title-points{
    padding: var(--padding-medium);
    background: var(--background);
    font-size: var(--font-size-medium);
    font-weight: var(--font-bold);
}
.popup-edit-mission-points{
    flex: 1;
    min-height: 0;
    overflow: auto;
    display: flex;
    flex-direction: column;
    gap: var(--padding);
    padding: var(--padding);
}
.waypoint-item{
    background: var(--background-lvl2);
    border-radius: var(--border-radius-medium);
    padding: var(--padding);
    display: flex;
    gap: var(--padding-medium);
    width: 100%;
    overflow: hidden;
    align-items: center;
    flex-shrink: 0;
}
.waypoint-item-number{
    height: 22px;
    width: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-info-dark);
    border-radius: var(--border-circle);
    font-size: var(--font-size-small);
    font-weight: var(--font-black);
}
.waypoint-item-action{
    margin: 0 0 0 auto;
    display: flex;
    align-items: center;
    gap: var(--padding-medium);
}
.mission-picker-content{
    height: 400px;
    width: 500px;
    padding: var(--padding-medium);
}
.my-popup.my-alert .my-popup-header{
    background: var(--color-error-dark);
    border-radius: var(--border-radius-large) var(--border-radius-large) 0 0;
}
.my-popup.my-alert .my-popup-header my-button{
    --currentColor: #fff;
}
.alert-intrusion{
    height: 100%;
    padding: var(--padding-medium);
    background: var(--background);
    gap: var(--padding-medium);
    display: flex;
    overflow: hidden;
    align-items: stretch;
}
.alert-visualizer{
    flex: 1;
    min-width: 0;
    gap: var(--padding-medium);
    display: flex;
    flex-direction: column;
    justify-content: stretch;
    align-items: center;
}
.alert-visualizer-content{
    flex: 1;
    min-height: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}
.alert-visualizer-controls{
    height: 40px;
    width: 100%;
    flex-shrink: 0;
    background: var(--background-lvl1);
    border-radius: var(--border-radius-large);
    display: flex;
    align-items: center;
    gap: var(--padding-medium);
    padding: 0 var(--padding-medium);
}
.alert-visualizer-content > img, .alert-visualizer-content > video, .alert-visualizer-content > my-multiplex{
    max-width: 100%;
    max-height: 100%;
}
.alert-visualizer-content > my-multiplex{
    width: 100%;
    height: 100%;
}
.alert-visualizer-content > img, .alert-visualizer-content > video, .alert-visualizer-content > my-multiplex{
    display: none;
}
.alert-visualizer-content > img.active, .alert-visualizer-content > video.active, .alert-visualizer-content > my-multiplex.active{
    display: block;
}
.alert-info{
    width: 300px;
    flex-shrink: 0;
    background: var(--background-lvl1);
    border-radius: var(--border-radius-large);
    padding: var(--padding-medium);
}
.alert-info h4{
    text-align: center;
    border-bottom: 1px solid var(--text-invisible);
}
.alert-btn-dl{
    margin: 0 0 0 auto;
}
.alert-date{
    padding: var(--padding-medium);
    text-align: center;
    color: var(--color-error-light);
    font-size: var(--font-size-large);
    font-weight: var(--font-bold);
}
.alert-sep{
    margin: var(--margin-medium) 0;
    height: 1px;
    background: var(--text-invisible);
}
.alert-acknowledgment-box{
    text-align: center;
    font-size: var(--font-size-medium);
}
.alert-acknowledged{
    background: var(--color-error-dark);
    font-size: var(--font-size-large);
    font-weight: var(--font-bold);
    padding: var(--padding-medium);
    border-radius: var(--border-radius-large);
}
.alert-resolved{
    background: var(--color-success-dark);
    padding: var(--padding-medium);
    border-radius: var(--border-radius-large);
}
.alert-actions{
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    padding: var(--padding-medium) 0;
}
.alert-resolution-box{
    text-align: center;
}
.alert-resolution-note{
    font-size: var(--font-size-small);
    font-weight: var(--font-regular);
    text-align: left;
    padding: var(--padding);
    border: var(--border-width-medium) solid var(--text-invisible);
    border-radius: var(--border-radius-medium);
}
.intrusion-detail{
    text-align: justify;
    text-align-last: center;
    font-size: var(--font-size-small);
}
.alert-temperature{
    padding: var(--padding-medium);
    text-align: center;
}
.sounds-list{
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: var(--padding-medium);
    gap: var(--padding-medium);
    overflow: auto;
}
.sounds-list > my-button{
    width: 100%;
    justify-content: flex-start;
}
.alert-box-list{
    height: 39px;
    overflow: auto;
}
.alert-box-item{
    display: flex;
    align-items: center;
    gap: var(--padding);
    height: 100%;
}

.report-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--padding-large);
    background: var(--background-lvl2);
    border-radius: var(--border-radius-medium);
    box-shadow: var(--box-shadow-lvl2);
}

.report-title {
    font-size: var(--font-size-large);
    font-weight: var(--font-bold);
    color: var(--text);
}

.report-sub {
    font-size: var(--font-size-small);
    color: var(--text-medium);
    margin-top: var(--margin);
}

.report-header-right {
    display: flex;
    align-items: center;
    gap: var(--padding-medium);
}

.report-badge {
    padding: var(--padding-medium) var(--padding-large);
    background: var(--background-lvl3);
    border-radius: var(--border-radius);
    color: var(--text);
    font-size: var(--font-size-small);
    box-shadow: var(--box-shadow-lvl1);
}
.report-badge.success {
    background: var(--color-success-dark);
}

.dashboard {
    display: flex;
    flex-direction: column;
    gap: var(--margin-large);
}

/* KPI */

.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--margin-medium);
}

.kpi-card {
    background: var(--background-lvl2);
    border-radius: var(--border-radius-medium);
    padding: var(--padding-large);
    box-shadow: var(--box-shadow-lvl2);
    position: relative;
    overflow: hidden;
}

.kpi-card::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 3px;
    background: var(--color-main);
    opacity: 0.6;
}

/* variantes */

.kpi-card.success::after { background: var(--color-success); }
.kpi-card.warning::after { background: var(--color-third); }
.kpi-card.error::after   { background: var(--color-error); }

.kpi-value {
    font-size: var(--font-size-large);
    font-weight: var(--font-bold);
    color: var(--text);
}

.kpi-label {
    font-size: var(--font-size-small);
    color: var(--text-medium);
    margin-top: var(--margin);
}

/* Charts */

.chart-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--margin-large);
}

.chart-card {
    background: var(--background-lvl2);
    border-radius: var(--border-radius-medium);
    padding: var(--padding-large);
    box-shadow: var(--box-shadow-lvl2);
    height: 320px;
}

.chart-card canvas {
    max-height: 260px;
}


.chart-card h5 {
    font-size: var(--font-size-medium);
    margin-bottom: var(--margin-medium);
    color: var(--text);
}

.kpi-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--box-shadow-lvl3);
    transition: 0.2s;
}

.robot-advanced-settings{
    height: 100%;
    overflow: auto;
    padding: var(--padding-large);
}
.robot-advanced-settings my-button {
    width: 100%;
    margin: var(--margin-medium) 0;
}

.robot-config-actions{
    margin-top: var(--margin-large);
}

.robot-config-popup{
    height: 100%;
    overflow: auto;
    padding: var(--padding);
}

.robot-config-category{
    background: var(--background-lvl1);
    border-radius: var(--border-radius-medium);
    margin-bottom: var(--margin);
    overflow: hidden;
}

.robot-config-category summary{
    cursor: pointer;
    font-weight: 700;
    padding: var(--padding);
    background: var(--background-lvl2);
}

.robot-config-list{
    display: grid;
    gap: var(--border-width);
}

.robot-config-row{
    display: grid;
    grid-template-columns: minmax(180px, 260px) 1fr;
    gap: var(--padding);
    padding: var(--padding);
    border-bottom: var(--border-width) solid var(--text-invisible);
}

.robot-config-row-overridden{
    background: rgba(214, 142, 38, 0.12);
}

.robot-config-key{
    font-weight: 700;
}

.robot-config-badge{
    display: inline-block;
    margin-top: var(--margin-small);
    padding: 2px 6px;
    border-radius: var(--border-radius-small);
    background: #d68e26;
    color: var(--background);
    font-size: var(--font-size-small);
    font-weight: 600;
}

.robot-config-value{
    font-family: monospace;
    word-break: break-word;
}

.robot-config-input{
    width: 100%;
    min-height: 38px;
    padding: 8px 10px;
    border: var(--border-width) solid var(--text-invisible);
    border-radius: var(--border-radius-small, 6px);
    background: var(--background-lvl2);
    color: var(--text);
    font-family: monospace;
    box-sizing: border-box;
}

.robot-config-info,
.robot-config-version{
    grid-column: 2;
    color: var(--text-soft);
    font-size: var(--font-size-small);
}

.robot-config-empty{
    padding: var(--padding-large);
}

.hsep{
    width: calc(100% - calc(var(--margin) * 2));
    margin: var(--margin);
    background: var(--text-invisible);
    height: var(--border-width);
}

.planner-container{
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}
.planner-body{
    flex: 1;
    height: calc(100% - 60px);
}
.planner-actionbar{
    height: 40px;
    flex-shrink: 0;
    background: var(--background-lvl1);
    margin: var(--margin) 0 0 0;
    padding: 0 var(--padding);
    border-radius: var(--border-radius-medium);
    display: flex;
    align-items: center;
    gap: var(--padding);
    justify-content: flex-end;
}



.settings-tabs{display:flex;gap:var(--margin-small);margin-bottom:var(--margin);border-bottom:var(--border-width) solid var(--text-invisible)}
.settings-tab{display:inline-flex;align-items:center;gap:8px;padding:12px 16px;color:var(--text-soft);text-decoration:none;border-bottom:3px solid transparent}
.settings-tab.active{color:var(--text);border-bottom-color:var(--color-primary,#4d8cff)}
.section-parametres .section-body{display:flex;flex-direction:column;min-height:0}
.settings-content{display:grid;gap:var(--padding);flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding-bottom:var(--padding)}
.settings-fields,.settings-side-actions{display:grid;gap:var(--padding)}
.settings-toolbar,.settings-role-header,.settings-actions{display:flex;align-items:center;justify-content:space-between;gap:var(--padding)}
.settings-toolbar{margin-bottom:var(--margin)}
.settings-toolbar h2,.settings-card h2,.settings-card h3{margin:0 0 6px}
.settings-toolbar p,.settings-card p,.settings-fieldset p{margin:0;color:var(--text-soft)}
.settings-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:8px 14px;border:0;border-radius:var(--border-radius-small,6px);cursor:pointer;font:inherit;font-weight:600;text-decoration:none}
.settings-button:disabled{cursor:wait;opacity:.6}
.settings-button-primary{background:var(--color-primary,#4d8cff);color:#fff}
.settings-button-secondary{background:var(--background-lvl2);color:var(--text)}
.settings-button-danger{background:var(--color-error,#c94141);color:#fff}
.settings-card{padding:var(--padding-large,24px);background:var(--background-lvl1);border-radius:var(--border-radius-medium)}
.settings-form-grid{display:grid;grid-template-columns:minmax(0,2fr) minmax(260px,1fr);gap:var(--margin)}
.settings-fields{grid-template-columns:repeat(2,minmax(0,1fr));margin:var(--margin) 0}
.settings-field{display:grid;gap:6px;font-weight:600}
.settings-field input,.settings-field select{width:100%;min-height:42px;padding:8px 10px;box-sizing:border-box;border:var(--border-width) solid var(--text-invisible);border-radius:var(--border-radius-small,6px);background:var(--background-lvl2);color:var(--text);font:inherit}
.settings-fieldset{margin:0 0 var(--margin);padding:var(--padding);border:var(--border-width) solid var(--text-invisible);border-radius:var(--border-radius-small,6px)}
.settings-fieldset legend{font-weight:700}
.settings-check-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:var(--margin-small)}
.settings-check{display:flex;align-items:center;gap:8px;padding:10px;border-radius:var(--border-radius-small,6px);background:var(--background-lvl2)}
.settings-table-wrap{width:100%;overflow-x:auto}
.settings-table{width:100%;border-collapse:collapse;background:var(--background-lvl1);border-radius:var(--border-radius-medium);overflow:hidden}
.settings-table th,.settings-table td{padding:12px;border-bottom:var(--border-width) solid var(--text-invisible);text-align:left}
.settings-rights-table th:not(:first-child),.settings-rights-table td:not(:first-child){text-align:center}
.settings-empty{padding:var(--padding-large,24px);text-align:center;color:var(--text-soft)}
.settings-danger-zone{border:var(--border-width) solid var(--color-error,#c94141)}
.settings-actions-end{justify-content:flex-end;margin-top:var(--margin)}
.settings-current-user{display:inline-block;margin-left:8px;padding:2px 7px;border-radius:999px;background:var(--color-primary,#4d8cff);color:#fff;font-size:var(--font-size-small);font-weight:600;vertical-align:middle}
.settings-row-note{color:var(--text-soft);font-size:var(--font-size-small)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* responsive */

@media (max-width: 900px) {
    .chart-grid,
    .settings-form-grid,
    .settings-fields,
    .settings-check-list {
        grid-template-columns: 1fr;
    }
    .settings-toolbar,
    .settings-role-header,
    .settings-actions {
        align-items: stretch;
        flex-direction: column;
    }
}