:root{
  --clr-dark-a0:#040404;
  --clr-dark-a10:#121212;
  --clr-dark-a20:#1e1e1e;
  --clr-dark-a30:#2a2a2a;
  --clr-dark-a40:#3e3e3e;
  --clr-dark-a50:#545454;
  --clr-dark-a60:#6a6a6a;
  --clr-dark-a70:#898989;
  --clr-light-a0:#ffffff;
  --clr-light-a10:#f9f9f9;
  --clr-light-a20:#f3f3f3;
  --clr-light-a30:#ededed;
  --clr-light-a40:#e1e1e1;
  --clr-light-a50:#d0d0d0;
  --clr-light-a60:#b8b8b8;
  --clr-light-primary-a0:#2c6ab0;
  --clr-light-primary-a10:#3c6cab;
  --clr-light-primary-a20:#496fa6;
  --clr-light-primary-a30:#5471a0;
  --clr-light-primary-a40:#5d739b;
  --clr-light-primary-a50:#657696;
  --clr-dark-primary-a0:#b0612c;
  --clr-dark-primary-a10:#9c5627;
  --clr-dark-primary-a20:#884c23;
  --clr-dark-primary-a30:#74421f;
  --clr-dark-primary-a40:#60381b;
  --clr-dark-primary-a50:#4c2e17;
  --clr-light-surface-a0:#ffffff;
  --clr-light-surface-a10:#f6f7f9;
  --clr-light-surface-a20:#edf0f3;
  --clr-light-surface-a30:#e4e8ed;
  --clr-light-surface-a40:#dbe0e6;
  --clr-light-surface-a50:#d2d8e0;
  --clr-light-surface-a60:#c9d0da;
  --clr-light-surface-a70:#c0c8d4;
  --clr-light-surface-a80:#b7c0cd;
  --clr-light-surface-a90:#aeb8c7;
  --clr-dark-surface-a0:#2c2726;
  --clr-dark-surface-a10:#2e2826;
  --clr-dark-surface-a20:#302b2a;
  --clr-dark-surface-a30:#393332;
  --clr-dark-surface-a40:#3f3938;
  --clr-dark-surface-a50:#423d3c;
  --clr-dark-surface-a60:#4d4846;
  --clr-dark-surface-a70:#524d4a;
  --clr-dark-surface-a80:#59524f;
  --clr-dark-surface-a90:#5f5855;
  --clr-success-a0:#2e7d32;
  --clr-success-a10:#3c8740;
  --clr-success-a20:#4a914e;
  --clr-warning-a0:#f9a825;
  --clr-warning-a10:#fbb040;
  --clr-warning-a20:#fdc15c;
  --clr-error-a0:#d32f2f;
  --clr-error-a10:#e54747;
  --clr-error-a20:#f06060;
}
:root,
[data-bs-theme=light]{
  --bg:var(--clr-light-surface-a20);
  --bg-offcanvas:var(--clr-light-surface-a10);
  --station-box-shadow:0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --text-color:var(--clr-dark-a30);
  --primary-btn-fg:var(--clr-light-a0);
  --secondary-btn-fg:var(--clr-dark-a40);
  --secondary-btn-fg-hover:color-mix(
    in oklch,
    var(--clr-dark-a40) 100%,
    black 8%
  );
  --secondary-btn-bg:var(--clr-light-surface-a20);
  --secondary-btn-bg-hover:color-mix(
    in oklch,
    var(--clr-light-surface-a20) 100%,
    black 8%
  );
  --tertiary-btn-bg-hover:var(--clr-light-surface-a40);
  --clr-success-bg:var(--clr-success-a0);
  --clr-error-bg:var(--clr-error-a0);
  --card-bg:var(--clr-light-a0);
  --card-title-fg:var(--clr-light-a0);
  --card-border:var(--clr-light-a40);
  --schedules-current:var(--clr-dark-a20);
  --schedules-additional:var(--clr-dark-a50);
  --fertilizer-indicator-fg:var(--clr-dark-a70);
  --fertilizer-indicator-bg:var(--clr-light-a30);
  --fertilizer-indicator-border:var(--clr-light-a30);
  --fertilizer-indicator-fg-active:var(--clr-light-primary-a0);
  --fertilizer-indicator-bg-active:var(--clr-light-surface-a30);
  --fertilizer-indicator-border-active:var(--clr-light-primary-a30);
  --clr-primary:var(--clr-light-primary-a10);
  --clr-primary-hover:var(--clr-light-primary-a30);
}
[data-bs-theme=dark]{
  --bg:var(--clr-dark-a0);
  --bg-offcanvas:var(--clr-dark-surface-a0);
  --station-box-shadow:0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.4);
  --text-color:var(--clr-light-a40);
  --primary-btn-fg:var(--clr-light-a0);
  --secondary-btn-fg:var(--clr-light-a40);
  --secondary-btn-fg-hover:color-mix(
    in oklch,
    var(--clr-light-a40) 100%,
    white 8%
  );
  --secondary-btn-bg:var(--clr-dark-surface-a30);
  --secondary-btn-bg-hover:color-mix(
    in oklch,
    var(--clr-dark-surface-a30) 100%,
    white 8%
  );
  --tertiary-btn-bg-hover:var(--clr-dark-surface-a40);
  --clr-success-bg:var(--clr-success-a0);
  --clr-error-bg:var(--clr-error-a0);
  --card-bg:var(--clr-dark-a20);
  --card-title-fg:var(--clr-light-a0);
  --card-border:var(--clr-dark-surface-a30);
  --schedules-current:var(--clr-light-a20);
  --schedules-additional:var(--clr-light-a50);
  --fertilizer-indicator-fg:var(--clr-dark-a50);
  --fertilizer-indicator-bg:var(--clr-dark-surface-a10);
  --fertilizer-indicator-border:var(--clr-dark-surface-a10);
  --fertilizer-indicator-fg-active:var(--clr-dark-primary-a0);
  --fertilizer-indicator-bg-active:var(--clr-dark-surface-a30);
  --fertilizer-indicator-border-active:var(--clr-dark-primary-a30);
  --clr-primary:var(--clr-dark-primary-a0);
  --clr-primary-hover:var(--clr-dark-primary-a40);
}

