/* Office Hero – App-spezifische Ergänzungen.
   Nutzt ausschließlich Tokens aus ds/tokens.css (Quelle: Design System/tokens.json) und Klassen aus ds/components/bundle.css.
   Enthält nur Layout-Hilfen, keine eigenen Farbwerte. Herkunft/Pflege: SSOT ARCHITECTURE.md, Abschnitt Designsystem. */

html, body { height: 100%; margin: 0; background: var(--background); }
#app { min-height: 100%; }
.app-boot { display: grid; place-items: center; min-height: 100vh; }
.app-skip { position: absolute; left: var(--space-8); top: -60px; z-index: 100; }
.app-skip:focus { top: var(--space-8); }

.app-shell { display: flex; min-height: 100vh; background: var(--background); }
.app-shell .oh-nav { position: sticky; top: 0; height: 100vh; flex: none; overflow-y: auto; }
.app-shell__col { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.app-main { flex: 1; padding: var(--space-32); max-width: 1400px; width: 100%; }
.app-nav__bottom { margin-top: auto; display: flex; flex-direction: column; gap: var(--space-8); font-size: 14px; line-height: 20px; }
.app-nav__user { padding: 0 var(--space-12); }
.app-nav__user small { display: block; opacity: .85; }
.oh-nav__link { background: none; border: 0; width: 100%; font: inherit; cursor: pointer; text-align: left; }
.oh-nav__brand img { width: 32px; height: 32px; }
.app-testbar { background: var(--warning-surface); color: var(--text-primary); border-bottom: var(--border-width) solid var(--warning); padding: var(--space-8) var(--space-32); font-size: 14px; line-height: 20px; display: flex; gap: var(--space-8); align-items: center; }
.app-testbar .oh-icon { color: var(--warning); }

@media (max-width: 800px) {
  .app-shell { flex-direction: column; }
  .app-shell .oh-nav { position: static; height: auto; width: auto; flex-direction: row; align-items: center; overflow-x: auto; padding: var(--space-8); }
  .app-shell .oh-nav .oh-nav__list { flex-direction: row; }
  .app-nav__bottom { margin: 0 0 0 auto; flex-direction: row; align-items: center; }
  .app-nav__user { display: none; }
  .app-main { padding: var(--space-16); }
  .app-testbar { padding: var(--space-8) var(--space-16); }
}

.app-login { min-height: 100vh; display: grid; place-items: center; padding: var(--space-16); }
.app-login .oh-card { width: 100%; max-width: 420px; }
.app-login__brand { display: flex; align-items: center; gap: var(--space-12); margin-bottom: var(--space-24); font-size: 22px; line-height: 30px; font-weight: 500; }
.app-login__brand img { width: 40px; height: 40px; }

.app-stack { display: flex; flex-direction: column; gap: var(--space-24); }
.app-stack--sm { display: flex; flex-direction: column; gap: var(--space-16); }
.app-grid { display: grid; gap: var(--space-24); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.app-grid--2 { grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); }
.app-cols { display: grid; gap: var(--space-24); grid-template-columns: minmax(0, 1fr) minmax(0, 420px); align-items: start; }
@media (max-width: 1100px) { .app-cols { grid-template-columns: 1fr; } }
.app-kpi { display: flex; flex-direction: column; gap: var(--space-4); }
.app-kpi__value { font-size: 30px; line-height: 38px; font-weight: 500; font-variant-numeric: tabular-nums; }
.app-kpi__label { color: var(--text-secondary); font-size: 14px; line-height: 20px; }
.app-right { text-align: right; }
.app-nowrap { white-space: nowrap; }
.app-mt { margin-top: var(--space-16); }
.app-mt-lg { margin-top: var(--space-24); }
.app-between { display: flex; justify-content: space-between; align-items: center; gap: var(--space-12); flex-wrap: wrap; }
.app-section-title { margin: 0 0 var(--space-12); font-size: 22px; line-height: 30px; font-weight: 500; }
.app-list { margin: 0; padding-left: 20px; font-size: 14px; line-height: 20px; }
.app-list li + li { margin-top: var(--space-4); }
.app-mono { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 13px; overflow-wrap: anywhere; }
.app-pre { background: var(--surface-muted); border: var(--border-width) solid var(--border-subtle); border-radius: var(--radius-control); padding: var(--space-12); overflow: auto; font-size: 13px; line-height: 18px; white-space: pre-wrap; overflow-wrap: anywhere; }
.app-link { color: var(--text-primary); text-underline-offset: 2px; font-weight: 500; }
button.app-link { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; font-weight: 500; text-decoration: underline; border-radius: var(--radius-sm); }
.app-link-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-8); }

