: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:1.25rem;
  color:var(--gov-blue);
  letter-spacing:0.2px;
  text-align:center;
  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}
/* header */
.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;
}

/* 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 */
.resident-card{
  padding:12px;
  border-radius:10px;
  background:linear-gradient(180deg, rgba(240,251,242,0.85), rgba(240,251,242,0.85)); /* changed to green tint */
  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 (for new or older HTML) */
.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: image left, meta right on wide screens */
.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 (keeps layout similar) */
#previous-trainings > div{ padding:12px; }
#previous-trainings img{ max-width:150px;border-radius:8px;display:block;margin-top:8px }

/* Make labels appear left and data right for older simple 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%}
}

/* Ensure Save Training button matches primary look (if .btn.primary applied it's fine) */
#save-training.btn.primary{ /* extra safety if id used */
  /* inherits .btn.primary styles from main CSS */
}
/* ===== Officer: Resident + Trainings visual polish ===== */

/* Resident card: labels left, value blocks right (form-like) */
.resident-card{
  padding:14px;
  border-radius:10px;
  background:linear-gradient(180deg, rgba(240,251,242,0.9), rgba(240,251,242,0.9)); /* green tint */
  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}

/* two-column label/value layout */
.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}
.resident-value{}

/* value-field looks like a readonly input / placeholder */
.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;
}

/* smaller screens: stack label + value */
@media (max-width:720px){
  .resident-grid{grid-template-columns:1fr;gap:6px}
  .resident-label{margin-bottom:4px}
}

/* ===== Training entries: treat each as a separate card ===== */

/* Older JS sometimes appends plain divs into #previous-trainings.
   Give those divs a card look */
#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)); /* green tint */
  border:1px solid rgba(10,20,40,0.04);
  padding:12px;
  margin-bottom:14px;
  border-radius:10px;
  box-shadow:0 6px 14px rgba(10,20,40,0.02);
}

/* If backend outputs a block with <strong> label + details, style within */
#previous-trainings > div strong,
#training-list > .training-card strong {
  display:block;
  color:var(--gov-accent);
  font-size:1rem;
  margin-bottom:6px;
  font-weight:800;
}

/* tidy any inline meta lines */
#previous-trainings > div div,
#training-list > .training-card .training-info div {
  color:#0d2630;
  margin-bottom:6px;
  font-weight:600;
}

/* images inside training cards */
#previous-trainings img,
#training-list img {
  display:block;
  max-width:160px;
  max-height:160px;
  object-fit:cover;
  border-radius:8px;
  border:1px solid rgba(10,20,40,0.04);
  margin-top:8px;
}

/* training header / meta layout for new .training-card structure */
.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}
.training-info{flex:1 1 260px;display:flex;flex-direction:column;gap:6px}

/* make the "Date" label left and "Waste Segregation" right when possible */
.training-info .meta-row{display:flex;justify-content:space-between;gap:10px}
.training-info .meta-row .meta-label{color:var(--muted);font-weight:700}
.training-info .meta-row .meta-value{font-weight:700;color:#0d2630}

/* responsive: stack training image and info on small screens */
@media (max-width:720px){
  .training-body{flex-direction:column}
  #previous-trainings img, #training-list img { max-width:100%; height:auto; }
}

/* ensure Save Training button is visually primary (safety) */
#save-training.btn.primary,
#save-training.btn.primary.large {
  /* inherits .btn.primary */
}

/* ===== Officer: Resident + Trainings updated visual polish ===== */

/* Bigger section headings */
.section-title{ font-size:1.15rem; color:var(--gov-blue); margin:0; font-weight:800; }
.section-subtitle{ font-size:1.05rem; color:var(--gov-blue); margin:0 0 8px; font-weight:800; }

/* ---------- RESIDENT card: each entry full-width row (label left, value right) ---------- */
.resident-card{
  padding:16px;
  border-radius:10px;
  background:linear-gradient(180deg, rgba(240,251,242,0.95), rgba(240,251,242,0.95)); /* green tint */
  border:1px solid rgba(10,20,40,0.04);
  box-shadow:0 6px 18px rgba(10,20,40,0.02);
}
.resident-grid{
  display:block;            /* make each entry a full-width row */
  margin-top:10px;
  gap:8px;
}
.resident-row{
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:8px 0;
  border-radius:8px;
}
.resident-label{
  width:140px;              /* left column label fixed width */
  min-width:120px;
  color:var(--muted);
  font-weight:800;
  font-size:0.92rem;
  padding-top:6px;
}
.resident-value{
  flex:1;
}

