/*
 * Unified compact workspace.
 * This is deliberately attached by mobile-app.js only to authenticated app
 * pages that contain the project header, leaving login and public documents
 * untouched.
 */
body.project-workspace-page input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="range"]),
body.project-workspace-page select,
body.project-workspace-page .smart-select-input {
  width: 100%;
  min-width: 0 !important;
  max-width: 100% !important;
  height: 34px !important;
  min-height: 34px !important;
  padding: 5px 9px !important;
  border-radius: 9px !important;
  font-size: 12px !important;
  line-height: 1.25 !important;
  box-sizing: border-box !important;
}

body.project-workspace-page textarea {
  width: 100%;
  min-width: 0 !important;
  max-width: 100% !important;
  min-height: 52px !important;
  max-height: 78px !important;
  padding: 7px 9px !important;
  border-radius: 9px !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
  resize: none !important;
  box-sizing: border-box !important;
}

body.project-workspace-page button,
body.project-workspace-page .btn,
body.project-workspace-page .back-btn,
body.project-workspace-page input[type="submit"],
body.project-workspace-page input[type="button"] {
  min-height: 34px !important;
  height: 34px !important;
  padding: 5px 12px !important;
  border-radius: 9px !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
  box-sizing: border-box !important;
}

body.project-workspace-page label,
body.project-workspace-page .field-label {
  font-size: 11px !important;
  line-height: 1.35 !important;
}

body.project-workspace-page .filter-box,
body.project-workspace-page .filters,
body.project-workspace-page .filter-row {
  padding: 10px 12px !important;
  margin-bottom: 8px !important;
  border-radius: 12px !important;
}

body.project-workspace-page .filter-form {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
  align-items: end !important;
  gap: 7px 9px !important;
}

body.project-workspace-page .filter-form > * {
  min-width: 0 !important;
  max-width: 100% !important;
}

body.project-workspace-page .filter-form label {
  margin: 0 0 4px !important;
}

body.project-workspace-page .smart-select {
  min-width: 0 !important;
  max-width: 100% !important;
  margin-bottom: 0 !important;
}

body.project-workspace-page .smart-select-list {
  max-height: 210px !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

body.project-workspace-page .smart-select-list::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

/*
 * Unified record viewport: the surrounding page remains fixed; only table
 * rows move.  Column headings and all total rows stay visible.
 */
body.project-record-page .container,
body.project-record-page .page-container,
body.project-record-page .main-container,
body.project-record-page main,
body.project-record-page .content-wrapper {
  min-height: 0 !important;
  overflow: hidden !important;
}

body.project-record-page:has(.project-tabbed-layout) .container,
body.project-record-page:has(.project-tabbed-layout) .page-container,
body.project-record-page:has(.project-tabbed-layout) .main-container,
body.project-record-page:has(.project-tabbed-layout) main,
body.project-record-page:has(.project-tabbed-layout) .content-wrapper {
  display: flex !important;
  flex-direction: column !important;
}

body.project-record-page .project-entry-record-tabs {
  flex: 0 0 42px !important;
  height: 42px !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 150px)) !important;
  justify-content: end !important;
  align-items: center !important;
  gap: 7px !important;
  padding: 4px 0 !important;
  margin: 0 0 7px !important;
}

body.project-record-page .project-entry-record-tabs .project-view-tab {
  width: 100% !important;
  border: 1px solid #bfd6f8 !important;
  background: #fff !important;
  color: #17324d !important;
  box-shadow: none !important;
}

