/*
Trix 1.3.1
Copyright © 2020 Basecamp, LLC
http://trix-editor.org/*/
trix-editor {
  border: 1px solid #bbb;
  border-radius: 3px;
  margin: 0;
  padding: 0.4em 0.6em;
  min-height: 5em;
  outline: none; }
trix-toolbar * {
  box-sizing: border-box; }
trix-toolbar .trix-button-row {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  overflow-x: auto; }
trix-toolbar .trix-button-group {
  display: flex;
  margin-bottom: 10px;
  border: 1px solid #bbb;
  border-top-color: #ccc;
  border-bottom-color: #888;
  border-radius: 3px; }
  trix-toolbar .trix-button-group:not(:first-child) {
    margin-left: 1.5vw; }
    @media (max-device-width: 768px) {
      trix-toolbar .trix-button-group:not(:first-child) {
        margin-left: 0; } }
trix-toolbar .trix-button-group-spacer {
  flex-grow: 1; }
  @media (max-device-width: 768px) {
    trix-toolbar .trix-button-group-spacer {
      display: none; } }
trix-toolbar .trix-button {
  position: relative;
  float: left;
  color: rgba(0, 0, 0, 0.6);
  font-size: 0.75em;
  font-weight: 600;
  white-space: nowrap;
  padding: 0 0.5em;
  margin: 0;
  outline: none;
  border: none;
  border-bottom: 1px solid #ddd;
  border-radius: 0;
  background: transparent; }
  trix-toolbar .trix-button:not(:first-child) {
    border-left: 1px solid #ccc; }
  trix-toolbar .trix-button.trix-active {
    background: #cbeefa;
    color: black; }
  trix-toolbar .trix-button:not(:disabled) {
    cursor: pointer; }
  trix-toolbar .trix-button:disabled {
    color: rgba(0, 0, 0, 0.125); }
  @media (max-device-width: 768px) {
    trix-toolbar .trix-button {
      letter-spacing: -0.01em;
      padding: 0 0.3em; } }
trix-toolbar .trix-button--icon {
  font-size: inherit;
  width: 2.6em;
  height: 1.6em;
  max-width: calc(0.8em + 4vw);
  text-indent: -9999px; }
  @media (max-device-width: 768px) {
    trix-toolbar .trix-button--icon {
      height: 2em;
      max-width: calc(0.8em + 3.5vw); } }
  trix-toolbar .trix-button--icon::before {
    display: inline-block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0.6;
    content: "";
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain; }
    @media (max-device-width: 768px) {
      trix-toolbar .trix-button--icon::before {
        right: 6%;
        left: 6%; } }
  trix-toolbar .trix-button--icon.trix-active::before {
    opacity: 1; }
  trix-toolbar .trix-button--icon:disabled::before {
    opacity: 0.125; }
trix-toolbar .trix-button--icon-attach::before {
  background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M16.5%206v11.5a4%204%200%201%201-8%200V5a2.5%202.5%200%200%201%205%200v10.5a1%201%200%201%201-2%200V6H10v9.5a2.5%202.5%200%200%200%205%200V5a4%204%200%201%200-8%200v12.5a5.5%205.5%200%200%200%2011%200V6h-1.5z%22%2F%3E%3C%2Fsvg%3E);
  top: 8%;
  bottom: 4%; }
trix-toolbar .trix-button--icon-bold::before {
  background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M15.6%2011.8c1-.7%201.6-1.8%201.6-2.8a4%204%200%200%200-4-4H7v14h7c2.1%200%203.7-1.7%203.7-3.8%200-1.5-.8-2.8-2.1-3.4zM10%207.5h3a1.5%201.5%200%201%201%200%203h-3v-3zm3.5%209H10v-3h3.5a1.5%201.5%200%201%201%200%203z%22%2F%3E%3C%2Fsvg%3E); }
trix-toolbar .trix-button--icon-italic::before {
  background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M10%205v3h2.2l-3.4%208H6v3h8v-3h-2.2l3.4-8H18V5h-8z%22%2F%3E%3C%2Fsvg%3E); }
trix-toolbar .trix-button--icon-link::before {
  background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M9.88%2013.7a4.3%204.3%200%200%201%200-6.07l3.37-3.37a4.26%204.26%200%200%201%206.07%200%204.3%204.3%200%200%201%200%206.06l-1.96%201.72a.91.91%200%201%201-1.3-1.3l1.97-1.71a2.46%202.46%200%200%200-3.48-3.48l-3.38%203.37a2.46%202.46%200%200%200%200%203.48.91.91%200%201%201-1.3%201.3z%22%2F%3E%3Cpath%20d%3D%22M4.25%2019.46a4.3%204.3%200%200%201%200-6.07l1.93-1.9a.91.91%200%201%201%201.3%201.3l-1.93%201.9a2.46%202.46%200%200%200%203.48%203.48l3.37-3.38c.96-.96.96-2.52%200-3.48a.91.91%200%201%201%201.3-1.3%204.3%204.3%200%200%201%200%206.07l-3.38%203.38a4.26%204.26%200%200%201-6.07%200z%22%2F%3E%3C%2Fsvg%3E); }
trix-toolbar .trix-button--icon-strike::before {
  background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M12.73%2014l.28.14c.26.15.45.3.57.44.12.14.18.3.18.5%200%20.3-.15.56-.44.75-.3.2-.76.3-1.39.3A13.52%2013.52%200%200%201%207%2014.95v3.37a10.64%2010.64%200%200%200%204.84.88c1.26%200%202.35-.19%203.28-.56.93-.37%201.64-.9%202.14-1.57s.74-1.45.74-2.32c0-.26-.02-.51-.06-.75h-5.21zm-5.5-4c-.08-.34-.12-.7-.12-1.1%200-1.29.52-2.3%201.58-3.02%201.05-.72%202.5-1.08%204.34-1.08%201.62%200%203.28.34%204.97%201l-1.3%202.93c-1.47-.6-2.73-.9-3.8-.9-.55%200-.96.08-1.2.26-.26.17-.38.38-.38.64%200%20.27.16.52.48.74.17.12.53.3%201.05.53H7.23zM3%2013h18v-2H3v2z%22%2F%3E%3C%2Fsvg%3E); }
trix-toolbar .trix-button--icon-quote::before {
  background-image: url(data:image/svg+xml,%3Csvg%20version%3D%221%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M6%2017h3l2-4V7H5v6h3zm8%200h3l2-4V7h-6v6h3z%22%2F%3E%3C%2Fsvg%3E); }
trix-toolbar .trix-button--icon-heading-1::before {
  background-image: url(data:image/svg+xml,%3Csvg%20version%3D%221%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M12%209v3H9v7H6v-7H3V9h9zM8%204h14v3h-6v12h-3V7H8V4z%22%2F%3E%3C%2Fsvg%3E); }
trix-toolbar .trix-button--icon-code::before {
  background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M18.2%2012L15%2015.2l1.4%201.4L21%2012l-4.6-4.6L15%208.8l3.2%203.2zM5.8%2012L9%208.8%207.6%207.4%203%2012l4.6%204.6L9%2015.2%205.8%2012z%22%2F%3E%3C%2Fsvg%3E); }
trix-toolbar .trix-button--icon-bullet-list::before {
  background-image: url(data:image/svg+xml,%3Csvg%20version%3D%221%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M4%204a2%202%200%201%200%200%204%202%202%200%200%200%200-4zm0%206a2%202%200%201%200%200%204%202%202%200%200%200%200-4zm0%206a2%202%200%201%200%200%204%202%202%200%200%200%200-4zm4%203h14v-2H8v2zm0-6h14v-2H8v2zm0-8v2h14V5H8z%22%2F%3E%3C%2Fsvg%3E); }
