/*
 * Authoritative workspace orientation policy.
 *
 * Phone portrait uses a native single-column document flow. Phone landscape
 * receives a 1280px logical viewport from ui_system.php, so it renders the
 * same desktop composition instead of passing through compact breakpoints.
 * This file is intentionally loaded after page styles to resolve legacy
 * selector conflicts in one central place.
 */

html.project-phone-portrait,
html.project-phone-portrait body {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: clip !important;
}

html.project-phone-portrait body {
  height: auto !important;
  min-height: 100dvh !important;
  max-height: none !important;
  margin: 0 !important;
  position: static !important;
  inset: auto !important;
  transform: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

html.project-phone-portrait body > :where(
  .container,
  .page-container,
  .main-container,
  .content,
  .content-wrapper,
  main,
  .section,
  .panel,
  .package-panel
) {
  min-width: 0 !important;
  max-width: 100% !important;
  transform: none !important;
}

html.project-phone-portrait body > :where(
  .container,
  .page-container,
  .main-container,
  .content,
  .content-wrapper,
  main
) {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
}

html.project-phone-portrait body :where(
  .card,
  .panel,
  .section,
  .package-panel,
  .filter-box,
  .filters,
  .summary-box,
  .hero,
  .hero-box
) {
  min-width: 0 !important;
  max-width: 100% !important;
}

/* Tables keep their columns and scroll inside their own record viewport. */
html.project-phone-portrait body :where(
  .table-wrap,
  .table-scroll,
  .table-container,
  .table-responsive,
  .report-table-wrap,
  .report-table-scroll,
  .directory-table,
  .expiry-table-wrap,
  .mobile-table-scroll,
  .project-record-scroll
) {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  overflow-y: visible;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
}

html.project-phone-portrait body :where(
  .table-wrap,
  .table-scroll,
  .table-container,
  .table-responsive,
  .report-table-wrap,
  .report-table-scroll,
  .directory-table,
  .expiry-table-wrap,
  .mobile-table-scroll,
  .project-record-scroll
) > table {
  width: max(100%, var(--mobile-table-min, 320px)) !important;
  min-width: 0 !important;
  max-width: none !important;
  table-layout: auto !important;
}

html.project-phone-portrait body :where(
  .table-wrap,
  .table-scroll,
  .table-container,
  .table-responsive,
  .report-table-wrap,
  .report-table-scroll,
  .directory-table,
  .expiry-table-wrap,
  .mobile-table-scroll,
  .project-record-scroll
) :where(th, td) {
  width: auto !important;
  min-width: 0 !important;
  max-width: 290px !important;
  white-space: nowrap !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
}

/* Canonical report portrait: copy, two-column summary, actions, filters, log. */
html.project-phone-portrait body.reports-workspace-page .report-view,
html.project-phone-portrait body.reports-workspace-page .reports-center {
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: 10px !important;
  overflow: visible !important;
}

html.project-phone-portrait body.reports-workspace-page .report-overview-box,
html.project-phone-portrait body.report-expiries-page .report-overview-box,
html.project-phone-portrait body.reports-workspace-page .report-overview-box--no-summary {
  width: 100% !important;
  min-width: 0 !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-areas: "copy" "summary" "actions" !important;
  gap: 10px !important;
  padding: 14px !important;
  direction: rtl !important;
  overflow: hidden !important;
}

html.project-phone-portrait body.reports-workspace-page .report-overview-copy {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow-wrap: anywhere !important;
}

html.project-phone-portrait body.reports-workspace-page .report-summary {
  width: 100% !important;
  min-width: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 7px !important;
}

html.project-phone-portrait body.reports-workspace-page .summary-card {
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  padding: 9px !important;
}

html.project-phone-portrait body.reports-workspace-page .report-actions {
  width: 100% !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 7px !important;
}

html.project-phone-portrait body.reports-workspace-page .report-actions > * {
  width: 100% !important;
  min-width: 0 !important;
}

html.project-phone-portrait body.reports-workspace-page .report-filters,
html.project-phone-portrait body.reports-workspace-page .report-filters--expiries {
  width: 100% !important;
  min-width: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 8px !important;
}

html.project-phone-portrait body.reports-workspace-page .report-filters > * {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

html.project-phone-portrait body.reports-workspace-page .report-table-shell {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  display: grid !important;
  grid-template-rows: auto auto minmax(180px, auto) auto !important;
  overflow: hidden !important;
}

/* Landscape phones are desktop workspaces; only the outer frame loses margin. */
html.project-phone-landscape {
  min-width: 1280px !important;
  overflow: hidden !important;
}

html.project-phone-landscape body {
  --app-shell-width: calc(100vw - 16px);
  --app-shell-height: calc(100dvh - 16px);
  border-radius: 14px !important;
}

html.project-phone-landscape body :where(
  button,
  input,
  select,
  textarea,
  .btn,
  .back-btn,
  [role="button"]
) {
  min-height: 44px !important;
}

/* Embedded workspaces already live inside the parent's 1280px desktop canvas.
 * They must use the iframe's available width and a vertical document flow;
 * forcing another 1280px minimum inside a shorter frame clips the left edge
 * and makes the form and subtype manager overlap each other. */
html.project-phone-landscape.embedded-transactions-document {
  width: 100% !important;
  min-width: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

html.project-phone-landscape.embedded-transactions-document body {
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  max-height: none !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

html.project-phone-landscape .embedded-mode-entry .layout-grid {
  height: auto !important;
  min-height: 100% !important;
  overflow: visible !important;
}

html.project-phone-landscape .embedded-mode-entry .transactions-entry-box,
html.project-phone-landscape .embedded-mode-entry .transactions-entry-box.has-subtype-manager {
  height: auto !important;
  max-height: none !important;
  grid-template-rows: auto auto auto !important;
  overflow: visible !important;
}

html.project-phone-landscape .embedded-mode-entry #expense-form-panel {
  justify-content: flex-start !important;
}

/* Settings logs are intentionally short and remain fully visible without a
 * sideways record viewport. Data-heavy operational tables keep the scrolling
 * policy above. */
html.project-phone-portrait body.settings-module-page .table-wrap {
  overflow-x: hidden !important;
}

html.project-phone-portrait body.settings-module-page .table-wrap > table {
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  table-layout: fixed !important;
}

html.project-phone-portrait body.settings-module-page .table-wrap :where(th, td) {
  max-width: none !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}

/* Package cards keep one visual hierarchy in portrait too. The generic
 * runtime card rule aligns ordinary form cards to the reading edge; package
 * links are navigation controls and must remain centred as one clickable
 * unit without changing their approved dimensions. */
@media (max-width: 768px) {
  .ui-package-card {
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
  }

  .ui-package-card > .ui-package-icon {
    margin: 0 auto 2px !important;
  }

  .ui-package-card > :where(h2, h3, p) {
    width: 100% !important;
    text-align: center !important;
  }

  .company-dashboard-page .ui-package-card > .ui-package-icon {
    flex: 0 0 38px !important;
    width: 38px !important;
    height: 38px !important;
  }
}