/* Final responsive contract shared by every Tiqure surface.
   Keep this file loaded last so production fixes do not depend on stylesheet order. */
:root {
  --mobile-page-gutter: clamp(10px, 3.5vw, 20px);
  --touch-target: 44px;
}

html {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
}

body {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: clip;
}

img,
svg,
video,
canvas {
  max-width: 100%;
}

button,
input,
select,
textarea {
  max-width: 100%;
  font: inherit;
}

input,
select,
textarea {
  min-width: 0;
}

:where(.table-wrap, .table-scroll, .report-table-wrap, .responsive-table, [data-table-scroll]) {
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
}

:where(.modal-card, .dialog-card, .task-modal-card, [role='dialog']) {
  max-width: calc(100vw - (2 * var(--mobile-page-gutter)));
  max-height: calc(100dvh - (2 * var(--mobile-page-gutter)));
  overflow: auto;
  overscroll-behavior: contain;
}

/* Authentication must fit the smallest supported phone without clipping. */
.login-page .login-wrap {
  width: 100%;
  max-width: 100%;
}

.login-page .login-card,
.login-page #signupCard {
  width: min(390px, 100%) !important;
  max-width: 100% !important;
  min-width: 0;
  margin-inline: auto;
}

.login-page .login-form,
.login-page .login-role-picker,
.login-page .login-role-option,
.login-page .login-form input:not([type='radio']) {
  width: 100%;
  min-width: 0;
}

/* Public website: prevent large display copy and consent actions escaping the viewport. */
.site-shell,
.nav-wrap,
.hero,
.hero-copy,
.hero-actions,
.visitor-consent {
  min-width: 0;
  max-width: 100%;
}

.hero h1,
.hero h2,
.hero p,
.mission-benefits li,
.visitor-consent p {
  overflow-wrap: anywhere;
}

.visitor-consent {
  max-height: calc(100dvh - 24px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Operational shells may contain wide tables, but the page itself must never become wide. */
:where(
  .app-shell,
  .app,
  .main,
  .main-content,
  .content,
  .pos-app,
  .pos-workspace,
  .driver-app,
  .admin-app,
  .controller-app,
  .profit-app,
  .webshop-app
) {
  min-width: 0;
  max-width: 100%;
}

@media (max-width: 640px) {
  :where(button, [role='button'], input, select, textarea) {
    min-height: var(--touch-target);
  }

  :where(
    .icon-btn,
    .hamburger-btn,
    .language-trigger,
    input[type='radio'],
    input[type='checkbox']
  ) {
    min-height: initial;
  }

  :where(.card, .panel, .report-card, .info-card) {
    max-width: 100%;
  }

  .login-page .login-wrap {
    align-items: flex-start;
    padding: 10px;
  }

  .login-page .login-card,
  .login-page #signupCard {
    padding: 14px;
    border-radius: 12px;
  }

  .login-page .login-actions,
  .login-page .login-signup-link {
    flex-wrap: wrap;
  }

  .visitor-consent {
    right: 8px;
    bottom: max(8px, env(safe-area-inset-bottom));
    left: 8px;
    width: auto;
    padding: 14px;
    border-radius: 12px;
  }

  .visitor-consent button,
  .visitor-settings {
    display: block;
    width: 100%;
    margin-top: 8px;
  }

  .hero {
    width: 100%;
    padding-inline: var(--mobile-page-gutter);
  }

  .hero h1 {
    width: 100%;
    font-size: clamp(32px, 11vw, 44px);
    line-height: 1.04;
  }

  .hero-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    width: 100%;
    gap: 14px;
  }

  .hero-actions .button {
    width: 100%;
    min-width: 0;
  }

  .hero-actions .text-link {
    width: fit-content;
    max-width: 100%;
  }

  .pos-expiry-panel {
    top: max(8px, env(safe-area-inset-top));
    right: var(--mobile-page-gutter);
    left: var(--mobile-page-gutter);
    width: auto;
    max-height: calc(100dvh - 16px - env(safe-area-inset-top));
  }
}

@media (max-width: 360px) {
  .login-page .login-role-picker {
    grid-template-columns: minmax(0, 1fr);
  }

  .login-page .login-actions .primary-btn {
    width: 100%;
    min-width: 0;
  }

  .hero h1 {
    font-size: clamp(30px, 10.5vw, 38px);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}