/* mittauksesta esitetään kaavio */
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

  :root {
    --ennustekortti:    #e0e9df; /* ennuste */
    --mittarikortti:    #7ebce0; /* mittaus */
    --mittausarvot:     #032b4d;
    --anturi-id:        #3475aa;
    --reunaviiva:       #30363d;
    --otsikot:          #26374b;
    --akunvaraus:       #ee0f0f;
    --lampo:            #ff7b72;
    --kosteus:          #5ceef3;
    --paine:            #a5d6a7;

    
    --error-card:       #fff; /* e26868;/**/
    --error-viiva:       #fc0404;
    --radius:    12px;
    --font:      'JetBrains Mono', 'Fira Code', monospace;
    --bg:        #17100d;
  }
    
.error-card {
    background: var(--error-card);
    border: 2px solid var(--error-viiva);
    border-radius: var(--radius);
    overflow: hidden;
    transition: border-color 0.2s;
    max-width: 500px!important;
    }/* END : .error-card { */
    
.sensor-card {
    background: var(--mittarikortti);
    border: 1px solid var(--reunaviiva);
    border-radius: var(--radius);
    overflow: hidden;
    transition: border-color 0.2s;
    max-width: 500px !important;
    }/* END : .sensor-card { */

.ennuste-card {
    background: var(--ennustekortti);
    border: 1px solid var(--reunaviiva);
    border-radius: var(--radius);
    overflow: hidden;
    transition: border-color 0.2s;
    max-width: 500px !important;
    }/* END : .sensor-card { */    
    
.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem 0.75rem;
    border-bottom: 1px solid var(--reunaviiva);
    }/* END : .card-header { */
    
.ennuste_header {
    border-bottom: 1px solid var(--reunaviiva);
    }/*END : .ennuste_header { */   
    
.sensor-name {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--mittausarvot);
    }/* END : .sensor-name { */
    
.sensor-ennuste {
    font-size: 0.95rem;
    font-weight: 600;
    }/* END : .sensor-ennuste { */

.sensor-id {
    font-size: 0.7rem;
    color: var(--otsikot);
    background: var(--anturi-id);
    padding: 2px 8px;
    border-radius: 4px;
    }/* END : .sensor-id { */

.metrics {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--reunaviiva);
    }/* END : .metrics { */
    
.metrics_ennuste {
    display: flex;
    gap: 0;
    }/* END : .metrics_ennuste { */

.metric {
    flex: 1;
    padding: 0.75rem 1rem;
    text-align: center;
    position: relative;
    }/* END : .metric { */

/* mittaustulosten väliin pystyviiva */    
.metric + .metric::before {
    content: '';
    position: absolute;
    left: 0; top: 20%; height: 60%;
    width: 1px;
    background: var(--reunaviiva);
    }/* END : .metric + .metric::before { */

.metric-label {
    font-size: 0.65rem;
    color: var(--otsikot);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    /*margin-bottom: 4px;/**/
    }/* END : .metric-label { */

.metric-value {
    font-size: 1.15rem;
    font-weight: 600;
    }/* END : .metric-value { */

.metric-unit {
    font-size: 0.65rem;
    color: var(--mittausarvot);
    margin-left: 2px;
    }/* END : .metric-unit { */

.akunvaraus_heikko  { color: var(--akunvaraus); }
.mittausarvot  { color: var(--mittausarvot); }
.val-temp  { color: var(--lampo); }
.val-hum   { color: var(--kosteus); }
.val-pres  { color: var(--paine); }

.legenda-rivi  { display: flex; align-items: center; gap: 5px; font-size: 0.68rem; color: var(--muted); }
.legenda-piste { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

.pulse { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; animation: pulse 4s infinite; } /* background: #3fb950;  */
.pulse.lampo { background: var(--lampo) !important; }
.pulse.kosteus { background: var(--kosteus); }
.pulse.paine { background: var(--paine); }

.chart-aika    { padding: 0 1.25rem 0.875rem; font-size: 0.68rem; color: var(--muted); }

@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.1; } }

@media (max-width: 768px) {
body { padding: 1.75rem; }
/*#sensor-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; }/**/
.chart-kaavio { height: 140px; }
}
@media (max-width: 480px) {
body { padding: 0.25rem; }
header { flex-direction: column; align-items: flex-start; gap: 0.4rem; margin-bottom: 1.25rem; }
h1 { font-size: 1rem; }
/* #sensor-grid { grid-template-columns: 1fr; gap: 0.875rem; }/**/
.metric { padding: 0.6rem 0.4rem; }
.metric-value { font-size: 0.95rem; }
.chart-kaavio { height: 120px; padding: 0.75rem 0.875rem 1rem; }
}
@media (hover: none) { .sensor-card:hover { border-color: var(--border); } }

/* LOPPU : mittauksesta esitetään kaavio */

/* sivun alareunaan tyhjää tilaa */
.footer-spacer-100 {
    height: 100px; /* lisää tilaa sivun viimeiselle riville */
}
.footer-spacer-75 {
    height: 75px; 
}
.footer-spacer-50 {
    height: 50px; 
}