/* vnbooks: what the app adds on top of the VindNord design system (site/app.css, synced from the website).
   Components belong in the website's src/styles/app.css, not here; run bin/sync-design after changing them. */

/* tokens: dark */
/* end tokens */

body { background: var(--color-paper); }

/* Partner lookup list (move into the design system's app.css with the next design sync) */
.lookup { position: relative; }
.lookup__list { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% - 22px); margin: 0; padding: var(--space-1) 0; list-style: none;
  background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-m); box-shadow: var(--shadow-menu); max-height: 360px; overflow-y: auto; }
.lookup__list li { padding: var(--space-2) var(--space-4); cursor: pointer; font-size: var(--text-sm); }
.lookup__list li:hover, .lookup__list li[aria-selected="true"] { background: var(--color-accent-soft); }
/* the keyboard-highlighted option needs a 3:1 cue, not only the soft background (WCAG 1.4.11) */
.lookup__list li[aria-selected="true"] { outline: 3px solid var(--color-focus); outline-offset: -3px; }
.lookup__status:empty { display: none; }

/* Upload inbox: drop zone and register-beside-the-preview (move into the design system's app.css with the next design sync) */
.dropzone { display: block; padding: var(--space-6) var(--space-4); border: 2px dashed var(--color-line); border-radius: var(--radius-m); text-align: center; color: var(--color-muted); cursor: pointer; }
.dropzone--over { border-color: var(--color-accent); background: var(--color-accent-soft); }
.split { display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); align-items: start; }
.preview iframe, .preview img { display: block; width: 100%; border: 1px solid var(--color-line); border-radius: var(--radius-s); }
.preview iframe { height: 80vh; }
.filters + .panel, .filters + .alert, .panel + .table-wrap, .panel + .alert, .alert + .panel { margin-top: var(--space-5); }

/* Read-only form for a role without write access */
fieldset[disabled] { border: 0; margin: 0; padding: 0; min-width: 0; }
.badge--draft { background: var(--color-line); color: var(--color-muted); }

/* App header on narrow screens (WCAG 1.4.10, 320 px): the buttons stay on one line, a long user name is cut with an
   ellipsis (the chevron stays visible), and below 380 px the tools wrap under the logo */
@media (max-width: 600px) {
  .appbar__tools { min-width: 0; gap: var(--space-2); }
  .appbar__tools > .menu > summary { white-space: nowrap; }
  .appbar__tools > .menu:has(> summary.btn--secondary) { min-width: 0; }
  .appbar__tools > .menu > summary.btn--secondary { display: block; position: relative; max-width: 11em; padding-left: 10px; padding-right: 24px;
    overflow: hidden; text-overflow: ellipsis; line-height: 22px; }
  .appbar__tools > .menu > summary.btn--secondary::after { position: absolute; right: 10px; top: 50%; margin: -5px 0 0; }
}
@media (max-width: 379px) {
  .appbar .mainbar__in { flex-wrap: wrap; gap: var(--space-2) var(--space-3); padding-block: var(--space-2); }
}

/* The synced app bar is sticky (68px + 1px border): keep keyboard focus and anchors clear of it (WCAG 2.4.11) */
html { scroll-padding-top: calc(69px + var(--space-2)); }
.pre-line { white-space: pre-line; }