/*
 * BigHub UI System
 * 统一三栏布局、滚动策略、宽度档位、通用控件基线。
 */

:root {
  --bh-shell-top-h: 56px;
  --bh-left-w: 220px;
  --bh-right-w: 260px;
  --bh-content-max-only: 1200px;
  --bh-content-max-left: 1000px;
  --bh-content-max-both: 960px;
  --bh-gap: 16px;
}

/* 三栏容器：不使用整页滚动，交给各区域独立滚动 */
.bh-layout {
  height: calc(100vh - var(--bh-shell-top-h));
  min-height: calc(100vh - var(--bh-shell-top-h));
  display: grid;
  grid-template-columns: var(--bh-left-w) minmax(0, 1fr) var(--bh-right-w);
  column-gap: var(--bh-gap);
  align-items: stretch;
  overflow: hidden;
}

.bh-layout--content-only {
  grid-template-columns: minmax(0, 1fr);
}

.bh-layout--left-main {
  grid-template-columns: var(--bh-left-w) minmax(0, 1fr);
}

.bh-layout--left-main-right {
  grid-template-columns: var(--bh-left-w) minmax(0, 1fr) var(--bh-right-w);
}

.bh-region-left,
.bh-region-main,
.bh-region-right {
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.bh-region-left::-webkit-scrollbar,
.bh-region-main::-webkit-scrollbar,
.bh-region-right::-webkit-scrollbar {
  display: none;
}

.bh-region-main-inner {
  width: 100%;
  margin: 0 auto;
  padding: 20px 16px 28px;
}

/*
 * 子页在门户/控制台 iframe 中加载时（portal-shell.js 会加 html.portal-embed-in-frame 并隐藏子页顶栏），
 * 若仍按「整页壳」对 .bh-layout 使用 calc(100vh - 顶栏)，会与外层 iframe 已扣除的顶栏叠加，造成主区高度被多扣一截（对比页等反复进入时更明显）。
 */
html.portal-embed-in-frame,
html.portal-embed-in-frame body {
  height: 100%;
  min-height: 100%;
}
html.portal-embed-in-frame .bh-layout,
html.portal-embed-in-frame .bh-layout--left-main,
html.portal-embed-in-frame .bh-layout--left-main-right,
html.portal-embed-in-frame .bh-layout--content-only {
  height: 100vh;
  min-height: 100vh;
  max-height: none;
}

.bh-layout--content-only .bh-region-main-inner {
  max-width: var(--bh-content-max-only);
}

.bh-layout--left-main .bh-region-main-inner {
  max-width: var(--bh-content-max-left);
}

.bh-layout--left-main-right .bh-region-main-inner {
  max-width: var(--bh-content-max-both);
}

/* 通用控件基线（同场景复用） */
.bh-input,
.bh-select,
.bh-textarea {
  width: 100%;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 10px;
  background: var(--card, #fff);
  color: var(--text, #0f172a);
  /*font: inherit;*/
}

.bh-input,
.bh-select {
  min-height: 40px;
  height: 40px;
  padding: 8px 12px;
}

.bh-textarea {
  min-height: 96px;
  padding: 10px 12px;
  resize: vertical;
}

.bh-input:focus,
.bh-select:focus,
.bh-textarea:focus {
  outline: none;
  border-color: var(--primary, #2563eb);
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.14);
}

.bh-btn {
  min-height: 36px;
  padding: 0 14px;
  border-radius: 8px;
  border: 1px solid transparent;
  font: inherit;
  font-size: 0.875rem;
  cursor: pointer;
}

.bh-btn--primary {
  background: var(--primary, #2563eb);
  color: #fff;
}

.bh-btn--secondary {
  background: var(--card, #fff);
  color: var(--text, #0f172a);
  border-color: var(--border, #e2e8f0);
}

.bh-btn--ghost {
  background: transparent;
  color: var(--text-muted, #64748b);
  border-color: transparent;
}

.bh-btn--danger {
  background: #dc2626;
  color: #fff;
}

/* 平板：保留左栏，取消右栏，顶部导航由壳切汉堡 */
@media (max-width: 1023px) and (min-width: 768px) {
  /* 平板统一要求：顶部菜单使用汉堡折叠，避免同壳页面在切换时出现抖动和位移差异 */
  .portal-hamburger {
    display: inline-flex !important;
  }

  .portal-topbar-inner {
    gap: 8px;
  }

  .portal-nav-left {
    gap: 2px;
  }

  .portal-top-links {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    border: 0 !important;
  }

  .bh-layout--left-main,
  .bh-layout--left-main-right {
    grid-template-columns: var(--bh-left-w) minmax(0, 1fr);
  }

  .bh-region-right {
    display: none !important;
  }
}

/* 移动端：右栏取消；左栏改抽屉（由壳/FAB 控制显隐） */
@media (max-width: 767px) {
  .bh-layout,
  .bh-layout--left-main,
  .bh-layout--left-main-right,
  .bh-layout--content-only {
    height: auto;
    min-height: calc(100vh - var(--bh-shell-top-h));
    display: block;
    overflow: visible;
  }

  .bh-region-right {
    display: none !important;
  }

  .bh-region-left {
    position: fixed;
    left: 0;
    bottom: 0;
    top: var(--bh-shell-top-h);
    width: min(86vw, 300px);
    z-index: 1200;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    background: var(--card, #fff);
    border-right: 1px solid var(--border, #e2e8f0);
  }

  body.bh-left-open .bh-region-left {
    transform: translateX(0);
  }

  .bh-region-main-inner {
    max-width: 100%;
    padding-left: max(12px, env(safe-area-inset-left, 0px));
    padding-right: max(12px, env(safe-area-inset-right, 0px));
    padding-bottom: max(18px, env(safe-area-inset-bottom, 0px));
  }

  html.portal-embed-in-frame .bh-layout,
  html.portal-embed-in-frame .bh-layout--left-main,
  html.portal-embed-in-frame .bh-layout--left-main-right,
  html.portal-embed-in-frame .bh-layout--content-only {
    min-height: 100vh;
  }
}