/* Keep application/detail chrome compact and give the middle pane the height. */
#app .app-shell:has(:is(.filing-approval-detail-page, .workflow-detail-page,
  .workflow-app-page, .seal-application-page, .missive-application-page,
  .finance-detail-page, .hr-detail-page)) {
  height: 100dvh !important;
  min-height: 0 !important;
}
#app .app-shell:has(:is(.filing-approval-detail-page, .workflow-detail-page,
  .workflow-app-page, .seal-application-page, .missive-application-page,
  .finance-detail-page, .hr-detail-page)) :is(.workspace-wrap, .workspace) {
  height: 100%;
  min-height: 0;
  overflow: hidden;
}
#app :is(.filing-approval-detail-page, .workflow-detail-page, .workflow-app-page,
  .seal-application-page, .missive-application-page, .finance-detail-page, .hr-detail-page) {
  height: 100% !important;
  min-height: 0 !important;
}

#app .compact-detail-title {
  position: relative;
  min-width: 0;
  flex: 1;
  cursor: help;
}
#app .compact-detail-title h1 {
  display: block;
  max-width: 100%;
  margin: 0;
  overflow: hidden;
  font-size: 18px;
  line-height: 24px;
  white-space: nowrap;
  text-overflow: ellipsis;
}
#app .compact-detail-title-tooltip {
  position: absolute;
  z-index: 180;
  top: calc(100% + 8px);
  left: 0;
  width: max-content;
  max-width: min(720px, 100%);
  max-height: min(320px, 50vh);
  padding: 10px 12px;
  overflow: auto;
  border: 1px solid var(--v2-line);
  border-radius: 6px;
  background: var(--v2-surface);
  color: var(--v2-ink);
  box-shadow: var(--v2-shadow);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.6;
  white-space: normal;
  overflow-wrap: anywhere;
  visibility: hidden;
  opacity: 0;
}
#app .compact-detail-title:hover .compact-detail-title-tooltip,
#app .compact-detail-title:focus .compact-detail-title-tooltip {
  visibility: visible;
  opacity: 1;
}
#app .compact-detail-title:focus-visible {
  outline: 2px solid var(--ui-primary);
  outline-offset: 3px;
}

#app .filing-approval-detail-page {
  height: 100%;
  min-width: 0;
  min-height: 0;
  grid-template-columns: minmax(0, 1fr);
  padding: 0 14px;
  background: var(--ui-soft);
}
#app .fad-hero {
  position: relative;
  z-index: 2;
  min-width: 0;
  min-height: 0;
  padding: 8px 12px;
  gap: 10px;
  background: var(--v2-surface);
  border-top-width: 2px;
}
#app .fad-hero > div:first-child { flex: 1; }
#app .fad-hero > div:first-child::before { display: none; }
#app .fad-tags { margin-top: 4px; gap: 4px; }
#app .fad-tags span { min-height: 20px; padding: 0 7px; }
#app .fad-tags .code { max-width: 100%; overflow-wrap: anywhere; }
#app .fad-hero-close { width: 32px; height: 32px; flex-basis: 32px; }
#app .fad-scroll { padding: 10px 0; }
#app .fad-layout,
#app .fad-left { gap: 10px; }
#app .fad-section > header,
#app .fad-approval > header { height: 36px; padding: 0 12px; background: var(--v2-surface); }
#app .fad-section,
#app .fad-approval { background: var(--v2-surface); }
#app .fad-section-body { padding: 6px 12px 10px; }
#app .fad-field,
#app .fad-field.party,
#app .fad-field.party.muted { min-height: 40px; padding: 8px; }
#app .fad-footer {
  min-height: 50px;
  margin: 0 -14px;
  padding: 7px 14px;
  gap: 8px;
  background: var(--v2-surface);
}
#app .fad-footer button { height: 34px; min-width: 84px; padding: 0 12px; }

#app .workflow-detail-page {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  padding: 0 14px;
  overflow: hidden;
  background: var(--ui-soft);
}
#app .workflow-detail-head {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  min-height: 0;
  padding: 8px 12px;
  gap: 8px;
  align-items: center;
  background: var(--v2-surface);
  border: 1px solid var(--v2-line);
  border-top: 2px solid var(--ui-primary);
  border-radius: 8px;
}
#app .workflow-detail-head > button,
#app .workflow-detail-status { margin-top: 0; }
#app .workflow-detail-head > div > span { font-size: 11px; line-height: 16px; }
#app .workflow-detail-head p { margin: 0; line-height: 16px; overflow-wrap: anywhere; }
#app .workflow-detail-head p:empty { display: none; }
#app .workflow-detail-scroll { flex: 1; min-height: 0; overflow: auto; padding: 10px 0; scrollbar-gutter: stable; }
#app .workflow-detail-body { display: grid; grid-template-columns: minmax(0, 1fr) 310px; gap: 10px; align-items: start; }
#app .workflow-detail-main,
#app .workflow-detail-body > aside { display: grid; min-width: 0; gap: 10px; }
#app .workflow-detail-body > aside .workflow-detail-section dl { grid-template-columns: 1fr; }
#app .workflow-detail-body > aside .workflow-detail-section dl > div { grid-template-columns: 92px minmax(0, 1fr); }
#app .workflow-detail-section { background: var(--v2-surface); border-color: var(--v2-line); }
#app .workflow-detail-section > h2 { height: 36px; padding: 0 12px; background: var(--v2-surface-soft); }
#app .workflow-detail-section dl > div { min-height: 40px; padding: 8px 12px; }
#app .workflow-detail-warning { margin: 0 0 10px; }
#app .workflow-detail-decision,
#app .workflow-detail-decision.invoice {
  position: static;
  margin-top: 10px;
  padding: 10px 12px;
  grid-template-columns: minmax(0, 1fr);
  background: var(--v2-surface);
}
#app .workflow-detail-decision textarea { min-height: 54px; }
#app .workflow-detail-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; flex: 0 0 auto; gap: 6px 12px; padding: 7px 12px; border-top: 1px solid var(--v2-line); background: var(--v2-surface); }
#app .workflow-detail-footer .workflow-detail-action-error { flex: 1; min-width: 180px; margin: 0; color: var(--ui-primary); }
#app .workflow-detail-decision-actions { display: flex; justify-content: flex-end; gap: 8px; }
#app .workflow-detail-footer button { min-width: 84px; height: 34px; padding: 0 12px; border: 1px solid var(--ui-primary); border-radius: 5px; }
#app .workflow-detail-footer .secondary { color: var(--ui-primary); background: var(--v2-surface); }
#app .workflow-detail-footer .primary { color: #fff; background: var(--ui-primary); }

