/* HEMS — dark navy homeowner dashboard
   Tokens, layout primitives, shared atoms. */

:root{
  /* base — cool navy, slightly desaturated */
  --bg:           #0A0F18;
  --bg-1:         #0E1524;        /* surface */
  --bg-2:         #131C30;        /* raised */
  --bg-3:         #1A2440;        /* hover */
  --line:         rgba(180,200,240,.08);
  --line-2:       rgba(180,200,240,.14);
  --line-strong:  rgba(180,200,240,.22);

  --ink:          #E6ECF7;
  --ink-1:        #C7D0E2;
  --ink-2:        #8C97AE;
  --ink-3:        #5E6A82;
  --ink-4:        #3B4459;

  /* Kollegans prototyp är en enkolumnsapp: Tailwind max-w-2xl (672px), på stora
     skärmar lg:max-w-4xl (896px). Utan kapet blev flödets kvadratiska SVG lika
     bred som kortet — 2153×2153 px på en 2225 px skärm. */
  --gcol: 672px;

  /* chrome accents (palette 3) */
  --blue:         #5BA8FF;
  --violet:       #9D7BFF;

  /* energy semantic — universal */
  --c-charge-net: #4F8CFF;   /* Ladda (nät) — charge from grid */
  --c-charge-sol: #FFD54A;   /* Ladda (sol) — charge from solar */
  --c-cover:      #FF8A3D;   /* Täck huset — cover the house from battery */
  --c-sell:       #2ED47A;   /* Sälj sol — grön */
  --c-wait:       #7C8798;   /* Vänta — paus, slategrå */
  --c-export:     #00D4D8;   /* Export — teal */
  --c-peak:       #FF4D6D;   /* Peak shaving — röd */
  --c-zero:       #A855F7;   /* Nollexport — violett */
  --c-observe:    #9AA0AC;   /* AI-styrt — neutral grå */
  --c-unchanged:  #9B8CFF;   /* Oförändrat — violett, skild från orange Täck huset */
  --c-sellprice:  #ECEFF7;   /* Säljpris line */

  --solar:        #F4C84B;
  --battery:      #3FCC8B;
  --grid:         #5BA8FF;
  --home:         #E6ECF7;

  --radius:       14px;
  --radius-sm:    10px;
  --radius-lg:    22px;

  --shadow-card:  0 1px 0 rgba(255,255,255,.03) inset,
                  0 12px 32px rgba(0,0,0,.32);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);
  font-family:"Geist","Geist Fallback",ui-sans-serif,system-ui,-apple-system,sans-serif;
  font-feature-settings:"ss01","cv11";
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body{min-height:100vh}

/* tabular-num mono numerics */
.mono{font-family:"Geist Mono","Geist Mono Fallback",ui-monospace,SFMono-Regular,Menlo,monospace;
  font-variant-numeric:tabular-nums;
  letter-spacing:-.01em}
.num{font-variant-numeric:tabular-nums;letter-spacing:-.01em}

/* — App grid — */
.app{
  min-height:100vh;
  display:grid;
  grid-template-rows: 60px 1fr;
  grid-template-areas:
    "topbar"
    "main";
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(91,168,255,.05), transparent 60%),
    radial-gradient(800px 500px at -10% 110%, rgba(157,123,255,.04), transparent 60%),
    var(--bg);
}
.app.dense{}

/* — Sidebar — */
.side{
  grid-area:side;
  border-right:1px solid var(--line);
  padding:18px 14px;
  display:flex; flex-direction:column; gap:6px;
  background:linear-gradient(180deg,rgba(255,255,255,.012),transparent 30%);
}
.side .logo{display:flex;align-items:center;gap:10px;padding:6px 8px 22px}
.side .logo .mark{
  width:36px;height:36px;border-radius:50%;
  overflow:hidden; flex:none;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  display:inline-flex;align-items:center;justify-content:center;
}
.side .logo .mark img{
  width:100%;height:100%;object-fit:contain;
}
.side .logo .name{font-weight:600;letter-spacing:-.01em}
.side .logo .sub{font-size:11px;color:var(--ink-3);margin-top:1px}

.side .nav-sect{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);
  padding:14px 10px 6px}
.side .nav a{
  display:flex;align-items:center;gap:10px;
  padding:8px 10px;border-radius:9px;
  color:var(--ink-1);text-decoration:none;font-size:13.5px;font-weight:500;
  border:1px solid transparent;
}
.side .nav a:hover{background:rgba(255,255,255,.03);color:var(--ink)}
.side .nav a.active{
  background:linear-gradient(180deg, rgba(91,168,255,.10), rgba(91,168,255,.04));
  border-color:rgba(91,168,255,.18);
  color:var(--ink);
}
.side .nav a .ico{width:16px;height:16px;color:var(--ink-2);flex:none}
.side .nav a.active .ico{color:var(--blue)}
.side .nav a .badge{margin-left:auto;font-size:10.5px;color:var(--ink-3);background:rgba(255,255,255,.04);
  padding:1px 6px;border-radius:999px;border:1px solid var(--line)}
