.layout {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: #eaeff5;
  color: #222;
}

.layout__header {
  background-color: #0f172a;
  color: #f8fafc;
  padding: 0 1.5rem;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 10;
}

.layout__brand {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.layout__title {
  margin: 0;
  font-size: 1.25rem;
}

.layout__tenant {
  margin: 0;
  font-size: 0.9rem;
  color: #cbd5e1;
}

.layout__header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}


.layout__logout-button {
  background-color: #e11d48;
  color: #f8fafc;
  border: none;
  border-radius: 0.375rem;
  padding: 0.5rem 1rem;
  cursor: pointer;
  font-weight: 600;
}

.layout__logout-button:hover,
.layout__logout-button:focus {
  background-color: #be123c;
}

.layout__body {
  display: grid;
  grid-template-columns: 220px 1fr;
  flex: 1;
  min-height: 0;
  background-color: #eaeff5;
}

.layout__sidebar {
  background-color: #e2e8f0;
  padding: 1rem;
  border-right: 1px solid #cbd5e1;
  overflow-y: auto;
}

.layout__nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.layout__nav-item {
  padding: 0.5rem;
  border-radius: 0.25rem;
}

.layout__nav-item--active {
  background-color: #cbd5e1;
  font-weight: 600;
}

.layout__nav-link {
  color: inherit;
  text-decoration: none;
  display: block;
}

.layout__nav-link:focus,
.layout__nav-link:hover {
  text-decoration: underline;
}

.layout__content {
  padding: 1.5rem;
  background-color: #ffffff;
  overflow-y: auto;
  min-height: 0;
}

.layout__coverage-gap-banner {
  background-color: #fbbf24;
  color: #78350f;
  padding: 12px 16px;
  font-weight: 600;
  text-align: center;
  border-bottom: 1px solid #f59e0b;
}
.onboarding {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: linear-gradient(180deg, #0f172a 0px, #f8fafc 320px);
  color: #0f172a;
}

.onboarding__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  padding: 32px 48px 24px;
  color: #f8fafc;
}

.onboarding__title {
  margin: 4px 0 0;
  font-size: 28px;
}

.onboarding__eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-weight: 700;
  margin: 0;
  color: #cbd5e1;
}

.onboarding__subtitle {
  margin: 6px 0 0;
  color: #e2e8f0;
  max-width: 720px;
}

.onboarding__progress {
  background: rgba(15, 23, 42, 0.35);
  border: 1px solid rgba(226, 232, 240, 0.4);
  padding: 12px 16px;
  border-radius: 10px;
  min-width: 240px;
}

.onboarding__progress-label {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #cbd5e1;
}

.onboarding__progress-value {
  font-size: 28px;
  font-weight: 700;
  margin: 4px 0;
}

.onboarding__progress-bar {
  background: rgba(241, 245, 249, 0.4);
  height: 8px;
  border-radius: 999px;
  overflow: hidden;
}

.onboarding__progress-bar-fill {
  background: linear-gradient(90deg, #38bdf8, #6366f1);
  height: 8px;
  transition: width 0.2s ease;
}

.onboarding__save {
  margin-top: 10px;
  width: 100%;
  background: transparent;
  color: #f1f5f9;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  padding: 8px 10px;
  cursor: pointer;
  font-weight: 600;
}

.onboarding__body {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 18px;
  padding: 0 48px 48px;
  flex: 1;
}

.onboarding__steps {
  background: #fff;
  border-radius: 12px;
  padding: 20px 18px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.12);
  align-self: flex-start;
}

.onboarding__steps ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.onboarding__step {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 12px;
  padding: 10px;
  border-radius: 10px;
}

.onboarding__step--active {
  background: #eff6ff;
  border: 1px solid #bfdbfe;
}

.onboarding__step--complete {
  background: #ecfdf3;
  border: 1px solid #bbf7d0;
}

.onboarding__step-index {
  width: 32px;
  height: 32px;
  background: #e2e8f0;
  border-radius: 8px;
  display: grid;
  place-items: center;
  font-weight: 700;
}

.onboarding__step--active .onboarding__step-index {
  background: #3b82f6;
  color: #fff;
}

.onboarding__step-label {
  font-weight: 700;
  margin-bottom: 4px;
}

.onboarding__step-description {
  margin: 0;
  color: #475569;
  font-size: 14px;
}

.onboarding__note {
  margin-top: 16px;
  padding: 12px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 14px;
}

.onboarding__note--info {
  background: #e0f2fe;
  color: #0c4a6e;
  border: 1px solid #38bdf8;
}

