:root{  
  --bg:#f4f6f8;
  --card:#ffffff;
  --gov-blue:#2fa84f;       /* changed: main green (was #0b5ed7) */
  --gov-accent:#1f7a39;     /* changed: darker green (was saffron) */
  --muted:#50575b;
  --muted-2:#8a8f94;
  --danger:#d9534f;
  --radius:12px;
  --gap:14px;
  --font-sans: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  --max-width:980px;
  --group-bg:#f0fbf2;       /* changed: subtle background for grouped controls (light green) */
}

/* reset / base */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--font-sans);
  background:linear-gradient(180deg,#fafbfc 0%, var(--bg) 100%);
  color:#12202b;
  -webkit-font-smoothing:antialiased;
  padding:28px;
}

/* main container card */
.container{
  max-width:var(--max-width);
  margin:18px auto;
  background:var(--card);
  padding:20px;
  border-radius:14px;
  box-shadow:0 12px 30px rgba(15,30,60,0.06);
  border:1px solid rgba(10,10,20,0.03);
  position:relative;
}

/* header */
.page-header, header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:18px;
  flex-wrap:wrap;
}
.title, h1{
  margin:0;
  font-size:2rem;      /* changed from 1.25rem → 2rem */
  color:var(--gov-blue);
  letter-spacing:0.2px;
  text-align:center;   /* force center alignment */
  flex:1 1 100%;
  font-weight:700;
}
.lead, .now{
  font-size:0.95rem;
  color:var(--muted);
  margin-left:auto;
  flex:0 0 auto;
}

/* top error */
.top-error{
  background:#fff6f6;
  color:#7a1111;
  border:1px solid #f6d0cf;
  padding:10px 12px;
  border-radius:8px;
  margin-bottom:12px;
  display:none;
}
.top-error.visible{display:block}

/* form card */
.form-card, form{
  display:block;
  background:transparent;
  padding:6px;
}
.col-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:var(--gap);
  align-items:start;
}

