/* Map */
.map-view { height:100vh; position:relative; overflow:hidden; }
.map      { height:100vh; width:100%; }

/* Ingress */
.ingress {
  position:absolute; top:20px; left:20px;
  z-index:900;
  background:rgba(237,237,237,.75);
  padding:15px;
  border-radius:8px;
  max-width:500px;
  box-shadow:0 4px 6px rgba(0,0,0,.1);
}
.ingress__toggle   { background:none; border:0; position:absolute; top:10px; left:10px; font-size:18px; font-weight:700; cursor:pointer; }
.ingress__title    { text-align:center; font-size:48px; font-weight:700; margin:0; }
.ingress__subtitle { text-align:center; margin:0; font-size:16px; font-weight:700; }
.ingress__heading  { text-align:center; font-size:20px; margin:10px 0; }
.ingress__body p   { font-size:14px; margin-top:10px; }

/* Embedded / fullscreen mode ingress notice */
.ingress__embed-notice {
  display:flex; align-items:center; justify-content:center;
  padding:0;
}
.ingress:has(.ingress__embed-notice) {
  padding:10px 15px;
}
.ingress__embed-link {
  font-size:15px; font-weight:600;
  color:#1a1a1a; text-decoration:underline; cursor:pointer;
  display:inline-flex; align-items:center; gap:6px;
}
.ingress__embed-link:hover { color:#004a99; }

/* Calendar Filter (Genomförda / Alla / Kommande) */
.calendar-filter { display:flex; justify-content:center; margin-bottom:10px; }
.calendar-filter__slider {
  display:flex; background:#eee; border:1px solid #ccc;
  border-radius:999px; overflow:hidden;
}
.filter-toggle-btn {
  background:transparent; border:0; padding:6px 16px;
  font-size:14px; cursor:pointer; user-select:none;
  color:#444; transition:background .2s, color .2s;
  -webkit-tap-highlight-color:transparent;
}
.filter-toggle-btn.active { background:#007bff !important; color:#fff !important; border-radius:20px; }
.filter-toggle-btn:focus,
.filter-toggle-btn:active,
.filter-toggle-btn:focus-visible { outline:none !important; }

/* Calendar Items */
#calendarList {
  max-height: calc(100vh - 300px);
  overflow-y: auto;
  padding-right: 8px;
}
#calendarList::-webkit-scrollbar {
  width: 8px;
}
#calendarList::-webkit-scrollbar-track {
  background: transparent;
}
#calendarList::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 4px;
}
#calendarList::-webkit-scrollbar-thumb:hover {
  background: #999;
}

