/* ================================================
   vivabox.css
   Stilar för vivabox_level.php & vivabox_temp.php
   ================================================ */

.vivabox {
    position: relative;
    width: 100%;
    height: 270px;
    border-radius: 10px;
    overflow: hidden;
    box-sizing: border-box;
    font-family: Roboto, 'Helvetica Neue', Arial, sans-serif;
    color: #fff;
}

/* Bakgrundsfärger – syns om bilden inte laddar */
.vivabox.vivabox--level { background-color: #008fc5; }
.vivabox.vivabox--temp  { background-color: #008fc5; }

/* Bakgrundsbilden täcker exakt hela boxen */
.vivabox .viva-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: fill;
    display: block;
}

/* Innehållslager ovanpå bilden */
.vivabox .viva-content {
    position: absolute;
    inset: 0;
    z-index: 1;
}

/* ── Tidsstämpel – nere till höger ── */
.vivabox p.sampleupdate {
    position: absolute;
    bottom: 12px;
    right: 14px;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.9);
    margin: 0;
}

/* ════════════════════════════════════
   VATTENSTÅND
   Bilden: uppåtpil (övre halvan), vågor (mitten), nedåtpil (nedre halvan)
   ════════════════════════════════════ */

/* "Vattenstånd" – till höger om uppåtpilen, ca 20% från toppen */
.vivabox--level p.sampletype,
.vivabox--level p.sampletypenegative {
    position: absolute;
    top: 28%;
    left: 35%;
    right: 5%;
    font-size: 1.7rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.95);
    margin: 0;
}

/* Värde t.ex. "-15 cm" – till höger om nedåtpilen, ca 63% från toppen */
.vivabox--level p.samplevaluenegative,
.vivabox--level p.samplevaluepositive {
    position: absolute;
    top: 63%;
    left: 34%;
    right: 5%;
    font-size: 3.1rem;
    font-weight: 500;
    color: #fff;
    margin: 0;
}

/* Ref – nere till vänster */
.vivabox--level p.refcontainer {
    position: absolute;
    bottom: 12px;
    left: 14px;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.85);
    margin: 0;
}

/* ════════════════════════════════════
   VATTENTEMPERATUR
   Bilden: vågor (övre ~30%), termometer vänster (30–85%)
   ════════════════════════════════════ */

/* Värde t.ex. "1.8 °C" – till höger om termometern */
.vivabox--temp p.samplevaluesingledigit,
.vivabox--temp p.samplevaluedoubledigit {
    position: absolute;
    top: 38%;
    left: 44%;
    right: 5%;
    font-size: 3.1rem;
    font-weight: 500;
    color: #fff;
    margin: 0;
}

/* "Vattentemperatur" – centrerat under termometer+värde */
.vivabox--temp p.sampletype {
    position: absolute;
    bottom: 38px;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 1.7rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.85);
    margin: 0;
}