/* V23 responsive hardening: phone, tablet, desktop, safe areas, and true bottom footer. */

html {
  width: 100%;
  min-height: 100%;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

body > main {
  flex: 1 0 auto;
  min-width: 0;
}

body > .footer,
body > .metro-footer {
  flex: 0 0 auto;
  margin-top: auto !important;
}

/* Keep the footer at the bottom even on short employee pages. */
.employee-shell {
  min-height: 100vh !important;
  min-height: 100dvh !important;
}

.employee-shell .metro-footer {
  display: flex !important;
  width: 100%;
  min-height: 46px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px max(16px, env(safe-area-inset-left)) calc(12px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-right)) !important;
  margin-top: auto !important;
  font-size: 9px !important;
  line-height: 1.35;
}

/* Login page must share the viewport with the footer instead of pushing it below an extra 100vh. */
.metro-login-shell {
  flex: 1 0 auto;
  min-height: calc(100dvh - 48px) !important;
}

/* Universal overflow protection for server-rendered content. */
.page,
.wide-page,
.investigation-page,
.dashboard-page,
.review-page,
.employee-dashboard-page,
.employee-investigation-page,
.metro-login-shell,
.metro-login-access,
.metro-login-card,
.simple-report-form,
.simple-form-card,
.simple-section-head,
.simple-report-grid,
.simple-report-row,
.simple-field-cell,
.simple-input-row,
.simple-evidence-row,
.simple-submit-bar,
.capture-card,
.camera-dialog,
.replacement-dialog {
  min-width: 0;
  max-width: 100%;
}

input,
select,
textarea,
button {
  max-width: 100%;
}

img,
video,
canvas,
svg {
  max-width: 100%;
}

