body {
    padding-top: var(--status-navbar-height, 56px);
}

html, body, #container {
    height: 100%;
    width: 100%;
}

#image-map {
	width: auto;
    height: 100%;
}

.grecaptcha-badge { 
    visibility: hidden;
}


@keyframes fade { 
  from { opacity: 0.2;  } 
}

.blinking {
  animation: fade 1s infinite alternate;
}
#notices {
 position:fixed;
    z-index: 999;
}



.place {
  position:relative;
  display:inline-block;
}

.place:after {
  content: "place";
}
.hourglass_bottom {
	position:relative;
	display:inline-block;
}
.hourglass_bottom:after {
	 content: "hourglass_bottom";
}




.map-marker div.icon_gps {
  position: relative;

  background-repeat:no-repeat;
  background-position:center;
  background-color: #ccc;
  right: 12px;
  width: 20px; /*Same as marker width*/
  height: 20px; /*Same as marker height*/
 -webkit-background-clip: padding-box; /* for Safari */
   background-clip: padding-box;
  line-height: 20px;
  opacity: 0.8;
  font-size: 12px;
  border-radius: 20px;
  margin-left: 1px;
  margin-top: 1px;
}

.gps_text {
	position: relative;
	top: -22px;
	left: 14px;
	font-size: 13px;
	padding: 2px;
	font-weight: 900;
	display: inline-block;
	border-radius: 2px;
	color: #000;
	white-space:nowrap;
	text-shadow: 0px 0px 3px #FFF;
	}

.gpsarrow {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    position: absolute !important;
    top: 0 !important;
}
.gpsarrow::after {
      content: "";
      width: 0 !important;
      height: 0 !important;
      border-left: 5px solid transparent !important;
      border-right: 5px solid transparent !important;
      border-bottom: 10px solid #FFF !important;
      position: absolute !important;
      top: -3px !important;
      left: 50% !important;
      margin-left: -5px !important;
      z-index: 99999 !important;
    }

.list-group-item-action {
background-color: rgba(255,255,255,.5);
	
	
}



	#layers .modal-dialog {
		margin-top: 100px;
	}
	#layers .modal-body {
		max-height: calc(100vh - 200px);
		
		overflow-y: auto;
	}


/* ----------------------------------------------------------
   Status UI / navbar refinements
   Bootstrap 4.5 friendly, minimal custom CSS.
---------------------------------------------------------- */

.status-navbar {
  min-height: 56px;
  padding-top: .35rem;
  padding-bottom: .35rem;
}

.status-navbar .navbar-brand {
  min-width: 0;
  max-width: 34vw;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#factioninformation {
  height: auto !important;
  min-width: 0;
  max-width: 42vw;
  margin: 0 .75rem 0 0 !important;
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}

#factions {
  min-width: 0;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#factions .navbar-brand {
  margin: 0;
  padding: 0;
  font-size: 1rem;
  line-height: 1.2;
}

#progress {
  width: 100%;
  min-width: 140px;
}

#next_update,
#countdown {
  line-height: 1;
  vertical-align: middle;
}

.status-navbar .navbar-nav .nav-link {
  display: flex;
  align-items: center;
  border-radius: .25rem;
}

.status-navbar .navbar-nav .nav-link .material-icons {
  margin-right: .25rem;
}

.status-navbar .navbar-nav .active > .nav-link,
.status-navbar .navbar-nav .nav-link.active {
  background: rgba(255, 255, 255, .12);
}

.status-navbar .dropdown-menu {
  max-height: calc(100vh - 5rem);
  overflow-y: auto;
}

.status-login-form .form-control {
  min-width: 9rem;
}

.btn-lg-auto {
  width: auto;
}

.status-logout-btn {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

.status-alert {
  position: fixed;
  z-index: 99999;
  top: 64px;
  left: 50%;
  transform: translateX(-50%);
  width: min(720px, calc(100% - 2rem));
}

.status-admin-container {
  min-height: 100%;
  width: 100%;
  padding-left: 3rem;
  padding-right: 3rem;
}

.material-icons.md-18,
.material-icons-sm {
  font-size: 18px;
  line-height: 1;
}

@media (max-width: 991.98px) {
  body {
    padding-top: 56px;
  }

  .status-navbar {
    padding-left: .5rem;
    padding-right: .5rem;
  }

  #factioninformation {
    order: 1;
    max-width: calc(100vw - 4.75rem);
    flex: 1 1 auto;
    margin-right: .5rem !important;
  }

  #factions {
    font-size: .875rem;
  }

  #factions .navbar-brand {
    max-width: calc(100vw - 5rem);
    font-size: .95rem;
  }

  .status-navbar .navbar-toggler {
    order: 2;
    padding: .25rem .5rem;
  }

  .status-navbar .navbar-collapse {
    order: 3;
    flex-basis: 100%;
    background: #343a40;
    margin: .35rem -.5rem -.35rem;
    padding: .5rem .75rem .75rem;
    border-top: 1px solid rgba(255, 255, 255, .15);
    max-height: calc(100vh - 56px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .status-navbar .navbar-nav {
    padding-top: .25rem;
  }

  .status-navbar .navbar-nav .nav-link {
    padding: .65rem .75rem;
  }

  .status-navbar .dropdown-menu {
    position: static !important;
    float: none;
    width: 100%;
    margin-top: .25rem;
    background-color: rgba(255, 255, 255, .98);
    border: 0;
    box-shadow: none;
  }

  .status-login-form {
    width: 100%;
    padding-top: .5rem;
    border-top: 1px solid rgba(255, 255, 255, .15);
  }

  .status-login-form .form-control,
  .status-login-form .btn {
    width: 100%;
  }

  .status-logout-btn {
    width: 100%;
    justify-content: center;
  }

  .status-admin-container {
    padding-left: .75rem;
    padding-right: .75rem;
  }

  .container,
  .col {
    padding-left: 8px;
    padding-right: 8px;
  }

  #notices {
    left: 0;
    right: 0;
  }

  #layers .modal-dialog {
    margin: .5rem;
  }

  #layers .modal-body {
    max-height: calc(100vh - 6rem);
  }
}

@media (max-width: 575.98px) {
  .menutext {
    display: inline;
  }

  .status-navbar .dropdown-item {
    white-space: normal;
  }

  .status-alert {
    top: 58px;
    width: calc(100% - 1rem);
  }
}



#factions.status-faction-points:empty {
  display: none;
}

@media (max-width: 991.98px) {
  #factioninformation {
    order: 3;
    flex-basis: 100%;
    max-width: 100%;
    margin: .25rem 0 0 !important;
  }

  .status-navbar .navbar-toggler {
    order: 2;
  }

  .status-navbar .navbar-collapse {
    order: 4;
  }
}


html,
body {
	max-width: 100%;
	overflow-x: hidden;
}

/* Bootstrap .row + container-fluid.p-0 aiheuttaa sivuttaisylivuodon */
.container-fluid.p-0 > .row,
.container-fluid.p-0 > form > .row,
.page-list_items .container-fluid.p-0 .row,
.page-list_tasks .container-fluid.p-0 .row,
.page-flaglist .container-fluid.p-0 .row,
.page-notices .container-fluid.p-0 .row,
.page-factionlist .container-fluid.p-0 .row {
	margin-left: 0;
	margin-right: 0;
}

.container-fluid.p-0 > .row > [class^="col"],
.container-fluid.p-0 > .row > [class*=" col"] {
	min-width: 0;
}

/* Navbar ei saa pakottaa sivua leveämmäksi kuin viewport */
.status-navbar {
	max-width: 100vw;
	min-width: 0;
}

.status-navbar .navbar-brand,
.status-navbar .navbar-collapse,
.status-navbar .navbar-nav,
.status-navbar .nav-item,
.status-navbar .nav-link,
.status-navbar .status-logout-btn {
	min-width: 0;
}

.status-navbar .navbar-collapse {
	max-width: 100%;
}

@media (min-width: 992px) {
	.status-navbar {
		flex-wrap: wrap;
	}

	.status-navbar .navbar-nav {
		flex-wrap: wrap;
		justify-content: center;
	}
}

.status-event-brand,

#factioninformation {
	min-width: 0;
	max-width: 32vw;
	overflow: hidden;
}

#factions,
.status-faction-points {
	min-width: 0;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

@media (max-width: 991.98px) {
	#factioninformation {
		max-width: 32vw;
	}

	.status-navbar .navbar-collapse {
		width: 100%;
	}
}

/* Pitkät dropdownit eivät saa kasvattaa sivun leveyttä */
.status-navbar .dropdown-menu {
	max-width: calc(100vw - 1rem);
	overflow-x: auto;
}

.status-navbar .dropdown-item {
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Pitkät URL:t, kortit ja mediaelementit eivät saa leventää viewporttia */
img,
svg,
canvas,
video,
iframe,
table {
	max-width: 100%;
}

p,
.card,
.alert,
.dropdown-item,
.taskdetails {
	overflow-wrap: anywhere;
}

/* Status QoL refinements */
.status-navbar .dropdown-toggle {
  max-width: min(34rem, 45vw);
}

.status-navbar .dropdown-toggle,
.status-navbar .dropdown-item {
  gap: .35rem;
}

.status-navbar .dropdown-item.active,
.status-navbar .dropdown-item:active {
  background-color: #52606d;
  color: #fff !important;
}

.status-navbar .dropdown-item .material-icons {
  font-size: 18px;
  vertical-align: middle;
}

.status-logout-btn {
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  justify-content: center;
  flex: 0 0 auto;
}

.status-admin-container .card,
.status-admin-container .alert {
  border-radius: .45rem;
}

.status-admin-container .card-header {
  font-weight: 600;
}

.status-admin-container label {
  font-weight: 500;
}

.status-admin-container .form-text,
.status-admin-container small.text-muted {
  line-height: 1.35;
}

.status-admin-container table th {
  white-space: nowrap;
}

.status-loading-overlay[hidden] {
  display: none !important;
}

.status-loading-overlay {
  position: fixed;
  inset: 0;
  z-index: 20000;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(22, 27, 34, .28);
  backdrop-filter: blur(1px);
}

.status-loading-overlay.is-visible {
  display: flex;
}

.status-loading-card {
  display: inline-flex;
  align-items: center;
  padding: .75rem 1rem;
  border-radius: .5rem;
  background: #fff;
  color: #212529;
  box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .2);
}

@media (max-width: 991.98px) {
  .status-navbar .dropdown-toggle {
    max-width: calc(100vw - 5rem);
  }

  .status-navbar .navbar-collapse {
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .2);
  }

  .status-navbar .navbar-nav .nav-link {
    min-height: 2.75rem;
  }

  .status-navbar .dropdown-item {
    min-height: 2.65rem;
    display: flex;
    align-items: center;
  }

  .status-logout-btn {
    width: 100%;
    height: 2.75rem;
  }

  .status-admin-container .btn {
    min-height: 2.65rem;
  }

  .status-admin-container .modal-dialog {
    margin: .5rem;
  }

  .status-admin-container .modal-content {
    max-height: calc(100vh - 1rem);
  }

  .status-admin-container .modal-body {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}

@media (max-width: 575.98px) {
  .status-navbar .dropdown-toggle {
    max-width: calc(100vw - 4rem);
  }

  .status-admin-container h1,
  .status-admin-container .h1 {
    font-size: 1.75rem;
  }

  .status-admin-container h2,
  .status-admin-container .h2 {
    font-size: 1.45rem;
  }

  .status-admin-container .card-body,
  .status-admin-container .modal-body {
    padding: .85rem;
  }
}

/* ----------------------------------------------------------
   Unified page shell and reusable admin/public components
---------------------------------------------------------- */
.status-page-container {
  min-height: calc(100vh - 56px);
  padding: 1rem 1.25rem 2rem;
  overflow-x: hidden;
}

.status-page-container > .row:first-child,
.status-page-container > .col:first-child,
.status-page-container > div:first-child {
  min-width: 0;
}

.status-page-title {
  margin-bottom: .35rem;
  font-size: 1.5rem;
  line-height: 1.25;
  font-weight: 700;
}

.status-page-header {
  margin-bottom: 1rem;
  border: 0;
  border-radius: .6rem;
  background: #fff;
  box-shadow: 0 .125rem .35rem rgba(0, 0, 0, .08);
}

.status-page-header .card-body {
  padding: 1rem 1.15rem;
}

.status-page-subtitle {
  margin: 0;
  color: #6c757d;
  font-size: .875rem;
  line-height: 1.45;
}

.status-page-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: .5rem;
}

.status-page-actions .btn,
.status-form-actions .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.status-page-actions .material-icons,
.status-form-actions .material-icons {
  font-size: 18px;
}

.status-section-card {
  margin-bottom: 1rem;
  border: 0;
  border-radius: .6rem;
  background: #fff;
  box-shadow: 0 .125rem .35rem rgba(0, 0, 0, .08);
}

.status-section-card > .card-header {
  padding: .85rem 1rem;
  border-bottom: 1px solid rgba(0, 0, 0, .075);
  background: #fff;
  font-weight: 700;
}

.status-section-card > .card-body {
  padding: 1rem;
}

.status-form-shell {
  max-width: 1120px;
  margin-right: auto;
  margin-left: auto;
}

.status-form-card {
  border: 0;
  border-radius: .6rem;
  box-shadow: 0 .125rem .35rem rgba(0, 0, 0, .08);
}

.status-form-card .form-group:last-child {
  margin-bottom: 0;
}

.status-form-actions {
  position: sticky;
  z-index: 20;
  bottom: .5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: .5rem;
  margin-top: 1rem;
  padding: .75rem;
  border: 1px solid rgba(0, 0, 0, .08);
  border-radius: .55rem;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 .35rem 1rem rgba(0, 0, 0, .12);
  backdrop-filter: blur(5px);
}

.status-field-heading,
.status-page-container label > h3 {
  margin: 0 0 .35rem;
  font-size: 1rem;
  line-height: 1.35;
  font-weight: 700;
}

.status-page-container label {
  margin-bottom: .35rem;
  color: #343a40;
  font-weight: 600;
}

.status-page-container .form-text {
  margin-top: .35rem;
  font-size: .82rem;
}

.status-page-container .form-control,
.status-page-container .custom-select {
  min-height: calc(1.5em + .75rem + 2px);
}

.status-page-container textarea.form-control {
  min-height: 7rem;
  resize: vertical;
}

.status-page-container .custom-control-label {
  font-weight: 500;
}

.status-table {
  margin-bottom: 0;
  background: #fff;
}

.status-table thead th {
  border-top: 0;
  border-bottom-width: 1px;
  background: #f8f9fa;
  color: #495057;
  font-size: .78rem;
  letter-spacing: .015em;
  text-transform: uppercase;
  vertical-align: middle;
}

.status-table td {
  vertical-align: middle;
}

.status-page-container .dataTables_wrapper .dataTables_filter input,
.status-page-container .dataTables_wrapper .dataTables_length select {
  border: 1px solid #ced4da;
  border-radius: .25rem;
  background: #fff;
}

.status-empty-state {
  padding: 2.5rem 1rem;
  border: 1px dashed #ced4da;
  border-radius: .6rem;
  background: #f8f9fa;
  text-align: center;
}

.status-empty-state .material-icons {
  margin-bottom: .5rem;
  color: #6c757d;
  font-size: 42px;
}

.status-flash-stack {
  position: fixed;
  z-index: 20050;
  top: 64px;
  right: 1rem;
  width: min(440px, calc(100vw - 2rem));
  pointer-events: none;
}

.status-flash-stack .status-flash {
  width: 100%;
  margin-bottom: .5rem;
  pointer-events: auto;
}

.status-submitting {
  pointer-events: none;
}

.status-page-container .nav-tabs {
  border-bottom: 0;
  gap: .25rem;
}

.status-page-container .nav-tabs .nav-link {
  border: 1px solid #dee2e6;
  border-radius: .4rem;
  background: #fff;
  color: #495057;
}

.status-page-container .nav-tabs .nav-link.active {
  border-color: #007bff;
  background: #007bff;
  color: #fff;
}

.status-page-container .modal-header,
.status-page-container .modal-footer {
  background: #fff;
}

.status-page-container .modal-title {
  font-weight: 700;
}

@media (max-width: 991.98px) {
  .status-page-container,
  .status-admin-container {
    padding-right: .75rem;
    padding-left: .75rem;
  }

  .status-page-actions {
    justify-content: flex-start;
    margin-top: .75rem;
  }
}

@media (max-width: 575.98px) {
  .status-page-container,
  .status-admin-container {
    padding: .65rem .5rem 1.25rem;
  }

  .status-page-title {
    font-size: 1.3rem !important;
  }

  .status-page-header .card-body,
  .status-section-card > .card-body,
  .status-form-card .card-body {
    padding: .85rem;
  }

  .status-page-actions,
  .status-form-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .status-page-actions .btn,
  .status-form-actions .btn {
    width: 100%;
    margin: 0 !important;
  }

  .status-form-actions {
    bottom: .25rem;
  }

  .status-page-container .form-group.row > label[class*="col-"],
  .status-page-container .form-group.row > div[class*="col-"] {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .status-page-container .form-group.row > [class*="offset-"] {
    margin-left: 0;
  }

  .status-page-container .table-responsive {
    font-size: .875rem;
  }

  .status-flash-stack {
    top: 60px;
    right: .5rem;
    width: calc(100vw - 1rem);
  }
}

/* ----------------------------------------------------------
   Mobile field use, intermittent connectivity and PWA support
---------------------------------------------------------- */
:root {
  --status-navbar-height: 56px;
  --status-safe-top: env(safe-area-inset-top, 0px);
  --status-safe-right: env(safe-area-inset-right, 0px);
  --status-safe-bottom: env(safe-area-inset-bottom, 0px);
  --status-safe-left: env(safe-area-inset-left, 0px);
}

body.page-map {
  height: var(--status-viewport-height, 100vh);
  min-height: var(--status-viewport-height, 100vh);
  overflow: hidden;
  box-sizing: border-box;
  overscroll-behavior: none;
}

@supports (height: 100dvh) {
  body.page-map {
    height: var(--status-viewport-height, 100dvh);
    min-height: var(--status-viewport-height, 100dvh);
  }
}

body.page-map #container {
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

body.page-map #image-map {
  width: 100%;
  height: 100%;
  min-height: 0;
  background: #dfe3e7;
}

.status-navbar {
  min-height: var(--status-navbar-height);
  padding-left: max(.5rem, var(--status-safe-left));
  padding-right: max(.5rem, var(--status-safe-right));
}

.status-connectivity[hidden],
.status-map-cache-progress[hidden],
.status-connectivity-actions[hidden] {
  display: none !important;
}

.status-connectivity {
  position: fixed;
  z-index: 20070;
  right: max(.75rem, var(--status-safe-right));
  bottom: max(.75rem, var(--status-safe-bottom));
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  max-width: calc(100vw - 1.5rem - var(--status-safe-left) - var(--status-safe-right));
  border-radius: .7rem;
  background: rgba(33, 37, 41, .94);
  color: #fff;
  box-shadow: 0 .45rem 1.35rem rgba(0, 0, 0, .28);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.status-connectivity-main {
  display: flex;
  align-items: center;
  gap: .42rem;
  min-height: 42px;
  max-width: 100%;
  padding: .48rem .7rem;
  border: 0;
  border-radius: .7rem;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
}

.status-connectivity-main:focus {
  outline: 2px solid rgba(255, 255, 255, .75);
  outline-offset: -2px;
}

.status-connectivity-dot {
  width: .65rem;
  height: .65rem;
  flex: 0 0 auto;
  border-radius: 999px;
  background: #28a745;
  box-shadow: 0 0 0 3px rgba(40, 167, 69, .18);
}

.status-connectivity.is-offline .status-connectivity-dot,
.status-connectivity.is-cached .status-connectivity-dot {
  background: #ffc107;
  box-shadow: 0 0 0 3px rgba(255, 193, 7, .2);
}

.status-connectivity.is-reconnecting .status-connectivity-dot {
  background: #17a2b8;
  animation: statusConnectivityPulse 1.1s infinite alternate;
}

.status-connectivity-label {
  flex: 0 0 auto;
  font-size: .82rem;
  font-weight: 700;
}

.status-connectivity-meta {
  min-width: 0;
  overflow: hidden;
  color: rgba(255, 255, 255, .76);
  font-size: .75rem;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.status-connectivity-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: .4rem;
  width: 100%;
  padding: 0 .55rem .55rem;
}

.status-connectivity-actions .btn {
  min-height: 36px;
  font-size: .75rem;
}

@keyframes statusConnectivityPulse {
  from { opacity: .45; transform: scale(.9); }
  to { opacity: 1; transform: scale(1.08); }
}

.status-map-cache-progress {
  position: fixed;
  z-index: 20075;
  left: 50%;
  bottom: max(4.25rem, calc(var(--status-safe-bottom) + 4.25rem));
  width: min(32rem, calc(100vw - 1.5rem));
  padding: .65rem .85rem;
  border-radius: .55rem;
  background: rgba(33, 37, 41, .95);
  color: #fff;
  box-shadow: 0 .4rem 1.2rem rgba(0, 0, 0, .25);
  font-size: .85rem;
  font-weight: 600;
  text-align: center;
  transform: translateX(-50%);
}

.status-map-cache-progress.is-success { background: rgba(30, 126, 52, .96); }
.status-map-cache-progress.is-warning { background: rgba(133, 100, 4, .97); }

.status-layers-offline-actions {
  display: flex;
  margin: .2rem 0 .75rem;
}

.status-save-offline-map {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  min-height: 42px;
}

.status-save-offline-map .material-icons {
  font-size: 20px;
}

.status-is-offline .status-loading-overlay {
  display: none !important;
}

.status-is-offline .status-submitting {
  pointer-events: auto;
}

@media (max-width: 991.98px) {
  .status-navbar .navbar-toggler,
  .status-navbar .nav-link,
  .status-navbar .dropdown-item,
  .status-page-container .btn,
  .status-page-container .form-control,
  .status-page-container .custom-select,
  .status-page-container .custom-control-label {
    min-height: 44px;
  }

  .status-page-container input,
  .status-page-container select,
  .status-page-container textarea,
  .status-login-form input {
    font-size: 16px;
  }

  .status-form-actions {
    bottom: max(.25rem, var(--status-safe-bottom));
  }

  .leaflet-bar a,
  .leaflet-control-locate a,
  .leaflet-control-zoom a,
  .leaflet-control-fullscreen a,
  .leaflet-control-easy-button-button {
    width: 44px !important;
    height: 44px !important;
    line-height: 44px !important;
    padding: 0 !important;
  }

  .leaflet-touch .leaflet-bar a {
    font-size: 22px;
  }

  .leaflet-popup-content-wrapper {
    max-width: calc(100vw - 2rem);
  }

  .leaflet-popup-content {
    max-width: calc(100vw - 4rem);
    margin: .75rem .85rem;
  }

  .leaflet-control-layers-expanded {
    max-width: calc(100vw - 1.5rem);
    max-height: calc(100dvh - 8rem);
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }
}

@media (max-width: 575.98px) {
  #layers.status-layers-modal {
    padding: 0 !important;
  }

  #layers.status-layers-modal .modal-dialog {
    width: 100%;
    max-width: none;
    height: 100%;
    min-height: 100%;
    margin: 0;
  }

  #layers.status-layers-modal .modal-content {
    height: 100vh;
    min-height: 100vh;
    border-radius: 0;
  }

  @supports (height: 100dvh) {
    #layers.status-layers-modal .modal-content {
      height: 100dvh;
      min-height: 100dvh;
    }
  }

  #layers.status-layers-modal .status-layers-header {
    flex: 0 0 auto;
    padding-top: max(.9rem, var(--status-safe-top));
  }

  #layers.status-layers-modal .modal-body {
    min-height: 0;
    max-height: none !important;
    flex: 1 1 auto;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding-right: max(.75rem, var(--status-safe-right)) !important;
    padding-bottom: max(.75rem, var(--status-safe-bottom)) !important;
    padding-left: max(.75rem, var(--status-safe-left)) !important;
  }

  #layers.status-layers-modal #legendlist {
    min-height: 0;
    max-height: none;
    flex: 1 1 auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  #layers.status-layers-modal .status-layers-filterbar {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #layers.status-layers-modal .filter-btn,
  .status-save-offline-map {
    width: 100%;
    min-height: 44px;
  }

  .status-layers-offline-actions {
    flex: 0 0 auto;
  }

  .status-connectivity {
    right: max(.5rem, var(--status-safe-right));
    bottom: max(.5rem, var(--status-safe-bottom));
    left: max(.5rem, var(--status-safe-left));
    align-items: stretch;
    max-width: none;
  }

  .status-connectivity-main {
    width: 100%;
  }

  .status-connectivity-meta {
    flex: 1 1 auto;
    text-align: right;
  }

  .status-connectivity-actions .btn {
    flex: 1 1 auto;
  }

  .status-flash-stack {
    top: calc(var(--status-navbar-height) + .35rem);
    padding-right: var(--status-safe-right);
    padding-left: var(--status-safe-left);
  }

  .status-page-container .table-responsive {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }
}