.side .nav a.active .badge{color:var(--blue);background:rgba(91,168,255,.08);border-color:rgba(91,168,255,.20)}

.side .nav a .badge.live{
  display:inline-flex;align-items:center;gap:5px;
  color:var(--c-sell);background:rgba(63,204,139,.08);border-color:rgba(63,204,139,.22);
}
.side .nav a .badge.live::before{
  content:""; width:5px; height:5px; border-radius:50%;
  background:var(--c-sell); box-shadow:0 0 0 0 rgba(63,204,139,.6);
  animation:pulseDot 1.6s ease-out infinite;
}
@keyframes pulseDot{
  0%   { box-shadow: 0 0 0 0   rgba(63,204,139,.55) }
  70%  { box-shadow: 0 0 0 6px rgba(63,204,139,0)   }
  100% { box-shadow: 0 0 0 0   rgba(63,204,139,0)   }
}

.side .home-card{
  margin-top:18px; padding:12px; border:1px solid var(--line); border-radius:12px;
  background:linear-gradient(180deg,rgba(255,255,255,.02),transparent);
}
.side .home-card .label{font-size:10.5px;color:var(--ink-3);letter-spacing:.06em;text-transform:uppercase}
.side .home-card .addr{font-size:13px;color:var(--ink-1);margin-top:4px;line-height:1.3}
.side .home-card .meta{display:flex;gap:8px;margin-top:8px;font-size:11px;color:var(--ink-2)}
.side .home-card .meta b{color:var(--ink);font-weight:600}

@media (min-width:1024px){ :root{ --gcol: 896px; } }

/* — Topbar — */
.topbar{
  grid-area:topbar;
  display:flex;align-items:center;gap:16px;
  padding:0 22px;
  border-bottom:1px solid var(--line);
  background:rgba(10,15,24,.7);
  backdrop-filter:blur(20px) saturate(140%);
  -webkit-backdrop-filter:blur(20px) saturate(140%);
  position:sticky; top:0; z-index:10;
}

/* Designväxel (test): gammal vs ny dashboard. Avsiktligt tyst — det är en
   testyta, inte en produktkontroll. */
.tb-design{display:flex;gap:2px;padding:2px;border:1px solid var(--line);border-radius:9px;background:rgba(255,255,255,.03);flex:none}
.tb-design a{font-size:11px;letter-spacing:.02em;padding:3px 10px;border-radius:7px;color:var(--ink-3);text-decoration:none;line-height:1.55;cursor:pointer;white-space:nowrap}
.tb-design a:hover{color:var(--ink)}
.tb-design a.on{background:rgba(255,255,255,.09);color:var(--ink)}

/* Brand */
.topbar .tb-brand{display:flex;align-items:center;gap:10px;text-decoration:none;flex:none}
.topbar .tb-logo{
  width:30px;height:30px;border-radius:50%;overflow:hidden;flex:none;
  border:1px solid rgba(255,255,255,.08);
  display:inline-flex;align-items:center;justify-content:center;
}
.topbar .tb-logo img{width:100%;height:100%;object-fit:contain}
.topbar .tb-name{font-weight:600;letter-spacing:-.01em;color:var(--ink);font-size:15px}

/* Nav */
.topbar .tb-nav{display:flex;align-items:center;gap:4px}
.topbar .tb-nav a{
  display:inline-flex;align-items:center;gap:7px;
  padding:7px 12px;border-radius:9px;
  color:var(--ink-1);text-decoration:none;font-size:13px;font-weight:500;
  border:1px solid transparent;
}
.topbar .tb-nav a:hover{background:rgba(255,255,255,.03);color:var(--ink)}
.topbar .tb-nav a.active{
  background:linear-gradient(180deg, rgba(91,168,255,.10), rgba(91,168,255,.04));
  border-color:rgba(91,168,255,.18);
  color:var(--ink);
}
.topbar .tb-nav a .ico{color:var(--ink-2)}
.topbar .tb-nav a.active .ico{color:var(--blue)}

.topbar .tb-home{
  display:inline-flex;align-items:center;gap:7px;
  font-size:12.5px;color:var(--ink-1);
  padding:5px 11px;border-radius:999px;
  border:1px solid var(--line-2);background:rgba(255,255,255,.02);
  cursor:default;
}
.topbar .tb-home svg{color:var(--ink-3)}
.topbar .tb-home b{font-weight:500}
.topbar .crumb{display:flex;align-items:center;gap:8px;color:var(--ink-2);font-size:13px}
.topbar .crumb b{color:var(--ink);font-weight:600}
.topbar .crumb .sep{color:var(--ink-4)}

