/* settings.css — page chrome for Inställningar.
   Reuses tokens defined in styles.css (--bg-1, --line, --c-sell, etc). */

.settings-app{
  min-height: 100vh;
  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);
  display: flex; flex-direction: column;
  color: var(--ink);
  font-family: "Geist", "Geist Fallback", ui-sans-serif, system-ui, sans-serif;
}

/* ── Top bar ────────────────────────────────────────────────────────── */
.settings-topbar{
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 14px;
  padding: 14px 26px;
  background: rgba(10,15,24,.78);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border-bottom: 1px solid var(--line);
}
.settings-topbar .back{
  width: 36px; height: 36px; border-radius: 10px;
  border: 1px solid var(--line);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink-1); text-decoration: none;
  transition: background .15s, border-color .15s;
}
.settings-topbar .back:hover{ background: rgba(255,255,255,.04); border-color: var(--line-2); }
.settings-topbar .back svg{ transform: rotate(180deg); }

.settings-topbar .title-block{ display: flex; align-items: center; gap: 12px; }
.settings-topbar .title-icon{
  cursor: pointer;
  width: 40px; height: 40px; border-radius: 50%;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.08);
  display: inline-flex; align-items: center; justify-content: center;
  flex: none;
}
.settings-topbar .title-icon img{
  width: 100%; height: 100%; object-fit: contain;
}
.settings-topbar h1{
  margin: 0; font-size: 17px; font-weight: 600; letter-spacing: -.005em;
  line-height: 1.1;
}
.settings-topbar .sub{ font-size: 11px; color: var(--ink-3); margin-top: 2px; }
.settings-topbar .spacer{ flex: 1 }
.settings-topbar{ flex-wrap: nowrap; }
.settings-topbar .back{ flex: none; }

