/* --- PiCO SPRINKLER THEME --- */
:root {
    /* 1. TEAL (Water/Action) - Kept from before */
    --pico-teal: #20c997; 
    --pico-teal-dark: #1aa179;
    
    /* 2. DARK GREEN (Structure/Headers) - From the Leaf */
    --pico-green-dark: #1e453e; 
    
    /* 3. LIGHT GREY (Background/Contrast) */
    --pico-bg-light: #004f34; /*#f4f6f8;*/
    --pico-text-light: #e9ecef; /* Soft white for text on dark backgrounds */
}

/* Body Background (Makes white cards pop) */
body {
    background-color: var(--pico-bg-light) !important;
}

/* Structural Elements -> Dark Green */
.navbar, 
.offcanvas, 
.modal-header,
.list-group-item.bg-dark { /* Targetting the menu items */
    background-color: var(--pico-green-dark) !important;
    color: var(--pico-text-light) !important;
    border-color: rgba(255,255,255,0.1) !important; /* Subtle separator */
}

/* Fix Text Colors on Dark Backgrounds */
.navbar-brand, 
.nav-link, 
.offcanvas-title, 
.modal-title,
.list-group-item.bg-dark {
    color: var(--pico-text-light) !important;
}

/* Fix the Close "X" Button (Invert it to white) */
.btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* Override Bootstrap's 'Primary' Buttons (Save, Submit, etc.) */
.btn-primary {
    background-color: var(--pico-teal) !important;
    border-color: var(--pico-teal) !important;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
    background-color: var(--pico-teal-dark) !important;
    border-color: var(--pico-teal-dark) !important;
}

/* Override Outline Buttons */
.btn-outline-primary {
    color: var(--pico-teal) !important;
    border-color: var(--pico-teal) !important;
}
.btn-outline-primary:hover {
    background-color: var(--pico-teal) !important;
    color: #fff !important;
}

/* Override 'text-primary' (Used for Water Icons 🚿) */
.text-primary {
    color: var(--pico-teal) !important;
}

/* Override 'bg-primary' (Used for Time Badges) */
.badge.bg-primary {
    background-color: var(--pico-teal) !important;
}

/* Override Default Toggle Switches (When active but NOT running) */
/* Note: Your custom .toggle-running (Red) and .toggle-scheduled (Green) 
   will still take precedence because they are more specific classes. */
.form-check-input:checked {
    background-color: var(--pico-teal);
    border-color: var(--pico-teal);
}

/*
    Usable classes
*/

.hidden {
    display: none!important
}
.pointer {
    cursor: pointer;
}
.squeeze {
    letter-spacing: -0.3px;
}
.full-width {
    width: 100% !important
}
.smaller {
    margin:0;
    font-size:smaller
}
.larger {
    font-size:larger
}
.center {
    text-align:center!important
}
.center-div {
    margin: 5px auto
}
.right {
    text-align: right;
}
.left {
    text-align: left;
}
.nobr {
    white-space:nowrap
}
.inline {
    display: inline-block;
}
.wrap {
    white-space:inherit!important
}
.btn-no-border {
    border:none;
    background:none!important;
    height:25px
}
.content-divider {
    border: 0;
    height: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    width: 55%;
}
.mini-load {
    -o-transform: scale(0.5);
    -ms-transform: scale(0.5);
    -moz-transform: scale(0.5);
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
    height:2.875em;
    width:2.875em;
    margin:0 auto!important;
    opacity:.18
}
.mini-load.bottom {
    -o-transform-origin: center bottom;
    -moz-transform-origin: center bottom;
    -ms-transform-origin: center bottom;
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
    margin:-1.438em auto!important;
}
.rain-desc {
    word-wrap:normal;
    white-space:normal!important;
    overflow:visible!important;
    text-align:center
}
.red-text {
    color: #C96161;
}
.red {
    background:#C96161!important;
    color:#FFF!important;
    font-weight:400;
    text-shadow:none!important
}
.red-text {
    color: #C96161!important;
}
.transparent {
    background:transparent;
}
.green {
    background:#16a085!important;
    color:#FFF!important;
    font-weight:400;
    text-shadow:none!important
}
.green-text {
    color: #16a085!important;
}
.yellow {
    background:#FFC82C!important;
    color:#444!important;
    font-weight:400;
    text-shadow:none!important
}
.full-width-slider input {
    display: none;
}
.blur-filter {
    -webkit-filter: blur(2px);
    -moz-filter: blur(2px);
    -o-filter: blur(2px);
    -ms-filter: blur(2px);
    filter: blur(2px);
}
.spin {
    -webkit-animation-name: spin;
    -webkit-animation-duration: 4000ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -moz-animation-name: spin;
    -moz-animation-duration: 4000ms;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
    -ms-animation-name: spin;
    -ms-animation-duration: 4000ms;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: linear;
    animation-name: spin;
    animation-duration: 4000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
@-moz-keyframes spin {
    from { -moz-transform: rotate(0deg); }
    to { -moz-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
    from { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(360deg);
    }
}

@media (min-width: 321px) {
    .squeeze {
        letter-spacing: -0.1px;
    }
}

/*
    Custom widget rules
*/

}

}
.pad_buttons {
    width: 94% !important;
    margin: 6.25px auto !important;
    display: block;
}
.pad_buttons > input {
    text-align: center;
}
.input_with_buttons input {
    text-align: center;
}
.input_with_buttons {
    width:100%;
    white-space:nowrap;
    text-align:center
}
.input_with_buttons button {
    display:inline-block;
    vertical-align:text-top;
    -o-transform: scale(1.5);
    -ms-transform: scale(1.5);
    -moz-transform: scale(1.5);
    -webkit-transform: scale(1.5);
    transform: scale(1.5);
}
#sure {
    padding:0.5em;
}

