/* MOBILE16.1 — mobile-first shell and touch ergonomics */
@media (max-width: 820px) {
  html { scroll-padding-top: 68px; }
  body { overflow-x: hidden; }
  body.stm-mobile-nav-open { overflow: hidden; touch-action: none; }

  .stm-mobile-nav-backdrop {
    position: fixed;
    inset: 0;
    z-index: 49;
    background: rgba(15, 23, 42, .42);
    backdrop-filter: blur(2px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease;
  }
  .stm-mobile-nav-backdrop.open { opacity: 1; pointer-events: auto; }

  .sidebar {
    z-index: 50;
    width: min(86vw, 320px);
    max-width: 320px;
    height: 100dvh;
    padding: max(16px, env(safe-area-inset-top)) 14px max(16px, env(safe-area-inset-bottom));
    gap: 12px;
    overflow: hidden;
    overscroll-behavior: contain;
    box-shadow: 18px 0 48px rgba(15, 23, 42, .18);
  }
  .sidebar .nav { flex: 1 1 auto; min-height: 0; padding-bottom: 12px; }
  .sidebar .nav-item { min-height: 46px; padding: 12px 14px 12px 16px; font-size: 14px; }
  .sidebar-footer { flex: 0 0 auto; }

  .topbar {
    min-height: 58px;
    padding: max(8px, env(safe-area-inset-top)) 12px 8px;
    gap: 8px;
    box-shadow: 0 1px 0 rgba(15, 23, 42, .04);
  }
  .menu-btn {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    border-radius: 11px;
    font-size: 20px;
  }
  .topbar-title { flex: 1 1 auto; min-width: 0; }
  .topbar-title .eyebrow { display: none; }
  .topbar-title h1 { margin: 0; max-width: none; font-size: 18px; line-height: 1.2; }
  .topbar-actions { flex: 0 0 auto; gap: 6px; min-width: 0; }
  #quickAddBtn {
    width: 44px;
    min-width: 44px;
    height: 44px;
    padding: 0;
    overflow: hidden;
    font-size: 0;
  }
  #quickAddBtn::before { content: '+'; font-size: 23px; line-height: 1; }
  .user-chip { min-height: 44px !important; padding: 4px !important; border-radius: 12px !important; }
  .user-chip-text { display: none !important; }
  .user-avatar { width: 34px !important; height: 34px !important; flex: 0 0 34px !important; }

  .content { width: 100%; padding: 14px 12px calc(34px + env(safe-area-inset-bottom)); }
  .card { padding: 14px; border-radius: 12px; }
  .section { margin-top: 18px; }
  .section-head { margin-bottom: 10px; gap: 10px; }
  .section-head h2 { font-size: 17px; }
  .section-head .help { font-size: 11px; line-height: 1.45; }
  .stacked-sections { gap: 20px; }

  .primary-btn, .secondary-btn, .ghost-btn, .danger-btn {
    min-height: 44px;
    padding: 10px 13px;
    border-radius: 10px;
    font-size: 13px;
  }
  input, select, textarea {
    min-height: 46px;
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 16px;
  }
  textarea { min-height: 104px; }
  .field { gap: 7px; }
  .field label { font-size: 11px; }

  /* Mobile reports: keep iOS date input inside the form width */
  #reportV2Form input[type="date"] {
    display: block;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    text-align: left;
  }
  #reportV2Form input[type="date"]::-webkit-date-and-time-value {
    min-width: 0;
    text-align: left;
  }
  .actions { gap: 8px; margin-top: 14px; }
  .actions > button, .actions > .primary-btn, .actions > .secondary-btn { flex: 1 1 120px; }

  .object-head { margin-bottom: 12px; gap: 10px; }
  .object-head .back-objects { min-height: 40px; }
  .object-heading h2 { font-size: 19px; }
  .object-heading .help { line-height: 1.45; }

  .tabs {
    width: calc(100% + 24px);
    margin: 0 -12px 14px;
    padding: 0 12px 8px;
    gap: 7px;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .tabs::-webkit-scrollbar { display: none; }
  .tab {
    min-height: 42px;
    padding: 10px 13px;
    font-size: 12px;
    scroll-snap-align: start;
  }

  .object-info-grid { border-radius: 12px; }
  .info-item { min-height: 74px; padding: 14px; }
  .info-item span { font-size: 10px; }
  .info-item strong { font-size: 13px; }

  .metric { font-size: 24px; }
  .summary-metrics .card { min-height: 100px; }

  .table-wrap {
    width: calc(100% + 24px);
    margin-left: -12px;
    margin-right: -12px;
    border-left: 0;
    border-right: 0;
    border-radius: 0;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-inline: contain;
  }
  .table-wrap table { min-width: 680px; }
  .table-wrap th, .table-wrap td { padding: 10px 11px; }
  .table-wrap th { font-size: 10px; }
  .table-wrap td { font-size: 12px; }

  html[data-user-role="Прораб"] .table-wrap table:has(.open-object) {
    min-width: 0;
    width: 100%;
    table-layout: fixed;
  }
  html[data-user-role="Прораб"] .table-wrap table:has(.open-object) th:nth-child(n+4),
  html[data-user-role="Прораб"] .table-wrap table:has(.open-object) td:nth-child(n+4) {
    display: none;
  }
  html[data-user-role="Прораб"] .table-wrap table:has(.open-object) th:nth-child(1),
  html[data-user-role="Прораб"] .table-wrap table:has(.open-object) td:nth-child(1) {
    width: 30%;
  }
  html[data-user-role="Прораб"] .table-wrap table:has(.open-object) th:nth-child(2),
  html[data-user-role="Прораб"] .table-wrap table:has(.open-object) td:nth-child(2) {
    width: 28%;
  }
  html[data-user-role="Прораб"] .table-wrap table:has(.open-object) th:nth-child(3),
  html[data-user-role="Прораб"] .table-wrap table:has(.open-object) td:nth-child(3) {
    width: 42%;
  }
  html[data-user-role="Прораб"] .table-wrap table:has(.open-object) tbody td:first-child {
    cursor: pointer;
  }
  html[data-user-role="Прораб"] .table-wrap table:has(.open-object) tbody td:first-child strong {
    color: #111827;
    text-decoration: underline;
    text-decoration-color: rgba(37, 99, 235, .35);
    text-underline-offset: 3px;
  }

  .modal-backdrop {
    align-items: end;
    padding: 0;
    background: rgba(15, 23, 42, .5);
  }
  .modal {
    width: 100%;
    max-width: none;
    max-height: min(92dvh, 860px);
    border-radius: 18px 18px 0 0;
    padding-bottom: env(safe-area-inset-bottom);
  }
  .modal-head { position: sticky; top: 0; z-index: 2; padding: 14px 16px; background: #fff; }
  .modal-head h2 { font-size: 18px; }
  .modal-body { padding: 16px 14px 18px; }
  .icon-btn { min-width: 44px; min-height: 44px; }

  .toast {
    left: 12px;
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom));
    text-align: center;
  }

  .auth-gate { padding: 14px; }
  .auth-card { padding: 20px 16px; border-radius: 16px; }
}

@media (max-width: 480px) {
  .content { padding-left: 10px; padding-right: 10px; }
  .tabs { width: calc(100% + 20px); margin-left: -10px; margin-right: -10px; padding-left: 10px; padding-right: 10px; }
  .table-wrap { width: calc(100% + 20px); margin-left: -10px; margin-right: -10px; }
  .section-head > .inline { display: grid; grid-template-columns: 1fr; }
  .section-head > .inline > * { width: 100%; }
}