/* =============== GLOBALS =============== */
*{margin:0;padding:0;box-sizing:border-box;}
:root{
  --accent:#89aaca;
  --accent-20:#89aaca33;
  --accent-35:#89aaca55;
  --accent-75:#89aacabf;
  --warning:#ff6b6b;
  --info:#4ecdc4;
}
html,body{height:100%;}
body{
  font-family:"Courier New",monospace;
  background:#202933;
  color:var(--accent);
  display:flex;
  flex-direction:column;
  overflow-x:hidden;
}

/* ===== Custom scrollbars (harmonised) ===== */
/* Chrome / Edge / Safari */
::-webkit-scrollbar{ width:8px; height:8px; }
::-webkit-scrollbar-track{ background:#2b3642; }          /* mörkt spår */
::-webkit-scrollbar-thumb{
  background:var(--accent-35);                            /* dämpat grönt */
  border-radius:4px;
}
::-webkit-scrollbar-thumb:hover{ background:var(--accent); }
/* Firefox */
*{ scrollbar-width:thin; scrollbar-color:var(--accent-35) #2b3642; }

/* =============== HEADER =============== */
.site-header{
  position:relative;
  padding:0.6rem 1rem;
  background:#1a222b;
  border-bottom:1px solid #555;
  font-size:1.1rem;
  font-weight:bold;
  letter-spacing:0.08em;
  text-align:left;
  display:flex;
  justify-content:space-between;
  align-items:center;
  z-index:1100;
}


.site-header button,
.site-header a.button{
  flex:0 0 auto;
  width:auto;
  margin-left:auto;
  font-size:0.9rem;
  font-weight:normal;
  letter-spacing:normal;
}

/* Optional container for right-aligned header items */
.header-right{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:20px;
}

.current-user {
  color: #888;
  font-size: 0.8rem;
  font-weight: normal;
  margin-left: 1rem;
  margin-right: auto;
}

.current-user .username {
  color: #fff;
}

/* Ensure settings icon matches menu button height */
.header-right .tool-icon {
  width: 32px;
  height: 32px;
  display: block;
}

.favorite-button {
  width: 32px;
  height: 32px;
  background: #303b49;
  border: none;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.favorite-button.active {
  background: #39495e;
}

.favorite-button img {
  width: 32px;
  height: 32px;
  display: block;
}

/* Keep settings icon aligned with menu button */
#openProjectSettings {
  display: flex;
  align-items: center;
  height: 32px;
}

/* View toggle buttons over the map */
.view-buttons{
  display:flex;
  gap:5px;
}
.view-buttons button{
  padding:0;
  width:32px;
  height:32px;
  background:#303b49;
  border:none;
  margin:0;
}
.view-buttons button:hover,
.view-buttons button.active{
  background:#39495e;
}
.view-buttons button img{
  width:32px;
  height:32px;
  display:block;
}

/* Simple dropdown menu used in the header */
.dropdown{position:relative;margin-left:auto;}
.dropdown-toggle{
  background:#2b3642;
  color:#fff;
  border:none;
  padding:0;
  cursor:pointer;
  font-size:0.9rem;
  width:32px;
  height:32px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.dropdown-toggle img {
  width:32px;
  height:32px;
  display:block;
}
.dropdown-content{display:none;position:absolute;right:0;top:100%;background:#1a222b;border:1px solid #ccc;min-width:200px;z-index:1000;}
.dropdown-content a{display:block;padding:0.5rem 0.75rem;color:#fff;text-decoration:none;border-bottom:1px solid #555;font-size:0.9rem;font-weight:normal;white-space:nowrap;}
.dropdown-content a:last-child{border-bottom:none;}
.dropdown-content a:hover{background:#2b3642;}
.dropdown:hover .dropdown-content{display:block;}

/* =============== LAYOUT =============== */
.layout-wrapper{flex:1;display:flex;min-height:0;}
.col{display:flex;flex-direction:column;gap:1rem;padding:1rem;overflow-y:auto;border-right:1px solid #555;}
.col-left{width:320px;}
.col-map{
  flex:1 1 auto;
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  padding:0;
  overflow-y:hidden;
}
.col-right{width:320px;border-right:none;border-left:1px solid #555;}

/* Login page columns */
.login-col{
  width:320px;
  border-right:none;
  padding-right:2rem;
}
.info-col{
  width:600px;
  border-right:none;
  padding-left:2rem;
}

/* Nudge login page columns so divider sits center screen */
@media (min-width: 1000px) {
  .login-layout {
    transform: translateX(140px);
  }
}

/* =============== FORM ELEMENTS =============== */
input,textarea,select{
  font-family:inherit;font-size:0.9rem;
  background:#2b3642;color:#8cbff4;
  border:1px solid #555;padding:0.5rem;width:100%;
}
input[type="checkbox"]{accent-color:orange;}

textarea.masked-key {
  -webkit-text-security: disc;
  text-security: disc;
}

/* Login and register forms use the same styling as other inputs */
#loginForm input,
#usernameForm input,
#detailsForm input{
  background:#2b3642;
  color:#8cbff4;
  margin-bottom:10px;
}
#usernameForm,
#detailsForm{
  margin-bottom:10px;
}
#loginForm input::placeholder,
#usernameForm input::placeholder,
#detailsForm input::placeholder{
  color:#888;
}
button{
  font-family:inherit;
  font-size:0.9rem;
  background:#303b49;
  color:#fff;
  border:1px solid var(--accent);
  padding:0.5rem;
  cursor:pointer;
  transition:background 0.2s;
}
a.button{
  font-family:inherit;
  font-size:0.9rem;
  background:#303b49;
  color:#fff;
  border:1px solid var(--accent);
  padding:0.5rem;
  text-decoration:none;
  cursor:pointer;
  transition:background 0.2s;
  display:inline-block;
}
label{font-size:0.8rem;text-transform:uppercase;margin-top:0.8rem;letter-spacing:0.05em;}
label.compact-label{
  display:block;
  margin-top:0.05rem;
  margin-bottom:0.1rem;
  line-height:1;
}
#projectName{
  margin-top:0;
}
.heatmap-color-row{display:flex;gap:1.5rem;margin-top:0.8rem;align-items:center;}
.heatmap-color-row .color-field{flex:1;display:flex;flex-direction:column;gap:0.3rem;}
.heatmap-color-row .color-field label{margin-top:0;}
.heatmap-color-btn{
  width:24px;
  height:24px;
  padding:0;
  border-radius:50%;
  border:2px solid rgba(255,255,255,0.35);
  background:#0024ff;
  box-shadow:0 0 4px rgba(0,0,0,0.45);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  font-size:0;
  transition:transform 0.15s ease, box-shadow 0.15s ease;
}
.heatmap-color-btn:hover{
  transform:translateY(-1px);
  box-shadow:0 8px 18px rgba(0,0,0,0.55);
}
.heatmap-color-btn:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}
.heatmap-color-popover{
  min-width:240px;
}
/* Light gray labels in create form */
#tab-create label{
  color:#ccc;
}

/* White heading for create form */
#tab-create h2{
  color:#fff;
  text-transform:uppercase;
}
button:hover{background:#39495e;}
a.button:hover{background:#39495e;}
button.secondary{border-color:#666;color:#aaa;}
button.secondary:hover{background:#444;}
small.hint{display:block;color:#7a8794;font-size:0.75rem;margin-top:0.3rem;}

/* Add spacing between form blocks in the create tab */
#pointForm input,
#pointForm textarea,
#pointForm select,
#pointForm .file-drop-zone,
#pointForm button.secondary{
  margin-bottom:10px;
}

/* Reduce space between label and drop zone */
#pointForm .file-drop-zone{
  margin-top:0;
}

input.flatpickr-input[readonly]{
  background:#2b3642;
  color:var(--accent);
  border:1px solid #555;
}

/* =============== TABS =============== */
.tab-container{border-bottom:1px solid #555;margin-bottom:1rem;}
.tab-buttons{display:flex;}
.tab-btn{
  background:#2b3642;border:1px solid #555;
  border-bottom:none;padding:0.5rem 1rem;
  cursor:pointer;font-size:0.8rem;
  border-radius:4px 4px 0 0;
}
.tab-btn.active{
  /* Match hover colour for active tabs */
  background:#39495e;
  border-color:var(--accent);
  color:#fff;
}
.tab-content{display:none;}
.tab-content.active{display:block;}

/* =============== MAP & CONTROLS =============== */
#map{
  flex:1 1 auto;width:100%;height:100%;
  z-index:1;
}

/* Mapbox navigation control – move to top-left and style to match UI */
.mapboxgl-ctrl-top-left .mapboxgl-ctrl{
  margin:10px 0 0 10px;
}
.mapboxgl-ctrl-group{
  background:rgba(0,0,0,0.55);
  border:1px solid var(--accent-35);
  box-shadow:none;
}
.mapboxgl-ctrl-group button{
  background:transparent;
}
.mapboxgl-ctrl-group button + button{
  border-top:1px solid var(--accent-35);
}
.mapboxgl-ctrl-group button:hover{
  background:rgba(0,0,0,0.7);
}
/* Make control icons light for dark UI */
.mapboxgl-ctrl button span{
  filter: invert(1) brightness(1.2);
}

#timeline{
  flex:0 0 auto;
  width:100%;
  height:auto;
  max-height:100%;
  margin-top:30px;
  position:relative;
  touch-action:none;
  overflow-x:hidden;
  overflow-y:auto;
}

#timelineNav{
  width:100%;
  height:60px;
  margin-top:20px;
  margin-bottom:20px;
  position:relative;
  touch-action:none;
  overflow:hidden;
}

#timelineNav .selection{
  stroke:orange;
  stroke-width:2px;
  fill:none;
}

.tl-tooltip{
  position:absolute;
  pointer-events:none;
  background:rgba(0,0,0,0.8);
  color:#fff;
  padding:4px 6px;
  border-radius:4px;
  border:1px solid var(--accent);
  font-size:0.75rem;
  z-index:1000;
}

.tl-popup{
  position:absolute;
  background:rgba(0,0,0,0.8);
  color:#fff;
  padding:3px 5px;
  border:1px solid var(--accent);
  border-radius:4px;
  font-size:0.8rem;
  white-space:nowrap;
  pointer-events:none;
  z-index:1000;
}

.tl-line{
  position:absolute;
  width:1px;
  background:var(--accent);
  opacity:0.6;
  pointer-events:none;
  z-index:900;
}

.tl-cat-label{
  position:absolute;
  left:6px;
  font-size:0.75rem;
  color:#fff;
  padding:2px 4px;
  background:rgba(0,0,0,0.6);
  border-radius:4px;
  pointer-events:none;
  z-index:1000;
}

.x-axis-top text,
.x-axis-bottom text{
  fill:#fff;
  font-size:0.75rem;
}
.x-axis-top path, .x-axis-top line,
.x-axis-bottom path, .x-axis-bottom line{
  stroke:var(--accent);
}

.x-axis-bottom{
  transition:opacity 0.3s;
}

/* Slightly desaturate and dim base tiles for clarity */
#map .leaflet-tile{
  filter:grayscale(0.55) brightness(0.75);
}

