@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap");
.st1 {
  fill: #00b0f0;
  fill-opacity: 0.45;
  stroke: #000000;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 0.75;
}

.st2 {
  fill: none;
  fill-rule: evenodd;
  font-size: 12px;
  overflow: visible;
  stroke-linecap: square;
  stroke-miterlimit: 3;
}

body {
  margin: 0;
}

.loading {
  padding: 0 0 200px 0;
  min-width: 100%;
  position: fixed;
  z-index: 117575475471;
  height: 100%;
  background: rgba(100, 100, 100, 0.6);
}
.loading__container {
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.loading__content img {
  width: 300px;
}

.map-container {
  max-width: 960px;
  position: relative;
  width: 100%;
  margin: auto;
}

.background-img {
  border-radius: 10px;
  width: 100%;
  display: block;
}

.zone {
  position: absolute;
  /*     pointer-events: none;*/
  /* So background remains clickable */
}

.zone svg {
  width: 100%;
  height: 100%;
  pointer-events: auto;
  /* Allow SVG to capture hover/click */
}

.zone .st1 {
  stroke: black;
  stroke-width: 1;
  cursor: pointer;
  -webkit-transition: fill-opacity 0.3s;
  transition: fill-opacity 0.3s;
}

.zone_number,
.zone_watering {
  pointer-events: none;
}

.zone1 {
  width: 19%;
  top: 25.4%;
  left: 64%;
}

.zone2 {
  z-index: 3;
  top: 63%;
  left: 47.5%;
  width: 16.1%;
}

.zone3 {
  top: 56.3%;
  left: 41%;
  width: 19%;
}

.zone4 {
  z-index: 4;
  top: 34.8%;
  left: 41%;
  width: 21.3%;
}

.zone5 {
  top: 25.8%;
  left: 21.6%;
  width: 13%;
}

.zone6 {
  top: 41%;
  left: 21.5%;
  width: 17%;
}

.zone7 {
  z-index: 4;
  top: 51%;
  left: 20.8%;
  width: 18%;
}

.zone8 {
  top: 50.9%;
  left: 15.5%;
  width: 17.2%;
}

.zone9 {
  width: 18%;
  top: 61.3%;
  left: 21.1%;
}

.zone10 {
  width: 20%;
  top: 14.5%;
  left: 63.5%;
}

.zone11 {
  top: 14.5%;
  left: 51.5%;
  width: 19.8%;
}

.zone12 {
  top: 14%;
  left: 21.5%;
  width: 30%;
}

.zone13 {
  top: 11%;
  left: 7.8%;
  width: 3.8%;
}

.zone14 {
  z-index: 3;
  top: 57.5%;
  left: 67%;
  width: 15%;
}

.zone15 {
  top: 57%;
  left: 67%;
  width: 26%;
}

.zone16 {
  width: 22%;
  top: 36.8%;
  left: 61.8%;
}

.zone_number {
  position: absolute;
  z-index: 10;
  width: 20%;
  max-width: 35px;
  min-width: 30px;
  aspect-ratio: 1/1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background: white;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  -webkit-transform-origin: center center;
          transform-origin: center center;
}

.zone1 .zone_number {
  top: 30%;
  left: 60%;
}

.zone2 .zone_number {
  top: 45%;
  left: 70%;
}

.zone3 .zone_number {
  top: 24%;
  left: 24%;
}

.zone5 .zone_number {
  top: 55%;
  left: 40%;
}

.zone6 .zone_number {
  top: 44%;
  left: 44%;
}

.zone8 .zone_number {
  top: 40%;
  left: 15%;
}

.zone10 .zone_number {
  top: 45%;
  left: 60%;
}

.zone11 .zone_number {
  top: 25%;
  left: 35%;
}

.zone12 .zone_number {
  top: 35%;
  left: 15%;
}

.zone15 .zone_number {
  top: 45%;
  left: 75%;
}

@-webkit-keyframes watering_active {
  0%, 100% {
    -webkit-transform: translate(-50%, -50%) scale(1);
            transform: translate(-50%, -50%) scale(1);
  }
  50% {
    -webkit-transform: translate(-50%, -50%) scale(1.2);
            transform: translate(-50%, -50%) scale(1.2);
  }
}

@keyframes watering_active {
  0%, 100% {
    -webkit-transform: translate(-50%, -50%) scale(1);
            transform: translate(-50%, -50%) scale(1);
  }
  50% {
    -webkit-transform: translate(-50%, -50%) scale(1.2);
            transform: translate(-50%, -50%) scale(1.2);
  }
}
.wateringON .zone_number {
  font-weight: 800;
  font-size: 22px;
  background: #0066ff;
  color: white;
  -webkit-animation: watering_active 1s ease-in-out infinite;
          animation: watering_active 1s ease-in-out infinite;
  -webkit-transition: -webkit-transform 2s;
  transition: -webkit-transform 2s;
  transition: transform 2s;
  transition: transform 2s, -webkit-transform 2s;
}

.wateringON .st1 {
  stroke: white;
}

.zone_selected .st1 {
  fill: #00cc44 !important;
  stroke: #4d94ff;
  fill-opacity: 0.8 !important;
  stroke-width: 2px;
}

.watering-modes {
  display: none;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  max-width: 960px;
  background: #f0f8ff;
  padding: 24px;
  border-radius: 12px;
  -webkit-box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
          box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  font-family: "Segoe UI", sans-serif;
  line-height: 1.6;
  /* Bigger checkbox */
}
.watering-modes input,
.watering-modes select {
  min-height: 35px;
}
.watering-modes h2 {
  text-align: center;
  margin-bottom: 12px;
  font-weight: 600;
  color: #1e4e8c;
  font-size: 30px;
}
.watering-modes .mode-select {
  text-align: center;
  margin-bottom: 20px;
}
.watering-modes .mode-select label {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-right: 20px;
  font-weight: 500;
  cursor: pointer;
}
.watering-modes .mode-select label input[type=radio] {
  margin-right: 8px;
  -webkit-transform: scale(1.2);
          transform: scale(1.2);
}
.watering-modes .watering_time-selection {
  display: inline-block;
  width: 240px;
  padding: 8px 10px;
  margin: 3px 10px 3px 0;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 14px;
}
.watering-modes .watering_time-selection:focus {
  border-color: #007acc;
  outline: none;
}
.watering-modes label:has(.watering_time-selection) {
  display: inline-block;
  font-weight: 500;
  margin-bottom: 10px;
  color: #333;
}
.watering-modes .zone-selection {
  margin-bottom: 20px;
  background: #f9fcff;
  border: 1px solid #d0e7f9;
  border-radius: 12px;
  padding: 20px;
  -webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
          box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}
.watering-modes .zone-selection p {
  font-weight: 600;
  margin-bottom: 15px;
  font-size: 16px;
  color: #333;
}
.watering-modes .zone-selection .zone-checkboxes {
  margin: 10px 0 0 0;
  display: -ms-grid;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 2fr));
  gap: 10px;
}
.watering-modes .zone-selection label {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 8px;
  background: #e6f7ff;
  border: 1px solid #b5e0f7;
  border-radius: 10px;
  padding: 10px;
  font-weight: 500;
  cursor: pointer;
  -webkit-transition: all 0.25s ease;
  transition: all 0.25s ease;
}
.watering-modes .zone-selection label:hover {
  background: #d0ecff;
  -webkit-transform: translateY(-2px);
          transform: translateY(-2px);
}
.watering-modes .zone-selection input[type=checkbox] {
  width: 18px;
  height: 18px;
  accent-color: #007acc;
  /* modern browsers */
}
.watering-modes .input_times {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.watering-modes .input_times input {
  width: 100px;
}
.watering-modes .manual-controls {
  margin-top: 20px;
}

.wateringBtn {
  -ms-flex-line-pack: center;
      align-content: center;
  padding: 10px 24px;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  -webkit-transition: background 0.2s ease;
  transition: background 0.2s ease;
}

#waterSubmitBtn {
  margin: 10px 0 0 0;
  background-color: #00b050;
}

