/* Global styles */
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  line-height: 1.6;
  color: #333;
}

header {
  background-color: #C8102E;
  padding: 1em;
  text-align: center;
  position: relative;
}
header h1 {
  color: #fff;
  margin: 0;
}
header img {
  max-height: 60px;
  width: auto;
  display: block;
  margin: 0.5em auto;
}

/* Disclaimer box */
.disclaimer {
  background-color: #f0f0f0;
  padding: 1em;
  border-radius: 4px;
  margin: 1em auto;
  max-width: 800px;
  color: #333;
}

main {
  max-width: 800px;
  margin: 0 auto;
  padding: 1em;
}

section {
  margin-bottom: 1em;
}

label {
  font-weight: bold;
}

input[type="text"] {
  width: calc(100% - 140px);
  padding: 0.5em;
  margin-right: 0.5em;
  border: 1px solid #ccc;
  border-radius: 4px;
}

button {
  padding: 0.5em 1em;
  border: none;
  background-color: #C8102E;
  color: #fff;
  border-radius: 4px;
  cursor: pointer;
}
button:hover {
  background-color: #a10b23;
}

#map {
  width: 100%;
  height: 400px;
  margin: 1em 0;
}

#status-section,
#home-centre-section,
#questionnaire-section,
#results-section {
  width: 90%;
  margin: 1rem auto;
  background: #fff;
  padding: 1rem;
  border-radius: 8px;
  box-shadow: 0 1px 6px #eee;
  min-height: 32px;
}

/* Questionnaire question boxes */
#questionnaire-section > div {
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 1em;
  margin-bottom: 1em;
  background-color: #fafafa;
}

fieldset {
  border: none !important;
  margin: 0;
  padding: 0;
}

/* Table for summary */
table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1em;
}
table th,
table td {
  border: 1px solid #ddd;
  padding: 0.5em;
  text-align: left;
}
table th {
  background-color: #f4f4f4;
}

/* Release requirements summary styling */
#results-section {
  background-color: #f9f9f9;
  border: 1px solid #ccc;
  padding: 1em;
  border-radius: 4px;
}
#results-section ul {
  margin: 0;
  padding-left: 1.5em;
}
#results-section li {
  margin: 0.5em 0;
  position: relative;
  list-style: none;
  padding-left: 1.5em;
}
#results-section li::before {
  content: '✔';
  color: #4CAF50;
  position: absolute;
  left: 0;
}
#results-section a {
  color: #C8102E;
  text-decoration: none;
  font-weight: bold;
}

/* Hide default Leaflet controls */
.leaflet-control-container {
  display: none !important;
}
.leaflet-bottom.leaflet-left,
.leaflet-bottom.leaflet-right,
.leaflet-top.leaflet-left,
.leaflet-top.leaflet-right {
  pointer-events: none;
}

/* Custom HTML legend styling */
#legend {
  background: #fff;
  padding: 10px;
  border-radius: 4px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.3);
  font-size: 0.9em;
  line-height: 1.4;
  margin-top: 0.5em;
}
#legend span {
  display: inline-flex;
  align-items: center;
  margin-right: 8px;
}
#legend .legend-boundary::before {
  background-color: #C8102E;
  content: '';
  width: 12px;
  height: 12px;
  display: inline-block;
  margin-right: 5px;
  vertical-align: middle;
}
#legend .legend-city::before {
  background-color: #0000FF;
  content: '';
  width: 12px;
  height: 12px;
  display: inline-block;
  margin-right: 5px;
  vertical-align: middle;
}
#legend .legend-user {
  display: inline-flex;
  align-items: center;
  margin-right: 8px;
}
#legend .legend-user::before {
  content: url('https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-red.png');
  width: 18px;
  height: 30px;
  display: inline-block;
  margin-right: 5px;
  vertical-align: middle;
}

/* Hide empty sections until populated */
#status-section:empty,
#home-centre-section:empty,
#questionnaire-section:empty,
#results-section:empty {
  display: none;
}