/* Make heatmap colours pop a bit more */
.leaflet-heatmap-layer{
  opacity:var(--heatmap-opacity,0.8);
  filter:saturate(2);
}

.map-controls{
  position:absolute;
  top:15px;
  right:15px;
  display:flex;
  flex-direction:column;
  gap:10px;
  z-index:1000;
}
.map-controls .view-buttons{
  align-self:flex-end;
}


.control-group{
  background:rgba(0,0,0,0.8);
  padding:8px;
  border:1px solid #808080;
  border-radius:6px;
}

.control-group h4{
  font-size:0.7rem;
  margin-bottom:6px;
  color:#ccc;
  font-weight:normal;
  text-transform:uppercase;
}

.filter-buttons{display:flex;gap:4px;}
.filter-buttons button{
  padding:4px 8px;font-size:0.75rem;
  background:#303b49;
  color:#fff;
  border:1px solid var(--accent);
  margin:0;
}
.filter-buttons button:hover{
  background:#39495e;
}
.filter-buttons .active{
  background:#617288;
  border-color:var(--accent);
}

.view-toggles{display:flex;flex-direction:column;gap:4px;}
.view-toggles button{
  padding:4px 8px;font-size:0.75rem;
  margin:0;
}

/* Leaflet zoom controls */
.leaflet-control-zoom{
  border:1px solid var(--accent);
  border-radius:6px;
  overflow:hidden;
  background:rgba(0,0,0,0.8);
  box-shadow:none;
}
.leaflet-control-zoom a{
  background:#2b3642;
  color:var(--accent);
  width:26px;height:26px;line-height:26px;
  border-bottom:1px solid var(--accent-35);
}
.leaflet-control-zoom a:last-child{border-bottom:none;}
.leaflet-control-zoom a:hover{background:var(--accent-20);}

