/* DocVerify 2.0 — mobile-first responsive layer.
   Base rules target phones. Desktop is progressive enhancement at 769px+. */
* { -webkit-tap-highlight-color: transparent; }
html { font-size: 16px; }
body { overflow-x: hidden; }
button, input, select, textarea { font: inherit; }
button, .btn, input[type=submit] { min-height: 44px; }

/* Common application shells */
.container, .page-container, .content-container, .main-container { width: 100%; max-width: 1180px; margin-inline: auto; padding-inline: 14px; }
.card, .panel, .workspace-card { width: 100%; }
.form-row { grid-template-columns: 1fr !important; }
.form-actions { flex-direction: column; align-items: stretch; }
.form-actions .btn, .btn-full, .auth-form .btn { width: 100%; }

/* Tables remain usable on narrow screens without breaking the page. */
.table-wrap, .table-responsive { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { min-width: 640px; }

/* Navigation: compact phone-first header. */
.main-nav { width: 100%; }
.nav-inner { min-height: 58px; padding-inline: 12px; }
.nav-links, .nav-user { display: none !important; }
.nav-hamburger { display: inline-flex !important; min-width: 44px; min-height: 44px; }
.nav-mobile-menu { width: 100%; }
.nav-mobile-link { min-height: 48px; display: flex; align-items: center; padding: 12px 16px; }

/* Authentication */
.auth-page { min-height: 100svh; padding: 12px; display: flex; align-items: flex-start; justify-content: center; }
.auth-container { width: 100%; max-width: 440px; margin: 4vh auto 0; }
.auth-card { width: 100%; border-radius: 14px; }
.auth-header { padding: 20px 18px 12px; }
.auth-form { padding: 0 18px 18px; }

/* Large touch targets for the core workflow. */
.scan-btn, .token-submit, .camera-close-btn { min-height: 48px; }
input, select, textarea { max-width: 100%; }

@media (min-width: 769px) {
    .container, .page-container, .content-container, .main-container { padding-inline: 24px; }
    .form-row { grid-template-columns: 1fr 1fr !important; }
    .form-actions { flex-direction: row; align-items: center; }
    .form-actions .btn { width: auto; }
    .auth-page { align-items: center; padding: 24px; }
    .auth-container { margin: 0 auto; }
    .nav-links, .nav-user { display: flex !important; }
    .nav-hamburger { display: none !important; }
}

@media (min-width: 1180px) {
    .container, .page-container, .content-container, .main-container { padding-inline: 0; }
}