/* root settings and colors */
:root {
    --black:#000000; 
    --white:#ffffff; 
    --gray:#CCCCCC;
    --gray-hover:#A0A0A0;
    --dark-gray:#A0A0A0;
    --light-gray:#DADADA; 
    --light-blue:#BBEEFF;
    --mid-blue:#007FFF; 
    --dark-blue:#0a0a64; 
    --mdnt-blue:#0a0a3f;
    --brt-green:#00ff00;
    --dark-green:#00bf00;
    --brt-red:#ff2020;
    --card-blue:#007FFF; 
    --card-blue-text:#ffffff; 
    --panel-bg:#3399ff; 
    --panel-border:#ffffff; 
    --panel-divider:#e5e7eb; 
    --summary-icon:#c7d2fe; 
    }

/* main.css original */

body { 
    min-height: 100vh; 
    display:flex; 
    align-items:flex-start; 
    justify-content:center; 
    margin:0; font-family:'Segoe UI',sans-serif; 
    background: var(--mdnt-blue); 
    color: var(--white); 
    transition:background .2s ease,color .2s ease; 
    }
    
page-container { 
    max-width:908px; 
    padding:24px 12px; 
    box-sizing:border-box; 
    }

h1 { 
    font-size:36px; 
    text-align:left; 
    padding-top:6px;
    padding-bottom:6px;
    margin-top:.35rem;
    margin-bottom:.65rem;
    color: var(--white); 
    margin:0; 
}
h2 { 
    font-size:28px; 
    text-align:left;
    padding-top:6px;
    padding-bottom:6px;
    margin-top:.35rem;
    margin-bottom:.65rem;
    color: var(--white);
    margin:0; 
}
h3 { 
    font-size:24px; 
    text-align:left; 
    padding-top:6px;
    padding-bottom:6px;
    margin-top:.35rem;
    margin-bottom:.65rem;
    color: var(--white);
    margin:0; 
    }

details { 
    border:1px solid  var(--white); 
    border-radius:6px; 
    margin-bottom:12px; 
    background: var(--white); 
    overflow:hidden; 
    }
    
summary { 
    cursor:pointer; 
    padding:10px 14px; 
    font-size:1.05rem; 
    font-weight:600; 
    background: var(--mid-blue); 
    color:var(--white); 
    display:flex; 
    align-items:center; 
    }
    
summary::after { 
    content:'▸'; 
    margin-left:auto; 
    transition:transform .15s ease; 
    color: var(--light-blue); 
    }
    
details[open] summary::after { 
    transform:rotate(90deg); 
    }
        
section.card { 
    color: var(--white); 
    max-width:900px; 
    margin:18px 0; 
    text-align:left; 
    padding:12px 24px; 
    border:2px solid  var(--white); 
    border-radius:8px; 
    background: var(--mid-blue); 
    box-shadow:0 2px 8px rgba(0,0,0,0.06); 
    box-sizing:border-box; 
    }
    
nav a { 
    color: var(--white); 
    text-decoration:none; 
    margin-right:16px; 
    font-weight:600; 
    }

meter { 
    width:90%; 
    height:1.2rem; 
    }

.panel { 
    padding:12px 14px; 
    border-top:1px solid  var(--light-gray); 
    background: var(--dark-blue);
    color: var(--white);
    }

.header-row { 
    display:flex; 
    align-items:center; 
    justify-content:flex-start; 
    gap:24px; 
    }
    
.header-row img { 
    height:83px; 
    width:auto; 
    display:block; 
    }
    
.nav-links { 
    color: var(--white); 
    }
    
.nav-links a {
    color:  var(--white);
    text-decoration: none;
    text-align: center;
    margin-right: 16px;
    font-weight: 600;
    }
    
.nav-user {
    color: var(--white);
    text-decoration: none;
    text-align: left;
    margin-right: 16px;
    font-weight: 600;
    }

.subheading {
    color: var(--white);
    margin-top:6px;
    margin-bottom:8px;
    }
    
.deviceID {
    color: var(--white);
    text-decoration: none;
    text-align: left;
    padding-top: 12px;
    padding-bottom: 12px;
    margin-right: 2px;
    font-weight: 600;
    }
    
.flash { 
    margin:8px 0; 
    }
    
.flash-success {
  color: var(--brt-red);
  font-size: 1.1rem;   /* increase or tweak as you like */
  font-weight: 700;    /* bold */
    }
    
.flash-error {
  color: var(--brt-red);
  font-size: 1.1rem;   /* increase or tweak as you like */
  font-weight: 700;    /* bold */
    }
    
.label {
    padding-top:.55rem;
    padding-bottom:.25rem;
    }
    
.textbox { 
    min-width:6.6rem; 
    width:60%; 
    min-height:1.3rem; 
    border:1px solid var(--black); 
    border-radius:6px; 
    padding:.35rem .45rem; 
    margin-top:.25rem;
    margin-bottom:.55rem;
    font-size:0.9rem; 
    background: var(--white); 
    color: var(--black); 
    }
    
.selbox { 
    min-width:6.6rem; 
    width:90%; m
    in-height:1.3rem; 
    border:1px solid  var(--black); 
    border-radius:6px; 
    padding:.35rem .45rem; 
    margin-top:.45rem;
    margin-bottom:.45rem;
    font-size:0.9rem; 
    background: var(--white); 
    color: var(--black); 
    }
    
