@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700;800&family=Cormorant+Garamond:ital,wght@0,500;0,600;0,700&display=swap');

:root {
    --sovereign: #52205E;
    --plum-deep: #2D0F37;
    --plum-soft: #7B4A8A;
    --lavender: #A878CC;
    --heather: #D4B8E8;
    --cornflower: #80B4E0;
    --white-lemon: #FDFDF5;
    --bloom-mist: #F0E8F8;
    --sky-wash: #D8EDF8;
    --paper: #FFFFFF;
    --ink: #1B0F22;
    --ink-soft: #4A3E54;
    --ink-mute: #847990;
    --line: #ECE0F0;
    --line-soft: #F4ECF5;
    --danger: #9B3047;
    --display: "Cormorant Garamond", "Times New Roman", serif;
    --sans: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --r-sm: 6px;
    --r-md: 12px;
    --r-lg: 18px;
    --r-xl: 28px;
    --shadow-sm: 0 5px 18px rgba(82, 32, 94, .06);
    --shadow-md: 0 14px 36px rgba(45, 15, 55, .09);
}

* { box-sizing: border-box; }
html { color-scheme: light; }
body { margin: 0; background: var(--white-lemon); color: var(--ink); font: 400 1rem/1.5 var(--sans); }
button, input, select { font: inherit; }
button, select { touch-action: manipulation; }
button:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid rgba(168, 120, 204, .28); outline-offset: 2px; }
.muted { color: var(--ink-mute); }
.eyebrow { margin: 0 0 .35rem; color: var(--sovereign); font-size: .75rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }

.login-shell { min-height: 100vh; display: grid; place-items: center; padding: 1.5rem; background: radial-gradient(circle at 80% 15%, var(--sky-wash), transparent 32%), radial-gradient(circle at 15% 85%, var(--bloom-mist), transparent 34%), var(--white-lemon); }
.login-card { width: min(440px, 100%); padding: 2.4rem; border: 1px solid var(--line); border-radius: var(--r-xl); background: rgba(255,255,255,.96); box-shadow: var(--shadow-md); }
.brand-logo { width: 180px; max-height: 64px; object-fit: contain; object-position: left center; margin-bottom: 1.7rem; }
.login-card h1 { margin: .1rem 0 .5rem; font: 600 2.4rem/1 var(--display); color: var(--plum-deep); }
.login-card label { display: block; margin: 1.5rem 0 .45rem; font-weight: 700; }
.login-card input { width: 100%; padding: .85rem 1rem; border: 1px solid var(--heather); border-radius: var(--r-md); background: var(--paper); }
.login-card input:focus { border-color: var(--sovereign); }
.login-card button { width: 100%; margin-top: 1rem; padding: .85rem 1rem; border: 0; border-radius: var(--r-md); background: var(--sovereign); color: white; font-weight: 800; cursor: pointer; }
.prototype-note { margin: 1.6rem 0 0; padding-top: 1.2rem; border-top: 1px solid var(--line); color: var(--ink-mute); font-size: .8rem; line-height: 1.5; }
.error { padding: .75rem; border-radius: var(--r-md); background: #FBECEF; color: var(--danger); font-weight: 700; }

.topbar { min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .8rem clamp(1rem, 4vw, 3.5rem); background: rgba(255,255,255,.94); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20; backdrop-filter: blur(12px); }
.topbar > div { display: flex; align-items: center; gap: 1rem; }
.top-logo { width: 138px; height: 42px; object-fit: contain; object-position: left center; }
.top-actions form { margin: 0; }
.quiet-button, .icon-button, .fullscreen-button, .timeline-toolbar button { border: 1px solid var(--line); background: var(--paper); color: var(--sovereign); cursor: pointer; }
.quiet-button { padding: .55rem .85rem; border-radius: var(--r-md); font-weight: 700; }

.dashboard-shell { width: min(1680px, 100%); margin: auto; padding: 2rem clamp(1rem, 3.2vw, 3.5rem) 3rem; }
.dashboard-intro { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; margin-bottom: 1.6rem; }
.dashboard-intro h1 { margin: 0; font: 600 clamp(2.2rem, 4vw, 3.5rem)/1 var(--display); color: var(--plum-deep); }
.dashboard-intro p:last-child { margin: .55rem 0 0; }
.fleet-summary { display: grid; grid-template-columns: auto auto; align-items: baseline; gap: .1rem .55rem; min-width: 160px; padding: .8rem 1.1rem; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--paper); box-shadow: var(--shadow-sm); }
.fleet-summary strong { color: var(--sovereign); font-size: 1.35rem; font-variant-numeric: tabular-nums; }
.fleet-summary span { color: var(--ink-mute); font-size: .78rem; font-weight: 700; }
.monitor-layout { display: grid; grid-template-columns: minmax(250px, 310px) minmax(0, 1fr); align-items: start; gap: 1.2rem; }
.device-detail { min-width: 0; }

