/* ========== ROOT VARIABLES ========== */
:root {
  --nav-height: 72px;

  --green-dark: #1b5e20;
  --green-main: #2e7d32;
  --green-light: #e8f5e9;
  --green-lighter: #f1f8e9;
  --green-border: #a5d6a7;

  --text-green: #1f6b3a;
  --bg-page: #f9f9f9;
}

/* ========== BASE ========== */
body {
  padding-top: var(--nav-height);
  background: var(--bg-page);
  margin: 0;
  font-family: "Segoe UI", Arial, sans-serif;
}

/* ========== STOP PAGE-LEVEL HORIZONTAL SCROLLBAR ========== */
main,
body {
  overflow-x: hidden;
}

/* ========== FILTER BAR ========== */
#filterBar {
  background: #f8f9fa;
  border-bottom: 1px solid #ddd;
  margin-top: 10px;
  padding: 6px 0;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
}

#filterForm {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: flex-end;
}

#filterForm .form-label {
  font-size: 14px;
  margin-bottom: 6px;
}

#filterForm .form-select {
  height: 44px;
  padding: 8px 32px 8px 10px;
  font-size: 0.95rem;
  min-width: auto;
}

/* ========== MAIN LAYOUT ========== */
main {
  background: #fff;
  min-height: calc(100vh - var(--nav-height) - 80px);
  border-top: 1px solid #ddd;
  padding: 1.5rem;
  border-radius: 8px;
}

.dashboard-container {
  display: flex;
  gap: 1rem;
  height: calc(80vh - 20px);
  width: 100%;
  overflow-x: hidden;
}

/* ========== LEFT SECTION (MAP+DATA) ========== */
.map-section {
  flex: 1 1 auto;
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.map-section::-webkit-scrollbar {
  width: 0px;
  height: 0px;
  display: none;
}

#map {
  height: 100%;
  width: 100%;
  border-radius: 10px;
  border: 3px solid var(--green-main);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

/* ========== RIGHT INFO-SECTION ========== */
.info-section {
  flex: 0 0 320px;
  width: 320px;
  min-width: 320px;
  max-width: 320px;
  height: 72vh;
  margin-top: 2%;
  background: #f5f5f5;
  border-radius: 8px;
  border: 1px solid var(--green-main);
  padding: 1rem;
  color: var(--green-main);
  display: flex;
  flex-direction: column;
}

.info-panel-content {
  flex: 1;
  overflow-y: auto;
  font-size: 0.95rem;
  color: var(--text-green);
}

/* ========== MAP OVERLAY ========== */
.map-overlay {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 1100;
  display: flex;
  gap: 10px;
  pointer-events: none;
}

.map-overlay > div {
  pointer-events: auto;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(25, 135, 84, 0.18);
  border-radius: 8px;
  padding: 6px 8px;
  box-shadow: 0 6px 18px rgba(10, 50, 20, 0.06);
}

#mapOverlay > div:empty {
  display: none !important;
}

/* ========== DATA PANNEL ========== */
#dataPanel {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding-top: 0;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

#dataPanel::-webkit-scrollbar {
  width: 0px;
  height: 0px;
  display: none;
}

/* ========== HEADER ========== */
#cropInfo h5 {
  margin: 0 0 8px 0;
  font-weight: 600;
  font-size: 1rem;
  color: var(--green-dark);
}

#cropHeader.demo-offset {
  margin-top: 0;
}

/* ========== TABLE WRAPPER ========== */
#tableWrapper {
  flex: 0 0 auto;
  max-height: 70vh;
  overflow-y: auto;
  margin-bottom: 20px;
  width: 100%;
}

#tableWrapper.demo-narrow {
  width: 100%;
}

#tableWrapper.demo-gap {
  margin-bottom: 45px !important;
}

#graphWrapper.demo-gap {
  margin-top: 25px !important;
}

/* ========== TABLE (CROP + DEMOGRAPHIC) ========== */
#cropTable {
  width: 100%;
  font-size: 0.85rem;
  border-collapse: collapse;
}