/* =============== IMPORT SECTION =============== */
.import-section{
  border:1px solid #555;padding:0.8rem;background:#1a222b;
  border-radius:4px;margin-top:1rem;
}

.file-drop-zone{
  border:2px dashed #666;
  padding:1rem;
  text-align:center;
  background:#2b3642;
  cursor:pointer;
  transition:all 0.3s;
  margin:0.5rem 0;
  position:relative;
}
.file-drop-zone:hover{border-color:var(--accent);background:var(--accent-20);}
.file-drop-zone.dragover{border-color:var(--accent);background:var(--accent-35);}

.file-info{
  font-size:0.8rem;
  color:#aaa;
  pointer-events:none;
}

.remove-file-btn{
  position:absolute;
  top:4px;
  right:4px;
  background:none;
  border:none;
  color:#aaa;
  cursor:pointer;
  font-size:1rem;
  line-height:1;
}
.remove-file-btn:hover{color:var(--warning);}

.progress-bar{
  width:100%;height:4px;background:#333;
  border-radius:2px;overflow:hidden;margin:0.5rem 0;
}
.progress-fill{
  height:100%;background:var(--accent);
  width:0%;transition:width 0.3s;
}

/* =============== IMPORTED FILES =============== */
.imported-files{
  border:1px solid #555;
  padding:0.8rem;
  background:#1a222b;
  border-radius:4px;
  margin-top:1rem;
}
#importedFileList{
  margin-top:0.5rem;
}
.import-file-item{
  display:flex;
  justify-content:space-between;
  align-items:center;
  background:#2b3642;
  border:1px solid #555;
  padding:0.4rem;
  border-radius:3px;
  margin-bottom:0.3rem;
}
.import-file-item button{
  margin:0;
  font-size:0.7rem;
  padding:2px 6px;
  background:#33404d;
  color:var(--accent);
  border:1px solid var(--accent-35);
}

/* =============== PROJECT SETTINGS =============== */
.category-item{
  display:flex;
  align-items:center;
  gap:0.5rem;
  margin-bottom:0.5rem;
}
.category-item input{flex:1;}
.category-item input[type="color"] {
  -webkit-appearance: none;
          appearance: none;
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  border-radius: 50%;
  cursor: pointer;
}
.category-item input[type="color"]::-webkit-color-swatch-wrapper {
  padding: 0;
}
.category-item input[type="color"]::-webkit-color-swatch {
  border: none;
  border-radius: 50%;
}
.category-item button:not(.category-color-btn){
  margin:0;
  font-size:0.7rem;
  padding:2px 6px;
  background:#33404d;
  color:var(--accent);
  border:1px solid var(--accent-35);
}
.category-count{
  font-size:0.8rem;
  color:var(--accent-75);
}
.category-color-btn{
  width:24px;
  height:24px;
  border-radius:50%;
  border:2px solid #fff;
  box-shadow:0 0 4px rgba(0,0,0,0.4);
  padding:0;
  background:#7cd992;
  cursor:pointer;
  flex:0 0 24px;
}
.category-color-btn:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}
.category-popover{
  position:absolute;
  background:#202933;
  border:1px solid #555;
  border-radius:8px;
  padding:0.8rem;
  box-shadow:0 12px 28px rgba(0,0,0,0.55);
  display:flex;
  flex-direction:column;
  gap:0.6rem;
  z-index:1400;
  min-width:220px;
}
.category-color-preview{
  width:100%;
  height:40px;
  border-radius:6px;
  border:1px solid #4a5664;
  background:#2b3642;
}
.category-slider-group{
  display:flex;
  flex-direction:column;
  gap:0.2rem;
}
.category-control-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:0.75rem;
  color:#a9c6e1;
  text-transform:uppercase;
  letter-spacing:0.05em;
}
.category-control-value{
  font-size:0.8rem;
  color:#ffffff;
}
.slider-wrap--compact{
  margin-top:0.2rem;
}
.slider-no-fill{
  background-size:100% 100% !important;
}

