@import url('/assets/css/pages/elpriser-maaned.css');

.annual-development { display:grid; gap:22px; }
.annual-chart-legend { display:flex; justify-content:flex-end; gap:18px; color:var(--ui-copy); font-size:.82rem; font-weight:800; }
.annual-chart-legend span { display:flex; align-items:center; gap:7px; }
.annual-chart-legend span::before { content:""; width:12px; height:12px; border-radius:3px; background:var(--ui-green); }
.annual-chart-legend .is-dk2::before { background:#4776a8; }
.annual-chart-scroll,.annual-table-scroll { max-width:100%; overflow-x:auto; scrollbar-gutter:stable; }
.annual-chart { position:relative; display:grid; grid-template-columns:repeat(12,minmax(58px,1fr)); gap:8px; min-width:840px; min-height:330px; padding:24px 14px 0 66px; border:1px solid var(--ui-line); border-radius:var(--ui-radius-sm); background:repeating-linear-gradient(to bottom,#fff 0,#fff 67px,#e7edf2 68px); }
.annual-chart-scale { position:absolute; top:20px; bottom:52px; left:10px; display:flex; flex-direction:column; justify-content:space-between; width:52px; color:var(--ui-muted); font-size:.66rem; font-weight:700; text-align:right; pointer-events:none; }
.annual-chart-group { display:grid; grid-template-rows:auto auto; min-width:0; }
.annual-chart-bars { display:flex; align-items:flex-end; justify-content:center; gap:5px; min-width:0; height:270px; border-bottom:2px solid #afbdc9; }
.annual-chart-bar { position:relative; width:min(22px,40%); height:100%; color:var(--ui-green); }
.annual-chart-bar svg { display:block; width:100%; height:100%; overflow:visible; }
.annual-chart-bar rect { fill:currentColor; transform-origin:center bottom; transition:filter .18s ease,transform .18s ease; }
.annual-chart-bar.is-dk2 { color:#4776a8; }
.annual-chart-bar.is-negative { color:#b8473e; }
.annual-chart-bar:hover rect,.annual-chart-bar:focus-visible rect { filter:brightness(.9); transform:scaleX(1.12); }
.annual-chart-bar:focus-visible { border-radius:4px; outline:3px solid rgba(39,117,46,.32); outline-offset:2px; }
.annual-chart-bar span { position:absolute; left:50%; top:4px; z-index:2; display:none; width:max-content; padding:5px 7px; color:#fff; border-radius:5px; background:var(--ui-ink); font-size:.7rem; font-weight:800; transform:translateX(-50%); }
.annual-chart-bar:hover span,.annual-chart-bar:focus-visible span { display:block; }
.annual-chart-bar.is-revealed span { display:block; }
.annual-chart-bars.is-empty { align-items:flex-end; }
.annual-chart-empty { width:72%; height:34px; margin-bottom:1px; border:2px dashed #c9d4dc; border-radius:5px 5px 1px 1px; background:rgba(237,243,247,.5); }
.annual-chart-month { display:flex; flex-direction:column; align-items:center; gap:2px; padding:10px 2px 13px; color:var(--ui-copy); font-size:.77rem; font-weight:800; text-align:center; text-transform:capitalize; text-decoration:none; }
.annual-chart-month small { color:var(--ui-green-dark); font-size:.58rem; font-weight:800; letter-spacing:.02em; text-transform:none; }
.annual-chart-month.is-unavailable { color:#8b9aa6; }
.annual-chart-month.is-unavailable small { color:#8b9aa6; }
.annual-chart-month:hover { color:var(--ui-green-dark); }
.annual-month-table { width:100%; min-width:620px; border-collapse:separate; border-spacing:0; border:1px solid var(--ui-line); border-radius:var(--ui-radius-sm); overflow:hidden; }
.annual-month-table caption { padding:0 0 10px; color:var(--ui-copy); text-align:left; font-size:.82rem; }
.annual-month-table th,.annual-month-table td { padding:13px 16px; color:var(--ui-ink); text-align:left; border-bottom:1px solid var(--ui-line); }
.annual-month-table thead th { color:var(--ui-copy); background:var(--ui-soft); font-size:.72rem; letter-spacing:.05em; text-transform:uppercase; }
.annual-month-table tbody tr:last-child th,.annual-month-table tbody tr:last-child td { border-bottom:0; }
.annual-month-table tbody tr:hover { background:#f7fbf8; }
.annual-month-table a { color:var(--ui-green-dark); font-weight:800; }

@media (max-width:800px) {
  .annual-chart { min-height:285px; padding-left:58px; }
  .annual-chart-scale { width:44px; font-size:.61rem; }
  .annual-chart-bars { height:225px; }
  .annual-chart-legend { justify-content:flex-start; }
}