/* ===== FONT (LOGGERHEAD-STYLE) ===== */
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap");

/* ===== RESET ===== */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ===== GLOBAL ===== */
body {
  font-family: "Montserrat", Arial, sans-serif;
  background: #f4f6f7;
  color: #1f2d2b;
}

h1 {
  text-align: center;
  margin: 50px 0 30px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #0b3d2e;
}

/* ===== NAVBAR ===== */
.navbar {
  background: #ffffff;
  border-bottom: 1px solid #e3e8ea;
  height: 104px;
  padding: 0 64px;

  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Logo */
.navbar img,
.nav-logo {
  height: 72px;
  width: auto;
  display: block;
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
  mix-blend-mode: normal !important;
}

/* Nav links */
.nav-links {
  display: flex;
  gap: 40px;
}

.navbar a {
  color: #0b3d2e;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.navbar a:hover {
  color: #1c7c6b;
}

/* ===== MAIN LAYOUT ===== */
.container {
  max-width: 1200px;
  margin: 0 auto 40px;
  padding: 0 24px;

  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 36px;
}

.panel {
  background: #ffffff;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 10px 28px rgba(0,0,0,0.05);
}

/* ===== MAP ===== */
#map {
  width: 100%;
  height: 420px;
  border-radius: 12px;
  overflow: hidden;
}

/* ===== FORM ===== */
label {
  display: block;
  margin-top: 18px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #0b3d2e;
}

input,
select {
  width: 100%;
  margin-top: 6px;
  padding: 12px;
  border-radius: 6px;
  border: 1px solid #ccd6da;
  font-family: inherit;
  font-size: 0.9rem;
}

input[type="date"] {
  background: #ffffff;
  cursor: pointer;
}

button {
  width: 100%;
  margin-top: 22px;
  padding: 14px;
  background: #0b3d2e;
  color: white;
  border: none;
  border-radius: 6px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}

button:hover {
  background: #156b56;
}

.status {
  margin-top: 18px;
  font-weight: 600;
  color: #0b3d2e;
}

/* ===== HEATMAP SECTION ===== */
.heatmap-section {
  margin: 40px 0;
  display: flex;
  justify-content: center;
}

.heatmap-container {
  background: #ffffff;
  padding: 32px;
  border-radius: 12px;
  box-shadow: 0 10px 28px rgba(0,0,0,0.05);
}

/* ===== HEATMAP HEADER ===== */
.heatmap-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-bottom: 20px;
}

.week-nav {
  background: #ffffff;
  border: 1px solid #cfd9dc;
  padding: 6px 12px;
  cursor: pointer;
  font-size: 0.85rem;
  color: #0b3d2e;
}

.week-nav:hover {
  background: #f1f5f6;
}

/* ===== HEATMAP LEGEND ===== */
.heatmap-legend {
  display: flex;
  justify-content: center;
  gap: 24px;
  margin-bottom: 18px;
  font-size: 0.75rem;
  font-weight: 500;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.legend-color {
  width: 16px;
  height: 16px;
  border: 1px solid #cfd9dc;
}

.legend-low { background: #00e676; }
.legend-mid { background: #b9f6ca; }
.legend-high { background: #ffffff; }

/* ===== HEATMAP GRID ===== */
.heatmap-grid {
  display: grid;
  grid-template-columns: 120px repeat(29, 36px);
  border: 1px solid #dfe6e8;
}

.heatmap-grid > div {
  border: 1px solid #eef2f3;
  font-size: 0.75rem;
  padding: 6px 4px;
  text-align: center;
}

/* Sector labels */
.sector-label {
  background: #ffffff;
  font-weight: 700;
  color: #0b3d2e;
  text-align: center;
}

/* Heatmap cells */
.cell {
  height: 26px;
  background: #ffffff;
  cursor: pointer;
}

/* Selected sector/cell */
.cell.selected,
.sector-label.selected {
  outline: 2px solid #1c7c6b;
  outline-offset: -2px;
}

/* ===== TABLES ===== */
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}

thead th {
  background: #eef4f3;
  color: #0b3d2e;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 2px solid #d7e2e0;
}

th,
td {
  padding: 14px 12px;
  border-bottom: 1px solid #e5e9eb;
  text-align: center;
}

td.name {
  text-align: left;
  font-weight: 500;
}

tbody tr:hover {
  background: #f6faf9;
}

/* ===== GALLERY ===== */
.gallery {
  margin-top: 36px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.photo-card {
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.05);
  overflow: hidden;
}

.photo-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ===== UPLOAD BOX ===== */
.upload-box {
  border: 2px dashed #ccd6da;
  padding: 46px;
  text-align: center;
  font-weight: 500;
  color: #0b3d2e;
  cursor: pointer;
}

.upload-box:hover {
  background: #f6faf9;
}

/* ===== COMPACT RESERVE PANEL ===== */
.panel {
  padding: 18px; /* was 24px */
}

/* Panel title */
.panel h2 {
  font-size: 1rem;
  margin-bottom: 10px;
}

/* Labels */
.panel label {
  margin-top: 12px; /* was 18px */
  font-size: 0.65rem;
  letter-spacing: 0.07em;
}

/* Inputs & selects */
.panel input,
.panel select {
  padding: 9px 10px; /* was 12px */
  font-size: 0.85rem;
}

/* Button */
.panel button {
  margin-top: 16px; /* was 22px */
  padding: 11px;
  font-size: 0.75rem;
}

/* Status message */
.panel .status {
  margin-top: 12px;
  font-size: 0.8rem;
}

/* ===== ALIGN MAP HEIGHT WITH RESERVE PANEL ===== */
#map {
  height: 480px; /* increase until bottoms line up */
}