#turnOffBtn {
  margin: 10px 0 0 0;
  background-color: #f0f0f0;
}

.manual-controls {
  margin-top: 20px;
}
.manual-controls h3 {
  font-size: 25px;
  text-align: center;
  margin-bottom: 12px;
  font-weight: 600;
  color: #1e4e8c;
}
.manual-controls .zone-manual-settings {
  display: -ms-grid;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin-top: 20px;
}
.manual-controls .zone-manual-block {
  width: 260px;
  background: linear-gradient(145deg, #e8f5e9, #ffffff);
  border: 1px solid #c8e6c9;
  padding: 16px 18px;
  margin: 12px;
  border-radius: 14px;
  -webkit-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  -webkit-transition: -webkit-transform 0.2s ease, -webkit-box-shadow 0.2s ease;
  transition: -webkit-transform 0.2s ease, -webkit-box-shadow 0.2s ease;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  transition: transform 0.2s ease, box-shadow 0.2s ease, -webkit-transform 0.2s ease, -webkit-box-shadow 0.2s ease;
}
.manual-controls .zone-manual-block h4 {
  margin: 0 0 10px;
  font-size: 16px;
  color: #2e7d32;
  /* dark green for headers */
}
.manual-controls .zone-manual-block label {
  display: block;
  font-weight: 500;
  font-size: 14px;
  margin-bottom: 10px;
  color: #333;
}
.manual-controls .zone-manual-block input,
.manual-controls .zone-manual-block select {
  width: 100%;
  padding: 6px 8px;
  margin-top: 4px;
  border: 1px solid #bdbdbd;
  border-radius: 6px;
  font-size: 14px;
  -webkit-transition: border-color 0.2s ease, -webkit-box-shadow 0.2s ease;
  transition: border-color 0.2s ease, -webkit-box-shadow 0.2s ease;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, -webkit-box-shadow 0.2s ease;
}
.manual-controls .zone-manual-block select {
  height: auto;
  background: #fff;
}
.manual-controls .manual-controls .zone-manual-block:hover {
  -webkit-transform: translateY(-4px);
          transform: translateY(-4px);
  -webkit-box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
          box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}
.manual-controls .manual-controls .zone-manual-block input:focus,
.manual-controls .manual-controls .zone-manual-block select:focus {
  border-color: #66bb6a;
  /* soft green focus */
  -webkit-box-shadow: 0 0 5px rgba(102, 187, 106, 0.4);
          box-shadow: 0 0 5px rgba(102, 187, 106, 0.4);
  outline: none;
}
.manual-controls #waterSubmitBtn {
  margin-top: 24px;
  padding: 10px 24px;
  background-color: #00b050;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  -webkit-transition: background 0.2s ease;
  transition: background 0.2s ease;
}
.manual-controls #waterSubmitBtn:hover {
  background-color: #009245;
}
.manual-controls #waterSubmitBtn:active {
  background-color: #007c36;
}