/* ========== CELLS ========== */
#cropTable th,
#cropTable td {
  text-align: center;
  vertical-align: middle;
  padding: 6px 8px;
  border: 1px solid var(--green-border);
}

#cropTable thead th {
  position: sticky;
  top: 0;
  z-index: 5;
  background-color: var(--green-dark) !important;
  color: #ffffff !important;
  font-weight: 700;
}

#cropTable tbody td {
  background-color: var(--green-light) !important;
}

#cropTable tbody tr:nth-child(even) td {
  background-color: var(--green-lighter) !important;
}

#cropTable tbody tr:hover td {
  background-color: #c8e6c9 !important;
}

#cropTable.table > :not(caption) > * > * {
  background-color: inherit !important;
}

/* ========== GRAPH ========== */
#graphWrapper {
  flex: 0 0 auto;
  width: 100%;
  height: 440px;
  margin-top: 16px;
  padding-bottom: 16px;
}

#cropChart,
#demographicChart {
  width: 100% !important;
  height: 100% !important;
}

/* ========== CROP TABLE ========== */
#cropTable thead,
#cropTable thead tr,
#cropTable thead th {
  background-color: var(--green-dark) !important;
  color: #ffffff !important;
}

#cropTable {
  --bs-table-bg: transparent !important;
  --bs-table-color: inherit !important;
}

#cropTable thead {
  --bs-table-bg: var(--green-dark) !important;
  --bs-table-color: #ffffff !important;
}

#cropTable thead th {
  color: #ffffff !important;
  background-image: none !important;
}

/* ========== RESPONSIVE MEDIA QUERIES==========  */
@media (max-width: 992px) {
  .dashboard-container {
    flex-direction: column;
    height: auto;
  }

  #map {
    height: 60vh;
  }

  #tableWrapper {
    max-height: 50vh;
  }
}

@media (max-width: 768px) {
  #tableWrapper {
    max-height: 55vh;
  }

  #cropTable {
    font-size: 0.78rem;
  }

  #graphWrapper {
    height: 300px;
  }
}

@media (max-width: 480px) {
  #graphWrapper {
    height: 260px;
  }
}

/* ========== FOREST FIRE TABLE + GRAPH LAYOUT ========== */

.forest-fire-panel {
  margin-top: 1px;
}

.dataPanal-row {
  display: flex;
  gap: 12px;
}

.table-box {
  width: 70%;
  height: 60vh;
  margin-top: 0.6rem;
  background: #fff;
  border: none;
  padding: 0;
  border-radius: 0;
  border: none;
  box-shadow: none;
  overflow: auto;
  scrollbar-width: thin;
}

.chart-box {
  width: 30%;
  height: 60vh;
  margin-top: 0.6rem;
  padding: 8px;
  background: #fff;
  border-radius: 10px;
  border: none;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.12);
}

.forest-fire-box canvas {
  width: 100% !important;
  height: 100% !important;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.data-table th {
  background: #1b5e20;
  color: #ffffff;
  position: sticky;
  top: 0;
  z-index: 10;
  padding: 8px 10px;
  border: none;
}

.data-table td {
  padding: 8px 10px;
  border: none;
  color: #111;
}

/* ========== ZEBRA ROWS ========== */
.data-table tbody tr:nth-child(even) {
  background: #e8f5e9;
}

.data-table tbody tr:nth-child(odd) {
  background: #ffffff;
}

.data-table tr:nth-child(even) {
  background: #f6f6f6;
}

.info-panel-content,
#table-box,
#layerDataPanel,
#graphWrapper,
#layerGraphWrapper {
  max-height: none !important;
  overflow: none !important;
  transition: none !important;
}

.export-full-view .info-panel-content,
.export-full-view #table-box,
.export-full-view #layerDataPanel,
.export-full-view #graphWrapper {
  max-height: none !important;
  height: auto !important;
  overflow: none !important;
}

#downloadToast {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: #323232;
  color: #fff;
  padding: 10px 14px;
  border-radius: 6px;
  font-size: 13px;
  z-index: 9999;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  transition: 20s;
}