/* ============================================================
   FLHA TOOL — STYLES
   Mobile-first. Tap targets min 48px. No horizontal scroll.
   ============================================================ */

/* --- Reset & Base ----------------------------------------- */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --orange:       #FF6B00;
  --orange-dark:  #D95800;
  --orange-light: #FFF3E8;
  --navy:         #1A1A2E;
  --gray-100:     #F5F5F7;
  --gray-200:     #E8E8EC;
  --gray-400:     #ABABBA;
  --gray-600:     #6B6B80;
  --gray-900:     #1C1C28;
  --white:        #FFFFFF;
  --success:      #1A9E55;
  --success-bg:   #E8F7EF;
  --error:        #CC2020;
  --error-bg:     #FDECEA;
  --warn:         #D97706;
  --warn-bg:      #FFFBEB;
  --risk-low:     #1A9E55;
  --risk-medium:  #D97706;
  --risk-high:    #CC2020;
  --radius:       10px;
  --radius-sm:    6px;
  --shadow:       0 2px 12px rgba(0,0,0,0.08);
  --shadow-lg:    0 4px 24px rgba(0,0,0,0.12);
  --transition:   0.18s ease;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  background: var(--gray-100);
  color: var(--gray-900);
  line-height: 1.5;
  min-height: 100vh;
}

/* --- Screens ---------------------------------------------- */

.screen {
  min-height: 100vh;
}

.screen.hidden { display: none; }
.screen.active { display: block; }

/* --- Login / credential screens --------------------------- */

#login-screen,
#setcred-screen,
#forgot-screen,
#notconfigured-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--navy);
  padding: 24px 16px;
}

.notconfigured-msg {
  margin-top: 8px;
  font-size: 0.95rem;
  color: var(--gray-600);
  line-height: 1.5;
  text-align: center;
}

/* Helper text on the set-PIN / forgot screens. */
.setcred-hint {
  margin: 0 0 4px;
  font-size: 0.9rem;
  color: var(--gray-600);
  line-height: 1.45;
  text-align: center;
}

.passcode-card {
  background: var(--white);
  border-radius: 16px;
  padding: 40px 32px;
  width: 100%;
  max-width: 380px;
  box-shadow: var(--shadow-lg);
  text-align: center;
}

.brand-mark {
  margin-bottom: 32px;
}


.brand-name {
  font-size: 2rem;
  font-weight: 800;
  color: var(--navy);
  letter-spacing: -0.5px;
}

.brand-sub {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--gray-600);
  margin-top: 6px;
  letter-spacing: 0.3px;
}

/* Logo image — replaces company name text when /logos/{slug}.png exists */
.brand-sub .tenant-logo {
  max-height: 48px;
  max-width: 200px;
  object-fit: contain;
  display: block;
  margin: 0 auto 6px;
}
.header-company .tenant-logo {
  max-height: 24px;
  max-width: 120px;
  object-fit: contain;
  vertical-align: middle;
}
/* Admin login screen logo */
.brand-name .tenant-logo {
  max-height: 40px;
  max-width: 180px;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}

.brand-byline {
  margin-top: 20px;
  font-size: 0.78rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.3);
  letter-spacing: 0.5px;
  text-align: center;
}

/* Product version — subtle, fixed bottom-right corner, never blocks taps */
.app-version {
  position: fixed;
  bottom: 8px;
  right: 10px;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--gray-400);
  letter-spacing: 0.5px;
  opacity: 0.7;
  pointer-events: none;
  z-index: 50;
}

.passcode-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.passcode-label {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--gray-900);
  text-align: left;
}

/* Extra top spacing between the worker-ID block and the passcode block. */
.passcode-label--spaced {
  margin-top: 6px;
}

/* A form field auto-filled from a verified identity and locked from editing. */
.locked-field {
  background: var(--gray-100);
  color: var(--gray-600);
  cursor: not-allowed;
}