.days-checkboxes {
  margin: 6px 0 12px;
}

.days-checkboxes > span {
  display: block;
  font-weight: 600;
  margin-bottom: 8px;
  font-size: 16px;
}

.days-block {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (1fr)[7];
  grid-template-columns: repeat(7, 1fr);
  border: 2px solid #4a90e2;
  border-radius: 8px;
  overflow: hidden;
}

.day-cell {
  margin-bottom: 0 !important;
  text-align: center;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 12px 0;
  cursor: pointer;
  font-size: 15px;
  background: #fff;
  -webkit-transition: all 0.25s ease;
  transition: all 0.25s ease;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

.day-cell:not(:last-child) {
  border-right: 1px solid #4a90e2;
}

.day-cell input {
  display: none;
}

.day-cell span {
  pointer-events: none;
  color: #4a90e2;
  font-weight: 500;
}

.day-cell:hover {
  background: #e8f3ff;
}

.day-cell input:checked + span {
  background: #4a90e2;
  color: #fff;
  border-radius: 4px;
  padding: 4px 5px;
}

.manual-controls-container {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.watering-status .status-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 280px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin: auto;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin-bottom: 8px;
}
.watering-status .status-item .label {
  font-size: 18px;
  font-weight: 600;
}
.watering-status .status-item .value {
  font-size: 18px;
  font-weight: 700;
  color: #555;
  max-width: 150px;
  word-wrap: break-word;
  text-align: center;
}

.watering-status::after {
  content: "";
  width: 100%;
  height: 1px;
  display: block;
  background: black;
}

.status-item span.value {
  display: block;
  line-height: 1.4;
  font-family: "Segoe UI", sans-serif;
}

.status-item span.zone-block {
  display: block;
  margin-bottom: 8px;
}

.zone-block .zone-number {
  font-weight: bold;
  color: #1a237e;
}

.zone-block .zone-icon {
  margin: 0 4px;
}

.zone-block .zone-time {
  font-family: monospace;
  color: #004d40;
}

.zone-block .zone-days {
  font-style: italic;
  color: #555;
  font-size: 0.9em;
  margin-left: 4px;
}

.zone-cards {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin-top: 8px;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}

.zone-card {
  margin: 5px;
  background-color: #fff;
  border: 2px solid #90caf9;
  border-radius: 12px;
  padding: 8px 10px;
  -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
          box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  font-family: "Segoe UI", sans-serif;
  max-width: 115px;
}

.zone-title {
  font-weight: bold;
  font-size: 18px;
  color: #0d47a1;
  margin-bottom: 6px;
}

.zone-line {
  font-size: 14px;
  margin: 2px 0;
  color: #333;
}

.zone-time {
  color: #00695c;
  font-family: monospace;
}

.zone-days {
  font-style: italic;
  color: #616161;
}

.label {
  font-size: 18px;
  font-weight: 600;
  margin-right: 6px;
  color: #1e4e8c;
}

/* Для карток зон manual режиму залишаємо як є */
.zone-cards {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin-top: 8px;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}

.zone-card {
  margin: 5px;
  background-color: #fff;
  border: 2px solid #90caf9;
  border-radius: 12px;
  padding: 10px 14px;
  -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
          box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  font-family: "Segoe UI", sans-serif;
  max-width: 115px;
}

.watering_settings {
  margin: 20px;
  background: #f0f8ff;
  border: 2px solid #5a9bd4;
  border-radius: 8px;
  padding: 15px;
  max-width: 320px;
  width: 100%;
  margin: 0 30px;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  color: #333;
}
.watering_settings h2 {
  font-size: 30px;
  text-align: center;
  margin-bottom: 12px;
  font-weight: 600;
  color: #1e4e8c;
}
.watering_settings h3 {
  font-size: 20px;
  text-align: center;
  margin-bottom: 12px;
  font-weight: 600;
  color: #1e4e8c;
}
.watering_settings .watering_settings-title::after {
  margin: 10px 0 0 0;
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  background: black;
}

.watering_settings-title {
  text-align: center;
}

.water_settings-btn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  border-radius: 10px;
  width: 200px;
  height: 50px;
  background: blue;
}