trix-toolbar .trix-button--icon-number-list::before {
  background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M2%2017h2v.5H3v1h1v.5H2v1h3v-4H2v1zm1-9h1V4H2v1h1v3zm-1%203h1.8L2%2013.1v.9h3v-1H3.2L5%2010.9V10H2v1zm5-6v2h14V5H7zm0%2014h14v-2H7v2zm0-6h14v-2H7v2z%22%2F%3E%3C%2Fsvg%3E); }
trix-toolbar .trix-button--icon-undo::before {
  background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M12.5%208c-2.6%200-5%201-6.9%202.6L2%207v9h9l-3.6-3.6A8%208%200%200%201%2020%2016l2.4-.8a10.5%2010.5%200%200%200-10-7.2z%22%2F%3E%3C%2Fsvg%3E); }
trix-toolbar .trix-button--icon-redo::before {
  background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M18.4%2010.6a10.5%2010.5%200%200%200-16.9%204.6L4%2016a8%208%200%200%201%2012.7-3.6L13%2016h9V7l-3.6%203.6z%22%2F%3E%3C%2Fsvg%3E); }
trix-toolbar .trix-button--icon-decrease-nesting-level::before {
  background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M3%2019h19v-2H3v2zm7-6h12v-2H10v2zm-8.3-.3l2.8%202.9L6%2014.2%204%2012l2-2-1.4-1.5L1%2012l.7.7zM3%205v2h19V5H3z%22%2F%3E%3C%2Fsvg%3E); }
trix-toolbar .trix-button--icon-increase-nesting-level::before {
  background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M3%2019h19v-2H3v2zm7-6h12v-2H10v2zm-6.9-1L1%2014.2l1.4%201.4L6%2012l-.7-.7-2.8-2.8L1%209.9%203.1%2012zM3%205v2h19V5H3z%22%2F%3E%3C%2Fsvg%3E); }
trix-toolbar .trix-dialogs {
  position: relative; }
trix-toolbar .trix-dialog {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  font-size: 0.75em;
  padding: 15px 10px;
  background: #fff;
  box-shadow: 0 0.3em 1em #ccc;
  border-top: 2px solid #888;
  border-radius: 5px;
  z-index: 5; }