/* field */
.field{display:flex;flex-direction:column;gap:8px}
label{font-weight:600;font-size:0.96rem;color:#102629;margin-bottom:4px}
.req-inline{color:var(--danger);margin-left:6px;font-weight:700}

/* grouped background for cohesive UI */
.group-bg{
  background:var(--group-bg);
  padding:12px;
  border-radius:10px;
  border:1px solid rgba(10,20,40,0.03);
}

/* inputs */
input[type="text"],input[type="email"],input[type="tel"],input[type="date"],input[type="time"],select,textarea{
  width:100%;
  padding:12px 14px;
  border-radius:8px;
  border:1px solid #e6eefb;
  background:#fff;
  font-size:0.95rem;
  transition:box-shadow .12s, border-color .12s, transform .06s;
  color:#77777e;
  outline:none;
}
select{appearance:none;background-image:linear-gradient(45deg, transparent 50%, #999 50%), linear-gradient(135deg, #999 50%, transparent 50%), linear-gradient(to right, #fff, #fff); background-position:calc(100% - 18px) calc(1em + 2px), calc(100% - 13px) calc(1em + 2px), 100% 0; background-size:6px 6px,6px 6px,2.5rem 2.5rem; background-repeat:no-repeat;}
textarea{min-height:120px;resize:vertical;padding-top:10px}

/* placeholder styling — dark and visible */
::placeholder { color:#77777e !important; font-weight:500; opacity:1; }

/* focus */
input:focus,textarea:focus,select:focus{
  box-shadow:0 8px 28px rgba(47,168,79,0.08); /* changed to green glow */
  border-color:var(--gov-blue);
  transform:translateY(-1px);
}

/* hints & errors */
.hint{font-size:0.84rem;color:var(--muted-2)}
.error{color:var(--danger);font-size:0.87rem;display:none;margin-top:6px}
.error.visible{display:block}

/* radio group */
.radio-row{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.radio-label{font-weight:600;display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:8px;border:1px dashed rgba(10,20,40,0.03);background:#fff}
.radio-label input{transform:scale(1.1)}

/* camera area */
.camera-wrap{padding-bottom:10px}
#camera-area, #camera-area-officer{display:flex;flex-direction:column;gap:10px}
#video{
  width:100%;
  border-radius:8px;
  background:#f0fbf2; /* changed from blue to light green */
  max-height:320px;
  object-fit:cover;
  border:1px solid rgba(10,20,40,0.04);
}
.photo-preview img{border-radius:8px;max-width:280px;display:block}

/* camera controls - reuse same bg for cohesiveness */
.camera-controls, .camera-controls-off{display:flex;gap:10px;flex-wrap:wrap}
.btn{
  font-family:var(--font-sans);
  border:0;
  cursor:pointer;
  border-radius:8px;
  padding:10px 14px;
  font-weight:700;
  transition:transform .08s, box-shadow .12s;
  background:#ffffff;
  box-shadow:0 2px 8px rgba(10,20,40,0.04);
  border:1px solid rgba(10,20,40,0.04);
}
.btn:active{transform:translateY(1px)}
.btn.ghost{background:transparent;border:1px solid rgba(10,20,40,0.06)}
.btn.primary{
  background:linear-gradient(135deg,var(--gov-blue), var(--gov-accent)); /* green gradient */
  color:#fff;
  box-shadow:0 8px 24px rgba(31,122,55,0.14);
}
.btn.large{padding:12px 26px;border-radius:999px;font-size:1rem}

/* actions */
.actions{display:flex;justify-content:flex-end;gap:12px;grid-column:1 / -1;margin-top:8px}
.actions-center{justify-content:center}

/* small screens */
@media (max-width:900px){:root{--max-width:760px}}
@media (max-width:720px){
  .col-grid{grid-template-columns:1fr}
  .page-header, header{flex-direction:column;align-items:flex-start;gap:8px}
  .title, h1{text-align:left;flex:1 1 auto}
  .actions{justify-content:stretch}
  .btn.large{width:100%}
}

/* subtle left accent stripe for government feel */
.container::before{
  content:'';
  position:absolute;
  left:0;
  top:0;
  height:100%;
  width:6px;
  border-top-left-radius:14px;
  border-bottom-left-radius:14px;
  background:linear-gradient(180deg,var(--gov-blue),var(--gov-accent));
  opacity:0.12;
  pointer-events:none;
}

/* utility */
.full{grid-column:1 / -1}

/* ensure all action buttons look same */
.btn.primary{
  background:linear-gradient(135deg,var(--gov-blue), var(--gov-accent));
  color:#fff;
  box-shadow:0 8px 24px rgba(31,122,55,0.14);
}

/* ===== Officer page specific: Resident + Training layout ===== */
.resident-card{
  padding:12px;
  border-radius:10px;
  background:linear-gradient(180deg, rgba(240,251,242,0.85), rgba(240,251,242,0.85));
  border:1px solid rgba(10,20,40,0.04);
  box-shadow:0 6px 18px rgba(10,20,40,0.02);
}
.section-title-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.section-title{font-size:1.02rem;color:var(--gov-blue);margin:0;font-weight:700}

/* resident details grid */
.resident-grid{display:grid;grid-template-columns:160px 1fr;gap:10px 22px;align-items:start}
.resident-row{display:flex;align-items:center;padding:6px 0}
.resident-label{color:var(--muted);font-weight:700;font-size:0.9rem}
.resident-value{font-weight:700;color:#0d2630}

/* registration initial card */
.registration-card{padding:12px;border-radius:10px;border:1px solid rgba(10,20,40,0.03);background:#fff}
.section-subtitle{font-size:0.98rem;margin:0 0 8px;color:var(--gov-blue);font-weight:700}
.reg-grid{display:flex;gap:12px;align-items:flex-start;flex-wrap:wrap}
.reg-meta{flex:1 1 300px}
.reg-photo{flex:0 0 160px;display:flex;align-items:flex-start;justify-content:center}
.reg-photo img{max-width:150px;border-radius:8px;border:1px solid rgba(10,20,40,0.04)}

/* training card */
.training-card, .previous-trainings > div, #previous-trainings > div {
  padding:12px;
  border-radius:8px;
  background:#fff;
  border:1px solid rgba(10,20,40,0.03);
  margin-bottom:14px;
  box-shadow:0 6px 14px rgba(10,20,40,0.02);
}
.training-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
training-head strong{color:var(--gov-accent);font-size:1rem}
.training-meta{color:var(--muted-2);font-size:0.9rem}

/* training body */
.training-body{display:flex;gap:12px;align-items:flex-start;flex-wrap:wrap}
.training-image{flex:0 0 150px}
.training-image img{width:150px;height:150px;object-fit:cover;border-radius:8px;border:1px solid rgba(10,20,40,0.04)}
.training-info{flex:1 1 260px;display:flex;flex-direction:column;gap:6px}
.training-info div{font-size:0.95rem;color:#0d2630}

/* Styling for older simple structure appended by older JS */
#previous-trainings > div{ padding:12px; }
#previous-trainings img{ max-width:150px;border-radius:8px;display:block;margin-top:8px }

/* labels/value emphasis for older markup */
#previous-trainings > div div:first-child,
#previous-trainings > div div:nth-child(2) {
  color:var(--muted);
  font-weight:700;
}

/* Responsive */
@media (max-width:720px){
  .resident-grid{grid-template-columns:1fr}
  .reg-grid{flex-direction:column}
  .reg-photo{flex-basis:auto}
  .training-body{flex-direction:column}
  .training-image img{width:100%;height:auto;max-height:360px}
  .training-image{width:100%}
}

/* ===== Updated visual polish & lightbox (full section from your snippet) ===== */
.resident-card{padding:14px;border-radius:10px;background:linear-gradient(180deg, rgba(240,251,242,0.9), rgba(240,251,242,0.9));border:1px solid rgba(10,20,40,0.04);box-shadow:0 6px 18px rgba(10,20,40,0.02)}
.section-title{font-size:1.02rem;color:var(--gov-blue);margin:0;font-weight:700}
.resident-grid{display:grid;grid-template-columns:160px 1fr;gap:8px 18px;align-items:center;margin-top:8px}
.resident-row{display:flex;align-items:center;padding:6px 0}
.resident-label{color:var(--muted);font-weight:700;font-size:0.92rem}
.value-field{display:inline-block;width:100%;padding:9px 10px;background:#ffffff;border:1px solid #e6eefb;border-radius:6px;color:#77777e;font-weight:700;box-shadow:inset 0 1px 0 rgba(255,255,255,0.6);min-height:30px}
@media (max-width:720px){.resident-grid{grid-template-columns:1fr;gap:6px}.resident-label{margin-bottom:4px}}

#previous-trainings > div,
#training-list > .training-card,
#training-list > div {background:linear-gradient(180deg, rgba(240,251,242,0.95), rgba(240,251,242,0.95));border:1px solid rgba(10,20,40,0.04);padding:14px;margin-bottom:16px;border-radius:10px;box-shadow:0 6px 18px rgba(10,20,40,0.02)}
#previous-trainings > div strong,
#training-list > .training-card strong {display:block;color:var(--gov-accent);font-size:1.05rem;margin-bottom:8px;font-weight:800}
#previous-trainings > div div,
#training-list > .training-card .training-info div {background:#ffffff;padding:10px 12px;border-radius:8px;border:1px solid #e6eefb;margin-bottom:10px;font-weight:700;color:#0d2630}

#previous-trainings img,
#training-list img,
.training-image img {display:block;max-width:320px;width:auto;height:auto;object-fit:contain;border-radius:8px;border:1px solid rgba(10,20,40,0.04);margin-top:8px}

.training-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.training-meta{color:var(--muted-2);font-size:0.92rem}
.training-body{display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap}
.training-image{flex:0 0 auto}
.training-info{flex:1 1 calc(100% - 280px);display:flex;flex-direction:column;gap:8px}
@media (max-width:720px){
  .training-body{flex-direction:column}
  .training-image{flex-basis:auto}
  #previous-trainings img,#training-list img{max-width:100%;width:100%;height:auto}
  .training-info{flex-basis:auto}
}

/* prevent horizontal overflow on small screens */
html,body { overflow-x: hidden; }
/* responsive H1 */
h1, .title { font-size: clamp(1.25rem, 4.5vw, 2rem); line-height: 1.05; text-align: center; margin: 0; }
/* responsive container padding */
.container { padding-left: 16px; padding-right: 16px; max-width: var(--max-width); width: 100%; box-sizing: border-box; }
header, .page-header { gap: 8px; }
header > div:first-child, header > div:last-child { width:100%; }

.field.full > div, .field > div { flex-wrap: wrap; }

/* Lightbox */
.lightbox-backdrop{ position:fixed; inset:0; background:rgba(0,0,0,0.75); z-index:2147483000; display:none; align-items:center; justify-content:center; padding:18px; -webkit-overflow-scrolling:touch; }
.lightbox-inner{ position:relative; max-width:min(96vw,1200px); max-height:94vh; width:auto; background:transparent; display:flex; align-items:center; justify-content:center; border-radius:10px; overflow:visible; }
.lightbox-img{ display:block; max-width:100%; max-height:90vh; height:auto; width:auto; object-fit:contain; border-radius:6px; box-shadow:0 16px 50px rgba(0,0,0,0.6); background:#fff; }
.lightbox-close{ position:absolute; top:8px; right:8px; z-index:2147483100; background:#ffffffcc; border:0; border-radius:999px; width:36px; height:36px; display:flex; align-items:center; justify-content:center; box-shadow:0 6px 18px rgba(0,0,0,0.18); cursor:pointer; font-weight:700; font-size:16px; }
.lightbox-loader{ width:48px; height:48px; border-radius:50%; border:4px solid rgba(255,255,255,0.14); border-top-color:rgba(255,255,255,0.9); animation:lbspin 1s linear infinite; margin:auto; }
@keyframes lbspin{ to { transform: rotate(360deg); } }

.training-image img,
#previous-trainings img,
#training-list img,
#reg-photo img,
#photo-preview img { cursor:zoom-in; -webkit-user-select:none; user-select:none; touch-action:manipulation; }

@media (max-width:420px){
  .lightbox-content{ padding:6px; }
  .lightbox-backdrop{ padding:10px; }
  body{ padding:12px; }
  .container{ padding:12px; }
  .title, h1{ text-align:center; }
}

/* Ensure preview images fit mobile boxes */
#photo-preview,#photo-preview-off,#previous-trainings,#training-list,#reg-photo{ overflow:hidden; }
#photo-preview img,#photo-preview-off img,#previous-trainings img,#training-list img,#reg-photo img{
  width:100%; max-width:100%; height:auto; display:block; border-radius:8px;
}
/* ---------- Form polish ---------- */
.form-label{
  display:inline-block;
  font-weight:800;
  color:#0d2630;
  background:#eefaf1;             /* soft green chip bg */
  padding:4px 10px;
  border-radius:8px;
  border:1px solid #e1f2e6;
}

/* unify all inputs (including password) */
.form-control,.form-select, input[type="password"]{
  border-radius:10px !important;
  border:1px solid #dfe7ef !important;
  background:#fff !important;
  height:48px;
  padding:10px 14px;
  font-size:0.98rem;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.6);
}
textarea.form-control{ height:auto; min-height:120px; }

.form-control:focus,.form-select:focus{
  border-color:var(--gov-blue) !important;
  box-shadow:0 10px 28px rgba(47,168,79,0.12) !important;
  outline:0;
  transform:translateY(-1px);
}

/* subtle placeholder */
.form-control::placeholder{ color:#8a8f94; font-weight:600; }

/* ---------- Buttons: make primary/success the same green gradient ---------- */
.btn-primary,.btn-success{
  background:linear-gradient(135deg,var(--gov-blue),var(--gov-accent)) !important;
  border:0 !important;
  color:#fff !important;
  box-shadow:0 10px 24px rgba(31,122,55,0.18);
}
.btn-primary:hover,.btn-success:hover{ filter:brightness(0.98); transform:translateY(-1px); }
.btn-primary:active,.btn-success:active{ transform:translateY(0); }
.btn-lg{ padding:12px 20px; border-radius:12px; font-weight:800; }

/* spacing around CTA and link */
.form-actions{ margin-top:18px; }
.below-cta{ margin-top:12px; }

/* ---------- Duty Assignment block looks separate ---------- */
.section-box{
  background:var(--group-bg);
  border:1px solid rgba(10,20,40,0.06);
  border-radius:12px;
  padding:16px;
  margin-top:16px;
}
.section-box .section-heading{
  margin:-6px 0 10px 0;
  font-size:1.05rem;
  font-weight:900;
  color:var(--gov-blue);
  letter-spacing:.2px;
}
.section-box .form-label{ background:#ffffff; border-color:#e6eefb; } /* labels lighter inside box */

/* little gap between “register/login” button and the card edge */
.card .btn.w-100{ margin-top:6px; }

/* optional: make the card corners a bit softer */
.card{ border-radius:16px; }
/* ===== Form fields spacing (vertical gaps) ===== */
.row.g-3 > [class^="col-"],
.row.g-3 > [class*=" col-"] {
  margin-bottom: var(--gap);   /* default 14px from :root */
}

/* Tips/validation ko input se chipkana nahi */
.valid-tip, .invalid-tip { margin-top: 6px; }

/* Safety: stacked controls ke beech spacing, login form ke liye bhi kaam karega */
.form-control,
.form-select,
input[type="password"] {
  margin-bottom: 12px;
}
/* force equal width for password like other fields */
input[type="password"].form-control { width: 100% !important; }

/* assignment selects & overall spacing */
#duty_state,#duty_nodal,#duty_district,#duty_ulb { margin-bottom: 12px; }