.auth-viewport {
  min-height: calc(100vh - var(--header-h));
  display: block;
  padding: 2rem; /* keep some gutter */
  width: 100%;
}

.auth-container {
  width: 100%;
  max-width: none;
  margin: 0;
}

.auth-card {
  background: var(--card);
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(2, 6, 23, 0.06), inset 6px 0 0 0 var(--accent);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 0;
  width: 100%;
}

.auth-card-narrow {
  max-width: min(700px, 100%);
  margin-left: auto;
  margin-right: auto;
}

.auth-card h1 {
  margin-top: 0;
  font-size: 1.5rem;
  color: #0b1720;
}

.auth-card p {
  color: var(--muted);
  margin-bottom: 0.5rem;
}

/* Reduce vertical spacing for 'lead' paragraphs used in auth/dashboard */
.lead {
  margin-top: 0.25rem;
  margin-bottom: 0.5rem;
  font-size: 1rem;
  color: var(--muted);
}

.apply-form .checkbox-inline input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0 0.75rem 0 0;
  vertical-align: middle;
}

.alt-links {
  margin-top: 0.75rem;
  font-size: 0.95rem;
}

.auth-actions {
  display: flex;
  flex-direction: row;
  gap: 0.5rem;
  align-items: center;
}

.auth-actions .btn {
  min-width: 140px;
  text-align: center;
}

.auth-actions .btn-secondary {
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.06);
  color: var(--accent);
  box-shadow: none;
}

.auth-actions + .alt-links {
  margin-top: 1rem;
}

.alt-links {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: flex-start;
  margin-top: 1rem;
}

.alt-links a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
}

.alt-links a:hover {
  color: var(--accent-2);
}

a {
  color: inherit;
  text-decoration: none;
}

.apply-form {
  text-align: left;
}

.apply-form .checkbox-inline {
  display: block;
  width: 100%;
  margin: 0.5rem 0;
  cursor: pointer;
}

.apply-form .checkbox-inline input[type="checkbox"] {
  vertical-align: middle;
  margin-right: 0.75rem;
  flex: 0 0 auto;
}

.apply-form .checkbox-inline .checkbox-text {
  display: inline-block;
  vertical-align: middle;
  max-width: calc(100% - 48px);
  word-break: break-word;
}

.apply-form .field-error {
  color: #b91c1c;
  font-size: 0.875rem;
  margin-top: -0.35rem;
}

.apply-form .form-success {
  color: var(--accent);
  font-weight: 600;
  margin-top: 0.75rem;
}