.offcanvas{
  background:#f6f7f9 !important;
  background:var(--bg-offcanvas) !important;
}

.btn{
  background:transparent !important;
  border:none !important;
  border-radius:0.74rem !important;
}

.btn,.btn:hover{
  color:#2a2a2a !important;
  color:var(--text-color) !important;
}

.btn:hover{
  background:#dbe0e6 !important;
  background:var(--tertiary-btn-bg-hover) !important;
}

.btn-primary{
  background:#3c6cab !important;
  background:var(--clr-primary) !important;
  font-weight:500 !important;
  font-size:1rem !important;
  border:none !important;
}
.btn-primary,.btn-primary:hover{
  color:#ffffff !important;
  color:var(--primary-btn-fg) !important;
}
.btn-primary:hover{
  background:#5471a0 !important;
  background:var(--clr-primary-hover) !important;
}

.dropdown-menu{
  background:#f6f7f9 !important;
  background:var(--bg-offcanvas) !important;
  border-radius:0.74rem !important;
  overflow:hidden !important;
}

.dropdown-item{
  color:#2a2a2a !important;
  color:var(--text-color) !important;
}

.dropdown-item:hover,.dropdown-item.active,
.dropdown-item:active{
  background:#dbe0e6 !important;
  background:var(--tertiary-btn-bg-hover) !important;
}

body{
  background:#edf0f3;
  background:var(--bg);
  color:#1e1e1e;
  color:var(--clr-dark-a20);
  font-family:system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size:1rem;
}
@media (min-width: 768px){
  body{
    font-size:1.125rem;
  }
}
@media (min-width: 1200px){
  body{
    font-size:1.25rem;
  }
}

small{
  font-size:0.85rem;
}