@media (prefers-reduced-motion: reduce) {
  .status-connectivity-dot,
  .blinking {
    animation: none !important;
  }
}

/* ----------------------------------------------------------
   Live notices, service-worker notifications and mobile nav
---------------------------------------------------------- */
:root {
  --status-mobile-nav-height: 64px;
}

.status-notice-count[hidden] {
  display: none !important;
}

.status-notices-nav-link {
  gap: .22rem;
}

.status-notices-nav-link .status-notice-count {
  min-width: 1.35rem;
  padding: .18rem .34rem;
  border-radius: 999px;
  font-size: .68rem;
}

.status-notice-stack {
  position: fixed !important;
  z-index: 20060 !important;
  top: calc(var(--status-navbar-height) + var(--status-safe-top) + .55rem);
  left: 50%;
  width: min(48rem, calc(100vw - 1.5rem - var(--status-safe-left) - var(--status-safe-right)));
  max-height: calc(100dvh - var(--status-navbar-height) - 1.25rem - var(--status-safe-top) - var(--status-safe-bottom));
  padding: 0;
  overflow-x: hidden;
  overflow-y: auto;
  pointer-events: none;
  transform: translateX(-50%);
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.status-live-notice {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: .7rem;
  align-items: start;
  margin-bottom: .55rem;
  padding: .8rem;
  border: 1px solid rgba(0, 0, 0, .12);
  border-left: .34rem solid #17a2b8;
  border-radius: .75rem;
  background: rgba(255, 255, 255, .98);
  color: #212529;
  pointer-events: auto;
  transition: opacity .18s ease, transform .18s ease;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.status-live-notice.is-dismissing {
  opacity: 0;
  transform: translateY(-.35rem);
}

.status-live-notice-primary { border-left-color: #007bff; }
.status-live-notice-secondary { border-left-color: #6c757d; }
.status-live-notice-success { border-left-color: #28a745; }
.status-live-notice-danger { border-left-color: #dc3545; }
.status-live-notice-warning { border-left-color: #ffc107; }
.status-live-notice-info { border-left-color: #17a2b8; }
.status-live-notice-light { border-left-color: #adb5bd; }
.status-live-notice-dark { border-left-color: #343a40; }

.status-live-notice-icon {
  margin-top: .05rem;
  font-size: 24px;
  color: #495057;
}

.status-live-notice-body {
  min-width: 0;
}

.status-live-notice-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem;
  margin-bottom: .22rem;
}

.status-live-notice-title {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: .98rem;
  line-height: 1.2;
}

.status-live-notice-cache {
  font-size: .65rem;
  font-weight: 600;
}

.status-live-notice-content {
  overflow-wrap: anywhere;
  font-size: .9rem;
  line-height: 1.42;
}

.status-live-notice-content > :last-child {
  margin-bottom: 0;
}

.status-live-notice-content img,
.status-live-notice-content video,
.status-live-notice-content iframe {
  max-width: 100%;
  height: auto;
}

.status-live-notice-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  margin: -.35rem -.35rem 0 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #495057;
  touch-action: manipulation;
}

.status-live-notice-close:hover,
.status-live-notice-close:focus {
  background: rgba(0, 0, 0, .07);
  color: #212529;
  outline: none;
}

.status-notification-action,
.status-notification-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .38rem;
}

.status-notification-action .material-icons,
.status-notification-toggle .material-icons {
  font-size: 19px;
}

.status-notification-toggle.is-enabled {
  border-color: #28a745;
  color: #218838;
}

.status-mobile-nav {
  display: none;
}

@media (max-width: 767.98px) {
  body:not(.page-map) {
    padding-bottom: calc(var(--status-mobile-nav-height) + var(--status-safe-bottom));
  }

  body.page-map #container {
    height: calc(100% - var(--status-mobile-nav-height) - var(--status-safe-bottom));
  }

  .status-mobile-nav {
    position: fixed;
    z-index: 20050;
    right: 0;
    bottom: 0;
    left: 0;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    height: calc(var(--status-mobile-nav-height) + var(--status-safe-bottom));
    padding: .28rem max(.25rem, var(--status-safe-right)) var(--status-safe-bottom) max(.25rem, var(--status-safe-left));
    border-top: 1px solid rgba(0, 0, 0, .14);
    background: rgba(255, 255, 255, .97);
    box-shadow: 0 -.25rem 1rem rgba(0, 0, 0, .12);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }

  .status-mobile-nav-item {
    position: relative;
    display: flex;
    min-width: 0;
    min-height: 56px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .08rem;
    padding: .2rem .1rem;
    border-radius: .55rem;
    color: #5d646b;
    font-size: .66rem;
    font-weight: 700;
    line-height: 1.05;
    text-align: center;
    text-decoration: none !important;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }

  .status-mobile-nav-item .material-icons {
    font-size: 24px;
    line-height: 1;
  }

  .status-mobile-nav-item.active {
    background: rgba(0, 123, 255, .09);
    color: #0069d9;
  }

  .status-mobile-nav-item:active {
    transform: scale(.96);
  }

  .status-mobile-nav-icon-wrap {
    position: relative;
    display: inline-flex;
  }

  .status-mobile-nav-icon-wrap .status-notice-count {
    position: absolute;
    top: -.38rem;
    right: -.75rem;
    min-width: 1.2rem;
    padding: .12rem .27rem;
    border: 2px solid #fff;
    border-radius: 999px;
    font-size: .58rem;
  }

  .status-connectivity {
    bottom: calc(var(--status-mobile-nav-height) + var(--status-safe-bottom) + .45rem);
  }

  .status-map-cache-progress {
    bottom: calc(var(--status-mobile-nav-height) + var(--status-safe-bottom) + 4.2rem);
  }

  .status-notice-stack {
    top: calc(var(--status-navbar-height) + var(--status-safe-top) + .35rem);
    width: calc(100vw - .8rem - var(--status-safe-left) - var(--status-safe-right));
    max-height: calc(100dvh - var(--status-navbar-height) - var(--status-mobile-nav-height) - var(--status-safe-top) - var(--status-safe-bottom) - .8rem);
  }

  .status-live-notice {
    gap: .5rem;
    margin-bottom: .4rem;
    padding: .66rem;
    border-radius: .65rem;
  }

  .status-live-notice-icon {
    font-size: 22px;
  }

  .status-live-notice-content {
    font-size: .86rem;
  }

  .status-live-notice-close {
    width: 44px;
    height: 44px;
    margin: -.4rem -.4rem 0 0;
  }

  .status-page-container .card,
  .status-page-container .alert,
  .status-page-container .modal-content {
    border-radius: .72rem;
  }

  .status-page-container .table-responsive {
    -webkit-overflow-scrolling: touch;
  }
}

@media (prefers-reduced-motion: reduce) {
  .status-live-notice,
  .status-mobile-nav-item {
    transition: none;
  }
}

/* Keep save bars and loading state clear of the mobile quick navigation. */
.status-loading-overlay {
  z-index: 20100;
}

@media (max-width: 767.98px) {
  .status-form-actions {
    bottom: calc(var(--status-mobile-nav-height) + var(--status-safe-bottom) + .3rem);
  }
}

.status-notice-card-head {
  gap: .6rem;
}

.status-notice-page-dismiss {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 999px;
}


/* Beta mobile header, GPS labels and compact connection indicator */
.status-mobile-event-title {
  display: none;
}

.status-gps-marker {
  overflow: visible !important;
  background: transparent !important;
  border: 0 !important;
}

.status-gps-marker .status-gps-offset-wrap {
  position: relative;
  display: block;
  width: 20px;
  height: 20px;
  overflow: visible;
  transform: none !important;
}

.status-gps-marker .icon_gps {
  position: absolute !important;
  top: 0 !important;
  right: auto !important;
  bottom: auto !important;
  left: 0 !important;
  width: 20px !important;
  height: 20px !important;
  margin: 0 !important;
  box-sizing: border-box;
}

.status-gps-marker .gps_text {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 25px;
  display: block;
  max-width: min(45vw, 260px);
  margin: 0;
  padding: 1px 4px;
  overflow: hidden;
  border-radius: 3px;
  background: rgba(255, 255, 255, .82);
  color: #111;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
  text-overflow: ellipsis;
  text-shadow: none;
  white-space: nowrap;
  transform: translateY(-50%);
  pointer-events: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .18);
}

.status-connectivity {
  width: 36px;
  max-width: calc(100vw - 1.5rem - var(--status-safe-left) - var(--status-safe-right));
  border-radius: 999px;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.status-connectivity-main {
  width: 36px;
  min-width: 36px;
  height: 36px;
  min-height: 36px;
  justify-content: center;
  gap: 0;
  padding: 0;
  border-radius: 999px;
  background: rgba(33, 37, 41, .9);
  box-shadow: 0 .25rem .8rem rgba(0, 0, 0, .28);
}

.status-connectivity-label,
.status-connectivity-meta {
  display: none;
}

.status-connectivity-dot {
  width: .72rem;
  height: .72rem;
}

.status-connectivity.is-expanded {
  width: auto;
  min-width: min(18rem, calc(100vw - 1.5rem));
  border-radius: .7rem;
  background: rgba(33, 37, 41, .96);
  box-shadow: 0 .45rem 1.35rem rgba(0, 0, 0, .28);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.status-connectivity.is-expanded .status-connectivity-main {
  width: 100%;
  min-width: 0;
  height: auto;
  min-height: 42px;
  justify-content: flex-start;
  gap: .42rem;
  padding: .48rem .7rem;
  border-radius: .7rem;
  background: transparent;
  box-shadow: none;
}

.status-connectivity.is-expanded .status-connectivity-label,
.status-connectivity.is-expanded .status-connectivity-meta {
  display: block;
}

.status-connectivity.is-expanded .status-connectivity-meta:empty {
  display: none;
}

@media (max-width: 991.98px) {
  .status-navbar {
    display: flex;
    min-height: 56px;
    flex-wrap: wrap;
    align-items: center;
  }

  .status-navbar #factioninformation {
    order: 1;
    width: auto;
    max-width: 42vw;
    height: auto !important;
    min-height: 0;
    flex: 0 1 auto;
    margin: 0 .35rem 0 0 !important;
    overflow: hidden;
  }

  .status-navbar #factions {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .status-mobile-event-title {
    order: 2;
    display: block;
    min-width: 0;
    flex: 1 1 7rem;
    overflow: hidden;
    color: rgba(255, 255, 255, .94);
    font-size: .88rem;
    font-weight: 600;
    line-height: 1.15;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .status-navbar .navbar-toggler {
    order: 3;
    flex: 0 0 auto;
    margin-right: 0;
    margin-left: auto;
  }

  .status-navbar .navbar-collapse {
    order: 4;
    flex-basis: calc(100% + 1rem);
  }
}

@media (max-width: 359.98px) {
  .status-mobile-event-title {
    display: none;
  }

  .status-navbar #factioninformation {
    max-width: calc(100vw - 4rem);
  }

  .status-navbar .navbar-toggler {
    margin-left: auto;
  }
}

/* Keep the compact connectivity indicator in the actual bottom-right corner. */
.status-connectivity {
  right: calc(var(--status-safe-right) + .5rem) !important;
  bottom: calc(var(--status-safe-bottom) + .5rem) !important;
  left: auto !important;
  align-items: flex-end;
}

@media (max-width: 991.98px) {
  .status-connectivity {
    right: calc(var(--status-safe-right) + .5rem) !important;
    bottom: calc(var(--status-safe-bottom) + .5rem) !important;
    left: auto !important;
  }
}

/* ----------------------------------------------------------
   Beta admin/editor consistency pass
---------------------------------------------------------- */
.status-admin-page {
  min-height: calc(100vh - 56px);
  margin: -1rem -1.25rem -2rem;
  padding: 1rem 1.25rem 2rem;
  background: #f5f6f8;
}

.status-admin-shell {
  width: 100%;
  max-width: 1500px;
  margin: 0 auto;
}

.status-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.15rem;
}

.status-page-header.card {
  padding: 0;
}

.status-page-header > .card-body {
  width: 100%;
}

.status-page-header > :first-child {
  min-width: 0;
}

.status-page-title {
  display: flex;
  align-items: center;
  min-width: 0;
}

.status-page-title .material-icons,
.status-page-title .mdi {
  flex: 0 0 auto;
}

.status-admin-filter-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: 1rem;
}

.status-admin-search {
  width: min(100%, 32rem);
}

.status-public-toolbar-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.status-public-toolbar-heading {
  flex: 1 1 18rem;
  min-width: 0;
}

.status-public-toolbar-controls {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: .5rem;
  min-width: 0;
}

.status-public-toolbar-controls .status-admin-search {
  flex: 0 1 32rem;
  width: 100%;
  max-width: 32rem;
}

.status-public-toolbar-select {
  flex: 0 1 12rem;
  min-width: 10rem;
}

.status-notification-master {
  padding: 1rem;
  border: 1px solid #dee2e6;
  border-radius: .6rem;
  background: #f8f9fa;
}

.status-notification-details {
  margin-top: 1rem;
  padding: .25rem 0 .25rem 1rem;
  border-left: 3px solid #dfe5eb;
}

.status-notification-details[hidden],
.status-manual-faction-selection[hidden] {
  display: none !important;
}

.status-faction-choice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: .5rem .75rem;
}

.status-faction-choice {
  min-height: 42px;
  padding: .55rem .75rem .55rem 2rem;
  border: 1px solid #dee2e6;
  border-radius: .5rem;
  background: #fff;
}

.status-faction-choice-dot {
  display: inline-block;
  width: .7rem;
  height: .7rem;
  margin-right: .35rem;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .18);
  vertical-align: middle;
}

.status-admin-filter-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 0;
}

.status-admin-filter-actions .btn-group {
  justify-content: flex-end;
}

.status-admin-table-card > .card-body {
  padding: 1rem;
}

.status-admin-table-card > .table-responsive,
.status-section-card > .table-responsive {
  border-radius: 0 0 .6rem .6rem;
}

.status-table {
  margin-bottom: 0;
  background: #fff;
}

.status-table thead th {
  border-top: 0;
  border-bottom-width: 1px;
  color: #495057;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .015em;
  text-transform: none;
  white-space: nowrap;
}

.status-table tbody td {
  vertical-align: middle;
}

.status-table .dropdown-toggle::after {
  display: none;
}

.status-admin-tabs .nav-tabs {
  padding: 0 .75rem;
}

.status-admin-tabs .nav-link {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  min-height: 48px;
  border: 0;
  border-bottom: 3px solid transparent;
  color: #5f6368;
  font-weight: 600;
}

.status-admin-tabs .nav-link.active {
  border-bottom-color: #007bff;
  background: transparent;
  color: #007bff;
}

.status-admin-tab-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: .5rem;
  margin-bottom: 1rem;
}

.status-admin-tab-actions .btn,
.status-page-actions .btn {
  gap: .3rem;
}

.status-editor-content > .col,
.status-editor-content > .col.mt-3,
.status-editor-content > .col[style] {
  padding-right: 0 !important;
  padding-left: 0 !important;
}

.status-editor-form > .status-section-card,
.status-editor-form > .card {
  overflow: visible;
}

.status-editor-form .card-header,
.status-form-card .card-header {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: .8rem 1rem;
  border-bottom: 1px solid rgba(0, 0, 0, .075);
  background: #fff;
}

.status-editor-form .card-header strong,
.status-form-card .card-header strong {
  display: inline-flex;
  align-items: center;
}

.status-editor-modal .modal-content {
  overflow: hidden;
  border: 0;
  border-radius: .75rem;
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, .22);
}

.status-editor-modal .modal-header {
  align-items: center;
  min-height: 58px;
  padding: .85rem 1rem;
  border-bottom: 1px solid rgba(0, 0, 0, .08);
  background: #fff;
}

.status-editor-modal .modal-title {
  font-size: 1.05rem;
  font-weight: 700;
}

.status-editor-modal .modal-body {
  padding: 1rem;
  background: #f8f9fa;
}

.status-editor-modal .modal-body > .status-modal-form,
.status-editor-modal .modal-body > .edit-flag-modal,
.status-editor-modal .modal-body > form {
  padding: 1rem;
  border-radius: .6rem;
  background: #fff;
  box-shadow: 0 .125rem .35rem rgba(0, 0, 0, .07);
}

.status-modal-form .form-group:last-child {
  margin-bottom: 0;
}

.status-modal-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: .5rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(0, 0, 0, .08);
}

.status-modal-actions .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

body.page-edit_event .edit-event-page,
body.page-edit_map .status-form-shell,
body.page-edit_sides .status-admin-page,
body.page-edit_flags .status-admin-page,
body.page-edit_gps .status-admin-page,
body.page-alerts .status-admin-page,
body.page-tasks .status-admin-page,
body.page-items .status-admin-page {
  width: 100%;
}

/* Always keep the compact connection indicator in the physical bottom-right corner. */
html body .status-connectivity {
  position: fixed !important;
  top: auto !important;
  right: max(.5rem, var(--status-safe-right)) !important;
  bottom: max(.5rem, var(--status-safe-bottom)) !important;
  left: auto !important;
  margin: 0 !important;
  transform: none !important;
}