/*
    App Specific: General Rules
*/

body, #loadingPage {
    margin:0;
    background-color:#1C1C1C;
    height: 100%
}
:not(input):not(textarea) {
    -webkit-touch-callout:none;
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    -ms-touch-select:none;
    -ms-content-zooming:none;
    -o-user-select:none;
    user-select:none;
}
#header, #footer {
    display: none;
}
#footer {
    min-height: 24px;
    border: none !important;
}
.logo {
    height:42px;
    padding:0!important;
    background:url(../img/logo.png)
    background-size:159px 40px;
    margin:1px auto
}
@media (max-width:480px) {
    .ui-mini {
        font-size:12px
    }
    .duration-input {
        border-bottom-width: 0;
    }
    .duration-input > label {
        float: left;
        margin: .5em 2% 0 0;
    }
    .duration-input > label~[class*=ui-] {
        box-sizing: border-box;
    }
}

.notifications {
    height: 100%;
}

.notificationCount {
    position: absolute;
    top: 0;
    background: #ed1d24;
    color: #fff;
    z-index: 999;
    font-size: 0.8em;
}

#notificationPanel li h2 {
    font-size: 0.8em;
}

#notificationPanel li p {
    white-space: normal;
}

#notificationPanel .clear-all {
    position: absolute;
    right: 5px;
    top: -3px;
    font-size: smaller;
}

#notificationPanel .clear-all.clear {
    width: 60px;
    right: 0;
    top: -5px;
}

#mainMenu {
    border:0
}

#mainMenu > .ui-grid-a .ui-btn {
    text-overflow: clip !important;
}

/* Start page rules */

#start {
    background-color:#1C1C1C!important
}
#auto-scan {
    display:none
}
#welcome_list {
    width:250px;
    margin:0 auto;
    left:0;
    right:0;
    position:absolute;
    top:15%
}
#welcome_logo {
    margin:0 auto 20px
}
.cancel > .ui-btn:after {
    background-color: rgba(0,0,0,0) !important
}

/* Options page rules */

.help-icon, .inline-icon > .ui-btn {
    display: inline-block;
    vertical-align: middle
}

.clear-loc {
    display: inline-block;
    padding: 0;
    margin: 0;
    right: 0;
    position: absolute;
    top: 3px;
}

.controlgroup-textinput {
    height: 32px;
    padding:0;
    margin:0;
    margin-right: -5px !important;
    border-bottom-left-radius: 3.90625px !important;
    border-top-left-radius: 3.90625px !important;
    border-bottom-right-radius: 0 !important;
    border-top-right-radius: 0 !important;
    border-right: none;
}