.topbar .pill{
  display:inline-flex;align-items:center;gap:8px;
  padding:5px 10px 5px 8px; border-radius:999px;
  border:1px solid var(--line-2); background:rgba(255,255,255,.02);
  font-size:12px; color:var(--ink-1);
}
.topbar .pill .dot{width:6px;height:6px;border-radius:50%;background:var(--c-sell);
  box-shadow:0 0 0 3px rgba(63,204,139,.18)}
.topbar .pill.warn .dot{background:var(--c-unchanged);box-shadow:0 0 0 3px rgba(255,158,69,.18)}

.topbar .spacer{flex:1}

.topbar .clock{font-feature-settings:"tnum";color:var(--ink);font-size:13px}
.topbar .clock .d{color:var(--ink-2);margin-right:6px}

.topbar .weather{display:flex;align-items:center;gap:6px;color:var(--ink-1);font-size:13px}
.topbar .weather .ico{color:var(--solar);width:16px;height:16px}

.topbar .iconbtn{
  width:32px;height:32px;border-radius:9px;border:1px solid var(--line);
  background:transparent;color:var(--ink-1);
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
  position:relative;
}
.topbar .iconbtn:hover{background:rgba(255,255,255,.03);color:var(--ink)}
.topbar .iconbtn .nudge{
  position:absolute; top:-2px; right:-2px;
  width:8px;height:8px;border-radius:50%;background:var(--c-peak);
  border:2px solid var(--bg);
}

.topbar .avatar{
  width:32px;height:32px;border-radius:50%;
  background:linear-gradient(135deg,#9D7BFF,#5BA8FF);
  color:#fff;font-size:12px;font-weight:600;
  display:inline-flex;align-items:center;justify-content:center;
  cursor:pointer;border:1px solid rgba(255,255,255,.1);
}

/* — Main grid — single column flow, full width */
.main{
  grid-area:main;
  padding:22px;
  display:block;
  align-content:start;
}
.app.dense .main{padding:14px}
.col-full{display:grid;gap:18px;min-width:0;max-width:none;margin:0}
.app.dense .col-full{gap:14px}

/* Dashboard content tabs (UX 2026-06-04) */
.dash-tabs{
  display:flex;gap:4px;
  padding:4px;border-radius:12px;
  background:rgba(0,0,0,.18);border:1px solid var(--line-2);
  width:fit-content;
}
.dash-tabs button{
  appearance:none;border:0;background:transparent;cursor:pointer;
  font:inherit;font-size:13.5px;font-weight:500;
  color:var(--ink-2);
  padding:8px 18px;border-radius:9px;
  transition:background .15s,color .15s;
}
.dash-tabs button:hover{color:var(--ink-1)}
.dash-tabs button.on{
  background:linear-gradient(180deg, rgba(91,168,255,.16), rgba(91,168,255,.06));
  color:var(--ink);
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset;
}

/* Status cards row — Batteri / Besparingar / Peak side by side */
.card-row{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap:18px;
}
.app.dense .card-row{gap:14px}

/* legacy two-col wrappers (kept harmless) */
.col-left{display:grid;gap:18px;min-width:0}
.col-right{display:grid;gap:18px;align-content:start}
.app.dense .col-left,.app.dense .col-right{gap:14px}

/* iPad-landscape / Tesla mid-band: krymp padding + KPI-padding så
   höger kolumn ryms utan att krocka mot huvudinnehållet (1280–1439px). */
@media (min-width:1280px) and (max-width:1439px){
  .main{ padding:16px; gap:14px; }
}

/* — Card — */
.card{
  background:var(--bg-1);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow-card);
  overflow:hidden;
  position:relative;
}
.card.padded{padding:18px}
.card.compact .head{padding:11px 14px}
.card.compact .head h3{font-size:12px}
.card .head{
  display:flex; align-items:center; gap:10px;
  padding:14px 16px;
  border-bottom:1px solid var(--line);
}
.card .head h3{
  margin:0;font-size:13px;font-weight:600;letter-spacing:-.005em;
  display:flex;align-items:center;gap:8px;color:var(--ink);
}
.card .head h3 .ico{width:14px;height:14px;color:var(--solar)}
.card .head .right{margin-left:auto;display:flex;gap:6px;align-items:center;
  padding-right: 30px}        /* room for the collapse chevron button */
.card .head .sub{font-size:11.5px;color:var(--ink-3);margin-left:8px}

