/* Unify 展示壳：PHP 顶栏横导航；菜单紧跟品牌靠左，工具栏靠右。 */

html[data-tt-shell="unify"] {
  --app-header-height: 3.5rem;
}

html[data-tt-shell="unify"],
html[data-tt-shell="unify"] body,
html[data-tt-shell="unify"] #app {
  min-height: 100%;
  height: 100%;
}

html[data-tt-shell="unify"] body {
  background-color: var(--tt-tone-bg, var(--bs-gray-100, #f5f7fa));
  color: var(--tt-tone-fg, var(--bs-gray-800, #51596c));
  overflow-x: clip;
}

.un-root {
  min-height: 100%;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  background-color: var(--tt-tone-bg, var(--bs-gray-100, #f5f7fa));
}

.unify-container {
  max-width: min(1400px, 100%);
  min-width: 0;
}

#header.unify-header {
  position: sticky;
  top: 0;
  z-index: 1030;
  background: var(--tt-tone-surface, #fff);
  box-shadow: 0 1px 8px var(--tt-tone-shadow, rgba(45, 55, 75, 0.08));
  min-height: var(--app-header-height, 3.5rem);
  padding-top: 0;
  padding-bottom: 0;
}

#header.unify-header .container {
  min-height: var(--app-header-height, 3.5rem);
  display: flex;
  align-items: center;
}

#header.unify-header .navbar-nav-wrap {
  width: 100%;
  min-height: var(--app-header-height, 3.5rem);
}

@media (min-width: 992px) {
  #header.unify-header .navbar-nav-wrap {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    min-width: 0;
  }

  #header.unify-header .navbar-collapse {
    flex: 1 1 auto;
    min-width: 0;
  }

  #header.unify-header .navbar-absolute-top-scroller {
    overflow-x: auto;
    max-width: 100%;
  }

  #header.unify-header .navbar-nav {
    width: max-content;
    flex-wrap: nowrap;
    justify-content: flex-start;
    margin-left: 1.75rem;
  }

  #header.unify-header .navbar-nav-wrap-secondary-content {
    flex: 0 0 auto;
  }

  /* 菜单在顶栏里横滑时，下拉用视口定位，避免被滚动条裁掉。 */
  #header.unify-header .hs-mega-menu {
    position: fixed;
    top: var(--app-header-height, 4.5rem);
    left: 0;
    right: 0;
    width: auto;
    z-index: 1031;
  }
}

.unify-header-brand {
  display: flex;
  align-items: center;
  padding: 0 0.25rem 0 0;
  height: 100%;
  flex-shrink: 0;
}

.unify-header-divider {
  width: 1px;
  height: 28px;
  background-color: rgba(45, 55, 75, 0.12);
  margin: 0 14px;
}

.unify-logo-link {
  display: flex;
  align-items: center;
  text-decoration: none;
}

.unify-header-title {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--bs-gray-900, #2d374b);
  white-space: nowrap;
  letter-spacing: 0.04em;
}

#header.unify-header .navbar-nav {
  align-items: center;
}

#header.unify-header .navbar-nav .nav-item {
  display: flex;
  align-items: center;
}

#header.unify-header .navbar-nav .nav-link {
  align-self: center;
  height: auto;
  padding: 0.75rem 0.75rem;
  border-radius: var(--bs-nav-pills-border-radius, 0.5rem);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.5;
}

#header.unify-header .navbar-nav .nav-link:hover,
#header.unify-header .navbar-nav .nav-link:focus {
  color: var(--tt-primary-link-hover);
}

/* 选中仍是原来的实心胶囊；字用浅色，避免深字压在主色上看不见。 */
#header.unify-header .navbar-nav .nav-link.active,
#header.unify-header .navbar-nav .show > .nav-link {
  color: var(--tt-accent-ink, #fff);
}

.navbar-nav-wrap-secondary-content {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

#header.unify-header .tt-chrome {
  margin-left: 0;
}

#content {
  flex: 0 0 auto;
}

.unify-subnav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem;
  margin: 0 0 1.25rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--tt-tone-border, var(--bs-gray-300, #dce0e5));
}