.onboarding__panel {
  background: #fff;
  border-radius: 14px;
  padding: 28px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.1);
  min-height: 620px;
}

.onboarding__form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  color: #0f172a;
}

.onboarding__hint {
  margin: 0 0 6px;
  color: #475569;
  font-size: 14px;
}

.onboarding__field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.onboarding__field-label {
  font-weight: 700;
}

.onboarding__field input,
.onboarding__field select,
.onboarding__field textarea {
  padding: 10px 12px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  font-size: 15px;
}

.onboarding__actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 6px;
}

.onboarding__primary,
.onboarding__secondary,
.onboarding__ghost {
  padding: 10px 14px;
  border-radius: 10px;
  font-weight: 700;
  cursor: pointer;
  border: none;
}

.onboarding__primary {
  background: linear-gradient(90deg, #2563eb, #6366f1);
  color: #fff;
  border: 1px solid #1d4ed8;
}

.onboarding__secondary {
  background: #fff;
  color: #0f172a;
  border: 1px solid #cbd5e1;
}

.onboarding__ghost {
  background: transparent;
  border: 1px dashed #cbd5e1;
  color: #334155;
  width: fit-content;
}

.onboarding__checkbox {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  padding: 12px;
  border-radius: 10px;
}

.onboarding__summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  padding: 16px;
  border-radius: 12px;
}

.onboarding__summary h3 {
  margin-top: 0;
}

.onboarding__summary ul {
  margin: 0;
  padding-left: 16px;
  color: #334155;
}

@media (max-width: 1024px) {
  .onboarding__body {
    grid-template-columns: 1fr;
  }

  .onboarding__steps {
    order: 2;
  }
}
.centres-admin {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.centres-admin__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}

.centres-admin__helper {
  margin: 4px 0 0;
  color: #475569;
}

.centres-admin__layout {
  display: grid;
  grid-template-columns: minmax(260px, 320px) 1fr;
  gap: 16px;
}

.centres-admin__panel {
  background: #ffffff;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.centres-admin__panel--detail {
  min-height: 420px;
}

.centres-admin__panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.centres-admin__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.centres-admin__list-item {
  width: 100%;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 12px;
  background: #f8fafc;
  cursor: pointer;
  text-align: left;
}

.centres-admin__list-item--active {
  border-color: #2563eb;
  background: #eff6ff;
}

.centres-admin__centre-name {
  font-weight: 600;
}

.centres-admin__centre-detail {
  margin: 4px 0 0;
  color: #475569;
  font-size: 0.9rem;
}

.centres-admin__table-wrapper {
  width: 100%;
  overflow-x: auto;
}

.centres-admin__table {
  width: 100%;
  border-collapse: collapse;
}

.centres-admin__table th,
.centres-admin__table td {
  padding: 10px 8px;
  border-bottom: 1px solid #e2e8f0;
  text-align: left;
}

.centres-admin__actions {
  display: flex;
  gap: 12px;
}

.centres-admin__primary,
.centres-admin__secondary {
  border: none;
  border-radius: 8px;
  padding: 8px 14px;
  font-weight: 600;
  cursor: pointer;
}

.centres-admin__primary {
  background: #2563eb;
  color: #ffffff;
}

.centres-admin__secondary {
  background: #e2e8f0;
  color: #0f172a;
}

.centres-admin__link {
  background: none;
  border: none;
  color: #2563eb;
  cursor: pointer;
  padding: 0;
  font: inherit;
}

.centres-admin__link--danger {
  color: #dc2626;
}

.centres-admin__error {
  background: #fee2e2;
  color: #b91c1c;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid #fecaca;
}

.centres-admin__status,
.centres-admin__empty {
  color: #64748b;
  margin: 8px 0 0;
}

.centres-admin__modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 10;
}

.centres-admin__modal {
  background: #ffffff;
  border-radius: 12px;
  padding: 20px;
  max-width: 420px;
  width: 100%;
  box-shadow: 0 18px 30px rgba(15, 23, 42, 0.2);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.centres-admin__modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

.centres-admin__form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.centres-admin__form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-weight: 600;
  color: #0f172a;
}

.centres-admin__form input,
.centres-admin__form select {
  border: 1px solid #cbd5f5;
  border-radius: 8px;
  padding: 8px 10px;
  font: inherit;
}

.centres-admin__modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

@media (max-width: 960px) {
  .centres-admin__layout {
    grid-template-columns: 1fr;
  }
}

