html {
  height: 100%;
  width: 100%;
  font-family: Arial, sans-serif;
  background-color: #f0f2f5; /* Background for the whole page */
}

body {
  margin: 0;
  height: 100%;
  width: 100%;
  overflow: hidden; /* The body will now act as the clipping container */
}

#scale-wrapper {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  background-color: #f0f2f5; /* Ensure wrapper has a background */
}

@media (max-width: 1550px) {
  #scale-wrapper {
    transform: scale(0.85);
    transform-origin: top left;
    height: 117.6%; /* 100 / 0.85 */
    width: 117.6%;
  }
}

@media (max-width: 1400px) {
  #scale-wrapper {
    transform: scale(0.8);
    transform-origin: top left;
    height: 125%; /* 100 / 0.80 */
    width: 125%;
  }
}

@media (max-width: 1250px) {
  #scale-wrapper {
    transform: scale(0.75);
    transform-origin: top left;
    height: 133.3%; /* 100 / 0.75 */
    width: 133.3%;
  }
}

@media (max-width: 1100px) {
  #scale-wrapper {
    transform: scale(0.7);
    transform-origin: top left;
    height: 142.9%; /* 100 / 0.70 */
    width: 142.9%;
  }
}

@media (max-width: 1000px) {
  #scale-wrapper {
    transform: scale(0.65);
    transform-origin: top left;
    height: 153.8%; /* 100 / 0.65 */
    width: 153.8%;
  }
}

@media (max-width: 850px) {
  #scale-wrapper {
    transform: scale(0.6);
    transform-origin: top left;
    height: 166.7%; /* 100 / 0.60 */
    width: 166.7%;
  }
}

@media (max-width: 750px) {
  #scale-wrapper {
    transform: scale(0.55);
    transform-origin: top left;
    height: 181.8%; /* 100 / 0.55 */
    width: 181.8%;
  }
}

@media (max-width: 650px) {
  #scale-wrapper {
    transform: scale(0.5);
    transform-origin: top left;
    height: 200%; /* 100 / 0.50 */
    width: 200%;
  }
}

@media (max-width: 580px) {
  #scale-wrapper {
    transform: scale(0.45);
    transform-origin: top left;
    height: 222.2%; /* 100 / 0.45 */
    width: 222.2%;
  }
}

/* --- Header & Filters --- */
#header {
  height: 70px;
  background-color: #f8f8f8;
  color: #595959;
  border-bottom: 1px solid #000;
  display: flex;
  align-items: center;
  padding: 0 20px;
  gap: 25px;
  box-sizing: border-box;
  flex-shrink: 0;
  position: relative;
  z-index: 1002;
}

#header input[type="number"],
#header button {
  height: 38px;
  border: 1px solid #25385b;
  border-radius: 4px;
  font-size: 1em;
  padding: 6px 10px;
  box-sizing: border-box;
  background-color: #555;
}

#header ::placeholder {
  color: #f6f9fc;
}

#header button {
  cursor: pointer;
  background-color: #f6f9fc;
  border-color: #487b99;
  font-weight: bold;
  padding: 6px 15px;
}

#header button:hover {
  background-color: #dae7ef;
  transform: scale(0.95);
}

#header select {
  height: 38px;
  border-radius: 4px;
  padding: 6px 10px;
}