@media (max-width: 767.98px) {
  .status-admin-page {
    margin: -.75rem -.75rem -1.5rem;
    padding: .75rem .75rem calc(1.25rem + var(--status-safe-bottom));
  }

  .status-page-header {
    align-items: stretch;
    flex-direction: column;
    padding: .9rem;
  }

  .status-page-header .card-body {
    padding: .9rem !important;
  }

  .status-page-actions {
    width: 100%;
    justify-content: stretch;
  }

  .status-page-actions .btn {
    min-height: 44px;
    flex: 1 1 100%;
  }

  .status-admin-search,
  .status-admin-filter-row,
  .status-admin-filter-row > * {
    width: 100%;
  }

  .status-admin-table-card > .card-body,
  .status-section-card > .card-body {
    padding: .75rem;
  }

  .status-admin-table-card .table-responsive,
  .status-section-card .table-responsive {
    margin-right: -.75rem;
    margin-left: -.75rem;
    width: calc(100% + 1.5rem);
    border-radius: 0;
  }

  .status-admin-tabs .nav-tabs {
    flex-wrap: nowrap;
    padding: 0 .35rem;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .status-admin-tabs .nav-tabs::-webkit-scrollbar {
    display: none;
  }

  .status-admin-tabs .nav-link {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .status-admin-tab-actions {
    justify-content: stretch;
  }

  .status-admin-tab-actions .btn {
    width: 100%;
    min-height: 44px;
  }

  .status-editor-modal .modal-dialog {
    width: auto;
    max-width: none;
    margin: .5rem;
  }

  .status-editor-modal .modal-content {
    max-height: calc(100dvh - 1rem - var(--status-safe-top) - var(--status-safe-bottom));
  }

  .status-editor-modal .modal-body {
    overflow-y: auto;
    padding: .75rem;
  }

  .status-editor-modal .modal-body > .status-modal-form,
  .status-editor-modal .modal-body > .edit-flag-modal,
  .status-editor-modal .modal-body > form {
    padding: .75rem;
  }

  .status-modal-form .form-group.row > label,
  .status-modal-form .form-group.row > [class*="col-"] {
    width: 100%;
    max-width: 100%;
    flex: 0 0 100%;
  }

  .status-modal-form .form-group.row > label {
    margin-bottom: .35rem;
  }

  .status-modal-actions {
    align-items: stretch;
    flex-direction: column-reverse;
  }

  .status-modal-actions .btn {
    width: 100%;
    min-height: 44px;
    margin: 0 !important;
  }

  html body .status-connectivity {
    right: max(.5rem, var(--status-safe-right)) !important;
    bottom: max(.5rem, var(--status-safe-bottom)) !important;
    left: auto !important;
  }
}

/* Higher specificity than legacy page-local wrappers loaded after app_style.css. */
.status-admin-page.status-admin-page {
  min-height: calc(100vh - 56px);
  margin: -1rem -1.25rem -2rem;
  padding: 1rem 1.25rem 2rem;
  background: #f5f6f8;
}

.status-admin-page .status-admin-shell,
.status-admin-page .status-form-shell {
  width: 100%;
  max-width: 1500px;
  margin-right: auto;
  margin-left: auto;
}

@media (max-width: 767.98px) {
  .status-admin-page.status-admin-page {
    margin: -.75rem -.75rem -1.5rem;
    padding: .75rem .75rem calc(1.25rem + var(--status-safe-bottom));
  }
}


/* 2026-07 beta consistency pass */
.status-editor-tabs-header{padding:.75rem 1rem!important;border-bottom:1px solid #e9ecef}.status-editor-subnav{gap:.35rem}.status-editor-subnav .nav-link{display:inline-flex;align-items:center;border-radius:.55rem;padding:.55rem .85rem;color:#495057;font-weight:600}.status-editor-subnav .nav-link.active{background:#4f7df3;color:#fff;box-shadow:0 .2rem .55rem rgba(79,125,243,.25)}.status-compact-toolbar{display:flex;justify-content:flex-end;align-items:center;margin-bottom:1rem}.status-compact-toolbar .btn{display:inline-flex;align-items:center}.status-admin-page .dropdown-toggle .material-icons{line-height:1}.status-gps-device-meta{white-space:normal;line-height:1.35}.status-qr-print-sheet{padding:1rem}.status-qr-print-sheet img{width:min(360px,100%);height:auto}.status-qr-print-sheet h2{margin:1rem 0 .25rem}.status-qr-identifier{font-family:monospace;font-size:1.5rem;font-weight:700}.status-qr-date{margin-top:.75rem;color:#6c757d}.status-empty-state{text-align:center;color:#6c757d}.status-empty-state .material-icons{font-size:42px;display:block;margin-bottom:.35rem}@media(max-width:767.98px){.status-compact-toolbar{justify-content:stretch}.status-compact-toolbar .btn{width:100%;justify-content:center}.status-editor-subnav{flex-wrap:nowrap;overflow-x:auto}.status-editor-subnav .nav-link{white-space:nowrap}}
@media print{body *{visibility:hidden!important}#itemQrPrintSheet,#itemQrPrintSheet *{visibility:visible!important}#itemQrPrintSheet{position:absolute;left:0;top:0;width:100%;padding:20mm}.modal-backdrop,.navbar,.status-mobile-nav{display:none!important}}

/* Event-scoped external API settings */
.status-api-access-card .material-icons {
  vertical-align: middle;
}
.status-api-example {
  padding: .75rem 1rem;
  border: 1px solid #dfe3e8;
  border-radius: .5rem;
  background: #f7f8fa;
  color: #263238;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.status-api-endpoints-table th {
  width: 1%;
  vertical-align: top;
  padding: .65rem .75rem;
}
.status-api-endpoints-table td {
  vertical-align: top;
  padding: .65rem .75rem;
}
.status-api-endpoints-table code {
  display: block;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.font-monospace {
  font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
@media (max-width: 575.98px) {
  .status-api-endpoints-table,
  .status-api-endpoints-table tbody,
  .status-api-endpoints-table tr,
  .status-api-endpoints-table th,
  .status-api-endpoints-table td {
    display: block;
    width: 100%;
  }
  .status-api-endpoints-table tr {
    padding: .55rem .75rem;
    border-bottom: 1px solid #e9ecef;
  }
  .status-api-endpoints-table tr:last-child {
    border-bottom: 0;
  }
  .status-api-endpoints-table th,
  .status-api-endpoints-table td {
    padding: .15rem 0;
    border: 0;
  }
}

/* ----------------------------------------------------------
   Mobile runtime audit pass (2026-07-11)
   Keep editor pages scrollable, compact and free of overlapping controls.
---------------------------------------------------------- */
body:not(.page-map) {
  height: auto;
  min-height: 100%;
  overflow-x: hidden;
  overflow-y: visible;
}

body:not(.page-map) #container {
  height: auto;
  min-height: 0;
}

.status-editor-subnav {
  display: flex !important;
  flex-wrap: nowrap !important;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

.status-editor-subnav > * {
  flex: 0 0 auto;
}

.status-editor-subnav .nav-link {
  min-height: 44px;
  white-space: nowrap;
}

.status-mobile-nav-item > span:last-child {
  display: block;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 991.98px) {
  .status-navbar .navbar-toggler {
    width: 44px;
    min-width: 44px;
    height: 44px;
    padding: .25rem .45rem;
  }

  .status-mobile-event-title {
    padding-right: .25rem;
    padding-left: .25rem;
  }

  .status-navbar .navbar-collapse {
    max-height: calc(100dvh - var(--status-navbar-height) - var(--status-safe-top) - var(--status-safe-bottom));
    overscroll-behavior: contain;
  }
}

@media (max-width: 767.98px) {
  body.status-admin-mode {
    padding-bottom: 0 !important;
  }

  body.status-admin-mode .status-mobile-nav {
    display: none !important;
  }

  body.status-admin-mode .status-form-actions {
    bottom: max(.25rem, var(--status-safe-bottom)) !important;
  }

  body.status-admin-mode .edit-event-page {
    padding-bottom: calc(8.5rem + var(--status-safe-bottom)) !important;
  }

  body.status-admin-mode .edit-event-page .sticky-savebar {
    bottom: var(--status-safe-bottom) !important;
  }

  .status-admin-page .dataTables_wrapper > .row {
    margin-right: 0;
    margin-left: 0;
  }

  .status-admin-page .dataTables_wrapper > .row > [class*="col-"] {
    width: 100%;
    max-width: 100%;
    flex: 0 0 100%;
    padding-right: 0;
    padding-left: 0;
  }

  .status-admin-page .dataTables_length,
  .status-admin-page .dataTables_filter,
  .status-admin-page .dataTables_info,
  .status-admin-page .dataTables_paginate {
    width: 100%;
    margin: 0 0 .65rem;
    text-align: left !important;
  }

  .status-admin-page .dataTables_filter label {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: .3rem;
    margin: 0;
  }

  .status-admin-page .dataTables_filter input {
    width: 100% !important;
    min-width: 0;
    margin-left: 0 !important;
  }

  .status-admin-page .dataTables_length label {
    display: flex;
    align-items: center;
    gap: .45rem;
    margin: 0;
  }

  .status-admin-page .dataTables_paginate .pagination {
    flex-wrap: wrap;
    justify-content: flex-start !important;
  }

  .status-admin-page .table-responsive {
    scrollbar-gutter: stable;
  }

  .status-page-header .status-page-title {
    overflow-wrap: anywhere;
  }
}

@media (max-width: 359.98px) {
  .status-page-container,
  .status-admin-container {
    padding-right: .35rem;
    padding-left: .35rem;
  }

  .status-admin-page.status-admin-page {
    margin-right: -.35rem;
    margin-left: -.35rem;
    padding-right: .35rem;
    padding-left: .35rem;
  }

  .status-page-header,
  .status-page-header .card-body,
  .status-section-card > .card-body,
  .status-form-card .card-body {
    padding-right: .7rem !important;
    padding-left: .7rem !important;
  }
}

@media (max-width: 767.98px) {
  /* Reserve the physical bottom-right corner for the connection indicator. */
  body.status-admin-mode .status-form-actions {
    padding-right: calc(3.25rem + var(--status-safe-right)) !important;
  }

  body.status-admin-mode .edit-event-page .sticky-savebar > .card-body {
    padding-right: calc(3.5rem + var(--status-safe-right)) !important;
  }
}

@media (max-width: 767.98px) {
  /* Keep the clickable connection indicator in the physical corner without
     covering the Notices shortcut. */
  body:not(.status-admin-mode) .status-mobile-nav {
    padding-right: calc(2.9rem + var(--status-safe-right));
  }

  /* Dense admin tables must scroll horizontally instead of wrapping names
     one character per line. */
  .status-admin-page .table-responsive > .status-table,
  .status-admin-page .dataTables_wrapper table.status-table {
    width: max-content !important;
    min-width: max(100%, 42rem);
  }

  .status-admin-page .status-table th,
  .status-admin-page .status-table td {
    white-space: nowrap;
  }

  .status-admin-page .status-table .status-gps-device-meta,
  .status-admin-page .status-table .status-table-wrap,
  .status-admin-page .status-table td[data-status-wrap="true"] {
    min-width: 12rem;
    white-space: normal;
    overflow-wrap: anywhere;
  }
}

/* Do not let global floating UI cover editor dialogs. */
body.modal-open .status-connectivity,
body.modal-open .status-notice-stack,
body.modal-open .status-map-cache-progress {
  visibility: hidden !important;
  pointer-events: none !important;
}

@media (max-width: 991.98px) {
  body.status-menu-open .status-mobile-nav,
  body.status-menu-open .status-connectivity,
  body.status-menu-open .status-notice-stack,
  body.status-menu-open .status-map-cache-progress {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}

@media (max-width: 767.98px) {
  .status-admin-page .dataTables_length label {
    flex-wrap: nowrap;
    white-space: nowrap;
  }

  .status-admin-page .dataTables_length select {
    width: auto !important;
    min-width: 5rem;
    flex: 0 0 5rem;
    margin: 0 !important;
  }
}

/* ----------------------------------------------------------
   Mobile map polish: notice placement, header alignment and
   connectivity indicator position.
---------------------------------------------------------- */
html body .status-notice-stack {
  top: calc(var(--status-navbar-height) + var(--status-safe-top) + .45rem) !important;
  right: auto !important;
  left: 50% !important;
  width: min(32rem, calc(100vw - 1rem - var(--status-safe-left) - var(--status-safe-right))) !important;
  max-width: calc(100vw - 1rem - var(--status-safe-left) - var(--status-safe-right));
  transform: translateX(-50%) !important;
}

html body .status-live-notice {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

html body .status-live-notice-body,
html body .status-live-notice-content {
  min-width: 0;
  max-width: 100%;
}

@media (max-width: 991.98px) {
  .status-navbar .status-mobile-event-title {
    order: 1 !important;
    display: block !important;
    min-width: 0;
    flex: 1 1 auto;
    margin: 0;
    padding: 0 .5rem 0 max(.15rem, var(--status-safe-left));
    text-align: left !important;
  }

  .status-navbar #factioninformation {
    order: 2 !important;
    max-width: 35vw;
    flex: 0 1 auto;
  }

  .status-navbar .navbar-toggler {
    order: 3 !important;
    margin-right: max(.15rem, var(--status-safe-right));
    margin-left: auto !important;
  }

  .status-navbar .navbar-collapse {
    order: 4 !important;
  }
}

@media (max-width: 359.98px) {
  .status-navbar #factioninformation {
    display: none !important;
  }

  .status-navbar .status-mobile-event-title {
    display: block !important;
    font-size: .8rem;
  }
}

@media (max-width: 767.98px) {
  /* The status dot belongs to the map corner, not inside the bottom nav. */
  body.page-map .status-connectivity {
    top: auto !important;
    right: calc(var(--status-safe-right) + .55rem) !important;
    bottom: calc(var(--status-mobile-nav-height) + var(--status-safe-bottom) + .55rem) !important;
    left: auto !important;
  }

  body:not(.status-admin-mode) .status-mobile-nav {
    padding-right: max(.25rem, var(--status-safe-right)) !important;
  }
}

/* Mobile public lists and activity badges */
.status-content-badge,.status-mobile-content-badge{margin-left:.3rem;vertical-align:top}.status-mobile-content-badge{position:absolute;top:.25rem;right:.45rem;font-size:.65rem}.status-mobile-nav a{position:relative}
.status-public-list-page{padding:1rem}.status-public-list-shell{max-width:1320px;margin:0 auto}.status-flags-mobile-cards{display:none}.status-flag-card{background:#fff;border:1px solid #e1e5ea;border-left:5px solid var(--flag-color);border-radius:.75rem;padding:1rem;box-shadow:0 .2rem .7rem rgba(0,0,0,.06)}.status-flag-card-head{display:flex;align-items:center;gap:.75rem}.status-flag-icon img{width:38px;height:38px;object-fit:contain}.status-flag-main{min-width:0;flex:1}.status-flag-main h2{font-size:1rem;margin:0 0 .2rem;overflow-wrap:anywhere}.status-flag-owner{font-size:.82rem;color:#68717b;display:flex;align-items:center;gap:.25rem}.status-flag-owner .material-icons{font-size:16px;color:var(--flag-color)}.status-flag-multiplier{font-weight:700;background:#f1f3f5;border-radius:999px;padding:.25rem .55rem}.status-flag-card-grid{display:grid;grid-template-columns:1fr 1fr;gap:.7rem;margin-top:.85rem}.status-flag-card-grid>div{background:#f7f8fa;border-radius:.5rem;padding:.55rem}.status-flag-card-grid small,.status-flag-card-grid strong{display:block}.status-flag-card-grid small{color:#6c757d;font-size:.7rem;text-transform:uppercase}.status-flag-card-grid strong{font-size:.86rem;margin-top:.15rem}.status-empty-state{text-align:center;padding:2rem;color:#6c757d}.status-empty-state .material-icons{display:block;font-size:40px;margin-bottom:.5rem}
@media(max-width:767.98px){.status-public-list-page{padding:.65rem}.status-public-list-header{align-items:flex-start}.status-public-list-header .status-page-actions{width:auto}.status-flags-table-wrap,.status-flags-list-page .dataTables_wrapper>.row{display:none!important}.status-flags-mobile-cards{display:grid;gap:.65rem;padding:.65rem}.status-login-form{padding:.75rem}.status-login-form .form-control,.status-login-form .btn{width:100%;margin-right:0!important}.status-login-form .custom-control{margin-left:.25rem!important}}

@media (max-width: 767.98px) {
  .status-public-toolbar-controls {
    width: 100%;
    justify-content: stretch;
  }
  .status-public-toolbar-controls .status-admin-search,
  .status-public-toolbar-select {
    flex: 1 1 100%;
    width: 100%;
    max-width: none;
  }
}

/* Unified Leaflet map controls (mobile + Android WebView).
 * Keep every collapsed control on the same 44 x 44 px touch target while
 * allowing the geocoder to expand without changing its height. */
@media (max-width: 991.98px) {
  html body #image-map .leaflet-control-container .leaflet-bar a,
  html body #image-map .leaflet-control-container .leaflet-bar button,
  html body #image-map .leaflet-control-container .leaflet-control-locate a,
  html body #image-map .leaflet-control-container .leaflet-control-fullscreen a,
  html body #image-map .leaflet-control-container .leaflet-control-easy-button-button,
  html body #image-map .leaflet-control-container .leaflet-control-layers-toggle,
  html body #image-map .leaflet-control-container .geocoder-control,
  html body #image-map .leaflet-control-container .geocoder-control-input {
    box-sizing: border-box !important;
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    line-height: 44px !important;
    padding: 0 !important;
  }

  html body #image-map .leaflet-control-container .leaflet-bar button,
  html body #image-map .leaflet-control-container .leaflet-control-easy-button-button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  html body #image-map .leaflet-control-container .leaflet-control-easy-button-button .button-state,
  html body #image-map .leaflet-control-container .leaflet-control-easy-button-button .material-icons {
    width: 44px !important;
    height: 44px !important;
    line-height: 44px !important;
  }

  html body #image-map .leaflet-control-container .fullscreen-icon,
  html body #image-map .leaflet-control-container .leaflet-control-layers-toggle,
  html body #image-map .leaflet-control-container .geocoder-control-input {
    background-size: 26px 26px !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
  }

  html body #image-map .leaflet-control-container .geocoder-control.geocoder-control-expanded,
  html body #image-map .leaflet-control-container .leaflet-touch .geocoder-control.geocoder-control-expanded {
    width: min(275px, calc(100vw - 72px)) !important;
    max-width: calc(100vw - 72px) !important;
  }

  html body #image-map .leaflet-control-container .geocoder-control-expanded .geocoder-control-input {
    width: 100% !important;
    min-width: 0 !important;
    padding: 0 44px 0 12px !important;
    line-height: normal !important;
    background-position: right center !important;
  }

  html body #image-map .leaflet-control-container .geocoder-control-suggestions {
    top: 44px !important;
    margin-top: 6px !important;
    max-height: min(50vh, 320px);
    -webkit-overflow-scrolling: touch;
  }
}

/* WebView viewport and gesture polish. */
html.status-webview,
html.status-webview body {
  overscroll-behavior-y: none;
  -webkit-tap-highlight-color: transparent;
}

html.status-webview body {
  min-height: var(--status-webview-height, 100dvh);
}

html.status-webview #image-map {
  touch-action: pan-x pan-y;
}

/* Final Leaflet control normalization.
 * Leaflet and the bundled plugins use several incompatible defaults (30, 44,
 * 50 and 54 px). Keep every map action on one 44 x 44 px visual/click target
 * on desktop, mobile browsers and Android WebView. */
:root {
  --status-map-control-size: 44px;
  --status-map-control-icon-size: 24px;
}

html body .leaflet-container .leaflet-control-container .leaflet-bar,
html body .leaflet-container .leaflet-control-container .leaflet-control-layers,
html body .leaflet-container .leaflet-control-container .geocoder-control {
  box-sizing: border-box !important;
  border: 0 !important;
  border-radius: 4px !important;
  box-shadow: 0 1px 5px rgba(0, 0, 0, .4) !important;
  background-clip: border-box !important;
}

html body .leaflet-container .leaflet-control-container .leaflet-control-zoom,
html body .leaflet-container .leaflet-control-container .leaflet-control-fullscreen,
html body .leaflet-container .leaflet-control-container .leaflet-control-locate,
html body .leaflet-container .leaflet-control-container .easy-button-container,
html body .leaflet-container .leaflet-control-container .leaflet-control-layers:not(.leaflet-control-layers-expanded),
html body .leaflet-container .leaflet-control-container .geocoder-control:not(.geocoder-control-expanded) {
  width: var(--status-map-control-size) !important;
  min-width: var(--status-map-control-size) !important;
  max-width: var(--status-map-control-size) !important;
}

html body .leaflet-container .leaflet-control-container .leaflet-control-fullscreen,
html body .leaflet-container .leaflet-control-container .leaflet-control-locate,
html body .leaflet-container .leaflet-control-container .easy-button-container,
html body .leaflet-container .leaflet-control-container .leaflet-control-layers:not(.leaflet-control-layers-expanded),
html body .leaflet-container .leaflet-control-container .geocoder-control {
  height: var(--status-map-control-size) !important;
  min-height: var(--status-map-control-size) !important;
  max-height: var(--status-map-control-size) !important;
}

html body .leaflet-container .leaflet-control-container .leaflet-bar > a,
html body .leaflet-container .leaflet-control-container .leaflet-bar > button,
html body .leaflet-container .leaflet-control-container .leaflet-control-locate > a,
html body .leaflet-container .leaflet-control-container .leaflet-control-fullscreen > a,
html body .leaflet-container .leaflet-control-container .easy-button-container > button,
html body .leaflet-container .leaflet-control-container .leaflet-control-layers-toggle,
html body .leaflet-container .leaflet-control-container .geocoder-control-input {
  box-sizing: border-box !important;
  width: var(--status-map-control-size) !important;
  min-width: var(--status-map-control-size) !important;
  max-width: var(--status-map-control-size) !important;
  height: var(--status-map-control-size) !important;
  min-height: var(--status-map-control-size) !important;
  max-height: var(--status-map-control-size) !important;
  padding: 0 !important;
  margin: 0 !important;
  line-height: var(--status-map-control-size) !important;
}

html body .leaflet-container .leaflet-control-container .leaflet-bar > button,
html body .leaflet-container .leaflet-control-container .easy-button-container > button,
html body .leaflet-container .leaflet-control-container .easy-button-container .button-state {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

html body .leaflet-container .leaflet-control-container .easy-button-container .button-state {
  box-sizing: border-box !important;
  width: 100% !important;
  height: 100% !important;
  line-height: 1 !important;
}

html body .leaflet-container .leaflet-control-container .easy-button-container .material-icons,
html body .leaflet-container .leaflet-control-container .leaflet-control-locate a > span {
  font-size: var(--status-map-control-icon-size) !important;
  line-height: 1 !important;
}

html body .leaflet-container .leaflet-control-container .fullscreen-icon,
html body .leaflet-container .leaflet-control-container .leaflet-control-layers-toggle,
html body .leaflet-container .leaflet-control-container .geocoder-control-input {
  background-size: 26px 26px !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

html body .leaflet-container .leaflet-control-container .geocoder-control-input {
  border: 0 !important;
  border-radius: 4px !important;
  text-indent: 0 !important;
  font-size: 16px !important;
}

html body .leaflet-container .leaflet-control-container .geocoder-control.geocoder-control-expanded {
  width: min(275px, calc(100vw - 72px)) !important;
  min-width: 0 !important;
  max-width: calc(100vw - 72px) !important;
}

html body .leaflet-container .leaflet-control-container .geocoder-control-expanded .geocoder-control-input {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  padding: 0 var(--status-map-control-size) 0 12px !important;
  line-height: normal !important;
  background-position: right center !important;
}

html body .leaflet-container .leaflet-control-container .geocoder-control-suggestions {
  top: var(--status-map-control-size) !important;
  margin-top: 6px !important;
}

/* 2026-07-13 Status page shell, telemetry, account menu and offline UX */
html,
body {
  width: 100%;
  min-width: 0;
  margin: 0;
  background: #f5f6f8;
}

.status-page-container {
  width: 100%;
  max-width: none;
  margin: 0 !important;
  padding: 0 !important;
  background: #f5f6f8;
  box-sizing: border-box;
}

.status-page-container > [class*="-page"],
.status-page-container > .status-admin-page,
.status-page-container > .status-public-list-page {
  width: 100%;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  box-sizing: border-box;
}

.status-user-menu-toggle {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  border-radius: .45rem;
}

.status-user-menu-toggle .material-icons {
  font-size: 21px;
}

.status-user-menu-name {
  display: inline-block;
  max-width: 12rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.status-user-dropdown {
  min-width: 17rem;
  padding-top: .45rem;
  padding-bottom: .45rem;
  border: 0;
  border-radius: .65rem;
  box-shadow: 0 .65rem 1.75rem rgba(0, 0, 0, .2);
}

.status-user-dropdown-header {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .55rem 1rem;
  min-width: 0;
}

.status-user-dropdown-header > .material-icons {
  flex: 0 0 auto;
  font-size: 32px;
  color: #6c757d;
}

.status-user-dropdown-header > div {
  min-width: 0;
}

.status-user-dropdown-header strong,
.status-user-dropdown-header small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.status-user-dropdown-header small {
  margin-top: .1rem;
  color: #6c757d;
}

.status-user-dropdown .dropdown-item {
  display: flex;
  align-items: center;
  gap: .55rem;
}

.status-connectivity:not(.is-expanded) .status-connectivity-meta {
  display: none;
}

.status-connectivity.is-expanded .status-connectivity-main {
  width: 100%;
  min-width: 15rem;
  justify-content: flex-start;
}

.status-connectivity.is-expanded .status-connectivity-meta {
  display: block;
  flex: 1 1 auto;
  white-space: normal;
  text-align: right;
}

.status-map-cache-progress {
  text-align: left;
}

.status-map-cache-progress-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: .45rem;
}

.status-map-cache-progress-count {
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, .8);
}

.status-map-cache-progress-track {
  position: relative;
  height: .45rem;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, .22);
}

.status-map-cache-progress-track > span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: #fff;
  transition: width .18s ease-out;
}

.status-map-cache-progress.is-active .status-map-cache-progress-track > span:empty {
  min-width: 4%;
}

.status-map-save-active .material-icons {
  animation: statusMapSavePulse .8s ease-in-out infinite alternate;
}

@keyframes statusMapSavePulse {
  from { opacity: .45; transform: scale(.9); }
  to { opacity: 1; transform: scale(1.08); }
}

.status-telemetry-row {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .32rem;
}