trix-toolbar .trix-input--dialog {
  font-size: inherit;
  font-weight: normal;
  padding: 0.5em 0.8em;
  margin: 0 10px 0 0;
  border-radius: 3px;
  border: 1px solid #bbb;
  background-color: #fff;
  box-shadow: none;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none; }
  trix-toolbar .trix-input--dialog.validate:invalid {
    box-shadow: #F00 0px 0px 1.5px 1px; }
trix-toolbar .trix-button--dialog {
  font-size: inherit;
  padding: 0.5em;
  border-bottom: none; }
trix-toolbar .trix-dialog--link {
  max-width: 600px; }
trix-toolbar .trix-dialog__link-fields {
  display: flex;
  align-items: baseline; }
  trix-toolbar .trix-dialog__link-fields .trix-input {
    flex: 1; }
  trix-toolbar .trix-dialog__link-fields .trix-button-group {
    flex: 0 0 content;
    margin: 0; }
trix-editor [data-trix-mutable]:not(.attachment__caption-editor) {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none; }

trix-editor [data-trix-mutable]::-moz-selection,
trix-editor [data-trix-cursor-target]::-moz-selection, trix-editor [data-trix-mutable] ::-moz-selection {
  background: none; }
trix-editor [data-trix-mutable]::selection,
trix-editor [data-trix-cursor-target]::selection, trix-editor [data-trix-mutable] ::selection {
  background: none; }

trix-editor [data-trix-mutable].attachment__caption-editor:focus::-moz-selection {
  background: highlight; }
trix-editor [data-trix-mutable].attachment__caption-editor:focus::selection {
  background: highlight; }

trix-editor [data-trix-mutable].attachment.attachment--file {
  box-shadow: 0 0 0 2px highlight;
  border-color: transparent; }
trix-editor [data-trix-mutable].attachment img {
  box-shadow: 0 0 0 2px highlight; }
trix-editor .attachment {
  position: relative; }
  trix-editor .attachment:hover {
    cursor: default; }
trix-editor .attachment--preview .attachment__caption:hover {
  cursor: text; }
trix-editor .attachment__progress {
  position: absolute;
  z-index: 1;
  height: 20px;
  top: calc(50% - 10px);
  left: 5%;
  width: 90%;
  opacity: 0.9;
  transition: opacity 200ms ease-in; }
  trix-editor .attachment__progress[value="100"] {
    opacity: 0; }
trix-editor .attachment__caption-editor {
  display: inline-block;
  width: 100%;
  margin: 0;
  padding: 0;
  font-size: inherit;
  font-family: inherit;
  line-height: inherit;
  color: inherit;
  text-align: center;
  vertical-align: top;
  border: none;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none; }
trix-editor .attachment__toolbar {
  position: absolute;
  z-index: 1;
  top: -0.9em;
  left: 0;
  width: 100%;
  text-align: center; }
trix-editor .trix-button-group {
  display: inline-flex; }
trix-editor .trix-button {
  position: relative;
  float: left;
  color: #666;
  white-space: nowrap;
  font-size: 80%;
  padding: 0 0.8em;
  margin: 0;
  outline: none;
  border: none;
  border-radius: 0;
  background: transparent; }
  trix-editor .trix-button:not(:first-child) {
    border-left: 1px solid #ccc; }
  trix-editor .trix-button.trix-active {
    background: #cbeefa; }
  trix-editor .trix-button:not(:disabled) {
    cursor: pointer; }
trix-editor .trix-button--remove {
  text-indent: -9999px;
  display: inline-block;
  padding: 0;
  outline: none;
  width: 1.8em;
  height: 1.8em;
  line-height: 1.8em;
  border-radius: 50%;
  background-color: #fff;
  border: 2px solid highlight;
  box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.25); }
  trix-editor .trix-button--remove::before {
    display: inline-block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0.7;
    content: "";
    background-image: url(data:image/svg+xml,%3Csvg%20height%3D%2224%22%20width%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M19%206.4L17.6%205%2012%2010.6%206.4%205%205%206.4l5.6%205.6L5%2017.6%206.4%2019l5.6-5.6%205.6%205.6%201.4-1.4-5.6-5.6z%22%2F%3E%3Cpath%20d%3D%22M0%200h24v24H0z%22%20fill%3D%22none%22%2F%3E%3C%2Fsvg%3E);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 90%; }
  trix-editor .trix-button--remove:hover {
    border-color: #333; }
    trix-editor .trix-button--remove:hover::before {
      opacity: 1; }
trix-editor .attachment__metadata-container {
  position: relative; }
trix-editor .attachment__metadata {
  position: absolute;
  left: 50%;
  top: 2em;
  transform: translate(-50%, 0);
  max-width: 90%;
  padding: 0.1em 0.6em;
  font-size: 0.8em;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.7);
  border-radius: 3px; }
  trix-editor .attachment__metadata .attachment__name {
    display: inline-block;
    max-width: 100%;
    vertical-align: bottom;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap; }
  trix-editor .attachment__metadata .attachment__size {
    margin-left: 0.2em;
    white-space: nowrap; }
@charset "UTF-8";
.trix-content {
  line-height: 1.5; }
  .trix-content * {
    box-sizing: border-box;
    margin: 0;
    padding: 0; }
  .trix-content h1 {
    font-size: 1.2em;
    line-height: 1.2; }
  .trix-content blockquote {
    border: 0 solid #ccc;
    border-left-width: 0.3em;
    margin-left: 0.3em;
    padding-left: 0.6em; }
  .trix-content [dir=rtl] blockquote,
  .trix-content blockquote[dir=rtl] {
    border-width: 0;
    border-right-width: 0.3em;
    margin-right: 0.3em;
    padding-right: 0.6em; }
  .trix-content li {
    margin-left: 1em; }
  .trix-content [dir=rtl] li {
    margin-right: 1em; }
  .trix-content pre {
    display: inline-block;
    width: 100%;
    vertical-align: top;
    font-family: monospace;
    font-size: 0.9em;
    padding: 0.5em;
    white-space: pre;
    background-color: #eee;
    overflow-x: auto; }
  .trix-content img {
    max-width: 100%;
    height: auto; }
  .trix-content .attachment {
    display: inline-block;
    position: relative;
    max-width: 100%; }
    .trix-content .attachment a {
      color: inherit;
      text-decoration: none; }
      .trix-content .attachment a:hover, .trix-content .attachment a:visited:hover {
        color: inherit; }
  .trix-content .attachment__caption {
    text-align: center; }
    .trix-content .attachment__caption .attachment__name + .attachment__size::before {
      content: ' · '; }
  .trix-content .attachment--preview {
    width: 100%;
    text-align: center; }
    .trix-content .attachment--preview .attachment__caption {
      color: #666;
      font-size: 0.9em;
      line-height: 1.2; }
  .trix-content .attachment--file {
    color: #333;
    line-height: 1;
    margin: 0 2px 2px 2px;
    padding: 0.4em 1em;
    border: 1px solid #bbb;
    border-radius: 5px; }
  .trix-content .attachment-gallery {
    display: flex;
    flex-wrap: wrap;
    position: relative; }
    .trix-content .attachment-gallery .attachment {
      flex: 1 0 33%;
      padding: 0 0.5em;
      max-width: 33%; }
    .trix-content .attachment-gallery.attachment-gallery--2 .attachment, .trix-content .attachment-gallery.attachment-gallery--4 .attachment {
      flex-basis: 50%;
      max-width: 50%; }
/*
 * Provides a drop-in pointer for the default Trix stylesheet that will format the toolbar and
 * the trix-editor content (whether displayed or under editing). Feel free to incorporate this
 * inclusion directly in any other asset bundle and remove this file.
 *

*/

/*
 * We need to override trix.css’s image gallery styles to accommodate the
 * <action-text-attachment> element we wrap around attachments. Otherwise,
 * images in galleries will be squished by the max-width: 33%; rule.
*/
.trix-content .attachment-gallery > action-text-attachment,
.trix-content .attachment-gallery > .attachment {
  flex: 1 0 33%;
  padding: 0 0.5em;
  max-width: 33%;
}

.trix-content .attachment-gallery.attachment-gallery--2 > action-text-attachment,
.trix-content .attachment-gallery.attachment-gallery--2 > .attachment, .trix-content .attachment-gallery.attachment-gallery--4 > action-text-attachment,
.trix-content .attachment-gallery.attachment-gallery--4 > .attachment {
  flex-basis: 50%;
  max-width: 50%;
}

.trix-content action-text-attachment .attachment {
  padding: 0 !important;
  max-width: 100% !important;
}
@tailwind base;
@tailwind components;
@tailwind utilities;

/*

@layer components {
  .btn-primary {
    @apply py-2 px-4 bg-blue-200;
  }
}

*/
@import 'actiontext.css';
@import 'mapillary.css';
@import 'street_view_marker.css';
@import 'media_item_marker.css';
@import 'components/collapsible_sidebar.css';


@layer utilities {
  /* Tailwind 3.0 has no `backdrop:` variant, so the native <dialog> overlay is
     dimmed here rather than with a utility class on the element. */
  dialog::backdrop {
    background-color: rgb(0 0 0 / 0.4);
  }

  input[type="range"] {
    @apply appearance-none w-full h-2 rounded-lg cursor-pointer;
  }

  input[type="range"]::-webkit-slider-thumb {
    @apply h-4 w-4 rounded-full;
    background: var(--thumb-color, blue); /* Use custom property */
    -webkit-appearance: none;
  }

  input[type="range"]::-moz-range-thumb {
    @apply h-4 w-4 rounded-full;
    background: var(--thumb-color, blue); /* Use custom property */
  }

  input[type="range"]::-ms-thumb {
    @apply h-4 w-4 rounded-full;
    background: var(--thumb-color, blue); /* Use custom property */
  }

  /* Plan card clickable styles */
  .plan_card {
    cursor: pointer;
    background-color: white;
    transition: box-shadow 0.2s ease, transform 0.15s ease, background-color 0.2s ease;
  }

  .plan_card:hover {
    box-shadow: 0 4px 12px rgba(4, 69, 77, 0.15);
    transform: translateY(-1px);
    background-color: #F0FDFB; /* very faint turquoise tint */
  }

  /* Don't show card hover effect when hovering over clickable elements inside the card */
  .plan_card:has(button:hover, input:hover, a:hover, form:hover, [data-action]:not([name="plan_card"]):hover) {
    box-shadow: none;
    transform: none;
    background-color: white;
  }

  /* Focused plan card */
  .plan-card-focused {
    background-color: #D3F9F4 !important;
  }

  .plan-card-focused:hover {
    background-color: #D3F9F4 !important;
  }

  /* Measure selection highlighting */
  .measure-selected {
    @apply rounded border-wz_turqois bg-opacity-80;
    border-width: 3px !important;
  }

  /* Simple approach - add border to all measure items */
  .measure-list-item {
    @apply cursor-pointer transition-all duration-200 hover:bg-gray-50 rounded px-3 py-2 mb-2;
    border-bottom: 1px solid #d1d5db !important;
    list-style: none !important;
    text-align: left !important;
  }

  .measure-content {
    @apply space-y-1;
    text-align: left !important; /* Force left alignment */
  }

  .measure-content .flex {
    justify-content: flex-start !important; /* Force left alignment */
    text-align: left !important;
  }

  .measure-title {
    @apply text-xs font-medium text-gray-900 leading-tight;
  }

  .measure-details {
    @apply text-xs text-gray-600 leading-tight;
  }

  .measure-edit-btn, .measure-delete-btn {
    @apply transition-all duration-150;
  }

  .measure-edit-btn:hover:not(:disabled), .measure-delete-btn:hover:not(:disabled) {
    @apply bg-gray-100 text-gray-800;
  }

  .measure-edit-btn:disabled, .measure-delete-btn:disabled {
    @apply pointer-events-none;
  }

  /* Measure info popover - styled to match hover tooltip */
  .measure-info-popover {
    @apply fixed;
    z-index: 9999;
    background-color: #04454D; /* wz_darkcyan */
    color: #ffffff;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 13px;
    line-height: 1.4;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    max-width: 400px;
    word-wrap: break-word;
  }

  .measure-info-popover-header {
    @apply flex justify-end;
    margin-bottom: 4px;
  }

  .measure-info-popover-close {
    @apply p-0.5 rounded transition-colors duration-150;
    color: rgba(255, 255, 255, 0.7);
  }

  .measure-info-popover-close:hover {
    color: #ffffff;
    background-color: rgba(255, 255, 255, 0.15);
  }

  .measure-info-popover-content {
    @apply space-y-1;
    font-size: 13px;
  }

  .measure-info-row {
    @apply flex flex-col;
  }

  .measure-info-row strong {
    color: rgba(255, 255, 255, 0.8);
    font-weight: 500;
    margin-bottom: 2px;
  }

  .measure-info-row span {
    color: #ffffff;
  }

  /* Skill preview markdown styling */
  .skill-preview {
    @apply text-sm text-gray-800 leading-relaxed;
  }

  .skill-preview h1 {
    @apply text-2xl font-bold text-gray-900 mt-4 mb-2 pb-1 border-b border-gray-200;
  }

  .skill-preview h2 {
    @apply text-xl font-semibold text-gray-900 mt-4 mb-2;
  }

  .skill-preview h3 {
    @apply text-lg font-medium text-gray-900 mt-3 mb-1;
  }

  .skill-preview p {
    @apply my-2;
  }

  .skill-preview ul, .skill-preview ol {
    @apply my-2 ml-6;
  }

  .skill-preview ul {
    @apply list-disc;
  }

  .skill-preview ol {
    @apply list-decimal;
  }

  .skill-preview li {
    @apply my-1;
  }

  .skill-preview code {
    @apply bg-gray-100 px-1 py-0.5 rounded text-sm font-mono text-red-600;
  }

  .skill-preview pre {
    @apply bg-gray-100 p-3 rounded my-2 overflow-x-auto;
  }

  .skill-preview pre code {
    @apply bg-transparent p-0 text-gray-800;
  }

  .skill-preview blockquote {
    @apply border-l-4 border-gray-300 pl-4 my-2 italic text-gray-600;
  }

  .skill-preview a {
    @apply text-blue-600 hover:underline;
  }

  .skill-preview strong {
    @apply font-semibold;
  }

  .skill-preview em {
    @apply italic;
  }
}
/* Collapsible Sidebar Styles */

/* Sidebar transition */
.sidebar-wrapper {
  transition: width 0.3s ease-in-out;
}

/* When collapsed, sidebar needs higher z-index so tooltips appear above map controls */
.sidebar-wrapper.sidebar-collapsed {
  z-index: 1001 !important; /* Above Leaflet controls (typically z-index 1000) */
}

/* Main content transition when sidebar collapses */
#frame-width-determinator {
  transition: padding-left 0.3s ease-in-out;
}

/* Toggle button styling */
.sidebar-toggle-btn {
  position: absolute;
  right: -12px;
  top: 70px;
  width: 24px;
  height: 24px;
  background-color: #04454D; /* wz_darkcyan */
  border: 2px solid #51E8D4; /* wz_turqois */
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 60;
  transition: all 0.2s ease;
}

.sidebar-toggle-btn:hover {
  background-color: #51E8D4; /* wz_turqois */
  transform: scale(1.1);
}

.sidebar-toggle-btn:hover svg {
  color: #04454D; /* wz_darkcyan */
}

.sidebar-toggle-btn svg {
  width: 14px;
  height: 14px;
  color: #51E8D4; /* wz_turqois */
  transition: transform 0.3s ease, color 0.2s ease;
}

/* Rotate chevron when collapsed */
.sidebar-collapsed .sidebar-toggle-btn svg {
  transform: rotate(180deg);
}

/* Hide text labels when collapsed */
.sidebar-collapsed .sidebar-text {
  display: none;
}

/* Hide full logo, show icon when collapsed */
.sidebar-collapsed .sidebar-logo-full {
  display: none;
}

.sidebar-collapsed .sidebar-logo-icon {
  display: block !important;
}

.sidebar-logo-icon {
  display: none;
}

/* Center icons when collapsed */
.sidebar-collapsed .main-link {
  justify-content: center;
  padding: 0.5rem;
}

.sidebar-collapsed .main-link svg {
  margin-right: 0;
}

/* Hide accordion panel when collapsed */
.sidebar-collapsed .sidebar-accordion-panel {
  display: none;
}

/* Show accordion icon when collapsed */
.sidebar-collapsed .sidebar-accordion-icon {
  display: flex !important;
}

.sidebar-accordion-icon {
  display: none;
}

/* Tooltip - hidden by default */
.sidebar-tooltip {
  display: none;
}

/* Tooltip for collapsed sidebar */
.sidebar-collapsed .main-link {
  position: relative;
}

.sidebar-collapsed .main-link .sidebar-tooltip {
  position: absolute;
  left: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);
  background-color: #04454D; /* wz_darkcyan */
  color: #F5F2EB; /* wz_offwhite */
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 13px;
  white-space: nowrap;
  z-index: 1;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  pointer-events: none;
}