/* value-field: looks like a readonly full-width input (placeholder style) */
.value-field{
  display:block;
  width:100%;
  padding:10px 12px;
  background:#ffffff;
  border:1px solid #e6eefb;
  border-radius:8px;
  color:#0d2630;
  font-weight:700;
  min-height:40px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.6);
}

/* Mobile: label stack above value */
@media (max-width:720px){
  .resident-row{ flex-direction:column; align-items:stretch; }
  .resident-label{ width:auto; min-width:0; margin-bottom:6px; }
}

/* ---------- TRAINING cards - each training is its own card with bigger image ---------- */
#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)); /* green tint */
  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);
}

/* Training heading (larger + colored) */
#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;
}

/* Ensure meta lines look like full-width placeholders */
#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;
}

/* If the backend outputs "Date: ...", keep it visible and look like a form row */
#previous-trainings > div div:first-of-type,
#training-list > .training-card .training-info div:first-of-type {
  /* first meta row (usually date) — keep same visual */
}

/* Show waste segregation row as full width (label/value inside) */
#previous-trainings > div div:nth-of-type(2),
#training-list > .training-card .training-info div:nth-of-type(2) {
  /* second meta row (usually waste) */
}

/* Training image — make it larger so coordinates/stamp are readable */
#previous-trainings img,
#training-list img,
.training-image img {
  display:block;
  max-width:260px;       /* increased from 150/160 -> 260 */
  width:260px;
  height:auto;
  object-fit:cover;
  border-radius:8px;
  border:1px solid rgba(10,20,40,0.04);
  margin-top:8px;
}

/* training head/meta spacing */
.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 layout - image left, meta right on wide screens */
.training-body{display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap}
.training-image{flex:0 0 260px}   /* match image width */
.training-info{flex:1 1 calc(100% - 280px); display:flex; flex-direction:column; gap:8px}

/* responsive: stack image + info on small screens, image full width */
@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}
}

/* ensure Save Training button is visually primary (inherits existing .btn.primary) */
#save-training.btn.primary.large{ /* inherits main styles */ }

/* small visual polish: more breathing room */
.resident-card, #previous-trainings > div, #training-list > .training-card {
  margin-bottom:14px;
  padding-bottom:14px;
}
/* -------- Show full vertical (portrait) training images; no cropping -------- */
#previous-trainings img,
#training-list img,
.training-image img {
  display: block;
  width: auto;            /* let width adapt */
  max-width: 320px;       /* limit width so layout stays nice — increase if your images are high-res */
  height: auto;           /* preserve full height so coordinates show */
  object-fit: contain;    /* don't crop; show entire image */
  border-radius: 8px;
  border: 1px solid rgba(10,20,40,0.04);
  margin-top: 8px;
}

/* Ensure the image container doesn't force a fixed height */
.training-image {
  flex: 0 0 auto;         /* allow container to grow with image height */
}

/* Make sure cards don't hide overflow */
#previous-trainings > div,
#training-list > .training-card,
#training-list > div {
  overflow: visible;
}
/* ---------- Responsive headings & container fix ---------- */

/* prevent horizontal overflow on small screens */
html,body { overflow-x: hidden; }

/* responsive H1: scale down on small screens */
h1, .title {
  /* min 1.25rem, preferred based on viewport width, max 2rem */
  font-size: clamp(1.25rem, 4.5vw, 2rem);
  line-height: 1.05;
  text-align: center;
  margin: 0;
}

/* make container responsive and avoid overflow from large padding */
.container {
  padding-left: 16px;
  padding-right: 16px;
  max-width: var(--max-width);
  width: 100%;
  box-sizing: border-box;
}

/* header layout on very small screens */
header, .page-header {
  gap: 8px;
}
header > div:first-child, header > div:last-child {
  width:100%;
}

/* Ensure form/button rows wrap and don't overflow */
.field.full > div, .field > div {
  flex-wrap: wrap;
}

/* lightbox modal (hidden by default) */
.lightbox-backdrop{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.7);
  z-index:120000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
}
.lightbox-content{
  max-width:min(96vw,1200px);
  max-height:96vh;
  overflow:auto;
  border-radius:10px;
  box-shadow:0 20px 60px rgba(0,0,0,0.5);
  background:transparent;
  display:flex;
  align-items:center;
  justify-content:center;
}
.lightbox-content img{
  display:block;
  width:auto;
  max-width:100%;
  height:auto;
  max-height:90vh;
  border-radius:8px;
  box-shadow:0 10px 30px rgba(0,0,0,0.4);
}