/* Heatmap scale slider */
.slider-wrap{
  position:relative;
  width:100%;
  overflow:hidden;
}
.slider-wrap input[type="range"]{
  -webkit-appearance:none;
          appearance:none;
  width:100%;
  height:6px;
  background:#2b3742;
  border:1px solid #5e5d5d;
  border-radius:3px;
  cursor:pointer;
  outline:none;
  background-image:linear-gradient(orange,orange);
  background-repeat:no-repeat;
  background-size:0% 100%;
}
.slider-wrap input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:14px;height:14px;
  background:transparent;
  border:none;
}
.slider-wrap input[type="range"]::-moz-range-thumb{
  width:14px;height:14px;
  background:transparent;
  border:none;
}
.slider-marker{
  position:absolute;
  top:-6px;
  bottom:-2px;
  width:2px;
  background:orange;
  pointer-events:none;
  transform:translateX(-50%);
}

/* Collaborator management */
.collaboration-section{
  margin-top:1rem;
  padding-top:0.75rem;
  border-top:1px solid #333b46;
}
.collaborator-copy{
  margin:0.25rem 0 0;
  font-size:0.88rem;
  color:#9eb5d2;
}
.role-hints{
  display:flex;
  flex-direction:column;
  gap:0.25rem;
  margin:0.6rem 0 0.75rem;
  font-size:0.8rem;
  color:#b6c7dd;
}
.role-hints strong{color:#fff;}
.collaborator-status{
  display:none;
  margin-bottom:1rem;
  padding:0.6rem 0.8rem;
  border-radius:6px;
  font-size:0.85rem;
  border:1px solid transparent;
}
.collaborator-status--info{
  background:rgba(54,86,126,0.35);
  border-color:rgba(98,147,201,0.5);
  color:#d2e4ff;
}
.collaborator-status--success{
  background:rgba(45,107,73,0.35);
  border-color:rgba(105,177,140,0.6);
  color:#d9f8e4;
}
.collaborator-status--error{
  background:rgba(122,56,56,0.35);
  border-color:rgba(200,100,100,0.6);
  color:#f6d8d8;
}
.collaborator-layout{
  align-items:stretch;
  gap:1rem;
  margin-top:0.75rem;
  flex-wrap:wrap;
}
.collaborator-layout .collaborator-col{
  padding:0;
  border-right:none;
  overflow:visible;
  gap:0.6rem;
  max-width:100%;
}
.collaborator-layout .collaborator-col h4{
  margin:0 0 0.35rem;
}
.collaborator-layout .vertical-divider{
  display:none;
}
.collaborator-list{
  display:flex;
  flex-direction:column;
  gap:0.35rem;
  width:100%;
}
.collaborator-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:0.65rem;
  background:#1b2734;
  border:1px solid #2b3a4b;
  border-radius:6px;
  padding:0.45rem 0.65rem;
  transition:opacity 0.2s ease;
  width:100%;
  box-sizing:border-box;
}
.collaborator-row.is-pending{
  opacity:0.55;
  pointer-events:none;
}
.collaborator-row--pending{
  border-color:#396046;
  background:#24392d;
}
.collaborator-main{
  flex:1;
  display:flex;
  flex-direction:column;
  gap:0.15rem;
}
.collaborator-name-line{
  display:flex;
  align-items:center;
  gap:0.35rem;
  line-height:1.1;
}
.collaborator-name{
  font-size:0.92rem;
  font-weight:600;
  letter-spacing:0.01em;
}
.collaborator-main .collaborator-handle{
  font-size:0.78rem;
  color:#8cbff4;
}
.collaborator-name-line .collaborator-handle::before{
  content:'• ';
  color:rgba(140,191,244,0.7);
}
.collaborator-meta{
  font-size:0.72rem;
  color:#90a3bc;
  margin-top:0.1rem;
}
.collaborator-actions{
  display:flex;
  align-items:center;
  gap:0.45rem;
  flex-shrink:0;
}
.collaborator-actions .collaborator-badge{
  margin-right:0.15rem;
}
.collaborator-actions .collaborator-role{
  width:auto;
  min-width:0;
}
.collaborator-badge{
  padding:0.25rem 0.55rem;
  border-radius:4px;
  font-size:0.7rem;
  letter-spacing:0.04em;
  text-transform:uppercase;
  font-weight:600;
  background:#2a3b4f;
  color:#cdd8e6;
}
.collaborator-badge--pending{
  background:#2d5036;
  color:#c5f3d6;
}
.collaborator-actions select{
  width:auto;
  min-width:0;
}
.collaborator-actions button{
  white-space:nowrap;
}
.collaborator-empty{
  font-size:0.85rem;
  color:#8394aa;
}
.collaborator-invite-note{
  margin:0 0 0.6rem;
  font-size:0.78rem;
  color:#94aac6;
}
@media (min-width: 900px){
  .collaborator-layout{
    flex-wrap:nowrap;
  }
  .collaborator-layout .collaborator-col{
    max-width:360px;
  }
  .collaborator-layout .vertical-divider{
    display:block;
    border-left:1px solid #555;
  }
}

