/* Shared touch layouts, scoped to screen so printed evidence is unchanged. */
@media screen and (max-width: 767.98px) {
    html { scroll-padding-top: 90px; scroll-padding-bottom: 160px; }
    body { padding-bottom: calc(88px + env(safe-area-inset-bottom)); }
    main.container-fluid { padding-inline: 10px !important; }
    .app-card .card-body { padding: 14px; }
    .row > *, .d-flex > *, .modal-content { min-width: 0; }
    .form-label, .help-text, .mobile-contact-purpose, .alert { overflow-wrap: anywhere; }
    .form-control, .form-select { font-size: 16px; min-height: 48px; }
    input[type="file"] { width: 100%; }
    .btn { min-height: 46px; padding: 10px 12px; touch-action: manipulation; }
    .btn:focus-visible, summary:focus-visible { outline: 3px solid #818cf8; outline-offset: 3px; }
    .form-check { display: flex; align-items: flex-start; gap: 10px; padding: 10px 0; min-height: 48px; }
    .form-check .form-check-input { float: none; margin: 3px 0 0; width: 22px; height: 22px; flex: 0 0 22px; }
    .form-check-label { flex: 1; padding-block: 3px; line-height: 1.5; }
    details > summary { min-height: 46px; padding-block: 8px; line-height: 1.6; }
    [data-contact-help] { min-height: 44px; vertical-align: middle; }
    .mobile-contact-card > .d-flex:last-child { flex-direction: column; align-items: stretch !important; }
    .mobile-contact-card .btn-group { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; }
    .mobile-contact-card .btn-group .btn { flex: 1 1 auto; min-height: 48px; margin: 0 !important; border-radius: 10px !important; font-size: 16px; }
    .mobile-contact-card .btn-group .btn-outline-danger { flex: 0 0 64px; }
    .mobile-contact-card .badge { white-space: normal; line-height: 1.5; }
    .form-action-bar { bottom: calc(72px + env(safe-area-inset-bottom)); gap: 8px !important; }
    .form-action-bar .btn-primary { flex: 2 1 0; }
    .mobile-bottom-nav { height: calc(64px + env(safe-area-inset-bottom)); }
    .mobile-bottom-nav a { min-height: 52px; }
    body.modal-open .mobile-bottom-nav { visibility: hidden; }
    body.mobile-keyboard-open .mobile-bottom-nav { display: none; }
    body.mobile-keyboard-open .form-action-bar { position: static; }
    body.mobile-keyboard-open .app-navbar { position: static; }
    .modal-dialog { margin: 0; width: 100%; max-width: none; height: 100%; height: 100dvh; }
    .modal-content { height: 100%; border: 0; border-radius: 0; }
    .modal-header { padding: 14px 16px; padding-top: max(14px, env(safe-area-inset-top)); }
    .modal-header .btn-close { min-width: 44px; min-height: 44px; box-sizing: border-box; margin-right: 0; padding: 12px; }
    .modal-body { overflow-y: auto; overscroll-behavior: contain; padding: 16px; }
    .modal-footer { padding-bottom: max(12px, env(safe-area-inset-bottom)); }
    .modal-footer .btn { width: 100%; }
    #purposeTemplateForm .d-flex, #detailTemplateForm .d-flex { flex-wrap: wrap; }
    [data-detail-autofill], [data-evidence-template] { flex: 1 1 100%; text-align: left; white-space: normal; }
    #detailAutofillUndo, #undoEvidenceTemplate { white-space: normal !important; }
    .d-flex:has(> #detailAutofillStatus), .d-flex:has(> #evidenceTemplateStatus) { flex-wrap: wrap; }
    .d-flex:has(> label[for="detail"]), .d-flex:has(> label[for="contactPurpose"]) { flex-wrap: wrap; }
    .thai-date-picker .row { grid-template-columns: minmax(58px, .7fr) minmax(100px, 1.4fr) minmax(80px, 1fr); gap: 6px; }
    .thai-date-picker .form-select { padding-left: 8px; padding-right: 24px; }
    .evidence-file-selection { font-size: .9rem; overflow-wrap: anywhere; }
    .evidence-file-selection ul { margin: 6px 0 0; padding-left: 20px; max-height: 150px; overflow-y: auto; }
}
@media screen and (max-width: 359.98px) {
    .thai-date-picker .row { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); }
    .thai-date-picker .row > :last-child { grid-column: 1 / -1; }
    .app-card .card-body { padding: 12px; }
}

@media screen and (max-width: 767.98px) {
    .navbar .container-fluid { flex-wrap: nowrap; gap: 4px; }
    .navbar-brand { flex: 1 1 auto; min-width: 0; margin-right: 4px; overflow-wrap: anywhere; }
    .navbar-toggler { flex: 0 0 auto; min-width: 44px; min-height: 44px; }
    .table-responsive { -webkit-overflow-scrolling: touch; }
    input[type="date"], input[type="time"], input[type="datetime-local"] { width: 100%; max-width: 100%; }
}

/* Keep the primary navigation compact and reliably collapsible on phones. */
.app-navbar .navbar-collapse{display:flex;flex:1 1 auto;align-items:center}
@media screen and (max-width:991.98px){
  .app-navbar .container-fluid{flex-wrap:wrap!important;justify-content:space-between;row-gap:0}
  .app-navbar .navbar-brand{flex:1 1 0;min-width:0;max-width:calc(100% - 58px);margin-right:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;overflow-wrap:normal;font-size:.93rem;line-height:1.2}
  .app-navbar .navbar-brand i{flex:0 0 auto}
  .app-navbar .navbar-toggler{display:flex;align-items:center;justify-content:center;padding:6px 9px;border-color:rgba(255,255,255,.42);border-radius:10px}
  .app-navbar .navbar-collapse{display:none!important;flex:0 0 100%;width:100%;padding:8px 2px 12px}
  .app-navbar .navbar-collapse.is-open{display:block!important}
  .app-navbar .navbar-nav{width:100%;margin:0!important}
  .app-navbar .navbar-nav .nav-link{padding:11px 10px;border-top:1px solid rgba(255,255,255,.15);font-size:1rem;line-height:1.35;white-space:normal}
  .app-navbar .navbar-account{display:flex;flex-wrap:wrap;align-items:stretch!important;gap:8px!important;margin-top:8px;padding:12px 8px 0;border-top:1px solid rgba(255,255,255,.2)}
  .app-navbar .navbar-account>span{flex:1 1 100%;overflow-wrap:anywhere}
  .app-navbar .navbar-account .btn{width:100%;min-height:44px}
}