.save-toast{
  font-size: 12px; padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--line-2);
  display: inline-flex; align-items: center; gap: 6px;
}
.save-toast.ok{ color: var(--c-sell); border-color: rgba(63,204,139,.30); background: rgba(63,204,139,.06); }
.save-toast.err{ color: var(--c-peak); border-color: rgba(255,90,101,.30); background: rgba(255,90,101,.06); }
.save-toast.info{ color: var(--ink-2); }
.save-toast .dot{ width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* ── Buttons ────────────────────────────────────────────────────────── */
.btn-primary, .btn-secondary{
  font: inherit; cursor: pointer;
  font-weight: 500; font-size: 13px;
  padding: 8px 14px; border-radius: 10px;
  display: inline-flex; align-items: center; gap: 7px;
  transition: background .15s, border-color .15s, opacity .15s;
}
.btn-primary{
  background: var(--c-sell); color: #0A0F18;
  border: 1px solid rgba(0,0,0,.15);
  font-weight: 600;
}
.btn-primary:hover:not(:disabled){ background: #50d99a; }
.btn-primary:disabled{ opacity: .4; cursor: not-allowed; }
.btn-secondary{
  background: transparent; color: var(--ink-1);
  border: 1px solid var(--line);
}
.btn-secondary:hover:not(:disabled){ background: rgba(255,255,255,.04); border-color: var(--line-2); }
.btn-secondary:disabled{ opacity: .4; cursor: not-allowed; }

.btn-ghost-sm{
  font: inherit; cursor: pointer; font-size: 12px;
  padding: 5px 10px; border-radius: 8px;
  background: transparent; color: var(--ink-2);
  border: 1px solid var(--line);
  display: inline-flex; align-items: center; gap: 5px;
}
.btn-ghost-sm:hover{ background: rgba(255,255,255,.03); color: var(--ink); }

/* ── Main ───────────────────────────────────────────────────────────── */
.settings-main{
  flex: 1;
  max-width: 880px;
  width: 100%;
  margin: 0 auto;
  padding: 28px 24px 80px;
  display: flex; flex-direction: column; gap: 16px;
}

.settings-loading{
  padding: 80px 0; text-align: center; color: var(--ink-3); font-size: 13px;
}

/* ── Card ───────────────────────────────────────────────────────────── */
.sc-card{
  position: relative;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 22px 24px;
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(255,255,255,.03) inset, 0 8px 24px rgba(0,0,0,.20);
}
.sc-card::before{
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: var(--accent, linear-gradient(90deg, var(--blue), var(--violet)));
}

.sc-card-head{
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 18px;
}
.sc-card-head .icon-circle{
  width: 38px; height: 38px; border-radius: 11px;
  background: var(--icon-bg, rgba(91,168,255,.12));
  display: inline-flex; align-items: center; justify-content: center;
  flex: none;
}
.sc-card-head h2{
  margin: 0; font-size: 15px; font-weight: 600; letter-spacing: -.005em; line-height: 1.2;
}
.sc-card-head .sub{ font-size: 11.5px; color: var(--ink-3); margin-top: 3px; }
.sc-card-head .right{ margin-left: auto; }

.sc-card .formula{
  background: rgba(255,255,255,.018);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 11px 14px;
  margin-bottom: 16px;
}
.sc-card .formula .f{
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 12.5px; color: var(--ink); font-weight: 500;
}
.sc-card .formula .h{ font-size: 11px; color: var(--ink-3); margin-top: 3px; }

/* ── Form atoms ─────────────────────────────────────────────────────── */
.sc-grid{
  display: grid;
  gap: 14px 16px;
  grid-template-columns: 1fr 1fr;
}
.sc-grid-3{
  display: grid;
  gap: 14px 16px;
  grid-template-columns: 1fr 1fr 1fr;
}
.sc-grid .full, .sc-grid-3 .full{ grid-column: 1 / -1 }

.sc-field-label{
  display: block;
  font-size: 12px; font-weight: 500;
  color: var(--ink-1);
  margin-bottom: 6px;
}
.sc-field-help{
  font-size: 11px; color: var(--ink-3); margin-top: 5px;
  line-height: 1.4;
}

.sc-input-wrap{ position: relative; }
.sc-input, .sc-select, .sc-textarea{
  width: 100%; display: block;
  padding: 9px 12px;
  border-radius: 9px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  color: var(--ink);
  font: inherit; font-size: 13.5px;
  font-family: "Geist Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
  transition: border-color .12s, background .12s, box-shadow .12s;
}
.sc-input:focus, .sc-select:focus, .sc-textarea:focus{
  outline: none;
  border-color: rgba(91,168,255,.5);
  background: var(--bg-1);
  box-shadow: 0 0 0 3px rgba(91,168,255,.10);
}
.sc-input[readonly], .sc-input.readonly{
  background: rgba(255,255,255,.015);
  color: var(--ink-2);
}
.sc-input[type="email"], .sc-input[type="password"], .sc-input[type="text"]{
  font-family: "Geist", "Geist Fallback", sans-serif;
  font-variant-numeric: normal;
  letter-spacing: 0;
}
.sc-input::placeholder{ color: var(--ink-4); }
.sc-input-with-unit{ position: relative; }
.sc-input-with-unit .sc-input{ padding-right: 56px; }
.sc-input-with-unit .unit{
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  font-size: 11px; color: var(--ink-3);
  font-family: "Geist Mono", ui-monospace, monospace;
  pointer-events: none;
}

.sc-select{ appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238C97AE' stroke-width='1.6' stroke-linecap='round'><path d='m6 9 6 6 6-6'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 16px;
  padding-right: 38px;
}

/* ── Toggle (large pill) ────────────────────────────────────────────── */
.sc-toggle{
  display: inline-flex; align-items: center; gap: 10px;
  cursor: pointer; user-select: none;
}
.sc-toggle input{ display: none; }
.sc-toggle .track{
  width: 36px; height: 20px; border-radius: 999px;
  background: rgba(180,200,240,.10);
  border: 1px solid var(--line);
  position: relative; flex: none;
  transition: background .15s, border-color .15s;
}
.sc-toggle .track::after{
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--ink-2);
  transition: left .15s, background .15s;
}
.sc-toggle.on .track{
  background: rgba(63,204,139,.18);
  border-color: rgba(63,204,139,.38);
}
.sc-toggle.on .track::after{
  left: 18px; background: var(--c-sell);
}
.sc-toggle .lbl{ font-size: 13px; color: var(--ink-1); font-weight: 500; }

/* ── Check row (with green check icon when on) ──────────────────────── */
.sc-check{
  display: flex; align-items: flex-start; gap: 10px;
  cursor: pointer; user-select: none;
  padding: 5px 0;
}

/* Pausa hembatteriet — egen sektion, alltid synlig oberoende av smart
   billaddning. Standalone (smart billaddning av) får en avskiljare upptill. */
.ev-pause-batt{ margin-top: 14px; }
.ev-pause-batt.standalone{
  margin-top: 18px; padding-top: 16px;
  border-top: 1px solid var(--line);
}

/* Multi-EV (§5): per-laddbox-block i inställningarna */
.ev-charger-count{
  font-size: 12px; font-weight: 600; color: var(--ink-3);
  font-family: "Geist Mono", monospace;
}
/* Bilprofiler (SPEC_BILPROFILER_PER_BOX): bilar ≠ boxar. Egen sektion ovanför
   laddboxarna — batteristorleken bor här, boxen är bara uttaget. */
.ev-cars{margin-bottom:16px;padding:16px;border:1px solid var(--line);border-radius:12px;background:rgba(91,168,255,.035)}
.ev-cars-head{display:flex;align-items:baseline;flex-wrap:wrap;gap:10px;margin-bottom:12px}
.ev-cars-head strong{font-size:14px;color:var(--ink)}
.ev-car-row{padding:12px 0;border-top:1px solid var(--line)}
.ev-car-row:first-of-type{padding-top:0;border-top:0}
.ev-car-row-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.ev-car-row-head strong{font-size:13px;color:var(--ink-2);font-weight:500}
.ev-car-remove{color:var(--c-peak);font:inherit;font-size:12px;background:none;border:0;cursor:pointer;font-weight:500}
.ev-car-remove:disabled{color:var(--ink-3);opacity:.5;cursor:not-allowed}
.ev-car-add{margin-top:4px;color:var(--blue);font:inherit;font-size:12.5px;background:none;border:0;cursor:pointer;font-weight:500}
.ev-charger-block{
  margin-bottom: 14px; padding: 16px;
  border: 1px solid var(--line); border-radius: 12px;
  background: rgba(255,255,255,.015);
}
.ev-charger-head{
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 12px;
}
.ev-charger-head strong{ font-size: 14px; color: var(--ink); white-space: nowrap; }
.ev-charger-remove{
  color: var(--c-peak); font-size: 12px; font: inherit;
  background: none; border: 0; cursor: pointer; font-weight: 500;
}
.ev-charger-remove:hover{ text-decoration: underline; }
.sc-check input{ display: none; }
.sc-check .ic{
  width: 18px; height: 18px; border-radius: 50%;
  border: 1.5px solid var(--line-2);
  display: inline-flex; align-items: center; justify-content: center;
  flex: none; margin-top: 1px;
  transition: background .15s, border-color .15s;
}
.sc-check .ic svg{ opacity: 0; color: #0A0F18; transition: opacity .15s; }
.sc-check.on .ic{ background: var(--c-sell); border-color: var(--c-sell); }
.sc-check.on .ic svg{ opacity: 1; }
.sc-check .lbl{
  font-size: 13px; color: var(--ink-1); font-weight: 500; line-height: 1.4;
}
.sc-check .help{ display: block; font-size: 11.5px; color: var(--ink-3); margin-top: 3px; font-weight: 400; }

/* ── Ja/Nej-segment (tydligt svar på ja/nej-frågor) ─────────────────── */
.sc-yesno{
  display: flex; align-items: center; gap: 16px;
  padding: 8px 0;
}
.sc-yesno-q{ flex: 1; min-width: 0; }
.sc-yesno-q .lbl{
  display: block; font-size: 13px; color: var(--ink-1);
  font-weight: 500; line-height: 1.4;
}
.sc-yesno-q .help{
  display: block; font-size: 11.5px; color: var(--ink-3);
  margin-top: 3px; font-weight: 400;
}
.sc-seg{
  flex: none;
  display: inline-flex; padding: 3px; gap: 3px;
  background: rgba(0,0,0,.22);
  border: 1px solid var(--line);
  border-radius: 11px;
}
.sc-seg button{
  border: 0; background: transparent; cursor: pointer;
  font: inherit; font-size: 13px; font-weight: 600;
  color: var(--ink-3);
  padding: 7px 18px; border-radius: 8px;
  transition: background .15s, color .15s;
}
.sc-seg button:hover{ color: var(--ink-1); }
.sc-seg button.on.yes{ background: var(--c-sell); color: #0A0F18; }
.sc-seg button.on.no{ background: var(--line-2); color: var(--ink); }

/* ── Month picker (12 chips) ─────────────────────────────────────────── */
.sc-months{
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: 6px;
}
.sc-month-chip{
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px 5px 8px; border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.02);
  font-size: 12px; color: var(--ink-2);
  cursor: pointer; user-select: none;
  transition: background .15s, border-color .15s, color .15s;
}
.sc-month-chip .dot{
  width: 12px; height: 12px; border-radius: 50%;
  border: 1.5px solid var(--line-2);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s, border-color .15s;
}
.sc-month-chip .dot svg{ opacity: 0; color: #0A0F18; transition: opacity .15s; }
.sc-month-chip.on{
  background: rgba(63,204,139,.06);
  border-color: rgba(63,204,139,.25);
  color: var(--ink);
}
.sc-month-chip.on .dot{ background: var(--c-sell); border-color: var(--c-sell); }
.sc-month-chip.on .dot svg{ opacity: 1; }

/* ── Multi-field rows (Fält 1/2/3 in solar) ─────────────────────────── */
.sc-row-title{
  font-size: 12.5px; font-weight: 600; color: var(--c-sell);
  margin: 12px 0 8px; letter-spacing: .02em;
}
.sc-row-title:first-child{ margin-top: 0; }

/* ── Banner (advanced help text) ────────────────────────────────────── */
.sc-banner{
  border: 1px solid rgba(244,200,75,.25);
  background: rgba(244,200,75,.04);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 16px;
  font-size: 12px; line-height: 1.55; color: var(--ink-1);
}
.sc-banner p{ margin: 0; }
.sc-banner p + p{ margin-top: 6px; }
.sc-banner strong{ color: var(--c-charge-sol); font-weight: 600; }

/* ── Active-limit summary chip (peak shaving "AKTIV GRÄNS JUST NU") ─── */
.sc-active-chip{
  border: 1px solid rgba(63,204,139,.30);
  background: rgba(63,204,139,.04);
  border-radius: 10px;
  padding: 10px 14px;
  margin: 6px 0 16px;
  display: flex; align-items: baseline; gap: 12px;
}
.sc-active-chip .l{ font-size: 9.5px; letter-spacing: .12em; font-weight: 600; color: var(--ink-3); text-transform: uppercase; }
.sc-active-chip .v{ font-size: 18px; font-weight: 600; color: var(--c-sell); font-family: "Geist Mono", monospace; letter-spacing: -.02em; }
.sc-active-chip .h{ font-size: 11.5px; color: var(--ink-3); margin-left: auto; }

/* ── Copy field (Homey API key) ─────────────────────────────────────── */
.sc-copy{
  display: flex; gap: 8px; align-items: stretch;
}
.sc-copy .sc-input{ flex: 1; }
.sc-copy .copy-btn{
  width: 42px; flex: none;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 9px;
  color: var(--ink-2); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s, border-color .15s;
}
.sc-copy .copy-btn:hover{ background: rgba(91,168,255,.08); color: var(--blue); border-color: rgba(91,168,255,.3); }
.sc-copy .copy-btn.copied{ color: var(--c-sell); border-color: rgba(63,204,139,.4); background: rgba(63,204,139,.08); }

/* ── Map (Leaflet) ──────────────────────────────────────────────────── */
.sc-map{
  width: 100%; height: 240px; border-radius: 10px;
  border: 1px solid var(--line);
  overflow: hidden;
  position: relative;
}
.sc-map .leaflet-container{
  width: 100%; height: 100%;
  background: var(--bg-2);
  font-family: "Geist", sans-serif;
}
.sc-map .leaflet-control-attribution{
  background: rgba(10,15,24,.7) !important;
  color: var(--ink-3) !important;
  font-size: 9.5px !important;
  backdrop-filter: blur(8px);
}
.sc-map .leaflet-control-attribution a{ color: var(--ink-2) !important; }
.sc-map .leaflet-control-zoom a{
  background: rgba(14,21,36,.85) !important;
  color: var(--ink-1) !important;
  border-color: var(--line-2) !important;
  backdrop-filter: blur(8px);
}
.sc-map .leaflet-control-zoom a:hover{
  background: rgba(91,168,255,.15) !important;
}
.sc-map .coords{
  position: absolute; bottom: 10px; left: 50px;
  font-size: 11px; font-family: "Geist Mono", monospace;
  color: var(--ink-1);
  background: rgba(10,15,24,.78);
  padding: 5px 10px; border-radius: 7px;
  backdrop-filter: blur(8px);
  border: 1px solid var(--line-2);
  z-index: 500;
  pointer-events: none;
}

/* ── Footer info ─────────────────────────────────────────────────────── */
.settings-foot{
  text-align: center;
  font-size: 11.5px;
  color: var(--ink-3);
  padding: 8px 0 16px;
  font-style: italic;
}

/* ── Responsive ─────────────────────────────────────────────────────── */
@media (max-width: 700px){
  .settings-topbar{ padding: 10px 12px; gap: 8px; }
  .settings-topbar h1{ font-size: 15px; }
  .settings-topbar .sub{ display: none; }
  .settings-topbar .btn-secondary, .settings-topbar .btn-primary{ padding: 7px 10px; font-size: 12px; }
  /* Mobil: knapparna får ALDRIG tryckas ut ur vyn. Titeln krymper först,
     "Osparade ändringar"-brickan kokas ner till en prick. */
  .settings-topbar .title-block{ min-width: 0; overflow: hidden; }
  .settings-topbar h1{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .settings-topbar .title-icon{ width: 32px; height: 32px; }
  .settings-topbar .spacer{ flex: 1 1 0; min-width: 0; }
  .settings-topbar .btn-secondary, .settings-topbar .btn-primary{ flex: none; white-space: nowrap; }
  .settings-topbar .save-toast{ flex: none; padding: 6px; gap: 0; font-size: 0; border-radius: 999px; }
  .settings-topbar .save-toast .dot{ margin: 0; }
  .settings-main{ padding: 18px 14px 60px; gap: 14px; }
  .sc-card{ padding: 18px; border-radius: 14px; }
  .sc-grid, .sc-grid-3{ grid-template-columns: 1fr; }
  .sc-card-head{ margin-bottom: 14px; }
  .sc-card-head h2{ font-size: 14px; }
}


/* ── Kategorinav (SNav, 2026-06-11) ─────────────────────────────────────
   Bas: sticky horisontell chip-rad under topbaren (smala skärmar).
   ≥1160px: sticky vertikal rail till vänster om korten. */
.settings-body{ flex: 1; display: flex; flex-direction: column; }
.s-group{ display: flex; flex-direction: column; gap: 16px; }

.settings-nav{
  position: sticky; top: 68px; z-index: 15;
  display: flex; flex-direction: row; gap: 6px;
  overflow-x: auto;
  padding: 9px 14px;
  background: rgba(10,15,24,.82);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid var(--line);
  scrollbar-width: none;
}
.settings-nav::-webkit-scrollbar{ display: none; }
.settings-nav .ni{
  font: inherit; font-size: 12.5px; font-weight: 500;
  color: var(--ink-2);
  background: rgba(255,255,255,.02);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 13px;
  display: inline-flex; align-items: center; gap: 8px;
  cursor: pointer; white-space: nowrap; text-align: left;
  flex: none;
  transition: background .15s, color .15s, border-color .15s;
}
.settings-nav .ni:hover{ background: rgba(255,255,255,.05); color: var(--ink); }
.settings-nav .ni.on{
  background: rgba(91,168,255,.10);
  border-color: rgba(91,168,255,.30);
  color: #BBD7FF;
}
.settings-nav .ni .dot{ width: 7px; height: 7px; border-radius: 50%; flex: none; opacity: .75; }
.settings-nav .ni.on .dot{ opacity: 1; }

@media (max-width: 700px){
  .settings-nav{ top: 56px; padding: 8px 12px; }
}

@media (min-width: 1160px){
  .settings-body{
    flex-direction: row; justify-content: center; align-items: flex-start;
    gap: 8px; padding: 0 24px;
  }
  .settings-nav{
    position: sticky; top: 96px;
    flex-direction: column; gap: 2px;
    width: 196px; flex: none;
    margin-top: 28px;
    padding: 0; overflow: visible;
    background: transparent; border: 0;
    backdrop-filter: none; -webkit-backdrop-filter: none;
  }
  .settings-nav .ni{
    border-radius: 9px;
    border-color: transparent;
    background: transparent;
    padding: 8px 12px;
  }
  .settings-nav .ni:hover{ background: rgba(255,255,255,.04); }
  .settings-nav .ni.on{
    background: rgba(91,168,255,.10);
    border-color: rgba(91,168,255,.25);
  }
  /* main ligger nu i en rad-flex — släpp auto-centreringen, behåll bredden */
  .settings-body .settings-main{ margin: 0; padding-left: 0; padding-right: 0; }
}


/* ── Flik-läge för kategorier (2026-06-11) ──────────────────────────────
   Bara aktiv kategori (main[data-sec]) visas — varje kategori blir en
   egen "sida". Ingen lång rulle. */
.settings-main .s-group{ display: none; }
.settings-main[data-sec="grp-hem"] #grp-hem,
.settings-main[data-sec="grp-drift"] #grp-drift,
.settings-main[data-sec="grp-sol"] #grp-sol,
.settings-main[data-sec="grp-install"] #grp-install,
.settings-main[data-sec="grp-ev"] #grp-ev,
.settings-main[data-sec="grp-data"] #grp-data,
.settings-main[data-sec="grp-ekonomi"] #grp-ekonomi,
.settings-main[data-sec="grp-peak"] #grp-peak,
.settings-main[data-sec="grp-konto"] #grp-konto{ display: flex; }

/* Bredare innehåll på stora skärmar — mindre tomyta i kanterna */
@media (min-width: 1160px){
  .settings-body .settings-main{ max-width: 1120px; }
}
@media (min-width: 1500px){
  .settings-body{ gap: 28px; }
  .settings-body .settings-main{ max-width: 1240px; }
}


/* ── Bred desktop (≥1500px): 2-kolumns kortlayout (2026-06-11) ──────────
   Nyttja ytan — korten i en kategori flödar i två kolumner.
   Sektioner med ett enda kort (Elinstallation, Elbil, Datafält) spänner
   hela bredden, liksom Plats-kortet (kartan mår bra av bredd). */
@media (min-width: 1500px){
  .settings-body{ gap: 32px; }
  .settings-body .settings-main{ max-width: 1560px; }
  .s-group{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    align-items: start;
  }
  .s-group > :only-child{ grid-column: 1 / -1; }
  .s-group > .settings-foot{ grid-column: 1 / -1; } /* foten i grp-konto */
  #grp-hem > :last-child{ grid-column: 1 / -1; }   /* Plats (karta) */
}


/* ── Fix (2026-06-11 sen kväll): flik-reglerna ovan sätter display:flex med
   hög specificitet (.settings-main[data-sec] #grp-X) och vann över
   .s-group-griden på ≥1500px — synlig sektion blev flex-kolumn med
   align-items:start ⇒ korten krympte till innehållsbredd (skärmdump-bugg).
   Re-assertera grid för AKTIV sektion med samma specificitet, senare i
   cascaden. Behåll denna ORDNING: flik-block → 2-kolumns-block → detta. */
@media (min-width: 1500px){
  .settings-main[data-sec="grp-hem"] #grp-hem,
  .settings-main[data-sec="grp-drift"] #grp-drift,
  .settings-main[data-sec="grp-sol"] #grp-sol,
  .settings-main[data-sec="grp-install"] #grp-install,
  .settings-main[data-sec="grp-ev"] #grp-ev,
  .settings-main[data-sec="grp-data"] #grp-data,
  .settings-main[data-sec="grp-ekonomi"] #grp-ekonomi,
  .settings-main[data-sec="grp-peak"] #grp-peak,
  .settings-main[data-sec="grp-konto"] #grp-konto{ display: grid; }
}


/* ── Körform-segment per skjutbar last (SPEC_LASTER_MODE_SPLIT §1) ──────── */
.sc-seg-label{ font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: 6px; }
.sc-seg{ display: inline-flex; border: 1px solid var(--line); border-radius: 9px;
  overflow: hidden; background: rgba(0,0,0,.2); }
.sc-seg button{ font: inherit; font-size: 12.5px; color: var(--ink-2);
  background: transparent; border: 0; padding: 8px 14px; cursor: pointer;
  transition: color .15s; }
.sc-seg button:hover{ background: rgba(255,255,255,.04); color: var(--ink); }
.sc-seg button.on{ background: rgba(91,168,255,.14); color: #BBD7FF; }
.sc-seg button + button{ border-left: 1px solid var(--line); }


/* ── Driftläge-radioval (2026-06-16, ersätter Maximera egenförbrukning) ──
   Två ömsesidigt uteslutande val, radio-stil med hjälptext under varje. */
.drift-opts{ display: flex; flex-direction: column; gap: 10px; }
.drift-opt{
  display: flex; align-items: flex-start; gap: 13px; text-align: left;
  width: 100%; font: inherit; cursor: pointer;
  background: rgba(255,255,255,.015);
  border: 1px solid var(--line); border-radius: 12px;
  padding: 15px 16px; color: var(--ink-1);
  transition: border-color .15s, background .15s;
}
.drift-opt:hover{ background: rgba(255,255,255,.04); }
.drift-opt.on{ border-color: rgba(0,191,165,.55); background: rgba(0,191,165,.07); }
.drift-opt .radio{
  flex: none; margin-top: 1px;
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid var(--ink-3);
  display: inline-flex; align-items: center; justify-content: center;
  transition: border-color .15s;
}
.drift-opt.on .radio{ border-color: #00BFA5; }
.drift-opt .radio .dot{
  width: 9px; height: 9px; border-radius: 50%;
  background: #00BFA5; transform: scale(0); transition: transform .15s;
}
.drift-opt.on .radio .dot{ transform: scale(1); }
.drift-opt .body{ display: flex; flex-direction: column; gap: 4px; }
.drift-opt .lbl{ font-size: 14.5px; font-weight: 600; color: var(--ink); }
.drift-opt.on .lbl{ color: #fff; }
.drift-opt .hlp{ font-size: 12.5px; line-height: 1.5; color: var(--ink-2); }

/* ── Rattpanel: "Egna inställningar" — klassprefix .ratt* (INTE .knob:
   .knob är upptaget av mobilhederns Avancerat-toggle i mobile.css, och
   settings.css laddas på index.html också. Kollisionen gjorde toggeln jättestor.) (SPEC_GRAVIO_USER_MODE_UI 2026-07-30) ──
   GHOST = ojusterad ratt (flottans standard). Måste synas som INTE satt:
   dämpad slider + tomt sifferfält med flottans värde som placeholder.
   0 är däremot ett satt värde ("av") och visas i full styrka. */
.ratt-panel, .ratt-always{ margin-top: 16px; display: flex; flex-direction: column; gap: 10px; }
.ratt-always{ margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); }
.ratt-panel-head{ display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; margin-bottom: 2px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.ratt-panel-head .h{ font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--ink-3); }
.ratt{ border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; background: rgba(255,255,255,.015); }
.ratt.ghost{ background: transparent; border-style: dashed; }
/* Låst ratt (backend-fältet finns inte än): dämpa BARA reglaget. Tidigare
   opacity på hela kortet gjorde att Morgonbufferten inte syntes alls. */
.ratt.pending .ratt-ctl{ opacity: .45; pointer-events: none; }
.ratt-tag.locked{ color: #8FA6C4; border-color: rgba(143,166,196,.35); background: rgba(143,166,196,.10); }
.ratt-check{ padding: 13px 16px; }
.ratt-top{ display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ratt-lbl{ font-size: 14.5px; font-weight: 600; color: #fff; }
.ratt.ghost .ratt-lbl{ color: var(--ink); }
.ratt-tag{ flex: none; font-size: 11px; font-weight: 600; letter-spacing: .03em; color: var(--ink-3); border: 1px solid var(--line); border-radius: 999px; padding: 3px 9px; }
.ratt-tag.always{ color: #00BFA5; border-color: rgba(0,191,165,.4); background: rgba(0,191,165,.08); }
.ratt-reset{ flex: none; font: inherit; font-size: 11.5px; font-weight: 600; cursor: pointer; color: #5BA8FF; background: none; border: 0; padding: 3px 0; text-decoration: underline; text-underline-offset: 2px; }
.ratt-reset:hover{ color: #8DC4FF; }
.ratt-help{ font-size: 12.5px; line-height: 1.55; color: var(--ink-2); margin: 5px 0 12px; }
.ratt-ctl{ display: grid; grid-template-columns: 1fr 118px; gap: 14px; align-items: center; }
.ratt-num{ position: relative; }
.ratt-num .sc-input{ padding-right: 40px; text-align: right; font-variant-numeric: tabular-nums; font-size: 15px; font-weight: 600; color: #fff; }
/* Ghost-siffran ska LÄSAS, inte gissas (utvecklaren 2026-07-30: "alla siffror
   är nedtonade"). Placeholder ligger nära brödtextens styrka, inte --ink-3. */
.ratt-num .sc-input::placeholder{ color: var(--ink-1); opacity: 1; font-weight: 600; }
.ratt.ghost .ratt-num .sc-input{ color: #fff; }
.ratt-num .unit{ position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-size: 12.5px; color: var(--ink-3); pointer-events: none; }
.ratt-range{ -webkit-appearance: none; appearance: none; width: 100%; height: 22px; cursor: pointer; background: linear-gradient(rgba(255,255,255,.13), rgba(255,255,255,.13)) center/100% 4px no-repeat; }
.ratt-range::-webkit-slider-runnable-track{ height: 4px; border-radius: 3px; background: rgba(255,255,255,.13); }
.ratt-range::-moz-range-track{ height: 4px; border-radius: 3px; background: rgba(255,255,255,.13); }
.ratt-range::-webkit-slider-thumb{ -webkit-appearance: none; appearance: none; width: 16px; height: 16px; margin-top: -6px; border-radius: 50%; background: #00BFA5; border: 2px solid #0F1520; box-shadow: 0 0 0 1px rgba(0,191,165,.5); }
.ratt-range::-moz-range-thumb{ width: 16px; height: 16px; border-radius: 50%; background: #00BFA5; border: 2px solid #0F1520; box-shadow: 0 0 0 1px rgba(0,191,165,.5); }
.ratt.ghost .ratt-range::-webkit-slider-thumb{ background: var(--ink-3); box-shadow: none; }
.ratt.ghost .ratt-range::-moz-range-thumb{ background: var(--ink-3); box-shadow: none; }
.ratt-foot{ font-size: 12px; line-height: 1.5; color: var(--ink-2); margin-top: 9px; }
.ratt-foot strong{ color: #fff; font-weight: 700; }
.ratt-foot .off-note{ color: #F4C84B; }
.ratt-foot .pending-note{ color: var(--ink-2); }
.ratt-bunker{ display: flex; flex-direction: column; gap: 4px; margin-top: 4px; padding: 13px 15px; border-radius: 11px; border: 1px solid rgba(244,200,75,.35); background: rgba(244,200,75,.07); font-size: 12.5px; line-height: 1.55; color: var(--ink-1); }
.ratt-bunker strong{ color: #F4C84B; font-size: 13px; }
@media (max-width: 560px){ .ratt-ctl{ grid-template-columns: 1fr; gap: 10px; } .ratt-num .sc-input{ text-align: left; } }

/* SPEC_EV_SETTINGS_UX §3 (2026-08-02): hint när ev_power finns men ingen box */
.ev-unmanaged-hint{display:flex;flex-wrap:wrap;align-items:center;gap:12px;justify-content:space-between;padding:12px 14px;margin:0 0 16px;border:1px solid rgba(91,168,255,.32);background:rgba(91,168,255,.08);border-radius:10px}
.ev-unmanaged-hint-text{font-size:13px;line-height:1.5;color:var(--ink);flex:1 1 260px}
.ev-unmanaged-hint-actions{display:flex;align-items:center;gap:12px}
.ev-unmanaged-hint-dismiss{color:var(--ink-3);font:inherit;font-size:12px;font-weight:500;background:none;border:0;cursor:pointer}
.ev-unmanaged-hint-dismiss:hover{text-decoration:underline}


/* Mörk karta ur OSM:s ljusa tiles (CARTO kräver numera API-nyckel):
   invertera + vrid tillbaka färgtonen. Markörer/attribution ligger i andra
   paneler och påverkas inte. */
.sc-map .leaflet-tile-pane{ filter: invert(1) hue-rotate(180deg) brightness(.75) contrast(1.05) saturate(.55); }