/* LINAC3 VISTAR Page 1 Dashboard Styles */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    height: 100%;
}

body {
    font-family: Arial, sans-serif;
    background-color: #000000;
    color: #ffffff;
    font-size: 26px;
    height: 100%;
    display: grid;
    grid-template-rows: auto 1fr;
}

/* ============================================================== */
/* Upper part: LINAC3 lisis fixed display                         */
/* ============================================================== */
.lisis {
    display: grid;
    grid-template-rows: auto auto auto;
}

/* Title bar */
.header-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #ffffff;
    color: #000000;
    padding: 0.2em 0.5em;
    font-weight: bold;
    font-size: 1.0em;
}

/* Status / user / destination row */
.status-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.25em 0.5em;
    font-family: "Courier New", monospace;
    background: #000000;
}
.status::part(value) {
    font-weight: bold;
    padding: 0 0.3em;
    color: #00ff00;
}
.status[data-value="false"]::part(value) {
    color: #ffffff;
    background: #cc0000;
}
.status-row .dest {
    color: #00ff00;
    font-weight: bold;
}
.status-row .dest-label {
    margin-left: 0.6em;
}

/* Main row: bar plot (left) + inhibit/comment column (right) */
.lisis-main {
    display: grid;
    grid-template-columns: 1fr minmax(15em, 0.42fr);
    gap: 0.5em;
    height: 42vh;
    min-height: 340px;
    padding: 0.3em 0.5em;
}

/* Bar plot */
.bars-area {
    position: relative;
    background: #000000;
    overflow: hidden;
    min-width: 0;
}
.bars-area xy-chart {
    display: block;
    width: 100%;
    height: 100%;
    background: #000000;
    --chart-background: #000000;
}
.bars-area xy-chart::part(chart) {
    color: #ffffff;
    background: #000000;
}
.bars-area xy-chart x-axis {
    --show: false;
    --grid: false;
    --stroke: #aa0000;
}
.bars-area xy-chart y-axis {
    --color: #00ff00;
    --grid: true;
    --grid-stroke: #aa0000;
    --stroke: #00ff00;
    --ticks-width: 1;
    --ticks-stroke: transparent;
    --font: bold 20px Arial,system-ui,sans-serif;
    --label-font: bold 20px Arial,system-ui,sans-serif;
    --space: 50;
}

.bars-area xy-chart decoration {
    --label-background: rgba(0,0,0,0.8);
    --label-size: 24;
    --label-baseline: top;
    --label-line-spacing: 1;
}
/* Right column: permit boxes + comments */
.side-column {
    display: grid;
    grid-template-rows: auto 1fr;
    gap: 0.6em;
    min-width: 0;
}
.permits {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.permit-box {
    display: block;
    width: 100%;
    font-size: 0.8em;
}
.permit-box::part(value) {
    display: block;
    padding: 0.25em 0.5em;
    font-weight: bold;
    text-align: center;
    border: 2px solid #000000;
    background: #555555;
    color: #ffffff;
}
.permit-box[data-value="true"]::part(value) {
    background: #00c000;
    color: #000000;
}
.permit-box[data-value="false"]::part(value) {
    background: #cc0000;
    color: #ffffff;
}

.comments-section {
    min-width: 0;
    overflow: hidden;
}
.comments-title {
    color: #ffff00;
    font-weight: bold;
}
.comments-text {
    color: #ffffff;
}
.comments-text text-indicator {
    display: block;
}
.comments-text text-indicator::part(value) {
    white-space: pre-wrap;
}
/* ============================================================== */
/* Lower part: survey long-time trends (two columns, light charts) */
/* ============================================================== */
.trends {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    padding: 6px;
    min-height: 360px;
    background: #000000;
    overflow: hidden;
}

.trends time-chart {
   overflow: hidden;
   display: block;
   width: 100%;
   height: 100%;
}

time-chart {
    min-height: 330px;
    font-weight: bold;
}

time-chart::part(header) {
    background: #666;
    color: #fff;
    font-size: 0.78em;
    padding: 2px 8px;
    border: none;
}
time-chart::part(chart) {
    color: #000;
    font-size: 0.78em;
}
time-chart x-axis,
time-chart y-axis {
   --font: bold 20px Arial,system-ui,sans-serif;
   --label-font: var(--font);
}
time-chart x-axis {
    --space: 90;
    --size: 65;
}
time-chart y-axis {
   --space: 30;
   --label-size: 35;
}