.device-panel { position: sticky; top: 96px; max-height: calc(100vh - 118px); overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--paper); box-shadow: var(--shadow-sm); }
.panel-heading { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.05rem; border-bottom: 1px solid var(--line); background: linear-gradient(135deg, var(--bloom-mist), var(--paper)); }
.panel-heading h2 { margin: 0; font: 600 1.65rem/1 var(--display); color: var(--plum-deep); }
.icon-button, .fullscreen-button { display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border-radius: 50%; font-size: 1.2rem; }
.device-list { display: grid; gap: .6rem; max-height: calc(100vh - 220px); overflow: auto; padding: .7rem; }
.empty-state { margin: 0; padding: 1rem .5rem; color: var(--ink-mute); font-size: .88rem; }
.device-item { width: 100%; display: grid; gap: .32rem; padding: .85rem; border: 1px solid var(--line-soft); border-radius: var(--r-md); background: var(--paper); color: var(--ink); text-align: left; cursor: pointer; transition: border-color .15s, background .15s, transform .15s; }
.device-item:hover { border-color: var(--heather); background: var(--white-lemon); transform: translateY(-1px); }
.device-item.selected { border-color: var(--lavender); background: var(--bloom-mist); box-shadow: inset 3px 0 var(--sovereign); }
.device-item-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.device-item-head strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .92rem; }
.device-dot { width: 9px; height: 9px; flex: 0 0 auto; border-radius: 50%; background: var(--ink-mute); }
.device-dot.live { background: var(--cornflower); box-shadow: 0 0 0 4px rgba(128,180,224,.22); }
.device-dot.stale { background: var(--heather); }
.device-address, .device-updated { color: var(--ink-mute); font-size: .69rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.device-vitals { display: grid; grid-template-columns: repeat(3, 1fr); gap: .25rem; margin: .35rem 0; }
.device-vitals b { display: grid; font-size: 1rem; color: var(--plum-deep); font-variant-numeric: tabular-nums; }
.device-vitals small { color: var(--ink-mute); font-size: .58rem; font-weight: 600; }

.status-row { min-height: 90px; display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; padding: .9rem 1.1rem; border: 1px solid var(--line); border-radius: var(--r-lg); background: linear-gradient(110deg, var(--paper), var(--bloom-mist)); }
.status-row h2 { margin: 0; font: 600 clamp(1.65rem, 3vw, 2.35rem)/1 var(--display); color: var(--plum-deep); }
.status-row p:last-child { margin: .35rem 0 0; font-size: .8rem; }
.status-pill { flex: 0 0 auto; padding: .55rem .9rem; border-radius: 999px; font-size: .8rem; font-weight: 800; }
.status-pill.live { background: var(--sky-wash); color: var(--plum-deep); }
.status-pill.stale { background: var(--bloom-mist); color: var(--plum-soft); }
.status-pill.idle { background: var(--line-soft); color: var(--ink-mute); }

.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8rem; }
.metric-card { min-width: 0; padding: 1rem 1.1rem; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--paper); box-shadow: var(--shadow-sm); }
.metric-card > span { display: block; min-height: 2.2em; color: var(--ink-mute); font-size: .78rem; font-weight: 700; }
.metric-card strong { display: block; margin: .15rem 0; color: var(--plum-deep); font-size: clamp(1.65rem, 3vw, 2.45rem); font-variant-numeric: tabular-nums; }
.metric-card small { color: var(--ink-mute); }
.metric-card em { margin-left: .3rem; color: var(--plum-soft); font-style: normal; font-weight: 800; }

