:root{
  --bg: #ffffff;
  --card: #ffffff;
  --muted: #4c3a46;
  --accent: #97246B; /* Påverkans-lila */
  --accent-light: #C9A9C1;
  --success: #408064; /* Klimat-grön */
  --success-light: #B3CCC1;
  --stroke: #ffffff;
  --border: #ffffff;
  --highlight: #F8AE4D; /* Läger-gul */
  --highlight-light: #ffffff;
  --danger: #FF0017; /* Örn-röd */
  --danger-light: #ffe0e3;
  --glass: rgba(151,36,107,0.08);
  --white: #ffffff;
  --black: #000000;
  --uo-map-active: var(--success);
  --uo-map-inactive: var(--success-light);
  --uo-map-hover: var(--highlight);
  --uo-district-fill: var(--accent-light);
  --uo-district-hover: var(--accent);
  --uo-map-stroke-width: 1.2px;
  --uo-font-heading: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  --uo-font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  --uo-font-small: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  --uo-font-size-heading: 26px;
  --uo-font-size-body: 15px;
  --uo-font-size-small: 14px;
}

/* Container */
#uo-karta-container{width:100%;max-width:1300px;margin:0 auto;font-family:var(--uo-font-body);font-size:var(--uo-font-size-body);color:var(--muted);position:relative;padding:12px 8px;background:transparent}
#uokarta-map-wrapper{position:relative;border-radius:0;background:transparent;border:none;overflow:hidden;padding:0;min-height:var(--uo-map-height, clamp(480px,70vh,960px));box-shadow:none}
#uokarta-map-wrapper svg{width:100%;height:auto;display:block;border-radius:0;background:transparent;max-height:var(--uo-map-max-height, clamp(520px,90vh,1200px));margin:0 auto}

/* Simple responsive layout */
#uo-karta-container.uo-detail,
#uo-karta-container.uo-has-sidebar{position:relative}
#uo-karta-container.uo-split-layout,
#uo-karta-container.uo-has-sidebar{
  display:grid;
  grid-template-columns:minmax(420px, 1.6fr) minmax(320px, 1fr);
  grid-template-rows:auto 1fr;
  column-gap:40px;
  row-gap:20px;
  align-items:start;
}
#uo-karta-container.uo-split-layout #uokarta-map-wrapper,
#uo-karta-container.uo-has-sidebar #uokarta-map-wrapper{min-height:var(--uo-map-height, clamp(520px,70vh,960px));grid-column:1;grid-row:2;align-self:start}
#uo-karta-container.uo-split-layout #uokarta-map-wrapper svg,
#uo-karta-container.uo-has-sidebar #uokarta-map-wrapper svg{max-height:none}
#uo-karta-container.uo-split-layout #uokarta-map-wrapper svg.uo-map-kommun,
#uo-karta-container.uo-has-sidebar #uokarta-map-wrapper svg.uo-map-kommun{height:100%;width:100%}
#uo-karta-container.uo-split-layout #infobox,
#uo-karta-container.uo-split-layout .uo-infobox,
#uo-karta-container.uo-has-sidebar #infobox,
#uo-karta-container.uo-has-sidebar .uo-infobox{grid-column:2;grid-row:2;align-self:start;justify-self:start;width:100%;max-width:500px;max-height:none;overflow:visible;z-index:5;margin:0;background:transparent;border:none;border-radius:0;padding:0;box-shadow:none}
#uo-karta-container:not(.uo-detail) .uo-district-heading{display:none}
#uo-karta-container[data-lock="1"] #uokarta-map-wrapper{min-height:0}
#uo-karta-container[data-lock="1"] #uokarta-map-wrapper svg.uo-map-kommun{height:auto !important}

@media(max-width:767px){
  #uo-karta-container.uo-split-layout,
  #uo-karta-container.uo-has-sidebar{display:block}
  #uo-karta-container.uo-split-layout #infobox,
  #uo-karta-container.uo-split-layout .uo-infobox,
  #uo-karta-container.uo-has-sidebar #infobox,
  #uo-karta-container.uo-has-sidebar .uo-infobox{margin-top:16px}
  #uo-karta-container.uo-split-layout #uokarta-map-wrapper,
  #uo-karta-container.uo-has-sidebar #uokarta-map-wrapper{grid-column:auto;grid-row:auto}
}

