/* BiuroFlow portal / admin shared styling — the "BF form" world.
 *
 * Source of the world: biuroflow-site/DESIGN.md (form paper on a desk, 1px
 * ruled rows, ink-green part bands, light fields for what the user enters,
 * dark fields for what the office / BiuroFlow provides, print red only for
 * the page's one primary action, Archivo + JetBrains Mono, radius <= 2px,
 * no shadows, no gradients, no glass).
 * Operate adaptation ("BF register"): .impeccable/surfaces/portal-templates-portal.md
 * — office lists are 36–40px register rows, client controls are >= 44px.
 *
 * Class names are kept from the earlier dark theme so existing markup keeps
 * working; the legacy token names at the end of :root are aliases onto the
 * form palette for inline styles still present in page templates.
 */

/* ============================================================
   Fonts — self-hosted, OFL (licenses in static/fonts/)
   ============================================================ */
@font-face {
  font-family: "Archivo Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  src: url("../fonts/archivo-latin-ext-standard-normal.589f7bc0fac4.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Archivo Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  src: url("../fonts/archivo-latin-standard-normal.de2f1fe81758.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "JetBrains Mono Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 800;
  src: url("../fonts/jetbrains-mono-latin-ext-wght-normal.e36841ed93d5.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "JetBrains Mono Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 800;
  src: url("../fonts/jetbrains-mono-latin-wght-normal.b058178d7f30.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Legacy family names still written inline in some page templates and JS
   ('JetBrains Mono', 'Space Grotesk'): resolve them to the same files until
   those inline styles are removed. */
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-display: swap;
  font-weight: 100 800;
  src: url("../fonts/jetbrains-mono-latin-ext-wght-normal.e36841ed93d5.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-display: swap;
  font-weight: 100 800;
  src: url("../fonts/jetbrains-mono-latin-wght-normal.b058178d7f30.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("../fonts/archivo-latin-ext-standard-normal.589f7bc0fac4.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("../fonts/archivo-latin-standard-normal.de2f1fe81758.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============================================================
   Design tokens — single source of truth (form world)
   ============================================================ */
:root {
  /* Spacing scale (unchanged) */
  --bf-space-xs: 4px;
  --bf-space-sm: 8px;
  --bf-space-md: 12px;
  --bf-space-lg: 16px;
  --bf-space-xl: 24px;
  --bf-space-2xl: 32px;
  --bf-space-3xl: 48px;
  --bf-space-4xl: 64px;

  /* Form palette (biuroflow-site/DESIGN.md). Contrast on paper:
     ink 15.1, label 7.0, muted 5.1 (paper/white only), band 12.1, red 6.0. */
  --bf-form-desk: #DDE6D9;      /* page background the sheets lie on */
  --bf-form-paper: #F5F8F2;     /* the sheet, header strips, quiet controls */
  --bf-form-field: #E2ECDC;     /* light field: what the user enters */
  --bf-form-dark: #CFDDC7;      /* dark field: what office / BiuroFlow provides */
  --bf-form-hairline: #B9CBB5;  /* inner row dividers */
  --bf-form-rule: #6F8A77;      /* structural 1px rules, control outlines */
  --bf-form-ink: #15241B;       /* primary text, focus */
  --bf-form-label: #46594C;     /* captions, secondary text (AA on every field) */
  --bf-form-muted: #5A6E60;     /* placeholder only, on paper / white */
  --bf-form-band: #1E3628;      /* part bands, selected states, band tags */
  --bf-form-red: #A8381F;       /* print red: the page's one primary action */
  --bf-form-red-hover: #8C2C17;
  --bf-form-white: #FFFFFF;

  --bf-font-sans: "Archivo Variable", system-ui, -apple-system, "Segoe UI", sans-serif;
  --bf-font-mono: "JetBrains Mono Variable", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Radii — 2px is the maximum in this world */
  --bf-radius-sm: 2px;
  --bf-radius-md: 2px;
  --bf-radius-lg: 2px;
  --bf-radius-xl: 2px;
  --bf-radius-full: 2px;

  /* Flat paper: no elevation */
  --bf-shadow-sm: none;
  --bf-shadow-md: none;
  --bf-shadow-lg: none;

  /* Motion */
  --bf-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --bf-duration-fast: 120ms;
  --bf-duration-base: 180ms;
  --bf-duration-slow: 240ms;

  /* Sizing. Office (default) is a dense register on desktop; client mode and
     every screen under 1024px get >= 44px controls. */
  --bf-row-h: 38px;          /* register row */
  --bf-control-h: 36px;      /* default control height */
  --bf-control-h-sm: 32px;
  --bf-control-h-xs: 28px;
  --bf-topbar-h: 56px;
  --bf-density-pad: var(--bf-space-xl);
  --bf-density-card-pad: var(--bf-space-lg);
  --bf-density-row-pad: var(--bf-space-sm) var(--bf-space-md);

  /* z-index ladder */
  --bf-z-sidebar: 30;
  --bf-z-topbar: 40;
  --bf-z-modal: 60;
  --bf-z-toast: 70;
  --bf-z-palette: 80;

  /* ---- Legacy aliases (inline styles in page templates and JS) ---- */
  --bf-bg-base: var(--bf-form-paper);
  --bf-bg-base-soft: var(--bf-form-desk);
  --bf-bg-base-elevated: var(--bf-form-paper);
  --bf-bg-surface: var(--bf-form-paper);
  --bf-bg-surface-hover: var(--bf-form-field);
  --bf-bg-surface-alt: var(--bf-form-field);
  --bf-bg-surface-strong: var(--bf-form-dark);
  --bf-bg-muted: var(--bf-form-field);

  --bf-border-subtle: var(--bf-form-hairline);
  --bf-border-medium: var(--bf-form-rule);
  --bf-border-strong: var(--bf-form-ink);
  --bf-border: var(--bf-form-rule);

  /* Status colour no longer carries meaning: text + ruled tag does. */
  --bf-blue: var(--bf-form-band);
  --bf-blue-soft: var(--bf-form-field);
  --bf-blue-deep: var(--bf-form-band);
  --bf-amber: var(--bf-form-ink);
  --bf-amber-soft: var(--bf-form-field);
  --bf-success: var(--bf-form-ink);
  --bf-success-soft: var(--bf-form-dark);
  --bf-warning: var(--bf-form-ink);
  --bf-warning-soft: var(--bf-form-field);
  --bf-info: var(--bf-form-ink);
  --bf-info-soft: var(--bf-form-field);
  /* Form error messages are the one stop state that reads in print red. */
  --bf-error: var(--bf-form-red);
  --bf-error-soft: var(--bf-form-field);

  --bf-text-primary: var(--bf-form-ink);
  --bf-text-secondary: var(--bf-form-label);
  --bf-text-tertiary: var(--bf-form-label);
  --bf-text-disabled: var(--bf-form-label);
  --bf-text-on-accent: var(--bf-form-white);
}

/* Client mode: a short form to finish on a phone — clear, >= 44px controls. */
[data-bf-mode="client"] {
  --bf-row-h: 48px;
  --bf-control-h: 44px;
  --bf-control-h-sm: 44px;
  --bf-control-h-xs: 44px;
  --bf-density-card-pad: var(--bf-space-xl);
}

/* Touch screens: every target >= 44px whatever the mode. */
@media (max-width: 1023px) {
  :root {
    --bf-row-h: 44px;
    --bf-control-h: 44px;
    --bf-control-h-sm: 44px;
    --bf-control-h-xs: 44px;
    --bf-density-pad: var(--bf-space-lg);
  }
  [data-bf-mode="client"] {
    --bf-row-h: 48px;
    --bf-density-card-pad: var(--bf-space-lg);
  }
}

/* ============================================================
   Base typography & body
   ============================================================ */
html {
  background: var(--bf-form-desk);
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scrollbar-color: var(--bf-form-rule) var(--bf-form-desk);
}

html,
body {
  font-family: var(--bf-font-sans);
}

body {
  min-height: 100vh;
  background: var(--bf-form-desk);
  color: var(--bf-form-ink);
  caret-color: var(--bf-form-ink);
  font-size: 0.9375rem;
  line-height: 1.5;
}
body[data-bf-mode="client"] {
  font-size: 1rem;
}

code,
pre,
kbd,
samp,
.font-mono {
  font-family: var(--bf-font-mono);
  font-variant-numeric: tabular-nums;
}

::selection {
  background: var(--bf-form-dark);
  color: var(--bf-form-ink);
}

:focus-visible {
  outline: 2px solid var(--bf-form-ink);
  outline-offset: 3px;
  border-radius: 2px;
}

a {
  text-underline-offset: 3px;
}

/* Rubric caption — condensed caps, the printed label of a form field. */
.bf-caption {
  font-family: var(--bf-font-sans);
  font-size: 0.75rem;
  font-weight: 600;
  font-stretch: 75%;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bf-form-label);
  line-height: 1.33;
}

/* Part band — opens a lettered part of a sheet (h2 on a solid band). */
.bf-part-band {
  display: flex;
  align-items: baseline;
  gap: var(--bf-space-md);
  margin: 0;
  padding: 10px var(--bf-space-lg);
  background: var(--bf-form-band);
  color: var(--bf-form-white);
  font-size: 0.875rem;
  font-weight: 600;
  font-stretch: 75%;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.bf-part-band__letter {
  font-family: var(--bf-font-mono);
  font-stretch: 100%;
  letter-spacing: 0;
}

/* Skip-to-content link (a11y) */
.bf-skip-link {
  position: absolute;
  top: -60px;
  left: var(--bf-space-lg);
  z-index: var(--bf-z-toast);
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--bf-space-lg);
  background: var(--bf-form-band);
  color: var(--bf-form-white);
  border-radius: var(--bf-radius-sm);
  font-weight: 600;
  transition: top var(--bf-duration-base) var(--bf-ease);
}
.bf-skip-link:focus {
  top: var(--bf-space-md);
}

/* Visually hidden but available to screen readers */
.bf-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================
   Cards → ruled sheets
   ============================================================ */
.bf-card,
.glass-card,
.bf-card--hover,
.glass-card-hover {
  background-color: var(--bf-form-paper);
  border: 1px solid var(--bf-form-rule);
  border-radius: 0;
  box-shadow: none;
}

.bf-card--hover,
.glass-card-hover,
.bf-card--clickable {
  transition: background-color var(--bf-duration-fast) var(--bf-ease);
}
.bf-card--hover:hover,
.glass-card-hover:hover,
.bf-card--clickable:hover {
  background-color: var(--bf-form-field);
}

.bf-card--interactive {
  cursor: pointer;
}
.bf-card--interactive:hover {
  background-color: var(--bf-form-field);
}

/* Native <details> sheets: drop the browser marker. */
details.bf-card > summary::-webkit-details-marker {
  display: none;
}
details.bf-card > summary {
  min-height: var(--bf-row-h);
}
details.bf-card[open] > summary {
  border-bottom: 1px solid var(--bf-form-hairline);
}

.bf-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--bf-space-lg);
  padding: var(--bf-space-md) var(--bf-density-card-pad);
  border-bottom: 1px solid var(--bf-form-rule);
}
.bf-card__body {
  padding: var(--bf-density-card-pad);
}
.bf-card__footer {
  padding: var(--bf-space-md) var(--bf-density-card-pad);
  border-top: 1px solid var(--bf-form-hairline);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--bf-space-sm);
  flex-wrap: wrap;
}

/* ============================================================
   Inputs / forms — white boxes on the sheet, typed by the user
   ============================================================ */
.bf-input,
.bf-textarea,
.bf-select,
.bf-file {
  display: block;
  width: 100%;
  min-height: var(--bf-control-h);
  padding: 6px var(--bf-space-md);
  background-color: var(--bf-form-white);
  border: 1px solid var(--bf-form-rule);
  border-radius: var(--bf-radius-sm);
  color: var(--bf-form-ink);
  font-size: 0.9375rem;
  font-family: inherit;
  line-height: 1.5;
  transition: border-color var(--bf-duration-fast) var(--bf-ease);
}
@media (max-width: 1023px) {
  /* 16px stops iOS from zooming into the field. */
  .bf-input,
  .bf-textarea,
  .bf-select,
  .bf-file {
    font-size: 1rem;
  }
}

.bf-input:hover,
.bf-textarea:hover,
.bf-select:hover {
  border-color: var(--bf-form-ink);
}

.bf-input:focus,
.bf-textarea:focus,
.bf-select:focus,
.bf-file:focus,
.bf-file:focus-within {
  outline: 1px solid var(--bf-form-ink);
  outline-offset: 0;
  border-color: var(--bf-form-ink);
}

.bf-input::placeholder,
.bf-textarea::placeholder {
  color: var(--bf-form-muted);
  opacity: 1;
}

.bf-input:disabled,
.bf-textarea:disabled,
.bf-select:disabled {
  background-color: var(--bf-form-paper);
  border-style: dashed;
  cursor: not-allowed;
}

.bf-textarea {
  min-height: 8rem;
  resize: vertical;
}

.bf-textarea--sm { min-height: 5rem; }

.bf-select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2315241B' stroke-width='2'%3E%3Cpath stroke-linecap='square' d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-position: right var(--bf-space-md) center;
  background-repeat: no-repeat;
  background-size: 1em;
  padding-right: var(--bf-space-2xl);
}

.bf-file {
  padding: 0;
}
.bf-file::file-selector-button {
  min-height: calc(var(--bf-control-h) - 2px);
  margin-right: var(--bf-space-md);
  padding: 0 var(--bf-space-lg);
  background: var(--bf-form-paper);
  border: 0;
  border-right: 1px solid var(--bf-form-rule);
  color: var(--bf-form-ink);
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
}
.bf-file::file-selector-button:hover {
  background: var(--bf-form-field);
}

/* Form field wrapper */
.bf-field {
  display: flex;
  flex-direction: column;
  gap: var(--bf-space-xs);
}
.bf-field__label {
  font-size: 0.75rem;
  font-weight: 600;
  font-stretch: 75%;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bf-form-label);
  display: flex;
  align-items: center;
  gap: var(--bf-space-xs);
}
.bf-field__label--required::after {
  content: "*";
  color: var(--bf-form-ink);
  font-weight: 700;
}
.bf-field__hint {
  font-size: 0.8125rem;
  color: var(--bf-form-label);
}
.bf-field__error,
.bf-form-error {
  font-size: 0.8125rem;
  color: var(--bf-form-red);
  display: flex;
  align-items: center;
  gap: var(--bf-space-xs);
  margin-top: var(--bf-space-xs);
}

/* ============================================================
   Buttons — one red action per region, the rest ruled paper
   ============================================================ */
.bf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--bf-space-sm);
  min-height: var(--bf-control-h);
  padding: 0 var(--bf-space-lg);
  border-radius: var(--bf-radius-sm);
  border: 1px solid var(--bf-form-rule);
  background: var(--bf-form-paper);
  color: var(--bf-form-ink);
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  user-select: none;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: none;
  transition:
    background-color var(--bf-duration-fast) var(--bf-ease),
    border-color var(--bf-duration-fast) var(--bf-ease),
    color var(--bf-duration-fast) var(--bf-ease);
}
.bf-btn:hover:not(:disabled) {
  background: var(--bf-form-field);
}
.bf-btn:focus-visible {
  outline: 2px solid var(--bf-form-ink);
  outline-offset: 3px;
}
.bf-btn:disabled,
.bf-btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
}

.bf-btn--primary {
  background: var(--bf-form-red);
  border-color: var(--bf-form-red);
  color: var(--bf-form-white);
}
.bf-btn--primary:hover:not(:disabled) {
  background: var(--bf-form-red-hover);
  border-color: var(--bf-form-red-hover);
}

.bf-btn--secondary {
  background: var(--bf-form-paper);
  border-color: var(--bf-form-rule);
  color: var(--bf-form-ink);
}
.bf-btn--secondary:hover:not(:disabled) {
  background: var(--bf-form-field);
}

.bf-btn--ghost {
  background: transparent;
  border-color: transparent;
  color: var(--bf-form-ink);
}
.bf-btn--ghost:hover:not(:disabled) {
  background: var(--bf-form-field);
  border-color: var(--bf-form-hairline);
}

/* Destructive: ruled in ink, never red (red is the primary action). */
.bf-btn--danger {
  background: var(--bf-form-paper);
  border-color: var(--bf-form-ink);
  color: var(--bf-form-ink);
}
.bf-btn--danger:hover:not(:disabled) {
  background: var(--bf-form-band);
  border-color: var(--bf-form-band);
  color: var(--bf-form-white);
}

.bf-btn--sm {
  min-height: var(--bf-control-h-sm);
  padding: 0 var(--bf-space-md);
  font-size: 0.8125rem;
}
.bf-btn--xs {
  min-height: var(--bf-control-h-xs);
  padding: 0 var(--bf-space-sm);
  font-size: 0.8125rem;
}
.bf-btn--lg {
  min-height: 48px;
  padding: 0 var(--bf-space-xl);
  font-size: 1rem;
}
.bf-btn--icon {
  padding: 0;
  min-width: var(--bf-control-h);
}
@media (max-width: 1023px) {
  .bf-btn,
  .bf-btn--icon {
    min-width: 44px;
  }
}

.bf-btn--block {
  width: 100%;
}

/* ============================================================
   Badges → ruled text tags (status = words, not colour)
   ============================================================ */
.bf-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--bf-space-xs);
  padding: 1px 6px;
  border: 1px solid var(--bf-form-rule);
  border-radius: var(--bf-radius-sm);
  background: transparent;
  color: var(--bf-form-ink);
  font-size: 0.75rem;
  font-weight: 600;
  font-stretch: 75%;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1.4;
}
/* Quiet: closed / draft / neutral */
.bf-badge--neutral { color: var(--bf-form-label); border-color: var(--bf-form-rule); }
/* In progress / informational */
.bf-badge--info    { color: var(--bf-form-ink); border-color: var(--bf-form-rule); }
/* Done / accepted: filled dark field (what the office already settled) */
.bf-badge--success { color: var(--bf-form-ink); border-color: var(--bf-form-rule); background: var(--bf-form-dark); }
/* Waiting for someone: ink rule */
.bf-badge--warning { color: var(--bf-form-ink); border-color: var(--bf-form-ink); }
/* Needs action now (overdue "PO TERMINIE", rejected): band tag, never red */
.bf-badge--error,
.bf-badge--overdue,
.bf-badge--accent  { color: var(--bf-form-white); border-color: var(--bf-form-band); background: var(--bf-form-band); }

