/* Mobile experience (Section 28): touch-first screens and the resident portal on a phone.
   Baseline: tap targets >= 44px, text >= 14px, no horizontal scroll. */

.mobile-screen { max-width: 520px; margin: 0 auto; padding: 16px; }
.mobile-screen h1 { font-size: 1.375rem; margin: 0; }

/* Everything a finger has to hit */
.mobile-screen .btn,
.mobile-screen .form-select,
.mobile-screen .form-control,
.portal-bottom-bar .portal-bar-item,
.portal-fullscreen .btn { min-height: 44px; }
.portal-fullscreen .btn-icon, .mobile-screen .btn-icon { min-width: 44px; }
.mobile-screen .btn-sm { min-height: 44px; padding-left: 16px; padding-right: 16px; }

/* Text never goes below 14px on the phone screens */
.mobile-screen .small, .mobile-screen small, .mobile-screen .badge, .mobile-screen .btn-sm, .mobile-screen .form-text,
.portal-fullscreen .small, .portal-fullscreen small, .portal-fullscreen .badge, .portal-fullscreen .btn-sm,
.portal-fullscreen .invalid-feedback, .portal-fullscreen .form-text, .portal-fullscreen .alert,
.mobile-screen .form-label, .portal-fullscreen .form-label, .mobile-screen .alert,
.portal-bottom-bar .portal-bar-item, .portal-bottom-bar .portal-bar-badge { font-size: .875rem; }

/* Loading skeletons */
.mobile-skeleton { border-radius: 8px; min-height: 20px; background: linear-gradient(90deg, rgba(var(--bs-secondary-rgb), .12) 25%, rgba(var(--bs-secondary-rgb), .22) 37%, rgba(var(--bs-secondary-rgb), .12) 63%); background-size: 400% 100%; animation: mobile-skeleton 1.4s ease infinite; }
@keyframes mobile-skeleton { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
@media (prefers-reduced-motion: reduce) { .mobile-skeleton { animation: none; } }

.mobile-offline { position: sticky; top: 0; z-index: 1030; }

/* Dashboard tiles and quick actions */
.mobile-kpi { border: 1px solid var(--bs-border-color); border-radius: 12px; padding: 12px 14px; height: 100%; background: var(--bs-body-bg); }
.mobile-kpi .mobile-kpi-label { font-size: .875rem; color: var(--bs-secondary-color); }
.mobile-kpi .mobile-kpi-value { font-size: 1.25rem; font-weight: 600; word-break: break-word; }
.mobile-attention-item { display: flex; gap: 12px; align-items: center; min-height: 44px; padding: 10px 12px; text-decoration: none; color: inherit; border-bottom: 1px solid var(--bs-border-color); }
.mobile-attention-item:last-child { border-bottom: 0; }
.mobile-action { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 88px; padding: 12px 8px; border: 1px solid var(--bs-border-color); border-radius: 12px; text-align: center; text-decoration: none; color: inherit; font-size: .9375rem; }
.mobile-building-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.mobile-building-chips a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 22px; border: 1px solid var(--bs-border-color); text-decoration: none; }
.mobile-building-chips a[aria-current="true"] { background: var(--bs-primary); border-color: var(--bs-primary); color: #fff; }

/* Photo document upload (M-315) */
.photo-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; }
.photo-thumb { position: relative; border: 1px solid var(--bs-border-color); border-radius: 10px; overflow: hidden; background: var(--bs-body-bg); }
.photo-thumb img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.photo-thumb .photo-thumb-tools { display: flex; justify-content: space-between; gap: 2px; padding: 2px; }
.photo-thumb .photo-thumb-tools .btn { min-width: 44px; padding-left: 0; padding-right: 0; }
.photo-thumb .photo-thumb-no { position: absolute; top: 4px; left: 4px; background: rgba(0, 0, 0, .65); color: #fff; border-radius: 10px; padding: 0 8px; font-size: .875rem; }

/* Resident portal on a phone: bottom action bar and full-screen flows (M-316/317/318) */
.portal-bottom-bar { display: none; }
@media (max-width: 767.98px) {
  body.has-portal-bar .content-wrapper { padding-bottom: 76px; }
  body.has-portal-bar .portal-bottom-bar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1040; background: var(--bs-body-bg); border-top: 1px solid var(--bs-border-color); padding: 4px 4px calc(4px + env(safe-area-inset-bottom)); }
  .portal-bottom-bar .portal-bar-item { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; position: relative; padding: 4px 2px; border: 0; background: transparent; color: var(--bs-body-color); line-height: 1.2; text-decoration: none; border-radius: 8px; }
  .portal-bottom-bar .portal-bar-item .icon-base { font-size: 1.375rem; }
  .portal-bottom-bar .portal-bar-badge { position: absolute; top: 0; right: calc(50% - 26px); min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--bs-danger); color: #fff; line-height: 20px; text-align: center; }
}