body.project-record-page .project-entry-record-tabs .project-view-tab.is-active {
  border-color: #168a87 !important;
  background: linear-gradient(135deg, #0f766e, #2563eb) !important;
  color: #fff !important;
}

body.project-record-page .project-tabbed-layout {
  flex: 1 1 auto !important;
  height: auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
  display: block !important;
}

body.project-record-page .project-tabbed-layout > .project-entry-panel,
body.project-record-page .project-tabbed-layout > .project-record-panel {
  display: none !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
}

body.project-record-page .project-tabbed-layout > .is-project-active-panel {
  display: flex !important;
  flex-direction: column !important;
}

body.project-record-page .project-entry-panel > .panel-head,
body.project-record-page .project-record-panel > .panel-head {
  flex: 0 0 auto !important;
  padding: 9px 12px 6px !important;
}

body.project-record-page .project-entry-panel > .panel-body,
body.project-record-page .project-record-panel > .panel-body {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
  padding: 7px 12px 10px !important;
}

body.project-record-page .project-entry-panel > .panel-body {
  overflow: auto !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

body.project-record-page .project-entry-panel > .panel-body::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

body.project-record-page .project-record-panel > .panel-body {
  display: flex !important;
  flex-direction: column !important;
}

body.project-record-page .project-record-panel .list-tools,
body.project-record-page .project-record-panel .search-box,
body.project-record-page .project-record-panel .filters,
body.project-record-page .project-record-panel .filter-row {
  flex: 0 0 auto !important;
}

body.project-record-page .project-record-scroll:has(> .companies-table-scroll),
body.project-record-page .project-record-scroll:has(> [class*="table-scroll"]) {
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

body.project-record-page .project-record-scroll > .companies-table-scroll,
body.project-record-page .project-record-scroll > [class*="table-scroll"] {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: auto !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

body.project-record-page .project-record-scroll > .companies-table-scroll::-webkit-scrollbar,
body.project-record-page .project-record-scroll > [class*="table-scroll"]::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

body.project-record-page .project-record-host {
  min-height: 0 !important;
  max-height: 100% !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}

body.project-record-page .project-record-scroll {
  position: relative !important;
  flex: 1 1 auto !important;
  min-height: 110px !important;
  max-height: 100% !important;
  overflow: auto !important;
  overscroll-behavior: contain !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
  scrollbar-gutter: auto !important;
}

body.project-record-page .project-record-scroll::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

body.project-record-page .project-record-scroll table {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

body.project-record-page .project-record-scroll .project-record-heading {
  position: sticky !important;
  top: 0 !important;
  z-index: 8 !important;
  background-clip: padding-box !important;
}

body.project-record-page .project-record-scroll .project-record-total {
  position: sticky !important;
  bottom: 0 !important;
  z-index: 7 !important;
  background: #155e75 !important;
  color: #fff !important;
  background-clip: padding-box !important;
}

body.project-record-page .section-summary,
body.project-record-page .summary-box,
body.project-record-page .table-summary,
body.project-record-page .list-summary {
  flex: 0 0 auto !important;
}

@media (max-width: 768px), (max-width: 1000px) and (max-height: 600px) {
  body.project-workspace-page input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="range"]),
  body.project-workspace-page select,
  body.project-workspace-page textarea,
  body.project-workspace-page .smart-select-input {
    font-size: 16px !important;
  }
}

.container,
.page-container,
.main-container,
.content,
.content-wrapper,
main {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: auto !important;
  padding-left: var(--app-shell-gap) !important;
  padding-right: var(--app-shell-gap) !important;
  background: transparent !important;
}

/* Shares pages use the same central tabbed workspace as definitions. */
html body.shares-package-page.shares-view-entry .subpage-entry-box {
  display: flex;
  flex-direction: column;
}

html body.shares-package-page.shares-view-record .subpage-record-box {
  display: flex;
  flex-direction: column;
}

html body.shares-package-page .shares-direct-workspace {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 14px 16px;
  overflow: auto;
  scrollbar-width: none;
}

html body.shares-package-page.shares-view-entry .shares-direct-workspace {
  gap: 16px;
}

html body.shares-package-page.shares-package-management.shares-view-entry .shares-direct-workspace {
  justify-content: center;
}

html body.shares-package-page .shares-entry-guide {
  display: grid;
  grid-template-columns: minmax(260px, 0.9fr) minmax(0, 1.8fr);
  gap: 16px;
  padding: 18px;
  border: 1px solid #c7e4df;
  border-radius: 18px;
  background: linear-gradient(115deg, #edf9f6 0%, #f4f8ff 62%, #fff8ec 100%);
  box-shadow: 0 12px 28px rgba(18, 101, 106, 0.08);
}

html body.shares-package-page .shares-entry-guide-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
}

html body.shares-package-page .shares-entry-guide-eyebrow {
  color: #087b70;
  font-size: 12px;
  font-weight: 800;
}

html body.shares-package-page .shares-entry-guide h2 {
  margin: 0;
  color: #0b5e58;
  font-size: clamp(18px, 1.45vw, 24px);
}

html body.shares-package-page .shares-entry-guide p {
  margin: 0;
  color: #66758c;
  font-size: 13px;
  line-height: 1.75;
}

html body.shares-package-page .shares-entry-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

html body.shares-package-page .shares-entry-step {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 72px;
  padding: 10px 12px;
  border: 1px solid #d5e5f4;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.88);
}

html body.shares-package-page .shares-entry-step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  border-radius: 10px;
  color: #fff;
  font-weight: 900;
  background: linear-gradient(135deg, #0f8178, #286ce6);
  box-shadow: 0 6px 14px rgba(40, 108, 230, 0.2);
}

html body.shares-package-page .shares-entry-step strong,
html body.shares-package-page .shares-entry-step small {
  display: block;
}

html body.shares-package-page .shares-entry-step strong {
  color: #164b53;
  font-size: 13px;
}

html body.shares-package-page .shares-entry-step small {
  margin-top: 3px;
  color: #77869b;
  font-size: 11px;
  line-height: 1.55;
}

@media (max-width: 900px) {
  html body.shares-package-page .shares-entry-guide {
    grid-template-columns: 1fr;
  }

  html body.shares-package-page .shares-entry-steps {
    grid-template-columns: 1fr;
  }
}

html body.shares-package-page .shares-direct-workspace::-webkit-scrollbar,
html body.shares-package-page .project-record-scroll::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

html body.shares-package-page .shares-record-workspace > form,
html body.shares-package-page .shares-record-workspace > .filters-bar {
  flex: 0 0 auto;
}

html body.shares-package-page .shares-record-workspace > .project-record-scroll {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow: auto;
}

html body.shares-package-page .project-record-scroll thead th {
  position: sticky;
  top: 0;
  z-index: 9;
  background: #0f6b61;
  color: #fff;
}

html body.shares-package-page .project-record-scroll tfoot td {
  position: sticky;
  bottom: 0;
  z-index: 8;
}

#report-details,
body > .section,
body > .panel,
body > .package-panel {
  max-height: 100% !important;
  overflow: auto !important;
}

.table-wrap,
.table-container,
.report-table-wrap,
.expiry-table-wrap {
  max-width: 100% !important;
  overflow: auto !important;
  box-sizing: border-box !important;
}

@media (max-width: 700px) {
  :root {
    --app-shell-gap: 16px;
  }
}

/*
 * Real compact-device layout. Portrait and landscape phones switch from the
 * centred desktop frame to normal document flow; no page-level scaling.
 */
@media (max-width: 768px), (max-width: 1000px) and (max-height: 600px) {
  html:not(.project-embedded-document) {
    width: 100% !important;
    min-height: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  html:not(.project-embedded-document) body:not(.embedded-transactions) {
    width: 100% !important;
    height: auto !important;
    min-height: 100dvh !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    position: static !important;
    inset: auto !important;
    transform: none !important;
    transform-origin: initial !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  html:not(.project-embedded-document) body:not(.embedded-transactions) > :where(
    .container,
    .page-container,
    .main-container,
    .content,
    .content-wrapper,
    main
  ) {
    flex: 0 0 auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  html:not(.project-embedded-document) body:not(.embedded-transactions) :where(
    .topbar,
    .header-actions,
    .toolbar,
    .actions,
    .button-row
  ) {
    flex-wrap: wrap !important;
  }

  html:not(.project-embedded-document) body:not(.embedded-transactions) :where(
    .table-wrap,
    .table-container,
    .table-responsive,
    .report-table-wrap,
    .directory-table,
    .expiry-table-wrap,
    .mobile-table-scroll,
    .project-record-scroll
  ) {
    max-width: 100% !important;
    overflow-x: auto !important;
    overscroll-behavior-inline: contain !important;
    -webkit-overflow-scrolling: touch;
  }
}

@media print {
  html,
  body {
    width: 100% !important;
    height: auto !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    position: static !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    overflow: visible !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    display: block !important;
  }
}