/* map shapes */
.uoka-map-border{stroke:#ffffff}
#uokarta-map-wrapper svg path,
#uokarta-map-wrapper svg polygon{transition:fill .18s ease,opacity .18s ease;stroke:var(--stroke);stroke-width:var(--uo-map-stroke-width,1.2px);stroke-linejoin:round;cursor:pointer;vector-effect:non-scaling-stroke}
#uokarta-map-wrapper svg path:hover,
#uokarta-map-wrapper svg polygon:hover{opacity:1}
.uo-district-shape{fill:var(--uo-district-fill);stroke:var(--stroke);stroke-width:var(--uo-map-stroke-width,1.2px);transition:fill .18s ease,opacity .18s ease}
.uo-district-shape:hover{fill:var(--uo-district-hover);stroke:var(--stroke);opacity:1}

/* active state */
.uo-active{fill:var(--uo-map-active) !important;stroke:var(--stroke) !important}
.uo-inactive{fill:var(--uo-map-inactive) !important;opacity:1;stroke:var(--stroke) !important}
.uo-hover,
.uo-selected{fill:var(--uo-map-hover) !important;stroke:var(--stroke) !important;opacity:1 !important}
.uo-map-district .uo-active{fill:var(--accent) !important;stroke:var(--stroke);stroke-width:var(--uo-map-stroke-width,1.2px)}

/* Tooltip */
#uokarta-tooltip{position:fixed;display:none;background:var(--accent);color:#fff;padding:8px 10px;border-radius:8px;font-family:var(--uo-font-small);font-size:var(--uo-font-size-small);z-index:99999;pointer-events:none;box-shadow:0 8px 20px rgba(151,36,107,.25);opacity:0;transition:opacity .12s ease,transform .12s ease;transform:translate3d(0,0,0)}
#uokarta-tooltip[data-visible="1"]{opacity:1}

/* Infobox */
#infobox,
.uo-infobox{background:transparent !important;padding:0 !important;border-radius:0 !important;border:none !important;box-shadow:none !important;color:var(--muted);font-family:var(--uo-font-body);font-size:var(--uo-font-size-body);line-height:1.45}
#infobox h3,
.uo-infobox h3{margin:0 0 8px;font-family:var(--uo-font-heading);font-size:var(--uo-font-size-heading);color:var(--muted);font-weight:700}
#infobox p,
.uo-infobox p{margin:0 0 10px;font-size:var(--uo-font-size-body)}
#infobox .uo-infobox-top,
.uo-infobox .uo-infobox-top{margin-bottom:10px}
#infobox .uo-back-to-district,
.uo-infobox .uo-back-to-district{background:transparent;border:0;padding:0;cursor:pointer;text-decoration:underline;font:inherit;color:var(--muted)}
#infobox .uo-infobox-extra,
.uo-infobox .uo-infobox-extra{margin:12px 0 0;padding-left:18px;color:var(--muted);}
#infobox .uo-infobox-extra li,
.uo-infobox .uo-infobox-extra li{margin-bottom:4px;}
#infobox .uo-avdelningar,
.uo-infobox .uo-avdelningar{margin-top:12px;color:var(--muted);}
#infobox .uo-avd-cards,
.uo-infobox .uo-avd-cards{display:flex;flex-direction:column;gap:8px;margin-top:10px}
#infobox .uo-avd-card,
.uo-infobox .uo-avd-card{border:1px solid rgba(151,36,107,0.18);background:rgba(151,36,107,0.06);color:var(--muted);text-align:left;cursor:pointer;padding:10px 12px;border-radius:12px;box-shadow:0 6px 16px rgba(0,0,0,0.06);transition:transform .12s ease,box-shadow .12s ease;font-family:var(--uo-font-body) !important;font-size:var(--uo-font-size-body) !important;line-height:1.35}
#infobox .uo-avd-card:hover,
.uo-infobox .uo-avd-card:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(0,0,0,0.08)}
#infobox .uo-avd-card strong,
.uo-infobox .uo-avd-card strong{display:block;font-family:var(--uo-font-heading);font-size:1.1em;color:var(--accent);margin-bottom:4px}
#infobox .uo-avd-card span,
.uo-infobox .uo-avd-card span{font-family:var(--uo-font-small) !important;font-size:var(--uo-font-size-small) !important;color:var(--muted);opacity:0.85}
#infobox .uo-avdelningar .uo-avd-contact,
.uo-infobox .uo-avdelningar .uo-avd-contact{font-family:var(--uo-font-small);font-size:var(--uo-font-size-small);color:var(--success);margin-top:2px}
#infobox .uo-avdelningar .uo-avd-notes,
.uo-infobox .uo-avdelningar .uo-avd-notes{font-family:var(--uo-font-small);font-size:var(--uo-font-size-small);color:var(--muted);margin-top:4px}
#infobox .uo-social-links,#infobox .uo-avd-social-links,
.uo-infobox .uo-social-links,.uo-infobox .uo-avd-social-links{margin-top:10px}
#infobox .uo-social-links ul,#infobox .uo-avd-social-links ul,
.uo-infobox .uo-social-links ul,.uo-infobox .uo-avd-social-links ul,
.uo-info-modal-body .uo-social-links ul,.uo-info-modal-body .uo-avd-social-links ul{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
#infobox .uo-social-links li,#infobox .uo-avd-social-links li,
.uo-infobox .uo-social-links li,.uo-infobox .uo-avd-social-links li,
.uo-info-modal-body .uo-social-links li,.uo-info-modal-body .uo-avd-social-links li{margin-bottom:4px;font-family:var(--uo-font-small);font-size:var(--uo-font-size-small)}
#infobox .uo-social-links a,#infobox .uo-avd-social-links a,
.uo-infobox .uo-social-links a,.uo-infobox .uo-avd-social-links a,
.uo-info-modal-body .uo-social-links a,.uo-info-modal-body .uo-avd-social-links a{display:inline-flex;align-items:center;gap:6px;background:var(--accent);color:#fff;text-decoration:none;font-weight:600;padding:8px 12px;border-radius:999px;box-shadow:0 6px 14px rgba(151,36,107,0.2);transition:transform .12s ease,box-shadow .12s ease}
#infobox .uo-social-links a:hover,#infobox .uo-avd-social-links a:hover,
.uo-infobox .uo-social-links a:hover,.uo-infobox .uo-avd-social-links a:hover,
.uo-info-modal-body .uo-social-links a:hover,.uo-info-modal-body .uo-avd-social-links a:hover{transform:translateY(-1px);box-shadow:0 8px 18px rgba(151,36,107,0.25)}

.uo-info-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.45);display:flex;align-items:center;justify-content:center;z-index:9999}
.uo-info-modal-overlay.uo-hidden{display:none}
.uo-info-modal{background:#fff;border-radius:14px;max-width:520px;width:100%;padding:20px;box-shadow:0 20px 60px rgba(0,0,0,0.25)}
.uo-info-modal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.uo-info-modal-head h3{margin:0;font-family:var(--uo-font-heading);font-size:1.3em;color:var(--accent)}
.uo-info-modal-close{background:none;border:none;font-size:24px;line-height:1;color:var(--muted);cursor:pointer}
.uo-info-modal-body p{margin:0 0 10px;font-family:var(--uo-font-body);font-size:var(--uo-font-size-body);color:var(--muted)}
.uo-info-modal-body strong{color:var(--accent)}
.uo-info-modal-body .uo-avd-status{display:inline-block;padding:6px 10px;border-radius:999px;background:rgba(64,128,100,0.12);color:var(--success);font-family:var(--uo-font-small);font-weight:700;border:1px solid rgba(64,128,100,0.35);margin-bottom:8px;font-size:var(--uo-font-size-small)}

/* Floating controls */
.uo-controls{position:absolute;right:14px;top:14px;display:flex;flex-direction:column;gap:8px;z-index:120}
.uo-btn{background:rgba(151,36,107,0.12);border:1px solid rgba(151,36,107,0.3);color:var(--accent);padding:8px;border-radius:8px;width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;box-shadow:0 6px 16px rgba(151,36,107,0.15);cursor:pointer}
.uo-btn:hover{transform:translateY(-2px)}
.uo-control-group{display:flex;flex-direction:column;gap:8px}
.uo-filter-group{display:none}
.uo-email-inline{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:8px;border:1px solid rgba(64,128,100,0.4);background:rgba(64,128,100,0.12);color:var(--success);text-decoration:none;margin-top:8px}
.uo-email-inline:hover{text-decoration:none;filter:brightness(0.95)}
.uo-widget-card{border:1px solid #f1dcec;border-radius:14px;padding:16px;background:#fff7fb;max-width:340px;margin:10px auto;font-family:var(--uo-font-body);color:var(--muted);box-shadow:0 10px 24px rgba(151,36,107,0.15)}
.uo-widget-card h3{margin:0 0 6px;font-family:var(--uo-font-heading);font-size:1.33em;color:var(--accent)}
.uo-widget-card p{margin:0 0 10px;font-size:var(--uo-font-size-body)}
.uo-widget-card .uo-card-meta{font-family:var(--uo-font-small);font-size:var(--uo-font-size-small);opacity:0.8;margin-bottom:6px}
.uo-widget-card .uo-card-actions{display:flex;gap:8px;flex-wrap:wrap}
.uo-widget-card .uo-card-actions a{flex:1 1 140px;text-align:center;background:var(--accent);color:#fff;padding:8px 10px;border-radius:8px;text-decoration:none}

/* Loader */
.uo-map-loader{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,0.75);backdrop-filter: blur(3px);z-index:90}
.uo-spinner{width:36px;height:36px;border-radius:50%;border:4px solid rgba(101,189,211,0.25);border-top-color:var(--stroke);animation:spin .9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* Toast */
.uo-toast{position:fixed;right:20px;bottom:20px;background:var(--accent);color:#fff;padding:10px 14px;border-radius:10px;box-shadow:0 12px 40px rgba(151,36,107,.3);z-index:99999;opacity:0;transform:translateY(10px);transition:all .22s ease}
.uo-toast.show{opacity:1;transform:translateY(0)}

/* small helpers */
.uo-hidden{display:none !important}
#uo-karta-container:not(.uo-detail):not(.uo-has-sidebar) #infobox,
#uo-karta-container:not(.uo-detail):not(.uo-has-sidebar) .uo-infobox{display:none !important}
.uo-selected{stroke:var(--accent) !important;stroke-width:1.1 !important;filter:drop-shadow(0 0 6px rgba(151,36,107,0.35))}
#uo-karta-container.uo-detail .uo-district-heading{grid-column:1 / -1;font-family:var(--uo-font-heading);font-size:var(--uo-font-size-heading);font-weight:700;margin-bottom:8px;color:var(--accent)}
.uo-avd-browser{background:#fff;border:1px solid #f1dcec;border-radius:12px;padding:24px;margin:20px auto;max-width:1100px;box-shadow:0 18px 40px rgba(151,36,107,0.15)}
.uo-avd-browser h1{margin-top:0;font-family:var(--uo-font-heading);font-size:var(--uo-font-size-heading);color:var(--accent)}
.uo-avd-lead{margin:4px 0 14px;color:var(--muted);opacity:0.85;font-size:var(--uo-font-size-small)}
.uo-avd-search{width:100%;padding:10px 12px;border-radius:10px;border:1px solid #dcd4e0;margin:12px 0 20px;font-size:var(--uo-font-size-body)}
.uo-avd-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.uo-avd-card{border:1px solid #7c1d5a;border-radius:12px;padding:14px;background:var(--accent);color:#fff;text-align:left;cursor:pointer;transition:transform .15s,box-shadow .15s;width:100%;box-shadow:0 10px 22px rgba(151,36,107,0.25);font-family:var(--uo-font-body) !important;font-size:var(--uo-font-size-body) !important;line-height:1.35}
.uo-avd-card strong{display:block;font-family:var(--uo-font-heading);font-size:1.05em;color:#fff;margin-bottom:4px}
.uo-avd-card span{font-family:var(--uo-font-small) !important;font-size:var(--uo-font-size-small) !important;color:rgba(255,255,255,0.82);display:block}
.uo-avd-badge{display:none !important}
.uo-avd-meta{font-weight:600;color:rgba(255,255,255,0.9)}
.uo-avd-card:hover{transform:translateY(-3px);box-shadow:0 14px 28px rgba(151,36,107,0.32)}
.uo-avd-empty{text-align:center;margin-top:20px;font-family:var(--uo-font-small);font-size:var(--uo-font-size-small);color:var(--muted);opacity:0.8}

/* Extra CSS: centrera infobox-innehåll i eget block (t.ex. #uo-karta-info) */
#uo-karta-info,
#uo-karta-info.uo-infobox,
.uokarta-info-col .uo-infobox,
.uo-info-panel{
  display:flex !important;
  flex-direction:column;
  justify-content:center !important;
  align-items:flex-start !important;
  height:100%;
  min-height:var(--uo-map-height, clamp(480px,70vh,960px));
  padding:12px 8px;
}

/* Two-column wrapper for map + infobox */
.uo-two-col--map{
  display:grid;
  grid-template-columns:40% 60%;
  gap:24px;
  align-items:stretch;
}
@media (max-width:900px){
  .uo-two-col--map{
    grid-template-columns:1fr;
    gap:14px;
  }
  .uo-two-col--map #uo-karta-info{
    min-height:auto !important;
    padding:8px 0;
  }
  .uo-two-col--map #uo-karta-container{
    min-height:380px;
  }
}