.status-telemetry-icon,
button.status-telemetry-icon {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 32px;
  min-width: 32px;
  height: 32px;
  min-height: 32px;
  padding: 0 !important;
  border-radius: .45rem;
  line-height: 1;
  vertical-align: middle;
}

.status-telemetry-icon .material-icons,
.status-telemetry-icon .material-symbols-outlined {
  font-size: 19px;
  line-height: 1;
}

.status-actions-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  min-width: 36px;
  height: 36px;
  padding: 0 !important;
  border-radius: .45rem;
}

.status-actions-btn::after {
  display: none !important;
}

.status-actions-btn .material-icons {
  margin: 0;
  font-size: 21px;
}

.status-editor-modal .modal-dialog-scrollable .modal-content {
  max-height: calc(100vh - 2rem);
}

.status-editor-modal .modal-body {
  overscroll-behavior: contain;
}

.status-modal-fixed-footer {
  position: sticky;
  z-index: 4;
  bottom: 0;
  flex: 0 0 auto;
  gap: .5rem;
  background: #fff;
  border-top: 1px solid #dee2e6;
  box-shadow: 0 -.35rem .8rem rgba(0, 0, 0, .06);
}

.status-alert-class-list {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem .45rem;
}

.status-alert-class-choice {
  margin-right: 0 !important;
}

.status-add-alert-form .form-group:last-child {
  margin-bottom: 0;
}

/* Keep the public task status, ordering and search controls on one line. */
.status-task-page .status-public-toolbar-controls {
  display: grid;
  grid-template-columns: minmax(9.5rem, auto) minmax(9.5rem, auto) minmax(16rem, 1fr);
  align-items: center;
  gap: .5rem;
  flex: 1 1 36rem;
  width: auto;
  min-width: 0;
}

.status-task-page .status-public-toolbar-select,
.status-task-page .status-task-search {
  width: 100%;
  max-width: none;
  margin: 0;
}

.status-task-page .status-task-search .input-group,
.status-task-page .status-task-search .form-control,
.status-task-page .status-public-toolbar-select {
  min-height: 38px;
}

/* Information page */
.status-info-page {
  min-height: calc(100vh - 56px);
  padding: 1.25rem 1rem 2rem;
  background: #f5f6f8;
}

.status-info-shell {
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
}

.status-info-hero {
  overflow: hidden;
  border-radius: .85rem;
  background: linear-gradient(145deg, #fff, #f4f7fb);
}

.status-info-logo {
  width: 88px;
  height: 88px;
  object-fit: contain;
  border-radius: 1rem;
}

.status-info-brand {
  display: block;
  width: 100%;
  text-align: center;
  font-size: clamp(1.8rem, 4vw, 2.75rem);
  font-weight: 800;
  letter-spacing: -.025em;
  color: #212529;
}

.status-info-hero .lead,
.status-info-event-summary {
  max-width: 780px;
}

.status-info-event-summary {
  color: #495057;
}

.status-info-hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .6rem;
}

.status-info-hero-actions .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
}

.status-info-feature {
  border-radius: .75rem;
}

.status-info-feature .card-body {
  padding: 1.25rem;
}

.status-info-feature-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  margin-bottom: .85rem;
  border-radius: .7rem;
  background: #eef2f7;
}

.status-info-feature-icon .material-icons {
  font-size: 24px;
}

.status-info-steps > div {
  display: flex;
  align-items: flex-start;
  gap: .8rem;
  margin-bottom: .85rem;
}

.status-info-steps > div:last-child {
  margin-bottom: 0;
}

.status-info-steps > div > span {
  display: inline-flex;
  flex: 0 0 30px;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #007bff;
  color: #fff;
  font-weight: 700;
}

.status-info-steps p {
  margin: 0;
}

@media (max-width: 767.98px) {
  .status-user-menu {
    width: 100%;
  }

  .status-user-menu-toggle {
    width: 100%;
    justify-content: center;
  }

  .status-user-dropdown {
    width: 100%;
    min-width: 0;
  }

  .status-task-page .status-public-toolbar-controls {
    grid-template-columns: 9.5rem 9.5rem minmax(15rem, 1fr);
    width: 100%;
    overflow-x: auto;
    padding-bottom: .2rem;
    -webkit-overflow-scrolling: touch;
  }

  .status-info-page {
    padding: .75rem;
  }

  .status-info-hero-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .status-info-hero-actions .btn {
    width: 100%;
  }

  .status-connectivity.is-expanded .status-connectivity-main {
    min-width: min(18rem, calc(100vw - 1.5rem));
  }
}

/* Unified search field with an explicit clear action. */
.status-search-with-clear .input-group {
  width: 100%;
  flex-wrap: nowrap;
}

.status-search-with-clear input[type="search"]::-webkit-search-cancel-button {
  display: none;
}

.status-search-with-clear .status-search-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  min-width: 42px;
  padding: 0;
}

.status-search-with-clear .status-search-clear .material-icons {
  margin: 0;
  font-size: 19px;
}

/* Persistent location sharing indicator next to the connectivity control. */
.status-location-indicator[hidden] {
  display: none !important;
}

.status-location-indicator {
  position: fixed;
  right: calc(.5rem + var(--status-safe-right, 0px) + 2.75rem);
  bottom: calc(.5rem + var(--status-safe-bottom, 0px));
  z-index: 20069;
  display: inline-flex;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid rgba(15, 23, 42, .14);
  border-radius: 999px;
  background: rgba(255, 255, 255, .96);
  color: #64748b;
  box-shadow: 0 .2rem .65rem rgba(15, 23, 42, .16);
  -webkit-tap-highlight-color: transparent;
  transition: opacity .15s ease, transform .15s ease, color .15s ease, background-color .15s ease;
}

.status-location-indicator:hover,
.status-location-indicator:focus {
  transform: translateY(-1px);
  outline: 0;
}

.status-location-indicator .material-icons {
  font-size: 19px;
  line-height: 1;
}

.status-location-indicator.is-success {
  border-color: rgba(25, 135, 84, .26);
  background: rgba(232, 248, 240, .97);
  color: #198754;
}

.status-location-indicator.is-warning {
  border-color: rgba(255, 193, 7, .42);
  background: rgba(255, 249, 230, .98);
  color: #9a6b00;
}

.status-location-indicator.is-muted {
  color: #4776a8;
}

.status-location-queue {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 16px;
  height: 16px;
  padding: 0 3px;
  border: 2px solid #fff;
  border-radius: 999px;
  background: #dc3545;
  color: #fff;
  font: 700 9px/12px system-ui, sans-serif;
  text-align: center;
}

.status-location-queue[hidden] {
  display: none !important;
}

body.modal-open .status-location-indicator,
body.status-menu-open .status-location-indicator {
  opacity: 0;
  pointer-events: none;
}

@media (max-width: 767.98px) {
  body.page-map .status-location-indicator {
    bottom: calc(.5rem + var(--status-safe-bottom, 0px));
  }
}


/* 2026-07-14 final map/location/admin refinements */
.status-floating-dock {
  position: fixed;
  z-index: 20070;
  right: max(.65rem, var(--status-safe-right));
  bottom: max(.65rem, var(--status-safe-bottom));
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .5rem;
  pointer-events: none;
}

.status-floating-dock > * {
  pointer-events: auto;
}

.status-connectivity {
  position: relative !important;
  right: auto !important;
  bottom: auto !important;
  max-width: calc(100vw - 1.3rem - var(--status-safe-left) - var(--status-safe-right));
  border-radius: 999px;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.status-connectivity-main {
  width: 46px;
  min-width: 46px;
  height: 46px;
  min-height: 46px;
  justify-content: center;
  gap: 0;
  padding: 0;
  border-radius: 999px;
  background: #198754;
  color: #fff;
  box-shadow: 0 .3rem .9rem rgba(15, 23, 42, .25);
}

.status-connectivity-icon {
  display: inline-flex;
  font-size: 23px;
  line-height: 1;
}

.status-connectivity:not(.is-expanded) .status-connectivity-dot,
.status-connectivity:not(.is-expanded) .status-connectivity-label,
.status-connectivity:not(.is-expanded) .status-connectivity-meta,
.status-connectivity:not(.is-expanded) .status-connectivity-actions {
  display: none !important;
}

.status-connectivity.is-offline .status-connectivity-main,
.status-connectivity.is-cached .status-connectivity-main {
  background: #b77900;
}

.status-connectivity.is-reconnecting .status-connectivity-main {
  background: #087f8c;
}

.status-connectivity.is-reconnecting .status-connectivity-icon {
  animation: statusControlSpin 1s linear infinite;
}

.status-connectivity.is-expanded {
  width: min(22rem, calc(100vw - 1.3rem));
  border-radius: .75rem;
  background: rgba(33, 37, 41, .96);
  box-shadow: 0 .45rem 1.35rem rgba(0, 0, 0, .3);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.status-connectivity.is-expanded .status-connectivity-main {
  width: 100%;
  min-width: 0;
  height: auto;
  min-height: 46px;
  justify-content: flex-start;
  gap: .45rem;
  padding: .55rem .7rem;
  border-radius: .75rem .75rem 0 0;
  background: transparent;
  box-shadow: none;
}

.status-connectivity.is-expanded .status-connectivity-dot,
.status-connectivity.is-expanded .status-connectivity-label,
.status-connectivity.is-expanded .status-connectivity-meta {
  display: inline-block;
}

.status-connectivity.is-expanded .status-connectivity-icon {
  flex: 0 0 auto;
}

.status-location-shell {
  position: relative;
  order: -1;
}

.status-location-shell[hidden] {
  display: none !important;
}

.status-location-indicator {
  position: relative !important;
  right: auto !important;
  bottom: auto !important;
  width: 46px;
  min-width: 46px;
  height: 46px;
  min-height: 46px;
  border: 0;
  background: #198754;
  color: #fff;
  box-shadow: 0 .3rem .9rem rgba(15, 23, 42, .25);
}

.status-location-indicator.is-success {
  border-color: transparent;
  background: #198754;
  color: #fff;
}

.status-location-indicator.is-warning {
  border-color: transparent;
  background: #b77900;
  color: #fff;
}

.status-location-indicator.is-muted {
  background: #4776a8;
  color: #fff;
}

.status-location-indicator.is-loading .material-icons,
.leaflet-control-locate.status-locate-requesting a::after,
.status-map-utility-busy::after {
  animation: statusControlSpin .9s linear infinite;
}

.status-location-detail {
  position: absolute;
  right: 0;
  bottom: calc(100% + .5rem);
  width: min(21rem, calc(100vw - 1.3rem));
  padding: .75rem;
  border-radius: .7rem;
  background: rgba(33, 37, 41, .97);
  color: #fff;
  box-shadow: 0 .45rem 1.35rem rgba(0,0,0,.3);
  text-align: left;
}

.status-location-detail[hidden] { display: none !important; }
.status-location-detail-head { display:flex; align-items:center; gap:.4rem; margin-bottom:.35rem; }
.status-location-detail-head .material-icons { font-size:20px; }
.status-location-detail-text { margin-bottom:.65rem; font-size:.84rem; line-height:1.35; }
.status-location-detail-text small { display:block; margin-top:.2rem; color:rgba(255,255,255,.72); }
.status-location-stop { width:100%; }

.leaflet-control-locate.status-locate-requesting a {
  position: relative;
}

.leaflet-control-locate.status-locate-requesting a > * {
  visibility: hidden !important;
}

.leaflet-control-locate.status-locate-requesting a::after,
.status-map-utility-busy::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 999px;
  box-sizing: border-box;
}

.status-map-utility-control a {
  position: relative;
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: var(--status-map-control-size, 44px) !important;
  min-width: var(--status-map-control-size, 44px) !important;
  height: var(--status-map-control-size, 44px) !important;
  min-height: var(--status-map-control-size, 44px) !important;
  padding: 0 !important;
  line-height: var(--status-map-control-size, 44px) !important;
}

.status-map-utility-control .material-icons {
  font-size: 22px;
  line-height: 1;
}

.status-map-utility-busy .material-icons {
  visibility: hidden;
}

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

body.modal-open .status-floating-dock,
body.status-menu-open .status-floating-dock {
  opacity: 0;
  pointer-events: none;
}

/* Only the event tab strip scrolls horizontally. The page and tab panes do not. */
.edit-event-page,
.edit-event-page .edit-event-shell,
.edit-event-page .status-event-tabs,
.edit-event-page .status-event-tabs > .card-body,
.edit-event-page .tab-content,
.edit-event-page .tab-pane {
  min-width: 0;
  max-width: 100%;
  overflow-x: clip !important;
}

.edit-event-page .settings-nav {
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scrollbar-width: none;
}

.edit-event-page .settings-nav::-webkit-scrollbar {
  display: none;
}

.edit-event-page .sticky-savebar-slot {
  width: 100%;
  min-height: 84px;
}

.edit-event-page .sticky-savebar {
  position: relative !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  width: 100% !important;
  margin: 0 !important;
  transform: none !important;
  z-index: 1040 !important;
}

.edit-event-page .sticky-savebar.is-floating {
  position: fixed !important;
  left: 50% !important;
  right: auto !important;
  bottom: max(.5rem, var(--status-safe-bottom, 0px)) !important;
  width: min(1220px, calc(100vw - 2rem)) !important;
  transform: translateX(-50%) !important;
}

.edit-event-page .sticky-savebar.is-docked {
  position: relative !important;
  left: auto !important;
  bottom: auto !important;
  width: 100% !important;
  transform: none !important;
}

.edit-event-page {
  padding-bottom: calc(8rem + var(--status-safe-bottom, 0px)) !important;
}

.status-native-editor-modal .modal-content {
  border: 0;
  border-radius: .5rem;
  box-shadow: 0 .5rem 1.5rem rgba(0,0,0,.2);
}

.status-native-editor-modal .modal-header,
.status-native-editor-modal .modal-footer {
  background: #fff;
}

.status-native-editor-modal .modal-body {
  padding: 1rem;
}

@media (max-width: 767.98px) {
  .status-floating-dock {
    right: max(.5rem, var(--status-safe-right));
    bottom: max(.5rem, var(--status-safe-bottom));
  }

  .edit-event-page .sticky-savebar.is-floating {
    bottom: max(.35rem, var(--status-safe-bottom, 0px)) !important;
    width: calc(100vw - 1rem) !important;
  }

  body.status-admin-mode .edit-event-page .sticky-savebar > .card-body {
    padding-right: .75rem !important;
  }
}


/* 2026-07-14 locate feedback and map action labels */
.leaflet-control-locate.status-locate-requesting a > * {
  visibility: visible !important;
}

.leaflet-control-locate.status-locate-requesting a::after {
  display: none !important;
}

.status-locate-spinner {
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 999px;
  box-sizing: border-box;
  animation: statusControlSpin .8s linear infinite;
}

.status-map-utility-control {
  overflow: visible !important;
}

.status-map-utility-control:not(.status-map-actions-control) a::before {
  content: attr(data-status-label);
  position: absolute;
  z-index: 5;
  top: 50%;
  right: calc(100% + .45rem);
  max-width: 15rem;
  padding: .34rem .5rem;
  border-radius: .35rem;
  background: rgba(33, 37, 41, .96);
  color: #fff;
  font: 500 .74rem/1.2 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transform: translate(.2rem, -50%);
  transition: opacity .12s ease, transform .12s ease, visibility .12s ease;
  pointer-events: none;
}

.status-map-utility-control:not(.status-map-actions-control) a:hover::before,
.status-map-utility-control:not(.status-map-actions-control) a:focus-visible::before {
  opacity: 1;
  visibility: visible;
  transform: translate(0, -50%);
}

.status-map-utility-control .status-map-offline-button {
  color: #198754 !important;
}

.status-map-utility-control .status-map-image-button {
  color: #0d6efd !important;
}

@media (hover: none), (max-width: 575.98px) {
  .status-map-utility-control:not(.status-map-actions-control) a::before {
    display: none;
  }
}


/* 2026-07-14 reliable locate states and clearer network indicator */
html body .leaflet-control-locate a {
  transition: color .15s ease, background-color .15s ease, box-shadow .15s ease;
}

html body .leaflet-control-locate.status-locate-idle a {
  color: #495057 !important;
}

html body .leaflet-control-locate.status-locate-requesting a {
  color: #0d6efd !important;
  background: #eef5ff !important;
}

html body .leaflet-control-locate.status-locate-success a {
  color: #198754 !important;
  background: #eaf7ef !important;
  box-shadow: inset 0 0 0 2px rgba(25, 135, 84, .2);
}

html body .leaflet-control-locate.status-locate-error a {
  color: #dc3545 !important;
  background: #fff0f1 !important;
  box-shadow: inset 0 0 0 2px rgba(220, 53, 69, .18);
}

html body .leaflet-control-locate .status-locate-spinner {
  color: #0d6efd;
}

.status-location-indicator.is-danger {
  border-color: transparent;
  background: #dc3545;
  color: #fff;
}

.status-connectivity-icon {
  font-size: 24px !important;
}

.status-connectivity.is-online .status-connectivity-main {
  background: #198754;
}

.status-connectivity.is-offline .status-connectivity-main,
.status-connectivity.is-cached .status-connectivity-main {
  background: #b26a00;
}

/* 2026-07-14 Leaflet LocateControl and permission panel */
html body .leaflet-container .leaflet-control-locate {
  overflow: visible;
}

html body .leaflet-container .leaflet-control-locate > a {
  position: relative;
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: var(--status-map-control-size, 44px) !important;
  min-width: var(--status-map-control-size, 44px) !important;
  height: var(--status-map-control-size, 44px) !important;
  min-height: var(--status-map-control-size, 44px) !important;
  padding: 0 !important;
  line-height: 1 !important;
  border-radius: 2px;
}

html body .leaflet-control-locate .status-leaflet-locate-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 23px;
  line-height: 1;
}

html body .leaflet-control-locate .status-leaflet-locate-spinner {
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 999px;
  box-sizing: border-box;
  font-size: 0;
  line-height: 0;
  animation: statusControlSpin .8s linear infinite;
}

html body .leaflet-control-locate.requesting > a,
html body .leaflet-control-locate.status-locate-requesting > a {
  color: #0d6efd !important;
  background: #eef5ff !important;
  box-shadow: inset 0 0 0 2px rgba(13, 110, 253, .16);
}

html body .leaflet-control-locate.active > a,
html body .leaflet-control-locate.status-locate-success > a {
  color: #198754 !important;
  background: #eaf7ef !important;
  box-shadow: inset 0 0 0 2px rgba(25, 135, 84, .2);
}

html body .leaflet-control-locate.status-locate-error > a {
  color: #dc3545 !important;
  background: #fff0f1 !important;
  box-shadow: inset 0 0 0 2px rgba(220, 53, 69, .18);
}

.leaflet-control-locate-location circle,
.status-own-location-marker circle {
  animation: leaflet-control-locate-throb 4s ease infinite;
}

.status-own-location-accuracy {
  pointer-events: none;
}

.status-connectivity-actions {
  display: block;
  padding: .25rem .65rem .7rem;
}

.status-connectivity-permissions {
  display: grid;
  grid-template-columns: 1fr;
  gap: .4rem;
  padding: .35rem 0 .65rem;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}

.status-connectivity-actions-title {
  display: flex;
  align-items: center;
  gap: .35rem;
  color: rgba(255, 255, 255, .75);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.status-connectivity-actions-title .material-icons {
  font-size: 17px;
}

.status-permission-action {
  display: flex !important;
  align-items: center;
  justify-content: flex-start;
  gap: .45rem;
  width: 100%;
  min-height: 38px;
  text-align: left;
}

.status-permission-action .material-icons {
  flex: 0 0 auto;
  font-size: 20px;
}

.status-permission-action.is-enabled {
  border-color: rgba(25, 135, 84, .45) !important;
  background: #eaf7ef !important;
  color: #146c43 !important;
}

.status-permission-action.is-blocked {
  border-color: rgba(220, 53, 69, .35) !important;
  background: #fff0f1 !important;
  color: #b02a37 !important;
}

.status-permission-action.is-requesting {
  opacity: .82;
}

.status-connectivity-tools {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  padding-top: .65rem;
}

.status-connectivity-tools .btn {
  flex: 1 1 auto;
}

.status-connectivity-main[data-toggle="tooltip"] + .tooltip,
.leaflet-control-locate + .tooltip {
  pointer-events: none;
}

/* 2026-07-14 event savebar alignment and zero-gap docking */
.edit-event-page .sticky-savebar.is-floating {
  position: fixed !important;
  left: 50vw !important;
  right: auto !important;
  bottom: 0 !important;
  width: min(1220px, 100vw) !important;
  max-width: 100vw !important;
  margin: 0 !important;
  border-radius: .65rem .65rem 0 0 !important;
  transform: translateX(-50%) !important;
  box-sizing: border-box;
  z-index: 1060 !important;
}

.edit-event-page .sticky-savebar.is-docked {
  margin: 0 !important;
  border-radius: .5rem !important;
}

@media (max-width: 767.98px) {
  .edit-event-page .sticky-savebar.is-floating {
    left: 50vw !important;
    bottom: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    border-radius: .55rem .55rem 0 0 !important;
  }
}

/* One compact Leaflet map-actions dropdown for offline save and JPG export. */
.status-map-actions-control {
  position: relative;
  overflow: visible !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.status-map-actions-control a::before,
.status-map-actions-control a::after {
  content: none !important;
  display: none !important;
}

.status-map-actions-control .status-map-actions-trigger {
  position: relative;
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: var(--status-map-control-size, 44px) !important;
  min-width: var(--status-map-control-size, 44px) !important;
  height: var(--status-map-control-size, 44px) !important;
  min-height: var(--status-map-control-size, 44px) !important;
  padding: 0 !important;
  border-radius: 4px !important;
  background: #fff;
  color: #343a40;
  box-shadow: 0 1px 5px rgba(0,0,0,.35);
  text-decoration: none;
}

.status-map-actions-control .status-map-actions-trigger:hover,
.status-map-actions-control .status-map-actions-trigger:focus-visible,
.status-map-actions-control.is-open .status-map-actions-trigger {
  background: #f8f9fa;
  color: #0d6efd;
}

.status-map-actions-control .status-map-actions-trigger > .material-icons:first-child {
  font-size: 22px;
}

.status-map-actions-caret {
  position: absolute;
  right: 1px;
  bottom: 1px;
  font-size: 13px !important;
  line-height: 1;
}

.status-map-actions-menu {
  position: absolute;
  top: calc(100% + .4rem);
  right: 0;
  z-index: 1001;
  width: min(18rem, calc(100vw - 1rem));
  padding: .35rem;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: .55rem;
  background: #fff;
  box-shadow: 0 .5rem 1.25rem rgba(0,0,0,.2);
}

.status-map-actions-menu[hidden] {
  display: none !important;
}

.status-map-action-item {
  position: relative;
  display: flex;
  width: 100%;
  min-height: 42px;
  align-items: center;
  gap: .55rem;
  padding: .55rem .65rem;
  border: 0;
  border-radius: .4rem;
  background: transparent;
  color: #212529;
  font: inherit;
  text-align: left;
}

.status-map-action-item:hover,
.status-map-action-item:focus-visible {
  background: #f1f3f5;
  outline: none;
}

.status-map-action-item + .status-map-action-item {
  margin-top: .15rem;
}

.status-map-action-item .material-icons {
  flex: 0 0 auto;
  font-size: 21px;
}

.status-map-action-item.status-map-offline-button .material-icons {
  color: #198754;
}

.status-map-action-item.status-map-image-button .material-icons {
  color: #0d6efd;
}

.status-map-action-item.status-map-utility-busy {
  color: #6c757d;
}

/* Saved/downloaded map history in user settings. */
.status-map-storage-note {
  display: flex;
  align-items: flex-start;
  margin-bottom: 1.25rem;
}

.status-map-storage-note > .material-icons {
  flex: 0 0 auto;
  color: #0d6efd;
}

.status-map-history-list {
  display: grid;
  gap: .6rem;
}

.status-map-history-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: .75rem;
  padding: .75rem;
  border: 1px solid #dee2e6;
  border-radius: .55rem;
  background: #fff;
}

.status-map-history-icon {
  display: inline-flex;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #e9ecef;
  color: #495057;
}

.status-map-history-icon.is-offline {
  background: rgba(25,135,84,.12);
  color: #198754;
}

.status-map-history-icon.is-download {
  background: rgba(13,110,253,.12);
  color: #0d6efd;
}

.status-map-history-content {
  min-width: 0;
}

.status-map-history-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem .8rem;
  margin-top: .3rem;
  color: #6c757d;
  font-size: .76rem;
  line-height: 1.35;
}

