.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;
}



/* responsive */

@media (max-width: 900px) {
    .chart-grid {
        grid-template-columns: 1fr;
    }
}