.unify-subnav a {
  padding: 0.4rem 0.9rem;
  color: var(--bs-gray-700, #677788);
  text-decoration: none;
  font-size: var(--tt-fs-md, 0.875rem);
  font-weight: 500;
  border-radius: var(--tt-radius-md, 0.375rem);
}

.unify-subnav a:hover {
  color: var(--tt-primary-link-hover);
  background-color: var(--tt-primary-subtle);
}

.unify-subnav a.active {
  color: var(--tt-primary-emphasis);
  background-color: var(--tt-primary-subtle);
}

.unify-stage {
  min-height: 12rem;
  min-width: 0;
  max-width: 100%;
}

html[data-tt-shell="unify"] main#content {
  min-width: 0;
  max-width: 100%;
}

html[data-tt-shell="unify"] .tt-plugin-frame,
html[data-tt-shell="unify"] .micro-stage,
html[data-tt-shell="unify"] .micro-layer.is-front {
  min-width: 0;
  max-width: 100%;
}

html[data-tt-shell="unify"] .tt-table-wrap,
html[data-tt-shell="unify"] .tt-crud-table,
html[data-tt-shell="unify"] .table-responsive {
  max-width: 100%;
}

/* 只用 Unify 自带的 hs-mega-menu / dropdown-menu 样式，这里只负责悬停显示 */
#header.unify-header .navbar-nav-wrap {
  position: relative;
}

#header.unify-header .hs-has-mega-menu {
  position: static;
}

@media (min-width: 992px) {
  #header.unify-header .hs-has-mega-menu:hover > .hs-mega-menu,
  #header.unify-header .hs-has-mega-menu:focus-within > .hs-mega-menu {
    display: block;
  }
}

@media (max-width: 991.98px) {
  #header.unify-header .hs-has-mega-menu.open > .hs-mega-menu,
  #header.unify-header .hs-mega-menu.show {
    display: block;
    position: static;
  }
}