.btnWatering {
  text-align: center;
  padding: 10px 24px;
  background-color: #00b050;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  -webkit-transition: background 0.2s ease;
  transition: background 0.2s ease;
}
.btnWatering:hover {
  background-color: #009245;
}
.btnWatering:active {
  background-color: #007c36;
}

.main__container {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  max-width: 960px;
}

.date_container {
  z-index: 1000;
  width: clamp(120px, 23vw, 160px);
  font-size: clamp(9.5px, 2vw, 15px);
  top: 2%;
  right: 2%;
  position: absolute;
  border: 1px solid gray;
  font-family: "Roboto";
  border-radius: 10px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 10px;
  background: rgba(200, 200, 200, 0.7);
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.date-status {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 1px solid black;
}

.date_container.offline .date-status {
  background: red;
}

.date_container.online .date-status {
  background: green;
}

.control_block {
  margin: 10px 0 0 0;
  width: 100%;
  text-align: center;
  font-family: "Roboto", sans-serif;
}

.control_container {
  margin-bottom: 10px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 10px;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.control_container-btns .control_btn {
  width: 80px;
}
.control_container-btns .control_btn svg {
  width: 40px;
  height: 40px;
  margin-bottom: 4px;
}

.control_btn {
  padding: 8px;
  border-radius: 10px;
  background: #f0f0f0;
  -webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
          box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

.control_btn span {
  font-size: 13px;
  color: #333;
}

.control_btn:hover {
  background-color: #e8e8e8;
  -webkit-transform: scale(1.03);
          transform: scale(1.03);
}

.control_btn.pressed {
  -webkit-transform: scale(0.95);
          transform: scale(0.95);
  -webkit-box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.3);
          box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.3);
  background-color: #dcdcdc; /* темніший відтінок фону */
  -webkit-transition: all 0.1s ease-in;
  transition: all 0.1s ease-in;
}

.control_btn.pressed svg rect,
.control_btn.pressed svg polygon {
  opacity: 0.85;
}

/* Button below controls */
.btnWatering {
  display: inline-block;
  color: white;
  padding: 10px 16px;
  font-size: 14px;
  border-radius: 6px;
  cursor: pointer;
  -webkit-transition: background 0.2s ease;
  transition: background 0.2s ease;
  -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
          box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.btnWatering:hover {
  background: #218838;
}

@media (max-width: 600px) {
  main {
    margin: 0 10px !important;
  }
  .zone7 .zone_number {
    top: 40%;
  }
  .watering_settings {
    margin-bottom: 100px;
    margin-left: 0;
    margin-right: 0;
  }
  .watering-status {
    margin: 0;
  }
  .watering-status .status-item {
    width: 280px;
  }
  .date_container {
    border-radius: 7px;
    padding: 7px 10px;
  }
  .watering-modes {
    padding: 15px;
  }
  .manual-controls-container {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
}
.status-grid {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 16px 1fr;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  padding: 12px;
}

.status-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background: #f9fbff;
  border: 1px solid #dbe2ef;
  border-radius: 12px;
  padding: 10px;
  -webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
          box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.status-item i {
  font-size: 22px;
  color: #1e4e8c;
  margin-right: 10px;
}

.status-item .label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: #444;
}

.status-item .value {
  display: block;
  font-size: 16px;
  font-weight: 700;
  color: #222;
}

.setting-mode {
  width: 100%;
  max-width: 100%;
  padding: 0;
}

.add-zone-btn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  text-align: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background: linear-gradient(145deg, #4facfe, #00f2fe);
  color: #fff;
  border: none;
  width: 100px;
  height: 120px;
  border-radius: 12px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 600;
  -webkit-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12);
          box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12);
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.add-zone-btn:hover {
  -webkit-transform: translateY(-3px);
          transform: translateY(-3px);
  background: linear-gradient(145deg, #00c6fb, #005bea);
  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.18);
          box-shadow: 0 6px 12px rgba(0, 0, 0, 0.18);
}

.add-zone-btn:active {
  -webkit-transform: translateY(0);
          transform: translateY(0);
  -webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
          box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

#zone_select label {
  font-weight: 600;
  margin-right: 10px;
  color: #1e4e8c;
}

#zone_select {
  width: 100%;
  padding: 8px 12px;
  font-size: 14px;
  border-radius: 6px;
  cursor: pointer;
  -webkit-transition: border 0.3s, -webkit-box-shadow 0.3s;
  transition: border 0.3s, -webkit-box-shadow 0.3s;
  transition: border 0.3s, box-shadow 0.3s;
  transition: border 0.3s, box-shadow 0.3s, -webkit-box-shadow 0.3s;
}