.bf-badge--lg {
  padding: 3px var(--bf-space-sm);
}

/* Unread marker: a small square of band ink, no pulse */
.bf-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 0;
  background: var(--bf-form-band);
}
.bf-dot--quiet { background: var(--bf-form-rule); }
.bf-dot--success,
.bf-dot--warning,
.bf-dot--error { background: var(--bf-form-band); }

/* Count box (sidebar / inbox) — a mono figure in a ruled box */
.bf-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.75em;
  height: 1.5rem;
  padding: 0 5px;
  border: 1px solid var(--bf-form-band);
  border-radius: var(--bf-radius-sm);
  background: var(--bf-form-band);
  color: var(--bf-form-white);
  font-family: var(--bf-font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.bf-count--muted {
  background: transparent;
  border-color: var(--bf-form-rule);
  color: var(--bf-form-ink);
}

/* ============================================================
   Shell layout — paper strips on a green desk
   ============================================================ */
.bf-shell {
  display: grid;
  grid-template-columns: 256px minmax(0, 1fr);
  min-height: 100vh;
}
@media (max-width: 1023px) {
  .bf-shell {
    grid-template-columns: minmax(0, 1fr);
  }
}

.bf-sidebar {
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  max-height: 100vh;
  overflow-y: auto;
  background: var(--bf-form-paper);
  border-right: 1px solid var(--bf-form-rule);
  padding: 0 0 var(--bf-space-lg);
  z-index: var(--bf-z-sidebar);
  display: flex;
  flex-direction: column;
  gap: var(--bf-space-lg);
}
@media (max-width: 1023px) {
  .bf-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: var(--bf-z-modal);
    width: min(288px, 86vw);
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform var(--bf-duration-slow) var(--bf-ease), visibility 0s linear var(--bf-duration-slow);
  }
  .bf-sidebar[data-open="true"] {
    transform: translateX(0);
    visibility: visible;
    transition: transform var(--bf-duration-slow) var(--bf-ease);
  }
}

.bf-sidebar__brand {
  display: flex;
  align-items: center;
  gap: var(--bf-space-md);
  min-height: var(--bf-topbar-h);
  padding: var(--bf-space-sm) var(--bf-space-lg);
  border-bottom: 1px solid var(--bf-form-rule);
  text-decoration: none;
  color: var(--bf-form-ink);
}
.bf-sidebar__brand-mark {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}
.bf-sidebar__brand-mark img {
  display: block;
  width: 28px;
  height: 28px;
}
.bf-sidebar__brand-name {
  display: block;
  font-weight: 800;
  font-stretch: 112%;
  font-size: 1.125rem;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--bf-form-ink);
}
.bf-sidebar__brand-name em {
  color: inherit;
  font-style: normal;
}
.bf-sidebar__brand-tag {
  display: block;
  margin-top: 2px;
  font-size: 0.75rem;
  font-weight: 600;
  font-stretch: 75%;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bf-form-label);
}

.bf-nav-section {
  display: flex;
  flex-direction: column;
  padding: 0 var(--bf-space-sm);
}
.bf-nav-section__title {
  padding: 0 var(--bf-space-md);
  margin-bottom: var(--bf-space-xs);
  font-size: 0.75rem;
  font-weight: 600;
  font-stretch: 75%;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bf-form-label);
}

.bf-nav-link {
  display: flex;
  align-items: center;
  gap: var(--bf-space-md);
  min-height: 40px;
  padding: 0 var(--bf-space-md);
  border-bottom: 1px solid var(--bf-form-hairline);
  border-radius: 0;
  color: var(--bf-form-ink);
  text-decoration: none;
  font-size: 0.9375rem;
  font-weight: 500;
  transition: background var(--bf-duration-fast) var(--bf-ease), color var(--bf-duration-fast) var(--bf-ease);
}
.bf-nav-link:first-child {
  border-top: 1px solid var(--bf-form-hairline);
}
@media (max-width: 1023px) {
  .bf-nav-link {
    min-height: 48px;
  }
}
.bf-nav-link:hover {
  background: var(--bf-form-field);
}
.bf-nav-link[aria-current="page"],
.bf-nav-link.active {
  background: var(--bf-form-band);
  border-color: var(--bf-form-band);
  color: var(--bf-form-white);
  font-weight: 600;
}
.bf-nav-link.active .bf-count {
  background: var(--bf-form-paper);
  border-color: var(--bf-form-paper);
  color: var(--bf-form-ink);
}
.bf-nav-link__icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.bf-nav-link__label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bf-nav-link__badge {
  margin-left: auto;
  flex-shrink: 0;
}

/* Sidebar footer: who is signed in */
.bf-sidebar__footer {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: var(--bf-space-sm);
  padding: var(--bf-space-md) var(--bf-space-lg) 0;
  border-top: 1px solid var(--bf-form-rule);
}
.bf-sidebar__user {
  display: flex;
  align-items: center;
  gap: var(--bf-space-sm);
  min-width: 0;
}
.bf-sidebar__user-text {
  min-width: 0;
  flex: 1;
}
.bf-sidebar__user-name {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--bf-form-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bf-sidebar__user-role {
  font-size: 0.8125rem;
  color: var(--bf-form-label);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bf-sidebar__avatar {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  background: var(--bf-form-dark);
  border: 1px solid var(--bf-form-rule);
  color: var(--bf-form-ink);
  font-family: var(--bf-font-mono);
  font-size: 0.8125rem;
  font-weight: 500;
}

/* Mobile sidebar overlay */
.bf-sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(21, 36, 27, 0.45);
  z-index: calc(var(--bf-z-sidebar) - 1);
}
.bf-sidebar-backdrop[data-open="true"] {
  display: block;
}
@media (max-width: 1023px) {
  .bf-sidebar-backdrop {
    z-index: calc(var(--bf-z-modal) - 1);
  }
}

/* Anchor targets clear the sticky topbar (e.g. task #korespondencja after a reply). */
.bf-content [id] {
  scroll-margin-top: calc(var(--bf-topbar-h) + var(--bf-space-lg));
}

.bf-main {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.bf-topbar {
  position: sticky;
  top: 0;
  z-index: var(--bf-z-topbar);
  display: flex;
  align-items: center;
  gap: var(--bf-space-md);
  min-height: var(--bf-topbar-h);
  padding: var(--bf-space-sm) var(--bf-space-xl);
  background: var(--bf-form-paper);
  border-bottom: 1px solid var(--bf-form-rule);
}
@media (max-width: 1023px) {
  .bf-topbar {
    padding: var(--bf-space-sm) var(--bf-space-md);
    gap: var(--bf-space-sm);
  }
}
.bf-topbar__actions {
  display: flex;
  align-items: center;
  gap: var(--bf-space-sm);
  margin-left: auto;
}

.bf-content {
  flex: 1;
  min-height: 0;
  padding: var(--bf-density-pad);
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
}
/* List/table-heavy pages need full width to fit dense rows. */
.bf-content--wide {
  max-width: none;
}
.bf-content--flush {
  padding: 0;
}

/* Hamburger only on mobile */
.bf-hamburger {
  display: none;
}
@media (max-width: 1023px) {
  .bf-hamburger {
    display: inline-flex;
  }
}

/* ============================================================
   Mobile bottom navigation — clients live on phones
   ============================================================ */
.bf-bottom-nav {
  display: none;
}
@media (max-width: 1023px) {
  .bf-bottom-nav {
    position: fixed;
    inset: auto 0 0 0;
    z-index: var(--bf-z-topbar);
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: var(--bf-form-paper);
    border-top: 1px solid var(--bf-form-rule);
  }
  /* Keep page content clear of the fixed bar (incl. iOS home indicator). */
  .bf-content {
    padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px));
  }
}

.bf-bottom-nav__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 56px;
  min-width: 44px;
  padding: 6px 2px;
  border-left: 1px solid var(--bf-form-hairline);
  text-decoration: none;
  color: var(--bf-form-label);
  transition: color var(--bf-duration-fast) var(--bf-ease),
    background var(--bf-duration-fast) var(--bf-ease);
}
.bf-bottom-nav__item:first-child {
  border-left: 0;
}
.bf-bottom-nav__item:active {
  background: var(--bf-form-field);
}
.bf-bottom-nav__item.is-active {
  background: var(--bf-form-band);
  color: var(--bf-form-white);
}
.bf-bottom-nav__item:focus-visible {
  outline-offset: -3px;
}
.bf-bottom-nav__icon {
  width: 22px;
  height: 22px;
}
.bf-bottom-nav__icon-wrap {
  position: relative;
  display: inline-flex;
}
.bf-bottom-nav__dot {
  position: absolute;
  top: -3px;
  right: -4px;
  width: 9px;
  height: 9px;
  border-radius: 0;
  background: var(--bf-form-band);
  border: 2px solid var(--bf-form-paper);
}
.bf-bottom-nav__item.is-active .bf-bottom-nav__dot {
  background: var(--bf-form-white);
  border-color: var(--bf-form-band);
}
.bf-bottom-nav__label {
  font-size: 0.75rem;
  font-weight: 600;
  font-stretch: 87.5%;
  line-height: 1.1;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ============================================================
   Task center — columns on desktop, joined tabs on mobile
   ============================================================ */
.bf-tasks__radio {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.bf-tasks__tabs {
  display: none;
}
.bf-tasks__panels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--bf-space-lg);
  align-items: start;
}
.bf-tasks__panel > header {
  padding-bottom: var(--bf-space-sm);
  border-bottom: 1px solid var(--bf-form-rule);
}

@media (max-width: 1023px) {
  .bf-tasks__tabs {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    margin-bottom: var(--bf-space-lg);
    background: var(--bf-form-paper);
    border: 1px solid var(--bf-form-rule);
    border-radius: var(--bf-radius-sm);
    overflow: hidden;
  }
  .bf-tasks__tab {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 44px;
    padding: 0 var(--bf-space-sm);
    border-left: 1px solid var(--bf-form-rule);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--bf-form-ink);
    cursor: pointer;
    user-select: none;
    transition: background var(--bf-duration-fast) var(--bf-ease),
      color var(--bf-duration-fast) var(--bf-ease);
  }
  .bf-tasks__tab:first-child {
    border-left: 0;
  }
  .bf-tasks__tab-count {
    font-family: var(--bf-font-mono);
    font-size: 0.75rem;
    font-weight: 500;
    padding: 0 5px;
    border: 1px solid var(--bf-form-rule);
    border-radius: var(--bf-radius-sm);
    color: var(--bf-form-ink);
  }
  .bf-tasks__panels {
    display: block;
  }
  .bf-tasks__panel {
    display: none;
  }
  #bf-tab-todo:checked ~ .bf-tasks__panels > [data-tab="todo"],
  #bf-tab-waiting:checked ~ .bf-tasks__panels > [data-tab="waiting"],
  #bf-tab-closed:checked ~ .bf-tasks__panels > [data-tab="closed"] {
    display: block;
  }
  #bf-tab-todo:checked ~ .bf-tasks__tabs label[for="bf-tab-todo"],
  #bf-tab-waiting:checked ~ .bf-tasks__tabs label[for="bf-tab-waiting"],
  #bf-tab-closed:checked ~ .bf-tasks__tabs label[for="bf-tab-closed"] {
    background: var(--bf-form-band);
    color: var(--bf-form-white);
  }
  #bf-tab-todo:checked ~ .bf-tasks__tabs label[for="bf-tab-todo"] .bf-tasks__tab-count,
  #bf-tab-waiting:checked ~ .bf-tasks__tabs label[for="bf-tab-waiting"] .bf-tasks__tab-count,
  #bf-tab-closed:checked ~ .bf-tasks__tabs label[for="bf-tab-closed"] .bf-tasks__tab-count {
    border-color: var(--bf-form-white);
    color: var(--bf-form-white);
  }
  .bf-tasks__radio:focus-visible ~ .bf-tasks__tabs {
    outline: 2px solid var(--bf-form-ink);
    outline-offset: 3px;
  }
}

/* ============================================================
   Page header / breadcrumb
   ============================================================ */
.bf-page-header {
  display: flex;
  flex-direction: column;
  gap: var(--bf-space-md);
  margin-bottom: var(--bf-space-xl);
}
.bf-page-header__row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--bf-space-lg);
  flex-wrap: wrap;
}
.bf-page-title {
  font-size: 1.75rem;
  font-weight: 800;
  font-stretch: 112%;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--bf-form-ink);
  margin: 0;
  text-wrap: balance;
}
@media (max-width: 639px) {
  .bf-page-title {
    font-size: 1.5rem;
  }
}
.bf-page-subtitle {
  color: var(--bf-form-label);
  margin-top: var(--bf-space-xs);
  font-size: 0.9375rem;
  max-width: 68ch;
}

.bf-breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--bf-space-xs);
  font-size: 0.8125rem;
  color: var(--bf-form-label);
  list-style: none;
  padding: 0;
  margin: 0 0 var(--bf-space-sm);
  flex-wrap: wrap;
}
.bf-breadcrumb a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  color: var(--bf-form-label);
  text-decoration: underline;
  text-decoration-color: var(--bf-form-hairline);
  text-underline-offset: 4px;
  transition: color var(--bf-duration-fast) var(--bf-ease);
}
@media (max-width: 1023px) {
  .bf-breadcrumb a {
    min-height: 44px;
    min-width: 44px;
    justify-content: center;
  }
}
.bf-breadcrumb a:hover {
  color: var(--bf-form-ink);
  text-decoration-color: var(--bf-form-ink);
}
.bf-breadcrumb__sep {
  color: var(--bf-form-label);
  margin: 0 var(--bf-space-xs);
  user-select: none;
}
.bf-breadcrumb__current {
  color: var(--bf-form-ink);
  font-weight: 600;
}

/* ============================================================
   Empty / error / loading states
   ============================================================ */
.bf-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--bf-space-sm);
  padding: var(--bf-space-2xl) var(--bf-space-xl);
  color: var(--bf-form-label);
}
.bf-state__icon {
  width: 40px;
  height: 40px;
  color: var(--bf-form-rule);
}
.bf-state__icon svg {
  width: 40px;
  height: 40px;
}
.bf-state__title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--bf-form-ink);
}
.bf-state__message {
  font-size: 0.9375rem;
  max-width: 34rem;
  color: var(--bf-form-label);
}
.bf-state__action {
  margin-top: var(--bf-space-sm);
}

.bf-state--error .bf-state__icon { color: var(--bf-form-ink); }
.bf-state--error .bf-state__title { color: var(--bf-form-ink); }
.bf-state--success .bf-state__icon { color: var(--bf-form-ink); }

/* Skeleton loaders — flat dark-field blocks that breathe */
.bf-skeleton {
  display: block;
  background: var(--bf-form-dark);
  border-radius: 0;
  animation: bfBreathe 1.4s ease-in-out infinite alternate;
  height: 1em;
}
.bf-skeleton--lg { height: 2.5em; }
.bf-skeleton--circle { aspect-ratio: 1; height: 2.5em; }
.bf-kpi .bf-skeleton,
.bf-metric .bf-skeleton { background: var(--bf-form-hairline); }

@keyframes bfBreathe {
  from { opacity: 1; }
  to   { opacity: 0.55; }
}

/* ============================================================
   Attachment tile
   ============================================================ */
.bf-attachment {
  display: flex;
  align-items: center;
  gap: var(--bf-space-md);
  min-height: 48px;
  padding: var(--bf-space-sm) var(--bf-space-md);
  background: var(--bf-form-paper);
  border: 1px solid var(--bf-form-rule);
  border-radius: 0;
  text-decoration: none;
  color: inherit;
  transition: background var(--bf-duration-fast) var(--bf-ease);
}
.bf-attachment:hover {
  background: var(--bf-form-field);
}
.bf-attachment__icon {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  background: var(--bf-form-dark);
  border: 1px solid var(--bf-form-hairline);
  border-radius: 0;
  color: var(--bf-form-ink);
  flex-shrink: 0;
}
.bf-attachment__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.bf-attachment__name {
  font-size: 0.875rem;
  color: var(--bf-form-ink);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bf-attachment__meta {
  font-size: 0.8125rem;
  color: var(--bf-form-label);
  display: flex;
  flex-wrap: wrap;
  gap: var(--bf-space-xs) var(--bf-space-sm);
  align-items: center;
}
.bf-attachment__size {
  font-family: var(--bf-font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.8125rem;
  color: var(--bf-form-label);
  flex-shrink: 0;
}

/* ============================================================
   Messages (thread detail). Field key: what the office wrote sits on a
   dark field, what the client wrote on a light field.
   ============================================================ */
.bf-message {
  display: flex;
  gap: var(--bf-space-md);
  padding: var(--bf-space-md) var(--bf-space-lg);
  background: var(--bf-form-paper);
  border: 1px solid var(--bf-form-rule);
  border-radius: 0;
  position: relative;
}
.bf-message--from-office {
  background: var(--bf-form-dark);
}
.bf-message--from-client {
  background: var(--bf-form-field);
}
.bf-message--unread::after {
  content: "";
  position: absolute;
  top: var(--bf-space-md);
  right: var(--bf-space-md);
  width: 8px;
  height: 8px;
  background: var(--bf-form-band);
}

.bf-message__avatar {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 0;
  background: var(--bf-form-band);
  color: var(--bf-form-white);
  font-family: var(--bf-font-mono);
  font-weight: 500;
  font-size: 0.875rem;
  flex-shrink: 0;
  border: 1px solid var(--bf-form-band);
}
.bf-message__avatar--client {
  background: var(--bf-form-white);
  color: var(--bf-form-ink);
  border-color: var(--bf-form-rule);
}
.bf-message__body {
  flex: 1;
  min-width: 0;
}
.bf-message__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--bf-space-md);
  margin-bottom: var(--bf-space-xs);
  flex-wrap: wrap;
}
.bf-message__author {
  font-weight: 700;
  font-size: 0.875rem;
  color: var(--bf-form-ink);
}
.bf-message__time {
  font-family: var(--bf-font-mono);
  font-size: 0.8125rem;
  color: var(--bf-form-label);
  font-variant-numeric: tabular-nums;
}
.bf-message__direction,
.bf-message__direction--from-client,
.bf-message__direction--from-office {
  font-size: 0.75rem;
  font-weight: 600;
  font-stretch: 75%;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bf-form-label);
}
.bf-message__text {
  color: var(--bf-form-ink);
  font-size: 0.9375rem;
  line-height: 1.6;
  white-space: pre-wrap;
  word-wrap: break-word;
  max-width: 72ch;
}
.bf-message__attachments {
  margin-top: var(--bf-space-md);
  display: flex;
  flex-direction: column;
  gap: var(--bf-space-xs);
}

