/**
 * Shared mobile polish for standalone public / auth pages (≤767px).
 * Link from portal, doc-fill, invoice-public, auth pages, etc.
 */

@media (max-width: 767px) {
  /* Auth pages (accept invite, magic link) */
  .authPage {
    min-height: 100dvh;
    margin: 0;
    padding: max(24px, env(safe-area-inset-top, 0px)) 16px max(24px, env(safe-area-inset-bottom, 0px));
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    background: #f8fafc;
  }

  html[data-theme="dark"] .authPage {
    background: #0f172a;
  }

  .authCard {
    width: 100%;
    max-width: 420px;
    padding: 24px 20px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
    box-sizing: border-box;
  }

  html[data-theme="dark"] .authCard {
    background: #1e293b;
    border-color: #334155;
  }

  .authTitle {
    font-size: 20px;
    font-weight: 800;
    margin-bottom: 8px;
    color: #0f172a;
  }

  html[data-theme="dark"] .authTitle {
    color: #f1f5f9;
  }

  .authPage .btn {
    min-height: 44px;
    font-size: 16px;
  }

  .authPage div[style*="flex-wrap"] {
    flex-direction: column !important;
  }

  .authPage div[style*="flex-wrap"] .btn,
  .authPage div[style*="flex-wrap"] a.btn {
    width: 100%;
    text-align: center;
    justify-content: center;
  }

  /* Portal upload standalone */
  .portal-upload-only {
    padding: max(20px, env(safe-area-inset-top, 0px)) 16px max(32px, env(safe-area-inset-bottom, 0px)) !important;
  }

  .portal-upload-only-drop {
    padding: 28px 16px !important;
  }

  .portal-upload-only__title {
    font-size: 20px !important;
  }

  /* Calendar share */
  .container {
    margin: max(12px, env(safe-area-inset-top, 0px)) auto max(24px, env(safe-area-inset-bottom, 0px)) !important;
    padding: 0 12px !important;
  }

  .card {
    padding: 14px !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .card table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    min-width: 480px;
  }

  .slots {
    grid-template-columns: 1fr !important;
  }

  .actions {
    flex-direction: column;
  }

  .actions button {
    width: 100%;
    min-height: 44px;
    font-size: 16px;
  }

  .card input,
  .card textarea,
  .card select {
    font-size: 16px !important;
  }

  /* Signup page phone stack */
  body.signup-page,
  body:has(.signup-left) {
    flex-direction: column !important;
  }

  .signup-left,
  .signup-right {
    width: 100% !important;
    min-height: auto !important;
    padding: 24px 16px !important;
  }

  .signup-headline {
    font-size: 28px !important;
  }

  .signup-features {
    display: none !important;
  }

  /* Invoice / quote / payment public shells */
  .invoice-public-shell,
  .payment-public-shell,
  .doc-fill-shell {
    padding: max(12px, env(safe-area-inset-top, 0px)) 12px max(24px, env(safe-area-inset-bottom, 0px)) !important;
    box-sizing: border-box;
  }

  .invoice-portal-embed-bar__btn,
  .payment-public-shell .btn,
  .doc-fill-shell .btn {
    min-height: 44px;
    font-size: 16px;
  }

  /* Public form embed */
  .form-public-shell {
    padding: max(16px, env(safe-area-inset-top, 0px)) 16px max(24px, env(safe-area-inset-bottom, 0px)) !important;
  }

  .form-public-shell input,
  .form-public-shell textarea,
  .form-public-shell select {
    font-size: 16px !important;
  }

  /* Meeting Scheduler page */
  .book-page-shell {
    padding-top: max(0px, env(safe-area-inset-top, 0px));
    padding-bottom: max(0px, env(safe-area-inset-bottom, 0px));
  }

  /* Signup: theme control + safe area */
  body:has(.signup-left) {
    padding-top: env(safe-area-inset-top, 0px);
  }

  body:has(.signup-left) .theme-toggle-wrap,
  body:has(.signup-left) select[name="theme"],
  body:has(.signup-left) #themeSelect {
    margin-top: max(8px, env(safe-area-inset-top, 0px));
  }

  .signup-right .signup-form-wrap input,
  .signup-right .signup-form-wrap select,
  .signup-right .signup-form-wrap button {
    font-size: 16px !important;
    min-height: 44px;
  }

  /* Login redirect page */
  body:has(a[href*="signup"]) {
    padding: max(24px, env(safe-area-inset-top, 0px)) 16px max(24px, env(safe-area-inset-bottom, 0px));
  }

  /* Client Room portal — hero + implementation sticky CTA clearance */
  #portal-app .portal-hero {
    padding-top: max(28px, calc(16px + env(safe-area-inset-top, 0px))) !important;
  }

  #portal-app .portal-hero__title {
    font-size: clamp(22px, 6vw, 28px) !important;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  #portal-app .portal-hero__subtitle {
    overflow-wrap: anywhere;
  }

  #portal-app .portal-hero__layout {
    gap: 16px !important;
  }

  #portal-app .portal-hero__aside {
    max-width: 100% !important;
  }

  #portal-app .portal-body,
  #portal-app .portal-room-shell,
  body:has(.td-impl-sticky-cta) #portal-app {
    padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .td-impl-sticky-cta {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .td-impl-sticky-cta__btn {
    width: 100% !important;
    min-height: 48px !important;
    font-size: 16px !important;
    text-align: center !important;
  }

  .td-impl-sticky-cta__text {
    text-align: center;
  }
}