/* MeuCash PWA polish — responsive companion-app layer */
:root {
  --pwa-ink: #12352a;
  --pwa-mint: #dff5ea;
  --pwa-line: color-mix(in srgb, var(--mc-border, #dfe8e2) 86%, transparent);
  --pwa-radius: 22px;
}

html { overflow-x: hidden; }
body.mc-public-body,
body:has(> .mc-layout) { min-width: 320px; overflow-x: hidden; }
body:has(> .mc-layout):not(.mc-sidebar-open):not(:has(.mc-onboarding.is-open)) {
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
}

/* The installed app must keep the document as the scroll surface. Some
   mobile WebViews inherit an inline overflow lock after a sheet/onboarding
   closes; restore vertical scrolling unless an overlay is genuinely open. */
html.mc-standalone,
html.mc-standalone body { min-height: 100%; height: auto; }
html.mc-standalone body:not(.mc-sidebar-open):not(:has(.mc-onboarding.is-open)) {
  overflow-y: auto !important;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}
html.mc-standalone .mc-layout,
html.mc-standalone .mc-main { min-height: 100dvh; height: 100dvh; overflow-y: auto !important; overflow-x: hidden; overscroll-behavior-y: contain; }
html.mc-standalone .mc-layout { min-height: 100dvh; height: 100dvh; }

.mc-layout { background: var(--mc-bg); }
.mc-main { min-width: 0; overflow-x: clip; }
.mc-content { width: 100%; min-width: 0; }
.mc-content > * { min-width: 0; }
.mc-topbar { box-shadow: 0 1px 0 rgba(18,53,42,.03); }
.mc-topbar-btn { min-width: 44px; min-height: 44px; }
.mc-nav-link, .mc-sidebar-user { min-height: 44px; }

/* Keep dense pages calm and readable on narrow screens. */
.mc-content .mc-card,
.mc-content .mc-panel,
.mc-content .mc-stat-card,
.mc-content .mc-table-card {
  border-radius: var(--pwa-radius);
  border-color: var(--pwa-line);
  box-shadow: 0 10px 28px rgba(18,53,42,.055);
}
.mc-content img, .mc-content video, .mc-content iframe { max-width: 100%; }
.mc-content pre, .mc-content code { overflow-wrap: anywhere; }
.mc-content table { max-width: 100%; }
.mc-content .table-responsive { border-radius: 16px; -webkit-overflow-scrolling: touch; }
.mc-content input, .mc-content select, .mc-content textarea { max-width: 100%; }

.mc-bottom-nav-item { min-height: 52px; }
.mc-bottom-nav-fab-btn { transition: transform .18s ease, box-shadow .18s ease; }
.mc-bottom-nav-fab:focus-visible .mc-bottom-nav-fab-btn,
.mc-bottom-nav-fab:active .mc-bottom-nav-fab-btn { transform: translateY(-2px); }

@media (max-width: 1023.98px) {
  .mc-content { padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); }
  .mc-topbar { padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); }
  .mc-page-header, .mc-section-header { gap: 12px; flex-wrap: wrap; }
  .mc-page-header > *, .mc-section-header > * { min-width: 0; }
}

@media (max-width: 767.98px) {
  .mc-main { padding-bottom: calc(102px + env(safe-area-inset-bottom)); }
  .mc-content { padding-top: 14px; padding-bottom: 24px; }
  .mc-breadcrumb { overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
  .mc-breadcrumb::-webkit-scrollbar { display: none; }
  .mc-content .row { --bs-gutter-x: .8rem; }
  .mc-content .btn-mc, .mc-content button:not(.btn-close) { min-height: 44px; }
  .mc-content .btn-mc-lg { min-height: 50px; }
  .mc-content .mc-action-row { width: 100%; }
  .mc-content .mc-action-row > * { min-width: 0; }
  .mc-content .mc-card, .mc-content .mc-panel { border-radius: 18px; }
  .mc-app-footer { margin-left: max(8px, env(safe-area-inset-left)); margin-right: max(8px, env(safe-area-inset-right)); }
}

@media (max-width: 1023.98px) {
  /* WebViews are more reliable when the app shell, rather than the body,
     owns the scrollport. This also survives stale inline body locks. */
  html.mc-standalone body { overflow: hidden !important; }
  html.mc-standalone .mc-main { height: 100dvh; max-height: 100dvh; }
  html.mc-standalone .mc-content { padding-bottom: calc(30px + env(safe-area-inset-bottom)); }
}

/* Standalone PWA: use the full device width and reserve only a slim gutter
   for readability. This removes the duplicated left/right whitespace caused
   by nested page shells while keeping safe-area cutouts respected. */
@media (max-width: 767.98px) {
  html.mc-standalone .mc-content {
    padding-left: max(6px, env(safe-area-inset-left));
    padding-right: max(6px, env(safe-area-inset-right));
  }
  html.mc-standalone .mc-topbar {
    padding-left: max(8px, env(safe-area-inset-left));
    padding-right: max(8px, env(safe-area-inset-right));
  }
  html.mc-standalone .mc-content > .container,
  html.mc-standalone .mc-content > .container-fluid,
  html.mc-standalone .mc-content > [class*="shell"] {
    width: 100%;
    max-width: none;
    padding-left: 6px;
    padding-right: 6px;
  }
  html.mc-standalone .mc-content .mc-card,
  html.mc-standalone .mc-content .mc-panel,
  html.mc-standalone .mc-content .mc-stat-card,
  html.mc-standalone .mc-content .mc-table-card {
    margin-left: 0;
    margin-right: 0;
  }
}

@media (max-width: 420px) {
  .mc-content { padding-left: 10px; padding-right: 10px; }
  .mc-topbar { gap: 6px; }
  .mc-topbar-actions { gap: 2px; }
  .mc-topbar-context { display: none !important; }
  .mc-content .btn-mc { white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* Public PWA pages use the same safe-area and touch language. */
.mc-public-body .mc-public-header { padding-top: env(safe-area-inset-top); }
.mc-public-body .mc-public-nav a,
.mc-public-body .mc-public-menu-button { min-height: 44px; }
@media (max-width: 767.98px) {
  .mc-public-body main { overflow-x: clip; }
  .mc-public-body .mc-public-footer { padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
}