#verify-api {
    height: 34px;
    width: 80px;
    margin:0;
    border-bottom-right-radius: 3.90625px;
    border-top-right-radius: 3.90625px;
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
    border-left: none;
}

/* Site manager rules */

#site-control form > .ui-field-contain:nth-child(3), .ui-field-no-border {
    border-bottom:0;
}

.logged-in-alert {
    padding:0
}

.logged-in-alert .ui-icon-recycle:after{
    background-color: #16a085;
}

.logged-in-alert .syncStatus {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    width: calc(100% - 90px);
    position: absolute;
    top: 25%;
}

.logged-in-alert .logout {
    float:right;
}

@media (max-width: 375px) {
    .logged-in-alert .syncStatus {
        font-size: 11px;
    }
}

/* Program editor rules */
.move-up {
    border: none !important;
    float: right;
    padding-left:10px;
    margin-right: -10px !important;
    background-color: transparent !important;
    bottom: 5px;
    height: 22px;
}
.delete-day, .program-copy, .connectnow, .collapsible-button-right {
    font-size: 11px;
    font-weight: bold;
    padding: 0.2em 0.5em;
    float: right;
}
#forecast .ui-content, #addprogram .ui-content, #programs .ui-content, #runonce .ui-content, #manual .ui-content {
    max-width: 600px;
}
#programs .ui-collapsible-content {
    background-color: inherit;
}
#addprogram .ui-select > .ui-btn, #programs .ui-select > .ui-btn {
    min-width: 110px;
}

/* Language popup rules */

#lang, #singleDuration {
    max-width: 500px
}
#lang > li:not(.ui-li-divider) {
    float: left;
    width: 50%
}
#lang > li:last-child:not(:nth-child(odd)) {
    clear: both;
    width: 100%
}
#lang > li:last-child:not(:nth-child(odd)) > a{
    text-align: center
}

/* Logging page rules */
#table_sort {
    display:none;
    text-align:center
}
.custom-count-pos {
    font-size:11px;
    font-weight:700;
    padding:.2em .5em;
    float:right
}
.log_type {
    text-align:center;
    padding-bottom:15px!important
}
#logs_list, .pad-top {
    padding-top:10px
}
#logs_list table {
    color:#000;
    text-align:center;
    text-shadow:none;
    background:#fff;
    border:1px solid #b4b4b4;
    font:700 14px helvetica;
    padding:0;
    margin-top:10px;
    width:100%;
    border-radius:8px
}
#logs_list table th {
    border-bottom:1px solid #b4b4b4
}
#logs_list table tr td {
    color:#666;
    border-bottom:1px solid #b4b4b4;
    border-right:1px solid #b4b4b4;
    padding:5px
}
#logs_list table tr td:last-child {
    border-right:none
}
#logs_list table tr:last-child td {
    border-bottom:none
}
#log_options {
    max-width: 800px;
    margin: 0 auto;
}
#logs_summary {
    margin: 0 auto 10px auto;
    padding: 2px
}
#logs_summary > div {
    padding: 2px 10px;
    display: inline-block
}
@media (max-width:480px) {
    #logs_list .ui-li-aside {
        width:25%!important;
        font-size:smaller
    }
}

/* About page rules */

#about p {
    text-align:center;
    overflow:visible;
    white-space:normal
}