.sidebar-collapsed .main-link .sidebar-tooltip::before {
  content: '';
  position: absolute;
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  border: 6px solid transparent;
  border-right-color: #04454D; /* wz_darkcyan */
}

.sidebar-collapsed .main-link:hover .sidebar-tooltip {
  display: block;
}

/* Help button adjustments when collapsed */
.sidebar-collapsed .sidebar-help-btn {
  display: none;
}

/* Sign out button adjustments when collapsed */
.sidebar-collapsed .sidebar-sign-out {
  display: none;
}

/* Divider adjustments */
.sidebar-collapsed hr {
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}

/* Bottom section padding when collapsed */
.sidebar-collapsed .sidebar-bottom-section {
  padding: 0.5rem;
}

/* Hide experimental toggle label and switch button when collapsed */
.sidebar-collapsed .sidebar-toggle-label {
  display: none;
}

.sidebar-collapsed .sidebar-experimental-toggle-switch {
  display: none;
}

/* Constrain and center experimental toggle container when collapsed */
.sidebar-collapsed .sidebar-experimental-toggle {
  overflow: hidden;
  padding: 0.25rem;
}

.sidebar-collapsed .sidebar-experimental-toggle .sidebar-experimental-toggle-inner {
  background: none !important;
  border: none !important;
  justify-content: center;
  padding: 0.5rem;
}

/* Make the icon look clickable when collapsed */
.sidebar-collapsed .sidebar-experimental-toggle-icon {
  cursor: pointer;
}

/* Logo link centering when collapsed */
.sidebar-collapsed .sidebar-logo-link {
  justify-content: center;
  padding: 0;
}

/* Keep logo container height consistent */
.sidebar-logo-link {
  min-height: 64px;
}

/* Admin quick access button positioning - always on left edge of screen */
.admin-quick-access-btn {
  left: -12px; /* Partially hidden on left edge */
  z-index: 1002; /* Above collapsed sidebar (1001) */
}

/* Reusable Hover Tooltip Styles */

.hover-tooltip {
  position: fixed;
  display: none;
  background-color: #04454D; /* wz_darkcyan */
  color: #ffffff;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 13px;
  line-height: 1.4;
  z-index: 100000;
  pointer-events: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  max-width: 400px;
  word-wrap: break-word;
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
}

.hover-tooltip.visible {
  opacity: 1;
}