/* small "close" hint (top-right) */
.lightbox-close {
  position:fixed;
  top:14px;
  right:14px;
  z-index:120010;
  background:rgba(255,255,255,0.92);
  border-radius:999px;
  padding:6px 10px;
  font-weight:700;
  color:#111;
  box-shadow:0 6px 18px rgba(0,0,0,0.2);
  cursor:pointer;
}

/* clickable cursor for images so user knows they can open */
.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;
}

/* slightly larger images on small screens while preserving container layout */
@media (max-width:420px){
  .lightbox-content{ padding:6px; }
  .lightbox-backdrop{ padding:10px; }
}
/* Robust lightbox styles (replace previous lightbox CSS if present) */
.lightbox-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.75);
  z-index: 2147483000; /* very high */
  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; /* allow full image */
}

.lightbox-img {
  display: block;
  max-width: 100%;
  max-height: 90vh;
  height: auto;
  width: auto;
  object-fit: contain;    /* show full image, no cropping */
  border-radius: 6px;
  box-shadow: 0 16px 50px rgba(0,0,0,0.6);
  background: #fff;       /* helps show images with transparency */
}

/* close button inside overlay for reliable clicks */
.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;
}

/* loading spinner area */
.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); } }

/* clickable hint */
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;
}

/* slightly larger images on small screens while preserving container layout */
@media (max-width:420px){
  .lightbox-content{ padding:6px; }
  .lightbox-backdrop{ padding:10px; }
}

/* small "polish" responsive */
@media (max-width:420px){
  body{ padding:12px; }
  .container{ padding:12px; }
  .title, h1{ text-align:center; }
}
/* Ensure all preview and revisit images fit mobile box */
#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;
}
/* camera area */
#video{
  width:100%;
  border-radius:8px;
  background:#f0fbf2;
  object-fit:cover;
  border:1px solid rgba(10,20,40,0.04);

  /* NEW: keep camera short so buttons appear without scroll */
  aspect-ratio: 4 / 3;     /* prevents super-tall preview */
  max-height: 220px;       /* was 320px */
}

/* even smaller phones */
@media (max-width:480px){
  #video{ max-height: 200px; }
}
.camera-controls{
  display:flex;gap:10px;flex-wrap:wrap;
  position: sticky;      /* NEW */
  bottom: 0;             /* NEW */
  background: var(--group-bg);
  padding:8px 0;
  z-index: 5;
}
/* ===== Mobile polish overrides (≤ 600px) ===== */
@media (max-width:600px){
  /* header ko 2-column grid: left = title, right = buttons (check-in/out + logout) */
  .topbar{
    display:grid !important;
    grid-template-columns: 1fr auto;
    align-items:center;
    gap:8px;
    margin:4px 0 10px 0;
  }
  .topbar > div:first-child{ min-width:0; } /* title side */
  .topbar > div:last-child{ 
    justify-self:end; 
    display:flex; 
    gap:6px; 
    flex-wrap:nowrap; 
  }

  /* title chhota & tight */
  h1.title{
    font-size: clamp(1.1rem, 4vw, 1.4rem) !important;
    line-height:1.1;
    margin:0;
  }

  /* mini attendance + logout = small pill buttons */
  .topbar .btn,
  .btn-logout{
    padding:6px 10px !important;
    font-size: .9rem !important;
    border-radius:999px !important;
    box-shadow:none;
  }
  .btn-logout{ margin-left:4px; }

  /* “House Visited” chips ko compact pill banao */
  .visit-stats{ gap:6px; margin-top:6px; }
  .visit-stat{
    padding:4px 8px;
    border-radius:999px;
    font-size:.8rem;
    box-shadow:none;
  }
  .visit-stat .label{ display:none; }          /* sirf number dikhana ho to */
  /* Agar label bhi chahiye, upar wali line hata dena */

  /* ULB badge ko single-line chip jaisa */
  .assignment-badge{
    padding:6px 8px;
    margin:8px 0;
    border-radius:999px;
    box-shadow:none;
  }
  .assignment-badge .chip{
    padding:4px 8px;
    font-size:.8rem;
    background:#fff;
  }

  /* form spacing smaller */
  .container{ padding:12px; }
  .col-grid{ gap:10px; }
  .group-bg{ padding:10px; border-radius:10px; }
  input[type="text"],input[type="email"],input[type="tel"],
  input[type="date"],input[type="time"],select,textarea{
    padding:10px 12px;
    font-size:.95rem;
  }

  /* camera preview height chhota so buttons visible */
  #video{
    max-height: 200px;     /* was larger */
    aspect-ratio: 4 / 3;
    object-fit: cover;
  }
  .camera-controls{
    gap:8px;
    position: sticky;      /* buttons visible without scroll */
    bottom: 0;
    background: var(--group-bg);
    padding-top:6px;
  }

  /* action button full width but not bulky */
  .actions{ margin-top:6px; }
  .btn.large{
    width:100%;
    padding:12px 18px;
    font-size:1rem;
    border-radius:12px;
  }
}