#zone_select:hover {
  border-color: #1e90ff;
  -webkit-box-shadow: 0 0 6px rgba(30, 144, 255, 0.3);
          box-shadow: 0 0 6px rgba(30, 144, 255, 0.3);
}

input[type=time] {
  border: 1px solid #bbb;
  background-color: #fff;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  /* VERY IMPORTANT: keep default style on iOS */
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
}

.zone-manual-block.emptyCard {
  border: 2px solid #ff4d4d; /* bright red border */
  -webkit-box-shadow: 0 4px 12px rgba(255, 0, 0, 0.3);
          box-shadow: 0 4px 12px rgba(255, 0, 0, 0.3);
  border-radius: 10px;
  -webkit-transition: -webkit-box-shadow 0.2s ease, -webkit-transform 0.2s ease;
  transition: -webkit-box-shadow 0.2s ease, -webkit-transform 0.2s ease;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
  transition: box-shadow 0.2s ease, transform 0.2s ease, -webkit-box-shadow 0.2s ease, -webkit-transform 0.2s ease;
}

.status-item.status-cards {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: start;
}

.data-container {
  position: absolute;
  top: 1%;
  left: 1%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  font-size: 18px;
  gap: 6px;
  max-width: 100px;
  z-index: 100;
}

/* Shared block styling */
.pressure_container,
.flow_container, .waterQuantity_container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  gap: 6px;
  padding: 6px 8px;
  border-radius: 12px;
  background: rgba(240, 240, 240, 0.9);
  -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
          box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  min-width: 80px;
}

/* Icon styles */
.pressure-icon svg,
.flow-icon svg, .waterQuantity-icon svg {
  width: 20px;
  height: 20px;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

/* Text styles */
.pressure-text,
.flow-text, .waterQuantity-text {
  font-weight: 600;
  font-size: 0.9em;
  line-height: 1;
  color: #333;
  text-align: center;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
}

/* Different background tints for clarity */
.pressure_container {
  background: rgba(255, 200, 150, 0.85);
}

.flow_container {
  background: rgba(150, 255, 200, 0.85);
}

.waterQuantity_container {
  background: rgba(150, 200, 255, 0.85);
}

/* On very small screens */
@media (max-width: 600px) {
  .data-container {
    max-width: 80px;
    gap: 6px;
  }
  .pressure_container,
  .flow_container {
    min-width: unset;
    padding: 4px 6px;
  }
  .pressure-icon svg,
  .flow-icon svg {
    width: 18px;
    height: 18px;
  }
  .pressure-text,
  .flow-text {
    font-size: 0.8em;
  }
}
.info-row {
  width: 320px;
}

.info-row_container {
  -ms-flex-pack: distribute;
      justify-content: space-around;
  font-family: "Segoe UI", sans-serif;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.info-row_block {
  cursor: pointer;
  border-radius: 10px;
  margin: 4px;
  padding: 4px;
  background: #f0f0f0;
  text-align: center;
}

.current-status {
  font-family: "Segoe UI", sans-serif;
  padding: 10px;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  background: #f3f3f3;
  border-radius: 8px;
}
.current-status_title {
  font-weight: 600;
  font-size: 16px;
  color: #333;
}
.current-status_block {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 12px;
}
.current-status_item {
  display: none;
  font-size: 14px;
  color: #333;
}
.current-status_item .status-icon {
  margin-right: 5px;
  font-size: 18px;
}
.current-status_item .status-zone {
  margin-left: 8px;
  font-weight: 500;
  border-radius: 6px;
  padding: 6px;
  background: #007acc;
  color: white;
}
.current-status_timer {
  position: relative;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  font-weight: bold;
  font-size: 12px;
  background: white;
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
          box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
}
.current-status_timer svg {
  position: absolute;
  top: 0;
  left: 0;
  -webkit-transform: rotate(-90deg);
          transform: rotate(-90deg);
}
.current-status_timer circle {
  fill: none;
  stroke-width: 3;
}
.current-status_timer .bg {
  stroke: #ccc;
}
.current-status_timer .progress {
  stroke: #007acc;
  stroke-linecap: round;
  -webkit-transition: stroke-dashoffset 0.3s linear;
  transition: stroke-dashoffset 0.3s linear;
}
.current-status_timer span {
  position: relative;
  z-index: 2;
}

.notice-block {
  background-color: #f0f8ff;
  border: 1px solid #b0c4de;
  border-radius: 5px;
  padding: 20px;
  text-align: center;
  font-family: Arial, sans-serif;
  color: #333;
}

.notice-block .notice-title {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 10px;
}

.current-status_img {
  width: 30px;
}

/* Overlay */
#login-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(2px);
  z-index: 999;
}

/* Popup */
#login-popup {
  background: #fff;
  width: 300px;
  padding: 20px 25px;
  border-radius: 12px;
  -webkit-box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
          box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
  position: relative;
  margin: auto;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  -webkit-animation: popupFade 0.3s ease;
          animation: popupFade 0.3s ease;
}