/* Light variant (if needed) */
.hover-tooltip.light {
  background-color: rgba(255, 255, 255, 0.98);
  color: #333;
  border: 1px solid #ccc;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Compact variant for tables */
.hover-tooltip.compact {
  padding: 6px 10px;
  font-size: 12px;
}

/* Wide variant for longer content */
.hover-tooltip.wide {
  max-width: 600px;
}

/* The top-right control column grows downwards and, at short viewport heights,
   reaches into the bottom-right control stack, which then wins the hit test and
   swallows clicks on the bottom-most top-right buttons. The column is capped at
   the free space above that stack (measured at runtime by map_controller.js,
   which sets --leaflet-topright-max-height) and reflows into a further column to
   its left instead of overlapping. */
.leaflet-top.leaflet-right {
    display: flex;
    flex-direction: column;
    /* wrap-reverse flips the cross axis, so flex-start is the right-hand side:
       controls stay right-aligned and extra columns are added to the left. */
    flex-wrap: wrap-reverse;
    align-items: flex-start;
    align-content: flex-start;
    max-height: var(--leaflet-topright-max-height, none);
}

/* Reset the group container styles */
.leaflet-bar-grouped {
    display: flex;
    flex-direction: column; /* Stack buttons vertically */
    gap: 0px; /* No gap between buttons */
    background: none; /* Remove background */
    border: none; /* Remove border */
    padding: 0; /* Remove padding */
    box-shadow: none; /* Remove shadow if present */
}

/* Style the buttons */
.leaflet-bar-grouped button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px; /* Compact button size */
    height: 30px;
    background-color: white; /* Ensure individual buttons are visible */
    border: 1px solid #ccc; /* Add a border for visibility */
    border-radius: 5px; /* Rounded corners for buttons */
    cursor: pointer;
    box-shadow: none; /* Remove unnecessary shadows */
    margin: 0; /* No margin around buttons */
}

/* Adjust button images */
.leaflet-bar-grouped button img {
    width: 24px;
    height: 24px;
}

/* Add a hover effect for buttons */
.leaflet-bar-grouped button:hover {
    background-color: #f0f0f0; /* Subtle hover effect */
}

/* Fine-tune spacing between buttons */
.leaflet-bar-grouped button:not(:last-child) {
    margin-bottom: 2px; /* Add slight spacing between buttons if needed */
}

.leaflet-control-layers-list .radio-group-container {
    margin-top: 8px;
    padding: 2px 0;
    border-top: 1px solid #ccc;
    font-size: 14px;
}

.leaflet-control-layers-list .radio-group-container h4 {
    margin: 5px 0;
    font-size: 12px;
    font-weight: bold;
    color: #333;
}

.leaflet-control-layers-list .radio-group-container div {
    display: flex;
    align-items: center;
    margin-bottom: 2px;
}

.leaflet-control-layers-list .radio-group-container input[type="radio"] {
    margin-right: 5px;
    transform: scale(0.9); /* Slightly smaller radio buttons */
}

.leaflet-control-layers-list .radio-group-container label {
    font-size: 11px;
    color: #555;
}

/* Close button for layers control */
.leaflet-control-layers-close {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 18px;
    height: 18px;
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    line-height: 16px;
    text-align: center;
    color: #666;
    z-index: 1000;
}

.leaflet-control-layers-close:hover {
    background: #f0f0f0;
    color: #333;
    border-radius: 2px;
}

/* Colored swatch shown next to geojson (shape) layer names in the layers control */
.geojson-layer-swatch {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin: 0 6px 0 4px;
    vertical-align: middle;
    border: 1px solid rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
}

/* .leaflet-popup {
    position: absolute;
    text-align: center;
}

.leaflet-popup-tip-container {
    position: relative;
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
}

.leaflet-popup-tip {
    width: 20px;
    height: 20px;
} */

.leaflet-popup-tip-container {
    position: absolute;
    width: 17px;
    height: 17px;
    pointer-events: none; /* Prevent interactions */
    z-index: 0; /* Behind the popup content */
}

.leaflet-popup-tip {
    width: 17px;
    height: 17px;
    transform: rotate(45deg);
    background: white; /* Match popup background */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); /* Optional shadow */
    z-index: 0; /* Behind the popup content */
}

.leaflet-popup-content {
    min-width: 280px !important;
    max-width: fit-content !important;
}

.leaflet-popup-content-wrapper {
    position: relative;
    z-index: 1; /* Above the tip */
}

.leaflet-popup {
    position: absolute; /* Establish stacking context for popup elements */
    z-index: 2; /* Above the tip */
    margin-left: -8.5px; /* Half of tip width */
    margin-top: -8.5px;  /* Half of tip height */
}

.leaflet-popup-close-button {
    position: absolute; /* Ensure it's positioned properly */
    top: 10px;
    right: 10px;
    z-index: 3; /* Highest z-index to ensure it's always visible */
}

.glow-icon-problem {
    border-radius: 20%;
    box-shadow: 0 0 5px 7px rgba(247, 1, 22, 0.63); /* Yellow glow */
}

.glow-icon-note {
    border-radius: 20%;
    box-shadow: 0 0 5px 7px rgba(81, 232, 212, 0.63); /* Yellow glow */
}

.glow-icon-idea {
    border-radius: 50%;
    box-shadow: 0 0 5px 7px rgba(255, 192, 0, 0.63); /* Yellow glow */
}

/* Remove browser focus outline from Leaflet interactive SVG paths (Chrome default focus ring) */
/* See: https://gis.stackexchange.com/a/447509 */
path.leaflet-interactive:focus {
    outline: none;
}

/* One pulse ring around a freshly-added sticky-note dot on the phone capture
   map (issue #1515, AC11). The ring itself is added and removed by
   map_sticky_notes_dot_controller.js; skipped outright under reduced motion
   rather than shown static, so this rule only ever needs to gate the keyframe
   animation itself. */
@media (prefers-reduced-motion: no-preference) {
    .sticky-note-dot-pulse-ring {
        animation: sticky-note-dot-pulse 700ms ease-out 1;
        transform-box: fill-box;
        transform-origin: center;
    }
}

@keyframes sticky-note-dot-pulse {
    from {
        transform: scale(1);
        opacity: 1;
    }
    to {
        transform: scale(2.5);
        opacity: 0;
    }
}
/*
 * Busy affordance for the main Turbo frame.
 *
 * Turbo sets `busy` / `aria-busy="true"` on a turbo-frame for the duration of a
 * frame navigation, so no JavaScript is needed. The exact id match keeps this
 * off every other frame, including `id_main_panel_participants`.
 */

turbo-frame#id_main_panel {
  /* Contain the overlay. The frame is otherwise an inline element, which cannot
     act as a containing block for the pseudo-elements below. */
  display: block;
  position: relative;
}

turbo-frame#id_main_panel[busy]::before,
turbo-frame#id_main_panel[busy]::after {
  content: "";
  position: absolute;
  z-index: 50;
  pointer-events: none;
  /* Stay invisible for the first 400ms so fast navigations do not flash. */
  animation: mainPanelBusyFadeIn 150ms ease-out 400ms both;
}

/* Dim the outgoing content rather than unmounting it. */
turbo-frame#id_main_panel[busy]::before {
  inset: 0;
  background-color: rgba(4, 69, 77, 0.12); /* wz_darkcyan */
}

/* Centered spinner, kept near the top of tall panels so it stays in view. */
turbo-frame#id_main_panel[busy]::after {
  top: min(50%, 40vh);
  left: 50%;
  width: 2.5rem;
  height: 2.5rem;
  margin: -1.25rem 0 0 -1.25rem;
  border: 3px solid rgba(4, 69, 77, 0.2); /* wz_darkcyan */
  border-top-color: #04454d; /* wz_darkcyan */
  border-radius: 9999px;
  animation:
    mainPanelBusyFadeIn 150ms ease-out 400ms both,
    mainPanelBusySpin 700ms linear infinite;
}

