/* Layout + reset */
*, *::before, *::after { box-sizing: border-box; }
:root{
  color-scheme: dark;
  --bg:#0b0c10;
  --fg:#e8eaed;
  --muted:#8a8f98;
  --accent:#3ea6ff;
  --ok:#3ddc97;
  --warn:#ffb454;
  --err:#ff6b6b;
  --surface:#101218;
  --surface-alt:#0f1218;
  --surface-contrast:#191b22;
  --border:#202532;
  --border-strong:#242833;
  --border-soft:#363c49;
  --input-bg:#0f1218;
  --input-border:#2a2f3a;
  --label:#aab0ba;
  --status-bg:#0e1015;
  --status-border:#222636;
  --table-head-bg:#10131a;
  --table-head-border:#252b38;
  --table-body-border:#232835;
  --preview-border:#202532;
  --tooltip-bg:rgba(16,20,28,0.92);
  --tooltip-fg:#e8eaed;
  --tooltip-shadow:0 12px 20px rgba(0,0,0,0.35);
  --card-gradient-top:#191b22;
  --card-gradient-bottom:#101218;
  --card-border:#242833;
  --card-shadow:0 10px 30px rgba(0,0,0,.35);
  --uploader-border:#363c49;
  --chart-card-bg:#10141c;
  --chart-card-border:#202532;
  --chart-header:#e8eaed;
  --chart-legend:#c6cad2;
  --chart-legend-heading:#8a8f98;
  --chart-canvas-bg:#10141c;
  --chart-grid:rgba(255,255,255,0.08);
  --chart-axis:rgba(228,233,244,0.24);
  --chart-tick:#a7b4d8;
  --chart-label:#d8e1ff;
  --chart-cursor-line:rgba(255,255,255,0.35);
  --chart-cursor-dot:#f1f3f5;
  --chart-cursor-border:rgba(15,18,24,0.8);
  --chart-height-sm:180px;
  --chart-height-md:220px;
  --chart-height-lg:260px;
  --chart-height-profile:240px;
  --chart-card-padding-y:12px;
  --chart-card-padding-x:14px;
}
:root[data-theme="light"]{
  color-scheme: light;
  --bg:#f6f8fb;
  --fg:#1f2635;
  --muted:#556176;
  --accent:#2c7be5;
  --ok:#268b5e;
  --warn:#d2932c;
  --err:#d64545;
  --surface:#ffffff;
  --surface-alt:#f1f4fa;
  --surface-contrast:#e5ebf6;
  --border:#d2d9e6;
  --border-strong:#b7c2d8;
  --border-soft:#c6d0e3;
  --input-bg:#ffffff;
  --input-border:#c2cce0;
  --label:#636f88;
  --status-bg:#eef2fb;
  --status-border:#cfd6e6;
  --table-head-bg:#e4e9f5;
  --table-head-border:#c9d3e5;
  --table-body-border:#d9e1f0;
  --preview-border:#cfd6e6;
  --tooltip-bg:rgba(255,255,255,0.96);
  --tooltip-fg:#1f2635;
  --tooltip-shadow:0 12px 24px rgba(31,45,72,0.18);
  --card-gradient-top:#ffffff;
  --card-gradient-bottom:#e9eef8;
  --card-border:#cfd6e6;
  --card-shadow:0 12px 28px rgba(31,45,72,0.12);
  --uploader-border:#c3cce0;
  --chart-card-bg:#ffffff;
  --chart-card-border:#d2d9e6;
  --chart-header:#27344a;
  --chart-legend:#49566d;
  --chart-legend-heading:#7b879d;
  --chart-canvas-bg:#ffffff;
  --chart-grid:rgba(33,53,94,0.08);
  --chart-axis:rgba(33,53,94,0.22);
  --chart-tick:#4d5a72;
  --chart-label:#27344a;
  --chart-cursor-line:rgba(55,79,120,0.35);
  --chart-cursor-dot:#1f2635;
  --chart-cursor-border:rgba(233,239,255,0.9);
  --chart-height-sm:180px;
  --chart-height-md:220px;
  --chart-height-lg:260px;
  --chart-height-profile:240px;
  --chart-card-padding-y:12px;
  --chart-card-padding-x:14px;
}
html, body { margin:0; background:var(--bg); color:var(--fg); font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial; }
body{ overflow-x:hidden; line-height:1.45; }
.container{ width:100%; max-width:100%; margin:0 auto; padding:24px 2vw; }

