/* Mobile-first responsive styles for 4-tab site */
:root{
  --bg:#213E58;
  --card:#327D9E;
  --muted:#94a3b8;
  --accent:#79C4C1;
  --title: #F0A135;
  --glass: rgba(255,255,255,0.03);

  --warning1: #cc3300;
  --warning2: #ff9966;
  --warning3: #ffcc00;
  --warning4: #99cc33;
  --warning5: #339900;

}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  background: linear-gradient(180deg, #071326 0%, #071b28 100%);
  color:#F4F6E0;
  -webkit-font-smoothing:antialiased;
}
.container{max-width:900px;margin:0 auto;padding:1rem}
.site-header{background:var(--glass);backdrop-filter:blur(6px);border-bottom:1px solid rgba(255,255,255,0.04)}
.site-header .container{display:flex;align-items:center;gap:1rem}
.logo{font-size:1.1rem;margin:0;padding:.5rem 0; }
.tabs{display:flex;gap:.5rem;flex-wrap:wrap}
.tabs button{background:transparent;border:1px solid transparent;color:var(--muted);padding:.45rem .6rem;border-radius:8px;font-weight:600}
.tabs button[aria-selected="true"]{color:var(--accent);border-color:rgba(6,182,212,0.12);background:linear-gradient(90deg,rgba(6,182,212,0.06),transparent)}
.tabs button:focus{outline:2px solid rgba(6,182,212,0.18);outline-offset:3px}
.tab-panel{margin-top:1rem;background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent);padding:1rem;border-radius:10px}
.hidden{display:none}
.contact-form{display:flex;flex-direction:column;gap:.6rem}
.contact-form input,.contact-form textarea{padding:.6rem;border-radius:8px;border:1px solid rgba(255,255,255,0.06);background:transparent;color:inherit}
.btn{background:var(--accent);color:#021223;border:none;padding:.6rem .9rem;border-radius:8px;font-weight:700}
.site-footer{padding:1rem 0;margin-top:2rem;color:var(--muted);float:right}

/* Assessment form (mobile-first) */
.assessment-form{display:flex;flex-direction:column;gap:.65rem;margin-top:0}
.assessment-form label{font-size:.9rem;color:var(--muted)}
.assessment-form input,.assessment-form textarea{width:100%;padding:.65rem;border-radius:8px;border:1px solid rgba(255,255,255,0.06);background:transparent;color:inherit}
.assessment-form input:focus,.assessment-form textarea:focus{outline:2px solid rgba(6,182,212,0.12);outline-offset:2px}

/* Make the form look better on larger screens inside the main column */
@media(min-width:640px){
  .assessment-form{gap:.8rem}
  .assessment-form label{font-size:1rem}
}

/* Larger screens */
@media(min-width:640px){
  .logo{font-size:1.25rem}
  .tabs button{padding:.6rem .9rem}
}

/* Focus visible tweak for keyboard users */
:focus{outline: none}
:focus-visible{outline:2px dashed var(--accent);outline-offset:3px}

span.indicator-label{
  display:block;
  margin-top:22px;
  margin-bottom:6px;
  font-weight:600;
  font-weight: bolder;
  color: var(--accent);
}
input.indicator-value {
    margin-bottom: 12px;
}

legend {
    color: var(--title);
    font-weight: bolder;
}

.save-btn {
    background-color: var(--accent);
    color: #021223;
    border: none;
    padding: .6rem .9rem;
    border-radius: 8px;
    font-weight: 700;
    margin-top: 2%;
    float: right;    
}

.export-wrapper {
      width: 100%;

      .statsline {        
        display: block;
      }
}

.mmt-button {
    background-color: var(--accent);
    color: #021223;
    border: none;
    padding: .6rem .9rem;
    border-radius: 8px;
    font-weight: 700;
    margin-top: 2%;
    width: 100%;
}

#reports-scoretable {
  background-color: var(--muted);
  color: var(--bg);
  margin-bottom: 22px;
}

#reports-scoretable tbody tr:nth-child(odd) {
  background-color: var(--bg);
  color: var(--muted);
}

.warning1 {
  background-color: var(--warning1);
  color: var(--bg);
}

.warning2 {
  background-color: var(--warning2);
  color: var(--bg); 
}

.warning3 {
  background-color: var(--warning3);
  color: var(--bg);
}

.warning4 {
  background-color: var(--warning4);
  color: var(--bg);
}

.warning5 {
  background-color: var(--warning5);
  color: var(--bg);
}

canvas#bar-graph {
  margin-top: 100px;
}