.passcode-input {
  width: 100%;
  padding: 14px 16px;
  border: 2px solid var(--gray-200);
  border-radius: var(--radius-sm);
  font-size: 1.1rem;
  text-align: center;
  letter-spacing: 0.05em;
  outline: none;
  transition: border-color var(--transition);
}

.passcode-input:focus {
  border-color: var(--orange);
}

/* Show/hide password toggle wrapper */
.pw-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

/* Reserve space for the absolutely-positioned toggle (44px wide) on the right,
   mirrored on the left so the centered text/placeholder stays centered and is
   never clipped underneath the button. */
.pw-wrap .passcode-input {
  padding-left: 44px;
  padding-right: 44px;
}

.pw-toggle {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--orange-light);
  border: 1px solid transparent;
  border-left: 1px solid var(--gray-200);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  cursor: pointer;
  color: var(--orange-dark);
  padding: 0;
  transition: color var(--transition), background var(--transition), border-color var(--transition);
}

.pw-toggle:hover {
  background: #fde8d4;
  color: var(--orange-dark);
}

/* When the input is focused, extend its orange outline around the toggle so the
   border reads as continuous (the button overlays the input's right edge). The
   gray left edge stays as the seam between the field and the button. */
.pw-wrap .passcode-input:focus + .pw-toggle {
  border-top-color: var(--orange);
  border-right-color: var(--orange);
  border-bottom-color: var(--orange);
}

/* On narrow phones the long centered placeholder ("Enter your PIN or password")
   overflows its padded box and tucks under the toggle. Shrink the type, tighten
   the letter-spacing, and narrow the button + reserved padding so it fits. */
@media (max-width: 480px) {
  .passcode-input { font-size: 1rem; letter-spacing: 0.02em; }
  .pw-wrap .passcode-input { padding-left: 40px; padding-right: 40px; }
  .pw-toggle { width: 40px; }
}

.pw-toggle svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

/* --- Role picker ------------------------------------------ */

.role-options {
  display: flex;
  gap: 16px;
  margin-top: 8px;
}

.role-option-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 24px 16px;
  background: var(--gray-100);
  border: 2px solid var(--gray-200);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
  -webkit-tap-highlight-color: transparent;
}

.role-option-btn:hover,
.role-option-btn:focus-visible {
  border-color: var(--orange);
  background: var(--orange-light);
  outline: none;
}

.role-option-icon {
  font-size: 2rem;
  line-height: 1;
}

.role-option-label {
  font-size: 1rem;
  font-weight: 700;
  color: var(--gray-900);
  letter-spacing: 0.01em;
}

.passcode-back-link {
  background: none;
  border: none;
  color: var(--gray-600);
  font-size: 0.85rem;
  cursor: pointer;
  padding: 4px 0;
  text-align: center;
  margin-top: 4px;
}
.passcode-back-link:hover { color: var(--gray-900); }

/* --- Buttons ---------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 14px 20px;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition), transform var(--transition), opacity var(--transition);
  min-height: 48px;
  text-decoration: none;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}

.btn:active {
  transform: scale(0.97);
}

.btn-primary {
  background: var(--orange);
  color: var(--white);
}

.btn-primary:hover {
  background: var(--orange-dark);
}

.btn-sending,
.btn-sending:hover {
  background: var(--gray-400);
  cursor: not-allowed;
  transform: none;
}

.btn-secondary {
  background: var(--white);
  color: var(--orange);
  border: 2px solid var(--orange);
}

.btn-secondary:hover {
  background: var(--orange-light);
}

.btn-ghost {
  background: transparent;
  color: var(--error);
  border: 1px solid var(--gray-200);
  font-size: 0.85rem;
  padding: 8px 12px;
  min-height: 36px;
}

.btn-ghost:hover {
  background: var(--error-bg);
  border-color: var(--error);
}

.btn-full {
  width: 100%;
}

.btn-large {
  padding: 18px 24px;
  font-size: 1.05rem;
  min-height: 56px;
}

.btn-add {
  margin-top: 12px;
  font-size: 0.9rem;
  padding: 10px 16px;
  min-height: 44px;
}

/* --- App Header ------------------------------------------- */