.calendar-item {
  display:flex; align-items:center; gap:15px;
  background:#fff; padding:14px !important;
  border-radius:12px; margin-bottom:12px;
  box-shadow:0 2px 4px rgba(0,0,0,.1);
}
.calendar-item__meta { flex:1; min-width:0; }
.calendar-item__title { font-size:16px; display:flex; gap:6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.calendar-item__time  { font-size:14px; color:gray; }
.calendar-item__edit { font-size:18px; color:#007bff; text-decoration:none; padding:6px; cursor:pointer; }

/* No calendar in public mode */
body:not([data-mode="admin"]) #calendarAdminBlock { display:none !important; }

/* Draft badge */
.smn-draft-badge {
  background:#C2841A; color:#fff; padding:2px 6px;
  font-size:11px; font-weight:600; border-radius:4px;
  display:inline-block; margin-left:8px;
}

/* Floating Buttons (reset, filter-toggle, etc.) */
.fixed-buttons {
  position:fixed; bottom:20px; right:20px;
  display:flex; flex-direction:column; gap:10px; z-index:9999;
  align-items:flex-end;
}

/* Collapsible button wrapper */
.smn-btn-collapsible {
  display:flex; flex-direction:row; align-items:center; gap:0;
  position:relative;
}
.smn-btn-collapsible .btn {
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  transition:width 0.3s ease, padding 0.3s ease, font-size 0.3s ease;
  width:44px; height:44px; padding:0 !important;
  border-radius:5px;
  font-size:14px;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
/* Keep button expanded when in add mode */
.smn-btn-collapsible .btn[data-add-mode="true"] {
  width:auto !important;
  padding:12px 15px !important;
  position:relative !important;
}
.smn-btn-collapsible .btn-icon {
  width:44px; height:44px;
  display:flex; align-items:center; justify-content:center;
  padding:0 !important;
  border-radius:5px;
  position:absolute; left:0;
  font-size:20px;
  color:#fff;
  transition:display 0.3s ease;
}
.smn-btn-collapsible:hover .btn,
.smn-btn-collapsible .btn:focus {
  width:auto; padding:12px 15px !important;
  border-radius:5px;
  position:relative;
}
.smn-btn-collapsible:hover .btn-icon,
.smn-btn-collapsible .btn:focus ~ .btn-icon,
.smn-btn-collapsible .btn[data-add-mode="true"] ~ .btn-icon {
  display:none;
}
.btn {
  padding:12px 15px; border:0; border-radius:5px;
  color:#fff !important; cursor:pointer; user-select:none;
  box-shadow:0 4px 6px rgba(0,0,0,.1);
  -webkit-tap-highlight-color:transparent;
}
.btn--icon   { width:44px; height:44px; display:flex; align-items:center; justify-content:center; background:#6c757d; }
.btn--info   { background:#17a2b8 !important; }
.btn--primary{ background:#007bff !important; }
.btn--muted  { background:#6c757d !important; }
.btn--small  { padding:6px 10px; font-size:12px; background:#007bff !important; } 

.btn:focus,
.btn:active,
.btn:focus-visible { outline:none !important; color:#fff !important; }

/* “Visa/Göm filterknappar”-knappen */
.smn-filter-toggle,
.smn-filter-toggle:focus,
.smn-filter-toggle:active,
.smn-filter-toggle:hover { color:#fff !important; }

/* Tag Filter Panel */
.tag-filter {
  position:fixed; bottom:20px; left:50%; transform:translateX(-50%);
  display:flex; flex-wrap:nowrap; gap:8px; justify-content:center;
  background:rgba(255,255,255,0.9);
  padding:10px 15px;
  border-radius:12px;
  box-shadow:0 4px 8px rgba(0,0,0,.15);
  display:flex; flex-wrap:wrap; gap:8px; justify-content:center;
  width:max-content;
  max-width:calc(100vw - 90px);
  z-index:1500;
  transition:opacity .25s ease, transform .25s ease, bottom .25s ease;
}
.tag-filter.hidden {
  opacity:0; pointer-events:none;
  transform:translateX(-50%) translateY(20px);
}
.tag-filter.lifted { bottom:90px !important; }

/* Tag help ? button */
.smn-tag-help-btn {
  width:35px; height:35px;
  border-radius:50%;
  background:#686868;
  color:#fff;
  font-size:18px; font-weight:700; font-style:normal;
  font-family: Georgia, 'Times New Roman', serif;
  border:none; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  padding:0; flex-shrink:0;
  align-self:center;
}
.smn-tag-help-btn:hover { background:#222; }

/* Tag help modal */
.smn-tag-help-modal {
  position:fixed; inset:0;
  z-index:9000;
  display:flex; align-items:center; justify-content:center;
}
.smn-tag-help-modal[hidden] { display:none; }
.smn-tag-help-backdrop {
  position:absolute; inset:0;
  background:rgba(0,0,0,0.45);
}
.smn-tag-help-box {
  position:relative;
  background:#fff;
  border-radius:10px;
  padding:28px 24px 20px;
  max-width:360px; width:90%;
  box-shadow:0 8px 32px rgba(0,0,0,0.25);
  z-index:1;
  max-height:80vh; overflow-y:auto;
}
.smn-tag-help-title {
  font-size:18px; font-weight:700;
  margin:0 0 18px; color:#111;
}
.smn-tag-help-entry {
  display:flex; gap:12px; align-items:flex-start;
  margin-bottom:14px;
}
.smn-tag-help-entry:last-child { margin-bottom:0; }
.smn-tag-help-color-dot {
  width:13px; height:13px;
  border-radius:50%; flex-shrink:0;
  margin-top:3px;
}
.smn-tag-help-entry-name {
  display:block; font-size:14px; font-weight:700; color:#111;
  margin-bottom:2px;
}
.smn-tag-help-entry-text {
  font-size:14px; color:#444; line-height:1.5; margin:0;
}
.smn-tag-help-close {
  position:absolute; top:10px; right:13px;
  background:none; border:none;
  font-size:30px; cursor:pointer; color:#555; padding:0;
  line-height:1;
}
.smn-tag-help-close:hover { color:#111; }

/* Tag pills */
.smn-tag {
  display:inline-block; padding:5px 10px;
  border-radius:5px; font-size:12px; font-weight:600;
  color:#fff !important; white-space:nowrap;
  margin:2px 4px 2px 0;
}
.smn-tag[data-tag="Kompetensutveckling"]{ background:#D9480F; }
.smn-tag[data-tag="Synlighet"]         { background:#0B63A5; }
.smn-tag[data-tag="Forskningssamverkan"]{ background:#1B5E20; }
.smn-tag[data-tag="Studentsamverkan"] { background:#C2841A; }

/* Marker Highlight on Tag Filter Hover */
.leaflet-marker-icon.smn-marker-highlight {
  transform: scale(1.6);
  filter: drop-shadow(0 10px 16px rgba(0,0,0,0.55)) brightness(1.15);
  transition: transform 0.12s ease, filter 0.12s ease;
  z-index: 9999 !important;
}

.smn-circle-highlight {
  stroke-width: 4 !important;
  opacity: 1 !important;
  filter: drop-shadow(0 10px 16px rgba(0,0,0,0.5));
}

/* Popup Form Styles */
.smn-popup-form {
  position: relative;
  padding-top: 0;
}

.smn-popup-form input[type="text"],
.smn-popup-form input[type="number"],
.smn-popup-form input[type="datetime-local"],
.smn-popup-form textarea {
  width: 200px;
  margin-bottom: 5px;
}

.smn-popup-form textarea {
  height: 60px;
}

.smn-popup-form #tagContainer {
  margin-top: 5px;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.smn-popup-form #saveButton {
  margin-top: 5px;
  padding: 5px;
  background: #007bff;
  color: #fff;
  border: 0;
  border-radius: 3px;
  cursor: pointer;
}

.smn-popup-form .tag-button {
  color: #fff;
  border: 0;
  padding: 5px 10px;
  border-radius: 5px;
  cursor: pointer;
  opacity: 0.5; /* Default opacity */
}

/* Tag colors using data attributes */
.smn-popup-form .tag-button[data-color="#D9480F"] { background-color: #D9480F; }
.smn-popup-form .tag-button[data-color="#0B63A5"] { background-color: #0B63A5; }
.smn-popup-form .tag-button[data-color="#1B5E20"] { background-color: #1B5E20; }
.smn-popup-form .tag-button[data-color="#C2841A"] { background-color: #C2841A; }

.smn-popup-form .tag-button.selected {
  opacity: 1 !important;
}

.smn-popup-form .smn-edit-link {
  display: inline-block;
  margin-top: 8px;
}

/* Desktop default */
.smn-popup .leaflet-popup-content-wrapper {
  padding:0 !important; border-radius:12px !important;
  background:#fff !important;
  box-shadow:0 4px 14px rgba(0,0,0,.2) !important;
  max-width:340px !important;
}
.smn-popup .leaflet-popup-content {
  margin:0 !important; padding:15px !important;
  width:340px !important; max-width:340px !important;
}

/* Wide popups (with images) */
.smn-popup-has-images .leaflet-popup-content-wrapper { max-width:600px !important; }
.smn-popup-has-images .leaflet-popup-content         { max-width:560px !important; }

/* ---------- Mobile popups ---------- */
@media (max-width:600px) {
  .smn-popup .leaflet-popup-content-wrapper,
  .smn-popup-has-images .leaflet-popup-content-wrapper {
    width:90vw !important;
    max-width:90vw !important;
    margin:0 auto !important;
  }
  .smn-popup .leaflet-popup-content,
  .smn-popup-has-images .leaflet-popup-content {
    width:88vw !important;
    max-width:88vw !important;
    padding:12px !important;
  }
  .smn-carousel {
    width:88vw !important;
    max-width:88vw !important;
  }
}

/* Extra small phones */
@media (max-width:400px) {
  .smn-popup .leaflet-popup-content-wrapper,
  .smn-popup-has-images .leaflet-popup-content-wrapper {
    width:96vw !important;
    max-width:96vw !important;
  }
  .smn-popup .leaflet-popup-content,
  .smn-popup-has-images .leaflet-popup-content {
    width:94vw !important;
    max-width:94vw !important;
  }
  .smn-carousel {
    width:94vw !important;
    max-width:94vw !important;
  }
}

/* Ensure Leaflet popups render above the ingress overlay */
.leaflet-popup-pane,
.leaflet-popup,
.smn-popup .leaflet-popup-content-wrapper,
.smn-popup .leaflet-popup-tip {
  z-index: 2000 !important;
}

/* Carousel */
.smn-carousel {
  width:100%; max-width:560px; margin:0 auto 12px;
  overflow:hidden; position:relative; border-radius:8px;
}
.smn-carousel-inner { width:100%; }
.smn-slide { display:none; }
.smn-slide.active { display:block; }
.smn-slide img { width:100%; height:auto; border-radius:8px; }

.smn-prev, .smn-next {
  position:absolute; top:50%; transform:translateY(-50%);
  background:rgba(0,0,0,.45); color:#fff; border:0;
  padding:8px 12px; border-radius:50%; cursor:pointer;
  z-index:10;
}
.smn-prev { left:10px; }
.smn-next { right:10px; }

/* Carousel buttons on small screens */
@media(max-width:480px){
  .smn-prev, .smn-next { padding:6px 10px; }
}

/* Ingress */
.ingress {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 1100;
  background: rgba(237, 237, 237, .75);
  padding: 15px;
  border-radius: 8px;
  max-width: 500px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, .1);
  transition: opacity .2s ease;
}

/* Används när popup är öppen */
.ingress--hidden {
  opacity: 0;
  pointer-events: none;
}