/* New-message hook (used by realtime JS) */
.bf-message--just-arrived {
  animation: bfFadeIn 320ms var(--bf-ease) both;
}

/* ============================================================
   Composer (sticky reply box)
   ============================================================ */
.bf-composer {
  position: sticky;
  bottom: 0;
  background: var(--bf-form-desk);
  border-top: 1px solid var(--bf-form-rule);
  padding-top: var(--bf-space-md);
  padding-bottom: var(--bf-space-md);
  display: flex;
  flex-direction: column;
  gap: var(--bf-space-sm);
}
.bf-composer__shell {
  background: var(--bf-form-white);
  border: 1px solid var(--bf-form-rule);
  border-radius: var(--bf-radius-sm);
  padding: var(--bf-space-sm);
  display: flex;
  flex-direction: column;
  gap: var(--bf-space-sm);
}
.bf-composer__shell:focus-within {
  border-color: var(--bf-form-ink);
  outline: 1px solid var(--bf-form-ink);
  outline-offset: 0;
}
.bf-composer textarea {
  border: 0;
  background: transparent;
  resize: none;
  min-height: 4em;
  padding: var(--bf-space-sm);
  color: var(--bf-form-ink);
  font-family: inherit;
  font-size: 1rem;
  outline: none;
}
.bf-composer textarea::placeholder {
  color: var(--bf-form-muted);
  opacity: 1;
}
.bf-composer__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bf-space-sm);
  flex-wrap: wrap;
}
.bf-composer__hint {
  font-size: 0.8125rem;
  color: var(--bf-form-label);
}
.bf-composer__hint kbd,
kbd.bf-kbd {
  padding: 1px 5px;
  background: var(--bf-form-white);
  border: 1px solid var(--bf-form-rule);
  border-radius: var(--bf-radius-sm);
  font-family: var(--bf-font-mono);
  font-size: 0.75rem;
  color: var(--bf-form-ink);
}

/* Drop-zone: an empty attachment slot on the form */
.bf-dropzone {
  position: relative;
  border: 1px dashed var(--bf-form-rule);
  border-radius: 0;
  padding: var(--bf-space-lg);
  text-align: center;
  background: var(--bf-form-field);
  color: var(--bf-form-label);
  font-size: 0.875rem;
  transition: background var(--bf-duration-fast) var(--bf-ease), border-color var(--bf-duration-fast) var(--bf-ease);
}
.bf-dropzone[data-dragover="true"] {
  border-style: solid;
  border-color: var(--bf-form-ink);
  background: var(--bf-form-dark);
  color: var(--bf-form-ink);
}

/* ============================================================
   Toasts (HTMX OOB target #bf-toasts)
   ============================================================ */
.bf-toasts {
  position: fixed;
  top: calc(var(--bf-topbar-h) + var(--bf-space-md));
  right: var(--bf-space-xl);
  z-index: var(--bf-z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--bf-space-sm);
  pointer-events: none;
  width: min(24rem, calc(100vw - 2 * var(--bf-space-lg)));
}
@media (max-width: 1023px) {
  .bf-toasts {
    right: var(--bf-space-lg);
  }
}
.bf-toast {
  pointer-events: auto;
  background: var(--bf-form-paper);
  border: 1px solid var(--bf-form-ink);
  border-radius: var(--bf-radius-sm);
  padding: var(--bf-space-sm) var(--bf-space-sm) var(--bf-space-sm) var(--bf-space-lg);
  color: var(--bf-form-ink);
  font-size: 0.9375rem;
  display: flex;
  align-items: center;
  gap: var(--bf-space-md);
  box-shadow: none;
  animation: bfToastIn var(--bf-duration-base) var(--bf-ease);
}
.bf-toast .bf-btn--xs {
  min-width: 32px;
}
@media (max-width: 1023px) {
  .bf-toast .bf-btn--xs {
    min-width: 44px;
  }
}
.bf-toast--success { background: var(--bf-form-dark); }
.bf-toast--error   { border-color: var(--bf-form-red); }
.bf-toast--warning,
.bf-toast--info    { background: var(--bf-form-paper); }
@keyframes bfToastIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   Command palette (Ctrl+K) / preview modal
   ============================================================ */
.bf-palette-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--bf-z-palette);
  background: rgba(21, 36, 27, 0.5);
  display: grid;
  place-items: start center;
  padding: 12vh var(--bf-space-lg) 0;
  animation: bfFadeIn var(--bf-duration-base) var(--bf-ease);
}
.bf-palette {
  width: min(640px, 100%);
  background: var(--bf-form-paper);
  border: 1px solid var(--bf-form-ink);
  border-radius: var(--bf-radius-sm);
  box-shadow: none;
  overflow: hidden;
}
.bf-palette__input {
  width: 100%;
  min-height: 52px;
  padding: 0 var(--bf-space-lg);
  background: var(--bf-form-white);
  border: 0;
  border-bottom: 1px solid var(--bf-form-rule);
  color: var(--bf-form-ink);
  font-size: 1.0625rem;
  outline: none;
  font-family: inherit;
}
.bf-palette__input::placeholder { color: var(--bf-form-muted); opacity: 1; }
.bf-palette__results {
  max-height: 60vh;
  overflow-y: auto;
}
.bf-palette__item {
  display: flex;
  align-items: center;
  gap: var(--bf-space-md);
  min-height: 44px;
  padding: var(--bf-space-xs) var(--bf-space-lg);
  border-bottom: 1px solid var(--bf-form-hairline);
  border-radius: 0 !important;
  text-decoration: none;
  color: var(--bf-form-ink);
  cursor: pointer;
  transition: background var(--bf-duration-fast) var(--bf-ease);
}
.bf-palette__item:hover,
.bf-palette__item[aria-selected="true"] {
  background: var(--bf-form-field);
}
.bf-palette__item[aria-selected="true"] {
  outline: 1px solid var(--bf-form-ink);
  outline-offset: -1px;
}
.bf-palette__item-kind {
  min-width: 4.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  font-stretch: 75%;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bf-form-label);
  flex-shrink: 0;
}

/* ============================================================
   Tabs — joined ruled segments (links .bf-tab or buttons .bf-tabs__btn)
   ============================================================ */
.bf-tabs {
  display: flex;
  max-width: 100%;
  width: fit-content;
  overflow-x: auto;
  background: var(--bf-form-paper);
  border: 1px solid var(--bf-form-rule);
  border-radius: var(--bf-radius-sm);
}
.bf-tab,
.bf-tabs__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--bf-space-sm);
  min-height: var(--bf-control-h);
  padding: 0 var(--bf-space-lg);
  border: 0;
  border-left: 1px solid var(--bf-form-rule);
  background: transparent;
  color: var(--bf-form-ink);
  text-decoration: none;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--bf-duration-fast) var(--bf-ease), color var(--bf-duration-fast) var(--bf-ease);
}
.bf-tab:first-child,
.bf-tabs__btn:first-child {
  border-left: 0;
}
.bf-tab:hover,
.bf-tabs__btn:hover {
  background: var(--bf-form-field);
}
.bf-tab[aria-current="page"],
.bf-tab.active,
.bf-tabs__btn[aria-selected="true"] {
  background: var(--bf-form-band);
  color: var(--bf-form-white);
}
.bf-tab:focus-visible,
.bf-tabs__btn:focus-visible {
  outline-offset: -3px;
}
.bf-tab.active .bf-count,
.bf-tabs__btn[aria-selected="true"] .bf-count {
  background: var(--bf-form-paper);
  border-color: var(--bf-form-paper);
  color: var(--bf-form-ink);
}
.bf-tabs__btn .bf-count {
  margin-left: var(--bf-space-xs);
}
.bf-tab-panel[hidden] {
  display: none;
}

/* ============================================================
   Filter chips — ruled toggle boxes, pressed = band
   ============================================================ */
.bf-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--bf-space-xs);
  min-height: var(--bf-control-h);
  padding: 0 var(--bf-space-md);
  background: var(--bf-form-paper);
  border: 1px solid var(--bf-form-rule);
  border-radius: var(--bf-radius-sm);
  color: var(--bf-form-ink);
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--bf-duration-fast) var(--bf-ease), color var(--bf-duration-fast) var(--bf-ease);
}
.bf-chip:hover {
  background: var(--bf-form-field);
}
.bf-chip[aria-pressed="true"],
.bf-chip.active {
  background: var(--bf-form-band);
  border-color: var(--bf-form-band);
  color: var(--bf-form-white);
}

/* ============================================================
   Metric tiles → dark-field cells (computed by BiuroFlow)
   ============================================================ */
.bf-metric {
  background: var(--bf-form-dark);
  border: 1px solid var(--bf-form-rule);
  border-radius: 0;
  padding: var(--bf-space-md) var(--bf-space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--bf-space-xs);
  min-height: 44px;
}
a.bf-metric:hover {
  background: var(--bf-form-hairline);
}
.bf-metric__label {
  font-size: 0.75rem;
  font-weight: 600;
  font-stretch: 75%;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bf-form-label);
}
.bf-metric__value,
.bf-metric__value--accent,
.bf-metric__value--success,
.bf-metric__value--warning {
  font-family: var(--bf-font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--bf-form-ink);
  line-height: 1.1;
}
.bf-metric__hint {
  font-size: 0.8125rem;
  color: var(--bf-form-label);
}

/* ============================================================
   Search trigger (topbar) — looks like the form's input box
   ============================================================ */
.bf-search {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
  max-width: 28rem;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
}
.bf-search__icon {
  position: absolute;
  left: var(--bf-space-md);
  width: 16px;
  height: 16px;
  color: var(--bf-form-ink);
  pointer-events: none;
}
.bf-search__input {
  width: 100%;
  min-height: var(--bf-control-h);
  padding: 0 var(--bf-space-md) 0 var(--bf-space-2xl);
  background: var(--bf-form-white);
  border: 1px solid var(--bf-form-rule);
  border-radius: var(--bf-radius-sm);
  color: var(--bf-form-ink);
  font-size: 0.9375rem;
  font-family: inherit;
  cursor: pointer;
  transition: border-color var(--bf-duration-fast) var(--bf-ease);
}
.bf-search__input--trigger {
  display: flex;
  align-items: center;
  overflow: hidden;
  white-space: nowrap;
  color: var(--bf-form-muted);
}
.bf-search__ph-short {
  display: none;
}
@media (max-width: 639px) {
  .bf-search__ph-long {
    display: none;
  }
  .bf-search__ph-short {
    display: inline;
  }
}
.bf-search__input::placeholder {
  color: var(--bf-form-muted);
  opacity: 1;
}
.bf-search:hover .bf-search__input {
  border-color: var(--bf-form-ink);
}
.bf-search__input:focus {
  outline: 1px solid var(--bf-form-ink);
  outline-offset: 0;
  border-color: var(--bf-form-ink);
}
.bf-search__kbd {
  position: absolute;
  right: var(--bf-space-sm);
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 1px 5px;
  background: var(--bf-form-paper);
  border: 1px solid var(--bf-form-rule);
  border-radius: var(--bf-radius-sm);
  font-family: var(--bf-font-mono);
  font-size: 0.75rem;
  color: var(--bf-form-ink);
  pointer-events: none;
}
@media (max-width: 1023px) {
  .bf-search__kbd {
    display: none;
  }
  .bf-search__input {
    padding-right: var(--bf-space-md);
    font-size: 1rem;
  }
}

/* ============================================================
   Legacy / pre-existing utilities (kept for compatibility, flattened)
   ============================================================ */
.glow-text {
  text-shadow: none;
}

.section-reveal,
.section-reveal.visible {
  opacity: 1;
  transform: none;
}

#topbar.scrolled {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

@keyframes bfFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes bfSlideUp {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.animate-fade-in { animation: bfFadeIn 0.3s var(--bf-ease) forwards; }
.animate-slide-up { animation: bfSlideUp 0.3s var(--bf-ease) forwards; }
.animate-glow { animation: none; }

.bg-gradient-hero,
.bg-gradient-forest {
  background-image: none;
  background-color: var(--bf-form-desk);
}

.sidebar-active {
  background-color: var(--bf-form-band) !important;
  color: var(--bf-form-white) !important;
}

/* DaisyUI input tweak — keep daisy-classed fields in the form world */
.input-bordered,
.textarea-bordered,
.select-bordered {
  background-color: var(--bf-form-white);
  border-color: var(--bf-form-rule);
  color: var(--bf-form-ink);
}
.input-bordered:focus,
.textarea-bordered:focus,
.select-bordered:focus {
  border-color: var(--bf-form-ink);
  box-shadow: none;
  outline: 1px solid var(--bf-form-ink);
  outline-offset: 0;
}

/* Native checkbox/radio inside Django forms */
.form-control input[type="checkbox"]:not(.checkbox):not(.toggle),
ul input[type="checkbox"]:not(.checkbox),
.form-control input[type="radio"]:not(.radio),
ul input[type="radio"]:not(.radio) {
  appearance: none;
  -webkit-appearance: none;
  width: 1.125rem;
  height: 1.125rem;
  background-color: var(--bf-form-white);
  border: 1px solid var(--bf-form-rule);
  cursor: pointer;
  vertical-align: middle;
  margin: 0 0.5rem 0 0;
  flex-shrink: 0;
  transition: background-color var(--bf-duration-fast) var(--bf-ease), border-color var(--bf-duration-fast) var(--bf-ease);
}

.form-control input[type="checkbox"]:not(.checkbox):not(.toggle),
ul input[type="checkbox"]:not(.checkbox) {
  border-radius: var(--bf-radius-sm);
}

/* Radios keep their round shape: the one native-control exception to the
   2px rule, so a single choice never reads as a checkbox. */
.form-control input[type="radio"]:not(.radio),
ul input[type="radio"]:not(.radio) {
  border-radius: 50%;
}

.form-control input[type="checkbox"]:not(.checkbox):not(.toggle):hover,
ul input[type="checkbox"]:not(.checkbox):hover,
.form-control input[type="radio"]:not(.radio):hover,
ul input[type="radio"]:not(.radio):hover {
  border-color: var(--bf-form-ink);
}

.form-control input[type="checkbox"]:not(.checkbox):not(.toggle):checked,
ul input[type="checkbox"]:not(.checkbox):checked {
  background-color: var(--bf-form-band);
  border-color: var(--bf-form-band);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23FFFFFF' stroke-width='2'%3E%3Cpath stroke-linecap='square' d='M3.5 8.5l3 3 6-6.5'/%3E%3C/svg%3E");
  background-size: 0.9rem 0.9rem;
  background-position: center;
  background-repeat: no-repeat;
}

.form-control input[type="radio"]:not(.radio):checked,
ul input[type="radio"]:not(.radio):checked {
  border-color: var(--bf-form-band);
  background-color: var(--bf-form-band);
  box-shadow: inset 0 0 0 3px var(--bf-form-white);
}

.form-control input[type="checkbox"]:not(.checkbox):not(.toggle):focus-visible,
ul input[type="checkbox"]:not(.checkbox):focus-visible,
.form-control input[type="radio"]:not(.radio):focus-visible,
ul input[type="radio"]:not(.radio):focus-visible {
  outline: 2px solid var(--bf-form-ink);
  outline-offset: 2px;
}

.form-control ul,
form ul[id^="id_"] {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0 var(--bf-space-lg);
}

.form-control ul li,
form ul[id^="id_"] li {
  padding: 0;
  margin: 0;
}

.form-control ul li label,
form ul[id^="id_"] li label {
  display: inline-flex;
  align-items: center;
  gap: var(--bf-space-sm);
  min-height: var(--bf-control-h);
  cursor: pointer;
  padding: 0 var(--bf-space-sm);
  border-bottom: 1px solid var(--bf-form-hairline);
  color: var(--bf-form-ink);
  font-size: 0.9375rem;
  width: 100%;
}

.form-control ul li label:hover,
form ul[id^="id_"] li label:hover {
  background-color: var(--bf-form-field);
}

/* ============================================================
   Reduced motion (a11y)
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   Register list (.bf-list) — one ruled row per item
   ============================================================ */
.bf-list {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--bf-form-rule);
  border-radius: 0;
  background: var(--bf-form-paper);
  overflow: hidden;
}
.bf-list__row {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--bf-space-md);
  min-height: var(--bf-row-h);
  padding: var(--bf-space-xs) var(--bf-space-md);
  border-bottom: 1px solid var(--bf-form-hairline);
  text-decoration: none;
  color: inherit;
  font-size: 0.875rem;
  line-height: 1.35;
  transition: background var(--bf-duration-fast) var(--bf-ease);
}
[data-bf-mode="client"] .bf-list__row {
  font-size: 0.9375rem;
  padding: var(--bf-space-sm) var(--bf-space-lg);
}
.bf-list__row:last-child {
  border-bottom: 0;
}
.bf-list__row:hover {
  background: var(--bf-form-field);
}
.bf-list__row:focus-visible {
  outline: 2px solid var(--bf-form-ink);
  outline-offset: -2px;
}
.bf-list__leading {
  display: grid;
  place-items: center;
}
.bf-list__main {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.bf-list__title {
  display: flex;
  align-items: baseline;
  gap: var(--bf-space-sm);
  font-weight: 500;
  color: var(--bf-form-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bf-list__row[data-status="unread"] .bf-list__title {
  font-weight: 700;
}
.bf-list__meta {
  display: flex;
  align-items: center;
  gap: var(--bf-space-md);
  font-size: 0.8125rem;
  color: var(--bf-form-label);
  flex-wrap: wrap;
}
.bf-list__trailing {
  display: flex;
  align-items: center;
  gap: var(--bf-space-sm);
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.bf-list__trailing:not(.bf-btn) {
  color: var(--bf-form-label);
}
.bf-list__row[aria-selected="true"] {
  background: var(--bf-form-dark);
}

/* ============================================================
   Register table (.bf-table) — sticky caption head, 38px rows,
   mono figures
   ============================================================ */
.bf-table-wrap {
  border: 1px solid var(--bf-form-rule);
  border-radius: 0;
  background: var(--bf-form-paper);
  overflow: auto;
  max-width: 100%;
}
.bf-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
  line-height: 1.35;
}
.bf-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  height: 34px;
  background: var(--bf-form-paper);
  border-bottom: 1px solid var(--bf-form-rule);
  text-align: left;
  font-weight: 600;
  font-size: 0.75rem;
  font-stretch: 75%;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bf-form-label);
  padding: 0 var(--bf-space-md);
  white-space: nowrap;
}
.bf-table tbody td {
  height: var(--bf-row-h);
  padding: var(--bf-space-xs) var(--bf-space-md);
  border-bottom: 1px solid var(--bf-form-hairline);
  color: var(--bf-form-ink);
  vertical-align: middle;
}
.bf-table tbody td + td {
  border-left: 1px solid var(--bf-form-hairline);
}
.bf-table tbody tr:last-child td {
  border-bottom: 0;
}
.bf-table tbody tr {
  transition: background var(--bf-duration-fast) var(--bf-ease);
}
.bf-table tbody tr:hover {
  background: var(--bf-form-field);
}
.bf-table tbody tr.bf-table__row--clickable {
  cursor: pointer;
}
.bf-table .bf-num,
.bf-table th.bf-num,
.bf-table td.bf-num {
  font-family: var(--bf-font-mono);
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}
.bf-table .bf-muted {
  color: var(--bf-form-label);
}
.bf-table a:not(.bf-btn):not(.bf-badge) {
  color: var(--bf-form-ink);
  font-weight: 600;
  text-decoration: none;
}
.bf-table a:not(.bf-btn):not(.bf-badge):hover {
  text-decoration: underline;
}

/* ============================================================
   KPI strip → dark-field summary row (computed counts)
   ============================================================ */
.bf-kpi-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  background: var(--bf-form-rule);
  border: 1px solid var(--bf-form-rule);
  border-radius: 0;
  overflow: hidden;
  margin-bottom: var(--bf-space-lg);
}
.bf-kpi {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 44px;
  padding: var(--bf-space-sm) var(--bf-space-md);
  background: var(--bf-form-dark);
  min-width: 0;
  color: inherit;
  text-decoration: none;
}
a.bf-kpi:hover {
  background: var(--bf-form-hairline);
}
.bf-kpi__label {
  font-size: 0.75rem;
  font-weight: 600;
  font-stretch: 75%;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bf-form-label);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bf-kpi__value {
  font-family: var(--bf-font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 1.375rem;
  font-weight: 500;
  color: var(--bf-form-ink);
  line-height: 1.15;
}
.bf-kpi__delta {
  font-size: 0.8125rem;
  color: var(--bf-form-label);
  display: flex;
  align-items: center;
  gap: var(--bf-space-xs);
}
.bf-kpi__delta--up,
.bf-kpi__delta--down { color: var(--bf-form-ink); }
.bf-kpi--accent .bf-kpi__value,
.bf-kpi--warning .bf-kpi__value,
.bf-kpi--error .bf-kpi__value { color: var(--bf-form-ink); }

/* ============================================================
   Master-detail layout (thread_detail, company_detail)
   ============================================================ */
.bf-master-detail {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--bf-space-lg);
  min-height: 0;
}
@media (min-width: 1280px) {
  .bf-master-detail {
    grid-template-columns: 320px minmax(0, 1fr);
    align-items: start;
  }
}
.bf-master-detail__list {
  min-width: 0;
  min-height: 0;
}
@media (min-width: 1280px) {
  .bf-master-detail__list {
    position: sticky;
    top: calc(var(--bf-space-md) + var(--bf-topbar-h));
    max-height: calc(100vh - 80px);
    overflow-y: auto;
  }
}
.bf-master-detail__detail {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: var(--bf-space-lg);
}
.bf-master-detail--detail-only .bf-master-detail__list {
  display: none;
}
@media (min-width: 1280px) {
  .bf-master-detail--detail-only .bf-master-detail__list {
    display: block;
  }
}

