:root {
     --background-color: var(--pico-background-color, #f8f9fa);
     --pico-color: var(--pico-h1-color, #f8f9fa);


 }

 .chart-container {
     margin: 0 auto;
 }

 h1 {
     margin-bottom: 0px;
 }

 .logo {
     display: block;
     margin: 0 auto;
     max-width: 50px;
     margin-bottom: 0px;
 }

 .sidebar {
     position: fixed;
     top: 0;
     left: 0;
     width: 75%;
     height: 100%;
     background-color: var(--pico-code-background-color);
     padding: 20px;
     padding-top: calc(4em);
     transform: translateX(-100%);
     transition: transform 0.3s ease;
     z-index: 1000;
     text-align: center;
 }

 .sidebar.open {
     transform: translateX(0);
 }

 .sidebar {
     margin-bottom: 10px;
 }

 .close-button {
     position: absolute;
     top: 20px;
     right: 20px;
     cursor: pointer;
     z-index: 1000;
 }

 .close-sidebar {
     cursor: pointer;
     color: var(--pico-h2-color);
     font-size: 2em;
     position: absolute;
     top: 40px;
     right: 20px;
 }

 .back-button {
     cursor: pointer;
     color: #00af75;
     text-decoration: underline;
     margin-right: 10px;

 }

 .white {
     color: #fff;
 }

 .icon {
     color: var(--pico-h1-color);
 }

 .centered {
     text-align: center;
 }

 .device-list {
     display: flex;
     flex-wrap: wrap;
     gap: 20px;
     justify-content: center;
     margin-top: 1em;
 }

 .device-item {
     transition: transform 0.3s ease, box-shadow 0.3s ease;
     cursor: pointer;
     align-items: center;
     cursor: pointer;

 }

 .device-item:hover {
     transform: scale(1.05);
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
 }

 .device-item h3 {
     margin-bottom: 0px;
     text-align: left;
     word-wrap: break-word;
     /* Handle long words */
 }

 .device-item img {
     max-width: 90px;
 }

 .device-item .status-indicator {
     width: 15px;
     height: 15px;
     border-radius: 50%;
     margin-top: 0px;
 }

 .device-item .status-indicator.connected {
     background-color: #007a50;
 }

 .device-item .status-indicator.disconnected {
     background-color: firebrick;
 }

 .green-text {
     color: #00af75;
 }

 .price-card {
     margin-bottom: 0px;
     padding-bottom: 0px;
     color: var(--pico-color);
 }

 .toggle-icon {
     position: absolute;
     top: 37%;
     right: 10px;
     transform: translateY(-50%);
     cursor: pointer;
     user-select: none;
     font-size: 25px;
     color: #555;
 }

 .password-container {
     position: relative;
 }

 html,
 body {
     overscroll-behavior-y: none;
     /*overflow-x: hidden;*/
 }


 body {
     margin: 0;
 }

 header {
     position: fixed;
     top: 0px;
     left: 0;
     width: 100%;

     z-index: 1000;
     /* Ensure header height is defined */
     display: flex;
     justify-content: center;
     padding-bottom: 0px;
     margin-bottom: 0px;
     background: var(--pico-background-color);
 }

 .header-container {
     width: 100%;

     display: none;
     justify-content: space-between;
     align-items: center;
     padding-bottom: 0px;
     padding-left: 25px;
     padding-right: 25px;
     padding-top: 2em;
     margin-bottom: 0px;
 }

 .container {
     margin-top: 0px;
     max-width: 700px;

 }

 .header-title {
     text-align: center;
     margin-bottom: 0px;
     font-weight: bold;
 }

 /* HTML: <div class="loader"></div> */
 .loader {
     width: 80px;
     height: 40px;
     display: flex;
 }

 .loader:before,
 .loader:after {
     content: "";
     margin: 0 -2px 0 0;
     flex: 1;
     --c: no-repeat linear-gradient(#007a50 0 0);
     background: var(--c), var(--c), var(--c), var(--c);
     animation: l13-1 1s infinite linear, l13-2 1s infinite linear;
 }

 .loader:after {
     transform: scale(-1);
     margin: 0 0 0 -2px;
 }

 @keyframes l13-1 {

     0%,
     3% {
         background-size: 0 4px, 4px 0, 0 4px, 4px 0
     }

     12.5% {
         background-size: 50% 4px, 4px 0, 0 4px, 4px 0
     }

     25% {
         background-size: 50% 4px, 4px 50%, 0 4px, 4px 0
     }

     37.5% {
         background-size: 50% 4px, 4px 50%, 50% 4px, 4px 0
     }

     46%,
     54% {
         background-size: 50% 4px, 4px 50%, 50% 4px, 4px 50%
     }

     62.5% {
         background-size: 0 4px, 4px 50%, 50% 4px, 4px 50%
     }

     75% {
         background-size: 0 4px, 4px 0, 50% 4px, 4px 50%
     }

     87.5% {
         background-size: 0 4px, 4px 0, 0 4px, 4px 50%
     }

     96%,
     100% {
         background-size: 0 4px, 4px 0, 0 4px, 4px 0
     }
 }

 @keyframes l13-2 {

     0%,
     49.9% {
         background-position: 0 20px, 50% 20px, 20px 100%, 100% 100%
     }

     50%,
     100% {
         background-position: right 20px top 20px, 50% 100%, 100% 100%, 100% 20px
     }
 }


 a[aria-disabled="true"] {
     pointer-events: none;
     opacity: .5;
 }


 #chatButton {
     position: fixed;
     right: 1em;
     bottom: 1.5em;
     z-index: 1000;
     border-radius: 40px;
     font-size: larger;
 }

 #chatDialog {
     display: none;
     position: fixed;
     margin-top: 2em;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background: var(--pico-background-color);
     padding: 25px;
     z-index: 900;
     box-sizing: border-box;
     overflow: hidden;
 }

 dialog[open]::backdrop {
     background: transparent;
 }

 #messages {
     overflow-y: auto;
     display: flex;
     flex-direction: column;
     gap: 0.5rem;
     margin-bottom: 1em;
     margin-top: 0px;
 }

 .message {
     display: flex;
     flex-direction: column;
 }

 .message-bubble {
     padding: 0.5rem 0.75rem;
     border-radius: 12px;
     word-wrap: break-word;
     display: inline-block;
 }

 .client-bubble {
     background-color: #007a50;
     align-self: flex-end;
     color: white;
     text-align: right;
 }

 .support-bubble {
     background-color: #2d3547;
     align-self: flex-start;
     color: white;
 }

 .message small {
     font-size: 0.8rem;
     color: #bbb;
 }

 .date-divider {
     text-align: center;
     margin: 0.5rem 0;
     font-size: 0.85rem;
     color: #bbb;
     font-weight: bold;
 }

 #awayNotice {
     text-align: center;
     font-style: italic;
     font-size: 16px;
     color: #bbb;
 }

 #closeChat {
     position: absolute;
     top: 2px;
     right: 2px;
     background: none;
     border: none;
     font-size: 18px;
     color: #888;
     cursor: pointer;
     line-height: 1;
     padding: 10px;
 }

 input[type="range"] {
     pointer-events: auto;
 }

 input[type="range"]::-webkit-slider-thumb {
     pointer-events: auto;
 }

 input[type="range"] {
     pointer-events: none;
 }

 input[type="range"]::-webkit-slider-thumb {
     pointer-events: auto;
 }

 input[type="range"]::-moz-range-thumb {
     pointer-events: auto;
 }

 input[type="range"]::-ms-thumb {
     pointer-events: auto;
 }

 .status-indicator {
     width: 12px;
     height: 12px;
     border-radius: 50%;
     display: inline-block;
     background: #9ca3af
 }

 .status-indicator.connected {
     background: #10b981
 }

 .status-indicator.disconnected {
     background: #ef4444
 }

 /* set your track height once */
 input[type="range"] {
     --track-h: 8px;
     --thumb-scale: 1.5;
     /* grow factor */
 }

 /* WebKit (Android/Chrome) */
 input[type="range"]::-webkit-slider-runnable-track {
     height: var(--track-h);
     border-radius: 999px;
 }

 input[type="range"]::-webkit-slider-thumb {
     -webkit-appearance: none;
     appearance: none;
     transform: scale(var(--thumb-scale));
     transform-origin: center;
 }

 /* Firefox */
 input[type="range"]::-moz-range-track {
     height: var(--track-h);
     border-radius: 999px;
 }

 input[type="range"]::-moz-range-thumb {
     transform: scale(var(--thumb-scale));
     transform-origin: center;
 }


 .num {
     text-align: center;

 }



 .muted {
     font-size: 12px;
     color: #6b7280;
 }

 .hidden {
     display: none !important;
 }

 /* Chrome, Edge, Safari, Opera */
 input[type="number"]::-webkit-outer-spin-button,
 input[type="number"]::-webkit-inner-spin-button {
     -webkit-appearance: none;
     margin: 0;
 }

 /* Firefox */
 input[type="number"] {
     -moz-appearance: textfield;
     /* hides steppers */
     appearance: textfield;
 }

 #dayAveragePrice .price-unit,
 #yourAveragePrice .price-unit {
     font-size: 0.65em;
     opacity: 0.75;
     margin-left: 2px;
 }

 #priceChart {
     touch-action: none;
     /* critical for iOS/Android */
     -webkit-user-select: none;
     user-select: none;
 }

 #chatFab {
     position: fixed;
     right: 1rem;
     bottom: 1rem;
     width: 3rem;
     height: 3rem;
     display: grid;
     place-items: center;
     border-radius: 999px;
     background: var(--pico-primary, #0ea5e9);
     color: var(--pico-primary-inverse, #fff);
     text-decoration: none;
     box-shadow: 0 6px 16px rgba(0, 0, 0, .2);
     font-size: 1.25rem;
     line-height: 1;
     z-index: 9999;
 }

 #chatFab:focus {
     outline: 2px solid var(--pico-primary-focus, #7dd3fc);
     outline-offset: 2px;
 }

 :root {
     /* will be filled from JS */
     --top-nav-height: 92px;
 }

 /* fixed header using Pico container sizing */
 #topNav {
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
     z-index: 1000;
     background: var(--pico-background-color, #fff);
     /* respect notches / camera cutouts */
     padding-top: env(safe-area-inset-top);
     padding-bottom: 0px;
 }

 /* push content down by actual header height + safe area */
 main.container {
     margin-top: var(--top-nav-height, 77px);
     padding-top: 0px;
 }



 @media (hover:hover) {
     #chatFab:hover {
         filter: brightness(1.05);
     }
 }

 @media (prefers-reduced-motion:no-preference) {
     #chatFab {
         transition: transform .12s ease, filter .12s ease;
     }

     #chatFab:active {
         transform: scale(.96);
     }
 }