#notifications {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column-reverse;
  padding: 0.5rem;
}

#notifications > div {
  margin-bottom: 0.5rem;
}

body {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

#app {
  flex: 1;
  display: flex;
  flex-direction: column;
}

footer { 
  margin-top: auto;
}

/* This is important for bulma icons to not hijack the click events */
.tabs .icon,
.tabs span,
.button .icon,
.button span,
.navbar-item .icon,
.navbar-item span {
  pointer-events: none;
}

#notifications {
  z-index: 150;
}

.navbar-item {
  cursor: pointer;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.modal-sos-form .field.is-horizontal{
  padding-bottom: 6px;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.1);
}

.modal-gateway-form .field-label,
.modal-sos-form .field-label {
  min-width: 120px;
}
.modal-sos-form .field-label,
.modal-sos-form .field-body {
  display: flex;
  align-items: center;
}

/* Locations Page Theming */
/* Dark mode container */
#locations-page {
  background-color: #1c1c1c; /* Dark gray background */
  color: #ffffff; /* White text for readability */
}

/* Style the tree structure */
#locations-page .location-tree {
  list-style-type: none;
  padding-left: 0; /* No padding at root level */
}

#locations-page .location-tree ul {
  list-style-type: none;
  padding-left: 20px; /* Indent nested levels */
}

/* Root drop zone in dark mode */
#locations-page .root-drop-zone {
  padding: 10px;
  margin-bottom: 10px;
  background-color: #333333; /* Darker gray */
  border: 1px dashed #666666; /* Lighter border for contrast */
  text-align: center;
  cursor: pointer;
  color: #ffffff; /* White text */
}

/* Location items in dark mode */
#locations-page .location-item {
  display: flex;
  align-items: center;
  padding: 10px;
  border: 1px solid #444444; /* Dark border */
  background-color: #2c2c2c; /* Dark background */
  margin-bottom: 5px; /* Space between items */
  color: #ffffff; /* White text */
}

/* Style the drag handle */
#locations-page .location-item .drag-handle {
  cursor: grab;
  margin-right: 10px;
  opacity: 0;
  transition: opacity 0.2s;
  color: #ffffff; /* White for visibility */
}

#locations-page .location-item:hover .drag-handle {
  opacity: 1;
}

/* Allow the location name to take up available space */
#locations-page .location-item .location-name {
  flex-grow: 1;
  margin-right: 10px;
  color: #ffffff; /* White text */
}

/* Style action icons */
#locations-page .action-icon {
  cursor: pointer;
  margin-left: 10px;
  color: #3273dc; /* Blue for visibility */
}

/* Visual feedback for drag-over */
#locations-page .location-item.drag-over {
  background-color: #444444; /* Lighter gray for feedback */
  border: 1px dashed #666666; /* Dashed border */
}

#locations-page .location-content > span {
  margin-right: 6px;
  font-size: 1em;
}

#locations-page .location-content > .af {
  margin-right: 6px;
  font-size: 1.2em;
}

#locations-page .location-item > .fa-edit {
  /* green info color */
  color: #00d1b2;
  cursor: pointer;
}
#locations-page .location-item > .fa-trash {
  /* red danger color */
  color: #ff3860;
  cursor: pointer;
}
#locations-page .location-action-button {
  margin: 0 10px;
}
/* End of locations page theming */

/* Log theming */
ul.log-listing {
  list-style-type: none;
  padding-left: 0;
  margin: 0;
}
/* Make the log list striped */
ul.log-listing li:nth-child(even) {
  background-color: hsl(var(--bulma-info-h),var(--bulma-info-s),var(--bulma-info-dark-l));
}
ul.log-listing li:nth-child(odd) {
  background-color: hsl(var(--bulma-warning-h),var(--bulma-warning-s),var(--bulma-warning-dark-l));
}
ul.log-listing li {
  display: flex;
  width: 100%;
  border-radius: 5px;
}
ul.log-listing .log-message { flex: 3; }
ul.log-listing .log-type { flex: 1; text-align: right; }
ul.log-listing .log-time { flex: 3; text-align: right; }

/* End of log theming */

/* Sticky toolbar for Zone Editor */
.sticky-toolbar {
  position: absolute;
  top: 0; /* Sticks the toolbar to the top of the container */
  left: 0;
  right: 0;
  z-index: 10; /* Ensures the toolbar stays above the scrolling content */
}
/* End of sticky toolbar */

.modal {
  z-index: 99;
}

/* MAP LISTING SIDEBAR THEMING */
#map-menu-listing .map-menu-listing-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%; /* Ensure the <a> takes full available width */
}

#map-menu-listing .map-menu-listing-item .map-remove {
  flex-shrink: 0; /* Prevent the button from shrinking */
  margin-left: 10px; /* Optional: Add space between text and button */
}

/* Optional: Handle long map names */
#map-menu-listing .map-menu-listing-item span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-grow: 1; /* Allow the span to take available space */
}

#map-menu-listing .map-visibility-hidden {
  display: none;
}
/* END OF MAP LISTING SIDEBAR THEMING */

/* DRAGGABLE MODAL */
/* Hide the dimmed overlay entirely */
.modal-draggable .modal-background {
  display: none !important;
  /* Alternative: Make it fully transparent if you want it visible but undimmed */
  /* background-color: transparent !important; */
}

/* Make the modal card absolute-positioned for dragging (overrides Bulma's fixed) */
.modal-draggable .draggable-modal {
  position: absolute !important;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0 !important;
  max-width: 640px; /* Bulma default, adjust as needed */
  width: auto;
}

/* Initial positioning (centered) */
.modal-draggable .draggable-modal.is-active {
  display: block !important;
  z-index: 40; /* Above page content */
}

/* Drag handle styling */
.modal-draggable .draggable-handle {
  cursor: move;
  user-select: none;
}

/* Prevent text selection during drag */
.modal-draggable .draggable-modal {
  user-select: none;
}

.modal-draggable .draggable-modal * {
  user-select: auto;
}

.modal-draggable .draggable-handle * {
  user-select: none;
}

/* Optional: Add a subtle shadow for floating effect */
.modal-draggable .draggable-modal {
  box-shadow: 0 0.5em 1em -0.125em rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.02);
}
/* DRAGGABLE MODAL END */