/* Slightly lighter disabled state for clarity */
.btn[disabled]{ 
  background:#e5e7eb !important; 
  border-color:#e5e7eb !important; 
  color:#6b7280 !important; 
}

/* Tighter default spacing on all screens */
.title{ margin-bottom:2px; }
.now{ font-size:.9rem; color:#6b7280; }

/* ✅ Perfect responsive layout (mobile = same as laptop but tighter) */
@media (max-width: 720px) {

  /* --------- overall container --------- */
  .container {
    padding: 14px;
    border-radius: 12px;
  }

  /* --------- topbar = title + buttons on one line --------- */
  .topbar {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
  }

  /* --------- title and who info --------- */
  .title {
    font-size: clamp(1.3rem, 5vw, 1.6rem);
    color: var(--gov-blue);
    font-weight: 800;
    margin: 0;
    flex: 1 1 auto;
  }

  .who {
    margin-top: 4px;
    line-height: 1.3;
  }

  .who .name {
    font-weight: 700;
    font-size: 1rem;
  }

  .now {
    font-size: 0.9rem;
    color: #6b7280;
  }

  /* --------- buttons (checkin / checkout / logout) --------- */
  .topbar > div:last-child {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
  }

  .btn, .btn-logout {
    padding: 6px 14px;
    font-size: 0.9rem;
    border-radius: 999px;
    font-weight: 600;
    white-space: nowrap;
  }

  .btn-logout {
    background: #ef4444;
    border: 1px solid #ef4444;
    color: #fff;
  }

  .btn-logout:hover {
    background: #dc2626;
  }

/* ✅ Final polish: Laptop & Mobile both identical layout with clean visit boxes */
@media (max-width: 720px) {

  .container {
    padding: 14px;
    border-radius: 12px;
  }

  /* Header topbar: title left, buttons right */
  .topbar {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
  }

  .title {
    font-size: clamp(1.3rem, 5vw, 1.6rem);
    color: var(--gov-blue);
    font-weight: 800;
    margin: 0;
  }

  .who {
    margin-top: 4px;
    line-height: 1.3;
  }
  .who .name { font-weight: 700; font-size: 1rem; }
  .now { font-size: 0.9rem; color: #6b7280; }

  /* Buttons */
  .topbar > div:last-child {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
  }
  .btn, .btn-logout {
    padding: 6px 14px;
    font-size: 0.9rem;
    border-radius: 999px;
    font-weight: 600;
  }
  .btn-logout {
    background: #ef4444;
    border: 1px solid #ef4444;
    color: #fff;
  }

  /* ✅ Visit stats exactly like laptop (labels + numbers in grey/black) */
  .visit-stats {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
    flex-wrap: wrap;
  }

  .visit-stat {
    display: flex;
    align-items: center;
    gap: 6px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    padding: 8px 12px;
    font-size: 0.9rem;
    box-shadow: 0 2px 6px rgba(0,0,0,0.03);
  }

  .visit-stat .label {
    color: #374151;              /* dark grey like laptop */
    font-weight: 500;
  }

  .visit-stat .value {
    color: #111827;              /* black, not green */
    font-weight: 700;
  }

  /* Assignment chip */
  .assignment-badge {
    margin-top: 10px;
    padding: 6px 10px;
    border-radius: 999px;
    justify-content: flex-start;
  }
  .assignment-badge .chip {
    font-size: 0.85rem;
    padding: 4px 10px;
  }

  /* Camera preview */
  #video {
    max-height: 230px;
    aspect-ratio: 4/3;
    border-radius: 8px;
    object-fit: cover;
  }

  .camera-controls {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 6px;
  }

  /* Save button */
  .actions-center .btn.large {
    width: 100%;
    padding: 12px;
    font-size: 1rem;
    border-radius: 10px;
  }
}
/* force labels to show on mobile too */
.visit-stat .label{
  display: inline-block !important;
  color: #374151;        /* same as laptop */
  font-weight: 500;
  margin-right: 6px;
}
.visit-stat .value{
  color:#111827 !important;  /* black number */
  font-weight:700;
}