/* Close button */
#login-popup .close-btn {
  position: absolute;
  right: 12px;
  top: 10px;
  font-size: 18px;
  cursor: pointer;
  color: #666;
}

#login-popup .close-btn:hover {
  color: #000;
}

/* Inputs */
#login-popup input {
  width: 100%;
  padding: 10px;
  margin: 8px 0;
  border-radius: 6px;
  border: 1px solid #ccc;
  font-size: 14px;
}

/* Button */
#login-popup button {
  width: 100%;
  padding: 10px;
  border: none;
  background: #3498db;
  color: white;
  font-size: 15px;
  border-radius: 6px;
  cursor: pointer;
}

#login-popup button:hover {
  background: #2980b9;
}

#login-message {
  color: red;
  font-size: 13px;
  margin-top: 5px;
}

@-webkit-keyframes popupFade {
  from {
    opacity: 0;
    -webkit-transform: translateY(-55%);
            transform: translateY(-55%);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
  }
}

@keyframes popupFade {
  from {
    opacity: 0;
    -webkit-transform: translateY(-55%);
            transform: translateY(-55%);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
  }
}
.control_block {
  position: relative;
}

.control_block-popup {
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(200, 200, 200, 0.8);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  z-index: 200;
}

.control_block-popup-content {
  width: 100%;
  height: 100%;
  padding: 50px 30px;
  border-radius: 10px;
  text-align: center;
  position: relative;
  -webkit-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.control_block-popup-text {
  font-size: 18px;
  margin-bottom: 15px;
}

.control_block-popup-img img {
  width: 40px;
}

.control_block-popup-btn {
  display: inline-block;
  border-radius: 6px;
  text-align: center;
  padding: 10px 15px;
  width: 90px;
  margin: 10px auto 0;
  background: linear-gradient(135deg, #007bff, #0056b3);
  color: #fff;
  font-weight: 500;
  font-size: 14px;
  cursor: pointer;
  border: none;
  -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
          box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

.control_block-popup-btn:hover {
  background: linear-gradient(135deg, #0056b3, #004099);
  -webkit-transform: translateY(-2px);
          transform: translateY(-2px);
  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
          box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}

.control_block-popup-btn:active {
  -webkit-transform: translateY(0);
          transform: translateY(0);
  -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
          box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
}

#graph_chart {
  touch-action: none;
  -ms-touch-action: none;
}

/* Universal Popup overlay */
.popup {
  display: none; /* hidden by default */
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5); /* semi-transparent background */
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  z-index: 9999;
  backdrop-filter: blur(4px);
}

/* Container inside popup */
.popup__container {
  position: relative;
  width: 500px;
  max-width: 90%;
  background: #fff;
  border-radius: 12px;
  padding: 20px;
  -webkit-box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
          box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  -webkit-animation: popupFade 0.3s ease-out;
          animation: popupFade 0.3s ease-out;
  overflow-y: auto;
  max-height: 90vh;
}

/* Popup fade-in animation */
@keyframes popupFade {
  from {
    -webkit-transform: scale(0.9);
            transform: scale(0.9);
    opacity: 0;
  }
  to {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
  }
}
/* Close button */
.popup__close {
  position: absolute;
  top: 12px;
  right: 12px;
  cursor: pointer;
  font-size: 24px;
  font-weight: bold;
  color: #555;
  -webkit-transition: color 0.2s;
  transition: color 0.2s;
}

.popup__close:hover {
  color: #e74c3c;
}

/* All blocks hidden by default */
.popup__block {
  display: none;
}

/* Popup title */
.popup__title {
  display: block;
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 16px;
  text-align: center;
  color: #2c3e50;
}

/* Schedule Error block */
.scheduleError-compare {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  border: 1px solid #ddd;
  padding: 20px;
  border-radius: 8px;
  background: #f9f9f9;
  margin: 10px 0;
}

.scheduleError-compare_block {
  display: none; /* hidden initially */
  background: #fff;
  border: 1px solid #eee;
  padding: 12px 15px;
  border-radius: 8px;
  min-width: 120px;
  text-align: center;
  -webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
          box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.scheduleError-compare_block div {
  font-size: 14px;
  margin: 4px 0;
}

.scheduleError-compare_block span {
  font-weight: bold;
  margin-left: 5px;
}

.scheduleError-compare_solve {
  margin-top: 10px;
  border-radius: 8px;
  background: linear-gradient(135deg, #4cafef, #2196f3);
  color: white;
  padding: 10px;
  width: 100%;
  text-align: center;
  font-weight: 600;
  cursor: pointer;
  -webkit-transition: background 0.3s ease;
  transition: background 0.3s ease;
}

.scheduleError-compare_solve:hover {
  background: linear-gradient(135deg, #2196f3, #1976d2);
}

.scheduleError-compare_title {
  width: 100%;
  text-align: center;
  font-weight: 600;
  padding: 0 10px 10px 10px;
}

/* Graph Block */
.graph_chart-container {
  display: none;
  margin-top: 20px;
}

.graph_chart-title {
  margin-bottom: 12px;
  font-weight: 600;
  font-size: 16px;
  text-align: center;
  color: #333;
}

#graph_wrapper {
  width: 100%;
  overflow: hidden;
}

#graph_chart {
  width: 100%;
  height: 300px;
  border: 1px solid #ddd;
  border-radius: 10px;
  background-color: #fafafa;
  padding: 10px;
}

/* Form elements inside Graph block */
.popup__block label {
  display: block;
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 16px;
  text-align: center;
  color: #2c3e50;
}

.popup__block select,
.popup__block input[type=date] {
  margin: auto;
  display: block;
  width: 150px;
  padding: 10px 12px;
  font-size: 15px;
  border: 1px solid #ccc;
  border-radius: 8px;
  outline: none;
  -webkit-transition: border-color 0.2s ease;
  transition: border-color 0.2s ease;
  background-color: #f9f9f9;
}

.popup__block select:focus,
.popup__block input[type=date]:focus {
  border-color: #1a73e8;
  background-color: #fff;
}

#confirmGraphBtn {
  margin: auto;
  display: block;
  margin-top: 28px;
  width: 200px;
  background-color: #1a73e8;
  color: white;
  border: none;
  padding: 12px;
  font-size: 16px;
  border-radius: 8px;
  cursor: pointer;
  -webkit-transition: background-color 0.2s;
  transition: background-color 0.2s;
}

#confirmGraphBtn:hover {
  background-color: #155fc2;
}

.recordsBlock {
  font-family: "Segoe UI", sans-serif;
  width: 100%;
  height: auto;
  min-height: 300px;
  max-height: 500px;
}

.record_row {
  display: none;
  background: #f0f0f0; /* light gray */
  border-radius: 10px;
  margin: 10px 0;
  -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
          box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  font-family: "Arial", sans-serif;
  font-size: 14px;
  color: #333;
}

.record_zone {
  position: relative;
  padding: 20px;
  background: #d0d0d0; /* slightly darker gray */
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 80px;
  font-weight: bold;
  border-right: 1px solid #ccc;
}

.record_zone::before {
  content: "";
  top: 0;
  left: 0;
  position: absolute; /* required for pseudo-element to appear */
  min-width: 100%; /* full width of parent */
  height: 5px; /* thickness of the line */
  display: block; /* make it a block so width/height apply */
  background-color: var(--zone-color, #000); /* fallback black */
}

.record_details {
  padding: 10px 20px;
  background: #fff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap; /* wrap if screen too small */
  gap: 15px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1; /* take remaining space */
}

.record_item {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.record_item .value {
  font-weight: bold;
  color: #007BFF; /* blue for values */
}

/* optional: responsive for smaller screens */
@media (max-width: 600px) {
  .record_zone {
    width: 100%;
  }
  .record_row {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .record_details {
    gap: 8px;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
  }
  .row-btn {
    font-size: 12px;
    padding: 6px 8px;
  }
}
.date_btns-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin: 15px auto;
}

.date_btns-row-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 8px;
  background: #f7f7f7;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 4px;
}

.row-btn {
  font-family: "Segoe UI", sans-serif;
  font-size: 14px;
  padding: 6px 14px;
  border-radius: 6px;
  cursor: pointer;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  -ms-flex-line-pack: center;
      align-content: center;
  text-align: center;
}

.row-btn-active {
  background: #4a90e2;
  color: white;
  font-weight: 600;
  cursor: default;
}

.recordsBlock .date-range-block {
  display: none;
  max-width: 420px;
  margin: 30px auto;
  padding: 20px;
  border-radius: 14px;
  background: #ffffff;
  -webkit-box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
          box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
  font-family: "Segoe UI", sans-serif;
  -webkit-transition: -webkit-transform 0.2s ease, -webkit-box-shadow 0.2s ease;
  transition: -webkit-transform 0.2s ease, -webkit-box-shadow 0.2s ease;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  transition: transform 0.2s ease, box-shadow 0.2s ease, -webkit-transform 0.2s ease, -webkit-box-shadow 0.2s ease;
}

.recordsBlock .date-range-block:hover {
  -webkit-transform: translateY(-2px);
          transform: translateY(-2px);
  -webkit-box-shadow: 0 12px 25px rgba(0, 0, 0, 0.12);
          box-shadow: 0 12px 25px rgba(0, 0, 0, 0.12);
}

.graphBlock .date-range-block {
  display: none;
  margin: 20px auto;
}

.date-range-title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 16px;
  text-align: center;
  color: #2c3e50;
}

.date-range-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 14px;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
}