/* Home page rules */
#footer-running {
    font-weight:400;
    font-size:medium;
    width: 100%;
    min-height: 24px;
    padding: 2px 0;
}
#footer-menu {
    border: 0;
    background: transparent;
    position: fixed;
    right: 10px;
    bottom: 8%;
    z-index: 9999;
    height: 50px;
    width: 50px;
}
.moveLeft {
    -webkit-transform: translate3d(-17em,0,0);
    -o-transform: translate3d(-17em,0,0);
    -ms-transform: translate3d(-17em,0,0);
    -moz-transform: translate3d(-17em,0,0);
    transform: translate3d(-17em,0,0);
}
#footer-menu:after{
    height: 50px;
    width: 50px;
    margin-top: -25px;
    margin-left: -25px;
    -o-transform: scale(1.5);
    -ms-transform: scale(1.5);
    -moz-transform: scale(1.5);
    -webkit-transform: scale(1.5);
    transform: scale(1.5);
}
#stn_attrib {
    border: 0;
}
.location {
	padding-right: 5px;
}
.changelog {
    font-size: smaller;
    margin: 10px;
}
.changelog li {
    margin: 0.5em;
}
.info-card {
    margin-top: 5px;
    max-width: 500px;
    margin: 0 auto;
    padding: 5px 0;
    min-height: 70px;
}
.info-card > div {
    -webkit-transition: all 0.1s;
    -moz-transition: all 0.1s;
    -ms-transition: all 0.1s;
    -o-transition: all 0.1s;
    transition: all 0.1s;
}
.home-info {
    margin-left: -10px;
    margin-top: 10px;
}
.sitename {
	padding-bottom: 10px;
}
.station-hidden {
    opacity: 0.5;
}
.card-icon {
    position: absolute;
    border: none;
}
.station-name {
    width: 70%;
    text-overflow: ellipsis;
    overflow: hidden;
    margin: 0 auto;
}
.station-settings {
    top: -3px;
    right: 1%;
}
.special-station {
    top: -3px;
    right: 1%;
    margin-right: 24px;
}
.station-status {
    top: -3px;
    left: 1%;
}
.station-status.on:after {
    background-color:#16a085;
}
.station-status.wait:after {
    background-color:#FFC82C;
}
.station-status.off:after {
    background-color:#C96161;
}
#os-stations-list img, #os-running-stations img {
	display: none;
}
.has-images .card img {
    height: 60px;
    width: 60px;
    float: left;
    display: inherit !important;
}
.has-images .station-name {
    width: 60%;
}
.has-images .station-status {
	right: 1%;
	left: inherit;
	bottom: -3px;
	top: inherit;
}
.has-images .rem {
	padding-left: 5px;
	padding-top: 8px;
}
#footer-running.ui-bar {
    font-weight: 600;
    font-size: 14px;
}
#clock-s {
    padding-top: 10px;
}
.running-text {
    margin:0;
    text-shadow:none;
    color:#fff;
}
div.running-text{
    display: table-cell;
}
.stn-name {
    padding: 0;
    border: 0;
}
.stn-name > input {
    background-color: #fff;
}
.attrib-submit {
    border: 0;
}
.rem {
    width: 80%;
    margin:0 auto;
    font-size:.71em!important;
    white-space: normal !important;
}

