/* Final mobile layout layer. Loaded last so dynamically rendered screens share one contract. */
@media (max-width: 700px) {
  :root { --mobile-gutter: 12px; }
  html, body { width: 100%; max-width: 100%; overflow-x: clip; }
  body { min-width: 0; padding-bottom: calc(70px + env(safe-area-inset-bottom)); }
  body *, body *::before, body *::after { min-width: 0; }
  img, svg, canvas, video { max-width: 100%; }
  .workspace, .main, #content, #content > *, .panel, .pageBar, .metrics,
  .dashGrid, .integrationGrid, .documentWorkspace, .dwSection { width: 100%; max-width: 100%; }
  .main, [dir="rtl"] .main { margin: 0; padding: 0 var(--mobile-gutter) calc(24px + env(safe-area-inset-bottom)); }

  .main > header {
    position: sticky; inset-block-start: 0; z-index: 18;
    display: grid; grid-template-columns: 40px minmax(0, 1fr) auto;
    align-items: center; gap: 8px;
    width: calc(100% + (var(--mobile-gutter) * 2)); min-height: 72px; height: auto;
    margin-inline: calc(var(--mobile-gutter) * -1);
    padding: max(9px, env(safe-area-inset-top)) var(--mobile-gutter) 9px;
    background: rgba(246, 247, 244, .97); border-bottom: 1px solid var(--line);
    box-shadow: 0 8px 22px rgba(18, 61, 53, .06);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  }
  .hasSuperadminBar .main > header { inset-block-start: 38px; }
  .main > header > div:nth-child(2) { overflow: hidden; margin: 0; }
  .main > header small, .main > header h1 {
    display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .main > header small { font-size: 10px; letter-spacing: .06em; }
  .main > header h1 { margin: 3px 0 0; font-size: clamp(20px, 6vw, 25px); line-height: 1.12; }
  .menuButton { width: 40px; height: 40px; margin: 0; place-content: center; }
  .headerTools { flex: 0 0 auto; gap: 5px; }
  .headerTools .langSwitch, .headerTools .openingBalancesButton,
  .headerTools .openingBalanceLauncher,
  .headerTools .helpButton, .headerTools .square { display: none !important; }
  .headerTools .primaryAction { width: 40px; height: 40px; padding: 0; border-radius: 10px; }
  .headerTools .primaryAction > span:last-child { display: none; }

  .workspace > aside {
    width: min(86vw, 310px); max-width: 310px;
    padding: max(20px, env(safe-area-inset-top)) 16px calc(16px + env(safe-area-inset-bottom));
    overflow: hidden;
  }
  .appBrand { width: 100%; max-width: 100%; font-size: 22px; overflow: hidden; }
  .appBrand b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tenant, .tenantSwitcher { width: 100%; max-width: 100%; }
  .tenant { gap: 10px; padding: 11px; }
  .tenant > b { flex: 1; overflow: hidden; font-size: 15px; line-height: 1.25; }
  .tenant b small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
  .tenant > i { flex: 0 0 auto; }
  .tenant > span, .tenant > .tenantCompanyMark { flex: 0 0 44px; width: 44px; height: 44px; }
  .member b { flex: 1; overflow: hidden; font-size: 14px; }
  .member b, .member small { text-overflow: ellipsis; white-space: nowrap; }

  h1, h2, h3, h4, p, small, label, summary, .panel, .metrics article,
  .integrationCard, .attentionItem, .businessControlCard, .bcMetric, .guidanceCard {
    overflow-wrap: break-word; word-break: normal;
  }
  .pageSub, .pageBar p { font-size: 15px; line-height: 1.5; }
  .panel { padding: 14px; }
  .metrics, .dashGrid, .integrationGrid, .businessControlGrid, .bcMetrics, .guidanceGrid {
    grid-template-columns: minmax(0, 1fr) !important; gap: 10px;
  }
  .metrics article { padding: 14px; }
  .metrics small { font-size: 13px; }
  .metrics b { font-size: 20px; }
  .metrics em { font-size: 12px; }

  .pageBar { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 12px; align-items: stretch !important; }
  .docActions, .documentActions, .operationToolbar, .actionBar,
  .cardActions, .dialogActions, .shareActions {
    display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px !important; width: 100%;
  }
  .docActions > *, .documentActions > *, .operationToolbar > *, .actionBar > *,
  .cardActions > *, .dialogActions > *, .shareActions > * {
    width: 100%; min-width: 0; min-height: 44px; padding: 9px 10px;
    white-space: normal; line-height: 1.25; overflow-wrap: break-word;
    text-align: center; justify-content: center;
  }
  .docActions > :only-child, .documentActions > :only-child,
  .operationToolbar > :only-child, .actionBar > :only-child { grid-column: 1 / -1; }

  .formGrid, .legalProfileGrid, .profileGrid, .settingsGrid {
    grid-template-columns: minmax(0, 1fr) !important; gap: 13px !important;
  }
  label, .lineField, .fxRateField { max-width: 100%; }
  label > span, label > small, .lineField > span, .fxRateField > span {
    display: block; width: 100%; white-space: normal; line-height: 1.3;
  }
  input, select, textarea, button { max-width: 100%; }
  input, select, textarea { width: 100%; min-height: 46px; font-size: 16px !important; }
  textarea { min-height: 96px; resize: vertical; }
  select { text-overflow: ellipsis; }
  .fxRateControl { grid-template-columns: minmax(0, 1fr) !important; gap: 8px; }
  .fxRateControl button { width: 100%; min-height: 44px; }

  .itemRow, .documentLineRow, .productLineRow {
    display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important; width: 100%; padding: 12px;
    border: 1px solid var(--line); border-radius: 12px; background: #fbfcfb;
  }
  .itemRow .lineField-description, .itemRow .lineField-vat_category,
  .documentLineRow > :first-child, .productLineRow > :first-child { grid-column: 1 / -1; }
  .itemRow > button, .documentLineRow > button, .productLineRow > button {
    grid-column: 1 / -1; width: 100%; min-height: 42px;
  }
  .docTotal, .calculationSummary { width: 100%; margin-inline: 0; padding: 12px; }

  dialog {
    inset: 0 !important; width: calc(100vw - 16px) !important;
    max-width: calc(100vw - 16px) !important; max-height: calc(100dvh - 16px) !important;
    margin: auto !important; padding: 0 !important; overflow: hidden !important;
    border-radius: 18px !important;
  }
  dialog > form, dialog > .quickCreateBody, dialog > .dialogBody, dialog > div:first-child {
    width: 100%; max-width: 100%; max-height: calc(100dvh - 16px);
    overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch; padding: 14px !important;
  }
  dialog .dialogTitle {
    position: sticky; inset-block-start: -14px; z-index: 15;
    margin: -14px -14px 14px !important; padding: 16px 14px 13px !important;
    background: rgba(255,255,255,.98); border-bottom: 1px solid var(--line);
  }
  .dialogTitle > div, .dialogTitle h2, .dialogTitle p { min-width: 0; max-width: 100%; }
  .dialogTitle h2 { margin: 0; font-size: 21px !important; line-height: 1.2; overflow-wrap: break-word; }
  .dialogTitle p { margin: 5px 0 0; font-size: 13px; line-height: 1.4; }
  .dialogTitle button { flex: 0 0 44px; width: 44px; height: 44px; }
  dialog .save, dialog [type="submit"] { min-height: 46px; }

  .tablePanel, .tableWrap, .channelOrders, .dwSection:has(table) {
    position: relative; width: 100%; max-width: 100%; overflow: auto !important;
    overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  }
  .tableHead, .tableRow { gap: 12px; }
  .tableRow { font-size: 14px; }
  .tableRow b { font-size: 15px; }
  .tableRow small { font-size: 12px; line-height: 1.35; }
  table th, table td { vertical-align: top; line-height: 1.35; }

  .mobileNav { height: calc(66px + env(safe-area-inset-bottom)); padding-bottom: calc(7px + env(safe-area-inset-bottom)); }
  .mobileNav button { min-width: 0; font-size: 10px; }
  .mobileNav button b { display: block; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

@media (max-width: 380px) {
  :root { --mobile-gutter: 10px; }
  .main > header { grid-template-columns: 38px minmax(0, 1fr) 38px; gap: 6px; }
  .main > header h1 { font-size: 20px; }
  .docActions, .documentActions, .operationToolbar, .actionBar,
  .cardActions, .dialogActions, .shareActions { grid-template-columns: minmax(0, 1fr); }
}