/* Project navigation stays above the independently scrolling editor. */
#app #projectDetailPane .project-detail-head { display:block; padding:0; gap:0; min-width:0; min-height:0; flex-shrink:0; }
#app #projectDetailPane .project-detail-tabs { margin:0; width:100%; box-sizing:border-box; border-radius:0; grid-column:auto; grid-row:auto; padding:8px 4px; }
#app #projectDetailPane .project-detail-tabs > button { min-height:44px; }
.project-information-actions { display:flex; justify-content:flex-end; margin-bottom:14px; }

/* Four common actions, with secondary commands inside a single menu. */
#app :is(#quotePane, #materialsPane, #projectDetailPane) .workspace-primary-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); grid-auto-rows:minmax(42px,auto); width:220px; flex:0 0 220px; max-width:100%; gap:6px; align-self:flex-start; align-items:stretch; margin-left:auto; }
#app :is(#quotePane, #materialsPane, #projectDetailPane) .workspace-primary-actions > :is(button,a,details) { grid-area:auto; width:100%; min-width:0; margin:0; min-height:42px; box-sizing:border-box; }
#app :is(#quotePane, #materialsPane, #projectDetailPane) .workspace-primary-actions > a { display:flex; }
#app :is(#quotePane, #materialsPane, #projectDetailPane) .workspace-primary-actions > a > button { width:100%; min-width:0; }
#app :is(#quotePane, #materialsPane, #projectDetailPane) .workspace-primary-actions > .editor-more-tools { position:relative; }
#app :is(#quotePane, #materialsPane, #projectDetailPane) .workspace-primary-actions > .editor-more-tools > summary { display:flex; align-items:center; justify-content:center; height:100%; min-height:42px; box-sizing:border-box; padding:6px 8px; border:1px solid transparent; border-radius:6px; background:#fff; color:#16355b; font:400 11px/16px "Microsoft YaHei","PingFang SC",sans-serif; cursor:pointer; list-style:none; }
#app :is(#quotePane, #materialsPane, #projectDetailPane) .workspace-primary-actions > .editor-more-tools > summary::-webkit-details-marker { display:none; }
#app :is(#quotePane, #materialsPane, #projectDetailPane) .workspace-primary-actions > .editor-more-tools[open] > .matched-tool-extras { display:flex; flex-direction:column; align-items:stretch; position:absolute; top:calc(100% + 6px); right:0; left:auto; z-index:80; width:260px; max-width:calc(100vw - 36px); box-sizing:border-box; padding:12px; gap:8px; background:#f0f7ff; color:#16355b; border:1px solid #c6ddf7; border-radius:10px; box-shadow:0 8px 30px #173b6630; }
#app :is(#quotePane, #materialsPane, #projectDetailPane) .workspace-primary-actions .matched-tool-extras > :is(button,select,label,details,div) { grid-area:auto; width:100%; min-width:0; margin:0; box-sizing:border-box; }
#app :is(#quotePane, #materialsPane, #projectDetailPane) .workspace-primary-actions .matched-tool-extras select { max-width:100%; }
#app :is(#quotePane, #materialsPane, #projectDetailPane) .workspace-primary-actions .quote-template-popover { position:static; width:100%; max-width:100%; box-shadow:none; margin-top:6px; }
@media (max-width:700px) {
  #app :is(#quotePane, #materialsPane, #projectDetailPane) .workspace-primary-actions { width:100%; flex-basis:100%; }
}
/* Design actions sit inside a vertical ribbon group; their basis must not become a height. */
#app #projectDetailPane #projectDesignListBuilder .workspace-primary-actions { flex-basis:auto; }
#app #projectDetailPane #projectDesignListBuilder .workspace-primary-actions > button { height:48px; }

/* Reserve room for both the size value and the native select arrow. */
#app :is(#quotePane, #materialsPane, #projectDetailPane, #toolTemplateEditorHost) select:is([title="字号"], [aria-label="字号"]) {
  box-sizing:border-box; width:84px; min-width:84px; max-width:84px; flex:0 0 84px;
  padding:4px 24px 4px 10px; text-indent:0; font-size:12px; line-height:16px;
}
/* Design uses the quotation editor's tool clusters, sizing and wrapping. */
#app #projectDesignListBuilder .design-ribbon {
  display:flex; flex-wrap:wrap; align-items:flex-start; gap:16px; padding:10px;
}
#app #projectDesignListBuilder .design-ribbon-tools {
  display:flex; flex:1 1 0; min-width:0; flex-wrap:wrap; gap:8px; align-items:center;
}
#app #projectDesignListBuilder .design-ribbon-tools .design-ribbon-group { display:contents; }
#app #projectDesignListBuilder .design-ribbon-tools .design-ribbon-controls {
  display:flex; flex:0 0 auto; flex-direction:row; flex-wrap:nowrap; align-items:center; gap:4px; max-width:100%;
}
#app #projectDesignListBuilder :is(.design-ribbon-fonts,.design-ribbon-colors) { display:contents; }
#app #projectDesignListBuilder .design-ribbon-tools button {
  display:inline-flex; align-items:center; justify-content:center; gap:5px;
  min-width:0; min-height:32px; height:auto; margin:0; padding:5px 7px;
  border:1px solid transparent; border-radius:6px; background:#fff; color:#16355b; box-shadow:none;
  font:400 11px/16px "Microsoft YaHei","PingFang SC",Arial,sans-serif; white-space:nowrap;
}
#app #projectDesignListBuilder .design-ribbon-tools .ph { font-size:24px; line-height:26px; }
#app #projectDesignListBuilder .design-ribbon-tools button:disabled { opacity:.35; cursor:default; }
#app #projectDesignListBuilder .design-ribbon-tools button:hover:not(:disabled) { background:#e7f1ff; border-color:#c9dfff; color:#0764ef; }
#app #projectDesignListBuilder .design-ribbon-tools [data-design-toggle=bold] { font-weight:700; }
#app #projectDesignListBuilder .design-ribbon-tools [data-design-toggle=italic] { font-style:italic; }
#app #projectDesignListBuilder .design-ribbon-tools [data-design-toggle=underline] { text-decoration:underline; }
#app #projectDesignListBuilder .design-ribbon-tools :is([data-design-toggle],[data-design-palette]) { font-size:16px; min-width:30px; height:34px; }
#app #projectDesignListBuilder .design-ribbon-tools select {
  height:34px; min-height:34px; border:1px solid #d6e1ef; border-radius:6px;
  background:#fff; color:#16355b; font:400 12px/16px "Microsoft YaHei","PingFang SC",Arial,sans-serif;
}
#app #projectDesignListBuilder .design-ribbon-tools select[data-design-format=fontFamily] { width:105px; min-width:105px; max-width:105px; padding:4px 8px; }
#app #projectDesignListBuilder .design-ribbon-select {
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  min-width:35px; margin:0; font-size:11px; font-weight:400; line-height:normal;
}
#app #projectDesignListBuilder .design-ribbon-select input { width:18px; height:18px; min-width:18px; margin:0; accent-color:#1677ff; }
@container workbench (max-width:620px) {
  #app #projectDesignListBuilder .design-ribbon-tools { flex-basis:100%; width:100%; }
  #app #projectDesignListBuilder .design-ribbon-tools .design-ribbon-controls { flex-wrap:wrap; }
}