@media (max-width: 720px){
  :root{
    --chart-height-md:200px;
    --chart-height-lg:240px;
    --chart-height-profile:220px;
  }
}
@media (max-width: 520px){
  :root{
    --chart-height-sm:160px;
    --chart-height-md:180px;
    --chart-height-profile:200px;
  }
}

/* Typo */
h1{ font-size:clamp(20px,2.8vw,32px); margin:16px 0 6px }
p{ color:var(--muted); margin:0 0 14px }
.section-title{ font-weight:800; margin:6px 0 8px }
.muted{ color:var(--muted) }
.spacer{ height:12px }

/* Cards & grid */
.grid{ display:grid; gap:14px; grid-template-columns: 1fr; }
.upload-card + .grid{ margin-top:14px; }
.card{ background:linear-gradient(180deg,var(--card-gradient-top),var(--card-gradient-bottom)); border:1px solid var(--card-border); border-radius:16px; padding:14px; box-shadow:var(--card-shadow); max-width:100%; overflow:hidden; }

[data-chart-size]{
  --chart-height-current: var(--chart-height-md);
  --chart-profile-height: var(--chart-height-profile);
}
[data-chart-size="sm"]{
  --chart-height-current: var(--chart-height-sm);
}
[data-chart-size="lg"]{
  --chart-height-current: var(--chart-height-lg);
}
[data-chart-profile="sm"]{
  --chart-profile-height: var(--chart-height-sm);
}
[data-chart-profile="md"]{
  --chart-profile-height: var(--chart-height-md);
}
[data-chart-profile="lg"]{
  --chart-profile-height: var(--chart-height-lg);
}

