/*
 * Al Shams fixed application shell.
 * Keeps the whole interface inside one fixed-size app frame.
 * Does not replace page colors, cards, buttons, or table styles.
 */
:root {
  --app-shell-width: 1280px;
  --app-shell-height: 820px;
  --app-shell-gap: 16px;
  --app-shell-border: rgba(29, 142, 196, .72);
  --app-shell-header-a: #0f766e;
  --app-shell-header-b: #2563eb;
  --app-shell-surface: #f4f9fb;
  --app-shell-surface-soft: #eef8f5;
  --app-shell-scale: 1;
}

html {
  width: 100%;
  min-height: 100%;
  overflow: hidden;
  background: linear-gradient(180deg, #eef6fb 0%, #f8fbf7 48%, #f4f7fb 100%);
}

body {
  width: var(--app-shell-width) !important;
  height: var(--app-shell-height) !important;
  max-width: var(--app-shell-width) !important;
  max-height: var(--app-shell-height) !important;
  margin: 0 !important;
  position: fixed !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) scale(var(--app-shell-scale)) !important;
  transform-origin: center center !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  border: 3px solid var(--app-shell-border) !important;
  border-radius: 21px !important;
  box-shadow: 0 18px 48px rgba(15, 118, 110, .11), 0 8px 28px rgba(37, 99, 235, .09) !important;
  background: linear-gradient(135deg, rgba(235, 249, 246, .82) 0%, rgba(243, 248, 255, .9) 52%, rgba(249, 246, 255, .72) 100%) !important;
  background-clip: padding-box !important;
}

html:has(body.embedded-transactions) {
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
  background: transparent !important;
}

body.embedded-transactions {
  width: 100% !important;
  height: 100% !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: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

html.project-embedded-document body {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  position: static !important;
  left: auto !important;
  top: auto !important;
  transform: none !important;
  transform-origin: initial !important;
}

body.embedded-transactions .container {
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}

.header {
  flex: 0 0 auto !important;
  width: 100% !important;
  min-height: 64px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  border-radius: 17px 17px 0 0 !important;
  background: linear-gradient(135deg, var(--app-shell-header-a) 0%, var(--app-shell-header-b) 100%) !important;
  color: #ffffff !important;
  box-shadow: none !important;
  letter-spacing: 0 !important;
}

.topbar {
  flex: 0 0 auto !important;
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
  background: rgba(255, 255, 255, .92) !important;
  border-top: 1px solid rgba(219, 234, 254, .92) !important;
  border-bottom: 1px solid rgba(207, 232, 227, .72) !important;
  box-shadow: none !important;
}

.container,
.page-container,
.main-container,
.content,
.content-wrapper,
main,
#report-details,
body > .section,
body > .panel,
body > .package-panel {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
}

/*
 * 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) {
  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 package: keep the application header and package tabs fixed while
 * the active page content scrolls without exposing a scrollbar.
 */
html body.shares-package-page.project-record-page > .container,
html body.shares-package-page.project-record-page > .page-container,
html body.shares-package-page.project-record-page > .main-container {
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

html body.shares-package-page.project-record-page > .container::-webkit-scrollbar,
html body.shares-package-page.project-record-page > .page-container::-webkit-scrollbar,
html body.shares-package-page.project-record-page > .main-container::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

html body.shares-package-page .shares-package-tabs {
  position: sticky !important;
  top: 0 !important;
  z-index: 60 !important;
  flex: 0 0 auto !important;
  padding: 4px 0 8px !important;
  margin: 0 0 6px !important;
  background: linear-gradient(
    180deg,
    rgba(239, 248, 251, .98) 0%,
    rgba(239, 248, 251, .94) 76%,
    rgba(239, 248, 251, 0) 100%
  ) !important;
  backdrop-filter: blur(8px);
}

#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;
  }
}

@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;
  }
}