.date-input {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  font-size: 14px;
  color: #555;
}

.date-input label {
  margin-bottom: 6px;
  font-weight: 500;
}

.date-input input {
  padding: 8px 10px;
  border: 1px solid #d0d0d0;
  border-radius: 8px;
  font-size: 14px;
  -webkit-transition: border 0.2s ease, -webkit-box-shadow 0.2s ease;
  transition: border 0.2s ease, -webkit-box-shadow 0.2s ease;
  transition: border 0.2s ease, box-shadow 0.2s ease;
  transition: border 0.2s ease, box-shadow 0.2s ease, -webkit-box-shadow 0.2s ease;
}

.date-input input:focus {
  outline: none;
  border-color: #4a90e2;
  -webkit-box-shadow: 0 0 4px rgba(74, 144, 226, 0.5);
          box-shadow: 0 0 4px rgba(74, 144, 226, 0.5);
}

.applyDateRange {
  background: #4a90e2;
  color: white;
  border: none;
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  -webkit-transition: background 0.2s ease, -webkit-transform 0.1s ease;
  transition: background 0.2s ease, -webkit-transform 0.1s ease;
  transition: background 0.2s ease, transform 0.1s ease;
  transition: background 0.2s ease, transform 0.1s ease, -webkit-transform 0.1s ease;
  -ms-flex-item-align: center;
      -ms-grid-row-align: center;
      align-self: center;
}