/* Generic color picker */
.color-picker{
  -webkit-appearance:none;
          appearance:none;
  width:24px;
  height:24px;
  padding:0;
  border:none;
  border-radius:50%;
  cursor:pointer;
}
.color-picker::-webkit-color-swatch-wrapper{padding:0;}
.color-picker::-webkit-color-swatch{border:none;border-radius:50%;}

/* Share project toggle */
.toggle-switch{
  display:flex;
  align-items:center;
  gap:0.5rem;
  margin-top:0.5rem;
}
.toggle-switch input{display:none;}
.toggle-switch .slider{
  position:relative;
  width:40px;height:20px;
  background:#555;
  border-radius:10px;
  transition:background 0.2s;
}
.toggle-switch .slider::before{
  content:'';
  position:absolute;
  top:2px;left:2px;
  width:16px;height:16px;
  background:#222;
  border-radius:50%;
  transition:transform 0.2s;
}
.toggle-switch input:checked + .slider{background:orange;}
.toggle-switch input:checked + .slider::before{transform:translateX(20px);}
.toggle-switch .toggle-label{
  font-size:0.8rem;
  text-transform:uppercase;
  letter-spacing:0.05em;
}

/* Style for share link */
#shareLink a{color:orange;font-weight:bold;}

/* Share project popup */
.modal-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.6);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:1000;
}
.modal{
  background:#2b3642;
  border:1px solid var(--accent);
  padding:1rem;
  border-radius:4px;
  width:300px;
}
.modal input,
.modal textarea{
  width:100%;
  margin-top:0.25rem;
  margin-bottom:0.5rem;
}
.modal-actions button{
  margin:0;
}

/* =============== LISTA & KORT =============== */
.point-item{
  border:1px solid #555;padding:0.5rem;background:#2b3642;
  margin-bottom:0.5rem;border-radius:4px;
}
.point-item:hover{
  border-color:#ff9900;
  cursor:pointer;
}
.point-item h4{font-size:0.9rem;}
.point-item .metadata{
  font-size:0.75rem;color:#888;margin:0.2rem 0;
}
.thumb{max-width:100%;margin-top:4px;border:1px solid #555;border-radius:2px;}

/* Image inside map popup */
.popup-thumb{display:block;width:100%;max-width:100%;box-sizing:border-box;margin-top:4px;border:1px solid #555;border-radius:2px;transition:border-color 0.2s;}
.popup-thumb:hover{border-color:#ff9900;cursor:pointer;}

.point-actions{
  display:flex;gap:6px;margin-top:4px;
}
.point-actions button{
  margin:0;font-size:0.7rem;padding:2px 6px;
  background:#303b49;
  color:#fff;
  border:1px solid var(--accent);
}
.point-actions button:hover{
  background:#39495e;
}

.point-actions .pdf-btn{
  margin-left:auto;
  height:1.1rem;
  cursor:pointer;
  display:block;
}

/* =============== FLASH-MEDDELANDE =============== */
#flash{
  position:absolute;bottom:15px;left:50%;transform:translateX(-50%);
  background:rgba(0,0,0,0.85);color:var(--accent);
  padding:6px 12px;border:1px solid var(--accent);border-radius:4px;
  font-size:0.8rem;opacity:0;transition:opacity 0.4s;pointer-events:none;z-index:1001;
}

.flash.error{color:var(--warning);border-color:var(--warning);}
.flash.success{color:var(--info);border-color:var(--info);}

/* =============== IMAGE VIEWER OVERLAY =============== */
.image-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1100;
}


.viewer-content {
  background: #2b3642;
  border: 1px solid var(--accent);
  padding: 1rem;
  /* ensure content starts below the close button with 10px space */
  padding-top: calc(0.5rem + 32px + 10px);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 90%;
  max-height: 90%;
  overflow: auto;
}

.viewer-content img {
  max-width: 100%;
  height: auto;
}

#viewerPdf {
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
}

#viewerPdf canvas {
  width: 100%;
  height: auto;
  display: block;
}

#viewerImg {
  border-radius: 4px;
}

#closeViewer {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

#closeViewer img {
  width: 32px;
  height: 32px;
}



/* =============== STATS & INFO =============== */
.coord-box,.db-info,.stats-box{
  border:1px solid #555;padding:0.5rem;background:#1a222b;
  font-size:0.85rem;border-radius:4px;
}
.project-summary{
  margin-bottom:1rem;
}

.stats-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:0.5rem;
  margin-top:0.5rem;
}

.stat-item{
  text-align:center;padding:0.3rem;
  background:#2b3642;border:1px solid #555;border-radius:2px;
}