.portal-fullscreen { position: fixed; inset: 0; z-index: 1085; background: var(--bs-body-bg); overflow-y: auto; -webkit-overflow-scrolling: touch; display: none; flex-direction: column; }
.portal-fullscreen.is-open { display: flex; }
.portal-fullscreen-header { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--bs-border-color); position: sticky; top: 0; background: var(--bs-body-bg); z-index: 1; }
.portal-fullscreen-header h2 { font-size: 1.125rem; margin: 0; flex: 1 1 auto; }
.portal-fullscreen-body { padding: 16px; flex: 1 1 auto; max-width: 640px; width: 100%; margin: 0 auto; }
.portal-fullscreen-footer { padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--bs-border-color); display: flex; gap: 8px; position: sticky; bottom: 0; background: var(--bs-body-bg); }
.portal-fullscreen-footer .btn { flex: 1 1 0; }

.category-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.category-button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 88px; padding: 10px; border: 2px solid var(--bs-border-color); border-radius: 12px; background: var(--bs-body-bg); color: inherit; font-size: 1rem; }
.category-button .icon-base { font-size: 1.75rem; }
.category-button[aria-pressed="true"] { border-color: var(--bs-primary); background: rgba(var(--bs-primary-rgb), .08); }

.step-dots { display: flex; gap: 6px; align-items: center; font-size: .875rem; color: var(--bs-secondary-color); }
.step-dots .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--bs-border-color); }
.step-dots .dot.active { background: var(--bs-primary); }

.announcement-card { display: block; width: 100%; text-align: left; padding: 12px 14px; border: 1px solid var(--bs-border-color); border-radius: 12px; background: var(--bs-body-bg); color: inherit; margin-bottom: 10px; min-height: 44px; }
.announcement-card .unread-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--bs-primary); margin-right: 6px; }

.vote-option { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 10px 14px; border: 2px solid var(--bs-border-color); border-radius: 12px; margin-bottom: 10px; cursor: pointer; }
.vote-option input { width: 22px; height: 22px; flex: 0 0 auto; }
.vote-option:has(input:checked) { border-color: var(--bs-primary); background: rgba(var(--bs-primary-rgb), .08); }

/* Manager screens that are used on a phone too (M-317) */
@media (max-width: 767.98px) {
  .announcements-read-cards .table thead { display: none; }
  .announcements-read-cards .table tr { display: block; border: 1px solid var(--bs-border-color); border-radius: 10px; margin-bottom: 10px; padding: 8px 12px; }
  .announcements-read-cards .table td { display: flex; justify-content: space-between; gap: 12px; border: 0; padding: 4px 0; }
  .announcements-read-cards .table td::before { content: attr(data-label); color: var(--bs-secondary-color); }
}

@media (max-width: 767.98px) {
  .announcements-page .form-control, .announcements-page .form-select, .announcements-page .btn { min-height: 44px; }
  .announcements-page th, .announcements-page td, .announcements-page .table, .announcements-page label, .announcements-page .form-label, .announcements-page .form-check-label, .announcements-page .card-header, .announcements-page .nav-link { font-size: .875rem; }
  .announcements-page .btn-icon { min-width: 44px; }
  .announcements-page a { display: inline-flex; align-items: center; min-height: 44px; }
  .announcements-page .small, .announcements-page small, .announcements-page .form-text, .announcements-page .btn-sm { font-size: .875rem; }
}

/* Collector (L-012) */
.collect-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.collect-summary .mobile-kpi.is-warning { border-color: var(--bs-warning); }
.collect-apt { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 64px; padding: 12px 14px; margin-bottom: 8px; text-align: left; border: 1px solid var(--bs-border-color); border-radius: 12px; background: var(--bs-body-bg); color: inherit; }
.collect-apt:focus-visible { outline: 2px solid var(--bs-primary); outline-offset: 2px; }
.collect-apt .collect-apt-owed { font-weight: 600; white-space: nowrap; }
.collect-apt.is-clear .collect-apt-owed { color: var(--bs-success); }
.collect-method { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.collect-method .btn { min-height: 56px; }
.collect-payer-row { border: 1px solid var(--bs-border-color); border-radius: 12px; padding: 12px 14px; margin-bottom: 8px; }