/* ============================================================
   Toolbar (filters under page header) — one ruled strip
   ============================================================ */
.bf-toolbar {
  --bf-toolbar-control-h: var(--bf-control-h);
  position: sticky;
  top: var(--bf-topbar-h);
  z-index: 10;
  display: flex;
  align-items: center;
  gap: var(--bf-space-sm);
  padding: var(--bf-space-sm) var(--bf-space-md);
  margin-bottom: var(--bf-space-md);
  background: var(--bf-form-paper);
  border: 1px solid var(--bf-form-rule);
  border-radius: 0;
  box-shadow: none;
  flex-wrap: wrap;
}
@media (max-width: 1023px) {
  .bf-toolbar {
    position: static;
  }
}

.bf-toolbar .bf-search__input,
.bf-toolbar .bf-chip,
.bf-toolbar .bf-select,
.bf-toolbar .bf-input {
  height: var(--bf-toolbar-control-h);
  min-height: var(--bf-toolbar-control-h);
  padding-top: 0;
  padding-bottom: 0;
  line-height: 1;
}
.bf-toolbar .bf-search__input {
  padding-right: var(--bf-space-md);
}
.bf-toolbar .bf-select {
  padding-left: var(--bf-space-md);
}
.bf-toolbar .bf-search__icon {
  top: 50%;
  transform: translateY(-50%);
}

/* ============================================================
   Missing-documents checklist — each item is a ruled row; an item the
   client has provided turns into a filled dark row.
   ============================================================ */
.bf-checklist {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--bf-form-rule);
  background: var(--bf-form-paper);
}
.bf-checklist__row {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) 170px minmax(160px, 1fr) auto;
  gap: var(--bf-space-sm);
  align-items: center;
  margin: 0;
  padding: var(--bf-space-sm) var(--bf-space-md);
  border-bottom: 1px solid var(--bf-form-hairline);
  transition: background var(--bf-duration-slow) var(--bf-ease);
}
.bf-checklist__row:last-child {
  border-bottom: 0;
}
.bf-checklist__row[data-status="provided"] {
  background: var(--bf-form-dark);
}
.bf-checklist__row[data-status="not_applicable"] .bf-checklist__title {
  text-decoration: line-through;
  text-decoration-color: var(--bf-form-rule);
}
.bf-checklist__text {
  min-width: 0;
}
.bf-checklist__title {
  font-weight: 600;
  color: var(--bf-form-ink);
  font-size: 0.9375rem;
  overflow-wrap: anywhere;
}
.bf-checklist__desc {
  color: var(--bf-form-label);
  font-size: 0.8125rem;
  overflow-wrap: anywhere;
}
@media (max-width: 767px) {
  .bf-checklist__row {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ============================================================
   Touch-size and reflow guards for markup that still carries inline
   layout (removed when those page templates are restructured)
   ============================================================ */
.bf-toolbar [role="group"] {
  flex-wrap: wrap;
}
@media (max-width: 1023px) {
  label:has(> input[type="radio"]),
  label:has(> input[type="checkbox"]) {
    min-height: 44px;
    align-items: center !important;
  }
}
@media (max-width: 767px) {
  /* task_detail.html: description + history two-column grid */
  .bf-content [style*="minmax(260px,1fr)"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* ============================================================
   Print styles
   ============================================================ */
@media print {
  body {
    background: white !important;
    color: #111 !important;
  }
  .bf-sidebar,
  .bf-topbar,
  .bf-bottom-nav,
  .bf-composer,
  .bf-toasts {
    display: none !important;
  }
}

/* ============================================================
   CLIENT SCREENS — the client's short forms (task center, task sheet,
   KSeF describe, e-mail action link, login). Owned by the client
   screens round; office screens do not use these classes.
   Phone first: one column under 768px, every target >= 44px.
   Field key: light field = what the client enters, dark field = what
   the office already provided. One red action per page.
   ============================================================ */

/* --- Sheet ------------------------------------------------------ */
.bf-client-sheet {
  max-width: 52rem;
  margin: 0 auto;
  background: var(--bf-form-paper);
  border: 1px solid var(--bf-form-rule);
  color: var(--bf-form-ink);
}
.bf-client-sheet--narrow {
  max-width: 30rem;
}
@media (max-width: 639px) {
  .bf-client-sheet {
    margin-inline: calc(-1 * var(--bf-density-pad));
    border-inline: 0;
  }
}

/* Sheet header: a dark strip with what the office knows (company,
   office), then the title the client reads first. */
.bf-client-head {
  border-bottom: 1px solid var(--bf-form-rule);
}
.bf-client-head__strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--bf-space-xs) var(--bf-space-lg);
  padding: var(--bf-space-sm) var(--bf-space-lg);
  background: var(--bf-form-dark);
  border-bottom: 1px solid var(--bf-form-rule);
}
.bf-client-head__company {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--bf-space-sm);
  font-weight: 600;
  min-width: 0;
  overflow-wrap: anywhere;
}
.bf-client-head__key {
  margin: 0;
}
.bf-client-head__body {
  padding: var(--bf-space-lg);
}
@media (min-width: 640px) {
  .bf-client-head__strip,
  .bf-client-head__body {
    padding-inline: var(--bf-space-xl);
  }
  .bf-client-head__body {
    padding-block: var(--bf-space-xl);
  }
}
.bf-client-title {
  margin: 0;
  font-size: clamp(1.625rem, 4.5vw, 2.25rem);
  font-weight: 800;
  font-stretch: 112%;
  letter-spacing: -0.02em;
  line-height: 1.1;
  text-wrap: balance;
  overflow-wrap: anywhere;
}
.bf-client-lead {
  margin: var(--bf-space-sm) 0 0;
  max-width: 60ch;
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--bf-form-ink);
}
.bf-client-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bf-space-xs) var(--bf-space-md);
  margin: var(--bf-space-md) 0 0;
  color: var(--bf-form-label);
  font-size: 0.875rem;
}
.bf-client-num {
  font-family: var(--bf-font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--bf-form-ink);
}

/* Brand lockup inside a sheet strip (login, e-mail action): inline, never a tile. */
.bf-client-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--bf-space-sm);
  min-height: 44px;
  color: var(--bf-form-ink);
  text-decoration: none;
  font-weight: 800;
  font-stretch: 112%;
  letter-spacing: -0.02em;
  font-size: 1.125rem;
}
.bf-client-brand img {
  width: 20px;
  height: 20px;
}

/* --- Parts ------------------------------------------------------ */
.bf-client-part {
  border-top: 1px solid var(--bf-form-rule);
}
.bf-client-head + .bf-client-part {
  border-top: 0;
}
.bf-client-part > .bf-part-band,
.bf-client-part > summary > .bf-part-band {
  padding-inline: var(--bf-space-lg);
}
@media (min-width: 640px) {
  .bf-client-part > .bf-part-band,
  .bf-client-part > summary > .bf-part-band {
    padding-inline: var(--bf-space-xl);
  }
}
.bf-part-band__count {
  margin-left: auto;
  font-family: var(--bf-font-mono);
  font-stretch: 100%;
  letter-spacing: 0;
  text-transform: none;
}

/* A collapsed part: the band itself is the disclosure. */
details.bf-client-part > summary {
  list-style: none;
  cursor: pointer;
}
details.bf-client-part > summary::-webkit-details-marker {
  display: none;
}
details.bf-client-part > summary > .bf-part-band {
  min-height: 44px;
  align-items: center;
}
details.bf-client-part > summary:hover > .bf-part-band {
  background: var(--bf-form-ink);
}
details.bf-client-part > summary:focus-visible {
  outline: 2px solid var(--bf-form-ink);
  outline-offset: 2px;
}
.bf-client-part__toggle {
  margin-left: auto;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  transition: transform var(--bf-duration-fast) var(--bf-ease);
}
.bf-part-band__count + .bf-client-part__toggle {
  margin-left: var(--bf-space-md);
}
details[open].bf-client-part .bf-client-part__toggle {
  transform: rotate(180deg);
}

.bf-client-body {
  padding: var(--bf-space-lg);
}
@media (min-width: 640px) {
  .bf-client-body {
    padding: var(--bf-space-lg) var(--bf-space-xl);
  }
}
.bf-client-body--field {
  background: var(--bf-form-field);
}
.bf-client-body--dark {
  background: var(--bf-form-dark);
}
.bf-client-body + .bf-client-body,
.bf-client-dl + .bf-client-body,
.bf-client-body + .bf-client-dl {
  border-top: 1px solid var(--bf-form-hairline);
}
.bf-client-prose {
  margin: 0;
  max-width: 65ch;
  line-height: 1.6;
  white-space: pre-line;
  overflow-wrap: anywhere;
}
.bf-client-note {
  margin: 0;
  color: var(--bf-form-label);
  font-size: 0.875rem;
  line-height: 1.5;
  max-width: 65ch;
}

/* --- Definition rows (caption | value) --------------------------- */
.bf-client-dl {
  margin: 0;
}
.bf-client-dl__row {
  display: grid;
  grid-template-columns: 10rem minmax(0, 1fr);
  border-bottom: 1px solid var(--bf-form-hairline);
}
.bf-client-dl__row:last-child {
  border-bottom: 0;
}
.bf-client-dl__row > dt {
  padding: var(--bf-space-md) var(--bf-space-lg);
  border-right: 1px solid var(--bf-form-hairline);
}
.bf-client-dl__row > dd {
  margin: 0;
  padding: var(--bf-space-md) var(--bf-space-lg);
  min-width: 0;
  overflow-wrap: anywhere;
}
.bf-client-dl--dark .bf-client-dl__row {
  background: var(--bf-form-dark);
}
@media (min-width: 640px) {
  .bf-client-dl__row > dt { padding-left: var(--bf-space-xl); }
  .bf-client-dl__row > dd { padding-right: var(--bf-space-xl); }
}
@media (max-width: 639px) {
  .bf-client-dl__row {
    grid-template-columns: minmax(0, 1fr);
  }
  .bf-client-dl__row > dt {
    border-right: 0;
    padding-bottom: 0;
  }
  .bf-client-dl__row > dd {
    padding-top: 2px;
  }
}

/* --- Numbered rows (poz. N | field) ------------------------------ */
.bf-client-poz {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  border-bottom: 1px solid var(--bf-form-hairline);
}
.bf-client-poz:last-child {
  border-bottom: 0;
}
.bf-client-poz__n {
  margin: 0;
  padding: var(--bf-space-md) var(--bf-space-sm) var(--bf-space-md) var(--bf-space-md);
  border-right: 1px solid var(--bf-form-hairline);
  white-space: nowrap;
}
.bf-client-poz__field {
  min-width: 0;
  padding: var(--bf-space-md) var(--bf-space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--bf-space-xs);
  overflow-wrap: anywhere;
}
.bf-client-poz--dark {
  background: var(--bf-form-dark);
}
.bf-client-poz--field {
  background: var(--bf-form-field);
}
.bf-client-poz__value {
  font-family: var(--bf-font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.9375rem;
}
fieldset.bf-client-poz__field {
  margin: 0;
  border: 0;
}
fieldset.bf-client-poz__field > legend {
  padding: 0;
  margin-bottom: var(--bf-space-xs);
  float: left;
  width: 100%;
}
fieldset.bf-client-poz__field > legend + * {
  clear: both;
}

/* --- Choices: radios / checkboxes as ruled rows ------------------ */
.bf-client-choices {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--bf-form-rule);
  background: var(--bf-form-white);
}
.bf-client-choices--inline {
  flex-direction: row;
}
.bf-client-choices--inline > .bf-client-choice {
  flex: 1 1 0;
  border-bottom: 0;
  border-right: 1px solid var(--bf-form-rule);
}
.bf-client-choices--inline > .bf-client-choice:last-child {
  border-right: 0;
}
.bf-client-choice {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: center;
  gap: var(--bf-space-md);
  min-height: 48px;
  margin: 0;
  padding: var(--bf-space-sm) var(--bf-space-lg);
  border-bottom: 1px solid var(--bf-form-hairline);
  color: var(--bf-form-ink);
  font-weight: 500;
  line-height: 1.35;
  cursor: pointer;
  transition: background var(--bf-duration-fast) var(--bf-ease);
}
.bf-client-choice:last-child {
  border-bottom: 0;
}
.bf-client-choice:hover {
  background: var(--bf-form-field);
}
.bf-client-choice input[type="radio"],
.bf-client-choice input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  margin: 0;
  background: var(--bf-form-white);
  border: 1px solid var(--bf-form-rule);
  cursor: pointer;
}
/* Radios keep their round shape: the one native-control exception. */
.bf-client-choice input[type="radio"] {
  border-radius: 50%;
}
.bf-client-choice input[type="checkbox"] {
  border-radius: var(--bf-radius-sm);
}
.bf-client-choice input[type="radio"]::after {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--bf-form-band);
  transform: scale(0);
  transition: transform var(--bf-duration-fast) var(--bf-ease);
}
.bf-client-choice input[type="checkbox"]::after {
  content: "";
  width: 11px;
  height: 6px;
  margin-top: -3px;
  border-left: 2px solid var(--bf-form-white);
  border-bottom: 2px solid var(--bf-form-white);
  transform: rotate(-45deg) scale(0);
}
.bf-client-choice input:checked::after {
  transform: scale(1);
}
.bf-client-choice input[type="checkbox"]:checked {
  background: var(--bf-form-band);
  border-color: var(--bf-form-band);
}
.bf-client-choice input[type="checkbox"]:checked::after {
  transform: rotate(-45deg) scale(1);
}
.bf-client-choice input:focus-visible {
  outline: 2px solid var(--bf-form-ink);
  outline-offset: 2px;
}
.bf-client-choice:has(input[type="radio"]:checked) {
  background: var(--bf-form-band);
  color: var(--bf-form-white);
}
.bf-client-choice:has(input[type="radio"]:checked) input[type="radio"] {
  border-color: var(--bf-form-white);
}
.bf-client-choice:has(input:focus-visible) {
  outline: 2px solid var(--bf-form-ink);
  outline-offset: -2px;
}

/* KSeF describe: no cost category for "To nie nasza faktura".
   Pure CSS (:has), so it also works without JavaScript; browsers
   without :has simply keep showing the field. */
.bf-client-form:has(input[name="decision"][value="reject"]:checked) [data-bf-unless-reject] {
  display: none;
}

/* --- Actions row (the one red action lives here) ------------------ */
.bf-client-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--bf-space-md);
  padding: var(--bf-space-lg);
  border-top: 1px solid var(--bf-form-rule);
}
@media (min-width: 640px) {
  .bf-client-actions {
    padding-inline: var(--bf-space-xl);
  }
}
.bf-client-actions__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bf-space-sm);
  margin-left: auto;
}
@media (max-width: 639px) {
  .bf-client-actions__buttons,
  .bf-client-actions__buttons > .bf-btn {
    width: 100%;
  }
  .bf-client-actions__buttons {
    flex-direction: column-reverse;
  }
}