@keyframes mainPanelBusyFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes mainPanelBusySpin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  turbo-frame#id_main_panel[busy]::after {
    animation: mainPanelBusyFadeIn 150ms ease-out 400ms both;
  }
}
.link-hover-area {
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.link-hover-area:hover {
    opacity: 0.15 !important;
}

/* Arrow marker for modify node shape */
.arrow-marker {
    background: none !important;
    border: none !important;
    color: blue;
    font-size: 12px;
    text-align: center;
    line-height: 12px;
}

.arrow-marker.selected {
    color: #51E8D4; /* Turquoise for selection */
}
/* Import Mapillary CSS from CDN */
@import url('https://unpkg.com/mapillary-js@4.1.2/dist/mapillary.css');

/* Mapillary viewer styles with aspect ratio support */
.mapillary-viewer {
  position: relative;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Aspect ratio will be set dynamically via JavaScript */
}

/* For padding-bottom fallback technique */
.mapillary-viewer.aspect-ratio-fallback > div {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Allow Mapillary container to size naturally within aspect ratio constraints */
.mapillary-viewer > div {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
}

/* Allow Mapillary JS to size naturally */
.mapillary-viewer .mapillary-js {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
}

/* Mapillary navigation controls styling */
.mapillary-viewer .mly-navigation {
  z-index: 1000;
}

/* Allow canvas to size naturally within constraints */
.mapillary-viewer canvas {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
}

/* Navigation controls visibility */
.mapillary-viewer .mly-navigation-component {
  display: block !important;
}

/* Sequence controls */
.mapillary-viewer .mly-sequence {
  display: block !important;
}
/* Field photo markers (issue #1495).
   Sibling surface: street_view_marker.css, whose circular turquoise-outlined
   marker this one follows so the two read as the same family of map pin. */

.media-marker-icon {
  background: transparent !important;
  border: none !important;
}

.media-marker {
  position: relative;
  width: 30px;
  height: 30px;
}

.media-marker-button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border-radius: 50%;
  border: 2px solid #51E8D4; /* wz_turquoise outline, as the street view marker */
  background: #ffffff;
  color: #04454D; /* wz_darkcyan */
  box-sizing: border-box;
  cursor: pointer;
}

.media-marker-button:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(81, 232, 212, 0.9);
}

.media-marker-glyph svg {
  width: 18px;
  height: 18px;
  display: block;
}

/* The cone rotates about the centre of the marker, which is the point the
   photograph was taken from, and reaches outwards from it. */
.media-marker-cone {
  position: absolute;
  left: 50%;
  bottom: 50%;
  transform: translateX(-50%);
  pointer-events: none;
}

.media-marker.is-focused .media-marker-button,
.media-marker-cluster.is-focused {
  border-color: #FFC000; /* wz_yellow */
  box-shadow: 0 0 0 3px rgba(255, 192, 0, 0.6);
}

/* Hover and keyboard focus open the card without JavaScript; a tap has
   neither, and the layer adds .is-open for it. */
.media-marker-card {
  display: none;
  position: absolute;
  left: 50%;
  bottom: 38px;
  transform: translateX(-50%);
  width: 220px;
  padding: 0.5rem;
  border-radius: 0.375rem;
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  font-size: 0.75rem;
  line-height: 1rem;
  color: #374151;
  text-align: left;
}

/* Without a photograph the X sits at the top of the card itself (see below),
   so the description needs room to keep clear of it: the button's own
   0.25rem offset plus its 1.5rem height, with a small gap (issue #1541). */
.media-marker-card--no-photo .media-marker-description {
  margin-top: 2rem;
}

.media-marker:hover .media-marker-card,
.media-marker:focus-within .media-marker-card,
.media-marker.is-open .media-marker-card {
  display: block;
}

/* A dismissal (X, Escape, click-away) beats hover/focus-within until the
   pointer or focus actually leaves the marker (see the layer's mouseleave /
   focusout listeners), so closing the card does not get reopened by the
   pointer that is still sitting on it. */
.media-marker.is-dismissed .media-marker-card {
  display: none !important;
}

/* A small white circle with a light shadow (issue #1541), in the style of
   the large photo viewer's close button (field_photo_viewer.ts), so it stays
   legible over a dark photograph. Positioned over the card itself only when
   there is no photograph to sit on (see .media-marker-photo below, which
   overrides top/right to sit on the photograph's own top-right corner
   instead). */
.media-marker-card-close {
  position: absolute;
  top: 0.25rem;
  right: 0.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  color: #374151;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.media-marker-card-close:hover {
  background: #ffffff;
}

.media-marker-card-close:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(81, 232, 212, 0.9);
}

/* Centres the photo box below when it is narrower than the card (a portrait
   photograph, sized by .media-marker-photo's inline width/height — see
   media_items_layer.ts), rather than letting it hug the left edge. */
.media-marker-thumbnail-frame {
  display: flex;
  justify-content: center;
  margin-bottom: 0.25rem;
}

/* The photograph's own box. A stored pixel size (#1541) sizes this inline in
   JavaScript to the photograph's own shape — full inner width for landscape
   or square, full inner width as height for portrait — so nothing here
   depends on the (lazily loaded) image itself, and the card's height is
   final the moment it opens. Rounded and clipped here rather than on the
   image, so the zoom trigger button gets the same treatment. */
.media-marker-photo {
  position: relative;
  border-radius: 0.25rem;
  overflow: hidden;
}

/* Sits on the photograph's own top-right corner instead of the card's. */
.media-marker-photo .media-marker-card-close {
  top: 0.25rem;
  right: 0.25rem;
}

/* No stored pixel size yet (issue #1541): the square frame #1526 introduced,
   now on white rather than gray so no background shows through the
   letterboxing object-fit: contain leaves around a non-square photograph. */
.media-marker-photo--unsized {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #ffffff;
}