.unify-footer {
  flex: 0 0 auto;
  width: 100%;
  margin-top: 0;
  background: transparent;
  color: var(--bs-gray-600, #8c98a4);
  font-size: 0.8125rem;
  line-height: 1.6;
}

.unify-footer p {
  margin: 0;
  color: inherit;
  font-size: inherit;
}

/* 长版权句不要套官方短句的 fs-5；一行折行，宽屏左主句右附加 */
.unify-footer .app-footer-copyright {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  column-gap: 1rem;
  row-gap: 0.2rem;
  text-align: center;
}

.unify-footer .app-footer-copyright > :first-child {
  min-width: 0;
  color: var(--bs-gray-700, #677788);
}

.unify-footer .app-footer-beian,
.unify-footer .app-footer-version,
.unify-footer .app-footer-support {
  flex: 0 1 auto;
  color: var(--bs-gray-600, #8c98a4);
}

.unify-footer .app-footer-copyright a {
  color: inherit;
  text-underline-offset: 0.12em;
}

.unify-footer .app-footer-copyright a:hover {
  color: var(--tt-tone-fg, var(--bs-gray-800, #51596c));
}

@media (min-width: 768px) {
  .unify-footer .app-footer-copyright {
    justify-content: center;
    text-align: center;
  }

  .unify-footer .app-footer-copyright > :first-child {
    flex: 0 1 auto;
    margin-right: 0;
  }

  .unify-footer .app-footer-copyright > :not(:first-child) {
    text-align: center;
  }
}

/* 插件槽不要拉成整屏，否则短页面会在页脚上方空出一大块。 */
html[data-tt-shell="unify"] .tt-plugin-stage > .micro-stage,
html[data-tt-shell="unify"] .tt-plugin-frame,
html[data-tt-shell="unify"] .tt-plugin-frame > *,
html[data-tt-shell="unify"] .micro-layer.is-front.micro-slot {
  flex: 0 1 auto;
  height: auto;
}

html[data-tt-shell="unify"] .tt-plugin-stage > .hello,
html[data-tt-shell="unify"] .tt-plugin-stage > .page {
  max-width: none;
  width: 100%;
  color: inherit;
  font-family: inherit;
  display: grid;
  gap: 1rem;
  background: var(--tt-tone-surface, #fff);
  border: 1px solid var(--tt-tone-border, var(--bs-gray-200, #f3f6f9));
  border-radius: var(--tt-radius-lg, 0.5rem);
  box-shadow: var(--tt-shadow-panel);
  padding: 1.25rem 1.5rem 1.5rem;
}

html[data-tt-shell="unify"] .tt-plugin-stage > .tt-plugin-page {
  max-width: none;
  background: transparent;
  box-shadow: none;
  padding: 0;
  color: inherit;
  font-family: inherit;
}

html[data-tt-shell="unify"] .tt-plugin-page .card {
  background: var(--tt-tone-surface, #fff);
  border-color: var(--tt-tone-border, var(--bs-gray-200, #f3f6f9));
  border-radius: var(--tt-radius-lg, 0.5rem);
}

html[data-tt-shell="unify"] .tt-plugin-stage .hello h1,
html[data-tt-shell="unify"] .tt-plugin-stage .page h1,
html[data-tt-shell="unify"] .tt-plugin-stage .ctrl-head h1 {
  color: var(--tt-tone-fg, var(--bs-gray-900, #2d374b));
  font-weight: 600;
  letter-spacing: -0.02em;
  font-size: 1.25rem;
  margin: 0 0 0.35rem;
}

html[data-tt-shell="unify"] .tt-plugin-stage .hello h2,
html[data-tt-shell="unify"] .tt-plugin-stage .page h2 {
  font-size: 1.05rem;
  margin: 0.5rem 0;
  font-weight: 600;
}

html[data-tt-shell="unify"] .tt-plugin-stage .muted,
html[data-tt-shell="unify"] .tt-plugin-stage .ctrl-head p {
  color: var(--bs-gray-600, #8c98a4);
  font-size: 0.875rem;
}

html[data-tt-shell="unify"] .tt-plugin-stage nav.nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem;
  margin: 0;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--tt-tone-border, var(--bs-gray-300, #dce0e5));
}

html[data-tt-shell="unify"] .tt-plugin-stage nav.nav a {
  padding: 0.4rem 0.9rem;
  color: var(--bs-gray-700, #677788);
  text-decoration: none;
  font-size: var(--tt-fs-md, 0.875rem);
  font-weight: 500;
  border-radius: var(--tt-radius-md, 0.375rem);
}

html[data-tt-shell="unify"] .tt-plugin-stage nav.nav a.router-link-exact-active,
html[data-tt-shell="unify"] .tt-plugin-stage nav.nav a.router-link-active {
  color: var(--tt-primary-emphasis);
  background-color: var(--tt-primary-subtle);
}

html[data-tt-shell="unify"] .tt-plugin-stage form.row,
html[data-tt-shell="unify"] .tt-plugin-stage form.stack {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin: 0;
}

html[data-tt-shell="unify"] .tt-plugin-stage form.stack {
  flex-direction: column;
  align-items: stretch;
  max-width: 28rem;
}

html[data-tt-shell="unify"] .tt-plugin-stage .hello input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
html[data-tt-shell="unify"] .tt-plugin-stage .page input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
html[data-tt-shell="unify"] .tt-plugin-stage .hello select,
html[data-tt-shell="unify"] .tt-plugin-stage .page select,
html[data-tt-shell="unify"] .tt-plugin-stage .hello textarea,
html[data-tt-shell="unify"] .tt-plugin-stage .page textarea {
  display: block;
  width: 100%;
  min-height: var(--tt-control-h, 2.25rem);
  padding: 0.5rem 0.85rem;
  border: 1px solid var(--tt-tone-border, var(--bs-gray-300, #dce0e5));
  border-radius: var(--tt-radius-sm, 0.25rem);
  background: var(--tt-tone-surface, #fff);
  color: inherit;
}

html[data-tt-shell="unify"] .tt-plugin-stage .hello input:focus,
html[data-tt-shell="unify"] .tt-plugin-stage .page input:focus,
html[data-tt-shell="unify"] .tt-plugin-stage .hello select:focus,
html[data-tt-shell="unify"] .tt-plugin-stage .page select:focus {
  outline: 0;
  border-color: var(--tt-primary);
  box-shadow: var(--tt-focus-ring);
}

html[data-tt-shell="unify"] .tt-plugin-stage .hello button:not(.link):not(.ghost):not(.tt-shell-home-card),
html[data-tt-shell="unify"] .tt-plugin-stage .page button:not(.link):not(.ghost):not(.tt-shell-home-card) {
  min-height: var(--tt-control-h, 2.25rem);
  padding: 0.45rem 1.1rem;
  border: 0;
  border-radius: var(--tt-radius-md, 0.375rem);
  background: var(--tt-primary);
  color: var(--tt-accent-ink);
  font-weight: 600;
  cursor: pointer;
}

html[data-tt-shell="unify"] .tt-plugin-stage .hello button:not(.link):not(.ghost):hover,
html[data-tt-shell="unify"] .tt-plugin-stage .page button:not(.link):not(.ghost):hover {
  background: var(--tt-primary-hover);
}

html[data-tt-shell="unify"] .tt-plugin-stage .hello button.link,
html[data-tt-shell="unify"] .tt-plugin-stage .page button.link,
html[data-tt-shell="unify"] .tt-plugin-stage .page a.link {
  background: none;
  color: var(--tt-primary-link);
  border: 0;
  padding: 0;
  min-height: 0;
  font-weight: 600;
  cursor: pointer;
}

html[data-tt-shell="unify"] .tt-plugin-stage .hello button.ghost,
html[data-tt-shell="unify"] .tt-plugin-stage .page button.ghost {
  background: var(--tt-tone-surface, #fff);
  color: var(--tt-tone-fg, var(--bs-gray-700, #677788));
  border: 1px solid var(--tt-tone-border, var(--bs-gray-300, #dce0e5));
  min-height: var(--tt-control-h, 2.25rem);
  padding: 0.45rem 1.1rem;
  border-radius: var(--tt-radius-md, 0.375rem);
}

html[data-tt-shell="unify"] .tt-plugin-stage .hello table,
html[data-tt-shell="unify"] .tt-plugin-stage .page table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin-top: 0.25rem;
  background: transparent;
}

html[data-tt-shell="unify"] .tt-plugin-stage .hello th,
html[data-tt-shell="unify"] .tt-plugin-stage .hello td,
html[data-tt-shell="unify"] .tt-plugin-stage .page th,
html[data-tt-shell="unify"] .tt-plugin-stage .page td {
  padding: 0.75rem 0.85rem;
  text-align: left;
  border-bottom: 1px solid var(--bs-gray-200, #f3f6f9);
  font-size: var(--tt-fs-md, 0.875rem);
  background: transparent;
  color: inherit;
}

html[data-tt-shell="unify"] .tt-plugin-stage .hello thead th,
html[data-tt-shell="unify"] .tt-plugin-stage .page thead th {
  color: var(--bs-gray-600, #8c98a4);
  font-size: var(--tt-fs-sm, 0.8125rem);
  font-weight: 600;
  background: var(--tt-tone-muted, var(--bs-gray-100, #f5f7fa));
}

html[data-tt-shell="unify"] .tt-plugin-stage .hello tbody tr:hover td,
html[data-tt-shell="unify"] .tt-plugin-stage .page tbody tr:hover td {
  background: var(--tt-primary-subtle);
}

html[data-tt-shell="unify"] .tt-plugin-stage .hits,
html[data-tt-shell="unify"] .tt-plugin-stage .tiles {
  display: grid;
  gap: 0.65rem;
}

html[data-tt-shell="unify"] .tt-plugin-stage .tiles {
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}

html[data-tt-shell="unify"] .tt-plugin-stage a.hit,
html[data-tt-shell="unify"] .tt-plugin-stage a.tile,
html[data-tt-shell="unify"] .tt-plugin-stage .tile {
  display: grid;
  gap: 0.2rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--bs-gray-200, #f3f6f9);
  border-radius: var(--tt-radius-lg, 0.5rem);
  background: var(--tt-tone-surface, #fff);
  text-decoration: none;
  color: inherit;
}

html[data-tt-shell="unify"] .tt-plugin-stage a.hit:hover,
html[data-tt-shell="unify"] .tt-plugin-stage a.tile:hover {
  border-color: var(--tt-primary);
}

html[data-tt-shell="unify"] .tt-plugin-stage .bubble {
  background: var(--tt-tone-muted, var(--bs-gray-100, #f5f7fa));
  border: 1px solid var(--bs-gray-200, #f3f6f9);
  border-radius: var(--tt-radius-lg, 0.5rem);
  padding: 0.85rem 1rem;
}

html[data-tt-shell="unify"] .tt-plugin-stage .bubble.me {
  border-color: var(--tt-primary-border);
  background: var(--tt-primary-subtle);
}

html[data-tt-shell="unify"] .tt-plugin-stage .error {
  color: var(--bs-danger, #692340);
}

@media (max-width: 991.98px) {
  #header.unify-header .navbar-nav-wrap-secondary-content {
    margin-left: auto;
  }

  html[data-tt-shell="unify"] .tt-plugin-stage > .hello,
  html[data-tt-shell="unify"] .tt-plugin-stage > .page {
    padding: 1.15rem;
    border-radius: var(--tt-radius-lg, 0.5rem);
  }
}