/* Text link styled as a 44px target (secondary navigation in a sheet). */
.bf-client-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--bf-form-ink);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--bf-form-rule);
  text-underline-offset: 4px;
}
.bf-client-link:hover {
  text-decoration-color: var(--bf-form-ink);
}

/* Breadcrumbs above a client sheet keep 44px targets on every width. */
[data-bf-mode="client"] .bf-breadcrumb a {
  min-height: 44px;
}
.bf-client-crumbs {
  max-width: 52rem;
  margin: 0 auto var(--bf-space-sm);
}

/* --- Task center rows -------------------------------------------- */
.bf-client-tasks {
  list-style: none;
  margin: 0;
  padding: 0;
}
.bf-client-task {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--bf-space-sm) var(--bf-space-lg);
  padding: var(--bf-space-md) var(--bf-space-lg);
  border-bottom: 1px solid var(--bf-form-hairline);
}
.bf-client-task:last-child {
  border-bottom: 0;
}
@media (min-width: 640px) {
  .bf-client-task {
    padding-inline: var(--bf-space-xl);
  }
}
.bf-client-task__main {
  min-width: 0;
}
.bf-client-task__title {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.bf-client-task__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px var(--bf-space-md);
  margin-top: var(--bf-space-xs);
  color: var(--bf-form-label);
  font-size: 0.875rem;
}
.bf-client-task--closed .bf-client-task__title {
  font-weight: 500;
}
/* The top task: full width, written large, with the page's red action. */
.bf-client-task--lead {
  grid-template-columns: minmax(0, 1fr);
  gap: var(--bf-space-md);
  padding-block: var(--bf-space-xl);
  border-bottom: 1px solid var(--bf-form-rule);
}
.bf-client-task--lead .bf-client-task__title {
  font-size: clamp(1.25rem, 3.5vw, 1.5rem);
  font-weight: 800;
  font-stretch: 112%;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.bf-client-task__excerpt {
  margin: var(--bf-space-sm) 0 0;
  max-width: 60ch;
  line-height: 1.55;
}
@media (min-width: 768px) {
  .bf-client-task--lead {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
  }
}
@media (max-width: 639px) {
  .bf-client-task {
    grid-template-columns: minmax(0, 1fr);
  }
  .bf-client-task > .bf-btn {
    width: 100%;
  }
}
.bf-client-empty {
  margin: 0;
  padding: var(--bf-space-lg);
  color: var(--bf-form-label);
}
@media (min-width: 640px) {
  .bf-client-empty {
    padding-inline: var(--bf-space-xl);
  }
}

/* Toolbar inside a sheet (search + period) */
.bf-client-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: var(--bf-space-sm);
  padding: var(--bf-space-md) var(--bf-space-lg);
  background: var(--bf-form-field);
  border-top: 1px solid var(--bf-form-hairline);
}
@media (min-width: 640px) {
  .bf-client-filter {
    padding-inline: var(--bf-space-xl);
  }
}
.bf-client-filter__field {
  display: flex;
  flex-direction: column;
  gap: var(--bf-space-xs);
  flex: 1 1 14rem;
  min-width: 0;
}
.bf-client-filter__field--period {
  flex: 0 1 12rem;
}

/* --- Missing-documents checklist (client) ------------------------- */
.bf-client-tally {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--bf-space-xs) var(--bf-space-md);
  padding: var(--bf-space-md) var(--bf-space-lg);
  background: var(--bf-form-dark);
  border-bottom: 1px solid var(--bf-form-rule);
}
@media (min-width: 640px) {
  .bf-client-tally {
    padding-inline: var(--bf-space-xl);
  }
}
.bf-client-tally__figure {
  font-family: var(--bf-font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 1.25rem;
  font-weight: 500;
}
.bf-checklist--client {
  border: 0;
}
.bf-checklist--client .bf-checklist__row {
  grid-template-columns: 24px minmax(0, 1fr) minmax(0, 19rem);
  align-items: start;
  gap: var(--bf-space-sm) var(--bf-space-lg);
  padding: var(--bf-space-lg);
}
@media (min-width: 640px) {
  .bf-checklist--client .bf-checklist__row {
    padding-inline: var(--bf-space-xl);
  }
}
.bf-checklist--client .bf-checklist__row {
  background: var(--bf-form-field);
}
.bf-checklist--client .bf-checklist__row[data-status="provided"],
.bf-checklist--client .bf-checklist__row[data-status="not_applicable"] {
  background: var(--bf-form-dark);
}
.bf-checklist--client .bf-checklist__title {
  font-size: 1rem;
  line-height: 1.4;
}
.bf-checklist--client .bf-checklist__desc {
  margin-top: 2px;
  font-size: 0.875rem;
  line-height: 1.5;
}
/* Ruled position number, not a control: the number of the item in the list. */
.bf-checklist__no {
  display: block;
  width: 24px;
  padding-bottom: 2px;
  border-bottom: 1px solid var(--bf-form-rule);
  color: var(--bf-form-ink);
  font-size: 0.9375rem;
  line-height: 1.4;
  text-align: center;
  pointer-events: none;
}
.bf-checklist__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bf-space-xs);
  margin-top: var(--bf-space-sm);
}
.bf-checklist__files {
  list-style: none;
  margin: var(--bf-space-sm) 0 0;
  padding: 0;
}
.bf-checklist__file {
  display: inline-flex;
  align-items: center;
  gap: var(--bf-space-sm);
  min-height: 44px;
  max-width: 100%;
  color: var(--bf-form-ink);
  font-family: var(--bf-font-mono);
  font-size: 0.875rem;
  text-decoration: underline;
  text-decoration-color: var(--bf-form-rule);
  text-underline-offset: 4px;
  overflow-wrap: anywhere;
}
.bf-checklist__file:hover {
  text-decoration-color: var(--bf-form-ink);
}
.bf-checklist__file svg {
  flex-shrink: 0;
}
.bf-checklist__comment {
  margin: var(--bf-space-xs) 0 0;
  font-size: 0.875rem;
  color: var(--bf-form-ink);
}
.bf-checklist__control {
  display: flex;
  flex-direction: column;
  gap: var(--bf-space-sm);
  min-width: 0;
}
.bf-checklist__upload {
  display: flex;
  flex-direction: column;
  gap: var(--bf-space-sm);
  margin: 0;
}
.bf-checklist__upload .bf-btn {
  width: 100%;
}
@media (max-width: 767px) {
  .bf-checklist--client .bf-checklist__row {
    grid-template-columns: 24px minmax(0, 1fr);
  }
  .bf-checklist--client .bf-checklist__control {
    grid-column: 1 / -1;
  }
}

/* Native file input, in-world: a white box with a ruled paper button. */
.bf-client-sheet .bf-file {
  min-height: 44px;
  font-size: 0.9375rem;
  color: var(--bf-form-label);
  cursor: pointer;
}
.bf-client-sheet .bf-file::file-selector-button {
  min-height: 42px;
}

/* Small disclosures inside a row ("Nie dotyczy?", "Dodaj kolejny plik") */
.bf-client-disclosure > summary {
  display: inline-flex;
  align-items: center;
  gap: var(--bf-space-xs);
  min-height: 44px;
  list-style: none;
  cursor: pointer;
  color: var(--bf-form-ink);
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--bf-form-rule);
  text-underline-offset: 4px;
}
.bf-client-disclosure > summary::-webkit-details-marker {
  display: none;
}
.bf-client-disclosure > summary:hover {
  text-decoration-color: var(--bf-form-ink);
}
.bf-client-disclosure[open] > summary {
  margin-bottom: var(--bf-space-xs);
}
.bf-client-disclosure__body {
  display: flex;
  flex-direction: column;
  gap: var(--bf-space-sm);
  margin: 0;
}

/* --- Correspondence: letters, not form fields --------------------- */
.bf-client-letters {
  list-style: none;
  margin: 0;
  padding: 0;
}
.bf-client-letter {
  display: grid;
  grid-template-columns: 8rem minmax(0, 1fr);
  border-bottom: 1px solid var(--bf-form-hairline);
}
.bf-client-letter__from {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--bf-space-md) var(--bf-space-lg);
  border-right: 1px solid var(--bf-form-hairline);
}
.bf-client-letter--office .bf-client-letter__from {
  background: var(--bf-form-dark);
}
.bf-client-letter__author {
  font-weight: 700;
  font-size: 0.9375rem;
}
.bf-client-letter__time {
  font-family: var(--bf-font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.8125rem;
  color: var(--bf-form-label);
}
.bf-client-letter__body {
  min-width: 0;
  padding: var(--bf-space-md) var(--bf-space-lg);
}
.bf-client-letter__text {
  margin: 0;
  max-width: 65ch;
  line-height: 1.6;
  white-space: pre-line;
  overflow-wrap: anywhere;
}
.bf-client-letter__files {
  display: flex;
  flex-direction: column;
  gap: var(--bf-space-xs);
  margin-top: var(--bf-space-sm);
}
@media (min-width: 640px) {
  .bf-client-letter__from { padding-left: var(--bf-space-xl); }
  .bf-client-letter__body { padding-right: var(--bf-space-xl); }
}
@media (max-width: 639px) {
  .bf-client-letter {
    grid-template-columns: minmax(0, 1fr);
  }
  .bf-client-letter__from {
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    padding-block: var(--bf-space-sm);
    border-right: 0;
    border-bottom: 1px solid var(--bf-form-hairline);
  }
}
/* Reply composer: a light field the client writes into. */
.bf-client-composer {
  display: flex;
  flex-direction: column;
  gap: var(--bf-space-sm);
  margin: 0;
  padding: var(--bf-space-lg);
  background: var(--bf-form-field);
}
@media (min-width: 640px) {
  .bf-client-composer {
    padding-inline: var(--bf-space-xl);
  }
}
.bf-client-composer .bf-textarea {
  min-height: 6rem;
}
.bf-client-composer__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--bf-space-sm);
}
@media (max-width: 639px) {
  .bf-client-composer__foot > .bf-btn {
    width: 100%;
  }
}

/* History (collapsed part) */
.bf-client-history {
  list-style: none;
  margin: 0;
  padding: 0;
}
.bf-client-history li {
  display: grid;
  grid-template-columns: 9.5rem minmax(0, 1fr);
  gap: var(--bf-space-md);
  padding: var(--bf-space-sm) var(--bf-space-lg);
  border-bottom: 1px solid var(--bf-form-hairline);
  font-size: 0.9375rem;
}
.bf-client-history li:last-child {
  border-bottom: 0;
}
@media (min-width: 640px) {
  .bf-client-history li {
    padding-inline: var(--bf-space-xl);
  }
}
@media (max-width: 639px) {
  .bf-client-history li {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
}

/* --- Ledger rows (KSeF list) ------------------------------------- */
.bf-client-ledger {
  list-style: none;
  margin: 0;
  padding: 0;
}
.bf-client-ledger__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 6.5rem 9rem 9.5rem;
  align-items: center;
  gap: var(--bf-space-xs) var(--bf-space-lg);
  min-height: 56px;
  padding: var(--bf-space-sm) var(--bf-space-xl);
  border-bottom: 1px solid var(--bf-form-hairline);
  color: inherit;
  text-decoration: none;
  transition: background var(--bf-duration-fast) var(--bf-ease);
}
.bf-client-ledger li:last-child .bf-client-ledger__row {
  border-bottom: 0;
}
.bf-client-ledger__row:hover {
  background: var(--bf-form-field);
}
.bf-client-ledger__row:focus-visible {
  outline: 2px solid var(--bf-form-ink);
  outline-offset: -2px;
}
.bf-client-ledger__main {
  min-width: 0;
}
.bf-client-ledger__number {
  font-family: var(--bf-font-mono);
  font-weight: 500;
  overflow-wrap: anywhere;
}
.bf-client-ledger__sub {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--bf-space-md);
  margin-top: 2px;
  color: var(--bf-form-label);
  font-size: 0.875rem;
  overflow-wrap: anywhere;
}
.bf-client-ledger__date,
.bf-client-ledger__amount {
  font-family: var(--bf-font-mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.bf-client-ledger__amount {
  text-align: right;
  font-weight: 500;
}
.bf-client-ledger__status {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  text-align: right;
}
.bf-client-ledger__status-text {
  font-size: 0.8125rem;
  color: var(--bf-form-label);
}
.bf-client-ledger__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 6.5rem 9rem 9.5rem;
  gap: var(--bf-space-lg);
  padding: var(--bf-space-sm) var(--bf-space-xl);
  border-bottom: 1px solid var(--bf-form-rule);
}
.bf-client-ledger__head > :nth-child(3),
.bf-client-ledger__head > :nth-child(4) {
  text-align: right;
}
@media (max-width: 767px) {
  .bf-client-ledger__head {
    display: none;
  }
  .bf-client-ledger__row {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "main amount"
      "date status";
    padding: var(--bf-space-md) var(--bf-space-lg);
  }
  .bf-client-ledger__main { grid-area: main; }
  .bf-client-ledger__amount { grid-area: amount; align-self: start; }
  .bf-client-ledger__date { grid-area: date; color: var(--bf-form-label); font-size: 0.875rem; }
  .bf-client-ledger__status { grid-area: status; flex-direction: row; align-items: center; gap: var(--bf-space-sm); }
}

/* Joined filter toggle (KSeF list): one ruled box split by 1px rules,
   pressed = band. */
.bf-client-toggle {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 1px;
  border: 1px solid var(--bf-form-rule);
  border-radius: var(--bf-radius-sm);
  background: var(--bf-form-rule);
  overflow: hidden;
}
.bf-client-toggle > button {
  min-height: 44px;
  padding: 0 var(--bf-space-lg);
  border: 0;
  background: var(--bf-form-paper);
  color: var(--bf-form-ink);
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}
.bf-client-toggle > button:hover {
  background: var(--bf-form-field);
}
.bf-client-toggle > button[aria-pressed="true"] {
  background: var(--bf-form-band);
  color: var(--bf-form-white);
}
.bf-client-toggle > button:focus-visible {
  outline: 2px solid var(--bf-form-ink);
  outline-offset: -4px;
}
@media (max-width: 639px) {
  .bf-client-toggle {
    grid-auto-flow: row;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Alert line inside a sheet (login error, form error summary) */
.bf-client-alert {
  margin: 0;
  padding: var(--bf-space-md) var(--bf-space-lg);
  border: 1px solid var(--bf-form-red);
  background: var(--bf-form-white);
  color: var(--bf-form-red);
  font-weight: 600;
  font-size: 0.9375rem;
}

/* Other files of a task, under the checklist */
.bf-client-files-head {
  margin: 0;
  padding: var(--bf-space-md) var(--bf-space-lg) var(--bf-space-xs);
  border-top: 1px solid var(--bf-form-hairline);
}
.bf-client-file {
  padding: 0 var(--bf-space-lg) var(--bf-space-sm);
}
.bf-client-file:last-child {
  padding-bottom: var(--bf-space-lg);
}
@media (min-width: 640px) {
  .bf-client-files-head,
  .bf-client-file {
    padding-inline: var(--bf-space-xl);
  }
}

/* Stand-alone client pages (login, e-mail action link): the sheet on the desk. */
.bf-client-page {
  min-height: 100vh;
  padding: var(--bf-space-2xl) var(--bf-density-pad);
  background: var(--bf-form-desk);
}
@media (max-width: 639px) {
  .bf-client-page {
    padding-top: 0;
  }
}
.bf-client-stack {
  display: flex;
  flex-direction: column;
  gap: var(--bf-space-lg);
}
.bf-client-sheet__foot {
  margin: 0;
  border-top: 1px solid var(--bf-form-hairline);
  color: var(--bf-form-label);
  font-size: 0.875rem;
}
.bf-client-done {
  display: flex;
  flex-direction: column;
  gap: var(--bf-space-sm);
}
.bf-client-done__title {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 700;
}
.bf-client-done__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bf-space-sm);
  margin-top: var(--bf-space-xs);
}
.bf-client-filter--foot {
  border-top: 1px solid var(--bf-form-rule);
}
.bf-client-filter > .bf-client-toggle {
  flex: 1 1 100%;
}
@media (min-width: 640px) {
  .bf-client-filter > .bf-client-toggle {
    flex: 0 1 auto;
  }
}

/* Client mode: the shell's sidebar links keep 44px targets too. */
[data-bf-mode="client"] .bf-nav-link {
  min-height: 44px;
}


/* ============================================================
   Office screens — the register sheet.
   Dashboard (both modes), requests, companies, company detail,
   threads, thread detail, documents and search. One ruled paper
   sheet per screen: sheet head (h1 + mono date), a dark-field
   summary row, lettered parts and register tables with 38px rows.
   Status is a ruled text tag; row actions are neutral paper buttons;
   the page keeps its one red action in the sheet head.
   ============================================================ */

.bf-mono {
  font-family: var(--bf-font-mono);
  font-variant-numeric: tabular-nums;
}
.bf-text-label {
  color: var(--bf-form-label);
}

/* Sheet ------------------------------------------------------ */
.bf-sheet {
  min-width: 0;
  margin-bottom: var(--bf-space-lg);
  background: var(--bf-form-paper);
  border: 1px solid var(--bf-form-rule);
}
.bf-sheet__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--bf-space-md) var(--bf-space-lg);
  padding: var(--bf-space-lg) var(--bf-space-xl);
  border-bottom: 1px solid var(--bf-form-rule);
}
.bf-sheet__head > div:first-child {
  min-width: 0;
}
.bf-sheet__title {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 800;
  font-stretch: 112%;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--bf-form-ink);
  text-wrap: balance;
  overflow-wrap: anywhere;
}
.bf-sheet__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--bf-space-xs) var(--bf-space-lg);
  margin: var(--bf-space-xs) 0 0;
  color: var(--bf-form-label);
  font-size: 0.875rem;
}
.bf-sheet__meta-item {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  color: var(--bf-form-ink);
}
.bf-sheet__meta-item .bf-caption {
  flex-shrink: 0;
}
.bf-sheet__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--bf-space-sm);
}
.bf-sheet__body {
  padding: var(--bf-space-lg) var(--bf-space-xl);
}
.bf-sheet__body > * + * {
  margin-top: var(--bf-space-md);
}
.bf-sheet__note {
  margin: 0;
  padding: var(--bf-space-md) var(--bf-space-xl);
  color: var(--bf-form-label);
  font-size: 0.875rem;
  border-top: 1px solid var(--bf-form-hairline);
}
.bf-sheet__note a {
  color: var(--bf-form-ink);
  font-weight: 600;
}
.bf-sheet__empty {
  margin: 0;
  padding: var(--bf-space-lg) var(--bf-space-xl);
  color: var(--bf-form-label);
}
.bf-sheet__empty strong {
  display: block;
  color: var(--bf-form-ink);
  font-weight: 600;
}
.bf-sheet .bf-kpi-strip {
  margin: 0;
  border: 0;
  border-bottom: 1px solid var(--bf-form-rule);
}
.bf-sheet .bf-table-wrap {
  border: 0;
}
.bf-sheet .bf-part-band {
  align-items: center;
}
.bf-part-band__count {
  margin-left: auto;
  font-family: var(--bf-font-mono);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0;
}
.bf-part-band__link {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  color: var(--bf-form-white);
  font-size: 0.8125rem;
  text-decoration: underline;
  text-underline-offset: 3px;
}
@media (max-width: 1023px) {
  .bf-part-band__link {
    min-height: 44px;
  }
}
/* Two parts side by side on wide screens (7:5 split, ruled between). */
.bf-sheet__split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 1280px) {
  .bf-sheet__split {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  }
  .bf-sheet__split > * + * {
    border-left: 1px solid var(--bf-form-rule);
  }
}
.bf-sheet__split > * + * {
  border-top: 1px solid var(--bf-form-rule);
}
@media (min-width: 1280px) {
  .bf-sheet__split > * + * {
    border-top: 0;
  }
}
@media (max-width: 639px) {
  .bf-sheet__head,
  .bf-sheet__body {
    padding: var(--bf-space-md) var(--bf-space-lg);
  }
  .bf-sheet__note,
  .bf-sheet__empty {
    padding-left: var(--bf-space-lg);
    padding-right: var(--bf-space-lg);
  }
  .bf-sheet__title {
    font-size: 1.25rem;
  }
}

