/* 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}

@view-transition {
  navigation: auto;
}

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;
      }
}

/* Sync UI Styles */
.sync-section {
  margin: 1.5rem 0;
  padding: 1rem;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.sync-section h3 {
  margin-top: 0;
  margin-bottom: 0.75rem;
  color: var(--accent);
  font-size: 1.1rem;
}

.sync-status {
  padding: 0.5rem;
  margin-bottom: 0.75rem;
  border-radius: 6px;
  font-weight: 500;
}

.sync-status.success {
  background: rgba(51, 153, 0, 0.15);
  color: var(--warning5);
  border: 1px solid rgba(51, 153, 0, 0.3);
}

.sync-status.warning {
  background: rgba(255, 204, 0, 0.15);
  color: var(--warning3);
  border: 1px solid rgba(255, 204, 0, 0.3);
}

.sync-status.error {
  background: rgba(204, 51, 0, 0.15);
  color: var(--warning1);
  border: 1px solid rgba(204, 51, 0, 0.3);
}

.sync-message {
  padding: 0.65rem;
  margin-bottom: 0.75rem;
  border-radius: 6px;
  font-size: 0.95rem;
  font-weight: 500;
}

.sync-message.success {
  background: rgba(51, 153, 0, 0.15);
  color: var(--warning5);
  border: 1px solid rgba(51, 153, 0, 0.3);
}

.sync-message.error {
  background: rgba(204, 51, 0, 0.15);
  color: var(--warning1);
  border: 1px solid rgba(204, 51, 0, 0.3);
}

.sync-message.info {
  background: rgba(6, 182, 212, 0.15);
  color: var(--accent);
  border: 1px solid rgba(6, 182, 212, 0.3);
}

.sync-indicator {
  margin-left: auto;
  font-size: 1.5rem;
}

.sync-indicator span {
  cursor: help;
}

.export-wrapper hr {
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  margin: 1.5rem 0;
}

.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;
}

/* Phase 2: Single-question assessment navigation */
#assessment-container {
  max-width: 800px;
  margin: 0 auto;
}

.progress-container {
  margin-bottom: 2rem;
  padding: 1rem;
  background: var(--glass);
  border-radius: 10px;
  backdrop-filter: blur(6px);
}

.progress-info {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
  color: var(--muted);
}

.progress-bar-track {
  height: 8px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 0.5rem;
}

.progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--title));
  transition: width 0.3s ease;
}

.category-indicator {
  font-size: 0.85rem;
  color: var(--title);
  font-weight: 600;
  margin-top: 0.5rem;
}

.question-fieldset {
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent);
}

.category-label {
  color: var(--title);
  font-weight: bolder;
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
}

.indicator-label {
  display: block;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--accent);
  margin-bottom: 1rem;
}

.score-options {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.score-option {
  position: relative;
}

.score-radio {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.score-label {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  border: 2px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  background: transparent;
}

.score-label:hover {
  border-color: var(--accent);
  background: rgba(121, 196, 193, 0.05);
}

.score-radio:checked + .score-label {
  border-color: var(--accent);
  background: rgba(121, 196, 193, 0.1);
}

.score-number {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  color: #021223;
  border-radius: 50%;
  font-weight: 700;
  font-size: 1rem;
}

.score-description {
  flex: 1;
  font-size: 0.95rem;
  line-height: 1.4;
}

.question-nav {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 2rem;
}

.nav-btn {
  flex: 1;
  background-color: var(--accent);
  color: #021223;
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.nav-btn:hover:not(:disabled) {
  background-color: var(--title);
  transform: translateY(-2px);
}

.nav-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.nav-btn.save-btn {
  background: linear-gradient(90deg, var(--accent), var(--title));
}

@media(min-width:640px) {
  .question-nav {
    justify-content: flex-end;
  }
  
  .nav-btn {
    flex: 0 0 auto;
    min-width: 150px;
  }
  
  #prev-btn {
    margin-right: auto;
  }
}