/* compact list rows used by Devices + Activity */
.row-compact{
  display:flex;align-items:center;gap:10px;
  padding:7px 14px;border-top:1px solid var(--line);
}
.card.compact .row-compact:first-child,
.card .row-compact:first-child{border-top:0}
.row-compact .row-ic{
  width:22px;height:22px;border-radius:6px;flex:none;
  background:rgba(180,200,240,.05);
  display:inline-flex;align-items:center;justify-content:center;
}
.row-compact .row-t{font-size:11.5px;font-weight:500;line-height:1.2}
.row-compact .row-s{font-size:10.5px;margin-top:1px}
.row-compact .row-v{font-size:11px;font-weight:500}
.row-compact.log{align-items:flex-start;padding-top:6px;padding-bottom:6px;gap:10px}

/* Next-actions plan list */
.plan-now{
  display:flex;align-items:center;gap:12px;
  padding:14px 18px;border-bottom:1px solid var(--line);
  background:linear-gradient(180deg, rgba(157,123,255,.04), transparent);
}
.plan-now-l{display:flex;align-items:center;gap:12px;flex:1}
.plan-now-l .dot{width:10px;height:10px;border-radius:50%;flex:none;
  box-shadow:0 0 0 4px rgba(255,255,255,.04)}
.plan-now-l .lbl{font-size:9.5px;letter-spacing:.12em;color:var(--ink-3);font-weight:600}
.plan-now-l .action{font-size:14px;font-weight:600;margin-top:1px;letter-spacing:-.005em}
.plan-now-r{font-size:11.5px}

.plan-list{padding:6px 8px 8px}
.plan-item{
  display:flex;align-items:center;gap:12px;
  padding:8px 12px;border-radius:9px;
}
.plan-item:hover{background:rgba(255,255,255,.02)}
.plan-item .bullet{width:6px;height:6px;border-radius:50%;flex:none}

/* EV / Laddbox visual */
.ev-pill{
  display:flex;align-items:center;gap:8px;
  padding:8px 10px;border-radius:10px;flex:1;
  background:rgba(180,200,240,.04);border:1px solid var(--line);
}
.ev-link{
  position:relative;width:24px;height:2px;
  background:linear-gradient(90deg, var(--blue), var(--violet));
  opacity:.3;flex:none;
}
.ev-link[data-active="1"]{
  opacity:1;
  background-image: linear-gradient(90deg, var(--blue) 50%, transparent 50%);
  background-size: 8px 100%;
  animation: evflow 1.5s linear infinite;
}
@keyframes evflow{ to { background-position: 16px 0 } }
.ev-bolt{
  position:absolute;top:-5px;left:50%;transform:translateX(-50%);
  width:14px;height:14px;border-radius:50%;
  background:var(--bg-1);border:1px solid rgba(91,168,255,.45);
  display:inline-flex;align-items:center;justify-content:center;
}

.tag{
  display:inline-flex;align-items:center;gap:6px;
  font-size:11px;padding:3px 8px;border-radius:999px;
  border:1px solid var(--line-2);color:var(--ink-2);background:rgba(255,255,255,.015);
}
.tag .dot{width:6px;height:6px;border-radius:50%}

.btn-ghost{
  appearance:none;border:1px solid var(--line-2);background:transparent;color:var(--ink-1);
  font:inherit;font-size:11.5px;padding:5px 10px;border-radius:8px;cursor:pointer;
}
.btn-ghost:hover{background:rgba(255,255,255,.03);color:var(--ink)}
.btn-ghost.active{background:rgba(91,168,255,.10);border-color:rgba(91,168,255,.28);color:var(--blue)}

.seg{
  display:inline-flex;border:1px solid var(--line-2);border-radius:9px;padding:2px;
  background:rgba(0,0,0,.18);
}
.seg button{
  appearance:none;border:0;background:transparent;color:var(--ink-2);
  font:inherit;font-size:11.5px;font-weight:500;
  padding:4px 10px;border-radius:7px;cursor:pointer;
}
.seg button.on{background:rgba(255,255,255,.06);color:var(--ink)}
.seg button:hover:not(.on){color:var(--ink-1)}

/* — Hero stats row — */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.kpi{padding:18px 20px;border-right:1px solid var(--line)}
.kpi:last-child{border-right:0}
.kpi .l{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.kpi .v{font-size:30px;font-weight:600;margin-top:6px;line-height:1;letter-spacing:-.02em}
.kpi .v small{font-size:13px;color:var(--ink-2);margin-left:6px;font-weight:500}
.kpi .d{margin-top:8px;display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--ink-2)}
.kpi .d.up{color:var(--c-sell)}
.kpi .d.dn{color:var(--c-peak)}
.kpi .kpi-why{margin-top:8px;font-size:11.5px;line-height:1.45;color:var(--ink-2);text-wrap:pretty}

/* iPad-landscape / Tesla mid-band: kompaktare KPI + kort-head så raden ryms
   utan att KPI:erna klipps mot den klampade högerkolumnen (1280–1439px). */
