/* Neutral defence theme: olive + navy + airforce blue accents */
:root{
  --olive:#3c5422;
  --navy:#0b63d6;
  --air:#5aa0d8;
  --muted:#6b7280;
  --bg:#f7fbff;
  --card:#ffffff;
  font-family:Inter, system-ui, Segoe UI, Roboto, Arial;
}
nav {
  background: #5e9b5e;
  padding: 12px 0;
}
nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: left;
}
nav ul li {
  margin: 0 15px;
}
nav ul li a {
  color: white;
  text-decoration: none;
  font-size: 16px;
  font-weight: 500;
}
nav ul li a:hover {
  text-decoration: underline;
}
/* ---------------- Top Bar ---------------- */
.topbar{
  max-width:100%;
  max-height:100%;
  margin:0 auto;
  padding:12px;
  background: #76c176;
  color:#c76666;
  text-align:center;
  font-size:22px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:1.2px;
}
body{
  background: #94db94;
  margin:0;
  padding:0;
  color:var(--olive);
  line-height:1.6;
  font-size:18px;
}
h1 {
    text-align: center;
    color: #cdd7ec;
}
h2 {
    text-align: center;
    color: #120601;
    text-align: left;
}
/* ---------------- Container ---------------- */
.container{    
  display:flex;
  flex-direction:column;
  max-width:100%;   /* /* ya 1300px */ */
  margin:20px auto;
  padding:20px;
  justify-content:center;  
  max-height:100%;
}
/* -------- Form + Image Row Layout -------- */
.form-image-row{
  display:flex;
  gap:24px;
  align-items:flex-start;
  justify-content:center;
  margin-top:12px;
  flex-direction:row;
}
.form-side{
  flex:0 0 50%;
  min-width:160px;
  gap: 12px;
}
.image-side{
  width:50%;
  flex:0 0 50%;
  max-width:950px;
  display:flex;
  flex-direction:column;   /* 🔴 upar → niche */
  gap:12px;                /* dono ke beech gap */
  align-items:stretch;
}
/* ---------------- Image ---------------- */
.image-box{
  width:100%;
  max-width:930px;
  height:470px;
  border:1px dashed #cfe3ff;
  border-radius:4px;
  overflow:hidden;          /* ✅ fixed */
  position:relative;
  background:#f7fbff;
}
.image-box img{
  width:100%;
  height:100%;
  object-fit:initial;
}
/* ---------------- Headings ---------------- */
h1{
  font-size:25px;
  margin:0 0 6px;
  text-transform:uppercase;
  color:var(--olive);
  text-align:center;
}
.subtitle{
  font-size:12px;
  color:var(--muted);
  margin-bottom:18px;
  text-align:center;
  font-style:italic;
}
/* ---------------- Form ---------------- */
.form{
  display:flex;
  justify-content:center;
  align-items:center;
  flex-direction:row;
  flex-wrap:wrap;
  gap:18px;
  max-width:900px;
  margin-top:12px;
}
label{
  line-height:1.4;
  text-align:left;
  display:flex;
  flex:0 0 280px;
  font-size:21px;
  font-weight:700;
  margin-bottom:4px;
  padding: 10px;
}
input, select{
  line-height:1.6;
  text-align:left;
  flex:1;
  flex:1 1 300px;
  flex-wrap:wrap;
  padding:8px 10px;
  justify-content:center;
  align-items:baseline;  
  font-size:20px;     
}
.checkbox-row{
  display:flex;
  align-items:right;
  gap:8px;
}
.checkbox-row label{
  padding-top:0px;
}
.controls{
  display:flex;
  gap:28px;
  margin-top:10px;
  align-items:center;
  flex-wrap:wrap;
}
.btn{
  background:var(--navy);
  color:#fff;
  padding:10px;
  border-radius:8px;
  border:none;
  cursor:pointer;
  font-size:30px;
}
.btn.secondary{
  background:var(--muted);
  font-size:20px;
}
/* ---------------- Results ---------------- */
.results{
  max-width:1980px;
  margin:12px auto;   /* 🔴 YE MAIN LINE HAI */
  border-radius:8px;
  padding:10px;
  background:#ede0e0;
  border:1px solid #b9c4d4;
  overflow:hidden;
  position:relative;
  font-size:24px;
}
table{
  width:100%;
  border-collapse:collapse;
  margin-top:12px;
  box-shadow:0 2px 6px rgba(0,0,0,0.1);
  overflow:hidden;
  position:relative;
  font-size:24px;
}
th, td{
  padding:8px;
  border-bottom:1px solid #eef4ff;
  text-align:left;
}
/* ---------------- Scroll Area ---------------- */
.factor-wrap{
  width:100%;
  overflow:auto;  
  max-width:1980px;
  max-height:200px;  
  background:#ede0e0;
  border:2px solid #eef4ff;
  padding:8px;
  border-radius:6px;
  background:#fff;
  position:relative;
  justify-content:center;
}
.red-arrow{
  color:red;
  font-size:18px;
  margin-left:6px;
  vertical-align:middle;
}
.site-footer{
  text-align:center;
  padding:20px;
  background:#7ec68c;
  color:#fff;
  margin-top:50px;
}
/* ---------------- Mobile ---------------- */
@media (max-width:768px){
  body{
    font-size:14px;
  }
  /* Layout */
  .form-image-row{
    flex-direction:column;
    gap:14px;
  }
  .form-side,
  .image-side{
    width:100%;
    max-width:100%;
  }
  /* FORM */
  .form{
    flex-direction:column;
    align-items:stretch;
    gap:10px;
  }
  .form > *{
    width:100%;
  }
  label{
    flex:none;
    font-size:14px;
    padding:4px 0;
  }
  input, select{
    flex:none;
    width:100%;
    font-size:14px;
    padding:8px;
  }
  /* CHECKBOX */
  .checkbox-row{
    align-items:center;
  }
  /* IMAGE */
  .image-box{
    height:180px;
  }
  .image-box img{
    object-fit:contain;
  }
  /* BUTTONS */
  .controls{
    justify-content:space-between;
  }
  .btn{
    font-size:14px;
    padding:10px 12px;
  }
  .btn.secondary{
    font-size:13px;
  }
  /* RESULTS */
  .results{
    font-size:14px;
  }
  table{
    font-size:13px;
    display:block;
    overflow-x:auto;
    white-space:nowrap;
  }
}
/* -------- Grand Total Row -------- */
#resultTable tr:last-child th{
  background-color:#f9f9f9;
  font-weight:bold;
  color:#222;
  border-top:2px solid #333;
  text-align:right;
  padding:8px;
}
#resultTable tr:last-child{
  box-shadow:inset 0 1px 0 #ddd;
}
#resultTable tfoot th{
  position:sticky;
  bottom:0;
  background:#fff;
  z-index:2;
}