.status-map-history-actions {
  display: flex;
  gap: .35rem;
}

.status-map-history-empty {
  display: flex;
  min-height: 88px;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  padding: 1rem;
  border: 1px dashed #ced4da;
  border-radius: .55rem;
  color: #6c757d;
  text-align: center;
}

@media (max-width: 575.98px) {
  .status-map-history-item {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .status-map-history-actions {
    grid-column: 1 / -1;
    justify-content: flex-end;
  }
}

html body.status-admin-mode .edit-event-page .sticky-savebar.is-floating {
  left: 50vw !important;
  right: auto !important;
  bottom: 0 !important;
  width: min(1220px, 100vw) !important;
  max-width: 100vw !important;
  margin: 0 !important;
  transform: translateX(-50%) !important;
}

@media (max-width: 767.98px) {
  html body.status-admin-mode .edit-event-page .sticky-savebar.is-floating {
    bottom: 0 !important;
    width: 100vw !important;
  }
}

/* 2026-07-14 User settings: one page scrollbar only. The global page shell has
 * no padding, so the legacy negative admin-page margins must not be applied. */
body.page-user_settings {
  height: auto !important;
  min-height: 100% !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

body.page-user_settings .status-page-container,
body.page-user_settings .user-settings-page,
body.page-user_settings .user-settings-shell,
body.page-user_settings .tab-content,
body.page-user_settings .tab-pane {
  height: auto !important;
  max-height: none !important;
  overflow-y: visible !important;
}

body.page-user_settings .user-settings-page.status-admin-page {
  min-height: calc(100vh - var(--status-navbar-height, 56px)) !important;
  margin: 0 !important;
  padding: 1rem 1.25rem calc(2rem + var(--status-safe-bottom, 0px)) !important;
}

body.page-user_settings .settings-nav {
  overflow-y: hidden !important;
  scrollbar-width: none;
}

body.page-user_settings .settings-nav::-webkit-scrollbar {
  display: none;
}

@media (max-width: 767.98px) {
  body.page-user_settings .user-settings-page.status-admin-page {
    padding: .75rem .75rem calc(1.25rem + var(--status-safe-bottom, 0px)) !important;
  }
}

/* ----------------------------------------------------------
   System maintenance and GPS administration
---------------------------------------------------------- */
.status-system-summary-card,
.status-gps-summary-card {
  border: 0;
  border-radius: .75rem;
  box-shadow: 0 .15rem .55rem rgba(23, 34, 48, .08);
}

.status-system-summary-card .card-body,
.status-gps-summary-card .card-body {
  display: flex;
  align-items: center;
  gap: .8rem;
  min-height: 92px;
  padding: 1rem;
}

.status-system-summary-card .material-icons,
.status-gps-summary-card .material-icons {
  flex: 0 0 auto;
  font-size: 2rem;
}

.status-system-summary-card small,
.status-gps-summary-card small {
  display: block;
  color: #6c757d;
  font-weight: 600;
}

.status-system-summary-card strong,
.status-gps-summary-card strong {
  display: block;
  color: #212529;
  font-size: 1.25rem;
  line-height: 1.15;
}

.status-system-definition-list dt {
  color: #495057;
  font-weight: 600;
}

.status-system-definition-list code {
  display: inline-block;
  max-width: 100%;
  padding: .15rem .35rem;
  overflow-wrap: anywhere;
  border-radius: .3rem;
  background: #f1f3f5;
  color: #343a40;
}

.status-system-cache-progress {
  height: 1.15rem;
  border-radius: 999px;
}

.status-system-danger-action .btn,
.status-system-admin-page .status-page-actions .btn {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}

.status-gps-admin-page .status-page-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.status-gps-filter-note {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
}

.status-gps-filter-note .material-icons {
  font-size: 1.05rem;
}

.status-gps-table {
  min-width: 1080px;
}

.status-gps-table tbody td {
  padding-top: .8rem;
  padding-bottom: .8rem;
}

.status-gps-row-disabled > td {
  background: rgba(108, 117, 125, .055);
}

.status-gps-row-attention > td:first-child {
  box-shadow: inset 3px 0 0 #ffc107;
}

.status-gps-device-cell {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  min-width: 13rem;
}

.status-gps-device-icon {
  display: inline-flex;
  flex: 0 0 2.5rem;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: .65rem;
  background: color-mix(in srgb, var(--gps-color, #007bff) 14%, white);
  color: var(--gps-color, #007bff);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gps-color, #007bff) 28%, transparent);
}

@supports not (background: color-mix(in srgb, red 10%, white)) {
  .status-gps-device-icon {
    background: #f1f3f5;
  }
}

.status-gps-device-copy {
  min-width: 0;
}

.status-gps-device-copy strong,
.status-gps-device-copy small {
  display: block;
}

.status-gps-device-copy strong {
  max-width: 16rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.status-gps-device-copy small {
  color: #6c757d;
}

.status-gps-location-cell {
  min-width: 17rem;
}

.status-gps-coordinates,
.status-gps-mgrs {
  display: flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  gap: .2rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: .82rem;
}

.status-gps-coordinates .material-icons {
  font-size: 1rem;
}

.status-gps-mgrs {
  margin-top: .15rem;
  color: #495057;
}

.status-gps-location-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem;
  margin: .4rem 0 .25rem;
}

.status-gps-no-location {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  color: #6c757d;
}

.status-gps-no-location .material-icons {
  font-size: 1.15rem;
}

.status-gps-telemetry,
.status-gps-visibility-icons,
.status-gps-layer-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .3rem;
}

.status-gps-layer-list .badge {
  max-width: 12rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.status-gps-faction {
  display: flex;
  align-items: center;
  gap: .35rem;
  color: #495057;
}

.status-gps-faction-dot {
  display: inline-block;
  flex: 0 0 .65rem;
  width: .65rem;
  height: .65rem;
  border-radius: 50%;
  background: var(--faction-color, #6c757d);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .2);
}

.status-gps-table .dropdown-menu .material-icons,
.status-system-admin-page .dropdown-menu .material-icons {
  margin-right: .35rem;
  font-size: 1.1rem;
  vertical-align: text-bottom;
}

@media (max-width: 767.98px) {
  .status-system-summary-card .card-body,
  .status-gps-summary-card .card-body {
    min-height: 82px;
    padding: .8rem;
  }

  .status-system-summary-card .material-icons,
  .status-gps-summary-card .material-icons {
    font-size: 1.55rem;
  }

  .status-system-summary-card strong,
  .status-gps-summary-card strong {
    font-size: 1.05rem;
  }

  .status-gps-filter-note {
    width: 100%;
  }

  .status-system-definition-list dt {
    margin-top: .55rem;
  }
}

/* GPS editor telemetry and location modal */
.status-gps-location-telemetry {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem;
  margin-top: .35rem;
}
.status-gps-location-telemetry .badge,
.status-gps-location-meta .badge {
  line-height: 1.25;
}
.status-gps-location-map {
  width: 100%;
  height: min(62vh, 620px);
  min-height: 340px;
  background: #eef1f4;
}
#location .modal-content {
  overflow: hidden;
}
#location .leaflet-container {
  font: inherit;
}
@media (max-width: 767.98px) {
  .status-gps-location-map {
    height: 58vh;
    min-height: 300px;
  }
}

/* 2026-07-14: user-focused info page shortcuts and help. */
.status-info-shortcuts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .75rem;
}
.status-info-shortcut {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: .65rem;
  align-items: center;
  min-width: 0;
  padding: .85rem;
  border: 1px solid #e2e6ea;
  border-radius: .65rem;
  background: #fff;
  color: #212529;
  text-decoration: none !important;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.status-info-shortcut:hover,
.status-info-shortcut:focus {
  border-color: #b8c7d9;
  box-shadow: 0 .25rem .8rem rgba(0,0,0,.08);
  transform: translateY(-1px);
  color: #212529;
}
.status-info-shortcut > .material-icons {
  grid-row: 1 / 3;
  font-size: 30px;
}
.status-info-shortcut strong,
.status-info-shortcut small {
  min-width: 0;
}
.status-info-shortcut small {
  color: #6c757d;
  line-height: 1.25;
}
.status-info-help-list dt {
  margin-top: .85rem;
  color: #343a40;
}
.status-info-help-list dt:first-child { margin-top: 0; }
.status-info-help-list dd {
  margin: .15rem 0 0;
  color: #6c757d;
}

/* Public flag list uses the same toolbar/search dimensions as tasks, items and notices. */
.status-flags-list-page .status-public-list-toolbar .status-flag-search {
  flex: 0 1 32rem;
  width: 100%;
  max-width: 32rem;
}
.status-flags-list-page .status-public-refresh {
  min-height: 38px;
  white-space: nowrap;
}

/* 2026-07-14 connectivity actions */
.status-connectivity-tools .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
}

.status-connectivity-tools .btn .material-icons {
  font-size: 18px;
  line-height: 1;
}


/* 2026-07-15 mobile map dock: keep connection/location controls above bottom navigation. */
@media (max-width: 767.98px) {
  body.page-map .status-floating-dock {
    right: calc(var(--status-safe-right) + .65rem) !important;
    bottom: calc(var(--status-mobile-nav-height) + var(--status-safe-bottom) + .65rem) !important;
    max-height: calc(100dvh - var(--status-navbar-height) - var(--status-mobile-nav-height) - var(--status-safe-top) - var(--status-safe-bottom) - 1.3rem);
  }

  body.page-map .status-connectivity.is-expanded {
    max-height: calc(100dvh - var(--status-navbar-height) - var(--status-mobile-nav-height) - var(--status-safe-top) - var(--status-safe-bottom) - 1.3rem);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}


/* Compact login form for the dark main navigation. */
.status-login-form {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: .4rem;
  min-width: 0;
}
.status-login-form .status-login-input {
  width: 10.5rem;
  min-width: 7.5rem;
  height: 34px;
  margin: 0;
  border-color: rgba(255, 255, 255, .28);
  background: rgba(255, 255, 255, .96);
}
.status-login-remember {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  margin: 0;
  padding: .25rem .55rem .25rem 1.9rem;
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: .3rem;
  background: rgba(255, 255, 255, .08);
  white-space: nowrap;
}
.status-login-remember .custom-control-label {
  color: #f8f9fa;
  font-size: .78rem;
  line-height: 1.15;
  cursor: pointer;
}
.status-login-remember .custom-control-label::before,
.status-login-remember .custom-control-label::after {
  top: 50%;
  left: -1.4rem;
  transform: translateY(-50%);
}
.status-login-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .3rem;
  min-height: 34px;
  white-space: nowrap;
}
.status-login-error-wrap {
  max-width: 16rem;
  padding: .28rem .48rem;
  border: 1px solid rgba(255, 173, 181, .35);
  border-radius: .3rem;
  background: rgba(220, 53, 69, .2);
  color: #ffe1e4;
  font-size: .76rem;
  line-height: 1.2;
}
@media (max-width: 991.98px) {
  .status-login-form {
    width: 100%;
    flex-wrap: wrap;
    padding-bottom: .35rem;
  }
  .status-login-form .status-login-input {
    flex: 1 1 11rem;
    width: auto;
  }
  .status-login-error-wrap {
    flex: 1 0 100%;
    max-width: none;
    order: -1;
  }
}


/* Shared public search control: items, notices, tasks and flags. */
.status-public-search {
  flex: 0 1 32rem;
  width: 100%;
  max-width: 32rem;
  margin: 0;
}
.status-public-search .input-group,
.status-public-search .input-group-prepend,
.status-public-search .input-group-append,
.status-public-search .input-group-text,
.status-public-search .form-control,
.status-public-search .status-search-clear {
  min-height: 38px;
}
.status-public-search .input-group-text,
.status-public-search .form-control,
.status-public-search .status-search-clear {
  border-color: #ced4da;
}
.status-public-search .input-group-text {
  width: 42px;
  justify-content: center;
  padding: 0;
  color: #6c757d;
}
.status-public-search .form-control {
  height: 38px;
  background: #fff;
  box-shadow: none;
}
.status-public-search .form-control:focus {
  position: relative;
  z-index: 3;
  border-color: #80bdff;
  box-shadow: 0 0 0 .2rem rgba(0, 123, 255, .15);
}
.status-public-search .status-search-clear {
  height: 38px;
  background: #fff;
  color: #6c757d;
}
@media (max-width: 767.98px) {
  .status-public-search {
    flex: 1 1 100%;
    max-width: none;
  }
}

.status-gps-accuracy-circle {
  pointer-events: none;
}

.status-logout-form {
  margin: 0;
}
.status-logout-form .dropdown-item {
  width: 100%;
  border: 0;
  background: transparent;
  text-align: left;
}

/* Unified public list shell, toolbar and search control. */
.status-public-list-page {
  min-height: calc(100vh - 90px);
  padding: 1.25rem 1rem 2rem;
  background: #f5f6f8;
}
.status-public-list-shell {
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
}
.status-public-list-toolbar {
  position: sticky;
  top: .5rem;
  z-index: 20;
  overflow: visible;
  border-radius: .75rem;
}
.status-public-list-toolbar > .card-body { padding: 1rem !important; }
.status-public-list-toolbar .status-public-toolbar-row { align-items: center; }
.status-public-list-toolbar .status-public-toolbar-controls {
  display: flex;
  gap: .5rem;
}
.status-public-list-toolbar .status-unified-search {
  flex: 0 1 32rem;
  width: min(100%, 32rem);
  max-width: 32rem;
  margin: 0;
}
.status-public-list-toolbar .status-unified-search .input-group { height: 40px; }
.status-public-list-toolbar .status-unified-search .input-group-text,
.status-public-list-toolbar .status-unified-search .form-control,
.status-public-list-toolbar .status-unified-search .status-search-clear {
  height: 40px;
  min-height: 40px;
  border-color: #ced4da;
  background: #fff;
}
.status-public-list-toolbar .status-unified-search .input-group-text {
  width: 42px;
  justify-content: center;
  padding: 0;
  border-radius: .4rem 0 0 .4rem;
}
.status-public-list-toolbar .status-unified-search .form-control {
  min-width: 0;
  padding: .45rem .65rem;
  border-left: 0;
  border-right: 0;
  box-shadow: none;
}
.status-public-list-toolbar .status-unified-search .form-control:focus {
  position: relative;
  z-index: 3;
  border-color: #80bdff;
  box-shadow: 0 0 0 .2rem rgba(0, 123, 255, .15);
}
.status-public-list-toolbar .status-unified-search .status-search-clear {
  display: inline-flex;
  width: 42px;
  min-width: 42px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 0 .4rem .4rem 0;
  color: #6c757d;
}
.status-public-list-toolbar .status-unified-search .status-search-clear:hover {
  background: #f1f3f5;
  color: #343a40;
}
.status-public-list-toolbar .status-public-toolbar-select,
.status-public-list-toolbar .status-public-refresh { min-height: 40px; }
@media (max-width: 767.98px) {
  .status-public-list-page { padding: .75rem; }
  .status-public-list-toolbar { position: static; }
  .status-public-list-toolbar .status-public-toolbar-heading,
  .status-public-list-toolbar .status-public-toolbar-controls,
  .status-public-list-toolbar .status-unified-search {
    flex: 1 1 100%;
    width: 100%;
    max-width: none;
  }
  .status-public-list-toolbar .status-public-toolbar-controls {
    display: flex;
    justify-content: stretch;
    overflow: visible;
  }
  .status-public-list-toolbar .status-public-toolbar-select { flex: 1 1 calc(50% - .25rem); }
  .status-public-list-toolbar .status-public-refresh { flex: 0 0 auto; }
}

/* Shared AJAX editor sections for factions, flags and GPS devices. */
.status-modal-form .status-modal-section {
  padding: 1rem;
  margin-bottom: 1rem;
  border: 1px solid #e1e5e9;
  border-radius: .65rem;
  background: #fff;
}
.status-modal-form .status-modal-section-title {
  display: flex;
  align-items: center;
  gap: .4rem;
  margin-bottom: .9rem;
  color: #495057;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .035em;
  text-transform: uppercase;
}
.status-modal-form .status-modal-section-title .material-icons {
  font-size: 1.15rem;
  color: #007bff;
}
.status-gps-source-panel {
  padding: .85rem;
  border: 1px solid #e8ebee;
  border-radius: .5rem;
  background: #f8f9fa;
}
.status-gps-editor-form .select2-container,
.status-side-editor-form .select2-container {
  width: 100% !important;
}
.status-flag-add-row .card-header {
  padding: .65rem .85rem;
}
.status-flag-add-row .card-body {
  padding: .9rem;
}

/* Wide, consistent task and item editor modal. */
.status-content-editor-modal .modal-dialog {
  width: calc(100vw - 2rem);
  max-width: 1420px;
  margin: 1rem auto;
}
.status-content-editor-modal .modal-content {
  min-height: calc(100vh - 2rem);
  overflow: hidden;
}
.status-content-editor-modal .modal-header,
.status-content-editor-modal .modal-footer {
  flex: 0 0 auto;
}
.status-content-editor-modal .modal-body {
  padding: 1rem;
  overflow-x: hidden;
  background: #f5f6f8;
}
.status-content-editor-modal .status-content-editor-loading {
  min-height: 15rem;
}
.status-content-editor-modal .status-embedded-editor > script,
.status-content-editor-modal .status-embedded-editor > link {
  display: none;
}
.status-content-editor-modal .status-embedded-editor .status-form-shell,
.status-content-editor-modal .status-embedded-editor .status-editor-content,
.status-content-editor-modal .status-embedded-editor .status-admin-editor,
.status-content-editor-modal .status-embedded-editor .status-admin-editor-shell {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  min-height: 0;
  background: transparent;
}
.status-content-editor-modal .status-embedded-editor > .status-form-shell > .col,
.status-content-editor-modal .status-embedded-editor .status-editor-content > .col,
.status-content-editor-modal .status-embedded-editor .status-editor-content > .col.mt-3 {
  padding: 0;
  margin-top: 0 !important;
}
.status-content-editor-modal .status-embedded-editor .status-section-card,
.status-content-editor-modal .status-embedded-editor .status-form-card {
  margin-bottom: 1rem;
  border: 1px solid #dee2e6;
  border-radius: .65rem;
  box-shadow: 0 .15rem .45rem rgba(0,0,0,.04);
}
.status-content-editor-modal .status-embedded-editor .ck-editor__editable_inline {
  min-height: 240px;
  max-height: 48vh;
}
.status-content-editor-modal .status-embedded-editor #middle_point_map {
  min-height: 340px;
  max-height: 50vh;
}
.status-content-editor-modal .status-content-editor-request-error {
  position: sticky;
  top: 0;
  z-index: 5;
}
@media (max-width: 767.98px) {
  .status-content-editor-modal {
    padding-right: 0 !important;
  }
  .status-content-editor-modal .modal-dialog {
    width: 100%;
    max-width: none;
    height: 100%;
    margin: 0;
  }
  .status-content-editor-modal .modal-content {
    min-height: 100%;
    height: 100%;
    border: 0;
    border-radius: 0;
  }
  .status-content-editor-modal .modal-body {
    padding: .75rem;
  }
  .status-content-editor-modal .status-embedded-editor .ck-editor__editable_inline {
    min-height: 200px;
    max-height: none;
  }
  .status-content-editor-modal .status-embedded-editor #middle_point_map {
    min-height: 280px;
  }
}


/* ----------------------------------------------------------
   Unified modal sizing and presentation (R3)
---------------------------------------------------------- */
.status-app-modal .modal-dialog {
  width: calc(100% - 2rem);
  margin: 1.5rem auto;
}
.status-app-modal .modal-content {
  max-height: calc(100dvh - 3rem);
  overflow: hidden;
  border: 0;
  border-radius: .7rem;
  box-shadow: 0 1rem 2.75rem rgba(0, 0, 0, .22);
}
.status-app-modal .modal-header {
  flex: 0 0 auto;
  align-items: center;
  min-height: 56px;
  padding: .8rem 1rem;
  border-bottom: 1px solid rgba(0, 0, 0, .08);
  background: #fff !important;
}
.status-app-modal .modal-title {
  min-width: 0;
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.3;
}
.status-app-modal .modal-header .close {
  flex: 0 0 auto;
  margin: -.45rem -.35rem -.45rem auto;
  padding: .75rem;
}
.status-app-modal .modal-body {
  min-height: 0;
  padding: 1rem;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: #f7f8fa;
  -webkit-overflow-scrolling: touch;
}
.status-app-modal .modal-footer {
  flex: 0 0 auto;
  gap: .5rem;
  padding: .75rem 1rem;
  border-top: 1px solid rgba(0, 0, 0, .08);
  background: #fff;
}
.status-app-modal .modal-footer .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  margin: 0;
}
.status-modal-compact .modal-dialog { max-width: 480px; }
.status-modal-standard .modal-dialog { max-width: 680px; }
.status-modal-wide .modal-dialog { max-width: 860px; }
.status-modal-detail .modal-dialog { max-width: 960px; }
.status-modal-map .modal-dialog { max-width: 960px; }
.status-modal-content .modal-dialog { max-width: 1100px; }
.status-app-modal.status-editor-modal .modal-body,
.status-app-modal.status-native-editor-modal .modal-body,
.status-app-modal.status-content-editor-modal .modal-body { background: #f5f6f8; }
.status-app-modal.status-editor-modal .modal-body > .status-modal-form,
.status-app-modal.status-editor-modal .modal-body > .edit-flag-modal,
.status-app-modal.status-editor-modal .modal-body > form {
  padding: 1rem;
  border-radius: .6rem;
  background: #fff;
  box-shadow: 0 .125rem .35rem rgba(0, 0, 0, .06);
}
.status-content-editor-modal .modal-dialog {
  width: calc(100% - 2rem);
  max-width: 1100px;
  margin: 1.5rem auto;
}
.status-content-editor-modal .modal-content {
  width: 100%;
  min-height: 0;
  height: auto;
  max-height: calc(100dvh - 3rem);
}
.status-content-editor-modal .modal-body { padding: 1rem; }
.status-content-editor-modal .status-content-editor-loading { min-height: 10rem; }
.status-content-editor-modal .status-embedded-editor .ck-editor__editable_inline {
  min-height: 210px;
  max-height: 42vh;
}
.status-content-editor-modal .status-embedded-editor #middle_point_map {
  min-height: 300px;
  max-height: 42vh;
}
.status-modal-detail .modal-body,
.status-modal-map .modal-body.p-0 { background: #fff; }
.status-modal-map .status-gps-location-map,
.status-modal-map .status-task-modal-map,
.status-modal-map #item_location_map,
.status-modal-map #task_location_map,
.status-modal-map #middle_point_map {
  height: min(58vh, 560px) !important;
  min-height: 300px;
}
@media (max-width: 767.98px) {
  .status-app-modal { padding-right: 0 !important; }
  .status-app-modal .modal-dialog,
  .status-content-editor-modal .modal-dialog {
    width: auto;
    max-width: none;
    height: auto;
    margin: .5rem;
  }
  .status-app-modal .modal-content,
  .status-content-editor-modal .modal-content {
    width: auto;
    min-height: 0;
    height: auto;
    max-height: calc(100dvh - 1rem - var(--status-safe-top, 0px) - var(--status-safe-bottom, 0px));
    border: 0;
    border-radius: .65rem;
  }
  .status-app-modal .modal-header {
    min-height: 52px;
    padding: .7rem .8rem;
  }
  .status-app-modal .modal-body,
  .status-content-editor-modal .modal-body { padding: .75rem; }
  .status-app-modal .modal-footer {
    flex-wrap: nowrap;
    padding: .65rem .75rem;
  }
  .status-app-modal .modal-footer .btn {
    flex: 1 1 0;
    min-width: 0;
  }
  .status-app-modal.status-editor-modal .modal-body > .status-modal-form,
  .status-app-modal.status-editor-modal .modal-body > .edit-flag-modal,
  .status-app-modal.status-editor-modal .modal-body > form { padding: .75rem; }
  .status-content-editor-modal .status-embedded-editor .ck-editor__editable_inline {
    min-height: 180px;
    max-height: none;
  }
  .status-content-editor-modal .status-embedded-editor #middle_point_map {
    min-height: 260px;
    max-height: 44vh;
  }
  .status-modal-map .status-gps-location-map,
  .status-modal-map .status-task-modal-map,
  .status-modal-map #item_location_map,
  .status-modal-map #task_location_map,
  .status-modal-map #middle_point_map {
    height: 52vh !important;
    min-height: 260px;
  }
}
@media (max-width: 575.98px) {
  .status-app-modal .modal-title { font-size: 1rem; }
  .status-app-modal .modal-footer { flex-direction: column-reverse; }
  .status-app-modal .modal-footer .btn {
    width: 100%;
    flex-basis: auto;
  }
}