/* Override default control style */
.mapbox-gl-draw_ctrl-bottom-left,
.mapbox-gl-draw_ctrl-top-left {
  margin-left:0;
  border-radius:0 4px 4px 0;
}
.mapbox-gl-draw_ctrl-top-right,
.mapbox-gl-draw_ctrl-bottom-right {
  margin-right:0;
  border-radius:4px 0 0 4px;
}

.mapbox-gl-draw_ctrl-draw-btn {
  border-color:rgba(0,0,0,0.9);
  color:rgba(255,255,255,0.5);
  width:30px;
  height:30px;
}

.mapbox-gl-draw_ctrl-draw-btn.active,
.mapbox-gl-draw_ctrl-draw-btn.active:hover {
  background-color:rgb(0 0 0/5%);
}
.mapbox-gl-draw_ctrl-draw-btn {
  background-repeat: no-repeat;
  background-position: center;
}

.mapbox-gl-draw_point {
  background-image: url('data:image/svg+xml;utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" width="20" height="20">%3Cpath d="m10 2c-3.3 0-6 2.7-6 6s6 9 6 9 6-5.7 6-9-2.7-6-6-6zm0 2c2.1 0 3.8 1.7 3.8 3.8 0 1.5-1.8 3.9-2.9 5.2h-1.7c-1.1-1.4-2.9-3.8-2.9-5.2-.1-2.1 1.6-3.8 3.7-3.8z"/>%3C/svg>');
}
.mapbox-gl-draw_polygon {
  background-image: url('data:image/svg+xml;utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" width="20" height="20">%3Cpath d="m15 12.3v-4.6c.6-.3 1-1 1-1.7 0-1.1-.9-2-2-2-.7 0-1.4.4-1.7 1h-4.6c-.3-.6-1-1-1.7-1-1.1 0-2 .9-2 2 0 .7.4 1.4 1 1.7v4.6c-.6.3-1 1-1 1.7 0 1.1.9 2 2 2 .7 0 1.4-.4 1.7-1h4.6c.3.6 1 1 1.7 1 1.1 0 2-.9 2-2 0-.7-.4-1.4-1-1.7zm-8-.3v-4l1-1h4l1 1v4l-1 1h-4z"/>%3C/svg>');
}
.mapbox-gl-draw_line {
  background-image: url('data:image/svg+xml;utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" width="20" height="20">%3Cpath d="m13.5 3.5c-1.4 0-2.5 1.1-2.5 2.5 0 .3 0 .6.2.9l-3.8 3.8c-.3-.1-.6-.2-.9-.2-1.4 0-2.5 1.1-2.5 2.5s1.1 2.5 2.5 2.5 2.5-1.1 2.5-2.5c0-.3 0-.6-.2-.9l3.8-3.8c.3.1.6.2.9.2 1.4 0 2.5-1.1 2.5-2.5s-1.1-2.5-2.5-2.5z"/>%3C/svg>');
}
.mapbox-gl-draw_trash {
  background-image: url('data:image/svg+xml;utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" width="20" height="20">%3Cpath d="M10,3.4 c-0.8,0-1.5,0.5-1.8,1.2H5l-1,1v1h12v-1l-1-1h-3.2C11.5,3.9,10.8,3.4,10,3.4z M5,8v7c0,1,1,2,2,2h6c1,0,2-1,2-2V8h-2v5.5h-1.5V8h-3 v5.5H7V8H5z"/>%3C/svg>');
}
.mapbox-gl-draw_uncombine {
  background-image: url('data:image/svg+xml;utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" width="20" height="20">%3Cpath d="m12 2c-.3 0-.5.1-.7.3l-1 1c-.4.4-.4 1 0 1.4l1 1c.4.4 1 .4 1.4 0l1-1c.4-.4.4-1 0-1.4l-1-1c-.2-.2-.4-.3-.7-.3zm4 4c-.3 0-.5.1-.7.3l-1 1c-.4.4-.4 1 0 1.4l1 1c.4.4 1 .4 1.4 0l1-1c.4-.4.4-1 0-1.4l-1-1c-.2-.2-.4-.3-.7-.3zm-7 1c-1 0-1 1-.5 1.5.3.3 1 1 1 1l-1 1s-.5.5 0 1 1 0 1 0l1-1 1 1c.5.5 1.5.5 1.5-.5v-4zm-5 3c-.3 0-.5.1-.7.3l-1 1c-.4.4-.4 1 0 1.4l4.9 4.9c.4.4 1 .4 1.4 0l1-1c.4-.4.4-1 0-1.4l-4.9-4.9c-.1-.2-.4-.3-.7-.3z"/>%3C/svg>');
}
.mapbox-gl-draw_combine {
  background-image: url('data:image/svg+xml;utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" width="20" height="20">%3Cpath d="M12.1,2c-0.3,0-0.5,0.1-0.7,0.3l-1,1c-0.4,0.4-0.4,1,0,1.4l4.9,4.9c0.4,0.4,1,0.4,1.4,0l1-1 c0.4-0.4,0.4-1,0-1.4l-4.9-4.9C12.6,2.1,12.3,2,12.1,2z M8,8C7,8,7,9,7.5,9.5c0.3,0.3,1,1,1,1l-1,1c0,0-0.5,0.5,0,1s1,0,1,0l1-1l1,1 C11,13,12,13,12,12V8H8z M4,10c-0.3,0-0.5,0.1-0.7,0.3l-1,1c-0.4,0.4-0.4,1,0,1.4l1,1c0.4,0.4,1,0.4,1.4,0l1-1c0.4-0.4,0.4-1,0-1.4 l-1-1C4.5,10.1,4.3,10,4,10z M8,14c-0.3,0-0.5,0.1-0.7,0.3l-1,1c-0.4,0.4-0.4,1,0,1.4l1,1c0.4,0.4,1,0.4,1.4,0l1-1 c0.4-0.4,0.4-1,0-1.4l-1-1C8.5,14.1,8.3,14,8,14z"/>%3C/svg>');
}
.mapbox-gl-draw_srmode {
  background-image: url('data:image/svg+xml;utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 418.54 418.54" style="enable-background:new 0 0 418.54 418.54;" xml:space="preserve" width="20" height="20">%3Cpath d="M365.566,162.496c0.016-6.432-5.2-11.648-11.648-11.648c-0.912,0-1.792,0.096-2.608,0.304 c-11.952,2.72-22.64,8.752-31.008,17.104c-11.568,11.568-18.72,27.552-18.72,45.2l0.016,16.016l-32.416-32.416 c29.424-49.152,23.136-113.728-19.216-156.08c-49.984-49.984-131.04-49.984-181.024,0V0h-16v68.288h68.192v-16h-40.88 c43.664-43.664,114.72-43.664,158.4,0c35.968,35.968,41.904,90.336,18.624,132.848l-74.416-74.416 c-12.448-12.448-32.816-12.448-45.248,0c-12.448,12.448-12.448,32.816,0,45.248l60.88,60.88c-9.2-0.944-18.72,1.984-25.776,9.024 c-4.864,4.864-7.744,10.928-8.8,17.232c-30.144,1.2-60.688-9.472-83.648-32.432L68.942,222c25.04,25.04,57.856,37.264,90.672,37.2 l-16.272,61.008c-2.816,10.64-0.096,22.432,8.224,30.768l37.216,37.216c40.464,40.464,106.032,40.464,146.496,0 c19.6-19.6,29.6-45.088,30.208-70.752l0.112,0.096v-2.512c0-0.048,0-0.096,0-0.112L365.566,162.496z"/>%3C/svg>');
}


