/* Planbo app · premium tech · lokal designversion, 2026-10-21.
   Ett visuellt lager över den befintliga appen. Ingen data eller affärslogik.
   Skärm endast: befintliga utskrifts- och PDF-mallar behålls. */
@font-face{font-family:Geist;src:url('img/premium-geist.woff2') format('woff2');font-weight:100 900;font-display:swap}
@media screen{
  :root:not([data-tema="natt"]){
    --bg:#f5f5f7;--soft:#f5f5f7;--card:#fff;--ink:#1d1d1f;--ink-2:#45454a;--muted:#626268;
    --line:#e5e5e9;--muted-faint:#85858d;--brand:#246b55;--brand-2:#246b55;--brand-soft:#eaf2ee;
    --ok:#246b55;--ok-soft:#eaf2ee;--surface-hover:#f5f5f7;--surface-sel:#eaf2ee;
    --fyll:#246b55;--fyll-2:#246b55;--fyll-kant:#1a5442;--fyll-djup:#1a5442;--pa-fyll:#fff;
    --mark-1:#246b55;--mark-2:#246b55;--field:#f7f7f9;--hover:#f0f0f3;--vit:#fff;--linje-hover:#c9c9d0;
    --brand-kant:#d4e3db;--accent:#84602f;--warn:#84602f;--warn-soft:#fff5e5;--warn-ink:#725323;
    --danger:#a34435;--danger-soft:#fbefec;--danger-ink:#963e31;
    --shadow:0 2px 8px -4px #1d1d1f08;--shadow-md:0 8px 28px -16px #1d1d1f20;
    --shadow-lg:0 20px 70px -20px #1d1d1f30;--radius:18px;--radius-sm:10px;--radius-lg:22px;
  }
  /* System/ljust/mörkt fungerar fortsatt. Mörka ytor följer grafitpaletten. */
  :root[data-tema="natt"],:root[data-tema="natt"][data-obj="fastighet"]{
    --bg:#141416;--card:#1e1e21;--soft:#262629;--ink:#f5f5f7;--ink-2:#d4d4da;--muted:#b0b0b8;
    --line:#38383e;--field:#242427;--hover:#2c2c31;--surface-hover:#2c2c31;--vit:#262629;
    --brand:#8ec9b0;--brand-2:#8ec9b0;--brand-soft:#243b31;--surface-sel:#243b31;
    --ok:#8ec9b0;--ok-soft:#243b31;--brand-kant:#3a5b4a;
    --fyll:#246b55;--fyll-2:#246b55;--fyll-kant:#357e67;--fyll-djup:#1a5442;--pa-fyll:#fff;
    --mark-1:#246b55;--mark-2:#246b55;--radius:18px;--radius-sm:10px;--radius-lg:22px;
  }
  html body{background:var(--bg);background-image:none}
  body::before{display:none}
  h1,h2,h3{letter-spacing:-.035em}
  .topbar{height:60px;padding-inline:24px;background:var(--card);backdrop-filter:none;box-shadow:none}
  .wordmark{font-size:21px;font-weight:500;letter-spacing:-.045em;gap:10px;min-width:192px}
  .wordmark .mark,.auth-logo .mark{background:#246b55;box-shadow:none;color:#fff}
  .wordmark .mark path,.auth-logo .mark path{fill:#fff}
  .proj-switch{border-left:0;margin-left:0;padding-left:12px}
  .ov-knapp{background:var(--soft);border-color:transparent;border-radius:10px}
  .topbar-right{gap:12px}.avatar{width:32px;height:32px;font-weight:500}
  .plan-badge{font-weight:500;background:var(--soft);color:var(--muted);border:1px solid var(--line)}
  .sidebar{width:240px;--nav-bg:var(--card);--nav-skugga:rgba(29,29,31,.10);border-color:var(--line)}
  :root[data-tema="natt"] .sidebar{--nav-bg:var(--card)}
  .nav-scroll{padding:20px 12px}
  .nav-sek:not(.forsta){border-top:0;margin-top:14px}
  .nav-rubrik{font-size:10px;font-weight:550;letter-spacing:.09em;color:var(--muted);padding:10px 12px}
  .nav-item{min-height:40px;padding:10px 12px;font-size:13px;font-weight:450;gap:11px;border-radius:9px}
  .nav-item .ico{opacity:.7}.nav-item .ico svg{width:17px;height:17px;stroke-width:1.65}
  .sidebar .nav-item.active{background:var(--brand-soft);box-shadow:none;color:var(--brand);font-weight:550}
  .nav-item.active::before{display:none}.nav-item.active .ico{opacity:1}
  .nav-item:hover,.nav-rubrik:hover{background:var(--hover)}
  .nav-fot{background:var(--card);border-color:var(--line)}
  .nav-mgr{background:var(--soft);color:var(--muted);font-weight:500}
  .main{padding:40px clamp(24px,3.4vw,56px) 72px;max-width:1560px;margin-inline:auto}
  .page-head{margin-bottom:28px;gap:20px}.page-head h1{font-size:32px;font-weight:500;letter-spacing:-.045em;line-height:1.15}
  .page-head .sub{font-size:13px;margin-top:8px;color:var(--muted)}
  .greet{margin:0 0 28px;padding:0;max-width:840px}
  .greet-h{font-size:clamp(26px,2.7vw,36px);font-weight:500;letter-spacing:-.045em;line-height:1.2}
  .greet-sub{font-size:14px;color:var(--muted);margin-top:10px;max-width:76ch}
  .greet-story{font-size:13px;margin-top:12px}.greet-row{margin-top:14px}
  .greet-story .gs-w{animation:none;opacity:1;transform:none}
  .greet-row .pill.ok{animation:none}
  .grid{gap:20px}.card{box-shadow:var(--shadow);border-color:var(--line)}
  .card.pad,.card>.pad{padding:24px}.card-h3{font-size:16px;font-weight:550;letter-spacing:-.025em}
  .card.stat{padding:24px;background:var(--card);box-shadow:none;border:1px solid var(--line)}
  .card.stat::before{display:none}.card.stat:hover{transform:none;box-shadow:var(--shadow-md)}
  .card.stat.hero{border-color:var(--brand-kant);background:var(--card)}
  .stat .label{font-size:11px;letter-spacing:.035em;color:var(--muted);font-weight:500;line-height:1.5}
  .stat .val{font-size:32px;letter-spacing:-.05em;font-weight:500;margin-top:14px;line-height:1.15}
  .stat.hero .val{font-size:36px;font-weight:500;color:var(--brand)}
  .stat.hero .val.txt{font-size:28px}.stat .meta{font-size:12px;margin-top:10px;line-height:1.55}
  .stat .ico{opacity:.35;top:21px;right:20px}.stat .ico svg{stroke:var(--muted);width:18px;height:18px}
  .btn{font-weight:500;border-radius:10px;box-shadow:none;padding:10px 15px;background:var(--card);font-size:13px}
  .btn:hover{background:var(--hover);border-color:var(--linje-hover);box-shadow:none;transform:none}
  .btn.primary,.btn.primary:hover{background:var(--fyll);border-color:var(--fyll);color:var(--pa-fyll);box-shadow:none}
  .btn.primary:hover{background:var(--fyll-djup)}
  .btn.ghost{background:transparent}.btn.ghost:hover,.icon-btn:hover{background:var(--hover)}
  .btn.sm{font-size:12px;padding:7px 11px}.toolbar{gap:8px}
  .field input,.field select,.field textarea,.cell{background-color:var(--field);border-color:var(--line);border-radius:8px}
  input:focus,select:focus,textarea:focus{box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 12%,transparent)}
  .pill{box-shadow:none;font-weight:500;font-size:11px;padding:4px 9px}
  .pill.muted{background:var(--soft);color:var(--muted)}.pill.danger::before{animation:none}
  .banner{border-radius:12px;padding:16px 18px;font-size:13px;line-height:1.6}
  .banner.brand,.banner.info{background:var(--brand-soft);color:var(--brand)}
  .banner.danger{background:var(--danger-soft);color:var(--danger-ink)}
  .bars{height:192px;padding-top:20px;gap:5px}
  .bars .bar{background:var(--brand);box-shadow:none;border-radius:4px 4px 0 0;opacity:.72}
  .bars .bar.big{background:var(--accent);opacity:.85}.legend{font-size:11px}
  table{font-size:13px}th{font-size:10px;letter-spacing:.055em;color:var(--muted);font-weight:550}
  td,th{padding:14px 12px;border-color:var(--line)}
  thead th,.t-group td,.t-group th{background:var(--soft)}
  tbody tr:hover td{background-color:var(--field)}
  .t-group td,.t-group th{font-size:12px;font-weight:550}
  .card-scroll{scrollbar-width:thin;scrollbar-color:var(--line) transparent}
  .plan-filter{gap:10px;padding:16px;background:var(--card);border:1px solid var(--line);border-radius:12px}
  .fastrad:has(>.card:only-child){grid-template-columns:minmax(0,1fr)}
  .fastrad:has(>.card:only-child) .fk-lista{grid-template-columns:repeat(4,minmax(0,1fr))}
  :root[data-tema="natt"] body{background-image:none}
  :root[data-tema="natt"] .topbar{background:var(--card)}
  :root[data-tema="natt"] .card.stat,:root[data-tema="natt"] .card.stat.hero{background:var(--card);box-shadow:none}
  :root[data-tema="natt"] .btn.primary{background:var(--fyll);border-color:var(--fyll);box-shadow:none}
  :root[data-tema="natt"] .sidebar .nav-item.active{background:var(--brand-soft);box-shadow:none}
  .hg-map{background:var(--soft);border-color:var(--line)}
  .hg-map .leaflet-tile-pane{filter:grayscale(1) brightness(1.04) contrast(.9)}
  .lib-chip,.pg-cat,.ov-fot{background:var(--soft);border-color:var(--line)}
  .lib-chip.active{background:var(--fyll);color:#fff}
  .modal{border-radius:22px;box-shadow:var(--shadow-lg)}
  #auth{background:var(--bg)}.auth-card{border-radius:22px;box-shadow:var(--shadow-md);padding:40px 32px}
  .auth-logo{font-size:26px;font-weight:500;letter-spacing:-.045em}.auth-sub{margin-top:12px}
  @media(min-width:861px) and (max-width:1180px){
    .main{padding:28px 24px 64px}.grid.k4{grid-template-columns:repeat(2,minmax(0,1fr))}
    .card.pad,.card>.pad,.card.stat{padding:20px}.wordmark{min-width:192px}
  }
  @media(min-width:861px){body.nav-smal .wordmark{min-width:0}}
  @media(max-width:860px){
    .topbar{padding:0 12px;gap:8px}.wordmark{min-width:0}.proj-switch{padding-left:0}
    .topbar-right{gap:8px}.sidebar{width:min(290px,88vw)}.nav-scroll{padding:16px 12px}
    .nav-item{min-height:44px;font-size:14px}.nav-rubrik{min-height:38px;font-size:11px}
    .fastrad:has(>.card:only-child) .fk-lista{grid-template-columns:repeat(2,minmax(0,1fr))}
    .main{padding:28px 16px 64px}.page-head{margin-bottom:24px;gap:16px}
    .page-head h1{font-size:29px}.greet-h{font-size:29px}.greet{margin-bottom:28px}
    .greet-sub{font-size:13px;line-height:1.65}.greet-story{font-size:13px}
    .grid{gap:14px}.grid.k4{grid-template-columns:repeat(2,minmax(0,1fr))!important}
    .card.pad,.card>.pad{padding:20px}.card.stat{padding:18px 16px;min-height:148px}
    .stat .label{font-size:10px;padding-right:0}.stat .ico{display:none}
    .stat .val,.stat.hero .val{font-size:28px;margin-top:12px}.stat.hero .val.txt{font-size:24px}
    .stat .meta{font-size:11px}
    .card.pad:has(>.legend),.card.pad>div:has(>.legend){flex-wrap:wrap;gap:12px}
    .btn{min-height:40px}.toolbar{gap:8px}.bars{height:164px;gap:3px}
    .banner{padding:14px;font-size:12px}.legend{flex-wrap:wrap;gap:6px}
    .plan-filter{padding:12px;gap:8px}.main table[data-stack] tr{background:var(--card);border-color:var(--line);border-radius:12px;padding:16px}
    .main table[data-stack] td{padding-block:9px}.main table[data-stack] td::before{font-weight:500;font-size:11px;color:var(--muted)}
    .main table[data-stack] tr.t-group{background:var(--soft)}
  }
  @media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important}}
}