.media-marker-thumbnail {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* The large-view trigger (issue #1528), offered only once a redacted copy
   exists. A plain button around the same thumbnail, so hovering and
   keyboard focus both work without extra JavaScript. */
.media-marker-thumbnail-trigger {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: none;
  background: none;
  cursor: zoom-in;
}

.media-marker-thumbnail-trigger:focus {
  outline: none;
  box-shadow: inset 0 0 0 2px rgba(81, 232, 212, 0.9);
}

.media-marker-thumbnail-expand {
  position: absolute;
  bottom: 0.25rem;
  right: 0.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 0.25rem;
  background: rgba(0, 0, 0, 0.55);
  color: #ffffff;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.media-marker-thumbnail-trigger:hover .media-marker-thumbnail-expand,
.media-marker-thumbnail-trigger:focus .media-marker-thumbnail-expand {
  opacity: 1;
}

.media-marker-thumbnail-expand svg {
  width: 0.75rem;
  height: 0.75rem;
}

.media-marker-cluster {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid #51E8D4;
  background: #04454D;
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
}

.media-marker-cluster:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(81, 232, 212, 0.9);
}

/* Placement mode (issue #1496). The cursor is the only thing on the map that
   says the next click will put a photograph somewhere, so it covers the
   interactive layers too — over a pipe or a manhole the click still places,
   and a pointer there would say otherwise. */
.leaflet-container.media-placing,
.leaflet-container.media-placing .leaflet-interactive {
  cursor: crosshair;
}

/* While placing, the markers stand aside so the click reaches the map. The
   marker most in the way is the one for the photograph being moved, sitting
   on the point the user is correcting, and Leaflet stops the map click on any
   marker it owns. The descendant selectors are what beat Leaflet's own
   .leaflet-interactive { pointer-events: auto }. */
.media-markers-inert .leaflet-marker-icon,
.media-markers-inert .leaflet-interactive,
.media-markers-inert .media-marker,
.media-markers-inert .media-marker-card {
  pointer-events: none;
}
/* Node label styles */
.node-label {
  pointer-events: auto; /* Enable interaction for tooltips */
  z-index: 9000;
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 8px; /* More rounded corners */
  padding: 6px 8px; /* More padding for better spacing */
  border: 1px solid #666;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  font-size: 12px;
  line-height: 1.2;
  white-space: nowrap;
  width: auto !important; /* Override Leaflet's fixed width */
  height: auto !important; /* Override Leaflet's fixed height */
}

/* Node label container */
.node-label-container {
  display: flex;
  align-items: center;
  justify-content: center; /* Center content horizontally */
}

/* Node icon */
.node-icon {
  width: 16px;
  height: 16px;
  margin-right: 6px;
  background-color: #666;
  border-radius: 50%;
}

.manhole-icon {
  background-color: #0066cc;
}

.outlet-icon {
  background-color: #cc0000;
}

.storage-icon {
  background-color: #009900;
}

/* Node label content */
.node-label-content {
  display: flex;
  flex-direction: column;
  justify-content: center; /* Center content vertically */
}

/* Node ID container */
.node-id-container {
  display: flex;
  align-items: center;
  margin-bottom: 4px; /* Slightly more space between ID and elevations */
}

.node-id {
  font-weight: bold;
  margin-right: 4px;
}

/* Copy button */
.copy-button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #666;
  border-radius: 3px;
  opacity: 0.7;
  transition: all 0.2s ease;
}

.copy-button:hover {
  background-color: rgba(0, 0, 0, 0.1);
  opacity: 1;
}

.copy-button.copied {
  color: #4CAF50;
  opacity: 1;
}

.node-elevation {
  font-size: 10px;
  color: #666;
  margin-bottom: 2px; /* Add spacing between elevation lines */
}

.node-elevation:last-child {
  margin-bottom: 0; /* Remove margin from last item */
}

/* Storage unit labels need more space */
.storage_unit-label {
  margin-left: 10px;
}
/* Node tooltip styles */
.node-tooltip {
  background-color: rgba(255, 255, 255, 0.9);
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  font-size: 12px;
  z-index: 100000 !important;
  pointer-events: none; /* Allow clicking through the tooltip */
  position: relative !important;
}

/* Force tooltips above all other elements */
.leaflet-tooltip {
  z-index: 100000 !important;
}

/* Force tooltip pane above all other panes */
.leaflet-tooltip-pane {
  z-index: 100000 !important;
}

/* Remove the default Leaflet tooltip arrow */
.node-tooltip:before {
  display: none !important;
}

/* Container for tooltip content */
.node-tooltip-container {
  display: flex;
  align-items: center;
  min-width: 120px;
}

/* Node icon styles */
.node-icon {
  width: 16px;
  height: 16px;
  margin-right: 8px;
  background-color: #666;
  border-radius: 50%;
}

/* Specific node type icons */
.manhole-icon {
  background-color: #3388ff;
}

.outlet-icon {
  background-color: #ff3333;
}

.storage-icon {
  background-color: #33cc33;
}

.default-icon {
  background-color: #999999;
}

/* Node tooltip content */
.node-tooltip-content {
  display: flex;
  flex-direction: column;
}

/* Node ID style */
.node-id {
  font-weight: bold;
  margin-bottom: 2px;
}

/* Node elevation info */
.node-elevation {
  font-size: 11px;
  color: #555;
}

/* Empty div icon for the marker (invisible) */
.empty-div-icon {
  background: none;
  border: none;
}

/* Cascaded retention cells tooltip styles */
.cascaded-retention-tooltip {
  background-color: rgba(255, 255, 255, 0.95);
  border: 1px solid #2E7D32;
  border-radius: 6px;
  padding: 8px;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25);
  font-size: 12px;
  z-index: 100000 !important;
  pointer-events: none;
  position: relative !important;
  min-width: 140px;
}

/* Remove the default Leaflet tooltip arrow for cascaded retention tooltips */
.cascaded-retention-tooltip:before {
  display: none !important;
}

/* Retention chamber tooltip styles */
.retention-chamber-tooltip {
  background-color: rgba(255, 255, 255, 0.95);
  border: 1px solid #4CAF50;
  border-radius: 6px;
  padding: 8px;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25);
  font-size: 12px;
  z-index: 100000 !important;
  pointer-events: none;
  position: relative !important;
  min-width: 140px;
}

/* Remove the default Leaflet tooltip arrow for retention chamber tooltips */
.retention-chamber-tooltip:before {
  display: none !important;
}
/*


 */
/* Link label wrapper - the Leaflet divIcon container */
.link-label-wrapper {
  pointer-events: auto;
  z-index: 8500; /* Below node labels (9000) but above links */
  width: auto !important; /* Override Leaflet's fixed width */
  height: auto !important; /* Override Leaflet's fixed height */
}

/* Link label box - the rotated element with background */
.link-label-box {
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 4px;
  padding: 2px 6px;
  border: 1px solid #888;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  font-size: 11px;
  line-height: 1.2;
  white-space: nowrap;
  display: inline-block; /* Needed for transform to work properly */
}

/* Link label container */
.link-label-container {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Link diameter text */
.link-diameter {
  font-weight: 600;
  color: #333;
  font-family: monospace; /* Use monospace for consistent diameter display */
}

.sticky-note-popup-issue .leaflet-popup-content-wrapper {
    background: #FFE38B;
  }

.sticky-note-popup-issue .leaflet-popup-tip {
    background: #FFE38B;
  }

  .sticky-note-popup-idea .leaflet-popup-content-wrapper {
    background: #8AFABF;
  }

.sticky-note-popup-idea .leaflet-popup-tip {
    background: #8AFABF;
  }

/* Leaflet popup animations */
.leaflet-popup {
  transition: opacity 300ms ease-in-out !important;
}

.leaflet-popup-content-wrapper {
  transition: transform 300ms ease-in-out !important;
  transform-origin: bottom center;
}

/* Keep tip arrow in sync with popup */
.leaflet-popup-tip-container {
  transition: opacity 300ms ease-in-out !important;
}
/* Project Area Calculation Circle */
.project-area-calculation-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  color: white;
  font-weight: bold;
  transition: all 0.3s ease-in-out;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Color classes for different reduction levels */
.excellent-reduction {
  background-color: #34D399; /* Green */
}

.good-reduction {
  background-color: #60A5FA; /* Blue */
}

.moderate-reduction {
  background-color: #FBBF24; /* Yellow */
}

.no-reduction {
  background-color: #F87171; /* Red */
}

/* Tooltip for the circle */
.project-area-calculation-tooltip {
  position: relative;
  display: inline-block;
}

.project-area-calculation-tooltip .tooltip-text {
  visibility: hidden;
  width: 200px;
  background-color: rgba(0, 0, 0, 0.8);
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -100px;
  opacity: 0;
  transition: opacity 0.3s;
}

.project-area-calculation-tooltip:hover .tooltip-text {
  visibility: visible;
  opacity: 1;
}
/* Street View Marker Styles */
.street-view-marker {
  background: transparent !important;
  border: none !important;
}

.street-view-marker-container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid #51E8D4; /* wz_turquoise outline - 2px */
  background: transparent;
  box-sizing: border-box;
  overflow: hidden; /* Ensure icon fits perfectly */
}