.station{
  background-color:#ffffff;
  background-color:var(--card-bg);
  border:1px solid #e1e1e1;
  border:1px solid var(--card-border);
  border-radius:1.6rem;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  box-shadow:0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
  box-shadow:var(--station-box-shadow) !important;
}
.station__media{
  position:relative;
  height:9.6rem;
  overflow:hidden;
  border-radius:1.2rem;
  margin:0.48em 0.48em 0 0.48em;
}
.station__media img{
  width:100%;
  height:100%;
  -o-object-fit:cover;
     object-fit:cover;
  display:block;
}
.station__status{
  position:absolute;
  display:flex;
  justify-content:center;
  align-items:center;
  color:#ffffff;
  color:var(--primary-btn-fg);
  top:0.75rem;
  right:0.75rem;
  background:rgba(0, 0, 0, 0.5);
  border-radius:50%;
  padding:0.6em;
  box-shadow:0 2px 8px rgba(0, 0, 0, 0.12);
  z-index:4;
  opacity:0;
  transition:background 0.2s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1), transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.station__status:hover, .station__status:focus{
  transform:scale(1.12);
  box-shadow:0 4px 16px rgba(0, 0, 0, 0.18);
}
.station__status svg{
  width:1rem;
  height:1.2em;
  display:block;
}
.station__status.manual-on, .station__status.scheduled-on, .station__status.manual-off, .station__status.sensor-off, .station__status.idle, .station__status.error{
  background:rgba(0, 0, 0, 0.45);
}
.station__header{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:0.8rem;
  z-index:2;
}
.station__title{
  font-size:1rem;
  font-weight:500;
  color:#ffffff;
  color:var(--card-title-fg);
  background:rgba(0, 0, 0, 0.5);
  border-radius:0.4rem;
  margin:0;
  padding:0.51em 0.86em 0.42em;
  align-items:center;
}
.station__body{
  display:flex;
  flex-direction:column;
}
.station__schedule{
  width:100%;
  padding:1.6rem;
}
.station__schedule-current{
  display:flex;
  color:#1e1e1e;
  color:var(--schedules-current);
  font-size:1.125rem;
  font-weight:500;
  align-items:center;
  margin-bottom:0.48rem;
}
.station__schedule-additional{
  display:flex;
  color:#545454;
  color:var(--schedules-additional);
  font-size:1rem;
  font-weight:400;
  flex-direction:column;
  gap:0.4rem;
}
.station__schedule-next, .station__schedule-previous{
  color:#545454;
  color:var(--schedules-additional);
  font-size:0.85rem;
}
.station__footer{
  display:flex;
  align-items:center;
  padding:0.8rem 0;
  margin:0 0.8rem;
  justify-content:space-between;
  border-top:1px solid #e1e1e1;
  border-top:1px solid var(--card-border);
}
.station__fertilizer-indicators{
  display:flex;
  gap:0.48rem;
  margin:0 0.52rem;
}
.station__fertilizer-indicators > span{
  display:flex;
  align-items:center;
  justify-content:center;
  width:2rem;
  height:2rem;
  border-radius:50%;
  border:1px solid #ededed;
  border:1px solid var(--fertilizer-indicator-border);
  background:#ededed;
  background:var(--fertilizer-indicator-bg);
  opacity:0.5;
  transition:border-color 0.2s, background 0.2s, opacity 0.2s;
}
.station__fertilizer-indicators > span svg{
  width:1rem;
  height:1rem;
  stroke:#898989;
  stroke:var(--fertilizer-indicator-fg);
  stroke-width:2px;
  transition:stroke 0.2s;
}
.station__fertilizer-indicators > span.is-active{
  opacity:1;
  border-width:3px;
  border-color:#5471a0;
  border-color:var(--fertilizer-indicator-border-active);
  background:#e4e8ed;
  background:var(--fertilizer-indicator-bg-active);
}
.station__fertilizer-indicators > span.is-active svg{
  stroke:#2c6ab0;
  stroke:var(--fertilizer-indicator-fg-active);
  stroke-width:3px;
}
.station__actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
}
.station__actions__settings{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  width:3rem;
  height:3rem;
  background:#edf0f3;
  background:var(--secondary-btn-bg);
  border:none;
  border-radius:0.74rem;
  margin-left:0;
  transition:background 0.3s ease, margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s, transform 0.3s;
}
.station__actions__settings svg{
  width:1.6rem;
  height:1.6rem;
  border-radius:0.74rem;
  color:#3e3e3e;
  color:var(--secondary-btn-fg);
  overflow:visible;
}
.station__actions__settings:hover{
  background:rgb(214, 217, 219);
  background:var(--secondary-btn-bg-hover);
}
.station__actions__settings:hover svg{
  color:rgb(55, 55, 55);
  color:var(--secondary-btn-fg-hover);
}
.station__start-stop-container{
  position:relative;
  width:3rem;
  min-width:3rem;
  height:3rem;
  pointer-events:auto;
  border-radius:0.74rem;
  border:none;
  opacity:1;
  transform:scale(1);
  transition:opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), width 0.3s cubic-bezier(0.4, 0, 0.2, 1), min-width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.station__start-stop-container--empty{
  pointer-events:none;
  width:0;
  min-width:0;
  height:0;
  padding:0;
  margin:0;
  opacity:0;
}
.station__start-stop-positioner{
  position:absolute;
  top:0;
  left:0;
  width:3rem;
  height:3rem;
  border:none;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transform:scale(0.9);
  transition:opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), background 0.3s ease;
}
.station__start-stop-positioner--start{
  background-color:var(--clr-success);
}
.station__start-stop-positioner--start svg{
  stroke:#ffffff;
  stroke:var(--primary-btn-fg);
}
.station__start-stop-positioner--stop{
  background-color:var(--clr-error);
}
.station__start-stop-positioner--stop svg{
  stroke:#ffffff;
  stroke:var(--primary-btn-fg);
}