.app-tabs { display: flex; gap: var(--space-4); border-bottom: var(--border-width) solid var(--border-subtle); margin-bottom: var(--space-24); overflow-x: auto; }
.app-tabs a { display: inline-flex; align-items: center; min-height: var(--control-height); padding: 0 var(--space-16); color: var(--text-secondary); text-decoration: none; font-size: 14px; line-height: 20px; font-weight: 500; border-bottom: 2px solid transparent; white-space: nowrap; }
.app-tabs a:hover { color: var(--text-primary); background: var(--state-hover); }
.app-tabs a[aria-current="page"] { color: var(--text-primary); border-bottom-color: var(--brand-forest); }

.app-overlay { position: fixed; inset: 0; z-index: 60; overflow-y: auto; }
.app-dialog--wide { max-width: 640px; }
.app-toasts { position: fixed; right: var(--space-16); bottom: var(--space-16); z-index: 70; display: flex; flex-direction: column; gap: var(--space-8); width: calc(100% - 2 * var(--space-16)); max-width: 400px; }
.app-alerts { display: flex; flex-direction: column; gap: var(--space-12); margin-bottom: var(--space-24); }

.app-combo { position: relative; }
.app-combo .oh-listbox { position: absolute; left: 0; right: 0; z-index: 20; }
.app-lines-wrap .oh-tablewrap { overflow-x: auto; }
.app-lines th, .app-lines td { min-width: 0; }
.app-lines .col-desc { min-width: 240px; }
.app-lines .col-num { min-width: 96px; }
.app-lines .col-sel { min-width: 104px; }
.app-lines select.oh-select { min-height: 40px; font-size: 14px; padding-left: var(--space-8); padding-right: 28px; }
.app-lines .oh-affix { display: flex; }
.app-lines .oh-affix__end { right: var(--space-8); }
.app-preview { background: var(--surface-muted); padding: var(--space-16); border-radius: var(--radius-card); overflow-x: auto; }
.app-preview .oh-doc { margin: 0 auto; position: relative; }
.app-doc-mark { text-align: center; font-weight: 600; letter-spacing: .06em; padding: var(--space-8); border: 2px dashed var(--border-strong); margin-bottom: var(--space-16); }
.app-doc-title { margin-top: var(--space-24); }
.oh-doc h1.app-doc-title { margin-top: var(--space-24); }
.oh-doc__logo img { width: 40px; height: 40px; }
.app-summary-focus:focus { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: 2px; }
.app-actions { display: flex; flex-wrap: wrap; gap: var(--space-8); align-items: center; }
.app-badges { display: flex; flex-wrap: wrap; gap: var(--space-8); }
.app-table-link { text-decoration: underline; }
.app-empty-row td { text-align: center; color: var(--text-secondary); height: 96px; }
.oh-table tbody tr[data-href] { cursor: pointer; }
.app-checks { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-8); font-size: 14px; line-height: 20px; }
.app-checks li { display: flex; gap: var(--space-8); align-items: flex-start; }
.app-checks .oh-icon { margin-top: 1px; }
.app-checks .is-ok .oh-icon { color: var(--success); }
.app-checks .is-bad .oh-icon { color: var(--error); }
.app-checks .is-warn .oh-icon { color: var(--warning); }
.oh-field textarea.oh-input { padding: var(--space-8) var(--space-12); resize: vertical; min-height: 80px; }
.app-fieldset { border: var(--border-width) solid var(--border-subtle); border-radius: var(--radius-card); padding: var(--space-16); margin: 0; }
.app-fieldset legend { padding: 0 var(--space-8); font-size: 14px; line-height: 20px; font-weight: 500; }
.app-help-box { font-size: 14px; line-height: 20px; color: var(--text-secondary); }
@media print { .oh-nav, .app-testbar, .oh-pagehead, .app-noprint, .app-toasts { display: none !important; } .app-main { padding: 0; } .app-preview { padding: 0; background: none; } }

.app-select-sm { width: auto; min-width: 180px; min-height: 36px; }
.app-toolbar-end { justify-content: flex-start; border-bottom: 0; border-top: var(--border-width) solid var(--border-subtle); }
.app-more { flex-basis: 100%; }
.app-more summary { list-style: none; width: max-content; }

.oh-error-text[hidden], .oh-listbox[hidden], [hidden] { display: none !important; }

.app-main > *, .app-stack > *, .app-cols > * { min-width: 0; }
.app-shell__col { overflow-x: hidden; }
.oh-tablewrap { position: relative; }

@media (max-width: 900px) {
  .app-lines thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .app-lines, .app-lines tbody { display: block; }
  .app-lines tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8) var(--space-12); padding: var(--space-16); border-bottom: var(--border-width) solid var(--border-subtle); }
  .app-lines td { display: block; height: auto; padding: 0 !important; border: 0; }
  .app-lines td[data-label]::before { content: attr(data-label); display: block; font-size: 12px; line-height: 16px; font-weight: 500; color: var(--text-secondary); margin-bottom: var(--space-4); }
  .app-lines td.is-desc, .app-lines td.oh-lines__pos { grid-column: 1 / -1; }
  .app-lines .is-num { text-align: left; }
  .app-lines .oh-lines__sum { font-weight: 600; }
}