/* Styled file input: hide native input and show a nice button + filename */
.file-input-wrap {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}
.file-input-wrap input[type="file"] {
  position: relative;
  z-index: 2;
  opacity: 0; /* hide native control */
  width: 120px;
  height: 38px;
  cursor: pointer;
}
.btn-file {
  display: inline-block;
  background: linear-gradient(180deg, var(--accent) 0%, var(--accent-2) 100%);
  color: #fff;
  padding: 0.5rem 0.9rem;
  border-radius: 6px;
  font-weight: 600;
  box-shadow: 0 6px 14px rgba(11, 23, 36, 0.12);
  cursor: pointer;
  transition: transform 120ms ease, box-shadow 120ms ease;
  user-select: none;
}
.btn-file:hover{ transform: translateY(-1px); }
.file-name{
  font-size: 0.95rem;
  color: var(--muted);
  max-width: 320px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Media queries moved to bottom by clean_css.py */
@media (max-width: 900px) {
  .auth-container {
    padding: 0 1rem;
    width: 100%;
    max-width: 720px;
  }

  .auth-card {
    padding: 1.25rem;
  }

  .auth-actions {
    flex-direction: column;
    align-items: center;
  }

  .auth-actions .btn {
    width: 100%;
  }

  .auth-actions .btn + .btn {
    margin-top: 0.5rem;
  }

  .auth-card h1,
  .auth-card p {
    text-align: center;
  }

  .alt-links {
    align-items: center;
    text-align: center;
  }
}

@media (max-width: 420px) {
  .apply-form .checkbox-inline {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
  }

  .apply-form .checkbox-inline input[type="checkbox"] {
    margin-right: 0;
  }

  .apply-form .checkbox-inline .checkbox-text {
    max-width: 100%;
  }
}

/* Dashboard / table improvements */
.table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table { width: 100%; border-collapse: separate; border-spacing: 0; margin-top: 0.75rem; min-width: 640px; }
.table th, .table td { padding: 0.6rem 0.75rem; text-align: left; border-bottom: 1px solid rgba(15,23,42,0.06); }
.table th:nth-child(3), .table td:nth-child(3) { text-align: center; vertical-align: middle; }
.table thead { display: table-header-group; }
.table thead th { font-weight: 700; font-size: 0.95rem; color: #0b1720; background: var(--card); box-shadow: 0 4px 8px rgba(11,23,36,0.04); }
.table tbody tr:hover { background: rgba(11,23,36,0.02); }

.table td > div[style*="display:flex"] { justify-content: center; }

.status-badge { display: inline-block; padding: 0.25rem 0.5rem; border-radius: 999px; font-weight: 700; font-size: 0.85rem; }
.status-awaiting { background: #fff4e6; color: #7a4a00; }
.status-in_progress { background: #e6f6ff; color: #0b5ea8; }
.status-approved { background: #ecfdf5; color: #05603a; }
.status-declined { background: #fff1f2; color: #9f1239; }

/* Paid bag badge */
.paid-badge {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 0.18rem 0.45rem;
  border-radius: 6px;
  background: #fff1f0;
  color: #9f1239;
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
}

.bag-count {
  white-space: nowrap;
}

.action-link { color: var(--accent); font-weight: 600; }
.action-link:hover { text-decoration: underline; }

/* Clickable applicant name in staff dashboard */
.citizen-link {
  color: #0b5ea8; /* blue */
  font-weight: 700;
  text-decoration: underline;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
}
.citizen-link:hover { color: #084c7a; }
.citizen-link:focus {
  outline: none;
  box-shadow: 0 0 0 4px rgba(11,94,168,0.10);
  border-radius: 4px;
}

#citizenModalBody {
  flex-direction: column;
  gap: 0rem !important;
}

/* Make dashboard card slightly roomier for table */
.auth-card .table { margin-top: 1rem; }

@media (max-width: 720px) {
  .table th:nth-child(4), .table td:nth-child(4) { display: none; } /* hide bag_count on small */
}

/* At <=700px: center headings and buttons for a more compact mobile layout */
@media (max-width: 700px) {
  .auth-card h1,
  .auth-card h2,
  .auth-card .lead {
    text-align: center;
  }

  /* Make standalone buttons center in their containers */
  .auth-card .btn,
  .auth-card .btn-primary,
  .auth-card .btn-secondary,
  .pagination-controls .btn,
  .pagination-controls span.btn,
  .pagination-controls .page-jump__btn {
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
  }

  /* Ensure flex groups center their items */
  .auth-actions,
  .pagination-controls {
    justify-content: center;
    text-align: center;
  }
}

.pagination { display:flex; gap:0.5rem; align-items:center; justify-content:center; }
.pagination .btn { padding: 0.45rem 0.7rem; border-radius:6px; }
.btn-secondary { background: #f3f4f6; color: #0b1720; }

/* Make all pagination controls a uniform gray */
.pagination-controls .btn, .pagination-controls span.btn, .pagination-controls .page-jump__btn {
  background: #e6e6e6;
  color: #0b1720;
  border: none;
  box-shadow: none;
  padding: 0.32rem 0.5rem;
  font-size: 0.88rem;
  border-radius: 6px;
}
.pagination-controls .btn:hover { background: #d5d5d5; }

/* Layout: center pagination row, place page-jump below centered */
.pagination-controls{
  display: block;
  text-align: center;
  margin-top: 1rem;
}
.pagination-controls .btn, .pagination-controls span.btn{
  display: inline-block;
  margin: 0 0.35rem;
}
.pagination-controls .page-jump{
  display: block;
  margin-top: 0.6rem;
  text-align: center;
}

/* Page-jump control: align sizing and appearance with pagination buttons */
.page-jump { display:inline-flex; align-items:center; gap:0.45rem; }
.page-jump__label { font-size:0.95rem; color:var(--muted); }
.page-jump__input { width:4.2rem; padding:0.45rem 0.6rem; border-radius:6px; border:1px solid rgba(15,23,42,0.06); text-align:center; font-size:0.95rem; }
/* make the page-jump button visually match the pagination gray buttons */
.pagination-controls .page-jump__btn {
  padding: 0.45rem 0.7rem;
  border-radius: 6px;
  background: #e6e6e6;
  color: #0b1720;
  border: none;
  box-shadow: none;
  font-weight: 600;
  cursor: pointer;
}
.pagination-controls .page-jump__btn:hover { background: #d5d5d5; }
.pagination-controls .page-jump__btn:active { transform: translateY(1px); }

/* small utility button */
.btn-sm { padding: 0.28rem 0.45rem; font-size: 0.85rem; border-radius: 6px; min-width: auto; }

/* Modal viewer for attachment previews (images & PDFs) */
.media-modal { display: none; position: fixed; inset: 0; background: rgba(2,6,23,0.6); z-index: 1200; align-items: center; justify-content: center; padding: 1.25rem; }
.media-modal.is-open { display: flex; }
.media-modal__dialog { background: var(--card); border-radius: 8px; max-width: 1100px; width: 100%; max-height: 92vh; overflow: hidden; box-shadow: 0 20px 50px rgba(2,6,23,0.5); display:flex; flex-direction:column; }
.media-modal__header { display:flex; align-items:center; justify-content:space-between; padding: 0.75rem 1rem; border-bottom: 1px solid rgba(15,23,42,0.04); }
.media-modal__title { font-weight:700; color: #0b1720; }
.media-modal__close { background: transparent; border: none; font-size: 1.25rem; cursor: pointer; color: var(--muted); }
.media-modal__body { padding: 0.5rem; display:flex; flex:1 1 auto; align-items:center; justify-content:center; overflow:auto; }
.media-modal__body img { max-width:100%; height:auto; display:block; border-radius:6px; }
.media-modal__body iframe { width:100%; height:80vh; border:0; }
.media-modal__actions { padding: 0.75rem 1rem; border-top: 1px solid rgba(15,23,42,0.04); display:flex; gap:0.5rem; justify-content:flex-end; }

@media (max-width: 720px) {
  .media-modal__dialog { max-width: 100%; height: 94vh; }
  .media-modal__body iframe { height: 70vh; }
}