/**
 * 关键布局回退：在 Tailwind 样式未加载或被拦截时，仍保持全屏高度与主区域滚动，
 * 避免出现「整页白屏 / 高度为 0」。
 * 视觉：德式商务风见 business-ui.css；此处仅布局回退。
 */
html {
  height: 100%;
  overflow: hidden;
}

body {
  min-height: 100%;
  min-height: 100dvh;
  height: 100%;
  margin: 0;
  overflow: hidden;
  font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
}

.app-surface {
  font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
}

body > .flex.h-full,
body > div.flex {
  box-sizing: border-box;
  min-width: 0;
  min-height: 100dvh;
  /* 窄屏为纵向 stack：与 body 同高，#app 的 flex-1 才能拿到剩余高度 */
  height: 100%;
  max-height: 100dvh;
  display: flex;
  flex-direction: column;
}

@media (min-width: 768px) {
  body > .flex.h-full,
  body > div.flex {
    flex-direction: row;
    height: 100vh;
    height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
  }
}

#app {
  flex: 1 1 0%;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/**
 * 主滚动区必须与 Tailwind `flex-1 min-h-0` 一致：`flex-basis: 0%` 才能在嵌套 flex 中正确分配剩余高度；
 * 使用 `1 1 auto` 时部分浏览器下会出现主区域高度为 0、右栏空白的现象。
 */
#app-scroll {
  flex: 1 1 0%;
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/**
 * 桌面：侧栏定高、外框不随主区滚动；仅中间导航在侧栏内可滚。
 * （侧栏为 flex 子项，需 min-h-0 方能在 flex 中正确收束高度。）
 */
@media (min-width: 768px) {
  #app-sidebar {
    min-height: 0;
    max-height: 100vh;
    max-height: 100dvh;
    align-self: stretch;
    overflow: hidden;
  }
}

/* 合同预览全屏（:fullscreen 伪类需保留在常规 CSS 中） */
#contract-preview-shell:fullscreen {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  border-radius: 0;
  background: rgb(253 250 245);
}

/* 系统设置：可折叠区块 <details> */
.settings-fold > summary {
  list-style: none;
  user-select: none;
}
.settings-fold > summary::-webkit-details-marker {
  display: none;
}
.settings-fold[open] .settings-fold-chev {
  transform: rotate(180deg);
}

#contract-preview-shell:fullscreen #contract-preview-frame,
#contract-preview-shell:fullscreen #contract-preview-img {
  max-height: none;
}