/* =============================================================================
   OrganicSystem — Sticky Footer (Flexbox)
   Short pages: footer sits at the bottom of the viewport.
   Long pages: footer follows content; page scrolls normally.
   No position:fixed / absolute. No JS height math.
   ============================================================================= */

html {
  height: 100%;
}

/* Classic shell sticky footer: flex column with content pane (scroll owned by os-app-scroll.css). */
body.os-app-shell:not(.login-shell):not(.os-module-shell):not(.os-report-layout) {
  min-height: 100dvh;
  margin-bottom: 0 !important;
  display: flex;
  flex-direction: column;
  padding-top: 0;
}

body.os-app-shell:not(.login-shell):not(.os-module-shell):not(.os-report-layout) > .os-subscription-warning,
body.os-app-shell:not(.login-shell):not(.os-module-shell):not(.os-report-layout) > .alert.os-subscription-warning,
body.os-app-shell:not(.login-shell):not(.os-module-shell):not(.os-report-layout) > header.os-app-header {
  flex: 0 0 auto;
}

body.os-app-shell:not(.login-shell):not(.os-module-shell):not(.os-report-layout) > .container-fluid {
  flex: 1 1 auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

body.os-app-shell:not(.login-shell):not(.os-module-shell):not(.os-report-layout) > .container-fluid > .os-app-main {
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
}

body.os-app-shell:not(.login-shell):not(.os-module-shell):not(.os-report-layout) > footer.os-app-footer,
body.os-app-shell:not(.login-shell):not(.os-module-shell):not(.os-report-layout) > footer.footer {
  flex: 0 0 auto;
  margin-top: 0;
  width: 100%;
}

/* ---------- Module shell (sidebar + .app-main column) ---------- */
/*
  Content pane (main.os-app-main) is the sole vertical scroll owner
  (see os-app-scroll / os-scroll / os-responsive-fix).
  flex-shrink MUST be 1 and min-height 0 so overflow-y:auto can engage —
  otherwise tall portrait content is clipped by the 100dvh shell.
  Table-fill: main still shrinks so grids fill remaining height.
*/
body.os-module-shell:not(.os-table-fill-page) .app-main > main.os-app-main.app-content,
body.os-module-shell:not(.os-table-fill-page) .app-main > main.os-app-main,
body.os-module-shell:not(.os-table-fill-page) main.os-app-main.app-content {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
}

body.os-module-shell.os-table-fill-page .app-main > main.os-app-main.app-content,
body.os-module-shell.os-table-fill-page .app-main > main.os-app-main,
body.os-module-shell.os-table-fill-page main.os-app-main.app-content {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
}

body.os-module-shell .os-app-footer {
  flex: 0 0 auto !important;
  margin-top: auto !important;
  width: 100%;
}

/* Hub pages: keep inner page filling remaining space above footer */
body.os-module-shell:has(.module-main-page) main.os-app-main.app-content,
body.os-module-shell:has(.module-main-page) .app-content.os-app-main {
  display: flex !important;
  flex-direction: column !important;
}

body.os-module-shell:has(.module-main-page) .module-main-page {
  flex: 1 0 auto;
  min-height: 0;
}

/* ---------- Marketing landing ---------- */
body.mk-page {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

body.mk-page > main {
  flex: 1 0 auto;
}

body.mk-page > .mk-footer {
  flex: 0 0 auto;
  margin-top: auto;
}

/* ---------- Login / public branded shells ---------- */
body.login-shell.login-shell-branded {
  justify-content: flex-start;
}

body.login-shell.login-shell-branded > .login-branded-layout {
  flex: 1 1 auto;
  align-self: stretch;
  width: 100%;
  min-height: 0;
}

body.login-shell.login-shell-branded > .login-cert-footer,
body.login-shell.login-shell-branded > footer.os-app-footer {
  flex: 0 0 auto;
  margin-top: auto;
  align-self: stretch;
  width: 100%;
}

body.login-shell.login-shell-scrollable {
  height: auto;
  max-height: none;
  min-height: 100dvh;
  overflow-x: clip;
  overflow-y: auto;
}

html:has(body.login-shell.login-shell-scrollable) {
  height: auto;
  max-height: none;
  overflow-x: clip;
  overflow-y: auto;
}

/* ---------- Shared footer chrome (one height, full viewport width) ---------- */
:root {
  --os-app-footer-pad-y: 0;
  --os-app-footer-font-size: 0.6875rem; /* 11px */
  --os-app-footer-line-height: 1.15;
  --os-app-footer-height: 1.5rem;
  --os-app-footer-min-height: var(--os-app-footer-height);
}

.os-app-footer,
footer.footer.os-app-footer,
footer.footer {
  position: static !important;
  display: flex;
  align-items: center;
  box-sizing: border-box !important;
  width: 100%;
  max-width: none;
  margin: 0 !important;
  padding: 0 0.75rem !important;
  height: var(--os-app-footer-height) !important;
  min-height: var(--os-app-footer-height) !important;
  max-height: var(--os-app-footer-height) !important;
  line-height: var(--os-app-footer-line-height) !important;
  font-size: var(--os-app-footer-font-size) !important;
  background: var(--os-color-surface);
  color: var(--os-color-text-muted, #64748b);
  border-top: 1px solid var(--os-color-border, #c8c8c8) !important;
  box-shadow: 0 -1px 4px rgba(15, 23, 42, 0.04);
  overflow: hidden;
  z-index: 20;
}

.os-app-footer--compact {
  --os-app-footer-pad-y: 0;
  --os-app-footer-font-size: 0.6875rem;
  --os-app-footer-min-height: var(--os-app-footer-height);
}

.os-app-footer-inner {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.25rem 0.75rem;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.os-app-footer-meta {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.2rem 0.35rem;
  color: var(--os-color-text-muted, #64748b);
  white-space: nowrap;
}

.os-app-footer-sep {
  opacity: 0.55;
}

.os-app-footer-copy,
.os-app-footer-company,
.os-app-footer-product,
.os-app-footer-version,
.os-app-footer-env {
  color: inherit;
}

.os-app-footer-env {
  text-transform: capitalize;
  font-weight: 600;
}

html[data-theme="dark"] .os-app-footer,
html[data-theme="dark"] footer.footer.os-app-footer {
  background: var(--os-color-surface, #252423) !important;
  color: var(--os-color-text-muted, #c9c7c5) !important;
  border-top-color: var(--os-color-border, rgba(255, 255, 255, 0.18)) !important;
  box-shadow: 0 -1px 6px rgba(0, 0, 0, 0.2);
}

html[data-theme="dark"] .os-app-footer-meta,
html[data-theme="dark"] .os-app-footer .text-muted {
  color: var(--os-color-text-muted, #c9c7c5) !important;
}

/* Pin branded-login footer to the viewport bottom (below the product photo).
   Must beat `.os-app-footer { margin: 0 !important }` above. */
body.login-shell.login-shell-branded > .login-cert-footer,
body.login-shell.login-shell-branded > footer.os-app-footer,
body.login-shell.login-shell-branded > footer.footer.os-app-footer {
  margin-top: auto !important;
  margin-bottom: 0 !important;
  background: var(--os-color-surface);
  position: relative;
  z-index: 20;
}

/* Module shell: footer is a body-level row spanning under the sidebar. */
body.os-module-shell.has-sidebar {
  grid-template-rows: minmax(0, 1fr) var(--os-app-footer-height);
  grid-template-areas:
    "sidebar main"
    "footer footer";
}

body.os-module-shell.has-sidebar > footer.os-app-footer,
body.os-module-shell.has-sidebar > footer.footer.os-app-footer {
  grid-area: footer;
  grid-column: 1 / -1;
  grid-row: 2;
  width: 100%;
  max-width: none;
  margin: 0 !important;
  z-index: 45;
}

@media (max-width: 575.98px) {
  .os-app-footer-inner {
    flex-wrap: nowrap;
    justify-content: space-between;
    text-align: start;
    row-gap: 0;
  }

  .os-app-footer-meta {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* Kill leftover Bootstrap pb-* empty band above the footer strip */
body.os-module-shell .app-main > main.os-app-main.pb-3,
body.os-module-shell .app-main > main.os-app-main.app-content.pb-3,
body.os-app-shell main.os-app-main.pb-3,
body.os-app-shell main.os-app-main.app-content.pb-3,
main.os-app-main.pb-1,
main.os-app-main.pb-2,
main.os-app-main.pb-3,
main.os-app-main.pb-4,
main.os-app-main.pb-5 {
  padding-bottom: 0 !important;
}