body{
    grid-template-rows:auto minmax(0,1fr);
    height:100dvh;
    overflow:hidden;
}

main.contents{
    display:block;
    min-height:0;
    min-width:0;
    padding-right:.5em;
}

.dashboard-heading{
    align-items:flex-start;
    display:flex;
    gap:1em;
    justify-content:space-between;
}

.dashboard-heading h2{
    margin-top:0;
}

.dashboard-config{
    flex:0 0 auto;
}

.dashboard-toolbar,
.dashboard-save-state,
.dashboard-editor-actions,
.dashboard-editor-section{
    align-items:center;
    display:flex;
    flex-wrap:wrap;
    gap:.75em;
}

.dashboard-toolbar{
    align-items:flex-end;
}

.dashboard-field,
.precrisis-dashboard-editor label{
    display:grid;
    gap:.35em;
    min-width:0;
}

.dashboard-field{
    flex:1 1 12em;
}

.dashboard-field select,
.precrisis-dashboard-editor input{
    box-sizing:border-box;
    font:inherit;
    max-width:100%;
    min-height:2.75em;
    min-width:0;
    padding:.5em .65em;
    width:100%;
}

.dashboard-field select,
.dashboard-toolbar > button,
.dashboard-save-state > button,
.precrisis-dashboard-editor button,
.precrisis-dashboard-editor input{
    background:var(--input-background,var(--background));
    border:1px solid var(--border-color);
    border-radius:.4em;
    color:var(--text-color);
}

.dashboard-toolbar > button,
.dashboard-save-state > button,
.precrisis-dashboard-editor button{
    cursor:pointer;
    font:inherit;
    min-height:2.75em;
    padding:.5em .8em;
}

.dashboard-toolbar > button:disabled,
.precrisis-dashboard-editor button:disabled{
    cursor:default;
    opacity:.6;
}

.dashboard-field select:focus-visible,
.dashboard-toolbar > button:focus-visible,
.dashboard-save-state > button:focus-visible,
.dashboard-section > summary:focus-visible,
.precrisis-dashboard-editor :is(input,button):focus-visible{
    outline:2px solid var(--primary-color,rgb(20,104,133));
    outline-offset:3px;
}

.dashboard-save-state{
    margin:.75em 0;
}

.dashboard-save-state p{
    margin:0;
}

.dashboard-save-state [hidden],
.precrisis-dashboard-editor [hidden]{
    display:none;
}

.dashboard-sections,
.dashboard-editor-sections{
    display:grid;
    gap:1em;
}

.dashboard-section{
    border:1px solid var(--border-color);
    border-radius:.5em;
    min-width:0;
}

.dashboard-section > summary{
    cursor:pointer;
    font-size:1.1em;
    font-weight:600;
    overflow-wrap:anywhere;
    padding:.8em 1em;
}

.dashboard-section > .chart-grid{
    margin:0;
    padding:0 1em 1em;
}

.dashboard-section:not([open]) > .chart-grid{
    display:none;
}

.dashboard-chart-unavailable,
.dashboard-section-empty{
    margin:0;
    overflow-wrap:anywhere;
    padding:.75em 0;
}

.precrisis-dashboard-editor{
    color:var(--text-color);
    min-width:0;
}

.precrisis-dashboard-editor > h2{
    margin-top:0;
}

.precrisis-dashboard-editor > label,
.dashboard-editor-actions,
.dashboard-editor-sections{
    margin-bottom:1em;
}

.dashboard-editor-section{
    border:1px solid var(--border-color);
    border-radius:.4em;
    padding:.75em;
}

.dashboard-editor-section > label,
.dashboard-editor-section > span,
.dashboard-layout-import{
    flex:1 1 100%;
}

.dashboard-editor-section > button{
    flex:1 1 auto;
}

.chart-grid{
    display:grid;
    gap:1em;
    grid-template-columns:repeat(auto-fit,minmax(min(35em,100%),1fr));
    margin-top:1em;
}

.dashboard-chart{
    min-height:18em;
    min-width:0;
}

.dashboard-chart-placeholder{
    align-items:center;
    background:var(--chart-background,var(--background));
    border:.1em solid var(--chart-grid-color,var(--border-color));
    border-radius:.5em;
    box-sizing:border-box;
    color:var(--chart-text-color,var(--text-color));
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:1em;
}

.dashboard-chart-placeholder h2,
.dashboard-chart-placeholder p{
    margin:.25em 0;
}

.dashboard-chart-placeholder p{
    opacity:.6;
}

.dashboard-chart.full-width{
    grid-column:1 / -1;
}

@media (max-width:48em){
    .dashboard-heading{
        align-items:stretch;
        flex-direction:column;
    }

    .dashboard-config{
        align-self:flex-start;
    }

    .dashboard-chart.full-width{
        grid-column:span 1;
    }
}

.dashboard-history-links,
.dashboard-filters{
    display:flex;
    gap:1em;
}
.dashboard-history-links{
    flex-wrap:wrap;
}
.dashboard-filters{
    background:var(--background);
    border:1px solid var(--border-color);
    border-radius:.6em;
    flex-direction:column;
    margin:1em 0;
    padding:1em;
}
.dashboard-filters .dashboard-field{
    flex:0 1 auto;
    min-width:8em;
}
.dashboard-filters .dashboard-query{
    flex:1 1 18em;
}
.dashboard-filters input,
.dashboard-filters select,
.dashboard-filters button{
    margin:0;
    max-width:100%;
}
.dashboard-search-row{
    margin-top:.25em;
}
.dashboard-filters p{
    margin:0;
}
.dashboard-field input{
    background:var(--input-background,var(--background));
    border:1px solid var(--border-color);
    border-radius:.4em;
    box-sizing:border-box;
    color:var(--text-color);
    font:inherit;
    min-height:2.75em;
    min-width:0;
    padding:.5em .65em;
    width:100%;
}
.dashboard-query{
    flex-basis:24em;
}
.dashboard-filters [hidden]{
    display:none;
}
.dashboard-field input:focus-visible,
.dashboard-history-links a:focus-visible,
.dashboard-observation-evidence > summary:focus-visible{
    outline:2px solid var(--primary-color,rgb(20,104,133));
    outline-offset:3px;
}
.dashboard-chart-panel{
    min-width:0;
}
.dashboard-chart-panel.full-width{
    grid-column:1 / -1;
}
.dashboard-observation-evidence{
    padding:.75em;
    overflow-wrap:anywhere;
}
.dashboard-observation-evidence > summary{
    cursor:pointer;
}
.dashboard-observation-evidence blockquote{
    white-space:pre-wrap;
}