/* Program preview rules */
.master {
    background-color:#DEAD5D!important
}
.program-1 {
    background-color:rgba(0, 200, 0, .5)!important
}
.program-2 {
    background-color:rgba(200, 0, 0, .5)!important
}
.program-3 {
    background-color:rgba(0, 200, 200, .5)!important
}
.delayed {
    background-color:#C96161!important;
    text-decoration:line-through
}
#timeline-navigation {
    text-align:center;
    display:none
}
.timeline-event-content a {
    text-decoration:none
}
.timeline-frame {
    border: 1px solid #5D99C3;
    box-sizing: border-box;
    overflow: hidden;
    position: relative;
}
.timeline-content {
    overflow: hidden;
    position: relative;
}
.timeline-axis {
    border-color: #5D99C3;
    background-color: #5D99C3;
    border-top-style: solid;
    border-width: 1px;
    box-sizing: border-box;
}
.timeline-axis-grid {
    border-left-style: solid;
    border-width: 1px;
    box-sizing: border-box;
}
.timeline-axis-grid-minor {
    border-color: #e5e5e5;
}
.timeline-axis-grid-major {
    border-color: #bfbfbf;
}
.timeline-axis-text {
    color: #fff;
    padding: 3px;
    white-space: nowrap;
}
.timeline-event {
    background-color: #d5ddf6;
    border-color: #97b0f8;
    box-sizing: border-box;
    color: #fff;
    display: inline-block;
    border-radius:5px;
}
.timeline-event-selected {
    background-color: #fff785;
    border-color: #ffc200;
    z-index: 999;
}
.timeline-event-cluster div.timeline-event-dot {
    border-color: #d5ddf6;
}
.timeline-event-box {
    border-radius: 5px;
    border-style: solid;
    border-width: 1px;
    text-align: center;
}
.timeline-event-dot {
    border-radius: 5px;
    border-style: solid;
    border-width: 5px;
}
.timeline-event-range {
    border-radius: 2px;
    border-style: solid;
    border-width: 1px;
}
.timeline-event-range-drag-left {
    cursor: w-resize;
    z-index: 1000;
}
.timeline-event-range-drag-right {
    cursor: e-resize;
    z-index: 1000;
}
.timeline-event-line {
    border-left-style: solid;
    border-left-width: 1px;
    box-sizing: border-box;
}
.timeline-event-content {
    margin: 5px;
    overflow: hidden;
    white-space: nowrap;
    padding: 5px;
}
.timeline-groups-axis {
    border-color: #5D99C3;
    border-width: 1px;
    box-sizing: border-box;
}
.timeline-groups-axis-onleft {
    border-style: none solid none none;
}
.timeline-groups-axis-onright {
    border-style: none none none solid;
}
.timeline-groups-text {
    color: #4d4d4d;
    padding-left: 10px;
    padding-right: 10px;
}
.timeline-currenttime {
    background-color: #ff7f6e;
    box-sizing: border-box;
    width: 2px;
}
.timeline-customtime {
    background-color: #6e94ff;
    box-sizing: border-box;
    cursor: move;
    width: 2px;
}
.timeline-navigation {
    background-color: #f5f5f5;
    border: 1px solid #bebebe;
    border-radius: 2px;
    box-sizing: border-box;
    color: #808080;
    font-family: arial;
    font-size: 20px;
    font-weight: bold;
}
.timeline-navigation-new-line {
    border-right: 1px solid #bebebe;
}
@media (max-width:480px) {
    .timeline-groups-text {
        width:22px;
        overflow:hidden;
        text-overflow:clip
    }
    .timeline-groups-text:before {
        content:attr(data-shortname)"      ";
        white-space:pre
    }
    .dayofweek:before {
        content:" " attr(data-shortname)"     ";
        white-space:pre
    }
}
/* Weather-related rules */
#weather {
    overflow:hidden;
    text-overflow:ellipsis;
    text-align: center;
}
.noweather > .ui-block-a {
    width: 0;
}
.noweather > .ui-block-b, .save_pw {
    width: 100%;
    margin: 0 auto;
}
.noweather #clock-s {
    padding-top:0;
}
.debugWU tr td:first-child {
    width: 160px;
    font-weight: 700;
}
.wicon {
    vertical-align:middle;
    display:inline-block;
    width:150px;
    height:150px;
    background:url(../img/weather.png);
    -o-transform:scale(0.5);
    -ms-transform:scale(0.5);
    -moz-transform:scale(0.5);
    -webkit-transform:scale(0.5);
    transform: scale(0.5);
    margin:-55px -20px -45px -60px;
}
.wicon.cond0, .wicon.cond1, .wicon.cond2 {
    background-position:-150px -150px
}
.wicon.cond3, .wicon.cond4, .wicon.condchancetstorms, .wicon.condnt_chancetstorms, .wicon.condnt_tstorms, .wicon.condtstorms {
    background-position:-300px -150px
}
.wicon.cond5 {
    background-position:0 -450px
}
.wicon.cond6, .wicon.condchancesleet, .wicon.condnt_chancesleet {
    background-position:-150px -450px
}
.wicon.cond7, .wicon.cond8 {
    background-position:0 -600px
}
.wicon.cond9, .wicon.condchancerain, .wicon.condnt_chancerain {
    background-position:-150px -300px
}
.wicon.cond10, .wicon.condnt_sleet, .wicon.condsleet {
    background-position:0 -450px
}
.wicon.cond11, .wicon.cond12, .wicon.condnt_rain, .wicon.condrain {
    background-position:0 0
}
.wicon.cond13, .wicon.condchanceflurries, .wicon.condflurries, .wicon.condnt_chanceflurries, .wicon.condnt_flurries {
    background-position:-450px -150px
}
.wicon.cond14, .wicon.condchancesnow, .wicon.condnt_chancesnow {
    background-position:-300px -300px
}
.wicon.cond15 {
    background-position:0 -150px
}
.wicon.cond16, .wicon.condnt_snow, .wicon.condsnow {
    background-position:-450px -150px
}
.wicon.cond17 {
    background-position:-300px -450px
}
.wicon.cond18, .wicon.condnt_sleet, .wicon.condsleet {
    background-position:-150px -450px
}
.wicon.cond19, .wicon.cond20, .wicon.cond21, .wicon.cond22, .wicon.condfog, .wicon.condhazy, .wicon.condnt_fog, .wicon.condnt_hazy {
    background-position:-150px -600px
}
.wicon.cond23, .wicon.cond24 {
    background-position:-450px -300px
}
.wicon.cond25 {
    background-position:0 -150px
}
.wicon.cond26, .wicon.condcloudy, .wicon.condnt_cloudy {
    background-position:-300px 0
}
.wicon.cond27, .wicon.condnt_mostlycloudy, .wicon.condnt_partlysunny {
    background-position:-300px -600px
}
.wicon.cond28, .wicon.condmostlycloudy, .wicon.condpartlysunny {
    background-position:0 -300px
}
.wicon.cond29, .wicon.condnt_mostlysunny, .wicon.condnt_partlycloudy {
    background-position:-450px -600px
}
.wicon.cond30, .wicon.condmostlysunny, .wicon.condpartlycloudy {
    background-position:-150px 0
}
.wicon.cond31, .wicon.condnt_sunny {
    background-position:-450px -450px
}
.wicon.cond32, .wicon.condclear, .wicon.condsunny {
    background-position:-450px 0
}
.wicon.cond33, .wicon.condnt_clear {
    background-position:-450px -450px
}
.wicon.cond34 {
    background-position:-450px 0
}
.wicon.cond35 {
    background-position:-300px -450px
}
.wicon.cond36 {
    background-position:-450px 0
}
.wicon.cond37, .wicon.cond38, .wicon.cond39 {
    background-position:-300px -150px
}
.wicon.cond40 {
    background-position:0 0
}
.wicon.cond41 {
    background-position:-450px -150px
}
.wicon.cond42 {
    background-position:0 -450px
}
.wicon.cond43 {
    background-position:-450px -150px
}
.wicon.cond44 {
    background-position:-150px 0
}
.wicon.cond45 {
    background-position:-300px -150px
}
.wicon.cond46 {
    background-position:0 -450px
}
.wicon.cond47 {
    background-position:-300px -150px
}
.wicon.cond3200, .wicon.condnt_unknown, .wicon.condunknown {
    background:0 0;
    display:none
}
/* Mozilla specific weather icon adjustments */
@media (max-width:940px) {
    #weather .location {
        font-weight:inherit;
        white-space:normal!important;
    }
}
@media (max-width: 320px) {
	.has-images .station-name {
		width: 45%;
	}
    .card {
        max-width: 220px;
    }
    .wicon {
        margin:-55px -40px -45px -40px;
    }
    #weather {
        text-align: left;
        margin-left: 5px;
    }
    #weather > .location {
        display: block;
        width: 80%;
    }
    .home-info {
        margin-left: -25px;
    }
}
/* NEW: Station Status Styles */

