/* Mobile-only layout layer. Desktop structure and business UI stay unchanged. */
.mobile-bottom-nav { display: none; }

@media (max-width: 767px) {
  :root { --mobile-nav-height: 66px; }

  html { min-height: 100%; }
  body { min-height: 100dvh; }

  .app-shell {
    min-height: 100dvh;
    grid-template-rows: calc(var(--topbar) + env(safe-area-inset-top)) minmax(0, auto);
  }

  .topbar {
    height: calc(var(--topbar) + env(safe-area-inset-top));
    padding-top: env(safe-area-inset-top);
  }

  .topbar-content { gap: 8px; padding-inline: 12px; }
  .topbar-content > .cluster { flex: 0 0 auto; gap: 6px; }
  .topbar-title { display: none; }
  .topbar-actions { min-width: 0; flex: 1; justify-content: flex-end; gap: 6px; }
  .reporting-workspace { min-width: 0; flex: 1; justify-content: flex-end; gap: 3px; }
  .reporting-month-arrow { width: 32px; min-width: 32px; height: 42px; }
  .reporting-month-control { min-width: 0; max-width: 230px; min-height: 44px; padding: 5px 8px; }
  .reporting-month-control__icon, .reporting-month-control__chevron { display: none; }
  .reporting-month-control__copy strong { font-size: 12px; }
  .reporting-month-control__copy small { font-size: 9px; }
  #reportingMonthNew { display: none; }
  #logoutButton { min-width: 44px; min-height: 44px; padding-inline: 9px; font-size: 0; }
  #logoutButton::before { content: "⇥"; font-size: 20px; line-height: 1; }

  .sidebar {
    z-index: 75;
    top: calc(var(--topbar) + env(safe-area-inset-top));
    width: min(330px, 90vw);
    min-height: 0;
    height: calc(100dvh - var(--topbar) - env(safe-area-inset-top));
    padding-bottom: max(16px, env(safe-area-inset-bottom));
    overflow: hidden;
  }
  .sidebar-backdrop {
    z-index: 70;
    inset: calc(var(--topbar) + env(safe-area-inset-top)) 0 0;
    height: auto;
  }
  .nav-item { min-height: 46px; }

  .content-column { padding-bottom: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom)); }
  .main-content { padding: 14px 12px 20px; }
  .page { gap: 14px; }
  .page-header { gap: 10px; }
  .page-header h1 { font-size: 22px; }
  .page-header p { font-size: 13px; }
  .page-header > .button, .page-header > .cluster { width: 100%; }
  .page-header > .button { min-height: 46px; }
  .page-header > .cluster { align-items: stretch; }

  .card { padding: 15px; border-radius: 12px; }
  .section-title { align-items: flex-start; flex-direction: column; gap: 9px; }
  .section-title > .cluster, .section-title > .dashboard-filters { width: 100%; }
  .section-title > .cluster .button { flex: 1 1 auto; }
  .cluster { gap: 8px; }
  .button, .input, .select { min-height: 44px; }
  .input, .select, textarea { font-size: 16px; }
  .button--small { min-height: 40px; }
  .icon-button { min-width: 44px; width: 44px; }

  .metric-grid, .consumption-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .metric-card { min-height: 112px; padding: 14px; }
  .metric-card__value { margin-top: 12px; font-size: 21px; }
  .dashboard-page-header { align-items: stretch; }
  .dashboard-comparison-meta { align-items: flex-start; flex-direction: column; gap: 6px; }
  .dashboard-client-controls { align-items: stretch; justify-content: stretch; width: 100%; }
  .dashboard-client-search, .dashboard-client-search .input { width: 100%; }
  .dashboard-client-search-count { min-height: 18px; }
  #dashboardMetrics.metric-grid { grid-template-columns: 1fr; }
  .dashboard-kpi-group--primary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboard-kpi-group--secondary { grid-template-columns: 1fr; }
  .dashboard-kpi-group--secondary .metric-card { min-height: 74px; }
  .dashboard-table-scroll { max-height: none; overflow: visible; }
  .dashboard-comparison-grid, .analytics-two-column, .two-column { grid-template-columns: 1fr; }
  .dashboard-filters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dashboard-filters .button { min-width: 0; padding-inline: 8px; }
  .dashboard-chart-card .chart, .chart, .chart-empty { min-height: 250px; }
  .chart canvas, .dashboard-chart-card .chart canvas { height: 250px !important; }
  .chart--large, .chart--operator, .chart--share { min-height: 280px; }
  .chart--large canvas, .chart--operator canvas, .chart--share canvas { height: 280px !important; }

  .table-wrap, .contracts-table-scroll, .heatmap-wrap {
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-gutter: stable;
  }
  .table-wrap::after, .contracts-table-scroll::after {
    content: "Проведите в сторону, чтобы увидеть остальные столбцы";
    position: sticky;
    left: 0;
    display: block;
    width: fit-content;
    padding: 5px 9px;
    color: var(--muted);
    background: #f8fafc;
    border-top: 1px solid var(--border);
    font-size: 10px;
  }

  .gmail-controls { grid-template-columns: 1fr; }
  .gmail-account-actions, .gmail-batch-actions { display: grid; grid-template-columns: 1fr; width: 100%; }
  .gmail-account-actions .button, .gmail-batch-actions .button { width: 100%; }
  .gmail-sync-status { padding: 10px; }
  .gmail-sync-status__readiness { white-space: normal; }
  .gmail-notification-actions { display: grid; grid-template-columns: 1fr; }
  .gmail-notification-actions .button { width: 100%; }
  .import-action-bar { position: static; padding: 13px; }
  .import-action-bar__meta { display: grid; gap: 5px; }
  .gmail-operator-card { overflow: visible; }
  .gmail-operator-table-wrap { overflow: visible; border: 0; }
  .gmail-operator-table-wrap::after { display: none; }
  .gmail-compact-table, .gmail-compact-table tbody, .gmail-compact-table tr, .gmail-compact-table td { display: block; width: 100%; }
  .gmail-compact-table { table-layout: auto; }
  .gmail-compact-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
  .gmail-compact-table tbody { display: grid; gap: 10px; }
  .gmail-compact-table tbody tr { height: auto; padding: 12px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-card); }
  .gmail-compact-table td,
  .gmail-compact-table td:nth-child(n) { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 8px; align-items: start; width: 100%; max-width: none; padding: 7px 0; border: 0; overflow-wrap: anywhere; }
  .gmail-compact-table td::before { color: var(--muted); font-size: 11px; font-weight: 700; text-transform: uppercase; }
  .gmail-compact-table td:nth-child(1)::before { content: "Оператор"; }
  .gmail-compact-table td:nth-child(2)::before { content: "Статус"; }
  .gmail-compact-table td:nth-child(3)::before { content: "Получено"; }
  .gmail-compact-table td:nth-child(4)::before { content: "Отправитель"; }
  .gmail-compact-table td:nth-child(5)::before { content: "Файл"; }
  .gmail-compact-table td:nth-child(6)::before { content: "Действия"; }
  .gmail-compact-table .gmail-sender, .gmail-compact-table .gmail-received, .gmail-compact-table .gmail-canonical-file { white-space: normal; overflow: visible; text-overflow: clip; }
  .gmail-row-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  .gmail-row-actions .button, .gmail-version-select { width: 100%; min-width: 0; }

  .filter-grid, .gas-balance-filter-grid, .storage-filters, .contracts-filter-grid { grid-template-columns: 1fr; }
  .filter-grid .button, .gas-balance-filter-grid .button, .contracts-filter-submit { width: 100%; }
  .consumption-filters__main { grid-template-columns: minmax(0, 1fr); }
  .consumption-filters__secondary { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .consumption-filters__analysis-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .consumption-filters__nonzero { grid-column: 1 / -1; }
  .consumption-filters__actions { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: 8px; }
  .consumption-filters__actions .button { width: 100%; }
  .consumption-filters__actions #consumptionManualAdd { grid-column: 1 / -1; }
  .storage-kpis, .storage-detail-kpis, .storage-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .storage-deal-header, .storage-form-grid, .storage-preview, .storage-cards-layout, .storage-sequences { grid-template-columns: 1fr; }
  .storage-drawer, .drawer, .consumption-changes-drawer, .consumption-analysis-drawer { width: 100vw; max-width: 100vw; }
  .analysis-controls, .analysis-summary, .analysis-drivers { grid-template-columns: 1fr; }
  .storage-drawer, .drawer { padding: 16px 14px max(16px, env(safe-area-inset-bottom)); }
  .storage-drawer.storage-return-details { width: 100vw; }
  .commercial-closing-actions, .storage-table-actions, .contracts-document-actions { justify-content: stretch; }
  .commercial-closing-actions .button, .storage-table-actions .button, .contracts-document-actions .button { flex: 1 1 auto; }

  .modal-backdrop {
    place-items: end center;
    padding: max(10px, env(safe-area-inset-top)) 0 0;
  }
  .modal,
  .modal.modal--auth-permissions,
  .modal.modal--auth-user,
  .modal.modal--auth-password,
  .modal.modal--reporting-months,
  .modal.modal--operation {
    width: 100%;
    max-width: 100%;
    max-height: calc(100dvh - max(10px, env(safe-area-inset-top)));
    margin: 0;
    padding: 18px 14px max(16px, env(safe-area-inset-bottom));
    border-radius: 16px 16px 0 0;
  }
  .modal > h2 { padding-right: 38px; }
  .modal__close { width: 40px; height: 40px; }
  .modal__actions { position: sticky; bottom: calc(env(safe-area-inset-bottom) * -1); z-index: 3; display: grid; grid-template-columns: 1fr; margin: 18px -14px calc(max(16px, env(safe-area-inset-bottom)) * -1); padding: 12px 14px max(12px, env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid var(--border); }
  .modal__actions .button { width: 100%; }
  .modal.modal--operation > h2, .modal.modal--operation > #modalBody, .modal.modal--operation > .modal__actions { padding-left: 14px; padding-right: 14px; }
  .modal.modal--operation > .modal__actions { margin: 0; }
  .modal.modal--receipt-adjustment { width: 100%; max-width: 100%; max-height: calc(100dvh - max(10px, env(safe-area-inset-top))); margin: 0; padding: 18px 14px max(16px, env(safe-area-inset-bottom)); border-radius: 16px 16px 0 0; }
  .receipt-adjustment-fields { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .receipt-adjustment-reason { grid-column: auto; }
  .receipt-adjustment-preview__values { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .receipt-adjustments-card .section-title { display: grid; }
  .receipt-adjustments-card .section-title > .button { width: 100%; }
  .auth-permissions-table { min-width: 500px; }
  .auth-users-table { min-width: 640px; }

  .footer { display: none; }
  .toast-region { right: 12px; bottom: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom) + 10px); width: calc(100vw - 24px); }

  .mobile-bottom-nav {
    position: fixed;
    z-index: 65;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100vw;
    max-width: 100vw;
    overflow: hidden;
    min-height: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom));
    display: flex;
    align-items: start;
    padding: 5px 5px max(5px, env(safe-area-inset-bottom));
    background: rgb(255 255 255 / .97);
    border-top: 1px solid var(--border);
    box-shadow: 0 -8px 28px rgb(15 23 42 / .09);
    backdrop-filter: blur(14px);
  }
  .mobile-bottom-nav__item {
    position: relative;
    min-width: 0;
    flex: 1 1 0;
    min-height: 56px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 3px;
    padding: 4px 2px;
    color: var(--muted);
    background: transparent;
    border: 0;
    border-radius: 10px;
    font: inherit;
    cursor: pointer;
  }
  .mobile-bottom-nav__item svg { width: 21px; height: 21px; }
  .mobile-bottom-nav__item span { max-width: 100%; overflow: hidden; font-size: 10px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
  .mobile-bottom-nav__item.is-active { color: var(--primary); background: var(--primary-soft); }

  body:has(.login-card) {
    min-height: 100dvh;
    padding: max(18px, env(safe-area-inset-top)) 14px max(18px, env(safe-area-inset-bottom));
  }
  .login-card { width: 100%; max-width: 430px; padding: 28px 22px; }
  .login-form .input { min-height: 48px; }
  .login-form .button { min-height: 48px; }
}

@media (max-width: 389px) {
  .reporting-month-arrow { display: none; }
  .metric-grid, .consumption-kpis, .storage-kpis, .storage-detail-kpis, .storage-summary-grid { grid-template-columns: 1fr; }
  .gmail-compact-table td, .gmail-compact-table td:nth-child(n) { grid-template-columns: 80px minmax(0, 1fr); }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .main-content { padding: 20px; }
  .button, .input, .select { min-height: 42px; }
  .metric-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gmail-controls { grid-template-columns: minmax(190px, .7fr) minmax(0, 1fr); }
}