.app-header {
  background: var(--navy);
  color: var(--white);
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.header-inner {
  max-width: 720px;
  margin: 0 auto;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;        /* allow the company name to shrink/ellipsis instead of overflowing */
}

/* Compact "Home" button that reads on the dark navy header. */
.home-btn {
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--white);
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: var(--radius-sm);
  padding: 7px 11px;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;        /* the button keeps its size; the company name yields first */
  transition: background var(--transition), border-color var(--transition);
}

/* Secondary account action on the worker home screen. Change PIN is a rare
   workflow, so it lives here as a quiet link under the tool cards rather than
   taking a permanent slot in the top bar. */
.home-settings {
  margin-top: 2rem;
  text-align: center;
}
.home-settings-link {
  font-family: inherit;
  font-size: 0.85rem;
  color: var(--gray-600);
  background: none;
  border: none;
  padding: 6px 10px;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--transition);
}
.home-settings-link:hover { color: var(--gray-900); }
.home-btn:hover  { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.6); }
.home-btn:active { background: rgba(255, 255, 255, 0.2); }

.header-brand {
  font-weight: 800;
  font-size: 1.1rem;
  letter-spacing: 0.5px;
  color: var(--orange);
}

.header-company {
  font-size: 0.8rem;
  color: var(--gray-400);
  text-align: right;
  min-width: 0;
  flex: 0 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --- Queue Banner ----------------------------------------- */

.queue-banner {
  background: #FFFBEB;
  border-bottom: 2px solid var(--warn);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--warn);
}

.queue-retry-btn {
  background: var(--warn);
  color: var(--white);
  border: none;
  border-radius: var(--radius-sm);
  padding: 6px 14px;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  min-height: 32px;
}

.queue-retry-btn:hover {
  opacity: 0.9;
}

/* Draft restore banner — informational (navy/orange), not a warning */
.draft-banner {
  background: var(--orange-light);
  border-bottom-color: var(--orange);
  color: var(--orange-dark);
}

.draft-banner-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.draft-banner .queue-retry-btn {
  background: var(--orange);
}

.draft-banner .draft-dismiss {
  background: transparent;
  color: var(--orange-dark);
  border: 1.5px solid var(--orange);
}

/* --- Form Main -------------------------------------------- */

.form-main {
  max-width: 720px;
  margin: 0 auto;
  padding: 24px 16px 48px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.form-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--gray-900);
}

/* --- Cards ------------------------------------------------ */

.card {
  background: var(--white);
  border-radius: var(--radius);
  padding: 24px 20px;
  box-shadow: var(--shadow);
}

.card-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--orange-light);
}

/* --- Field Groups ----------------------------------------- */

.field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

@media (max-width: 480px) {
  .field-grid {
    grid-template-columns: 1fr;
  }
}

.field-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.field-group.full-width {
  grid-column: 1 / -1;
}

label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--gray-600);
  letter-spacing: 0.2px;
}

.req {
  color: var(--error);
}

.optional {
  color: var(--gray-400);
  font-weight: 400;
  font-size: 0.8rem;
}

input[type="text"],
input[type="date"],
input[type="password"],
input[type="tel"],
input[type="email"],
select,
textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius-sm);
  font-size: 1rem;
  font-family: inherit;
  color: var(--gray-900);
  background: var(--white);
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition);
  -webkit-appearance: none;
  appearance: none;
  min-height: 48px;
}

input[type="text"]:focus,
input[type="date"]:focus,
input[type="password"]:focus,
input[type="tel"]:focus,
input[type="email"]:focus,
select:focus,
textarea:focus {
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(255, 107, 0, 0.12);
}

input.has-error,
select.has-error,
textarea.has-error {
  border-color: var(--error);
  box-shadow: 0 0 0 3px rgba(204, 32, 32, 0.08);
}