/* Idle (Enabled, not scheduled) */
.station-idle {
    background-color: #e6f7ff; /* Light solid blue */
}

/* Queued (Scheduled to run) */
.station-queued {
    background-color: #f6ffed; /* Very light green */
}

/* Running */
.station-running {
    animation: pulse-blue 2.5s infinite;
}

@keyframes pulse-blue {
    0% {
        background-color: #cfe2ff; /* Light blue */
    }
    50% {
        background-color: #a9c7ff; /* Darker blue */
    }
    100% {
        background-color: #cfe2ff; /* Light blue */
    }
}

/* Disabled (We already have this, but let's confirm) */
.station-disabled {
    opacity: 0.6;
    background-color: #f1f1f1; /* Slightly darker grey */
}
.station-disabled .station-toggle {
    display: none; 
}

/* Custom "Pop" Shadow */
#main-info-card, #os-stations-list {
    /* x-offset | y-offset | blur-radius | color */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5) !important; 
}

/* NEW: Rain Delay Indicator (Active State on Main Card) */
#main-info-card.rain-delay-active {
    background-color: #fcebeb; /* Very Light Red/Pink */
    border-color: #dc3545;
    box-shadow: 0 0 10px rgba(220, 53, 69, 0.5);
}

/* Force center alignment, hide arrows, AND reduce padding for NTP IP fields */
#ntp-ip-fields input[type=number].form-control,
	#static-ip-fields input[type=number].form-control,
	#opt-port {
    text-align: center;
    -moz-appearance: textfield; 
    padding-left: 0.25rem;  /* Reduces the space on the left */
    padding-right: 0.25rem; /* Reduces the space on the right */
}