.stat-value{font-size:1.1rem;font-weight:bold;color:var(--accent);}
.stat-label{font-size:0.7rem;color:#888;text-transform:uppercase;}

/* Database statistics panel */
.col-right .stats-box,
.col-right .stat-value,
.col-right .stat-label{
  color:#fff;
}

.stats-box h4{
  font-size:0.7rem;
  margin-bottom:6px;
  color:#ccc;
  font-weight:normal;
  text-transform:uppercase;
}

/* =============== CLUSTER STYLES =============== */
.marker-cluster-small,
.marker-cluster-medium,
.marker-cluster-large{
  background:none;
}

.marker-cluster div{
  width:30px;
  height:30px;
  margin-left:5px;
  margin-top:5px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:15px;
  border:1.5px solid orange;
  background:rgba(0,0,0,0.5);
  color: orange;
  font-family:inherit;
  font-size:1rem;
  font-weight:bold;
}
.marker-cluster span{
  line-height:1;
}

/* =============== POP-UP DARK THEME =============== */
.leaflet-popup-content-wrapper,
.leaflet-popup-tip{
  background:#2d3641;
  color:#888;
  border:1px solid var(--accent-35);
  font-family:inherit;
  border-radius:10px;
  /* ~20% stronger drop shadow */
  box-shadow:0 12px 29px rgba(0,0,0,0.54);
}
.leaflet-popup-content{margin:0; padding:8px 12px; box-sizing:border-box;}

/* Subtle halo/glow around map popups for better separation */
.leaflet-container .leaflet-popup,
.mapboxgl-popup{
  /* soft ambient glow + deeper shadow */
  /* ~20% stronger glow and blur */
  filter: drop-shadow(0 0 12px rgba(137,170,202,0.42)) drop-shadow(0 7px 24px rgba(0,0,0,0.66));
}

/* Mapbox GL popup – match Leaflet dark theme */
.mapboxgl-popup-content,
.mapboxgl-popup-tip{
  background:#2d3641;
  color:#888;
  border:1px solid var(--accent-35);
  font-family:"Courier New", monospace !important;
}
.mapboxgl-popup-content{
  margin:0;
  padding:8px 12px;
  box-sizing:border-box;
  border-radius:10px;
  /* ~20% stronger drop shadow */
  box-shadow:0 12px 29px rgba(0,0,0,0.54);
  width: 275px;
}
.mapboxgl-popup{
  /* fixed width trial */
  max-width: 275px;
}
/* Ensure all popup descendants inherit the same font */
.mapboxgl-popup-content *{ font-family:"Courier New", monospace !important; }
.leaflet-popup-content{ font-family: inherit !important; }
.leaflet-popup-content *{ font-family: inherit !important; }
/* Close button tone to match theme */
.mapboxgl-popup-close-button{
  color:#ccc;
  font-size:18px;
  line-height:18px;
}

/* Reduce line spacing in popups by ~20% */
.mapboxgl-popup-content,
.leaflet-popup-content{
  line-height: 1.2;
}
.mapboxgl-popup-content p,
.leaflet-popup-content p{
  line-height: 1.2;
}

/* Fixed width for Leaflet popup content */
.leaflet-popup-content{ width: 275px; }

/* =============== FLATPICKR OVERRIDES =============== */
.flatpickr-calendar{
  background:#2b3742;
  color:var(--accent);
  border:1px solid var(--accent);
  font-size:0.9rem; /* slightly smaller calendar */
}
.flatpickr-months,.flatpickr-weekdays{background:#2b3742;}
.flatpickr-months,
.flatpickr-weekdays,
.flatpickr-weekday,
.flatpickr-current-month{
  color:var(--accent);
}
.flatpickr-day{color:var(--accent);background:none;border:1px solid transparent;}
.flatpickr-day:hover,.flatpickr-day:focus,.flatpickr-day.selected,.flatpickr-day.today,.flatpickr-day.startRange,.flatpickr-day.endRange,.flatpickr-day.inRange{background:none;border:1px solid var(--accent);}

/* make navigation arrows and time inputs accent coloured */
.flatpickr-months .flatpickr-prev-month svg,
.flatpickr-months .flatpickr-next-month svg{
  fill:var(--accent);
}
.flatpickr-time input,
.flatpickr-time .flatpickr-am-pm{
  color:var(--accent);
  opacity:1; /* ensure visible without hover */
}
.flatpickr-time .numInputWrapper span.arrowUp,
.flatpickr-time .numInputWrapper span.arrowDown{
  border-color:var(--accent);
}

/* =============== RESPONSIVE =============== */
@media (max-width: 1200px) {
  .col-left, .col-right { width: 280px; }
}
@media (max-width: 1000px) {
  .layout-wrapper { flex-direction: column-reverse; }
  .col { width: 100%; max-height: 300px; }
  .col-map { flex: 1; max-height: none; }
}

/* Links created from AI analysis referring to points */
.point-link {
  text-decoration: underline;
  cursor: pointer;
}

/* ======== LOGIN PAGE THEME ======== */
body.login-page {
  color: #d0d0d0;
}

body.login-page a {
  color: #d0d0d0;
}

body.login-page input,
body.login-page textarea,
body.login-page select {
  color: #d0d0d0;
}

body.login-page button,
body.login-page a.button {
  background: #303b49;
  border: 1px solid var(--accent);
  color: #fff;
}

/* Ensure menu button on login page matches other pages */
body.login-page .dropdown-toggle {
  border: none;
  padding: 0;
}

body.login-page button:hover,
body.login-page button:active,
body.login-page a.button:hover,
body.login-page a.button:active {
  background: #39495e;
}

body.login-page .vertical-divider {
  background: #617288;
}

/* ======== PROJECTS PAGE THEME ======== */
body.projects-page {
  color: #d0d0d0;
}

body.projects-page a {
  color: #d0d0d0;
}

body.projects-page input,
body.projects-page textarea,
body.projects-page select {
  color: #d0d0d0;
}

body.projects-page button,
body.projects-page a.button {
  background: #303b49;
  border: 1px solid var(--accent);
  color: #fff;
}

body.projects-page button:hover,
body.projects-page button:active,
body.projects-page a.button:hover,
body.projects-page a.button:active {
  background: #39495e;
}

body.projects-page .vertical-divider {
  background: orange;
}

/* Style for the sign-up link on the login page */
#signup-link {
  color: orange;
  font-weight: bold;
}

/* Style for the login link on the signup page */
#login-link {
  color: orange;
  font-weight: bold;
}