.timeline-toolbar { display: flex; align-items: end; flex-wrap: wrap; gap: .6rem; margin-top: 1rem; padding: .75rem; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--paper); }
.timeline-toolbar button, .timeline-toolbar select { min-height: 40px; padding: .48rem .7rem; border-radius: var(--r-md); }
.timeline-toolbar button:disabled { cursor: not-allowed; opacity: .4; }
.timeline-move { display: flex; gap: .35rem; }
.timeline-move button { min-width: 42px; font-size: 1.1rem; }
.timeline-toolbar label { display: grid; gap: .2rem; color: var(--ink-mute); font-size: .68rem; font-weight: 800; }
.timeline-toolbar select { border: 1px solid var(--heather); background: var(--paper); color: var(--ink); }
.visible-range { align-self: center; color: var(--ink-soft); font-size: .78rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.live-button { margin-left: auto; color: var(--sovereign) !important; font-weight: 800; }
.live-button.active { border-color: var(--cornflower); background: var(--sky-wash); }
.interaction-hint { flex-basis: 100%; color: var(--ink-mute); font-size: .68rem; }

.chart-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; margin-top: .8rem; }
.chart-card { min-width: 0; padding: 1rem 1.1rem .9rem; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--paper); box-shadow: var(--shadow-sm); }
.chart-card.wide { grid-column: 1 / -1; }
.chart-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.chart-card h2 { margin: 0; font-size: 1rem; }
.chart-card p { margin: .15rem 0 .65rem; color: var(--ink-mute); font-size: .74rem; }
.chart-wrap { position: relative; }
.chart-card canvas { display: block; width: 100%; height: 230px; cursor: crosshair; touch-action: none; }
.chart-card canvas.dragging { cursor: grabbing; }
.chart-tooltip { position: absolute; z-index: 5; display: none; min-width: 160px; padding: .55rem .65rem; border: 1px solid var(--heather); border-radius: var(--r-sm); background: rgba(45,15,55,.94); color: white; pointer-events: none; box-shadow: var(--shadow-md); font-size: .7rem; }
.chart-tooltip.visible { display: grid; gap: .15rem; }
.chart-tooltip strong { font-size: .67rem; color: var(--heather); }
.chart-legend { display: flex; gap: 1rem; margin: .15rem 0; color: var(--ink-mute); font-size: .68rem; }
.chart-legend span { display: flex; align-items: center; gap: .35rem; }
.chart-legend i { width: 14px; height: 3px; border-radius: 2px; }
.legend-rr { background: var(--plum-soft); }
.legend-temp { background: var(--lavender); }
.chart-card:fullscreen { padding: 2rem; background: var(--white-lemon); }
.chart-card:fullscreen .chart-wrap { height: calc(100vh - 130px); }
.chart-card:fullscreen canvas { height: 100%; }

.export-card { margin-top: .8rem; padding: 1.15rem; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--paper); box-shadow: var(--shadow-sm); }
.export-card h2 { margin: 0 0 .3rem; font: 600 1.55rem/1.1 var(--display); color: var(--plum-deep); }
.export-card p { margin: .25rem 0; line-height: 1.45; }
.export-card form { display: grid; grid-template-columns: 1.1fr 1.5fr 1fr auto; align-items: end; gap: .8rem; margin-top: 1rem; }
.export-card label { display: grid; gap: .35rem; color: var(--ink-mute); font-size: .75rem; font-weight: 800; }
.export-card select { width: 100%; min-height: 44px; padding: .65rem .75rem; border: 1px solid var(--heather); border-radius: var(--r-md); background: var(--paper); color: var(--ink); }
.export-card button { min-height: 44px; padding: .65rem 1.2rem; border: 0; border-radius: var(--r-md); background: var(--sovereign); color: white; font-weight: 800; cursor: pointer; }
.export-card button:disabled { cursor: not-allowed; opacity: .45; }
.export-note { color: var(--ink-mute); font-size: .74rem; }
.data-note { margin-top: .8rem; padding: 1rem 1.2rem; border: 1px solid var(--heather); border-radius: var(--r-md); background: var(--bloom-mist); color: var(--ink-soft); font-size: .8rem; line-height: 1.55; }

@media (max-width: 1120px) {
    .monitor-layout { grid-template-columns: 1fr; }
    .device-panel { position: static; max-height: none; }
    .device-list { grid-template-columns: repeat(3, minmax(220px, 1fr)); max-height: none; overflow-x: auto; }
}
@media (max-width: 920px) {
    .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .chart-grid { grid-template-columns: 1fr; }
    .chart-card.wide { grid-column: auto; }
    .export-card form { grid-template-columns: 1fr 1fr; }
    .device-list { grid-template-columns: repeat(2, minmax(220px, 1fr)); }
}
@media (max-width: 620px) {
    .topbar { align-items: flex-start; }
    .topbar .eyebrow, #clock { display: none; }
    .dashboard-intro { align-items: flex-start; }
    .fleet-summary { min-width: 120px; }
    .status-row { align-items: flex-start; }
    .metric-grid { grid-template-columns: 1fr 1fr; gap: .6rem; }
    .metric-card { padding: .85rem; }
    .metric-card strong { font-size: 1.6rem; }
    .device-list { display: flex; overflow-x: auto; }
    .device-item { flex: 0 0 240px; }
    .visible-range { order: 5; flex-basis: 100%; }
    .live-button { margin-left: 0; }
    .export-card form { grid-template-columns: 1fr; }
}