/* Hides arrows in Chrome, Safari, Edge */
#ntp-ip-fields input[type=number]::-webkit-inner-spin-button,
#ntp-ip-fields input[type=number]::-webkit-outer-spin-button,
#static-ip-fields input[type=number]::-webkit-inner-spin-button,
#static-ip-fields input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Ensure the list items are cleanly spaced */
.list-group-item {
    padding-top: 0.65rem;
    padding-bottom: 0.65rem;
}

/* NEW: System Disabled Indicator */
#main-info-card.system-disabled {
    background-color: #f1f1f1; /* Same light grey as disabled stations */
    border-color: #adb5bd; /* A muted border color */
}

/* Custom Toggle Styles */

/* Running (Red - Indicates "Stop") */
.form-check-input.toggle-running:checked {
    background-color: #dc3545;
    border-color: #dc3545;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
}

/* Scheduled (Green Border - Indicates "Ready/Scheduled") */
.form-check-input.toggle-scheduled {
    border-color: #198754;
    background-color: #e8f5e9; /* Very light green */
}

/* Focus states for cleaner look */
.form-check-input.toggle-running:focus {
    box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
}
.form-check-input.toggle-scheduled:focus {
    box-shadow: 0 0 0 0.25rem rgba(25, 135, 84, 0.25);
}

/* Custom Wide Modal Style */
@media (min-width: 576px) {
    .modal-dialog-pico {
        /* Force the width */
        max-width: 66vw !important;
        width: 66vw !important;
        
        /* Force centering */
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* Optional: Ensure the close button is always visible */
.modal-header .btn-close {
    opacity: 1;
}

/* FORCE MODALS TO BE WIDE */
/* This ensures the dialog takes up the screen width on mobile */
.modal-dialog {
    max-width: 66vw !important;
    width: 66vw !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Reset the outer wrapper just in case */
.modal {
    width: 100% !important;
    max-width: none !important;
}

/* Preview Timeline Styles */
#timeline {
    overflow: hidden; /* Prevents scrollbars from flickering */
    border: 1px solid #dee2e6;
    border-radius: 0.25rem;
}

/* Style the custom timeline tooltips/labels */
div.timeline-event {
    border-color: #0d6efd !important; /* Bootstrap Primary Blue */
    background-color: #cfe2ff !important; /* Light Blue */
    color: #000 !important;
}

div.timeline-event-selected {
    background-color: #0d6efd !important;
    color: #fff !important;
}

/* Core Timeline Library Styles */
.timeline-frame {
    border: 1px solid #dee2e6;
    overflow: hidden;
}
.timeline-axis {
    border-color: #dee2e6;
    border-width: 1px;
    border-top-style: solid;
}
.timeline-axis-grid {
    border-left-style: solid;
    border-width: 1px;
}
.timeline-axis-grid-minor {
    border-color: #f0f0f0;
}
.timeline-axis-grid-major {
    border-color: #d0d0d0;
}
.timeline-axis-text {
    color: #6c757d;
    padding: 3px;
    white-space: nowrap;
}
.timeline-event {
    color: #000;
    border-color: #0d6efd;
    background-color: #cfe2ff;
    display: inline-block;
    box-sizing: border-box;
}
.timeline-event-selected {
    border-color: #ffc107;
    background-color: #fff3cd;
    z-index: 999;
}
.timeline-event-content {
    margin: 0px;
    white-space: nowrap;
    overflow: hidden;
    padding: 2px 5px;
}
/* Style for the "Delayed" status */
.timeline-event.delayed {
    background-color: #e9ecef !important; /* Grey */
    border-color: #adb5bd !important;
    color: #6c757d !important;
    text-decoration: line-through;
}