#app .workflow-app-page {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  padding-bottom: 0;
  overflow: hidden;
}
#app .workflow-app-heading { height: auto; min-height: 50px; padding: 6px 14px; gap: 10px; }
#app .workflow-app-heading h1 { margin-bottom: 2px; font-size: 17px; line-height: 22px; }
#app .workflow-app-heading p { font-size: 11px; line-height: 16px; }
#app .workflow-app-scroll { flex: 1; height: auto; min-height: 0; overflow-y: auto; padding-bottom: 14px; }
#app .workflow-app-kind-invoice .workflow-app-scroll { padding-top: 10px; }
#app .workflow-app-actions {
  position: static;
  flex: 0 0 auto;
  height: auto;
  min-height: 52px;
  padding: 8px 14px;
  gap: 8px;
  border-top: 1px solid var(--v2-line);
  background: var(--v2-surface);
}
#app .workflow-app-actions .workflow-app-button { height: 36px; min-height: 36px; }

#app .seal-application-title { min-height: 40px; margin: 0 12px; }
#app .seal-application-scroll { padding: 10px 12px; }
#app .seal-application-actions { min-height: 52px; padding: 7px 14px; }
#app .missive-application-page { display: flex; flex-direction: column; height: 100%; min-height: 0; padding: 0; overflow: hidden; background: var(--ui-soft); }
#app .missive-titlebar { flex: 0 0 40px; height: 40px; margin: 0; }
#app .missive-form { display: flex; flex-direction: column; flex: 1; min-height: 0; margin: 0; }
#app .missive-form-scroll { flex: 1; min-height: 0; overflow: auto; padding: 10px 14px; }
#app .missive-section { margin-bottom: 10px; }
#app .missive-actions { position: static; flex: 0 0 auto; min-height: 52px; padding: 7px 14px; background: var(--v2-surface); border-top: 1px solid var(--v2-line); }

#app .app-shell.finance-shell .finance-detail-page { padding: 0; }
#app .app-shell.finance-shell .finance-detail-heading { position: relative; z-index: 2; min-height: 52px; padding: 8px 14px; gap: 10px; align-items: center; }
#app .finance-detail-heading > div:first-child { flex: 1; }
#app .finance-detail-tabs { height: 36px; min-height: 36px; }
#app .finance-detail-tabs button { padding: 0 14px; }
#app .finance-detail-scroll { padding: 10px 14px; }

@media (max-width: 900px) {
  #app .filing-approval-detail-page,
  #app .workflow-detail-page { padding: 0 8px; }
  #app .fad-layout,
  #app .workflow-detail-body { grid-template-columns: minmax(0, 1fr); }
  #app .fad-footer { margin: 0 -8px; padding: 7px 8px; }
  #app .fad-decision-actions,
  #app .fad-footer-secondary { width: auto; flex: 1; }
  #app .fad-decision-actions { margin-right: auto; }
  #app .fad-footer button { flex: 1; min-width: 0; padding: 0 8px; }
}

@media (max-width: 560px) {
  #app .compact-detail-title h1 { font-size: 16px; line-height: 22px; }
  #app .fad-hero { padding: 7px 10px; }
  #app .workflow-detail-head { grid-template-columns: 28px minmax(0, 1fr) auto; padding: 7px 8px; gap: 6px; }
  #app .workflow-detail-head > button { width: 28px; height: 30px; }
  #app .workflow-detail-status { max-width: 70px; height: auto; min-height: 26px; padding: 3px 6px; text-align: center; }
  #app .workflow-detail-section dl { grid-template-columns: minmax(0, 1fr); }
  #app .workflow-app-heading { min-height: 48px; padding: 6px 10px; }
  #app .workflow-app-actions { flex-wrap: wrap; padding: 7px 10px; }
  #app .seal-application-title { margin: 0; }
  #app .missive-form-scroll { padding: 8px; }
  #app .finance-detail-heading { flex-wrap: wrap; }
  #app .finance-detail-heading > div:first-child { flex-basis: 100%; }
}