textarea {
  resize: vertical;
  min-height: 80px;
  line-height: 1.5;
}

select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236B6B80' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 40px;
  cursor: pointer;
}

.field-error {
  font-size: 0.8rem;
  color: var(--error);
  min-height: 1em;
  display: block;
}

.section-note {
  font-size: 0.85rem;
  color: var(--gray-600);
  margin-bottom: 16px;
  line-height: 1.6;
}

/* --- PPE Checklist ---------------------------------------- */

.ppe-group-label {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--gray-600);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 10px;
}

.ppe-group-label--additional {
  margin-top: 18px;
}

.ppe-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ppe-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 14px;
  border: 1.5px solid var(--gray-200);
  border-radius: 24px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--gray-600);
  background: var(--white);
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
  min-height: 40px;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.ppe-chip:hover {
  border-color: var(--orange);
  color: var(--orange);
}

.ppe-chip.checked {
  background: var(--orange);
  border-color: var(--orange);
  color: var(--white);
  font-weight: 600;
}

.ppe-chip.checked:hover {
  background: var(--orange-dark);
  border-color: var(--orange-dark);
  color: var(--white);
}

.ppe-other-wrap  { margin-top: 8px; width: 100%; }
.ppe-other-input {
  width: 100%; padding: 9px 12px;
  border: 1.5px solid var(--gray-200); border-radius: var(--radius-sm);
  font-size: 0.9rem; color: var(--gray-900); background: var(--white);
  outline: none; transition: border-color var(--transition);
}
.ppe-other-input:focus { border-color: var(--orange); }

/* --- Task Rows -------------------------------------------- */

.task-row {
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius-sm);
  padding: 16px;
  margin-bottom: 16px;
  background: var(--gray-100);
  position: relative;
}

.task-row-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  gap: 8px;
}

.task-row-label {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--orange);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

.task-fields {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.risk-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.risk-badge.Low    { background: #E8F7EF; color: var(--risk-low); }
.risk-badge.Medium { background: #FFFBEB; color: var(--risk-medium); }
.risk-badge.High   { background: #FDECEA; color: var(--risk-high); }

select.risk-select.Low    { border-color: var(--risk-low);    color: var(--risk-low);    font-weight: 600; }
select.risk-select.Medium { border-color: var(--risk-medium); color: var(--risk-medium); font-weight: 600; }
select.risk-select.High   { border-color: var(--risk-high);   color: var(--risk-high);   font-weight: 600; }

/* --- Worker Rows ------------------------------------------ */

.worker-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.worker-row input {
  flex: 1;
}

.worker-num {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--gray-400);
  min-width: 24px;
  text-align: right;
}

/* --- Error & Status ---------------------------------------- */

.error-inline {
  color: var(--error);
  font-size: 0.85rem;
  padding: 10px 14px;
  background: var(--error-bg);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--error);
}

.error-banner {
  padding: 14px 16px;
  background: var(--error-bg);
  border: 1px solid var(--error);
  border-radius: var(--radius-sm);
  color: var(--error);
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 12px;
}

.hidden { display: none !important; }

/* --- Submit Area ------------------------------------------ */

.submit-area {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 4px;
}

/* --- Success Screen --------------------------------------- */

#success-screen {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gray-100);
  padding: 24px 16px;
}

.success-card {
  background: var(--white);
  border-radius: 16px;
  padding: 40px 32px;
  width: 100%;
  max-width: 420px;
  box-shadow: var(--shadow-lg);
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.success-icon {
  width: 72px;
  height: 72px;
  background: var(--success-bg);
  color: var(--success);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  font-weight: 700;
  margin: 0 auto;
}

.success-card h2 {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--gray-900);
}

.success-msg {
  color: var(--gray-600);
  font-size: 0.95rem;
}

.success-detail {
  font-size: 0.8rem;
  color: var(--gray-400);
  font-style: italic;
}

/* --- Loading Overlay -------------------------------------- */

#loading-overlay {
  position: fixed;
  inset: 0;
  background: rgba(26, 26, 46, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  backdrop-filter: blur(3px);
}

.loading-box {
  background: var(--white);
  border-radius: var(--radius);
  padding: 36px 40px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  box-shadow: var(--shadow-lg);
}

.loading-box p {
  color: var(--gray-600);
  font-size: 0.9rem;
  font-weight: 500;
}

.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid var(--gray-200);
  border-top-color: var(--orange);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* --- Additional Forms (accordion) ------------------------ */

.extra-form {
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius-sm);
  margin-bottom: 14px;
  background: var(--gray-100);
  overflow: hidden;
}

