/* Phone-specific presentation. Keep bookkeeping and report logic in their modules. */
:root{--mobile-safe-top:env(safe-area-inset-top,0px);--mobile-safe-bottom:env(safe-area-inset-bottom,0px);--mobile-safe-left:env(safe-area-inset-left,0px);--mobile-safe-right:env(safe-area-inset-right,0px)}
.mobileInstallEntry{margin-top:14px;display:flex;justify-content:flex-start}
.mobileInstallButton{border:1px solid var(--brand-line);background:transparent;color:var(--brand-teal);padding:10px 14px;border-radius:12px;min-height:44px;font:inherit;cursor:pointer;white-space:normal}
.workspaceSidebar .mobileInstallButton{color:var(--brand-sidebar-text);border-color:var(--brand-sidebar-line);width:100%;text-align:start}
.mobileInstallDialog{border:1px solid var(--brand-line);border-radius:20px;background:var(--brand-panel);color:var(--brand-slate);padding:24px;width:min(440px,calc(100vw - 32px));max-height:calc(var(--mobile-viewport-height,100dvh) - 32px);overflow:auto;box-sizing:border-box}
.mobileInstallDialog::backdrop{background:rgba(11,45,92,.45);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.mobileInstallDialog h2{margin:0 0 20px;font-size:24px}
.mobileInstallDialog h3{margin:18px 0 5px;font-size:16px}
.mobileInstallDialog p{font-size:16px;line-height:1.6;margin:0 0 12px}
.mobileInstallDialog button,.mobileOfflineCard button{background:var(--brand-teal);color:#fff;border:0;border-radius:12px;padding:14px 20px;min-height:48px;font:inherit;cursor:pointer}
.mobileConnectionNotice{position:sticky;top:0;z-index:49;background:var(--brand-amber-soft);color:var(--brand-amber);font:inherit;font-size:14px;line-height:1.5;padding:12px max(18px,var(--mobile-safe-right)) 12px max(18px,var(--mobile-safe-left));border-bottom:1px solid var(--brand-amber-line)}
.mobileOfflinePage{margin:0;background:var(--brand-bg);color:var(--brand-slate);font:16px/1.6 system-ui,sans-serif;min-height:100vh;min-height:100dvh;display:grid;place-items:center;padding:max(24px,var(--mobile-safe-top)) max(24px,var(--mobile-safe-right)) max(24px,var(--mobile-safe-bottom)) max(24px,var(--mobile-safe-left));box-sizing:border-box}
.mobileOfflineCard{max-width:420px;width:100%;box-sizing:border-box;background:var(--brand-panel);border:1px solid var(--brand-line);border-radius:20px;padding:28px;overflow-wrap:anywhere}
.mobileOfflineCard h1{font-size:28px;line-height:1.3}.mobileOfflineCard p{margin:12px 0 22px}
.mobileOfflineCard [hidden],.mobileInstallEntry[hidden],.mobileConnectionNotice[hidden]{display:none!important}
.mobileOfflinePage .i18nPrimary,.mobileOfflinePage .i18nSecondary{display:block}
.mobileOfflinePage .i18nSecondary{margin-top:4px;font-size:.85em;opacity:.8}
button,.button{touch-action:manipulation}
@media(max-width:760px),(pointer:coarse){
  .simpleModeRoot{padding-top:var(--mobile-safe-top);padding-left:max(18px,var(--mobile-safe-left));padding-right:max(18px,var(--mobile-safe-right));padding-bottom:max(20px,var(--mobile-safe-bottom))}
  .authscreen{min-height:100dvh;padding:max(14px,var(--mobile-safe-top)) max(14px,var(--mobile-safe-right)) max(14px,var(--mobile-safe-bottom)) max(14px,var(--mobile-safe-left))}
  .workspaceHeader{padding-top:calc(13px + var(--mobile-safe-top));padding-left:max(14px,var(--mobile-safe-left));padding-right:max(14px,var(--mobile-safe-right))}
  main#mainMount,html[dir="rtl"] main#mainMount{padding-left:max(18px,var(--mobile-safe-left));padding-right:max(18px,var(--mobile-safe-right));padding-bottom:max(20px,var(--mobile-safe-bottom))}
  body.simpleMode #mainMount{padding:0!important}
  .workspaceSidebar{padding-top:calc(27px + var(--mobile-safe-top));padding-bottom:calc(18px + var(--mobile-safe-bottom));padding-left:max(18px,var(--mobile-safe-left));padding-right:max(18px,var(--mobile-safe-right))}
  .modal.open{top:var(--mobile-viewport-top,0px);bottom:auto;height:var(--mobile-viewport-height,100dvh);padding:max(12px,var(--mobile-safe-top)) max(12px,var(--mobile-safe-right)) max(12px,var(--mobile-safe-bottom)) max(12px,var(--mobile-safe-left));box-sizing:border-box}
  .modal .dialog{max-height:calc(var(--mobile-viewport-height,100dvh) - max(12px,var(--mobile-safe-top)) - max(12px,var(--mobile-safe-bottom)))!important;overscroll-behavior:contain}
  input,select,textarea,.simpleReportPeriod input,.simpleLanguage,.recordSearch input{font-size:16px!important}
  input[type="date"]{min-width:0;max-width:100%}
  #reportsSection .reportDates{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* Keep the native language picker, with a bounded collapsed control. Safari's
     built-in appearance can retain RTL overflow after repeated locale changes. */
  .simpleLanguage{width:104px;min-width:0;-webkit-appearance:none;appearance:none;overflow:hidden;text-overflow:ellipsis;padding-inline-end:28px;background-repeat:no-repeat;background-size:12px 8px;background-position:right 8px center;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='m1 2 5 4 5-4' fill='none' stroke='%230B2D5C' stroke-width='1.5'/%3E%3C/svg%3E")}
  html[dir="rtl"] .simpleLanguage{background-position:left 8px center}
  .sidebarToggle,.signOutButton,.modal button,.button{min-height:44px;min-width:44px}
  #cameraModal .preview{min-height:0!important}
  #cameraVideo{max-height:calc(var(--mobile-viewport-height,100dvh) * .45)!important}
  #cameraModal .modalActions{flex-wrap:wrap}
  .mobileInstallEntry button{width:100%}
  .mobileConnectionNotice{padding-top:calc(12px + var(--mobile-safe-top))}
}
@media(min-width:761px) and (display-mode:standalone){
  .workspaceSidebar{padding-top:calc(29px + var(--mobile-safe-top));padding-bottom:calc(18px + var(--mobile-safe-bottom))}
}