.applyDateRange:active {
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

/* show date-range-block if .row-btn-select has .row-btn-active insidedaterent */
.date_btns-row:has(.row-btn-select.row-btn-active) ~ .date-range-block {
  display: block;
}

.hideRange {
  display: none !important;
}

.popup_statistics-totalWater {
  position: relative;
  z-index: 20;
  text-align: center;
  font-size: 15px;
  font-weight: 500;
  color: #333; /* нейтральний темний */
  margin: -20px 0 12px 0;
  padding: 6px 12px;
}

.popup_statistics-totalWater span {
  padding: 0 0 0 10px;
  font-weight: 700;
  font-size: 18px;
  color: #1976d2; /* синій акцент */
}

.popup_records-sortBy-container {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  margin: 10px 0;
  border-bottom: 2px solid #e0e0e0; /* нижня лінія */
  padding-bottom: 6px;
}

.popup_records-sortBy-item {
  position: relative;
  padding: 6px 12px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  color: #555;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}

.popup_records-sortBy-item.selected {
  color: #1976d2; /* активний синій */
  font-weight: 600;
}

.popup_records-sortBy-item.selected::after {
  content: "▾"; /* стрілочка вниз */
  position: absolute;
  right: -5px;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  font-size: 15px;
  color: #1976d2;
}

.popup_records-sortBy-item.selected.desc::after {
  content: "▴"; /* arrow up when descending */
}

.map-popUp {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 100;
  background: rgba(0, 0, 0, 0.5);
  color: rgb(100, 100, 100);
  text-align: center;
  display: none;
}

.map-popUp-container {
  border-radius: 10px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  z-index: 999;
  width: 200px;
  height: 100px;
  background: lightgray;
}

.popup-close {
  position: absolute;
  right: 5px;
  font-size: 30px;
}

.map-popUp-content {
  padding: 5px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 100%;
  height: 100%;
}

.map-popup-block {
  display: none;
}