.street-view-marker-icon {
  width: 100%; /* Fill the container completely */
  height: 100%; /* Fill the container completely */
  border-radius: 50%;
  display: block;
  object-fit: cover; /* Ensure the icon covers the entire area */
}

/* Direction indicator styles */
.street-view-direction-indicator {
  background: transparent !important;
  border: none !important;
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *



 */


/*
    .leaflet-control-layers-toggle {
        background-image:url("https://unpkg.com/leaflet@1.7.1/dist/images/layers.png");
    }

    https://ga.jspm.io/npm:leaflet@1.7.1/dist/
    https://ga.jspm.io/npm:leaflet@1.7.1/dist/images/layers.png
*/

.leaflet-touch .leaflet-control-layers-toggle {
    background-image:url(https://unpkg.com/leaflet@1.9.4/dist/images/layers.png);
    width: 44px;
    height: 44px;
}

#qr-modal {
    position: fixed;
    z-index: 10001;
    left: 50%;
    top: 50%;
    max-height: 90vh;
    max-width: 90vw;
    transform: translate(-50%, -50%);
    overflow: auto;
    background-color: rgba(255, 255, 255, 1);
    border-radius: 5px;
    opacity: 1 !important;
    /* Add the drop shadow */
    box-shadow: 0 0 10px 0 rgba(0,0,0,0.2), 0 5px 10px 0 rgba(0,0,0,0.19);
  }

#drag-drop-canvas {
    pointer-events: none;
}

.select-multiple-button {
    content: url(/polygon_select.svg);
    margin: 4px;
    outline: 4px solid rgba(0, 0, 0, 0.3);
    border-radius: 6px;
    position: absolute;
    top: 0px;
    left: 1px;
    height: 29px;
    width: 29px;
}

.select-multiple-button.conditional-background {
    content: url(/polygon_select_grey.svg);
}

.leaflet-pm-toolbar .leaflet-buttons-control-button {
    padding: 0;
}

.leaflet-touch .leaflet-pm-toolbar.leaflet-pm-custom.leaflet-bar.leaflet-control {
    top: 121px;
}

.leaflet-ruler {
    top: 40px;
}

.result-tooltip{
    background-color: white;
    border-width: 1px;
    opacity: 1;
    border-color: #04454D;
    font-size: medium;
    width: 150px;
}

.moving-tooltip{
    background-color: rgba(255, 255, 255, .7);
    background-clip: padding-box;
    opacity: 1;
    border: dotted;
    border-color: #04454D;
    font-size: medium;
    width: 150px;
  }

.add-storage-button {
    content: url(/storage_simple.svg);
    margin: 4px;
    outline: 4px solid rgba(0, 0, 0, 0.3);
    border-radius: 6px;
    position: absolute;
    top: 16px;
    left: 1px;
    height: 29px;
    width: 29px;
}

.add-storage-button.conditional-background{
    content: url(/storage_simple_grey.svg);
}

.leaflet-pm-toolbar.leaflet-pm-custom.leaflet-bar.leaflet-control {
    border: none;
}

.leaflet-pm-toolbar .button-container:last-child a.leaflet-buttons-control-button {
    background-color: transparent;
}

.leaflet-pm-toolbar.leaflet-pm-custom.leaflet-bar.leaflet-control {
    background-color: transparent;
    height: 0;
    border: none;
}

.leaflet-pm-toolbar.leaflet-pm-custom.leaflet-bar.leaflet-control.activeChild {
    border: none;
}

.leaflet-buttons-control-button {
    background-color: transparent !important;
}

.zoom-hidden {
    visibility: hidden;
  }

/* app/assets/stylesheets/application.css */
.full-text.hidden {
    display: none;
}

.full-text.show {
    display: inline;
}

.tooltip-container {
    position: relative;
    display: inline-block;
}

.tooltip-content {
    display: none;
    position: absolute;
    background-color: #fff;
    color: #000;
    border: 1px solid #ccc;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    z-index: 999;
    width: fit-content;
}

/* Reset Leaflet control styles for our legend */
.leaflet-control.info.legend {
    background: none;
    border: none;
    box-shadow: none;
    margin: 10px;
}

.legend-container {
    background-color: white;
    align-items: center;
    padding: 0 10px;
    border: 4px solid rgba(0, 0, 0, 0.3);
    border-radius: 15px;
    margin: 4px;
    font-family: Inter var, sans-serif;
}

.heading-container {
    display: flex;
}

#tooltip-container {
    line-height: 1;
    padding-left: 4px;
    padding-top: 4px;
    margin-top: 3px;
}

.legend-body {
    display: flex;
    line-height: 1;
}

.legend-heading {
    font-size: 12px;
    font-weight: bold;
    padding-top: 9px;
}

.gradient-bar {
    width: 10px;
    height: 40px;
    background: linear-gradient(to top, #0000FF, #C70039);
    margin: 10px 0;
    border-radius: 5px;
}

.legend-label-container {
    height: 40px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-left: 5px;
    margin: 10px 0;
}

.legend-label {
    font-size: 12px;
    color: #000;
}

.active > .leaflet-buttons-control-button {
    box-shadow: none !important;
}

/* app/assets/stylesheets/application.css */
.help-mode-active {
    background-color: rgba(240, 240, 240, 0.8); /* wz-bg-wz_light */
  }

  .help-highlight {
    border: 1px solid #ff6347; /* wz-border-wz_accent */
    background-color: #f8f8f8; /* wz-bg-wz_light */
    padding: 0.25rem;
    border-radius: 0.25rem;
  }

  .help-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white; /* #f8f8f8; /* wz-bg-wz_light */
    border: 1px solid #ff6347; /* wz-border-wz_accent */
    padding: 1rem;
    border-radius: 0.5rem;
    z-index: 50;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  }

/* Chat message markdown styling */
.prose.prose-sm.prose-wz_darkcyan {
  --tw-prose-body: #04454D;
  --tw-prose-headings: #04454D;
  --tw-prose-links: #04454D;
  --tw-prose-bold: #04454D;
  --tw-prose-code: #04454D;
  --tw-prose-pre-bg: rgba(4, 69, 77, 0.1);
}

/* Compact prose for chat bubbles */
.prose.prose-sm p {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}

.prose.prose-sm p:first-child {
  margin-top: 0;
}

.prose.prose-sm p:last-child {
  margin-bottom: 0;
}

.prose.prose-sm ul,
.prose.prose-sm ol {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  padding-left: 1.25em;
}

.prose.prose-sm li {
  margin-top: 0.25em;
  margin-bottom: 0.25em;
}

.prose.prose-sm pre {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  padding: 0.5em;
  border-radius: 0.375rem;
  overflow-x: auto;
}

.prose.prose-sm code {
  padding: 0.125em 0.25em;
  border-radius: 0.25rem;
  font-size: 0.85em;
}

.prose.prose-sm pre code {
  padding: 0;
  background: transparent;
}

/* Inverted prose for agent messages (white text on dark background) */
.prose.prose-invert {
  --tw-prose-body: #ffffff;
  --tw-prose-headings: #ffffff;
  --tw-prose-bold: #ffffff;
  --tw-prose-links: #51E8D4; /* wz_turqois for links */
  --tw-prose-counters: #ffffff;
  --tw-prose-bullets: #ffffff;
  --tw-prose-quotes: #ffffff;
  --tw-prose-code: #ffffff;
}

.prose.prose-invert code {
  background-color: rgba(255, 255, 255, 0.15);
}

.prose.prose-invert pre {
  background-color: rgba(0, 0, 0, 0.3);
}

.prose.prose-invert li::marker {
  color: #ffffff;
}