@media (min-width:1280px) and (max-width:1439px){
  .kpi{ padding:16px 18px; }
  .kpi .v{ font-size:26px; }
  .card .head{ padding:12px 14px; }
}

/* — Sparkline-ish chips — */
.chip{
  display:inline-flex;align-items:center;gap:6px;
  padding:3px 7px;border-radius:7px;
  font-size:11px;background:rgba(255,255,255,.03);color:var(--ink-1);
}

/* — Misc — */
.muted{color:var(--ink-3)}
.dim{color:var(--ink-2)}
.hairline{border-top:1px solid var(--line)}

/* — Bil & laster-fliken (IA 2026-07-08) — */
.lad-head{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.lad-head .lad-ic{
  flex:none; width:34px; height:34px; border-radius:9px;
  display:inline-flex; align-items:center; justify-content:center;
  color:var(--blue);
  background:color-mix(in srgb, var(--blue) 10%, transparent);
  border:1px solid color-mix(in srgb, var(--blue) 24%, transparent);
}
.lad-head .lad-head-txt{ flex:1; min-width:180px; }
.lad-head .lad-title{ font-size:15px; font-weight:600; letter-spacing:-.01em; color:var(--ink); }
.lad-head .lad-sub{ font-size:12.5px; color:var(--ink-2); margin-top:2px; text-wrap:pretty; }
.lad-cfg{
  display:inline-flex; align-items:center; gap:5px;
  font-size:12.5px; font-weight:500; color:var(--ink-1); text-decoration:none;
  padding:7px 12px; border-radius:9px;
  border:1px solid var(--line-2); background:rgba(255,255,255,.02);
}
.lad-cfg:hover{ background:rgba(255,255,255,.05); color:var(--ink); }
.lad-cfg svg{ color:var(--ink-3); transform:rotate(-90deg); }
.lad-cfg.solid{ margin-top:14px; color:var(--blue); border-color:rgba(91,168,255,.28); background:rgba(91,168,255,.08); }
.lad-cfg.solid svg{ color:var(--blue); }
.lad-empty{ text-align:left; }
.lad-empty .lad-empty-t{ font-size:14px; font-weight:600; color:var(--ink); }
.lad-empty .lad-empty-s{ font-size:12.5px; color:var(--ink-2); margin-top:6px; line-height:1.5; max-width:52ch; text-wrap:pretty; }
.lad-save-row{ display:flex; align-items:center; justify-content:flex-end; gap:12px; margin-top:2px; }

/* — Första-laddning: lugn placeholder tills riktig data landat (kill demo-flash) — */
.boot-load{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:14px; min-height:52vh; color:var(--ink-3);
}
.boot-load .boot-spinner{
  width:26px; height:26px; border-radius:50%;
  border:2px solid var(--line-2); border-top-color:var(--blue);
  animation:boot-spin .8s linear infinite;
}
.boot-load .boot-txt{ font-size:13px; letter-spacing:.01em; }
@keyframes boot-spin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce){ .boot-load .boot-spinner{ animation:none; } }

/* ──── Responsive — Tablet / Laptop / Tesla (600–1279px) ─────────────
   Single-column desktop-layout utan sidebar. Täcker iPad portrait+landscape,
   Tesla Model X-skärmen (~1100px) och små laptops. Korten staplas i en
   kolumn men behåller all desktop-rendering (kartor, ikoner, SVG-grafer).
   2026-05-29: tidigare bröts denna gräns vid 1023px vilket gjorde att
   Tesla (1100px) hamnade i full desktop-layout med krock mellan höger
   sidopanel och huvudinnehållet. Bredare grind (1279px) löser det. */
@media (max-width: 1279px){
  .app{
    min-width: 0;
    grid-template-columns: 1fr;
    grid-template-areas:
      "topbar"
      "main";
  }
  .topbar .tb-home{ display: none; }
  .main{
    padding: 18px;
    grid-template-columns: 1fr;
    gap: 16px;
  }
  /* Layout becomes single column; flatten the two cols */
  .col-left, .col-right{ display: contents; }

  .topbar{ padding: 0 16px; gap: 12px; }
  .topbar .pill{ font-size: 12px; padding: 4px 9px 4px 7px; }
  .topbar .weather{ display: none; }

  /* Card reordering on smaller screens — schema-clock becomes the hero */
  [data-card="schema"]   { order: 1; }
  [data-card="kpis"]     { order: 2; }
  [data-card="flow"]     { order: 3; }
  [data-card="battery"]  { order: 4; }
  [data-card="peak"]     { order: 5; }
  [data-card="forecast"] { order: 6; }
  [data-card="plan"]     { order: 7; }
  [data-card="savings"]  { order: 8; }
  [data-card="activity"] { order: 9; }
}