/* Inputs */
.uploader{ border:1px dashed var(--uploader-border); border-radius:14px; padding:12px; background:var(--surface-alt); display:flex; align-items:center; gap:10px }
.row{ display:flex; flex-wrap:wrap; gap:10px; align-items:center }
select,
input[type="text"],
input[type="number"],
input[type="email"],
input[type="search"],
input[type="password"],
input[type="url"],
input[type="datetime-local"],
input[type="time"],
input[type="date"],
input[type="tel"],
textarea{
  background:var(--input-bg);
  color:var(--fg);
  border:1px solid var(--input-border);
  border-radius:10px;
  padding:8px 10px;
  width:100%;
  max-width:100%;
  min-width:0;
  box-sizing:border-box;
  overflow:hidden;
  text-overflow:ellipsis;
  font-family:inherit;
}
input[type="checkbox"]{
  width:auto;
  min-width:auto;
}
textarea{ resize:vertical; min-height:140px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Courier New", monospace; }
label{ font-size:12px; color:var(--label); }
.kv{ display:grid; grid-template-columns: minmax(140px, 240px) minmax(0,1fr); gap:8px 12px; align-items:center }
.kv > *{ min-width:0; }
details{ background:var(--surface-alt); border-radius:14px; border:1px solid var(--border); padding:12px; margin:12px 0; }
summary{ cursor:pointer; font-weight:600; color:var(--fg); }

/* Buttons */
.btn{ background:var(--accent); color:#081018; border:none; border-radius:12px; padding:10px 14px; font-weight:700; cursor:pointer }
.btn-outline{ background:transparent; color:var(--fg); border:1px solid var(--border); border-radius:12px; padding:8px 12px; font-weight:600; cursor:pointer }
.btn-outline:hover{ background:var(--surface-alt); transition:background .08s ease; }
.btn:disabled{ opacity:.5; cursor:not-allowed }
.btn:not(:disabled):hover{ transform:translateY(-1px); transition:transform .05s ease; }
.btn-small{ padding:6px 10px; font-size:12px; border-radius:10px; }

/* Tables & status */
.status{ font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Courier New", monospace; font-size:12px; background:var(--status-bg); border:1px solid var(--status-border); border-radius:10px; padding:10px; white-space:pre-wrap; max-height:170px; overflow:auto }
.status.warn{ color:var(--warn); }
.status.ok{ color:var(--ok); }
.status.err{ color:var(--err); }
table{ width:100%; border-collapse:separate; border-spacing:0; font-size:12.5px }
thead th{ position:sticky; top:0; background:var(--table-head-bg); z-index:2; border-bottom:1px solid var(--table-head-border); text-align:left; padding:8px; white-space:nowrap }
tbody td{ border-bottom:1px dashed var(--table-body-border); padding:6px 8px; vertical-align:top }
.preview{ overflow:auto; max-height:260px; border:1px solid var(--preview-border); border-radius:12px }
.preview-ellipsis td{ text-align:center; font-style:italic; color:var(--muted); }
.pill{ display:inline-block; padding:2px 8px; border-radius:999px; font-weight:700; font-size:11px }
.ok{ background:rgba(61,220,151,.15); color:var(--ok) }
.err{ background:rgba(255,107,107,.15); color:var(--err) }
.warn{ color:var(--warn); }
.mono{ font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Courier New", monospace; }
.steps{ margin:0 0 12px 18px; padding:0; display:grid; gap:8px; font-size:13px; color:var(--fg); }
.steps li{ margin:0; line-height:1.4; }
.steps strong{ color:var(--accent); }
.small{ font-size:11.5px; }
.upload-status-grid{ display:grid; gap:12px; }
.upload-entry{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.upload-entry__label{ width:120px; color:var(--muted); font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:0.04em; }
.upload-entry__control{ display:flex; align-items:center; gap:10px; flex:1; min-width:220px; }
.upload-marker{
  font-size:11px;
  color:var(--muted);
  background:var(--surface-contrast);
  border:1px solid var(--border);
  border-radius:999px;
  padding:4px 10px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:0;
}
.upload-marker.ok{
  color:var(--ok);
  border-color:rgba(61,220,151,.35);
  background:rgba(61,220,151,.12);
}
.upload-marker.err{
  color:var(--err);
  border-color:rgba(255,107,107,.35);
  background:rgba(255,107,107,.12);
}
.upload-marker.pending{
  color:var(--accent);
  border-color:rgba(62,166,255,.35);
  background:rgba(62,166,255,.12);
}

@media (max-width: 640px){
  .kv{ grid-template-columns: 1fr; }
  .kv label{ margin-bottom:4px; }
}

/* Simulator workspace additions */
#simulator-workspace{
  max-width:1080px;
  margin:0 auto;
}

details textarea{
  min-height:160px;
}

#previewSim{
  max-height:320px;
}

.simulator-header{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:16px;
  margin-bottom:12px;
}

.chart-grid{
  margin-top:16px;
  display:grid;
  gap:16px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.chart-wrap{
  border:1px solid var(--chart-card-border);
  border-radius:12px;
  background:var(--chart-card-bg);
  overflow:hidden;
  display:flex;
  flex-direction:column;
}

.chart-wrap header{
  padding:10px 14px;
  font-weight:600;
  color:var(--chart-header);
  border-bottom:1px solid var(--chart-card-border);
}

.chart-wrap canvas{
  display:block;
  width:100%;
  height:var(--chart-height-current, 220px);
  min-height:var(--chart-height-current, 220px);
}

.chart-legend{
  padding:12px 14px;
  border-top:1px solid var(--chart-card-border);
  font-size:11.5px;
  color:var(--chart-legend);
  display:grid;
  gap:6px;
}
.chart-legend .legend-group{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:center;
}
.chart-legend .legend-heading{
  font-weight:600;
  color:var(--chart-legend-heading);
}
.chart-legend .legend-title{
  font-weight:600;
  color:var(--chart-header);
}
.chart-legend .legend-item{
  white-space:nowrap;
}
.chart-legend .legend-empty{
  font-style:italic;
  color:var(--chart-legend-heading);
}

.legend-empty{
  font-style:italic;
  color:var(--chart-legend-heading);
}

.month-spread-card{
  margin-top:18px;
  border:1px solid var(--chart-card-border);
  border-radius:12px;
  background:var(--chart-card-bg);
  padding:16px;
  position:relative;
}
.month-spread-card h3{
  margin:0 0 12px;
  font-size:16px;
  color:var(--chart-header);
}
.month-spread-grid{
  display:grid;
  gap:10px;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  font-size:12px;
  color:var(--chart-legend);
}
.month-spread-grid .month-item{
  border:1px solid var(--chart-card-border);
  border-radius:10px;
  padding:10px;
  background:var(--surface-alt);
  cursor:pointer;
  transition:background 0.15s ease, transform 0.1s ease;
  border-width:1px;
  border-style:solid;
  text-align:left;
  appearance:none;
  color:var(--chart-legend);
  font:inherit;
}
.month-spread-grid .month-item:hover,
.month-spread-grid .month-item:focus{
  background:var(--surface);
  transform:translateY(-1px);
}
.month-spread-grid .month-item:focus{
  outline:2px solid var(--accent);
  outline-offset:2px;
}
.month-spread-grid .month-item strong{
  display:block;
  font-weight:700;
  color:var(--chart-header);
  margin-bottom:4px;
}
.month-spread-detail{
  margin-top:16px;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:14px;
  position:relative;
  background:transparent;
  border:none;
  border-radius:0;
  --spread-axis-gutter: 88px;
  --spread-axis-label-offset: 72px;
}
.month-spread-detail.hidden{ display:none; }
.month-spread-detail.empty .month-spread-bars{ opacity:0.3; }
.month-spread-detail__header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:12px;
  color:var(--chart-legend);
}
.month-spread-title{
  font-weight:600;
  color:var(--chart-header);
}
.month-spread-meta{
  display:flex;
  gap:12px;
  align-items:center;
}
.month-spread-count{
  font-size:11px;
  color:var(--chart-legend-heading);
}
.month-spread-selected{
  font-size:11px;
  color:var(--accent);
  font-weight:600;
}
.month-spread-sorting{
  display:flex;
  gap:8px;
  font-size:11px;
}
.month-spread-subtitle{
  font-size:13px;
  font-weight:600;
  color:var(--chart-header);
  padding-left:0;
  margin-top:6px;
}
.month-spread-subtitle--profile{
  margin-top:14px;
}
.sort-toggle{
  border:1px solid var(--preview-border);
  border-radius:999px;
  padding:4px 12px;
  background:var(--chart-canvas-bg);
  color:var(--chart-legend);
  font-weight:600;
  cursor:pointer;
  transition:background 0.15s ease, color 0.15s ease, transform 0.1s ease;
}
.sort-toggle:hover,
.sort-toggle:focus{
  background:var(--surface);
  transform:translateY(-1px);
}
.sort-toggle:focus{ outline:2px solid var(--accent); outline-offset:2px; }
.sort-toggle--active{
  background:var(--accent);
  color:#081018;
  border-color:transparent;
}
.month-spread-bars{
  position:relative;
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(6px, 1fr));
  gap:2px;
  height:var(--chart-height-current, 220px);
  min-height:var(--chart-height-current, 220px);
  background:var(--chart-canvas-bg);
  border-radius:8px;
  border:1px solid var(--chart-card-border);
  padding:8px 10px 28px calc(var(--spread-axis-gutter) + 4px);
  align-items:end;
}
.month-spread-bars::before{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:var(--spread-axis-gutter);
  border-left:1px solid var(--chart-axis);
}
.month-spread-bars::after{
  content:"SEK/kWh";
  position:absolute;
  left:calc(var(--spread-axis-gutter) - var(--spread-axis-label-offset));
  top:50%;
  transform:translateY(-50%) rotate(-90deg);
  transform-origin:center;
  font-size:12px;
  color:var(--chart-label);
  letter-spacing:0;
  pointer-events:none;
}
.month-spread-bars .bar{
  background:linear-gradient(180deg,#3865d8,#2449a6);
  border-radius:4px 4px 2px 2px;
  min-width:4px;
}
.month-spread-bars .bar.low{
  background:linear-gradient(180deg,#12b886,#0b8f65);
}
.month-spread-bars .bar.high{
  background:linear-gradient(180deg,#f48c06,#c26a00);
}
.month-spread-bars .bar--active{
  outline:2px solid var(--accent);
  outline-offset:1px;
  box-shadow:0 0 0 2px rgba(8,16,24,0.45);
}
.month-spread-bars .bar::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-1px;
  height:1px;
  background:var(--chart-card-border);
}
.month-spread-bars .axis-line{
  position:absolute;
  left:var(--spread-axis-gutter);
  right:10px;
  border-top:1px dashed var(--chart-grid);
}
.month-spread-bars .axis-line span{
  position:absolute;
  left:-32px;
  top:-8px;
  font-size:11px;
  color:var(--chart-tick);
  background:var(--chart-canvas-bg);
  padding:0 3px;
}
.month-spread-bars .axis-line span.unit{
  left:-36px;
  top:-24px;
  font-size:12px;
  font-weight:400;
  color:var(--chart-label);
}
.month-spread-tooltip{
  position:absolute;
  padding:6px 10px;
  border-radius:8px;
  background:var(--tooltip-bg);
  color:var(--tooltip-fg);
  box-shadow:var(--tooltip-shadow);
  pointer-events:none;
  font-size:11px;
  transform:translate(-50%, -120%);
  white-space:nowrap;
}
.month-spread-price-tooltip{
  position:absolute;
  padding:6px 10px;
  border-radius:8px;
  background:var(--tooltip-bg);
  color:var(--tooltip-fg);
  box-shadow:var(--tooltip-shadow);
  pointer-events:none;
  font-size:11px;
  transform:translate(-50%, -110%);
  white-space:nowrap;
}
.month-spread-profile{
  position:relative;
  margin-top:12px;
  background:var(--chart-canvas-bg);
  border:1px solid var(--chart-card-border);
  border-radius:10px;
  padding:12px;
  padding-left:max(0px, calc(var(--spread-axis-gutter) - 76px));
  min-height:var(--chart-profile-height, 240px);
}
.month-spread-canvas{
  width:100%;
  height:var(--chart-profile-height, 240px);
  display:block;
}

.cycle-card{
  margin-top:18px;
  border:1px solid var(--chart-card-border);
  border-radius:12px;
  background:var(--chart-card-bg);
  padding:16px;
  display:flex;
  flex-direction:column;
  gap:16px;
}
.cycle-nav{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
}
.cycle-grid{
  display:grid;
  gap:16px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.cycle-panel{
  border:1px solid var(--chart-card-border);
  border-radius:12px;
  background:var(--chart-card-bg);
  padding:12px;
}
.cycle-panel header{
  font-size:13px;
  font-weight:600;
  margin:0 0 8px;
  color:var(--chart-header);
}
.cycle-panel canvas{
  width:100%;
  height:var(--chart-height-current, 200px);
  min-height:var(--chart-height-current, 200px);
}
.cycle-tooltip{
  position:absolute;
  padding:6px 10px;
  border-radius:8px;
  background:var(--tooltip-bg);
  color:var(--tooltip-fg);
  box-shadow:var(--tooltip-shadow);
  pointer-events:none;
  font-size:11px;
  white-space:nowrap;
  z-index:5;
}
.cycle-tooltip.hidden{ display:none; }

#daily .day-card{
  border:1px solid var(--chart-card-border);
  border-radius:12px;
  background:var(--chart-card-bg);
  padding:12px;
  margin-top:12px;
}

#daily .day-card header{
  font-size:13px;
  font-weight:600;
  margin:0 0 6px;
  color:var(--chart-header);
}

#kpi{
  margin-top:16px;
  display:grid;
  gap:12px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

#kpi .kpi-card{
  border:1px solid var(--chart-card-border);
  border-radius:12px;
  background:var(--chart-card-bg);
  padding:12px;
  display:flex;
  flex-direction:column;
  gap:6px;
}

#kpi .kpi-card strong{
  font-size:13px;
  color:var(--chart-header);
}

#kpi .kpi-card span{
  font-size:12px;
  color:var(--chart-legend);
}

#daily .day-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  font-size:12px;
}

#daily .day-table th,
#daily .day-table td{
  padding:6px 8px;
  border-bottom:1px solid var(--chart-card-border);
}

#daily .day-table tbody tr:hover{
  background:rgba(62,166,255,0.08);
}

#daily .day-table .highlight{
  color:var(--accent);
  font-weight:600;
}

.month-spread-detail .month-spread-bars canvas{
  width:100%;
}

.month-spread-detail .month-spread-bars canvas + canvas{
  margin-top:8px;
}

.month-spread-detail .month-spread-bars .bar-selected{
  outline:2px solid var(--accent);
  outline-offset:2px;
}

.month-spread-grid .month-item.active{
  border-color:var(--accent);
  background:rgba(62,166,255,0.12);
}

.cycle-nav button:disabled{
  opacity:0.5;
}

#monthlySpreadPriceTooltip{
  z-index:6;
}