/* Toolbar inside a sheet: segments, search, company filter ----- */
.bf-sheet__toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--bf-space-sm) var(--bf-space-md);
  padding: var(--bf-space-sm) var(--bf-space-xl);
  border-bottom: 1px solid var(--bf-form-rule);
  background: var(--bf-form-field);
}
.bf-sheet__toolbar .bf-search {
  flex: 1 1 16rem;
  max-width: 24rem;
}
.bf-toolbar-search {
  display: flex;
  align-items: center;
  flex: 1 1 18rem;
  gap: var(--bf-space-sm);
  min-width: 0;
  max-width: 30rem;
}
.bf-toolbar-search .bf-search {
  flex: 1 1 auto;
  max-width: none;
}
.bf-toolbar-search .bf-btn {
  flex: none;
}
.bf-sheet__toolbar .bf-select {
  width: auto;
  max-width: 16rem;
  min-height: var(--bf-control-h);
}
.bf-sheet__toolbar .bf-input {
  width: 8rem;
}
.bf-sheet__toolbar .bf-search__input {
  height: var(--bf-control-h);
}
.bf-toolbar-field {
  display: inline-flex;
  align-items: center;
  gap: var(--bf-space-sm);
}
.bf-check {
  display: inline-flex;
  align-items: center;
  gap: var(--bf-space-sm);
  min-height: var(--bf-control-h);
  color: var(--bf-form-ink);
  font-size: 0.875rem;
  cursor: pointer;
}
.bf-check input {
  width: 16px;
  height: 16px;
  accent-color: var(--bf-form-band);
}
@media (max-width: 639px) {
  .bf-sheet__toolbar {
    padding: var(--bf-space-sm) var(--bf-space-lg);
  }
  .bf-toolbar-search,
  .bf-sheet__toolbar .bf-search,
  .bf-sheet__toolbar .bf-select,
  .bf-toolbar-field {
    flex: 1 1 100%;
    max-width: none;
    width: 100%;
  }
  .bf-toolbar-field .bf-select,
  .bf-toolbar-field .bf-input {
    flex: 1;
    width: auto;
  }
}
/* Joined ruled segments used as a filter (buttons inside .bf-tabs). */
.bf-tabs--segments {
  flex-wrap: nowrap;
}
.bf-tabs--segments .bf-tab {
  min-height: var(--bf-control-h);
}
@media (max-width: 639px) {
  .bf-tabs--segments {
    display: flex;
    flex-wrap: wrap;
    gap: 1px;
    width: 100%;
    background: var(--bf-form-rule);
  }
  .bf-tabs--segments .bf-tab {
    flex: 1 1 auto;
    justify-content: center;
    padding: 0 var(--bf-space-md);
    border-left: 0;
    background: var(--bf-form-paper);
  }
  .bf-tabs--segments .bf-tab.active {
    background: var(--bf-form-band);
  }
  .bf-sheet__toolbar .bf-select {
    min-width: 0;
  }
}

/* Register table ---------------------------------------------- */
.bf-register tbody td {
  padding-inline: var(--bf-space-sm);
  border-bottom: 0;
  border-top: 1px solid var(--bf-form-hairline);
}
.bf-register tbody:first-of-type tr:first-child td {
  border-top: 0;
}
.bf-register tr[hidden],
.bf-register tbody[hidden] {
  display: none !important;
}
.bf-register .bf-cell--due {
  width: 1%;
  white-space: nowrap;
}
/* Room for a full firm name, "(demo)" included, on one line; a longer name
   wraps instead of being clipped. */
.bf-register .bf-cell--company {
  width: 16rem;
  min-width: 13rem;
}
/* The kind is its own narrow column: a caption that may take two short lines. */
.bf-register .bf-cell--kind {
  width: 6.5rem;
}
.bf-register .bf-cell--kind .bf-caption {
  display: block;
  line-height: 1.2;
}
.bf-register .bf-cell--status {
  width: 1%;
  white-space: nowrap;
}
.bf-register .bf-cell--time,
.bf-register .bf-cell--size,
.bf-register .bf-cell--num {
  width: 1%;
  white-space: nowrap;
  font-family: var(--bf-font-mono);
  font-variant-numeric: tabular-nums;
}
.bf-register .bf-cell--size,
.bf-register .bf-cell--num {
  text-align: right;
}
.bf-register th.bf-cell--size,
.bf-register th.bf-cell--num,
.bf-register th.bf-cell--actions {
  text-align: right;
}
.bf-register .bf-cell--actions {
  width: 1%;
  white-space: nowrap;
  text-align: right;
}
.bf-cell__sub {
  display: block;
  color: var(--bf-form-label);
  font-size: 0.8125rem;
  line-height: 1.35;
}
.bf-cell__clip {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bf-cell__kind {
  margin-right: var(--bf-space-sm);
}
.bf-register .bf-cell__title {
  color: var(--bf-form-ink);
  font-weight: 600;
  overflow-wrap: anywhere;
}
.bf-register .bf-badge + .bf-badge {
  margin-left: var(--bf-space-xs);
}
.bf-row-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--bf-space-xs);
}
.bf-row-actions form {
  display: inline-flex;
  margin: 0;
}
/* "PO TERMINIE" sits on the date's line, not under it. */
.bf-cell__due-tag {
  margin-left: var(--bf-space-sm);
  vertical-align: 1px;
}
/* The thread subject and its newest message share one line on wide screens;
   the preview takes what is left and ends with an ellipsis. */
.bf-cell__line {
  display: flex;
  align-items: baseline;
  gap: var(--bf-space-md);
  min-width: 0;
}
.bf-cell__line > a {
  flex: 0 1 auto;
  min-width: 0;
}
.bf-cell__line > .bf-cell__preview {
  flex: 1 1 0;
  min-width: 6rem;
}
@media (min-width: 768px) {
  .bf-register--threads .bf-cell--case,
  .bf-register--requests .bf-cell--case {
    width: 100%;
    max-width: 0;
  }
  /* Fixed columns, so the title takes exactly what is left. */
  .bf-register--requests {
    table-layout: fixed;
  }
  .bf-register--requests th.bf-cell--due { width: 12rem; }
  .bf-register--requests th.bf-cell--company { width: 16rem; }
  .bf-register--requests th.bf-cell--kind { width: 6rem; }
  .bf-register--requests th.bf-cell--status { width: 7.5rem; }
  .bf-register--requests th.bf-cell--actions { width: 15rem; }
  .bf-register--requests .bf-cell--case {
    width: auto;
    max-width: none;
  }
  .bf-register--requests .bf-cell--company,
  .bf-register--requests .bf-cell--kind {
    width: auto;
    min-width: 0;
  }
  /* Titles are the key information: up to two lines, clamped after that
     (full title in the tooltip). Short titles keep the 38px row. */
  .bf-register--requests .bf-cell--case a,
  .bf-register--requests .bf-cell--case summary {
    display: flex;
    min-width: 0;
  }
  .bf-register--requests .bf-cell--case .bf-cell__title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    min-width: 0;
    overflow: hidden;
    white-space: normal;
  }
  .bf-register--requests .bf-cell--case summary > span {
    display: flex;
    min-width: 0;
  }
  .bf-register--threads .bf-cell__line > .bf-cell__preview {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .bf-register--threads .bf-cell--company {
    min-width: 16.5rem;
  }
  .bf-register .bf-cell--who {
    width: 1%;
    white-space: nowrap;
  }
}
.bf-register tr.bf-row--unread .bf-cell__title {
  font-weight: 700;
}

/* Expandable request detail: a full-width second row, shown while the
   summary toggle in the case cell is open (no JS needed). */
.bf-register__toggle > summary {
  display: inline-flex;
  align-items: baseline;
  gap: var(--bf-space-xs);
  list-style: none;
  cursor: pointer;
}
.bf-register__toggle > summary::-webkit-details-marker {
  display: none;
}
.bf-register__toggle > summary::before {
  content: "";
  flex-shrink: 0;
  width: 0.45em;
  height: 0.45em;
  margin-right: 4px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(-45deg);
  transition: transform var(--bf-duration-fast) var(--bf-ease);
}
.bf-register__toggle[open] > summary::before {
  transform: translateY(-3px) rotate(45deg);
}
.bf-register__toggle > summary:hover .bf-cell__title {
  text-decoration: underline;
}
.bf-register__detail {
  display: none;
}
.bf-register tbody:has(.bf-register__toggle[open]) > .bf-register__detail {
  display: table-row;
}
.bf-register tbody:has(.bf-register__toggle[open]) > tr {
  background: var(--bf-form-field);
}
.bf-register .bf-register__detail > td {
  height: auto;
  padding: var(--bf-space-md) var(--bf-space-lg) var(--bf-space-lg);
  border-top: 1px dashed var(--bf-form-hairline);
}
.bf-register__detail-body {
  display: flex;
  flex-direction: column;
  gap: var(--bf-space-md);
  max-width: 64rem;
}
.bf-register__detail-body p {
  margin: 0;
  max-width: 68ch;
}
.bf-history {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--bf-form-hairline);
}
.bf-history li {
  display: flex;
  justify-content: space-between;
  gap: var(--bf-space-md);
  padding: 6px 0;
  border-bottom: 1px solid var(--bf-form-hairline);
  font-size: 0.8125rem;
}
.bf-history time {
  flex-shrink: 0;
  color: var(--bf-form-label);
}
.bf-subhead {
  margin: 0 0 var(--bf-space-xs);
}

/* Register on phones: each row becomes a ruled multi-line entry. */
@media (max-width: 767px) {
  .bf-register thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .bf-register,
  .bf-register tbody {
    display: block;
  }
  .bf-register tbody tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 2px var(--bf-space-md);
    padding: var(--bf-space-sm) var(--bf-space-lg);
    border-top: 1px solid var(--bf-form-hairline);
  }
  .bf-register tbody:first-of-type tr:first-child {
    border-top: 0;
  }
  .bf-register tbody td[class],
  .bf-register tbody td,
  .bf-register tbody td + td {
    display: block;
    width: auto;
    max-width: none;
    height: auto;
    padding: 0;
    border: 0;
    text-align: left;
    white-space: normal;
  }
  .bf-register .bf-cell--company .bf-cell__clip {
    max-width: none;
    white-space: normal;
  }
  .bf-register .bf-cell--due { grid-column: 1; grid-row: 1; }
  .bf-register .bf-cell--status { grid-column: 2; grid-row: 1; justify-self: end; }
  .bf-register .bf-cell--case { grid-column: 1 / -1; grid-row: 2; }
  .bf-register tbody td.bf-cell--kind { grid-column: 1 / -1; grid-row: 3; }
  .bf-register .bf-cell--company { grid-column: 1 / -1; grid-row: 4; }
  .bf-register .bf-cell--actions { grid-column: 1 / -1; grid-row: 5; justify-self: start; }
  .bf-register tbody td.bf-cell--kind:empty { display: none; }
  .bf-register .bf-cell--due .bf-cell__due-tag {
    margin: 0 0 0 var(--bf-space-sm);
  }
  .bf-cell__line {
    display: block;
  }
  .bf-register .bf-cell--case a,
  .bf-register .bf-cell--case summary,
  .bf-register .bf-cell--company a {
    display: flex;
    align-items: center;
    min-height: 44px;
  }
  .bf-register .bf-cell--case summary {
    display: flex;
    align-items: center;
  }
  .bf-register .bf-cell--case .bf-cell__sub {
    margin-top: -6px;
    padding-bottom: 4px;
  }
  .bf-register .bf-register__detail {
    padding: var(--bf-space-sm) var(--bf-space-lg) var(--bf-space-md);
  }
  .bf-register tbody tr.bf-register__detail {
    display: none;
  }
  .bf-register tbody:has(.bf-register__toggle[open]) > tr.bf-register__detail {
    display: block;
  }
  .bf-register .bf-register__detail > td {
    padding: 0;
  }

  /* Threads: company + time / subject + preview / who spoke + marker */
  .bf-register--threads .bf-cell--company { grid-column: 1; grid-row: 1; }
  .bf-register--threads .bf-cell--time { grid-column: 2; grid-row: 1; justify-self: end; }
  .bf-register--threads .bf-cell--who { grid-column: 1; grid-row: 3; justify-self: start; }
  .bf-register--threads .bf-cell--marker { grid-column: 2; grid-row: 3; justify-self: end; }

  /* Documents: file / company + size / kind + date */
  .bf-register--docs .bf-cell--case { grid-row: 1; }
  .bf-register--docs .bf-cell--company { grid-column: 1; grid-row: 2; }
  .bf-register--docs .bf-cell--size { grid-column: 2; grid-row: 2; justify-self: end; }
  .bf-register--docs .bf-cell--kind { grid-column: 1; grid-row: 3; }
  .bf-register--docs .bf-cell--time { grid-column: 2; grid-row: 3; justify-self: end; }
  .bf-sheet__note a,
  .bf-sheet__empty a,
  .bf-sheet__meta a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    min-width: 44px;
  }

  /* Companies: name + status / NIP / counts as labelled figures */
  .bf-register--companies tbody tr {
    display: flex;
    flex-wrap: wrap;
    gap: 2px var(--bf-space-lg);
  }
  .bf-register--companies .bf-cell--case {
    flex: 1 1 60%;
  }
  .bf-register--companies .bf-cell--status {
    margin-left: auto;
    align-self: center;
  }
  .bf-register--companies .bf-cell--num::before {
    content: attr(data-label) " ";
    font-family: var(--bf-font-sans);
    font-size: 0.75rem;
    font-weight: 600;
    font-stretch: 75%;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--bf-form-label);
  }
  .bf-register--companies .bf-cell--nip {
    flex-basis: 100%;
  }
}

/* Unread / new marker — text, not colour alone. */
.bf-tag-new {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 1px 6px;
  background: var(--bf-form-band);
  border: 1px solid var(--bf-form-band);
  border-radius: var(--bf-radius-sm);
  color: var(--bf-form-white);
  font-size: 0.75rem;
  font-weight: 600;
  font-stretch: 75%;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.bf-tag-new .bf-mono {
  letter-spacing: 0;
}

/* Page action picker: "Dodaj prośbę" → choose the company (no JS). */
.bf-picker {
  position: relative;
}
.bf-picker > summary {
  list-style: none;
}
.bf-picker > summary::-webkit-details-marker {
  display: none;
}
.bf-picker__panel {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 20;
  width: min(24rem, calc(100vw - 2 * var(--bf-space-lg)));
  max-height: min(28rem, 70vh);
  overflow-y: auto;
  background: var(--bf-form-paper);
  border: 1px solid var(--bf-form-ink);
}
.bf-picker__panel .bf-caption {
  margin: 0;
  padding: var(--bf-space-sm) var(--bf-space-lg);
  border-bottom: 1px solid var(--bf-form-rule);
}
.bf-picker__list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.bf-picker__list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bf-space-md);
  min-height: var(--bf-row-h);
  padding: var(--bf-space-xs) var(--bf-space-lg);
  border-bottom: 1px solid var(--bf-form-hairline);
  color: var(--bf-form-ink);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
}
.bf-picker__list li:last-child a {
  border-bottom: 0;
}
.bf-picker__list a:hover {
  background: var(--bf-form-field);
}
.bf-picker__list .bf-mono {
  flex-shrink: 0;
  color: var(--bf-form-label);
  font-weight: 400;
  font-size: 0.8125rem;
}
@media (max-width: 1023px) {
  .bf-picker__list a {
    min-height: 44px;
  }
}
@media (max-width: 639px) {
  .bf-picker {
    width: 100%;
  }
  .bf-picker > summary {
    width: 100%;
  }
  .bf-picker__panel {
    position: static;
    width: 100%;
    margin-top: var(--bf-space-xs);
  }
}

/* Inline undo strip (no-JS close: the page after the redirect). */
.bf-undo-strip {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--bf-space-sm) var(--bf-space-md);
  margin-bottom: var(--bf-space-md);
  padding: var(--bf-space-sm) var(--bf-space-sm) var(--bf-space-sm) var(--bf-space-lg);
  background: var(--bf-form-dark);
  border: 1px solid var(--bf-form-ink);
}
.bf-undo-strip form {
  margin: 0;
}
.bf-toast__text {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}
.bf-toast__actions {
  display: flex;
  gap: var(--bf-space-xs);
  margin: 0;
  flex-shrink: 0;
}
.bf-toast--confirm {
  flex-wrap: wrap;
}