.extra-form:last-child {
  margin-bottom: 0;
}

.extra-form.included {
  border-color: var(--orange);
  background: var(--white);
}

.extra-form-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
}

.extra-form-name {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--navy);
}

.extra-form-toggle {
  flex-shrink: 0;
  font-size: 0.85rem;
  padding: 8px 16px;
  min-height: 40px;
}

.extra-form-body {
  display: none;
  padding: 0 16px 16px;
  flex-direction: column;
  gap: 18px;
}

.extra-form.included .extra-form-body {
  display: flex;
}

.extra-form-section-title {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--orange);
  margin-bottom: 10px;
}

/* --- Pass / Fail / N-A checklist -------------------------- */

.checklist-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--gray-200);
}

.checklist-row:last-child {
  border-bottom: none;
}

.checklist-label {
  font-size: 0.9rem;
  color: var(--gray-900);
}

.checklist-options {
  display: inline-flex;
  gap: 4px;
  flex-shrink: 0;
}

.checklist-btn {
  border: 1.5px solid var(--gray-200);
  border-radius: 20px;
  padding: 6px 12px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--gray-600);
  background: var(--white);
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
  min-height: 36px;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.checklist-btn.sel-pass {
  background: var(--success);
  border-color: var(--success);
  color: var(--white);
}

.checklist-btn.sel-fail {
  background: var(--error);
  border-color: var(--error);
  color: var(--white);
}

.checklist-btn.sel-na {
  background: var(--gray-400);
  border-color: var(--gray-400);
  color: var(--white);
}

/* --- Utility ---------------------------------------------- */

@media (min-width: 600px) {
  .form-main {
    padding: 32px 24px 64px;
  }
  .card {
    padding: 28px 28px;
  }
}

/* --- Home Screen ------------------------------------------ */

.home-main {
  padding: 1.5rem 1rem 3rem;
  max-width: 600px;
  margin: 0 auto;
}

.home-greeting {
  font-size: 1.1rem;
  margin: 0 0 1.5rem;
  color: var(--gray-900);
}

.tools-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 1rem;
}

.tool-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  padding: 1.5rem 0.75rem;
  border-radius: var(--radius);
  border: 1px solid var(--gray-200);
  background: var(--white);
  box-shadow: var(--shadow);
  cursor: pointer;
  text-align: center;
  transition: box-shadow var(--transition), transform var(--transition);
  font-family: inherit;
}

.tool-card:hover  { box-shadow: var(--shadow-lg); }
.tool-card:active { transform: scale(0.97); }

.tool-card-icon {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 0.35rem 0.6rem;
  border-radius: var(--radius-sm);
  background: var(--orange);
  color: var(--white);
}

.tool-card-name {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--gray-900);
  line-height: 1.2;
}

/* --- Submission History ----------------------------------- */

.history-status {
  color: var(--gray-600);
  font-size: 0.9rem;
  padding: 1rem 0;
}
.history-status.hidden { display: none; }

.history-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.history-card {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 0.9rem 1rem;
  border-radius: var(--radius);
  border: 1px solid var(--gray-200);
  background: var(--white);
  box-shadow: var(--shadow);
}

.history-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.history-card-main { min-width: 0; flex: 1; }