/* ----------------------------------------------------------
   2026-07-16 R4: compact landscape map and mobile dock safety
---------------------------------------------------------- */
@media (max-width: 767.98px) {
  /* Use fixed viewport edges instead of nested percentage heights. This keeps
   * Leaflet between the fixed navbar and mobile navigation when Android Chrome
   * changes its visible viewport during rotation or toolbar transitions. */
  body.page-map.status-has-mobile-nav #container {
    position: fixed;
    top: var(--status-navbar-height);
    right: 0;
    bottom: calc(var(--status-mobile-nav-height) + var(--status-safe-bottom));
    left: 0;
    width: auto;
    height: auto;
    min-height: 0;
  }

  body.page-map.status-has-mobile-nav #image-map {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-height: 0;
  }

  /* The dock exists on every public page, not only on the map. Keep it clear
   * of the persistent navigation wherever that navigation is rendered. */
  body.status-has-mobile-nav .status-floating-dock {
    right: calc(var(--status-safe-right) + .65rem) !important;
    bottom: calc(var(--status-mobile-nav-height) + var(--status-safe-bottom) + .65rem) !important;
    max-height: calc(var(--status-viewport-height, 100dvh) - var(--status-navbar-height) - var(--status-mobile-nav-height) - var(--status-safe-top) - var(--status-safe-bottom) - 1.3rem);
  }

  body.status-has-mobile-nav .status-connectivity.is-expanded {
    max-height: calc(var(--status-viewport-height, 100dvh) - var(--status-navbar-height) - var(--status-mobile-nav-height) - var(--status-safe-top) - var(--status-safe-bottom) - 1.3rem);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

/* Phone landscape has very little vertical browser viewport after Chrome's
 * own controls. Use compact app chrome and icon-only quick navigation so the
 * map remains the primary surface. */
@media (max-width: 991.98px) and (max-height: 520px) and (orientation: landscape) {
  :root {
    --status-navbar-height: 44px;
    --status-mobile-nav-height: 46px;
    --status-map-control-size: 38px;
    --status-map-control-icon-size: 21px;
  }

  .status-navbar {
    min-height: var(--status-navbar-height) !important;
    padding-top: .1rem;
    padding-bottom: .1rem;
  }

  .status-navbar .status-mobile-event-title {
    padding-left: .35rem !important;
    font-size: .9rem;
    line-height: 1.05;
  }

  .status-navbar #factioninformation {
    height: var(--status-navbar-height) !important;
    max-height: var(--status-navbar-height) !important;
    margin-top: -.1rem !important;
    margin-bottom: -.1rem !important;
  }

  .status-navbar .navbar-toggler {
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;
    padding: .15rem .35rem !important;
  }

  .status-navbar .navbar-toggler-icon {
    width: 1.25em;
    height: 1.25em;
  }

  body.status-has-mobile-nav .status-mobile-nav {
    height: calc(var(--status-mobile-nav-height) + var(--status-safe-bottom));
    padding-top: 0;
    padding-bottom: var(--status-safe-bottom);
  }

  body.status-has-mobile-nav .status-mobile-nav-item {
    min-height: var(--status-mobile-nav-height);
    gap: 0;
    padding: 0 .1rem;
    border-radius: .4rem;
  }

  body.status-has-mobile-nav .status-mobile-nav-label {
    display: none;
  }

  body.status-has-mobile-nav .status-mobile-nav-item .material-icons {
    font-size: 23px;
  }

  body.status-has-mobile-nav .status-mobile-nav-icon-wrap .status-notice-count,
  body.status-has-mobile-nav .status-mobile-content-badge {
    top: .05rem;
  }

  body.status-has-mobile-nav .status-floating-dock {
    gap: .35rem;
    right: calc(var(--status-safe-right) + .45rem) !important;
    bottom: calc(var(--status-mobile-nav-height) + var(--status-safe-bottom) + .4rem) !important;
  }

  body.status-has-mobile-nav .status-connectivity-main,
  body.status-has-mobile-nav .status-location-indicator {
    width: 42px;
    min-width: 42px;
    height: 42px;
    min-height: 42px;
  }

  html body .leaflet-container .leaflet-control-container .leaflet-bar > a,
  html body .leaflet-container .leaflet-control-container .leaflet-bar > button,
  html body .leaflet-container .leaflet-control-container .leaflet-control-layers-toggle,
  html body .leaflet-container .leaflet-control-container .geocoder-control-input {
    font-size: var(--status-map-control-icon-size) !important;
  }

  html body .leaflet-container .leaflet-top {
    top: 6px;
  }

  html body .leaflet-container .leaflet-bottom {
    bottom: 4px;
  }
}


/* ----------------------------------------------------------
   2026-07-16 R5: measured mobile dock + true landscape map mode
---------------------------------------------------------- */
@media (max-width: 767.98px) {
  /* These variables are measured from the rendered elements by index.php.
   * They remain safe fallbacks even if an older cached script briefly creates
   * the connectivity control directly under body. */
  body.status-has-mobile-nav .status-floating-dock {
    bottom: calc(var(--status-mobile-nav-actual-height, var(--status-mobile-nav-height)) + .625rem) !important;
  }

  body.status-has-mobile-nav > .status-connectivity,
  body.status-has-mobile-nav > .status-location-shell {
    position: fixed !important;
    right: max(.5rem, var(--status-safe-right)) !important;
    bottom: calc(var(--status-mobile-nav-actual-height, var(--status-mobile-nav-height)) + .625rem) !important;
    left: auto !important;
    z-index: 20070 !important;
  }
}

/* On a short phone landscape viewport, reserving separate vertical rows for
 * both app bars leaves only a narrow strip for Leaflet. The map now fills the
 * app viewport and the compact event/menu controls are overlaid on top. */
body.page-map.status-compact-landscape {
  padding-top: 0 !important;
}

body.page-map.status-compact-landscape #container,
body.page-map.status-compact-landscape #image-map {
  position: fixed !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
}

body.page-map.status-compact-landscape .status-navbar {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  left: 0 !important;
  z-index: 20060 !important;
  display: block !important;
  width: 100% !important;
  height: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  pointer-events: none;
  overflow: visible !important;
}

body.page-map.status-compact-landscape .status-navbar #factioninformation {
  display: none !important;
}

body.page-map.status-compact-landscape .status-navbar .status-mobile-event-title {
  position: fixed !important;
  top: max(.35rem, var(--status-safe-top)) !important;
  left: max(.45rem, var(--status-safe-left)) !important;
  z-index: 20062 !important;
  display: flex !important;
  align-items: center;
  width: auto !important;
  max-width: calc(100vw - 4.5rem - var(--status-safe-left) - var(--status-safe-right)) !important;
  height: 38px !important;
  min-height: 38px !important;
  flex: none !important;
  margin: 0 !important;
  padding: 0 .7rem !important;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: .55rem;
  background: rgba(33, 37, 41, .9);
  color: #fff;
  font-size: .86rem !important;
  font-weight: 600;
  line-height: 1 !important;
  text-align: left !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .5);
  box-shadow: 0 .2rem .65rem rgba(0, 0, 0, .22);
  pointer-events: none;
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}

body.page-map.status-compact-landscape .status-navbar .navbar-toggler {
  position: fixed !important;
  top: max(.35rem, var(--status-safe-top)) !important;
  right: max(.45rem, var(--status-safe-right)) !important;
  z-index: 20063 !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 38px !important;
  min-width: 38px !important;
  height: 38px !important;
  min-height: 38px !important;
  margin: 0 !important;
  padding: .15rem .35rem !important;
  border-color: rgba(255, 255, 255, .18) !important;
  border-radius: .55rem;
  background: rgba(33, 37, 41, .9) !important;
  box-shadow: 0 .2rem .65rem rgba(0, 0, 0, .22);
  pointer-events: auto;
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}

body.page-map.status-compact-landscape .status-navbar .navbar-collapse {
  position: fixed !important;
  top: calc(max(.35rem, var(--status-safe-top)) + 43px) !important;
  right: max(.45rem, var(--status-safe-right)) !important;
  left: max(.45rem, var(--status-safe-left)) !important;
  z-index: 20061 !important;
  max-height: calc(var(--status-viewport-height, 100dvh) - var(--status-mobile-nav-actual-height, 46px) - 3.5rem) !important;
  margin: 0 !important;
  padding: .55rem .7rem .7rem !important;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: .65rem;
  background: rgba(52, 58, 64, .97) !important;
  box-shadow: 0 .45rem 1.2rem rgba(0, 0, 0, .3);
  overflow-y: auto;
  pointer-events: auto;
}

body.page-map.status-compact-landscape .status-mobile-nav {
  background: rgba(255, 255, 255, .94);
}

body.page-map.status-compact-landscape .leaflet-container .leaflet-top {
  top: 44px !important;
}

body.page-map.status-compact-landscape .leaflet-container .leaflet-bottom {
  bottom: calc(var(--status-mobile-nav-actual-height, 46px) + 2px) !important;
}

body.page-map.status-compact-landscape .status-floating-dock {
  bottom: calc(var(--status-mobile-nav-actual-height, 46px) + .45rem) !important;
}

/* ----------------------------------------------------------
   2026-07-16 R6: map-only connectivity, landscape navigation
   removal and theme-aligned floating map controls
---------------------------------------------------------- */
/* The cloud/connectivity button is useful on the live map but obscures content
 * on information and list pages. Keep the underlying offline runtime active
 * while removing its floating UI everywhere except the map homepage. */
body:not(.page-map) #status-connectivity,
body:not(.page-map) > .status-connectivity,
body:not(.page-map) .status-floating-dock > .status-connectivity {
  display: none !important;
}

/* A phone held in landscape has insufficient vertical space for persistent
 * quick navigation. The normal hamburger menu remains available. */
@media (max-width: 991.98px) and (orientation: landscape) {
  body.status-has-mobile-nav .status-mobile-nav {
    display: none !important;
  }

  body:not(.page-map).status-has-mobile-nav {
    padding-bottom: 0 !important;
  }

  body.page-map.status-has-mobile-nav #container {
    bottom: 0 !important;
  }

  body.page-map.status-has-mobile-nav .status-floating-dock,
  body.page-map.status-compact-landscape .status-floating-dock {
    bottom: max(.55rem, var(--status-safe-bottom)) !important;
  }

  body.page-map.status-compact-landscape .leaflet-container .leaflet-bottom {
    bottom: max(4px, var(--status-safe-bottom)) !important;
  }

  body.page-map.status-compact-landscape .status-navbar .navbar-collapse {
    max-height: calc(var(--status-viewport-height, 100dvh) - 3.5rem - var(--status-safe-bottom)) !important;
  }
}

/* Match the compact landscape overlays to the actual Bootstrap dark navbar
 * instead of using translucent glass-style controls. */
body.page-map.status-compact-landscape .status-navbar .status-mobile-event-title,
body.page-map.status-compact-landscape .status-navbar .navbar-toggler {
  border: 1px solid rgba(255, 255, 255, .1) !important;
  border-radius: .25rem !important;
  background: #343a40 !important;
  box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .18) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body.page-map.status-compact-landscape .status-navbar .status-mobile-event-title {
  color: rgba(255, 255, 255, .92) !important;
  font-weight: 400 !important;
  text-shadow: none !important;
}

body.page-map.status-compact-landscape .status-navbar .navbar-toggler:hover,
body.page-map.status-compact-landscape .status-navbar .navbar-toggler:focus {
  border-color: rgba(255, 255, 255, .25) !important;
  background: #3f474e !important;
  outline: 0 !important;
}

body.page-map.status-compact-landscape .status-navbar .navbar-collapse {
  border: 1px solid rgba(255, 255, 255, .1) !important;
  border-radius: .25rem !important;
  background: #343a40 !important;
  box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .25) !important;
}


/* ----------------------------------------------------------
   2026-07-16 R7: unified translucent mobile map controls
---------------------------------------------------------- */
@media (max-width: 991.98px) {
  body.page-map {
    --status-map-control-size: 42px;
    --status-map-control-icon-size: 22px;
    --status-map-control-gap: 6px;
    --status-map-control-radius: .55rem;
    --status-map-control-bg: rgba(255, 255, 255, .84);
    --status-map-control-bg-hover: rgba(255, 255, 255, .96);
    --status-map-control-border: rgba(52, 58, 64, .18);
    --status-map-control-fg: #212529;
    --status-map-control-muted: #6c757d;
    --status-map-control-shadow: 0 .2rem .65rem rgba(15, 23, 42, .22);
  }

  /* Use one predictable spacing system for every Leaflet plugin control. */
  html body.page-map #image-map .leaflet-control-container .leaflet-top {
    top: 2px !important;
  }

  html body.page-map #image-map .leaflet-control-container .leaflet-top .leaflet-control {
    margin-top: var(--status-map-control-gap) !important;
    margin-bottom: 0 !important;
  }

  html body.page-map #image-map .leaflet-control-container .leaflet-left .leaflet-control {
    margin-left: max(8px, var(--status-safe-left)) !important;
    margin-right: 0 !important;
  }

  html body.page-map #image-map .leaflet-control-container .leaflet-right .leaflet-control {
    margin-right: max(8px, var(--status-safe-right)) !important;
    margin-left: 0 !important;
  }

  /* Remove the incompatible white plugin boxes. Their clickable children use
   * the shared translucent surface below. */
  html body.page-map #image-map .leaflet-control-container .leaflet-bar,
  html body.page-map #image-map .leaflet-control-container .leaflet-control-layers,
  html body.page-map #image-map .leaflet-control-container .geocoder-control,
  html body.page-map #image-map .leaflet-control-container .easy-button-container,
  html body.page-map #image-map .leaflet-control-container .status-map-actions-control {
    border: 0 !important;
    border-radius: var(--status-map-control-radius) !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html body.page-map #image-map .leaflet-control-container .leaflet-control-zoom {
    overflow: hidden !important;
    border: 1px solid var(--status-map-control-border) !important;
    border-radius: var(--status-map-control-radius) !important;
    background: var(--status-map-control-bg) !important;
    box-shadow: var(--status-map-control-shadow) !important;
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
  }

  html body.page-map #image-map .leaflet-control-container .leaflet-bar > a,
  html body.page-map #image-map .leaflet-control-container .leaflet-bar > button,
  html body.page-map #image-map .leaflet-control-container .leaflet-control-locate > a,
  html body.page-map #image-map .leaflet-control-container .leaflet-control-fullscreen > a,
  html body.page-map #image-map .leaflet-control-container .easy-button-container > button,
  html body.page-map #image-map .leaflet-control-container .leaflet-control-layers-toggle,
  html body.page-map #image-map .leaflet-control-container .geocoder-control:not(.geocoder-control-expanded) .geocoder-control-input,
  html body.page-map #image-map .leaflet-control-container .status-map-actions-control .status-map-actions-trigger {
    box-sizing: border-box !important;
    width: var(--status-map-control-size) !important;
    min-width: var(--status-map-control-size) !important;
    max-width: var(--status-map-control-size) !important;
    height: var(--status-map-control-size) !important;
    min-height: var(--status-map-control-size) !important;
    max-height: var(--status-map-control-size) !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid var(--status-map-control-border) !important;
    border-radius: var(--status-map-control-radius) !important;
    background-color: var(--status-map-control-bg) !important;
    color: var(--status-map-control-fg) !important;
    line-height: var(--status-map-control-size) !important;
    box-shadow: var(--status-map-control-shadow) !important;
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
    transition: background-color .12s ease, border-color .12s ease, color .12s ease, transform .12s ease !important;
  }

  /* Zoom buttons form one segmented control instead of three unrelated cards. */
  html body.page-map #image-map .leaflet-control-container .leaflet-control-zoom > a {
    border-width: 0 0 1px !important;
    border-color: var(--status-map-control-border) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html body.page-map #image-map .leaflet-control-container .leaflet-control-zoom > a:first-child {
    border-radius: calc(var(--status-map-control-radius) - 1px) calc(var(--status-map-control-radius) - 1px) 0 0 !important;
  }

  html body.page-map #image-map .leaflet-control-container .leaflet-control-zoom > a:last-child {
    border-bottom-width: 0 !important;
    border-radius: 0 0 calc(var(--status-map-control-radius) - 1px) calc(var(--status-map-control-radius) - 1px) !important;
  }

  html body.page-map #image-map .leaflet-control-container .leaflet-control-zoom > a:hover,
  html body.page-map #image-map .leaflet-control-container .leaflet-control-zoom > a:focus-visible,
  html body.page-map #image-map .leaflet-control-container .leaflet-bar > a:hover,
  html body.page-map #image-map .leaflet-control-container .leaflet-bar > a:focus-visible,
  html body.page-map #image-map .leaflet-control-container .leaflet-bar > button:hover,
  html body.page-map #image-map .leaflet-control-container .leaflet-bar > button:focus-visible,
  html body.page-map #image-map .leaflet-control-container .leaflet-control-layers-toggle:hover,
  html body.page-map #image-map .leaflet-control-container .leaflet-control-layers-toggle:focus-visible,
  html body.page-map #image-map .leaflet-control-container .status-map-actions-trigger:hover,
  html body.page-map #image-map .leaflet-control-container .status-map-actions-trigger:focus-visible {
    background-color: var(--status-map-control-bg-hover) !important;
    border-color: rgba(52, 58, 64, .28) !important;
    color: #0d6efd !important;
    outline: 0 !important;
  }

  html body.page-map #image-map .leaflet-control-container .leaflet-disabled,
  html body.page-map #image-map .leaflet-control-container .leaflet-disabled:hover {
    background-color: rgba(248, 249, 250, .68) !important;
    color: var(--status-map-control-muted) !important;
    cursor: default !important;
  }

  html body.page-map #image-map .leaflet-control-container .easy-button-container .button-state,
  html body.page-map #image-map .leaflet-control-container .easy-button-container .material-icons,
  html body.page-map #image-map .leaflet-control-container .status-map-actions-trigger .material-icons,
  html body.page-map #image-map .leaflet-control-container .status-leaflet-locate-icon {
    width: 100% !important;
    height: 100% !important;
    font-size: var(--status-map-control-icon-size) !important;
    line-height: 1 !important;
  }

  html body.page-map #image-map .leaflet-control-container .fullscreen-icon,
  html body.page-map #image-map .leaflet-control-container .leaflet-control-layers-toggle,
  html body.page-map #image-map .leaflet-control-container .geocoder-control-input {
    background-size: 24px 24px !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
  }

  /* Preserve status colours without reverting to large solid plugin buttons. */
  html body.page-map #image-map .leaflet-control-locate.status-locate-requesting > a,
  html body.page-map #image-map .leaflet-control-locate.requesting > a {
    background-color: rgba(225, 237, 255, .9) !important;
    color: #0d6efd !important;
  }

  html body.page-map #image-map .leaflet-control-locate.status-locate-success > a,
  html body.page-map #image-map .leaflet-control-locate.active > a {
    background-color: rgba(224, 244, 232, .9) !important;
    color: #198754 !important;
  }

  html body.page-map #image-map .leaflet-control-locate.status-locate-error > a {
    background-color: rgba(255, 232, 235, .92) !important;
    color: #dc3545 !important;
  }

  /* Expanded controls remain inside the viewport and use the same surface. */
  html body.page-map #image-map .leaflet-control-container .geocoder-control.geocoder-control-expanded {
    width: min(17rem, calc(100vw - 5rem - var(--status-safe-left) - var(--status-safe-right))) !important;
    max-width: calc(100vw - 5rem - var(--status-safe-left) - var(--status-safe-right)) !important;
    height: var(--status-map-control-size) !important;
    border: 1px solid var(--status-map-control-border) !important;
    border-radius: var(--status-map-control-radius) !important;
    background: var(--status-map-control-bg-hover) !important;
    box-shadow: var(--status-map-control-shadow) !important;
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
  }

  html body.page-map #image-map .leaflet-control-container .geocoder-control-expanded .geocoder-control-input {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: var(--status-map-control-size) !important;
    padding: 0 calc(var(--status-map-control-size) + .35rem) 0 .75rem !important;
    border: 0 !important;
    border-radius: var(--status-map-control-radius) !important;
    background-color: transparent !important;
    color: var(--status-map-control-fg) !important;
    line-height: normal !important;
    box-shadow: none !important;
  }

  html body.page-map #image-map .leaflet-control-container .geocoder-control-suggestions,
  html body.page-map #image-map .leaflet-control-container .leaflet-control-layers-expanded,
  html body.page-map #image-map .leaflet-control-container .status-map-actions-menu {
    max-width: calc(100vw - 1rem - var(--status-safe-left) - var(--status-safe-right)) !important;
    border: 1px solid var(--status-map-control-border) !important;
    border-radius: .65rem !important;
    background: rgba(255, 255, 255, .96) !important;
    box-shadow: 0 .45rem 1.2rem rgba(15, 23, 42, .24) !important;
  }

  /* Connectivity and browser-location buttons use the same dimensions and
   * translucency as the map controls while retaining semantic state colours. */
  body.page-map .status-connectivity-main,
  body.page-map .status-location-indicator {
    box-sizing: border-box !important;
    width: var(--status-map-control-size) !important;
    min-width: var(--status-map-control-size) !important;
    height: var(--status-map-control-size) !important;
    min-height: var(--status-map-control-size) !important;
    padding: 0 !important;
    border: 1px solid rgba(255, 255, 255, .3) !important;
    border-radius: var(--status-map-control-radius) !important;
    box-shadow: var(--status-map-control-shadow) !important;
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
  }

  body.page-map .status-connectivity-main,
  body.page-map .status-connectivity.is-online .status-connectivity-main {
    background: rgba(25, 135, 84, .86) !important;
  }

  body.page-map .status-connectivity.is-offline .status-connectivity-main,
  body.page-map .status-connectivity.is-cached .status-connectivity-main {
    background: rgba(178, 106, 0, .88) !important;
  }

  body.page-map .status-connectivity-icon,
  body.page-map .status-location-indicator .material-icons {
    font-size: var(--status-map-control-icon-size) !important;
  }
}