/* Fixed project information uses the same blue editing bar as worksheets. */
#app #projectDetailPane .project-information-toolbar {
  position:sticky; top:0; z-index:12; display:flex; align-items:center; justify-content:space-between;
  gap:16px; margin:0; padding:10px; min-height:86px; box-sizing:border-box;
  border:1px solid rgba(255,255,255,.3); border-radius:12px;
  background:linear-gradient(135deg,#317fff,#42baff); color:#fff;
}
#app #projectDetailPane .project-information-toolbar .quote-editor-tools { display:flex; flex:1 1 auto; gap:4px; }
#app #projectDetailPane .project-information-actions { display:flex; margin:0 0 0 auto; }
#app #projectDetailPane .project-information-toolbar button {
  display:inline-flex; align-items:center; justify-content:center; gap:5px;
  min-height:38px; margin:0; padding:5px 7px; border:1px solid transparent; border-radius:6px;
  background:#fff; color:#16355b; box-shadow:none;
  font:400 11px/16px "Microsoft YaHei","PingFang SC",Arial,sans-serif; white-space:nowrap;
}
#app #projectDetailPane .project-information-toolbar .ph { font-size:24px; line-height:26px; }
#app #projectDetailPane .project-information-toolbar button:disabled { opacity:.35; }
#app #projectDetailPane .project-information-toolbar #saveProjectDetail { min-height:42px; min-width:107px; background:#0767f9; color:#fff; }

/* Project quotation is the shared surface and spacing baseline. */
@media screen {
  #app #projectDetailPane {
    grid-template-columns:minmax(0,1fr);
    --project-workspace-background: radial-gradient(circle at 88% 8%, rgba(84,221,207,.18), transparent 25%), linear-gradient(145deg,#eaf5ff 0%,#d8ebff 48%,#c7e4ff 100%);
    --project-toolbar-offset: 18px;
    background:var(--project-workspace-background);
  }
  #app #projectDetailPane > .project-detail-content {
    /* Keep the gap outside the scrollport so rows cannot scroll into it. */
    margin-top:var(--project-toolbar-offset);
    padding:0 26px 36px; scrollbar-gutter:stable;
    background:transparent;
  }
  #app #projectDetailPane .project-detail-section {
    width:100%; max-width:none; margin:0;
  }
  #app #projectDetailPane :is(#quotePane,#materialsPane,#projectDesignListBuilder,#projectPersonnelBuilder,#projectRunbookBuilder,#projectProgressBuilder) {
    padding:0; border:0; border-radius:0; background:transparent; box-shadow:none;
  }
  #app #projectDetailPane :is(.quote-editor-toolbar,.unified-editor-toolbar,.design-ribbon,.project-information-toolbar) {
    box-sizing:border-box; margin:0; padding:10px; border:1px solid #c6ddf7; border-radius:10px;
    background:linear-gradient(135deg,#317fff,#42baff); box-shadow:none;
  }
  #app #projectDetailPane :is(.project-information-toolbar,.design-ribbon,.personnel-ribbon,.runbook-toolbar,.contract-word-toolbar) {
    top:0; isolation:isolate;
  }
  #app #projectDetailPane :is(#materialsPane > .material-actions,[data-progress-table-toolbar]) {
    top:0; padding:0; margin:0; background:transparent; isolation:isolate;
  }
  /* Let the shared page gradient show through the gap; sticky tools meet the scrollport edge. */
  #app #projectDetailPane :is(.project-information-toolbar,.design-ribbon,.personnel-ribbon,.runbook-toolbar,.contract-word-toolbar,#materialsPane > .material-actions,[data-progress-table-toolbar])::before {
    content:none;
  }
  #app #projectDetailPane .personnel-ribbon::after { content:none; }
  #app #projectDetailPane .contract-paper-workspace { background:transparent; }
  #app #projectDetailPane #quotePane > .project-settlement-switchbar { margin:12px 0; flex-shrink:0; order:2; }
  @media (max-width:700px) {
    #app #projectDetailPane > .project-detail-content { padding-right:12px; padding-left:12px; }
  }
}