.btn-std { 
    min-width:6.6rem; 
    height:2.2rem; 
    display:inline-flex; 
    align-items:center; 
    justify-content:center; 
    font-size:.90rem; 
    font-weight:200; 
    padding:.45rem .55rem; 
    border:1px solid; 
    border-radius:6px; 
    background: var(--gray); 
    color: var(--black); 
    cursor:pointer; 
    user-select:none; 
    transition:background .15s ease; 
    }
    
.btn-std:hover { 
    background:  var(--dark-gray); 
    }
    
.nav-links { 
    color: var(--white); 
    }
    
.deviceID { 
    color: var(--white); 
    }

/* styles for calibration page*/
.grid { 
    display:grid; 
    grid-template-columns:repeat(12,1fr); 
    gap:.75rem; 
    }
    
.col-12 { 
    grid-column:span 12; 
    }
.col-9 { 
    grid-column:span 9; 
    }
    
.col-6 { 
    grid-column:span 6; 
    }
    
.col-4 { 
    grid-column:span 4; 
    }
    
.col-3 { 
    grid-column:span 3; 
    }
    
.section-title { 
    color:var(--white); 
    font-size:1.25rem; 
    margin-top:1rem; 
    padding-bottom:.3rem; 
    border-bottom:1px solid rgba(255,255,255,.25); 
    }
    
.status-row { 
    display:flex; 
    gap:.7rem; 
    flex-wrap:wrap; 
    margin-top:.5rem; 
    }
    
.status-warn {
    color:var(--white);
    font-weight: 500;
    }
    
.status-chip { 
    display:inline-flex; 
    align-items:center; 
    gap:.4rem; 
    padding:.25rem .7rem; 
    background: var(--black); 
    border:1px var(--black); 
    border-radius:999px; 
    color:var(--white); 
    font-size:.9rem; 
    }
    
.dot { 
    width:.65rem; 
    height:.65rem; 
    border-radius:999px; 
    background: var(--light-gray); 
    }
    
.dot.ok { 
    background: var(--brt-green); 
    }
    
.dot.err { 
    background: var(--brt-red); 
    }
    
.card { 
    background: var(--light-gray); 
    border:2px solid var(--black); 
    border-radius:6px; 
    padding:.8rem; 
    color: var(--black); 
    }
    
.card-title { 
    font-weight:700; 
    margin:0 0 .35rem 0; 
    color:var(--black); 
    }
    
.gvalue { 
    margin-top:.4rem; 
    font-size:1.05rem; 
    color:var(--black); 
    }
    
.gupdated { 
    font-size:.85rem; 
    color:var(--black) 
    }
    
.log { 
    width:98%; 
    height:12rem; 
    border:1px solid var(--black); 
    border-radius:6px; 
    background:var(--white); 
    color:#000; 
    padding:.5rem; 
    white-space:pre-wrap; 
    overflow:auto; 
    font-family:ui-monospace, monospace; 
    }

/* modal from users pages */
dialog.modal {
    border:none; 
    border-radius:8px; 
    padding:0; 
    width:min(520px,92vw); 
    }
    
dialog.modal::backdrop { 
    background:rgba(0,0,0,.45); 
    }
    
.modal__panel { 
    padding:1.25rem; 
    }
    
.modal__title { 
    margin:0 0 .5rem 0; 
    font-size:1.2rem; 
    }
    
.modal__list { 
    margin:.5rem 0 0 1rem; 
    }
    
.modal__errors { 
    margin-top:.75rem; 
    color:#b00020; 
    }
    
.modal__errors ul { 
    margin:.25rem 0 0 1rem; 
    }
    
.modal__footer { 
    display:flex; 
    justify-content:flex-end; 
    margin-top:1rem; 
    }
    
/* Device gauge styles */
.gauge-wrap {
    min-width: 100px;
    max-width: 780px;
    margin: 0 auto;
}

.gauge {
    width: 95%;
    margin: 16px 0;
    padding: 14px 14px 12px;
    background: #a9a9a9;
    border: 2px solid var(--black);
    border-radius: 6px;
    box-shadow: inset 0 0 6px rgba(24,56,131,.08);
}

.gauge-title {
    font-weight: 500;
    margin-bottom: 8px;
    font-size: 1.0rem;
    color: var(--black);
}

.gauge-track {
    width: 100%;
    height: 24px;
    border-radius: 12px;
    background: linear-gradient(90deg, #c0c0c0, #dcdcdc);
    overflow: hidden;
}

.gauge-fill {
    height: 100%;
    width: 0%;
    border-radius: 12px;
    transition: width .35s ease;
}

.gauge-meta {
    margin-top: 8px;
    font-size: .95rem;
    color: var(--black);
    display: flex;
    justify-content: space-between;
}

/* Base reset/safety for the body box */
html, body {
  height: 100%;
}
body {
  margin: 0 auto;            /* center the body box when it’s narrower than the viewport */
  box-sizing: border-box;     /* makes padding/borders included in width calculations */
  width: 100%;                /* mobile-first: fill the viewport width */
  max-width: 100%;            /* prevent overflow on small viewports */
  /* optional: padding around content */
  /* padding: 16px; */
}

/* PHONE: up to 767px */
@media (max-width: 767px) {
  body {
    width: 100%;
    max-width: 100%;
    /* optional: smaller padding on tiny screens */
    /* padding: 12px; */
  }
}

/* TABLET: 768px–1023px */
@media (min-width: 768px) and (max-width: 1023px) {
  body {
    /* Choose the content width you want on tablets */
    max-width: 768px;      /* common tablet content width */
    width: 100%;
  }
}

/* DESKTOP: 1024px and up */
@media (min-width: 1024px) {
  body {
    /* Choose your desktop content width */
    max-width: 1200px;     /* typical desktop content width */
    width: 100%;
  }
}