/* Compact landscape uses the same visual system at a slightly smaller size so
 * every control fits without clipping or competing with the browser chrome. */
@media (max-width: 991.98px) and (orientation: landscape) {
  body.page-map {
    --status-map-control-size: 38px;
    --status-map-control-icon-size: 20px;
    --status-map-control-gap: 5px;
    --status-map-control-radius: .5rem;
  }

  body.page-map.status-compact-landscape .status-navbar .status-mobile-event-title,
  body.page-map.status-compact-landscape .status-navbar .navbar-toggler {
    box-sizing: border-box !important;
    top: max(6px, var(--status-safe-top)) !important;
    height: var(--status-map-control-size) !important;
    min-height: var(--status-map-control-size) !important;
    border: 1px solid var(--status-map-control-border) !important;
    border-radius: var(--status-map-control-radius) !important;
    background: var(--status-map-control-bg) !important;
    color: var(--status-map-control-fg) !important;
    box-shadow: var(--status-map-control-shadow) !important;
    backdrop-filter: blur(7px) !important;
    -webkit-backdrop-filter: blur(7px) !important;
  }

  body.page-map.status-compact-landscape .status-navbar .status-mobile-event-title {
    left: max(8px, var(--status-safe-left)) !important;
    max-width: min(17rem, calc(100vw - 4.5rem - var(--status-safe-left) - var(--status-safe-right))) !important;
    padding: 0 .7rem !important;
    font-size: .82rem !important;
    font-weight: 600 !important;
    text-shadow: none !important;
  }

  body.page-map.status-compact-landscape .status-navbar .navbar-toggler {
    right: max(8px, var(--status-safe-right)) !important;
    width: var(--status-map-control-size) !important;
    min-width: var(--status-map-control-size) !important;
    padding: 0 !important;
  }

  body.page-map.status-compact-landscape .status-navbar .navbar-toggler:hover,
  body.page-map.status-compact-landscape .status-navbar .navbar-toggler:focus-visible {
    background: var(--status-map-control-bg-hover) !important;
    border-color: rgba(52, 58, 64, .28) !important;
  }

  /* Leave one shared header row for the title/menu, then start both Leaflet
   * control columns at exactly the same vertical position. */
  html body.page-map.status-compact-landscape #image-map .leaflet-control-container .leaflet-top {
    top: calc(max(6px, var(--status-safe-top)) + var(--status-map-control-size) + var(--status-map-control-gap)) !important;
  }

  html body.page-map.status-compact-landscape #image-map .leaflet-control-container .leaflet-top.leaflet-left,
  html body.page-map.status-compact-landscape #image-map .leaflet-control-container .leaflet-top.leaflet-right {
    max-height: calc(var(--status-viewport-height, 100dvh) - var(--status-map-control-size) - var(--status-map-control-gap) - var(--status-safe-top) - var(--status-safe-bottom) - 14px);
  }

  body.page-map.status-compact-landscape .status-navbar .navbar-collapse {
    top: calc(max(6px, var(--status-safe-top)) + var(--status-map-control-size) + var(--status-map-control-gap)) !important;
    right: max(8px, var(--status-safe-right)) !important;
    left: auto !important;
    width: min(21rem, calc(100vw - 16px - var(--status-safe-left) - var(--status-safe-right))) !important;
    max-height: calc(var(--status-viewport-height, 100dvh) - var(--status-map-control-size) - var(--status-map-control-gap) - var(--status-safe-top) - var(--status-safe-bottom) - 14px) !important;
  }

  body.page-map.status-compact-landscape .status-floating-dock {
    right: max(8px, var(--status-safe-right)) !important;
    bottom: max(8px, var(--status-safe-bottom)) !important;
  }

  html body.page-map.status-compact-landscape #image-map .leaflet-control-container .geocoder-control.geocoder-control-expanded {
    width: min(15rem, calc(100vw - 4.5rem - var(--status-safe-left) - var(--status-safe-right))) !important;
    max-width: calc(100vw - 4.5rem - var(--status-safe-left) - var(--status-safe-right)) !important;
  }
}

/* ----------------------------------------------------------
   2026-07-16 R11: translucent controls using bundled icons only
---------------------------------------------------------- */
body.page-map {
  --status-map-control-bg: rgba(255, 255, 255, .80);
  --status-map-control-bg-hover: rgba(255, 255, 255, .92);
  --status-map-control-menu-bg: rgba(255, 255, 255, .88);
  --status-map-control-border: rgba(52, 58, 64, .16);
  --status-map-control-shadow: 0 .24rem .85rem rgba(15, 23, 42, .16);
  --status-map-control-backdrop: blur(10px) saturate(150%);
}

@media (max-width: 991.98px) {
  body.page-map {
    --status-map-control-bg: rgba(255, 255, 255, .66);
    --status-map-control-bg-hover: rgba(255, 255, 255, .82);
    --status-map-control-menu-bg: rgba(255, 255, 255, .84);
    --status-map-control-border: rgba(52, 58, 64, .14);
    --status-map-control-shadow: 0 .22rem .75rem rgba(15, 23, 42, .14);
  }
}

html body.page-map #image-map .leaflet-control-container .leaflet-control-zoom,
html body.page-map #image-map .leaflet-control-container .leaflet-control-layers:not(.leaflet-control-layers-expanded),
html body.page-map #image-map .leaflet-control-container .geocoder-control:not(.geocoder-control-expanded),
html body.page-map #image-map .leaflet-control-container .status-map-actions-control,
body.page-map .status-connectivity-main,
body.page-map .status-location-indicator,
body.page-map.status-compact-landscape .status-navbar .status-mobile-event-title,
body.page-map.status-compact-landscape .status-navbar .navbar-toggler {
  border-color: var(--status-map-control-border) !important;
  box-shadow: var(--status-map-control-shadow) !important;
  backdrop-filter: var(--status-map-control-backdrop) !important;
  -webkit-backdrop-filter: var(--status-map-control-backdrop) !important;
}

html body.page-map #image-map .leaflet-control-container .leaflet-control-zoom,
html body.page-map #image-map .leaflet-control-container .status-map-actions-control {
  background: var(--status-map-control-bg) !important;
}

html body.page-map #image-map .leaflet-control-container .leaflet-bar > a,
html body.page-map #image-map .leaflet-control-container .leaflet-bar > button,
html body.page-map #image-map .leaflet-control-container .leaflet-control-locate > a,
html body.page-map #image-map .leaflet-control-container .leaflet-control-fullscreen > a,
html body.page-map #image-map .leaflet-control-container .easy-button-container > button,
html body.page-map #image-map .leaflet-control-container .leaflet-control-layers-toggle,
html body.page-map #image-map .leaflet-control-container .geocoder-control:not(.geocoder-control-expanded) .geocoder-control-input,
html body.page-map #image-map .leaflet-control-container .status-map-actions-control .status-map-actions-trigger,
body.page-map.status-compact-landscape .status-navbar .status-mobile-event-title,
body.page-map.status-compact-landscape .status-navbar .navbar-toggler {
  background-color: var(--status-map-control-bg) !important;
  border-color: var(--status-map-control-border) !important;
  box-shadow: var(--status-map-control-shadow) !important;
  backdrop-filter: var(--status-map-control-backdrop) !important;
  -webkit-backdrop-filter: var(--status-map-control-backdrop) !important;
}

html body.page-map #image-map .leaflet-control-container .leaflet-control-zoom > a:hover,
html body.page-map #image-map .leaflet-control-container .leaflet-control-zoom > a:focus-visible,
html body.page-map #image-map .leaflet-control-container .leaflet-bar > a:hover,
html body.page-map #image-map .leaflet-control-container .leaflet-bar > a:focus-visible,
html body.page-map #image-map .leaflet-control-container .leaflet-bar > button:hover,
html body.page-map #image-map .leaflet-control-container .leaflet-bar > button:focus-visible,
html body.page-map #image-map .leaflet-control-container .leaflet-control-layers-toggle:hover,
html body.page-map #image-map .leaflet-control-container .leaflet-control-layers-toggle:focus-visible,
html body.page-map #image-map .leaflet-control-container .status-map-actions-trigger:hover,
html body.page-map #image-map .leaflet-control-container .status-map-actions-trigger:focus-visible,
body.page-map.status-compact-landscape .status-navbar .navbar-toggler:hover,
body.page-map.status-compact-landscape .status-navbar .navbar-toggler:focus-visible {
  background-color: var(--status-map-control-bg-hover) !important;
}

html body.page-map #image-map .leaflet-control-container .geocoder-control-suggestions,
html body.page-map #image-map .leaflet-control-container .leaflet-control-layers-expanded,
html body.page-map #image-map .leaflet-control-container .status-map-actions-menu,
body.page-map.status-compact-landscape .status-navbar .navbar-collapse {
  background: var(--status-map-control-menu-bg) !important;
  border-color: var(--status-map-control-border) !important;
  box-shadow: 0 .4rem 1.15rem rgba(15, 23, 42, .18) !important;
  backdrop-filter: var(--status-map-control-backdrop) !important;
  -webkit-backdrop-filter: var(--status-map-control-backdrop) !important;
}

body.page-map .status-connectivity-main,
body.page-map .status-connectivity.is-online .status-connectivity-main {
  background: rgba(25, 135, 84, .72) !important;
}
body.page-map .status-connectivity.is-offline .status-connectivity-main,
body.page-map .status-connectivity.is-cached .status-connectivity-main {
  background: rgba(178, 106, 0, .70) !important;
}
body.page-map .status-location-indicator {
  background: rgba(255, 255, 255, .68) !important;
}
@media (min-width: 992px) {
  body.page-map .status-connectivity-main,
  body.page-map .status-connectivity.is-online .status-connectivity-main {
    background: rgba(25, 135, 84, .78) !important;
  }
  body.page-map .status-connectivity.is-offline .status-connectivity-main,
  body.page-map .status-connectivity.is-cached .status-connectivity-main {
    background: rgba(178, 106, 0, .76) !important;
  }
  body.page-map .status-location-indicator {
    background: rgba(255, 255, 255, .78) !important;
  }
}

/* Bundled Leaflet/plugin icon files verified in the package. */
html body.page-map #image-map .leaflet-control-container .leaflet-control-layers-toggle {
  background-image: url('/css/images/layers.png') !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: 26px 26px !important;
}

html body.page-map #image-map .leaflet-control-container .geocoder-control-input {
  background-image: url('/img/search.png') !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: 26px 26px !important;
}

html body.page-map #image-map .leaflet-control-container .geocoder-control.geocoder-control-expanded .geocoder-control-input {
  background-position: right center !important;
}

html body.page-map #image-map .leaflet-control-container .leaflet-control-fullscreen > a {
  background-image: url('/img/icon-fullscreen.png') !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: 26px 26px !important;
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  html body.page-map #image-map .leaflet-control-container .leaflet-control-layers-toggle {
    background-image: url('/css/images/layers-2x.png') !important;
  }
  html body.page-map #image-map .leaflet-control-container .geocoder-control-input {
    background-image: url('/img/search@2x.png') !important;
  }
  html body.page-map #image-map .leaflet-control-container .leaflet-control-fullscreen > a {
    background-image: url('/img/icon-fullscreen-2x.png') !important;
  }
}

/* Custom controls use the bundled Material Design Icons font. */
html body.page-map #image-map .leaflet-control-container .mdi,
body.page-map .status-connectivity-icon,
body.page-map .status-location-indicator .mdi,
body.page-map .status-navbar-menu-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100%;
  height: 100%;
  font-size: var(--status-map-control-icon-size, 22px) !important;
  line-height: 1 !important;
  color: currentColor;
}

body.page-map .status-navbar-menu-icon {
  font-size: 26px !important;
}

html body.page-map #image-map .leaflet-control-container .status-map-actions-trigger .mdi,
html body.page-map #image-map .leaflet-control-container .easy-button-container .mdi,
html body.page-map #image-map .leaflet-control-container .status-leaflet-locate-icon,
body.page-map .status-connectivity-icon {
  opacity: .92;
}

.status-map-action-item > .mdi {
  flex: 0 0 auto;
  width: 1.35rem !important;
  height: 1.35rem !important;
  font-size: 1.2rem !important;
}

/* ----------------------------------------------------------
   2026-07-17 R12: legend stacking, edit-map flags and mobile nav
---------------------------------------------------------- */
#layers.status-layers-modal {
  z-index: 1085 !important;
}
.modal-backdrop.status-layers-backdrop {
  z-index: 1080 !important;
}

.modify-map .status-edit-flag-card {
  overflow: hidden;
  border-color: rgba(0, 0, 0, .09);
}
.modify-map .status-edit-flag-card.is-not-in-use {
  border-color: rgba(220, 53, 69, .45);
  background: repeating-linear-gradient(-45deg, rgba(220, 53, 69, .035), rgba(220, 53, 69, .035) 8px, transparent 8px, transparent 16px);
}
.modify-map .status-edit-flag-card.is-not-in-use .card-header,
.modify-map .status-edit-flag-card.is-not-in-use .card-body {
  background-color: rgba(248, 249, 250, .92) !important;
}
.modify-map .status-edit-flag-card-title {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  min-width: 0;
}
.modify-map .status-edit-flag-card-title .flag-color-icon {
  grid-row: 1 / 3;
}
.modify-map .status-edit-flag-card-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}
.modify-map .status-edit-flag-card-owner {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #6c757d;
  line-height: 1.15;
}
.modify-map .status-flag-card-actions .btn {
  min-width: 0;
  white-space: nowrap;
}
.status-edit-map-marker-not-in-use {
  filter: grayscale(.72) saturate(.5);
}
.status-edit-map-marker-capturing {
  animation: status-edit-map-flag-pulse 1.2s ease-in-out infinite;
}
@keyframes status-edit-map-flag-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}
.status-edit-map-popup {
  min-width: 245px;
}
.status-edit-map-popup-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .75rem;
  padding-bottom: .55rem;
  margin-bottom: .65rem;
  border-bottom: 1px solid rgba(0, 0, 0, .08);
}
.status-edit-map-live-input {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 1.65rem;
  align-items: center;
  gap: .25rem;
}
.status-edit-map-save-state {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5rem;
  font-size: 1.15rem;
}
.status-edit-map-save-state.is-saving { color: #6c757d; }
.status-edit-map-save-state.is-success { color: #198754; }
.status-edit-map-save-state.is-error { color: #dc3545; }
.status-edit-map-popup-note {
  display: flex;
  align-items: center;
  gap: .3rem;
  margin-top: .45rem;
  color: #6c757d;
  font-size: .76rem;
  line-height: 1.25;
}
.status-edit-map-popup-note .material-icons,
.status-edit-map-popup-note .mdi {
  flex: 0 0 auto;
  font-size: 16px;
}

@media (max-width: 991.98px) {
  body.page-map:not(.status-admin-mode) .status-mobile-nav {
    border-top-color: rgba(52, 58, 64, .12) !important;
    background: rgba(255, 255, 255, .68) !important;
    box-shadow: 0 -.2rem .85rem rgba(15, 23, 42, .10) !important;
    backdrop-filter: blur(12px) saturate(150%);
    -webkit-backdrop-filter: blur(12px) saturate(150%);
  }
  body.page-map:not(.status-admin-mode) .status-mobile-nav-item {
    background: transparent !important;
  }
  body.page-map:not(.status-admin-mode) .status-mobile-nav-item.active {
    background: rgba(13, 110, 253, .10) !important;
  }
  .status-mobile-nav-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    line-height: 1;
  }
  .modify-map .sidebar-scroll {
    max-height: none;
  }
  .modify-map .status-edit-flag-card .card-body {
    padding: .8rem;
  }
  .modify-map .status-edit-flag-card .form-group.row {
    margin-right: 0;
    margin-left: 0;
  }
  .modify-map .status-edit-flag-card .form-group.row > label,
  .modify-map .status-edit-flag-card .form-group.row > div {
    padding-right: .3rem;
    padding-left: .3rem;
  }
}

@media (max-width: 991.98px) and (max-height: 520px) and (orientation: landscape) {
  body.status-has-mobile-nav .status-mobile-nav-icon {
    font-size: 23px;
  }
}

/* R12 legend must remain above the backdrop even when the map container has a
 * transformed stacking context. The modal itself is moved under body by JS. */
#layers.status-layers-modal {
  position: fixed !important;
  z-index: 2000 !important;
}
#layers.status-layers-modal .modal-dialog,
#layers.status-layers-modal .modal-content {
  position: relative;
  z-index: 1;
  pointer-events: auto;
}
.modal-backdrop.status-layers-backdrop {
  z-index: 1990 !important;
}
#layers.status-layers-modal .status-layers-title .mdi {
  flex: 0 0 auto;
  margin-right: .45rem;
  font-size: 22px;
  line-height: 1;
}
.modify-map .status-edit-flag-card-badges {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: .35rem;
}
.modify-map .status-edit-flag-hidden-icon {
  color: #6c757d;
  font-size: 1.15rem;
  line-height: 1;
}
.modify-map .status-edit-flag-card .flag-color-icon {
  font-size: 1.3rem;
  line-height: 1;
}
.modify-map .status-flag-card-actions .mdi {
  font-size: 1rem;
  line-height: 1;
}

/* ----------------------------------------------------------
   2026-07-18 R13: reliable legend stack and cohesive map chrome
---------------------------------------------------------- */
#layers.status-layers-modal,
body.modal-open #layers.status-layers-modal {
  position: fixed !important;
  z-index: 100100 !important;
  pointer-events: none;
}
#layers.status-layers-modal.show {
  pointer-events: auto;
}
#layers.status-layers-modal .modal-dialog,
#layers.status-layers-modal .modal-content {
  z-index: 1 !important;
  pointer-events: auto !important;
}
.modal-backdrop.status-layers-backdrop {
  z-index: 100090 !important;
}

/* Visible count belongs to the filter row, directly after the filter buttons. */
#layers.status-layers-modal .status-layers-filterbar {
  align-items: center;
}
#layers.status-layers-modal .status-layers-summary {
  display: inline-flex !important;
  align-items: center;
  gap: .35rem;
  min-height: 34px;
  margin: 0 0 0 auto !important;
  padding: .3rem .55rem;
  border: 1px solid rgba(52, 58, 64, .10);
  border-radius: 999px;
  background: rgba(255, 255, 255, .72);
  color: #6c757d;
  white-space: nowrap;
}
#layers.status-layers-modal .status-layers-summary > span {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
}
@media (max-width: 575.98px) {
  #layers.status-layers-modal .status-layers-summary {
    grid-column: 1 / -1;
    justify-self: end;
    margin-left: 0 !important;
  }
}

/* One translucency scale for map actions. Mobile is deliberately lighter;
 * desktop remains slightly more opaque for mouse precision and readability. */
body.page-map {
  --status-map-control-bg: rgba(255, 255, 255, .66);
  --status-map-control-bg-hover: rgba(255, 255, 255, .82);
  --status-map-control-menu-bg: rgba(255, 255, 255, .84);
  --status-map-control-border: rgba(52, 58, 64, .14);
  --status-map-control-shadow: 0 .2rem .72rem rgba(15, 23, 42, .13);
}
@media (max-width: 991.98px) {
  body.page-map {
    --status-map-control-bg: rgba(255, 255, 255, .50);
    --status-map-control-bg-hover: rgba(255, 255, 255, .70);
    --status-map-control-menu-bg: rgba(255, 255, 255, .78);
    --status-map-control-border: rgba(52, 58, 64, .13);
    --status-map-control-shadow: 0 .18rem .62rem rgba(15, 23, 42, .12);
  }
  body.page-map:not(.status-admin-mode) .status-mobile-nav {
    background: rgba(255, 255, 255, .56) !important;
    border-top-color: rgba(52, 58, 64, .10) !important;
    box-shadow: 0 -.18rem .72rem rgba(15, 23, 42, .08) !important;
    backdrop-filter: blur(14px) saturate(150%) !important;
    -webkit-backdrop-filter: blur(14px) saturate(150%) !important;
  }
  body.page-map:not(.status-admin-mode) .status-mobile-nav-item.active {
    background: rgba(13, 110, 253, .09) !important;
  }
}

/* The fullscreen plugin adds the action directly into the zoom bar. Target its
 * real class, not a wrapper class that the bundled plugin does not create. */
html body.page-map #image-map .leaflet-control-container a.leaflet-control-zoom-fullscreen.fullscreen-icon {
  background-image: url('/img/icon-fullscreen.png') !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: 24px 24px !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  touch-action: manipulation;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  html body.page-map #image-map .leaflet-control-container a.leaflet-control-zoom-fullscreen.fullscreen-icon {
    background-image: url('/img/icon-fullscreen-2x.png') !important;
  }
}
#image-map:fullscreen,
#image-map:-webkit-full-screen,
#image-map.leaflet-pseudo-fullscreen {
  width: 100% !important;
  height: 100% !important;
  inset: 0 !important;
  z-index: 99999 !important;
}