/* Shared projects page */
.project-item a {
  color: orange;
  text-decoration: none;
}
a.project-item {
  color: orange;
  text-decoration: none;
  font-weight: bold;
}
.project-item h3 {
  font-size: 1.1rem;
  margin-bottom: 0.25rem;
}
.project-creator {
  color: #aaa;
  font-size: 0.85rem;
}
.project-item {
  display: flex;
  flex-direction: column;
}

.project-item.ranked {
  flex-direction: row;
  align-items: flex-start;
}

.project-rank {
  font-size: 2.25rem;
  line-height: 2.25rem;
  font-weight: bold;
  margin-right: 0.5rem;
  color: #6f6f75;
}

.project-info {
  display: flex;
  flex-direction: column;
}
.project-desc {
  font-size: 0.9rem;
  color: #ccc;
  margin-top: 0.25rem;
}
.project-tags {
  margin-top: 0.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}
.project-tags .tag {
  background: #72767d;
  color: #fff;
  font-size: 0.75rem;
  padding: 0 0.4rem;
  border-radius: 4px;
}
.shared-layout {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  align-items: center;
}
/* Default search box style */
#searchBox,
#pointSearchBox {
  width: 100%;
  max-width: 300px;
  border-radius: 12px;
  height: 36px;
}
/* Wider search field on the shared list page */
.shared-layout #searchBox {
  flex: 1;
  max-width: none;
}
.shared-layout .search-container {
  width: 100%;
}

.search-container {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  justify-content: flex-end;
}

/* Spacing for point list view */
#tab-view h2 {
  margin-bottom: 0.25rem;
}
.project-title {
  color: orange;
  margin-bottom: 0.25rem;
  font-size: 1.2rem;
}
.project-meta {
  color: #aaa;
  font-size: 0.7rem;
  margin-bottom: 20px;
}

#tab-view .search-container {
  margin-bottom: 10px;
}
.search-categories {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.5rem;
}
.search-categories button {
  background: none;
  border: none;
  color: #aaa;
  cursor: pointer;
  padding: 0;
  font-size: 0.9rem;
}
.search-categories .active {
  color: #fff;
}

.search-icon {
  width: 36px;
  height: 36px;
}


.tool-icon {
  width: 20px;
  height: 20px;
  cursor: pointer;
}

.tools-cell {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  justify-content: center;
}

/* featured list items should flow as part of the parent grid */
.featured-row {
  display: contents;
}

.featured-section {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  width: 100%;
  max-width: 1200px;
  background: #252e38; /* 15% darker than previous */
  border-radius: 12px;
  padding: 1rem;
  min-height: 16rem;
  align-items: stretch;
}

/* subtle 3D look for top and bottom rows */
.top-row,
.bottom-row {
  position: relative;
  z-index: 0; /* create stacking context for gradient */
}
.top-row::before,
.bottom-row::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: -1; /* place gradient behind content */
  /* soften the gradient so dark tones vary less than 15% */
  background: linear-gradient(to bottom,
      rgba(255,255,255,0.039) 0%,
      rgba(0,0,0,0.039) 100%);
  background-repeat: no-repeat;
  background-size: 100% 33%;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.5),
              inset 0 -1px 0 rgba(0,0,0,0.5);
}

/* empty placeholder section at bottom of shared list */
.bottom-placeholder {
  min-height: 200px;
}

/* layout for placeholder section */
.featured-section.bottom-placeholder {
  grid-template-columns: 3fr 2fr;
}

/* wider text area and styling for bottom section */
.bottom-left {
  color: #aaaaaa;
}

.bottom-left h2 {
  margin-bottom: 20px;
}

.bottom-left p {
  margin-bottom: 0;
}

.bottom-right {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.bmc-qr {
  width: auto;
  height: 128px;
  margin-right: 20px;
  margin-top: -10px;
}


.featured-info {
  width: 100%;
}

/* individual project blocks within the featured section */
.featured-section .project-item {
  background: #20272f;
  border-radius: 8px;
  padding: 0.75rem;
  height: 100%;
}

/* make featured titles and description white */
.featured-info h2,
.featured-info p {
  color: #fff;
}

/* make trending and category titles white */
.three-column h2 {
  color: #fff;
}
.three-column {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  width: 100%;
  max-width: 1200px;
}
.three-column .column {
  max-width: none;
}
.project-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 5px;
}