.history-card-date {
  font-weight: 700;
  color: var(--gray-900);
  font-size: 0.95rem;
}
.history-card-site {
  color: var(--gray-900);
  font-size: 0.9rem;
  margin-top: 0.1rem;
}
.history-card-meta {
  color: var(--gray-600);
  font-size: 0.78rem;
  margin-top: 0.25rem;
}

.history-card-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

.history-open-btn {
  width: auto;
  padding: 0.45rem 1.1rem;
  font-size: 0.85rem;
}

.history-card-pdfs {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  border-top: 1px solid var(--gray-200);
  padding-top: 0.5rem;
}

.history-pdf-link {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--orange);
  text-decoration: none;
  padding: 0.25rem 0;
}
.history-pdf-link::before { content: '↓ '; }
.history-pdf-link:hover { text-decoration: underline; }

/* --- Pager (admin table + worker history) ----------------- */
.pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 16px;
  margin-top: 1rem;
}
.pager.hidden { display: none !important; }

.pager-nav {
  display: flex;
  align-items: center;
  gap: 10px;
}

.pager-btn {
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 0.85rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--gray-900);
  background: var(--white);
  border: 1px solid var(--gray-400);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
  -webkit-tap-highlight-color: transparent;
}
.pager-btn:hover:not(:disabled) { background: var(--gray-100); border-color: var(--gray-600); }
.pager-btn:disabled { opacity: 0.4; cursor: not-allowed; }

.pager-jump {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  color: var(--gray-600);
  white-space: nowrap;
}
/* The editable page number reads like the surrounding "Page … of …" text:
   same font/weight, no box, no spinners — just a subtle hover/focus hint. */
.pager-input {
  width: 1.9rem;
  padding: 0.05rem 0.15rem;
  border: 1px solid var(--gray-400);   /* always outlined so it's clearly typeable */
  background: var(--white);
  border-radius: var(--radius-sm);
  font: inherit;
  font-weight: 600;
  text-align: center;
  color: var(--gray-900);
  cursor: text;
  -moz-appearance: textfield;
  appearance: textfield;
}
.pager-input::-webkit-outer-spin-button,
.pager-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pager-input:hover { border-color: var(--gray-600); }
.pager-input:focus { outline: none; border-color: var(--orange); box-shadow: 0 0 0 1px var(--orange); }
.pager-total { font-weight: 600; color: var(--gray-900); }

/* Rows-per-page custom dropdown — inline label, classic chevron, opens down */
.pager-size {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--gray-600);
  white-space: nowrap;
}
.pager-dd {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 60px;
  padding: 0.4rem 0.6rem;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--gray-900);
  cursor: pointer;
  user-select: none;
}
.pager-dd:hover { border-color: var(--gray-400); }
.pager-dd:focus-visible { outline: none; border-color: var(--orange); }
.pager-dd-value { flex: 1; }
.pager-dd-arrow {
  width: 12px;
  height: 12px;
  color: var(--gray-600);
  transition: transform var(--transition);
}
.pager-dd.open .pager-dd-arrow { transform: rotate(180deg); }

.pager-dd-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  margin: 0;
  padding: 4px;
  list-style: none;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  z-index: 200;
  display: none;
}
.pager-dd.open .pager-dd-menu { display: block; }
/* Drop-up when there's no room below (pager sits at the page bottom) */
.pager-dd.up .pager-dd-menu { top: auto; bottom: calc(100% + 4px); }
.pager-dd-opt {
  padding: 0.4rem 0.5rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-weight: 500;
}
.pager-dd-opt:hover { background: var(--gray-100); }
.pager-dd-opt.selected { background: var(--orange-light); color: var(--orange-dark); font-weight: 700; }

/* Phone-only layout — desktop (> 560px) is unchanged. Stack the two clusters
   into centered rows: nav spread full-width, size control centered below. */
@media (max-width: 560px) {
  .pager { justify-content: center; gap: 14px; }
  .pager-nav  { width: 100%; justify-content: space-between; }
  .pager-size { width: 100%; justify-content: center; }
}