/* Definition rows (license, company facts): caption | value. */
.bf-defs {
  margin: 0;
}
.bf-defs__row {
  display: grid;
  grid-template-columns: 11rem minmax(0, 1fr);
  gap: var(--bf-space-md);
  align-items: baseline;
  min-height: var(--bf-row-h);
  padding: var(--bf-space-xs) var(--bf-space-xl);
  border-top: 1px solid var(--bf-form-hairline);
}
.bf-defs__row:first-child {
  border-top: 0;
}
.bf-defs__row dt {
  padding-top: 2px;
}
.bf-defs__row dd {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--bf-space-xs);
  align-items: baseline;
}
@media (max-width: 639px) {
  .bf-defs__row {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
    padding: var(--bf-space-sm) var(--bf-space-lg);
  }
}
.bf-disclosure > summary {
  display: flex;
  align-items: center;
  gap: var(--bf-space-sm);
  min-height: var(--bf-row-h);
  padding: var(--bf-space-xs) var(--bf-space-xl);
  border-top: 1px solid var(--bf-form-hairline);
  color: var(--bf-form-ink);
  font-size: 0.875rem;
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}
.bf-disclosure > summary::-webkit-details-marker {
  display: none;
}
.bf-disclosure > summary::before {
  content: "+";
  width: 1em;
  font-family: var(--bf-font-mono);
  color: var(--bf-form-label);
}
.bf-disclosure[open] > summary::before {
  content: "−";
}
.bf-disclosure > summary:hover {
  background: var(--bf-form-field);
}
@media (max-width: 1023px) {
  .bf-disclosure > summary {
    min-height: 44px;
  }
}
@media (max-width: 639px) {
  .bf-disclosure > summary {
    padding: var(--bf-space-xs) var(--bf-space-lg);
  }
}
.bf-disclosure__body {
  padding: var(--bf-space-md) var(--bf-space-xl) var(--bf-space-lg);
  border-top: 1px solid var(--bf-form-hairline);
  background: var(--bf-form-field);
}
.bf-disclosure__body > * + * {
  margin-top: var(--bf-space-md);
}
@media (max-width: 639px) {
  .bf-disclosure__body {
    padding: var(--bf-space-md) var(--bf-space-lg);
  }
}
.bf-keybox {
  display: block;
  padding: var(--bf-space-md);
  background: var(--bf-form-white);
  border: 1px solid var(--bf-form-rule);
  color: var(--bf-form-ink);
  font-family: var(--bf-font-mono);
  font-size: 0.75rem;
  line-height: 1.5;
  word-break: break-all;
  user-select: all;
}
.bf-keybox-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bf-space-md);
}
.bf-form-stack {
  display: flex;
  flex-direction: column;
  gap: var(--bf-space-md);
}
.bf-form-stack__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bf-space-sm);
  padding-top: var(--bf-space-md);
  border-top: 1px solid var(--bf-form-hairline);
}
.bf-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: var(--bf-space-md);
  align-items: end;
}
.bf-form-grid > .bf-form-stack__actions {
  grid-column: 1 / -1;
}

/* Client dashboard: the top task as a full-width row ---------- */
.bf-task-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--bf-space-md) var(--bf-space-xl);
  padding: var(--bf-space-lg) var(--bf-space-xl);
  background: var(--bf-form-field);
  border-bottom: 1px solid var(--bf-form-rule);
}
.bf-task-top__title {
  margin: 2px 0 var(--bf-space-xs);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--bf-form-ink);
  overflow-wrap: anywhere;
}
.bf-task-top__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bf-space-xs) var(--bf-space-md);
  color: var(--bf-form-label);
  font-size: 0.9375rem;
}
@media (max-width: 639px) {
  .bf-task-top {
    grid-template-columns: minmax(0, 1fr);
    padding: var(--bf-space-lg);
  }
  .bf-task-top .bf-btn {
    width: 100%;
  }
}
.bf-rows {
  margin: 0;
  padding: 0;
  list-style: none;
}
.bf-rows__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--bf-space-xs) var(--bf-space-lg);
  min-height: var(--bf-row-h);
  padding: var(--bf-space-sm) var(--bf-space-xl);
  border-top: 1px solid var(--bf-form-hairline);
}
.bf-rows__row:first-child {
  border-top: 0;
}
a.bf-rows__row {
  color: inherit;
  text-decoration: none;
}
a.bf-rows__row:hover {
  background: var(--bf-form-field);
}
.bf-rows__title {
  display: block;
  color: var(--bf-form-ink);
  font-weight: 600;
  overflow-wrap: anywhere;
}
.bf-rows__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px var(--bf-space-md);
  color: var(--bf-form-label);
  font-size: 0.875rem;
}
.bf-rows__end {
  display: flex;
  align-items: center;
  gap: var(--bf-space-sm);
  color: var(--bf-form-label);
  font-size: 0.875rem;
  white-space: nowrap;
}
@media (max-width: 639px) {
  .bf-rows__row {
    padding: var(--bf-space-sm) var(--bf-space-lg);
  }
}

/* Correspondence: messages as letter entries ------------------- */
.bf-letters {
  margin: 0;
  padding: 0;
  list-style: none;
}
.bf-letter {
  padding: var(--bf-space-md) var(--bf-space-xl) var(--bf-space-lg);
  border-top: 1px solid var(--bf-form-hairline);
}
.bf-letter:first-child {
  border-top: 0;
}
/* Field key: the office's letters sit on a dark field, the client's on
   a light field. */
.bf-letter--office {
  background: var(--bf-form-dark);
}
.bf-letter--client {
  background: var(--bf-form-field);
}
.bf-letter__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--bf-space-xs) var(--bf-space-md);
  margin-bottom: var(--bf-space-sm);
  padding-bottom: var(--bf-space-xs);
  border-bottom: 1px solid var(--bf-form-hairline);
}
.bf-letter__from {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--bf-space-xs) var(--bf-space-sm);
  min-width: 0;
}
.bf-letter__author {
  color: var(--bf-form-ink);
  font-weight: 700;
}
.bf-letter__time {
  color: var(--bf-form-label);
  font-family: var(--bf-font-mono);
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
}
.bf-letter__text {
  max-width: 72ch;
  margin: 0;
  color: var(--bf-form-ink);
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.bf-letter__files {
  margin: var(--bf-space-md) 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--bf-form-hairline);
}
.bf-letter__files a {
  display: flex;
  align-items: center;
  gap: var(--bf-space-md);
  min-height: 32px;
  border-bottom: 1px solid var(--bf-form-hairline);
  color: var(--bf-form-ink);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
}
.bf-letter__files a:hover {
  text-decoration: underline;
}
.bf-letter__files .bf-mono {
  margin-left: auto;
  color: var(--bf-form-label);
  font-weight: 400;
  font-size: 0.8125rem;
}
@media (max-width: 1023px) {
  .bf-letter__files a {
    min-height: 44px;
  }
}
.bf-letter--arrived {
  animation: bfFadeIn 320ms var(--bf-ease) both;
}
@media (max-width: 639px) {
  .bf-letter {
    padding: var(--bf-space-md) var(--bf-space-lg);
  }
}

/* Reply: a light field the user fills in. */
.bf-reply {
  padding: var(--bf-space-lg) var(--bf-space-xl);
  background: var(--bf-form-field);
  border-top: 1px solid var(--bf-form-rule);
}
.bf-reply .bf-textarea {
  min-height: 6rem;
  resize: vertical;
}
.bf-reply__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--bf-space-sm) var(--bf-space-md);
  margin-top: var(--bf-space-sm);
}
.bf-reply__hint {
  color: var(--bf-form-label);
  font-size: 0.8125rem;
}
@media (max-width: 639px) {
  .bf-reply {
    padding: var(--bf-space-md) var(--bf-space-lg);
  }
  .bf-reply__row .bf-btn {
    width: 100%;
  }
  .bf-reply__hint {
    display: none;
  }
}

/* Document rows inside a sheet part (thread documents) */
.bf-docrows {
  margin: 0;
  padding: 0;
  list-style: none;
}
.bf-docrows a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px var(--bf-space-md);
  align-items: center;
  min-height: var(--bf-row-h);
  padding: var(--bf-space-xs) var(--bf-space-xl);
  border-top: 1px solid var(--bf-form-hairline);
  color: inherit;
  text-decoration: none;
}
.bf-docrows li:first-child a {
  border-top: 0;
}
.bf-docrows a:hover {
  background: var(--bf-form-field);
}
.bf-docrows .bf-cell__title {
  color: var(--bf-form-ink);
  font-weight: 600;
  overflow-wrap: anywhere;
}
.bf-docrows .bf-mono {
  color: var(--bf-form-label);
  font-size: 0.8125rem;
  white-space: nowrap;
}
@media (max-width: 1023px) {
  .bf-docrows a {
    min-height: 44px;
  }
}
@media (max-width: 639px) {
  .bf-docrows a {
    padding: var(--bf-space-xs) var(--bf-space-lg);
  }
}
.bf-upload {
  padding: var(--bf-space-lg) var(--bf-space-xl);
  background: var(--bf-form-field);
  border-top: 1px solid var(--bf-form-rule);
}
.bf-upload .bf-dropzone {
  background: var(--bf-form-white);
}
.bf-dropzone__input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}
.bf-dropzone__title {
  display: block;
  color: var(--bf-form-ink);
  font-weight: 600;
}
@media (max-width: 639px) {
  .bf-upload {
    padding: var(--bf-space-md) var(--bf-space-lg);
  }
}
@media (min-width: 1280px) {
  .bf-sheet__split--sticky > :last-child > .bf-sticky {
    position: sticky;
    top: calc(var(--bf-topbar-h) + var(--bf-space-md));
  }
}

/* Search results (full page and Ctrl+K pane) */
.bf-results__group + .bf-results__group {
  border-top: 1px solid var(--bf-form-rule);
}
.bf-results__head {
  margin: 0;
  padding: var(--bf-space-sm) var(--bf-space-lg);
  border-bottom: 1px solid var(--bf-form-hairline);
}
.bf-results__row {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--bf-space-md);
  min-height: var(--bf-row-h);
  padding: var(--bf-space-xs) var(--bf-space-lg);
  border-bottom: 1px solid var(--bf-form-hairline);
  color: inherit;
  text-decoration: none;
}
.bf-results__row:last-child {
  border-bottom: 0;
}
.bf-results__row:hover {
  background: var(--bf-form-field);
}
.bf-results__row .bf-cell__title {
  color: var(--bf-form-ink);
  font-weight: 600;
}
.bf-results__end {
  color: var(--bf-form-label);
  font-size: 0.8125rem;
  text-align: right;
  white-space: nowrap;
}
@media (max-width: 1023px) {
  .bf-results__row {
    min-height: 44px;
  }
}
@media (max-width: 639px) {
  .bf-results__row {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .bf-results__row > .bf-caption {
    grid-column: 1 / -1;
  }
}
.bf-results__empty {
  margin: 0;
  padding: var(--bf-space-lg);
  color: var(--bf-form-label);
}
.bf-results__empty strong {
  display: block;
  color: var(--bf-form-ink);
}
.bf-cell__preview {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  overflow: hidden;
  overflow-wrap: anywhere;
}
@media (max-width: 767px) {
  .bf-cell__preview {
    -webkit-line-clamp: 2;
    line-clamp: 2;
  }
}
.bf-sheet--narrow {
  max-width: 44rem;
}
.bf-sheet__body--ruled {
  border-top: 1px solid var(--bf-form-rule);
}
.bf-sheet__body p {
  margin: 0;
  max-width: 68ch;
}


/* Register: the kind is one short word in caps; never wraps. On phones the
   title clamp must not reserve two lines' height. */
.bf-register tbody td.bf-cell--kind { white-space: nowrap; }
@media (max-width: 767px) {
  .bf-register .bf-cell--case .bf-cell__title {
    display: block;
    -webkit-line-clamp: unset;
    line-clamp: none;
  }
  .bf-register .bf-cell--case,
  .bf-register tbody td.bf-cell--kind,
  .bf-register .bf-cell--company {
    min-height: 0;
    margin: 0;
  }
}

/* ============================================================
   ADMIN SCREENS — the control plane (admin.biuroflow.pl).
   Desktop only, one operator. Built from the office register
   classes above; only what the portal does not have lives here:
   the attention register, masked secrets, operation confirmations.
   ============================================================ */

.bf-register--attention .bf-cell--company {
  width: 16rem;
}
.bf-register--attention .bf-cell--kind {
  width: 8.5rem;
}
.bf-register--attention .bf-cell--case {
  width: 100%;
}

/* Definition rows: dark = reported by BiuroFlow/the runtime. */
.bf-defs--dark .bf-defs__row {
  background: var(--bf-form-dark);
}
.bf-defs__row dd.bf-mono,
.bf-defs__row dd .bf-mono {
  overflow-wrap: anywhere;
}

/* Masked secret: a dark field of dots; Pokaż / Kopiuj in its margin. */
.bf-secret {
  display: flex;
  align-items: center;
  gap: var(--bf-space-xs);
  width: 100%;
  min-width: 0;
}
.bf-secret__value {
  flex: 1 1 auto;
  min-width: 0;
  padding: 3px var(--bf-space-sm);
  border: 1px solid var(--bf-form-rule);
  border-radius: var(--bf-radius-sm);
  background: var(--bf-form-dark);
  color: var(--bf-form-ink);
  font-family: var(--bf-font-mono);
  font-size: 0.8125rem;
  overflow-wrap: anywhere;
}
.bf-secret__value[data-masked="true"] {
  letter-spacing: 0.12em;
  color: var(--bf-form-label);
}
.bf-secret--block {
  align-items: flex-start;
}
.bf-secret--block .bf-secret__value {
  white-space: pre-wrap;
}

/* Operation confirmation: the targets as ruled rows before "Wykonaj". */
.bf-confirm-targets {
  margin: 0;
  padding: 0;
  list-style: none;
}
.bf-confirm-targets > li {
  display: grid;
  grid-template-columns: minmax(0, 14rem) minmax(0, 1fr) auto;
  gap: var(--bf-space-md);
  align-items: baseline;
  min-height: var(--bf-row-h);
  padding: var(--bf-space-xs) var(--bf-space-xl);
  border-top: 1px solid var(--bf-form-hairline);
}
.bf-confirm-targets > li:first-child {
  border-top: 0;
}
.bf-confirm-targets--skipped > li {
  color: var(--bf-form-label);
}

/* --- admin: licenses --- */
/* Licenses, license form, AI Gateway and AI usage. Built from the
   register/defs/choice classes above; only spacing and widths here. */
.bf-sheet__title .bf-badge {
  margin-left: var(--bf-space-sm);
  vertical-align: 0.3em;
  letter-spacing: 0.06em;
}
.bf-register__empty {
  padding: var(--bf-space-lg) var(--bf-space-xl) !important;
  color: var(--bf-form-label);
}
.bf-register__empty strong {
  color: var(--bf-form-ink);
  font-weight: 600;
}
.bf-register--licenses td {
  white-space: nowrap;
}
.bf-register--licenses .bf-cell--company {
  width: auto;
  min-width: 9rem;
  white-space: normal;
}
.bf-register--licenses th,
.bf-register--licenses tbody td {
  padding-inline: 6px;
}
.bf-table th.bf-th-num {
  text-align: right;
}
.bf-register--licenses td.bf-cell--modules {
  white-space: normal;
  min-width: 8rem;
  line-height: 1.8;
}
.bf-register--licenses .bf-cell--modules .bf-badge {
  margin-right: var(--bf-space-xs);
}
.bf-register--licenses .bf-cell--modules .bf-badge + .bf-badge {
  margin-left: 0;
}

/* License form: fieldsets as plain parts, choices as ruled office rows. */
.bf-lic-grid {
  align-items: start;
}
.bf-lic-fieldset {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}
.bf-lic-choices {
  border: 0;
  border-bottom: 1px solid var(--bf-form-hairline);
}
.bf-lic-choices .bf-client-choice {
  min-height: var(--bf-row-h);
  padding: var(--bf-space-xs) var(--bf-space-xl);
  font-weight: 500;
}
.bf-lic-choices .bf-client-choice > span .bf-mono {
  margin-left: var(--bf-space-sm);
  font-size: 0.8125rem;
}
.bf-lic-choice--hint {
  align-items: start;
  padding-top: var(--bf-space-sm) !important;
  padding-bottom: var(--bf-space-sm) !important;
}
.bf-lic-choice--hint input {
  margin-top: 1px !important;
}
.bf-lic-choice--hint > span {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.bf-lic-choice__label {
  font-weight: 600;
}
.bf-lic-choice--hint .bf-field__hint {
  font-weight: 400;
  max-width: 68ch;
}
.bf-lic-hint {
  display: block;
  margin: 0;
  padding: var(--bf-space-sm) var(--bf-space-xl);
}
.bf-lic-map .bf-defs__row {
  padding-inline: 0;
}
.bf-lic-map .bf-defs__row dd {
  display: block;
  max-width: 68ch;
}

/* AI Gateway: model ids per role, budget inputs inline in the register. */
.bf-ai-models .bf-defs__row dd {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px var(--bf-space-lg);
}
.bf-ai-models__role {
  display: block;
  margin-top: 2px;
  font-size: 0.75rem;
  text-transform: none;
  letter-spacing: 0;
  color: var(--bf-form-label);
}
.bf-ai-models__tier {
  display: flex;
  align-items: baseline;
  gap: var(--bf-space-sm);
  min-width: 0;
}
.bf-ai-models__tier .bf-caption {
  flex: none;
  min-width: 7.5rem;
}
.bf-ai-models__tier .bf-mono {
  white-space: nowrap;
}
.bf-ai-budget {
  width: 7.5rem;
  min-height: var(--bf-control-h-sm);
  height: var(--bf-control-h-sm);
}
.bf-register--ai-settings td {
  white-space: nowrap;
}
.bf-register--ai-settings .bf-check {
  min-height: var(--bf-control-h-sm);
}
.bf-register--ai-settings .bf-badge {
  margin-left: var(--bf-space-sm);
}
.bf-ai-details .bf-ai-chunk {
  margin: 1px var(--bf-space-xs) 1px 0;
  text-transform: none;
  letter-spacing: 0;
  font-family: var(--bf-font-mono);
  font-stretch: 100%;
}
.bf-ai-details .bf-badge + .bf-badge {
  margin-left: 0;
}
.bf-sheet__toolbar .bf-ai-date {
  width: 10rem;
}
.bf-ai-wrap {
  max-width: 18rem;
  overflow-wrap: anywhere;
}
.bf-ai-split .bf-table-wrap {
  border: 0;
}

/* Launch readiness (/licenses/launch/): registers per office, the switch
   checklist and the env lines as plain text on light field (what the
   operator types into .env.prod). No buttons change configuration. */
.bf-register--launch td {
  vertical-align: top;
  padding-block: var(--bf-space-sm);
}
.bf-register--launch .bf-cell--license {
  width: 18rem;
  min-width: 18rem;
}
.bf-register--launch .bf-cell--case {
  width: 100%;
}
.bf-register--launch-checks .bf-cell--case {
  width: 40%;
}
.bf-register--launch-checks code,
.bf-launch-env code {
  font-size: 0.8125rem;
}
.bf-launch-env {
  border-top: 1px solid var(--bf-form-hairline);
}
.bf-launch-env p {
  margin: 0;
}
.bf-launch-env__lines {
  margin: 0;
  padding: var(--bf-space-md) var(--bf-space-lg);
  background: var(--bf-form-field);
  border: 1px solid var(--bf-form-rule);
  border-radius: var(--bf-radius-sm);
  color: var(--bf-form-ink);
  font-size: 0.875rem;
  line-height: 1.6;
  white-space: pre;
  overflow-x: auto;
}

/* --- admin: offices --- */
/* Office list, office detail and form, office delete, installation create. */

/* A one-line note under a part band, with its action at the right margin. */
.bf-admin-band-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--bf-space-sm) var(--bf-space-lg);
  min-height: var(--bf-row-h);
  padding: var(--bf-space-sm) var(--bf-space-xl);
  border-bottom: 1px solid var(--bf-form-hairline);
  color: var(--bf-form-label);
  font-size: 0.875rem;
}
.bf-admin-band-row--stack {
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}
.bf-admin-band-row strong {
  color: var(--bf-form-ink);
}
.bf-admin-band-row p {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: var(--bf-space-sm);
}