.maplibregl-map.mouse-pointer .maplibregl-canvas-container.maplibregl-interactive {
  cursor: pointer;
}
.maplibregl-map.mouse-move .maplibregl-canvas-container.maplibregl-interactive {
  cursor: move;
}
.maplibregl-map.mouse-add .maplibregl-canvas-container.maplibregl-interactive {
  cursor: crosshair;
}
.maplibregl-map.mouse-move.mode-direct_select .maplibregl-canvas-container.maplibregl-interactive {
  cursor: grab;
  cursor: -moz-grab;
  cursor: -webkit-grab;
}
.maplibregl-map.mode-direct_select.feature-vertex.mouse-move .maplibregl-canvas-container.maplibregl-interactive {
  cursor: move;
}
.maplibregl-map.mode-direct_select.feature-midpoint.mouse-pointer .maplibregl-canvas-container.maplibregl-interactive {
  cursor: cell;
}
.maplibregl-map.mode-direct_select.feature-feature.mouse-move .maplibregl-canvas-container.maplibregl-interactive {
  cursor: move;
}
.maplibregl-map.mode-static.mouse-pointer  .maplibregl-canvas-container.maplibregl-interactive {
  cursor: grab;
  cursor: -moz-grab;
  cursor: -webkit-grab;
}

.mapbox-gl-draw_boxselect {
    pointer-events: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    background: rgba(0,0,0,.1);
    border: 2px dotted #fff;
    opacity: 0.5;
}
:root {
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  line-height: 1.5;
  font-weight: 400;
  color: #0f172a;
  background-color: #f1f5f9;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
}

a {
  color: inherit;
}

h1 {
  margin: 0;
}