/* ──── Responsive — Tablet portrait / liten laptop (600–1023px) ──────
   Trimning för riktigt smala tablets — kompaktare topbar/padding. */
@media (max-width: 1023px){
  .main{ padding: 16px; gap: 14px; }
  .topbar{ padding: 0 14px; gap: 10px; }
  .topbar .pill{ font-size: 11px; padding: 4px 8px 4px 6px; }
}

/* ──── Responsive — Mobil (<600px) ───────────────────────────────────
   Vid <600px renderas MobileApp istället (app.jsx-mount), men dessa
   regler aktiveras också om någon väg in på App-bundeln vid liten
   bredd (t.ex. brus från resize). KPI-grid stackas, SVG-charts blir
   horisontellt scrollbara, topbar förenklas. */
@media (max-width: 599px){
  /* Prevent any horizontal scroll from inner SVG/wide content */
  html, body{ overflow-x: hidden; }
  .app{ overflow-x: hidden; max-width: 100vw; }
  .main{ overflow-x: hidden; max-width: 100vw; }
  .card{ max-width: 100%; }

  .topbar{
    padding: 0 12px;
    height: 56px;
    gap: 8px;
  }
  .topbar .crumb{ font-size: 14px; }
  .topbar .clock{ display: none; }
  .topbar .iconbtn:nth-of-type(1){ display: none; } /* hide search */
  .topbar .avatar{ width: 30px; height: 30px; font-size: 11px; }

  .main{
    padding: 12px 12px 24px;
    gap: 12px;
  }

  /* Cards — compact heads + tighter card padding */
  .card .head{ padding: 12px 14px; }
  .card.padded{ padding: 16px; }
  .card .head h3{ font-size: 14px; }
  .card .head .sub{ display: none; }

  /* KPI grid — SINGLE column on mobile, full-bleed text */
  .kpis{ grid-template-columns: 1fr; }
  .kpi{
    padding: 16px 18px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .kpi:last-child{ border-bottom: 0; }
  .kpi .l{ font-size: 11.5px; }
  .kpi .v{ font-size: 32px; }
  .kpi .v small{ font-size: 13px; }
  .kpi .d{ font-size: 12.5px; }

  /* Schema stats 2×2 with bigger text */
  .schema .schema-stats,
  .forecast .forecast-stats{ grid-template-columns: 1fr 1fr; }
  .schema-stat::after{ display: none; }
  .schema-stat:nth-child(odd){
    border-right: 1px solid var(--line);
  }
  .schema-stat:nth-child(1), .schema-stat:nth-child(2){
    border-bottom: 1px solid var(--line);
  }
  .schema-stat{ padding: 14px 16px; }
  .schema-stat .v{ font-size: 24px; }
  .forecast-stat{ padding: 14px 16px; }
  .forecast-stat::after{ display: none; }
  .forecast-stat:nth-child(odd){ border-right: 1px solid var(--line); }
  .forecast-stat:nth-child(1), .forecast-stat:nth-child(2){ border-bottom: 1px solid var(--line); }
  .forecast-stat .v{ font-size: 22px; }

  /* Schema heads — compact + wrap meta */
  .card.schema .schema-head,
  .card.forecast .schema-head{ padding: 12px 14px; flex-wrap: wrap; }
  .card.schema .schema-head h3,
  .card.forecast .schema-head h3{ font-size: 14px; }
  .schema-head .right{ width: 100%; margin-left: 0; justify-content: flex-start; }
  .schema-cur{ font-size: 10.5px; }

  /* Charts — horizontal-scroll Schema + Forecast so 48h stays readable */
  .schema-wrap{ overflow-x: auto; padding: 14px 14px 6px;
    -webkit-overflow-scrolling: touch; }
  .schema-svg{ width: 1100px; height: 260px; max-width: none; }
  .schema-wrap .edgelbl.left,
  .schema-wrap .edgelbl.right{ display: none; }

  .forecast-wrap{ overflow-x: auto; padding: 12px 12px 4px;
    -webkit-overflow-scrolling: touch; }
  .forecast-svg{ width: 1100px; height: 220px; max-width: none; }

  /* Flow stays centered, just height-shrink */
  .flow-body{ padding: 4px 4px 8px; }
  .flow-svg{ height: 360px; }

  /* Combined Energi+Schema card stacks the two halves cleanly */
  .combo-card .combo-grid > .card.flow .flow-svg{
    height: auto; aspect-ratio: 1/1; max-width: 92vw; margin: 0 auto;
  }

  /* Clock — corner stats stack below the dial */
  .schema-clock .clock-wrap{ padding: 14px 14px 60px; }
  .schema-clock .clock-svg{ max-width: 92vw; }
  .clock-corner{
    position: static !important;
    width: 50%;
    max-width: none;
  }
  .schema-clock .clock-wrap{
    display: flex; flex-wrap: wrap; gap: 12px 0;
    justify-content: center;
  }
  .schema-clock .clock-svg{ order: -1; width: 100%; }
  .clock-corner.tl{ order: 1 }
  .clock-corner.tr{ order: 2; justify-content: flex-end }
  .clock-corner.bl{ order: 3 }
  .clock-corner.br{ order: 4; justify-content: flex-end }
  .clock-howto{
    position: static !important;
    width: 100%;
    order: 5;
    padding: 8px 14px 0;
    font-size: 10.5px;
    gap: 12px;
  }

  /* Schema legend — single column on mobile */
  .schema-legend{
    grid-template-columns: 1fr 1fr;
    padding: 12px 14px 14px;
  }
  .schema-legend .lg-group{ padding: 0 8px; }
  .schema-legend .lg-group + .lg-group::before{ display: none; }
  .schema-legend .lg-group:nth-child(odd){
    border-right: 1px solid var(--line);
  }

  /* Forecast legend — tighter */
  .forecast-legend{ padding: 10px 12px; gap: 6px; }
  .forecast-foot{ padding: 10px 14px; gap: 12px; font-size: 11px; }

  /* Collapsible — bigger touch target */
  .coll-btn{ width: 34px; height: 34px; top: 10px; right: 10px; }
}

/* ──── Mobile top tab bar (replaces old bottom tabbar) ──────────────── */
.mobile-tabbar{ display: none; }
@media (max-width: 599px){
  .mobile-tabbar{
    display: flex;
    position: sticky;
    top: 56px;
    left: 0; right: 0;
    padding: 6px 8px;
    background: rgba(10,15,24,.9);
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    border-bottom: 1px solid var(--line-2);
    z-index: 50;
    gap: 4px;
    margin: -12px -12px 12px;
  }
  .mobile-tabbar a{
    flex: 1;
    display: flex; align-items: center; justify-content: center;
    gap: 6px;
    text-decoration: none;
    color: var(--ink-2);
    font-size: 12.5px;
    font-weight: 500;
    border-radius: 9px;
    padding: 8px 0;
    transition: color .15s, background .15s;
  }
  .mobile-tabbar a:hover{ color: var(--ink-1); }
  .mobile-tabbar a.active{
    color: var(--blue);
    background: rgba(91,168,255,.08);
  }
  .mobile-tabbar a svg{ width: 16px; height: 16px; }
}

/* Collapsible card wrapper — hides everything except the head row */
.coll-wrap{position:relative}
/* De nya Gravio-vyerna följer prototypens kolumnbredd. Kapet sitter på KORTET,
   inte bara på innehållet — annars hamnar fäll-ihop-chevronen (absolut, right:14px)
   utanför innehållets kant. */
.coll-wrap[data-card="gflow"],.coll-wrap[data-card="gclock"],
.coll-wrap[data-card="gstat"],.coll-wrap[data-card="gweek"]{max-width:var(--gcol)}
.coll-btn{
  position:absolute; top:14px; right:14px; z-index:5;
  width:24px; height:24px; border-radius:7px;
  border:1px solid var(--line); background:rgba(14,21,36,.6);
  color:var(--ink-2); cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  transition:transform .25s cubic-bezier(.4,1.4,.5,1), background .15s, color .15s;
}
/* Reserve room for the chevron on the card's first row regardless of which
   layout the card uses (.head with .right, or .padded with inline flex). */
.coll-wrap > .card > .head,
.coll-wrap > .card.padded > div:first-child{
  padding-right: 36px !important;
}
.coll-btn:hover{background:rgba(91,168,255,.10);color:var(--ink);border-color:var(--line-strong)}
.coll-btn svg{transform:rotate(90deg);transition:transform .25s cubic-bezier(.4,1.4,.5,1)}
.coll-wrap.collapsed .coll-btn svg{transform:rotate(-90deg)}
.coll-wrap.collapsed .card > *:nth-child(n+2){display:none !important}
.coll-wrap.collapsed .card .head{border-bottom:0 !important}
.coll-wrap.collapsed .card.padded{padding-bottom:18px}
.coll-wrap.collapsed .card.schema .schema-head{padding-bottom:14px}
.coll-wrap.collapsed .card.forecast .schema-head{padding-bottom:14px}

/* scrollbar */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(180,200,240,.10);border-radius:6px;
  border:2px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:rgba(180,200,240,.20);background-clip:content-box;border:2px solid transparent}