/* Light field: what the operator types, white controls on field green. */
.bf-admin-form {
  display: flex;
  flex-direction: column;
  gap: var(--bf-space-md);
  padding: var(--bf-space-lg) var(--bf-space-xl);
  background: var(--bf-form-field);
}
.bf-admin-form .bf-form-grid,
.bf-disclosure__body .bf-form-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
}
.bf-input.bf-mono {
  font-size: 0.875rem;
}

/* Sheet foot: the way back on the left, the page's action on the right. */
.bf-admin-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--bf-space-sm);
  margin: 0;
  padding: var(--bf-space-md) var(--bf-space-xl);
  border-top: 1px solid var(--bf-form-rule);
}

/* Pager under a register. */
.bf-admin-pager {
  display: flex;
  align-items: center;
  gap: var(--bf-space-md);
}

/* Ruled choice rows (new installation: Cloud / Manual). */
.bf-admin-choices {
  margin: 0;
  padding: 0;
  list-style: none;
}
.bf-admin-choices > li + li {
  border-top: 1px solid var(--bf-form-hairline);
}
.bf-admin-choice {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--bf-space-lg);
  padding: var(--bf-space-md) var(--bf-space-xl);
  color: var(--bf-form-ink);
  text-decoration: none;
}
.bf-admin-choice:hover {
  background: var(--bf-form-field);
}
.bf-admin-choice:focus-visible {
  outline: 2px solid var(--bf-form-ink);
  outline-offset: -2px;
}
.bf-admin-choice__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.bf-admin-choice__title {
  font-weight: 700;
  font-size: 1rem;
}
.bf-admin-choice__desc {
  color: var(--bf-form-label);
  font-size: 0.875rem;
}

/* Ruled note list (requirements, remarks). */
.bf-admin-notes {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.875rem;
}
.bf-admin-notes > li {
  padding: var(--bf-space-sm) var(--bf-space-xl);
  border-top: 1px solid var(--bf-form-hairline);
}
.bf-admin-notes > li:first-child {
  border-top: 0;
}
.bf-part-band + .bf-admin-disclosure > summary {
  border-top: 0;
}
.bf-admin-narrow-form {
  max-width: 28rem;
}

/* --- admin: onboarding --- */
/* "Nowy klient" wizard and the office sheet's "Postęp wdrożenia" part. */

/* Wizard track: the four steps as a ruled strip, current one filled. */
.bf-onboard-track {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  border-bottom: 1px solid var(--bf-form-rule);
  background: var(--bf-form-dark);
}
.bf-onboard-track__step {
  display: flex;
  align-items: center;
  gap: var(--bf-space-sm);
  min-height: var(--bf-row-h);
  padding: var(--bf-space-xs) var(--bf-space-lg);
  color: var(--bf-form-label);
  font-size: 0.8125rem;
}
.bf-onboard-track__step + .bf-onboard-track__step {
  border-left: 1px solid var(--bf-form-hairline);
}
.bf-onboard-track__step[aria-current="step"] {
  background: var(--bf-form-paper);
  color: var(--bf-form-ink);
  font-weight: 700;
}

/* Radio rows: a choice is a ruled row with its explanation under it. */
.bf-admin-radios {
  margin: 0;
  padding: 0;
  border: 0;
}
.bf-admin-radio {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: var(--bf-space-md);
  padding: var(--bf-space-md) var(--bf-space-xl);
  cursor: pointer;
}
.bf-admin-radio + .bf-admin-radio {
  border-top: 1px solid var(--bf-form-hairline);
}
.bf-admin-radio:hover {
  background: var(--bf-form-field);
}
.bf-admin-radio:has(input:checked) {
  background: var(--bf-form-dark);
}
.bf-admin-radio input {
  margin-top: 0.3rem;
  accent-color: var(--bf-form-ink);
}
.bf-admin-choice__desc {
  max-width: 68ch;
}

/* Error summary at the top of a form. */
.bf-form-summary {
  padding: var(--bf-space-sm) var(--bf-space-xl);
  border-bottom: 1px solid var(--bf-form-rule);
  background: var(--bf-form-paper);
  color: var(--bf-form-red);
  font-size: 0.875rem;
}
.bf-form-summary p { margin: 0; }
.bf-form-summary strong { color: var(--bf-form-ink); }

/* Progress: one ruled row per step — number, label + state, tag, action. */
.bf-onboard > .bf-onboard__summary {
  display: flex;
  align-items: center;
  min-height: var(--bf-row-h);
  padding: var(--bf-space-xs) var(--bf-space-xl);
  border-bottom: 1px solid var(--bf-form-hairline);
  color: var(--bf-form-label);
  font-size: 0.875rem;
  cursor: pointer;
}
.bf-onboard__steps {
  margin: 0;
  padding: 0;
  list-style: none;
}
.bf-onboard__step {
  display: grid;
  grid-template-columns: 1.5rem minmax(0, 1fr) 9rem 11rem;
  align-items: center;
  gap: var(--bf-space-md);
  min-height: 3rem;
  padding: var(--bf-space-xs) var(--bf-space-xl);
  border-bottom: 1px solid var(--bf-form-hairline);
}
.bf-onboard__step--done {
  background: var(--bf-form-dark);
}
.bf-onboard__num {
  color: var(--bf-form-label);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.bf-onboard__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.bf-onboard__label { font-weight: 600; color: var(--bf-form-ink); }
.bf-onboard__state { color: var(--bf-form-label); font-size: 0.8125rem; }
.bf-onboard__action { justify-self: end; }
.bf-onboard-token + .bf-onboard-token {
  padding-top: var(--bf-space-sm);
  border-top: 1px solid var(--bf-form-hairline);
}
.bf-onboard-token p { margin: 0 0 var(--bf-space-xs); max-width: 80ch; }

/* The office select spans the row: names plus NIP need the width. */
.bf-lic-grid > .bf-field:first-child:has(#id_office) {
  grid-column: 1 / -1;
}
.bf-lic-legend {
  padding: var(--bf-space-md) var(--bf-space-xl) 0;
}

/* Ctrl+K and "?" in the control plane. */
.bf-palette__empty {
  padding: var(--bf-space-md) var(--bf-space-lg);
  color: var(--bf-form-label);
  font-size: 0.8125rem;
}
.bf-shortcuts .bf-defs__row {
  grid-template-columns: 8rem minmax(0, 1fr);
}

/* Long notes stay readable: a measure, not the sheet width. */
.bf-inst-note--top,
.bf-admin-notes > li,
.bf-sheet__body > p {
  max-width: 80ch;
}

/* --- admin: installations --- */
/* Installation list, detail, operation confirmation, console. */
.bf-register--installations .bf-cell--case { width: 100%; min-width: 10rem; }
.bf-register--installations .bf-cell--case .bf-cell__title { overflow-wrap: break-word; word-break: normal; }
.bf-register .bf-cell--uuid { width: 10rem; max-width: 10rem; }
.bf-register .bf-cell--token { max-width: 28rem; }
.bf-register .bf-cell--output { min-width: 16rem; }
.bf-register .bf-cell--token .bf-cell__clip,
.bf-register .bf-cell--uuid .bf-cell__clip { font-size: 0.8125rem; }
.bf-register td .bf-cell__sub.bf-mono { font-size: 0.75rem; }

.bf-inst-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bf-space-sm);
}
.bf-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--bf-space-md);
}
/* A ruled caption row opening a sub-part inside a lettered part. */
.bf-inst-subhead {
  display: flex;
  align-items: center;
  gap: var(--bf-space-sm);
  margin: 0;
  min-height: var(--bf-row-h);
  padding: var(--bf-space-xs) var(--bf-space-xl);
  border-top: 1px solid var(--bf-form-rule);
  border-bottom: 1px solid var(--bf-form-hairline);
  font-size: inherit;
}
.bf-inst-subhead--first,
.bf-part-band + .bf-inst-subhead { border-top: 0; }
.bf-inst-subhead__end { margin-left: auto; font-size: 0.8125rem; }
#bfops-table > .bf-inst-subhead { border-top: 0; }
.bf-inst-ruled { border-top: 1px solid var(--bf-form-rule); }
.bf-inst-note--top { border-top: 0; border-bottom: 1px solid var(--bf-form-hairline); }
.bf-inst-split--even { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1280px) {
  .bf-inst-split--even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
.bf-inst-span { grid-column: 1 / -1; }
.bf-inst-steps {
  margin: 0;
  padding-left: 1.25rem;
  list-style: decimal;
  max-width: 68ch;
}
.bf-inst-steps > li + li { margin-top: 2px; }
/* Show-once value (fresh token / rotated secret): ink-ruled, like the
   "waiting" tag; never red. */
.bf-inst-callout {
  padding: var(--bf-space-md) var(--bf-space-lg);
  border: 1px solid var(--bf-form-ink);
  border-radius: var(--bf-radius-sm);
  background: var(--bf-form-paper);
}
.bf-inst-callout > * + * { margin-top: var(--bf-space-sm); }
.bf-inst-callout__title { font-weight: 700; color: var(--bf-form-ink); }
.bf-inst-output {
  margin: var(--bf-space-sm) 0 0;
  max-height: 18rem;
  overflow: auto;
  padding: var(--bf-space-sm) var(--bf-space-md);
  border: 1px solid var(--bf-form-rule);
  border-radius: var(--bf-radius-sm);
  background: var(--bf-form-dark);
  color: var(--bf-form-ink);
  font-family: var(--bf-font-mono);
  font-size: 0.75rem;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.bf-sheet__body > .bf-inst-output:first-child { margin-top: 0; }
.bf-inst-output--error { border-color: var(--bf-form-ink); background: var(--bf-form-paper); }
.bf-inst-output-toggle > summary {
  cursor: pointer;
  font-size: 0.8125rem;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.bf-inst-warnings > li { grid-template-columns: minmax(0, 1fr); }
.bf-inst-console {
  height: 65vh;
  min-height: 24rem;
  padding: var(--bf-space-sm);
  border-top: 1px solid var(--bf-form-rule);
  background: var(--bf-form-ink);
}

/* Inline confirmation under an htmx action form (static/js/biuroflow.js). */
.bf-inline-confirm {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--bf-space-sm);
  margin-top: var(--bf-space-md);
  padding: var(--bf-space-sm) var(--bf-space-md);
  border: 1px solid var(--bf-form-ink);
  border-radius: var(--bf-radius-sm);
  background: var(--bf-form-field);
}
.bf-inline-confirm p {
  flex: 1 1 20rem;
  margin: 0;
  color: var(--bf-form-ink);
  font-weight: 600;
}

/* --- admin: help --- */
/* /help/ sheet (help_center), {% term %} margin notes and the
   {% help_notes %} part. Built from sheet/band/defs/register/disclosure. */
.bf-help [hidden] { display: none !important; }
.bf-help [id] { scroll-margin-top: var(--bf-space-lg); }

.bf-help-toolbar__status {
  margin: 0;
  color: var(--bf-form-label);
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
}
.bf-help-toc {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bf-space-xs) var(--bf-space-xl);
  padding: var(--bf-space-sm) var(--bf-space-xl);
  border-bottom: 1px solid var(--bf-form-rule);
  font-size: 0.875rem;
}
.bf-help-toc a,
.bf-help-termlinks a,
.bf-help-steps a,
.bf-help-defs a,
.bf-help-more {
  color: var(--bf-form-ink);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--bf-form-rule);
  text-underline-offset: 3px;
}
.bf-help-toc a:hover,
.bf-help-termlinks a:hover,
.bf-help-steps a:hover,
.bf-help-defs a:hover,
.bf-help-more:hover {
  text-decoration-color: currentColor;
}

/* One path / one consequence: a ruled sub-head inside its lettered part. */
.bf-help-subhead {
  margin: 0;
  padding: var(--bf-space-lg) var(--bf-space-xl) var(--bf-space-xs);
  border-top: 1px solid var(--bf-form-rule);
  color: var(--bf-form-ink);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.3;
  text-wrap: balance;
}
.bf-part-band + .bf-help-item > .bf-help-subhead { border-top: 0; }
.bf-help-lead {
  margin: 0;
  max-width: 72ch;
  padding: 0 var(--bf-space-xl) var(--bf-space-md);
  color: var(--bf-form-ink);
}

/* Step register: real sequence, so the number column stays. */
.bf-help-steps { border-top: 1px solid var(--bf-form-hairline); }
.bf-help-steps tbody td {
  height: auto;
  min-height: var(--bf-row-h);
  padding-block: var(--bf-space-sm);
  vertical-align: top;
}
.bf-help-steps tbody td:nth-child(2) { max-width: 72ch; }
.bf-help-steps .bf-cell--num,
.bf-help-steps th.bf-cell--num {
  width: 3.5rem;
  text-align: left;
}
.bf-help-steps__screen { width: 14rem; }

/* Definition rows holding prose: block dd, paragraphs stacked. */
.bf-help .bf-defs__row dd,
.bf-help-defs .bf-defs__row dd { display: block; }
.bf-help .bf-defs__row dd > p,
.bf-help-defs .bf-defs__row dd > p {
  margin: 0;
  max-width: 72ch;
}
.bf-help .bf-defs__row dd > p + p { margin-top: var(--bf-space-xs); }
.bf-help-defs { border-top: 1px solid var(--bf-form-hairline); }
.bf-help-terms .bf-defs__row {
  grid-template-columns: 14rem minmax(0, 1fr);
  padding-block: var(--bf-space-sm);
}
.bf-help-terms .bf-defs__row dt {
  padding-top: 0;
  color: var(--bf-form-ink);
  font-weight: 700;
}
.bf-help-synonyms { color: var(--bf-form-label); font-size: 0.8125rem; }
.bf-help-synonyms .bf-caption { margin-right: var(--bf-space-xs); }
.bf-help-effects {
  margin: 0;
  max-width: 72ch;
  padding-left: 1.125rem;
  list-style: square;
}
.bf-help-effects > li + li { margin-top: var(--bf-space-xs); }

/* Answers read on paper, not on the light (input) field. */
.bf-help-qa > .bf-disclosure__body { background: var(--bf-form-paper); }
.bf-help-qa > .bf-disclosure__body p { margin: 0; max-width: 72ch; }
.bf-help-qa > .bf-disclosure__body > * + * { margin-top: var(--bf-space-sm); }
.bf-part-band + .bf-help-qa > summary,
.bf-part-band + .bf-help-notes > .bf-help-qa:first-child > summary { border-top: 0; }
.bf-help-related .bf-caption { margin-right: var(--bf-space-xs); }

/* Arriving from a link (#slownik-…, #pytanie-…): the target is marked
   with the dark field, BiuroFlow pointing at its own entry. */
.bf-defs__row.bf-help-item:target,
details.bf-help-item:target > summary,
.bf-help-item:target > .bf-help-subhead {
  background: var(--bf-form-dark);
}

/* {% term %}: dotted label + ruled "?" that opens a popover note. */
.bf-term__text {
  text-decoration: underline dotted var(--bf-form-rule);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.bf-term__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin-left: 3px;
  padding: 0;
  vertical-align: 1px;
  border: 1px solid var(--bf-form-rule);
  border-radius: var(--bf-radius-sm);
  background: var(--bf-form-paper);
  color: var(--bf-form-label);
  font-family: var(--bf-font-mono);
  font-size: 0.6875rem;
  font-weight: 700;
  font-stretch: 100%;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
}
.bf-term__toggle:hover,
.bf-term__toggle:focus-visible {
  border-color: var(--bf-form-ink);
  background: var(--bf-form-field);
  color: var(--bf-form-ink);
}
.bf-term__toggle:focus-visible {
  outline: 2px solid var(--bf-form-ink);
  outline-offset: 2px;
}
/* The note sits in the top layer but still inherits from its DOM parent
   (a caption, a band): reset type and case. Centered where anchor
   positioning is missing (the UA popover default). */
.bf-term__note {
  box-sizing: border-box;
  width: min(22rem, calc(100vw - 32px));
  padding: var(--bf-space-md) var(--bf-space-lg);
  border: 1px solid var(--bf-form-ink);
  border-radius: var(--bf-radius-sm);
  background: var(--bf-form-paper);
  color: var(--bf-form-ink);
  font-family: var(--bf-font-sans);
  font-size: 0.875rem;
  font-weight: 400;
  font-stretch: 100%;
  line-height: 1.5;
  letter-spacing: normal;
  text-align: left;
  text-transform: none;
  white-space: normal;
  box-shadow: none;
}
.bf-term__title {
  display: block;
  margin-bottom: 2px;
  font-weight: 700;
}
.bf-term__more {
  display: inline-block;
  margin-top: var(--bf-space-xs);
  color: var(--bf-form-ink);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
@supports (position-area: block-end) {
  .bf-term__note {
    inset: auto;
    margin: 4px 0;
    position-area: block-end span-inline-end;
    position-try-fallbacks: flip-block, flip-inline;
  }
}