/* Short landscape: remove the non-actionable event label and reserve the top
 * corners only for controls. This prevents the left control stack/search from
 * colliding with the scale while leaving the menu reachable. */
@media (max-width: 991.98px) and (orientation: landscape) {
  body.page-map.status-compact-landscape .status-navbar .status-mobile-event-title {
    display: none !important;
  }

  body.page-map.status-compact-landscape .status-navbar .navbar-toggler {
    top: max(7px, var(--status-safe-top)) !important;
    right: max(8px, var(--status-safe-right)) !important;
    border-color: rgba(255, 255, 255, .16) !important;
    background: rgba(52, 58, 64, .78) !important;
    color: rgba(255, 255, 255, .94) !important;
    box-shadow: 0 .2rem .7rem rgba(0, 0, 0, .18) !important;
    backdrop-filter: blur(10px) saturate(135%) !important;
    -webkit-backdrop-filter: blur(10px) saturate(135%) !important;
  }
  body.page-map.status-compact-landscape .status-navbar .navbar-toggler:hover,
  body.page-map.status-compact-landscape .status-navbar .navbar-toggler:focus-visible,
  body.page-map.status-compact-landscape .status-navbar .navbar-toggler[aria-expanded="true"] {
    background: rgba(52, 58, 64, .90) !important;
    border-color: rgba(255, 255, 255, .25) !important;
    color: #fff !important;
  }
  body.page-map.status-compact-landscape .status-navbar-menu-icon {
    color: inherit !important;
  }

  html body.page-map.status-compact-landscape #image-map .leaflet-control-container .leaflet-top.leaflet-left {
    top: max(7px, var(--status-safe-top)) !important;
    max-height: none !important;
  }
  html body.page-map.status-compact-landscape #image-map .leaflet-control-container .leaflet-top.leaflet-right {
    top: calc(max(7px, var(--status-safe-top)) + var(--status-map-control-size) + var(--status-map-control-gap)) !important;
    max-height: none !important;
  }
  body.page-map.status-compact-landscape .status-navbar .navbar-collapse {
    top: calc(max(7px, var(--status-safe-top)) + var(--status-map-control-size) + var(--status-map-control-gap)) !important;
  }

  /* Keep search above the scale even on very short browser viewports. */
  html body.page-map.status-compact-landscape #image-map .leaflet-control-container .leaflet-left .geocoder-control {
    position: relative;
    z-index: 2;
  }
  html body.page-map.status-compact-landscape #image-map .leaflet-control-container .leaflet-bottom.leaflet-left {
    z-index: 1;
  }
}

/* Consistent icon rendering across local plugin images and bundled MDI glyphs. */
html body.page-map #image-map .leaflet-control-container .leaflet-control-layers-toggle,
html body.page-map #image-map .leaflet-control-container .geocoder-control-input,
html body.page-map #image-map .leaflet-control-container a.leaflet-control-zoom-fullscreen.fullscreen-icon {
  background-size: 24px 24px !important;
}
html body.page-map #image-map .leaflet-control-container .mdi,
body.page-map .status-navbar-menu-icon,
body.page-map .status-mobile-nav-icon {
  font-smoothing: antialiased;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

@media (max-width: 991.98px) {
  body.page-map .status-connectivity-main,
  body.page-map .status-connectivity.is-online .status-connectivity-main {
    background: rgba(25, 135, 84, .58) !important;
  }
  body.page-map .status-connectivity.is-offline .status-connectivity-main,
  body.page-map .status-connectivity.is-cached .status-connectivity-main {
    background: rgba(178, 106, 0, .58) !important;
  }
  body.page-map .status-location-indicator {
    background: rgba(255, 255, 255, .52) !important;
  }
}
@media (min-width: 992px) {
  body.page-map .status-connectivity-main,
  body.page-map .status-connectivity.is-online .status-connectivity-main {
    background: rgba(25, 135, 84, .68) !important;
  }
  body.page-map .status-connectivity.is-offline .status-connectivity-main,
  body.page-map .status-connectivity.is-cached .status-connectivity-main {
    background: rgba(178, 106, 0, .66) !important;
  }
  body.page-map .status-location-indicator {
    background: rgba(255, 255, 255, .66) !important;
  }
}

/* ----------------------------------------------------------
   2026-07-18 R14: final map-control and edit-map polish
---------------------------------------------------------- */
/* Keep the locate loading glyph compact. The earlier generic MDI sizing made
 * the spinner fill the entire control. */
html body .leaflet-control-locate .status-leaflet-locate-spinner,
html body .leaflet-control-locate .status-locate-spinner {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 18px !important;
  min-width: 18px !important;
  max-width: 18px !important;
  height: 18px !important;
  min-height: 18px !important;
  max-height: 18px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  font-size: 18px !important;
  line-height: 1 !important;
  background: transparent !important;
  box-shadow: none !important;
}
html body .leaflet-control-locate .status-leaflet-locate-spinner::before,
html body .leaflet-control-locate .status-locate-spinner::before {
  font-size: 18px !important;
  line-height: 1 !important;
}

/* Slightly lighter collapsed controls on desktop. Text menus stay readable. */
@media (min-width: 992px) {
  body.page-map {
    --status-map-control-bg: rgba(255, 255, 255, .48);
    --status-map-control-bg-hover: rgba(255, 255, 255, .68);
    --status-map-control-border: rgba(52, 58, 64, .12);
    --status-map-control-shadow: 0 .16rem .58rem rgba(15, 23, 42, .11);
  }
}
html body.page-map #image-map .leaflet-control-container .status-map-actions-menu {
  background: rgba(255, 255, 255, .97) !important;
  border-color: rgba(52, 58, 64, .14) !important;
  box-shadow: 0 .5rem 1.25rem rgba(15, 23, 42, .20) !important;
  backdrop-filter: blur(5px) saturate(110%) !important;
  -webkit-backdrop-filter: blur(5px) saturate(110%) !important;
}
html body.page-map #image-map .leaflet-control-container .status-map-actions-menu .status-map-action-item:hover,
html body.page-map #image-map .leaflet-control-container .status-map-actions-menu .status-map-action-item:focus-visible {
  background: rgba(241, 243, 245, .96) !important;
}

/* Legend: one scrollbar only. The modal shell stays fixed and the legend list
 * is the sole scrolling region. */
#layers.status-layers-modal {
  overflow: hidden !important;
}
#layers.status-layers-modal .modal-dialog {
  height: calc(100vh - 2rem) !important;
  max-height: calc(100vh - 2rem) !important;
  margin: 1rem auto !important;
}
@supports (height: 100dvh) {
  #layers.status-layers-modal .modal-dialog {
    height: calc(100dvh - 2rem) !important;
    max-height: calc(100dvh - 2rem) !important;
  }
}
#layers.status-layers-modal .modal-content {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  max-height: 100% !important;
  overflow: hidden !important;
}
#layers.status-layers-modal .modal-body {
  display: flex !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  flex-direction: column !important;
  overflow: hidden !important;
}
#layers.status-layers-modal #legendlist {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}
#layers.status-layers-modal #statusLayersSummary,
#layers.status-layers-modal .status-layers-summary {
  display: none !important;
}

/* Profile dropdown icons use one spacing system; Bootstrap utility margins must
 * not be added on top of the flex gap. */
.status-user-dropdown .dropdown-item {
  gap: .42rem !important;
}
.status-user-dropdown .dropdown-item > .material-icons,
.status-user-dropdown .dropdown-item > .mdi {
  flex: 0 0 1.2rem;
  width: 1.2rem;
  margin-right: 0 !important;
  text-align: center;
}

/* Edit-map uses the local MDI font and translucent map controls without
 * affecting the content panels or toolbar readability. */
.modify-map .mdi {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.modify-map .map-toolbar .btn > .mdi,
.modify-map .dropdown-item > .mdi {
  flex: 0 0 auto;
}
.modify-map #image-map .leaflet-bar a,
.modify-map #image-map .leaflet-bar button,
.modify-map #image-map .leaflet-control-layers-toggle,
.modify-map #image-map .leaflet-layer-manager-toggle-control .btn {
  background-color: rgba(255, 255, 255, .56) !important;
  border-color: rgba(52, 58, 64, .13) !important;
  box-shadow: 0 .16rem .58rem rgba(15, 23, 42, .12) !important;
  backdrop-filter: blur(9px) saturate(145%);
  -webkit-backdrop-filter: blur(9px) saturate(145%);
}
.modify-map #image-map .leaflet-bar a:hover,
.modify-map #image-map .leaflet-bar a:focus-visible,
.modify-map #image-map .leaflet-bar button:hover,
.modify-map #image-map .leaflet-bar button:focus-visible,
.modify-map #image-map .leaflet-control-layers-toggle:hover,
.modify-map #image-map .leaflet-control-layers-toggle:focus-visible,
.modify-map #image-map .leaflet-layer-manager-toggle-control .btn:hover,
.modify-map #image-map .leaflet-layer-manager-toggle-control .btn:focus-visible {
  background-color: rgba(255, 255, 255, .76) !important;
}

/* Reserve the Leaflet close-button corner so the status badge never sits under
 * the X button. */
.modify-map .status-edit-map-popup-head {
  padding-right: 1.8rem;
}
.modify-map .status-edit-map-popup-head .badge {
  flex: 0 0 auto;
  max-width: 8rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Desktop users can minimize the map-layer manager to its floating layers
 * button and restore it with one click. */
.modify-map.layer-manager-collapsed .leaflet-layer-manager-toggle-control {
  display: block;
}
.modify-map.layer-manager-collapsed .leaflet-layer-manager-control {
  display: none;
}
.modify-map .leaflet-layer-manager-control .btn-group .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
}
.modify-map .leaflet-layer-manager-control .min-w-0 {
  min-width: 0;
}
@media (max-width: 575.98px) {
  #layers.status-layers-modal .modal-dialog {
    width: 100% !important;
    max-width: none !important;
    height: 100vh !important;
    max-height: 100vh !important;
    margin: 0 !important;
  }
  @supports (height: 100dvh) {
    #layers.status-layers-modal .modal-dialog {
      height: 100dvh !important;
      max-height: 100dvh !important;
    }
  }
}

/* ----------------------------------------------------------
   2026-07-19 R21: single coherent public mobile-map surface
---------------------------------------------------------- */
@media (max-width: 991.98px) {
  body.page-map {
    --status-map-control-bg: rgba(248, 249, 250, .74);
    --status-map-control-bg-hover: rgba(248, 249, 250, .9);
    --status-map-control-border: rgba(33, 37, 41, .14);
    --status-map-control-shadow: 0 .18rem .62rem rgba(15, 23, 42, .14);
    --status-map-control-backdrop: blur(12px) saturate(135%);
  }

  /* Keep only Leaflet's own locate control on the public map. */
  body.page-map .status-floating-dock > .status-location-shell {
    display: none !important;
  }

  /* One shared surface for the segmented zoom/fullscreen group. */
  html body.page-map #image-map .leaflet-control-container .leaflet-control-zoom {
    overflow: hidden !important;
    border: 1px solid var(--status-map-control-border) !important;
    border-radius: var(--status-map-control-radius, .55rem) !important;
    background: var(--status-map-control-bg) !important;
    box-shadow: var(--status-map-control-shadow) !important;
    backdrop-filter: var(--status-map-control-backdrop) !important;
    -webkit-backdrop-filter: var(--status-map-control-backdrop) !important;
  }

  html body.page-map #image-map .leaflet-control-container .leaflet-control-zoom > a,
  html body.page-map #image-map .leaflet-control-container .leaflet-control-zoom > button {
    color: #212529 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* Geocoder wrapper never paints a second box. The input is the sole button. */
  html body.page-map #image-map .leaflet-control-container .geocoder-control:not(.geocoder-control-expanded) {
    position: relative !important;
    box-sizing: border-box !important;
    width: var(--status-map-control-size) !important;
    min-width: var(--status-map-control-size) !important;
    max-width: var(--status-map-control-size) !important;
    height: var(--status-map-control-size) !important;
    min-height: var(--status-map-control-size) !important;
    max-height: var(--status-map-control-size) !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: var(--status-map-control-radius, .55rem) !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  html body.page-map #image-map .leaflet-control-container .geocoder-control:not(.geocoder-control-expanded) .geocoder-control-input {
    position: absolute !important;
    inset: 0 !important;
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    max-height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid var(--status-map-control-border) !important;
    border-radius: var(--status-map-control-radius, .55rem) !important;
    background-color: var(--status-map-control-bg) !important;
    box-shadow: var(--status-map-control-shadow) !important;
    backdrop-filter: var(--status-map-control-backdrop) !important;
    -webkit-backdrop-filter: var(--status-map-control-backdrop) !important;
  }

  /* Standalone Leaflet controls use the exact same surface. */
  html body.page-map #image-map .leaflet-control-container .leaflet-control-locate > a,
  html body.page-map #image-map .leaflet-control-container .leaflet-control-layers-toggle,
  html body.page-map #image-map .leaflet-control-container .easy-button-container > button,
  html body.page-map #image-map .leaflet-control-container .status-map-actions-trigger {
    color: #212529 !important;
    border-color: var(--status-map-control-border) !important;
    background-color: var(--status-map-control-bg) !important;
    box-shadow: var(--status-map-control-shadow) !important;
    backdrop-filter: var(--status-map-control-backdrop) !important;
    -webkit-backdrop-filter: var(--status-map-control-backdrop) !important;
  }

  html body.page-map #image-map .leaflet-control-container .leaflet-control-zoom > a:hover,
  html body.page-map #image-map .leaflet-control-container .leaflet-control-zoom > a:focus-visible,
  html body.page-map #image-map .leaflet-control-container .leaflet-control-locate > a:hover,
  html body.page-map #image-map .leaflet-control-container .leaflet-control-locate > a:focus-visible,
  html body.page-map #image-map .leaflet-control-container .leaflet-control-layers-toggle:hover,
  html body.page-map #image-map .leaflet-control-container .leaflet-control-layers-toggle:focus-visible,
  html body.page-map #image-map .leaflet-control-container .geocoder-control-input:hover,
  html body.page-map #image-map .leaflet-control-container .geocoder-control-input:focus-visible,
  html body.page-map #image-map .leaflet-control-container .status-map-actions-trigger:hover,
  html body.page-map #image-map .leaflet-control-container .status-map-actions-trigger:focus-visible {
    color: #212529 !important;
    background-color: var(--status-map-control-bg-hover) !important;
    text-shadow: none !important;
  }

  /* Active locate changes only the glyph colour, not the whole surface. */
  html body.page-map #image-map .leaflet-control-locate.active > a,
  html body.page-map #image-map .leaflet-control-locate.active > a:hover,
  html body.page-map #image-map .leaflet-control-locate.active > a:focus-visible,
  html body.page-map #image-map .leaflet-control-locate.status-locate-success > a,
  html body.page-map #image-map .leaflet-control-locate.status-locate-success > a:hover,
  html body.page-map #image-map .leaflet-control-locate.status-locate-success > a:focus-visible {
    color: #198754 !important;
    background-color: var(--status-map-control-bg) !important;
  }

  /* Connectivity stays semantic, but translucent and singular. */
  body.page-map .status-connectivity-main {
    overflow: hidden !important;
    border-color: rgba(255, 255, 255, .34) !important;
    background: rgba(25, 135, 84, .62) !important;
    box-shadow: var(--status-map-control-shadow) !important;
    backdrop-filter: var(--status-map-control-backdrop) !important;
    -webkit-backdrop-filter: var(--status-map-control-backdrop) !important;
  }
  body.page-map .status-connectivity.is-offline .status-connectivity-main,
  body.page-map .status-connectivity.is-cached .status-connectivity-main {
    background: rgba(178, 106, 0, .62) !important;
  }
  body.page-map .status-connectivity-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    font-size: var(--status-map-control-icon-size, 22px) !important;
    line-height: 1 !important;
  }

  /* Compact landscape keeps the menu readable and lifts connectivity away
   * from Leaflet attribution. */
  body.page-map.status-compact-landscape .status-navbar .navbar-toggler {
    color: rgba(255, 255, 255, .9) !important;
    border-color: rgba(255, 255, 255, .16) !important;
    background: rgba(52, 58, 64, .78) !important;
    box-shadow: 0 .18rem .62rem rgba(0, 0, 0, .2) !important;
    backdrop-filter: blur(12px) saturate(120%) !important;
    -webkit-backdrop-filter: blur(12px) saturate(120%) !important;
  }
  body.page-map.status-compact-landscape .status-floating-dock {
    bottom: max(3.25rem, calc(var(--status-safe-bottom) + 3.25rem)) !important;
  }
}

@media (max-width: 767.98px) and (orientation: portrait) {
  /* The map continues behind a light frosted bottom bar. */
  body.page-map.status-has-mobile-nav #container {
    bottom: 0 !important;
  }

  body.page-map.status-has-mobile-nav .status-mobile-nav {
    z-index: 20100 !important;
    overflow: hidden !important;
    border-top: 1px solid rgba(255, 255, 255, .72) !important;
    background: rgba(248, 249, 250, .72) !important;
    box-shadow: 0 -.18rem .7rem rgba(15, 23, 42, .12) !important;
    backdrop-filter: blur(16px) saturate(135%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(135%) !important;
  }

  body.page-map.status-has-mobile-nav .status-mobile-nav::before,
  body.page-map.status-has-mobile-nav .status-mobile-nav::after {
    content: none !important;
    display: none !important;
  }

  body.page-map.status-has-mobile-nav .status-mobile-nav-item,
  body.page-map.status-has-mobile-nav .status-mobile-nav-item:hover,
  body.page-map.status-has-mobile-nav .status-mobile-nav-item:focus-visible {
    color: rgba(52, 58, 64, .78) !important;
    background: transparent !important;
  }

  body.page-map.status-has-mobile-nav .status-mobile-nav-item.active,
  body.page-map.status-has-mobile-nav .status-mobile-nav-item.active:hover,
  body.page-map.status-has-mobile-nav .status-mobile-nav-item.active:focus-visible {
    color: #0d6efd !important;
    background: rgba(13, 110, 253, .12) !important;
  }

  body.page-map.status-has-mobile-nav .status-mobile-nav-item .status-mobile-nav-icon,
  body.page-map.status-has-mobile-nav .status-mobile-nav-item .status-mobile-nav-label {
    color: inherit !important;
  }

  html body.page-map.status-has-mobile-nav #image-map .leaflet-bottom {
    bottom: 0 !important;
  }

  body.page-map.status-has-mobile-nav .status-floating-dock {
    bottom: calc(var(--status-mobile-nav-actual-height, var(--status-mobile-nav-height)) + .55rem) !important;
  }
}


/* ----------------------------------------------------------
   2026-07-20 R35: coordinates modal stacking
---------------------------------------------------------- */
#coordinates.status-coordinates-modal,
body.modal-open #coordinates.status-coordinates-modal {
  position: fixed !important;
  z-index: 100120 !important;
  pointer-events: none;
}
#coordinates.status-coordinates-modal.show {
  pointer-events: auto;
}
#coordinates.status-coordinates-modal .modal-dialog,
#coordinates.status-coordinates-modal .modal-content {
  position: relative;
  z-index: 1 !important;
  pointer-events: auto !important;
}
.modal-backdrop.status-coordinates-backdrop {
  z-index: 100110 !important;
}
@media (max-width: 575.98px) {
  #coordinates.status-coordinates-modal .modal-dialog {
    width: auto;
    margin: .5rem;
  }
  #coordinates.status-coordinates-modal .modal-body {
    padding: .75rem;
  }
  #coordinates.status-coordinates-modal .table {
    margin-bottom: 0;
  }
  #coordinates.status-coordinates-modal .table td {
    display: block;
    width: 100%;
    padding: .25rem 0;
    border: 0;
  }
}


/* R50: Item editor status controls and unified modal feedback. */
.status-item-state-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
  margin-bottom: 1.1rem;
}
.status-item-state-option {
  position: relative;
  display: grid;
  grid-template-columns: 2.6rem minmax(0, 1fr) auto;
  align-items: center;
  gap: .7rem;
  min-height: 76px;
  margin: 0;
  padding: .8rem .85rem;
  overflow: hidden;
  border: 1px solid #dfe3e8;
  border-radius: .7rem;
  background: #fff;
  color: #343a40;
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.status-item-state-option:hover {
  border-color: #aeb8c2;
  box-shadow: 0 .2rem .55rem rgba(0,0,0,.06);
}
.status-item-state-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.status-item-state-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: .65rem;
  background: #eef1f4;
  color: #6c757d;
  font-size: 1.45rem;
}
.status-item-state-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  line-height: 1.25;
}
.status-item-state-copy strong { font-size: .96rem; }
.status-item-state-copy small {
  margin-top: .22rem;
  color: #6c757d;
  font-size: .78rem;
  font-weight: 400;
}
.status-item-state-indicator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 3.25rem;
  min-height: 1.8rem;
  padding: .2rem .55rem;
  border-radius: 999px;
  background: #e9ecef;
  color: #59616a;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.status-item-state-indicator .is-on { display: none; }
.status-item-state-input:checked ~ .status-item-state-indicator .is-on { display: inline; }
.status-item-state-input:checked ~ .status-item-state-indicator .is-off { display: none; }
.status-item-state-enabled:has(.status-item-state-input:checked) {
  border-color: rgba(40,167,69,.48);
  background: rgba(40,167,69,.045);
  box-shadow: 0 0 0 .18rem rgba(40,167,69,.08);
}
.status-item-state-enabled .status-item-state-input:checked ~ .status-item-state-icon,
.status-item-state-enabled .status-item-state-input:checked ~ .status-item-state-indicator {
  background: #dff3e4;
  color: #1d7734;
}
.status-item-state-hidden:has(.status-item-state-input:checked) {
  border-color: rgba(255,193,7,.62);
  background: rgba(255,193,7,.07);
  box-shadow: 0 0 0 .18rem rgba(255,193,7,.09);
}
.status-item-state-hidden .status-item-state-input:checked ~ .status-item-state-icon,
.status-item-state-hidden .status-item-state-input:checked ~ .status-item-state-indicator {
  background: #fff0bd;
  color: #805f00;
}
.status-item-state-input:focus-visible ~ .status-item-state-icon {
  outline: 3px solid rgba(0,123,255,.28);
  outline-offset: 2px;
}
.status-content-editor-feedback {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: .55rem;
  margin: 0;
  padding: .7rem 1rem;
  border-width: 1px 0 0;
  border-radius: 0;
  font-weight: 600;
}
.status-content-editor-feedback .material-icons { flex: 0 0 auto; }
@media (max-width: 767.98px) {
  .status-item-state-grid { grid-template-columns: 1fr; gap: .55rem; }
  .status-item-state-option { min-height: 68px; padding: .7rem .75rem; }
}