/* Refresh pulse — flashes once when plan/data is re-fetched */
.refresh-pulse{
  display:inline-block;width:6px;height:6px;border-radius:50%;
  background:var(--c-sell);
  margin-left:8px;vertical-align:middle;
  animation:refreshPulse 1.4s ease-out 1;
  opacity:0;
}

/* Combined Energi & Schema card — energy flow on the left, clock-schema on
   the right, joined inside a single visual container. */
.combo-card{ padding: 0; }
.combo-card .combo-grid{
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 0;
  align-items: stretch;
}
.combo-card .combo-grid > .card,
.combo-card .combo-grid > .card.flow,
.combo-card .combo-grid > .card.schema-clock{
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  position: relative;
}
.combo-card .combo-grid > .card .head{
  border-bottom: 0 !important;
}
.combo-card .combo-grid > .card:first-child{
  border-right: 1px solid var(--line) !important;
}
.combo-card .combo-grid .card.schema-clock .clock-wrap{
  padding: 18px 18px 90px;
}
.combo-card .combo-grid .card.schema-clock .clock-svg{
  max-width: min(100%, 760px);
  width: 100%;
}
.combo-card .combo-grid .card.flow{
  display: flex;
  flex-direction: column;
}
.combo-card .combo-grid .card.flow .flow-body{
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
}
.combo-card .combo-grid .card.flow .flow-svg{
.combo-card .combo-grid .card.flow .flow-svg{
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  max-height: 760px;
}

@media (max-width: 900px){
  .combo-card .combo-grid{ grid-template-columns: 1fr; }
  .combo-card .combo-grid > .card:first-child{
    border-right: 0 !important;
    border-bottom: 1px solid var(--line) !important;
  }
}
@keyframes refreshPulse{
  0%   { opacity:0; transform:scale(0.4); box-shadow:0 0 0 0 rgba(63,204,139,.55) }
  20%  { opacity:1; transform:scale(1);   box-shadow:0 0 0 0 rgba(63,204,139,.55) }
  70%  { opacity:.55;                     box-shadow:0 0 0 10px rgba(63,204,139,0) }
  100% { opacity:0;                       box-shadow:0 0 0 0 rgba(63,204,139,0) }
}

/* Smooth transitions on chart elements so live plan updates don't pop visually.
   `d` attribute transitions land in Chromium/WebKit; older browsers still get
   the stroke/fill/opacity transitions to soften the change. */
.schema-svg path, .schema-svg rect,
.forecast-svg path,
.flow-svg path, .flow-svg line,
.clock-svg path {
  transition: d .45s cubic-bezier(.4,.6,.4,1),
              fill .45s ease, fill-opacity .45s ease,
              stroke .45s ease, stroke-opacity .45s ease,
              opacity .45s ease;
}

/* Allow pinch-zoom on chart SVGs — single-finger handlers still capture swipes via React */
.schema-svg, .forecast-svg, .clock-svg, .flow-svg{
  touch-action: pan-y pinch-zoom;
}


/* — System banner (allvarlig varning, t.ex. batteriet pausat) — */
.sys-banner{
  display:flex;align-items:center;gap:12px;
  padding:14px 18px;border-radius:14px;
  font-size:13.5px;line-height:1.45;
}
.sys-banner .msg{flex:1;min-width:0}
.sys-banner.err{
  background:linear-gradient(180deg, rgba(255,90,101,.14), rgba(255,90,101,.06));
  border:1px solid rgba(255,90,101,.40);
  color:#ffd0d3;
}
.sys-banner.err svg{color:var(--c-peak);flex:none}
.sys-banner.warn{
  background:rgba(255,158,69,.08);
  border:1px solid rgba(255,158,69,.32);
  color:#ffd9af;
}
.sys-banner.warn svg{color:var(--c-unchanged);flex:none}
.sys-banner .sys-btn{
  flex:none;text-decoration:none;
  font-size:12.5px;font-weight:600;
  padding:8px 14px;border-radius:9px;
  background:var(--c-peak);color:#fff;
  border:1px solid rgba(0,0,0,.15);
  white-space:nowrap;
}
.sys-banner .sys-btn:hover{background:#ff6f79}

/* — Beslutsunderlag inline-chips — */
.bf-chip{ display:inline-flex; align-items:baseline; gap:6px;
  padding:6px 12px; border-radius:999px;
  background:rgba(255,255,255,.025); border:1px solid var(--line); }
.bf-chip .bf-k{ font-size:11px; color:var(--ink-3); }
.bf-chip .bf-v{ font-size:13px; font-weight:600; color:var(--ink); letter-spacing:-.01em; }

/* Dagen styrs av veckoschemat (SPEC §12) — visas som låst värde i stället för
   en tom väljare, som lästes som ett glömt obligatoriskt val. */
.ev-how .inp.ev-locked{display:flex;align-items:center;padding:0 11px;min-height:38px;font-size:12.5px;color:var(--ink-2);background:rgba(0,0,0,.34)}