/* Granskningspass 2: arbetsinnehållet före sammanfattning och sekundära kontroller. */
@media screen{
  .page-kicker{font-size:12px;color:var(--muted);margin-bottom:8px;letter-spacing:.01em}
  .page-head:has(.page-kicker){margin-bottom:12px;align-items:center}
  .page-head:has(.page-kicker) h1{font-size:clamp(26px,2.6vw,34px);overflow-wrap:anywhere}
  .greet{margin-bottom:24px}.greet-sub{margin-top:0;font-size:13px}
  .dashboard-next{margin-bottom:24px}
  .comp-actions{gap:4px;opacity:1}
  .comp-action-sheet{width:min(360px,calc(100vw - 32px));max-height:calc(100dvh - 48px);overflow:auto;background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:18px;padding:16px;box-shadow:var(--shadow-lg)}
  .comp-action-sheet::backdrop{background:rgba(29,29,31,.22)}
  .comp-action-head{display:flex;gap:16px;align-items:center;justify-content:space-between;margin-bottom:12px}
  .comp-action-head h3{font-size:16px;white-space:normal;text-align:left}
  .comp-action-sheet>.icon-btn{display:flex;width:100%;min-height:46px;justify-content:flex-start;gap:12px;padding:12px;font-size:14px;border-radius:9px;white-space:normal;text-align:left}
  .comp-action-sheet>.icon-btn:hover{background:var(--hover)}
  .comp-action-sheet>.danger{border-top:1px solid var(--line);margin-top:8px;color:var(--danger)}
  .plan-notice-lead{line-height:1.6}.plan-notice-scope{margin:8px 0;font-size:12px}
  .plan-notice-controls{display:flex;align-items:flex-start;flex-wrap:wrap;gap:8px 16px;margin-top:10px}
  .plan-notice-controls>.btn{margin-left:0!important}
  .plan-notice-details{flex:1 1 180px;min-width:0}
  .plan-notice-details summary{cursor:pointer;font-size:12px;padding:8px 0;min-height:36px;font-weight:500}
  .plan-notice-details[open]{flex-basis:100%}
  .plan-notice-body{padding-top:8px;line-height:1.7;max-width:90ch}
  @media(min-width:861px){
    .card-scroll:has(.comp-actions) .t-fast{width:88px;min-width:88px;padding-inline:8px}
  }
  @media(max-width:860px){
    .page-head:has(.page-kicker){gap:12px;margin-bottom:12px}
    .page-head:has(.page-kicker) .toolbar{width:auto}
    .greet{margin-bottom:20px}.greet-story{margin-top:8px}
    #app:has(.nav-item.active:is([data-view="plan"],[data-view="components"])) .grid.k3{gap:0!important;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--card)}
    #app:has(.nav-item.active:is([data-view="plan"],[data-view="components"])) .grid.k3>.card.stat{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:16px;align-items:center;padding:14px 16px;min-height:0;border:0;border-radius:0;box-shadow:none}
    #app:has(.nav-item.active:is([data-view="plan"],[data-view="components"])) .grid.k3>.card.stat+.stat{border-top:1px solid var(--line)}
    #app:has(.nav-item.active:is([data-view="plan"],[data-view="components"])) .grid.k3 .label{font-size:11px}#app:has(.nav-item.active:is([data-view="plan"],[data-view="components"])) .grid.k3 .val{grid-column:2;grid-row:1/span 2;font-size:23px;margin:0;text-align:right}
    #app:has(.nav-item.active:is([data-view="plan"],[data-view="components"])) .grid.k3 .meta{margin:3px 0 0;font-size:11px;grid-column:1}
    .plan-notice-controls{gap:4px 12px;margin-top:6px}
    .plan-notice-details{flex-basis:auto}.plan-notice-lead{font-size:12px}
    .comp-action-sheet{border-radius:18px}
  }
}
@media print{
  .comp-actions,.plan-notice-details>summary{display:none!important}
  .plan-notice-controls{display:block}.plan-notice-body{display:block}
}
@media screen{
  .premium-fcurve .fc-readout{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:18px 0 12px}
  .fc-readout-label{font-size:12px;color:var(--muted);margin-bottom:4px}
  .fc-readout-value{font-size:28px;letter-spacing:-.04em;font-weight:500;font-variant-numeric:tabular-nums;color:var(--ink)}
  .fc-readout-value.negative{color:var(--danger)}.fc-hint{font-size:11px;color:var(--muted)}
  .fc-plot{position:relative;height:260px}
  .premium-fcurve .fc-plot svg{display:block;width:100%;height:100%;overflow:visible}
  .premium-fcurve .gridln{stroke:var(--line);stroke-dasharray:none;opacity:.45}
  .premium-fcurve .zero{stroke:var(--muted-faint);stroke-dasharray:3 5;opacity:.65}
  .premium-fcurve .line{stroke-width:2.25;vector-effect:non-scaling-stroke}
  .premium-fcurve .area,.premium-fcurve .low{opacity:1;transition:none}
  .premium-fcurve .low{fill:var(--brand);stroke:var(--card);stroke-width:2}
  .premium-fcurve .low.neg{fill:var(--danger)}
  .premium-fcurve .lbl,.fc-y-label{font:400 11px Geist,sans-serif;fill:var(--muted);font-variant-numeric:tabular-nums}
  .fc-interaction{position:absolute;inset:0;cursor:crosshair;touch-action:pan-y;border-radius:6px}
  .fc-interaction:focus-visible{outline:2px solid var(--brand);outline-offset:4px}
  .fc-cursor{pointer-events:none}.fc-cursor line{stroke:var(--muted-faint);stroke-width:1;stroke-dasharray:3 4}
  .fc-cursor circle{fill:var(--brand);stroke:var(--card);stroke-width:3}.fc-cursor.negative circle{fill:var(--danger)}
  .fc-tooltip{position:absolute;pointer-events:none;z-index:2;background:var(--card);border:1px solid var(--line);border-radius:11px;padding:10px 13px;box-shadow:var(--shadow-md);white-space:nowrap}
  .fc-tooltip span{display:block;font-size:11px;color:var(--muted);margin-bottom:3px}
  .fc-tooltip strong{font-size:14px;font-weight:550;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
  .premium-fcurve .fcurve-cap{display:grid;gap:8px;margin-top:14px;border-top:1px solid var(--line);padding-top:14px;font-size:12px;line-height:1.6}
  .premium-fcurve .fcurve-cap i{width:6px;height:6px;border-radius:50%}
  @media(max-width:860px){.fc-plot{height:230px}.fc-hint{display:none}.fc-readout-value{font-size:26px}}
}
@media print{.fc-interaction,.fc-tooltip,.fc-hint{display:none!important}.fc-plot{height:auto}.fc-readout{margin-block:12px}}
@media screen{
  .dashboard-next table{table-layout:fixed;width:100%}
  .dashboard-next td.t-ar{width:80px;white-space:normal}
  .dashboard-next td.num{width:104px}
  .dashboard-next td.t-name{overflow-wrap:anywhere}
  @media(max-width:1180px){.dashboard-next td{padding-inline:6px}.dashboard-next td.t-ar{width:65px}.dashboard-next td.num{width:90px}}
}

@media print{.fc-cursor{display:none!important}.fc-y-label{font:400 11px Geist,sans-serif;fill:#626268}}
@media screen and (max-width:1180px){.dashboard-next td.t-ar{width:86px}}