/* full-width favorites section using project list style */
.favorites-section {
  width: 100%;
  max-width: 1200px;
}
.favorites-section h2 {
  color: #fff;
}

/* Divider between columns on landing page */
.vertical-divider {
  width: 1px;
  height: 200px;
  background: var(--accent);
  margin: 0 2rem;
  flex: 0 0 auto;
}

/* ================= Project Settings Layout ================= */
body.project-settings-page{
  background:#202933; /* match projects.html gray */
}

.project-settings-page .settings-layout{
  max-width:1180px;
  margin:3rem auto 4rem;
  padding:0 2.5rem;
  display:flex;
  align-items:flex-start;
  gap:2.75rem;
}

.project-settings-page .settings-column{
  display:flex;
  flex-direction:column;
}

.project-settings-page .settings-column--left{
  flex:1 1 600px;
  max-width:640px;
}

.project-settings-page .settings-column--left h2{
  margin:0;
}

.project-settings-page .settings-divider{
  width:1px;
  align-self:stretch;
  background:rgba(118,148,201,0.35);
}

.project-settings-page .settings-column--right{
  flex:1 1 600px;
  max-width:640px;
}

.project-settings-page .form-field{
  margin-top:1rem;
  display:flex;
  flex-direction:column;
  gap:0.1rem;
}

.project-settings-page .settings-group{
  margin-top:1.9rem;
}

.project-settings-page .settings-group h3{
  margin:0 0 0.8rem;
}

.project-settings-page .category-list{
  margin-top:0.3rem;
  margin-bottom:1.1rem;
}

.project-settings-page .share-link{margin-top:0.5rem;}

.project-settings-page .settings-actions{
  margin-top:2.2rem;
  display:flex;
  gap:0.75rem;
  flex-wrap:wrap;
}

.project-settings-page .settings-actions button{min-width:150px;}

.project-settings-page .settings-column--right .collaboration-section{
  margin-top:0;
  padding-top:0;
  border-top:none;
}

.project-settings-page .collaborator-section{
  margin-top:1.8rem;
  padding-top:1.1rem;
  border-top:1px solid rgba(120,150,194,0.25);
}

.project-settings-page .collaborator-section:first-of-type{
  margin-top:1.3rem;
  padding-top:0;
  border-top:none;
}

.project-settings-page .collaborator-section h4{margin:0 0 0.5rem;}

@media (max-width:1080px){
  .project-settings-page .settings-layout{
    flex-direction:column;
    gap:2rem;
  }
  .project-settings-page .settings-divider{display:none;}
  .project-settings-page .settings-column--left,
  .project-settings-page .settings-column--right{
    max-width:100%;
    flex:1 1 auto;
  }
}

/* =============== ADMIN TABLE =============== */
#userTable {
  width: 100%;
  margin-top: 0.5rem;
  border-collapse: collapse;
}
#userTable th {
  background: #2b3642;
}
#userTable th,
#userTable td {
  border: 1px solid #555;
  padding: 6px 8px;
  text-align: left;
}
#userTable tbody tr:nth-child(even) {
  background: #1a222b;
}
#userTable tbody tr:hover {
  background: #34414d;
}
#userTable tbody tr.selected {
  background: inherit;
  color: var(--accent);
  outline: 2px solid orange;
  outline-offset: -2px;
}
#userTable tbody tr.selected td {
  border-color: #555; /* keep dividers default color */
}

/* wider cells in admin table for better readability */
#userTable th:nth-child(3),
#userTable td:nth-child(3),
#userTable th:nth-child(4),
#userTable td:nth-child(4) {
  min-width: 120px; /* First and Last Name */
}

#userTable th:nth-child(7),
#userTable td:nth-child(7) {
  min-width: 160px; /* Ban Until */
}

#userTable th:nth-child(8),
#userTable td:nth-child(8) {
  min-width: 130px; /* Tools */
}

/* =============== PROJECTS TABLE =============== */
#projectTable {
  width: 100%;
  margin-top: 0.5rem;
  border-collapse: collapse;
}
#projectTable th {
  background: #2b3642;
}
#projectTable th,
#projectTable td {
  border: 1px solid #555;
  padding: 6px 8px;
  text-align: left;
}
#projectTable tbody tr:nth-child(even) {
  background: #1a222b;
}
#projectTable tbody tr:hover {
  background: #34414d;
}

#projectTable th:nth-child(5),
#projectTable td:nth-child(5) {
  min-width: 90px;
  text-align: center;
}

button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
/* (Removed cursor reticle overlay styles) */

/* Compass meters overlay */
#compassMeters {
  position: absolute;
  z-index: 3; /* above map canvas, below popups is fine */
  pointer-events: none;
  padding: 2px 6px;
  background: rgba(0,0,0,0.55);
  color: #fff;
  font-size: 12px;
  line-height: 1.2;
  border-radius: 4px;
  border: 1px solid rgba(255,255,255,0.25);
  transform: translate(8px, -23px);
}

/* DOM compass fallback/alternative */
#compassOverlay {
  position: absolute;
  width: 200px;
  height: 200px;
  pointer-events: none;
  z-index: 4; /* above label */
  transform: translate(-50%, -50%) rotate(0deg);
  transform-origin: 50% 50%;
  opacity: 0.95;
  image-rendering: auto;
  transform-style: preserve-3d;
}