/* Employee form: use available width on larger screens without becoming excessively wide. */
.employee-investigation-page {
  width: min(1440px, calc(100% - 32px)) !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.employee-dashboard-page {
  width: min(1440px, calc(100% - 32px));
  margin-inline: auto;
  flex: 1 0 auto;
}

.simple-report-form,
.simple-form-card {
  width: 100%;
}

.simple-input-row > input,
.simple-input-row > select,
.simple-input-row > textarea {
  flex: 1 1 auto;
}

.simple-camera-button,
.simple-file-button,
.simple-upload-button,
.simple-draft-action,
.employee-new-case,
.employee-case-actions a,
.employee-case-actions button {
  touch-action: manipulation;
}

/* The sticky submit control must never hide the last form rows or footer. */
.simple-report-form {
  padding-bottom: 8px;
}

.simple-submit-bar {
  max-width: 100%;
}

/* Camera/replacement dialogs use dynamic viewport height and respect iPhone safe areas. */
.camera-modal,
.replacement-modal {
  overscroll-behavior: contain;
}

.camera-dialog,
.replacement-dialog {
  max-height: min(94vh, 94dvh);
}

.camera-dialog > header,
.camera-controls {
  padding-left: max(14px, env(safe-area-inset-left));
  padding-right: max(14px, env(safe-area-inset-right));
}

/* Tablet landscape / compact desktop. */
@media (max-width: 1100px) {
  .employee-investigation-page,
  .employee-dashboard-page {
    width: calc(100% - 24px) !important;
  }

  .employee-form-header {
    gap: 14px !important;
  }

  .simple-evidence-row {
    grid-template-columns: minmax(210px, 1fr) auto minmax(180px, .8fr) !important;
  }
}

/* Tablet portrait and large phones. */
@media (max-width: 900px) {
  .employee-investigation-page,
  .employee-dashboard-page {
    width: calc(100% - 20px) !important;
  }

  .employee-form-header {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .employee-form-head-actions {
    width: 100%;
    justify-content: flex-start !important;
  }

  .simple-report-row,
  .simple-notes-grid {
    grid-template-columns: 1fr !important;
  }

  .simple-report-row > .simple-field-cell:first-child,
  .simple-notes-grid > .simple-field-cell {
    border-right: 0 !important;
  }

  .simple-report-row > .simple-field-cell:first-child {
    border-bottom: 1px solid #edf1f4 !important;
  }

  .simple-notes-grid > .simple-field-cell:nth-child(3) {
    grid-column: auto !important;
  }

  .simple-evidence-row {
    grid-template-columns: minmax(0, 1fr) auto !important;
  }

  .simple-evidence-previews {
    grid-column: 1 / -1 !important;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
  }

  .simple-submit-bar {
    bottom: calc(76px + env(safe-area-inset-bottom)) !important;
  }
}

/* Phones. */
@media (max-width: 760px) {
  body {
    padding-bottom: calc(88px + env(safe-area-inset-bottom)) !important;
  }

  .employee-shell .metro-topbar {
    height: 58px !important;
    min-height: 58px !important;
    padding: 0 max(10px, env(safe-area-inset-right)) 0 max(10px, env(safe-area-inset-left)) !important;
    gap: 8px !important;
  }

  .employee-shell .metro-topbar .brand {
    margin-right: 4px !important;
    flex: 0 0 auto;
  }

  .employee-shell .aiotor-wordmark {
    font-size: 14px !important;
    letter-spacing: .10em !important;
  }

  .employee-shell .topbar-actions {
    margin-left: auto !important;
  }

  .employee-shell .account-menu > summary {
    width: 40px;
    min-width: 40px !important;
    height: 40px;
    padding: 0 !important;
    justify-content: center;
  }

  .employee-shell .account-menu > summary > span:nth-child(2),
  .employee-shell .account-menu > summary > i {
    display: none !important;
  }

  .employee-shell .account-menu .avatar {
    width: 32px;
    height: 32px;
  }

  .employee-investigation-page,
  .employee-dashboard-page {
    width: 100% !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  .employee-investigation-page {
    padding-top: 10px !important;
    padding-bottom: 112px !important;
  }

  .employee-dashboard-page {
    padding-top: 10px !important;
    padding-bottom: 24px !important;
  }

  .employee-form-header {
    margin-bottom: 10px !important;
  }

  .employee-form-header h1 {
    font-size: clamp(21px, 7vw, 26px) !important;
  }

  .employee-form-header > div:first-child > p:last-child {
    font-size: 11px !important;
    line-height: 1.45;
  }

  .simple-form-card,
  .simple-progress-card,
  .simple-background-pipeline,
  .employee-case-card,
  .employee-dashboard-hero {
    border-radius: 10px !important;
  }

  .simple-section-head {
    padding: 12px !important;
    gap: 8px !important;
  }

  .simple-section-head > span {
    display: none;
  }

  .simple-field-cell {
    padding: 10px !important;
  }

  .simple-field-cell > label {
    font-size: 10px !important;
    line-height: 1.25;
  }

  /* 16px prevents Safari from zooming the whole page when a field receives focus. */
  .simple-input-row input,
  .simple-input-row select,
  .simple-input-row textarea,
  .metro-login-card input,
  .metro-login-card select,
  .metro-login-card textarea {
    min-height: 44px !important;
    height: auto !important;
    font-size: 16px !important;
    line-height: 1.25 !important;
  }

  .simple-input-row textarea {
    min-height: 92px !important;
  }

  .simple-camera-button {
    width: 44px !important;
    height: 44px !important;
    flex-basis: 44px !important;
  }

  .simple-camera-button svg {
    width: 19px !important;
    height: 19px !important;
  }

  .simple-file-button {
    width: 40px !important;
    height: 40px !important;
    flex-basis: 40px !important;
  }

  .simple-recognition-tools {
    align-items: flex-start !important;
    flex-direction: column !important;
    gap: 5px !important;
  }

  .simple-recognition-tools > div {
    width: 100%;
    flex-wrap: wrap;
  }

  .simple-recognition-tools button {
    min-height: 34px !important;
    padding: 6px 9px !important;
  }

  .simple-evidence-row {
    grid-template-columns: 1fr !important;
    padding: 11px !important;
  }

  .simple-evidence-info,
  .simple-evidence-actions {
    width: 100%;
  }

  .simple-evidence-info {
    align-items: flex-start !important;
  }

  .simple-evidence-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 8px !important;
  }

  .simple-evidence-actions button,
  .simple-upload-button {
    min-height: 44px !important;
    width: 100%;
  }

  .simple-evidence-previews {
    grid-column: auto !important;
  }

  .simple-evidence-previews figure {
    width: 82px !important;
    height: 64px !important;
  }

  .simple-submit-bar {
    left: 8px;
    right: 8px;
    width: auto !important;
    bottom: calc(74px + env(safe-area-inset-bottom)) !important;
    padding: 8px !important;
    border-radius: 11px !important;
  }

  .simple-submit-actions {
    width: 100%;
  }

  .simple-submit-actions .button.primary {
    min-height: 46px !important;
  }

  .employee-bottom-dock,
  .metro-bottom-dock {
    min-height: 66px;
    padding-bottom: calc(7px + env(safe-area-inset-bottom)) !important;
  }

  .dock-item {
    min-height: 48px;
    touch-action: manipulation;
  }

  .employee-shell .metro-footer,
  .metro-footer {
    display: flex !important;
    flex-direction: column;
    align-items: flex-start !important;
    gap: 2px !important;
    min-height: 48px;
    padding: 10px 12px !important;
    margin-bottom: 0 !important;
    font-size: 8px !important;
  }

  .metro-login-shell {
    min-height: auto !important;
    flex: 1 0 auto;
    margin-left: 0 !important;
  }

  .metro-login-access {
    min-height: calc(100dvh - 48px) !important;
    padding: max(12px, env(safe-area-inset-top)) 12px 12px !important;
  }

  .metro-login-card {
    width: 100% !important;
    max-width: 470px !important;
    padding: 22px 18px !important;
    border-radius: 20px !important;
  }

  .metro-login-card h2 {
    font-size: 30px !important;
  }

  .camera-modal {
    padding: 0 !important;
  }

  .camera-dialog {
    width: 100% !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    padding-bottom: env(safe-area-inset-bottom);
  }

  .camera-dialog > header {
    padding-top: max(12px, env(safe-area-inset-top)) !important;
  }

  .camera-stage {
    min-height: min(52dvh, 520px) !important;
  }

  .camera-controls {
    position: sticky;
    bottom: 0;
    z-index: 12;
    padding-bottom: max(12px, env(safe-area-inset-bottom)) !important;
  }

  .replacement-modal {
    padding: 10px !important;
  }

  .replacement-dialog {
    width: 100% !important;
    max-height: calc(100dvh - 20px) !important;
    overflow-y: auto;
  }

  .replacement-compare {
    grid-template-columns: 1fr !important;
  }
}

/* Small phones: 320–430 CSS pixels. */
@media (max-width: 430px) {
  .employee-investigation-page,
  .employee-dashboard-page {
    padding-left: 6px !important;
    padding-right: 6px !important;
  }

  .employee-dashboard-hero {
    padding: 14px !important;
  }

  .employee-dashboard-hero h1 {
    font-size: 22px !important;
  }

  .employee-new-case {
    width: 100%;
    justify-content: center;
    min-height: 46px;
  }

  .employee-case-main {
    grid-template-columns: minmax(0,1fr) auto 16px !important;
    gap: 7px !important;
    padding: 11px !important;
  }

  .employee-case-actions {
    padding: 0 11px 11px !important;
    flex-wrap: wrap;
  }

  .employee-case-actions a,
  .employee-case-actions button {
    min-height: 36px;
  }

  .simple-section-head h2 {
    font-size: 14px !important;
  }

  .simple-evidence-actions {
    grid-template-columns: 1fr !important;
  }

  .simple-field-preview figure {
    width: 86px !important;
    height: 64px !important;
  }

  .camera-stage {
    min-height: 45dvh !important;
  }

  .quality-panel {
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  }
}

/* Very narrow devices still remain usable instead of producing horizontal scroll. */
@media (max-width: 360px) {
  .employee-shell .aiotor-wordmark {
    font-size: 12px !important;
  }

  .simple-field-cell {
    padding: 9px 8px !important;
  }

  .simple-input-row {
    gap: 5px !important;
  }

  .simple-camera-button {
    width: 42px !important;
    height: 42px !important;
    flex-basis: 42px !important;
  }

  .simple-file-button {
    width: 38px !important;
    height: 38px !important;
    flex-basis: 38px !important;
  }
}

/* Landscape phones: preserve useful camera preview height without hiding controls. */
@media (max-height: 520px) and (orientation: landscape) {
  .camera-dialog {
    overflow-y: auto;
  }

  .camera-stage {
    min-height: 64dvh !important;
  }

  .quality-panel {
    grid-template-columns: repeat(6, minmax(0,1fr)) !important;
  }
}

@media print {
  body {
    display: block !important;
    padding: 0 !important;
  }

  .metro-footer,
  .bottom-dock,
  .employee-bottom-dock,
  .simple-submit-bar {
    display: none !important;
  }
}


/* V25 capture quality settings */
.capture-settings-page{min-height:calc(100dvh - 74px);padding:28px clamp(16px,4vw,52px);background:#f7fafc;box-sizing:border-box}
.capture-settings-shell{max-width:820px;margin:0 auto;background:#fff;border:1px solid #dce7ee;border-radius:24px;padding:clamp(20px,4vw,34px);box-shadow:0 18px 55px rgba(24,62,82,.07)}
.capture-settings-header{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:22px}.capture-settings-header h1{margin:4px 0 7px;font-size:clamp(26px,4vw,38px)}.capture-settings-header p{margin:0;color:#637686;max-width:620px}
.capture-settings-form{display:grid;gap:12px}.capture-preset-card{display:grid;grid-template-columns:28px minmax(0,1fr);gap:14px;align-items:flex-start;border:1px solid #dbe6ec;border-radius:17px;padding:18px;background:#fff;cursor:pointer}.capture-preset-card:has(input:checked){border-color:#17889a;box-shadow:0 0 0 3px rgba(23,136,154,.10)}.capture-preset-card.recommended{background:#f8fcfd}.capture-preset-card input{width:20px;height:20px;margin-top:2px;accent-color:#0b7c8d}.capture-preset-card span{display:grid;grid-template-columns:auto 1fr;column-gap:9px;row-gap:5px}.capture-preset-card b{font-size:17px}.capture-preset-card em{justify-self:start;font-style:normal;font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;background:#e4f5f7;color:#087082;padding:4px 8px;border-radius:999px}.capture-preset-card small{grid-column:1/-1;color:#667987;line-height:1.5;font-size:13px}.capture-setting-note{display:grid;gap:5px;padding:15px 17px;border-radius:14px;background:#f3f8fa;color:#405864;margin:5px 0}.capture-setting-note b{color:#153d4d}.capture-settings-form>.button{justify-self:start;min-height:46px}.capture-settings-link{font-size:12px!important;color:#bfeaf0!important;text-decoration:none!important;margin-left:auto}.capture-settings-link:hover{text-decoration:underline!important}
@media(max-width:640px){.capture-settings-page{padding:14px 12px calc(92px + env(safe-area-inset-bottom))}.capture-settings-shell{border-radius:18px;padding:18px 14px}.capture-settings-header{gap:10px}.capture-settings-header .simple-close-link{flex:0 0 auto}.capture-preset-card{padding:15px 13px}.capture-settings-form>.button{width:100%;justify-content:center}}